diff --git a/Elecciones-Web/frontend/src/apiService.ts b/Elecciones-Web/frontend/src/apiService.ts index 587c7a5..fe9251d 100644 --- a/Elecciones-Web/frontend/src/apiService.ts +++ b/Elecciones-Web/frontend/src/apiService.ts @@ -5,7 +5,8 @@ import type { ApiResponseTablaDetallada, ProyeccionBancas, MunicipioSimple, TelegramaData, CatalogoItem, CategoriaResumen, ResultadoTicker, ApiResponseResultadosPorSeccion, PanelElectoralDto, ResumenProvincia, - CategoriaResumenHome, ResultadoFila, ResultadoSeccion + CategoriaResumenHome, ResultadoFila, ResultadoSeccion, + ProvinciaResumen } from './types/types'; /** @@ -347,4 +348,9 @@ export const getTablaConurbano = async (eleccionId: number): Promise => { const { data } = await apiClient.get(`/elecciones/${eleccionId}/tabla-secciones`); return data; +}; + +export const getResumenNacionalPorProvincia = async (eleccionId: number, categoriaId: number): Promise => { + const response = await apiClient.get(`/elecciones/${eleccionId}/resumen-nacional-por-provincia?categoriaId=${categoriaId}`); + return response.data; }; \ No newline at end of file diff --git a/Elecciones-Web/frontend/src/features/legislativas/DevAppLegislativas.tsx b/Elecciones-Web/frontend/src/features/legislativas/DevAppLegislativas.tsx index 82e3c4f..afc2df4 100644 --- a/Elecciones-Web/frontend/src/features/legislativas/DevAppLegislativas.tsx +++ b/Elecciones-Web/frontend/src/features/legislativas/DevAppLegislativas.tsx @@ -8,6 +8,7 @@ import './DevAppStyle.css' import { HomeCarouselNacionalWidget } from './nacionales/HomeCarouselNacionalWidget'; import { TablaConurbanoWidget } from './nacionales/TablaConurbanoWidget'; import { TablaSeccionesWidget } from './nacionales/TablaSeccionesWidget'; +import { ResumenNacionalWidget } from './nacionales/ResumenNacionalWidget'; // --- NUEVO COMPONENTE REUTILIZABLE PARA CONTENIDO COLAPSABLE --- const CollapsibleWidgetWrapper = ({ children }: { children: React.ReactNode }) => { @@ -174,6 +175,11 @@ export const DevAppLegislativas = () => {

Widget: Tabla de Resultados por Sección Electoral

+ +
+

Resumen Nacional de Resultados por Provincia

+ +
); diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/ResumenNacionalWidget.module.css b/Elecciones-Web/frontend/src/features/legislativas/nacionales/ResumenNacionalWidget.module.css new file mode 100644 index 0000000..624bc92 --- /dev/null +++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/ResumenNacionalWidget.module.css @@ -0,0 +1,81 @@ +/* src/components/widgets/ResumenNacionalWidget.module.css */ +.widgetContainer { + font-family: sans-serif; + border: 1px solid #ccc; + border-radius: 8px; + padding: 1.5rem; + max-width: 1000px; + margin: 2rem auto; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: 1rem; + margin-bottom: 1rem; + border-bottom: 1px solid #eee; +} + +.header h3 { + margin: 0; + font-size: 1.5rem; +} + +.categoriaSelector { + min-width: 280px; +} + +.listaProvincias { + list-style: none; + padding: 0; + margin: 0; +} + +.provinciaItem { + padding: 1rem 0; + border-bottom: 1px solid #eee; +} + +.provinciaItem:last-child { + border-bottom: none; +} + +.provinciaHeader { + display: flex; + justify-content: space-between; + align-items: baseline; + margin-bottom: 0.5rem; +} + +.provinciaNombre { + font-weight: bold; + font-size: 1.1rem; + text-transform: uppercase; +} + +.provinciaEscrutado { + font-size: 0.8rem; + color: #555; + font-weight: 500; +} + +.resultadosLista { + list-style: none; + padding: 0; + margin: 0; +} + +.resultadoItem { + display: flex; + justify-content: space-between; + padding: 0.25rem 0; +} + +.partidoNombre { + color: #333; +} + +.partidoPorcentaje { + font-weight: bold; +} \ No newline at end of file diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/ResumenNacionalWidget.tsx b/Elecciones-Web/frontend/src/features/legislativas/nacionales/ResumenNacionalWidget.tsx new file mode 100644 index 0000000..320808d --- /dev/null +++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/ResumenNacionalWidget.tsx @@ -0,0 +1,61 @@ +// src/components/widgets/ResumenNacionalWidget.tsx +import { useState } from 'react'; +import { useQuery } from '@tanstack/react-query'; +import Select from 'react-select'; +import { getResumenNacionalPorProvincia } from '../../../apiService'; +import styles from './ResumenNacionalWidget.module.css'; + +const ELECCION_ID = 2; // Exclusivo para elecciones nacionales +const CATEGORIAS_NACIONALES = [ + { value: 3, label: 'Diputados Nacionales' }, + { value: 2, label: 'Senadores Nacionales' }, +]; + +export const ResumenNacionalWidget = () => { + const [categoria, setCategoria] = useState(CATEGORIAS_NACIONALES[0]); + + const { data, isLoading, error } = useQuery({ + queryKey: ['resumenNacional', ELECCION_ID, categoria.value], + queryFn: () => getResumenNacionalPorProvincia(ELECCION_ID, categoria.value), + refetchInterval: 60000, + }); + + const formatPercent = (num: number) => `${num.toFixed(2)}%`; + + return ( +
+
+

{categoria.label}

+