Pre Refinamiento Movil

Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacionalWidget.tsx

@@ -1,6 +1,6 @@
 // src/features/legislativas/nacionales/PanelNacionalWidget.tsx
 import { useMemo, useState, Suspense } from 'react';
-import { useSuspenseQuery } from '@tanstack/react-query'; // <-- CAMBIO CLAVE
+import { useSuspenseQuery } from '@tanstack/react-query';
 import { getPanelElectoral } from '../../../apiService';
 import { MapaNacional } from './components/MapaNacional';
 import { PanelResultados } from './components/PanelResultados';
@@ -26,20 +26,12 @@ const CATEGORIAS_NACIONALES = [
   { value: 1, label: 'Senadores Nacionales' },
 ];
 
-// Creamos un componente interno para poder usar Suspense correctamente
 const PanelContenido = ({ eleccionId, ambitoActual, categoriaId }: { eleccionId: number, ambitoActual: AmbitoState, categoriaId: number }) => {
-  // Este hook ahora suspenderá el renderizado si los datos no están listos
   const { data } = useSuspenseQuery<PanelElectoralDto>({
     queryKey: ['panelElectoral', eleccionId, ambitoActual.id, categoriaId],
     queryFn: () => getPanelElectoral(eleccionId, ambitoActual.id, categoriaId),
   });
-
-  return (
-    <PanelResultados
-      resultados={data.resultadosPanel}
-      estadoRecuento={data.estadoRecuento}
-    />
-  );
+  return <PanelResultados resultados={data.resultadosPanel} estadoRecuento={data.estadoRecuento} />;
 };
 
 export const PanelNacionalWidget = ({ eleccionId }: PanelNacionalWidgetProps) => {
@@ -52,7 +44,7 @@ export const PanelNacionalWidget = ({ eleccionId }: PanelNacionalWidgetProps) =>
       id: nuevoAmbitoId,
       nivel: nuevoNivel,
       nombre: nuevoNombre,
-      provinciaNombre: nuevoNivel === 'municipio' ? prev.nombre : (nuevoNivel === 'provincia' ? nuevoNombre : undefined),
+      provinciaNombre: nuevoNivel === 'municipio' ? prev.provinciaNombre : (nuevoNivel === 'provincia' ? nuevoNombre : undefined),
       provinciaDistritoId: nuevoNivel === 'provincia' ? nuevoAmbitoId : prev.provinciaDistritoId
     }));
   };
@@ -67,7 +59,8 @@ export const PanelNacionalWidget = ({ eleccionId }: PanelNacionalWidgetProps) =>
         id: ambitoActual.provinciaDistritoId,
         nivel: 'provincia',
         nombre: ambitoActual.provinciaNombre,
-        provinciaDistritoId: ambitoActual.provinciaDistritoId
+        provinciaDistritoId: ambitoActual.provinciaDistritoId,
+        provinciaNombre: ambitoActual.provinciaNombre,
       });
     } else {
       handleResetToPais();
@@ -101,11 +94,7 @@ export const PanelNacionalWidget = ({ eleccionId }: PanelNacionalWidgetProps) =>
       </header>
       <main className={`panel-main-content ${!isPanelOpen ? 'panel-collapsed' : ''}`}>
         <div className="mapa-column">
-          <button
-            className="panel-toggle-btn"
-            onClick={() => setIsPanelOpen(!isPanelOpen)}
-            title={isPanelOpen ? "Ocultar panel" : "Mostrar panel"}
-          >
+          <button className="panel-toggle-btn" onClick={() => setIsPanelOpen(!isPanelOpen)} title={isPanelOpen ? "Ocultar panel" : "Mostrar panel"}>
             {isPanelOpen ? '›' : '‹'}
           </button>
           <Suspense fallback={<div className="spinner" />}>
@@ -114,6 +103,7 @@ export const PanelNacionalWidget = ({ eleccionId }: PanelNacionalWidgetProps) =>
               categoriaId={categoriaId}
               nivel={ambitoActual.nivel}
               nombreAmbito={ambitoActual.nombre}
+              nombreProvinciaActiva={ambitoActual.provinciaNombre}
               provinciaDistritoId={ambitoActual.provinciaDistritoId ?? null}
               onAmbitoSelect={handleAmbitoSelect}
               onVolver={ambitoActual.nivel === 'municipio' ? handleVolverAProvincia : handleResetToPais}