349 lines
13 KiB
TypeScript
349 lines
13 KiB
TypeScript
|
|
import React from 'react';
|
|
import { ItemPrioridade } from '@/hooks/useItensPrioridadeFabricacao';
|
|
|
|
interface PrioridadesPDFTemplateProps {
|
|
id?: string;
|
|
itensPorPrioridade: { [key: string]: ItemPrioridade[] };
|
|
ofSelecionada?: string | null;
|
|
faseSelecionada?: string | null;
|
|
versaoAtual?: {
|
|
revisao: number;
|
|
dataModificacao: string;
|
|
modificadoPor?: string;
|
|
} | null;
|
|
}
|
|
|
|
export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
|
|
id,
|
|
itensPorPrioridade,
|
|
ofSelecionada,
|
|
faseSelecionada,
|
|
versaoAtual
|
|
}) => {
|
|
const todosItens = Object.values(itensPorPrioridade).flat();
|
|
|
|
const primeiroItem = todosItens[0];
|
|
const ofNumber = ofSelecionada || primeiroItem?.peca?.of_number || primeiroItem?.prioridade_fabricacao?.of_number || 'N/A';
|
|
const etapaFase = faseSelecionada || primeiroItem?.peca?.etapa_fase || primeiroItem?.prioridade_fabricacao?.etapa_fase || 'N/A';
|
|
|
|
const dataAtual = new Date().toLocaleDateString('pt-BR');
|
|
|
|
const getPrioridadeNome = (codigo: string) => {
|
|
switch (codigo) {
|
|
case 'P1': return 'Prioridade P1 - Urgente';
|
|
case 'P2': return 'Prioridade P2 - Alta';
|
|
case 'P3': return 'Prioridade P3 - Média';
|
|
case 'P4': return 'Prioridade P4 - Baixa';
|
|
default: return 'Desconhecida';
|
|
}
|
|
};
|
|
|
|
const getCoresPrioridade = (codigo: string) => {
|
|
switch (codigo) {
|
|
case 'P1': return 'text-red-700 bg-red-100 border-red-300';
|
|
case 'P2': return 'text-orange-700 bg-orange-100 border-orange-300';
|
|
case 'P3': return 'text-blue-700 bg-blue-100 border-blue-300';
|
|
case 'P4': return 'text-gray-700 bg-gray-200 border-gray-300';
|
|
default: return 'text-gray-700 bg-gray-200 border-gray-300';
|
|
}
|
|
};
|
|
|
|
const generateTickBoxes = (quantity: number) => {
|
|
if (!quantity || quantity <= 0) return null;
|
|
|
|
let qtd50 = 0;
|
|
let qtd10 = 0;
|
|
let qtd5 = 0;
|
|
let qtd1 = 0;
|
|
|
|
if (quantity <= 10) {
|
|
qtd1 = quantity;
|
|
} else if (quantity <= 50) {
|
|
qtd5 = Math.floor(quantity / 5);
|
|
qtd1 = quantity % 5;
|
|
} else if (quantity <= 100) {
|
|
qtd10 = Math.floor(quantity / 10);
|
|
const resto10 = quantity % 10;
|
|
qtd5 = Math.floor(resto10 / 5);
|
|
qtd1 = resto10 % 5;
|
|
} else {
|
|
// Acima de 100 unidades
|
|
qtd50 = Math.floor(quantity / 50);
|
|
const resto50 = quantity % 50;
|
|
qtd10 = Math.floor(resto50 / 10);
|
|
const resto10 = resto50 % 10;
|
|
qtd5 = Math.floor(resto10 / 5);
|
|
qtd1 = resto10 % 5;
|
|
}
|
|
|
|
const boxes: React.ReactNode[] = [];
|
|
|
|
// Quadrados de peso 50
|
|
for (let i = 0; i < qtd50; i++) {
|
|
boxes.push(
|
|
<svg
|
|
key={`box50-${i}`}
|
|
width="13"
|
|
height="13"
|
|
viewBox="0 0 13 13"
|
|
style={{ display: 'inline-block', verticalAlign: '-1px', marginRight: '2px' }}
|
|
>
|
|
<rect x="0.5" y="0.5" width="12" height="12" rx="1.5" fill="#f3f4f6" stroke="#4b5563" strokeWidth="1" />
|
|
<text x="6.5" y="9.2" textAnchor="middle" fontSize="7" fontFamily="Arial, sans-serif" fontWeight="bold" fill="#374151">50</text>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
// Quadrados de peso 10
|
|
for (let i = 0; i < qtd10; i++) {
|
|
boxes.push(
|
|
<svg
|
|
key={`box10-${i}`}
|
|
width="13"
|
|
height="13"
|
|
viewBox="0 0 13 13"
|
|
style={{ display: 'inline-block', verticalAlign: '-1px', marginRight: '2px' }}
|
|
>
|
|
<rect x="0.5" y="0.5" width="12" height="12" rx="1.5" fill="#f3f4f6" stroke="#4b5563" strokeWidth="1" />
|
|
<text x="6.5" y="9.2" textAnchor="middle" fontSize="7" fontFamily="Arial, sans-serif" fontWeight="bold" fill="#374151">10</text>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
// Quadrados de peso 5
|
|
for (let i = 0; i < qtd5; i++) {
|
|
boxes.push(
|
|
<svg
|
|
key={`box5-${i}`}
|
|
width="13"
|
|
height="13"
|
|
viewBox="0 0 13 13"
|
|
style={{ display: 'inline-block', verticalAlign: '-1px', marginRight: '2px' }}
|
|
>
|
|
<rect x="0.5" y="0.5" width="12" height="12" rx="1.5" fill="#f3f4f6" stroke="#4b5563" strokeWidth="1" />
|
|
<text x="6.5" y="9.5" textAnchor="middle" fontSize="8.5" fontFamily="Arial, sans-serif" fontWeight="bold" fill="#4b5563">5</text>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
// Quadrados unitários (vazios)
|
|
for (let i = 0; i < qtd1; i++) {
|
|
boxes.push(
|
|
<svg
|
|
key={`box1-${i}`}
|
|
width="13"
|
|
height="13"
|
|
viewBox="0 0 13 13"
|
|
style={{ display: 'inline-block', verticalAlign: '-1px', marginRight: '2px' }}
|
|
>
|
|
<rect x="0.5" y="0.5" width="12" height="12" rx="1.5" fill="#ffffff" stroke="#4b5563" strokeWidth="1" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
return <span style={{ display: 'inline-block', verticalAlign: 'middle', marginLeft: '4px' }}>{boxes}</span>;
|
|
};
|
|
|
|
return (
|
|
<div id={id || "prioridades-pdf-content"} className="bg-white text-black max-w-4xl mx-auto p-6">
|
|
<style>{`
|
|
.checklist-container {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
color: #111827;
|
|
}
|
|
.item-card {
|
|
padding: 8px 10px;
|
|
border-radius: 6px;
|
|
background-color: #ffffff;
|
|
box-sizing: border-box;
|
|
}
|
|
.item-card-cm {
|
|
border: 1.5px solid #4b5563;
|
|
}
|
|
.item-card-sm {
|
|
border: 1.5px dashed #9ca3af;
|
|
}
|
|
.item-signature {
|
|
margin-top: 6px;
|
|
font-size: 11px;
|
|
color: #4b5563;
|
|
border-bottom: 1px solid #9ca3af;
|
|
padding-bottom: 2px;
|
|
height: 18px;
|
|
line-height: 14px;
|
|
}
|
|
@page {
|
|
size: A4 portrait;
|
|
margin: 8mm 10mm 8mm 10mm;
|
|
}
|
|
@media print {
|
|
body {
|
|
font-size: 9.5px;
|
|
-webkit-print-color-adjust: exact !important;
|
|
print-color-adjust: exact !important;
|
|
}
|
|
.checklist-container {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
.priority-group {
|
|
break-inside: auto;
|
|
page-break-inside: auto;
|
|
}
|
|
h2 {
|
|
break-after: avoid;
|
|
page-break-after: avoid;
|
|
}
|
|
.item-row {
|
|
break-inside: avoid;
|
|
page-break-inside: avoid;
|
|
}
|
|
.item-card {
|
|
break-inside: avoid;
|
|
page-break-inside: avoid;
|
|
}
|
|
}
|
|
`}</style>
|
|
|
|
<div className="checklist-container">
|
|
{/* Cabeçalho do Relatório */}
|
|
<div className="flex justify-between items-center border-b-2 border-gray-800 pb-3 mb-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900 leading-tight">Checklist de Produção</h1>
|
|
<p className="text-xs text-gray-600">Formulário para apontamento da fabricação.</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="font-semibold text-sm">
|
|
Data de Emissão: <span className="font-normal">{dataAtual}</span>
|
|
{versaoAtual && (
|
|
<span className="ml-2 text-gray-500 font-medium">Rev. {versaoAtual.revisao}</span>
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Informações da OF e Fase */}
|
|
<div className="border border-gray-200 bg-white p-3.5 rounded-lg mb-3">
|
|
<div className="grid grid-cols-4 gap-x-6 gap-y-3">
|
|
{/* Coluna OF */}
|
|
<div>
|
|
<p className="text-xs font-medium text-gray-500">Ordem de Fabricação (OF)</p>
|
|
<p className="text-base font-bold text-gray-800 leading-snug">{ofNumber}</p>
|
|
</div>
|
|
{/* Coluna Fase */}
|
|
<div>
|
|
<p className="text-xs font-medium text-gray-500">Fase</p>
|
|
<p className="text-base font-bold text-gray-800 leading-snug">{etapaFase}</p>
|
|
</div>
|
|
{/* Coluna Processo */}
|
|
<div className="col-span-2">
|
|
<p className="text-xs font-medium text-gray-500 mb-1">PROCESSO</p>
|
|
<div style={{ marginTop: '2px' }}>
|
|
{['Corte', 'Solda', 'Pintura', 'Expedição'].map((processo) => (
|
|
<div
|
|
key={processo}
|
|
style={{
|
|
display: 'inline-block',
|
|
verticalAlign: 'middle',
|
|
marginRight: '16px',
|
|
whiteSpace: 'nowrap'
|
|
}}
|
|
>
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 14 14"
|
|
style={{ display: 'inline-block', verticalAlign: '-2px', marginRight: '4px' }}
|
|
>
|
|
<rect x="0.75" y="0.75" width="12.5" height="12.5" rx="1.5" fill="#ffffff" stroke="#4b5563" strokeWidth="1.5" />
|
|
</svg>
|
|
<span style={{ fontSize: '13px', fontWeight: 600, color: '#374151', verticalAlign: 'middle' }}>
|
|
{processo}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Legenda */}
|
|
<div className="text-xs text-gray-600 mb-5 flex items-center flex-wrap">
|
|
<span className="font-semibold" style={{ marginRight: '6px' }}>Legenda:</span>
|
|
<span style={{ marginRight: '6px' }}>Marca (Qtd)</span>
|
|
<span className="font-medium text-gray-500" style={{ marginRight: '4px' }}>(S/M)</span>
|
|
<span style={{ marginRight: '6px' }}>= Sem Montagem (borda tracejada),</span>
|
|
<span className="font-medium text-gray-500" style={{ marginRight: '4px' }}>(C/M)</span>
|
|
<span style={{ marginRight: '4px' }}>= Com Montagem (borda contínua). Os quadrados</span>
|
|
<svg
|
|
width="13"
|
|
height="13"
|
|
viewBox="0 0 13 13"
|
|
style={{ display: 'inline-block', verticalAlign: '-2px', margin: '0 4px' }}
|
|
>
|
|
<rect x="0.5" y="0.5" width="12" height="12" rx="1.5" fill="#ffffff" stroke="#4b5563" strokeWidth="1" />
|
|
</svg>
|
|
<span>indicam o controle de peças (quadrados com número = lotes de 50, 10 ou 5 unidades; vazios = 1 unidade).</span>
|
|
</div>
|
|
|
|
{/* Itens por Prioridade */}
|
|
<div className="space-y-6">
|
|
{['P1', 'P2', 'P3', 'P4'].map((codigo) => {
|
|
const itens = itensPorPrioridade[codigo] || [];
|
|
if (itens.length === 0) return null;
|
|
|
|
return (
|
|
<div key={codigo} className="priority-group mb-5">
|
|
<h2 className={`text-base font-semibold ${getCoresPrioridade(codigo)} px-3 py-1 rounded-md inline-block mb-2.5 border`}>
|
|
{getPrioridadeNome(codigo)}
|
|
</h2>
|
|
|
|
<div className="space-y-1.5">
|
|
{Array.from({ length: Math.ceil(itens.length / 3) }, (_, i) => {
|
|
const bgColorClass = i % 2 !== 0 ? 'bg-gray-50/70' : 'bg-white';
|
|
const rowItems = itens.slice(i * 3, (i + 1) * 3);
|
|
|
|
return (
|
|
<div key={i} className={`item-row grid grid-cols-3 gap-2 p-1 rounded-md ${bgColorClass}`} style={{ breakInside: 'avoid', pageBreakInside: 'avoid' }}>
|
|
{rowItems.map((item) => {
|
|
const quantidade = item.quantidade_priorizada;
|
|
const marca = item.peca?.marca || 'N/A';
|
|
const temComponentes = item.peca?.tem_componentes;
|
|
const infoType = temComponentes ? '(C/M)' : '(S/M)';
|
|
|
|
return (
|
|
<div key={item.id} className={`item-card ${temComponentes ? 'item-card-cm' : 'item-card-sm'}`}>
|
|
<div style={{ marginBottom: '6px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
|
<span style={{ fontSize: '13px', fontWeight: 700, color: '#111827', verticalAlign: 'middle', marginRight: '4px' }}>
|
|
{marca} ({quantidade})
|
|
</span>
|
|
<span style={{ fontSize: '11px', fontWeight: 600, color: '#6b7280', verticalAlign: 'middle' }}>
|
|
{infoType}
|
|
</span>
|
|
{generateTickBoxes(quantidade)}
|
|
</div>
|
|
<div className="item-signature">
|
|
Data/Operador:
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
{/* Preencher células vazias se necessário */}
|
|
{Array.from({ length: 3 - rowItems.length }, (_, emptyIndex) => (
|
|
<div key={`empty-${emptyIndex}`}></div>
|
|
))}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|