Fix Telegramas

Elecciones-Web/frontend/src/components/MapaBsAs.css

@@ -19,7 +19,7 @@
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
   padding: 1rem;
   border-radius: 8px;
-  max-width: 1600px;
+  max-width: 830px;
   margin: auto;
   height: 88vh;
   min-height: 650px;

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

@@ -51,7 +51,7 @@ const MAX_ZOOM = 8;
 // Esto evita que el mapa se "pierda" fuera de la vista.
 // Estos valores pueden necesitar ajuste fino según el tamaño final del contenedor del mapa.
 const TRANSLATE_EXTENT: [[number, number], [number, number]] = [[-100, -600], [1100, 300]];
-const INITIAL_POSITION = { center: [-60.5, -37.2] as PointTuple, zoom: MIN_ZOOM };
+const INITIAL_POSITION = { center: [-60, -37.25] as PointTuple, zoom: MIN_ZOOM };
 
 // --- Componente Principal ---
 const MapaBsAs = () => {
@@ -161,7 +161,7 @@ const MapaBsAs = () => {
     <div className="mapa-wrapper">
       <div className="mapa-container">
         {/* Se elimina el 'style' con el backgroundColor para que lo controle el CSS */}
-        <ComposableMap projection="geoMercator" projectionConfig={{ scale: 4400, center: [-60.5, -37.2] }} className="rsm-svg">
+        <ComposableMap projection="geoMercator" projectionConfig={{ scale: 6000, center: [-60, -37.25] }} className="rsm-svg">
           <ZoomableGroup
             center={position.center}
             zoom={position.zoom}

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

@@ -78,9 +78,10 @@
 }
 
 .telegrama-viewer {
-  min-height: 400px;
+  /* Se mantiene el min-height aquí para el estado inicial (antes de cargar el PDF) */
+  min-height: 400px; 
   display: flex;
-  align-items: center;
+  align-items: flex-start; /* Se cambia a flex-start para alinear el contenido arriba */
   justify-content: center;
   border-top: 1px solid #e9ecef;
   padding-top: 1.5rem;
@@ -101,22 +102,42 @@
   width: 100%;
 }
 
-.telegrama-image-wrapper { 
-  flex: 1 1 100%; /* Hacemos que ocupe todo el ancho disponible */
-  border: 1px solid #dee2e6; 
-  border-radius: 4px; 
-  /* overflow: auto; */
-  min-height: 600px; /* Le damos una altura mínima */
+.telegrama-pdf-viewer {
+  flex: 1 1 100%;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  background-color: #f8f9fa;
+  display: flex;
+  justify-content: center;
+
+  /* --- INICIO DE LA CORRECCIÓN CLAVE --- */
+  /* Se elimina min-height para que el contenedor se ajuste a la altura del PDF */
+  /* Se añade max-height para controlar PDFs muy largos y activar el scroll */
+  max-height: 80vh; 
+  /* --- FIN DE LA CORRECCIÓN CLAVE --- */
+  
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
-.telegrama-image-wrapper img {
+.telegrama-pdf-viewer .react-pdf__Page {
   width: 100%;
-  height: auto;
-  display: block;
+  max-width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.telegrama-pdf-viewer .react-pdf__Page__canvas {
+  max-width: 100%;
+  /* 
+    Se elimina max-height: 100% y se vuelve a height: auto !important
+    para asegurar que la proporción se base únicamente en el ancho.
+  */
+  height: auto !important;
 }
 
 .telegrama-metadata {
-  flex: 1 1 300px; /* Un ancho fijo si se pone al lado */
+  flex: 1 1 300px;
   min-width: 250px;
 }
 

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>
         )}