feat(oauth): add to env

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

.github/workflows/deploy-prod.yaml

@@ -85,7 +85,9 @@ jobs:
           BANKID_CLIENT_SECRET: ${{ secrets.BANKID_CLIENT_SECRET }}
           MOJEID_CLIENT_ID: ${{ secrets.MOJEID_CLIENT_ID }}
           MOJEID_CLIENT_SECRET: ${{ secrets.MOJEID_CLIENT_SECRET }}
-
+          CSAS_CLIENT_ID: ${{ secrets.CSAS_CLIENT_ID }}
+          CSAS_CLIENT_SECRET: ${{ secrets.CSAS_CLIENT_SECRET }}
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
         run: |
           helm upgrade --install myapp ./7project/charts/myapp-chart \
             -n prod --create-namespace \
@@ -97,8 +99,11 @@ jobs:
             --set frontend_domain_scheme="$FRONTEND_DOMAIN_SCHEME" \
             --set image.digest="$DIGEST" \
             --set-string rabbitmq.password="$RABBITMQ_PASSWORD" \
-            --set-string database.password="$DB_PASSWORD"
+            --set-string database.password="$DB_PASSWORD" \
             --set-string oauth.bankid.clientId="$BANKID_CLIENT_ID" \
             --set-string oauth.bankid.clientSecret="$BANKID_CLIENT_SECRET" \
             --set-string oauth.mojeid.clientId="$MOJEID_CLIENT_ID" \
-            --set-string oauth.mojeid.clientSecret="$MOJEID_CLIENT_SECRET"
+            --set-string oauth.mojeid.clientSecret="$MOJEID_CLIENT_SECRET" \
+            --set-string oauth.csas.clientId="$CSAS_CLIENT_ID" \
+            --set-string oauth.csas.clientSecret="$CSAS_CLIENT_SECRET" \
+            --set-string sentry_dsn="$SENTRY_DSN" \

7project/backend/alembic/versions/2025_10_21_1856-eabec90a94fe_add_config_to_user.py

