Feat Widgets

Elecciones-Web/frontend/src/App.tsx

@@ -5,6 +5,7 @@ import { CongresoWidget } from './components/CongresoWidget'
 import MapaBsAs from './components/MapaBsAs'
 import { TickerWidget } from './components/TickerWidget'
 import { TelegramaWidget } from './components/TelegramaWidget'
+import { ConcejalesWidget } from './components/ConcejalesWidget'
 
 function App() {
   return (
@@ -12,6 +13,7 @@ function App() {
       <h1>Resultados Electorales - Provincia de Buenos Aires</h1>
       <main>
         <TickerWidget />
+        <ConcejalesWidget />
         <CongresoWidget />
         <BancasWidget />
         <MapaBsAs />

Elecciones-Web/frontend/src/apiService.ts

@@ -1,6 +1,13 @@
 // src/apiService.ts
 import axios from 'axios';
-import type { ResumenProvincial, ProyeccionBancas, MunicipioSimple, TelegramaData, CatalogoItem } from './types/types';
+import type { ProyeccionBancas, MunicipioSimple, TelegramaData, CatalogoItem, CategoriaResumen, ResultadoTicker } from './types/types';
+
+const API_BASE_URL = 'http://localhost:5217/api';
+
+const apiClient = axios.create({
+  baseURL: API_BASE_URL,
+  headers: { 'Content-Type': 'application/json' },
+});
 
 interface PartidoData {
   id: string;
@@ -47,14 +54,13 @@ export interface BancadaDetalle {
   ocupante: OcupanteBanca | null;
 }
 
-const API_BASE_URL = 'http://localhost:5217/api';
+export interface ConfiguracionPublica {
+  TickerResultadosCantidad?: string;
+  ConcejalesResultadosCantidad?: string;
+  // ... otras claves públicas que pueda añadir en el futuro
+}
 
-const apiClient = axios.create({
-  baseURL: API_BASE_URL,
-  headers: { 'Content-Type': 'application/json' },
-});
-
-export const getResumenProvincial = async (): Promise<ResumenProvincial> => {
+export const getResumenProvincial = async (): Promise<CategoriaResumen[]> => {
   const response = await apiClient.get('/resultados/provincia/02');
   return response.data;
 };
@@ -113,4 +119,14 @@ export const getComposicionCongreso = async (): Promise<ComposicionData> => {
 export const getBancadasDetalle = async (): Promise<BancadaDetalle[]> => {
   const response = await apiClient.get('/resultados/bancadas-detalle');
   return response.data;
+};
+
+export const getConfiguracionPublica = async (): Promise<ConfiguracionPublica> => {
+  const response = await apiClient.get('/resultados/configuracion-publica');
+  return response.data;
+};
+
+export const getResultadosConcejales = async (seccionId: string): Promise<ResultadoTicker[]> => {
+  const response = await apiClient.get(`/resultados/concejales/${seccionId}`);
+  return response.data;
 };

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

@@ -0,0 +1,103 @@
+// src/components/ConcejalesWidget.tsx
+import { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { getSeccionesElectorales, getResultadosConcejales, getConfiguracionPublica } from '../apiService';
+import type { MunicipioSimple, ResultadoTicker } from '../types/types';
+import { ImageWithFallback } from './ImageWithFallback';
+import './TickerWidget.css'; // Reutilizamos los estilos del ticker
+
+const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
+
+export const ConcejalesWidget = () => {
+  const [secciones, setSecciones] = useState<MunicipioSimple[]>([]);
+  const [seccionActualId, setSeccionActualId] = useState<string>('');
+
+  // 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 = parseInt(configData?.ConcejalesResultadosCantidad || '5', 10) + 1;
+
+  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,
+  });
+
+  // --- INICIO DE LA LÓGICA DE PROCESAMIENTO "OTROS" ---
+  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), 0);
+
+    const otrosEntry: ResultadoTicker = {
+      id: `otros-concejales-${seccionActualId}`,
+      nombre: 'Otros',
+      nombreCorto: 'Otros',
+      color: '#888888',
+      logoUrl: null,
+      votos: 0, // No es relevante para la visualización del porcentaje
+      votosPorcentaje: 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 - LA PLATA</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>
+      </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}`} />
+              </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>
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  );
+};

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

@@ -80,17 +80,13 @@ export const CongresoWidget = () => {
         {camaraActiva === 'diputados' ? (
           <ParliamentLayout
             seatData={seatFillData}
-            // --- INICIO DE LA CORRECCIÓN ---
             // Solo pasamos la prop 'presidenteBancada' si NO estamos en modo oficial
             presidenteBancada={!esModoOficial ? datosCamaraActual.presidenteBancada : undefined}
-          // --- FIN DE LA CORRECCIÓN ---
           />
         ) : (
           <SenateLayout
             seatData={seatFillData}
-            // --- INICIO DE LA CORRECCIÓN ---
             presidenteBancada={!esModoOficial ? datosCamaraActual.presidenteBancada : undefined}
-          // --- FIN DE LA CORRECCIÓN ---
           />
         )}
       </div>

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

@@ -0,0 +1,28 @@
+// src/components/ImageWithFallback.tsx
+import { useState, useEffect } from 'react';
+
+interface Props extends React.ImgHTMLAttributes<HTMLImageElement> {
+  fallbackSrc: string;
+}
+
+export const ImageWithFallback = ({ src, fallbackSrc, ...props }: Props) => {
+  const [imgSrc, setImgSrc] = useState(src);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    setError(false);
+    setImgSrc(src);
+  }, [src]);
+
+  const handleError = () => {
+    setError(true);
+  };
+
+  return (
+    <img
+      src={error || !imgSrc ? fallbackSrc : imgSrc}
+      onError={handleError}
+      {...props}
+    />
+  );
+};

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

@@ -87,7 +87,7 @@ export const TelegramaWidget = () => {
         .finally(() => setLoading(false));
     }
   }, [selectedMesa]);
-
+        
   return (
     <div className="telegrama-container">
       <h4>Consulta de Telegramas por Ubicación</h4>

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

@@ -1,22 +1,20 @@
 /* src/components/TickerWidget.css */
-.ticker-container {
-  /* Se cambia a un fondo claro con borde y sombra sutil */
-  background-color: #ffffff;
-  border: 1px solid #e0e0e0;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
-  padding: 15px 20px;
-  border-radius: 8px;
-  max-width: 800px;
-  margin: 20px auto;
-  font-family: "Public Sans", system-ui, Avenir, Helvetica, Arial, sans-serif;
-  color: #333333; /* Color de texto por defecto */
+.ticker-wrapper {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 1.5rem;
+    width: 100%;
+    max-width: 1280px;
+    margin: 20px auto;
 }
-
-.ticker-container.loading, .ticker-container.error {
-    text-align: center;
-    padding: 30px;
-    font-style: italic;
-    color: #757575; /* Color de texto atenuado */
+.ticker-card {
+    background-color: #ffffff;
+    border: 1px solid #e0e0e0;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+    padding: 15px 20px;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
 }
 
 .ticker-header {
@@ -48,9 +46,9 @@
 }
 
 .ticker-results {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px; /* Espacio entre partidos */
 }
 
 .ticker-party .party-info {
@@ -84,4 +82,31 @@
   border-radius: 4px;
   transition: width 0.5s ease-in-out;
   /* El color de fondo se sigue aplicando desde el componente, esto es correcto */
+}
+
+.ticker-results {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Aumentamos el tamaño mínimo */
+    gap: 20px;
+}
+.ticker-party {
+    display: flex;
+    align-items: center;
+    gap: 10px; /* Espacio entre logo y detalles */
+}
+.party-logo {
+    flex-shrink: 0;
+    width: 50px;
+    height: 50px;
+}
+.party-logo img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+}
+.party-details {
+    flex-grow: 1;
+    min-width: 0; /* Previene que el flex item se desborde */
 }

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

@@ -1,78 +1,92 @@
 // src/components/TickerWidget.tsx
-import { useState, useEffect } from 'react';
-import { getResumenProvincial } from '../apiService';
-import type { ResumenProvincial } from '../types/types';
+import { useQuery } from '@tanstack/react-query';
+import { getResumenProvincial, getConfiguracionPublica } from '../apiService';
+import type { CategoriaResumen, ResultadoTicker } from '../types/types';
+import { ImageWithFallback } from './ImageWithFallback';
 import './TickerWidget.css';
 
-const formatPercent = (num: number) => `${num.toFixed(2).replace('.', ',')}%`;
-const COLORS = [
-    "#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd",
-    "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"
-];
+const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
 
 export const TickerWidget = () => {
-  const [data, setData] = useState<ResumenProvincial | null>(null);
-  const [loading, setLoading] = useState(true);
-  // Se añade un nuevo estado para manejar errores de forma explícita
-  const [error, setError] = useState<string | null>(null);
+  const { data: categorias, isLoading, error } = useQuery<CategoriaResumen[]>({
+    queryKey: ['resumenProvincial'],
+    queryFn: getResumenProvincial,
+    refetchInterval: 30000,
+  });
 
-  useEffect(() => {
-    const fetchData = async () => {
-      // Se resetea el error en cada intento de carga
-      setError(null);
-      try {
-        const result = await getResumenProvincial();
-        setData(result);
-      } catch (err) {
-        console.error("Error cargando resumen provincial:", err);
-        // Se guarda el mensaje de error para mostrarlo en la UI
-        setError("No se pudo conectar con el servidor para obtener el resumen provincial.");
-      } finally {
-        setLoading(false);
-      }
-    };
+  const { data: configData } = useQuery({
+    queryKey: ['configuracionPublica'],
+    queryFn: getConfiguracionPublica,
+    staleTime: 0,
+  });
 
-    fetchData(); // Carga inicial
-    const intervalId = setInterval(fetchData, 30000); // Actualiza cada 30 segundos
+  const cantidadAMostrar = parseInt(configData?.TickerResultadosCantidad || '5', 10) + 1;
 
-    return () => clearInterval(intervalId); // Limpia el intervalo al desmontar el componente
-  }, []);
+  if (isLoading) return <div className="ticker-wrapper loading">Cargando resumen...</div>;
+  if (error || !categorias) return <div className="ticker-wrapper error">No hay datos disponibles.</div>;
 
-  if (loading) {
-    return <div className="ticker-container loading">Cargando resultados provinciales...</div>;
-  }
-
-  // Si hay un error, se muestra el mensaje correspondiente
-  if (error) {
-    return <div className="ticker-container error">{error}</div>;
-  }
-  
-  if (!data) {
-    return <div className="ticker-container error">No hay datos disponibles.</div>;
-  }
+  const categoriasFiltradas = categorias.filter(c => c.categoriaId !== 7);
 
   return (
-    <div className="ticker-container">
-      <div className="ticker-header">
-        <h3>PROVINCIA BS. AS.</h3>
-        <div className="ticker-stats">
-          <span>Mesas Escrutadas: <strong>{formatPercent(data.porcentajeEscrutado)}</strong></span>
-          <span>Participación Total: <strong>{formatPercent(data.porcentajeParticipacion)}</strong></span>
-        </div>
-      </div>
-      <div className="ticker-results">
-        {data.resultados.slice(0, 3).map((partido, index) => (
-          <div key={`${partido.nombre}-${index}`} className="ticker-party">
-            <div className="party-info">
-              <span className="party-name">{partido.nombre}</span>
-              <span className="party-percent">{formatPercent(partido.porcentaje)}</span>
+    <div className="ticker-wrapper">
+      {categoriasFiltradas.map(categoria => {
+
+        let displayResults: ResultadoTicker[] = categoria.resultados;
+
+        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 otrosEntry: ResultadoTicker = {
+            id: `otros-${categoria.categoriaId}`,
+            nombre: 'Otros',
+            nombreCorto: 'Otros',
+            color: '#888888',
+            logoUrl: null,
+            votos: 0,
+            votosPorcentaje: otrosPorcentaje,
+          };
+
+          displayResults = [...topParties, otrosEntry];
+        } else {
+          displayResults = categoria.resultados.slice(0, cantidadAMostrar);
+        }
+
+        return (
+          <div key={categoria.categoriaId} className="ticker-card">
+            <div className="ticker-header">
+              <h3>{categoria.categoriaNombre}</h3>
+              <div className="ticker-stats">
+                <span>Mesas: <strong>{formatPercent(categoria.estadoRecuento?.mesasTotalizadasPorcentaje ?? 0)}</strong></span>
+                <span>Part: <strong>{formatPercent(categoria.estadoRecuento?.participacionPorcentaje ?? 0)}</strong></span>
+              </div>
             </div>
-            <div className="party-bar-background">
-              <div className="party-bar-foreground" style={{ width: `${partido.porcentaje}%`, backgroundColor:COLORS[index % COLORS.length] }}></div>
+            <div className="ticker-results">
+              {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.votosPorcentaje)}</span>
+                    </div>
+                    <div className="party-bar-background">
+                      <div className="party-bar-foreground" style={{ width: `${partido.votosPorcentaje}%`, backgroundColor: partido.color || '#888' }}></div>
+                    </div>
+                  </div>
+                </div>
+              ))}
             </div>
           </div>
-        ))}
-      </div>
+        );
+      })}
     </div>
   );
 };

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

@@ -40,22 +40,46 @@ export interface GeographyObject {
 }
 
 export interface MunicipioSimple { id: string; nombre: string; }
-export interface AgrupacionResultado { nombre: string; votos: number; porcentaje: number; }
+
+export interface ResultadoTicker {
+  id: string;
+  nombre: string;
+  nombreCorto: string | null;
+  color: string | null;
+  logoUrl: string | null;
+  votos: number;
+  votosPorcentaje: number;
+}
+
+export interface EstadoRecuentoTicker {
+    mesasTotalizadasPorcentaje: number;
+    participacionPorcentaje: number;
+}
+
+export interface CategoriaResumen {
+  categoriaId: number;
+  categoriaNombre: string;
+  estadoRecuento: EstadoRecuentoTicker | null;
+  resultados: ResultadoTicker[];
+}
+
 export interface VotosAdicionales { enBlanco: number; nulos: number; recurridos: number; }
+
 export interface MunicipioDetalle {
   municipioNombre: string;
   ultimaActualizacion: string;
   porcentajeEscrutado: number;
   porcentajeParticipacion: number;
-  resultados: AgrupacionResultado[];
+  resultados: CategoriaResumen[];
   votosAdicionales: VotosAdicionales;
 }
+
 export interface ResumenProvincial {
   provinciaNombre: string;
   ultimaActualizacion: string;
   porcentajeEscrutado: number;
   porcentajeParticipacion: number;
-  resultados: AgrupacionResultado[];
+  resultados: CategoriaResumen[];
   votosAdicionales: VotosAdicionales;
 }