julienfroidefond/fintrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add icon support to category creation and editing, enhance transaction rule creation with new dialog and filters

Browse Source
This commit is contained in:
Julien Froidefond
2025-11-29 17:42:11 +01:00
parent 0ce50d1477
commit 0fb3222ba2
8 changed files with 820 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
components/categories/category-edit-dialog.tsx
View File

@@ -18,6 +18,7 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { IconPicker } from "@/components/ui/icon-picker";
import { Plus, X } from "lucide-react";
import { cn } from "@/lib/utils";
import type { Category } from "@/lib/types";
@@ -26,6 +27,7 @@ import { categoryColors } from "./constants";
interface CategoryFormData {
name: string;
color: string;
icon: string;
keywords: string[];
parentId: string | null;
}
@@ -128,22 +130,32 @@ export function CategoryEditDialog({
/>
</div>
{/* Couleur */}
<div className="space-y-2">
<Label>Couleur</Label>
<div className="flex flex-wrap gap-2">
{categoryColors.map((color) => (
<button
key={color}
onClick={() => onFormDataChange({ ...formData, color })}
className={cn(
"w-8 h-8 rounded-full transition-transform",
formData.color === color &&
"ring-2 ring-offset-2 ring-primary scale-110"
)}
style={{ backgroundColor: color }}
/>
))}
{/* Couleur et Icône */}
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label>Couleur</Label>
<div className="flex flex-wrap gap-2">
{categoryColors.map((color) => (
<button
key={color}
onClick={() => onFormDataChange({ ...formData, color })}
className={cn(
"w-7 h-7 rounded-full transition-transform",
formData.color === color &&
"ring-2 ring-offset-2 ring-primary scale-110"
)}
style={{ backgroundColor: color }}
/>
))}
</div>
</div>
<div className="space-y-2">
<Label>Icône</Label>
<IconPicker
value={formData.icon}
onChange={(icon) => onFormDataChange({ ...formData, icon })}
color={formData.color}
/>
</div>
</div>