Feat Widgets Cards y Optimización de Consultas

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

@@ -0,0 +1,110 @@
+// src/components/ConfiguracionNacional.tsx
+import { useState, useEffect } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { getAgrupaciones, getConfiguracion, updateConfiguracion } from '../services/apiService';
+import type { AgrupacionPolitica } from '../types';
+import './AgrupacionesManager.css';
+
+export const ConfiguracionNacional = () => {
+    const queryClient = useQueryClient();
+    const [agrupaciones, setAgrupaciones] = useState<AgrupacionPolitica[]>([]);
+    const [loading, setLoading] = useState(true);
+    
+    const [presidenciaDiputadosId, setPresidenciaDiputadosId] = useState<string>('');
+    const [presidenciaSenadoId, setPresidenciaSenadoId] = useState<string>('');
+    const [modoOficialActivo, setModoOficialActivo] = useState(false);
+    const [diputadosTipoBanca, setDiputadosTipoBanca] = useState<'ganada' | 'previa'>('ganada');
+    // El estado para el tipo de banca del senado ya no es necesario para la UI, 
+    // pero lo mantenemos para no romper el handleSave.
+    const [senadoTipoBanca, setSenadoTipoBanca] = useState<'ganada' | 'previa'>('ganada');
+
+
+    useEffect(() => {
+        const loadInitialData = async () => {
+            try {
+                setLoading(true);
+                const [agrupacionesData, configData] = await Promise.all([getAgrupaciones(), getConfiguracion()]);
+                setAgrupaciones(agrupacionesData);
+                setPresidenciaDiputadosId(configData.PresidenciaDiputadosNacional || '');
+                setPresidenciaSenadoId(configData.PresidenciaSenadoNacional || '');
+                setModoOficialActivo(configData.UsarDatosOficialesNacionales === 'true');
+                setDiputadosTipoBanca(configData.PresidenciaDiputadosNacional_TipoBanca === 'previa' ? 'previa' : 'ganada');
+                setSenadoTipoBanca(configData.PresidenciaSenadoNacional_TipoBanca === 'previa' ? 'previa' : 'ganada');
+            } catch (err) { console.error("Error al cargar datos de configuración nacional:", err); } 
+            finally { setLoading(false); }
+        };
+        loadInitialData();
+    }, []);
+
+    const handleSave = async () => {
+        try {
+            await updateConfiguracion({
+                "PresidenciaDiputadosNacional": presidenciaDiputadosId,
+                "PresidenciaSenadoNacional": presidenciaSenadoId,
+                "UsarDatosOficialesNacionales": modoOficialActivo.toString(),
+                "PresidenciaDiputadosNacional_TipoBanca": diputadosTipoBanca,
+                // Aunque no se muestre, guardamos el valor para consistencia
+                "PresidenciaSenadoNacional_TipoBanca": senadoTipoBanca,
+            });
+            queryClient.invalidateQueries({ queryKey: ['composicionNacional'] });
+            alert('Configuración nacional guardada.');
+        } catch { alert('Error al guardar.'); }
+    };
+
+    if (loading) return <div className="admin-module"><p>Cargando...</p></div>;
+
+    return (
+        <div className="admin-module">
+            <h3>Configuración de Widgets Nacionales</h3>
+            {/*<div className="form-group">
+                <label>
+                    <input type="checkbox" checked={modoOficialActivo} onChange={e => setModoOficialActivo(e.target.checked)} />
+                    **Activar Modo "Resultados Oficiales" para Widgets Nacionales**
+                </label>
+                <p style={{ fontSize: '0.8rem', color: '#666' }}>
+                    Si está activo, los widgets nacionales usarán la composición manual de bancas. Si no, usarán la proyección en tiempo real.
+                </p>
+            </div>*/}
+            
+            <div style={{ display: 'flex', gap: '2rem', marginTop: '1rem' }}>
+                {/* Columna Diputados */}
+                <div style={{ flex: 1, borderRight: '1px solid #ccc', paddingRight: '1rem' }}>
+                    <label htmlFor="presidencia-diputados-nacional" style={{ display: 'block', fontWeight: 'bold', marginBottom: '0.5rem' }}>
+                        Presidencia Cámara de Diputados
+                    </label>
+                    <p style={{ fontSize: '0.8rem', color: '#666', margin: '0.5rem 0 0 0' }}>
+                        Este escaño es parte de los 257 diputados y se descuenta del total del partido.
+                    </p>
+                    <select id="presidencia-diputados-nacional" value={presidenciaDiputadosId} onChange={e => setPresidenciaDiputadosId(e.target.value)} style={{ width: '100%', padding: '8px', marginBottom: '0.5rem' }}>
+                        <option value="">-- No Asignado --</option>
+                        {agrupaciones.map(a => (<option key={a.id} value={a.id}>{a.nombre}</option>))}
+                    </select>
+                    {presidenciaDiputadosId && (
+                        <div>
+                            <label><input type="radio" value="ganada" checked={diputadosTipoBanca === 'ganada'} onChange={() => setDiputadosTipoBanca('ganada')} /> Descontar de Banca Ganada</label>
+                            <label style={{marginLeft: '1rem'}}><input type="radio" value="previa" checked={diputadosTipoBanca === 'previa'} onChange={() => setDiputadosTipoBanca('previa')} /> Descontar de Banca Previa</label>
+                        </div>
+                    )}                    
+                </div>
+
+                {/* Columna Senadores */}
+                <div style={{ flex: 1 }}>
+                    <label htmlFor="presidencia-senado-nacional" style={{ display: 'block', fontWeight: 'bold', marginBottom: '0.5rem' }}>
+                        Presidencia Senado (Vicepresidente)
+                    </label>
+                    <p style={{ fontSize: '0.8rem', color: '#666', margin: '0.5rem 0 0 0' }}>
+                        Este escaño es adicional a los 72 senadores y no se descuenta del total del partido.
+                    </p>
+                    <select id="presidencia-senado-nacional" 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>                    
+                </div>
+            </div>
+            
+            <button onClick={handleSave} style={{ marginTop: '1.5rem' }}>
+                Guardar Configuración
+            </button>
+        </div>
+    );
+};