Delete config.toml

Co-authored-by: elisiariocouto <818914+elisiariocouto@users.noreply.github.com>

.claude/settings.local.json

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

.gitignore

@@ -162,6 +162,3 @@ docker-compose.dev.yml
 nocodb/
 sql/
 leggen.db
-*.db
-config.toml
-.claude/

.mcp.json

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

.pre-commit-config.yaml

@@ -15,8 +15,8 @@ repos:
     hooks:
       - id: mypy
         name: Static type check with mypy
-        entry: uv run mypy leggen --check-untyped-defs
-        files: "^leggen/.*"
+        entry: uv run mypy leggen leggend --check-untyped-defs
+        files: "^leggen(d)?/.*"
         language: "system"
         types: ["python"]
         always_run: true

AGENTS.md

@@ -1,55 +1,5 @@
 # Agent Guidelines for Leggen
 
-## Quick Setup for Development
-
-### Prerequisites
-- **uv** must be installed for Python dependency management (can be installed via `pip install uv`)
-- **Configuration file**: Copy `config.example.toml` to `config.toml` before running any commands:
-  ```bash
-  cp config.example.toml config.toml
-  ```
-
-### Generate Mock Database
-The leggen CLI provides a command to generate a mock database for testing:
-
-```bash
-# Generate sample database with default settings (3 accounts, 50 transactions each)
-uv run leggen --config config.toml generate_sample_db --database /path/to/test.db --force
-
-# Custom configuration
-uv run leggen --config config.toml generate_sample_db --database ./test-data.db --accounts 5 --transactions 100 --force
-```
-
-The command outputs instructions for setting the required environment variable to use the generated database.
-
-### Start the API Server
-1. Install uv if not already installed: `pip install uv`
-2. Set the database environment variable to point to your generated mock database:
-   ```bash
-   export LEGGEN_DATABASE_PATH=/path/to/your/generated/database.db
-   ```
-3. Ensure the API can find the configuration file (choose one):
-   ```bash
-   # Option 1: Copy config to the expected location
-   mkdir -p ~/.config/leggen && cp config.toml ~/.config/leggen/config.toml
-   
-   # Option 2: Set environment variable to current config file
-   export LEGGEN_CONFIG_FILE=./config.toml
-   ```
-4. Start the API server:
-   ```bash
-   uv run leggen server
-   ```
-   - For development mode with auto-reload: `uv run leggen server --reload`
-   - API will be available at `http://localhost:8000` with docs at `http://localhost:8000/docs`
-
-### Start the Frontend
-1. Navigate to the frontend directory: `cd frontend`
-2. Install npm dependencies: `npm install`
-3. Start the development server: `npm run dev`
-   - Frontend will be available at `http://localhost:3000`
-   - The frontend is configured to connect to the API at `http://localhost:8000/api/v1`
-
 ## Build/Lint/Test Commands
 
 ### Frontend (React/TypeScript)
@@ -60,7 +10,7 @@ The command outputs instructions for setting the required environment variable t
 ### Backend (Python)
 - **Lint**: `uv run ruff check .`
 - **Format**: `uv run ruff format .`
-- **Type check**: `uv run mypy leggen --check-untyped-defs`
+- **Type check**: `uv run mypy leggen leggend --check-untyped-defs`
 - **All checks**: `uv run pre-commit run --all-files`
 - **Run all tests**: `uv run pytest`
 - **Run single test**: `uv run pytest tests/unit/test_api_accounts.py::TestAccountsAPI::test_get_all_accounts_success -v`
@@ -87,20 +37,6 @@ The command outputs instructions for setting the required environment variable t
 
 ### General
 - **Formatting**: ruff for Python, ESLint for TypeScript
-- **Commits**: Use conventional commits with optional scopes, run pre-commit hooks before pushing
-  - Format: `type(scope): Description starting with uppercase and ending with period.`
-  - Scopes: `cli`, `api`, `frontend` (optional)
-  - Types: `feat`, `fix`, `refactor` (avoid too many different types)
-  - Examples:
-    - `feat(frontend): Add support for S3 backups.`
-    - `fix(api): Resolve authentication timeout issues.`
-    - `refactor(cli): Improve error handling for missing config.`
+- **Commits**: Use conventional commits, run pre-commit hooks before pushing
   - Avoid including specific numbers, counts, or data-dependent information that may become outdated
 - **Security**: Never log sensitive data, use environment variables for secrets
-
-## 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`

CHANGELOG.md

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

CLAUDE.md

@@ -1 +0,0 @@
-AGENTS.md

Dockerfile

@@ -18,7 +18,7 @@ FROM python:3.13-alpine
 LABEL org.opencontainers.image.source="https://github.com/elisiariocouto/leggen"
 LABEL org.opencontainers.image.authors="Elisiário Couto <elisiario@couto.io>"
 LABEL org.opencontainers.image.licenses="MIT"
-LABEL org.opencontainers.image.title="Leggen API"
+LABEL org.opencontainers.image.title="Leggend API"
 LABEL org.opencontainers.image.description="Open Banking API for Leggen"
 LABEL org.opencontainers.image.url="https://github.com/elisiariocouto/leggen"
 
@@ -30,4 +30,4 @@ EXPOSE 8000
 
 HEALTHCHECK --interval=30s --timeout=5s --start-period=5s CMD wget -q --spider http://127.0.0.1:8000/api/v1/health || exit 1
 
-CMD ["/app/.venv/bin/leggen", "server"]
+CMD ["/app/.venv/bin/leggend"]

README.md

@@ -2,14 +2,14 @@
 
 An Open Banking CLI and API service for managing bank connections and transactions.
 
-This tool provides a **unified command-line interface** (`leggen`) with both CLI commands and an integrated **FastAPI backend service**, plus a **React Web Interface** to connect to banks using the GoCardless Open Banking API.
+This tool provides **FastAPI backend service** (`leggend`), a **React Web Interface** and a **command-line interface** (`leggen`) to connect to banks using the GoCardless Open Banking API.
 
 Having your bank data accessible through both CLI and REST API gives you the power to backup, analyze, create reports, and integrate with other applications.
 
 ## 🛠️ Technologies
 
   ### 🔌 API & Backend
