Files
fintrack/components/transactions/transaction-bulk-actions.tsx

65 lines
1.9 KiB
TypeScript

"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { CategoryCombobox } from "@/components/ui/category-combobox";
import { CheckCircle2, Circle } from "lucide-react";
import type { Category } from "@/lib/types";
interface TransactionBulkActionsProps {
selectedCount: number;
categories: Category[];
onReconcile: (reconciled: boolean) => void;
onSetCategory: (categoryId: string | null) => void;
}
export function TransactionBulkActions({
selectedCount,
categories,
onReconcile,
onSetCategory,
}: TransactionBulkActionsProps) {
const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null);
if (selectedCount === 0) return null;
const handleCategorySelect = (categoryId: string | null) => {
setSelectedCategoryId(null); // Reset après sélection
onSetCategory(categoryId);
};
return (
<Card className="bg-primary/5 border-primary/20">
<CardContent className="py-3">
<div className="flex items-center gap-4">
<span className="text-sm font-medium">
{selectedCount} sélectionnée{selectedCount > 1 ? "s" : ""}
</span>
<Button size="sm" variant="outline" onClick={() => onReconcile(true)}>
<CheckCircle2 className="w-4 h-4 mr-1" />
Pointer
</Button>
<Button
size="sm"
variant="outline"
onClick={() => onReconcile(false)}
>
<Circle className="w-4 h-4 mr-1" />
Dépointer
</Button>
<CategoryCombobox
categories={categories}
value={selectedCategoryId}
onChange={handleCategorySelect}
placeholder="Catégoriser..."
width="w-[300px]"
buttonWidth="w-auto"
/>
</div>
</CardContent>
</Card>
);
}