95 lines
3.0 KiB
TypeScript
95 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Progress } from "@/components/ui/progress";
|
|
import type { BankingData } from "@/lib/types";
|
|
import { cn } from "@/lib/utils";
|
|
import { Building2 } 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);
|
|
};
|
|
|
|
const totalPositive = data.accounts
|
|
.filter((a) => getAccountBalance(a) > 0)
|
|
.reduce((sum, a) => sum + getAccountBalance(a), 0);
|
|
|
|
if (data.accounts.length === 0) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Mes Comptes</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-col items-center justify-center py-8 text-center">
|
|
<Building2 className="w-12 h-12 text-muted-foreground mb-3" />
|
|
<p className="text-muted-foreground">Aucun compte</p>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
Importez un fichier OFX pour ajouter un compte
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
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>
|
|
<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>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|