🔖 Release version 0.9.0

[skip ci]

.env

@@ -1,6 +1,14 @@
 # Domain
 # This would be set to the production domain with an env var on deployment
+# used by Traefik to transmit traffic and aqcuire TLS certificates
 DOMAIN=localhost
+# To test the local Traefik config
+# DOMAIN=localhost.tiangolo.com
+
+# Used by the backend to generate links in emails to the frontend
+FRONTEND_HOST=http://localhost:5173
+# In staging and production, set this env var to the frontend host, e.g.
+# FRONTEND_HOST=https://dashboard.example.com
 
 # Environment: local, staging, production
 ENVIRONMENT=local

.github/dependabot.yml

@@ -1,16 +1,46 @@
 version: 2
 updates:
   # GitHub Actions
-  - package-ecosystem: "github-actions"
+  - package-ecosystem: github-actions
-    directory: "/"
+    directory: /
     schedule:
-      interval: "daily"
+      interval: daily
     commit-message:
       prefix: ⬆
-  # Python
+    labels: [dependencies, internal]
-  - package-ecosystem: "pip"
+  # Python uv
-    directory: "/"
+  - package-ecosystem: uv
+    directory: /backend
     schedule:
-      interval: "daily"
+      interval: weekly
     commit-message:
       prefix: ⬆
+    labels: [dependencies, internal]
+  # npm
+  - package-ecosystem: npm
+    directory: /frontend
+    schedule:
+      interval: weekly
+    commit-message:
+      prefix: ⬆
+    labels: [dependencies, internal]
+    ignore:
+      - dependency-name: "@hey-api/openapi-ts"
+  # Docker
+  - package-ecosystem: docker
+    directories:
+      - /backend
+      - /frontend
+    schedule:
+      interval: weekly
+    commit-message:
+      prefix: ⬆
+    labels: [dependencies, internal]
+  # Docker Compose
+  - package-ecosystem: docker-compose
+    directory: /
+    schedule:
+      interval: weekly
+    commit-message:
+      prefix: ⬆
+    labels: [dependencies, internal]

.github/labeler.yml

@@ -0,0 +1,25 @@
+docs:
+  - all:
+    - changed-files:
+      - any-glob-to-any-file:
+        - '**/*.md'
+      - all-globs-to-all-files:
+        - '!frontend/**'
+        - '!backend/**'
+        - '!.github/**'
+        - '!scripts/**'
+        - '!.gitignore'
+        - '!.pre-commit-config.yaml'
+
+internal:
+  - all:
+    - changed-files:
+      - any-glob-to-any-file:
+        - .github/**
+        - scripts/**
+        - .gitignore
+        - .pre-commit-config.yaml
+      - all-globs-to-all-files:
+        - '!./**/*.md'
+        - '!frontend/**'
+        - '!backend/**'

.github/workflows/add-to-project.yml

@@ -0,0 +1,18 @@
+name: Add to Project
+
+on:
+  pull_request_target:
+  issues:
+    types:
+      - opened
+      - reopened
+
+jobs:
+  add-to-project:
+    name: Add to project
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/add-to-project@v1.0.2
+        with:
+          project-url: https://github.com/orgs/fastapi/projects/2
+          github-token: ${{ secrets.PROJECTS_TOKEN }}

.github/workflows/deploy-production.yml

@@ -27,6 +27,6 @@ jobs:
       SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
       - run: docker compose -f docker-compose.yml --project-name ${{ secrets.STACK_NAME_PRODUCTION }} build
       - run: docker compose -f docker-compose.yml --project-name ${{ secrets.STACK_NAME_PRODUCTION }} up -d

.github/workflows/deploy-staging.yml

@@ -27,6 +27,6 @@ jobs:
       SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
       - run: docker compose -f docker-compose.yml --project-name ${{ secrets.STACK_NAME_STAGING }} build
       - run: docker compose -f docker-compose.yml --project-name ${{ secrets.STACK_NAME_STAGING }} up -d

.github/workflows/detect-conflicts.yml

@@ -0,0 +1,19 @@
+name: "Conflict detector"
+on:
+  push:
+  pull_request_target:
+    types: [synchronize]
+
+jobs:
+  main:
+    permissions:
+      contents: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check if PRs have merge conflicts
+        uses: eps1lon/actions-label-merge-conflict@v3
+        with:
+          dirtyLabel: "conflicts"
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          commentOnDirty: "This pull request has a merge conflict that needs to be resolved."

.github/workflows/generate-client.yml

