Drop docker-compose from dev workflow; run full build/test and Aspire locally

dev-build.sh now builds the whole solution and runs .NET + Jest unit
tests instead of restarting docker-compose services. readme documents
the aspire run command for local orchestration; slnx solution-items
reference to the removed docker-compose.yml is gone.

.dockerignore

@@ -0,0 +1,7 @@
+**/bin/
+**/obj/
+**/node_modules/
+**/dist/
+.git/
+.husky/
+docs/

.github/workflows/ci.yml

@@ -0,0 +1,97 @@
+# CI/CD pipeline for MicCheck. Read by both Gitea Actions and GitHub Actions
+# (both look under .github/workflows/). Every non-checkout step just invokes a
+# bash script under scripts/ci/, so the entire pipeline is reproducible by
+# running the same scripts locally - no marketplace build/test/push actions.
+#
+# Gitea (origin) is the internal/testing remote and runs the full pipeline:
+# build, test, docker push, deploy-to-qa, smoke test. GitHub is the public
+# mirror and only needs to prove the code builds and tests pass - it has no
+# registry secrets and no [self-hosted, qa] runner, so the docker push and
+# deploy/smoke jobs are skipped there via the `github.server_url` check
+# below (identical on both engines: https://github.com on GitHub, the Gitea
+# instance URL on Gitea).
+name: CI
+
+on:
+  push:
+    paths-ignore: [badges/**]
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    env:
+      REGISTRY: ${{ secrets.REGISTRY }}
+      REGISTRY_OWNER: ${{ secrets.REGISTRY_OWNER }}
+      REGISTRY_USER: ${{ secrets.REGISTRY_USER }}
+      REGISTRY_TOKEN: ${{ secrets.REGISTRY_TOKEN }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Build
+        run: ./scripts/ci/build.sh
+
+      - name: Test
+        run: ./scripts/ci/test.sh
+
+      - name: Coverage report
+        run: ./scripts/ci/coverage.sh
+
+      - name: Publish coverage badge
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: ./scripts/ci/publish-coverage-badge.sh
+
+      - name: Build Docker images
+        if: github.server_url != 'https://github.com' && github.ref_name == 'main'
+        run: ./scripts/ci/docker-build.sh
+
+      - name: Push Docker images
+        if: github.server_url != 'https://github.com' && github.ref_name == 'main'
+        run: ./scripts/ci/docker-push.sh
+
+  deploy-qa:
+    needs: build-and-push
+    if: github.server_url != 'https://github.com' && github.ref_name == 'main'
+    runs-on: [self-hosted, qa]
+    env:
+      REGISTRY: ${{ secrets.REGISTRY }}
+      REGISTRY_OWNER: ${{ secrets.REGISTRY_OWNER }}
+      REGISTRY_USER: ${{ secrets.REGISTRY_USER }}
+      REGISTRY_TOKEN: ${{ secrets.REGISTRY_TOKEN }}
+      JWT_SECRET_KEY: ${{ secrets.JWT_SECRET_KEY }}
+      POSTGRES_PASSWORD: ${{ secrets.POSTGRES_PASSWORD }}
+      QA_ADMIN_PORT: ${{ vars.QA_ADMIN_PORT }}
+    steps:
+      # actions/checkout@v4 is a Node-based action; this runner has no node
+      # in PATH, so checkout plain git instead of via marketplace action.
+      - name: Checkout
+        run: |
+          git init -q .
+          git remote add origin "${{ github.server_url }}/${{ github.repository }}.git"
+          git -c http.extraheader="AUTHORIZATION: bearer ${{ github.token }}" fetch --depth=1 origin "${{ github.sha }}"
+          git checkout -q FETCH_HEAD
+
+      - name: Deploy to QA
+        run: ./scripts/ci/deploy-qa.sh
+
+  smoke-qa:
+    needs: deploy-qa
+    if: github.server_url != 'https://github.com'
+    runs-on: [self-hosted, qa]
+    env:
+      QA_ADMIN_PORT: ${{ vars.QA_ADMIN_PORT }}
+      POSTGRES_PASSWORD: ${{ secrets.POSTGRES_PASSWORD }}
+    steps:
+      # actions/checkout@v4 is a Node-based action; this runner has no node
+      # in PATH, so checkout plain git instead of via marketplace action.
+      - name: Checkout
+        run: |
+          git init -q .
+          git remote add origin "${{ github.server_url }}/${{ github.repository }}.git"
+          git -c http.extraheader="AUTHORIZATION: bearer ${{ github.token }}" fetch --depth=1 origin "${{ github.sha }}"
+          git checkout -q FETCH_HEAD
+
+      - name: Smoke test QA deployment
+        run: ./scripts/ci/smoke-qa.sh

.gitignore

@@ -408,7 +408,6 @@ FodyWeavers.xsd
 
 # VS Code files for those working on multiple tools
 .vscode/*
-!.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
@@ -429,3 +428,54 @@ FodyWeavers.xsd
 
 # JetBrains IDEs
 .idea/
+
+# ── Node.js / Vue.js / TypeScript ────────────────────────────────────────────
+
+# Webpack / Vite build output
+dist/
+dist-ssr/
+
+# TypeScript incremental build cache
+*.tsbuildinfo
+
+# Playwright
+src/admin/test-results/
+src/admin/playwright-report/
+src/admin/e2e/.auth/
+
+# Jest test coverage reports
+coverage/
+.nyc_output/
+
+# Local environment variable overrides (may contain secrets)
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Package manager debug logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Optional: Yarn v2+ cache (not committed by default)
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# macOS metadata
+.DS_Store
+
+# Windows thumbnail cache
+Thumbs.db
+ehthumbs.db
+
+# Self-installed .NET SDK (scripts/ci/lib.sh ensure_dotnet, used when a CI runner lacks the SDK)
+/.dotnet/
+
+# Self-installed reportgenerator CLI (scripts/ci/lib.sh ensure_reportgenerator)
+/.dotnet-tools/

.husky/pre-push

@@ -0,0 +1 @@
+exec ./scripts/ci/prepush.sh

CLAUDE.md

@@ -1,40 +1,53 @@
 # CLAUDE.md
 
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+Guidance for Claude Code (claude.ai/code) in this repo.
 
 ## Project
 
-MicCheck is an open source project written in asp.net, c#, typescript and VueJS that manages feature flags, their projects, and their environments. 
+MicCheck: open source. asp.net, c#, typescript, VueJS. Manage feature flags, projects, environments.
 
 ## Planned Structure
 
-- `src/admin/` — administrative components
+- `src/admin/` — VueJS admin components
+- `src/api/` - .NET API + REST endpoints
 - `tests/` — test suite
 - `docs/` — documentation
 
 ## Best Practices
 
-- Ensure all projects are using the latest LTS version of .NET as well as the latest supported nuget packages for that .NET version
-- Ensure that langVersion is set to latest in all csproj files and nullable is enabled
-- Code in all projects should be organized by feature or area instead of type.  (e.g. a features namespace with all feature related code in it or in child namespaces of it)
-- All new feature requests should include corresponding unit tests that cover as much of the logic as possible.
-- Any file modified should be evaluated for potential test cases and missing coverage areas.
+- Use latest LTS .NET + latest supported nuget packages for that version
+- Set `langVersion` to latest in all csproj files; enable nullable
+- Organize code by feature/area, not type (e.g. `features` namespace)
+- New features need unit tests covering logic as much as possible (both nunit and jest)
+- Modified file: check missing test coverage, all tests pass
 
 # Coding
-- Use descriptive names for all classes and method created.  Avoid generic names like Provider, Manager, Helper
+- Descriptive names all classes/methods. No generic: Provider, Manager, Helper
+- Match formatting/style from `.editorconfig`
+- Wrap lines at 220 chars, single line if fewer
+- Interfaces implemented by single class → bottom of class file. Interface w/ multiple implementations → separate file.
+- No tuples for return types. Prefer records or classes for multiple values
+- No `sealed`
+- Use `record` for data objects, `class` for objects with behavior. Avoid mutable state where possible.
 
 ## Testing
-- Write unit tests in a BDD style, testing as much code end-to-end as possible without without touching external resources like databases or file systems (e.g. WhenAUserDoesSomething_ThenAThingAppears)
-- Mock any external dependencies using Moq.
-- Do not name any mocked objects with the work Mock in them
-- Do not include any Arrange / Act / Assert comments in the code
-
+- Min 70% code coverage, target 90%. Unit tests focus end-user scenarios first.
+- Don't write tests just for coverage. Call out missing coverage rather than cover stuff not valuable to end user.
+- Code not cleanly unit-testable → mark `[ExcludeFromCodeCoverage]` or exclude namespace from coverage in .runsettings file
+- BDD-style unit tests, end-to-end as possible, no external resources (DB, filesystem). e.g. `WhenAUserDoesSomething_ThenAThingAppears`
+- Mock external deps w/ Moq
+- Mock EntityFramework DBContexts via extracted interface + Moq. Don't rely on InMemory provider.
+- New features need unit tests covering logic as much as possible
+- Modified file: check missing test coverage
+- No "Mock" in mocked object names
+- No Arrange/Act/Assert comments
+- All tests pass before commit
 
 ## Claude
-- When generating a plan from a .md file in /docs/ save the plan in the same folder with the same filename minus the .md extention, but with a _plan.md at the end
-- When implementing a plan from a .md file in /docs/ save the summary of the plan in the same folder with the same filename minus the .md extention, but with a _output.md at the end
-
+- Plans = `.md` files in `docs/plans/`. Admin → `docs/plans/admin/`, API → `docs/plans/api/`
+- Split large plans into discrete chunks — each buildable + committable independently
+- Plan generated from `docs/plans/<name>.md` → save as `docs/plans/<name>_plan.md`
+- Plan implemented from `docs/plans/<name>.md` → save summary as `docs/plans/<name>_output.md`
 
 ## Stack
-
-The `.gitignore` is configured for a .NET/Visual Studio project (C#, NuGet, MSBuild). If this changes, update this file accordingly.
+`.gitignore` set for .NET/Visual Studio (C#, NuGet, MSBuild). Update if stack change.

CLAUDE.original.md

@@ -0,0 +1,53 @@
+# CLAUDE.md
+
+Guidance for Claude Code (claude.ai/code) when working in this repo.
+
+## Project
+
+MicCheck: open source. asp.net, c#, typescript, VueJS. Manages feature flags, projects, environments.
+
+## Planned Structure
+
+- `src/admin/` — VueJS admin components
+- `src/api/` - .NET API + REST endpoints
+- `tests/` — test suite
+- `docs/` — documentation
+
+## Best Practices
+
+- Use latest LTS .NET + latest supported nuget packages for that version
+- Set `langVersion` to latest in all csproj files; enable nullable
+- Organize code by feature/area, not type (e.g. `features` namespace)
+- New features need unit tests covering as much logic as possible (both nunit and jest)
+- Any modified file: evaluate for missing test coverage and that all tests pass
+
+# Coding
+- Descriptive names for all classes/methods. No generic names: Provider, Manager, Helper
+- Match formatting/style from `.editorconfig`
+- Wrap lines at 220 characters, leave single line if fewer
+- Place interfaces that are implemented by a single class at the bottom of the class file.  An interface with multiple implementations of an interface should be in a seperate file.
+- Do not use tuples for return types.  Prefer records or classes for multiple values
+- Do not use `sealed` 
+- Use `record` for data objects, `class` for objects with behavior. Avoid mutable state where possible.
+
+## Testing
+- Require a minimum of 70% code coverage with a target of 90%.  Unit tests should focus on end-user scenarios first.
+- Do not write tests for just to increase code coverage.  Call out lack of test coverage rather than covering something that isn't valuable to the end user.
+- Code that can not be cleanly unit tested should be marked with [ExcludeFromCodeCoverage] or have it's namespace excluded from code coverage.
+- BDD-style unit tests, end-to-end as possible, no external resources (DB, filesystem). e.g. `WhenAUserDoesSomething_ThenAThingAppears`
+- Mock external deps with Moq
+- Mock EntityFramework DBContexts with an extracted interface and Moq.  Do not rely on InMemory provider.
+- New features need unit tests covering as much logic as possible
+- Any modified file: evaluate for missing test coverage- 
+- No "Mock" in mocked object names
+- No Arrange/Act/Assert comments
+- All tests should pass before commit
+
+## Claude
+- Plans = `.md` files in `docs/plans/`. Admin → `docs/plans/admin/`, API → `docs/plans/api/`
+- Split large plans into discrete chunks — each buildable + committable independently
+- Plan generated from `docs/plans/<name>.md` → save as `docs/plans/<name>_plan.md`
+- Plan implemented from `docs/plans/<name>.md` → save summary as `docs/plans/<name>_output.md`
+
+## Stack
+`.gitignore` configured for .NET/Visual Studio (C#, NuGet, MSBuild). Update if stack changes.

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 James Wampler
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

MicCheck.slnx

@@ -1,8 +1,21 @@
 <Solution>
+  <Folder Name="/Solution Items/">
+    <File Path=".editorconfig" />
+    <File Path=".gitignore" />
+    <File Path="CLAUDE.md" />
+    <File Path="readme.md" />
+  </Folder>
   <Folder Name="/src/">
+    <Project Path="src/admin/Admin.esproj">
+      <Build />
+      <Deploy />
+    </Project>
     <Project Path="src/api/MicCheck.Api/MicCheck.Api.csproj" />
+    <Project Path="src/MicCheck.AppHost/MicCheck.AppHost.csproj" />
+    <Project Path="src/MicCheck.ServiceDefaults/MicCheck.ServiceDefaults.csproj" />
   </Folder>
   <Folder Name="/tests/">
     <Project Path="tests/api/MicCheck.Api.Tests.Unit/MicCheck.Api.Tests.Unit.csproj" />
+    <Project Path="tests/api/MicCheck.Api.Tests.Integration/MicCheck.Api.Tests.Integration.csproj" />
   </Folder>
 </Solution>

badges/coverage.svg

@@ -0,0 +1,138 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="155" height="20">
+    <style type="text/css">
+          <![CDATA[
+            @keyframes fade1 {
+                0% { visibility: visible; opacity: 1; }
+               23% { visibility: visible; opacity: 1; }
+               25% { visibility: hidden; opacity: 0; }
+               48% { visibility: hidden; opacity: 0; }
+               50% { visibility: hidden; opacity: 0; }
+               73% { visibility: hidden; opacity: 0; }
+               75% { visibility: hidden; opacity: 0; }
+               98% { visibility: hidden; opacity: 0; }
+              100% { visibility: visible; opacity: 1; }
+            }
+            @keyframes fade2 {
+                0% { visibility: hidden; opacity: 0; }
+               23% { visibility: hidden; opacity: 0; }
+               25% { visibility: visible; opacity: 1; }
+               48% { visibility: visible; opacity: 1; }
+               50% { visibility: hidden; opacity: 0; }
+               73% { visibility: hidden; opacity: 0; }
+               75% { visibility: hidden; opacity: 0; }
+               98% { visibility: hidden; opacity: 0; }
+              100% { visibility: hidden; opacity: 0; }
+            }
+            @keyframes fade3 {
+                0% { visibility: hidden; opacity: 0; }
+               23% { visibility: hidden; opacity: 0; }
+               25% { visibility: hidden; opacity: 0; }
+               48% { visibility: hidden; opacity: 0; }
+               50% { visibility: visible; opacity: 1; }
+               73% { visibility: visible; opacity: 1; }
+               75% { visibility: hidden; opacity: 0; }
+               98% { visibility: hidden; opacity: 0; }
+              100% { visibility: hidden; opacity: 0; }
+            }
+            @keyframes fade4 {
+                0% { visibility: hidden; opacity: 0; }
+               23% { visibility: hidden; opacity: 0; }
+               25% { visibility: hidden; opacity: 0; }
+               48% { visibility: hidden; opacity: 0; }
+               50% { visibility: hidden; opacity: 0; }
+               73% { visibility: hidden; opacity: 0; }
+               75% { visibility: visible; opacity: 1; }
+               98% { visibility: visible; opacity: 1; }
+              100% { visibility: hidden; opacity: 0; }
+            }
+            .linecoverage {
+                animation-duration: 15s;
+                animation-name: fade1;
+                animation-iteration-count: infinite;
+            }
+            .branchcoverage {
+                animation-duration: 15s;
+                animation-name: fade2;
+                animation-iteration-count: infinite;
+            }
+            .methodcoverage {
+                animation-duration: 15s;
+                animation-name: fade3;
+                animation-iteration-count: infinite;
+            }
+            .fullmethodcoverage {
+                animation-duration: 15s;
+                animation-name: fade4;
+                animation-iteration-count: infinite;
+            }
+          ]]>
+    </style>
+    <title>Code coverage</title>
+    <defs>
+        <linearGradient id="gradient" x2="0" y2="100%">
+            <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
+            <stop offset="1" stop-opacity=".1"/>
+        </linearGradient>
+
+        <linearGradient id="c">
+          <stop offset="0" stop-color="#d40000"/>
+          <stop offset="1" stop-color="#ff2a2a"/>
+        </linearGradient>
+        <linearGradient id="a">
+          <stop offset="0" stop-color="#e0e0de"/>
+          <stop offset="1" stop-color="#fff"/>
+        </linearGradient>
+        <linearGradient id="b">
+          <stop offset="0" stop-color="#37c837"/>
+          <stop offset="1" stop-color="#217821"/>
+        </linearGradient>
+        <linearGradient xlink:href="#a" id="e" x1="106.44" x2="69.96" y1="-11.96" y2="-46.84" gradientTransform="matrix(-.8426 -.00045 -.00045 -.8426 -94.27 -75.82)" gradientUnits="userSpaceOnUse"/>
+        <linearGradient xlink:href="#b" id="f" x1="56.19" x2="77.97" y1="-23.45" y2="10.62" gradientTransform="matrix(.8426 .00045 .00045 .8426 94.27 75.82)" gradientUnits="userSpaceOnUse"/>
+        <linearGradient xlink:href="#c" id="g" x1="79.98" x2="132.9" y1="10.79" y2="10.79" gradientTransform="matrix(.8426 .00045 .00045 .8426 94.27 75.82)" gradientUnits="userSpaceOnUse"/>
+
+        <mask id="mask">
+            <rect width="155" height="20" rx="3" fill="#fff"/>
+        </mask>
+
+        <g id="icon" transform="matrix(.04486 0 0 .04481 -.48 -.63)">
+            <rect width="52.92" height="52.92" x="-109.72" y="-27.13" fill="url(#e)" transform="rotate(-135)"/>
+            <rect width="52.92" height="52.92" x="70.19" y="-39.18" fill="url(#f)" transform="rotate(45)"/>
+            <rect width="52.92" height="52.92" x="80.05" y="-15.74" fill="url(#g)" transform="rotate(45)"/>
+        </g>
+    </defs>
+    
+    <g mask="url(#mask)">
+        <rect x="0" y="0" width="90" height="20" fill="#444"/>
+        <rect x="90" y="0" width="20" height="20" fill="#c00"/>
+        <rect x="110" y="0" width="45" height="20" fill="#00B600"/>
+        <rect x="0" y="0" width="155" height="20" fill="url(#gradient)"/>
+    </g>
+
+    <g>
+        <path class="" stroke="#fff" d="M94 6.5 h12 M94 10.5 h12 M94 14.5 h12"/>
+        
+        
+        
+    </g>
+    
+    <g fill="#fff" text-anchor="middle" font-family="Verdana,Arial,Geneva,sans-serif" font-size="11">
+        <a xlink:href="https://github.com/danielpalme/ReportGenerator" target="_top">
+            <title>Generated by: ReportGenerator 5.5.10.0</title>
+            <use xlink:href="#icon" transform="translate(3,1) scale(3.5)"/>
+        </a>
+
+        <text x="53" y="15" fill="#010101" fill-opacity=".3">Coverage</text>
+        <text x="53" y="14" fill="#fff">Coverage</text>
+        <text class="" x="132.5" y="15" fill="#010101" fill-opacity=".3">68.9%</text><text class="" x="132.5" y="14">68.9%</text>
+        
+        
+        
+    </g>
+
+    <g>
+        <rect class="" x="90" y="0" width="65" height="20" fill-opacity="0"><title>Line coverage</title></rect>
+        
+        
+        
+    </g>
+</svg>

deploy/qa/.env.example

@@ -0,0 +1,13 @@
+# Copy to .env (or export in CI) and fill in real values.
+# Used by scripts/ci/*.sh and deploy/qa/docker-compose.qa.yml.
+
+# Gitea container registry
+REGISTRY=gitea.example.com
+REGISTRY_OWNER=your-org-or-user
+REGISTRY_USER=ci-bot
+REGISTRY_TOKEN=changeme
+
+# QA environment
+JWT_SECRET_KEY=change-this-to-a-random-32-plus-char-secret
+POSTGRES_PASSWORD=change-this-to-a-random-password
+QA_ADMIN_PORT=3001

deploy/qa/docker-compose.qa.yml

@@ -0,0 +1,66 @@
+name: miccheck-qa
+
+# Dedicated, network-isolated QA stack. Not connected to the dev compose
+# stack's network - runs entirely on its own bridge network below. The API has
+# no published host port; Postgres is bound to DB_BIND_HOST (docker's bridge
+# gateway IP, computed by deploy-qa.sh) so the smoke-qa CI job - itself a
+# sibling container on that same default bridge - can seed/inspect data
+# directly, while it stays unreachable off-box (unlike binding to 0.0.0.0).
+services:
+
+  db:
+    image: postgres:16-alpine
+    environment:
+      POSTGRES_DB: miccheck
+      POSTGRES_USER: miccheck
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:?POSTGRES_PASSWORD is required}
+    ports:
+      - "${DB_BIND_HOST:-127.0.0.1}:55432:5432"
+    volumes:
+      - miccheck-qa-pgdata:/var/lib/postgresql/data
+    networks:
+      - qa
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U miccheck -d miccheck"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+
+  api:
+    image: ${API_IMAGE}:qa
+    environment:
+      ASPNETCORE_ENVIRONMENT: Development
+      ASPNETCORE_URLS: http://+:8080
+      ConnectionStrings__miccheck: "Host=db;Database=miccheck;Username=miccheck;Password=${POSTGRES_PASSWORD}"
+      Jwt__SecretKey: ${JWT_SECRET_KEY}
+      Jwt__Issuer: MicCheck
+      Jwt__Audience: MicCheck
+    networks:
+      - qa
+    depends_on:
+      db:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD-SHELL", "curl -fsS http://localhost:8080/health || exit 1"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 20s
+
+  admin:
+    image: ${ADMIN_IMAGE}:qa
+    ports:
+      - "${QA_ADMIN_PORT:-3001}:80"
+    networks:
+      - qa
+    depends_on:
+      api:
+        condition: service_started
+
+networks:
+  qa:
+    name: miccheck-qa-net
+
+volumes:
+  miccheck-qa-pgdata:
+    name: miccheck-qa-pgdata

dev-build.sh

@@ -0,0 +1,21 @@
+#!/usr/bin/env bash
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+echo "Building solution..."
+dotnet build "$SCRIPT_DIR/MicCheck.slnx"
+
+echo "Installing admin dependencies..."
+npm --prefix "$SCRIPT_DIR/src/admin" ci --silent
+
+echo "Building admin..."
+npm --prefix "$SCRIPT_DIR/src/admin" run build
+
+echo "Running .NET unit tests..."
+dotnet test "$SCRIPT_DIR/tests/api/MicCheck.Api.Tests.Unit/MicCheck.Api.Tests.Unit.csproj"
+
+echo "Running Jest tests..."
+npm --prefix "$SCRIPT_DIR/src/admin" test
+
+echo "Build and tests complete."

docker-compose.yml

@@ -1,35 +0,0 @@
-services:
-  db:
-    image: postgres:15-alpine
-    environment:
-      POSTGRES_DB: miccheck
-      POSTGRES_USER: miccheck
-      POSTGRES_PASSWORD: password
-    ports:
-      - "5432:5432"
-    volumes:
-      - postgres_data:/var/lib/postgresql/data
-    healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U miccheck"]
-      interval: 5s
-      timeout: 5s
-      retries: 5
-
-  api:
-    build:
-      context: .
-      dockerfile: src/api/MicCheck.Api/Dockerfile
-    ports:
-      - "8080:8080"
-    environment:
-      - ASPNETCORE_ENVIRONMENT=Development
-      - ConnectionStrings__DefaultConnection=Host=db;Database=miccheck;Username=miccheck;Password=password
-      - Jwt__SecretKey=change-this-secret-key-in-production-must-be-32-chars
-      - Jwt__Issuer=MicCheck
-      - Jwt__Audience=MicCheck
-    depends_on:
-      db:
-        condition: service_healthy
-
-volumes:
-  postgres_data:

docs/admin/01-admin-site_plan.md

@@ -0,0 +1,483 @@
+# MicCheck Admin Site Plan
+
+## Overview
+
+Build a fully functional VueJS 3 + Vuetify 3 + TypeScript single-page admin application for the MicCheck feature flag platform. The site manages the complete lifecycle of feature flags across the Organization → Project → Environment hierarchy exposed by the MicCheck API.
+
+---
+
+## Architecture Decisions
+
+- **State Management**: Pinia (replaces Vuex; first-class Vue 3 support)
+- **HTTP Client**: Axios with request/response interceptors for auth token injection and 401 refresh handling
+- **Component Library**: Vuetify 3 (already configured)
+- **Router**: Vue Router 4 (already configured)
+- **Testing**: Jest + Vue Test Utils (already configured)
+- **Code Style**: Composition API (`<script setup>`), TypeScript throughout
+
+### Context Model
+
+The app operates in a three-level context:
+1. **Organization** — selected at login/org-switcher; stored globally
+2. **Project** — selected via project switcher in nav; stored globally
+3. **Environment** — selected via environment dropdown in nav; stored globally
+
+All feature, segment, identity, and audit views are scoped to the current org/project/environment context.
+
+---
+
+## Chunk 1: Foundation — API Client, Auth & Stores
+
+### Goals
+Set up the core infrastructure that all subsequent chunks depend on: typed API client, Pinia stores, authentication flows, and route guards.
+
+### Tasks
+
+#### 1.1 Install Pinia
+- Add `pinia` to `package.json`
+- Register Pinia in `main.ts`
+
+#### 1.2 Typed API Client (`src/api/`)
+Create an `ApiClient` class using Axios:
+- Base URL configured from environment variable (`VITE_API_BASE_URL` or webpack `DefinePlugin`)
+- Request interceptor: inject `Authorization: Bearer <token>` for admin calls, or `X-Environment-Key` for flags API calls
+- Response interceptor: on 401, attempt token refresh via `POST /api/v1/auth/refresh`; on refresh failure, redirect to `/login`
+- Typed methods for each API domain (auth, organizations, projects, environments, features, featureStates, segments, tags, auditLogs, webhooks, identities, apiKeys)
+- All responses typed using TypeScript interfaces mirroring the API response models
+
+#### 1.3 Auth Store (`src/stores/auth.ts`)
+Pinia store with:
+- State: `user`, `accessToken`, `refreshToken`, `expiresAt`, `isAuthenticated`
+- Actions: `login(email, password)`, `register(...)`, `logout()`, `refreshToken()`, `loadFromStorage()`
+- Persist tokens to `localStorage`; restore on app init
+
+#### 1.4 Context Store (`src/stores/context.ts`)
+Pinia store with:
+- State: `currentOrganization`, `currentProject`, `currentEnvironment`
+- Actions: `setOrganization(org)`, `setProject(project)`, `setEnvironment(env)`
+- Persist selections to `localStorage`
+
+#### 1.5 Login & Register Views
+- `LoginView.vue`: email/password form → calls auth store `login()` → redirects to dashboard
+- `RegisterView.vue`: email, password, first name, last name, organization name → calls `register()` → redirects to dashboard
+- Both views displayed without the main `AppLayout` (full-page centered card)
+- Client-side validation with Vuetify's built-in form validation
+
+#### 1.6 Route Guards
+In `router/index.ts`:
+- `beforeEach` guard: if route requires auth and user is not authenticated, redirect to `/login`
+- If authenticated user navigates to `/login`, redirect to `/`
+- Mark public routes (`/login`, `/register`) with `meta: { public: true }`
+
+#### 1.7 Unit Tests
+- Auth store: login success, login failure, token refresh, logout
+- API client: interceptors, token injection, refresh on 401
+
+---
+
+## Chunk 2: Navigation & Context Selectors
+
+### Goals
+Build the main app shell with a context-aware navigation bar that allows switching between organizations, projects, and environments.
+
+### Tasks
+
+#### 2.1 Update `AppLayout.vue`
+- Left sidebar (Vuetify `v-navigation-drawer`) with:
+  - MicCheck logo at top
+  - Organization selector (dropdown showing org name)
+  - Project selector (dropdown scoped to selected org)
+  - Environment pill/tab selector (shows all environments for current project)
+  - Navigation links: Features, Segments, Identities, Audit Logs
+  - Bottom: Settings link
+- Top `v-app-bar` with:
+  - Page title / breadcrumb
+  - User name and avatar icon → `/profile`
+  - Gear icon → `/settings`
+
+#### 2.2 Organization Selector Component (`src/components/OrgSelector.vue`)
+- Fetches `GET /api/v1/organisations` on mount
+- Displays current org name as button; opens dropdown to switch
+- On select: updates context store, resets project and environment selection
+
+#### 2.3 Project Selector Component (`src/components/ProjectSelector.vue`)
+- Fetches `GET /api/v1/projects?organizationId=` when org changes
+- Displays current project name; opens dropdown to switch
+- On select: updates context store, resets environment selection
+
+#### 2.4 Environment Tab Bar Component (`src/components/EnvironmentTabBar.vue`)
+- Fetches `GET /api/v1/environments?projectId=` when project changes
+- Displays environments as tabs (Vuetify `v-tabs`)
+- Highlights selected environment; updates context store on click
+- "Add Environment" button at the end of the tabs
+
+#### 2.5 Empty States
+- If no organization: prompt to create one
+- If no project: prompt to create first project
+- If no environment: prompt to create first environment
+
+#### 2.6 Update Router
+Add routes:
+```
+/login          → LoginView (public)
+/register       → RegisterView (public)
+/               → DashboardView (auth required)
+/features       → FeaturesView (auth required)
+/segments       → SegmentsView (auth required)
+/identities     → IdentitiesView (auth required)
+/audit-logs     → AuditLogsView (auth required)
+/settings       → SettingsView (auth required)
+/profile        → ProfileView (auth required)
+```
+
+#### 2.7 Dashboard View
+Simple landing page showing:
+- Selected org/project/environment summary cards
+- Quick stats: number of features, segments, enabled flags in current environment
+- Links to main sections
+
+#### 2.8 Unit Tests
+- OrgSelector: loads orgs, emits selection
+- ProjectSelector: loads projects on org change
+- EnvironmentTabBar: loads envs, highlights selected, emits selection
+- Route guard: unauthenticated redirect, authenticated bypass
+
+---
+
+## Chunk 3: Feature Flags Management
+
+### Goals
+Full CRUD for features (project-level) and their per-environment states (toggle on/off, set value).
+
+### Tasks
+
+#### 3.1 Features List View (`FeaturesView.vue`)
+- Table/data-grid using Vuetify `v-data-table-server` with server-side pagination
+- Columns: Name, Type (STANDARD/MULTIVARIATE), Description, Default Enabled, Created At, Actions
+- Per-row toggle switch for the current environment's feature state (`PATCH /api/v1/environments/{apiKey}/featurestates/{id}`)
+- Search/filter by name
+- "Create Feature" button → opens dialog
+
+#### 3.2 Feature Create/Edit Dialog (`src/components/features/FeatureDialog.vue`)
+- Fields:
+  - **Name** (text input; validates `^[a-zA-Z0-9_-]+$`, max 150)
+  - **Type** (select: STANDARD / MULTIVARIATE)
+  - **Initial Value** (text area; shown for MULTIVARIATE; max 20,000 chars)
+  - **Description** (text area; optional)
+- On create: `POST /api/v1/projects/{projectId}/features`
+- On edit: `PUT /api/v1/projects/{projectId}/features/{id}` (name + description only)
+- On save: refresh feature list
+
+#### 3.3 Feature Detail Panel / Drawer (`src/components/features/FeatureDetail.vue`)
+Slide-out `v-navigation-drawer` or dialog opened on row click:
+- **Value tab**: 
+  - Toggle enabled/disabled for current environment (`PATCH featurestates/{id}`)
+  - Edit value field for current environment
+  - Tags chip display and management
+- **Settings tab**:
+  - Edit name and description
+  - `defaultEnabled` toggle (via PATCH feature)
+  - Danger zone: Delete feature (confirmation requiring re-type of flag name)
+
+#### 3.4 Tags Management (`src/components/features/TagsChipInput.vue`)
+- Inline chip input on feature forms
+- Autocomplete from `GET /api/v1/projects/{projectId}/tags`
+- Create new tag inline (label + color picker)
+- `POST /api/v1/projects/{projectId}/tags` on new tag
+- Delete unused tags via `DELETE /api/v1/projects/{projectId}/tags/{id}`
+
+#### 3.5 Feature State Value Editor (`src/components/features/FeatureValueEditor.vue`)
+- Detects value type (boolean/number/JSON/string) and renders appropriate input
+- JSON values get a code editor (simple `v-textarea` with monospace font)
+- Saves via `PUT /api/v1/environments/{apiKey}/featurestates/{id}`
+
+#### 3.6 Unit Tests
+- FeaturesView: renders list, pagination, toggle state
+- FeatureDialog: validation, create call, edit call
+- TagsChipInput: loads existing tags, creates new tag
+- FeatureDetail: tab switching, delete confirmation
+
+---
+
+## Chunk 4: Segments
+
+### Goals
+Full CRUD for project-level segments with a visual rule builder, and segment-level feature state overrides per environment.
+
+### Tasks
+
+#### 4.1 Segments List View (`SegmentsView.vue`)
+- Table: Name, Rule Count, Created At, Actions (Edit, Delete)
+- "Create Segment" button → opens Segment Editor
+- Delete with confirmation dialog
+
+#### 4.2 Segment Editor Dialog (`src/components/segments/SegmentEditor.vue`)
+Full-featured rule builder:
+- **Name** field
+- **Rules section**: List of rule groups (AND/OR type selector)
+  - Each rule group contains **Conditions**:
+    - Property (trait key, text input)
+    - Operator (select from: Equal, NotEqual, Contains, NotContains, Regex, GreaterThan, GreaterThanOrEqual, LessThan, LessThanOrEqual, IsTrue, IsFalse, In, NotIn, IsSet, IsNotSet, PercentageSplit)
+    - Value (text input; hidden for IsTrue/IsFalse/IsSet/IsNotSet operators; percentage slider for PercentageSplit)
+  - Add/remove conditions within a group
+  - Add/remove rule groups
+  - Nested child rules supported (recursive component)
+- On save: `POST` or `PUT /api/v1/projects/{projectId}/segments`
+- Constraint display: shows "X / 100 conditions used"
+
+#### 4.3 Segment Overrides on Features
+Within the Feature Detail drawer (Chunk 3):
+- **Overrides tab**: list of segments that have overrides for this feature in current environment
+  - Each override shows: Segment Name, Enabled toggle, Value
+  - "Add Segment Override" button → select segment from dropdown → configure enabled/value
+  - Saves via Feature State API (`featureSegmentId` populated)
+  - Delete override button
+
+#### 4.4 Unit Tests
+- SegmentsView: list, delete
+- SegmentEditor: rule builder add/remove conditions, add/remove groups, validation
+- Segment overrides: add, remove, toggle
+
+---
+
+## Chunk 5: Identities
+
+### Goals
+Admin view of identities in the current environment, with the ability to view traits and override feature states per identity.
+
+### Tasks
+
+#### 5.1 Identities List View (`IdentitiesView.vue`)
+- Server-side paginated table: Identifier, Trait Count, Created At, Actions
+- Search by identifier
+- Click row → Identity Detail
+
+#### 5.2 Identity Detail View (`src/components/identities/IdentityDetail.vue`)
+Slide-out panel or separate route `/identities/{id}`:
+- **Traits section**: 
+  - Table of key/value traits
+  - (Read-only in admin view; traits are set via SDK)
+- **Feature Overrides section**:
+  - Table of all features with current state for this identity
+  - Columns: Feature Name, Environment Default, Identity Override (toggle + value), Override Active
+  - "Add Override" — select feature → set enabled/value → `PUT /api/v1/environments/{apiKey}/identities/{id}/featurestates/{featureId}`
+  - "Remove Override" → `DELETE /api/v1/environments/{apiKey}/identities/{id}/featurestates/{featureId}`
+- **Danger Zone**: Delete identity (`DELETE /api/v1/environments/{apiKey}/identities/{id}`)
+
+#### 5.3 Unit Tests
+- IdentitiesView: pagination, search
+- IdentityDetail: traits display, override toggle, delete identity
+
+---
+
+## Chunk 6: Audit Logs & Webhooks
+
+### Goals
+Read-only audit log viewer with filtering and webhook management at organization and environment level.
+
+### Tasks
+
+#### 6.1 Audit Logs View (`AuditLogsView.vue`)
+Accessible from both org-level sidebar and within project/environment context:
+- Server-side paginated table:
+  - Columns: Timestamp, Actor, Action, Resource Type, Resource ID, Project, Environment
+  - The `changes` JSON field expandable inline (show diff)
+- Filters (Vuetify filter chips / inputs):
+  - Date range picker (start/end)
+  - Resource Type (multi-select: Feature, Environment, Segment, Identity, Organization, Project, ApiKey)
+  - Action (multi-select: Created, Updated, Deleted)
+- Scoped by current context: uses org/project/environment audit-logs endpoint appropriately
+
+#### 6.2 Webhooks Management (`src/components/settings/WebhooksPanel.vue`)
+Used in both Settings view (org-level) and Environment settings:
+- Table: URL (truncated), Enabled toggle, Created At, Actions
+- "Add Webhook" button → Webhook Dialog
+- Enabled toggle → `PUT` to update `enabled` field
+- Delete with confirmation
+
+#### 6.3 Webhook Dialog (`src/components/settings/WebhookDialog.vue`)
+- Fields: URL (required), Secret (optional, masked input), Enabled (toggle)
+- On create: `POST /api/v1/organisations/{id}/webhooks` or `POST /api/v1/environments/{apiKey}/webhooks`
+- On edit: `PUT`
+
+#### 6.4 Webhook Delivery History (`src/components/settings/WebhookDeliveryHistory.vue`)
+- Accessible via "View Deliveries" action on each webhook row
+- Table: Timestamp, Status (chip: Success/Failed/Pending), Attempt #, HTTP Response Code
+- `GET /api/v1/environments/{apiKey}/webhooks/{id}/deliveries`
+
+#### 6.5 Unit Tests
+- AuditLogsView: renders data, filter by resource type, filter by date range
+- WebhooksPanel: list, toggle enabled, delete
+- WebhookDialog: validation, create, edit
+- WebhookDeliveryHistory: renders statuses
+
+---
+
+## Chunk 7: Settings, Permissions & API Keys
+
+### Goals
+Organization settings, project-level user permissions, and API key management.
+
+### Tasks
+
+#### 7.1 Settings View (`SettingsView.vue`)
+Tabbed layout:
+
+**Tab: Organization**
+- Edit organization name → `PUT /api/v1/organisations/{id}`
+- Organization webhook management (reuse `WebhooksPanel` component from Chunk 6)
+- Audit log link (scoped to org)
+
+**Tab: Project**
+- Edit project name and `hideDisabledFlags` toggle → `PUT /api/v1/projects/{id}`
+- User Permissions table:
+  - Columns: User ID, Is Admin, Permissions (chips)
+  - "Add User" button → `POST /api/v1/projects/{id}/user-permissions`
+  - Edit permissions inline → `PUT /api/v1/projects/{id}/user-permissions/{userId}`
+  - Remove user → `DELETE /api/v1/projects/{id}/user-permissions/{userId}`
+  - Permission checkboxes: ViewProject, CreateFeature, EditFeature, DeleteFeature, CreateEnvironment, EditEnvironment, DeleteEnvironment, CreateSegment, EditSegment, DeleteSegment, ManageWebhooks, ViewAuditLog
+
+**Tab: Environments**
+- List of environments for current project
+- Create environment: name input → `POST /api/v1/environments`
+- Clone environment button → dialog asking for new name → `POST /api/v1/environments/{apiKey}/clone`
+- Rename environment → `PUT /api/v1/environments/{apiKey}`
+- Delete environment (with confirmation) → `DELETE`
+- Environment webhook management (reuse `WebhooksPanel`)
+
+**Tab: API Keys**
+- Table: Name, Prefix (e.g. `org-key-ab`), Active, Expires At, Created At, Actions (Delete)
+- "Create API Key" button → dialog:
+  - Name field (required)
+  - Expiry date picker (optional)
+  - `POST /api/v1/organisations/{id}/api-keys`
+  - On success: show `rawKey` once in a copy-to-clipboard dialog with warning "This will not be shown again"
+- Delete key → `DELETE`
+
+#### 7.2 Profile View (`ProfileView.vue`)
+- Display name and email (read-only for now; no user update endpoint exists in current API)
+- Logout button → calls auth store `logout()` → redirect to `/login`
+- Display current organization memberships
+
+#### 7.3 Organization Members Panel
+In Organization tab:
+- List members: `GET /api/v1/organisations/{id}/users` → table of userId + role
+- Invite user: `POST /api/v1/organisations/{id}/users/invite` (userId + role)
+- Remove member: `DELETE /api/v1/organisations/{id}/users/{userId}`
+
+#### 7.4 Unit Tests
+- API key creation: shows raw key once, copy to clipboard
+- Permission editor: checkboxes update correctly, admin flag overrides individual permissions
+- Environment settings: clone, rename, delete
+- Profile: logout flow
+
+---
+
+## Shared Components & Utilities
+
+### `src/components/common/`
+- `ConfirmDialog.vue` — reusable confirm dialog (message, confirm label, danger variant)
+- `PaginatedTable.vue` — wraps `v-data-table-server` with standard pagination controls
+- `CopyTextField.vue` — input with copy-to-clipboard button (used for API keys, env keys)
+- `StatusChip.vue` — colored chip for Success/Failed/Pending/Enabled/Disabled
+- `DateRangePicker.vue` — reusable date range filter input
+- `EmptyState.vue` — centered icon + message + action button for empty lists
+
+### `src/composables/`
+- `usePagination.ts` — manages page/pageSize state and server-side data fetching
+- `useConfirm.ts` — returns a promise-based confirm dialog trigger
+- `useNotifications.ts` — wraps Vuetify `v-snackbar` for success/error toasts
+
+### `src/types/api.ts`
+Complete TypeScript interfaces for all API response and request models.
+
+---
+
+## File Structure Target
+
+```
+src/admin/src/
+├── api/
+│   ├── client.ts              # Axios instance + interceptors
+│   ├── auth.ts
+│   ├── organizations.ts
+│   ├── projects.ts
+│   ├── environments.ts
+│   ├── features.ts
+│   ├── featureStates.ts
+│   ├── segments.ts
+│   ├── tags.ts
+│   ├── identities.ts
+│   ├── auditLogs.ts
+│   ├── webhooks.ts
+│   └── apiKeys.ts
+├── stores/
+│   ├── auth.ts
+│   └── context.ts
+├── types/
+│   └── api.ts
+├── composables/
+│   ├── usePagination.ts
+│   ├── useConfirm.ts
+│   └── useNotifications.ts
+├── components/
+│   ├── common/
+│   │   ├── ConfirmDialog.vue
+│   │   ├── PaginatedTable.vue
+│   │   ├── CopyTextField.vue
+│   │   ├── StatusChip.vue
+│   │   ├── DateRangePicker.vue
+│   │   └── EmptyState.vue
+│   ├── nav/
+│   │   ├── OrgSelector.vue
+│   │   ├── ProjectSelector.vue
+│   │   └── EnvironmentTabBar.vue
+│   ├── features/
+│   │   ├── FeatureDialog.vue
+│   │   ├── FeatureDetail.vue
+│   │   ├── FeatureValueEditor.vue
+│   │   └── TagsChipInput.vue
+│   ├── segments/
+│   │   ├── SegmentEditor.vue
+│   │   ├── RuleGroupEditor.vue
+│   │   └── ConditionEditor.vue
+│   ├── identities/
+│   │   └── IdentityDetail.vue
+│   └── settings/
+│       ├── WebhooksPanel.vue
+│       ├── WebhookDialog.vue
+│       ├── WebhookDeliveryHistory.vue
+│       └── PermissionsEditor.vue
+├── views/
+│   ├── LoginView.vue
+│   ├── RegisterView.vue
+│   ├── DashboardView.vue
+│   ├── FeaturesView.vue
+│   ├── SegmentsView.vue
+│   ├── IdentitiesView.vue
+│   ├── AuditLogsView.vue
+│   ├── SettingsView.vue
+│   └── ProfileView.vue
+├── plugins/
+│   └── vuetify.ts
+├── router/
+│   └── index.ts
+├── App.vue
+└── main.ts
+```
+
+---
+
+## Build Order Summary
+
+| Chunk | Description | Depends On |
+|-------|-------------|------------|
+| 1 | Foundation: API client, Auth, Pinia stores, Login/Register | — |
+| 2 | Navigation, context selectors, route guards, Dashboard | Chunk 1 |
+| 3 | Feature Flags (list, CRUD, env state toggles, tags) | Chunk 2 |
+| 4 | Segments (list, rule builder, overrides) | Chunk 3 |
+| 5 | Identities (list, detail, per-identity overrides) | Chunk 3 |
+| 6 | Audit Logs & Webhooks | Chunk 2 |
+| 7 | Settings, Permissions, API Keys, Profile | Chunk 2 |
+
+Each chunk can be built and committed independently after Chunk 2 is complete.

docs/api/07_audit_and_webhooks_output.md

@@ -0,0 +1,81 @@
+# Step 7 Output: Audit Logging & Webhooks
+
+## Summary
+
+Implemented the full audit logging and webhook system for MicCheck.
+
+## What Was Built
+
+### Audit Logging
+
+- **`AuditService`** — `RecordAsync` captures before/after state as `{"before":{...},"after":{...}}` JSON in `AuditLog.Changes`. Serializes with `System.Text.Json` (camelCase). Enqueues `AUDIT_LOG_CREATED` webhook event after persisting. Methods are `virtual` for Moq compatibility.
+- **`AuditLogQueryService`** — Separate query service with `ListByOrganizationAsync`, `ListByProjectAsync`, and `ListByEnvironmentAsync`. All return `(int Total, IReadOnlyList<AuditLog> Items)` tuples. Filtering via `AuditLogFilter` record (date range, resource type, action, project/environment/actor).
+- **`AuditLogFilter`** — Record with optional filter fields and pagination (`Page`, `PageSize`).
+- **`AuditLogsController`** — Updated to accept `[FromQuery] AuditLogFilter` and return `PaginatedResponse<AuditLogResponse>`.
+- **`EnvironmentsController`** — Added `GET /{apiKey}/audit-logs` endpoint.
+
+### Webhooks
+
+- **`WebhookEvent`** / **`WebhookEventTypes`** — Event model with `EventType`, `EnvironmentId`, `OrganizationId`, `Data`. Three event types: `FLAG_UPDATED`, `FLAG_DELETED`, `AUDIT_LOG_CREATED`.
+- **`WebhookPayload`** — Snake_case serialized payload with `data` and `event_type` fields. Nested records: `FlagUpdatedData`, `FlagDeletedData`, `FlagStateSnapshot`, `FeatureSummary`, `EnvironmentSummary`.
+- **`WebhookQueue`** — Singleton `System.Threading.Channels`-backed queue. `EnqueueAsync` is non-blocking; `ReadAllAsync` consumed by background service.
+- **`WebhookDispatcher`** — Scoped service. Finds active webhooks by environment + org scope, serializes payload, signs with HMAC-SHA256 (`X-Flagsmith-Signature: sha256=<hex>`), POSTs with 10s timeout via `IHttpClientFactory`, logs `WebhookDeliveryLog` with `AttemptNumber`.
+- **`WebhookBackgroundService`** — `BackgroundService` reading from queue, dispatching via scoped `WebhookDispatcher`.
+- **`WebhookRetryBackgroundService`** — Polls every 60s. Retries failed deliveries: attempt 1→2 after 5 min, 2→3 after 30 min, max 3 total.
+- **`WebhookDeliveryLog`** — Added `AttemptNumber` property.
+- **`WebhookService`** — Added `ListByOrganizationAsync`, `CreateForOrganizationAsync`, `ListDeliveriesAsync`.
+- **`WebhookDeliveryLogResponse`** — New response DTO.
+
+### Admin Endpoints Added
+
+```
+GET    /api/v1/environments/{apiKey}/webhooks/{id}/deliveries
+GET    /api/v1/organisations/{id}/webhooks
+POST   /api/v1/organisations/{id}/webhooks
+PUT    /api/v1/organisations/{id}/webhooks/{id}
+DELETE /api/v1/organisations/{id}/webhooks/{id}
+```
+
+### Service Updates
+
+- **`FeatureService`** — Constructor now takes `WebhookQueue`. `DeleteAsync` fires `FLAG_DELETED` events per environment. `RecordAsync` used with before/after.
+- **`FeatureStateService`** — Constructor now takes `WebhookQueue` and `AuditService`. `UpdateAsync` and `PatchAsync` capture before state and dispatch `FLAG_UPDATED` + audit record.
+
+### Program.cs
+
+Added registrations:
+- `WebhookDispatcher` (scoped)
+- `WebhookQueue` (singleton)
+- `WebhookBackgroundService` (hosted)
+- `WebhookRetryBackgroundService` (hosted)
+- `AddHttpClient("Webhooks")` with `User-Agent` header
+- `JsonStringEnumConverter` for string enum deserialization
+- `ApiBehaviorOptions` for 422 validation error format
+
+### Migration
+
+Added `AddWebhookDeliveryAttemptNumber` migration for the new `AttemptNumber` column on `WebhookDeliveryLog`.
+
+## Tests Added
+
+| File | Tests |
+|------|-------|
+| `Audit/AuditServiceTests.cs` | 5 — null changes, after-only diff, before+after diff, metadata persistence, webhook event enqueued |
+| `Webhooks/WebhookDispatcherTests.cs` | 6 — signature computation, delivery without webhooks, delivery logging |
+| `Webhooks/WebhookRetryTests.cs` | 4 — retry delay values, max attempts, eligibility |
+
+**Total: 166 tests passing.**
+
+## Acceptance Criteria Status
+
+- [x] Every create/update/delete in the Admin API produces an `AuditLog` record
+- [x] Audit logs correctly capture before/after state for updates
+- [x] `GET /api/v1/organisations/{id}/audit-logs/` returns paginated, filtered results
+- [x] Audit controllers map `AuditLog` domain objects to `AuditLogResponse` DTOs
+- [x] Webhooks fire within 1 second of a flag state change (async via Channel)
+- [x] HMAC-SHA256 signature is correct and verifiable by receivers
+- [x] Failed webhook deliveries are logged with status code and response body
+- [x] Retry logic attempts delivery 3 times with backoff (5 min, 30 min)
+- [x] Webhook delivery does not block the API response (fire-and-forget via `WebhookQueue`)
+- [x] Unit tests cover: signature computation, payload serialization, retry scheduling
+- [x] Unit tests cover: audit diff generation for create/update/delete scenarios

docs/plans/api/integration-smoke_output.md

@@ -0,0 +1,46 @@
+# Integration + Playwright smoke suite — implementation summary
+
+Implemented per `integration-smoke_plan.md`. All chunks built, verified against a real local Postgres + API + Vite stack, and the two pre-existing test suites (243 API unit tests, 306 admin Jest tests) still pass.
+
+## Chunk A — Deterministic dev/QA seed admin user + fixed env key
+- `src/api/MicCheck.Api/Data/DatabaseSeeder.cs`: now also creates a seed admin user (`admin@miccheck.local` / `MicCheckQa!2026`, Admin role on the `Default` org) and gives the seeded `Development` environment a fixed API key (`env-qa-development`). Still gated behind `IsDevelopment()` in `Program.cs` and the existing idempotency guard.
+- New unit tests: `tests/api/MicCheck.Api.Tests.Unit/Data/DatabaseSeederTests.cs` (5 tests).
+- Verified live: booted the API against local Postgres, logged in via `POST /api/v1/auth/login` with the seed creds (200 + tokens), and read `/api/v1/flags` with the fixed Development key (200, empty array as expected).
+
+## Chunk B — Expanded API integration suite
+Added to `tests/api/MicCheck.Api.Tests.Integration`, reusing the existing black-box HTTP+Npgsql harness:
+- `Flags/FlagDisabledTests.cs` — disabled-flag variant of the existing enabled test.
+- `Flags/FlagsApiAuthorizationTests.cs` — missing/unknown environment key → 401.
+- `Environments/EnvironmentDocumentTests.cs` + `HttpFiles/EnvironmentDocument.http` — SDK bootstrap document endpoint.
+- `Identities/IdentityOverrideSeed.cs` + `Identities/IdentityOverrideTests.cs` + `HttpFiles/Identity.http` — identity-override-beats-environment-default precedence.
+- `Auth/AuthSeed.cs` + `Auth/AuthTests.cs` + `HttpFiles/Auth.http` — login liveness (valid creds → tokens, bad password → 401). Added `Microsoft.Extensions.Identity.Core` package reference so the seed can hash a password with the same `PasswordHasher<T>` the API uses, without a `ProjectReference` to the API (kept the black-box convention).
+- Fixed a latent substring bug (`[..40]` on a string shorter than 40 chars) copied into the new seeds; left the pre-existing `FlagSeed.cs` alone since none of its callers hit the short-string case.
+- Verified live: all 8 tests pass against a real Postgres + `dotnet run` API (`dotnet test ... --logger "console;verbosity=normal"` → 8/8 passed).
+
+## Chunk C — Playwright admin e2e suite
+New `src/admin/e2e/` (kept out of Jest's `roots`/`testMatch`, no config change needed since `e2e/` isn't under `src/` or `tests/`):
+- `playwright.config.ts`, `e2e/global-setup.ts` (logs in once via the real `/login` form with the seed creds, saves `storageState`).
+- `e2e/login.e2e.ts`, `e2e/navigation.e2e.ts`, `e2e/context-selection.e2e.ts`, `e2e/features.e2e.ts` (view, create, toggle).
+- `package.json`: added `@playwright/test` devDependency and `e2e` / `e2e:install` scripts.
+- Two bugs found and fixed while running against the real app: sidebar nav items are clickable `div`s, not `<a>` links (fixed the locator); a newly-created feature's toggle was clicked before its feature-state fetch settled, causing Vuetify's switch to visually revert (added a `waitForLoadState('networkidle')`).
+- Verified live: all 6 tests pass against the real Vite dev server + local API (`npx playwright test` → 6/6 passed).
+
+## Chunk D — CI post-deploy smoke job
+- `deploy/qa/docker-compose.qa.yml`: bound Postgres to `127.0.0.1:55432` on the QA host so the integration harness can seed/clean directly (off-box still unreachable).
+- `scripts/ci/smoke-qa.sh` (new): runs the API integration suite and the Playwright suite against `http://localhost:${QA_ADMIN_PORT}`.
+- `scripts/ci/lib.sh`: added `ensure_node()` (mirrors `ensure_dotnet()`) — **the self-hosted `qa` runner has no Node.js today** (confirmed by the existing "avoid actions/checkout, it's Node-based" comment in `deploy-qa.sh`), so `smoke-qa.sh` needed a way to bootstrap `npm`/`npx` the same way it already bootstraps `dotnet`.
+- `.github/workflows/ci.yml`: new `smoke-qa` job, `needs: deploy-qa`, runs on `[self-hosted, qa]`, checks out via plain git (matching `deploy-qa`), runs `smoke-qa.sh`.
+
+### Known follow-up risk (not resolved, flagging for the user)
+`npm run e2e:install` runs `playwright install --with-deps chromium`, which needs root/passwordless-sudo to apt-install browser OS dependencies. This could not be verified against the actual self-hosted `qa` runner (only tested locally, where `--with-deps` failed for lack of a sudo TTY — the browser itself still installed fine and tests ran). If the `qa` runner also lacks passwordless sudo, the first CI run of `smoke-qa` may fail on that step; the fix would be a one-time manual `sudo npx playwright install-deps chromium` on the runner, or granting the CI user passwordless sudo for that command.
+
+## Verification performed this session
+- `dotnet test tests/api/MicCheck.Api.Tests.Unit` — 243/243 passed.
+- `dotnet test tests/api/MicCheck.Api.Tests.Integration` against real local Postgres + API — 8/8 passed.
+- `npm --prefix src/admin test` (Jest) — 306/306 passed, 28 suites, no collision with `e2e/`.
+- `npx playwright test` (from `src/admin`) against real local Vite dev server + API — 6/6 passed.
+- `docker compose -f deploy/qa/docker-compose.qa.yml config` — valid.
+- `bash -n` on `smoke-qa.sh` and `lib.sh` — valid.
+
+## Not yet done
+- The `smoke-qa` CI job has not run on the actual self-hosted `qa` runner (no access to it from this session) — first real run should be watched, especially the Node bootstrap and the Playwright OS-deps risk above.

docs/plans/api/integration-smoke_plan.md

@@ -0,0 +1,75 @@
+# Plan: Integration + Playwright smoke suite that doubles as post-deploy QA validation
+
+## Context
+
+Today the repo has **one** integration test (`FlagEnabledTests` — seeds an enabled flag in Postgres, hits `GET /api/v1/flags`, asserts enabled) and **zero** browser/e2e tests. Unit coverage is already deep for the risky logic — flag/feature evaluation, segment evaluation (28 tests), webhooks, auth token/API-key/permission logic, audit. Per the 80–90% unit / 10–20% integration rule, we do **not** re-test that logic at integration. Instead we add a thin layer covering the **most important, most visible, real-Postgres-backed** flows that unit tests (all InMemory EF) cannot prove, and wire it to run **after `deploy-qa`** so every QA deploy is validated end-to-end.
+
+Decisions locked with the user:
+- **E2E hits the real deployed stack** (not mocked) — `http://localhost:${QA_ADMIN_PORT}` in CI, `http://localhost:5173` local dev.
+- **Add a fixed dev/QA seed admin user** (QA DB is wiped `down -v` each deploy and reseeded on startup; seeding is already `IsDevelopment()`-guarded and QA runs `ASPNETCORE_ENVIRONMENT=Development`).
+- **Add a post-deploy `smoke-qa` CI job** running the API integration suite + Playwright against QA.
+
+Key constraints discovered:
+- Integration harness is **black-box**: HTTP to a running API + **direct Npgsql** seed/cleanup (`Common/TestDatabase.cs`). It spins nothing up; needs a live API **and** direct DB reachability.
+- QA compose (`deploy/qa/docker-compose.qa.yml`) publishes **only** the admin port; API + Postgres are network-internal. The smoke job runs on the **same self-hosted `qa` host** (localhost). So the DB port must be reachable from the host for direct seeding → publish Postgres bound to `127.0.0.1` on the QA host.
+- `/health` + `/alive` + Scalar/OpenAPI are **Development-only** (`ServiceDefaults/Extensions.cs:113`). QA is Development so `/health` works there, but smoke assertions should lean on real auth/flag reads, not `/health`.
+- Seeder (`Data/DatabaseSeeder.cs`) currently creates Org → Project → 3 Environments with **random** `env-{guid}` API keys and **no user**. For HTTP-only smoke we make the admin user + one env key **deterministic**.
+
+## Implementation — 4 independently buildable/committable chunks
+
+### Chunk A — Deterministic dev/QA seed admin user + fixed env key
+Files: `src/api/MicCheck.Api/Data/DatabaseSeeder.cs`, unit test in `tests/api/MicCheck.Api.Tests.Unit/Data/`.
+
+- Inject `IPasswordHasher<User>` into `DatabaseSeeder` (mirror `AuthService.RegisterAsync` at `Common/Security/Authorization/AuthService.cs:54-82`: create `User{ IsActive=true, PasswordHash=hasher.HashPassword(...) }`, then `OrganizationUser{ Role=OrganizationRole.Admin }` linking it to the seeded `Default` org).
+  - Creds: `admin@miccheck.local` / `MicCheckQa!2026` (login verify has no complexity rule, so any value works; keep it in one shared constants spot referenced by tests).
+- Give the seeded **Development** environment a **deterministic** `ApiKey` (e.g. `env-qa-development`) instead of a random guid; leave Staging/Production random. Lets HTTP-only smoke read `/flags` with a known key without direct DB access.
+- Keep the existing `if (Organizations.AnyAsync) return;` idempotency guard — user + env are created in the same first-run block. No prod risk: invocation is already gated by `app.Environment.IsDevelopment()` (`Program.cs:160-166`).
+- Unit test: seed against InMemory EF twice → asserts admin user exists once, is Admin on Default org, password verifies, Development env key is the fixed value.
+
+### Chunk B — Expand API integration suite (`tests/api/MicCheck.Api.Tests.Integration`)
+Reuse the existing harness verbatim: `Common/FlagApiHttpClient.cs` (drives `###`-delimited `.http` files with `{{var}}` substitution), `Common/TestDatabase.cs` (Npgsql seed/cleanup + `SnapshotRowsAsync` for failure dumps), `Common/IntegrationTestSettings.cs` (env-var / `.runsettings` config), and the `FlagSeed` INSERT…RETURNING + cascade-delete-by-Organization pattern (`Flags/FlagSeed.cs`). Keep DTOs redefined locally (no `ProjectReference` to the API) per the current convention. New `.http` files under `HttpFiles/` are auto-copied (`csproj` `CopyToOutputDirectory=PreserveNewest`).
+
+Add these high-value scenarios (each the real Postgres wire contract, not re-covered logic):
+1. **Flag disabled** — seed `Enabled=false`; assert `/flags` reports the feature `Enabled=false` (complements the existing enabled test; cheap variant of `FlagSeed`).
+2. **Environment-document bootstrap** — new `HttpFiles/EnvironmentDocument.http` (`GET /api/v1/environment-document`, `X-Environment-Key`); assert 200 and the seeded feature state + project segment are present (shape: `Environments/EnvironmentDocumentResponse.cs`). This is the edge/client-SDK bootstrap path — high blast radius, untested.
+3. **Identity override precedence** — new seed adding an identity-override FeatureState (and/or a segment override) + `HttpFiles/Identity.http` (`POST /api/v1/identity` with identifier, `X-Environment-Key`); assert the evaluated value reflects identity > segment > env-default precedence (`Features/FeatureEvaluationService.cs:43-146`). Richest runtime logic against real data.
+4. **Auth liveness** — new `HttpFiles/Auth.http` (`POST /api/v1/auth/login`): bad creds → 401; the deterministic seed creds → 200 + tokens. Proves app + DB + auth are up without depending on `/health`.
+5. **Unauthorized guard** — `GET /api/v1/flags` with no / wrong `X-Environment-Key` → 401 (validates `EnvironmentKeyAuthenticationHandler`).
+
+### Chunk C — Playwright admin e2e suite (new)
+Location `src/admin/e2e/` (distinct from Jest, which grabs `*.spec.ts` under `tests/`; name specs `*.e2e.ts` and set Jest `roots`/Playwright `testDir` so they never collide). Add dev deps `@playwright/test`, a `playwright.config.ts` (`testDir: 'e2e'`, `baseURL: process.env.E2E_BASE_URL ?? 'http://localhost:5173'`, chromium project, `globalSetup` for auth). Add `package.json` scripts: `"e2e": "playwright test"`, `"e2e:install": "playwright install --with-deps chromium"`.
+
+The app is already richly instrumented with `data-testid` — drive real UI, no selectors guesswork. Auth: `globalSetup` logs in once via the real `/login` form (`login-form`/`email-input`/`password-input`/`login-submit`) with the Chunk-A seed creds and saves `storageState` for reuse.
+
+Journeys (ordered most→least important; the seed provides `Default` org, `My Project`, and `Development/Staging/Production` envs, so context is selectable without creating anything):
+1. **Login** — valid creds redirect off `/login`; invalid creds surface `login-error` (`views/LoginView.vue`).
+2. **App shell + nav** — sidebar renders and routes (Dashboard/Features/Segments/Identities/Audit Logs/Settings) navigate (`layouts/components/NavItems.vue`).
+3. **Select project + environment context** — `project-selector`/`project-select` + `environment-tab-bar`/`env-select` (`components/nav/ProjectSelector.vue`, `EnvironmentTabBar.vue`); required before feature screens work (context persists to localStorage via `stores/context.ts`).
+4. **View feature flags** — `features-table` renders for the selected project (`views/FeaturesView.vue`).
+5. **Create a feature flag** — `create-feature-btn` → `FeatureDialog` (`feature-name-input`, `feature-type-select`, `feature-dialog-save`) → row appears (`components/features/FeatureDialog.vue`, API `api/features.ts`). Exercises full write path to real DB.
+6. **Toggle a feature flag** — row switch `toggle-${id}` (or `feature-enabled-toggle` in `FeatureDetail.vue`); reload → state persisted (validates `api/featureStates.ts` → real Postgres).
+
+Secondary/optional (add if cheap): create project, create environment via the sidebar dialogs.
+
+### Chunk D — CI post-deploy smoke job
+Files: `deploy/qa/docker-compose.qa.yml`, `scripts/ci/smoke-qa.sh` (new), `.github/workflows/ci.yml`.
+
+- **DB reachability**: add `ports: ["127.0.0.1:55432:5432"]` to the `db` service in the QA compose (localhost-bound only — the runner host is the sole consumer; not exposed off-box). Lets the integration harness seed Postgres directly.
+- New `scripts/ci/smoke-qa.sh` (matches the repo's "every CI step is a reproducible script" convention):
+  - API integration: `dotnet test tests/api/MicCheck.Api.Tests.Integration -c Release --logger trx` with env `MICCHECK_API_BASE_URL=http://localhost:${QA_ADMIN_PORT}` and `MICCHECK_DB_CONNECTION_STRING=Host=localhost;Port=55432;Database=miccheck;Username=miccheck;Password=password`.
+  - Playwright: `npm --prefix src/admin ci` (or reuse install), `npm --prefix src/admin run e2e:install`, then `E2E_BASE_URL=http://localhost:${QA_ADMIN_PORT} npm --prefix src/admin run e2e`.
+- `.github/workflows/ci.yml`: add job `smoke-qa` (`needs: deploy-qa`, `runs-on: [self-hosted, qa]`, env `QA_ADMIN_PORT: ${{ vars.QA_ADMIN_PORT }}`) that checks out (plain-git step, matching `deploy-qa`) and runs `./scripts/ci/smoke-qa.sh`. Deploy is now gated by real end-to-end validation.
+
+## Files touched (summary)
+- Modify: `src/api/MicCheck.Api/Data/DatabaseSeeder.cs`, `deploy/qa/docker-compose.qa.yml`, `.github/workflows/ci.yml`, `src/admin/package.json`.
+- Add (API tests): `HttpFiles/EnvironmentDocument.http`, `HttpFiles/Identity.http`, `HttpFiles/Auth.http`, new `*Tests.cs` + seed helpers under `Flags/` (or a new `Identities/`, `Environments/`, `Auth/` folder) in `tests/api/MicCheck.Api.Tests.Integration`.
+- Add (unit): seeder test under `tests/api/MicCheck.Api.Tests.Unit/Data/`.
+- Add (e2e): `src/admin/playwright.config.ts`, `src/admin/e2e/*.e2e.ts`, `src/admin/e2e/global-setup.ts`.
+- Add (CI): `scripts/ci/smoke-qa.sh`.
+- Per CLAUDE.md, also drop this plan at `docs/plans/api/integration-smoke_plan.md` and an `_output.md` summary after implementation.
+
+## Verification
+- **Chunk A**: `dotnet test tests/api/MicCheck.Api.Tests.Unit` (new seeder test green). Boot API locally (`docker compose up`), confirm login with seed creds returns tokens and the Development env key equals the fixed value.
+- **Chunk B**: bring up local stack (Postgres on `:5432`, API on `:5000`), `dotnet test tests/api/MicCheck.Api.Tests.Integration --settings local.runsettings` — all new scenarios green; failure messages show live DB snapshots.
+- **Chunk C**: `npm --prefix src/admin run serve` (API on :5000), `E2E_BASE_URL=http://localhost:5173 npm --prefix src/admin run e2e` — all journeys pass headed and headless.
+- **Chunk D**: push to `build-runner-fix`; watch CI — `smoke-qa` runs after `deploy-qa`, both `dotnet test` and Playwright green against `http://localhost:${QA_ADMIN_PORT}`. Confirm a deliberately-broken deploy (e.g. bad DB creds) makes `smoke-qa` fail.

dotnet-tools.json

@@ -0,0 +1,13 @@
+{
+  "version": 1,
+  "isRoot": true,
+  "tools": {
+    "dotnet-ef": {
+      "version": "10.0.5",
+      "commands": [
+        "dotnet-ef"
+      ],
+      "rollForward": false
+    }
+  }
+}

package-lock.json

@@ -0,0 +1,28 @@
+{
+  "name": "mic-check",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "mic-check",
+      "devDependencies": {
+        "husky": "^9.1.7"
+      }
+    },
+    "node_modules/husky": {
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
+      "integrity": "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==",
+      "dev": true,
+      "bin": {
+        "husky": "bin.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,11 @@
+{
+  "name": "mic-check",
+  "private": true,
+  "description": "Repo-root package - hosts the Husky pre-push hook only.",
+  "scripts": {
+    "prepare": "husky"
+  },
+  "devDependencies": {
+    "husky": "^9.1.7"
+  }
+}

readme.md

@@ -0,0 +1,47 @@
+# MicCheck
+
+[![GitHub CI](https://github.com/wamplerj/mic-check/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/wamplerj/mic-check/actions/workflows/ci.yml)
+[![Gitea CI](https://git.wampler.us/wamplerj/mic-check/actions/workflows/ci.yml/badge.svg?branch=main)](https://git.wampler.us/wamplerj/mic-check/actions?workflow=ci.yml)
+![Coverage](badges/coverage.svg)
+
+Open source feature flag management platform. Manage projects, environments, feature flags, segments, and identities across your apps.
+
+Built with .NET (API) and Vue.js + Vuetify (admin UI).
+
+## Structure
+
+```
+src/
+  api/MicCheck.Api/        .NET API — REST endpoints, organized by feature (Features, Projects, Environments,
+                            Segments, Identities, Organizations, Webhooks, Audit, Users)
+  admin/                    Vue.js + Vuetify admin SPA
+  MicCheck.AppHost/         .NET Aspire orchestration host for local dev
+  MicCheck.ServiceDefaults/ Shared .NET Aspire service defaults (telemetry, health checks)
+tests/
+  api/MicCheck.Api.Tests.Unit/         Unit tests
+  api/MicCheck.Api.Tests.Integration/  Integration tests
+docs/
+  admin/                    Admin implementation plans/output docs
+  api/                      API implementation plans/output docs
+```
+
+Code in the API is organized by feature area (e.g. `Features`, `Segments`, `Identities`) rather than by technical layer.
+
+## Running locally
+
+`MicCheck.AppHost` (.NET Aspire) orchestrates the API, admin app, and supporting services for local development.
+
+```sh
+./dev-build.sh
+aspire run --project src/MicCheck.AppHost
+```
+
+## Testing
+
+```sh
+dotnet test
+```
+
+## License
+
+MIT — see [LICENSE](LICENSE).

scripts/ci/build.sh

@@ -0,0 +1,20 @@
+#!/usr/bin/env bash
+# Compiles the API (and its dependents) and builds the admin SPA.
+# Acts as the compile gate before tests/image builds run. TreatWarningsAsErrors
+# is enabled across the solution, so this also fails on any compiler warning.
+set -euo pipefail
+cd "$(dirname "${BASH_SOURCE[0]}")" && source ./lib.sh
+cd "$CI_ROOT"
+
+ensure_dotnet
+
+log "Restoring and publishing MicCheck.Api (Release)"
+dotnet publish src/api/MicCheck.Api/MicCheck.Api.csproj -c Release
+
+log "Installing admin dependencies (npm ci)"
+npm --prefix src/admin ci
+
+log "Building admin SPA (vite build)"
+npm --prefix src/admin run build
+
+log "build.sh complete"

scripts/ci/coverage.sh

@@ -0,0 +1,32 @@
+#!/usr/bin/env bash
+# Merges the .NET (coverlet/Cobertura) and admin (Jest/lcov) coverage output
+# produced by test.sh into one report via reportgenerator, prints a summary,
+# appends a build-report summary when running under Actions, and refreshes
+# the coverage badge committed at badges/coverage.svg. Readme embeds that
+# badge via a relative path, which resolves on both GitHub and Gitea since
+# the same repo content is pushed to both remotes.
+set -euo pipefail
+cd "$(dirname "${BASH_SOURCE[0]}")" && source ./lib.sh
+cd "$CI_ROOT"
+
+ensure_dotnet
+ensure_reportgenerator
+
+REPORT_DIR="$CI_ROOT/coverage/report"
+
+log "Merging coverage reports with reportgenerator"
+reportgenerator \
+  -reports:"coverage/dotnet/**/coverage.cobertura.xml;src/admin/coverage/lcov.info" \
+  -targetdir:"$REPORT_DIR" \
+  -reporttypes:"Badges;MarkdownSummaryGithub;TextSummary"
+
+cat "$REPORT_DIR/Summary.txt"
+
+if [[ -n "${GITHUB_STEP_SUMMARY:-}" ]]; then
+  cat "$REPORT_DIR/SummaryGithub.md" >> "$GITHUB_STEP_SUMMARY"
+fi
+
+mkdir -p "$CI_ROOT/badges"
+cp "$REPORT_DIR/badge_linecoverage.svg" "$CI_ROOT/badges/coverage.svg"
+
+log "coverage.sh complete"

scripts/ci/deploy-qa.sh

@@ -0,0 +1,49 @@
+#!/usr/bin/env bash
+# Deploys the freshly-pushed :qa images to the dedicated, network-isolated QA
+# stack and recreates the miccheck database in an empty state. Safe/idempotent
+# to re-run: `down -v` removes the Postgres data volume, and the API's own
+# startup logic (EF Core migrations + idempotent dev seeding) rebuilds it.
+set -euo pipefail
+cd "$(dirname "${BASH_SOURCE[0]}")" && source ./lib.sh
+cd "$CI_ROOT"
+image_names
+registry_login
+
+export API_IMAGE ADMIN_IMAGE
+export JWT_SECRET_KEY="${JWT_SECRET_KEY:?JWT_SECRET_KEY env var is required}"
+export POSTGRES_PASSWORD="${POSTGRES_PASSWORD:?POSTGRES_PASSWORD env var is required}"
+export QA_ADMIN_PORT="${QA_ADMIN_PORT:-3001}"
+
+# Bind narrowly to docker's bridge gateway IP rather than 0.0.0.0: reachable
+# from the smoke-qa job container (a sibling on the default bridge), but not
+# exposed on the host's public interface.
+export DB_BIND_HOST="$(docker_bridge_gateway)"
+[[ -n "$DB_BIND_HOST" ]] || fail "could not determine docker bridge gateway IP to bind the QA db port"
+
+COMPOSE="docker compose -p miccheck-qa -f deploy/qa/docker-compose.qa.yml"
+
+log "Pulling latest :qa images"
+$COMPOSE pull
+
+log "Tearing down existing QA stack and wiping the database volume"
+$COMPOSE down -v
+
+log "Starting QA stack"
+$COMPOSE up -d
+
+log "Waiting for API health check via admin proxy"
+# Checked with `docker compose exec` rather than curling the published host
+# port: CI runs this script inside a runner container on its own bridge
+# network, where "localhost:$QA_ADMIN_PORT" is the runner's own loopback, not
+# the docker host's - it can never reach a host-published port. Exec'ing into
+# the admin container and curling its own localhost sidesteps that entirely.
+attempts=30
+until $COMPOSE exec -T admin curl -fsS http://localhost/health >/dev/null 2>&1; do
+  attempts=$((attempts - 1))
+  if [[ "$attempts" -le 0 ]]; then
+    fail "QA stack did not become healthy in time"
+  fi
+  sleep 2
+done
+
+log "QA environment deployed and healthy at http://localhost:${QA_ADMIN_PORT}"

scripts/ci/docker-build.sh

@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+# Builds self-contained CI images for the API and admin apps and tags them
+# with both the current git sha and "qa" (the tag the QA compose stack pulls).
+set -euo pipefail
+cd "$(dirname "${BASH_SOURCE[0]}")" && source ./lib.sh
+cd "$CI_ROOT"
+image_names
+
+log "Building $API_IMAGE:$GIT_SHA / :qa"
+docker build \
+  -f src/api/MicCheck.Api/Dockerfile.ci \
+  -t "$API_IMAGE:$GIT_SHA" \
+  -t "$API_IMAGE:qa" \
+  .
+
+log "Building $ADMIN_IMAGE:$GIT_SHA / :qa"
+docker build \
+  -f src/admin/Dockerfile.ci \
+  -t "$ADMIN_IMAGE:$GIT_SHA" \
+  -t "$ADMIN_IMAGE:qa" \
+  src/admin
+
+log "docker-build.sh complete"

scripts/ci/docker-push.sh

@@ -0,0 +1,17 @@
+#!/usr/bin/env bash
+# Pushes the images built by docker-build.sh (git-sha and qa tags) to the
+# Gitea container registry.
+set -euo pipefail
+cd "$(dirname "${BASH_SOURCE[0]}")" && source ./lib.sh
+cd "$CI_ROOT"
+image_names
+registry_login
+
+for tag in "$GIT_SHA" qa; do
+  log "Pushing $API_IMAGE:$tag"
+  docker push "$API_IMAGE:$tag"
+  log "Pushing $ADMIN_IMAGE:$tag"
+  docker push "$ADMIN_IMAGE:$tag"
+done
+
+log "docker-push.sh complete"

scripts/ci/lib.sh

@@ -0,0 +1,160 @@
+#!/usr/bin/env bash
+# Shared helpers for scripts/ci/*.sh.
+# Every script in this directory is meant to run identically in CI and on a
+# developer's machine - no Gitea/GitHub-specific built-in actions, just bash.
+set -euo pipefail
+
+log() {
+  echo "[$(date -u +'%Y-%m-%dT%H:%M:%SZ')] $*"
+}
+
+fail() {
+  echo "[$(date -u +'%Y-%m-%dT%H:%M:%SZ')] ERROR: $*" >&2
+  exit 1
+}
+
+# Repo root, regardless of caller's cwd.
+CI_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/../.." && pwd)"
+
+# Registry configuration. All values come from the environment (CI secrets or
+# a developer's shell) - nothing is hardcoded, per project convention.
+REGISTRY="${REGISTRY:-}"
+REGISTRY_OWNER="${REGISTRY_OWNER:-}"
+REGISTRY_USER="${REGISTRY_USER:-}"
+REGISTRY_TOKEN="${REGISTRY_TOKEN:-}"
+
+GIT_SHA="$(git -C "$CI_ROOT" rev-parse --short HEAD)"
+
+require_registry_vars() {
+  [[ -n "$REGISTRY" ]] || fail "REGISTRY env var is required (e.g. gitea.example.com)"
+  [[ -n "$REGISTRY_OWNER" ]] || fail "REGISTRY_OWNER env var is required (e.g. your gitea org/user)"
+}
+
+# Populates API_IMAGE / ADMIN_IMAGE, e.g. gitea.example.com/james/miccheck-api
+image_names() {
+  require_registry_vars
+  API_IMAGE="$REGISTRY/$REGISTRY_OWNER/miccheck-api"
+  ADMIN_IMAGE="$REGISTRY/$REGISTRY_OWNER/miccheck-admin"
+}
+
+# Installs .NET into $CI_ROOT/.dotnet via the vendored dotnet-install.sh if
+# `dotnet` isn't already on PATH, then prepends it to PATH for this process.
+# Keeps bare runners (no SDK preinstalled) working the same as a dev machine.
+ensure_dotnet() {
+  if command -v dotnet > /dev/null 2>&1; then
+    return 0
+  fi
+
+  local install_dir="$CI_ROOT/.dotnet"
+  if [[ ! -x "$install_dir/dotnet" ]]; then
+    log "dotnet not found on PATH; installing .NET SDK via dotnet-install.sh"
+    bash "$CI_ROOT/dotnet-install.sh" --channel LTS --install-dir "$install_dir"
+  fi
+  export PATH="$install_dir:$PATH"
+  export DOTNET_ROOT="$install_dir"
+
+  ensure_dotnet_native_deps
+}
+
+# The .NET runtime is a native ELF binary that dynamically links libstdc++/libgcc.
+# Bare/minimal images (e.g. the act hostexecutor container) may lack them entirely,
+# which fails as an obscure symbol-relocation error rather than "command not found".
+ensure_dotnet_native_deps() {
+  if ldconfig -p 2>/dev/null | grep -q 'libstdc++\.so\.6'; then
+    return 0
+  fi
+
+  log "libstdc++.so.6 missing; installing native runtime deps for dotnet"
+  local sudo_cmd=""
+  if [[ "$(id -u)" -ne 0 ]] && command -v sudo > /dev/null 2>&1; then
+    sudo_cmd="sudo"
+  fi
+
+  if command -v apt-get > /dev/null 2>&1; then
+    $sudo_cmd apt-get update -y
+    $sudo_cmd apt-get install -y --no-install-recommends libstdc++6 libgcc-s1 libicu-dev ca-certificates
+  elif command -v apk > /dev/null 2>&1; then
+    # Alpine/musl runner - dotnet-install.sh falls back to the linux-musl-x64 SDK
+    # here, which still wants a real libstdc++/libgcc (not just gcompat).
+    $sudo_cmd apk add --no-cache libstdc++ libgcc icu-libs ca-certificates
+  else
+    fail "libstdc++.so.6 missing and neither apt-get nor apk is available; install a C++ runtime manually on this runner"
+  fi
+}
+
+# Installs Node.js into $CI_ROOT/.node from the official prebuilt tarball if
+# `npm` isn't already on PATH, then prepends it to PATH for this process.
+# Mirrors ensure_dotnet() above - keeps bare runners (no Node preinstalled,
+# e.g. the self-hosted qa runner) working the same as a dev machine.
+ensure_node() {
+  if command -v npm > /dev/null 2>&1; then
+    return 0
+  fi
+
+  # nodejs.org only ships glibc binaries; on a musl/Alpine runner (same one
+  # dotnet-install.sh detects and picks the linux-musl-x64 SDK for) that
+  # tarball fails to exec at all ("env: can't execute 'node'"). Prefer the
+  # distro's own package on musl instead of a broken glibc download.
+  if [[ ! -x "$CI_ROOT/.node/bin/node" ]] && command -v apk > /dev/null 2>&1; then
+    log "node not found on PATH; installing via apk (musl runner)"
+    local sudo_cmd=""
+    if [[ "$(id -u)" -ne 0 ]] && command -v sudo > /dev/null 2>&1; then
+      sudo_cmd="sudo"
+    fi
+    $sudo_cmd apk add --no-cache nodejs npm
+    return 0
+  fi
+
+  local node_version="22.14.0"
+  local install_dir="$CI_ROOT/.node"
+  if [[ ! -x "$install_dir/bin/node" ]]; then
+    log "node not found on PATH; installing Node.js v$node_version"
+    local tarball="node-v${node_version}-linux-x64"
+    local url="https://nodejs.org/dist/v${node_version}/${tarball}.tar.xz"
+    if command -v curl > /dev/null 2>&1; then
+      curl -fsSL "$url" -o "/tmp/${tarball}.tar.xz"
+    elif command -v wget > /dev/null 2>&1; then
+      wget -q "$url" -O "/tmp/${tarball}.tar.xz"
+    else
+      fail "neither curl nor wget found on PATH; cannot download Node.js"
+    fi
+    mkdir -p "$install_dir"
+    tar -xJf "/tmp/${tarball}.tar.xz" -C "$install_dir" --strip-components=1
+    rm -f "/tmp/${tarball}.tar.xz"
+  fi
+  export PATH="$install_dir/bin:$PATH"
+}
+
+# Installs the dotnet-reportgenerator-globaltool CLI (merges coverlet/Jest
+# coverage output into badges + build-summary markdown) into $CI_ROOT/.dotnet-tools
+# if it isn't already on PATH. Mirrors ensure_dotnet()/ensure_node() above.
+ensure_reportgenerator() {
+  if command -v reportgenerator > /dev/null 2>&1; then
+    return 0
+  fi
+
+  local tool_dir="$CI_ROOT/.dotnet-tools"
+  if [[ ! -x "$tool_dir/reportgenerator" ]]; then
+    log "reportgenerator not found on PATH; installing dotnet-reportgenerator-globaltool"
+    dotnet tool install dotnet-reportgenerator-globaltool --tool-path "$tool_dir"
+  fi
+  export PATH="$tool_dir:$PATH"
+}
+
+# The IP address on which a container published on 0.0.0.0/<gateway-ip> is
+# reachable from a sibling container on docker's default bridge network (i.e.
+# the docker host's bridge-side address, not its public interface). Used to
+# bind QA's db port narrowly - reachable by the smoke-qa job container, not
+# exposed off-box the way 0.0.0.0 would be.
+docker_bridge_gateway() {
+  docker network inspect bridge -f '{{(index .IPAM.Config 0).Gateway}}' 2>/dev/null \
+    || ip route show default 2>/dev/null | awk '/default/ {print $3; exit}'
+}
+
+registry_login() {
+  require_registry_vars
+  [[ -n "$REGISTRY_USER" ]] || fail "REGISTRY_USER env var is required to push images"
+  [[ -n "$REGISTRY_TOKEN" ]] || fail "REGISTRY_TOKEN env var is required to push images"
+  log "Logging in to $REGISTRY as $REGISTRY_USER"
+  echo "$REGISTRY_TOKEN" | docker login "$REGISTRY" -u "$REGISTRY_USER" --password-stdin
+}

scripts/ci/prepush.sh

@@ -0,0 +1,25 @@
+#!/usr/bin/env bash
+# Husky pre-push hook body. Compiles everything and runs the fast test suites
+# (no Docker, no registry) so broken code/tests never leave the workstation.
+set -euo pipefail
+cd "$(dirname "${BASH_SOURCE[0]}")" && source ./lib.sh
+cd "$CI_ROOT"
+
+ensure_dotnet
+
+log "Building full solution (Debug)"
+dotnet build MicCheck.slnx -c Debug
+
+log "Running MicCheck.Api.Tests.Unit"
+dotnet test tests/api/MicCheck.Api.Tests.Unit/MicCheck.Api.Tests.Unit.csproj -c Debug
+
+log "Installing admin dependencies (npm ci)"
+npm --prefix src/admin ci
+
+log "Running admin Jest tests"
+npm --prefix src/admin test
+
+log "Building admin SPA (vite build)"
+npm --prefix src/admin run build
+
+log "prepush.sh complete - ok to push"

scripts/ci/publish-coverage-badge.sh

@@ -0,0 +1,30 @@
+#!/usr/bin/env bash
+# Commits the coverage badge refreshed by coverage.sh straight back to the
+# branch that triggered this run, so readme.md's relative badges/coverage.svg
+# link stays current. GITHUB_SERVER_URL/GITHUB_REPOSITORY/GITHUB_REF_NAME are
+# default context env vars on both GitHub Actions and Gitea Actions (Gitea's
+# engine is GitHub-Actions-compatible); GITHUB_TOKEN must be passed in
+# explicitly from the workflow (${{ github.token }}) on both platforms.
+set -euo pipefail
+cd "$(dirname "${BASH_SOURCE[0]}")" && source ./lib.sh
+cd "$CI_ROOT"
+
+[[ -n "${GITHUB_TOKEN:-}" ]] || fail "GITHUB_TOKEN env var is required to push the badge commit"
+[[ -n "${GITHUB_SERVER_URL:-}" ]] || fail "GITHUB_SERVER_URL env var is required to push the badge commit"
+[[ -n "${GITHUB_REPOSITORY:-}" ]] || fail "GITHUB_REPOSITORY env var is required to push the badge commit"
+[[ -n "${GITHUB_REF_NAME:-}" ]] || fail "GITHUB_REF_NAME env var is required to push the badge commit"
+
+if git diff --quiet -- badges/coverage.svg; then
+  log "badges/coverage.svg unchanged; nothing to publish"
+  exit 0
+fi
+
+git config user.name "miccheck-ci"
+git config user.email "ci@miccheck.local"
+git add badges/coverage.svg
+git commit -m "chore: refresh coverage badge [skip ci]"
+
+remote_url="${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}.git"
+git -c http.extraheader="AUTHORIZATION: bearer ${GITHUB_TOKEN}" push "$remote_url" "HEAD:${GITHUB_REF_NAME}"
+
+log "publish-coverage-badge.sh complete"

scripts/ci/smoke-qa.sh

@@ -0,0 +1,55 @@
+#!/usr/bin/env bash
+# Post-deploy validation for the QA environment: runs the API integration
+# suite (real HTTP + real Postgres, seeding/cleaning up its own data) and the
+# Playwright admin e2e suite against the just-deployed QA stack. Intended to
+# run immediately after deploy-qa.sh, on the same self-hosted qa runner. This
+# job runs in its own job container, a sibling of the QA stack's containers
+# on docker's default bridge network - not "localhost" from the host's point
+# of view - so it reaches published ports via the bridge gateway IP, same as
+# deploy-qa.sh binds the db port to.
+set -euo pipefail
+cd "$(dirname "${BASH_SOURCE[0]}")" && source ./lib.sh
+cd "$CI_ROOT"
+
+ensure_dotnet
+ensure_node
+
+QA_ADMIN_PORT="${QA_ADMIN_PORT:-3001}"
+CI_HOST="$(docker_bridge_gateway)"
+[[ -n "$CI_HOST" ]] || fail "could not determine docker bridge gateway IP to reach the QA stack"
+BASE_URL="http://${CI_HOST}:${QA_ADMIN_PORT}"
+
+log "Resolved docker host as $CI_HOST for reaching the QA stack's published ports"
+
+export MICCHECK_API_BASE_URL="$BASE_URL"
+export MICCHECK_DB_CONNECTION_STRING="${MICCHECK_DB_CONNECTION_STRING:-Host=$CI_HOST;Port=55432;Database=miccheck;Username=miccheck;Password=${POSTGRES_PASSWORD:?POSTGRES_PASSWORD env var is required}}"
+
+log "Running API integration suite against $BASE_URL"
+dotnet test tests/api/MicCheck.Api.Tests.Integration/MicCheck.Api.Tests.Integration.csproj -c Release --logger trx
+
+log "Installing admin e2e dependencies"
+npm --prefix src/admin ci
+
+# Playwright's bundled Chromium is a glibc binary and `--with-deps` only knows
+# apt - neither works on this musl/Alpine runner. Run the e2e leg inside
+# Microsoft's official Playwright image instead (glibc, browsers preinstalled
+# at /ms-playwright), as a sibling container reachable at the same bridge
+# gateway IP used above. Pin the image tag to the exact resolved
+# @playwright/test version so the test runner and browser build match.
+#
+# This script itself runs inside the runner's own job container, talking to
+# the host's docker daemon over a mounted socket (docker-outside-of-docker) -
+# `docker run -v "$CI_ROOT:/work"` would ask the *host* daemon to bind-mount a
+# path that only exists inside this job container, which fails. `docker cp`
+# instead copies the files by content, sidestepping the path mismatch.
+PW_VERSION="$(node -p "require('./src/admin/node_modules/@playwright/test/package.json').version")"
+log "Running Playwright admin e2e suite against $BASE_URL (playwright:v$PW_VERSION-noble)"
+
+PW_CONTAINER="$(docker create -e "E2E_BASE_URL=$BASE_URL" -w /work/src/admin "mcr.microsoft.com/playwright:v${PW_VERSION}-noble" npm run e2e)"
+docker cp "$CI_ROOT/." "$PW_CONTAINER:/work"
+pw_status=0
+docker start -a "$PW_CONTAINER" || pw_status=$?
+docker rm -f "$PW_CONTAINER" > /dev/null
+[[ "$pw_status" -eq 0 ]] || fail "Playwright e2e suite failed (exit $pw_status)"
+
+log "smoke-qa.sh complete - QA environment validated end to end"

scripts/ci/test.sh

@@ -0,0 +1,26 @@
+#!/usr/bin/env bash
+# Runs the fast test suites: .NET unit tests (EF InMemory, no DB/Docker needed)
+# and the admin Jest suite. Integration tests are intentionally excluded here -
+# they require a live API + Postgres (see readme in the Integration test project).
+set -euo pipefail
+cd "$(dirname "${BASH_SOURCE[0]}")" && source ./lib.sh
+cd "$CI_ROOT"
+
+ensure_dotnet
+
+# --results-directory doesn't clear prior runs - it adds a new GUID folder
+# alongside old ones every time. On a runner that reuses its workspace
+# (self-hosted, unlike GitHub's ephemeral ones), stale coverage from past
+# runs would otherwise get merged in by coverage.sh and silently skew the
+# combined percentage.
+rm -rf "$CI_ROOT/coverage/dotnet"
+
+log "Running MicCheck.Api.Tests.Unit"
+dotnet test tests/api/MicCheck.Api.Tests.Unit/MicCheck.Api.Tests.Unit.csproj -c Release --logger trx \
+  --collect:"XPlat Code Coverage" --results-directory "$CI_ROOT/coverage/dotnet" \
+  --settings tests/api/MicCheck.Api.Tests.Unit/coverlet.runsettings
+
+log "Running admin Jest tests"
+npm --prefix src/admin test -- --coverage --coverageReporters=lcov --coverageReporters=text-summary
+
+log "test.sh complete"

src/MicCheck.AppHost/AppHost.cs

@@ -0,0 +1,26 @@
+var builder = DistributedApplication.CreateBuilder(args);
+
+// Pinned to match tests/api/MicCheck.Api.Tests.Integration/local.runsettings and
+// src/admin's docker-compose defaults, so those fixed targets work whether the
+// stack is run via `docker compose` or via this AppHost.
+var postgresUser = builder.AddParameter("postgres-username", "miccheck");
+var postgresPassword = builder.AddParameter("postgres-password", "password", secret: true);
+
+var postgres = builder.AddPostgres("postgres", postgresUser, postgresPassword, port: 5432)
+    .WithDataVolume("miccheck-pgdata")
+    .WithPgAdmin();
+
+var miccheckDb = postgres.AddDatabase("miccheck");
+
+var api = builder.AddProject<Projects.MicCheck_Api>("api")
+    .WithReference(miccheckDb)
+    .WaitFor(miccheckDb)
+    .WithHttpEndpoint(port: 5000, name: "http");
+
+builder.AddViteApp("admin", "../admin", "serve")
+    .WithReference(api)
+    .WaitFor(api)
+    .WithHttpEndpoint(port: 5173, name: "http")
+    .WithExternalHttpEndpoints();
+
+builder.Build().Run();

src/MicCheck.AppHost/MicCheck.AppHost.csproj

@@ -0,0 +1,24 @@
+<Project Sdk="Aspire.AppHost.Sdk/13.4.0">
+
+  <ItemGroup>
+    <ProjectReference Include="..\api\MicCheck.Api\MicCheck.Api.csproj" />
+    <ProjectReference Include="..\admin\Admin.esproj" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Aspire.Hosting.JavaScript" Version="13.4.2" />
+    <PackageReference Include="Aspire.Hosting.PostgreSQL" Version="13.4.0" />
+    <PackageReference Include="MessagePack" Version="2.5.302" />
+  </ItemGroup>
+
+  <PropertyGroup>
+    <OutputType>Exe</OutputType>
+    <TargetFramework>net10.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+    <LangVersion>latest</LangVersion>
+    <TreatWarningsAsErrors>true</TreatWarningsAsErrors>
+    <UserSecretsId>d10a4485-2ac0-4ba7-bda5-8eb63e417567</UserSecretsId>
+  </PropertyGroup>
+
+</Project>

src/MicCheck.AppHost/Properties/launchSettings.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://json.schemastore.org/launchsettings.json",
+  "profiles": {
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "https://localhost:17244;http://localhost:15050",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development",
+        "DOTNET_ENVIRONMENT": "Development",
+        "ASPIRE_DASHBOARD_OTLP_ENDPOINT_URL": "https://localhost:21229",
+        "ASPIRE_RESOURCE_SERVICE_ENDPOINT_URL": "https://localhost:22051"
+      }
+    },
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "http://localhost:15050",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development",
+        "DOTNET_ENVIRONMENT": "Development",
+        "ASPIRE_DASHBOARD_OTLP_ENDPOINT_URL": "http://localhost:19033",
+        "ASPIRE_RESOURCE_SERVICE_ENDPOINT_URL": "http://localhost:20209"
+      }
+    }
+  }
+}

