From b823f0f943107f5e8865a6d4c313a78b0173be84 Mon Sep 17 00:00:00 2001
From: frakarr <fcarra79@gmail.com>
Date: Thu, 11 Dec 2025 22:47:04 +0100
Subject: [PATCH] Update FamilyDetail.tsx

---
 pages/FamilyDetail.tsx | 35 ++++++++++++++++++++++++++---------
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/pages/FamilyDetail.tsx b/pages/FamilyDetail.tsx
index ec2d11a..c367ac7 100644
--- a/pages/FamilyDetail.tsx
+++ b/pages/FamilyDetail.tsx
@@ -77,7 +77,11 @@ export const FamilyDetail: React.FC = () => {
   const monthlyStatus: MonthStatus[] = useMemo(() => {
     const now = new Date();
     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) => {
       const monthNum = i + 1;
@@ -89,13 +93,25 @@ export const FamilyDetail: React.FC = () => {
         status = PaymentStatus.PAID;
       } else {
         if (selectedYear < currentRealYear) {
-            status = PaymentStatus.UNPAID;
+            status = PaymentStatus.UNPAID; // Past year unpaid
         } else if (selectedYear === currentRealYear) {
-            if (i < currentRealMonth) status = PaymentStatus.UNPAID;
-            else if (i === currentRealMonth) status = PaymentStatus.PENDING;
-            else status = PaymentStatus.UPCOMING;
+            if (monthNum < currentRealMonth) {
+                // Past month in current year -> Unpaid
+                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 {
-            status = PaymentStatus.UPCOMING;
+            status = PaymentStatus.UPCOMING; // Future year
         }
       }
 
@@ -105,7 +121,7 @@ export const FamilyDetail: React.FC = () => {
         payment
       };
     });
-  }, [payments, selectedYear]);
+  }, [payments, selectedYear, condo]);
 
   const chartData = useMemo(() => {
     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">
             <h3 className="text-lg font-bold text-slate-800 flex items-center gap-2">
                 <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>
         </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">
@@ -286,6 +302,7 @@ export const FamilyDetail: React.FC = () => {
                     p-5 bg-white transition-colors
                     ${month.status === PaymentStatus.UNPAID ? 'bg-red-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">
@@ -318,7 +335,7 @@ export const FamilyDetail: React.FC = () => {
                 ) : (
                     <div className="flex items-center gap-2 text-sm mt-auto">
                         <p className="text-slate-400 italic text-xs">Nessun pagamento</p>
-                        {month.status === PaymentStatus.UNPAID && (
+                        {(month.status === PaymentStatus.UNPAID || month.status === PaymentStatus.PENDING) && (
                             <button 
                                 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"