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

frontend/src/components/MercadoAgroCardWidget.tsx

@@ -1,39 +1,75 @@
-import { Box, CircularProgress, Alert, Paper, Typography } from '@mui/material';
-import { PiCow } from "react-icons/pi"; // Un icono divertido para "cabezas"
-import ScaleIcon from '@mui/icons-material/Scale'; // Para kilos
+import { useState } from 'react';
+import {
+    Box, CircularProgress, Alert, Paper, Typography, Dialog,
+    DialogTitle, DialogContent, IconButton
+} from '@mui/material';
+import { PiCow } from "react-icons/pi";
+import ScaleIcon from '@mui/icons-material/Scale';
+import { PiChartLineUpBold } from "react-icons/pi";
+import CloseIcon from '@mui/icons-material/Close';
 
 import type { CotizacionGanado } from '../models/mercadoModels';
 import { useApiData } from '../hooks/useApiData';
 import { formatCurrency, formatInteger } from '../utils/formatters';
+import { AgroHistoricalChartWidget } from './AgroHistoricalChartWidget';
 
-const AgroCard = ({ categoria }: { categoria: CotizacionGanado }) => {
+// El subcomponente ahora tendrá un botón para el gráfico.
+const AgroCard = ({ registro, onChartClick }: { registro: CotizacionGanado, onChartClick: () => void }) => {
     return (
-        <Paper elevation={2} sx={{ p: 2, flex: '1 1 250px', minWidth: '250px', maxWidth: '300px' }}>
-            <Typography variant="h6" component="h3" sx={{ fontWeight: 'bold', borderBottom: 1, borderColor: 'divider', pb: 1, mb: 2 }}>
-                {categoria.categoria}
+        // Añadimos posición relativa para poder posicionar el botón del gráfico.
+        <Paper elevation={2} sx={{ p: 2, flex: '1 1 250px', minWidth: '250px', maxWidth: '300px', position: 'relative' }}>
+            <IconButton
+                aria-label="ver historial"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    onChartClick();
+                }}
+                sx={{
+                    position: 'absolute',
+                    top: 8,
+                    right: 8,
+                    backgroundColor: 'rgba(255, 255, 255, 0.7)', // Fondo semitransparente
+                    backdropFilter: 'blur(2px)', // Efecto "frosty glass" para el fondo
+                    border: '1px solid rgba(0, 0, 0, 0.1)',
+                    boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
+                    transition: 'all 0.2s ease-in-out', // Transición suave para todos los cambios
+                    '&:hover': {
+                        transform: 'translateY(-2px)', // Se eleva un poco
+                        boxShadow: '0 4px 10px rgba(0,0,0,0.2)', // La sombra se hace más grande
+                        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                    }
+                }}
+            >
+                <PiChartLineUpBold size="20" />
+            </IconButton>
+
+            <Typography variant="h6" component="h3" sx={{ fontWeight: 'bold', borderBottom: 1, borderColor: 'divider', pb: 1, mb: 2, pr: 5 /* Espacio para el botón */ }}>
+                {registro.categoria}
+                <Typography variant="body2" color="text.secondary">{registro.especificaciones}</Typography>
             </Typography>
+
             <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                 <Typography variant="body2" color="text.secondary">Precio Máximo:</Typography>
-                <Typography variant="body2" sx={{ fontWeight: 'bold', color: 'success.main' }}>${formatCurrency(categoria.maximo)}</Typography>
+                <Typography variant="body2" sx={{ fontWeight: 'bold', color: 'success.main' }}>${formatCurrency(registro.maximo)}</Typography>
             </Box>
             <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                 <Typography variant="body2" color="text.secondary">Precio Mínimo:</Typography>
-                <Typography variant="body2" sx={{ fontWeight: 'bold', color: 'error.main' }}>${formatCurrency(categoria.minimo)}</Typography>
+                <Typography variant="body2" sx={{ fontWeight: 'bold', color: 'error.main' }}>${formatCurrency(registro.minimo)}</Typography>
             </Box>
             <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
                 <Typography variant="body2" color="text.secondary">Precio Mediano:</Typography>
-                <Typography variant="body2" sx={{ fontWeight: 'bold' }}>${formatCurrency(categoria.mediano)}</Typography>
+                <Typography variant="body2" sx={{ fontWeight: 'bold' }}>${formatCurrency(registro.mediano)}</Typography>
             </Box>
-            
+
             <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3, pt: 1, borderTop: 1, borderColor: 'divider' }}>
                 <Box sx={{ textAlign: 'center' }}>
