fcarra/Condopay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update FamilyDetail.tsx

Browse Source
This commit is contained in:
Francesco Carrà
2025-12-11 22:47:04 +01:00
committed by GitHub
parent 771d7cf127
commit b823f0f943
1 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
pages/FamilyDetail.tsx
View File

@@ -77,7 +77,11 @@ export const FamilyDetail: React.FC = () => {
const monthlyStatus: MonthStatus[] = useMemo(() => { const monthlyStatus: MonthStatus[] = useMemo(() => {
const now = new Date(); const now = new Date();
const currentRealYear = now.getFullYear(); const currentRealYear = now.getFullYear();
const currentRealMonth = now.getMonth(); const currentRealMonth = now.getMonth() + 1; // 1-12
const currentDay = now.getDate();
// Default due day is 10 if not set
const dueDay = condo?.dueDay || 10;
return Array.from({ length: 12 }, (_, i) => { return Array.from({ length: 12 }, (_, i) => {
const monthNum = i + 1; const monthNum = i + 1;
@@ -89,13 +93,25 @@ export const FamilyDetail: React.FC = () => {
status = PaymentStatus.PAID; status = PaymentStatus.PAID;
} else { } else {
if (selectedYear < currentRealYear) { if (selectedYear < currentRealYear) {
status = PaymentStatus.UNPAID; status = PaymentStatus.UNPAID; // Past year unpaid
} else if (selectedYear === currentRealYear) { } else if (selectedYear === currentRealYear) {
if (i < currentRealMonth) status = PaymentStatus.UNPAID; if (monthNum < currentRealMonth) {
else if (i === currentRealMonth) status = PaymentStatus.PENDING; // Past month in current year -> Unpaid
else status = PaymentStatus.UPCOMING; status = PaymentStatus.UNPAID;
} else if (monthNum === currentRealMonth) {
// Current month
if (currentDay > dueDay) {
status = PaymentStatus.UNPAID; // Passed due date
} else if (currentDay >= (dueDay - 10)) {
status = PaymentStatus.PENDING; // Within 10 days before due
} else {
status = PaymentStatus.UPCOMING; // Early in the month
}
} else {
status = PaymentStatus.UPCOMING; // Future month
}
} else { } else {
status = PaymentStatus.UPCOMING; status = PaymentStatus.UPCOMING; // Future year
} }
} }
@@ -105,7 +121,7 @@ export const FamilyDetail: React.FC = () => {
payment payment
}; };
}); });
}, [payments, selectedYear]); }, [payments, selectedYear, condo]);
const chartData = useMemo(() => { const chartData = useMemo(() => {
return monthlyStatus.map(m => ({ return monthlyStatus.map(m => ({
@@ -275,7 +291,7 @@ export const FamilyDetail: React.FC = () => {
<div className="px-5 py-4 border-b border-slate-100 bg-slate-50/50"> <div className="px-5 py-4 border-b border-slate-100 bg-slate-50/50">
<h3 className="text-lg font-bold text-slate-800 flex items-center gap-2"> <h3 className="text-lg font-bold text-slate-800 flex items-center gap-2">
<Calendar className="w-5 h-5 text-slate-500" /> <Calendar className="w-5 h-5 text-slate-500" />
Dettaglio {selectedYear} Dettaglio {selectedYear} <span className="text-xs font-normal text-slate-400 ml-2">(Scadenza: Giorno {condo?.dueDay || 10})</span>
</h3> </h3>
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-0 divide-y sm:divide-y-0 sm:gap-px bg-slate-200 border-collapse"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-0 divide-y sm:divide-y-0 sm:gap-px bg-slate-200 border-collapse">
@@ -286,6 +302,7 @@ export const FamilyDetail: React.FC = () => {
p-5 bg-white transition-colors p-5 bg-white transition-colors
${month.status === PaymentStatus.UNPAID ? 'bg-red-50/30' : ''} ${month.status === PaymentStatus.UNPAID ? 'bg-red-50/30' : ''}
${month.status === PaymentStatus.PAID ? 'bg-green-50/30' : ''} ${month.status === PaymentStatus.PAID ? 'bg-green-50/30' : ''}
${month.status === PaymentStatus.PENDING ? 'bg-yellow-50/30' : ''}
`} `}
> >
<div className="flex justify-between items-center mb-3"> <div className="flex justify-between items-center mb-3">
@@ -318,7 +335,7 @@ export const FamilyDetail: React.FC = () => {
) : ( ) : (
<div className="flex items-center gap-2 text-sm mt-auto"> <div className="flex items-center gap-2 text-sm mt-auto">
<p className="text-slate-400 italic text-xs">Nessun pagamento</p> <p className="text-slate-400 italic text-xs">Nessun pagamento</p>
{month.status === PaymentStatus.UNPAID && ( {(month.status === PaymentStatus.UNPAID || month.status === PaymentStatus.PENDING) && (
<button <button
onClick={() => handleOpenAddModal(month.monthIndex)} onClick={() => handleOpenAddModal(month.monthIndex)}
className="ml-auto text-blue-600 hover:text-blue-800 text-xs font-bold uppercase tracking-wide px-2 py-1 rounded hover:bg-blue-50 transition-colors" className="ml-auto text-blue-600 hover:text-blue-800 text-xs font-bold uppercase tracking-wide px-2 py-1 rounded hover:bg-blue-50 transition-colors"