Feat Widget Tabla de Resultados Por Seccion

Elecciones-Web/frontend/src/App.tsx

@@ -16,6 +16,7 @@ import { ConcejalesTickerWidget } from './components/ConcejalesTickerWidget'
 import { DiputadosPorSeccionWidget } from './components/DiputadosPorSeccionWidget'
 import { SenadoresPorSeccionWidget } from './components/SenadoresPorSeccionWidget'
 import { ConcejalesPorSeccionWidget } from './components/ConcejalesPorSeccionWidget'
+import { ResultadosTablaDetalladaWidget } from './components/ResultadosTablaDetalladaWidget'
 
 function App() {
   return (
@@ -53,6 +54,8 @@ function App() {
         <MapaBsAsSecciones />
         <hr className="border-gray-300" />
         <TelegramaWidget />
+        <hr className="border-gray-300" />
+        <ResultadosTablaDetalladaWidget />
       </main>
     </>
   )

Elecciones-Web/frontend/src/apiService.ts

@@ -1,6 +1,6 @@
 // src/apiService.ts
 import axios from 'axios';
-import type { ProyeccionBancas, MunicipioSimple, TelegramaData, CatalogoItem, CategoriaResumen, ResultadoTicker, ApiResponseResultadosPorSeccion } from './types/types';
+import type { ApiResponseRankingSeccion, ApiResponseTablaDetallada, ProyeccionBancas, MunicipioSimple, TelegramaData, CatalogoItem, CategoriaResumen, ResultadoTicker, ApiResponseResultadosPorSeccion } from './types/types';
 
 /**
  * URL base para las llamadas a la API.
@@ -190,4 +190,14 @@ export const getSeccionesElectoralesConCargos = async (): Promise<MunicipioSimpl
   // Hacemos la petición al nuevo endpoint del backend
   const { data } = await apiClient.get<MunicipioSimple[]>('/resultados/secciones-electorales-con-cargos');
   return data;
+};
+
+export const getResultadosTablaDetallada = async (seccionId: string): Promise<ApiResponseTablaDetallada> => {
+  const { data } = await apiClient.get(`/resultados/tabla-ranking-seccion/${seccionId}`);
+  return data;
+};
+
+export const getRankingResultadosPorSeccion = async (seccionId: string): Promise<ApiResponseRankingSeccion> => {
+  const { data } = await apiClient.get(`/resultados/ranking-por-seccion/${seccionId}`);
+  return data;
 };

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

@@ -15,8 +15,10 @@ import { ConcejalesTickerWidget } from './ConcejalesTickerWidget'
 import { DiputadosPorSeccionWidget } from './DiputadosPorSeccionWidget'
 import { SenadoresPorSeccionWidget } from './SenadoresPorSeccionWidget'
 import { ConcejalesPorSeccionWidget } from './ConcejalesPorSeccionWidget'
+import { ResultadosTablaDetalladaWidget } from './ResultadosTablaDetalladaWidget'
 import '../App.css';
 
+
 export const DevApp = () => {
   return (
     <>
@@ -39,7 +41,8 @@ export const DevApp = () => {
         <BancasWidget />
         <MapaBsAs />
         <MapaBsAsSecciones />
-        <TelegramaWidget />        
+        <TelegramaWidget />
+        <ResultadosTablaDetalladaWidget />     
       </main>
     </>
   );

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

@@ -0,0 +1,108 @@
+import { useState, useMemo, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import Select from 'react-select';
+import { getSeccionesElectorales, getResultadosTablaDetallada } from '../apiService';
+import type { MunicipioSimple, ApiResponseTablaDetallada } from '../types/types';
+import './ResultadosTablaSeccionWidget.css';
+
+const customSelectStyles = {
+  control: (base: any) => ({ ...base, minWidth: '200px', border: '1px solid #ced4da', boxShadow: 'none', '&:hover': { borderColor: '#86b7fe' } }),
+  menu: (base: any) => ({ ...base, zIndex: 10 }),
+};
+
+const formatPercent = (porcentaje: number) => `${porcentaje.toFixed(2).replace('.', ',')}%`;
+
+export const ResultadosTablaDetalladaWidget = () => {
+  const [secciones, setSecciones] = useState<MunicipioSimple[]>([]);
+  const [selectedSeccion, setSelectedSeccion] = useState<{ value: string; label: string } | null>(null);
+
+  useEffect(() => {
+    const fetchSecciones = async () => {
+      const seccionesData = await getSeccionesElectorales();
+      if (seccionesData && seccionesData.length > 0) {
+        const orden = new Map([
+          ['Capital', 0], ['Primera', 1], ['Segunda', 2], ['Tercera', 3],
+          ['Cuarta', 4], ['Quinta', 5], ['Sexta', 6], ['Séptima', 7]
+        ]);
+        const getOrden = (nombre: string) => {
+          const match = nombre.match(/Capital|Primera|Segunda|Tercera|Cuarta|Quinta|Sexta|Séptima/);
+          return match ? orden.get(match[0]) ?? 99 : 99;
+        };
+        seccionesData.sort((a, b) => getOrden(a.nombre) - getOrden(b.nombre));
+        setSecciones(seccionesData);
+        if (!selectedSeccion) {
+          setSelectedSeccion({ value: seccionesData[0].id, label: seccionesData[0].nombre });
+        }
+      }
+    };
+    fetchSecciones();
+  }, [selectedSeccion]);
+
+  const seccionOptions = useMemo(() => secciones.map(s => ({ value: s.id, label: s.nombre })), [secciones]);
+
+  const { data: tablaData, isLoading } = useQuery<ApiResponseTablaDetallada>({
+    queryKey: ['resultadosTablaDetallada', selectedSeccion?.value],
+    queryFn: () => getResultadosTablaDetallada(selectedSeccion!.value),
+    enabled: !!selectedSeccion,
+  });
+
+  return (
+    <div className="tabla-resultados-widget">
+      <div className="tabla-header">
+        <h3>Resultados por Sección Electoral</h3>
+        <Select
+          options={seccionOptions}
+          value={selectedSeccion}
+          onChange={(option) => setSelectedSeccion(option)}
+          isLoading={secciones.length === 0}
+          styles={customSelectStyles}
+          isSearchable={false}
+        />
+      </div>
+
+      <div className="tabla-container">
+        {isLoading ? <p>Cargando...</p> : !tablaData || tablaData.categorias.length === 0 ? <p>No hay datos disponibles.</p> : (
+          <table>
+            <thead>
+              <tr>
+                <th rowSpan={2} className="sticky-col municipio-header">Municipio</th>
+                {tablaData.categorias.map(cat => (
+                  <th key={cat.id} colSpan={tablaData.partidosPorCategoria[cat.id]?.length || 1} className="categoria-header">
+                    {cat.nombre}
+                  </th>
+                ))}
+              </tr>
+              <tr>
+                {tablaData.categorias.flatMap(cat =>
+                  (tablaData.partidosPorCategoria[cat.id] || []).map(partido => (
+                    <th key={`header-${cat.id}-${partido.id}`} className="partido-header">
+                      <span>{partido.puesto}° {partido.nombre}</span>
+                      <span className="porcentaje-total">{formatPercent(partido.porcentajeTotalSeccion)}</span>
+                    </th>
+                  ))
+                )}
+              </tr>
+            </thead>
+            <tbody>
+              {tablaData.resultadosPorMunicipio.map(municipio => (
+                <tr key={municipio.municipioId}>
+                  <td className="sticky-col">{municipio.municipioNombre}</td>
+                  {tablaData.categorias.flatMap(cat =>
+                    (tablaData.partidosPorCategoria[cat.id] || []).map(partido => {
+                      const porcentaje = municipio.celdas[cat.id]?.[partido.id];
+                      return (
+                        <td key={`${municipio.municipioId}-${cat.id}-${partido.id}`}>
+                          {typeof porcentaje === 'number' ? formatPercent(porcentaje) : '-'}
+                        </td>
+                      );
+                    })
+                  )}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,145 @@
+/* ==========================================================================
+   ResultadosTablaSeccionWidget.css
+   ========================================================================== */
+
+.tabla-resultados-widget {
+    font-family: 'Roboto', sans-serif;
+    background-color: #ffffff;
+    border-radius: 8px;
+    padding: 16px 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+    border: 1px solid #e9ecef;
+    color: #333;
+    max-width: 100%;
+    margin: auto;
+}
+
+.tabla-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #dee2e6;
+}
+
+.tabla-header h3 {
+    margin: 0;
+    font-size: 1.25rem;
+    color: #212529;
+}
+
+.tabla-container {
+    width: 100%;
+    overflow-x: auto;
+    border: 1px solid #dee2e6;
+    border-radius: 6px;
+}
+
+.tabla-container table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.9rem;
+}
+
+/* --- Cabeceras (THEAD) --- */
+.tabla-container thead th {
+    background-color: #f8f9fa;
+    font-weight: 600;
+    color: #495057;
+    padding: 12px 10px;
+    text-align: center; /* Centramos las cabeceras */
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+    border-bottom: 2px solid #adb5bd; /* Línea inferior más gruesa */
+    vertical-align: middle;
+}
+
+.tabla-container th.municipio-header {
+    vertical-align: middle;
+}
+
+.tabla-container th.categoria-header {
+    border-bottom: 1px solid #dee2e6;
+}
+
+.tabla-container th.partido-header {
+    font-weight: 500;
+    font-size: 0.8rem;
+    text-transform: none;
+    white-space: normal;
+    line-height: 1.2;
+}
+
+.tabla-container th.partido-header span {
+    display: block;
+}
+
+.tabla-container th.partido-header .porcentaje-total {
+    font-weight: 700;
+    font-size: 0.9rem;
+    color: #212529;
+}
+
+/* Línea divisoria vertical para las categorías */
+.tabla-container thead th[colspan] {
+    border-right: 1px solid #ced4da;
+}
+.tabla-container thead th:last-child {
+    border-right: none;
+}
+
+/* --- Cuerpo de la Tabla (TBODY) --- */
+.tabla-container tbody td {
+    padding: 10px 12px;
+    border-bottom: 1px solid #e9ecef;
+    white-space: nowrap;
+}
+
+.tabla-container tbody tr:last-child td {
+    border-bottom: none; /* Quita la línea de la última fila */
+}
+
+.tabla-container tbody tr:nth-of-type(even) {
+    background-color: #f8f9fa;
+}
+
+.tabla-container tbody tr:hover {
+    background-color: #e9ecef;
+}
+
+/* Primera columna (Municipios) */
+.tabla-container td:first-child {
+    font-weight: 500;
+    color: #212529;
+    text-align: left;
+}
+
+/* Columnas de porcentajes */
+.tabla-container td:not(:first-child) {
+    text-align: left; /* Opcional: puedes poner 'center' si prefieres */
+    font-size: 0.85rem; /* Un poco más pequeño para que entre bien */
+}
+
+/* Línea divisoria vertical para las celdas de datos */
+.tabla-container tbody td.category-divider {
+    border-right: 1px solid #ced4da;
+}
+
+/* Estilos para la columna fija (Sticky) */
+.tabla-container th.sticky-col,
+.tabla-container td.sticky-col {
+    position: sticky;
+    left: 0;
+    background-color: #ffffff; /* Fondo blanco para que tape el contenido */
+    z-index: 1;
+}
+.tabla-container thead th.sticky-col {
+    background-color: #f8f9fa; /* Mismo color que el resto de la cabecera */
+    z-index: 2;
+}
+.tabla-container tbody tr:nth-of-type(even) td.sticky-col {
+    background-color: #f8f9fa; /* Para que coincida con el fondo de la fila */
+}

