chore: init from v0
This commit is contained in:
Julien Froidefond
318
app/categories/page.tsx
Normal file
318
app/categories/page.tsx
Normal file
@@ -0,0 +1,318 @@
|
||||
"use client"
|
||||
|
||||
import { useState } 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 type { Category } from "@/lib/types"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const categoryColors = [
|
||||
"#22c55e",
|
||||
"#3b82f6",
|
||||
"#f59e0b",
|
||||
"#ec4899",
|
||||
"#ef4444",
|
||||
"#8b5cf6",
|
||||
"#06b6d4",
|
||||
"#84cc16",
|
||||
"#f97316",
|
||||
"#6366f1",
|
||||
]
|
||||
|
||||
export default function CategoriesPage() {
|
||||
const { data, isLoading, refresh } = useBankingData()
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
||||
const [editingCategory, setEditingCategory] = useState<Category | null>(null)
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
color: "#22c55e",
|
||||
keywords: [] as string[],
|
||||
})
|
||||
const [newKeyword, setNewKeyword] = useState("")
|
||||
|
||||
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) => {
|
||||
const categoryTransactions = data.transactions.filter((t) => t.categoryId === categoryId)
|
||||
const total = categoryTransactions.reduce((sum, t) => sum + Math.abs(t.amount), 0)
|
||||
const count = categoryTransactions.length
|
||||
return { total, count }
|
||||
}
|
||||
|
||||
const handleNewCategory = () => {
|
||||
setEditingCategory(null)
|
||||
setFormData({ name: "", color: "#22c55e", keywords: [] })
|
||||
setIsDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleEdit = (category: Category) => {
|
||||
setEditingCategory(category)
|
||||
setFormData({
|
||||
name: category.name,
|
||||
color: category.color,
|
||||
keywords: [...category.keywords],
|
||||
})
|
||||
setIsDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
if (editingCategory) {
|
||||
await updateCategory({
|
||||
...editingCategory,
|
||||
name: formData.name,
|
||||
color: formData.color,
|
||||
keywords: formData.keywords,
|
||||
})
|
||||
} else {
|
||||
await addCategory({
|
||||
name: formData.name,
|
||||
color: formData.color,
|
||||
keywords: formData.keywords,
|
||||
icon: "tag",
|
||||
parentId: null,
|
||||
})
|
||||
}
|
||||
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) => {
|
||||
if (!confirm("Supprimer cette catégorie ?")) 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
|
||||
|
||||
return (
|
||||
<div className="flex h-screen bg-background">
|
||||
<Sidebar />
|
||||
<main className="flex-1 overflow-auto">
|
||||
<div className="p-6 space-y-6">
|
||||
<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
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{uncategorizedCount > 0 && (
|
||||
<Button variant="outline" onClick={reApplyAutoCategories}>
|
||||
Recatégoriser ({uncategorizedCount})
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={handleNewCategory}>
|
||||
<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)
|
||||
|
||||
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` }}
|
||||
>
|
||||
<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>
|
||||
</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>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<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">
|
||||
<div className="space-y-2">
|
||||
<Label>Nom</Label>
|
||||
<Input
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="Ex: Alimentation"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<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">
|
||||
{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>
|
||||
|
||||
<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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user