From 58ca0a20ab7e6c4d93f06d8a952fa669ef473220 Mon Sep 17 00:00:00 2001
From: Marcos Reifonas <m.reifonas@gmail.com>
Date: Mon, 21 Sep 2026 23:31:48 +0000
Subject: [PATCH] refactor: reestilizacao de PDFs em branco, azul marinho,
 verde e preto sem fundo escuro para economia de toner

---
 .../SmartConsultaRelatoriosFlow.tsx           | 149 ++++++++++++++----
 .../smart/components/SmartEmbarqueFlow.tsx    | 129 ++++++++++-----
 2 files changed, 205 insertions(+), 73 deletions(-)

diff --git a/src/pages/smart/components/SmartConsultaRelatoriosFlow.tsx b/src/pages/smart/components/SmartConsultaRelatoriosFlow.tsx
index 94dfc5d..dc61b51 100644
--- a/src/pages/smart/components/SmartConsultaRelatoriosFlow.tsx
+++ b/src/pages/smart/components/SmartConsultaRelatoriosFlow.tsx
@@ -387,17 +387,30 @@ export const SmartConsultaRelatoriosFlow: React.FC<SmartConsultaRelatoriosFlowPr
       const dataFormatada = new Date().toLocaleDateString('pt-BR');
       const horaFormatada = new Date().toLocaleTimeString('pt-BR');
 
-      doc.setFillColor(15, 23, 42);
-      doc.rect(0, 0, 210, 30, 'F');
-      doc.setTextColor(251, 191, 36);
-      doc.setFontSize(16);
+      // 1. TOPO LIMPO (FUNDO BRANCO, AZUL MARINHO & VERDE - ZERO DESPERDÍCIO DE TONER)
       doc.setFont('helvetica', 'bold');
-      doc.text(titulo, 14, 15);
+      doc.setFontSize(16);
+      doc.setTextColor(15, 43, 92); // Azul Marinho
+      doc.text(titulo, 14, 16);
 
-      doc.setFontSize(10);
-      doc.setTextColor(255, 255, 255);
-      doc.text(`OF: ${obra.of_number} | Cliente: ${obra.cliente || 'Industrial'}`, 14, 23);
-      doc.text(`Data: ${dataFormatada} às ${horaFormatada}`, 145, 23);
+      doc.setFontSize(9);
+      doc.setFont('helvetica', 'bold');
+      doc.setTextColor(5, 150, 105); // Verde
+      doc.text(`TURNO DO OPERADOR`, 150, 16);
+
+      doc.setFont('helvetica', 'normal');
+      doc.setFontSize(9.5);
+      doc.setTextColor(31, 41, 55); // Preto / Grafite
+      doc.text(`OF: ${obra.of_number}   |   Cliente: ${obra.cliente || 'Industrial'}`, 14, 23);
+      doc.text(`Operador: ${user?.email || 'Chão de Fábrica'}   |   Data: ${dataFormatada} às ${horaFormatada}`, 14, 29);
+
+      // Linha divisória de topo fina: Azul Marinho com terminal em Verde
+      doc.setDrawColor(30, 58, 138); // Azul Marinho
+      doc.setLineWidth(1.2);
+      doc.line(14, 33, 165, 33);
+      doc.setDrawColor(5, 150, 105); // Verde
+      doc.setLineWidth(1.2);
+      doc.line(165, 33, 196, 33);
 
       let totalPecas = 0;
       let totalKg = 0;
@@ -427,19 +440,55 @@ export const SmartConsultaRelatoriosFlow: React.FC<SmartConsultaRelatoriosFlowPr
         startY: 38,
         head: [['Marca', 'Fase', 'Processo', 'Qtd', 'Peso Unit.', 'Peso Total']],
         body: tableRows,
