275 lines
10 KiB
TypeScript
275 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Progress } from "@/components/ui/progress";
|
|
import type { BankingData, Account, Folder } from "@/lib/types";
|
|
import { cn } from "@/lib/utils";
|
|
import { Building2, Folder as FolderIcon } from "lucide-react";
|
|
import { getAccountBalance } from "@/lib/account-utils";
|
|
|
|
interface AccountsSummaryProps {
|
|
data: BankingData;
|
|
}
|
|
|
|
export function AccountsSummary({ data }: AccountsSummaryProps) {
|
|
const formatCurrency = (amount: number) => {
|
|
return new Intl.NumberFormat("fr-FR", {
|
|
style: "currency",
|
|
currency: "EUR",
|
|
}).format(amount);
|
|
};
|
|
|
|
// Group accounts by folder
|
|
const accountsByFolder = useMemo(() => {
|
|
const grouped: Record<string, Account[]> = {};
|
|
|
|
data.accounts.forEach((account) => {
|
|
const folderId = account.folderId || "no-folder";
|
|
if (!grouped[folderId]) {
|
|
grouped[folderId] = [];
|
|
}
|
|
grouped[folderId].push(account);
|
|
});
|
|
|
|
// Sort accounts within each folder by name
|
|
Object.keys(grouped).forEach((folderId) => {
|
|
grouped[folderId].sort((a, b) => a.name.localeCompare(b.name));
|
|
});
|
|
|
|
return grouped;
|
|
}, [data.accounts]);
|
|
|
|
// Get root folders (folders without parent) sorted by name
|
|
const rootFolders = useMemo(() => {
|
|
return data.folders
|
|
.filter((f) => !f.parentId)
|
|
.sort((a, b) => a.name.localeCompare(b.name));
|
|
}, [data.folders]);
|
|
|
|
// Helper to get child folders recursively
|
|
const getChildFolders = (parentId: string): Folder[] => {
|
|
return data.folders
|
|
.filter((f) => f.parentId === parentId)
|
|
.sort((a, b) => a.name.localeCompare(b.name));
|
|
};
|
|
|
|
// Render folder section recursively
|
|
const renderFolderSection = (folder: Folder, level: number = 0) => {
|
|
const folderAccounts = accountsByFolder[folder.id] || [];
|
|
const childFolders = getChildFolders(folder.id);
|
|
const folderTotal = folderAccounts.reduce(
|
|
(sum, a) => sum + getAccountBalance(a),
|
|
0,
|
|
);
|
|
|
|
if (folderAccounts.length === 0 && childFolders.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div key={folder.id} className={level > 0 ? "mt-4" : ""}>
|
|
{/* Folder header */}
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<FolderIcon className="w-4 h-4 text-muted-foreground" />
|
|
<h3
|
|
className={cn(
|
|
"font-semibold text-sm",
|
|
level > 0 && "text-muted-foreground",
|
|
)}
|
|
>
|
|
{folder.name}
|
|
</h3>
|
|
{folderAccounts.length > 0 && (
|
|
<span className="text-xs text-muted-foreground">
|
|
({folderAccounts.length})
|
|
</span>
|
|
)}
|
|
{folderTotal !== 0 && (
|
|
<span
|
|
className={cn(
|
|
"text-xs font-semibold tabular-nums ml-auto",
|
|
folderTotal >= 0 ? "text-emerald-600" : "text-red-600",
|
|
)}
|
|
>
|
|
{formatCurrency(folderTotal)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Accounts in this folder */}
|
|
{folderAccounts.length > 0 && (
|
|
<div className={cn("space-y-3", level > 0 && "ml-4")}>
|
|
{folderAccounts.map((account) => {
|
|
const realBalance = getAccountBalance(account);
|
|
const totalPositive = data.accounts
|
|
.filter((a) => getAccountBalance(a) > 0)
|
|
.reduce((sum, a) => sum + getAccountBalance(a), 0);
|
|
const percentage =
|
|
totalPositive > 0
|
|
? Math.max(0, (realBalance / totalPositive) * 100)
|
|
: 0;
|
|
|
|
return (
|
|
<div
|
|
key={account.id}
|
|
className="space-y-2.5 p-3 rounded-xl bg-muted/30 hover:bg-muted/50 border border-border/50 hover:border-primary/20 transition-all duration-300 group"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
|
<Building2 className="w-5 h-5 text-primary" />
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold text-sm">{account.name}</p>
|
|
<p className="text-xs text-muted-foreground/70 mt-0.5">
|
|
{account.accountNumber}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<span
|
|
className={cn(
|
|
"font-bold tabular-nums text-base",
|
|
realBalance >= 0
|
|
? "text-emerald-600 dark:text-emerald-400"
|
|
: "text-red-600 dark:text-red-400",
|
|
)}
|
|
>
|
|
{formatCurrency(realBalance)}
|
|
</span>
|
|
</div>
|
|
{realBalance > 0 && (
|
|
<Progress value={percentage} className="h-2 rounded-full" />
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{/* Child folders */}
|
|
{childFolders.map((childFolder) =>
|
|
renderFolderSection(childFolder, level + 1),
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
if (data.accounts.length === 0) {
|
|
return (
|
|
<Card className="card-hover">
|
|
<CardHeader className="pb-4">
|
|
<CardTitle className="text-base md:text-lg font-bold">
|
|
Mes Comptes
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-col items-center justify-center py-12 text-center">
|
|
<Building2 className="w-12 h-12 text-muted-foreground/50 mb-4" />
|
|
<p className="text-muted-foreground font-medium">Aucun compte</p>
|
|
<p className="text-sm text-muted-foreground/70 mt-2">
|
|
Importez un fichier OFX pour ajouter un compte
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
const orphanAccounts = accountsByFolder["no-folder"] || [];
|
|
const orphanTotal = orphanAccounts.reduce(
|
|
(sum, a) => sum + getAccountBalance(a),
|
|
0,
|
|
);
|
|
|
|
return (
|
|
<Card className="card-hover">
|
|
<CardHeader className="pb-4">
|
|
<CardTitle className="text-base md:text-lg font-bold">
|
|
Mes Comptes
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-6">
|
|
{/* Accounts without folder */}
|
|
{orphanAccounts.length > 0 && (
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<FolderIcon className="w-4 h-4 text-muted-foreground" />
|
|
<h3 className="font-semibold text-sm">Sans dossier</h3>
|
|
<span className="text-xs text-muted-foreground">
|
|
({orphanAccounts.length})
|
|
</span>
|
|
{orphanTotal !== 0 && (
|
|
<span
|
|
className={cn(
|
|
"text-xs font-semibold tabular-nums ml-auto",
|
|
orphanTotal >= 0 ? "text-emerald-600" : "text-red-600",
|
|
)}
|
|
>
|
|
{formatCurrency(orphanTotal)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="space-y-3">
|
|
{orphanAccounts.map((account) => {
|
|
const realBalance = getAccountBalance(account);
|
|
const totalPositive = data.accounts
|
|
.filter((a) => getAccountBalance(a) > 0)
|
|
.reduce((sum, a) => sum + getAccountBalance(a), 0);
|
|
const percentage =
|
|
totalPositive > 0
|
|
? Math.max(0, (realBalance / totalPositive) * 100)
|
|
: 0;
|
|
|
|
return (
|
|
<div
|
|
key={account.id}
|
|
className="space-y-2.5 p-3 rounded-xl bg-muted/30 hover:bg-muted/50 border border-border/50 hover:border-primary/20 transition-all duration-300 group"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
|
<Building2 className="w-5 h-5 text-primary" />
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold text-sm">
|
|
{account.name}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground/70 mt-0.5">
|
|
{account.accountNumber}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<span
|
|
className={cn(
|
|
"font-bold tabular-nums text-base",
|
|
realBalance >= 0
|
|
? "text-emerald-600 dark:text-emerald-400"
|
|
: "text-red-600 dark:text-red-400",
|
|
)}
|
|
>
|
|
{formatCurrency(realBalance)}
|
|
</span>
|
|
</div>
|
|
{realBalance > 0 && (
|
|
<Progress
|
|
value={percentage}
|
|
className="h-2 rounded-full"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Folders */}
|
|
{rootFolders.map((folder) => renderFolderSection(folder))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|