feat: Add visual summary cards for Agro/Grains and implement 24h time format

frontend/src/components/BolsaUsaWidget.tsx

@@ -1,36 +1,44 @@
+import { useState } from 'react';
 import {
-  Box, CircularProgress, Alert, Table, TableBody, TableCell,
-  TableContainer, TableHead, TableRow, Paper, Typography, Tooltip
+  Box, CircularProgress, Alert, Table, TableBody, TableCell, TableContainer,
+  TableHead, TableRow, Paper, Typography, Dialog, DialogTitle,
+  DialogContent, IconButton
 } from '@mui/material';
-import type { CotizacionBolsa } from '../models/mercadoModels';
-import { useApiData } from '../hooks/useApiData';
+import CloseIcon from '@mui/icons-material/Close';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import RemoveIcon from '@mui/icons-material/Remove';
+import { formatFullDateTime } from '../utils/formatters';
+import type { CotizacionBolsa } from '../models/mercadoModels';
+import { useApiData } from '../hooks/useApiData';
+import { HistoricalChartWidget } from './HistoricalChartWidget';
 
-const formatNumber = (num: number) => {
-  return new Intl.NumberFormat('en-US', { // Usamos formato de EEUU
-    style: 'currency',
-    currency: 'USD',
-  }).format(num);
-};
+// Usamos el formato de EEUU para los precios en dólares
+const formatCurrency = (num: number) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(num);
+const formatPercentage = (num: number) => num.toFixed(2);
 
 const Variacion = ({ value }: { value: number }) => {
   const color = value > 0 ? 'success.main' : value < 0 ? 'error.main' : 'text.secondary';
   const Icon = value > 0 ? ArrowUpwardIcon : value < 0 ? ArrowDownwardIcon : RemoveIcon;
-
   return (
     <Box component="span" sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color }}>
       <Icon sx={{ fontSize: '1rem', mr: 0.5 }} />
-      <Typography variant="body2" component="span" sx={{ fontWeight: 'bold' }}>
-        {value.toFixed(2)}%
-      </Typography>
+      <Typography variant="body2" component="span" sx={{ fontWeight: 'bold' }}>{formatPercentage(value)}%</Typography>
     </Box>
   );
 };
 
 export const BolsaUsaWidget = () => {
   const { data, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/eeuu');
+  const [selectedTicker, setSelectedTicker] = useState<string | null>(null);
+
+  const handleRowClick = (ticker: string) => {
+    setSelectedTicker(ticker);
+  };
+
+  const handleCloseDialog = () => {
+    setSelectedTicker(null);
+  };
 
   if (loading) {
     return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
@@ -40,43 +48,58 @@ export const BolsaUsaWidget = () => {
     return <Alert severity="error">{error}</Alert>;
   }
 
+  // Recordatorio de que el fetcher puede estar desactivado
   if (!data || data.length === 0) {
-    return <Alert severity="info">No hay datos disponibles para el mercado de EEUU. (El fetcher puede estar desactivado)</Alert>;
+    return <Alert severity="info">No hay datos disponibles para el mercado de EEUU. (El fetcher podría estar desactivado en el Worker).</Alert>;
   }
 
   return (
-    <TableContainer component={Paper}>
-      <Table size="small" aria-label="tabla bolsa eeuu">
-        <TableHead>
-          <TableRow>
-            <TableCell>Símbolo</TableCell>
-            <TableCell align="right">Precio Actual</TableCell>
-            <TableCell align="right">Apertura</TableCell>
-            <TableCell align="right">Cierre Anterior</TableCell>
-            <TableCell align="center">% Cambio</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {data.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">{formatNumber(row.precioActual)}</TableCell>
-              <TableCell align="right">{formatNumber(row.apertura)}</TableCell>
-              <TableCell align="right">{formatNumber(row.cierreAnterior)}</TableCell>
-              <TableCell align="center">
-                <Variacion value={row.porcentajeCambio} />
-              </TableCell>
+    <>
+      <TableContainer component={Paper}>
+        <Box sx={{ p: 1, pb: 0 }}>
+          <Typography variant="caption" sx={{ fontStyle: 'italic', color: 'text.secondary' }}>
+            Última actualización: {formatFullDateTime(data[0].fechaRegistro)}
+          </Typography>
+        </Box>
+        <Table size="small" aria-label="tabla bolsa eeuu">
+          <TableHead>
+            <TableRow>
+              <TableCell>Símbolo</TableCell>
+              <TableCell align="right">Precio Actual</TableCell>
+              <TableCell align="right">Apertura</TableCell>
+              <TableCell align="right">Cierre Anterior</TableCell>
+              <TableCell align="center">% Cambio</TableCell>
             </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-      <Tooltip title={`Última actualización: ${new Date(data[0].fechaRegistro).toLocaleString('es-AR')}`}>
-        <Typography variant="caption" sx={{ p: 1, display: 'block', textAlign: 'right', color: 'text.secondary' }}>
-          Fuente: Finnhub
-        </Typography>
-      </Tooltip>
-    </TableContainer>
+          </TableHead>
+          <TableBody>
+            {data.map((row) => (
+              <TableRow key={row.ticker} hover sx={{ cursor: 'pointer' }} onClick={() => handleRowClick(row.ticker)}>
+                <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">{formatCurrency(row.apertura)}</TableCell>
+                <TableCell align="right">{formatCurrency(row.cierreAnterior)}</TableCell>
+                <TableCell align="center"><Variacion value={row.porcentajeCambio} /></TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      <Dialog open={Boolean(selectedTicker)} onClose={handleCloseDialog} maxWidth="md" fullWidth>
+        <DialogTitle sx={{ m: 0, p: 2 }}>
+          Historial de 30 días para: {selectedTicker}
+          <IconButton
+            aria-label="close"
+            onClick={handleCloseDialog}
+            sx={{ position: 'absolute', right: 8, top: 8, color: (theme) => theme.palette.grey[500] }}
+          >
+            <CloseIcon />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent dividers>
+          {selectedTicker && <HistoricalChartWidget ticker={selectedTicker} mercado="EEUU" />}
+        </DialogContent>
+      </Dialog>
+    </>
   );
 };