feat: enhance UI with new background gradients and responsive design adjustments across various components

2025-12-07 17:23:53 +01:00
parent b704cc5a84
commit d4db94d156
10 changed files with 399 additions and 191 deletions
--- a/components/accounts/account-bulk-actions.tsx
+++ b/components/accounts/account-bulk-actions.tsx
@@ -3,6 +3,8 @@
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Trash2 } from "lucide-react";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";

 interface AccountBulkActionsProps {
  selectedCount: number;
@@ -13,18 +15,39 @@ export function AccountBulkActions({
  selectedCount,
  onDelete,
 }: AccountBulkActionsProps) {
+  const isMobile = useIsMobile();
+  
  if (selectedCount === 0) return null;

  return (
-    <Card className="bg-destructive/5 border-destructive/20">
-      <CardContent className="py-3">
-        <div className="flex items-center gap-4">
-          <span className="text-sm font-medium">
+    <Card className="bg-destructive/5 border-destructive/20 sticky top-0 z-10 mb-4">
+      <CardContent className={cn(
+        "py-3",
+        isMobile && "px-3"
+      )}>
+        <div className={cn(
+          "flex items-center gap-2 sm:gap-4",
+          isMobile && "flex-col sm:flex-row"
+        )}>
+          <span className={cn(
+            "font-medium",
+            isMobile ? "text-xs" : "text-sm"
+          )}>
            {selectedCount} compte{selectedCount > 1 ? "s" : ""} sélectionné
            {selectedCount > 1 ? "s" : ""}
          </span>
-          <Button size="sm" variant="destructive" onClick={onDelete}>
-            <Trash2 className="w-4 h-4 mr-1" />
+          <Button 
+            size={isMobile ? "sm" : "sm"} 
+            variant="destructive" 
+            onClick={onDelete}
+            className={cn(
+              isMobile && "w-full sm:w-auto"
+            )}
+          >
+            <Trash2 className={cn(
+              isMobile ? "w-3.5 h-3.5" : "w-4 h-4",
+              "mr-1"
+            )} />
            Supprimer
          </Button>
        </div>
--- a/components/accounts/account-card.tsx
+++ b/components/accounts/account-card.tsx
@@ -23,6 +23,7 @@ import type { Account, Folder } from "@/lib/types";
 import { accountTypeIcons, accountTypeLabels } from "./constants";
 import { Checkbox } from "@/components/ui/checkbox";
 import { getAccountBalance } from "@/lib/account-utils";
+import { useIsMobile } from "@/hooks/use-mobile";

 interface AccountCardProps {
  account: Account;
@@ -49,6 +50,7 @@ export function AccountCard({
  draggableId,
  compact = false,
 }: AccountCardProps) {
+  const isMobile = useIsMobile();
  const Icon = accountTypeIcons[account.type];
  const realBalance = getAccountBalance(account);

@@ -82,14 +84,14 @@ export function AccountCard({
        isDragging && "bg-muted/80",
      )}
    >
-      <CardHeader className="pb-0">
-        <div className="flex items-start justify-between">
-          <div className="flex items-center gap-2 flex-1">
-            {draggableId && (
+      <CardHeader className={cn("pb-0", isMobile && "px-2 pt-2")}>
+        <div className="flex items-start justify-between gap-1.5">
+          <div className="flex items-center gap-1.5 flex-1 min-w-0">
+            {draggableId && !isMobile && (
              <button
                {...attributes}
                {...listeners}
-                className="p-1 hover:bg-muted rounded cursor-grab active:cursor-grabbing"
+                className="p-1 hover:bg-muted rounded cursor-grab active:cursor-grabbing shrink-0"
                onClick={(e) => e.stopPropagation()}
              >
                <GripVertical className="w-4 h-4 text-muted-foreground" />
@@ -102,16 +104,26 @@ export function AccountCard({
                  onSelect(account.id, checked === true)
                }
                onClick={(e) => e.stopPropagation()}
+                className="shrink-0"
              />
            )}
-            <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 className={cn(
+              "rounded-full bg-primary/10 flex items-center justify-center shrink-0",
+              isMobile ? "w-6 h-6" : "w-8 h-8"
+            )}>
+              <Icon className={cn(
+                "text-primary",
+                isMobile ? "w-3 h-3" : "w-4 h-4"
+              )} />
            </div>
-            <div className="min-w-0">
-              <CardTitle className="text-sm font-semibold truncate">
+            <div className="min-w-0 flex-1">
+              <CardTitle className={cn(
+                "font-semibold truncate leading-tight",
+                isMobile ? "text-[11px]" : "text-sm"
+              )}>
                {account.name}
              </CardTitle>
-              {!compact && (
+              {!compact && !isMobile && (
                <>
                  <p className="text-xs text-muted-foreground">
                    {accountTypeLabels[account.type]}
@@ -127,8 +139,13 @@ export function AccountCard({
          </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 variant="ghost" size="icon" className={cn(
+                "shrink-0",
+                isMobile ? "h-5 w-5" : "h-7 w-7"
+              )}>
+                <MoreVertical className={cn(
+                  isMobile ? "w-2.5 h-2.5" : "w-3.5 h-3.5"
+                )} />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
@@ -138,7 +155,7 @@ export function AccountCard({
              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={() => onDelete(account.id)}
-                className="text-red-600"
+                variant="destructive"
              >
                <Trash2 className="w-4 h-4 mr-2" />
                Supprimer
@@ -147,13 +164,18 @@ export function AccountCard({
          </DropdownMenu>
        </div>
      </CardHeader>
-      <CardContent className={cn("pt-1", compact && "pt-0")}>
-        <div className="flex items-center justify-between">
+      <CardContent className={cn(
+        isMobile ? "px-2 pb-2 pt-1" : "pt-1",
+        compact && "pt-0"
+      )}>
+        <div className="flex items-center justify-between gap-1.5">
          <div
            className={cn(
-              compact ? "text-lg" : "text-xl",
-              "font-bold",
-              !compact && "mb-1.5",
+              "font-bold truncate",
+              compact 
+                ? isMobile ? "text-sm" : "text-lg"
+                : isMobile ? "text-base" : "text-xl",
+              !compact && !isMobile && "mb-1.5",
              realBalance >= 0 ? "text-emerald-600" : "text-red-600",
            )}
          >
@@ -162,45 +184,58 @@ export function AccountCard({
          {compact && (
            <Link
              href={`/transactions?accountId=${account.id}`}
-              className="text-xs text-muted-foreground hover:text-primary hover:underline"
+              className={cn(
+                "text-muted-foreground hover:text-primary hover:underline shrink-0 whitespace-nowrap",
+                isMobile ? "text-[9px]" : "text-xs"
+              )}
            >
-              {transactionCount} transactions
+              {transactionCount} txns
            </Link>
          )}
        </div>
        {!compact && (
          <>
-            <div className="flex items-center justify-between text-xs text-muted-foreground">
+            <div className={cn(
+              "flex items-center justify-between gap-2 mt-1",
+              isMobile ? "text-[10px]" : "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.initialBalance !== undefined &&
-              account.initialBalance !== null && (
-                <p className="text-xs text-muted-foreground mt-1.5">
-                  Solde initial: {formatCurrency(account.initialBalance)}
-                </p>
+              {folder && !isMobile && (
+                <span className="truncate ml-2 shrink-0">{folder.name}</span>
              )}
-            {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>
+            </div>
+            {!isMobile && (
+              <>
+                {account.initialBalance !== undefined &&
+                  account.initialBalance !== null && (
+                    <p className="text-xs text-muted-foreground mt-1.5">
+                      Solde initial: {formatCurrency(account.initialBalance)}
+                    </p>
+                  )}
+                {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>
+                )}
+              </>
            )}
          </>
        )}
--- a/components/dashboard/overview-cards.tsx
+++ b/components/dashboard/overview-cards.tsx
@@ -13,7 +13,7 @@ interface OverviewCardsProps {
 export function OverviewCards({ data }: OverviewCardsProps) {
  const totalBalance = data.accounts.reduce(
    (sum, acc) => sum + getAccountBalance(acc),
-    0,
+    0
  );

  const thisMonth = new Date();
@@ -21,7 +21,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
  const thisMonthStr = thisMonth.toISOString().slice(0, 7);

  const monthTransactions = data.transactions.filter((t) =>
-    t.date.startsWith(thisMonthStr),
+    t.date.startsWith(thisMonthStr)
  );

  const income = monthTransactions
@@ -45,41 +45,52 @@ export function OverviewCards({ data }: OverviewCardsProps) {
  };

  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">
+    <div className="grid gap-3 sm:gap-4 grid-cols-2 lg:grid-cols-4">
+      <Card
+        className={cn(
+          "border shadow-sm bg-gradient-to-br",
+          totalBalance >= 0
+            ? "from-emerald-50/50 to-card dark:from-emerald-950/20 dark:to-card"
+            : "from-red-50/50 to-card dark:from-red-950/20 dark:to-card"
+        )}
+      >
+        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
+          <CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
            Solde Total
          </CardTitle>
-          <Wallet className="h-3 w-3 md:h-4 md:w-4 text-muted-foreground" />
+          <div className="rounded-full bg-muted/50 p-2 shrink-0">
+            <Wallet className="h-4 w-4 text-muted-foreground" />
+          </div>
        </CardHeader>
-        <CardContent>
+        <CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
          <div
            className={cn(
-              "text-xl md:text-2xl font-bold",
-              totalBalance >= 0 ? "text-emerald-600" : "text-red-600",
+              "text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight",
+              totalBalance >= 0 ? "text-emerald-600" : "text-red-600"
            )}
          >
            {formatCurrency(totalBalance)}
          </div>
-          <p className="text-[10px] md:text-xs text-muted-foreground mt-1">
+          <p className="text-xs text-muted-foreground mt-2">
            {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">
+      <Card className="border shadow-sm bg-gradient-to-br from-emerald-50/50 to-card dark:from-emerald-950/20 dark:to-card">
+        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
+          <CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
            Revenus du mois
          </CardTitle>
-          <TrendingUp className="h-3 w-3 md:h-4 md:w-4 text-emerald-600" />
+          <div className="rounded-full bg-emerald-500/10 p-2 shrink-0">
+            <TrendingUp className="h-4 w-4 text-emerald-600" />
+          </div>
        </CardHeader>
-        <CardContent>
-          <div className="text-xl md:text-2xl font-bold text-emerald-600">
+        <CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
+          <div className="text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight text-emerald-600">
            {formatCurrency(income)}
          </div>
-          <p className="text-[10px] md:text-xs text-muted-foreground mt-1">
+          <p className="text-xs text-muted-foreground mt-2">
            {monthTransactions.filter((t) => t.amount > 0).length} opération
            {monthTransactions.filter((t) => t.amount > 0).length > 1
              ? "s"
@@ -88,18 +99,20 @@ export function OverviewCards({ data }: OverviewCardsProps) {
        </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">
+      <Card className="border shadow-sm bg-gradient-to-br from-red-50/50 to-card dark:from-red-950/20 dark:to-card">
+        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
+          <CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
            Dépenses du mois
          </CardTitle>
-          <TrendingDown className="h-3 w-3 md:h-4 md:w-4 text-red-600" />
+          <div className="rounded-full bg-red-500/10 p-2 shrink-0">
+            <TrendingDown className="h-4 w-4 text-red-600" />
+          </div>
        </CardHeader>
-        <CardContent>
-          <div className="text-xl md:text-2xl font-bold text-red-600">
+        <CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
+          <div className="text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight text-red-600">
            {formatCurrency(expenses)}
          </div>
-          <p className="text-[10px] md:text-xs text-muted-foreground mt-1">
+          <p className="text-xs text-muted-foreground mt-2">
            {monthTransactions.filter((t) => t.amount < 0).length} opération
            {monthTransactions.filter((t) => t.amount < 0).length > 1
              ? "s"
@@ -108,18 +121,20 @@ export function OverviewCards({ data }: OverviewCardsProps) {
        </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">
+      <Card className="border shadow-sm bg-gradient-to-br from-blue-50/50 to-card dark:from-blue-950/20 dark:to-card">
+        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
+          <CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
            Pointage
          </CardTitle>
-          <CreditCard className="h-3 w-3 md:h-4 md:w-4 text-muted-foreground" />
+          <div className="rounded-full bg-muted/50 p-2 shrink-0">
+            <CreditCard className="h-4 w-4 text-muted-foreground" />
+          </div>
        </CardHeader>
-        <CardContent>
-          <div className="text-xl md:text-2xl font-bold">
+        <CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
+          <div className="text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight">
            {reconciledPercent}%
          </div>
-          <p className="text-[10px] md:text-xs text-muted-foreground mt-1">
+          <p className="text-xs text-muted-foreground mt-2">
            {reconciled} / {total} opérations pointées
          </p>
        </CardContent>
--- a/components/layout/page-layout.tsx
+++ b/components/layout/page-layout.tsx
@@ -15,9 +15,9 @@ export function PageLayout({ children }: PageLayoutProps) {
    <SidebarContext.Provider
      value={{ open: sidebarOpen, setOpen: setSidebarOpen }}
    >
-      <div className="flex h-screen bg-background overflow-hidden">
+      <div className="flex h-screen bg-background overflow-hidden page-background">
        <Sidebar open={sidebarOpen} onOpenChange={setSidebarOpen} />
-        <main className="flex-1 overflow-auto overflow-x-hidden">
+        <main className="flex-1 overflow-auto overflow-x-hidden page-content">
          <div className="p-4 md:p-6 space-y-4 md:space-y-6 max-w-full">
            {children}
          </div>
--- a/components/ui/account-filter-combobox.tsx
+++ b/components/ui/account-filter-combobox.tsx
@@ -64,7 +64,7 @@ export function AccountFilterCombobox({
  // Get root folders (folders without parent) - same as folders/page.tsx
  const rootFolders = useMemo(
    () => folders.filter((f) => f.parentId === null),
-    [folders],
+    [folders]
  );

  // Get child folders for a given parent - same as FolderTreeItem
@@ -78,7 +78,7 @@ export function AccountFilterCombobox({
  // Get accounts without folder
  const orphanAccounts = useMemo(
    () => accounts.filter((a) => !a.folderId),
-    [accounts],
+    [accounts]
  );

  const selectedAccounts = accounts.filter((a) => value.includes(a.id));
@@ -89,7 +89,7 @@ export function AccountFilterCombobox({
    const directAccounts = getFolderAccounts(folderId);
    const childFoldersList = getChildFolders(folderId);
    const childAccounts = childFoldersList.flatMap((cf) =>
-      getAllAccountsInFolder(cf.id),
+      getAllAccountsInFolder(cf.id)
    );
    return [...directAccounts, ...childAccounts];
  };
@@ -126,7 +126,7 @@ export function AccountFilterCombobox({

    if (allSelected) {
      const newSelection = value.filter(
-        (v) => !allFolderAccountIds.includes(v),
+        (v) => !allFolderAccountIds.includes(v)
      );
      onChange(newSelection.length > 0 ? newSelection : ["all"]);
    } else {
@@ -153,7 +153,7 @@ export function AccountFilterCombobox({
    const folderAccounts = getAllAccountsInFolder(folderId);
    if (folderAccounts.length === 0) return false;
    const selectedCount = folderAccounts.filter((a) =>
-      value.includes(a.id),
+      value.includes(a.id)
    ).length;
    return selectedCount > 0 && selectedCount < folderAccounts.length;
  };
@@ -185,7 +185,7 @@ export function AccountFilterCombobox({
            <Check
              className={cn(
                "h-4 w-4",
-                isFolderSelected(folder.id) ? "opacity-100" : "opacity-0",
+                isFolderSelected(folder.id) ? "opacity-100" : "opacity-0"
              )}
            />
          </div>
@@ -213,7 +213,7 @@ export function AccountFilterCombobox({
              <Check
                className={cn(
                  "ml-auto h-4 w-4 shrink-0",
-                  value.includes(account.id) ? "opacity-100" : "opacity-0",
+                  value.includes(account.id) ? "opacity-100" : "opacity-0"
                )}
              />
            </CommandItem>
@@ -222,7 +222,7 @@ export function AccountFilterCombobox({

        {/* Child folders - recursive */}
        {childFoldersList.map((childFolder) =>
-          renderFolder(childFolder, depth + 1, currentPath),
+          renderFolder(childFolder, depth + 1, currentPath)
        )}
      </div>
    );
@@ -235,7 +235,10 @@ export function AccountFilterCombobox({
          variant="outline"
          role="combobox"
          aria-expanded={open}
-          className={cn("justify-between min-w-0", className)}
+          className={cn(
+            "justify-between min-w-0 h-10 w-full text-sm font-normal",
+            className
+          )}
        >
          <div className="flex items-center gap-2 min-w-0 flex-1">
            {selectedAccounts.length === 1 ? (
@@ -285,7 +288,7 @@ export function AccountFilterCombobox({
        </Button>
      </PopoverTrigger>
      <PopoverContent
-        className="w-[380px] p-0"
+        className="w-[calc(100vw-2rem)] sm:w-[380px] p-0"
        align="start"
        onOpenAutoFocus={(e) => e.preventDefault()}
      >
@@ -301,10 +304,7 @@ export function AccountFilterCombobox({
                  <span className="text-xs text-muted-foreground ml-1">
                    (
                    {formatCurrency(
-                      filteredTransactions.reduce(
-                        (sum, t) => sum + t.amount,
-                        0,
-                      ),
+                      filteredTransactions.reduce((sum, t) => sum + t.amount, 0)
                    )}
                    )
                  </span>
@@ -312,7 +312,7 @@ export function AccountFilterCombobox({
                <Check
                  className={cn(
                    "ml-auto h-4 w-4",
-                    isAll ? "opacity-100" : "opacity-0",
+                    isAll ? "opacity-100" : "opacity-0"
                  )}
                />
              </CommandItem>
@@ -348,7 +348,7 @@ export function AccountFilterCombobox({
                          "ml-auto h-4 w-4 shrink-0",
                          value.includes(account.id)
                            ? "opacity-100"
-                            : "opacity-0",
+                            : "opacity-0"
                        )}
                      />
                    </CommandItem>
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -7,8 +7,8 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="card"
      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className,
+        "bg-card text-card-foreground flex flex-col rounded-xl border shadow-sm",
+        className
      )}
      {...props}
    />
@@ -20,8 +20,8 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="card-header"
      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className,
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
      )}
      {...props}
    />
@@ -54,7 +54,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
      data-slot="card-action"
      className={cn(
        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className,
+        className
      )}
      {...props}
    />
@@ -65,7 +65,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-content"
-      className={cn("px-6", className)}
+      className={cn("px-6 pb-6", className)}
      {...props}
    />
  );