-                    <PiCow size={28}/>
-                    <Typography variant="body1" sx={{ fontWeight: 'bold' }}>{formatInteger(categoria.cabezas)}</Typography>
+                    <PiCow size="28" />
+                    <Typography variant="body1" sx={{ fontWeight: 'bold' }}>{formatInteger(registro.cabezas)}</Typography>
                     <Typography variant="caption" color="text.secondary">Cabezas</Typography>
                 </Box>
-                 <Box sx={{ textAlign: 'center' }}>
+                <Box sx={{ textAlign: 'center' }}>
                     <ScaleIcon color="action" />
-                    <Typography variant="body1" sx={{ fontWeight: 'bold' }}>{formatInteger(categoria.kilosTotales)}</Typography>
+                    <Typography variant="body1" sx={{ fontWeight: 'bold' }}>{formatInteger(registro.kilosTotales)}</Typography>
                     <Typography variant="caption" color="text.secondary">Kilos</Typography>
                 </Box>
             </Box>
@@ -41,9 +77,17 @@ const AgroCard = ({ categoria }: { categoria: CotizacionGanado }) => {
     );
 };
 
-// Este widget agrupa los datos por categoría para un resumen más limpio.
 export const MercadoAgroCardWidget = () => {
     const { data, loading, error } = useApiData<CotizacionGanado[]>('/mercados/agroganadero');
+    const [selectedCategory, setSelectedCategory] = useState<CotizacionGanado | null>(null);
+
+    const handleChartClick = (registro: CotizacionGanado) => {
+        setSelectedCategory(registro);
+    };
+
+    const handleCloseDialog = () => {
+        setSelectedCategory(null);
+    };
 
     if (loading) {
         return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
@@ -55,25 +99,50 @@ export const MercadoAgroCardWidget = () => {
         return <Alert severity="info">No hay datos del mercado agroganadero disponibles.</Alert>;
     }
 
-    // Agrupamos y sumamos los datos por categoría principal
-    const resumenPorCategoria = data.reduce((acc, item) => {
-        if (!acc[item.categoria]) {
-            acc[item.categoria] = { ...item };
-        } else {
-            acc[item.categoria].cabezas += item.cabezas;
-            acc[item.categoria].kilosTotales += item.kilosTotales;
-            acc[item.categoria].importeTotal += item.importeTotal;
-            acc[item.categoria].maximo = Math.max(acc[item.categoria].maximo, item.maximo);
-            acc[item.categoria].minimo = Math.min(acc[item.categoria].minimo, item.minimo);
-        }
-        return acc;
-    }, {} as Record<string, CotizacionGanado>);
-
     return (
-        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, justifyContent: 'center' }}>
-            {Object.values(resumenPorCategoria).map(categoria => (
-                <AgroCard key={categoria.categoria} categoria={categoria} />
-            ))}
-        </Box>
+        <>
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, justifyContent: 'center' }}>
+                {data.map(registro => (
+                    <AgroCard key={registro.id} registro={registro} onChartClick={() => handleChartClick(registro)} />
+                ))}
+            </Box>
+            <Dialog
+                open={Boolean(selectedCategory)}
+                onClose={handleCloseDialog}
+                maxWidth="md"
+                fullWidth
+                sx={{ '& .MuiDialog-paper': { overflow: 'visible' } }} // Permite que el botón se vea fuera
+            >
+                <IconButton
+                    aria-label="close"
+                    onClick={handleCloseDialog}
+                    sx={{
+                        position: 'absolute',
+                        top: -15, // Mueve el botón hacia arriba, fuera del Dialog
+                        right: -15, // Mueve el botón hacia la derecha, fuera del Dialog
+                        color: (theme) => theme.palette.grey[500],
+                        backgroundColor: 'white',
+                        boxShadow: 3, // Añade una sombra para que destaque
+                        '&:hover': {
+                            backgroundColor: 'grey.100', // Un leve cambio de color al pasar el mouse
+                        },
+                    }}
+                >
+                    <CloseIcon />
+                </IconButton>
+
+                <DialogTitle sx={{ m: 0, p: 2 }}>
+                    Mensual de {selectedCategory?.categoria} ({selectedCategory?.especificaciones})
+                </DialogTitle>
+                <DialogContent dividers>
+                    {selectedCategory && (
+                        <AgroHistoricalChartWidget
+                            categoria={selectedCategory.categoria}
+                            especificaciones={selectedCategory.especificaciones}
+                        />
+                    )}
+                </DialogContent>
+            </Dialog>
+        </>
     );
 };