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

2025-07-03 11:44:10 -03:00
parent ab9e77fa81
commit 93b2887bd5
49 changed files with 1610 additions and 356 deletions
--- a/frontend/src/components/MervalHeroCard.tsx
+++ b/frontend/src/components/MervalHeroCard.tsx
@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import { Box, Paper, Typography, ToggleButton, ToggleButtonGroup, CircularProgress, Alert } from '@mui/material';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import RemoveIcon from '@mui/icons-material/Remove';
+
+import type { CotizacionBolsa } from '../models/mercadoModels';
+import { formatInteger, formatCurrency } from '../utils/formatters'; // <-- CORREGIDO: necesitamos formatCurrency
+import { HistoricalChartWidget } from './HistoricalChartWidget';
+import { useApiData } from '../hooks/useApiData';
+
+// --- V SUB-COMPONENTE AÑADIDO V ---
+const VariacionMerval = ({ actual, anterior }: { actual: number, anterior: number }) => {
+    if (anterior === 0) return null; // Evitar división por cero
+    const variacionPuntos = actual - anterior;
+    const variacionPorcentaje = (variacionPuntos / anterior) * 100;
+
+    const isPositive = variacionPuntos > 0;
+    const isNegative = variacionPuntos < 0;
+    const color = isPositive ? 'success.main' : isNegative ? 'error.main' : 'text.secondary';
+    const Icon = isPositive ? ArrowUpwardIcon : isNegative ? ArrowDownwardIcon : RemoveIcon;
+
+    return (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, color }}>
+            <Icon sx={{ fontSize: '2rem' }} />
+            <Box>
+                <Typography component="span" sx={{ fontWeight: 'bold', fontSize: '1.2rem', display: 'block' }}>
+                    {formatCurrency(variacionPuntos)}
+                </Typography>
+                <Typography component="span" sx={{ fontWeight: 'bold', fontSize: '1.2rem' }}>
+                    ({variacionPorcentaje.toFixed(2)}%)
+                </Typography>
+            </Box>
+        </Box>
+    );
+};
+// --- ^ SUB-COMPONENTE AÑADIDO ^ ---
+
+export const MervalHeroCard = () => {
+    const { data: allLocalData, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local');
+    const [dias, setDias] = useState<number>(30);
+
+    const handleRangoChange = ( _event: React.MouseEvent<HTMLElement>, nuevoRango: number | null ) => {
+        if (nuevoRango !== null) { setDias(nuevoRango); }
+    };
+    
+    const mervalData = allLocalData?.find(d => d.ticker === '^MERV');
+
+    if (loading) { return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>; }
+    if (error) { return <Alert severity="error">{error}</Alert>; }
+    if (!mervalData) { return <Alert severity="info">No se encontraron datos para el índice MERVAL.</Alert>; }
+
+    return (
+        <Paper elevation={3} sx={{ p: 2, mb: 3 }}>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
+                <Box>
+                    <Typography variant="h5" component="h2" sx={{ fontWeight: 'bold' }}>Índice S&P MERVAL</Typography>
+                    <Typography variant="h3" component="p" sx={{ fontWeight: 'bold', mt:1 }}>{formatInteger(mervalData.precioActual)}</Typography>
+                </Box>
+                <Box sx={{ pt: 2 }}>
+                    {/* Ahora sí encontrará el componente */}
+                    <VariacionMerval actual={mervalData.precioActual} anterior={mervalData.cierreAnterior} />
+                </Box>
+            </Box>
+            <Box sx={{ mt: 2 }}>
+                <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 1 }}>
+                    <ToggleButtonGroup value={dias} exclusive onChange={handleRangoChange} size="small">
+                        <ToggleButton value={7}>Semanal</ToggleButton>
+                        <ToggleButton value={30}>Mensual</ToggleButton>
+                        <ToggleButton value={365}>Anual</ToggleButton>
+                    </ToggleButtonGroup>
+                </Box>
+                <HistoricalChartWidget ticker={mervalData.ticker} mercado="Local" dias={dias} />
+            </Box>
+        </Paper>
+    );
+};