Marcos Reifonas
111 lines
4.1 KiB
TypeScript
111 lines
4.1 KiB
TypeScript
import React from 'react';
|
|
import { PieceInfo } from '@/lib/ifc/ifcLoaderService';
|
|
import { Box, Layers, CheckCircle2, Clock } from 'lucide-react';
|
|
|
|
interface PieceHoverTooltipProps {
|
|
piece: PieceInfo | null;
|
|
position: { x: number; y: number } | null;
|
|
productionInfo?: {
|
|
pointedQty?: number;
|
|
totalQty?: number;
|
|
currentStage?: string;
|
|
stageColor?: string;
|
|
};
|
|
}
|
|
|
|
export const PieceHoverTooltip: React.FC<PieceHoverTooltipProps> = ({
|
|
piece,
|
|
position,
|
|
productionInfo,
|
|
}) => {
|
|
if (!piece || !position) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed pointer-events-none z-40 p-4 rounded-2xl bg-slate-900/95 backdrop-blur-xl border border-cyan-500/40 shadow-2xl shadow-cyan-950/60 text-slate-100 min-w-[260px] animate-in fade-in zoom-in-95 duration-150"
|
|
style={{
|
|
left: `${position.x + 16}px`,
|
|
top: `${position.y + 16}px`,
|
|
maxWidth: '320px',
|
|
}}
|
|
>
|
|
{/* Header Badge */}
|
|
<div className="flex items-center justify-between gap-2 pb-2.5 mb-2.5 border-b border-slate-800">
|
|
<div className="flex items-center gap-2">
|
|
<div className="p-1.5 rounded-lg bg-cyan-500/20 text-cyan-400 border border-cyan-500/30">
|
|
<Box className="w-4 h-4" />
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] uppercase font-mono tracking-widest text-slate-400 block">
|
|
Marca Principal
|
|
</span>
|
|
<span className="text-base font-extrabold text-cyan-300 font-mono tracking-tight">
|
|
{piece.pieceMark || 'Sem Marca'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{piece.phase && (
|
|
<span className="px-2 py-0.5 rounded-full text-[10px] font-bold font-mono bg-slate-800 text-slate-300 border border-slate-700">
|
|
Fase {piece.phase}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Details Grid */}
|
|
<div className="space-y-1.5 text-xs">
|
|
{piece.section && (
|
|
<div className="flex items-center justify-between text-slate-300">
|
|
<span className="text-slate-400">Perfil / Bitola:</span>
|
|
<span className="font-semibold text-white font-mono bg-slate-950/60 px-2 py-0.5 rounded border border-slate-800">
|
|
{piece.section}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{piece.childrenIDs && piece.childrenIDs.length > 0 && (
|
|
<div className="flex items-center justify-between text-slate-300">
|
|
<span className="text-slate-400">Componentes:</span>
|
|
<span className="font-semibold text-slate-200">
|
|
{piece.childrenIDs.length} peças soldadas
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Production Apontamentos */}
|
|
{productionInfo && (
|
|
<div className="mt-3 pt-2.5 border-t border-slate-800/80 space-y-1.5">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-400 flex items-center gap-1.5">
|
|
<CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
|
|
Apontamento:
|
|
</span>
|
|
<span className="font-bold text-emerald-400 font-mono">
|
|
{productionInfo.pointedQty ?? 0} de {productionInfo.totalQty ?? 1} peças
|
|
</span>
|
|
</div>
|
|
|
|
{productionInfo.currentStage && (
|
|
<div className="flex items-center justify-between text-[11px]">
|
|
<span className="text-slate-400 flex items-center gap-1">
|
|
<Clock className="w-3 h-3 text-amber-400" />
|
|
Etapa Atual:
|
|
</span>
|
|
<span
|
|
className="px-2 py-0.5 rounded-full font-bold uppercase tracking-wider"
|
|
style={{
|
|
backgroundColor: `${productionInfo.stageColor || '#10b981'}20`,
|
|
color: productionInfo.stageColor || '#10b981',
|
|
border: `1px solid ${productionInfo.stageColor || '#10b981'}40`,
|
|
}}
|
|
>
|
|
{productionInfo.currentStage}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|