101 lines
3.1 KiB
TypeScript
101 lines
3.1 KiB
TypeScript
"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>
|
|
);
|
|
}
|
|
|