feat: add collapsible state and item count to dashboard agenda component
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -29,6 +29,12 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.validUntil {
|
||||
font-size: 14px;
|
||||
color: var(--wine-red);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.metricsList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -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