477 lines
15 KiB
TypeScript
477 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useMemo, useEffect, useCallback } from "react";
|
|
import { PageLayout, LoadingState, PageHeader } from "@/components/layout";
|
|
import {
|
|
CategoryCard,
|
|
CategoryEditDialog,
|
|
ParentCategoryRow,
|
|
CategorySearchBar,
|
|
} from "@/components/categories";
|
|
import { useBankingMetadata, useCategoryStats } from "@/lib/hooks";
|
|
import { useQueryClient } from "@tanstack/react-query";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
} from "@/components/ui/dialog";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { CategoryIcon } from "@/components/ui/category-icon";
|
|
import { Plus, ArrowRight, CheckCircle2, RefreshCw } from "lucide-react";
|
|
import {
|
|
autoCategorize,
|
|
addCategory,
|
|
updateCategory,
|
|
deleteCategory,
|
|
} from "@/lib/store-db";
|
|
import type { Category, Transaction } from "@/lib/types";
|
|
|
|
interface RecategorizationResult {
|
|
transaction: Transaction;
|
|
category: Category;
|
|
}
|
|
|
|
export default function CategoriesPage() {
|
|
const queryClient = useQueryClient();
|
|
const { data: metadata, isLoading: isLoadingMetadata } = useBankingMetadata();
|
|
const { data: categoryStats, isLoading: isLoadingStats } = useCategoryStats();
|
|
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",
|
|
icon: "tag",
|
|
keywords: [] as string[],
|
|
parentId: null as string | null,
|
|
});
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [recatResults, setRecatResults] = useState<RecategorizationResult[]>(
|
|
[],
|
|
);
|
|
const [isRecatDialogOpen, setIsRecatDialogOpen] = useState(false);
|
|
const [isRecategorizing, setIsRecategorizing] = useState(false);
|
|
|
|
// Organiser les catégories par parent
|
|
const { parentCategories, childrenByParent, orphanCategories } =
|
|
useMemo(() => {
|
|
if (!metadata?.categories)
|
|
return {
|
|
parentCategories: [],
|
|
childrenByParent: {},
|
|
orphanCategories: [],
|
|
};
|
|
|
|
const parents = metadata.categories.filter(
|
|
(c: Category) => c.parentId === null,
|
|
);
|
|
const children: Record<string, Category[]> = {};
|
|
const orphans: Category[] = [];
|
|
|
|
metadata.categories
|
|
.filter((c: Category) => c.parentId !== null)
|
|
.forEach((child: Category) => {
|
|
const parentExists = parents.some(
|
|
(p: Category) => 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,
|
|
};
|
|
}, [metadata?.categories]);
|
|
|
|
// Initialiser tous les parents comme ouverts
|
|
useEffect(() => {
|
|
if (parentCategories.length > 0 && expandedParents.size === 0) {
|
|
setExpandedParents(new Set(parentCategories.map((p: Category) => p.id)));
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [parentCategories.length]);
|
|
|
|
const refresh = useCallback(() => {
|
|
queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
|
|
queryClient.invalidateQueries({ queryKey: ["category-stats"] });
|
|
}, [queryClient]);
|
|
|
|
const getCategoryStats = useCallback(
|
|
(categoryId: string, includeChildren = false) => {
|
|
if (!categoryStats) return { total: 0, count: 0 };
|
|
|
|
let categoryIds = [categoryId];
|
|
|
|
if (includeChildren && childrenByParent[categoryId]) {
|
|
categoryIds = [
|
|
...categoryIds,
|
|
...childrenByParent[categoryId].map((c) => c.id),
|
|
];
|
|
}
|
|
|
|
// Sum stats from all category IDs
|
|
let total = 0;
|
|
let count = 0;
|
|
|
|
categoryIds.forEach((id) => {
|
|
const stats = categoryStats[id];
|
|
if (stats) {
|
|
total += stats.total;
|
|
count += stats.count;
|
|
}
|
|
});
|
|
|
|
return { total, count };
|
|
},
|
|
[categoryStats, childrenByParent],
|
|
);
|
|
|
|
if (isLoadingMetadata || !metadata || isLoadingStats || !categoryStats) {
|
|
return <LoadingState />;
|
|
}
|
|
|
|
const formatCurrency = (amount: number) => {
|
|
return new Intl.NumberFormat("fr-FR", {
|
|
style: "currency",
|
|
currency: "EUR",
|
|
}).format(amount);
|
|
};
|
|
|
|
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: Category) => 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",
|
|
icon: "tag",
|
|
keywords: [],
|
|
parentId,
|
|
});
|
|
setIsDialogOpen(true);
|
|
};
|
|
|
|
const handleEdit = (category: Category) => {
|
|
setEditingCategory(category);
|
|
setFormData({
|
|
name: category.name,
|
|
color: category.color,
|
|
icon: category.icon,
|
|
keywords: [...category.keywords],
|
|
parentId: category.parentId,
|
|
});
|
|
setIsDialogOpen(true);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
try {
|
|
if (editingCategory) {
|
|
await updateCategory({
|
|
...editingCategory,
|
|
name: formData.name,
|
|
color: formData.color,
|
|
icon: formData.icon,
|
|
keywords: formData.keywords,
|
|
parentId: formData.parentId,
|
|
});
|
|
} else {
|
|
await addCategory({
|
|
name: formData.name,
|
|
color: formData.color,
|
|
icon: formData.icon,
|
|
keywords: formData.keywords,
|
|
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 reApplyAutoCategories = async () => {
|
|
setIsRecategorizing(true);
|
|
const results: RecategorizationResult[] = [];
|
|
|
|
try {
|
|
// Fetch uncategorized transactions
|
|
const uncategorizedResponse = await fetch(
|
|
"/api/banking/transactions?limit=1000&offset=0&includeUncategorized=true",
|
|
);
|
|
if (!uncategorizedResponse.ok) {
|
|
throw new Error("Failed to fetch uncategorized transactions");
|
|
}
|
|
const { transactions: uncategorized } =
|
|
await uncategorizedResponse.json();
|
|
|
|
const { updateTransaction } = await import("@/lib/store-db");
|
|
|
|
for (const transaction of uncategorized) {
|
|
const categoryId = autoCategorize(
|
|
transaction.description + " " + (transaction.memo || ""),
|
|
metadata.categories,
|
|
);
|
|
if (categoryId) {
|
|
const category = metadata.categories.find(
|
|
(c: Category) => c.id === categoryId,
|
|
);
|
|
if (category) {
|
|
results.push({ transaction, category });
|
|
await updateTransaction({ ...transaction, categoryId });
|
|
}
|
|
}
|
|
}
|
|
|
|
setRecatResults(results);
|
|
setIsRecatDialogOpen(true);
|
|
refresh();
|
|
} catch (error) {
|
|
console.error("Error re-categorizing:", error);
|
|
alert("Erreur lors de la recatégorisation");
|
|
} finally {
|
|
setIsRecategorizing(false);
|
|
}
|
|
};
|
|
|
|
const uncategorizedCount = categoryStats["uncategorized"]?.count || 0;
|
|
|
|
// Filtrer les catégories selon la recherche
|
|
const filteredParentCategories = parentCategories.filter(
|
|
(parent: Category) => {
|
|
if (!searchQuery.trim()) return true;
|
|
const query = searchQuery.toLowerCase();
|
|
if (parent.name.toLowerCase().includes(query)) return true;
|
|
if (parent.keywords.some((k: string) => k.toLowerCase().includes(query)))
|
|
return true;
|
|
const children = childrenByParent[parent.id] || [];
|
|
return children.some(
|
|
(c) =>
|
|
c.name.toLowerCase().includes(query) ||
|
|
c.keywords.some((k) => k.toLowerCase().includes(query)),
|
|
);
|
|
},
|
|
);
|
|
|
|
return (
|
|
<PageLayout>
|
|
<PageHeader
|
|
title="Catégories"
|
|
description={`${parentCategories.length} catégories principales • ${metadata.categories.length - parentCategories.length} sous-catégories`}
|
|
actions={
|
|
<>
|
|
{uncategorizedCount > 0 && (
|
|
<Button
|
|
variant="outline"
|
|
onClick={reApplyAutoCategories}
|
|
disabled={isRecategorizing}
|
|
>
|
|
{isRecategorizing ? (
|
|
<RefreshCw className="w-4 h-4 mr-2 animate-spin" />
|
|
) : null}
|
|
Recatégoriser ({uncategorizedCount})
|
|
</Button>
|
|
)}
|
|
<Button onClick={() => handleNewCategory(null)}>
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
Nouvelle catégorie
|
|
</Button>
|
|
</>
|
|
}
|
|
/>
|
|
|
|
<CategorySearchBar
|
|
searchQuery={searchQuery}
|
|
onSearchChange={setSearchQuery}
|
|
allExpanded={allExpanded}
|
|
onToggleAll={allExpanded ? collapseAll : expandAll}
|
|
/>
|
|
|
|
<div className="space-y-1">
|
|
{filteredParentCategories.map((parent: Category) => {
|
|
const allChildren = childrenByParent[parent.id] || [];
|
|
const children = searchQuery.trim()
|
|
? allChildren.filter(
|
|
(c) =>
|
|
c.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
c.keywords.some((k) =>
|
|
k.toLowerCase().includes(searchQuery.toLowerCase()),
|
|
) ||
|
|
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 (
|
|
<ParentCategoryRow
|
|
key={parent.id}
|
|
parent={parent}
|
|
children={children}
|
|
stats={stats}
|
|
isExpanded={isExpanded}
|
|
onToggleExpanded={() => toggleExpanded(parent.id)}
|
|
formatCurrency={formatCurrency}
|
|
getCategoryStats={(id) => getCategoryStats(id)}
|
|
onEdit={handleEdit}
|
|
onDelete={handleDelete}
|
|
onNewCategory={handleNewCategory}
|
|
/>
|
|
);
|
|
})}
|
|
|
|
{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) => (
|
|
<CategoryCard
|
|
key={category.id}
|
|
category={category}
|
|
stats={getCategoryStats(category.id)}
|
|
formatCurrency={formatCurrency}
|
|
onEdit={handleEdit}
|
|
onDelete={handleDelete}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<CategoryEditDialog
|
|
open={isDialogOpen}
|
|
onOpenChange={setIsDialogOpen}
|
|
editingCategory={editingCategory}
|
|
formData={formData}
|
|
onFormDataChange={setFormData}
|
|
parentCategories={parentCategories}
|
|
onSave={handleSave}
|
|
/>
|
|
|
|
{/* Dialog des résultats de recatégorisation */}
|
|
<Dialog open={isRecatDialogOpen} onOpenChange={setIsRecatDialogOpen}>
|
|
<DialogContent className="sm:max-w-lg max-h-[80vh] overflow-hidden flex flex-col">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<CheckCircle2 className="h-5 w-5 text-success" />
|
|
Recatégorisation terminée
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{recatResults.length === 0
|
|
? "Aucune transaction n'a pu être catégorisée automatiquement."
|
|
: `${recatResults.length} transaction${recatResults.length > 1 ? "s" : ""} catégorisée${recatResults.length > 1 ? "s" : ""}`}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
{recatResults.length > 0 && (
|
|
<div className="flex-1 overflow-y-auto -mx-6 px-6">
|
|
<div className="space-y-2">
|
|
{recatResults.map((result, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-center gap-3 p-2 rounded-lg bg-muted/50 text-sm"
|
|
>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-medium truncate">
|
|
{result.transaction.description}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground truncate">
|
|
{new Date(result.transaction.date).toLocaleDateString(
|
|
"fr-FR",
|
|
)}
|
|
{" • "}
|
|
{new Intl.NumberFormat("fr-FR", {
|
|
style: "currency",
|
|
currency: "EUR",
|
|
}).format(result.transaction.amount)}
|
|
</p>
|
|
</div>
|
|
<ArrowRight className="h-4 w-4 text-muted-foreground shrink-0" />
|
|
<Badge
|
|
variant="secondary"
|
|
className="gap-1 shrink-0"
|
|
style={{
|
|
backgroundColor: `${result.category.color}20`,
|
|
color: result.category.color,
|
|
}}
|
|
>
|
|
<CategoryIcon
|
|
icon={result.category.icon}
|
|
color={result.category.color}
|
|
size={12}
|
|
/>
|
|
{result.category.name}
|
|
</Badge>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-end pt-4 border-t">
|
|
<Button onClick={() => setIsRecatDialogOpen(false)}>Fermer</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</PageLayout>
|
|
);
|
|
}
|