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

@@ -1,4 +1,5 @@
-import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import {
   CreditCard,
   TrendingUp,
@@ -6,6 +7,9 @@ import {
   Building2,
   RefreshCw,
   AlertCircle,
+  Edit2,
+  Check,
+  X,
 } from "lucide-react";
 import { apiClient } from "../lib/api";
 import { formatCurrency, formatDate } from "../lib/utils";
@@ -28,6 +32,43 @@ export default function AccountsOverview() {
     queryFn: () => apiClient.getBalances(),
   });
 
+  const [editingAccountId, setEditingAccountId] = useState<string | null>(null);
+  const [editingName, setEditingName] = useState("");
+
+  const queryClient = useQueryClient();
+
+  const updateAccountMutation = useMutation({
+    mutationFn: ({ id, name }: { id: string; name: string }) =>
+      apiClient.updateAccount(id, { name }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["accounts"] });
+      setEditingAccountId(null);
+      setEditingName("");
+    },
+    onError: (error) => {
+      console.error("Failed to update account:", error);
+    },
+  });
+
+  const handleEditStart = (account: Account) => {
+    setEditingAccountId(account.id);
+    setEditingName(account.name || "");
+  };
+
+  const handleEditSave = () => {
+    if (editingAccountId && editingName.trim()) {
+      updateAccountMutation.mutate({
+        id: editingAccountId,
+        name: editingName.trim(),
+      });
+    }
+  };
+
+  const handleEditCancel = () => {
+    setEditingAccountId(null);
+    setEditingName("");
+  };
+
   if (accountsLoading) {
     return (
       <div className="bg-white rounded-lg shadow">
@@ -167,17 +208,70 @@ export default function AccountsOverview() {
                       <div className="p-3 bg-gray-100 rounded-full">
                         <Building2 className="h-6 w-6 text-gray-600" />
                       </div>
-                      <div>
-                        <h4 className="text-lg font-medium text-gray-900">
-                          {account.name || "Unnamed Account"}
-                        </h4>
-                        <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 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>

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

@@ -0,0 +1,120 @@
+import { X, Copy, Check } from "lucide-react";
+import { useState } from "react";
+import type { RawTransactionData } from "../types/api";
+
+interface RawTransactionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  rawTransaction: RawTransactionData | undefined;
+  transactionId: string;
+}
+
+export default function RawTransactionModal({
+  isOpen,
+  onClose,
+  rawTransaction,
+  transactionId,
+}: RawTransactionModalProps) {
+  const [copied, setCopied] = useState(false);
+
+  if (!isOpen) return null;
+
+  const handleCopy = async () => {
+    if (!rawTransaction) return;
+
+    try {
+      await navigator.clipboard.writeText(
+        JSON.stringify(rawTransaction, null, 2),
+      );
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy to clipboard:", err);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 overflow-y-auto">
+      <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+        {/* Background overlay */}
+        <div
+          className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+          onClick={onClose}
+        />
+
+        {/* Modal panel */}
+        <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
+          <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-medium text-gray-900">
+                Raw Transaction Data
+              </h3>
+              <div className="flex items-center space-x-2">
+                <button
+                  onClick={handleCopy}
+                  disabled={!rawTransaction}
+                  className="inline-flex items-center px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {copied ? (
+                    <>
+                      <Check className="h-4 w-4 mr-1 text-green-600" />
+                      Copied!
+                    </>
+                  ) : (
+                    <>
+                      <Copy className="h-4 w-4 mr-1" />
+                      Copy JSON
+                    </>
+                  )}
+                </button>
+                <button
+                  onClick={onClose}
+                  className="inline-flex items-center p-1 text-gray-400 hover:text-gray-600 transition-colors"
+                >
+                  <X className="h-5 w-5" />
+                </button>
+              </div>
+            </div>
+
+            <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>
+              </p>
+            </div>
+
+            {rawTransaction ? (
+              <div className="bg-gray-50 rounded-lg p-4 overflow-auto max-h-96">
+                <pre className="text-sm text-gray-800 whitespace-pre-wrap">
+                  {JSON.stringify(rawTransaction, null, 2)}
+                </pre>
+              </div>
+            ) : (
+              <div className="bg-gray-50 rounded-lg p-8 text-center">
+                <p className="text-gray-600">
+                  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.
+                </p>
+              </div>
+            )}
+          </div>
+
+          <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+            <button
+              type="button"
+              onClick={onClose}
+              className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </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

@@ -9,10 +9,12 @@ import {
   RefreshCw,
   AlertCircle,
   X,
+  Eye,
 } from "lucide-react";
 import { apiClient } from "../lib/api";
 import { formatCurrency, formatDate } from "../lib/utils";
 import LoadingSpinner from "./LoadingSpinner";
+import RawTransactionModal from "./RawTransactionModal";
 import type { Account, Transaction } from "../types/api";
 
 export default function TransactionsList() {
@@ -21,6 +23,9 @@ export default function TransactionsList() {
   const [startDate, setStartDate] = useState("");
   const [endDate, setEndDate] = useState("");
   const [showFilters, setShowFilters] = useState(false);
+  const [showRawModal, setShowRawModal] = useState(false);
+  const [selectedTransaction, setSelectedTransaction] =
+    useState<Transaction | null>(null);
 
   const { data: accounts } = useQuery<Account[]>({
     queryKey: ["accounts"],
@@ -39,6 +44,7 @@ export default function TransactionsList() {
         accountId: selectedAccount || undefined,
         startDate: startDate || undefined,
         endDate: endDate || undefined,
+        summaryOnly: false, // Always fetch raw transaction data
       }),
   });
 
@@ -74,6 +80,16 @@ export default function TransactionsList() {
     setEndDate("");
   };
 
+  const handleViewRaw = (transaction: Transaction) => {
+    setSelectedTransaction(transaction);
+    setShowRawModal(true);
+  };
+
+  const handleCloseModal = () => {
+    setShowRawModal(false);
+    setSelectedTransaction(null);
+  };
+
   const hasActiveFilters =
     searchTerm || selectedAccount || startDate || endDate;
 
@@ -248,14 +264,11 @@ export default function TransactionsList() {
             const account = accounts?.find(
               (acc) => acc.id === transaction.account_id,
             );
-            const isPositive = transaction.amount > 0;
+            const isPositive = transaction.transaction_value > 0;
 
             return (
               <div
-                key={
-                  transaction.internal_transaction_id ||
-                  `${transaction.account_id}-${transaction.date}-${transaction.amount}`
-                }
+                key={`${transaction.account_id}-${transaction.transaction_id}`}
                 className="p-6 hover:bg-gray-50 transition-colors"
               >
                 <div className="flex items-start justify-between">
@@ -308,21 +321,35 @@ export default function TransactionsList() {
                   </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.amount, transaction.currency)}
+                      {formatCurrency(
+                        transaction.transaction_value,
+                        transaction.transaction_currency,
+                      )}
                     </p>
                     <p className="text-sm text-gray-500">
-                      {transaction.date
-                        ? formatDate(transaction.date)
+                      {transaction.transaction_date
+                        ? formatDate(transaction.transaction_date)
                         : "No date"}
                     </p>
                     {transaction.booking_date &&
-                      transaction.booking_date !== transaction.date && (
+                      transaction.booking_date !==
+                        transaction.transaction_date && (
                         <p className="text-xs text-gray-400">
                           Booked: {formatDate(transaction.booking_date)}
                         </p>
@@ -334,6 +361,14 @@ export default function TransactionsList() {
           })}
         </div>
       )}
+
+      {/* Raw Transaction Modal */}
+      <RawTransactionModal
+        isOpen={showRawModal}
+        onClose={handleCloseModal}
+        rawTransaction={selectedTransaction?.raw_transaction}
+        transactionId={selectedTransaction?.transaction_id || "unknown"}
+      />
     </div>
   );
 }

frontend/src/lib/api.ts

@@ -9,6 +9,7 @@ import type {
   NotificationService,
   NotificationServicesResponse,
   HealthData,
+  AccountUpdate,
 } from "../types/api";
 
 // Use VITE_API_URL for development, relative URLs for production
@@ -34,6 +35,18 @@ export const apiClient = {
     return response.data.data;
   },
 
+  // 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,
+    );
+    return response.data.data;
+  },
+
   // Get all balances
   getBalances: async (): Promise<Balance[]> => {
     const response = await api.get<ApiResponse<Balance[]>>("/balances");
@@ -56,6 +69,7 @@ export const apiClient = {
     page?: number;
     perPage?: number;
     search?: string;
+    summaryOnly?: boolean;
   }): Promise<Transaction[]> => {
     const queryParams = new URLSearchParams();
 
@@ -66,6 +80,9 @@ export const apiClient = {
     if (params?.perPage)
       queryParams.append("per_page", params.perPage.toString());
     if (params?.search) queryParams.append("search", params.search);
+    if (params?.summaryOnly !== undefined) {
+      queryParams.append("summary_only", params.summaryOnly.toString());
+    }
 
     const response = await api.get<ApiResponse<Transaction[]>>(
       `/transactions?${queryParams.toString()}`,

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

@@ -17,15 +17,60 @@ export interface Account {
   balances: AccountBalance[];
 }
 
+export interface AccountUpdate {
+  name?: string;
+}
+
+export interface RawTransactionData {
+  transactionId?: string;
+  bookingDate?: string;
+  valueDate?: string;
+  bookingDateTime?: string;
+  valueDateTime?: string;
+  transactionAmount?: {
+    amount: string;
+    currency: string;
+  };
+  currencyExchange?: {
+    instructedAmount?: {
+      amount: string;
+      currency: string;
+    };
+    sourceCurrency?: string;
+    exchangeRate?: string;
+    unitCurrency?: string;
+    targetCurrency?: string;
+  };
+  creditorName?: string;
+  debtorName?: string;
+  debtorAccount?: {
+    iban?: string;
+  };
+  remittanceInformationUnstructuredArray?: string[];
+  proprietaryBankTransactionCode?: string;
+  balanceAfterTransaction?: {
+    balanceAmount: {
+      amount: string;
+      currency: string;
+    };
+    balanceType: string;
+  };
+  internalTransactionId?: string;
+  [key: string]: unknown; // Allow additional fields
+}
+
 export interface Transaction {
-  internal_transaction_id: string | null;
+  transaction_id: string; // NEW: stable bank-provided transaction ID
+  internal_transaction_id: string | null; // OLD: unstable GoCardless ID
   account_id: string;
-  amount: number;
-  currency: string;
+  transaction_value: number;
+  transaction_currency: string;
   description: string;
-  date: string;
-  status: string;
+  transaction_date: string;
+  transaction_status: string;
   // Optional fields that may be present in some transactions
+  institution_id?: string;
+  iban?: string;
   booking_date?: string;
   value_date?: string;
   creditor_name?: string;
@@ -34,6 +79,8 @@ export interface Transaction {
   category?: string;
   created_at?: string;
   updated_at?: string;
+  // Raw transaction data (only present when summary_only=false)
+  raw_transaction?: RawTransactionData;
 }
 
 // Type for raw transaction data from API (before sanitization)

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

leggend/api/models/accounts.py

@@ -33,10 +33,20 @@ class AccountDetails(BaseModel):
         json_encoders = {datetime: lambda v: v.isoformat() if v else None}
 
 
+class AccountUpdate(BaseModel):
+    """Account update model"""
+
+    name: Optional[str] = None
+
+    class Config:
+        json_encoders = {datetime: lambda v: v.isoformat() if v else None}
+
+
 class Transaction(BaseModel):
     """Transaction model"""
 
-    internal_transaction_id: Optional[str] = None
+    transaction_id: str  # NEW: stable bank-provided transaction ID
+    internal_transaction_id: Optional[str] = None  # OLD: unstable GoCardless ID
     institution_id: str
     iban: Optional[str] = None
     account_id: str
@@ -54,6 +64,7 @@ class Transaction(BaseModel):
 class TransactionSummary(BaseModel):
     """Transaction summary for lists"""
 
+    transaction_id: str  # NEW: stable bank-provided transaction ID
     internal_transaction_id: Optional[str] = None
     date: datetime
     description: str

leggend/api/routes/accounts.py

@@ -8,6 +8,7 @@ from leggend.api.models.accounts import (
     AccountBalance,
     Transaction,
     TransactionSummary,
+    AccountUpdate,
 )
 from leggend.services.database_service import DatabaseService
 
@@ -243,7 +244,8 @@ async def get_account_transactions(
             # Return simplified transaction summaries
             data = [
                 TransactionSummary(
-                    internal_transaction_id=txn["internalTransactionId"],
+                    transaction_id=txn["transactionId"],  # NEW: stable bank-provided ID
+                    internal_transaction_id=txn.get("internalTransactionId"),
                     date=txn["transactionDate"],
                     description=txn["description"],
                     amount=txn["transactionValue"],
@@ -257,7 +259,8 @@ async def get_account_transactions(
             # Return full transaction details
             data = [
                 Transaction(
-                    internal_transaction_id=txn["internalTransactionId"],
+                    transaction_id=txn["transactionId"],  # NEW: stable bank-provided ID
+                    internal_transaction_id=txn.get("internalTransactionId"),
                     institution_id=txn["institutionId"],
                     iban=txn["iban"],
                     account_id=txn["accountId"],
@@ -285,3 +288,40 @@ async def get_account_transactions(
         raise HTTPException(
             status_code=404, detail=f"Failed to get transactions: {str(e)}"
         ) from e
+
+
+@router.put("/accounts/{account_id}", response_model=APIResponse)
+async def update_account_details(
+    account_id: str, update_data: AccountUpdate
+) -> APIResponse:
+    """Update account details (currently only name)"""
+    try:
+        # Get current account details
+        current_account = await database_service.get_account_details_from_db(account_id)
+
+        if not current_account:
+            raise HTTPException(
+                status_code=404, detail=f"Account {account_id} not found"
+            )
+
+        # Prepare updated account data
+        updated_account_data = current_account.copy()
+        if update_data.name is not None:
+            updated_account_data["name"] = update_data.name
+
+        # Persist updated account details
+        await database_service.persist_account_details(updated_account_data)
+
+        return APIResponse(
+            success=True,
+            data={"id": account_id, "name": update_data.name},
+            message=f"Account {account_id} name updated successfully",
+        )
+
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Failed to update account {account_id}: {e}")
+        raise HTTPException(
+            status_code=500, detail=f"Failed to update account: {str(e)}"
+        ) from e

leggend/api/routes/transactions.py

@@ -75,7 +75,8 @@ async def get_all_transactions(
             # Return simplified transaction summaries
             data = [
                 TransactionSummary(
-                    internal_transaction_id=txn["internalTransactionId"],
+                    transaction_id=txn["transactionId"],  # NEW: stable bank-provided ID
+                    internal_transaction_id=txn.get("internalTransactionId"),
                     date=txn["transactionDate"],
                     description=txn["description"],
                     amount=txn["transactionValue"],
@@ -89,7 +90,8 @@ async def get_all_transactions(
             # Return full transaction details
             data = [
                 Transaction(
-                    internal_transaction_id=txn["internalTransactionId"],
+                    transaction_id=txn["transactionId"],  # NEW: stable bank-provided ID
+                    internal_transaction_id=txn.get("internalTransactionId"),
                     institution_id=txn["institutionId"],
                     iban=txn["iban"],
                     account_id=txn["accountId"],

leggend/services/database_service.py

@@ -93,13 +93,17 @@ class DatabaseService:
             ",".join(transaction.get("remittanceInformationUnstructuredArray", [])),
         )
 
-        # Extract transaction ID, using transactionId as fallback when internalTransactionId is missing
-        transaction_id = transaction.get("internalTransactionId") or transaction.get(
-            "transactionId"
-        )
+        # Extract transaction IDs - transactionId is now primary, internalTransactionId is reference
+        transaction_id = transaction.get("transactionId")
+        internal_transaction_id = transaction.get("internalTransactionId")
+
+        if not transaction_id:
+            raise ValueError("Transaction missing required transactionId field")
 
         return {
-            "internalTransactionId": transaction_id,
+            "accountId": account_id,
+            "transactionId": transaction_id,
+            "internalTransactionId": internal_transaction_id,
             "institutionId": account_info["institution_id"],
             "iban": account_info.get("iban", "N/A"),
             "transactionDate": min_date,
@@ -107,7 +111,6 @@ class DatabaseService:
             "transactionValue": amount,
             "transactionCurrency": currency,
             "transactionStatus": status,
-            "accountId": account_id,
             "rawTransaction": transaction,
         }
 
@@ -260,6 +263,7 @@ class DatabaseService:
 
         await self._migrate_balance_timestamps_if_needed()
         await self._migrate_null_transaction_ids_if_needed()
+        await self._migrate_to_composite_key_if_needed()
 
     async def _migrate_balance_timestamps_if_needed(self):
         """Check and migrate balance timestamps if needed"""
@@ -519,6 +523,168 @@ class DatabaseService:
             logger.error(f"Null transaction IDs migration failed: {e}")
             raise
 
+    async def _migrate_to_composite_key_if_needed(self):
+        """Check and migrate to composite primary key if needed"""
+        try:
+            if await self._check_composite_key_migration_needed():
+                logger.info("Composite key migration needed, starting...")
+                await self._migrate_to_composite_key()
+                logger.info("Composite key migration completed")
+            else:
+                logger.info("Composite key migration not needed")
+        except Exception as e:
+            logger.error(f"Composite key migration failed: {e}")
+            raise
+
+    async def _check_composite_key_migration_needed(self) -> bool:
+        """Check if composite key migration is needed"""
+        from pathlib import Path
+
+        db_path = Path.home() / ".config" / "leggen" / "leggen.db"
+        if not db_path.exists():
+            return False
+
+        try:
+            conn = sqlite3.connect(str(db_path))
+            cursor = conn.cursor()
+
+            # Check if transactions table has the old primary key structure
+            cursor.execute("PRAGMA table_info(transactions)")
+            columns = cursor.fetchall()
+            column_names = [col[1] for col in columns]
+
+            # If we have internalTransactionId as primary key, migration is needed
+            if "internalTransactionId" in column_names:
+                # Check if there are duplicate (accountId, transactionId) pairs
+                cursor.execute("""
+                    SELECT COUNT(*) as duplicates
+                    FROM (
+                        SELECT accountId, json_extract(rawTransaction, '$.transactionId') as transactionId, COUNT(*) as cnt
+                        FROM transactions
+                        WHERE json_extract(rawTransaction, '$.transactionId') IS NOT NULL
+                        GROUP BY accountId, json_extract(rawTransaction, '$.transactionId')
+                        HAVING COUNT(*) > 1
+                    )
+                """)
+                duplicates = cursor.fetchone()[0]
+                conn.close()
+                return duplicates > 0
+            else:
+                conn.close()
+                return False
+
+        except Exception as e:
+            logger.error(f"Failed to check composite key migration status: {e}")
+            return False
+
+    async def _migrate_to_composite_key(self):
+        """Migrate transactions table to use composite primary key (accountId, transactionId)"""
+        from pathlib import Path
+
+        db_path = Path.home() / ".config" / "leggen" / "leggen.db"
+        if not db_path.exists():
+            logger.warning("Database file not found, skipping migration")
+            return
+
+        try:
+            conn = sqlite3.connect(str(db_path))
+            cursor = conn.cursor()
+
+            logger.info("Starting composite key migration...")
+
+            # Step 1: Create temporary table with new schema
+            logger.info("Creating temporary table with composite primary key...")
+            cursor.execute("DROP TABLE IF EXISTS transactions_temp")
+            cursor.execute("""
+                CREATE TABLE transactions_temp (
+                    accountId TEXT NOT NULL,
+                    transactionId TEXT NOT NULL,
+                    internalTransactionId TEXT,
+                    institutionId TEXT,
+                    iban TEXT,
+                    transactionDate DATETIME,
+                    description TEXT,
+                    transactionValue REAL,
+                    transactionCurrency TEXT,
+                    transactionStatus TEXT,
+                    rawTransaction JSON,
+                    PRIMARY KEY (accountId, transactionId)
+                )
+            """)
+
+            # Step 2: Insert deduplicated data (keep most recent duplicate)
+            logger.info("Inserting deduplicated data...")
+            cursor.execute("""
+                INSERT INTO transactions_temp
+                SELECT
+                    accountId,
+                    json_extract(rawTransaction, '$.transactionId') as transactionId,
+                    internalTransactionId,
+                    institutionId,
+                    iban,
+                    transactionDate,
+                    description,
+                    transactionValue,
+                    transactionCurrency,
+                    transactionStatus,
+                    rawTransaction
+                FROM (
+                    SELECT *,
+                           ROW_NUMBER() OVER (
+                               PARTITION BY accountId, json_extract(rawTransaction, '$.transactionId')
+                               ORDER BY transactionDate DESC, rowid DESC
+                           ) as rn
+                    FROM transactions
+                    WHERE json_extract(rawTransaction, '$.transactionId') IS NOT NULL
+                    AND accountId IS NOT NULL
+                ) WHERE rn = 1
+            """)
+
+            # Get counts for reporting
+            cursor.execute("SELECT COUNT(*) FROM transactions")
+            old_count = cursor.fetchone()[0]
+
+            cursor.execute("SELECT COUNT(*) FROM transactions_temp")
+            new_count = cursor.fetchone()[0]
+
+            duplicates_removed = old_count - new_count
+            logger.info(
+                f"Migration stats: {old_count} → {new_count} records ({duplicates_removed} duplicates removed)"
+            )
+
+            # Step 3: Replace tables
+            logger.info("Replacing tables...")
+            cursor.execute("ALTER TABLE transactions RENAME TO transactions_old")
+            cursor.execute("ALTER TABLE transactions_temp RENAME TO transactions")
+
+            # Step 4: Recreate indexes
+            logger.info("Recreating indexes...")
+            cursor.execute(
+                "CREATE INDEX IF NOT EXISTS idx_transactions_internal_id ON transactions(internalTransactionId)"
+            )
+            cursor.execute(
+                "CREATE INDEX IF NOT EXISTS idx_transactions_date ON transactions(transactionDate)"
+            )
+            cursor.execute(
+                "CREATE INDEX IF NOT EXISTS idx_transactions_account_date ON transactions(accountId, transactionDate)"
+            )
+            cursor.execute(
+                "CREATE INDEX IF NOT EXISTS idx_transactions_amount ON transactions(transactionValue)"
+            )
+
+            # Step 5: Cleanup
+            logger.info("Cleaning up...")
+            cursor.execute("DROP TABLE transactions_old")
+
+            conn.commit()
+            conn.close()
+
+            logger.info("Composite key migration completed successfully")
+
+        except Exception as e:
+            logger.error(f"Composite key migration failed: {e}")
+            raise
+
     def _unix_to_datetime_string(self, unix_timestamp: float) -> str:
         """Convert Unix timestamp to datetime string"""
         dt = datetime.fromtimestamp(unix_timestamp)
@@ -620,10 +786,13 @@ class DatabaseService:
             conn = sqlite3.connect(str(db_path))
             cursor = conn.cursor()
 
-            # Create the transactions table if it doesn't exist
+            # The table should already exist with the new schema from migration
+            # If it doesn't exist, create it (for new installations)
             cursor.execute(
                 """CREATE TABLE IF NOT EXISTS transactions (
-                internalTransactionId TEXT PRIMARY KEY,
+                accountId TEXT NOT NULL,
+                transactionId TEXT NOT NULL,
+                internalTransactionId TEXT,
                 institutionId TEXT,
                 iban TEXT,
                 transactionDate DATETIME,
@@ -631,15 +800,15 @@ class DatabaseService:
                 transactionValue REAL,
                 transactionCurrency TEXT,
                 transactionStatus TEXT,
-                accountId TEXT,
-                rawTransaction JSON
+                rawTransaction JSON,
+                PRIMARY KEY (accountId, transactionId)
             )"""
             )
 
-            # Create indexes for better performance
+            # Create indexes for better performance (if they don't exist)
             cursor.execute(
-                """CREATE INDEX IF NOT EXISTS idx_transactions_account_id
-                   ON transactions(accountId)"""
+                """CREATE INDEX IF NOT EXISTS idx_transactions_internal_id
+                   ON transactions(internalTransactionId)"""
             )
             cursor.execute(
                 """CREATE INDEX IF NOT EXISTS idx_transactions_date
@@ -654,8 +823,10 @@ class DatabaseService:
                    ON transactions(transactionValue)"""
             )
 
-            # Prepare an SQL statement for inserting data
-            insert_sql = """INSERT INTO transactions (
+            # Prepare an SQL statement for inserting/replacing data
+            insert_sql = """INSERT OR REPLACE INTO transactions (
+                accountId,
+                transactionId,
                 internalTransactionId,
                 institutionId,
                 iban,
@@ -664,9 +835,8 @@ class DatabaseService:
                 transactionValue,
                 transactionCurrency,
                 transactionStatus,
-                accountId,
                 rawTransaction
-            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)"""
+            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)"""
 
             new_transactions = []
 
@@ -675,7 +845,9 @@ class DatabaseService:
                     cursor.execute(
                         insert_sql,
                         (
-                            transaction["internalTransactionId"],
+                            transaction["accountId"],
+                            transaction["transactionId"],
+                            transaction.get("internalTransactionId"),
                             transaction["institutionId"],
                             transaction["iban"],
                             transaction["transactionDate"],
@@ -683,13 +855,14 @@ class DatabaseService:
                             transaction["transactionValue"],
                             transaction["transactionCurrency"],
                             transaction["transactionStatus"],
-                            transaction["accountId"],
                             json.dumps(transaction["rawTransaction"]),
                         ),
                     )
                     new_transactions.append(transaction)
-                except sqlite3.IntegrityError:
-                    # Transaction already exists
+                except sqlite3.IntegrityError as e:
+                    logger.warning(
+                        f"Failed to insert transaction {transaction.get('transactionId')}: {e}"
+                    )
                     continue
 
             conn.commit()

leggend/services/sync_service.py

@@ -55,26 +55,45 @@ class SyncService:
                         account_id
                     )
 
-                    # Persist account details to database
-                    if account_details:
-                        await self.database.persist_account_details(account_details)
-
-                    # Get and save balances
+                    # Get balances to extract currency information
                     balances = await self.gocardless.get_account_balances(account_id)
-                    if balances and account_details:
+
+                    # Enrich account details with currency and persist
+                    if account_details and balances:
+                        enriched_account_details = account_details.copy()
+
+                        # Extract currency from first balance
+                        balances_list = balances.get("balances", [])
+                        if balances_list:
+                            first_balance = balances_list[0]
+                            balance_amount = first_balance.get("balanceAmount", {})
+                            currency = balance_amount.get("currency")
+                            if currency:
+                                enriched_account_details["currency"] = currency
+
+                        # Persist enriched account details to database
+                        await self.database.persist_account_details(
+                            enriched_account_details
+                        )
+
                         # Merge account details into balances data for proper persistence
                         balances_with_account_info = balances.copy()
                         balances_with_account_info["institution_id"] = (
-                            account_details.get("institution_id")
+                            enriched_account_details.get("institution_id")
+                        )
+                        balances_with_account_info["iban"] = (
+                            enriched_account_details.get("iban")
                         )
-                        balances_with_account_info["iban"] = account_details.get("iban")
                         balances_with_account_info["account_status"] = (
-                            account_details.get("status")
+                            enriched_account_details.get("status")
                         )
                         await self.database.persist_balance(
                             account_id, balances_with_account_info
                         )
                         balances_updated += len(balances.get("balances", []))
+                    elif account_details:
+                        # Fallback: persist account details without currency if balances failed
+                        await self.database.persist_account_details(account_details)
 
                     # Get and save transactions
                     transactions = await self.gocardless.get_account_transactions(

tests/unit/test_api_transactions.py

@@ -15,6 +15,7 @@ class TestTransactionsAPI:
         """Test successful retrieval of all transactions from database."""
         mock_transactions = [
             {
+                "transactionId": "bank-txn-001",  # NEW: stable bank-provided ID
                 "internalTransactionId": "txn-001",
                 "institutionId": "REVOLUT_REVOLT21",
                 "iban": "LT313250081177977789",
@@ -24,9 +25,10 @@ class TestTransactionsAPI:
                 "transactionCurrency": "EUR",
                 "transactionStatus": "booked",
                 "accountId": "test-account-123",
-                "rawTransaction": {"some": "data"},
+                "rawTransaction": {"transactionId": "bank-txn-001", "some": "data"},
             },
             {
+                "transactionId": "bank-txn-002",  # NEW: stable bank-provided ID
                 "internalTransactionId": "txn-002",
                 "institutionId": "REVOLUT_REVOLT21",
                 "iban": "LT313250081177977789",
@@ -36,7 +38,7 @@ class TestTransactionsAPI:
                 "transactionCurrency": "EUR",
                 "transactionStatus": "booked",
                 "accountId": "test-account-123",
-                "rawTransaction": {"other": "data"},
+                "rawTransaction": {"transactionId": "bank-txn-002", "other": "data"},
             },
         ]
 
@@ -73,6 +75,7 @@ class TestTransactionsAPI:
         """Test retrieval of full transaction details from database."""
         mock_transactions = [
             {
+                "transactionId": "bank-txn-001",  # NEW: stable bank-provided ID
                 "internalTransactionId": "txn-001",
                 "institutionId": "REVOLUT_REVOLT21",
                 "iban": "LT313250081177977789",
@@ -82,7 +85,7 @@ class TestTransactionsAPI:
                 "transactionCurrency": "EUR",
                 "transactionStatus": "booked",
                 "accountId": "test-account-123",
-                "rawTransaction": {"some": "raw_data"},
+                "rawTransaction": {"transactionId": "bank-txn-001", "some": "raw_data"},
             }
         ]
 
@@ -105,6 +108,7 @@ class TestTransactionsAPI:
         assert len(data["data"]) == 1
 
         transaction = data["data"][0]
+        assert transaction["transaction_id"] == "bank-txn-001"  # NEW: check stable ID
         assert transaction["internal_transaction_id"] == "txn-001"
         assert transaction["institution_id"] == "REVOLUT_REVOLT21"
         assert transaction["iban"] == "LT313250081177977789"
@@ -116,6 +120,7 @@ class TestTransactionsAPI:
         """Test getting transactions with various filters."""
         mock_transactions = [
             {
+                "transactionId": "bank-txn-001",  # NEW: stable bank-provided ID
                 "internalTransactionId": "txn-001",
                 "institutionId": "REVOLUT_REVOLT21",
                 "iban": "LT313250081177977789",
@@ -125,7 +130,7 @@ class TestTransactionsAPI:
                 "transactionCurrency": "EUR",
                 "transactionStatus": "booked",
                 "accountId": "test-account-123",
-                "rawTransaction": {"some": "data"},
+                "rawTransaction": {"transactionId": "bank-txn-001", "some": "data"},
             }
         ]
 

tests/unit/test_database_service.py

@@ -18,6 +18,8 @@ def sample_transactions_db_format():
     """Sample transactions in database format."""
     return [
         {
+            "accountId": "test-account-123",
+            "transactionId": "txn-001",
             "internalTransactionId": "txn-001",
             "institutionId": "REVOLUT_REVOLT21",
             "iban": "LT313250081177977789",
@@ -26,10 +28,11 @@ def sample_transactions_db_format():
             "transactionValue": -10.50,
             "transactionCurrency": "EUR",
             "transactionStatus": "booked",
-            "accountId": "test-account-123",
-            "rawTransaction": {"some": "data"},
+            "rawTransaction": {"transactionId": "txn-001", "some": "data"},
         },
         {
+            "accountId": "test-account-123",
+            "transactionId": "txn-002",
             "internalTransactionId": "txn-002",
             "institutionId": "REVOLUT_REVOLT21",
             "iban": "LT313250081177977789",
@@ -38,8 +41,7 @@ def sample_transactions_db_format():
             "transactionValue": -45.30,
             "transactionCurrency": "EUR",
             "transactionStatus": "booked",
-            "accountId": "test-account-123",
-            "rawTransaction": {"other": "data"},
+            "rawTransaction": {"transactionId": "txn-002", "other": "data"},
         },
     ]
 
@@ -351,6 +353,7 @@ class TestDatabaseService:
                 "booked": [
                     {
                         "internalTransactionId": "txn-001",
+                        "transactionId": "txn-001",
                         "bookingDate": "2025-09-01",
                         "transactionAmount": {"amount": "-10.50", "currency": "EUR"},
                         "remittanceInformationUnstructured": "Coffee Shop",
@@ -359,6 +362,7 @@ class TestDatabaseService:
                 "pending": [
                     {
                         "internalTransactionId": "txn-002",
+                        "transactionId": "txn-002",
                         "bookingDate": "2025-09-02",
                         "transactionAmount": {"amount": "-25.00", "currency": "EUR"},
                         "remittanceInformationUnstructured": "Gas Station",
@@ -375,12 +379,14 @@ class TestDatabaseService:
 
         # Check booked transaction
         booked_txn = next(t for t in result if t["transactionStatus"] == "booked")
+        assert booked_txn["transactionId"] == "txn-001"
         assert booked_txn["internalTransactionId"] == "txn-001"
         assert booked_txn["transactionValue"] == -10.50
         assert booked_txn["description"] == "Coffee Shop"
 
         # Check pending transaction
         pending_txn = next(t for t in result if t["transactionStatus"] == "pending")
+        assert pending_txn["transactionId"] == "txn-002"
         assert pending_txn["internalTransactionId"] == "txn-002"
         assert pending_txn["transactionValue"] == -25.00
         assert pending_txn["description"] == "Gas Station"
@@ -416,6 +422,7 @@ class TestDatabaseService:
                 "booked": [
                     {
                         "internalTransactionId": "txn-001",
+                        "transactionId": "txn-001",
                         "bookingDate": "2025-09-01",
                         "transactionAmount": {"amount": "-10.50", "currency": "EUR"},
                         "remittanceInformationUnstructuredArray": ["Line 1", "Line 2"],