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

refactor: standardize code formatting and improve readability across multiple components, including transaction handling and sidebar layout adjustments

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-08 09:28:09 +01:00
parent 11c0df1293
commit cb8628ce39
10 changed files with 80 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/api/banking/transactions/route.ts
View File

@@ -125,9 +125,6 @@ export async function DELETE(request: Request) {
console.error("Error deleting transaction:", error);
const errorMessage =
error instanceof Error ? error.message : "Failed to delete transaction";
return NextResponse.json(
{ error: errorMessage },
{ status: 500 },
);
return NextResponse.json({ error: errorMessage }, { status: 500 });
}
}

28
app/rules/page.tsx
View File

@@ -42,7 +42,7 @@ export default function RulesPage() {
offset: 0,
includeUncategorized: true,
},
!!metadata
!!metadata,
);
const refresh = useCallback(() => {
@@ -56,7 +56,7 @@ export default function RulesPage() {
const [filterMinCount, setFilterMinCount] = useState(2);
const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
const [selectedGroup, setSelectedGroup] = useState<TransactionGroup | null>(
null
null,
);
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [isAutoCategorizing, setIsAutoCategorizing] = useState(false);
@@ -87,7 +87,7 @@ export default function RulesPage() {
totalAmount: transactions.reduce((sum, t) => sum + t.amount, 0),
suggestedKeyword: suggestKeyword(descriptions),
};
}
},
);
// Filter by search query
@@ -98,7 +98,7 @@ export default function RulesPage() {
(g) =>
g.displayName.toLowerCase().includes(query) ||
g.key.includes(query) ||
g.suggestedKeyword.toLowerCase().includes(query)
g.suggestedKeyword.toLowerCase().includes(query),
);
}
@@ -167,7 +167,7 @@ export default function RulesPage() {
// 1. Add keyword to category
const category = metadata.categories.find(
(c: { id: string }) => c.id === ruleData.categoryId
(c: { id: string }) => c.id === ruleData.categoryId,
);
if (!category) {
throw new Error("Category not found");
@@ -175,7 +175,7 @@ export default function RulesPage() {
// Check if keyword already exists
const keywordExists = category.keywords.some(
(k: string) => k.toLowerCase() === ruleData.keyword.toLowerCase()
(k: string) => k.toLowerCase() === ruleData.keyword.toLowerCase(),
);
if (!keywordExists) {
@@ -193,14 +193,14 @@ export default function RulesPage() {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ id, categoryId: ruleData.categoryId }),
})
)
}),
),
);
}
refresh();
},
[metadata, refresh]
[metadata, refresh],
);
const handleAutoCategorize = useCallback(async () => {
@@ -214,7 +214,7 @@ export default function RulesPage() {
for (const transaction of uncategorized) {
const categoryId = autoCategorize(
transaction.description + " " + (transaction.memo || ""),
metadata.categories
metadata.categories,
);
if (categoryId) {
await fetch("/api/banking/transactions", {
@@ -228,7 +228,7 @@ export default function RulesPage() {
refresh();
alert(
`${categorizedCount} transaction(s) catégorisée(s) automatiquement`
`${categorizedCount} transaction(s) catégorisée(s) automatiquement`,
);
} catch (error) {
console.error("Error auto-categorizing:", error);
@@ -247,8 +247,8 @@ export default function RulesPage() {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ ...t, categoryId }),
})
)
}),
),
);
refresh();
} catch (error) {
@@ -256,7 +256,7 @@ export default function RulesPage() {
alert("Erreur lors de la catégorisation");
}
},
[refresh]
[refresh],
);
if (

54
app/transactions/page.tsx
View File

@@ -65,20 +65,20 @@ export default function TransactionsPage() {
const [showReconciled, setShowReconciled] = useState<string>("all");
const [period, setPeriod] = useState<Period>("all");
const [customStartDate, setCustomStartDate] = useState<Date | undefined>(
undefined
undefined,
);
const [customEndDate, setCustomEndDate] = useState<Date | undefined>(
undefined
undefined,
);
const [isCustomDatePickerOpen, setIsCustomDatePickerOpen] = useState(false);
const [sortField, setSortField] = useState<SortField>("date");
const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
const [selectedTransactions, setSelectedTransactions] = useState<Set<string>>(
new Set()
new Set(),
);
const [ruleDialogOpen, setRuleDialogOpen] = useState(false);
const [ruleTransaction, setRuleTransaction] = useState<Transaction | null>(
null
null,
);
const [updatingTransactionIds, setUpdatingTransactionIds] = useState<
Set<string>
@@ -182,7 +182,7 @@ export default function TransactionsPage() {
// Use transactions from current page to find similar ones
const normalizedDesc = normalizeDescription(ruleTransaction.description);
const similarTransactions = transactionsData.transactions.filter(
(t) => normalizeDescription(t.description) === normalizedDesc
(t) => normalizeDescription(t.description) === normalizedDesc,
);
if (similarTransactions.length === 0) return null;
@@ -193,7 +193,7 @@ export default function TransactionsPage() {
transactions: similarTransactions,
totalAmount: similarTransactions.reduce((sum, t) => sum + t.amount, 0),
suggestedKeyword: suggestKeyword(
similarTransactions.map((t) => t.description)
similarTransactions.map((t) => t.description),
),
};
}, [ruleTransaction, transactionsData]);
@@ -209,7 +209,7 @@ export default function TransactionsPage() {
// 1. Add keyword to category
const category = metadata.categories.find(
(c: { id: string }) => c.id === ruleData.categoryId
(c: { id: string }) => c.id === ruleData.categoryId,
);
if (!category) {
throw new Error("Category not found");
@@ -217,7 +217,7 @@ export default function TransactionsPage() {
// Check if keyword already exists
const keywordExists = category.keywords.some(
(k: string) => k.toLowerCase() === ruleData.keyword.toLowerCase()
(k: string) => k.toLowerCase() === ruleData.keyword.toLowerCase(),
);
if (!keywordExists) {
@@ -235,8 +235,8 @@ export default function TransactionsPage() {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ id, categoryId: ruleData.categoryId }),
})
)
}),
),
);
}
@@ -245,7 +245,7 @@ export default function TransactionsPage() {
queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
setRuleDialogOpen(false);
},
[metadata, queryClient]
[metadata, queryClient],
);
const invalidateAll = useCallback(() => {
@@ -272,7 +272,7 @@ export default function TransactionsPage() {
if (!transactionsData) return;
const transaction = transactionsData.transactions.find(
(t) => t.id === transactionId
(t) => t.id === transactionId,
);
if (!transaction) return;
@@ -297,7 +297,7 @@ export default function TransactionsPage() {
if (!transactionsData) return;
const transaction = transactionsData.transactions.find(
(t) => t.id === transactionId
(t) => t.id === transactionId,
);
if (!transaction || transaction.isReconciled) return;
@@ -320,12 +320,12 @@ export default function TransactionsPage() {
const setCategory = async (
transactionId: string,
categoryId: string | null
categoryId: string | null,
) => {
if (!transactionsData) return;
const transaction = transactionsData.transactions.find(
(t) => t.id === transactionId
(t) => t.id === transactionId,
);
if (!transaction) return;
@@ -350,7 +350,7 @@ export default function TransactionsPage() {
return {
...oldData,
transactions: oldData.transactions.map((t) =>
t.id === transactionId ? { ...t, categoryId } : t
t.id === transactionId ? { ...t, categoryId } : t,
),
};
});
@@ -370,7 +370,7 @@ export default function TransactionsPage() {
if (!transactionsData) return;
const transactionsToUpdate = transactionsData.transactions.filter((t) =>
selectedTransactions.has(t.id)
selectedTransactions.has(t.id),
);
setSelectedTransactions(new Set());
@@ -382,8 +382,8 @@ export default function TransactionsPage() {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ ...t, isReconciled: reconciled }),
})
)
}),
),
);
invalidateTransactions();
} catch (error) {
@@ -395,7 +395,7 @@ export default function TransactionsPage() {
if (!transactionsData) return;
const transactionsToUpdate = transactionsData.transactions.filter((t) =>
selectedTransactions.has(t.id)
selectedTransactions.has(t.id),
);
const transactionIds = transactionsToUpdate.map((t) => t.id);
@@ -413,8 +413,8 @@ export default function TransactionsPage() {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ ...t, categoryId }),
})
)
}),
),
);
// Mise à jour directe du cache après succès
@@ -424,7 +424,7 @@ export default function TransactionsPage() {
return {
...oldData,
transactions: oldData.transactions.map((t) =>
transactionIds.includes(t.id) ? { ...t, categoryId } : t
transactionIds.includes(t.id) ? { ...t, categoryId } : t,
),
};
});
@@ -446,7 +446,7 @@ export default function TransactionsPage() {
setSelectedTransactions(new Set());
} else {
setSelectedTransactions(
new Set(transactionsData.transactions.map((t) => t.id))
new Set(transactionsData.transactions.map((t) => t.id)),
);
}
};
@@ -488,7 +488,7 @@ export default function TransactionsPage() {
return {
...oldData,
transactions: oldData.transactions.filter(
(t) => t.id !== transactionId
(t) => t.id !== transactionId,
),
total: oldData.total - 1,
};
@@ -499,13 +499,13 @@ export default function TransactionsPage() {
`/api/banking/transactions?id=${transactionId}`,
{
method: "DELETE",
}
},
);
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(
errorData.error || `Failed to delete transaction: ${response.status}`
errorData.error || `Failed to delete transaction: ${response.status}`,
);
}

