Feats y Fixs Varios

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

@@ -4,7 +4,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { getBancadas, getAgrupaciones, updateBancada, type UpdateBancadaData } from '../services/apiService';
 import type { Bancada, AgrupacionPolitica } from '../types';
 import { OcupantesModal } from './OcupantesModal';
-import './AgrupacionesManager.css'; // Asegúrate de que este CSS tenga los estilos de .chamber-tabs
+import './AgrupacionesManager.css';
 
 const camaras = ['diputados', 'senadores'] as const;
 
@@ -14,13 +14,11 @@ export const BancasManager = () => {
   const [bancadaSeleccionada, setBancadaSeleccionada] = useState<Bancada | null>(null);
   const queryClient = useQueryClient();
 
-  // Obtenemos todas las agrupaciones para poblar el <select>
   const { data: agrupaciones = [] } = useQuery<AgrupacionPolitica[]>({
     queryKey: ['agrupaciones'],
     queryFn: getAgrupaciones
   });
 
-  // Obtenemos las bancas para la cámara activa (diputados o senadores)
   const { data: bancadas = [], isLoading, error } = useQuery<Bancada[]>({
     queryKey: ['bancadas', activeTab],
     queryFn: () => getBancadas(activeTab),
@@ -40,10 +38,9 @@ export const BancasManager = () => {
 
     try {
       await updateBancada(bancadaId, payload);
-      // Invalida la query para forzar una recarga de datos frescos desde el servidor
       queryClient.invalidateQueries({ queryKey: ['bancadas', activeTab] });
     } catch (err) {
-      alert("Error al guardar el cambio.");
+      alert("Error al guardar el cambio de agrupación.");
     }
   };
 
@@ -57,8 +54,8 @@ export const BancasManager = () => {
   return (
     <div className="admin-module">
       <h2>Gestión de Ocupación de Bancas</h2>
-      <p>Asigne a cada banca un partido político y, opcionalmente, los datos de la persona que la ocupa.</p>
-      
+      <p>Asigne a cada banca física un partido político y, opcionalmente, los datos de la persona que la ocupa.</p>
+
       <div className="chamber-tabs">
         {camaras.map(camara => (
           <button
@@ -75,16 +72,25 @@ export const BancasManager = () => {
         <table>
           <thead>
             <tr>
-              <th>Banca #</th>
-              <th>Partido Asignado</th>
-              <th>Ocupante Actual</th>
-              <th>Acciones</th>
+              <th style={{ width: '15%' }}>Banca #</th>
+              <th style={{ width: '35%' }}>Partido Asignado</th>
+              <th style={{ width: '30%' }}>Ocupante Actual</th>
+              <th style={{ width: '20%' }}>Acciones</th>
             </tr>
           </thead>
           <tbody>
-            {bancadas.map((bancada, index) => (
+            {bancadas.map((bancada) => (
               <tr key={bancada.id}>
-                <td>{`${activeTab.charAt(0).toUpperCase()}-${index + 1}`}</td>
+                {/* Usamos el NumeroBanca para la etiqueta visual */}
+                <td>
+                  {`${activeTab.charAt(0).toUpperCase()}-${bancada.numeroBanca}`}
+                  {((activeTab === 'diputados' && bancada.numeroBanca === 92) ||
+                    (activeTab === 'senadores' && bancada.numeroBanca === 46)) && (
+                      <span style={{ marginLeft: '8px', fontSize: '0.8em', color: '#666', fontStyle: 'italic' }}>
+                        (Presidencia)
+                      </span>
+                    )}
+                </td>
                 <td>
                   <select
                     value={bancada.agrupacionPoliticaId || ''}
@@ -97,6 +103,7 @@ export const BancasManager = () => {
                 <td>{bancada.ocupante?.nombreOcupante || 'Sin asignar'}</td>
                 <td>
                   <button
+                    // El botón se habilita solo si hay un partido asignado a la banca
                     disabled={!bancada.agrupacionPoliticaId}
                     onClick={() => handleOpenModal(bancada)}
                   >

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

@@ -15,10 +15,8 @@ export const DashboardPage = () => {
                 <h1>Panel de Administración Electoral</h1>
                 <button onClick={logout}>Cerrar Sesión</button>
             </header>
-            <main style={{ marginTop: '2rem' }}>
-                <ConfiguracionGeneral />                
+            <main style={{ marginTop: '2rem' }}>   
                 <AgrupacionesManager />
-                
                 <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', marginTop: '2rem' }}>
                     <div style={{ flex: '1 1 400px' }}>
                         <OrdenDiputadosManager />
@@ -27,6 +25,7 @@ export const DashboardPage = () => {
                         <OrdenSenadoresManager />
                     </div>
                 </div>
+                <ConfiguracionGeneral /> 
                 <BancasManager />
             </main>
         </div>

Elecciones-Web/frontend-admin/src/types/index.ts

@@ -36,6 +36,7 @@ export interface OcupanteBanca {
 export interface Bancada {
   id: number;
   camara: TipoCamaraValue;
+  numeroBanca: number;
   agrupacionPoliticaId: string | null;
   agrupacionPolitica: AgrupacionPolitica | null;
   ocupante: OcupanteBanca | null;