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

2025-07-01 16:05:26 -03:00
parent c4eead1033
commit ab9e77fa81
22 changed files with 908 additions and 125 deletions
--- a/frontend/src/components/GranosCardWidget.tsx
+++ b/frontend/src/components/GranosCardWidget.tsx
@@ -0,0 +1,102 @@
+import { Box, CircularProgress, Alert, Paper, Typography } from '@mui/material';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import RemoveIcon from '@mui/icons-material/Remove';
+// Iconos de react-icons para cada grano
+import { GiSunflower, GiWheat, GiCorn, GiGrain } from "react-icons/gi";
+import { TbGrain } from "react-icons/tb";
+
+import type { CotizacionGrano } from '../models/mercadoModels';
+import { useApiData } from '../hooks/useApiData';
+import { formatCurrency, formatDateOnly } from '../utils/formatters';
+
+// Función para elegir el icono según el nombre del grano
+const getGrainIcon = (nombre: string) => {
+    switch (nombre.toLowerCase()) {
+        case 'girasol':
+            return <GiSunflower size={28} color="#fbc02d" />;
+        case 'trigo':
+            return <GiWheat size={28} color="#fbc02d" />;
+        case 'sorgo':
+            return <TbGrain size={28} color="#fbc02d" />;
+        case 'maiz':
+            return <GiCorn size={28} color="#fbc02d" />;
+        default:
+            return <GiGrain size={28} color="#fbc02d" />;
+    }
+};
+
+// Subcomponente para una única tarjeta de grano
+const GranoCard = ({ grano }: { grano: CotizacionGrano }) => {
+    const isPositive = grano.variacionPrecio > 0;
+    const isNegative = grano.variacionPrecio < 0;
+    const color = isPositive ? 'success.main' : isNegative ? 'error.main' : 'text.secondary';
+    const Icon = isPositive ? ArrowUpwardIcon : isNegative ? ArrowDownwardIcon : RemoveIcon;
+
+    return (
+        <Paper 
+            elevation={2} 
+            sx={{ 
+                p: 2, 
+                display: 'flex', 
+                flexDirection: 'column', 
+                justifyContent: 'space-between', 
+                flex: '1 1 180px',
+                minWidth: '180px',
+                maxWidth: '220px',
+                height: '160px',
+                borderTop: `4px solid ${isPositive ? '#2e7d32' : isNegative ? '#d32f2f' : '#bdbdbd'}`
+            }}
+        >
+            <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+                {getGrainIcon(grano.nombre)}
+                <Typography variant="h6" component="h3" sx={{ fontWeight: 'bold', ml: 1 }}>
+                    {grano.nombre}
+                </Typography>
+            </Box>
+
+            <Box sx={{ textAlign: 'center', my: 1 }}>
+                <Typography variant="h5" component="p" sx={{ fontWeight: 'bold' }}>
+                    ${formatCurrency(grano.precio)}
+                </Typography>
+                <Typography variant="caption" color="text.secondary">
+                    por Tonelada
+                </Typography>
+            </Box>
+
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color }}>
+                <Icon sx={{ fontSize: '1.1rem', mr: 0.5 }} />
+                <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
+                    {formatCurrency(grano.variacionPrecio)}
+                </Typography>
+            </Box>
+            <Typography variant="caption" align="center" sx={{ mt: 1, color: 'text.secondary' }}>
+                Operación: {formatDateOnly(grano.fechaOperacion)}
+            </Typography>
+        </Paper>
+    );
+};
+
+export const GranosCardWidget = () => {
+  const { data, loading, error } = useApiData<CotizacionGrano[]>('/mercados/granos');
+
+  if (loading) {
+    return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
+  }
+
+  if (error) {
+    return <Alert severity="error">{error}</Alert>;
+  }
+
+  if (!data || data.length === 0) {
+    return <Alert severity="info">No hay datos de granos disponibles.</Alert>;
+  }
+
+  return (
+    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, justifyContent: 'center' }}>
+      {data.map((grano) => (
+        <GranoCard key={grano.nombre} grano={grano} />
+      ))}
+    </Box>
+  );
+};