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/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,
+  }),
+});