Elecciones-Web/frontend/src/main.tsx

@@ -19,9 +19,10 @@ import { ConcejalesTickerWidget } from './components/ConcejalesTickerWidget'
 import { DiputadosPorSeccionWidget } from './components/DiputadosPorSeccionWidget'
 import { SenadoresPorSeccionWidget } from './components/SenadoresPorSeccionWidget'
 import { ConcejalesPorSeccionWidget } from './components/ConcejalesPorSeccionWidget'
-
-import './index.css';
+import { ResultadosTablaDetalladaWidget } from './components/ResultadosTablaDetalladaWidget';
 import { DevApp } from './components/DevApp';
+import './index.css';
+
 
 const queryClient = new QueryClient();
 
@@ -43,6 +44,7 @@ const WIDGET_MAP: Record<string, React.ElementType> = {
     'diputados-por-seccion': DiputadosPorSeccionWidget,
     'senadores-por-seccion': SenadoresPorSeccionWidget,
     'concejales-por-seccion': ConcejalesPorSeccionWidget,
+    'resultados-tabla-detallada-por-seccion' : ResultadosTablaDetalladaWidget,
 };
 
 // Vite establece `import.meta.env.DEV` a `true` cuando ejecutamos 'npm run dev'

Elecciones-Web/frontend/src/types/types.ts