@@ -0,0 +1,60 @@
+name: Generate Client
+
+on:
+  pull_request:
+    types:
+    - opened
+    - synchronize
+
+jobs:
+  generate-client:
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+    steps:
+    # For PRs from forks
+    - uses: actions/checkout@v6
+    # For PRs from the same repo
+    - uses: actions/checkout@v6
+      if: ( github.event_name != 'pull_request' || github.secret_source == 'Actions' )
+      with:
+        ref: ${{ github.head_ref }}
+        token: ${{ secrets.FULL_STACK_FASTAPI_TEMPLATE_REPO_TOKEN }}
+    - uses: actions/setup-node@v6
+      with:
+        node-version: lts/*
+    - uses: actions/setup-python@v6
+      with:
+        python-version: "3.10"
+    - name: Install uv
+      uses: astral-sh/setup-uv@v7
+      with:
+        version: "0.4.15"
+        enable-cache: true
+    - name: Install dependencies
+      run: npm ci
+      working-directory: frontend
+    - run: uv sync
+      working-directory: backend
+    - run: uv run bash scripts/generate-client.sh
+      env:
+        VIRTUAL_ENV: backend/.venv
+        SECRET_KEY: just-for-generating-client
+        POSTGRES_PASSWORD: just-for-generating-client
+        FIRST_SUPERUSER_PASSWORD: just-for-generating-client
+    - name: Add changes to git
+      run: |
+        git config --local user.email "github-actions@github.com"
+        git config --local user.name "github-actions"
+        git add frontend/src/client
+    # Same repo PRs
+    - name: Push changes
+      if: ( github.event_name != 'pull_request' || github.secret_source == 'Actions' )
+      run: |
+        git diff --staged --quiet || git commit -m "✨ Autogenerate frontend client"
+        git push
+    # Fork PRs
+    - name: Check changes
+      if: ( github.event_name == 'pull_request' && github.secret_source != 'Actions' )
+      run: |
+        git diff --staged --quiet || (echo "Changes detected in generated client, run scripts/generate-client.sh and commit the changes" && exit 1)

.github/workflows/issue-manager.yml

@@ -2,30 +2,50 @@ name: Issue Manager
 
 on:
   schedule:
-    - cron: "0 0 * * *"
+    - cron: "21 17 * * *"
   issue_comment:
     types:
       - created
-      - edited
   issues:
     types:
       - labeled
+  pull_request_target:
+    types:
+      - labeled
+  workflow_dispatch:
 
 permissions:
   issues: write
+  pull-requests: write
 
 jobs:
   issue-manager:
+    if: github.repository_owner == 'fastapi'
     runs-on: ubuntu-latest
     steps:
-      - uses: tiangolo/issue-manager@0.5.0
+      - name: Dump GitHub context
+        env:
+          GITHUB_CONTEXT: ${{ toJson(github) }}
+        run: echo "$GITHUB_CONTEXT"
+      - uses: tiangolo/issue-manager@0.6.0
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           config: >
             {
               "answered": {
-                "users": ["tiangolo"],
                 "delay": 864000,
-                "message": "Assuming the original issue was solved, it will be automatically closed now. But feel free to add more comments or create new issues."
+                "message": "Assuming the original need was handled, this will be automatically closed now. But feel free to add more comments or create new issues or PRs."
+              },
+              "waiting": {
+                "delay": 2628000,
+                "message": "As this PR has been waiting for the original user for a while but seems to be inactive, it's now going to be closed. But if there's anyone interested, feel free to create a new PR.",
+                "reminder": {
+                  "before": "P3D",
+                  "message": "Heads-up: this will be closed in 3 days unless there's new activity."
+                }
+              },
+              "invalid": {
+                "delay": 0,
+                "message": "This was marked as invalid and will be closed now. If this is an error, please provide additional details."
               }
             }

.github/workflows/labeler.yml

@@ -0,0 +1,33 @@
+name: Labels
+on:
+  pull_request_target:
+    types:
+      - opened
+      - synchronize
+      - reopened
+      # For label-checker
+      - labeled
+      - unlabeled
+
+jobs:
+  labeler:
+    permissions:
+      contents: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/labeler@v6
+      if: ${{ github.event.action != 'labeled' && github.event.action != 'unlabeled' }}
+    - run: echo "Done adding labels"
+  # Run this after labeler applied labels
+  check-labels:
+    needs:
+      - labeler
+    permissions:
+      pull-requests: read
+    runs-on: ubuntu-latest
+    steps:
+      - uses: docker://agilepathway/pull-request-label-checker:latest
+        with:
+          one_of: breaking,security,feature,bug,refactor,upgrade,docs,lang-all,internal
+          repo_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/latest-changes.yml

@@ -12,9 +12,9 @@ on:
         description: PR number
         required: true
       debug_enabled:
-        description: 'Run the build with tmate debugging enabled (https://github.com/marketplace/actions/debugging-with-tmate)'
+        description: "Run the build with tmate debugging enabled (https://github.com/marketplace/actions/debugging-with-tmate)"
         required: false
-        default: 'false'
+        default: "false"
 
 jobs:
   latest-changes:
@@ -26,16 +26,15 @@ jobs:
         env:
           GITHUB_CONTEXT: ${{ toJson(github) }}
         run: echo "$GITHUB_CONTEXT"
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           # To allow latest-changes to commit to the main branch
           token: ${{ secrets.LATEST_CHANGES }}
-      - uses: docker://tiangolo/latest-changes:0.3.0
+      - uses: tiangolo/latest-changes@0.4.1
-      # - uses: tiangolo/latest-changes@main
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           latest_changes_file: ./release-notes.md
-          latest_changes_header: '## Latest Changes'
+          latest_changes_header: "## Latest Changes"
-          end_regex: '^## '
+          end_regex: "^## "
           debug_logs: true
-          label_header_prefix: '### '
+          label_header_prefix: "### "

.github/workflows/lint-backend.yml

@@ -0,0 +1,28 @@
+name: Lint Backend
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    types:
+      - opened
+      - synchronize
+
+jobs:
+  lint-backend:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+      - name: Set up Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: "3.10"
+      - name: Install uv
+        uses: astral-sh/setup-uv@v7
+        with:
+          version: "0.4.15"
+          enable-cache: true
+      - run: uv run bash scripts/lint.sh
+        working-directory: backend

.github/workflows/playwright.yml

@@ -16,16 +16,42 @@ on:
         default: 'false'
 
 jobs:
+  changes:
+    runs-on: ubuntu-latest
+    # Set job outputs to values from filter step
+    outputs:
+      changed: ${{ steps.filter.outputs.changed }}
+    steps:
+    - uses: actions/checkout@v6
+    # For pull requests it's not necessary to checkout the code but for the main branch it is
+    - uses: dorny/paths-filter@v3
+      id: filter
+      with:
+        filters: |
+          changed:
+            - backend/**
+            - frontend/**
+            - .env
+            - docker-compose*.yml
+            - .github/workflows/playwright.yml
 
-  test:
+  test-playwright:
+    needs:
+      - changes
+    if: ${{ needs.changes.outputs.changed == 'true' }}
     timeout-minutes: 60
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
+      fail-fast: false
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v6
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v6
       with:
         node-version: lts/*
-    - uses: actions/setup-python@v5
+    - uses: actions/setup-python@v6
       with:
         python-version: '3.10'
     - name: Setup tmate session
@@ -33,34 +59,73 @@ jobs:
       if: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.debug_enabled == 'true' }}
       with:
         limit-access-to-actor: true
+    - name: Install uv
+      uses: astral-sh/setup-uv@v7
+      with:
+        version: "0.4.15"
+        enable-cache: true
+    - run: uv sync
+      working-directory: backend
+    - run: npm ci
+      working-directory: frontend
+    - run: uv run bash scripts/generate-client.sh
+      env:
+        VIRTUAL_ENV: backend/.venv
+    - run: docker compose build
+    - run: docker compose down -v --remove-orphans
+    - name: Run Playwright tests
+      run: docker compose run --rm playwright npx playwright test --fail-on-flaky-tests --trace=retain-on-failure --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+    - run: docker compose down -v --remove-orphans
+    - name: Upload blob report to GitHub Actions Artifacts
+      if: ${{ !cancelled() }}
+      uses: actions/upload-artifact@v5
+      with:
+        name: blob-report-${{ matrix.shardIndex }}
+        path: frontend/blob-report
+        include-hidden-files: true
+        retention-days: 1
+
+  merge-playwright-reports:
+    needs:
+      - test-playwright
+      - changes
+    # Merge reports after playwright-tests, even if some shards have failed
+    if: ${{ !cancelled() && needs.changes.outputs.changed == 'true' }}
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v6
+    - uses: actions/setup-node@v6
+      with:
+        node-version: 20
     - name: Install dependencies
       run: npm ci
       working-directory: frontend
-    - name: Install Playwright Browsers
+    - name: Download blob reports from GitHub Actions Artifacts
-      run: npx playwright install --with-deps
+      uses: actions/download-artifact@v6
-      working-directory: frontend
-    - run: docker compose build
-    - run: docker compose down -v --remove-orphans
-    - run: docker compose up -d
-    - name: Run Playwright tests
-      run: npx playwright test
-      working-directory: frontend
-    - run: docker compose down -v --remove-orphans
-    - uses: actions/upload-artifact@v4
-      if: always()
       with:
-        name: playwright-report
+        path: frontend/all-blob-reports
-        path: frontend/playwright-report/
+        pattern: blob-report-*
+        merge-multiple: true
+    - name: Merge into HTML Report
+      run: npx playwright merge-reports --reporter html ./all-blob-reports
+      working-directory: frontend
+    - name: Upload HTML report
+      uses: actions/upload-artifact@v5
+      with:
+        name: html-report--attempt-${{ github.run_attempt }}
+        path: frontend/playwright-report
         retention-days: 30
+        include-hidden-files: true
 
   # https://github.com/marketplace/actions/alls-green#why
-  e2e-alls-green:  # This job does nothing and is only used for the branch protection
+  alls-green-playwright:  # This job does nothing and is only used for the branch protection
     if: always()
     needs:
-      - test
+      - test-playwright
     runs-on: ubuntu-latest
     steps:
       - name: Decide whether the needed jobs succeeded or failed
         uses: re-actors/alls-green@release/v1
         with:
           jobs: ${{ toJSON(needs) }}
+          allowed-skips: test-playwright

.github/workflows/smokeshow.yml

@@ -2,7 +2,7 @@ name: Smokeshow
 
 on:
   workflow_run:
-    workflows: [Test]
+    workflows: [Test Backend]
     types: [completed]
 
 jobs:
@@ -14,19 +14,17 @@ jobs:
       statuses: write
 
     steps:
-      - uses: actions/setup-python@v5
+      - uses: actions/checkout@v6
+      - uses: actions/setup-python@v6
         with:
-          python-version: '3.9'
+          python-version: "3.10"
-
       - run: pip install smokeshow
-
+      - uses: actions/download-artifact@v6
-      - uses: actions/download-artifact@v4
         with:
           name: coverage-html
           path: backend/htmlcov
           github-token: ${{ secrets.GITHUB_TOKEN }}
           run-id: ${{ github.event.workflow_run.id }}
-
       - run: smokeshow upload backend/htmlcov
         env:
           SMOKESHOW_GITHUB_STATUS_DESCRIPTION: Coverage {coverage-percentage}

.github/workflows/test-backend.yml

@@ -0,0 +1,41 @@
+name: Test Backend
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    types:
+      - opened
+      - synchronize
+
+jobs:
+  test-backend:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+      - name: Set up Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: "3.10"
+      - name: Install uv
+        uses: astral-sh/setup-uv@v7
+        with:
+          version: "0.4.15"
+          enable-cache: true
+      - run: docker compose down -v --remove-orphans
+      - run: docker compose up -d db mailcatcher
+      - name: Migrate DB
+        run: uv run bash scripts/prestart.sh
+        working-directory: backend
+      - name: Run tests
+        run: uv run bash scripts/tests-start.sh "Coverage for ${{ github.sha }}"
+        working-directory: backend
+      - run: docker compose down -v --remove-orphans
+      - name: Store coverage files
+        uses: actions/upload-artifact@v5
+        with:
+          name: coverage-html
+          path: backend/htmlcov
+          include-hidden-files: true

.github/workflows/test-docker-compose.yml

@@ -0,0 +1,26 @@
+name: Test Docker Compose
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    types:
+      - opened
+      - synchronize
+
+jobs:
+
+  test-docker-compose:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+      - run: docker compose build
+      - run: docker compose down -v --remove-orphans
+      - run: docker compose up -d --wait backend frontend adminer
+      - name: Test backend is up
+        run: curl http://localhost:8000/api/v1/utils/health-check
+      - name: Test frontend is up
+        run: curl http://localhost:5173
+      - run: docker compose down -v --remove-orphans

.github/workflows/test.yml

@@ -1,49 +0,0 @@
-name: Test
-
-on:
-  push:
-    branches:
-      - master
-  pull_request:
-    types:
-      - opened
-      - synchronize
-
-jobs:
-
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Set up Python
-        uses: actions/setup-python@v5
-        with:
-          python-version: '3.10'
-
-      - run: docker compose build
-      - run: docker compose down -v --remove-orphans
-      - run: docker compose up -d
-      - name: Lint
-        run: docker compose exec -T backend bash /app/scripts/lint.sh
-      - name: Run tests
-        run: docker compose exec -T backend bash /app/tests-start.sh "Coverage for ${{ github.sha }}"
-      - run: docker compose down -v --remove-orphans
-      - name: Store coverage files
-        uses: actions/upload-artifact@v4
-        with:
-          name: coverage-html
-          path: backend/htmlcov
-
-  # https://github.com/marketplace/actions/alls-green#why
-  alls-green:  # This job does nothing and is only used for the branch protection
-    if: always()
-    needs:
-      - test
-    runs-on: ubuntu-latest
-    steps:
-      - name: Decide whether the needed jobs succeeded or failed
-        uses: re-actors/alls-green@release/v1
-        with:
-          jobs: ${{ toJSON(needs) }}

.pre-commit-config.yaml

@@ -10,7 +10,11 @@ repos:
         args:
           - --unsafe
       - id: end-of-file-fixer
-        exclude: ^frontend/src/client/.*
+        exclude: |
+            (?x)^(
+                frontend/src/client/.*|
+                backend/app/email-templates/build/.*
+            )$
       - id: trailing-whitespace
         exclude: ^frontend/src/client/.*
   - repo: https://github.com/charliermarsh/ruff-pre-commit
@@ -20,6 +24,14 @@ repos:
         args:
           - --fix
       - id: ruff-format
+  - repo: local
+    hooks:
+      - id: local-biome-check
+        name: biome check
+        entry: bash -c 'cd frontend && npm run lint'
+        language: system
+        types: [text]
+        files: ^frontend/
 
 ci:
   autofix_commit_msg: 🎨 [pre-commit.ci] Auto format from pre-commit.com hooks

README.md

@@ -1,24 +1,26 @@
 # Full Stack FastAPI Template
 
-<a href="https://github.com/fastapi/full-stack-fastapi-template/actions?query=workflow%3ATest" target="_blank"><img src="https://github.com/fastapi/full-stack-fastapi-template/workflows/Test/badge.svg" alt="Test"></a>
+<a href="https://github.com/fastapi/full-stack-fastapi-template/actions?query=workflow%3A%22Test+Docker+Compose%22" target="_blank"><img src="https://github.com/fastapi/full-stack-fastapi-template/workflows/Test%20Docker%20Compose/badge.svg" alt="Test Docker Compose"></a>
+<a href="https://github.com/fastapi/full-stack-fastapi-template/actions?query=workflow%3A%22Test+Backend%22" target="_blank"><img src="https://github.com/fastapi/full-stack-fastapi-template/workflows/Test%20Backend/badge.svg" alt="Test Backend"></a>
 <a href="https://coverage-badge.samuelcolvin.workers.dev/redirect/fastapi/full-stack-fastapi-template" target="_blank"><img src="https://coverage-badge.samuelcolvin.workers.dev/fastapi/full-stack-fastapi-template.svg" alt="Coverage"></a>
 
 ## Technology Stack and Features
 
 - ⚡ [**FastAPI**](https://fastapi.tiangolo.com) for the Python backend API.
-    - 🧰 [SQLModel](https://sqlmodel.tiangolo.com) for the Python SQL database interactions (ORM).
+  - 🧰 [SQLModel](https://sqlmodel.tiangolo.com) for the Python SQL database interactions (ORM).
-    - 🔍 [Pydantic](https://docs.pydantic.dev), used by FastAPI, for the data validation and settings management.
+  - 🔍 [Pydantic](https://docs.pydantic.dev), used by FastAPI, for the data validation and settings management.
-    - 💾 [PostgreSQL](https://www.postgresql.org) as the SQL database.
+  - 💾 [PostgreSQL](https://www.postgresql.org) as the SQL database.
 - 🚀 [React](https://react.dev) for the frontend.
-    - 💃 Using TypeScript, hooks, Vite, and other parts of a modern frontend stack.
+  - 💃 Using TypeScript, hooks, [Vite](https://vitejs.dev), and other parts of a modern frontend stack.
-    - 🎨 [Chakra UI](https://chakra-ui.com) for the frontend components.
+  - 🎨 [Tailwind CSS](https://tailwindcss.com) and [shadcn/ui](https://ui.shadcn.com) for the frontend components.
-    - 🤖 An automatically generated frontend client.
+  - 🤖 An automatically generated frontend client.
-    - 🧪 [Playwright](https://playwright.dev) for End-to-End testing.
+  - 🧪 [Playwright](https://playwright.dev) for End-to-End testing.
-    - 🦇 Dark mode support.
+  - 🦇 Dark mode support.
 - 🐋 [Docker Compose](https://www.docker.com) for development and production.
 - 🔒 Secure password hashing by default.
 - 🔑 JWT (JSON Web Token) authentication.
 - 📫 Email based password recovery.
+- 📬 [Mailcatcher](https://mailcatcher.me) for local email testing during development.
 - ✅ Tests with [Pytest](https://pytest.org).
 - 📞 [Traefik](https://traefik.io) as a reverse proxy / load balancer.
 - 🚢 Deployment instructions using Docker Compose, including how to set up a frontend Traefik proxy to handle automatic HTTPS certificates.
@@ -32,18 +34,10 @@
 
 [![API docs](img/dashboard.png)](https://github.com/fastapi/full-stack-fastapi-template)
 
-### Dashboard - Create User
-
-[![API docs](img/dashboard-create.png)](https://github.com/fastapi/full-stack-fastapi-template)
-
 ### Dashboard - Items
 
 [![API docs](img/dashboard-items.png)](https://github.com/fastapi/full-stack-fastapi-template)
 
-### Dashboard - User Settings
-
-[![API docs](img/dashboard-user-settings.png)](https://github.com/fastapi/full-stack-fastapi-template)
-
 ### Dashboard - Dark Mode
 
 [![API docs](img/dashboard-dark.png)](https://github.com/fastapi/full-stack-fastapi-template)

backend/Dockerfile

@@ -1,28 +1,44 @@
-FROM tiangolo/uvicorn-gunicorn-fastapi:python3.10
+FROM python:3.10
+
+ENV PYTHONUNBUFFERED=1
 
 WORKDIR /app/
 
-# Install Poetry
+# Install uv
-RUN curl -sSL https://install.python-poetry.org | POETRY_HOME=/opt/poetry python && \
+# Ref: https://docs.astral.sh/uv/guides/integration/docker/#installing-uv
-    cd /usr/local/bin && \
+COPY --from=ghcr.io/astral-sh/uv:0.5.11 /uv /uvx /bin/
-    ln -s /opt/poetry/bin/poetry && \
-    poetry config virtualenvs.create false
 
-# Copy poetry.lock* in case it doesn't exist in the repo
+# Place executables in the environment at the front of the path
-COPY ./pyproject.toml ./poetry.lock* /app/
+# Ref: https://docs.astral.sh/uv/guides/integration/docker/#using-the-environment
+ENV PATH="/app/.venv/bin:$PATH"
 
-# Allow installing dev dependencies to run tests
+# Compile bytecode
-ARG INSTALL_DEV=false
+# Ref: https://docs.astral.sh/uv/guides/integration/docker/#compiling-bytecode
-RUN bash -c "if [ $INSTALL_DEV == 'true' ] ; then poetry install --no-root ; else poetry install --no-root --only main ; fi"
+ENV UV_COMPILE_BYTECODE=1
+
+# uv Cache
+# Ref: https://docs.astral.sh/uv/guides/integration/docker/#caching
+ENV UV_LINK_MODE=copy
+
+# Install dependencies
+# Ref: https://docs.astral.sh/uv/guides/integration/docker/#intermediate-layers
+RUN --mount=type=cache,target=/root/.cache/uv \
+    --mount=type=bind,source=uv.lock,target=uv.lock \
+    --mount=type=bind,source=pyproject.toml,target=pyproject.toml \
+    uv sync --frozen --no-install-project
 
 ENV PYTHONPATH=/app
 
-COPY ./scripts/ /app/
+COPY ./scripts /app/scripts
 
-COPY ./alembic.ini /app/
+COPY ./pyproject.toml ./uv.lock ./alembic.ini /app/
-
-COPY ./prestart.sh /app/
-
-COPY ./tests-start.sh /app/
 
 COPY ./app /app/app
+COPY ./tests /app/tests
+
+# Sync the project
+# Ref: https://docs.astral.sh/uv/guides/integration/docker/#intermediate-layers
+RUN --mount=type=cache,target=/root/.cache/uv \
+    uv sync
+
+CMD ["fastapi", "run", "--workers", "4", "app/main.py"]

backend/README.md

@@ -3,84 +3,50 @@
 ## Requirements
 
 * [Docker](https://www.docker.com/).
-* [Poetry](https://python-poetry.org/) for Python package and environment management.
+* [uv](https://docs.astral.sh/uv/) for Python package and environment management.
 
-## Local Development
+## Docker Compose
 
-* Start the stack with Docker Compose:
+Start the local development environment with Docker Compose following the guide in [../development.md](../development.md).
 
-```bash
+## General Workflow
-docker compose up -d
-```
 
-* Now you can open your browser and interact with these URLs:
+By default, the dependencies are managed with [uv](https://docs.astral.sh/uv/), go there and install it.
-
-Frontend, built with Docker, with routes handled based on the path: http://localhost
-
-Backend, JSON based web API based on OpenAPI: http://localhost/api/
-
-Automatic interactive documentation with Swagger UI (from the OpenAPI backend): http://localhost/docs
-
-Adminer, database web administration: http://localhost:8080
-
-Traefik UI, to see how the routes are being handled by the proxy: http://localhost:8090
-
-**Note**: The first time you start your stack, it might take a minute for it to be ready. While the backend waits for the database to be ready and configures everything. You can check the logs to monitor it.
-
-To check the logs, run:
-
-```bash
-docker compose logs
-```
-
-To check the logs of a specific service, add the name of the service, e.g.:
-
-```bash
-docker compose logs backend
-```
-
-If your Docker is not running in `localhost` (the URLs above wouldn't work) you would need to use the IP or domain where your Docker is running.
-
-## Backend local development, additional details
-
-### General workflow
-
-By default, the dependencies are managed with [Poetry](https://python-poetry.org/), go there and install it.
 
 From `./backend/` you can install all the dependencies with:
 
 ```console
-$ poetry install
+$ uv sync
 ```
 
-Then you can start a shell session with the new environment with:
+Then you can activate the virtual environment with:
 
 ```console
-$ poetry shell
+$ source .venv/bin/activate
 ```
 
-Make sure your editor is using the correct Python virtual environment.
+Make sure your editor is using the correct Python virtual environment, with the interpreter at `backend/.venv/bin/python`.
 
 Modify or add SQLModel models for data and SQL tables in `./backend/app/models.py`, API endpoints in `./backend/app/api/`, CRUD (Create, Read, Update, Delete) utils in `./backend/app/crud.py`.
 
-### VS Code
+## VS Code
 
 There are already configurations in place to run the backend through the VS Code debugger, so that you can use breakpoints, pause and explore variables, etc.
 
 The setup is also already configured so you can run the tests through the VS Code Python tests tab.
 
-### Docker Compose Override
+## Docker Compose Override
 
 During development, you can change Docker Compose settings that will only affect the local development environment in the file `docker-compose.override.yml`.
 
 The changes to that file only affect the local development environment, not the production environment. So, you can add "temporary" changes that help the development workflow.
 
-For example, the directory with the backend code is mounted as a Docker "host volume", mapping the code you change live to the directory inside the container. That allows you to test your changes right away, without having to build the Docker image again. It should only be done during development, for production, you should build the Docker image with a recent version of the backend code. But during development, it allows you to iterate very fast.
+For example, the directory with the backend code is synchronized in the Docker container, copying the code you change live to the directory inside the container. That allows you to test your changes right away, without having to build the Docker image again. It should only be done during development, for production, you should build the Docker image with a recent version of the backend code. But during development, it allows you to iterate very fast.
 
-There is also a command override that runs `/start-reload.sh` (included in the base image) instead of the default `/start.sh` (also included in the base image). It starts a single server process (instead of multiple, as would be for production) and reloads the process whenever the code changes. Have in mind that if you have a syntax error and save the Python file, it will break and exit, and the container will stop. After that, you can restart the container by fixing the error and running again:
+There is also a command override that runs `fastapi run --reload` instead of the default `fastapi run`. It starts a single server process (instead of multiple, as would be for production) and reloads the process whenever the code changes. Have in mind that if you have a syntax error and save the Python file, it will break and exit, and the container will stop. After that, you can restart the container by fixing the error and running again:
 
 ```console
-$ docker compose up -d
+$ docker compose watch
 ```
 
 There is also a commented out `command` override, you can uncomment it and comment the default one. It makes the backend container run a process that does "nothing", but keeps the container alive. That allows you to get inside your running container and execute commands inside, for example a Python interpreter to test installed dependencies, or start the development server that reloads when it detects changes.
@@ -88,10 +54,10 @@ There is also a commented out `command` override, you can uncomment it and comme
 To get inside the container with a `bash` session you can start the stack with:
 
 ```console
-$ docker compose up -d
+$ docker compose watch
 ```
 
-and then `exec` inside the running container:
+and then in another terminal, `exec` inside the running container:
 
 ```console
 $ docker compose exec backend bash
@@ -105,16 +71,16 @@ root@7f2607af31c3:/app#
 
 that means that you are in a `bash` session inside your container, as a `root` user, under the `/app` directory, this directory has another directory called "app" inside, that's where your code lives inside the container: `/app/app`.
 
-There you can use the script `/start-reload.sh` to run the debug live reloading server. You can run that script from inside the container with:
+There you can use the `fastapi run --reload` command to run the debug live reloading server.
 
 ```console
-$ bash /start-reload.sh
+$ fastapi run --reload app/main.py
 ```
 
 ...it will look like:
 
 ```console
-root@7f2607af31c3:/app# bash /start-reload.sh
+root@7f2607af31c3:/app# fastapi run --reload app/main.py
 ```
 
 and then hit enter. That runs the live reloading server that auto reloads when it detects code changes.
@@ -123,7 +89,7 @@ Nevertheless, if it doesn't detect a change but a syntax error, it will just sto
 
 ...this previous detail is what makes it useful to have the container alive doing nothing and then, in a Bash session, make it run the live reload server.
 
-### Backend tests
+## Backend tests
 
 To test the backend run:
 
@@ -131,31 +97,31 @@ To test the backend run:
 $ bash ./scripts/test.sh
 ```
 
-The tests run with Pytest, modify and add tests to `./backend/app/tests/`.
+The tests run with Pytest, modify and add tests to `./backend/tests/`.
 
 If you use GitHub Actions the tests will run automatically.
 
-#### Test running stack
+### Test running stack
 
 If your stack is already up and you just want to run the tests, you can use:
 
 ```bash
-docker compose exec backend bash /app/tests-start.sh
+docker compose exec backend bash scripts/tests-start.sh
 ```
 
-That `/app/tests-start.sh` script just calls `pytest` after making sure that the rest of the stack is running. If you need to pass extra arguments to `pytest`, you can pass them to that command and they will be forwarded.
+That `/app/scripts/tests-start.sh` script just calls `pytest` after making sure that the rest of the stack is running. If you need to pass extra arguments to `pytest`, you can pass them to that command and they will be forwarded.
 
 For example, to stop on first error:
 
 ```bash
-docker compose exec backend bash /app/tests-start.sh -x
+docker compose exec backend bash scripts/tests-start.sh -x
 ```
 
-#### Test Coverage
+### Test Coverage
 
 When the tests are run, a file `htmlcov/index.html` is generated, you can open it in your browser to see the coverage of the tests.
 
-### Migrations
+## Migrations
 
 As during local development your app directory is mounted as a volume inside the container, you can also run the migrations with `alembic` commands inside the container and the migration code will be in your app directory (instead of being only inside the container). So you can add it to your git repository.
 
@@ -189,10 +155,18 @@ If you don't want to use migrations at all, uncomment the lines in the file at `
 SQLModel.metadata.create_all(engine)
 ```
 
-and comment the line in the file `prestart.sh` that contains:
+and comment the line in the file `scripts/prestart.sh` that contains:
 
 ```console
 $ alembic upgrade head
 ```
 
 If you don't want to start with the default models and want to remove them / modify them, from the beginning, without having any previous revision, you can remove the revision files (`.py` Python files) under `./backend/app/alembic/versions/`. And then create a first migration as described above.
+
+## Email Templates
+
+The email templates are in `./backend/app/email-templates/`. Here, there are two directories: `build` and `src`. The `src` directory contains the source files that are used to build the final email templates. The `build` directory contains the final email templates that are used by the application.
+
+Before continuing, ensure you have the [MJML extension](https://marketplace.visualstudio.com/items?itemName=attilabuti.vscode-mjml) installed in your VS Code.
+
+Once you have the MJML extension installed, you can create a new email template in the `src` directory. After creating the new email template and with the `.mjml` file open in your editor, open the command palette with `Ctrl+Shift+P` and search for `MJML: Export to HTML`. This will convert the `.mjml` file to a `.html` file and now you can save it in the build directory.

backend/app/api/main.py

@@ -1,9 +1,14 @@
 from fastapi import APIRouter
 
-from app.api.routes import items, login, users, utils
+from app.api.routes import items, login, private, users, utils
+from app.core.config import settings
 
 api_router = APIRouter()
-api_router.include_router(login.router, tags=["login"])
+api_router.include_router(login.router)
-api_router.include_router(users.router, prefix="/users", tags=["users"])
+api_router.include_router(users.router)
-api_router.include_router(utils.router, prefix="/utils", tags=["utils"])
+api_router.include_router(utils.router)
-api_router.include_router(items.router, prefix="/items", tags=["items"])
+api_router.include_router(items.router)
+
+
+if settings.ENVIRONMENT == "local":
+    api_router.include_router(private.router)

backend/app/api/routes/items.py

@@ -7,7 +7,7 @@ from sqlmodel import func, select
 from app.api.deps import CurrentUser, SessionDep
 from app.models import Item, ItemCreate, ItemPublic, ItemsPublic, ItemUpdate, Message
 
-router = APIRouter()
+router = APIRouter(prefix="/items", tags=["items"])
 
 
 @router.get("/", response_model=ItemsPublic)

backend/app/api/routes/login.py

@@ -18,7 +18,7 @@ from app.utils import (
     verify_password_reset_token,
 )
 
-router = APIRouter()
+router = APIRouter(tags=["login"])
 
 
 @router.post("/login/access-token")

backend/app/api/routes/private.py

@@ -0,0 +1,38 @@
+from typing import Any
+
+from fastapi import APIRouter
+from pydantic import BaseModel
+
+from app.api.deps import SessionDep
+from app.core.security import get_password_hash
+from app.models import (
+    User,
+    UserPublic,
+)
+
+router = APIRouter(tags=["private"], prefix="/private")
+
+
+class PrivateUserCreate(BaseModel):
+    email: str
+    password: str
+    full_name: str
+    is_verified: bool = False
+
+
+@router.post("/users/", response_model=UserPublic)
+def create_user(user_in: PrivateUserCreate, session: SessionDep) -> Any:
+    """
+    Create a new user.
+    """
+
+    user = User(
+        email=user_in.email,
+        full_name=user_in.full_name,
+        hashed_password=get_password_hash(user_in.password),
+    )
+
+    session.add(user)
+    session.commit()
+
+    return user

backend/app/api/routes/users.py

@@ -26,7 +26,7 @@ from app.models import (
 )
 from app.utils import generate_new_account_email, send_email
 
-router = APIRouter()
+router = APIRouter(prefix="/users", tags=["users"])
 
 
 @router.get(
@@ -134,8 +134,6 @@ def delete_user_me(session: SessionDep, current_user: CurrentUser) -> Any:
         raise HTTPException(
             status_code=403, detail="Super users are not allowed to delete themselves"
         )
-    statement = delete(Item).where(col(Item.owner_id) == current_user.id)
-    session.exec(statement)  # type: ignore
     session.delete(current_user)
     session.commit()
     return Message(message="User deleted successfully")

backend/app/api/routes/utils.py

@@ -5,7 +5,7 @@ from app.api.deps import get_current_active_superuser
 from app.models import Message
 from app.utils import generate_test_email, send_email
 
-router = APIRouter()
+router = APIRouter(prefix="/utils", tags=["utils"])
 
 
 @router.post(
@@ -24,3 +24,8 @@ def test_email(email_to: EmailStr) -> Message:
         html_content=email_data.html_content,
     )
     return Message(message="Test email sent")
+
+
+@router.get("/health-check/")
+async def health_check() -> bool:
+    return True

backend/app/core/config.py

@@ -5,19 +5,19 @@ from typing import Annotated, Any, Literal
 from pydantic import (
     AnyUrl,
     BeforeValidator,
+    EmailStr,
     HttpUrl,
     PostgresDsn,
     computed_field,
     model_validator,
 )
-from pydantic_core import MultiHostUrl
 from pydantic_settings import BaseSettings, SettingsConfigDict
 from typing_extensions import Self
 
 
 def parse_cors(v: Any) -> list[str] | str:
     if isinstance(v, str) and not v.startswith("["):
-        return [i.strip() for i in v.split(",")]
+        return [i.strip() for i in v.split(",") if i.strip()]
     elif isinstance(v, list | str):
         return v
     raise ValueError(v)
@@ -25,27 +25,29 @@ def parse_cors(v: Any) -> list[str] | str:
 
 class Settings(BaseSettings):
     model_config = SettingsConfigDict(
-        env_file=".env", env_ignore_empty=True, extra="ignore"
+        # Use top level .env file (one level above ./backend/)
+        env_file="../.env",
+        env_ignore_empty=True,
+        extra="ignore",
     )
     API_V1_STR: str = "/api/v1"
     SECRET_KEY: str = secrets.token_urlsafe(32)
     # 60 minutes * 24 hours * 8 days = 8 days
     ACCESS_TOKEN_EXPIRE_MINUTES: int = 60 * 24 * 8
-    DOMAIN: str = "localhost"
+    FRONTEND_HOST: str = "http://localhost:5173"
     ENVIRONMENT: Literal["local", "staging", "production"] = "local"
 
-    @computed_field  # type: ignore[prop-decorator]
-    @property
-    def server_host(self) -> str:
-        # Use HTTPS for anything other than local development
-        if self.ENVIRONMENT == "local":
-            return f"http://{self.DOMAIN}"
-        return f"https://{self.DOMAIN}"
-
     BACKEND_CORS_ORIGINS: Annotated[
         list[AnyUrl] | str, BeforeValidator(parse_cors)
     ] = []
 
+    @computed_field  # type: ignore[prop-decorator]
+    @property
+    def all_cors_origins(self) -> list[str]:
+        return [str(origin).rstrip("/") for origin in self.BACKEND_CORS_ORIGINS] + [
+            self.FRONTEND_HOST
+        ]
+
     PROJECT_NAME: str
     SENTRY_DSN: HttpUrl | None = None
     POSTGRES_SERVER: str
@@ -57,7 +59,7 @@ class Settings(BaseSettings):
     @computed_field  # type: ignore[prop-decorator]
     @property
     def SQLALCHEMY_DATABASE_URI(self) -> PostgresDsn:
-        return MultiHostUrl.build(
+        return PostgresDsn.build(
             scheme="postgresql+psycopg",
             username=self.POSTGRES_USER,
             password=self.POSTGRES_PASSWORD,
@@ -72,8 +74,7 @@ class Settings(BaseSettings):
     SMTP_HOST: str | None = None
     SMTP_USER: str | None = None
     SMTP_PASSWORD: str | None = None
-    # TODO: update type to EmailStr when sqlmodel supports it
+    EMAILS_FROM_EMAIL: EmailStr | None = None
-    EMAILS_FROM_EMAIL: str | None = None
     EMAILS_FROM_NAME: str | None = None
 
     @model_validator(mode="after")
@@ -89,10 +90,8 @@ class Settings(BaseSettings):
     def emails_enabled(self) -> bool:
         return bool(self.SMTP_HOST and self.EMAILS_FROM_EMAIL)
 
-    # TODO: update type to EmailStr when sqlmodel supports it
+    EMAIL_TEST_USER: EmailStr = "test@example.com"
-    EMAIL_TEST_USER: str = "test@example.com"
+    FIRST_SUPERUSER: EmailStr
-    # TODO: update type to EmailStr when sqlmodel supports it
-    FIRST_SUPERUSER: str
     FIRST_SUPERUSER_PASSWORD: str
 
     def _check_default_secret(self, var_name: str, value: str | None) -> None:

backend/app/core/db.py

@@ -18,7 +18,6 @@ def init_db(session: Session) -> None:
     # the tables un-commenting the next lines
     # from sqlmodel import SQLModel
 
-    # from app.core.engine import engine
     # This works because the models are already imported and registered from app.models
     # SQLModel.metadata.create_all(engine)
 

backend/app/main.py

@@ -21,12 +21,10 @@ app = FastAPI(
 )
 
 # Set all CORS enabled origins
-if settings.BACKEND_CORS_ORIGINS:
+if settings.all_cors_origins:
     app.add_middleware(
         CORSMiddleware,
-        allow_origins=[
+        allow_origins=settings.all_cors_origins,
-            str(origin).strip("/") for origin in settings.BACKEND_CORS_ORIGINS
-        ],
         allow_credentials=True,
         allow_methods=["*"],
         allow_headers=["*"],

backend/app/models.py

@@ -14,19 +14,19 @@ class UserBase(SQLModel):
 
 # Properties to receive via API on creation
 class UserCreate(UserBase):
-    password: str = Field(min_length=8, max_length=40)
+    password: str = Field(min_length=8, max_length=128)
 
 
 class UserRegister(SQLModel):
     email: EmailStr = Field(max_length=255)
-    password: str = Field(min_length=8, max_length=40)
+    password: str = Field(min_length=8, max_length=128)
     full_name: str | None = Field(default=None, max_length=255)
 
 
 # Properties to receive via API on update, all are optional
 class UserUpdate(UserBase):
     email: EmailStr | None = Field(default=None, max_length=255)  # type: ignore
-    password: str | None = Field(default=None, min_length=8, max_length=40)
+    password: str | None = Field(default=None, min_length=8, max_length=128)
 
 
 class UserUpdateMe(SQLModel):
@@ -35,8 +35,8 @@ class UserUpdateMe(SQLModel):
 
 
 class UpdatePassword(SQLModel):
-    current_password: str = Field(min_length=8, max_length=40)
+    current_password: str = Field(min_length=8, max_length=128)
-    new_password: str = Field(min_length=8, max_length=40)
+    new_password: str = Field(min_length=8, max_length=128)
 
 
 # Database model, database table inferred from class name
@@ -64,7 +64,7 @@ class ItemBase(SQLModel):
 
 # Properties to receive on item creation
 class ItemCreate(ItemBase):
-    title: str = Field(min_length=1, max_length=255)
+    pass
 
 
 # Properties to receive on item update
@@ -75,7 +75,6 @@ class ItemUpdate(ItemBase):
 # Database model, database table inferred from class name
 class Item(ItemBase, table=True):
     id: uuid.UUID = Field(default_factory=uuid.uuid4, primary_key=True)
-    title: str = Field(max_length=255)
     owner_id: uuid.UUID = Field(
         foreign_key="user.id", nullable=False, ondelete="CASCADE"
     )
@@ -111,4 +110,4 @@ class TokenPayload(SQLModel):
 
 class NewPassword(SQLModel):
     token: str
-    new_password: str = Field(min_length=8, max_length=40)
+    new_password: str = Field(min_length=8, max_length=128)

backend/app/utils.py

@@ -9,8 +9,12 @@ import jwt
 from jinja2 import Template
 from jwt.exceptions import InvalidTokenError
 
+from app.core import security
 from app.core.config import settings
 
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
 
 @dataclass
 class EmailData:
@@ -48,7 +52,7 @@ def send_email(
     if settings.SMTP_PASSWORD:
         smtp_options["password"] = settings.SMTP_PASSWORD
     response = message.send(to=email_to, smtp=smtp_options)
-    logging.info(f"send email result: {response}")
+    logger.info(f"send email result: {response}")
 
 
 def generate_test_email(email_to: str) -> EmailData:
@@ -64,7 +68,7 @@ def generate_test_email(email_to: str) -> EmailData:
 def generate_reset_password_email(email_to: str, email: str, token: str) -> EmailData:
     project_name = settings.PROJECT_NAME
     subject = f"{project_name} - Password recovery for user {email}"
-    link = f"{settings.server_host}/reset-password?token={token}"
+    link = f"{settings.FRONTEND_HOST}/reset-password?token={token}"
     html_content = render_email_template(
         template_name="reset_password.html",
         context={
@@ -90,7 +94,7 @@ def generate_new_account_email(
             "username": username,
             "password": password,
             "email": email_to,
-            "link": settings.server_host,
+            "link": settings.FRONTEND_HOST,
         },
     )
     return EmailData(html_content=html_content, subject=subject)
@@ -104,14 +108,16 @@ def generate_password_reset_token(email: str) -> str:
     encoded_jwt = jwt.encode(
         {"exp": exp, "nbf": now, "sub": email},
         settings.SECRET_KEY,
-        algorithm="HS256",
+        algorithm=security.ALGORITHM,
     )
     return encoded_jwt
 
 
 def verify_password_reset_token(token: str) -> str | None:
     try:
-        decoded_token = jwt.decode(token, settings.SECRET_KEY, algorithms=["HS256"])
+        decoded_token = jwt.decode(
+            token, settings.SECRET_KEY, algorithms=[security.ALGORITHM]
+        )
         return str(decoded_token["sub"])
     except InvalidTokenError:
         return None

backend/pyproject.toml

@@ -1,43 +1,41 @@
-[tool.poetry]
+[project]
 name = "app"
 version = "0.1.0"
 description = ""
-authors = ["Admin <admin@example.com>"]
+requires-python = ">=3.10,<4.0"
+dependencies = [
+    "fastapi[standard]<1.0.0,>=0.114.2",
+    "python-multipart<1.0.0,>=0.0.7",
+    "email-validator<3.0.0.0,>=2.1.0.post1",
+    "passlib[bcrypt]<2.0.0,>=1.7.4",
+    "tenacity<9.0.0,>=8.2.3",
+    "pydantic>2.0",
+    "emails<1.0,>=0.6",
+    "jinja2<4.0.0,>=3.1.4",
+    "alembic<2.0.0,>=1.12.1",
+    "httpx<1.0.0,>=0.25.1",
+    "psycopg[binary]<4.0.0,>=3.1.13",
+    "sqlmodel<1.0.0,>=0.0.21",
+    # Pin bcrypt until passlib supports the latest
+    "bcrypt==4.3.0",
+    "pydantic-settings<3.0.0,>=2.2.1",
+    "sentry-sdk[fastapi]<2.0.0,>=1.40.6",
+    "pyjwt<3.0.0,>=2.8.0",
+]
 
-[tool.poetry.dependencies]
+[tool.uv]
-python = "^3.10"
+dev-dependencies = [
-uvicorn = {extras = ["standard"], version = "^0.24.0.post1"}
+    "pytest<8.0.0,>=7.4.3",
-fastapi = "^0.109.1"
+    "mypy<2.0.0,>=1.8.0",
-python-multipart = "^0.0.7"
+    "ruff<1.0.0,>=0.2.2",
-email-validator = "^2.1.0.post1"
+    "pre-commit<4.0.0,>=3.6.2",
-passlib = {extras = ["bcrypt"], version = "^1.7.4"}
+    "types-passlib<2.0.0.0,>=1.7.7.20240106",
-tenacity = "^8.2.3"
+    "coverage<8.0.0,>=7.4.3",
-pydantic = ">2.0"
+]
-emails = "^0.6"
-
-gunicorn = "^22.0.0"
-jinja2 = "^3.1.4"
-alembic = "^1.12.1"
-httpx = "^0.25.1"
-psycopg = {extras = ["binary"], version = "^3.1.13"}
-sqlmodel = "^0.0.21"
-# Pin bcrypt until passlib supports the latest
-bcrypt = "4.0.1"
-pydantic-settings = "^2.2.1"
-sentry-sdk = {extras = ["fastapi"], version = "^1.40.6"}
-pyjwt = "^2.8.0"
-
-[tool.poetry.group.dev.dependencies]
-pytest = "^7.4.3"
-mypy = "^1.8.0"
-ruff = "^0.2.2"
-pre-commit = "^3.6.2"
-types-passlib = "^1.7.7.20240106"
-coverage = "^7.4.3"
 
 [build-system]
-requires = ["poetry>=0.12"]
+requires = ["hatchling"]
-build-backend = "poetry.masonry.api"
+build-backend = "hatchling.build"
 
 [tool.mypy]
 strict = true
@@ -57,6 +55,7 @@ select = [
     "C4",  # flake8-comprehensions
     "UP",  # pyupgrade
     "ARG001", # unused arguments in functions
+    "T201",   # print statements are not allowed
 ]
 ignore = [
     "E501",  # line too long, handled by black
@@ -68,3 +67,14 @@ ignore = [
 [tool.ruff.lint.pyupgrade]
 # Preserve types, even if a file imports `from __future__ import annotations`.
 keep-runtime-typing = true
+
+[tool.coverage.run]
+source = ["app"]
+dynamic_context = "test_function"
+
+[tool.coverage.report]
+show_missing = true
+sort = "-Cover"
+
+[tool.coverage.html]
+show_contexts = true

backend/scripts/prestart.sh

@@ -1,10 +1,13 @@
 #! /usr/bin/env bash
 
+set -e
+set -x
+
 # Let the DB start
-python /app/app/backend_pre_start.py
+python app/backend_pre_start.py
 
 # Run migrations
 alembic upgrade head
 
 # Create initial data in DB
-python /app/app/initial_data.py
+python app/initial_data.py

backend/scripts/test.sh

@@ -3,6 +3,6 @@
 set -e
 set -x
 
-coverage run --source=app -m pytest
+coverage run -m pytest tests/
-coverage report --show-missing
+coverage report
 coverage html --title "${@-coverage}"

backend/scripts/tests-start.sh

@@ -0,0 +1,7 @@
+#! /usr/bin/env bash
+set -e
+set -x
+
+python app/tests_pre_start.py
+
+bash scripts/test.sh "$@"

backend/tests-start.sh

@@ -1,7 +0,0 @@
-#! /usr/bin/env bash
-set -e
-set -x
-
-python /app/app/tests_pre_start.py
-
-bash ./scripts/test.sh "$@"

backend/tests/api/routes/test_items.py

@@ -4,7 +4,7 @@ from fastapi.testclient import TestClient
 from sqlmodel import Session
 
 from app.core.config import settings
-from app.tests.utils.item import create_random_item
+from tests.utils.item import create_random_item
 
 
 def test_create_item(

backend/tests/api/routes/test_login.py

@@ -1,12 +1,15 @@
 from unittest.mock import patch
 
 from fastapi.testclient import TestClient
-from sqlmodel import Session, select
+from sqlmodel import Session
 
 from app.core.config import settings
 from app.core.security import verify_password
-from app.models import User
+from app.crud import create_user
+from app.models import UserCreate
 from app.utils import generate_password_reset_token
+from tests.utils.user import user_authentication_headers
+from tests.utils.utils import random_email, random_lower_string
 
 
 def test_get_access_token(client: TestClient) -> None:
@@ -69,23 +72,34 @@ def test_recovery_password_user_not_exits(
     assert r.status_code == 404
 
 
-def test_reset_password(
+def test_reset_password(client: TestClient, db: Session) -> None:
-    client: TestClient, superuser_token_headers: dict[str, str], db: Session
+    email = random_email()
-) -> None:
+    password = random_lower_string()
-    token = generate_password_reset_token(email=settings.FIRST_SUPERUSER)
+    new_password = random_lower_string()
-    data = {"new_password": "changethis", "token": token}
+
+    user_create = UserCreate(
+        email=email,
+        full_name="Test User",
+        password=password,
+        is_active=True,
+        is_superuser=False,
+    )
+    user = create_user(session=db, user_create=user_create)
+    token = generate_password_reset_token(email=email)
+    headers = user_authentication_headers(client=client, email=email, password=password)
+    data = {"new_password": new_password, "token": token}
+
     r = client.post(
         f"{settings.API_V1_STR}/reset-password/",
-        headers=superuser_token_headers,
+        headers=headers,
         json=data,
     )
+
     assert r.status_code == 200
     assert r.json() == {"message": "Password updated successfully"}
 
-    user_query = select(User).where(User.email == settings.FIRST_SUPERUSER)
+    db.refresh(user)
-    user = db.exec(user_query).first()
+    assert verify_password(new_password, user.hashed_password)
-    assert user
-    assert verify_password(data["new_password"], user.hashed_password)
 
 
 def test_reset_password_invalid_token(

backend/tests/api/routes/test_private.py

@@ -0,0 +1,26 @@
+from fastapi.testclient import TestClient
+from sqlmodel import Session, select
+
+from app.core.config import settings
+from app.models import User
+
+
+def test_create_user(client: TestClient, db: Session) -> None:
+    r = client.post(
+        f"{settings.API_V1_STR}/private/users/",
+        json={
+            "email": "pollo@listo.com",
+            "password": "password123",
+            "full_name": "Pollo Listo",
+        },
+    )
+
+    assert r.status_code == 200
+
+    data = r.json()
+
+    user = db.exec(select(User).where(User.id == data["id"])).first()
+
+    assert user
+    assert user.email == "pollo@listo.com"
+    assert user.full_name == "Pollo Listo"

backend/tests/api/routes/test_users.py

@@ -8,7 +8,7 @@ from app import crud
 from app.core.config import settings
 from app.core.security import verify_password
 from app.models import User, UserCreate
-from app.tests.utils.utils import random_email, random_lower_string
+from tests.utils.utils import random_email, random_lower_string
 
 
 def test_get_users_superuser_me(

backend/tests/conftest.py

@@ -8,8 +8,8 @@ from app.core.config import settings
 from app.core.db import engine, init_db
 from app.main import app
 from app.models import Item, User
-from app.tests.utils.user import authentication_token_from_email
+from tests.utils.user import authentication_token_from_email
-from app.tests.utils.utils import get_superuser_token_headers
+from tests.utils.utils import get_superuser_token_headers
 
 
 @pytest.fixture(scope="session", autouse=True)

backend/tests/crud/test_user.py

@@ -4,7 +4,7 @@ from sqlmodel import Session
 from app import crud
 from app.core.security import verify_password
 from app.models import User, UserCreate, UserUpdate
-from app.tests.utils.utils import random_email, random_lower_string
+from tests.utils.utils import random_email, random_lower_string
 
 
 def test_create_user(db: Session) -> None:

backend/tests/utils/item.py

@@ -2,8 +2,8 @@ from sqlmodel import Session
 
 from app import crud
 from app.models import Item, ItemCreate
-from app.tests.utils.user import create_random_user
+from tests.utils.user import create_random_user
-from app.tests.utils.utils import random_lower_string
+from tests.utils.utils import random_lower_string
 
 
 def create_random_item(db: Session) -> Item:

backend/tests/utils/user.py

@@ -4,7 +4,7 @@ from sqlmodel import Session
 from app import crud
 from app.core.config import settings
 from app.models import User, UserCreate, UserUpdate
-from app.tests.utils.utils import random_email, random_lower_string
+from tests.utils.utils import random_email, random_lower_string
 
 
 def user_authentication_headers(

copier.yml

@@ -63,7 +63,6 @@ _exclude:
   # Global
   - .vscode
   - .mypy_cache
-  - poetry.lock
   # Python
   - __pycache__
   - app.egg-info
@@ -71,7 +70,6 @@ _exclude:
   - .mypy_cache
   - .coverage
   - htmlcov
-  - poetry.lock
   - .cache
   - .venv
   # Frontend
@@ -99,4 +97,4 @@ _exclude:
 _answers_file: .copier/.copier-answers.yml
 
 _tasks:
-  - "python .copier/update_dotenv.py"
+  - ["{{ _copier_python }}", .copier/update_dotenv.py]

deployment.md

@@ -12,7 +12,7 @@ But you have to configure a couple things first. 🤓
 
 * Have a remote server ready and available.
 * Configure the DNS records of your domain to point to the IP of the server you just created.
-* Configure a wildcard subdomain for your domain, so that you can have multiple subdomains for different services, e.g. `*.fastapi-project.example.com`. This will be useful for accessing different components, like `traefik.fastapi-project.example.com`, `adminer.fastapi-project.example.com`, etc. And also for `staging`, like `staging.fastapi-project.example.com`, `staging.adminer.fastapi-project.example.com`, etc.
+* Configure a wildcard subdomain for your domain, so that you can have multiple subdomains for different services, e.g. `*.fastapi-project.example.com`. This will be useful for accessing different components, like `dashboard.fastapi-project.example.com`, `api.fastapi-project.example.com`, `traefik.fastapi-project.example.com`, `adminer.fastapi-project.example.com`, etc. And also for `staging`, like `dashboard.staging.fastapi-project.example.com`, `adminer.staging.fastapi-project.example.com`, etc.
 * Install and configure [Docker](https://docs.docker.com/engine/install/) on the remote server (Docker Engine, not Docker Desktop).
 
 ## Public Traefik
@@ -183,22 +183,22 @@ There are already two environments configured, `staging` and `production`. 🚀
 
 ### Install GitHub Actions Runner
 
-* On your remote server, if you are running as the `root` user, create a user for your GitHub Actions:
+* On your remote server, create a user for your GitHub Actions:
 
 ```bash
-adduser github
+sudo adduser github
 ```
 
 * Add Docker permissions to the `github` user:
 
 ```bash
-usermod -aG docker github
+sudo usermod -aG docker github
 ```
 
 * Temporarily switch to the `github` user:
 
 ```bash
-su - github
+sudo su - github
 ```
 
 * Go to the `github` user's home directory:
@@ -219,9 +219,15 @@ To make sure it runs on startup and continues running, you can install it as a s
 exit
 ```
 
-After you do it, you would be on the `root` user again. And you will be on the previous directory, belonging to the `root` user.
+After you do it, you will be on the previous user again. And you will be on the previous directory, belonging to that user.
 
-* Go to the `actions-runner` directory inside of the `github` user's home directory:
+Before being able to go the `github` user directory, you need to become the `root` user (you might already be):
+
+```bash
+sudo su
+```
+
+* As the `root` user, go to the `actions-runner` directory inside of the `github` user's home directory:
 
 ```bash
 cd /home/github/actions-runner
@@ -284,20 +290,20 @@ Traefik UI: `https://traefik.fastapi-project.example.com`
 
 ### Production
 
-Frontend: `https://fastapi-project.example.com`
+Frontend: `https://dashboard.fastapi-project.example.com`
 
-Backend API docs: `https://fastapi-project.example.com/docs`
+Backend API docs: `https://api.fastapi-project.example.com/docs`
 
-Backend API base URL: `https://fastapi-project.example.com/api/`
+Backend API base URL: `https://api.fastapi-project.example.com`
 
 Adminer: `https://adminer.fastapi-project.example.com`
 
 ### Staging
 
-Frontend: `https://staging.fastapi-project.example.com`
+Frontend: `https://dashboard.staging.fastapi-project.example.com`
 
-Backend API docs: `https://staging.fastapi-project.example.com/docs`
+Backend API docs: `https://api.staging.fastapi-project.example.com/docs`
 
-Backend API base URL: `https://staging.fastapi-project.example.com/api/`
+Backend API base URL: `https://api.staging.fastapi-project.example.com`
 
 Adminer: `https://adminer.staging.fastapi-project.example.com`

development.md

@@ -1,78 +1,112 @@
 # FastAPI Project - Development
 
-## Development in `localhost` with a custom domain
+## Docker Compose
 
-You might want to use something different than `localhost` as the domain. For example, if you are having problems with cookies that need a subdomain, and Chrome is not allowing you to use `localhost`.
+* Start the local stack with Docker Compose:
 
-In that case, you have two options: you could use the instructions to modify your system `hosts` file with the instructions below in **Development with a custom IP** or you can just use `localhost.tiangolo.com`, it is set up to point to `localhost` (to the IP `127.0.0.1`) and all its subdomains too. And as it is an actual domain, the browsers will store the cookies you set during development, etc.
+```bash
-
+docker compose watch
-If you used the default CORS enabled domains while generating the project, `localhost.tiangolo.com` was configured to be allowed. If you didn't, you will need to add it to the list in the variable `BACKEND_CORS_ORIGINS` in the `.env` file.
-
-To configure it in your stack, follow the section **Change the development "domain"** below, using the domain `localhost.tiangolo.com`.
-
-After performing those steps you should be able to open: http://localhost.tiangolo.com and it will be served by your stack in `localhost`.
-
-Check all the corresponding available URLs in the section at the end.
-
-## Development with a custom IP
-
-If you are running Docker in an IP address different than `127.0.0.1` (`localhost`), you will need to perform some additional steps. That will be the case if you are running a custom Virtual Machine or your Docker is located in a different machine in your network.
-
-In that case, you will need to use a fake local domain (`dev.example.com`) and make your computer think that the domain is served by the custom IP (e.g. `192.168.99.150`).
-
-If you have a custom domain like that, you need to add it to the list in the variable `BACKEND_CORS_ORIGINS` in the `.env` file.
-
-* Open your `hosts` file with administrative privileges using a text editor:
-
-  * **Note for Windows**: If you are in Windows, open the main Windows menu, search for "notepad", right click on it, and select the option "open as Administrator" or similar. Then click the "File" menu, "Open file", go to the directory `c:\Windows\System32\Drivers\etc\`, select the option to show "All files" instead of only "Text (.txt) files", and open the `hosts` file.
-  * **Note for Mac and Linux**: Your `hosts` file is probably located at `/etc/hosts`, you can edit it in a terminal running `sudo nano /etc/hosts`.
-
-* Additional to the contents it might have, add a new line with the custom IP (e.g. `192.168.99.150`) a space character, and your fake local domain: `dev.example.com`.
-
-The new line might look like:
-
-```
-192.168.99.150    dev.example.com
 ```
 
-* Save the file.
+* Now you can open your browser and interact with these URLs:
-  * **Note for Windows**: Make sure you save the file as "All files", without an extension of `.txt`. By default, Windows tries to add the extension. Make sure the file is saved as is, without extension.
 
-...that will make your computer think that the fake local domain is served by that custom IP, and when you open that URL in your browser, it will talk directly to your locally running server when it is asked to go to `dev.example.com` and think that it is a remote server while it is actually running in your computer.
+Frontend, built with Docker, with routes handled based on the path: <http://localhost:5173>
 
-To configure it in your stack, follow the section **Change the development "domain"** below, using the domain `dev.example.com`.
+Backend, JSON based web API based on OpenAPI: <http://localhost:8000>
 
-After performing those steps you should be able to open: http://dev.example.com and it will be server by your stack in `192.168.99.150`.
+Automatic interactive documentation with Swagger UI (from the OpenAPI backend): <http://localhost:8000/docs>
 
-Check all the corresponding available URLs in the section at the end.
+Adminer, database web administration: <http://localhost:8080>
 
-## Change the development "domain"
+Traefik UI, to see how the routes are being handled by the proxy: <http://localhost:8090>
 
-If you need to use your local stack with a different domain than `localhost`, you need to make sure the domain you use points to the IP where your stack is set up.
+**Note**: The first time you start your stack, it might take a minute for it to be ready. While the backend waits for the database to be ready and configures everything. You can check the logs to monitor it.
 
-To simplify your Docker Compose setup, for example, so that the API docs (Swagger UI) knows where is your API, you should let it know you are using that domain for development.
+To check the logs, run (in another terminal):
 
-* Open the file located at `./.env`. It would have a line like:
+```bash
-
+docker compose logs
-```
-DOMAIN=localhost
 ```
 
-* Change it to the domain you are going to use, e.g.:
+To check the logs of a specific service, add the name of the service, e.g.:
 
+```bash
+docker compose logs backend
 ```
+
+## Mailcatcher
+
+Mailcatcher is a simple SMTP server that catches all emails sent by the backend during local development. Instead of sending real emails, they are captured and displayed in a web interface.
+
+This is useful for:
+
+* Testing email functionality during development
+* Verifying email content and formatting
+* Debugging email-related functionality without sending real emails
+
+The backend is automatically configured to use Mailcatcher when running with Docker Compose locally (SMTP on port 1025). All captured emails can be viewed at <http://localhost:1080>.
+
+## Local Development
+
+The Docker Compose files are configured so that each of the services is available in a different port in `localhost`.
+
+For the backend and frontend, they use the same port that would be used by their local development server, so, the backend is at `http://localhost:8000` and the frontend at `http://localhost:5173`.
+
+This way, you could turn off a Docker Compose service and start its local development service, and everything would keep working, because it all uses the same ports.
+
+For example, you can stop that `frontend` service in the Docker Compose, in another terminal, run:
+
+```bash
+docker compose stop frontend
+```
+
+And then start the local frontend development server:
+
+```bash
+cd frontend
+npm run dev
+```
+
+Or you could stop the `backend` Docker Compose service:
+
+```bash
+docker compose stop backend
+```
+
+And then you can run the local development server for the backend:
+
+```bash
+cd backend
+fastapi dev app/main.py
+```
+
+## Docker Compose in `localhost.tiangolo.com`
+
+When you start the Docker Compose stack, it uses `localhost` by default, with different ports for each service (backend, frontend, adminer, etc).
+
+When you deploy it to production (or staging), it will deploy each service in a different subdomain, like `api.example.com` for the backend and `dashboard.example.com` for the frontend.
+
+In the guide about [deployment](deployment.md) you can read about Traefik, the configured proxy. That's the component in charge of transmitting traffic to each service based on the subdomain.
+
+If you want to test that it's all working locally, you can edit the local `.env` file, and change:
+
+```dotenv
 DOMAIN=localhost.tiangolo.com
 ```
 
-That variable will be used by the Docker Compose files.
+That will be used by the Docker Compose files to configure the base domain for the services.
 
-After that, you can restart your stack with:
+Traefik will use this to transmit traffic at `api.localhost.tiangolo.com` to the backend, and traffic at `dashboard.localhost.tiangolo.com` to the frontend.
+
+The domain `localhost.tiangolo.com` is a special domain that is configured (with all its subdomains) to point to `127.0.0.1`. This way you can use that for your local development.
+
+After you update it, run again:
 
 ```bash
-docker compose up -d
+docker compose watch
 ```
 
-and check all the corresponding available URLs in the section at the end.
+When deploying, for example in production, the main Traefik is configured outside of the Docker Compose files. For local development, there's an included Traefik in `docker-compose.override.yml`, just to let you test that the domains work as expected, for example with `api.localhost.tiangolo.com` and `dashboard.localhost.tiangolo.com`.
 
 ## Docker Compose files and env vars
 
@@ -84,6 +118,12 @@ These Docker Compose files use the `.env` file containing configurations to be i
 
 They also use some additional configurations taken from environment variables set in the scripts before calling the `docker compose` command.
 
+After changing variables, make sure you restart the stack:
+
+```bash
+docker compose watch
+```
+
 ## The .env file
 
 The `.env` file is the one that contains all your configurations, generated keys and passwords, etc.
@@ -92,7 +132,7 @@ Depending on your workflow, you could want to exclude it from Git, for example i
 
 One way to do it could be to add each environment variable to your CI/CD system, and updating the `docker-compose.yml` file to read that specific env var instead of reading the `.env` file.
 
-### Pre-commits and code linting
+## Pre-commits and code linting
 
 we are using a tool called [pre-commit](https://pre-commit.com/) for code linting and formatting.
 
@@ -106,10 +146,10 @@ You can find a file `.pre-commit-config.yaml` with configurations at the root of
 
 After having the `pre-commit` tool installed and available, you need to "install" it in the local repository, so that it runs automatically before each commit.
 
-Using Poetry, you could do it with:
+Using `uv`, you could do it with:
 
 ```bash
-❯ poetry run pre-commit install
+❯ uv run pre-commit install
 pre-commit installed at .git/hooks/pre-commit
 ```
 
@@ -125,10 +165,10 @@ Then you can `git add` the modified/fixed files again and now you can commit.
 
 #### Running pre-commit hooks manually
 
-you can also run `pre-commit` manually on all the files, you can do it using Poetry with:
+you can also run `pre-commit` manually on all the files, you can do it using `uv` with:
 
 ```bash
-❯ poetry run pre-commit run --all-files
+❯ uv run pre-commit run --all-files
 check for added large files..............................................Passed
 check toml...............................................................Passed
 check yaml...............................................................Passed
@@ -146,30 +186,34 @@ The production or staging URLs would use these same paths, but with your own dom
 
 Development URLs, for local development.
 
-Frontend: http://localhost
+Frontend: <http://localhost:5173>
 
-Backend: http://localhost/api/
+Backend: <http://localhost:8000>
 
-Automatic Interactive Docs (Swagger UI): http://localhost/docs
+Automatic Interactive Docs (Swagger UI): <http://localhost:8000/docs>
 
-Automatic Alternative Docs (ReDoc): http://localhost/redoc
+Automatic Alternative Docs (ReDoc): <http://localhost:8000/redoc>
 
-Adminer: http://localhost:8080
+Adminer: <http://localhost:8080>
 
-Traefik UI: http://localhost:8090
+Traefik UI: <http://localhost:8090>
 
-### Development in localhost with a custom domain URLs
+MailCatcher: <http://localhost:1080>
+
+### Development URLs with `localhost.tiangolo.com` Configured
 
 Development URLs, for local development.
 
-Frontend: http://localhost.tiangolo.com
+Frontend: <http://dashboard.localhost.tiangolo.com>
 
-Backend: http://localhost.tiangolo.com/api/
+Backend: <http://api.localhost.tiangolo.com>
 
-Automatic Interactive Docs (Swagger UI): http://localhost.tiangolo.com/docs
+Automatic Interactive Docs (Swagger UI): <http://api.localhost.tiangolo.com/docs>
 
-Automatic Alternative Docs (ReDoc): http://localhost.tiangolo.com/redoc
+Automatic Alternative Docs (ReDoc): <http://api.localhost.tiangolo.com/redoc>
 
-Adminer: http://localhost.tiangolo.com:8080
+Adminer: <http://localhost.tiangolo.com:8080>
 
-Traefik UI: http://localhost.tiangolo.com:8090
+Traefik UI: <http://localhost.tiangolo.com:8090>
+
+MailCatcher: <http://localhost.tiangolo.com:1080>

docker-compose.override.yml

@@ -1,5 +1,10 @@
 services:
 
+  # Local services are available on their ports, but also available on:
+  # http://api.localhost.tiangolo.com: backend
+  # http://dashboard.localhost.tiangolo.com: frontend
+  # etc. To enable it, update .env, set:
+  # DOMAIN=localhost.tiangolo.com
   proxy:
     image: traefik:3.0
     volumes:
@@ -53,15 +58,28 @@ services:
   backend:
     restart: "no"
     ports:
-      - "8888:8888"
+      - "8000:8000"
-    volumes:
-      - ./backend/:/app
     build:
       context: ./backend
-      args:
-        INSTALL_DEV: ${INSTALL_DEV-true}
     # command: sleep infinity  # Infinite loop to keep container alive doing nothing
-    command: /start-reload.sh
+    command:
+      - fastapi
+      - run
+      - --reload
+      - "app/main.py"
+    develop:
+      watch:
+        - path: ./backend
+          action: sync
+          target: /app
+          ignore:
+            - ./backend/.venv
+            - .venv
+        - path: ./backend/pyproject.toml
+          action: rebuild
+    # TODO: remove once coverage is done locally
+    volumes:
+      - ./backend/htmlcov:/app/htmlcov
     environment:
       SMTP_HOST: "mailcatcher"
       SMTP_PORT: "1025"
@@ -76,12 +94,39 @@ services:
 
   frontend:
     restart: "no"
+    ports:
+      - "5173:80"
     build:
       context: ./frontend
       args:
-        - VITE_API_URL=http://${DOMAIN?Variable not set}
+        - VITE_API_URL=http://localhost:8000
         - NODE_ENV=development
 
+  playwright:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile.playwright
+      args:
+        - VITE_API_URL=http://backend:8000
+        - NODE_ENV=production
+    ipc: host
+    depends_on:
+      - backend
+      - mailcatcher
+    env_file:
+      - .env
+    environment:
+      - VITE_API_URL=http://backend:8000
+      - MAILCATCHER_HOST=http://mailcatcher:1080
+      # For the reports when run locally
+      - PLAYWRIGHT_HTML_HOST=0.0.0.0
+      - CI=${CI}
+    volumes:
+      - ./frontend/blob-report:/app/blob-report
+      - ./frontend/test-results:/app/test-results
+    ports:
+      - 9323:9323
+
 networks:
   traefik-public:
     # For local dev, don't expect an external Traefik network

docker-compose.yml

@@ -1,7 +1,14 @@
 services:
+
   db:
-    image: postgres:12
+    image: postgres:17
     restart: always
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB}"]
+      interval: 10s
+      retries: 5
+      start_period: 30s
+      timeout: 10s
     volumes:
       - app-db-data:/var/lib/postgresql/data/pgdata
     env_file:
@@ -35,18 +42,23 @@ services:
       - traefik.http.routers.${STACK_NAME?Variable not set}-adminer-https.tls.certresolver=le
       - traefik.http.services.${STACK_NAME?Variable not set}-adminer.loadbalancer.server.port=8080
 
-  backend:
+  prestart:
     image: '${DOCKER_IMAGE_BACKEND?Variable not set}:${TAG-latest}'
-    restart: always
+    build:
+      context: ./backend
     networks:
       - traefik-public
       - default
     depends_on:
-      - db
+      db:
+        condition: service_healthy
+        restart: true
+    command: bash scripts/prestart.sh
     env_file:
       - .env
     environment:
       - DOMAIN=${DOMAIN}
+      - FRONTEND_HOST=${FRONTEND_HOST?Variable not set}
       - ENVIRONMENT=${ENVIRONMENT}
       - BACKEND_CORS_ORIGINS=${BACKEND_CORS_ORIGINS}
       - SECRET_KEY=${SECRET_KEY?Variable not set}
@@ -63,34 +75,64 @@ services:
       - POSTGRES_PASSWORD=${POSTGRES_PASSWORD?Variable not set}
       - SENTRY_DSN=${SENTRY_DSN}
 
+  backend:
+    image: '${DOCKER_IMAGE_BACKEND?Variable not set}:${TAG-latest}'
+    restart: always
+    networks:
+      - traefik-public
+      - default
+    depends_on:
+      db:
+        condition: service_healthy
+        restart: true
+      prestart:
+        condition: service_completed_successfully
+    env_file:
+      - .env
+    environment:
+      - DOMAIN=${DOMAIN}
+      - FRONTEND_HOST=${FRONTEND_HOST?Variable not set}
+      - ENVIRONMENT=${ENVIRONMENT}
+      - BACKEND_CORS_ORIGINS=${BACKEND_CORS_ORIGINS}
+      - SECRET_KEY=${SECRET_KEY?Variable not set}
+      - FIRST_SUPERUSER=${FIRST_SUPERUSER?Variable not set}
+      - FIRST_SUPERUSER_PASSWORD=${FIRST_SUPERUSER_PASSWORD?Variable not set}
+      - SMTP_HOST=${SMTP_HOST}
+      - SMTP_USER=${SMTP_USER}
+      - SMTP_PASSWORD=${SMTP_PASSWORD}
+      - EMAILS_FROM_EMAIL=${EMAILS_FROM_EMAIL}
+      - POSTGRES_SERVER=db
+      - POSTGRES_PORT=${POSTGRES_PORT}
+      - POSTGRES_DB=${POSTGRES_DB}
+      - POSTGRES_USER=${POSTGRES_USER?Variable not set}
+      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD?Variable not set}
+      - SENTRY_DSN=${SENTRY_DSN}
+
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8000/api/v1/utils/health-check/"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
     build:
       context: ./backend
-      args:
-        INSTALL_DEV: ${INSTALL_DEV-false}
-    platform: linux/amd64 # Patch for M1 Mac
     labels:
       - traefik.enable=true
       - traefik.docker.network=traefik-public
       - traefik.constraint-label=traefik-public
 
-      - traefik.http.services.${STACK_NAME?Variable not set}-backend.loadbalancer.server.port=80
+      - traefik.http.services.${STACK_NAME?Variable not set}-backend.loadbalancer.server.port=8000
 
-      - traefik.http.routers.${STACK_NAME?Variable not set}-backend-http.rule=(Host(`${DOMAIN?Variable not set}`) || Host(`www.${DOMAIN?Variable not set}`)) && (PathPrefix(`/api`) || PathPrefix(`/docs`) || PathPrefix(`/redoc`))
+      - traefik.http.routers.${STACK_NAME?Variable not set}-backend-http.rule=Host(`api.${DOMAIN?Variable not set}`)
       - traefik.http.routers.${STACK_NAME?Variable not set}-backend-http.entrypoints=http
 
-      - traefik.http.routers.${STACK_NAME?Variable not set}-backend-https.rule=(Host(`${DOMAIN?Variable not set}`) || Host(`www.${DOMAIN?Variable not set}`)) && (PathPrefix(`/api`) || PathPrefix(`/docs`) || PathPrefix(`/redoc`))
+      - traefik.http.routers.${STACK_NAME?Variable not set}-backend-https.rule=Host(`api.${DOMAIN?Variable not set}`)
       - traefik.http.routers.${STACK_NAME?Variable not set}-backend-https.entrypoints=https
       - traefik.http.routers.${STACK_NAME?Variable not set}-backend-https.tls=true
       - traefik.http.routers.${STACK_NAME?Variable not set}-backend-https.tls.certresolver=le
 
-      # Define Traefik Middleware to handle domain with and without "www" to redirect to only one
+      # Enable redirection for HTTP and HTTPS
-      - traefik.http.middlewares.${STACK_NAME?Variable not set}-www-redirect.redirectregex.regex=^http(s)?://www.(${DOMAIN?Variable not set})/(.*)
+      - traefik.http.routers.${STACK_NAME?Variable not set}-backend-http.middlewares=https-redirect
-      # Redirect a domain with www to non-www
-      - traefik.http.middlewares.${STACK_NAME?Variable not set}-www-redirect.redirectregex.replacement=http$${1}://${DOMAIN?Variable not set}/$${3}
-
-      # Enable www redirection for HTTP and HTTPS
-      - traefik.http.routers.${STACK_NAME?Variable not set}-backend-http.middlewares=https-redirect,${STACK_NAME?Variable not set}-www-redirect
-      - traefik.http.routers.${STACK_NAME?Variable not set}-backend-https.middlewares=${STACK_NAME?Variable not set}-www-redirect
 
   frontend:
     image: '${DOCKER_IMAGE_FRONTEND?Variable not set}:${TAG-latest}'
@@ -101,7 +143,7 @@ services:
     build:
       context: ./frontend
       args:
-        - VITE_API_URL=https://${DOMAIN?Variable not set}
+        - VITE_API_URL=https://api.${DOMAIN?Variable not set}
         - NODE_ENV=production
     labels:
       - traefik.enable=true
@@ -110,17 +152,16 @@ services:
 
       - traefik.http.services.${STACK_NAME?Variable not set}-frontend.loadbalancer.server.port=80
 
-      - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-http.rule=Host(`${DOMAIN?Variable not set}`) || Host(`www.${DOMAIN?Variable not set}`)
+      - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-http.rule=Host(`dashboard.${DOMAIN?Variable not set}`)
       - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-http.entrypoints=http
 
-      - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-https.rule=Host(`${DOMAIN?Variable not set}`) || Host(`www.${DOMAIN?Variable not set}`)
+      - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-https.rule=Host(`dashboard.${DOMAIN?Variable not set}`)
       - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-https.entrypoints=https
       - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-https.tls=true
       - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-https.tls.certresolver=le
 
-      # Enable www redirection for HTTP and HTTPS
+      # Enable redirection for HTTP and HTTPS
-      - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-https.middlewares=${STACK_NAME?Variable not set}-www-redirect
+      - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-http.middlewares=https-redirect
-      - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-http.middlewares=https-redirect,${STACK_NAME?Variable not set}-www-redirect
 volumes:
   app-db-data:
 

frontend/.env

@@ -1 +1,2 @@
-VITE_API_URL=http://localhost
+VITE_API_URL=http://localhost:8000
+MAILCATCHER_HOST=http://localhost:1080

frontend/.gitignore

@@ -27,3 +27,4 @@ openapi.json
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/playwright/.auth/

frontend/.nvmrc

@@ -1 +1 @@
-20
+24

frontend/Dockerfile

@@ -1,5 +1,5 @@
 # Stage 0, "build-stage", based on Node.js, to build and compile the frontend
-FROM node:20 AS build-stage
+FROM node:24 AS build-stage
 
 WORKDIR /app
 

frontend/Dockerfile.playwright

@@ -0,0 +1,11 @@
+FROM mcr.microsoft.com/playwright:v1.57.0-noble
+
+WORKDIR /app
+
+COPY package*.json /app/
+
+RUN npm install
+
+COPY ./ /app/
+
+ARG VITE_API_URL=${VITE_API_URL}

frontend/README.md

@@ -1,6 +1,6 @@
 # FastAPI Project - Frontend
 
-The frontend is built with [Vite](https://vitejs.dev/), [React](https://reactjs.org/), [TypeScript](https://www.typescriptlang.org/), [TanStack Query](https://tanstack.com/query), [TanStack Router](https://tanstack.com/router) and [Chakra UI](https://chakra-ui.com/).
+The frontend is built with [Vite](https://vitejs.dev/), [React](https://reactjs.org/), [TypeScript](https://www.typescriptlang.org/), [TanStack Query](https://tanstack.com/query), [TanStack Router](https://tanstack.com/router) and [Tailwind CSS](https://tailwindcss.com/).
 
 ## Frontend development
 
@@ -59,7 +59,7 @@ If you are developing an API-only app and want to remove the frontend, you can d
 
 * In the `docker-compose.yml` file, remove the whole service / section `frontend`.
 
-* In the `docker-compose.override.yml` file, remove the whole service / section `frontend`.
+* In the `docker-compose.override.yml` file, remove the whole service / section `frontend` and `playwright`.
 
 Done, you have a frontend-less (api-only) app. 🤓
 
@@ -74,16 +74,23 @@ But it would be only to clean them up, leaving them won't really have any effect
 
 ## Generate Client
 
+### Automatically
+
+* Activate the backend virtual environment.
+* From the top level project directory, run the script:
+
+```bash
+./scripts/generate-client.sh
+```
+
+* Commit the changes.
+
+### Manually
+
 * Start the Docker Compose stack.
 
 * Download the OpenAPI JSON file from `http://localhost/api/v1/openapi.json` and copy it to a new file `openapi.json` at the root of the `frontend` directory.
 
-* To simplify the names in the generated frontend client code, modify the `openapi.json` file by running the following script:
-
-```bash
-node modify-openapi-operationids.js
-```
-
 * To generate the frontend client, run:
 
 ```bash
@@ -99,7 +106,7 @@ Notice that everytime the backend changes (changing the OpenAPI schema), you sho
 If you want to use a remote API, you can set the environment variable `VITE_API_URL` to the URL of the remote API. For example, you can set it in the `frontend/.env` file:
 
 ```env
-VITE_API_URL=https://my-remote-api.example.com
+VITE_API_URL=https://api.my-domain.example.com
 ```
 
 Then, when you run the frontend, it will use that URL as the base URL for the API.
@@ -114,14 +121,13 @@ The frontend code is structured as follows:
 * `frontend/src/components` -  The different components of the frontend.
 * `frontend/src/hooks` - Custom hooks.
 * `frontend/src/routes` - The different routes of the frontend which include the pages.
-* `theme.tsx` - The Chakra UI custom theme.
 
 ## End-to-End Testing with Playwright
 
 The frontend includes initial end-to-end tests using Playwright. To run the tests, you need to have the Docker Compose stack running. Start the stack with the following command:
 
 ```bash
-docker compose up -d
+docker compose up -d --wait backend
 ```
 
 Then, you can run the tests with the following command:

frontend/biome.json

@@ -1,15 +1,16 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.6.1/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
-  "organizeImports": {
+  "assist": { "actions": { "source": { "organizeImports": "on" } } },
-    "enabled": true
-  },
   "files": {
-    "ignore": [
+    "includes": [
-      "node_modules",
+      "**",
-      "src/client/",
+      "!**/dist/**/*",
-      "src/routeTree.gen.ts",
+      "!**/node_modules/**/*",
-      "playwright.config.ts",
+      "!**/src/routeTree.gen.ts",
-      "playwright-report"
+      "!**/src/client/**/*",
+      "!**/src/components/ui/**/*",
+      "!**/playwright-report",
+      "!**/playwright.config.ts"
     ]
   },
   "linter": {
@@ -21,7 +22,10 @@
         "noArrayIndexKey": "off"
       },
       "style": {
-        "noNonNullAssertion": "off"
+        "noNonNullAssertion": "off",
+        "noParameterAssign": "error",
+        "useSelfClosingElements": "error",
+        "noUselessElse": "error"
       }
     }
   },
