chore(ci): Bump version to 2025.9.23

Fixed scheduled syncs being incorrectly saved as "manual" in database.
Now properly identifies scheduled syncs as "scheduled" and retry
attempts as "retry". Updated frontend to capitalize trigger type
badges for better display.

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

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

.claude/settings.local.json

@@ -1,22 +0,0 @@
-{
-  "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

@@ -10,46 +10,48 @@ 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'
           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,24 +143,21 @@ 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
-        run: |
-          echo "notes<<EOF" >> $GITHUB_OUTPUT
-          git-cliff --current >> $GITHUB_OUTPUT
-          echo "EOF" >> $GITHUB_OUTPUT
-          
+        with:
+          config: cliff.toml
+          args: --current
+        env:
+          GITHUB_REPO: ${{ github.repository }}
+
       - 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.notes }}
+          body: ${{ steps.release_notes.outputs.content }}
           draft: false
           prerelease: false

.gitignore

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

.mcp.json

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

AGENTS.md

@@ -81,10 +81,34 @@ 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
@@ -98,9 +122,20 @@ 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,4 +1,416 @@
 
+## 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)
+
+
+## 2025.9.12 (2025/09/15)
+
+
+## 2025.9.11 (2025/09/15)
+
+### Bug Fixes
+
+- **config:** Add Pydantic validation and fix telegram config field mappings. ([2c6e0995](https://github.com/elisiariocouto/leggen/commit/2c6e0995968c9c9917992fd15ec10a89933c0c21))
+- **config:** Fix example config file. ([d09cf6d0](https://github.com/elisiariocouto/leggen/commit/d09cf6d04ccb6233981f273cd88e0b8ffe074d71))
+- **docs:** Remove test files and update gitignore ([692bee57](https://github.com/elisiariocouto/leggen/commit/692bee574ee8de16496a3c733bad53be3b256990))
+- **frontend:** Align balance calculation between sidebar and Analytics page ([35b6d98e](https://github.com/elisiariocouto/leggen/commit/35b6d98e6a37b1e9caf8a232ffe66380e7203cad))
+- **frontend:** Add ignore rules for eslint on shadcn components. ([74a700ff](https://github.com/elisiariocouto/leggen/commit/74a700ff87b2504c3d394cddd9935c56c3c7a00d))
+-  Resolve all CI failures - linting, typing, and test issues ([c8f0a103](https://github.com/elisiariocouto/leggen/commit/c8f0a103c6ccdb722bbab1ac6973827b41fddc19))
+
+
+### Features
+
+- **analytics:** Fix transaction limits and improve chart legends ([e136fc4b](https://github.com/elisiariocouto/leggen/commit/e136fc4b75243b35a77bc0bf0260808006987d7a))
+- **docs:** Add comprehensive copilot agent setup instructions ([c6ac4455](https://github.com/elisiariocouto/leggen/commit/c6ac4455f848dd429100dd3fc6d43de8c4e5aa6b))
+- **docs:** Add configuration file setup to agent instructions ([482f16c7](https://github.com/elisiariocouto/leggen/commit/482f16c77eef1f477ba49475fe30f809de9a05d7))
+- **frontend:** Enhance transactions page with advanced filtering and UI improvements. ([969776fb](https://github.com/elisiariocouto/leggen/commit/969776fb53261acca2f77b0c761584e201fde118))
+- **frontend:** Replace heavy filter UI with modern shadcn/ui inline filter bar. ([eb27f191](https://github.com/elisiariocouto/leggen/commit/eb27f19196d92a6ae5220b81709fded499a12f4f))
+- **frontend:** Complete shadcn/ui migration with dark mode support and analytics updates. ([66db34c7](https://github.com/elisiariocouto/leggen/commit/66db34c712300ff4b5dbe7e06246f16d6f6a8469))
+
+
+### Miscellaneous Tasks
+
+-  Sort imports, fix deprecated pydantic option. ([2467cb2f](https://github.com/elisiariocouto/leggen/commit/2467cb2f5af07a7262b3221bf61b58ad4017659a))
+-  Check import order using ruff. ([da98b7b2](https://github.com/elisiariocouto/leggen/commit/da98b7b2b77c5b37792dedff11f8256da3b086f7))
+
+
+### Refactor
+
+- **analytics:** Simplify analytics endpoints and eliminate client-side processing. ([077e2bb1](https://github.com/elisiariocouto/leggen/commit/077e2bb1adbdb73ffde17635bd918cd40fe7fb5a))
+-  Unify leggen and leggend packages into single leggen package ([318ca517](https://github.com/elisiariocouto/leggen/commit/318ca517f7ea599b37a8deb47ad80218fbae008f))
+-  Consolidate database layer and eliminate wrapper complexity. ([5ae3a51d](https://github.com/elisiariocouto/leggen/commit/5ae3a51d8138b9aa28dbceabf575ab2577402e70))
+
+
+
+## 2025.9.11 (2025/09/15)
+
+### Bug Fixes
+
+- **config:** Add Pydantic validation and fix telegram config field mappings. ([2c6e0995](https://github.com/elisiariocouto/leggen/commit/2c6e0995968c9c9917992fd15ec10a89933c0c21))
+- **config:** Fix example config file. ([d09cf6d0](https://github.com/elisiariocouto/leggen/commit/d09cf6d04ccb6233981f273cd88e0b8ffe074d71))
+- **docs:** Remove test files and update gitignore ([692bee57](https://github.com/elisiariocouto/leggen/commit/692bee574ee8de16496a3c733bad53be3b256990))
+- **frontend:** Align balance calculation between sidebar and Analytics page ([35b6d98e](https://github.com/elisiariocouto/leggen/commit/35b6d98e6a37b1e9caf8a232ffe66380e7203cad))
+- **frontend:** Add ignore rules for eslint on shadcn components. ([74a700ff](https://github.com/elisiariocouto/leggen/commit/74a700ff87b2504c3d394cddd9935c56c3c7a00d))
+-  Resolve all CI failures - linting, typing, and test issues ([c8f0a103](https://github.com/elisiariocouto/leggen/commit/c8f0a103c6ccdb722bbab1ac6973827b41fddc19))
+
+
+### Features
+
+- **analytics:** Fix transaction limits and improve chart legends ([e136fc4b](https://github.com/elisiariocouto/leggen/commit/e136fc4b75243b35a77bc0bf0260808006987d7a))
+- **docs:** Add comprehensive copilot agent setup instructions ([c6ac4455](https://github.com/elisiariocouto/leggen/commit/c6ac4455f848dd429100dd3fc6d43de8c4e5aa6b))
+- **docs:** Add configuration file setup to agent instructions ([482f16c7](https://github.com/elisiariocouto/leggen/commit/482f16c77eef1f477ba49475fe30f809de9a05d7))
+- **frontend:** Enhance transactions page with advanced filtering and UI improvements. ([969776fb](https://github.com/elisiariocouto/leggen/commit/969776fb53261acca2f77b0c761584e201fde118))
+- **frontend:** Replace heavy filter UI with modern shadcn/ui inline filter bar. ([eb27f191](https://github.com/elisiariocouto/leggen/commit/eb27f19196d92a6ae5220b81709fded499a12f4f))
+- **frontend:** Complete shadcn/ui migration with dark mode support and analytics updates. ([66db34c7](https://github.com/elisiariocouto/leggen/commit/66db34c712300ff4b5dbe7e06246f16d6f6a8469))
+
+
+### Miscellaneous Tasks
+
+-  Sort imports, fix deprecated pydantic option. ([2467cb2f](https://github.com/elisiariocouto/leggen/commit/2467cb2f5af07a7262b3221bf61b58ad4017659a))
+-  Check import order using ruff. ([da98b7b2](https://github.com/elisiariocouto/leggen/commit/da98b7b2b77c5b37792dedff11f8256da3b086f7))
+
+
+### Refactor
+
+- **analytics:** Simplify analytics endpoints and eliminate client-side processing. ([077e2bb1](https://github.com/elisiariocouto/leggen/commit/077e2bb1adbdb73ffde17635bd918cd40fe7fb5a))
+-  Unify leggen and leggend packages into single leggen package ([318ca517](https://github.com/elisiariocouto/leggen/commit/318ca517f7ea599b37a8deb47ad80218fbae008f))
+-  Consolidate database layer and eliminate wrapper complexity. ([5ae3a51d](https://github.com/elisiariocouto/leggen/commit/5ae3a51d8138b9aa28dbceabf575ab2577402e70))
+
+
+
 ## 2025.9.10 (2025/09/13)
 
 ### Miscellaneous Tasks

CONTRIBUTING.md

@@ -1,9 +1,19 @@
 # Contributing
 
-Install Poetry and run `poetry install` to install dependencies. Then run `poetry shell` to activate the virtual environment.
+This project uses **uv** for Python dependency management and **shadcn/ui** for frontend components.
+
+## Setup
+Install uv and run `uv sync` to install dependencies.
 
 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,6 +20,7 @@ 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
@@ -146,8 +147,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]
-api-key = "your-bot-token"
-chat-id = 12345
+token = "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/.gitignore

@@ -10,6 +10,7 @@ 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"]),
+  globalIgnores(["dist", "dev-dist"]),
   {
     files: ["**/*.{ts,tsx}"],
     extends: [
@@ -19,5 +19,17 @@ export default tseslint.config([
       ecmaVersion: 2020,
       globals: globals.browser,
     },
+    rules: {
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
+  {
+    files: ["src/components/**/*.{ts,tsx}", "src/contexts/**/*.{ts,tsx}"],
+    rules: {
+      "react-refresh/only-export-components": "off",
+    },
   },
 ]);

frontend/index.html

@@ -2,9 +2,49 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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"
+    />
     <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,10 +10,26 @@
     "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",
@@ -26,27 +42,35 @@
     "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": "^3.2.0",
+    "recharts": "^2.15.4",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^3.4.17",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
+    "zod": "^3.25.76"
   },
   "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": "^7.1.2",
+    "vite-plugin-pwa": "^1.0.3"
   }
 }

frontend/public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?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,4 +1,27 @@
-<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 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>

frontend/public/robots.txt

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

frontend/pwa-assets.config.json

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

frontend/src/App.tsx

@@ -1,23 +0,0 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import Dashboard from "./components/Dashboard";
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      retry: 1,
-    },
-  },
-});
-
-function App() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <div className="min-h-screen bg-gray-50">
-        <Dashboard />
-      </div>
-    </QueryClientProvider>
-  );
-}
-
-export default App;

frontend/src/components/AccountSettings.tsx

@@ -0,0 +1,363 @@
+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

@@ -13,38 +13,47 @@ import {
 } from "lucide-react";
 import { apiClient } from "../lib/api";
 import { formatCurrency, formatDate } from "../lib/utils";
-import LoadingSpinner from "./LoadingSpinner";
+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':
+    case "ready":
       return {
-        color: 'bg-green-500',
-        tooltip: 'Ready',
+        color: "bg-green-500",
+        tooltip: "Ready",
       };
-    case 'pending':
+    case "pending":
       return {
-        color: 'bg-yellow-500',
-        tooltip: 'Pending',
+        color: "bg-amber-500",
+        tooltip: "Pending",
       };
-    case 'error':
-    case 'failed':
+    case "error":
+    case "failed":
       return {
-        color: 'bg-red-500',
-        tooltip: 'Error',
+        color: "bg-destructive",
+        tooltip: "Error",
       };
-    case 'inactive':
+    case "inactive":
       return {
-        color: 'bg-gray-500',
-        tooltip: 'Inactive',
+        color: "bg-muted-foreground",
+        tooltip: "Inactive",
       };
     default:
       return {
-        color: 'bg-blue-500',
+        color: "bg-primary",
         tooltip: status,
       };
   }
@@ -72,8 +81,8 @@ export default function AccountsOverview() {
   const queryClient = useQueryClient();
 
   const updateAccountMutation = useMutation({
-    mutationFn: ({ id, name }: { id: string; name: string }) =>
-      apiClient.updateAccount(id, { name }),
+    mutationFn: ({ id, display_name }: { id: string; display_name: string }) =>
+      apiClient.updateAccount(id, { display_name }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["accounts"] });
       setEditingAccountId(null);
@@ -86,14 +95,15 @@ export default function AccountsOverview() {
 
   const handleEditStart = (account: Account) => {
     setEditingAccountId(account.id);
-    setEditingName(account.name || "");
+    // 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,
-        name: editingName.trim(),
+        display_name: editingName.trim(),
       });
     }
   };
@@ -104,36 +114,25 @@ export default function AccountsOverview() {
   };
 
   if (accountsLoading) {
-    return (
-      <div className="bg-white rounded-lg shadow">
-        <LoadingSpinner message="Loading accounts..." />
-      </div>
-    );
+    return <AccountsSkeleton />;
   }
 
   if (accountsError) {
     return (
-      <div className="bg-white rounded-lg shadow p-6">
-        <div className="flex items-center justify-center text-center">
-          <div>
-            <AlertCircle className="h-12 w-12 text-red-400 mx-auto mb-4" />
-            <h3 className="text-lg font-medium text-gray-900 mb-2">
-              Failed to load accounts
-            </h3>
-            <p className="text-gray-600 mb-4">
-              Unable to connect to the Leggen API. Please check your
-              configuration and ensure the API server is running.
-            </p>
-            <button
-              onClick={() => refetchAccounts()}
-              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" />
-              Retry
-            </button>
-          </div>
-        </div>
-      </div>
+      <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>
     );
   }
 
@@ -151,213 +150,231 @@ export default function AccountsOverview() {
     <div className="space-y-6">
       {/* Summary Cards */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <div className="bg-white rounded-lg shadow p-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-gray-600">Total Balance</p>
-              <p className="text-2xl font-bold text-gray-900">
-                {formatCurrency(totalBalance)}
-              </p>
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">
+                  Total Balance
+                </p>
+                <p className="text-2xl font-bold text-foreground">
+                  {formatCurrency(totalBalance)}
+                </p>
+              </div>
+              <div className="p-3 bg-green-100 dark:bg-green-900/20 rounded-full">
+                <TrendingUp className="h-6 w-6 text-green-600" />
+              </div>
             </div>
-            <div className="p-3 bg-green-100 rounded-full">
-              <TrendingUp className="h-6 w-6 text-green-600" />
-            </div>
-          </div>
-        </div>
+          </CardContent>
+        </Card>
 
-        <div className="bg-white rounded-lg shadow p-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-gray-600">
-                Total Accounts
-              </p>
-              <p className="text-2xl font-bold text-gray-900">
-                {totalAccounts}
-              </p>
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">
+                  Total Accounts
+                </p>
+                <p className="text-2xl font-bold text-foreground">
+                  {totalAccounts}
+                </p>
+              </div>
+              <div className="p-3 bg-blue-100 dark:bg-blue-900/20 rounded-full">
+                <CreditCard className="h-6 w-6 text-blue-600" />
+              </div>
             </div>
-            <div className="p-3 bg-blue-100 rounded-full">
-              <CreditCard className="h-6 w-6 text-blue-600" />
-            </div>
-          </div>
-        </div>
+          </CardContent>
+        </Card>
 
-        <div className="bg-white rounded-lg shadow p-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-gray-600">
-                Connected Banks
-              </p>
-              <p className="text-2xl font-bold text-gray-900">{uniqueBanks}</p>
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">
+                  Connected Banks
+                </p>
+                <p className="text-2xl font-bold text-foreground">
+                  {uniqueBanks}
+                </p>
+              </div>
+              <div className="p-3 bg-muted rounded-full">
+                <Building2 className="h-6 w-6 text-muted-foreground" />
+              </div>
             </div>
-            <div className="p-3 bg-purple-100 rounded-full">
-              <Building2 className="h-6 w-6 text-purple-600" />
-            </div>
-          </div>
-        </div>
+          </CardContent>
+        </Card>
       </div>
 
       {/* Accounts List */}
-      <div className="bg-white rounded-lg shadow">
-        <div className="px-6 py-4 border-b border-gray-200">
-          <h3 className="text-lg font-medium text-gray-900">Bank Accounts</h3>
-          <p className="text-sm text-gray-600">
-            Manage your connected bank accounts
-          </p>
-        </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>Bank Accounts</CardTitle>
+          <CardDescription>Manage your connected bank accounts</CardDescription>
+        </CardHeader>
 
         {!accounts || accounts.length === 0 ? (
-          <div className="p-6 text-center">
-            <CreditCard className="h-12 w-12 text-gray-400 mx-auto mb-4" />
-            <h3 className="text-lg font-medium text-gray-900 mb-2">
+          <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-gray-600">
+            <p className="text-muted-foreground">
               Connect your first bank account to get started with Leggen.
             </p>
-          </div>
+          </CardContent>
         ) : (
-          <div className="divide-y divide-gray-200">
-            {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;
+          <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-gray-50 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 p-2 sm:p-3 bg-gray-100 rounded-full">
-                        <Building2 className="h-5 w-5 sm:h-6 sm:w-6 text-gray-600" />
-                      </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-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                                placeholder="Account name"
-                                name="search"
-                                autoComplete="off"
-                                onKeyDown={(e) => {
-                                  if (e.key === "Enter") handleEditSave();
-                                  if (e.key === "Escape") handleEditCancel();
-                                }}
-                                autoFocus
-                              />
-                              <button
-                                onClick={handleEditSave}
-                                disabled={
-                                  !editingName.trim() ||
-                                  updateAccountMutation.isPending
-                                }
-                                className="p-1 text-green-600 hover:text-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
-                                title="Save changes"
-                              >
-                                <Check className="h-4 w-4" />
-                              </button>
-                              <button
-                                onClick={handleEditCancel}
-                                className="p-1 text-gray-600 hover:text-gray-700"
-                                title="Cancel editing"
-                              >
-                                <X className="h-4 w-4" />
-                              </button>
-                            </div>
-                            <p className="text-sm text-gray-600 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-gray-900 truncate">
-                                {account.name || "Unnamed Account"}
-                              </h4>
-                              <button
-                                onClick={() => handleEditStart(account)}
-                                className="flex-shrink-0 p-1 text-gray-400 hover:text-gray-600 transition-colors"
-                                title="Edit account name"
-                              >
-                                <Edit2 className="h-4 w-4" />
-                              </button>
-                            </div>
-                            <p className="text-sm text-gray-600 truncate">
-                              {account.institution_id}
-                            </p>
-                            {account.iban && (
-                              <p className="text-xs text-gray-500 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>
+                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 p-2 sm:p-3 bg-muted rounded-full">
+                          <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>
-                        <p className="text-xs sm:text-sm text-gray-500 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>
+
+                      {/* 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>
-              );
-            })}
-          </div>
+                );
+              })}
+            </div>
+          </CardContent>
         )}
-      </div>
+      </Card>
     </div>
   );
 }

frontend/src/components/AccountsSkeleton.tsx

@@ -0,0 +1,61 @@
+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/AppSidebar.tsx

@@ -0,0 +1,180 @@
+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/Dashboard.tsx

@@ -1,197 +0,0 @@
-import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import {
-  CreditCard,
-  TrendingUp,
-  Activity,
-  Menu,
-  X,
-  Home,
-  List,
-  BarChart3,
-  Wifi,
-  WifiOff,
-  Bell,
-} from "lucide-react";
-import { apiClient } from "../lib/api";
-import AccountsOverview from "./AccountsOverview";
-import TransactionsTable from "./TransactionsTable";
-import Notifications from "./Notifications";
-import ErrorBoundary from "./ErrorBoundary";
-import { cn } from "../lib/utils";
-import type { Account } from "../types/api";
-
-type TabType = "overview" | "transactions" | "analytics" | "notifications";
-
-export default function Dashboard() {
-  const [activeTab, setActiveTab] = useState<TabType>("overview");
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-
-  const { data: accounts } = useQuery<Account[]>({
-    queryKey: ["accounts"],
-    queryFn: apiClient.getAccounts,
-  });
-
-  const {
-    data: healthStatus,
-    isLoading: healthLoading,
-    isError: healthError,
-  } = useQuery({
-    queryKey: ["health"],
-    queryFn: async () => {
-      return await apiClient.getHealth();
-    },
-    refetchInterval: 30000, // Check every 30 seconds
-    retry: 3,
-  });
-
-  const navigation = [
-    { name: "Overview", icon: Home, id: "overview" as TabType },
-    { name: "Transactions", icon: List, id: "transactions" as TabType },
-    { name: "Analytics", icon: BarChart3, id: "analytics" as TabType },
-    { name: "Notifications", icon: Bell, id: "notifications" as TabType },
-  ];
-
-  const totalBalance =
-    accounts?.reduce((sum, account) => {
-      // Get the first available balance from the balances array
-      const primaryBalance = account.balances?.[0]?.amount || 0;
-      return sum + primaryBalance;
-    }, 0) || 0;
-
-  return (
-    <div className="flex h-screen bg-gray-100">
-      {/* Sidebar */}
-      <div
-        className={cn(
-          "fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0",
-          sidebarOpen ? "translate-x-0" : "-translate-x-full",
-        )}
-      >
-        <div className="flex items-center justify-between h-16 px-6 border-b border-gray-200">
-          <div className="flex items-center space-x-2">
-            <CreditCard className="h-8 w-8 text-blue-600" />
-            <h1 className="text-xl font-bold text-gray-900">Leggen</h1>
-          </div>
-          <button
-            onClick={() => setSidebarOpen(false)}
-            className="lg:hidden p-1 rounded-md text-gray-400 hover:text-gray-500"
-          >
-            <X className="h-6 w-6" />
-          </button>
-        </div>
-
-        <nav className="px-6 py-4">
-          <div className="space-y-1">
-            {navigation.map((item) => (
-              <button
-                key={item.id}
-                onClick={() => {
-                  setActiveTab(item.id);
-                  setSidebarOpen(false);
-                }}
-                className={cn(
-                  "flex items-center w-full px-3 py-2 text-sm font-medium rounded-md transition-colors",
-                  activeTab === item.id
-                    ? "bg-blue-100 text-blue-700"
-                    : "text-gray-700 hover:text-gray-900 hover:bg-gray-100",
-                )}
-              >
-                <item.icon className="mr-3 h-5 w-5" />
-                {item.name}
-              </button>
-            ))}
-          </div>
-        </nav>
-
-        {/* Account Summary in Sidebar */}
-        <div className="px-6 py-4 border-t border-gray-200 mt-auto">
-          <div className="bg-gray-50 rounded-lg p-4">
-            <div className="flex items-center justify-between">
-              <span className="text-sm font-medium text-gray-600">
-                Total Balance
-              </span>
-              <TrendingUp className="h-4 w-4 text-green-500" />
-            </div>
-            <p className="text-2xl font-bold text-gray-900 mt-1">
-              {new Intl.NumberFormat("en-US", {
-                style: "currency",
-                currency: "EUR",
-              }).format(totalBalance)}
-            </p>
-            <p className="text-sm text-gray-500 mt-1">
-              {accounts?.length || 0} accounts
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {/* Overlay for mobile */}
-      {sidebarOpen && (
-        <div
-          className="fixed inset-0 z-40 bg-gray-600 bg-opacity-75 lg:hidden"
-          onClick={() => setSidebarOpen(false)}
-        />
-      )}
-
-      {/* Main content */}
-      <div className="flex flex-col flex-1 overflow-hidden">
-        {/* Header */}
-        <header className="bg-white shadow-sm border-b border-gray-200">
-          <div className="flex items-center justify-between h-16 px-6">
-            <div className="flex items-center">
-              <button
-                onClick={() => setSidebarOpen(true)}
-                className="lg:hidden p-1 rounded-md text-gray-400 hover:text-gray-500"
-              >
-                <Menu className="h-6 w-6" />
-              </button>
-              <h2 className="text-lg font-semibold text-gray-900 lg:ml-0 ml-4">
-                {navigation.find((item) => item.id === activeTab)?.name}
-              </h2>
-            </div>
-            <div className="flex items-center space-x-2">
-              <div className="flex items-center space-x-1">
-                {healthLoading ? (
-                  <>
-                    <Activity className="h-4 w-4 text-yellow-500 animate-pulse" />
-                    <span className="text-sm text-gray-600">Checking...</span>
-                  </>
-                ) : healthError || healthStatus?.status !== "healthy" ? (
-                  <>
-                    <WifiOff className="h-4 w-4 text-red-500" />
-                    <span className="text-sm text-red-500">Disconnected</span>
-                  </>
-                ) : (
-                  <>
-                    <Wifi className="h-4 w-4 text-green-500" />
-                    <span className="text-sm text-gray-600">Connected</span>
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-        </header>
-
-        {/* Main content area */}
-        <main className="flex-1 overflow-y-auto p-6">
-          <ErrorBoundary>
-            {activeTab === "overview" && <AccountsOverview />}
-            {activeTab === "transactions" && <TransactionsTable />}
-            {activeTab === "analytics" && (
-              <div className="bg-white rounded-lg shadow p-6">
-                <h3 className="text-lg font-medium text-gray-900 mb-4">
-                  Analytics
-                </h3>
-                <p className="text-gray-600">
-                  Analytics dashboard coming soon...
-                </p>
-              </div>
-            )}
-            {activeTab === "notifications" && <Notifications />}
-          </ErrorBoundary>
-        </main>
-      </div>
-    </div>
-  );
-}

frontend/src/components/DiscordConfigDrawer.tsx

@@ -0,0 +1,181 @@
+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,6 +1,9 @@
 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;
@@ -39,46 +42,49 @@ class ErrorBoundary extends Component<Props, State> {
       }
 
       return (
-        <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>
+        <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>
 
-              {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>
-              )}
+                {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>
+                )}
 
-              <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>
+                <Button onClick={this.handleReset}>
+                  <RefreshCw className="h-4 w-4 mr-2" />
+                  Try Again
+                </Button>
+              </div>
             </div>
-          </div>
-        </div>
+          </CardContent>
+        </Card>
       );
     }
 

frontend/src/components/FiltersSkeleton.tsx

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

frontend/src/components/Header.tsx

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

frontend/src/components/LoadingSpinner.tsx

@@ -1,18 +0,0 @@
-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

@@ -0,0 +1,225 @@
+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,10 +10,37 @@ import {
   CheckCircle,
   Settings,
   TestTube,
+  Activity,
+  Clock,
+  TrendingUp,
+  User,
 } from "lucide-react";
 import { apiClient } from "../lib/api";
-import LoadingSpinner from "./LoadingSpinner";
-import type { NotificationSettings, NotificationService } from "../types/api";
+import NotificationsSkeleton from "./NotificationsSkeleton";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "./ui/card";
+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,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+import type {
+  NotificationSettings,
+  NotificationService,
+  SyncOperationsResponse,
+} from "../types/api";
 
 export default function Notifications() {
   const [testService, setTestService] = useState("");
@@ -42,6 +69,16 @@ 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: () => {
@@ -61,40 +98,34 @@ export default function Notifications() {
     },
   });
 
-  if (settingsLoading || servicesLoading) {
-    return (
-      <div className="bg-white rounded-lg shadow">
-        <LoadingSpinner message="Loading notifications..." />
-      </div>
-    );
+  if (settingsLoading || servicesLoading || syncOperationsLoading) {
+    return <NotificationsSkeleton />;
   }
 
-  if (settingsError || servicesError) {
+  if (settingsError || servicesError || syncOperationsError) {
     return (
-      <div className="bg-white rounded-lg shadow p-6">
-        <div className="flex items-center justify-center text-center">
-          <div>
-            <AlertCircle className="h-12 w-12 text-red-400 mx-auto mb-4" />
-            <h3 className="text-lg font-medium text-gray-900 mb-2">
-              Failed to load notifications
-            </h3>
-            <p className="text-gray-600 mb-4">
-              Unable to connect to the Leggen API. Please check your
-              configuration and ensure the API server is running.
-            </p>
-            <button
-              onClick={() => {
-                refetchSettings();
-                refetchServices();
-              }}
-              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" />
-              Retry
-            </button>
-          </div>
-        </div>
-      </div>
+      <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={() => {
+              refetchSettings();
+              refetchServices();
+              refetchSyncOperations();
+            }}
+            variant="outline"
+            size="sm"
+          >
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Retry
+          </Button>
+        </AlertDescription>
+      </Alert>
     );
   }
 
@@ -119,202 +150,303 @@ export default function Notifications() {
 
   return (
     <div className="space-y-6">
-      {/* Test Notification Section */}
-      <div className="bg-white rounded-lg shadow p-6">
-        <div className="flex items-center space-x-2 mb-4">
-          <TestTube className="h-5 w-5 text-blue-600" />
-          <h3 className="text-lg font-medium text-gray-900">
-            Test Notifications
-          </h3>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              Service
-            </label>
-            <select
-              value={testService}
-              onChange={(e) => setTestService(e.target.value)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-            >
-              <option value="">Select a service...</option>
-              {services?.map((service) => (
-                <option key={service.name} value={service.name}>
-                  {service.name} {service.enabled ? "(Enabled)" : "(Disabled)"}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              Message
-            </label>
-            <input
-              type="text"
-              value={testMessage}
-              onChange={(e) => setTestMessage(e.target.value)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-              placeholder="Test message..."
-            />
-          </div>
-        </div>
-
-        <div className="mt-4">
-          <button
-            onClick={handleTestNotification}
-            disabled={!testService || testMutation.isPending}
-            className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-          >
-            <Send className="h-4 w-4 mr-2" />
-            {testMutation.isPending ? "Sending..." : "Send Test Notification"}
-          </button>
-        </div>
-      </div>
-
-      {/* Notification Services */}
-      <div className="bg-white rounded-lg shadow">
-        <div className="px-6 py-4 border-b border-gray-200">
-          <div className="flex items-center space-x-2">
-            <Bell className="h-5 w-5 text-blue-600" />
-            <h3 className="text-lg font-medium text-gray-900">
-              Notification Services
-            </h3>
-          </div>
-          <p className="text-sm text-gray-600 mt-1">
-            Manage your notification services
-          </p>
-        </div>
-
-        {!services || services.length === 0 ? (
-          <div className="p-6 text-center">
-            <Bell className="h-12 w-12 text-gray-400 mx-auto mb-4" />
-            <h3 className="text-lg font-medium text-gray-900 mb-2">
-              No notification services configured
-            </h3>
-            <p className="text-gray-600">
-              Configure notification services in your backend to receive alerts.
-            </p>
-          </div>
-        ) : (
-          <div className="divide-y divide-gray-200">
-            {services.map((service) => (
-              <div
-                key={service.name}
-                className="p-6 hover:bg-gray-50 transition-colors"
-              >
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center space-x-4">
-                    <div className="p-3 bg-gray-100 rounded-full">
-                      {service.name.toLowerCase().includes("discord") ? (
-                        <MessageSquare className="h-6 w-6 text-gray-600" />
-                      ) : service.name.toLowerCase().includes("telegram") ? (
-                        <Send className="h-6 w-6 text-gray-600" />
-                      ) : (
-                        <Bell className="h-6 w-6 text-gray-600" />
-                      )}
-                    </div>
-                    <div>
-                      <h4 className="text-lg font-medium text-gray-900 capitalize">
-                        {service.name}
-                      </h4>
-                      <div className="flex items-center space-x-2 mt-1">
-                        <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" />
-                          ) : (
-                            <AlertCircle className="h-3 w-3 mr-1" />
-                          )}
-                          {service.enabled ? "Enabled" : "Disabled"}
-                        </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"}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="flex items-center space-x-2">
-                    <button
-                      onClick={() => handleDeleteService(service.name)}
-                      disabled={deleteServiceMutation.isPending}
-                      className="p-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-md transition-colors"
-                      title={`Delete ${service.name} service`}
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Notification Settings */}
-      <div className="bg-white rounded-lg shadow p-6">
-        <div className="flex items-center space-x-2 mb-4">
-          <Settings className="h-5 w-5 text-blue-600" />
-          <h3 className="text-lg font-medium text-gray-900">
-            Notification Settings
-          </h3>
-        </div>
-
-        {settings && (
-          <div className="space-y-4">
-            <div>
-              <h4 className="text-sm font-medium text-gray-700 mb-2">
-                Filters
-              </h4>
-              <div className="bg-gray-50 rounded-md p-4">
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                  <div>
-                    <label className="block text-xs font-medium text-gray-600 mb-1">
-                      Case Insensitive Filters
-                    </label>
-                    <p className="text-sm text-gray-900">
-                      {settings.filters.case_insensitive.length > 0
-                        ? settings.filters.case_insensitive.join(", ")
-                        : "None"}
-                    </p>
-                  </div>
-                  <div>
-                    <label className="block text-xs font-medium text-gray-600 mb-1">
-                      Case Sensitive Filters
-                    </label>
-                    <p className="text-sm text-gray-900">
-                      {settings.filters.case_sensitive &&
-                      settings.filters.case_sensitive.length > 0
-                        ? settings.filters.case_sensitive.join(", ")
-                        : "None"}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="text-sm text-gray-600">
-              <p>
-                Configure notification settings through your backend API to
-                customize filters and service configurations.
+      {/* 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>
+          <CardTitle className="flex items-center space-x-2">
+            <TestTube className="h-5 w-5 text-primary" />
+            <span>Test Notifications</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="service" className="text-foreground">
+                Service
+              </Label>
+              <Select value={testService} onValueChange={setTestService}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a service..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {services?.map((service) => (
+                    <SelectItem key={service.name} value={service.name}>
+                      {service.name}{" "}
+                      {service.enabled ? "(Enabled)" : "(Disabled)"}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div>
+              <Label htmlFor="message" className="text-foreground">
+                Message
+              </Label>
+              <Input
+                id="message"
+                type="text"
+                value={testMessage}
+                onChange={(e) => setTestMessage(e.target.value)}
+                placeholder="Test message..."
+              />
+            </div>
           </div>
+
+          <div className="mt-4">
+            <Button
+              onClick={handleTestNotification}
+              disabled={!testService || testMutation.isPending}
+            >
+              <Send className="h-4 w-4 mr-2" />
+              {testMutation.isPending ? "Sending..." : "Send Test Notification"}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 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>
+                        <h4 className="text-lg font-medium text-foreground capitalize">
+                          {service.name}
+                        </h4>
+                        <div className="flex items-center space-x-2 mt-1">
+                          <Badge
+                            variant={
+                              service.enabled ? "default" : "destructive"
+                            }
+                          >
+                            {service.enabled ? (
+                              <CheckCircle className="h-3 w-3 mr-1" />
+                            ) : (
+                              <AlertCircle className="h-3 w-3 mr-1" />
+                            )}
+                            {service.enabled ? "Enabled" : "Disabled"}
+                          </Badge>
+                          <Badge
+                            variant={
+                              service.configured ? "secondary" : "outline"
+                            }
+                          >
+                            {service.configured
+                              ? "Configured"
+                              : "Not Configured"}
+                          </Badge>
+                        </div>
+                      </div>
+                    </div>
+
+                    <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>
+          </CardContent>
         )}
-      </div>
+      </Card>
+
+      {/* Notification Settings */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center space-x-2">
+            <Settings className="h-5 w-5 text-primary" />
+            <span>Notification Settings</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {settings && (
+            <div className="space-y-4">
+              <div>
+                <h4 className="text-sm font-medium text-foreground mb-2">
+                  Filters
+                </h4>
+                <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-1 block">
+                        Case Insensitive Filters
+                      </Label>
+                      <p className="text-sm text-foreground">
+                        {settings.filters.case_insensitive.length > 0
+                          ? settings.filters.case_insensitive.join(", ")
+                          : "None"}
+                      </p>
+                    </div>
+                    <div>
+                      <Label className="text-xs font-medium text-muted-foreground mb-1 block">
+                        Case Sensitive Filters
+                      </Label>
+                      <p className="text-sm text-foreground">
+                        {settings.filters.case_sensitive &&
+                        settings.filters.case_sensitive.length > 0
+                          ? settings.filters.case_sensitive.join(", ")
+                          : "None"}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="text-sm text-muted-foreground">
+                <p>
+                  Configure notification settings through your backend API to
+                  customize filters and service configurations.
+                </p>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
     </div>
   );
 }

frontend/src/components/NotificationsSkeleton.tsx

@@ -0,0 +1,95 @@
+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

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

@@ -1,5 +1,6 @@
 import { X, Copy, Check } from "lucide-react";
 import { useState } from "react";
+import { Button } from "./ui/button";
 import type { RawTransactionData } from "../types/api";
 
 interface RawTransactionModalProps {
@@ -38,26 +39,27 @@ export default function RawTransactionModal({
       <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
         {/* Background overlay */}
         <div
-          className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+          className="fixed inset-0 bg-background/80 backdrop-blur-sm transition-opacity"
           onClick={onClose}
         />
 
         {/* Modal panel */}
-        <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
-          <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div className="inline-block align-bottom bg-card rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full border">
+          <div className="bg-card px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
             <div className="flex items-center justify-between mb-4">
-              <h3 className="text-lg font-medium text-gray-900">
+              <h3 className="text-lg font-medium text-foreground">
                 Raw Transaction Data
               </h3>
               <div className="flex items-center space-x-2">
-                <button
+                <Button
                   onClick={handleCopy}
                   disabled={!rawTransaction}
-                  className="inline-flex items-center px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  variant="outline"
+                  size="sm"
                 >
                   {copied ? (
                     <>
-                      <Check className="h-4 w-4 mr-1 text-green-600" />
+                      <Check className="h-4 w-4 mr-1 text-green-600 dark:text-green-400" />
                       Copied!
                     </>
                   ) : (
@@ -66,37 +68,34 @@ export default function RawTransactionModal({
                       Copy JSON
                     </>
                   )}
-                </button>
-                <button
-                  onClick={onClose}
-                  className="inline-flex items-center p-1 text-gray-400 hover:text-gray-600 transition-colors"
-                >
+                </Button>
+                <Button onClick={onClose} variant="ghost" size="sm">
                   <X className="h-5 w-5" />
-                </button>
+                </Button>
               </div>
             </div>
 
             <div className="mb-4">
-              <p className="text-sm text-gray-600">
+              <p className="text-sm text-muted-foreground">
                 Transaction ID:{" "}
-                <code className="bg-gray-100 px-2 py-1 rounded text-xs">
+                <code className="bg-muted px-2 py-1 rounded text-xs text-foreground">
                   {transactionId}
                 </code>
               </p>
             </div>
 
             {rawTransaction ? (
-              <div className="bg-gray-50 rounded-lg p-4 overflow-auto max-h-96">
-                <pre className="text-sm text-gray-800 whitespace-pre-wrap">
+              <div className="bg-muted rounded-lg p-4 overflow-auto max-h-96">
+                <pre className="text-sm text-foreground whitespace-pre-wrap">
                   {JSON.stringify(rawTransaction, null, 2)}
                 </pre>
               </div>
             ) : (
-              <div className="bg-gray-50 rounded-lg p-8 text-center">
-                <p className="text-gray-600">
+              <div className="bg-muted rounded-lg p-8 text-center">
+                <p className="text-foreground">
                   Raw transaction data is not available for this transaction.
                 </p>
-                <p className="text-sm text-gray-500 mt-2">
+                <p className="text-sm text-muted-foreground mt-2">
                   Try refreshing the page or check if the transaction was
                   fetched with summary_only=false.
                 </p>
@@ -104,14 +103,14 @@ export default function RawTransactionModal({
             )}
           </div>
 
-          <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-            <button
+          <div className="bg-muted/50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+            <Button
               type="button"
               onClick={onClose}
-              className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+              className="w-full sm:ml-3 sm:w-auto"
             >
               Close
-            </button>
+            </Button>
           </div>
         </div>
       </div>

frontend/src/components/Settings.tsx

@@ -0,0 +1,622 @@
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  CreditCard,
+  TrendingUp,
+  TrendingDown,
+  Building2,
+  RefreshCw,
+  AlertCircle,
+  Edit2,
+  Check,
+  X,
+  Plus,
+  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 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,
+  });
+
+  // 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"] });
+    },
+  });
+
+  // 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>
+                <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-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>
+
+          {/* 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>
+        </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

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

frontend/src/components/SiteHeader.tsx

@@ -0,0 +1,87 @@
+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

@@ -0,0 +1,352 @@
+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

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

frontend/src/components/TransactionsTable.tsx

@@ -27,7 +27,11 @@ import TransactionSkeleton from "./TransactionSkeleton";
 import FiltersSkeleton from "./FiltersSkeleton";
 import RawTransactionModal from "./RawTransactionModal";
 import { FilterBar, type FilterState } from "./filters";
-import type { Account, Transaction, ApiResponse, Balance } from "../types/api";
+import { DataTablePagination } from "./ui/data-table-pagination";
+import { Card } from "./ui/card";
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
+import { Button } from "./ui/button";
+import type { Account, Transaction, ApiResponse } from "../types/api";
 
 export default function TransactionsTable() {
   // Filter state consolidated into a single object
@@ -36,21 +40,20 @@ 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);
   const [perPage, setPerPage] = useState(50);
 
   // Debounced search state
-  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(filterState.searchTerm);
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(
+    filterState.searchTerm,
+  );
 
   // Table state (remove pagination from table)
   const [sorting, setSorting] = useState<SortingState>([]);
@@ -68,8 +71,6 @@ export default function TransactionsTable() {
       selectedAccount: "",
       startDate: "",
       endDate: "",
-      minAmount: "",
-      maxAmount: "",
     });
     setColumnFilters([]);
     setCurrentPage(1);
@@ -96,12 +97,6 @@ export default function TransactionsTable() {
     queryFn: apiClient.getAccounts,
   });
 
-  const { data: balances } = useQuery<Balance[]>({
-    queryKey: ["balances"],
-    queryFn: apiClient.getBalances,
-    enabled: showRunningBalance,
-  });
-
   const {
     data: transactionsResponse,
     isLoading: transactionsLoading,
@@ -116,8 +111,6 @@ export default function TransactionsTable() {
       currentPage,
       perPage,
       debouncedSearchTerm,
-      filterState.minAmount,
-      filterState.maxAmount,
     ],
     queryFn: () =>
       apiClient.getTransactions({
@@ -128,8 +121,6 @@ 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,
       }),
   });
 
@@ -149,7 +140,7 @@ export default function TransactionsTable() {
   // Reset pagination when filters change
   useEffect(() => {
     setCurrentPage(1);
-  }, [filterState.selectedAccount, filterState.startDate, filterState.endDate, filterState.minAmount, filterState.maxAmount]);
+  }, [filterState.selectedAccount, filterState.startDate, filterState.endDate]);
 
   const handleViewRaw = (transaction: Transaction) => {
     setSelectedTransaction(transaction);
@@ -165,54 +156,7 @@ export default function TransactionsTable() {
     filterState.searchTerm ||
     filterState.selectedAccount ||
     filterState.startDate ||
-    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
-    balances.forEach(balance => {
-      if (balance.balance_type === 'expected') {
-        accountBalanceMap.set(balance.account_id, balance.balance_amount);
-      }
-    });
-
-    // Group transactions by account
-    const transactionsByAccount = new Map<string, Transaction[]>();
-    transactions.forEach(txn => {
-      if (!transactionsByAccount.has(txn.account_id)) {
-        transactionsByAccount.set(txn.account_id, []);
-      }
-      transactionsByAccount.get(txn.account_id)!.push(txn);
-    });
-
-    // Calculate running balance for each account
-    transactionsByAccount.forEach((accountTransactions, accountId) => {
-      const currentBalance = accountBalanceMap.get(accountId) || 0;
-      let runningBalance = currentBalance;
-
-      // Sort transactions by date (newest first) to work backwards
-      const sortedTransactions = [...accountTransactions].sort((a, b) =>
-        new Date(b.transaction_date).getTime() - new Date(a.transaction_date).getTime()
-      );
-
-      // Calculate running balance by working backwards from current balance
-      sortedTransactions.forEach((txn) => {
-        runningBalances[`${txn.account_id}-${txn.transaction_id}`] = runningBalance;
-        runningBalance -= txn.transaction_value;
-      });
-    });
-
-    return runningBalances;
-  };
-
-  const runningBalances = calculateRunningBalances(transactions);
+    filterState.endDate;
 
   // Define columns
   const columns: ColumnDef<Transaction>[] = [
@@ -240,14 +184,13 @@ export default function TransactionsTable() {
               )}
             </div>
             <div className="flex-1 min-w-0">
-              <h4 className="text-sm font-medium text-gray-900 truncate">
+              <h4 className="text-sm font-medium text-foreground truncate">
                 {transaction.description}
               </h4>
-              <div className="text-xs text-gray-500 space-y-1">
+              <div className="text-xs text-muted-foreground space-y-1">
                 {account && (
                   <p className="truncate">
-                    {account.name || "Unnamed Account"} •{" "}
-                    {account.institution_id}
+                    {account.display_name || "Unnamed Account"}
                   </p>
                 )}
                 {(transaction.creditor_name || transaction.debtor_name) && (
@@ -289,38 +232,19 @@ 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-gray-900">
-              {formatCurrency(balance, transaction.transaction_currency)}
-            </p>
-          </div>
-        );
-      },
-    }] : []),
     {
       accessorKey: "transaction_date",
       header: "Date",
       cell: ({ row }) => {
         const transaction = row.original;
         return (
-          <div className="text-sm text-gray-900">
+          <div className="text-sm text-foreground">
             {transaction.transaction_date
               ? formatDate(transaction.transaction_date)
               : "No date"}
             {transaction.booking_date &&
               transaction.booking_date !== transaction.transaction_date && (
-                <p className="text-xs text-gray-400">
+                <p className="text-xs text-muted-foreground">
                   Booked: {formatDate(transaction.booking_date)}
                 </p>
               )}
@@ -337,7 +261,7 @@ export default function TransactionsTable() {
         return (
           <button
             onClick={() => handleViewRaw(transaction)}
-            className="inline-flex items-center px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
+            className="inline-flex items-center px-2 py-1 text-xs bg-muted text-muted-foreground rounded hover:bg-accent transition-colors"
             title="View raw transaction data"
           >
             <Eye className="h-3 w-3 mr-1" />
@@ -361,7 +285,8 @@ export default function TransactionsTable() {
       columnFilters,
       globalFilter: filterState.searchTerm,
     },
-    onGlobalFilterChange: (value: string) => handleFilterChange("searchTerm", value),
+    onGlobalFilterChange: (value: string) =>
+      handleFilterChange("searchTerm", value),
     globalFilterFn: (row, _columnId, filterValue) => {
       // Custom global filter that searches multiple fields
       const transaction = row.original;
@@ -395,31 +320,26 @@ export default function TransactionsTable() {
 
   if (transactionsError) {
     return (
-      <div className="bg-white rounded-lg shadow p-6">
-        <div className="flex items-center justify-center text-center">
-          <div>
-            <AlertCircle className="h-12 w-12 text-red-400 mx-auto mb-4" />
-            <h3 className="text-lg font-medium text-gray-900 mb-2">
-              Failed to load transactions
-            </h3>
-            <p className="text-gray-600 mb-4">
-              Unable to fetch transactions from the Leggen API.
-            </p>
-            <button
-              onClick={() => refetchTransactions()}
-              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" />
-              Retry
-            </button>
-          </div>
-        </div>
-      </div>
+      <Alert variant="destructive">
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>Failed to load transactions</AlertTitle>
+        <AlertDescription className="space-y-3">
+          <p>Unable to fetch transactions from the Leggen API.</p>
+          <Button
+            onClick={() => refetchTransactions()}
+            variant="outline"
+            size="sm"
+          >
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Retry
+          </Button>
+        </AlertDescription>
+      </Alert>
     );
   }
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 max-w-full">
       {/* New FilterBar */}
       <FilterBar
         filterState={filterState}
@@ -427,143 +347,111 @@ export default function TransactionsTable() {
         onClearFilters={handleClearFilters}
         accounts={accounts}
         isSearchLoading={isSearchLoading}
-        showRunningBalance={showRunningBalance}
-        onToggleRunningBalance={() => setShowRunningBalance(!showRunningBalance)}
       />
 
-      {/* Results Summary */}
-      <div className="bg-white rounded-lg shadow border">
-        <div className="px-6 py-3 bg-gray-50 border-b border-gray-200">
-          <p className="text-sm text-gray-600">
-            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>
-        </div>
-      </div>
-
       {/* Responsive Table/Cards */}
-      <div className="bg-white rounded-lg shadow overflow-hidden">
+      <Card>
         {/* Desktop Table View (hidden on mobile) */}
         <div className="hidden md:block">
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200">
-              <thead className="bg-gray-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-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
-                        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-blue-600"
-                                    : "text-gray-400"
-                                }`}
-                              />
-                              <ChevronDown
-                                className={`h-3 w-3 -mt-1 ${
-                                  header.column.getIsSorted() === "desc"
-                                    ? "text-blue-600"
-                                    : "text-gray-400"
-                                }`}
-                              />
-                            </div>
-                          )}
-                        </div>
-                      </th>
+          <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>
                     ))}
                   </tr>
-                ))}
-              </thead>
-              <tbody className="bg-white divide-y divide-gray-200">
-                {table.getRowModel().rows.length === 0 ? (
-                  <tr>
-                    <td
-                      colSpan={columns.length}
-                      className="px-6 py-12 text-center"
-                    >
-                      <div className="text-gray-400 mb-4">
-                        <TrendingUp className="h-12 w-12 mx-auto" />
-                      </div>
-                      <h3 className="text-lg font-medium text-gray-900 mb-2">
-                        No transactions found
-                      </h3>
-                      <p className="text-gray-600">
-                        {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-gray-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>
+                ))
+              )}
+            </tbody>
+          </table>
         </div>
 
         {/* Mobile Card View (visible only on mobile) */}
         <div className="md:hidden">
           {table.getRowModel().rows.length === 0 ? (
             <div className="px-6 py-12 text-center">
-              <div className="text-gray-400 mb-4">
+              <div className="text-muted-foreground mb-4">
                 <TrendingUp className="h-12 w-12 mx-auto" />
               </div>
-              <h3 className="text-lg font-medium text-gray-900 mb-2">
+              <h3 className="text-lg font-medium text-foreground mb-2">
                 No transactions found
               </h3>
-              <p className="text-gray-600">
+              <p className="text-muted-foreground">
                 {hasActiveFilters
                   ? "Try adjusting your filters to see more results."
                   : "No transactions are available for the selected criteria."}
               </p>
             </div>
           ) : (
-            <div className="divide-y divide-gray-200">
+            <div className="divide-y divide-border">
               {table.getRowModel().rows.map((row) => {
                 const transaction = row.original;
                 const account = accounts?.find(
@@ -574,7 +462,7 @@ export default function TransactionsTable() {
                 return (
                   <div
                     key={row.id}
-                    className="p-4 hover:bg-gray-50 transition-colors"
+                    className="p-4 hover:bg-muted/50 transition-colors"
                   >
                     <div className="flex items-start justify-between">
                       <div className="flex-1 min-w-0">
@@ -591,33 +479,38 @@ export default function TransactionsTable() {
                             )}
                           </div>
                           <div className="flex-1 min-w-0">
-                            <h4 className="text-sm font-medium text-gray-900 break-words">
+                            <h4 className="text-sm font-medium text-foreground break-words">
                               {transaction.description}
                             </h4>
-                            <div className="text-xs text-gray-500 space-y-1 mt-1">
+                            <div className="text-xs text-muted-foreground space-y-1 mt-1">
                               {account && (
                                 <p className="break-words">
-                                  {account.name || "Unnamed Account"} •{" "}
-                                  {account.institution_id}
+                                  {account.display_name || "Unnamed Account"}
                                 </p>
                               )}
-                              {(transaction.creditor_name || transaction.debtor_name) && (
+                              {(transaction.creditor_name ||
+                                transaction.debtor_name) && (
                                 <p className="break-words">
                                   {isPositive ? "From: " : "To: "}
-                                  {transaction.creditor_name || transaction.debtor_name}
+                                  {transaction.creditor_name ||
+                                    transaction.debtor_name}
                                 </p>
                               )}
                               {transaction.reference && (
-                                <p className="break-words">Ref: {transaction.reference}</p>
+                                <p className="break-words">
+                                  Ref: {transaction.reference}
+                                </p>
                               )}
-                              <p className="text-gray-400">
+                              <p className="text-muted-foreground">
                                 {transaction.transaction_date
                                   ? formatDate(transaction.transaction_date)
                                   : "No date"}
                                 {transaction.booking_date &&
-                                  transaction.booking_date !== transaction.transaction_date && (
+                                  transaction.booking_date !==
+                                    transaction.transaction_date && (
                                     <span className="ml-2">
-                                      (Booked: {formatDate(transaction.booking_date)})
+                                      (Booked:{" "}
+                                      {formatDate(transaction.booking_date)})
                                     </span>
                                   )}
                               </p>
@@ -637,17 +530,9 @@ export default function TransactionsTable() {
                             transaction.transaction_currency,
                           )}
                         </p>
-                        {showRunningBalance && (
-                          <p className="text-xs text-gray-500 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-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
+                          className="inline-flex items-center px-2 py-1 text-xs bg-muted text-muted-foreground rounded hover:bg-accent transition-colors"
                           title="View raw transaction data"
                         >
                           <Eye className="h-3 w-3 mr-1" />
@@ -664,141 +549,18 @@ export default function TransactionsTable() {
 
         {/* Pagination */}
         {pagination && (
-          <div className="bg-white px-4 py-3 flex flex-col sm:flex-row items-center justify-between border-t border-gray-200 space-y-3 sm:space-y-0">
-            {/* Mobile pagination controls */}
-            <div className="flex justify-between w-full sm:hidden">
-              <div className="flex space-x-2">
-                <button
-                  onClick={() => setCurrentPage(1)}
-                  disabled={pagination.page === 1}
-                  className="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  First
-                </button>
-                <button
-                  onClick={() =>
-                    setCurrentPage((prev) => Math.max(1, prev - 1))
-                  }
-                  disabled={!pagination.has_prev}
-                  className="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  Previous
-                </button>
-              </div>
-              <div className="flex space-x-2">
-                <button
-                  onClick={() => setCurrentPage((prev) => prev + 1)}
-                  disabled={!pagination.has_next}
-                  className="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  Next
-                </button>
-                <button
-                  onClick={() => setCurrentPage(pagination.total_pages)}
-                  disabled={pagination.page === pagination.total_pages}
-                  className="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  Last
-                </button>
-              </div>
-            </div>
-
-            {/* Mobile pagination info */}
-            <div className="text-center w-full sm:hidden">
-              <p className="text-sm text-gray-700">
-                Page <span className="font-medium">{pagination.page}</span> of{" "}
-                <span className="font-medium">{pagination.total_pages}</span>
-                <br />
-                <span className="text-xs text-gray-500">
-                  Showing {(pagination.page - 1) * pagination.per_page + 1}-
-                  {Math.min(pagination.page * pagination.per_page, pagination.total)} of {pagination.total}
-                </span>
-              </p>
-            </div>
-
-            {/* Desktop pagination */}
-            <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
-              <div className="flex items-center space-x-2">
-                <p className="text-sm text-gray-700">
-                  Showing{" "}
-                  <span className="font-medium">
-                    {(pagination.page - 1) * pagination.per_page + 1}
-                  </span>{" "}
-                  to{" "}
-                  <span className="font-medium">
-                    {Math.min(
-                      pagination.page * pagination.per_page,
-                      pagination.total,
-                    )}
-                  </span>{" "}
-                  of <span className="font-medium">{pagination.total}</span>{" "}
-                  results
-                </p>
-              </div>
-              <div className="flex items-center space-x-4">
-                <div className="flex items-center space-x-2">
-                  <label className="text-sm text-gray-700">
-                    Rows per page:
-                  </label>
-                  <select
-                    value={perPage}
-                    onChange={(e) => {
-                      setPerPage(Number(e.target.value));
-                      setCurrentPage(1); // Reset to first page when changing page size
-                    }}
-                    className="border border-gray-300 rounded px-2 py-1 text-sm"
-                  >
-                    {[10, 25, 50, 100].map((pageSize) => (
-                      <option key={pageSize} value={pageSize}>
-                        {pageSize}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <button
-                    onClick={() => setCurrentPage(1)}
-                    disabled={pagination.page === 1}
-                    className="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    First
-                  </button>
-                  <button
-                    onClick={() =>
-                      setCurrentPage((prev) => Math.max(1, prev - 1))
-                    }
-                    disabled={!pagination.has_prev}
-                    className="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    Previous
-                  </button>
-                  <span className="text-sm text-gray-700">
-                    Page <span className="font-medium">{pagination.page}</span>{" "}
-                    of{" "}
-                    <span className="font-medium">
-                      {pagination.total_pages}
-                    </span>
-                  </span>
-                  <button
-                    onClick={() => setCurrentPage((prev) => prev + 1)}
-                    disabled={!pagination.has_next}
-                    className="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    Next
-                  </button>
-                  <button
-                    onClick={() => setCurrentPage(pagination.total_pages)}
-                    disabled={pagination.page === pagination.total_pages}
-                    className="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    Last
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
+          <DataTablePagination
+            currentPage={pagination.page}
+            totalPages={pagination.total_pages}
+            pageSize={pagination.per_page}
+            total={pagination.total}
+            hasNext={pagination.has_next}
+            hasPrev={pagination.has_prev}
+            onPageChange={setCurrentPage}
+            onPageSizeChange={setPerPage}
+          />
         )}
-      </div>
+      </Card>
 
       {/* Raw Transaction Modal */}
       <RawTransactionModal

frontend/src/components/analytics/BalanceChart.tsx

@@ -27,22 +27,39 @@ interface AggregatedDataPoint {
   [key: string]: string | number;
 }
 
-export default function BalanceChart({ data, accounts, className }: BalanceChartProps) {
+interface TooltipProps {
+  active?: boolean;
+  payload?: Array<{
+    name: string;
+    value: number;
+    color: string;
+  }>;
+  label?: string;
+}
+
+export default function BalanceChart({
+  data,
+  accounts,
+  className,
+}: BalanceChartProps) {
   // Create a lookup map for account info
-  const accountMap = accounts.reduce((map, account) => {
-    map[account.id] = account;
-    return map;
-  }, {} as Record<string, Account>);
+  const accountMap = accounts.reduce(
+    (map, account) => {
+      map[account.id] = account;
+      return map;
+    },
+    {} as Record<string, Account>,
+  );
 
   // Helper function to get bank name from institution_id
   const getBankName = (institutionId: string): string => {
     const bankMapping: Record<string, string> = {
-      'REVOLUT_REVOLT21': 'Revolut',
-      'NUBANK_NUPBBR25': 'Nu Pagamentos',
-      'BANCOBPI_BBPIPTPL': 'Banco BPI',
+      REVOLUT_REVOLT21: "Revolut",
+      NUBANK_NUPBBR25: "Nu Pagamentos",
+      BANCOBPI_BBPIPTPL: "Banco BPI",
       // Add more mappings as needed
     };
-    return bankMapping[institutionId] || institutionId.split('_')[0];
+    return bankMapping[institutionId] || institutionId.split("_")[0];
   };
 
   // Helper function to create display name for account
@@ -50,20 +67,24 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
     const account = accountMap[accountId];
     if (account) {
       const bankName = getBankName(account.institution_id);
-      const accountName = account.name || `Account ${accountId.split('-')[1]}`;
+      const accountName = account.name || `Account ${accountId.split("-")[1]}`;
       return `${bankName} - ${accountName}`;
     }
-    return `Account ${accountId.split('-')[1]}`;
+    return `Account ${accountId.split("-")[1]}`;
   };
   // Process balance data for the chart
   const chartData = data
     .filter((balance) => balance.balance_type === "closingBooked")
     .map((balance) => ({
-      date: new Date(balance.reference_date).toLocaleDateString('en-GB'), // DD/MM/YYYY format
+      date: new Date(balance.reference_date).toLocaleDateString("en-GB"), // DD/MM/YYYY format
       balance: balance.balance_amount,
       account_id: balance.account_id,
     }))
-    .sort((a, b) => new Date(a.date.split('/').reverse().join('/')).getTime() - new Date(b.date.split('/').reverse().join('/')).getTime());
+    .sort(
+      (a, b) =>
+        new Date(a.date.split("/").reverse().join("/")).getTime() -
+        new Date(b.date.split("/").reverse().join("/")).getTime(),
+    );
 
   // Group by account and aggregate
   const accountBalances: { [key: string]: ChartDataPoint[] } = {};
@@ -86,18 +107,37 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
   });
 
   const finalData = Object.values(aggregatedData).sort(
-    (a, b) => new Date(a.date.split('/').reverse().join('/')).getTime() - new Date(b.date.split('/').reverse().join('/')).getTime()
+    (a, b) =>
+      new Date(a.date.split("/").reverse().join("/")).getTime() -
+      new Date(b.date.split("/").reverse().join("/")).getTime(),
   );
 
   const colors = ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6"];
 
+  const CustomTooltip = ({ active, payload, label }: TooltipProps) => {
+    if (active && payload && payload.length) {
+      return (
+        <div className="bg-card p-3 border rounded shadow-lg">
+          <p className="font-medium text-foreground">Date: {label}</p>
+          {payload.map((entry, index) => (
+            <p key={index} style={{ color: entry.color }}>
+              {getAccountDisplayName(entry.name)}: €
+              {entry.value.toLocaleString()}
+            </p>
+          ))}
+        </div>
+      );
+    }
+    return null;
+  };
+
   if (finalData.length === 0) {
     return (
       <div className={className}>
-        <h3 className="text-lg font-medium text-gray-900 mb-4">
+        <h3 className="text-lg font-medium text-foreground mb-4">
           Balance Progress
         </h3>
-        <div className="h-80 flex items-center justify-center text-gray-500">
+        <div className="h-80 flex items-center justify-center text-muted-foreground">
           No balance data available
         </div>
       </div>
@@ -106,7 +146,7 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
 
   return (
     <div className={className}>
-      <h3 className="text-lg font-medium text-gray-900 mb-4">
+      <h3 className="text-lg font-medium text-foreground mb-4">
         Balance Progress Over Time
       </h3>
       <div className="h-80">
@@ -118,9 +158,9 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
               tick={{ fontSize: 12 }}
               tickFormatter={(value) => {
                 // Convert DD/MM/YYYY back to a proper date for formatting
-                const [day, month, year] = value.split('/');
+                const [day, month, year] = value.split("/");
                 const date = new Date(year, month - 1, day);
-                return date.toLocaleDateString('en-GB', {
+                return date.toLocaleDateString("en-GB", {
                   month: "short",
                   day: "numeric",
                 });
@@ -130,13 +170,7 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
               tick={{ fontSize: 12 }}
               tickFormatter={(value) => `€${value.toLocaleString()}`}
             />
-            <Tooltip
-              formatter={(value: number, name: string) => [
-                `€${value.toLocaleString()}`,
-                getAccountDisplayName(name),
-              ]}
-              labelFormatter={(label) => `Date: ${label}`}
-            />
+            <Tooltip content={<CustomTooltip />} />
             <Legend />
             {Object.keys(accountBalances).map((accountId, index) => (
               <Area
@@ -154,4 +188,4 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
       </div>
     </div>
   );
-}
+}

frontend/src/components/analytics/MonthlyTrends.tsx

@@ -15,7 +15,6 @@ interface MonthlyTrendsProps {
   days?: number;
 }
 
-
 interface TooltipProps {
   active?: boolean;
   payload?: Array<{
@@ -26,7 +25,10 @@ interface TooltipProps {
   label?: string;
 }
 
-export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsProps) {
+export default function MonthlyTrends({
+  className,
+  days = 365,
+}: MonthlyTrendsProps) {
   // Get pre-calculated monthly stats from the new endpoint
   const { data: monthlyData, isLoading } = useQuery({
     queryKey: ["monthly-stats", days],
@@ -49,11 +51,11 @@ export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsPr
   if (isLoading) {
     return (
       <div className={className}>
-        <h3 className="text-lg font-medium text-gray-900 mb-4">
+        <h3 className="text-lg font-medium text-foreground mb-4">
           Monthly Spending Trends
         </h3>
         <div className="h-80 flex items-center justify-center">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
         </div>
       </div>
     );
@@ -62,10 +64,10 @@ export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsPr
   if (displayData.length === 0) {
     return (
       <div className={className}>
-        <h3 className="text-lg font-medium text-gray-900 mb-4">
+        <h3 className="text-lg font-medium text-foreground mb-4">
           Monthly Spending Trends
         </h3>
-        <div className="h-80 flex items-center justify-center text-gray-500">
+        <div className="h-80 flex items-center justify-center text-muted-foreground">
           No transaction data available
         </div>
       </div>
@@ -75,8 +77,8 @@ export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsPr
   const CustomTooltip = ({ active, payload, label }: TooltipProps) => {
     if (active && payload && payload.length) {
       return (
-        <div className="bg-white p-3 border rounded shadow-lg">
-          <p className="font-medium">{label}</p>
+        <div className="bg-card p-3 border rounded shadow-lg">
+          <p className="font-medium text-foreground">{label}</p>
           {payload.map((entry, index) => (
             <p key={index} style={{ color: entry.color }}>
               {entry.name}: €{Math.abs(entry.value).toLocaleString()}
@@ -98,12 +100,15 @@ export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsPr
 
   return (
     <div className={className}>
-      <h3 className="text-lg font-medium text-gray-900 mb-4">
+      <h3 className="text-lg font-medium text-foreground mb-4">
         {getTitle(days)}
       </h3>
       <div className="h-80">
         <ResponsiveContainer width="100%" height="100%">
-          <BarChart data={displayData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+          <BarChart
+            data={displayData}
+            margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
+          >
             <CartesianGrid strokeDasharray="3 3" />
             <XAxis
               dataKey="month"
@@ -122,7 +127,7 @@ export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsPr
           </BarChart>
         </ResponsiveContainer>
       </div>
-      <div className="mt-4 flex justify-center space-x-6 text-sm">
+      <div className="mt-4 flex justify-center space-x-6 text-sm text-foreground">
         <div className="flex items-center">
           <div className="w-3 h-3 bg-green-500 rounded mr-2" />
           <span>Income</span>

frontend/src/components/analytics/StatCard.tsx

@@ -1,5 +1,6 @@
 import type { LucideIcon } from "lucide-react";
-import clsx from "clsx";
+import { Card, CardContent } from "../ui/card";
+import { cn } from "../../lib/utils";
 
 interface StatCardProps {
   title: string;
@@ -11,6 +12,7 @@ interface StatCardProps {
     isPositive: boolean;
   };
   className?: string;
+  iconColor?: "green" | "blue" | "red" | "purple" | "orange" | "default";
 }
 
 export default function StatCard({
@@ -20,45 +22,59 @@ export default function StatCard({
   icon: Icon,
   trend,
   className,
+  iconColor = "default",
 }: StatCardProps) {
   return (
-    <div
-      className={clsx(
-        "bg-white rounded-lg shadow p-6 border border-gray-200",
-        className
-      )}
-    >
-      <div className="flex items-center">
-        <div className="flex-shrink-0">
-          <Icon className="h-8 w-8 text-blue-600" />
-        </div>
-        <div className="ml-5 w-0 flex-1">
-          <dl>
-            <dt className="text-sm font-medium text-gray-500 truncate">
-              {title}
-            </dt>
-            <dd className="flex items-baseline">
-              <div className="text-2xl font-semibold text-gray-900">
-                {value}
-              </div>
+    <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={clsx(
+                  className={cn(
                     "ml-2 flex items-baseline text-sm font-semibold",
-                    trend.isPositive ? "text-green-600" : "text-red-600"
+                    trend.isPositive
+                      ? "text-green-600 dark:text-green-400"
+                      : "text-red-600 dark:text-red-400",
                   )}
                 >
                   {trend.isPositive ? "+" : ""}
                   {trend.value}%
                 </div>
               )}
-            </dd>
+            </div>
             {subtitle && (
-              <dd className="text-sm text-gray-600 mt-1">{subtitle}</dd>
+              <p className="text-sm text-muted-foreground mt-1">{subtitle}</p>
             )}
-          </dl>
+          </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>
         </div>
-      </div>
-    </div>
+      </CardContent>
+    </Card>
   );
-}
+}

frontend/src/components/analytics/TimePeriodFilter.tsx

@@ -1,4 +1,5 @@
 import { Calendar } from "lucide-react";
+import { Button } from "../ui/button";
 import type { TimePeriod } from "../../lib/timePeriods";
 import { TIME_PERIODS } from "../../lib/timePeriods";
 
@@ -14,26 +15,25 @@ export default function TimePeriodFilter({
   className = "",
 }: TimePeriodFilterProps) {
   return (
-    <div className={`flex items-center gap-4 ${className}`}>
-      <div className="flex items-center gap-2 text-gray-700">
+    <div className={`flex flex-col sm:flex-row sm: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 gap-2">
+      <div className="flex flex-wrap gap-2">
         {TIME_PERIODS.map((period) => (
-          <button
+          <Button
             key={period.value}
             onClick={() => onPeriodChange(period)}
-            className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
-              selectedPeriod.value === period.value
-                ? "bg-blue-600 text-white"
-                : "bg-gray-100 text-gray-700 hover:bg-gray-200"
-            }`}
+            variant={
+              selectedPeriod.value === period.value ? "default" : "outline"
+            }
+            size="sm"
           >
             {period.label}
-          </button>
+          </Button>
         ))}
       </div>
     </div>
   );
-}
+}

frontend/src/components/analytics/TransactionDistribution.tsx

@@ -17,6 +17,7 @@ interface PieDataPoint {
   name: string;
   value: number;
   color: string;
+  [key: string]: string | number;
 }
 
 interface TooltipProps {
@@ -33,27 +34,27 @@ export default function TransactionDistribution({
   // Helper function to get bank name from institution_id
   const getBankName = (institutionId: string): string => {
     const bankMapping: Record<string, string> = {
-      'REVOLUT_REVOLT21': 'Revolut',
-      'NUBANK_NUPBBR25': 'Nu Pagamentos',
-      'BANCOBPI_BBPIPTPL': 'Banco BPI',
+      REVOLUT_REVOLT21: "Revolut",
+      NUBANK_NUPBBR25: "Nu Pagamentos",
+      BANCOBPI_BBPIPTPL: "Banco BPI",
       // TODO: Add more bank mappings as needed
     };
-    return bankMapping[institutionId] || institutionId.split('_')[0];
+    return bankMapping[institutionId] || institutionId.split("_")[0];
   };
 
   // Helper function to create display name for account
   const getAccountDisplayName = (account: Account): string => {
     const bankName = getBankName(account.institution_id);
-    const accountName = account.name || `Account ${account.id.split('-')[1]}`;
+    const accountName = account.name || `Account ${account.id.split("-")[1]}`;
     return `${bankName} - ${accountName}`;
   };
 
   // Create pie chart data from account balances
   const pieData: PieDataPoint[] = accounts.map((account, index) => {
     const primaryBalance = account.balances?.[0]?.amount || 0;
-    
+
     const colors = ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6"];
-    
+
     return {
       name: getAccountDisplayName(account),
       value: primaryBalance,
@@ -66,10 +67,10 @@ export default function TransactionDistribution({
   if (pieData.length === 0 || totalBalance === 0) {
     return (
       <div className={className}>
-        <h3 className="text-lg font-medium text-gray-900 mb-4">
+        <h3 className="text-lg font-medium text-foreground mb-4">
           Account Distribution
         </h3>
-        <div className="h-80 flex items-center justify-center text-gray-500">
+        <div className="h-80 flex items-center justify-center text-muted-foreground">
           No account data available
         </div>
       </div>
@@ -81,12 +82,12 @@ export default function TransactionDistribution({
       const data = payload[0].payload;
       const percentage = ((data.value / totalBalance) * 100).toFixed(1);
       return (
-        <div className="bg-white p-3 border rounded shadow-lg">
-          <p className="font-medium">{data.name}</p>
-          <p className="text-blue-600">
+        <div className="bg-card p-3 border rounded shadow-lg">
+          <p className="font-medium text-foreground">{data.name}</p>
+          <p className="text-primary">
             Balance: €{data.value.toLocaleString()}
           </p>
-          <p className="text-gray-600">{percentage}% of total</p>
+          <p className="text-muted-foreground">{percentage}% of total</p>
         </div>
       );
     }
@@ -95,7 +96,7 @@ export default function TransactionDistribution({
 
   return (
     <div className={className}>
-      <h3 className="text-lg font-medium text-gray-900 mb-4">
+      <h3 className="text-lg font-medium text-foreground mb-4">
         Account Balance Distribution
       </h3>
       <div className="h-80">
@@ -125,18 +126,23 @@ export default function TransactionDistribution({
       </div>
       <div className="mt-4 grid grid-cols-1 gap-2">
         {pieData.map((item, index) => (
-          <div key={index} className="flex items-center justify-between text-sm">
+          <div
+            key={index}
+            className="flex items-center justify-between text-sm"
+          >
             <div className="flex items-center">
               <div
                 className="w-3 h-3 rounded-full mr-2"
                 style={{ backgroundColor: item.color }}
               />
-              <span className="text-gray-700">{item.name}</span>
+              <span className="text-foreground">{item.name}</span>
             </div>
-            <span className="font-medium">€{item.value.toLocaleString()}</span>
+            <span className="font-medium text-foreground">
+              €{item.value.toLocaleString()}
+            </span>
           </div>
         ))}
       </div>
     </div>
   );
-}
+}

frontend/src/components/filters/AccountCombobox.tsx

@@ -11,7 +11,11 @@ import {
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import type { Account } from "../../types/api";
 
 export interface AccountComboboxProps {
@@ -29,10 +33,13 @@ export function AccountCombobox({
 }: AccountComboboxProps) {
   const [open, setOpen] = useState(false);
 
-  const selectedAccountData = accounts.find((account) => account.id === selectedAccount);
+  const selectedAccountData = accounts.find(
+    (account) => account.id === selectedAccount,
+  );
 
   const formatAccountName = (account: Account) => {
-    const displayName = account.name || "Unnamed Account";
+    const displayName =
+      account.display_name || account.name || "Unnamed Account";
     return `${displayName} (${account.institution_id})`;
   };
 
@@ -44,7 +51,7 @@ export function AccountCombobox({
             variant="outline"
             role="combobox"
             aria-expanded={open}
-            className="justify-between"
+            className="w-full justify-between"
           >
             <div className="flex items-center">
               <Building2 className="mr-2 h-4 w-4" />
@@ -72,7 +79,7 @@ export function AccountCombobox({
                   <Check
                     className={cn(
                       "mr-2 h-4 w-4",
-                      selectedAccount === "" ? "opacity-100" : "opacity-0"
+                      selectedAccount === "" ? "opacity-100" : "opacity-0",
                     )}
                   />
                   <Building2 className="mr-2 h-4 w-4 text-gray-400" />
@@ -83,7 +90,7 @@ export function AccountCombobox({
                 {accounts.map((account) => (
                   <CommandItem
                     key={account.id}
-                    value={`${account.name} ${account.institution_id}`}
+                    value={`${account.display_name || account.name} ${account.institution_id}`}
                     onSelect={() => {
                       onAccountChange(account.id);
                       setOpen(false);
@@ -94,12 +101,14 @@ export function AccountCombobox({
                         "mr-2 h-4 w-4",
                         selectedAccount === account.id
                           ? "opacity-100"
-                          : "opacity-0"
+                          : "opacity-0",
                       )}
                     />
                     <div className="flex flex-col">
                       <span className="font-medium">
-                        {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,12 +8,14 @@ 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<{
@@ -33,7 +35,9 @@ export function ActiveFilterChips({
 
   // Account chip
   if (filterState.selectedAccount) {
-    const account = accounts.find((acc) => acc.id === filterState.selectedAccount);
+    const account = accounts.find(
+      (acc) => acc.id === filterState.selectedAccount,
+    );
     const accountName = account
       ? `${account.name || "Unnamed Account"} (${account.institution_id})`
       : "Unknown Account";
@@ -66,27 +70,6 @@ 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":
@@ -94,11 +77,6 @@ export function ActiveFilterChips({
         onFilterChange("startDate", "");
         onFilterChange("endDate", "");
         break;
-      case "minAmount":
-        // Clear both min and max amount
-        onFilterChange("minAmount", "");
-        onFilterChange("maxAmount", "");
-        break;
       default:
         onFilterChange(key, "");
     }
@@ -129,6 +107,15 @@ 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

@@ -1,122 +0,0 @@
-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,12 @@ 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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 
 export interface DateRangePickerProps {
   startDate: string;
@@ -22,31 +27,35 @@ interface DatePreset {
 
 const datePresets: DatePreset[] = [
   {
-    label: "Last 7 days",
+    label: "Today",
     getValue: () => {
-      const endDate = new Date();
-      const startDate = new Date();
-      startDate.setDate(endDate.getDate() - 7);
+      const today = new Date();
       return {
-        startDate: startDate.toISOString().split("T")[0],
-        endDate: endDate.toISOString().split("T")[0],
+        startDate: today.toISOString().split("T")[0],
+        endDate: today.toISOString().split("T")[0],
       };
     },
   },
   {
-    label: "This week",
+    label: "Yesterday",
     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);
-
+      const yesterday = new Date();
+      yesterday.setDate(yesterday.getDate() - 1);
       return {
-        startDate: startOfWeek.toISOString().split("T")[0],
-        endDate: endOfWeek.toISOString().split("T")[0],
+        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);
+      return {
+        startDate: startDate.toISOString().split("T")[0],
+        endDate: endDate.toISOString().split("T")[0],
       };
     },
   },
@@ -55,7 +64,7 @@ const datePresets: DatePreset[] = [
     getValue: () => {
       const endDate = new Date();
       const startDate = new Date();
-      startDate.setDate(endDate.getDate() - 30);
+      startDate.setDate(endDate.getDate() - 29);
       return {
         startDate: startDate.toISOString().split("T")[0],
         endDate: endDate.toISOString().split("T")[0],
@@ -75,19 +84,6 @@ 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({
@@ -111,12 +107,12 @@ export function DateRangePicker({
     if (range?.from && range?.to) {
       onDateRangeChange(
         range.from.toISOString().split("T")[0],
-        range.to.toISOString().split("T")[0]
+        range.to.toISOString().split("T")[0],
       );
     } else if (range?.from && !range?.to) {
       onDateRangeChange(
         range.from.toISOString().split("T")[0],
-        range.from.toISOString().split("T")[0]
+        range.from.toISOString().split("T")[0],
       );
     }
   };
@@ -161,7 +157,7 @@ export function DateRangePicker({
             variant="outline"
             className={cn(
               "justify-between text-left font-normal",
-              !dateRange && "text-muted-foreground"
+              !dateRange && "text-muted-foreground",
             )}
           >
             <div className="flex items-center">
@@ -172,34 +168,30 @@ export function DateRangePicker({
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="start">
-          <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>
+          <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">
               {datePresets.map((preset) => (
                 <Button
                   key={preset.label}
-                  variant="ghost"
+                  variant="outline"
                   size="sm"
-                  className="w-full justify-start text-sm"
+                  className="text-xs px-2 h-7"
                   onClick={() => handlePresetClick(preset)}
                 >
                   {preset.label}
                 </Button>
               ))}
-            </div>
-            {/* Calendar */}
-            <Calendar
-              initialFocus
-              mode="range"
-              defaultMonth={dateRange?.from}
-              selected={dateRange}
-              onSelect={handleDateRangeSelect}
-              numberOfMonths={2}
-            />
-          </div>
+            </CardFooter>
+          </Card>
         </PopoverContent>
       </Popover>
     </div>

frontend/src/components/filters/FilterBar.tsx

@@ -1,11 +1,9 @@
-import { Search, X } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { Search } from "lucide-react";
 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 {
@@ -13,8 +11,6 @@ export interface FilterState {
   selectedAccount: string;
   startDate: string;
   endDate: string;
-  minAmount: string;
-  maxAmount: string;
 }
 
 export interface FilterBarProps {
@@ -23,8 +19,6 @@ export interface FilterBarProps {
   onClearFilters: () => void;
   accounts?: Account[];
   isSearchLoading?: boolean;
-  showRunningBalance: boolean;
-  onToggleRunningBalance: () => void;
   className?: string;
 }
 
@@ -34,18 +28,13 @@ export function FilterBar({
   onClearFilters,
   accounts,
   isSearchLoading = false,
-  showRunningBalance,
-  onToggleRunningBalance,
   className,
 }: FilterBarProps) {
-
   const hasActiveFilters =
     filterState.searchTerm ||
     filterState.selectedAccount ||
     filterState.startDate ||
-    filterState.endDate ||
-    filterState.minAmount ||
-    filterState.maxAmount;
+    filterState.endDate;
 
   const handleDateRangeChange = (startDate: string, endDate: string) => {
     onFilterChange("startDate", startDate);
@@ -53,76 +42,93 @@ export function FilterBar({
   };
 
   return (
-    <div className={cn("bg-white rounded-lg shadow border", className)}>
+    <div className={cn("bg-card rounded-lg shadow border", className)}>
       {/* Main Filter Bar */}
       <div className="px-6 py-4">
         <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold text-gray-900">Transactions</h3>
-          <Button
-            onClick={onToggleRunningBalance}
-            variant={showRunningBalance ? "default" : "outline"}
-            size="sm"
-          >
-            Balance
-          </Button>
+          <h3 className="text-lg font-semibold text-card-foreground">
+            Transactions
+          </h3>
         </div>
 
         {/* Primary Filters Row */}
-        <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-gray-400" />
-            <Input
-              placeholder="Search transactions..."
-              value={filterState.searchTerm}
-              onChange={(e) => onFilterChange("searchTerm", e.target.value)}
-              className="pl-9 pr-8"
-            />
-            {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-gray-300 border-t-blue-500 rounded-full"></div>
+        <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>
-            )}
+
+              {/* 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>
 
-          {/* Account Selection */}
-          <AccountCombobox
-            accounts={accounts}
-            selectedAccount={filterState.selectedAccount}
-            onAccountChange={(accountId) =>
-              onFilterChange("selectedAccount", accountId)
-            }
-            className="w-[200px]"
-          />
+          {/* 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>
 
-          {/* Date Range Picker */}
-          <DateRangePicker
-            startDate={filterState.startDate}
-            endDate={filterState.endDate}
-            onDateRangeChange={handleDateRangeChange}
-            className="w-[240px]"
-          />
+            {/* Second Row: Account Selection (Full Width) */}
+            <AccountCombobox
+              accounts={accounts}
+              selectedAccount={filterState.selectedAccount}
+              onAccountChange={(accountId) =>
+                onFilterChange("selectedAccount", accountId)
+              }
+              className="w-full"
+            />
 
-          {/* 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-gray-600"
-            >
-              <X className="h-4 w-4 mr-1" />
-              Clear All
-            </Button>
-          )}
+            {/* Third Row: Date Range */}
+            <DateRangePicker
+              startDate={filterState.startDate}
+              endDate={filterState.endDate}
+              onDateRangeChange={handleDateRangeChange}
+              className="w-full"
+            />
+          </div>
         </div>
 
         {/* Active Filter Chips */}
@@ -130,6 +136,7 @@ export function FilterBar({
           <ActiveFilterChips
             filterState={filterState}
             onFilterChange={onFilterChange}
+            onClearFilters={onClearFilters}
             accounts={accounts}
           />
         )}

frontend/src/components/filters/index.ts

@@ -1,6 +1,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';
+export { FilterBar } from "./FilterBar";
+export { DateRangePicker } from "./DateRangePicker";
+export { AccountCombobox } from "./AccountCombobox";
+export { ActiveFilterChips } from "./ActiveFilterChips";
+export type { FilterState, FilterBarProps } from "./FilterBar";

frontend/src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+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",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };

frontend/src/components/ui/badge.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -20,8 +20,8 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -30,7 +30,7 @@ export interface BadgeProps
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
     <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

frontend/src/components/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -31,27 +31,27 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Button.displayName = "Button"
+    );
+  },
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

frontend/src/components/ui/calendar.tsx

@@ -1,13 +1,13 @@
-import * as React from "react"
+import * as React from "react";
 import {
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-} from "lucide-react"
-import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+} from "lucide-react";
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
 
-import { cn } from "@/lib/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { Button, buttonVariants } from "@/components/ui/button";
 
 function Calendar({
   className,
@@ -19,9 +19,9 @@ function Calendar({
   components,
   ...props
 }: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }) {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();
 
   return (
     <DayPicker
@@ -30,7 +30,7 @@ function Calendar({
         "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
+        className,
       )}
       captionLayout={captionLayout}
       formatters={{
@@ -42,82 +42,82 @@ function Calendar({
         root: cn("w-fit", defaultClassNames.root),
         months: cn(
           "relative flex flex-col gap-4 md:flex-row",
-          defaultClassNames.months
+          defaultClassNames.months,
         ),
         month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
         nav: cn(
           "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
-          defaultClassNames.nav
+          defaultClassNames.nav,
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
           "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
-          defaultClassNames.button_previous
+          defaultClassNames.button_previous,
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
           "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
-          defaultClassNames.button_next
+          defaultClassNames.button_next,
         ),
         month_caption: cn(
           "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
-          defaultClassNames.month_caption
+          defaultClassNames.month_caption,
         ),
         dropdowns: cn(
           "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
-          defaultClassNames.dropdowns
+          defaultClassNames.dropdowns,
         ),
         dropdown_root: cn(
           "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
-          defaultClassNames.dropdown_root
+          defaultClassNames.dropdown_root,
         ),
         dropdown: cn(
           "bg-popover absolute inset-0 opacity-0",
-          defaultClassNames.dropdown
+          defaultClassNames.dropdown,
         ),
         caption_label: cn(
           "select-none font-medium",
           captionLayout === "label"
             ? "text-sm"
             : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
-          defaultClassNames.caption_label
+          defaultClassNames.caption_label,
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
           "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
-          defaultClassNames.weekday
+          defaultClassNames.weekday,
         ),
         week: cn("mt-2 flex w-full", defaultClassNames.week),
         week_number_header: cn(
           "w-[--cell-size] select-none",
-          defaultClassNames.week_number_header
+          defaultClassNames.week_number_header,
         ),
         week_number: cn(
           "text-muted-foreground select-none text-[0.8rem]",
-          defaultClassNames.week_number
+          defaultClassNames.week_number,
         ),
         day: cn(
           "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
-          defaultClassNames.day
+          defaultClassNames.day,
         ),
         range_start: cn(
           "bg-accent rounded-l-md",
-          defaultClassNames.range_start
+          defaultClassNames.range_start,
         ),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
         today: cn(
           "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today
+          defaultClassNames.today,
         ),
         outside: cn(
           "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
+          defaultClassNames.outside,
         ),
         disabled: cn(
           "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
+          defaultClassNames.disabled,
         ),
         hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames,
@@ -131,13 +131,13 @@ function Calendar({
               className={cn(className)}
               {...props}
             />
-          )
+          );
         },
         Chevron: ({ className, orientation, ...props }) => {
           if (orientation === "left") {
             return (
               <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
+            );
           }
 
           if (orientation === "right") {
@@ -146,12 +146,12 @@ function Calendar({
                 className={cn("size-4", className)}
                 {...props}
               />
-            )
+            );
           }
 
           return (
             <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
+          );
         },
         DayButton: CalendarDayButton,
         WeekNumber: ({ children, ...props }) => {
@@ -161,13 +161,13 @@ function Calendar({
                 {children}
               </div>
             </td>
-          )
+          );
         },
         ...components,
       }}
       {...props}
     />
-  )
+  );
 }
 
 function CalendarDayButton({
@@ -176,12 +176,12 @@ function CalendarDayButton({
   modifiers,
   ...props
 }: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();
 
-  const ref = React.useRef<HTMLButtonElement>(null)
+  const ref = React.useRef<HTMLButtonElement>(null);
   React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
 
   return (
     <Button
@@ -201,11 +201,11 @@ function CalendarDayButton({
       className={cn(
         "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Calendar, CalendarDayButton }
+export { Calendar, CalendarDayButton };

frontend/src/components/ui/card.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

frontend/src/components/ui/command.tsx

@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
 
-import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -16,12 +16,12 @@ const Command = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
+      className,
     )}
     {...props}
   />
-))
-Command.displayName = CommandPrimitive.displayName
+));
+Command.displayName = CommandPrimitive.displayName;
 
 const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
@@ -32,8 +32,8 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
         </Command>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
@@ -45,14 +45,14 @@ const CommandInput = React.forwardRef<
       ref={ref}
       className={cn(
         "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     />
   </div>
-))
+));
 
-CommandInput.displayName = CommandPrimitive.Input.displayName
+CommandInput.displayName = CommandPrimitive.Input.displayName;
 
 const CommandList = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
@@ -63,9 +63,9 @@ const CommandList = React.forwardRef<
     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
     {...props}
   />
-))
+));
 
-CommandList.displayName = CommandPrimitive.List.displayName
+CommandList.displayName = CommandPrimitive.List.displayName;
 
 const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
@@ -76,9 +76,9 @@ const CommandEmpty = React.forwardRef<
     className="py-6 text-center text-sm"
     {...props}
   />
-))
+));
 
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
 const CommandGroup = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Group>,
@@ -88,13 +88,13 @@ const CommandGroup = React.forwardRef<
     ref={ref}
     className={cn(
       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
+      className,
     )}
     {...props}
   />
-))
+));
 
-CommandGroup.displayName = CommandPrimitive.Group.displayName
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
 const CommandSeparator = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Separator>,
@@ -105,8 +105,8 @@ const CommandSeparator = React.forwardRef<
     className={cn("-mx-1 h-px bg-border", className)}
     {...props}
   />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
 const CommandItem = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Item>,
@@ -116,13 +116,13 @@ const CommandItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className
+      className,
     )}
     {...props}
   />
-))
+));
 
-CommandItem.displayName = CommandPrimitive.Item.displayName
+CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 const CommandShortcut = ({
   className,
@@ -132,13 +132,13 @@ const CommandShortcut = ({
     <span
       className={cn(
         "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
+        className,
       )}
       {...props}
     />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
 
 export {
   Command,
@@ -150,4 +150,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-}
+};

frontend/src/components/ui/data-table-pagination.tsx

@@ -0,0 +1,137 @@
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+interface DataTablePaginationProps {
+  currentPage: number;
+  totalPages: number;
+  pageSize: number;
+  total: number;
+  hasNext: boolean;
+  hasPrev: boolean;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (pageSize: number) => void;
+}
+
+export function DataTablePagination({
+  currentPage,
+  totalPages,
+  pageSize,
+  total,
+  hasNext,
+  hasPrev,
+  onPageChange,
+  onPageSizeChange,
+}: DataTablePaginationProps) {
+  return (
+    <div className="flex items-center justify-between px-2 py-4">
+      <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+        <div className="flex items-center space-x-6 lg:space-x-8">
+          <div className="flex items-center space-x-2">
+            <p className="text-sm font-medium text-foreground">Rows per page</p>
+            <Select
+              value={`${pageSize}`}
+              onValueChange={(value) => {
+                onPageSizeChange(Number(value));
+                onPageChange(1); // Reset to first page when changing page size
+              }}
+            >
+              <SelectTrigger className="h-8 w-[70px]">
+                <SelectValue placeholder={pageSize} />
+              </SelectTrigger>
+              <SelectContent side="top">
+                {[10, 25, 50, 100].map((pageSize) => (
+                  <SelectItem key={pageSize} value={`${pageSize}`}>
+                    {pageSize}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex w-[100px] items-center justify-center text-sm font-medium text-foreground">
+            Page {currentPage} of {totalPages}
+          </div>
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="outline"
+              className="hidden h-8 w-8 p-0 lg:flex"
+              onClick={() => onPageChange(1)}
+              disabled={currentPage === 1}
+            >
+              <span className="sr-only">Go to first page</span>
+              <ChevronsLeft className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="h-8 w-8 p-0"
+              onClick={() => onPageChange(currentPage - 1)}
+              disabled={!hasPrev}
+            >
+              <span className="sr-only">Go to previous page</span>
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="h-8 w-8 p-0"
+              onClick={() => onPageChange(currentPage + 1)}
+              disabled={!hasNext}
+            >
+              <span className="sr-only">Go to next page</span>
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="hidden h-8 w-8 p-0 lg:flex"
+              onClick={() => onPageChange(totalPages)}
+              disabled={currentPage === totalPages}
+            >
+              <span className="sr-only">Go to last page</span>
+              <ChevronsRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+        <div className="text-sm text-muted-foreground">
+          Showing {(currentPage - 1) * pageSize + 1} to{" "}
+          {Math.min(currentPage * pageSize, total)} of {total} entries
+        </div>
+      </div>
+
+      {/* Mobile view */}
+      <div className="flex w-full items-center justify-between space-x-4 sm:hidden">
+        <div className="text-sm text-muted-foreground">
+          Page {currentPage} of {totalPages}
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onPageChange(currentPage - 1)}
+            disabled={!hasPrev}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onPageChange(currentPage + 1)}
+            disabled={!hasNext}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ui/dialog.tsx

@@ -1,16 +1,16 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -20,12 +20,12 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     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
+      className,
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+        className,
       )}
       {...props}
     >
@@ -48,8 +48,8 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
   className,
@@ -58,12 +58,12 @@ const DialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
   className,
@@ -72,12 +72,12 @@ const DialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -87,12 +87,12 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -103,8 +103,8 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
@@ -117,4 +117,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
+};

frontend/src/components/ui/drawer.tsx

@@ -0,0 +1,116 @@
+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

@@ -0,0 +1,39 @@
+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/input.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {
@@ -9,14 +9,14 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
         type={type}
         className={cn(
           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Input.displayName = "Input"
+    );
+  },
+);
+Input.displayName = "Input";
 
-export { Input }
+export { Input };

frontend/src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Label = React.forwardRef<
+  HTMLLabelElement,
+  React.LabelHTMLAttributes<HTMLLabelElement>
+>(({ className, ...props }, ref) => (
+  <label
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className,
+    )}
+    {...props}
+  />
+));
+Label.displayName = "Label";
+
+export { Label };

frontend/src/components/ui/logo.tsx

@@ -0,0 +1,46 @@
+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/pagination.tsx

@@ -0,0 +1,118 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+import type { ButtonProps } from "@/components/ui/button";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+));
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+));
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">;
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};

frontend/src/components/ui/popover.tsx

@@ -1,13 +1,13 @@
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
 
-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;
 
-const PopoverAnchor = PopoverPrimitive.Anchor
+const PopoverAnchor = PopoverPrimitive.Anchor;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -20,12 +20,12 @@ const PopoverContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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-popover-content-transform-origin]",
-        className
+        className,
       )}
       {...props}
     />
   </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

frontend/src/components/ui/progress.tsx

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,21 @@
+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/select.tsx

@@ -1,14 +1,14 @@
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
+      className,
     )}
     {...props}
   >
@@ -27,8 +27,8 @@ const SelectTrigger = React.forwardRef<
       <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -38,14 +38,14 @@ const SelectScrollUpButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className
+      className,
     )}
     {...props}
   >
     <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -55,15 +55,15 @@ const SelectScrollDownButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className
+      className,
     )}
     {...props}
   >
     <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
-))
+));
 SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+  SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -76,7 +76,7 @@ const SelectContent = React.forwardRef<
         "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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-select-content-transform-origin]",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
+        className,
       )}
       position={position}
       {...props}
@@ -86,7 +86,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
         )}
       >
         {children}
@@ -94,8 +94,8 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -106,8 +106,8 @@ const SelectLabel = React.forwardRef<
     className={cn("px-2 py-1.5 text-sm font-semibold", className)}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -117,7 +117,7 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -128,8 +128,8 @@ const SelectItem = React.forwardRef<
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -140,8 +140,8 @@ const SelectSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
@@ -154,4 +154,4 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
-}
+};

frontend/src/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,140 @@
+"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

@@ -0,0 +1,779 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,27 @@
+"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

@@ -0,0 +1,27 @@
+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/table.tsx

@@ -0,0 +1,117 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

frontend/src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+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/theme-toggle.tsx

@@ -0,0 +1,52 @@
+import { Monitor, Moon, Sun } from "lucide-react";
+import { Button } from "./button";
+import { useTheme } from "../../contexts/ThemeContext";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  const cycleTheme = () => {
+    if (theme === "light") {
+      setTheme("dark");
+    } else if (theme === "dark") {
+      setTheme("system");
+    } else {
+      setTheme("light");
+    }
+  };
+
+  const getIcon = () => {
+    switch (theme) {
+      case "light":
+        return <Sun className="h-4 w-4" />;
+      case "dark":
+        return <Moon className="h-4 w-4" />;
+      case "system":
+        return <Monitor className="h-4 w-4" />;
+    }
+  };
+
+  const getLabel = () => {
+    switch (theme) {
+      case "light":
+        return "Switch to dark mode";
+      case "dark":
+        return "Switch to system mode";
+      case "system":
+        return "Switch to light mode";
+    }
+  };
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      onClick={cycleTheme}
+      className="h-8 w-8"
+      title={getLabel()}
+    >
+      {getIcon()}
+      <span className="sr-only">{getLabel()}</span>
+    </Button>
+  );
+}

frontend/src/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,111 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "light" | "dark" | "system";
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  actualTheme: "light" | "dark";
+}
+
+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;
+    return stored || "system";
+  });
+
+  const [actualTheme, setActualTheme] = useState<"light" | "dark">("light");
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    const updateActualTheme = () => {
+      let resolvedTheme: "light" | "dark";
+
+      if (theme === "system") {
+        resolvedTheme = window.matchMedia("(prefers-color-scheme: dark)")
+          .matches
+          ? "dark"
+          : "light";
+      } else {
+        resolvedTheme = theme;
+      }
+
+      setActualTheme(resolvedTheme);
+
+      // Remove previous theme classes
+      root.classList.remove("light", "dark");
+
+      // 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();
+
+    // Listen for system theme changes
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      if (theme === "system") {
+        updateActualTheme();
+      }
+    };
+
+    mediaQuery.addEventListener("change", handleChange);
+
+    // Store theme preference
+    localStorage.setItem("theme", theme);
+
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, actualTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}

frontend/src/hooks/use-mobile.tsx

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,40 @@
+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: 222.2 47.4% 11.2%;
+    --primary: 219 91% 46%;
     --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 189 94% 43%;
+    --secondary-foreground: 210 40% 98%;
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
     --accent: 210 40% 96.1%;
@@ -28,7 +28,21 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --radius: 0.5rem
+    --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%;
@@ -37,9 +51,9 @@
     --card-foreground: 210 40% 98%;
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
+    --primary: 219 91% 46%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 189 94% 43%;
     --secondary-foreground: 210 40% 98%;
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
@@ -54,7 +68,15 @@
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%
+    --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,6 +12,7 @@ import type {
   HealthData,
   AccountUpdate,
   TransactionStats,
+  SyncOperationsResponse,
 } from "../types/api";
 
 // Use VITE_API_URL for development, relative URLs for production
@@ -41,11 +42,10 @@ export const apiClient = {
   updateAccount: async (
     id: string,
     updates: AccountUpdate,
-  ): Promise<{ id: string; name?: string }> => {
-    const response = await api.put<ApiResponse<{ id: string; name?: string }>>(
-      `/accounts/${id}`,
-      updates,
-    );
+  ): Promise<{ id: string; display_name?: string }> => {
+    const response = await api.put<
+      ApiResponse<{ id: string; display_name?: string }>
+    >(`/accounts/${id}`, updates);
     return response.data.data;
   },
 
@@ -56,13 +56,16 @@ export const apiClient = {
   },
 
   // Get historical balances for balance progression chart
-  getHistoricalBalances: async (days?: number, accountId?: string): Promise<Balance[]> => {
+  getHistoricalBalances: async (
+    days?: number,
+    accountId?: string,
+  ): Promise<Balance[]> => {
     const queryParams = new URLSearchParams();
     if (days) queryParams.append("days", days.toString());
     if (accountId) queryParams.append("account_id", accountId);
 
     const response = await api.get<ApiResponse<Balance[]>>(
-      `/balances/history?${queryParams.toString()}`
+      `/balances/history?${queryParams.toString()}`,
     );
     return response.data.data;
   },
@@ -165,45 +168,66 @@ export const apiClient = {
     return response.data.data;
   },
 
+
+
   // Analytics endpoints
   getTransactionStats: async (days?: number): Promise<TransactionStats> => {
     const queryParams = new URLSearchParams();
     if (days) queryParams.append("days", days.toString());
 
     const response = await api.get<ApiResponse<TransactionStats>>(
-      `/transactions/stats?${queryParams.toString()}`
+      `/transactions/stats?${queryParams.toString()}`,
     );
     return response.data.data;
   },
 
   // Get all transactions for analytics (no pagination)
-  getTransactionsForAnalytics: async (days?: number): Promise<AnalyticsTransaction[]> => {
+  getTransactionsForAnalytics: async (
+    days?: number,
+  ): Promise<AnalyticsTransaction[]> => {
     const queryParams = new URLSearchParams();
     if (days) queryParams.append("days", days.toString());
 
     const response = await api.get<ApiResponse<AnalyticsTransaction[]>>(
-      `/transactions/analytics?${queryParams.toString()}`
+      `/transactions/analytics?${queryParams.toString()}`,
     );
     return response.data.data;
   },
 
   // Get monthly transaction statistics (pre-calculated)
-  getMonthlyTransactionStats: async (days?: number): Promise<Array<{
-    month: string;
-    income: number;
-    expenses: number;
-    net: number;
-  }>> => {
-    const queryParams = new URLSearchParams();
-    if (days) queryParams.append("days", days.toString());
-
-    const response = await api.get<ApiResponse<Array<{
+  getMonthlyTransactionStats: async (
+    days?: number,
+  ): Promise<
+    Array<{
       month: string;
       income: number;
       expenses: number;
       net: number;
-    }>>>(
-      `/transactions/monthly-stats?${queryParams.toString()}`
+    }>
+  > => {
+    const queryParams = new URLSearchParams();
+    if (days) queryParams.append("days", days.toString());
+
+    const response = await api.get<
+      ApiResponse<
+        Array<{
+          month: string;
+          income: number;
+          expenses: number;
+          net: number;
+        }>
+      >
+    >(`/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;
   },

frontend/src/lib/timePeriods.ts

@@ -16,4 +16,4 @@ export const TIME_PERIODS: TimePeriod[] = [
   { label: "Last 6 months", days: 180, value: "6m" },
   { label: "Year to Date", days: getDaysFromYearStart(), value: "ytd" },
   { label: "Last 365 days", days: 365, value: "365d" },
-];
+];

frontend/src/lib/utils.ts

@@ -1,11 +1,14 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
 
-export function formatCurrency(amount: number, currency: string = "EUR"): string {
+export function formatCurrency(
+  amount: number,
+  currency: string = "EUR",
+): string {
   return new Intl.NumberFormat("en-US", {
     style: "currency",
     currency,

frontend/src/main.tsx

@@ -2,6 +2,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { createRouter, RouterProvider } from "@tanstack/react-router";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ThemeProvider } from "./contexts/ThemeContext";
 import "./index.css";
 import { routeTree } from "./routeTree.gen";
 
@@ -19,7 +20,9 @@ const queryClient = new QueryClient({
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
+      <ThemeProvider>
+        <RouterProvider router={router} />
+      </ThemeProvider>
     </QueryClientProvider>
   </StrictMode>,
 );

frontend/src/routeTree.gen.ts

@@ -10,6 +10,8 @@
 
 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 AnalyticsRouteImport } from './routes/analytics'
 import { Route as IndexRouteImport } from './routes/index'
@@ -19,6 +21,16 @@ 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',
@@ -39,12 +51,16 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/analytics': typeof AnalyticsRoute
   '/notifications': typeof NotificationsRoute
+  '/settings': typeof SettingsRoute
+  '/system': typeof SystemRoute
   '/transactions': typeof TransactionsRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/analytics': typeof AnalyticsRoute
   '/notifications': typeof NotificationsRoute
+  '/settings': typeof SettingsRoute
+  '/system': typeof SystemRoute
   '/transactions': typeof TransactionsRoute
 }
 export interface FileRoutesById {
@@ -52,20 +68,43 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/analytics': typeof AnalyticsRoute
   '/notifications': typeof NotificationsRoute
+  '/settings': typeof SettingsRoute
+  '/system': typeof SystemRoute
   '/transactions': typeof TransactionsRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/analytics' | '/notifications' | '/transactions'
+  fullPaths:
+    | '/'
+    | '/analytics'
+    | '/notifications'
+    | '/settings'
+    | '/system'
+    | '/transactions'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/analytics' | '/notifications' | '/transactions'
-  id: '__root__' | '/' | '/analytics' | '/notifications' | '/transactions'
+  to:
+    | '/'
+    | '/analytics'
+    | '/notifications'
+    | '/settings'
+    | '/system'
+    | '/transactions'
+  id:
+    | '__root__'
+    | '/'
+    | '/analytics'
+    | '/notifications'
+    | '/settings'
+    | '/system'
+    | '/transactions'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   AnalyticsRoute: typeof AnalyticsRoute
   NotificationsRoute: typeof NotificationsRoute
+  SettingsRoute: typeof SettingsRoute
+  SystemRoute: typeof SystemRoute
   TransactionsRoute: typeof TransactionsRoute
 }
 
@@ -78,6 +117,20 @@ 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'
@@ -106,6 +159,8 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AnalyticsRoute: AnalyticsRoute,
   NotificationsRoute: NotificationsRoute,
+  SettingsRoute: SettingsRoute,
+  SystemRoute: SystemRoute,
   TransactionsRoute: TransactionsRoute,
 }
 export const routeTree = rootRouteImport

frontend/src/routes/__root.tsx

@@ -1,30 +1,54 @@
 import { createRootRoute, Outlet } from "@tanstack/react-router";
-import { useState } from "react";
-import Sidebar from "../components/Sidebar";
-import Header from "../components/Header";
+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";
 
 function RootLayout() {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
+  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);
+    }
+  };
 
   return (
-    <div className="flex h-screen bg-gray-100">
-      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-
-      {/* Mobile overlay */}
-      {sidebarOpen && (
-        <div
-          className="fixed inset-0 z-40 bg-gray-600 bg-opacity-75 lg:hidden"
-          onClick={() => setSidebarOpen(false)}
-        />
-      )}
-
-      <div className="flex flex-col flex-1 overflow-hidden">
-        <Header setSidebarOpen={setSidebarOpen} />
-        <main className="flex-1 overflow-y-auto p-6">
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "16rem",
+          "--header-height": "4rem",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <SiteHeader />
+        <main className="flex-1 p-6 min-w-0">
           <Outlet />
         </main>
-      </div>
-    </div>
+      </SidebarInset>
+
+      {/* PWA Prompts */}
+      <PWAInstallPrompt onInstall={handlePWAInstall} />
+      <PWAUpdatePrompt
+        updateAvailable={updateAvailable}
+        onUpdate={handlePWAUpdate}
+      />
+    </SidebarProvider>
   );
 }
 

frontend/src/routes/analytics.tsx

@@ -14,13 +14,14 @@ import BalanceChart from "../components/analytics/BalanceChart";
 import TransactionDistribution from "../components/analytics/TransactionDistribution";
 import MonthlyTrends from "../components/analytics/MonthlyTrends";
 import TimePeriodFilter from "../components/analytics/TimePeriodFilter";
+import { Card, CardContent } from "../components/ui/card";
 import type { TimePeriod } from "../lib/timePeriods";
 import { TIME_PERIODS } from "../lib/timePeriods";
 
 function AnalyticsDashboard() {
   // Default to Last 365 days
   const [selectedPeriod, setSelectedPeriod] = useState<TimePeriod>(
-    TIME_PERIODS.find((p) => p.value === "365d") || TIME_PERIODS[3]
+    TIME_PERIODS.find((p) => p.value === "365d") || TIME_PERIODS[3],
   );
 
   // Fetch analytics data
@@ -43,17 +44,17 @@ function AnalyticsDashboard() {
 
   if (isLoading) {
     return (
-      <div className="p-6">
+      <div className="space-y-8">
         <div className="animate-pulse">
-          <div className="h-8 bg-gray-200 rounded w-48 mb-6"></div>
+          <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">
             {[...Array(3)].map((_, i) => (
-              <div key={i} className="h-32 bg-gray-200 rounded"></div>
+              <div key={i} className="h-32 bg-muted rounded"></div>
             ))}
           </div>
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-            <div className="h-96 bg-gray-200 rounded"></div>
-            <div className="h-96 bg-gray-200 rounded"></div>
+            <div className="h-96 bg-muted rounded"></div>
+            <div className="h-96 bg-muted rounded"></div>
           </div>
         </div>
       </div>
@@ -61,13 +62,16 @@ function AnalyticsDashboard() {
   }
 
   return (
-    <div className="p-6 space-y-8">
+    <div className="space-y-8">
       {/* Time Period Filter */}
-      <TimePeriodFilter
-        selectedPeriod={selectedPeriod}
-        onPeriodChange={setSelectedPeriod}
-        className="bg-white rounded-lg shadow p-4 border border-gray-200"
-      />
+      <Card>
+        <CardContent className="p-4">
+          <TimePeriodFilter
+            selectedPeriod={selectedPeriod}
+            onPeriodChange={setSelectedPeriod}
+          />
+        </CardContent>
+      </Card>
 
       {/* Stats Cards */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -76,20 +80,21 @@ 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}
-          className="border-green-200"
+          iconColor="green"
         />
         <StatCard
           title="Total Expenses"
           value={`€${(stats?.total_expenses || 0).toLocaleString()}`}
           subtitle="Outflows this period"
           icon={TrendingDown}
-          className="border-red-200"
+          iconColor="red"
         />
       </div>
 
@@ -100,38 +105,44 @@ function AnalyticsDashboard() {
           value={`€${(stats?.net_change || 0).toLocaleString()}`}
           subtitle="Income minus expenses"
           icon={CreditCard}
-          className={
-            (stats?.net_change || 0) >= 0 ? "border-green-200" : "border-red-200"
-          }
+          iconColor={(stats?.net_change || 0) >= 0 ? "green" : "red"}
         />
         <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>
 
       {/* Charts */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-        <div className="bg-white rounded-lg shadow p-6 border border-gray-200">
-          <BalanceChart data={balances || []} accounts={accounts || []} />
-        </div>
-        <div className="bg-white rounded-lg shadow p-6 border border-gray-200">
-          <TransactionDistribution accounts={accounts || []} />
-        </div>
+        <Card>
+          <CardContent className="p-6">
+            <BalanceChart data={balances || []} accounts={accounts || []} />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="p-6">
+            <TransactionDistribution accounts={accounts || []} />
+          </CardContent>
+        </Card>
       </div>
 
       {/* Monthly Trends */}
-      <div className="bg-white rounded-lg shadow p-6 border border-gray-200">
-        <MonthlyTrends days={selectedPeriod.days} />
-      </div>
+      <Card>
+        <CardContent className="p-6">
+          <MonthlyTrends days={selectedPeriod.days} />
+        </CardContent>
+      </Card>
     </div>
   );
 }

frontend/src/routes/index.tsx

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