fix(frontend): Correct running balance calculation in transactions table

Co-authored-by: elisiariocouto <818914+elisiariocouto@users.noreply.github.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": []
+  }
+}

.github/workflows/ci.yml

@@ -2,56 +2,54 @@ name: CI
 
 on:
   push:
-    branches: ["main", "dev"]
+    branches: [ "main", "dev" ]
   pull_request:
-    branches: ["main", "dev"]
+    branches: [ "main", "dev" ]
 
 jobs:
   test-python:
     name: Test Python
     runs-on: ubuntu-latest
-    if: "!contains(github.event.head_commit.message, 'chore(ci): Bump version to')"
     steps:
       - uses: actions/checkout@v4
-
+      
       - name: Install uv
         uses: astral-sh/setup-uv@v5
-
+        
       - name: Set up Python
         uses: actions/setup-python@v5
         with:
           python-version-file: "pyproject.toml"
-
+          
       - name: Create config directory for tests
         run: |
           mkdir -p ~/.config/leggen
           cp config.example.toml ~/.config/leggen/config.toml
-
+          
       - name: Run Python tests
         run: uv run pytest
 
   test-frontend:
     name: Test Frontend
     runs-on: ubuntu-latest
-    if: "!contains(github.event.head_commit.message, 'chore(ci): Bump version to')"
     defaults:
       run:
         working-directory: ./frontend
     steps:
       - uses: actions/checkout@v4
-
+      
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
-          cache: "npm"
+          node-version: '20'
+          cache: 'npm'
           cache-dependency-path: frontend/package-lock.json
-
+          
       - name: Install dependencies
         run: npm install
-
+        
       - name: Run lint
         run: npm run lint
-
+        
       - name: Run build
-        run: npm run build
+        run: npm run build

.github/workflows/release.yml

@@ -143,21 +143,24 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-
+          
+      - name: Install git-cliff
+        run: |
+          wget -qO- https://github.com/orhun/git-cliff/releases/latest/download/git-cliff-2.10.0-x86_64-unknown-linux-gnu.tar.gz | tar xz
+          sudo mv git-cliff-*/git-cliff /usr/local/bin/
+          
       - name: Generate release notes
-        uses: orhun/git-cliff-action@v4
         id: release_notes
-        with:
-          config: cliff.toml
-          args: --current
-        env:
-          GITHUB_REPO: ${{ github.repository }}
-
+        run: |
+          echo "notes<<EOF" >> $GITHUB_OUTPUT
+          git-cliff --current >> $GITHUB_OUTPUT
+          echo "EOF" >> $GITHUB_OUTPUT
+          
       - name: Create Release
         uses: softprops/action-gh-release@v2
         with:
           tag_name: ${{ github.ref_name }}
           name: Release ${{ github.ref_name }}
-          body: ${{ steps.release_notes.outputs.content }}
+          body: ${{ steps.release_notes.outputs.notes }}
           draft: false
           prerelease: false

.gitignore

@@ -164,5 +164,3 @@ sql/
 leggen.db
 *.db
 config.toml
-.claude/
-.playwright-mcp/

.mcp.json

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

AGENTS.md

@@ -81,34 +81,10 @@ The command outputs instructions for setting the required environment variable t
 - **Naming**: PascalCase for components, camelCase for variables/functions
 - **Types**: Use `import type` for type-only imports, define interfaces/types
 - **Styling**: Tailwind CSS with `clsx` utility for conditional classes
-- **UI Components**: shadcn/ui components for consistent design system
 - **Icons**: lucide-react with consistent naming
 - **Data fetching**: @tanstack/react-query with proper error handling
 - **Components**: Functional components with hooks, proper TypeScript typing
 
-## Frontend Structure
-
-### Layout Architecture
-- **Root Layout**: `frontend/src/routes/__root.tsx` - Contains main app structure with Sidebar and Header
-- **Header/Navbar**: `frontend/src/components/Header.tsx` - Top navigation bar (sticky on mobile only)
-- **Sidebar**: `frontend/src/components/Sidebar.tsx` - Left navigation sidebar
-- **Routes**: `frontend/src/routes/` - TanStack Router file-based routing
-
-### Key Components Location
-- **UI Components**: `frontend/src/components/ui/` - shadcn/ui components and reusable UI primitives
-- **Feature Components**: `frontend/src/components/` - Main app components
-- **Pages**: `frontend/src/routes/` - Route components (index.tsx, transactions.tsx, etc.)
-- **Hooks**: `frontend/src/hooks/` - Custom React hooks
-- **API**: `frontend/src/lib/api.ts` - API client configuration
-- **Context**: `frontend/src/contexts/` - React contexts (ThemeContext, etc.)
-
-### Routing Structure
-- `/` - Overview/Dashboard (TransactionsTable component)
-- `/transactions` - Transactions page
-- `/analytics` - Analytics page
-- `/notifications` - Notifications page
-- `/settings` - Settings page
-
 ### General
 - **Formatting**: ruff for Python, ESLint for TypeScript
 - **Commits**: Use conventional commits with optional scopes, run pre-commit hooks before pushing
@@ -122,20 +98,9 @@ The command outputs instructions for setting the required environment variable t
   - Avoid including specific numbers, counts, or data-dependent information that may become outdated
 - **Security**: Never log sensitive data, use environment variables for secrets
 
-## AI Development Support
-
-### shadcn/ui Integration
-This project uses shadcn/ui for consistent UI components. The MCP server is configured for AI agents to:
-- Search and browse available shadcn/ui components
-- View component implementation details and examples
-- Generate proper installation commands for new components
-
-Use the shadcn MCP tools when working with UI components to ensure consistency with the existing design system.
-
 ## Contributing Guidelines
 
 This repository follows conventional changelog practices. Refer to `CONTRIBUTING.md` for detailed contribution guidelines including:
 - Commit message format and scoping
 - Release process using `scripts/release.sh`
 - Pre-commit hooks setup with `pre-commit install`
-- When the pre-commit fails, the commit is canceled

CHANGELOG.md

@@ -1,354 +1,4 @@
 
