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

193
app/accounts/page.tsx
View File

@@ -1,43 +1,68 @@
"use client"
"use client";
import { useState } from "react"
import { Sidebar } from "@/components/dashboard/sidebar"
import { useBankingData } from "@/lib/hooks"
import { updateAccount, deleteAccount } from "@/lib/store-db"
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 { MoreVertical, Pencil, Trash2, Building2, CreditCard, Wallet, PiggyBank, RefreshCw } from "lucide-react"
import type { Account } from "@/lib/types"
import { cn } from "@/lib/utils"
import { useState } from "react";
import { Sidebar } from "@/components/dashboard/sidebar";
import { useBankingData } from "@/lib/hooks";
import { updateAccount, deleteAccount } from "@/lib/store-db";
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 {
MoreVertical,
Pencil,
Trash2,
Building2,
CreditCard,
Wallet,
PiggyBank,
RefreshCw,
} from "lucide-react";
import type { Account } from "@/lib/types";
import { cn } from "@/lib/utils";
const accountTypeIcons = {
CHECKING: Wallet,
SAVINGS: PiggyBank,
CREDIT_CARD: CreditCard,
OTHER: Building2,
}
};
const accountTypeLabels = {
CHECKING: "Compte courant",
SAVINGS: "Épargne",
CREDIT_CARD: "Carte de crédit",
OTHER: "Autre",
}
};
export default function AccountsPage() {
const { data, isLoading, refresh, update } = useBankingData()
const [editingAccount, setEditingAccount] = useState<Account | null>(null)
const [isDialogOpen, setIsDialogOpen] = useState(false)
const { data, isLoading, refresh, update } = useBankingData();
const [editingAccount, setEditingAccount] = useState<Account | null>(null);
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [formData, setFormData] = useState({
name: "",
type: "CHECKING" as Account["type"],
folderId: "folder-root",
})
});
if (isLoading || !data) {
return (
@@ -47,28 +72,28 @@ export default function AccountsPage() {
<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 handleEdit = (account: Account) => {
setEditingAccount(account)
setEditingAccount(account);
setFormData({
name: account.name,
type: account.type,
folderId: account.folderId || "folder-root",
})
setIsDialogOpen(true)
}
});
setIsDialogOpen(true);
};
const handleSave = async () => {
if (!editingAccount) return
if (!editingAccount) return;
try {
const updatedAccount = {
@@ -76,34 +101,34 @@ export default function AccountsPage() {
name: formData.name,
type: formData.type,
folderId: formData.folderId,
}
await updateAccount(updatedAccount)
refresh()
setIsDialogOpen(false)
setEditingAccount(null)
};
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")
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
if (!confirm("Supprimer ce compte et toutes ses transactions ?")) return;
try {
await deleteAccount(accountId)
refresh()
await deleteAccount(accountId);
refresh();
} catch (error) {
console.error("Error deleting account:", error)
alert("Erreur lors de la suppression du compte")
console.error("Error deleting account:", error);
alert("Erreur lors de la suppression du compte");
}
}
};
const getTransactionCount = (accountId: string) => {
return data.transactions.filter((t) => t.accountId === accountId).length
}
return data.transactions.filter((t) => t.accountId === accountId).length;
};
const totalBalance = data.accounts.reduce((sum, a) => sum + a.balance, 0)
const totalBalance = data.accounts.reduce((sum, a) => sum + a.balance, 0);
return (
<div className="flex h-screen bg-background">
@@ -113,11 +138,18 @@ export default function AccountsPage() {
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-foreground">Comptes</h1>
<p className="text-muted-foreground">Gérez vos comptes bancaires</p>
<p className="text-muted-foreground">
Gérez vos comptes bancaires
</p>
</div>
<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")}>
<p
className={cn(
"text-2xl font-bold",
totalBalance >= 0 ? "text-emerald-600" : "text-red-600",
)}
>
{formatCurrency(totalBalance)}
</p>
</div>
@@ -129,15 +161,18 @@ export default function AccountsPage() {
<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.
Importez un fichier OFX depuis le tableau de bord pour ajouter
votre premier compte.
</p>
</CardContent>
</Card>
) : (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{data.accounts.map((account) => {
const Icon = accountTypeIcons[account.type]
const folder = data.folders.find((f) => f.id === account.folderId)
const Icon = accountTypeIcons[account.type];
const folder = data.folders.find(
(f) => f.id === account.folderId,
);
return (
<Card key={account.id} className="relative">
@@ -148,22 +183,35 @@ export default function AccountsPage() {
<Icon className="w-5 h-5 text-primary" />
</div>
<div>
<CardTitle className="text-base">{account.name}</CardTitle>
<p className="text-xs text-muted-foreground">{accountTypeLabels[account.type]}</p>
<CardTitle className="text-base">
{account.name}
</CardTitle>
<p className="text-xs text-muted-foreground">
{accountTypeLabels[account.type]}
</p>
</div>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8">
<Button
variant="ghost"
size="icon"
className="h-8 w-8"
>
<MoreVertical className="w-4 h-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => handleEdit(account)}>
<DropdownMenuItem
onClick={() => handleEdit(account)}
>
<Pencil className="w-4 h-4 mr-2" />
Modifier
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleDelete(account.id)} className="text-red-600">
<DropdownMenuItem
onClick={() => handleDelete(account.id)}
className="text-red-600"
>
<Trash2 className="w-4 h-4 mr-2" />
Supprimer
</DropdownMenuItem>
@@ -175,23 +223,30 @@ export default function AccountsPage() {
<div
className={cn(
"text-2xl font-bold mb-2",
account.balance >= 0 ? "text-emerald-600" : "text-red-600",
account.balance >= 0
? "text-emerald-600"
: "text-red-600",
)}
>
{formatCurrency(account.balance)}
</div>
<div className="flex items-center justify-between text-sm text-muted-foreground">
<span>{getTransactionCount(account.id)} transactions</span>
<span>
{getTransactionCount(account.id)} transactions
</span>
{folder && <span>{folder.name}</span>}
</div>
{account.lastImport && (
<p className="text-xs text-muted-foreground mt-2">
Dernier import: {new Date(account.lastImport).toLocaleDateString("fr-FR")}
Dernier import:{" "}
{new Date(account.lastImport).toLocaleDateString(
"fr-FR",
)}
</p>
)}
</CardContent>
</Card>
)
);
})}
</div>
)}
@@ -206,13 +261,20 @@ export default function AccountsPage() {
<div className="space-y-4">
<div className="space-y-2">
<Label>Nom du compte</Label>
<Input value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} />
<Input
value={formData.name}
onChange={(e) =>
setFormData({ ...formData, name: e.target.value })
}
/>
</div>
<div className="space-y-2">
<Label>Type de compte</Label>
<Select
value={formData.type}
onValueChange={(v) => setFormData({ ...formData, type: v as Account["type"] })}
onValueChange={(v) =>
setFormData({ ...formData, type: v as Account["type"] })
}
>
<SelectTrigger>
<SelectValue />
@@ -228,7 +290,10 @@ export default function AccountsPage() {
</div>
<div className="space-y-2">
<Label>Dossier</Label>
<Select value={formData.folderId} onValueChange={(v) => setFormData({ ...formData, folderId: v })}>
<Select
value={formData.folderId}
onValueChange={(v) => setFormData({ ...formData, folderId: v })}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
@@ -251,5 +316,5 @@ export default function AccountsPage() {
</DialogContent>
</Dialog>
</div>
)
);
}