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

fix: alinhamento visual simetrico no checklist de producao em PDF e impressao

Browse Source
This commit is contained in:
Marcos Reifonas
2026-08-21 16:34:26 +00:00
parent 36d545d36d
commit ee688b0f5d
2 changed files with 366 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/prioridades/PrioridadesPDFTemplate.tsx
+145 -50
View File
@@ -39,11 +39,11 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
const getCoresPrioridade = (codigo: string) => { const getCoresPrioridade = (codigo: string) => {
switch (codigo) { switch (codigo) {
case 'P1': return 'text-red-700 bg-red-100'; case 'P1': return 'text-red-700 bg-red-100 border-red-300';
case 'P2': return 'text-orange-700 bg-orange-100'; case 'P2': return 'text-orange-700 bg-orange-100 border-orange-300';
case 'P3': return 'text-blue-700 bg-blue-100'; case 'P3': return 'text-blue-700 bg-blue-100 border-blue-300';
case 'P4': return 'text-gray-700 bg-gray-200'; case 'P4': return 'text-gray-700 bg-gray-200 border-gray-300';
default: return 'text-gray-700 bg-gray-200'; default: return 'text-gray-700 bg-gray-200 border-gray-300';
} }
}; };
@@ -54,7 +54,7 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
const numBigBoxes = Math.floor(quantity / 5); const numBigBoxes = Math.floor(quantity / 5);
const numSmallBoxes = quantity % 5; const numSmallBoxes = quantity % 5;
// Quadrados grandes com "5" // Quadrados com "5"
for (let i = 0; i < numBigBoxes; i++) { for (let i = 0; i < numBigBoxes; i++) {
boxes.push( boxes.push(
<div key={`big-${i}`} className="tick-box-large"> <div key={`big-${i}`} className="tick-box-large">
@@ -63,57 +63,150 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
); );
} }
// Quadrados pequenos restantes // Quadrados unitários restantes
for (let i = 0; i < numSmallBoxes; i++) { for (let i = 0; i < numSmallBoxes; i++) {
boxes.push(<div key={`small-${i}`} className="tick-box"></div>); boxes.push(<div key={`small-${i}`} className="tick-box"></div>);
} }
} else { } else {
// Apenas quadrados pequenos // Apenas quadrados unitários
for (let i = 0; i < quantity; i++) { for (let i = 0; i < quantity; i++) {
boxes.push(<div key={i} className="tick-box"></div>); boxes.push(<div key={i} className="tick-box"></div>);
} }
} }
return <div className="flex items-center flex-wrap gap-1">{boxes}</div>; return <div className="tick-boxes-wrapper">{boxes}</div>;
}; };
return ( return (
<div id="prioridades-pdf-content" className="bg-white text-black max-w-4xl mx-auto p-6"> <div id="prioridades-pdf-content" className="bg-white text-black max-w-4xl mx-auto p-6">
<style>{` <style>{`
.tick-box { .checklist-container {
width: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
height: 12px; color: #111827;
border: 1px solid #6b7280; }
.process-group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 4px;
}
.process-item {
display: inline-flex;
align-items: center;
gap: 6px;
vertical-align: middle;
}
.process-checkbox {
width: 14px;
height: 14px;
min-width: 14px;
min-height: 14px;
border: 1.5px solid #4b5563;
border-radius: 2px;
display: inline-block; display: inline-block;
flex-shrink: 0; vertical-align: middle;
box-sizing: border-box;
background-color: #ffffff;
}
.process-label {
font-size: 13px;
font-weight: 600;
color: #374151;
line-height: 14px;
display: inline-block;
vertical-align: middle;
}
.tick-boxes-wrapper {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 3px;
vertical-align: middle;
}
.tick-box {
width: 13px;
height: 13px;
min-width: 13px;
min-height: 13px;
border: 1px solid #4b5563;
border-radius: 2px;
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
background-color: #ffffff;
} }
.tick-box-large { .tick-box-large {
width: 16px; width: 13px;
height: 16px; height: 13px;
border: 1px solid #6b7280; min-width: 13px;
min-height: 13px;
border: 1px solid #4b5563;
border-radius: 2px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; vertical-align: middle;
flex-shrink: 0; box-sizing: border-box;
background-color: #f3f4f6;
text-align: center;
line-height: 1;
} }
.tick-box-large span { .tick-box-large span {
color: #d1d5db; color: #6b7280;
font-size: 10px; font-size: 8.5px;
font-weight: 600; font-weight: 700;
line-height: 13px;
display: block;
width: 100%;
height: 100%;
text-align: center;
} }
.item-card { .item-card {
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
padding: 8px; padding: 8px 10px;
border-radius: 6px; border-radius: 6px;
background-color: #ffffff;
box-sizing: border-box;
}
.item-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
min-height: 18px;
}
.item-marca {
font-size: 13px;
font-weight: 700;
color: #111827;
line-height: 14px;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
.item-tipo {
font-size: 11px;
font-weight: 600;
color: #6b7280;
line-height: 14px;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
.item-signature {
margin-top: 6px;
font-size: 11px;
color: #4b5563;
border-bottom: 1px solid #9ca3af;
padding-bottom: 2px;
height: 18px;
line-height: 14px;
} }
@media print { @media print {
body { body {
font-size: 9px; font-size: 9px;
} }
.check-box-print {
border: 1px solid #333 !important;
}
.page-break { .page-break {
page-break-before: always; page-break-before: always;
} }
@@ -126,43 +219,44 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
} }
`}</style> `}</style>
<div className="checklist-container">
{/* Cabeçalho do Relatório */} {/* Cabeçalho do Relatório */}
<div className="flex justify-between items-center border-b-2 border-gray-800 pb-4 mb-4"> <div className="flex justify-between items-center border-b-2 border-gray-800 pb-3 mb-4">
<div> <div>
<h1 className="text-2xl font-bold text-gray-900">Checklist de Produção</h1> <h1 className="text-2xl font-bold text-gray-900 leading-tight">Checklist de Produção</h1>
<p className="text-gray-600">Formulário para apontamento da fabricação.</p> <p className="text-xs text-gray-600">Formulário para apontamento da fabricação.</p>
</div> </div>
<div className="text-right"> <div className="text-right">
<p className="font-semibold"> <p className="font-semibold text-sm">
Data de Emissão: <span className="font-normal">{dataAtual}</span> Data de Emissão: <span className="font-normal">{dataAtual}</span>
{versaoAtual && ( {versaoAtual && (
<span className="ml-2 text-gray-500">Rev. {versaoAtual.revisao}</span> <span className="ml-2 text-gray-500 font-medium">Rev. {versaoAtual.revisao}</span>
)} )}
</p> </p>
</div> </div>
</div> </div>
{/* Informações da OF e Fase */} {/* Informações da OF e Fase */}
<div className="border border-gray-200 bg-white p-4 rounded-lg mb-2"> <div className="border border-gray-200 bg-white p-3.5 rounded-lg mb-3">
<div className="grid grid-cols-1 md:grid-cols-4 gap-x-6 gap-y-4"> <div className="grid grid-cols-1 md:grid-cols-4 gap-x-6 gap-y-3">
{/* Coluna OF */} {/* Coluna OF */}
<div> <div>
<p className="text-xs font-medium text-gray-500">Ordem de Fabricação (OF)</p> <p className="text-xs font-medium text-gray-500">Ordem de Fabricação (OF)</p>
<p className="text-base font-bold text-gray-800">{ofNumber}</p> <p className="text-base font-bold text-gray-800 leading-snug">{ofNumber}</p>
</div> </div>
{/* Coluna Fase */} {/* Coluna Fase */}
<div> <div>
<p className="text-xs font-medium text-gray-500">Fase</p> <p className="text-xs font-medium text-gray-500">Fase</p>
<p className="text-base font-bold text-gray-800">{etapaFase}</p> <p className="text-base font-bold text-gray-800 leading-snug">{etapaFase}</p>
</div> </div>
{/* Coluna Processo */} {/* Coluna Processo */}
<div className="md:col-span-2"> <div className="md:col-span-2">
<p className="text-xs font-medium text-gray-500">PROCESSO</p> <p className="text-xs font-medium text-gray-500">PROCESSO</p>
<div className="flex items-center flex-wrap gap-x-4 gap-y-1 mt-1"> <div className="process-group">
{['Corte', 'Solda', 'Pintura', 'Expedição'].map((processo) => ( {['Corte', 'Solda', 'Pintura', 'Expedição'].map((processo) => (
<div key={processo} className="flex items-center gap-1"> <div key={processo} className="process-item">
<div className="w-4 h-4 border-2 border-gray-500 check-box-print"></div> <span className="process-checkbox"></span>
<span className="text-sm font-semibold text-gray-700">{processo}</span> <span className="process-label">{processo}</span>
</div> </div>
))} ))}
</div> </div>
@@ -171,32 +265,32 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
</div> </div>
{/* Legenda */} {/* Legenda */}
<div className="text-xs text-gray-600 mb-6 flex items-center flex-wrap gap-x-3"> <div className="text-xs text-gray-600 mb-5 flex items-center flex-wrap gap-x-2.5">
<span className="font-semibold">Legenda:</span> <span className="font-semibold">Legenda:</span>
<span>Marca (Qtd)</span> <span>Marca (Qtd)</span>
<span className="font-medium text-gray-500">(S/M)</span> <span className="font-medium text-gray-500">(S/M)</span>
<span>= Sem Montagem,</span> <span>= Sem Montagem,</span>
<span className="font-medium text-gray-500">(C/M)</span> <span className="font-medium text-gray-500">(C/M)</span>
<span>= Com Montagem. Os quadrados</span> <span>= Com Montagem. Os quadrados</span>
<div className="tick-box inline-block"></div> <span className="tick-box"></span>
<span>indicam o controle de peças fabricadas.</span> <span>indicam o controle de peças fabricadas.</span>
</div> </div>
{/* Itens por Prioridade */} {/* Itens por Prioridade */}
<div className="space-y-8"> <div className="space-y-6">
{['P1', 'P2', 'P3', 'P4'].map((codigo, priorityIndex) => { {['P1', 'P2', 'P3', 'P4'].map((codigo, priorityIndex) => {
const itens = itensPorPrioridade[codigo] || []; const itens = itensPorPrioridade[codigo] || [];
if (itens.length === 0) return null; if (itens.length === 0) return null;
return ( return (
<div key={codigo} className={priorityIndex > 0 ? 'page-break' : ''}> <div key={codigo} className={priorityIndex > 0 ? 'page-break' : ''}>
<h2 className={`text-lg font-semibold ${getCoresPrioridade(codigo)} px-3 py-1 rounded-md inline-block mb-3`}> <h2 className={`text-base font-semibold ${getCoresPrioridade(codigo)} px-3 py-1 rounded-md inline-block mb-2.5 border`}>
{getPrioridadeNome(codigo)} {getPrioridadeNome(codigo)}
</h2> </h2>
<div className="space-y-1"> <div className="space-y-1.5">
{Array.from({ length: Math.ceil(itens.length / 3) }, (_, i) => { {Array.from({ length: Math.ceil(itens.length / 3) }, (_, i) => {
const bgColorClass = i % 2 !== 0 ? 'bg-gray-50' : 'bg-white'; const bgColorClass = i % 2 !== 0 ? 'bg-gray-50/70' : 'bg-white';
const rowItems = itens.slice(i * 3, (i + 1) * 3); const rowItems = itens.slice(i * 3, (i + 1) * 3);
return ( return (
@@ -209,15 +303,15 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
return ( return (
<div key={item.id} className="item-card"> <div key={item.id} className="item-card">
<div className="flex items-center flex-wrap gap-2 mb-2"> <div className="item-header">
<span className="font-semibold text-sm whitespace-nowrap"> <span className="item-marca">
{marca} ({quantidade}) {marca} ({quantidade})
</span> </span>
<span className="text-xs font-medium text-gray-500">{infoType}</span> <span className="item-tipo">{infoType}</span>
{generateTickBoxes(quantidade)} {generateTickBoxes(quantidade)}
</div> </div>
<div className="mt-2 text-xs"> <div className="item-signature">
<div className="border-b border-gray-400 pb-1 h-5">Data/Operador:</div> Data/Operador:
</div> </div>
</div> </div>
); );
@@ -236,5 +330,6 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
})} })}
</div> </div>
</div> </div>
</div>
); );
}; };
src/pages/PrioridadesFabricacao.tsx
+143 -54
View File
@@ -68,7 +68,7 @@ const PrioridadesFabricacao = () => {
boxesHtml += `<div class="tick-box"></div>`; boxesHtml += `<div class="tick-box"></div>`;
} }
} }
return `<div class="flex items-center flex-wrap gap-1">${boxesHtml}</div>`; return `<div class="tick-boxes-wrapper">${boxesHtml}</div>`;
}; };
const handleImprimirRelatorio = async () => { const handleImprimirRelatorio = async () => {
@@ -141,13 +141,13 @@ const PrioridadesFabricacao = () => {
itemsContent += ` itemsContent += `
<div class="item-card"> <div class="item-card">
<div class="flex items-center flex-wrap gap-2 mb-2"> <div class="item-header">
<span class="font-semibold text-sm whitespace-nowrap">${marca} (${quantidade})</span> <span class="item-marca">${marca} (${quantidade})</span>
<span class="text-xs font-medium text-gray-500">${infoType}</span> <span class="item-tipo">${infoType}</span>
${tickBoxes} ${tickBoxes}
</div> </div>
<div class="mt-2 text-xs"> <div class="item-signature">
<div class="border-b border-gray-400 pb-1 h-5">Data/Operador:</div> Data/Operador:
</div> </div>
</div> </div>
`; `;
@@ -176,20 +176,136 @@ const PrioridadesFabricacao = () => {
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checklist de Produção por Prioridade</title> <title>Checklist de Produção por Prioridade</title>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style> <style>
body { body {
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
-webkit-print-color-adjust: exact; -webkit-print-color-adjust: exact;
print-color-adjust: exact; print-color-adjust: exact;
} }
.process-group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 4px;
}
.process-item {
display: inline-flex;
align-items: center;
gap: 6px;
vertical-align: middle;
}
.process-checkbox {
width: 14px;
height: 14px;
min-width: 14px;
min-height: 14px;
border: 1.5px solid #4b5563;
border-radius: 2px;
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
background-color: #ffffff;
}
.process-label {
font-size: 13px;
font-weight: 600;
color: #374151;
line-height: 14px;
display: inline-block;
vertical-align: middle;
}
.tick-boxes-wrapper {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 3px;
vertical-align: middle;
}
.tick-box {
width: 13px;
height: 13px;
min-width: 13px;
min-height: 13px;
border: 1px solid #4b5563;
border-radius: 2px;
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
background-color: #ffffff;
}
.tick-box-large {
width: 13px;
height: 13px;
min-width: 13px;
min-height: 13px;
border: 1px solid #4b5563;
border-radius: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
box-sizing: border-box;
background-color: #f3f4f6;
text-align: center;
line-height: 1;
}
.tick-box-large span {
color: #6b7280;
font-size: 8.5px;
font-weight: 700;
line-height: 13px;
display: block;
width: 100%;
height: 100%;
text-align: center;
}
.item-card {
border: 1px solid #e5e7eb;
padding: 8px 10px;
border-radius: 6px;
background-color: #ffffff;
box-sizing: border-box;
}
.item-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
min-height: 18px;
}
.item-marca {
font-size: 13px;
font-weight: 700;
color: #111827;
line-height: 14px;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
.item-tipo {
font-size: 11px;
font-weight: 600;
color: #6b7280;
line-height: 14px;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
.item-signature {
margin-top: 6px;
font-size: 11px;
color: #4b5563;
border-bottom: 1px solid #9ca3af;
padding-bottom: 2px;
height: 18px;
line-height: 14px;
}
@media print { @media print {
body { body {
font-size: 9px; font-size: 9px;
} }
.check-box-print {
border: 1px solid #333 !important;
}
.page-break { .page-break {
page-break-before: always; page-break-before: always;
} }
@@ -200,85 +316,58 @@ const PrioridadesFabricacao = () => {
page-break-inside: avoid; page-break-inside: avoid;
} }
} }
.item-card {
border: 1px solid #e5e7eb;
padding: 8px;
border-radius: 6px;
}
.tick-box {
width: 12px;
height: 12px;
border: 1px solid #6b7280;
display: inline-block;
flex-shrink: 0;
}
.tick-box-large {
width: 16px;
height: 16px;
border: 1px solid #6b7280;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
}
.tick-box-large span {
color: #d1d5db;
font-size: 10px;
font-weight: 600;
}
</style> </style>
</head> </head>
<body class="bg-white"> <body class="bg-white">
<div class="max-w-4xl mx-auto p-6 sm:p-8"> <div class="max-w-4xl mx-auto p-6 sm:p-8">
<!-- Cabeçalho do Relatório --> <!-- Cabeçalho do Relatório -->
<div class="flex justify-between items-center border-b-2 border-gray-800 pb-4 mb-4"> <div class="flex justify-between items-center border-b-2 border-gray-800 pb-3 mb-4">
<div> <div>
<h1 class="text-2xl font-bold text-gray-900">Checklist de Produção</h1> <h1 class="text-2xl font-bold text-gray-900 leading-tight">Checklist de Produção</h1>
<p class="text-gray-600">Formulário para apontamento da fabricação.</p> <p class="text-xs text-gray-600">Formulário para apontamento da fabricação.</p>
</div> </div>
<div class="text-right"> <div class="text-right">
<p class="font-semibold">Data de Emissão: <span class="font-normal">${dataAtual}</span> <p class="font-semibold text-sm">Data de Emissão: <span class="font-normal">${dataAtual}</span>
${versaoAtual ? `<span class="ml-2 text-gray-500">Rev. ${versaoAtual.revisao}</span>` : ''} ${versaoAtual ? `<span class="ml-2 text-gray-500 font-medium">Rev. ${versaoAtual.revisao}</span>` : ''}
</p> </p>
</div> </div>
</div> </div>
<!-- Informações da OF e Fase (Layout Melhorado) --> <!-- Informações da OF e Fase -->
<div class="border border-gray-200 bg-white p-4 rounded-lg mb-2"> <div class="border border-gray-200 bg-white p-3.5 rounded-lg mb-3">
<div class="grid grid-cols-1 md:grid-cols-4 gap-x-6 gap-y-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-x-6 gap-y-3">
<!-- Coluna OF --> <!-- Coluna OF -->
<div> <div>
<p class="text-xs font-medium text-gray-500">Ordem de Fabricação (OF)</p> <p class="text-xs font-medium text-gray-500">Ordem de Fabricação (OF)</p>
<p class="text-base font-bold text-gray-800">${ofSelecionada}</p> <p class="text-base font-bold text-gray-800 leading-snug">${ofSelecionada}</p>
</div> </div>
<!-- Coluna Fase --> <!-- Coluna Fase -->
<div> <div>
<p class="text-xs font-medium text-gray-500">Fase</p> <p class="text-xs font-medium text-gray-500">Fase</p>
<p class="text-base font-bold text-gray-800">${faseSelecionada}</p> <p class="text-base font-bold text-gray-800 leading-snug">${faseSelecionada}</p>
</div> </div>
<!-- Coluna Processo --> <!-- Coluna Processo -->
<div class="md:col-span-2"> <div class="md:col-span-2">
<p class="text-xs font-medium text-gray-500">PROCESSO</p> <p class="text-xs font-medium text-gray-500">PROCESSO</p>
<div class="flex items-center flex-wrap gap-x-4 gap-y-1 mt-1"> <div class="process-group">
<div class="flex items-center gap-1"><div class="w-4 h-4 border-2 border-gray-500 check-box-print"></div><span class="text-sm font-semibold text-gray-700">Corte</span></div> <div class="process-item"><span class="process-checkbox"></span><span class="process-label">Corte</span></div>
<div class="flex items-center gap-1"><div class="w-4 h-4 border-2 border-gray-500 check-box-print"></div><span class="text-sm font-semibold text-gray-700">Solda</span></div> <div class="process-item"><span class="process-checkbox"></span><span class="process-label">Solda</span></div>
<div class="flex items-center gap-1"><div class="w-4 h-4 border-2 border-gray-500 check-box-print"></div><span class="text-sm font-semibold text-gray-700">Pintura</span></div> <div class="process-item"><span class="process-checkbox"></span><span class="process-label">Pintura</span></div>
<div class="flex items-center gap-1"><div class="w-4 h-4 border-2 border-gray-500 check-box-print"></div><span class="text-sm font-semibold text-gray-700">Expedição</span></div> <div class="process-item"><span class="process-checkbox"></span><span class="process-label">Expedição</span></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Legenda --> <!-- Legenda -->
<div class="text-xs text-gray-600 mb-6 flex items-center flex-wrap gap-x-3"> <div class="text-xs text-gray-600 mb-5 flex items-center flex-wrap gap-x-2.5">
<span class="font-semibold">Legenda:</span> <span class="font-semibold">Legenda:</span>
<span>Marca (Qtd)</span> <span>Marca (Qtd)</span>
<span class="font-medium text-gray-500">(S/M)</span> <span class="font-medium text-gray-500">(S/M)</span>
<span>= Sem Montagem,</span> <span>= Sem Montagem,</span>
<span class="font-medium text-gray-500">(C/M)</span> <span class="font-medium text-gray-500">(C/M)</span>
<span>= Com Montagem. Os quadrados</span> <span>= Com Montagem. Os quadrados</span>
<div class="tick-box inline-block"></div> <span class="tick-box"></span>
<span>indicam o controle de peças fabricadas.</span> <span>indicam o controle de peças fabricadas.</span>
</div> </div>