chore(ci): Bump version to 2025.9.22

Updated test fixtures to correctly mock GoCardless API response format
with "results" key for institutions data. Fixed API client test to use
processed institutions data instead of raw GoCardless format.

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

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

.github/workflows/release.yml

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

.gitignore

@@ -165,3 +165,4 @@ leggen.db
 *.db
 config.toml
 .claude/
+.playwright-mcp/

.mcp.json

@@ -7,10 +7,10 @@
         "mcp"
       ]
     },
-    "browsermcp": {
+    "playwright": {
       "command": "npx",
       "args": [
-        "@browsermcp/mcp@latest"
+        "@playwright/mcp@latest"
       ]
     }
   }

AGENTS.md

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

CHANGELOG.md

@@ -1,4 +1,224 @@
 
+## 2025.9.22 (2025/09/24)
+
+### Bug Fixes
+
+- **api:** Add automatic token refresh on 401 errors in GoCardless service. ([36d698f7](https://github.com/elisiariocouto/leggen/commit/36d698f7ce05c7db0e4b07dd07979de2c70b053e))
+- **api:** Fix banks API test fixtures to match GoCardless response format. ([24792744](https://github.com/elisiariocouto/leggen/commit/24792744f9660063e1a3abb9ed8e925fea9a5e60))
+
+
+### Features
+
+- **api:** Add separate sync failure notifications. ([e4e3f885](https://github.com/elisiariocouto/leggen/commit/e4e3f885eab1d45b0e10465ca04eb3f74e9c5a4d))
+- **api:** Add bank logo support and fix banks endpoint type errors. ([b9ca74e7](https://github.com/elisiariocouto/leggen/commit/b9ca74e7e67c3877728b749a42f15f0c0d906561))
+- **frontend:** Improve System page and TransactionsTable UX. ([62cd55e4](https://github.com/elisiariocouto/leggen/commit/62cd55e48fff7c2f5db9dd8230a7bd500e8f6eed))
+
+
+### Miscellaneous Tasks
+
+-  Add pre-commit instructions to AGENTS.md. ([a8f70412](https://github.com/elisiariocouto/leggen/commit/a8f704129b2453e604cf2ab776791ba1e91e6fc7))
+
+
+
+## 2025.9.22 (2025/09/24)
+
+### Bug Fixes
+
+- **api:** Add automatic token refresh on 401 errors in GoCardless service. ([36d698f7](https://github.com/elisiariocouto/leggen/commit/36d698f7ce05c7db0e4b07dd07979de2c70b053e))
+- **api:** Fix banks API test fixtures to match GoCardless response format. ([24792744](https://github.com/elisiariocouto/leggen/commit/24792744f9660063e1a3abb9ed8e925fea9a5e60))
+
+
+### Features
+
+- **api:** Add separate sync failure notifications. ([e4e3f885](https://github.com/elisiariocouto/leggen/commit/e4e3f885eab1d45b0e10465ca04eb3f74e9c5a4d))
+- **api:** Add bank logo support and fix banks endpoint type errors. ([b9ca74e7](https://github.com/elisiariocouto/leggen/commit/b9ca74e7e67c3877728b749a42f15f0c0d906561))
+- **frontend:** Improve System page and TransactionsTable UX. ([62cd55e4](https://github.com/elisiariocouto/leggen/commit/62cd55e48fff7c2f5db9dd8230a7bd500e8f6eed))
+
+
+### Miscellaneous Tasks
+
+-  Add pre-commit instructions to AGENTS.md. ([a8f70412](https://github.com/elisiariocouto/leggen/commit/a8f704129b2453e604cf2ab776791ba1e91e6fc7))
+
+
+
+## 2025.9.21 (2025/09/22)
+
+### Bug Fixes
+
+- **frontend:** Remove duplicate padding from Analytics page for consistent layout ([27f3f2db](https://github.com/elisiariocouto/leggen/commit/27f3f2dbba91777234769cca08de5dbe8b378f10))
+
+
+### Features
+
+- **frontend:** Implement notification settings with separate drawers and improved design. ([c332642e](https://github.com/elisiariocouto/leggen/commit/c332642e648cb0a29100b500c03e17ae322845f8))
+
+
+
+## 2025.9.21 (2025/09/22)
+
+### Bug Fixes
+
+- **frontend:** Remove duplicate padding from Analytics page for consistent layout ([27f3f2db](https://github.com/elisiariocouto/leggen/commit/27f3f2dbba91777234769cca08de5dbe8b378f10))
+
+
+### Features
+
+- **frontend:** Implement notification settings with separate drawers and improved design. ([c332642e](https://github.com/elisiariocouto/leggen/commit/c332642e648cb0a29100b500c03e17ae322845f8))
+
+
+
+## 2025.9.20 (2025/09/22)
+
+### Features
+
+- **api:** Add sync operations tracking and database storage ([61f95920](https://github.com/elisiariocouto/leggen/commit/61f9592095220f47b758e19a63d70096deb35a92))
+- **frontend:** Rename notifications page to System Status and add sync operations section ([3f2ff21e](https://github.com/elisiariocouto/leggen/commit/3f2ff21eac2c24e04d5957bbd15a6b8a5d0c021d))
+-  Consolidate version display to use health endpoint. ([76a30d23](https://github.com/elisiariocouto/leggen/commit/76a30d23af07466ecfd571e7b7bb6724412652c1))
+
+
+### Refactor
+
+- **frontend:** Reorganize pages with tabbed Settings and focused System page ([65404848](https://github.com/elisiariocouto/leggen/commit/65404848aa27cfcb11a371c194ca533b17cb08ff))
+
+
+
+## 2025.9.20 (2025/09/22)
+
+### Features
+
+- **api:** Add sync operations tracking and database storage ([61f95920](https://github.com/elisiariocouto/leggen/commit/61f9592095220f47b758e19a63d70096deb35a92))
+- **frontend:** Rename notifications page to System Status and add sync operations section ([3f2ff21e](https://github.com/elisiariocouto/leggen/commit/3f2ff21eac2c24e04d5957bbd15a6b8a5d0c021d))
+-  Consolidate version display to use health endpoint. ([76a30d23](https://github.com/elisiariocouto/leggen/commit/76a30d23af07466ecfd571e7b7bb6724412652c1))
+
+
+### Refactor
+
+- **frontend:** Reorganize pages with tabbed Settings and focused System page ([65404848](https://github.com/elisiariocouto/leggen/commit/65404848aa27cfcb11a371c194ca533b17cb08ff))
+
+
+
+## 2025.9.19 (2025/09/21)
+
+### Bug Fixes
+
+- **frontend:** Close mobile sidebar on navigation item click ([dd24a0e0](https://github.com/elisiariocouto/leggen/commit/dd24a0e0d34c3b2ff37bc75b50162768b4d15cc5))
+- **frontend:** Resolve mobile horizontal scroll in Time Period filters ([4ce56fdc](https://github.com/elisiariocouto/leggen/commit/4ce56fdc042b0dbf3442a1ab201392700add90d6))
+
+
+### Features
+
+- **frontend:** Add version display in header near connection status ([340e1a32](https://github.com/elisiariocouto/leggen/commit/340e1a3235916566a4e403e9ec7b82ea799fbffd))
+
+
+
+## 2025.9.19 (2025/09/21)
+
+### Bug Fixes
+
+- **frontend:** Close mobile sidebar on navigation item click ([dd24a0e0](https://github.com/elisiariocouto/leggen/commit/dd24a0e0d34c3b2ff37bc75b50162768b4d15cc5))
+- **frontend:** Resolve mobile horizontal scroll in Time Period filters ([4ce56fdc](https://github.com/elisiariocouto/leggen/commit/4ce56fdc042b0dbf3442a1ab201392700add90d6))
+
+
+### Features
+
+- **frontend:** Add version display in header near connection status ([340e1a32](https://github.com/elisiariocouto/leggen/commit/340e1a3235916566a4e403e9ec7b82ea799fbffd))
+
+
+
+## 2025.9.18 (2025/09/19)
+
+### Documentation
+
+-  Add instructions for shadcn/ui. ([83bb3fce](https://github.com/elisiariocouto/leggen/commit/83bb3fcef20d21a210bc53ce77aa533d37771668))
+
+
+### Features
+
+- **frontend:** Transform layout to use shadcn dashboard-01 with iOS PWA safe area support. ([fbb9e332](https://github.com/elisiariocouto/leggen/commit/fbb9e33279028a6a7ccf46c3696a012ec16a9ca7))
+
+
+
+## 2025.9.18 (2025/09/19)
+
+### Documentation
+
+-  Add instructions for shadcn/ui. ([83bb3fce](https://github.com/elisiariocouto/leggen/commit/83bb3fcef20d21a210bc53ce77aa533d37771668))
+
+
+### Features
+
+- **frontend:** Transform layout to use shadcn dashboard-01 with iOS PWA safe area support. ([fbb9e332](https://github.com/elisiariocouto/leggen/commit/fbb9e33279028a6a7ccf46c3696a012ec16a9ca7))
+
+
+
+## 2025.9.17 (2025/09/18)
+
+### Bug Fixes
+
+- **api:** Prevent duplicate notifications for existing transactions during sync. ([25747d7d](https://github.com/elisiariocouto/leggen/commit/25747d7d372e291090764a6814f9d8d0b76aea3b))
+
+
+### Miscellaneous Tasks
+
+-  Format files. ([848eccb3](https://github.com/elisiariocouto/leggen/commit/848eccb35b910c8121d15611547dca8da0b12756))
+
+
+
+## 2025.9.17 (2025/09/18)
+
+### Bug Fixes
+
+- **api:** Prevent duplicate notifications for existing transactions during sync. ([25747d7d](https://github.com/elisiariocouto/leggen/commit/25747d7d372e291090764a6814f9d8d0b76aea3b))
+
+
+### Miscellaneous Tasks
+
+-  Format files. ([848eccb3](https://github.com/elisiariocouto/leggen/commit/848eccb35b910c8121d15611547dca8da0b12756))
+
+
+
+## 2025.9.16 (2025/09/18)
+
+### Bug Fixes
+
+- **frontend:** Add iOS safe area support for PWA sticky header ([6589c2dd](https://github.com/elisiariocouto/leggen/commit/6589c2dd666f8605cf6d1bf9ad7277734d4cd302))
+
+
+
+## 2025.9.16 (2025/09/18)
+
+### Bug Fixes
+
+- **frontend:** Add iOS safe area support for PWA sticky header ([6589c2dd](https://github.com/elisiariocouto/leggen/commit/6589c2dd666f8605cf6d1bf9ad7277734d4cd302))
+
+
+
+## 2025.9.15 (2025/09/18)
+
+### Features
+
+- **frontend:** Add settings page with account management functionality. ([056c33b9](https://github.com/elisiariocouto/leggen/commit/056c33b9c5cfbc2842cc2dd4ca8c4e3959a2be80))
+
+
+### Refactor
+
+- **frontend:** Simplify filter bar UI and remove advanced filters popover. ([be4f7f8c](https://github.com/elisiariocouto/leggen/commit/be4f7f8cecfe2564abdf0ce1be08497e5a6d7b68))
+
+
+
+## 2025.9.15 (2025/09/18)
+
+### Features
+
+- **frontend:** Add settings page with account management functionality. ([056c33b9](https://github.com/elisiariocouto/leggen/commit/056c33b9c5cfbc2842cc2dd4ca8c4e3959a2be80))
+
+
+### Refactor
+
+- **frontend:** Simplify filter bar UI and remove advanced filters popover. ([be4f7f8c](https://github.com/elisiariocouto/leggen/commit/be4f7f8cecfe2564abdf0ce1be08497e5a6d7b68))
+
+
+
 ## 2025.9.14 (2025/09/18)
 
 ### Bug Fixes

CONTRIBUTING.md

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

README.md

@@ -20,6 +20,7 @@ Having your bank data accessible through both CLI and REST API gives you the pow
   - [React](https://reactjs.org/): Modern web interface with TypeScript
   - [Vite](https://vitejs.dev/): Fast build tool and development server
   - [Tailwind CSS](https://tailwindcss.com/): Utility-first CSS framework
+  - [shadcn/ui](https://ui.shadcn.com/): Modern component system built on Radix UI
   - [TanStack Query](https://tanstack.com/query): Powerful data synchronization for React
 
 ## ✨ Features

frontend/index.html

@@ -4,11 +4,17 @@
     <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" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <title>Leggen</title>
 
     <!-- PWA Meta Tags -->
-    <meta name="description" content="Personal finance management application" />
+    <meta
+      name="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" />
@@ -21,8 +27,16 @@
 
     <!-- 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" />
+    <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" />

frontend/package.json

@@ -10,11 +10,26 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tabler/icons-react": "^3.35.0",
     "@tailwindcss/forms": "^0.5.10",
     "@tanstack/react-query": "^5.87.1",
     "@tanstack/react-router": "^1.131.36",
@@ -27,15 +42,18 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.542.0",
+    "next-themes": "^0.4.6",
     "postcss": "^8.5.6",
     "react": "^19.1.1",
     "react-day-picker": "^9.10.0",
     "react-dom": "^19.1.1",
-    "recharts": "^3.2.0",
+    "recharts": "^2.15.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^3.4.17",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
+    "zod": "^3.25.76"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
@@ -48,6 +66,7 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
+    "shadcn": "^3.3.1",
     "sharp": "^0.34.3",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.39.1",

frontend/public/browserconfig.xml

@@ -6,4 +6,4 @@
       <TileColor>#3B82F6</TileColor>
     </tile>
   </msapplication>
-</browserconfig>
+</browserconfig>

frontend/public/robots.txt

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

frontend/pwa-assets.config.json

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

frontend/src/components/AccountSettings.tsx

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

frontend/src/components/AppSidebar.tsx

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

frontend/src/components/DiscordConfigDrawer.tsx

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

frontend/src/components/NotificationFiltersDrawer.tsx

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

frontend/src/components/Notifications.tsx

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

frontend/src/components/PWAPrompts.tsx

@@ -3,7 +3,7 @@ import { X, Download, RotateCcw } from "lucide-react";
 
 interface BeforeInstallPromptEvent extends Event {
   prompt(): Promise<void>;
-  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
+  userChoice: Promise<{ outcome: "accepted" | "dismissed" }>;
 }
 
 interface PWAPromptProps {
@@ -11,7 +11,8 @@ interface PWAPromptProps {
 }
 
 export function PWAInstallPrompt({ onInstall }: PWAPromptProps) {
-  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
+  const [deferredPrompt, setDeferredPrompt] =
+    useState<BeforeInstallPromptEvent | null>(null);
   const [showPrompt, setShowPrompt] = useState(false);
 
   useEffect(() => {
@@ -33,11 +34,11 @@ export function PWAInstallPrompt({ onInstall }: PWAPromptProps) {
     try {
       await deferredPrompt.prompt();
       const { outcome } = await deferredPrompt.userChoice;
-      
+
       if (outcome === "accepted") {
         onInstall?.();
       }
-      
+
       setDeferredPrompt(null);
       setShowPrompt(false);
     } catch (error) {
@@ -96,7 +97,10 @@ interface PWAUpdatePromptProps {
   onUpdate: () => void;
 }
 
-export function PWAUpdatePrompt({ updateAvailable, onUpdate }: PWAUpdatePromptProps) {
+export function PWAUpdatePrompt({
+  updateAvailable,
+  onUpdate,
+}: PWAUpdatePromptProps) {
   const [showPrompt, setShowPrompt] = useState(false);
 
   useEffect(() => {
@@ -153,4 +157,4 @@ export function PWAUpdatePrompt({ updateAvailable, onUpdate }: PWAUpdatePromptPr
       </div>
     </div>
   );
-}
+}

frontend/src/components/Settings.tsx

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

frontend/src/components/Sidebar.tsx

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

frontend/src/components/SiteHeader.tsx

@@ -1,21 +1,20 @@
 import { useLocation } from "@tanstack/react-router";
-import { Menu, Activity, Wifi, WifiOff } from "lucide-react";
+import { Activity, Wifi, WifiOff } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 import { apiClient } from "../lib/api";
 import { ThemeToggle } from "./ui/theme-toggle";
+import { Separator } from "./ui/separator";
+import { SidebarTrigger } from "./ui/sidebar";
 
 const navigation = [
   { name: "Overview", to: "/" },
   { name: "Transactions", to: "/transactions" },
   { name: "Analytics", to: "/analytics" },
-  { name: "Notifications", to: "/notifications" },
+  { name: "System", to: "/system" },
+  { name: "Settings", to: "/settings" },
 ];
 
-interface HeaderProps {
-  setSidebarOpen: (open: boolean) => void;
-}
-
-export default function Header({ setSidebarOpen }: HeaderProps) {
+export function SiteHeader() {
   const location = useLocation();
   const currentPage =
     navigation.find((item) => item.to === location.pathname)?.name ||
@@ -31,21 +30,35 @@ export default function Header({ setSidebarOpen }: HeaderProps) {
     refetchInterval: 30000,
   });
 
+
+
   return (
-    <header className="bg-card shadow-sm border-b border-border">
-      <div className="flex items-center justify-between h-16 px-6">
-        <div className="flex items-center">
-          <button
-            onClick={() => setSidebarOpen(true)}
-            className="lg:hidden p-1 rounded-md text-muted-foreground hover:text-foreground"
-          >
-            <Menu className="h-6 w-6" />
-          </button>
-          <h2 className="text-lg font-semibold text-card-foreground lg:ml-0 ml-4">
-            {currentPage}
-          </h2>
-        </div>
-        <div className="flex items-center space-x-3">
+    <header className="flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear pt-safe-top">
+      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+        <SidebarTrigger className="-ml-1" />
+        <Separator
+          orientation="vertical"
+          className="mx-2 data-[orientation=vertical]:h-4"
+        />
+        <h1 className="text-lg font-semibold text-card-foreground">
+          {currentPage}
+        </h1>
+
+        <div className="ml-auto flex items-center space-x-3">
+          {/* Version display */}
+          <div className="flex items-center space-x-1">
+            {healthLoading ? (
+              <span className="text-xs text-muted-foreground">v...</span>
+            ) : healthError || !healthStatus ? (
+              <span className="text-xs text-muted-foreground">v?</span>
+            ) : (
+              <span className="text-xs text-muted-foreground">
+                v{healthStatus.version || "?"}
+              </span>
+            )}
+          </div>
+
+          {/* Connection status */}
           <div className="flex items-center space-x-1">
             {healthLoading ? (
               <>

frontend/src/components/System.tsx

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

frontend/src/components/TelegramConfigDrawer.tsx

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

frontend/src/components/TransactionsTable.tsx

@@ -28,7 +28,7 @@ import FiltersSkeleton from "./FiltersSkeleton";
 import RawTransactionModal from "./RawTransactionModal";
 import { FilterBar, type FilterState } from "./filters";
 import { DataTablePagination } from "./ui/data-table-pagination";
-import { Card, CardContent } from "./ui/card";
+import { Card } from "./ui/card";
 import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
 import { Button } from "./ui/button";
 import type { Account, Transaction, ApiResponse } from "../types/api";
@@ -40,8 +40,6 @@ export default function TransactionsTable() {
     selectedAccount: "",
     startDate: "",
     endDate: "",
-    minAmount: "",
-    maxAmount: "",
   });
 
   const [showRawModal, setShowRawModal] = useState(false);
@@ -73,8 +71,6 @@ export default function TransactionsTable() {
       selectedAccount: "",
       startDate: "",
       endDate: "",
-      minAmount: "",
-      maxAmount: "",
     });
     setColumnFilters([]);
     setCurrentPage(1);
@@ -101,7 +97,6 @@ export default function TransactionsTable() {
     queryFn: apiClient.getAccounts,
   });
 
-
   const {
     data: transactionsResponse,
     isLoading: transactionsLoading,
@@ -116,8 +111,6 @@ export default function TransactionsTable() {
       currentPage,
       perPage,
       debouncedSearchTerm,
-      filterState.minAmount,
-      filterState.maxAmount,
     ],
     queryFn: () =>
       apiClient.getTransactions({
@@ -128,12 +121,6 @@ export default function TransactionsTable() {
         perPage: perPage,
         search: debouncedSearchTerm || undefined,
         summaryOnly: false,
-        minAmount: filterState.minAmount
-          ? parseFloat(filterState.minAmount)
-          : undefined,
-        maxAmount: filterState.maxAmount
-          ? parseFloat(filterState.maxAmount)
-          : undefined,
       }),
   });
 
@@ -153,13 +140,7 @@ export default function TransactionsTable() {
   // Reset pagination when filters change
   useEffect(() => {
     setCurrentPage(1);
-  }, [
-    filterState.selectedAccount,
-    filterState.startDate,
-    filterState.endDate,
-    filterState.minAmount,
-    filterState.maxAmount,
-  ]);
+  }, [filterState.selectedAccount, filterState.startDate, filterState.endDate]);
 
   const handleViewRaw = (transaction: Transaction) => {
     setSelectedTransaction(transaction);
@@ -175,10 +156,7 @@ export default function TransactionsTable() {
     filterState.searchTerm ||
     filterState.selectedAccount ||
     filterState.startDate ||
-    filterState.endDate ||
-    filterState.minAmount ||
-    filterState.maxAmount;
-
+    filterState.endDate;
 
   // Define columns
   const columns: ColumnDef<Transaction>[] = [
@@ -212,8 +190,7 @@ export default function TransactionsTable() {
               <div className="text-xs text-muted-foreground space-y-1">
                 {account && (
                   <p className="truncate">
-                    {account.name || "Unnamed Account"} •{" "}
-                    {account.institution_id}
+                    {account.display_name || "Unnamed Account"}
                   </p>
                 )}
                 {(transaction.creditor_name || transaction.debtor_name) && (
@@ -372,38 +349,6 @@ export default function TransactionsTable() {
         isSearchLoading={isSearchLoading}
       />
 
-      {/* Results Summary */}
-      <Card>
-        <CardContent className="px-6 py-3 bg-muted/30 border-b border-border">
-          <p className="text-sm text-muted-foreground">
-            Showing {transactions.length} transaction
-            {transactions.length !== 1 ? "s" : ""} (
-            {pagination ? (
-              <>
-                {(pagination.page - 1) * pagination.per_page + 1}-
-                {Math.min(
-                  pagination.page * pagination.per_page,
-                  pagination.total,
-                )}{" "}
-                of {pagination.total}
-              </>
-            ) : (
-              "loading..."
-            )}
-            )
-            {filterState.selectedAccount && accounts && (
-              <span className="ml-1">
-                for{" "}
-                {
-                  accounts.find((acc) => acc.id === filterState.selectedAccount)
-                    ?.name
-                }
-              </span>
-            )}
-          </p>
-        </CardContent>
-      </Card>
-
       {/* Responsive Table/Cards */}
       <Card>
         {/* Desktop Table View (hidden on mobile) */}
@@ -475,10 +420,7 @@ export default function TransactionsTable() {
                 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"
-                      >
+                      <td key={cell.id} className="px-6 py-4 whitespace-nowrap">
                         {flexRender(
                           cell.column.columnDef.cell,
                           cell.getContext(),
@@ -543,8 +485,7 @@ export default function TransactionsTable() {
                             <div className="text-xs text-muted-foreground space-y-1 mt-1">
                               {account && (
                                 <p className="break-words">
-                                  {account.name || "Unnamed Account"} •{" "}
-                                  {account.institution_id}
+                                  {account.display_name || "Unnamed Account"}
                                 </p>
                               )}
                               {(transaction.creditor_name ||

frontend/src/components/analytics/StatCard.tsx

@@ -29,13 +29,9 @@ export default function StatCard({
       <CardContent className="p-6">
         <div className="flex items-center justify-between">
           <div>
-            <p className="text-sm font-medium text-muted-foreground">
-              {title}
-            </p>
+            <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>
+              <p className="text-2xl font-bold text-foreground">{value}</p>
               {trend && (
                 <div
                   className={cn(
@@ -51,29 +47,31 @@ export default function StatCard({
               )}
             </div>
             {subtitle && (
-              <p className="text-sm text-muted-foreground mt-1">
-                {subtitle}
-              </p>
+              <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
+            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>

frontend/src/components/analytics/TimePeriodFilter.tsx

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

frontend/src/components/filters/AccountCombobox.tsx

@@ -51,7 +51,7 @@ export function AccountCombobox({
             variant="outline"
             role="combobox"
             aria-expanded={open}
-            className="justify-between"
+            className="w-full justify-between"
           >
             <div className="flex items-center">
               <Building2 className="mr-2 h-4 w-4" />

frontend/src/components/filters/ActiveFilterChips.tsx

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

frontend/src/components/filters/AdvancedFiltersPopover.tsx

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

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

frontend/src/components/filters/FilterBar.tsx

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

frontend/src/components/filters/index.ts

@@ -2,5 +2,4 @@ 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/drawer.tsx

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

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

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

frontend/src/components/ui/logo.tsx

@@ -15,7 +15,9 @@ export function Logo({ className = "", size = 32 }: LogoProps) {
       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>
+      <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">

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

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

frontend/src/components/ui/separator.tsx

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

frontend/src/components/ui/sheet.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva, type VariantProps } from "class-variance-authority";
@@ -29,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 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",
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
   {
     variants: {
       side: {
@@ -38,7 +40,7 @@ const sheetVariants = cva(
           "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",
+          "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: {
@@ -62,11 +64,11 @@ const SheetContent = React.forwardRef<
       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>
+      {children}
     </SheetPrimitive.Content>
   </SheetPortal>
 ));

frontend/src/components/ui/sidebar.tsx

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

frontend/src/components/ui/skeleton.tsx

@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("animate-pulse rounded-md bg-muted", className)}
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
       {...props}
     />
   );

frontend/src/components/ui/switch.tsx

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

frontend/src/components/ui/tabs.tsx

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

frontend/src/components/ui/tooltip.tsx

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

frontend/src/contexts/ThemeContext.tsx

@@ -51,22 +51,29 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
       const themeColor = THEME_COLORS[resolvedTheme];
 
       // Update theme-color meta tag
-      const themeColorMeta = document.getElementById("theme-color-meta") as HTMLMetaElement;
+      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;
+      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;
+      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";
+        appleStatusBarMeta.content =
+          resolvedTheme === "dark" ? "black-translucent" : "default";
       }
     };
 

frontend/src/hooks/use-mobile.tsx

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

frontend/src/hooks/usePWA.ts

@@ -7,26 +7,30 @@ interface PWAUpdate {
 
 export function usePWA(): PWAUpdate {
   const [updateAvailable, setUpdateAvailable] = useState(false);
-  const [updateSW, setUpdateSW] = useState<() => Promise<void>>(() => async () => {});
+  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");
-          },
+      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");
         });
-      }).catch(() => {
-        // PWA not available in development mode or when disabled
-        console.log("PWA registration not available");
-      });
     }
   }, []);
 
@@ -34,4 +38,4 @@ export function usePWA(): PWAUpdate {
     updateAvailable,
     updateSW,
   };
-}
+}

frontend/src/index.css

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

frontend/src/lib/api.ts

@@ -12,6 +12,7 @@ import type {
   HealthData,
   AccountUpdate,
   TransactionStats,
+  SyncOperationsResponse,
 } from "../types/api";
 
 // Use VITE_API_URL for development, relative URLs for production
@@ -167,6 +168,8 @@ export const apiClient = {
     return response.data.data;
   },
 
+
+
   // Analytics endpoints
   getTransactionStats: async (days?: number): Promise<TransactionStats> => {
     const queryParams = new URLSearchParams();
@@ -217,6 +220,17 @@ export const apiClient = {
     >(`/transactions/monthly-stats?${queryParams.toString()}`);
     return response.data.data;
   },
+
+  // Get sync operations history
+  getSyncOperations: async (
+    limit: number = 50,
+    offset: number = 0,
+  ): Promise<SyncOperationsResponse> => {
+    const response = await api.get<ApiResponse<SyncOperationsResponse>>(
+      `/sync/operations?limit=${limit}&offset=${offset}`,
+    );
+    return response.data.data;
+  },
 };
 
 export default apiClient;

frontend/src/routeTree.gen.ts

@@ -10,6 +10,8 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as TransactionsRouteImport } from './routes/transactions'
+import { Route as SystemRouteImport } from './routes/system'
+import { Route as SettingsRouteImport } from './routes/settings'
 import { Route as NotificationsRouteImport } from './routes/notifications'
 import { Route as AnalyticsRouteImport } from './routes/analytics'
 import { Route as IndexRouteImport } from './routes/index'
@@ -19,6 +21,16 @@ const TransactionsRoute = TransactionsRouteImport.update({
   path: '/transactions',
   getParentRoute: () => rootRouteImport,
 } as any)
+const SystemRoute = SystemRouteImport.update({
+  id: '/system',
+  path: '/system',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const SettingsRoute = SettingsRouteImport.update({
+  id: '/settings',
+  path: '/settings',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const NotificationsRoute = NotificationsRouteImport.update({
   id: '/notifications',
   path: '/notifications',
@@ -39,12 +51,16 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/analytics': typeof AnalyticsRoute
   '/notifications': typeof NotificationsRoute
+  '/settings': typeof SettingsRoute
+  '/system': typeof SystemRoute
   '/transactions': typeof TransactionsRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/analytics': typeof AnalyticsRoute
   '/notifications': typeof NotificationsRoute
+  '/settings': typeof SettingsRoute
+  '/system': typeof SystemRoute
   '/transactions': typeof TransactionsRoute
 }
 export interface FileRoutesById {
@@ -52,20 +68,43 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/analytics': typeof AnalyticsRoute
   '/notifications': typeof NotificationsRoute
+  '/settings': typeof SettingsRoute
+  '/system': typeof SystemRoute
   '/transactions': typeof TransactionsRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/analytics' | '/notifications' | '/transactions'
+  fullPaths:
+    | '/'
+    | '/analytics'
+    | '/notifications'
+    | '/settings'
+    | '/system'
+    | '/transactions'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/analytics' | '/notifications' | '/transactions'
-  id: '__root__' | '/' | '/analytics' | '/notifications' | '/transactions'
+  to:
+    | '/'
+    | '/analytics'
+    | '/notifications'
+    | '/settings'
+    | '/system'
+    | '/transactions'
+  id:
+    | '__root__'
+    | '/'
+    | '/analytics'
+    | '/notifications'
+    | '/settings'
+    | '/system'
+    | '/transactions'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   AnalyticsRoute: typeof AnalyticsRoute
   NotificationsRoute: typeof NotificationsRoute
+  SettingsRoute: typeof SettingsRoute
+  SystemRoute: typeof SystemRoute
   TransactionsRoute: typeof TransactionsRoute
 }
 
@@ -78,6 +117,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof TransactionsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/system': {
+      id: '/system'
+      path: '/system'
+      fullPath: '/system'
+      preLoaderRoute: typeof SystemRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/settings': {
+      id: '/settings'
+      path: '/settings'
+      fullPath: '/settings'
+      preLoaderRoute: typeof SettingsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/notifications': {
       id: '/notifications'
       path: '/notifications'
@@ -106,6 +159,8 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AnalyticsRoute: AnalyticsRoute,
   NotificationsRoute: NotificationsRoute,
+  SettingsRoute: SettingsRoute,
+  SystemRoute: SystemRoute,
   TransactionsRoute: TransactionsRoute,
 }
 export const routeTree = rootRouteImport

frontend/src/routes/__root.tsx

@@ -1,12 +1,11 @@
 import { createRootRoute, Outlet } from "@tanstack/react-router";
-import { useState } from "react";
-import Sidebar from "../components/Sidebar";
-import Header from "../components/Header";
+import { AppSidebar } from "../components/AppSidebar";
+import { SiteHeader } from "../components/SiteHeader";
 import { PWAInstallPrompt, PWAUpdatePrompt } from "../components/PWAPrompts";
 import { usePWA } from "../hooks/usePWA";
+import { SidebarInset, SidebarProvider } from "../components/ui/sidebar";
 
 function RootLayout() {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
   const { updateAvailable, updateSW } = usePWA();
 
   const handlePWAInstall = () => {
@@ -23,23 +22,21 @@ function RootLayout() {
   };
 
   return (
-    <div className="flex min-h-screen bg-background">
-      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-
-      {/* Mobile overlay */}
-      {sidebarOpen && (
-        <div
-          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
-          onClick={() => setSidebarOpen(false)}
-        />
-      )}
-
-      <div className="flex flex-col flex-1">
-        <Header setSidebarOpen={setSidebarOpen} />
-        <main className="flex-1 p-6">
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "16rem",
+          "--header-height": "4rem",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar />
+      <SidebarInset>
+        <SiteHeader />
+        <main className="flex-1 p-6 min-w-0">
           <Outlet />
         </main>
-      </div>
+      </SidebarInset>
 
       {/* PWA Prompts */}
       <PWAInstallPrompt onInstall={handlePWAInstall} />
@@ -47,7 +44,7 @@ function RootLayout() {
         updateAvailable={updateAvailable}
         onUpdate={handlePWAUpdate}
       />
-    </div>
+    </SidebarProvider>
   );
 }
 

frontend/src/routes/analytics.tsx

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

frontend/src/routes/index.tsx

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

frontend/src/routes/notifications.tsx

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

frontend/src/routes/settings.tsx

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

frontend/src/routes/system.tsx

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

frontend/src/types/api.ts

@@ -13,6 +13,7 @@ export interface Account {
   name?: string;
   display_name?: string;
   currency?: string;
+  logo?: string;
   created: string;
   last_accessed?: string;
   balances: AccountBalance[];
@@ -197,10 +198,17 @@ export interface NotificationServicesResponse {
 export interface HealthData {
   status: string;
   config_loaded?: boolean;
+  version?: string;
   message?: string;
   error?: string;
 }
 
+// Version information from root endpoint
+export interface VersionData {
+  message: string;
+  version: string;
+}
+
 // Analytics data types
 export interface TransactionStats {
   period_days: number;
@@ -213,3 +221,24 @@ export interface TransactionStats {
   average_transaction: number;
   accounts_included: number;
 }
+
+// Sync operations types
+export interface SyncOperation {
+  id: number;
+  started_at: string;
+  completed_at?: string;
+  success?: boolean;
+  accounts_processed: number;
+  transactions_added: number;
+  transactions_updated: number;
+  balances_updated: number;
+  duration_seconds?: number;
+  errors: string[];
+  logs: string[];
+  trigger_type: "manual" | "scheduled" | "api";
+}
+
+export interface SyncOperationsResponse {
+  operations: SyncOperation[];
+  count: number;
+}

frontend/tailwind.config.js

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

frontend/vite.config.ts

@@ -10,7 +10,12 @@ export default defineConfig({
     react(),
     VitePWA({
       registerType: "autoUpdate",
-      includeAssets: ["favicon.ico", "apple-touch-icon-180x180.png", "maskable-icon-512x512.png", "robots.txt"],
+      includeAssets: [
+        "favicon.ico",
+        "apple-touch-icon-180x180.png",
+        "maskable-icon-512x512.png",
+        "robots.txt",
+      ],
       manifest: {
         name: "Leggen",
         short_name: "Leggen",
@@ -28,38 +33,38 @@ export default defineConfig({
             short_name: "Transactions",
             description: "View and manage transactions",
             url: "/transactions",
-            icons: [{ src: "/pwa-192x192.png", sizes: "192x192" }]
+            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-192x192.png", sizes: "192x192" }],
+          },
         ],
         icons: [
           {
             src: "pwa-64x64.png",
             sizes: "64x64",
-            type: "image/png"
+            type: "image/png",
           },
           {
             src: "pwa-192x192.png",
             sizes: "192x192",
-            type: "image/png"
+            type: "image/png",
           },
           {
             src: "pwa-512x512.png",
             sizes: "512x512",
-            type: "image/png"
+            type: "image/png",
           },
           {
             src: "maskable-icon-512x512.png",
             sizes: "512x512",
             type: "image/png",
-            purpose: "maskable"
-          }
+            purpose: "maskable",
+          },
         ],
       },
       workbox: {

leggen/api/models/accounts.py

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

leggen/api/models/sync.py

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

leggen/api/routes/accounts.py

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

leggen/api/routes/banks.py

@@ -21,14 +21,15 @@ async def get_bank_institutions(
 ) -> APIResponse:
     """Get available bank institutions for a country"""
     try:
-        institutions_data = await gocardless_service.get_institutions(country)
+        institutions_response = await gocardless_service.get_institutions(country)
+        institutions_data = institutions_response.get("results", [])
 
         institutions = [
             BankInstitution(
                 id=inst["id"],
                 name=inst["name"],
                 bic=inst.get("bic"),
-                transaction_total_days=inst["transaction_total_days"],
+                transaction_total_days=int(inst["transaction_total_days"]),
                 countries=inst["countries"],
                 logo=inst.get("logo"),
             )

leggen/api/routes/sync.py

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

leggen/background/scheduler.py

@@ -112,7 +112,7 @@ class BackgroundScheduler:
 
             # Send notification about the failure
             try:
-                await self.notification_service.send_expiry_notification(
+                await self.notification_service.send_sync_failure_notification(
                     {
                         "type": "sync_failure",
                         "error": str(e),
@@ -145,7 +145,7 @@ class BackgroundScheduler:
                 logger.error("Maximum retries exceeded for sync job")
                 # Send final failure notification
                 try:
-                    await self.notification_service.send_expiry_notification(
+                    await self.notification_service.send_sync_failure_notification(
                         {
                             "type": "sync_final_failure",
                             "error": str(e),

leggen/commands/server.py

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

leggen/notifications/discord.py

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

leggen/notifications/telegram.py

@@ -79,3 +79,38 @@ def send_transaction_message(ctx: click.Context, transactions: list):
         res.raise_for_status()
     except Exception as e:
         raise Exception(f"Telegram notification failed: {e}\n{res.text}") from e
+
+
+def send_sync_failure_notification(ctx: click.Context, notification: dict):
+    token = ctx.obj["notifications"]["telegram"]["token"]
+    chat_id = ctx.obj["notifications"]["telegram"]["chat_id"]
+    bot_url = f"https://api.telegram.org/bot{token}/sendMessage"
+    info("Sending sync failure notification to Telegram")
+
+    message = "*🚨 [Leggen](https://github.com/elisiariocouto/leggen)*\n"
+    message += "*Sync Failed*\n\n"
+    message += escape_markdown(f"Error: {notification['error']}\n")
+
+    if notification.get("type") == "sync_final_failure":
+        message += escape_markdown(
+            f"❌ Final failure after {notification['retry_count']} attempts\n"
+        )
+    else:
+        message += escape_markdown(
+            f"🔄 Attempt {notification['retry_count']}/{notification['max_retries']}\n"
+        )
+        message += escape_markdown("Will retry automatically...\n")
+
+    res = requests.post(
+        bot_url,
+        json={
+            "chat_id": chat_id,
+            "text": message,
+            "parse_mode": "MarkdownV2",
+        },
+    )
+
+    try:
+        res.raise_for_status()
+    except Exception as e:
+        raise Exception(f"Telegram notification failed: {e}\n{res.text}") from e

leggen/services/database_service.py

@@ -216,6 +216,8 @@ class DatabaseService:
         await self._migrate_null_transaction_ids_if_needed()
         await self._migrate_to_composite_key_if_needed()
         await self._migrate_add_display_name_if_needed()
+        await self._migrate_add_sync_operations_if_needed()
+        await self._migrate_add_logo_if_needed()
 
     async def _migrate_balance_timestamps_if_needed(self):
         """Check and migrate balance timestamps if needed"""
@@ -693,7 +695,7 @@ class DatabaseService:
 
             # Add the display_name column
             cursor.execute("""
-                ALTER TABLE accounts 
+                ALTER TABLE accounts
                 ADD COLUMN display_name TEXT
             """)
 
@@ -857,6 +859,14 @@ class DatabaseService:
 
             for transaction in transactions:
                 try:
+                    # Check if transaction already exists before insertion
+                    cursor.execute(
+                        """SELECT COUNT(*) FROM transactions
+                           WHERE accountId = ? AND transactionId = ?""",
+                        (transaction["accountId"], transaction["transactionId"]),
+                    )
+                    exists = cursor.fetchone()[0] > 0
+
                     cursor.execute(
                         insert_sql,
                         (
@@ -873,7 +883,11 @@ class DatabaseService:
                             json.dumps(transaction["rawTransaction"]),
                         ),
                     )
-                    new_transactions.append(transaction)
+
+                    # Only add to new_transactions if it didn't exist before
+                    if not exists:
+                        new_transactions.append(transaction)
+
                 except sqlite3.IntegrityError as e:
                     logger.warning(
                         f"Failed to insert transaction {transaction.get('transactionId')}: {e}"
@@ -1120,7 +1134,8 @@ class DatabaseService:
             created DATETIME,
             last_accessed DATETIME,
             last_updated DATETIME,
-            display_name TEXT
+            display_name TEXT,
+            logo TEXT
         )"""
         )
 
@@ -1157,8 +1172,9 @@ class DatabaseService:
                 created,
                 last_accessed,
                 last_updated,
-                display_name
-            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)""",
+                display_name,
+                logo
+            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)""",
                 (
                     account_data["id"],
                     account_data["institution_id"],
@@ -1170,6 +1186,7 @@ class DatabaseService:
                     account_data.get("last_accessed"),
                     account_data.get("last_updated", account_data["created"]),
                     display_name,
+                    account_data.get("logo"),
                 ),
             )
             conn.commit()
@@ -1415,3 +1432,265 @@ class DatabaseService:
         except Exception as e:
             conn.close()
             raise e
+
+    async def _check_sync_operations_migration_needed(self) -> bool:
+        """Check if sync_operations table needs to be created"""
+        db_path = path_manager.get_database_path()
+        if not db_path.exists():
+            return False
+
+        try:
+            conn = sqlite3.connect(str(db_path))
+            cursor = conn.cursor()
+
+            # Check if sync_operations table exists
+            cursor.execute(
+                "SELECT name FROM sqlite_master WHERE type='table' AND name='sync_operations'"
+            )
+            table_exists = cursor.fetchone() is not None
+
+            conn.close()
+            return not table_exists
+
+        except Exception as e:
+            logger.error(f"Failed to check sync_operations migration status: {e}")
+            return False
+
+    async def _migrate_add_sync_operations(self):
+        """Add sync_operations table"""
+        db_path = path_manager.get_database_path()
+        if not db_path.exists():
+            logger.warning("Database file not found, skipping migration")
+            return
+
+        try:
+            conn = sqlite3.connect(str(db_path))
+            cursor = conn.cursor()
+
+            logger.info("Creating sync_operations table...")
+
+            # Create the sync_operations table
+            cursor.execute("""
+                CREATE TABLE sync_operations (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    started_at DATETIME NOT NULL,
+                    completed_at DATETIME,
+                    success BOOLEAN,
+                    accounts_processed INTEGER DEFAULT 0,
+                    transactions_added INTEGER DEFAULT 0,
+                    transactions_updated INTEGER DEFAULT 0,
+                    balances_updated INTEGER DEFAULT 0,
+                    duration_seconds REAL,
+                    errors TEXT,
+                    logs TEXT,
+                    trigger_type TEXT DEFAULT 'manual'
+                )
+            """)
+
+            # Create indexes for better performance
+            cursor.execute(
+                "CREATE INDEX IF NOT EXISTS idx_sync_operations_started_at ON sync_operations(started_at)"
+            )
+            cursor.execute(
+                "CREATE INDEX IF NOT EXISTS idx_sync_operations_success ON sync_operations(success)"
+            )
+            cursor.execute(
+                "CREATE INDEX IF NOT EXISTS idx_sync_operations_trigger_type ON sync_operations(trigger_type)"
+            )
+
+            conn.commit()
+            conn.close()
+
+            logger.info("Sync operations table migration completed successfully")
+
+        except Exception as e:
+            logger.error(f"Sync operations table migration failed: {e}")
+            raise
+
+    async def _migrate_add_sync_operations_if_needed(self):
+        """Check and add sync_operations table if needed"""
+        try:
+            if await self._check_sync_operations_migration_needed():
+                logger.info("Sync operations table migration needed, starting...")
+                await self._migrate_add_sync_operations()
+                logger.info("Sync operations table migration completed")
+            else:
+                logger.info("Sync operations table already exists")
+        except Exception as e:
+            logger.error(f"Sync operations table migration failed: {e}")
+            raise
+
+    async def _migrate_add_logo_if_needed(self):
+        """Check and add logo column to accounts table if needed"""
+        try:
+            if await self._check_logo_migration_needed():
+                logger.info("Logo column migration needed, starting...")
+                await self._migrate_add_logo()
+                logger.info("Logo column migration completed")
+            else:
+                logger.info("Logo column already exists")
+        except Exception as e:
+            logger.error(f"Logo column migration failed: {e}")
+            raise
+
+    async def _check_logo_migration_needed(self) -> bool:
+        """Check if logo column needs to be added to accounts table"""
+        db_path = path_manager.get_database_path()
+        if not db_path.exists():
+            return False
+
+        try:
+            conn = sqlite3.connect(str(db_path))
+            cursor = conn.cursor()
+
+            # Check if accounts table exists
+            cursor.execute(
+                "SELECT name FROM sqlite_master WHERE type='table' AND name='accounts'"
+            )
+            if not cursor.fetchone():
+                conn.close()
+                return False
+
+            # Check if logo column exists
+            cursor.execute("PRAGMA table_info(accounts)")
+            columns = cursor.fetchall()
+
+            # Check if logo column exists
+            has_logo = any(col[1] == "logo" for col in columns)
+
+            conn.close()
+            return not has_logo
+
+        except Exception as e:
+            logger.error(f"Failed to check logo migration status: {e}")
+            return False
+
+    async def _migrate_add_logo(self):
+        """Add logo column to accounts table"""
+        db_path = path_manager.get_database_path()
+        if not db_path.exists():
+            logger.warning("Database file not found, skipping migration")
+            return
+
+        try:
+            conn = sqlite3.connect(str(db_path))
+            cursor = conn.cursor()
+
+            logger.info("Adding logo column to accounts table...")
+
+            # Add the logo column
+            cursor.execute("""
+                ALTER TABLE accounts
+                ADD COLUMN logo TEXT
+            """)
+
+            conn.commit()
+            conn.close()
+
+            logger.info("Logo column migration completed successfully")
+
+        except Exception as e:
+            logger.error(f"Logo column migration failed: {e}")
+            raise
+
+    async def persist_sync_operation(self, sync_operation: Dict[str, Any]) -> int:
+        """Persist sync operation to database and return the ID"""
+        if not self.sqlite_enabled:
+            logger.warning("SQLite database disabled, cannot persist sync operation")
+            return 0
+
+        try:
+            import json
+            import sqlite3
+
+            db_path = path_manager.get_database_path()
+            conn = sqlite3.connect(str(db_path))
+            cursor = conn.cursor()
+
+            # Insert sync operation
+            cursor.execute(
+                """INSERT INTO sync_operations (
+                    started_at, completed_at, success, accounts_processed,
+                    transactions_added, transactions_updated, balances_updated,
+                    duration_seconds, errors, logs, trigger_type
+                ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)""",
+                (
+                    sync_operation.get("started_at"),
+                    sync_operation.get("completed_at"),
+                    sync_operation.get("success"),
+                    sync_operation.get("accounts_processed", 0),
+                    sync_operation.get("transactions_added", 0),
+                    sync_operation.get("transactions_updated", 0),
+                    sync_operation.get("balances_updated", 0),
+                    sync_operation.get("duration_seconds"),
+                    json.dumps(sync_operation.get("errors", [])),
+                    json.dumps(sync_operation.get("logs", [])),
+                    sync_operation.get("trigger_type", "manual"),
+                ),
+            )
+
+            operation_id = cursor.lastrowid
+            if operation_id is None:
+                raise ValueError("Failed to get operation ID after insert")
+
+            conn.commit()
+            conn.close()
+
+            logger.debug(f"Persisted sync operation with ID: {operation_id}")
+            return operation_id
+
+        except Exception as e:
+            logger.error(f"Failed to persist sync operation: {e}")
+            raise
+
+    async def get_sync_operations(
+        self, limit: int = 50, offset: int = 0
+    ) -> List[Dict[str, Any]]:
+        """Get sync operations from database"""
+        if not self.sqlite_enabled:
+            logger.warning("SQLite database disabled, cannot get sync operations")
+            return []
+
+        try:
+            import json
+            import sqlite3
+
+            db_path = path_manager.get_database_path()
+            conn = sqlite3.connect(str(db_path))
+            cursor = conn.cursor()
+
+            # Get sync operations ordered by started_at descending
+            cursor.execute(
+                """SELECT id, started_at, completed_at, success, accounts_processed,
+                          transactions_added, transactions_updated, balances_updated,
+                          duration_seconds, errors, logs, trigger_type
+                   FROM sync_operations
+                   ORDER BY started_at DESC
+                   LIMIT ? OFFSET ?""",
+                (limit, offset),
+            )
+
+            operations = []
+            for row in cursor.fetchall():
+                operation = {
+                    "id": row[0],
+                    "started_at": row[1],
+                    "completed_at": row[2],
+                    "success": bool(row[3]) if row[3] is not None else None,
+                    "accounts_processed": row[4],
+                    "transactions_added": row[5],
+                    "transactions_updated": row[6],
+                    "balances_updated": row[7],
+                    "duration_seconds": row[8],
+                    "errors": json.loads(row[9]) if row[9] else [],
+                    "logs": json.loads(row[10]) if row[10] else [],
+                    "trigger_type": row[11],
+                }
+                operations.append(operation)
+
+            conn.close()
+            return operations
+
+        except Exception as e:
+            logger.error(f"Failed to get sync operations: {e}")
+            return []

leggen/services/gocardless_service.py

@@ -1,6 +1,6 @@
 import json
 from pathlib import Path
-from typing import Any, Dict, List
+from typing import Any, Dict
 
 import httpx
 from loguru import logger
@@ -11,14 +11,13 @@ from leggen.utils.paths import path_manager
 
 def _log_rate_limits(response):
     """Log GoCardless API rate limit headers"""
-    limit = response.headers.get("X-RateLimit-Limit")
-    remaining = response.headers.get("X-RateLimit-Remaining")
-    reset = response.headers.get("X-RateLimit-Reset")
-    account_success_reset = response.headers.get("X-RateLimit-Account-Success-Reset")
+    limit = response.headers.get("http_x_ratelimit_limit")
+    remaining = response.headers.get("http_x_ratelimit_remaining")
+    reset = response.headers.get("http_x_ratelimit_reset")
 
-    if limit or remaining or reset or account_success_reset:
+    if limit or remaining or reset:
         logger.info(
-            f"GoCardless rate limits - Limit: {limit}, Remaining: {remaining}, Reset: {reset}s, Account Success Reset: {account_success_reset}"
+            f"GoCardless rate limits - Limit: {limit}, Remaining: {remaining}, Reset: {reset}s"
         )
 
 
@@ -30,6 +29,27 @@ class GoCardlessService:
         )
         self._token = None
 
+    async def _make_authenticated_request(
+        self, method: str, url: str, **kwargs
+    ) -> Dict[str, Any]:
+        """Make authenticated request with automatic token refresh on 401"""
+        headers = await self._get_auth_headers()
+
+        async with httpx.AsyncClient() as client:
+            response = await client.request(method, url, headers=headers, **kwargs)
+            _log_rate_limits(response)
+
+            # If we get 401, clear token cache and retry once
+            if response.status_code == 401:
+                logger.warning("Got 401, clearing token cache and retrying")
+                self._token = None
+                headers = await self._get_auth_headers()
+                response = await client.request(method, url, headers=headers, **kwargs)
+                _log_rate_limits(response)
+
+            response.raise_for_status()
+            return response.json()
+
     async def _get_auth_headers(self) -> Dict[str, str]:
         """Get authentication headers for GoCardless API"""
         token = await self._get_token()
@@ -102,74 +122,48 @@ class GoCardlessService:
         with open(auth_file, "w") as f:
             json.dump(auth_data, f)
 
-    async def get_institutions(self, country: str = "PT") -> List[Dict[str, Any]]:
+    async def get_institutions(self, country: str = "PT") -> Dict[str, Any]:
         """Get available bank institutions for a country"""
-        headers = await self._get_auth_headers()
-        async with httpx.AsyncClient() as client:
-            response = await client.get(
-                f"{self.base_url}/institutions/",
-                headers=headers,
-                params={"country": country},
-            )
-            _log_rate_limits(response)
-            response.raise_for_status()
-            return response.json()
+        return await self._make_authenticated_request(
+            "GET", f"{self.base_url}/institutions/", params={"country": country}
+        )
 
     async def create_requisition(
         self, institution_id: str, redirect_url: str
     ) -> Dict[str, Any]:
         """Create a bank connection requisition"""
-        headers = await self._get_auth_headers()
-        async with httpx.AsyncClient() as client:
-            response = await client.post(
-                f"{self.base_url}/requisitions/",
-                headers=headers,
-                json={"institution_id": institution_id, "redirect": redirect_url},
-            )
-            _log_rate_limits(response)
-            response.raise_for_status()
-            return response.json()
+        return await self._make_authenticated_request(
+            "POST",
+            f"{self.base_url}/requisitions/",
+            json={"institution_id": institution_id, "redirect": redirect_url},
+        )
 
     async def get_requisitions(self) -> Dict[str, Any]:
         """Get all requisitions"""
-        headers = await self._get_auth_headers()
-        async with httpx.AsyncClient() as client:
-            response = await client.get(
-                f"{self.base_url}/requisitions/", headers=headers
-            )
-            _log_rate_limits(response)
-            response.raise_for_status()
-            return response.json()
+        return await self._make_authenticated_request(
+            "GET", f"{self.base_url}/requisitions/"
+        )
 
     async def get_account_details(self, account_id: str) -> Dict[str, Any]:
         """Get account details"""
-        headers = await self._get_auth_headers()
-        async with httpx.AsyncClient() as client:
-            response = await client.get(
-                f"{self.base_url}/accounts/{account_id}/", headers=headers
-            )
-            _log_rate_limits(response)
-            response.raise_for_status()
-            return response.json()
+        return await self._make_authenticated_request(
+            "GET", f"{self.base_url}/accounts/{account_id}/"
+        )
 
     async def get_account_balances(self, account_id: str) -> Dict[str, Any]:
         """Get account balances"""
-        headers = await self._get_auth_headers()
-        async with httpx.AsyncClient() as client:
-            response = await client.get(
-                f"{self.base_url}/accounts/{account_id}/balances/", headers=headers
-            )
-            _log_rate_limits(response)
-            response.raise_for_status()
-            return response.json()
+        return await self._make_authenticated_request(
+            "GET", f"{self.base_url}/accounts/{account_id}/balances/"
+        )
 
     async def get_account_transactions(self, account_id: str) -> Dict[str, Any]:
         """Get account transactions"""
-        headers = await self._get_auth_headers()
-        async with httpx.AsyncClient() as client:
-            response = await client.get(
-                f"{self.base_url}/accounts/{account_id}/transactions/", headers=headers
-            )
-            _log_rate_limits(response)
-            response.raise_for_status()
-            return response.json()
+        return await self._make_authenticated_request(
+            "GET", f"{self.base_url}/accounts/{account_id}/transactions/"
+        )
+
+    async def get_institution_details(self, institution_id: str) -> Dict[str, Any]:
+        """Get institution details by ID"""
+        return await self._make_authenticated_request(
+            "GET", f"{self.base_url}/institutions/{institution_id}/"
+        )

leggen/services/notification_service.py

@@ -289,3 +289,69 @@ class NotificationService:
         except Exception as e:
             logger.error(f"Failed to send Telegram expiry notification: {e}")
             raise
+
+    async def send_sync_failure_notification(
+        self, notification_data: Dict[str, Any]
+    ) -> None:
+        """Send notification about sync failure"""
+        if self._is_discord_enabled():
+            await self._send_discord_sync_failure(notification_data)
+
+        if self._is_telegram_enabled():
+            await self._send_telegram_sync_failure(notification_data)
+
+    async def _send_discord_sync_failure(
+        self, notification_data: Dict[str, Any]
+    ) -> None:
+        """Send Discord sync failure notification"""
+        try:
+            import click
+
+            from leggen.notifications.discord import send_sync_failure_notification
+
+            # Create a mock context with the webhook
+            ctx = click.Context(click.Command("sync_failure"))
+            ctx.obj = {
+                "notifications": {
+                    "discord": {
+                        "webhook": self.notifications_config.get("discord", {}).get(
+                            "webhook"
+                        )
+                    }
+                }
+            }
+
+            # Send sync failure notification using the actual implementation
+            send_sync_failure_notification(ctx, notification_data)
+            logger.info(f"Sent Discord sync failure notification: {notification_data}")
+        except Exception as e:
+            logger.error(f"Failed to send Discord sync failure notification: {e}")
+            raise
+
+    async def _send_telegram_sync_failure(
+        self, notification_data: Dict[str, Any]
+    ) -> None:
+        """Send Telegram sync failure notification"""
+        try:
+            import click
+
+            from leggen.notifications.telegram import send_sync_failure_notification
+
+            # Create a mock context with the telegram config
+            ctx = click.Context(click.Command("sync_failure"))
+            telegram_config = self.notifications_config.get("telegram", {})
+            ctx.obj = {
+                "notifications": {
+                    "telegram": {
+                        "token": telegram_config.get("token"),
+                        "chat_id": telegram_config.get("chat_id"),
+                    }
+                }
+            }
+
+            # Send sync failure notification using the actual implementation
+            send_sync_failure_notification(ctx, notification_data)
+            logger.info(f"Sent Telegram sync failure notification: {notification_data}")
+        except Exception as e:
+            logger.error(f"Failed to send Telegram sync failure notification: {e}")
+            raise

leggen/services/sync_service.py

@@ -15,12 +15,15 @@ class SyncService:
         self.database = DatabaseService()
         self.notifications = NotificationService()
         self._sync_status = SyncStatus(is_running=False)
+        self._institution_logos = {}  # Cache for institution logos
 
     async def get_sync_status(self) -> SyncStatus:
         """Get current sync status"""
         return self._sync_status
 
-    async def sync_all_accounts(self, force: bool = False) -> SyncResult:
+    async def sync_all_accounts(
+        self, force: bool = False, trigger_type: str = "manual"
+    ) -> SyncResult:
         """Sync all connected accounts"""
         if self._sync_status.is_running and not force:
             raise Exception("Sync is already running")
@@ -34,9 +37,25 @@ class SyncService:
         transactions_updated = 0
         balances_updated = 0
         errors = []
+        logs = [f"Sync started at {start_time.isoformat()}"]
+
+        # Initialize sync operation record
+        sync_operation = {
+            "started_at": start_time.isoformat(),
+            "trigger_type": trigger_type,
+            "accounts_processed": 0,
+            "transactions_added": 0,
+            "transactions_updated": 0,
+            "balances_updated": 0,
+            "errors": [],
+            "logs": logs,
+        }
+
+        operation_id = None
 
         try:
             logger.info("Starting sync of all accounts")
+            logs.append("Starting sync of all accounts")
 
             # Get all requisitions and accounts
             requisitions = await self.gocardless.get_requisitions()
@@ -46,6 +65,7 @@ class SyncService:
                 all_accounts.update(req.get("accounts", []))
 
             self._sync_status.total_accounts = len(all_accounts)
+            logs.append(f"Found {len(all_accounts)} accounts to sync")
 
             # Process each account
             for account_id in all_accounts:
@@ -58,7 +78,7 @@ class SyncService:
                     # Get balances to extract currency information
                     balances = await self.gocardless.get_account_balances(account_id)
 
-                    # Enrich account details with currency and persist
+                    # Enrich account details with currency and institution logo
                     if account_details and balances:
                         enriched_account_details = account_details.copy()
 
@@ -71,6 +91,26 @@ class SyncService:
                             if currency:
                                 enriched_account_details["currency"] = currency
 
+                        # Get institution details to fetch logo
+                        institution_id = enriched_account_details.get("institution_id")
+                        if institution_id:
+                            try:
+                                institution_details = (
+                                    await self.gocardless.get_institution_details(
+                                        institution_id
+                                    )
+                                )
+                                enriched_account_details["logo"] = (
+                                    institution_details.get("logo", "")
+                                )
+                                logger.info(
+                                    f"Fetched logo for institution {institution_id}: {enriched_account_details.get('logo', 'No logo')}"
+                                )
+                            except Exception as e:
+                                logger.warning(
+                                    f"Failed to fetch institution details for {institution_id}: {e}"
+                                )
+
                         # Persist enriched account details to database
                         await self.database.persist_account_details(
                             enriched_account_details
@@ -118,17 +158,43 @@ class SyncService:
                     self._sync_status.accounts_synced = accounts_processed
 
                     logger.info(f"Synced account {account_id} successfully")
+                    logs.append(f"Synced account {account_id} successfully")
 
                 except Exception as e:
                     error_msg = f"Failed to sync account {account_id}: {str(e)}"
                     errors.append(error_msg)
                     logger.error(error_msg)
+                    logs.append(error_msg)
 
             end_time = datetime.now()
             duration = (end_time - start_time).total_seconds()
 
             self._sync_status.last_sync = end_time
 
+            # Update sync operation with final results
+            sync_operation.update(
+                {
+                    "completed_at": end_time.isoformat(),
+                    "success": len(errors) == 0,
+                    "accounts_processed": accounts_processed,
+                    "transactions_added": transactions_added,
+                    "transactions_updated": transactions_updated,
+                    "balances_updated": balances_updated,
+                    "duration_seconds": duration,
+                    "errors": errors,
+                    "logs": logs,
+                }
+            )
+
+            # Persist sync operation to database
+            try:
+                operation_id = await self.database.persist_sync_operation(
+                    sync_operation
+                )
+                logger.debug(f"Saved sync operation with ID: {operation_id}")
+            except Exception as e:
+                logger.error(f"Failed to persist sync operation: {e}")
+
             result = SyncResult(
                 success=len(errors) == 0,
                 accounts_processed=accounts_processed,
@@ -144,44 +210,67 @@ class SyncService:
             logger.info(
                 f"Sync completed: {accounts_processed} accounts, {transactions_added} new transactions"
             )
+            logs.append(
+                f"Sync completed: {accounts_processed} accounts, {transactions_added} new transactions"
+            )
             return result
 
         except Exception as e:
             error_msg = f"Sync failed: {str(e)}"
             errors.append(error_msg)
+            logs.append(error_msg)
             logger.error(error_msg)
+
+            # Save failed sync operation
+            end_time = datetime.now()
+            duration = (end_time - start_time).total_seconds()
+            sync_operation.update(
+                {
+                    "completed_at": end_time.isoformat(),
+                    "success": False,
+                    "accounts_processed": accounts_processed,
+                    "transactions_added": transactions_added,
+                    "transactions_updated": transactions_updated,
+                    "balances_updated": balances_updated,
+                    "duration_seconds": duration,
+                    "errors": errors,
+                    "logs": logs,
+                }
+            )
+
+            try:
+                operation_id = await self.database.persist_sync_operation(
+                    sync_operation
+                )
+                logger.debug(f"Saved failed sync operation with ID: {operation_id}")
+            except Exception as persist_error:
+                logger.error(
+                    f"Failed to persist failed sync operation: {persist_error}"
+                )
+
             raise
         finally:
             self._sync_status.is_running = False
 
     async def sync_specific_accounts(
-        self, account_ids: List[str], force: bool = False
+        self, account_ids: List[str], force: bool = False, trigger_type: str = "manual"
     ) -> SyncResult:
         """Sync specific accounts"""
         if self._sync_status.is_running and not force:
             raise Exception("Sync is already running")
 
-        # Similar implementation but only for specified accounts
-        # For brevity, implementing a simplified version
-        start_time = datetime.now()
         self._sync_status.is_running = True
 
         try:
-            # Process only specified accounts
-            # Implementation would be similar to sync_all_accounts
-            # but filtered to only the specified account_ids
-
-            end_time = datetime.now()
-            return SyncResult(
-                success=True,
-                accounts_processed=len(account_ids),
-                transactions_added=0,
-                transactions_updated=0,
-                balances_updated=0,
-                duration_seconds=(end_time - start_time).total_seconds(),
-                errors=[],
-                started_at=start_time,
-                completed_at=end_time,
+            # For now, delegate to sync_all_accounts but with specific filtering
+            # This could be optimized later to only process specified accounts
+            result = await self.sync_all_accounts(
+                force=force, trigger_type=trigger_type
             )
+
+            # Filter results to only specified accounts if needed
+            # For simplicity, we'll return the full result for now
+            return result
+
         finally:
             self._sync_status.is_running = False

pyproject.toml

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

tests/conftest.py

@@ -103,22 +103,24 @@ def mock_db_path(temp_db_path):
 @pytest.fixture
 def sample_bank_data():
     """Sample bank/institution data for testing."""
-    return [
-        {
-            "id": "REVOLUT_REVOLT21",
-            "name": "Revolut",
-            "bic": "REVOLT21",
-            "transaction_total_days": 90,
-            "countries": ["GB", "LT"],
-        },
-        {
-            "id": "BANCOBPI_BBPIPTPL",
-            "name": "Banco BPI",
-            "bic": "BBPIPTPL",
-            "transaction_total_days": 90,
-            "countries": ["PT"],
-        },
-    ]
+    return {
+        "results": [
+            {
+                "id": "REVOLUT_REVOLT21",
+                "name": "Revolut",
+                "bic": "REVOLT21",
+                "transaction_total_days": 90,
+                "countries": ["GB", "LT"],
+            },
+            {
+                "id": "BANCOBPI_BBPIPTPL",
+                "name": "Banco BPI",
+                "bic": "BBPIPTPL",
+                "transaction_total_days": 90,
+                "countries": ["PT"],
+            },
+        ]
+    }
 
 
 @pytest.fixture

tests/unit/test_api_banks.py

@@ -50,7 +50,7 @@ class TestBanksAPI:
 
         # Mock empty institutions response for invalid country
         respx.get("https://bankaccountdata.gocardless.com/api/v2/institutions/").mock(
-            return_value=httpx.Response(200, json=[])
+            return_value=httpx.Response(200, json={"results": []})
         )
 
         with patch("leggen.utils.config.config", mock_config):

tests/unit/test_api_client.py

@@ -37,9 +37,12 @@ class TestLeggenAPIClient:
         """Test getting institutions via API client."""
         client = LeggenAPIClient("http://localhost:8000")
 
+        # The API returns processed institutions, not raw GoCardless data
+        processed_institutions = sample_bank_data["results"]
+
         api_response = {
             "success": True,
-            "data": sample_bank_data,
+            "data": processed_institutions,
             "message": "Found 2 institutions for PT",
         }
 

tests/unit/test_database_service.py

@@ -324,6 +324,8 @@ class TestDatabaseService:
         with patch("sqlite3.connect") as mock_connect:
             mock_conn = mock_connect.return_value
             mock_cursor = mock_conn.cursor.return_value
+            # Mock fetchone to return (0,) indicating transaction doesn't exist yet
+            mock_cursor.fetchone.return_value = (0,)
 
             result = await database_service._persist_transactions_sqlite(
                 "test-account-123", sample_transactions_db_format
@@ -338,6 +340,29 @@ class TestDatabaseService:
             mock_conn.commit.assert_called_once()
             mock_conn.close.assert_called_once()
 
+    async def test_persist_transactions_sqlite_duplicate_detection(
+        self, database_service, sample_transactions_db_format
+    ):
+        """Test that existing transactions are not returned as new."""
+        with patch("sqlite3.connect") as mock_connect:
+            mock_conn = mock_connect.return_value
+            mock_cursor = mock_conn.cursor.return_value
+            # Mock fetchone to return (1,) indicating transaction already exists
+            mock_cursor.fetchone.return_value = (1,)
+
+            result = await database_service._persist_transactions_sqlite(
+                "test-account-123", sample_transactions_db_format
+            )
+
+            # Should return empty list since all transactions already exist
+            assert len(result) == 0
+
+            # Verify database operations still happened (INSERT OR REPLACE executed)
+            mock_connect.assert_called()
+            mock_cursor.execute.assert_called()
+            mock_conn.commit.assert_called_once()
+            mock_conn.close.assert_called_once()
+
     async def test_persist_transactions_sqlite_error(self, database_service):
         """Test handling error during transaction persistence."""
         with patch("sqlite3.connect") as mock_connect:

uv.lock

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