chore: init from v0
This commit is contained in:
Julien Froidefond
345
app/folders/page.tsx
Normal file
345
app/folders/page.tsx
Normal file
@@ -0,0 +1,345 @@
|
||||
"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 { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
||||
import {
|
||||
Plus,
|
||||
MoreVertical,
|
||||
Pencil,
|
||||
Trash2,
|
||||
Folder,
|
||||
FolderOpen,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
Building2,
|
||||
RefreshCw,
|
||||
} from "lucide-react"
|
||||
import { generateId, addFolder, updateFolder, deleteFolder } from "@/lib/store-db"
|
||||
import type { Folder as FolderType, Account } from "@/lib/types"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const folderColors = [
|
||||
{ value: "#6366f1", label: "Indigo" },
|
||||
{ value: "#22c55e", label: "Vert" },
|
||||
{ value: "#f59e0b", label: "Orange" },
|
||||
{ value: "#ec4899", label: "Rose" },
|
||||
{ value: "#3b82f6", label: "Bleu" },
|
||||
{ value: "#ef4444", label: "Rouge" },
|
||||
]
|
||||
|
||||
interface FolderTreeItemProps {
|
||||
folder: FolderType
|
||||
accounts: Account[]
|
||||
allFolders: FolderType[]
|
||||
level: number
|
||||
onEdit: (folder: FolderType) => void
|
||||
onDelete: (folderId: string) => void
|
||||
formatCurrency: (amount: number) => string
|
||||
}
|
||||
|
||||
function FolderTreeItem({
|
||||
folder,
|
||||
accounts,
|
||||
allFolders,
|
||||
level,
|
||||
onEdit,
|
||||
onDelete,
|
||||
formatCurrency,
|
||||
}: FolderTreeItemProps) {
|
||||
const [isExpanded, setIsExpanded] = useState(true)
|
||||
|
||||
const folderAccounts = accounts.filter((a) => a.folderId === folder.id)
|
||||
const childFolders = allFolders.filter((f) => f.parentId === folder.id)
|
||||
const hasChildren = childFolders.length > 0 || folderAccounts.length > 0
|
||||
|
||||
const folderTotal = folderAccounts.reduce((sum, a) => sum + a.balance, 0)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn("flex items-center gap-2 p-2 rounded-lg hover:bg-muted/50 group", level > 0 && "ml-6")}>
|
||||
<button
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="p-1 hover:bg-muted rounded"
|
||||
disabled={!hasChildren}
|
||||
>
|
||||
{hasChildren ? (
|
||||
isExpanded ? (
|
||||
<ChevronDown className="w-4 h-4 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronRight className="w-4 h-4 text-muted-foreground" />
|
||||
)
|
||||
) : (
|
||||
<div className="w-4 h-4" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div
|
||||
className="w-6 h-6 rounded flex items-center justify-center"
|
||||
style={{ backgroundColor: `${folder.color}20` }}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<FolderOpen className="w-4 h-4" style={{ color: folder.color }} />
|
||||
) : (
|
||||
<Folder className="w-4 h-4" style={{ color: folder.color }} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<span className="flex-1 font-medium text-sm">{folder.name}</span>
|
||||
|
||||
{folderAccounts.length > 0 && (
|
||||
<span
|
||||
className={cn("text-sm font-semibold tabular-nums", folderTotal >= 0 ? "text-emerald-600" : "text-red-600")}
|
||||
>
|
||||
{formatCurrency(folderTotal)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7 opacity-0 group-hover:opacity-100">
|
||||
<MoreVertical className="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => onEdit(folder)}>
|
||||
<Pencil className="w-4 h-4 mr-2" />
|
||||
Modifier
|
||||
</DropdownMenuItem>
|
||||
{folder.id !== "folder-root" && (
|
||||
<DropdownMenuItem onClick={() => onDelete(folder.id)} className="text-red-600">
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Supprimer
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
{isExpanded && (
|
||||
<div>
|
||||
{folderAccounts.map((account) => (
|
||||
<div key={account.id} className={cn("flex items-center gap-2 p-2 rounded-lg hover:bg-muted/50", "ml-12")}>
|
||||
<Building2 className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="flex-1 text-sm">{account.name}</span>
|
||||
<span className={cn("text-sm tabular-nums", account.balance >= 0 ? "text-emerald-600" : "text-red-600")}>
|
||||
{formatCurrency(account.balance)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{childFolders.map((child) => (
|
||||
<FolderTreeItem
|
||||
key={child.id}
|
||||
folder={child}
|
||||
accounts={accounts}
|
||||
allFolders={allFolders}
|
||||
level={level + 1}
|
||||
onEdit={onEdit}
|
||||
onDelete={onDelete}
|
||||
formatCurrency={formatCurrency}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function FoldersPage() {
|
||||
const { data, isLoading, refresh } = useBankingData()
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
||||
const [editingFolder, setEditingFolder] = useState<FolderType | null>(null)
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
parentId: "folder-root" as string | null,
|
||||
color: "#6366f1",
|
||||
})
|
||||
|
||||
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 rootFolders = data.folders.filter((f) => f.parentId === null)
|
||||
|
||||
const handleNewFolder = () => {
|
||||
setEditingFolder(null)
|
||||
setFormData({ name: "", parentId: "folder-root", color: "#6366f1" })
|
||||
setIsDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleEdit = (folder: FolderType) => {
|
||||
setEditingFolder(folder)
|
||||
setFormData({
|
||||
name: folder.name,
|
||||
parentId: folder.parentId || "folder-root",
|
||||
color: folder.color,
|
||||
})
|
||||
setIsDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
const parentId = formData.parentId === "folder-root" ? null : formData.parentId
|
||||
|
||||
try {
|
||||
if (editingFolder) {
|
||||
await updateFolder({
|
||||
...editingFolder,
|
||||
name: formData.name,
|
||||
parentId,
|
||||
color: formData.color,
|
||||
})
|
||||
} else {
|
||||
await addFolder({
|
||||
name: formData.name,
|
||||
parentId,
|
||||
color: formData.color,
|
||||
icon: "folder",
|
||||
})
|
||||
}
|
||||
refresh()
|
||||
setIsDialogOpen(false)
|
||||
} catch (error) {
|
||||
console.error("Error saving folder:", error)
|
||||
alert("Erreur lors de la sauvegarde du dossier")
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (folderId: string) => {
|
||||
if (!confirm("Supprimer ce dossier ? Les comptes seront déplacés à la racine.")) return
|
||||
|
||||
try {
|
||||
await deleteFolder(folderId)
|
||||
refresh()
|
||||
} catch (error) {
|
||||
console.error("Error deleting folder:", error)
|
||||
alert("Erreur lors de la suppression du dossier")
|
||||
}
|
||||
}
|
||||
|
||||
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">Organisation</h1>
|
||||
<p className="text-muted-foreground">Organisez vos comptes en dossiers</p>
|
||||
</div>
|
||||
<Button onClick={handleNewFolder}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Nouveau dossier
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Arborescence des comptes</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-1">
|
||||
{rootFolders.map((folder) => (
|
||||
<FolderTreeItem
|
||||
key={folder.id}
|
||||
folder={folder}
|
||||
accounts={data.accounts}
|
||||
allFolders={data.folders}
|
||||
level={0}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
formatCurrency={formatCurrency}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editingFolder ? "Modifier le dossier" : "Nouveau dossier"}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Nom du dossier</Label>
|
||||
<Input
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="Ex: Comptes personnels"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Dossier parent</Label>
|
||||
<Select
|
||||
value={formData.parentId || "root"}
|
||||
onValueChange={(v) => setFormData({ ...formData, parentId: v === "root" ? null : v })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="root">Racine</SelectItem>
|
||||
{data.folders
|
||||
.filter((f) => f.id !== editingFolder?.id)
|
||||
.map((folder) => (
|
||||
<SelectItem key={folder.id} value={folder.id}>
|
||||
{folder.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Couleur</Label>
|
||||
<div className="flex gap-2">
|
||||
{folderColors.map(({ value }) => (
|
||||
<button
|
||||
key={value}
|
||||
onClick={() => setFormData({ ...formData, color: value })}
|
||||
className={cn(
|
||||
"w-8 h-8 rounded-full transition-transform",
|
||||
formData.color === value && "ring-2 ring-offset-2 ring-primary scale-110",
|
||||
)}
|
||||
style={{ backgroundColor: value }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="outline" onClick={() => setIsDialogOpen(false)}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={!formData.name.trim()}>
|
||||
{editingFolder ? "Enregistrer" : "Créer"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user