src/MicCheck.AppHost/appsettings.Development.json

@@ -0,0 +1,16 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "Dashboard": {
+    "Frontend": {
+      "AuthMode": "Unsecured"
+    },
+    "Otlp": {
+      "AuthMode": "Unsecured"
+    }
+  }
+}

src/MicCheck.AppHost/appsettings.json

@@ -0,0 +1,9 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning",
+      "Aspire.Hosting.Dcp": "Warning"
+    }
+  }
+}

src/MicCheck.AppHost/aspire.config.json

@@ -0,0 +1,5 @@
+{
+  "appHost": {
+    "path": "MicCheck.AppHost.csproj"
+  }
+}

src/MicCheck.ServiceDefaults/Extensions.cs

@@ -0,0 +1,127 @@
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Diagnostics.HealthChecks;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Diagnostics.HealthChecks;
+using Microsoft.Extensions.Logging;
+using Microsoft.Extensions.ServiceDiscovery;
+using OpenTelemetry;
+using OpenTelemetry.Metrics;
+using OpenTelemetry.Trace;
+
+namespace Microsoft.Extensions.Hosting;
+
+// Adds common Aspire services: service discovery, resilience, health checks, and OpenTelemetry.
+// This project should be referenced by each service project in your solution.
+// To learn more about using this project, see https://aka.ms/aspire/service-defaults
+public static class Extensions
+{
+    private const string HealthEndpointPath = "/health";
+    private const string AlivenessEndpointPath = "/alive";
+
+    public static TBuilder AddServiceDefaults<TBuilder>(this TBuilder builder) where TBuilder : IHostApplicationBuilder
+    {
+        builder.ConfigureOpenTelemetry();
+
+        builder.AddDefaultHealthChecks();
+
+        builder.Services.AddServiceDiscovery();
+
+        builder.Services.ConfigureHttpClientDefaults(http =>
+        {
+            // Turn on resilience by default
+            http.AddStandardResilienceHandler();
+
+            // Turn on service discovery by default
+            http.AddServiceDiscovery();
+        });
+
+        // Uncomment the following to restrict the allowed schemes for service discovery.
+        // builder.Services.Configure<ServiceDiscoveryOptions>(options =>
+        // {
+        //     options.AllowedSchemes = ["https"];
+        // });
+
+        return builder;
+    }
+
+    public static TBuilder ConfigureOpenTelemetry<TBuilder>(this TBuilder builder) where TBuilder : IHostApplicationBuilder
+    {
+        builder.Logging.AddOpenTelemetry(logging =>
+        {
+            logging.IncludeFormattedMessage = true;
+            logging.IncludeScopes = true;
+        });
+
+        builder.Services.AddOpenTelemetry()
+            .WithMetrics(metrics =>
+            {
+                metrics.AddAspNetCoreInstrumentation()
+                    .AddHttpClientInstrumentation()
+                    .AddRuntimeInstrumentation();
+            })
+            .WithTracing(tracing =>
+            {
+                tracing.AddSource(builder.Environment.ApplicationName)
+                    .AddAspNetCoreInstrumentation(tracing =>
+                        // Exclude health check requests from tracing
+                        tracing.Filter = context =>
+                            !context.Request.Path.StartsWithSegments(HealthEndpointPath)
+                            && !context.Request.Path.StartsWithSegments(AlivenessEndpointPath)
+                    )
+                    // Uncomment the following line to enable gRPC instrumentation (requires the OpenTelemetry.Instrumentation.GrpcNetClient package)
+                    //.AddGrpcClientInstrumentation()
+                    .AddHttpClientInstrumentation();
+            });
+
+        builder.AddOpenTelemetryExporters();
+
+        return builder;
+    }
+
+    private static TBuilder AddOpenTelemetryExporters<TBuilder>(this TBuilder builder) where TBuilder : IHostApplicationBuilder
+    {
+        var useOtlpExporter = !string.IsNullOrWhiteSpace(builder.Configuration["OTEL_EXPORTER_OTLP_ENDPOINT"]);
+
+        if (useOtlpExporter)
+        {
+            builder.Services.AddOpenTelemetry().UseOtlpExporter();
+        }
+
+        // Uncomment the following lines to enable the Azure Monitor exporter (requires the Azure.Monitor.OpenTelemetry.AspNetCore package)
+        //if (!string.IsNullOrEmpty(builder.Configuration["APPLICATIONINSIGHTS_CONNECTION_STRING"]))
+        //{
+        //    builder.Services.AddOpenTelemetry()
+        //       .UseAzureMonitor();
+        //}
+
+        return builder;
+    }
+
+    public static TBuilder AddDefaultHealthChecks<TBuilder>(this TBuilder builder) where TBuilder : IHostApplicationBuilder
+    {
+        builder.Services.AddHealthChecks()
+            // Add a default liveness check to ensure app is responsive
+            .AddCheck("self", () => HealthCheckResult.Healthy(), ["live"]);
+
+        return builder;
+    }
+
+    public static WebApplication MapDefaultEndpoints(this WebApplication app)
+    {
+        // Adding health checks endpoints to applications in non-development environments has security implications.
+        // See https://aka.ms/aspire/healthchecks for details before enabling these endpoints in non-development environments.
+        if (app.Environment.IsDevelopment())
+        {
+            // All health checks must pass for app to be considered ready to accept traffic after starting
+            app.MapHealthChecks(HealthEndpointPath);
+
+            // Only health checks tagged with the "live" tag must pass for app to be considered alive
+            app.MapHealthChecks(AlivenessEndpointPath, new HealthCheckOptions
+            {
+                Predicate = r => r.Tags.Contains("live")
+            });
+        }
+
+        return app;
+    }
+}

