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

chore: clean up code by removing trailing whitespace and ensuring consistent formatting across various files = prettier

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-01 08:37:30 +01:00
parent 757b1b84ab
commit e715779de7
98 changed files with 5453 additions and 3126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/transactions/index.ts
View File

@@ -1,4 +1,3 @@
export { TransactionFilters } from "./transaction-filters";
export { TransactionBulkActions } from "./transaction-bulk-actions";
export { TransactionTable } from "./transaction-table";

5
components/transactions/transaction-bulk-actions.tsx
View File

@@ -20,7 +20,9 @@ export function TransactionBulkActions({
onReconcile,
onSetCategory,
}: TransactionBulkActionsProps) {
const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null);
const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(
null,
);
if (selectedCount === 0) return null;
@@ -61,4 +63,3 @@ export function TransactionBulkActions({
</Card>
);
}

76
components/transactions/transaction-filters.tsx
View File

@@ -13,7 +13,11 @@ import {
import { CategoryFilterCombobox } from "@/components/ui/category-filter-combobox";
import { AccountFilterCombobox } from "@/components/ui/account-filter-combobox";
import { CategoryIcon } from "@/components/ui/category-icon";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Calendar as CalendarComponent } from "@/components/ui/calendar";
import { Button } from "@/components/ui/button";
import { Search, X, Filter, Wallet, Calendar } from "lucide-react";
@@ -139,9 +143,15 @@ export function TransactionFilters({
</Select>
{period === "custom" && (
<Popover open={isCustomDatePickerOpen} onOpenChange={onCustomDatePickerOpenChange}>
<Popover
open={isCustomDatePickerOpen}
onOpenChange={onCustomDatePickerOpenChange}
>
<PopoverTrigger asChild>
<Button variant="outline" className="w-full md:w-[280px] justify-start text-left font-normal">
<Button
variant="outline"
className="w-full md:w-[280px] justify-start text-left font-normal"
>
<Calendar className="mr-2 h-4 w-4" />
{customStartDate && customEndDate ? (
<>
@@ -151,7 +161,9 @@ export function TransactionFilters({
) : customStartDate ? (
format(customStartDate, "PPP", { locale: fr })
) : (
<span className="text-muted-foreground">Sélectionner les dates</span>
<span className="text-muted-foreground">
Sélectionner les dates
</span>
)}
</Button>
</PopoverTrigger>
@@ -232,7 +244,9 @@ export function TransactionFilters({
selectedCategories={selectedCategories}
onRemoveCategory={(id) => {
const newCategories = selectedCategories.filter((c) => c !== id);
onCategoriesChange(newCategories.length > 0 ? newCategories : ["all"]);
onCategoriesChange(
newCategories.length > 0 ? newCategories : ["all"],
);
}}
onClearCategories={() => onCategoriesChange(["all"])}
showReconciled={showReconciled}
@@ -294,12 +308,15 @@ function ActiveFilters({
const hasReconciled = showReconciled !== "all";
const hasPeriod = period !== "all";
const hasActiveFilters = hasSearch || hasAccounts || hasCategories || hasReconciled || hasPeriod;
const hasActiveFilters =
hasSearch || hasAccounts || hasCategories || hasReconciled || hasPeriod;
if (!hasActiveFilters) return null;
const selectedAccs = accounts.filter((a) => selectedAccounts.includes(a.id));
const selectedCats = categories.filter((c) => selectedCategories.includes(c.id));
const selectedCats = categories.filter((c) =>
selectedCategories.includes(c.id),
);
const isUncategorized = selectedCategories.includes("uncategorized");
const clearAll = () => {
@@ -313,18 +330,25 @@ function ActiveFilters({
return (
<div className="flex items-center gap-2 mt-3 pt-3 border-t border-border flex-wrap">
<Filter className="h-3.5 w-3.5 text-muted-foreground" />
{hasSearch && (
<Badge variant="secondary" className="gap-1 text-xs font-normal">
Recherche: &quot;{searchQuery}&quot;
<button onClick={onClearSearch} className="ml-1 hover:text-foreground">
<button
onClick={onClearSearch}
className="ml-1 hover:text-foreground"
>
<X className="h-3 w-3" />
</button>
</Badge>
)}
{selectedAccs.map((acc) => (
<Badge key={acc.id} variant="secondary" className="gap-1 text-xs font-normal">
<Badge
key={acc.id}
variant="secondary"
className="gap-1 text-xs font-normal"
>
<Wallet className="h-3 w-3" />
{acc.name}
<button
@@ -339,7 +363,10 @@ function ActiveFilters({
{isUncategorized && (
<Badge variant="secondary" className="gap-1 text-xs font-normal">
Non catégorisé
<button onClick={onClearCategories} className="ml-1 hover:text-foreground">
<button
onClick={onClearCategories}
className="ml-1 hover:text-foreground"
>
<X className="h-3 w-3" />
</button>
</Badge>
@@ -369,7 +396,10 @@ function ActiveFilters({
{hasReconciled && (
<Badge variant="secondary" className="gap-1 text-xs font-normal">
{showReconciled === "reconciled" ? "Pointées" : "Non pointées"}
<button onClick={onClearReconciled} className="ml-1 hover:text-foreground">
<button
onClick={onClearReconciled}
className="ml-1 hover:text-foreground"
>
<X className="h-3 w-3" />
</button>
</Badge>
@@ -381,15 +411,18 @@ function ActiveFilters({
{period === "custom" && customStartDate && customEndDate
? `${format(customStartDate, "d MMM", { locale: fr })} - ${format(customEndDate, "d MMM yyyy", { locale: fr })}`
: period === "1month"
? "1 mois"
: period === "3months"
? "3 mois"
: period === "6months"
? "6 mois"
: period === "12months"
? "12 mois"
: "Période"}
<button onClick={onClearPeriod} className="ml-1 hover:text-foreground">
? "1 mois"
: period === "3months"
? "3 mois"
: period === "6months"
? "6 mois"
: period === "12months"
? "12 mois"
: "Période"}
<button
onClick={onClearPeriod}
className="ml-1 hover:text-foreground"
>
<X className="h-3 w-3" />
</button>
</Badge>
@@ -404,4 +437,3 @@ function ActiveFilters({
</div>
);
}

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

@@ -62,7 +62,7 @@ function DescriptionWithTooltip({ description }: { description: string }) {
const checkTruncation = () => {
const element = ref.current;
if (!element) return;
// Check if text is truncated by comparing scrollWidth and clientWidth
// Add a small threshold (1px) to account for rounding issues
const truncated = element.scrollWidth > element.clientWidth + 1;
@@ -112,11 +112,9 @@ function DescriptionWithTooltip({ description }: { description: string }) {
return (
<Tooltip delayDuration={200}>
<TooltipTrigger asChild>
{content}
</TooltipTrigger>
<TooltipContent
side="top"
<TooltipTrigger asChild>{content}</TooltipTrigger>
<TooltipContent
side="top"
align="start"
className="max-w-md break-words"
sideOffset={5}
@@ -163,7 +161,7 @@ export function TransactionTable({
setFocusedIndex(index);
onMarkReconciled(transactionId);
},
[onMarkReconciled]
[onMarkReconciled],
);
const handleKeyDown = useCallback(
@@ -192,7 +190,7 @@ export function TransactionTable({
}
}
},
[focusedIndex, transactions, onMarkReconciled, virtualizer]
[focusedIndex, transactions, onMarkReconciled, virtualizer],
);
useEffect(() => {
@@ -205,14 +203,20 @@ export function TransactionTable({
setFocusedIndex(null);
}, [transactions.length]);
const getAccount = useCallback((accountId: string) => {
return accounts.find((a) => a.id === accountId);
}, [accounts]);
const getAccount = useCallback(
(accountId: string) => {
return accounts.find((a) => a.id === accountId);
},
[accounts],
);
const getCategory = useCallback((categoryId: string | null) => {
if (!categoryId) return null;
return categories.find((c) => c.id === categoryId);
}, [categories]);
const getCategory = useCallback(
(categoryId: string | null) => {
if (!categoryId) return null;
return categories.find((c) => c.id === categoryId);
},
[categories],
);
return (
<Card className="overflow-hidden">
@@ -262,7 +266,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">
@@ -290,7 +294,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 ? "+" : ""}
@@ -307,7 +311,10 @@ export function TransactionTable({
• {account.name}
</span>
)}
<div onClick={(e) => e.stopPropagation()} className="flex-1">
<div
onClick={(e) => e.stopPropagation()}
className="flex-1"
>
<CategoryCombobox
categories={categories}
value={transaction.categoryId}
@@ -319,7 +326,10 @@ export function TransactionTable({
/>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
<DropdownMenuTrigger
asChild
onClick={(e) => e.stopPropagation()}
>
<Button
variant="ghost"
size="icon"
@@ -344,7 +354,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);
@@ -447,11 +457,13 @@ export function TransactionTable({
width: "100%",
transform: `translateY(${virtualRow.start}px)`,
}}
onClick={() => handleRowClick(virtualRow.index, transaction.id)}
onClick={() =>
handleRowClick(virtualRow.index, transaction.id)
}
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">
@@ -465,12 +477,17 @@ export function TransactionTable({
<div className="p-3 text-sm text-muted-foreground whitespace-nowrap">
{formatDate(transaction.date)}
</div>
<div className="p-3 min-w-0 overflow-hidden" onClick={(e) => e.stopPropagation()}>
<div
className="p-3 min-w-0 overflow-hidden"
onClick={(e) => e.stopPropagation()}
>
<p className="font-medium text-sm truncate">
{transaction.description}
</p>
{transaction.memo && (
<DescriptionWithTooltip description={transaction.memo} />
<DescriptionWithTooltip
description={transaction.memo}
/>
)}
</div>
<div className="p-3 text-sm text-muted-foreground">
@@ -492,13 +509,16 @@ 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 ? "+" : ""}
{formatCurrency(transaction.amount)}
</div>
<div className="p-3 text-center" onClick={(e) => e.stopPropagation()}>
<div
className="p-3 text-center"
onClick={(e) => e.stopPropagation()}
>
<button
onClick={() => onToggleReconciled(transaction.id)}
className="p-1 hover:bg-muted rounded"
@@ -556,7 +576,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);
@@ -581,4 +601,3 @@ export function TransactionTable({
</Card>
);
}