feat: implement account filtering and enhance accounts summary display with folder organization
This commit is contained in:
Julien Froidefond
@@ -1,10 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import type { BankingData } from "@/lib/types";
|
||||
import type { BankingData, Account, Folder } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Building2 } from "lucide-react";
|
||||
import { Building2, Folder as FolderIcon } from "lucide-react";
|
||||
import { getAccountBalance } from "@/lib/account-utils";
|
||||
|
||||
interface AccountsSummaryProps {
|
||||
@@ -19,9 +20,132 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
|
||||
}).format(amount);
|
||||
};
|
||||
|
||||
const totalPositive = data.accounts
|
||||
.filter((a) => getAccountBalance(a) > 0)
|
||||
.reduce((sum, a) => sum + getAccountBalance(a), 0);
|
||||
// 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">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<Building2 className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-sm">{account.name}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{account.accountNumber}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className={cn(
|
||||
"font-semibold tabular-nums",
|
||||
realBalance >= 0
|
||||
? "text-emerald-600"
|
||||
: "text-red-600",
|
||||
)}
|
||||
>
|
||||
{formatCurrency(realBalance)}
|
||||
</span>
|
||||
</div>
|
||||
{realBalance > 0 && (
|
||||
<Progress value={percentage} className="h-1.5" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Child folders */}
|
||||
{childFolders.map((childFolder) =>
|
||||
renderFolderSection(childFolder, level + 1),
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (data.accounts.length === 0) {
|
||||
return (
|
||||
@@ -42,51 +166,87 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
|
||||
);
|
||||
}
|
||||
|
||||
const orphanAccounts = accountsByFolder["no-folder"] || [];
|
||||
const orphanTotal = orphanAccounts.reduce(
|
||||
(sum, a) => sum + getAccountBalance(a),
|
||||
0,
|
||||
);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Mes Comptes</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{data.accounts.map((account) => {
|
||||
const realBalance = getAccountBalance(account);
|
||||
const percentage =
|
||||
totalPositive > 0
|
||||
? Math.max(0, (realBalance / totalPositive) * 100)
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div key={account.id} className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<Building2 className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-sm">{account.name}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{account.accountNumber}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<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(
|
||||
"font-semibold tabular-nums",
|
||||
realBalance >= 0
|
||||
? "text-emerald-600"
|
||||
: "text-red-600",
|
||||
"text-xs font-semibold tabular-nums ml-auto",
|
||||
orphanTotal >= 0 ? "text-emerald-600" : "text-red-600",
|
||||
)}
|
||||
>
|
||||
{formatCurrency(realBalance)}
|
||||
{formatCurrency(orphanTotal)}
|
||||
</span>
|
||||
</div>
|
||||
{realBalance > 0 && (
|
||||
<Progress value={percentage} className="h-1.5" />
|
||||
)}
|
||||
</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">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<Building2 className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-sm">{account.name}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{account.accountNumber}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className={cn(
|
||||
"font-semibold tabular-nums",
|
||||
realBalance >= 0
|
||||
? "text-emerald-600"
|
||||
: "text-red-600",
|
||||
)}
|
||||
>
|
||||
{formatCurrency(realBalance)}
|
||||
</span>
|
||||
</div>
|
||||
{realBalance > 0 && (
|
||||
<Progress value={percentage} className="h-1.5" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Folders */}
|
||||
{rootFolders.map((folder) => renderFolderSection(folder))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user