Feat Widgets 1540

Elecciones-Web/frontend/src/apiService.ts

@@ -65,6 +65,7 @@ export interface ResultadoDetalleSeccion {
   nombre: string;
   votos: number;
   porcentaje: number;
+  color: string | null;
 }
 
 export const getResumenProvincial = async (): Promise<CategoriaResumen[]> => {
@@ -141,4 +142,16 @@ export const getResultadosConcejales = async (seccionId: string): Promise<Result
 export const getDetalleSeccion = async (seccionId: string, categoriaId: number): Promise<ResultadoDetalleSeccion[]> => {
     const response = await apiClient.get(`/resultados/seccion/${seccionId}?categoriaId=${categoriaId}`);
     return response.data;
+};
+
+export const getResultadosConcejalesPorMunicipio = async (municipioId: string): Promise<ResultadoTicker[]> => {
+  // Usamos el endpoint 'partido' que, según la aclaración de la API, busca por municipio
+  const response = await apiClient.get(`/resultados/partido/${municipioId}`);
+  // La API devuelve un objeto, nosotros extraemos el array de resultados
+  return response.data.resultados;
+};
+
+export const getMunicipios = async (): Promise<MunicipioSimple[]> => {
+  const response = await apiClient.get('/catalogos/municipios');
+  return response.data;
 };

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

@@ -1,104 +1,119 @@
 // src/components/ConcejalesWidget.tsx
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { getSeccionesElectorales, getResultadosConcejales, getConfiguracionPublica } from '../apiService';
+import Select from 'react-select'; // <-- 1. Importar react-select
+import { getMunicipios, getResultadosConcejalesPorMunicipio, getConfiguracionPublica } from '../apiService';
 import type { MunicipioSimple, ResultadoTicker } from '../types/types';
 import { ImageWithFallback } from './ImageWithFallback';
-import './TickerWidget.css'; // Reutilizamos los estilos del ticker
+import './TickerWidget.css';
 
 const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
 
-export const ConcejalesWidget = () => {
-  const [secciones, setSecciones] = useState<MunicipioSimple[]>([]);
-  const [seccionActualId, setSeccionActualId] = useState<string>('');
+// Estilos personalizados para que el selector se vea bien
+const customSelectStyles = {
+  control: (base: any) => ({ ...base, minWidth: '220px', border: '1px solid #ced4da' }),
+  menu: (base: any) => ({ ...base, zIndex: 10 }), // Para que el menú se superponga
+};
+
+export const ConcejalesWidget = () => {
+  // 2. Cambiamos el estado para que se adapte a react-select
+  const [selectedMunicipio, setSelectedMunicipio] = useState<{ value: string; label: string } | null>(null);
 
-  // Query para la configuración (para saber cuántos resultados mostrar)
   const { data: configData } = useQuery({
     queryKey: ['configuracionPublica'],
     queryFn: getConfiguracionPublica,
     staleTime: 0,
   });
 
-  // Calculamos la cantidad a mostrar desde la configuración
-  const cantidadAMostrar = useMemo(() => {
-    return parseInt(configData?.TickerResultadosCantidad || '5', 10) + 1;
-  }, [configData]);
+  // Usamos la clave de configuración correcta
+  const cantidadAMostrar = parseInt(configData?.ConcejalesResultadosCantidad || '5', 10);
 
-  useEffect(() => {
-    getSeccionesElectorales().then(seccionesData => {
-      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);
-        // Al estar los datos ya ordenados, el [0] será "Sección Capital"
-        setSeccionActualId(seccionesData[0].id);
-      }
-    });
-  }, []); // El array de dependencias vacío asegura que esto solo se ejecute una vez
-
-  // Query para obtener los resultados de la sección seleccionada
-  const { data: resultados, isLoading } = useQuery<ResultadoTicker[]>({
-    queryKey: ['resultadosConcejales', seccionActualId],
-    queryFn: () => getResultadosConcejales(seccionActualId),
-    enabled: !!seccionActualId,
+  // 3. Query para obtener la lista de MUNICIPIOS
+  const { data: municipios = [], isLoading: isLoadingMunicipios } = useQuery<MunicipioSimple[]>({
+    queryKey: ['municipios'],
+    queryFn: getMunicipios,
   });
 
-  // --- INICIO DE LA LÓGICA DE PROCESAMIENTO "OTROS" ---
+  // Este useEffect se encarga de establecer el valor por defecto
+  useEffect(() => {
+    // Se ejecuta solo si tenemos la lista de municipios y aún no hemos seleccionado nada
+    if (municipios.length > 0 && !selectedMunicipio) {
+      // Buscamos "LA PLATA" en la lista (insensible a mayúsculas/minúsculas)
+      const laPlata = municipios.find(m => m.nombre.toUpperCase() === 'LA PLATA');
+
+      // Si lo encontramos, lo establecemos como el municipio seleccionado
+      if (laPlata) {
+        setSelectedMunicipio({ value: laPlata.id, label: laPlata.nombre });
+      }
+    }
+  }, [municipios, selectedMunicipio]); // Se ejecuta cuando 'municipios' o 'selectedMunicipio' cambian
+
+  // 4. Transformamos los datos para react-select
+  const municipioOptions = useMemo(() =>
+    municipios
+      .map(m => ({ value: m.id, label: m.nombre }))
+      .sort((a, b) => a.label.localeCompare(b.label)), // Orden alfabético
+    [municipios]);
+
+  // 5. Query para obtener los resultados del MUNICIPIO seleccionado
+  const { data: resultados, isLoading: isLoadingResultados } = useQuery<ResultadoTicker[]>({
+    queryKey: ['resultadosConcejalesPorMunicipio', selectedMunicipio?.value],
+    queryFn: () => getResultadosConcejalesPorMunicipio(selectedMunicipio!.value),
+    enabled: !!selectedMunicipio,
+  });
+
+  // 6. Lógica para "Otros" (sin cambios funcionales)
   let displayResults: ResultadoTicker[] = resultados || [];
   if (resultados && resultados.length > cantidadAMostrar) {
     const topParties = resultados.slice(0, cantidadAMostrar - 1);
     const otherParties = resultados.slice(cantidadAMostrar - 1);
-    const otrosPorcentaje = otherParties.reduce((sum, party) => sum + party.votosPorcentaje, 0);
-
+    const otrosPorcentaje = otherParties.reduce((sum, party) => sum + (party.porcentaje || 0), 0);
     const otrosEntry: ResultadoTicker = {
-      id: `otros-concejales-${seccionActualId}`,
+      id: `otros-concejales-${selectedMunicipio?.value}`,
       nombre: 'Otros',
       nombreCorto: 'Otros',
       color: '#888888',
       logoUrl: null,
-      votos: 0, // No es relevante para la visualización del porcentaje
-      votosPorcentaje: otrosPorcentaje,
+      votos: 0,
+      porcentaje: otrosPorcentaje,
     };
     displayResults = [...topParties, otrosEntry];
   } else if (resultados) {
     displayResults = resultados.slice(0, cantidadAMostrar);
   }
-  // --- FIN DE LA LÓGICA DE PROCESAMIENTO "OTROS" ---
 
   return (
     <div className="ticker-card" style={{ gridColumn: '1 / -1' }}>
       <div className="ticker-header">
-        <h3>CONCEJALES POR SECCIÓN ELECTORAL</h3>
-        <select value={seccionActualId} onChange={e => setSeccionActualId(e.target.value)} disabled={secciones.length === 0}>
-          {secciones.map(s => <option key={s.id} value={s.id}>{s.nombre}</option>)}
-        </select>
+        <h3>CONCEJALES POR MUNICIPIO</h3>
+        <Select
+          options={municipioOptions}
+          value={selectedMunicipio}
+          onChange={(option) => setSelectedMunicipio(option)}
+          isLoading={isLoadingMunicipios}
+          placeholder="Buscar y seleccionar un municipio..."
+          styles={customSelectStyles}
+        />
       </div>
       <div className="ticker-results">
-        {isLoading ? <p>Cargando...</p> :
-          displayResults.map(partido => (
-            <div key={partido.id} className="ticker-party">
-              <div className="party-logo">
-                <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} />
+        {(isLoadingMunicipios || (isLoadingResultados && selectedMunicipio)) && <p>Cargando...</p>}
+        {!selectedMunicipio && !isLoadingMunicipios && <p style={{textAlign: 'center', color: '#666'}}>Seleccione un municipio.</p>}
+        {displayResults.map(partido => (
+          <div key={partido.id} className="ticker-party">
+            <div className="party-logo">
+              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} />
+            </div>
+            <div className="party-details">
+              <div className="party-info">
+                <span className="party-name">{partido.nombreCorto || partido.nombre}</span>
+                <span className="party-percent">{formatPercent(partido.porcentaje)}</span>
               </div>
-              <div className="party-details">
-                <div className="party-info">
-                  <span className="party-name">{partido.nombreCorto || partido.nombre}</span>
-                  <span className="party-percent">{formatPercent(partido.votosPorcentaje)}</span>
-                </div>
-                <div className="party-bar-background">
-                  <div className="party-bar-foreground" style={{ width: `${partido.votosPorcentaje}%`, backgroundColor: partido.color || '#888' }}></div>
-                </div>
+              <div className="party-bar-background">
+                <div className="party-bar-foreground" style={{ width: `${partido.porcentaje}%`, backgroundColor: partido.color || '#888' }}></div>
               </div>
             </div>
-          ))
-        }
+          </div>
+        ))}
       </div>
     </div>
   );

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

@@ -23,7 +23,7 @@ interface ResultadoDetalladoMunicipio {
   ultimaActualizacion: string;
   porcentajeEscrutado: number;
   porcentajeParticipacion: number;
-  resultados: { id: string; nombre: string; votos: number; porcentaje: number }[];
+  resultados: { id: string; nombre: string; votos: number; porcentaje: number; color: string | null; }[];
   votosAdicionales: { enBlanco: number; nulos: number; recurridos: number };
 }
 
@@ -83,21 +83,21 @@ const MapaBsAs = () => {
     nombresAgrupaciones: Map<string, string>;
     resultadosPorDepartamento: Map<string, ResultadoMapa>;
   }>(() => {
-      const nombresMap = new Map<string, string>();
-      const resultadosMap = new Map<string, ResultadoMapa>();
-      if (agrupacionesData) {
-          agrupacionesData.forEach((agrupacion) => {
-              nombresMap.set(agrupacion.id, agrupacion.nombre);
-          });
-      }
-      if (resultadosData) {
-          resultadosData.forEach(r => {
-            if (r.departamentoNombre) {
-              resultadosMap.set(r.departamentoNombre.toUpperCase(), r)
-            }
-          });
-      }
-      return { nombresAgrupaciones: nombresMap, resultadosPorDepartamento: resultadosMap };
+    const nombresMap = new Map<string, string>();
+    const resultadosMap = new Map<string, ResultadoMapa>();
+    if (agrupacionesData) {
+      agrupacionesData.forEach((agrupacion) => {
+        nombresMap.set(agrupacion.id, agrupacion.nombre);
+      });
+    }
+    if (resultadosData) {
+      resultadosData.forEach(r => {
+        if (r.departamentoNombre) {
+          resultadosMap.set(r.departamentoNombre.toUpperCase(), r)
+        }
+      });
+    }
+    return { nombresAgrupaciones: nombresMap, resultadosPorDepartamento: resultadosMap };
   }, [agrupacionesData, resultadosData]);
 
   const isLoading = isLoadingResultados || isLoadingAgrupaciones || isLoadingGeo;
@@ -208,9 +208,9 @@ const MapaBsAs = () => {
                   {({ geographies }: { geographies: PartidoGeography[] }) => {
                     const selectedGeo = selectedAmbitoId
                       ? geographies.find(geo => {
-                          const resultado = resultadosPorDepartamento.get(geo.properties.departamento.toUpperCase());
-                          return resultado?.ambitoId === selectedAmbitoId;
-                        })
+                        const resultado = resultadosPorDepartamento.get(geo.properties.departamento.toUpperCase());
+                        return resultado?.ambitoId === selectedAmbitoId;
+                      })
                       : null;
 
                     return (
@@ -275,18 +275,24 @@ const DetalleMunicipio = ({ ambitoId, onReset, categoriaId }: { ambitoId: number
       <button className="reset-button-panel" onClick={onReset}>← VOLVER</button>
       <h3>{data?.municipioNombre}</h3>
       <div className="detalle-metricas">
-        <span><strong>Escrutado:</strong> {data?.porcentajeEscrutado.toFixed(2)}%</span>
-        <span><strong>Participación:</strong> {data?.porcentajeParticipacion.toFixed(2)}%</span>
+        <span><strong>Escrutado:</strong> {(data?.porcentajeEscrutado ?? 0).toFixed(2)}%</span>
+        <span><strong>Participación:</strong> {(data?.porcentajeParticipacion ?? 0).toFixed(2)}%</span>
       </div>
       <ul className="resultados-lista">
-        {data?.resultados.map((r, index) => (
+        {(data?.resultados ?? []).map((r, index) => (
           <li key={`${r.nombre}-${index}`}>
             <div className="resultado-info">
               <span className="partido-nombre">{r.nombre}</span>
               <span className="partido-votos">{r.votos.toLocaleString('es-AR')} ({r.porcentaje.toFixed(2)}%)</span>
             </div>
             <div className="progress-bar">
-              <div className="progress-fill" style={{ width: `${r.porcentaje}%` }}></div>
+              <div
+                className="progress-fill"
+                style={{
+                  width: `${r.porcentaje}%`,
+                  backgroundColor: r.color || DEFAULT_MAP_COLOR
+                }}
+              ></div>
             </div>
           </li>
         ))}
@@ -296,33 +302,33 @@ const DetalleMunicipio = ({ ambitoId, onReset, categoriaId }: { ambitoId: number
 };
 
 const Legend = ({ resultados, nombresAgrupaciones }: { resultados: Map<string, ResultadoMapa>, nombresAgrupaciones: Map<string, string> }) => {
-    
-    const legendItems = useMemo(() => {
-        const ganadoresUnicos = new Map<string, { nombre: string; color: string }>();
 
-        resultados.forEach(resultado => {
-            if (resultado.colorGanador && !ganadoresUnicos.has(resultado.agrupacionGanadoraId)) {
-                ganadoresUnicos.set(resultado.agrupacionGanadoraId, {
-                    nombre: nombresAgrupaciones.get(resultado.agrupacionGanadoraId) || 'Desconocido',
-                    color: resultado.colorGanador
-                });
-            }
+  const legendItems = useMemo(() => {
+    const ganadoresUnicos = new Map<string, { nombre: string; color: string }>();
+
+    resultados.forEach(resultado => {
+      if (resultado.colorGanador && !ganadoresUnicos.has(resultado.agrupacionGanadoraId)) {
+        ganadoresUnicos.set(resultado.agrupacionGanadoraId, {
+          nombre: nombresAgrupaciones.get(resultado.agrupacionGanadoraId) || 'Desconocido',
+          color: resultado.colorGanador
         });
+      }
+    });
 
-        return Array.from(ganadoresUnicos.values());
-    }, [resultados, nombresAgrupaciones]);
+    return Array.from(ganadoresUnicos.values());
+  }, [resultados, nombresAgrupaciones]);
 
-    return (
-        <div className="legend">
-            <h4>Leyenda de Ganadores</h4>
-            {legendItems.map(item => (
-                <div key={item.nombre} className="legend-item">
-                    <div className="legend-color-box" style={{ backgroundColor: item.color }} />
-                    <span>{item.nombre}</span>
-                </div>
-            ))}
+  return (
+    <div className="legend">
+      <h4>Leyenda de Ganadores</h4>
+      {legendItems.map(item => (
+        <div key={item.nombre} className="legend-item">
+          <div className="legend-color-box" style={{ backgroundColor: item.color }} />
+          <span>{item.nombre}</span>
         </div>
-    );
+      ))}
+    </div>
+  );
 };
 
 export default MapaBsAs;

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

@@ -22,7 +22,7 @@ export const TickerWidget = () => {
   });
 
   const cantidadAMostrar = useMemo(() => {
-    return parseInt(configData?.TickerResultadosCantidad || '5', 10) + 1;
+    return parseInt(configData?.TickerResultadosCantidad || '5', 10);
   }, [configData]);
 
   if (isLoading) return <div className="ticker-wrapper loading">Cargando resumen...</div>;
@@ -39,7 +39,7 @@ export const TickerWidget = () => {
         if (categoria.resultados.length > cantidadAMostrar) {
           const topParties = categoria.resultados.slice(0, cantidadAMostrar - 1);
           const otherParties = categoria.resultados.slice(cantidadAMostrar - 1);
-          const otrosPorcentaje = otherParties.reduce((sum, party) => sum + party.votosPorcentaje, 0);
+          const otrosPorcentaje = otherParties.reduce((sum, party) => sum + party.porcentaje, 0);
 
           const otrosEntry: ResultadoTicker = {
             id: `otros-${categoria.categoriaId}`,
@@ -48,7 +48,7 @@ export const TickerWidget = () => {
             color: '#888888',
             logoUrl: null,
             votos: 0,
-            votosPorcentaje: otrosPorcentaje,
+            porcentaje: otrosPorcentaje,
           };
 
           displayResults = [...topParties, otrosEntry];
@@ -78,10 +78,10 @@ export const TickerWidget = () => {
                   <div className="party-details">
                     <div className="party-info">
                       <span className="party-name">{partido.nombreCorto || partido.nombre}</span>
-                      <span className="party-percent">{formatPercent(partido.votosPorcentaje)}</span>
+                      <span className="party-percent">{formatPercent(partido.porcentaje)}</span>
                     </div>
                     <div className="party-bar-background">
-                      <div className="party-bar-foreground" style={{ width: `${partido.votosPorcentaje}%`, backgroundColor: partido.color || '#888' }}></div>
+                      <div className="party-bar-foreground" style={{ width: `${partido.porcentaje}%`, backgroundColor: partido.color || '#888' }}></div>
                     </div>
                   </div>
                 </div>

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

@@ -48,7 +48,7 @@ export interface ResultadoTicker {
   color: string | null;
   logoUrl: string | null;
   votos: number;
-  votosPorcentaje: number;
+  porcentaje: number;
 }
 
 export interface EstadoRecuentoTicker {