add debug logging

.github/workflows/deploy-pr.yaml

@@ -20,26 +20,13 @@ jobs:
       pr_number: ${{ github.event.pull_request.number }}
     secrets: inherit
 
-  get_urls:
-    if: github.event.action != 'closed'
-    name: Generate Preview URLs
-    uses: ./.github/workflows/url_generator.yml
-    with:
-      runner: vhs
-      mode: pr
-      pr_number: ${{ github.event.pull_request.number }}
-      base_domain: ${{ vars.DEV_BASE_DOMAIN }}
-    secrets: inherit
-
   frontend:
     if: github.event.action != 'closed'
     name: Frontend - Build and Deploy to Cloudflare Pages (PR)
-    needs: [get_urls]
     uses: ./.github/workflows/frontend-pages.yml
     with:
       mode: pr
       pr_number: ${{ github.event.pull_request.number }}
-      backend_url_scheme: ${{ needs.get_urls.outputs.backend_url_scheme }}
     secrets: inherit
 
   deploy:
@@ -49,7 +36,7 @@ jobs:
     concurrency:
       group: pr-${{ github.event.pull_request.number }}
       cancel-in-progress: false
-    needs: [build, frontend, get_urls]
+    needs: [build, frontend]
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -75,24 +62,25 @@ jobs:
           DEV_BASE_DOMAIN: ${{ secrets.BASE_DOMAIN }}
           RABBITMQ_PASSWORD: ${{ secrets.PROD_RABBITMQ_PASSWORD }}
           DB_PASSWORD: ${{ secrets.PROD_DB_PASSWORD }}
+          IMAGE_REPO: ${{ needs.build.outputs.image_repo }}
           DIGEST: ${{ needs.build.outputs.digest }}
-          DOMAIN: "${{ needs.get_urls.outputs.backend_url }}"
-          DOMAIN_SCHEME: "${{ needs.get_urls.outputs.backend_url_scheme }}"
-          FRONTEND_DOMAIN: "${{ needs.get_urls.outputs.frontend_url }}"
-          FRONTEND_DOMAIN_SCHEME: "${{ needs.get_urls.outputs.frontend_url_scheme }}"
         run: |
           PR=${{ github.event.pull_request.number }}
+          if [ -z "$PR" ]; then echo "PR number missing"; exit 1; fi
+          if [ -z "$DEV_BASE_DOMAIN" ]; then echo "Secret DEV_BASE_DOMAIN is required (e.g., dev.example.com)"; exit 1; fi
+          if [ -z "$RABBITMQ_PASSWORD" ]; then echo "Secret DEV_RABBITMQ_PASSWORD is required"; exit 1; fi
+          if [ -z "$DB_PASSWORD" ]; then echo "Secret DEV_DB_PASSWORD is required"; exit 1; fi
           RELEASE=myapp-pr-$PR
           NAMESPACE=pr-$PR
+          DOMAIN=pr-$PR.$DEV_BASE_DOMAIN
+          if [ -z "$IMAGE_REPO" ]; then IMAGE_REPO="lukastrkan/cc-app-demo"; fi
           helm upgrade --install "$RELEASE" ./7project/charts/myapp-chart \
             -n "$NAMESPACE" --create-namespace \
             -f 7project/charts/myapp-chart/values-dev.yaml \
             --set prNumber="$PR" \
             --set deployment="pr-$PR" \
             --set domain="$DOMAIN" \
-            --set domain_scheme="$DOMAIN_SCHEME" \
+            --set image.repository="$IMAGE_REPO" \
-            --set frontend_domain="$FRONTEND_DOMAIN" \
-            --set frontend_domain_scheme="$FRONTEND_DOMAIN_SCHEME" \
             --set image.digest="$DIGEST" \
             --set-string rabbitmq.password="$RABBITMQ_PASSWORD" \
             --set-string database.password="$DB_PASSWORD"
@@ -100,16 +88,19 @@ jobs:
       - name: Post preview URLs as PR comment
         uses: actions/github-script@v7
         env:
-          BACKEND_URL: ${{ needs.get_urls.outputs.backend_url_scheme }}
+          DEV_BASE_DOMAIN: ${{ secrets.BASE_DOMAIN }}
-          FRONTEND_URL: ${{ needs.get_urls.outputs.frontend_url_scheme }}
+          FRONTEND_URL: ${{ needs.frontend.outputs.deployed_url }}
         with:
           script: |
             const pr = context.payload.pull_request;
             if (!pr) { core.setFailed('No pull_request context'); return; }
             const prNumber = pr.number;
-            const backendUrl = process.env.BACKEND_URL || '(not available)';
+            const domainBase = process.env.DEV_BASE_DOMAIN;
+            if (!domainBase) { core.setFailed('DEV_BASE_DOMAIN is required'); return; }
+            const backendDomain = `pr-${prNumber}.${domainBase}`;
+            const backendUrl = `https://${backendDomain}`;
             const frontendUrl = process.env.FRONTEND_URL || '(not available)';
-            const marker = '<!-- preview-comment-marker -->';
+            const marker = '<!-- preview-link -->';
             const body = `${marker}\nPreview environment is running\n- Frontend: ${frontendUrl}\n- Backend: ${backendUrl}\n`;
             const { owner, repo } = context.repo;
             const { data: comments } = await github.rest.issues.listComments({ owner, repo, issue_number: prNumber, per_page: 100 });

.github/workflows/deploy-prod.yaml