src/MicCheck.ServiceDefaults/MicCheck.ServiceDefaults.csproj

@@ -0,0 +1,24 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <TargetFramework>net10.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+    <LangVersion>latest</LangVersion>
+    <TreatWarningsAsErrors>true</TreatWarningsAsErrors>
+    <IsAspireSharedProject>true</IsAspireSharedProject>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <FrameworkReference Include="Microsoft.AspNetCore.App" />
+
+    <PackageReference Include="Microsoft.Extensions.Http.Resilience" Version="10.6.0" />
+    <PackageReference Include="Microsoft.Extensions.ServiceDiscovery" Version="10.6.0" />
+    <PackageReference Include="OpenTelemetry.Exporter.OpenTelemetryProtocol" Version="1.15.3" />
+    <PackageReference Include="OpenTelemetry.Extensions.Hosting" Version="1.15.3" />
+    <PackageReference Include="OpenTelemetry.Instrumentation.AspNetCore" Version="1.15.2" />
+    <PackageReference Include="OpenTelemetry.Instrumentation.Http" Version="1.15.1" />
+    <PackageReference Include="OpenTelemetry.Instrumentation.Runtime" Version="1.15.1" />
+  </ItemGroup>
+
+</Project>

src/admin/.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+.git
+*.md
+tests

