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

Feat: Agro Cards, Add Data Capture Date

Browse Source
This commit is contained in:
dmolinari
2025-07-14 12:50:29 -03:00
parent 30d03147c7
commit 2efc052755
2 changed files with 18 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/components/MercadoAgroCardWidget.tsx
View File

@@ -10,7 +10,7 @@ import CloseIcon from '@mui/icons-material/Close';
import type { CotizacionGanado } from '../models/mercadoModels'; import type { CotizacionGanado } from '../models/mercadoModels';
import { useApiData } from '../hooks/useApiData'; import { useApiData } from '../hooks/useApiData';
import { formatCurrency, formatInteger } from '../utils/formatters'; import { formatCurrency, formatInteger, formatDateOnly } from '../utils/formatters';
import { AgroHistoricalChartWidget } from './AgroHistoricalChartWidget'; import { AgroHistoricalChartWidget } from './AgroHistoricalChartWidget';
// El subcomponente ahora tendrá un botón para el gráfico. // El subcomponente ahora tendrá un botón para el gráfico.
@@ -61,17 +61,24 @@ const AgroCard = ({ registro, onChartClick }: { registro: CotizacionGanado, onCh
<Typography variant="body2" sx={{ fontWeight: 'bold' }}>${formatCurrency(registro.mediano)}</Typography> <Typography variant="body2" sx={{ fontWeight: 'bold' }}>${formatCurrency(registro.mediano)}</Typography>
</Box> </Box>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3, pt: 1, borderTop: 1, borderColor: 'divider' }}> {/* Pie de la tarjeta */}
<Box sx={{ textAlign: 'center' }}> <Box sx={{ mt: 2, pt: 1, borderTop: 1, borderColor: 'divider' }}>
<PiCow size="28" /> <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3 }}>
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>{formatInteger(registro.cabezas)}</Typography> <Box sx={{ textAlign: 'center' }}>
<Typography variant="caption" color="text.secondary">Cabezas</Typography> <PiCow size="28" />
</Box> <Typography variant="body1" sx={{ fontWeight: 'bold' }}>{formatInteger(registro.cabezas)}</Typography>
<Box sx={{ textAlign: 'center' }}> <Typography variant="caption" color="text.secondary">Cabezas</Typography>
<ScaleIcon color="action" /> </Box>
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>{formatInteger(registro.kilosTotales)}</Typography> <Box sx={{ textAlign: 'center' }}>
<Typography variant="caption" color="text.secondary">Kilos</Typography> <ScaleIcon color="action" />
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>{formatInteger(registro.kilosTotales)}</Typography>
<Typography variant="caption" color="text.secondary">Kilos</Typography>
</Box>
</Box> </Box>
<Typography variant="caption" sx={{ display: 'block', textAlign: 'left', color: 'text.secondary', mt: 1, pt: 1, borderTop: 1, borderColor: 'divider' }}>
Dato Registrado el {formatDateOnly(registro.fechaRegistro)}
</Typography>
</Box> </Box>
</Paper> </Paper>
); );

2
frontend/src/components/MercadoAgroWidget.tsx
View File

@@ -6,7 +6,6 @@ import type { CotizacionGanado } from '../models/mercadoModels';
import { useApiData } from '../hooks/useApiData'; import { useApiData } from '../hooks/useApiData';
import { formatCurrency, formatInteger, formatFullDateTime } from '../utils/formatters'; import { formatCurrency, formatInteger, formatFullDateTime } from '../utils/formatters';
// --- V INICIO DE LA MODIFICACIÓN V ---
// El sub-componente ahora solo necesita renderizar la tarjeta de móvil. // El sub-componente ahora solo necesita renderizar la tarjeta de móvil.
// La fila de la tabla la haremos directamente en el componente principal. // La fila de la tabla la haremos directamente en el componente principal.
const AgroDataCard = ({ row }: { row: CotizacionGanado }) => { const AgroDataCard = ({ row }: { row: CotizacionGanado }) => {
@@ -56,7 +55,6 @@ const AgroDataCard = ({ row }: { row: CotizacionGanado }) => {
</Paper> </Paper>
); );
}; };
// --- ^ FIN DE LA MODIFICACIÓN ^ ---
export const MercadoAgroWidget = () => { export const MercadoAgroWidget = () => {