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

components/transactions/transaction-filters.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Search } from "lucide-react";
+import type { Account, Category } from "@/lib/types";
+
+interface TransactionFiltersProps {
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  selectedAccount: string;
+  onAccountChange: (account: string) => void;
+  selectedCategory: string;
+  onCategoryChange: (category: string) => void;
+  showReconciled: string;
+  onReconciledChange: (value: string) => void;
+  accounts: Account[];
+  categories: Category[];
+}
+
+export function TransactionFilters({
+  searchQuery,
+  onSearchChange,
+  selectedAccount,
+  onAccountChange,
+  selectedCategory,
+  onCategoryChange,
+  showReconciled,
+  onReconciledChange,
+  accounts,
+  categories,
+}: TransactionFiltersProps) {
+  return (
+    <Card>
+      <CardContent className="pt-4">
+        <div className="flex flex-wrap gap-4">
+          <div className="flex-1 min-w-[200px]">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <Input
+                placeholder="Rechercher..."
+                value={searchQuery}
+                onChange={(e) => onSearchChange(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+          </div>
+
+          <Select value={selectedAccount} onValueChange={onAccountChange}>
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="Compte" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Tous les comptes</SelectItem>
+              {accounts.map((account) => (
+                <SelectItem key={account.id} value={account.id}>
+                  {account.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          <Select value={selectedCategory} onValueChange={onCategoryChange}>
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="Catégorie" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Toutes catégories</SelectItem>
+              <SelectItem value="uncategorized">Non catégorisé</SelectItem>
+              {categories.map((category) => (
+                <SelectItem key={category.id} value={category.id}>
+                  {category.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          <Select value={showReconciled} onValueChange={onReconciledChange}>
+            <SelectTrigger className="w-[160px]">
+              <SelectValue placeholder="Pointage" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Tout</SelectItem>
+              <SelectItem value="reconciled">Pointées</SelectItem>
+              <SelectItem value="not-reconciled">Non pointées</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+