Test Docker

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

@@ -0,0 +1,52 @@
+// src/components/BancasWidget.tsx
+import { useState, useEffect } from 'react';
+import { getBancasPorSeccion, type ProyeccionBancas } from '../services/api';
+
+interface Props {
+  seccionId: string;
+}
+
+export const BancasWidget = ({ seccionId }: Props) => {
+  const [data, setData] = useState<ProyeccionBancas | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        const proyeccion = await getBancasPorSeccion(seccionId);
+        setData(proyeccion);
+      } catch (err) {
+        console.error("Error cargando bancas", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, [seccionId]);
+
+  if (loading) return <div>Cargando proyección de bancas...</div>;
+  if (!data) return <div>No hay datos de bancas disponibles.</div>;
+
+  return (
+    <div style={{ fontFamily: 'sans-serif', border: '1px solid #ccc', padding: '16px', borderRadius: '8px' }}>
+      <h3>Proyección de Bancas - {data.seccionNombre}</h3>
+      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+        <thead>
+          <tr>
+            <th style={{ textAlign: 'left' }}>Agrupación</th>
+            <th style={{ textAlign: 'right' }}>Bancas Obtenidas</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.proyeccion.map((partido) => (
+            <tr key={partido.agrupacionNombre}>
+              <td>{partido.agrupacionNombre}</td>
+              <td style={{ textAlign: 'right' }}>{partido.bancas}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};