From 2a1286e98a4cfbdbcd95b5f3fd1e64abde158920 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Mon, 2 Mar 2026 11:43:27 +0000
Subject: [PATCH] chore(frontend): add orphan component detection and remove
 dead components (#181)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 🚪 Why?

### Problem

Dead frontend components were accumulating in the codebase with no
automated way to detect them. Unused code increases maintenance burden,
confuses contributors, and inflates bundle analysis noise. Additionally,
several React hooks had incorrect dependency arrays causing stale
closures or unnecessary re-renders, and an unused variable was left in
the new test file.

## 🔑 What?

### Changes

- Add `resources/js/lib/orphan-components.test.ts` — a Vitest test that
scans every file under `resources/js/components/` and fails if any
component is never imported anywhere in the codebase (supports `@/`
alias imports, relative imports, and barrel `index.*` re-exports)
- Delete 14 orphan components identified by the new test:
-
`accounts/import-balances/import-balance-step-{account,mapping,preview,upload}`
  - `app-mobile-nav`
  - `appearance-dropdown`
  - `dashboard/stat-card`
  - `landing/encryption-video-player`
  - `sync-status-button`
  - `transactions/date-header`
  - `ui/{icon,input-group,navigation-menu,placeholder-pattern}`
- Restore `ui/avatar.tsx` which was incorrectly included in the deletion
(it is imported via relative path in `user-info.tsx`)
- Fix ESLint warnings across 5 files:
- `orphan-components.test.ts` — remove unused `componentDir` variable in
`importStrings()`
- `transaction-list.tsx` — remove `categories`, `accounts`, `banks`,
`automationRules` from `useCallback` deps (none referenced in callback
body)
- `amount-input.tsx` — add missing `locale` dep to `useEffect` (used in
`formatCurrency`)
- `use-dashboard-data.ts` — wrap `fetchData` in `useCallback([locale])`
and add to `useEffect` deps to prevent stale closure on locale
- `dashboard.tsx` — wrap `netWorthEvolution` fallback in
`useMemo([props.netWorthEvolution])` to stabilise the reference passed
to the downstream `useMemo`

## ✅ Verification

### Tests

The new test runs as part of `bun run test` (Vitest), already executed
in the `linter` CI job. All 48 tests pass:

```
✓ resources/js/lib/chart-calculations.test.ts (32 tests)
✓ resources/js/lib/file-parser.test.ts (15 tests)
✓ resources/js/lib/orphan-components.test.ts (1 test)
```

`bun run lint` and `bun run build` now exit clean.

Going forward, any new component added to `resources/js/components/`
that is not imported anywhere will fail CI automatically.
---
 resources/js/components/app-mobile-nav.tsx    |   3 -
 .../js/components/appearance-dropdown.tsx     |  68 -------
 .../js/components/dashboard/stat-card.tsx     |  79 --------
 .../landing/encryption-video-player.tsx       | 122 ------------
 .../js/components/sync-status-button.tsx      |  92 ---------
 .../components/transactions/date-header.tsx   |  25 ---
 .../transactions/transaction-list.tsx         |   2 +-
 resources/js/components/ui/amount-input.tsx   |   2 +-
 resources/js/components/ui/avatar.tsx         |  74 +++----
 resources/js/components/ui/glowing-effect.tsx |   2 +-
 resources/js/components/ui/icon.tsx           |  14 --
 resources/js/components/ui/input-group.tsx    |  99 ----------
 .../js/components/ui/navigation-menu.tsx      | 168 ----------------
 .../js/components/ui/placeholder-pattern.tsx  |  20 --
 resources/js/hooks/use-dashboard-data.ts      |   8 +-
 resources/js/lib/orphan-components.test.ts    | 183 ++++++++++++++++++
 resources/js/pages/dashboard.tsx              |  14 +-
 17 files changed, 236 insertions(+), 739 deletions(-)
 delete mode 100644 resources/js/components/app-mobile-nav.tsx
 delete mode 100644 resources/js/components/appearance-dropdown.tsx
 delete mode 100644 resources/js/components/dashboard/stat-card.tsx
 delete mode 100644 resources/js/components/landing/encryption-video-player.tsx
 delete mode 100644 resources/js/components/sync-status-button.tsx
 delete mode 100644 resources/js/components/transactions/date-header.tsx
 delete mode 100644 resources/js/components/ui/icon.tsx
 delete mode 100644 resources/js/components/ui/input-group.tsx
 delete mode 100644 resources/js/components/ui/navigation-menu.tsx
 delete mode 100644 resources/js/components/ui/placeholder-pattern.tsx
 create mode 100644 resources/js/lib/orphan-components.test.ts

diff --git a/resources/js/components/app-mobile-nav.tsx b/resources/js/components/app-mobile-nav.tsx
deleted file mode 100644
index bb8693ee..00000000
--- a/resources/js/components/app-mobile-nav.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function AppMobileNav() {
-    return null;
-}
diff --git a/resources/js/components/appearance-dropdown.tsx b/resources/js/components/appearance-dropdown.tsx
deleted file mode 100644
index 15375fa3..00000000
--- a/resources/js/components/appearance-dropdown.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Button } from '@/components/ui/button';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { useAppearance } from '@/hooks/use-appearance';
-import { __ } from '@/utils/i18n';
-import { Monitor, Moon, Sun } from 'lucide-react';
-import { HTMLAttributes } from 'react';
-
-export default function AppearanceToggleDropdown({
-    className = '',
-    ...props
-}: HTMLAttributes<HTMLDivElement>) {
-    const { appearance, updateAppearance } = useAppearance();
-
-    const getCurrentIcon = () => {
-        switch (appearance) {
-            case 'dark':
-                return <Moon className="h-5 w-5" />;
-            case 'light':
-                return <Sun className="h-5 w-5" />;
-            default:
-                return <Monitor className="h-5 w-5" />;
-        }
-    };
-
-    return (
-        <div className={className} {...props}>
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                    <Button
-                        variant="ghost"
-                        size="icon"
-                        className="h-9 w-9 rounded-md"
-                    >
-                        {getCurrentIcon()}
-                        <span className="sr-only">{__('Toggle theme')}</span>
-                    </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                    <DropdownMenuItem onClick={() => updateAppearance('light')}>
-                        <span className="flex items-center gap-2">
-                            <Sun className="h-5 w-5" />
-                            {__('Light')}
-                        </span>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => updateAppearance('dark')}>
-                        <span className="flex items-center gap-2">
-                            <Moon className="h-5 w-5" />
-                            {__('Dark')}
-                        </span>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                        onClick={() => updateAppearance('system')}
-                    >
-                        <span className="flex items-center gap-2">
-                            <Monitor className="h-5 w-5" />
-                            {__('System')}
-                        </span>
-                    </DropdownMenuItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </div>
-    );
-}
diff --git a/resources/js/components/dashboard/stat-card.tsx b/resources/js/components/dashboard/stat-card.tsx
deleted file mode 100644
index 65e110a4..00000000
--- a/resources/js/components/dashboard/stat-card.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { cn } from '@/lib/utils';
-import { ArrowDownIcon, ArrowUpIcon, LucideIcon } from 'lucide-react';
-
-interface StatCardProps {
-    title: string;
-    value: string;
-    description?: string;
-    icon?: LucideIcon;
-    trend?: {
-        value: number;
-        label: string;
-    };
-    className?: string;
-    loading?: boolean;
-}
-
-export function StatCard({
-    title,
-    value,
-    description,
-    icon: Icon,
-    trend,
-    className,
-    loading,
-}: StatCardProps) {
-    if (loading) {
-        return (
-            <Card className={className}>
-                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                    <CardTitle className="text-sm font-medium">
-                        {title}
-                    </CardTitle>
-                    {Icon && <Icon className="size-4 text-muted-foreground" />}
-                </CardHeader>
-                <CardContent>
-                    <div className="h-8 w-32 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
-                    <div className="mt-1 h-4 w-24 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
-                </CardContent>
-            </Card>
-        );
-    }
-
-    return (
-        <Card className={className}>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium">{title}</CardTitle>
-                {Icon && <Icon className="size-4 text-muted-foreground" />}
-            </CardHeader>
-            <CardContent>
-                <div className="text-2xl font-bold">{value}</div>
-                {(description || trend) && (
-                    <div className="flex items-center text-xs text-muted-foreground">
-                        {trend && (
-                            <span
-                                className={cn(
-                                    'mr-2 flex items-center font-medium',
-                                    trend.value > 0
-                                        ? 'text-green-600'
-                                        : trend.value < 0
-                                          ? 'text-red-600'
-                                          : '',
-                                )}
-                            >
-                                {trend.value > 0 ? (
-                                    <ArrowUpIcon className="mr-1 size-3" />
-                                ) : trend.value < 0 ? (
-                                    <ArrowDownIcon className="mr-1 size-3" />
-                                ) : null}
-                                {Math.abs(trend.value).toFixed(1)}%
-                            </span>
-                        )}
-                        {trend?.label || description}
-                    </div>
-                )}
-            </CardContent>
-        </Card>
-    );
-}
diff --git a/resources/js/components/landing/encryption-video-player.tsx b/resources/js/components/landing/encryption-video-player.tsx
deleted file mode 100644
index 79ce2c06..00000000
--- a/resources/js/components/landing/encryption-video-player.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import { cn } from '@/lib/utils';
-import { RotateCcwIcon } from 'lucide-react';
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-interface EncryptionVideoPlayerProps {
-    lightSrc: string;
-    darkSrc: string;
-    className?: string;
-}
-
-export default function EncryptionVideoPlayer({
-    lightSrc,
-    darkSrc,
-    className,
-}: EncryptionVideoPlayerProps) {
-    const lightVideoRef = useRef<HTMLVideoElement>(null);
-    const darkVideoRef = useRef<HTMLVideoElement>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
-    const [hasEnded, setHasEnded] = useState(false);
-    const [isHovering, setIsHovering] = useState(false);
-    const hasPlayedRef = useRef(false);
-
-    const handleReplay = useCallback(() => {
-        const lightVideo = lightVideoRef.current;
-        const darkVideo = darkVideoRef.current;
-
-        if (lightVideo) {
-            lightVideo.currentTime = 0;
-            lightVideo.play().catch(() => {
-                // Autoplay was prevented - user will need to interact
-            });
-        }
-        if (darkVideo) {
-            darkVideo.currentTime = 0;
-            darkVideo.play().catch(() => {
-                // Autoplay was prevented - user will need to interact
-            });
-        }
-        setHasEnded(false);
-    }, []);
-
-    const handleEnded = useCallback(() => {
-        setHasEnded(true);
-    }, []);
-
-    useEffect(() => {
-        const container = containerRef.current;
-        const lightVideo = lightVideoRef.current;
-        const darkVideo = darkVideoRef.current;
-
-        if (!container || !lightVideo || !darkVideo) return;
-
-        const observer = new IntersectionObserver(
-            (entries) => {
-                entries.forEach((entry) => {
-                    if (entry.isIntersecting && !hasPlayedRef.current) {
-                        hasPlayedRef.current = true;
-                        lightVideo.play().catch(() => {
-                            // Autoplay was prevented - user will need to interact
-                        });
-                        darkVideo.play().catch(() => {
-                            // Autoplay was prevented - user will need to interact
-                        });
-                    }
-                });
-            },
-            {
-                threshold: 0.5,
-            },
-        );
-
-        observer.observe(container);
-
-        return () => {
-            observer.disconnect();
-        };
-    }, []);
-
-    return (
-        <div
-            ref={containerRef}
-            className={cn('relative', className)}
-            onMouseEnter={() => setIsHovering(true)}
-            onMouseLeave={() => setIsHovering(false)}
-        >
-            <div className="rounded-lg border border-border/60 bg-[#FDFDFC] shadow dark:bg-[#0a0a0a]">
-                <video
-                    ref={lightVideoRef}
-                    src={lightSrc}
-                    muted
-                    playsInline
-                    onEnded={handleEnded}
-                    className="h-full w-full rounded-lg dark:hidden"
-                />
-                <video
-                    ref={darkVideoRef}
-                    src={darkSrc}
-                    muted
-                    playsInline
-                    onEnded={handleEnded}
-                    className="hidden h-full w-full rounded-lg dark:block"
-                />
-            </div>
-
-            {/* Replay button - visible on hover when video has ended */}
-            {hasEnded && (
-                <button
-                    onClick={handleReplay}
-                    className={cn(
-                        'absolute inset-0 z-20 flex cursor-pointer items-center justify-center rounded-2xl bg-black/30 transition-opacity duration-200 dark:bg-black/50',
-                        isHovering ? 'opacity-100' : 'opacity-0',
-                    )}
-                    aria-label="Replay video"
-                >
-                    <div className="flex size-16 items-center justify-center rounded-full bg-white/90 shadow-lg transition-transform hover:scale-110 dark:bg-[#161615]/90">
-                        <RotateCcwIcon className="size-7 text-[#1b1b18] dark:text-[#EDEDEC]" />
-                    </div>
-                </button>
-            )}
-        </div>
-    );
-}
diff --git a/resources/js/components/sync-status-button.tsx b/resources/js/components/sync-status-button.tsx
deleted file mode 100644
index 2c851698..00000000
--- a/resources/js/components/sync-status-button.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Button } from '@/components/ui/button';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { useSyncContext } from '@/contexts/sync-context';
-import { __ } from '@/utils/i18n';
-import { formatDistanceToNow } from 'date-fns';
-import { CloudAlert, CloudCheck, CloudOff, RefreshCw } from 'lucide-react';
-import { useState } from 'react';
-
-export function SyncStatusButton() {
-    const { syncStatus, lastSyncTime, isOnline, sync, error } =
-        useSyncContext();
-    const [isMenuOpen, setIsMenuOpen] = useState(false);
-
-    const getIcon = () => {
-        if (syncStatus === 'syncing') {
-            return <RefreshCw className="h-4 w-4 animate-spin" />;
-        }
-
-        if (syncStatus === 'error') {
-            return <CloudAlert className="h-4 w-4" />;
-        }
-
-        if (!isOnline) {
-            return <CloudOff className="h-4 w-4" />;
-        }
-
-        return <CloudCheck className="h-4 w-4" />;
-    };
-
-    const getLastSyncText = () => {
-        if (lastSyncTime) {
-            return `Synced ${formatDistanceToNow(lastSyncTime, { addSuffix: true })}`;
-        }
-        return 'Not synced yet';
-    };
-
-    const getStatusText = () => {
-        if (syncStatus === 'syncing') {
-            return 'Syncing...';
-        }
-        if (!isOnline) {
-            return 'Offline';
-        }
-        if (syncStatus === 'error') {
-            return error || 'Sync failed';
-        }
-        return getLastSyncText();
-    };
-
-    const handleSyncNow = () => {
-        sync();
-    };
-
-    return (
-        <DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
-            <DropdownMenuTrigger asChild>
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    className={`relative ${isMenuOpen ? 'bg-accent' : ''} ${syncStatus === 'error' || !isOnline ? 'bg-red-100 dark:bg-red-900' : ''}`}
-                >
-                    {getIcon()}
-                </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-56">
-                <DropdownMenuLabel className="font-normal">
-                    <p className="text-xs font-medium">{getStatusText()}</p>
-                </DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                    onClick={(e) => {
-                        e.preventDefault();
-                        handleSyncNow();
-                    }}
-                    disabled={syncStatus === 'syncing' || !isOnline}
-                >
-                    <RefreshCw
-                        className={`mr-2 h-4 w-4 ${syncStatus === 'syncing' ? 'animate-spin' : ''}`}
-                    />
-                    {__('Sync now')}
-                </DropdownMenuItem>
-            </DropdownMenuContent>
-        </DropdownMenu>
-    );
-}
diff --git a/resources/js/components/transactions/date-header.tsx b/resources/js/components/transactions/date-header.tsx
deleted file mode 100644
index b2f33c71..00000000
--- a/resources/js/components/transactions/date-header.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { format, getYear, parseISO } from 'date-fns';
-
-export interface DateHeaderProps {
-    date: string;
-    colSpan: number;
-}
-
-export function DateHeader({ date, colSpan }: DateHeaderProps) {
-    const parsedDate = parseISO(date);
-    const currentYear = getYear(new Date());
-    const transactionYear = getYear(parsedDate);
-    const formatString =
-        transactionYear === currentYear ? 'MMM d' : 'MMM d, yy';
-
-    return (
-        <tr className="bg-muted/50">
-            <td
-                colSpan={colSpan}
-                className="px-4 py-2 text-sm font-normal text-muted-foreground"
-            >
-                {format(parsedDate, formatString)}
-            </td>
-        </tr>
-    );
-}
diff --git a/resources/js/components/transactions/transaction-list.tsx b/resources/js/components/transactions/transaction-list.tsx
index d30445d5..796e47e2 100644
--- a/resources/js/components/transactions/transaction-list.tsx
+++ b/resources/js/components/transactions/transaction-list.tsx
@@ -862,7 +862,7 @@ export function TransactionList({
                 consoleDebug('=== Re-evaluation complete ===');
             }
         },