@@ -33,5 +37,10 @@
       "quoteStyle": "double",
       "semicolons": "asNeeded"
     }
+  },
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
   }
 }

frontend/components.json

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

frontend/modify-openapi-operationids.js

@@ -1,36 +0,0 @@
-import * as fs from "node:fs"
-
-async function modifyOpenAPIFile(filePath) {
-  try {
-    const data = await fs.promises.readFile(filePath)
-    const openapiContent = JSON.parse(data)
-
-    const paths = openapiContent.paths
-    for (const pathKey of Object.keys(paths)) {
-      const pathData = paths[pathKey]
-      for (const method of Object.keys(pathData)) {
-        const operation = pathData[method]
-        if (operation.tags && operation.tags.length > 0) {
-          const tag = operation.tags[0]
-          const operationId = operation.operationId
-          const toRemove = `${tag}-`
-          if (operationId.startsWith(toRemove)) {
-            const newOperationId = operationId.substring(toRemove.length)
-            operation.operationId = newOperationId
-          }
-        }
-      }
-    }
-
-    await fs.promises.writeFile(
-      filePath,
-      JSON.stringify(openapiContent, null, 2),
-    )
-    console.log("File successfully modified")
-  } catch (err) {
-    console.error("Error:", err)
-  }
-}
-
-const filePath = "./openapi.json"
-modifyOpenAPIFile(filePath)