@@ -110,4 +110,97 @@ export interface CatalogoItem {
 export interface ApiResponseResultadosPorSeccion {
     ultimaActualizacion: string;
     resultados: ResultadoTicker[];
+}
+
+export interface ResultadoTablaAgrupacion {
+  id: string;
+  nombre: string;
+  nombreCorto: string | null;
+  porcentaje: number;
+}
+
+export interface ResultadoTablaCategoria {
+  categoriaId: number;
+  categoriaNombre: string;
+  resultados: ResultadoTablaAgrupacion[];
+}
+
+export interface TablaDetalladaPartidoPrincipal {
+  id: string;
+  nombre: string;
+}
+
+export interface TablaDetalladaResultadoPartido {
+  id: string;
+  porcentaje: number;
+}
+
+export interface TablaDetalladaResultadoCategoria {
+  categoriaId: number;
+  partidos: TablaDetalladaResultadoPartido[];
+}
+
+export interface TablaDetalladaResultadoMunicipio {
+  municipioId: number;
+  municipioNombre: string;
+  resultadosPorCategoria: TablaDetalladaResultadoCategoria[];
+}
+
+export interface PartidoPrincipalDetalle {
+  puesto: number;
+  id: string;
+  nombre: string;
+  porcentajeTotalSeccion: number;
+}
+
+export interface ApiResponseTablaDetallada {
+  categorias: { id: number; nombre: string }[];
+  partidosPorCategoria: { [catId: string]: PartidoPrincipalDetalle[] };
+  resultadosPorMunicipio: {
+    municipioId: number;
+    municipioNombre: string;
+    celdas: { [catId: string]: { [partidoId: string]: number } };
+  }[];
+}
+
+export interface TablaDetalladaPartidoPrincipal {
+  id: string;
+  nombre: string;
+}
+
+export interface TablaDetalladaResultadoPartido {
+  id: string;
+  porcentaje: number;
+}
+
+export interface TablaDetalladaResultadoCategoria {
+  categoriaId: number;
+  partidos: TablaDetalladaResultadoPartido[];
+}
+
+export interface TablaDetalladaResultadoMunicipio {
+  municipioId: number;
+  municipioNombre: string;
+  resultadosPorCategoria: TablaDetalladaResultadoCategoria[];
+}
+
+export interface RankingPartido {
+  nombreCorto: string;
+  porcentaje: number;
+}
+
+export interface RankingCategoria {
+  categoriaId: number;
+  ranking: RankingPartido[];
+}
+
+export interface RankingMunicipio {
+  municipioId: number;
+  municipioNombre: string;
+  resultadosPorCategoria: RankingCategoria[];
+}
+
+export interface ApiResponseRankingSeccion {
+  categorias: { id: number; nombre: string }[];
+  resultados: RankingMunicipio[];
 }