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>
txclient/src/app/components/PlanMetricsWidget/PlanMetricsWidget.module.css
+6
View File
@@ -29,6 +29,12 @@
font-weight: 500;
}
.validUntil {
font-size: 14px;
color: var(--wine-red);
font-weight: 700;
}
.metricsList {
display: flex;
flex-direction: column;
txclient/src/app/components/PlanMetricsWidget/PlanMetricsWidget.tsx
+2 -2
View File
@@ -106,12 +106,12 @@ export default function PlanMetricsWidget({
<div className={styles.widgetContainer}>
<div className={styles.widgetHeader}>
<h3 className={styles.title}>Métricas del Plan {subscription.plan.name}</h3>
<span className={styles.subtitle}>Uso actual de tu suscripción</span>
{subscription.endDate && subscription.plan.price > 0 && (
<span className={styles.subtitle}>
<span className={styles.validUntil}>
Vigente hasta el {dayjs(subscription.endDate).format("DD/MM/YYYY")}
</span>
)}
<span className={styles.subtitle}>Uso actual de tu suscripción</span>
</div>
<div className={styles.metricsList}>