From 81616c7c1c83964641583d2688e3a3f14dc0f592 Mon Sep 17 00:00:00 2001 From: Horacio Daniel Ros Date: Sat, 18 Jul 2026 10:54:27 -0300 Subject: [PATCH] feat: add collapsible state and item count to dashboard agenda component --- .../FinancialWidget/FinancialWidget.tsx | 133 +++++++++--------- .../PlanMetricsWidget.module.css | 6 + .../PlanMetricsWidget/PlanMetricsWidget.tsx | 4 +- txclient/src/app/landing/dashboard/page.tsx | 102 ++++++++------ .../app/landing/dashboard/style.module.css | 66 ++++++--- 5 files changed, 183 insertions(+), 128 deletions(-) diff --git a/txclient/src/app/components/FinancialWidget/FinancialWidget.tsx b/txclient/src/app/components/FinancialWidget/FinancialWidget.tsx index 382b118..f5f310d 100644 --- a/txclient/src/app/components/FinancialWidget/FinancialWidget.tsx +++ b/txclient/src/app/components/FinancialWidget/FinancialWidget.tsx @@ -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 (
@@ -155,70 +156,74 @@ export default function FinancialWidget({ sessionUser, selectedOrgId, organizati )}
-
- {!loading && chartData.length > 0 ? ( - 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', - } - }} - > - - - - - - - - ) : ( -
- {loading ? 'Cargando datos...' : 'No hay datos para este periodo'} -
- )} -
+ {loading && ( +
+
+ Cargando datos... +
+
+ )} + + {!loading && hasChartData && ( +
+ 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', + } + }} + > + + + + + + + +
+ )} )} diff --git a/txclient/src/app/components/PlanMetricsWidget/PlanMetricsWidget.module.css b/txclient/src/app/components/PlanMetricsWidget/PlanMetricsWidget.module.css index 2f0a10d..f473731 100644 --- a/txclient/src/app/components/PlanMetricsWidget/PlanMetricsWidget.module.css +++ b/txclient/src/app/components/PlanMetricsWidget/PlanMetricsWidget.module.css @@ -29,6 +29,12 @@ font-weight: 500; } +.validUntil { + font-size: 14px; + color: var(--wine-red); + font-weight: 700; +} + .metricsList { display: flex; flex-direction: column; diff --git a/txclient/src/app/components/PlanMetricsWidget/PlanMetricsWidget.tsx b/txclient/src/app/components/PlanMetricsWidget/PlanMetricsWidget.tsx index ad65ad9..604add8 100644 --- a/txclient/src/app/components/PlanMetricsWidget/PlanMetricsWidget.tsx +++ b/txclient/src/app/components/PlanMetricsWidget/PlanMetricsWidget.tsx @@ -106,12 +106,12 @@ export default function PlanMetricsWidget({

Métricas del Plan {subscription.plan.name}

- Uso actual de tu suscripción {subscription.endDate && subscription.plan.price > 0 && ( - + Vigente hasta el {dayjs(subscription.endDate).format("DD/MM/YYYY")} )} + Uso actual de tu suscripción
diff --git a/txclient/src/app/landing/dashboard/page.tsx b/txclient/src/app/landing/dashboard/page.tsx index 082144d..dd709d0 100644 --- a/txclient/src/app/landing/dashboard/page.tsx +++ b/txclient/src/app/landing/dashboard/page.tsx @@ -62,6 +62,7 @@ export default function DashboardPage() { }); const [showOnlyMine, setShowOnlyMine] = useState(false); + const [isAgendaCollapsed, setIsAgendaCollapsed] = useState(true); const [subscription, setSubscription] = useState({ plan: { @@ -220,6 +221,8 @@ export default function DashboardPage() { }; const displayedSubscription = companySubscription; + const agendaItems = dashboardData?.personalAgenda ?? []; + const filteredAgendaItems = agendaItems.filter(item => !showOnlyMine || item.collaboratorId === SessionInfo.userId); return ( @@ -249,7 +252,6 @@ export default function DashboardPage() {
{organizations.length > 1 && (
- Organización: setShowOnlyMine(e.target.checked)} - /> - Solo mis turnos - -
-
- {dashboardData.personalAgenda.filter(item => !showOnlyMine || item.collaboratorId === SessionInfo.userId).length === 0 && ( -
- No hay turnos programados para hoy con estos filtros. -
- )} - {dashboardData.personalAgenda - .filter(item => !showOnlyMine || item.collaboratorId === SessionInfo.userId) - .map(item => ( -
- {dayjs(item.appointmentDate).format("HH:mm")} - {item.clientName} - {item.serviceName} - {item.collaboratorName} -
- ))} -
+ + {!isAgendaCollapsed && ( +
+ +
+ )} + {!isAgendaCollapsed && ( +
+ {filteredAgendaItems.length === 0 && ( +
+ No hay turnos programados para hoy con estos filtros. +
+ )} + {filteredAgendaItems.map(item => ( +
+ {dayjs(item.appointmentDate).format("HH:mm")} - {item.clientName} + {item.serviceName} + {item.collaboratorName} +
+ ))} +
+ )}
)} diff --git a/txclient/src/app/landing/dashboard/style.module.css b/txclient/src/app/landing/dashboard/style.module.css index e4945a3..85a1642 100644 --- a/txclient/src/app/landing/dashboard/style.module.css +++ b/txclient/src/app/landing/dashboard/style.module.css @@ -35,22 +35,6 @@ width: 100%; } -.planHeaderActions { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 6px; - width: 100%; -} - -@media (min-width: 850px) { - .planHeaderActions { - align-items: flex-end; - margin-left: auto; - width: auto; - } -} - .metricsCard { background-color: white; border-radius: 16px; @@ -71,6 +55,56 @@ gap: 15px; } +.agendaHeader { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + width: 100%; + padding: 0; + border: 0; + background: transparent; + cursor: pointer; + text-align: left; +} + +.agendaHeaderTitleWrap { + display: flex; + align-items: center; + gap: 10px; + min-width: 0; +} + +.agendaCounter { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 28px; + height: 28px; + padding: 0 9px; + border-radius: 999px; + background: var(--wine-red); + color: var(--white); + font-size: 13px; + font-weight: 900; +} + +.agendaToggleIcon { + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + width: 32px; + height: 32px; + border-radius: 999px; + background: var(--white); + color: var(--wine-red); + border: 1px solid var(--wine-red); + font-size: 22px; + font-weight: 800; + line-height: 1; +} + .agendaList { display: flex; flex-direction: column;