Fix Telegramas

This commit is contained in:
2025-08-25 15:04:09 -03:00
parent 0d33db9e6d
commit 55954e18a7
21 changed files with 498 additions and 76 deletions

View File

@@ -17,6 +17,7 @@
"d3-shape": "^3.2.0",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-pdf": "^10.1.0",
"react-simple-maps": "github:ozimmortal/react-simple-maps#feat/react-19-support",
"react-tooltip": "^5.29.1"
},
@@ -1070,6 +1071,191 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@napi-rs/canvas": {
"version": "0.1.77",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.77.tgz",
"integrity": "sha512-N9w2DkEKE1AXGp3q55GBOP6BEoFrqChDiFqJtKViTpQCWNOSVuMz7LkoGehbnpxtidppbsC36P0kCZNqJKs29w==",
"license": "MIT",
"optional": true,
"workspaces": [
"e2e/*"
],
"engines": {
"node": ">= 10"
},
"optionalDependencies": {
"@napi-rs/canvas-android-arm64": "0.1.77",
"@napi-rs/canvas-darwin-arm64": "0.1.77",
"@napi-rs/canvas-darwin-x64": "0.1.77",
"@napi-rs/canvas-linux-arm-gnueabihf": "0.1.77",
"@napi-rs/canvas-linux-arm64-gnu": "0.1.77",
"@napi-rs/canvas-linux-arm64-musl": "0.1.77",
"@napi-rs/canvas-linux-riscv64-gnu": "0.1.77",
"@napi-rs/canvas-linux-x64-gnu": "0.1.77",
"@napi-rs/canvas-linux-x64-musl": "0.1.77",
"@napi-rs/canvas-win32-x64-msvc": "0.1.77"
}
},
"node_modules/@napi-rs/canvas-android-arm64": {
"version": "0.1.77",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.77.tgz",
"integrity": "sha512-jC8YX0rbAnu9YrLK1A52KM2HX9EDjrJSCLVuBf9Dsov4IC6GgwMLS2pwL9GFLJnSZBFgdwnA84efBehHT9eshA==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@napi-rs/canvas-darwin-arm64": {
"version": "0.1.77",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.77.tgz",
"integrity": "sha512-VFaCaCgAV0+hPwXajDIiHaaGx4fVCuUVYp/CxCGXmTGz699ngIEBx3Sa2oDp0uk3X+6RCRLueb7vD44BKBiPIg==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@napi-rs/canvas-darwin-x64": {
"version": "0.1.77",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.77.tgz",
"integrity": "sha512-uD2NSkf6I4S3o0POJDwweK85FE4rfLNA2N714MgiEEMMw5AmupfSJGgpYzcyEXtPzdaca6rBfKcqNvzR1+EyLQ==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
"version": "0.1.77",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.77.tgz",
"integrity": "sha512-03GxMMZGhHRQxiA4gyoKT6iQSz8xnA6T9PAfg/WNJnbkVMFZG782DwUJUb39QIZ1uE1euMCPnDgWAJ092MmgJQ==",
"cpu": [
"arm"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@napi-rs/canvas-linux-arm64-gnu": {
"version": "0.1.77",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.77.tgz",
"integrity": "sha512-ZO+d2gRU9JU1Bb7SgJcJ1k9wtRMCpSWjJAJ+2phhu0Lw5As8jYXXXmLKmMTGs1bOya2dBMYDLzwp7KS/S/+aCA==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@napi-rs/canvas-linux-arm64-musl": {
"version": "0.1.77",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.77.tgz",
"integrity": "sha512-S1KtnP1+nWs2RApzNkdNf8X4trTLrHaY7FivV61ZRaL8NvuGOkSkKa+gWN2iedIGFEDz6gecpl/JAUSewwFXYg==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
"version": "0.1.77",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.77.tgz",
"integrity": "sha512-A4YIKFYUwDtrSzCtdCAO5DYmRqlhCVKHdpq0+dBGPnIEhOQDFkPBTfoTAjO3pjlEnorlfKmNMOH21sKQg2esGA==",
"cpu": [
"riscv64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@napi-rs/canvas-linux-x64-gnu": {
"version": "0.1.77",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.77.tgz",
"integrity": "sha512-Lt6Sef5l0+5O1cSZ8ysO0JI+x+rSrqZyXs5f7+kVkCAOVq8X5WTcDVbvWvEs2aRhrWTp5y25Jf2Bn+3IcNHOuQ==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@napi-rs/canvas-linux-x64-musl": {
"version": "0.1.77",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.77.tgz",
"integrity": "sha512-NiNFvC+D+omVeJ3IjYlIbyt/igONSABVe9z0ZZph29epHgZYu4eHwV9osfpRt1BGGOAM8LkFrHk4LBdn2EDymA==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@napi-rs/canvas-win32-x64-msvc": {
"version": "0.1.77",
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.77.tgz",
"integrity": "sha512-fP6l0hZiWykyjvpZTS3sI46iib8QEflbPakNoUijtwyxRuOPTTBfzAWZUz5z2vKpJJ/8r305wnZeZ8lhsBHY5A==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@nivo/annotations": {
"version": "0.99.0",
"resolved": "https://registry.npmjs.org/@nivo/annotations/-/annotations-0.99.0.tgz",
@@ -1844,7 +2030,7 @@
"version": "19.1.10",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.10.tgz",
"integrity": "sha512-EhBeSYX0Y6ye8pNebpKrwFJq7BoQ8J5SO6NlvNwwHjSj6adXJViPQrKlsyPw7hLBLvckEMO1yxeGdR82YBBlDg==",
"dev": true,
"devOptional": true,
"license": "MIT",
"dependencies": {
"csstype": "^3.0.2"
@@ -2372,6 +2558,15 @@
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
"license": "MIT"
},
"node_modules/clsx": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2437,7 +2632,7 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"dev": true,
"devOptional": true,
"license": "MIT"
},
"node_modules/d3-array": {
@@ -2686,6 +2881,15 @@
"node": ">=0.4.0"
}
},
"node_modules/dequal": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/dunder-proto": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -3531,7 +3735,6 @@
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"license": "MIT",
"peer": true,
"dependencies": {
"js-tokens": "^3.0.0 || ^4.0.0"
},
@@ -3549,6 +3752,24 @@
"yallist": "^3.0.2"
}
},
"node_modules/make-cancellable-promise": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-2.0.0.tgz",
"integrity": "sha512-3SEQqTpV9oqVsIWqAcmDuaNeo7yBO3tqPtqGRcKkEo0lrzD3wqbKG9mkxO65KoOgXqj+zH2phJ2LiAsdzlogSw==",
"license": "MIT",
"funding": {
"url": "https://github.com/wojtekmaj/make-cancellable-promise?sponsor=1"
}
},
"node_modules/make-event-props": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-2.0.0.tgz",
"integrity": "sha512-G/hncXrl4Qt7mauJEXSg3AcdYzmpkIITTNl5I+rH9sog5Yw0kK6vseJjCaPfOXqOqQuPUP89Rkhfz5kPS8ijtw==",
"license": "MIT",
"funding": {
"url": "https://github.com/wojtekmaj/make-event-props?sponsor=1"
}
},
"node_modules/math-intrinsics": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -3558,6 +3779,23 @@
"node": ">= 0.4"
}
},
"node_modules/merge-refs": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-2.0.0.tgz",
"integrity": "sha512-3+B21mYK2IqUWnd2EivABLT7ueDhb0b8/dGK8LoFQPrU61YITeCMn14F7y7qZafWNZhUEKb24cJdiT5Wxs3prg==",
"license": "MIT",
"funding": {
"url": "https://github.com/wojtekmaj/merge-refs?sponsor=1"
},
"peerDependencies": {
"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3749,6 +3987,18 @@
"node": ">=8"
}
},
"node_modules/pdfjs-dist": {
"version": "5.3.93",
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.3.93.tgz",
"integrity": "sha512-w3fQKVL1oGn8FRyx5JUG5tnbblggDqyx2XzA5brsJ5hSuS+I0NdnJANhmeWKLjotdbPQucLBug5t0MeWr0AAdg==",
"license": "Apache-2.0",
"engines": {
"node": ">=20.16.0 || >=22.3.0"
},
"optionalDependencies": {
"@napi-rs/canvas": "^0.1.71"
}
},
"node_modules/picocolors": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -3885,6 +4135,35 @@
"license": "MIT",
"peer": true
},
"node_modules/react-pdf": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-10.1.0.tgz",
"integrity": "sha512-iUI1YqWgwwZcsXjrehTp3Yi8nT/bvTaWULaRMMyJWvoqqSlopk4LQQ9GDqUnDtX3gzT2glrqrLbjIPl56a+Q3w==",
"license": "MIT",
"dependencies": {
"clsx": "^2.0.0",
"dequal": "^2.0.3",
"make-cancellable-promise": "^2.0.0",
"make-event-props": "^2.0.0",
"merge-refs": "^2.0.0",
"pdfjs-dist": "5.3.93",
"tiny-invariant": "^1.0.0",
"warning": "^4.0.0"
},
"funding": {
"url": "https://github.com/wojtekmaj/react-pdf?sponsor=1"
},
"peerDependencies": {
"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/react-refresh": {
"version": "0.17.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -4152,6 +4431,12 @@
"optional": true,
"peer": true
},
"node_modules/tiny-invariant": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
"integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
"license": "MIT"
},
"node_modules/tinyglobby": {
"version": "0.2.14",
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
@@ -4465,6 +4750,15 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/warning": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"license": "MIT",
"dependencies": {
"loose-envify": "^1.0.0"
}
},
"node_modules/which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

View File

@@ -19,6 +19,7 @@
"d3-shape": "^3.2.0",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-pdf": "^10.1.0",
"react-simple-maps": "github:ozimmortal/react-simple-maps#feat/react-19-support",
"react-tooltip": "^5.29.1"
},

File diff suppressed because one or more lines are too long

View File

@@ -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;

View File

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

View File

@@ -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;
}

View File

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