frontend/openapi-ts.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from "@hey-api/openapi-ts"
+
+export default defineConfig({
+  input: "./openapi.json",
+  output: "./src/client",
+
+  plugins: [
+    "legacy/axios",
+    {
+      name: "@hey-api/sdk",
+      // NOTE: this doesn't allow tree-shaking
+      asClass: true,
+      operationId: true,
+      classNameBuilder: "{{name}}Service",
+      methodNameBuilder: (operation) => {
+        // @ts-expect-error
+        let name: string = operation.name
+        // @ts-expect-error
+        const service: string = operation.service
+
+        if (service && name.toLowerCase().startsWith(service.toLowerCase())) {
+          name = name.slice(service.length)
+        }
+
+        return name.charAt(0).toLowerCase() + name.slice(1)
+      },
+    },
+    {
+      name: "@hey-api/schemas",
+      type: "json",
+    },
+  ],
+})

frontend/package.json

@@ -5,40 +5,60 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc -p tsconfig.build.json && vite build",
-    "lint": "biome check --apply-unsafe --no-errors-on-unmatched --files-ignore-unknown=true ./",
+    "lint": "biome check --write --unsafe --no-errors-on-unmatched --files-ignore-unknown=true ./",
     "preview": "vite preview",
-    "generate-client": "openapi-ts --input ./openapi.json --output ./src/client --client axios --exportSchemas true && biome format --write ./src/client"
+    "generate-client": "openapi-ts"
   },
   "dependencies": {
-    "@chakra-ui/icons": "2.1.1",
+    "@hookform/resolvers": "^5.2.2",
-    "@chakra-ui/react": "2.8.2",
+    "@radix-ui/react-avatar": "^1.1.11",
-    "@emotion/react": "11.11.3",
+    "@radix-ui/react-checkbox": "^1.3.3",
-    "@emotion/styled": "11.11.0",
+    "@radix-ui/react-dialog": "^1.1.15",
-    "@tanstack/react-query": "^5.28.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@tanstack/react-query-devtools": "^5.28.14",
+    "@radix-ui/react-label": "^2.1.8",
-    "@tanstack/react-router": "1.19.1",
+    "@radix-ui/react-radio-group": "^1.3.8",
-    "axios": "1.6.2",
+    "@radix-ui/react-scroll-area": "^1.2.10",
-    "form-data": "4.0.0",
+    "@radix-ui/react-select": "^2.2.6",
-    "framer-motion": "10.16.16",
+    "@radix-ui/react-separator": "^1.1.8",
-    "react": "^18.2.0",
+    "@radix-ui/react-slot": "^1.2.4",
-    "react-dom": "^18.2.0",
+    "@radix-ui/react-tabs": "^1.1.13",
-    "react-error-boundary": "^4.0.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
-    "react-hook-form": "7.49.3",
+    "@tailwindcss/vite": "^4.1.17",
-    "react-icons": "5.0.1"
+    "@tanstack/react-query": "^5.90.12",
+    "@tanstack/react-query-devtools": "^5.91.1",
+    "@tanstack/react-router": "^1.131.50",
+    "@tanstack/react-router-devtools": "^1.139.12",
+    "@tanstack/react-table": "^8.21.3",
+    "axios": "1.13.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "form-data": "4.0.5",
+    "lucide-react": "^0.556.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.1.1",
+    "react-dom": "^19.2.1",
+    "react-error-boundary": "^6.0.0",
+    "react-hook-form": "^7.68.0",
+    "react-icons": "^5.5.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.17",
+    "zod": "^4.1.13"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.6.1",
+    "@biomejs/biome": "^2.3.8",
-    "@hey-api/openapi-ts": "^0.34.1",
+    "@hey-api/openapi-ts": "0.73.0",
-    "@playwright/test": "^1.45.2",
+    "@playwright/test": "1.57.0",
-    "@tanstack/router-devtools": "1.19.1",
+    "@tanstack/router-devtools": "^1.140.0",
-    "@tanstack/router-vite-plugin": "1.19.0",
+    "@tanstack/router-plugin": "^1.140.0",
-    "@types/node": "^20.10.5",
+    "@types/node": "^24.10.1",
-    "@types/react": "^18.2.37",
+    "@types/react": "^19.2.7",
-    "@types/react-dom": "^18.2.15",
+    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vitejs/plugin-react-swc": "^4.2.2",
-    "dotenv": "^16.4.5",
+    "dotenv": "^17.2.3",
-    "typescript": "^5.2.2",
+    "tw-animate-css": "^1.4.0",
-    "vite": "^5.0.13"
+    "typescript": "^5.9.3",
+    "vite": "^7.2.7"
   }
 }

frontend/playwright.config.ts

@@ -1,11 +1,10 @@
 import { defineConfig, devices } from '@playwright/test';
-
+import 'dotenv/config'
 
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// require('dotenv').config();
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -21,7 +20,7 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: process.env.CI ? 'blob' : 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */

frontend/public/assets/images/fastapi-icon-light.svg

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="500"
+   height="500"
+   viewBox="0 0 132.29167 132.29166"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="icon-white-nomargin-transparent.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   inkscape:export-filename="icon-teal-nomargin-transparent-500.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1720"
+     inkscape:window-height="1371"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="0.73657628"
+     inkscape:cx="448.01877"
+     inkscape:cy="-91.640203"
+     inkscape:window-x="1720"
+     inkscape:window-y="32"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g1"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm" />
+  <defs
+     id="defs2" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g2149">
+    <g
+       id="g2141">
+      <g
+         id="g1">
+        <path
+           id="path875-5-9-7-3-2-3-9-9-8-0-0-5-87-7"
+           style="fill:#ffffff;fill-opacity:0.980392;stroke:none;stroke-width:0.28098;stop-color:#000000"
+           d="M 66.145833 0 A 66.145836 65.931923 0 0 0 0 65.931893 A 66.145836 65.931923 0 0 0 66.145833 131.86379 A 66.145836 65.931923 0 0 0 132.29167 65.931893 A 66.145836 65.931923 0 0 0 66.145833 0 z M 61.581771 29.853992 L 103.20042 29.853992 L 61.410205 59.222742 L 89.976937 59.222742 L 29.091248 102.00979 L 42.315763 72.641044 L 48.358289 59.222742 L 61.581771 29.853992 z " />
+      </g>
+    </g>
+  </g>
+  <rect
+     y="-49.422424"
+     x="-51.908718"
+     height="162.82199"
+     width="451.52316"
+     id="rect824"
+     style="opacity:0.98;fill:none;fill-opacity:1;stroke-width:0.311037" />
+</svg>

frontend/public/assets/images/fastapi-icon.svg

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="500"
+   height="500"
+   viewBox="0 0 132.29167 132.29166"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="icon-teal-nomargin-transparent.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   inkscape:export-filename="icon-teal-nomargin-192.png"
+   inkscape:export-xdpi="36.863998"
+   inkscape:export-ydpi="36.863998"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1720"
+     inkscape:window-height="1371"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="0.73657628"
+     inkscape:cx="448.01877"
+     inkscape:cy="-91.640203"
+     inkscape:window-x="1720"
+     inkscape:window-y="32"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g1"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm" />
+  <defs
+     id="defs2" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g2149">
+    <g
+       id="g2141">
+      <g
+         id="g1">
+        <path
+           id="path875-5-9-7-3-2-3-9-9-8-0-0-5-87-7"
+           style="fill:#009688;fill-opacity:0.980392;stroke:none;stroke-width:0.28098;stop-color:#000000"
+           d="M 66.145833 0 A 66.145836 65.931923 0 0 0 0 65.931893 A 66.145836 65.931923 0 0 0 66.145833 131.86379 A 66.145836 65.931923 0 0 0 132.29167 65.931893 A 66.145836 65.931923 0 0 0 66.145833 0 z M 61.581771 29.853992 L 103.20042 29.853992 L 61.410205 59.222742 L 89.976937 59.222742 L 29.091248 102.00979 L 42.315763 72.641044 L 48.358289 59.222742 L 61.581771 29.853992 z " />
+      </g>
+    </g>
+  </g>
+  <rect
+     y="-49.422424"
+     x="-51.908718"
+     height="162.82199"
+     width="451.52316"
+     id="rect824"
+     style="opacity:0.98;fill:none;fill-opacity:1;stroke-width:0.311037" />
+</svg>

frontend/public/assets/images/fastapi-logo-light.svg

@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="341.26324mm"
+   height="63.977489mm"
+   viewBox="0 0 341.26324 63.977485"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="logo-white-nomargin-vector.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   inkscape:export-filename="logo-white-margin-vector.png"
+   inkscape:export-xdpi="57.604134"
+   inkscape:export-ydpi="57.604134"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1720"
+     inkscape:window-height="1371"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="0.73657628"
+     inkscape:cx="644.8755"
+     inkscape:cy="95.713101"
+     inkscape:window-x="1720"
+     inkscape:window-y="32"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g2141"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm" />
+  <defs
+     id="defs2" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g2149"
+     transform="translate(2.5752783e-4,1.1668595e-4)">
+    <g
+       id="g2141">
+      <g
+         id="g1">
+        <path
+           id="path875-5-9-7-3-2-3-9-9-8-0-0-5-87-7"
+           style="fill:#ffffff;fill-opacity:0.980392;stroke:none;stroke-width:0.136325;stop-color:#000000"
+           d="M 32.092357,-1.166849e-4 A 32.092354,31.988569 0 0 0 -2.5752734e-4,31.988628 32.092354,31.988569 0 0 0 32.092357,63.977374 32.092354,31.988569 0 0 0 64.184455,31.988628 32.092354,31.988569 0 0 0 32.092357,-1.166849e-4 Z M 29.878022,14.484271 H 50.070588 L 29.794823,28.73353 H 43.654442 L 14.114126,49.49247 20.530789,35.243727 23.462393,28.73353 Z" />
+        <path
+           style="font-size:79.7151px;line-height:1.25;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;letter-spacing:0px;word-spacing:0px;fill:#ffffff;stroke-width:1.99288"
+           d="M 89.762163,59.410606 V 4.1680399 H 121.88735 V 9.5089518 H 95.979941 V 28.082571 h 22.957949 v 5.340912 H 95.979941 v 25.987123 z m 51.017587,0.876867 q -4.46405,0 -7.97152,-1.275442 -3.50746,-1.275442 -5.50034,-4.145185 -1.99288,-2.869744 -1.99288,-7.572935 0,-4.543761 2.23203,-7.33379 2.23202,-2.869743 6.13806,-4.145185 3.98576,-1.275442 8.92809,-1.275442 2.23203,0 4.70319,0.398576 2.47117,0.398575 3.10889,0.717436 v -2.391453 q 0,-2.710314 -0.71743,-5.181482 -0.63772,-2.550883 -2.71032,-4.145186 -2.07259,-1.594302 -6.29749,-1.594302 -4.38433,0 -6.69607,0.637721 -2.31174,0.637721 -3.42775,1.036297 l -0.79715,-5.101767 q 1.43487,-0.637721 4.38433,-1.195727 2.94946,-0.558005 6.93522,-0.558005 5.65977,0 8.92809,1.992877 3.34803,1.992878 4.7829,5.500342 1.51459,3.42775 1.51459,7.891796 v 25.907408 q -1.67402,0.398576 -5.97863,1.116012 -4.30462,0.717436 -9.56581,0.717436 z m 0.87686,-5.101767 q 2.79003,0 5.02205,-0.15943 2.23203,-0.239146 3.74661,-0.558006 V 40.597842 q -0.79715,-0.398575 -2.71031,-0.797151 -1.91316,-0.398576 -4.94234,-0.398576 -2.55088,0 -5.18148,0.558006 -2.6306,0.558006 -4.46404,2.232023 -1.75374,1.674017 -1.75374,5.022052 0,4.464045 2.79003,6.217778 2.79003,1.753732 7.49322,1.753732 z m 36.4298,5.181482 q -5.34092,0 -8.37009,-0.956582 -2.94946,-0.876866 -3.98575,-1.355156 l 1.43487,-5.261197 q 0.87686,0.31886 3.58718,1.355157 2.71031,1.036296 7.33379,1.036296 4.38433,0 7.09464,-1.355157 2.71031,-1.355157 2.71031,-4.703191 0,-2.152308 -0.95658,-3.427749 -0.95658,-1.355157 -3.10889,-2.471169 -2.07259,-1.116011 -5.73948,-2.550883 -3.10889,-1.275442 -5.73949,-2.710313 -2.6306,-1.434872 -4.30462,-3.666895 -1.5943,-2.232023 -1.5943,-5.739488 0,-3.427749 1.75373,-5.978632 1.75374,-2.550884 4.94234,-3.985755 3.26832,-1.434872 7.73237,-1.434872 4.14518,0 7.01492,0.717436 2.86975,0.717436 4.06547,1.275441 l -1.35515,5.181482 q -1.0363,-0.558006 -3.34804,-1.275442 -2.31173,-0.797151 -6.53663,-0.797151 -3.34804,0 -5.81921,1.434872 -2.47117,1.355157 -2.47117,4.384331 0,2.152308 1.0363,3.507464 1.0363,1.275442 3.10889,2.311738 2.07259,1.036297 5.10177,2.232023 3.42775,1.355157 6.13806,2.869744 2.79003,1.434872 4.46405,3.74661 1.67401,2.311738 1.67401,6.138063 0,3.74661 -1.91316,6.377208 -1.91316,2.550883 -5.50034,3.826325 -3.50747,1.275442 -8.4498,1.275442 z m 39.21967,-0.07972 q -5.2612,0 -8.29037,-1.833448 -3.02917,-1.833447 -4.30461,-5.500342 -1.19573,-3.666895 -1.19573,-9.167237 V 6.1609175 L 209.494,5.1246211 V 18.118183 h 16.18217 v 5.022051 H 209.494 v 21.124503 q 0,4.38433 0.95658,6.696068 1.0363,2.311738 2.86975,3.188605 1.91316,0.797151 4.46404,0.797151 3.02918,0 5.02205,-0.717436 2.0726,-0.717436 3.26832,-1.275442 l 1.27544,4.862621 q -1.19572,0.717436 -3.98575,1.594302 -2.71031,0.876867 -6.05835,0.876867 z m 11.95723,-0.876867 q 4.30462,-11.55869 7.8918,-21.044787 3.58718,-9.486097 7.01493,-17.776468 3.50746,-8.370086 7.4135,-16.4213111 h 5.58006 q 2.86974,6.0583481 5.50034,12.2761261 2.71032,6.138063 5.34091,12.754416 2.6306,6.616354 5.42063,14.109574 2.86975,7.413504 6.05835,16.10245 h -6.77578 q -1.43488,-3.985755 -2.79003,-7.572934 -1.35516,-3.666895 -2.55089,-7.17436 h -26.30598 q -1.27544,3.507465 -2.6306,7.17436 -1.35516,3.587179 -2.71031,7.572934 z M 242.8946,39.402115 h 22.63909 q -1.51459,-3.985755 -2.94946,-7.732365 -1.43487,-3.746609 -2.86975,-7.254074 -1.35515,-3.507464 -2.79002,-6.775784 -1.35516,-3.348034 -2.79003,-6.536638 -1.35516,3.188604 -2.79003,6.536638 -1.35516,3.26832 -2.79003,6.775784 -1.35516,3.507465 -2.79003,7.254074 -1.43487,3.74661 -2.86974,7.732365 z m 44.481,20.008491 V 5.2043362 q 3.02917,-0.797151 6.93521,-1.1160114 3.98576,-0.3985755 7.33379,-0.3985755 11.71812,0 17.53732,4.5437609 5.89892,4.4640458 5.89892,12.7544168 0,6.297493 -2.94946,10.123818 -2.86974,3.826325 -8.37008,5.580057 -5.42063,1.674017 -13.07328,1.674017 h -7.09465 v 21.044787 z m 6.21777,-26.385699 h 6.53664 q 5.65978,0 9.80496,-0.956581 4.14519,-1.036296 6.37721,-3.666895 2.31174,-2.630598 2.31174,-7.493219 0,-4.703192 -2.39146,-7.254075 -2.39145,-2.550883 -6.21777,-3.587179 -3.82633,-1.0362968 -8.13094,-1.0362968 -2.79003,0 -4.86263,0.2391453 -1.99287,0.1594302 -3.42775,0.3188604 z M 335.0452,59.410606 V 4.1680399 h 6.21778 V 59.410606 Z"
+           id="text979-3"
+           aria-label="FastAPI" />
+      </g>
+    </g>
+  </g>
+  <rect
+     y="-49.422306"
+     x="-51.908459"
+     height="162.82199"
+     width="451.52316"
+     id="rect824"
+     style="opacity:0.98;fill:none;fill-opacity:1;stroke-width:0.311037" />
+</svg>

frontend/public/assets/images/fastapi-logo.svg

@@ -1,15 +1,43 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
-   id="svg8"
+   width="341.26297mm"
-   version="1.1"
-   viewBox="0 0 346.52395 63.977134"
    height="63.977139mm"
-   width="346.52396mm"
+   viewBox="0 0 341.26297 63.977134"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="logo-teal-nomargin-vector.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1720"
+     inkscape:window-height="1371"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="0.73657628"
+     inkscape:cx="448.01877"
+     inkscape:cy="-91.640203"
+     inkscape:window-x="1720"
+     inkscape:window-y="32"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g1"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm" />
   <defs
      id="defs2" />
   <metadata
@@ -28,24 +56,36 @@
     <g
        id="g2141">
       <g
-         id="g2106"
+         id="g1">
-         transform="matrix(0.96564264,0,0,0.96251987,-899.3295,194.86874)">
+        <g
-        <circle
+           id="g2106"
-           style="fill:#009688;fill-opacity:0.980392;stroke:none;stroke-width:0.141404;stop-color:#000000"
+           transform="matrix(0.96564264,0,0,0.96251987,-899.3295,194.86874)">
-           id="path875-5-9-7-3-2-3-9-9-8-0-0-5-87-7"
+          <circle
-           cx="964.56165"
+             style="fill:#009688;fill-opacity:0.980392;stroke:none;stroke-width:0.141404;stop-color:#000000"
-           cy="-169.22266"
+             id="path875-5-9-7-3-2-3-9-9-8-0-0-5-87-7"
-           r="33.234192" />
+             cx="964.56165"
+             cy="-169.22266"
+             r="33.234192"
+             inkscape:export-xdpi="1543.8315"
+             inkscape:export-ydpi="1543.8315" />
+          <path
+             id="rect1249-6-3-4-4-3-6-6-1-2"
+             style="fill:#ffffff;fill-opacity:0.980392;stroke:none;stroke-width:0.146895;stop-color:#000000"
+             d="m 962.2685,-187.40837 -6.64403,14.80375 -3.03599,6.76393 -6.64456,14.80375 30.59142,-21.56768 h -14.35312 l 20.99715,-14.80375 z" />
+        </g>
         <path
-           id="rect1249-6-3-4-4-3-6-6-1-2"
+           style="font-size:79.7151px;line-height:1.25;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;letter-spacing:0px;word-spacing:0px;fill:#009688;stroke-width:1.99288"
-           style="fill:#ffffff;fill-opacity:0.980392;stroke:none;stroke-width:0.146895;stop-color:#000000"
+           d="M 89.762163,59.410606 V 4.1680399 H 121.88735 V 9.5089518 H 95.979941 V 28.082571 h 22.957949 v 5.340912 H 95.979941 v 25.987123 z m 51.017587,0.876867 q -4.46405,0 -7.97152,-1.275442 -3.50746,-1.275442 -5.50034,-4.145185 -1.99288,-2.869744 -1.99288,-7.572935 0,-4.543761 2.23203,-7.33379 2.23202,-2.869743 6.13806,-4.145185 3.98576,-1.275442 8.92809,-1.275442 2.23203,0 4.70319,0.398576 2.47117,0.398575 3.10889,0.717436 v -2.391453 q 0,-2.710314 -0.71743,-5.181482 -0.63772,-2.550883 -2.71032,-4.145186 -2.07259,-1.594302 -6.29749,-1.594302 -4.38433,0 -6.69607,0.637721 -2.31174,0.637721 -3.42775,1.036297 l -0.79715,-5.101767 q 1.43487,-0.637721 4.38433,-1.195727 2.94946,-0.558005 6.93522,-0.558005 5.65977,0 8.92809,1.992877 3.34803,1.992878 4.7829,5.500342 1.51459,3.42775 1.51459,7.891796 v 25.907408 q -1.67402,0.398576 -5.97863,1.116012 -4.30462,0.717436 -9.56581,0.717436 z m 0.87686,-5.101767 q 2.79003,0 5.02205,-0.15943 2.23203,-0.239146 3.74661,-0.558006 V 40.597842 q -0.79715,-0.398575 -2.71031,-0.797151 -1.91316,-0.398576 -4.94234,-0.398576 -2.55088,0 -5.18148,0.558006 -2.6306,0.558006 -4.46404,2.232023 -1.75374,1.674017 -1.75374,5.022052 0,4.464045 2.79003,6.217778 2.79003,1.753732 7.49322,1.753732 z m 36.4298,5.181482 q -5.34092,0 -8.37009,-0.956582 -2.94946,-0.876866 -3.98575,-1.355156 l 1.43487,-5.261197 q 0.87686,0.31886 3.58718,1.355157 2.71031,1.036296 7.33379,1.036296 4.38433,0 7.09464,-1.355157 2.71031,-1.355157 2.71031,-4.703191 0,-2.152308 -0.95658,-3.427749 -0.95658,-1.355157 -3.10889,-2.471169 -2.07259,-1.116011 -5.73948,-2.550883 -3.10889,-1.275442 -5.73949,-2.710313 -2.6306,-1.434872 -4.30462,-3.666895 -1.5943,-2.232023 -1.5943,-5.739488 0,-3.427749 1.75373,-5.978632 1.75374,-2.550884 4.94234,-3.985755 3.26832,-1.434872 7.73237,-1.434872 4.14518,0 7.01492,0.717436 2.86975,0.717436 4.06547,1.275441 l -1.35515,5.181482 q -1.0363,-0.558006 -3.34804,-1.275442 -2.31173,-0.797151 -6.53663,-0.797151 -3.34804,0 -5.81921,1.434872 -2.47117,1.355157 -2.47117,4.384331 0,2.152308 1.0363,3.507464 1.0363,1.275442 3.10889,2.311738 2.07259,1.036297 5.10177,2.232023 3.42775,1.355157 6.13806,2.869744 2.79003,1.434872 4.46405,3.74661 1.67401,2.311738 1.67401,6.138063 0,3.74661 -1.91316,6.377208 -1.91316,2.550883 -5.50034,3.826325 -3.50747,1.275442 -8.4498,1.275442 z m 39.21967,-0.07972 q -5.2612,0 -8.29037,-1.833448 -3.02917,-1.833447 -4.30461,-5.500342 -1.19573,-3.666895 -1.19573,-9.167237 V 6.1609175 L 209.494,5.1246211 V 18.118183 h 16.18217 v 5.022051 H 209.494 v 21.124503 q 0,4.38433 0.95658,6.696068 1.0363,2.311738 2.86975,3.188605 1.91316,0.797151 4.46404,0.797151 3.02918,0 5.02205,-0.717436 2.0726,-0.717436 3.26832,-1.275442 l 1.27544,4.862621 q -1.19572,0.717436 -3.98575,1.594302 -2.71031,0.876867 -6.05835,0.876867 z m 11.95723,-0.876867 q 4.30462,-11.55869 7.8918,-21.044787 3.58718,-9.486097 7.01493,-17.776468 3.50746,-8.370086 7.4135,-16.4213111 h 5.58006 q 2.86974,6.0583481 5.50034,12.2761261 2.71032,6.138063 5.34091,12.754416 2.6306,6.616354 5.42063,14.109574 2.86975,7.413504 6.05835,16.10245 h -6.77578 q -1.43488,-3.985755 -2.79003,-7.572934 -1.35516,-3.666895 -2.55089,-7.17436 h -26.30598 q -1.27544,3.507465 -2.6306,7.17436 -1.35516,3.587179 -2.71031,7.572934 z M 242.8946,39.402115 h 22.63909 q -1.51459,-3.985755 -2.94946,-7.732365 -1.43487,-3.746609 -2.86975,-7.254074 -1.35515,-3.507464 -2.79002,-6.775784 -1.35516,-3.348034 -2.79003,-6.536638 -1.35516,3.188604 -2.79003,6.536638 -1.35516,3.26832 -2.79003,6.775784 -1.35516,3.507465 -2.79003,7.254074 -1.43487,3.74661 -2.86974,7.732365 z m 44.481,20.008491 V 5.2043362 q 3.02917,-0.797151 6.93521,-1.1160114 3.98576,-0.3985755 7.33379,-0.3985755 11.71812,0 17.53732,4.5437609 5.89892,4.4640458 5.89892,12.7544168 0,6.297493 -2.94946,10.123818 -2.86974,3.826325 -8.37008,5.580057 -5.42063,1.674017 -13.07328,1.674017 h -7.09465 v 21.044787 z m 6.21777,-26.385699 h 6.53664 q 5.65978,0 9.80496,-0.956581 4.14519,-1.036296 6.37721,-3.666895 2.31174,-2.630598 2.31174,-7.493219 0,-4.703192 -2.39146,-7.254075 -2.39145,-2.550883 -6.21777,-3.587179 -3.82633,-1.0362968 -8.13094,-1.0362968 -2.79003,0 -4.86263,0.2391453 -1.99287,0.1594302 -3.42775,0.3188604 z M 335.0452,59.410606 V 4.1680399 h 6.21778 V 59.410606 Z"
-           d="m 962.2685,-187.40837 -6.64403,14.80375 -3.03599,6.76393 -6.64456,14.80375 30.59142,-21.56768 h -14.35312 l 20.99715,-14.80375 z" />
+           id="text979-3"
+           aria-label="FastAPI" />
       </g>
