feat: Implement remaining data widgets for Agro, Grains, and USA Stocks

2025-07-01 13:42:16 -03:00
parent 4cfb248f54
commit c4eead1033
5 changed files with 243 additions and 23 deletions
--- a/frontend/src/components/GranosWidget.tsx
+++ b/frontend/src/components/GranosWidget.tsx
@@ -0,0 +1,80 @@
+import {
+  Box, CircularProgress, Alert, Table, TableBody, TableCell,
+  TableContainer, TableHead, TableRow, Paper, Typography, Tooltip
+} from '@mui/material';
+import type { CotizacionGrano } from '../models/mercadoModels';
+import { useApiData } from '../hooks/useApiData';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import RemoveIcon from '@mui/icons-material/Remove';
+
+const formatNumber = (num: number) => {
+  return new Intl.NumberFormat('es-AR', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(num);
+};
+
+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' }}>
+        {formatNumber(value)}
+      </Typography>
+    </Box>
+  );
+};
+
+export const GranosWidget = () => {
+  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 en este momento.</Alert>;
+  }
+
+  return (
+    <TableContainer component={Paper}>
+      <Table size="small" aria-label="tabla granos">
+        <TableHead>
+          <TableRow>
+            <TableCell>Grano</TableCell>
+            <TableCell align="right">Precio ($/Tn)</TableCell>
+            <TableCell align="center">Variación</TableCell>
+            <TableCell align="right">Fecha Operación</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data.map((row) => (
+            <TableRow key={row.nombre} hover>
+              <TableCell component="th" scope="row">
+                <Typography variant="body2" sx={{ fontWeight: 'bold' }}>{row.nombre}</Typography>
+              </TableCell>
+              <TableCell align="right">${formatNumber(row.precio)}</TableCell>
+              <TableCell align="center">
+                <Variacion value={row.variacionPrecio} />
+              </TableCell>
+              <TableCell align="right">{new Date(row.fechaOperacion).toLocaleDateString('es-AR')}</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: Bolsa de Comercio de Rosario
+        </Typography>
+      </Tooltip>
+    </TableContainer>
+  );
+};