From 69f37c02a81a2e749c98b5441ef2731cf5c9e378 Mon Sep 17 00:00:00 2001
From: Marcos Reifonas <m.reifonas@gmail.com>
Date: Thu, 10 Sep 2026 13:29:10 +0000
Subject: [PATCH] fix: layout de impressao identico ao preview, eliminando
 quebra involuntaria no cabecalho

---
 .../prioridades/PrioridadesPDFTemplate.tsx    |  33 +++-
 src/pages/PrioridadesFabricacao.tsx           |  28 ++--
 src/utils/pdfGenerator.ts                     | 155 +++---------------
 3 files changed, 62 insertions(+), 154 deletions(-)

diff --git a/src/components/prioridades/PrioridadesPDFTemplate.tsx b/src/components/prioridades/PrioridadesPDFTemplate.tsx
index dd83464..2a91c48 100644
--- a/src/components/prioridades/PrioridadesPDFTemplate.tsx
+++ b/src/components/prioridades/PrioridadesPDFTemplate.tsx
@@ -171,17 +171,34 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
           height: 18px;
           line-height: 14px;
         }
+        @page {
+          size: A4 portrait;
+          margin: 8mm 10mm 8mm 10mm;
+        }
         @media print {
           body {
-            font-size: 9px;
+            font-size: 9.5px;
+            -webkit-print-color-adjust: exact !important;
+            print-color-adjust: exact !important;
           }
-          .page-break {
-            page-break-before: always;
+          .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;
           }
         }
@@ -206,7 +223,7 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
         
         {/* 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-1 md:grid-cols-4 gap-x-6 gap-y-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>
@@ -218,7 +235,7 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
               <p className="text-base font-bold text-gray-800 leading-snug">{etapaFase}</p>
             </div>
             {/* Coluna Processo */}
