Update ExtraordinaryUser.tsx

pages/ExtraordinaryUser.tsx

@@ -2,17 +2,25 @@
 import React, { useEffect, useState } from 'react';
 import { CondoService } from '../services/mockDb';
 import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
-import { Briefcase, Calendar, CheckCircle2 } from 'lucide-react';
+import { Briefcase, Calendar, CheckCircle2, AlertCircle } from 'lucide-react';
 
 export const ExtraordinaryUser: React.FC = () => {
     const [expenses, setExpenses] = useState<any[]>([]); // Using any for composite object from specific API
     const [loading, setLoading] = useState(true);
     const [paypalClientId, setPaypalClientId] = useState<string>('');
     const [successMsg, setSuccessMsg] = useState('');
+    const [hasFamily, setHasFamily] = useState(true);
 
     useEffect(() => {
         const load = async () => {
             try {
+                const user = CondoService.getCurrentUser();
+                if (!user?.familyId) {
+                    setHasFamily(false);
+                    setLoading(false);
+                    return;
+                }
+
                 const [myExp, condo] = await Promise.all([
                     CondoService.getMyExpenses(),
                     CondoService.getActiveCondo()
@@ -44,6 +52,17 @@ export const ExtraordinaryUser: React.FC = () => {
 
     if (loading) return <div className="p-8 text-center text-slate-400">Caricamento spese...</div>;
 
+    if (!hasFamily) {
+        return (
+            <div className="p-8 text-center bg-amber-50 rounded-xl border border-amber-200 text-amber-800">
+                <AlertCircle className="w-12 h-12 mx-auto mb-3 text-amber-500" />
+                <h3 className="text-lg font-bold mb-2">Nessuna Famiglia Associata</h3>
+                <p>Il tuo utente (probabilmente Admin) non è collegato ad alcuna famiglia, quindi non ci sono spese personali da mostrare.</p>
+                <p className="text-sm mt-2 text-amber-700">Vai in Impostazioni &gt; Utenti e associa il tuo account a una famiglia per testare questa vista.</p>
+            </div>
+        );
+    }
+
     return (
         <div className="space-y-6 pb-20 animate-fade-in">
             <div>
@@ -97,12 +116,12 @@ export const ExtraordinaryUser: React.FC = () => {
                                         <div className="w-full bg-blue-200 h-1.5 rounded-full overflow-hidden">
                                             <div 
                                                 className="bg-blue-600 h-full transition-all duration-500" 
-                                                style={{ width: `${(exp.myShare.amountPaid / exp.myShare.amountDue) * 100}%` }}
+                                                style={{ width: `${Math.min(100, (exp.myShare.amountPaid / exp.myShare.amountDue) * 100)}%` }}
                                             />
                                         </div>
                                         <div className="flex justify-between text-xs mt-1 text-blue-600">
                                             <span>Versato: € {exp.myShare.amountPaid.toFixed(2)}</span>
-                                            <span>Restante: € {remaining.toFixed(2)}</span>
+                                            <span>Restante: € {Math.max(0, remaining).toFixed(2)}</span>
                                         </div>
                                     </div>
                                 </div>