From c4eead1033f4e69ae4a91349c7ff13ab93ecae62 Mon Sep 17 00:00:00 2001
From: dmolinari <dmolinari@eldia.com>
Date: Tue, 1 Jul 2025 13:42:16 -0300
Subject: [PATCH] feat: Implement remaining data widgets for Agro, Grains, and
 USA Stocks

---
 frontend/src/App.tsx                          | 15 ++--
 frontend/src/components/BolsaLocalWidget.tsx  | 20 ++---
 frontend/src/components/BolsaUsaWidget.tsx    | 82 +++++++++++++++++++
 frontend/src/components/GranosWidget.tsx      | 80 ++++++++++++++++++
 frontend/src/components/MercadoAgroWidget.tsx | 69 ++++++++++++++++
 5 files changed, 243 insertions(+), 23 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 980ddbd..3e9e629 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,8 +1,10 @@
 import { Box, Container, Typography, AppBar, Toolbar, CssBaseline } from '@mui/material';
 import { BolsaLocalWidget } from './components/BolsaLocalWidget';
+import { MercadoAgroWidget } from './components/MercadoAgroWidget';
+import { GranosWidget } from './components/GranosWidget';
+import { BolsaUsaWidget } from './components/BolsaUsaWidget';
 
 function App() {
-
   return (
     <>
       <CssBaseline />
@@ -22,22 +24,19 @@ function App() {
         {/* --- Sección 1: Mercado Agroganadero de Cañuelas --- */}
         <Box component="section" sx={{ mb: 5 }}>
           <Typography variant="h5" gutterBottom>Mercado Agroganadero de Cañuelas</Typography>
-          {/* Aquí irá el <MercadoAgroWidget /> */}
-          <Typography color="text.secondary">Widget en construcción...</Typography>
+          <MercadoAgroWidget />
         </Box>
 
         {/* --- Sección 2: Granos - Bolsa de Comercio de Rosario --- */}
         <Box component="section" sx={{ mb: 5 }}>
           <Typography variant="h5" gutterBottom>Granos - Bolsa de Comercio de Rosario</Typography>
-           {/* Aquí irá el <GranosWidget /> */}
-           <Typography color="text.secondary">Widget en construcción...</Typography>
+           <GranosWidget />
         </Box>
 
         {/* --- Sección 3: Mercado de Valores de Estados Unidos --- */}
         <Box component="section" sx={{ mb: 5 }}>
           <Typography variant="h5" gutterBottom>Mercado de Valores de Estados Unidos</Typography>
-           {/* Aquí irá el <BolsaUsaWidget /> */}
-           <Typography color="text.secondary">Widget en construcción...</Typography>
+           <BolsaUsaWidget />
         </Box>
 
         {/* --- Sección 4: Mercado de Valores Local --- */}
@@ -49,7 +48,7 @@ function App() {
       </Container>
       <Box component="footer" sx={{ p: 2, mt: 'auto', backgroundColor: '#f5f5f5', textAlign: 'center' }}>
           <Typography variant="body2" color="text.secondary">
-              Desarrollado con Arquitectura Moderna - {new Date().getFullYear()}
+              Desarrollado por El Día - {new Date().getFullYear()}
           </Typography>
       </Box>
     </>
diff --git a/frontend/src/components/BolsaLocalWidget.tsx b/frontend/src/components/BolsaLocalWidget.tsx
index 89426c8..10f95d9 100644
--- a/frontend/src/components/BolsaLocalWidget.tsx
+++ b/frontend/src/components/BolsaLocalWidget.tsx
@@ -1,16 +1,6 @@
 import {
-  Box,
-  CircularProgress,
-  Alert,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Paper,
-  Typography,
-  Tooltip
+  Box, CircularProgress, Alert, Table, TableBody, TableCell,
+  TableContainer, TableHead, TableRow, Paper, Typography, Tooltip
 } from '@mui/material';
 import type { CotizacionBolsa } from '../models/mercadoModels';
 import { useApiData } from '../hooks/useApiData';
@@ -30,7 +20,7 @@ const formatNumber = (num: number) => {
 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 }} />
@@ -84,9 +74,9 @@ export const BolsaLocalWidget = () => {
           ))}
         </TableBody>
       </Table>
-       <Tooltip title={`Última actualización: ${new Date(data[0].fechaRegistro).toLocaleString('es-AR')}`}>
+      <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: Yahoo Finance
+          Fuente: Yahoo Finance
         </Typography>
       </Tooltip>
     </TableContainer>
diff --git a/frontend/src/components/BolsaUsaWidget.tsx b/frontend/src/components/BolsaUsaWidget.tsx
index e69de29..a854a1f 100644
--- a/frontend/src/components/BolsaUsaWidget.tsx
+++ b/frontend/src/components/BolsaUsaWidget.tsx
@@ -0,0 +1,82 @@
+import {
+  Box, CircularProgress, Alert, Table, TableBody, TableCell,
+  TableContainer, TableHead, TableRow, Paper, Typography, Tooltip
+} from '@mui/material';
+import type { CotizacionBolsa } 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('en-US', { // Usamos formato de EEUU
+    style: 'currency',
+    currency: 'USD',
+  }).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' }}>
+        {value.toFixed(2)}%
+      </Typography>
+    </Box>
+  );
+};
+
+export const BolsaUsaWidget = () => {
+  const { data, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/eeuu');
+
+  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 disponibles para el mercado de EEUU. (El fetcher puede estar desactivado)</Alert>;
+  }
+
+  return (
+    <TableContainer component={Paper}>
+      <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>
+              <TableCell component="th" scope="row">
+                <Typography variant="body2" sx={{ fontWeight: 'bold' }}>{row.ticker}</Typography>
+              </TableCell>
+              <TableCell align="right">{formatNumber(row.precioActual)}</TableCell>
+              <TableCell align="right">{formatNumber(row.apertura)}</TableCell>
+              <TableCell align="right">{formatNumber(row.cierreAnterior)}</TableCell>
+              <TableCell align="center">
+                <Variacion value={row.porcentajeCambio} />
+              </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: Finnhub
+        </Typography>
+      </Tooltip>
+    </TableContainer>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/GranosWidget.tsx b/frontend/src/components/GranosWidget.tsx
index e69de29..0260ffa 100644
--- 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>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/MercadoAgroWidget.tsx b/frontend/src/components/MercadoAgroWidget.tsx
index e69de29..34d886b 100644
--- a/frontend/src/components/MercadoAgroWidget.tsx
+++ b/frontend/src/components/MercadoAgroWidget.tsx
@@ -0,0 +1,69 @@
+import {
+  Box, CircularProgress, Alert, Table, TableBody, TableCell,
+  TableContainer, TableHead, TableRow, Paper, Typography, Tooltip
+} from '@mui/material';
+import type { CotizacionGanado } from '../models/mercadoModels';
+import { useApiData } from '../hooks/useApiData';
+
+const formatNumber = (num: number, fractionDigits = 2) => {
+  return new Intl.NumberFormat('es-AR', {
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits,
+  }).format(num);
+};
+
+export const MercadoAgroWidget = () => {
+  const { data, loading, error } = useApiData<CotizacionGanado[]>('/mercados/agroganadero');
+
+  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 del mercado agroganadero disponibles.</Alert>;
+  }
+
+  return (
+    <TableContainer component={Paper}>
+      <Table size="small" aria-label="tabla mercado agroganadero">
+        <TableHead>
+          <TableRow>
+            <TableCell>Categoría</TableCell>
+            <TableCell>Especificaciones</TableCell>
+            <TableCell align="right">Máximo</TableCell>
+            <TableCell align="right">Mínimo</TableCell>
+            <TableCell align="right">Mediano</TableCell>
+            <TableCell align="right">Cabezas</TableCell>
+            <TableCell align="right">Kilos Totales</TableCell>
+            <TableCell align="right">Importe Total</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data.map((row) => (
+            <TableRow key={row.id} hover>
+              <TableCell>
+                <Typography variant="body2" sx={{ fontWeight: 'bold' }}>{row.categoria}</Typography>
+              </TableCell>
+              <TableCell>{row.especificaciones}</TableCell>
+              <TableCell align="right">${formatNumber(row.maximo)}</TableCell>
+              <TableCell align="right">${formatNumber(row.minimo)}</TableCell>
+              <TableCell align="right">${formatNumber(row.mediano)}</TableCell>
+              <TableCell align="right">{formatNumber(row.cabezas, 0)}</TableCell>
+              <TableCell align="right">{formatNumber(row.kilosTotales, 0)} Kg</TableCell>
+              <TableCell align="right">${formatNumber(row.importeTotal)}</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: Mercado Agroganadero S.A.
+        </Typography>
+      </Tooltip>
+    </TableContainer>
+  );
+};
\ No newline at end of file