-            <div className="md:col-span-2">
+            <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) => (
@@ -270,12 +287,12 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
 
         {/* Itens por Prioridade */}
         <div className="space-y-6">
-          {['P1', 'P2', 'P3', 'P4'].map((codigo, priorityIndex) => {
+          {['P1', 'P2', 'P3', 'P4'].map((codigo) => {
             const itens = itensPorPrioridade[codigo] || [];
             if (itens.length === 0) return null;
 
             return (
-              <div key={codigo} className={priorityIndex > 0 ? 'page-break' : ''}>
+              <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>
@@ -286,7 +303,7 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
                     const rowItems = itens.slice(i * 3, (i + 1) * 3);
                     
                     return (
-                      <div key={i} className={`grid grid-cols-3 gap-2 p-1 rounded-md ${bgColorClass}`}>
+                      <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';
diff --git a/src/pages/PrioridadesFabricacao.tsx b/src/pages/PrioridadesFabricacao.tsx
index 2927413..2b2a851 100644
--- a/src/pages/PrioridadesFabricacao.tsx
+++ b/src/pages/PrioridadesFabricacao.tsx
@@ -176,11 +176,8 @@ const PrioridadesFabricacao = () => {
           }
         };
 
-        // Adicionar classe page-break para P2, P3 e P4
-        const pageBreakClass = priorityIndex > 0 ? 'page-break' : '';
-        
         itemsContent += `
-          <div class="priority-group ${pageBreakClass}">
+          <div class="priority-group mb-5">
             <h2 class="text-base font-semibold ${getCoresPrioridade(codigo)} px-3 py-1 rounded-md inline-block mb-2.5 border">
               ${getPrioridadeNome(codigo)}
             </h2>
@@ -192,7 +189,7 @@ const PrioridadesFabricacao = () => {
           const bgColorClass = i % 2 !== 0 ? 'bg-gray-50/70' : 'bg-white';
           const rowItems = itens.slice(i * 3, (i + 1) * 3);
           
-          itemsContent += `<div class="grid grid-cols-3 gap-2 p-1 rounded-md ${bgColorClass}">`;
+          itemsContent += `<div class="item-row grid grid-cols-3 gap-2 p-1 rounded-md ${bgColorClass}" style="break-inside: avoid; page-break-inside: avoid;">`;
           
           rowItems.forEach((item) => {
             const quantidade = item.quantidade_priorizada;
@@ -266,17 +263,28 @@ const PrioridadesFabricacao = () => {
                   height: 18px;
                   line-height: 14px;
                 }
+                @page {
+                  size: A4 portrait;
+                  margin: 8mm 10mm 8mm 10mm;
+                }
                 @media print {
                     body {
-                        font-size: 9px;
+                        font-size: 9.5px;
                     }
-                    .page-break {
-                        page-break-before: always;
+                    .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;
                     }
                 }
@@ -299,7 +307,7 @@ const PrioridadesFabricacao = () => {
                 
                 <!-- Informações da OF e Fase -->
                 <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-3">
+                    <div class="grid grid-cols-4 gap-x-6 gap-y-3">
                         <!-- Coluna OF -->
                         <div>
                             <p class="text-xs font-medium text-gray-500">Ordem de Fabricação (OF)</p>
@@ -311,7 +319,7 @@ const PrioridadesFabricacao = () => {
                             <p class="text-base font-bold text-gray-800 leading-snug">${faseSelecionada}</p>
                         </div>
                         <!-- Coluna Processo -->
-                        <div class="md:col-span-2">
+                        <div class="col-span-2">
                             <p class="text-xs font-medium text-gray-500 mb-1">PROCESSO</p>
                             <div style="margin-top: 2px;">
                               <div style="display: inline-block; vertical-align: middle; margin-right: 16px; white-space: nowrap;">
diff --git a/src/utils/pdfGenerator.ts b/src/utils/pdfGenerator.ts
index 8cd652b..9320c62 100644
--- a/src/utils/pdfGenerator.ts
+++ b/src/utils/pdfGenerator.ts
@@ -214,27 +214,25 @@ export const printProfessionalPDF = async (elementId: string) => {
       console.warn('Não foi possível obter alguns estilos', e);
     }
 
-    // HTML otimizado para impressão sem áreas vazias
+    // HTML otimizado para impressão idêntica à visualização
     const printContent = `
       <!DOCTYPE html>
       <html>
         <head>
-          <title>Relatório de Produção</title>
+          <title>Checklist de Produção</title>
           <meta charset="UTF-8">
+          <script src="https://cdn.tailwindcss.com"></script>
           <style>
             ${allStyles}
             
             /* Reset e configuração básica */
             * {
               box-sizing: border-box;
-              margin: 0;
-              padding: 0;
             }
             
             @page {
-              size: A4;
-              margin: 15mm 20mm 15mm 20mm;
-              padding: 0;
+              size: A4 portrait;
+              margin: 8mm 10mm 8mm 10mm;
             }
             
             @media print {
@@ -242,163 +240,48 @@ export const printProfessionalPDF = async (elementId: string) => {
                 -webkit-print-color-adjust: exact !important;
                 print-color-adjust: exact !important;
                 color-adjust: exact !important;
-                margin: 0 !important;
-                padding: 0 !important;
-                font-size: 10px !important;
-                line-height: 1.2 !important;
+                background-color: #ffffff !important;
+                font-size: 9.5px !important;
               }
               
-              /* Remover elementos desnecessários */
               .no-print {
                 display: none !important;
               }
               
-              /* Otimizar espaçamento */
               #${elementId} {
                 width: 100% !important;
-                max-width: none !important;
+                max-width: 100% !important;
                 margin: 0 !important;
                 padding: 0 !important;
                 transform: none !important;
               }
               
-              /* Compactar seções */
-              .statistics-grid {
-                margin-bottom: 8px !important;
-                gap: 4px !important;
-              }
-              
-              .process-section {
-                margin-bottom: 10px !important;
-                page-break-inside: avoid;
-              }
-              
-              .priority-section {
-                margin-bottom: 10px !important;
-                page-break-inside: avoid;
-              }
-              
-              /* Otimizar tabelas */
-              table {
-                width: 100% !important;
-                border-collapse: collapse !important;
-                margin: 0 !important;
-                page-break-inside: avoid;
-              }
-              
-              th, td {
-                padding: 2px 4px !important;
-                font-size: 9px !important;
-                line-height: 1.1 !important;
-              }
-              
-              /* Compactar cabeçalhos */
-              h1 {
-                font-size: 16px !important;
-                margin-bottom: 4px !important;
-                line-height: 1.1 !important;
+              .priority-group {
+                break-inside: auto !important;
+                page-break-inside: auto !important;
               }
               
               h2 {
-                font-size: 14px !important;
-                margin-bottom: 6px !important;
-                margin-top: 8px !important;
-                line-height: 1.1 !important;
+                break-after: avoid !important;
+                page-break-after: avoid !important;
               }
               
-              h3 {
-                font-size: 12px !important;
-                margin-bottom: 4px !important;
-                line-height: 1.1 !important;
-              }
-              
-              /* Reduzir espaçamentos desnecessários */
-              header {
-                margin-bottom: 8px !important;
-                padding-bottom: 8px !important;
-              }
-              
-              section {
-                margin-bottom: 8px !important;
-              }
-              
-              /* Otimizar cards de estatísticas */
-              .statistics-grid > div {
-                padding: 4px !important;
-                margin: 0 !important;
-              }
-              
-              /* Evitar quebras desnecessárias */
-              .avoid-break {
+              .item-row {
+                break-inside: avoid !important;
                 page-break-inside: avoid !important;
               }
               
-              .process-header {
-                page-break-after: avoid !important;
-              }
-              
-              .priority-header {
-                page-break-after: avoid !important;
-              }
-              
-              /* Compactar processos menores */
-              .process-section h3 {
-                padding: 3px 6px !important;
-                margin: 0 !important;
-              }
-              
-              .process-section .grid {
-                gap: 3px !important;
-                padding: 3px !important;
-                margin-bottom: 3px !important;
-              }
-              
-              /* Melhorar aproveitamento do espaço */
-              .overflow-x-auto {
-                overflow: visible !important;
-              }
-              
-              /* Remover espaços extras */
-              p {
-                margin: 0 !important;
-                padding: 0 !important;
-              }
-              
-              /* Compactar divs com display grid */
-              div[style*="display: grid"] {
-                gap: 3px !important;
-              }
-              
-              /* Reduzir espaçamentos entre elementos */
-              div[style*="margin-bottom"] {
-                margin-bottom: 6px !important;
-              }
-              
-              /* Otimizar áreas de processo */
-              .process-section > div:last-child {
-                margin-bottom: 0 !important;
-              }
-              
-              /* Compactar mais os elementos */
-              div[style*="padding: 10px"] {
-                padding: 4px !important;
-              }
-              
-              div[style*="padding: 8px"] {
-                padding: 3px !important;
-              }
-              
-              div[style*="padding: 6px"] {
-                padding: 2px !important;
+              .item-card {
+                break-inside: avoid !important;
+                page-break-inside: avoid !important;
               }
             }
           </style>
         </head>
-        <body>
+        <body class="bg-white">
           ${element.outerHTML}
           <script>
             window.onload = function() {
-              // Aguardar renderização e depois imprimir
               setTimeout(() => {
                 window.print();
                 window.close();