feat: enhance responsive design and layout consistency across various components, including dashboard, statistics, and rules pages

components/dashboard/overview-cards.tsx

@@ -4,6 +4,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { TrendingUp, TrendingDown, Wallet, CreditCard } from "lucide-react";
 import type { BankingData } from "@/lib/types";
 import { getAccountBalance } from "@/lib/account-utils";
+import { cn } from "@/lib/utils";
 
 interface OverviewCardsProps {
   data: BankingData;
@@ -47,21 +48,21 @@ export function OverviewCards({ data }: OverviewCardsProps) {
     <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-sm font-medium text-muted-foreground">
+          <CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
             Solde Total
           </CardTitle>
-          <Wallet className="h-4 w-4 text-muted-foreground" />
+          <Wallet className="h-3 w-3 md:h-4 md:w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
           <div
             className={cn(
-              "text-2xl font-bold",
+              "text-xl md:text-2xl font-bold",
               totalBalance >= 0 ? "text-emerald-600" : "text-red-600",
             )}
           >
             {formatCurrency(totalBalance)}
           </div>
-          <p className="text-xs text-muted-foreground mt-1">
+          <p className="text-[10px] md:text-xs text-muted-foreground mt-1">
             {data.accounts.length} compte{data.accounts.length > 1 ? "s" : ""}
           </p>
         </CardContent>
@@ -69,16 +70,16 @@ export function OverviewCards({ data }: OverviewCardsProps) {
 
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium text-muted-foreground">
+          <CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
             Revenus du mois
           </CardTitle>
-          <TrendingUp className="h-4 w-4 text-emerald-600" />
+          <TrendingUp className="h-3 w-3 md:h-4 md:w-4 text-emerald-600" />
         </CardHeader>
         <CardContent>
-          <div className="text-2xl font-bold text-emerald-600">
+          <div className="text-xl md:text-2xl font-bold text-emerald-600">
             {formatCurrency(income)}
           </div>
-          <p className="text-xs text-muted-foreground mt-1">
+          <p className="text-[10px] md:text-xs text-muted-foreground mt-1">
             {monthTransactions.filter((t) => t.amount > 0).length} opération
             {monthTransactions.filter((t) => t.amount > 0).length > 1
               ? "s"
@@ -89,16 +90,16 @@ export function OverviewCards({ data }: OverviewCardsProps) {
 
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium text-muted-foreground">
+          <CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
             Dépenses du mois
           </CardTitle>
-          <TrendingDown className="h-4 w-4 text-red-600" />
+          <TrendingDown className="h-3 w-3 md:h-4 md:w-4 text-red-600" />
         </CardHeader>
         <CardContent>
-          <div className="text-2xl font-bold text-red-600">
+          <div className="text-xl md:text-2xl font-bold text-red-600">
             {formatCurrency(expenses)}
           </div>
-          <p className="text-xs text-muted-foreground mt-1">
+          <p className="text-[10px] md:text-xs text-muted-foreground mt-1">
             {monthTransactions.filter((t) => t.amount < 0).length} opération
             {monthTransactions.filter((t) => t.amount < 0).length > 1
               ? "s"
@@ -109,14 +110,14 @@ export function OverviewCards({ data }: OverviewCardsProps) {
 
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium text-muted-foreground">
+          <CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
             Pointage
           </CardTitle>
-          <CreditCard className="h-4 w-4 text-muted-foreground" />
+          <CreditCard className="h-3 w-3 md:h-4 md:w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
-          <div className="text-2xl font-bold">{reconciledPercent}%</div>
-          <p className="text-xs text-muted-foreground mt-1">
+          <div className="text-xl md:text-2xl font-bold">{reconciledPercent}%</div>
+          <p className="text-[10px] md:text-xs text-muted-foreground mt-1">
             {reconciled} / {total} opérations pointées
           </p>
         </CardContent>
@@ -124,5 +125,3 @@ export function OverviewCards({ data }: OverviewCardsProps) {
     </div>
   );
 }
-
-import { cn } from "@/lib/utils";

components/dashboard/recent-transactions.tsx

@@ -60,9 +60,9 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Transactions récentes</CardTitle>
+        <CardTitle className="text-sm md:text-base">Transactions récentes</CardTitle>
       </CardHeader>
-      <CardContent>
+      <CardContent className="px-3 md:px-6">
         <div className="space-y-3">
           {recentTransactions.map((transaction) => {
             const category = getCategory(transaction.categoryId);
@@ -71,59 +71,74 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
             return (
               <div
                 key={transaction.id}
-                className="flex items-center gap-3 p-3 rounded-lg bg-muted/50 hover:bg-muted transition-colors"
+                className="rounded-lg bg-muted/50 hover:bg-muted transition-colors overflow-hidden"
               >
-                <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 className="flex items-start gap-2 md:gap-3 p-2 md:p-3">
+                  <div className="flex-shrink-0 pt-0.5">
+                    {transaction.isReconciled ? (
+                      <CheckCircle2 className="w-4 h-4 md:w-5 md:h-5 text-emerald-600" />
+                    ) : (
+                      <Circle className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground" />
                     )}
                   </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 className="flex-1 min-w-0 overflow-hidden">
+                    <div className="flex items-start justify-between gap-2">
+                      <p className="font-medium text-xs md:text-base truncate flex-1">
+                        {transaction.description}
+                      </p>
+                      <div
+                        className={cn(
+                          "font-semibold tabular-nums text-xs md:text-base shrink-0 md:hidden",
+                          transaction.amount >= 0
+                            ? "text-emerald-600"
+                            : "text-red-600",
+                        )}
+                      >
+                        {transaction.amount >= 0 ? "+" : ""}
+                        {formatCurrency(transaction.amount)}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-1.5 md:gap-2 mt-1 flex-wrap">
+                      <span className="text-[10px] md:text-xs text-muted-foreground whitespace-nowrap">
+                        {formatDate(transaction.date)}
+                      </span>
+                      {account && (
+                        <span className="text-[10px] md:text-xs text-muted-foreground truncate">
+                          • {account.name}
+                        </span>
+                      )}
+                      {category && (
+                        <Badge
+                          variant="secondary"
+                          className="text-[10px] md:text-xs gap-1 shrink-0"
+                          style={{
+                            backgroundColor: `${category.color}20`,
+                            color: category.color,
+                          }}
+                        >
+                          <CategoryIcon
+                            icon={category.icon}
+                            color={category.color}
+                            size={10}
+                          />
+                          <span className="truncate">{category.name}</span>
+                        </Badge>
+                      )}
+                    </div>
+                  </div>
+
+                  <div
+                    className={cn(
+                      "font-semibold tabular-nums text-sm md:text-base shrink-0 hidden md:block",
+                      transaction.amount >= 0
+                        ? "text-emerald-600"
+                        : "text-red-600",
+                    )}
+                  >
+                    {transaction.amount >= 0 ? "+" : ""}
+                    {formatCurrency(transaction.amount)}
+                  </div>
                 </div>
               </div>
             );

components/dashboard/sidebar.tsx

@@ -19,6 +19,8 @@ import {
   LogOut,
 } from "lucide-react";
 import { toast } from "sonner";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { useIsMobile } from "@/hooks/use-mobile";
 
 const navItems = [
   { href: "/", label: "Tableau de bord", icon: LayoutDashboard },
@@ -29,10 +31,14 @@ const navItems = [
   { href: "/statistics", label: "Statistiques", icon: BarChart3 },
 ];
 
-export function Sidebar() {
+interface SidebarContentProps {
+  collapsed?: boolean;
+  onNavigate?: () => void;
+}
+
+function SidebarContent({ collapsed = false, onNavigate, showHeader = false }: SidebarContentProps & { showHeader?: boolean }) {
   const pathname = usePathname();
   const router = useRouter();
-  const [collapsed, setCollapsed] = useState(false);
 
   const handleSignOut = async () => {
     try {
@@ -46,10 +52,99 @@ export function Sidebar() {
     }
   };
 
+  const handleLinkClick = () => {
+    onNavigate?.();
+  };
+
+  return (
+    <>
+      {showHeader && (
+        <div className="flex items-center justify-between p-4 border-b border-border">
+          {!collapsed && (
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
+                <Wallet className="w-5 h-5 text-primary-foreground" />
+              </div>
+              <span className="font-semibold text-foreground">FinTrack</span>
+            </div>
+          )}
+        </div>
+      )}
+
+      <nav className="flex-1 p-2 space-y-1">
+        {navItems.map((item) => {
+          const isActive = pathname === item.href;
+          return (
+            <Link key={item.href} href={item.href} onClick={handleLinkClick}>
+              <Button
+                variant={isActive ? "secondary" : "ghost"}
+                className={cn(
+                  "w-full justify-start gap-3",
+                  collapsed && "justify-center px-2",
+                )}
+              >
+                <item.icon className="w-5 h-5 shrink-0" />
+                {!collapsed && <span>{item.label}</span>}
+              </Button>
+            </Link>
+          );
+        })}
+      </nav>
+
+      <div className="p-2 border-t border-border space-y-1">
+        <Link href="/settings" onClick={handleLinkClick}>
+          <Button
+            variant="ghost"
+            className={cn(
+              "w-full justify-start gap-3",
+              collapsed && "justify-center px-2",
+            )}
+          >
+            <Settings className="w-5 h-5 shrink-0" />
+            {!collapsed && <span>Paramètres</span>}
+          </Button>
+        </Link>
+        <Button
+          variant="ghost"
+          onClick={handleSignOut}
+          className={cn(
+            "w-full justify-start gap-3 text-destructive hover:text-destructive hover:bg-destructive/10",
+            collapsed && "justify-center px-2",
+          )}
+        >
+          <LogOut className="w-5 h-5 shrink-0" />
+          {!collapsed && <span>Déconnexion</span>}
+        </Button>
+      </div>
+    </>
+  );
+}
+
+interface SidebarProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function Sidebar({ open, onOpenChange }: SidebarProps) {
+  const [collapsed, setCollapsed] = useState(false);
+  const isMobile = useIsMobile();
+
+  if (isMobile) {
+    return (
+      <Sheet open={open} onOpenChange={onOpenChange}>
+        <SheetContent side="left" className="w-64 p-0">
+          <div className="flex flex-col h-full">
+            <SidebarContent showHeader onNavigate={() => onOpenChange?.(false)} />
+          </div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
   return (
     <aside
       className={cn(
-        "flex flex-col h-screen bg-card border-r border-border transition-all duration-300",
+        "hidden md:flex flex-col h-screen bg-card border-r border-border transition-all duration-300",
         collapsed ? "w-16" : "w-64",
       )}
     >
@@ -76,51 +171,7 @@ export function Sidebar() {
         </Button>
       </div>
 
-      <nav className="flex-1 p-2 space-y-1">
-        {navItems.map((item) => {
-          const isActive = pathname === item.href;
-          return (
-            <Link key={item.href} href={item.href}>
-              <Button
-                variant={isActive ? "secondary" : "ghost"}
-                className={cn(
-                  "w-full justify-start gap-3",
-                  collapsed && "justify-center px-2",
-                )}
-              >
-                <item.icon className="w-5 h-5 shrink-0" />
-                {!collapsed && <span>{item.label}</span>}
-              </Button>
-            </Link>
-          );
-        })}
-      </nav>
-
-      <div className="p-2 border-t border-border space-y-1">
-        <Link href="/settings">
-          <Button
-            variant="ghost"
-            className={cn(
-              "w-full justify-start gap-3",
-              collapsed && "justify-center px-2",
-            )}
-          >
-            <Settings className="w-5 h-5 shrink-0" />
-            {!collapsed && <span>Paramètres</span>}
-          </Button>
-        </Link>
-        <Button
-          variant="ghost"
-          onClick={handleSignOut}
-          className={cn(
-            "w-full justify-start gap-3 text-destructive hover:text-destructive hover:bg-destructive/10",
-            collapsed && "justify-center px-2",
-          )}
-        >
-          <LogOut className="w-5 h-5 shrink-0" />
-          {!collapsed && <span>Déconnexion</span>}
-        </Button>
-      </div>
+      <SidebarContent collapsed={collapsed} showHeader={false} />
     </aside>
   );
 }