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

Update Reports.tsx

Browse Source
This commit is contained in:
frakarr
2025-12-11 21:16:37 +01:00
committed by GitHub
parent bceda03e78
commit 45c766a7f9
1 changed files with 209 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

317
pages/Reports.tsx
View File

@@ -1,8 +1,8 @@
import React, { useEffect, useState, useMemo } from 'react'; import React, { useEffect, useState, useMemo } from 'react';
import { CondoService } from '../services/mockDb'; import { CondoService } from '../services/mockDb';
import { Payment, Family, Condo } from '../types'; import { Payment, Family, Condo, CondoExpense } from '../types';
import { PieChart, Download, Calendar, Search, CreditCard, Banknote, Filter, ArrowUpRight } from 'lucide-react'; import { PieChart, Download, Calendar, Search, CreditCard, Banknote, Filter, ArrowUpRight, TrendingDown, Wallet, ArrowDownRight } from 'lucide-react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
const MONTH_NAMES = [ const MONTH_NAMES = [
@@ -13,7 +13,8 @@ const MONTH_NAMES = [
export const ReportsPage: React.FC = () => { export const ReportsPage: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [payments, setPayments] = useState<Payment[]>([]); const [payments, setPayments] = useState<Payment[]>([]); // Entrate
const [expenses, setExpenses] = useState<CondoExpense[]>([]); // Uscite
const [families, setFamilies] = useState<Family[]>([]); const [families, setFamilies] = useState<Family[]>([]);
const [activeCondo, setActiveCondo] = useState<Condo | undefined>(undefined); const [activeCondo, setActiveCondo] = useState<Condo | undefined>(undefined);
const [availableYears, setAvailableYears] = useState<number[]>([]); const [availableYears, setAvailableYears] = useState<number[]>([]);
@@ -22,6 +23,9 @@ export const ReportsPage: React.FC = () => {
const [selectedYear, setSelectedYear] = useState<number>(new Date().getFullYear()); const [selectedYear, setSelectedYear] = useState<number>(new Date().getFullYear());
const [selectedMonth, setSelectedMonth] = useState<number | 'ALL'>('ALL'); const [selectedMonth, setSelectedMonth] = useState<number | 'ALL'>('ALL');
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
// Tab View
const [activeTab, setActiveTab] = useState<'income' | 'expenses' | 'balance'>('balance');
useEffect(() => { useEffect(() => {
const fetchData = async () => { const fetchData = async () => {
@@ -37,12 +41,14 @@ export const ReportsPage: React.FC = () => {
setActiveCondo(condo); setActiveCondo(condo);
if (condo) { if (condo) {
const [payList, famList, years] = await Promise.all([ const [payList, expList, famList, years] = await Promise.all([
CondoService.getCondoPayments(condo.id), CondoService.getCondoPayments(condo.id),
CondoService.getCondoExpenses(undefined), // Fetch ALL to filter locally or by year later
CondoService.getFamilies(condo.id), CondoService.getFamilies(condo.id),
CondoService.getAvailableYears() CondoService.getAvailableYears()
]); ]);
setPayments(payList); setPayments(payList);
setExpenses(expList);
setFamilies(famList); setFamilies(famList);
setAvailableYears(years); setAvailableYears(years);
if (years.length > 0 && !years.includes(selectedYear)) { if (years.length > 0 && !years.includes(selectedYear)) {
@@ -58,8 +64,8 @@ export const ReportsPage: React.FC = () => {
fetchData(); fetchData();
}, [navigate]); }, [navigate]);
// Filter Logic // --- FILTERED INCOME DATA (Payments from Families) ---
const filteredData = useMemo(() => { const filteredIncome = useMemo(() => {
return payments.filter(p => { return payments.filter(p => {
const matchesYear = p.forYear === selectedYear; const matchesYear = p.forYear === selectedYear;
const matchesMonth = selectedMonth === 'ALL' || p.forMonth === selectedMonth; const matchesMonth = selectedMonth === 'ALL' || p.forMonth === selectedMonth;
@@ -82,15 +88,41 @@ export const ReportsPage: React.FC = () => {
}); });
}, [payments, families, selectedYear, selectedMonth, searchTerm]); }, [payments, families, selectedYear, selectedMonth, searchTerm]);
// Statistics // --- FILTERED EXPENSES DATA (Payments to Suppliers) ---
const stats = useMemo(() => { const filteredExpenses = useMemo(() => {
const totalAmount = filteredData.reduce((acc, curr) => acc + curr.amount, 0); return expenses.filter(e => {
const paypalAmount = filteredData.filter(p => p.method === 'PayPal').reduce((acc, curr) => acc + curr.amount, 0); // Determine "Year" and "Month" for expense. Use Payment Date if exists, else CreatedAt
const manualAmount = filteredData.filter(p => p.method === 'Manuale').reduce((acc, curr) => acc + curr.amount, 0); const dateRef = e.paymentDate ? new Date(e.paymentDate) : new Date(e.createdAt);
const count = filteredData.length; const expYear = dateRef.getFullYear();
const expMonth = dateRef.getMonth() + 1; // 1-12
return { totalAmount, paypalAmount, manualAmount, count }; const matchesYear = expYear === selectedYear;
}, [filteredData]); const matchesMonth = selectedMonth === 'ALL' || expMonth === selectedMonth;
const matchesSearch = searchTerm === '' ||
e.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
e.supplierName.toLowerCase().includes(searchTerm.toLowerCase());
return matchesYear && matchesMonth && matchesSearch;
});
}, [expenses, selectedYear, selectedMonth, searchTerm]);
// Statistics Calculation
const stats = useMemo(() => {
// Income Stats
const totalIncome = filteredIncome.reduce((acc, curr) => acc + curr.amount, 0);
const incomeCount = filteredIncome.length;
// Expense Stats
const totalExpenses = filteredExpenses.reduce((acc, curr) => acc + curr.amount, 0);
const expenseCount = filteredExpenses.length;
const paidExpenses = filteredExpenses.filter(e => e.status === 'PAID').reduce((acc, curr) => acc + curr.amount, 0);
// Balance
const balance = totalIncome - totalExpenses;
return { totalIncome, incomeCount, totalExpenses, expenseCount, paidExpenses, balance };
}, [filteredIncome, filteredExpenses]);
const getMonthLabel = (month: number) => { const getMonthLabel = (month: number) => {
if (month === 13) return "Extra"; if (month === 13) return "Extra";
@@ -101,17 +133,38 @@ export const ReportsPage: React.FC = () => {
const handleExportCSV = () => { const handleExportCSV = () => {
if (!activeCondo) return; if (!activeCondo) return;
const headers = ["Data Pagamento", "Famiglia", "Interno", "Mese Rif.", "Anno Rif.", "Importo", "Metodo", "Note"]; let headers: string[] = [];
const rows = filteredData.map(p => [ let rows: string[][] = [];
new Date(p.datePaid).toLocaleDateString(), let filename = "";
p.familyName,
p.familyUnit, if (activeTab === 'income' || activeTab === 'balance') {
getMonthLabel(p.forMonth), // Export Income
p.forYear, headers = ["Data Pagamento", "Famiglia", "Interno", "Mese Rif.", "Anno Rif.", "Importo", "Metodo", "Note"];
p.amount.toFixed(2), rows = filteredIncome.map(p => [
p.method, new Date(p.datePaid).toLocaleDateString(),
p.notes ? `"${p.notes.replace(/"/g, '""')}"` : "" p.familyName,
]); p.familyUnit,
getMonthLabel(p.forMonth),
p.forYear.toString(),
p.amount.toFixed(2),
p.method,
p.notes ? `"${p.notes.replace(/"/g, '""')}"` : ""
]);
filename = `Report_Entrate_${activeCondo.name}_${selectedYear}.csv`;
} else {
// Export Expenses
headers = ["Data", "Fornitore", "Descrizione", "Importo", "Stato", "Metodo", "Fattura"];
rows = filteredExpenses.map(e => [
e.paymentDate ? new Date(e.paymentDate).toLocaleDateString() : new Date(e.createdAt).toLocaleDateString(),
e.supplierName,
`"${e.description}"`,
e.amount.toFixed(2),
e.status,
e.paymentMethod || '',
e.invoiceNumber || ''
]);
filename = `Report_Uscite_${activeCondo.name}_${selectedYear}.csv`;
}
const csvContent = "data:text/csv;charset=utf-8," const csvContent = "data:text/csv;charset=utf-8,"
+ headers.join(",") + "\n" + headers.join(",") + "\n"
@@ -120,7 +173,7 @@ export const ReportsPage: React.FC = () => {
const encodedUri = encodeURI(csvContent); const encodedUri = encodeURI(csvContent);
const link = document.createElement("a"); const link = document.createElement("a");
link.setAttribute("href", encodedUri); link.setAttribute("href", encodedUri);
link.setAttribute("download", `Report_Pagamenti_${activeCondo.name}_${selectedYear}.csv`); link.setAttribute("download", filename);
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
document.body.removeChild(link); document.body.removeChild(link);
@@ -129,13 +182,13 @@ export const ReportsPage: React.FC = () => {
if (loading) return <div className="p-8 text-center text-slate-400">Caricamento report...</div>; if (loading) return <div className="p-8 text-center text-slate-400">Caricamento report...</div>;
return ( return (
<div className="space-y-8 pb-20 animate-fade-in"> <div className="space-y-6 pb-20 animate-fade-in">
<div className="flex flex-col md:flex-row justify-between md:items-end gap-4"> <div className="flex flex-col md:flex-row justify-between md:items-end gap-4">
<div> <div>
<h2 className="text-2xl font-bold text-slate-800 flex items-center gap-2"> <h2 className="text-2xl font-bold text-slate-800 flex items-center gap-2">
<PieChart className="w-6 h-6 text-blue-600"/> Reportistica & Transazioni <PieChart className="w-6 h-6 text-blue-600"/> Reportistica & Bilancio
</h2> </h2>
<p className="text-slate-500 text-sm">Analisi incassi per {activeCondo?.name}</p> <p className="text-slate-500 text-sm">Analisi finanziaria per {activeCondo?.name}</p>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
@@ -171,11 +224,11 @@ export const ReportsPage: React.FC = () => {
</select> </select>
</div> </div>
<div className="col-span-2"> <div className="col-span-2">
<label className="text-xs font-bold text-slate-500 uppercase mb-1 block">Cerca Famiglia/ID</label> <label className="text-xs font-bold text-slate-500 uppercase mb-1 block">Cerca...</label>
<div className="relative"> <div className="relative">
<input <input
type="text" type="text"
placeholder="Cerca..." placeholder={activeTab === 'income' ? "Cerca Famiglia..." : "Cerca Fornitore..."}
value={searchTerm} value={searchTerm}
onChange={e => setSearchTerm(e.target.value)} onChange={e => setSearchTerm(e.target.value)}
className="w-full border p-2 pl-9 rounded-lg text-slate-700 bg-slate-50" className="w-full border p-2 pl-9 rounded-lg text-slate-700 bg-slate-50"
@@ -185,94 +238,142 @@ export const ReportsPage: React.FC = () => {
</div> </div>
</div> </div>
</div> </div>
{/* TABS */}
<div className="flex border-b border-slate-200">
<button onClick={() => setActiveTab('balance')} className={`px-4 py-2 font-medium text-sm flex items-center gap-2 border-b-2 transition-colors ${activeTab === 'balance' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>
<Wallet className="w-4 h-4"/> Bilancio
</button>
<button onClick={() => setActiveTab('income')} className={`px-4 py-2 font-medium text-sm flex items-center gap-2 border-b-2 transition-colors ${activeTab === 'income' ? 'border-green-600 text-green-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>
<ArrowUpRight className="w-4 h-4"/> Entrate (Rate)
</button>
<button onClick={() => setActiveTab('expenses')} className={`px-4 py-2 font-medium text-sm flex items-center gap-2 border-b-2 transition-colors ${activeTab === 'expenses' ? 'border-red-600 text-red-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>
<TrendingDown className="w-4 h-4"/> Uscite (Fornitori)
</button>
</div>
{/* Stats Cards */} {/* Overview Cards (Dynamic based on Tab) */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="bg-blue-600 text-white p-6 rounded-xl shadow-lg shadow-blue-200"> {/* IN (Always shown or contextual) */}
<p className="text-blue-100 text-sm font-medium mb-1">Incasso Totale</p> <div className={`p-6 rounded-xl shadow-lg transition-all ${activeTab === 'expenses' ? 'bg-white border border-slate-200 opacity-60' : 'bg-green-600 text-white shadow-green-200'}`}>
<h3 className="text-3xl font-bold">€ {stats.totalAmount.toLocaleString('it-IT', { minimumFractionDigits: 2 })}</h3> <p className={`${activeTab === 'expenses' ? 'text-slate-500' : 'text-green-100'} text-sm font-medium mb-1`}>Totale Entrate</p>
<p className="text-blue-200 text-xs mt-2 flex items-center gap-1"> <h3 className={`text-3xl font-bold ${activeTab === 'expenses' ? 'text-slate-800' : ''}`}>€ {stats.totalIncome.toLocaleString('it-IT', { minimumFractionDigits: 2 })}</h3>
<ArrowUpRight className="w-3 h-3"/> su {stats.count} transazioni
</p>
</div>
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm flex items-center justify-between">
<div>
<p className="text-slate-500 text-xs font-bold uppercase mb-1 flex items-center gap-1"><CreditCard className="w-3 h-3"/> PayPal / Online</p>
<h3 className="text-2xl font-bold text-slate-800">€ {stats.paypalAmount.toLocaleString('it-IT', { minimumFractionDigits: 2 })}</h3>
</div>
<div className="h-10 w-10 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center font-bold text-xs">
{stats.count > 0 ? Math.round((stats.paypalAmount / stats.totalAmount) * 100) : 0}%
</div>
</div> </div>
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm flex items-center justify-between"> {/* OUT */}
<div> <div className={`p-6 rounded-xl shadow-lg transition-all ${activeTab === 'income' ? 'bg-white border border-slate-200 opacity-60' : 'bg-red-600 text-white shadow-red-200'}`}>
<p className="text-slate-500 text-xs font-bold uppercase mb-1 flex items-center gap-1"><Banknote className="w-3 h-3"/> Manuale / Bonifico</p> <p className={`${activeTab === 'income' ? 'text-slate-500' : 'text-red-100'} text-sm font-medium mb-1`}>Totale Uscite</p>
<h3 className="text-2xl font-bold text-slate-800">€ {stats.manualAmount.toLocaleString('it-IT', { minimumFractionDigits: 2 })}</h3> <h3 className={`text-3xl font-bold ${activeTab === 'income' ? 'text-slate-800' : ''}`}>€ {stats.totalExpenses.toLocaleString('it-IT', { minimumFractionDigits: 2 })}</h3>
</div> </div>
<div className="h-10 w-10 bg-slate-100 text-slate-600 rounded-full flex items-center justify-center font-bold text-xs">
{stats.count > 0 ? Math.round((stats.manualAmount / stats.totalAmount) * 100) : 0}% {/* BALANCE */}
</div> <div className={`p-6 rounded-xl shadow-lg border transition-all bg-white border-slate-200`}>
<p className="text-slate-500 text-sm font-medium mb-1 uppercase">Saldo Periodo</p>
<h3 className={`text-3xl font-bold ${stats.balance >= 0 ? 'text-blue-600' : 'text-red-600'}`}>€ {stats.balance.toLocaleString('it-IT', { minimumFractionDigits: 2 })}</h3>
<p className="text-xs text-slate-400 mt-1">Differenza Entrate - Uscite</p>
</div> </div>
</div> </div>
{/* Transactions Table */} {/* MAIN DATA TABLE */}
<div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden"> <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div className="p-4 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center"> <div className="p-4 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center">
<h3 className="font-bold text-slate-800">Dettaglio Transazioni</h3> <h3 className="font-bold text-slate-800">
<span className="text-xs bg-slate-200 text-slate-600 px-2 py-1 rounded-full font-bold">{filteredData.length} risultati</span> {activeTab === 'income' ? 'Dettaglio Versamenti Famiglie' : activeTab === 'expenses' ? 'Dettaglio Spese Fornitori' : 'Movimenti Recenti'}
</h3>
</div> </div>
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="w-full text-left text-sm text-slate-600"> {activeTab === 'expenses' ? (
<thead className="bg-slate-50 text-slate-700 font-semibold border-b border-slate-200"> // EXPENSES TABLE
<tr> <table className="w-full text-left text-sm text-slate-600">
<th className="px-6 py-3 whitespace-nowrap">Data</th> <thead className="bg-slate-50 text-slate-700 font-semibold border-b border-slate-200">
<th className="px-6 py-3">Famiglia</th> <tr>
<th className="px-6 py-3">Riferimento</th> <th className="px-6 py-3">Data</th>
<th className="px-6 py-3">Metodo</th> <th className="px-6 py-3">Fornitore</th>
<th className="px-6 py-3">Note / ID Transazione</th> <th className="px-6 py-3">Descrizione</th>
<th className="px-6 py-3 text-right">Importo</th> <th className="px-6 py-3">Stato</th>
</tr> <th className="px-6 py-3 text-right">Importo</th>
</thead> </tr>
<tbody className="divide-y divide-slate-100"> </thead>
{filteredData.length === 0 ? ( <tbody className="divide-y divide-slate-100">
<tr><td colSpan={6} className="p-8 text-center text-slate-400">Nessuna transazione trovata con i filtri attuali.</td></tr> {filteredExpenses.length === 0 ? (
) : ( <tr><td colSpan={5} className="p-8 text-center text-slate-400">Nessuna spesa trovata.</td></tr>
filteredData.map((t) => ( ) : (
<tr key={t.id} className="hover:bg-slate-50 transition-colors"> filteredExpenses.map(e => (
<td className="px-6 py-4 whitespace-nowrap text-slate-500 font-medium"> <tr key={e.id} className="hover:bg-slate-50 transition-colors">
<div className="flex items-center gap-2"> <td className="px-6 py-4">
<Calendar className="w-4 h-4 text-slate-300"/> {e.paymentDate ? new Date(e.paymentDate).toLocaleDateString() : new Date(e.createdAt).toLocaleDateString()}
{new Date(t.datePaid).toLocaleDateString()} </td>
</div> <td className="px-6 py-4 font-bold text-slate-700">{e.supplierName}</td>
</td> <td className="px-6 py-4">{e.description}</td>
<td className="px-6 py-4"> <td className="px-6 py-4">
<div className="font-bold text-slate-700">{t.familyName}</div> <span className={`px-2 py-1 rounded-full text-[10px] font-bold uppercase ${
<div className="text-xs text-slate-400">Int. {t.familyUnit}</div> e.status === 'PAID' ? 'bg-green-100 text-green-700' :
</td> e.status === 'SUSPENDED' ? 'bg-amber-100 text-amber-700' :
<td className="px-6 py-4"> 'bg-red-100 text-red-700'
<span className="bg-slate-100 text-slate-600 px-2 py-1 rounded text-xs font-bold uppercase"> }`}>
{getMonthLabel(t.forMonth).substring(0, 5)} {t.forYear} {e.status === 'PAID' ? 'Saldato' : e.status === 'SUSPENDED' ? 'Sospeso' : 'Insoluto'}
</span> </span>
</td> </td>
<td className="px-6 py-4"> <td className="px-6 py-4 text-right font-bold text-slate-800">
<span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-bold uppercase ${t.method === 'PayPal' ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700'}`}> € {e.amount.toFixed(2)}
{t.method === 'PayPal' ? <CreditCard className="w-3 h-3"/> : <Banknote className="w-3 h-3"/>} </td>
{t.method} </tr>
</span> ))
</td> )}
<td className="px-6 py-4 max-w-xs truncate text-slate-500 text-xs" title={t.notes}> </tbody>
{t.notes || '-'} </table>
</td> ) : (
<td className="px-6 py-4 text-right font-bold text-slate-800"> // INCOME TABLE (Default for Balance too)
€ {t.amount.toFixed(2)} <table className="w-full text-left text-sm text-slate-600">
</td> <thead className="bg-slate-50 text-slate-700 font-semibold border-b border-slate-200">
</tr> <tr>
)) <th className="px-6 py-3 whitespace-nowrap">Data</th>
)} <th className="px-6 py-3">Famiglia</th>
</tbody> <th className="px-6 py-3">Riferimento</th>
</table> <th className="px-6 py-3">Metodo</th>
<th className="px-6 py-3">Note</th>
<th className="px-6 py-3 text-right">Importo</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-100">
{filteredIncome.length === 0 ? (
<tr><td colSpan={6} className="p-8 text-center text-slate-400">Nessuna transazione trovata.</td></tr>
) : (
filteredIncome.map((t) => (
<tr key={t.id} className="hover:bg-slate-50 transition-colors">
<td className="px-6 py-4 whitespace-nowrap text-slate-500 font-medium">
<div className="flex items-center gap-2">
<Calendar className="w-4 h-4 text-slate-300"/>
{new Date(t.datePaid).toLocaleDateString()}
</div>
</td>
<td className="px-6 py-4">
<div className="font-bold text-slate-700">{t.familyName}</div>
<div className="text-xs text-slate-400">Int. {t.familyUnit}</div>
</td>
<td className="px-6 py-4">
<span className="bg-slate-100 text-slate-600 px-2 py-1 rounded text-xs font-bold uppercase">
{getMonthLabel(t.forMonth).substring(0, 5)} {t.forYear}
</span>
</td>
<td className="px-6 py-4">
<span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-bold uppercase ${t.method === 'PayPal' ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700'}`}>
{t.method === 'PayPal' ? <CreditCard className="w-3 h-3"/> : <Banknote className="w-3 h-3"/>}
{t.method}
</span>
</td>
<td className="px-6 py-4 max-w-xs truncate text-slate-500 text-xs" title={t.notes}>
{t.notes || '-'}
</td>
<td className="px-6 py-4 text-right font-bold text-slate-800">
€ {t.amount.toFixed(2)}
</td>
</tr>
))
)}
</tbody>
</table>
)}
</div> </div>
</div> </div>
</div> </div>