Feat Tabla de Datos Redaccion

- Tabla de Top 2 Conurbano
- Tabla de Top 2 Por Secciones Electorales Bs. As.

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

@@ -0,0 +1,58 @@
+// src/features/legislativas/nacionales/TablaSeccionesWidget.tsx
+import React from 'react'; // Importar React para React.Fragment
+import { useQuery } from '@tanstack/react-query';
+import { getTablaSecciones } from '../../../apiService';
+import styles from './TablaResultadosWidget.module.css';
+
+export const TablaSeccionesWidget = () => {
+  const ELECCION_ID = 2;
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['tablaSecciones', ELECCION_ID],
+    queryFn: () => getTablaSecciones(ELECCION_ID),
+    refetchInterval: 60000,
+  });
+
+  const formatPercent = (num: number) => `${num.toFixed(2)}%`;
+
+  return (
+    <div className={styles.widgetContainer}>
+      <div className={styles.header}>
+        <h3>Resultados por Sección - Diputados Nacionales</h3>
+      </div>
+      {isLoading && <p>Cargando resultados...</p>}
+      {error && <p>Error al cargar los datos.</p>}
+      {data && (
+        <table className={styles.resultsTable}>
+          <thead>
+            <tr>
+              <th>Municipio</th>
+              <th>1ra Fuerza</th>
+              <th>%</th>
+              <th>2da Fuerza</th>
+              <th>%</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((seccion) => (
+              <React.Fragment key={seccion.seccionId}>
+                <tr className={styles.seccionHeader}>
+                  <td colSpan={5}>{seccion.nombre}</td>
+                </tr>
+                {seccion.municipios.map((fila, index) => (
+                  <tr key={fila.ambitoId}>
+                    <td className={styles.distritoCell}><span className={styles.distritoIndex}>{index + 1}.</span>{fila.nombre}</td>
+                    <td className={styles.fuerzaCell}>{fila.fuerza1Display}</td>
+                    <td className={styles.porcentajeCell}>{formatPercent(fila.fuerza1Porcentaje)}</td>
+                    <td className={styles.fuerzaCell}>{fila.fuerza2Display}</td>
+                    <td className={styles.porcentajeCell}>{formatPercent(fila.fuerza2Porcentaje)}</td>
+                  </tr>
+                ))}
+              </React.Fragment>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+};