Fix Holidays Frontend

frontend/src/components/BolsaLocalWidget.tsx

@@ -1,4 +1,3 @@
-// Importaciones de React y Material-UI
 import React, { useState, useRef } from 'react';
 import {
   Box, CircularProgress, Alert, Table, TableBody, TableCell, TableContainer,
@@ -11,7 +10,7 @@ import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import RemoveIcon from '@mui/icons-material/Remove';
 import { PiChartLineUpBold } from 'react-icons/pi';
 
-// Importaciones de nuestros modelos, hooks y utilidades
+// Importaciones de nuestro proyecto
 import type { CotizacionBolsa } from '../models/mercadoModels';
 import { useApiData } from '../hooks/useApiData';
 import { useIsHoliday } from '../hooks/useIsHoliday';
@@ -34,79 +33,13 @@ const Variacion = ({ value }: { value: number }) => {
 };
 
 /**
- * Sub-componente que renderiza la tabla de acciones detalladas.
- * Se extrae para mantener el componente principal más limpio.
- */
-const RenderContent = ({ data, handleOpenModal }: { 
-    data: CotizacionBolsa[], 
-    handleOpenModal: (ticker: string, event: React.MouseEvent<HTMLButtonElement>) => void, 
-}) => {
-  // Filtramos para obtener solo las acciones, excluyendo el índice.
-  const panelPrincipal = data.filter(d => d.ticker !== '^MERV');
-  
-  if (panelPrincipal.length === 0) {
-      return <Alert severity="info">No hay acciones líderes para mostrar en este momento.</Alert>;
-  }
-
-  return (
-    <TableContainer component={Paper}>
-      <Box sx={{ p: 1, m: 0 }}>
-        <Typography variant="caption" sx={{ fontStyle: 'italic', color: 'text.secondary' }}>
-          Última actualización de acciones: {formatFullDateTime(panelPrincipal[0].fechaRegistro)}
-        </Typography>
-      </Box>
-      <Table size="small" aria-label="panel principal merval">
-        <TableHead>
-          <TableRow>
-            <TableCell>Símbolo</TableCell>
-            <TableCell align="right">Precio Actual</TableCell>
-            <TableCell align="right" sx={{ display: { xs: 'none', md: 'table-cell' } }}>Apertura</TableCell>
-            <TableCell align="right" sx={{ display: { xs: 'none', sm: 'table-cell' } }}>Cierre Anterior</TableCell>
-            <TableCell align="center">% Cambio</TableCell>
-            <TableCell align="center">Historial</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {panelPrincipal.map((row) => (
-            <TableRow key={row.ticker} hover>
-              <TableCell component="th" scope="row"><Typography variant="body2" sx={{ fontWeight: 'bold' }}>{row.ticker}</Typography></TableCell>
-              <TableCell align="right">${formatCurrency(row.precioActual)}</TableCell>
-              <TableCell align="right" sx={{ display: { xs: 'none', md: 'table-cell' } }}>${formatCurrency(row.apertura)}</TableCell>
-              <TableCell align="right" sx={{ display: { xs: 'none', sm: 'table-cell' } }}>${formatCurrency(row.cierreAnterior)}</TableCell>
-              <TableCell align="center"><Variacion value={row.porcentajeCambio} /></TableCell>
-              <TableCell align="center">
-                <IconButton
-                  aria-label={`ver historial de ${row.ticker}`}
-                  size="small"
-                  onClick={(event) => handleOpenModal(row.ticker, event)}
-                  sx={{
-                    boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
-                    transition: 'all 0.2s ease-in-out',
-                    '&:hover': { transform: 'scale(1.1)', boxShadow: '0 2px 6px rgba(0,0,0,0.2)' }
-                  }}
-                >
-                  <PiChartLineUpBold size="18" />
-                </IconButton>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
-};
-
-
-/**
- * Widget principal para la sección "Bolsa Local".
- * Muestra una tarjeta de héroe para el MERVAL y una tabla detallada para las acciones líderes.
+ * Widget autónomo para la tabla de acciones líderes locales (Panel Merval).
  */
 export const BolsaLocalWidget = () => {
-  // Hooks para obtener los datos y el estado de feriado. Las llamadas se disparan en paralelo.
+  // Este widget obtiene todos los datos del mercado local y luego los filtra.
   const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local');
   const isHoliday = useIsHoliday('BA');
   
-  // Estado y referencia para manejar el modal del gráfico.
   const [selectedTicker, setSelectedTicker] = useState<string | null>(null);
   const triggerButtonRef = useRef<HTMLButtonElement | null>(null);
 
@@ -117,14 +50,14 @@ export const BolsaLocalWidget = () => {
   
   const handleCloseDialog = () => {
     setSelectedTicker(null);
-    // Devuelve el foco al botón que abrió el modal para mejorar la accesibilidad.
     setTimeout(() => {
       triggerButtonRef.current?.focus();
     }, 0);
   };
   
-  // Estado de carga unificado: el componente está "cargando" si los datos principales
-  // o la información del feriado todavía no han llegado.
+  // Filtramos para obtener solo las acciones, excluyendo el índice.
+  const panelPrincipal = data?.filter(d => d.ticker !== '^MERV') || [];
+
   const isLoading = dataLoading || isHoliday === null;
 
   if (isLoading) {
@@ -135,31 +68,69 @@ export const BolsaLocalWidget = () => {
     return <Alert severity="error">{dataError}</Alert>;
   }
   
-  // Si no hay ningún dato en absoluto, mostramos un mensaje final.
-  if (!data || data.length === 0) {
-      // Si sabemos que es feriado, la alerta de feriado tiene prioridad.
+  // Si después de filtrar no queda ninguna acción, mostramos el mensaje apropiado.
+  if (panelPrincipal.length === 0) {
+      // Si sabemos que es feriado, la alerta de feriado es el mensaje más relevante.
       if (isHoliday) {
           return <HolidayAlert />;
       }
-      return <Alert severity="info">No hay datos disponibles para el mercado local.</Alert>;
+      return <Alert severity="info">No hay acciones líderes disponibles para mostrar.</Alert>;
   }
 
   return (
-    <>
-      {/* Si es feriado, mostramos la alerta informativa en la parte superior. */}
+    <Box>
+      {/* La alerta de feriado también se aplica a esta tabla. */}
       {isHoliday && (
         <Box sx={{ mb: 2 }}>
           <HolidayAlert />
         </Box>
       )}
 
-      {/* La tabla de acciones detalladas se muestra siempre que haya datos para ella. */}
-      <RenderContent 
-        data={data} 
-        handleOpenModal={handleOpenModal}
-      />
+      <TableContainer component={Paper}>
+        <Box sx={{ p: 1, m: 0 }}>
+          <Typography variant="caption" sx={{ fontStyle: 'italic', color: 'text.secondary' }}>
+            Última actualización de acciones: {formatFullDateTime(panelPrincipal[0].fechaRegistro)}
+          </Typography>
+        </Box>
+        <Table size="small" aria-label="panel principal merval">
+          <TableHead>
+            <TableRow>
+              <TableCell>Símbolo</TableCell>
+              <TableCell align="right">Precio Actual</TableCell>
+              <TableCell align="right" sx={{ display: { xs: 'none', md: 'table-cell' } }}>Apertura</TableCell>
+              <TableCell align="right" sx={{ display: { xs: 'none', sm: 'table-cell' } }}>Cierre Anterior</TableCell>
+              <TableCell align="center">% Cambio</TableCell>
+              <TableCell align="center">Historial</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {panelPrincipal.map((row) => (
+              <TableRow key={row.ticker} hover>
+                <TableCell component="th" scope="row"><Typography variant="body2" sx={{ fontWeight: 'bold' }}>{row.ticker}</Typography></TableCell>
+                <TableCell align="right">${formatCurrency(row.precioActual)}</TableCell>
+                <TableCell align="right" sx={{ display: { xs: 'none', md: 'table-cell' } }}>${formatCurrency(row.apertura)}</TableCell>
+                <TableCell align="right" sx={{ display: { xs: 'none', sm: 'table-cell' } }}>${formatCurrency(row.cierreAnterior)}</TableCell>
+                <TableCell align="center"><Variacion value={row.porcentajeCambio} /></TableCell>
+                <TableCell align="center">
+                  <IconButton
+                    aria-label={`ver historial de ${row.ticker}`}
+                    size="small"
+                    onClick={(event) => handleOpenModal(row.ticker, event)}
+                    sx={{
+                      boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+                      transition: 'all 0.2s ease-in-out',
+                      '&:hover': { transform: 'scale(1.1)', boxShadow: '0 2px 6px rgba(0,0,0,0.2)' }
+                    }}
+                  >
+                    <PiChartLineUpBold size="18" />
+                  </IconButton>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
 
-      {/* El Dialog para mostrar el gráfico histórico. */}
       <Dialog
         open={Boolean(selectedTicker)}
         onClose={handleCloseDialog}
@@ -186,6 +157,6 @@ export const BolsaLocalWidget = () => {
           {selectedTicker && <HistoricalChartWidget ticker={selectedTicker} mercado="Local" dias={30} />}
         </DialogContent>
       </Dialog>
-    </>
+    </Box>
   );
 };