Fix Telegramas

Elecciones-Web/frontend/src/components/TelegramaWidget.tsx

@@ -1,16 +1,22 @@
 // src/components/TelegramaWidget.tsx
 import { useState, useEffect } from 'react';
-import { 
-    getSecciones, 
-    getMunicipiosPorSeccion, 
-    getCircuitosPorMunicipio,
-    getEstablecimientosPorCircuito,
-    getMesasPorEstablecimiento,
-    getTelegramaPorId 
+import {
+  getSecciones,
+  getMunicipiosPorSeccion,
+  getCircuitosPorMunicipio,
+  getEstablecimientosPorCircuito,
+  getMesasPorEstablecimiento,
+  getTelegramaPorId
 } from '../apiService';
 import type { TelegramaData, CatalogoItem } from '../types/types';
 import './TelegramaWidget.css';
 
+import { pdfjs, Document, Page } from 'react-pdf';
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import 'react-pdf/dist/Page/TextLayer.css';
+
+pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs';
+
 export const TelegramaWidget = () => {
   // Estados para los filtros geográficos
   const [secciones, setSecciones] = useState<CatalogoItem[]>([]);
@@ -25,7 +31,7 @@ export const TelegramaWidget = () => {
   const [selectedCircuito, setSelectedCircuito] = useState('');
   const [selectedEstablecimiento, setSelectedEstablecimiento] = useState('');
   const [selectedMesa, setSelectedMesa] = useState('');
-  
+
   // Estados para la visualización del telegrama
   const [telegrama, setTelegrama] = useState<TelegramaData | null>(null);
   const [loading, setLoading] = useState(false);
@@ -44,7 +50,7 @@ export const TelegramaWidget = () => {
       getMunicipiosPorSeccion(selectedSeccion).then(setMunicipios);
     }
   }, [selectedSeccion]);
-  
+
   // Y así sucesivamente para los demás filtros...
   useEffect(() => {
     if (selectedMunicipio) {
@@ -112,17 +118,17 @@ export const TelegramaWidget = () => {
       <div className="telegrama-viewer">
         {loading && <div className="spinner"></div>}
         {error && <p className="message error">{error}</p>}
-        
+
         {telegrama && (
           <div className="telegrama-content">
-            <div className="telegrama-image-wrapper">
-              <iframe
-                src={`data:application/pdf;base64,${telegrama.contenidoBase64}`}
-                title={`Telegrama de la mesa ${telegrama.id}`}
-                width="100%"
-                height="100%"
-                style={{ border: 'none' }}
-              />
+            <div className="telegrama-pdf-viewer">
+              <Document
+                file={`data:application/pdf;base64,${telegrama.contenidoBase64}`}
+                onLoadError={(error) => setError(`Error al cargar el PDF: ${error.message}`)}
+                loading={<div className="spinner"></div>}
+              >
+                <Page pageNumber={1} renderTextLayer={false} renderAnnotationLayer={false} />
+              </Document>
             </div>
           </div>
         )}