-## 2025.9.24 (2025/09/25)
-
-### Features
-
-- **frontend:** Add comprehensive bank account management system. ([ef7c026d](https://github.com/elisiariocouto/leggen/commit/ef7c026db9911cc3be8d5f48e42a4d7beb4b9d0a))
-
-
-
-## 2025.9.24 (2025/09/25)
-
-### Features
-
-- **frontend:** Add comprehensive bank account management system. ([ef7c026d](https://github.com/elisiariocouto/leggen/commit/ef7c026db9911cc3be8d5f48e42a4d7beb4b9d0a))
-
-
-
-## 2025.9.23 (2025/09/24)
-
-### Bug Fixes
-
-- **cli:** Fix API URL handling for subpaths and improve client robustness. ([ae5d034d](https://github.com/elisiariocouto/leggen/commit/ae5d034d4b1da785e3dc240c1d60c2cae7de8010))
--  Correct sync trigger types from manual to scheduled/retry. ([460c5af6](https://github.com/elisiariocouto/leggen/commit/460c5af6ea343ef5685b716413d01d7a30fa9acf))
-
-
-### Features
-
-- **frontend:** Add version-based cache invalidation for PWA updates ([d4edf69f](https://github.com/elisiariocouto/leggen/commit/d4edf69f2cea2515a00435ee974116948057148d))
-
-
-
-## 2025.9.23 (2025/09/24)
-
-### Bug Fixes
-
-- **cli:** Fix API URL handling for subpaths and improve client robustness. ([ae5d034d](https://github.com/elisiariocouto/leggen/commit/ae5d034d4b1da785e3dc240c1d60c2cae7de8010))
--  Correct sync trigger types from manual to scheduled/retry. ([460c5af6](https://github.com/elisiariocouto/leggen/commit/460c5af6ea343ef5685b716413d01d7a30fa9acf))
-
-
-### Features
-
-- **frontend:** Add version-based cache invalidation for PWA updates ([d4edf69f](https://github.com/elisiariocouto/leggen/commit/d4edf69f2cea2515a00435ee974116948057148d))
-
-
-
-## 2025.9.22 (2025/09/24)
-
-### Bug Fixes
-
-- **api:** Add automatic token refresh on 401 errors in GoCardless service. ([36d698f7](https://github.com/elisiariocouto/leggen/commit/36d698f7ce05c7db0e4b07dd07979de2c70b053e))
-- **api:** Fix banks API test fixtures to match GoCardless response format. ([24792744](https://github.com/elisiariocouto/leggen/commit/24792744f9660063e1a3abb9ed8e925fea9a5e60))
-
-
-### Features
-
-- **api:** Add separate sync failure notifications. ([e4e3f885](https://github.com/elisiariocouto/leggen/commit/e4e3f885eab1d45b0e10465ca04eb3f74e9c5a4d))
-- **api:** Add bank logo support and fix banks endpoint type errors. ([b9ca74e7](https://github.com/elisiariocouto/leggen/commit/b9ca74e7e67c3877728b749a42f15f0c0d906561))
-- **frontend:** Improve System page and TransactionsTable UX. ([62cd55e4](https://github.com/elisiariocouto/leggen/commit/62cd55e48fff7c2f5db9dd8230a7bd500e8f6eed))
-
-
-### Miscellaneous Tasks
-
--  Add pre-commit instructions to AGENTS.md. ([a8f70412](https://github.com/elisiariocouto/leggen/commit/a8f704129b2453e604cf2ab776791ba1e91e6fc7))
-
-
-
-## 2025.9.22 (2025/09/24)
-
-### Bug Fixes
-
-- **api:** Add automatic token refresh on 401 errors in GoCardless service. ([36d698f7](https://github.com/elisiariocouto/leggen/commit/36d698f7ce05c7db0e4b07dd07979de2c70b053e))
-- **api:** Fix banks API test fixtures to match GoCardless response format. ([24792744](https://github.com/elisiariocouto/leggen/commit/24792744f9660063e1a3abb9ed8e925fea9a5e60))
-
-
-### Features
-
-- **api:** Add separate sync failure notifications. ([e4e3f885](https://github.com/elisiariocouto/leggen/commit/e4e3f885eab1d45b0e10465ca04eb3f74e9c5a4d))
-- **api:** Add bank logo support and fix banks endpoint type errors. ([b9ca74e7](https://github.com/elisiariocouto/leggen/commit/b9ca74e7e67c3877728b749a42f15f0c0d906561))
-- **frontend:** Improve System page and TransactionsTable UX. ([62cd55e4](https://github.com/elisiariocouto/leggen/commit/62cd55e48fff7c2f5db9dd8230a7bd500e8f6eed))
-
-
-### Miscellaneous Tasks
-
--  Add pre-commit instructions to AGENTS.md. ([a8f70412](https://github.com/elisiariocouto/leggen/commit/a8f704129b2453e604cf2ab776791ba1e91e6fc7))
-
-
-
-## 2025.9.21 (2025/09/22)
-
-### Bug Fixes
-
-- **frontend:** Remove duplicate padding from Analytics page for consistent layout ([27f3f2db](https://github.com/elisiariocouto/leggen/commit/27f3f2dbba91777234769cca08de5dbe8b378f10))
-
-
-### Features
-
-- **frontend:** Implement notification settings with separate drawers and improved design. ([c332642e](https://github.com/elisiariocouto/leggen/commit/c332642e648cb0a29100b500c03e17ae322845f8))
-
-
-
-## 2025.9.21 (2025/09/22)
-
-### Bug Fixes
-
-- **frontend:** Remove duplicate padding from Analytics page for consistent layout ([27f3f2db](https://github.com/elisiariocouto/leggen/commit/27f3f2dbba91777234769cca08de5dbe8b378f10))
-
-
-### Features
-
-- **frontend:** Implement notification settings with separate drawers and improved design. ([c332642e](https://github.com/elisiariocouto/leggen/commit/c332642e648cb0a29100b500c03e17ae322845f8))
-
-
-
-## 2025.9.20 (2025/09/22)
-
-### Features
-
-- **api:** Add sync operations tracking and database storage ([61f95920](https://github.com/elisiariocouto/leggen/commit/61f9592095220f47b758e19a63d70096deb35a92))
-- **frontend:** Rename notifications page to System Status and add sync operations section ([3f2ff21e](https://github.com/elisiariocouto/leggen/commit/3f2ff21eac2c24e04d5957bbd15a6b8a5d0c021d))
--  Consolidate version display to use health endpoint. ([76a30d23](https://github.com/elisiariocouto/leggen/commit/76a30d23af07466ecfd571e7b7bb6724412652c1))
-
-
-### Refactor
-
-- **frontend:** Reorganize pages with tabbed Settings and focused System page ([65404848](https://github.com/elisiariocouto/leggen/commit/65404848aa27cfcb11a371c194ca533b17cb08ff))
-
-
-
-## 2025.9.20 (2025/09/22)
-
-### Features
-
-- **api:** Add sync operations tracking and database storage ([61f95920](https://github.com/elisiariocouto/leggen/commit/61f9592095220f47b758e19a63d70096deb35a92))
-- **frontend:** Rename notifications page to System Status and add sync operations section ([3f2ff21e](https://github.com/elisiariocouto/leggen/commit/3f2ff21eac2c24e04d5957bbd15a6b8a5d0c021d))
--  Consolidate version display to use health endpoint. ([76a30d23](https://github.com/elisiariocouto/leggen/commit/76a30d23af07466ecfd571e7b7bb6724412652c1))
-
-
-### Refactor
-
-- **frontend:** Reorganize pages with tabbed Settings and focused System page ([65404848](https://github.com/elisiariocouto/leggen/commit/65404848aa27cfcb11a371c194ca533b17cb08ff))
-
-
-
-## 2025.9.19 (2025/09/21)
-
-### Bug Fixes
-
-- **frontend:** Close mobile sidebar on navigation item click ([dd24a0e0](https://github.com/elisiariocouto/leggen/commit/dd24a0e0d34c3b2ff37bc75b50162768b4d15cc5))
-- **frontend:** Resolve mobile horizontal scroll in Time Period filters ([4ce56fdc](https://github.com/elisiariocouto/leggen/commit/4ce56fdc042b0dbf3442a1ab201392700add90d6))
-
-
-### Features
-
-- **frontend:** Add version display in header near connection status ([340e1a32](https://github.com/elisiariocouto/leggen/commit/340e1a3235916566a4e403e9ec7b82ea799fbffd))
-
-
-
-## 2025.9.19 (2025/09/21)
-
-### Bug Fixes
-
-- **frontend:** Close mobile sidebar on navigation item click ([dd24a0e0](https://github.com/elisiariocouto/leggen/commit/dd24a0e0d34c3b2ff37bc75b50162768b4d15cc5))
-- **frontend:** Resolve mobile horizontal scroll in Time Period filters ([4ce56fdc](https://github.com/elisiariocouto/leggen/commit/4ce56fdc042b0dbf3442a1ab201392700add90d6))
-
-
-### Features
-
-- **frontend:** Add version display in header near connection status ([340e1a32](https://github.com/elisiariocouto/leggen/commit/340e1a3235916566a4e403e9ec7b82ea799fbffd))
-
-
-
-## 2025.9.18 (2025/09/19)
-
-### Documentation
-
--  Add instructions for shadcn/ui. ([83bb3fce](https://github.com/elisiariocouto/leggen/commit/83bb3fcef20d21a210bc53ce77aa533d37771668))
-
-
-### Features
-
-- **frontend:** Transform layout to use shadcn dashboard-01 with iOS PWA safe area support. ([fbb9e332](https://github.com/elisiariocouto/leggen/commit/fbb9e33279028a6a7ccf46c3696a012ec16a9ca7))
-
-
-
-## 2025.9.18 (2025/09/19)
-
-### Documentation
-
--  Add instructions for shadcn/ui. ([83bb3fce](https://github.com/elisiariocouto/leggen/commit/83bb3fcef20d21a210bc53ce77aa533d37771668))
-
-
-### Features
-
-- **frontend:** Transform layout to use shadcn dashboard-01 with iOS PWA safe area support. ([fbb9e332](https://github.com/elisiariocouto/leggen/commit/fbb9e33279028a6a7ccf46c3696a012ec16a9ca7))
-
-
-
-## 2025.9.17 (2025/09/18)
-
-### Bug Fixes
-
-- **api:** Prevent duplicate notifications for existing transactions during sync. ([25747d7d](https://github.com/elisiariocouto/leggen/commit/25747d7d372e291090764a6814f9d8d0b76aea3b))
-
-
-### Miscellaneous Tasks
-
--  Format files. ([848eccb3](https://github.com/elisiariocouto/leggen/commit/848eccb35b910c8121d15611547dca8da0b12756))
-
-
-
-## 2025.9.17 (2025/09/18)
-
-### Bug Fixes
-
-- **api:** Prevent duplicate notifications for existing transactions during sync. ([25747d7d](https://github.com/elisiariocouto/leggen/commit/25747d7d372e291090764a6814f9d8d0b76aea3b))
-
-
-### Miscellaneous Tasks
-
--  Format files. ([848eccb3](https://github.com/elisiariocouto/leggen/commit/848eccb35b910c8121d15611547dca8da0b12756))
-
-
-
-## 2025.9.16 (2025/09/18)
-
-### Bug Fixes
-
-- **frontend:** Add iOS safe area support for PWA sticky header ([6589c2dd](https://github.com/elisiariocouto/leggen/commit/6589c2dd666f8605cf6d1bf9ad7277734d4cd302))
-
-
-
-## 2025.9.16 (2025/09/18)
-
-### Bug Fixes
-
-- **frontend:** Add iOS safe area support for PWA sticky header ([6589c2dd](https://github.com/elisiariocouto/leggen/commit/6589c2dd666f8605cf6d1bf9ad7277734d4cd302))
-
-
-
-## 2025.9.15 (2025/09/18)
-
-### Features
-
-- **frontend:** Add settings page with account management functionality. ([056c33b9](https://github.com/elisiariocouto/leggen/commit/056c33b9c5cfbc2842cc2dd4ca8c4e3959a2be80))
-
-
-### Refactor
-
-- **frontend:** Simplify filter bar UI and remove advanced filters popover. ([be4f7f8c](https://github.com/elisiariocouto/leggen/commit/be4f7f8cecfe2564abdf0ce1be08497e5a6d7b68))
-
-
-
-## 2025.9.15 (2025/09/18)
-
-### Features
-
-- **frontend:** Add settings page with account management functionality. ([056c33b9](https://github.com/elisiariocouto/leggen/commit/056c33b9c5cfbc2842cc2dd4ca8c4e3959a2be80))
-
-
-### Refactor
-
-- **frontend:** Simplify filter bar UI and remove advanced filters popover. ([be4f7f8c](https://github.com/elisiariocouto/leggen/commit/be4f7f8cecfe2564abdf0ce1be08497e5a6d7b68))
-
-
-
-## 2025.9.14 (2025/09/18)
-
-### Bug Fixes
-
-- **config:** Remove aliases for configuration keys that were disabling telegram notifications in some cases. ([61442a59](https://github.com/elisiariocouto/leggen/commit/61442a598fa7f38c568e3df7e1d924ed85df7491))
-
-
-### Miscellaneous Tasks
-
-- **ci:** Prevent double GitHub Actions runs on new releases. ([30d7c2ed](https://github.com/elisiariocouto/leggen/commit/30d7c2ed4e9aff144837a1f0ed67a8ded0b5d72a))
-
-
-
-## 2025.9.14 (2025/09/18)
-
-### Bug Fixes
-
-- **config:** Remove aliases for configuration keys that were disabling telegram notifications in some cases. ([61442a59](https://github.com/elisiariocouto/leggen/commit/61442a598fa7f38c568e3df7e1d924ed85df7491))
-
-
-### Miscellaneous Tasks
-
-- **ci:** Prevent double GitHub Actions runs on new releases. ([30d7c2ed](https://github.com/elisiariocouto/leggen/commit/30d7c2ed4e9aff144837a1f0ed67a8ded0b5d72a))
-
-
-
-## 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)
 
 

CONTRIBUTING.md

@@ -1,19 +1,9 @@
 # Contributing
 
-This project uses **uv** for Python dependency management and **shadcn/ui** for frontend components.
-
-## Setup
-Install uv and run `uv sync` to install dependencies.
+Install Poetry and run `poetry install` to install dependencies. Then run `poetry shell` to activate the virtual environment.
 
 Run `pre-commit install` to install the pre-commit hooks.
 
-## Frontend Development
-The frontend uses shadcn/ui components for consistent design. When adding new UI components:
-- Check if a shadcn/ui component exists for your use case
-- Follow the existing component patterns in `frontend/src/components/ui/`
-- Use Tailwind CSS classes for styling
-- Ensure components are accessible and follow the design system
-
 ## Commit messages
 
 type(scope/[subscope]): Title starting with uppercase and sentence ending with period.

README.md

@@ -20,7 +20,6 @@ Having your bank data accessible through both CLI and REST API gives you the pow
   - [React](https://reactjs.org/): Modern web interface with TypeScript
   - [Vite](https://vitejs.dev/): Fast build tool and development server
   - [Tailwind CSS](https://tailwindcss.com/): Utility-first CSS framework
-  - [shadcn/ui](https://ui.shadcn.com/): Modern component system built on Radix UI
   - [TanStack Query](https://tanstack.com/query): Powerful data synchronization for React
 
 ## ✨ Features
@@ -147,8 +146,8 @@ enabled = true
 
 # Optional: Transaction filters for notifications
 [filters]
-case_insensitive = ["salary", "utility"]
-case_sensitive = ["SpecificStore"]
+case-insensitive = ["salary", "utility"]
+case-sensitive = ["SpecificStore"]
 ```
 
 ## 📖 Usage

config.example.toml

@@ -9,7 +9,7 @@ sqlite = true
 # Optional: Background sync scheduling
 [scheduler.sync]
 enabled = true
-hour = 3       # 3 AM
+hour = 3      # 3 AM
 minute = 0
 # cron = "0 3 * * *"  # Alternative: use cron expression
 
@@ -20,11 +20,11 @@ enabled = true
 
 # Optional: Telegram notifications
 [notifications.telegram]
-token = "your-bot-token"
-chat_id = 12345
+api-key = "your-bot-token"
+chat-id = 12345
 enabled = true
 
 # Optional: Transaction filters for notifications
 [filters]
-case_insensitive = ["salary", "utility"]
-case_sensitive = ["SpecificStore"]
+case-insensitive = ["salary", "utility"]
+case-sensitive = ["SpecificStore"]

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,49 +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

@@ -10,26 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-toggle": "^1.1.10",
-    "@radix-ui/react-toggle-group": "^1.1.11",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@tabler/icons-react": "^3.35.0",
     "@tailwindcss/forms": "^0.5.10",
     "@tanstack/react-query": "^5.87.1",
     "@tanstack/react-router": "^1.131.36",
@@ -42,35 +26,27 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.542.0",
-    "next-themes": "^0.4.6",
     "postcss": "^8.5.6",
     "react": "^19.1.1",
     "react-day-picker": "^9.10.0",
     "react-dom": "^19.1.1",
-    "recharts": "^2.15.4",
-    "sonner": "^2.0.7",
+    "recharts": "^3.2.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^3.4.17",
-    "tailwindcss-animate": "^1.0.7",
-    "vaul": "^1.1.2",
-    "zod": "^3.25.76"
+    "tailwindcss-animate": "^1.0.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",
-    "@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",
-    "shadcn": "^3.3.1",
-    "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/AccountSettings.tsx

@@ -1,367 +0,0 @@
-import { useState } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import {
-  CreditCard,
-  TrendingUp,
-  TrendingDown,
-  Building2,
-  RefreshCw,
-  AlertCircle,
-  Edit2,
-  Check,
-  X,
-  Plus,
-} from "lucide-react";
-import { apiClient } from "../lib/api";
-import { formatCurrency, formatDate } from "../lib/utils";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "./ui/card";
-import { Button } from "./ui/button";
-import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
-import AccountsSkeleton from "./AccountsSkeleton";
-import type { Account, Balance } from "../types/api";
-
-// Helper function to get status indicator color and styles
-const getStatusIndicator = (status: string) => {
-  const statusLower = status.toLowerCase();
-
-  switch (statusLower) {
-    case "ready":
-      return {
-        color: "bg-green-500",
-        tooltip: "Ready",
-      };
-    case "pending":
-      return {
-        color: "bg-amber-500",
-        tooltip: "Pending",
-      };
-    case "error":
-    case "failed":
-      return {
-        color: "bg-destructive",
-        tooltip: "Error",
-      };
-    case "inactive":
-      return {
-        color: "bg-muted-foreground",
-        tooltip: "Inactive",
-      };
-    default:
-      return {
-        color: "bg-primary",
-        tooltip: status,
-      };
-  }
-};
-
-export default function AccountSettings() {
-  const {
-    data: accounts,
-    isLoading: accountsLoading,
-    error: accountsError,
-    refetch: refetchAccounts,
-  } = useQuery<Account[]>({
-    queryKey: ["accounts"],
-    queryFn: apiClient.getAccounts,
-  });
-
-  const { data: balances } = useQuery<Balance[]>({
-    queryKey: ["balances"],
-    queryFn: () => apiClient.getBalances(),
-  });
-
-  const [editingAccountId, setEditingAccountId] = useState<string | null>(null);
-  const [editingName, setEditingName] = useState("");
-  const [failedImages, setFailedImages] = useState<Set<string>>(new Set());
-
-  const queryClient = useQueryClient();
-
-  const updateAccountMutation = useMutation({
-    mutationFn: ({ id, display_name }: { id: string; display_name: string }) =>
-      apiClient.updateAccount(id, { display_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);
-    // Use display_name if available, otherwise fall back to name
-    setEditingName(account.display_name || account.name || "");
-  };
-
-  const handleEditSave = () => {
-    if (editingAccountId && editingName.trim()) {
-      updateAccountMutation.mutate({
-        id: editingAccountId,
-        display_name: editingName.trim(),
-      });
-    }
-  };
-
-  const handleEditCancel = () => {
-    setEditingAccountId(null);
-    setEditingName("");
-  };
-
-  if (accountsLoading) {
-    return <AccountsSkeleton />;
-  }
-
-  if (accountsError) {
-    return (
-      <Alert variant="destructive">
-        <AlertCircle className="h-4 w-4" />
-        <AlertTitle>Failed to load accounts</AlertTitle>
-        <AlertDescription className="space-y-3">
-          <p>
-            Unable to connect to the Leggen API. Please check your configuration
-            and ensure the API server is running.
-          </p>
-          <Button onClick={() => refetchAccounts()} variant="outline" size="sm">
-            <RefreshCw className="h-4 w-4 mr-2" />
-            Retry
-          </Button>
-        </AlertDescription>
-      </Alert>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Account Management Section */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Account Management</CardTitle>
-          <CardDescription>
-            Manage your connected bank accounts and customize their display
-            names
-          </CardDescription>
-        </CardHeader>
-
-        {!accounts || accounts.length === 0 ? (
-          <CardContent className="p-6 text-center">
-            <CreditCard className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-            <h3 className="text-lg font-medium text-foreground mb-2">
-              No accounts found
-            </h3>
-            <p className="text-muted-foreground mb-4">
-              Connect your first bank account to get started with Leggen.
-            </p>
-            <Button disabled className="flex items-center space-x-2">
-              <Plus className="h-4 w-4" />
-              <span>Add Bank Account</span>
-            </Button>
-            <p className="text-xs text-muted-foreground mt-2">
-              Coming soon: Add new bank connections
-            </p>
-          </CardContent>
-        ) : (
-          <CardContent className="p-0">
-            <div className="divide-y divide-border">
-              {accounts.map((account) => {
-                // Get balance from account's balances array or fallback to balances query
-                const accountBalance = account.balances?.[0];
-                const fallbackBalance = balances?.find(
-                  (b) => b.account_id === account.id,
-                );
-                const balance =
-                  accountBalance?.amount ||
-                  fallbackBalance?.balance_amount ||
-                  0;
-                const currency =
-                  accountBalance?.currency ||
-                  fallbackBalance?.currency ||
-                  account.currency ||
-                  "EUR";
-                const isPositive = balance >= 0;
-
-                return (
-                  <div
-                    key={account.id}
-                    className="p-4 sm:p-6 hover:bg-accent transition-colors"
-                  >
-                    {/* Mobile layout - stack vertically */}
-                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
-                      <div className="flex items-start sm:items-center space-x-3 sm:space-x-4 min-w-0 flex-1">
-                        <div className="flex-shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden bg-muted flex items-center justify-center">
-                          {account.logo && !failedImages.has(account.id) ? (
-                            <img
-                              src={account.logo}
-                              alt={`${account.institution_id} logo`}
-                              className="w-full h-full object-contain"
-                              onError={() => {
-                                console.warn(
-                                  `Failed to load bank logo for ${account.institution_id}: ${account.logo}`,
-                                );
-                                setFailedImages(
-                                  (prev) => new Set([...prev, account.id]),
-                                );
-                              }}
-                            />
-                          ) : (
-                            <Building2 className="h-5 w-5 sm:h-6 sm:w-6 text-muted-foreground" />
-                          )}
-                        </div>
-                        <div className="flex-1 min-w-0">
-                          {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-base sm:text-lg font-medium border border-input rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring"
-                                  placeholder="Custom 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-muted-foreground truncate">
-                                {account.institution_id}
-                              </p>
-                            </div>
-                          ) : (
-                            <div>
-                              <div className="flex items-center space-x-2 min-w-0">
-                                <h4 className="text-base sm:text-lg font-medium text-foreground truncate">
-                                  {account.display_name ||
-                                    account.name ||
-                                    "Unnamed Account"}
-                                </h4>
-                                <button
-                                  onClick={() => handleEditStart(account)}
-                                  className="flex-shrink-0 p-1 text-muted-foreground hover:text-foreground transition-colors"
-                                  title="Edit account name"
-                                >
-                                  <Edit2 className="h-4 w-4" />
-                                </button>
-                              </div>
-                              <p className="text-sm text-muted-foreground truncate">
-                                {account.institution_id}
-                              </p>
-                              {account.iban && (
-                                <p className="text-xs text-muted-foreground mt-1 font-mono break-all sm:break-normal">
-                                  IBAN: {account.iban}
-                                </p>
-                              )}
-                            </div>
-                          )}
-                        </div>
-                      </div>
-
-                      {/* Balance and date section */}
-                      <div className="flex items-center justify-between sm:flex-col sm:items-end sm:text-right flex-shrink-0">
-                        {/* Mobile: date/status on left, balance on right */}
-                        {/* Desktop: balance on top, date/status on bottom */}
-
-                        {/* Date and status indicator - left on mobile, bottom on desktop */}
-                        <div className="flex items-center space-x-2 order-1 sm:order-2">
-                          <div
-                            className={`w-3 h-3 rounded-full ${getStatusIndicator(account.status).color} relative group cursor-help`}
-                            role="img"
-                            aria-label={`Account status: ${getStatusIndicator(account.status).tooltip}`}
-                          >
-                            {/* Tooltip */}
-                            <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-900 text-white text-xs rounded py-1 px-2 whitespace-nowrap z-10">
-                              {getStatusIndicator(account.status).tooltip}
-                              <div className="absolute top-full left-1/2 transform -translate-x-1/2 border-2 border-transparent border-t-gray-900"></div>
-                            </div>
-                          </div>
-                          <p className="text-xs sm:text-sm text-muted-foreground whitespace-nowrap">
-                            Updated{" "}
-                            {formatDate(
-                              account.last_accessed || account.created,
-                            )}
-                          </p>
-                        </div>
-
-                        {/* Balance - right on mobile, top on desktop */}
-                        <div className="flex items-center space-x-2 order-2 sm:order-1">
-                          {isPositive ? (
-                            <TrendingUp className="h-4 w-4 text-green-500" />
-                          ) : (
-                            <TrendingDown className="h-4 w-4 text-red-500" />
-                          )}
-                          <p
-                            className={`text-base sm:text-lg font-semibold ${
-                              isPositive ? "text-green-600" : "text-red-600"
-                            }`}
-                          >
-                            {formatCurrency(balance, currency)}
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </CardContent>
-        )}
-      </Card>
-
-      {/* Add Bank Section (Future Feature) */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Add New Bank Account</CardTitle>
-          <CardDescription>
-            Connect additional bank accounts to track all your finances in one
-            place
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="p-6">
-          <div className="text-center space-y-4">
-            <div className="p-4 bg-muted rounded-lg">
-              <Plus className="h-8 w-8 text-muted-foreground mx-auto mb-2" />
-              <p className="text-sm text-muted-foreground">
-                Bank connection functionality is coming soon. Stay tuned for
-                updates!
-              </p>
-            </div>
-            <Button disabled variant="outline">
-              <Plus className="h-4 w-4 mr-2" />
-              Connect Bank Account
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

frontend/src/components/AccountsOverview.tsx

@@ -22,7 +22,7 @@ import {
 } from "./ui/card";
 import { Button } from "./ui/button";
 import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
-import AccountsSkeleton from "./AccountsSkeleton";
+import LoadingSpinner from "./LoadingSpinner";
 import type { Account, Balance } from "../types/api";
 
 // Helper function to get status indicator color and styles
@@ -37,23 +37,23 @@ const getStatusIndicator = (status: string) => {
       };
     case "pending":
       return {
-        color: "bg-amber-500",
+        color: "bg-yellow-500",
         tooltip: "Pending",
       };
     case "error":
     case "failed":
       return {
-        color: "bg-destructive",
+        color: "bg-red-500",
         tooltip: "Error",
       };
     case "inactive":
       return {
-        color: "bg-muted-foreground",
+        color: "bg-gray-500",
         tooltip: "Inactive",
       };
     default:
       return {
-        color: "bg-primary",
+        color: "bg-blue-500",
         tooltip: status,
       };
   }
@@ -114,7 +114,11 @@ export default function AccountsOverview() {
   };
 
   if (accountsLoading) {
-    return <AccountsSkeleton />;
+    return (
+      <Card>
+        <LoadingSpinner message="Loading accounts..." />
+      </Card>
+    );
   }
 
   if (accountsError) {
@@ -197,8 +201,8 @@ export default function AccountsOverview() {
                   {uniqueBanks}
                 </p>
               </div>
-              <div className="p-3 bg-muted rounded-full">
-                <Building2 className="h-6 w-6 text-muted-foreground" />
+              <div className="p-3 bg-purple-100 dark:bg-purple-900/20 rounded-full">
+                <Building2 className="h-6 w-6 text-purple-600" />
               </div>
             </div>
           </CardContent>
@@ -300,9 +304,7 @@ export default function AccountsOverview() {
                             <div>
                               <div className="flex items-center space-x-2 min-w-0">
                                 <h4 className="text-base sm:text-lg font-medium text-foreground truncate">
-                                  {account.display_name ||
-                                    account.name ||
-                                    "Unnamed Account"}
+                                  {account.display_name || account.name || "Unnamed Account"}
                                 </h4>
                                 <button
                                   onClick={() => handleEditStart(account)}

frontend/src/components/AccountsSkeleton.tsx

@@ -1,61 +0,0 @@
-import { Skeleton } from "./ui/skeleton";
-import { Card, CardContent, CardHeader } from "./ui/card";
-
-export default function AccountsSkeleton() {
-  return (
-    <div className="space-y-6">
-      {/* Summary Cards Skeleton */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        {Array.from({ length: 3 }).map((_, i) => (
-          <Card key={i}>
-            <CardContent className="p-6">
-              <div className="flex items-center justify-between">
-                <div className="space-y-2">
-                  <Skeleton className="h-4 w-20" />
-                  <Skeleton className="h-8 w-24" />
-                </div>
-                <Skeleton className="h-12 w-12 rounded-full" />
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      {/* Accounts List Skeleton */}
-      <Card>
-        <CardHeader>
-          <Skeleton className="h-6 w-32" />
-          <Skeleton className="h-4 w-48" />
-        </CardHeader>
-        <CardContent className="p-0">
-          <div className="divide-y divide-border">
-            {Array.from({ length: 4 }).map((_, i) => (
-              <div key={i} className="p-4 sm:p-6">
-                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
-                  <div className="flex items-start sm:items-center space-x-3 sm:space-x-4 min-w-0 flex-1">
-                    <Skeleton className="h-10 w-10 sm:h-12 sm:w-12 rounded-full flex-shrink-0" />
-                    <div className="flex-1 space-y-2">
-                      <Skeleton className="h-5 w-48" />
-                      <Skeleton className="h-4 w-32" />
-                      <Skeleton className="h-3 w-40" />
-                    </div>
-                  </div>
-                  <div className="flex items-center justify-between sm:flex-col sm:items-end sm:text-right flex-shrink-0">
-                    <div className="flex items-center space-x-2 order-1 sm:order-2">
-                      <Skeleton className="h-3 w-3 rounded-full" />
-                      <Skeleton className="h-4 w-20" />
-                    </div>
-                    <div className="flex items-center space-x-2 order-2 sm:order-1">
-                      <Skeleton className="h-4 w-4" />
-                      <Skeleton className="h-5 w-24" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

frontend/src/components/AddBankAccountDrawer.tsx

@@ -1,203 +0,0 @@
-import { useState } from "react";
-import { useQuery, useMutation } from "@tanstack/react-query";
-import { Plus, Building2, ExternalLink } from "lucide-react";
-import { apiClient } from "../lib/api";
-import { Button } from "./ui/button";
-import { Label } from "./ui/label";
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "./ui/drawer";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./ui/select";
-import { Alert, AlertDescription } from "./ui/alert";
-
-export default function AddBankAccountDrawer() {
-  const [open, setOpen] = useState(false);
-  const [selectedCountry, setSelectedCountry] = useState<string>("");
-  const [selectedBank, setSelectedBank] = useState<string>("");
-
-  const { data: countries } = useQuery({
-    queryKey: ["supportedCountries"],
-    queryFn: apiClient.getSupportedCountries,
-  });
-
-  const { data: banks, isLoading: banksLoading } = useQuery({
-    queryKey: ["bankInstitutions", selectedCountry],
-    queryFn: () => apiClient.getBankInstitutions(selectedCountry),
-    enabled: !!selectedCountry,
-  });
-
-  const connectBankMutation = useMutation({
-    mutationFn: (institutionId: string) =>
-      apiClient.createBankConnection(institutionId),
-    onSuccess: (data) => {
-      // Redirect to the bank's authorization link
-      if (data.link) {
-        window.open(data.link, "_blank");
-        setOpen(false);
-      }
-    },
-    onError: (error) => {
-      console.error("Failed to create bank connection:", error);
-    },
-  });
-
-  const handleCountryChange = (country: string) => {
-    setSelectedCountry(country);
-    setSelectedBank("");
-  };
-
-  const handleConnect = () => {
-    if (selectedBank) {
-      connectBankMutation.mutate(selectedBank);
-    }
-  };
-
-  const resetForm = () => {
-    setSelectedCountry("");
-    setSelectedBank("");
-  };
-
-  return (
-    <Drawer
-      open={open}
-      onOpenChange={(isOpen) => {
-        setOpen(isOpen);
-        if (!isOpen) {
-          resetForm();
-        }
-      }}
-    >
-      <DrawerTrigger asChild>
-        <Button size="sm">
-          <Plus className="h-4 w-4 mr-2" />
-          Add New Account
-        </Button>
-      </DrawerTrigger>
-      <DrawerContent className="max-h-[80vh]">
-        <DrawerHeader>
-          <DrawerTitle>Connect Bank Account</DrawerTitle>
-          <DrawerDescription>
-            Select your country and bank to connect your account to Leggen
-          </DrawerDescription>
-        </DrawerHeader>
-
-        <div className="px-6 space-y-6 overflow-y-auto">
-          {/* Country Selection */}
-          <div className="space-y-2">
-            <Label htmlFor="country">Country</Label>
-            <Select value={selectedCountry} onValueChange={handleCountryChange}>
-              <SelectTrigger>
-                <SelectValue placeholder="Select your country" />
-              </SelectTrigger>
-              <SelectContent>
-                {countries?.map((country) => (
-                  <SelectItem key={country.code} value={country.code}>
-                    {country.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-
-          {/* Bank Selection */}
-          {selectedCountry && (
-            <div className="space-y-2">
-              <Label htmlFor="bank">Bank</Label>
-              {banksLoading ? (
-                <div className="p-4 text-center text-muted-foreground">
-                  Loading banks...
-                </div>
-              ) : banks && banks.length > 0 ? (
-                <Select value={selectedBank} onValueChange={setSelectedBank}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select your bank" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {banks.map((bank) => (
-                      <SelectItem key={bank.id} value={bank.id}>
-                        <div className="flex items-center space-x-2">
-                          {bank.logo ? (
-                            <img
-                              src={bank.logo}
-                              alt={`${bank.name} logo`}
-                              className="w-4 h-4 object-contain"
-                            />
-                          ) : (
-                            <Building2 className="w-4 h-4" />
-                          )}
-                          <span>{bank.name}</span>
-                        </div>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              ) : (
-                <Alert>
-                  <AlertDescription>
-                    No banks available for the selected country.
-                  </AlertDescription>
-                </Alert>
-              )}
-            </div>
-          )}
-
-          {/* Instructions */}
-          {selectedBank && (
-            <Alert>
-              <AlertDescription>
-                You'll be redirected to your bank's website to authorize the
-                connection. After approval, you'll return to Leggen and your
-                account will start syncing.
-              </AlertDescription>
-            </Alert>
-          )}
-
-          {/* Error Display */}
-          {connectBankMutation.isError && (
-            <Alert variant="destructive">
-              <AlertDescription>
-                Failed to create bank connection. Please try again.
-              </AlertDescription>
-            </Alert>
-          )}
-        </div>
-
-        <DrawerFooter>
-          <div className="flex space-x-2">
-            <Button
-              onClick={handleConnect}
-              disabled={!selectedBank || connectBankMutation.isPending}
-              className="flex-1"
-            >
-              <ExternalLink className="h-4 w-4 mr-2" />
-              {connectBankMutation.isPending
-                ? "Connecting..."
-                : "Open Bank Authorization"}
-            </Button>
-            <DrawerClose asChild>
-              <Button
-                variant="outline"
-                disabled={connectBankMutation.isPending}
-              >
-                Cancel
-              </Button>
-            </DrawerClose>
-          </div>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  );
-}

frontend/src/components/AppSidebar.tsx

@@ -1,180 +0,0 @@
-import React from "react";
-import { Link, useLocation } from "@tanstack/react-router";
-import {
-  List,
-  BarChart3,
-  Activity,
-  Settings,
-  Building2,
-  TrendingUp,
-  ChevronDown,
-  ChevronUp,
-} from "lucide-react";
-import { Logo } from "./ui/logo";
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "../lib/api";
-import { formatCurrency } from "../lib/utils";
-import { useState } from "react";
-import type { Account } from "../types/api";
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  useSidebar,
-} from "./ui/sidebar";
-
-const navigation = [
-  { name: "Overview", icon: List, to: "/" },
-  { name: "Analytics", icon: BarChart3, to: "/analytics" },
-  { name: "System", icon: Activity, to: "/system" },
-  { name: "Settings", icon: Settings, to: "/settings" },
-];
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-  const location = useLocation();
-  const [accountsExpanded, setAccountsExpanded] = useState(false);
-  const { isMobile, setOpenMobile } = useSidebar();
-
-  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;
-
-  // Handler to close mobile sidebar when navigation item is clicked
-  const handleNavigationClick = () => {
-    if (isMobile) {
-      setOpenMobile(false);
-    }
-  };
-
-  return (
-    <Sidebar collapsible="icon" className="pt-safe-top pl-safe-left" {...props}>
-      <SidebarHeader>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton
-              asChild
-              className="data-[slot=sidebar-menu-button]:!p-1.5"
-            >
-              <Link
-                to="/"
-                className="flex items-center space-x-2"
-                onClick={handleNavigationClick}
-              >
-                <Logo size={24} />
-                <span className="text-base font-semibold">Leggen</span>
-              </Link>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarHeader>
-
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              {navigation.map((item) => (
-                <SidebarMenuItem key={item.to}>
-                  <SidebarMenuButton
-                    asChild
-                    tooltip={item.name}
-                    isActive={location.pathname === item.to}
-                  >
-                    <Link to={item.to} onClick={handleNavigationClick}>
-                      <item.icon className="h-5 w-5" />
-                      <span>{item.name}</span>
-                    </Link>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              ))}
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-      </SidebarContent>
-
-      <SidebarFooter>
-        {/* Account Summary Section */}
-        <SidebarGroup>
-          <SidebarGroupLabel>Account Summary</SidebarGroupLabel>
-          <div className="bg-muted rounded-lg p-1">
-            {/* Collapsible Header */}
-            <button
-              onClick={() => setAccountsExpanded(!accountsExpanded)}
-              className="w-full p-3 flex items-center justify-between hover:bg-muted/80 transition-colors rounded-lg"
-            >
-              <div className="flex items-center space-x-2">
-                <span className="text-sm font-medium text-muted-foreground">
-                  Total Balance
-                </span>
-                <TrendingUp className="h-4 w-4 text-green-500" />
-              </div>
-              {accountsExpanded ? (
-                <ChevronUp className="h-4 w-4 text-muted-foreground" />
-              ) : (
-                <ChevronDown className="h-4 w-4 text-muted-foreground" />
-              )}
-            </button>
-
-            <div className="px-3 pb-2">
-              <p className="text-xl font-bold text-foreground">
-                {formatCurrency(totalBalance)}
-              </p>
-              <p className="text-sm text-muted-foreground">
-                {accounts?.length || 0} accounts
-              </p>
-            </div>
-
-            {/* Expanded Account Details */}
-            {accountsExpanded && accounts && accounts.length > 0 && (
-              <div className="border-t border-border/50 max-h-48 overflow-y-auto">
-                {accounts.map((account) => {
-                  const primaryBalance = account.balances?.[0]?.amount || 0;
-                  const currency =
-                    account.balances?.[0]?.currency ||
-                    account.currency ||
-                    "EUR";
-
-                  return (
-                    <div
-                      key={account.id}
-                      className="p-2 border-b border-border/30 last:border-b-0 hover:bg-muted/50 transition-colors"
-                    >
-                      <div className="flex items-start space-x-2">
-                        <div className="flex-shrink-0 p-1 bg-background rounded">
-                          <Building2 className="h-3 w-3 text-muted-foreground" />
-                        </div>
-                        <div className="space-y-1 min-w-0 flex-1">
-                          <p className="text-xs font-medium text-foreground truncate">
-                            {account.display_name ||
-                              account.name ||
-                              "Unnamed Account"}
-                          </p>
-                          <p className="text-xs font-semibold text-foreground">
-                            {formatCurrency(primaryBalance, currency)}
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-        </SidebarGroup>
-      </SidebarFooter>
-    </Sidebar>
-  );
-}

frontend/src/components/DiscordConfigDrawer.tsx

@@ -1,200 +0,0 @@
-import { useState, useEffect } from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { MessageSquare, TestTube } from "lucide-react";
-import { apiClient } from "../lib/api";
-import { Button } from "./ui/button";
-import { Input } from "./ui/input";
-import { Label } from "./ui/label";
-import { Switch } from "./ui/switch";
-import { EditButton } from "./ui/edit-button";
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "./ui/drawer";
-import type { NotificationSettings, DiscordConfig } from "../types/api";
-
-interface DiscordConfigDrawerProps {
-  settings: NotificationSettings | undefined;
-  trigger?: React.ReactNode;
-}
-
-export default function DiscordConfigDrawer({
-  settings,
-  trigger,
-}: DiscordConfigDrawerProps) {
-  const [open, setOpen] = useState(false);
-  const [config, setConfig] = useState<DiscordConfig>({
-    webhook: "",
-    enabled: true,
-  });
-
-  const queryClient = useQueryClient();
-
-  useEffect(() => {
-    if (settings?.discord) {
-      setConfig({ ...settings.discord });
-    }
-  }, [settings]);
-
-  const updateMutation = useMutation({
-    mutationFn: (discordConfig: DiscordConfig) =>
-      apiClient.updateNotificationSettings({
-        ...settings,
-        discord: discordConfig,
-        filters: settings?.filters || {
-          case_insensitive: [],
-          case_sensitive: [],
-        },
-      }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["notificationSettings"] });
-      queryClient.invalidateQueries({ queryKey: ["notificationServices"] });
-      setOpen(false);
-    },
-    onError: (error) => {
-      console.error("Failed to update Discord configuration:", error);
-    },
-  });
-
-  const testMutation = useMutation({
-    mutationFn: () =>
-      apiClient.testNotification({
-        service: "discord",
-        message:
-          "Test notification from Leggen - Discord configuration is working!",
-      }),
-    onSuccess: () => {
-      console.log("Test Discord notification sent successfully");
-    },
-    onError: (error) => {
-      console.error("Failed to send test Discord notification:", error);
-    },
-  });
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    updateMutation.mutate(config);
-  };
-
-  const handleTest = () => {
-    testMutation.mutate();
-  };
-
-  const isConfigValid =
-    config.webhook.trim().length > 0 &&
-    config.webhook.includes("discord.com/api/webhooks");
-
-  return (
-    <Drawer open={open} onOpenChange={setOpen}>
-      <DrawerTrigger asChild>{trigger || <EditButton />}</DrawerTrigger>
-      <DrawerContent>
-        <div className="mx-auto w-full max-w-md">
-          <DrawerHeader>
-            <DrawerTitle className="flex items-center space-x-2">
-              <MessageSquare className="h-5 w-5 text-primary" />
-              <span>Discord Configuration</span>
-            </DrawerTitle>
-            <DrawerDescription>
-              Configure Discord webhook notifications for transaction alerts
-            </DrawerDescription>
-          </DrawerHeader>
-
-          <form onSubmit={handleSubmit} className="p-4 space-y-6">
-            {/* Enable/Disable Toggle */}
-            <div className="flex items-center justify-between">
-              <Label className="text-base font-medium">
-                Enable Discord Notifications
-              </Label>
-              <Switch
-                checked={config.enabled}
-                onCheckedChange={(enabled) => setConfig({ ...config, enabled })}
-              />
-            </div>
-
-            {/* Webhook URL */}
-            <div className="space-y-2">
-              <Label htmlFor="discord-webhook">Discord Webhook URL</Label>
-              <Input
-                id="discord-webhook"
-                type="url"
-                placeholder="https://discord.com/api/webhooks/..."
-                value={config.webhook}
-                onChange={(e) =>
-                  setConfig({ ...config, webhook: e.target.value })
-                }
-                disabled={!config.enabled}
-              />
-              <p className="text-xs text-muted-foreground">
-                Create a webhook in your Discord server settings under
-                Integrations → Webhooks
-              </p>
-            </div>
-
-            {/* Configuration Status */}
-            {config.enabled && (
-              <div className="p-3 bg-muted rounded-md">
-                <div className="flex items-center space-x-2">
-                  <div
-                    className={`w-2 h-2 rounded-full ${isConfigValid ? "bg-green-500" : "bg-red-500"}`}
-                  />
-                  <span className="text-sm font-medium">
-                    {isConfigValid
-                      ? "Configuration Valid"
-                      : "Invalid Webhook URL"}
-                  </span>
-                </div>
-                {!isConfigValid && config.webhook.trim().length > 0 && (
-                  <p className="text-xs text-muted-foreground mt-1">
-                    Please enter a valid Discord webhook URL
-                  </p>
-                )}
-              </div>
-            )}
-
-            <DrawerFooter className="px-0">
-              <div className="flex space-x-2">
-                <Button
-                  type="submit"
-                  disabled={updateMutation.isPending || !config.enabled}
-                >
-                  {updateMutation.isPending
-                    ? "Saving..."
-                    : "Save Configuration"}
-                </Button>
-                {config.enabled && isConfigValid && (
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={handleTest}
-                    disabled={testMutation.isPending}
-                  >
-                    {testMutation.isPending ? (
-                      <>
-                        <TestTube className="h-4 w-4 mr-2 animate-spin" />
-                        Testing...
-                      </>
-                    ) : (
-                      <>
-                        <TestTube className="h-4 w-4 mr-2" />
-                        Test
-                      </>
-                    )}
-                  </Button>
-                )}
-              </div>
-              <DrawerClose asChild>
-                <Button variant="ghost">Cancel</Button>
-              </DrawerClose>
-            </DrawerFooter>
-          </form>
-        </div>
-      </DrawerContent>
-    </Drawer>
-  );
-}

frontend/src/components/ErrorBoundary.tsx

@@ -1,9 +1,6 @@
 import { Component } from "react";
 import type { ErrorInfo, ReactNode } from "react";
 import { AlertTriangle, RefreshCw } from "lucide-react";
-import { Card, CardContent } from "./ui/card";
-import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
-import { Button } from "./ui/button";
 
 interface Props {
   children: ReactNode;
@@ -42,49 +39,46 @@ class ErrorBoundary extends Component<Props, State> {
       }
 
       return (
-        <Card>
-          <CardContent className="p-6">
-            <div className="flex items-center justify-center text-center">
-              <div>
-                <AlertTriangle className="h-12 w-12 text-destructive mx-auto mb-4" />
-                <h3 className="text-lg font-medium text-foreground mb-2">
-                  Something went wrong
-                </h3>
-                <p className="text-muted-foreground mb-4">
-                  An error occurred while rendering this component. Please try
-                  refreshing or check the console for more details.
-                </p>
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="flex items-center justify-center text-center">
+            <div>
+              <AlertTriangle className="h-12 w-12 text-red-400 mx-auto mb-4" />
+              <h3 className="text-lg font-medium text-gray-900 mb-2">
+                Something went wrong
+              </h3>
+              <p className="text-gray-600 mb-4">
+                An error occurred while rendering this component. Please try
+                refreshing or check the console for more details.
+              </p>
 
-                {this.state.error && (
-                  <Alert variant="destructive" className="mb-4 text-left">
-                    <AlertTriangle className="h-4 w-4" />
-                    <AlertTitle>Error Details</AlertTitle>
-                    <AlertDescription className="space-y-2">
-                      <p className="text-sm font-mono">
-                        <strong>Error:</strong> {this.state.error.message}
-                      </p>
-                      {this.state.error.stack && (
-                        <details className="mt-2">
-                          <summary className="text-sm cursor-pointer">
-                            Stack trace
-                          </summary>
-                          <pre className="text-xs mt-1 whitespace-pre-wrap">
-                            {this.state.error.stack}
-                          </pre>
-                        </details>
-                      )}
-                    </AlertDescription>
-                  </Alert>
-                )}
+              {this.state.error && (
+                <div className="bg-red-50 border border-red-200 rounded-md p-3 mb-4 text-left">
+                  <p className="text-sm font-mono text-red-800">
+                    <strong>Error:</strong> {this.state.error.message}
+                  </p>
+                  {this.state.error.stack && (
+                    <details className="mt-2">
+                      <summary className="text-sm text-red-600 cursor-pointer">
+                        Stack trace
+                      </summary>
+                      <pre className="text-xs text-red-700 mt-1 whitespace-pre-wrap">
+                        {this.state.error.stack}
+                      </pre>
+                    </details>
+                  )}
+                </div>
+              )}
 
-                <Button onClick={this.handleReset}>
-                  <RefreshCw className="h-4 w-4 mr-2" />
-                  Try Again
-                </Button>
-              </div>
+              <button
+                onClick={this.handleReset}
+                className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+              >
+                <RefreshCw className="h-4 w-4 mr-2" />
+                Try Again
+              </button>
             </div>
-          </CardContent>
-        </Card>
+          </div>
+        </div>
       );
     }
 

frontend/src/components/FiltersSkeleton.tsx

@@ -1,32 +1,29 @@
-import { Skeleton } from "./ui/skeleton";
-import { Card, CardContent } from "./ui/card";
-
 export default function FiltersSkeleton() {
   return (
-    <Card>
-      <div className="px-6 py-4 border-b border-border">
+    <div className="bg-white rounded-lg shadow animate-pulse">
+      <div className="px-6 py-4 border-b border-gray-200">
         <div className="flex items-center justify-between">
-          <Skeleton className="h-6 w-32" />
+          <div className="h-6 bg-gray-200 rounded w-32"></div>
           <div className="flex items-center space-x-2">
-            <Skeleton className="h-8 w-24" />
-            <Skeleton className="h-8 w-20" />
+            <div className="h-8 bg-gray-200 rounded w-24"></div>
+            <div className="h-8 bg-gray-200 rounded w-20"></div>
           </div>
         </div>
       </div>
 
-      <CardContent className="px-6 py-4 border-b border-border bg-muted/30">
+      <div className="px-6 py-4 border-b border-gray-200 bg-gray-50">
         {/* Quick Date Filters Skeleton */}
         <div className="mb-6">
-          <Skeleton className="h-4 w-32 mb-3" />
+          <div className="h-4 bg-gray-200 rounded w-32 mb-3"></div>
           <div className="space-y-2">
             <div className="flex flex-wrap gap-2">
-              <Skeleton className="h-10 w-24 rounded-lg" />
-              <Skeleton className="h-10 w-20 rounded-lg" />
-              <Skeleton className="h-10 w-28 rounded-lg" />
+              <div className="h-10 bg-gray-200 rounded-lg w-24"></div>
+              <div className="h-10 bg-gray-200 rounded-lg w-20"></div>
+              <div className="h-10 bg-gray-200 rounded-lg w-28"></div>
             </div>
             <div className="flex flex-wrap gap-2">
-              <Skeleton className="h-10 w-24 rounded-lg" />
-              <Skeleton className="h-10 w-20 rounded-lg" />
+              <div className="h-10 bg-gray-200 rounded-lg w-24"></div>
+              <div className="h-10 bg-gray-200 rounded-lg w-20"></div>
             </div>
           </div>
         </div>
@@ -34,40 +31,40 @@ export default function FiltersSkeleton() {
         {/* Filter Fields Skeleton */}
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
           <div className="sm:col-span-2 lg:col-span-1">
-            <Skeleton className="h-4 w-16 mb-1" />
-            <Skeleton className="h-10 w-full" />
+            <div className="h-4 bg-gray-200 rounded w-16 mb-1"></div>
+            <div className="h-10 bg-gray-200 rounded"></div>
           </div>
           <div>
-            <Skeleton className="h-4 w-16 mb-1" />
-            <Skeleton className="h-10 w-full" />
+            <div className="h-4 bg-gray-200 rounded w-16 mb-1"></div>
+            <div className="h-10 bg-gray-200 rounded"></div>
           </div>
           <div>
-            <Skeleton className="h-4 w-20 mb-1" />
-            <Skeleton className="h-10 w-full" />
+            <div className="h-4 bg-gray-200 rounded w-20 mb-1"></div>
+            <div className="h-10 bg-gray-200 rounded"></div>
           </div>
           <div>
-            <Skeleton className="h-4 w-16 mb-1" />
-            <Skeleton className="h-10 w-full" />
+            <div className="h-4 bg-gray-200 rounded w-16 mb-1"></div>
+            <div className="h-10 bg-gray-200 rounded"></div>
           </div>
         </div>
 
         {/* Amount Range Filters Skeleton */}
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
           <div>
-            <Skeleton className="h-4 w-20 mb-1" />
-            <Skeleton className="h-10 w-full" />
+            <div className="h-4 bg-gray-200 rounded w-20 mb-1"></div>
+            <div className="h-10 bg-gray-200 rounded"></div>
           </div>
           <div>
-            <Skeleton className="h-4 w-20 mb-1" />
-            <Skeleton className="h-10 w-full" />
+            <div className="h-4 bg-gray-200 rounded w-20 mb-1"></div>
+            <div className="h-10 bg-gray-200 rounded"></div>
           </div>
         </div>
-      </CardContent>
+      </div>
 
       {/* Results Summary Skeleton */}
-      <CardContent className="px-6 py-3 bg-muted/30 border-b border-border">
-        <Skeleton className="h-4 w-48" />
-      </CardContent>
-    </Card>
+      <div className="px-6 py-3 bg-gray-50 border-b border-gray-200">
+        <div className="h-4 bg-gray-200 rounded w-48"></div>
+      </div>
+    </div>
   );
 }

frontend/src/components/Header.tsx

@@ -0,0 +1,74 @@
+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";
+import { ThemeToggle } from "./ui/theme-toggle";
+
+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-card shadow-sm border-b border-border">
+      <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-muted-foreground hover:text-foreground"
+          >
+            <Menu className="h-6 w-6" />
+          </button>
+          <h2 className="text-lg font-semibold text-card-foreground lg:ml-0 ml-4">
+            {currentPage}
+          </h2>
+        </div>
+        <div className="flex items-center space-x-3">
+          <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-muted-foreground">
+                  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-muted-foreground">Connected</span>
+              </>
+            )}
+          </div>
+          <ThemeToggle />
+        </div>
+      </div>
+    </header>
+  );
+}

frontend/src/components/LoadingSpinner.tsx

@@ -0,0 +1,18 @@
+import { RefreshCw } from "lucide-react";
+
+interface LoadingSpinnerProps {
+  message?: string;
+}
+
+export default function LoadingSpinner({
+  message = "Loading...",
+}: LoadingSpinnerProps) {
+  return (
+    <div className="flex items-center justify-center p-8">
+      <div className="text-center">
+        <RefreshCw className="h-8 w-8 animate-spin text-blue-600 mx-auto mb-2" />
+        <p className="text-gray-600 text-sm">{message}</p>
+      </div>
+    </div>
+  );
+}

frontend/src/components/NotificationFiltersDrawer.tsx

@@ -1,255 +0,0 @@
-import { useState, useEffect } from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Plus, X } from "lucide-react";
-import { apiClient } from "../lib/api";
-import { Button } from "./ui/button";
-import { Input } from "./ui/input";
-import { Label } from "./ui/label";
-import { EditButton } from "./ui/edit-button";
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "./ui/drawer";
-import type { NotificationSettings, NotificationFilters } from "../types/api";
-
-interface NotificationFiltersDrawerProps {
-  settings: NotificationSettings | undefined;
-  trigger?: React.ReactNode;
-}
-
-export default function NotificationFiltersDrawer({
-  settings,
-  trigger,
-}: NotificationFiltersDrawerProps) {
-  const [open, setOpen] = useState(false);
-  const [filters, setFilters] = useState<NotificationFilters>({
-    case_insensitive: [],
-    case_sensitive: [],
-  });
-  const [newCaseInsensitive, setNewCaseInsensitive] = useState("");
-  const [newCaseSensitive, setNewCaseSensitive] = useState("");
-
-  const queryClient = useQueryClient();
-
-  useEffect(() => {
-    if (settings?.filters) {
-      setFilters({
-        case_insensitive: [...(settings.filters.case_insensitive || [])],
-        case_sensitive: [...(settings.filters.case_sensitive || [])],
-      });
-    }
-  }, [settings]);
-
-  const updateMutation = useMutation({
-    mutationFn: (updatedFilters: NotificationFilters) =>
-      apiClient.updateNotificationSettings({
-        ...settings,
-        filters: updatedFilters,
-      }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["notificationSettings"] });
-      setOpen(false);
-    },
-    onError: (error) => {
-      console.error("Failed to update notification filters:", error);
-    },
-  });
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    updateMutation.mutate(filters);
-  };
-
-  const addCaseInsensitiveFilter = () => {
-    if (
-      newCaseInsensitive.trim() &&
-      !filters.case_insensitive.includes(newCaseInsensitive.trim())
-    ) {
-      setFilters({
-        ...filters,
-        case_insensitive: [
-          ...filters.case_insensitive,
-          newCaseInsensitive.trim(),
-        ],
-      });
-      setNewCaseInsensitive("");
-    }
-  };
-
-  const addCaseSensitiveFilter = () => {
-    if (
-      newCaseSensitive.trim() &&
-      !filters.case_sensitive?.includes(newCaseSensitive.trim())
-    ) {
-      setFilters({
-        ...filters,
-        case_sensitive: [
-          ...(filters.case_sensitive || []),
-          newCaseSensitive.trim(),
-        ],
-      });
-      setNewCaseSensitive("");
-    }
-  };
-
-  const removeCaseInsensitiveFilter = (index: number) => {
-    setFilters({
-      ...filters,
-      case_insensitive: filters.case_insensitive.filter((_, i) => i !== index),
-    });
-  };
-
-  const removeCaseSensitiveFilter = (index: number) => {
-    setFilters({
-      ...filters,
-      case_sensitive:
-        filters.case_sensitive?.filter((_, i) => i !== index) || [],
-    });
-  };
-
-  return (
-    <Drawer open={open} onOpenChange={setOpen}>
-      <DrawerTrigger asChild>{trigger || <EditButton />}</DrawerTrigger>
-      <DrawerContent>
-        <div className="mx-auto w-full max-w-2xl">
-          <DrawerHeader>
-            <DrawerTitle>Notification Filters</DrawerTitle>
-            <DrawerDescription>
-              Configure which transaction descriptions should trigger
-              notifications
-            </DrawerDescription>
-          </DrawerHeader>
-
-          <form onSubmit={handleSubmit} className="p-4 space-y-6">
-            {/* Case Insensitive Filters */}
-            <div className="space-y-3">
-              <Label className="text-base font-medium">
-                Case Insensitive Filters
-              </Label>
-              <p className="text-sm text-muted-foreground">
-                Filters that match regardless of capitalization (e.g., "AMAZON"
-                matches "amazon")
-              </p>
-
-              <div className="flex space-x-2">
-                <Input
-                  placeholder="Add filter term..."
-                  value={newCaseInsensitive}
-                  onChange={(e) => setNewCaseInsensitive(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") {
-                      e.preventDefault();
-                      addCaseInsensitiveFilter();
-                    }
-                  }}
-                />
-                <Button
-                  type="button"
-                  onClick={addCaseInsensitiveFilter}
-                  size="sm"
-                >
-                  <Plus className="h-4 w-4" />
-                </Button>
-              </div>
-
-              <div className="flex flex-wrap gap-2 min-h-[2rem] p-3 bg-muted rounded-md">
-                {filters.case_insensitive.length > 0 ? (
-                  filters.case_insensitive.map((filter, index) => (
-                    <div
-                      key={index}
-                      className="flex items-center space-x-1 bg-secondary text-secondary-foreground px-2 py-1 rounded-md text-sm"
-                    >
-                      <span>{filter}</span>
-                      <button
-                        type="button"
-                        onClick={() => removeCaseInsensitiveFilter(index)}
-                        className="text-secondary-foreground hover:text-foreground"
-                      >
-                        <X className="h-3 w-3" />
-                      </button>
-                    </div>
-                  ))
-                ) : (
-                  <span className="text-muted-foreground text-sm">
-                    No filters added
-                  </span>
-                )}
-              </div>
-            </div>
-
-            {/* Case Sensitive Filters */}
-            <div className="space-y-3">
-              <Label className="text-base font-medium">
-                Case Sensitive Filters
-              </Label>
-              <p className="text-sm text-muted-foreground">
-                Filters that match exactly as typed (e.g., "AMAZON" only matches
-                "AMAZON")
-              </p>
-
-              <div className="flex space-x-2">
-                <Input
-                  placeholder="Add filter term..."
-                  value={newCaseSensitive}
-                  onChange={(e) => setNewCaseSensitive(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") {
-                      e.preventDefault();
-                      addCaseSensitiveFilter();
-                    }
-                  }}
-                />
-                <Button
-                  type="button"
-                  onClick={addCaseSensitiveFilter}
-                  size="sm"
-                >
-                  <Plus className="h-4 w-4" />
-                </Button>
-              </div>
-
-              <div className="flex flex-wrap gap-2 min-h-[2rem] p-3 bg-muted rounded-md">
-                {filters.case_sensitive && filters.case_sensitive.length > 0 ? (
-                  filters.case_sensitive.map((filter, index) => (
-                    <div
-                      key={index}
-                      className="flex items-center space-x-1 bg-secondary text-secondary-foreground px-2 py-1 rounded-md text-sm"
-                    >
-                      <span>{filter}</span>
-                      <button
-                        type="button"
-                        onClick={() => removeCaseSensitiveFilter(index)}
-                        className="text-secondary-foreground hover:text-foreground"
-                      >
-                        <X className="h-3 w-3" />
-                      </button>
-                    </div>
-                  ))
-                ) : (
-                  <span className="text-muted-foreground text-sm">
-                    No filters added
-                  </span>
-                )}
-              </div>
-            </div>
-
-            <DrawerFooter className="px-0">
-              <Button type="submit" disabled={updateMutation.isPending}>
-                {updateMutation.isPending ? "Saving..." : "Save Filters"}
-              </Button>
-              <DrawerClose asChild>
-                <Button variant="outline">Cancel</Button>
-              </DrawerClose>
-            </DrawerFooter>
-          </form>
-        </div>
-      </DrawerContent>
-    </Drawer>
-  );
-}

frontend/src/components/Notifications.tsx

@@ -10,13 +10,9 @@ import {
   CheckCircle,
   Settings,
   TestTube,
-  Activity,
-  Clock,
-  TrendingUp,
-  User,
 } from "lucide-react";
 import { apiClient } from "../lib/api";
-import NotificationsSkeleton from "./NotificationsSkeleton";
+import LoadingSpinner from "./LoadingSpinner";
 import {
   Card,
   CardContent,
@@ -28,7 +24,6 @@ import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import { Label } from "./ui/label";
-import { Badge } from "./ui/badge";
 import {
   Select,
   SelectContent,
@@ -36,11 +31,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "./ui/select";
-import type {
-  NotificationSettings,
-  NotificationService,
-  SyncOperationsResponse,
-} from "../types/api";
+import type { NotificationSettings, NotificationService } from "../types/api";
 
 export default function Notifications() {
   const [testService, setTestService] = useState("");
@@ -69,16 +60,6 @@ export default function Notifications() {
     queryFn: apiClient.getNotificationServices,
   });
 
-  const {
-    data: syncOperations,
-    isLoading: syncOperationsLoading,
-    error: syncOperationsError,
-    refetch: refetchSyncOperations,
-  } = useQuery<SyncOperationsResponse>({
-    queryKey: ["syncOperations"],
-    queryFn: () => apiClient.getSyncOperations(10, 0), // Get latest 10 operations
-  });
-
   const testMutation = useMutation({
     mutationFn: apiClient.testNotification,
     onSuccess: () => {
@@ -98,15 +79,19 @@ export default function Notifications() {
     },
   });
 
-  if (settingsLoading || servicesLoading || syncOperationsLoading) {
-    return <NotificationsSkeleton />;
+  if (settingsLoading || servicesLoading) {
+    return (
+      <Card>
+        <LoadingSpinner message="Loading notifications..." />
+      </Card>
+    );
   }
 
-  if (settingsError || servicesError || syncOperationsError) {
+  if (settingsError || servicesError) {
     return (
       <Alert variant="destructive">
         <AlertCircle className="h-4 w-4" />
-        <AlertTitle>Failed to load system data</AlertTitle>
+        <AlertTitle>Failed to load notifications</AlertTitle>
         <AlertDescription className="space-y-3">
           <p>
             Unable to connect to the Leggen API. Please check your configuration
@@ -116,7 +101,6 @@ export default function Notifications() {
             onClick={() => {
               refetchSettings();
               refetchServices();
-              refetchSyncOperations();
             }}
             variant="outline"
             size="sm"
@@ -150,110 +134,6 @@ export default function Notifications() {
 
   return (
     <div className="space-y-6">
-      {/* Sync Operations Section */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center space-x-2">
-            <Activity className="h-5 w-5 text-primary" />
-            <span>Sync Operations</span>
-          </CardTitle>
-          <CardDescription>Recent synchronization activities</CardDescription>
-        </CardHeader>
-        <CardContent>
-          {!syncOperations || syncOperations.operations.length === 0 ? (
-            <div className="text-center py-6">
-              <Activity className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-              <h3 className="text-lg font-medium text-foreground mb-2">
-                No sync operations yet
-              </h3>
-              <p className="text-muted-foreground">
-                Sync operations will appear here once you start syncing your
-                accounts.
-              </p>
-            </div>
-          ) : (
-            <div className="space-y-4">
-              {syncOperations.operations.slice(0, 5).map((operation) => {
-                const startedAt = new Date(operation.started_at);
-                const isRunning = !operation.completed_at;
-                const duration = operation.duration_seconds
-                  ? `${Math.round(operation.duration_seconds)}s`
-                  : "";
-
-                return (
-                  <div
-                    key={operation.id}
-                    className="flex items-center justify-between p-4 border rounded-lg hover:bg-accent transition-colors"
-                  >
-                    <div className="flex items-center space-x-4">
-                      <div
-                        className={`p-2 rounded-full ${
-                          isRunning
-                            ? "bg-blue-100 text-blue-600"
-                            : operation.success
-                              ? "bg-green-100 text-green-600"
-                              : "bg-red-100 text-red-600"
-                        }`}
-                      >
-                        {isRunning ? (
-                          <RefreshCw className="h-4 w-4 animate-spin" />
-                        ) : operation.success ? (
-                          <CheckCircle className="h-4 w-4" />
-                        ) : (
-                          <AlertCircle className="h-4 w-4" />
-                        )}
-                      </div>
-                      <div>
-                        <div className="flex items-center space-x-2">
-                          <h4 className="text-sm font-medium text-foreground">
-                            {isRunning
-                              ? "Sync Running"
-                              : operation.success
-                                ? "Sync Completed"
-                                : "Sync Failed"}
-                          </h4>
-                          <Badge variant="outline" className="text-xs">
-                            {operation.trigger_type}
-                          </Badge>
-                        </div>
-                        <div className="flex items-center space-x-4 mt-1 text-xs text-muted-foreground">
-                          <span className="flex items-center space-x-1">
-                            <Clock className="h-3 w-3" />
-                            <span>
-                              {startedAt.toLocaleDateString()}{" "}
-                              {startedAt.toLocaleTimeString()}
-                            </span>
-                          </span>
-                          {duration && <span>Duration: {duration}</span>}
-                        </div>
-                      </div>
-                    </div>
-                    <div className="text-right text-sm text-muted-foreground">
-                      <div className="flex items-center space-x-2">
-                        <User className="h-3 w-3" />
-                        <span>{operation.accounts_processed} accounts</span>
-                      </div>
-                      <div className="flex items-center space-x-2 mt-1">
-                        <TrendingUp className="h-3 w-3" />
-                        <span>
-                          {operation.transactions_added} new transactions
-                        </span>
-                      </div>
-                      {operation.errors.length > 0 && (
-                        <div className="flex items-center space-x-2 mt-1 text-red-600">
-                          <AlertCircle className="h-3 w-3" />
-                          <span>{operation.errors.length} errors</span>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
       {/* Test Notification Section */}
       <Card>
         <CardHeader>
@@ -353,10 +233,12 @@ export default function Notifications() {
                           {service.name}
                         </h4>
                         <div className="flex items-center space-x-2 mt-1">
-                          <Badge
-                            variant={
-                              service.enabled ? "default" : "destructive"
-                            }
+                          <span
+                            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                              service.enabled
+                                ? "bg-green-100 text-green-800"
+                                : "bg-red-100 text-red-800"
+                            }`}
                           >
                             {service.enabled ? (
                               <CheckCircle className="h-3 w-3 mr-1" />
@@ -364,16 +246,18 @@ export default function Notifications() {
                               <AlertCircle className="h-3 w-3 mr-1" />
                             )}
                             {service.enabled ? "Enabled" : "Disabled"}
-                          </Badge>
-                          <Badge
-                            variant={
-                              service.configured ? "secondary" : "outline"
-                            }
+                          </span>
+                          <span
+                            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                              service.configured
+                                ? "bg-blue-100 text-blue-800"
+                                : "bg-yellow-100 text-yellow-800"
+                            }`}
                           >
                             {service.configured
                               ? "Configured"
                               : "Not Configured"}
-                          </Badge>
+                          </span>
                         </div>
                       </div>
                     </div>

frontend/src/components/NotificationsSkeleton.tsx

@@ -1,95 +0,0 @@
-import { Skeleton } from "./ui/skeleton";
-import { Card, CardContent, CardHeader } from "./ui/card";
-
-export default function NotificationsSkeleton() {
-  return (
-    <div className="space-y-6">
-      {/* Test Notification Section Skeleton */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center space-x-2">
-            <Skeleton className="h-5 w-5" />
-            <Skeleton className="h-6 w-36" />
-          </div>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="space-y-2">
-              <Skeleton className="h-4 w-16" />
-              <Skeleton className="h-10 w-full" />
-            </div>
-            <div className="space-y-2">
-              <Skeleton className="h-4 w-16" />
-              <Skeleton className="h-10 w-full" />
-            </div>
-          </div>
-          <div className="mt-4">
-            <Skeleton className="h-10 w-48" />
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Notification Services Skeleton */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center space-x-2">
-            <Skeleton className="h-5 w-5" />
-            <Skeleton className="h-6 w-40" />
-          </div>
-          <Skeleton className="h-4 w-56" />
-        </CardHeader>
-        <CardContent className="p-0">
-          <div className="divide-y divide-border">
-            {Array.from({ length: 3 }).map((_, i) => (
-              <div key={i} className="p-6">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center space-x-4">
-                    <Skeleton className="h-12 w-12 rounded-full" />
-                    <div className="space-y-2">
-                      <Skeleton className="h-5 w-24" />
-                      <div className="flex items-center space-x-2">
-                        <Skeleton className="h-5 w-16" />
-                        <Skeleton className="h-5 w-20" />
-                      </div>
-                    </div>
-                  </div>
-                  <Skeleton className="h-8 w-8" />
-                </div>
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Notification Settings Skeleton */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center space-x-2">
-            <Skeleton className="h-5 w-5" />
-            <Skeleton className="h-6 w-40" />
-          </div>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Skeleton className="h-4 w-16" />
-              <div className="bg-muted rounded-md p-4">
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                  <div className="space-y-2">
-                    <Skeleton className="h-3 w-32" />
-                    <Skeleton className="h-4 w-24" />
-                  </div>
-                  <div className="space-y-2">
-                    <Skeleton className="h-3 w-28" />
-                    <Skeleton className="h-4 w-20" />
-                  </div>
-                </div>
-              </div>
-            </div>
-            <Skeleton className="h-12 w-full" />
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

frontend/src/components/PWAPrompts.tsx

@@ -1,160 +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/Settings.tsx

@@ -1,734 +0,0 @@
-import { useState } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import {
-  CreditCard,
-  TrendingUp,
-  TrendingDown,
-  Building2,
-  RefreshCw,
-  AlertCircle,
-  Edit2,
-  Check,
-  X,
-  Bell,
-  MessageSquare,
-  Send,
-  Trash2,
-  User,
-  Filter,
-} from "lucide-react";
-import { apiClient } from "../lib/api";
-import { formatCurrency, formatDate } from "../lib/utils";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "./ui/card";
-import { Button } from "./ui/button";
-import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
-import { Label } from "./ui/label";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
-import AccountsSkeleton from "./AccountsSkeleton";
-import NotificationFiltersDrawer from "./NotificationFiltersDrawer";
-import DiscordConfigDrawer from "./DiscordConfigDrawer";
-import TelegramConfigDrawer from "./TelegramConfigDrawer";
-import AddBankAccountDrawer from "./AddBankAccountDrawer";
-import type {
-  Account,
-  Balance,
-  NotificationSettings,
-  NotificationService,
-} from "../types/api";
-
-// Helper function to get status indicator color and styles
-const getStatusIndicator = (status: string) => {
-  const statusLower = status.toLowerCase();
-
-  switch (statusLower) {
-    case "ready":
-      return {
-        color: "bg-green-500",
-        tooltip: "Ready",
-      };
-    case "pending":
-      return {
-        color: "bg-amber-500",
-        tooltip: "Pending",
-      };
-    case "error":
-    case "failed":
-      return {
-        color: "bg-destructive",
-        tooltip: "Error",
-      };
-    case "inactive":
-      return {
-        color: "bg-muted-foreground",
-        tooltip: "Inactive",
-      };
-    default:
-      return {
-        color: "bg-primary",
-        tooltip: status,
-      };
-  }
-};
-
-export default function Settings() {
-  const [editingAccountId, setEditingAccountId] = useState<string | null>(null);
-  const [editingName, setEditingName] = useState("");
-  const [failedImages, setFailedImages] = useState<Set<string>>(new Set());
-
-  const queryClient = useQueryClient();
-
-  // Account queries
-  const {
-    data: accounts,
-    isLoading: accountsLoading,
-    error: accountsError,
-    refetch: refetchAccounts,
-  } = useQuery<Account[]>({
-    queryKey: ["accounts"],
-    queryFn: apiClient.getAccounts,
-  });
-
-  const { data: balances } = useQuery<Balance[]>({
-    queryKey: ["balances"],
-    queryFn: () => apiClient.getBalances(),
-  });
-
-  // Notification queries
-  const {
-    data: notificationSettings,
-    isLoading: settingsLoading,
-    error: settingsError,
-    refetch: refetchSettings,
-  } = useQuery<NotificationSettings>({
-    queryKey: ["notificationSettings"],
-    queryFn: apiClient.getNotificationSettings,
-  });
-
-  const {
-    data: services,
-    isLoading: servicesLoading,
-    error: servicesError,
-    refetch: refetchServices,
-  } = useQuery<NotificationService[]>({
-    queryKey: ["notificationServices"],
-    queryFn: apiClient.getNotificationServices,
-  });
-
-  const { data: bankConnections } = useQuery({
-    queryKey: ["bankConnections"],
-    queryFn: apiClient.getBankConnectionsStatus,
-  });
-
-  // Account mutations
-  const updateAccountMutation = useMutation({
-    mutationFn: ({ id, display_name }: { id: string; display_name: string }) =>
-      apiClient.updateAccount(id, { display_name }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["accounts"] });
-      setEditingAccountId(null);
-      setEditingName("");
-    },
-    onError: (error) => {
-      console.error("Failed to update account:", error);
-    },
-  });
-
-  // Notification mutations
-  const deleteServiceMutation = useMutation({
-    mutationFn: apiClient.deleteNotificationService,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["notificationSettings"] });
-      queryClient.invalidateQueries({ queryKey: ["notificationServices"] });
-    },
-  });
-
-  // Bank connection mutations
-  const deleteBankConnectionMutation = useMutation({
-    mutationFn: apiClient.deleteBankConnection,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["accounts"] });
-      queryClient.invalidateQueries({ queryKey: ["bankConnections"] });
-      queryClient.invalidateQueries({ queryKey: ["balances"] });
-    },
-  });
-
-  // Account handlers
-  const handleEditStart = (account: Account) => {
-    setEditingAccountId(account.id);
-    setEditingName(account.display_name || account.name || "");
-  };
-
-  const handleEditSave = () => {
-    if (editingAccountId && editingName.trim()) {
-      updateAccountMutation.mutate({
-        id: editingAccountId,
-        display_name: editingName.trim(),
-      });
-    }
-  };
-
-  const handleEditCancel = () => {
-    setEditingAccountId(null);
-    setEditingName("");
-  };
-
-  // Notification handlers
-  const handleDeleteService = (serviceName: string) => {
-    if (
-      confirm(
-        `Are you sure you want to delete the ${serviceName} notification service?`,
-      )
-    ) {
-      deleteServiceMutation.mutate(serviceName.toLowerCase());
-    }
-  };
-
-  const isLoading = accountsLoading || settingsLoading || servicesLoading;
-  const hasError = accountsError || settingsError || servicesError;
-
-  if (isLoading) {
-    return <AccountsSkeleton />;
-  }
-
-  if (hasError) {
-    return (
-      <Alert variant="destructive">
-        <AlertCircle className="h-4 w-4" />
-        <AlertTitle>Failed to load settings</AlertTitle>
-        <AlertDescription className="space-y-3">
-          <p>
-            Unable to connect to the Leggen API. Please check your configuration
-            and ensure the API server is running.
-          </p>
-          <Button
-            onClick={() => {
-              refetchAccounts();
-              refetchSettings();
-              refetchServices();
-            }}
-            variant="outline"
-            size="sm"
-          >
-            <RefreshCw className="h-4 w-4 mr-2" />
-            Retry
-          </Button>
-        </AlertDescription>
-      </Alert>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      <Tabs defaultValue="accounts" className="space-y-6">
-        <TabsList className="grid w-full grid-cols-2">
-          <TabsTrigger value="accounts" className="flex items-center space-x-2">
-            <User className="h-4 w-4" />
-            <span>Accounts</span>
-          </TabsTrigger>
-          <TabsTrigger
-            value="notifications"
-            className="flex items-center space-x-2"
-          >
-            <Bell className="h-4 w-4" />
-            <span>Notifications</span>
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="accounts" className="space-y-6">
-          {/* Account Management Section */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Account Management</CardTitle>
-              <CardDescription>
-                Manage your connected bank accounts and customize their display
-                names
-              </CardDescription>
-            </CardHeader>
-
-            {!accounts || accounts.length === 0 ? (
-              <CardContent className="p-6 text-center">
-                <CreditCard className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-                <h3 className="text-lg font-medium text-foreground mb-2">
-                  No accounts found
-                </h3>
-                <p className="text-muted-foreground mb-4">
-                  Connect your first bank account to get started with Leggen.
-                </p>
-              </CardContent>
-            ) : (
-              <CardContent className="p-0">
-                <div className="divide-y divide-border">
-                  {accounts.map((account) => {
-                    // Get balance from account's balances array or fallback to balances query
-                    const accountBalance = account.balances?.[0];
-                    const fallbackBalance = balances?.find(
-                      (b) => b.account_id === account.id,
-                    );
-                    const balance =
-                      accountBalance?.amount ||
-                      fallbackBalance?.balance_amount ||
-                      0;
-                    const currency =
-                      accountBalance?.currency ||
-                      fallbackBalance?.currency ||
-                      account.currency ||
-                      "EUR";
-                    const isPositive = balance >= 0;
-
-                    return (
-                      <div
-                        key={account.id}
-                        className="p-4 sm:p-6 hover:bg-accent transition-colors"
-                      >
-                        {/* Mobile layout - stack vertically */}
-                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
-                          <div className="flex items-start sm:items-center space-x-3 sm:space-x-4 min-w-0 flex-1">
-                            <div className="flex-shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden bg-muted flex items-center justify-center">
-                              {account.logo && !failedImages.has(account.id) ? (
-                                <img
-                                  src={account.logo}
-                                  alt={`${account.institution_id} logo`}
-                                  className="w-6 h-6 sm:w-8 sm:h-8 object-contain"
-                                  onError={() => {
-                                    console.warn(
-                                      `Failed to load bank logo for ${account.institution_id}: ${account.logo}`,
-                                    );
-                                    setFailedImages(
-                                      (prev) => new Set([...prev, account.id]),
-                                    );
-                                  }}
-                                />
-                              ) : (
-                                <Building2 className="h-5 w-5 sm:h-6 sm:w-6 text-muted-foreground" />
-                              )}
-                            </div>
-                            <div className="flex-1 min-w-0">
-                              {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-base sm:text-lg font-medium border border-input rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring"
-                                      placeholder="Custom 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-muted-foreground truncate">
-                                    {account.institution_id}
-                                  </p>
-                                </div>
-                              ) : (
-                                <div>
-                                  <div className="flex items-center space-x-2 min-w-0">
-                                    <h4 className="text-base sm:text-lg font-medium text-foreground truncate">
-                                      {account.display_name ||
-                                        account.name ||
-                                        "Unnamed Account"}
-                                    </h4>
-                                    <button
-                                      onClick={() => handleEditStart(account)}
-                                      className="flex-shrink-0 p-1 text-muted-foreground hover:text-foreground transition-colors"
-                                      title="Edit account name"
-                                    >
-                                      <Edit2 className="h-4 w-4" />
-                                    </button>
-                                  </div>
-                                  <p className="text-sm text-muted-foreground truncate">
-                                    {account.institution_id}
-                                  </p>
-                                  {account.iban && (
-                                    <p className="text-xs text-muted-foreground mt-1 font-mono break-all sm:break-normal">
-                                      IBAN: {account.iban}
-                                    </p>
-                                  )}
-                                </div>
-                              )}
-                            </div>
-                          </div>
-
-                          {/* Balance and date section */}
-                          <div className="flex items-center justify-between sm:flex-col sm:items-end sm:text-right flex-shrink-0">
-                            {/* Date and status indicator - left on mobile, bottom on desktop */}
-                            <div className="flex items-center space-x-2 order-1 sm:order-2">
-                              <div
-                                className={`w-3 h-3 rounded-full ${getStatusIndicator(account.status).color} relative group cursor-help`}
-                                role="img"
-                                aria-label={`Account status: ${getStatusIndicator(account.status).tooltip}`}
-                              >
-                                {/* Tooltip */}
-                                <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-900 text-white text-xs rounded py-1 px-2 whitespace-nowrap z-10">
-                                  {getStatusIndicator(account.status).tooltip}
-                                  <div className="absolute top-full left-1/2 transform -translate-x-1/2 border-2 border-transparent border-t-gray-900"></div>
-                                </div>
-                              </div>
-                              <p className="text-xs sm:text-sm text-muted-foreground whitespace-nowrap">
-                                Updated{" "}
-                                {formatDate(
-                                  account.last_accessed || account.created,
-                                )}
-                              </p>
-                            </div>
-
-                            {/* Balance - right on mobile, top on desktop */}
-                            <div className="flex items-center space-x-2 order-2 sm:order-1">
-                              {isPositive ? (
-                                <TrendingUp className="h-4 w-4 text-green-500" />
-                              ) : (
-                                <TrendingDown className="h-4 w-4 text-red-500" />
-                              )}
-                              <p
-                                className={`text-base sm:text-lg font-semibold ${
-                                  isPositive ? "text-green-600" : "text-red-600"
-                                }`}
-                              >
-                                {formatCurrency(balance, currency)}
-                              </p>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              </CardContent>
-            )}
-          </Card>
-
-          {/* Bank Connections Status */}
-          <Card>
-            <CardHeader>
-              <div className="flex items-center justify-between">
-                <div>
-                  <CardTitle>Bank Connections</CardTitle>
-                  <CardDescription>
-                    Status of all bank connection requests and their
-                    authorization state
-                  </CardDescription>
-                </div>
-                <AddBankAccountDrawer />
-              </div>
-            </CardHeader>
-
-            {!bankConnections || bankConnections.length === 0 ? (
-              <CardContent className="p-6 text-center">
-                <Building2 className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-                <h3 className="text-lg font-medium text-foreground mb-2">
-                  No bank connections found
-                </h3>
-                <p className="text-muted-foreground">
-                  Bank connection requests will appear here after you connect
-                  accounts.
-                </p>
-              </CardContent>
-            ) : (
-              <CardContent className="p-0">
-                <div className="divide-y divide-border">
-                  {bankConnections.map((connection) => {
-                    const statusColor =
-                      connection.status.toLowerCase() === "ln"
-                        ? "bg-green-500"
-                        : connection.status.toLowerCase() === "cr"
-                          ? "bg-amber-500"
-                          : connection.status.toLowerCase() === "ex"
-                            ? "bg-red-500"
-                            : "bg-muted-foreground";
-
-                    return (
-                      <div
-                        key={connection.requisition_id}
-                        className="p-4 sm:p-6 hover:bg-accent transition-colors"
-                      >
-                        <div className="flex items-center justify-between">
-                          <div className="flex items-center space-x-4 min-w-0 flex-1">
-                            <div className="flex-shrink-0 w-10 h-10 rounded-full bg-muted flex items-center justify-center">
-                              <Building2 className="h-5 w-5 text-muted-foreground" />
-                            </div>
-                            <div className="flex-1 min-w-0">
-                              <div className="flex items-center space-x-2">
-                                <h4 className="text-base font-medium text-foreground truncate">
-                                  {connection.bank_name}
-                                </h4>
-                                <div
-                                  className={`w-3 h-3 rounded-full ${statusColor}`}
-                                  title={connection.status_display}
-                                />
-                              </div>
-                              <p className="text-sm text-muted-foreground">
-                                {connection.status_display} •{" "}
-                                {connection.accounts_count} account
-                                {connection.accounts_count !== 1 ? "s" : ""}
-                              </p>
-                              <p className="text-xs text-muted-foreground font-mono">
-                                ID: {connection.requisition_id}
-                              </p>
-                            </div>
-                          </div>
-
-                          <div className="flex items-center space-x-2 flex-shrink-0">
-                            <div className="text-right">
-                              <p className="text-xs text-muted-foreground">
-                                Created {formatDate(connection.created_at)}
-                              </p>
-                            </div>
-                            <button
-                              onClick={() => {
-                                const isWorking =
-                                  connection.status.toLowerCase() === "ln";
-                                const message = isWorking
-                                  ? `Are you sure you want to disconnect "${connection.bank_name}"? This will stop syncing new transactions but keep your existing transaction history.`
-                                  : `Delete connection to ${connection.bank_name}?`;
-
-                                if (confirm(message)) {
-                                  deleteBankConnectionMutation.mutate(
-                                    connection.requisition_id,
-                                  );
-                                }
-                              }}
-                              disabled={deleteBankConnectionMutation.isPending}
-                              className="p-1 text-muted-foreground hover:text-destructive transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                              title="Delete connection"
-                            >
-                              <Trash2 className="h-4 w-4" />
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              </CardContent>
-            )}
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="notifications" className="space-y-6">
-          {/* Notification Services */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center space-x-2">
-                <Bell className="h-5 w-5 text-primary" />
-                <span>Notification Services</span>
-              </CardTitle>
-              <CardDescription>
-                Manage your notification services
-              </CardDescription>
-            </CardHeader>
-
-            {!services || services.length === 0 ? (
-              <CardContent className="text-center">
-                <Bell className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-                <h3 className="text-lg font-medium text-foreground mb-2">
-                  No notification services configured
-                </h3>
-                <p className="text-muted-foreground">
-                  Configure notification services in your backend to receive
-                  alerts.
-                </p>
-              </CardContent>
-            ) : (
-              <CardContent className="p-0">
-                <div className="divide-y divide-border">
-                  {services.map((service) => (
-                    <div
-                      key={service.name}
-                      className="p-6 hover:bg-accent transition-colors"
-                    >
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center space-x-4">
-                          <div className="p-3 bg-muted rounded-full">
-                            {service.name.toLowerCase().includes("discord") ? (
-                              <MessageSquare className="h-6 w-6 text-muted-foreground" />
-                            ) : service.name
-                                .toLowerCase()
-                                .includes("telegram") ? (
-                              <Send className="h-6 w-6 text-muted-foreground" />
-                            ) : (
-                              <Bell className="h-6 w-6 text-muted-foreground" />
-                            )}
-                          </div>
-                          <div className="flex-1">
-                            <div className="flex items-center space-x-3">
-                              <h4 className="text-lg font-medium text-foreground capitalize">
-                                {service.name}
-                              </h4>
-                              <div className="flex items-center space-x-2">
-                                <div
-                                  className={`w-2 h-2 rounded-full ${
-                                    service.enabled && service.configured
-                                      ? "bg-green-500"
-                                      : service.enabled
-                                        ? "bg-amber-500"
-                                        : "bg-muted-foreground"
-                                  }`}
-                                />
-                                <span className="text-sm text-muted-foreground">
-                                  {service.enabled && service.configured
-                                    ? "Active"
-                                    : service.enabled
-                                      ? "Needs Configuration"
-                                      : "Disabled"}
-                                </span>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-
-                        <div className="flex items-center space-x-2">
-                          {service.name.toLowerCase().includes("discord") ? (
-                            <DiscordConfigDrawer
-                              settings={notificationSettings}
-                            />
-                          ) : service.name
-                              .toLowerCase()
-                              .includes("telegram") ? (
-                            <TelegramConfigDrawer
-                              settings={notificationSettings}
-                            />
-                          ) : null}
-
-                          <Button
-                            onClick={() => handleDeleteService(service.name)}
-                            disabled={deleteServiceMutation.isPending}
-                            variant="ghost"
-                            size="sm"
-                            className="text-destructive hover:text-destructive hover:bg-destructive/10"
-                          >
-                            <Trash2 className="h-4 w-4" />
-                          </Button>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </CardContent>
-            )}
-          </Card>
-
-          {/* Notification Filters */}
-          <Card>
-            <CardHeader>
-              <div className="flex items-center justify-between">
-                <CardTitle className="flex items-center space-x-2">
-                  <Filter className="h-5 w-5 text-primary" />
-                  <span>Notification Filters</span>
-                </CardTitle>
-                <NotificationFiltersDrawer settings={notificationSettings} />
-              </div>
-            </CardHeader>
-            <CardContent>
-              {notificationSettings?.filters ? (
-                <div className="space-y-4">
-                  <div className="bg-muted rounded-md p-4">
-                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                      <div>
-                        <Label className="text-xs font-medium text-muted-foreground mb-2 block">
-                          Case Insensitive Filters
-                        </Label>
-                        <div className="min-h-[2rem] flex flex-wrap gap-1">
-                          {notificationSettings.filters.case_insensitive
-                            .length > 0 ? (
-                            notificationSettings.filters.case_insensitive.map(
-                              (filter, index) => (
-                                <span
-                                  key={index}
-                                  className="inline-flex items-center px-2 py-1 bg-secondary text-secondary-foreground rounded text-xs"
-                                >
-                                  {filter}
-                                </span>
-                              ),
-                            )
-                          ) : (
-                            <p className="text-sm text-muted-foreground">
-                              None
-                            </p>
-                          )}
-                        </div>
-                      </div>
-                      <div>
-                        <Label className="text-xs font-medium text-muted-foreground mb-2 block">
-                          Case Sensitive Filters
-                        </Label>
-                        <div className="min-h-[2rem] flex flex-wrap gap-1">
-                          {notificationSettings.filters.case_sensitive &&
-                          notificationSettings.filters.case_sensitive.length >
-                            0 ? (
-                            notificationSettings.filters.case_sensitive.map(
-                              (filter, index) => (
-                                <span
-                                  key={index}
-                                  className="inline-flex items-center px-2 py-1 bg-secondary text-secondary-foreground rounded text-xs"
-                                >
-                                  {filter}
-                                </span>
-                              ),
-                            )
-                          ) : (
-                            <p className="text-sm text-muted-foreground">
-                              None
-                            </p>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <p className="text-sm text-muted-foreground">
-                    Filters determine which transaction descriptions will
-                    trigger notifications. Add terms to exclude transactions
-                    containing those words.
-                  </p>
-                </div>
-              ) : (
-                <div className="text-center py-8">
-                  <Filter className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-                  <h3 className="text-lg font-medium text-foreground mb-2">
-                    No notification filters configured
-                  </h3>
-                  <p className="text-muted-foreground mb-4">
-                    Set up filters to control which transactions trigger
-                    notifications.
-                  </p>
-                  <NotificationFiltersDrawer settings={notificationSettings} />
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}

frontend/src/components/Sidebar.tsx

@@ -0,0 +1,107 @@
+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-card 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-border">
+        <Link
+          to="/"
+          onClick={() => setSidebarOpen(false)}
+          className="flex items-center space-x-2 hover:opacity-80 transition-opacity"
+        >
+          <CreditCard className="h-8 w-8 text-primary" />
+          <h1 className="text-xl font-bold text-card-foreground">Leggen</h1>
+        </Link>
+        <button
+          onClick={() => setSidebarOpen(false)}
+          className="lg:hidden p-1 rounded-md text-muted-foreground hover:text-foreground"
+        >
+          <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={cn(
+                "flex items-center w-full px-3 py-2 text-sm font-medium rounded-md transition-colors",
+                location.pathname === item.to
+                  ? "bg-primary text-primary-foreground"
+                  : "text-card-foreground hover:text-card-foreground hover:bg-accent",
+              )}
+            >
+              <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-border mt-auto">
+        <div className="bg-muted rounded-lg p-4">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium text-muted-foreground">
+              Total Balance
+            </span>
+            <TrendingUp className="h-4 w-4 text-green-500" />
+          </div>
+          <p className="text-2xl font-bold text-foreground mt-1">
+            {formatCurrency(totalBalance)}
+          </p>
+          <p className="text-sm text-muted-foreground mt-1">
+            {accounts?.length || 0} accounts
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/SiteHeader.tsx

@@ -1,85 +0,0 @@
-import { useLocation } from "@tanstack/react-router";
-import { Activity, Wifi, WifiOff } from "lucide-react";
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "../lib/api";
-import { ThemeToggle } from "./ui/theme-toggle";
-import { Separator } from "./ui/separator";
-import { SidebarTrigger } from "./ui/sidebar";
-
-const navigation = [
-  { name: "Overview", to: "/" },
-  { name: "Transactions", to: "/transactions" },
-  { name: "Analytics", to: "/analytics" },
-  { name: "System", to: "/system" },
-  { name: "Settings", to: "/settings" },
-];
-
-export function SiteHeader() {
-  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="flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear pt-safe-top">
-      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
-        <SidebarTrigger className="-ml-1" />
-        <Separator
-          orientation="vertical"
-          className="mx-2 data-[orientation=vertical]:h-4"
-        />
-        <h1 className="text-lg font-semibold text-card-foreground">
-          {currentPage}
-        </h1>
-
-        <div className="ml-auto flex items-center space-x-3">
-          {/* Version display */}
-          <div className="flex items-center space-x-1">
-            {healthLoading ? (
-              <span className="text-xs text-muted-foreground">v...</span>
-            ) : healthError || !healthStatus ? (
-              <span className="text-xs text-muted-foreground">v?</span>
-            ) : (
-              <span className="text-xs text-muted-foreground">
-                v{healthStatus.version || "?"}
-              </span>
-            )}
-          </div>
-
-          {/* Connection status */}
-          <div className="flex items-center space-x-1">
-            {healthLoading ? (
-              <>
-                <Activity className="h-4 w-4 text-muted-foreground animate-pulse" />
-                <span className="text-sm text-muted-foreground">
-                  Checking...
-                </span>
-              </>
-            ) : healthError || healthStatus?.status !== "healthy" ? (
-              <>
-                <WifiOff className="h-4 w-4 text-destructive" />
-                <span className="text-sm text-destructive">Disconnected</span>
-              </>
-            ) : (
-              <>
-                <Wifi className="h-4 w-4 text-green-500" />
-                <span className="text-sm text-muted-foreground">Connected</span>
-              </>
-            )}
-          </div>
-          <ThemeToggle />
-        </div>
-      </div>
-    </header>
-  );
-}

frontend/src/components/System.tsx

@@ -1,358 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import {
-  RefreshCw,
-  AlertCircle,
-  CheckCircle,
-  Activity,
-  Clock,
-  TrendingUp,
-  User,
-  FileText,
-} from "lucide-react";
-import { apiClient } from "../lib/api";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "./ui/card";
-import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
-import { Button } from "./ui/button";
-import { Badge } from "./ui/badge";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "./ui/dialog";
-import { ScrollArea } from "./ui/scroll-area";
-import type { SyncOperationsResponse, SyncOperation } from "../types/api";
-
-// Component for viewing sync operation logs
-function LogsDialog({ operation }: { operation: SyncOperation }) {
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline" size="sm" className="shrink-0">
-          <FileText className="h-3 w-3 mr-1" />
-          <span className="hidden sm:inline">View Logs</span>
-          <span className="sm:hidden">Logs</span>
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="max-w-4xl max-h-[80vh]">
-        <DialogHeader>
-          <DialogTitle>Sync Operation Logs</DialogTitle>
-          <DialogDescription>
-            Operation #{operation.id} - Started at{" "}
-            {new Date(operation.started_at).toLocaleString()}
-          </DialogDescription>
-        </DialogHeader>
-        <ScrollArea className="h-[60vh] w-full rounded border p-4">
-          <div className="space-y-2">
-            {operation.logs.length === 0 ? (
-              <p className="text-muted-foreground text-sm">No logs available</p>
-            ) : (
-              operation.logs.map((log, index) => (
-                <div
-                  key={index}
-                  className="text-sm font-mono bg-muted/50 p-2 rounded text-wrap break-all"
-                >
-                  {log}
-                </div>
-              ))
-            )}
-          </div>
-          {operation.errors.length > 0 && (
-            <>
-              <div className="mt-4 mb-2 text-sm font-semibold text-destructive">
-                Errors:
-              </div>
-              <div className="space-y-2">
-                {operation.errors.map((error, index) => (
-                  <div
-                    key={index}
-                    className="text-sm font-mono bg-destructive/10 border border-destructive/20 p-2 rounded text-wrap break-all text-destructive"
-                  >
-                    {error}
-                  </div>
-                ))}
-              </div>
-            </>
-          )}
-        </ScrollArea>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export default function System() {
-  const {
-    data: syncOperations,
-    isLoading: syncOperationsLoading,
-    error: syncOperationsError,
-    refetch: refetchSyncOperations,
-  } = useQuery<SyncOperationsResponse>({
-    queryKey: ["syncOperations"],
-    queryFn: () => apiClient.getSyncOperations(10, 0), // Get latest 10 operations
-  });
-
-  if (syncOperationsLoading) {
-    return (
-      <div className="space-y-6">
-        <Card>
-          <CardContent className="p-6">
-            <div className="flex items-center justify-center">
-              <RefreshCw className="h-6 w-6 animate-spin text-muted-foreground" />
-              <span className="ml-2 text-muted-foreground">
-                Loading system status...
-              </span>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
-
-  if (syncOperationsError) {
-    return (
-      <div className="space-y-6">
-        <Alert variant="destructive">
-          <AlertCircle className="h-4 w-4" />
-          <AlertTitle>Failed to load system data</AlertTitle>
-          <AlertDescription className="space-y-3">
-            <p>
-              Unable to connect to the Leggen API. Please check your
-              configuration and ensure the API server is running.
-            </p>
-            <Button
-              onClick={() => refetchSyncOperations()}
-              variant="outline"
-              size="sm"
-            >
-              <RefreshCw className="h-4 w-4 mr-2" />
-              Retry
-            </Button>
-          </AlertDescription>
-        </Alert>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Sync Operations Section */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center space-x-2">
-            <Activity className="h-5 w-5 text-primary" />
-            <span>Recent Sync Operations</span>
-          </CardTitle>
-          <CardDescription>
-            Latest synchronization activities and their status
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          {!syncOperations || syncOperations.operations.length === 0 ? (
-            <div className="text-center py-6">
-              <Activity className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-              <h3 className="text-lg font-medium text-foreground mb-2">
-                No sync operations yet
-              </h3>
-              <p className="text-muted-foreground">
-                Sync operations will appear here once you start syncing your
-                accounts.
-              </p>
-            </div>
-          ) : (
-            <div className="space-y-4">
-              {syncOperations.operations.slice(0, 10).map((operation) => {
-                const startedAt = new Date(operation.started_at);
-                const isRunning = !operation.completed_at;
-                const duration = operation.duration_seconds
-                  ? `${Math.round(operation.duration_seconds)}s`
-                  : "";
-
-                return (
-                  <div
-                    key={operation.id}
-                    className="border rounded-lg hover:bg-accent transition-colors"
-                  >
-                    {/* Desktop Layout */}
-                    <div className="hidden md:flex items-center justify-between p-4">
-                      <div className="flex items-center space-x-4">
-                        <div
-                          className={`p-2 rounded-full ${
-                            isRunning
-                              ? "bg-blue-100 text-blue-600"
-                              : operation.success
-                                ? "bg-green-100 text-green-600"
-                                : "bg-red-100 text-red-600"
-                          }`}
-                        >
-                          {isRunning ? (
-                            <RefreshCw className="h-4 w-4 animate-spin" />
-                          ) : operation.success ? (
-                            <CheckCircle className="h-4 w-4" />
-                          ) : (
-                            <AlertCircle className="h-4 w-4" />
-                          )}
-                        </div>
-                        <div>
-                          <div className="flex items-center space-x-2">
-                            <h4 className="text-sm font-medium text-foreground">
-                              {isRunning
-                                ? "Sync Running"
-                                : operation.success
-                                  ? "Sync Completed"
-                                  : "Sync Failed"}
-                            </h4>
-                            <Badge variant="outline" className="text-xs">
-                              {operation.trigger_type.charAt(0).toUpperCase() +
-                                operation.trigger_type.slice(1)}
-                            </Badge>
-                          </div>
-                          <div className="flex items-center space-x-4 mt-1 text-xs text-muted-foreground">
-                            <span className="flex items-center space-x-1">
-                              <Clock className="h-3 w-3" />
-                              <span>
-                                {startedAt.toLocaleDateString()}{" "}
-                                {startedAt.toLocaleTimeString()}
-                              </span>
-                            </span>
-                            {duration && <span>Duration: {duration}</span>}
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center space-x-4">
-                        <div className="text-right text-sm text-muted-foreground">
-                          <div className="flex items-center space-x-2">
-                            <User className="h-3 w-3" />
-                            <span>{operation.accounts_processed} accounts</span>
-                          </div>
-                          <div className="flex items-center space-x-2 mt-1">
-                            <TrendingUp className="h-3 w-3" />
-                            <span>
-                              {operation.transactions_added} new transactions
-                            </span>
-                          </div>
-                        </div>
-                        <LogsDialog operation={operation} />
-                      </div>
-                    </div>
-
-                    {/* Mobile Layout */}
-                    <div className="md:hidden p-4 space-y-3">
-                      <div className="flex items-start justify-between">
-                        <div className="flex items-center space-x-3">
-                          <div
-                            className={`p-2 rounded-full ${
-                              isRunning
-                                ? "bg-blue-100 text-blue-600"
-                                : operation.success
-                                  ? "bg-green-100 text-green-600"
-                                  : "bg-red-100 text-red-600"
-                            }`}
-                          >
-                            {isRunning ? (
-                              <RefreshCw className="h-4 w-4 animate-spin" />
-                            ) : operation.success ? (
-                              <CheckCircle className="h-4 w-4" />
-                            ) : (
-                              <AlertCircle className="h-4 w-4" />
-                            )}
-                          </div>
-                          <div>
-                            <h4 className="text-sm font-medium text-foreground">
-                              {isRunning
-                                ? "Sync Running"
-                                : operation.success
-                                  ? "Sync Completed"
-                                  : "Sync Failed"}
-                            </h4>
-                            <Badge variant="outline" className="text-xs mt-1">
-                              {operation.trigger_type.charAt(0).toUpperCase() +
-                                operation.trigger_type.slice(1)}
-                            </Badge>
-                          </div>
-                        </div>
-                        <LogsDialog operation={operation} />
-                      </div>
-
-                      <div className="text-xs text-muted-foreground space-y-2">
-                        <div className="flex items-center space-x-1">
-                          <Clock className="h-3 w-3" />
-                          <span>
-                            {startedAt.toLocaleDateString()}{" "}
-                            {startedAt.toLocaleTimeString()}
-                          </span>
-                          {duration && (
-                            <span className="ml-2">• {duration}</span>
-                          )}
-                        </div>
-
-                        <div className="grid grid-cols-2 gap-2 text-xs">
-                          <div className="flex items-center space-x-1">
-                            <User className="h-3 w-3" />
-                            <span>{operation.accounts_processed} accounts</span>
-                          </div>
-                          <div className="flex items-center space-x-1">
-                            <TrendingUp className="h-3 w-3" />
-                            <span>
-                              {operation.transactions_added} new transactions
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* System Health Summary Card */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center space-x-2">
-            <CheckCircle className="h-5 w-5 text-green-500" />
-            <span>System Health</span>
-          </CardTitle>
-          <CardDescription>
-            Overall system status and performance
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="text-center p-4 bg-green-50 rounded-lg border border-green-200">
-              <div className="text-2xl font-bold text-green-700">
-                {syncOperations?.operations.filter((op) => op.success).length ||
-                  0}
-              </div>
-              <div className="text-sm text-green-600">Successful Syncs</div>
-            </div>
-            <div className="text-center p-4 bg-red-50 rounded-lg border border-red-200">
-              <div className="text-2xl font-bold text-red-700">
-                {syncOperations?.operations.filter(
-                  (op) => !op.success && op.completed_at,
-                ).length || 0}
-              </div>
-              <div className="text-sm text-red-600">Failed Syncs</div>
-            </div>
-            <div className="text-center p-4 bg-blue-50 rounded-lg border border-blue-200">
-              <div className="text-2xl font-bold text-blue-700">
-                {syncOperations?.operations.filter((op) => !op.completed_at)
-                  .length || 0}
-              </div>
-              <div className="text-sm text-blue-600">Running Operations</div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

frontend/src/components/TelegramConfigDrawer.tsx

@@ -1,222 +0,0 @@
-import { useState, useEffect } from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Send, TestTube } from "lucide-react";
-import { apiClient } from "../lib/api";
-import { Button } from "./ui/button";
-import { Input } from "./ui/input";
-import { Label } from "./ui/label";
-import { Switch } from "./ui/switch";
-import { EditButton } from "./ui/edit-button";
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "./ui/drawer";
-import type { NotificationSettings, TelegramConfig } from "../types/api";
-
-interface TelegramConfigDrawerProps {
-  settings: NotificationSettings | undefined;
-  trigger?: React.ReactNode;
-}
-
-export default function TelegramConfigDrawer({
-  settings,
-  trigger,
-}: TelegramConfigDrawerProps) {
-  const [open, setOpen] = useState(false);
-  const [config, setConfig] = useState<TelegramConfig>({
-    token: "",
-    chat_id: 0,
-    enabled: true,
-  });
-
-  const queryClient = useQueryClient();
-
-  useEffect(() => {
-    if (settings?.telegram) {
-      setConfig({ ...settings.telegram });
-    }
-  }, [settings]);
-
-  const updateMutation = useMutation({
-    mutationFn: (telegramConfig: TelegramConfig) =>
-      apiClient.updateNotificationSettings({
-        ...settings,
-        telegram: telegramConfig,
-        filters: settings?.filters || {
-          case_insensitive: [],
-          case_sensitive: [],
-        },
-      }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["notificationSettings"] });
-      queryClient.invalidateQueries({ queryKey: ["notificationServices"] });
-      setOpen(false);
-    },
-    onError: (error) => {
-      console.error("Failed to update Telegram configuration:", error);
-    },
-  });
-
-  const testMutation = useMutation({
-    mutationFn: () =>
-      apiClient.testNotification({
-        service: "telegram",
-        message:
-          "Test notification from Leggen - Telegram configuration is working!",
-      }),
-    onSuccess: () => {
-      console.log("Test Telegram notification sent successfully");
-    },
-    onError: (error) => {
-      console.error("Failed to send test Telegram notification:", error);
-    },
-  });
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    updateMutation.mutate(config);
-  };
-
-  const handleTest = () => {
-    testMutation.mutate();
-  };
-
-  const isConfigValid = config.token.trim().length > 0 && config.chat_id !== 0;
-
-  return (
-    <Drawer open={open} onOpenChange={setOpen}>
-      <DrawerTrigger asChild>{trigger || <EditButton />}</DrawerTrigger>
-      <DrawerContent>
-        <div className="mx-auto w-full max-w-md">
-          <DrawerHeader>
-            <DrawerTitle className="flex items-center space-x-2">
-              <Send className="h-5 w-5 text-primary" />
-              <span>Telegram Configuration</span>
-            </DrawerTitle>
-            <DrawerDescription>
-              Configure Telegram bot notifications for transaction alerts
-            </DrawerDescription>
-          </DrawerHeader>
-
-          <form onSubmit={handleSubmit} className="p-4 space-y-6">
-            {/* Enable/Disable Toggle */}
-            <div className="flex items-center justify-between">
-              <Label className="text-base font-medium">
-                Enable Telegram Notifications
-              </Label>
-              <Switch
-                checked={config.enabled}
-                onCheckedChange={(enabled) => setConfig({ ...config, enabled })}
-              />
-            </div>
-
-            {/* Bot Token */}
-            <div className="space-y-2">
-              <Label htmlFor="telegram-token">Bot Token</Label>
-              <Input
-                id="telegram-token"
-                type="password"
-                placeholder="123456789:ABCdefGHIjklMNOpqrsTUVwxyz"
-                value={config.token}
-                onChange={(e) =>
-                  setConfig({ ...config, token: e.target.value })
-                }
-                disabled={!config.enabled}
-              />
-              <p className="text-xs text-muted-foreground">
-                Create a bot using @BotFather on Telegram to get your token
-              </p>
-            </div>
-
-            {/* Chat ID */}
-            <div className="space-y-2">
-              <Label htmlFor="telegram-chat-id">Chat ID</Label>
-              <Input
-                id="telegram-chat-id"
-                type="number"
-                placeholder="123456789"
-                value={config.chat_id || ""}
-                onChange={(e) =>
-                  setConfig({
-                    ...config,
-                    chat_id: parseInt(e.target.value) || 0,
-                  })
-                }
-                disabled={!config.enabled}
-              />
-              <p className="text-xs text-muted-foreground">
-                Send a message to your bot and visit
-                https://api.telegram.org/bot&lt;token&gt;/getUpdates to find
-                your chat ID
-              </p>
-            </div>
-
-            {/* Configuration Status */}
-            {config.enabled && (
-              <div className="p-3 bg-muted rounded-md">
-                <div className="flex items-center space-x-2">
-                  <div
-                    className={`w-2 h-2 rounded-full ${isConfigValid ? "bg-green-500" : "bg-red-500"}`}
-                  />
-                  <span className="text-sm font-medium">
-                    {isConfigValid
-                      ? "Configuration Valid"
-                      : "Missing Token or Chat ID"}
-                  </span>
-                </div>
-                {!isConfigValid &&
-                  (config.token.trim().length > 0 || config.chat_id !== 0) && (
-                    <p className="text-xs text-muted-foreground mt-1">
-                      Both bot token and chat ID are required
-                    </p>
-                  )}
-              </div>
-            )}
-
-            <DrawerFooter className="px-0">
-              <div className="flex space-x-2">
-                <Button
-                  type="submit"
-                  disabled={updateMutation.isPending || !config.enabled}
-                >
-                  {updateMutation.isPending
-                    ? "Saving..."
-                    : "Save Configuration"}
-                </Button>
-                {config.enabled && isConfigValid && (
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={handleTest}
-                    disabled={testMutation.isPending}
-                  >
-                    {testMutation.isPending ? (
-                      <>
-                        <TestTube className="h-4 w-4 mr-2 animate-spin" />
-                        Testing...
-                      </>
-                    ) : (
-                      <>
-                        <TestTube className="h-4 w-4 mr-2" />
-                        Test
-                      </>
-                    )}
-                  </Button>
-                )}
-              </div>
-              <DrawerClose asChild>
-                <Button variant="ghost">Cancel</Button>
-              </DrawerClose>
-            </DrawerFooter>
-          </form>
-        </div>
-      </DrawerContent>
-    </Drawer>
-  );
-}

frontend/src/components/TransactionSkeleton.tsx

@@ -1,6 +1,3 @@
-import { Skeleton } from "./ui/skeleton";
-import { Card } from "./ui/card";
-
 interface TransactionSkeletonProps {
   rows?: number;
   view?: "table" | "mobile";
@@ -14,89 +11,93 @@ export default function TransactionSkeleton({
 
   if (view === "mobile") {
     return (
-      <Card className="divide-y divide-border">
+      <div className="bg-white rounded-lg shadow divide-y divide-gray-200">
         {skeletonRows.map((_, index) => (
-          <div key={index} className="p-4">
+          <div key={index} className="p-4 animate-pulse">
             <div className="flex items-start justify-between">
               <div className="flex-1">
                 <div className="flex items-start space-x-3">
-                  <Skeleton className="h-10 w-10 rounded-full flex-shrink-0" />
+                  <div className="p-2 rounded-full bg-gray-200 flex-shrink-0">
+                    <div className="h-4 w-4 bg-gray-300 rounded"></div>
+                  </div>
                   <div className="flex-1 min-w-0 space-y-2">
-                    <Skeleton className="h-4 w-3/4" />
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
                     <div className="space-y-1">
-                      <Skeleton className="h-3 w-1/2" />
-                      <Skeleton className="h-3 w-2/3" />
-                      <Skeleton className="h-3 w-1/3" />
+                      <div className="h-3 bg-gray-200 rounded w-1/2"></div>
+                      <div className="h-3 bg-gray-200 rounded w-2/3"></div>
+                      <div className="h-3 bg-gray-200 rounded w-1/3"></div>
                     </div>
                   </div>
                 </div>
               </div>
               <div className="text-right ml-3 flex-shrink-0 space-y-2">
-                <Skeleton className="h-6 w-20" />
-                <Skeleton className="h-4 w-16 ml-auto" />
-                <Skeleton className="h-6 w-12 ml-auto" />
+                <div className="h-6 bg-gray-200 rounded w-20"></div>
+                <div className="h-4 bg-gray-200 rounded w-16 ml-auto"></div>
+                <div className="h-6 bg-gray-200 rounded w-12 ml-auto"></div>
               </div>
             </div>
           </div>
         ))}
-      </Card>
+      </div>
     );
   }
 
   return (
-    <Card className="overflow-hidden">
+    <div className="bg-white rounded-lg shadow overflow-hidden">
       <div className="overflow-x-auto">
-        <table className="min-w-full divide-y divide-border">
-          <thead className="bg-muted/50">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
             <tr>
               <th className="px-6 py-3 text-left">
-                <Skeleton className="h-4 w-20" />
+                <div className="h-4 bg-gray-200 rounded w-20 animate-pulse"></div>
               </th>
               <th className="px-6 py-3 text-left">
-                <Skeleton className="h-4 w-16" />
+                <div className="h-4 bg-gray-200 rounded w-16 animate-pulse"></div>
               </th>
               <th className="px-6 py-3 text-left">
-                <Skeleton className="h-4 w-12" />
+                <div className="h-4 bg-gray-200 rounded w-12 animate-pulse"></div>
               </th>
               <th className="px-6 py-3 text-left">
-                <Skeleton className="h-4 w-8" />
+                <div className="h-4 bg-gray-200 rounded w-8 animate-pulse"></div>
               </th>
             </tr>
           </thead>
-          <tbody className="bg-card divide-y divide-border">
+          <tbody className="bg-white divide-y divide-gray-200">
             {skeletonRows.map((_, index) => (
-              <tr key={index}>
+              <tr key={index} className="animate-pulse">
                 <td className="px-6 py-4">
                   <div className="flex items-start space-x-3">
-                    <Skeleton className="h-10 w-10 rounded-full flex-shrink-0" />
+                    <div className="p-2 rounded-full bg-gray-200 flex-shrink-0">
+                      <div className="h-4 w-4 bg-gray-300 rounded"></div>
+                    </div>
                     <div className="flex-1 space-y-2">
-                      <Skeleton className="h-4 w-3/4" />
+                      <div className="h-4 bg-gray-200 rounded w-3/4"></div>
                       <div className="space-y-1">
-                        <Skeleton className="h-3 w-1/2" />
-                        <Skeleton className="h-3 w-2/3" />
+                        <div className="h-3 bg-gray-200 rounded w-1/2"></div>
+                        <div className="h-3 bg-gray-200 rounded w-2/3"></div>
                       </div>
                     </div>
                   </div>
                 </td>
                 <td className="px-6 py-4">
                   <div className="text-right">
-                    <Skeleton className="h-6 w-24 ml-auto mb-1" />
+                    <div className="h-6 bg-gray-200 rounded w-24 ml-auto mb-1"></div>
                   </div>
                 </td>
                 <td className="px-6 py-4">
                   <div className="space-y-1">
-                    <Skeleton className="h-4 w-20" />
-                    <Skeleton className="h-3 w-16" />
+                    <div className="h-4 bg-gray-200 rounded w-20"></div>
+                    <div className="h-3 bg-gray-200 rounded w-16"></div>
                   </div>
                 </td>
                 <td className="px-6 py-4">
-                  <Skeleton className="h-6 w-12" />
+                  <div className="h-6 bg-gray-200 rounded w-12"></div>
                 </td>
               </tr>
             ))}
           </tbody>
         </table>
       </div>
-    </Card>
+    </div>
   );
 }

frontend/src/components/TransactionsTable.tsx

@@ -28,10 +28,10 @@ import FiltersSkeleton from "./FiltersSkeleton";
 import RawTransactionModal from "./RawTransactionModal";
 import { FilterBar, type FilterState } from "./filters";
 import { DataTablePagination } from "./ui/data-table-pagination";
-import { Card } from "./ui/card";
+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
@@ -40,11 +40,14 @@ export default function TransactionsTable() {
     selectedAccount: "",
     startDate: "",
     endDate: "",
+    minAmount: "",
+    maxAmount: "",
   });
 
   const [showRawModal, setShowRawModal] = useState(false);
   const [selectedTransaction, setSelectedTransaction] =
     useState<Transaction | null>(null);
+  const [showRunningBalance, setShowRunningBalance] = useState(true);
 
   // Pagination state
   const [currentPage, setCurrentPage] = useState(1);
@@ -71,6 +74,8 @@ export default function TransactionsTable() {
       selectedAccount: "",
       startDate: "",
       endDate: "",
+      minAmount: "",
+      maxAmount: "",
     });
     setColumnFilters([]);
     setCurrentPage(1);
@@ -97,6 +102,12 @@ export default function TransactionsTable() {
     queryFn: apiClient.getAccounts,
   });
 
+  const { data: balances } = useQuery<Balance[]>({
+    queryKey: ["balances"],
+    queryFn: apiClient.getBalances,
+    enabled: showRunningBalance,
+  });
+
   const {
     data: transactionsResponse,
     isLoading: transactionsLoading,
@@ -111,6 +122,8 @@ export default function TransactionsTable() {
       currentPage,
       perPage,
       debouncedSearchTerm,
+      filterState.minAmount,
+      filterState.maxAmount,
     ],
     queryFn: () =>
       apiClient.getTransactions({
@@ -121,6 +134,12 @@ export default function TransactionsTable() {
         perPage: perPage,
         search: debouncedSearchTerm || undefined,
         summaryOnly: false,
+        minAmount: filterState.minAmount
+          ? parseFloat(filterState.minAmount)
+          : undefined,
+        maxAmount: filterState.maxAmount
+          ? parseFloat(filterState.maxAmount)
+          : undefined,
       }),
   });
 
@@ -140,7 +159,13 @@ export default function TransactionsTable() {
   // Reset pagination when filters change
   useEffect(() => {
     setCurrentPage(1);
-  }, [filterState.selectedAccount, filterState.startDate, filterState.endDate]);
+  }, [
+    filterState.selectedAccount,
+    filterState.startDate,
+    filterState.endDate,
+    filterState.minAmount,
+    filterState.maxAmount,
+  ]);
 
   const handleViewRaw = (transaction: Transaction) => {
     setSelectedTransaction(transaction);
@@ -156,7 +181,62 @@ export default function TransactionsTable() {
     filterState.searchTerm ||
     filterState.selectedAccount ||
     filterState.startDate ||
-    filterState.endDate;
+    filterState.endDate ||
+    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 - use interimAvailable as the most current
+    balances.forEach((balance) => {
+      if (balance.balance_type === "interimAvailable") {
+        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;
+
+      // Sort transactions by date (oldest first) for forward calculation
+      const sortedTransactions = [...accountTransactions].sort(
+        (a, b) =>
+          new Date(a.transaction_date).getTime() -
+          new Date(b.transaction_date).getTime(),
+      );
+
+      // Calculate the starting balance by working backwards from current balance
+      let startingBalance = currentBalance;
+      for (let i = sortedTransactions.length - 1; i >= 0; i--) {
+        startingBalance -= sortedTransactions[i].transaction_value;
+      }
+
+      // Now calculate running balances going forward chronologically
+      let runningBalance = startingBalance;
+      sortedTransactions.forEach((txn) => {
+        runningBalance += txn.transaction_value;
+        runningBalances[`${txn.account_id}-${txn.transaction_id}`] = runningBalance;
+      });
+    });
+
+    return runningBalances;
+  };
+
+  const runningBalances = calculateRunningBalances(transactions);
 
   // Define columns
   const columns: ColumnDef<Transaction>[] = [
@@ -190,7 +270,8 @@ export default function TransactionsTable() {
               <div className="text-xs text-muted-foreground space-y-1">
                 {account && (
                   <p className="truncate">
-                    {account.display_name || "Unnamed Account"}
+                    {account.name || "Unnamed Account"} •{" "}
+                    {account.institution_id}
                   </p>
                 )}
                 {(transaction.creditor_name || transaction.debtor_name) && (
@@ -232,6 +313,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",
@@ -339,7 +443,7 @@ export default function TransactionsTable() {
   }
 
   return (
-    <div className="space-y-6 max-w-full">
+    <div className="space-y-6">
       {/* New FilterBar */}
       <FilterBar
         filterState={filterState}
@@ -347,91 +451,132 @@ export default function TransactionsTable() {
         onClearFilters={handleClearFilters}
         accounts={accounts}
         isSearchLoading={isSearchLoading}
+        showRunningBalance={showRunningBalance}
+        onToggleRunningBalance={() =>
+          setShowRunningBalance(!showRunningBalance)
+        }
       />
 
-      {/* Responsive Table/Cards */}
+      {/* Results Summary */}
       <Card>
+        <CardContent className="px-6 py-3 bg-muted/30 border-b border-border">
+          <p className="text-sm text-muted-foreground">
+            Showing {transactions.length} transaction
+            {transactions.length !== 1 ? "s" : ""} (
+            {pagination ? (
+              <>
+                {(pagination.page - 1) * pagination.per_page + 1}-
+                {Math.min(
+                  pagination.page * pagination.per_page,
+                  pagination.total,
+                )}{" "}
+                of {pagination.total}
+              </>
+            ) : (
+              "loading..."
+            )}
+            )
+            {filterState.selectedAccount && accounts && (
+              <span className="ml-1">
+                for{" "}
+                {
+                  accounts.find((acc) => acc.id === filterState.selectedAccount)
+                    ?.name
+                }
+              </span>
+            )}
+          </p>
+        </CardContent>
+      </Card>
+
+      {/* Responsive Table/Cards */}
+      <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">
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
-                      </td>
+          <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()}
+                      >
+                        <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) */}
@@ -485,7 +630,8 @@ export default function TransactionsTable() {
                             <div className="text-xs text-muted-foreground space-y-1 mt-1">
                               {account && (
                                 <p className="break-words">
-                                  {account.display_name || "Unnamed Account"}
+                                  {account.name || "Unnamed Account"} •{" "}
+                                  {account.institution_id}
                                 </p>
                               )}
                               {(transaction.creditor_name ||
@@ -530,6 +676,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,56 +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/analytics/TimePeriodFilter.tsx

@@ -15,14 +15,12 @@ export default function TimePeriodFilter({
   className = "",
 }: TimePeriodFilterProps) {
   return (
-    <div
-      className={`flex flex-col sm:flex-row sm:items-center gap-4 ${className}`}
-    >
+    <div className={`flex items-center gap-4 ${className}`}>
       <div className="flex items-center gap-2 text-foreground">
         <Calendar size={20} />
         <span className="font-medium">Time Period:</span>
       </div>
-      <div className="flex flex-wrap gap-2">
+      <div className="flex gap-2">
         {TIME_PERIODS.map((period) => (
           <Button
             key={period.value}

frontend/src/components/analytics/TransactionDistribution.tsx

@@ -17,7 +17,6 @@ interface PieDataPoint {
   name: string;
   value: number;
   color: string;
-  [key: string]: string | number;
 }
 
 interface TooltipProps {

frontend/src/components/filters/AccountCombobox.tsx

@@ -38,8 +38,7 @@ export function AccountCombobox({
   );
 
   const formatAccountName = (account: Account) => {
-    const displayName =
-      account.display_name || account.name || "Unnamed Account";
+    const displayName = account.display_name || account.name || "Unnamed Account";
     return `${displayName} (${account.institution_id})`;
   };
 
@@ -51,7 +50,7 @@ export function AccountCombobox({
             variant="outline"
             role="combobox"
             aria-expanded={open}
-            className="w-full justify-between"
+            className="justify-between"
           >
             <div className="flex items-center">
               <Building2 className="mr-2 h-4 w-4" />
@@ -106,9 +105,7 @@ export function AccountCombobox({
                     />
                     <div className="flex flex-col">
                       <span className="font-medium">
-                        {account.display_name ||
-                          account.name ||
-                          "Unnamed Account"}
+                        {account.display_name || account.name || "Unnamed Account"}
                       </span>
                       <span className="text-xs text-gray-500">
                         {account.institution_id}

frontend/src/components/filters/ActiveFilterChips.tsx

@@ -8,14 +8,12 @@ import type { Account } from "../../types/api";
 export interface ActiveFilterChipsProps {
   filterState: FilterState;
   onFilterChange: (key: keyof FilterState, value: string) => void;
-  onClearFilters: () => void;
   accounts?: Account[];
 }
 
 export function ActiveFilterChips({
   filterState,
   onFilterChange,
-  onClearFilters,
   accounts = [],
 }: ActiveFilterChipsProps) {
   const chips: Array<{
@@ -70,6 +68,31 @@ export function ActiveFilterChips({
     });
   }
 
+  // Amount range chips
+  if (filterState.minAmount || filterState.maxAmount) {
+    let amountLabel = "Amount: ";
+    const minAmount = filterState.minAmount
+      ? parseFloat(filterState.minAmount)
+      : null;
+    const maxAmount = filterState.maxAmount
+      ? parseFloat(filterState.maxAmount)
+      : null;
+
+    if (minAmount && maxAmount) {
+      amountLabel += `€${minAmount} - €${maxAmount}`;
+    } else if (minAmount) {
+      amountLabel += `≥ €${minAmount}`;
+    } else if (maxAmount) {
+      amountLabel += `≤ €${maxAmount}`;
+    }
+
+    chips.push({
+      key: "minAmount", // We'll clear both min and max when removing this chip
+      label: amountLabel,
+      value: `${filterState.minAmount}-${filterState.maxAmount}`,
+    });
+  }
+
   const handleRemoveChip = (key: keyof FilterState) => {
     switch (key) {
       case "startDate":
@@ -77,6 +100,11 @@ export function ActiveFilterChips({
         onFilterChange("startDate", "");
         onFilterChange("endDate", "");
         break;
+      case "minAmount":
+        // Clear both min and max amount
+        onFilterChange("minAmount", "");
+        onFilterChange("maxAmount", "");
+        break;
       default:
         onFilterChange(key, "");
     }
@@ -107,15 +135,6 @@ export function ActiveFilterChips({
           </Button>
         </Badge>
       ))}
-      <Button
-        onClick={onClearFilters}
-        variant="outline"
-        size="sm"
-        className="text-muted-foreground ml-2"
-      >
-        <X className="h-4 w-4 mr-1" />
-        Clear All
-      </Button>
     </div>
   );
 }

frontend/src/components/filters/AdvancedFiltersPopover.tsx

@@ -0,0 +1,127 @@
+import { useState } from "react";
+import { MoreHorizontal, Euro } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+export interface AdvancedFiltersPopoverProps {
+  minAmount: string;
+  maxAmount: string;
+  onMinAmountChange: (value: string) => void;
+  onMaxAmountChange: (value: string) => void;
+}
+
+export function AdvancedFiltersPopover({
+  minAmount,
+  maxAmount,
+  onMinAmountChange,
+  onMaxAmountChange,
+}: AdvancedFiltersPopoverProps) {
+  const [open, setOpen] = useState(false);
+
+  const hasAdvancedFilters = minAmount || maxAmount;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant={hasAdvancedFilters ? "default" : "outline"}
+          size="default"
+          className="relative"
+        >
+          <MoreHorizontal className="h-4 w-4 mr-2" />
+          More
+          {hasAdvancedFilters && (
+            <div className="absolute -top-1 -right-1 h-2 w-2 bg-blue-600 rounded-full" />
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80" align="end">
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Advanced Filters</h4>
+            <p className="text-sm text-muted-foreground">
+              Additional filters for more precise results
+            </p>
+          </div>
+
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                Amount Range
+              </label>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1">
+                  <label className="text-xs text-muted-foreground">
+                    Minimum
+                  </label>
+                  <div className="relative">
+                    <Euro className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                    <Input
+                      type="number"
+                      placeholder="0.00"
+                      value={minAmount}
+                      onChange={(e) => onMinAmountChange(e.target.value)}
+                      className="pl-8"
+                      step="0.01"
+                      min="0"
+                    />
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <label className="text-xs text-muted-foreground">
+                    Maximum
+                  </label>
+                  <div className="relative">
+                    <Euro className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                    <Input
+                      type="number"
+                      placeholder="1000.00"
+                      value={maxAmount}
+                      onChange={(e) => onMaxAmountChange(e.target.value)}
+                      className="pl-8"
+                      step="0.01"
+                      min="0"
+                    />
+                  </div>
+                </div>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Leave empty for no limit
+              </p>
+            </div>
+
+            {/* Future: Add transaction status filter */}
+            <div className="pt-2 border-t">
+              <div className="text-xs text-muted-foreground">
+                More filters coming soon: transaction status, categories, and
+                more.
+              </div>
+            </div>
+
+            {/* Clear advanced filters */}
+            {hasAdvancedFilters && (
+              <div className="pt-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    onMinAmountChange("");
+                    onMaxAmountChange("");
+                  }}
+                  className="w-full"
+                >
+                  Clear Advanced Filters
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

frontend/src/components/filters/DateRangePicker.tsx

@@ -6,7 +6,6 @@ import type { DateRange } from "react-day-picker";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { Card, CardContent, CardFooter } from "@/components/ui/card";
 import {
   Popover,
   PopoverContent,
@@ -26,45 +25,43 @@ interface DatePreset {
 }
 
 const datePresets: DatePreset[] = [
-  {
-    label: "Today",
-    getValue: () => {
-      const today = new Date();
-      return {
-        startDate: today.toISOString().split("T")[0],
-        endDate: today.toISOString().split("T")[0],
-      };
-    },
-  },
-  {
-    label: "Yesterday",
-    getValue: () => {
-      const yesterday = new Date();
-      yesterday.setDate(yesterday.getDate() - 1);
-      return {
-        startDate: yesterday.toISOString().split("T")[0],
-        endDate: yesterday.toISOString().split("T")[0],
-      };
-    },
-  },
   {
     label: "Last 7 days",
     getValue: () => {
       const endDate = new Date();
       const startDate = new Date();
-      startDate.setDate(endDate.getDate() - 6);
+      startDate.setDate(endDate.getDate() - 7);
       return {
         startDate: startDate.toISOString().split("T")[0],
         endDate: endDate.toISOString().split("T")[0],
       };
     },
   },
+  {
+    label: "This week",
+    getValue: () => {
+      const now = new Date();
+      const dayOfWeek = now.getDay();
+      const startOfWeek = new Date(now);
+      startOfWeek.setDate(
+        now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1),
+      ); // Monday as start
+
+      const endOfWeek = new Date(startOfWeek);
+      endOfWeek.setDate(startOfWeek.getDate() + 6);
+
+      return {
+        startDate: startOfWeek.toISOString().split("T")[0],
+        endDate: endOfWeek.toISOString().split("T")[0],
+      };
+    },
+  },
   {
     label: "Last 30 days",
     getValue: () => {
       const endDate = new Date();
       const startDate = new Date();
-      startDate.setDate(endDate.getDate() - 29);
+      startDate.setDate(endDate.getDate() - 30);
       return {
         startDate: startDate.toISOString().split("T")[0],
         endDate: endDate.toISOString().split("T")[0],
@@ -84,6 +81,19 @@ const datePresets: DatePreset[] = [
       };
     },
   },
+  {
+    label: "This year",
+    getValue: () => {
+      const now = new Date();
+      const startOfYear = new Date(now.getFullYear(), 0, 1);
+      const endOfYear = new Date(now.getFullYear(), 11, 31);
+
+      return {
+        startDate: startOfYear.toISOString().split("T")[0],
+        endDate: endOfYear.toISOString().split("T")[0],
+      };
+    },
+  },
 ];
 
 export function DateRangePicker({
@@ -168,30 +178,34 @@ export function DateRangePicker({
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="start">
-          <Card className="w-auto py-4">
-            <CardContent className="px-4">
-              <Calendar
-                mode="range"
-                defaultMonth={dateRange?.from}
-                selected={dateRange}
-                onSelect={handleDateRangeSelect}
-                className="bg-transparent p-0"
-              />
-            </CardContent>
-            <CardFooter className="grid grid-cols-2 gap-1 border-t px-4 !pt-4">
+          <div className="flex">
+            {/* Presets */}
+            <div className="border-r p-3 space-y-1">
+              <div className="text-sm font-medium text-gray-700 mb-2">
+                Quick select
+              </div>
               {datePresets.map((preset) => (
                 <Button
                   key={preset.label}
-                  variant="outline"
+                  variant="ghost"
                   size="sm"
-                  className="text-xs px-2 h-7"
+                  className="w-full justify-start text-sm"
                   onClick={() => handlePresetClick(preset)}
                 >
                   {preset.label}
                 </Button>
               ))}
-            </CardFooter>
-          </Card>
+            </div>
+            {/* Calendar */}
+            <Calendar
+              initialFocus
+              mode="range"
+              defaultMonth={dateRange?.from}
+              selected={dateRange}
+              onSelect={handleDateRangeSelect}
+              numberOfMonths={2}
+            />
+          </div>
         </PopoverContent>
       </Popover>
     </div>

frontend/src/components/filters/FilterBar.tsx

@@ -1,9 +1,11 @@
-import { Search } from "lucide-react";
+import { Search, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
 import { DateRangePicker } from "./DateRangePicker";
 import { AccountCombobox } from "./AccountCombobox";
 import { ActiveFilterChips } from "./ActiveFilterChips";
+import { AdvancedFiltersPopover } from "./AdvancedFiltersPopover";
 import type { Account } from "../../types/api";
 
 export interface FilterState {
@@ -11,6 +13,8 @@ export interface FilterState {
   selectedAccount: string;
   startDate: string;
   endDate: string;
+  minAmount: string;
+  maxAmount: string;
 }
 
 export interface FilterBarProps {
@@ -19,6 +23,8 @@ export interface FilterBarProps {
   onClearFilters: () => void;
   accounts?: Account[];
   isSearchLoading?: boolean;
+  showRunningBalance: boolean;
+  onToggleRunningBalance: () => void;
   className?: string;
 }
 
@@ -28,13 +34,17 @@ export function FilterBar({
   onClearFilters,
   accounts,
   isSearchLoading = false,
+  showRunningBalance,
+  onToggleRunningBalance,
   className,
 }: FilterBarProps) {
   const hasActiveFilters =
     filterState.searchTerm ||
     filterState.selectedAccount ||
     filterState.startDate ||
-    filterState.endDate;
+    filterState.endDate ||
+    filterState.minAmount ||
+    filterState.maxAmount;
 
   const handleDateRangeChange = (startDate: string, endDate: string) => {
     onFilterChange("startDate", startDate);
@@ -49,86 +59,71 @@ 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 */}
-        <div className="space-y-4 mb-4">
-          {/* Desktop Layout */}
-          <div className="hidden lg:flex items-center justify-between gap-6">
-            {/* Left Side: Main Filters */}
-            <div className="flex items-center gap-3 flex-1">
-              {/* Search Input */}
-              <div className="relative w-[200px]">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                <Input
-                  placeholder="Search transactions..."
-                  value={filterState.searchTerm}
-                  onChange={(e) => onFilterChange("searchTerm", e.target.value)}
-                  className="pl-9 pr-8 bg-background"
-                />
-                {isSearchLoading && (
-                  <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
-                    <div className="animate-spin h-4 w-4 border-2 border-border border-t-primary rounded-full"></div>
-                  </div>
-                )}
+        <div className="flex flex-wrap items-center gap-3 mb-4">
+          {/* Search Input */}
+          <div className="relative flex-1 min-w-[240px]">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Search transactions..."
+              value={filterState.searchTerm}
+              onChange={(e) => onFilterChange("searchTerm", e.target.value)}
+              className="pl-9 pr-8 bg-background"
+            />
+            {isSearchLoading && (
+              <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
+                <div className="animate-spin h-4 w-4 border-2 border-border border-t-primary rounded-full"></div>
               </div>
-
-              {/* Account Selection */}
-              <AccountCombobox
-                accounts={accounts}
-                selectedAccount={filterState.selectedAccount}
-                onAccountChange={(accountId) =>
-                  onFilterChange("selectedAccount", accountId)
-                }
-                className="w-[180px]"
-              />
-
-              {/* Date Range Picker */}
-              <DateRangePicker
-                startDate={filterState.startDate}
-                endDate={filterState.endDate}
-                onDateRangeChange={handleDateRangeChange}
-                className="w-[220px]"
-              />
-            </div>
+            )}
           </div>
 
-          {/* Mobile Layout */}
-          <div className="lg:hidden space-y-3">
-            {/* First Row: Search Input (Full Width) */}
-            <div className="relative">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-              <Input
-                placeholder="Search..."
-                value={filterState.searchTerm}
-                onChange={(e) => onFilterChange("searchTerm", e.target.value)}
-                className="pl-9 pr-8 bg-background w-full"
-              />
-              {isSearchLoading && (
-                <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
-                  <div className="animate-spin h-4 w-4 border-2 border-border border-t-primary rounded-full"></div>
-                </div>
-              )}
-            </div>
+          {/* Account Selection */}
+          <AccountCombobox
+            accounts={accounts}
+            selectedAccount={filterState.selectedAccount}
+            onAccountChange={(accountId) =>
+              onFilterChange("selectedAccount", accountId)
+            }
+            className="w-[200px]"
+          />
 
-            {/* Second Row: Account Selection (Full Width) */}
-            <AccountCombobox
-              accounts={accounts}
-              selectedAccount={filterState.selectedAccount}
-              onAccountChange={(accountId) =>
-                onFilterChange("selectedAccount", accountId)
-              }
-              className="w-full"
-            />
+          {/* Date Range Picker */}
+          <DateRangePicker
+            startDate={filterState.startDate}
+            endDate={filterState.endDate}
+            onDateRangeChange={handleDateRangeChange}
+            className="w-[240px]"
+          />
 
-            {/* Third Row: Date Range */}
-            <DateRangePicker
-              startDate={filterState.startDate}
-              endDate={filterState.endDate}
-              onDateRangeChange={handleDateRangeChange}
-              className="w-full"
-            />
-          </div>
+          {/* Advanced Filters Button */}
+          <AdvancedFiltersPopover
+            minAmount={filterState.minAmount}
+            maxAmount={filterState.maxAmount}
+            onMinAmountChange={(value) => onFilterChange("minAmount", value)}
+            onMaxAmountChange={(value) => onFilterChange("maxAmount", value)}
+          />
+
+          {/* Clear Filters Button */}
+          {hasActiveFilters && (
+            <Button
+              onClick={onClearFilters}
+              variant="outline"
+              size="sm"
+              className="text-muted-foreground"
+            >
+              <X className="h-4 w-4 mr-1" />
+              Clear All
+            </Button>
+          )}
         </div>
 
         {/* Active Filter Chips */}
@@ -136,7 +131,6 @@ export function FilterBar({
           <ActiveFilterChips
             filterState={filterState}
             onFilterChange={onFilterChange}
-            onClearFilters={onClearFilters}
             accounts={accounts}
           />
         )}

frontend/src/components/filters/index.ts

@@ -2,4 +2,5 @@ export { FilterBar } from "./FilterBar";
 export { DateRangePicker } from "./DateRangePicker";
 export { AccountCombobox } from "./AccountCombobox";
 export { ActiveFilterChips } from "./ActiveFilterChips";
+export { AdvancedFiltersPopover } from "./AdvancedFiltersPopover";
 export type { FilterState, FilterBarProps } from "./FilterBar";

frontend/src/components/ui/alert.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
   {
     variants: {
       variant: {

frontend/src/components/ui/drawer.tsx

@@ -1,116 +0,0 @@
-import * as React from "react";
-import { Drawer as DrawerPrimitive } from "vaul";
-
-import { cn } from "@/lib/utils";
-
-const Drawer = ({
-  shouldScaleBackground = true,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root
-    shouldScaleBackground={shouldScaleBackground}
-    {...props}
-  />
-);
-Drawer.displayName = "Drawer";
-
-const DrawerTrigger = DrawerPrimitive.Trigger;
-
-const DrawerPortal = DrawerPrimitive.Portal;
-
-const DrawerClose = DrawerPrimitive.Close;
-
-const DrawerOverlay = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Overlay
-    ref={ref}
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
-    {...props}
-  />
-));
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
-
-const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className,
-      )}
-      {...props}
-    >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-      {children}
-    </DrawerPrimitive.Content>
-  </DrawerPortal>
-));
-DrawerContent.displayName = "DrawerContent";
-
-const DrawerHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-    {...props}
-  />
-);
-DrawerHeader.displayName = "DrawerHeader";
-
-const DrawerFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-    {...props}
-  />
-);
-DrawerFooter.displayName = "DrawerFooter";
-
-const DrawerTitle = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className,
-    )}
-    {...props}
-  />
-));
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
-
-const DrawerDescription = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
-
-export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-};

frontend/src/components/ui/edit-button.tsx

@@ -1,45 +0,0 @@
-import { Edit3 } from "lucide-react";
-import { Button } from "./button";
-import { cn } from "../../lib/utils";
-
-interface EditButtonProps {
-  onClick?: () => void;
-  disabled?: boolean;
-  className?: string;
-  size?: "default" | "sm" | "lg" | "icon";
-  variant?:
-    | "default"
-    | "destructive"
-    | "outline"
-    | "secondary"
-    | "ghost"
-    | "link";
-  children?: React.ReactNode;
-}
-
-export function EditButton({
-  onClick,
-  disabled = false,
-  className,
-  size = "sm",
-  variant = "outline",
-  children,
-  ...props
-}: EditButtonProps) {
-  return (
-    <Button
-      onClick={onClick}
-      disabled={disabled}
-      size={size}
-      variant={variant}
-      className={cn(
-        "h-8 px-3 text-muted-foreground hover:text-foreground transition-colors",
-        className,
-      )}
-      {...props}
-    >
-      <Edit3 className="h-4 w-4" />
-      <span className="ml-2">{children || "Edit"}</span>
-    </Button>
-  );
-}

frontend/src/components/ui/logo.tsx

@@ -1,46 +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/components/ui/progress.tsx

@@ -1,26 +0,0 @@
-import * as React from "react";
-import * as ProgressPrimitive from "@radix-ui/react-progress";
-
-import { cn } from "@/lib/utils";
-
-const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative h-2 w-full overflow-hidden rounded-full bg-secondary",
-      className,
-    )}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
-));
-Progress.displayName = ProgressPrimitive.Root.displayName;
-
-export { Progress };

frontend/src/components/ui/scroll-area.tsx

@@ -1,21 +0,0 @@
-import * as React from "react";
-import { cn } from "../../lib/utils";
-
-const ScrollArea = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "relative overflow-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-  </div>
-));
-ScrollArea.displayName = "ScrollArea";
-
-export { ScrollArea };

frontend/src/components/ui/separator.tsx

@@ -1,29 +0,0 @@
-import * as React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-
-import { cn } from "@/lib/utils";
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref,
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };

frontend/src/components/ui/sheet.tsx

@@ -1,140 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Sheet = SheetPrimitive.Root;
-
-const SheetTrigger = SheetPrimitive.Trigger;
-
-const SheetClose = SheetPrimitive.Close;
-
-const SheetPortal = SheetPrimitive.Portal;
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-
-const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  },
-);
-
-interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
-
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-      {children}
-    </SheetPrimitive.Content>
-  </SheetPortal>
-));
-SheetContent.displayName = SheetPrimitive.Content.displayName;
-
-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className,
-    )}
-    {...props}
-  />
-);
-SheetHeader.displayName = "SheetHeader";
-
-const SheetFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
-    {...props}
-  />
-);
-SheetFooter.displayName = "SheetFooter";
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
-    {...props}
-  />
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
-
-export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-};

frontend/src/components/ui/sidebar.tsx

@@ -1,779 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import { PanelLeft } from "lucide-react";
-
-import { useIsMobile } from "@/hooks/use-mobile";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "@/components/ui/sheet";
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-
-const SIDEBAR_COOKIE_NAME = "sidebar_state";
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "16rem";
-const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem";
-const SIDEBAR_KEYBOARD_SHORTCUT = "b";
-
-type SidebarContextProps = {
-  state: "expanded" | "collapsed";
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  openMobile: boolean;
-  setOpenMobile: (open: boolean) => void;
-  isMobile: boolean;
-  toggleSidebar: () => void;
-};
-
-const SidebarContext = React.createContext<SidebarContextProps | null>(null);
-
-function useSidebar() {
-  const context = React.useContext(SidebarContext);
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.");
-  }
-
-  return context;
-}
-
-const SidebarProvider = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    defaultOpen?: boolean;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-  }
->(
-  (
-    {
-      defaultOpen = true,
-      open: openProp,
-      onOpenChange: setOpenProp,
-      className,
-      style,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React.useState(false);
-
-    // This is the internal state of the sidebar.
-    // We use openProp and setOpenProp for control from outside the component.
-    const [_open, _setOpen] = React.useState(defaultOpen);
-    const open = openProp ?? _open;
-    const setOpen = React.useCallback(
-      (value: boolean | ((value: boolean) => boolean)) => {
-        const openState = typeof value === "function" ? value(open) : value;
-        if (setOpenProp) {
-          setOpenProp(openState);
-        } else {
-          _setOpen(openState);
-        }
-
-        // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-      },
-      [setOpenProp, open],
-    );
-
-    // Helper to toggle the sidebar.
-    const toggleSidebar = React.useCallback(() => {
-      return isMobile
-        ? setOpenMobile((open) => !open)
-        : setOpen((open) => !open);
-    }, [isMobile, setOpen, setOpenMobile]);
-
-    // Adds a keyboard shortcut to toggle the sidebar.
-    React.useEffect(() => {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (
-          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-          (event.metaKey || event.ctrlKey)
-        ) {
-          event.preventDefault();
-          toggleSidebar();
-        }
-      };
-
-      window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [toggleSidebar]);
-
-    // We add a state so that we can do data-state="expanded" or "collapsed".
-    // This makes it easier to style the sidebar with Tailwind classes.
-    const state = open ? "expanded" : "collapsed";
-
-    const contextValue = React.useMemo<SidebarContextProps>(
-      () => ({
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar,
-      }),
-      [
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar,
-      ],
-    );
-
-    return (
-      <SidebarContext.Provider value={contextValue}>
-        <TooltipProvider delayDuration={0}>
-          <div
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH,
-                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-                ...style,
-              } as React.CSSProperties
-            }
-            className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
-              className,
-            )}
-            ref={ref}
-            {...props}
-          >
-            {children}
-          </div>
-        </TooltipProvider>
-      </SidebarContext.Provider>
-    );
-  },
-);
-SidebarProvider.displayName = "SidebarProvider";
-
-const Sidebar = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    side?: "left" | "right";
-    variant?: "sidebar" | "floating" | "inset";
-    collapsible?: "offcanvas" | "icon" | "none";
-  }
->(
-  (
-    {
-      side = "left",
-      variant = "sidebar",
-      collapsible = "offcanvas",
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-
-    if (collapsible === "none") {
-      return (
-        <div
-          className={cn(
-            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
-            className,
-          )}
-          ref={ref}
-          {...props}
-        >
-          {children}
-        </div>
-      );
-    }
-
-    if (isMobile) {
-      return (
-        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-          <SheetContent
-            data-sidebar="sidebar"
-            data-mobile="true"
-            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-              } as React.CSSProperties
-            }
-            side={side}
-          >
-            <SheetHeader className="sr-only">
-              <SheetTitle>Sidebar</SheetTitle>
-              <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-            </SheetHeader>
-            <div className="flex h-full w-full flex-col">{children}</div>
-          </SheetContent>
-        </Sheet>
-      );
-    }
-
-    return (
-      <div
-        ref={ref}
-        className="group peer hidden text-sidebar-foreground md:block"
-        data-state={state}
-        data-collapsible={state === "collapsed" ? collapsible : ""}
-        data-variant={variant}
-        data-side={side}
-      >
-        {/* This is what handles the sidebar gap on desktop */}
-        <div
-          className={cn(
-            "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
-            "group-data-[collapsible=offcanvas]:w-0",
-            "group-data-[side=right]:rotate-180",
-            variant === "floating" || variant === "inset"
-              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
-          )}
-        />
-        <div
-          className={cn(
-            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
-            side === "left"
-              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-            // Adjust the padding for floating and inset variants.
-            variant === "floating" || variant === "inset"
-              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
-            className,
-          )}
-          {...props}
-        >
-          <div
-            data-sidebar="sidebar"
-            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
-          >
-            {children}
-          </div>
-        </div>
-      </div>
-    );
-  },
-);
-Sidebar.displayName = "Sidebar";
-
-const SidebarTrigger = React.forwardRef<
-  React.ElementRef<typeof Button>,
-  React.ComponentProps<typeof Button>
->(({ className, onClick, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar();
-
-  return (
-    <Button
-      ref={ref}
-      data-sidebar="trigger"
-      variant="ghost"
-      size="icon"
-      className={cn("h-7 w-7", className)}
-      onClick={(event) => {
-        onClick?.(event);
-        toggleSidebar();
-      }}
-      {...props}
-    >
-      <PanelLeft />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  );
-});
-SidebarTrigger.displayName = "SidebarTrigger";
-
-const SidebarRail = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button">
->(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar();
-
-  return (
-    <button
-      ref={ref}
-      data-sidebar="rail"
-      aria-label="Toggle Sidebar"
-      tabIndex={-1}
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
-      className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarRail.displayName = "SidebarRail";
-
-const SidebarInset = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"main">
->(({ className, ...props }, ref) => {
-  return (
-    <main
-      ref={ref}
-      className={cn(
-        "relative flex w-full flex-1 flex-col bg-background",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarInset.displayName = "SidebarInset";
-
-const SidebarInput = React.forwardRef<
-  React.ElementRef<typeof Input>,
-  React.ComponentProps<typeof Input>
->(({ className, ...props }, ref) => {
-  return (
-    <Input
-      ref={ref}
-      data-sidebar="input"
-      className={cn(
-        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarInput.displayName = "SidebarInput";
-
-const SidebarHeader = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  );
-});
-SidebarHeader.displayName = "SidebarHeader";
-
-const SidebarFooter = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  );
-});
-SidebarFooter.displayName = "SidebarFooter";
-
-const SidebarSeparator = React.forwardRef<
-  React.ElementRef<typeof Separator>,
-  React.ComponentProps<typeof Separator>
->(({ className, ...props }, ref) => {
-  return (
-    <Separator
-      ref={ref}
-      data-sidebar="separator"
-      className={cn("mx-2 w-auto bg-sidebar-border", className)}
-      {...props}
-    />
-  );
-});
-SidebarSeparator.displayName = "SidebarSeparator";
-
-const SidebarContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="content"
-      className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarContent.displayName = "SidebarContent";
-
-const SidebarGroup = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
-      {...props}
-    />
-  );
-});
-SidebarGroup.displayName = "SidebarGroup";
-
-const SidebarGroupLabel = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & { asChild?: boolean }
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "div";
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="group-label"
-      className={cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarGroupLabel.displayName = "SidebarGroupLabel";
-
-const SidebarGroupAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & { asChild?: boolean }
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="group-action"
-      className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "group-data-[collapsible=icon]:hidden",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarGroupAction.displayName = "SidebarGroupAction";
-
-const SidebarGroupContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-sidebar="group-content"
-    className={cn("w-full text-sm", className)}
-    {...props}
-  />
-));
-SidebarGroupContent.displayName = "SidebarGroupContent";
-
-const SidebarMenu = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-sidebar="menu"
-    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
-    {...props}
-  />
-));
-SidebarMenu.displayName = "SidebarMenu";
-
-const SidebarMenuItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    data-sidebar="menu-item"
-    className={cn("group/menu-item relative", className)}
-    {...props}
-  />
-));
-SidebarMenuItem.displayName = "SidebarMenuItem";
-
-const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
-      },
-      size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-const SidebarMenuButton = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & {
-    asChild?: boolean;
-    isActive?: boolean;
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
-  } & VariantProps<typeof sidebarMenuButtonVariants>
->(
-  (
-    {
-      asChild = false,
-      isActive = false,
-      variant = "default",
-      size = "default",
-      tooltip,
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    const Comp = asChild ? Slot : "button";
-    const { isMobile, state } = useSidebar();
-
-    const button = (
-      <Comp
-        ref={ref}
-        data-sidebar="menu-button"
-        data-size={size}
-        data-active={isActive}
-        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-        {...props}
-      />
-    );
-
-    if (!tooltip) {
-      return button;
-    }
-
-    if (typeof tooltip === "string") {
-      tooltip = {
-        children: tooltip,
-      };
-    }
-
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>{button}</TooltipTrigger>
-        <TooltipContent
-          side="right"
-          align="center"
-          hidden={state !== "collapsed" || isMobile}
-          {...tooltip}
-        />
-      </Tooltip>
-    );
-  },
-);
-SidebarMenuButton.displayName = "SidebarMenuButton";
-
-const SidebarMenuAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & {
-    asChild?: boolean;
-    showOnHover?: boolean;
-  }
->(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="menu-action"
-      className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        showOnHover &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarMenuAction.displayName = "SidebarMenuAction";
-
-const SidebarMenuBadge = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-sidebar="menu-badge"
-    className={cn(
-      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
-      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-      "peer-data-[size=sm]/menu-button:top-1",
-      "peer-data-[size=default]/menu-button:top-1.5",
-      "peer-data-[size=lg]/menu-button:top-2.5",
-      "group-data-[collapsible=icon]:hidden",
-      className,
-    )}
-    {...props}
-  />
-));
-SidebarMenuBadge.displayName = "SidebarMenuBadge";
-
-const SidebarMenuSkeleton = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    showIcon?: boolean;
-  }
->(({ className, showIcon = false, ...props }, ref) => {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, []);
-
-  return (
-    <div
-      ref={ref}
-      data-sidebar="menu-skeleton"
-      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
-      {...props}
-    >
-      {showIcon && (
-        <Skeleton
-          className="size-4 rounded-md"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
-      <Skeleton
-        className="h-4 max-w-[--skeleton-width] flex-1"
-        data-sidebar="menu-skeleton-text"
-        style={
-          {
-            "--skeleton-width": width,
-          } as React.CSSProperties
-        }
-      />
-    </div>
-  );
-});
-SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-
-const SidebarMenuSub = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-sidebar="menu-sub"
-    className={cn(
-      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-      "group-data-[collapsible=icon]:hidden",
-      className,
-    )}
-    {...props}
-  />
-));
-SidebarMenuSub.displayName = "SidebarMenuSub";
-
-const SidebarMenuSubItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ ...props }, ref) => <li ref={ref} {...props} />);
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-
-const SidebarMenuSubButton = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentProps<"a"> & {
-    asChild?: boolean;
-    size?: "sm" | "md";
-    isActive?: boolean;
-  }
->(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a";
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="menu-sub-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
-
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-};

frontend/src/components/ui/skeleton.tsx

@@ -1,15 +0,0 @@
-import { cn } from "@/lib/utils";
-
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-primary/10", className)}
-      {...props}
-    />
-  );
-}
-
-export { Skeleton };

frontend/src/components/ui/sonner.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { Toaster as Sonner } from "sonner";
-
-type ToasterProps = React.ComponentProps<typeof Sonner>;
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  return (
-    <Sonner
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
-  );
-};
-
-export { Toaster };

frontend/src/components/ui/switch.tsx

@@ -1,27 +0,0 @@
-import * as React from "react";
-import * as SwitchPrimitives from "@radix-ui/react-switch";
-
-import { cn } from "@/lib/utils";
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
-      )}
-    />
-  </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };

frontend/src/components/ui/tabs.tsx

@@ -1,53 +0,0 @@
-import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-
-import { cn } from "@/lib/utils";
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };

frontend/src/components/ui/tooltip.tsx

@@ -1,30 +0,0 @@
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-import { cn } from "@/lib/utils";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
-        className,
-      )}
-      {...props}
-    />
-  </TooltipPrimitive.Portal>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

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,35 +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/use-mobile.tsx

@@ -1,21 +0,0 @@
-import * as React from "react";
-
-const MOBILE_BREAKPOINT = 768;
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
-    undefined,
-  );
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-
-  return !!isMobile;
-}

frontend/src/hooks/usePWA.ts

@@ -1,72 +0,0 @@
-import { useEffect, useState } from "react";
-
-interface PWAUpdate {
-  updateAvailable: boolean;
-  updateSW: () => Promise<void>;
-  forceReload: () => Promise<void>;
-}
-
-export function usePWA(): PWAUpdate {
-  const [updateAvailable, setUpdateAvailable] = useState(false);
-  const [updateSW, setUpdateSW] = useState<() => Promise<void>>(
-    () => async () => {},
-  );
-
-  const forceReload = async (): Promise<void> => {
-    try {
-      // Clear all caches
-      if ("caches" in window) {
-        const cacheNames = await caches.keys();
-        await Promise.all(
-          cacheNames.map((cacheName) => caches.delete(cacheName)),
-        );
-        console.log("All caches cleared");
-      }
-
-      // Unregister service worker
-      if ("serviceWorker" in navigator) {
-        const registrations = await navigator.serviceWorker.getRegistrations();
-        await Promise.all(
-          registrations.map((registration) => registration.unregister()),
-        );
-        console.log("All service workers unregistered");
-      }
-
-      // Force reload
-      window.location.reload();
-    } catch (error) {
-      console.error("Error during force reload:", error);
-      // Fallback: just reload the page
-      window.location.reload();
-    }
-  };
-
-  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,
-    forceReload,
-  };
-}

frontend/src/hooks/useVersionCheck.ts

@@ -1,39 +0,0 @@
-import { useEffect } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "../lib/api";
-
-const VERSION_STORAGE_KEY = "leggen_app_version";
-
-export function useVersionCheck(forceReload: () => Promise<void>) {
-  const { data: healthStatus, isSuccess: healthSuccess } = useQuery({
-    queryKey: ["health"],
-    queryFn: apiClient.getHealth,
-    refetchInterval: 30000,
-    retry: false,
-    staleTime: 0, // Always consider data stale to ensure fresh version checks
-  });
-
-  useEffect(() => {
-    if (healthSuccess && healthStatus?.version) {
-      const currentVersion = healthStatus.version;
-      const storedVersion = localStorage.getItem(VERSION_STORAGE_KEY);
-
-      if (storedVersion && storedVersion !== currentVersion) {
-        console.log(
-          `Version mismatch detected: stored=${storedVersion}, current=${currentVersion}`,
-        );
-        console.log("Clearing cache and reloading...");
-
-        // Update stored version first
-        localStorage.setItem(VERSION_STORAGE_KEY, currentVersion);
-
-        // Force reload to clear cache
-        forceReload();
-      } else if (!storedVersion) {
-        // First time loading, store the version
-        localStorage.setItem(VERSION_STORAGE_KEY, currentVersion);
-        console.log(`Version stored: ${currentVersion}`);
-      }
-    }
-  }, [healthSuccess, healthStatus?.version, forceReload]);
-}

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%;
@@ -29,20 +29,6 @@
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
-
-    /* iOS Safe Area Support for PWA */
-    --safe-area-inset-top: env(safe-area-inset-top, 0px);
-    --safe-area-inset-right: env(safe-area-inset-right, 0px);
-    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
-    --safe-area-inset-left: env(safe-area-inset-left, 0px);
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
   }
   .dark {
     --background: 222.2 84% 4.9%;
@@ -51,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%;
@@ -69,14 +55,6 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
 

frontend/src/lib/api.ts

@@ -12,11 +12,6 @@ import type {
   HealthData,
   AccountUpdate,
   TransactionStats,
-  SyncOperationsResponse,
-  BankInstitution,
-  BankConnectionStatus,
-  BankRequisition,
-  Country,
 } from "../types/api";
 
 // Use VITE_API_URL for development, relative URLs for production
@@ -47,9 +42,10 @@ export const apiClient = {
     id: string,
     updates: AccountUpdate,
   ): Promise<{ id: string; display_name?: string }> => {
-    const response = await api.put<
-      ApiResponse<{ id: string; display_name?: string }>
-    >(`/accounts/${id}`, updates);
+    const response = await api.put<ApiResponse<{ id: string; display_name?: string }>>(
+      `/accounts/${id}`,
+      updates,
+    );
     return response.data.data;
   },
 
@@ -222,58 +218,6 @@ export const apiClient = {
     >(`/transactions/monthly-stats?${queryParams.toString()}`);
     return response.data.data;
   },
-
-  // Get sync operations history
-  getSyncOperations: async (
-    limit: number = 50,
-    offset: number = 0,
-  ): Promise<SyncOperationsResponse> => {
-    const response = await api.get<ApiResponse<SyncOperationsResponse>>(
-      `/sync/operations?limit=${limit}&offset=${offset}`,
-    );
-    return response.data.data;
-  },
-
-  // Bank management endpoints
-  getBankInstitutions: async (country: string): Promise<BankInstitution[]> => {
-    const response = await api.get<ApiResponse<BankInstitution[]>>(
-      `/banks/institutions?country=${country}`,
-    );
-    return response.data.data;
-  },
-
-  getBankConnectionsStatus: async (): Promise<BankConnectionStatus[]> => {
-    const response =
-      await api.get<ApiResponse<BankConnectionStatus[]>>("/banks/status");
-    return response.data.data;
-  },
-
-  createBankConnection: async (
-    institutionId: string,
-    redirectUrl?: string,
-  ): Promise<BankRequisition> => {
-    // If no redirect URL provided, construct it from current location
-    const finalRedirectUrl =
-      redirectUrl || `${window.location.origin}/bank-connected`;
-
-    const response = await api.post<ApiResponse<BankRequisition>>(
-      "/banks/connect",
-      {
-        institution_id: institutionId,
-        redirect_url: finalRedirectUrl,
-      },
-    );
-    return response.data.data;
-  },
-
-  deleteBankConnection: async (requisitionId: string): Promise<void> => {
-    await api.delete(`/banks/connections/${requisitionId}`);
-  },
-
-  getSupportedCountries: async (): Promise<Country[]> => {
-    const response = await api.get<ApiResponse<Country[]>>("/banks/countries");
-    return response.data.data;
-  },
 };
 
 export default apiClient;

frontend/src/routeTree.gen.ts

@@ -10,10 +10,7 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as TransactionsRouteImport } from './routes/transactions'
-import { Route as SystemRouteImport } from './routes/system'
-import { Route as SettingsRouteImport } from './routes/settings'
 import { Route as NotificationsRouteImport } from './routes/notifications'
-import { Route as BankConnectedRouteImport } from './routes/bank-connected'
 import { Route as AnalyticsRouteImport } from './routes/analytics'
 import { Route as IndexRouteImport } from './routes/index'
 
@@ -22,26 +19,11 @@ const TransactionsRoute = TransactionsRouteImport.update({
   path: '/transactions',
   getParentRoute: () => rootRouteImport,
 } as any)
-const SystemRoute = SystemRouteImport.update({
-  id: '/system',
-  path: '/system',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const SettingsRoute = SettingsRouteImport.update({
-  id: '/settings',
-  path: '/settings',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const NotificationsRoute = NotificationsRouteImport.update({
   id: '/notifications',
   path: '/notifications',
   getParentRoute: () => rootRouteImport,
 } as any)
-const BankConnectedRoute = BankConnectedRouteImport.update({
-  id: '/bank-connected',
-  path: '/bank-connected',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const AnalyticsRoute = AnalyticsRouteImport.update({
   id: '/analytics',
   path: '/analytics',
@@ -56,68 +38,34 @@ const IndexRoute = IndexRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/analytics': typeof AnalyticsRoute
-  '/bank-connected': typeof BankConnectedRoute
   '/notifications': typeof NotificationsRoute
-  '/settings': typeof SettingsRoute
-  '/system': typeof SystemRoute
   '/transactions': typeof TransactionsRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/analytics': typeof AnalyticsRoute
-  '/bank-connected': typeof BankConnectedRoute
   '/notifications': typeof NotificationsRoute
-  '/settings': typeof SettingsRoute
-  '/system': typeof SystemRoute
   '/transactions': typeof TransactionsRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/analytics': typeof AnalyticsRoute
-  '/bank-connected': typeof BankConnectedRoute
   '/notifications': typeof NotificationsRoute
-  '/settings': typeof SettingsRoute
-  '/system': typeof SystemRoute
   '/transactions': typeof TransactionsRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths:
-    | '/'
-    | '/analytics'
-    | '/bank-connected'
-    | '/notifications'
-    | '/settings'
-    | '/system'
-    | '/transactions'
+  fullPaths: '/' | '/analytics' | '/notifications' | '/transactions'
   fileRoutesByTo: FileRoutesByTo
-  to:
-    | '/'
-    | '/analytics'
-    | '/bank-connected'
-    | '/notifications'
-    | '/settings'
-    | '/system'
-    | '/transactions'
-  id:
-    | '__root__'
-    | '/'
-    | '/analytics'
-    | '/bank-connected'
-    | '/notifications'
-    | '/settings'
-    | '/system'
-    | '/transactions'
+  to: '/' | '/analytics' | '/notifications' | '/transactions'
+  id: '__root__' | '/' | '/analytics' | '/notifications' | '/transactions'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   AnalyticsRoute: typeof AnalyticsRoute
-  BankConnectedRoute: typeof BankConnectedRoute
   NotificationsRoute: typeof NotificationsRoute
-  SettingsRoute: typeof SettingsRoute
-  SystemRoute: typeof SystemRoute
   TransactionsRoute: typeof TransactionsRoute
 }
 
@@ -130,20 +78,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof TransactionsRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/system': {
-      id: '/system'
-      path: '/system'
-      fullPath: '/system'
-      preLoaderRoute: typeof SystemRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/settings': {
-      id: '/settings'
-      path: '/settings'
-      fullPath: '/settings'
-      preLoaderRoute: typeof SettingsRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/notifications': {
       id: '/notifications'
       path: '/notifications'
@@ -151,13 +85,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof NotificationsRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/bank-connected': {
-      id: '/bank-connected'
-      path: '/bank-connected'
-      fullPath: '/bank-connected'
-      preLoaderRoute: typeof BankConnectedRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/analytics': {
       id: '/analytics'
       path: '/analytics'
@@ -178,10 +105,7 @@ declare module '@tanstack/react-router' {
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AnalyticsRoute: AnalyticsRoute,
-  BankConnectedRoute: BankConnectedRoute,
   NotificationsRoute: NotificationsRoute,
-  SettingsRoute: SettingsRoute,
-  SystemRoute: SystemRoute,
   TransactionsRoute: TransactionsRoute,
 }
 export const routeTree = rootRouteImport

frontend/src/routes/__root.tsx

@@ -1,54 +1,30 @@
 import { createRootRoute, Outlet } from "@tanstack/react-router";
-import { AppSidebar } from "../components/AppSidebar";
-import { SiteHeader } from "../components/SiteHeader";
-import { PWAInstallPrompt, PWAUpdatePrompt } from "../components/PWAPrompts";
-import { usePWA } from "../hooks/usePWA";
-import { useVersionCheck } from "../hooks/useVersionCheck";
-import { SidebarInset, SidebarProvider } from "../components/ui/sidebar";
+import { useState } from "react";
+import Sidebar from "../components/Sidebar";
+import Header from "../components/Header";
 
 function RootLayout() {
-  const { updateAvailable, updateSW, forceReload } = usePWA();
-
-  // Check for version mismatches and force reload if needed
-  useVersionCheck(forceReload);
-
-  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);
-    }
-  };
+  const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (
-    <SidebarProvider
-      style={
-        {
-          "--sidebar-width": "16rem",
-          "--header-height": "4rem",
-        } as React.CSSProperties
-      }
-    >
-      <AppSidebar />
-      <SidebarInset>
-        <SiteHeader />
-        <main className="flex-1 p-6 min-w-0">
+    <div className="flex h-screen bg-background">
+      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
+
+      {/* Mobile overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/50 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>
-      </SidebarInset>
-
-      {/* PWA Prompts */}
-      <PWAInstallPrompt onInstall={handlePWAInstall} />
-      <PWAUpdatePrompt
-        updateAvailable={updateAvailable}
-        onUpdate={handlePWAUpdate}
-      />
-    </SidebarProvider>
+      </div>
+    </div>
   );
 }
 

frontend/src/routes/analytics.tsx

@@ -44,7 +44,7 @@ function AnalyticsDashboard() {
 
   if (isLoading) {
     return (
-      <div className="space-y-8">
+      <div className="p-6">
         <div className="animate-pulse">
           <div className="h-8 bg-muted rounded w-48 mb-6"></div>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
@@ -62,7 +62,7 @@ function AnalyticsDashboard() {
   }
 
   return (
-    <div className="space-y-8">
+    <div className="p-6 space-y-8">
       {/* Time Period Filter */}
       <Card>
         <CardContent className="p-4">
@@ -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/routes/bank-connected.tsx

@@ -1,57 +0,0 @@
-import { createFileRoute, useSearch } from "@tanstack/react-router";
-import { CheckCircle, ArrowLeft } from "lucide-react";
-import { Button } from "../components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "../components/ui/card";
-
-function BankConnected() {
-  const search = useSearch({ from: "/bank-connected" });
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <Card className="w-full max-w-md">
-        <CardHeader className="text-center pb-2">
-          <div className="mx-auto mb-4">
-            <CheckCircle className="h-16 w-16 text-green-500" />
-          </div>
-          <CardTitle className="text-2xl">Account Connected!</CardTitle>
-        </CardHeader>
-        <CardContent className="text-center space-y-4">
-          <p className="text-muted-foreground">
-            Your bank account has been successfully connected to Leggen. We'll
-            start syncing your transactions shortly.
-          </p>
-
-          {search?.bank && (
-            <p className="text-sm text-muted-foreground">
-              Connected to: <strong>{search.bank}</strong>
-            </p>
-          )}
-
-          <div className="pt-4">
-            <Button
-              onClick={() => (window.location.href = "/settings")}
-              className="w-full"
-            >
-              <ArrowLeft className="h-4 w-4 mr-2" />
-              Go to Settings
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-export const Route = createFileRoute("/bank-connected")({
-  component: BankConnected,
-  validateSearch: (search: Record<string, unknown>) => {
-    return {
-      bank: (search.bank as string) || undefined,
-    };
-  },
-});

frontend/src/routes/index.tsx

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

frontend/src/routes/notifications.tsx

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

frontend/src/routes/settings.tsx

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

frontend/src/routes/system.tsx

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

frontend/src/types/api.ts

@@ -13,7 +13,6 @@ export interface Account {
   name?: string;
   display_name?: string;
   currency?: string;
-  logo?: string;
   created: string;
   last_accessed?: string;
   balances: AccountBalance[];
@@ -198,17 +197,10 @@ export interface NotificationServicesResponse {
 export interface HealthData {
   status: string;
   config_loaded?: boolean;
-  version?: string;
   message?: string;
   error?: string;
 }
 
-// Version information from root endpoint
-export interface VersionData {
-  message: string;
-  version: string;
-}
-
 // Analytics data types
 export interface TransactionStats {
   period_days: number;
@@ -221,59 +213,3 @@ export interface TransactionStats {
   average_transaction: number;
   accounts_included: number;
 }
-
-// Sync operations types
-export interface SyncOperation {
-  id: number;
-  started_at: string;
-  completed_at?: string;
-  success?: boolean;
-  accounts_processed: number;
-  transactions_added: number;
-  transactions_updated: number;
-  balances_updated: number;
-  duration_seconds?: number;
-  errors: string[];
-  logs: string[];
-  trigger_type: "manual" | "scheduled" | "api";
-}
-
-export interface SyncOperationsResponse {
-  operations: SyncOperation[];
-  count: number;
-}
-
-// Bank-related types
-export interface BankInstitution {
-  id: string;
-  name: string;
-  bic?: string;
-  transaction_total_days: number;
-  countries: string[];
-  logo?: string;
-}
-
-export interface BankRequisition {
-  id: string;
-  institution_id: string;
-  status: string;
-  status_display?: string;
-  created: string;
-  link: string;
-  accounts: string[];
-}
-
-export interface BankConnectionStatus {
-  bank_id: string;
-  bank_name: string;
-  status: string;
-  status_display: string;
-  created_at: string;
-  requisition_id: string;
-  accounts_count: number;
-}
-
-export interface Country {
-  code: string;
-  name: string;
-}

frontend/src/vite-env.d.ts

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

frontend/tailwind.config.js

@@ -9,12 +9,6 @@ export default {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
-      spacing: {
-        "safe-top": "var(--safe-area-inset-top)",
-        "safe-bottom": "var(--safe-area-inset-bottom)",
-        "safe-left": "var(--safe-area-inset-left)",
-        "safe-right": "var(--safe-area-inset-right)",
-      },
       colors: {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
@@ -56,16 +50,6 @@ export default {
           4: "hsl(var(--chart-4))",
           5: "hsl(var(--chart-5))",
         },
-        sidebar: {
-          DEFAULT: "hsl(var(--sidebar-background))",
-          foreground: "hsl(var(--sidebar-foreground))",
-          primary: "hsl(var(--sidebar-primary))",
-          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
-          accent: "hsl(var(--sidebar-accent))",
-          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
-          border: "hsl(var(--sidebar-border))",
-          ring: "hsl(var(--sidebar-ring))",
-        },
       },
     },
   },

frontend/vite.config.ts

@@ -1,93 +1,10 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import { tanstackRouter } from "@tanstack/router-vite-plugin";
-import { VitePWA } from "vite-plugin-pwa";
+import { TanStackRouterVite } from "@tanstack/router-vite-plugin";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [
-    tanstackRouter(),
-    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",

leggen/api/models/accounts.py

@@ -26,7 +26,6 @@ class AccountDetails(BaseModel):
     name: Optional[str] = None
     display_name: Optional[str] = None
     currency: Optional[str] = None
-    logo: Optional[str] = None
     created: datetime
     last_accessed: Optional[datetime] = None
     balances: List[AccountBalance] = []

leggen/api/models/sync.py

@@ -4,26 +4,6 @@ from typing import Optional
 from pydantic import BaseModel
 
 
-class SyncOperation(BaseModel):
-    """Sync operation record for tracking sync history"""
-
-    id: Optional[int] = None
-    started_at: datetime
-    completed_at: Optional[datetime] = None
-    success: Optional[bool] = None
-    accounts_processed: int = 0
-    transactions_added: int = 0
-    transactions_updated: int = 0
-    balances_updated: int = 0
-    duration_seconds: Optional[float] = None
-    errors: list[str] = []
-    logs: list[str] = []
-    trigger_type: str = "manual"  # manual, scheduled, retry, api
-
-    class Config:
-        json_encoders = {datetime: lambda v: v.isoformat() if v else None}
-
-
 class SyncRequest(BaseModel):
     """Request to trigger a sync"""
 

leggen/api/routes/accounts.py

@@ -55,7 +55,6 @@ async def get_all_accounts() -> APIResponse:
                         name=db_account.get("name"),
                         display_name=db_account.get("display_name"),
                         currency=db_account.get("currency"),
-                        logo=db_account.get("logo"),
                         created=db_account["created"],
                         last_accessed=db_account.get("last_accessed"),
                         balances=balances,
@@ -116,7 +115,6 @@ async def get_account_details(account_id: str) -> APIResponse:
             name=db_account.get("name"),
             display_name=db_account.get("display_name"),
             currency=db_account.get("currency"),
-            logo=db_account.get("logo"),
             created=db_account["created"],
             last_accessed=db_account.get("last_accessed"),
             balances=balances,

leggen/api/routes/banks.py

@@ -1,4 +1,3 @@
-import httpx
 from fastapi import APIRouter, HTTPException, Query
 from loguru import logger
 
@@ -22,19 +21,14 @@ async def get_bank_institutions(
 ) -> APIResponse:
     """Get available bank institutions for a country"""
     try:
-        institutions_response = await gocardless_service.get_institutions(country)
-        # Handle both list and dict responses
-        if isinstance(institutions_response, list):
-            institutions_data = institutions_response
-        else:
-            institutions_data = institutions_response.get("results", [])
+        institutions_data = await gocardless_service.get_institutions(country)
 
         institutions = [
             BankInstitution(
                 id=inst["id"],
                 name=inst["name"],
                 bic=inst.get("bic"),
-                transaction_total_days=int(inst["transaction_total_days"]),
+                transaction_total_days=inst["transaction_total_days"],
                 countries=inst["countries"],
                 logo=inst.get("logo"),
             )
@@ -127,36 +121,13 @@ async def get_bank_connections_status() -> APIResponse:
 async def delete_bank_connection(requisition_id: str) -> APIResponse:
     """Delete a bank connection"""
     try:
-        # Delete the requisition from GoCardless
-        result = await gocardless_service.delete_requisition(requisition_id)
-
-        # GoCardless returns different responses for successful deletes
-        # We should check if the operation was actually successful
-        logger.info(f"GoCardless delete response for {requisition_id}: {result}")
-
+        # This would need to be implemented in GoCardlessService
+        # For now, return success
         return APIResponse(
             success=True,
             message=f"Bank connection {requisition_id} deleted successfully",
         )
 
-    except httpx.HTTPStatusError as http_err:
-        logger.error(
-            f"HTTP error deleting bank connection {requisition_id}: {http_err}"
-        )
-        if http_err.response.status_code == 404:
-            raise HTTPException(
-                status_code=404, detail=f"Bank connection {requisition_id} not found"
-            ) from http_err
-        elif http_err.response.status_code == 400:
-            raise HTTPException(
-                status_code=400,
-                detail=f"Invalid request to delete connection {requisition_id}",
-            ) from http_err
-        else:
-            raise HTTPException(
-                status_code=http_err.response.status_code,
-                detail=f"GoCardless API error: {http_err}",
-            ) from http_err
     except Exception as e:
         logger.error(f"Failed to delete bank connection {requisition_id}: {e}")
         raise HTTPException(

leggen/api/routes/notifications.py

@@ -37,15 +37,15 @@ async def get_notification_settings() -> APIResponse:
             if discord_config.get("webhook")
             else None,
             telegram=TelegramConfig(
-                token="***" if telegram_config.get("token") else "",
-                chat_id=telegram_config.get("chat_id", 0),
+                token="***" if telegram_config.get("api-key") else "",
+                chat_id=telegram_config.get("chat-id", 0),
                 enabled=telegram_config.get("enabled", True),
             )
-            if telegram_config.get("token")
+            if telegram_config.get("api-key")
             else None,
             filters=NotificationFilters(
-                case_insensitive=filters_config.get("case_insensitive", []),
-                case_sensitive=filters_config.get("case_sensitive"),
+                case_insensitive=filters_config.get("case-insensitive", []),
+                case_sensitive=filters_config.get("case-sensitive"),
             ),
         )
 
@@ -77,17 +77,17 @@ async def update_notification_settings(settings: NotificationSettings) -> APIRes
 
         if settings.telegram:
             notifications_config["telegram"] = {
-                "token": settings.telegram.token,
-                "chat_id": settings.telegram.chat_id,
+                "api-key": settings.telegram.token,
+                "chat-id": settings.telegram.chat_id,
                 "enabled": settings.telegram.enabled,
             }
 
         # Update filters config
         filters_config: Dict[str, Any] = {}
         if settings.filters.case_insensitive:
-            filters_config["case_insensitive"] = settings.filters.case_insensitive
+            filters_config["case-insensitive"] = settings.filters.case_insensitive
         if settings.filters.case_sensitive:
-            filters_config["case_sensitive"] = settings.filters.case_sensitive
+            filters_config["case-sensitive"] = settings.filters.case_sensitive
 
         # Save to config
         if notifications_config:
@@ -153,12 +153,12 @@ async def get_notification_services() -> APIResponse:
             "telegram": {
                 "name": "Telegram",
                 "enabled": bool(
-                    notifications_config.get("telegram", {}).get("token")
-                    and notifications_config.get("telegram", {}).get("chat_id")
+                    notifications_config.get("telegram", {}).get("api-key")
+                    and notifications_config.get("telegram", {}).get("chat-id")
                 ),
                 "configured": bool(
-                    notifications_config.get("telegram", {}).get("token")
-                    and notifications_config.get("telegram", {}).get("chat_id")
+                    notifications_config.get("telegram", {}).get("api-key")
+                    and notifications_config.get("telegram", {}).get("chat-id")
                 ),
                 "active": notifications_config.get("telegram", {}).get("enabled", True),
             },

leggen/api/routes/sync.py

@@ -56,7 +56,6 @@ async def trigger_sync(
                 sync_service.sync_specific_accounts,
                 sync_request.account_ids,
                 sync_request.force if sync_request else False,
-                "api",  # trigger_type
             )
             message = (
                 f"Started sync for {len(sync_request.account_ids)} specific accounts"
@@ -66,7 +65,6 @@ async def trigger_sync(
             background_tasks.add_task(
                 sync_service.sync_all_accounts,
                 sync_request.force if sync_request else False,
-                "api",  # trigger_type
             )
             message = "Started sync for all accounts"
 
@@ -92,11 +90,11 @@ async def sync_now(sync_request: Optional[SyncRequest] = None) -> APIResponse:
     try:
         if sync_request and sync_request.account_ids:
             result = await sync_service.sync_specific_accounts(
-                sync_request.account_ids, sync_request.force, "api"
+                sync_request.account_ids, sync_request.force
             )
         else:
             result = await sync_service.sync_all_accounts(
-                sync_request.force if sync_request else False, "api"
+                sync_request.force if sync_request else False
             )
 
         return APIResponse(
@@ -213,24 +211,3 @@ async def stop_scheduler() -> APIResponse:
         raise HTTPException(
             status_code=500, detail=f"Failed to stop scheduler: {str(e)}"
         ) from e
-
-
-@router.get("/sync/operations", response_model=APIResponse)
-async def get_sync_operations(limit: int = 50, offset: int = 0) -> APIResponse:
-    """Get sync operations history"""
-    try:
-        operations = await sync_service.database.get_sync_operations(
-            limit=limit, offset=offset
-        )
-
-        return APIResponse(
-            success=True,
-            data={"operations": operations, "count": len(operations)},
-            message="Sync operations retrieved successfully",
-        )
-
-    except Exception as e:
-        logger.error(f"Failed to get sync operations: {e}")
-        raise HTTPException(
-            status_code=500, detail=f"Failed to get sync operations: {str(e)}"
-        ) from e

leggen/api_client.py

@@ -1,6 +1,6 @@
 import os
 from typing import Any, Dict, List, Optional, Union
-from urllib.parse import urljoin, urlparse
+from urllib.parse import urljoin
 
 import requests
 
@@ -13,22 +13,11 @@ class LeggenAPIClient:
     base_url: str
 
     def __init__(self, base_url: Optional[str] = None):
-        raw_url = (
+        self.base_url = (
             base_url
             or os.environ.get("LEGGEN_API_URL", "http://localhost:8000")
             or "http://localhost:8000"
         )
-        # Ensure base_url includes /api/v1 path if not already present
-        parsed = urlparse(raw_url)
-        if not parsed.path or parsed.path == "/":
-            # No path or just root, add /api/v1
-            self.base_url = f"{raw_url.rstrip('/')}/api/v1"
-        elif not parsed.path.startswith("/api/v1"):
-            # Has a path but not /api/v1, add it
-            self.base_url = f"{raw_url.rstrip('/')}/api/v1"
-        else:
-            # Already has /api/v1 path
-            self.base_url = raw_url.rstrip("/")
         self.session = requests.Session()
         self.session.headers.update(
             {"Content-Type": "application/json", "Accept": "application/json"}
@@ -36,14 +25,7 @@ class LeggenAPIClient:
 
     def _make_request(self, method: str, endpoint: str, **kwargs) -> Dict[str, Any]:
         """Make HTTP request to the API"""
-        # Construct URL by joining base_url with endpoint
-        # Handle both relative endpoints (starting with /) and paths
-        if endpoint.startswith("/"):
-            # Absolute endpoint path - append to base_url
-            url = f"{self.base_url}{endpoint}"
-        else:
-            # Relative endpoint, use urljoin
-            url = urljoin(f"{self.base_url}/", endpoint)
+        url = urljoin(self.base_url, endpoint)
 
         try:
             response = self.session.request(method, url, **kwargs)
@@ -70,9 +52,7 @@ class LeggenAPIClient:
         """Check if the leggen server is healthy"""
         try:
             response = self._make_request("GET", "/health")
-            # The API now returns nested data structure
-            data = response.get("data", {})
-            return data.get("status") == "healthy"
+            return response.get("status") == "healthy"
         except Exception:
             return False
 
@@ -80,7 +60,7 @@ class LeggenAPIClient:
     def get_institutions(self, country: str = "PT") -> List[Dict[str, Any]]:
         """Get bank institutions for a country"""
         response = self._make_request(
-            "GET", "/banks/institutions", params={"country": country}
+            "GET", "/api/v1/banks/institutions", params={"country": country}
         )
         return response.get("data", [])
 
@@ -90,35 +70,35 @@ class LeggenAPIClient:
         """Connect to a bank"""
         response = self._make_request(
             "POST",
-            "/banks/connect",
+            "/api/v1/banks/connect",
             json={"institution_id": institution_id, "redirect_url": redirect_url},
         )
         return response.get("data", {})
 
     def get_bank_status(self) -> List[Dict[str, Any]]:
         """Get bank connection status"""
-        response = self._make_request("GET", "/banks/status")
+        response = self._make_request("GET", "/api/v1/banks/status")
         return response.get("data", [])
 
     def get_supported_countries(self) -> List[Dict[str, Any]]:
         """Get supported countries"""
-        response = self._make_request("GET", "/banks/countries")
+        response = self._make_request("GET", "/api/v1/banks/countries")
         return response.get("data", [])
 
     # Account endpoints
     def get_accounts(self) -> List[Dict[str, Any]]:
         """Get all accounts"""
-        response = self._make_request("GET", "/accounts")
+        response = self._make_request("GET", "/api/v1/accounts")
         return response.get("data", [])
 
     def get_account_details(self, account_id: str) -> Dict[str, Any]:
         """Get account details"""
-        response = self._make_request("GET", f"/accounts/{account_id}")
+        response = self._make_request("GET", f"/api/v1/accounts/{account_id}")
         return response.get("data", {})
 
     def get_account_balances(self, account_id: str) -> List[Dict[str, Any]]:
         """Get account balances"""
-        response = self._make_request("GET", f"/accounts/{account_id}/balances")
+        response = self._make_request("GET", f"/api/v1/accounts/{account_id}/balances")
         return response.get("data", [])
 
     def get_account_transactions(
@@ -127,7 +107,7 @@ class LeggenAPIClient:
         """Get account transactions"""
         response = self._make_request(
             "GET",
-            f"/accounts/{account_id}/transactions",
+            f"/api/v1/accounts/{account_id}/transactions",
             params={"limit": limit, "summary_only": summary_only},
         )
         return response.get("data", [])
@@ -140,7 +120,7 @@ class LeggenAPIClient:
         params = {"limit": limit, "summary_only": summary_only}
         params.update(filters)
 
-        response = self._make_request("GET", "/transactions", params=params)
+        response = self._make_request("GET", "/api/v1/transactions", params=params)
         return response.get("data", [])
 
     def get_transaction_stats(
@@ -151,13 +131,15 @@ class LeggenAPIClient:
         if account_id:
             params["account_id"] = account_id
 
-        response = self._make_request("GET", "/transactions/stats", params=params)
+        response = self._make_request(
+            "GET", "/api/v1/transactions/stats", params=params
+        )
         return response.get("data", {})
 
     # Sync endpoints
     def get_sync_status(self) -> Dict[str, Any]:
         """Get sync status"""
-        response = self._make_request("GET", "/sync/status")
+        response = self._make_request("GET", "/api/v1/sync/status")
         return response.get("data", {})
 
     def trigger_sync(
@@ -168,7 +150,7 @@ class LeggenAPIClient:
         if account_ids:
             data["account_ids"] = account_ids
 
-        response = self._make_request("POST", "/sync", json=data)
+        response = self._make_request("POST", "/api/v1/sync", json=data)
         return response.get("data", {})
 
     def sync_now(
@@ -179,12 +161,12 @@ class LeggenAPIClient:
         if account_ids:
             data["account_ids"] = account_ids
 
-        response = self._make_request("POST", "/sync/now", json=data)
+        response = self._make_request("POST", "/api/v1/sync/now", json=data)
         return response.get("data", {})
 
     def get_scheduler_config(self) -> Dict[str, Any]:
         """Get scheduler configuration"""
-        response = self._make_request("GET", "/sync/scheduler")
+        response = self._make_request("GET", "/api/v1/sync/scheduler")
         return response.get("data", {})
 
     def update_scheduler_config(
@@ -203,5 +185,5 @@ class LeggenAPIClient:
         if cron:
             data["cron"] = cron
 
-        response = self._make_request("PUT", "/sync/scheduler", json=data)
+        response = self._make_request("PUT", "/api/v1/sync/scheduler", json=data)
         return response.get("data", {})

leggen/background/scheduler.py

@@ -102,19 +102,17 @@ class BackgroundScheduler:
     async def _run_sync(self, retry_count: int = 0):
         """Run sync with enhanced error handling and retry logic"""
         try:
-            trigger_type = "retry" if retry_count > 0 else "scheduled"
-            logger.info(f"Starting {trigger_type} sync job")
-            await self.sync_service.sync_all_accounts(trigger_type=trigger_type)
-            logger.info(f"{trigger_type.capitalize()} sync job completed successfully")
+            logger.info("Starting scheduled sync job")
+            await self.sync_service.sync_all_accounts()
+            logger.info("Scheduled sync job completed successfully")
         except Exception as e:
-            trigger_type = "retry" if retry_count > 0 else "scheduled"
             logger.error(
-                f"{trigger_type.capitalize()} sync job failed (attempt {retry_count + 1}/{self.max_retries}): {e}"
+                f"Scheduled sync job failed (attempt {retry_count + 1}/{self.max_retries}): {e}"
             )
 
             # Send notification about the failure
             try:
-                await self.notification_service.send_sync_failure_notification(
+                await self.notification_service.send_expiry_notification(
                     {
                         "type": "sync_failure",
                         "error": str(e),
@@ -147,7 +145,7 @@ class BackgroundScheduler:
                 logger.error("Maximum retries exceeded for sync job")
                 # Send final failure notification
                 try:
-                    await self.notification_service.send_sync_failure_notification(
+                    await self.notification_service.send_expiry_notification(
                         {
                             "type": "sync_final_failure",
                             "error": str(e),

leggen/commands/bank/delete.py

@@ -1,6 +1,5 @@
 import click
 
-from leggen.api_client import LeggenAPIClient
 from leggen.main import cli
 from leggen.utils.text import info, success
 
@@ -16,11 +15,12 @@ def delete(ctx, requisition_id: str):
 
     Check `leggen status` to get the REQUISITION_ID
     """
-    api_client = LeggenAPIClient(ctx.obj.get("api_url"))
+    import requests
 
     info(f"Deleting Bank Requisition: {requisition_id}")
 
-    # Use API client to make the delete request
-    api_client._make_request("DELETE", f"/requisitions/{requisition_id}")
+    api_url = ctx.obj.get("api_url", "http://localhost:8000")
+    res = requests.delete(f"{api_url}/requisitions/{requisition_id}")
+    res.raise_for_status()
 
     success(f"Bank Requisition {requisition_id} deleted")

leggen/commands/server.py

@@ -82,6 +82,15 @@ def create_app() -> FastAPI:
     app.include_router(sync.router, prefix="/api/v1", tags=["sync"])
     app.include_router(notifications.router, prefix="/api/v1", tags=["notifications"])
 
+    @app.get("/")
+    async def root():
+        # Get version dynamically
+        try:
+            version = metadata.version("leggen")
+        except metadata.PackageNotFoundError:
+            version = "unknown"
+        return {"message": "Leggen API is running", "version": version}
+
     @app.get("/api/v1/health")
     async def health():
         """Health check endpoint for API connectivity"""
@@ -90,18 +99,11 @@ def create_app() -> FastAPI:
 
             config_loaded = config._config is not None
 
-            # Get version dynamically
-            try:
-                version = metadata.version("leggen")
-            except metadata.PackageNotFoundError:
-                version = "dev"
-
             return APIResponse(
                 success=True,
                 data={
                     "status": "healthy",
                     "config_loaded": config_loaded,
-                    "version": version,
                     "message": "API is running and responsive",
                 },
                 message="Health check successful",

leggen/models/config.py

@@ -22,8 +22,8 @@ class DiscordNotificationConfig(BaseModel):
 
 
 class TelegramNotificationConfig(BaseModel):
-    token: str = Field(..., description="Telegram bot token")
-    chat_id: int = Field(..., description="Telegram chat ID")
+    token: str = Field(..., alias="api-key", description="Telegram bot token")
+    chat_id: int = Field(..., alias="chat-id", description="Telegram chat ID")
     enabled: bool = Field(default=True, description="Enable Telegram notifications")
 
 
@@ -33,8 +33,12 @@ class NotificationConfig(BaseModel):
 
 
 class FilterConfig(BaseModel):
-    case_insensitive: Optional[List[str]] = Field(default_factory=list)
-    case_sensitive: Optional[List[str]] = Field(default_factory=list)
+    case_insensitive: Optional[List[str]] = Field(
+        default_factory=list, alias="case-insensitive"
+    )
+    case_sensitive: Optional[List[str]] = Field(
+        default_factory=list, alias="case-sensitive"
+    )
 
 
 class SyncScheduleConfig(BaseModel):
@@ -56,3 +60,6 @@ class Config(BaseModel):
     notifications: Optional[NotificationConfig] = None
     filters: Optional[FilterConfig] = None
     scheduler: SchedulerConfig = Field(default_factory=SchedulerConfig)
+
+    class Config:
+        validate_by_name = True

leggen/notifications/discord.py

@@ -55,44 +55,3 @@ def send_transactions_message(ctx: click.Context, transactions: list):
         response.raise_for_status()
     except Exception as e:
         raise Exception(f"Discord notification failed: {e}\n{response.text}") from e
-
-
-def send_sync_failure_notification(ctx: click.Context, notification: dict):
-    info("Sending sync failure notification to Discord")
-    webhook = DiscordWebhook(url=ctx.obj["notifications"]["discord"]["webhook"])
-
-    # Determine color and title based on failure type
-    if notification.get("type") == "sync_final_failure":
-        color = "ff0000"  # Red for final failure
-        title = "🚨 Sync Final Failure"
-        description = (
-            f"Sync failed permanently after {notification['retry_count']} attempts"
-        )
-    else:
-        color = "ffaa00"  # Orange for retry
-        title = "⚠️ Sync Failure"
-        description = f"Sync failed (attempt {notification['retry_count']}/{notification['max_retries']}). Will retry automatically..."
-
-    embed = DiscordEmbed(
-        title=title,
-        description=description,
-        color=color,
-    )
-    embed.set_author(
-        name="Leggen",
-        url="https://github.com/elisiariocouto/leggen",
-    )
-    embed.add_embed_field(
-        name="Error",
-        value=notification["error"][:1024],  # Discord has field value limits
-        inline=False,
-    )
-    embed.set_footer(text="Sync failure notification")
-    embed.set_timestamp()
-
-    webhook.add_embed(embed)
-    response = webhook.execute()
-    try:
-        response.raise_for_status()
-    except Exception as e:
-        raise Exception(f"Discord notification failed: {e}\n{response.text}") from e