-  - [FastAPI](https://fastapi.tiangolo.com/): High-performance async API backend (integrated into `leggen server`)
+  - [FastAPI](https://fastapi.tiangolo.com/): High-performance async API backend (`leggend` service)
   - [GoCardless Open Banking API](https://developer.gocardless.com/bank-account-data/overview): for connecting to banks
   - [APScheduler](https://apscheduler.readthedocs.io/): Background job scheduling with configurable cron
 
@@ -107,7 +107,7 @@ For development or local installation:
 uv sync  # or pip install -e .
 
 # Start the API service
-uv run leggen server --reload  # Development mode with auto-reload
+uv run leggend --reload  # Development mode with auto-reload
 
 # Use the CLI (in another terminal)
 uv run leggen --help
@@ -152,19 +152,19 @@ case-sensitive = ["SpecificStore"]
 
 ## 📖 Usage
 
-### API Service (`leggen server`)
+### API Service (`leggend`)
 
 Start the FastAPI backend service:
 
 ```bash
 # Production mode
-leggen server
+leggend
 
 # Development mode with auto-reload
-leggen server --reload
+leggend --reload
 
 # Custom host and port
-leggen server --host 127.0.0.1 --port 8080
+leggend --host 127.0.0.1 --port 8080
 ```
 
 **API Documentation**: Visit `http://localhost:8000/docs` for interactive API documentation.
@@ -207,7 +207,7 @@ leggen sync --force --wait
 leggen --api-url http://localhost:8080 status
 
 # Set via environment variable
-export LEGGEN_API_URL=http://localhost:8080
+export LEGGEND_API_URL=http://localhost:8080
 leggen status
 ```
 
@@ -223,7 +223,7 @@ docker compose -f compose.dev.yml ps
 
 # Check logs
 docker compose -f compose.dev.yml logs frontend
-docker compose -f compose.dev.yml logs leggen-server
+docker compose -f compose.dev.yml logs leggend
 
 # Stop development services
 docker compose -f compose.dev.yml down
@@ -239,7 +239,7 @@ docker compose ps
 
 # Check logs
 docker compose logs frontend
-docker compose logs leggen-server
+docker compose logs leggend
 
 # Access the web interface at http://localhost:3000
 # API documentation at http://localhost:8000/docs
@@ -290,7 +290,7 @@ cd leggen
 uv sync
 
 # Start API service with auto-reload
-uv run leggen server --reload
+uv run leggend --reload
 
 # Use CLI commands
 uv run leggen status
@@ -333,10 +333,13 @@ The test suite includes:
 leggen/              # CLI application
 ├── commands/        # CLI command implementations
 ├── utils/           # Shared utilities
-├── api/             # FastAPI API routes and models
+└── api_client.py    # API client for leggend service
+
+leggend/             # FastAPI backend service
+├── api/             # API routes and models
 ├── services/        # Business logic
 ├── background/      # Background job scheduler
-└── api_client.py    # API client for server communication
+└── main.py          # FastAPI application
 
 tests/               # Test suite
 ├── conftest.py      # Shared test fixtures

compose.dev.yml

@@ -8,13 +8,13 @@ services:
     ports:
       - "127.0.0.1:3000:80"
     environment:
-      - API_BACKEND_URL=${API_BACKEND_URL:-http://leggen-server:8000}
+      - API_BACKEND_URL=${API_BACKEND_URL:-http://leggend:8000}
     depends_on:
-      leggen-server:
+      leggend:
         condition: service_healthy
 
   # FastAPI backend service
-  leggen-server:
+  leggend:
     build:
       context: .
       dockerfile: Dockerfile

compose.yml

@@ -6,11 +6,11 @@ services:
     ports:
       - "127.0.0.1:3000:80"
     depends_on:
-      leggen-server:
+      leggend:
         condition: service_healthy
 
   # FastAPI backend service
-  leggen-server:
+  leggend:
     image: ghcr.io/elisiariocouto/leggen:latest
     restart: "unless-stopped"
     ports:

config.example.toml

@@ -20,8 +20,8 @@ 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

frontend/.gitignore

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

frontend/Dockerfile

@@ -25,7 +25,7 @@ COPY --from=builder /app/dist /usr/share/nginx/html
 COPY default.conf.template /etc/nginx/templates/default.conf.template
 
 # Set default API backend URL (can be overridden at runtime)
-ENV API_BACKEND_URL=http://leggen-server:8000
+ENV API_BACKEND_URL=http://leggend:8000
 
 # Expose port 80
 EXPOSE 80

frontend/README.md

@@ -93,7 +93,7 @@ The frontend supports configurable API URLs through environment variables:
 
 - Uses relative URLs (`/api/v1`) that nginx proxies to the backend
 - Configure nginx proxy target via `API_BACKEND_URL` environment variable
-- Default: `http://leggen-server:8000`
+- Default: `http://leggend:8000`
 
 **Docker Compose:**
 

frontend/components.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/index.css",
-    "baseColor": "slate",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "registries": {}
-}

frontend/eslint.config.js

@@ -6,7 +6,7 @@ import tseslint from "typescript-eslint";
 import { globalIgnores } from "eslint/config";
 
 export default tseslint.config([
-  globalIgnores(["dist", "dev-dist"]),
+  globalIgnores(["dist"]),
   {
     files: ["**/*.{ts,tsx}"],
     extends: [
@@ -19,17 +19,5 @@ 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,35 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" sizes="48x48" />
-    <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Leggen</title>
-
-    <!-- PWA Meta Tags -->
-    <meta name="description" content="Personal finance management application" />
-    <meta name="application-name" content="Leggen" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
-    <meta name="apple-mobile-web-app-title" content="Leggen" />
-    <meta name="format-detection" content="telephone=no" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="msapplication-config" content="/browserconfig.xml" />
-    <meta name="msapplication-TileColor" content="#0b74de" />
-    <meta name="msapplication-tap-highlight" content="no" />
-
-    <!-- Dynamic theme-color - will be updated by JavaScript -->
-    <meta name="theme-color" content="#0b74de" id="theme-color-meta" />
-    <meta name="msapplication-navbutton-color" content="#0b74de" id="ms-theme-color-meta" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="default" id="apple-status-bar-meta" />
-
-    <!-- Icons -->
-    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
-    <link rel="mask-icon" href="/favicon.svg" color="#0b74de" />
-    <link rel="shortcut icon" href="/favicon.ico" />
-
-    <!-- Manifest -->
-    <link rel="manifest" href="/manifest.webmanifest" />
   </head>
   <body>
     <div id="root"></div>

frontend/package.json

@@ -10,11 +10,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-progress": "^1.1.7",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-slot": "^1.2.3",
     "@tailwindcss/forms": "^0.5.10",
     "@tanstack/react-query": "^5.87.1",
     "@tanstack/react-router": "^1.131.36",
@@ -22,36 +17,25 @@
     "@tanstack/router-cli": "^1.131.36",
     "autoprefixer": "^10.4.21",
     "axios": "^1.11.0",
-    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
-    "date-fns": "^4.1.0",
     "lucide-react": "^0.542.0",
     "postcss": "^8.5.6",
     "react": "^19.1.1",
-    "react-day-picker": "^9.10.0",
     "react-dom": "^19.1.1",
-    "recharts": "^3.2.0",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^3.4.17",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss": "^3.4.17"
   },
   "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",
-    "sharp": "^0.34.3",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.2",
-    "vite-plugin-pwa": "^1.0.3"
+    "vite": "^7.1.2"
   }
 }

frontend/public/browserconfig.xml

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

frontend/public/favicon.svg

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

frontend/public/robots.txt

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

frontend/pwa-assets.config.json

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

frontend/src/App.tsx

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

@@ -13,47 +13,38 @@ import {
 } 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 LoadingSpinner from "./LoadingSpinner";
 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-amber-500",
-        tooltip: "Pending",
+        color: 'bg-yellow-500',
+        tooltip: 'Pending',
       };
-    case "error":
-    case "failed":
+    case 'error':
+    case 'failed':
       return {
-        color: "bg-destructive",
-        tooltip: "Error",
+        color: 'bg-red-500',
+        tooltip: 'Error',
       };
-    case "inactive":
+    case 'inactive':
       return {
-        color: "bg-muted-foreground",
-        tooltip: "Inactive",
+        color: 'bg-gray-500',
+        tooltip: 'Inactive',
       };
     default:
       return {
-        color: "bg-primary",
+        color: 'bg-blue-500',
         tooltip: status,
       };
   }
@@ -81,8 +72,8 @@ export default function AccountsOverview() {
   const queryClient = useQueryClient();
 
   const updateAccountMutation = useMutation({
-    mutationFn: ({ id, display_name }: { id: string; display_name: string }) =>
-      apiClient.updateAccount(id, { display_name }),
+    mutationFn: ({ id, name }: { id: string; name: string }) =>
+      apiClient.updateAccount(id, { name }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["accounts"] });
       setEditingAccountId(null);
@@ -95,15 +86,14 @@ export default function AccountsOverview() {
 
   const handleEditStart = (account: Account) => {
     setEditingAccountId(account.id);
-    // Use display_name if available, otherwise fall back to name
-    setEditingName(account.display_name || account.name || "");
+    setEditingName(account.name || "");
   };
 
   const handleEditSave = () => {
     if (editingAccountId && editingName.trim()) {
       updateAccountMutation.mutate({
         id: editingAccountId,
-        display_name: editingName.trim(),
+        name: editingName.trim(),
       });
     }
   };
@@ -114,25 +104,36 @@ export default function AccountsOverview() {
   };
 
   if (accountsLoading) {
-    return <AccountsSkeleton />;
+    return (
+      <div className="bg-white rounded-lg shadow">
+        <LoadingSpinner message="Loading accounts..." />
+      </div>
+    );
   }
 
   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>
+      <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>
     );
   }
 
@@ -150,231 +151,213 @@ export default function AccountsOverview() {
     <div className="space-y-6">
       {/* Summary Cards */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <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 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>
             </div>
-          </CardContent>
-        </Card>
+            <div className="p-3 bg-green-100 rounded-full">
+              <TrendingUp className="h-6 w-6 text-green-600" />
+            </div>
+          </div>
+        </div>
 
-        <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 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>
             </div>
-          </CardContent>
-        </Card>
+            <div className="p-3 bg-blue-100 rounded-full">
+              <CreditCard className="h-6 w-6 text-blue-600" />
+            </div>
+          </div>
+        </div>
 
-        <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 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>
             </div>
-          </CardContent>
-        </Card>
+            <div className="p-3 bg-purple-100 rounded-full">
+              <Building2 className="h-6 w-6 text-purple-600" />
+            </div>
+          </div>
+        </div>
       </div>
 
       {/* Accounts List */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Bank Accounts</CardTitle>
-          <CardDescription>Manage your connected bank accounts</CardDescription>
-        </CardHeader>
+      <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>
 
         {!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">
+          <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">
               No accounts found
             </h3>
-            <p className="text-muted-foreground">
+            <p className="text-gray-600">
               Connect your first bank account to get started with Leggen.
             </p>
-          </CardContent>
+          </div>
         ) : (
-          <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;
+          <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;
 
-                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>
+              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>
-
-                      {/* 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 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>
-                          <p className="text-xs sm:text-sm text-muted-foreground whitespace-nowrap">
-                            Updated{" "}
-                            {formatDate(
-                              account.last_accessed || account.created,
+                        ) : (
+                          <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>
                             )}
-                          </p>
-                        </div>
+                          </div>
+                        )}
+                      </div>
+                    </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-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>
                       </div>
                     </div>
                   </div>
-                );
-              })}
-            </div>
-          </CardContent>
+                </div>
+              );
+            })}
+          </div>
         )}
-      </Card>
+      </div>
     </div>
   );
 }

frontend/src/components/AccountsSkeleton.tsx

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

frontend/src/components/Dashboard.tsx

@@ -0,0 +1,197 @@
+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 TransactionsList from "./TransactionsList";
+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" && <TransactionsList />}
+            {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/ErrorBoundary.tsx

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

frontend/src/components/FiltersSkeleton.tsx

@@ -1,73 +0,0 @@
-import { Skeleton } from "./ui/skeleton";
-import { Card, CardContent } from "./ui/card";
-
-export default function FiltersSkeleton() {
-  return (
-    <Card>
-      <div className="px-6 py-4 border-b border-border">
-        <div className="flex items-center justify-between">
-          <Skeleton className="h-6 w-32" />
-          <div className="flex items-center space-x-2">
-            <Skeleton className="h-8 w-24" />
-            <Skeleton className="h-8 w-20" />
-          </div>
-        </div>
-      </div>
-
-      <CardContent className="px-6 py-4 border-b border-border bg-muted/30">
-        {/* Quick Date Filters Skeleton */}
-        <div className="mb-6">
-          <Skeleton className="h-4 w-32 mb-3" />
-          <div className="space-y-2">
-            <div className="flex flex-wrap gap-2">
-              <Skeleton className="h-10 w-24 rounded-lg" />
-              <Skeleton className="h-10 w-20 rounded-lg" />
-              <Skeleton className="h-10 w-28 rounded-lg" />
-            </div>
-            <div className="flex flex-wrap gap-2">
-              <Skeleton className="h-10 w-24 rounded-lg" />
-              <Skeleton className="h-10 w-20 rounded-lg" />
-            </div>
-          </div>
-        </div>
-
-        {/* Filter Fields Skeleton */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-          <div className="sm:col-span-2 lg:col-span-1">
-            <Skeleton className="h-4 w-16 mb-1" />
-            <Skeleton className="h-10 w-full" />
-          </div>
-          <div>
-            <Skeleton className="h-4 w-16 mb-1" />
-            <Skeleton className="h-10 w-full" />
-          </div>
-          <div>
-            <Skeleton className="h-4 w-20 mb-1" />
-            <Skeleton className="h-10 w-full" />
-          </div>
-          <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>
-            <Skeleton className="h-4 w-20 mb-1" />
-            <Skeleton className="h-10 w-full" />
-          </div>
-          <div>
-            <Skeleton className="h-4 w-20 mb-1" />
-            <Skeleton className="h-10 w-full" />
-          </div>
-        </div>
-      </CardContent>
-
-      {/* Results Summary Skeleton */}
-      <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

@@ -2,7 +2,6 @@ import { useLocation } from "@tanstack/react-router";
 import { Menu, Activity, Wifi, WifiOff } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 import { apiClient } from "../lib/api";
-import { ThemeToggle } from "./ui/theme-toggle";
 
 const navigation = [
   { name: "Overview", to: "/" },
@@ -32,41 +31,38 @@ export default function Header({ setSidebarOpen }: HeaderProps) {
   });
 
   return (
-    <header className="bg-card shadow-sm border-b border-border">
+    <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-muted-foreground hover:text-foreground"
+            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-card-foreground lg:ml-0 ml-4">
+          <h2 className="text-lg font-semibold text-gray-900 lg:ml-0 ml-4">
             {currentPage}
           </h2>
         </div>
-        <div className="flex items-center space-x-3">
+        <div className="flex items-center space-x-2">
           <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>
+                <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-destructive" />
-                <span className="text-sm text-destructive">Disconnected</span>
+                <WifiOff className="h-4 w-4 text-red-500" />
+                <span className="text-sm text-red-500">Disconnected</span>
               </>
             ) : (
               <>
                 <Wifi className="h-4 w-4 text-green-500" />
-                <span className="text-sm text-muted-foreground">Connected</span>
+                <span className="text-sm text-gray-600">Connected</span>
               </>
             )}
           </div>
-          <ThemeToggle />
         </div>
       </div>
     </header>

frontend/src/components/LoadingSpinner.tsx

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

frontend/src/components/Notifications.tsx

@@ -12,26 +12,7 @@ import {
   TestTube,
 } from "lucide-react";
 import { apiClient } from "../lib/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 LoadingSpinner from "./LoadingSpinner";
 import type { NotificationSettings, NotificationService } from "../types/api";
 
 export default function Notifications() {
@@ -81,32 +62,39 @@ export default function Notifications() {
   });
 
   if (settingsLoading || servicesLoading) {
-    return <NotificationsSkeleton />;
+    return (
+      <div className="bg-white rounded-lg shadow">
+        <LoadingSpinner message="Loading notifications..." />
+      </div>
+    );
   }
 
   if (settingsError || servicesError) {
     return (
-      <Alert variant="destructive">
-        <AlertCircle className="h-4 w-4" />
-        <AlertTitle>Failed to load notifications</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();
-            }}
-            variant="outline"
-            size="sm"
-          >
-            <RefreshCw className="h-4 w-4 mr-2" />
-            Retry
-          </Button>
-        </AlertDescription>
-      </Alert>
+      <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>
     );
   }
 
@@ -132,198 +120,201 @@ export default function Notifications() {
   return (
     <div className="space-y-6">
       {/* 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 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>
-              <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}
+        <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"
             >
-              <Send className="h-4 w-4 mr-2" />
-              {testMutation.isPending ? "Sending..." : "Send Test Notification"}
-            </Button>
+              <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>
-        </CardContent>
-      </Card>
+
+          <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 */}
-      <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>
+      <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 ? (
-          <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">
+          <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-muted-foreground">
+            <p className="text-gray-600">
               Configure notification services in your backend to receive alerts.
             </p>
-          </CardContent>
+          </div>
         ) : (
-          <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 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>
 
-                    <Button
+                  <div className="flex items-center space-x-2">
+                    <button
                       onClick={() => handleDeleteService(service.name)}
                       disabled={deleteServiceMutation.isPending}
-                      variant="ghost"
-                      size="sm"
-                      className="text-destructive hover:text-destructive hover:bg-destructive/10"
+                      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>
+                    </button>
                   </div>
                 </div>
-              ))}
-            </div>
-          </CardContent>
+              </div>
+            ))}
+          </div>
         )}
-      </Card>
+      </div>
 
       {/* 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 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 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 className="text-sm text-gray-600">
+              <p>
+                Configure notification settings through your backend API to
+                customize filters and service configurations.
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   );
 }

frontend/src/components/NotificationsSkeleton.tsx

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

frontend/src/components/PWAPrompts.tsx

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

frontend/src/components/RawTransactionModal.tsx

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

frontend/src/components/Sidebar.tsx

@@ -1,5 +1,6 @@
 import { Link, useLocation } from "@tanstack/react-router";
 import {
+  CreditCard,
   Home,
   List,
   BarChart3,
@@ -7,7 +8,6 @@ import {
   TrendingUp,
   X,
 } from "lucide-react";
-import { Logo } from "./ui/logo";
 import { useQuery } from "@tanstack/react-query";
 import { apiClient } from "../lib/api";
 import { formatCurrency } from "../lib/utils";
@@ -43,22 +43,22 @@ export default function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps) {
   return (
     <div
       className={cn(
-        "fixed inset-y-0 left-0 z-50 w-64 bg-card shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0",
+        "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-border">
+      <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"
         >
-          <Logo size={32} />
-          <h1 className="text-xl font-bold text-card-foreground">Leggen</h1>
+          <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-muted-foreground hover:text-foreground"
+          className="lg:hidden p-1 rounded-md text-gray-400 hover:text-gray-500"
         >
           <X className="h-6 w-6" />
         </button>
@@ -71,12 +71,11 @@ export default function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps) {
               key={item.to}
               to={item.to}
               onClick={() => setSidebarOpen(false)}
-              className={cn(
-                "flex items-center w-full px-3 py-2 text-sm font-medium rounded-md transition-colors",
+              className={`flex items-center w-full px-3 py-2 text-sm font-medium rounded-md transition-colors ${
                 location.pathname === item.to
-                  ? "bg-primary text-primary-foreground"
-                  : "text-card-foreground hover:text-card-foreground hover:bg-accent",
-              )}
+                  ? "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}
@@ -86,18 +85,18 @@ export default function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps) {
       </nav>
 
       {/* Account Summary in Sidebar */}
-      <div className="px-6 py-4 border-t border-border mt-auto">
-        <div className="bg-muted rounded-lg p-4">
+      <div className="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-muted-foreground">
+            <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-foreground mt-1">
+          <p className="text-2xl font-bold text-gray-900 mt-1">
             {formatCurrency(totalBalance)}
           </p>
-          <p className="text-sm text-muted-foreground mt-1">
+          <p className="text-sm text-gray-500 mt-1">
             {accounts?.length || 0} accounts
           </p>
         </div>

frontend/src/components/TransactionSkeleton.tsx

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

frontend/src/components/TransactionsList.tsx

