feat: add notifications view and update branding

- Add complete notifications management view with:
  - Service status display (Discord, Telegram)
  - Test notification functionality
  - Service management (delete/disable)
  - Filter settings display (case sensitive/insensitive)
- Update API types to match current backend structure
- Fix NotificationFilters type (remove deprecated fields)
- Update page title from 'Vite + React + TS' to 'Leggen'
- Replace Vite favicon with custom Leggen favicon
- Add notifications tab to main navigation
- Ensure full API compatibility with current backend

AGENTS.md

@@ -0,0 +1,41 @@
+# Agent Guidelines for Leggen
+
+## Build/Lint/Test Commands
+
+### Frontend (React/TypeScript)
+- **Dev server**: `cd frontend && npm run dev`
+- **Build**: `cd frontend && npm run build`
+- **Lint**: `cd frontend && npm run lint`
+
+### Backend (Python)
+- **Lint**: `uv run ruff check .`
+- **Format**: `uv run ruff format .`
+- **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`
+- **Run tests by marker**: `uv run pytest -m "api"` or `uv run pytest -m "unit"`
+
+## Code Style Guidelines
+
+### Python
+- **Imports**: Standard library → Third-party → Local (blank lines between groups)
+- **Naming**: snake_case for variables/functions, PascalCase for classes
+- **Types**: Use type hints for all function parameters and return values
+- **Error handling**: Use specific exceptions, loguru for logging
+- **Path handling**: Use `pathlib.Path` instead of `os.path`
+- **CLI**: Use Click framework with proper option decorators
+
+### TypeScript/React
+- **Imports**: React hooks first, then third-party, then local components/types
+- **Naming**: PascalCase for components, camelCase for variables/functions
+- **Types**: Use `import type` for type-only imports, define interfaces/types
+- **Styling**: Tailwind CSS with `clsx` utility for conditional classes
+- **Icons**: lucide-react with consistent naming
+- **Data fetching**: @tanstack/react-query with proper error handling
+- **Components**: Functional components with hooks, proper TypeScript typing
+
+### General
+- **Formatting**: ruff for Python, ESLint for TypeScript
+- **Commits**: Use conventional commits, run pre-commit hooks before pushing
+- **Security**: Never log sensitive data, use environment variables for secrets

CLAUDE.md

@@ -1,69 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-Leggen is an Open Banking CLI tool built in Python that connects to banks using the GoCardless Open Banking API. It allows users to sync bank transactions to SQLite/MongoDB databases, visualize data with NocoDB, and send notifications based on transaction filters.
-
-## Development Commands
-
-- **Install dependencies**: `uv sync` (uses uv package manager)
-- **Run locally**: `uv run leggen --help`
-- **Lint code**: `ruff check` and `ruff format` (configured in pyproject.toml)
-- **Build Docker image**: `docker build -t leggen .`
-- **Run with Docker Compose**: `docker compose up -d`
-
-## Architecture
-
-### Core Structure
-- `leggen/main.py` - Main CLI entry point using Click framework with custom command loading
-- `leggen/commands/` - CLI command implementations (balances, sync, transactions, etc.)
-- `leggen/utils/` - Core utilities for authentication, database operations, network requests, and notifications
-- `leggen/database/` - Database adapters for SQLite and MongoDB
-- `leggen/notifications/` - Discord and Telegram notification handlers
-
-### Key Components
-
-**Configuration System**:
-- Uses TOML configuration files (default: `~/.config/leggen/config.toml`)
-- Configuration loaded via `leggen/utils/config.py`
-- Supports GoCardless API credentials, database settings, and notification configurations
-
-**Authentication & API**:
-- GoCardless Open Banking API integration in `leggen/utils/gocardless.py`
-- Token-based authentication via `leggen/utils/auth.py`
-- Network utilities in `leggen/utils/network.py`
-
-**Database Operations**:
-- Dual database support: SQLite (`database/sqlite.py`) and MongoDB (`database/mongo.py`)
-- Transaction persistence and balance tracking via `utils/database.py`
-- Data storage patterns follow bank account and transaction models
-
-**Command Architecture**:
-- Dynamic command loading system in `main.py` with support for command groups
-- Commands organized as modules with individual click decorators
-- Bank management commands grouped under `commands/bank/`
-
-### Data Flow
-1. Configuration loaded from TOML file
-2. GoCardless API authentication and bank requisition management
-3. Account and transaction data retrieval from banks
-4. Data persistence to configured databases (SQLite/MongoDB)
-5. Optional notifications sent via Discord/Telegram based on filters
-6. Data visualization available through NocoDB integration
-
-## Docker & Deployment
-
-The project uses multi-stage Docker builds with uv for dependency management. The compose.yml includes:
-- Main leggen service with sync scheduling via Ofelia
-- NocoDB for data visualization
-- Optional MongoDB with mongo-express admin interface
-
-## Configuration Requirements
-
-All operations require a valid `config.toml` file with GoCardless API credentials. The configuration structure includes sections for:
-- `[gocardless]` - API credentials and endpoint
-- `[database]` - Storage backend selection
-- `[notifications]` - Discord/Telegram webhook settings
-- `[filters]` - Transaction matching patterns for notifications

PROJECT.md

@@ -1,91 +0,0 @@
-# Leggen Web Transformation Project
-
-## Overview
-Transform leggen from CLI-only to web application with FastAPI backend (`leggend`) and SvelteKit frontend (`leggen-web`).
-
-## Progress Tracking
-
-### ✅ Phase 1: FastAPI Backend (`leggend`)
-
-#### 1.1 Core Structure
-- [x] Create directory structure (`leggend/`, `api/`, `services/`, etc.)
-- [x] Add FastAPI dependencies to pyproject.toml
-- [x] Create configuration management system
-- [x] Set up FastAPI main application
-- [x] Create Pydantic models for API responses
-
-#### 1.2 API Endpoints
-- [x] Banks API (`/api/v1/banks/`)
-  - [x] `GET /institutions` - List available banks
-  - [x] `POST /connect` - Connect to bank
-  - [x] `GET /status` - Bank connection status
-- [x] Accounts API (`/api/v1/accounts/`)
-  - [x] `GET /` - List all accounts
-  - [x] `GET /{id}/balances` - Account balances
-  - [x] `GET /{id}/transactions` - Account transactions
-- [x] Sync API (`/api/v1/sync/`)
-  - [x] `POST /` - Trigger manual sync
-  - [x] `GET /status` - Sync status
-- [x] Notifications API (`/api/v1/notifications/`)
-  - [x] `GET/POST/PUT /settings` - Manage notification settings
-
-#### 1.3 Background Jobs
-- [x] Implement APScheduler for sync scheduling
-- [x] Replace Ofelia with internal Python scheduler
-- [x] Migrate existing sync logic from CLI
-
-### ⏳ Phase 2: SvelteKit Frontend (`leggen-web`)
-
-#### 2.1 Project Setup
-- [ ] Create SvelteKit project structure
-- [ ] Set up API client for backend communication
-- [ ] Design component architecture
-
-#### 2.2 UI Components
-- [ ] Dashboard with account overview
-- [ ] Bank connection wizard
-- [ ] Transaction history and filtering
-- [ ] Settings management
-- [ ] Real-time sync status
-
-### ✅ Phase 3: CLI Refactoring
-
-#### 3.1 API Client Integration
-- [x] Create HTTP client for FastAPI calls
-- [x] Refactor existing commands to use APIs
-- [x] Maintain CLI user experience
-- [x] Add API URL configuration option
-
-### ✅ Phase 4: Docker & Deployment
-
-#### 4.1 Container Setup
-- [x] Create Dockerfile for `leggend` service
-- [x] Update docker-compose.yml with `leggend` service
-- [x] Remove Ofelia dependency (scheduler now internal)
-- [ ] Create Dockerfile for `leggen-web` (deferred - not implementing web UI yet)
-
-## Current Status
-**Active Phase**: Phase 2 - CLI Integration Complete
-**Last Updated**: 2025-09-01
-**Completion**: ~80% (FastAPI backend and CLI refactoring complete)
-
-## Next Steps (Future Enhancements)
-1. Implement SvelteKit web frontend
-2. Add real-time WebSocket support for sync status
-3. Implement user authentication and multi-user support
-4. Add more comprehensive error handling and logging
-5. Implement database migrations for schema changes
-
-## Recent Achievements
-- ✅ Complete FastAPI backend with all major endpoints
-- ✅ Configurable background job scheduler (replaces Ofelia)
-- ✅ CLI successfully refactored to use API endpoints
-- ✅ Docker configuration updated for new architecture
-- ✅ Maintained backward compatibility and user experience
-
-## Architecture Decisions
-- **FastAPI**: For high-performance async API backend
-- **APScheduler**: For internal job scheduling (replacing Ofelia)
-- **SvelteKit**: For modern, reactive frontend
-- **Existing Logic**: Reuse all business logic from current CLI commands
-- **Configuration**: Centralize in `leggend` service, maintain TOML compatibility

README.md

@@ -2,9 +2,7 @@
 
 An Open Banking CLI and API service for managing bank connections and transactions.
 
-This tool provides both a **FastAPI backend service** (`leggend`) and a **command-line interface** (`leggen`) to connect to banks using the GoCardless Open Banking API.
-
-**New in v0.6.11**: Web-ready architecture with FastAPI backend, enhanced CLI, and background job scheduling.
+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.
 
@@ -18,8 +16,8 @@ Having your bank data accessible through both CLI and REST API gives you the pow
   ### 📦 Storage
   - [SQLite](https://www.sqlite.org): for storing transactions, simple and easy to use
 
-  ### 📊 Visualization
-  - [NocoDB](https://github.com/nocodb/nocodb): for visualizing and querying transactions, a simple and easy to use interface for SQLite
+  ### Frontend
+  [ADD INFO]
 
 ## ✨ Features
 
@@ -39,8 +37,6 @@ Having your bank data accessible through both CLI and REST API gives you the pow
 ### 📡 API & Integration
 - **REST API**: Complete FastAPI backend with comprehensive endpoints
 - **CLI Interface**: Enhanced command-line tools with new options
-- **Health Checks**: Service monitoring and dependency management
-- **Auto-reload**: Development mode with file watching
 
 ### 🔔 Notifications & Monitoring
 - Discord and Telegram notifications for filtered transactions
@@ -48,12 +44,6 @@ Having your bank data accessible through both CLI and REST API gives you the pow
 - Account expiry notifications and status alerts
 - Comprehensive logging and error handling
 
-### 📊 Visualization & Analysis
-- NocoDB integration for visual data exploration
-- Transaction statistics and reporting
-- Account balance tracking over time
-- Export capabilities for further analysis
-
 ## 🚀 Quick Start
 
 ### Prerequisites
@@ -124,9 +114,9 @@ chat_id = 12345
 enabled = true
 
 # Optional: Transaction filters for notifications
-[filters.case-insensitive]
-salary = "salary"
-bills = "utility"
+[filters]
+case-insensitive = ["salary", "utility"]
+case-sensitive = ["SpecificStore"]
 ```
 
 ## 📖 Usage

