136 lines
4.3 KiB
TypeScript
136 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { CheckCircle2, Circle } from "lucide-react";
|
|
import { CategoryIcon } from "@/components/ui/category-icon";
|
|
import type { BankingData } from "@/lib/types";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface RecentTransactionsProps {
|
|
data: BankingData;
|
|
}
|
|
|
|
export function RecentTransactions({ data }: RecentTransactionsProps) {
|
|
const recentTransactions = [...data.transactions]
|
|
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
|
|
.slice(0, 10);
|
|
|
|
const formatCurrency = (amount: number) => {
|
|
return new Intl.NumberFormat("fr-FR", {
|
|
style: "currency",
|
|
currency: "EUR",
|
|
}).format(amount);
|
|
};
|
|
|
|
const formatDate = (dateStr: string) => {
|
|
return new Date(dateStr).toLocaleDateString("fr-FR", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
});
|
|
};
|
|
|
|
const getCategory = (categoryId: string | null) => {
|
|
if (!categoryId) return null;
|
|
return data.categories.find((c) => c.id === categoryId);
|
|
};
|
|
|
|
const getAccount = (accountId: string) => {
|
|
return data.accounts.find((a) => a.id === accountId);
|
|
};
|
|
|
|
if (recentTransactions.length === 0) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Transactions récentes</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-col items-center justify-center py-8 text-center">
|
|
<p className="text-muted-foreground">Aucune transaction</p>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
Importez un fichier OFX pour commencer
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Transactions récentes</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
{recentTransactions.map((transaction) => {
|
|
const category = getCategory(transaction.categoryId);
|
|
const account = getAccount(transaction.accountId);
|
|
|
|
return (
|
|
<div
|
|
key={transaction.id}
|
|
className="flex items-center gap-3 p-3 rounded-lg bg-muted/50 hover:bg-muted transition-colors"
|
|
>
|
|
<div className="flex-shrink-0">
|
|
{transaction.isReconciled ? (
|
|
<CheckCircle2 className="w-5 h-5 text-emerald-600" />
|
|
) : (
|
|
<Circle className="w-5 h-5 text-muted-foreground" />
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-medium truncate">
|
|
{transaction.description}
|
|
</p>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<span className="text-xs text-muted-foreground">
|
|
{formatDate(transaction.date)}
|
|
</span>
|
|
{account && (
|
|
<span className="text-xs text-muted-foreground">
|
|
• {account.name}
|
|
</span>
|
|
)}
|
|
{category && (
|
|
<Badge
|
|
variant="secondary"
|
|
className="text-xs gap-1"
|
|
style={{
|
|
backgroundColor: `${category.color}20`,
|
|
color: category.color,
|
|
}}
|
|
>
|
|
<CategoryIcon
|
|
icon={category.icon}
|
|
color={category.color}
|
|
size={12}
|
|
/>
|
|
{category.name}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={cn(
|
|
"font-semibold tabular-nums",
|
|
transaction.amount >= 0
|
|
? "text-emerald-600"
|
|
: "text-red-600",
|
|
)}
|
|
>
|
|
{transaction.amount >= 0 ? "+" : ""}
|
|
{formatCurrency(transaction.amount)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|