@@ -30,28 +30,17 @@ jobs:
       context: 7project/backend
     secrets: inherit
 
-  get_urls:
-    name: Generate Production URLs
-    uses: ./.github/workflows/url_generator.yml
-    with:
-      mode: prod
-      runner: vhs
-      base_domain: ${{ vars.PROD_DOMAIN }}
-    secrets: inherit
-
   frontend:
     name: Frontend - Build and Deploy to Cloudflare Pages (prod)
-    needs: [get_urls]
     uses: ./.github/workflows/frontend-pages.yml
     with:
       mode: prod
-      backend_url_scheme: ${{ needs.get_urls.outputs.backend_url_scheme }}
     secrets: inherit
 
   deploy:
     name: Helm upgrade/install (prod)
     runs-on: vhs
-    needs: [build, frontend, get_urls]
+    needs: [build, frontend]
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -74,31 +63,25 @@ jobs:
 
       - name: Helm upgrade/install prod
         env:
-          DOMAIN: ${{ needs.get_urls.outputs.backend_url }}
+          DOMAIN: ${{ secrets.PROD_DOMAIN }}
-          DOMAIN_SCHEME: ${{ needs.get_urls.outputs.backend_url_scheme }}
-          FRONTEND_DOMAIN: ${{ needs.get_urls.outputs.frontend_url }}
-          FRONTEND_DOMAIN_SCHEME: ${{ needs.get_urls.outputs.frontend_url_scheme }}
           RABBITMQ_PASSWORD: ${{ secrets.PROD_RABBITMQ_PASSWORD }}
           DB_PASSWORD: ${{ secrets.PROD_DB_PASSWORD }}
+          IMAGE_REPO: ${{ needs.build.outputs.image_repo }}
           DIGEST: ${{ needs.build.outputs.digest }}
-          BANKID_CLIENT_ID: ${{ secrets.BANKID_CLIENT_ID }}
-          BANKID_CLIENT_SECRET: ${{ secrets.BANKID_CLIENT_SECRET }}
-          MOJEID_CLIENT_ID: ${{ secrets.MOJEID_CLIENT_ID }}
-          MOJEID_CLIENT_SECRET: ${{ secrets.MOJEID_CLIENT_SECRET }}
-
         run: |
+          if [ -z "$DOMAIN" ]; then
+            echo "Secret PROD_DOMAIN is required (e.g., app.example.com)"; exit 1; fi
+          if [ -z "$RABBITMQ_PASSWORD" ]; then
+            echo "Secret PROD_RABBITMQ_PASSWORD is required"; exit 1; fi
+          if [ -z "$DB_PASSWORD" ]; then
+            echo "Secret PROD_DB_PASSWORD is required"; exit 1; fi
+          if [ -z "$IMAGE_REPO" ]; then IMAGE_REPO="lukastrkan/cc-app-demo"; fi
           helm upgrade --install myapp ./7project/charts/myapp-chart \
             -n prod --create-namespace \
             -f 7project/charts/myapp-chart/values-prod.yaml \
             --set deployment="prod" \
             --set domain="$DOMAIN" \
-            --set domain_scheme="$DOMAIN_SCHEME" \
+            --set image.repository="$IMAGE_REPO" \
-            --set frontend_domain="$FRONTEND_DOMAIN" \
-            --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 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"

.github/workflows/frontend-pages.yml

@@ -15,10 +15,6 @@ on:
         description: 'Cloudflare Pages project name (overrides default)'
         required: false
         type: string
-      backend_url_scheme:
-        description: 'The full scheme URL for the backend (e.g., https://api.example.com)'
-        required: true
-        type: string
     secrets:
       CLOUDFLARE_API_TOKEN:
         required: true
@@ -29,6 +25,14 @@ on:
         description: 'URL of deployed frontend'
         value: ${{ jobs.deploy.outputs.deployed_url }}
 
+# Required repository secrets:
+#   CLOUDFLARE_API_TOKEN     - API token with Pages:Edit (or Account:Workers Scripts:Edit) permissions
+#   CLOUDFLARE_ACCOUNT_ID    - Your Cloudflare account ID
+# Optional repository variables:
+#   CF_PAGES_PROJECT_NAME      - Default Cloudflare Pages project name
+#   PROD_DOMAIN                - App domain for prod releases (e.g., api.example.com or https://api.example.com)
+#   BACKEND_URL_PR_TEMPLATE    - Template for PR backend URL. Use {PR} placeholder for PR number (e.g., https://api-pr-{PR}.example.com)
+
 jobs:
   build:
     name: Build frontend
@@ -50,9 +54,50 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Set backend URL from workflow input
+      - name: Compute backend URL for Vite
+        id: be
+        env:
+          EVENT_NAME: ${{ github.event_name }}
+          PR_NUMBER: ${{ github.event.pull_request.number || inputs.pr_number }}
+          PR_TEMPLATE: ${{ vars.BACKEND_URL_PR_TEMPLATE }}
+          DEV_BASE_DOMAIN: ${{ secrets.BASE_DOMAIN }}
+          PROD_DOMAIN_VAR: ${{ vars.PROD_DOMAIN }}
+          PROD_DOMAIN_SECRET: ${{ secrets.PROD_DOMAIN }}
+          BACKEND_URL_OVERRIDE: ${{ vars.BACKEND_URL || secrets.BACKEND_URL }}
+          MODE: ${{ inputs.mode }}
         run: |