frontend/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Leggen</title>
   </head>
   <body>
     <div id="root"></div>

frontend/public/favicon.svg

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

@@ -10,16 +10,18 @@ import {
   List,
   BarChart3,
   Wifi,
-  WifiOff
+  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';
+type TabType = 'overview' | 'transactions' | 'analytics' | 'notifications';
 
 export default function Dashboard() {
   const [activeTab, setActiveTab] = useState<TabType>('overview');
@@ -47,6 +49,7 @@ export default function Dashboard() {
     { 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) => {
@@ -176,6 +179,7 @@ export default function Dashboard() {
                 <p className="text-gray-600">Analytics dashboard coming soon...</p>
               </div>
             )}
+            {activeTab === 'notifications' && <Notifications />}
           </ErrorBoundary>
         </main>
       </div>

frontend/src/components/Notifications.tsx

@@ -0,0 +1,290 @@
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  Bell,
+  MessageSquare,
+  Send,
+  Trash2,
+  RefreshCw,
+  AlertCircle,
+  CheckCircle,
+  Settings,
+  TestTube
+} from 'lucide-react';
+import { apiClient } from '../lib/api';
+import LoadingSpinner from './LoadingSpinner';
+import type { NotificationSettings, NotificationService } from '../types/api';
+
+export default function Notifications() {
+  const [testService, setTestService] = useState('');
+  const [testMessage, setTestMessage] = useState('Test notification from Leggen');
+  const queryClient = useQueryClient();
+
+  const {
+    data: settings,
+    isLoading: settingsLoading,
+    error: settingsError,
+    refetch: refetchSettings
+  } = useQuery<NotificationSettings>({
+    queryKey: ['notificationSettings'],
+    queryFn: apiClient.getNotificationSettings,
+  });
+
+  const {
+    data: services,
+    isLoading: servicesLoading,
+    error: servicesError,
+    refetch: refetchServices
+  } = useQuery<NotificationService[]>({
+    queryKey: ['notificationServices'],
+    queryFn: apiClient.getNotificationServices,
+  });
+
+  const testMutation = useMutation({
+    mutationFn: apiClient.testNotification,
+    onSuccess: () => {
+      // Could show a success toast here
+      console.log('Test notification sent successfully');
+    },
+    onError: (error) => {
+      console.error('Failed to send test notification:', error);
+    },
+  });
+
+  const deleteServiceMutation = useMutation({
+    mutationFn: apiClient.deleteNotificationService,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['notificationSettings'] });
+      queryClient.invalidateQueries({ queryKey: ['notificationServices'] });
+    },
+  });
+
+  if (settingsLoading || servicesLoading) {
+    return (
+      <div className="bg-white rounded-lg shadow">
+        <LoadingSpinner message="Loading notifications..." />
+      </div>
+    );
+  }
+
+  if (settingsError || servicesError) {
+    return (
+      <div className="bg-white rounded-lg shadow p-6">
+        <div className="flex items-center justify-center text-center">
+          <div>
+            <AlertCircle className="h-12 w-12 text-red-400 mx-auto mb-4" />
+            <h3 className="text-lg font-medium text-gray-900 mb-2">Failed to load notifications</h3>
+            <p className="text-gray-600 mb-4">
+              Unable to connect to the Leggen API. Make sure the server is running on localhost:8000.
+            </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>
+    );
+  }
+
+  const handleTestNotification = () => {
+    if (!testService) return;
+
+    testMutation.mutate({
+      service: testService,
+      message: testMessage,
+    });
+  };
+
+  const handleDeleteService = (serviceName: string) => {
+    if (confirm(`Are you sure you want to delete the ${serviceName} notification service?`)) {
+      deleteServiceMutation.mutate(serviceName);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Test Notification Section */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <div className="flex items-center space-x-2 mb-4">
+          <TestTube className="h-5 w-5 text-blue-600" />
+          <h3 className="text-lg font-medium text-gray-900">Test Notifications</h3>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Service
+            </label>
+            <select
+              value={testService}
+              onChange={(e) => setTestService(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">Select a service...</option>
+              {services?.map((service) => (
+                <option key={service.name} value={service.name}>
+                  {service.name} {service.enabled ? '(Enabled)' : '(Disabled)'}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Message
+            </label>
+            <input
+              type="text"
+              value={testMessage}
+              onChange={(e) => setTestMessage(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="Test message..."
+            />
+          </div>
+        </div>
+
+        <div className="mt-4">
+          <button
+            onClick={handleTestNotification}
+            disabled={!testService || testMutation.isPending}
+            className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            <Send className="h-4 w-4 mr-2" />
+            {testMutation.isPending ? 'Sending...' : 'Send Test Notification'}
+          </button>
+        </div>
+      </div>
+
+      {/* Notification Services */}
+      <div className="bg-white rounded-lg shadow">
+        <div className="px-6 py-4 border-b border-gray-200">
+          <div className="flex items-center space-x-2">
+            <Bell className="h-5 w-5 text-blue-600" />
+            <h3 className="text-lg font-medium text-gray-900">Notification Services</h3>
+          </div>
+          <p className="text-sm text-gray-600 mt-1">Manage your notification services</p>
+        </div>
+
+        {!services || services.length === 0 ? (
+          <div className="p-6 text-center">
+            <Bell className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+            <h3 className="text-lg font-medium text-gray-900 mb-2">No notification services configured</h3>
+            <p className="text-gray-600">
+              Configure notification services in your backend to receive alerts.
+            </p>
+          </div>
+        ) : (
+          <div className="divide-y divide-gray-200">
+            {services.map((service) => (
+              <div key={service.name} className="p-6 hover:bg-gray-50 transition-colors">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center space-x-4">
+                    <div className="p-3 bg-gray-100 rounded-full">
+                      {service.name.toLowerCase().includes('discord') ? (
+                        <MessageSquare className="h-6 w-6 text-gray-600" />
+                      ) : service.name.toLowerCase().includes('telegram') ? (
+                        <Send className="h-6 w-6 text-gray-600" />
+                      ) : (
+                        <Bell className="h-6 w-6 text-gray-600" />
+                      )}
+                    </div>
+                    <div>
+                      <h4 className="text-lg font-medium text-gray-900 capitalize">
+                        {service.name}
+                      </h4>
+                      <div className="flex items-center space-x-2 mt-1">
+                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                          service.enabled
+                            ? 'bg-green-100 text-green-800'
+                            : 'bg-red-100 text-red-800'
+                        }`}>
+                          {service.enabled ? (
+                            <CheckCircle className="h-3 w-3 mr-1" />
+                          ) : (
+                            <AlertCircle className="h-3 w-3 mr-1" />
+                          )}
+                          {service.enabled ? 'Enabled' : 'Disabled'}
+                        </span>
+                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                          service.configured
+                            ? 'bg-blue-100 text-blue-800'
+                            : 'bg-yellow-100 text-yellow-800'
+                        }`}>
+                          {service.configured ? 'Configured' : 'Not Configured'}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center space-x-2">
+                    <button
+                      onClick={() => handleDeleteService(service.name)}
+                      disabled={deleteServiceMutation.isPending}
+                      className="p-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-md transition-colors"
+                      title={`Delete ${service.name} service`}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Notification Settings */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <div className="flex items-center space-x-2 mb-4">
+          <Settings className="h-5 w-5 text-blue-600" />
+          <h3 className="text-lg font-medium text-gray-900">Notification Settings</h3>
+        </div>
+
+        {settings && (
+          <div className="space-y-4">
+            <div>
+              <h4 className="text-sm font-medium text-gray-700 mb-2">Filters</h4>
+              <div className="bg-gray-50 rounded-md p-4">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-xs font-medium text-gray-600 mb-1">
+                      Case Insensitive Filters
+                    </label>
+                    <p className="text-sm text-gray-900">
+                      {settings.filters.case_insensitive.length > 0
+                        ? settings.filters.case_insensitive.join(', ')
+                        : 'None'
+                      }
+                    </p>
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-600 mb-1">
+                      Case Sensitive Filters
+                    </label>
+                    <p className="text-sm text-gray-900">
+                      {settings.filters.case_sensitive && settings.filters.case_sensitive.length > 0
+                        ? settings.filters.case_sensitive.join(', ')
+                        : 'None'
+                      }
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="text-sm text-gray-600">
+              <p>Configure notification settings through your backend API to customize filters and service configurations.</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/lib/api.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import type { Account, Transaction, Balance, ApiResponse } from '../types/api';
+import type { Account, Transaction, Balance, ApiResponse, NotificationSettings, NotificationTest, NotificationService, NotificationServicesResponse } from '../types/api';
 
 const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000/api/v1';
 
@@ -62,6 +62,36 @@ export const apiClient = {
     const response = await api.get<ApiResponse<Transaction>>(`/transactions/${id}`);
     return response.data.data;
   },
+
+  // Get notification settings
+  getNotificationSettings: async (): Promise<NotificationSettings> => {
+    const response = await api.get<ApiResponse<NotificationSettings>>('/notifications/settings');
+    return response.data.data;
+  },
+
+  // Update notification settings
+  updateNotificationSettings: async (settings: NotificationSettings): Promise<NotificationSettings> => {
+    const response = await api.put<ApiResponse<NotificationSettings>>('/notifications/settings', settings);
+    return response.data.data;
+  },
+
+  // Test notification
+  testNotification: async (test: NotificationTest): Promise<void> => {
+    await api.post('/notifications/test', test);
+  },
+
+  // Get notification services
+  getNotificationServices: async (): Promise<NotificationService[]> => {
+    const response = await api.get<ApiResponse<NotificationServicesResponse>>('/notifications/services');
+    // Convert object to array format
+    const servicesData = response.data.data;
+    return Object.values(servicesData);
+  },
+
+  // Delete notification service
+  deleteNotificationService: async (service: string): Promise<void> => {
+    await api.delete(`/notifications/settings/${service}`);
+  },
 };
 
 export default apiClient;

frontend/src/lib/utils.ts

@@ -13,7 +13,7 @@ export function formatCurrency(amount: number, currency: string = 'EUR'): string
       style: 'currency',
       currency: validCurrency,
     }).format(amount);
-  } catch (error) {
+   } catch {
      // Fallback if currency is still invalid
      console.warn(`Invalid currency code: ${currency}, falling back to EUR`);
     return new Intl.NumberFormat('en-US', {

frontend/src/types/api.ts

@@ -86,3 +86,42 @@ export interface PaginatedResponse<T> {
   per_page: number;
   total_pages: number;
 }
+
+// Notification types
+export interface DiscordConfig {
+  webhook: string;
+  enabled: boolean;
+}
+
+export interface TelegramConfig {
+  token: string;
+  chat_id: number;
+  enabled: boolean;
+}
+
+export interface NotificationFilters {
+  case_insensitive: string[];
+  case_sensitive?: string[];
+}
+
+export interface NotificationSettings {
+  discord?: DiscordConfig;
+  telegram?: TelegramConfig;
+  filters: NotificationFilters;
+}
+
+export interface NotificationTest {
+  service: string;
+  message?: string;
+}
+
+export interface NotificationService {
+  name: string;
+  enabled: boolean;
+  configured: boolean;
+  active?: boolean;
+}
+
+export interface NotificationServicesResponse {
+  [serviceName: string]: NotificationService;
+}

leggend/api/models/notifications.py

@@ -1,4 +1,4 @@
-from typing import Dict, Optional, List
+from typing import Optional, List
 
 from pydantic import BaseModel
 
@@ -21,10 +21,8 @@ class TelegramConfig(BaseModel):
 class NotificationFilters(BaseModel):
     """Notification filters configuration"""
 
-    case_insensitive: Dict[str, str] = {}
-    case_sensitive: Optional[Dict[str, str]] = None
-    amount_threshold: Optional[float] = None
-    keywords: List[str] = []
+    case_insensitive: List[str] = []
+    case_sensitive: Optional[List[str]] = None
 
 
 class NotificationSettings(BaseModel):

leggend/api/routes/notifications.py

@@ -46,10 +46,8 @@ async def get_notification_settings() -> APIResponse:
             if (telegram_config.get("token") or telegram_config.get("api-key"))
             else None,
             filters=NotificationFilters(
-                case_insensitive=filters_config.get("case-insensitive", {}),
+                case_insensitive=filters_config.get("case-insensitive", []),
                 case_sensitive=filters_config.get("case-sensitive"),
-                amount_threshold=filters_config.get("amount_threshold"),
-                keywords=filters_config.get("keywords", []),
             ),
         )
 
@@ -92,10 +90,6 @@ async def update_notification_settings(settings: NotificationSettings) -> APIRes
             filters_config["case-insensitive"] = settings.filters.case_insensitive
         if settings.filters.case_sensitive:
             filters_config["case-sensitive"] = settings.filters.case_sensitive
-        if settings.filters.amount_threshold:
-            filters_config["amount_threshold"] = settings.filters.amount_threshold
-        if settings.filters.keywords:
-            filters_config["keywords"] = settings.filters.keywords
 
         # Save to config
         if notifications_config:

leggend/services/notification_service.py

@@ -63,14 +63,29 @@ class NotificationService:
     ) -> List[Dict[str, Any]]:
         """Filter transactions based on notification criteria"""
         matching = []
-        filters_case_insensitive = self.filters_config.get("case-insensitive", {})
+        filters_case_insensitive = self.filters_config.get("case-insensitive", [])
+        filters_case_sensitive = self.filters_config.get("case-sensitive", [])
 
         for transaction in transactions:
-            description = transaction.get("description", "").lower()
+            description = transaction.get("description", "")
+            description_lower = description.lower()
 
             # Check case-insensitive filters
-            for _filter_name, filter_value in filters_case_insensitive.items():
-                if filter_value.lower() in description:
+            for filter_value in filters_case_insensitive:
+                if filter_value.lower() in description_lower:
+                    matching.append(
+                        {
+                            "name": transaction["description"],
+                            "value": transaction["transactionValue"],
+                            "currency": transaction["transactionCurrency"],
+                            "date": transaction["transactionDate"],
+                        }
+                    )
+                    break
+
+            # Check case-sensitive filters
+            for filter_value in filters_case_sensitive:
+                if filter_value in description:
                     matching.append(
                         {
                             "name": transaction["description"],

tests/unit/test_config.py

@@ -188,8 +188,8 @@ class TestConfig:
         """Test filters configuration access."""
         custom_config = {
             "filters": {
-                "case-insensitive": {"salary": "SALARY", "bills": "BILL"},
-                "amount_threshold": 100.0,
+                "case-insensitive": ["salary", "utility"],
+                "case-sensitive": ["SpecificStore"],
             }
         }
 
@@ -197,5 +197,6 @@ class TestConfig:
         config._config = custom_config
 
         filters = config.filters_config
-        assert filters["case-insensitive"]["salary"] == "SALARY"
-        assert filters["amount_threshold"] == 100.0
+        assert "salary" in filters["case-insensitive"]
+        assert "utility" in filters["case-insensitive"]
+        assert "SpecificStore" in filters["case-sensitive"]