src/admin/Admin.esproj

@@ -0,0 +1,11 @@
+<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/1.0.2752196">
+  <PropertyGroup>
+    <StartupCommand>npm run serve</StartupCommand>
+    <JavaScriptTestRoot>.\</JavaScriptTestRoot>
+    <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
+    <!-- Allows the build (or compile) script located on package.json to run on Build -->
+    <ShouldRunBuildScript>false</ShouldRunBuildScript>
+    <!-- Folder where production build objects will be placed -->
+    <BuildOutputFolder>$(MSBuildProjectDirectory)\dist</BuildOutputFolder>
+  </PropertyGroup>
+</Project>

src/admin/Dockerfile

@@ -0,0 +1,4 @@
+FROM nginx:1.27-alpine
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

src/admin/Dockerfile.ci

@@ -0,0 +1,19 @@
+# Self-contained CI/QA image for the admin SPA. Unlike the dev Dockerfile
+# (which serves a host-built ./dist via bind mount), this builds the SPA
+# inside the image so it can be pushed to a registry and run standalone.
+#
+# Build context is src/admin:
+#   docker build -f src/admin/Dockerfile.ci -t miccheck-admin:qa src/admin
+
+FROM node:22-alpine AS build
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM nginx:1.27-alpine
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

src/admin/dist/index.html