-          echo "VITE_BACKEND_URL=${{ inputs.backend_url_scheme }}" >> $GITHUB_ENV
+          set -euo pipefail
+          URL=""
+          # 1) Explicit override wins (from repo var or secret)
+          if [ -n "${BACKEND_URL_OVERRIDE:-}" ]; then
+            if echo "$BACKEND_URL_OVERRIDE" | grep -Eiq '^https?://'; then
+              URL="$BACKEND_URL_OVERRIDE"
+            else
+              URL="https://${BACKEND_URL_OVERRIDE}"
+            fi
+          else
+            # 2) PR-specific URL when building for PR
+            if [ "${MODE:-}" = "pr" ] || [ "${EVENT_NAME}" = "pull_request" ]; then
+              if [ -n "${PR_TEMPLATE:-}" ] && [ -n "${PR_NUMBER:-}" ] ; then
+                URL="${PR_TEMPLATE//\{PR\}/${PR_NUMBER}}"
+              elif [ -n "${DEV_BASE_DOMAIN:-}" ] && [ -n "${PR_NUMBER:-}" ]; then
+                URL="https://pr-${PR_NUMBER}.${DEV_BASE_DOMAIN}"
+              fi
+            fi
+            # 3) Fallback to PROD_DOMAIN (prefer repo var, then secret)
+            if [ -z "$URL" ]; then
+              PROD_DOMAIN="${PROD_DOMAIN_VAR:-${PROD_DOMAIN_SECRET:-}}"
+              if [ -n "$PROD_DOMAIN" ]; then
+                if echo "$PROD_DOMAIN" | grep -Eiq '^https?://'; then
+                  URL="$PROD_DOMAIN"
+                else
+                  URL="https://${PROD_DOMAIN}"
+                fi
+              fi
+            fi
+          fi
+          echo "Using backend URL: ${URL:-<empty>}"
+          echo "VITE_BACKEND_URL=${URL}" >> $GITHUB_ENV
 
       - name: Build
         run: npm run build

.github/workflows/url_generator.yml

@@ -1,74 +0,0 @@
-name: Generate Preview or Production URLs
-
-on:
-  workflow_call:
-    inputs:
-      mode:
-        description: "Build mode: 'prod' or 'pr'"
-        required: true
-        type: string
-      pr_number:
-        description: 'PR number (required when mode=pr)'
-        required: false
-        type: string
-      runner:
-        description: 'The runner to use for this job'
-        required: false
-        type: string
-        default: 'ubuntu-latest'
-      base_domain:
-        description: 'The base domain for production URLs (e.g., example.com)'
-        required: true
-        type: string
-
-    outputs:
-      backend_url:
-        description: "The backend URL without scheme (e.g., api.example.com)"
-        value: ${{ jobs.generate-urls.outputs.backend_url }}
-      frontend_url:
-        description: "The frontend URL without scheme (e.g., app.example.com)"
-        value: ${{ jobs.generate-urls.outputs.frontend_url }}
-      backend_url_scheme:
-        description: "The backend URL with scheme (e.g., https://api.example.com)"
-        value: ${{ jobs.generate-urls.outputs.backend_url_scheme }}
-      frontend_url_scheme:
-        description: "The frontend URL with scheme (e.g., https://app.example.com)"
-        value: ${{ jobs.generate-urls.outputs.frontend_url_scheme }}
-
-jobs:
-  generate-urls:
-    permissions:
-      contents: none
-    runs-on: ${{ inputs.runner }}
-
-    outputs:
-      backend_url: ${{ steps.set_urls.outputs.backend_url }}
-      frontend_url: ${{ steps.set_urls.outputs.frontend_url }}
-      backend_url_scheme: ${{ steps.set_urls.outputs.backend_url_scheme }}
-      frontend_url_scheme: ${{ steps.set_urls.outputs.frontend_url_scheme }}
-
-    steps:
-      - name: Generate URLs
-        id: set_urls
-        env:
-          BASE_DOMAIN: ${{ inputs.base_domain }}
-        run: |
-          set -euo pipefail
-          
-          if [ "${{ inputs.mode }}" = "prod" ]; then
-            BACKEND_URL="api.${BASE_DOMAIN}"
-            FRONTEND_URL="finance.${BASE_DOMAIN}"
-          else
-            # This is your current logic
-            FRONTEND_URL="pr-${{ inputs.pr_number }}.group-8-frontend.pages.dev"
-            BACKEND_URL="api-pr-${{ inputs.pr_number }}.${BASE_DOMAIN}"
-          fi
-
-          FRONTEND_URL_SCHEME="https://$FRONTEND_URL"
-          BACKEND_URL_SCHEME="https://$BACKEND_URL"
-          
-          # This part correctly writes to GITHUB_OUTPUT for the step
-          echo "backend_url_scheme=$BACKEND_URL_SCHEME" >> $GITHUB_OUTPUT
-          echo "frontend_url_scheme=$FRONTEND_URL_SCHEME" >> $GITHUB_OUTPUT
-          echo "backend_url=$BACKEND_URL" >> $GITHUB_OUTPUT
-          echo "frontend_url=$FRONTEND_URL" >> $GITHUB_OUTPUT

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/app.py

@@ -1,5 +1,10 @@
+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
 
@@ -17,6 +22,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,6 +33,28 @@ 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),
+        "request_body": await request.body(),
+        "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"),

7project/charts/myapp-chart/templates/NOTES.txt

