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/landing/dashboard/page.tsx
+56 -46
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>
)}
{displayedSubscription && isCompanyOwner && (
<Button
color="link"
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>
<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"
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>
{subscription.mpStatus === MP_SUBS_STATUS.PENDING && (
<Button
text="Ir a pagar"
@@ -335,35 +330,50 @@ 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' }}>
<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' }}>
<input
type="checkbox"
checked={showOnlyMine}
onChange={(e) => setShowOnlyMine(e.target.checked)}
/>
Solo mis turnos
</label>
</div>
<div className={style.agendaList}>
{dashboardData.personalAgenda.filter(item => !showOnlyMine || item.collaboratorId === SessionInfo.userId).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 => (
<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>
<span style={{fontSize: '12px', color: '#999', marginTop: '5px'}}>{item.collaboratorName}</span>
</div>
))}
</div>
<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>
<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}
onChange={(e) => setShowOnlyMine(e.target.checked)}
/>
Solo mis turnos
</label>
</div>
)}
{!isAgendaCollapsed && (
<div className={style.agendaList}>
{filteredAgendaItems.length === 0 && (
<div style={{color: '#666', marginTop: '10px'}}>
No hay turnos programados para hoy con estos filtros.
</div>
)}
{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>
<span style={{fontSize: '12px', color: '#999', marginTop: '5px'}}>{item.collaboratorName}</span>
</div>
))}
</div>
)}
</div>
)}