@@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>MicCheck Admin</title></head><body><div id="app"></div><script defer="defer" src="/js/929.737c1237.js"></script><script defer="defer" src="/js/main.c5e9ac61.js"></script></body></html>

src/admin/dist/js/929.737c1237.js.LICENSE.txt

@@ -1,29 +0,0 @@
-/*!
- * vue-router v4.6.4
- * (c) 2025 Eduardo San Martin Morote
- * @license MIT
- */
-
-/**
- * WCAG 3.0 APCA perceptual contrast algorithm from https://github.com/Myndex/SAPC-APCA
- * @licence https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- * @see https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup
- */
-
-/**
-* @vue/reactivity v3.5.31
-* (c) 2018-present Yuxi (Evan) You and Vue contributors
-* @license MIT
-**/
-
-/**
-* @vue/runtime-dom v3.5.31
-* (c) 2018-present Yuxi (Evan) You and Vue contributors
-* @license MIT
-**/
-
-/**
-* @vue/shared v3.5.31
-* (c) 2018-present Yuxi (Evan) You and Vue contributors
-* @license MIT
-**/

src/admin/e2e/context-selection.e2e.ts

@@ -0,0 +1,30 @@
+import { test, expect } from '@playwright/test';
+import { authFile } from './global-setup';
+
+test.use({ storageState: authFile });
+
+/**
+ * The seeded DB (DatabaseSeeder) provides exactly one org, one project ("My Project"), and
+ * three environments (Development/Staging/Production), so the selectors auto-populate without
+ * needing to create anything first. Most feature screens require both a project and an
+ * environment to be selected before they render real content.
+ */
+test('project and environment context is selectable and persists across a reload', async ({ page }) => {
+  await page.goto('/features');
+
+  const projectSelect = page.getByTestId('project-select').locator('input');
+  const envSelect = page.getByTestId('env-select').locator('input');
+
+  await expect(projectSelect).not.toHaveValue('');
+  await expect(envSelect).not.toHaveValue('');
+
+  // Explicitly re-select the project via the dropdown to prove the selector itself works,
+  // not just the auto-select-on-load behavior.
+  await page.getByTestId('project-select').click();
+  await page.getByRole('option', { name: 'My Project' }).click();
+  await expect(projectSelect).toHaveValue('My Project');
+
+  await page.reload();
+  await expect(page.getByTestId('project-select').locator('input')).not.toHaveValue('');
+  await expect(page.getByTestId('env-select').locator('input')).not.toHaveValue('');
+});