@@ -0,0 +1,54 @@
+Thank you for installing myapp-chart.
+
+This chart packages all Kubernetes manifests from the original deployment directory and parameterizes environment, database name (with optional PR suffix), image, and domain for external access.
+
+Namespaces per developer (important):
+- Install each developer's environment into their own namespace using Helm's -n/--namespace flag.
+- No hardcoded namespace is used in templates; resources are created in .Release.Namespace.
+- Example namespaces: dev-alice, dev-bob, pr-123, etc.
+
+Key values:
+- deployment -> used as Database CR name and DB username (MARIADB_DB and MARIADB_USER)
+- image.repository/tag or image.digest -> container image
+- domain -> public FQDN used by TunnelBinding (required to expose app)
+- app/worker names, replicas, ports
+
+Examples:
+- Dev install (Alice):
+  helm upgrade --install myapp ./7project/charts/myapp-chart \
+    -n dev-alice --create-namespace \
+    -f values-dev.yaml \
+    --set domain=alice.demo.example.com \
+    --set-string rabbitmq.password="$RABBITMQ_PASSWORD" \
+    --set-string database.password="$DB_PASSWORD"
+
+- Dev install (Bob):
+  helm upgrade --install myapp ./7project/charts/myapp-chart \
+    -n dev-bob --create-namespace \
+    -f values-dev.yaml \
+    --set domain=bob.demo.example.com
+
+- Prod install (different cleanupPolicy):
+  helm upgrade --install myapp ./7project/charts/myapp-chart \
+    -n prod --create-namespace \
+    -f values-prod.yaml \
+    --set domain=app.example.com
+
+- PR (preview) install with DB name containing PR number (also its own namespace):
+  PR=123
+  helm upgrade --install myapp-pr-$PR ./7project/charts/myapp-chart \
+    -n pr-$PR --create-namespace \
+    -f values-dev.yaml \
+    --set prNumber=$PR \
+    --set deployment=preview-$PR \
+    --set domain=pr-$PR.example.com
+
+- Use a custom deployment identifier to suffix DB name, DB username and Secret name:
+  helm upgrade --install myapp ./7project/charts/myapp-chart \
+    -n dev-alice --create-namespace \
+    -f values-dev.yaml \
+    --set deployment=alice \
+    --set domain=alice.demo.example.com
+
+Render locally (dry run):
+  helm template ./7project/charts/myapp-chart -f values-dev.yaml --set prNumber=456 --set deployment=test --set domain=demo.example.com --namespace dev-test | sed -n '/kind: Database/,$p' | head -n 30

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

@@ -52,22 +52,6 @@ spec:
               value: {{ .Values.rabbitmq.vhost | default "/" | quote }}
             - name: MAIL_QUEUE
               value: {{ .Values.worker.mailQueueName | default "mail_queue" | quote }}
-            - name: MOJEID_CLIENT_ID
-              value: {{ .Values.oauth.mojeid.clientId | quote }}
-            - name: MOJEID_CLIENT_SECRET
-              value: {{ .Values.oauth.mojeid.clientSecret | quote }}
-            - name: BANKID_CLIENT_ID
-              value: {{ .Values.oauth.bankid.clientId | quote }}
-            - name: BANKID_CLIENT_SECRET
-              value: {{ .Values.oauth.bankid.clientSecret | quote }}
-            - name: DOMAIN
-              value: {{ required "Set .Values.domain" .Values.domain | quote }}
-            - name: DOMAIN_SCHEME
-              value: {{ required "Set .Values.domain_scheme" .Values.domain_scheme | quote }}
-            - name: FRONTEND_DOMAIN
-              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 }}
           livenessProbe:
             httpGet:
               path: /

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

@@ -11,10 +11,6 @@ deployment: ""
 # Public domain to expose the app under (used by TunnelBinding fqdn)
 # Set at install time: --set domain=example.com
 domain: ""
-domain_scheme: ""
-
-frontend_domain: ""
-frontend_domain_scheme: ""
 
 image:
   repository: lukastrkan/cc-app-demo
@@ -37,14 +33,6 @@ worker:
 service:
   port: 80
 
-oauth:
-  bankid:
-    clientId: ""
-    clientSecret: ""
-  mojeid:
-    clientId: ""
-    clientSecret: ""
-
 rabbitmq:
   create: true
   replicas: 1

7project/frontend/src/App.css

@@ -1,42 +1 @@
-#root {
+/* App-level styles moved to ui.css for a cleaner layout. */
-  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;
-}

7project/frontend/src/App.tsx

@@ -1,39 +1,39 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react';
-import reactLogo from './assets/react.svg'
+import './App.css';
-import viteLogo from '/vite.svg'
+import LoginRegisterPage from './pages/LoginRegisterPage';
-import './App.css'
+import Dashboard from './pages/Dashboard';
-import { BACKEND_URL } from './config'
+import { logout } from './api';
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [hasToken, setHasToken] = useState<boolean>(!!localStorage.getItem('token'));
+
+  useEffect(() => {
+    // Handle OAuth callback: /oauth-callback?access_token=...&token_type=...
+    if (window.location.pathname === '/oauth-callback') {
+      const params = new URLSearchParams(window.location.search);
+      const token = params.get('access_token');
+      if (token) {
+        localStorage.setItem('token', token);
+        setHasToken(true);
+      }
+      // Clean URL and redirect to home
+      window.history.replaceState({}, '', '/');
+    }
+
+    const onStorage = (e: StorageEvent) => {
+      if (e.key === 'token') setHasToken(!!e.newValue);
+    };
+    window.addEventListener('storage', onStorage);
+    return () => window.removeEventListener('storage', onStorage);
+  }, []);
+
+  if (!hasToken) {
+    return <LoginRegisterPage onLoggedIn={() => setHasToken(true)} />;
+  }
 
   return (
-    <>
+    <Dashboard onLogout={() => { logout(); setHasToken(false); }} />
-      <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>
-    </>
-  )
 }
 
