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

441
components/import/ofx-import-dialog.tsx
View File

@@ -1,9 +1,9 @@
"use client"
"use client";
import type React from "react"
import type React from "react";
import { useState, useCallback } from "react"
import { useDropzone } from "react-dropzone"
import { useState, useCallback } from "react";
import { useDropzone } from "react-dropzone";
import {
Dialog,
DialogContent,
@@ -11,78 +11,109 @@ import {
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Progress } from "@/components/ui/progress"
import { Upload, FileText, CheckCircle2, AlertCircle, Loader2 } from "lucide-react"
import { parseOFX } from "@/lib/ofx-parser"
import { loadData, addAccount, updateAccount, addTransactions, generateId, autoCategorize } from "@/lib/store-db"
import type { OFXAccount, Account, Transaction, Folder, BankingData } from "@/lib/types"
import { cn } from "@/lib/utils"
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Progress } from "@/components/ui/progress";
import {
Upload,
FileText,
CheckCircle2,
AlertCircle,
Loader2,
} from "lucide-react";
import { parseOFX } from "@/lib/ofx-parser";
import {
loadData,
addAccount,
updateAccount,
addTransactions,
generateId,
autoCategorize,
} from "@/lib/store-db";
import type {
OFXAccount,
Account,
Transaction,
Folder,
BankingData,
} from "@/lib/types";
import { cn } from "@/lib/utils";
interface OFXImportDialogProps {
children: React.ReactNode
onImportComplete?: () => void
children: React.ReactNode;
onImportComplete?: () => void;
}
type ImportStep = "upload" | "configure" | "importing" | "success" | "error"
type ImportStep = "upload" | "configure" | "importing" | "success" | "error";
interface ImportResult {
fileName: string
accountName: string
transactionsImported: number
isNew: boolean
error?: string
fileName: string;
accountName: string;
transactionsImported: number;
isNew: boolean;
error?: string;
}
export function OFXImportDialog({ children, onImportComplete }: OFXImportDialogProps) {
const [open, setOpen] = useState(false)
const [step, setStep] = useState<ImportStep>("upload")
export function OFXImportDialog({
children,
onImportComplete,
}: OFXImportDialogProps) {
const [open, setOpen] = useState(false);
const [step, setStep] = useState<ImportStep>("upload");
// Single file mode
const [parsedData, setParsedData] = useState<OFXAccount | null>(null)
const [accountName, setAccountName] = useState("")
const [selectedFolder, setSelectedFolder] = useState<string>("folder-root")
const [folders, setFolders] = useState<Folder[]>([])
const [existingAccountId, setExistingAccountId] = useState<string | null>(null)
const [parsedData, setParsedData] = useState<OFXAccount | null>(null);
const [accountName, setAccountName] = useState("");
const [selectedFolder, setSelectedFolder] = useState<string>("folder-root");
const [folders, setFolders] = useState<Folder[]>([]);
const [existingAccountId, setExistingAccountId] = useState<string | null>(
null,
);
// Multi-file mode
const [importResults, setImportResults] = useState<ImportResult[]>([])
const [importProgress, setImportProgress] = useState(0)
const [totalFiles, setTotalFiles] = useState(0)
const [error, setError] = useState<string | null>(null)
const [importResults, setImportResults] = useState<ImportResult[]>([]);
const [importProgress, setImportProgress] = useState(0);
const [totalFiles, setTotalFiles] = useState(0);
const [error, setError] = useState<string | null>(null);
// Import a single OFX file directly (for multi-file mode)
const importOFXDirect = async (
parsed: OFXAccount,
fileName: string,
data: BankingData
data: BankingData,
): Promise<ImportResult> => {
try {
// Check if account already exists
const existing = data.accounts.find(
(a) => a.accountNumber === parsed.accountId && a.bankId === parsed.bankId
)
(a) =>
a.accountNumber === parsed.accountId && a.bankId === parsed.bankId,
);
let accountId: string
let accountName: string
let isNew = false
let accountId: string;
let accountName: string;
let isNew = false;
if (existing) {
accountId = existing.id
accountName = existing.name
accountId = existing.id;
accountName = existing.name;
await updateAccount({
...existing,
balance: parsed.balance,
lastImport: new Date().toISOString(),
})
});
} else {
isNew = true
accountName = `Compte ${parsed.accountId.slice(-4)}`
isNew = true;
accountName = `Compte ${parsed.accountId.slice(-4)}`;
const newAccount = await addAccount({
name: accountName,
bankId: parsed.bankId,
@@ -92,14 +123,16 @@ export function OFXImportDialog({ children, onImportComplete }: OFXImportDialogP
balance: parsed.balance,
currency: parsed.currency,
lastImport: new Date().toISOString(),
})
accountId = newAccount.id
});
accountId = newAccount.id;
}
// Add transactions with auto-categorization
const existingFitIds = new Set(
data.transactions.filter((t) => t.accountId === accountId).map((t) => t.fitId)
)
data.transactions
.filter((t) => t.accountId === accountId)
.map((t) => t.fitId),
);
const newTransactions: Transaction[] = parsed.transactions
.filter((t) => !existingFitIds.has(t.fitId))
@@ -110,15 +143,18 @@ export function OFXImportDialog({ children, onImportComplete }: OFXImportDialogP
amount: t.amount,
description: t.name,
type: t.amount >= 0 ? "CREDIT" : "DEBIT",
categoryId: autoCategorize(t.name + " " + (t.memo || ""), data.categories),
categoryId: autoCategorize(
t.name + " " + (t.memo || ""),
data.categories,
),
isReconciled: false,
fitId: t.fitId,
memo: t.memo,
checkNum: t.checkNum,
}))
}));
if (newTransactions.length > 0) {
await addTransactions(newTransactions)
await addTransactions(newTransactions);
}
return {
@@ -126,7 +162,7 @@ export function OFXImportDialog({ children, onImportComplete }: OFXImportDialogP
accountName,
transactionsImported: newTransactions.length,
isNew,
}
};
} catch (err) {
return {
fileName,
@@ -134,85 +170,90 @@ export function OFXImportDialog({ children, onImportComplete }: OFXImportDialogP
transactionsImported: 0,
isNew: false,
error: err instanceof Error ? err.message : "Erreur inconnue",
}
};
}
}
};
const onDrop = useCallback(async (acceptedFiles: File[]) => {
if (acceptedFiles.length === 0) return
const onDrop = useCallback(
async (acceptedFiles: File[]) => {
if (acceptedFiles.length === 0) return;
// Multi-file mode: import directly
if (acceptedFiles.length > 1) {
setStep("importing")
setTotalFiles(acceptedFiles.length)
setImportProgress(0)
setImportResults([])
// Multi-file mode: import directly
if (acceptedFiles.length > 1) {
setStep("importing");
setTotalFiles(acceptedFiles.length);
setImportProgress(0);
setImportResults([]);
const data = await loadData()
const results: ImportResult[] = []
const data = await loadData();
const results: ImportResult[] = [];
for (let i = 0; i < acceptedFiles.length; i++) {
const file = acceptedFiles[i]
const content = await file.text()
const parsed = parseOFX(content)
for (let i = 0; i < acceptedFiles.length; i++) {
const file = acceptedFiles[i];
const content = await file.text();
const parsed = parseOFX(content);
if (parsed) {
// Reload data after each import to get updated accounts/transactions
const freshData = i === 0 ? data : await loadData()
const result = await importOFXDirect(parsed, file.name, freshData)
results.push(result)
} else {
results.push({
fileName: file.name,
accountName: "Erreur",
transactionsImported: 0,
isNew: false,
error: "Format OFX invalide",
})
if (parsed) {
// Reload data after each import to get updated accounts/transactions
const freshData = i === 0 ? data : await loadData();
const result = await importOFXDirect(parsed, file.name, freshData);
results.push(result);
} else {
results.push({
fileName: file.name,
accountName: "Erreur",
transactionsImported: 0,
isNew: false,
error: "Format OFX invalide",
});
}
setImportProgress(((i + 1) / acceptedFiles.length) * 100);
setImportResults([...results]);
}
setImportProgress(((i + 1) / acceptedFiles.length) * 100)
setImportResults([...results])
setStep("success");
onImportComplete?.();
return;
}
setStep("success")
onImportComplete?.()
return
}
// Single file mode: show configuration
const file = acceptedFiles[0];
const content = await file.text();
const parsed = parseOFX(content);
// Single file mode: show configuration
const file = acceptedFiles[0]
const content = await file.text()
const parsed = parseOFX(content)
if (parsed) {
setParsedData(parsed);
setAccountName(`Compte ${parsed.accountId.slice(-4)}`);
if (parsed) {
setParsedData(parsed)
setAccountName(`Compte ${parsed.accountId.slice(-4)}`)
try {
const data = await loadData();
setFolders(data.folders);
try {
const data = await loadData()
setFolders(data.folders)
const existing = data.accounts.find(
(a) =>
a.accountNumber === parsed.accountId &&
a.bankId === parsed.bankId,
);
if (existing) {
setExistingAccountId(existing.id);
setAccountName(existing.name);
setSelectedFolder(existing.folderId || "folder-root");
}
const existing = data.accounts.find(
(a) => a.accountNumber === parsed.accountId && a.bankId === parsed.bankId
)
if (existing) {
setExistingAccountId(existing.id)
setAccountName(existing.name)
setSelectedFolder(existing.folderId || "folder-root")
setStep("configure");
} catch (err) {
console.error("Error loading data:", err);
setError("Erreur lors du chargement des données");
setStep("error");
}
setStep("configure")
} catch (err) {
console.error("Error loading data:", err)
setError("Erreur lors du chargement des données")
setStep("error")
} else {
setError("Impossible de lire le fichier OFX. Vérifiez le format.");
setStep("error");
}
} else {
setError("Impossible de lire le fichier OFX. Vérifiez le format.")
setStep("error")
}
}, [onImportComplete])
},
[onImportComplete],
);
const { getRootProps, getInputProps, isDragActive } = useDropzone({
onDrop,
@@ -222,20 +263,22 @@ export function OFXImportDialog({ children, onImportComplete }: OFXImportDialogP
"text/plain": [".ofx", ".qfx"],
},
// No maxFiles limit - accept multiple files
})
});
const handleImport = async () => {
if (!parsedData) return
if (!parsedData) return;
try {
setStep("importing")
const data = await loadData()
setStep("importing");
const data = await loadData();
let accountId: string
let accountId: string;
if (existingAccountId) {
accountId = existingAccountId
const existingAccount = data.accounts.find((a) => a.id === existingAccountId)
accountId = existingAccountId;
const existingAccount = data.accounts.find(
(a) => a.id === existingAccountId,
);
if (existingAccount) {
await updateAccount({
...existingAccount,
@@ -243,7 +286,7 @@ export function OFXImportDialog({ children, onImportComplete }: OFXImportDialogP
folderId: selectedFolder,
balance: parsedData.balance,
lastImport: new Date().toISOString(),
})
});
}
} else {
const newAccount = await addAccount({
@@ -255,13 +298,15 @@ export function OFXImportDialog({ children, onImportComplete }: OFXImportDialogP
balance: parsedData.balance,
currency: parsedData.currency,
lastImport: new Date().toISOString(),
})
accountId = newAccount.id
});
accountId = newAccount.id;
}
const existingFitIds = new Set(
data.transactions.filter((t) => t.accountId === accountId).map((t) => t.fitId)
)
data.transactions
.filter((t) => t.accountId === accountId)
.map((t) => t.fitId),
);
const newTransactions: Transaction[] = parsedData.transactions
.filter((t) => !existingFitIds.has(t.fitId))
@@ -272,57 +317,65 @@ export function OFXImportDialog({ children, onImportComplete }: OFXImportDialogP
amount: t.amount,
description: t.name,
type: t.amount >= 0 ? "CREDIT" : "DEBIT",
categoryId: autoCategorize(t.name + " " + (t.memo || ""), data.categories),
categoryId: autoCategorize(
t.name + " " + (t.memo || ""),
data.categories,
),
isReconciled: false,
fitId: t.fitId,
memo: t.memo,
checkNum: t.checkNum,
}))
}));
if (newTransactions.length > 0) {
await addTransactions(newTransactions)
await addTransactions(newTransactions);
}
setImportResults([{
fileName: "Import",
accountName,
transactionsImported: newTransactions.length,
isNew: !existingAccountId,
}])
setStep("success")
onImportComplete?.()
setImportResults([
{
fileName: "Import",
accountName,
transactionsImported: newTransactions.length,
isNew: !existingAccountId,
},
]);
setStep("success");
onImportComplete?.();
} catch (err) {
console.error("Error importing:", err)
setError("Erreur lors de l'import")
setStep("error")
console.error("Error importing:", err);
setError("Erreur lors de l'import");
setStep("error");
}
}
};
const handleClose = () => {
setOpen(false)
setOpen(false);
setTimeout(() => {
setStep("upload")
setParsedData(null)
setAccountName("")
setSelectedFolder("folder-root")
setExistingAccountId(null)
setError(null)
setImportResults([])
setImportProgress(0)
setTotalFiles(0)
}, 200)
}
setStep("upload");
setParsedData(null);
setAccountName("");
setSelectedFolder("folder-root");
setExistingAccountId(null);
setError(null);
setImportResults([]);
setImportProgress(0);
setTotalFiles(0);
}, 200);
};
const totalTransactions = importResults.reduce((sum, r) => sum + r.transactionsImported, 0)
const successCount = importResults.filter((r) => !r.error).length
const errorCount = importResults.filter((r) => r.error).length
const totalTransactions = importResults.reduce(
(sum, r) => sum + r.transactionsImported,
0,
);
const successCount = importResults.filter((r) => !r.error).length;
const errorCount = importResults.filter((r) => r.error).length;
return (
<Dialog
open={open}
onOpenChange={(o) => {
if (!o) handleClose()
else setOpen(true)
if (!o) handleClose();
else setOpen(true);
}}
>
<DialogTrigger asChild>{children}</DialogTrigger>
@@ -336,14 +389,16 @@ export function OFXImportDialog({ children, onImportComplete }: OFXImportDialogP
{step === "error" && "Erreur d'import"}
</DialogTitle>
<DialogDescription>
{step === "upload" && "Glissez-déposez vos fichiers OFX ou cliquez pour sélectionner"}
{step === "configure" && "Vérifiez les informations du compte avant l'import"}
{step === "importing" && `Import de ${totalFiles} fichier${totalFiles > 1 ? "s" : ""}...`}
{step === "success" && (
importResults.length > 1
{step === "upload" &&
"Glissez-déposez vos fichiers OFX ou cliquez pour sélectionner"}
{step === "configure" &&
"Vérifiez les informations du compte avant l'import"}
{step === "importing" &&
`Import de ${totalFiles} fichier${totalFiles > 1 ? "s" : ""}...`}
{step === "success" &&
(importResults.length > 1
? `${successCount} fichier${successCount > 1 ? "s" : ""} importé${successCount > 1 ? "s" : ""}, ${totalTransactions} transactions`
: `${totalTransactions} nouvelles transactions importées`
)}
: `${totalTransactions} nouvelles transactions importées`)}
{step === "error" && error}
</DialogDescription>
</DialogHeader>
@@ -353,16 +408,21 @@ export function OFXImportDialog({ children, onImportComplete }: OFXImportDialogP
{...getRootProps()}
className={cn(
"border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors",
isDragActive ? "border-primary bg-primary/5" : "border-muted-foreground/25 hover:border-primary/50",
isDragActive
? "border-primary bg-primary/5"
: "border-muted-foreground/25 hover:border-primary/50",
)}
>
<input {...getInputProps()} />
<Upload className="w-10 h-10 mx-auto mb-4 text-muted-foreground" />
<p className="text-sm text-muted-foreground">
{isDragActive ? "Déposez les fichiers ici..." : "Fichiers .ofx ou .qfx acceptés"}
{isDragActive
? "Déposez les fichiers ici..."
: "Fichiers .ofx ou .qfx acceptés"}
</p>
<p className="text-xs text-muted-foreground mt-2">
Un fichier = configuration manuelle • Plusieurs fichiers = import direct
Un fichier = configuration manuelle • Plusieurs fichiers = import
direct
</p>
</div>
)}
@@ -372,12 +432,15 @@ export function OFXImportDialog({ children, onImportComplete }: OFXImportDialogP
<div className="flex items-center gap-3 p-3 bg-muted rounded-lg">
<FileText className="w-8 h-8 text-primary" />
<div>
<p className="font-medium">{parsedData.transactions.length} transactions</p>
<p className="font-medium">
{parsedData.transactions.length} transactions
</p>
<p className="text-sm text-muted-foreground">
Solde:{" "}
{new Intl.NumberFormat("fr-FR", { style: "currency", currency: parsedData.currency }).format(
parsedData.balance,
)}
{new Intl.NumberFormat("fr-FR", {
style: "currency",
currency: parsedData.currency,
}).format(parsedData.balance)}
</p>
</div>
</div>
@@ -410,7 +473,8 @@ export function OFXImportDialog({ children, onImportComplete }: OFXImportDialogP
{existingAccountId && (
<p className="text-sm text-amber-600 bg-amber-50 p-2 rounded">
Ce compte existe déjà. Les nouvelles transactions seront ajoutées.
Ce compte existe déjà. Les nouvelles transactions seront
ajoutées.
</p>
)}
@@ -457,7 +521,7 @@ export function OFXImportDialog({ children, onImportComplete }: OFXImportDialogP
{step === "success" && (
<div className="py-4">
<CheckCircle2 className="w-16 h-16 mx-auto mb-4 text-emerald-600" />
{importResults.length > 1 && (
<div className="max-h-48 overflow-auto space-y-1 text-sm mb-4 border rounded-lg p-2">
{importResults.map((result, i) => (
@@ -468,14 +532,21 @@ export function OFXImportDialog({ children, onImportComplete }: OFXImportDialogP
<CheckCircle2 className="w-4 h-4 text-emerald-500 flex-shrink-0" />
)}
<div className="flex-1 min-w-0">
<p className="truncate font-medium">{result.accountName}</p>
<p className="text-xs text-muted-foreground truncate">{result.fileName}</p>
<p className="truncate font-medium">
{result.accountName}
</p>
<p className="text-xs text-muted-foreground truncate">
{result.fileName}
</p>
</div>
{result.error ? (
<span className="text-xs text-red-500 flex-shrink-0">{result.error}</span>
<span className="text-xs text-red-500 flex-shrink-0">
{result.error}
</span>
) : (
<span className="text-xs text-muted-foreground flex-shrink-0">
{result.isNew ? "Nouveau" : "Mis à jour"} • +{result.transactionsImported}
{result.isNew ? "Nouveau" : "Mis à jour"} • +
{result.transactionsImported}
</span>
)}
</div>
@@ -503,5 +574,5 @@ export function OFXImportDialog({ children, onImportComplete }: OFXImportDialogP
)}
</DialogContent>
</Dialog>
)
);
}