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

components/statistics/top-expenses-list.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { CategoryIcon } from "@/components/ui/category-icon";
+import type { Transaction, Category } from "@/lib/types";
+
+interface TopExpensesListProps {
+  expenses: Transaction[];
+  categories: Category[];
+  formatCurrency: (amount: number) => string;
+}
+
+export function TopExpensesList({
+  expenses,
+  categories,
+  formatCurrency,
+}: TopExpensesListProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Top 5 dépenses</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {expenses.length > 0 ? (
+          <div className="space-y-4">
+            {expenses.map((expense, index) => {
+              const category = categories.find(
+                (c) => c.id === expense.categoryId
+              );
+              return (
+                <div key={expense.id} className="flex items-center gap-3">
+                  <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center text-sm font-semibold">
+                    {index + 1}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium text-sm truncate">
+                      {expense.description}
+                    </p>
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs text-muted-foreground">
+                        {new Date(expense.date).toLocaleDateString("fr-FR")}
+                      </span>
+                      {category && (
+                        <span
+                          className="text-xs px-1.5 py-0.5 rounded inline-flex items-center gap-1"
+                          style={{
+                            backgroundColor: `${category.color}20`,
+                            color: category.color,
+                          }}
+                        >
+                          <CategoryIcon
+                            icon={category.icon}
+                            color={category.color}
+                            size={10}
+                          />
+                          {category.name}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                  <div className="text-red-600 font-semibold tabular-nums">
+                    {formatCurrency(expense.amount)}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="h-[200px] flex items-center justify-center text-muted-foreground">
+            Pas de dépenses pour cette période
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+