feat(frontend): implement TanStack Router with mobile sidebar

- Install and configure TanStack Router for type-safe routing
- Create route structure with __root.tsx layout and individual route files
- Implement mobile-responsive sidebar with collapse functionality
- Add clickable logo in sidebar that navigates to overview page
- Extract Header and Sidebar components from Dashboard for reusability
- Configure Vite with TanStack Router plugin for development
- Update main.tsx to use RouterProvider instead of direct App rendering
- Maintain existing TanStack Query integration seamlessly
- Add proper TypeScript types for all route components
- Implement responsive design with mobile overlay and hamburger menu

This replaces the tab-based navigation with URL-based routing while
maintaining the same user experience and adding powerful features like:
- Bookmarkable URLs (/transactions, /analytics, /notifications)
- Browser back/forward button support
- Direct linking capabilities
- Mobile-responsive sidebar with smooth animations
- Type-safe navigation with auto-completion

frontend/package.json

@@ -12,6 +12,8 @@
   "dependencies": {
     "@tailwindcss/forms": "^0.5.10",
     "@tanstack/react-query": "^5.87.1",
+    "@tanstack/react-router": "^1.131.36",
+    "@tanstack/router-cli": "^1.131.36",
     "autoprefixer": "^10.4.21",
     "axios": "^1.11.0",
     "clsx": "^2.1.1",
@@ -23,6 +25,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
+    "@tanstack/router-vite-plugin": "^1.131.36",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "^5.0.0",

frontend/src/components/AccountsOverview.tsx

@@ -208,69 +208,72 @@ export default function AccountsOverview() {
                       <div className="p-3 bg-gray-100 rounded-full">
                         <Building2 className="h-6 w-6 text-gray-600" />
                       </div>
-                       <div className="flex-1">
-                         {editingAccountId === account.id ? (
-                           <div className="space-y-2">
-                             <div className="flex items-center space-x-2">
-                               <input
-                                 type="text"
-                                 value={editingName}
-                                 onChange={(e) => setEditingName(e.target.value)}
-                                 className="flex-1 px-3 py-1 text-lg font-medium border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                                 placeholder="Account name"
-                                 name="search"
-                                 autoComplete="off"
-                                 onKeyDown={(e) => {
-                                   if (e.key === "Enter") handleEditSave();
-                                   if (e.key === "Escape") handleEditCancel();
-                                 }}
-                                 autoFocus
-                               />
-                               <button
-                                 onClick={handleEditSave}
-                                 disabled={!editingName.trim() || updateAccountMutation.isPending}
-                                 className="p-1 text-green-600 hover:text-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
-                                 title="Save changes"
-                               >
-                                 <Check className="h-4 w-4" />
-                               </button>
-                               <button
-                                 onClick={handleEditCancel}
-                                 className="p-1 text-gray-600 hover:text-gray-700"
-                                 title="Cancel editing"
-                               >
-                                 <X className="h-4 w-4" />
-                               </button>
-                             </div>
-                             <p className="text-sm text-gray-600">
-                               {account.institution_id} • {account.status}
-                             </p>
-                           </div>
-                         ) : (
-                           <div>
-                             <div className="flex items-center space-x-2">
-                               <h4 className="text-lg font-medium text-gray-900">
-                                 {account.name || "Unnamed Account"}
-                               </h4>
-                               <button
-                                 onClick={() => handleEditStart(account)}
-                                 className="p-1 text-gray-400 hover:text-gray-600 transition-colors"
-                                 title="Edit account name"
-                               >
-                                 <Edit2 className="h-4 w-4" />
-                               </button>
-                             </div>
-                             <p className="text-sm text-gray-600">
-                               {account.institution_id} • {account.status}
-                             </p>
-                             {account.iban && (
-                               <p className="text-xs text-gray-500 mt-1">
-                                 IBAN: {account.iban}
-                               </p>
-                             )}
-                           </div>
-                         )}
-                       </div>
+                      <div className="flex-1">
+                        {editingAccountId === account.id ? (
+                          <div className="space-y-2">
+                            <div className="flex items-center space-x-2">
+                              <input
+                                type="text"
+                                value={editingName}
+                                onChange={(e) => setEditingName(e.target.value)}
+                                className="flex-1 px-3 py-1 text-lg font-medium border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                                placeholder="Account name"
+                                name="search"
+                                autoComplete="off"
+                                onKeyDown={(e) => {
+                                  if (e.key === "Enter") handleEditSave();
+                                  if (e.key === "Escape") handleEditCancel();
+                                }}
+                                autoFocus
+                              />
+                              <button
+                                onClick={handleEditSave}
+                                disabled={
+                                  !editingName.trim() ||
+                                  updateAccountMutation.isPending
+                                }
+                                className="p-1 text-green-600 hover:text-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                                title="Save changes"
+                              >
+                                <Check className="h-4 w-4" />
+                              </button>
+                              <button
+                                onClick={handleEditCancel}
+                                className="p-1 text-gray-600 hover:text-gray-700"
+                                title="Cancel editing"
+                              >
+                                <X className="h-4 w-4" />
+                              </button>
+                            </div>
+                            <p className="text-sm text-gray-600">
+                              {account.institution_id} • {account.status}
+                            </p>
+                          </div>
+                        ) : (
+                          <div>
+                            <div className="flex items-center space-x-2">
+                              <h4 className="text-lg font-medium text-gray-900">
+                                {account.name || "Unnamed Account"}
+                              </h4>
+                              <button
+                                onClick={() => handleEditStart(account)}
+                                className="p-1 text-gray-400 hover:text-gray-600 transition-colors"
+                                title="Edit account name"
+                              >
+                                <Edit2 className="h-4 w-4" />
+                              </button>
+                            </div>
+                            <p className="text-sm text-gray-600">
+                              {account.institution_id} • {account.status}
+                            </p>
+                            {account.iban && (
+                              <p className="text-xs text-gray-500 mt-1">
+                                IBAN: {account.iban}
+                              </p>
+                            )}
+                          </div>
+                        )}
+                      </div>
                     </div>
 
                     <div className="text-right">

frontend/src/components/Header.tsx

@@ -0,0 +1,70 @@
+import { useLocation } from "@tanstack/react-router";
+import { Menu, Activity, Wifi, WifiOff } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "../lib/api";
+
+const navigation = [
+  { name: "Overview", to: "/" },
+  { name: "Transactions", to: "/transactions" },
+  { name: "Analytics", to: "/analytics" },
+  { name: "Notifications", to: "/notifications" },
+];
+
+interface HeaderProps {
+  setSidebarOpen: (open: boolean) => void;
+}
+
+export default function Header({ setSidebarOpen }: HeaderProps) {
+  const location = useLocation();
+  const currentPage =
+    navigation.find((item) => item.to === location.pathname)?.name ||
+    "Dashboard";
+
+  const {
+    data: healthStatus,
+    isLoading: healthLoading,
+    isError: healthError,
+  } = useQuery({
+    queryKey: ["health"],
+    queryFn: apiClient.getHealth,
+    refetchInterval: 30000,
+  });
+
+  return (
+    <header className="bg-white shadow-sm border-b border-gray-200">
+      <div className="flex items-center justify-between h-16 px-6">
+        <div className="flex items-center">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="lg:hidden p-1 rounded-md text-gray-400 hover:text-gray-500"
+          >
+            <Menu className="h-6 w-6" />
+          </button>
+          <h2 className="text-lg font-semibold text-gray-900 lg:ml-0 ml-4">
+            {currentPage}
+          </h2>
+        </div>
+        <div className="flex items-center space-x-2">
+          <div className="flex items-center space-x-1">
+            {healthLoading ? (
+              <>
+                <Activity className="h-4 w-4 text-yellow-500 animate-pulse" />
+                <span className="text-sm text-gray-600">Checking...</span>
+              </>
+            ) : healthError || healthStatus?.status !== "healthy" ? (
+              <>
+                <WifiOff className="h-4 w-4 text-red-500" />
+                <span className="text-sm text-red-500">Disconnected</span>
+              </>
+            ) : (
+              <>
+                <Wifi className="h-4 w-4 text-green-500" />
+                <span className="text-sm text-gray-600">Connected</span>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

frontend/src/components/RawTransactionModal.tsx

@@ -24,7 +24,7 @@ export default function RawTransactionModal({
 
     try {
       await navigator.clipboard.writeText(
-        JSON.stringify(rawTransaction, null, 2)
+        JSON.stringify(rawTransaction, null, 2),
       );
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
@@ -78,7 +78,10 @@ export default function RawTransactionModal({
 
             <div className="mb-4">
               <p className="text-sm text-gray-600">
-                Transaction ID: <code className="bg-gray-100 px-2 py-1 rounded text-xs">{transactionId}</code>
+                Transaction ID:{" "}
+                <code className="bg-gray-100 px-2 py-1 rounded text-xs">
+                  {transactionId}
+                </code>
               </p>
             </div>
 
@@ -94,7 +97,8 @@ export default function RawTransactionModal({
                   Raw transaction data is not available for this transaction.
                 </p>
                 <p className="text-sm text-gray-500 mt-2">
-                  Try refreshing the page or check if the transaction was fetched with summary_only=false.
+                  Try refreshing the page or check if the transaction was
+                  fetched with summary_only=false.
                 </p>
               </div>
             )}

frontend/src/components/Sidebar.tsx

@@ -0,0 +1,106 @@
+import { Link, useLocation } from "@tanstack/react-router";
+import {
+  CreditCard,
+  Home,
+  List,
+  BarChart3,
+  Bell,
+  TrendingUp,
+  X,
+} from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "../lib/api";
+import { formatCurrency } from "../lib/utils";
+import { cn } from "../lib/utils";
+import type { Account } from "../types/api";
+
+const navigation = [
+  { name: "Overview", icon: Home, to: "/" },
+  { name: "Transactions", icon: List, to: "/transactions" },
+  { name: "Analytics", icon: BarChart3, to: "/analytics" },
+  { name: "Notifications", icon: Bell, to: "/notifications" },
+];
+
+interface SidebarProps {
+  sidebarOpen: boolean;
+  setSidebarOpen: (open: boolean) => void;
+}
+
+export default function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps) {
+  const location = useLocation();
+
+  const { data: accounts } = useQuery<Account[]>({
+    queryKey: ["accounts"],
+    queryFn: apiClient.getAccounts,
+  });
+
+  const totalBalance =
+    accounts?.reduce((sum, account) => {
+      const primaryBalance = account.balances?.[0]?.amount || 0;
+      return sum + primaryBalance;
+    }, 0) || 0;
+
+  return (
+    <div
+      className={cn(
+        "fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0",
+        sidebarOpen ? "translate-x-0" : "-translate-x-full",
+      )}
+    >
+      <div className="flex items-center justify-between h-16 px-6 border-b border-gray-200">
+        <Link
+          to="/"
+          onClick={() => setSidebarOpen(false)}
+          className="flex items-center space-x-2 hover:opacity-80 transition-opacity"
+        >
+          <CreditCard className="h-8 w-8 text-blue-600" />
+          <h1 className="text-xl font-bold text-gray-900">Leggen</h1>
+        </Link>
+        <button
+          onClick={() => setSidebarOpen(false)}
+          className="lg:hidden p-1 rounded-md text-gray-400 hover:text-gray-500"
+        >
+          <X className="h-6 w-6" />
+        </button>
+      </div>
+
+      <nav className="px-6 py-4">
+        <div className="space-y-1">
+          {navigation.map((item) => (
+            <Link
+              key={item.to}
+              to={item.to}
+              onClick={() => setSidebarOpen(false)}
+              className={`flex items-center w-full px-3 py-2 text-sm font-medium rounded-md transition-colors ${
+                location.pathname === item.to
+                  ? "bg-blue-100 text-blue-700"
+                  : "text-gray-700 hover:text-gray-900 hover:bg-gray-100"
+              }`}
+            >
+              <item.icon className="mr-3 h-5 w-5" />
+              {item.name}
+            </Link>
+          ))}
+        </div>
+      </nav>
+
+      {/* Account Summary in Sidebar */}
+      <div className="px-6 py-4 border-t border-gray-200 mt-auto">
+        <div className="bg-gray-50 rounded-lg p-4">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium text-gray-600">
+              Total Balance
+            </span>
+            <TrendingUp className="h-4 w-4 text-green-500" />
+          </div>
+          <p className="text-2xl font-bold text-gray-900 mt-1">
+            {formatCurrency(totalBalance)}
+          </p>
+          <p className="text-sm text-gray-500 mt-1">
+            {accounts?.length || 0} accounts
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/TransactionsList.tsx

@@ -24,7 +24,8 @@ export default function TransactionsList() {
   const [endDate, setEndDate] = useState("");
   const [showFilters, setShowFilters] = useState(false);
   const [showRawModal, setShowRawModal] = useState(false);
-  const [selectedTransaction, setSelectedTransaction] = useState<Transaction | null>(null);
+  const [selectedTransaction, setSelectedTransaction] =
+    useState<Transaction | null>(null);
 
   const { data: accounts } = useQuery<Account[]>({
     queryKey: ["accounts"],
@@ -263,11 +264,11 @@ export default function TransactionsList() {
             const account = accounts?.find(
               (acc) => acc.id === transaction.account_id,
             );
-             const isPositive = transaction.transaction_value > 0;
+            const isPositive = transaction.transaction_value > 0;
 
             return (
               <div
-                 key={`${transaction.account_id}-${transaction.transaction_id}`}
+                key={`${transaction.account_id}-${transaction.transaction_id}`}
                 className="p-6 hover:bg-gray-50 transition-colors"
               >
                 <div className="flex items-start justify-between">
@@ -319,37 +320,41 @@ export default function TransactionsList() {
                     </div>
                   </div>
 
-                   <div className="text-right ml-4">
-                     <div className="flex items-center justify-end space-x-2 mb-2">
-                       <button
-                         onClick={() => handleViewRaw(transaction)}
-                         className="inline-flex items-center px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
-                         title="View raw transaction data"
-                       >
-                         <Eye className="h-3 w-3 mr-1" />
-                         Raw
-                       </button>
-                     </div>
-                     <p
-                       className={`text-lg font-semibold ${
-                         isPositive ? "text-green-600" : "text-red-600"
-                       }`}
-                     >
-                       {isPositive ? "+" : ""}
-                        {formatCurrency(transaction.transaction_value, transaction.transaction_currency)}
-                     </p>
-                     <p className="text-sm text-gray-500">
-                        {transaction.transaction_date
-                          ? formatDate(transaction.transaction_date)
-                          : "No date"}
-                     </p>
-                      {transaction.booking_date &&
-                        transaction.booking_date !== transaction.transaction_date && (
-                         <p className="text-xs text-gray-400">
-                           Booked: {formatDate(transaction.booking_date)}
-                         </p>
-                       )}
-                   </div>
+                  <div className="text-right ml-4">
+                    <div className="flex items-center justify-end space-x-2 mb-2">
+                      <button
+                        onClick={() => handleViewRaw(transaction)}
+                        className="inline-flex items-center px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
+                        title="View raw transaction data"
+                      >
+                        <Eye className="h-3 w-3 mr-1" />
+                        Raw
+                      </button>
+                    </div>
+                    <p
+                      className={`text-lg font-semibold ${
+                        isPositive ? "text-green-600" : "text-red-600"
+                      }`}
+                    >
+                      {isPositive ? "+" : ""}
+                      {formatCurrency(
+                        transaction.transaction_value,
+                        transaction.transaction_currency,
+                      )}
+                    </p>
+                    <p className="text-sm text-gray-500">
+                      {transaction.transaction_date
+                        ? formatDate(transaction.transaction_date)
+                        : "No date"}
+                    </p>
+                    {transaction.booking_date &&
+                      transaction.booking_date !==
+                        transaction.transaction_date && (
+                        <p className="text-xs text-gray-400">
+                          Booked: {formatDate(transaction.booking_date)}
+                        </p>
+                      )}
+                  </div>
                 </div>
               </div>
             );

frontend/src/lib/api.ts

@@ -36,8 +36,14 @@ export const apiClient = {
   },
 
   // Update account details
-  updateAccount: async (id: string, updates: AccountUpdate): Promise<{ id: string; name?: string }> => {
-    const response = await api.put<ApiResponse<{ id: string; name?: string }>>(`/accounts/${id}`, updates);
+  updateAccount: async (
+    id: string,
+    updates: AccountUpdate,
+  ): Promise<{ id: string; name?: string }> => {
+    const response = await api.put<ApiResponse<{ id: string; name?: string }>>(
+      `/accounts/${id}`,
+      updates,
+    );
     return response.data.data;
   },
 

frontend/src/main.tsx

@@ -1,10 +1,25 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { createRouter, RouterProvider } from "@tanstack/react-router";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import "./index.css";
-import App from "./App.tsx";
+import { routeTree } from "./routeTree.gen";
+
+const router = createRouter({ routeTree });
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 1,
+    },
+  },
+});
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
   </StrictMode>,
 );

frontend/src/routeTree.gen.ts

@@ -0,0 +1,113 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as TransactionsRouteImport } from './routes/transactions'
+import { Route as NotificationsRouteImport } from './routes/notifications'
+import { Route as AnalyticsRouteImport } from './routes/analytics'
+import { Route as IndexRouteImport } from './routes/index'
+
+const TransactionsRoute = TransactionsRouteImport.update({
+  id: '/transactions',
+  path: '/transactions',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const NotificationsRoute = NotificationsRouteImport.update({
+  id: '/notifications',
+  path: '/notifications',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const AnalyticsRoute = AnalyticsRouteImport.update({
+  id: '/analytics',
+  path: '/analytics',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/analytics': typeof AnalyticsRoute
+  '/notifications': typeof NotificationsRoute
+  '/transactions': typeof TransactionsRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/analytics': typeof AnalyticsRoute
+  '/notifications': typeof NotificationsRoute
+  '/transactions': typeof TransactionsRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/analytics': typeof AnalyticsRoute
+  '/notifications': typeof NotificationsRoute
+  '/transactions': typeof TransactionsRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/analytics' | '/notifications' | '/transactions'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/analytics' | '/notifications' | '/transactions'
+  id: '__root__' | '/' | '/analytics' | '/notifications' | '/transactions'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  AnalyticsRoute: typeof AnalyticsRoute
+  NotificationsRoute: typeof NotificationsRoute
+  TransactionsRoute: typeof TransactionsRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/transactions': {
+      id: '/transactions'
+      path: '/transactions'
+      fullPath: '/transactions'
+      preLoaderRoute: typeof TransactionsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/notifications': {
+      id: '/notifications'
+      path: '/notifications'
+      fullPath: '/notifications'
+      preLoaderRoute: typeof NotificationsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/analytics': {
+      id: '/analytics'
+      path: '/analytics'
+      fullPath: '/analytics'
+      preLoaderRoute: typeof AnalyticsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  AnalyticsRoute: AnalyticsRoute,
+  NotificationsRoute: NotificationsRoute,
+  TransactionsRoute: TransactionsRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

frontend/src/routes/__root.tsx

@@ -0,0 +1,31 @@
+import { createRootRoute, Outlet } from "@tanstack/react-router";
+import { useState } from "react";
+import Sidebar from "../components/Sidebar";
+import Header from "../components/Header";
+
+export const Route = createRootRoute({
+  component: () => {
+    const [sidebarOpen, setSidebarOpen] = useState(false);
+
+    return (
+      <div className="flex h-screen bg-gray-100">
+        <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
+
+        {/* Mobile overlay */}
+        {sidebarOpen && (
+          <div
+            className="fixed inset-0 z-40 bg-gray-600 bg-opacity-75 lg:hidden"
+            onClick={() => setSidebarOpen(false)}
+          />
+        )}
+
+        <div className="flex flex-col flex-1 overflow-hidden">
+          <Header setSidebarOpen={setSidebarOpen} />
+          <main className="flex-1 overflow-y-auto p-6">
+            <Outlet />
+          </main>
+        </div>
+      </div>
+    );
+  },
+});

frontend/src/routes/analytics.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/analytics")({
+  component: () => (
+    <div className="bg-white rounded-lg shadow p-6">
+      <h3 className="text-lg font-medium text-gray-900 mb-4">Analytics</h3>
+      <p className="text-gray-600">Analytics dashboard coming soon...</p>
+    </div>
+  ),
+});

frontend/src/routes/index.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import AccountsOverview from "../components/AccountsOverview";
+
+export const Route = createFileRoute("/")({
+  component: AccountsOverview,
+});

frontend/src/routes/notifications.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import Notifications from "../components/Notifications";
+
+export const Route = createFileRoute("/notifications")({
+  component: Notifications,
+});

frontend/src/routes/transactions.tsx

@@ -0,0 +1,11 @@
+import { createFileRoute } from "@tanstack/react-router";
+import TransactionsList from "../components/TransactionsList";
+
+export const Route = createFileRoute("/transactions")({
+  component: TransactionsList,
+  validateSearch: (search) => ({
+    accountId: search.accountId as string | undefined,
+    startDate: search.startDate as string | undefined,
+    endDate: search.endDate as string | undefined,
+  }),
+});

frontend/src/types/api.ts

@@ -60,8 +60,8 @@ export interface RawTransactionData {
 }
 
 export interface Transaction {
-  transaction_id: string;  // NEW: stable bank-provided transaction ID
-  internal_transaction_id: string | null;  // OLD: unstable GoCardless ID
+  transaction_id: string; // NEW: stable bank-provided transaction ID
+  internal_transaction_id: string | null; // OLD: unstable GoCardless ID
   account_id: string;
   transaction_value: number;
   transaction_currency: string;

frontend/vite.config.ts

@@ -1,7 +1,11 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { TanStackRouterVite } from "@tanstack/router-vite-plugin";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    TanStackRouterVite(),
+    react(),
+  ],
 });