feat: adaptación de los proyectos para utilizar .env y comienzo de preparación para despliegue en docker

frontend/src/components/BolsaUsaWidget.tsx

@@ -8,14 +8,11 @@ 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 { formatFullDateTime, formatCurrency } from '../utils/formatters';
 import type { CotizacionBolsa } from '../models/mercadoModels';
 import { useApiData } from '../hooks/useApiData';
 import { HistoricalChartWidget } from './HistoricalChartWidget';
-
-// 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);
+import { PiChartLineUpBold } from 'react-icons/pi';
 
 const Variacion = ({ value }: { value: number }) => {
   const color = value > 0 ? 'success.main' : value < 0 ? 'error.main' : 'text.secondary';
@@ -23,7 +20,7 @@ const Variacion = ({ value }: { value: number }) => {
   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' }}>{formatPercentage(value)}%</Typography>
+      <Typography variant="body2" component="span" sx={{ fontWeight: 'bold' }}>{value.toFixed(2)}%</Typography>
     </Box>
   );
 };
@@ -32,13 +29,10 @@ 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 handleRowClick = (ticker: string) => setSelectedTicker(ticker);
+  const handleCloseDialog = () => setSelectedTicker(null);
 
-  const handleCloseDialog = () => {
-    setSelectedTicker(null);
-  };
+  const otherStocks = data?.filter(d => d.ticker !== '^GSPC') || [];
 
   if (loading) {
     return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
@@ -48,56 +42,64 @@ 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 podría estar desactivado en el Worker).</Alert>;
+    return <Alert severity="info">No hay datos disponibles para el mercado de EEUU.</Alert>;
   }
 
   return (
     <>
-      <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>
-          </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>
+      {/* Renderizamos la tabla solo si hay otras acciones */}
+      {otherStocks.length > 0 && (
+        <TableContainer component={Paper}>
+          <Box sx={{ p: 1, m: 0 }}>
+            <Typography variant="caption" sx={{ fontStyle: 'italic', color: 'text.secondary' }}>
+              Última actualización de acciones: {formatFullDateTime(otherStocks[0].fechaRegistro)}
+            </Typography>
+          </Box>
+          <Table size="small" aria-label="panel principal eeuu">
+            <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>
 
-      <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>
+                <TableCell align="center">% Cambio</TableCell>
+                <TableCell align="center">Historial</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {otherStocks.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, 'USD')}</TableCell>
+                  
+                  <TableCell align="right" sx={{ display: { xs: 'none', md: 'table-cell' } }}>{formatCurrency(row.apertura, 'USD')}</TableCell>
+                  <TableCell align="right" sx={{ display: { xs: 'none', sm: 'table-cell' } }}>{formatCurrency(row.cierreAnterior, 'USD')}</TableCell>
+                  
+                  <TableCell align="center"><Variacion value={row.porcentajeCambio} /></TableCell>
+                  <TableCell align="center">
+                    <IconButton
+                      aria-label={`ver historial de ${row.ticker}`} size="small"
+                      onClick={() => handleRowClick(row.ticker)}
+                      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>
+      )}
+
+      <Dialog open={Boolean(selectedTicker)} onClose={handleCloseDialog} maxWidth="md" fullWidth sx={{ '& .MuiDialog-paper': { overflow: 'visible' } }}>
+        <IconButton aria-label="close" onClick={handleCloseDialog} sx={{ position: 'absolute', top: -15, right: -15, color: (theme) => theme.palette.grey[500], backgroundColor: 'white', boxShadow: 3, '&:hover': { backgroundColor: 'grey.100' }, }}>
+          <CloseIcon />
+        </IconButton>
+        <DialogTitle sx={{ m: 0, p: 2 }}>Historial de 30 días para: {selectedTicker}</DialogTitle>
         <DialogContent dividers>
-          {selectedTicker && <HistoricalChartWidget ticker={selectedTicker} mercado="EEUU" />}
+          {selectedTicker && <HistoricalChartWidget ticker={selectedTicker} mercado="EEUU" dias={30} />}
         </DialogContent>
       </Dialog>
     </>