-        [categories, accounts, banks, updateTransaction, automationRules],
+        [updateTransaction],
     );
 
     async function handleBulkReEvaluateRules() {
diff --git a/resources/js/components/ui/amount-input.tsx b/resources/js/components/ui/amount-input.tsx
index 5b036015..bde95c63 100644
--- a/resources/js/components/ui/amount-input.tsx
+++ b/resources/js/components/ui/amount-input.tsx
@@ -179,7 +179,7 @@ export const AmountInput = React.forwardRef<HTMLInputElement, AmountInputProps>(
                     setDisplayValue(formatCurrency(value, locale));
                 }
             }
-        }, [value, isFocused]);
+        }, [value, isFocused, locale]);
 
         const handleFocus = () => {
             setIsFocused(true);
diff --git a/resources/js/components/ui/avatar.tsx b/resources/js/components/ui/avatar.tsx
index b7224f00..1e1516d3 100644
--- a/resources/js/components/ui/avatar.tsx
+++ b/resources/js/components/ui/avatar.tsx
@@ -1,51 +1,51 @@
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 function Avatar({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
+    return (
+        <AvatarPrimitive.Root
+            data-slot="avatar"
+            className={cn(
+                'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+                className,
+            )}
+            {...props}
+        />
+    );
 }
 
 function AvatarImage({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  )
+    return (
+        <AvatarPrimitive.Image
+            data-slot="avatar-image"
+            className={cn('aspect-square size-full', className)}
+            {...props}
+        />
+    );
 }
 
 function AvatarFallback({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
+    return (
+        <AvatarPrimitive.Fallback
+            data-slot="avatar-fallback"
+            className={cn(
+                'bg-muted flex size-full items-center justify-center rounded-full',
+                className,
+            )}
+            {...props}
+        />
+    );
 }
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/resources/js/components/ui/glowing-effect.tsx b/resources/js/components/ui/glowing-effect.tsx
index 25c4c416..6a6a5fa4 100644
--- a/resources/js/components/ui/glowing-effect.tsx
+++ b/resources/js/components/ui/glowing-effect.tsx
@@ -77,7 +77,7 @@ const GlowingEffect = memo(
 
           const currentAngle =
             parseFloat(element.style.getPropertyValue("--start")) || 0;
-          let targetAngle =
+          const targetAngle =
             (180 * Math.atan2(mouseY - center[1], mouseX - center[0])) /
               Math.PI +
             90;
diff --git a/resources/js/components/ui/icon.tsx b/resources/js/components/ui/icon.tsx
deleted file mode 100644
index bb8b3a06..00000000
--- a/resources/js/components/ui/icon.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { LucideIcon } from 'lucide-react';
-
-interface IconProps {
-    iconNode?: LucideIcon | null;
-    className?: string;
-}
-
-export function Icon({ iconNode: IconComponent, className }: IconProps) {
-    if (!IconComponent) {
-        return null;
-    }
-
-    return <IconComponent className={className} />;
-}
diff --git a/resources/js/components/ui/input-group.tsx b/resources/js/components/ui/input-group.tsx
deleted file mode 100644
index 2dab395c..00000000
--- a/resources/js/components/ui/input-group.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-const InputGroup = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-    return (
-        <div
-            ref={ref}
-            className={cn(
-                'relative flex w-full items-stretch overflow-hidden rounded-lg border border-input bg-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
-                className,
-            )}
-            {...props}
-        />
-    );
-});
-InputGroup.displayName = 'InputGroup';
-
-const InputGroupAddon = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement> & {
-        align?: 'inline-start' | 'inline-end' | 'block-end';
-    }
->(({ className, align = 'inline-start', ...props }, ref) => {
-    return (
-        <div
-            ref={ref}
-            className={cn(
-                'flex items-center justify-center bg-muted px-3 text-sm text-muted-foreground',
-                align === 'inline-end' && 'order-last',
-                align === 'block-end' && 'order-last w-full border-t',
-                className,
-            )}
-            {...props}
-        />
-    );
-});
-InputGroupAddon.displayName = 'InputGroupAddon';
-
-const InputGroupText = React.forwardRef<
-    HTMLSpanElement,
-    React.HTMLAttributes<HTMLSpanElement>
->(({ className, ...props }, ref) => {
-    return (
-        <span
-            ref={ref}
-            className={cn('whitespace-nowrap', className)}
-            {...props}
-        />
-    );
-});
-InputGroupText.displayName = 'InputGroupText';
-
-const InputGroupInput = React.forwardRef<
-    HTMLInputElement,
-    React.InputHTMLAttributes<HTMLInputElement>
->(({ className, type = 'text', ...props }, ref) => {
-    return (
-        <input
-            type={type}
-            className={cn(
-                'flex h-10 w-full flex-1 border-0 bg-transparent px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-                className,
-            )}
-            ref={ref}
-            {...props}
-        />
-    );
-});
-InputGroupInput.displayName = 'InputGroupInput';
-
-const InputGroupTextarea = React.forwardRef<
-    HTMLTextAreaElement,
-    React.TextareaHTMLAttributes<HTMLTextAreaElement>
->(({ className, ...props }, ref) => {
-    return (
-        <textarea
-            className={cn(
-                'flex min-h-[80px] w-full flex-1 border-0 bg-transparent px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-                className,
-            )}
-            ref={ref}
-            {...props}
-        />
-    );
-});
-InputGroupTextarea.displayName = 'InputGroupTextarea';
-
-export {
-    InputGroup,
-    InputGroupAddon,
-    InputGroupInput,
-    InputGroupText,
-    InputGroupTextarea,
-};
-
diff --git a/resources/js/components/ui/navigation-menu.tsx b/resources/js/components/ui/navigation-menu.tsx
deleted file mode 100644
index 1dd90ad4..00000000
--- a/resources/js/components/ui/navigation-menu.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import * as React from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
-import { ChevronDownIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function NavigationMenu({
-  className,
-  children,
-  viewport = true,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
-  viewport?: boolean
-}) {
-  return (
-    <NavigationMenuPrimitive.Root
-      data-slot="navigation-menu"
-      data-viewport={viewport}
-      className={cn(
-        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      {viewport && <NavigationMenuViewport />}
-    </NavigationMenuPrimitive.Root>
-  )
-}
-
-function NavigationMenuList({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
-  return (
-    <NavigationMenuPrimitive.List
-      data-slot="navigation-menu-list"
-      className={cn(
-        "group flex flex-1 list-none items-center justify-center gap-1",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function NavigationMenuItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
-  return (
-    <NavigationMenuPrimitive.Item
-      data-slot="navigation-menu-item"
-      className={cn("relative", className)}
-      {...props}
-    />
-  )
-}
-
-const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[active=true]:bg-accent/50 data-[state=open]:bg-accent/50 data-[active=true]:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
-)
-
-function NavigationMenuTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
-  return (
-    <NavigationMenuPrimitive.Trigger
-      data-slot="navigation-menu-trigger"
-      className={cn(navigationMenuTriggerStyle(), "group", className)}
-      {...props}
-    >
-      {children}{" "}
-      <ChevronDownIcon
-        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
-        aria-hidden="true"
-      />
-    </NavigationMenuPrimitive.Trigger>
-  )
-}
-
-function NavigationMenuContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
-  return (
-    <NavigationMenuPrimitive.Content
-      data-slot="navigation-menu-content"
-      className={cn(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
-        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function NavigationMenuViewport({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
-  return (
-    <div
-      className={cn(
-        "absolute top-full left-0 isolate z-50 flex justify-center"
-      )}
-    >
-      <NavigationMenuPrimitive.Viewport
-        data-slot="navigation-menu-viewport"
-        className={cn(
-          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function NavigationMenuLink({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
-  return (
-    <NavigationMenuPrimitive.Link
-      data-slot="navigation-menu-link"
-      className={cn(
-        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function NavigationMenuIndicator({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
-  return (
-    <NavigationMenuPrimitive.Indicator
-      data-slot="navigation-menu-indicator"
-      className={cn(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
-        className
-      )}
-      {...props}
-    >
-      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
-    </NavigationMenuPrimitive.Indicator>
-  )
-}
-
-export {
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-  navigationMenuTriggerStyle,
-}
diff --git a/resources/js/components/ui/placeholder-pattern.tsx b/resources/js/components/ui/placeholder-pattern.tsx
deleted file mode 100644
index 09f7ea45..00000000
--- a/resources/js/components/ui/placeholder-pattern.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useId } from 'react';
-
-interface PlaceholderPatternProps {
-    className?: string;
-}
-
-export function PlaceholderPattern({ className }: PlaceholderPatternProps) {
-    const patternId = useId();
-
-    return (
-        <svg className={className} fill="none">
-            <defs>
-                <pattern id={patternId} x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
-                    <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3"></path>
-                </pattern>
-            </defs>
-            <rect stroke="none" fill={`url(#${patternId})`} width="100%" height="100%"></rect>
-        </svg>
-    );
-}
diff --git a/resources/js/hooks/use-dashboard-data.ts b/resources/js/hooks/use-dashboard-data.ts
index ea28def3..72545a99 100644
--- a/resources/js/hooks/use-dashboard-data.ts
+++ b/resources/js/hooks/use-dashboard-data.ts
@@ -2,7 +2,7 @@ import { useLocale } from '@/hooks/use-locale';
 import { Account, AccountType, Bank } from '@/types/account';
 import { Category } from '@/types/category';
 import { format, subDays, subMonths } from 'date-fns';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 export interface NetWorthEvolutionAccount {
     id: string;
@@ -116,7 +116,7 @@ export function useDashboardData(): DashboardData & { refetch: () => void } {
     });
     const [isLoading, setIsLoading] = useState(true);
 
-    const fetchData = async () => {
+    const fetchData = useCallback(async () => {
         setIsLoading(true);
         try {
             const now = new Date();
@@ -157,11 +157,11 @@ export function useDashboardData(): DashboardData & { refetch: () => void } {
         } finally {
             setIsLoading(false);
         }
-    };
+    }, [locale]);
 
     useEffect(() => {
         fetchData();
-    }, []);
+    }, [fetchData]);
 
     return { ...data, isLoading, refetch: fetchData };
 }
diff --git a/resources/js/lib/orphan-components.test.ts b/resources/js/lib/orphan-components.test.ts
new file mode 100644
index 00000000..d0c4cb4c
--- /dev/null
+++ b/resources/js/lib/orphan-components.test.ts
@@ -0,0 +1,183 @@
+/**
+ * Orphan component detection
+ *
+ * Every file under resources/js/components/ must be imported (directly or via
+ * a barrel re-export) somewhere in the codebase. If a component is never
+ * referenced it is dead code and this test will fail.
+ *
+ * How it works
+ * ------------
+ * 1. Collect all component files (the candidates).
+ * 2. Collect all source files that may consume components (pages, layouts,
+ *    hooks, contexts, lib, app entry points, and other components that import
+ *    siblings).
+ * 3. For each candidate, check every consumer file for a reference using:
+ *      a) The @/ alias path (e.g. "@/components/foo/bar")
+ *      b) The relative path from that consumer's directory to the component
+ *         (e.g. "./bar", "../foo/bar", "./import-balances/bar")
+ *      c) The barrel directory path if an index.* exists in the component's
+ *         top-level subdirectory (e.g. "@/components/charts")
+ * 4. Fail if no consumer references the component.
+ *
+ * Exclusions
+ * ----------
+ * - index.ts / index.tsx barrel files are skipped as standalone candidates.
+ * - *.test.ts / *.test.tsx files are excluded from both candidates and
+ *   consumers so test imports don't hide real orphans.
+ */
+
+import { readFileSync, readdirSync, statSync } from 'fs';
+import { dirname, extname, join, relative, resolve } from 'path';
+import { describe, expect, it } from 'vitest';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+// __dirname is resources/js/lib — go up one level to reach resources/js
+const jsRoot = resolve(__dirname, '..');
+const componentsRoot = join(jsRoot, 'components');
+
+/** Recursively collect all files matching the given extensions. */
+function collectFiles(dir: string, extensions: string[]): string[] {
+    const results: string[] = [];
+
+    for (const entry of readdirSync(dir)) {
+        const fullPath = join(dir, entry);
+        const stat = statSync(fullPath);
+
+        if (stat.isDirectory()) {
+            results.push(...collectFiles(fullPath, extensions));
+        } else if (extensions.includes(extname(entry))) {
+            results.push(fullPath);
+        }
+    }
+
+    return results;
+}
+
+/** Return the `@/...` alias import path (no extension) for an absolute path. */
+function toAliasPath(absolutePath: string): string {
+    const rel = relative(jsRoot, absolutePath);
+    return '@/' + rel.replace(/\.(tsx?|jsx?)$/, '');
+}
+
+/**
+ * Return all import strings that would constitute a valid reference to
+ * `componentFile` from within `consumerFile`.
+ */
+function importStrings(componentFile: string, consumerFile: string): string[] {
+    const aliasPath = toAliasPath(componentFile); // "@/components/foo/bar"
+    const consumerDir = dirname(consumerFile);
+
+    // Relative path from consumer's directory to component (no extension)
+    const rel = relative(consumerDir, componentFile).replace(
+        /\.(tsx?|jsx?)$/,
+        '',
+    );
+    // Ensure it starts with ./ or ../
+    const relPath = rel.startsWith('.') ? rel : './' + rel;
+
+    const variants = (p: string) => [
+        `'${p}'`,
+        `"${p}"`,
+        `'${p}.ts'`,
+        `"${p}.ts"`,
+        `'${p}.tsx'`,
+        `"${p}.tsx"`,
+    ];
+
+    return [...variants(aliasPath), ...variants(relPath)];
+}
+
+// ---------------------------------------------------------------------------
+// Build the candidate list (component files, excluding barrel index files)
+// ---------------------------------------------------------------------------
+
+const allComponentFiles = collectFiles(componentsRoot, ['.ts', '.tsx']).filter(
+    (f) => !f.endsWith('.test.ts') && !f.endsWith('.test.tsx'),
+);
+
+const candidateFiles = allComponentFiles.filter((f) => {
+    const base = f.split('/').pop()!;
+    return base !== 'index.ts' && base !== 'index.tsx';
+});
+
+// ---------------------------------------------------------------------------
+// Build consumer list — everything in resources/js except test files
+// ---------------------------------------------------------------------------
+
+const allSourceFiles = collectFiles(jsRoot, ['.ts', '.tsx']).filter(
+    (f) => !f.endsWith('.test.ts') && !f.endsWith('.test.tsx'),
+);
+
+// Pre-read all consumer file contents paired with their path
+const consumers: { path: string; content: string }[] = allSourceFiles.map(
+    (f) => ({ path: f, content: readFileSync(f, 'utf-8') }),
+);
+
+// ---------------------------------------------------------------------------
+// Pre-compute barrel directories so we can accept directory-level imports
+// ---------------------------------------------------------------------------
+
+const barrelDirs = new Set<string>();
+for (const f of allComponentFiles) {
+    const base = f.split('/').pop()!;
+    if (base === 'index.ts' || base === 'index.tsx') {
+        barrelDirs.add(dirname(f));
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Test
+// ---------------------------------------------------------------------------
+
+describe('Orphan component detection', () => {
+    it('every component must be imported somewhere in the codebase', () => {
+        const orphans: string[] = [];
+
+        for (const componentFile of candidateFiles) {
+            const componentDir = dirname(componentFile);
+
+            const isUsed = consumers.some(({ path: consumerPath, content }) => {
+                // Check alias + relative import patterns for this consumer
+                const patterns = importStrings(componentFile, consumerPath);
+
+                // If the component sits inside a barrel directory, also accept
+                // an import of that directory (alias or relative)
+                if (barrelDirs.has(componentDir)) {
+                    const barrelAlias = toAliasPath(
+                        join(componentDir, 'index'),
+                    ).replace(/\/index$/, '');
+                    const relBarrel = relative(
+                        dirname(consumerPath),
+                        componentDir,
+                    );
+                    const relBarrelPath = relBarrel.startsWith('.')
+                        ? relBarrel
+                        : './' + relBarrel;
+
+                    patterns.push(
+                        `'${barrelAlias}'`,
+                        `"${barrelAlias}"`,
+                        `'${relBarrelPath}'`,
+                        `"${relBarrelPath}"`,
+                    );
+                }
+
+                return patterns.some((p) => content.includes(p));
+            });
+
+            if (!isUsed) {
+                orphans.push(toAliasPath(componentFile));
+            }
+        }
+
+        if (orphans.length > 0) {
+            const list = orphans.map((o) => `  - ${o}`).join('\n');
+            expect.fail(
+                `Found ${orphans.length} orphan component(s) that are never imported:\n\n${list}\n\nRemove unused components or add them to the codebase.`,
+            );
+        }
+    });
+});
diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx
index ae376a28..eba74518 100644
--- a/resources/js/pages/dashboard.tsx
+++ b/resources/js/pages/dashboard.tsx
@@ -47,11 +47,15 @@ export default function Dashboard() {
         useEncryptionKey();
     const [showUnlockDialog, setShowUnlockDialog] = useState(false);
 
-    const netWorthEvolution = props.netWorthEvolution ?? {
-        data: [],
-        accounts: {},
-        currency_code: 'USD',
-    };
+    const netWorthEvolution = useMemo(
+        () =>
+            props.netWorthEvolution ?? {
+                data: [],
+                accounts: {},
+                currency_code: 'USD',
+            },
+        [props.netWorthEvolution],
+    );
 
     const accountMetrics = useMemo(
         () => deriveAccountMetrics(netWorthEvolution, locale),