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
@@ -439,6 +438,11 @@ 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/
@@ -469,3 +473,9 @@ lerna-debug.log*
 # 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

.vscode/settings.json

@@ -1,15 +0,0 @@
-{
-    "sqltools.connections": [
-        {
-            "ssh": "Disabled",
-            "previewLimit": 50,
-            "server": "localhost",
-            "port": 5432,
-            "askForPassword": true,
-            "driver": "PostgreSQL",
-            "name": "MicCheck - local",
-            "database": "miccheck",
-            "username": "miccheck"
-        }
-    ]
-}

CLAUDE.md

@@ -1,44 +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 in VueJS
-- `src/api/` - api and restful endpoints in .NET
+- `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
-- Coding should match formating and style rules in the .editorconfig file
+- 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 word 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
-- Create all plans as .md file located in the `docs/` folder.  Admin in `docs/admin/` and API in `docs/api/`
-- Divide up large plans into discrete chucks of functionality so each can be built and committed independently.
-- 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="/src/">
-    <Project Path="src/api/MicCheck.Api/MicCheck.Api.csproj" />
-  </Folder>
-  <Folder Name="/tests/">
-    <Project Path="tests/api/MicCheck.Api.Tests.Unit/MicCheck.Api.Tests.Unit.csproj" />
-  </Folder>
-</Solution>
+<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

@@ -3,27 +3,19 @@ set -e
 
 SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 
-build_api() {
-  echo "Building API..."
-  dotnet publish "$SCRIPT_DIR/src/api/MicCheck.Api/MicCheck.Api.csproj" -c Release -o "$SCRIPT_DIR/src/api/MicCheck.Api/publish"
-  docker compose -f "$SCRIPT_DIR/docker-compose.yml" restart api
-  echo "API done."
-}
+echo "Building solution..."
+dotnet build "$SCRIPT_DIR/MicCheck.slnx"
 
-build_admin() {
-  echo "Building admin..."
-  npm --prefix "$SCRIPT_DIR/src/admin" ci --silent
-  npm --prefix "$SCRIPT_DIR/src/admin" run build
-  docker compose -f "$SCRIPT_DIR/docker-compose.yml" restart admin
-  echo "Admin done."
-}
+echo "Installing admin dependencies..."
+npm --prefix "$SCRIPT_DIR/src/admin" ci --silent
 
-case "${1:-all}" in
-  api)   build_api ;;
-  admin) build_admin ;;
-  all)   build_api && build_admin ;;
-  *)
-    echo "Usage: $0 [api|admin|all]"
-    exit 1
-    ;;
-esac
+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,60 +0,0 @@
-services:
-
-  # ── PostgreSQL ───────────────────────────────────────────────────────────────
-  db:
-    image: postgres:16-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 -d miccheck"]
-      interval: 5s
-      timeout: 5s
-      retries: 10
-
-  # ── .NET API ─────────────────────────────────────────────────────────────────
-  api:
-    build:
-      context: .
-      dockerfile: src/api/MicCheck.Api/Dockerfile
-    ports:
-      - "8080:8080"
-    volumes:
-      - ./src/api/MicCheck.Api/publish:/app
-    environment:
-      ASPNETCORE_ENVIRONMENT: Development
-      ASPNETCORE_URLS: http://+:8080
-      ConnectionStrings__DefaultConnection: "Host=db;Database=miccheck;Username=miccheck;Password=password"
-      Jwt__SecretKey: "miccheck-dev-secret-key-change-in-production!!"
-      Jwt__Issuer: MicCheck
-      Jwt__Audience: MicCheck
-    depends_on:
-      db:
-        condition: service_healthy
-    healthcheck:
-      test: ["CMD-SHELL", "wget -qO- http://localhost:8080/api/v1/health 2>/dev/null || exit 0"]
-      interval: 10s
-      timeout: 5s
-      retries: 5
-      start_period: 20s
-
-  # ── Vue Admin Site (nginx) ───────────────────────────────────────────────────
-  admin:
-    build:
-      context: src/admin
-      dockerfile: Dockerfile
-    ports:
-      - "3000:80"
-    volumes:
-      - ./src/admin/dist:/usr/share/nginx/html
-    depends_on:
-      api:
-        condition: service_started
-
-volumes:
-  postgres_data:

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.

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

@@ -20,6 +20,14 @@ server {
         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;

src/admin/package.json

@@ -1,41 +1,54 @@
-{
-  "name": "mic-check-admin",
-  "version": "1.0.0",
-  "private": true,
-  "scripts": {
-    "build": "vite build",
-    "build:dev": "vite build --mode development",
-    "serve": "vite",
-    "preview": "vite preview",
-    "test": "jest --passWithNoTests"
-  },
-  "dependencies": {
-    "@mdi/js": "^7.4.47",
-    "axios": "^1.15.0",
-    "pinia": "^3.0.4",
-    "vue": "^3.4.0",
-    "vue-router": "^4.3.0",
-    "vuetify": "^3.6.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.24.0",
-    "@babel/preset-env": "^7.24.0",
-    "@babel/preset-typescript": "^7.24.0",
-    "@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",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "sass": "^1.77.2",
-    "ts-jest": "^29.1.4",
-    "typescript": "^5.4.5",
-    "vite": "^8.0.8",
-    "vite-plugin-vuetify": "^2.1.3"
-  },
-  "overrides": {
-    "brace-expansion": "^5.0.5"
-  }
-}
+{
+  "name": "mic-check-admin",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "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": {
+    "@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",
+    "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",
+    "eslint": "^10.4.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "sass": "^1.77.2",
+    "sass-embedded": "^1.77.0",
+    "ts-jest": "^29.1.4",
+    "typescript": "^5.4.5",
+    "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;
+}

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

@@ -0,0 +1,198 @@
+@use "vuetify/lib/styles/tools/functions" as *;
+
+/*
+  TODO: Add docs on when to use placeholder vs when to use SASS variable
+
+  Placeholder
+    - When we want to keep customization to our self between templates use it
+
+  Variables
+    - When we want to allow customization from both user and our side
+    - You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
+*/
+
+@forward "@layouts/styles/variables" with (
+  // Adjust z-index so vertical nav & overlay stays on top of v-layout in v-main. E.g. Email app
+  $layout-vertical-nav-z-index: 1003,
+  $layout-overlay-z-index: 1002,
+);
+@use "@layouts/styles/variables" as *;
+
+// 👉 Default layout
+
+$navbar-high-emphasis-text: true !default;
+
+// @forward "@layouts/styles/variables" with (
+//   $layout-vertical-nav-width: 350px !default,
+// );
+
+$theme-colors-name: (
+  "primary",
+  "secondary",
+  "error",
+  "info",
+  "success",
+  "warning"
+) !default;
+
+// 👉 Default layout with vertical nav
+
+$default-layout-with-vertical-nav-navbar-footer-roundness: 10px !default;
+
+// 👉 Vertical nav
+$vertical-nav-background-color-rgb: var(--v-theme-background) !default;
+$vertical-nav-background-color: rgb(#{$vertical-nav-background-color-rgb}) !default;
+
+// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
+// This is used by nav items & nav header
+$vertical-nav-horizontal-spacing: 1rem !default;
+$vertical-nav-horizontal-padding: 0.75rem !default;
+
+// Vertical nav header height. Mostly we will align it with navbar height;
+$vertical-nav-header-height: $layout-vertical-nav-navbar-height !default;
+$vertical-nav-navbar-elevation: 3 !default;
+$vertical-nav-navbar-style: "elevated" !default; // options: elevated, floating
+$vertical-nav-floating-navbar-top: 1rem !default;
+
+// Vertical nav header padding
+$vertical-nav-header-padding: 1rem $vertical-nav-horizontal-padding !default;
+$vertical-nav-header-inline-spacing: $vertical-nav-horizontal-spacing !default;
+
+// Move logo when vertical nav is mini (collapsed but not hovered)
+$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px !default;
+
+// Space between logo and title
+$vertical-nav-header-logo-title-spacing: 0.9rem !default;
+
+// Section title margin top (when its not first child)
+$vertical-nav-section-title-mt: 1.5rem !default;
+
+// Section title margin bottom
+$vertical-nav-section-title-mb: 0.5rem !default;
+
+// Vertical nav icons
+$vertical-nav-items-icon-size: 1.5rem !default;
+$vertical-nav-items-nested-icon-size: 0.9rem !default;
+$vertical-nav-items-icon-margin-inline-end: 0.5rem !default;
+
+// Transition duration for nav group arrow
+$vertical-nav-nav-group-arrow-transition-duration: 0.15s !default;
+
+// Timing function for nav group arrow
+$vertical-nav-nav-group-arrow-transition-timing-function: ease-in-out !default;
+
+// 👉 Horizontal nav
+
+/*
+    ❗ Heads up
+    ==================
+    Here we assume we will always use shorthand property which will apply same padding on four side
+    This is because this have been used as value of top property by `.popper-content`
+*/
+$horizontal-nav-padding: 0.6875rem !default;
+
+// Gap between top level horizontal nav items
+$horizontal-nav-top-level-items-gap: 4px !default;
+
+// Horizontal nav icons
+$horizontal-nav-items-icon-size: 1.5rem !default;
+$horizontal-nav-third-level-icon-size: 0.9rem !default;
+$horizontal-nav-items-icon-margin-inline-end: 0.625rem !default;
+$horizontal-nav-group-arrow-icon-size: 1.375rem !default;
+
+// ℹ️ We used SCSS variable because we want to allow users to update max height of popper content
+// 120px is combined height of navbar & horizontal nav
+$horizontal-nav-popper-content-max-height: calc(100dvh - 120px - 4rem) !default;
+
+// ℹ️ This variable is used for horizontal nav popper content's `margin-top` and "The bridge"'s height. We need to sync both values.
+$horizontal-nav-popper-content-top: calc($horizontal-nav-padding + 0.375rem) !default;
+
+// 👉 Plugins
+
+$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35) !default;
+
+// 👉 Vuetify
+
+// Used in src/@core/scss/base/libs/vuetify/_overrides.scss
+$vuetify-reduce-default-compact-button-icon-size: true !default;
+
+// 👉 Custom variables
+// for utility classes
+$font-sizes: () !default;
+$font-sizes: map-deep-merge(
+  (
+    "xs": 0.75rem,
+    "sm": 0.875rem,
+    "base": 1rem,
+    "lg": 1.125rem,
+    "xl": 1.25rem,
+    "2xl": 1.5rem,
+    "3xl": 1.875rem,
+    "4xl": 2.25rem,
+    "5xl": 3rem,
+    "6xl": 3.75rem,
+    "7xl": 4.5rem,
+    "8xl": 6rem,
+    "9xl": 8rem
+  ),
+  $font-sizes
+);
+
+// line height
+$font-line-height: () !default;
+$font-line-height: map-deep-merge(
+  (
+    "xs": 1rem,
+    "sm": 1.25rem,
+    "base": 1.5rem,
+    "lg": 1.75rem,
+    "xl": 1.75rem,
+    "2xl": 2rem,
+    "3xl": 2.25rem,
+    "4xl": 2.5rem,
+    "5xl": 1,
+    "6xl": 1,
+    "7xl": 1,
+    "8xl": 1,
+    "9xl": 1
+  ),
+  $font-line-height
+);
+
+// gap utility class
+$gap: () !default;
+$gap: map-deep-merge(
+  (
+    "0": 0,
+    "1": 0.25rem,
+    "2": 0.5rem,
+    "3": 0.75rem,
+    "4": 1rem,
+    "5": 1.25rem,
+    "6":1.5rem,
+    "7": 1.75rem,
+    "8": 2rem,
+    "9": 2.25rem,
+    "10": 2.5rem,
+    "11": 2.75rem,
+    "12": 3rem,
+    "14": 3.5rem,
+    "16": 4rem,
+    "20": 5rem,
+    "24": 6rem,
+    "28": 7rem,
+    "32": 8rem,
+    "36": 9rem,
+    "40": 10rem,
+    "44": 11rem,
+    "48": 12rem,
+    "52": 13rem,
+    "56": 14rem,
+    "60": 15rem,
+    "64": 16rem,
+    "72": 18rem,
+    "80": 20rem,
+    "96": 24rem
+  ),
+  $gap
+);

src/admin/src/@core/scss/base/_vertical-nav.scss

@@ -0,0 +1,259 @@
+@use "@core/scss/base/placeholders" as *;
+@use "@core/scss/template/placeholders" as *;
+@use "@layouts/styles/mixins" as layoutsMixins;
+@use "@configured-variables" as variables;
+@use "@core/scss/base/mixins" as mixins;
+@use "vuetify/lib/styles/tools/states" as vuetifyStates;
+
+.layout-nav-type-vertical {
+  // 👉 Layout Vertical nav
+  .layout-vertical-nav {
+    $sl-layout-nav-type-vertical: &;
+
+    @extend %nav;
+
+    @at-root {
+      // ℹ️ Add styles for collapsed vertical nav
+      .layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}.hovered {
+        @include mixins.elevation(6);
+      }
+    }
+
+    background-color: variables.$vertical-nav-background-color;
+
+    // 👉 Nav header
+    .nav-header {
+      overflow: hidden;
+      padding: variables.$vertical-nav-header-padding;
+      margin-inline: variables.$vertical-nav-header-inline-spacing;
+      min-block-size: variables.$vertical-nav-header-height;
+
+      // TEMPLATE: Check if we need to move this to master
+      .app-logo {
+        flex-shrink: 0;
+        transition: transform 0.25s ease-in-out;
+
+        @at-root {
+          // Move logo a bit to align center with the icons in vertical nav mini variant
+          .layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}:not(.hovered) .nav-header .app-logo {
+            transform: translateX(variables.$vertical-nav-header-logo-translate-x-when-vertical-nav-mini);
+
+            @include layoutsMixins.rtl {
+              transform: translateX(-(variables.$vertical-nav-header-logo-translate-x-when-vertical-nav-mini));
+            }
+          }
+        }
+      }
+
+      .app-title {
+        margin-inline-start: variables.$vertical-nav-header-logo-title-spacing;
+      }
+
+      .header-action {
+        @extend %nav-header-action;
+      }
+    }
+
+    // 👉 Nav items shadow
+    .vertical-nav-items-shadow {
+      position: absolute;
+      z-index: 1;
+      background:
+        linear-gradient(
+          rgb(#{variables.$vertical-nav-background-color-rgb}) 5%,
+          rgba(#{variables.$vertical-nav-background-color-rgb}, 75%) 45%,
+          rgba(#{variables.$vertical-nav-background-color-rgb}, 20%) 80%,
+          transparent
+        );
+      block-size: 55px;
+      inline-size: 100%;
+      inset-block-start: calc(#{variables.$vertical-nav-header-height} - 2px);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.15s ease-in-out;
+      will-change: opacity;
+
+      @include layoutsMixins.rtl {
+        transform: translateX(8px);
+      }
+    }
+
+    &.scrolled {
+      .vertical-nav-items-shadow {
+        opacity: 1;
+      }
+    }
+
+    // ℹ️ Setting z-index 1 will make perfect scrollbar thumb appear on top of vertical nav items shadow;
+    .ps__rail-y {
+      z-index: 1;
+    }
+
+    // 👉 Nav section title
+    .nav-section-title {
+      @extend %vertical-nav-item;
+      @extend %vertical-nav-section-title;
+
+      margin-block-end: variables.$vertical-nav-section-title-mb;
+
+      &:not(:first-child) {
+        margin-block-start: variables.$vertical-nav-section-title-mt;
+      }
+
+      .placeholder-icon {
+        margin-inline: auto;
+      }
+    }
+
+    // Nav item badge
+    .nav-item-badge {
+      @extend %vertical-nav-item-badge;
+    }
+
+    // 👉 Nav group & Link
+    .nav-link,
+    .nav-group {
+      overflow: hidden;
+
+      > :first-child {
+        @extend %vertical-nav-item;
+        @extend %vertical-nav-item-interactive;
+      }
+
+      .nav-item-icon {
+        @extend %vertical-nav-items-icon;
+      }
+
+      &.disabled {
+        opacity: var(--v-disabled-opacity);
+        pointer-events: none;
+      }
+
+      a {
+        outline: none;
+      }
+    }
+
+    // 👉 Vertical nav link
+    .nav-link {
+      @extend %nav-link;
+
+      > .router-link-exact-active {
+        @extend %nav-link-active;
+      }
+
+      > a {
+        // Adds before psudo element to style hover state
+        @include mixins.before-pseudo;
+
+        // Adds vuetify states
+
+        &:not(.router-link-active, .router-link-exact-active) {
+          @include vuetifyStates.states($active: false);
+        }
+      }
+    }
+
+    // 👉 Vertical nav group
+    .nav-group {
+      // Reduce the size of icon if link/group is inside group
+      .nav-group,
+      .nav-link {
+        .nav-item-icon {
+          @extend %vertical-nav-items-nested-icon;
+        }
+      }
+
+      // Hide icons after 2nd level
+      & .nav-group {
+        .nav-link,
+        .nav-group {
+          .nav-item-icon {
+            @extend %vertical-nav-items-icon-after-2nd-level;
+          }
+        }
+      }
+
+      .nav-group-arrow {
+        flex-shrink: 0;
+        transform-origin: center;
+        transition: transform variables.$vertical-nav-nav-group-arrow-transition-duration variables.$vertical-nav-nav-group-arrow-transition-timing-function;
+        will-change: transform;
+      }
+
+      // Rotate arrow icon if group is opened
+      &.open {
+        > .nav-group-label .nav-group-arrow {
+          transform: rotateZ(90deg);
+        }
+      }
+
+      // Nav group label
+      > :first-child {
+        // Adds before psudo element to style hover state
+        @include mixins.before-pseudo;
+      }
+
+      &:not(.active,.open) > :first-child {
+        // Adds vuetify states
+        @include vuetifyStates.states($active: false);
+      }
+
+      // Active & open states for nav group label
+      &.active,
+      &.open {
+        > :first-child {
+          @extend %vertical-nav-group-open-active;
+        }
+      }
+    }
+  }
+}
+
+// SECTION: Transitions
+.vertical-nav-section-title-enter-active,
+.vertical-nav-section-title-leave-active {
+  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
+}
+
+.vertical-nav-section-title-enter-from,
+.vertical-nav-section-title-leave-to {
+  opacity: 0;
+  transform: translateX(15px);
+
+  @include layoutsMixins.rtl {
+    transform: translateX(-15px);
+  }
+}
+
+.transition-slide-x-enter-active,
+.transition-slide-x-leave-active {
+  transition: opacity 0.1s ease-in-out, transform 0.12s ease-in-out;
+}
+
+.transition-slide-x-enter-from,
+.transition-slide-x-leave-to {
+  opacity: 0;
+  transform: translateX(-15px);
+
+  @include layoutsMixins.rtl {
+    transform: translateX(15px);
+  }
+}
+
+.vertical-nav-app-title-enter-active,
+.vertical-nav-app-title-leave-active {
+  transition: opacity 0.1s ease-in-out, transform 0.12s ease-in-out;
+}
+
+.vertical-nav-app-title-enter-from,
+.vertical-nav-app-title-leave-to {
+  opacity: 0;
+  transform: translateX(-15px);
+
+  @include layoutsMixins.rtl {
+    transform: translateX(15px);
+  }
+}
+
+// !SECTION

src/admin/src/@core/scss/base/libs/_perfect-scrollbar.scss

@@ -0,0 +1,35 @@
+$ps-size: 0.25rem;
+$ps-hover-size: 0.375rem;
+$ps-track-size: 0.5rem;
+
+.ps__thumb-y {
+  inline-size: $ps-size !important;
+  inset-inline-end: 0.0625rem;
+}
+
+.ps__thumb-y,
+.ps__thumb-x {
+  background-color: rgb(var(--v-theme-perfect-scrollbar-thumb)) !important;
+}
+
+.ps__thumb-x {
+  block-size: $ps-size !important;
+}
+
+.ps__rail-x {
+  background: transparent !important;
+  block-size: $ps-track-size;
+}
+
+.ps__rail-y {
+  background: transparent !important;
+  inline-size: $ps-track-size !important;
+  inset-inline-end: 0.125rem !important;
+  inset-inline-start: unset !important;
+}
+
+.ps__rail-y.ps--clicking .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y:hover > .ps__thumb-y {
+  inline-size: $ps-hover-size !important;
+}

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

@@ -0,0 +1 @@
+@use "overrides";

src/admin/src/@core/scss/base/libs/vuetify/_overrides.scss

@@ -0,0 +1,257 @@
+@use "@core/scss/base/utils";
+@use "@configured-variables" as variables;
+
+// 👉 Application
+// ℹ️ We need accurate vh in mobile devices as well
+.v-application__wrap {
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  min-height: 100dvh;
+}
+
+// 👉 Typography
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.text-h1,
+.text-h2,
+.text-h3,
+.text-h4,
+.text-h5,
+.text-h6,
+.text-button,
+.text-overline,
+.v-card-title {
+  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+}
+
+body,
+.text-body-1,
+.text-body-2,
+.text-subtitle-1,
+.text-subtitle-2 {
+  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+}
+
+// 👉 Grid
+// Remove margin-bottom of v-input_details inside grid (validation error message)
+.v-row {
+  .v-col,
+  [class^="v-col-*"] {
+    .v-input__details {
+      margin-block-end: 0;
+    }
+  }
+}
+
+// 👉 Button
+@if variables.$vuetify-reduce-default-compact-button-icon-size {
+  .v-btn--density-compact.v-btn--size-default {
+    .v-btn__content > svg {
+      block-size: 22px;
+      font-size: 22px;
+      inline-size: 22px;
+    }
+  }
+}
+
+// 👉 Card
+// Removes padding-top for immediately placed v-card-text after itself
+.v-card-text {
+  & + & {
+    padding-block-start: 0 !important;
+  }
+}
+
+/*
+  👉 Checkbox & Radio Ripple
+
+  TODO Checkbox and switch component. Remove it when vuetify resolve the extra spacing: https://github.com/vuetifyjs/vuetify/issues/15519
+  We need this because form elements likes checkbox and switches are by default set to height of textfield height which is way big than we want
+  Tested with checkbox & switches
+*/
+.v-checkbox.v-input,
+.v-switch.v-input {
+  --v-input-control-height: auto;
+
+  flex: unset;
+}
+
+.v-radio-group {
+  .v-selection-control-group {
+    .v-radio:not(:last-child) {
+      margin-inline-end: 0.9rem;
+    }
+  }
+}
+
+/*
+  👉 Tabs
+  Disable tab transition
+
+  This is for tabs where we don't have card wrapper to tabs and have multiple cards as tab content.
+
+  This class will disable transition and adds `overflow: unset` on `VWindow` to allow spreading shadow
+*/
+.disable-tab-transition {
+  overflow: unset !important;
+
+  .v-window__container {
+    block-size: auto !important;
+  }
+
+  .v-window-item:not(.v-window-item--active) {
+    display: none !important;
+  }
+
+  .v-window__container .v-window-item {
+    transform: none !important;
+  }
+}
+
+// 👉 List
+.v-list {
+  // Set icons opacity to .87
+  .v-list-item__prepend > .v-icon,
+  .v-list-item__append > .v-icon {
+    opacity: var(--v-high-emphasis-opacity);
+  }
+}
+
+// 👉 Card list
+
+/*
+  ℹ️ Custom class
+
+  Remove list spacing inside card
+
+  This is because card title gets padding of 20px and list item have padding of 16px. Moreover, list container have padding-bottom as well.
+*/
+.card-list {
+  --v-card-list-gap: 20px;
+
+  &.v-list {
+    padding-block: 0;
+  }
+
+  .v-list-item {
+    min-block-size: unset;
+    min-block-size: auto !important;
+    padding-block: 0 !important;
+    padding-inline: 0 !important;
+
+    > .v-ripple__container {
+      opacity: 0;
+    }
+
+    &:not(:last-child) {
+      padding-block-end: var(--v-card-list-gap) !important;
+    }
+  }
+
+  .v-list-item:hover,
+  .v-list-item:focus,
+  .v-list-item:active,
+  .v-list-item.active {
+    > .v-list-item__overlay {
+      opacity: 0 !important;
+    }
+  }
+}
+
+// 👉 Divider
+.v-divider {
+  color: rgb(var(--v-border-color));
+}
+
+.v-divider.v-divider--vertical {
+  block-size: inherit;
+}
+
+// 👉 DataTable
+.v-data-table {
+  /* stylelint-disable-next-line no-descending-specificity */
+  .v-checkbox-btn .v-selection-control__wrapper {
+    margin-inline-start: 0 !important;
+  }
+
+  .v-selection-control {
+    display: flex !important;
+  }
+
+  .v-pagination {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  }
+}
+
+// 👉 v-field
+.v-field:hover .v-field__outline {
+  --v-field-border-opacity: var(--v-medium-emphasis-opacity);
+}
+
+// 👉 VLabel
+.v-label {
+  opacity: 1 !important;
+
+  &:not(.v-field-label--floating) {
+    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+  }
+}
+
+// 👉 Overlay
+.v-overlay__scrim,
+.v-navigation-drawer__scrim {
+  background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity)) !important;
+  opacity: 1 !important;
+}
+
+// 👉 VMessages
+.v-messages {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  opacity: 1 !important;
+}
+
+// 👉 Alert close btn
+.v-alert__close {
+  .v-btn--icon .v-icon {
+    --v-icon-size-multiplier: 1.5;
+  }
+}
+
+// 👉 Badge icon alignment
+.v-badge__badge {
+  display: flex;
+  align-items: center;
+}
+
+// 👉 Btn focus outline style removed
+.v-btn:focus-visible::after {
+  opacity: 0 !important;
+}
+
+// .v-select chip spacing for slot
+.v-input:not(.v-select--chips) .v-select__selection {
+  .v-chip {
+    margin-block: 2px var(--select-chips-margin-bottom);
+  }
+}
+
+// 👉 VCard and VList subtitle color
+.v-card-subtitle,
+.v-list-item-subtitle {
+  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+}
+
+// 👉 placeholders
+.v-field__input {
+  @at-root {
+    & input::placeholder,
+    input#{&}::placeholder,
+    textarea#{&}::placeholder {
+      color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
+      opacity: 1 !important;
+    }
+  }
+}

src/admin/src/@core/scss/base/libs/vuetify/_variables.scss

@@ -0,0 +1,64 @@
+@use "sass:map";
+
+/* 👉 Shadow opacities */
+$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
+$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
+$shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
+
+/* 👉 Card transition properties */
+$card-transition-property-custom: box-shadow, opacity;
+
+@forward "vuetify/settings" with (
+  // 👉 General settings
+  $color-pack: false !default,
+
+  // 👉 Shadow opacity
+  $shadow-key-umbra-opacity: $shadow-key-umbra-opacity-custom !default,
+  $shadow-key-penumbra-opacity: $shadow-key-penumbra-opacity-custom !default,
+  $shadow-key-ambient-opacity: $shadow-key-ambient-opacity-custom !default,
+
+    // 👉 Card
+  $card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
+  $card-elevation: 6 !default,
+  $card-title-line-height: 1.6 !default,
+  $card-actions-min-height: unset !default,
+  $card-text-padding: 1.25rem !default,
+  $card-item-padding: 1.25rem !default,
+  $card-actions-padding: 0 12px 12px !default,
+  $card-transition-property: $card-transition-property-custom !default,
+  $card-subtitle-opacity: 1 !default,
+
+  // 👉 Expansion Panel
+  $expansion-panel-active-title-min-height: 48px !default,
+
+  // 👉 List
+  $list-item-icon-margin-end: 16px !default,
+  $list-item-icon-margin-start: 16px !default,
+  $list-item-subtitle-opacity: 1 !default,
+
+  // 👉 Navigation Drawer
+  $navigation-drawer-content-overflow-y: hidden !default,
+
+  // 👉 Tooltip
+  $tooltip-background-color: rgba(59, 55, 68, 0.9) !default,
+  $tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
+  $tooltip-font-size: 0.75rem !default,
+
+  $button-icon-density: ("default": 2, "comfortable": 0, "compact": -1 ) !default,
+
+   // 👉 VTimeline
+  $timeline-dot-size: 34px !default,
+
+  // 👉 table
+  $table-transition-property:  height !default,
+
+  // 👉 VOverlay
+  $overlay-opacity: 1 !default,
+
+  // 👉 VContainer
+  $container-max-widths: (
+    "xl": 1440px,
+    "xxl": 1440px
+  ) !default,
+
+);

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

@@ -0,0 +1,45 @@
+@use "@configured-variables" as variables;
+@use "misc";
+@use "@core/scss/base/mixins";
+
+%default-layout-vertical-nav-scrolled-sticky-elevated-nav {
+  background-color: rgb(var(--v-theme-surface));
+}
+
+%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
+  @include mixins.elevation(variables.$vertical-nav-navbar-elevation);
+
+  // If navbar is contained => Squeeze navbar content on scroll
+  @if variables.$layout-vertical-nav-navbar-is-contained {
+    padding-inline: 1.2rem;
+  }
+}
+
+%default-layout-vertical-nav-floating-navbar-overlay {
+  isolation: isolate;
+
+  &::after {
+    position: absolute;
+    z-index: -1;
+    /* stylelint-disable property-no-vendor-prefix */
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    /* stylelint-enable */
+    background:
+      linear-gradient(
+        180deg,
+        rgba(var(--v-theme-background), 70%) 44%,
+        rgba(var(--v-theme-background), 43%) 73%,
+        rgba(var(--v-theme-background), 0%)
+      );
+    background-repeat: repeat;
+    block-size: calc(variables.$layout-vertical-nav-navbar-height + variables.$vertical-nav-floating-navbar-top + 0.5rem);
+    content: "";
+    inset-block-start: -(variables.$vertical-nav-floating-navbar-top);
+    inset-inline: 0 0;
+    /* stylelint-disable property-no-vendor-prefix */
+    -webkit-mask: linear-gradient(black, black 18%, transparent 100%);
+    mask: linear-gradient(black, black 18%, transparent 100%);
+    /* stylelint-enable */
+  }
+}

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

@@ -0,0 +1,3 @@
+%layout-navbar {
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}

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

@@ -0,0 +1,5 @@
+@forward "vertical-nav";
+@forward "nav";
+@forward "default-layout";
+@forward "default-layout-vertical-nav";
+@forward "misc";