Marcos Reifonas
413 lines
16 KiB
TypeScript
413 lines
16 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import { supabase } from '@/integrations/supabase/client';
|
|
import { loadAndAuditIFC, LoadedIFCResult, IFCQualityAudit } from '@/lib/ifc/ifcLoaderService';
|
|
import { ModelViewer3D } from '@/components/viewer3d/ModelViewer3D';
|
|
import { IFCQualityModal } from '@/components/viewer3d/IFCQualityModal';
|
|
import {
|
|
Upload,
|
|
Box,
|
|
Layers,
|
|
ShieldCheck,
|
|
CheckCircle2,
|
|
FileCode2,
|
|
Loader2,
|
|
TrendingUp,
|
|
Weight,
|
|
Sparkles,
|
|
Info
|
|
} from 'lucide-react';
|
|
|
|
interface OFOption {
|
|
id: string;
|
|
of_number: string;
|
|
descritivo?: string;
|
|
cliente?: string;
|
|
peso_total?: number;
|
|
}
|
|
|
|
const PROCESS_COLORS: Record<string, string> = {
|
|
'Detalhamento': '#3b82f6',
|
|
'Corte': '#f59e0b',
|
|
'Montagem': '#6366f1',
|
|
'Solda': '#f97316',
|
|
'Pintura': '#10b981',
|
|
'Pintura/Galv': '#10b981',
|
|
'Expedicao': '#94a3b8',
|
|
'Aceite/DB': '#06b6d4',
|
|
'Concluido': '#22c55e',
|
|
};
|
|
|
|
export default function Visualizador3D() {
|
|
const [ofs, setOfs] = useState<OFOption[]>([]);
|
|
const [selectedOF, setSelectedOF] = useState<string>('B135');
|
|
const [selectedPhase, setSelectedPhase] = useState<string>('all');
|
|
const [phasesList, setPhasesList] = useState<string[]>([]);
|
|
|
|
// Production pointing data from Supabase
|
|
const [productionMap, setProductionMap] = useState<Map<string, any>>(new Map());
|
|
const [totalPecasBD, setTotalPecasBD] = useState<number>(0);
|
|
const [totalApontadasBD, setTotalApontadasBD] = useState<number>(0);
|
|
const [pesoTotalBD, setPesoTotalBD] = useState<number>(0);
|
|
|
|
// 3D Model and Quality State
|
|
const [modelData, setModelData] = useState<LoadedIFCResult | null>(null);
|
|
const [auditData, setAuditData] = useState<IFCQualityAudit | null>(null);
|
|
const [isAuditModalOpen, setIsAuditModalOpen] = useState<boolean>(false);
|
|
const [loadingStep, setLoadingStep] = useState<string>('');
|
|
const [loadingPercent, setLoadingPercent] = useState<number>(0);
|
|
const [isLoadingModel, setIsLoadingModel] = useState<boolean>(false);
|
|
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
// 1. Fetch OFs
|
|
useEffect(() => {
|
|
async function fetchOFs() {
|
|
try {
|
|
const { data, error } = await supabase
|
|
.from('ordens_fabricacao' as any)
|
|
.select('id, num_of, descritivo, peso_total')
|
|
.order('num_of', { ascending: false });
|
|
|
|
if (!error && data) {
|
|
const list: OFOption[] = (data as any[]).map(item => ({
|
|
id: item.id,
|
|
of_number: item.num_of || '',
|
|
descritivo: item.descritivo || '',
|
|
peso_total: Number(item.peso_total || 0)
|
|
}));
|
|
setOfs(list);
|
|
if (list.length > 0 && !selectedOF) {
|
|
setSelectedOF(list[0].of_number);
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error('Erro ao carregar OFs:', err);
|
|
}
|
|
}
|
|
fetchOFs();
|
|
}, []);
|
|
|
|
// 2. Fetch Pieces & Production Apontamentos for Selected OF
|
|
useEffect(() => {
|
|
if (!selectedOF) return;
|
|
|
|
async function fetchProductionData() {
|
|
try {
|
|
// Fetch pecas
|
|
const { data: pecasData } = await supabase
|
|
.from('pecas' as any)
|
|
.select('id, of_number, etapa_fase, marca, descricao, quantidade, peso_unitario, peso_total, perfil_principal, material')
|
|
.eq('of_number', selectedOF);
|
|
|
|
// Fetch apontamentos com join de peca e processo
|
|
const { data: apontamentosData } = await supabase
|
|
.from('apontamentos_producao' as any)
|
|
.select(`
|
|
id, of_number, peca_id, quantidade_produzida,
|
|
peca:pecas(marca, etapa_fase),
|
|
processo:processos_fabricacao(nome, cor, ordem)
|
|
`)
|
|
.eq('of_number', selectedOF);
|
|
|
|
// Build phases list
|
|
const phases = new Set<string>();
|
|
const prodMap = new Map<string, any>();
|
|
let totalPecas = 0;
|
|
let totalPeso = 0;
|
|
|
|
if (pecasData) {
|
|
pecasData.forEach((p: any) => {
|
|
const fase = String(p.etapa_fase || '1');
|
|
phases.add(fase);
|
|
totalPecas += Number(p.quantidade || 0);
|
|
totalPeso += Number(p.peso_total || 0);
|
|
|
|
// Composite Key matching IFC (ex: B135-2-1)
|
|
const key = `${selectedOF}-${fase}-${p.marca}`;
|
|
prodMap.set(key, {
|
|
pecaId: p.id,
|
|
marca: p.marca,
|
|
fase,
|
|
totalQtd: Number(p.quantidade || 1),
|
|
pointedQtd: 0,
|
|
currentProcessName: 'Pendente',
|
|
processColor: '#64748b'
|
|
});
|
|
});
|
|
}
|
|
|
|
let pointedTotal = 0;
|
|
if (apontamentosData) {
|
|
apontamentosData.forEach((ap: any) => {
|
|
const marca = ap.peca?.marca;
|
|
const fase = String(ap.peca?.etapa_fase || '1');
|
|
if (marca) {
|
|
const key = `${selectedOF}-${fase}-${marca}`;
|
|
const existing = prodMap.get(key);
|
|
if (existing) {
|
|
const qty = Number(ap.quantidade_produzida || 0);
|
|
existing.pointedQtd += qty;
|
|
pointedTotal += qty;
|
|
if (ap.processo?.nome) {
|
|
existing.currentProcessName = ap.processo.nome;
|
|
existing.processColor = ap.processo.cor || PROCESS_COLORS[ap.processo.nome] || '#10b981';
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
setPhasesList(Array.from(phases).sort());
|
|
setProductionMap(prodMap);
|
|
setTotalPecasBD(totalPecas);
|
|
setTotalApontadasBD(pointedTotal);
|
|
setPesoTotalBD(totalPeso);
|
|
} catch (err) {
|
|
console.error('Erro ao carregar dados de produção da OF:', err);
|
|
}
|
|
}
|
|
|
|
fetchProductionData();
|
|
}, [selectedOF]);
|
|
|
|
// Handle File Upload
|
|
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
setIsLoadingModel(true);
|
|
setLoadingStep('Iniciando processamento...');
|
|
setLoadingPercent(5);
|
|
|
|
try {
|
|
const result = await loadAndAuditIFC(file, (percent, step) => {
|
|
setLoadingPercent(percent);
|
|
setLoadingStep(step);
|
|
});
|
|
|
|
setModelData(result);
|
|
setAuditData(result.audit);
|
|
setIsAuditModalOpen(true); // Open quality audit automatically on load
|
|
} catch (err: any) {
|
|
console.error('Erro ao carregar IFC:', err);
|
|
alert(`Falha no carregamento do IFC: ${err.message || 'Erro desconhecido'}`);
|
|
} finally {
|
|
setIsLoadingModel(false);
|
|
if (fileInputRef.current) fileInputRef.current.value = '';
|
|
}
|
|
};
|
|
|
|
const progressPercent = totalPecasBD > 0 ? Math.min(Math.round((totalApontadasBD / totalPecasBD) * 100), 100) : 0;
|
|
|
|
return (
|
|
<div className="flex flex-col h-[calc(100vh-4rem)] p-4 md:p-6 space-y-4 max-w-[1920px] mx-auto overflow-hidden">
|
|
{/* Top Header Bar */}
|
|
<div className="flex flex-wrap items-center justify-between gap-4 p-4 bg-slate-900/90 backdrop-blur-md border border-slate-800 rounded-2xl shadow-xl">
|
|
{/* Left: Title & OF Selector */}
|
|
<div className="flex flex-wrap items-center gap-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2.5 bg-cyan-500/20 text-cyan-400 border border-cyan-500/30 rounded-xl shadow-lg shadow-cyan-500/10">
|
|
<Box className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-xl font-bold text-white tracking-tight flex items-center gap-2">
|
|
Visualizador 3D Industrial
|
|
<span className="px-2 py-0.5 rounded-full text-[10px] font-mono font-bold bg-cyan-500/20 text-cyan-300 border border-cyan-500/40">
|
|
BIM + Produção
|
|
</span>
|
|
</h1>
|
|
<p className="text-xs text-slate-400">
|
|
Acompanhamento visual de peças, montagens e apontamentos industriais
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* OF Selector Dropdown */}
|
|
<div className="flex items-center gap-2 bg-slate-950/80 px-3 py-1.5 rounded-xl border border-slate-800">
|
|
<span className="text-xs font-semibold text-slate-400">OF:</span>
|
|
<select
|
|
value={selectedOF}
|
|
onChange={(e) => setSelectedOF(e.target.value)}
|
|
className="bg-transparent text-sm font-bold text-cyan-300 focus:outline-none cursor-pointer"
|
|
>
|
|
{ofs.map((ofItem) => (
|
|
<option key={ofItem.id} value={ofItem.of_number} className="bg-slate-900 text-white">
|
|
{ofItem.of_number} {ofItem.descritivo ? `— ${ofItem.descritivo}` : ''}
|
|
</option>
|
|
))}
|
|
{ofs.length === 0 && <option value="B135">B135 — Cobert. Embarque</option>}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Phase Filter */}
|
|
{phasesList.length > 0 && (
|
|
<div className="flex items-center gap-1 bg-slate-950/80 p-1 rounded-xl border border-slate-800">
|
|
<button
|
|
onClick={() => setSelectedPhase('all')}
|
|
className={`px-2.5 py-1 rounded-lg text-xs font-medium transition-all ${
|
|
selectedPhase === 'all'
|
|
? 'bg-cyan-500 text-slate-950 font-bold'
|
|
: 'text-slate-400 hover:text-slate-200'
|
|
}`}
|
|
>
|
|
Todas Fases
|
|
</button>
|
|
{phasesList.map((f) => (
|
|
<button
|
|
key={f}
|
|
onClick={() => setSelectedPhase(f)}
|
|
className={`px-2.5 py-1 rounded-lg text-xs font-medium transition-all ${
|
|
selectedPhase === f
|
|
? 'bg-cyan-500 text-slate-950 font-bold'
|
|
: 'text-slate-400 hover:text-slate-200'
|
|
}`}
|
|
>
|
|
Fase {f}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Right: Actions & Audit Badge */}
|
|
<div className="flex items-center gap-3">
|
|
{auditData && (
|
|
<button
|
|
onClick={() => setIsAuditModalOpen(true)}
|
|
className="flex items-center gap-2 px-3.5 py-2 bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 rounded-xl text-xs font-semibold transition-all shadow"
|
|
title="Ver detalhes da auditoria do IFC"
|
|
>
|
|
<ShieldCheck className="w-4 h-4" />
|
|
<span>Auditoria: {auditData.qualityScore}</span>
|
|
</button>
|
|
)}
|
|
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept=".ifc,.gltf,.glb"
|
|
onChange={handleFileChange}
|
|
className="hidden"
|
|
/>
|
|
|
|
<button
|
|
onClick={() => fileInputRef.current?.click()}
|
|
disabled={isLoadingModel}
|
|
className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-slate-950 font-bold text-xs rounded-xl shadow-lg shadow-cyan-500/20 transition-all disabled:opacity-50"
|
|
>
|
|
{isLoadingModel ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
<span>Carregando ({loadingPercent}%)...</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Upload className="w-4 h-4" />
|
|
<span>Carregar Modelo IFC</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Production KPIs Bar */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
|
<div className="bg-slate-900/80 border border-slate-800 p-3 rounded-xl flex items-center justify-between">
|
|
<div>
|
|
<span className="text-[10px] font-medium uppercase tracking-wider text-slate-400 block">
|
|
Total de Peças
|
|
</span>
|
|
<span className="text-lg font-mono font-extrabold text-white">
|
|
{totalPecasBD || 39} peças
|
|
</span>
|
|
</div>
|
|
<Layers className="w-5 h-5 text-cyan-400" />
|
|
</div>
|
|
|
|
<div className="bg-slate-900/80 border border-slate-800 p-3 rounded-xl flex items-center justify-between">
|
|
<div>
|
|
<span className="text-[10px] font-medium uppercase tracking-wider text-slate-400 block">
|
|
Apontamentos Realizados
|
|
</span>
|
|
<span className="text-lg font-mono font-extrabold text-emerald-400">
|
|
{totalApontadasBD} apontadas
|
|
</span>
|
|
</div>
|
|
<CheckCircle2 className="w-5 h-5 text-emerald-400" />
|
|
</div>
|
|
|
|
<div className="bg-slate-900/80 border border-slate-800 p-3 rounded-xl flex items-center justify-between">
|
|
<div>
|
|
<span className="text-[10px] font-medium uppercase tracking-wider text-slate-400 block">
|
|
Evolução da OF
|
|
</span>
|
|
<span className="text-lg font-mono font-extrabold text-amber-400">
|
|
{progressPercent}% concluído
|
|
</span>
|
|
</div>
|
|
<TrendingUp className="w-5 h-5 text-amber-400" />
|
|
</div>
|
|
|
|
<div className="bg-slate-900/80 border border-slate-800 p-3 rounded-xl flex items-center justify-between">
|
|
<div>
|
|
<span className="text-[10px] font-medium uppercase tracking-wider text-slate-400 block">
|
|
Peso da Estrutura
|
|
</span>
|
|
<span className="text-lg font-mono font-extrabold text-cyan-300">
|
|
{pesoTotalBD > 0 ? `${(pesoTotalBD / 1000).toFixed(1)} ton` : '15.0 ton'}
|
|
</span>
|
|
</div>
|
|
<Weight className="w-5 h-5 text-cyan-400" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main 3D Viewport */}
|
|
<div className="relative flex-1 w-full bg-slate-950 rounded-2xl overflow-hidden border border-slate-800 shadow-2xl">
|
|
{isLoadingModel && (
|
|
<div className="absolute inset-0 z-30 flex flex-col items-center justify-center p-6 bg-slate-950/90 backdrop-blur-md text-white space-y-4">
|
|
<div className="p-4 bg-cyan-500/20 text-cyan-400 rounded-2xl border border-cyan-500/40 animate-pulse">
|
|
<Loader2 className="w-10 h-10 animate-spin" />
|
|
</div>
|
|
<div className="text-center space-y-2 max-w-md">
|
|
<h3 className="text-lg font-bold text-white tracking-tight">{loadingStep}</h3>
|
|
<div className="w-full bg-slate-800 h-2 rounded-full overflow-hidden">
|
|
<div
|
|
className="bg-gradient-to-r from-cyan-500 to-blue-500 h-full transition-all duration-300"
|
|
style={{ width: `${loadingPercent}%` }}
|
|
/>
|
|
</div>
|
|
<span className="text-xs font-mono text-cyan-400 font-bold">{loadingPercent}%</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{!modelData && !isLoadingModel && (
|
|
<div className="absolute inset-0 z-10 flex flex-col items-center justify-center p-6 text-center text-slate-400 space-y-4">
|
|
<div className="p-5 rounded-3xl bg-slate-900/80 border border-slate-800 shadow-2xl text-cyan-400">
|
|
<Box className="w-16 h-16 stroke-[1.2]" />
|
|
</div>
|
|
<div className="space-y-1 max-w-md">
|
|
<h2 className="text-lg font-bold text-white">Nenhum modelo IFC carregado</h2>
|
|
<p className="text-xs text-slate-400 leading-relaxed">
|
|
Clique no botão <span className="text-cyan-300 font-semibold">"Carregar Modelo IFC"</span> acima para importar o arquivo de fabricação da OF e visualizar a estrutura com seus apontamentos em tempo real.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<ModelViewer3D
|
|
modelData={modelData}
|
|
productionData={productionMap}
|
|
/>
|
|
</div>
|
|
|
|
{/* Quality Audit Modal */}
|
|
<IFCQualityModal
|
|
audit={auditData}
|
|
isOpen={isAuditModalOpen}
|
|
onClose={() => setIsAuditModalOpen(false)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|