Fix bancas widget

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

@@ -1,73 +1,68 @@
 // src/components/ConfiguracionGeneral.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'; // Reutilizamos los estilos para mantener la consistencia
+import './AgrupacionesManager.css';
 
 export const ConfiguracionGeneral = () => {
+    const queryClient = useQueryClient();
     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);
+    // Renombramos el estado para mayor claridad
+    const [modoOficialActivo, setModoOficialActivo] = 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()
-                ]);
-
+                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');
+                setPresidenciaSenadoId(configData.PresidenciaSenadores || '');
+                setModoOficialActivo(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);
-            }
+            } 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.');
+            await updateConfiguracion({
+                "PresidenciaSenadores": presidenciaSenadoId,
+                "UsarDatosDeBancadasOficiales": modoOficialActivo.toString()
+            });
+            await queryClient.invalidateQueries({ queryKey: ['composicionCongreso'] });
+            await queryClient.invalidateQueries({ queryKey: ['bancadasDetalle'] });
+            alert('Configuración guardada.');
+        } catch {
+            alert('Error al guardar.');
         }
     };
 
-    if (loading) return <div className="admin-module"><p>Cargando configuración...</p></div>;
+    if (loading) return <div className="admin-module"><p>Cargando...</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>
+            <h3>Configuración General de Visualización</h3>
             <div className="form-group">
                 <label>
                     <input
                         type="checkbox"
-                        checked={usarDatosOficiales}
-                        onChange={e => setUsarDatosOficiales(e.target.checked)}
+                        checked={modoOficialActivo}
+                        onChange={e => setModoOficialActivo(e.target.checked)}
                     />
-                    Activar Modo "Resultados Oficiales"
+                    **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 style={{ fontSize: '0.8rem', color: '#666' }}>
+                    Si está activo, el sitio público mostrará la composición de bancas y los ocupantes definidos manualmente en este panel. Si está inactivo, mostrará la proyección en tiempo real de la elección.
                 </p>
             </div>
             <div style={{ marginTop: '1rem', paddingBottom: '1rem', borderBottom: '1px solid #eee' }}>