-        theme: 'striped',
-        headStyles: { fillColor: [30, 41, 59], textColor: [251, 191, 36], fontStyle: 'bold' },
-        styles: { fontSize: 9 },
+        theme: 'plain',
+        headStyles: {
+          fillColor: [248, 250, 252], // Fundo branco/gelo suave
+          textColor: [15, 43, 92],    // Azul Marinho
+          fontStyle: 'bold',
+          lineWidth: 0.4,
+          lineColor: [30, 58, 138],   // Linha azul marinho
+        },
+        styles: {
+          fontSize: 8.5,
+          textColor: [31, 41, 55],    // Preto nítido
+          cellPadding: 2.5,
+          lineWidth: 0.1,
+          lineColor: [226, 232, 240], // Linha cinza clara
+        },
+        columnStyles: {
+          0: { cellWidth: 26, fontStyle: 'bold', textColor: [15, 43, 92] }, // Marca em Azul Marinho
+          1: { cellWidth: 22, halign: 'center' },
+          2: { cellWidth: 45 },
+          3: { cellWidth: 20, halign: 'center', fontStyle: 'bold' },
+          4: { cellWidth: 32, halign: 'right' },
+          5: { cellWidth: 35, halign: 'right', fontStyle: 'bold', textColor: [22, 101, 52] }, // Peso em Verde
+        },
       });
 
       const finalY = (doc as any).lastAutoTable?.finalY || 80;
-      doc.setFillColor(241, 245, 249);
-      doc.rect(14, finalY + 5, 182, 20, 'F');
-      doc.setTextColor(15, 23, 42);
-      doc.setFontSize(11);
+
+      // Quadro de Resumo com Fundo Branco, Barra e Borda Verde
+      const boxResumoY = finalY + 5;
+      doc.setFillColor(5, 150, 105); // Barra lateral verde
+      doc.roundedRect(14, boxResumoY, 3, 16, 1, 1, 'F');
+
+      doc.setDrawColor(5, 150, 105);
+      doc.setLineWidth(0.4);
+      doc.roundedRect(17, boxResumoY, 179, 16, 1.5, 1.5, 'S');
+
       doc.setFont('helvetica', 'bold');
-      doc.text(`RESUMO DO TURNO:`, 20, finalY + 14);
-      doc.text(`Total de Peças: ${totalPecas} un | Peso Total: ${totalKg.toFixed(1)} kg`, 20, finalY + 20);
+      doc.setFontSize(8.5);
+      doc.setTextColor(22, 101, 52); // Verde
+      doc.text(`RESUMO DO TURNO:`, 22, boxResumoY + 6);
+
+      doc.setFont('helvetica', 'bold');
+      doc.setFontSize(9.5);
+      doc.setTextColor(15, 23, 42); // Preto
+      doc.text(
+        `Total de Peças Apontadas: ${totalPecas} un    |    Peso Total: ${totalKg.toFixed(1)} kg`,
+        22,
+        boxResumoY + 12
+      );
 
       const nomeArquivo = `Turno_${obra.of_number}_${hoje}.pdf`;
 
@@ -486,16 +535,29 @@ export const SmartConsultaRelatoriosFlow: React.FC<SmartConsultaRelatoriosFlowPr
       const doc = new jsPDF();
       const dataFormatada = new Date().toLocaleDateString('pt-BR');
 
-      doc.setFillColor(15, 23, 42);
-      doc.rect(0, 0, 210, 30, 'F');
-      doc.setTextColor(251, 191, 36);
-      doc.setFontSize(16);
+      // Topo limpo sem blocos pretos
       doc.setFont('helvetica', 'bold');
-      doc.text(`RELATÓRIO GERAL DE FABRICAÇÃO`, 14, 15);
+      doc.setFontSize(16);
+      doc.setTextColor(15, 43, 92); // Azul Marinho
+      doc.text(`RELATÓRIO GERAL DE FABRICAÇÃO`, 14, 16);
 
