From a5debb7abdc5e30e74f0e5912b4c57e5e0f9dfd1 Mon Sep 17 00:00:00 2001
From: Marcos Reifonas <m.reifonas@gmail.com>
Date: Mon, 14 Sep 2026 12:47:18 +0000
Subject: [PATCH] fix: sincronizar impressao direta de prioridades com regras e
 template do PDF

---
 .../prioridades/PrioridadesPDFTemplate.tsx    |   4 +-
 src/pages/PrioridadesFabricacao.tsx           | 361 ++----------------
 2 files changed, 38 insertions(+), 327 deletions(-)

diff --git a/src/components/prioridades/PrioridadesPDFTemplate.tsx b/src/components/prioridades/PrioridadesPDFTemplate.tsx
index 2a91c48..6a938f9 100644
--- a/src/components/prioridades/PrioridadesPDFTemplate.tsx
+++ b/src/components/prioridades/PrioridadesPDFTemplate.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { ItemPrioridade } from '@/hooks/useItensPrioridadeFabricacao';
 
 interface PrioridadesPDFTemplateProps {
+  id?: string;
   itensPorPrioridade: { [key: string]: ItemPrioridade[] };
   ofSelecionada?: string | null;
   faseSelecionada?: string | null;
@@ -14,6 +15,7 @@ interface PrioridadesPDFTemplateProps {
 }
 
 export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({ 
+  id,
   itensPorPrioridade,
   ofSelecionada,
   faseSelecionada,
@@ -144,7 +146,7 @@ export const PrioridadesPDFTemplate: React.FC<PrioridadesPDFTemplateProps> = ({
   };
 
   return (
-    <div id="prioridades-pdf-content" className="bg-white text-black max-w-4xl mx-auto p-6">
+    <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;
diff --git a/src/pages/PrioridadesFabricacao.tsx b/src/pages/PrioridadesFabricacao.tsx
index df74928..779b530 100644
--- a/src/pages/PrioridadesFabricacao.tsx
+++ b/src/pages/PrioridadesFabricacao.tsx
@@ -3,13 +3,15 @@ import { StandardPageLayout } from '@/components/layout/StandardPageLayout';
 import { KanbanPrioridadesFabricacao } from '@/components/prioridades/KanbanPrioridadesFabricacao';
 import { PecaSelectorModal } from '@/components/prioridades/PecaSelectorModal';
 import { PrioridadesPDF } from '@/components/prioridades/PrioridadesPDF';
+import { PrioridadesPDFTemplate } from '@/components/prioridades/PrioridadesPDFTemplate';
 import { FiltrosVisualizacao } from '@/components/prioridades/FiltrosVisualizacao';
 import { useItensPrioridadeFabricacaoFiltrado } from '@/hooks/useItensPrioridadeFabricacaoFiltrado';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { Plus, FileText, RefreshCw, Printer, X } from 'lucide-react';
+import { Plus, FileText, RefreshCw, Printer, X, Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
+import { printProfessionalPDF } from '@/utils/pdfGenerator';
 
 const PrioridadesFabricacao = () => {
   const { 
@@ -31,6 +33,7 @@ const PrioridadesFabricacao = () => {
   
   const [showPecaSelector, setShowPecaSelector] = useState(false);
   const [showPrioridadesPDF, setShowPrioridadesPDF] = useState(false);
+  const [isPrintingDirect, setIsPrintingDirect] = useState(false);
 
   // Construir título dinâmico
   const tituloCompleto = useMemo(() => {
@@ -61,345 +64,29 @@ const PrioridadesFabricacao = () => {
     }
   };
 
-  const generateTickBoxesHTML = (quantity: number): string => {
-    if (!quantity || quantity <= 0) return '';
-
-    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;
-    }
-
-    let boxesHtml = '';
-
-    // Quadrados com "50"
-    for (let i = 0; i < qtd50; i++) {
-      boxesHtml += `
-        <svg width="13" height="13" viewBox="0 0 13 13" style="display: inline-block; vertical-align: -1px; margin-right: 2px;">
-          <rect x="0.5" y="0.5" width="12" height="12" rx="1.5" fill="#f3f4f6" stroke="#4b5563" stroke-width="1" />
-          <text x="6.5" y="9.2" text-anchor="middle" font-size="7" font-family="Arial, sans-serif" font-weight="bold" fill="#374151">50</text>
-        </svg>
-      `;
-    }
-
-    // Quadrados com "10"
-    for (let i = 0; i < qtd10; i++) {
-      boxesHtml += `
-        <svg width="13" height="13" viewBox="0 0 13 13" style="display: inline-block; vertical-align: -1px; margin-right: 2px;">
-          <rect x="0.5" y="0.5" width="12" height="12" rx="1.5" fill="#f3f4f6" stroke="#4b5563" stroke-width="1" />
-          <text x="6.5" y="9.2" text-anchor="middle" font-size="7" font-family="Arial, sans-serif" font-weight="bold" fill="#374151">10</text>
-        </svg>
-      `;
-    }
-
-    // Quadrados com "5"
-    for (let i = 0; i < qtd5; i++) {
-      boxesHtml += `
-        <svg width="13" height="13" viewBox="0 0 13 13" style="display: inline-block; vertical-align: -1px; margin-right: 2px;">
-          <rect x="0.5" y="0.5" width="12" height="12" rx="1.5" fill="#f3f4f6" stroke="#4b5563" stroke-width="1" />
-          <text x="6.5" y="9.5" text-anchor="middle" font-size="8.5" font-family="Arial, sans-serif" font-weight="bold" fill="#4b5563">5</text>
-        </svg>
-      `;
-    }
-
-    // Quadrados unitários (vazios)
-    for (let i = 0; i < qtd1; i++) {
-      boxesHtml += `
-        <svg width="13" height="13" viewBox="0 0 13 13" style="display: inline-block; vertical-align: -1px; margin-right: 2px;">
-          <rect x="0.5" y="0.5" width="12" height="12" rx="1.5" fill="#ffffff" stroke="#4b5563" stroke-width="1" />
-        </svg>
-      `;
-    }
-
-    return `<span style="display: inline-block; vertical-align: middle; margin-left: 4px;">${boxesHtml}</span>`;
-  };
-
   const handleImprimirRelatorio = async () => {
     if (!ofSelecionada || !faseSelecionada) {
       toast.error('Selecione uma OF e Fase para imprimir o relatório');
       return;
     }
 
-    let revisaoParaImprimir = versaoAtual?.revisao || 0;
     const querSubir = window.confirm(
       `Deseja incrementar a revisão para Rev. ${(versaoAtual?.revisao || 0) + 1} para esta impressão?\n\n- Clique em OK para subir a revisão para Rev. ${(versaoAtual?.revisao || 0) + 1}\n- Clique em Cancelar para manter a revisão atual (Rev. ${versaoAtual?.revisao || 0})`
     );
     if (querSubir) {
-      const sucesso = await incrementarRevisao();
-      if (sucesso) {
-        revisaoParaImprimir += 1;
-      }
+      await incrementarRevisao();
+      await new Promise(resolve => setTimeout(resolve, 200));
     }
 
     try {
-      // Criar nova janela para impressão
-      const printWindow = window.open('', '_blank');
-      if (!printWindow) {
-        throw new Error('Não foi possível abrir janela de impressão');
-      }
-
-      // Obter data atual formatada
-      const dataAtual = new Date().toLocaleDateString('pt-BR');
-
-      // Gerar conteúdo dos itens por prioridade
-      let itemsContent = '';
-      
-      ['P1', 'P2', 'P3', 'P4'].forEach((codigo, priorityIndex) => {
-        const itens = itensPorPrioridade[codigo] || [];
-        if (itens.length === 0) return;
-
-        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';
-          }
-        };
-
-        itemsContent += `
-          <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>
-            <div class="space-y-1.5">
-        `;
-
-        // Gerar linhas de itens (3 por linha)
-        for (let i = 0; i < 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);
-          
-          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;
-            const marca = item.peca?.marca || 'N/A';
-            const temComponentes = item.peca?.tem_componentes;
-            const infoType = temComponentes ? '(C/M)' : '(S/M)';
-            const tickBoxes = generateTickBoxesHTML(quantidade);
-            
-            itemsContent += `
-              <div class="item-card ${temComponentes ? 'item-card-cm' : 'item-card-sm'}">
-                <div style="margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-                  <span style="font-size: 13px; font-weight: 700; color: #111827; vertical-align: middle; margin-right: 4px;">${marca} (${quantidade})</span>
-                  <span style="font-size: 11px; font-weight: 600; color: #6b7280; vertical-align: middle;">${infoType}</span>
-                  ${tickBoxes}
-                </div>
-                <div class="item-signature">
-                  Data/Operador:
-                </div>
-              </div>
-            `;
-          });
-          
-          // Preencher células vazias se necessário
-          for (let j = rowItems.length; j < 3; j++) {
-            itemsContent += `<div></div>`;
-          }
-          
-          itemsContent += `</div>`;
-        }
-        
-        itemsContent += `
-            </div>
-          </div>
-        `;
-      });
-
-      // HTML completo seguindo exatamente o modelo fornecido
-      const printContent = `
-        <!DOCTYPE html>
-        <html lang="pt-BR">
-        <head>
-            <meta charset="UTF-8">
-            <meta name="viewport" content="width=device-width, initial-scale=1.0">
-            <title>Checklist de Produção por Prioridade</title>
-            <script src="https://cdn.tailwindcss.com"></script>
-            <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-            <style>
-                body {
-                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-                    -webkit-print-color-adjust: exact;
-                    print-color-adjust: exact;
-                }
-                .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;
-                    }
-                    .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>
-        </head>
-        <body class="bg-white">
-            <div class="max-w-4xl mx-auto p-6 sm:p-8">
-                <!-- Cabeçalho do Relatório -->
-                <div class="flex justify-between items-center border-b-2 border-gray-800 pb-3 mb-4">
-                    <div>
-                        <h1 class="text-2xl font-bold text-gray-900 leading-tight">Checklist de Produção</h1>
-                        <p class="text-xs text-gray-600">Formulário para apontamento da fabricação.</p>
-                    </div>
-                    <div class="text-right">
-                        <p class="font-semibold text-sm">Data de Emissão: <span class="font-normal">${dataAtual}</span>
-                        <span class="ml-2 text-gray-500 font-medium">Rev. ${revisaoParaImprimir}</span>
-                        </p>
-                    </div>
-                </div>
-                
-                <!-- 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-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>
-                            <p class="text-base font-bold text-gray-800 leading-snug">${ofSelecionada}</p>
-                        </div>
-                        <!-- Coluna Fase -->
-                        <div>
-                            <p class="text-xs font-medium text-gray-500">Fase</p>
-                            <p class="text-base font-bold text-gray-800 leading-snug">${faseSelecionada}</p>
-                        </div>
-                        <!-- Coluna Processo -->
-                        <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;">
-                                <svg width="14" height="14" viewBox="0 0 14 14" style="display: inline-block; vertical-align: -2px; margin-right: 4px;">
-                                  <rect x="0.75" y="0.75" width="12.5" height="12.5" rx="1.5" fill="#ffffff" stroke="#4b5563" stroke-width="1.5" />
-                                </svg>
-                                <span style="font-size: 13px; font-weight: 600; color: #374151; vertical-align: middle;">Corte</span>
-                              </div>
-                              <div style="display: inline-block; vertical-align: middle; margin-right: 16px; white-space: nowrap;">
-                                <svg width="14" height="14" viewBox="0 0 14 14" style="display: inline-block; vertical-align: -2px; margin-right: 4px;">
-                                  <rect x="0.75" y="0.75" width="12.5" height="12.5" rx="1.5" fill="#ffffff" stroke="#4b5563" stroke-width="1.5" />
-                                </svg>
-                                <span style="font-size: 13px; font-weight: 600; color: #374151; vertical-align: middle;">Solda</span>
-                              </div>
-                              <div style="display: inline-block; vertical-align: middle; margin-right: 16px; white-space: nowrap;">
-                                <svg width="14" height="14" viewBox="0 0 14 14" style="display: inline-block; vertical-align: -2px; margin-right: 4px;">
-                                  <rect x="0.75" y="0.75" width="12.5" height="12.5" rx="1.5" fill="#ffffff" stroke="#4b5563" stroke-width="1.5" />
-                                </svg>
-                                <span style="font-size: 13px; font-weight: 600; color: #374151; vertical-align: middle;">Pintura</span>
-                              </div>
-                              <div style="display: inline-block; vertical-align: middle; margin-right: 16px; white-space: nowrap;">
-                                <svg width="14" height="14" viewBox="0 0 14 14" style="display: inline-block; vertical-align: -2px; margin-right: 4px;">
-                                  <rect x="0.75" y="0.75" width="12.5" height="12.5" rx="1.5" fill="#ffffff" stroke="#4b5563" stroke-width="1.5" />
-                                </svg>
-                                <span style="font-size: 13px; font-weight: 600; color: #374151; vertical-align: middle;">Expedição</span>
-                              </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Legenda -->
-                <div class="text-xs text-gray-600 mb-5 flex items-center flex-wrap">
-                    <span class="font-semibold" style="margin-right: 6px;">Legenda:</span>
-                    <span style="margin-right: 6px;">Marca (Qtd)</span>
-                    <span class="font-medium text-gray-500" style="margin-right: 4px;">(S/M)</span>
-                    <span style="margin-right: 6px;">= Sem Montagem (borda tracejada),</span>
-                    <span class="font-medium text-gray-500" style="margin-right: 4px;">(C/M)</span>
-                    <span style="margin-right: 4px;">= Com Montagem (borda contínua). Os quadrados</span>
-                    <svg width="13" height="13" viewBox="0 0 13 13" style="display: inline-block; vertical-align: -2px; margin: 0 4px;">
-                      <rect x="0.5" y="0.5" width="12" height="12" rx="1.5" fill="#ffffff" stroke="#4b5563" stroke-width="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>
-                
-                <div id="main-container" class="space-y-8">
-                    ${itemsContent}
-                </div>
-            </div>
-
-            <script>
-                window.onload = function() {
-                    setTimeout(() => {
-                        window.print();
-                        window.close();
-                    }, 800);
-                }
-            </script>
-        </body>
-        </html>
-      `;
-
-      printWindow.document.write(printContent);
-      printWindow.document.close();
-
+      setIsPrintingDirect(true);
+      await printProfessionalPDF('prioridades-direct-print-content');
       toast.success('Relatório enviado para impressão');
     } catch (error) {
       console.error('Erro ao imprimir:', error);
       toast.error('Erro ao imprimir o relatório');
+    } finally {
+      setIsPrintingDirect(false);
     }
   };
 
@@ -463,10 +150,19 @@ const PrioridadesFabricacao = () => {
               variant="outline"
               size="sm"
               onClick={handleImprimirRelatorio}
-              disabled={!ofSelecionada || !faseSelecionada}
+              disabled={!ofSelecionada || !faseSelecionada || isPrintingDirect}
             >
-              <Printer className="h-4 w-4 mr-2" />
-              Imprimir
+              {isPrintingDirect ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Imprimindo...
+                </>
+              ) : (
+                <>
+                  <Printer className="h-4 w-4 mr-2" />
+                  Imprimir
+                </>
+              )}
             </Button>
             <Button
               variant="outline"
@@ -535,6 +231,19 @@ const PrioridadesFabricacao = () => {
           versaoAtual={versaoAtual}
           onIncrementarRevisao={incrementarRevisao}
         />
+
+        {/* Container para impressão direta 100% idêntica ao PDF gerado */}
+        {ofSelecionada && faseSelecionada && (
+          <div style={{ position: 'fixed', left: '-9999px', top: 0, width: '850px', opacity: 0, pointerEvents: 'none', zIndex: -9999 }}>
+            <PrioridadesPDFTemplate
+              id="prioridades-direct-print-content"
+              itensPorPrioridade={itensPorPrioridade}
+              ofSelecionada={ofSelecionada}
+              faseSelecionada={faseSelecionada}
+              versaoAtual={versaoAtual}
+            />
+          </div>
+        )}
       </div>
     </StandardPageLayout>
   );