dmolinari/Mercados-Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(UI): Implement holiday awareness across all data widgets

Browse Source 
- All data widgets (tables and cards) now use the useIsHoliday hook.
- An informational alert is displayed on holidays, without hiding the last available data.
- Unifies loading state logic to wait for both data and holiday status, preventing race conditions.
- Ensures a consistent and robust user experience across all components."
This commit is contained in:
dmolinari
2025-07-15 15:20:36 -03:00
parent e3339fff99
commit 8878ec632e
12 changed files with 533 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
frontend/src/components/GranosWidget.tsx
View File

@@ -2,19 +2,20 @@ 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: 0,
maximumFractionDigits: 2,
}).format(num);
};
// Importaciones de nuestro proyecto
import type { CotizacionGrano } from '../models/mercadoModels';
import { useApiData } from '../hooks/useApiData';
import { useIsHoliday } from '../hooks/useIsHoliday';
import { formatInteger, formatDateOnly, formatFullDateTime } from '../utils/formatters';
import { HolidayAlert } from './common/HolidayAlert';
/**
* Sub-componente para mostrar la variación con icono y color.
*/
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;
@@ -23,58 +24,79 @@ const Variacion = ({ value }: { value: number }) => {
<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)}
{formatInteger(value)}
</Typography>
</Box>
);
};
/**
* Widget autónomo para la tabla detallada del mercado de granos.
*/
export const GranosWidget = () => {
const { data, loading, error } = useApiData<CotizacionGrano[]>('/mercados/granos');
// Hooks para obtener los datos y el estado de feriado para el mercado argentino.
const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionGrano[]>('/mercados/granos');
const isHoliday = useIsHoliday('BA');
if (loading) {
// Estado de carga unificado.
const isLoading = dataLoading || isHoliday === null;
if (isLoading) {
return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
}
if (error) {
return <Alert severity="error">{error}</Alert>;
if (dataError) {
return <Alert severity="error">{dataError}</Alert>;
}
// Si no hay ningún dato que mostrar.
if (!data || data.length === 0) {
if (isHoliday) {
return <HolidayAlert />;
}
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>
<Box>
{/* Si es feriado, mostramos la alerta como un aviso encima del contenido. */}
{isHoliday && (
<Box sx={{ mb: 2 }}>
<HolidayAlert />
</Box>
)}
<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>
))}
</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>
</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">${formatInteger(row.precio)}</TableCell>
<TableCell align="center">
<Variacion value={row.variacionPrecio} />
</TableCell>
<TableCell align="right">{formatDateOnly(row.fechaOperacion)}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<Tooltip title={`Última actualización: ${formatFullDateTime(data[0].fechaRegistro)}`}>
<Typography variant="caption" sx={{ p: 1, display: 'block', textAlign: 'right', color: 'text.secondary' }}>
Fuente: Bolsa de Comercio de Rosario
</Typography>
</Tooltip>
</TableContainer>
</Box>
);
};