@@ -0,0 +1,378 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import {
+  Filter,
+  Search,
+  TrendingUp,
+  TrendingDown,
+  Calendar,
+  RefreshCw,
+  AlertCircle,
+  X,
+  Eye,
+} from "lucide-react";
+import { apiClient } from "../lib/api";
+import { formatCurrency, formatDate } from "../lib/utils";
+import LoadingSpinner from "./LoadingSpinner";
+import RawTransactionModal from "./RawTransactionModal";
+import type { Account, Transaction, ApiResponse } from "../types/api";
+
+export default function TransactionsList() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedAccount, setSelectedAccount] = useState<string>("");
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+  const [showFilters, setShowFilters] = useState(false);
+  const [showRawModal, setShowRawModal] = useState(false);
+  const [selectedTransaction, setSelectedTransaction] =
+    useState<Transaction | null>(null);
+
+  const { data: accounts } = useQuery<Account[]>({
+    queryKey: ["accounts"],
+    queryFn: apiClient.getAccounts,
+  });
+
+  const {
+    data: transactionsResponse,
+    isLoading: transactionsLoading,
+    error: transactionsError,
+    refetch: refetchTransactions,
+  } = useQuery<ApiResponse<Transaction[]>>({
+    queryKey: ["transactions", selectedAccount, startDate, endDate],
+    queryFn: () =>
+      apiClient.getTransactions({
+        accountId: selectedAccount || undefined,
+        startDate: startDate || undefined,
+        endDate: endDate || undefined,
+        summaryOnly: false, // Always fetch raw transaction data
+      }),
+  });
+
+  const transactions = transactionsResponse?.data || [];
+
+  const filteredTransactions = (transactions || []).filter(
+    (transaction: Transaction) => {
+      // Additional validation (API client should have already filtered out invalid ones)
+      if (!transaction || !transaction.account_id) {
+        console.warn(
+          "Invalid transaction found after API filtering:",
+          transaction,
+        );
+        return false;
+      }
+
+      const description = transaction.description || "";
+      const creditorName = transaction.creditor_name || "";
+      const debtorName = transaction.debtor_name || "";
+      const reference = transaction.reference || "";
+
+      const matchesSearch =
+        searchTerm === "" ||
+        description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        creditorName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        debtorName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        reference.toLowerCase().includes(searchTerm.toLowerCase());
+
+      return matchesSearch;
+    },
+  );
+
+  const clearFilters = () => {
+    setSearchTerm("");
+    setSelectedAccount("");
+    setStartDate("");
+    setEndDate("");
+  };
+
+  const handleViewRaw = (transaction: Transaction) => {
+    setSelectedTransaction(transaction);
+    setShowRawModal(true);
+  };
+
+  const handleCloseModal = () => {
+    setShowRawModal(false);
+    setSelectedTransaction(null);
+  };
+
+  const hasActiveFilters =
+    searchTerm || selectedAccount || startDate || endDate;
+
+  if (transactionsLoading) {
+    return (
+      <div className="bg-white rounded-lg shadow">
+        <LoadingSpinner message="Loading transactions..." />
+      </div>
+    );
+  }
+
+  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>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Filters */}
+      <div className="bg-white rounded-lg shadow">
+        <div className="px-6 py-4 border-b border-gray-200">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-medium text-gray-900">Transactions</h3>
+            <div className="flex items-center space-x-2">
+              {hasActiveFilters && (
+                <button
+                  onClick={clearFilters}
+                  className="inline-flex items-center px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors"
+                >
+                  <X className="h-3 w-3 mr-1" />
+                  Clear filters
+                </button>
+              )}
+              <button
+                onClick={() => setShowFilters(!showFilters)}
+                className="inline-flex items-center px-3 py-2 bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200 transition-colors"
+              >
+                <Filter className="h-4 w-4 mr-2" />
+                Filters
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {showFilters && (
+          <div className="px-6 py-4 border-b border-gray-200 bg-gray-50">
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+              {/* Search */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Search
+                </label>
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                  <input
+                    type="text"
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    placeholder="Description, name, reference..."
+                    className="pl-10 pr-3 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+              </div>
+
+              {/* Account Filter */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Account
+                </label>
+                <select
+                  value={selectedAccount}
+                  onChange={(e) => setSelectedAccount(e.target.value)}
+                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                >
+                  <option value="">All accounts</option>
+                  {accounts?.map((account) => (
+                    <option key={account.id} value={account.id}>
+                      {account.name || "Unnamed Account"} (
+                      {account.institution_id})
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Start Date */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Start Date
+                </label>
+                <div className="relative">
+                  <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                  <input
+                    type="date"
+                    value={startDate}
+                    onChange={(e) => setStartDate(e.target.value)}
+                    className="pl-10 pr-3 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+              </div>
+
+              {/* End Date */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  End Date
+                </label>
+                <div className="relative">
+                  <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                  <input
+                    type="date"
+                    value={endDate}
+                    onChange={(e) => setEndDate(e.target.value)}
+                    className="pl-10 pr-3 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Results Summary */}
+        <div className="px-6 py-3 bg-gray-50 border-b border-gray-200">
+          <p className="text-sm text-gray-600">
+            Showing {filteredTransactions.length} transaction
+            {filteredTransactions.length !== 1 ? "s" : ""}
+            {selectedAccount && accounts && (
+              <span className="ml-1">
+                for {accounts.find((acc) => acc.id === selectedAccount)?.name}
+              </span>
+            )}
+          </p>
+        </div>
+      </div>
+
+      {/* Transactions List */}
+      {filteredTransactions.length === 0 ? (
+        <div className="bg-white rounded-lg shadow p-6 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>
+        </div>
+      ) : (
+        <div className="bg-white rounded-lg shadow divide-y divide-gray-200">
+          {filteredTransactions.map((transaction: Transaction) => {
+            const account = accounts?.find(
+              (acc) => acc.id === transaction.account_id,
+            );
+            const isPositive = transaction.transaction_value > 0;
+
+            return (
+              <div
+                key={`${transaction.account_id}-${transaction.transaction_id}`}
+                className="p-6 hover:bg-gray-50 transition-colors"
+              >
+                <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 ${
+                          isPositive ? "bg-green-100" : "bg-red-100"
+                        }`}
+                      >
+                        {isPositive ? (
+                          <TrendingUp className="h-4 w-4 text-green-600" />
+                        ) : (
+                          <TrendingDown className="h-4 w-4 text-red-600" />
+                        )}
+                      </div>
+
+                      <div className="flex-1">
+                        <h4 className="text-sm font-medium text-gray-900 mb-1">
+                          {transaction.description}
+                        </h4>
+
+                        <div className="text-xs text-gray-500 space-y-1">
+                          {account && (
+                            <p>
+                              {account.name || "Unnamed Account"} •{" "}
+                              {account.institution_id}
+                            </p>
+                          )}
+
+                          {(transaction.creditor_name ||
+                            transaction.debtor_name) && (
+                            <p>
+                              {isPositive ? "From: " : "To: "}
+                              {transaction.creditor_name ||
+                                transaction.debtor_name}
+                            </p>
+                          )}
+
+                          {transaction.reference && (
+                            <p>Ref: {transaction.reference}</p>
+                          )}
+
+                          {transaction.internal_transaction_id && (
+                            <p>ID: {transaction.internal_transaction_id}</p>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="text-right ml-4">
+                    <div className="flex items-center justify-end space-x-2 mb-2">
+                      <button
+                        onClick={() => handleViewRaw(transaction)}
+                        className="inline-flex items-center px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
+                        title="View raw transaction data"
+                      >
+                        <Eye className="h-3 w-3 mr-1" />
+                        Raw
+                      </button>
+                    </div>
+                    <p
+                      className={`text-lg font-semibold ${
+                        isPositive ? "text-green-600" : "text-red-600"
+                      }`}
+                    >
+                      {isPositive ? "+" : ""}
+                      {formatCurrency(
+                        transaction.transaction_value,
+                        transaction.transaction_currency,
+                      )}
+                    </p>
+                    <p className="text-sm text-gray-500">
+                      {transaction.transaction_date
+                        ? formatDate(transaction.transaction_date)
+                        : "No date"}
+                    </p>
+                    {transaction.booking_date &&
+                      transaction.booking_date !==
+                        transaction.transaction_date && (
+                        <p className="text-xs text-gray-400">
+                          Booked: {formatDate(transaction.booking_date)}
+                        </p>
+                      )}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Raw Transaction Modal */}
+      <RawTransactionModal
+        isOpen={showRawModal}
+        onClose={handleCloseModal}
+        rawTransaction={selectedTransaction?.raw_transaction}
+        transactionId={selectedTransaction?.transaction_id || "unknown"}
+      />
+    </div>
+  );
+}

frontend/src/components/TransactionsTable.tsx

@@ -13,37 +13,32 @@ import type {
   ColumnFiltersState,
 } from "@tanstack/react-table";
 import {
+  Filter,
+  Search,
   TrendingUp,
   TrendingDown,
+  Calendar,
   RefreshCw,
   AlertCircle,
+  X,
   Eye,
   ChevronUp,
   ChevronDown,
 } from "lucide-react";
 import { apiClient } from "../lib/api";
 import { formatCurrency, formatDate } from "../lib/utils";
-import TransactionSkeleton from "./TransactionSkeleton";
-import FiltersSkeleton from "./FiltersSkeleton";
+import LoadingSpinner from "./LoadingSpinner";
 import RawTransactionModal from "./RawTransactionModal";
-import { FilterBar, type FilterState } from "./filters";
-import { DataTablePagination } from "./ui/data-table-pagination";
-import { Card, CardContent } from "./ui/card";
-import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
-import { Button } from "./ui/button";
 import type { Account, Transaction, ApiResponse } from "../types/api";
 
 export default function TransactionsTable() {
-  // Filter state consolidated into a single object
-  const [filterState, setFilterState] = useState<FilterState>({
-    searchTerm: "",
-    selectedAccount: "",
-    startDate: "",
-    endDate: "",
-    minAmount: "",
-    maxAmount: "",
-  });
-
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedAccount, setSelectedAccount] = useState<string>("");
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+  const [minAmount, setMinAmount] = useState("");
+  const [maxAmount, setMaxAmount] = useState("");
+  const [showFilters, setShowFilters] = useState(false);
   const [showRawModal, setShowRawModal] = useState(false);
   const [selectedTransaction, setSelectedTransaction] =
     useState<Transaction | null>(null);
@@ -53,55 +48,33 @@ export default function TransactionsTable() {
   const [perPage, setPerPage] = useState(50);
 
   // Debounced search state
-  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(
-    filterState.searchTerm,
-  );
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(searchTerm);
 
   // Table state (remove pagination from table)
   const [sorting, setSorting] = useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
-  // Helper function to update filter state
-  const handleFilterChange = (key: keyof FilterState, value: string) => {
-    setFilterState((prev) => ({ ...prev, [key]: value }));
-  };
-
-  // Helper function to clear all filters
-  const handleClearFilters = () => {
-    setFilterState({
-      searchTerm: "",
-      selectedAccount: "",
-      startDate: "",
-      endDate: "",
-      minAmount: "",
-      maxAmount: "",
-    });
-    setColumnFilters([]);
-    setCurrentPage(1);
-  };
-
   // Debounce search term to prevent excessive API calls
   useEffect(() => {
     const timer = setTimeout(() => {
-      setDebouncedSearchTerm(filterState.searchTerm);
+      setDebouncedSearchTerm(searchTerm);
     }, 300); // 300ms delay
 
     return () => clearTimeout(timer);
-  }, [filterState.searchTerm]);
+  }, [searchTerm]);
 
   // Reset pagination when search term changes
   useEffect(() => {
-    if (debouncedSearchTerm !== filterState.searchTerm) {
+    if (debouncedSearchTerm !== searchTerm) {
       setCurrentPage(1);
     }
-  }, [debouncedSearchTerm, filterState.searchTerm]);
+  }, [debouncedSearchTerm, searchTerm]);
 
   const { data: accounts } = useQuery<Account[]>({
     queryKey: ["accounts"],
     queryFn: apiClient.getAccounts,
   });
 
-
   const {
     data: transactionsResponse,
     isLoading: transactionsLoading,
@@ -110,30 +83,22 @@ export default function TransactionsTable() {
   } = useQuery<ApiResponse<Transaction[]>>({
     queryKey: [
       "transactions",
-      filterState.selectedAccount,
-      filterState.startDate,
-      filterState.endDate,
+      selectedAccount,
+      startDate,
+      endDate,
       currentPage,
       perPage,
       debouncedSearchTerm,
-      filterState.minAmount,
-      filterState.maxAmount,
     ],
     queryFn: () =>
       apiClient.getTransactions({
-        accountId: filterState.selectedAccount || undefined,
-        startDate: filterState.startDate || undefined,
-        endDate: filterState.endDate || undefined,
+        accountId: selectedAccount || undefined,
+        startDate: startDate || undefined,
+        endDate: endDate || undefined,
         page: currentPage,
         perPage: perPage,
         search: debouncedSearchTerm || undefined,
         summaryOnly: false,
-        minAmount: filterState.minAmount
-          ? parseFloat(filterState.minAmount)
-          : undefined,
-        maxAmount: filterState.maxAmount
-          ? parseFloat(filterState.maxAmount)
-          : undefined,
       }),
   });
 
@@ -141,7 +106,7 @@ export default function TransactionsTable() {
   const pagination = transactionsResponse?.pagination;
 
   // Check if search is currently debouncing
-  const isSearchLoading = filterState.searchTerm !== debouncedSearchTerm;
+  const isSearchLoading = searchTerm !== debouncedSearchTerm;
 
   // Reset pagination when total becomes 0 (no results)
   useEffect(() => {
@@ -150,16 +115,46 @@ export default function TransactionsTable() {
     }
   }, [pagination, currentPage]);
 
-  // Reset pagination when filters change
+  const clearFilters = () => {
+    setSearchTerm("");
+    setSelectedAccount("");
+    setStartDate("");
+    setEndDate("");
+    setMinAmount("");
+    setMaxAmount("");
+    setColumnFilters([]);
+    setCurrentPage(1); // Reset to first page when clearing filters
+  };
+
+  const setQuickDateFilter = (days: number) => {
+    const endDate = new Date();
+    const startDate = new Date();
+    startDate.setDate(endDate.getDate() - days);
+
+    setStartDate(startDate.toISOString().split("T")[0]);
+    setEndDate(endDate.toISOString().split("T")[0]);
+    setCurrentPage(1); // Reset to first page when changing date filters
+  };
+
+  const setThisMonthFilter = () => {
+    const now = new Date();
+    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+    const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+
+    setStartDate(startOfMonth.toISOString().split("T")[0]);
+    setEndDate(endOfMonth.toISOString().split("T")[0]);
+    setCurrentPage(1); // Reset to first page when changing date filters
+  };
+
+  // Reset pagination when account filter changes
   useEffect(() => {
     setCurrentPage(1);
-  }, [
-    filterState.selectedAccount,
-    filterState.startDate,
-    filterState.endDate,
-    filterState.minAmount,
-    filterState.maxAmount,
-  ]);
+  }, [selectedAccount]);
+
+  // Reset pagination when date filters change
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [startDate, endDate]);
 
   const handleViewRaw = (transaction: Transaction) => {
     setSelectedTransaction(transaction);
@@ -172,13 +167,12 @@ export default function TransactionsTable() {
   };
 
   const hasActiveFilters =
-    filterState.searchTerm ||
-    filterState.selectedAccount ||
-    filterState.startDate ||
-    filterState.endDate ||
-    filterState.minAmount ||
-    filterState.maxAmount;
-
+    searchTerm ||
+    selectedAccount ||
+    startDate ||
+    endDate ||
+    minAmount ||
+    maxAmount;
 
   // Define columns
   const columns: ColumnDef<Transaction>[] = [
@@ -206,10 +200,10 @@ export default function TransactionsTable() {
               )}
             </div>
             <div className="flex-1 min-w-0">
-              <h4 className="text-sm font-medium text-foreground truncate">
+              <h4 className="text-sm font-medium text-gray-900 truncate">
                 {transaction.description}
               </h4>
-              <div className="text-xs text-muted-foreground space-y-1">
+              <div className="text-xs text-gray-500 space-y-1">
                 {account && (
                   <p className="truncate">
                     {account.name || "Unnamed Account"} •{" "}
@@ -261,13 +255,13 @@ export default function TransactionsTable() {
       cell: ({ row }) => {
         const transaction = row.original;
         return (
-          <div className="text-sm text-foreground">
+          <div className="text-sm text-gray-900">
             {transaction.transaction_date
               ? formatDate(transaction.transaction_date)
               : "No date"}
             {transaction.booking_date &&
               transaction.booking_date !== transaction.transaction_date && (
-                <p className="text-xs text-muted-foreground">
+                <p className="text-xs text-gray-400">
                   Booked: {formatDate(transaction.booking_date)}
                 </p>
               )}
@@ -284,7 +278,7 @@ export default function TransactionsTable() {
         return (
           <button
             onClick={() => handleViewRaw(transaction)}
-            className="inline-flex items-center px-2 py-1 text-xs bg-muted text-muted-foreground rounded hover:bg-accent transition-colors"
+            className="inline-flex items-center px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
             title="View raw transaction data"
           >
             <Eye className="h-3 w-3 mr-1" />
@@ -306,10 +300,9 @@ export default function TransactionsTable() {
     state: {
       sorting,
       columnFilters,
-      globalFilter: filterState.searchTerm,
+      globalFilter: searchTerm,
     },
-    onGlobalFilterChange: (value: string) =>
-      handleFilterChange("searchTerm", value),
+    onGlobalFilterChange: setSearchTerm,
     globalFilterFn: (row, _columnId, filterValue) => {
       // Custom global filter that searches multiple fields
       const transaction = row.original;
@@ -331,51 +324,204 @@ export default function TransactionsTable() {
 
   if (transactionsLoading) {
     return (
-      <div className="space-y-6">
-        <FiltersSkeleton />
-        <TransactionSkeleton rows={10} view="table" />
-        <div className="md:hidden">
-          <TransactionSkeleton rows={10} view="mobile" />
-        </div>
+      <div className="bg-white rounded-lg shadow">
+        <LoadingSpinner message="Loading transactions..." />
       </div>
     );
   }
 
   if (transactionsError) {
     return (
-      <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>
+      <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>
     );
   }
 
   return (
-    <div className="space-y-6 max-w-full">
-      {/* New FilterBar */}
-      <FilterBar
-        filterState={filterState}
-        onFilterChange={handleFilterChange}
-        onClearFilters={handleClearFilters}
-        accounts={accounts}
-        isSearchLoading={isSearchLoading}
-      />
+    <div className="space-y-6">
+      {/* Filters */}
+      <div className="bg-white rounded-lg shadow">
+        <div className="px-6 py-4 border-b border-gray-200">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-medium text-gray-900">Transactions</h3>
+            <div className="flex items-center space-x-2">
+              {hasActiveFilters && (
+                <button
+                  onClick={clearFilters}
+                  className="inline-flex items-center px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors"
+                >
+                  <X className="h-3 w-3 mr-1" />
+                  Clear filters
+                </button>
+              )}
+              <button
+                onClick={() => setShowFilters(!showFilters)}
+                className="inline-flex items-center px-3 py-2 bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200 transition-colors"
+              >
+                <Filter className="h-4 w-4 mr-2" />
+                Filters
+              </button>
+            </div>
+          </div>
+        </div>
 
-      {/* Results Summary */}
-      <Card>
-        <CardContent className="px-6 py-3 bg-muted/30 border-b border-border">
-          <p className="text-sm text-muted-foreground">
+        {showFilters && (
+          <div className="px-6 py-4 border-b border-gray-200 bg-gray-50">
+            {/* Quick Date Filters */}
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Quick Filters
+              </label>
+              <div className="flex flex-wrap gap-2">
+                <button
+                  onClick={() => setQuickDateFilter(7)}
+                  className="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded-full hover:bg-blue-200 transition-colors"
+                >
+                  Last 7 days
+                </button>
+                <button
+                  onClick={() => setQuickDateFilter(30)}
+                  className="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded-full hover:bg-blue-200 transition-colors"
+                >
+                  Last 30 days
+                </button>
+                <button
+                  onClick={setThisMonthFilter}
+                  className="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded-full hover:bg-blue-200 transition-colors"
+                >
+                  This month
+                </button>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+              {/* Search */}
+              <div className="sm:col-span-2 lg:col-span-1">
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Search
+                </label>
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                  <input
+                    type="text"
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    placeholder="Description, name, reference..."
+                    className="pl-10 pr-3 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  />
+                  {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>
+                  )}
+                </div>
+              </div>
+
+              {/* Account Filter */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Account
+                </label>
+                <select
+                  value={selectedAccount}
+                  onChange={(e) => setSelectedAccount(e.target.value)}
+                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                >
+                  <option value="">All accounts</option>
+                  {accounts?.map((account) => (
+                    <option key={account.id} value={account.id}>
+                      {account.name || "Unnamed Account"} ({account.institution_id})
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Start Date */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Start Date
+                </label>
+                <div className="relative">
+                  <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                  <input
+                    type="date"
+                    value={startDate}
+                    onChange={(e) => setStartDate(e.target.value)}
+                    className="pl-10 pr-3 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+              </div>
+
+              {/* End Date */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  End Date
+                </label>
+                <div className="relative">
+                  <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                  <input
+                    type="date"
+                    value={endDate}
+                    onChange={(e) => setEndDate(e.target.value)}
+                    className="pl-10 pr-3 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Amount Range Filters */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Min Amount
+                </label>
+                <input
+                  type="number"
+                  value={minAmount}
+                  onChange={(e) => setMinAmount(e.target.value)}
+                  placeholder="0.00"
+                  step="0.01"
+                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Max Amount
+                </label>
+                <input
+                  type="number"
+                  value={maxAmount}
+                  onChange={(e) => setMaxAmount(e.target.value)}
+                  placeholder="1000.00"
+                  step="0.01"
+                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                />
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Results Summary */}
+        <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 ? (
@@ -391,125 +537,120 @@ export default function TransactionsTable() {
               "loading..."
             )}
             )
-            {filterState.selectedAccount && accounts && (
+            {selectedAccount && accounts && (
               <span className="ml-1">
-                for{" "}
-                {
-                  accounts.find((acc) => acc.id === filterState.selectedAccount)
-                    ?.name
-                }
+                for {accounts.find((acc) => acc.id === selectedAccount)?.name}
               </span>
             )}
           </p>
-        </CardContent>
-      </Card>
+        </div>
+      </div>
 
       {/* Responsive Table/Cards */}
-      <Card>
+      <div className="bg-white rounded-lg shadow overflow-hidden">
         {/* Desktop Table View (hidden on mobile) */}
         <div className="hidden md:block">
-          <table className="min-w-full divide-y divide-border">
-            <thead className="bg-muted/50">
-              {table.getHeaderGroups().map((headerGroup) => (
-                <tr key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => (
-                    <th
-                      key={header.id}
-                      className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider cursor-pointer hover:bg-muted"
-                      onClick={header.column.getToggleSortingHandler()}
-                    >
-                      <div className="flex items-center space-x-1">
-                        <span>
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(
-                                header.column.columnDef.header,
-                                header.getContext(),
-                              )}
-                        </span>
-                        {header.column.getCanSort() && (
-                          <div className="flex flex-col">
-                            <ChevronUp
-                              className={`h-3 w-3 ${
-                                header.column.getIsSorted() === "asc"
-                                  ? "text-primary"
-                                  : "text-muted-foreground"
-                              }`}
-                            />
-                            <ChevronDown
-                              className={`h-3 w-3 -mt-1 ${
-                                header.column.getIsSorted() === "desc"
-                                  ? "text-primary"
-                                  : "text-muted-foreground"
-                              }`}
-                            />
-                          </div>
-                        )}
-                      </div>
-                    </th>
-                  ))}
-                </tr>
-              ))}
-            </thead>
-            <tbody className="bg-card divide-y divide-border">
-              {table.getRowModel().rows.length === 0 ? (
-                <tr>
-                  <td
-                    colSpan={columns.length}
-                    className="px-6 py-12 text-center"
-                  >
-                    <div className="text-muted-foreground mb-4">
-                      <TrendingUp className="h-12 w-12 mx-auto" />
-                    </div>
-                    <h3 className="text-lg font-medium text-foreground mb-2">
-                      No transactions found
-                    </h3>
-                    <p className="text-muted-foreground">
-                      {hasActiveFilters
-                        ? "Try adjusting your filters to see more results."
-                        : "No transactions are available for the selected criteria."}
-                    </p>
-                  </td>
-                </tr>
-              ) : (
-                table.getRowModel().rows.map((row) => (
-                  <tr key={row.id} className="hover:bg-muted/50">
-                    {row.getVisibleCells().map((cell) => (
-                      <td
-                        key={cell.id}
-                        className="px-6 py-4 whitespace-nowrap"
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-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()}
                       >
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
-                      </td>
+                        <div className="flex items-center space-x-1">
+                          <span>
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext(),
+                                )}
+                          </span>
+                          {header.column.getCanSort() && (
+                            <div className="flex flex-col">
+                              <ChevronUp
+                                className={`h-3 w-3 ${
+                                  header.column.getIsSorted() === "asc"
+                                    ? "text-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>
                     ))}
                   </tr>
-                ))
-              )}
-            </tbody>
-          </table>
+                ))}
+              </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>
         </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-muted-foreground mb-4">
+              <div className="text-gray-400 mb-4">
                 <TrendingUp className="h-12 w-12 mx-auto" />
               </div>
-              <h3 className="text-lg font-medium text-foreground mb-2">
+              <h3 className="text-lg font-medium text-gray-900 mb-2">
                 No transactions found
               </h3>
-              <p className="text-muted-foreground">
+              <p className="text-gray-600">
                 {hasActiveFilters
                   ? "Try adjusting your filters to see more results."
                   : "No transactions are available for the selected criteria."}
               </p>
             </div>
           ) : (
-            <div className="divide-y divide-border">
+            <div className="divide-y divide-gray-200">
               {table.getRowModel().rows.map((row) => {
                 const transaction = row.original;
                 const account = accounts?.find(
@@ -520,7 +661,7 @@ export default function TransactionsTable() {
                 return (
                   <div
                     key={row.id}
-                    className="p-4 hover:bg-muted/50 transition-colors"
+                    className="p-4 hover:bg-gray-50 transition-colors"
                   >
                     <div className="flex items-start justify-between">
                       <div className="flex-1 min-w-0">
@@ -537,39 +678,33 @@ export default function TransactionsTable() {
                             )}
                           </div>
                           <div className="flex-1 min-w-0">
-                            <h4 className="text-sm font-medium text-foreground break-words">
+                            <h4 className="text-sm font-medium text-gray-900 break-words">
                               {transaction.description}
                             </h4>
-                            <div className="text-xs text-muted-foreground space-y-1 mt-1">
+                            <div className="text-xs text-gray-500 space-y-1 mt-1">
                               {account && (
                                 <p className="break-words">
                                   {account.name || "Unnamed Account"} •{" "}
                                   {account.institution_id}
                                 </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-muted-foreground">
+                              <p className="text-gray-400">
                                 {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>
@@ -591,7 +726,7 @@ export default function TransactionsTable() {
                         </p>
                         <button
                           onClick={() => handleViewRaw(transaction)}
-                          className="inline-flex items-center px-2 py-1 text-xs bg-muted text-muted-foreground rounded hover:bg-accent transition-colors"
+                          className="inline-flex items-center px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
                           title="View raw transaction data"
                         >
                           <Eye className="h-3 w-3 mr-1" />
@@ -608,18 +743,141 @@ export default function TransactionsTable() {
 
         {/* Pagination */}
         {pagination && (
-          <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 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>
         )}
-      </Card>
+      </div>
 
       {/* Raw Transaction Modal */}
       <RawTransactionModal

frontend/src/components/analytics/BalanceChart.tsx

@@ -1,191 +0,0 @@
-import {
-  AreaChart,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  Legend,
-} from "recharts";
-import type { Balance, Account } from "../../types/api";
-
-interface BalanceChartProps {
-  data: Balance[];
-  accounts: Account[];
-  className?: string;
-}
-
-interface ChartDataPoint {
-  date: string;
-  balance: number;
-  account_id: string;
-}
-
-interface AggregatedDataPoint {
-  date: string;
-  [key: string]: string | number;
-}
-
-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>,
-  );
-
-  // 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",
-      // Add more mappings as needed
-    };
-    return bankMapping[institutionId] || institutionId.split("_")[0];
-  };
-
-  // Helper function to create display name for account
-  const getAccountDisplayName = (accountId: string): string => {
-    const account = accountMap[accountId];
-    if (account) {
-      const bankName = getBankName(account.institution_id);
-      const accountName = account.name || `Account ${accountId.split("-")[1]}`;
-      return `${bankName} - ${accountName}`;
-    }
-    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
-      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(),
-    );
-
-  // Group by account and aggregate
-  const accountBalances: { [key: string]: ChartDataPoint[] } = {};
-  chartData.forEach((item) => {
-    if (!accountBalances[item.account_id]) {
-      accountBalances[item.account_id] = [];
-    }
-    accountBalances[item.account_id].push(item);
-  });
-
-  // Create aggregated data points
-  const aggregatedData: { [key: string]: AggregatedDataPoint } = {};
-  Object.entries(accountBalances).forEach(([accountId, balances]) => {
-    balances.forEach((balance) => {
-      if (!aggregatedData[balance.date]) {
-        aggregatedData[balance.date] = { date: balance.date };
-      }
-      aggregatedData[balance.date][accountId] = balance.balance;
-    });
-  });
-
-  const finalData = Object.values(aggregatedData).sort(
-    (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-foreground mb-4">
-          Balance Progress
-        </h3>
-        <div className="h-80 flex items-center justify-center text-muted-foreground">
-          No balance data available
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={className}>
-      <h3 className="text-lg font-medium text-foreground mb-4">
-        Balance Progress Over Time
-      </h3>
-      <div className="h-80">
-        <ResponsiveContainer width="100%" height="100%">
-          <AreaChart data={finalData}>
-            <CartesianGrid strokeDasharray="3 3" />
-            <XAxis
-              dataKey="date"
-              tick={{ fontSize: 12 }}
-              tickFormatter={(value) => {
-                // Convert DD/MM/YYYY back to a proper date for formatting
-                const [day, month, year] = value.split("/");
-                const date = new Date(year, month - 1, day);
-                return date.toLocaleDateString("en-GB", {
-                  month: "short",
-                  day: "numeric",
-                });
-              }}
-            />
-            <YAxis
-              tick={{ fontSize: 12 }}
-              tickFormatter={(value) => `€${value.toLocaleString()}`}
-            />
-            <Tooltip content={<CustomTooltip />} />
-            <Legend />
-            {Object.keys(accountBalances).map((accountId, index) => (
-              <Area
-                key={accountId}
-                type="monotone"
-                dataKey={accountId}
-                stackId="1"
-                fill={colors[index % colors.length]}
-                stroke={colors[index % colors.length]}
-                name={getAccountDisplayName(accountId)}
-              />
-            ))}
-          </AreaChart>
-        </ResponsiveContainer>
-      </div>
-    </div>
-  );
-}

frontend/src/components/analytics/MonthlyTrends.tsx

@@ -1,142 +0,0 @@
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-} from "recharts";
-import { useQuery } from "@tanstack/react-query";
-import apiClient from "../../lib/api";
-
-interface MonthlyTrendsProps {
-  className?: string;
-  days?: number;
-}
-
-interface TooltipProps {
-  active?: boolean;
-  payload?: Array<{
-    name: string;
-    value: number;
-    color: string;
-  }>;
-  label?: string;
-}
-
-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],
-    queryFn: async () => {
-      return await apiClient.getMonthlyTransactionStats(days);
-    },
-  });
-
-  // Calculate number of months to display based on days filter
-  const getMonthsToDisplay = (days: number): number => {
-    if (days <= 30) return 1;
-    if (days <= 180) return 6;
-    if (days <= 365) return 12;
-    return Math.ceil(days / 30);
-  };
-
-  const monthsToDisplay = getMonthsToDisplay(days);
-  const displayData = monthlyData ? monthlyData.slice(-monthsToDisplay) : [];
-
-  if (isLoading) {
-    return (
-      <div className={className}>
-        <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-primary"></div>
-        </div>
-      </div>
-    );
-  }
-
-  if (displayData.length === 0) {
-    return (
-      <div className={className}>
-        <h3 className="text-lg font-medium text-foreground mb-4">
-          Monthly Spending Trends
-        </h3>
-        <div className="h-80 flex items-center justify-center text-muted-foreground">
-          No transaction data available
-        </div>
-      </div>
-    );
-  }
-
-  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">{label}</p>
-          {payload.map((entry, index) => (
-            <p key={index} style={{ color: entry.color }}>
-              {entry.name}: €{Math.abs(entry.value).toLocaleString()}
-            </p>
-          ))}
-        </div>
-      );
-    }
-    return null;
-  };
-
-  // Generate dynamic title based on time period
-  const getTitle = (days: number): string => {
-    if (days <= 30) return "Monthly Spending Trends (Last 30 Days)";
-    if (days <= 180) return "Monthly Spending Trends (Last 6 Months)";
-    if (days <= 365) return "Monthly Spending Trends (Last 12 Months)";
-    return `Monthly Spending Trends (Last ${Math.ceil(days / 30)} Months)`;
-  };
-
-  return (
-    <div className={className}>
-      <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 }}
-          >
-            <CartesianGrid strokeDasharray="3 3" />
-            <XAxis
-              dataKey="month"
-              tick={{ fontSize: 12 }}
-              angle={-45}
-              textAnchor="end"
-              height={60}
-            />
-            <YAxis
-              tick={{ fontSize: 12 }}
-              tickFormatter={(value) => `€${value.toLocaleString()}`}
-            />
-            <Tooltip content={<CustomTooltip />} />
-            <Bar dataKey="income" fill="#10B981" name="Income" />
-            <Bar dataKey="expenses" fill="#EF4444" name="Expenses" />
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
-      <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>
-        </div>
-        <div className="flex items-center">
-          <div className="w-3 h-3 bg-red-500 rounded mr-2" />
-          <span>Expenses</span>
-        </div>
-      </div>
-    </div>
-  );
-}

frontend/src/components/analytics/StatCard.tsx

@@ -1,82 +0,0 @@
-import type { LucideIcon } from "lucide-react";
-import { Card, CardContent } from "../ui/card";
-import { cn } from "../../lib/utils";
-
-interface StatCardProps {
-  title: string;
-  value: string | number;
-  subtitle?: string;
-  icon: LucideIcon;
-  trend?: {
-    value: number;
-    isPositive: boolean;
-  };
-  className?: string;
-  iconColor?: "green" | "blue" | "red" | "purple" | "orange" | "default";
-}
-
-export default function StatCard({
-  title,
-  value,
-  subtitle,
-  icon: Icon,
-  trend,
-  className,
-  iconColor = "default",
-}: StatCardProps) {
-  return (
-    <Card className={cn(className)}>
-      <CardContent className="p-6">
-        <div className="flex items-center justify-between">
-          <div>
-            <p className="text-sm font-medium text-muted-foreground">
-              {title}
-            </p>
-            <div className="flex items-baseline">
-              <p className="text-2xl font-bold text-foreground">
-                {value}
-              </p>
-              {trend && (
-                <div
-                  className={cn(
-                    "ml-2 flex items-baseline text-sm font-semibold",
-                    trend.isPositive
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400",
-                  )}
-                >
-                  {trend.isPositive ? "+" : ""}
-                  {trend.value}%
-                </div>
-              )}
-            </div>
-            {subtitle && (
-              <p className="text-sm text-muted-foreground mt-1">
-                {subtitle}
-              </p>
-            )}
-          </div>
-          <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>
-      </CardContent>
-    </Card>
-  );
-}

frontend/src/components/analytics/TimePeriodFilter.tsx

@@ -1,39 +0,0 @@
-import { Calendar } from "lucide-react";
-import { Button } from "../ui/button";
-import type { TimePeriod } from "../../lib/timePeriods";
-import { TIME_PERIODS } from "../../lib/timePeriods";
-
-interface TimePeriodFilterProps {
-  selectedPeriod: TimePeriod;
-  onPeriodChange: (period: TimePeriod) => void;
-  className?: string;
-}
-
-export default function TimePeriodFilter({
-  selectedPeriod,
-  onPeriodChange,
-  className = "",
-}: TimePeriodFilterProps) {
-  return (
-    <div className={`flex items-center gap-4 ${className}`}>
-      <div className="flex items-center gap-2 text-foreground">
-        <Calendar size={20} />
-        <span className="font-medium">Time Period:</span>
-      </div>
-      <div className="flex gap-2">
-        {TIME_PERIODS.map((period) => (
-          <Button
-            key={period.value}
-            onClick={() => onPeriodChange(period)}
-            variant={
-              selectedPeriod.value === period.value ? "default" : "outline"
-            }
-            size="sm"
-          >
-            {period.label}
-          </Button>
-        ))}
-      </div>
-    </div>
-  );
-}

frontend/src/components/analytics/TransactionDistribution.tsx

@@ -1,148 +0,0 @@
-import {
-  PieChart,
-  Pie,
-  Cell,
-  ResponsiveContainer,
-  Tooltip,
-  Legend,
-} from "recharts";
-import type { Account } from "../../types/api";
-
-interface TransactionDistributionProps {
-  accounts: Account[];
-  className?: string;
-}
-
-interface PieDataPoint {
-  name: string;
-  value: number;
-  color: string;
-  [key: string]: string | number;
-}
-
-interface TooltipProps {
-  active?: boolean;
-  payload?: Array<{
-    payload: PieDataPoint;
-  }>;
-}
-
-export default function TransactionDistribution({
-  accounts,
-  className,
-}: TransactionDistributionProps) {
-  // 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",
-      // TODO: Add more bank mappings as needed
-    };
-    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]}`;
-    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,
-      color: colors[index % colors.length],
-    };
-  });
-
-  const totalBalance = pieData.reduce((sum, item) => sum + item.value, 0);
-
-  if (pieData.length === 0 || totalBalance === 0) {
-    return (
-      <div className={className}>
-        <h3 className="text-lg font-medium text-foreground mb-4">
-          Account Distribution
-        </h3>
-        <div className="h-80 flex items-center justify-center text-muted-foreground">
-          No account data available
-        </div>
-      </div>
-    );
-  }
-
-  const CustomTooltip = ({ active, payload }: TooltipProps) => {
-    if (active && payload && payload.length) {
-      const data = payload[0].payload;
-      const percentage = ((data.value / totalBalance) * 100).toFixed(1);
-      return (
-        <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-muted-foreground">{percentage}% of total</p>
-        </div>
-      );
-    }
-    return null;
-  };
-
-  return (
-    <div className={className}>
-      <h3 className="text-lg font-medium text-foreground mb-4">
-        Account Balance Distribution
-      </h3>
-      <div className="h-80">
-        <ResponsiveContainer width="100%" height="100%">
-          <PieChart>
-            <Pie
-              data={pieData}
-              cx="50%"
-              cy="50%"
-              outerRadius={100}
-              innerRadius={40}
-              paddingAngle={2}
-              dataKey="value"
-            >
-              {pieData.map((entry, index) => (
-                <Cell key={`cell-${index}`} fill={entry.color} />
-              ))}
-            </Pie>
-            <Tooltip content={<CustomTooltip />} />
-            <Legend
-              formatter={(value, entry: { color?: string }) => (
-                <span style={{ color: entry.color }}>{value}</span>
-              )}
-            />
-          </PieChart>
-        </ResponsiveContainer>
-      </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 className="flex items-center">
-              <div
-                className="w-3 h-3 rounded-full mr-2"
-                style={{ backgroundColor: item.color }}
-              />
-              <span className="text-foreground">{item.name}</span>
-            </div>
-            <span className="font-medium text-foreground">
-              €{item.value.toLocaleString()}
-            </span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

frontend/src/components/filters/AccountCombobox.tsx

@@ -1,127 +0,0 @@
-import { useState } from "react";
-import { Check, ChevronDown, Building2 } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import type { Account } from "../../types/api";
-
-export interface AccountComboboxProps {
-  accounts?: Account[];
-  selectedAccount: string;
-  onAccountChange: (accountId: string) => void;
-  className?: string;
-}
-
-export function AccountCombobox({
-  accounts = [],
-  selectedAccount,
-  onAccountChange,
-  className,
-}: AccountComboboxProps) {
-  const [open, setOpen] = useState(false);
-
-  const selectedAccountData = accounts.find(
-    (account) => account.id === selectedAccount,
-  );
-
-  const formatAccountName = (account: Account) => {
-    const displayName =
-      account.display_name || account.name || "Unnamed Account";
-    return `${displayName} (${account.institution_id})`;
-  };
-
-  return (
-    <div className={className}>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            role="combobox"
-            aria-expanded={open}
-            className="justify-between"
-          >
-            <div className="flex items-center">
-              <Building2 className="mr-2 h-4 w-4" />
-              {selectedAccountData
-                ? formatAccountName(selectedAccountData)
-                : "All accounts"}
-            </div>
-            <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-[300px] p-0">
-          <Command>
-            <CommandInput placeholder="Search accounts..." className="h-9" />
-            <CommandList>
-              <CommandEmpty>No accounts found.</CommandEmpty>
-              <CommandGroup>
-                {/* All accounts option */}
-                <CommandItem
-                  value="all-accounts"
-                  onSelect={() => {
-                    onAccountChange("");
-                    setOpen(false);
-                  }}
-                >
-                  <Check
-                    className={cn(
-                      "mr-2 h-4 w-4",
-                      selectedAccount === "" ? "opacity-100" : "opacity-0",
-                    )}
-                  />
-                  <Building2 className="mr-2 h-4 w-4 text-gray-400" />
-                  All accounts
-                </CommandItem>
-
-                {/* Individual accounts */}
-                {accounts.map((account) => (
-                  <CommandItem
-                    key={account.id}
-                    value={`${account.display_name || account.name} ${account.institution_id}`}
-                    onSelect={() => {
-                      onAccountChange(account.id);
-                      setOpen(false);
-                    }}
-                  >
-                    <Check
-                      className={cn(
-                        "mr-2 h-4 w-4",
-                        selectedAccount === account.id
-                          ? "opacity-100"
-                          : "opacity-0",
-                      )}
-                    />
-                    <div className="flex flex-col">
-                      <span className="font-medium">
-                        {account.display_name ||
-                          account.name ||
-                          "Unnamed Account"}
-                      </span>
-                      <span className="text-xs text-gray-500">
-                        {account.institution_id}
-                        {account.iban && ` • ${account.iban.slice(-4)}`}
-                      </span>
-                    </div>
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-}

frontend/src/components/filters/ActiveFilterChips.tsx

@@ -1,140 +0,0 @@
-import { X } from "lucide-react";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { formatDate } from "@/lib/utils";
-import type { FilterState } from "./FilterBar";
-import type { Account } from "../../types/api";
-
-export interface ActiveFilterChipsProps {
-  filterState: FilterState;
-  onFilterChange: (key: keyof FilterState, value: string) => void;
-  accounts?: Account[];
-}
-
-export function ActiveFilterChips({
-  filterState,
-  onFilterChange,
-  accounts = [],
-}: ActiveFilterChipsProps) {
-  const chips: Array<{
-    key: keyof FilterState;
-    label: string;
-    value: string;
-  }> = [];
-
-  // Search term chip
-  if (filterState.searchTerm) {
-    chips.push({
-      key: "searchTerm",
-      label: `Search: "${filterState.searchTerm}"`,
-      value: filterState.searchTerm,
-    });
-  }
-
-  // Account chip
-  if (filterState.selectedAccount) {
-    const account = accounts.find(
-      (acc) => acc.id === filterState.selectedAccount,
-    );
-    const accountName = account
-      ? `${account.name || "Unnamed Account"} (${account.institution_id})`
-      : "Unknown Account";
-    chips.push({
-      key: "selectedAccount",
-      label: accountName,
-      value: filterState.selectedAccount,
-    });
-  }
-
-  // Date range chip
-  if (filterState.startDate || filterState.endDate) {
-    let dateLabel = "Date: ";
-    if (filterState.startDate && filterState.endDate) {
-      if (filterState.startDate === filterState.endDate) {
-        dateLabel += formatDate(filterState.startDate);
-      } else {
-        dateLabel += `${formatDate(filterState.startDate)} - ${formatDate(filterState.endDate)}`;
-      }
-    } else if (filterState.startDate) {
-      dateLabel += `From ${formatDate(filterState.startDate)}`;
-    } else if (filterState.endDate) {
-      dateLabel += `Until ${formatDate(filterState.endDate)}`;
-    }
-
-    chips.push({
-      key: "startDate", // We'll clear both start and end date when removing this chip
-      label: dateLabel,
-      value: `${filterState.startDate}-${filterState.endDate}`,
-    });
-  }
-
-  // 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":
-        // Clear both start and end date
-        onFilterChange("startDate", "");
-        onFilterChange("endDate", "");
-        break;
-      case "minAmount":
-        // Clear both min and max amount
-        onFilterChange("minAmount", "");
-        onFilterChange("maxAmount", "");
-        break;
-      default:
-        onFilterChange(key, "");
-    }
-  };
-
-  if (chips.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="flex flex-wrap items-center gap-2">
-      <span className="text-sm text-gray-600 font-medium">Active filters:</span>
-      {chips.map((chip) => (
-        <Badge
-          key={`${chip.key}-${chip.value}`}
-          variant="secondary"
-          className="pl-3 pr-1 py-1 bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100"
-        >
-          <span className="mr-1 text-xs">{chip.label}</span>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-4 w-4 p-0 hover:bg-blue-200/50"
-            onClick={() => handleRemoveChip(chip.key)}
-          >
-            <X className="h-3 w-3" />
-            <span className="sr-only">Remove {chip.label} filter</span>
-          </Button>
-        </Badge>
-      ))}
-    </div>
-  );
-}

frontend/src/components/filters/AdvancedFiltersPopover.tsx

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

@@ -1,213 +0,0 @@
-import { useState } from "react";
-import { format } from "date-fns";
-import { Calendar as CalendarIcon, ChevronDown } from "lucide-react";
-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";
-
-export interface DateRangePickerProps {
-  startDate: string;
-  endDate: string;
-  onDateRangeChange: (startDate: string, endDate: string) => void;
-  className?: string;
-}
-
-interface DatePreset {
-  label: string;
-  getValue: () => { startDate: string; endDate: string };
-}
-
-const datePresets: DatePreset[] = [
-  {
-    label: "Last 7 days",
-    getValue: () => {
-      const endDate = new Date();
-      const startDate = new Date();
-      startDate.setDate(endDate.getDate() - 7);
-      return {
-        startDate: startDate.toISOString().split("T")[0],
-        endDate: endDate.toISOString().split("T")[0],
-      };
-    },
-  },
-  {
-    label: "This week",
-    getValue: () => {
-      const now = new Date();
-      const dayOfWeek = now.getDay();
-      const startOfWeek = new Date(now);
-      startOfWeek.setDate(
-        now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1),
-      ); // Monday as start
-
-      const endOfWeek = new Date(startOfWeek);
-      endOfWeek.setDate(startOfWeek.getDate() + 6);
-
-      return {
-        startDate: startOfWeek.toISOString().split("T")[0],
-        endDate: endOfWeek.toISOString().split("T")[0],
-      };
-    },
-  },
-  {
-    label: "Last 30 days",
-    getValue: () => {
-      const endDate = new Date();
-      const startDate = new Date();
-      startDate.setDate(endDate.getDate() - 30);
-      return {
-        startDate: startDate.toISOString().split("T")[0],
-        endDate: endDate.toISOString().split("T")[0],
-      };
-    },
-  },
-  {
-    label: "This month",
-    getValue: () => {
-      const now = new Date();
-      const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
-      const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
-
-      return {
-        startDate: startOfMonth.toISOString().split("T")[0],
-        endDate: endOfMonth.toISOString().split("T")[0],
-      };
-    },
-  },
-  {
-    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({
-  startDate,
-  endDate,
-  onDateRangeChange,
-  className,
-}: DateRangePickerProps) {
-  const [open, setOpen] = useState(false);
-
-  // Convert string dates to Date objects for the calendar
-  const dateRange: DateRange | undefined =
-    startDate && endDate
-      ? {
-          from: new Date(startDate),
-          to: new Date(endDate),
-        }
-      : undefined;
-
-  const handleDateRangeSelect = (range: DateRange | undefined) => {
-    if (range?.from && range?.to) {
-      onDateRangeChange(
-        range.from.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],
-      );
-    }
-  };
-
-  const handlePresetClick = (preset: DatePreset) => {
-    const { startDate: presetStart, endDate: presetEnd } = preset.getValue();
-    onDateRangeChange(presetStart, presetEnd);
-    setOpen(false);
-  };
-
-  const formatDateRange = () => {
-    if (!startDate || !endDate) {
-      return "Select date range";
-    }
-
-    const start = new Date(startDate);
-    const end = new Date(endDate);
-
-    // Check if it matches a preset
-    const matchingPreset = datePresets.find((preset) => {
-      const { startDate: presetStart, endDate: presetEnd } = preset.getValue();
-      return presetStart === startDate && presetEnd === endDate;
-    });
-
-    if (matchingPreset) {
-      return matchingPreset.label;
-    }
-
-    // Format custom range
-    if (startDate === endDate) {
-      return format(start, "MMM d, yyyy");
-    }
-
-    return `${format(start, "MMM d")} - ${format(end, "MMM d, yyyy")}`;
-  };
-
-  return (
-    <div className={cn("grid gap-2", className)}>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            className={cn(
-              "justify-between text-left font-normal",
-              !dateRange && "text-muted-foreground",
-            )}
-          >
-            <div className="flex items-center">
-              <CalendarIcon className="mr-2 h-4 w-4" />
-              {formatDateRange()}
-            </div>
-            <ChevronDown className="h-4 w-4 opacity-50" />
-          </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>
-              {datePresets.map((preset) => (
-                <Button
-                  key={preset.label}
-                  variant="ghost"
-                  size="sm"
-                  className="w-full justify-start text-sm"
-                  onClick={() => handlePresetClick(preset)}
-                >
-                  {preset.label}
-                </Button>
-              ))}
-            </div>
-            {/* Calendar */}
-            <Calendar
-              initialFocus
-              mode="range"
-              defaultMonth={dateRange?.from}
-              selected={dateRange}
-              onSelect={handleDateRangeSelect}
-              numberOfMonths={2}
-            />
-          </div>
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-}

frontend/src/components/filters/FilterBar.tsx

@@ -1,129 +0,0 @@
-import { Search, X } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/utils";
-import { DateRangePicker } from "./DateRangePicker";
-import { AccountCombobox } from "./AccountCombobox";
-import { ActiveFilterChips } from "./ActiveFilterChips";
-import { AdvancedFiltersPopover } from "./AdvancedFiltersPopover";
-import type { Account } from "../../types/api";
-
-export interface FilterState {
-  searchTerm: string;
-  selectedAccount: string;
-  startDate: string;
-  endDate: string;
-  minAmount: string;
-  maxAmount: string;
-}
-
-export interface FilterBarProps {
-  filterState: FilterState;
-  onFilterChange: (key: keyof FilterState, value: string) => void;
-  onClearFilters: () => void;
-  accounts?: Account[];
-  isSearchLoading?: boolean;
-  className?: string;
-}
-
-export function FilterBar({
-  filterState,
-  onFilterChange,
-  onClearFilters,
-  accounts,
-  isSearchLoading = false,
-  className,
-}: FilterBarProps) {
-  const hasActiveFilters =
-    filterState.searchTerm ||
-    filterState.selectedAccount ||
-    filterState.startDate ||
-    filterState.endDate ||
-    filterState.minAmount ||
-    filterState.maxAmount;
-
-  const handleDateRangeChange = (startDate: string, endDate: string) => {
-    onFilterChange("startDate", startDate);
-    onFilterChange("endDate", endDate);
-  };
-
-  return (
-    <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-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-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-[200px]"
-          />
-
-          {/* Date Range Picker */}
-          <DateRangePicker
-            startDate={filterState.startDate}
-            endDate={filterState.endDate}
-            onDateRangeChange={handleDateRangeChange}
-            className="w-[240px]"
-          />
-
-          {/* Advanced Filters Button */}
-          <AdvancedFiltersPopover
-            minAmount={filterState.minAmount}
-            maxAmount={filterState.maxAmount}
-            onMinAmountChange={(value) => onFilterChange("minAmount", value)}
-            onMaxAmountChange={(value) => onFilterChange("maxAmount", value)}
-          />
-
-          {/* Clear Filters Button */}
-          {hasActiveFilters && (
-            <Button
-              onClick={onClearFilters}
-              variant="outline"
-              size="sm"
-              className="text-muted-foreground"
-            >
-              <X className="h-4 w-4 mr-1" />
-              Clear All
-            </Button>
-          )}
-        </div>
-
-        {/* Active Filter Chips */}
-        {hasActiveFilters && (
-          <ActiveFilterChips
-            filterState={filterState}
-            onFilterChange={onFilterChange}
-            accounts={accounts}
-          />
-        )}
-      </div>
-    </div>
-  );
-}

frontend/src/components/filters/index.ts

@@ -1,6 +0,0 @@
-export { FilterBar } from "./FilterBar";
-export { DateRangePicker } from "./DateRangePicker";
-export { AccountCombobox } from "./AccountCombobox";
-export { ActiveFilterChips } from "./ActiveFilterChips";
-export { AdvancedFiltersPopover } from "./AdvancedFiltersPopover";
-export type { FilterState, FilterBarProps } from "./FilterBar";

frontend/src/components/ui/alert.tsx

@@ -1,59 +0,0 @@
-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,36 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-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",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
-}
-
-export { Badge, badgeVariants };

frontend/src/components/ui/button.tsx

@@ -1,57 +0,0 @@
-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";
-
-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",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };

frontend/src/components/ui/calendar.tsx

@@ -1,211 +0,0 @@
-import * as React from "react";
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react";
-import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
-
-import { cn } from "@/lib/utils";
-import { Button, buttonVariants } from "@/components/ui/button";
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
-  formatters,
-  components,
-  ...props
-}: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
-}) {
-  const defaultClassNames = getDefaultClassNames();
-
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn(
-        "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,
-      )}
-      captionLayout={captionLayout}
-      formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString("default", { month: "short" }),
-        ...formatters,
-      }}
-      classNames={{
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "relative flex flex-col gap-4 md:flex-row",
-          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,
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
-          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,
-        ),
-        month_caption: cn(
-          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
-          defaultClassNames.month_caption,
-        ),
-        dropdowns: cn(
-          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
-          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,
-        ),
-        dropdown: cn(
-          "bg-popover absolute inset-0 opacity-0",
-          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,
-        ),
-        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,
-        ),
-        week: cn("mt-2 flex w-full", defaultClassNames.week),
-        week_number_header: cn(
-          "w-[--cell-size] select-none",
-          defaultClassNames.week_number_header,
-        ),
-        week_number: cn(
-          "text-muted-foreground select-none text-[0.8rem]",
-          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,
-        ),
-        range_start: cn(
-          "bg-accent rounded-l-md",
-          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,
-        ),
-        outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside,
-        ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled,
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames,
-      }}
-      components={{
-        Root: ({ className, rootRef, ...props }) => {
-          return (
-            <div
-              data-slot="calendar"
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          );
-        },
-        Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === "left") {
-            return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            );
-          }
-
-          if (orientation === "right") {
-            return (
-              <ChevronRightIcon
-                className={cn("size-4", className)}
-                {...props}
-              />
-            );
-          }
-
-          return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          );
-        },
-        DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              <div className="flex size-[--cell-size] items-center justify-center text-center">
-                {children}
-              </div>
-            </td>
-          );
-        },
-        ...components,
-      }}
-      {...props}
-    />
-  );
-}
-
-function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  ...props
-}: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames();
-
-  const ref = React.useRef<HTMLButtonElement>(null);
-  React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus();
-  }, [modifiers.focused]);
-
-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="icon"
-      data-day={day.date.toLocaleDateString()}
-      data-selected-single={
-        modifiers.selected &&
-        !modifiers.range_start &&
-        !modifiers.range_end &&
-        !modifiers.range_middle
-      }
-      data-range-start={modifiers.range_start}
-      data-range-end={modifiers.range_end}
-      data-range-middle={modifiers.range_middle}
-      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,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Calendar, CalendarDayButton };

frontend/src/components/ui/card.tsx

@@ -1,86 +0,0 @@
-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,153 +0,0 @@
-"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 { cn } from "@/lib/utils";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-Command.displayName = CommandPrimitive.displayName;
-
-const CommandDialog = ({ children, ...props }: DialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      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,
-      )}
-      {...props}
-    />
-  </div>
-));
-
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-));
-
-CommandList.displayName = CommandPrimitive.List.displayName;
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-));
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    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,
-    )}
-    {...props}
-  />
-));
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    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,
-    )}
-    {...props}
-  />
-));
-
-CommandItem.displayName = CommandPrimitive.Item.displayName;
-
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className,
-      )}
-      {...props}
-    />
-  );
-};
-CommandShortcut.displayName = "CommandShortcut";
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-};

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

@@ -1,137 +0,0 @@
-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,120 +0,0 @@
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Dialog = DialogPrimitive.Root;
-
-const DialogTrigger = DialogPrimitive.Trigger;
-
-const DialogPortal = DialogPrimitive.Portal;
-
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    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,
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      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,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.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-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className,
-    )}
-    {...props}
-  />
-);
-DialogHeader.displayName = "DialogHeader";
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
-    {...props}
-  />
-);
-DialogFooter.displayName = "DialogFooter";
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className,
-    )}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-};

frontend/src/components/ui/input.tsx

@@ -1,22 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <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,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Input.displayName = "Input";
-
-export { Input };

frontend/src/components/ui/label.tsx

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

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

frontend/src/components/ui/pagination.tsx

@@ -1,118 +0,0 @@
-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,31 +0,0 @@
-import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-
-import { cn } from "@/lib/utils";
-
-const Popover = PopoverPrimitive.Root;
-
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-const PopoverAnchor = PopoverPrimitive.Anchor;
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      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,
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

frontend/src/components/ui/progress.tsx

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

frontend/src/components/ui/select.tsx

@@ -1,157 +0,0 @@
-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";
-
-const Select = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    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,
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className,
-    )}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className,
-    )}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "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,
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    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,
-    )}
-    {...props}
-  >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-};

frontend/src/components/ui/sheet.tsx

@@ -1,138 +0,0 @@
-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=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
-    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}
-    >
-      {children}
-      <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>
-    </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/skeleton.tsx

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

frontend/src/components/ui/sonner.tsx

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

frontend/src/components/ui/table.tsx

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

@@ -1,52 +0,0 @@
-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/contexts/ThemeContext.tsx

@@ -1,104 +0,0 @@
-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/usePWA.ts

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

frontend/src/index.css

@@ -1,68 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 219 91% 46%;
-    --primary-foreground: 210 40% 98%;
-    --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%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-  }
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 219 91% 46%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 189 94% 43%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

frontend/src/lib/api.ts

@@ -2,7 +2,6 @@ import axios from "axios";
 import type {
   Account,
   Transaction,
-  AnalyticsTransaction,
   Balance,
   ApiResponse,
   NotificationSettings,
@@ -11,7 +10,6 @@ import type {
   NotificationServicesResponse,
   HealthData,
   AccountUpdate,
-  TransactionStats,
 } from "../types/api";
 
 // Use VITE_API_URL for development, relative URLs for production
@@ -41,10 +39,11 @@ export const apiClient = {
   updateAccount: async (
     id: string,
     updates: AccountUpdate,
-  ): Promise<{ id: string; display_name?: string }> => {
-    const response = await api.put<
-      ApiResponse<{ id: string; display_name?: string }>
-    >(`/accounts/${id}`, updates);
+  ): Promise<{ id: string; name?: string }> => {
+    const response = await api.put<ApiResponse<{ id: string; name?: string }>>(
+      `/accounts/${id}`,
+      updates,
+    );
     return response.data.data;
   },
 
@@ -54,21 +53,6 @@ export const apiClient = {
     return response.data.data;
   },
 
-  // Get historical balances for balance progression chart
-  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()}`,
-    );
-    return response.data.data;
-  },
-
   // Get balances for specific account
   getAccountBalances: async (accountId: string): Promise<Balance[]> => {
     const response = await api.get<ApiResponse<Balance[]>>(
@@ -86,8 +70,6 @@ export const apiClient = {
     perPage?: number;
     search?: string;
     summaryOnly?: boolean;
-    minAmount?: number;
-    maxAmount?: number;
   }): Promise<ApiResponse<Transaction[]>> => {
     const queryParams = new URLSearchParams();
 
@@ -101,12 +83,6 @@ export const apiClient = {
     if (params?.summaryOnly !== undefined) {
       queryParams.append("summary_only", params.summaryOnly.toString());
     }
-    if (params?.minAmount !== undefined) {
-      queryParams.append("min_amount", params.minAmount.toString());
-    }
-    if (params?.maxAmount !== undefined) {
-      queryParams.append("max_amount", params.maxAmount.toString());
-    }
 
     const response = await api.get<ApiResponse<Transaction[]>>(
       `/transactions?${queryParams.toString()}`,
@@ -166,57 +142,6 @@ export const apiClient = {
     const response = await api.get<ApiResponse<HealthData>>("/health");
     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()}`,
-    );
-    return response.data.data;
-  },
-
-  // Get all transactions for analytics (no pagination)
-  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()}`,
-    );
-    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<{
-          month: string;
-          income: number;
-          expenses: number;
-          net: number;
-        }>
-      >
-    >(`/transactions/monthly-stats?${queryParams.toString()}`);
-    return response.data.data;
-  },
 };
 
 export default apiClient;

frontend/src/lib/timePeriods.ts

@@ -1,19 +0,0 @@
-export type TimePeriod = {
-  label: string;
-  days: number;
-  value: string;
-};
-
-function getDaysFromYearStart(): number {
-  const now = new Date();
-  const yearStart = new Date(now.getFullYear(), 0, 1);
-  const diffTime = now.getTime() - yearStart.getTime();
-  return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-}
-
-export const TIME_PERIODS: TimePeriod[] = [
-  { label: "Last 30 days", days: 30, value: "30d" },
-  { 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,25 +1,62 @@
 import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return clsx(inputs);
 }
 
 export function formatCurrency(
   amount: number,
   currency: string = "EUR",
 ): string {
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency,
-  }).format(amount);
+  // Validate currency code - must be 3 letters and a valid ISO 4217 code
+  const validCurrency =
+    currency && /^[A-Z]{3}$/.test(currency) ? currency : "EUR";
+
+  try {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: validCurrency,
+    }).format(amount);
+  } catch {
+    // Fallback if currency is still invalid
+    console.warn(`Invalid currency code: ${currency}, falling back to EUR`);
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "EUR",
+    }).format(amount);
+  }
 }
 
