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
+10 -5
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,8 +156,16 @@ export default function FinancialWidget({ sessionUser, selectedOrgId, organizati
)}
</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}>
{!loading && chartData.length > 0 ? (
<LineChart
height={350}
xAxis={[{
@@ -213,12 +222,8 @@ export default function FinancialWidget({ sessionUser, selectedOrgId, organizati
</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>
</>
)}
</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}>
txclient/src/app/landing/dashboard/page.tsx
+26 -16
View File
@@ -62,6 +62,7 @@ export default function DashboardPage() {
});
const [showOnlyMine, setShowOnlyMine] = useState(false);
const [isAgendaCollapsed, setIsAgendaCollapsed] = useState(true);
const [subscription, setSubscription] = useState<ISubscriptionInfo>({
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 (
<ThemeProvider theme={turnosXpressTheme}>
@@ -249,7 +252,6 @@ export default function DashboardPage() {
<div className={style.welcomeCard}>
{organizations.length > 1 && (
<div style={{ position: "absolute", top: "20px", right: "20px", display: "flex", alignItems: "center", gap: "10px" }}>
<span style={{ fontSize: "13px", fontWeight: "600", color: "#6b7280" }}>Organización:</span>
<select
value={selectedOrgId}
onChange={e => setSelectedOrgId(e.target.value)}
@@ -284,24 +286,17 @@ export default function DashboardPage() {
{getSubStatusText(displayedSubscription.mpStatus)}
</span>
)}
</div>
</div>
<div className={style.planHeaderActions}>
{displayedSubscription?.endDate && displayedSubscription.plan.price > 0 && (
<span style={{ fontSize: '14px', color: '#666' }}>
Vigente hasta el {dayjs(displayedSubscription.endDate).format("DD/MM/YYYY")}
</span>
)}
{displayedSubscription && isCompanyOwner && (
<Button
color="link"
text="Ver detalle del plan"
text="Ver detalles del plan"
width="custom"
style={{ margin: 0, padding: 0, fontSize: "14px", fontWeight: "700", color: "var(--wine-red)", minHeight: "auto", width: "fit-content" }}
onClick={() => goTo("/landing/current-plan")}
/>
)}
</div>
</div>
{subscription.mpStatus === MP_SUBS_STATUS.PENDING && (
<Button
text="Ir a pagar"
@@ -335,11 +330,25 @@ export default function DashboardPage() {
{/* Agenda del Día */}
{dashboardData && dashboardData.role !== "NONE" && (
<div className={style.agendaCard}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px' }}>
<button
className={style.agendaHeader}
type="button"
onClick={() => setIsAgendaCollapsed(prev => !prev)}
>
<div className={style.agendaHeaderTitleWrap}>
<h3 style={{ margin: 0 }}>
{showOnlyMine ? "Mi Agenda de Hoy" : "Agenda General de Hoy"}
</h3>
<label style={{ fontSize: '13px', display: 'flex', alignItems: 'center', gap: '5px', cursor: 'pointer', color: '#666' }}>
<span className={style.agendaCounter}>{agendaItems.length}</span>
</div>
<span className={style.agendaToggleIcon}>{isAgendaCollapsed ? "+" : "−"}</span>
</button>
{!isAgendaCollapsed && (
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginBottom: '15px' }}>
<label
style={{ fontSize: '13px', display: 'flex', alignItems: 'center', gap: '5px', cursor: 'pointer', color: '#666' }}
onClick={e => e.stopPropagation()}
>
<input
type="checkbox"
checked={showOnlyMine}
@@ -348,15 +357,15 @@ export default function DashboardPage() {
Solo mis turnos
</label>
</div>
)}
{!isAgendaCollapsed && (
<div className={style.agendaList}>
{dashboardData.personalAgenda.filter(item => !showOnlyMine || item.collaboratorId === SessionInfo.userId).length === 0 && (
{filteredAgendaItems.length === 0 && (
<div style={{color: '#666', marginTop: '10px'}}>
No hay turnos programados para hoy con estos filtros.
</div>
)}
{dashboardData.personalAgenda
.filter(item => !showOnlyMine || item.collaboratorId === SessionInfo.userId)
.map(item => (
{filteredAgendaItems.map(item => (
<div key={item.id} className={style.agendaItem}>
<span style={{fontWeight: 'bold'}}>{dayjs(item.appointmentDate).format("HH:mm")} - {item.clientName}</span>
<span style={{fontSize: '14px', color: '#666'}}>{item.serviceName}</span>
@@ -364,6 +373,7 @@ export default function DashboardPage() {
</div>
))}
</div>
)}
</div>
)}
txclient/src/app/landing/dashboard/style.module.css
+50 -16
View File
@@ -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;