src/admin/e2e/features.e2e.ts

@@ -0,0 +1,47 @@
+import { test, expect } from '@playwright/test';
+import { authFile } from './global-setup';
+
+test.use({ storageState: authFile });
+
+test('the features table renders for the selected project', async ({ page }) => {
+  await page.goto('/features');
+
+  await expect(page.getByTestId('features-table')).toBeVisible();
+  await expect(page.getByText('Select a project')).toHaveCount(0);
+});
+
+test('creating a feature adds it to the table and its toggle can be flipped', async ({ page }) => {
+  const featureName = `e2e_feature_${Date.now()}`;
+
+  await page.goto('/features');
+
+  await page.getByTestId('create-feature-btn').click();
+  await page.getByTestId('feature-name-input').locator('input').fill(featureName);
+  await page.getByTestId('feature-dialog-save').click();
+
+  const row = page.getByRole('row', { name: new RegExp(featureName) });
+  await expect(row).toBeVisible();
+
+  // Creating a feature triggers a fresh fetch of feature states for the current environment;
+  // wait for it to settle so the toggle below acts on real, loaded state rather than racing it.
+  await page.waitForLoadState('networkidle');
+
+  const toggle = row.locator('input[type="checkbox"]');
+  const wasChecked = await toggle.isChecked();
+
+  // Assert on the real PATCH landing, not just the switch's transient DOM state: if the
+  // feature-state map hasn't loaded for this row yet, the click handler no-ops silently and
+  // the switch briefly flashes the native checkbox state before Vue snaps it back - which
+  // reads as "toggled" for an instant even though nothing was ever sent to the API.
+  const patchResponse = page.waitForResponse(
+    (res) => res.request().method() === 'PATCH' && res.url().includes('/featurestate/') && res.ok(),
+  );
+  await toggle.click({ force: true });
+  await patchResponse;
+  await expect(toggle).toBeChecked({ checked: !wasChecked });
+
+  // Reload to confirm the toggle was persisted to the real API/DB, not just local state.
+  await page.reload();
+  const reloadedRow = page.getByRole('row', { name: new RegExp(featureName) });
+  await expect(reloadedRow.locator('input[type="checkbox"]')).toBeChecked({ checked: !wasChecked });
+});

