Feat Widgets Cards y Optimización de Consultas

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

@@ -1,43 +1,89 @@
 // src/components/DashboardPage.tsx
 import { useAuth } from '../context/AuthContext';
 import { AgrupacionesManager } from './AgrupacionesManager';
-import { OrdenDiputadosManager } from './OrdenDiputadosManager';
-import { OrdenSenadoresManager } from './OrdenSenadoresManager';
-import { ConfiguracionGeneral } from './ConfiguracionGeneral';
-import { BancasManager } from './BancasManager';
+//import { OrdenDiputadosManager } from './OrdenDiputadosManager';
+//import { OrdenSenadoresManager } from './OrdenSenadoresManager';
+//import { ConfiguracionGeneral } from './ConfiguracionGeneral';
 import { LogoOverridesManager } from './LogoOverridesManager';
 import { CandidatoOverridesManager } from './CandidatoOverridesManager';
 import { WorkerManager } from './WorkerManager';
+import { ConfiguracionNacional } from './ConfiguracionNacional';
+import { BancasPreviasManager } from './BancasPreviasManager';
+import { OrdenDiputadosNacionalesManager } from './OrdenDiputadosNacionalesManager';
+import { OrdenSenadoresNacionalesManager } from './OrdenSenadoresNacionalesManager';
+//import { BancasProvincialesManager } from './BancasProvincialesManager';
+//import { BancasNacionalesManager } from './BancasNacionalesManager';
+
 
 export const DashboardPage = () => {
     const { logout } = useAuth();
 
+    const sectionStyle = {
+        border: '1px solid #dee2e6',
+        borderRadius: '8px',
+        padding: '1.5rem',
+        marginBottom: '2rem',
+        backgroundColor: '#f8f9fa'
+    };
+
+    const sectionTitleStyle = {
+        marginTop: 0,
+        borderBottom: '2px solid #007bff',
+        paddingBottom: '0.5rem',
+        marginBottom: '1.5rem',
+        color: '#007bff'
+    };
+
     return (
         <div style={{ padding: '1rem 2rem' }}>
-            <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '2px solid #eee', paddingBottom: '1rem' }}>
+            <header style={{ /* ... */ }}>
                 <h1>Panel de Administración Electoral</h1>
                 <button onClick={logout}>Cerrar Sesión</button>
             </header>
+            
             <main style={{ marginTop: '2rem' }}>
-                <AgrupacionesManager />
-                    <div style={{ flex: '1 1 800px' }}>
-                        <LogoOverridesManager />
-                    </div>
-                    <div style={{ flex: '1 1 800px' }}>
-                        <CandidatoOverridesManager />
-                    </div>
-                <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', marginTop: '2rem' }}>
-                    <div style={{ flex: '1 1 400px' }}>
-                        <OrdenDiputadosManager />
-                    </div>
-                    <div style={{ flex: '1 1 400px' }}>
-                        <OrdenSenadoresManager />
-                    </div>
+
+                <div style={sectionStyle}>
+                    <h2 style={sectionTitleStyle}>Configuración Global</h2>
+                    <AgrupacionesManager />
+                    <LogoOverridesManager />
+                    <CandidatoOverridesManager />
+                </div>
+                
+                <div style={sectionStyle}>
+                    <h2 style={sectionTitleStyle}>Gestión de Elecciones Nacionales</h2>
+                    <ConfiguracionNacional />
+                    <BancasPreviasManager />
+                    <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', marginTop: '2rem' }}>
+                        <div style={{ flex: '1 1 400px' }}>
+                            <OrdenDiputadosNacionalesManager />
+                        </div>
+                        <div style={{ flex: '1 1 400px' }}>
+                            <OrdenSenadoresNacionalesManager />
+                        </div>
+                    </div>                    
+                   {/* <BancasNacionalesManager /> */}
+                </div>
+                
+                {/*
+                <div style={sectionStyle}>
+                    <h2 style={sectionTitleStyle}>Gestión de Elecciones Provinciales</h2>
+                    <ConfiguracionGeneral />
+                    <BancasProvincialesManager />
+                    <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', marginTop: '2rem' }}>
+                        <div style={{ flex: '1 1 400px' }}>
+                            <OrdenDiputadosManager />
+                        </div>
+                        <div style={{ flex: '1 1 400px' }}>
+                            <OrdenSenadoresManager />
+                        </div>
+                    </div>
+                </div>*/}
+
+                <div style={sectionStyle}>
+                    <h2 style={sectionTitleStyle}>Gestión de Workers y Sistema</h2>
+                    <WorkerManager />
                 </div>
-                <ConfiguracionGeneral />
-                <BancasManager />
-                <hr style={{ margin: '2rem 0' }}/>
-                <WorkerManager />
             </main>
         </div>
     );