552 lines
16 KiB
TypeScript
552 lines
16 KiB
TypeScript
"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 {
|
|
addFolder,
|
|
updateFolder,
|
|
deleteFolder,
|
|
updateAccount,
|
|
} 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;
|
|
onEditAccount: (account: Account) => void;
|
|
formatCurrency: (amount: number) => string;
|
|
}
|
|
|
|
function FolderTreeItem({
|
|
folder,
|
|
accounts,
|
|
allFolders,
|
|
level,
|
|
onEdit,
|
|
onDelete,
|
|
onEditAccount,
|
|
formatCurrency,
|
|
}: FolderTreeItemProps) {
|
|
const [isExpanded, setIsExpanded] = useState(true);
|
|
|
|
// Pour le dossier "Mes Comptes" (folder-root), inclure aussi les comptes sans dossier
|
|
const folderAccounts = accounts.filter(
|
|
(a) =>
|
|
a.folderId === folder.id ||
|
|
(folder.id === "folder-root" && a.folderId === null),
|
|
);
|
|
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 group",
|
|
"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>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-7 w-7 opacity-0 group-hover:opacity-100"
|
|
onClick={() => onEditAccount(account)}
|
|
>
|
|
<Pencil className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
|
|
{childFolders.map((child) => (
|
|
<FolderTreeItem
|
|
key={child.id}
|
|
folder={child}
|
|
accounts={accounts}
|
|
allFolders={allFolders}
|
|
level={level + 1}
|
|
onEdit={onEdit}
|
|
onDelete={onDelete}
|
|
onEditAccount={onEditAccount}
|
|
formatCurrency={formatCurrency}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const accountTypeLabels = {
|
|
CHECKING: "Compte courant",
|
|
SAVINGS: "Épargne",
|
|
CREDIT_CARD: "Carte de crédit",
|
|
OTHER: "Autre",
|
|
};
|
|
|
|
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",
|
|
});
|
|
|
|
// Account editing state
|
|
const [isAccountDialogOpen, setIsAccountDialogOpen] = useState(false);
|
|
const [editingAccount, setEditingAccount] = useState<Account | null>(null);
|
|
const [accountFormData, setAccountFormData] = useState({
|
|
name: "",
|
|
type: "CHECKING" as Account["type"],
|
|
folderId: "folder-root",
|
|
});
|
|
|
|
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");
|
|
}
|
|
};
|
|
|
|
const handleEditAccount = (account: Account) => {
|
|
setEditingAccount(account);
|
|
setAccountFormData({
|
|
name: account.name,
|
|
type: account.type,
|
|
folderId: account.folderId || "folder-root",
|
|
});
|
|
setIsAccountDialogOpen(true);
|
|
};
|
|
|
|
const handleSaveAccount = async () => {
|
|
if (!editingAccount) return;
|
|
|
|
try {
|
|
await updateAccount({
|
|
...editingAccount,
|
|
name: accountFormData.name,
|
|
type: accountFormData.type,
|
|
folderId:
|
|
accountFormData.folderId === "folder-root"
|
|
? null
|
|
: accountFormData.folderId,
|
|
});
|
|
refresh();
|
|
setIsAccountDialogOpen(false);
|
|
setEditingAccount(null);
|
|
} catch (error) {
|
|
console.error("Error updating account:", error);
|
|
alert("Erreur lors de la mise à jour du compte");
|
|
}
|
|
};
|
|
|
|
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}
|
|
onEditAccount={handleEditAccount}
|
|
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>
|
|
|
|
<Dialog open={isAccountDialogOpen} onOpenChange={setIsAccountDialogOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Modifier le compte</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label>Nom du compte</Label>
|
|
<Input
|
|
value={accountFormData.name}
|
|
onChange={(e) =>
|
|
setAccountFormData({
|
|
...accountFormData,
|
|
name: e.target.value,
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Type de compte</Label>
|
|
<Select
|
|
value={accountFormData.type}
|
|
onValueChange={(v) =>
|
|
setAccountFormData({
|
|
...accountFormData,
|
|
type: v as Account["type"],
|
|
})
|
|
}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{Object.entries(accountTypeLabels).map(([value, label]) => (
|
|
<SelectItem key={value} value={value}>
|
|
{label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Dossier</Label>
|
|
<Select
|
|
value={accountFormData.folderId}
|
|
onValueChange={(v) =>
|
|
setAccountFormData({ ...accountFormData, folderId: v })
|
|
}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{data.folders.map((folder) => (
|
|
<SelectItem key={folder.id} value={folder.id}>
|
|
{folder.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="flex justify-end gap-2">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setIsAccountDialogOpen(false)}
|
|
>
|
|
Annuler
|
|
</Button>
|
|
<Button onClick={handleSaveAccount}>Enregistrer</Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|