-      <path
-         style="font-size:79.7151px;line-height:1.25;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;letter-spacing:0px;word-spacing:0px;fill:#009688;stroke-width:1.99288"
-         d="M 89.523017,59.410606 V 4.1680399 H 122.84393 V 10.784393 H 97.255382 V 27.44485 h 22.718808 v 6.536638 H 97.255382 v 25.429118 z m 52.292963,-5.340912 q 2.6306,0 4.62348,-0.07972 2.07259,-0.15943 3.42774,-0.47829 V 41.155848 q -0.79715,-0.398576 -2.63059,-0.637721 -1.75374,-0.31886 -4.30462,-0.31886 -1.67402,0 -3.58718,0.239145 -1.83345,0.239145 -3.42775,1.036296 -1.51459,0.717436 -2.55088,2.072593 -1.0363,1.275442 -1.0363,3.427749 0,3.985755 2.55089,5.580058 2.55088,1.514586 6.93521,1.514586 z m -0.63772,-37.147238 q 4.46404,0 7.49322,1.195727 3.10889,1.116011 4.94233,3.268319 1.91317,2.072593 2.71032,5.022052 0.79715,2.869743 0.79715,6.377208 V 58.69317 q -0.95658,0.159431 -2.71031,0.478291 -1.67402,0.239145 -3.82633,0.478291 -2.15231,0.239145 -4.70319,0.398575 -2.47117,0.239146 -4.94234,0.239146 -3.50746,0 -6.45692,-0.717436 -2.94946,-0.717436 -5.10177,-2.232023 -2.1523,-1.594302 -3.34803,-4.145186 -1.19573,-2.550883 -1.19573,-6.138063 0,-3.427749 1.35516,-5.898917 1.43487,-2.471168 3.82632,-3.985755 2.39146,-1.514587 5.58006,-2.232023 3.18861,-0.717436 6.69607,-0.717436 1.11601,0 2.31174,0.15943 1.19572,0.07972 2.23202,0.31886 1.11601,0.159431 1.91316,0.318861 0.79715,0.15943 1.11601,0.239145 v -2.072593 q 0,-1.833447 -0.39857,-3.587179 -0.39858,-1.833448 -1.43487,-3.188604 -1.0363,-1.434872 -2.86975,-2.232023 -1.75373,-0.876866 -4.62347,-0.876866 -3.6669,0 -6.45693,0.558005 -2.71031,0.478291 -4.06547,1.036297 l -0.87686,-6.138063 q 1.43487,-0.637721 4.7829,-1.195727 3.34804,-0.637721 7.25408,-0.637721 z m 37.86462,37.147238 q 4.54377,0 6.69607,-1.195726 2.23203,-1.195727 2.23203,-3.826325 0,-2.710314 -2.15231,-4.304616 -2.15231,-1.594302 -7.09465,-3.587179 -2.39145,-0.956581 -4.62347,-1.913163 -2.15231,-1.036296 -3.74661,-2.391453 -1.5943,-1.355157 -2.55088,-3.268319 -0.95659,-1.913163 -0.95659,-4.703191 0,-5.500342 4.06547,-8.688946 4.06547,-3.26832 11.0804,-3.26832 1.75374,0 3.50747,0.239146 1.75373,0.15943 3.26832,0.47829 1.51458,0.239146 2.6306,0.558006 1.19572,0.31886 1.83344,0.558006 l -1.35515,6.377208 q -1.19573,-0.637721 -3.74661,-1.275442 -2.55089,-0.717436 -6.13807,-0.717436 -3.10889,0 -5.42062,1.275442 -2.31174,1.195727 -2.31174,3.826325 0,1.355157 0.47829,2.391453 0.55801,1.036296 1.5943,1.913163 1.11601,0.797151 2.71031,1.514587 1.59431,0.717436 3.82633,1.514587 2.94946,1.116011 5.2612,2.232022 2.31173,1.036297 3.90604,2.471169 1.67401,1.434871 2.55088,3.507464 0.87687,1.992878 0.87687,4.942337 0,5.739487 -4.30462,8.688946 -4.2249,2.949459 -12.1167,2.949459 -5.50034,0 -8.60923,-0.956582 -3.10889,-0.876866 -4.2249,-1.355156 l 1.35516,-6.377209 q 1.27544,0.478291 4.06547,1.434872 2.79003,0.956581 7.4135,0.956581 z m 32.84256,-36.110941 h 15.70387 v 6.217778 h -15.70387 v 19.131625 q 0,3.108889 0.47829,5.181481 0.47829,1.992878 1.43487,3.188604 0.95658,1.116012 2.39145,1.594302 1.43487,0.478291 3.34804,0.478291 3.34803,0 5.34091,-0.717436 2.07259,-0.797151 2.86974,-1.116011 l 1.43487,6.138063 q -1.11601,0.558005 -3.90604,1.355156 -2.79003,0.876867 -6.37721,0.876867 -4.2249,0 -7.01492,-1.036297 -2.71032,-1.116011 -4.38434,-3.268319 -1.67401,-2.152308 -2.39145,-5.261197 -0.63772,-3.188604 -0.63772,-7.333789 V 6.4000628 l 7.41351,-1.2754417 z m 62.49652,41.451853 q -1.35516,-3.587179 -2.55088,-7.014929 -1.19573,-3.507464 -2.47117,-7.094644 h -25.03054 l -5.02205,14.109573 h -8.05123 q 3.18861,-8.768661 5.97863,-16.182166 2.79003,-7.493219 5.42063,-14.189288 2.71031,-6.696069 5.34091,-12.754416 2.6306,-6.138063 5.50034,-12.1166961 h 7.09465 q 2.86974,5.9786331 5.50034,12.1166961 2.6306,6.058347 5.2612,12.754416 2.71031,6.696069 5.50034,14.189288 2.79003,7.413505 5.97863,16.182166 z m -7.25407,-20.486781 q -2.55089,-6.935214 -5.10177,-13.392137 -2.47117,-6.536639 -5.18148,-12.515272 -2.79003,5.978633 -5.34091,12.515272 -2.47117,6.456923 -4.94234,13.392137 z M 304.99242,3.6100342 q 11.6384,0 17.85618,4.4640458 6.29749,4.384331 6.29749,13.152992 0,4.782906 -1.75373,8.210656 -1.67402,3.348034 -4.94234,5.500342 -3.1886,2.072592 -7.81208,3.029174 -4.62347,0.956581 -10.44268,0.956581 h -6.13806 v 20.486781 h -7.73236 V 4.9651909 q 3.26832,-0.797151 7.25407,-1.0362963 4.06547,-0.3188604 7.41351,-0.3188604 z m 0.63772,6.7757838 q -4.94234,0 -7.57294,0.239145 v 21.682508 h 5.8192 q 3.98576,0 7.17436,-0.47829 3.18861,-0.558006 5.34092,-1.753733 2.23202,-1.275441 3.42774,-3.427749 1.19573,-2.152308 1.19573,-5.500342 0,-3.188604 -1.27544,-5.261197 -1.19573,-2.072593 -3.34803,-3.268319 -2.0726,-1.275442 -4.86263,-1.753732 -2.79002,-0.478291 -5.89891,-0.478291 z M 338.7916,4.1680399 h 7.73237 V 59.410606 h -7.73237 z"
-         id="text979"
-         aria-label="FastAPI" />
     </g>
   </g>
+  <rect
+     y="-49.422424"
+     x="-51.908718"
+     height="162.82199"
+     width="451.52316"
+     id="rect824"
+     style="opacity:0.98;fill:none;fill-opacity:1;stroke-width:0.311037" />
 </svg>

frontend/src/client/core/ApiError.ts

@@ -1,25 +1,21 @@
-import type { ApiRequestOptions } from "./ApiRequestOptions"
+import type { ApiRequestOptions } from './ApiRequestOptions';
-import type { ApiResult } from "./ApiResult"
+import type { ApiResult } from './ApiResult';
 
 export class ApiError extends Error {
-  public readonly url: string
+	public readonly url: string;
-  public readonly status: number
+	public readonly status: number;
-  public readonly statusText: string
+	public readonly statusText: string;
-  public readonly body: unknown
+	public readonly body: unknown;
-  public readonly request: ApiRequestOptions
+	public readonly request: ApiRequestOptions;
 
-  constructor(
+	constructor(request: ApiRequestOptions, response: ApiResult, message: string) {
-    request: ApiRequestOptions,
+		super(message);
-    response: ApiResult,
-    message: string,
-  ) {
-    super(message)
 
-    this.name = "ApiError"
+		this.name = 'ApiError';
-    this.url = response.url
+		this.url = response.url;
-    this.status = response.status
+		this.status = response.status;
-    this.statusText = response.statusText
+		this.statusText = response.statusText;
-    this.body = response.body
+		this.body = response.body;
-    this.request = request
+		this.request = request;
-  }
+	}
 }

frontend/src/client/core/ApiRequestOptions.ts

@@ -1,20 +1,21 @@
-export type ApiRequestOptions = {
+export type ApiRequestOptions<T = unknown> = {
-  readonly method:
+	readonly body?: any;
-    | "GET"
+	readonly cookies?: Record<string, unknown>;
-    | "PUT"
+	readonly errors?: Record<number | string, string>;
-    | "POST"
+	readonly formData?: Record<string, unknown> | any[] | Blob | File;
-    | "DELETE"
+	readonly headers?: Record<string, unknown>;
-    | "OPTIONS"
+	readonly mediaType?: string;
-    | "HEAD"
+	readonly method:
-    | "PATCH"
+		| 'DELETE'
-  readonly url: string
+		| 'GET'
-  readonly path?: Record<string, unknown>
+		| 'HEAD'
-  readonly cookies?: Record<string, unknown>
+		| 'OPTIONS'
-  readonly headers?: Record<string, unknown>
+		| 'PATCH'
-  readonly query?: Record<string, unknown>
+		| 'POST'
-  readonly formData?: Record<string, unknown>
+		| 'PUT';
-  readonly body?: any
+	readonly path?: Record<string, unknown>;
-  readonly mediaType?: string
+	readonly query?: Record<string, unknown>;
-  readonly responseHeader?: string
+	readonly responseHeader?: string;
-  readonly errors?: Record<number, string>
+	readonly responseTransformer?: (data: unknown) => Promise<T>;
-}
+	readonly url: string;
+};

frontend/src/client/core/ApiResult.ts

@@ -1,7 +1,7 @@
 export type ApiResult<TData = any> = {
-  readonly body: TData
+	readonly body: TData;
-  readonly ok: boolean
+	readonly ok: boolean;
-  readonly status: number
+	readonly status: number;
-  readonly statusText: string
+	readonly statusText: string;
-  readonly url: string
+	readonly url: string;
-}
+};

frontend/src/client/core/CancelablePromise.ts

@@ -1,126 +1,126 @@
 export class CancelError extends Error {
-  constructor(message: string) {
+	constructor(message: string) {
-    super(message)
+		super(message);
-    this.name = "CancelError"
+		this.name = 'CancelError';
-  }
+	}
 
-  public get isCancelled(): boolean {
+	public get isCancelled(): boolean {
-    return true
+		return true;
-  }
+	}
 }
 
 export interface OnCancel {
-  readonly isResolved: boolean
+	readonly isResolved: boolean;
-  readonly isRejected: boolean
+	readonly isRejected: boolean;
-  readonly isCancelled: boolean
+	readonly isCancelled: boolean;
 
-  (cancelHandler: () => void): void
+	(cancelHandler: () => void): void;
 }
 
 export class CancelablePromise<T> implements Promise<T> {
-  private _isResolved: boolean
+	private _isResolved: boolean;
-  private _isRejected: boolean
+	private _isRejected: boolean;
-  private _isCancelled: boolean
+	private _isCancelled: boolean;
-  readonly cancelHandlers: (() => void)[]
+	readonly cancelHandlers: (() => void)[];
-  readonly promise: Promise<T>
+	readonly promise: Promise<T>;
-  private _resolve?: (value: T | PromiseLike<T>) => void
+	private _resolve?: (value: T | PromiseLike<T>) => void;
-  private _reject?: (reason?: unknown) => void
+	private _reject?: (reason?: unknown) => void;
 
-  constructor(
+	constructor(
-    executor: (
+		executor: (
-      resolve: (value: T | PromiseLike<T>) => void,
+			resolve: (value: T | PromiseLike<T>) => void,
-      reject: (reason?: unknown) => void,
+			reject: (reason?: unknown) => void,
-      onCancel: OnCancel,
+			onCancel: OnCancel
-    ) => void,
+		) => void
-  ) {
+	) {
-    this._isResolved = false
+		this._isResolved = false;
-    this._isRejected = false
+		this._isRejected = false;
-    this._isCancelled = false
+		this._isCancelled = false;
-    this.cancelHandlers = []
+		this.cancelHandlers = [];
-    this.promise = new Promise<T>((resolve, reject) => {
+		this.promise = new Promise<T>((resolve, reject) => {
-      this._resolve = resolve
+			this._resolve = resolve;
-      this._reject = reject
+			this._reject = reject;
 
-      const onResolve = (value: T | PromiseLike<T>): void => {
+			const onResolve = (value: T | PromiseLike<T>): void => {
-        if (this._isResolved || this._isRejected || this._isCancelled) {
+				if (this._isResolved || this._isRejected || this._isCancelled) {
-          return
+					return;
-        }
+				}
-        this._isResolved = true
+				this._isResolved = true;
-        if (this._resolve) this._resolve(value)
+				if (this._resolve) this._resolve(value);
-      }
+			};
 
-      const onReject = (reason?: unknown): void => {
+			const onReject = (reason?: unknown): void => {
-        if (this._isResolved || this._isRejected || this._isCancelled) {
+				if (this._isResolved || this._isRejected || this._isCancelled) {
-          return
+					return;
-        }
+				}
-        this._isRejected = true
+				this._isRejected = true;
-        if (this._reject) this._reject(reason)
+				if (this._reject) this._reject(reason);
-      }
+			};
 
-      const onCancel = (cancelHandler: () => void): void => {
+			const onCancel = (cancelHandler: () => void): void => {
-        if (this._isResolved || this._isRejected || this._isCancelled) {
+				if (this._isResolved || this._isRejected || this._isCancelled) {
-          return
+					return;
-        }
+				}
-        this.cancelHandlers.push(cancelHandler)
+				this.cancelHandlers.push(cancelHandler);
-      }
+			};
 
-      Object.defineProperty(onCancel, "isResolved", {
+			Object.defineProperty(onCancel, 'isResolved', {
-        get: (): boolean => this._isResolved,
+				get: (): boolean => this._isResolved,
-      })
+			});
 
-      Object.defineProperty(onCancel, "isRejected", {
+			Object.defineProperty(onCancel, 'isRejected', {
-        get: (): boolean => this._isRejected,
+				get: (): boolean => this._isRejected,
-      })
+			});
 
-      Object.defineProperty(onCancel, "isCancelled", {
+			Object.defineProperty(onCancel, 'isCancelled', {
-        get: (): boolean => this._isCancelled,
+				get: (): boolean => this._isCancelled,
-      })
+			});
 
-      return executor(onResolve, onReject, onCancel as OnCancel)
+			return executor(onResolve, onReject, onCancel as OnCancel);
-    })
+		});
-  }
+	}
 
-  get [Symbol.toStringTag]() {
+	get [Symbol.toStringTag]() {
-    return "Cancellable Promise"
+		return "Cancellable Promise";
-  }
+	}
 
-  public then<TResult1 = T, TResult2 = never>(
+	public then<TResult1 = T, TResult2 = never>(
-    onFulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | null,
+		onFulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | null,
-    onRejected?: ((reason: unknown) => TResult2 | PromiseLike<TResult2>) | null,
+		onRejected?: ((reason: unknown) => TResult2 | PromiseLike<TResult2>) | null
-  ): Promise<TResult1 | TResult2> {
+	): Promise<TResult1 | TResult2> {
-    return this.promise.then(onFulfilled, onRejected)
+		return this.promise.then(onFulfilled, onRejected);
-  }
+	}
 
-  public catch<TResult = never>(
+	public catch<TResult = never>(
-    onRejected?: ((reason: unknown) => TResult | PromiseLike<TResult>) | null,
+		onRejected?: ((reason: unknown) => TResult | PromiseLike<TResult>) | null
-  ): Promise<T | TResult> {
+	): Promise<T | TResult> {
-    return this.promise.catch(onRejected)
+		return this.promise.catch(onRejected);
-  }
+	}
 
-  public finally(onFinally?: (() => void) | null): Promise<T> {
+	public finally(onFinally?: (() => void) | null): Promise<T> {
-    return this.promise.finally(onFinally)
+		return this.promise.finally(onFinally);
-  }
+	}
 
-  public cancel(): void {
+	public cancel(): void {
-    if (this._isResolved || this._isRejected || this._isCancelled) {
+		if (this._isResolved || this._isRejected || this._isCancelled) {
-      return
+			return;
-    }
+		}
-    this._isCancelled = true
+		this._isCancelled = true;
-    if (this.cancelHandlers.length) {
+		if (this.cancelHandlers.length) {
-      try {
+			try {
-        for (const cancelHandler of this.cancelHandlers) {
+				for (const cancelHandler of this.cancelHandlers) {
-          cancelHandler()
+					cancelHandler();
-        }
+				}
-      } catch (error) {
+			} catch (error) {
-        console.warn("Cancellation threw an error", error)
+				console.warn('Cancellation threw an error', error);
-        return
+				return;
-      }
+			}
-    }
+		}
-    this.cancelHandlers.length = 0
+		this.cancelHandlers.length = 0;
-    if (this._reject) this._reject(new CancelError("Request aborted"))
+		if (this._reject) this._reject(new CancelError('Request aborted'));
-  }
+	}
 
-  public get isCancelled(): boolean {
+	public get isCancelled(): boolean {
-    return this._isCancelled
+		return this._isCancelled;
-  }
+	}
 }

frontend/src/client/core/OpenAPI.ts

@@ -1,57 +1,57 @@
-import type { AxiosRequestConfig, AxiosResponse } from "axios"
+import type { AxiosRequestConfig, AxiosResponse } from 'axios';
-import type { ApiRequestOptions } from "./ApiRequestOptions"
+import type { ApiRequestOptions } from './ApiRequestOptions';
-import type { TResult } from "./types"
 
-type Headers = Record<string, string>
+type Headers = Record<string, string>;
-type Middleware<T> = (value: T) => T | Promise<T>
+type Middleware<T> = (value: T) => T | Promise<T>;
-type Resolver<T> = (options: ApiRequestOptions) => Promise<T>
+type Resolver<T> = (options: ApiRequestOptions<T>) => Promise<T>;
 
 export class Interceptors<T> {
-  _fns: Middleware<T>[]
+  _fns: Middleware<T>[];
 
   constructor() {
-    this._fns = []
+    this._fns = [];
   }
 
-  eject(fn: Middleware<T>) {
+  eject(fn: Middleware<T>): void {
-    const index = this._fns.indexOf(fn)
+    const index = this._fns.indexOf(fn);
     if (index !== -1) {
-      this._fns = [...this._fns.slice(0, index), ...this._fns.slice(index + 1)]
+      this._fns = [...this._fns.slice(0, index), ...this._fns.slice(index + 1)];
     }
   }
 
-  use(fn: Middleware<T>) {
+  use(fn: Middleware<T>): void {
-    this._fns = [...this._fns, fn]
+    this._fns = [...this._fns, fn];
   }
 }
 
 export type OpenAPIConfig = {
-  BASE: string
+	BASE: string;
-  CREDENTIALS: "include" | "omit" | "same-origin"
+	CREDENTIALS: 'include' | 'omit' | 'same-origin';
-  ENCODE_PATH?: ((path: string) => string) | undefined
+	ENCODE_PATH?: ((path: string) => string) | undefined;
-  HEADERS?: Headers | Resolver<Headers> | undefined
+	HEADERS?: Headers | Resolver<Headers> | undefined;
-  PASSWORD?: string | Resolver<string> | undefined
+	PASSWORD?: string | Resolver<string> | undefined;
-  RESULT?: TResult
+	TOKEN?: string | Resolver<string> | undefined;
-  TOKEN?: string | Resolver<string> | undefined
+	USERNAME?: string | Resolver<string> | undefined;
-  USERNAME?: string | Resolver<string> | undefined
+	VERSION: string;
-  VERSION: string
+	WITH_CREDENTIALS: boolean;
-  WITH_CREDENTIALS: boolean
+	interceptors: {
-  interceptors: {
+		request: Interceptors<AxiosRequestConfig>;
-    request: Interceptors<AxiosRequestConfig>
+		response: Interceptors<AxiosResponse>;
-    response: Interceptors<AxiosResponse>
+	};
-  }
+};
-}
 
 export const OpenAPI: OpenAPIConfig = {
-  BASE: "",
+	BASE: '',
-  CREDENTIALS: "include",
+	CREDENTIALS: 'include',
-  ENCODE_PATH: undefined,
+	ENCODE_PATH: undefined,
-  HEADERS: undefined,
+	HEADERS: undefined,
-  PASSWORD: undefined,
+	PASSWORD: undefined,
-  RESULT: "body",
+	TOKEN: undefined,
-  TOKEN: undefined,
+	USERNAME: undefined,
-  USERNAME: undefined,
+	VERSION: '0.1.0',
-  VERSION: "0.1.0",
+	WITH_CREDENTIALS: false,
-  WITH_CREDENTIALS: false,
+	interceptors: {
-  interceptors: { request: new Interceptors(), response: new Interceptors() },
+		request: new Interceptors(),
-}
+		response: new Interceptors(),
+	},
+};

frontend/src/client/core/request.ts

@@ -1,319 +1,301 @@
-import axios from "axios"
+import axios from 'axios';
-import type {
+import type { AxiosError, AxiosRequestConfig, AxiosResponse, AxiosInstance } from 'axios';
-  AxiosError,
-  AxiosInstance,
-  AxiosRequestConfig,
-  AxiosResponse,
-} from "axios"
 
-import { ApiError } from "./ApiError"
+import { ApiError } from './ApiError';
-import type { ApiRequestOptions } from "./ApiRequestOptions"
+import type { ApiRequestOptions } from './ApiRequestOptions';
-import type { ApiResult } from "./ApiResult"
+import type { ApiResult } from './ApiResult';
-import { CancelablePromise } from "./CancelablePromise"
+import { CancelablePromise } from './CancelablePromise';
-import type { OnCancel } from "./CancelablePromise"
+import type { OnCancel } from './CancelablePromise';
-import type { OpenAPIConfig } from "./OpenAPI"
+import type { OpenAPIConfig } from './OpenAPI';
 
 export const isString = (value: unknown): value is string => {
-  return typeof value === "string"
+	return typeof value === 'string';
-}
+};
 
 export const isStringWithValue = (value: unknown): value is string => {
-  return isString(value) && value !== ""
+	return isString(value) && value !== '';
-}
+};
 
 export const isBlob = (value: any): value is Blob => {
-  return value instanceof Blob
+	return value instanceof Blob;
-}
+};
 
 export const isFormData = (value: unknown): value is FormData => {
-  return value instanceof FormData
+	return value instanceof FormData;
-}
+};
 
 export const isSuccess = (status: number): boolean => {
-  return status >= 200 && status < 300
+	return status >= 200 && status < 300;
-}
+};
 
 export const base64 = (str: string): string => {
-  try {
+	try {
-    return btoa(str)
+		return btoa(str);
-  } catch (err) {
+	} catch (err) {
-    // @ts-ignore
+		// @ts-ignore
-    return Buffer.from(str).toString("base64")
+		return Buffer.from(str).toString('base64');
-  }
+	}
-}
+};
 
 export const getQueryString = (params: Record<string, unknown>): string => {
-  const qs: string[] = []
+	const qs: string[] = [];
 
-  const append = (key: string, value: unknown) => {
+	const append = (key: string, value: unknown) => {
-    qs.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`)
+		qs.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`);
-  }
+	};
 
-  const encodePair = (key: string, value: unknown) => {
+	const encodePair = (key: string, value: unknown) => {
-    if (value === undefined || value === null) {
+		if (value === undefined || value === null) {
-      return
+			return;
-    }
+		}
 
-    if (Array.isArray(value)) {
+		if (value instanceof Date) {
-      value.forEach((v) => encodePair(key, v))
+			append(key, value.toISOString());
-    } else if (typeof value === "object") {
+		} else if (Array.isArray(value)) {
-      Object.entries(value).forEach(([k, v]) => encodePair(`${key}[${k}]`, v))
+			value.forEach(v => encodePair(key, v));
-    } else {
+		} else if (typeof value === 'object') {
-      append(key, value)
+			Object.entries(value).forEach(([k, v]) => encodePair(`${key}[${k}]`, v));
-    }
+		} else {
-  }
+			append(key, value);
+		}
+	};
 
-  Object.entries(params).forEach(([key, value]) => encodePair(key, value))
+	Object.entries(params).forEach(([key, value]) => encodePair(key, value));
 
-  return qs.length ? `?${qs.join("&")}` : ""
+	return qs.length ? `?${qs.join('&')}` : '';
-}
+};
 
 const getUrl = (config: OpenAPIConfig, options: ApiRequestOptions): string => {
-  const encoder = config.ENCODE_PATH || encodeURI
+	const encoder = config.ENCODE_PATH || encodeURI;
 
-  const path = options.url
+	const path = options.url
-    .replace("{api-version}", config.VERSION)
+		.replace('{api-version}', config.VERSION)
-    .replace(/{(.*?)}/g, (substring: string, group: string) => {
+		.replace(/{(.*?)}/g, (substring: string, group: string) => {
-      if (options.path?.hasOwnProperty(group)) {
+			if (options.path?.hasOwnProperty(group)) {
-        return encoder(String(options.path[group]))
+				return encoder(String(options.path[group]));
-      }
+			}
-      return substring
+			return substring;
-    })
+		});
 
-  const url = config.BASE + path
+	const url = config.BASE + path;
-  return options.query ? url + getQueryString(options.query) : url
+	return options.query ? url + getQueryString(options.query) : url;
-}
+};
 
-export const getFormData = (
+export const getFormData = (options: ApiRequestOptions): FormData | undefined => {
-  options: ApiRequestOptions,
+	if (options.formData) {
-): FormData | undefined => {
+		const formData = new FormData();
-  if (options.formData) {
-    const formData = new FormData()
 
-    const process = (key: string, value: unknown) => {
+		const process = (key: string, value: unknown) => {
-      if (isString(value) || isBlob(value)) {
+			if (isString(value) || isBlob(value)) {
-        formData.append(key, value)
+				formData.append(key, value);
-      } else {
+			} else {
-        formData.append(key, JSON.stringify(value))
+				formData.append(key, JSON.stringify(value));
-      }
+			}
-    }
+		};
 
-    Object.entries(options.formData)
+		Object.entries(options.formData)
-      .filter(([, value]) => value !== undefined && value !== null)
+			.filter(([, value]) => value !== undefined && value !== null)
-      .forEach(([key, value]) => {
+			.forEach(([key, value]) => {
-        if (Array.isArray(value)) {
+				if (Array.isArray(value)) {
-          value.forEach((v) => process(key, v))
+					value.forEach(v => process(key, v));
-        } else {
+				} else {
-          process(key, value)
+					process(key, value);
-        }
+				}
-      })
+			});
 
-    return formData
+		return formData;
-  }
+	}
-  return undefined
+	return undefined;
-}
+};
 
-type Resolver<T> = (options: ApiRequestOptions) => Promise<T>
+type Resolver<T> = (options: ApiRequestOptions<T>) => Promise<T>;
 
-export const resolve = async <T>(
+export const resolve = async <T>(options: ApiRequestOptions<T>, resolver?: T | Resolver<T>): Promise<T | undefined> => {
-  options: ApiRequestOptions,
+	if (typeof resolver === 'function') {
-  resolver?: T | Resolver<T>,
+		return (resolver as Resolver<T>)(options);
-): Promise<T | undefined> => {
+	}
-  if (typeof resolver === "function") {
+	return resolver;
-    return (resolver as Resolver<T>)(options)
+};
-  }
-  return resolver
-}
 
-export const getHeaders = async (
+export const getHeaders = async <T>(config: OpenAPIConfig, options: ApiRequestOptions<T>): Promise<Record<string, string>> => {
-  config: OpenAPIConfig,
+	const [token, username, password, additionalHeaders] = await Promise.all([
-  options: ApiRequestOptions,
+		// @ts-ignore
-): Promise<Record<string, string>> => {
+		resolve(options, config.TOKEN),
-  const [token, username, password, additionalHeaders] = await Promise.all([
+		// @ts-ignore
-    resolve(options, config.TOKEN),
+		resolve(options, config.USERNAME),
-    resolve(options, config.USERNAME),
+		// @ts-ignore
-    resolve(options, config.PASSWORD),
+		resolve(options, config.PASSWORD),
-    resolve(options, config.HEADERS),
+		// @ts-ignore
-  ])
+		resolve(options, config.HEADERS),
+	]);
 
-  const headers = Object.entries({
+	const headers = Object.entries({
-    Accept: "application/json",
+		Accept: 'application/json',
-    ...additionalHeaders,
+		...additionalHeaders,
-    ...options.headers,
+		...options.headers,
-  })
+	})
-    .filter(([, value]) => value !== undefined && value !== null)
+	.filter(([, value]) => value !== undefined && value !== null)
-    .reduce(
+	.reduce((headers, [key, value]) => ({
-      (headers, [key, value]) => ({
+		...headers,
-        ...headers,
+		[key]: String(value),
-        [key]: String(value),
+	}), {} as Record<string, string>);
-      }),
-      {} as Record<string, string>,
-    )
 
-  if (isStringWithValue(token)) {
+	if (isStringWithValue(token)) {
-    headers.Authorization = `Bearer ${token}`
+		headers['Authorization'] = `Bearer ${token}`;
-  }
+	}
 
-  if (isStringWithValue(username) && isStringWithValue(password)) {
+	if (isStringWithValue(username) && isStringWithValue(password)) {
-    const credentials = base64(`${username}:${password}`)
+		const credentials = base64(`${username}:${password}`);
-    headers.Authorization = `Basic ${credentials}`
+		headers['Authorization'] = `Basic ${credentials}`;
-  }
+	}
 
-  if (options.body !== undefined) {
+	if (options.body !== undefined) {
-    if (options.mediaType) {
+		if (options.mediaType) {
-      headers["Content-Type"] = options.mediaType
+			headers['Content-Type'] = options.mediaType;
-    } else if (isBlob(options.body)) {
+		} else if (isBlob(options.body)) {
-      headers["Content-Type"] = options.body.type || "application/octet-stream"
+			headers['Content-Type'] = options.body.type || 'application/octet-stream';
-    } else if (isString(options.body)) {
+		} else if (isString(options.body)) {
-      headers["Content-Type"] = "text/plain"
+			headers['Content-Type'] = 'text/plain';
-    } else if (!isFormData(options.body)) {
+		} else if (!isFormData(options.body)) {
-      headers["Content-Type"] = "application/json"
+			headers['Content-Type'] = 'application/json';
-    }
+		}
-  } else if (options.formData !== undefined) {
+	} else if (options.formData !== undefined) {
-    if (options.mediaType) {
+		if (options.mediaType) {
-      headers["Content-Type"] = options.mediaType
+			headers['Content-Type'] = options.mediaType;
-    }
+		}
-  }
+	}
 
-  return headers
+	return headers;
-}
+};
 
 export const getRequestBody = (options: ApiRequestOptions): unknown => {
-  if (options.body) {
+	if (options.body) {
-    return options.body
+		return options.body;
-  }
+	}
-  return undefined
+	return undefined;
-}
+};
 
 export const sendRequest = async <T>(
-  config: OpenAPIConfig,
+	config: OpenAPIConfig,
-  options: ApiRequestOptions,
+	options: ApiRequestOptions<T>,
-  url: string,
+	url: string,
-  body: unknown,
+	body: unknown,
-  formData: FormData | undefined,
+	formData: FormData | undefined,
-  headers: Record<string, string>,
+	headers: Record<string, string>,
-  onCancel: OnCancel,
+	onCancel: OnCancel,
-  axiosClient: AxiosInstance,
+	axiosClient: AxiosInstance
 ): Promise<AxiosResponse<T>> => {
-  const controller = new AbortController()
+	const controller = new AbortController();
 
-  let requestConfig: AxiosRequestConfig = {
+	let requestConfig: AxiosRequestConfig = {
-    data: body ?? formData,
+		data: body ?? formData,
-    headers,
+		headers,
-    method: options.method,
+		method: options.method,
-    signal: controller.signal,
+		signal: controller.signal,
-    url,
+		url,
-    withCredentials: config.WITH_CREDENTIALS,
+		withCredentials: config.WITH_CREDENTIALS,
-  }
+	};
 
-  onCancel(() => controller.abort())
+	onCancel(() => controller.abort());
 
-  for (const fn of config.interceptors.request._fns) {
+	for (const fn of config.interceptors.request._fns) {
-    requestConfig = await fn(requestConfig)
+		requestConfig = await fn(requestConfig);
-  }
+	}
 
-  try {
+	try {
-    return await axiosClient.request(requestConfig)
+		return await axiosClient.request(requestConfig);
-  } catch (error) {
+	} catch (error) {
-    const axiosError = error as AxiosError<T>
+		const axiosError = error as AxiosError<T>;
-    if (axiosError.response) {
+		if (axiosError.response) {
-      return axiosError.response
+			return axiosError.response;
-    }
+		}
-    throw error
+		throw error;
-  }
+	}
-}
+};
 
