horacio/turnosxpress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add collapsible state and item count to dashboard agenda component

Browse Source
This commit is contained in:
Horacio Daniel Ros
2026-07-18 10:54:27 -03:00
parent 8d9a03cd23
commit 81616c7c1c
5 changed files with 183 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
txclient/src/app/components/FinancialWidget/FinancialWidget.tsx
+69 -64
View File
@@ -104,6 +104,7 @@ export default function FinancialWidget({ sessionUser, selectedOrgId, organizati
return dayjs(d.date).format("DD/MM");
});
const seriesData = chartData.map(d => d.amount);
const hasChartData = chartData.some(d => d.amount > 0);
return (
<div className={styles.container}>
@@ -155,70 +156,74 @@ export default function FinancialWidget({ sessionUser, selectedOrgId, organizati
)}
</div>
<div className={styles.chartContainer}>
{!loading && chartData.length > 0 ? (
<LineChart
height={350}
xAxis={[{
scaleType: 'point',
data: xAxisData,
}]}
series={[
{
data: seriesData,
color: 'rgb(36, 169, 53)',
area: true,
showMark: true,
curve: 'monotoneX',
valueFormatter: (val: number | null) => val ? formatCurrency(val) : "0",
},
]}
grid={{ horizontal: true }}
margin={{ top: 20, bottom: 40, left: 70, right: 20 }}
sx={{
'.MuiLineElement-root': {
strokeWidth: 3,
},
'.MuiAreaElement-root': {
fill: 'url(#gradient)',
},
'.MuiChartsGrid-line': {
strokeDasharray: '5 5',
stroke: '#e5e7eb',
},
'.MuiChartsAxis-line': {
stroke: 'transparent',
},
'.MuiChartsAxis-tick': {
stroke: 'transparent',
},
'.MuiChartsAxis-tickLabel': {
fill: '#9ca3af',
fontFamily: 'inherit',
fontSize: '12px',
fontWeight: 500,
},
'.MuiMarkElement-root': {
stroke: 'rgb(36, 169, 53)',
strokeWidth: 2,
fill: '#ffffff',
scale: '1.2',
}
}}
>
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="rgb(36, 169, 53)" stopOpacity={0.3}/>
<stop offset="95%" stopColor="rgb(36, 169, 53)" stopOpacity={0.0}/>
</linearGradient>
</defs>
</LineChart>
) : (
<div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', color: '#9ca3af'}}>
{loading ? 'Cargando datos...' : 'No hay datos para este periodo'}
</div>
)}
</div>
{loading && (
<div className={styles.chartContainer}>
<div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', color: '#9ca3af'}}>
Cargando datos...
</div>
</div>
)}
{!loading && hasChartData && (
<div className={styles.chartContainer}>
<LineChart
height={350}
xAxis={[{
scaleType: 'point',
data: xAxisData,
}]}
series={[
{
data: seriesData,
color: 'rgb(36, 169, 53)',
area: true,
showMark: true,
curve: 'monotoneX',
valueFormatter: (val: number | null) => val ? formatCurrency(val) : "0",
},
]}
grid={{ horizontal: true }}
margin={{ top: 20, bottom: 40, left: 70, right: 20 }}
sx={{
'.MuiLineElement-root': {
strokeWidth: 3,
},
'.MuiAreaElement-root': {
fill: 'url(#gradient)',
},
'.MuiChartsGrid-line': {
strokeDasharray: '5 5',
stroke: '#e5e7eb',
},
'.MuiChartsAxis-line': {
stroke: 'transparent',
},
'.MuiChartsAxis-tick': {
stroke: 'transparent',
},
'.MuiChartsAxis-tickLabel': {
fill: '#9ca3af',
fontFamily: 'inherit',
fontSize: '12px',
fontWeight: 500,
},
'.MuiMarkElement-root': {
stroke: 'rgb(36, 169, 53)',
strokeWidth: 2,
fill: '#ffffff',
scale: '1.2',
}
}}
>
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="rgb(36, 169, 53)" stopOpacity={0.3}/>
<stop offset="95%" stopColor="rgb(36, 169, 53)" stopOpacity={0.0}/>
</linearGradient>
</defs>
</LineChart>
</div>
)}
</>
)}
</div>