602 lines
19 KiB
TypeScript
602 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import {
|
|
DndContext,
|
|
DragEndEvent,
|
|
DragOverlay,
|
|
DragStartEvent,
|
|
PointerSensor,
|
|
useSensor,
|
|
useSensors,
|
|
closestCenter,
|
|
useDroppable,
|
|
} from "@dnd-kit/core";
|
|
import { PageLayout, LoadingState, PageHeader } from "@/components/layout";
|
|
import {
|
|
AccountCard,
|
|
AccountEditDialog,
|
|
AccountBulkActions,
|
|
} from "@/components/accounts";
|
|
import { FolderEditDialog } from "@/components/folders";
|
|
import { useBankingData } from "@/lib/hooks";
|
|
import {
|
|
updateAccount,
|
|
deleteAccount,
|
|
addFolder,
|
|
updateFolder,
|
|
deleteFolder,
|
|
} from "@/lib/store-db";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Building2, Folder, Plus, List, LayoutGrid } from "lucide-react";
|
|
import type { Account, Folder as FolderType } from "@/lib/types";
|
|
import { cn } from "@/lib/utils";
|
|
import { getAccountBalance } from "@/lib/account-utils";
|
|
|
|
// Composant wrapper pour les zones de drop des dossiers
|
|
function FolderDropZone({
|
|
folderId,
|
|
children,
|
|
}: {
|
|
folderId: string;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const { setNodeRef, isOver } = useDroppable({
|
|
id: `folder-${folderId}`,
|
|
});
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
className={cn(
|
|
isOver && "ring-2 ring-primary ring-offset-2 rounded-lg p-2",
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function AccountsPage() {
|
|
const { data, isLoading, refresh, refreshSilent, update } = useBankingData();
|
|
const [editingAccount, setEditingAccount] = useState<Account | null>(null);
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
|
const [selectedAccounts, setSelectedAccounts] = useState<Set<string>>(
|
|
new Set(),
|
|
);
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
type: "CHECKING" as Account["type"],
|
|
folderId: "folder-root",
|
|
externalUrl: "",
|
|
initialBalance: 0,
|
|
});
|
|
|
|
// Folder management state
|
|
const [isFolderDialogOpen, setIsFolderDialogOpen] = useState(false);
|
|
const [editingFolder, setEditingFolder] = useState<FolderType | null>(null);
|
|
const [folderFormData, setFolderFormData] = useState({
|
|
name: "",
|
|
parentId: "folder-root" as string | null,
|
|
color: "#6366f1",
|
|
});
|
|
const [activeId, setActiveId] = useState<string | null>(null);
|
|
const [isCompactView, setIsCompactView] = useState(false);
|
|
|
|
const sensors = useSensors(
|
|
useSensor(PointerSensor, {
|
|
activationConstraint: {
|
|
distance: 8,
|
|
},
|
|
}),
|
|
);
|
|
|
|
if (isLoading || !data) {
|
|
return <LoadingState />;
|
|
}
|
|
|
|
const formatCurrency = (amount: number) => {
|
|
return new Intl.NumberFormat("fr-FR", {
|
|
style: "currency",
|
|
currency: "EUR",
|
|
}).format(amount);
|
|
};
|
|
|
|
const handleEdit = (account: Account) => {
|
|
setEditingAccount(account);
|
|
setFormData({
|
|
name: account.name,
|
|
type: account.type,
|
|
folderId: account.folderId || "folder-root",
|
|
externalUrl: account.externalUrl || "",
|
|
initialBalance: account.initialBalance || 0,
|
|
});
|
|
setIsDialogOpen(true);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (!editingAccount) return;
|
|
|
|
try {
|
|
const updatedAccount = {
|
|
...editingAccount,
|
|
name: formData.name,
|
|
type: formData.type,
|
|
folderId: formData.folderId,
|
|
externalUrl: formData.externalUrl || null,
|
|
initialBalance: formData.initialBalance,
|
|
};
|
|
await updateAccount(updatedAccount);
|
|
refresh();
|
|
setIsDialogOpen(false);
|
|
setEditingAccount(null);
|
|
} catch (error) {
|
|
console.error("Error updating account:", error);
|
|
alert("Erreur lors de la mise à jour du compte");
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (accountId: string) => {
|
|
if (!confirm("Supprimer ce compte et toutes ses transactions ?")) return;
|
|
|
|
try {
|
|
await deleteAccount(accountId);
|
|
refresh();
|
|
} catch (error) {
|
|
console.error("Error deleting account:", error);
|
|
alert("Erreur lors de la suppression du compte");
|
|
}
|
|
};
|
|
|
|
const handleBulkDelete = async () => {
|
|
const count = selectedAccounts.size;
|
|
if (
|
|
!confirm(
|
|
`Supprimer ${count} compte${count > 1 ? "s" : ""} et toutes leurs transactions ?`,
|
|
)
|
|
)
|
|
return;
|
|
|
|
try {
|
|
const ids = Array.from(selectedAccounts);
|
|
const response = await fetch(
|
|
`/api/banking/accounts?ids=${ids.join(",")}`,
|
|
{
|
|
method: "DELETE",
|
|
},
|
|
);
|
|
if (!response.ok) {
|
|
throw new Error("Failed to delete accounts");
|
|
}
|
|
setSelectedAccounts(new Set());
|
|
refresh();
|
|
} catch (error) {
|
|
console.error("Error deleting accounts:", error);
|
|
alert("Erreur lors de la suppression des comptes");
|
|
}
|
|
};
|
|
|
|
const toggleSelectAccount = (accountId: string, selected: boolean) => {
|
|
const newSelected = new Set(selectedAccounts);
|
|
if (selected) {
|
|
newSelected.add(accountId);
|
|
} else {
|
|
newSelected.delete(accountId);
|
|
}
|
|
setSelectedAccounts(newSelected);
|
|
};
|
|
|
|
// Folder management handlers
|
|
const handleNewFolder = () => {
|
|
setEditingFolder(null);
|
|
setFolderFormData({ name: "", parentId: "folder-root", color: "#6366f1" });
|
|
setIsFolderDialogOpen(true);
|
|
};
|
|
|
|
const handleEditFolder = (folder: FolderType) => {
|
|
setEditingFolder(folder);
|
|
setFolderFormData({
|
|
name: folder.name,
|
|
parentId: folder.parentId || "folder-root",
|
|
color: folder.color,
|
|
});
|
|
setIsFolderDialogOpen(true);
|
|
};
|
|
|
|
const handleSaveFolder = async () => {
|
|
const parentId =
|
|
folderFormData.parentId === "folder-root"
|
|
? null
|
|
: folderFormData.parentId;
|
|
|
|
try {
|
|
if (editingFolder) {
|
|
await updateFolder({
|
|
...editingFolder,
|
|
name: folderFormData.name,
|
|
parentId,
|
|
color: folderFormData.color,
|
|
});
|
|
} else {
|
|
await addFolder({
|
|
name: folderFormData.name,
|
|
parentId,
|
|
color: folderFormData.color,
|
|
icon: "folder",
|
|
});
|
|
}
|
|
refresh();
|
|
setIsFolderDialogOpen(false);
|
|
} catch (error) {
|
|
console.error("Error saving folder:", error);
|
|
alert("Erreur lors de la sauvegarde du dossier");
|
|
}
|
|
};
|
|
|
|
const handleDeleteFolder = 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");
|
|
}
|
|
};
|
|
|
|
// Drag and drop handlers
|
|
const handleDragStart = (event: DragStartEvent) => {
|
|
setActiveId(event.active.id as string);
|
|
};
|
|
|
|
const handleDragEnd = async (event: DragEndEvent) => {
|
|
const { active, over } = event;
|
|
setActiveId(null);
|
|
|
|
if (!over || active.id === over.id || !data) return;
|
|
|
|
const activeId = active.id as string;
|
|
const overId = over.id as string;
|
|
|
|
// Déplacer un compte vers un dossier
|
|
if (activeId.startsWith("account-")) {
|
|
const accountId = activeId.replace("account-", "");
|
|
let targetFolderId: string | null = null;
|
|
|
|
if (overId.startsWith("folder-")) {
|
|
const folderId = overId.replace("folder-", "");
|
|
targetFolderId = folderId === "root" ? null : folderId;
|
|
} else if (overId.startsWith("account-")) {
|
|
// Déplacer vers le dossier du compte cible
|
|
const targetAccountId = overId.replace("account-", "");
|
|
const targetAccount = data.accounts.find(
|
|
(a) => a.id === targetAccountId,
|
|
);
|
|
if (targetAccount) {
|
|
targetFolderId = targetAccount.folderId;
|
|
}
|
|
}
|
|
|
|
if (targetFolderId !== undefined) {
|
|
const account = data.accounts.find((a) => a.id === accountId);
|
|
if (!account) return;
|
|
|
|
// Sauvegarder l'état précédent pour rollback en cas d'erreur
|
|
const previousData = data;
|
|
|
|
// Optimistic update : mettre à jour immédiatement l'interface
|
|
const updatedAccount = {
|
|
...account,
|
|
folderId: targetFolderId,
|
|
};
|
|
const updatedAccounts = data.accounts.map((a) =>
|
|
a.id === accountId ? updatedAccount : a,
|
|
);
|
|
update({
|
|
...data,
|
|
accounts: updatedAccounts,
|
|
});
|
|
|
|
// Faire la requête en arrière-plan
|
|
try {
|
|
await updateAccount(updatedAccount);
|
|
// Refresh silencieux pour synchroniser avec le serveur sans loader
|
|
refreshSilent();
|
|
} catch (error) {
|
|
console.error("Error moving account:", error);
|
|
// Rollback en cas d'erreur
|
|
update(previousData);
|
|
alert("Erreur lors du déplacement du compte");
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const getTransactionCount = (accountId: string) => {
|
|
return data.transactions.filter((t) => t.accountId === accountId).length;
|
|
};
|
|
|
|
const totalBalance = data.accounts.reduce(
|
|
(sum, a) => sum + getAccountBalance(a),
|
|
0,
|
|
);
|
|
|
|
// Grouper les comptes par folder
|
|
const accountsByFolder = data.accounts.reduce(
|
|
(acc, account) => {
|
|
const folderId = account.folderId || "no-folder";
|
|
if (!acc[folderId]) {
|
|
acc[folderId] = [];
|
|
}
|
|
acc[folderId].push(account);
|
|
return acc;
|
|
},
|
|
{} as Record<string, Account[]>,
|
|
);
|
|
|
|
// Obtenir les folders racine (sans parent) et les trier par nom
|
|
const rootFolders = data.folders
|
|
.filter((f) => !f.parentId)
|
|
.sort((a, b) => a.name.localeCompare(b.name));
|
|
|
|
return (
|
|
<PageLayout>
|
|
<PageHeader
|
|
title="Comptes"
|
|
description="Gérez vos comptes bancaires et leur organisation"
|
|
actions={
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() => setIsCompactView(!isCompactView)}
|
|
title={isCompactView ? "Vue détaillée" : "Vue compacte"}
|
|
>
|
|
{isCompactView ? (
|
|
<LayoutGrid className="w-4 h-4" />
|
|
) : (
|
|
<List className="w-4 h-4" />
|
|
)}
|
|
</Button>
|
|
<Button onClick={handleNewFolder}>
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
Nouveau dossier
|
|
</Button>
|
|
</div>
|
|
}
|
|
rightContent={
|
|
<div className="text-right">
|
|
<p className="text-sm text-muted-foreground">Solde total</p>
|
|
<p
|
|
className={cn(
|
|
"text-2xl font-bold",
|
|
totalBalance >= 0 ? "text-emerald-600" : "text-red-600",
|
|
)}
|
|
>
|
|
{formatCurrency(totalBalance)}
|
|
</p>
|
|
</div>
|
|
}
|
|
/>
|
|
|
|
{data.accounts.length === 0 ? (
|
|
<Card>
|
|
<CardContent className="flex flex-col items-center justify-center py-12">
|
|
<Building2 className="w-16 h-16 text-muted-foreground mb-4" />
|
|
<h3 className="text-lg font-semibold mb-2">Aucun compte</h3>
|
|
<p className="text-muted-foreground text-center mb-4">
|
|
Importez un fichier OFX depuis le tableau de bord pour ajouter
|
|
votre premier compte.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<>
|
|
<AccountBulkActions
|
|
selectedCount={selectedAccounts.size}
|
|
onDelete={handleBulkDelete}
|
|
/>
|
|
<DndContext
|
|
sensors={sensors}
|
|
collisionDetection={closestCenter}
|
|
onDragStart={handleDragStart}
|
|
onDragEnd={handleDragEnd}
|
|
>
|
|
<div className="space-y-6">
|
|
{/* Afficher d'abord les comptes sans dossier */}
|
|
{accountsByFolder["no-folder"] &&
|
|
accountsByFolder["no-folder"].length > 0 && (
|
|
<FolderDropZone folderId="root">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<Folder className="w-5 h-5 text-muted-foreground" />
|
|
<h2 className="text-lg font-semibold">Sans dossier</h2>
|
|
<span className="text-sm text-muted-foreground">
|
|
({accountsByFolder["no-folder"].length})
|
|
</span>
|
|
<span
|
|
className={cn(
|
|
"text-sm font-semibold tabular-nums ml-auto",
|
|
accountsByFolder["no-folder"].reduce(
|
|
(sum, a) => sum + getAccountBalance(a),
|
|
0,
|
|
) >= 0
|
|
? "text-emerald-600"
|
|
: "text-red-600",
|
|
)}
|
|
>
|
|
{formatCurrency(
|
|
accountsByFolder["no-folder"].reduce(
|
|
(sum, a) => sum + getAccountBalance(a),
|
|
0,
|
|
),
|
|
)}
|
|
</span>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{accountsByFolder["no-folder"].map((account) => {
|
|
const folder = data.folders.find(
|
|
(f) => f.id === account.folderId,
|
|
);
|
|
|
|
return (
|
|
<AccountCard
|
|
key={account.id}
|
|
account={account}
|
|
folder={folder}
|
|
transactionCount={getTransactionCount(account.id)}
|
|
onEdit={handleEdit}
|
|
onDelete={handleDelete}
|
|
formatCurrency={formatCurrency}
|
|
isSelected={selectedAccounts.has(account.id)}
|
|
onSelect={toggleSelectAccount}
|
|
draggableId={`account-${account.id}`}
|
|
compact={isCompactView}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</FolderDropZone>
|
|
)}
|
|
|
|
{/* Afficher les comptes groupés par folder */}
|
|
{rootFolders.map((folder) => {
|
|
const folderAccounts = accountsByFolder[folder.id] || [];
|
|
const folderBalance = folderAccounts.reduce(
|
|
(sum, a) => sum + getAccountBalance(a),
|
|
0,
|
|
);
|
|
|
|
return (
|
|
<FolderDropZone key={folder.id} folderId={folder.id}>
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<div
|
|
className="w-5 h-5 rounded flex items-center justify-center"
|
|
style={{ backgroundColor: `${folder.color}20` }}
|
|
>
|
|
<Folder
|
|
className="w-4 h-4"
|
|
style={{ color: folder.color }}
|
|
/>
|
|
</div>
|
|
<h2 className="text-lg font-semibold">{folder.name}</h2>
|
|
<span className="text-sm text-muted-foreground">
|
|
({folderAccounts.length})
|
|
</span>
|
|
{folderAccounts.length > 0 && (
|
|
<span
|
|
className={cn(
|
|
"text-sm font-semibold tabular-nums",
|
|
folderBalance >= 0
|
|
? "text-emerald-600"
|
|
: "text-red-600",
|
|
)}
|
|
>
|
|
{formatCurrency(folderBalance)}
|
|
</span>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleEditFolder(folder)}
|
|
className="ml-auto"
|
|
>
|
|
Modifier
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleDeleteFolder(folder.id)}
|
|
className="text-destructive hover:text-destructive"
|
|
>
|
|
Supprimer
|
|
</Button>
|
|
</div>
|
|
{folderAccounts.length > 0 ? (
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{folderAccounts.map((account) => {
|
|
const accountFolder = data.folders.find(
|
|
(f) => f.id === account.folderId,
|
|
);
|
|
|
|
return (
|
|
<AccountCard
|
|
key={account.id}
|
|
account={account}
|
|
folder={accountFolder}
|
|
transactionCount={getTransactionCount(account.id)}
|
|
onEdit={handleEdit}
|
|
onDelete={handleDelete}
|
|
formatCurrency={formatCurrency}
|
|
isSelected={selectedAccounts.has(account.id)}
|
|
onSelect={toggleSelectAccount}
|
|
draggableId={`account-${account.id}`}
|
|
compact={isCompactView}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<Card>
|
|
<CardContent className="flex flex-col items-center justify-center py-8">
|
|
<Folder className="w-12 h-12 text-muted-foreground mb-2" />
|
|
<p className="text-sm text-muted-foreground">
|
|
Aucun compte dans ce dossier
|
|
</p>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
Glissez-déposez un compte ici pour l'ajouter
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</FolderDropZone>
|
|
);
|
|
})}
|
|
</div>
|
|
<DragOverlay>
|
|
{activeId ? (
|
|
<div className="opacity-50">
|
|
{activeId.startsWith("account-") ? (
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
{data.accounts.find(
|
|
(a) => a.id === activeId.replace("account-", ""),
|
|
)?.name || ""}
|
|
</CardContent>
|
|
</Card>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</DragOverlay>
|
|
</DndContext>
|
|
</>
|
|
)}
|
|
|
|
<AccountEditDialog
|
|
open={isDialogOpen}
|
|
onOpenChange={setIsDialogOpen}
|
|
formData={formData}
|
|
onFormDataChange={setFormData}
|
|
folders={data.folders}
|
|
onSave={handleSave}
|
|
/>
|
|
|
|
<FolderEditDialog
|
|
open={isFolderDialogOpen}
|
|
onOpenChange={setIsFolderDialogOpen}
|
|
editingFolder={editingFolder}
|
|
formData={folderFormData}
|
|
onFormDataChange={setFolderFormData}
|
|
folders={data.folders}
|
|
onSave={handleSaveFolder}
|
|
/>
|
|
</PageLayout>
|
|
);
|
|
}
|