feat: refactor dashboard and account pages to utilize new layout components, enhancing structure and loading states

2025-11-27 12:44:44 +01:00
parent e469656e0d
commit 88937579e2
40 changed files with 2781 additions and 2226 deletions
--- a/components/accounts/account-card.tsx
+++ b/components/accounts/account-card.tsx
@@ -0,0 +1,112 @@
+"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>
+  );
+}
+