From 3ec68e74a214df545a285de47e4db453ec93ae87 Mon Sep 17 00:00:00 2001
From: Marcos Reifonas <m.reifonas@gmail.com>
Date: Mon, 21 Sep 2026 17:45:40 +0000
Subject: [PATCH] feat(viewer3d): aplicar cores oficiais nos botoes de processo
 e sincronizar no 3D

---
 src/components/viewer3d/ModelViewer3D.tsx   | 20 +++++++++-
 src/components/viewer3d/Viewer3DSidebar.tsx | 42 ++++++++++++++-------
 2 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/src/components/viewer3d/ModelViewer3D.tsx b/src/components/viewer3d/ModelViewer3D.tsx
index 0964510..e306e02 100644
--- a/src/components/viewer3d/ModelViewer3D.tsx
+++ b/src/components/viewer3d/ModelViewer3D.tsx
@@ -364,8 +364,24 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
           'montagem de obra': 5,
         };
 
+        const PROCESS_COLOR_MAP: Record<string, string> = {
+          'corte': '#3b82f6',
+          'solda': '#f97316',
+          'pintura': '#10b981',
+          'pintura/galv': '#10b981',
+          'pintura/galvanizacao': '#10b981',
+          'pintura / galvanizacao': '#10b981',
+          'galvanizacao': '#10b981',
+          'expedicao': '#06b6d4',
+          'expedição': '#06b6d4',
+          'montagem': '#6366f1',
+          'montagem obra': '#6366f1',
+          'montagem de obra': '#6366f1',
+        };
+
         const targetProcKey = String(selectedProcess || 'all').toLowerCase();
         const targetOrder = PROCESS_ORDER_MAP[targetProcKey] || 0;
+        const targetColorHex = PROCESS_COLOR_MAP[targetProcKey] || '#22c55e';
 
         let isPointedInTargetProcess = false;
         if (selectedProcess !== 'all' && prod && prod.pointedQtd > 0) {
@@ -389,9 +405,9 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
         if (selectedProcess !== 'all') {
           // --- MODO INOVAÇÃO: Destaque por Processo ---
           if (isPointedInTargetProcess) {
-            // Peça apontada no processo: SÓLIDO VERDE BRILHANTE
+            // Peça apontada no processo: SÓLIDO COM A COR CORRESPONDENTE DO PROCESSO
             mesh.material = new THREE.MeshStandardMaterial({
-              color: new THREE.Color('#22c55e'), // Verde Sólido
+              color: new THREE.Color(targetColorHex),
               metalness: 0.35,
               roughness: 0.45,
               transparent: opacity < 100,
diff --git a/src/components/viewer3d/Viewer3DSidebar.tsx b/src/components/viewer3d/Viewer3DSidebar.tsx
index e957999..2a3d68c 100644
--- a/src/components/viewer3d/Viewer3DSidebar.tsx
+++ b/src/components/viewer3d/Viewer3DSidebar.tsx
@@ -37,12 +37,12 @@ interface Viewer3DSidebarProps {
 }
 
 const FABRICATION_PROCESSES = [
-  { id: 'all', label: 'Todos', icon: Layers },
-  { id: 'Corte', label: 'Corte', icon: Scissors },
-  { id: 'Solda', label: 'Solda', icon: Flame },
-  { id: 'Pintura', label: 'Pintura', icon: Paintbrush },
-  { id: 'Expedicao', label: 'Expedição', icon: Truck },
-  { id: 'Montagem', label: 'Montagem', icon: Wrench },
+  { id: 'all', label: 'Todos', icon: Layers, color: '#0284c7' },
+  { id: 'Corte', label: 'Corte', icon: Scissors, color: '#3b82f6' },
+  { id: 'Solda', label: 'Solda', icon: Flame, color: '#f97316' },
+  { id: 'Pintura', label: 'Pintura', icon: Paintbrush, color: '#10b981' },
+  { id: 'Expedicao', label: 'Expedição', icon: Truck, color: '#06b6d4' },
+  { id: 'Montagem', label: 'Montagem', icon: Wrench, color: '#6366f1' },
 ];
 
 export const Viewer3DSidebar: React.FC<Viewer3DSidebarProps> = ({
@@ -86,7 +86,7 @@ export const Viewer3DSidebar: React.FC<Viewer3DSidebarProps> = ({
 
         {/* Corpo com Rolagem Suave */}
         <div className="flex-1 overflow-y-auto p-3 space-y-4 custom-scrollbar">
-          {/* Grupo 1: Destaque por Processo Industrial (Inovação Híbrida: Verde Sólido + Aramado Cinza Fantasma) */}
+          {/* Grupo 1: Destaque por Processo Industrial com Cores Correspondentes */}
           <div className="space-y-1.5">
             <div className="flex items-center justify-between">
               <label className="text-[11px] font-bold uppercase tracking-wider text-slate-600 dark:text-slate-400 flex items-center gap-1.5">
@@ -97,7 +97,7 @@ export const Viewer3DSidebar: React.FC<Viewer3DSidebarProps> = ({
                 BIM + Fábrica
               </span>
             </div>
-            <div className="grid grid-cols-3 gap-1 bg-slate-100 dark:bg-slate-950/60 p-1 rounded-xl border border-slate-200 dark:border-slate-800">
+            <div className="grid grid-cols-3 gap-1.5 bg-slate-100 dark:bg-slate-950/60 p-1.5 rounded-xl border border-slate-200 dark:border-slate-800">
               {FABRICATION_PROCESSES.map((proc) => {
                 const Icon = proc.icon;
                 const isSelected = selectedProcess === proc.id;
@@ -105,15 +105,29 @@ export const Viewer3DSidebar: React.FC<Viewer3DSidebarProps> = ({
                   <button
                     key={proc.id}
                     onClick={() => onSelectProcess && onSelectProcess(proc.id)}
-                    className={`flex flex-col items-center justify-center gap-1 py-1.5 px-1 rounded-lg text-[10px] font-bold transition-all ${
+                    style={
                       isSelected
-                        ? 'bg-emerald-600 text-white shadow-md shadow-emerald-600/30'
-                        : 'text-slate-700 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-200/60 dark:hover:bg-slate-800/60'
+                        ? {
+                            backgroundColor: proc.color,
+                            color: '#ffffff',
+                            boxShadow: `0 4px 12px ${proc.color}50`,
+                            borderColor: proc.color,
+                          }
+                        : {
+                            backgroundColor: `${proc.color}18`,
+                            color: proc.color,
+                            borderColor: `${proc.color}35`,
+                          }
+                    }
+                    className={`flex flex-col items-center justify-center gap-1 py-2 px-1 rounded-lg text-[10px] font-bold border transition-all duration-200 hover:scale-[1.03] active:scale-[0.98] ${
+                      isSelected
+                        ? 'shadow-md border-transparent font-extrabold'
+                        : 'hover:brightness-110'
                     }`}
-                    title={`Destacar peças em ${proc.label} (Sólido Verde) e não apontadas em aramado cinza`}
+                    title={`Destacar peças em ${proc.label} (${proc.color}) e não apontadas em aramado cinza`}
                   >
-                    <Icon className="w-3.5 h-3.5" />
-                    <span>{proc.label}</span>
+                    <Icon className="w-3.5 h-3.5 stroke-[2.2]" />
+                    <span className="tracking-tight">{proc.label}</span>
                   </button>
                 );
               })}