Preparación Legislativas Nacionales 2025

2025-09-17 11:31:17 -03:00
parent 64dc7ef440
commit 3a8f64bf85
94 changed files with 2471 additions and 195 deletions
--- a/Elecciones-Web/frontend/src/features/legislativas/provinciales/ConcejalesWidget.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/provinciales/ConcejalesWidget.tsx
@@ -0,0 +1,119 @@
+// src/features/legislativas/provinciales/ConcejalesWidget.tsx
+import { useState, useMemo, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import Select from 'react-select';
+import { getMunicipios, getResultadosPorMunicipio, getConfiguracionPublica, assetBaseUrl } from '../../../apiService';
+import type { MunicipioSimple, ResultadoTicker } from '../../../types/types';
+import { ImageWithFallback } from '../../../components/common/ImageWithFallback';
+import './TickerWidget.css';
+
+const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
+const customSelectStyles = {
+  control: (base: any) => ({ ...base, minWidth: '220px', border: '1px solid #ced4da' }),
+  menu: (base: any) => ({ ...base, zIndex: 100 }),
+};
+
+const CATEGORIA_ID = 7; // ID para Concejales
+
+export const ConcejalesWidget = () => {
+  const [selectedMunicipio, setSelectedMunicipio] = useState<{ value: string; label: string } | null>(null);
+
+  // 1. Query para la configuración (se había eliminado por error)
+  const { data: configData } = useQuery({
+    queryKey: ['configuracionPublica'],
+    queryFn: getConfiguracionPublica,
+    staleTime: 0,
+    refetchInterval: 180000,
+  });
+
+  // 2. Query para la lista de municipios
+  const { data: municipios = [], isLoading: isLoadingMunicipios } = useQuery<MunicipioSimple[]>({
+    // Usamos una clave genérica porque siempre pedimos la lista completa.
+    queryKey: ['municipios'],
+    // Llamamos a la función sin argumentos para obtener todos los municipios.
+    queryFn: () => getMunicipios(),
+  });
+
+  const cantidadAMostrar = parseInt(configData?.ConcejalesResultadosCantidad || '5', 10);
+
+  useEffect(() => {
+    if (municipios.length > 0 && !selectedMunicipio) {
+      const laPlata = municipios.find(m => m.nombre.toUpperCase() === 'LA PLATA');
+      if (laPlata) {
+        setSelectedMunicipio({ value: laPlata.id, label: laPlata.nombre });
+      }
+    }
+  }, [municipios, selectedMunicipio]);
+
+  const municipioOptions = useMemo(() =>
+    municipios
+      .map(m => ({ value: m.id, label: m.nombre }))
+      .sort((a, b) => a.label.localeCompare(b.label)),
+    [municipios]);
+
+  const { data: resultados, isLoading: isLoadingResultados } = useQuery<ResultadoTicker[]>({
+    queryKey: ['resultadosPorMunicipio', selectedMunicipio?.value, CATEGORIA_ID],
+    queryFn: () => getResultadosPorMunicipio(selectedMunicipio!.value, CATEGORIA_ID),
+    enabled: !!selectedMunicipio,
+  });
+
+  // Lógica para "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.porcentaje || 0), 0);
+    const otrosEntry: ResultadoTicker = {
+      id: `otros-concejales-${selectedMunicipio?.value}`,
+      nombre: 'Otros',
+      nombreCorto: 'Otros',
+      color: '#888888',
+      logoUrl: null,
+      votos: 0,
+      porcentaje: otrosPorcentaje,
+    };
+    displayResults = [...topParties, otrosEntry];
+  } else if (resultados) {
+    displayResults = resultados.slice(0, cantidadAMostrar);
+  }
+
+  return (
+    <div className="ticker-card" style={{ gridColumn: '1 / -1' }}>
+      <div className="ticker-header">
+        <h3>CONCEJALES POR MUNICIPIO</h3>
+        <Select
+          options={municipioOptions}
+          value={selectedMunicipio}
+          onChange={(option) => setSelectedMunicipio(option)}
+          isLoading={isLoadingMunicipios}
+          placeholder="Buscar y seleccionar un municipio..."
+          isClearable
+          styles={customSelectStyles}
+        />
+      </div>
+      <div className="ticker-results">
+        {(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={`${assetBaseUrl}/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-bar-background">
+                <div className="party-bar-foreground" style={{ width: `${partido.porcentaje}%`, backgroundColor: partido.color || '#888' }}></div>
+              </div>
+              <div className="party-candidate-name">
+                {partido.nombreCandidato}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};