130 lines
4.4 KiB
TypeScript
130 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { TrendingUp, TrendingDown, Wallet, CreditCard } from "lucide-react";
|
|
import type { BankingData } from "@/lib/types";
|
|
import { getAccountBalance } from "@/lib/account-utils";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface OverviewCardsProps {
|
|
data: BankingData;
|
|
}
|
|
|
|
export function OverviewCards({ data }: OverviewCardsProps) {
|
|
const totalBalance = data.accounts.reduce(
|
|
(sum, acc) => sum + getAccountBalance(acc),
|
|
0,
|
|
);
|
|
|
|
const thisMonth = new Date();
|
|
thisMonth.setDate(1);
|
|
const thisMonthStr = thisMonth.toISOString().slice(0, 7);
|
|
|
|
const monthTransactions = data.transactions.filter((t) =>
|
|
t.date.startsWith(thisMonthStr),
|
|
);
|
|
|
|
const income = monthTransactions
|
|
.filter((t) => t.amount > 0)
|
|
.reduce((sum, t) => sum + t.amount, 0);
|
|
|
|
const expenses = monthTransactions
|
|
.filter((t) => t.amount < 0)
|
|
.reduce((sum, t) => sum + Math.abs(t.amount), 0);
|
|
|
|
const reconciled = data.transactions.filter((t) => t.isReconciled).length;
|
|
const total = data.transactions.length;
|
|
const reconciledPercent =
|
|
total > 0 ? Math.round((reconciled / total) * 100) : 0;
|
|
|
|
const formatCurrency = (amount: number) => {
|
|
return new Intl.NumberFormat("fr-FR", {
|
|
style: "currency",
|
|
currency: "EUR",
|
|
}).format(amount);
|
|
};
|
|
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
|
|
Solde Total
|
|
</CardTitle>
|
|
<Wallet className="h-3 w-3 md:h-4 md:w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div
|
|
className={cn(
|
|
"text-xl md:text-2xl font-bold",
|
|
totalBalance >= 0 ? "text-emerald-600" : "text-red-600",
|
|
)}
|
|
>
|
|
{formatCurrency(totalBalance)}
|
|
</div>
|
|
<p className="text-[10px] md:text-xs text-muted-foreground mt-1">
|
|
{data.accounts.length} compte{data.accounts.length > 1 ? "s" : ""}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
|
|
Revenus du mois
|
|
</CardTitle>
|
|
<TrendingUp className="h-3 w-3 md:h-4 md:w-4 text-emerald-600" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-xl md:text-2xl font-bold text-emerald-600">
|
|
{formatCurrency(income)}
|
|
</div>
|
|
<p className="text-[10px] md:text-xs text-muted-foreground mt-1">
|
|
{monthTransactions.filter((t) => t.amount > 0).length} opération
|
|
{monthTransactions.filter((t) => t.amount > 0).length > 1
|
|
? "s"
|
|
: ""}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
|
|
Dépenses du mois
|
|
</CardTitle>
|
|
<TrendingDown className="h-3 w-3 md:h-4 md:w-4 text-red-600" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-xl md:text-2xl font-bold text-red-600">
|
|
{formatCurrency(expenses)}
|
|
</div>
|
|
<p className="text-[10px] md:text-xs text-muted-foreground mt-1">
|
|
{monthTransactions.filter((t) => t.amount < 0).length} opération
|
|
{monthTransactions.filter((t) => t.amount < 0).length > 1
|
|
? "s"
|
|
: ""}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
|
|
Pointage
|
|
</CardTitle>
|
|
<CreditCard className="h-3 w-3 md:h-4 md:w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-xl md:text-2xl font-bold">
|
|
{reconciledPercent}%
|
|
</div>
|
|
<p className="text-[10px] md:text-xs text-muted-foreground mt-1">
|
|
{reconciled} / {total} opérations pointées
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|