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,21 +33,59 @@ const Variacion = ({ value }: { value: number }) => {
 };
 
 /**
- * Sub-componente que renderiza la tabla de acciones detalladas.
+ * Widget autónomo para la tabla de acciones líderes locales (Panel Merval).
- * Se extrae para mantener el componente principal más limpio.
  */
-const RenderContent = ({ data, handleOpenModal }: { 
+export const BolsaLocalWidget = () => {
-    data: CotizacionBolsa[], 
+  // Este widget obtiene todos los datos del mercado local y luego los filtra.
-    handleOpenModal: (ticker: string, event: React.MouseEvent<HTMLButtonElement>) => void, 
+  const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local');
-}) => {
+  const isHoliday = useIsHoliday('BA');
-  // Filtramos para obtener solo las acciones, excluyendo el índice.
-  const panelPrincipal = data.filter(d => d.ticker !== '^MERV');
   
+  const [selectedTicker, setSelectedTicker] = useState<string | null>(null);
+  const triggerButtonRef = useRef<HTMLButtonElement | null>(null);
+
+  const handleOpenModal = (ticker: string, event: React.MouseEvent<HTMLButtonElement>) => {
+    triggerButtonRef.current = event.currentTarget;
+    setSelectedTicker(ticker);
+  };
+  
+  const handleCloseDialog = () => {
+    setSelectedTicker(null);
+    setTimeout(() => {
+      triggerButtonRef.current?.focus();
+    }, 0);
+  };
+  
+  // Filtramos para obtener solo las acciones, excluyendo el índice.
+  const panelPrincipal = data?.filter(d => d.ticker !== '^MERV') || [];
+
+  const isLoading = dataLoading || isHoliday === null;
+
+  if (isLoading) {
+    return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
+  }
+
+  if (dataError) {
+    return <Alert severity="error">{dataError}</Alert>;
+  }
+  
+  // Si después de filtrar no queda ninguna acción, mostramos el mensaje apropiado.
   if (panelPrincipal.length === 0) {
-      return <Alert severity="info">No hay acciones líderes para mostrar en este momento.</Alert>;
+      // 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 acciones líderes disponibles para mostrar.</Alert>;
   }
 
   return (
+    <Box>
+      {/* La alerta de feriado también se aplica a esta tabla. */}
+      {isHoliday && (
+        <Box sx={{ mb: 2 }}>
+          <HolidayAlert />
+        </Box>
+      )}
+
       <TableContainer component={Paper}>
         <Box sx={{ p: 1, m: 0 }}>
           <Typography variant="caption" sx={{ fontStyle: 'italic', color: 'text.secondary' }}>
@@ -93,73 +130,7 @@ const RenderContent = ({ data, handleOpenModal }: {
           </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.
- */
-export const BolsaLocalWidget = () => {
-  // Hooks para obtener los datos y el estado de feriado. Las llamadas se disparan en paralelo.
-  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);
-
-  const handleOpenModal = (ticker: string, event: React.MouseEvent<HTMLButtonElement>) => {
-    triggerButtonRef.current = event.currentTarget;
-    setSelectedTicker(ticker);
-  };
-  
-  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.
-  const isLoading = dataLoading || isHoliday === null;
-
-  if (isLoading) {
-    return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
-  }
-
-  if (dataError) {
-    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.
-      if (isHoliday) {
-          return <HolidayAlert />;
-      }
-      return <Alert severity="info">No hay datos disponibles para el mercado local.</Alert>;
-  }
-
-  return (
-    <>
-      {/* Si es feriado, mostramos la alerta informativa en la parte superior. */}
-      {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}
-      />
-
-      {/* 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>
   );
 };

frontend/src/components/MervalHeroCard.tsx

@@ -5,12 +5,17 @@ import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import RemoveIcon from '@mui/icons-material/Remove';
 
 import type { CotizacionBolsa } from '../models/mercadoModels';
-import { formatCurrency, formatCurrency2Decimal } from '../utils/formatters';
+import { formatCurrency2Decimal, formatCurrency } from '../utils/formatters';
 import { HistoricalChartWidget } from './HistoricalChartWidget';
 import { useApiData } from '../hooks/useApiData';
+import { useIsHoliday } from '../hooks/useIsHoliday'; // <-- Importamos el hook
+import { HolidayAlert } from './common/HolidayAlert';   // <-- Importamos la alerta
 
+/**
+ * Sub-componente para la variación del índice.
+ */
 const VariacionMerval = ({ actual, anterior }: { actual: number, anterior: number }) => {
-    if (anterior === 0) return null; // Evitar división por cero
+    if (anterior === 0) return null;
     const variacionPuntos = actual - anterior;
     const variacionPorcentaje = (variacionPuntos / anterior) * 100;
 
@@ -34,22 +39,58 @@ const VariacionMerval = ({ actual, anterior }: { actual: number, anterior: numbe
     );
 };
 
+/**
+ * Widget autónomo para la tarjeta de héroe del S&P Merval.
+ */
 export const MervalHeroCard = () => {
-    const { data: allLocalData, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local');
+    // Cada widget gestiona sus propias llamadas a la API
+    const { data: allLocalData, loading: dataLoading, error: dataError } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local');
+    const isHoliday = useIsHoliday('BA');
+    
+    // Estado interno para el gráfico
     const [dias, setDias] = useState<number>(30);
 
     const handleRangoChange = ( _event: React.MouseEvent<HTMLElement>, nuevoRango: number | null ) => {
         if (nuevoRango !== null) { setDias(nuevoRango); }
     };
     
+    // Filtramos el dato específico que este widget necesita
     const mervalData = allLocalData?.find(d => d.ticker === '^MERV');
     
-    if (loading) { return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>; }
+    // --- LÓGICA DE RENDERIZADO CORREGIDA ---
-    if (error) { return <Alert severity="error">{error}</Alert>; }
-    if (!mervalData) { return <Alert severity="info">No se encontraron datos para el índice MERVAL.</Alert>; }
     
+    // El estado de carga depende de AMBAS llamadas a la API.
+    const isLoading = dataLoading || isHoliday === null;
+
+    if (isLoading) {
+        return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4, height: '288px' }}><CircularProgress /></Box>;
+    }
+
+    if (dataError) {
+        return <Alert severity="error">{dataError}</Alert>;
+    }
+
+    // Si no hay datos del Merval, es un estado final.
+    if (!mervalData) {
+        // Si no hay datos PERO sabemos que es feriado, la alerta de feriado es más informativa.
+        if (isHoliday) {
+            return <HolidayAlert />;
+        }
+        return <Alert severity="info">No se encontraron datos para el índice MERVAL.</Alert>;
+    }
+
+    // Si llegamos aquí, SÍ tenemos datos para mostrar.
     return (
-        <Paper elevation={3} sx={{ p: 2, mb: 3 }}>
+        <Box>
+            {/* Si es feriado, mostramos la alerta como un AVISO encima del contenido. */}
+            {isHoliday && (
+                <Box sx={{ mb: 2 }}>
+                    <HolidayAlert />
+                </Box>
+            )}
+
+            {/* El contenido principal del widget siempre se muestra si hay datos. */}
+            <Paper elevation={3} sx={{ p: 2 }}>
                 <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
                     <Box>
                         <Typography variant="h6" component="h2" sx={{ fontWeight: 'bold' }}>Índice S&P MERVAL</Typography>
@@ -70,5 +111,6 @@ export const MervalHeroCard = () => {
                     <HistoricalChartWidget ticker={mervalData.ticker} mercado="Local" dias={dias} />
                 </Box>
             </Paper>
+        </Box>
     );
 };

src/Mercados.Infrastructure/DataFetchers/HolidayDataFetcher.cs

@@ -46,7 +46,7 @@ namespace Mercados.Infrastructure.DataFetchers
 
         public async Task<(bool Success, string Message)> FetchDataAsync()
         {
-            _logger.LogInformation("Iniciando actualización de feriados desde Finnhub.");
+            _logger.LogInformation("Iniciando actualización de feriados.");
             var apiKey = _configuration["ApiKeys:Finnhub"];
             if (string.IsNullOrEmpty(apiKey)) return (false, "API Key de Finnhub no configurada.");