@@ -0,0 +1,32 @@
+"""add config to user
+
+Revision ID: eabec90a94fe
+Revises: 5ab2e654c96e
+Create Date: 2025-10-21 18:56:42.085973
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision: str = 'eabec90a94fe'
+down_revision: Union[str, Sequence[str], None] = '5ab2e654c96e'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    """Upgrade schema."""
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column('user', sa.Column('config', sa.JSON(), nullable=True))
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    """Downgrade schema."""
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column('user', 'config')
+    # ### end Alembic commands ###

7project/backend/app/api/auth.py

@@ -1,10 +1,28 @@
-from fastapi import APIRouter
+from fastapi import APIRouter, Depends, status
+from fastapi_users import models
+from fastapi_users.manager import BaseUserManager
 
 from app.schemas.user import UserCreate, UserRead, UserUpdate
 from app.services.user_service import auth_backend, fastapi_users
 
 router = APIRouter()
 
+@router.delete(
+    "/users/me",
+    status_code=status.HTTP_204_NO_CONTENT,
+    tags=["users"],
+    summary="Delete current user",
+    response_description="The user has been successfully deleted.",
+)
+async def delete_me(
+    user: models.UserProtocol = Depends(fastapi_users.current_user(active=True)),
+    user_manager: BaseUserManager = Depends(fastapi_users.get_user_manager),
+):
+    """
+    Delete the currently authenticated user.
+    """
+    await user_manager.delete(user)
+
 # Keep existing paths as-is under /auth/* and /users/*
 router.include_router(
     fastapi_users.get_auth_router(auth_backend), prefix="/auth/jwt", tags=["auth"]

7project/backend/app/api/csas.py

@@ -0,0 +1,40 @@
+import json
+import os
+
+from fastapi import APIRouter
+from fastapi.params import Depends
+from sqlalchemy.ext.asyncio import AsyncSession
+
+from app.models.user import User
+from app.oauth.csas import CSASOAuth
+from app.services.db import get_async_session
+from app.services.user_service import current_active_user
+
+router = APIRouter(prefix="/auth/csas", tags=["csas"])
+
+CLIENT_ID = os.getenv("CSAS_CLIENT_ID")
+CLIENT_SECRET = os.getenv("CSAS_CLIENT_SECRET")
+CSAS_OAUTH = CSASOAuth(CLIENT_ID, CLIENT_SECRET)
+
+
+@router.get("/authorize")
+async def csas_authorize():
+    return {"authorization_url":
+                await CSAS_OAUTH.get_authorization_url(os.getenv("FRONTEND_DOMAIN_SCHEME") + "/auth/csas/callback")}
+
+
+@router.get("/callback")
+async def csas_callback(code: str, session: AsyncSession = Depends(get_async_session),
+                        user: User = Depends(current_active_user)):
+    response = await CSAS_OAUTH.get_access_token(code, os.getenv("FRONTEND_DOMAIN_SCHEME") + "/auth/csas/callback")
+
+    if not user.config:
+        user.config = {}
+
+    new_dict = user.config.copy()
+    new_dict["csas"] = json.dumps(response)
+
+    user.config = new_dict
+    await session.commit()
+
+    return "OK"

7project/backend/app/app.py

@@ -1,14 +1,32 @@
+import logging
+import os
+from datetime import datetime
+
 from fastapi import Depends, FastAPI
 from fastapi.middleware.cors import CORSMiddleware
+from starlette.requests import Request
 
-from app.models.user import User
+from app.services import bank_scraper
+from app.workers.celery_tasks import load_transactions, load_all_transactions
+from app.models.user import User, OAuthAccount
 
 from app.services.user_service import current_active_verified_user
 from app.api.auth import router as auth_router
+from app.api.csas import router as csas_router
 from app.api.categories import router as categories_router
 from app.api.transactions import router as transactions_router
-from app.services.user_service import auth_backend, current_active_verified_user, fastapi_users, get_oauth_provider
+from app.services.user_service import auth_backend, current_active_verified_user, fastapi_users, get_oauth_provider, UserManager, get_jwt_strategy
 
+
+from fastapi import FastAPI
+import sentry_sdk
+from fastapi_users.db import SQLAlchemyUserDatabase
+from app.core.db import async_session_maker
+
+sentry_sdk.init(
+    dsn=os.getenv("SENTRY_DSN"),
+    send_default_pii=True,
+)
 fastApi = FastAPI()
 
 # CORS for frontend dev server
@@ -17,6 +35,7 @@ fastApi.add_middleware(
     allow_origins=[
         "http://localhost:5173",
         "http://127.0.0.1:5173",
+        os.getenv("FRONTEND_DOMAIN_SCHEME", "")
     ],
     allow_credentials=True,
     allow_methods=["*"],
@@ -27,12 +46,34 @@ fastApi.include_router(auth_router)
 fastApi.include_router(categories_router)
 fastApi.include_router(transactions_router)
 
+logging.basicConfig(filename='app.log', level=logging.INFO, format='%(asctime)s %(message)s')
+@fastApi.middleware("http")
+async def log_traffic(request: Request, call_next):
+    start_time = datetime.now()
+    response = await call_next(request)
+    process_time = (datetime.now() - start_time).total_seconds()
+    client_host = request.client.host
+    log_params = {
+        "request_method": request.method,
+        "request_url": str(request.url),
+        "request_size": request.headers.get("content-length"),
+        "request_headers": dict(request.headers),
+        "response_status": response.status_code,
+        "response_size": response.headers.get("content-length"),
+        "response_headers": dict(response.headers),
+        "process_time": process_time,
+        "client_host": client_host
+    }
+    logging.info(str(log_params))
+    return response
+
 fastApi.include_router(
     fastapi_users.get_oauth_router(
         get_oauth_provider("MojeID"),
         auth_backend,
         "SECRET",
         associate_by_email=True,
+        redirect_url=os.getenv("FRONTEND_DOMAIN_SCHEME") + "/auth/mojeid/callback",
     ),
     prefix="/auth/mojeid",
     tags=["auth"],
@@ -44,11 +85,13 @@ fastApi.include_router(
         auth_backend,
         "SECRET",
         associate_by_email=True,
+        redirect_url=os.getenv("FRONTEND_DOMAIN_SCHEME") + "/auth/bankid/callback",
     ),
     prefix="/auth/bankid",
     tags=["auth"],
 )
 
+fastApi.include_router(csas_router)
 
 # Liveness/root endpoint
 @fastApi.get("/", include_in_schema=False)
@@ -59,3 +102,21 @@ async def root():
 @fastApi.get("/authenticated-route")
 async def authenticated_route(user: User = Depends(current_active_verified_user)):
     return {"message": f"Hello {user.email}!"}
+
+@fastApi.get("/sentry-debug")
+async def trigger_error():
+    division_by_zero = 1 / 0
+
+
+@fastApi.get("/debug/scrape/csas/all", tags=["debug"])
+async def debug_scrape_csas_all():
+    logging.info("[Debug] Queueing CSAS scrape for all users via HTTP endpoint (Celery)")
+    task = load_all_transactions.delay()
+    return {"status": "queued", "action": "csas_scrape_all", "task_id": getattr(task, 'id', None)}
+
+
+@fastApi.post("/debug/scrape/csas/{user_id}", tags=["debug"]) 
+async def debug_scrape_csas_user(user_id: str, user: User = Depends(current_active_verified_user)):
+    logging.info("[Debug] Queueing CSAS scrape for single user via HTTP endpoint (Celery) | user_id=%s", user_id)
+    task = load_transactions.delay(user_id)
+    return {"status": "queued", "action": "csas_scrape_single", "user_id": user_id, "task_id": getattr(task, 'id', None)}

7project/backend/app/models/user.py

@@ -1,6 +1,8 @@
 from sqlalchemy import Column, String
 from sqlalchemy.orm import relationship, mapped_column, Mapped
 from fastapi_users.db import SQLAlchemyBaseUserTableUUID, SQLAlchemyBaseOAuthAccountTableUUID
+from sqlalchemy.sql.sqltypes import JSON
+
 from app.core.base import Base
 
 
@@ -13,6 +15,7 @@ class User(SQLAlchemyBaseUserTableUUID, Base):
     first_name = Column(String(length=100), nullable=True)
     last_name = Column(String(length=100), nullable=True)
     oauth_accounts = relationship("OAuthAccount", lazy="joined")
+    config = Column(JSON, default={})
 
     # Relationship
     transactions = relationship("Transaction", back_populates="user")

7project/backend/app/oauth/csas.py

@@ -0,0 +1,33 @@
+import os
+from os.path import dirname, join
+from typing import Optional, Any
+
+import httpx
+from httpx_oauth.exceptions import GetProfileError
+from httpx_oauth.oauth2 import BaseOAuth2
+
+import app.services.db
+
+BASE_DIR = dirname(__file__)
+certs = (
+    join(BASE_DIR, "public_key.pem"),
+    join(BASE_DIR, "private_key.key")
+)
+
+class CSASOAuth(BaseOAuth2):
+
+    def __init__(self, client_id: str, client_secret: str):
+        super().__init__(
+            client_id,
+            client_secret,
+            base_scopes=["aisp"],
+            authorize_endpoint="https://webapi.developers.erstegroup.com/api/csas/sandbox/v1/sandbox-idp/auth",
+            access_token_endpoint="https://webapi.developers.erstegroup.com/api/csas/sandbox/v1/sandbox-idp/token",
+            refresh_token_endpoint="https://webapi.developers.erstegroup.com/api/csas/sandbox/v1/sandbox-idp/token"
+        )
+
+
+
+
+
+

7project/backend/app/oauth/private_key.key

@@ -0,0 +1,28 @@
+-----BEGIN RSA PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDcr/oxgV074ETd
+DkP/0l8LFnRofru+m2wNNG/ttVCioTqwnvR4oYxwq3U9qIBsT0D+Rx/Ef7qcpzqf
+/w9xt6Hosdv6I5jMHGaVQqLiPuV26/a7WvcmU+PpYuEBmbBHjGVJRBwgPtlUW1VL
+M8Pht9YiaagEKvFa6SUidZLfPv+ECohqgH4mgMrEcG/BTnry0/5xQdadRC9o25cl
+NtZIesS5GPeelhggFTkbh/FaxvMXhIAaRXT61cnxgxtfM71h5ObX5Lwle9z5a+Tw
+xgQhSQq1jbHALYvTwsc4Q/NQGXpGNWy599sb7dg5AkPFSSF4ceXBo/2jOaZCqWrt
+FVONZ+blAgMBAAECggEBAJwQbrRXsaFIRiq1jez5znC+3m+PQCHZM55a+NR3pqB7
+uE9y+ZvdUr3S4sRJxxfRLDsl/Rcu5L8nm9PNwhQ/MmamcNQCHGoro3fmed3ZcNia
+og94ktMt/DztygUhtIHEjVQ0sFc1WufG9xiJcPrM0MfhRAo+fBQ4UCSAVO8/U98B
+a4yukrPNeEA03hyjLB9W41pNQfyOtAHqzwDg9Q5XVaGMCLZT1bjCIquUcht5iMva
+tiw3cwdiYIklLTzTCsPPK9A/AlWZyUXL8KxtN0mU0kkwlXqASoXZ2nqdkhjRye/V
+3JXOmlDtDaJCqWDpH2gHLxMCl7OjfPvuD66bAT3H63kCgYEA5zxW/l6oI3gwYW7+
+j6rEjA2n8LikVnyW2e/PZ7pxBH3iBFe2DHx/imeqd/0IzixcM1zZT/V+PTFPQizG
+lOU7stN6Zg/LuRdxneHPyLWCimJP7BBJCWyJkuxKy9psokyBhGSLR/phL3fP7UkB
+o2I3vGmTFu5A0FzXcNH/cXPMdy8CgYEA9FJw3kyzXlInhJ6Cd63mckLPLYDArUsm
+THBoeH2CVTBS5g0bCbl7N1ZxUoYwZPD4lg5V0nWhZALGf+85ULSjX03PMf1cc6WW
+EIbZIo9hX+mGRa/FudDd+TlbtBnn0jucwABuLQi9mIepE55Hu9tw5/FT3cHeZVQc
+cC0T6ulVvisCgYBCzFeFG+sOdAXl356B+h7VJozBKVWv9kXNp00O9fj4BzVnc78P
+VFezr8a66snEZWQtIkFUq+JP4xK2VyD2mlHoktbk7OM5EOCtbzILFQQk3cmgtAOl
+SUlkvAXPZcXEDL3NdQ4XOOkiQUY7kb97Z0AamZT4JtNqXaeO29si9wS12QKBgHYg
+Hd3864Qg6GZgVOgUNiTsVErFw2KFwQCYIIqQ9CDH+myrzXTILuC0dJnXszI6p5W1
+XJ0irmMyTFKykN2KWKrNbe3Xd4mad5GKARWKiSPcPkUXFNwgNhI3PzU2iTTGCaVz
+D9HKNhC3FnIbxsb29AHQViITh7kqD43U3ZpoMkJ9AoGAZ+sg+CPfuo3ZMpbcdb3B
+ZX2UhAvNKxgHvNnHOjO+pvaM7HiH+BT0650brfBWQ0nTG1dt18mCevVk1UM/5hO9
+AtZw06vCLOJ3p3qpgkSlRZ1H7VokG9M8Od0zXqtJrmeLeBq7dfuDisYOuA+NUEbJ
+UM/UHByieS6ywetruz0LpM0=
+-----END RSA PRIVATE KEY-----

7project/backend/app/oauth/public_key.pem

@@ -0,0 +1,31 @@
+-----BEGIN CERTIFICATE-----
+MIIFSTCCAzGgAwIBAgIEAQIDBDANBgkqhkiG9w0BAQsFADCBgDELMAkGA1UEBhMC
+Q1oxDjAMBgNVBAcTBUN6ZWNoMRMwEQYDVQQKEwpFcnN0ZUdyb3VwMRUwEwYDVQQL
+EwxFcnN0ZUh1YlRlYW0xETAPBgNVBAMTCEVyc3RlSHViMSIwIAYJKoZIhvcNAQkB
+FhNpbmZvQGVyc3RlZ3JvdXAuY29tMB4XDTIyMTIxNDA4MDc1N1oXDTI2MDMxNDA4
+MDc1N1owUjEaMBgGA1UEYRMRUFNEQ1otQ05CLTEyMzQ1NjcxCzAJBgNVBAYTAkNa
+MRYwFAYDVQQDEw1UUFAgVGVzdCBRV0FDMQ8wDQYDVQQKEwZNeSBUUFAwggEiMA0G
+CSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDcr/oxgV074ETdDkP/0l8LFnRofru+
+m2wNNG/ttVCioTqwnvR4oYxwq3U9qIBsT0D+Rx/Ef7qcpzqf/w9xt6Hosdv6I5jM
+HGaVQqLiPuV26/a7WvcmU+PpYuEBmbBHjGVJRBwgPtlUW1VLM8Pht9YiaagEKvFa
+6SUidZLfPv+ECohqgH4mgMrEcG/BTnry0/5xQdadRC9o25clNtZIesS5GPeelhgg
+FTkbh/FaxvMXhIAaRXT61cnxgxtfM71h5ObX5Lwle9z5a+TwxgQhSQq1jbHALYvT
+wsc4Q/NQGXpGNWy599sb7dg5AkPFSSF4ceXBo/2jOaZCqWrtFVONZ+blAgMBAAGj
+gfcwgfQwCwYDVR0PBAQDAgHGMB0GA1UdJQQWMBQGCCsGAQUFBwMBBggrBgEFBQcD
+AjCBrwYIKwYBBQUHAQMEgaIwgZ8wCAYGBACORgEBMAsGBgQAjkYBAwIBFDAIBgYE
+AI5GAQQwEwYGBACORgEGMAkGBwQAjkYBBgMwZwYGBACBmCcCMF0wTDARBgcEAIGY
+JwEBDAZQU1BfQVMwEQYHBACBmCcBAgwGUFNQX1BJMBEGBwQAgZgnAQMMBlBTUF9B
+STARBgcEAIGYJwEEDAZQU1BfSUMMBUVyc3RlDAZBVC1FUlMwFAYDVR0RBA0wC4IJ
+bXl0cHAuY29tMA0GCSqGSIb3DQEBCwUAA4ICAQBlTMPSwz46GMRBEPcy+25gV7xE
+5aFS5N6sf3YQyFelRJgPxxPxTHo55WelcK4XmXRQKeQ4VoKf4FgP0Cj74+p0N0gw
+wFJDWPGXH3SdjAXPRtG+FOiHwUSoyrmvbL4kk6Vbrd4cF+qe0BlzHzJ2Q6vFLwsk
+NYvWzkY9YjoItB38nAnQhyYgl1yHUK/uDWyrwHVfZn1AeTws/hr/KufORuiQfaTU
+kvAH1nzi7WSJ6AIQCd2exUEPx/O14Y+oCoJhTVd+RpA/9lkcqebceBijj47b2bvv
+QbjymvyTXqHd3L224Y7zVmh95g+CaJ8PRpApdrImfjfDDRy8PaFWx2pd/v0UQgrQ
+lgbO6jE7ah/tS0T5q5JtwnLAiOOqHPaKRvo5WB65jcZ2fvOH/0/oZ89noxp1Ihus
+vvsjqc9k2h9Rvt2pEjVU40HtQZ6XCmWqgFwK3n9CHrKNV/GqgANIZRNcvXKMCUoB
+VoJORVwi2DF4caKSFmyEWuK+5FyCEILtQ60SY/NHVGsUeOuN7OTjZjECARO6p4hz
+Uw+GCIXrzmIjS6ydh/LRef+NK28+xTbjmLHu/wnHg9rrHEnTPd39is+byfS7eeLV
+Dld/0Xrv88C0wxz63dcwAceiahjyz2mbQm765tOf9rK7EqsvT5M8EXFJ3dP4zwqS
+6mNFoIa0XGbAUT3E1w==
+-----END CERTIFICATE-----

7project/backend/app/services/bank_scraper.py

@@ -0,0 +1,121 @@
+import json
+import logging
+from os.path import dirname, join
+from uuid import UUID
+
+import httpx
+from sqlalchemy import select
+
+from app.core.db import async_session_maker
+from app.models.user import User
+
+logger = logging.getLogger(__name__)
+
+# Reuse CSAS mTLS certs used by OAuth profile calls
+OAUTH_DIR = join(dirname(__file__), "..", "oauth")
+CERTS = (
+    join(OAUTH_DIR, "public_key.pem"),
+    join(OAUTH_DIR, "private_key.key"),
+)
+
+
+async def aload_ceska_sporitelna_transactions(user_id: str) -> None:
+    """
+    Async entry point to load Česká spořitelna transactions for a single user.
+    Validates the user_id and performs a minimal placeholder action.
+    """
+    try:
+        uid = UUID(str(user_id))
+    except Exception:
+        logger.error("Invalid user_id provided to bank_scraper (async): %r", user_id)
+        return
+
+    await _aload_ceska_sporitelna_transactions(uid)
+
+
+async def aload_all_ceska_sporitelna_transactions() -> None:
+    """
+    Async entry point to load Česká spořitelna transactions for all users.
+    """
+    async with async_session_maker() as session:
+        result = await session.execute(select(User))
+        users = result.unique().scalars().all()
+        logger.info("[BankScraper] Starting CSAS scrape for all users | count=%d", len(users))
+
+    processed = 0
+    for user in users:
+        try:
+            await _aload_ceska_sporitelna_transactions(user.id)
+            processed += 1
+        except Exception:
+            logger.exception("[BankScraper] Error scraping for user id=%s email=%s", user.id,
+                             getattr(user, 'email', None))
+    logger.info("[BankScraper] Finished CSAS scrape for all users | processed=%d", processed)
+
+
+async def _aload_ceska_sporitelna_transactions(user_id: UUID) -> None:
+    async with async_session_maker() as session:
+        result = await session.execute(select(User).where(User.id == user_id))
+        user: User = result.unique().scalar_one_or_none()
+        if user is None:
+            logger.warning("User not found for id=%s", user_id)
+            return
+
+        cfg = user.config or {}
+        if "csas" not in cfg:
+            return
+
+        cfg = json.loads(cfg["csas"])
+        if "access_token" not in cfg:
+            return
+
+        accounts = []
+        try:
+            async with httpx.AsyncClient(cert=CERTS, timeout=httpx.Timeout(20.0)) as client:
+                response = await client.get(
+                    "https://webapi.developers.erstegroup.com/api/csas/sandbox/v4/account-information/my/accounts?size=10&page=0&sort=iban&order=desc",
+                    headers={
+                        "Authorization": f"Bearer {cfg['access_token']}",
+                        "WEB-API-key": "09fdc637-3c57-4242-95f2-c2205a2438f3",
+                        "user-involved": "false",
+                    },
+                )
+                if response.status_code != httpx.codes.OK:
+                    return
+
+                for account in response.json()["accounts"]:
+                    accounts.append(account)
+
+        except (httpx.HTTPError,) as e:
+            logger.exception("[BankScraper] HTTP error during CSAS request | user_id=%s", user_id)
+            return
+
+        for account in accounts:
+            id = account["id"]
+
+            url = f"https://webapi.developers.erstegroup.com/api/csas/sandbox/v4/account-information/my/accounts/{id}/transactions?size=100&page=0&sort=bookingdate&order=desc"
+            async with httpx.AsyncClient(cert=CERTS) as client:
+                response = await client.get(
+                    url,
+                    headers={
+                        "Authorization": f"Bearer {cfg['access_token']}",
+                        "WEB-API-key": "09fdc637-3c57-4242-95f2-c2205a2438f3",
+                        "user-involved": "false",
+                    },
+                )
+                if response.status_code != httpx.codes.OK:
+                    continue
+
+                # Placeholder: just print the account transactions
+
+                transactions = response.json()["transactions"]
+                pass
+
+            for transaction in transactions:
+                #parse and store transaction to database
+                #create Transaction object and save to DB
+                #obj =
+
+
+                pass
+            pass

7project/backend/app/services/user_service.py

@@ -14,6 +14,7 @@ from httpx_oauth.oauth2 import BaseOAuth2
 
 from app.models.user import User
 from app.oauth.bank_id import BankID
+from app.oauth.csas import CSASOAuth
 from app.oauth.custom_openid import CustomOpenID
 from app.oauth.moje_id import MojeIDOAuth
 from app.services.db import get_user_db
@@ -32,7 +33,7 @@ providers = {
     "BankID": BankID(
         os.getenv("BANKID_CLIENT_ID", "CHANGE_ME_CLIENT_ID"),
         os.getenv("BANKID_CLIENT_SECRET", "CHANGE_ME_CLIENT_SECRET"),
-    )
+    ),
 }
 
 

7project/backend/app/workers/celery_tasks.py

@@ -1,7 +1,10 @@
 import logging
+import asyncio
 
 from celery import shared_task
 
+import app.services.bank_scraper
+
 logger = logging.getLogger("celery_tasks")
 if not logger.handlers:
     _h = logging.StreamHandler()
@@ -9,6 +12,72 @@ if not logger.handlers:
 logger.setLevel(logging.INFO)
 
 
+def run_coro(coro) -> None:
+    """Run an async coroutine in a fresh event loop without using run_until_complete.
+    Primary strategy runs in a new loop in the current thread. If that fails due to
+    debugger patches (e.g., Bad file descriptor from pydevd_nest_asyncio), fall back
+    to running in a dedicated thread with its own event loop.
+    """
+    import threading
+
+    def _cleanup_loop(loop):
+        try:
+            pending = [t for t in asyncio.all_tasks(loop) if not t.done()]
+            for t in pending:
+                t.cancel()
+            if pending:
+                loop.run_until_complete(asyncio.gather(*pending, return_exceptions=True))
+        except Exception:
+            pass
+        finally:
+            try:
+                loop.close()
+            finally:
+                asyncio.set_event_loop(None)
+
+    # First attempt: Run in current thread with a fresh event loop
+    try:
+        loop = asyncio.get_event_loop_policy().new_event_loop()
+        try:
+            asyncio.set_event_loop(loop)
+            task = loop.create_task(coro)
+            task.add_done_callback(lambda _t: loop.stop())
+            loop.run_forever()
+            exc = task.exception()
+            if exc:
+                raise exc
+            return
+        finally:
+            _cleanup_loop(loop)
+    except OSError as e:
+        logger.warning("run_coro primary strategy failed (%s). Falling back to thread runner.", e)
+    except Exception:
+        # For any other unexpected errors, try thread fallback as well
+        logger.exception("run_coro primary strategy raised; attempting thread fallback")
+
+    # Fallback: Run in a dedicated thread with its own event loop
+    error = {"exc": None}
+
+    def _thread_target():
+        loop = asyncio.new_event_loop()
+        try:
+            asyncio.set_event_loop(loop)
+            task = loop.create_task(coro)
+            task.add_done_callback(lambda _t: loop.stop())
+            loop.run_forever()
+            exc = task.exception()
+            if exc:
+                error["exc"] = exc
+        finally:
+            _cleanup_loop(loop)
+
+    th = threading.Thread(target=_thread_target, name="celery-async-runner", daemon=True)
+    th.start()
+    th.join()
+    if error["exc"] is not None:
+        raise error["exc"]
+
+
 @shared_task(name="workers.send_email")
 def send_email(to: str, subject: str, body: str) -> None:
     if not (to and subject and body):
@@ -17,3 +86,22 @@ def send_email(to: str, subject: str, body: str) -> None:
 
     # Placeholder for real email sending logic
     logger.info("[Celery] Email sent | to=%s | subject=%s | body_len=%d", to, subject, len(body))
+
+
+@shared_task(name="workers.load_transactions")
+def load_transactions(user_id: str) -> None:
+    if not user_id:
+        logger.error("Load transactions task missing user_id.")
+        return
+
+    run_coro(app.services.bank_scraper.aload_ceska_sporitelna_transactions(user_id))
+
+    # Placeholder for real transaction loading logic
+    logger.info("[Celery] Transactions loaded for user_id=%s", user_id)
+
+
+@shared_task(name="workers.load_all_transactions")
+def load_all_transactions() -> None:
+    logger.info("[Celery] Starting load_all_transactions")
+    run_coro(app.services.bank_scraper.aload_all_ceska_sporitelna_transactions())
+    logger.info("[Celery] Finished load_all_transactions")

7project/backend/requirements.txt

@@ -50,6 +50,7 @@ python-dateutil==2.9.0.post0
 python-dotenv==1.1.1
 python-multipart==0.0.20
 PyYAML==6.0.2
+sentry-sdk==2.42.0
 six==1.17.0
 sniffio==1.3.1
 SQLAlchemy==2.0.43
@@ -58,6 +59,7 @@ tomli==2.2.1
 typing-inspection==0.4.1
 typing_extensions==4.15.0
 tzdata==2025.2
+urllib3==2.5.0
 uvicorn==0.37.0
 uvloop==0.21.0
 vine==5.1.0

7project/charts/myapp-chart/templates/app-deployment.yaml

@@ -20,7 +20,7 @@ spec:
           securityContext:
             allowPrivilegeEscalation: false
             capabilities:
-              drop: ["ALL"]
+              drop: [ "ALL" ]
           ports:
             - containerPort: {{ .Values.app.port }}
           env:
@@ -29,21 +29,27 @@ spec:
             - name: MARIADB_PORT
               value: '3306'
             - name: MARIADB_DB
-              value: {{ required "Set .Values.deployment" .Values.deployment | quote }}
+              valueFrom:
+                secretKeyRef:
+                  name: prod
+                  key: MARIADB_DB
             - name: MARIADB_USER
-              value: {{ required "Set .Values.deployment" .Values.deployment | quote }}
+              valueFrom:
+                secretKeyRef:
+                  name: prod
+                  key: MARIADB_USER
             - name: MARIADB_PASSWORD
               valueFrom:
                 secretKeyRef:
-                  name: {{ required "Set .Values.database.secretName" .Values.database.secretName }}
-                  key: password
+                  name: prod
+                  key: MARIADB_PASSWORD
             - name: RABBITMQ_USERNAME
               value: {{ .Values.rabbitmq.username | quote }}
             - name: RABBITMQ_PASSWORD
               valueFrom:
                 secretKeyRef:
-                  name: {{ printf "%s-user-credentials" (.Values.rabbitmq.username | default "app-user") }}
-                  key: password
+                  name: prod
+                  key: RABBITMQ_PASSWORD
             - name: RABBITMQ_HOST
               value: {{ printf "%s.%s.svc.cluster.local" "rabbitmq-cluster" .Release.Namespace | quote }}
             - name: RABBITMQ_PORT
@@ -53,13 +59,35 @@ spec:
             - name: MAIL_QUEUE
               value: {{ .Values.worker.mailQueueName | default "mail_queue" | quote }}
             - name: MOJEID_CLIENT_ID
-              value: {{ .Values.oauth.mojeid.clientId | quote }}
+              valueFrom:
+                secretKeyRef:
+                  name: prod
+                  key: MOJEID_CLIENT_ID
             - name: MOJEID_CLIENT_SECRET
-              value: {{ .Values.oauth.mojeid.clientSecret | quote }}
+              valueFrom:
+                secretKeyRef:
+                  name: prod
+                  key: MOJEID_CLIENT_SECRET
             - name: BANKID_CLIENT_ID
-              value: {{ .Values.oauth.bankid.clientId | quote }}
+              valueFrom:
+                secretKeyRef:
+                  name: prod
+                  key: BANKID_CLIENT_ID
             - name: BANKID_CLIENT_SECRET
-              value: {{ .Values.oauth.bankid.clientSecret | quote }}
+              valueFrom:
+                secretKeyRef:
+                  name: prod
+                  key: BANKID_CLIENT_SECRET
+            - name: CSAS_CLIENT_ID
+              valueFrom:
+                secretKeyRef:
+                  name: prod
+                  key: CSAS_CLIENT_ID
+            - name: CSAS_CLIENT_SECRET
+              valueFrom:
+                secretKeyRef:
+                  name: prod
+                  key: CSAS_CLIENT_SECRET
             - name: DOMAIN
               value: {{ required "Set .Values.domain" .Values.domain | quote }}
             - name: DOMAIN_SCHEME
@@ -68,6 +96,11 @@ spec:
               value: {{ required "Set .Values.frontend_domain" .Values.frontend_domain | quote }}
             - name: FRONTEND_DOMAIN_SCHEME
               value: {{ required "Set .Values.frontend_domain_scheme" .Values.frontend_domain_scheme | quote }}
+            - name: SENTRY_DSN
+              valueFrom:
+                secretKeyRef:
+                  name: prod
+                  key: SENTRY_DSN
           livenessProbe:
             httpGet:
               path: /

7project/charts/myapp-chart/templates/prod.yaml

@@ -0,0 +1,20 @@
+apiVersion: v1
+kind: Secret
+metadata:
+  name: prod
+type: Opaque
+stringData:
+  MOJEID_CLIENT_ID: {{ .Values.oauth.mojeid.clientId | quote }}
+  MOJEID_CLIENT_SECRET: {{ .Values.oauth.mojeid.clientSecret | quote }}
+  BANKID_CLIENT_ID: {{ .Values.oauth.bankid.clientId | quote }}
+  BANKID_CLIENT_SECRET: {{ .Values.oauth.bankid.clientSecret | quote }}
+  CSAS_CLIENT_ID: {{ .Values.oauth.csas.clientId | quote }}
+  CSAS_CLIENT_SECRET: {{ .Values.oauth.csas.clientSecret | quote }}
+  # Database credentials
+  MARIADB_DB: {{ required "Set .Values.deployment" .Values.deployment | quote }}
+  MARIADB_USER: {{ required "Set .Values.deployment" .Values.deployment | quote }}
+  MARIADB_PASSWORD: {{ .Values.database.password | default "" | quote }}
+  # RabbitMQ credentials
+  RABBITMQ_PASSWORD: {{ .Values.rabbitmq.password | default "" | quote }}
+  RABBITMQ_USERNAME: {{ .Values.rabbitmq.username | quote }}
+  SENTRY_DSN: {{ .Values.sentry_dsn | quote }}

7project/charts/myapp-chart/templates/worker-deployment.yaml

@@ -31,13 +31,32 @@ spec:
             - --loglevel
             - INFO
           env:
+            - name: MARIADB_HOST
+              value: "mariadb-repl-maxscale-internal.mariadb-operator.svc.cluster.local"
+            - name: MARIADB_PORT
+              value: '3306'
+            - name: MARIADB_DB
+              valueFrom:
+                secretKeyRef:
+                  name: prod
+                  key: MARIADB_DB
+            - name: MARIADB_USER
+              valueFrom:
+                secretKeyRef:
+                  name: prod
+                  key: MARIADB_USER
+            - name: MARIADB_PASSWORD
+              valueFrom:
+                secretKeyRef:
+                  name: prod
+                  key: MARIADB_PASSWORD
             - name: RABBITMQ_USERNAME
               value: {{ .Values.rabbitmq.username | quote }}
             - name: RABBITMQ_PASSWORD
               valueFrom:
                 secretKeyRef:
-                  name: {{ printf "%s-user-credentials" (.Values.rabbitmq.username | default "app-user") }}
-                  key: password
+                  name: prod
+                  key: RABBITMQ_PASSWORD
             - name: RABBITMQ_HOST
               value: {{ printf "%s.%s.svc.cluster.local" "rabbitmq-cluster" .Release.Namespace | quote }}
             - name: RABBITMQ_PORT
@@ -46,3 +65,18 @@ spec:
               value: {{ .Values.rabbitmq.vhost | default "/" | quote }}
             - name: MAIL_QUEUE
               value: {{ .Values.worker.mailQueueName | default "mail_queue" | quote }}
+            - name: SENTRY_DSN
+              valueFrom:
+                secretKeyRef:
+                  name: prod
+                  key: SENTRY_DSN
+            - name: CSAS_CLIENT_ID
+              valueFrom:
+                secretKeyRef:
+                  name: prod
+                  key: CSAS_CLIENT_ID
+            - name: CSAS_CLIENT_SECRET
+              valueFrom:
+                secretKeyRef:
+                  name: prod
+                  key: CSAS_CLIENT_SECRET

7project/charts/myapp-chart/values.yaml

@@ -16,6 +16,8 @@ domain_scheme: ""
 frontend_domain: ""
 frontend_domain_scheme: ""
 
+sentry_dsn: ""
+
 image:
   repository: lukastrkan/cc-app-demo
   # You can use a tag or digest. If digest is provided, it takes precedence.
@@ -44,6 +46,9 @@ oauth:
   mojeid:
     clientId: ""
     clientSecret: ""
+  csas:
+    clientId: ""
+    clientSecret: ""
 
 rabbitmq:
   create: true

7project/deployment/app-demo-database-grant.yaml

@@ -1,20 +0,0 @@
-apiVersion: k8s.mariadb.com/v1alpha1
-kind: Grant
-metadata:
-  name: grant
-spec:
-  mariaDbRef:
-    name: mariadb-repl
-    namespace: mariadb-operator
-  privileges:
-    - "ALL PRIVILEGES"
-  database: "app-demo-database"
-  table: "*"
-  username: "app-demo-user"
-  grantOption: true
-  host: "%"
-  # Delete the resource in the database whenever the CR gets deleted.
-  # Alternatively, you can specify Skip in order to omit deletion.
-  cleanupPolicy: Skip
-  requeueInterval: 10h
-  retryInterval: 30s

7project/deployment/app-demo-database-secret.yaml

@@ -1,7 +0,0 @@
-apiVersion: v1
-kind: Secret
-metadata:
-  name: app-demo-database-secret
-type: kubernetes.io/basic-auth
-stringData:
-  password: "strongpassword"

7project/deployment/app-demo-database-user.yaml

@@ -1,20 +0,0 @@
-apiVersion: k8s.mariadb.com/v1alpha1
-kind: User
-metadata:
-  name: app-demo-user
-spec:
-  # If you want the user to be created with a different name than the resource name
-  # name: user-custom
-  mariaDbRef:
-    name: mariadb-repl
-    namespace: mariadb-operator
-  passwordSecretKeyRef:
-    name: app-demo-database-secret
-    key: password
-  maxUserConnections: 20
-  host: "%"
-  # Delete the resource in the database whenever the CR gets deleted.
-  # Alternatively, you can specify Skip in order to omit deletion.
-  cleanupPolicy: Skip
-  requeueInterval: 10h
-  retryInterval: 30s

7project/deployment/app-demo-database.yaml

@@ -1,15 +0,0 @@
-apiVersion: k8s.mariadb.com/v1alpha1
-kind: Database
-metadata:
-  name: app-demo-database
-spec:
-  mariaDbRef:
-    name: mariadb-repl
-    namespace: mariadb-operator
-  characterSet: utf8
-  collate: utf8_general_ci
-  # Delete the resource in the database whenever the CR gets deleted.
-  # Alternatively, you can specify Skip in order to omit deletion.
-  cleanupPolicy: Skip
-  requeueInterval: 10h
-  retryInterval: 30s

7project/deployment/app-demo-deployment.yaml

@@ -1,48 +0,0 @@
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  name: app-demo
-spec:
-  replicas: 3
-  revisionHistoryLimit: 3
-  selector:
-    matchLabels:
-      app: app-demo
-  template:
-    metadata:
-      labels:
-        app: app-demo
-    spec:
-      containers:
-        - image: lukastrkan/cc-app-demo@sha256:75634b4d97282b6b8424fe17767c81adf44af5f7359c1d25883073b5629b3e05
-          name: app-demo
-          ports:
-            - containerPort: 8000
-          env:
-            - name: MARIADB_HOST
-              value: mariadb-repl.mariadb-operator.svc.cluster.local
-            - name: MARIADB_PORT
-              value: '3306'
-            - name: MARIADB_DB
-              value: app-demo-database
-            - name: MARIADB_USER
-              value: app-demo-user
-            - name: MARIADB_PASSWORD
-              valueFrom:
-                secretKeyRef:
-                  name: app-demo-database-secret
-                  key: password
-          livenessProbe:
-            httpGet:
-              path: /
-              port: 8000
-            initialDelaySeconds: 10
-            periodSeconds: 10
-            failureThreshold: 3
-          readinessProbe:
-            httpGet:
-              path: /
-              port: 8000
-            initialDelaySeconds: 10
-            periodSeconds: 10
-            failureThreshold: 3

7project/deployment/app-demo-svc.yaml

@@ -1,10 +0,0 @@
-apiVersion: v1
-kind: Service
-metadata:
-  name: app-demo
-spec:
-  ports:
-  - port: 80
-    targetPort: 8000
-  selector:
-    app: app-demo

7project/deployment/app-demo-worker-deployment.yaml

@@ -1,41 +0,0 @@
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  name: app-demo-worker
-spec:
-  replicas: 3
-  revisionHistoryLimit: 3
-  selector:
-    matchLabels:
-      app: app-demo-worker
-  template:
-    metadata:
-      labels:
-        app: app-demo-worker
-    spec:
-      containers:
-        - image: lukastrkan/cc-app-demo@sha256:75634b4d97282b6b8424fe17767c81adf44af5f7359c1d25883073b5629b3e05
-          name: app-demo-worker
-          command:
-            - celery
-            - -A
-            - app.celery_app
-            - worker
-            - -Q
-            - $(MAIL_QUEUE)
-            - --loglevel
-            - INFO
-          env:
-            - name: RABBITMQ_USERNAME
-              value: demo-app
-            - name: RABBITMQ_PASSWORD
-              valueFrom:
-                secretKeyRef:
-                  name: demo-app-user-credentials
-                  key: password
-            - name: RABBITMQ_HOST
-              value: rabbitmq.rabbitmq.svc.cluster.local
-            - name: RABBITMQ_PORT
-              value: '5672'
-            - name: RABBITMQ_VHOST
-              value: "/"

7project/deployment/tunnel.yaml

@@ -1,14 +0,0 @@
-apiVersion: networking.cfargotunnel.com/v1alpha1
-kind: TunnelBinding
-metadata:
-  name: guestbook-tunnel-binding
-  namespace: group-project
-subjects:
-  - name: app-server
-    spec:
-      target: http://app-demo.group-project.svc.cluster.local
-      fqdn: demo.ltrk.cz
-      noTlsVerify: true
-tunnelRef:
-  kind: ClusterTunnel
-  name: cluster-tunnel

7project/frontend/src/App.css

@@ -1,42 +1 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
+/* App-level styles moved to ui.css for a cleaner layout. */

7project/frontend/src/App.tsx

@@ -1,39 +1,90 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-import { BACKEND_URL } from './config'
+import { useEffect, useState } from 'react';
+import './App.css';
+import LoginRegisterPage from './pages/LoginRegisterPage';
+import Dashboard from './pages/Dashboard';
+import { logout } from './api';
+import { BACKEND_URL } from './config';
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [hasToken, setHasToken] = useState<boolean>(!!localStorage.getItem('token'));
+  const [processingCallback, setProcessingCallback] = useState<boolean>(false);
+
+  useEffect(() => {
+    const path = window.location.pathname;
+
+    // Minimal handling for provider callbacks: /auth|/oauth/:provider/callback?code=...&state=...
+    const parts = path.split('/').filter(Boolean);
+    const isCallback = parts.length === 3 && (parts[0] === 'auth') && parts[2] === 'callback';
+
+    if (isCallback) {
+      // Guard against double invocation in React 18 StrictMode/dev
+      const w = window as any;
+      if (w.__oauthCallbackHandled) {
+        return;
+      }
+      w.__oauthCallbackHandled = true;
+
+      setProcessingCallback(true);
+
+      const provider = parts[1];
+      const qs = window.location.search || '';
+      const base = BACKEND_URL.replace(/\/$/, '');
+      const url = `${base}/auth/${encodeURIComponent(provider)}/callback${qs}`;
+      (async () => {
+        try {
+          const token = localStorage.getItem('token');
+          const res = await fetch(url, {
+            method: 'GET',
+            credentials: 'include',
+            headers: token ? { Authorization: `Bearer ${token}` } : undefined,
+          });
+          let data: any = null;
+          try {
+            data = await res.json();
+          } catch {}
+          if (provider !== 'csas' && res.ok && data?.access_token) {
+            localStorage.setItem('token', data?.access_token);
+            setHasToken(true);
+          }
+        } catch {}
+        // Clean URL and go home regardless of result
+        setProcessingCallback(false);
+        window.history.replaceState({}, '', '/');
+      })();
+    }
+
+    const onStorage = (e: StorageEvent) => {
+      if (e.key === 'token') setHasToken(!!e.newValue);
+    };
+    window.addEventListener('storage', onStorage);
+    return () => window.removeEventListener('storage', onStorage);
+  }, []);
+
+  if (processingCallback) {
+    return (
+      <div style={{ display: 'grid', placeItems: 'center', height: '100vh' }}>
+        <div className="card" style={{ width: 360, textAlign: 'center', padding: 24 }}>
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
+            <svg width="48" height="48" viewBox="0 0 50 50" aria-label="Loading">
+              <circle cx="25" cy="25" r="20" fill="none" stroke="#3b82f6" strokeWidth="5" strokeLinecap="round" strokeDasharray="31.4 31.4">
+                <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.9s" repeatCount="indefinite" />
+              </circle>
+            </svg>
+            <div>Finishing sign-in…</div>
+            <div className="muted">Please wait</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!hasToken) {
+    return <LoginRegisterPage onLoggedIn={() => setHasToken(true)} />;
+  }
 
   return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-        <p style={{ fontSize: 12, color: '#888' }}>
-          Backend URL: <code>{BACKEND_URL || '(not configured)'}</code>
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+    <Dashboard onLogout={() => { logout(); setHasToken(false); }} />
+  );
 }
 
-export default App
+export default App;

7project/frontend/src/api.ts

@@ -0,0 +1,155 @@
+import { BACKEND_URL } from './config';
+
+export type LoginResponse = {
+  access_token: string;
+  token_type: string;
+};
+
+export type Category = {
+  id: number;
+  name: string;
+  description?: string | null;
+};
+
+export type Transaction = {
+  id: number;
+  amount: number;
+  description?: string | null;
+  category_ids: number[];
+};
+
+function getBaseUrl() {
+  const base = BACKEND_URL?.replace(/\/$/, '') || '';
+  return base || '';
+}
+
+function getHeaders(contentType: 'json' | 'form' | 'none' = 'json'): Record<string, string> {
+  const token = localStorage.getItem('token');
+  const headers: Record<string, string> = {};
+
+  if (contentType === 'json') {
+    headers['Content-Type'] = 'application/json';
+  } else if (contentType === 'form') {
+    headers['Content-Type'] = 'application/x-www-form-urlencoded';
+  }
+
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`;
+  }
+
+  return headers;
+}
+
+export async function login(email: string, password: string): Promise<void> {
+  const body = new URLSearchParams();
+  body.set('username', email);
+  body.set('password', password);
+
+  const res = await fetch(`${getBaseUrl()}/auth/jwt/login`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    body: body.toString(),
+  });
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text || 'Login failed');
+  }
+  const data: LoginResponse = await res.json();
+  localStorage.setItem('token', data.access_token);
+}
+
+export async function register(email: string, password: string, first_name?: string, last_name?: string): Promise<void> {
+  const res = await fetch(`${getBaseUrl()}/auth/register`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email, password, first_name, last_name }),
+  });
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text || 'Registration failed');
+  }
+}
+
+export async function getCategories(): Promise<Category[]> {
+  const res = await fetch(`${getBaseUrl()}/categories/`, {
+    headers: getHeaders(),
+  });
+  if (!res.ok) throw new Error('Failed to load categories');
+  return res.json();
+}
+
+export type CreateTransactionInput = {
+  amount: number;
+  description?: string;
+  category_ids?: number[];
+};
+
+export async function createTransaction(input: CreateTransactionInput): Promise<Transaction> {
+  const res = await fetch(`${getBaseUrl()}/transactions/create`, {
+    method: 'POST',
+    headers: getHeaders(),
+    body: JSON.stringify(input),
+  });
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text || 'Failed to create transaction');
+  }
+  return res.json();
+}
+
+export async function getTransactions(): Promise<Transaction[]> {
+    const res = await fetch(`${getBaseUrl()}/transactions/`, {
+    headers: getHeaders(),
+  });
+  if (!res.ok) throw new Error('Failed to load transactions');
+  return res.json();
+}
+
+export type User = {
+  id: string;
+  email: string;
+  first_name?: string | null;
+  last_name?: string | null;
+  is_active: boolean;
+  is_superuser: boolean;
+  is_verified: boolean;
+};
+
+export async function getMe(): Promise<User> {
+  const res = await fetch(`${getBaseUrl()}/users/me`, {
+    headers: getHeaders(),
+  });
+  if (!res.ok) throw new Error('Failed to load user');
+  return res.json();
+}
+
+export type UpdateMeInput = Partial<Pick<User, 'first_name' | 'last_name'>> & { password?: string };
+export async function updateMe(input: UpdateMeInput): Promise<User> {
+  const res = await fetch(`${getBaseUrl()}/users/me`, {
+    method: 'PATCH',
+    headers: getHeaders(),
+    body: JSON.stringify(input),
+  });
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text || 'Failed to update user');
+  }
+  return res.json();
+}
+
+export async function deleteMe(): Promise<void> {
+  const res = await fetch(`${getBaseUrl()}/users/me`, {
+    method: 'DELETE',
+    headers: getHeaders(),
+  });
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text || 'Failed to delete account');
+  }
+}
+
+export function logout() {
+  localStorage.removeItem('token');
+}

7project/frontend/src/appearance.ts

@@ -0,0 +1,38 @@
+export type Theme = 'system' | 'light' | 'dark';
+export type FontSize = 'small' | 'medium' | 'large';
+
+const THEME_KEY = 'app_theme';
+const FONT_KEY = 'app_font_size';
+
+export function applyTheme(theme: Theme) {
+  const body = document.body;
+  const effective = theme === 'system' ? (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : theme;
+  body.setAttribute('data-theme', effective);
+}
+
+export function applyFontSize(size: FontSize) {
+  const root = document.documentElement;
+  const map: Record<FontSize, string> = {
+    small: '14px',
+    medium: '16px',
+    large: '18px',
+  };
+  root.style.fontSize = map[size];
+}
+
+export function saveAppearance(theme: Theme, size: FontSize) {
+  localStorage.setItem(THEME_KEY, theme);
+  localStorage.setItem(FONT_KEY, size);
+}
+
+export function loadAppearance(): { theme: Theme; size: FontSize } {
+  const theme = (localStorage.getItem(THEME_KEY) as Theme) || 'light';
+  const size = (localStorage.getItem(FONT_KEY) as FontSize) || 'medium';
+  return { theme, size };
+}
+
+export function applyAppearanceFromStorage() {
+  const { theme, size } = loadAppearance();
+  applyTheme(theme);
+  applyFontSize(size);
+}

7project/frontend/src/main.tsx

@@ -1,7 +1,11 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
+import './ui.css'
 import App from './App.tsx'
+import { applyAppearanceFromStorage } from './appearance'
+
+applyAppearanceFromStorage()
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

7project/frontend/src/pages/AccountPage.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from 'react';
+import { deleteMe, getMe, type UpdateMeInput, type User, updateMe } from '../api';
+
+export default function AccountPage({ onDeleted }: { onDeleted: () => void }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const u = await getMe();
+        setUser(u);
+        setFirstName(u.first_name || '');
+        setLastName(u.last_name || '');
+      } catch (e: any) {
+        setError(e?.message || 'Failed to load account');
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, []);
+
+  async function handleSave(e: React.FormEvent) {
+    e.preventDefault();
+    setSaving(true);
+    setError(null);
+    try {
+      const payload: UpdateMeInput = { first_name: firstName || null as any, last_name: lastName || null as any };
+      const updated = await updateMe(payload);
+      setUser(updated);
+    } catch (e: any) {
+      setError(e?.message || 'Failed to update');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleDelete() {
+    if (!confirm('Are you sure you want to delete your account? This cannot be undone.')) return;
+    try {
+      await deleteMe();
+      onDeleted();
+    } catch (e: any) {
+      alert(e?.message || 'Failed to delete account');
+    }
+  }
+
+  return (
+    <section className="card">
+      <h3>Account</h3>
+      {loading ? (
+        <div>Loading…</div>
+      ) : error ? (
+        <div style={{ color: 'crimson' }}>{error}</div>
+      ) : !user ? (
+        <div>Not signed in</div>
+      ) : (
+        <div className="space-y">
+          <div className="muted">Email: <strong>{user.email}</strong></div>
+          <form onSubmit={handleSave} className="space-y">
+            <div className="form-row">
+              <div>
+                <label className="muted">First name</label>
+                <input className="input" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
+              </div>
+              <div>
+                <label className="muted">Last name</label>
+                <input className="input" value={lastName} onChange={(e) => setLastName(e.target.value)} />
+              </div>
+            </div>
+            <div className="actions" style={{ justifyContent: 'flex-end' }}>
+              <button className="btn primary" type="submit" disabled={saving}>{saving ? 'Saving…' : 'Save changes'}</button>
+            </div>
+          </form>
+          <div className="actions" style={{ justifyContent: 'space-between' }}>
+            <div className="muted"></div>
+            <button className="btn" style={{ borderColor: 'crimson', color: 'crimson' }} onClick={handleDelete}>Delete account</button>
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}

7project/frontend/src/pages/AppearancePage.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import { applyFontSize, applyTheme, loadAppearance, saveAppearance, type FontSize, type Theme } from '../appearance';
+
+export default function AppearancePage() {
+  const [theme, setTheme] = useState<Theme>('light');
+  const [size, setSize] = useState<FontSize>('medium');
+
+  useEffect(() => {
+    const { theme, size } = loadAppearance();
+    setTheme(theme);
+    setSize(size);
+  }, []);
+
+  function onThemeChange(next: Theme) {
+    setTheme(next);
+    applyTheme(next);
+    saveAppearance(next, size);
+  }
+
+  function onSizeChange(next: FontSize) {
+    setSize(next);
+    applyFontSize(next);
+    saveAppearance(theme, next);
+  }
+
+  return (
+    <section className="card">
+      <h3>Appearance</h3>
+      <div className="space-y">
+        <div>
+          <div className="muted" style={{ marginBottom: 6 }}>Theme</div>
+          <div className="segmented">
+            <button className={theme === 'light' ? 'active' : ''} onClick={() => onThemeChange('light')}>Light</button>
+            <button className={theme === 'dark' ? 'active' : ''} onClick={() => onThemeChange('dark')}>Dark</button>
+            <button className={theme === 'system' ? 'active' : ''} onClick={() => onThemeChange('system')}>System</button>
+          </div>
+        </div>
+        <div>
+          <div className="muted" style={{ marginBottom: 6 }}>Font size</div>
+          <div className="segmented">
+            <button className={size === 'small' ? 'active' : ''} onClick={() => onSizeChange('small')}>Small</button>
+            <button className={size === 'medium' ? 'active' : ''} onClick={() => onSizeChange('medium')}>Medium</button>
+            <button className={size === 'large' ? 'active' : ''} onClick={() => onSizeChange('large')}>Large</button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

7project/frontend/src/pages/Dashboard.tsx

@@ -0,0 +1,200 @@
+import { useEffect, useMemo, useState } from 'react';
+import { type Category, type Transaction, createTransaction, getCategories, getTransactions } from '../api';
+import AccountPage from './AccountPage';
+import AppearancePage from './AppearancePage';
+import { BACKEND_URL } from '../config';
+
+function formatAmount(n: number) {
+  return new Intl.NumberFormat(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(n);
+}
+
+export default function Dashboard({ onLogout }: { onLogout: () => void }) {
+  const [current, setCurrent] = useState<'home' | 'account' | 'appearance'>('home');
+  const [transactions, setTransactions] = useState<Transaction[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Start CSAS (George) OAuth after login
+  async function startOauthCsas() {
+    const base = BACKEND_URL.replace(/\/$/, '');
+    const url = `${base}/auth/csas/authorize`;
+    try {
+      const token = localStorage.getItem('token');
+      const res = await fetch(url, {
+        credentials: 'include',
+        headers: token ? { Authorization: `Bearer ${token}` } : undefined,
+      });
+      const data = await res.json();
+      if (data && typeof data.authorization_url === 'string') {
+        window.location.assign(data.authorization_url);
+      } else {
+        alert('Cannot start CSAS OAuth.');
+      }
+    } catch (e) {
+      alert('Cannot start CSAS OAuth.');
+    }
+  }
+
+  // New transaction form state
+  const [amount, setAmount] = useState<string>('');
+  const [description, setDescription] = useState('');
+  const [selectedCategoryId, setSelectedCategoryId] = useState<number | ''>('');
+
+  // Filters
+  const [minAmount, setMinAmount] = useState<string>('');
+  const [maxAmount, setMaxAmount] = useState<string>('');
+  const [filterCategoryId, setFilterCategoryId] = useState<number | ''>('');
+  const [searchText, setSearchText] = useState('');
+
+  async function loadAll() {
+    setLoading(true);
+    setError(null);
+    try {
+      const [txs, cats] = await Promise.all([getTransactions(), getCategories()]);
+      setTransactions(txs);
+      setCategories(cats);
+    } catch (err: any) {
+      setError(err?.message || 'Failed to load data');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => { loadAll(); }, []);
+
+  const last10 = useMemo(() => {
+    const sorted = [...transactions].sort((a, b) => b.id - a.id);
+    return sorted.slice(0, 10);
+  }, [transactions]);
+
+  const filtered = useMemo(() => {
+    let arr = last10;
+    const min = minAmount !== '' ? Number(minAmount) : undefined;
+    const max = maxAmount !== '' ? Number(maxAmount) : undefined;
+    if (min !== undefined) arr = arr.filter(t => t.amount >= min);
+    if (max !== undefined) arr = arr.filter(t => t.amount <= max);
+    if (filterCategoryId !== '') arr = arr.filter(t => t.category_ids.includes(filterCategoryId as number));
+    if (searchText.trim()) arr = arr.filter(t => (t.description || '').toLowerCase().includes(searchText.toLowerCase()));
+    return arr;
+  }, [last10, minAmount, maxAmount, filterCategoryId, searchText]);
+
+  function categoryNameById(id: number) { return categories.find(c => c.id === id)?.name || `#${id}`; }
+
+  async function handleCreate(e: React.FormEvent) {
+    e.preventDefault();
+    if (!amount) return;
+    const payload = {
+      amount: Number(amount),
+      description: description || undefined,
+      category_ids: selectedCategoryId !== '' ? [Number(selectedCategoryId)] : undefined,
+    };
+    try {
+      const created = await createTransaction(payload);
+      setTransactions(prev => [created, ...prev]);
+      setAmount(''); setDescription(''); setSelectedCategoryId('');
+    } catch (err: any) {
+      alert(err?.message || 'Failed to create transaction');
+    }
+  }
+
+  return (
+    <div className="app-layout">
+      <aside className="sidebar">
+        <div className="logo">7Project</div>
+        <nav className="nav">
+          <button className={current === 'home' ? 'active' : ''} onClick={() => setCurrent('home')}>Home</button>
+          <button className={current === 'account' ? 'active' : ''} onClick={() => setCurrent('account')}>Account</button>
+          <button className={current === 'appearance' ? 'active' : ''} onClick={() => setCurrent('appearance')}>Appearance</button>
+        </nav>
+      </aside>
+      <div className="content">
+        <div className="topbar">
+          <h2 style={{ margin: 0 }}>{current === 'home' ? 'Dashboard' : current === 'account' ? 'Account' : 'Appearance'}</h2>
+          <div className="actions">
+            <span className="user muted">Signed in</span>
+            <button className="btn" onClick={onLogout}>Logout</button>
+          </div>
+        </div>
+        <main className="page space-y">
+          {current === 'home' && (
+            <>
+              <section className="card">
+                <h3>Bank connections</h3>
+                <p className="muted">Connect your CSAS (George) account.</p>
+                <button className="btn" onClick={startOauthCsas}>Connect CSAS (George)</button>
+              </section>
+
+              <section className="card">
+                <h3>Add Transaction</h3>
+                <form onSubmit={handleCreate} className="form-row">
+                  <input className="input" type="number" step="0.01" placeholder="Amount" value={amount} onChange={(e) => setAmount(e.target.value)} required />
+                  <input className="input" type="text" placeholder="Description (optional)" value={description} onChange={(e) => setDescription(e.target.value)} />
+                  <select className="input" value={selectedCategoryId} onChange={(e) => setSelectedCategoryId(e.target.value ? Number(e.target.value) : '')}>
+                    <option value="">No category</option>
+                    {categories.map(c => (<option key={c.id} value={c.id}>{c.name}</option>))}
+                  </select>
+                  <button className="btn primary" type="submit">Add</button>
+                </form>
+              </section>
+
+              <section className="card">
+                <h3>Filters</h3>
+                <div className="form-row">
+                  <input className="input" type="number" step="0.01" placeholder="Min amount" value={minAmount} onChange={(e) => setMinAmount(e.target.value)} />
+                  <input className="input" type="number" step="0.01" placeholder="Max amount" value={maxAmount} onChange={(e) => setMaxAmount(e.target.value)} />
+                  <select className="input" value={filterCategoryId} onChange={(e) => setFilterCategoryId(e.target.value ? Number(e.target.value) : '')}>
+                    <option value="">All categories</option>
+                    {categories.map(c => (<option key={c.id} value={c.id}>{c.name}</option>))}
+                  </select>
+                  <input className="input" type="text" placeholder="Search in description" value={searchText} onChange={(e) => setSearchText(e.target.value)} />
+                </div>
+              </section>
+
+              <section className="card">
+                <h3>Latest Transactions (last 10)</h3>
+                {loading ? (
+                  <div>Loading…</div>
+                ) : error ? (
+                  <div style={{ color: 'crimson' }}>{error}</div>
+                ) : filtered.length === 0 ? (
+                  <div>No transactions</div>
+                ) : (
+                  <table className="table">
+                    <thead>
+                      <tr>
+                        <th>ID</th>
+                        <th style={{ textAlign: 'right' }}>Amount</th>
+                        <th>Description</th>
+                        <th>Categories</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {filtered.map(t => (
+                        <tr key={t.id}>
+                          <td>{t.id}</td>
+                          <td className="amount">{formatAmount(t.amount)}</td>
+                          <td>{t.description || ''}</td>
+                          <td>{t.category_ids.map(id => categoryNameById(id)).join(', ')}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                )}
+              </section>
+            </>
+          )}
+
+          {current === 'account' && (
+            // lazy import avoided for simplicity
+            <AccountPage onDeleted={onLogout} />
+          )}
+
+          {current === 'appearance' && (
+            <AppearancePage />
+          )}
+        </main>
+      </div>
+    </div>
+  );
+}

7project/frontend/src/pages/LoginRegisterPage.tsx

@@ -0,0 +1,107 @@
+import { useState, useEffect } from 'react';
+import { login, register } from '../api';
+import { BACKEND_URL } from '../config';
+
+// Minimal helper to start OAuth: fetch authorization_url and redirect
+async function startOauth(provider: 'mojeid' | 'bankid') {
+  const base = BACKEND_URL.replace(/\/$/, '');
+  const url = `${base}/auth/${provider}/authorize`;
+  try {
+    const res = await fetch(url, { credentials: 'include' });
+    const data = await res.json();
+    if (data && typeof data.authorization_url === 'string') {
+      window.location.assign(data.authorization_url);
+    } else {
+      alert('Cannot start OAuth.');
+    }
+  } catch (e) {
+    alert('Cannot start OAuth.');
+  }
+}
+
+export default function LoginRegisterPage({ onLoggedIn }: { onLoggedIn: () => void }) {
+  const [mode, setMode] = useState<'login' | 'register'>('login');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      if (mode === 'login') {
+        await login(email, password);
+        onLoggedIn();
+      } else {
+        await register(email, password, firstName || undefined, lastName || undefined);
+        // After register, prompt login automatically
+        await login(email, password);
+        onLoggedIn();
+      }
+    } catch (err: any) {
+      setError(err?.message || 'Operation failed');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  // Add this useEffect hook
+  useEffect(() => {
+    // When the component mounts, add a class to the body
+    document.body.classList.add('auth-page');
+
+    // When the component unmounts, remove the class
+    return () => {
+      document.body.classList.remove('auth-page');
+    };
+  }, []); // The empty array ensures this runs only once
+
+  // The JSX no longer needs the wrapper div
+  return (
+    <div className="card" style={{ width: 420 }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
+        <h2 style={{ margin: 0 }}>{mode === 'login' ? 'Welcome back' : 'Create your account'}</h2>
+        <div className="segmented">
+          <button className={mode === 'login' ? 'active' : ''} type="button" onClick={() => setMode('login')}>Login</button>
+          <button className={mode === 'register' ? 'active' : ''} type="button" onClick={() => setMode('register')}>Register</button>
+        </div>
+      </div>
+      <form onSubmit={handleSubmit} className="space-y">
+        <div>
+            <label className="muted">Email</label>
+            <input className="input" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} />
+          </div>
+          <div>
+            <label className="muted">Password</label>
+            <input className="input" type="password" required value={password} onChange={(e) => setPassword(e.target.value)} />
+          </div>
+          {mode === 'register' && (
+            <div className="form-row">
+              <div>
+                <label className="muted">First name (optional)</label>
+                <input className="input" type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
+              </div>
+              <div>
+                <label className="muted">Last name (optional)</label>
+                <input className="input" type="text" value={lastName} onChange={(e) => setLastName(e.target.value)} />
+              </div>
+            </div>
+          )}
+          {error && <div style={{ color: 'crimson' }}>{error}</div>}
+          <div className="actions" style={{ justifyContent: 'space-between' }}>
+            <div className="muted">Or continue with</div>
+            <div className="actions">
+              <button type="button" className="btn" onClick={() => startOauth('mojeid')}>MojeID</button>
+              <button type="button" className="btn" onClick={() => startOauth('bankid')}>BankID</button>
+              <button className="btn primary" type="submit" disabled={loading}>{loading ? 'Please wait…' : (mode === 'login' ? 'Login' : 'Register')}</button>
+            </div>
+          </div>
+      </form>
+    </div>
+  );
+}
+

7project/frontend/src/ui.css

@@ -0,0 +1,85 @@
+:root {
+  --bg: #f7f7fb;
+  --panel: #ffffff;
+  --text: #9aa3b2;
+  --muted: #6b7280;
+  --primary: #6f49fe;
+  --primary-600: #5a37fb;
+  --border: #e5e7eb;
+  --radius: 12px;
+  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.08);
+
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  color: var(--text);
+}
+
+* { box-sizing: border-box; }
+
+html, body, #root { height: 100%; }
+
+body { background: var(--bg); margin: 0; display: block; }
+
+/* Dark theme variables */
+body[data-theme="dark"] {
+  --bg: #161a2b;
+  --panel: #283046;
+  --text: #283046;
+  --muted: #cbd5e1;
+  --primary: #8b7bff;
+  --primary-600: #7b69ff;
+  --border: #283046;
+}
+
+/* Layout */
+.app-layout { display: grid; grid-template-columns: 260px 1fr; height: 100%; }
+.sidebar { background: #15172a; color: #e5e7eb; display: flex; flex-direction: column; padding: 20px 12px; }
+.sidebar .logo { color: #fff; font-weight: 700; font-size: 18px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
+.nav { margin-top: 12px; display: grid; gap: 4px; }
+.nav a, .nav button { color: #cbd5e1; text-align: left; background: transparent; border: 0; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
+.nav a.active, .nav a:hover, .nav button:hover { background: rgba(255,255,255,0.08); color: #fff; }
+
+.content { display: flex; flex-direction: column; height: 100%; }
+.topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: var(--panel); border-bottom: 1px solid var(--border); }
+.topbar .user { color: var(--muted); }
+.page { padding: 24px; max-width: 1100px; margin: auto; }
+
+/* Cards */
+.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
+.card h3 { margin: 0 0 12px; }
+
+/* Forms */
+.input, select, textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--text); }
+.input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
+.form-row { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0,1fr)); }
+.form-row > * { min-width: 140px; }
+.actions { display: flex; align-items: center; gap: 8px; }
+
+/* Buttons */
+.btn { border: 1px solid var(--border); background: #fff; color: var(--text); padding: 10px 14px; border-radius: 10px; cursor: pointer; }
+.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
+.btn.primary:hover { background: var(--primary-600); }
+.btn.ghost { background: transparent; color: var(--muted); }
+
+/* Tables */
+.table { width: 100%; border-collapse: collapse; }
+.table th, .table td { padding: 10px; border-bottom: 1px solid var(--border); }
+.table th { text-align: left; color: var(--muted); font-weight: 600; }
+.table td.amount { text-align: right; font-variant-numeric: tabular-nums; }
+
+/* Segmented control */
+.segmented { display: inline-flex; background: #f1f5f9; border-radius: 10px; padding: 4px; border: 1px solid var(--border); }
+.segmented button { border: 0; background: transparent; padding: 8px 12px; border-radius: 8px; color: var(--muted); cursor: pointer; }
+.segmented button.active { background: #fff; color: var(--text); box-shadow: var(--shadow); }
+
+/* Auth layout */
+body.auth-page #root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  width: 100%;
+}
+
+/* Utility */
+.muted { color: var(--muted); }
+.space-y > * + * { margin-top: 12px; }