132 lines
4.4 KiB
TypeScript
132 lines
4.4 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";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
|
|
interface AccountCardProps {
|
|
account: Account;
|
|
folder?: Folder;
|
|
transactionCount: number;
|
|
onEdit: (account: Account) => void;
|
|
onDelete: (accountId: string) => void;
|
|
formatCurrency: (amount: number) => string;
|
|
isSelected?: boolean;
|
|
onSelect?: (accountId: string, selected: boolean) => void;
|
|
}
|
|
|
|
export function AccountCard({
|
|
account,
|
|
folder,
|
|
transactionCount,
|
|
onEdit,
|
|
onDelete,
|
|
formatCurrency,
|
|
isSelected = false,
|
|
onSelect,
|
|
}: AccountCardProps) {
|
|
const Icon = accountTypeIcons[account.type];
|
|
|
|
return (
|
|
<Card className={cn("relative", isSelected && "ring-2 ring-primary")}>
|
|
<CardHeader className="pb-1.5">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center gap-2 flex-1">
|
|
{onSelect && (
|
|
<Checkbox
|
|
checked={isSelected}
|
|
onCheckedChange={(checked) =>
|
|
onSelect(account.id, checked === true)
|
|
}
|
|
onClick={(e) => e.stopPropagation()}
|
|
/>
|
|
)}
|
|
<div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
|
|
<Icon className="w-4 h-4 text-primary" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<CardTitle className="text-sm font-semibold truncate">{account.name}</CardTitle>
|
|
<p className="text-xs text-muted-foreground">
|
|
{accountTypeLabels[account.type]}
|
|
</p>
|
|
{account.accountNumber && (
|
|
<p className="text-xs text-muted-foreground mt-0.5 truncate">
|
|
{account.accountNumber}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-7 w-7 shrink-0">
|
|
<MoreVertical className="w-3.5 h-3.5" />
|
|
</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 className="pt-1.5">
|
|
<div
|
|
className={cn(
|
|
"text-xl font-bold mb-1.5",
|
|
account.balance >= 0 ? "text-emerald-600" : "text-red-600"
|
|
)}
|
|
>
|
|
{formatCurrency(account.balance)}
|
|
</div>
|
|
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
|
<Link
|
|
href={`/transactions?accountId=${account.id}`}
|
|
className="hover:text-primary hover:underline truncate"
|
|
>
|
|
{transactionCount} transactions
|
|
</Link>
|
|
{folder && <span className="truncate ml-2">{folder.name}</span>}
|
|
</div>
|
|
{account.lastImport && (
|
|
<p className="text-xs text-muted-foreground mt-1.5">
|
|
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-1.5"
|
|
>
|
|
<ExternalLink className="w-3 h-3" />
|
|
Accéder au portail banque
|
|
</a>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|