fix(frontend): Add index signature to PieDataPoint interface.

Resolves TypeScript error where PieDataPoint[] was not assignable to
ChartDataInput[] by adding the required string index signature.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/settings.local.json

@@ -0,0 +1,22 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(mkdir:*)",
+      "Bash(uv sync:*)",
+      "Bash(uv run pytest:*)",
+      "Bash(git commit:*)",
+      "Bash(ruff check:*)",
+      "Bash(git add:*)",
+      "Bash(mypy:*)",
+      "WebFetch(domain:localhost)",
+      "Bash(npm create:*)",
+      "Bash(npm install)",
+      "Bash(npm install:*)",
+      "Bash(npx tailwindcss init:*)",
+      "Bash(./node_modules/.bin/tailwindcss:*)",
+      "Bash(npm run build:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

.gitignore

@@ -164,4 +164,3 @@ sql/
 leggen.db
 *.db
 config.toml
-.claude/

.mcp.json

@@ -1,17 +0,0 @@
-{
-  "mcpServers": {
-    "shadcn": {
-      "command": "npx",
-      "args": [
-        "shadcn@latest",
-        "mcp"
-      ]
-    },
-    "browsermcp": {
-      "command": "npx",
-      "args": [
-        "@browsermcp/mcp@latest"
-      ]
-    }
-  }
-}

CHANGELOG.md

@@ -1,64 +1,4 @@
 
