562 lines
22 KiB
TypeScript
562 lines
22 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>
|
|
)
|
|
}
|