-      doc.setFontSize(10);
-      doc.setTextColor(255, 255, 255);
-      doc.text(`OF: ${obra.of_number} | Cliente: ${obra.cliente || 'Industrial'} | Emissão: ${dataFormatada}`, 14, 23);
+      doc.setFontSize(9);
+      doc.setFont('helvetica', 'bold');
+      doc.setTextColor(5, 150, 105); // Verde
+      doc.text(`OF: ${obra.of_number}`, 165, 16);
+
+      doc.setFont('helvetica', 'normal');
+      doc.setFontSize(9.5);
+      doc.setTextColor(31, 41, 55); // Preto
+      doc.text(`Cliente: ${obra.cliente || 'Industrial'}   |   Emissão: ${dataFormatada}`, 14, 23);
+
+      // Linha divisória fina: Azul Marinho + Verde
+      doc.setDrawColor(30, 58, 138);
+      doc.setLineWidth(1.2);
+      doc.line(14, 28, 165, 28);
+      doc.setDrawColor(5, 150, 105);
+      doc.setLineWidth(1.2);
+      doc.line(165, 28, 196, 28);
 
       const tableRows = pecasStatus.map((p) => [
         p.marca,
@@ -512,12 +574,37 @@ export const SmartConsultaRelatoriosFlow: React.FC<SmartConsultaRelatoriosFlowPr
       ]);
 
       autoTable(doc, {
-        startY: 38,
-        head: [['Marca', 'Perfil', 'Fase', 'Total', 'Det.', 'Corte', 'Mont.', 'Solda', 'Pint.', 'Exp.', 'Obra']],
+        startY: 33,
+        head: [['Marca', 'Perfil / Peça', 'Fase', 'Total', 'Det.', 'Corte', 'Mont.', 'Solda', 'Pint.', 'Exp.', 'Obra']],
         body: tableRows,
-        theme: 'grid',
-        headStyles: { fillColor: [30, 41, 59], textColor: [251, 191, 36], fontStyle: 'bold' },
-        styles: { fontSize: 8 },
+        theme: 'plain',
+        headStyles: {
+          fillColor: [248, 250, 252],
+          textColor: [15, 43, 92],
+          fontStyle: 'bold',
+          lineWidth: 0.4,
+          lineColor: [30, 58, 138],
+        },
+        styles: {
+          fontSize: 7.5,
+          textColor: [31, 41, 55],
+          cellPadding: 2,
+          lineWidth: 0.1,
+          lineColor: [226, 232, 240],
+        },
+        columnStyles: {
+          0: { fontStyle: 'bold', textColor: [15, 43, 92] },
+          1: { cellWidth: 38 },
+          2: { halign: 'center' },
+          3: { halign: 'center', fontStyle: 'bold' },
+          4: { halign: 'center' },
+          5: { halign: 'center' },
+          6: { halign: 'center' },
+          7: { halign: 'center' },
+          8: { halign: 'center' },
+          9: { halign: 'center' },
+          10: { halign: 'center', textColor: [22, 101, 52] },
+        },
       });
 
       doc.save(`Progresso_Geral_OF_${obra.of_number}.pdf`);
