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

fix: standardize formatting and improve readability across various components and styles, including CSS and TypeScript files

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-08 06:37:29 +01:00
parent 2db5bc324d
commit 0321eab5b5
18 changed files with 347 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/accounts/page.tsx
View File

@@ -393,7 +393,11 @@ export default function AccountsPage() {
<PageLayout>
<PageHeader
title="Comptes"
description={isMobile ? undefined : "Gérez vos comptes bancaires et leur organisation"}
description={
isMobile
? undefined
: "Gérez vos comptes bancaires et leur organisation"
}
actions={
<div className="flex items-center gap-2">
<Button
@@ -413,7 +417,10 @@ export default function AccountsPage() {
</span>
)}
</Button>
<Button onClick={handleNewFolder} size={isMobile ? "icon" : "default"}>
<Button
onClick={handleNewFolder}
size={isMobile ? "icon" : "default"}
>
<Plus className="w-4 h-4" />
{!isMobile && <span className="ml-2">Nouveau dossier</span>}
</Button>
@@ -431,7 +438,11 @@ export default function AccountsPage() {
totalBalance >= 0 ? "text-emerald-600" : "text-red-600",
)}
>
{isMobile && <span className="text-xs text-muted-foreground mr-2">Total:</span>}
{isMobile && (
<span className="text-xs text-muted-foreground mr-2">
Total:
</span>
)}
{formatCurrency(totalBalance)}
</p>
</div>
@@ -470,7 +481,9 @@ export default function AccountsPage() {
<Folder className="w-5 h-5 text-muted-foreground shrink-0" />
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap">
<h2 className="text-base sm:text-lg font-semibold">Sans dossier</h2>
<h2 className="text-base sm:text-lg font-semibold">
Sans dossier
</h2>
<span className="text-xs sm:text-sm text-muted-foreground shrink-0">
({accountsByFolder["no-folder"].length})
</span>
@@ -566,12 +579,18 @@ export default function AccountsPage() {
{isMobile ? (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
<Button
variant="ghost"
size="icon"
className="h-8 w-8 shrink-0"
>
<MoreVertical className="w-4 h-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => handleEditFolder(folder)}>
<DropdownMenuItem
onClick={() => handleEditFolder(folder)}
>
<Pencil className="w-4 h-4 mr-2" />
Modifier
</DropdownMenuItem>

226
app/globals.css
View File

@@ -7,58 +7,63 @@
/* Background fintech ultra-moderne avec dégradé vibrant */
--background: oklch(0.98 0.008 280);
--foreground: oklch(0.1 0.015 280);
/* Cards avec glassmorphism très prononcé */
--card: oklch(1 0 0 / 0.6);
--card-foreground: oklch(0.1 0.015 280);
--card-hover: oklch(1 0 0 / 0.75);
/* Popover avec backdrop blur très fort */
--popover: oklch(1 0 0 / 0.95);
--popover-foreground: oklch(0.1 0.015 280);
/* Primary: Bleu/violet fintech très vibrant avec gradient */
--primary: oklch(0.6 0.25 270);
--primary-foreground: oklch(0.99 0 0);
--primary-gradient: linear-gradient(135deg, oklch(0.6 0.25 270) 0%, oklch(0.65 0.22 300) 50%, oklch(0.62 0.24 250) 100%);
--primary-gradient: linear-gradient(
135deg,
oklch(0.6 0.25 270) 0%,
oklch(0.65 0.22 300) 50%,
oklch(0.62 0.24 250) 100%
);
--primary-light: oklch(0.7 0.2 270);
/* Secondary avec teinte subtile */
--secondary: oklch(0.97 0.008 280);
--secondary-foreground: oklch(0.25 0.015 280);
/* Muted plus doux */
--muted: oklch(0.96 0.006 280);
--muted-foreground: oklch(0.5 0.012 280);
/* Accent avec couleur très vibrante */
--accent: oklch(0.95 0.015 260);
--accent-foreground: oklch(0.6 0.25 270);
/* Destructive moderne */
--destructive: oklch(0.6 0.26 25);
--destructive-foreground: oklch(0.99 0 0);
/* Bordures fines et subtiles */
--border: oklch(0.9 0.008 280 / 0.4);
--input: oklch(0.97 0.006 280);
--ring: oklch(0.6 0.25 270 / 0.5);
/* Chart colors très vibrantes */
--chart-1: oklch(0.65 0.25 270);
--chart-2: oklch(0.7 0.22 180);
--chart-3: oklch(0.75 0.2 120);
--chart-4: oklch(0.7 0.25 320);
--chart-5: oklch(0.65 0.22 40);
/* Success et Warning pour fintech */
--success: oklch(0.68 0.2 150);
--success-foreground: oklch(0.99 0 0);
--warning: oklch(0.78 0.2 80);
--warning-foreground: oklch(0.1 0.015 280);
--radius: 1.25rem;
/* Sidebar moderne avec glassmorphism très prononcé */
--sidebar: oklch(1 0 0 / 0.5);
--sidebar-foreground: oklch(0.2 0.015 280);
@@ -74,56 +79,61 @@
/* Background sombre fintech avec dégradé vibrant */
--background: oklch(0.1 0.015 280);
--foreground: oklch(0.97 0.005 280);
/* Cards avec effet glassmorphism sombre très prononcé */
--card: oklch(0.15 0.015 280 / 0.6);
--card-foreground: oklch(0.97 0.005 280);
--card-hover: oklch(0.18 0.015 280 / 0.75);
/* Popover avec backdrop blur très fort */
--popover: oklch(0.15 0.015 280 / 0.95);
--popover-foreground: oklch(0.97 0.005 280);
/* Primary: Bleu/violet très brillant pour dark mode */
--primary: oklch(0.72 0.28 270);
--primary-foreground: oklch(0.1 0.015 280);
--primary-gradient: linear-gradient(135deg, oklch(0.72 0.28 270) 0%, oklch(0.75 0.25 300) 50%, oklch(0.73 0.27 250) 100%);
--primary-gradient: linear-gradient(
135deg,
oklch(0.72 0.28 270) 0%,
oklch(0.75 0.25 300) 50%,
oklch(0.73 0.27 250) 100%
);
--primary-light: oklch(0.78 0.23 270);
/* Secondary avec plus de contraste */
--secondary: oklch(0.22 0.015 280);
--secondary-foreground: oklch(0.95 0.005 280);
/* Muted plus visible */
--muted: oklch(0.22 0.015 280);
--muted-foreground: oklch(0.7 0.012 280);
/* Accent très vibrant */
--accent: oklch(0.26 0.02 260);
--accent-foreground: oklch(0.72 0.28 270);
/* Destructive moderne */
--destructive: oklch(0.68 0.27 25);
--destructive-foreground: oklch(0.97 0 0);
/* Bordures subtiles */
--border: oklch(0.25 0.015 280 / 0.4);
--input: oklch(0.22 0.015 280);
--ring: oklch(0.72 0.28 270 / 0.6);
/* Chart colors très vibrantes pour dark */
--chart-1: oklch(0.75 0.27 270);
--chart-2: oklch(0.8 0.25 180);
--chart-3: oklch(0.85 0.23 120);
--chart-4: oklch(0.8 0.27 320);
--chart-5: oklch(0.75 0.25 40);
/* Success et Warning pour fintech dark */
--success: oklch(0.73 0.22 150);
--success-foreground: oklch(0.1 0.015 280);
--warning: oklch(0.8 0.22 80);
--warning-foreground: oklch(0.1 0.015 280);
/* Sidebar dark moderne avec glassmorphism très prononcé */
--sidebar: oklch(0.12 0.015 280 / 0.5);
--sidebar-foreground: oklch(0.95 0.005 280);
@@ -182,21 +192,28 @@
}
body {
@apply bg-background text-foreground;
font-feature-settings: "rlig" 1, "calt" 1;
font-feature-settings:
"rlig" 1,
"calt" 1;
letter-spacing: -0.01em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
letter-spacing: -0.02em;
font-weight: 700;
}
p {
letter-spacing: -0.005em;
}
/* Animations fintech modernes et fluides */
@keyframes fade-in {
from {
@@ -208,7 +225,7 @@
transform: translateY(0);
}
}
@keyframes slide-in {
from {
opacity: 0;
@@ -219,7 +236,7 @@
transform: translateX(0);
}
}
@keyframes scale-in {
from {
opacity: 0;
@@ -230,7 +247,7 @@
transform: scale(1);
}
}
@keyframes shimmer {
0% {
background-position: -1000px 0;
@@ -239,28 +256,31 @@
background-position: 1000px 0;
}
}
@keyframes gradient-shift {
0%, 100% {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Amélioration des transitions globales avec easing fintech */
* {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter;
transition-property:
color, background-color, border-color, text-decoration-color, fill,
stroke, opacity, box-shadow, transform, filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}
/* Désactiver COMPLÈTEMENT toutes les animations pour les popovers et selects - APPROCHE AGRESSIVE */
[data-slot="popover-content"],
[data-slot="select-content"],
@@ -277,7 +297,7 @@
opacity: 1 !important;
will-change: auto !important;
}
/* Désactiver TOUTES les classes Tailwind d'animation - sélecteurs ultra-spécifiques */
[data-slot="popover-content"].animate-in,
[data-slot="select-content"].animate-in,
@@ -303,7 +323,7 @@
opacity: 1 !important;
will-change: auto !important;
}
/* Override pour tous les états data-state */
[data-slot="popover-content"][data-state="open"],
[data-slot="popover-content"][data-state="closed"],
@@ -316,18 +336,18 @@
/* Ne pas toucher au transform car il est utilisé pour le positionnement */
opacity: 1 !important;
}
/* Glassmorphism effect très prononcé */
.glass {
background: var(--card);
backdrop-filter: blur(40px) saturate(200%);
-webkit-backdrop-filter: blur(40px) saturate(200%);
border: 1px solid var(--border);
box-shadow:
box-shadow:
0 8px 32px -8px color-mix(in srgb, var(--primary) 10%, transparent),
inset 0 1px 0 0 color-mix(in srgb, white 20%, transparent);
}
/* Gradient text effect */
.gradient-text {
background: var(--primary-gradient);
@@ -336,53 +356,57 @@
background-clip: text;
font-weight: 700;
}
/* Card hover effect avec élévation */
.card-hover {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.card-hover::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg,
background: linear-gradient(
135deg,
color-mix(in srgb, var(--primary) 30%, transparent) 0%,
color-mix(in srgb, var(--chart-2) 20%, transparent) 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s ease;
}
.card-hover:hover {
transform: translateY(-4px) scale(1.01);
box-shadow:
box-shadow:
0 20px 40px -12px color-mix(in srgb, var(--primary) 20%, transparent),
0 8px 16px -8px color-mix(in srgb, var(--foreground) 10%, transparent),
inset 0 1px 0 0 color-mix(in srgb, white 30%, transparent);
}
.card-hover:hover::before {
opacity: 1;
}
/* Background fintech moderne avec dégradés animés et formes abstraites */
.page-background {
position: relative;
background: linear-gradient(135deg,
background: linear-gradient(
135deg,
oklch(0.98 0.01 280) 0%,
oklch(0.97 0.012 270) 50%,
oklch(0.98 0.01 290) 100%
);
overflow: hidden;
}
.page-background::before {
content: "";
position: fixed;
@@ -393,23 +417,28 @@
z-index: 0;
background:
/* Formes abstraites circulaires */
radial-gradient(circle 800px at 10% 20%,
radial-gradient(
circle 800px at 10% 20%,
color-mix(in srgb, var(--primary) 15%, transparent) 0%,
transparent 50%
),
radial-gradient(circle 600px at 90% 80%,
radial-gradient(
circle 600px at 90% 80%,
color-mix(in srgb, var(--chart-2) 12%, transparent) 0%,
transparent 50%
),
radial-gradient(circle 500px at 50% 50%,
radial-gradient(
circle 500px at 50% 50%,
color-mix(in srgb, var(--chart-3) 10%, transparent) 0%,
transparent 60%
),
radial-gradient(circle 400px at 20% 70%,
radial-gradient(
circle 400px at 20% 70%,
color-mix(in srgb, var(--chart-4) 8%, transparent) 0%,
transparent 65%
),
radial-gradient(circle 300px at 80% 30%,
radial-gradient(
circle 300px at 80% 30%,
color-mix(in srgb, var(--primary-light) 6%, transparent) 0%,
transparent 70%
);
@@ -419,45 +448,51 @@
transition: opacity 0.5s ease;
animation: gradient-shift 25s ease infinite;
}
.dark .page-background {
background: linear-gradient(135deg,
background: linear-gradient(
135deg,
oklch(0.1 0.015 280) 0%,
oklch(0.11 0.018 270) 50%,
oklch(0.1 0.015 290) 100%
);
}
.dark .page-background::before {
background:
radial-gradient(circle 800px at 10% 20%,
background:
radial-gradient(
circle 800px at 10% 20%,
color-mix(in srgb, var(--primary) 22%, transparent) 0%,
transparent 50%
),
radial-gradient(circle 600px at 90% 80%,
radial-gradient(
circle 600px at 90% 80%,
color-mix(in srgb, var(--chart-2) 18%, transparent) 0%,
transparent 50%
),
radial-gradient(circle 500px at 50% 50%,
radial-gradient(
circle 500px at 50% 50%,
color-mix(in srgb, var(--chart-3) 15%, transparent) 0%,
transparent 60%
),
radial-gradient(circle 400px at 20% 70%,
radial-gradient(
circle 400px at 20% 70%,
color-mix(in srgb, var(--chart-4) 12%, transparent) 0%,
transparent 65%
),
radial-gradient(circle 300px at 80% 30%,
radial-gradient(
circle 300px at 80% 30%,
color-mix(in srgb, var(--primary-light) 10%, transparent) 0%,
transparent 70%
);
opacity: 1;
}
.page-content {
position: relative;
z-index: 1;
}
/* Fintech card styles avec glassmorphism très prononcé */
.fintech-card {
background: var(--card);
@@ -465,7 +500,7 @@
-webkit-backdrop-filter: blur(50px) saturate(200%);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow:
box-shadow:
0 8px 32px -8px color-mix(in srgb, var(--primary) 8%, transparent),
0 2px 8px -2px color-mix(in srgb, var(--foreground) 3%, transparent),
inset 0 1px 0 0 color-mix(in srgb, white 25%, transparent);
@@ -473,7 +508,7 @@
position: relative;
overflow: hidden;
}
.fintech-card::after {
content: "";
position: absolute;
@@ -481,26 +516,28 @@
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
background: linear-gradient(
90deg,
transparent 0%,
color-mix(in srgb, white 40%, transparent) 50%,
transparent 100%
);
opacity: 0.5;
}
.fintech-card:hover {
transform: translateY(-6px) scale(1.01);
box-shadow:
box-shadow:
0 24px 48px -12px color-mix(in srgb, var(--primary) 25%, transparent),
0 8px 24px -8px color-mix(in srgb, var(--foreground) 8%, transparent),
inset 0 1px 0 0 color-mix(in srgb, white 40%, transparent);
border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
/* Gradient backgrounds for stat cards très vibrants */
.stat-card-gradient-1 {
background: linear-gradient(135deg,
background: linear-gradient(
135deg,
color-mix(in srgb, var(--primary) 12%, var(--card)) 0%,
color-mix(in srgb, var(--primary-light) 8%, var(--card)) 50%,
color-mix(in srgb, var(--primary) 6%, var(--card)) 100%
@@ -508,7 +545,7 @@
position: relative;
overflow: hidden;
}
.stat-card-gradient-1::before {
content: "";
position: absolute;
@@ -516,16 +553,18 @@
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle,
background: radial-gradient(
circle,
color-mix(in srgb, var(--primary) 20%, transparent) 0%,
transparent 70%
);
opacity: 0.3;
animation: gradient-shift 8s ease infinite;
}
.stat-card-gradient-2 {
background: linear-gradient(135deg,
background: linear-gradient(
135deg,
color-mix(in srgb, var(--success) 12%, var(--card)) 0%,
color-mix(in srgb, var(--success) 8%, var(--card)) 50%,
color-mix(in srgb, var(--success) 6%, var(--card)) 100%
@@ -533,7 +572,7 @@
position: relative;
overflow: hidden;
}
.stat-card-gradient-2::before {
content: "";
position: absolute;
@@ -541,16 +580,18 @@
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle,
background: radial-gradient(
circle,
color-mix(in srgb, var(--success) 20%, transparent) 0%,
transparent 70%
);
opacity: 0.3;
animation: gradient-shift 8s ease infinite;
}
.stat-card-gradient-3 {
background: linear-gradient(135deg,
background: linear-gradient(
135deg,
color-mix(in srgb, var(--destructive) 12%, var(--card)) 0%,
color-mix(in srgb, var(--destructive) 8%, var(--card)) 50%,
color-mix(in srgb, var(--destructive) 6%, var(--card)) 100%
@@ -558,7 +599,7 @@
position: relative;
overflow: hidden;
}
.stat-card-gradient-3::before {
content: "";
position: absolute;
@@ -566,16 +607,18 @@
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle,
background: radial-gradient(
circle,
color-mix(in srgb, var(--destructive) 20%, transparent) 0%,
transparent 70%
);
opacity: 0.3;
animation: gradient-shift 8s ease infinite;
}
.stat-card-gradient-4 {
background: linear-gradient(135deg,
background: linear-gradient(
135deg,
color-mix(in srgb, var(--chart-4) 12%, var(--card)) 0%,
color-mix(in srgb, var(--chart-4) 8%, var(--card)) 50%,
color-mix(in srgb, var(--chart-4) 6%, var(--card)) 100%
@@ -583,7 +626,7 @@
position: relative;
overflow: hidden;
}
.stat-card-gradient-4::before {
content: "";
position: absolute;
@@ -591,7 +634,8 @@
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle,
background: radial-gradient(
circle,
color-mix(in srgb, var(--chart-4) 20%, transparent) 0%,
transparent 70%
);

4
app/page.tsx
View File

@@ -27,11 +27,11 @@ export default function DashboardPage() {
}
const filteredAccounts = data.accounts.filter((a) =>
selectedAccounts.includes(a.id)
selectedAccounts.includes(a.id),
);
const filteredAccountIds = new Set(filteredAccounts.map((a) => a.id));
const filteredTransactions = data.transactions.filter((t) =>
filteredAccountIds.has(t.accountId)
filteredAccountIds.has(t.accountId),
);
return {

34
app/statistics/page.tsx
View File

@@ -62,10 +62,10 @@ export default function StatisticsPage() {
const [excludeInternalTransfers, setExcludeInternalTransfers] =
useState(true);
const [customStartDate, setCustomStartDate] = useState<Date | undefined>(
undefined
undefined,
);
const [customEndDate, setCustomEndDate] = useState<Date | undefined>(
undefined
undefined,
);
const [isCustomDatePickerOpen, setIsCustomDatePickerOpen] = useState(false);
@@ -100,7 +100,7 @@ export default function StatisticsPage() {
const internalTransferCategory = useMemo(() => {
if (!data) return null;
return data.categories.find(
(c) => c.name.toLowerCase() === "virement interne"
(c) => c.name.toLowerCase() === "virement interne",
);
}, [data]);
@@ -216,7 +216,7 @@ export default function StatisticsPage() {
// Filter by accounts
if (!selectedAccounts.includes("all")) {
transactions = transactions.filter((t) =>
selectedAccounts.includes(t.accountId)
selectedAccounts.includes(t.accountId),
);
}
@@ -226,7 +226,7 @@ export default function StatisticsPage() {
transactions = transactions.filter((t) => !t.categoryId);
} else {
transactions = transactions.filter(
(t) => t.categoryId && selectedCategories.includes(t.categoryId)
(t) => t.categoryId && selectedCategories.includes(t.categoryId),
);
}
}
@@ -234,7 +234,7 @@ export default function StatisticsPage() {
// Exclude "Virement interne" category if checkbox is checked
if (excludeInternalTransfers && internalTransferCategory) {
transactions = transactions.filter(
(t) => t.categoryId !== internalTransferCategory.id
(t) => t.categoryId !== internalTransferCategory.id,
);
}
@@ -306,7 +306,7 @@ export default function StatisticsPage() {
});
const categoryChartDataByParent = Array.from(
categoryTotalsByParent.entries()
categoryTotalsByParent.entries(),
)
.map(([groupId, total]) => {
const category = data.categories.find((c) => c.id === groupId);
@@ -321,7 +321,7 @@ export default function StatisticsPage() {
// Top expenses - deduplicate by ID and sort by amount (most negative first)
const uniqueTransactions = Array.from(
new Map(transactions.map((t) => [t.id, t])).values()
new Map(transactions.map((t) => [t.id, t])).values(),
);
const topExpenses = uniqueTransactions
.filter((t) => t.amount < 0)
@@ -347,7 +347,7 @@ export default function StatisticsPage() {
// Balance evolution - Aggregated (using filtered transactions)
const sortedFilteredTransactions = [...transactions].sort(
(a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
(a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
);
// Calculate starting balance: initialBalance + transactions before startDate
@@ -359,7 +359,7 @@ export default function StatisticsPage() {
// Start with initial balances
runningBalance = accountsToUse.reduce(
(sum, acc) => sum + (acc.initialBalance || 0),
0
0,
);
// Add all transactions before the start date for these accounts
@@ -396,7 +396,7 @@ export default function StatisticsPage() {
});
const aggregatedBalanceData = Array.from(
aggregatedBalanceByDate.entries()
aggregatedBalanceByDate.entries(),
).map(([date, balance]) => ({
date: new Date(date).toLocaleDateString("fr-FR", {
day: "2-digit",
@@ -853,7 +853,7 @@ export default function StatisticsPage() {
onRemoveAccount={(id) => {
const newAccounts = selectedAccounts.filter((a) => a !== id);
setSelectedAccounts(
newAccounts.length > 0 ? newAccounts : ["all"]
newAccounts.length > 0 ? newAccounts : ["all"],
);
}}
onClearAccounts={() => setSelectedAccounts(["all"])}
@@ -861,7 +861,7 @@ export default function StatisticsPage() {
onRemoveCategory={(id) => {
const newCategories = selectedCategories.filter((c) => c !== id);
setSelectedCategories(
newCategories.length > 0 ? newCategories : ["all"]
newCategories.length > 0 ? newCategories : ["all"],
);
}}
onClearCategories={() => setSelectedCategories(["all"])}
@@ -1043,17 +1043,17 @@ export default function StatisticsPage() {
onRemoveAccount={(id) => {
const newAccounts = selectedAccounts.filter((a) => a !== id);
setSelectedAccounts(
newAccounts.length > 0 ? newAccounts : ["all"]
newAccounts.length > 0 ? newAccounts : ["all"],
);
}}
onClearAccounts={() => setSelectedAccounts(["all"])}
selectedCategories={selectedCategories}
onRemoveCategory={(id) => {
const newCategories = selectedCategories.filter(
(c) => c !== id
(c) => c !== id,
);
setSelectedCategories(
newCategories.length > 0 ? newCategories : ["all"]
newCategories.length > 0 ? newCategories : ["all"],
);
}}
onClearCategories={() => setSelectedCategories(["all"])}
@@ -1203,7 +1203,7 @@ function ActiveFilters({
const selectedAccs = accounts.filter((a) => selectedAccounts.includes(a.id));
const selectedCats = categories.filter((c) =>
selectedCategories.includes(c.id)
selectedCategories.includes(c.id),
);
const isUncategorized = selectedCategories.includes("uncategorized");