From 1f46817c10830cbfe0e69353e6de6b50bef2a815 Mon Sep 17 00:00:00 2001 From: frakarr Date: Thu, 11 Dec 2025 00:15:10 +0100 Subject: [PATCH] Update ExtraordinaryUser.tsx --- pages/ExtraordinaryUser.tsx | 233 ++++++++++++++++++++++-------------- 1 file changed, 146 insertions(+), 87 deletions(-) diff --git a/pages/ExtraordinaryUser.tsx b/pages/ExtraordinaryUser.tsx index 2dd43e6..ebf0f68 100644 --- a/pages/ExtraordinaryUser.tsx +++ b/pages/ExtraordinaryUser.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'; import { CondoService } from '../services/mockDb'; import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js"; -import { Briefcase, Calendar, CheckCircle2, AlertCircle, Eye, Paperclip, X, FileText, Download } from 'lucide-react'; +import { Briefcase, Calendar, CheckCircle2, AlertCircle, Eye, Paperclip, X, FileText, Download, Users, Euro } from 'lucide-react'; import { ExtraordinaryExpense } from '../types'; export const ExtraordinaryUser: React.FC = () => { @@ -11,6 +11,7 @@ export const ExtraordinaryUser: React.FC = () => { const [paypalClientId, setPaypalClientId] = useState(''); const [successMsg, setSuccessMsg] = useState(''); const [hasFamily, setHasFamily] = useState(true); + const [userFamilyId, setUserFamilyId] = useState(null); // Details Modal State const [showDetails, setShowDetails] = useState(false); @@ -26,6 +27,7 @@ export const ExtraordinaryUser: React.FC = () => { setLoading(false); return; } + setUserFamilyId(user.familyId); const [myExp, condo] = await Promise.all([ CondoService.getMyExpenses(), @@ -50,9 +52,14 @@ export const ExtraordinaryUser: React.FC = () => { await CondoService.payExpense(expenseId, amount); setSuccessMsg('Pagamento registrato con successo!'); setTimeout(() => setSuccessMsg(''), 3000); - // Refresh - const updated = await CondoService.getMyExpenses(); - setExpenses(updated); + // Refresh logic + const updatedList = await CondoService.getMyExpenses(); + setExpenses(updatedList); + // Also update selected expense if modal is open + if (selectedExpense) { + const updatedDetails = await CondoService.getExpenseDetails(expenseId); + setSelectedExpense(updatedDetails); + } } catch(e) { alert("Errore registrazione pagamento"); } }; @@ -119,7 +126,6 @@ export const ExtraordinaryUser: React.FC = () => { ) : (
{expenses.map(exp => { - const remaining = exp.myShare.amountDue - exp.myShare.amountPaid; const isPaid = exp.myShare.status === 'PAID'; return ( @@ -162,47 +168,13 @@ export const ExtraordinaryUser: React.FC = () => {
Versato: € {exp.myShare.amountPaid.toFixed(2)} - Restante: € {Math.max(0, remaining).toFixed(2)} + Restante: € {(exp.myShare.amountDue - exp.myShare.amountPaid).toFixed(2)}
-
e.stopPropagation()}> - {!isPaid && remaining > 0.01 && ( - <> - {paypalClientId ? ( - - { - return actions.order.create({ - intent: "CAPTURE", - purchase_units: [{ - description: `Spesa Straordinaria: ${exp.title}`, - amount: { currency_code: "EUR", value: remaining.toFixed(2) } - }] - }); - }} - onApprove={(data, actions) => { - if(!actions.order) return Promise.resolve(); - return actions.order.capture().then(() => { - handlePaymentSuccess(exp.id, remaining); - }); - }} - /> - - ) : ( -
- Pagamenti online non configurati. Contatta l'amministratore. -
- )} - - )} - {isPaid && ( -
- Nessun importo dovuto -
- )} +
+ Clicca per dettagli e pagamenti
); @@ -212,8 +184,8 @@ export const ExtraordinaryUser: React.FC = () => { {/* DETAILS MODAL */} {showDetails && selectedExpense && ( -
-
+
+

{selectedExpense.title}

@@ -224,51 +196,88 @@ export const ExtraordinaryUser: React.FC = () => {
-
- {/* Description */} -
-

Descrizione Lavori

-

- {selectedExpense.description} -

-
- - {/* Dates & Totals */} -
-
-

Inizio Lavori

-

- {new Date(selectedExpense.startDate).toLocaleDateString()} +

+ {/* Top Section: Info & Dates */} +
+
+

Descrizione Lavori

+

+ {selectedExpense.description}

-
-

Totale Progetto

-

- € {selectedExpense.totalAmount.toLocaleString()} -

+ +
+
+

Inizio Lavori

+

+ {new Date(selectedExpense.startDate).toLocaleDateString()} +

+
+
+

Costo Totale Progetto

+

+ € {selectedExpense.totalAmount.toLocaleString()} +

+
- {/* Items List */} -
-

Dettaglio Voci di Spesa

-
- - - - - - - - - {selectedExpense.items.map((item, i) => ( - - - + {/* Middle Section: Items and Distribution Grid */} +
+ {/* Items List */} +
+

Voci di Spesa (Totale)

+
+
DescrizioneImporto
{item.description}€ {item.amount.toLocaleString()}
+ + {selectedExpense.items.map((item, i) => ( + + + + + ))} + + + - ))} - -
{item.description}€ {item.amount.toLocaleString()}
Totale€ {selectedExpense.totalAmount.toLocaleString()}
+ + +
+
+ + {/* Shares Table (Piano di Ripartizione) */} +
+

+ Piano di Ripartizione +

+
+ + + + + + + + + + {selectedExpense.shares?.map((share, i) => { + const isMe = share.familyId === userFamilyId; + return ( + + + + + + ); + })} + +
Condomino%Quota
+ {share.familyName} + {isMe && TU} + {share.percentage}% + € {share.amountDue.toFixed(2)} +
+
@@ -297,10 +306,60 @@ export const ExtraordinaryUser: React.FC = () => { )}
-
- + {/* Payment Footer - Only visible here now */} +
+ {(() => { + const myShare = selectedExpense.shares?.find(s => s.familyId === userFamilyId); + if (!myShare) return null; + const remaining = Math.max(0, myShare.amountDue - myShare.amountPaid); + + if (remaining < 0.01) { + return ( +
+ Quota Saldata + +
+ ); + } + + return ( +
+
+ Da Saldare: + € {remaining.toFixed(2)} +
+ {paypalClientId ? ( + + { + return actions.order.create({ + intent: "CAPTURE", + purchase_units: [{ + description: `Spesa Straordinaria: ${selectedExpense.title}`, + amount: { currency_code: "EUR", value: remaining.toFixed(2) } + }] + }); + }} + onApprove={(data, actions) => { + if(!actions.order) return Promise.resolve(); + return actions.order.capture().then(() => { + handlePaymentSuccess(selectedExpense.id, remaining); + }); + }} + /> + + ) : ( +
+ Pagamenti online non configurati. +
+ )} +
+ +
+
+ ); + })()}