-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,172 @@
+import { useEffect, useMemo, useState } from 'react';
+import { type Category, type Transaction, createTransaction, getCategories, getTransactions } from '../api';
+import AccountPage from './AccountPage';
+import AppearancePage from './AppearancePage';
+
+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);
+
+  // 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>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,96 @@
+import { useState, useEffect } from 'react';
+import { login, register } from '../api';
+import { BACKEND_URL } from '../config';
+
+function oauthUrl(provider: 'mojeid' | 'bankid') {
+  const base = BACKEND_URL.replace(/\/$/, '');
+  const redirect = encodeURIComponent(window.location.origin + '/oauth-callback');
+  return `${base}/auth/${provider}/authorize?redirect_url=${redirect}`;
+}
+
+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">
+              <a className="btn" href={oauthUrl('mojeid')}>MojeID</a>
+              <a className="btn" href={oauthUrl('bankid')}>BankID</a>
+              <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; }

7project/meetings/2025-10-16-meeting.md

@@ -1,53 +0,0 @@
-# Weekly Meeting Notes
-
-- Group 8 - Personal finance tracker
-- Mentor: Jaychander
-
-Keep all meeting notes in the `meetings.md` file in your project folder.
-Just copy the template below for each weekly meeting and fill in the details.
-
-## Administrative Info
-
-- Date: 2025-10-08
-- Attendees: Dejan Ribarovski, Lukas Trkan
-- Notetaker: Dejan Ribarovski
-
-## Progress Update (Before Meeting)
-
-Summary of what has been accomplished since the last meeting in the following categories.
-
-## Action Items from Last Week (During Meeting)
-
-- [x] start coding the app logic
-- [x] start writing the report so it matches the actual progress
-- [x] redo the system diagram so it includes a response flow
-
-### Coding
-Implemented initial functioning version of the app, added OAuth with BankId and MojeID,
-added database snapshots.
-
-### Documentation
-report.md is up to date
-
-## Questions and Topics for Discussion (Before Meeting)
-
-Prepare 3-5 questions and topics you want to discuss with your mentor.
-
-1. What other functionality should be added to the app
-2. Priority for the next week (Testing maybe?)
-3. Question 3
-
-## Discussion Notes (During Meeting)
-
-## Action Items for Next Week (During Meeting)
-
-Last 3 minutes of the meeting, summarize action items.
-
-- [ ] OAuth
-- [ ] CI/CD fix
-- [ ] Database local (multiple bank accounts)
-- [ ] Add tests and set up github pipeline
-- [ ] Frontend imporvment - user experience
-- [ ] make the report more clear
-
----

7project/report.md

@@ -1,4 +1,4 @@
-# Personal finance tracker
+# Project Report
 
 > **Instructions**:
 > This template provides the structure for your project report.
@@ -7,211 +7,126 @@
 
 ## Project Overview
 
-**Project Name**: Personal Finance Tracker
+**Project Name**: [Your project name]
 
 **Group Members**:
 
-- 289229, Lukáš Trkan, lukastrkan
+- Student number, Name, GitHub username
-- 289258, Dejan Ribarovski, derib2613, ribardej
+- Student number, Name, GitHub username
+- Student number, Name, GitHub username
 
 **Brief Description**:
-Our application is a finance tracker, so a person can easily track his cash flow
+[2-3 sentences describing what your application does and its main purpose]
-through multiple bank accounts. Person can label transactions with custom categories
-and later filter by them.
 
 ## Architecture Overview
-Our system is a full‑stack web application composed of a React frontend, a FastAPI backend, a PostgreSQL database, and asynchronous background workers powered by Celery with RabbitMQ. Redis is available for caching/kv and may be used by Celery as a result backend. The backend exposes REST endpoints for authentication (email/password and OAuth), users, categories, and transactions. A thin controller layer (FastAPI routers) lives under app/api. Infrastructure for Kubernetes is provided via OpenTofu (Terraform‑compatible) modules and the application is packaged via a Helm chart.
 
 ### High-Level Architecture
 
+[Describe the overall system architecture. Consider including a diagram using mermaid or linking to an image]
+
 ```mermaid
-flowchart LR
+graph TD
-    proc_queue[Message Queue] --> proc_queue_worker[Worker Service]
+    A[Component A] --> B[Component B]
-    proc_queue_worker --> ext_mail[(Email Service)]
+    B --> C[Component C]
-    proc_cron[Task planner] --> proc_queue
-    proc_queue_worker --> ext_bank[(Bank API)]
-    proc_queue_worker --> db
-    client[Client/Frontend] <--> svc[Backend API]
-    svc --> proc_queue
-    svc <--> db[(Database)]
-    svc <--> cache[(Cache)]
 ```
 
 ### Components
 