-## 2025.9.13 (2025/09/17)
-
-### Bug Fixes
-
-- **frontend:** Resolve linting issue in skeleton component ([fb310a59](https://github.com/elisiariocouto/leggen/commit/fb310a5953cf51d1cac181529311e76a0f4ea9ee))
-- **frontend:** Add index signature to PieDataPoint interface. ([81d7d163](https://github.com/elisiariocouto/leggen/commit/81d7d16301dafc62a95f63036819565ffb90ddb5))
-- **frontend:** Resolve dual scroll and excessive whitespace issues on transactions page. ([8ab76081](https://github.com/elisiariocouto/leggen/commit/8ab760815c9ae072b8c2cb2460e31144b193e0b3))
-- **frontend:** Remove broken running balance feature in transactions table. ([155a48d7](https://github.com/elisiariocouto/leggen/commit/155a48d7dc86b3f453ba6f8c37edf63c0b76c755))
-
-
-### Features
-
-- **frontend:** Complete shadcn migration of skeleton and styling components ([c83386b1](https://github.com/elisiariocouto/leggen/commit/c83386b1d5b165910abe8b391ca483e5b48cd35f))
-- **frontend:** Add comprehensive PWA capabilities with dynamic theme support ([86891441](https://github.com/elisiariocouto/leggen/commit/86891441d65e13757f343cabc39ccdb3ca6adc75))
-- **frontend:** Add PWA install prompts, update notifications, and app shortcuts ([3049a8cd](https://github.com/elisiariocouto/leggen/commit/3049a8cd2fa80c14f970884fb14df2ab88c418dd))
-- **frontend:** Update brand identity with new logo and color scheme. ([2825dba2](https://github.com/elisiariocouto/leggen/commit/2825dba2e944b3fe31aaa33127b770e7474ce021))
-- **frontend:** Update analytics cards to match home page design consistency. ([d9a39c30](https://github.com/elisiariocouto/leggen/commit/d9a39c30ab1248a9fdacff068d401c3daff3f6a5))
-
-
-### Miscellaneous Tasks
-
--  Enable browsermcp and shadcn MCP servers. ([5a626b53](https://github.com/elisiariocouto/leggen/commit/5a626b53947f7e2d1544faf3ee06f8a0f1fb5d7a))
-
-
-### Refactor
-
-- **frontend:** Replace LoadingSpinner with shadcn skeleton components. ([84e609a7](https://github.com/elisiariocouto/leggen/commit/84e609a774ddc0caf9f84eaf1e8cdce021c82785))
-
-
-
-## 2025.9.13 (2025/09/17)
-
-### Bug Fixes
-
-- **frontend:** Resolve linting issue in skeleton component ([fb310a59](https://github.com/elisiariocouto/leggen/commit/fb310a5953cf51d1cac181529311e76a0f4ea9ee))
-- **frontend:** Add index signature to PieDataPoint interface. ([81d7d163](https://github.com/elisiariocouto/leggen/commit/81d7d16301dafc62a95f63036819565ffb90ddb5))
-- **frontend:** Resolve dual scroll and excessive whitespace issues on transactions page. ([8ab76081](https://github.com/elisiariocouto/leggen/commit/8ab760815c9ae072b8c2cb2460e31144b193e0b3))
-- **frontend:** Remove broken running balance feature in transactions table. ([155a48d7](https://github.com/elisiariocouto/leggen/commit/155a48d7dc86b3f453ba6f8c37edf63c0b76c755))
-
-
-### Features
-
-- **frontend:** Complete shadcn migration of skeleton and styling components ([c83386b1](https://github.com/elisiariocouto/leggen/commit/c83386b1d5b165910abe8b391ca483e5b48cd35f))
-- **frontend:** Add comprehensive PWA capabilities with dynamic theme support ([86891441](https://github.com/elisiariocouto/leggen/commit/86891441d65e13757f343cabc39ccdb3ca6adc75))
-- **frontend:** Add PWA install prompts, update notifications, and app shortcuts ([3049a8cd](https://github.com/elisiariocouto/leggen/commit/3049a8cd2fa80c14f970884fb14df2ab88c418dd))
-- **frontend:** Update brand identity with new logo and color scheme. ([2825dba2](https://github.com/elisiariocouto/leggen/commit/2825dba2e944b3fe31aaa33127b770e7474ce021))
-- **frontend:** Update analytics cards to match home page design consistency. ([d9a39c30](https://github.com/elisiariocouto/leggen/commit/d9a39c30ab1248a9fdacff068d401c3daff3f6a5))
-
-
-### Miscellaneous Tasks
-
--  Enable browsermcp and shadcn MCP servers. ([5a626b53](https://github.com/elisiariocouto/leggen/commit/5a626b53947f7e2d1544faf3ee06f8a0f1fb5d7a))
-
-
-### Refactor
-
-- **frontend:** Replace LoadingSpinner with shadcn skeleton components. ([84e609a7](https://github.com/elisiariocouto/leggen/commit/84e609a774ddc0caf9f84eaf1e8cdce021c82785))
-
-
-
 ## 2025.9.12 (2025/09/15)
 
 

frontend/.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": ["Bash(find:*)"],
+    "deny": [],
+    "ask": []
+  }
+}

frontend/.gitignore

@@ -10,7 +10,6 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
-dev-dist
 *.local
 
 # Editor directories and files

frontend/eslint.config.js

@@ -6,7 +6,7 @@ import tseslint from "typescript-eslint";
 import { globalIgnores } from "eslint/config";
 
 export default tseslint.config([
-  globalIgnores(["dist", "dev-dist"]),
+  globalIgnores(["dist"]),
   {
     files: ["**/*.{ts,tsx}"],
     extends: [

frontend/index.html

@@ -2,35 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" sizes="48x48" />
-    <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Leggen</title>
-
-    <!-- PWA Meta Tags -->
-    <meta name="description" content="Personal finance management application" />
-    <meta name="application-name" content="Leggen" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
-    <meta name="apple-mobile-web-app-title" content="Leggen" />
-    <meta name="format-detection" content="telephone=no" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="msapplication-config" content="/browserconfig.xml" />
-    <meta name="msapplication-TileColor" content="#0b74de" />
-    <meta name="msapplication-tap-highlight" content="no" />
-
-    <!-- Dynamic theme-color - will be updated by JavaScript -->
-    <meta name="theme-color" content="#0b74de" id="theme-color-meta" />
-    <meta name="msapplication-navbutton-color" content="#0b74de" id="ms-theme-color-meta" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="default" id="apple-status-bar-meta" />
-
-    <!-- Icons -->
-    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
-    <link rel="mask-icon" href="/favicon.svg" color="#0b74de" />
-    <link rel="shortcut icon" href="/favicon.ico" />
-
-    <!-- Manifest -->
-    <link rel="manifest" href="/manifest.webmanifest" />
   </head>
   <body>
     <div id="root"></div>

frontend/package.json

@@ -42,16 +42,13 @@
     "@tanstack/router-vite-plugin": "^1.131.36",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
-    "@vite-pwa/assets-generator": "^1.0.1",
     "@vitejs/plugin-react": "^5.0.0",
     "eslint": "^9.33.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
-    "sharp": "^0.34.3",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.2",
-    "vite-plugin-pwa": "^1.0.3"
+    "vite": "^7.1.2"
   }
 }

frontend/public/browserconfig.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-  <msapplication>
-    <tile>
-      <square150x150logo src="/pwa-192x192.png"/>
-      <TileColor>#3B82F6</TileColor>
-    </tile>
-  </msapplication>
-</browserconfig>

frontend/public/favicon.svg

@@ -1,27 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="32" height="32"
-     viewBox="0 0 32 32"
-     role="img" aria-labelledby="title desc">
-  <title id="title">leggen — stylized italic L</title>
-  <desc id="desc">Square gradient background with italic white L.</desc>
-
-  <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0%" stop-color="#0b74de"/>
-      <stop offset="100%" stop-color="#06b6d4"/>
-    </linearGradient>
-  </defs>
-
-  <!-- Square background -->
-  <rect width="32" height="32" fill="url(#bg)" rx="4"/>
-
-  <!-- Italic L -->
-  <text x="11" y="22"
-        font-family="Inter, Roboto, Arial, sans-serif"
-        font-weight="700"
-        font-size="20"
-        font-style="italic"
-        fill="#fff">
-    L
-  </text>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <rect width="32" height="32" rx="6" fill="#3B82F6"/>
+  <path d="M8 24V8h6c2.2 0 4 1.8 4 4v4c0 2.2-1.8 4-4 4H12v4H8zm4-8h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2v4z" fill="white"/>
 </svg>

frontend/public/robots.txt

@@ -1,4 +0,0 @@
-User-agent: *
-Allow: /
-
-Sitemap: /sitemap.xml

frontend/pwa-assets.config.json

@@ -1,4 +0,0 @@
-{
-  "preset": "minimal-2023",
-  "images": ["public/favicon.svg"]
-}

frontend/src/components/PWAPrompts.tsx

@@ -1,156 +0,0 @@
-import { useEffect, useState } from "react";
-import { X, Download, RotateCcw } from "lucide-react";
-
-interface BeforeInstallPromptEvent extends Event {
-  prompt(): Promise<void>;
-  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
-}
-
-interface PWAPromptProps {
-  onInstall?: () => void;
-}
-
-export function PWAInstallPrompt({ onInstall }: PWAPromptProps) {
-  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
-  const [showPrompt, setShowPrompt] = useState(false);
-
-  useEffect(() => {
-    const handler = (e: Event) => {
-      // Prevent the mini-infobar from appearing on mobile
-      e.preventDefault();
-      setDeferredPrompt(e as BeforeInstallPromptEvent);
-      setShowPrompt(true);
-    };
-
-    window.addEventListener("beforeinstallprompt", handler);
-
-    return () => window.removeEventListener("beforeinstallprompt", handler);
-  }, []);
-
-  const handleInstall = async () => {
-    if (!deferredPrompt) return;
-
-    try {
-      await deferredPrompt.prompt();
-      const { outcome } = await deferredPrompt.userChoice;
-      
-      if (outcome === "accepted") {
-        onInstall?.();
-      }
-      
-      setDeferredPrompt(null);
-      setShowPrompt(false);
-    } catch (error) {
-      console.error("Error installing PWA:", error);
-    }
-  };
-
-  const handleDismiss = () => {
-    setShowPrompt(false);
-    setDeferredPrompt(null);
-  };
-
-  if (!showPrompt || !deferredPrompt) return null;
-
-  return (
-    <div className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:max-w-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-4 z-50">
-      <div className="flex items-start gap-3">
-        <div className="flex-shrink-0">
-          <Download className="h-5 w-5 text-blue-600 dark:text-blue-400" />
-        </div>
-        <div className="flex-1 min-w-0">
-          <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
-            Install Leggen
-          </p>
-          <p className="text-sm text-gray-500 dark:text-gray-400">
-            Add to your home screen for quick access
-          </p>
-        </div>
-        <button
-          onClick={handleDismiss}
-          className="flex-shrink-0 text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
-        >
-          <X className="h-4 w-4" />
-        </button>
-      </div>
-      <div className="mt-3 flex gap-2">
-        <button
-          onClick={handleInstall}
-          className="flex-1 bg-blue-600 text-white text-sm font-medium px-3 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          Install
-        </button>
-        <button
-          onClick={handleDismiss}
-          className="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100"
-        >
-          Not now
-        </button>
-      </div>
-    </div>
-  );
-}
-
-interface PWAUpdatePromptProps {
-  updateAvailable: boolean;
-  onUpdate: () => void;
-}
-
-export function PWAUpdatePrompt({ updateAvailable, onUpdate }: PWAUpdatePromptProps) {
-  const [showPrompt, setShowPrompt] = useState(false);
-
-  useEffect(() => {
-    if (updateAvailable) {
-      setShowPrompt(true);
-    }
-  }, [updateAvailable]);
-
-  const handleUpdate = () => {
-    onUpdate();
-    setShowPrompt(false);
-  };
-
-  const handleDismiss = () => {
-    setShowPrompt(false);
-  };
-
-  if (!showPrompt || !updateAvailable) return null;
-
-  return (
-    <div className="fixed top-4 left-4 right-4 md:left-auto md:right-4 md:max-w-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-4 z-50">
-      <div className="flex items-start gap-3">
-        <div className="flex-shrink-0">
-          <RotateCcw className="h-5 w-5 text-green-600 dark:text-green-400" />
-        </div>
-        <div className="flex-1 min-w-0">
-          <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
-            Update Available
-          </p>
-          <p className="text-sm text-gray-500 dark:text-gray-400">
-            A new version of Leggen is ready to install
-          </p>
-        </div>
-        <button
-          onClick={handleDismiss}
-          className="flex-shrink-0 text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
-        >
-          <X className="h-4 w-4" />
-        </button>
-      </div>
-      <div className="mt-3 flex gap-2">
-        <button
-          onClick={handleUpdate}
-          className="flex-1 bg-green-600 text-white text-sm font-medium px-3 py-2 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500"
-        >
-          Update Now
-        </button>
-        <button
-          onClick={handleDismiss}
-          className="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100"
-        >
-          Later
-        </button>
-      </div>
-    </div>
-  );
-}

frontend/src/components/Sidebar.tsx

@@ -1,5 +1,6 @@
 import { Link, useLocation } from "@tanstack/react-router";
 import {
+  CreditCard,
   Home,
   List,
   BarChart3,
@@ -7,7 +8,6 @@ import {
   TrendingUp,
   X,
 } from "lucide-react";
-import { Logo } from "./ui/logo";
 import { useQuery } from "@tanstack/react-query";
 import { apiClient } from "../lib/api";
 import { formatCurrency } from "../lib/utils";
@@ -53,7 +53,7 @@ export default function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps) {
           onClick={() => setSidebarOpen(false)}
           className="flex items-center space-x-2 hover:opacity-80 transition-opacity"
         >
-          <Logo size={32} />
+          <CreditCard className="h-8 w-8 text-primary" />
           <h1 className="text-xl font-bold text-card-foreground">Leggen</h1>
         </Link>
         <button

frontend/src/components/TransactionsTable.tsx

@@ -31,7 +31,7 @@ import { DataTablePagination } from "./ui/data-table-pagination";
 import { Card, CardContent } from "./ui/card";
 import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
 import { Button } from "./ui/button";
-import type { Account, Transaction, ApiResponse } from "../types/api";
+import type { Account, Transaction, ApiResponse, Balance } from "../types/api";
 
 export default function TransactionsTable() {
   // Filter state consolidated into a single object
@@ -47,6 +47,7 @@ export default function TransactionsTable() {
   const [showRawModal, setShowRawModal] = useState(false);
   const [selectedTransaction, setSelectedTransaction] =
     useState<Transaction | null>(null);
+  const [showRunningBalance, setShowRunningBalance] = useState(true);
 
   // Pagination state
   const [currentPage, setCurrentPage] = useState(1);
@@ -101,6 +102,11 @@ export default function TransactionsTable() {
     queryFn: apiClient.getAccounts,
   });
 
+  const { data: balances } = useQuery<Balance[]>({
+    queryKey: ["balances"],
+    queryFn: apiClient.getBalances,
+    enabled: showRunningBalance,
+  });
 
   const {
     data: transactionsResponse,
@@ -179,6 +185,53 @@ export default function TransactionsTable() {
     filterState.minAmount ||
     filterState.maxAmount;
 
+  // Calculate running balances
+  const calculateRunningBalances = (transactions: Transaction[]) => {
+    if (!balances || !showRunningBalance) return {};
+
+    const runningBalances: { [key: string]: number } = {};
+    const accountBalanceMap = new Map<string, number>();
+
+    // Create a map of account current balances
+    balances.forEach((balance) => {
+      if (balance.balance_type === "expected") {
+        accountBalanceMap.set(balance.account_id, balance.balance_amount);
+      }
+    });
+
+    // Group transactions by account
+    const transactionsByAccount = new Map<string, Transaction[]>();
+    transactions.forEach((txn) => {
+      if (!transactionsByAccount.has(txn.account_id)) {
+        transactionsByAccount.set(txn.account_id, []);
+      }
+      transactionsByAccount.get(txn.account_id)!.push(txn);
+    });
+
+    // Calculate running balance for each account
+    transactionsByAccount.forEach((accountTransactions, accountId) => {
+      const currentBalance = accountBalanceMap.get(accountId) || 0;
+      let runningBalance = currentBalance;
+
+      // Sort transactions by date (newest first) to work backwards
+      const sortedTransactions = [...accountTransactions].sort(
+        (a, b) =>
+          new Date(b.transaction_date).getTime() -
+          new Date(a.transaction_date).getTime(),
+      );
+
+      // Calculate running balance by working backwards from current balance
+      sortedTransactions.forEach((txn) => {
+        runningBalances[`${txn.account_id}-${txn.transaction_id}`] =
+          runningBalance;
+        runningBalance -= txn.transaction_value;
+      });
+    });
+
+    return runningBalances;
+  };
+
+  const runningBalances = calculateRunningBalances(transactions);
 
   // Define columns
   const columns: ColumnDef<Transaction>[] = [
@@ -255,6 +308,29 @@ export default function TransactionsTable() {
       },
       sortingFn: "basic",
     },
+    ...(showRunningBalance
+      ? [
+          {
+            id: "running_balance",
+            header: "Running Balance",
+            cell: ({ row }: { row: { original: Transaction } }) => {
+              const transaction = row.original;
+              const balanceKey = `${transaction.account_id}-${transaction.transaction_id}`;
+              const balance = runningBalances[balanceKey];
+
+              if (balance === undefined) return null;
+
+              return (
+                <div className="text-right">
+                  <p className="text-sm font-medium text-foreground">
+                    {formatCurrency(balance, transaction.transaction_currency)}
+                  </p>
+                </div>
+              );
+            },
+          },
+        ]
+      : []),
     {
       accessorKey: "transaction_date",
       header: "Date",
@@ -362,7 +438,7 @@ export default function TransactionsTable() {
   }
 
   return (
-    <div className="space-y-6 max-w-full">
+    <div className="space-y-6">
       {/* New FilterBar */}
       <FilterBar
         filterState={filterState}
@@ -370,6 +446,10 @@ export default function TransactionsTable() {
         onClearFilters={handleClearFilters}
         accounts={accounts}
         isSearchLoading={isSearchLoading}
+        showRunningBalance={showRunningBalance}
+        onToggleRunningBalance={() =>
+          setShowRunningBalance(!showRunningBalance)
+        }
       />
 
       {/* Results Summary */}
@@ -405,91 +485,93 @@ export default function TransactionsTable() {
       </Card>
 
       {/* Responsive Table/Cards */}
-      <Card>
+      <Card className="overflow-hidden">
         {/* Desktop Table View (hidden on mobile) */}
         <div className="hidden md:block">
-          <table className="min-w-full divide-y divide-border">
-            <thead className="bg-muted/50">
-              {table.getHeaderGroups().map((headerGroup) => (
-                <tr key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => (
-                    <th
-                      key={header.id}
-                      className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider cursor-pointer hover:bg-muted"
-                      onClick={header.column.getToggleSortingHandler()}
-                    >
-                      <div className="flex items-center space-x-1">
-                        <span>
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(
-                                header.column.columnDef.header,
-                                header.getContext(),
-                              )}
-                        </span>
-                        {header.column.getCanSort() && (
-                          <div className="flex flex-col">
-                            <ChevronUp
-                              className={`h-3 w-3 ${
-                                header.column.getIsSorted() === "asc"
-                                  ? "text-primary"
-                                  : "text-muted-foreground"
-                              }`}
-                            />
-                            <ChevronDown
-                              className={`h-3 w-3 -mt-1 ${
-                                header.column.getIsSorted() === "desc"
-                                  ? "text-primary"
-                                  : "text-muted-foreground"
-                              }`}
-                            />
-                          </div>
-                        )}
-                      </div>
-                    </th>
-                  ))}
-                </tr>
-              ))}
-            </thead>
-            <tbody className="bg-card divide-y divide-border">
-              {table.getRowModel().rows.length === 0 ? (
-                <tr>
-                  <td
-                    colSpan={columns.length}
-                    className="px-6 py-12 text-center"
-                  >
-                    <div className="text-muted-foreground mb-4">
-                      <TrendingUp className="h-12 w-12 mx-auto" />
-                    </div>
-                    <h3 className="text-lg font-medium text-foreground mb-2">
-                      No transactions found
-                    </h3>
-                    <p className="text-muted-foreground">
-                      {hasActiveFilters
-                        ? "Try adjusting your filters to see more results."
-                        : "No transactions are available for the selected criteria."}
-                    </p>
-                  </td>
-                </tr>
-              ) : (
-                table.getRowModel().rows.map((row) => (
-                  <tr key={row.id} className="hover:bg-muted/50">
-                    {row.getVisibleCells().map((cell) => (
-                      <td
-                        key={cell.id}
-                        className="px-6 py-4 whitespace-nowrap"
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-border">
+              <thead className="bg-muted/50">
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <tr key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => (
+                      <th
+                        key={header.id}
+                        className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider cursor-pointer hover:bg-muted"
+                        onClick={header.column.getToggleSortingHandler()}
                       >
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
-                      </td>
+                        <div className="flex items-center space-x-1">
+                          <span>
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext(),
+                                )}
+                          </span>
+                          {header.column.getCanSort() && (
+                            <div className="flex flex-col">
+                              <ChevronUp
+                                className={`h-3 w-3 ${
+                                  header.column.getIsSorted() === "asc"
+                                    ? "text-primary"
+                                    : "text-muted-foreground"
+                                }`}
+                              />
+                              <ChevronDown
+                                className={`h-3 w-3 -mt-1 ${
+                                  header.column.getIsSorted() === "desc"
+                                    ? "text-primary"
+                                    : "text-muted-foreground"
+                                }`}
+                              />
+                            </div>
+                          )}
+                        </div>
+                      </th>
                     ))}
                   </tr>
-                ))
-              )}
-            </tbody>
-          </table>
+                ))}
+              </thead>
+              <tbody className="bg-card divide-y divide-border">
+                {table.getRowModel().rows.length === 0 ? (
+                  <tr>
+                    <td
+                      colSpan={columns.length}
+                      className="px-6 py-12 text-center"
+                    >
+                      <div className="text-muted-foreground mb-4">
+                        <TrendingUp className="h-12 w-12 mx-auto" />
+                      </div>
+                      <h3 className="text-lg font-medium text-foreground mb-2">
+                        No transactions found
+                      </h3>
+                      <p className="text-muted-foreground">
+                        {hasActiveFilters
+                          ? "Try adjusting your filters to see more results."
+                          : "No transactions are available for the selected criteria."}
+                      </p>
+                    </td>
+                  </tr>
+                ) : (
+                  table.getRowModel().rows.map((row) => (
+                    <tr key={row.id} className="hover:bg-muted/50">
+                      {row.getVisibleCells().map((cell) => (
+                        <td
+                          key={cell.id}
+                          className="px-6 py-4 whitespace-nowrap"
+                        >
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </td>
+                      ))}
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
         </div>
 
         {/* Mobile Card View (visible only on mobile) */}
@@ -589,6 +671,17 @@ export default function TransactionsTable() {
                             transaction.transaction_currency,
                           )}
                         </p>
+                        {showRunningBalance && (
+                          <p className="text-xs text-muted-foreground mb-1">
+                            Balance:{" "}
+                            {formatCurrency(
+                              runningBalances[
+                                `${transaction.account_id}-${transaction.transaction_id}`
+                              ] || 0,
+                              transaction.transaction_currency,
+                            )}
+                          </p>
+                        )}
                         <button
                           onClick={() => handleViewRaw(transaction)}
                           className="inline-flex items-center px-2 py-1 text-xs bg-muted text-muted-foreground rounded hover:bg-accent transition-colors"

frontend/src/components/analytics/StatCard.tsx

@@ -12,7 +12,6 @@ interface StatCardProps {
     isPositive: boolean;
   };
   className?: string;
-  iconColor?: "green" | "blue" | "red" | "purple" | "orange" | "default";
 }
 
 export default function StatCard({
@@ -22,58 +21,43 @@ export default function StatCard({
   icon: Icon,
   trend,
   className,
-  iconColor = "default",
 }: StatCardProps) {
   return (
     <Card className={cn(className)}>
       <CardContent className="p-6">
-        <div className="flex items-center justify-between">
-          <div>
-            <p className="text-sm font-medium text-muted-foreground">
-              {title}
-            </p>
-            <div className="flex items-baseline">
-              <p className="text-2xl font-bold text-foreground">
-                {value}
-              </p>
-              {trend && (
-                <div
-                  className={cn(
-                    "ml-2 flex items-baseline text-sm font-semibold",
-                    trend.isPositive
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400",
-                  )}
-                >
-                  {trend.isPositive ? "+" : ""}
-                  {trend.value}%
-                </div>
-              )}
-            </div>
-            {subtitle && (
-              <p className="text-sm text-muted-foreground mt-1">
-                {subtitle}
-              </p>
-            )}
+        <div className="flex items-center">
+          <div className="flex-shrink-0">
+            <Icon className="h-8 w-8 text-primary" />
           </div>
-          <div className={cn(
-            "p-3 rounded-full",
-            iconColor === "green" && "bg-green-100 dark:bg-green-900/20",
-            iconColor === "blue" && "bg-blue-100 dark:bg-blue-900/20",
-            iconColor === "red" && "bg-red-100 dark:bg-red-900/20",
-            iconColor === "purple" && "bg-purple-100 dark:bg-purple-900/20",
-            iconColor === "orange" && "bg-orange-100 dark:bg-orange-900/20",
-            iconColor === "default" && "bg-muted"
-          )}>
-            <Icon className={cn(
-              "h-6 w-6",
-              iconColor === "green" && "text-green-600",
-              iconColor === "blue" && "text-blue-600",
-              iconColor === "red" && "text-red-600",
-              iconColor === "purple" && "text-purple-600",
-              iconColor === "orange" && "text-orange-600",
-              iconColor === "default" && "text-muted-foreground"
-            )} />
+          <div className="ml-5 w-0 flex-1">
+            <dl>
+              <dt className="text-sm font-medium text-muted-foreground truncate">
+                {title}
+              </dt>
+              <dd className="flex items-baseline">
+                <div className="text-2xl font-semibold text-foreground">
+                  {value}
+                </div>
+                {trend && (
+                  <div
+                    className={cn(
+                      "ml-2 flex items-baseline text-sm font-semibold",
+                      trend.isPositive
+                        ? "text-green-600 dark:text-green-400"
+                        : "text-red-600 dark:text-red-400",
+                    )}
+                  >
+                    {trend.isPositive ? "+" : ""}
+                    {trend.value}%
+                  </div>
+                )}
+              </dd>
+              {subtitle && (
+                <dd className="text-sm text-muted-foreground mt-1">
+                  {subtitle}
+                </dd>
+              )}
+            </dl>
           </div>
         </div>
       </CardContent>

frontend/src/components/filters/FilterBar.tsx

@@ -23,6 +23,8 @@ export interface FilterBarProps {
   onClearFilters: () => void;
   accounts?: Account[];
   isSearchLoading?: boolean;
+  showRunningBalance: boolean;
+  onToggleRunningBalance: () => void;
   className?: string;
 }
 
@@ -32,6 +34,8 @@ export function FilterBar({
   onClearFilters,
   accounts,
   isSearchLoading = false,
+  showRunningBalance,
+  onToggleRunningBalance,
   className,
 }: FilterBarProps) {
   const hasActiveFilters =
@@ -55,6 +59,13 @@ export function FilterBar({
           <h3 className="text-lg font-semibold text-card-foreground">
             Transactions
           </h3>
+          <Button
+            onClick={onToggleRunningBalance}
+            variant={showRunningBalance ? "default" : "outline"}
+            size="sm"
+          >
+            Balance
+          </Button>
         </div>
 
         {/* Primary Filters Row */}

frontend/src/components/ui/logo.tsx

@@ -1,44 +0,0 @@
-interface LogoProps {
-  className?: string;
-  size?: number;
-}
-
-export function Logo({ className = "", size = 32 }: LogoProps) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 32 32"
-      className={className}
-      role="img"
-      aria-labelledby="logo-title logo-desc"
-    >
-      <title id="logo-title">leggen — stylized italic L</title>
-      <desc id="logo-desc">Square gradient background with italic white L.</desc>
-
-      <defs>
-        <linearGradient id="logo-bg" x1="0" y1="0" x2="1" y2="1">
-          <stop offset="0%" stopColor="#0b74de" />
-          <stop offset="100%" stopColor="#06b6d4" />
-        </linearGradient>
-      </defs>
-
-      {/* Square background */}
-      <rect width="32" height="32" fill="url(#logo-bg)" rx="4" />
-
-      {/* Italic L */}
-      <text
-        x="11"
-        y="22"
-        fontFamily="Inter, Roboto, Arial, sans-serif"
-        fontWeight="700"
-        fontSize="20"
-        fontStyle="italic"
-        fill="#fff"
-      >
-        L
-      </text>
-    </svg>
-  );
-}

frontend/src/contexts/ThemeContext.tsx

@@ -10,12 +10,6 @@ interface ThemeContextType {
 
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
-// Theme colors for different modes
-const THEME_COLORS = {
-  light: "#0b74de", // Primary brand color
-  dark: "#0f0f23", // Dark background color that matches typical dark themes
-} as const;
-
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
   const [theme, setTheme] = useState<Theme>(() => {
     const stored = localStorage.getItem("theme") as Theme;
@@ -46,28 +40,6 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
 
       // Add resolved theme class
       root.classList.add(resolvedTheme);
-
-      // Update theme-color meta tags for PWA status bar
-      const themeColor = THEME_COLORS[resolvedTheme];
-
-      // Update theme-color meta tag
-      const themeColorMeta = document.getElementById("theme-color-meta") as HTMLMetaElement;
-      if (themeColorMeta) {
-        themeColorMeta.content = themeColor;
-      }
-
-      // Update Microsoft tile color
-      const msThemeColorMeta = document.getElementById("ms-theme-color-meta") as HTMLMetaElement;
-      if (msThemeColorMeta) {
-        msThemeColorMeta.content = themeColor;
-      }
-
-      // Update Apple status bar style for better iOS integration
-      const appleStatusBarMeta = document.getElementById("apple-status-bar-meta") as HTMLMetaElement;
-      if (appleStatusBarMeta) {
-        // Use 'black-translucent' for dark theme, 'default' for light theme
-        appleStatusBarMeta.content = resolvedTheme === "dark" ? "black-translucent" : "default";
-      }
     };
 
     updateActualTheme();

frontend/src/hooks/usePWA.ts

@@ -1,37 +0,0 @@
-import { useEffect, useState } from "react";
-
-interface PWAUpdate {
-  updateAvailable: boolean;
-  updateSW: () => Promise<void>;
-}
-
-export function usePWA(): PWAUpdate {
-  const [updateAvailable, setUpdateAvailable] = useState(false);
-  const [updateSW, setUpdateSW] = useState<() => Promise<void>>(() => async () => {});
-
-  useEffect(() => {
-    // Check if SW registration is available
-    if ("serviceWorker" in navigator) {
-      // Import the registerSW function
-      import("virtual:pwa-register").then(({ registerSW }) => {
-        const updateSWFunction = registerSW({
-          onNeedRefresh() {
-            setUpdateAvailable(true);
-            setUpdateSW(() => updateSWFunction);
-          },
-          onOfflineReady() {
-            console.log("App ready to work offline");
-          },
-        });
-      }).catch(() => {
-        // PWA not available in development mode or when disabled
-        console.log("PWA registration not available");
-      });
-    }
-  }, []);
-
-  return {
-    updateAvailable,
-    updateSW,
-  };
-}

frontend/src/index.css

@@ -10,10 +10,10 @@
     --card-foreground: 222.2 84% 4.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
-    --primary: 219 91% 46%;
+    --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
-    --secondary: 189 94% 43%;
-    --secondary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
     --accent: 210 40% 96.1%;
@@ -37,9 +37,9 @@
     --card-foreground: 210 40% 98%;
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
-    --primary: 219 91% 46%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 189 94% 43%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;

frontend/src/routes/__root.tsx

@@ -2,28 +2,12 @@ import { createRootRoute, Outlet } from "@tanstack/react-router";
 import { useState } from "react";
 import Sidebar from "../components/Sidebar";
 import Header from "../components/Header";
-import { PWAInstallPrompt, PWAUpdatePrompt } from "../components/PWAPrompts";
-import { usePWA } from "../hooks/usePWA";
 
 function RootLayout() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const { updateAvailable, updateSW } = usePWA();
-
-  const handlePWAInstall = () => {
-    console.log("PWA installed successfully");
-  };
-
-  const handlePWAUpdate = async () => {
-    try {
-      await updateSW();
-      console.log("PWA updated successfully");
-    } catch (error) {
-      console.error("Error updating PWA:", error);
-    }
-  };
 
   return (
-    <div className="flex min-h-screen bg-background">
+    <div className="flex h-screen bg-background">
       <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
 
       {/* Mobile overlay */}
@@ -34,19 +18,12 @@ function RootLayout() {
         />
       )}
 
-      <div className="flex flex-col flex-1">
+      <div className="flex flex-col flex-1 overflow-hidden">
         <Header setSidebarOpen={setSidebarOpen} />
-        <main className="flex-1 p-6">
+        <main className="flex-1 overflow-y-auto p-6">
           <Outlet />
         </main>
       </div>
-
-      {/* PWA Prompts */}
-      <PWAInstallPrompt onInstall={handlePWAInstall} />
-      <PWAUpdatePrompt
-        updateAvailable={updateAvailable}
-        onUpdate={handlePWAUpdate}
-      />
     </div>
   );
 }

frontend/src/routes/analytics.tsx

@@ -80,21 +80,20 @@ function AnalyticsDashboard() {
           value={stats?.total_transactions || 0}
           subtitle={`Last ${stats?.period_days || 0} days`}
           icon={Activity}
-          iconColor="blue"
         />
         <StatCard
           title="Total Income"
           value={`€${(stats?.total_income || 0).toLocaleString()}`}
           subtitle="Inflows this period"
           icon={TrendingUp}
-          iconColor="green"
+          className="border-green-200"
         />
         <StatCard
           title="Total Expenses"
           value={`€${(stats?.total_expenses || 0).toLocaleString()}`}
           subtitle="Outflows this period"
           icon={TrendingDown}
-          iconColor="red"
+          className="border-red-200"
         />
       </div>
 
@@ -105,21 +104,23 @@ function AnalyticsDashboard() {
           value={`€${(stats?.net_change || 0).toLocaleString()}`}
           subtitle="Income minus expenses"
           icon={CreditCard}
-          iconColor={(stats?.net_change || 0) >= 0 ? "green" : "red"}
+          className={
+            (stats?.net_change || 0) >= 0
+              ? "border-green-200"
+              : "border-red-200"
+          }
         />
         <StatCard
           title="Average Transaction"
           value={`€${Math.abs(stats?.average_transaction || 0).toLocaleString()}`}
           subtitle="Per transaction"
           icon={Activity}
-          iconColor="purple"
         />
         <StatCard
           title="Active Accounts"
           value={stats?.accounts_included || 0}
           subtitle="With recent activity"
           icon={Users}
-          iconColor="orange"
         />
       </div>
 

frontend/src/vite-env.d.ts

@@ -1,2 +1 @@
 /// <reference types="vite/client" />
-/// <reference types="vite-plugin-pwa/client" />

frontend/vite.config.ts

@@ -1,88 +1,10 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { TanStackRouterVite } from "@tanstack/router-vite-plugin";
-import { VitePWA } from "vite-plugin-pwa";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [
-    TanStackRouterVite(),
-    react(),
-    VitePWA({
-      registerType: "autoUpdate",
-      includeAssets: ["favicon.ico", "apple-touch-icon-180x180.png", "maskable-icon-512x512.png", "robots.txt"],
-      manifest: {
-        name: "Leggen",
-        short_name: "Leggen",
-        description: "Personal finance management application",
-        theme_color: "#0b74de",
-        background_color: "#ffffff",
-        display: "standalone",
-        orientation: "portrait",
-        scope: "/",
-        start_url: "/",
-        categories: ["finance", "productivity"],
-        shortcuts: [
-          {
-            name: "Transactions",
-            short_name: "Transactions",
-            description: "View and manage transactions",
-            url: "/transactions",
-            icons: [{ src: "/pwa-192x192.png", sizes: "192x192" }]
-          },
-          {
-            name: "Analytics",
-            short_name: "Analytics",
-            description: "View financial analytics",
-            url: "/analytics",
-            icons: [{ src: "/pwa-192x192.png", sizes: "192x192" }]
-          }
-        ],
-        icons: [
-          {
-            src: "pwa-64x64.png",
-            sizes: "64x64",
-            type: "image/png"
-          },
-          {
-            src: "pwa-192x192.png",
-            sizes: "192x192",
-            type: "image/png"
-          },
-          {
-            src: "pwa-512x512.png",
-            sizes: "512x512",
-            type: "image/png"
-          },
-          {
-            src: "maskable-icon-512x512.png",
-            sizes: "512x512",
-            type: "image/png",
-            purpose: "maskable"
-          }
-        ],
-      },
-      workbox: {
-        globPatterns: ["**/*.{js,css,html,ico,png,svg}"],
-        runtimeCaching: [
-          {
-            urlPattern: /^https:\/\/.*\/api\//,
-            handler: "NetworkFirst",
-            options: {
-              cacheName: "api-cache",
-              networkTimeoutSeconds: 10,
-              cacheableResponse: {
-                statuses: [0, 200],
-              },
-            },
-          },
-        ],
-      },
-      devOptions: {
-        enabled: true,
-      },
-    }),
-  ],
+  plugins: [TanStackRouterVite(), react()],
   resolve: {
     alias: {
       "@": "/src",

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "leggen"
-version = "2025.9.13"
+version = "2025.9.12"
 description = "An Open Banking CLI"
 authors = [{ name = "Elisiário Couto", email = "elisiario@couto.io" }]
 requires-python = "~=3.13.0"

uv.lock

@@ -220,7 +220,7 @@ wheels = [
 
 [[package]]
 name = "leggen"
-version = "2025.9.13"
+version = "2025.9.12"
 source = { editable = "." }
 dependencies = [
     { name = "apscheduler" },