Test Docker

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

@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react';
+import { getResumenProvincial, type ResumenProvincial } from '../services/api';
+
+interface Props {
+  distritoId: string;
+}
+
+export const ResumenProvincialWidget = ({ distritoId }: Props) => {
+  const [data, setData] = useState<ResumenProvincial | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const resumen = await getResumenProvincial(distritoId);
+        setData(resumen);
+      } catch (err) {
+        console.error("Error cargando resumen provincial", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+    const intervalId = setInterval(fetchData, 15000); // Actualizamos cada 15s
+    return () => clearInterval(intervalId);
+  }, [distritoId]);
+
+  if (loading) return <div>Cargando resumen provincial...</div>;
+  if (!data) return <div>No hay datos provinciales disponibles.</div>;
+
+  return (
+    <div style={{ fontFamily: 'sans-serif', border: '1px solid #ccc', padding: '16px', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
+      <h2>Resumen Provincial - {data.provinciaNombre}</h2>
+      <p><strong>Mesas Escrutadas:</strong> {data.porcentajeEscrutado.toFixed(2)}% | <strong>Participación:</strong> {data.porcentajeParticipacion.toFixed(2)}%</p>
+      
+      {data.resultados.map((partido) => (
+        <div key={partido.nombre} style={{ margin: '10px 0' }}>
+          <span>{partido.nombre}</span>
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <div style={{ backgroundColor: '#ddd', width: '100%', borderRadius: '4px', marginRight: '10px' }}>
+              <div style={{ width: `${partido.porcentaje}%`, backgroundColor: 'royalblue', color: 'white', padding: '4px', borderRadius: '4px', textAlign: 'right' }}>
+                <strong>{partido.porcentaje.toFixed(2)}%</strong>
+              </div>
+            </div>
+            <span>{partido.votos.toLocaleString('es-AR')}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};