-- Frontend (frontend/): React + TypeScript app built with Vite. Talks to the backend via REST, handles login/registration, shows latest transactions, filtering, and allows adding transactions.
+- **Component 1**: [Description of what this component does]
-- Backend API (backend/app): FastAPI app with routers under app/api for auth, categories, and transactions. Uses FastAPI Users for auth (JWT + OAuth), SQLAlchemy ORM, and Pydantic v2 schemas.
+- **Component 2**: [Description of what this component does]
-- Worker service (backend/app/workers): Celery worker handling asynchronous tasks (e.g., sending verification emails, future background processing).
+- **Component 3**: [Description of what this component does]
-- Database (PostgreSQL): Persists users, categories, transactions; schema managed by Alembic migrations.
-- Message Queue (RabbitMQ): Transports background jobs from the API to the worker.
-- Cache/Result Store (Redis): Available for caching or Celery result backend.
-- Infrastructure as Code (tofu/): OpenTofu modules provisioning cluster services (RabbitMQ, Redis, Argo CD, cert-manager, Cloudflare tunnel, etc.).
-- Deployment Chart (charts/myapp-chart/): Helm chart to deploy the application to Kubernetes.
 
 ### Technologies Used
 
-- Backend: Python, FastAPI, FastAPI Users, SQLAlchemy, Pydantic, Alembic, Celery
+- **Backend**: [e.g., Go, Node.js, Python]
-- Frontend: React, TypeScript, Vite
+- **Database**: [e.g., PostgreSQL, MongoDB, Redis]
-- Database: PostgreSQL
+- **Cloud Services**: [e.g., AWS EC2, Google Cloud Run, Azure Functions]
-- Messaging: RabbitMQ 
+- **Container Orchestration**: [e.g., Docker, Kubernetes]
-- Cache: Redis
+- **Other**: [List other significant technologies]
-- Containerization/Orchestration: Docker, Docker Compose (dev), Kubernetes, Helm
-- IaC/Platform: OpenTofu (Terraform), Argo CD, cert-manager, MetalLB, Cloudflare Tunnel, Prometheus
 
 ## Prerequisites
 
 ### System Requirements
 
-- Operating System: Linux, macOS, or Windows
+- Operating System: [e.g., Linux, macOS, Windows]
-- Minimum RAM: 4 GB (8 GB recommended for running backend, frontend, and database together)
+- Minimum RAM: [e.g., 8GB]
-- Storage: 2 GB free (Docker images may require additional space)
+- Storage: [e.g., 10GB free space]
 
 ### Required Software
 
-- Docker Desktop or Docker Engine 24+
+- [Software 1] (version X.X or higher)
-- Docker Compose v2+
+- [Software 2] (version X.X or higher)
-- Node.js 20+ and npm 10+ (for local frontend dev/build)
+- [etc.]
-- Python 3.12+ (for local backend dev outside Docker)
-- PostgreSQL 15+ (optional if running DB outside Docker)
-- Helm 3.12+ and kubectl 1.29+ (for Kubernetes deployment)
-- OpenTofu 1.7+ (for infrastructure provisioning)
 
-### Environment Variables (common)
+### Dependencies
 
-- Backend: SECRET, FRONTEND_URL, BACKEND_URL, DATABASE_URL, RABBITMQ_URL, REDIS_URL 
+```bash
-- OAuth vars (Backend): MOJEID_CLIENT_ID/SECRET, BANKID_CLIENT_ID/SECRET (optional)
+# List key dependencies that need to be installed
-- Frontend: VITE_BACKEND_URL
+# For example:
-
+# Docker Engine 20.10+
-### Dependencies (key libraries)
+# Node.js 18+
-I am not sure what is meant by "key libraries"
+# Go 1.25+
-
+```
-Backend: FastAPI, fastapi-users, SQLAlchemy, pydantic v2, Alembic, Celery  
-Frontend: React, TypeScript, Vite  
-Services: PostgreSQL, RabbitMQ, Redis
 
 ## Build Instructions
 
-You can run the project with Docker Compose (recommended for local development) or run services manually.
+### 1. Clone the Repository
-
-### 1) Clone the Repository
 
 ```bash
-git clone https://github.com/dat515-2025/Group-8.git
+git clone [your-repository-url]
-cd 7project
+cd [repository-name]
 ```
 
-### 2) Install dependencies
+### 2. Install Dependencies
-Backend
+
 ```bash
-# In 7project/backend
+# Provide step-by-step commands
-python3.12 -m venv .venv
+# For example:
-source .venv/bin/activate  # Windows: .venv\Scripts\activate
+# npm install
-pip install -r requirements.txt
+# go mod download
 ```
-Frontend
+
+### 3. Build the Application
+
 ```bash
-# In 7project/frontend
+# Provide exact build commands
-npm install
+# For example:
+# make build
+# docker build -t myapp .
 ```
 
-### 3) Manual Local Run
+### 4. Configuration
 
-Backend
 ```bash
-# From the 7project/ directory
+# Any configuration steps needed
-docker compose up --build
+# Environment variables to set
-# This starts: PostgreSQL, RabbitMQ/Redis (if defined)
+# Configuration files to create
-
-# Set environment variables (or create .env file)
-export SECRET=CHANGE_ME_SECRET
-export BACKEND_URL=http://127.0.0.1:8000
-export FRONTEND_URL=http://localhost:5173
-export DATABASE_URL=postgresql+asyncpg://user:password@127.0.0.1:5432/app
-export RABBITMQ_URL=amqp://guest:guest@127.0.0.1:5672/
-export REDIS_URL=redis://127.0.0.1:6379/0
-
-# Apply DB migrations (Alembic)
-# From 7project/backend
-alembic upgrade head
-
-# Run API
-uvicorn app.app:fastApi --reload --host 0.0.0.0 --port 8000
-
-# Run Celery worker (optional, for emails/background tasks)
-celery -A app.celery_app.celery_app worker -l info
 ```
 