-export const getResponseHeader = (
+export const getResponseHeader = (response: AxiosResponse<unknown>, responseHeader?: string): string | undefined => {
-  response: AxiosResponse<unknown>,
+	if (responseHeader) {
-  responseHeader?: string,
+		const content = response.headers[responseHeader];
-): string | undefined => {
+		if (isString(content)) {
-  if (responseHeader) {
+			return content;
-    const content = response.headers[responseHeader]
+		}
-    if (isString(content)) {
+	}
-      return content
+	return undefined;
-    }
+};
-  }
-  return undefined
-}
 
 export const getResponseBody = (response: AxiosResponse<unknown>): unknown => {
-  if (response.status !== 204) {
+	if (response.status !== 204) {
-    return response.data
+		return response.data;
-  }
+	}
-  return undefined
+	return undefined;
-}
+};
 
-export const catchErrorCodes = (
+export const catchErrorCodes = (options: ApiRequestOptions, result: ApiResult): void => {
-  options: ApiRequestOptions,
+	const errors: Record<number, string> = {
-  result: ApiResult,
+		400: 'Bad Request',
-): void => {
+		401: 'Unauthorized',
-  const errors: Record<number, string> = {
+		402: 'Payment Required',
-    400: "Bad Request",
+		403: 'Forbidden',
-    401: "Unauthorized",
+		404: 'Not Found',
-    402: "Payment Required",
+		405: 'Method Not Allowed',
-    403: "Forbidden",
+		406: 'Not Acceptable',
-    404: "Not Found",
+		407: 'Proxy Authentication Required',
-    405: "Method Not Allowed",
+		408: 'Request Timeout',
-    406: "Not Acceptable",
+		409: 'Conflict',
-    407: "Proxy Authentication Required",
+		410: 'Gone',
-    408: "Request Timeout",
+		411: 'Length Required',
-    409: "Conflict",
+		412: 'Precondition Failed',
-    410: "Gone",
+		413: 'Payload Too Large',
-    411: "Length Required",
+		414: 'URI Too Long',
-    412: "Precondition Failed",
+		415: 'Unsupported Media Type',
-    413: "Payload Too Large",
+		416: 'Range Not Satisfiable',
-    414: "URI Too Long",
+		417: 'Expectation Failed',
-    415: "Unsupported Media Type",
+		418: 'Im a teapot',
-    416: "Range Not Satisfiable",
+		421: 'Misdirected Request',
-    417: "Expectation Failed",
+		422: 'Unprocessable Content',
-    418: "Im a teapot",
+		423: 'Locked',
-    421: "Misdirected Request",
+		424: 'Failed Dependency',
-    422: "Unprocessable Content",
+		425: 'Too Early',
-    423: "Locked",
+		426: 'Upgrade Required',
-    424: "Failed Dependency",
+		428: 'Precondition Required',
-    425: "Too Early",
+		429: 'Too Many Requests',
-    426: "Upgrade Required",
+		431: 'Request Header Fields Too Large',
-    428: "Precondition Required",
+		451: 'Unavailable For Legal Reasons',
-    429: "Too Many Requests",
+		500: 'Internal Server Error',
-    431: "Request Header Fields Too Large",
+		501: 'Not Implemented',
-    451: "Unavailable For Legal Reasons",
+		502: 'Bad Gateway',
-    500: "Internal Server Error",
+		503: 'Service Unavailable',
-    501: "Not Implemented",
+		504: 'Gateway Timeout',
-    502: "Bad Gateway",
+		505: 'HTTP Version Not Supported',
-    503: "Service Unavailable",
+		506: 'Variant Also Negotiates',
-    504: "Gateway Timeout",
+		507: 'Insufficient Storage',
-    505: "HTTP Version Not Supported",
+		508: 'Loop Detected',
-    506: "Variant Also Negotiates",
+		510: 'Not Extended',
-    507: "Insufficient Storage",
+		511: 'Network Authentication Required',
-    508: "Loop Detected",
+		...options.errors,
-    510: "Not Extended",
+	}
-    511: "Network Authentication Required",
-    ...options.errors,
-  }
 
-  const error = errors[result.status]
+	const error = errors[result.status];
-  if (error) {
+	if (error) {
-    throw new ApiError(options, result, error)
+		throw new ApiError(options, result, error);
-  }
+	}
 
-  if (!result.ok) {
+	if (!result.ok) {
-    const errorStatus = result.status ?? "unknown"
+		const errorStatus = result.status ?? 'unknown';
-    const errorStatusText = result.statusText ?? "unknown"
+		const errorStatusText = result.statusText ?? 'unknown';
-    const errorBody = (() => {
+		const errorBody = (() => {
-      try {
+			try {
-        return JSON.stringify(result.body, null, 2)
+				return JSON.stringify(result.body, null, 2);
-      } catch (e) {
+			} catch (e) {
-        return undefined
+				return undefined;
-      }
+			}
-    })()
+		})();
 
-    throw new ApiError(
+		throw new ApiError(options, result,
-      options,
+			`Generic Error: status: ${errorStatus}; status text: ${errorStatusText}; body: ${errorBody}`
-      result,
+		);
-      `Generic Error: status: ${errorStatus}; status text: ${errorStatusText}; body: ${errorBody}`,
+	}
-    )
+};
-  }
-}
 
 /**
  * Request method
@@ -323,54 +305,43 @@ export const catchErrorCodes = (
  * @returns CancelablePromise<T>
  * @throws ApiError
  */
-export const request = <T>(
+export const request = <T>(config: OpenAPIConfig, options: ApiRequestOptions<T>, axiosClient: AxiosInstance = axios): CancelablePromise<T> => {
-  config: OpenAPIConfig,
+	return new CancelablePromise(async (resolve, reject, onCancel) => {
-  options: ApiRequestOptions,
+		try {
-  axiosClient: AxiosInstance = axios,
+			const url = getUrl(config, options);
-): CancelablePromise<T> => {
+			const formData = getFormData(options);
-  return new CancelablePromise(async (resolve, reject, onCancel) => {
+			const body = getRequestBody(options);
-    try {
+			const headers = await getHeaders(config, options);
-      const url = getUrl(config, options)
-      const formData = getFormData(options)
-      const body = getRequestBody(options)
-      const headers = await getHeaders(config, options)
 
-      if (!onCancel.isCancelled) {
+			if (!onCancel.isCancelled) {
-        let response = await sendRequest<T>(
+				let response = await sendRequest<T>(config, options, url, body, formData, headers, onCancel, axiosClient);
-          config,
-          options,
-          url,
-          body,
-          formData,
-          headers,
-          onCancel,
-          axiosClient,
-        )
 
-        for (const fn of config.interceptors.response._fns) {
+				for (const fn of config.interceptors.response._fns) {
-          response = await fn(response)
+					response = await fn(response);
-        }
+				}
 
-        const responseBody = getResponseBody(response)
+				const responseBody = getResponseBody(response);
-        const responseHeader = getResponseHeader(
+				const responseHeader = getResponseHeader(response, options.responseHeader);
-          response,
-          options.responseHeader,
-        )
 
-        const result: ApiResult = {
+				let transformedBody = responseBody;
-          url,
+				if (options.responseTransformer && isSuccess(response.status)) {
-          ok: isSuccess(response.status),
+					transformedBody = await options.responseTransformer(responseBody)
-          status: response.status,
+				}
-          statusText: response.statusText,
-          body: responseHeader ?? responseBody,
-        }
 
-        catchErrorCodes(options, result)
+				const result: ApiResult = {
+					url,
+					ok: isSuccess(response.status),
+					status: response.status,
+					statusText: response.statusText,
+					body: responseHeader ?? transformedBody,
+				};
 
-        resolve(result.body)
+				catchErrorCodes(options, result);
-      }
+
-    } catch (error) {
+				resolve(result.body);
-      reject(error)
+			}
-    }
+		} catch (error) {
-  })
+			reject(error);
-}
+		}
+	});
+};

frontend/src/client/core/types.ts

@@ -1,14 +0,0 @@
-import type { ApiResult } from "./ApiResult"
-
-export type TResult = "body" | "raw"
-
-export type TApiResponse<T extends TResult, TData> = Exclude<
-  T,
-  "raw"
-> extends never
-  ? ApiResult<TData>
-  : ApiResult<TData>["body"]
-
-export type TConfig<T extends TResult> = {
-  _result?: T
-}

frontend/src/client/index.ts

@@ -1,8 +1,6 @@
-export { ApiError } from "./core/ApiError"
+// This file is auto-generated by @hey-api/openapi-ts
-export { CancelablePromise, CancelError } from "./core/CancelablePromise"
+export { ApiError } from './core/ApiError';
-export { OpenAPI } from "./core/OpenAPI"
+export { CancelablePromise, CancelError } from './core/CancelablePromise';
-export type { OpenAPIConfig } from "./core/OpenAPI"
+export { OpenAPI, type OpenAPIConfig } from './core/OpenAPI';
-
+export * from './sdk.gen';
-export * from "./models"
+export * from './types.gen';
-export * from "./schemas"
-export * from "./services"

frontend/src/client/models.ts

@@ -1,99 +0,0 @@
-export type Body_login_login_access_token = {
-  grant_type?: string | null
-  username: string
-  password: string
-  scope?: string
-  client_id?: string | null
-  client_secret?: string | null
-}
-
-export type HTTPValidationError = {
-  detail?: Array<ValidationError>
-}
-
-export type ItemCreate = {
-  title: string
-  description?: string | null
-}
-
-export type ItemPublic = {
-  title: string
-  description?: string | null
-  id: string
-  owner_id: string
-}
-
-export type ItemUpdate = {
-  title?: string | null
-  description?: string | null
-}
-
-export type ItemsPublic = {
-  data: Array<ItemPublic>
-  count: number
-}
-
-export type Message = {
-  message: string
-}
-
-export type NewPassword = {
-  token: string
-  new_password: string
-}
-
-export type Token = {
-  access_token: string
-  token_type?: string
-}
-
-export type UpdatePassword = {
-  current_password: string
-  new_password: string
-}
-
-export type UserCreate = {
-  email: string
-  is_active?: boolean
-  is_superuser?: boolean
-  full_name?: string | null
-  password: string
-}
-
-export type UserPublic = {
-  email: string
-  is_active?: boolean
-  is_superuser?: boolean
-  full_name?: string | null
-  id: string
-}
-
-export type UserRegister = {
-  email: string
-  password: string
-  full_name?: string | null
-}
-
-export type UserUpdate = {
-  email?: string | null
-  is_active?: boolean
-  is_superuser?: boolean
-  full_name?: string | null
-  password?: string | null
-}
-
-export type UserUpdateMe = {
-  full_name?: string | null
-  email?: string | null
-}
-
-export type UsersPublic = {
-  data: Array<UserPublic>
-  count: number
-}
-
-export type ValidationError = {
-  loc: Array<string | number>
-  msg: string
-  type: string
-}

frontend/src/client/schemas.gen.ts

@@ -0,0 +1,526 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+export const Body_login_login_access_tokenSchema = {
+    properties: {
+        grant_type: {
+            anyOf: [
+                {
+                    type: 'string',
+                    pattern: 'password'
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Grant Type'
+        },
+        username: {
+            type: 'string',
+            title: 'Username'
+        },
+        password: {
+            type: 'string',
+            title: 'Password'
+        },
+        scope: {
+            type: 'string',
+            title: 'Scope',
+            default: ''
+        },
+        client_id: {
+            anyOf: [
+                {
+                    type: 'string'
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Client Id'
+        },
+        client_secret: {
+            anyOf: [
+                {
+                    type: 'string'
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Client Secret'
+        }
+    },
+    type: 'object',
+    required: ['username', 'password'],
+    title: 'Body_login-login_access_token'
+} as const;
+
+export const HTTPValidationErrorSchema = {
+    properties: {
+        detail: {
+            items: {
+                '$ref': '#/components/schemas/ValidationError'
+            },
+            type: 'array',
+            title: 'Detail'
+        }
+    },
+    type: 'object',
+    title: 'HTTPValidationError'
+} as const;
+
+export const ItemCreateSchema = {
+    properties: {
+        title: {
+            type: 'string',
+            maxLength: 255,
+            minLength: 1,
+            title: 'Title'
+        },
+        description: {
+            anyOf: [
+                {
+                    type: 'string',
+                    maxLength: 255
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Description'
+        }
+    },
+    type: 'object',
+    required: ['title'],
+    title: 'ItemCreate'
+} as const;
+
+export const ItemPublicSchema = {
+    properties: {
+        title: {
+            type: 'string',
+            maxLength: 255,
+            minLength: 1,
+            title: 'Title'
+        },
+        description: {
+            anyOf: [
+                {
+                    type: 'string',
+                    maxLength: 255
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Description'
+        },
+        id: {
+            type: 'string',
+            format: 'uuid',
+            title: 'Id'
+        },
+        owner_id: {
+            type: 'string',
+            format: 'uuid',
+            title: 'Owner Id'
+        }
+    },
+    type: 'object',
+    required: ['title', 'id', 'owner_id'],
+    title: 'ItemPublic'
+} as const;
+
+export const ItemUpdateSchema = {
+    properties: {
+        title: {
+            anyOf: [
+                {
+                    type: 'string',
+                    maxLength: 255,
+                    minLength: 1
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Title'
+        },
+        description: {
+            anyOf: [
+                {
+                    type: 'string',
+                    maxLength: 255
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Description'
+        }
+    },
+    type: 'object',
+    title: 'ItemUpdate'
+} as const;
+
+export const ItemsPublicSchema = {
+    properties: {
+        data: {
+            items: {
+                '$ref': '#/components/schemas/ItemPublic'
+            },
+            type: 'array',
+            title: 'Data'
+        },
+        count: {
+            type: 'integer',
+            title: 'Count'
+        }
+    },
+    type: 'object',
+    required: ['data', 'count'],
+    title: 'ItemsPublic'
+} as const;
+
+export const MessageSchema = {
+    properties: {
+        message: {
+            type: 'string',
+            title: 'Message'
+        }
+    },
+    type: 'object',
+    required: ['message'],
+    title: 'Message'
+} as const;
+
+export const NewPasswordSchema = {
+    properties: {
+        token: {
+            type: 'string',
+            title: 'Token'
+        },
+        new_password: {
+            type: 'string',
+            maxLength: 128,
+            minLength: 8,
+            title: 'New Password'
+        }
+    },
+    type: 'object',
+    required: ['token', 'new_password'],
+    title: 'NewPassword'
+} as const;
+
+export const PrivateUserCreateSchema = {
+    properties: {
+        email: {
+            type: 'string',
+            title: 'Email'
+        },
+        password: {
+            type: 'string',
+            title: 'Password'
+        },
+        full_name: {
+            type: 'string',
+            title: 'Full Name'
+        },
+        is_verified: {
+            type: 'boolean',
+            title: 'Is Verified',
+            default: false
+        }
+    },
+    type: 'object',
+    required: ['email', 'password', 'full_name'],
+    title: 'PrivateUserCreate'
+} as const;
+
+export const TokenSchema = {
+    properties: {
+        access_token: {
+            type: 'string',
+            title: 'Access Token'
+        },
+        token_type: {
+            type: 'string',
+            title: 'Token Type',
+            default: 'bearer'
+        }
+    },
+    type: 'object',
+    required: ['access_token'],
+    title: 'Token'
+} as const;
+
+export const UpdatePasswordSchema = {
+    properties: {
+        current_password: {
+            type: 'string',
+            maxLength: 128,
+            minLength: 8,
+            title: 'Current Password'
+        },
+        new_password: {
+            type: 'string',
+            maxLength: 128,
+            minLength: 8,
+            title: 'New Password'
+        }
+    },
+    type: 'object',
+    required: ['current_password', 'new_password'],
+    title: 'UpdatePassword'
+} as const;
+
+export const UserCreateSchema = {
+    properties: {
+        email: {
+            type: 'string',
+            maxLength: 255,
+            format: 'email',
+            title: 'Email'
+        },
+        is_active: {
+            type: 'boolean',
+            title: 'Is Active',
+            default: true
+        },
+        is_superuser: {
+            type: 'boolean',
+            title: 'Is Superuser',
+            default: false
+        },
+        full_name: {
+            anyOf: [
+                {
+                    type: 'string',
+                    maxLength: 255
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Full Name'
+        },
+        password: {
+            type: 'string',
+            maxLength: 128,
+            minLength: 8,
+            title: 'Password'
+        }
+    },
+    type: 'object',
+    required: ['email', 'password'],
+    title: 'UserCreate'
+} as const;
+
+export const UserPublicSchema = {
+    properties: {
+        email: {
+            type: 'string',
+            maxLength: 255,
+            format: 'email',
+            title: 'Email'
+        },
+        is_active: {
+            type: 'boolean',
+            title: 'Is Active',
+            default: true
+        },
+        is_superuser: {
+            type: 'boolean',
+            title: 'Is Superuser',
+            default: false
+        },
+        full_name: {
+            anyOf: [
+                {
+                    type: 'string',
+                    maxLength: 255
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Full Name'
+        },
+        id: {
+            type: 'string',
+            format: 'uuid',
+            title: 'Id'
+        }
+    },
+    type: 'object',
+    required: ['email', 'id'],
+    title: 'UserPublic'
+} as const;
+
+export const UserRegisterSchema = {
+    properties: {
+        email: {
+            type: 'string',
+            maxLength: 255,
+            format: 'email',
+            title: 'Email'
+        },
+        password: {
+            type: 'string',
+            maxLength: 128,
+            minLength: 8,
+            title: 'Password'
+        },
+        full_name: {
+            anyOf: [
+                {
+                    type: 'string',
+                    maxLength: 255
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Full Name'
+        }
+    },
+    type: 'object',
+    required: ['email', 'password'],
+    title: 'UserRegister'
+} as const;
+
+export const UserUpdateSchema = {
+    properties: {
+        email: {
+            anyOf: [
+                {
+                    type: 'string',
+                    maxLength: 255,
+                    format: 'email'
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Email'
+        },
+        is_active: {
+            type: 'boolean',
+            title: 'Is Active',
+            default: true
+        },
+        is_superuser: {
+            type: 'boolean',
+            title: 'Is Superuser',
+            default: false
+        },
+        full_name: {
+            anyOf: [
+                {
+                    type: 'string',
+                    maxLength: 255
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Full Name'
+        },
+        password: {
+            anyOf: [
+                {
+                    type: 'string',
+                    maxLength: 128,
+                    minLength: 8
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Password'
+        }
+    },
+    type: 'object',
+    title: 'UserUpdate'
+} as const;
+
+export const UserUpdateMeSchema = {
+    properties: {
+        full_name: {
+            anyOf: [
+                {
+                    type: 'string',
+                    maxLength: 255
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Full Name'
+        },
+        email: {
+            anyOf: [
+                {
+                    type: 'string',
+                    maxLength: 255,
+                    format: 'email'
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Email'
+        }
+    },
+    type: 'object',
+    title: 'UserUpdateMe'
+} as const;
+
+export const UsersPublicSchema = {
+    properties: {
+        data: {
+            items: {
+                '$ref': '#/components/schemas/UserPublic'
+            },
+            type: 'array',
+            title: 'Data'
+        },
+        count: {
+            type: 'integer',
+            title: 'Count'
+        }
+    },
+    type: 'object',
+    required: ['data', 'count'],
+    title: 'UsersPublic'
+} as const;
+
+export const ValidationErrorSchema = {
+    properties: {
+        loc: {
+            items: {
+                anyOf: [
+                    {
+                        type: 'string'
+                    },
+                    {
+                        type: 'integer'
+                    }
+                ]
+            },
+            type: 'array',
+            title: 'Location'
+        },
+        msg: {
+            type: 'string',
+            title: 'Message'
+        },
+        type: {
+            type: 'string',
+            title: 'Error Type'
+        }
+    },
+    type: 'object',
+    required: ['loc', 'msg', 'type'],
+    title: 'ValidationError'
+} as const;

frontend/src/client/schemas.ts

@@ -1,444 +0,0 @@
-export const $Body_login_login_access_token = {
-  properties: {
-    grant_type: {
-      type: "any-of",
-      contains: [
-        {
-          type: "string",
-          pattern: "password",
-        },
-        {
-          type: "null",
-        },
-      ],
-    },
-    username: {
-      type: "string",
-      isRequired: true,
-    },
-    password: {
-      type: "string",
-      isRequired: true,
-    },
-    scope: {
-      type: "string",
-      default: "",
-    },
-    client_id: {
-      type: "any-of",
-      contains: [
-        {
-          type: "string",
-        },
-        {
-          type: "null",
-        },
-      ],
-    },
-    client_secret: {
-      type: "any-of",
-      contains: [
-        {
-          type: "string",
-        },
-        {
-          type: "null",
-        },
-      ],
-    },
-  },
-} as const
-
-export const $HTTPValidationError = {
-  properties: {
-    detail: {
-      type: "array",
-      contains: {
-        type: "ValidationError",
-      },
-    },
-  },
-} as const
-
-export const $ItemCreate = {
-  properties: {
-    title: {
-      type: "string",
-      isRequired: true,
-      maxLength: 255,
-      minLength: 1,
-    },
-    description: {
-      type: "any-of",
-      contains: [
-        {
-          type: "string",
-          maxLength: 255,
-        },
-        {
-          type: "null",
-        },
-      ],
-    },
-  },
-} as const
-
-export const $ItemPublic = {
-  properties: {
-    title: {
-      type: "string",
-      isRequired: true,
-      maxLength: 255,
-      minLength: 1,
-    },
-    description: {
-      type: "any-of",
-      contains: [
-        {
-          type: "string",
-          maxLength: 255,
-        },
-        {
-          type: "null",
-        },
-      ],
-    },
-    id: {
-      type: "string",
-      isRequired: true,
-      format: "uuid",
-    },
-    owner_id: {
-      type: "string",
-      isRequired: true,
-      format: "uuid",
-    },
-  },
-} as const
-
-export const $ItemUpdate = {
-  properties: {
-    title: {
-      type: "any-of",
-      contains: [
-        {
-          type: "string",
-          maxLength: 255,
-          minLength: 1,
-        },
-        {
-          type: "null",
-        },
-      ],
-    },
-    description: {
-      type: "any-of",
-      contains: [
-        {
-          type: "string",
-          maxLength: 255,
-        },
-        {
-          type: "null",
-        },
-      ],
-    },
-  },
-} as const
-
-export const $ItemsPublic = {
-  properties: {
-    data: {
-      type: "array",
-      contains: {
-        type: "ItemPublic",
-      },
-      isRequired: true,
-    },
-    count: {
-      type: "number",
-      isRequired: true,
-    },
-  },
-} as const
-
-export const $Message = {
-  properties: {
-    message: {
-      type: "string",
-      isRequired: true,
-    },
-  },
-} as const
-
-export const $NewPassword = {
-  properties: {
-    token: {
-      type: "string",
-      isRequired: true,
-    },
-    new_password: {
-      type: "string",
-      isRequired: true,
-      maxLength: 40,
-      minLength: 8,
-    },
-  },
-} as const
-
-export const $Token = {
-  properties: {
-    access_token: {
-      type: "string",
-      isRequired: true,
-    },
-    token_type: {
-      type: "string",
-      default: "bearer",
-    },
-  },
-} as const
-
-export const $UpdatePassword = {
-  properties: {
-    current_password: {
-      type: "string",
-      isRequired: true,
-      maxLength: 40,
-      minLength: 8,
-    },
-    new_password: {
-      type: "string",
-      isRequired: true,
-      maxLength: 40,
-      minLength: 8,
-    },
-  },
-} as const
-
-export const $UserCreate = {
-  properties: {
-    email: {
-      type: "string",
-      isRequired: true,
-      format: "email",
-      maxLength: 255,
-    },
-    is_active: {
-      type: "boolean",
-      default: true,
-    },
-    is_superuser: {
-      type: "boolean",
-      default: false,
-    },
-    full_name: {
-      type: "any-of",
-      contains: [
-        {
-          type: "string",
-          maxLength: 255,
-        },
-        {
-          type: "null",
-        },
-      ],
-    },
-    password: {
-      type: "string",
-      isRequired: true,
-      maxLength: 40,
-      minLength: 8,
-    },
-  },
-} as const
-
-export const $UserPublic = {
-  properties: {
-    email: {
-      type: "string",
-      isRequired: true,
-      format: "email",
-      maxLength: 255,
-    },
-    is_active: {
-      type: "boolean",
-      default: true,
-    },
-    is_superuser: {
-      type: "boolean",
-      default: false,
-    },
-    full_name: {
-      type: "any-of",
-      contains: [
-        {
-          type: "string",
-          maxLength: 255,
-        },
-        {
-          type: "null",
-        },
-      ],
-    },
-    id: {
-      type: "string",
-      isRequired: true,
-      format: "uuid",
-    },
-  },
-} as const
-
-export const $UserRegister = {
-  properties: {
-    email: {
-      type: "string",
-      isRequired: true,
-      format: "email",
-      maxLength: 255,
-    },
-    password: {
-      type: "string",
-      isRequired: true,
-      maxLength: 40,
-      minLength: 8,
-    },
-    full_name: {
-      type: "any-of",
-      contains: [
-        {
-          type: "string",
-          maxLength: 255,
-        },
-        {
-          type: "null",
-        },
-      ],
-    },
-  },
-} as const
-
-export const $UserUpdate = {
-  properties: {
-    email: {
-      type: "any-of",
-      contains: [
-        {
-          type: "string",
-          format: "email",
-          maxLength: 255,
-        },
-        {
-          type: "null",
-        },
-      ],
-    },
-    is_active: {
-      type: "boolean",
-      default: true,
-    },
-    is_superuser: {
-      type: "boolean",
-      default: false,
-    },
-    full_name: {
-      type: "any-of",
-      contains: [
-        {
-          type: "string",
-          maxLength: 255,
-        },
-        {
-          type: "null",
-        },
-      ],
-    },
-    password: {
-      type: "any-of",
-      contains: [
-        {
-          type: "string",
-          maxLength: 40,
-          minLength: 8,
-        },
-        {
-          type: "null",
-        },
-      ],
-    },
-  },
-} as const
-
-export const $UserUpdateMe = {
-  properties: {
-    full_name: {
-      type: "any-of",
-      contains: [
-        {
-          type: "string",
-          maxLength: 255,
-        },
-        {
-          type: "null",
-        },
-      ],
-    },
-    email: {
-      type: "any-of",
-      contains: [
-        {
-          type: "string",
-          format: "email",
-          maxLength: 255,
-        },
-        {
-          type: "null",
-        },
-      ],
-    },
-  },
-} as const
-
-export const $UsersPublic = {
-  properties: {
-    data: {
-      type: "array",
-      contains: {
-        type: "UserPublic",
-      },
-      isRequired: true,
-    },
-    count: {
-      type: "number",
-      isRequired: true,
-    },
-  },
-} as const
-
-export const $ValidationError = {
-  properties: {
-    loc: {
-      type: "array",
-      contains: {
-        type: "any-of",
-        contains: [
-          {
-            type: "string",
-          },
-          {
-            type: "number",
-          },
-        ],
-      },
-      isRequired: true,
-    },
-    msg: {
-      type: "string",
-      isRequired: true,
-    },
-    type: {
-      type: "string",
-      isRequired: true,
-    },
-  },
-} as const

frontend/src/client/sdk.gen.ts

@@ -0,0 +1,468 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { CancelablePromise } from './core/CancelablePromise';
+import { OpenAPI } from './core/OpenAPI';
+import { request as __request } from './core/request';
+import type { ItemsReadItemsData, ItemsReadItemsResponse, ItemsCreateItemData, ItemsCreateItemResponse, ItemsReadItemData, ItemsReadItemResponse, ItemsUpdateItemData, ItemsUpdateItemResponse, ItemsDeleteItemData, ItemsDeleteItemResponse, LoginLoginAccessTokenData, LoginLoginAccessTokenResponse, LoginTestTokenResponse, LoginRecoverPasswordData, LoginRecoverPasswordResponse, LoginResetPasswordData, LoginResetPasswordResponse, LoginRecoverPasswordHtmlContentData, LoginRecoverPasswordHtmlContentResponse, PrivateCreateUserData, PrivateCreateUserResponse, UsersReadUsersData, UsersReadUsersResponse, UsersCreateUserData, UsersCreateUserResponse, UsersReadUserMeResponse, UsersDeleteUserMeResponse, UsersUpdateUserMeData, UsersUpdateUserMeResponse, UsersUpdatePasswordMeData, UsersUpdatePasswordMeResponse, UsersRegisterUserData, UsersRegisterUserResponse, UsersReadUserByIdData, UsersReadUserByIdResponse, UsersUpdateUserData, UsersUpdateUserResponse, UsersDeleteUserData, UsersDeleteUserResponse, UtilsTestEmailData, UtilsTestEmailResponse, UtilsHealthCheckResponse } from './types.gen';
+
+export class ItemsService {
+    /**
+     * Read Items
+     * Retrieve items.
+     * @param data The data for the request.
+     * @param data.skip
+     * @param data.limit
+     * @returns ItemsPublic Successful Response
+     * @throws ApiError
+     */
+    public static readItems(data: ItemsReadItemsData = {}): CancelablePromise<ItemsReadItemsResponse> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/api/v1/items/',
+            query: {
+                skip: data.skip,
+                limit: data.limit
+            },
+            errors: {
+                422: 'Validation Error'
+            }
+        });
+    }
+    
+    /**
+     * Create Item
+     * Create new item.
+     * @param data The data for the request.
+     * @param data.requestBody
+     * @returns ItemPublic Successful Response
+     * @throws ApiError
+     */
+    public static createItem(data: ItemsCreateItemData): CancelablePromise<ItemsCreateItemResponse> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/api/v1/items/',
+            body: data.requestBody,
+            mediaType: 'application/json',
+            errors: {
+                422: 'Validation Error'
+            }
+        });
+    }
+    
+    /**
+     * Read Item
+     * Get item by ID.
+     * @param data The data for the request.
+     * @param data.id
+     * @returns ItemPublic Successful Response
+     * @throws ApiError
+     */
+    public static readItem(data: ItemsReadItemData): CancelablePromise<ItemsReadItemResponse> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/api/v1/items/{id}',
+            path: {
+                id: data.id
+            },
+            errors: {
+                422: 'Validation Error'
+            }
+        });
+    }
+    
+    /**
+     * Update Item
+     * Update an item.
+     * @param data The data for the request.
+     * @param data.id
+     * @param data.requestBody
+     * @returns ItemPublic Successful Response
+     * @throws ApiError
+     */
+    public static updateItem(data: ItemsUpdateItemData): CancelablePromise<ItemsUpdateItemResponse> {
+        return __request(OpenAPI, {
+            method: 'PUT',
+            url: '/api/v1/items/{id}',
+            path: {
+                id: data.id
+            },
+            body: data.requestBody,
+            mediaType: 'application/json',
+            errors: {
+                422: 'Validation Error'
+            }
+        });
+    }
+    
+    /**
+     * Delete Item
+     * Delete an item.
+     * @param data The data for the request.
+     * @param data.id
+     * @returns Message Successful Response
+     * @throws ApiError
+     */
+    public static deleteItem(data: ItemsDeleteItemData): CancelablePromise<ItemsDeleteItemResponse> {
+        return __request(OpenAPI, {
+            method: 'DELETE',
+            url: '/api/v1/items/{id}',
+            path: {
+                id: data.id
+            },
+            errors: {
+                422: 'Validation Error'
+            }
+        });
+    }
+}
+
+export class LoginService {
+    /**
+     * Login Access Token
+     * OAuth2 compatible token login, get an access token for future requests
+     * @param data The data for the request.
+     * @param data.formData
+     * @returns Token Successful Response
+     * @throws ApiError
+     */
+    public static loginAccessToken(data: LoginLoginAccessTokenData): CancelablePromise<LoginLoginAccessTokenResponse> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/api/v1/login/access-token',
+            formData: data.formData,
+            mediaType: 'application/x-www-form-urlencoded',
+            errors: {
+                422: 'Validation Error'
+            }
+        });
+    }
+    
+    /**
+     * Test Token
+     * Test access token
+     * @returns UserPublic Successful Response
+     * @throws ApiError
+     */
+    public static testToken(): CancelablePromise<LoginTestTokenResponse> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/api/v1/login/test-token'
+        });
+    }
+    
+    /**
+     * Recover Password
+     * Password Recovery
+     * @param data The data for the request.
+     * @param data.email
+     * @returns Message Successful Response
+     * @throws ApiError
+     */
+    public static recoverPassword(data: LoginRecoverPasswordData): CancelablePromise<LoginRecoverPasswordResponse> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/api/v1/password-recovery/{email}',
+            path: {
+                email: data.email
+            },
+            errors: {
+                422: 'Validation Error'
+            }
+        });
+    }
+    
+    /**
+     * Reset Password
+     * Reset password
+     * @param data The data for the request.
+     * @param data.requestBody
+     * @returns Message Successful Response
+     * @throws ApiError
+     */
+    public static resetPassword(data: LoginResetPasswordData): CancelablePromise<LoginResetPasswordResponse> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/api/v1/reset-password/',
+            body: data.requestBody,
+            mediaType: 'application/json',
+            errors: {
+                422: 'Validation Error'
+            }
+        });
+    }
+    
+    /**
+     * Recover Password Html Content
+     * HTML Content for Password Recovery
+     * @param data The data for the request.
+     * @param data.email
+     * @returns string Successful Response
+     * @throws ApiError
+     */
+    public static recoverPasswordHtmlContent(data: LoginRecoverPasswordHtmlContentData): CancelablePromise<LoginRecoverPasswordHtmlContentResponse> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/api/v1/password-recovery-html-content/{email}',
+            path: {
+                email: data.email
+            },
+            errors: {
+                422: 'Validation Error'
+            }
+        });
+    }
+}
+
+export class PrivateService {
+    /**
+     * Create User
+     * Create a new user.
+     * @param data The data for the request.
+     * @param data.requestBody
+     * @returns UserPublic Successful Response
+     * @throws ApiError
+     */
+    public static createUser(data: PrivateCreateUserData): CancelablePromise<PrivateCreateUserResponse> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/api/v1/private/users/',
+            body: data.requestBody,
+            mediaType: 'application/json',
+            errors: {
+                422: 'Validation Error'
+            }
+        });
+    }
+}
+
+export class UsersService {
+    /**
+     * Read Users
+     * Retrieve users.
+     * @param data The data for the request.
+     * @param data.skip
+     * @param data.limit
+     * @returns UsersPublic Successful Response
+     * @throws ApiError
+     */
+    public static readUsers(data: UsersReadUsersData = {}): CancelablePromise<UsersReadUsersResponse> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/api/v1/users/',
+            query: {
+                skip: data.skip,
+                limit: data.limit
+            },
+            errors: {
+                422: 'Validation Error'
+            }
+        });
+    }
+    
+    /**
+     * Create User
+     * Create new user.
+     * @param data The data for the request.
+     * @param data.requestBody
+     * @returns UserPublic Successful Response
+     * @throws ApiError
+     */
+    public static createUser(data: UsersCreateUserData): CancelablePromise<UsersCreateUserResponse> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/api/v1/users/',
+            body: data.requestBody,
+            mediaType: 'application/json',
+            errors: {
+                422: 'Validation Error'
+            }
+        });
+    }
+    
+    /**
+     * Read User Me
+     * Get current user.
+     * @returns UserPublic Successful Response
+     * @throws ApiError
+     */
+    public static readUserMe(): CancelablePromise<UsersReadUserMeResponse> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/api/v1/users/me'
+        });
+    }
+    
+    /**
+     * Delete User Me
+     * Delete own user.
+     * @returns Message Successful Response
+     * @throws ApiError
+     */
+    public static deleteUserMe(): CancelablePromise<UsersDeleteUserMeResponse> {
+        return __request(OpenAPI, {
+            method: 'DELETE',
+            url: '/api/v1/users/me'
+        });
+    }
+    
+    /**
+     * Update User Me
+     * Update own user.
+     * @param data The data for the request.
+     * @param data.requestBody
+     * @returns UserPublic Successful Response
+     * @throws ApiError
+     */
+    public static updateUserMe(data: UsersUpdateUserMeData): CancelablePromise<UsersUpdateUserMeResponse> {
+        return __request(OpenAPI, {
+            method: 'PATCH',
+            url: '/api/v1/users/me',
+            body: data.requestBody,
+            mediaType: 'application/json',
+            errors: {
+                422: 'Validation Error'
+            }
+        });
+    }
+    
+    /**
+     * Update Password Me
+     * Update own password.
+     * @param data The data for the request.
+     * @param data.requestBody
+     * @returns Message Successful Response
+     * @throws ApiError
+     */
+    public static updatePasswordMe(data: UsersUpdatePasswordMeData): CancelablePromise<UsersUpdatePasswordMeResponse> {
+        return __request(OpenAPI, {
+            method: 'PATCH',
+            url: '/api/v1/users/me/password',
+            body: data.requestBody,
+            mediaType: 'application/json',
+            errors: {
+                422: 'Validation Error'
+            }
+        });
+    }
+    
+    /**
+     * Register User
+     * Create new user without the need to be logged in.
+     * @param data The data for the request.
+     * @param data.requestBody
+     * @returns UserPublic Successful Response
+     * @throws ApiError
+     */
+    public static registerUser(data: UsersRegisterUserData): CancelablePromise<UsersRegisterUserResponse> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/api/v1/users/signup',
+            body: data.requestBody,
+            mediaType: 'application/json',
+            errors: {
+                422: 'Validation Error'
+            }
+        });
+    }
+    
+    /**
+     * Read User By Id
+     * Get a specific user by id.
+     * @param data The data for the request.
+     * @param data.userId
+     * @returns UserPublic Successful Response
+     * @throws ApiError
+     */
+    public static readUserById(data: UsersReadUserByIdData): CancelablePromise<UsersReadUserByIdResponse> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/api/v1/users/{user_id}',
+            path: {
+                user_id: data.userId
+            },
+            errors: {
+                422: 'Validation Error'
+            }
+        });
+    }
+    
+    /**
+     * Update User
+     * Update a user.
+     * @param data The data for the request.
+     * @param data.userId
+     * @param data.requestBody
+     * @returns UserPublic Successful Response
+     * @throws ApiError
+     */
+    public static updateUser(data: UsersUpdateUserData): CancelablePromise<UsersUpdateUserResponse> {
+        return __request(OpenAPI, {
+            method: 'PATCH',
+            url: '/api/v1/users/{user_id}',
+            path: {
+                user_id: data.userId
+            },
+            body: data.requestBody,
+            mediaType: 'application/json',
+            errors: {
+                422: 'Validation Error'
+            }
+        });
+    }
+    
+    /**
+     * Delete User
+     * Delete a user.
+     * @param data The data for the request.
+     * @param data.userId
+     * @returns Message Successful Response
+     * @throws ApiError
+     */
+    public static deleteUser(data: UsersDeleteUserData): CancelablePromise<UsersDeleteUserResponse> {
+        return __request(OpenAPI, {
+            method: 'DELETE',
+            url: '/api/v1/users/{user_id}',
+            path: {
+                user_id: data.userId
+            },
+            errors: {
+                422: 'Validation Error'
+            }
+        });
+    }
+}
+
+export class UtilsService {
+    /**
+     * Test Email
+     * Test emails.
+     * @param data The data for the request.
+     * @param data.emailTo
+     * @returns Message Successful Response
+     * @throws ApiError
+     */
+    public static testEmail(data: UtilsTestEmailData): CancelablePromise<UtilsTestEmailResponse> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/api/v1/utils/test-email/',
+            query: {
+                email_to: data.emailTo
+            },
+            errors: {
+                422: 'Validation Error'
+            }
+        });
+    }
+    
+    /**
+     * Health Check
+     * @returns boolean Successful Response
+     * @throws ApiError
+     */
+    public static healthCheck(): CancelablePromise<UtilsHealthCheckResponse> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/api/v1/utils/health-check/'
+        });
+    }
+}