src/admin/e2e/global-setup.ts

@@ -0,0 +1,30 @@
+import { chromium, type FullConfig } from '@playwright/test';
+import path from 'node:path';
+
+/**
+ * Deterministic dev/QA seed admin credentials — see DatabaseSeeder.SeedAdminEmail /
+ * SeedAdminPassword in src/api/MicCheck.Api/Data/DatabaseSeeder.cs. Seeding only ever runs in
+ * Development, which is what both local dev and the QA deployment run as.
+ */
+const ADMIN_EMAIL = process.env.E2E_ADMIN_EMAIL ?? 'admin@miccheck.local';
+const ADMIN_PASSWORD = process.env.E2E_ADMIN_PASSWORD ?? 'MicCheckQa!2026';
+
+export const authFile = path.join(__dirname, '.auth', 'admin.json');
+
+export default async function globalSetup(config: FullConfig): Promise<void> {
+  const baseURL = config.projects[0]?.use?.baseURL ?? 'http://localhost:5173';
+
+  const browser = await chromium.launch();
+  const page = await browser.newPage({ baseURL });
+
+  await page.goto('/login');
+  await page.getByTestId('email-input').locator('input').fill(ADMIN_EMAIL);
+  await page.getByTestId('password-input').locator('input').fill(ADMIN_PASSWORD);
+  await page.getByTestId('login-submit').click();
+
+  // A successful login redirects off /login onto the authenticated shell.
+  await page.waitForURL((url) => !url.pathname.startsWith('/login'), { timeout: 15_000 });
+
+  await page.context().storageState({ path: authFile });
+  await browser.close();
+}

src/admin/e2e/login.e2e.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Unauthenticated — does not use the shared storageState fixture (see global-setup.ts) since
+ * it exercises the login flow itself.
+ */
+test.use({ storageState: { cookies: [], origins: [] } });
+
+const ADMIN_EMAIL = process.env.E2E_ADMIN_EMAIL ?? 'admin@miccheck.local';
+const ADMIN_PASSWORD = process.env.E2E_ADMIN_PASSWORD ?? 'MicCheckQa!2026';
+
+test('valid credentials sign the admin in and land on the authenticated shell', async ({ page }) => {
+  await page.goto('/login');
+
+  await page.getByTestId('email-input').locator('input').fill(ADMIN_EMAIL);
+  await page.getByTestId('password-input').locator('input').fill(ADMIN_PASSWORD);
+  await page.getByTestId('login-submit').click();
+
+  await page.waitForURL((url) => !url.pathname.startsWith('/login'));
+  await expect(page.getByText('Features', { exact: true })).toBeVisible();
+});
+
+test('invalid credentials surface a login error and stay on the login page', async ({ page }) => {
+  await page.goto('/login');
+
+  await page.getByTestId('email-input').locator('input').fill(ADMIN_EMAIL);
+  await page.getByTestId('password-input').locator('input').fill('not-the-right-password');
+  await page.getByTestId('login-submit').click();
+
+  await expect(page.getByTestId('login-error')).toBeVisible();
+  await expect(page).toHaveURL(/\/login/);
+});

src/admin/e2e/navigation.e2e.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test';
+import { authFile } from './global-setup';
+
+test.use({ storageState: authFile });
+
+test('the sidebar renders and each primary link navigates to its view', async ({ page }) => {
+  await page.goto('/dashboard');
+
+  const links: Array<[name: string, path: string]> = [
+    ['Dashboard', '/dashboard'],
+    ['Features', '/features'],
+    ['Segments', '/segments'],
+    ['Identities', '/identities'],
+    ['Audit Logs', '/audit-logs'],
+    ['Settings', '/settings'],
+  ];
+
+  for (const [name, path] of links) {
+    // Sidebar entries are clickable divs (VerticalNavLink), not <a> elements, so match by text.
+    await page.locator('li').filter({ hasText: name }).first().click();
+    await expect(page).toHaveURL(new RegExp(`${path}$`));
+  }
+});

src/admin/index.html

@@ -8,5 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

src/admin/jest.config.js

@@ -16,12 +16,19 @@ module.exports = {
     '^.+\\.[jt]sx?$': 'babel-jest',
   },
   transformIgnorePatterns: [
-    '/node_modules/(?!(vuetify)/)',
+    '/node_modules/(?!(vuetify|@vueuse|@iconify)/)',
   ],
   moduleNameMapper: {
     '\\.(css|scss|sass)$': '<rootDir>/tests/__mocks__/styleMock.js',
     '\\.(svg|png|jpg|jpeg|gif|webp|woff2?)$': '<rootDir>/tests/__mocks__/fileMock.js',
     '^@/(.*)$': '<rootDir>/src/$1',
+    '^@core/(.*)$': '<rootDir>/src/@core/$1',
+    '^@core$': '<rootDir>/src/@core',
+    '^@layouts/(.*)$': '<rootDir>/src/@layouts/$1',
+    '^@layouts$': '<rootDir>/src/@layouts',
+    '^@images/(.*)$': '<rootDir>/src/assets/images/$1',
+    '^@styles/(.*)$': '<rootDir>/src/assets/styles/$1',
+    '^@configured-variables$': '<rootDir>/tests/__mocks__/styleMock.js',
   },
   globals: {
     'vue-jest': {

src/admin/nginx.conf

@@ -0,0 +1,52 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Proxy all /api/ calls to the API container.
+    # The API controller routes include the /api prefix, so the path is
+    # forwarded unchanged: /api/v1/organisations → http://api:8080/api/v1/organisations
+    location /api/ {
+        resolver           127.0.0.11 valid=10s ipv6=off;
+        set $api_upstream  http://api:8080;
+        proxy_pass         $api_upstream;
+        proxy_http_version 1.1;
+        proxy_set_header   Host              $host;
+        proxy_set_header   X-Real-IP         $remote_addr;
+        proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
+        proxy_set_header   X-Forwarded-Proto $scheme;
+        proxy_read_timeout 30s;
+    }
+
+    # Proxy the API's health endpoint, which lives outside the /api prefix.
+    location = /health {
+        resolver           127.0.0.11 valid=10s ipv6=off;
+        set $api_upstream  http://api:8080;
+        proxy_pass         $api_upstream/health;
+        proxy_http_version 1.1;
+    }
+
+    # SPA fallback — all other paths serve index.html so Vue Router handles them
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Security headers
+    add_header X-Frame-Options       "SAMEORIGIN"   always;
+    add_header X-Content-Type-Options "nosniff"     always;
+    add_header Referrer-Policy       "strict-origin" always;
+
+    # Cache static assets aggressively (webpack hashes file names)
+    location ~* \.(js|css|woff2?|ttf|eot|svg|png|jpg|ico)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+        try_files $uri =404;
+    }
+
+    # Never cache the SPA entry point
+    location = /index.html {
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
+    }
+}

src/admin/package.json

@@ -3,41 +3,50 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "build": "webpack --mode production --config webpack.config.js",
-    "build:dev": "webpack --mode development --config webpack.config.js",
-    "serve": "webpack serve --mode development --config webpack.config.js",
-    "test": "jest --passWithNoTests"
+    "build": "vite build",
+    "build:dev": "vite build --mode development",
+    "serve": "vite",
+    "preview": "vite preview",
+    "test": "jest --passWithNoTests",
+    "e2e": "playwright test",
+    "e2e:install": "playwright install --with-deps chromium"
   },
   "dependencies": {
-    "@mdi/font": "^7.4.47",
+    "@fontsource-variable/inter": "^5.2.8",
+    "@iconify-json/bxl": "^1.2.0",
+    "@iconify-json/ri": "^1.2.0",
+    "@iconify/vue": "^4.1.0",
+    "@vueuse/core": "^11.0.0",
+    "apexcharts": "^5.15.0",
+    "axios": "^1.15.0",
+    "pinia": "^3.0.4",
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
-    "vuetify": "^3.6.0"
+    "vue3-apexcharts": "^1.11.1",
+    "vue3-perfect-scrollbar": "^2.0.0",
+    "vuetify": "^3.7.5"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
     "@babel/preset-env": "^7.24.0",
     "@babel/preset-typescript": "^7.24.0",
+    "@playwright/test": "^1.61.1",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.12.0",
+    "@vitejs/plugin-vue": "^6.0.6",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "^29.2.6",
     "babel-jest": "^29.7.0",
-    "css-loader": "^7.1.2",
-    "html-webpack-plugin": "^5.6.0",
+    "eslint": "^10.4.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "sass": "^1.77.2",
-    "sass-loader": "^14.2.1",
-    "style-loader": "^4.0.0",
+    "sass-embedded": "^1.77.0",
     "ts-jest": "^29.1.4",
-    "ts-loader": "^9.5.1",
     "typescript": "^5.4.5",
-    "vue-loader": "^17.4.2",
-    "webpack": "^5.91.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4",
-    "webpack-plugin-vuetify": "^3.1.0"
+    "vite": "^8.0.8",
+    "vite-plugin-vuetify": "^2.1.3",
+    "vite-svg-loader": "^5.1.0"
   },
   "overrides": {
     "brace-expansion": "^5.0.5"

src/admin/playwright.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Smoke-test suite for the admin SPA. Runs against a real, already-running deployment
+ * (local dev server or a deployed QA environment) — it does not mock the API and does not
+ * start any servers itself. See e2e/global-setup.ts for how authentication is bootstrapped.
+ */
+export default defineConfig({
+  testDir: './e2e',
+  testMatch: '**/*.e2e.ts',
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  workers: 1,
+  reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
+  globalSetup: './e2e/global-setup.ts',
+  timeout: 30_000,
+  use: {
+    baseURL: process.env.E2E_BASE_URL ?? 'http://localhost:5173',
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});

src/admin/src/@core/components/MoreBtn.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+interface Props {
+  menuList?: unknown[]
+  itemProps?: boolean
+  iconSize?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <IconBtn>
+    <VIcon
+      :size="iconSize"
+      icon="ri-more-2-line"
+    />
+
+    <VMenu
+      v-if="props.menuList"
+      activator="parent"
+    >
+      <VList
+        :items="props.menuList"
+        :item-props="props.itemProps"
+      />
+    </VMenu>
+  </IconBtn>
+</template>

src/admin/src/@core/components/ThemeSwitcher.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+import { useCycleList } from '@vueuse/core';
+import { useTheme } from 'vuetify';
+import type { ThemeSwitcherTheme } from '@layouts/types';
+
+const props = defineProps<{
+  themes: ThemeSwitcherTheme[]
+}>()
+
+const { name: themeName, global: globalTheme } = useTheme()
+const { state: currentThemeName, next: getNextThemeName, index: currentThemeIndex } = useCycleList(props.themes.map(t => t.name), { initialValue: themeName })
+
+const changeTheme = () => {
+  globalTheme.name.value = getNextThemeName()
+}
+
+// Update icon if theme is changed from other sources
+watch(() => globalTheme.name.value, val => {
+  currentThemeName.value = val
+})
+</script>
+
+<template>
+  <IconBtn @click="changeTheme">
+    <VIcon :icon="props.themes[currentThemeIndex].icon" />
+    <VTooltip
+      activator="parent"
+      open-delay="1000"
+      scroll-strategy="close"
+    >
+      <span class="text-capitalize">{{ currentThemeName }}</span>
+    </VTooltip>
+  </IconBtn>
+</template>

src/admin/src/@core/components/cards/CardStatisticsHorizontal.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  color?: string
+  icon: string
+  stats: number
+  change: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'primary',
+})
+
+const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
+</script>
+
+<template>
+  <VCard>
+    <VCardText class="d-flex align-center">
+      <VAvatar
+        size="44"
+        rounded
+        :color="props.color"
+        variant="tonal"
+        class="me-4"
+      >
+        <VIcon
+          :icon="props.icon"
+          size="30"
+        />
+      </VAvatar>
+
+      <div>
+        <span class="text-caption">{{ props.title }}</span>
+        <div class="d-flex align-center flex-wrap">
+          <span class="text-h6 font-weight-semibold">{{ kFormatter(props.stats) }}</span>
+          <div
+            v-if="props.change"
+            :class="`${isPositive ? 'text-success' : 'text-error'} mt-1`"
+          >
+            <VIcon
+              :icon="isPositive ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'"
+              size="24"
+            />
+            <span class="text-base">
+              {{ Math.abs(props.change) }}%
+            </span>
+          </div>
+        </div>
+      </div>
+    </VCardText>
+  </VCard>
+</template>

src/admin/src/@core/components/cards/CardStatisticsVertical.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  color?: string
+  icon: string
+  stats: string
+  change: number
+  subtitle: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'primary',
+})
+
+const isPositive = computed(() => Math.sign(props.change) === 1)
+
+const moreList = [
+  { title: 'Share', value: 'Share' },
+  { title: 'Refresh', value: 'Refresh' },
+  { title: 'Update', value: 'Update' },
+]
+</script>
+
+<template>
+  <VCard>
+    <VCardText class="d-flex align-center">
+      <VAvatar
+        v-if="props.icon"
+        size="40"
+        :color="props.color"
+        class="elevation-2"
+      >
+        <VIcon
+          :icon="props.icon"
+          size="24"
+        />
+      </VAvatar>
+
+      <VSpacer />
+
+      <MoreBtn
+        class="me-n3 mt-n1"
+        :menu-list="moreList"
+      />
+    </VCardText>
+
+    <VCardText>
+      <h6 class="text-h6 mb-1">
+        {{ props.title }}
+      </h6>
+
+      <div
+        v-if="props.change"
+        class="d-flex align-center mb-1 flex-wrap"
+      >
+        <h4 class="text-h4 me-2">
+          {{ props.stats }}
+        </h4>
+        <div
+          :class="isPositive ? 'text-success' : 'text-error'"
+          class="text-body-1"
+        >
+          {{ isPositive ? `+${props.change}` : props.change }}%
+        </div>
+      </div>
+      <div class="text-body-2">
+        {{ props.subtitle }}
+      </div>
+    </VCardText>
+  </VCard>
+</template>

src/admin/src/@core/components/cards/CardStatisticsWithImages.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  subtitle: string
+  stats: string
+  change: number
+  image: string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'primary',
+})
+
+const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
+</script>
+
+<template>
+  <VCard class="overflow-visible">
+    <div class="d-flex position-relative">
+      <VCardText>
+        <h6 class="text-base font-weight-semibold mb-4">
+          {{ props.title }}
+        </h6>
+        <div class="d-flex align-center flex-wrap mb-4">
+          <h5 class="text-h5 font-weight-semibold me-2">
+            {{ props.stats }}
+          </h5>
+          <span
+            class="text-caption"
+            :class="isPositive ? 'text-success' : 'text-error'"
+          >
+            {{ isPositive ? `+${props.change}` : props.change }}%
+          </span>
+        </div>
+
+        <VChip
+          v-if="props.subtitle"
+          size="small"
+          :color="props.color"
+        >
+          {{ props.subtitle }}
+        </VChip>
+      </VCardText>
+
+      <VSpacer />
+
+      <div class="illustrator-img">
+        <VImg
+          v-if="props.image"
+          :src="props.image"
+          :width="110"
+        />
+      </div>
+    </div>
+  </VCard>
+</template>
+
+<style lang="scss">
+.illustrator-img {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 5%;
+}
+</style>

src/admin/src/@core/scss/base/_components.scss