-Frontend
-```bash
-# Configure backend URL for dev
-echo 'VITE_BACKEND_URL=http://127.0.0.1:8000' > .env
-npm run dev
-# Open http://localhost:5173
-```
-
-- Backend default: http://127.0.0.1:8000 (OpenAPI at /docs)
-- Frontend default: http://localhost:5173
-
-If needed, adjust compose services/ports in compose.yml.
-
-
 ## Deployment Instructions
 
-### Local (Docker Compose)
+### Local Deployment
 
-Described in the previous section (Manual Local Run)
-
-### Kubernetes (via OpenTofu + Helm)
-
-1) Provision platform services (RabbitMQ/Redis/ingress/tunnel/etc.) with OpenTofu
 ```bash
-cd tofu
+# Step-by-step commands for local deployment
-# copy and edit variables
+# For example:
-cp terraform.tfvars.example terraform.tfvars
+# docker-compose up -d
-# authenticate to your cluster/cloud as needed, then:
+# kubectl apply -f manifests/
-tofu init
-tofu plan
-tofu apply
 ```
 
-2) Deploy the app using Helm
+### Cloud Deployment
-```bash
-# Set the namespace
-kubectl create namespace myapp || true
 
-# Install/upgrade the chart with required values
-helm upgrade --install myapp charts/myapp-chart \
-  -n myapp \
-  -f charts/myapp-chart/values.yaml \
-  --set image.backend.repository=myorg/myapp-backend \
-  --set image.backend.tag=latest \
-  --set env.BACKEND_URL="https://myapp.example.com" \
-  --set env.FRONTEND_URL="https://myapp.example.com" \
-  --set env.SECRET="CHANGE_ME_SECRET"
-```
-Adjust values to your registry and domain. The chart’s NOTES.txt includes additional examples.
-
-3) Expose and access
-- If using Cloudflare Tunnel or an ingress, configure DNS accordingly (see tofu/modules/cloudflare and deployment/tunnel.yaml).
-- For quick testing without ingress:
 ```bash
-kubectl -n myapp port-forward deploy/myapp-backend 8000:8000
+# Commands for cloud deployment
-kubectl -n myapp port-forward deploy/myapp-frontend 5173:80
+# Include any cloud-specific setup
 ```
 
 ### Verification
 
 ```bash
-# Check pods
+# Commands to verify deployment worked
-kubectl -n myapp get pods
+# How to check if services are running
-
+# Example health check endpoints
-# Backend health
-curl -i http://127.0.0.1:8000/
-# OpenAPI
-open http://127.0.0.1:8000/docs
-
-# Frontend (if port-forwarded)
-open http://localhost:5173
 ```
 
 ## Testing Instructions
@@ -241,38 +156,19 @@ open http://localhost:5173
 
 ## Usage Examples
 
-All endpoints are documented at OpenAPI: http://127.0.0.1:8000/docs
+### Basic Usage
-
-### Auth: Register and Login (JWT)
 
 ```bash
-# Register
+# Examples of how to use the application
-curl -X POST http://127.0.0.1:8000/auth/register \
+# Common commands or API calls
-  -H 'Content-Type: application/json' \
+# Sample data or test scenarios
-  -d '{
-    "email": "user@example.com",
-    "password": "StrongPassw0rd",
-    "first_name": "Jane",
-    "last_name": "Doe"
-  }'
-
-# Login (JWT)
-TOKEN=$(curl -s -X POST http://127.0.0.1:8000/auth/jwt/login \
-  -H 'Content-Type: application/x-www-form-urlencoded' \
-  -d 'username=user@example.com&password=StrongPassw0rd' | jq -r .access_token)
-
-echo $TOKEN
-
-# Call a protected route
-curl -H "Authorization: Bearer $TOKEN" http://127.0.0.1:8000/authenticated-route
 ```
 
-### Frontend
+### Advanced Features
 
-- Start with: npm run dev in 7project/frontend
+```bash
-- Ensure VITE_BACKEND_URL is set to the backend URL (e.g., http://127.0.0.1:8000)
+# Examples showcasing advanced functionality
-- Open http://localhost:5173
+```
-- Login, view latest transactions, filter, and add new transactions from the UI.
 
 ---
 
@@ -320,17 +216,17 @@ curl -H "Authorization: Bearer $TOKEN" http://127.0.0.1:8000/authenticated-route
 > Link to the specific commit on GitHub for each contribution.
 
 | Task/Component                                                      | Assigned To | Status        | Time Spent | Difficulty | Notes       |
