admtracksteel/tracksteel_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: reestilizacao de PDFs em branco, azul marinho, verde e preto sem fundo escuro para economia de toner

Browse Source
This commit is contained in:
Marcos Reifonas
2026-09-21 23:31:48 +00:00
parent b5b832ff69
commit 58ca0a20ab
2 changed files with 205 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/smart/components/SmartConsultaRelatoriosFlow.tsx
+118 -31
View File
@@ -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`);
src/pages/smart/components/SmartEmbarqueFlow.tsx
+87 -42
View File
@@ -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