Trabajo de ajuste en widgets y db para frontend

Elecciones-Web/frontend-admin/src/components/ConfiguracionGeneral.tsx

@@ -0,0 +1,110 @@
+// src/components/ConfiguracionGeneral.tsx
+import { useState, useEffect } from 'react';
+import { getAgrupaciones, getConfiguracion, updateConfiguracion } from '../services/apiService';
+import type { AgrupacionPolitica } from '../types';
+import './AgrupacionesManager.css'; // Reutilizamos los estilos para mantener la consistencia
+
+export const ConfiguracionGeneral = () => {
+    const [agrupaciones, setAgrupaciones] = useState<AgrupacionPolitica[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    // Estado específico para la configuración de la presidencia del Senado
+    const [presidenciaSenadoId, setPresidenciaSenadoId] = useState<string>('');
+    const [usarDatosOficiales, setUsarDatosOficiales] = useState(false);
+
+    useEffect(() => {
+        const loadInitialData = async () => {
+            try {
+                setLoading(true);
+                setError(null);
+
+                // Hacemos ambas llamadas a la API en paralelo para más eficiencia
+                const [agrupacionesData, configData] = await Promise.all([
+                    getAgrupaciones(),
+                    getConfiguracion()
+                ]);
+
+                setAgrupaciones(agrupacionesData);
+
+                // Asignamos el valor guardado, si existe
+                if (configData && configData.PresidenciaSenadores) {
+                    setPresidenciaSenadoId(configData.PresidenciaSenadores);
+                }
+                setUsarDatosOficiales(configData.UsarDatosDeBancadasOficiales === 'true');
+            } catch (err) {
+                console.error("Error al cargar datos de configuración:", err);
+                setError("No se pudieron cargar los datos necesarios para la configuración.");
+            } finally {
+                setLoading(false);
+            }
+        };
+        loadInitialData();
+    }, []);
+
+    const handleSave = async () => {
+        try {
+            await updateConfiguracion({ "PresidenciaSenadores": presidenciaSenadoId, "UsarDatosDeBancadasOficiales": usarDatosOficiales.toString() });
+            alert('Configuración guardada con éxito.');
+        } catch (err) {
+            console.error("Error al guardar la configuración:", err);
+            alert('Error al guardar la configuración.');
+        }
+    };
+
+    if (loading) return <div className="admin-module"><p>Cargando configuración...</p></div>;
+    if (error) return <div className="admin-module"><p style={{ color: 'red' }}>{error}</p></div>;
+
+    return (
+        <div className="admin-module">
+            <h3>Configuración General de Cámaras</h3>
+            <div className="form-group">
+                <label>
+                    <input
+                        type="checkbox"
+                        checked={usarDatosOficiales}
+                        onChange={e => setUsarDatosOficiales(e.target.checked)}
+                    />
+                    Activar Modo "Resultados Oficiales"
+                </label>
+                <p style={{ fontSize: '0.8rem', color: '#666', margin: '0.5rem 0 0 0' }}>
+                    Si está activo, el widget del Congreso mostrará la composición gestionada manualmente en esta página. Si está inactivo, mostrará la proyección en tiempo real de las elecciones.
+                </p>
+            </div>
+            <div style={{ marginTop: '1rem', paddingBottom: '1rem', borderBottom: '1px solid #eee' }}>
+                <label
+                    htmlFor="presidencia-senado"
+                    style={{ display: 'block', fontWeight: 'bold', marginBottom: '0.5rem' }}
+                >
+                    Presidencia Cámara de Senadores (Vicegobernador)
+                </label>
+                <select
+                    id="presidencia-senado"
+                    value={presidenciaSenadoId}
+                    onChange={e => setPresidenciaSenadoId(e.target.value)}
+                    style={{ width: '100%', padding: '8px' }}
+                >
+                    <option value="">-- No Asignado --</option>
+                    {agrupaciones.map(a => (
+                        <option key={a.id} value={a.id}>
+                            {a.nombre}
+                        </option>
+                    ))}
+                </select>
+                <p style={{ fontSize: '0.8rem', color: '#666', margin: '0.5rem 0 0 0' }}>
+                    Seleccione el partido político al que pertenece el Vicegobernador. El asiento presidencial del Senado se pintará con el color de este partido.
+                </p>
+            </div>
+            <div style={{ marginTop: '1rem' }}>
+                <p style={{ fontWeight: 'bold', margin: 0 }}>
+                    Presidencia Cámara de Diputados
+                </p>
+                <p style={{ fontSize: '0.8rem', color: '#666', margin: '0.5rem 0 0 0' }}>
+                    Esta banca se asigna y colorea automáticamente según la agrupación política con la mayoría de bancas totales en la cámara.
+                </p>
+            </div>
+            <button onClick={handleSave} style={{ marginTop: '1.5rem' }}>
+                Guardar Configuración
+            </button>
+        </div>
+    );
+};