diff --git a/src/pages/smart/components/SmartEmbarqueFlow.tsx b/src/pages/smart/components/SmartEmbarqueFlow.tsx
index 65b52d7..9a4f4eb 100644
--- a/src/pages/smart/components/SmartEmbarqueFlow.tsx
+++ b/src/pages/smart/components/SmartEmbarqueFlow.tsx
@@ -414,37 +414,59 @@ export const SmartEmbarqueFlow: React.FC<SmartEmbarqueFlowProps> = ({ obra, onVo
       const dataFormatada = new Date().toLocaleDateString('pt-BR');
       const horaFormatada = new Date().toLocaleTimeString('pt-BR');
 
-      // Topo estilizado escuro e dourado industrial
-      doc.setFillColor(15, 23, 42); // slate-900
-      doc.rect(0, 0, 210, 32, 'F');
-      doc.setTextColor(251, 191, 36); // amber-400
-      doc.setFontSize(16);
+      // 1. TOPO LIMPO CORPORATIVO (FUNDO BRANCO, AZUL MARINHO & VERDE - ZERO DESPERDÍCIO DE TONER)
       doc.setFont('helvetica', 'bold');
-      doc.text(`ROMANEIO DE EXPEDIÇÃO & CARGA`, 14, 15);
+      doc.setFontSize(16);
+      doc.setTextColor(15, 43, 92); // Azul Marinho Profundo
+      doc.text(`ROMANEIO DE EXPEDIÇÃO & CARGA`, 14, 16);
 
+      // Status em Verde no canto superior direito
       doc.setFontSize(9);
-      doc.setTextColor(255, 255, 255);
-      doc.text(`OF: ${obra.of_number} | Cliente: ${obra.cliente || 'Industrial'}`, 14, 22);
+      doc.setFont('helvetica', 'bold');
+      doc.setTextColor(5, 150, 105); // Verde Esmeralda
+      doc.text(`STATUS: ${(romaneioAtivo.status || 'EXPEDIDO').toUpperCase()}`, 150, 16);
+
+      // Metadados da Obra em Preto / Grafite
+      doc.setFont('helvetica', 'normal');
+      doc.setFontSize(9.5);
+      doc.setTextColor(31, 41, 55);
+      doc.text(`OF: ${obra.of_number}   |   Cliente: ${obra.cliente || 'Industrial'}`, 14, 23);
       doc.text(
-        `Romaneio: ${romaneioAtivo.numero_romaneio} | Emissão: ${dataFormatada} às ${horaFormatada}`,
+        `Romaneio: ${romaneioAtivo.numero_romaneio}   |   Emissão: ${dataFormatada} às ${horaFormatada}`,
         14,
-        28
+        29
       );
 
-      // Caixa de Informações de Transporte
-      doc.setFillColor(241, 245, 249); // slate-100
-      doc.roundedRect(14, 36, 182, 22, 2, 2, 'F');
-      doc.setTextColor(15, 23, 42);
-      doc.setFontSize(9);
+      // Linha divisória de topo fina e elegante: Azul Marinho com terminal em Verde
+      doc.setDrawColor(30, 58, 138); // Azul Marinho
+      doc.setLineWidth(1.2);
+      doc.line(14, 33, 165, 33);
+      doc.setDrawColor(5, 150, 105); // Verde Esmeralda
+      doc.setLineWidth(1.2);
+      doc.line(165, 33, 196, 33);
+
+      // 2. CAIXA DE DADOS DO TRANSPORTE (Fundo Branco, Borda Fina, Barra Lateral Azul Marinho)
+      const boxTransporteY = 37;
+      doc.setFillColor(30, 58, 138); // Barra lateral azul marinho
+      doc.roundedRect(14, boxTransporteY, 3, 19, 1, 1, 'F');
+
+      doc.setDrawColor(203, 213, 225); // Borda cinza suave
+      doc.setLineWidth(0.4);
+      doc.roundedRect(17, boxTransporteY, 179, 19, 1.5, 1.5, 'S');
+
       doc.setFont('helvetica', 'bold');
-      doc.text(`DADOS DO TRANSPORTE:`, 18, 43);
+      doc.setFontSize(8.5);
+      doc.setTextColor(15, 43, 92); // Azul Marinho
+      doc.text(`DADOS DO TRANSPORTE:`, 22, boxTransporteY + 6);
 
       doc.setFont('helvetica', 'normal');
-      doc.text(`Motorista: ${romaneioAtivo.nome_motorista || 'A definir'}`, 18, 51);
-      doc.text(`Veículo: ${formatTransporte(romaneioAtivo.tipo_transporte)}`, 85, 51);
-      doc.text(`Frete: ${formatFrete(romaneioAtivo.frete_tipo)}`, 150, 51);
+      doc.setFontSize(8.5);
+      doc.setTextColor(31, 41, 55); // Preto / Grafite
+      doc.text(`Motorista: ${romaneioAtivo.nome_motorista || 'A definir'}`, 22, boxTransporteY + 13);
+      doc.text(`Veículo: ${formatTransporte(romaneioAtivo.tipo_transporte)}`, 90, boxTransporteY + 13);
+      doc.text(`Frete: ${formatFrete(romaneioAtivo.frete_tipo)}`, 155, boxTransporteY + 13);
 
-      // Tabela de Peças Carregadas
+      // 3. TABELA DE PEÇAS CARREGADAS (Fundo Branco, Linhas Finas, Marca em Azul Marinho, Totais em Verde)
       const tableRows = itensRomaneio.map((item, idx) => [
         (idx + 1).toString(),
         item.marca,
@@ -465,48 +487,71 @@ export const SmartEmbarqueFlow: React.FC<SmartEmbarqueFlowProps> = ({ obra, onVo
       );
 
       autoTable(doc, {
-        startY: 62,
+        startY: 61,
         head: [['#', 'Marca', 'Fase', 'Descrição da Peça', 'Qtd', 'Peso Unit.', 'Peso Total']],
         body: tableRows,
-        theme: 'striped',
-        headStyles: { fillColor: [30, 41, 59], textColor: [251, 191, 36], fontStyle: 'bold' },
-        styles: { fontSize: 8.5 },
+        theme: 'plain',
+        headStyles: {
+          fillColor: [248, 250, 252], // Fundo branco/gelo suave
+          textColor: [15, 43, 92],    // Azul Marinho
+          fontStyle: 'bold',
+          lineWidth: 0.4,
+          lineColor: [30, 58, 138], // Linha azul marinho
+        },
+        styles: {
+          fontSize: 8.5,
+          textColor: [31, 41, 55],    // Preto nítido
+          cellPadding: 2.5,
+          lineWidth: 0.1,
+          lineColor: [226, 232, 240], // Linha cinza clara
+        },
         columnStyles: {
-          0: { cellWidth: 10 },
-          1: { cellWidth: 26, fontStyle: 'bold' },
-          2: { cellWidth: 18 },
+          0: { cellWidth: 10, textColor: [100, 116, 139] },
+          1: { cellWidth: 26, fontStyle: 'bold', textColor: [15, 43, 92] }, // Marca em Azul Marinho
+          2: { cellWidth: 18, halign: 'center' },
           3: { cellWidth: 65 },
-          4: { cellWidth: 15, halign: 'center' },
+          4: { cellWidth: 15, halign: 'center', fontStyle: 'bold' },
           5: { cellWidth: 24, halign: 'right' },
-          6: { cellWidth: 24, halign: 'right', fontStyle: 'bold' },
+          6: { cellWidth: 24, halign: 'right', fontStyle: 'bold', textColor: [22, 101, 52] }, // Peso em Verde
         },
       });
 
       const finalY = (doc as any).lastAutoTable?.finalY || 120;
 
-      // Resumo e Totais
-      doc.setFillColor(241, 245, 249);
-      doc.rect(14, finalY + 4, 182, 16, 'F');
-      doc.setTextColor(15, 23, 42);
-      doc.setFontSize(10);
+      // 4. RESUMO E TOTAIS (Fundo Branco, Borda e Barra Lateral em Verde Esmeralda)
+      const boxTotaisY = finalY + 5;
+      doc.setFillColor(5, 150, 105); // Verde
+      doc.roundedRect(14, boxTotaisY, 3, 16, 1, 1, 'F');
+
+      doc.setDrawColor(5, 150, 105); // Borda Verde
+      doc.setLineWidth(0.4);
+      doc.roundedRect(17, boxTotaisY, 179, 16, 1.5, 1.5, 'S');
+
       doc.setFont('helvetica', 'bold');
-      doc.text(`TOTAIS DO ROMANEIO:`, 20, finalY + 11);
+      doc.setFontSize(8.5);
+      doc.setTextColor(22, 101, 52); // Verde Escuro
+      doc.text(`TOTAIS DO ROMANEIO:`, 22, boxTotaisY + 6);
+
+      doc.setFont('helvetica', 'bold');
+      doc.setFontSize(9.5);
+      doc.setTextColor(15, 23, 42); // Preto
       doc.text(
-        `Marcas: ${itensRomaneio.length}  |  Total de Peças: ${totalPecas} un  |  Peso Total: ${totalKg.toFixed(1)} kg`,
-        20,
-        finalY + 16
+        `Marcas: ${itensRomaneio.length}    |    Total de Peças: ${totalPecas} un    |    Peso Total: ${totalKg.toFixed(1)} kg`,
+        22,
+        boxTotaisY + 12
       );
 
-      // Campos de Assinatura
-      const posYAssinaturas = finalY + 34;
-      if (posYAssinaturas < 260) {
+      // 5. CAMPOS DE ASSINATURA (Linhas Finas)
+      const posYAssinaturas = boxTotaisY + 28;
+      if (posYAssinaturas < 265) {
         doc.setDrawColor(148, 163, 184);
-        doc.setLineWidth(0.5);
+        doc.setLineWidth(0.4);
 
         // Assinatura Fábrica
         doc.line(18, posYAssinaturas, 95, posYAssinaturas);
         doc.setFontSize(8);
         doc.setFont('helvetica', 'normal');
+        doc.setTextColor(71, 85, 105);
         doc.text('Expedido por (Fábrica / Almoxarifado)', 22, posYAssinaturas + 5);
 
         // Assinatura Motorista