Feat Widgets Carousel Selector de Porv. Fix Tablas Movil

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

@@ -1,5 +1,5 @@
 // src/components/widgets/ResumenNacionalWidget.tsx
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import Select from 'react-select';
 import { getResumenNacionalPorProvincia } from '../../../apiService';
@@ -11,6 +11,35 @@ const CATEGORIAS_NACIONALES = [
   { value: 2, label: 'Senadores Nacionales' },
 ];
 
+// 1. Mapa para definir el orden y número de cada provincia según el PDF
+const PROVINCE_ORDER_MAP: Record<string, number> = {
+  '02': 1,  // Buenos Aires
+  '03': 2,  // Catamarca
+  '06': 3,  // Chaco
+  '07': 4,  // Chubut
+  '04': 5,  // Córdoba
+  '05': 6,  // Corrientes
+  '08': 7,  // Entre Ríos
+  '09': 8,  // Formosa
+  '10': 9,  // Jujuy
+  '11': 10, // La Pampa
+  '12': 11, // La Rioja
+  '13': 12, // Mendoza
+  '14': 13, // Misiones
+  '15': 14, // Neuquén
+  '16': 15, // Río Negro
+  '17': 16, // Salta
+  '18': 17, // San Juan
+  '19': 18, // San Luis
+  '20': 19, // Santa Cruz
+  '21': 20, // Santa Fe
+  '22': 21, // Santiago del Estero
+  '23': 22, // Tierra del Fuego
+  '24': 23, // Tucumán
+  '01': 24, // CABA
+};
+
+
 export const ResumenNacionalWidget = () => {
   const [categoria, setCategoria] = useState(CATEGORIAS_NACIONALES[0]);
 
@@ -20,12 +49,22 @@ export const ResumenNacionalWidget = () => {
     refetchInterval: 60000,
   });
 
-  const formatPercent = (num: number) => `${num.toFixed(2)}%`;
+  // 2. Ordenar los datos de la API usando el mapa de ordenamiento
+  const sortedData = useMemo(() => {
+    if (!data) return [];
+    return [...data].sort((a, b) => {
+      const orderA = PROVINCE_ORDER_MAP[a.provinciaId] ?? 99;
+      const orderB = PROVINCE_ORDER_MAP[b.provinciaId] ?? 99;
+      return orderA - orderB;
+    });
+  }, [data]);
+
+  const formatPercent = (num: number) => `${num.toFixed(2).replace('.', ',')}%`;
 
   return (
     <div className={styles.widgetContainer}>
-      <div className={styles.header}>
-        <h3>{categoria.label}</h3>
+      <div className={styles.subHeader}>
+        <h4>{categoria.label}</h4>
         <Select
           className={styles.categoriaSelector}
           options={CATEGORIAS_NACIONALES}
@@ -36,25 +75,30 @@ export const ResumenNacionalWidget = () => {
       </div>
       {isLoading && <p>Cargando resumen nacional...</p>}
       {error && <p style={{ color: 'red' }}>Error al cargar los datos.</p>}
-      {data && (
-        <ul className={styles.listaProvincias}>
-          {data.map((provincia) => (
-            <li key={provincia.provinciaId} className={styles.provinciaItem}>
-              <div className={styles.provinciaHeader}>
-                <span className={styles.provinciaNombre}>{provincia.provinciaNombre}</span>
-                <span className={styles.provinciaEscrutado}>ESCR. {formatPercent(provincia.porcentajeEscrutado)}</span>
-              </div>
-              <ul className={styles.resultadosLista}>
-                {provincia.resultados.map((partido, index) => (
-                  <li key={index} className={styles.resultadoItem}>
-                    <span className={styles.partidoNombre}>{partido.nombre}</span>
-                    <span className={styles.partidoPorcentaje}>{formatPercent(partido.porcentaje)}</span>
-                  </li>
-                ))}
-              </ul>
-            </li>
+      {sortedData && (
+        <table className={styles.resultsTable}>
+          <thead>
+            <tr>
+              <th>Concepto</th>
+              <th>Valor</th>
+            </tr>
+          </thead>
+          {sortedData.map((provincia) => (
+            <tbody key={provincia.provinciaId} className={styles.provinciaBlock}>
+              <tr>
+                {/* 3. Añadir el número antes del nombre */}
+                <td className={styles.provinciaNombre}>{`${PROVINCE_ORDER_MAP[provincia.provinciaId]}- ${provincia.provinciaNombre}`}</td>
+                <td className={styles.provinciaEscrutado}>ESCR. {formatPercent(provincia.porcentajeEscrutado)}</td>
+              </tr>
+              {provincia.resultados.map((partido, index) => (
+                <tr key={index}>
+                  <td className={styles.partidoNombre}>{partido.nombre}</td>
+                  <td className={styles.partidoPorcentaje}>{formatPercent(partido.porcentaje)}</td>
+                </tr>
+              ))}
+            </tbody>
           ))}
-        </ul>
+        </table>
       )}
     </div>
   );