-export function formatDate(dateString: string): string {
-  const date = new Date(dateString);
-  return date.toLocaleDateString("en-US", {
+export function formatDate(date: string): string {
+  if (!date) return "No date";
+
+  const parsedDate = new Date(date);
+  if (isNaN(parsedDate.getTime())) {
+    console.warn("Invalid date string:", date);
+    return "Invalid date";
+  }
+
+  return new Intl.DateTimeFormat("en-US", {
     year: "numeric",
     month: "short",
     day: "numeric",
-  });
+  }).format(parsedDate);
+}
+
+export function formatDateTime(date: string): string {
+  if (!date) return "No date";
+
+  const parsedDate = new Date(date);
+  if (isNaN(parsedDate.getTime())) {
+    console.warn("Invalid date string:", date);
+    return "Invalid date";
+  }
+
+  return new Intl.DateTimeFormat("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(parsedDate);
 }

frontend/src/main.tsx

@@ -2,7 +2,6 @@ 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";
 
@@ -20,9 +19,7 @@ const queryClient = new QueryClient({
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      <ThemeProvider>
-        <RouterProvider router={router} />
-      </ThemeProvider>
+      <RouterProvider router={router} />
     </QueryClientProvider>
   </StrictMode>,
 );

frontend/src/routes/__root.tsx

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

frontend/src/routes/analytics.tsx

@@ -1,152 +1,10 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
-import {
-  CreditCard,
-  TrendingUp,
-  TrendingDown,
-  Activity,
-  Users,
-} from "lucide-react";
-import apiClient from "../lib/api";
-import StatCard from "../components/analytics/StatCard";
-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],
-  );
-
-  // Fetch analytics data
-  const { data: stats, isLoading: statsLoading } = useQuery({
-    queryKey: ["transaction-stats", selectedPeriod.days],
-    queryFn: () => apiClient.getTransactionStats(selectedPeriod.days),
-  });
-
-  const { data: accounts, isLoading: accountsLoading } = useQuery({
-    queryKey: ["accounts"],
-    queryFn: () => apiClient.getAccounts(),
-  });
-
-  const { data: balances, isLoading: balancesLoading } = useQuery({
-    queryKey: ["historical-balances", selectedPeriod.days],
-    queryFn: () => apiClient.getHistoricalBalances(selectedPeriod.days),
-  });
-
-  const isLoading = statsLoading || accountsLoading || balancesLoading;
-
-  if (isLoading) {
-    return (
-      <div className="p-6">
-        <div className="animate-pulse">
-          <div className="h-8 bg-muted rounded w-48 mb-6"></div>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
-            {[...Array(3)].map((_, i) => (
-              <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-muted rounded"></div>
-            <div className="h-96 bg-muted rounded"></div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="p-6 space-y-8">
-      {/* Time Period Filter */}
-      <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">
-        <StatCard
-          title="Total Transactions"
-          value={stats?.total_transactions || 0}
-          subtitle={`Last ${stats?.period_days || 0} days`}
-          icon={Activity}
-          iconColor="blue"
-        />
-        <StatCard
-          title="Total Income"
-          value={`€${(stats?.total_income || 0).toLocaleString()}`}
-          subtitle="Inflows this period"
-          icon={TrendingUp}
-          iconColor="green"
-        />
-        <StatCard
-          title="Total Expenses"
-          value={`€${(stats?.total_expenses || 0).toLocaleString()}`}
-          subtitle="Outflows this period"
-          icon={TrendingDown}
-          iconColor="red"
-        />
-      </div>
-
-      {/* Additional Stats */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <StatCard
-          title="Net Change"
-          value={`€${(stats?.net_change || 0).toLocaleString()}`}
-          subtitle="Income minus expenses"
-          icon={CreditCard}
-          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">
-        <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 */}
-      <Card>
-        <CardContent className="p-6">
-          <MonthlyTrends days={selectedPeriod.days} />
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
 
 export const Route = createFileRoute("/analytics")({
-  component: AnalyticsDashboard,
+  component: () => (
+    <div className="bg-white rounded-lg shadow p-6">
+      <h3 className="text-lg font-medium text-gray-900 mb-4">Analytics</h3>
+      <p className="text-gray-600">Analytics dashboard coming soon...</p>
+    </div>
+  ),
 });

frontend/src/types/api.ts

@@ -11,7 +11,6 @@ export interface Account {
   status: string;
   iban?: string;
   name?: string;
-  display_name?: string;
   currency?: string;
   created: string;
   last_accessed?: string;
@@ -19,7 +18,7 @@ export interface Account {
 }
 
 export interface AccountUpdate {
-  display_name?: string;
+  name?: string;
 }
 
 export interface RawTransactionData {
@@ -60,17 +59,6 @@ export interface RawTransactionData {
   [key: string]: unknown; // Allow additional fields
 }
 
-// Type for analytics transaction data
-export interface AnalyticsTransaction {
-  transaction_id: string;
-  date: string;
-  description: string;
-  amount: number;
-  currency: string;
-  status: string;
-  account_id: string;
-}
-
 export interface Transaction {
   transaction_id: string; // NEW: stable bank-provided transaction ID
   internal_transaction_id: string | null; // OLD: unstable GoCardless ID
@@ -200,16 +188,3 @@ export interface HealthData {
   message?: string;
   error?: string;
 }
-
-// Analytics data types
-export interface TransactionStats {
-  period_days: number;
-  total_transactions: number;
-  booked_transactions: number;
-  pending_transactions: number;
-  total_income: number;
-  total_expenses: number;
-  net_change: number;
-  average_transaction: number;
-  accounts_included: number;
-}

frontend/src/vite-env.d.ts

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

frontend/tailwind.config.js

@@ -1,57 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: ["class"],
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      colors: {
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        chart: {
-          1: "hsl(var(--chart-1))",
-          2: "hsl(var(--chart-2))",
-          3: "hsl(var(--chart-3))",
-          4: "hsl(var(--chart-4))",
-          5: "hsl(var(--chart-5))",
-        },
-      },
-    },
+    extend: {},
   },
-  plugins: [require("@tailwindcss/forms"), require("tailwindcss-animate")],
+  plugins: [require("@tailwindcss/forms")],
 };

frontend/tsconfig.app.json

@@ -15,12 +15,6 @@
     "noEmit": true,
     "jsx": "react-jsx",
 
-    /* Path mapping */
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,

frontend/tsconfig.json

@@ -3,11 +3,5 @@
   "references": [
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" }
-  ],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
+  ]
 }

frontend/vite.config.ts

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

leggen/api_client.py

@@ -1,21 +1,20 @@
 import os
-from typing import Any, Dict, List, Optional, Union
-from urllib.parse import urljoin
-
 import requests
+from typing import Dict, Any, Optional, List, Union
+from urllib.parse import urljoin
 
 from leggen.utils.text import error
 
 
-class LeggenAPIClient:
-    """Client for communicating with the leggen FastAPI service"""
+class LeggendAPIClient:
+    """Client for communicating with the leggend FastAPI service"""
 
     base_url: str
 
     def __init__(self, base_url: Optional[str] = None):
         self.base_url = (
             base_url
-            or os.environ.get("LEGGEN_API_URL", "http://localhost:8000")
+            or os.environ.get("LEGGEND_API_URL", "http://localhost:8000")
             or "http://localhost:8000"
         )
         self.session = requests.Session()
@@ -32,7 +31,7 @@ class LeggenAPIClient:
             response.raise_for_status()
             return response.json()
         except requests.exceptions.ConnectionError:
-            error("Could not connect to leggen server. Is it running?")
+            error("Could not connect to leggend service. Is it running?")
             error(f"Trying to connect to: {self.base_url}")
             raise
         except requests.exceptions.HTTPError as e:
@@ -49,7 +48,7 @@ class LeggenAPIClient:
             raise
 
     def health_check(self) -> bool:
-        """Check if the leggen server is healthy"""
+        """Check if the leggend service is healthy"""
         try:
             response = self._make_request("GET", "/health")
             return response.get("status") == "healthy"

leggen/commands/balances.py

@@ -1,7 +1,7 @@
 import click
 
-from leggen.api_client import LeggenAPIClient
 from leggen.main import cli
+from leggen.api_client import LeggendAPIClient
 from leggen.utils.text import datefmt, print_table
 
 
@@ -11,12 +11,12 @@ def balances(ctx: click.Context):
     """
     List balances of all connected accounts
     """
-    api_client = LeggenAPIClient(ctx.obj.get("api_url"))
+    api_client = LeggendAPIClient(ctx.obj.get("api_url"))
 
-    # Check if leggen server is available
+    # Check if leggend service is available
     if not api_client.health_check():
         click.echo(
-            "Error: Cannot connect to leggen server. Please ensure it's running."
+            "Error: Cannot connect to leggend service. Please ensure it's running."
         )
         return
 

leggen/commands/bank/add.py

@@ -1,9 +1,9 @@
 import click
 
-from leggen.api_client import LeggenAPIClient
 from leggen.main import cli
+from leggen.api_client import LeggendAPIClient
 from leggen.utils.disk import save_file
-from leggen.utils.text import info, print_table, success, warning
+from leggen.utils.text import info, print_table, warning, success
 
 
 @cli.command()
@@ -12,12 +12,12 @@ def add(ctx):
     """
     Connect to a bank
     """
-    api_client = LeggenAPIClient(ctx.obj.get("api_url"))
+    api_client = LeggendAPIClient(ctx.obj.get("api_url"))
 
-    # Check if leggen server is available
+    # Check if leggend service is available
     if not api_client.health_check():
         click.echo(
-            "Error: Cannot connect to leggen server. Please ensure it's running."
+            "Error: Cannot connect to leggend service. Please ensure it's running."
         )
         return
 

leggen/commands/generate_sample_db.py

@@ -1,8 +1,9 @@
 """Generate sample database command."""
 
+import click
 from pathlib import Path
 
-import click
+from leggen.utils.paths import path_manager
 
 
 @click.command()
@@ -29,33 +30,29 @@ import click
     help="Overwrite existing database without confirmation",
 )
 @click.pass_context
-def generate_sample_db(
-    ctx: click.Context, database: Path, accounts: int, transactions: int, force: bool
-):
+def generate_sample_db(ctx: click.Context, database: Path, accounts: int, transactions: int, force: bool):
     """Generate a sample database with realistic financial data for testing."""
-
+    
     # Import here to avoid circular imports
-    import subprocess
     import sys
+    import subprocess
     from pathlib import Path as PathlibPath
-
+    
     # Get the script path
-    script_path = (
-        PathlibPath(__file__).parent.parent.parent / "scripts" / "generate_sample_db.py"
-    )
-
+    script_path = PathlibPath(__file__).parent.parent.parent / "scripts" / "generate_sample_db.py"
+    
     # Build command arguments
     cmd = [sys.executable, str(script_path)]
-
+    
     if database:
         cmd.extend(["--database", str(database)])
-
+    
     cmd.extend(["--accounts", str(accounts)])
     cmd.extend(["--transactions", str(transactions)])
-
+    
     if force:
         cmd.append("--force")
-
+    
     # Execute the script
     try:
         subprocess.run(cmd, check=True)
@@ -65,4 +62,4 @@ def generate_sample_db(
 
 
 # Export the command
-generate_sample_db = generate_sample_db
+generate_sample_db = generate_sample_db

leggen/commands/status.py

@@ -1,7 +1,7 @@
 import click
 
-from leggen.api_client import LeggenAPIClient
 from leggen.main import cli
+from leggen.api_client import LeggendAPIClient
 from leggen.utils.text import datefmt, echo, info, print_table
 
 
@@ -11,12 +11,12 @@ def status(ctx: click.Context):
     """
     List all connected banks and their status
     """
-    api_client = LeggenAPIClient(ctx.obj.get("api_url"))
+    api_client = LeggendAPIClient(ctx.obj.get("api_url"))
 
-    # Check if leggen server is available
+    # Check if leggend service is available
     if not api_client.health_check():
         click.echo(
-            "Error: Cannot connect to leggen server. Please ensure it's running."
+            "Error: Cannot connect to leggend service. Please ensure it's running."
         )
         return
 

leggen/commands/sync.py

@@ -1,7 +1,7 @@
 import click
 
-from leggen.api_client import LeggenAPIClient
 from leggen.main import cli
+from leggen.api_client import LeggendAPIClient
 from leggen.utils.text import error, info, success
 
 
@@ -13,11 +13,11 @@ def sync(ctx: click.Context, wait: bool, force: bool):
     """
     Sync all transactions with database
     """
-    api_client = LeggenAPIClient(ctx.obj.get("api_url"))
+    api_client = LeggendAPIClient(ctx.obj.get("api_url"))
 
-    # Check if leggen server is available
+    # Check if leggend service is available
     if not api_client.health_check():
-        error("Cannot connect to leggen server. Please ensure it's running.")
+        error("Cannot connect to leggend service. Please ensure it's running.")
         return
 
     try:

leggen/commands/transactions.py

@@ -1,7 +1,7 @@
 import click
 
-from leggen.api_client import LeggenAPIClient
 from leggen.main import cli
+from leggen.api_client import LeggendAPIClient
 from leggen.utils.text import datefmt, info, print_table
 
 
@@ -20,12 +20,12 @@ def transactions(ctx: click.Context, account: str, limit: int, full: bool):
 
     If the --account option is used, it will only list transactions for that account.
     """
-    api_client = LeggenAPIClient(ctx.obj.get("api_url"))
+    api_client = LeggendAPIClient(ctx.obj.get("api_url"))
 
-    # Check if leggen server is available
+    # Check if leggend service is available
     if not api_client.health_check():
         click.echo(
-            "Error: Cannot connect to leggen server. Please ensure it's running."
+            "Error: Cannot connect to leggend service. Please ensure it's running."
         )
         return
 

leggen/database/sqlite.py

@@ -0,0 +1,522 @@
+import json
+import sqlite3
+from sqlite3 import IntegrityError
+
+import click
+
+from leggen.utils.text import success, warning
+from leggen.utils.paths import path_manager
+
+
+def persist_balances(ctx: click.Context, balance: dict):
+    # Connect to SQLite database
+    db_path = path_manager.get_database_path()
+    conn = sqlite3.connect(str(db_path))
+    cursor = conn.cursor()
+
+    # Create the accounts table if it doesn't exist
+    cursor.execute(
+        """CREATE TABLE IF NOT EXISTS accounts (
+        id TEXT PRIMARY KEY,
+        institution_id TEXT,
+        status TEXT,
+        iban TEXT,
+        name TEXT,
+        currency TEXT,
+        created DATETIME,
+        last_accessed DATETIME,
+        last_updated DATETIME
+    )"""
+    )
+
+    # Create indexes for accounts table
+    cursor.execute(
+        """CREATE INDEX IF NOT EXISTS idx_accounts_institution_id
+           ON accounts(institution_id)"""
+    )
+    cursor.execute(
+        """CREATE INDEX IF NOT EXISTS idx_accounts_status
+           ON accounts(status)"""
+    )
+
+    # Create the balances table if it doesn't exist
+    cursor.execute(
+        """CREATE TABLE IF NOT EXISTS balances (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        account_id TEXT,
+        bank TEXT,
+        status TEXT,
+        iban TEXT,
+        amount REAL,
+        currency TEXT,
+        type TEXT,
+        timestamp DATETIME
+    )"""
+    )
+
+    # Create indexes for better performance
+    cursor.execute(
+        """CREATE INDEX IF NOT EXISTS idx_balances_account_id
+           ON balances(account_id)"""
+    )
+    cursor.execute(
+        """CREATE INDEX IF NOT EXISTS idx_balances_timestamp
+           ON balances(timestamp)"""
+    )
+    cursor.execute(
+        """CREATE INDEX IF NOT EXISTS idx_balances_account_type_timestamp
+           ON balances(account_id, type, timestamp)"""
+    )
+
+    # Insert balance into SQLite database
+    try:
+        cursor.execute(
+            """INSERT INTO balances (
+            account_id,
+            bank,
+            status,
+            iban,
+            amount,
+            currency,
+            type,
+            timestamp
+        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)""",
+            (
+                balance["account_id"],
+                balance["bank"],
+                balance["status"],
+                balance["iban"],
+                balance["amount"],
+                balance["currency"],
+                balance["type"],
+                balance["timestamp"],
+            ),
+        )
+    except IntegrityError:
+        warning(f"[{balance['account_id']}] Skipped duplicate balance")
+
+    # Commit changes and close the connection
+    conn.commit()
+    conn.close()
+
+    success(f"[{balance['account_id']}] Inserted balance of type {balance['type']}")
+
+    return balance
+
+
+def persist_transactions(ctx: click.Context, account: str, transactions: list) -> list:
+    # Connect to SQLite database
+    db_path = path_manager.get_database_path()
+    conn = sqlite3.connect(str(db_path))
+    cursor = conn.cursor()
+
+    # Create the transactions table if it doesn't exist
+    cursor.execute(
+        """CREATE TABLE IF NOT EXISTS transactions (
+        accountId TEXT NOT NULL,
+        transactionId TEXT NOT NULL,
+        internalTransactionId TEXT,
+        institutionId TEXT,
+        iban TEXT,
+        transactionDate DATETIME,
+        description TEXT,
+        transactionValue REAL,
+        transactionCurrency TEXT,
+        transactionStatus TEXT,
+        rawTransaction JSON,
+        PRIMARY KEY (accountId, transactionId)
+    )"""
+    )
+
+    # Create indexes for better performance
+    cursor.execute(
+        """CREATE INDEX IF NOT EXISTS idx_transactions_internal_id
+           ON transactions(internalTransactionId)"""
+    )
+    cursor.execute(
+        """CREATE INDEX IF NOT EXISTS idx_transactions_date
+           ON transactions(transactionDate)"""
+    )
+    cursor.execute(
+        """CREATE INDEX IF NOT EXISTS idx_transactions_account_date
+           ON transactions(accountId, transactionDate)"""
+    )
+    cursor.execute(
+        """CREATE INDEX IF NOT EXISTS idx_transactions_amount
+           ON transactions(transactionValue)"""
+    )
+
+    # Insert transactions into SQLite database
+    duplicates_count = 0
+
+    # Prepare an SQL statement for inserting data
+    insert_sql = """INSERT OR REPLACE INTO transactions (
+        accountId,
+        transactionId,
+        internalTransactionId,
+        institutionId,
+        iban,
+        transactionDate,
+        description,
+        transactionValue,
+        transactionCurrency,
+        transactionStatus,
+        rawTransaction
+    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)"""
+
+    new_transactions = []
+
+    for transaction in transactions:
+        try:
+            cursor.execute(
+                insert_sql,
+                (
+                    transaction["accountId"],
+                    transaction["transactionId"],
+                    transaction.get("internalTransactionId"),
+                    transaction["institutionId"],
+                    transaction["iban"],
+                    transaction["transactionDate"],
+                    transaction["description"],
+                    transaction["transactionValue"],
+                    transaction["transactionCurrency"],
+                    transaction["transactionStatus"],
+                    json.dumps(transaction["rawTransaction"]),
+                ),
+            )
+            new_transactions.append(transaction)
+        except IntegrityError:
+            # A transaction with the same ID already exists, indicating a duplicate
+            duplicates_count += 1
+
+    # Commit changes and close the connection
+    conn.commit()
+    conn.close()
+
+    success(f"[{account}] Inserted {len(new_transactions)} new transactions")
+    if duplicates_count:
+        warning(f"[{account}] Skipped {duplicates_count} duplicate transactions")
+
+    return new_transactions
+
+
+def get_transactions(
+    account_id=None,
+    limit=100,
+    offset=0,
+    date_from=None,
+    date_to=None,
+    min_amount=None,
+    max_amount=None,
+    search=None,
+):
+    """Get transactions from SQLite database with optional filtering"""
+    db_path = path_manager.get_database_path()
+    if not db_path.exists():
+        return []
+    conn = sqlite3.connect(str(db_path))
+    conn.row_factory = sqlite3.Row  # Enable dict-like access
+    cursor = conn.cursor()
+
+    # Build query with filters
+    query = "SELECT * FROM transactions WHERE 1=1"
+    params = []
+
+    if account_id:
+        query += " AND accountId = ?"
+        params.append(account_id)
+
+    if date_from:
+        query += " AND transactionDate >= ?"
+        params.append(date_from)
+
+    if date_to:
+        query += " AND transactionDate <= ?"
+        params.append(date_to)
+
+    if min_amount is not None:
+        query += " AND transactionValue >= ?"
+        params.append(min_amount)
+
+    if max_amount is not None:
+        query += " AND transactionValue <= ?"
+        params.append(max_amount)
+
+    if search:
+        query += " AND description LIKE ?"
+        params.append(f"%{search}%")
+
+    # Add ordering and pagination
+    query += " ORDER BY transactionDate DESC"
+
+    if limit:
+        query += " LIMIT ?"
+        params.append(limit)
+
+    if offset:
+        query += " OFFSET ?"
+        params.append(offset)
+
+    try:
+        cursor.execute(query, params)
+        rows = cursor.fetchall()
+
+        # Convert to list of dicts and parse JSON fields
+        transactions = []
+        for row in rows:
+            transaction = dict(row)
+            if transaction["rawTransaction"]:
+                transaction["rawTransaction"] = json.loads(
+                    transaction["rawTransaction"]
+                )
+            transactions.append(transaction)
+
+        conn.close()
+        return transactions
+
+    except Exception as e:
+        conn.close()
+        raise e
+
+
+def get_balances(account_id=None):
+    """Get latest balances from SQLite database"""
+    db_path = path_manager.get_database_path()
+    if not db_path.exists():
+        return []
+    conn = sqlite3.connect(str(db_path))
+    conn.row_factory = sqlite3.Row
+    cursor = conn.cursor()
+
+    # Get latest balance for each account_id and type combination
+    query = """
+        SELECT * FROM balances b1
+        WHERE b1.timestamp = (
+            SELECT MAX(b2.timestamp)
+            FROM balances b2
+            WHERE b2.account_id = b1.account_id AND b2.type = b1.type
+        )
+    """
+    params = []
+
+    if account_id:
+        query += " AND b1.account_id = ?"
+        params.append(account_id)
+
+    query += " ORDER BY b1.account_id, b1.type"
+
+    try:
+        cursor.execute(query, params)
+        rows = cursor.fetchall()
+
+        balances = [dict(row) for row in rows]
+        conn.close()
+        return balances
+
+    except Exception as e:
+        conn.close()
+        raise e
+
+
+def get_account_summary(account_id):
+    """Get basic account info from transactions table (avoids GoCardless API call)"""
+    db_path = path_manager.get_database_path()
+    if not db_path.exists():
+        return None
+    conn = sqlite3.connect(str(db_path))
+    conn.row_factory = sqlite3.Row
+    cursor = conn.cursor()
+
+    try:
+        # Get account info from most recent transaction
+        cursor.execute(
+            """
+            SELECT DISTINCT accountId, institutionId, iban
+            FROM transactions
+            WHERE accountId = ?
+            ORDER BY transactionDate DESC
+            LIMIT 1
+        """,
+            (account_id,),
+        )
+
+        row = cursor.fetchone()
+        conn.close()
+
+        if row:
+            return dict(row)
+        return None
+
+    except Exception as e:
+        conn.close()
+        raise e
+
+
+def get_transaction_count(account_id=None, **filters):
+    """Get total count of transactions matching filters"""
+    db_path = path_manager.get_database_path()
+    if not db_path.exists():
+        return 0
+    conn = sqlite3.connect(str(db_path))
+    cursor = conn.cursor()
+
+    query = "SELECT COUNT(*) FROM transactions WHERE 1=1"
+    params = []
+
+    if account_id:
+        query += " AND accountId = ?"
+        params.append(account_id)
+
+    # Add same filters as get_transactions
+    if filters.get("date_from"):
+        query += " AND transactionDate >= ?"
+        params.append(filters["date_from"])
+
+    if filters.get("date_to"):
+        query += " AND transactionDate <= ?"
+        params.append(filters["date_to"])
+
+    if filters.get("min_amount") is not None:
+        query += " AND transactionValue >= ?"
+        params.append(filters["min_amount"])
+
+    if filters.get("max_amount") is not None:
+        query += " AND transactionValue <= ?"
+        params.append(filters["max_amount"])
+
+    if filters.get("search"):
+        query += " AND description LIKE ?"
+        params.append(f"%{filters['search']}%")
+
+    try:
+        cursor.execute(query, params)
+        count = cursor.fetchone()[0]
+        conn.close()
+        return count
+
+    except Exception as e:
+        conn.close()
+        raise e
+
+
+def persist_account(account_data: dict):
+    """Persist account details to SQLite database"""
+    db_path = path_manager.get_database_path()
+    conn = sqlite3.connect(str(db_path))
+    cursor = conn.cursor()
+
+    # Create the accounts table if it doesn't exist
+    cursor.execute(
+        """CREATE TABLE IF NOT EXISTS accounts (
+        id TEXT PRIMARY KEY,
+        institution_id TEXT,
+        status TEXT,
+        iban TEXT,
+        name TEXT,
+        currency TEXT,
+        created DATETIME,
+        last_accessed DATETIME,
+        last_updated DATETIME
+    )"""
+    )
+
+    # Create indexes for accounts table
+    cursor.execute(
+        """CREATE INDEX IF NOT EXISTS idx_accounts_institution_id
+           ON accounts(institution_id)"""
+    )
+    cursor.execute(
+        """CREATE INDEX IF NOT EXISTS idx_accounts_status
+           ON accounts(status)"""
+    )
+
+    try:
+        # Insert or replace account data
+        cursor.execute(
+            """INSERT OR REPLACE INTO accounts (
+            id,
+            institution_id,
+            status,
+            iban,
+            name,
+            currency,
+            created,
+            last_accessed,
+            last_updated
+        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)""",
+            (
+                account_data["id"],
+                account_data["institution_id"],
+                account_data["status"],
+                account_data.get("iban"),
+                account_data.get("name"),
+                account_data.get("currency"),
+                account_data["created"],
+                account_data.get("last_accessed"),
+                account_data.get("last_updated", account_data["created"]),
+            ),
+        )
+        conn.commit()
+        conn.close()
+
+        success(f"[{account_data['id']}] Account details persisted to database")
+        return account_data
+
+    except Exception as e:
+        conn.close()
+        raise e
+
+
+def get_accounts(account_ids=None):
+    """Get account details from SQLite database"""
+    db_path = path_manager.get_database_path()
+    if not db_path.exists():
+        return []
+    conn = sqlite3.connect(str(db_path))
+    conn.row_factory = sqlite3.Row
+    cursor = conn.cursor()
+
+    query = "SELECT * FROM accounts"
+    params = []
+
+    if account_ids:
+        placeholders = ",".join("?" * len(account_ids))
+        query += f" WHERE id IN ({placeholders})"
+        params.extend(account_ids)
+
+    query += " ORDER BY created DESC"
+
+    try:
+        cursor.execute(query, params)
+        rows = cursor.fetchall()
+
+        accounts = [dict(row) for row in rows]
+        conn.close()
+        return accounts
+
+    except Exception as e:
+        conn.close()
+        raise e
+
+
+def get_account(account_id: str):
+    """Get specific account details from SQLite database"""
+    db_path = path_manager.get_database_path()
+    if not db_path.exists():
+        return None
+    conn = sqlite3.connect(str(db_path))
+    conn.row_factory = sqlite3.Row
+    cursor = conn.cursor()
+
+    try:
+        cursor.execute("SELECT * FROM accounts WHERE id = ?", (account_id,))
+        row = cursor.fetchone()
+        conn.close()
+
+        if row:
+            return dict(row)
+        return None
+
+    except Exception as e:
+        conn.close()
+        raise e