-|-----------------------------------------------------------------------|-------------| ------------- |----------------|------------| ----------- |
+| ------------------------------------------------------------------- | ----------- | ------------- | ---------- | ---------- | ----------- |
-| [Project Setup & Repository](https://github.com/dat515-2025/Group-8#) | Lukas       | ✅ Complete    | [X hours]      | Medium     | [Any notes] |
+| Project Setup & Repository                                          | [Name]      | ✅ Complete    | [X hours]  | Medium     | [Any notes] |
-| [Design Document](https://github.com/dat515-2025/Group-8/blob/main/6design/design.md)          | Both        | ✅ Complete    | 2 Hours        | Easy       | [Any notes] |
+| [Design Document](https://github.com/dat515-2025/group-name)         | [Name]      | ✅ Complete    | [X hours]  | Easy       | [Any notes] |
-| [Backend API Development](https://github.com/dat515-2025/Group-8/tree/main/7project/backend/app/api)  | Dejan       | ✅ Complete    | 10 hours       | Medium     | [Any notes] |
+| [Backend API Development](https://github.com/dat515-2025/group-name) | [Name]      | ✅ Complete    | [X hours]  | Hard       | [Any notes] |
-| [Database Setup & Models](https://github.com/dat515-2025/Group-8/tree/main/7project/backend/app/models)  | Lukas       | ✅ Complete    | [X hours]      | Medium     | [Any notes] |
+| [Database Setup & Models](https://github.com/dat515-2025/group-name) | [Name]      | ✅ Complete    | [X hours]  | Medium     | [Any notes] |
-| [Frontend Development](https://github.com/dat515-2025/Group-8/tree/main/7project/frontend)     | Dejan       | 🔄 In Progress | 7 hours so far | Medium     | [Any notes] |
+| [Frontend Development](https://github.com/dat515-2025/group-name)    | [Name]      | 🔄 In Progress | [X hours]  | Medium     | [Any notes] |
-| [Docker Configuration](https://github.com/dat515-2025/Group-8/blob/main/7project/compose.yml)     | Lukas       | ✅ Complete    | [X hours]      | Easy       | [Any notes] |
+| [Docker Configuration](https://github.com/dat515-2025/group-name)    | [Name]      | ✅ Complete    | [X hours]  | Easy       | [Any notes] |
-| [Cloud Deployment](https://github.com/dat515-2025/Group-8/blob/main/7project/deployment/app-demo-deployment.yaml)         | Lukas       | ✅ Complete    | [X hours]      | Hard       | [Any notes] |
+| [Cloud Deployment](https://github.com/dat515-2025/group-name)        | [Name]      | ✅ Complete    | [X hours]  | Hard       | [Any notes] |
-| [Testing Implementation](https://github.com/dat515-2025/group-name)   | Dejan       | ❌ Not Started     | [X hours]      | Medium     | [Any notes] |
+| [Testing Implementation](https://github.com/dat515-2025/group-name)  | [Name]      | ⏳ Pending     | [X hours]  | Medium     | [Any notes] |
-| [Documentation](https://github.com/dat515-2025/group-name)            | Both        | ❌ Not Started   | [X hours]      | Easy       | [Any notes] |
+| [Documentation](https://github.com/dat515-2025/group-name)           | [Name]      | ✅ Complete    | [X hours]  | Easy       | [Any notes] |
-| [Presentation Video](https://github.com/dat515-2025/group-name)       | Both        | ❌ Not Started     | [X hours]      | Medium     | [Any notes] |
+| [Presentation Video](https://github.com/dat515-2025/group-name)      | [Name]      | ✅ Complete    | [X hours]  | Medium     | [Any notes] |
 
 **Legend**: ✅ Complete | 🔄 In Progress | ⏳ Pending | ❌ Not Started
 
@@ -348,16 +244,25 @@ curl -H "Authorization: Bearer $TOKEN" http://127.0.0.1:8000/authenticated-route
 | [Date]    | Documentation       | [X.X]      | Updated README and design doc       |
 | **Total** |                     | **[XX.X]** |                                     |
 
-### Dejan
+### [Team Member 2 Name]
 
 | Date      | Activity             | Hours      | Description                               |
-|-------------|----------------------|--------|--------------------------------|
+| --------- | -------------------- | ---------- | ----------------------------------------- |
-| 25.9.       | Design               | 1.5    | 6design                        |
+| [Date]    | Frontend Development | [X.X]      | Created user interface mockups            |
-| 9-11.10.    | Backend APIs         | 10     | Implemented Backend APIs       |
+| [Date]    | Integration          | [X.X]      | Connected frontend to backend API         |
-| 13-15.10.   | Frontend Development | 6.5    | Created user interface mockups |
+| [Date]    | Deployment           | [X.X]      | Docker configuration and cloud deployment |
-| Continually | Documantation        | 3      | Documenting the dev process    |
+| [Date]    | Testing              | [X.X]      | End-to-end testing                        |
-| **Total**   |                      | **21** |                                |
+| **Total** |                      | **[XX.X]** |                                           |
 
+### [Team Member 3 Name] (if applicable)
+
+| Date      | Activity                 | Hours      | Description                      |
+| --------- | ------------------------ | ---------- | -------------------------------- |
+| [Date]    | Database Design          | [X.X]      | Schema design and implementation |
+| [Date]    | Cloud Configuration      | [X.X]      | AWS/GCP setup and configuration  |
+| [Date]    | Performance Optimization | [X.X]      | Caching and query optimization   |
+| [Date]    | Monitoring               | [X.X]      | Logging and monitoring setup     |
+| **Total** |                          | **[XX.X]** |                                  |
 
 ### Group Total: [XXX.X] hours
 
@@ -387,8 +292,11 @@ curl -H "Authorization: Bearer $TOKEN" http://127.0.0.1:8000/authenticated-route
 
 [Personal reflection on growth, challenges, and learning]
 
+#### [Team Member 3 Name] (if applicable)
+
+[Personal reflection on growth, challenges, and learning]
 
 ---
 
 **Report Completion Date**: [Date]
-**Last Updated**: 15.10.2025
+**Last Updated**: [Date]