feat: add collapsible state and item count to dashboard agenda component
This commit is contained in:
@@ -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>
|
||||
)}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user