Test Docker

Elecciones-Web/frontend/src/App.tsx

@@ -1,28 +1,100 @@
 // src/App.tsx
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { MunicipioWidget } from './components/MunicipioWidget';
 import { MunicipioSelector } from './components/MunicipioSelector';
+import { getMunicipios, type MunicipioSimple } from './services/api';
 import './App.css';
+import { ResumenProvincialWidget } from './components/ResumenProvincialWidget';
+import { BancasWidget } from './components/BancasWidget';
+import { TelegramasView } from './components/TelegramasView';
+import { MapaD3Widget } from './components/MapaD3Widget';
 
 function App() {
   const [selectedMunicipioId, setSelectedMunicipioId] = useState<string | null>(null);
+  const [listaMunicipios, setListaMunicipios] = useState<MunicipioSimple[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    getMunicipios()
+      .then(setListaMunicipios)
+      .catch(err => console.error("Error al cargar la lista de municipios", err))
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) return <h1>Cargando datos iniciales...</h1>;
 
   return (
     <>
       <h1>Elecciones 2025 - Resultados en Vivo</h1>
-      
-      {/* Aquí podrías poner el widget del Resumen Provincial */}
+      <section>
+        <ResumenProvincialWidget distritoId="02" />
+      </section>
 
       <hr />
       
-      <h2>Consulta por Municipio</h2>
-      <MunicipioSelector onMunicipioChange={setSelectedMunicipioId} />
-
-      {selectedMunicipioId && (
-        <div style={{ marginTop: '20px' }}>
-          <MunicipioWidget municipioId={selectedMunicipioId} />
+      <section style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '20px' }}>
+        <div>
+          <h2>Mapa de Resultados</h2>
+          <MapaD3Widget
+            municipios={listaMunicipios} 
+            onMunicipioClick={setSelectedMunicipioId} 
+          />
         </div>
-      )}
+        <div>
+          <h2>Consulta por Municipio</h2>
+          <MunicipioSelector 
+            municipios={listaMunicipios} 
+            onMunicipioChange={setSelectedMunicipioId} 
+          />
+          {selectedMunicipioId && (
+            <div style={{ marginTop: '20px' }}>
+              <MunicipioWidget municipioId={selectedMunicipioId} />
+            </div>
+          )}
+        </div>
+      </section>
+      
+      <section>
+        {/* Usamos el ID del distrito de Bs As ("02") */}
+        <ResumenProvincialWidget distritoId="02" />
+      </section>
+
+      <hr />
+      
+      <section>
+        <h2>Consulta por Municipio</h2>
+        <MunicipioSelector onMunicipioChange={setSelectedMunicipioId} municipios={[]} />
+        {selectedMunicipioId && (
+          <div style={{ marginTop: '20px' }}>
+            <MunicipioWidget municipioId={selectedMunicipioId} />
+          </div>
+        )}
+      </section>
+      
+      <section>
+        <h2>Proyección de Bancas</h2>
+        {/* Usamos el ID de la sección de La Plata ("0001") como ejemplo */}
+        <BancasWidget seccionId="0001" /> 
+      </section>
+
+      <hr />
+      
+      <section>
+        <h2>Consulta de Resultados por Municipio</h2>
+        <MunicipioSelector onMunicipioChange={setSelectedMunicipioId} municipios={[]} />
+        {selectedMunicipioId && (
+          <div style={{ marginTop: '20px' }}>
+            <MunicipioWidget municipioId={selectedMunicipioId} />
+          </div>
+        )}
+      </section>
+
+      <hr />
+
+      <section>
+        <h2>Explorador de Telegramas</h2>
+        <TelegramasView />
+      </section>
     </>
   );
 }