27
components/dashboard/sidebar.tsx
View File

@@ -77,10 +77,7 @@ function SidebarContent({
</div>
)}
<nav className={cn(
"flex-1 space-y-2",
collapsed ? "p-2" : "p-4"
)}>
<nav className={cn("flex-1 space-y-2", collapsed ? "p-2" : "p-4")}>
{navItems.map((item) => {
const isActive = pathname === item.href;
return (
@@ -117,10 +114,12 @@ function SidebarContent({
})}
</nav>
<div className={cn(
"border-t border-border/30 space-y-2",
collapsed ? "p-2" : "p-4"
)}>
<div
className={cn(
"border-t border-border/30 space-y-2",
collapsed ? "p-2" : "p-4",
)}
>
<Link href="/settings" onClick={handleLinkClick}>
<Button
variant="ghost"
@@ -186,10 +185,12 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
collapsed ? "w-16" : "w-64",
)}
>
<div className={cn(
"flex items-center border-b border-border/30 transition-all duration-300",
collapsed ? "justify-center p-4" : "justify-between p-6"
)}>
<div
className={cn(
"flex items-center border-b border-border/30 transition-all duration-300",
collapsed ? "justify-center p-4" : "justify-between p-6",
)}
>
{!collapsed && (
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-primary via-primary/90 to-primary/80 flex items-center justify-center shadow-xl shadow-primary/30 backdrop-blur-sm">
@@ -206,7 +207,7 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
onClick={() => setCollapsed(!collapsed)}
className={cn(
"hover:bg-muted/60 rounded-xl transition-all duration-300 hover:scale-110",
collapsed ? "" : "ml-auto"
collapsed ? "" : "ml-auto",
)}
>
{collapsed ? (

4
components/layout/page-header.tsx
View File

@@ -40,9 +40,7 @@ export function PageHeader({
<h1 className="text-2xl md:text-4xl lg:text-5xl font-black text-foreground tracking-tight leading-tight flex-1 min-w-0">
{title}
</h1>
{rightContent && (
<div className="shrink-0">{rightContent}</div>
)}
{rightContent && <div className="shrink-0">{rightContent}</div>}
</div>
{description && (
<div className="text-base md:text-lg text-muted-foreground/70 font-semibold">

22
components/transactions/transaction-table.tsx
View File

@@ -164,7 +164,7 @@ export function TransactionTable({
setFocusedIndex(index);
onMarkReconciled(transactionId);
},
[onMarkReconciled]
[onMarkReconciled],
);
const handleKeyDown = useCallback(
@@ -193,7 +193,7 @@ export function TransactionTable({
}
}
},
[focusedIndex, transactions, onMarkReconciled, virtualizer]
[focusedIndex, transactions, onMarkReconciled, virtualizer],
);
useEffect(() => {
@@ -210,7 +210,7 @@ export function TransactionTable({
(accountId: string) => {
return accounts.find((a) => a.id === accountId);
},
[accounts]
[accounts],
);
const getCategory = useCallback(
@@ -218,7 +218,7 @@ export function TransactionTable({
if (!categoryId) return null;
return categories.find((c) => c.id === categoryId);
},
[categories]
[categories],
);
return (
@@ -269,7 +269,7 @@ export function TransactionTable({
className={cn(
"p-4 space-y-3 hover:bg-muted/50 cursor-pointer border-b border-border",
transaction.isReconciled && "bg-emerald-500/5",
isFocused && "bg-primary/10 ring-1 ring-primary/30"
isFocused && "bg-primary/10 ring-1 ring-primary/30",
)}
>
<div className="flex items-start justify-between gap-2">
@@ -297,7 +297,7 @@ export function TransactionTable({
"font-semibold tabular-nums text-sm md:text-base shrink-0",
transaction.amount >= 0
? "text-emerald-600"
: "text-red-600"
: "text-red-600",
)}
>
{transaction.amount >= 0 ? "+" : ""}
@@ -332,7 +332,7 @@ export function TransactionTable({
showBadge
align="start"
disabled={updatingTransactionIds.has(
transaction.id
transaction.id,
)}
/>
</div>
@@ -365,7 +365,7 @@ export function TransactionTable({
e.stopPropagation();
if (
confirm(
`Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}`
`Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}`,
)
) {
onDelete(transaction.id);
@@ -474,7 +474,7 @@ export function TransactionTable({
className={cn(
"grid grid-cols-[auto_120px_2fr_150px_180px_140px_auto_auto] gap-0 border-b border-border hover:bg-muted/50 cursor-pointer",
transaction.isReconciled && "bg-emerald-500/5",
isFocused && "bg-primary/10 ring-1 ring-primary/30"
isFocused && "bg-primary/10 ring-1 ring-primary/30",
)}
>
<div className="p-3">
@@ -529,7 +529,7 @@ export function TransactionTable({
"p-3 text-right font-semibold tabular-nums",
transaction.amount >= 0
? "text-emerald-600"
: "text-red-600"
: "text-red-600",
)}
>
{transaction.amount >= 0 ? "+" : ""}
@@ -596,7 +596,7 @@ export function TransactionTable({
e.stopPropagation();
if (
confirm(
`Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}`
`Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}`,
)
) {
onDelete(transaction.id);

8
components/ui/account-filter-combobox.tsx
View File

@@ -182,9 +182,7 @@ export function AccountFilterCombobox({
{isFolderPartiallySelected(folder.id) && (
<div className="h-3 w-3 rounded-sm bg-primary/50 mr-1" />
)}
{isFolderSelected(folder.id) && (
<Check className="h-4 w-4" />
)}
{isFolderSelected(folder.id) && <Check className="h-4 w-4" />}
</div>
</CommandItem>
@@ -306,9 +304,7 @@ export function AccountFilterCombobox({
)
</span>
)}
{isAll && (
<Check className="ml-auto h-4 w-4" />
)}
{isAll && <Check className="ml-auto h-4 w-4" />}
</CommandItem>
</CommandGroup>

10
components/ui/category-filter-combobox.tsx
View File

@@ -193,7 +193,11 @@ export function CategoryFilterCombobox({
align="start"
onOpenAutoFocus={(e) => e.preventDefault()}
>
<Command value={isAll ? "all" : isUncategorized ? "uncategorized" : value.join(",")}>
<Command
value={
isAll ? "all" : isUncategorized ? "uncategorized" : value.join(",")
}
>
<CommandInput placeholder="Rechercher..." />
<CommandList className="max-h-[300px]">
<CommandEmpty>Aucune catégorie trouvée.</CommandEmpty>
@@ -212,9 +216,7 @@ export function CategoryFilterCombobox({
({filteredTransactions.length})
</span>
)}
{isAll && (
<Check className="ml-auto h-4 w-4 shrink-0" />
)}
{isAll && <Check className="ml-auto h-4 w-4 shrink-0" />}
</CommandItem>
<CommandItem
value="uncategorized"

2
hooks/use-mobile.ts
View File

@@ -4,7 +4,7 @@ const MOBILE_BREAKPOINT = 768;
export function useIsMobile() {
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
undefined
undefined,
);
React.useEffect(() => {

6
lib/hooks.ts
View File

@@ -83,7 +83,7 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
// Helper function to serialize transaction params into a query key
export function getTransactionsQueryKey(
params: TransactionsPaginatedParams = {}
params: TransactionsPaginatedParams = {},
): (string | number)[] {
const key: (string | number)[] = ["transactions"];
if (params.limit) key.push(`limit:${params.limit}`);
@@ -106,7 +106,7 @@ export function getTransactionsQueryKey(
export function useTransactions(
params: TransactionsPaginatedParams = {},
enabled = true
enabled = true,
) {
const queryClient = useQueryClient();
@@ -134,7 +134,7 @@ export function useTransactions(
if (params.isReconciled !== undefined && params.isReconciled !== "all") {
searchParams.set(
"isReconciled",
params.isReconciled === true ? "true" : "false"
params.isReconciled === true ? "true" : "false",
);
}
if (params.sortField) searchParams.set("sortField", params.sortField);