696 lines
24 KiB
TypeScript
696 lines
24 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useMemo } from "react";
|
|
import { Sidebar } from "@/components/dashboard/sidebar";
|
|
import { useBankingData } from "@/lib/hooks";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
} from "@/components/ui/collapsible";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import {
|
|
Plus,
|
|
MoreVertical,
|
|
Pencil,
|
|
Trash2,
|
|
RefreshCw,
|
|
X,
|
|
ChevronDown,
|
|
ChevronRight,
|
|
ChevronsUpDown,
|
|
Search,
|
|
} from "lucide-react";
|
|
import { CategoryIcon } from "@/components/ui/category-icon";
|
|
import {
|
|
autoCategorize,
|
|
addCategory,
|
|
updateCategory,
|
|
deleteCategory,
|
|
} from "@/lib/store-db";
|
|
import type { Category } from "@/lib/types";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const categoryColors = [
|
|
"#22c55e",
|
|
"#3b82f6",
|
|
"#f59e0b",
|
|
"#ec4899",
|
|
"#ef4444",
|
|
"#8b5cf6",
|
|
"#06b6d4",
|
|
"#84cc16",
|
|
"#f97316",
|
|
"#6366f1",
|
|
"#14b8a6",
|
|
"#f43f5e",
|
|
"#64748b",
|
|
"#0891b2",
|
|
"#dc2626",
|
|
];
|
|
|
|
export default function CategoriesPage() {
|
|
const { data, isLoading, refresh } = useBankingData();
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
|
const [editingCategory, setEditingCategory] = useState<Category | null>(null);
|
|
const [expandedParents, setExpandedParents] = useState<Set<string>>(
|
|
new Set(),
|
|
);
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
color: "#22c55e",
|
|
keywords: [] as string[],
|
|
parentId: null as string | null,
|
|
});
|
|
const [newKeyword, setNewKeyword] = useState("");
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
|
|
// Organiser les catégories par parent
|
|
const { parentCategories, childrenByParent, orphanCategories } =
|
|
useMemo(() => {
|
|
if (!data?.categories)
|
|
return {
|
|
parentCategories: [],
|
|
childrenByParent: {},
|
|
orphanCategories: [],
|
|
};
|
|
|
|
const parents = data.categories.filter((c) => c.parentId === null);
|
|
const children: Record<string, Category[]> = {};
|
|
const orphans: Category[] = [];
|
|
|
|
// Grouper les enfants par parent
|
|
data.categories
|
|
.filter((c) => c.parentId !== null)
|
|
.forEach((child) => {
|
|
const parentExists = parents.some((p) => p.id === child.parentId);
|
|
if (parentExists) {
|
|
if (!children[child.parentId!]) {
|
|
children[child.parentId!] = [];
|
|
}
|
|
children[child.parentId!].push(child);
|
|
} else {
|
|
orphans.push(child);
|
|
}
|
|
});
|
|
|
|
return {
|
|
parentCategories: parents,
|
|
childrenByParent: children,
|
|
orphanCategories: orphans,
|
|
};
|
|
}, [data?.categories]);
|
|
|
|
// Initialiser tous les parents comme ouverts
|
|
useState(() => {
|
|
if (parentCategories.length > 0 && expandedParents.size === 0) {
|
|
setExpandedParents(new Set(parentCategories.map((p) => p.id)));
|
|
}
|
|
});
|
|
|
|
if (isLoading || !data) {
|
|
return (
|
|
<div className="flex h-screen">
|
|
<Sidebar />
|
|
<main className="flex-1 flex items-center justify-center">
|
|
<RefreshCw className="w-8 h-8 animate-spin text-muted-foreground" />
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const formatCurrency = (amount: number) => {
|
|
return new Intl.NumberFormat("fr-FR", {
|
|
style: "currency",
|
|
currency: "EUR",
|
|
}).format(amount);
|
|
};
|
|
|
|
const getCategoryStats = (categoryId: string, includeChildren = false) => {
|
|
let categoryIds = [categoryId];
|
|
|
|
if (includeChildren && childrenByParent[categoryId]) {
|
|
categoryIds = [
|
|
...categoryIds,
|
|
...childrenByParent[categoryId].map((c) => c.id),
|
|
];
|
|
}
|
|
|
|
const categoryTransactions = data.transactions.filter((t) =>
|
|
categoryIds.includes(t.categoryId || ""),
|
|
);
|
|
const total = categoryTransactions.reduce(
|
|
(sum, t) => sum + Math.abs(t.amount),
|
|
0,
|
|
);
|
|
const count = categoryTransactions.length;
|
|
return { total, count };
|
|
};
|
|
|
|
const toggleExpanded = (parentId: string) => {
|
|
const newExpanded = new Set(expandedParents);
|
|
if (newExpanded.has(parentId)) {
|
|
newExpanded.delete(parentId);
|
|
} else {
|
|
newExpanded.add(parentId);
|
|
}
|
|
setExpandedParents(newExpanded);
|
|
};
|
|
|
|
const expandAll = () => {
|
|
setExpandedParents(new Set(parentCategories.map((p) => p.id)));
|
|
};
|
|
|
|
const collapseAll = () => {
|
|
setExpandedParents(new Set());
|
|
};
|
|
|
|
const allExpanded =
|
|
parentCategories.length > 0 &&
|
|
expandedParents.size === parentCategories.length;
|
|
|
|
const handleNewCategory = (parentId: string | null = null) => {
|
|
setEditingCategory(null);
|
|
setFormData({ name: "", color: "#22c55e", keywords: [], parentId });
|
|
setIsDialogOpen(true);
|
|
};
|
|
|
|
const handleEdit = (category: Category) => {
|
|
setEditingCategory(category);
|
|
setFormData({
|
|
name: category.name,
|
|
color: category.color,
|
|
keywords: [...category.keywords],
|
|
parentId: category.parentId,
|
|
});
|
|
setIsDialogOpen(true);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
try {
|
|
if (editingCategory) {
|
|
await updateCategory({
|
|
...editingCategory,
|
|
name: formData.name,
|
|
color: formData.color,
|
|
keywords: formData.keywords,
|
|
parentId: formData.parentId,
|
|
});
|
|
} else {
|
|
await addCategory({
|
|
name: formData.name,
|
|
color: formData.color,
|
|
keywords: formData.keywords,
|
|
icon: "tag",
|
|
parentId: formData.parentId,
|
|
});
|
|
}
|
|
refresh();
|
|
setIsDialogOpen(false);
|
|
} catch (error) {
|
|
console.error("Error saving category:", error);
|
|
alert("Erreur lors de la sauvegarde de la catégorie");
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (categoryId: string) => {
|
|
const hasChildren = childrenByParent[categoryId]?.length > 0;
|
|
const message = hasChildren
|
|
? "Cette catégorie a des sous-catégories. Supprimer quand même ?"
|
|
: "Supprimer cette catégorie ?";
|
|
|
|
if (!confirm(message)) return;
|
|
|
|
try {
|
|
await deleteCategory(categoryId);
|
|
refresh();
|
|
} catch (error) {
|
|
console.error("Error deleting category:", error);
|
|
alert("Erreur lors de la suppression de la catégorie");
|
|
}
|
|
};
|
|
|
|
const addKeyword = () => {
|
|
if (
|
|
newKeyword.trim() &&
|
|
!formData.keywords.includes(newKeyword.trim().toLowerCase())
|
|
) {
|
|
setFormData({
|
|
...formData,
|
|
keywords: [...formData.keywords, newKeyword.trim().toLowerCase()],
|
|
});
|
|
setNewKeyword("");
|
|
}
|
|
};
|
|
|
|
const removeKeyword = (keyword: string) => {
|
|
setFormData({
|
|
...formData,
|
|
keywords: formData.keywords.filter((k) => k !== keyword),
|
|
});
|
|
};
|
|
|
|
const reApplyAutoCategories = async () => {
|
|
if (
|
|
!confirm(
|
|
"Recatégoriser automatiquement les transactions non catégorisées ?",
|
|
)
|
|
)
|
|
return;
|
|
|
|
try {
|
|
const { updateTransaction } = await import("@/lib/store-db");
|
|
const uncategorized = data.transactions.filter((t) => !t.categoryId);
|
|
|
|
for (const transaction of uncategorized) {
|
|
const categoryId = autoCategorize(
|
|
transaction.description + " " + (transaction.memo || ""),
|
|
data.categories,
|
|
);
|
|
if (categoryId) {
|
|
await updateTransaction({ ...transaction, categoryId });
|
|
}
|
|
}
|
|
refresh();
|
|
} catch (error) {
|
|
console.error("Error re-categorizing:", error);
|
|
alert("Erreur lors de la recatégorisation");
|
|
}
|
|
};
|
|
|
|
const uncategorizedCount = data.transactions.filter(
|
|
(t) => !t.categoryId,
|
|
).length;
|
|
|
|
// Composant pour une carte de catégorie enfant
|
|
const ChildCategoryCard = ({ category }: { category: Category }) => {
|
|
const stats = getCategoryStats(category.id);
|
|
|
|
return (
|
|
<div className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-muted/50 transition-colors group">
|
|
<div className="flex items-center gap-2 min-w-0 flex-1">
|
|
<div
|
|
className="w-5 h-5 rounded-full flex items-center justify-center shrink-0"
|
|
style={{ backgroundColor: `${category.color}20` }}
|
|
>
|
|
<CategoryIcon
|
|
icon={category.icon}
|
|
color={category.color}
|
|
size={12}
|
|
/>
|
|
</div>
|
|
<span className="text-sm truncate">{category.name}</span>
|
|
<span className="text-sm text-muted-foreground shrink-0">
|
|
{stats.count} opération{stats.count > 1 ? "s" : ""} •{" "}
|
|
{formatCurrency(stats.total)}
|
|
</span>
|
|
{category.keywords.length > 0 && (
|
|
<Badge
|
|
variant="outline"
|
|
className="text-[10px] px-1.5 py-0 h-4 shrink-0"
|
|
>
|
|
{category.keywords.length}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6"
|
|
onClick={() => handleEdit(category)}
|
|
>
|
|
<Pencil className="w-3 h-3" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6 text-destructive hover:text-destructive"
|
|
onClick={() => handleDelete(category.id)}
|
|
>
|
|
<Trash2 className="w-3 h-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-screen bg-background">
|
|
<Sidebar />
|
|
<main className="flex-1 overflow-auto">
|
|
<div className="p-6 space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-foreground">Catégories</h1>
|
|
<p className="text-muted-foreground">
|
|
{parentCategories.length} catégories principales •{" "}
|
|
{data.categories.length - parentCategories.length}{" "}
|
|
sous-catégories
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{uncategorizedCount > 0 && (
|
|
<Button variant="outline" onClick={reApplyAutoCategories}>
|
|
Recatégoriser ({uncategorizedCount})
|
|
</Button>
|
|
)}
|
|
<Button onClick={() => handleNewCategory(null)}>
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
Nouvelle catégorie
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Barre de recherche et contrôles */}
|
|
<div className="flex items-center gap-3">
|
|
<div className="relative flex-1 max-w-sm">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Rechercher une catégorie ou un mot-clé..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="pl-9"
|
|
/>
|
|
{searchQuery && (
|
|
<button
|
|
onClick={() => setSearchQuery("")}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={allExpanded ? collapseAll : expandAll}
|
|
>
|
|
<ChevronsUpDown className="w-4 h-4 mr-2" />
|
|
{allExpanded ? "Tout replier" : "Tout déplier"}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Liste des catégories par parent */}
|
|
<div className="space-y-1">
|
|
{parentCategories
|
|
.filter((parent) => {
|
|
if (!searchQuery.trim()) return true;
|
|
const query = searchQuery.toLowerCase();
|
|
// Afficher si le parent matche
|
|
if (parent.name.toLowerCase().includes(query)) return true;
|
|
if (
|
|
parent.keywords.some((k) => k.toLowerCase().includes(query))
|
|
)
|
|
return true;
|
|
// Ou si un enfant matche
|
|
const children = childrenByParent[parent.id] || [];
|
|
return children.some(
|
|
(c) =>
|
|
c.name.toLowerCase().includes(query) ||
|
|
c.keywords.some((k) => k.toLowerCase().includes(query)),
|
|
);
|
|
})
|
|
.map((parent) => {
|
|
const allChildren = childrenByParent[parent.id] || [];
|
|
// Filtrer les enfants aussi si recherche active
|
|
const children = searchQuery.trim()
|
|
? allChildren.filter(
|
|
(c) =>
|
|
c.name
|
|
.toLowerCase()
|
|
.includes(searchQuery.toLowerCase()) ||
|
|
c.keywords.some((k) =>
|
|
k.toLowerCase().includes(searchQuery.toLowerCase()),
|
|
) ||
|
|
// Garder tous les enfants si le parent matche
|
|
parent.name
|
|
.toLowerCase()
|
|
.includes(searchQuery.toLowerCase()),
|
|
)
|
|
: allChildren;
|
|
const stats = getCategoryStats(parent.id, true);
|
|
const isExpanded =
|
|
expandedParents.has(parent.id) ||
|
|
(searchQuery.trim() !== "" && children.length > 0);
|
|
|
|
return (
|
|
<div key={parent.id} className="border rounded-lg bg-card">
|
|
<Collapsible
|
|
open={isExpanded}
|
|
onOpenChange={() => toggleExpanded(parent.id)}
|
|
>
|
|
<div className="flex items-center justify-between px-3 py-2">
|
|
<CollapsibleTrigger asChild>
|
|
<button className="flex items-center gap-2 hover:opacity-80 transition-opacity flex-1 min-w-0">
|
|
{isExpanded ? (
|
|
<ChevronDown className="w-4 h-4 text-muted-foreground shrink-0" />
|
|
) : (
|
|
<ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
|
|
)}
|
|
<div
|
|
className="w-7 h-7 rounded-full flex items-center justify-center shrink-0"
|
|
style={{ backgroundColor: `${parent.color}20` }}
|
|
>
|
|
<CategoryIcon
|
|
icon={parent.icon}
|
|
color={parent.color}
|
|
size={14}
|
|
/>
|
|
</div>
|
|
<span className="font-medium text-sm truncate">
|
|
{parent.name}
|
|
</span>
|
|
<span className="text-sm text-muted-foreground shrink-0">
|
|
{children.length} • {stats.count} opération
|
|
{stats.count > 1 ? "s" : ""} •{" "}
|
|
{formatCurrency(stats.total)}
|
|
</span>
|
|
</button>
|
|
</CollapsibleTrigger>
|
|
|
|
<div className="flex items-center gap-1 shrink-0 ml-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-7 w-7"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleNewCategory(parent.id);
|
|
}}
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
</Button>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-7 w-7"
|
|
>
|
|
<MoreVertical className="w-4 h-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem
|
|
onClick={() => handleEdit(parent)}
|
|
>
|
|
<Pencil className="w-4 h-4 mr-2" />
|
|
Modifier
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => handleDelete(parent.id)}
|
|
className="text-red-600"
|
|
>
|
|
<Trash2 className="w-4 h-4 mr-2" />
|
|
Supprimer
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
|
|
<CollapsibleContent>
|
|
{children.length > 0 ? (
|
|
<div className="px-3 pb-2 space-y-1 ml-6 border-l-2 border-muted ml-5">
|
|
{children.map((child) => (
|
|
<ChildCategoryCard
|
|
key={child.id}
|
|
category={child}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="px-3 pb-2 ml-11 text-xs text-muted-foreground italic">
|
|
Aucune sous-catégorie
|
|
</div>
|
|
)}
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
{/* Catégories orphelines (sans parent valide) */}
|
|
{orphanCategories.length > 0 && (
|
|
<div className="border rounded-lg bg-card">
|
|
<div className="px-3 py-2 border-b">
|
|
<span className="text-sm font-medium text-muted-foreground">
|
|
Catégories non classées ({orphanCategories.length})
|
|
</span>
|
|
</div>
|
|
<div className="p-2 space-y-1">
|
|
{orphanCategories.map((category) => (
|
|
<ChildCategoryCard key={category.id} category={category} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{/* Dialog de création/édition */}
|
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{editingCategory ? "Modifier la catégorie" : "Nouvelle catégorie"}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-4">
|
|
{/* Catégorie parente */}
|
|
<div className="space-y-2">
|
|
<Label>Catégorie parente</Label>
|
|
<Select
|
|
value={formData.parentId || "none"}
|
|
onValueChange={(value) =>
|
|
setFormData({
|
|
...formData,
|
|
parentId: value === "none" ? null : value,
|
|
})
|
|
}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Aucune (catégorie principale)" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="none">
|
|
Aucune (catégorie principale)
|
|
</SelectItem>
|
|
{parentCategories
|
|
.filter((p) => p.id !== editingCategory?.id)
|
|
.map((parent) => (
|
|
<SelectItem key={parent.id} value={parent.id}>
|
|
<div className="flex items-center gap-2">
|
|
<div
|
|
className="w-3 h-3 rounded-full"
|
|
style={{ backgroundColor: parent.color }}
|
|
/>
|
|
{parent.name}
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Nom */}
|
|
<div className="space-y-2">
|
|
<Label>Nom</Label>
|
|
<Input
|
|
value={formData.name}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, name: e.target.value })
|
|
}
|
|
placeholder="Ex: Alimentation"
|
|
/>
|
|
</div>
|
|
|
|
{/* Couleur */}
|
|
<div className="space-y-2">
|
|
<Label>Couleur</Label>
|
|
<div className="flex flex-wrap gap-2">
|
|
{categoryColors.map((color) => (
|
|
<button
|
|
key={color}
|
|
onClick={() => setFormData({ ...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 }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mots-clés */}
|
|
<div className="space-y-2">
|
|
<Label>Mots-clés pour la catégorisation automatique</Label>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
value={newKeyword}
|
|
onChange={(e) => setNewKeyword(e.target.value)}
|
|
placeholder="Ajouter un mot-clé"
|
|
onKeyDown={(e) =>
|
|
e.key === "Enter" && (e.preventDefault(), addKeyword())
|
|
}
|
|
/>
|
|
<Button type="button" onClick={addKeyword} size="icon">
|
|
<Plus className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="flex flex-wrap gap-1 mt-2 max-h-32 overflow-y-auto">
|
|
{formData.keywords.map((keyword) => (
|
|
<Badge key={keyword} variant="secondary" className="gap-1">
|
|
{keyword}
|
|
<button onClick={() => removeKeyword(keyword)}>
|
|
<X className="w-3 h-3" />
|
|
</button>
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex justify-end gap-2">
|
|
<Button variant="outline" onClick={() => setIsDialogOpen(false)}>
|
|
Annuler
|
|
</Button>
|
|
<Button onClick={handleSave} disabled={!formData.name.trim()}>
|
|
{editingCategory ? "Enregistrer" : "Créer"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|