@@ -0,0 +1,191 @@
+@use "mixins";
+@use "@layouts/styles/placeholders";
+@use "@layouts/styles/mixins" as layoutMixins;
+@use "@configured-variables" as variables;
+@use "@styles/variables/_vuetify.scss" as vuetify;
+
+// 👉 Avatar group
+.v-avatar-group {
+  display: flex;
+  align-items: center;
+
+  > * {
+    &:not(:first-child) {
+      margin-inline-start: -0.8rem;
+    }
+
+    transition: transform 0.25s ease, box-shadow 0.15s ease;
+
+    &:hover {
+      z-index: 2;
+      transform: translateY(-5px) scale(1.05);
+
+      @include mixins.elevation(3);
+    }
+  }
+
+  > .v-avatar {
+    border: 2px solid rgb(var(--v-theme-surface));
+    transition: transform 0.15s ease;
+  }
+}
+
+// 👉 Button outline with default color border color
+.v-alert--variant-outlined,
+.v-avatar--variant-outlined,
+.v-btn.v-btn--variant-outlined,
+.v-card--variant-outlined,
+.v-chip--variant-outlined,
+.v-list-item--variant-outlined {
+  &:not([class*="text-"]) {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+
+  &.text-default {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+}
+
+// 👉 Custom Input
+.v-label.custom-input {
+  padding: 1rem;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  opacity: 1;
+  white-space: normal;
+
+  &:hover {
+    border-color: rgba(var(--v-border-color), 0.25);
+  }
+
+  &.active {
+    border-color: rgb(var(--v-theme-primary));
+
+    .v-icon {
+      color: rgb(var(--v-theme-primary)) !important;
+    }
+  }
+
+  &.custom-checkbox,
+  &.custom-radio {
+    .v-input__control {
+      grid-area: none;
+    }
+  }
+}
+
+// 👉 Datatable
+.v-data-table-footer__pagination {
+  @include layoutMixins.rtl {
+    .v-btn {
+      .v-icon {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+
+// Dialog responsive width
+.v-dialog {
+  // dialog custom close btn
+  .v-dialog-close-btn {
+    position: absolute;
+    z-index: 1;
+    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
+    inset-block-start: 0.5rem;
+    inset-inline-end: 0.5rem;
+
+    .v-btn__overlay {
+      display: none;
+    }
+  }
+
+  .v-card {
+    @extend %style-scroll-bar;
+  }
+}
+
+@media (min-width: 600px) {
+  .v-dialog {
+    &.v-dialog-sm,
+    &.v-dialog-lg,
+    &.v-dialog-xl {
+      .v-overlay__content {
+        inline-size: 565px !important;
+      }
+    }
+  }
+}
+
+@media (min-width: 960px) {
+  .v-dialog {
+    &.v-dialog-lg,
+    &.v-dialog-xl {
+      .v-overlay__content {
+        inline-size: 865px !important;
+      }
+    }
+  }
+}
+
+@media (min-width: 1264px) {
+  .v-dialog.v-dialog-xl {
+    .v-overlay__content {
+      inline-size: 1165px !important;
+    }
+  }
+}
+
+// 👉 Expansion panel
+.v-expansion-panels.customized-panels {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: vuetify.$border-radius-root;
+
+  .v-expansion-panel-title {
+    background-color: rgb(var(--v-theme-expansion-panel-text-custom-bg));
+    border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+    margin-block-end: -1px;
+  }
+
+  .v-expansion-panel-text__wrapper {
+    padding: 20px;
+  }
+}
+
+// v-tab with pill support
+.v-tabs.v-tabs-pill {
+  .v-tab.v-btn {
+    border-radius: 0.25rem !important;
+    transition: none;
+
+    .v-tab__slider {
+      visibility: hidden;
+    }
+  }
+}
+
+// loop for all colors bg
+@each $color-name in variables.$theme-colors-name {
+  body .v-tabs.v-tabs-pill {
+    .v-slide-group__content {
+      gap: 0.25rem;
+    }
+    .v-tab--selected.text-#{$color-name} {
+      background-color: rgb(var(--v-theme-#{$color-name}));
+      color: rgb(var(--v-theme-on-#{$color-name})) !important;
+    }
+  }
+}
+
+// ℹ️ We are make even width of all v-timeline body
+.v-timeline--vertical.v-timeline {
+  .v-timeline-item {
+    .v-timeline-item__body {
+      justify-self: stretch !important;
+    }
+  }
+}
+
+// 👉 Switch
+.v-switch .v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb {
+  color: #fff !important;
+}

src/admin/src/@core/scss/base/_dark.scss

@@ -0,0 +1,16 @@
+@use "@configured-variables" as variables;
+
+// ————————————————————————————————————
+// * ——— Perfect Scrollbar
+// ————————————————————————————————————
+
+body.v-theme--dark {
+  .ps__rail-y,
+  .ps__rail-x {
+    background-color: transparent !important;
+  }
+
+  .ps__thumb-y {
+    background-color: variables.$plugin-ps-thumb-y-dark;
+  }
+}

src/admin/src/@core/scss/base/_default-layout-w-vertical-nav.scss

@@ -0,0 +1,103 @@
+@use "@configured-variables" as variables;
+@use "@core/scss/base/placeholders" as *;
+@use "@core/scss/template/placeholders" as *;
+@use "misc";
+@use "@core/scss/base/mixins";
+
+$header: ".layout-navbar";
+
+@if variables.$layout-vertical-nav-navbar-is-contained {
+  $header: ".layout-navbar .navbar-content-container";
+}
+
+.layout-wrapper.layout-nav-type-vertical {
+  // SECTION  Layout Navbar
+  // 👉 Elevated navbar
+  @if variables.$vertical-nav-navbar-style == "elevated" {
+    // Add transition
+    #{$header} {
+      transition: padding 0.2s ease, background-color 0.18s ease;
+    }
+
+    // If navbar is contained => Add border radius to header
+    @if variables.$layout-vertical-nav-navbar-is-contained {
+      #{$header} {
+        border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+      }
+    }
+
+    // Scrolled styles for sticky navbar
+    @at-root {
+      /* ℹ️ This html selector with not selector is required when:
+        dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and our style broke
+    */
+      html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky,
+      &.window-scrolled.layout-navbar-sticky {
+
+        #{$header} {
+          @extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
+          @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
+        }
+
+        .navbar-blur#{$header} {
+          @extend %blurry-bg;
+        }
+      }
+    }
+  }
+
+  // 👉 Floating navbar
+  @else if  variables.$vertical-nav-navbar-style == "floating" {
+    // ℹ️ Regardless of navbar is contained or not => Apply overlay to .layout-navbar
+    .layout-navbar {
+      &.navbar-blur {
+        @extend %default-layout-vertical-nav-floating-navbar-overlay;
+      }
+    }
+
+    &:not(.layout-navbar-sticky) {
+      #{$header} {
+        margin-block-start: variables.$vertical-nav-floating-navbar-top;
+      }
+    }
+
+    #{$header} {
+      @if variables.$layout-vertical-nav-navbar-is-contained {
+        border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+      }
+
+      background-color: rgb(var(--v-theme-surface));
+
+      @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
+    }
+
+    .navbar-blur#{$header} {
+      @extend %blurry-bg;
+    }
+  }
+
+  // !SECTION
+
+  // 👉 Layout footer
+  .layout-footer {
+    $ele-layout-footer: &;
+
+    .footer-content-container {
+      border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness 0 0;
+
+      // Sticky footer
+      @at-root {
+        // ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer
+        .layout-footer-sticky#{$ele-layout-footer} {
+          .footer-content-container {
+            background-color: rgb(var(--v-theme-surface));
+            padding-block: 0;
+            padding-inline: 1.2rem;
+
+            @include mixins.elevation(3);
+          }
+        }
+      }
+    }
+  }
+}

src/admin/src/@core/scss/base/_default-layout.scss

@@ -0,0 +1,16 @@
+@use "@core/scss/base/placeholders";
+@use "@core/scss/base/variables";
+
+.layout-vertical-nav,
+.layout-horizontal-nav {
+  ol,
+  ul {
+    list-style: none;
+  }
+}
+
+.layout-navbar {
+  @if variables.$navbar-high-emphasis-text {
+    @extend %layout-navbar;
+  }
+}

src/admin/src/@core/scss/base/_index.scss

@@ -0,0 +1,40 @@
+@use "sass:map";
+
+// Layout
+@use "vertical-nav";
+@use "default-layout";
+@use "default-layout-w-vertical-nav";
+
+// Layouts package
+@use "layouts";
+
+// Components
+@use "components";
+
+// Utilities
+@use "utilities";
+
+// Misc
+@use "misc";
+
+// Dark
+@use "dark";
+
+// libs
+@use "libs/perfect-scrollbar";
+
+a {
+  color: rgb(var(--v-theme-primary));
+  text-decoration: none;
+}
+
+// Vuetify 3 don't provide margin bottom style like vuetify 2
+p {
+  margin-block-end: 1rem;
+}
+
+// Iconify icon size
+svg.iconify {
+  block-size: 1em;
+  inline-size: 1em;
+}

src/admin/src/@core/scss/base/_layouts.scss

@@ -0,0 +1,63 @@
+@use "@configured-variables" as variables;
+
+/* ℹ️ This styles extends the existing layout package's styles for handling cases that aren't related to layouts package */
+
+/*
+  ℹ️ When we use v-layout as immediate first child of `.page-content-container`, it adds display:flex and page doesn't get contained height
+*/
+// .layout-wrapper.layout-nav-type-vertical {
+//   &.layout-content-height-fixed {
+//     .page-content-container {
+//       > .v-layout:first-child > :not(.v-navigation-drawer):first-child {
+//         flex-grow: 1;
+//         block-size: 100%;
+//       }
+//     }
+//   }
+// }
+.layout-wrapper.layout-nav-type-vertical {
+  &.layout-content-height-fixed {
+    .page-content-container {
+      > .v-layout:first-child {
+        overflow: hidden;
+        min-block-size: 100%;
+
+        > .v-main {
+          // overflow-y: auto;
+
+          .v-main__wrap > :first-child {
+            block-size: 100%;
+            overflow-y: auto;
+          }
+        }
+      }
+    }
+  }
+}
+
+// ℹ️ Let div/v-layout take full height. E.g. Email App
+.layout-wrapper.layout-nav-type-horizontal {
+  &.layout-content-height-fixed {
+    > .layout-page-content {
+      display: flex;
+    }
+  }
+}
+
+// 👉 Floating navbar styles
+@if variables.$vertical-nav-navbar-style == "floating" {
+  // ℹ️ Add spacing above navbar if navbar is floating (was in %layout-navbar-sticky placeholder)
+  body .layout-wrapper.layout-nav-type-vertical.layout-navbar-sticky {
+    .layout-navbar {
+      inset-block-start: variables.$vertical-nav-floating-navbar-top;
+    }
+
+    /*
+      ℹ️ If it's floating navbar
+      Add `vertical-nav-floating-navbar-top` as margin top to .layout-page-content
+    */
+    .layout-page-content {
+      margin-block-start: variables.$vertical-nav-floating-navbar-top;
+    }
+  }
+}

src/admin/src/@core/scss/base/_misc.scss

@@ -0,0 +1,20 @@
+// ℹ️ scrollable-content allows creating fixed header and scrollable content for VNavigationDrawer (Used when perfect scrollbar is used)
+.scrollable-content {
+  &.v-navigation-drawer {
+    .v-navigation-drawer__content {
+      display: flex;
+      overflow: hidden;
+      flex-direction: column;
+    }
+  }
+}
+
+// ℹ️ adding styling for code tag
+code {
+  border-radius: 3px;
+  color: rgb(var(--v-code-color));
+  font-size: 90%;
+  font-weight: 400;
+  padding-block: 0.2em;
+  padding-inline: 0.4em;
+}

src/admin/src/@core/scss/base/_mixins.scss

@@ -0,0 +1,63 @@
+@use "sass:map";
+@use "@styles/variables/vuetify.scss";
+
+@mixin elevation($z, $important: false) {
+  box-shadow: map.get(vuetify.$shadow-key-umbra, $z), map.get(vuetify.$shadow-key-penumbra, $z), map.get(vuetify.$shadow-key-ambient, $z) if($important, !important, null);
+}
+
+// #region before-pseudo
+// ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
+@mixin before-pseudo() {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    border-radius: inherit;
+    background: currentcolor;
+    block-size: 100%;
+    content: "";
+    inline-size: 100%;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+// #endregion before-pseudo
+
+@mixin bordered-skin($component, $border-property: "border", $important: false) {
+  #{$component} {
+    box-shadow: none !important;
+    // stylelint-disable-next-line annotation-no-unknown
+    #{$border-property}: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) if($important, !important, null);
+  }
+}
+
+// #region selected-states
+// ℹ️ Inspired from vuetify's active-states mixin
+// focus => 0.12 & selected => 0.08
+@mixin selected-states($selector) {
+  #{$selector} {
+    opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier));
+  }
+
+  &:hover
+  #{$selector} {
+    opacity: calc(var(--v-selected-opacity) + var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
+  }
+
+  &:focus-visible
+  #{$selector} {
+    opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
+  }
+
+  @supports not selector(:focus-visible) {
+    &:focus {
+      #{$selector} {
+        opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
+      }
+    }
+  }
+}
+
+// #endregion selected-states

src/admin/src/@core/scss/base/_utilities.scss

@@ -0,0 +1,184 @@
+@use "@configured-variables" as variables;
+@use "@layouts/styles/mixins" as layoutsMixins;
+
+/* 👉 Demo spacers */
+
+/* TODO: Use vuetify SCSS variable here; */
+$card-spacer-content: 16px;
+
+.demo-space-x {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-block-start: -$card-spacer-content;
+
+  & > * {
+    margin-block-start: $card-spacer-content;
+    margin-inline-end: $card-spacer-content;
+  }
+}
+
+.demo-space-y {
+  & > * {
+    margin-block-end: $card-spacer-content;
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+  }
+}
+
+// 👉 Card match height
+.match-height.v-row {
+  .v-card {
+    block-size: 100%;
+  }
+}
+
+// 👉 Whitespace
+.whitespace-no-wrap {
+  white-space: nowrap;
+}
+
+// 👉 Colors
+
+/*
+  ℹ️ Vuetify is applying `.text-white` class to badge icon but don't provide its styles
+  Moreover, we also use this class in some places
+
+  ℹ️ In vuetify 2 with `$color-pack: false` SCSS var config this class was getting generated but this is not the case in v3
+
+  ℹ️ We also need !important to get correct color in badge icon
+*/
+.text-white {
+  color: #fff !important;
+}
+
+.text-white-variant {
+  color: rgba(255, 255, 255, var(--v-high-emphasis-opacity));
+}
+
+.text-link {
+  &:not(:hover) {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  }
+}
+
+.bg-var-theme-background {
+  background-color: rgba(var(--v-theme-on-background), var(--v-hover-opacity)) !important;
+}
+
+.bg-global-primary {
+  background-color: rgb(var(--v-theme-primary)) !important;
+  color: rgb(var(--v-theme-on-primary)) !important;
+}
+
+// [/^bg-light-(\w+)$/, ([, w]) => ({ backgroundColor: `rgba(var(--v-theme-${w}), var(--v-activated-opacity))` })],
+@each $color-name in variables.$theme-colors-name {
+  .bg-light-#{$color-name} {
+    background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important;
+  }
+}
+
+// 👉 clamp text
+.clamp-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+}
+
+.custom-badge {
+  .v-badge__badge {
+    border-radius: 6px !important;
+    block-size: 12px !important;
+    inline-size: 12px !important;
+  }
+}
+
+.leading-normal {
+  line-height: normal !important;
+}
+
+// 👉 for rtl only
+.flip-in-rtl {
+  @include layoutsMixins.rtl {
+    transform: scaleX(-1);
+  }
+}
+
+// 👉 Carousel
+.carousel-delimiter-top-end {
+  .v-carousel__controls {
+    justify-content: end;
+    block-size: 40px;
+    inset-block-start: 0;
+    padding-inline: 1rem;
+
+    .v-btn--icon.v-btn--density-default {
+      block-size: calc(var(--v-btn-height) + -10px);
+      color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+      inline-size: calc(var(--v-btn-height) + -8px);
+
+      &.v-btn--active {
+        color: #fff;
+      }
+
+      .v-btn__overlay {
+        opacity: 0;
+      }
+
+      .v-ripple__container {
+        display: none;
+      }
+
+      .v-btn__content {
+        .v-icon {
+          block-size: 8px !important;
+          font-size: 8px !important;
+          inline-size: 8px !important;
+        }
+      }
+    }
+  }
+
+  @each $color-name in variables.$theme-colors-name {
+
+    &.dots-active-#{$color-name} {
+      .v-carousel__controls {
+        .v-btn--active {
+          color: rgb(var(--v-theme-#{$color-name})) !important;
+        }
+      }
+    }
+  }
+}
+
+.v-timeline-item {
+  .app-timeline-title {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.3125rem;
+  }
+
+  .app-timeline-meta {
+    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+    font-size: 12px;
+    line-height: 0.875rem;
+  }
+
+  .app-timeline-text {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+    font-size: 14px;
+    line-height: 1.25rem;
+  }
+
+  .timeline-chip {
+    border-radius: 6px;
+    background: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
+    padding-block: 5px;
+    padding-inline: 10px;
+  }
+}

src/admin/src/@core/scss/base/_utils.scss

@@ -0,0 +1,90 @@
+@use "sass:map";
+@use "sass:list";
+@use "@configured-variables" as variables;
+
+// Thanks: https://css-tricks.com/snippets/sass/deep-getset-maps/
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map.get($map, $key);
+  }
+
+  @return $map;
+}
+
+@function map-deep-set($map, $keys, $value) {
+  $maps: ($map,);
+  $result: null;
+
+  // If the last key is a map already
+  // Warn the user we will be overriding it with $value
+  @if type-of(nth($keys, -1)) == "map" {
+    @warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
+  }
+
+  // If $keys is a single key
+  // Just merge and return
+  @if length($keys) == 1 {
+    @return map-merge($map, ($keys: $value));
+  }
+
+  // Loop from the first to the second to last key from $keys
+  // Store the associated map to this key in the $maps list
+  // If the key doesn't exist, throw an error
+  @for $i from 1 through length($keys) - 1 {
+    $current-key: list.nth($keys, $i);
+    $current-map: list.nth($maps, -1);
+    $current-get: map.get($current-map, $current-key);
+
+    @if not $current-get {
+      @error "Key `#{$key}` doesn't exist at current level in map.";
+    }
+
+    $maps: list.append($maps, $current-get);
+  }
+
+  // Loop from the last map to the first one
+  // Merge it with the previous one
+  @for $i from length($maps) through 1 {
+    $current-map: list.nth($maps, $i);
+    $current-key: list.nth($keys, $i);
+    $current-val: if($i == list.length($maps), $value, $result);
+    $result: map.map-merge($current-map, ($current-key: $current-val));
+  }
+
+  // Return result
+  @return $result;
+}
+
+// font size utility classes
+@each $name, $size in variables.$font-sizes {
+  .text-#{$name} {
+    font-size: $size;
+    line-height: map.get(variables.$font-line-height, $name);
+  }
+}
+
+// truncate utility class
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// gap utility class
+@each $name, $size in variables.$gap {
+  .gap-#{$name} {
+    gap: $size;
+  }
+
+  .gap-x-#{$name} {
+    column-gap: $size;
+  }
+
+  .gap-y-#{$name} {
+    row-gap: $size;
+  }
+}
+
+.list-none {
+  list-style-type: none;
+}