Feat Widgets

Se añade la tabla CandidatosOverrides
Se añade el Overrides de Candidatos al panel de administrador
Se Añade el nombre de los candidatos a los Widgets de categorias por municipio

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

@@ -27,11 +27,11 @@ export const ConcejalesWidget = () => {
 
   // 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(), 
-});
+    // 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);
 
@@ -48,7 +48,7 @@ export const ConcejalesWidget = () => {
     municipios
       .map(m => ({ value: m.id, label: m.nombre }))
       .sort((a, b) => a.label.localeCompare(b.label)),
-  [municipios]);
+    [municipios]);
 
   const { data: resultados, isLoading: isLoadingResultados } = useQuery<ResultadoTicker[]>({
     queryKey: ['resultadosPorMunicipio', selectedMunicipio?.value, CATEGORIA_ID],
@@ -92,7 +92,7 @@ export const ConcejalesWidget = () => {
       </div>
       <div className="ticker-results">
         {(isLoadingMunicipios || (isLoadingResultados && selectedMunicipio)) && <p>Cargando...</p>}
-        {!selectedMunicipio && !isLoadingMunicipios && <p style={{textAlign: 'center', color: '#666'}}>Seleccione un municipio.</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">
@@ -106,6 +106,9 @@ export const ConcejalesWidget = () => {
               <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>
         ))}

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

@@ -50,7 +50,7 @@ export const DiputadosWidget = () => {
     municipios
       .map(m => ({ value: m.id, label: m.nombre }))
       .sort((a, b) => a.label.localeCompare(b.label)),
-  [municipios]);
+    [municipios]);
 
   const { data: resultados, isLoading: isLoadingResultados } = useQuery<ResultadoTicker[]>({
     queryKey: ['resultadosMunicipio', selectedMunicipio?.value, CATEGORIA_ID],
@@ -94,7 +94,7 @@ export const DiputadosWidget = () => {
       </div>
       <div className="ticker-results">
         {(isLoadingMunicipios || (isLoadingResultados && selectedMunicipio)) && <p>Cargando...</p>}
-        {!selectedMunicipio && !isLoadingMunicipios && <p style={{textAlign: 'center', color: '#666'}}>Seleccione un municipio.</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">
@@ -108,6 +108,9 @@ export const DiputadosWidget = () => {
               <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>
         ))}

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

@@ -107,6 +107,9 @@ export const SenadoresWidget = () => {
               <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>
         ))}

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

@@ -133,4 +133,13 @@
   .ticker-party .party-name {
     white-space: normal;
   }
+}
+
+.party-candidate-name {
+  font-size: 0.8rem;
+  color: #555;
+  margin-top: 4px; /* Espacio entre la barra y el nombre */
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }

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

@@ -49,6 +49,7 @@ export interface ResultadoTicker {
   logoUrl: string | null;
   votos: number;
   porcentaje: number;
+  nombreCandidato?: string | null;
 }
 
 export interface EstadoRecuentoTicker {