refactor: standardize code formatting and improve readability across multiple components, including transaction handling and sidebar layout adjustments
This commit is contained in:
@@ -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 ? (
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user