399 lines
15 KiB
TypeScript
399 lines
15 KiB
TypeScript
import React, { useEffect, useCallback } from 'react';
|
|
import { CronogramaOf } from '@/hooks/useCronogramas';
|
|
import { useBrandSettings } from '@/hooks/useBrandSettings';
|
|
import jsPDF from 'jspdf';
|
|
import { format, differenceInDays, parseISO } from 'date-fns';
|
|
import { ptBR } from 'date-fns/locale';
|
|
|
|
interface CronogramaPDFProps {
|
|
cronograma: CronogramaOf;
|
|
onComplete?: () => void;
|
|
}
|
|
|
|
export const CronogramaPDF: React.FC<CronogramaPDFProps> = ({ cronograma, onComplete }) => {
|
|
const { brandSettings } = useBrandSettings();
|
|
|
|
const calcularDiasCorridos = (dataInicio: string, dataFim: string) => {
|
|
try {
|
|
const inc = parseISO(dataInicio);
|
|
const fim = parseISO(dataFim);
|
|
const diff = differenceInDays(fim, inc);
|
|
return diff >= 0 ? diff + 1 : 1;
|
|
} catch {
|
|
return 1;
|
|
}
|
|
};
|
|
|
|
const gerarPDF = useCallback(async () => {
|
|
// Formato Paisagem A4 (297mm x 210mm) - Amplo espaço para gráfico Gantt e tabela
|
|
const doc = new jsPDF('landscape', 'mm', 'a4');
|
|
|
|
const pageWidth = doc.internal.pageSize.width; // 297mm
|
|
const pageHeight = doc.internal.pageSize.height; // 210mm
|
|
const margin = 12;
|
|
const usableWidth = pageWidth - (margin * 2); // 273mm
|
|
|
|
// Palette de Cores Executiva Modern (Otimizada para Impressora Monocromática)
|
|
const cPrimary = [241, 245, 249]; // Slate 100 (Fundo do cabeçalho)
|
|
const cSecondary = [226, 232, 240]; // Slate 200
|
|
const cAccent = [71, 85, 105]; // Slate 600 (Highlight)
|
|
const cTextDark = [15, 23, 42]; // Slate 900 (Texto principal)
|
|
const cTextMuted = [71, 85, 105]; // Slate 600 (Subtítulos)
|
|
const cBorder = [203, 213, 225]; // Slate 300 (Bordas)
|
|
const cBgCard = [255, 255, 255]; // Branco (Fundo de cards, economiza tinta)
|
|
const cWhite = [255, 255, 255];
|
|
|
|
// ----------------------------------------------------
|
|
// 1. CABEÇALHO EXECUTIVO (HEADER SLATE DARK BANNER)
|
|
// ----------------------------------------------------
|
|
const headerHeight = 28;
|
|
doc.setFillColor(cPrimary[0], cPrimary[1], cPrimary[2]);
|
|
doc.rect(0, 0, pageWidth, headerHeight, 'F');
|
|
|
|
// Accent line abaixo do cabeçalho
|
|
doc.setFillColor(cAccent[0], cAccent[1], cAccent[2]);
|
|
doc.rect(0, headerHeight, pageWidth, 1.5, 'F');
|
|
|
|
let headerTextX = margin;
|
|
|
|
// Logo da Empresa com proporção preservada (Sem distorção)
|
|
if (brandSettings.logo_url) {
|
|
try {
|
|
const img = new Image();
|
|
img.crossOrigin = 'anonymous';
|
|
await new Promise((resolve, reject) => {
|
|
img.onload = resolve;
|
|
img.onerror = reject;
|
|
img.src = brandSettings.logo_url!;
|
|
});
|
|
|
|
// Calcular aspect ratio para não espremer a imagem
|
|
const maxH = 16;
|
|
const maxW = 45;
|
|
let imgW = maxH * (img.naturalWidth / img.naturalHeight);
|
|
let imgH = maxH;
|
|
if (imgW > maxW) {
|
|
imgW = maxW;
|
|
imgH = maxW * (img.naturalHeight / img.naturalWidth);
|
|
}
|
|
|
|
const logoY = (headerHeight - imgH) / 2;
|
|
doc.addImage(img, 'PNG', margin, logoY, imgW, imgH);
|
|
headerTextX = margin + imgW + 8;
|
|
} catch (error) {
|
|
console.log('Erro ao carregar logo no PDF:', error);
|
|
}
|
|
}
|
|
|
|
// Título da Empresa & Documento
|
|
doc.setTextColor(cTextDark[0], cTextDark[1], cTextDark[2]);
|
|
doc.setFontSize(15);
|
|
doc.setFont('helvetica', 'bold');
|
|
doc.text(brandSettings.company_name || 'TrackSteel', headerTextX, 12);
|
|
|
|
doc.setTextColor(cTextMuted[0], cTextMuted[1], cTextMuted[2]);
|
|
doc.setFontSize(9);
|
|
doc.setFont('helvetica', 'bold');
|
|
doc.text('RELATÓRIO EXECUTIVO DE CRONOGRAMA DE PRODUÇÃO', headerTextX, 19);
|
|
|
|
// Badges no canto direito do cabeçalho
|
|
const badgeY = 8;
|
|
const badgeRight = pageWidth - margin;
|
|
|
|
// Pill de OF
|
|
const ofNum = cronograma.ordem_fabricacao?.num_of || 'N/A';
|
|
doc.setFillColor(cSecondary[0], cSecondary[1], cSecondary[2]);
|
|
doc.setDrawColor(cBorder[0], cBorder[1], cBorder[2]);
|
|
doc.roundedRect(badgeRight - 65, badgeY, 35, 12, 2, 2, 'FD');
|
|
doc.setTextColor(cTextDark[0], cTextDark[1], cTextDark[2]);
|
|
doc.setFontSize(8);
|
|
doc.setFont('helvetica', 'bold');
|
|
doc.text(`OF: ${ofNum}`, badgeRight - 47.5, badgeY + 7.5, { align: 'center' });
|
|
|
|
// Pill de Revisão
|
|
doc.setFillColor(cBgCard[0], cBgCard[1], cBgCard[2]);
|
|
doc.setDrawColor(cBorder[0], cBorder[1], cBorder[2]);
|
|
doc.roundedRect(badgeRight - 27, badgeY, 27, 12, 2, 2, 'FD');
|
|
doc.setTextColor(cTextDark[0], cTextDark[1], cTextDark[2]);
|
|
doc.text(`REV: ${cronograma.revisao || 1}`, badgeRight - 13.5, badgeY + 7.5, { align: 'center' });
|
|
|
|
let yPos = headerHeight + 8;
|
|
|
|
// ----------------------------------------------------
|
|
// 2. CARDS DE RESUMO / KPIS
|
|
// ----------------------------------------------------
|
|
const processos = (cronograma.processos || []).sort((a, b) => (a.ordem || 0) - (b.ordem || 0));
|
|
|
|
// Cálculo das datas gerais
|
|
let dataInicioTotal = new Date();
|
|
let dataFimTotal = new Date();
|
|
let duracaoTotal = 0;
|
|
|
|
if (processos.length > 0) {
|
|
const datasInicio = processos.map(p => parseISO(p.data_inicio).getTime()).filter(t => !isNaN(t));
|
|
const datasFim = processos.map(p => parseISO(p.data_fim).getTime()).filter(t => !isNaN(t));
|
|
|
|
if (datasInicio.length > 0 && datasFim.length > 0) {
|
|
dataInicioTotal = new Date(Math.min(...datasInicio));
|
|
dataFimTotal = new Date(Math.max(...datasFim));
|
|
duracaoTotal = differenceInDays(dataFimTotal, dataInicioTotal) + 1;
|
|
}
|
|
}
|
|
|
|
const cardGap = 5;
|
|
const cardWidth = (usableWidth - (cardGap * 3)) / 4;
|
|
const cardHeight = 18;
|
|
|
|
const cardsData = [
|
|
{
|
|
title: 'ESTRUTURA / OF',
|
|
value: `${ofNum} - ${cronograma.ordem_fabricacao?.descritivo || 'Sem descrição'}`
|
|
},
|
|
{
|
|
title: 'GESTOR / RESPONSÁVEL',
|
|
value: cronograma.gestor_profile?.full_name || 'Não atribuído'
|
|
},
|
|
{
|
|
title: 'DURAÇÃO & PROCESSO',
|
|
value: `${duracaoTotal} Dias Corridos (${processos.length} etapas)`
|
|
},
|
|
{
|
|
title: 'PERÍODO PREVISTO',
|
|
value: `${format(dataInicioTotal, 'dd/MM/yyyy')} a ${format(dataFimTotal, 'dd/MM/yyyy')}`
|
|
}
|
|
];
|
|
|
|
cardsData.forEach((card, idx) => {
|
|
const cardX = margin + idx * (cardWidth + cardGap);
|
|
|
|
// Card Container
|
|
doc.setFillColor(cBgCard[0], cBgCard[1], cBgCard[2]);
|
|
doc.setDrawColor(cBorder[0], cBorder[1], cBorder[2]);
|
|
doc.roundedRect(cardX, yPos, cardWidth, cardHeight, 1.5, 1.5, 'FD');
|
|
|
|
// Top Accent Line
|
|
doc.setFillColor(cAccent[0], cAccent[1], cAccent[2]);
|
|
doc.rect(cardX, yPos, cardWidth, 1, 'F');
|
|
|
|
// Card Title
|
|
doc.setTextColor(cTextMuted[0], cTextMuted[1], cTextMuted[2]);
|
|
doc.setFontSize(7);
|
|
doc.setFont('helvetica', 'bold');
|
|
doc.text(card.title, cardX + 3, yPos + 5.5);
|
|
|
|
// Card Value
|
|
doc.setTextColor(cTextDark[0], cTextDark[1], cTextDark[2]);
|
|
doc.setFontSize(8.5);
|
|
doc.setFont('helvetica', 'bold');
|
|
const textTruncated = card.value.length > 32 ? card.value.substring(0, 32) + '...' : card.value;
|
|
doc.text(textTruncated, cardX + 3, yPos + 12.5);
|
|
});
|
|
|
|
yPos += cardHeight + 8;
|
|
|
|
// ----------------------------------------------------
|
|
// 3. ESTRUTURA PRINCIPAL: TABELA (ESQUERDA) + GANTT (DIREITA)
|
|
// ----------------------------------------------------
|
|
const tableWidth = 110; // Tabela ocupa 110mm
|
|
const ganttWidth = usableWidth - tableWidth - 6; // Gantt ocupa o restante (~157mm)
|
|
const ganttX = margin + tableWidth + 6;
|
|
|
|
// TÍTULOS DAS SEÇÕES
|
|
doc.setFillColor(cSecondary[0], cSecondary[1], cSecondary[2]);
|
|
doc.setDrawColor(cBorder[0], cBorder[1], cBorder[2]);
|
|
doc.roundedRect(margin, yPos, tableWidth, 7, 1, 1, 'FD');
|
|
doc.setTextColor(cTextDark[0], cTextDark[1], cTextDark[2]);
|
|
doc.setFontSize(8.5);
|
|
doc.setFont('helvetica', 'bold');
|
|
doc.text('ETAPAS E CRONOGRAMA DETALHADO', margin + 4, yPos + 4.8);
|
|
|
|
doc.setFillColor(cSecondary[0], cSecondary[1], cSecondary[2]);
|
|
doc.setDrawColor(cBorder[0], cBorder[1], cBorder[2]);
|
|
doc.roundedRect(ganttX, yPos, ganttWidth, 7, 1, 1, 'FD');
|
|
doc.text('VISUALIZAÇÃO DE LINHA DO TEMPO (GANTT)', ganttX + 4, yPos + 4.8);
|
|
|
|
yPos += 9;
|
|
|
|
// --- TABELA DE PROCESSOS ---
|
|
const colWidths = [10, 48, 20, 20, 12]; // Total: 110mm
|
|
const headers = ['#', 'Processo / Etapa', 'Início', 'Fim', 'Dias'];
|
|
|
|
doc.setFillColor(cBgCard[0], cBgCard[1], cBgCard[2]);
|
|
doc.rect(margin, yPos, tableWidth, 6, 'F');
|
|
doc.setDrawColor(cBorder[0], cBorder[1], cBorder[2]);
|
|
doc.line(margin, yPos + 6, margin + tableWidth, yPos + 6);
|
|
|
|
doc.setTextColor(cTextMuted[0], cTextMuted[1], cTextMuted[2]);
|
|
doc.setFontSize(7.5);
|
|
doc.setFont('helvetica', 'bold');
|
|
|
|
let colX = margin;
|
|
headers.forEach((h, i) => {
|
|
const align = i >= 2 ? 'center' : 'left';
|
|
const textPosX = align === 'center' ? colX + colWidths[i] / 2 : colX + 2;
|
|
doc.text(h, textPosX, yPos + 4.2, { align });
|
|
colX += colWidths[i];
|
|
});
|
|
|
|
let tableY = yPos + 6;
|
|
const rowHeight = 7.5;
|
|
|
|
// --- GRÁFICO GANTT (CABEÇALHO DE DATAS) ---
|
|
doc.setFillColor(cBgCard[0], cBgCard[1], cBgCard[2]);
|
|
doc.rect(ganttX, yPos, ganttWidth, 6, 'F');
|
|
doc.line(ganttX, yPos + 6, ganttX + ganttWidth, yPos + 6);
|
|
|
|
doc.setTextColor(cTextMuted[0], cTextMuted[1], cTextMuted[2]);
|
|
doc.setFontSize(7);
|
|
doc.setFont('helvetica', 'bold');
|
|
|
|
doc.text(format(dataInicioTotal, 'dd/MM'), ganttX + 2, yPos + 4.2);
|
|
doc.text(format(dataFimTotal, 'dd/MM'), ganttX + ganttWidth - 2, yPos + 4.2, { align: 'right' });
|
|
doc.text(`Total: ${duracaoTotal}d`, ganttX + ganttWidth / 2, yPos + 4.2, { align: 'center' });
|
|
|
|
// Paleta Elegante para as Barras de Gantt (Tons de Cinza/Escuros para impressão monocromática)
|
|
const barColors = [
|
|
[71, 85, 105], // Slate 600
|
|
[51, 65, 85], // Slate 700
|
|
[100, 116, 139], // Slate 500
|
|
[15, 23, 42] // Slate 900
|
|
];
|
|
|
|
// RENDERIZAR LINHAS DA TABELA E BARRAS GANTT
|
|
processos.forEach((proc, idx) => {
|
|
// Alternância de cor da linha na tabela
|
|
if (idx % 2 === 0) {
|
|
doc.setFillColor(255, 255, 255);
|
|
} else {
|
|
doc.setFillColor(248, 250, 252);
|
|
}
|
|
doc.rect(margin, tableY, tableWidth, rowHeight, 'F');
|
|
|
|
// Borda inferior da linha
|
|
doc.setDrawColor(241, 245, 249);
|
|
doc.line(margin, tableY + rowHeight, margin + tableWidth, tableY + rowHeight);
|
|
|
|
// Dados da tabela
|
|
doc.setFontSize(7.5);
|
|
doc.setTextColor(cTextDark[0], cTextDark[1], cTextDark[2]);
|
|
|
|
let cX = margin;
|
|
|
|
// Index #
|
|
doc.setFont('helvetica', 'bold');
|
|
doc.text(`${idx + 1}`, cX + colWidths[0] / 2, tableY + 5, { align: 'center' });
|
|
cX += colWidths[0];
|
|
|
|
// Nome do Processo
|
|
doc.setFont('helvetica', 'normal');
|
|
const nomeProc = proc.nome_processo.length > 24 ? proc.nome_processo.substring(0, 24) + '...' : proc.nome_processo;
|
|
doc.text(nomeProc, cX + 2, tableY + 5);
|
|
cX += colWidths[1];
|
|
|
|
// Data Início
|
|
const dIncStr = format(parseISO(proc.data_inicio), 'dd/MM/yy');
|
|
doc.text(dIncStr, cX + colWidths[2] / 2, tableY + 5, { align: 'center' });
|
|
cX += colWidths[2];
|
|
|
|
// Data Fim
|
|
const dFimStr = format(parseISO(proc.data_fim), 'dd/MM/yy');
|
|
doc.text(dFimStr, cX + colWidths[3] / 2, tableY + 5, { align: 'center' });
|
|
cX += colWidths[3];
|
|
|
|
// Duração em Dias
|
|
const diasProc = calcularDiasCorridos(proc.data_inicio, proc.data_fim);
|
|
doc.setFont('helvetica', 'bold');
|
|
doc.text(`${diasProc}d`, cX + colWidths[4] / 2, tableY + 5, { align: 'center' });
|
|
|
|
// --- LINHA E BARRA DO GANTT ---
|
|
// Fundo e linha de grade do Gantt
|
|
if (idx % 2 === 0) {
|
|
doc.setFillColor(255, 255, 255);
|
|
} else {
|
|
doc.setFillColor(248, 250, 252);
|
|
}
|
|
doc.rect(ganttX, tableY, ganttWidth, rowHeight, 'F');
|
|
doc.setDrawColor(241, 245, 249);
|
|
doc.line(ganttX, tableY + rowHeight, ganttX + ganttWidth, tableY + rowHeight);
|
|
|
|
// Calcular posição da barra Gantt proporcional
|
|
const procStart = parseISO(proc.data_inicio).getTime();
|
|
const offsetDays = Math.max(0, differenceInDays(new Date(procStart), dataInicioTotal));
|
|
|
|
const pxPerDay = ganttWidth / (duracaoTotal || 1);
|
|
const barX = ganttX + (offsetDays * pxPerDay);
|
|
const barW = Math.max(4, diasProc * pxPerDay);
|
|
|
|
// Desenhar Barra Arredondada Modern
|
|
const color = barColors[idx % barColors.length];
|
|
doc.setFillColor(color[0], color[1], color[2]);
|
|
doc.roundedRect(barX, tableY + 1.5, barW, rowHeight - 3, 1.2, 1.2, 'F');
|
|
|
|
// Texto dentro ou ao lado da barra
|
|
doc.setTextColor(cWhite[0], cWhite[1], cWhite[2]);
|
|
doc.setFontSize(6.5);
|
|
doc.setFont('helvetica', 'bold');
|
|
|
|
if (barW >= 15) {
|
|
doc.text(`${diasProc}d`, barX + (barW / 2), tableY + 5, { align: 'center' });
|
|
} else {
|
|
// Se a barra for pequena, desenha a tag fora
|
|
doc.setTextColor(cTextDark[0], cTextDark[1], cTextDark[2]);
|
|
doc.text(`${diasProc}d`, barX + barW + 2, tableY + 5);
|
|
}
|
|
|
|
tableY += rowHeight;
|
|
});
|
|
|
|
// Borda ao redor das caixas
|
|
doc.setDrawColor(cBorder[0], cBorder[1], cBorder[2]);
|
|
doc.rect(margin, yPos + 6, tableWidth, (processos.length + 1) * rowHeight, 'S');
|
|
doc.rect(ganttX, yPos + 6, ganttWidth, (processos.length + 1) * rowHeight, 'S');
|
|
|
|
// ----------------------------------------------------
|
|
// 4. RODAPÉ EXECUTIVO (FOOTER)
|
|
// ----------------------------------------------------
|
|
const footerY = pageHeight - 10;
|
|
|
|
doc.setDrawColor(cBorder[0], cBorder[1], cBorder[2]);
|
|
doc.line(margin, footerY - 3, pageWidth - margin, footerY - 3);
|
|
|
|
doc.setTextColor(cTextMuted[0], cTextMuted[1], cTextMuted[2]);
|
|
doc.setFontSize(7.5);
|
|
doc.setFont('helvetica', 'normal');
|
|
|
|
doc.text(
|
|
`${brandSettings.company_name || 'TrackSteel'} — Sistema Integrado de Gestão Estrutural`,
|
|
margin,
|
|
footerY + 1
|
|
);
|
|
|
|
const nowFormatted = format(new Date(), 'dd/MM/yyyy HH:mm', { locale: ptBR });
|
|
doc.text(
|
|
`Documento Gerado em ${nowFormatted} | Página 1 de 1`,
|
|
pageWidth - margin,
|
|
footerY + 1,
|
|
{ align: 'right' }
|
|
);
|
|
|
|
// Download automático do PDF
|
|
const safeOF = (cronograma.ordem_fabricacao?.num_of || 'OF').replace(/[^a-zA-Z0-9_-]/g, '');
|
|
const nomeArquivo = `cronograma_${safeOF}_rev${cronograma.revisao || 1}_${format(new Date(), 'ddMMyyyy')}.pdf`;
|
|
doc.save(nomeArquivo);
|
|
|
|
if (onComplete) {
|
|
onComplete();
|
|
}
|
|
}, [cronograma, onComplete, brandSettings]);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
gerarPDF();
|
|
}, 100);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [gerarPDF]);
|
|
|
|
return null;
|
|
};
|