113 lines
3.6 KiB
TypeScript
113 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { MoreVertical, Pencil, Trash2, ExternalLink } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import Link from "next/link";
|
|
import type { Account, Folder } from "@/lib/types";
|
|
import { accountTypeIcons, accountTypeLabels } from "./constants";
|
|
|
|
interface AccountCardProps {
|
|
account: Account;
|
|
folder?: Folder;
|
|
transactionCount: number;
|
|
onEdit: (account: Account) => void;
|
|
onDelete: (accountId: string) => void;
|
|
formatCurrency: (amount: number) => string;
|
|
}
|
|
|
|
export function AccountCard({
|
|
account,
|
|
folder,
|
|
transactionCount,
|
|
onEdit,
|
|
onDelete,
|
|
formatCurrency,
|
|
}: AccountCardProps) {
|
|
const Icon = accountTypeIcons[account.type];
|
|
|
|
return (
|
|
<Card className="relative">
|
|
<CardHeader className="pb-2">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
|
|
<Icon className="w-5 h-5 text-primary" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-base">{account.name}</CardTitle>
|
|
<p className="text-xs text-muted-foreground">
|
|
{accountTypeLabels[account.type]}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8">
|
|
<MoreVertical className="w-4 h-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={() => onEdit(account)}>
|
|
<Pencil className="w-4 h-4 mr-2" />
|
|
Modifier
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => onDelete(account.id)}
|
|
className="text-red-600"
|
|
>
|
|
<Trash2 className="w-4 h-4 mr-2" />
|
|
Supprimer
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div
|
|
className={cn(
|
|
"text-2xl font-bold mb-2",
|
|
account.balance >= 0 ? "text-emerald-600" : "text-red-600"
|
|
)}
|
|
>
|
|
{formatCurrency(account.balance)}
|
|
</div>
|
|
<div className="flex items-center justify-between text-sm text-muted-foreground">
|
|
<Link
|
|
href={`/transactions?accountId=${account.id}`}
|
|
className="hover:text-primary hover:underline"
|
|
>
|
|
{transactionCount} transactions
|
|
</Link>
|
|
{folder && <span>{folder.name}</span>}
|
|
</div>
|
|
{account.lastImport && (
|
|
<p className="text-xs text-muted-foreground mt-2">
|
|
Dernier import:{" "}
|
|
{new Date(account.lastImport).toLocaleDateString("fr-FR")}
|
|
</p>
|
|
)}
|
|
{account.externalUrl && (
|
|
<a
|
|
href={account.externalUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1 text-xs text-primary hover:underline mt-2"
|
|
>
|
|
<ExternalLink className="w-3 h-3" />
|
|
Accéder au portail banque
|
|
</a>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|