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

feat: implement hierarchical category management with parent-child relationships and enhance category creation dialog

Browse Source
This commit is contained in:
Julien Froidefond
2025-11-27 10:29:59 +01:00
parent d7374e4129
commit 7314cb6716
9 changed files with 1048 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

342
app/categories/page.tsx
View File

@@ -1,44 +1,78 @@
"use client"
import { useState } from "react"
import { useState, useMemo } from "react"
import { Sidebar } from "@/components/dashboard/sidebar"
import { useBankingData } from "@/lib/hooks"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
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 { Plus, MoreVertical, Pencil, Trash2, Tag, RefreshCw, X } from "lucide-react"
import { generateId, autoCategorize, addCategory, updateCategory, deleteCategory } from "@/lib/store-db"
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 } 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",
"#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("")
// 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">
@@ -51,22 +85,35 @@ export default function CategoriesPage() {
}
const formatCurrency = (amount: number) => {
return new Intl.NumberFormat("fr-FR", {
style: "currency",
currency: "EUR",
}).format(amount)
return new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR" }).format(amount)
}
const getCategoryStats = (categoryId: string) => {
const categoryTransactions = data.transactions.filter((t) => t.categoryId === categoryId)
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 handleNewCategory = () => {
const toggleExpanded = (parentId: string) => {
const newExpanded = new Set(expandedParents)
if (newExpanded.has(parentId)) {
newExpanded.delete(parentId)
} else {
newExpanded.add(parentId)
}
setExpandedParents(newExpanded)
}
const handleNewCategory = (parentId: string | null = null) => {
setEditingCategory(null)
setFormData({ name: "", color: "#22c55e", keywords: [] })
setFormData({ name: "", color: "#22c55e", keywords: [], parentId })
setIsDialogOpen(true)
}
@@ -76,6 +123,7 @@ export default function CategoriesPage() {
name: category.name,
color: category.color,
keywords: [...category.keywords],
parentId: category.parentId,
})
setIsDialogOpen(true)
}
@@ -88,6 +136,7 @@ export default function CategoriesPage() {
name: formData.name,
color: formData.color,
keywords: formData.keywords,
parentId: formData.parentId,
})
} else {
await addCategory({
@@ -95,7 +144,7 @@ export default function CategoriesPage() {
color: formData.color,
keywords: formData.keywords,
icon: "tag",
parentId: null,
parentId: formData.parentId,
})
}
refresh()
@@ -107,7 +156,12 @@ export default function CategoriesPage() {
}
const handleDelete = async (categoryId: string) => {
if (!confirm("Supprimer cette catégorie ?")) return
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)
@@ -141,9 +195,12 @@ export default function CategoriesPage() {
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)
const categoryId = autoCategorize(
transaction.description + " " + (transaction.memo || ""),
data.categories
)
if (categoryId) {
await updateTransaction({ ...transaction, categoryId })
}
@@ -157,16 +214,59 @@ export default function CategoriesPage() {
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">
Gérez vos catégories et mots-clés pour la catégorisation automatique
{parentCategories.length} catégories principales •{" "}
{data.categories.length - parentCategories.length} sous-catégories
</p>
</div>
<div className="flex gap-2">
@@ -175,82 +275,157 @@ export default function CategoriesPage() {
Recatégoriser ({uncategorizedCount})
</Button>
)}
<Button onClick={handleNewCategory}>
<Button onClick={() => handleNewCategory(null)}>
<Plus className="w-4 h-4 mr-2" />
Nouvelle catégorie
</Button>
</div>
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{data.categories.map((category) => {
const stats = getCategoryStats(category.id)
{/* Liste des catégories par parent */}
<div className="space-y-1">
{parentCategories.map((parent) => {
const children = childrenByParent[parent.id] || []
const stats = getCategoryStats(parent.id, true)
const isExpanded = expandedParents.has(parent.id)
return (
<Card key={category.id}>
<CardHeader className="pb-2">
<div className="flex items-start justify-between">
<div className="flex items-center gap-3">
<div
className="w-10 h-10 rounded-full flex items-center justify-center"
style={{ backgroundColor: `${category.color}20` }}
<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)
}}
>
<Tag className="w-5 h-5" style={{ color: category.color }} />
</div>
<div>
<CardTitle className="text-base">{category.name}</CardTitle>
<p className="text-xs text-muted-foreground">
{stats.count} transaction{stats.count > 1 ? "s" : ""}
</p>
</div>
<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>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8">
<MoreVertical className="w-4 h-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => handleEdit(category)}>
<Pencil className="w-4 h-4 mr-2" />
Modifier
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleDelete(category.id)} className="text-red-600">
<Trash2 className="w-4 h-4 mr-2" />
Supprimer
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</CardHeader>
<CardContent>
<div className="text-lg font-semibold mb-3">{formatCurrency(stats.total)}</div>
<div className="flex flex-wrap gap-1">
{category.keywords.slice(0, 5).map((keyword) => (
<Badge key={keyword} variant="secondary" className="text-xs">
{keyword}
</Badge>
))}
{category.keywords.length > 5 && (
<Badge variant="secondary" className="text-xs">
+{category.keywords.length - 5}
</Badge>
<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>
)}
</div>
</CardContent>
</Card>
</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>
<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
@@ -260,6 +435,7 @@ export default function CategoriesPage() {
/>
</div>
{/* Couleur */}
<div className="space-y-2">
<Label>Couleur</Label>
<div className="flex flex-wrap gap-2">
@@ -269,7 +445,7 @@ export default function CategoriesPage() {
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",
formData.color === color && "ring-2 ring-offset-2 ring-primary scale-110"
)}
style={{ backgroundColor: color }}
/>
@@ -277,6 +453,7 @@ export default function CategoriesPage() {
</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">
@@ -290,7 +467,7 @@ export default function CategoriesPage() {
<Plus className="w-4 h-4" />
</Button>
</div>
<div className="flex flex-wrap gap-1 mt-2">
<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}
@@ -302,6 +479,7 @@ export default function CategoriesPage() {
</div>
</div>
{/* Actions */}
<div className="flex justify-end gap-2">
<Button variant="outline" onClick={() => setIsDialogOpen(false)}>
Annuler

4
app/statistics/page.tsx
View File

@@ -6,6 +6,7 @@ import { useBankingData } from "@/lib/hooks"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { RefreshCw, TrendingUp, TrendingDown, ArrowRight } from "lucide-react"
import { CategoryIcon } from "@/components/ui/category-icon"
import {
BarChart,
Bar,
@@ -385,9 +386,10 @@ export default function StatisticsPage() {
</span>
{category && (
<span
className="text-xs px-1.5 py-0.5 rounded"
className="text-xs px-1.5 py-0.5 rounded inline-flex items-center gap-1"
style={{ backgroundColor: `${category.color}20`, color: category.color }}
>
<CategoryIcon icon={category.icon} color={category.color} size={10} />
{category.name}
</span>
)}

10
app/transactions/page.tsx
View File

@@ -17,6 +17,7 @@ import {
DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu"
import { OFXImportDialog } from "@/components/import/ofx-import-dialog"
import { CategoryIcon } from "@/components/ui/category-icon"
import { Search, CheckCircle2, Circle, MoreVertical, Tags, Upload, RefreshCw, ArrowUpDown, Check } from "lucide-react"
import { cn } from "@/lib/utils"
@@ -274,7 +275,7 @@ export default function TransactionsPage() {
<DropdownMenuSeparator />
{data.categories.map((cat) => (
<DropdownMenuItem key={cat.id} onClick={() => bulkSetCategory(cat.id)}>
<div className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: cat.color }} />
<CategoryIcon icon={cat.icon} color={cat.color} size={14} className="mr-2" />
{cat.name}
</DropdownMenuItem>
))}
@@ -392,11 +393,13 @@ export default function TransactionsPage() {
{category ? (
<Badge
variant="secondary"
className="gap-1"
style={{
backgroundColor: `${category.color}20`,
color: category.color,
}}
>
<CategoryIcon icon={category.icon} color={category.color} size={12} />
{category.name}
</Badge>
) : (
@@ -413,10 +416,7 @@ export default function TransactionsPage() {
<DropdownMenuSeparator />
{data.categories.map((cat) => (
<DropdownMenuItem key={cat.id} onClick={() => setCategory(transaction.id, cat.id)}>
<div
className="w-3 h-3 rounded-full mr-2"
style={{ backgroundColor: cat.color }}
/>
<CategoryIcon icon={cat.icon} color={cat.color} size={14} className="mr-2" />
{cat.name}
{transaction.categoryId === cat.id && <Check className="w-4 h-4 ml-auto" />}
</DropdownMenuItem>