julienfroidefond/fintrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: standardize quotation marks across all files and improve code consistency

Browse Source
This commit is contained in:
Julien Froidefond
2025-11-27 11:40:30 +01:00
parent cc1e8c20a6
commit b2efade4d5
107 changed files with 9471 additions and 5952 deletions
Download Patch File Download Diff File Expand all files Collapse all files

295
app/folders/page.tsx
View File

@@ -1,15 +1,31 @@
"use client"
"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 { 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,
@@ -21,10 +37,15 @@ import {
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"
} 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" },
@@ -33,17 +54,17 @@ const folderColors = [
{ 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
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({
@@ -56,20 +77,27 @@ function FolderTreeItem({
onEditAccount,
formatCurrency,
}: FolderTreeItemProps) {
const [isExpanded, setIsExpanded] = useState(true)
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 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)
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")}>
<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"
@@ -101,7 +129,10 @@ function FolderTreeItem({
{folderAccounts.length > 0 && (
<span
className={cn("text-sm font-semibold tabular-nums", folderTotal >= 0 ? "text-emerald-600" : "text-red-600")}
className={cn(
"text-sm font-semibold tabular-nums",
folderTotal >= 0 ? "text-emerald-600" : "text-red-600",
)}
>
{formatCurrency(folderTotal)}
</span>
@@ -109,7 +140,11 @@ function FolderTreeItem({
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-7 w-7 opacity-0 group-hover:opacity-100">
<Button
variant="ghost"
size="icon"
className="h-7 w-7 opacity-0 group-hover:opacity-100"
>
<MoreVertical className="w-4 h-4" />
</Button>
</DropdownMenuTrigger>
@@ -119,7 +154,10 @@ function FolderTreeItem({
Modifier
</DropdownMenuItem>
{folder.id !== "folder-root" && (
<DropdownMenuItem onClick={() => onDelete(folder.id)} className="text-red-600">
<DropdownMenuItem
onClick={() => onDelete(folder.id)}
className="text-red-600"
>
<Trash2 className="w-4 h-4 mr-2" />
Supprimer
</DropdownMenuItem>
@@ -131,15 +169,26 @@ function FolderTreeItem({
{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")}>
<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")}>
<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"
<Button
variant="ghost"
size="icon"
className="h-7 w-7 opacity-0 group-hover:opacity-100"
onClick={() => onEditAccount(account)}
>
@@ -164,7 +213,7 @@ function FolderTreeItem({
</div>
)}
</div>
)
);
}
const accountTypeLabels = {
@@ -172,26 +221,26 @@ const accountTypeLabels = {
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 { 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 [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 (
@@ -201,36 +250,37 @@ export default function FoldersPage() {
<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)
}
}).format(amount);
};
const rootFolders = data.folders.filter((f) => f.parentId === null)
const rootFolders = data.folders.filter((f) => f.parentId === null);
const handleNewFolder = () => {
setEditingFolder(null)
setFormData({ name: "", parentId: "folder-root", color: "#6366f1" })
setIsDialogOpen(true)
}
setEditingFolder(null);
setFormData({ name: "", parentId: "folder-root", color: "#6366f1" });
setIsDialogOpen(true);
};
const handleEdit = (folder: FolderType) => {
setEditingFolder(folder)
setEditingFolder(folder);
setFormData({
name: folder.name,
parentId: folder.parentId || "folder-root",
color: folder.color,
})
setIsDialogOpen(true)
}
});
setIsDialogOpen(true);
};
const handleSave = async () => {
const parentId = formData.parentId === "folder-root" ? null : formData.parentId
const parentId =
formData.parentId === "folder-root" ? null : formData.parentId;
try {
if (editingFolder) {
@@ -239,63 +289,71 @@ export default function FoldersPage() {
name: formData.name,
parentId,
color: formData.color,
})
});
} else {
await addFolder({
name: formData.name,
parentId,
color: formData.color,
icon: "folder",
})
});
}
refresh()
setIsDialogOpen(false)
refresh();
setIsDialogOpen(false);
} catch (error) {
console.error("Error saving folder:", error)
alert("Erreur lors de la sauvegarde du dossier")
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
if (
!confirm(
"Supprimer ce dossier ? Les comptes seront déplacés à la racine.",
)
)
return;
try {
await deleteFolder(folderId)
refresh()
await deleteFolder(folderId);
refresh();
} catch (error) {
console.error("Error deleting folder:", error)
alert("Erreur lors de la suppression du dossier")
console.error("Error deleting folder:", error);
alert("Erreur lors de la suppression du dossier");
}
}
};
const handleEditAccount = (account: Account) => {
setEditingAccount(account)
setEditingAccount(account);
setAccountFormData({
name: account.name,
type: account.type,
folderId: account.folderId || "folder-root",
})
setIsAccountDialogOpen(true)
}
});
setIsAccountDialogOpen(true);
};
const handleSaveAccount = async () => {
if (!editingAccount) return
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)
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")
console.error("Error updating account:", error);
alert("Erreur lors de la mise à jour du compte");
}
}
};
return (
<div className="flex h-screen bg-background">
@@ -304,8 +362,12 @@ export default function FoldersPage() {
<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>
<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" />
@@ -341,14 +403,18 @@ export default function FoldersPage() {
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>{editingFolder ? "Modifier le dossier" : "Nouveau dossier"}</DialogTitle>
<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 })}
onChange={(e) =>
setFormData({ ...formData, name: e.target.value })
}
placeholder="Ex: Comptes personnels"
/>
</div>
@@ -356,7 +422,12 @@ export default function FoldersPage() {
<Label>Dossier parent</Label>
<Select
value={formData.parentId || "root"}
onValueChange={(v) => setFormData({ ...formData, parentId: v === "root" ? null : v })}
onValueChange={(v) =>
setFormData({
...formData,
parentId: v === "root" ? null : v,
})
}
>
<SelectTrigger>
<SelectValue />
@@ -382,7 +453,8 @@ export default function FoldersPage() {
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",
formData.color === value &&
"ring-2 ring-offset-2 ring-primary scale-110",
)}
style={{ backgroundColor: value }}
/>
@@ -409,16 +481,26 @@ export default function FoldersPage() {
<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 })}
<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"] })}
onValueChange={(v) =>
setAccountFormData({
...accountFormData,
type: v as Account["type"],
})
}
>
<SelectTrigger>
<SelectValue />
@@ -434,9 +516,11 @@ export default function FoldersPage() {
</div>
<div className="space-y-2">
<Label>Dossier</Label>
<Select
value={accountFormData.folderId}
onValueChange={(v) => setAccountFormData({ ...accountFormData, folderId: v })}
<Select
value={accountFormData.folderId}
onValueChange={(v) =>
setAccountFormData({ ...accountFormData, folderId: v })
}
>
<SelectTrigger>
<SelectValue />
@@ -451,7 +535,10 @@ export default function FoldersPage() {
</Select>
</div>
<div className="flex justify-end gap-2">
<Button variant="outline" onClick={() => setIsAccountDialogOpen(false)}>
<Button
variant="outline"
onClick={() => setIsAccountDialogOpen(false)}
>
Annuler
</Button>
<Button onClick={handleSaveAccount}>Enregistrer</Button>
@@ -460,5 +547,5 @@ export default function FoldersPage() {
</DialogContent>
</Dialog>
</div>
)
);
}