frontend/src/client/services.ts

@@ -1,517 +0,0 @@
-import type { CancelablePromise } from "./core/CancelablePromise"
-import { OpenAPI } from "./core/OpenAPI"
-import { request as __request } from "./core/request"
-
-import type {
-  Body_login_login_access_token,
-  ItemCreate,
-  ItemPublic,
-  ItemUpdate,
-  ItemsPublic,
-  Message,
-  NewPassword,
-  Token,
-  UpdatePassword,
-  UserCreate,
-  UserPublic,
-  UserRegister,
-  UserUpdate,
-  UserUpdateMe,
-  UsersPublic,
-} from "./models"
-
-export type TDataLoginAccessToken = {
-  formData: Body_login_login_access_token
-}
-export type TDataRecoverPassword = {
-  email: string
-}
-export type TDataResetPassword = {
-  requestBody: NewPassword
-}
-export type TDataRecoverPasswordHtmlContent = {
-  email: string
-}
-
-export class LoginService {
-  /**
-   * Login Access Token
-   * OAuth2 compatible token login, get an access token for future requests
-   * @returns Token Successful Response
-   * @throws ApiError
-   */
-  public static loginAccessToken(
-    data: TDataLoginAccessToken,
-  ): CancelablePromise<Token> {
-    const { formData } = data
-    return __request(OpenAPI, {
-      method: "POST",
-      url: "/api/v1/login/access-token",
-      formData: formData,
-      mediaType: "application/x-www-form-urlencoded",
-      errors: {
-        422: "Validation Error",
-      },
-    })
-  }
-
-  /**
-   * Test Token
-   * Test access token
-   * @returns UserPublic Successful Response
-   * @throws ApiError
-   */
-  public static testToken(): CancelablePromise<UserPublic> {
-    return __request(OpenAPI, {
-      method: "POST",
-      url: "/api/v1/login/test-token",
-    })
-  }
-
-  /**
-   * Recover Password
-   * Password Recovery
-   * @returns Message Successful Response
-   * @throws ApiError
-   */
-  public static recoverPassword(
-    data: TDataRecoverPassword,
-  ): CancelablePromise<Message> {
-    const { email } = data
-    return __request(OpenAPI, {
-      method: "POST",
-      url: "/api/v1/password-recovery/{email}",
-      path: {
-        email,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    })
-  }
-
-  /**
-   * Reset Password
-   * Reset password
-   * @returns Message Successful Response
-   * @throws ApiError
-   */
-  public static resetPassword(
-    data: TDataResetPassword,
-  ): CancelablePromise<Message> {
-    const { requestBody } = data
-    return __request(OpenAPI, {
-      method: "POST",
-      url: "/api/v1/reset-password/",
-      body: requestBody,
-      mediaType: "application/json",
-      errors: {
-        422: "Validation Error",
-      },
-    })
-  }
-
-  /**
-   * Recover Password Html Content
-   * HTML Content for Password Recovery
-   * @returns string Successful Response
-   * @throws ApiError
-   */
-  public static recoverPasswordHtmlContent(
-    data: TDataRecoverPasswordHtmlContent,
-  ): CancelablePromise<string> {
-    const { email } = data
-    return __request(OpenAPI, {
-      method: "POST",
-      url: "/api/v1/password-recovery-html-content/{email}",
-      path: {
-        email,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    })
-  }
-}
-
-export type TDataReadUsers = {
-  limit?: number
-  skip?: number
-}
-export type TDataCreateUser = {
-  requestBody: UserCreate
-}
-export type TDataUpdateUserMe = {
-  requestBody: UserUpdateMe
-}
-export type TDataUpdatePasswordMe = {
-  requestBody: UpdatePassword
-}
-export type TDataRegisterUser = {
-  requestBody: UserRegister
-}
-export type TDataReadUserById = {
-  userId: string
-}
-export type TDataUpdateUser = {
-  requestBody: UserUpdate
-  userId: string
-}
-export type TDataDeleteUser = {
-  userId: string
-}
-
-export class UsersService {
-  /**
-   * Read Users
-   * Retrieve users.
-   * @returns UsersPublic Successful Response
-   * @throws ApiError
-   */
-  public static readUsers(
-    data: TDataReadUsers = {},
-  ): CancelablePromise<UsersPublic> {
-    const { limit = 100, skip = 0 } = data
-    return __request(OpenAPI, {
-      method: "GET",
-      url: "/api/v1/users/",
-      query: {
-        skip,
-        limit,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    })
-  }
-
-  /**
-   * Create User
-   * Create new user.
-   * @returns UserPublic Successful Response
-   * @throws ApiError
-   */
-  public static createUser(
-    data: TDataCreateUser,
-  ): CancelablePromise<UserPublic> {
-    const { requestBody } = data
-    return __request(OpenAPI, {
-      method: "POST",
-      url: "/api/v1/users/",
-      body: requestBody,
-      mediaType: "application/json",
-      errors: {
-        422: "Validation Error",
-      },
-    })
-  }
-
-  /**
-   * Read User Me
-   * Get current user.
-   * @returns UserPublic Successful Response
-   * @throws ApiError
-   */
-  public static readUserMe(): CancelablePromise<UserPublic> {
-    return __request(OpenAPI, {
-      method: "GET",
-      url: "/api/v1/users/me",
-    })
-  }
-
-  /**
-   * Delete User Me
-   * Delete own user.
-   * @returns Message Successful Response
-   * @throws ApiError
-   */
-  public static deleteUserMe(): CancelablePromise<Message> {
-    return __request(OpenAPI, {
-      method: "DELETE",
-      url: "/api/v1/users/me",
-    })
-  }
-
-  /**
-   * Update User Me
-   * Update own user.
-   * @returns UserPublic Successful Response
-   * @throws ApiError
-   */
-  public static updateUserMe(
-    data: TDataUpdateUserMe,
-  ): CancelablePromise<UserPublic> {
-    const { requestBody } = data
-    return __request(OpenAPI, {
-      method: "PATCH",
-      url: "/api/v1/users/me",
-      body: requestBody,
-      mediaType: "application/json",
-      errors: {
-        422: "Validation Error",
-      },
-    })
-  }
-
-  /**
-   * Update Password Me
-   * Update own password.
-   * @returns Message Successful Response
-   * @throws ApiError
-   */
-  public static updatePasswordMe(
-    data: TDataUpdatePasswordMe,
-  ): CancelablePromise<Message> {
-    const { requestBody } = data
-    return __request(OpenAPI, {
-      method: "PATCH",
-      url: "/api/v1/users/me/password",
-      body: requestBody,
-      mediaType: "application/json",
-      errors: {
-        422: "Validation Error",
-      },
-    })
-  }
-
-  /**
-   * Register User
-   * Create new user without the need to be logged in.
-   * @returns UserPublic Successful Response
-   * @throws ApiError
-   */
-  public static registerUser(
-    data: TDataRegisterUser,
-  ): CancelablePromise<UserPublic> {
-    const { requestBody } = data
-    return __request(OpenAPI, {
-      method: "POST",
-      url: "/api/v1/users/signup",
-      body: requestBody,
-      mediaType: "application/json",
-      errors: {
-        422: "Validation Error",
-      },
-    })
-  }
-
-  /**
-   * Read User By Id
-   * Get a specific user by id.
-   * @returns UserPublic Successful Response
-   * @throws ApiError
-   */
-  public static readUserById(
-    data: TDataReadUserById,
-  ): CancelablePromise<UserPublic> {
-    const { userId } = data
-    return __request(OpenAPI, {
-      method: "GET",
-      url: "/api/v1/users/{user_id}",
-      path: {
-        user_id: userId,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    })
-  }
-
-  /**
-   * Update User
-   * Update a user.
-   * @returns UserPublic Successful Response
-   * @throws ApiError
-   */
-  public static updateUser(
-    data: TDataUpdateUser,
-  ): CancelablePromise<UserPublic> {
-    const { requestBody, userId } = data
-    return __request(OpenAPI, {
-      method: "PATCH",
-      url: "/api/v1/users/{user_id}",
-      path: {
-        user_id: userId,
-      },
-      body: requestBody,
-      mediaType: "application/json",
-      errors: {
-        422: "Validation Error",
-      },
-    })
-  }
-
-  /**
-   * Delete User
-   * Delete a user.
-   * @returns Message Successful Response
-   * @throws ApiError
-   */
-  public static deleteUser(data: TDataDeleteUser): CancelablePromise<Message> {
-    const { userId } = data
-    return __request(OpenAPI, {
-      method: "DELETE",
-      url: "/api/v1/users/{user_id}",
-      path: {
-        user_id: userId,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    })
-  }
-}
-
-export type TDataTestEmail = {
-  emailTo: string
-}
-
-export class UtilsService {
-  /**
-   * Test Email
-   * Test emails.
-   * @returns Message Successful Response
-   * @throws ApiError
-   */
-  public static testEmail(data: TDataTestEmail): CancelablePromise<Message> {
-    const { emailTo } = data
-    return __request(OpenAPI, {
-      method: "POST",
-      url: "/api/v1/utils/test-email/",
-      query: {
-        email_to: emailTo,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    })
-  }
-}
-
-export type TDataReadItems = {
-  limit?: number
-  skip?: number
-}
-export type TDataCreateItem = {
-  requestBody: ItemCreate
-}
-export type TDataReadItem = {
-  id: string
-}
-export type TDataUpdateItem = {
-  id: string
-  requestBody: ItemUpdate
-}
-export type TDataDeleteItem = {
-  id: string
-}
-
-export class ItemsService {
-  /**
-   * Read Items
-   * Retrieve items.
-   * @returns ItemsPublic Successful Response
-   * @throws ApiError
-   */
-  public static readItems(
-    data: TDataReadItems = {},
-  ): CancelablePromise<ItemsPublic> {
-    const { limit = 100, skip = 0 } = data
-    return __request(OpenAPI, {
-      method: "GET",
-      url: "/api/v1/items/",
-      query: {
-        skip,
-        limit,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    })
-  }
-
-  /**
-   * Create Item
-   * Create new item.
-   * @returns ItemPublic Successful Response
-   * @throws ApiError
-   */
-  public static createItem(
-    data: TDataCreateItem,
-  ): CancelablePromise<ItemPublic> {
-    const { requestBody } = data
-    return __request(OpenAPI, {
-      method: "POST",
-      url: "/api/v1/items/",
-      body: requestBody,
-      mediaType: "application/json",
-      errors: {
-        422: "Validation Error",
-      },
-    })
-  }
-
-  /**
-   * Read Item
-   * Get item by ID.
-   * @returns ItemPublic Successful Response
-   * @throws ApiError
-   */
-  public static readItem(data: TDataReadItem): CancelablePromise<ItemPublic> {
-    const { id } = data
-    return __request(OpenAPI, {
-      method: "GET",
-      url: "/api/v1/items/{id}",
-      path: {
-        id,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    })
-  }
-
-  /**
-   * Update Item
-   * Update an item.
-   * @returns ItemPublic Successful Response
-   * @throws ApiError
-   */
-  public static updateItem(
-    data: TDataUpdateItem,
-  ): CancelablePromise<ItemPublic> {
-    const { id, requestBody } = data
-    return __request(OpenAPI, {
-      method: "PUT",
-      url: "/api/v1/items/{id}",
-      path: {
-        id,
-      },
-      body: requestBody,
-      mediaType: "application/json",
-      errors: {
-        422: "Validation Error",
-      },
-    })
-  }
-
-  /**
-   * Delete Item
-   * Delete an item.
-   * @returns Message Successful Response
-   * @throws ApiError
-   */
-  public static deleteItem(data: TDataDeleteItem): CancelablePromise<Message> {
-    const { id } = data
-    return __request(OpenAPI, {
-      method: "DELETE",
-      url: "/api/v1/items/{id}",
-      path: {
-        id,
-      },
-      errors: {
-        422: "Validation Error",
-      },
-    })
-  }
-}

frontend/src/client/types.gen.ts

@@ -0,0 +1,234 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+export type Body_login_login_access_token = {
+    grant_type?: (string | null);
+    username: string;
+    password: string;
+    scope?: string;
+    client_id?: (string | null);
+    client_secret?: (string | null);
+};
+
+export type HTTPValidationError = {
+    detail?: Array<ValidationError>;
+};
+
+export type ItemCreate = {
+    title: string;
+    description?: (string | null);
+};
+
+export type ItemPublic = {
+    title: string;
+    description?: (string | null);
+    id: string;
+    owner_id: string;
+};
+
+export type ItemsPublic = {
+    data: Array<ItemPublic>;
+    count: number;
+};
+
+export type ItemUpdate = {
+    title?: (string | null);
+    description?: (string | null);
+};
+
+export type Message = {
+    message: string;
+};
+
+export type NewPassword = {
+    token: string;
+    new_password: string;
+};
+
+export type PrivateUserCreate = {
+    email: string;
+    password: string;
+    full_name: string;
+    is_verified?: boolean;
+};
+
+export type Token = {
+    access_token: string;
+    token_type?: string;
+};
+
+export type UpdatePassword = {
+    current_password: string;
+    new_password: string;
+};
+
+export type UserCreate = {
+    email: string;
+    is_active?: boolean;
+    is_superuser?: boolean;
+    full_name?: (string | null);
+    password: string;
+};
+
+export type UserPublic = {
+    email: string;
+    is_active?: boolean;
+    is_superuser?: boolean;
+    full_name?: (string | null);
+    id: string;
+};
+
+export type UserRegister = {
+    email: string;
+    password: string;
+    full_name?: (string | null);
+};
+
+export type UsersPublic = {
+    data: Array<UserPublic>;
+    count: number;
+};
+
+export type UserUpdate = {
+    email?: (string | null);
+    is_active?: boolean;
+    is_superuser?: boolean;
+    full_name?: (string | null);
+    password?: (string | null);
+};
+
+export type UserUpdateMe = {
+    full_name?: (string | null);
+    email?: (string | null);
+};
+
+export type ValidationError = {
+    loc: Array<(string | number)>;
+    msg: string;
+    type: string;
+};
+
+export type ItemsReadItemsData = {
+    limit?: number;
+    skip?: number;
+};
+
+export type ItemsReadItemsResponse = (ItemsPublic);
+
+export type ItemsCreateItemData = {
+    requestBody: ItemCreate;
+};
+
+export type ItemsCreateItemResponse = (ItemPublic);
+
+export type ItemsReadItemData = {
+    id: string;
+};
+
+export type ItemsReadItemResponse = (ItemPublic);
+
+export type ItemsUpdateItemData = {
+    id: string;
+    requestBody: ItemUpdate;
+};
+
+export type ItemsUpdateItemResponse = (ItemPublic);
+
+export type ItemsDeleteItemData = {
+    id: string;
+};
+
+export type ItemsDeleteItemResponse = (Message);
+
+export type LoginLoginAccessTokenData = {
+    formData: Body_login_login_access_token;
+};
+
+export type LoginLoginAccessTokenResponse = (Token);
+
+export type LoginTestTokenResponse = (UserPublic);
+
+export type LoginRecoverPasswordData = {
+    email: string;
+};
+
+export type LoginRecoverPasswordResponse = (Message);
+
+export type LoginResetPasswordData = {
+    requestBody: NewPassword;
+};
+
+export type LoginResetPasswordResponse = (Message);
+
+export type LoginRecoverPasswordHtmlContentData = {
+    email: string;
+};
+
+export type LoginRecoverPasswordHtmlContentResponse = (string);
+
+export type PrivateCreateUserData = {
+    requestBody: PrivateUserCreate;
+};
+
+export type PrivateCreateUserResponse = (UserPublic);
+
+export type UsersReadUsersData = {
+    limit?: number;
+    skip?: number;
+};
+
+export type UsersReadUsersResponse = (UsersPublic);
+
+export type UsersCreateUserData = {
+    requestBody: UserCreate;
+};
+
+export type UsersCreateUserResponse = (UserPublic);
+
+export type UsersReadUserMeResponse = (UserPublic);
+
+export type UsersDeleteUserMeResponse = (Message);
+
+export type UsersUpdateUserMeData = {
+    requestBody: UserUpdateMe;
+};
+
+export type UsersUpdateUserMeResponse = (UserPublic);
+
+export type UsersUpdatePasswordMeData = {
+    requestBody: UpdatePassword;
+};
+
+export type UsersUpdatePasswordMeResponse = (Message);
+
+export type UsersRegisterUserData = {
+    requestBody: UserRegister;
+};
+
+export type UsersRegisterUserResponse = (UserPublic);
+
+export type UsersReadUserByIdData = {
+    userId: string;
+};
+
+export type UsersReadUserByIdResponse = (UserPublic);
+
+export type UsersUpdateUserData = {
+    requestBody: UserUpdate;
+    userId: string;
+};
+
+export type UsersUpdateUserResponse = (UserPublic);
+
+export type UsersDeleteUserData = {
+    userId: string;
+};
+
+export type UsersDeleteUserResponse = (Message);
+
+export type UtilsTestEmailData = {
+    emailTo: string;
+};
+
+export type UtilsTestEmailResponse = (Message);
+
+export type UtilsHealthCheckResponse = (boolean);

frontend/src/components/Admin/AddUser.tsx

@@ -1,46 +1,64 @@
-import {
+import { zodResolver } from "@hookform/resolvers/zod"
-  Button,
-  Checkbox,
-  Flex,
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-} from "@chakra-ui/react"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
-import { type SubmitHandler, useForm } from "react-hook-form"
+import { Plus } from "lucide-react"
+import { useState } from "react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
 
-import { type UserCreate, UsersService } from "../../client"
+import { type UserCreate, UsersService } from "@/client"
-import type { ApiError } from "../../client/core/ApiError"
+import { Button } from "@/components/ui/button"
-import useCustomToast from "../../hooks/useCustomToast"
+import { Checkbox } from "@/components/ui/checkbox"
-import { emailPattern, handleError } from "../../utils"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { LoadingButton } from "@/components/ui/loading-button"
+import useCustomToast from "@/hooks/useCustomToast"
+import { handleError } from "@/utils"
 
-interface AddUserProps {
+const formSchema = z
-  isOpen: boolean
+  .object({
-  onClose: () => void
+    email: z.email({ message: "Invalid email address" }),
-}
+    full_name: z.string().optional(),
+    password: z
+      .string()
+      .min(1, { message: "Password is required" })
+      .min(8, { message: "Password must be at least 8 characters" }),
+    confirm_password: z
+      .string()
+      .min(1, { message: "Please confirm your password" }),
+    is_superuser: z.boolean(),
+    is_active: z.boolean(),
+  })
+  .refine((data) => data.password === data.confirm_password, {
+    message: "The passwords don't match",
+    path: ["confirm_password"],
+  })
 
-interface UserCreateForm extends UserCreate {
+type FormData = z.infer<typeof formSchema>
-  confirm_password: string
-}
 
-const AddUser = ({ isOpen, onClose }: AddUserProps) => {
+const AddUser = () => {
+  const [isOpen, setIsOpen] = useState(false)
   const queryClient = useQueryClient()
-  const showToast = useCustomToast()
+  const { showSuccessToast, showErrorToast } = useCustomToast()
-  const {
+
-    register,
+  const form = useForm<FormData>({
-    handleSubmit,
+    resolver: zodResolver(formSchema),
-    reset,
-    getValues,
-    formState: { errors, isSubmitting },
-  } = useForm<UserCreateForm>({
     mode: "onBlur",
     criteriaMode: "all",
     defaultValues: {
@@ -57,125 +75,163 @@ const AddUser = ({ isOpen, onClose }: AddUserProps) => {
     mutationFn: (data: UserCreate) =>
       UsersService.createUser({ requestBody: data }),
     onSuccess: () => {
-      showToast("Success!", "User created successfully.", "success")
+      showSuccessToast("User created successfully")
-      reset()
+      form.reset()
-      onClose()
+      setIsOpen(false)
-    },
-    onError: (err: ApiError) => {
-      handleError(err, showToast)
     },
+    onError: handleError.bind(showErrorToast),
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ["users"] })
     },
   })
 
-  const onSubmit: SubmitHandler<UserCreateForm> = (data) => {
+  const onSubmit = (data: FormData) => {
     mutation.mutate(data)
   }
 
   return (
-    <>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <Modal
+      <DialogTrigger asChild>
-        isOpen={isOpen}
+        <Button className="my-4">
-        onClose={onClose}
+          <Plus className="mr-2" />
-        size={{ base: "sm", md: "md" }}
+          Add User
-        isCentered
+        </Button>
-      >
+      </DialogTrigger>
-        <ModalOverlay />
+      <DialogContent className="sm:max-w-md">
-        <ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
+        <DialogHeader>
-          <ModalHeader>Add User</ModalHeader>
+          <DialogTitle>Add User</DialogTitle>
-          <ModalCloseButton />
+          <DialogDescription>
-          <ModalBody pb={6}>
+            Fill in the form below to add a new user to the system.
-            <FormControl isRequired isInvalid={!!errors.email}>
+          </DialogDescription>
-              <FormLabel htmlFor="email">Email</FormLabel>
+        </DialogHeader>
-              <Input
+        <Form {...form}>
-                id="email"
+          <form onSubmit={form.handleSubmit(onSubmit)}>
-                {...register("email", {
+            <div className="grid gap-4 py-4">
-                  required: "Email is required",
+              <FormField
-                  pattern: emailPattern,
+                control={form.control}
-                })}
+                name="email"
-                placeholder="Email"
+                render={({ field }) => (
-                type="email"
+                  <FormItem>
+                    <FormLabel>
+                      Email <span className="text-destructive">*</span>
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Email"
+                        type="email"
+                        {...field}
+                        required
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-              {errors.email && (
+
-                <FormErrorMessage>{errors.email.message}</FormErrorMessage>
+              <FormField
-              )}
+                control={form.control}
-            </FormControl>
+                name="full_name"
-            <FormControl mt={4} isInvalid={!!errors.full_name}>
+                render={({ field }) => (
-              <FormLabel htmlFor="name">Full name</FormLabel>
+                  <FormItem>
-              <Input
+                    <FormLabel>Full Name</FormLabel>
-                id="name"
+                    <FormControl>
-                {...register("full_name")}
+                      <Input placeholder="Full name" type="text" {...field} />
-                placeholder="Full name"
+                    </FormControl>
-                type="text"
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-              {errors.full_name && (
+
-                <FormErrorMessage>{errors.full_name.message}</FormErrorMessage>
+              <FormField
-              )}
+                control={form.control}
-            </FormControl>
+                name="password"
-            <FormControl mt={4} isRequired isInvalid={!!errors.password}>
+                render={({ field }) => (
-              <FormLabel htmlFor="password">Set Password</FormLabel>
+                  <FormItem>
-              <Input
+                    <FormLabel>
-                id="password"
+                      Set Password <span className="text-destructive">*</span>
-                {...register("password", {
+                    </FormLabel>
-                  required: "Password is required",
+                    <FormControl>
-                  minLength: {
+                      <Input
-                    value: 8,
+                        placeholder="Password"
-                    message: "Password must be at least 8 characters",
+                        type="password"
-                  },
+                        {...field}
-                })}
+                        required
-                placeholder="Password"
+                      />
-                type="password"
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-              {errors.password && (
+
-                <FormErrorMessage>{errors.password.message}</FormErrorMessage>
+              <FormField
-              )}
+                control={form.control}
-            </FormControl>
+                name="confirm_password"
-            <FormControl
+                render={({ field }) => (
-              mt={4}
+                  <FormItem>
-              isRequired
+                    <FormLabel>
-              isInvalid={!!errors.confirm_password}
+                      Confirm Password{" "}
-            >
+                      <span className="text-destructive">*</span>
-              <FormLabel htmlFor="confirm_password">Confirm Password</FormLabel>
+                    </FormLabel>
-              <Input
+                    <FormControl>
-                id="confirm_password"
+                      <Input
-                {...register("confirm_password", {
+                        placeholder="Password"
-                  required: "Please confirm your password",
+                        type="password"
-                  validate: (value) =>
+                        {...field}
-                    value === getValues().password ||
+                        required
-                    "The passwords do not match",
+                      />
-                })}
+                    </FormControl>
-                placeholder="Password"
+                    <FormMessage />
-                type="password"
+                  </FormItem>
+                )}
               />
-              {errors.confirm_password && (
+
-                <FormErrorMessage>
+              <FormField
-                  {errors.confirm_password.message}
+                control={form.control}
-                </FormErrorMessage>
+                name="is_superuser"
-              )}
+                render={({ field }) => (
-            </FormControl>
+                  <FormItem className="flex items-center gap-3 space-y-0">
-            <Flex mt={4}>
+                    <FormControl>
-              <FormControl>
+                      <Checkbox
-                <Checkbox {...register("is_superuser")} colorScheme="teal">
+                        checked={field.value}
-                  Is superuser?
+                        onCheckedChange={field.onChange}
-                </Checkbox>
+                      />
-              </FormControl>
+                    </FormControl>
-              <FormControl>
+                    <FormLabel className="font-normal">Is superuser?</FormLabel>
-                <Checkbox {...register("is_active")} colorScheme="teal">
+                  </FormItem>
-                  Is active?
+                )}
-                </Checkbox>
+              />
-              </FormControl>
+
-            </Flex>
+              <FormField
-          </ModalBody>
+                control={form.control}
-          <ModalFooter gap={3}>
+                name="is_active"
-            <Button variant="primary" type="submit" isLoading={isSubmitting}>
+                render={({ field }) => (
-              Save
+                  <FormItem className="flex items-center gap-3 space-y-0">
-            </Button>
+                    <FormControl>
-            <Button onClick={onClose}>Cancel</Button>
+                      <Checkbox
-          </ModalFooter>
+                        checked={field.value}
-        </ModalContent>
+                        onCheckedChange={field.onChange}
-      </Modal>
+                      />
-    </>
+                    </FormControl>
+                    <FormLabel className="font-normal">Is active?</FormLabel>
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button variant="outline" disabled={mutation.isPending}>
+                  Cancel
+                </Button>
+              </DialogClose>
+              <LoadingButton type="submit" loading={mutation.isPending}>
+                Save
+              </LoadingButton>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
   )
 }
 

frontend/src/components/Admin/DeleteUser.tsx

@@ -0,0 +1,95 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { Trash2 } from "lucide-react"
+import { useState } from "react"
+import { useForm } from "react-hook-form"
+
+import { UsersService } from "@/client"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
+import { LoadingButton } from "@/components/ui/loading-button"
+import useCustomToast from "@/hooks/useCustomToast"
+import { handleError } from "@/utils"
+
+interface DeleteUserProps {
+  id: string
+  onSuccess: () => void
+}
+
+const DeleteUser = ({ id, onSuccess }: DeleteUserProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const queryClient = useQueryClient()
+  const { showSuccessToast, showErrorToast } = useCustomToast()
+  const { handleSubmit } = useForm()
+
+  const deleteUser = async (id: string) => {
+    await UsersService.deleteUser({ userId: id })
+  }
+
+  const mutation = useMutation({
+    mutationFn: deleteUser,
+    onSuccess: () => {
+      showSuccessToast("The user was deleted successfully")
+      setIsOpen(false)
+      onSuccess()
+    },
+    onError: handleError.bind(showErrorToast),
+    onSettled: () => {
+      queryClient.invalidateQueries()
+    },
+  })
+
+  const onSubmit = async () => {
+    mutation.mutate(id)
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenuItem
+        variant="destructive"
+        onSelect={(e) => e.preventDefault()}
+        onClick={() => setIsOpen(true)}
+      >
+        <Trash2 />
+        Delete User
+      </DropdownMenuItem>
+      <DialogContent className="sm:max-w-md">
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <DialogHeader>
+            <DialogTitle>Delete User</DialogTitle>
+            <DialogDescription>
+              All items associated with this user will also be{" "}
+              <strong>permanently deleted.</strong> Are you sure? You will not
+              be able to undo this action.
+            </DialogDescription>
+          </DialogHeader>
+
+          <DialogFooter className="mt-4">
+            <DialogClose asChild>
+              <Button variant="outline" disabled={mutation.isPending}>
+                Cancel
+              </Button>
+            </DialogClose>
+            <LoadingButton
+              variant="destructive"
+              type="submit"
+              loading={mutation.isPending}
+            >
+              Delete
+            </LoadingButton>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default DeleteUser

frontend/src/components/Admin/EditUser.tsx

@@ -1,179 +1,238 @@
-import {
+import { zodResolver } from "@hookform/resolvers/zod"
-  Button,
-  Checkbox,
-  Flex,
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-} from "@chakra-ui/react"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
-import { type SubmitHandler, useForm } from "react-hook-form"
+import { Pencil } from "lucide-react"
+import { useState } from "react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
 
+import { type UserPublic, UsersService } from "@/client"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
 import {
-  type ApiError,
+  Dialog,
-  type UserPublic,
+  DialogClose,
-  type UserUpdate,
+  DialogContent,
-  UsersService,
+  DialogDescription,
-} from "../../client"
+  DialogFooter,
-import useCustomToast from "../../hooks/useCustomToast"
+  DialogHeader,
-import { emailPattern, handleError } from "../../utils"
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { LoadingButton } from "@/components/ui/loading-button"
+import useCustomToast from "@/hooks/useCustomToast"
+import { handleError } from "@/utils"
+
+const formSchema = z
+  .object({
+    email: z.email({ message: "Invalid email address" }),
+    full_name: z.string().optional(),
+    password: z
+      .string()
+      .min(8, { message: "Password must be at least 8 characters" })
+      .optional()
+      .or(z.literal("")),
+    confirm_password: z.string().optional(),
+    is_superuser: z.boolean().optional(),
+    is_active: z.boolean().optional(),
+  })
+  .refine((data) => !data.password || data.password === data.confirm_password, {
+    message: "The passwords don't match",
+    path: ["confirm_password"],
+  })
+
+type FormData = z.infer<typeof formSchema>
 
 interface EditUserProps {
   user: UserPublic
-  isOpen: boolean
+  onSuccess: () => void
-  onClose: () => void
 }
 
-interface UserUpdateForm extends UserUpdate {
+const EditUser = ({ user, onSuccess }: EditUserProps) => {
-  confirm_password: string
+  const [isOpen, setIsOpen] = useState(false)
-}
-
-const EditUser = ({ user, isOpen, onClose }: EditUserProps) => {
   const queryClient = useQueryClient()
-  const showToast = useCustomToast()
+  const { showSuccessToast, showErrorToast } = useCustomToast()
 
-  const {
+  const form = useForm<FormData>({
-    register,
+    resolver: zodResolver(formSchema),
-    handleSubmit,
-    reset,
-    getValues,
-    formState: { errors, isSubmitting, isDirty },
-  } = useForm<UserUpdateForm>({
     mode: "onBlur",
     criteriaMode: "all",
-    defaultValues: user,
+    defaultValues: {
+      email: user.email,
+      full_name: user.full_name ?? undefined,
+      is_superuser: user.is_superuser,
+      is_active: user.is_active,
+    },
   })
 
   const mutation = useMutation({
-    mutationFn: (data: UserUpdateForm) =>
+    mutationFn: (data: FormData) =>
       UsersService.updateUser({ userId: user.id, requestBody: data }),
     onSuccess: () => {
-      showToast("Success!", "User updated successfully.", "success")
+      showSuccessToast("User updated successfully")
-      onClose()
+      setIsOpen(false)
-    },
+      onSuccess()
-    onError: (err: ApiError) => {
-      handleError(err, showToast)
     },
+    onError: handleError.bind(showErrorToast),
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ["users"] })
     },
   })
 
-  const onSubmit: SubmitHandler<UserUpdateForm> = async (data) => {
+  const onSubmit = (data: FormData) => {
-    if (data.password === "") {
+    // exclude confirm_password from submission data and remove password if empty
-      data.password = undefined
+    const { confirm_password: _, ...submitData } = data
+    if (!submitData.password) {
+      delete submitData.password
     }
-    mutation.mutate(data)
+    mutation.mutate(submitData)
-  }
-
-  const onCancel = () => {
-    reset()
-    onClose()
   }
 
   return (
-    <>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <Modal
+      <DropdownMenuItem
-        isOpen={isOpen}
+        onSelect={(e) => e.preventDefault()}
-        onClose={onClose}
+        onClick={() => setIsOpen(true)}
-        size={{ base: "sm", md: "md" }}
-        isCentered
       >
-        <ModalOverlay />
+        <Pencil />
-        <ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
+        Edit User
-          <ModalHeader>Edit User</ModalHeader>
+      </DropdownMenuItem>
-          <ModalCloseButton />
+      <DialogContent className="sm:max-w-md">
-          <ModalBody pb={6}>
+        <Form {...form}>
-            <FormControl isInvalid={!!errors.email}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
-              <FormLabel htmlFor="email">Email</FormLabel>
+            <DialogHeader>
-              <Input
+              <DialogTitle>Edit User</DialogTitle>
-                id="email"
+              <DialogDescription>
-                {...register("email", {
+                Update the user details below.
-                  required: "Email is required",
+              </DialogDescription>
-                  pattern: emailPattern,
+            </DialogHeader>
-                })}
+            <div className="grid gap-4 py-4">
-                placeholder="Email"
+              <FormField
-                type="email"
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      Email <span className="text-destructive">*</span>
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Email"
+                        type="email"
+                        {...field}
+                        required
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-              {errors.email && (
-                <FormErrorMessage>{errors.email.message}</FormErrorMessage>
-              )}
-            </FormControl>
-            <FormControl mt={4}>
-              <FormLabel htmlFor="name">Full name</FormLabel>
-              <Input id="name" {...register("full_name")} type="text" />
-            </FormControl>
-            <FormControl mt={4} isInvalid={!!errors.password}>
-              <FormLabel htmlFor="password">Set Password</FormLabel>
-              <Input
-                id="password"
-                {...register("password", {
-                  minLength: {
-                    value: 8,
-                    message: "Password must be at least 8 characters",
-                  },
-                })}
-                placeholder="Password"
-                type="password"
-              />
-              {errors.password && (
-                <FormErrorMessage>{errors.password.message}</FormErrorMessage>
-              )}
-            </FormControl>
-            <FormControl mt={4} isInvalid={!!errors.confirm_password}>
-              <FormLabel htmlFor="confirm_password">Confirm Password</FormLabel>
-              <Input
-                id="confirm_password"
-                {...register("confirm_password", {
-                  validate: (value) =>
-                    value === getValues().password ||
-                    "The passwords do not match",
-                })}
-                placeholder="Password"
-                type="password"
-              />
-              {errors.confirm_password && (
-                <FormErrorMessage>
-                  {errors.confirm_password.message}
-                </FormErrorMessage>
-              )}
-            </FormControl>
-            <Flex>
-              <FormControl mt={4}>
-                <Checkbox {...register("is_superuser")} colorScheme="teal">
-                  Is superuser?
-                </Checkbox>
-              </FormControl>
-              <FormControl mt={4}>
-                <Checkbox {...register("is_active")} colorScheme="teal">
-                  Is active?
-                </Checkbox>
-              </FormControl>
-            </Flex>
-          </ModalBody>
 
-          <ModalFooter gap={3}>
+              <FormField
-            <Button
+                control={form.control}
-              variant="primary"
+                name="full_name"
-              type="submit"
+                render={({ field }) => (
-              isLoading={isSubmitting}
+                  <FormItem>
-              isDisabled={!isDirty}
+                    <FormLabel>Full Name</FormLabel>
-            >
+                    <FormControl>
-              Save
+                      <Input placeholder="Full name" type="text" {...field} />
-            </Button>
+                    </FormControl>
-            <Button onClick={onCancel}>Cancel</Button>
+                    <FormMessage />
-          </ModalFooter>
+                  </FormItem>
-        </ModalContent>
+                )}
-      </Modal>
+              />
-    </>
+
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Set Password</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Password"
+                        type="password"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="confirm_password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Confirm Password</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Password"
+                        type="password"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="is_superuser"
+                render={({ field }) => (
+                  <FormItem className="flex items-center gap-3 space-y-0">
+                    <FormControl>
+                      <Checkbox
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormLabel className="font-normal">Is superuser?</FormLabel>
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="is_active"
+                render={({ field }) => (
+                  <FormItem className="flex items-center gap-3 space-y-0">
+                    <FormControl>
+                      <Checkbox
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormLabel className="font-normal">Is active?</FormLabel>
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button variant="outline" disabled={mutation.isPending}>
+                  Cancel
+                </Button>
+              </DialogClose>
+              <LoadingButton type="submit" loading={mutation.isPending}>
+                Save
+              </LoadingButton>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
   )
 }
 

frontend/src/components/Admin/UserActionsMenu.tsx

@@ -0,0 +1,40 @@
+import { EllipsisVertical } from "lucide-react"
+import { useState } from "react"
+
+import type { UserPublic } from "@/client"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import useAuth from "@/hooks/useAuth"
+import DeleteUser from "./DeleteUser"
+import EditUser from "./EditUser"
+
+interface UserActionsMenuProps {
+  user: UserPublic
+}
+
+export const UserActionsMenu = ({ user }: UserActionsMenuProps) => {
+  const [open, setOpen] = useState(false)
+  const { user: currentUser } = useAuth()
+
+  if (user.id === currentUser?.id) {
+    return null
+  }
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <EllipsisVertical />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <EditUser user={user} onSuccess={() => setOpen(false)} />
+        <DeleteUser id={user.id} onSuccess={() => setOpen(false)} />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

frontend/src/components/Admin/columns.tsx

@@ -0,0 +1,76 @@
+import type { ColumnDef } from "@tanstack/react-table"
+
+import type { UserPublic } from "@/client"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+import { UserActionsMenu } from "./UserActionsMenu"
+
+export type UserTableData = UserPublic & {
+  isCurrentUser: boolean
+}
+
+export const columns: ColumnDef<UserTableData>[] = [
+  {
+    accessorKey: "full_name",
+    header: "Full Name",
+    cell: ({ row }) => {
+      const fullName = row.original.full_name
+      return (
+        <div className="flex items-center gap-2">
+          <span
+            className={cn("font-medium", !fullName && "text-muted-foreground")}
+          >
+            {fullName || "N/A"}
+          </span>
+          {row.original.isCurrentUser && (
+            <Badge variant="outline" className="text-xs">
+              You
+            </Badge>
+          )}
+        </div>
+      )
+    },
+  },
+  {
+    accessorKey: "email",
+    header: "Email",
+    cell: ({ row }) => (
+      <span className="text-muted-foreground">{row.original.email}</span>
+    ),
+  },
+  {
+    accessorKey: "is_superuser",
+    header: "Role",
+    cell: ({ row }) => (
+      <Badge variant={row.original.is_superuser ? "default" : "secondary"}>
+        {row.original.is_superuser ? "Superuser" : "User"}
+      </Badge>
+    ),
+  },
+  {
+    accessorKey: "is_active",
+    header: "Status",
+    cell: ({ row }) => (
+      <div className="flex items-center gap-2">
+        <span
+          className={cn(
+            "size-2 rounded-full",
+            row.original.is_active ? "bg-green-500" : "bg-gray-400",
+          )}
+        />
+        <span className={row.original.is_active ? "" : "text-muted-foreground"}>
+          {row.original.is_active ? "Active" : "Inactive"}
+        </span>
+      </div>
+    ),
+  },
+  {
+    id: "actions",
+    header: () => <span className="sr-only">Actions</span>,
+    cell: ({ row }) => (
+      <div className="flex justify-end">
+        <UserActionsMenu user={row.original} />
+      </div>
+    ),
+  },
+]

frontend/src/components/Common/ActionsMenu.tsx

@@ -1,75 +0,0 @@
-import {
-  Button,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  useDisclosure,
-} from "@chakra-ui/react"
-import { BsThreeDotsVertical } from "react-icons/bs"
-import { FiEdit, FiTrash } from "react-icons/fi"
-
-import type { ItemPublic, UserPublic } from "../../client"
-import EditUser from "../Admin/EditUser"
-import EditItem from "../Items/EditItem"
-import Delete from "./DeleteAlert"
-
-interface ActionsMenuProps {
-  type: string
-  value: ItemPublic | UserPublic
-  disabled?: boolean
-}
-
-const ActionsMenu = ({ type, value, disabled }: ActionsMenuProps) => {
-  const editUserModal = useDisclosure()
-  const deleteModal = useDisclosure()
-
-  return (
-    <>
-      <Menu>
-        <MenuButton
-          isDisabled={disabled}
-          as={Button}
-          rightIcon={<BsThreeDotsVertical />}
-          variant="unstyled"
-        />
-        <MenuList>
-          <MenuItem
-            onClick={editUserModal.onOpen}
-            icon={<FiEdit fontSize="16px" />}
-          >
-            Edit {type}
-          </MenuItem>
-          <MenuItem
-            onClick={deleteModal.onOpen}
-            icon={<FiTrash fontSize="16px" />}
-            color="ui.danger"
-          >
-            Delete {type}
-          </MenuItem>
-        </MenuList>
-        {type === "User" ? (
-          <EditUser
-            user={value as UserPublic}
-            isOpen={editUserModal.isOpen}
-            onClose={editUserModal.onClose}
-          />
-        ) : (
-          <EditItem
-            item={value as ItemPublic}
-            isOpen={editUserModal.isOpen}
-            onClose={editUserModal.onClose}
-          />
-        )}
-        <Delete
-          type={type}
-          id={value.id}
-          isOpen={deleteModal.isOpen}
-          onClose={deleteModal.onClose}
-        />
-      </Menu>
-    </>
-  )
-}
-
-export default ActionsMenu

frontend/src/components/Common/Appearance.tsx

@@ -0,0 +1,105 @@
+import { Monitor, Moon, Sun } from "lucide-react"
+
+import { type Theme, useTheme } from "@/components/theme-provider"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar"
+
+type LucideIcon = React.FC<React.SVGProps<SVGSVGElement>>
+
+const ICON_MAP: Record<Theme, LucideIcon> = {
+  system: Monitor,
+  light: Sun,
+  dark: Moon,
+}
+
+export const SidebarAppearance = () => {
+  const { isMobile } = useSidebar()
+  const { setTheme, theme } = useTheme()
+  const Icon = ICON_MAP[theme]
+
+  return (
+    <SidebarMenuItem>
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <SidebarMenuButton tooltip="Appearance" data-testid="theme-button">
+            <Icon className="size-4 text-muted-foreground" />
+            <span>Appearance</span>
+            <span className="sr-only">Toggle theme</span>
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          side={isMobile ? "top" : "right"}
+          align="end"
+          className="w-(--radix-dropdown-menu-trigger-width) min-w-56"
+        >
+          <DropdownMenuItem
+            data-testid="light-mode"
+            onClick={() => setTheme("light")}
+          >
+            <Sun className="mr-2 h-4 w-4" />
+            Light
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            data-testid="dark-mode"
+            onClick={() => setTheme("dark")}
+          >
+            <Moon className="mr-2 h-4 w-4" />
+            Dark
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setTheme("system")}>
+            <Monitor className="mr-2 h-4 w-4" />
+            System
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  )
+}
+
+export const Appearance = () => {
+  const { setTheme } = useTheme()
+
+  return (
+    <div className="flex items-center justify-center">
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <Button data-testid="theme-button" variant="outline" size="icon">
+            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <span className="sr-only">Toggle theme</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem
+            data-testid="light-mode"
+            onClick={() => setTheme("light")}
+          >
+            <Sun className="mr-2 h-4 w-4" />
+            Light
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            data-testid="dark-mode"
+            onClick={() => setTheme("dark")}
+          >
+            <Moon className="mr-2 h-4 w-4" />
+            Dark
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setTheme("system")}>
+            <Monitor className="mr-2 h-4 w-4" />
+            System
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

frontend/src/components/Common/AuthLayout.tsx

@@ -0,0 +1,26 @@
+import { Appearance } from "@/components/Common/Appearance"
+import { Logo } from "@/components/Common/Logo"
+import { Footer } from "./Footer"
+
+interface AuthLayoutProps {
+  children: React.ReactNode
+}
+
+export function AuthLayout({ children }: AuthLayoutProps) {
+  return (
+    <div className="grid min-h-svh lg:grid-cols-2">
+      <div className="bg-muted dark:bg-zinc-900 relative hidden lg:flex lg:items-center lg:justify-center">
+        <Logo variant="full" className="h-16" asLink={false} />
+      </div>
+      <div className="flex flex-col gap-4 p-6 md:p-10">
+        <div className="flex justify-end">
+          <Appearance />
+        </div>
+        <div className="flex flex-1 items-center justify-center">
+          <div className="w-full max-w-xs">{children}</div>
+        </div>
+        <Footer />
+      </div>
+    </div>
+  )
+}