Prepare frontend master protection

Add the invoicing period object tree translation wrapper to the reviewed non-literal call list; it mirrors the existing flag-list helper pattern.

.github/BRANCH_PROTECTION.md

@@ -0,0 +1,50 @@
+# Default branch protection
+
+The intended repository ruleset is stored in
+[`rulesets/protect-default-branch.json`](rulesets/protect-default-branch.json).
+It targets the configured default branch and requires pull requests, the strict
+`Required CI` check from GitHub Actions, resolved review conversations,
+squash-only merges, and linear history. Branch deletion and force pushes are
+blocked. Qodana remains advisory and is not part of the required gate.
+
+The ruleset's `RepositoryRole` actor ID `5` is GitHub's built-in Administrator
+role. Its `pull_request` bypass mode permits an administrator to bypass rules
+only while merging an existing pull request; it does not permit a direct push.
+
+## Repository settings
+
+Keep squash merge enabled and disable merge commits and rebase merge. Enable
+auto-merge, the update-branch option, and automatic deletion of merged head
+branches. Keep the Actions token read-only and do not allow Actions to approve
+pull-request reviews.
+
+## Activation and verification
+
+1. Confirm a pull request and a `master` push each produce exactly one
+   successful `Required CI` check from GitHub Actions integration `15368`.
+2. For the initial ruleset POST, override the committed JSON's `enforcement`
+   value to `disabled`, then compare GitHub's normalized API response with this
+   file.
+3. PUT the exact committed JSON to the inspected ruleset to activate it.
+4. Open a canary pull request and confirm that pending or failing CI, unresolved
+   conversations, and an out-of-date branch block merging; only squash merge is
+   available.
+5. After merging, confirm the head branch is deleted and the post-merge full
+   E2E, frontend release, and mobile release guards still run.
+
+If validation exposes a blocker, disable the ruleset rather than deleting it so
+its configuration and history remain available.
+
+## Normal publishing flow
+
+Create a scoped feature branch, open a pull request to `master`, wait for
+`Required CI`, update the branch if `master` advanced, resolve every review
+conversation, and squash-merge. For waits expected to exceed 90 seconds, use
+the workspace `scripts/ci-watch.sh` helper instead of repeatedly polling GitHub.
+
+## Break glass
+
+For an incident, an administrator must still open a pull request. Document the
+incident and why the normal gate cannot complete, then use the PR-only bypass
+when merging. Monitor all post-merge workflows and open a follow-up pull request
+for any validation or remediation deferred during the incident.

.github/rulesets/protect-default-branch.json

@@ -0,0 +1,53 @@
+{
+  "name": "Protect default branch",
+  "target": "branch",
+  "enforcement": "active",
+  "bypass_actors": [
+    {
+      "actor_id": 5,
+      "actor_type": "RepositoryRole",
+      "bypass_mode": "pull_request"
+    }
+  ],
+  "conditions": {
+    "ref_name": {
+      "include": ["~DEFAULT_BRANCH"],
+      "exclude": []
+    }
+  },
+  "rules": [
+    {
+      "type": "deletion"
+    },
+    {
+      "type": "non_fast_forward"
+    },
+    {
+      "type": "required_linear_history"
+    },
+    {
+      "type": "pull_request",
+      "parameters": {
+        "allowed_merge_methods": ["squash"],
+        "dismiss_stale_reviews_on_push": false,
+        "require_code_owner_review": false,
+        "require_last_push_approval": false,
+        "required_approving_review_count": 0,
+        "required_review_thread_resolution": true
+      }
+    },
+    {
+      "type": "required_status_checks",
+      "parameters": {
+        "do_not_enforce_on_create": false,
+        "required_status_checks": [
+          {
+            "context": "Required CI",
+            "integration_id": 15368
+          }
+        ],
+        "strict_required_status_checks_policy": true
+      }
+    }
+  ]
+}

.github/workflows/code_quality.yml

@@ -2,9 +2,9 @@ name: Qodana Configuration Upload
 
 on:
   push:
-    branches: [main, dev]
+    branches: [master, beta, canary, internal]
   pull_request:
-    branches: [main]
+    branches: [master, beta, canary, internal]
   workflow_dispatch:
 
 permissions:
@@ -19,7 +19,34 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v5
 
+      - name: Detect Qodana upload prerequisites
+        id: qodana-upload-prerequisites
+        shell: bash
+        env:
+          QODANA_CONFIGURATIONS_TOKEN: ${{ secrets.QODANA_CONFIGURATIONS_TOKEN }}
+        run: |
+          set -euo pipefail
+          config_present=false
+          token_present=false
+          [[ -f qodana-global-configurations.yaml ]] && config_present=true
+          [[ -n "${QODANA_CONFIGURATIONS_TOKEN:-}" ]] && token_present=true
+
+          if [[ "$config_present" == true && "$token_present" == true ]]; then
+            echo "ready=true" >> "$GITHUB_OUTPUT"
+            echo "reason=all prerequisites are configured" >> "$GITHUB_OUTPUT"
+          elif [[ "$config_present" != true && "$token_present" != true ]]; then
+            echo "ready=false" >> "$GITHUB_OUTPUT"
+            echo "reason=qodana-global-configurations.yaml and QODANA_CONFIGURATIONS_TOKEN are missing" >> "$GITHUB_OUTPUT"
+          elif [[ "$config_present" != true ]]; then
+            echo "ready=false" >> "$GITHUB_OUTPUT"
+            echo "reason=qodana-global-configurations.yaml is missing" >> "$GITHUB_OUTPUT"
+          else
+            echo "ready=false" >> "$GITHUB_OUTPUT"
+            echo "reason=QODANA_CONFIGURATIONS_TOKEN is missing" >> "$GITHUB_OUTPUT"
+          fi
+
       - name: Run Qodana Configuration Uploader
+        if: ${{ steps.qodana-upload-prerequisites.outputs.ready == 'true' }}
         env:
           QODANA_CONFIGURATIONS_TOKEN: ${{ secrets.QODANA_CONFIGURATIONS_TOKEN }}
         run: |
@@ -30,3 +57,9 @@ jobs:
             jetbrains/qodana-configuration-uploader@sha256:f4786ceea616048c3401cf0b0345d2220d22a2ec7b046fd48cbbfc522e6efe30 \
             --global-configs-file qodana-global-configurations.yaml \
             --qodana-host https://qodana.cloud
+
+      - name: Skip Qodana Configuration Upload
+        if: ${{ steps.qodana-upload-prerequisites.outputs.ready != 'true' }}
+        env:
+          QODANA_SKIP_REASON: ${{ steps.qodana-upload-prerequisites.outputs.reason }}
+        run: echo "Skipping Qodana configuration upload because ${QODANA_SKIP_REASON}."

.github/workflows/mobile-artifacts.yml

@@ -11,6 +11,36 @@ on:
         description: Store build number/version code
         required: false
         type: string
+      upload_android_to_play:
+        description: Upload the signed Android App Bundle to Google Play
+        required: false
+        type: boolean
+        default: true
+      upload_ios_to_app_store:
+        description: Upload the signed iOS IPA to App Store Connect
+        required: false
+        type: boolean
+        default: true
+      android_track:
+        description: Google Play track for manual dispatches
+        required: false
+        type: choice
+        default: production
+        options:
+          - production
+          - beta
+          - alpha
+          - internal
+      android_release_status:
+        description: Google Play release status for manual dispatches
+        required: false
+        type: choice
+        default: completed
+        options:
+          - completed
+          - draft
+          - inProgress
+          - halted
   push:
     tags:
       - "mobile-v*"
@@ -26,40 +56,81 @@ permissions:
   contents: read
 
 concurrency:
-  group: mobile-store-artifacts-${{ github.ref_name }}
+  group: mobile-store-artifacts-${{ github.event.workflow_run.head_branch || github.ref_name || github.run_id }}
   cancel-in-progress: true
 
 jobs:
   android:
-    name: Android AAB
+    name: Android AAB and Play upload
     if: >
       github.event_name != 'workflow_run' ||
       (github.event.workflow_run.conclusion == 'success' &&
+      github.event.workflow_run.event == 'push' &&
       github.event.workflow_run.head_branch == github.event.repository.default_branch)
-    runs-on: ubuntu-latest
-    timeout-minutes: 45
+    runs-on: ubuntu-24.04
+    environment: mobile-store-production
+    timeout-minutes: 60
+    env:
+      ANDROID_PACKAGE_NAME: ${{ vars.ANDROID_PACKAGE_NAME || 'io.truckwash.twa' }}
+      ANDROID_AAB_PATH: ${{ vars.ANDROID_AAB_PATH || 'android/app/build/outputs/bundle/release/app-release.aab' }}
+      PLAY_STORE_TRACK: ${{ inputs.android_track || vars.PLAY_STORE_TRACK || 'production' }}
+      PLAY_STORE_RELEASE_STATUS: ${{ inputs.android_release_status || vars.PLAY_STORE_RELEASE_STATUS || 'completed' }}
+      PLAY_STORE_USER_FRACTION: ${{ vars.PLAY_STORE_USER_FRACTION || '' }}
+      UPLOAD_ANDROID_TO_PLAY: ${{ github.event_name != 'workflow_dispatch' || inputs.upload_android_to_play }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v5
         with:
           ref: ${{ github.event.workflow_run.head_sha || github.sha }}
 
+      - name: Guard current master release
+        id: release-guard
+        shell: bash
+        env:
+          EVENT_NAME: ${{ github.event_name }}
+          EXPECTED_SHA: ${{ github.event.workflow_run.head_sha || github.sha }}
+          RELEASE_BRANCH: ${{ github.event.workflow_run.head_branch || github.ref_name }}
+          DEFAULT_BRANCH: ${{ github.event.repository.default_branch }}
+        run: |
+          set -euo pipefail
+          current=true
+          if [[ "$EVENT_NAME" == "workflow_run" ]]; then
+            latest_sha="$(git ls-remote origin "refs/heads/$DEFAULT_BRANCH" | awk '{print $1}')"
+            if [[ -z "$latest_sha" ]]; then
+              echo "Could not resolve origin/$DEFAULT_BRANCH." >&2
+              exit 1
+            fi
+            if [[ "$latest_sha" != "$EXPECTED_SHA" ]]; then
+              current=false
+              echo "Skipping stale mobile upload for $EXPECTED_SHA; origin/$DEFAULT_BRANCH is $latest_sha."
+            else
+              echo "Mobile upload commit is current for $DEFAULT_BRANCH."
+            fi
+          else
+            echo "Mobile release guard passed for $EVENT_NAME on $RELEASE_BRANCH."
+          fi
+          echo "current=$current" >> "$GITHUB_OUTPUT"
+
       - name: Setup Node.js
+        if: steps.release-guard.outputs.current == 'true'
         uses: actions/setup-node@v5
         with:
           node-version: 22
           cache: npm
 
       - name: Setup Java
+        if: steps.release-guard.outputs.current == 'true'
         uses: actions/setup-java@v4
         with:
           distribution: temurin
           java-version: 21
 
       - name: Setup Android SDK
+        if: steps.release-guard.outputs.current == 'true'
         uses: android-actions/setup-android@v3
 
       - name: Install Android SDK packages
+        if: steps.release-guard.outputs.current == 'true'
         shell: bash
         run: |
           set -euo pipefail
@@ -67,10 +138,11 @@ jobs:
           sdkmanager "platforms;android-36" "build-tools;36.0.0"
 
       - name: Resolve mobile version
+        if: steps.release-guard.outputs.current == 'true'
         shell: bash
         env:
-          INPUT_VERSION_NAME: ${{ inputs.version_name }}
-          INPUT_VERSION_CODE: ${{ inputs.version_code }}
+          INPUT_VERSION_NAME: ${{ inputs.version_name || '' }}
+          INPUT_VERSION_CODE: ${{ inputs.version_code || '' }}
         run: |
           set -euo pipefail
           version_name="$INPUT_VERSION_NAME"
@@ -84,10 +156,22 @@ jobs:
           echo "MOBILE_VERSION_NAME=$version_name" >> "$GITHUB_ENV"
           echo "MOBILE_VERSION_CODE=$version_code" >> "$GITHUB_ENV"
 
+      - name: Check Android store environment
+        if: steps.release-guard.outputs.current == 'true'
+        env:
+          ANDROID_KEYSTORE_BASE64: ${{ secrets.ANDROID_KEYSTORE_BASE64 }}
+          ANDROID_KEYSTORE_PASSWORD: ${{ secrets.ANDROID_KEYSTORE_PASSWORD }}
+          ANDROID_KEY_ALIAS: ${{ secrets.ANDROID_KEY_ALIAS }}
+          ANDROID_KEY_PASSWORD: ${{ secrets.ANDROID_KEY_PASSWORD }}
+          GOOGLE_PLAY_SERVICE_ACCOUNT_JSON_BASE64: ${{ secrets.GOOGLE_PLAY_SERVICE_ACCOUNT_JSON_BASE64 }}
+        run: node scripts/mobile/check-store-upload-env.mjs --android
+
       - name: Install dependencies
+        if: steps.release-guard.outputs.current == 'true'
         run: npm ci --legacy-peer-deps
 
       - name: Decode Android signing key
+        if: steps.release-guard.outputs.current == 'true'
         shell: bash
         env:
           ANDROID_KEYSTORE_BASE64: ${{ secrets.ANDROID_KEYSTORE_BASE64 }}
@@ -96,10 +180,6 @@ jobs:
           ANDROID_KEY_PASSWORD: ${{ secrets.ANDROID_KEY_PASSWORD }}
         run: |
           set -euo pipefail
-          test -n "$ANDROID_KEYSTORE_BASE64"
-          test -n "$ANDROID_KEYSTORE_PASSWORD"
-          test -n "$ANDROID_KEY_ALIAS"
-          test -n "$ANDROID_KEY_PASSWORD"
           keystore_path="$RUNNER_TEMP/android-release.keystore"
           node -e "const fs = require('fs'); fs.writeFileSync(process.argv[1], Buffer.from(process.env.ANDROID_KEYSTORE_BASE64, 'base64'))" "$keystore_path"
           echo "ANDROID_KEYSTORE_FILE=$keystore_path" >> "$GITHUB_ENV"
@@ -108,48 +188,98 @@ jobs:
           echo "ANDROID_KEY_PASSWORD=$ANDROID_KEY_PASSWORD" >> "$GITHUB_ENV"
 
       - name: Build and sync Android shell
+        if: steps.release-guard.outputs.current == 'true'
         run: |
           npm run mobile:android:sync
           npm run mobile:permissions:check
           npm run mobile:android:signing:check
 
       - name: Build signed Android App Bundle
+        if: steps.release-guard.outputs.current == 'true'
         working-directory: android
         run: ./gradlew --no-daemon bundleRelease
 
       - name: Verify Android App Bundle signature
-        run: jarsigner -verify -certs -verbose android/app/build/outputs/bundle/release/app-release.aab >/dev/null
+        if: steps.release-guard.outputs.current == 'true'
+        run: jarsigner -verify -certs -verbose "$ANDROID_AAB_PATH" >/dev/null
 
       - name: Upload Android artifact
+        if: steps.release-guard.outputs.current == 'true'
         uses: actions/upload-artifact@v4
         with:
           name: truck-wash-android-${{ env.MOBILE_VERSION_NAME }}-${{ github.event.workflow_run.head_sha || github.sha }}
-          path: android/app/build/outputs/bundle/release/app-release.aab
+          path: ${{ env.ANDROID_AAB_PATH }}
           if-no-files-found: error
           retention-days: 14
 
+      - name: Upload Android App Bundle to Google Play
+        if: steps.release-guard.outputs.current == 'true' && env.UPLOAD_ANDROID_TO_PLAY == 'true'
+        env:
+          GOOGLE_PLAY_SERVICE_ACCOUNT_JSON_BASE64: ${{ secrets.GOOGLE_PLAY_SERVICE_ACCOUNT_JSON_BASE64 }}
+        run: npm run mobile:android:play-upload
+
   ios:
-    name: iOS IPA
-    if: github.event_name != 'workflow_run'
-    runs-on: macos-latest
-    timeout-minutes: 60
+    name: iOS IPA and App Store upload
+    if: >
+      github.event_name != 'workflow_run' ||
+      (github.event.workflow_run.conclusion == 'success' &&
+      github.event.workflow_run.event == 'push' &&
+      github.event.workflow_run.head_branch == github.event.repository.default_branch)
+    runs-on: macos-15
+    environment: mobile-store-production
+    timeout-minutes: 90
+    env:
+      IOS_PROJECT_PATH: ios/App/App.xcodeproj
+      IOS_SCHEME: App
+      IOS_BUNDLE_ID: io.truckwash.app
+      UPLOAD_IOS_TO_APP_STORE: ${{ github.event_name != 'workflow_dispatch' || inputs.upload_ios_to_app_store }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v5
         with:
-          ref: ${{ github.sha }}
+          ref: ${{ github.event.workflow_run.head_sha || github.sha }}
+
+      - name: Guard current master release
+        id: release-guard
+        shell: bash
+        env:
+          EVENT_NAME: ${{ github.event_name }}
+          EXPECTED_SHA: ${{ github.event.workflow_run.head_sha || github.sha }}
+          RELEASE_BRANCH: ${{ github.event.workflow_run.head_branch || github.ref_name }}
+          DEFAULT_BRANCH: ${{ github.event.repository.default_branch }}
+        run: |
+          set -euo pipefail
+          current=true
+          if [[ "$EVENT_NAME" == "workflow_run" ]]; then
+            latest_sha="$(git ls-remote origin "refs/heads/$DEFAULT_BRANCH" | awk '{print $1}')"
+            if [[ -z "$latest_sha" ]]; then
+              echo "Could not resolve origin/$DEFAULT_BRANCH." >&2
+              exit 1
+            fi
+            if [[ "$latest_sha" != "$EXPECTED_SHA" ]]; then
+              current=false
+              echo "Skipping stale mobile upload for $EXPECTED_SHA; origin/$DEFAULT_BRANCH is $latest_sha."
+            else
+              echo "Mobile upload commit is current for $DEFAULT_BRANCH."
+            fi
+          else
+            echo "Mobile release guard passed for $EVENT_NAME on $RELEASE_BRANCH."
+          fi
+          echo "current=$current" >> "$GITHUB_OUTPUT"
 
       - name: Setup Node.js
+        if: steps.release-guard.outputs.current == 'true'
         uses: actions/setup-node@v5
         with:
           node-version: 22
           cache: npm
 
       - name: Resolve mobile version
+        if: steps.release-guard.outputs.current == 'true'
         shell: bash
         env:
-          INPUT_VERSION_NAME: ${{ inputs.version_name }}
-          INPUT_VERSION_CODE: ${{ inputs.version_code }}
+          INPUT_VERSION_NAME: ${{ inputs.version_name || '' }}
+          INPUT_VERSION_CODE: ${{ inputs.version_code || '' }}
         run: |
           set -euo pipefail
           version_name="$INPUT_VERSION_NAME"
@@ -163,16 +293,32 @@ jobs:
           echo "MOBILE_VERSION_NAME=$version_name" >> "$GITHUB_ENV"
           echo "MOBILE_VERSION_CODE=$version_code" >> "$GITHUB_ENV"
 
+      - name: Check iOS store environment
+        if: steps.release-guard.outputs.current == 'true'
+        env:
+          IOS_CERTIFICATE_BASE64: ${{ secrets.IOS_CERTIFICATE_BASE64 }}
+          IOS_CERTIFICATE_PASSWORD: ${{ secrets.IOS_CERTIFICATE_PASSWORD }}
+          IOS_PROVISION_PROFILE_BASE64: ${{ secrets.IOS_PROVISION_PROFILE_BASE64 }}
+          IOS_KEYCHAIN_PASSWORD: ${{ secrets.IOS_KEYCHAIN_PASSWORD }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+          APP_STORE_CONNECT_API_KEY_ID: ${{ secrets.APP_STORE_CONNECT_API_KEY_ID }}
+          APP_STORE_CONNECT_ISSUER_ID: ${{ secrets.APP_STORE_CONNECT_ISSUER_ID }}
+          APP_STORE_CONNECT_API_PRIVATE_KEY_BASE64: ${{ secrets.APP_STORE_CONNECT_API_PRIVATE_KEY_BASE64 }}
+        run: node scripts/mobile/check-store-upload-env.mjs --ios
+
       - name: Install dependencies
+        if: steps.release-guard.outputs.current == 'true'
         run: npm ci --legacy-peer-deps
 
       - name: Build and sync iOS shell
+        if: steps.release-guard.outputs.current == 'true'
         run: |
           npm run build
           npx cap sync ios
           npm run mobile:permissions:check
 
       - name: Install Apple signing assets
+        if: steps.release-guard.outputs.current == 'true'
         shell: bash
         env:
           IOS_CERTIFICATE_BASE64: ${{ secrets.IOS_CERTIFICATE_BASE64 }}
@@ -182,12 +328,6 @@ jobs:
           APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
         run: |
           set -euo pipefail
-          test -n "$IOS_CERTIFICATE_BASE64"
-          test -n "$IOS_CERTIFICATE_PASSWORD"
-          test -n "$IOS_PROVISION_PROFILE_BASE64"
-          test -n "$IOS_KEYCHAIN_PASSWORD"
-          test -n "$APPLE_TEAM_ID"
-
           certificate_path="$RUNNER_TEMP/apple-distribution.p12"
           profile_path="$RUNNER_TEMP/app-store.mobileprovision"
           keychain_path="$RUNNER_TEMP/app-signing.keychain-db"
@@ -214,14 +354,35 @@ jobs:
           echo "IOS_PROFILE_UUID=$profile_uuid" >> "$GITHUB_ENV"
           echo "IOS_PROFILE_NAME=$profile_name" >> "$GITHUB_ENV"
 
+      - name: Install App Store Connect API key
+        if: steps.release-guard.outputs.current == 'true' && env.UPLOAD_IOS_TO_APP_STORE == 'true'
+        shell: bash
+        env:
+          APP_STORE_CONNECT_API_KEY_ID: ${{ secrets.APP_STORE_CONNECT_API_KEY_ID }}
+          APP_STORE_CONNECT_ISSUER_ID: ${{ secrets.APP_STORE_CONNECT_ISSUER_ID }}
+          APP_STORE_CONNECT_API_PRIVATE_KEY_BASE64: ${{ secrets.APP_STORE_CONNECT_API_PRIVATE_KEY_BASE64 }}
+        run: |
+          set -euo pipefail
+          private_keys_dir="$RUNNER_TEMP/private_keys"
+          private_key_path="$private_keys_dir/AuthKey_${APP_STORE_CONNECT_API_KEY_ID}.p8"
+          mkdir -p "$private_keys_dir"
+          node -e "const fs = require('fs'); fs.writeFileSync(process.argv[1], Buffer.from(process.env.APP_STORE_CONNECT_API_PRIVATE_KEY_BASE64, 'base64'))" "$private_key_path"
+          chmod 600 "$private_key_path"
+          echo "API_PRIVATE_KEYS_DIR=$private_keys_dir" >> "$GITHUB_ENV"
+          echo "APP_STORE_CONNECT_API_KEY_ID=$APP_STORE_CONNECT_API_KEY_ID" >> "$GITHUB_ENV"
+          echo "APP_STORE_CONNECT_ISSUER_ID=$APP_STORE_CONNECT_ISSUER_ID" >> "$GITHUB_ENV"
+          echo "APP_STORE_CONNECT_API_KEY_PATH=$private_key_path" >> "$GITHUB_ENV"
+
       - name: Resolve Swift packages
-        run: xcodebuild -resolvePackageDependencies -project ios/App/App.xcodeproj -scheme App
+        if: steps.release-guard.outputs.current == 'true'
+        run: xcodebuild -resolvePackageDependencies -project "$IOS_PROJECT_PATH" -scheme "$IOS_SCHEME"
 
       - name: Archive iOS app
+        if: steps.release-guard.outputs.current == 'true'
         run: |
           xcodebuild \
-            -project ios/App/App.xcodeproj \
-            -scheme App \
+            -project "$IOS_PROJECT_PATH" \
+            -scheme "$IOS_SCHEME" \
             -configuration Release \
             -destination "generic/platform=iOS" \
             -archivePath "$RUNNER_TEMP/TruckWash.xcarchive" \
@@ -234,6 +395,7 @@ jobs:
             CURRENT_PROJECT_VERSION="$MOBILE_VERSION_CODE"
 
       - name: Export iOS IPA
+        if: steps.release-guard.outputs.current == 'true'
         shell: bash
         run: |
           set -euo pipefail
@@ -255,7 +417,7 @@ jobs:
             <string>$APPLE_TEAM_ID</string>
             <key>provisioningProfiles</key>
             <dict>
-              <key>io.truckwash.app</key>
+              <key>$IOS_BUNDLE_ID</key>
               <string>$IOS_PROFILE_NAME</string>
             </dict>
             <key>stripSwiftSymbols</key>
@@ -270,15 +432,43 @@ jobs:
             -archivePath "$RUNNER_TEMP/TruckWash.xcarchive" \
             -exportPath "$RUNNER_TEMP/ios-export" \
             -exportOptionsPlist "$export_options"
+          ipa_path="$(find "$RUNNER_TEMP/ios-export" -name '*.ipa' -print -quit)"
+          test -n "$ipa_path"
+          echo "IOS_IPA_PATH=$ipa_path" >> "$GITHUB_ENV"
 
       - name: Upload iOS artifact
+        if: steps.release-guard.outputs.current == 'true'
         uses: actions/upload-artifact@v4
         with:
-          name: truck-wash-ios-${{ env.MOBILE_VERSION_NAME }}-${{ github.sha }}
+          name: truck-wash-ios-${{ env.MOBILE_VERSION_NAME }}-${{ github.event.workflow_run.head_sha || github.sha }}
           path: ${{ runner.temp }}/ios-export/*.ipa
           if-no-files-found: error
           retention-days: 14
 
+      - name: Validate iOS IPA with App Store Connect
+        if: steps.release-guard.outputs.current == 'true' && env.UPLOAD_IOS_TO_APP_STORE == 'true'
+        shell: bash
+        run: |
+          set -euo pipefail
+          xcrun altool \
+            --validate-app \
+            --type ios \
+            --file "$IOS_IPA_PATH" \
+            --apiKey "$APP_STORE_CONNECT_API_KEY_ID" \
+            --apiIssuer "$APP_STORE_CONNECT_ISSUER_ID"
+
+      - name: Upload iOS IPA to App Store Connect
+        if: steps.release-guard.outputs.current == 'true' && env.UPLOAD_IOS_TO_APP_STORE == 'true'
+        shell: bash
+        run: |
+          set -euo pipefail
+          xcrun altool \
+            --upload-app \
+            --type ios \
+            --file "$IOS_IPA_PATH" \
+            --apiKey "$APP_STORE_CONNECT_API_KEY_ID" \
+            --apiIssuer "$APP_STORE_CONNECT_ISSUER_ID"
+
       - name: Clean up Apple signing assets
         if: always()
         shell: bash
@@ -289,3 +479,6 @@ jobs:
           if [[ -n "${IOS_PROFILE_UUID:-}" ]]; then
             rm -f "$HOME/Library/MobileDevice/Provisioning Profiles/$IOS_PROFILE_UUID.mobileprovision"
           fi
+          if [[ -n "${APP_STORE_CONNECT_API_KEY_PATH:-}" ]]; then
+            rm -f "$APP_STORE_CONNECT_API_KEY_PATH"
+          fi

.github/workflows/tests.yml

@@ -48,8 +48,8 @@ permissions:
   contents: read
 
 concurrency:
-  group: frontend-tests-${{ github.workflow }}-${{ github.event_name }}-${{ github.event_name == 'workflow_dispatch' && github.run_id || github.head_ref || github.ref_name }}
-  cancel-in-progress: true
+  group: frontend-tests-${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.event.pull_request.number || github.run_id }}
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
 
 # Repository variables used as CI runner and credit controls:
 # - FRONTEND_CI_STANDARD_RUNNER: JSON runs-on value for format/build/unit jobs.
@@ -511,6 +511,31 @@ jobs:
           if-no-files-found: ignore
           retention-days: 1
 
+  required-ci:
+    if: ${{ always() && (github.event_name == 'pull_request' || github.event_name == 'push') }}
+    name: Required CI
+    needs: [format-tests, build-and-unit, e2e-pr]
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - name: Verify required jobs succeeded
+        shell: bash
+        env:
+          FORMAT_TESTS_RESULT: ${{ needs.format-tests.result }}
+          BUILD_AND_UNIT_RESULT: ${{ needs.build-and-unit.result }}
+          E2E_PR_RESULT: ${{ needs.e2e-pr.result }}
+        run: |
+          set -euo pipefail
+          failed=0
+          for required_job in FORMAT_TESTS_RESULT BUILD_AND_UNIT_RESULT E2E_PR_RESULT; do
+            result="${!required_job:-missing}"
+            if [[ "$result" != "success" ]]; then
+              echo "${required_job}=${result}" >&2
+              failed=1
+            fi
+          done
+          exit "$failed"
+
   e2e-full:
     if: >
       always() &&

.gitignore

@@ -15,6 +15,7 @@ dist-ssr
 coverage
 *.local
 dev-dist
+.playwright-cli/
 
 # Mobile build and signing outputs
 /app/build/

README.md

@@ -16,6 +16,16 @@ See [Vite Configuration Reference](https://vite.dev/config/).
 npm install
 ```
 
+## Contributing Changes
+
+Create a scoped feature branch, push it, and open a pull request targeting
+`master`. Do not push directly to `master`. Merge only after the `Required CI`
+check succeeds, all review conversations are resolved, and the branch is up to
+date. Use squash merge so `master` retains linear history.
+
+See [`.github/BRANCH_PROTECTION.md`](.github/BRANCH_PROTECTION.md) for the
+repository policy, rollout checks, and emergency bypass procedure.
+
 ### Compile and Hot-Reload for Development
 
 ```sh
@@ -183,6 +193,17 @@ the Capacitor Android project. The generator updates `android/app/src/main/res`
 launcher assets, `public/icons/icon-192x192.png`, `public/icons/icon-512x512.png`,
 and `store_icon.png`.
 
+## Mobile Store Releases
+
+Signed Android and iOS store artifacts are built through the GitHub Actions
+`Mobile Store Artifacts` workflow. By default, current `master` after green
+`Automated Tests` uploads Android to Google Play production and uploads iOS to
+App Store Connect.
+
+See `docs/mobile-artifacts.md` for workflow triggers, required secrets, and
+local mobile checks. See `docs/app-store-release.md` for App Store Connect
+release preparation and review notes.
+
 ## Bubblewrap (TWA) Build and Install
 
 To build and install the Trusted Web Activity (TWA) using Bubblewrap, use the following commands:

docs/app-store-release.md

@@ -0,0 +1,102 @@
+# Apple App Store Release Runbook
+
+This runbook covers the public iOS App Store release path for the Truck Wash
+Capacitor app.
+
+## Account And App Record
+
+- Use the Truck Wash ApS Apple Developer account. The Account Holder must accept
+  the latest Apple agreements before builds can be uploaded.
+- Create or verify the App Store Connect app record:
+  - Platform: iOS
+  - Name: Truck Wash Kundeportal
+  - Bundle ID: `io.truckwash.app`
+  - SKU: `truckwash-ios`
+  - Primary language: Danish
+  - Category: Business
+  - Price: Free
+  - Initial availability: Denmark
+- Keep the GitHub environment `mobile-store-production` configured with the
+  iOS signing, App Store Connect, Android signing, and Google Play upload
+  secrets used by the mobile workflow.
+
+## Build And Upload
+
+1. Merge the release commit to `master`.
+2. Confirm `Automated Tests` and `Frontend Release` are green for that commit.
+3. Create a release tag such as `mobile-v1.0.0`.
+4. The `Mobile Store Artifacts` workflow builds Android and iOS artifacts from
+   the tested commit. By default it uploads Android to the Google Play
+   production track and uploads the iOS IPA to App Store Connect.
+5. For a manual upload, dispatch `Mobile Store Artifacts` with `version_name`
+   and `version_code`. Leave `upload_ios_to_app_store` enabled for the iOS
+   upload, or disable it to produce only the signed GitHub artifact.
+
+The same workflow also runs automatically after a successful `Automated Tests`
+run on current `master`. It skips stale workflow-run commits if `master` has
+advanced before the mobile jobs start.
+
+The iOS workflow expects these environment secrets:
+
+- `IOS_CERTIFICATE_BASE64`
+- `IOS_CERTIFICATE_PASSWORD`
+- `IOS_PROVISION_PROFILE_BASE64`
+- `IOS_KEYCHAIN_PASSWORD`
+- `APPLE_TEAM_ID`
+- `APP_STORE_CONNECT_API_KEY_ID`
+- `APP_STORE_CONNECT_ISSUER_ID`
+- `APP_STORE_CONNECT_API_PRIVATE_KEY_BASE64`
+
+The workflow installs the signing certificate and provisioning profile in a
+temporary keychain on the `macos-15` runner, archives the Capacitor Xcode
+project, exports an App Store IPA, validates it with `xcrun altool`, uploads it
+with the App Store Connect API key, and removes temporary signing assets in the
+cleanup step.
+
+## Product Page Defaults
+
+- Support URL: `https://truckwash.io/support`
+- Privacy URL: `https://truckwash.io/privacy-policy`
+- Subtitle: `Book og start truckvask`
+- Promotional text: `Administrer vask, koeretoejer, ordrer og fakturaer fra mobilen.`
+- Keywords: `truck wash,lastbilvask,vask,booking,kundeportal`
+- Expected age rating: 4+, subject to the App Store Connect questionnaire.
+
+Use real iOS simulator or device screenshots. Provide at least:
+
+- iPhone 6.9-inch portrait screenshots
+- iPad 13-inch portrait screenshots
+
+Recommended screenshot scenes: dashboard, booking flow, self-service wash start,
+vehicles/orders, and invoices/payment history. Do not include real customer
+data, private tokens, or placeholder copy.
+
+## Privacy And Review Notes
+
+App Store Connect privacy labels must match the actual app and backend behavior.
+Expected minimum disclosures include account/contact data, identifiers such as
+customer number, vehicle/license plate data, order and invoice history, payment
+state, approximate/precise location when used, and photos or attachments when
+users upload them. Tracking should remain false unless analytics/ad tracking is
+introduced.
+
+Review notes must include:
+
+- A demo account and password.
+- OTP/2FA/passkey fallback instructions when enabled for the account.
+- A clear statement that Stripe/card payments are for physical truck-wash
+  services consumed outside the app, so Apple in-app purchase is not used.
+- Any hardware-dependent functionality that reviewers cannot reproduce, with a
+  short demo video if needed.
+- Confirmation that the backend environment is online for the whole review
+  window.
+
+## TestFlight And Release
+
+1. Wait for App Store Connect processing to finish.
+2. Distribute the processed build to internal TestFlight testers.
+3. Run clean-device QA on iPhone and iPad.
+4. Fix issues using the same marketing version and an incremented build number.
+5. Submit for App Review with manual release after approval.
+6. After approval, release to Denmark first and monitor crashes, support mail,
+   and App Store Connect feedback before expanding availability.

docs/customer-attributes-refactor-plan.md

@@ -0,0 +1,60 @@
+# Customer attributes refactor and migration plan
+
+## Problem statement
+
+Customer attributes are currently represented as loosely typed string flags and evaluated in several UI, POS, and invoicing paths. This makes product restrictions vulnerable to broad category heuristics. The immediate defect is that `restrictAdditionalServices` ("Begræns tillægsydelser") treats related booking add-ons as additional services, so interior wash add-ons plus trailer/dolly additions are blocked even though that attribute is intended to cover standalone additional services only.
+
+## Target behavior matrix
+
+| Attribute                            | Canonical intent                                       | Product availability behavior                                                                                                     | Invoice/workflow behavior                                                   |
+| ------------------------------------ | ------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| `restrictAdditionalServices`         | Block standalone additional services/tillægsydelser.   | Block standalone additional-service catalog items; do not block related booking add-ons such as interior wash, trailer, or dolly. | Flag only order lines that are standalone additional services.              |
+| `restrictTankCleaning`               | Block tank-cleaning services.                          | Block products whose category or legacy name identifies tank cleaning.                                                            | Flag tank-cleaning order lines.                                             |
+| `restrictSpotFree`                   | Block Spot Free/RO rinse products.                     | Block canonical Spot Free product IDs and legacy Spot Free/RO naming.                                                             | Flag Spot Free order lines.                                                 |
+| `restrictInteriorCleaning`           | Block interior wash services.                          | Block products whose names/categories explicitly identify interior wash.                                                          | Flag interior-wash order lines.                                             |
+| `onlyTankCleaning`                   | Allow only tank-cleaning services.                     | Block every non-tank-cleaning product while keeping tank-cleaning products available.                                             | Flag non-tank-cleaning order lines.                                         |
+| `requiresReferenceNumber`            | Require an order reference.                            | No product filtering.                                                                                                             | Flag orders missing a required reference.                                   |
+| `requiresRegistrationNumbersInvoice` | Require registration numbers on invoice/order context. | No product filtering.                                                                                                             | Flag orders missing required registration numbers.                          |
+| `invoiceAllOrdersIndividually`       | Prevent grouped invoicing.                             | No product filtering.                                                                                                             | Split/flag invoice collections containing multiple orders for the customer. |
+| `invoiceWithStripe`                  | Invoice through Stripe workflow.                       | No product filtering.                                                                                                             | Route the customer through Stripe invoicing/payment handling.               |
+| `showPricesOnBookingPage`            | Show customer prices during booking.                   | No product filtering.                                                                                                             | Presentation-only booking behavior.                                         |
+| `usePONumbers`                       | Use/prompt for PO numbers.                             | No product filtering.                                                                                                             | Require or expose PO-number workflow where configured.                      |
+| `exemptFromAdministrationFee`        | Do not charge administration fees.                     | No product filtering.                                                                                                             | Suppress/flag administration-fee order lines for this customer.             |
+
+## Refactor plan
+
+1. **Create a canonical customer-rule domain module**
+
+   - Keep `CUSTOMER_RULE_DEFINITIONS` as the registry of public attributes, but extend each entry with a typed evaluator contract: product predicate, category predicate, invoice predicate, and UI impact metadata.
+   - Replace scattered string comparisons with registry lookups so every surface uses the same semantics.
+   - Add explicit names for ambiguous categories: `standaloneAdditionalService`, `relatedAddon`, `primaryProduct`, `tankCleaning`, `spotFree`, and `interiorCleaning`.
+
+2. **Normalize product classification once**
+
+   - Build a `classifyCustomerRuleProduct(product, context)` helper returning booleans for each product class.
+   - Treat related add-ons (`isRelatedAddon`, `relatedItemId`) as context, not as proof that the item is a standalone additional service.
+   - Reserve `restrictAdditionalServices` for category 8/standalone service context or explicit additional-service labels, not numeric booking add-on category 4.
+
+3. **Migrate rule evaluation paths**
+
+   - POS product cards and mobile flows should call `getCustomerProductRestriction` only with the normalized product context.
+   - Customer-rule tooltips should derive blocked/available products from the same evaluator used by POS.
+   - Invoicing-period flag generation should use the same classification vocabulary as product availability so historical and current orders are flagged consistently.
+
+4. **Backfill and data migration**
+
+   - Keep existing attribute keys unchanged to avoid a destructive migration.
+   - Add a one-time data audit/report listing customers with `restrictAdditionalServices` and recent orders containing interior wash, trailer, or dolly add-ons. These rows should be verified as no longer violating the rule after deployment.
+   - If any historical invoice flags were created solely because related add-ons were treated as additional services, provide an idempotent cleanup command to recalculate customer-rule violations for affected invoice periods.
+
+5. **Regression test coverage**
+
+   - Unit-test every attribute in the target behavior matrix.
+   - Add focused cases for the defect: interior wash related add-on, trailer related add-on, and dolly related add-on must remain available under `restrictAdditionalServices`.
+   - Add invoice-flag fixtures mirroring the same products so invoicing behavior cannot drift from POS behavior.
+   - Keep tooltip tests aligned with the evaluator, showing standalone additional services under `restrictAdditionalServices` and not showing related add-ons.
+
+6. **Rollout and verification**
+   - Ship the evaluator patch behind the existing attribute keys.
+   - Run unit tests and targeted POS/customer-rule e2e tests.
+   - Verify with production-like catalog data that `restrictAdditionalServices` blocks only standalone additional services while `restrictInteriorCleaning`, `restrictTankCleaning`, `restrictSpotFree`, and `onlyTankCleaning` continue to behave exactly as listed above.

docs/mobile-artifacts.md

@@ -1,23 +1,41 @@
 # Mobile Store Artifacts
 
-The `Mobile Store Artifacts` workflow builds signed Android and iOS store artifacts from the Vue/Vite web app through Capacitor.
+The `Mobile Store Artifacts` workflow builds signed Android and iOS store artifacts from the Vue/Vite web app through Capacitor, then uploads them to Google Play and App Store Connect by default.
 
 Use the Capacitor project under `android/` for the Google Play Store package. The Bubblewrap/TWA files at the repository root are not the path used by `mobile:android:bundle`.
 
 ## Triggers
 
-- Manual: run `Mobile Store Artifacts` from GitHub Actions and optionally provide `version_name` and `version_code`.
+- Manual: run `Mobile Store Artifacts` from GitHub Actions and optionally provide `version_name`, `version_code`, upload toggles, and Android track/status overrides.
 - Tag: push a tag named `mobile-vX.Y.Z`; the workflow uses `X.Y.Z` as the store version name.
-- Automatic Android Play Store artifact: after the `Automated Tests` workflow completes successfully on `master`, GitHub Actions builds and uploads a signed Android App Bundle from the tested commit.
+- Automatic store upload: after the `Automated Tests` workflow completes successfully on current `master`, GitHub Actions builds signed Android and iOS artifacts from that tested commit and uploads them to the stores.
+- Stale workflow-run protection: if a newer commit reaches `master` before the mobile workflow runs, both store-upload jobs skip the stale commit.
+
+Default upload behavior:
+
+- Android uploads package `io.truckwash.twa` to the Google Play `production` track with release status `completed`.
+- iOS uploads bundle `io.truckwash.app` to App Store Connect for TestFlight/App Review processing. Public App Store release still depends on App Store Connect review and release settings.
+- Manual dispatch can disable either upload path while still producing signed GitHub artifacts.
 
 ## Required Secrets
 
+Store secrets are expected in the GitHub environment `mobile-store-production`.
+
+Non-secret environment variables:
+
+- `ANDROID_PACKAGE_NAME=io.truckwash.twa`
+- `ANDROID_AAB_PATH=android/app/build/outputs/bundle/release/app-release.aab`
+- `PLAY_STORE_TRACK=production`
+- `PLAY_STORE_RELEASE_STATUS=completed`
+- `PLAY_STORE_USER_FRACTION` only when using `PLAY_STORE_RELEASE_STATUS=inProgress`
+
 Android:
 
 - `ANDROID_KEYSTORE_BASE64`
 - `ANDROID_KEYSTORE_PASSWORD`
 - `ANDROID_KEY_ALIAS`
 - `ANDROID_KEY_PASSWORD`
+- `GOOGLE_PLAY_SERVICE_ACCOUNT_JSON_BASE64`
 
 iOS:
 
@@ -26,6 +44,11 @@ iOS:
 - `IOS_PROVISION_PROFILE_BASE64`
 - `IOS_KEYCHAIN_PASSWORD`
 - `APPLE_TEAM_ID`
+- `APP_STORE_CONNECT_API_KEY_ID`
+- `APP_STORE_CONNECT_ISSUER_ID`
+- `APP_STORE_CONNECT_API_PRIVATE_KEY_BASE64`
+
+The Google Play secret is a base64-encoded service-account JSON file with Android Publisher API access to the Play Console app. The App Store Connect private key secret is the base64-encoded `.p8` API key file.
 
 ## Local Checks
 
@@ -57,6 +80,21 @@ The signed Android bundle is written to:
 android/app/build/outputs/bundle/release/app-release.aab
 ```
 
+Upload a locally built signed App Bundle to Google Play after exporting the Play service-account secret and release metadata:
+
+```sh
+export GOOGLE_PLAY_SERVICE_ACCOUNT_JSON_BASE64=...
+export ANDROID_PACKAGE_NAME=io.truckwash.twa
+export ANDROID_AAB_PATH=android/app/build/outputs/bundle/release/app-release.aab
+export MOBILE_VERSION_NAME=1.4.0
+export MOBILE_VERSION_CODE=10400
+export PLAY_STORE_TRACK=production
+export PLAY_STORE_RELEASE_STATUS=completed
+npm run mobile:android:play-upload
+```
+
+Use `PLAY_STORE_RELEASE_STATUS=inProgress` only with `PLAY_STORE_USER_FRACTION` set to a value greater than `0` and less than `1`.
+
 Android artifacts use package id `io.truckwash.twa`. iOS artifacts use bundle id `io.truckwash.app`.
 
 The Android project currently targets SDK 36. Google Play requires new apps and updates to target Android 15/API 35 or higher starting August 31, 2025: https://developer.android.com/google/play/requirements/target-sdk

index.html

@@ -1,9 +1,12 @@
 <!DOCTYPE html>
-<html lang="" class="theme-light" data-theme="light">
+<html lang="" class="theme-light tw-bootstrap-loading" data-theme="light">
 <head>
     <meta charset="UTF-8">
     <script>
         (function () {
+            window.__TW_LOADER_STARTED_AT__ = window.performance && typeof window.performance.now === 'function'
+                ? window.performance.now()
+                : Date.now();
             var match = window.location.pathname.match(/^\/[^/]+\/frontend(?:\/|$)/);
             var href = match ? match[0].replace(/\/+$/, '') + '/' : '/';
             var base = document.createElement('base');
@@ -21,9 +24,437 @@
     <meta name="mobile-web-app-capable" content="yes">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <title>Truck Wash Kundeportal</title>
+    <style>
+        html,
+        body,
+        #app {
+            min-height: 100%;
+        }
+
+        html.tw-bootstrap-loading {
+            font-size: 16px !important;
+        }
+
+        body {
+            margin: 0;
+            background: #fff;
+        }
+
+        body.tw-bootstrap-loading {
+            background: #041f32;
+        }
+
+        html.tw-bootstrap-loading,
+        html.tw-loader-scroll-lock,
+        body.tw-bootstrap-loading,
+        body.tw-loader-scroll-lock {
+            overflow: hidden;
+            scrollbar-width: none;
+        }
+
+        html.tw-bootstrap-loading::-webkit-scrollbar,
+        html.tw-loader-scroll-lock::-webkit-scrollbar,
+        body.tw-bootstrap-loading::-webkit-scrollbar,
+        body.tw-loader-scroll-lock::-webkit-scrollbar {
+            display: none;
+            width: 0;
+            height: 0;
+        }
+
+        .tw-bootstrap-loader {
+            --tw-loader-navy: #063651;
+            --tw-loader-blue: #0787bb;
+            --tw-loader-cyan: #69d7f5;
+            --tw-loader-foam: #f8fbff;
+            --tw-loader-warm: #f4c15d;
+
+            position: fixed;
+            inset: 0;
+            z-index: 100000;
+            display: grid;
+            min-height: 100vh;
+            place-items: center;
+            overflow: hidden;
+            padding: 2rem;
+            box-sizing: border-box;
+            background:
+                radial-gradient(circle at 20% 20%, rgba(105, 215, 245, 0.18), transparent 28rem),
+                radial-gradient(circle at 82% 74%, rgba(244, 193, 93, 0.12), transparent 24rem),
+                linear-gradient(145deg, #041f32 0%, var(--tw-loader-navy) 52%, #04263d 100%);
+            color: var(--tw-loader-foam);
+            font-family: Avenir, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        }
+
+        .tw-bootstrap-loader__ambient {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+        }
+
+        .tw-bootstrap-loader__ambient::before {
+            position: absolute;
+            inset: 14% 9%;
+            content: "";
+            border: 1px solid rgba(248, 251, 255, 0.08);
+            border-radius: 8px;
+        }
+
+        .tw-bootstrap-loader__wash {
+            position: absolute;
+            left: 50%;
+            display: block;
+            width: 72rem;
+            height: 8rem;
+            border-radius: 999px;
+            background: linear-gradient(90deg, transparent, rgba(105, 215, 245, 0.2), rgba(248, 251, 255, 0.18), transparent);
+            filter: blur(8px);
+            transform: translateX(-50%) rotate(-9deg);
+        }
+
+        .tw-bootstrap-loader__wash--wide {
+            top: 26%;
+            animation: tw-bootstrap-loader-wash 5.8s ease-in-out var(--tw-loader-wash-wide-delay, 0ms) infinite;
+        }
+
+        .tw-bootstrap-loader__wash--tight {
+            bottom: 22%;
+            width: 48rem;
+            height: 5rem;
+            animation: tw-bootstrap-loader-wash 6.8s ease-in-out var(--tw-loader-wash-tight-delay, 0ms) infinite reverse;
+        }
+
+        .tw-bootstrap-loader__panel {
+            position: relative;
+            display: grid;
+            width: min(100%, 25rem);
+            min-height: 27rem;
+            align-content: center;
+            justify-items: center;
+            padding: 2.5rem 2rem 2.25rem;
+            box-sizing: border-box;
+            border: 1px solid rgba(248, 251, 255, 0.16);
+            border-radius: 8px;
+            background: rgba(4, 31, 50, 0.74);
+            box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
+            text-align: center;
+            backdrop-filter: blur(18px);
+        }
+
+        .tw-bootstrap-loader__panel::after {
+            position: absolute;
+            inset: 0;
+            content: "";
+            border-radius: inherit;
+            background: linear-gradient(180deg, rgba(248, 251, 255, 0.08), transparent 38%);
+            pointer-events: none;
+        }
+
+        .tw-bootstrap-loader__brand,
+        .tw-bootstrap-loader__motion,
+        .tw-bootstrap-loader__status,
+        .tw-bootstrap-loader__hint,
+        .tw-bootstrap-loader__dots {
+            position: relative;
+            z-index: 1;
+        }
+
+        .tw-bootstrap-loader__brand {
+            display: grid;
+            width: 13rem;
+            min-height: 4rem;
+            place-items: center;
+            margin-bottom: 2.25rem;
+        }
+
+        .tw-bootstrap-loader__logo {
+            display: block;
+            width: 100%;
+            max-height: 4rem;
+            object-fit: contain;
+        }
+
+        .tw-bootstrap-loader__motion {
+            display: grid;
+            width: 8.5rem;
+            height: 8.5rem;
+            place-items: center;
+            margin-bottom: 2rem;
+        }
+
+        .tw-bootstrap-loader__ring {
+            position: absolute;
+            inset: 0;
+            border: 2px solid rgba(248, 251, 255, 0.12);
+            border-top-color: var(--tw-loader-cyan);
+            border-right-color: rgba(7, 135, 187, 0.78);
+            border-radius: 50%;
+            animation: tw-bootstrap-loader-spin 1.8s linear var(--tw-loader-spin-delay, 0ms) infinite;
+        }
+
+        .tw-bootstrap-loader__ring::before,
+        .tw-bootstrap-loader__ring::after {
+            position: absolute;
+            content: "";
+            border-radius: 50%;
+        }
+
+        .tw-bootstrap-loader__ring::before {
+            inset: 1rem;
+            border: 1px solid rgba(248, 251, 255, 0.18);
+        }
+
+        .tw-bootstrap-loader__ring::after {
+            inset: 2.3rem;
+            background: radial-gradient(circle, rgba(105, 215, 245, 0.38), rgba(7, 135, 187, 0.18) 45%, transparent 70%);
+            animation: tw-bootstrap-loader-pulse 2.4s ease-in-out var(--tw-loader-pulse-delay, 0ms) infinite;
+        }
+
+        .tw-bootstrap-loader__sweep {
+            width: 6rem;
+            height: 1.15rem;
+            border-radius: 999px;
+            background: linear-gradient(90deg, transparent 0%, rgba(248, 251, 255, 0.92) 45%, var(--tw-loader-cyan) 100%);
+            box-shadow: 0 0 24px rgba(105, 215, 245, 0.48);
+            transform: rotate(-12deg);
+            animation: tw-bootstrap-loader-sweep 1.8s ease-in-out var(--tw-loader-sweep-delay, 0ms) infinite;
+        }
+
+        .tw-bootstrap-loader__spark {
+            position: absolute;
+            width: 0.55rem;
+            height: 0.55rem;
+            border-radius: 50%;
+            background: var(--tw-loader-warm);
+            box-shadow: 0 0 18px rgba(244, 193, 93, 0.76);
+            opacity: 0.9;
+        }
+
+        .tw-bootstrap-loader__spark--one {
+            top: 1rem;
+            right: 1.3rem;
+            animation: tw-bootstrap-loader-spark 2.6s ease-in-out var(--tw-loader-spark-one-delay, 0ms) infinite;
+        }
+
+        .tw-bootstrap-loader__spark--two {
+            bottom: 1.4rem;
+            left: 1rem;
+            animation: tw-bootstrap-loader-spark 2.6s ease-in-out var(--tw-loader-spark-two-delay, 0.65s) infinite;
+        }
+
+        .tw-bootstrap-loader__status {
+            margin: 0;
+            color: var(--tw-loader-foam);
+            font-size: 1.2rem;
+            font-weight: 800;
+            letter-spacing: 0;
+            line-height: 1.25;
+        }
+
+        .tw-bootstrap-loader__hint {
+            max-width: 18rem;
+            margin: 0.55rem 0 0;
+            color: rgba(248, 251, 255, 0.72);
+            font-size: 0.9rem;
+            line-height: 1.45;
+        }
+
+        .tw-bootstrap-loader__dots {
+            display: inline-flex;
+            gap: 0.45rem;
+            height: 0.6rem;
+            margin-top: 1.35rem;
+            align-items: center;
+        }
+
+        .tw-bootstrap-loader__dots span {
+            display: block;
+            width: 0.42rem;
+            height: 0.42rem;
+            border-radius: 50%;
+            background: var(--tw-loader-cyan);
+            animation: tw-bootstrap-loader-dot 1.35s ease-in-out var(--tw-loader-dot-one-delay, 0ms) infinite;
+        }
+
+        .tw-bootstrap-loader__dots span:nth-child(2) {
+            animation-delay: var(--tw-loader-dot-two-delay, 0.18s);
+        }
+
+        .tw-bootstrap-loader__dots span:nth-child(3) {
+            animation-delay: var(--tw-loader-dot-three-delay, 0.36s);
+        }
+
+        @keyframes tw-bootstrap-loader-spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        @keyframes tw-bootstrap-loader-sweep {
+            0%,
+            100% {
+                opacity: 0.6;
+                transform: translateX(-0.65rem) rotate(-12deg);
+            }
+            50% {
+                opacity: 1;
+                transform: translateX(0.65rem) rotate(-12deg);
+            }
+        }
+
+        @keyframes tw-bootstrap-loader-pulse {
+            0%,
+            100% {
+                opacity: 0.7;
+                transform: scale(0.94);
+            }
+            50% {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+
+        @keyframes tw-bootstrap-loader-spark {
+            0%,
+            100% {
+                opacity: 0.35;
+                transform: scale(0.7);
+            }
+            45% {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+
+        @keyframes tw-bootstrap-loader-dot {
+            0%,
+            100% {
+                opacity: 0.35;
+                transform: translateY(0);
+            }
+            45% {
+                opacity: 1;
+                transform: translateY(-0.25rem);
+            }
+        }
+
+        @keyframes tw-bootstrap-loader-wash {
+            0%,
+            100% {
+                opacity: 0.42;
+                transform: translateX(-54%) rotate(-9deg);
+            }
+            50% {
+                opacity: 0.72;
+                transform: translateX(-46%) rotate(-9deg);
+            }
+        }
+
+        @media screen and (max-width: 480px) {
+            .tw-bootstrap-loader {
+                padding: 1rem;
+            }
+
+            .tw-bootstrap-loader__panel {
+                min-height: 25rem;
+                padding: 2rem 1.4rem;
+            }
+
+            .tw-bootstrap-loader__brand {
+                width: 11.5rem;
+                margin-bottom: 1.8rem;
+            }
+
+            .tw-bootstrap-loader__motion {
+                width: 7.25rem;
+                height: 7.25rem;
+                margin-bottom: 1.75rem;
+            }
+
+            .tw-bootstrap-loader__status {
+                font-size: 1.1rem;
+            }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            .tw-bootstrap-loader *,
+            .tw-bootstrap-loader *::before,
+            .tw-bootstrap-loader *::after {
+                animation-duration: 0.001ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.001ms !important;
+            }
+
+            .tw-bootstrap-loader__sweep {
+                opacity: 0.95;
+                transform: rotate(-12deg);
+            }
+
+            .tw-bootstrap-loader__dots span {
+                opacity: 0.75;
+                transform: none;
+            }
+        }
+    </style>
 </head>
-<body>
-<div id="app"></div>
+<body class="tw-bootstrap-loading">
+<div id="app">
+    <div
+        class="tw-bootstrap-loader"
+        data-testid="app-bootstrap-loading"
+        role="status"
+        aria-live="polite"
+        aria-label="Indlæser Truck Wash kundeportal"
+    >
+        <div class="tw-bootstrap-loader__ambient" aria-hidden="true">
+            <span class="tw-bootstrap-loader__wash tw-bootstrap-loader__wash--wide"></span>
+            <span class="tw-bootstrap-loader__wash tw-bootstrap-loader__wash--tight"></span>
+        </div>
+        <div class="tw-bootstrap-loader__panel">
+            <div class="tw-bootstrap-loader__brand">
+                <img
+                    src="%BASE_URL%assets/branding/truckwash-banner-white-compressed.png"
+                    alt="Truck Wash"
+                    class="tw-bootstrap-loader__logo"
+                />
+            </div>
+            <div class="tw-bootstrap-loader__motion" aria-hidden="true">
+                <span class="tw-bootstrap-loader__ring"></span>
+                <span class="tw-bootstrap-loader__sweep"></span>
+                <span class="tw-bootstrap-loader__spark tw-bootstrap-loader__spark--one"></span>
+                <span class="tw-bootstrap-loader__spark tw-bootstrap-loader__spark--two"></span>
+            </div>
+            <p class="tw-bootstrap-loader__status" data-testid="app-bootstrap-loading-status">Indlæser...</p>
+            <p class="tw-bootstrap-loader__hint">Vi gør kundeportalen klar</p>
+            <div class="tw-bootstrap-loader__dots" aria-hidden="true">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    (function () {
+        var appPath = window.location.pathname.replace(/^\/[^/]+\/frontend(?=\/|$)/, '') || '/';
+        var hasStoredSession = false;
+        try {
+            hasStoredSession = Boolean(window.localStorage && window.localStorage.getItem('token'));
+        } catch (error) {
+            hasStoredSession = false;
+        }
+        var usesProtectedSessionLoader = /^\/(?:user|admin|superuser|backoffice)(?:\/|$)/.test(appPath);
+        var usesGuestSessionLoader = /^\/(?:$|login(?:\/driver|\/qr)?$|admin\/login$|register$|auth\/password-reset(?:\/|$)|qr\/new-(?:customer|driver)$)/.test(appPath);
+        var usesSessionLoader = usesProtectedSessionLoader || (hasStoredSession && usesGuestSessionLoader);
+        if (!usesSessionLoader) return;
+
+        var loader = document.querySelector('[data-testid="app-bootstrap-loading"]');
+        var status = document.querySelector('[data-testid="app-bootstrap-loading-status"]');
+        var hint = loader ? loader.querySelector('.tw-bootstrap-loader__hint') : null;
+        if (loader) loader.setAttribute('aria-label', 'Bekræfter bruger');
+        if (status) status.textContent = 'Bekræfter bruger...';
+        if (hint) hint.textContent = 'Vi indlæser din session';
+    })();
+</script>
 <script type="module" src="/src/releaseBootstrap.js"></script>
 </body>
 </html>

package.json

@@ -61,9 +61,11 @@
     "mobile:android:icons:check": "node scripts/mobile/generate-android-icons.mjs --check",
     "mobile:android:sync": "npm run mobile:android:icons && npm run build && npx cap sync android",
     "mobile:permissions:check": "node scripts/mobile/check-permissions.mjs",
+    "mobile:store:env-check": "node scripts/mobile/check-store-upload-env.mjs",
     "mobile:android:signing:check": "node scripts/mobile/check-android-signing-env.mjs",
     "mobile:android:bundle": "npm run mobile:android:signing:check && npm run mobile:android:sync && npm run mobile:permissions:check && cd android && ./gradlew bundleRelease",
     "mobile:android:bundle:unsigned": "npm run mobile:android:sync && npm run mobile:permissions:check && cd android && ./gradlew bundleRelease",
+    "mobile:android:play-upload": "node scripts/mobile/upload-google-play.mjs",
     "mobile:ios:sync": "npm run mobile:sync && npm run mobile:permissions:check",
     "playstore:graphics": "node scripts/playstore/generate-graphics.mjs"
   },

playwright/.cache/.htaccess

@@ -0,0 +1,57 @@
+<IfModule mod_negotiation.c>
+  Options -MultiViews
+</IfModule>
+
+<IfModule mod_mime.c>
+  AddType application/manifest+json .webmanifest
+</IfModule>
+
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+
+  RewriteRule ^index\.html$ - [L]
+
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule ^.+/((?:assets|resources|favicons|icons|img|sounds|\.well-known)/.+)$ $1 [L]
+
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteCond %{DOCUMENT_ROOT}/public/$1 -f
+  RewriteRule ^(?:.*?/)?((?:assets|resources|favicons|icons|img|sounds|\.well-known)/.+)$ public/$1 [L]
+
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteCond %{DOCUMENT_ROOT}/dist/$1 -f
+  RewriteRule ^(?:.*?/)?((?:assets|resources|favicons|icons|img|sounds|\.well-known)/.+)$ dist/$1 [L]
+
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule ^.+/((?:index\.html|manifest\.json|manifest\.webmanifest|favicon\.ico|favicon_default\.ico|pleno-favicon\.ico|release-entry\.json|release-manifest\.json|registerSW\.js|sw\.js|workbox-[^/]+\.js))$ $1 [L]
+
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteCond %{DOCUMENT_ROOT}/public/$1 -f
+  RewriteRule ^(?:.*?/)?((?:index\.html|manifest\.json|manifest\.webmanifest|favicon\.ico|favicon_default\.ico|pleno-favicon\.ico|release-entry\.json|release-manifest\.json|registerSW\.js|sw\.js|workbox-[^/]+\.js))$ public/$1 [L]
+
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteCond %{DOCUMENT_ROOT}/dist/$1 -f
+  RewriteRule ^(?:.*?/)?((?:index\.html|manifest\.json|manifest\.webmanifest|favicon\.ico|favicon_default\.ico|pleno-favicon\.ico|release-entry\.json|release-manifest\.json|registerSW\.js|sw\.js|workbox-[^/]+\.js))$ dist/$1 [L]
+
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule ^(?:.*?/)?(?:assets|resources|favicons|icons|img|sounds|\.well-known)/ - [R=404,L]
+
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule ^(?:.*?/)?(?:index\.html|manifest\.json|manifest\.webmanifest|favicon\.ico|favicon_default\.ico|pleno-favicon\.ico|release-entry\.json|release-manifest\.json|registerSW\.js|sw\.js|workbox-[^/]+\.js)$ - [R=404,L]
+
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule \.[^/]+$ - [R=404,L]
+
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . index.html [L]
+</IfModule>

playwright/.cache/.well-known/assetlinks.json

@@ -0,0 +1,12 @@
+[
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "io.truckwash.twa",
+      "sha256_cert_fingerprints": [
+        "29:56:F7:8D:BD:A0:2E:A9:32:82:97:28:A3:E2:65:16:23:73:DD:2C:16:F6:7A:97:AD:63:27:14:5C:8C:FB:89"
+      ]
+    }
+  }
+]

playwright/.cache/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pleno Component Test</title>
+    <script type="module" crossorigin src="/assets/index-6ljr7rTu.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Cq5akw1E.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

playwright/.cache/manifest.json

@@ -0,0 +1,26 @@
+{
+  "name": "Truck Wash Kundeportal",
+  "short_name": "Truck Wash",
+  "description": "Access your Truck Wash accounts and transactions from anywhere.",
+  "id": "/",
+  "icons": [
+    {
+      "src": "assets/favicons/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "assets/favicons/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ],
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#0787bb",
+  "theme_color": "#063651",
+  "orientation": "portrait",
+  "scope": "/"
+}

scripts/mobile/check-store-upload-env.mjs

@@ -0,0 +1,148 @@
+import { existsSync } from "node:fs";
+import { argv, env, exit } from "node:process";
+
+const args = new Set(argv.slice(2));
+const failures = [];
+
+const requireVariable = (name) => {
+  if (!env[name]) {
+    failures.push(`Missing ${name}`);
+  }
+};
+
+const requireOneVariable = (names, label) => {
+  if (!names.some((name) => env[name])) {
+    failures.push(`Missing ${label}: set one of ${names.join(", ")}`);
+  }
+};
+
+const decodeBase64 = (name) => {
+  if (!env[name]) {
+    return null;
+  }
+  try {
+    const decoded = Buffer.from(env[name], "base64");
+    if (decoded.length === 0) {
+      failures.push(`${name} is empty after base64 decoding`);
+      return null;
+    }
+    return decoded;
+  } catch {
+    failures.push(`${name} is not valid base64`);
+    return null;
+  }
+};
+
+const decodeBase64Json = (name) => {
+  const decoded = decodeBase64(name);
+  if (!decoded) {
+    return null;
+  }
+  try {
+    return JSON.parse(decoded.toString("utf8"));
+  } catch {
+    failures.push(`${name} is not base64-encoded JSON`);
+    return null;
+  }
+};
+
+const isEnabled = (name) => !["false", "0", "no"].includes(String(env[name] ?? "true").toLowerCase());
+
+const checkAndroid = () => {
+  requireVariable("MOBILE_VERSION_NAME");
+  requireVariable("MOBILE_VERSION_CODE");
+  requireOneVariable(["ANDROID_KEYSTORE_BASE64", "ANDROID_KEYSTORE_FILE"], "Android release keystore");
+  requireVariable("ANDROID_KEYSTORE_PASSWORD");
+  requireVariable("ANDROID_KEY_ALIAS");
+  requireVariable("ANDROID_KEY_PASSWORD");
+
+  if (env.ANDROID_KEYSTORE_FILE && !existsSync(env.ANDROID_KEYSTORE_FILE)) {
+    failures.push("ANDROID_KEYSTORE_FILE does not point to an existing file");
+  }
+
+  decodeBase64("ANDROID_KEYSTORE_BASE64");
+
+  if (!isEnabled("UPLOAD_ANDROID_TO_PLAY")) {
+    return;
+  }
+
+  requireVariable("ANDROID_PACKAGE_NAME");
+  requireVariable("ANDROID_AAB_PATH");
+  requireVariable("GOOGLE_PLAY_SERVICE_ACCOUNT_JSON_BASE64");
+
+  const validTracks = new Set(["production", "beta", "alpha", "internal"]);
+  const validStatuses = new Set(["completed", "draft", "inProgress", "halted"]);
+  const track = env.PLAY_STORE_TRACK || "production";
+  const status = env.PLAY_STORE_RELEASE_STATUS || "completed";
+
+  if (!validTracks.has(track)) {
+    failures.push(`PLAY_STORE_TRACK must be one of ${Array.from(validTracks).join(", ")}`);
+  }
+  if (!validStatuses.has(status)) {
+    failures.push(`PLAY_STORE_RELEASE_STATUS must be one of ${Array.from(validStatuses).join(", ")}`);
+  }
+  if (status === "inProgress") {
+    const fraction = Number(env.PLAY_STORE_USER_FRACTION);
+    if (!(fraction > 0 && fraction < 1)) {
+      failures.push("PLAY_STORE_USER_FRACTION must be greater than 0 and less than 1 when status is inProgress");
+    }
+  }
+
+  const serviceAccount = decodeBase64Json("GOOGLE_PLAY_SERVICE_ACCOUNT_JSON_BASE64");
+  if (serviceAccount) {
+    if (!serviceAccount.client_email) {
+      failures.push("Google Play service account JSON is missing client_email");
+    }
+    if (!serviceAccount.private_key) {
+      failures.push("Google Play service account JSON is missing private_key");
+    }
+  }
+};
+
+const checkIos = () => {
+  requireVariable("MOBILE_VERSION_NAME");
+  requireVariable("MOBILE_VERSION_CODE");
+  requireVariable("IOS_CERTIFICATE_BASE64");
+  requireVariable("IOS_CERTIFICATE_PASSWORD");
+  requireVariable("IOS_PROVISION_PROFILE_BASE64");
+  requireVariable("IOS_KEYCHAIN_PASSWORD");
+  requireVariable("APPLE_TEAM_ID");
+
+  decodeBase64("IOS_CERTIFICATE_BASE64");
+  decodeBase64("IOS_PROVISION_PROFILE_BASE64");
+
+  if (!isEnabled("UPLOAD_IOS_TO_APP_STORE")) {
+    return;
+  }
+
+  requireVariable("APP_STORE_CONNECT_API_KEY_ID");
+  requireVariable("APP_STORE_CONNECT_ISSUER_ID");
+  requireVariable("APP_STORE_CONNECT_API_PRIVATE_KEY_BASE64");
+
+  const privateKey = decodeBase64("APP_STORE_CONNECT_API_PRIVATE_KEY_BASE64");
+  if (privateKey && !privateKey.toString("utf8").includes("PRIVATE KEY")) {
+    failures.push("APP_STORE_CONNECT_API_PRIVATE_KEY_BASE64 does not look like a .p8 private key");
+  }
+};
+
+if (args.has("--android")) {
+  checkAndroid();
+}
+
+if (args.has("--ios")) {
+  checkIos();
+}
+
+if (!args.has("--android") && !args.has("--ios")) {
+  failures.push("Pass --android or --ios");
+}
+
+if (failures.length > 0) {
+  console.error("Mobile store upload environment is not configured:");
+  for (const failure of failures) {
+    console.error(`- ${failure}`);
+  }
+  exit(1);
+}
+
+console.log("Mobile store upload environment is configured.");

scripts/mobile/upload-google-play.mjs

@@ -0,0 +1,260 @@
+import { createSign } from "node:crypto";
+import { existsSync, readFileSync, appendFileSync } from "node:fs";
+import { env, exit } from "node:process";
+
+const androidPublisherScope = "https://www.googleapis.com/auth/androidpublisher";
+
+const requiredVariables = [
+  "ANDROID_PACKAGE_NAME",
+  "ANDROID_AAB_PATH",
+  "GOOGLE_PLAY_SERVICE_ACCOUNT_JSON_BASE64",
+  "MOBILE_VERSION_NAME",
+  "MOBILE_VERSION_CODE",
+];
+
+const fail = (message) => {
+  console.error(message);
+  exit(1);
+};
+
+const requireEnvironment = () => {
+  const missingVariables = requiredVariables.filter((name) => !env[name]);
+  if (missingVariables.length > 0) {
+    fail(`Google Play upload is not configured. Missing: ${missingVariables.join(", ")}`);
+  }
+  if (!existsSync(env.ANDROID_AAB_PATH)) {
+    fail(`Android App Bundle not found at ${env.ANDROID_AAB_PATH}`);
+  }
+};
+
+const base64Url = (value) =>
+  Buffer.from(value)
+    .toString("base64")
+    .replace(/=/g, "")
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_");
+
+const parseServiceAccount = () => {
+  let serviceAccount;
+  try {
+    serviceAccount = JSON.parse(Buffer.from(env.GOOGLE_PLAY_SERVICE_ACCOUNT_JSON_BASE64, "base64").toString("utf8"));
+  } catch {
+    fail("GOOGLE_PLAY_SERVICE_ACCOUNT_JSON_BASE64 must be base64-encoded service account JSON.");
+  }
+
+  if (!serviceAccount.client_email || !serviceAccount.private_key) {
+    fail("Google Play service account JSON must include client_email and private_key.");
+  }
+
+  return serviceAccount;
+};
+
+const createJwtAssertion = (serviceAccount) => {
+  const now = Math.floor(Date.now() / 1000);
+  const header = {
+    alg: "RS256",
+    typ: "JWT",
+  };
+  const claims = {
+    iss: serviceAccount.client_email,
+    scope: androidPublisherScope,
+    aud: "https://oauth2.googleapis.com/token",
+    exp: now + 3600,
+    iat: now,
+  };
+  const signingInput = `${base64Url(JSON.stringify(header))}.${base64Url(JSON.stringify(claims))}`;
+  const signer = createSign("RSA-SHA256");
+  signer.update(signingInput);
+  signer.end();
+  return `${signingInput}.${base64Url(signer.sign(serviceAccount.private_key))}`;
+};
+
+const readJsonResponse = async (response, label) => {
+  const text = await response.text();
+  let body = null;
+  if (text) {
+    try {
+      body = JSON.parse(text);
+    } catch {
+      body = { raw: text };
+    }
+  }
+  if (!response.ok) {
+    const detail = body?.error?.message || body?.raw || response.statusText;
+    throw new Error(`${label} failed with HTTP ${response.status}: ${detail}`);
+  }
+  return body;
+};
+
+const requestJson = async (url, options, label) => {
+  const response = await fetch(url, options);
+  return readJsonResponse(response, label);
+};
+
+const getAccessToken = async (serviceAccount) => {
+  const body = new URLSearchParams({
+    grant_type: "urn:ietf:params:oauth:grant-type:jwt-bearer",
+    assertion: createJwtAssertion(serviceAccount),
+  });
+
+  const tokenResponse = await requestJson(
+    "https://oauth2.googleapis.com/token",
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body,
+    },
+    "Google OAuth token request",
+  );
+
+  if (!tokenResponse?.access_token) {
+    throw new Error("Google OAuth token response did not include access_token.");
+  }
+
+  return tokenResponse.access_token;
+};
+
+const playUrl = (path) => `https://androidpublisher.googleapis.com/androidpublisher/v3/${path}`;
+const playUploadUrl = (path) => `https://androidpublisher.googleapis.com/upload/androidpublisher/v3/${path}`;
+
+const authorizedJson = (accessToken, extraHeaders = {}) => ({
+  Authorization: `Bearer ${accessToken}`,
+  ...extraHeaders,
+});
+
+const insertEdit = async (accessToken, packageName) =>
+  requestJson(
+    playUrl(`applications/${encodeURIComponent(packageName)}/edits`),
+    {
+      method: "POST",
+      headers: authorizedJson(accessToken),
+    },
+    "Google Play edit insert",
+  );
+
+const deleteEdit = async (accessToken, packageName, editId) => {
+  const response = await fetch(playUrl(`applications/${encodeURIComponent(packageName)}/edits/${encodeURIComponent(editId)}`), {
+    method: "DELETE",
+    headers: authorizedJson(accessToken),
+  });
+  if (!response.ok && response.status !== 404) {
+    const body = await response.text();
+    console.warn(`Could not delete failed Google Play edit ${editId}: HTTP ${response.status} ${body}`);
+  }
+};
+
+const uploadBundle = async (accessToken, packageName, editId, bundlePath) =>
+  requestJson(
+    `${playUploadUrl(
+      `applications/${encodeURIComponent(packageName)}/edits/${encodeURIComponent(editId)}/bundles`,
+    )}?uploadType=media`,
+    {
+      method: "POST",
+      headers: authorizedJson(accessToken, {
+        "Content-Type": "application/octet-stream",
+      }),
+      body: readFileSync(bundlePath),
+    },
+    "Google Play bundle upload",
+  );
+
+const updateTrack = async (accessToken, packageName, editId, versionCode) => {
+  const track = env.PLAY_STORE_TRACK || "production";
+  const status = env.PLAY_STORE_RELEASE_STATUS || "completed";
+  const validTracks = new Set(["production", "beta", "alpha", "internal"]);
+  const validStatuses = new Set(["completed", "draft", "inProgress", "halted"]);
+
+  if (!validTracks.has(track)) {
+    throw new Error(`Unsupported PLAY_STORE_TRACK: ${track}`);
+  }
+  if (!validStatuses.has(status)) {
+    throw new Error(`Unsupported PLAY_STORE_RELEASE_STATUS: ${status}`);
+  }
+
+  const release = {
+    name: env.PLAY_STORE_RELEASE_NAME || `Truck Wash ${env.MOBILE_VERSION_NAME} (${versionCode})`,
+    versionCodes: [String(versionCode)],
+    status,
+  };
+
+  if (status === "inProgress") {
+    const userFraction = Number(env.PLAY_STORE_USER_FRACTION);
+    if (!(userFraction > 0 && userFraction < 1)) {
+      throw new Error("PLAY_STORE_USER_FRACTION must be greater than 0 and less than 1 when status is inProgress.");
+    }
+    release.userFraction = userFraction;
+  }
+
+  return requestJson(
+    playUrl(
+      `applications/${encodeURIComponent(packageName)}/edits/${encodeURIComponent(editId)}/tracks/${encodeURIComponent(track)}`,
+    ),
+    {
+      method: "PUT",
+      headers: authorizedJson(accessToken, {
+        "Content-Type": "application/json",
+      }),
+      body: JSON.stringify({
+        track,
+        releases: [release],
+      }),
+    },
+    "Google Play track update",
+  );
+};
+
+const commitEdit = async (accessToken, packageName, editId) =>
+  requestJson(
+    playUrl(`applications/${encodeURIComponent(packageName)}/edits/${encodeURIComponent(editId)}:commit`),
+    {
+      method: "POST",
+      headers: authorizedJson(accessToken),
+    },
+    "Google Play edit commit",
+  );
+
+const writeStepSummary = (summary) => {
+  if (!env.GITHUB_STEP_SUMMARY) {
+    return;
+  }
+  appendFileSync(env.GITHUB_STEP_SUMMARY, `${summary}\n`);
+};
+
+const main = async () => {
+  requireEnvironment();
+
+  const packageName = env.ANDROID_PACKAGE_NAME;
+  const serviceAccount = parseServiceAccount();
+  const accessToken = await getAccessToken(serviceAccount);
+  let editId = null;
+
+  try {
+    const edit = await insertEdit(accessToken, packageName);
+    editId = edit.id;
+    if (!editId) {
+      throw new Error("Google Play edit insert response did not include id.");
+    }
+
+    const bundle = await uploadBundle(accessToken, packageName, editId, env.ANDROID_AAB_PATH);
+    const versionCode = String(bundle?.versionCode || env.MOBILE_VERSION_CODE);
+    await updateTrack(accessToken, packageName, editId, versionCode);
+    await commitEdit(accessToken, packageName, editId);
+
+    const track = env.PLAY_STORE_TRACK || "production";
+    const status = env.PLAY_STORE_RELEASE_STATUS || "completed";
+    console.log(`Uploaded Android App Bundle ${versionCode} to Google Play ${track} with status ${status}.`);
+    writeStepSummary(`Android App Bundle ${versionCode} uploaded to Google Play ${track} with status ${status}.`);
+  } catch (error) {
+    if (editId) {
+      await deleteEdit(accessToken, packageName, editId);
+    }
+    throw error;
+  }
+};
+
+main().catch((error) => {
+  console.error(error instanceof Error ? error.message : error);
+  exit(1);
+});

scripts/playwright-pr-mapping.mjs

@@ -108,6 +108,33 @@ export const sourceMappings = [
     specs: ["tests/e2e/userVehicles.spec.ts"],
     projects: chromiumProjects,
   },
+  {
+    name: "orders-filters",
+    patterns: [
+      /^src\/components\/displays\/pagination\/models\/(?:DepartmentPos\/OrdersPagination|SuperUserDashboard\/InvoiceOrdersPagination)\.vue$/u,
+      /^src\/components\/displays\/pagination\/(?:PaginationOtherFiltersDropdown|TableLabeledPagination)\.vue$/u,
+      /^src\/components\/displays\/buttons\/DatePeriodSelector\.vue$/u,
+      /^src\/services\/orderDateEvents\.js$/u,
+      /^src\/services\/relativeDateShortcuts\.js$/u,
+      /^src\/views\/dashboards\/departmentDashboard\/modules\/Pos\/DepartmentPos(?:Orders|Drafts)\.vue$/u,
+    ],
+    specs: [
+      "tests/e2e/admin-pos-order-filters.spec.ts",
+      "tests/e2e/superuser-orders-date-filters.spec.ts",
+    ],
+    projects: chromiumProjects,
+  },
+  {
+    name: "superuser-customer-rules",
+    patterns: [
+      /^src\/views\/dashboards\/superUserDashboard\/CustomerRuleProductRestrictions\.vue$/u,
+      /^src\/features\/customer\/customerRuleProductRestrictionService\.js$/u,
+      /^src\/features\/customer\/customerRuleConfigurationPermissions\.js$/u,
+      /^src\/views\/dashboards\/superUserDashboard\/user\/UserCustomerRuleManager\.vue$/u,
+    ],
+    specs: ["tests/e2e/superuser-customer-rules.spec.ts", "tests/e2e/superuser-users.spec.ts"],
+    projects: chromiumProjects,
+  },
   {
     name: "pos",
     patterns: [
@@ -175,10 +202,21 @@ export const sourceMappings = [
   },
   {
     name: "system-status",
-    patterns: [/system[-/]?status/iu, /systemDatabase/iu, /replication/iu],
+    patterns: [/system[-/]?status/iu, /system(?:Database|Redis|Minio)/iu, /SystemDependencyDisplay/iu, /replication/iu],
     specs: ["tests/e2e/superuser-system-status.smoke.spec.js"],
     projects: chromiumProjects,
   },
+  {
+    name: "superuser-security",
+    patterns: [
+      /^src\/views\/dashboards\/superUserDashboard\/system\/SystemSecurity\.vue$/u,
+      /^src\/services\/superuserSecurity\.js$/u,
+      /superuser[-/]?security/iu,
+      /system\/security/iu,
+    ],
+    specs: ["tests/e2e/superuser-security.spec.ts"],
+    projects: chromiumProjects,
+  },
   {
     name: "superuser-department-pricing",
     patterns: [

scripts/run-playwright-full-slice.mjs

@@ -62,6 +62,7 @@ export const ownedFilesByRole = {
     "admin-department-visibility.spec.ts",
     "admin-overview-mobile.spec.ts",
     "admin-overview-night-washes.spec.ts",
+    "admin-pos-order-filters.spec.ts",
     "admin-pos-drafts.spec.ts",
     "admin-pos-orders.spec.ts",
     "adminModuleGoals.spec.ts",
@@ -80,7 +81,6 @@ export const ownedFilesByRole = {
     "pos.visual.spec.js",
   ],
   superuser: [
-    "coolify-infrastructure.spec.js",
     "edge-gateways.fleet-outline.spec.js",
     "edge-gateways.routes.spec.js",
     "edge-gateways.smoke.spec.js",
@@ -100,6 +100,7 @@ export const ownedFilesByRole = {
     "session-bootstrap.spec.ts",
     "superuser-bookings.spec.ts",
     "superuser-cron.spec.ts",
+    "superuser-customer-rules.spec.ts",
     "superuser-customer-complaints.spec.ts",
     "superuser-customers-mass-import.spec.ts",
     "superuser-department-branding.spec.js",
@@ -114,6 +115,7 @@ export const ownedFilesByRole = {
     "superuser-orders-date-filters.spec.ts",
     "superuser-products-layout.spec.ts",
     "superuser-roles-permissions.spec.ts",
+    "superuser-security.spec.ts",
     "superuser-system-status.smoke.spec.js",
     "superuser-users.spec.ts",
     "superuser-vehicles.smoke.spec.js",

src/App.vue

@@ -6,6 +6,7 @@ import favicon from "@/assets/favicon.ico";
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { hasStoredSessionToken } from "@/services/sessionStorage.js";
+import BrandedLoadingScreen from "@/components/global/BrandedLoadingScreen.vue";
 import {
   releaseChannelSwitchedStatus,
   releaseChannelUnavailableStatus,
@@ -16,6 +17,20 @@ import {
 const route = useRoute();
 const { t, te, locale } = useI18n({ useScope: "global" });
 const APP_TITLE = "Truck Wash";
+const pageRouteLoadingProps = {
+  title: "Indlæser side...",
+  subtitle: "Vi gør siden klar",
+  testId: "app-route-loading",
+  statusTestId: "app-route-loading-status",
+  ariaLabel: "Indlæser side",
+};
+const sessionRouteLoadingProps = {
+  title: "Bekræfter bruger...",
+  subtitle: "Vi indlæser din session",
+  testId: "app-route-loading",
+  statusTestId: "app-route-loading-status",
+  ariaLabel: "Bekræfter bruger",
+};
 const LayoutV2 = defineAsyncComponent(() => import("@/components/page/wrappers/LayoutV2.vue"));
 const DefaultPageWrapper = defineAsyncComponent(() => import("@/components/page/wrappers/DefaultPageWrapper.vue"));
 const RequestQueueProgress = defineAsyncComponent(() => import("@/components/global/RequestQueueProgress.vue"));
@@ -81,6 +96,42 @@ const shouldRenderReleaseChannelSwitched = computed(
 const shouldHideGlobalOverlays = computed(
   () => shouldRenderReleaseChannelUnavailable.value || shouldRenderReleaseChannelSwitched.value
 );
+const sessionLoaderRoutePattern = /^\/(?:user|admin|superuser|backoffice)(?:\/|$)/;
+const guestSessionLoaderRoutePattern =
+  /^\/(?:$|login(?:\/driver|\/qr)?$|admin\/login$|register$|auth\/password-reset(?:\/|$)|qr\/new-(?:customer|driver)$)/;
+const currentBrowserPath = () => {
+  if (typeof window === "undefined") {
+    return "";
+  }
+  return window.location.pathname.replace(/^\/[^/]+\/frontend(?=\/|$)/, "") || "/";
+};
+const routeMiddlewareList = () =>
+  route.matched.flatMap((record) => {
+    const middleware = record.meta?.middleware;
+    if (!middleware) {
+      return [];
+    }
+    return Array.isArray(middleware) ? middleware : [middleware];
+  });
+const hasRouteMiddleware = (middlewareName) =>
+  routeMiddlewareList().some((middleware) => middleware?.name === middlewareName);
+const shouldUseSessionPathLoader = (path) =>
+  sessionLoaderRoutePattern.test(path || "") &&
+  (!guestSessionLoaderRoutePattern.test(path || "") || hasStoredSessionToken());
+const shouldUseGuestSessionPathLoader = (path) =>
+  guestSessionLoaderRoutePattern.test(path || "") && hasStoredSessionToken();
+const shouldUseSessionRouteLoader = computed(() =>
+  route.name !== "default" &&
+  (shouldUseSessionPathLoader(route.path || "") ||
+    shouldUseSessionPathLoader(currentBrowserPath()) ||
+    shouldUseGuestSessionPathLoader(route.path || "") ||
+    shouldUseGuestSessionPathLoader(currentBrowserPath()) ||
+    hasRouteMiddleware("authMiddleware") ||
+    (hasStoredSessionToken() && hasRouteMiddleware("guestMiddleware")))
+);
+const appRouteLoadingProps = computed(() =>
+  shouldUseSessionRouteLoader.value ? sessionRouteLoadingProps : pageRouteLoadingProps
+);
 
 const initiateStoredSession = async () => {
   if (!hasStoredSessionToken()) {
@@ -111,22 +162,50 @@ watch([() => route.fullPath, locale], updateDocumentTitle, { immediate: true });
 </script>
 
 <template>
-  <ReleaseChannelUnavailable v-if="shouldRenderReleaseChannelUnavailable" />
-  <ReleaseChannelSwitched v-else-if="shouldRenderReleaseChannelSwitched" />
-  <LayoutV2 v-else-if="route.meta?.template === 'with-header'">
-    <router-view />
-  </LayoutV2>
-  <main v-else-if="route.meta?.template === 'clear-main'">
-    <router-view />
-  </main>
-  <template v-else>
-    <header></header>
-    <main>
-      <DefaultPageWrapper>
-        <router-view />
-      </DefaultPageWrapper>
-    </main>
-  </template>
+  <Suspense :timeout="0">
+    <template #default>
+      <ReleaseChannelUnavailable v-if="shouldRenderReleaseChannelUnavailable" />
+      <ReleaseChannelSwitched v-else-if="shouldRenderReleaseChannelSwitched" />
+      <LayoutV2 v-else-if="route.meta?.template === 'with-header'">
+        <router-view v-slot="{ Component }">
+          <Suspense :timeout="0">
+            <component :is="Component" />
+            <template #fallback>
+              <BrandedLoadingScreen v-bind="appRouteLoadingProps" />
+            </template>
+          </Suspense>
+        </router-view>
+      </LayoutV2>
+      <main v-else-if="route.meta?.template === 'clear-main'">
+        <router-view v-slot="{ Component }">
+          <Suspense :timeout="0">
+            <component :is="Component" />
+            <template #fallback>
+              <BrandedLoadingScreen v-bind="appRouteLoadingProps" />
+            </template>
+          </Suspense>
+        </router-view>
+      </main>
+      <template v-else>
+        <header></header>
+        <main>
+          <DefaultPageWrapper>
+            <router-view v-slot="{ Component }">
+              <Suspense :timeout="0">
+                <component :is="Component" />
+                <template #fallback>
+                  <BrandedLoadingScreen v-bind="appRouteLoadingProps" />
+                </template>
+              </Suspense>
+            </router-view>
+          </DefaultPageWrapper>
+        </main>
+      </template>
+    </template>
+    <template #fallback>
+      <BrandedLoadingScreen v-bind="appRouteLoadingProps" />
+    </template>
+  </Suspense>
   <RequestQueueProgress v-if="shouldRenderRequestQueueProgress && !shouldHideGlobalOverlays" />
   <ErrorReportLauncher v-if="shouldRenderRequestQueueProgress && !shouldHideGlobalOverlays" />
   <FrontendMaintenanceMenu />

src/components/buefy/tree/BuefyTree.vue

@@ -0,0 +1,377 @@
+<script setup lang="ts">
+import { computed, provide, reactive, watch } from "vue";
+import BuefyTreeNode from "./BuefyTreeNode.vue";
+
+type TreeNode = Record<string, any>;
+
+const props = withDefaults(defineProps<{
+  data: TreeNode[];
+  fields?: Partial<{
+    id: string;
+    label: string;
+    children: string;
+    isLeaf: string;
+    disabled: string;
+  }>;
+  selectionMode?: "none" | "single" | "multiple" | "checkbox";
+  selected?: any;
+  expandedKeys?: any[];
+  checkedKeys?: any[];
+  defaultExpandAll?: boolean;
+  expandOnClickNode?: boolean;
+  lazy?: boolean;
+  load?: (node: TreeNode) => Promise<TreeNode[]>;
+  progressiveBatchSize?: number;
+  loadMoreLabel?: string;
+  ariaLabel?: string;
+}>(), {
+  data: () => [],
+  fields: () => ({}),
+  selectionMode: "none",
+  selected: null,
+  expandedKeys: () => [],
+  checkedKeys: () => [],
+  defaultExpandAll: false,
+  expandOnClickNode: true,
+  lazy: false,
+  load: undefined,
+  progressiveBatchSize: 0,
+  loadMoreLabel: "Show {count} more",
+  ariaLabel: undefined,
+});
+
+const emit = defineEmits<{
+  (event: "update:selected", value: any): void;
+  (event: "update:expandedKeys", value: any[]): void;
+  (event: "update:checkedKeys", value: any[]): void;
+  (event: "select", node: TreeNode, key: any): void;
+  (event: "check", node: TreeNode, key: any, checkedKeys: any[]): void;
+  (event: "expand", node: TreeNode, key: any): void;
+  (event: "collapse", node: TreeNode, key: any): void;
+  (event: "node-click", node: TreeNode, key: any): void;
+  (event: "load-start", node: TreeNode, key: any): void;
+  (event: "load-error", error: unknown, node: TreeNode, key: any): void;
+}>();
+
+const resolvedFields = computed(() => ({
+  id: props.fields?.id || "id",
+  label: props.fields?.label || "label",
+  children: props.fields?.children || "children",
+  isLeaf: props.fields?.isLeaf || "isLeaf",
+  disabled: props.fields?.disabled || "disabled",
+}));
+
+const state = reactive({
+  selected: props.selected,
+  expandedKeys: [...props.expandedKeys],
+  checkedKeys: [...props.checkedKeys],
+  lazyChildrenCache: {} as Record<string, TreeNode[]>,
+  loadingKeys: [] as any[],
+  loadErrorKeys: [] as any[],
+  renderedLimits: {} as Record<string, number>,
+});
+
+const keyOf = (node: TreeNode) => node?.[resolvedFields.value.id];
+const keyString = (key: any) => String(key ?? "");
+const childrenOf = (node: TreeNode) => {
+  const children = node?.[resolvedFields.value.children];
+  return Array.isArray(children) ? children : [];
+};
+const cachedChildrenOf = (node: TreeNode) => state.lazyChildrenCache[keyString(keyOf(node))] || [];
+const effectiveChildrenOf = (node: TreeNode) => {
+  const children = childrenOf(node);
+  return children.length > 0 ? children : cachedChildrenOf(node);
+};
+const progressiveBatchSize = computed(() => Math.max(0, Math.floor(Number(props.progressiveBatchSize) || 0)));
+const visibleChildrenOf = (node: TreeNode) => {
+  const children = effectiveChildrenOf(node);
+  if (progressiveBatchSize.value < 1 || children.length <= progressiveBatchSize.value) {
+    return children;
+  }
+  const key = keyString(keyOf(node));
+  const limit = state.renderedLimits[key] || progressiveBatchSize.value;
+  return children.slice(0, limit);
+};
+const remainingChildrenCount = (node: TreeNode) => Math.max(0, effectiveChildrenOf(node).length - visibleChildrenOf(node).length);
+const hasMoreChildren = (node: TreeNode) => remainingChildrenCount(node) > 0;
+const showMoreChildren = (node: TreeNode) => {
+  if (!hasMoreChildren(node)) {
+    return;
+  }
+  const key = keyString(keyOf(node));
+  const currentLimit = state.renderedLimits[key] || progressiveBatchSize.value;
+  state.renderedLimits[key] = Math.min(effectiveChildrenOf(node).length, currentLimit + progressiveBatchSize.value);
+};
+const loadMoreLabelFor = (node: TreeNode) => props.loadMoreLabel.replace(
+  "{count}",
+  String(Math.min(progressiveBatchSize.value, remainingChildrenCount(node)))
+);
+const isDisabled = (node: TreeNode) => Boolean(node?.[resolvedFields.value.disabled]);
+const isSelfSelectable = (node: TreeNode) => node?.selectable !== false;
+const isBranchCheckable = (node: TreeNode) => node?.checkable === true;
+const isCheckDisabled = (node: TreeNode) => isDisabled(node) || (!isSelfSelectable(node) && !isBranchCheckable(node));
+const isLeaf = (node: TreeNode) => Boolean(node?.[resolvedFields.value.isLeaf]);
+
+const collectKeys = (node: TreeNode): any[] => {
+  const keys: any[] = [];
+  const key = keyOf(node);
+  if (key !== undefined && key !== null && isSelfSelectable(node)) {
+    keys.push(key);
+  }
+  effectiveChildrenOf(node).forEach((child) => {
+    keys.push(...collectKeys(child));
+  });
+  return keys;
+};
+
+const collectAllExpandableKeys = (nodes: TreeNode[]): any[] => {
+  const keys: any[] = [];
+  nodes.forEach((node) => {
+    const key = keyOf(node);
+    if (key !== undefined && key !== null && !isLeaf(node)) {
+      keys.push(key);
+    }
+    keys.push(...collectAllExpandableKeys(childrenOf(node)));
+  });
+  return keys;
+};
+
+watch(
+  () => props.selected,
+  (value) => {
+    state.selected = value;
+  }
+);
+
+watch(
+  () => props.expandedKeys,
+  (value) => {
+    state.expandedKeys = [...value];
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.checkedKeys,
+  (value) => {
+    state.checkedKeys = [...value];
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.data,
+  (nodes) => {
+    state.renderedLimits = {};
+    if (props.defaultExpandAll) {
+      state.expandedKeys = collectAllExpandableKeys(nodes);
+      emit("update:expandedKeys", [...state.expandedKeys]);
+    }
+  },
+  { immediate: true, deep: true }
+);
+
+const setExpandedKeys = (keys: any[]) => {
+  state.expandedKeys = [...keys];
+  emit("update:expandedKeys", [...state.expandedKeys]);
+};
+
+const setCheckedKeys = (keys: any[]) => {
+  state.checkedKeys = [...new Set(keys)];
+  emit("update:checkedKeys", [...state.checkedKeys]);
+};
+
+const loadNode = async (node: TreeNode) => {
+  if (!props.lazy || !props.load) {
+    return;
+  }
+  const key = keyOf(node);
+  if (key === undefined || key === null) {
+    return;
+  }
+  if (state.loadingKeys.includes(key)) {
+    return;
+  }
+
+  state.loadingKeys = [...state.loadingKeys, key];
+  state.loadErrorKeys = state.loadErrorKeys.filter((current) => current !== key);
+  emit("load-start", node, key);
+
+  try {
+    state.lazyChildrenCache[keyString(key)] = await props.load(node);
+    if (progressiveBatchSize.value > 0) {
+      state.renderedLimits[keyString(key)] = progressiveBatchSize.value;
+    }
+  } catch (error) {
+    state.loadErrorKeys = [...new Set([...state.loadErrorKeys, key])];
+    emit("load-error", error, node, key);
+  } finally {
+    state.loadingKeys = state.loadingKeys.filter((current) => current !== key);
+  }
+};
+
+const ensureChildrenLoadedForCheck = async (node: TreeNode) => {
+  if (!props.lazy || !props.load || isLeaf(node)) {
+    return;
+  }
+  const key = keyOf(node);
+  if (key === undefined || key === null) {
+    return;
+  }
+  if (childrenOf(node).length > 0 || state.lazyChildrenCache[keyString(key)]) {
+    return;
+  }
+  await loadNode(node);
+};
+
+const toggleExpand = async (node: TreeNode) => {
+  if (isDisabled(node) || isLeaf(node)) {
+    return;
+  }
+  const key = keyOf(node);
+  if (key === undefined || key === null) {
+    return;
+  }
+
+  if (state.expandedKeys.includes(key)) {
+    setExpandedKeys(state.expandedKeys.filter((current) => current !== key));
+    emit("collapse", node, key);
+    return;
+  }
+
+  setExpandedKeys([...state.expandedKeys, key]);
+  emit("expand", node, key);
+  if (props.lazy && childrenOf(node).length === 0 && !state.lazyChildrenCache[keyString(key)]) {
+    await loadNode(node);
+  }
+};
+
+const retryLoad = async (node: TreeNode) => {
+  const key = keyOf(node);
+  if (key === undefined || key === null) {
+    return;
+  }
+  delete state.lazyChildrenCache[keyString(key)];
+  state.loadErrorKeys = state.loadErrorKeys.filter((current) => current !== key);
+  if (!state.expandedKeys.includes(key)) {
+    setExpandedKeys([...state.expandedKeys, key]);
+  }
+  await loadNode(node);
+};
+
+const toggleCheck = async (node: TreeNode) => {
+  if (props.selectionMode !== "checkbox" || isCheckDisabled(node)) {
+    return;
+  }
+  const key = keyOf(node);
+  if (key === undefined || key === null) {
+    return;
+  }
+
+  await ensureChildrenLoadedForCheck(node);
+  const keys = collectKeys(node);
+  if (keys.length === 0) {
+    emit("check", node, key, [...state.checkedKeys]);
+    return;
+  }
+  const allChecked = keys.every((current) => state.checkedKeys.includes(current));
+  if (allChecked) {
+    const toRemove = new Set(keys);
+    setCheckedKeys(state.checkedKeys.filter((current) => !toRemove.has(current)));
+  } else {
+    setCheckedKeys([...state.checkedKeys, ...keys]);
+  }
+  emit("check", node, key, [...state.checkedKeys]);
+};
+
+const checkState = (node: TreeNode): "checked" | "unchecked" | "indeterminate" => {
+  const key = keyOf(node);
+  const children = effectiveChildrenOf(node);
+  if (children.length === 0) {
+    return state.checkedKeys.includes(key) ? "checked" : "unchecked";
+  }
+  const states = children.map((child) => checkState(child));
+  if (states.every((item) => item === "checked")) {
+    return "checked";
+  }
+  if (states.every((item) => item === "unchecked") && !state.checkedKeys.includes(key)) {
+    return "unchecked";
+  }
+  return "indeterminate";
+};
+
+const handleNodeClick = async (node: TreeNode) => {
+  if (isDisabled(node)) {
+    return;
+  }
+  const key = keyOf(node);
+  emit("node-click", node, key);
+  if (props.selectionMode === "single") {
+    state.selected = key;
+    emit("update:selected", key);
+    emit("select", node, key);
+  } else if (props.selectionMode === "multiple") {
+    const selected = Array.isArray(state.selected) ? state.selected : [];
+    state.selected = selected.includes(key)
+      ? selected.filter((current) => current !== key)
+      : [...selected, key];
+    emit("update:selected", state.selected);
+    emit("select", node, key);
+  }
+  if (props.expandOnClickNode) {
+    await toggleExpand(node);
+  }
+};
+
+provide("BuefyTreeContext", {
+  props,
+  state,
+  fields: resolvedFields,
+  keyOf,
+  childrenOf,
+  effectiveChildrenOf,
+  visibleChildrenOf,
+  hasMoreChildren,
+  showMoreChildren,
+  remainingChildrenCount,
+  loadMoreLabelFor,
+  isDisabled,
+  isCheckDisabled,
+  isLeaf,
+  toggleExpand,
+  retryLoad,
+  toggleCheck,
+  checkState,
+  handleNodeClick,
+});
+</script>
+
+<template>
+  <ul class="b-tree" role="tree" :aria-label="ariaLabel">
+    <BuefyTreeNode
+      v-for="(node, index) in data"
+      :key="keyOf(node) ?? index"
+      :node="node"
+      :depth="1"
+      :setsize="data.length"
+      :posinset="index + 1"
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps">
+          {{ slotProps.node?.[resolvedFields.label] }}
+        </slot>
+      </template>
+      <template #icon="slotProps">
+        <slot name="icon" v-bind="slotProps"></slot>
+      </template>
+    </BuefyTreeNode>
+  </ul>
+</template>
+
+<style scoped>
+.b-tree {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+</style>

src/components/buefy/tree/BuefyTreeNode.vue

@@ -0,0 +1,252 @@
+<script setup lang="ts">
+import { computed, inject, nextTick, onBeforeUnmount, ref, watch } from "vue";
+import { BCheckbox } from "buefy";
+
+type TreeNode = Record<string, any>;
+
+const props = defineProps<{
+  node: TreeNode;
+  depth: number;
+  setsize: number;
+  posinset: number;
+}>();
+
+const tree = inject<any>("BuefyTreeContext");
+if (!tree) {
+  throw new Error("BuefyTreeNode must be used inside BuefyTree");
+}
+
+const keyValue = computed(() => tree.keyOf(props.node));
+const keyString = computed(() => String(keyValue.value ?? ""));
+const logicalChildren = computed(() => tree.effectiveChildrenOf(props.node));
+const children = computed(() => tree.visibleChildrenOf(props.node));
+const hasMoreChildren = computed(() => tree.hasMoreChildren(props.node));
+const checkState = computed(() => tree.checkState(props.node));
+const isExpanded = computed(() => tree.state.expandedKeys.includes(keyValue.value));
+const isLoading = computed(() => tree.state.loadingKeys.includes(keyValue.value));
+const hasLoadError = computed(() => tree.state.loadErrorKeys.includes(keyValue.value));
+const isSelected = computed(() => {
+  const selected = tree.state.selected;
+  return Array.isArray(selected) ? selected.includes(keyValue.value) : selected === keyValue.value;
+});
+const isDisabled = computed(() => tree.isDisabled(props.node));
+const isCheckDisabled = computed(() => tree.isCheckDisabled(props.node));
+const isLeaf = computed(() => tree.isLeaf(props.node));
+const hasExpandToggle = computed(() => {
+  if (isLeaf.value) {
+    return false;
+  }
+  return tree.props.lazy || children.value.length > 0;
+});
+const label = computed(() => String(props.node?.[tree.fields.value.label] ?? ""));
+const loadMoreButton = ref<HTMLElement | null>(null);
+let loadMoreObserver: IntersectionObserver | null = null;
+
+const disconnectLoadMoreObserver = () => {
+  loadMoreObserver?.disconnect();
+  loadMoreObserver = null;
+};
+
+const observeLoadMoreButton = async () => {
+  disconnectLoadMoreObserver();
+  if (!isExpanded.value || !hasMoreChildren.value || typeof IntersectionObserver === "undefined") {
+    return;
+  }
+  await nextTick();
+  if (!loadMoreButton.value) {
+    return;
+  }
+  loadMoreObserver = new IntersectionObserver((entries) => {
+    if (!entries.some((entry) => entry.isIntersecting)) {
+      return;
+    }
+    disconnectLoadMoreObserver();
+    tree.showMoreChildren(props.node);
+    void observeLoadMoreButton();
+  }, { rootMargin: "160px 0px" });
+  loadMoreObserver.observe(loadMoreButton.value);
+};
+
+watch([isExpanded, hasMoreChildren], () => {
+  void observeLoadMoreButton();
+}, { immediate: true });
+
+onBeforeUnmount(disconnectLoadMoreObserver);
+</script>
+
+<template>
+  <li
+    class="b-tree-node"
+    :class="{
+      'is-expanded': isExpanded,
+      'is-selected': isSelected,
+      'is-disabled': isDisabled,
+      'is-loading': isLoading,
+      'has-load-error': hasLoadError,
+    }"
+    role="treeitem"
+    :aria-expanded="hasExpandToggle ? isExpanded : undefined"
+    :aria-selected="tree.props.selectionMode !== 'checkbox' && tree.props.selectionMode !== 'none' ? isSelected : undefined"
+    :aria-checked="tree.props.selectionMode === 'checkbox' ? (checkState === 'indeterminate' ? 'mixed' : checkState === 'checked') : undefined"
+    :aria-level="depth"
+    :aria-setsize="setsize"
+    :aria-posinset="posinset"
+    :aria-disabled="isDisabled || undefined"
+    :data-node-key="keyString"
+  >
+    <div class="b-tree-node-content" @click.stop="tree.handleNodeClick(node)">
+      <button
+        type="button"
+        class="button is-white is-small b-tree-node-toggle"
+        :class="{ 'is-invisible': !hasExpandToggle }"
+        :disabled="isDisabled"
+        @click.stop="tree.toggleExpand(node)"
+      >
+        <span class="icon is-small">
+          <i v-if="isLoading" class="fas fa-spinner fa-spin"></i>
+          <i v-else class="fas" :class="isExpanded ? 'fa-caret-down' : 'fa-caret-right'"></i>
+        </span>
+      </button>
+
+      <span
+        v-if="tree.props.selectionMode === 'checkbox'"
+        class="b-tree-node-checkbox"
+        @click.stop
+      >
+        <BCheckbox
+          :model-value="checkState === 'checked'"
+          :indeterminate="checkState === 'indeterminate'"
+          :disabled="isCheckDisabled"
+          tabindex="-1"
+          @update:model-value="tree.toggleCheck(node)"
+        />
+      </span>
+
+      <span class="b-tree-node-icon">
+        <slot name="icon" :node="node" :expanded="isExpanded" :loading="isLoading" :error="hasLoadError">
+          <span class="icon is-small">
+            <i class="fas" :class="hasExpandToggle ? (isExpanded ? 'fa-folder-open' : 'fa-folder') : 'fa-file'"></i>
+          </span>
+        </slot>
+      </span>
+
+      <span class="b-tree-node-label">
+        <slot
+          :node="node"
+          :data="node"
+          :depth="depth"
+          :expanded="isExpanded"
+          :checked="checkState === 'checked'"
+          :indeterminate="checkState === 'indeterminate'"
+          :selected="isSelected"
+          :loading="isLoading"
+          :error="hasLoadError"
+          :retry="() => tree.retryLoad(node)"
+        >
+          {{ label }}
+        </slot>
+      </span>
+    </div>
+
+    <ul v-if="isExpanded && children.length > 0" class="b-tree-children" role="group">
+      <BuefyTreeNode
+        v-for="(child, index) in children"
+        :key="tree.keyOf(child) ?? index"
+        :node="child"
+        :depth="depth + 1"
+        :setsize="logicalChildren.length"
+        :posinset="index + 1"
+      >
+        <template #default="slotProps">
+          <slot v-bind="slotProps"></slot>
+        </template>
+        <template #icon="slotProps">
+          <slot name="icon" v-bind="slotProps"></slot>
+        </template>
+      </BuefyTreeNode>
+      <li v-if="hasMoreChildren" class="b-tree-load-more" role="none">
+        <button
+          ref="loadMoreButton"
+          type="button"
+          class="button is-small is-light b-tree-load-more__button"
+          :aria-label="tree.loadMoreLabelFor(node)"
+          @click.stop="tree.showMoreChildren(node)"
+        >
+          <span class="icon is-small" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
+          <span>{{ tree.loadMoreLabelFor(node) }}</span>
+        </button>
+      </li>
+    </ul>
+  </li>
+</template>
+
+<style scoped>
+.b-tree-node {
+  list-style: none;
+}
+
+.b-tree-node-content {
+  align-items: flex-start;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  gap: 0.35rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.35rem;
+}
+
+.b-tree-node-content:hover {
+  background: #f5f7fa;
+}
+
+.b-tree-node.is-selected > .b-tree-node-content {
+  background: #eef4ff;
+}
+
+.b-tree-node.is-disabled > .b-tree-node-content {
+  cursor: default;
+  opacity: 0.65;
+}
+
+.b-tree-node-toggle {
+  flex: 0 0 1.85rem;
+  height: 1.75rem;
+  padding: 0;
+  width: 1.85rem;
+}
+
+.b-tree-node-checkbox {
+  flex: 0 0 auto;
+  margin-top: 0.08rem;
+}
+
+.b-tree-node-icon {
+  flex: 0 0 auto;
+  margin-top: 0.2rem;
+}
+
+.b-tree-node-label {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.b-tree-children {
+  border-left: 1px solid #dfe4ea;
+  list-style: none;
+  margin: 0 0 0 1.05rem;
+  padding: 0 0 0 0.65rem;
+}
+
+.b-tree-load-more {
+  list-style: none;
+  padding: 0.25rem 0 0.35rem 0.35rem;
+}
+
+.b-tree-load-more__button {
+  gap: 0.25rem;
+}
+
+.is-invisible {
+  visibility: hidden;
+}
+</style>

src/components/displays/boxes/ProductBox.vue

@@ -7,6 +7,7 @@ import CustomerProductDiscountDisplay
   from "@/components/displays/department/pos/displays/CustomerProductDiscountDisplay.vue";
 import { useI18n } from 'vue-i18n';
 import { getCustomerProductRestriction } from "@/features/customer/customerProductRules.js";
+import { BTooltip } from "buefy";
 
 const { t } = useI18n();
 const expandIcon = ref(null);
@@ -31,6 +32,10 @@ const props = defineProps({
   setProductAddonNote: Function,
   customerDiscounts: Array,
   customerAttributes: Array,
+  customerAttributesStatus: {
+    type: String,
+    default: "ready",
+  },
   compact: Boolean,
   showPrices: {
     type: Boolean,
@@ -44,6 +49,21 @@ const customerAttributesSafe = computed(() => (Array.isArray(props.customerAttri
 
 const getAddonProduct = (addon) => addon?.product || {};
 const getAddonName = (addon) => addon?.name || '';
+const getAddonTargetId = (addon) => addon?.option_id ?? getAddonProduct(addon).id ?? addon?.product_id ?? addon?.id;
+
+const getReadinessRestriction = () => {
+  if (props.customerAttributesStatus === "ready") {
+    return null;
+  }
+
+  const isLoadFailure = props.customerAttributesStatus === "error";
+  return {
+    restricted: true,
+    rule: null,
+    rules: [],
+    messageKey: isLoadFailure ? "pos.restrictions.load_failed" : "pos.restrictions.loading",
+  };
+};
 
 const isAddonSelected = (productId, addonId) => {
   return selectedAddonsSafe.value.some((addon) => addon.product_id === productId && addon.addon_id === addonId && addon.status === true);
@@ -69,6 +89,9 @@ const hideAddonPopper = (addon) => {
 };
 
 const emitAddToCart = (id) => {
+  if (isProductRestricted()) {
+    return;
+  }
   emit('addToCartProduct', props.product);
   emit('add-to-cart', id);
 };
@@ -148,9 +171,14 @@ const doesAddonHaveNoteRequirement = (addon) => {
 };
 
 const isAddonRestricted = (addon) => {
+  const readinessRestriction = getReadinessRestriction();
+  if (readinessRestriction) {
+    return true;
+  }
   const addonProduct = getAddonProduct(addon);
   return getCustomerProductRestriction({
     ...addonProduct,
+    id: getAddonTargetId(addon),
     name: getAddonName(addon) || addonProduct.name,
     category: addonProduct.category ?? addon?.category,
   }, customerAttributesSafe.value, {
@@ -160,9 +188,14 @@ const isAddonRestricted = (addon) => {
 };
 
 const getAddonRestrictionMessage = (addon) => {
+  const readinessRestriction = getReadinessRestriction();
+  if (readinessRestriction) {
+    return t(readinessRestriction.messageKey);
+  }
   const addonProduct = getAddonProduct(addon);
   const restriction = getCustomerProductRestriction({
     ...addonProduct,
+    id: getAddonTargetId(addon),
     name: getAddonName(addon) || addonProduct.name,
     category: addonProduct.category ?? addon?.category,
   }, customerAttributesSafe.value, {
@@ -173,12 +206,21 @@ const getAddonRestrictionMessage = (addon) => {
   return restriction.messageKey ? t(restriction.messageKey) : "";
 };
 
-const isProductRestricted = () => {
+const productRestriction = computed(() => {
+  const readinessRestriction = getReadinessRestriction();
+  if (readinessRestriction) {
+    return readinessRestriction;
+  }
   return getCustomerProductRestriction({
     ...props.product,
     name: props.name || props.product?.name,
-  }, customerAttributesSafe.value).restricted;
-};
+  }, customerAttributesSafe.value);
+});
+
+const isProductRestricted = () => productRestriction.value.restricted;
+const getProductRestrictionMessage = () => productRestriction.value.messageKey
+  ? t(productRestriction.value.messageKey)
+  : "";
 
 const orderByOrderPriority = (addons) => {
   return [...addons].sort((a, b) => {
@@ -210,6 +252,13 @@ const orderByOrderPriority = (addons) => {
               <template v-else>
                 <p class="subtitle is-6 mb-0 has-text-grey-light" style="font-size: smaller"><br/></p>
               </template>
+              <span
+                  v-if="isProductRestricted()"
+                  class="tag is-danger is-light is-small mt-1"
+                  :data-testid="`pos-product-restriction-${id}`"
+              >
+                {{ getProductRestrictionMessage() }}
+              </span>
             </div>
           </div>
           <!-- Price -->
@@ -235,6 +284,14 @@ const orderByOrderPriority = (addons) => {
           <div class="column is-8-desktop">
             <!-- Actual product details -->
             <p class="title is-6">{{ name }}</p>
+            <span
+                v-if="isProductRestricted()"
+                class="tag is-danger is-light mb-2"
+                :data-testid="`pos-product-restriction-${id}`"
+            >
+              <span class="icon is-small"><i class="fas fa-exclamation-triangle"></i></span>
+              <span>{{ getProductRestrictionMessage() }}</span>
+            </span>
             <p class="subtitle is-6 mb-0" :style="{ 'color': Colors.global.primaryColor }">
               No. {{ id }}</p>
             <p class="subtitle is-6">{{ description }}</p>
@@ -255,6 +312,7 @@ const orderByOrderPriority = (addons) => {
                     <!-- Addon ( + ) -->
                     <button
                         class="button is-small"
+                        :data-testid="`pos-addon-${getAddonTargetId(addon)}-increase`"
                         @click="onBeforeAddProductAddon(addon, () => addProductAddon(
                           props.id,
                           addon.option_id
@@ -267,6 +325,7 @@ const orderByOrderPriority = (addons) => {
                     <!-- quantity (if any), Addon name, price -->
                     <button
                         class="button is-small is-fullwidth"
+                        :data-testid="`pos-addon-${getAddonTargetId(addon)}-name`"
                         :class="{ 'is-link': isAddonSelected(props.id, addon.option_id), 'is-light': !isAddonSelected(props.id, addon.option_id) }"
                         @click="onBeforeToggleProductAddon(addon, isAddonSelected(props.id, addon.option_id), () => toggleProductAddon(props.id, addon.option_id))"
                         @mouseenter="showAddonPopper(addon, $event.target)"
@@ -280,6 +339,7 @@ const orderByOrderPriority = (addons) => {
                     <!-- Addon ( - ) -->
                     <button
                         class="button is-small"
+                        :data-testid="`pos-addon-${getAddonTargetId(addon)}-decrease`"
                         :disabled="!isAddonSelected(props.id, addon.option_id)"
                         @click="subtractProductAddon(
                           props.id,
@@ -296,17 +356,75 @@ const orderByOrderPriority = (addons) => {
 	                <template v-else>
                   <div
                       class="buttons has-addons is-small is-fullwidth is-flex-wrap-nowrap"
-                      :data-testid="`pos-addon-restriction-${getAddonProduct(addon).id ?? addon.option_id ?? addon.id}`"
+                      :data-testid="`pos-addon-restriction-${getAddonTargetId(addon)}`"
                   >
-	                  <button
-                        class="button is-small is-fullwidth is-danger is-light"
-	                        disabled
+	                  <BTooltip
+	                    :label="getAddonRestrictionMessage(addon)"
+	                    :triggers="['hover', 'focus', 'click']"
+	                    multilined
+	                    position="is-top"
+	                    type="is-dark"
+	                    append-to-body
+	                  >
+	                    <span
+	                      class="pos-restriction-tooltip-trigger"
+	                      tabindex="0"
+	                      :data-testid="`pos-addon-restriction-tooltip-${getAddonTargetId(addon)}-increase`"
 	                    >
-	                      <span class="icon is-small">
-	                        <i class="fas fa-exclamation-triangle"></i>
-	                      </span>
-	                      <span>{{ addon.name }} / {{ getAddonRestrictionMessage(addon) }}</span>
-	                    </button>
+	                      <button
+	                        class="button is-small is-danger is-light"
+	                        :data-testid="`pos-addon-${getAddonTargetId(addon)}-increase`"
+	                        disabled
+	                      >
+	                        <span class="icon is-small"><i class="fas fa-plus"></i></span>
+	                      </button>
+	                    </span>
+	                  </BTooltip>
+	                  <BTooltip
+	                    :label="getAddonRestrictionMessage(addon)"
+	                    :triggers="['hover', 'focus', 'click']"
+	                    multilined
+	                    position="is-top"
+	                    type="is-dark"
+	                    append-to-body
+	                  >
+	                    <span
+	                      class="pos-restriction-tooltip-trigger pos-restriction-tooltip-trigger--grow"
+	                      tabindex="0"
+	                      :data-testid="`pos-addon-restriction-tooltip-${getAddonTargetId(addon)}`"
+	                    >
+	                      <button
+	                        class="button is-small is-fullwidth is-danger is-light"
+	                        :data-testid="`pos-addon-${getAddonTargetId(addon)}-name`"
+	                        disabled
+	                      >
+	                        <span class="icon is-small"><i class="fas fa-exclamation-triangle"></i></span>
+	                        <span>{{ addon.name }} / {{ getAddonPrice(addon) }} Kr.</span>
+	                      </button>
+	                    </span>
+	                  </BTooltip>
+	                  <BTooltip
+	                    :label="getAddonRestrictionMessage(addon)"
+	                    :triggers="['hover', 'focus', 'click']"
+	                    multilined
+	                    position="is-top"
+	                    type="is-dark"
+	                    append-to-body
+	                  >
+	                    <span
+	                      class="pos-restriction-tooltip-trigger"
+	                      tabindex="0"
+	                      :data-testid="`pos-addon-restriction-tooltip-${getAddonTargetId(addon)}-decrease`"
+	                    >
+	                      <button
+	                        class="button is-small is-danger is-light"
+	                        :data-testid="`pos-addon-${getAddonTargetId(addon)}-decrease`"
+	                        disabled
+	                      >
+	                        <span class="icon is-small"><i class="fas fa-minus"></i></span>
+	                      </button>
+	                    </span>
+	                  </BTooltip>
 	                  </div>
                 </template>
               </template>
@@ -315,15 +433,37 @@ const orderByOrderPriority = (addons) => {
             <p>&nbsp;</p>
             <!-- Add to cart -->
             <div class="buttons is-centered mt-2 mb-3 pl-6">
-              <button
-                  v-bind:disabled="isProductRestricted()"
-                  :data-testid="`pos-add-to-cart-${id}`"
-                  class="button is-link is-small is-fullwidth"
-                  @click="emitAddToCart(id);"
+              <BTooltip
+                v-if="isProductRestricted()"
+                :label="getProductRestrictionMessage()"
+                :triggers="['hover', 'focus', 'click']"
+                multilined
+                position="is-top"
+                type="is-dark"
+                append-to-body
               >
-                <span class="icon is-small">
-                  <i class="fas fa-cart-plus"></i>
+                <span
+                  class="pos-restriction-tooltip-trigger pos-restriction-tooltip-trigger--grow"
+                  tabindex="0"
+                  :data-testid="`pos-add-to-cart-restriction-tooltip-${id}`"
+                >
+                  <button
+                    disabled
+                    :data-testid="`pos-add-to-cart-${id}`"
+                    class="button is-small is-fullwidth is-danger is-light"
+                  >
+                    <span class="icon is-small"><i class="fas fa-cart-plus"></i></span>
+                    <span>{{ t('pos.add_to_cart') }}</span>
+                  </button>
                 </span>
+              </BTooltip>
+              <button
+                v-else
+                :data-testid="`pos-add-to-cart-${id}`"
+                class="button is-small is-fullwidth is-link"
+                @click="emitAddToCart(id);"
+              >
+                <span class="icon is-small"><i class="fas fa-cart-plus"></i></span>
                 <span>{{ t('pos.add_to_cart') }}</span>
               </button>
             </div>
@@ -359,4 +499,17 @@ const orderByOrderPriority = (addons) => {
   white-space: nowrap;
 }
 
+.pos-restriction-tooltip-trigger {
+  display: inline-flex;
+}
+
+.pos-restriction-tooltip-trigger--grow {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.pos-restriction-tooltip-trigger--grow > .button {
+  width: 100%;
+}
+
 </style>

src/components/displays/buttons/ActionSettingsWheelItem.vue

@@ -5,6 +5,10 @@ const props = defineProps({
   clickAction: Function,
   icon: String,
   label: String,
+  detailValue: {
+    type: [String, Number],
+    default: "",
+  },
   disabled: Boolean,
   testId: {
     type: String,
@@ -107,6 +111,10 @@ const getLabel = () => {
   return props.label ?? 'Unavngivet handling';
 }
 
+const hasDetailValue = () => {
+  return props.detailValue !== undefined && props.detailValue !== null && String(props.detailValue).length > 0;
+}
+
 const getStyle = () => {
   return styles[props.template] ?? styles.default;
 }
@@ -140,18 +148,40 @@ const getLabelColor = () => {
                     <span class="icon">
                       <i :class="getIcon() + ' ' + getIconColor()"></i>
                     </span>
-    <span class="ml-1"
+    <span class="dropdown-item-action__label ml-1"
           :class="getLabelColor()"
     >{{ getLabel() }}</span>
+    <span v-if="hasDetailValue()" class="dropdown-item-action__detail">
+      {{ props.detailValue }}
+    </span>
   </button>
 </template>
 
 <style scoped>
 .dropdown-item-action {
-  width: 100%;
-  text-align: left;
+  align-items: center;
   background: transparent;
   border: 0;
+  display: flex;
+  gap: 0.25rem;
+  text-align: left;
+  width: 100%;
+}
+
+.dropdown-item-action__label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.dropdown-item-action__detail {
+  color: #718095;
+  font-size: 0.86rem;
+  font-weight: 600;
+  margin-left: auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  padding-left: 0.75rem;
+  text-align: right;
 }
 
 .is-disabled {

src/components/displays/buttons/ActionSettingsWheelItemLabel.vue

@@ -8,6 +8,14 @@ const props = defineProps({
     default: undefined,
   },
   label: String,
+  detailValue: {
+    type: [String, Number],
+    default: "",
+  },
+  appearance: {
+    type: String,
+    default: "default",
+  },
   template: {
     type: String,
     default: 'default', // The style of the button (default, danger, success, warning, info, light)
@@ -86,6 +94,10 @@ const getLabel = () => {
   return props.label ?? 'Unavngivet handling';
 }
 
+const hasDetailValue = () => {
+  return props.detailValue !== undefined && props.detailValue !== null && String(props.detailValue).length > 0;
+}
+
 const getStyle = () => {
   return styles[props.template] ?? styles.default;
 }
@@ -109,25 +121,55 @@ const getLabelColor = () => {
 const hasIcon = () => {
   return props.icon !== undefined && props.icon !== null;
 }
+
+const isMetadataAppearance = () => props.appearance === "metadata";
 </script>
 
 <template>
-  <a class="dropdown-item is-disabled">
-                    <span class="icon" v-if="hasIcon()">
-                      <i :class="getIcon() + ' ' + getIconColor()"></i>
-                    </span>
-    <span class="ml-1"
-          :class="getLabelColor()"
-    >{{ SessionUser.functions.ucFirst(getLabel()) }}</span>
+  <a
+    class="dropdown-item dropdown-item-label is-disabled"
+    :class="{ 'dropdown-item-label--metadata': isMetadataAppearance() }"
+  >
+    <span class="icon" v-if="hasIcon()">
+      <i :class="getIcon() + ' ' + getIconColor()"></i>
+    </span>
+    <span class="dropdown-item-label__text ml-1" :class="getLabelColor()">
+      {{ SessionUser.functions.ucFirst(getLabel()) }}
+    </span>
+    <span v-if="hasDetailValue()" class="dropdown-item-label__detail">
+      {{ props.detailValue }}
+    </span>
   </a>
 </template>
 
 <style scoped>
 .is-disabled {
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
   pointer-events: none;
+  text-align: left;
+  width: 100%;
   opacity: 0.5;
 }
 
+.dropdown-item-label__text {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  text-align: left;
+}
+
+.dropdown-item-label__detail {
+  color: #718095;
+  font-size: 0.86rem;
+  font-weight: 600;
+  margin-left: auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  padding-left: 0.75rem;
+  text-align: right;
+}
+
 .is-disabled:hover {
   background-color: transparent;
 }
@@ -135,4 +177,22 @@ const hasIcon = () => {
 .is-disabled .icon {
   opacity: 0.5;
 }
-</style>
+
+.dropdown-item-label--metadata {
+  opacity: 1;
+}
+
+.dropdown-item-label--metadata .icon {
+  opacity: 1;
+}
+
+.dropdown-item-label--metadata .dropdown-item-label__text {
+  color: #4a5b73;
+  font-weight: 600;
+}
+
+.dropdown-item-label--metadata .dropdown-item-label__detail {
+  color: #25344d;
+  font-weight: 700;
+}
+</style>

src/components/displays/buttons/ActionSettingsWheelSelectItem.vue

@@ -0,0 +1,129 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+
+const props = defineProps({
+  changeAction: {
+    type: Function,
+    default: null,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  icon: {
+    type: String,
+    default: "fas fa-cog",
+  },
+  label: {
+    type: String,
+    default: "",
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  testId: {
+    type: String,
+    default: "",
+  },
+  value: {
+    type: [String, Number, Boolean],
+    default: "",
+  },
+});
+
+const root = ref(null);
+const normalizeSelectValue = (value) => String(value);
+const localValue = ref(normalizeSelectValue(props.value));
+const isProcessing = ref(false);
+
+watch(
+  () => props.value,
+  (value) => {
+    localValue.value = normalizeSelectValue(value);
+  }
+);
+
+const isDisabled = computed(() => props.disabled || isProcessing.value);
+
+const optionKey = (option) => `${typeof option?.value}:${normalizeSelectValue(option?.value)}`;
+const getInputValue = (value) => value?.target?.value ?? value;
+
+const onInput = async (value) => {
+  const nextValue = normalizeSelectValue(getInputValue(value));
+
+  if (isDisabled.value || nextValue === normalizeSelectValue(props.value)) {
+    return;
+  }
+
+  isProcessing.value = true;
+  try {
+    if (props.changeAction) {
+      await props.changeAction(nextValue);
+    }
+    root.value?.dispatchEvent(new CustomEvent("dropdown-action-selected", { bubbles: true }));
+  } finally {
+    isProcessing.value = false;
+  }
+};
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="dropdown-item action-settings-wheel-select-item"
+    :class="{ 'is-disabled': isDisabled }"
+    :data-testid="props.testId || undefined"
+  >
+    <span class="icon action-settings-wheel-select-item__icon">
+      <i :class="props.icon"></i>
+    </span>
+    <span class="action-settings-wheel-select-item__label">
+      {{ props.label }}
+    </span>
+    <b-select
+      v-model="localValue"
+      size="is-small"
+      :disabled="isDisabled"
+      :aria-label="props.label"
+      :data-testid="props.testId ? `${props.testId}-select` : undefined"
+      @click.stop
+      @mousedown.stop
+      @update:modelValue="onInput"
+    >
+      <option v-for="option in props.options" :key="optionKey(option)" :value="normalizeSelectValue(option.value)">
+        {{ option.label }}
+      </option>
+    </b-select>
+  </div>
+</template>
+
+<style scoped>
+.action-settings-wheel-select-item {
+  align-items: center;
+  display: flex;
+  gap: 0.35rem;
+  width: 100%;
+}
+
+.action-settings-wheel-select-item__icon {
+  flex: 0 0 auto;
+}
+
+.action-settings-wheel-select-item__label {
+  color: #25344d;
+  flex: 1 1 auto;
+  font-weight: 500;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.action-settings-wheel-select-item :deep(.select),
+.action-settings-wheel-select-item :deep(select) {
+  max-width: 9.5rem;
+}
+
+.action-settings-wheel-select-item.is-disabled {
+  opacity: 0.55;
+}
+</style>

src/components/displays/buttons/ActionSettingsWheelToggleItem.vue

@@ -62,7 +62,11 @@ const onClick = async () => {
     :title="title"
     @click.stop.prevent="onClick"
   >
-    <span class="action-settings-wheel-toggle-item__label">{{ label }}</span>
+    <span class="action-settings-wheel-toggle-item__label">
+      <slot name="label" :label="label">
+        {{ label }}
+      </slot>
+    </span>
     <span class="action-settings-wheel-toggle-item__switch" :class="{ 'is-checked': checked }" aria-hidden="true">
       <span class="action-settings-wheel-toggle-item__knob"></span>
     </span>

src/components/displays/buttons/DatePeriodSelector.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { IS_DEV } from "@/config.js";
-import { computed, ref, watch } from "vue";
+import { computed, ref, useSlots, watch } from "vue";
 import { useWindowSize } from "@vueuse/core";
 import { BTooltip } from "buefy";
 import { useI18n } from "vue-i18n";
@@ -124,6 +124,7 @@ const props = defineProps({
     default: "dots",
   },
 });
+const slots = useSlots();
 
 const visibility = computed(() => ({
   showStartDate: true,
@@ -150,6 +151,16 @@ const monthFieldRef = ref<InstanceType<typeof BuefyMonthField> | null>(null);
 const isPendingEmit = ref(false);
 const isMobileLayout = computed(() => width.value <= 768 || SessionUser.functions.device.isMobile());
 const showMobileAdvancedControls = computed(() => visibility.value.showMonthSelector || visibility.value.showYearSelector);
+const showDesktopSelectionControls = computed(() => (
+  Boolean(visibility.value.showStartDate)
+  || Boolean(visibility.value.showEndDate)
+  || Boolean(!visibility.value.showStartDate && !visibility.value.showEndDate && visibility.value.showToLabel)
+  || Boolean(visibility.value.showMonthSelector)
+  || Boolean(visibility.value.showYearSelector)
+  || Boolean(visibility.value.showSelectionValidity)
+  || Boolean(slots.left)
+  || Boolean(slots.right)
+));
 const isMobileAdvancedExpanded = ref(false);
 const isMobileOtherExpanded = ref(false);
 const isOtherMonthModalOpen = ref(false);
@@ -537,7 +548,7 @@ const handleShortcutSelection = (event) => {
     </div>
 
     <template v-else>
-      <div class="level is-align-items-center">
+      <div v-if="showDesktopSelectionControls" class="level is-align-items-center">
         <div class="level-left">
           <div class="level-item" v-if="visibility.showStartDate">
             <BuefyDateField

src/components/displays/department/pos/PosSelectedCustomer.vue

@@ -4,6 +4,7 @@ import {
   customer_id,
   customer_data,
   customer_attributes,
+  department_id,
   loadCustomerAttributes,
   hideDiscountsCatalog,
   hidePricesCatalog,
@@ -20,17 +21,11 @@ import "bulma-switch/dist/css/bulma-switch.min.css";
 import "bulma-block-list/src/block-list.scss";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { useI18n } from "vue-i18n";
-import {
-  popperBox,
-  popper,
-  removePopperIfOpen,
-  showPopperWithContent,
-  showPopper,
-} from "@/components/displays/PopperDefault.vue";
 import RequiresPermission from "@/components/displays/permissionbased/RequiresPermission.vue";
 import CustomerDiscountsDepartmentDisplay from "@/components/displays/department/pos/displays/CustomerDiscountsDepartmentDisplay.vue";
 import ExpandableContentBox from "@/components/displays/boxes/ExpandableContentBox.vue";
 import { getCustomerRuleDefinitions } from "@/features/customer/customerRuleRegistry.js";
+import CustomerRuleTooltip from "@/features/customer/CustomerRuleTooltip.vue";
 
 const { t } = useI18n();
 const emit = defineEmits(["update:activeTab"]);
@@ -172,6 +167,9 @@ const refreshCustomerAttributesForRules = async (selectedCustomerNumber = custom
 const hasAttribute = (prop) => {
   return customer_attributes.value.some((attribute) => attribute.attribute === prop);
 };
+const attributeEntry = (prop) => (
+  customer_attributes.value.find((attribute) => attribute.attribute === prop) ?? null
+);
 
 watch(
   activeTabKey,
@@ -276,12 +274,16 @@ const customer_data_has_empty_details = () => {
             <span class="panel-icon pos-selected-customer__icon">
               <i :class="attribute.icon" aria-hidden="true"></i>
             </span>
-            <span
-              class="pos-selected-customer__label"
-              @mouseover="showPopper(popperBox(attribute.name, attribute.description), $event.target)"
-              @mouseleave="removePopperIfOpen()"
-              >{{ attribute.name }}</span
+            <CustomerRuleTooltip
+              :attribute="attribute.attribute"
+              :active="hasAttribute(attribute.prop)"
+              :customer-number="customer_id"
+              :department-id="department_id"
+              :restriction="attributeEntry(attribute.prop)"
+              :test-id="`pos-customer-rule-tooltip-${attribute.attribute}`"
             >
+              <span class="pos-selected-customer__label">{{ attribute.name }}</span>
+            </CustomerRuleTooltip>
             <span class="pos-selected-customer__value">
               <span
                 v-if="hasAttribute(attribute.prop)"

src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile2.vue

@@ -39,10 +39,13 @@ import {
   reg_3,
   department_id,
 	  customer_id,
+  customer_attributes,
+  customer_attributes_status,
 	  getCustomerEmail,
 	  customer_name,
 	  getAddonRestriction,
 	  getProductRestriction,
+  retryCustomerAttributes,
 	  registerPosStepSaveBarrier,
 	  saveOrderMetadataField,
 	} from "@/components/shop/POSDepartmentProcess.vue";
@@ -488,6 +491,9 @@ const showRestrictedItemsRemovedWarning = () => {
   restrictionWarningMessageKey.value = "pos.restrictions.restricted_items_removed";
 };
 
+const getRestrictionReadinessMessageKey = () =>
+  customer_attributes_status.value === "error" ? "pos.restrictions.load_failed" : "pos.restrictions.loading";
+
 const getMobileAddonRestriction = (addon: any) => getAddonRestriction(addon, { isRelatedAddon: true });
 
 const getStandaloneAdditionalItemRestriction = (item: any) =>
@@ -523,6 +529,10 @@ const decorateMobileAddonRestriction = (addon: any) => {
 };
 
 const sanitizeRestrictedTransactionItems = () => {
+  if (customer_attributes_status.value !== "ready") {
+    return false;
+  }
+
   let removedRestrictedItem = false;
   const primary = transactionItems.primaryItem.value;
 
@@ -590,6 +600,10 @@ const sanitizeRestrictedTransactionItems = () => {
 };
 
 const onCopyLastOrder = (vehicleIndex: number) => {
+  if (customer_attributes_status.value !== "ready") {
+    restrictionWarningMessageKey.value = getRestrictionReadinessMessageKey();
+    return;
+  }
   lastOrders.select(vehicleIndex);
   sanitizeRestrictedTransactionItems();
 };
@@ -1055,6 +1069,12 @@ const syncCurrentTransactionToOrder = async () => {
     throw new Error("No primary item selected");
   }
 
+  const primaryRestriction = getProductRestriction(transactionItems.primaryItem.value);
+  if (primaryRestriction.restricted) {
+    restrictionWarningMessageKey.value = primaryRestriction.messageKey;
+    return false;
+  }
+
   const existingItemsResponse = await getOrderItems(normalizedOrderId);
   const existingItems = Array.isArray(existingItemsResponse?.data?.data) ? existingItemsResponse.data.data : [];
 
@@ -1248,6 +1268,12 @@ const onBeforeComplete = async () => {
     throw new Error("No primary item selected");
   }
 
+  const primaryRestriction = getProductRestriction(transactionItems.primaryItem.value);
+  if (primaryRestriction.restricted) {
+    restrictionWarningMessageKey.value = primaryRestriction.messageKey;
+    return false;
+  }
+
   sanitizeRestrictedTransactionItems();
 
   if (!(await ensureRequiredOrderItemNotes())) {
@@ -1408,6 +1434,8 @@ watch(
   [
     () => transactionItems.primaryItem.value?.addons,
     () => transactionItems.additionalItems.value,
+    () => customer_attributes.value,
+    () => customer_attributes_status.value,
   ],
   () => {
     sanitizeRestrictedTransactionItems();
@@ -1434,6 +1462,21 @@ const filteredAddons = computed(() => {
 
 <template>
   <template v-if="vehicleSelection">
+    <div
+      v-if="customer_attributes_status === 'error'"
+      class="notification is-danger is-light is-flex is-align-items-center is-justify-content-space-between py-2 px-3 mb-3"
+      data-testid="pos-mobile-customer-restrictions-load-error"
+    >
+      <span>{{ t("pos.restrictions.load_failed") }}</span>
+      <button
+        type="button"
+        class="button is-small is-danger is-light"
+        data-testid="pos-mobile-customer-restrictions-retry"
+        @click="retryCustomerAttributes"
+      >
+        {{ t("common.retry") }}
+      </button>
+    </div>
     <PosDepartmentStep2MobileVehicleSelection @close="vehicleSelection = false" />
     <!-- Buttons -->
     <PosDepartmentStepMobileFixedBottomControl variant="pos-step">
@@ -1500,6 +1543,21 @@ const filteredAddons = computed(() => {
 	      >
 	        {{ t(restrictionWarningMessageKey) }}
 	      </p>
+      <div
+        v-if="customer_attributes_status === 'error'"
+        class="notification is-danger is-light is-flex is-align-items-center is-justify-content-space-between py-2 px-3 mb-0"
+        data-testid="pos-mobile-customer-restrictions-load-error"
+      >
+        <span>{{ t("pos.restrictions.load_failed") }}</span>
+        <button
+          type="button"
+          class="button is-small is-danger is-light"
+          data-testid="pos-mobile-customer-restrictions-retry"
+          @click="retryCustomerAttributes"
+        >
+          {{ t("common.retry") }}
+        </button>
+      </div>
 	      <!-- Product -->
 	      <PosDepartmentStepMobile2Product
         v-on:pointerdown="onPrimaryProductPointerDown"

src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2AdditionalItems.vue

@@ -12,7 +12,12 @@ import PosDepartmentStepMobileFixedBottomControl from "@/components/displays/dep
 import PosDepartmentStepMobileButtonNextStep from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonNextStep.vue";
 import { transactionItems } from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
 import PosDepartmentStepMobile2FloatingCart from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2FloatingCart.vue";
-import { customer_id, getProductRestriction, hasAttribute } from "@/components/shop/POSDepartmentProcess.vue";
+import {
+  customer_id,
+  customer_attributes_status,
+  getProductRestriction,
+  retryCustomerAttributes,
+} from "@/components/shop/POSDepartmentProcess.vue";
 import { useI18n } from "vue-i18n";
 import { orderProducts } from "@/components/shop/Products.vue";
 
@@ -121,12 +126,6 @@ const getAvailableAdditionalItems = () => {
   );
 };
 const availableAdditionalItems = ref<Addon[]>(getAvailableAdditionalItems());
-const getStandaloneAdditionalServicesRestriction = () => ({
-  restricted: true,
-  rule: "restrictAdditionalServices",
-  messageKey: "pos.restrictions.addons_not_allowed",
-});
-
 const isAdditionalItemRestricted = (product: PosProduct) => {
   return getAdditionalItemRestriction({ product } as Addon).restricted;
 };
@@ -137,12 +136,7 @@ const getAdditionalSelectionRestrictionMessage = (product: PosProduct) => {
 };
 
 const getAdditionalItemRestriction = (addon: Addon) => {
-  if (hasAttribute("restrictAdditionalServices")) {
-    return getStandaloneAdditionalServicesRestriction();
-  }
-
   return getProductRestriction(addon.product || addon, {
-    includeNumericAddonCategory: true,
     isStandaloneAdditionalService: true,
   });
 };
@@ -324,6 +318,21 @@ const onClickAddProduct = async (product: PosProduct) => {
 
 <template>
   <div data-testid="pos-mobile-additional-items">
+    <div
+      v-if="customer_attributes_status === 'error'"
+      class="notification is-danger is-light is-flex is-align-items-center is-justify-content-space-between py-2 px-3 mb-3"
+      data-testid="pos-mobile-customer-restrictions-load-error"
+    >
+      <span>{{ t("pos.restrictions.load_failed") }}</span>
+      <button
+        type="button"
+        class="button is-small is-danger is-light"
+        data-testid="pos-mobile-customer-restrictions-retry"
+        @click="retryCustomerAttributes"
+      >
+        {{ t("common.retry") }}
+      </button>
+    </div>
     <!-- Minimal view, when not set as fullscreen view -->
     <WhiteBoxCard
       :toggleable="

src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Addons.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import Plus from "@/components/viewport/elements/icons/Plus.vue";
 import ControlSelectAmount from "@/components/viewport/elements/controls/ControlSelectAmount.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { Addon } from "../objects/PosAddon.vue";
@@ -59,6 +58,9 @@ const getAddonKey = (addon: Addon) => String(addon.id ?? addon.product?.id ?? ""
 
 const setAddonQuantity = (addon: Addon, quantity: number) => {
   const nextQuantity = Number(quantity || 0);
+  if (nextQuantity > 0 && isAddonRestricted(addon)) {
+    return;
+  }
   const nextAddons = props.addons.map((candidate) =>
     getAddonKey(candidate) === getAddonKey(addon) ? { ...candidate, quantity: nextQuantity } : candidate
   );
@@ -158,20 +160,18 @@ const getAddonRestrictionMessage = (addon: Addon) => {
           :disabled="isAddonRestricted(addon)"
           :restrictionMessage="getAddonRestrictionMessage(addon)"
           @addProduct="onAddProduct(addon)"
-          :customButton="addon.quantity > 0 && !isAddonRestricted(addon)"
+          :customButton="true"
         >
           <span class="custom-select-quantity-container">
             <ControlSelectAmount
-              v-if="!isAddonRestricted(addon)"
               :testIdPrefix="`pos-mobile-addon-${addon.product.id}`"
               @update:quantity="setAddonQuantity(addon, $event)"
               :quantity="addon.quantity"
               :max="addon.max"
               :min="addon.min"
+              :disabled="isAddonRestricted(addon)"
+              :restrictionMessage="getAddonRestrictionMessage(addon)"
             />
-            <span v-else class="tag is-danger is-light is-rounded">
-              {{ getAddonRestrictionMessage(addon) }}
-            </span>
           </span>
         </PosDepartmentStepMobile2CategoryProduct>
       </template>

src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2CategoryProduct.vue

@@ -3,6 +3,7 @@
 import {getPicture} from "@/components/displays/department/pos/displays/Piktogrammer.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import Plus from "@/components/viewport/elements/icons/Plus.vue";
+import { BTooltip } from "buefy";
 
 const props = defineProps({
   piktogram: {
@@ -82,42 +83,101 @@ const imageStyleCompact = {
 
 <template>
   <div
-    style="border-bottom: 1px solid #E5E5E5; padding: 10px 0;"
+    style="border-bottom: 1px solid #e5e5e5; padding: 10px 0"
     class="mb-1"
     :class="{ 'pos-mobile-category-product--disabled': props.disabled }"
   >
     <div class="columns is-vcentered is-mobile" :class="props.customButton ? 'has-quantity' : ''">
-      <div class="column is-narrow" @click="onClick" :style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }">
-        <img :src="getPicture(props.piktogram)" :alt="props.label" class="product-image"
-             :style="props.compact ? imageStyleCompact : imageSize"
-             style="border-radius: 8px; object-fit: contain;" />
+      <div class="column is-narrow">
+        <button
+          type="button"
+          class="pos-mobile-category-product__image-button"
+          :disabled="props.disabled"
+          :style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"
+          @click="onClick"
+        >
+          <img
+            :src="getPicture(props.piktogram)"
+            :alt="props.label"
+            class="product-image"
+            :style="props.compact ? imageStyleCompact : imageSize"
+            style="border-radius: 8px; object-fit: contain"
+          />
+        </button>
       </div>
-      <div
-        class="column"
-        @click="onClick"
-        :style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"
-        :data-testid="props.testId || undefined"
-      >
-        <template v-if="!props.compact">
-          <h1 class="title is-6">{{ props.label }}</h1>
-          <h2 class="subtitle is-6" v-if="props.showPrices">{{ SessionUser.functions.currency.toLocal(props.price) }}</h2>
-          <h2 class="subtitle is-6" v-else>&nbsp;</h2>
-        </template>
-        <template v-else>
-          <h1 class="title is-6" style="font-size: small">{{ props.label }}</h1>
-          <h2 class="subtitle is-6" style="font-size: smaller" v-if="props.showPrices">{{ SessionUser.functions.currency.toLocal(props.price) }}</h2>
-          <h2 class="subtitle is-6" style="font-size: smaller" v-else>&nbsp;</h2>
-        </template>
-        <p v-if="props.disabled && props.restrictionMessage" class="help is-danger mb-0">
-          {{ props.restrictionMessage }}
-        </p>
+      <div class="column pos-mobile-category-product__name-column">
+        <BTooltip
+          v-if="props.disabled && props.restrictionMessage"
+          :label="props.restrictionMessage"
+          :triggers="['hover', 'focus', 'click']"
+          multilined
+          position="is-top"
+          type="is-dark"
+          append-to-body
+        >
+          <span
+            class="pos-mobile-category-product__tooltip-trigger"
+            tabindex="0"
+            :data-testid="props.testId ? `${props.testId}-restriction-tooltip` : undefined"
+          >
+            <button
+              type="button"
+              class="pos-mobile-category-product__name-button"
+              :data-testid="props.testId || undefined"
+              disabled
+            >
+              <template v-if="!props.compact">
+                <span class="title is-6">{{ props.label }}</span>
+                <span class="subtitle is-6" v-if="props.showPrices">{{
+                  SessionUser.functions.currency.toLocal(props.price)
+                }}</span>
+                <span class="subtitle is-6" v-else>&nbsp;</span>
+              </template>
+              <template v-else>
+                <span class="title is-6" style="font-size: small">{{ props.label }}</span>
+                <span class="subtitle is-6" style="font-size: smaller" v-if="props.showPrices">{{
+                  SessionUser.functions.currency.toLocal(props.price)
+                }}</span>
+                <span class="subtitle is-6" style="font-size: smaller" v-else>&nbsp;</span>
+              </template>
+            </button>
+          </span>
+        </BTooltip>
+        <button
+          v-else
+          type="button"
+          class="pos-mobile-category-product__name-button"
+          :data-testid="props.testId || undefined"
+          @click="onClick"
+        >
+          <template v-if="!props.compact">
+            <span class="title is-6">{{ props.label }}</span>
+            <span class="subtitle is-6" v-if="props.showPrices">{{
+              SessionUser.functions.currency.toLocal(props.price)
+            }}</span>
+            <span class="subtitle is-6" v-else>&nbsp;</span>
+          </template>
+          <template v-else>
+            <span class="title is-6" style="font-size: small">{{ props.label }}</span>
+            <span class="subtitle is-6" style="font-size: smaller" v-if="props.showPrices">{{
+              SessionUser.functions.currency.toLocal(props.price)
+            }}</span>
+            <span class="subtitle is-6" style="font-size: smaller" v-else>&nbsp;</span>
+          </template>
+        </button>
       </div>
       <div class="column is-narrow">
-        <slot name="right"/>
-        <button class="custom-button-product" @click="onClick" v-if="!props.customButton" :style="props.compact ? imageStyleCompact : imageSize" v-show="false">
-                <span class="custom-icon">
-                  <Plus width="100%" height="100%" />
-                </span>
+        <slot name="right" />
+        <button
+          class="custom-button-product"
+          @click="onClick"
+          v-if="!props.customButton"
+          :style="props.compact ? imageStyleCompact : imageSize"
+          v-show="false"
+        >
+          <span class="custom-icon">
+            <Plus width="100%" height="100%" />
+          </span>
         </button>
         <slot v-else></slot>
       </div>
@@ -149,6 +209,33 @@ const imageStyleCompact = {
   cursor: pointer;
   transition: background-color 0.3s ease;
 }
+
+.pos-mobile-category-product__image-button,
+.pos-mobile-category-product__name-button {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  padding: 0;
+  text-align: left;
+}
+
+.pos-mobile-category-product__image-button:disabled,
+.pos-mobile-category-product__name-button:disabled {
+  cursor: not-allowed;
+}
+
+.pos-mobile-category-product__name-column,
+.pos-mobile-category-product__name-button,
+.pos-mobile-category-product__tooltip-trigger {
+  display: block;
+  width: 100%;
+}
+
+.pos-mobile-category-product__name-button .title,
+.pos-mobile-category-product__name-button .subtitle {
+  display: block;
+}
 /* On larger screens, make the button appropriately sized */
 @media (min-width: 768px) {
   .custom-button-product {

src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Products.vue

@@ -6,9 +6,9 @@ import PosDepartmentStepMobile2CategoryProduct
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import {PosProduct} from "@/components/displays/department/pos/steps/mobile/objects/PosProduct.vue";
 import {
+  customer_attributes,
+  customer_attributes_status,
   getProductRestriction,
-  hasAttribute,
-  isProductRestricted,
 } from "@/components/shop/POSDepartmentProcess.vue";
 import PosDepartmentStepMobile2Addons
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Addons.vue";
@@ -67,22 +67,22 @@ const mergeCountAddons = (products: PosProduct[], addons: Addon[] | undefined) =
   return mergedAddons.value;
 };
 // Recalculate the merged addons when the props.addons change
-watch(() => props.addons, (newAddons) => {
-  mergeCountAddons(pos.productList.get(), newAddons);
-}, { immediate: true });
+watch(
+  [
+    () => props.addons,
+    () => pos.productList.list.value,
+    () => customer_attributes.value,
+    () => customer_attributes_status.value,
+  ],
+  ([newAddons]) => {
+    mergeCountAddons(pos.productList.get(), newAddons);
+  },
+  { immediate: true, deep: true }
+);
 
-// Computed property to filter out restricted products
 const getProductRestrictionForRow = (product: PosProduct) => {
-  if (props.restrictionContext === "standaloneAdditionalService" && hasAttribute("restrictAdditionalServices")) {
-    return {
-      restricted: true,
-      rule: "restrictAdditionalServices",
-      messageKey: "pos.restrictions.addons_not_allowed",
-    };
-  }
-
   const restriction = getProductRestriction(product, props.restrictionContext === "standaloneAdditionalService"
-    ? { isStandaloneAdditionalService: true, includeNumericAddonCategory: true }
+    ? { isStandaloneAdditionalService: true }
     : {});
   return restriction;
 };
@@ -92,14 +92,15 @@ const getProductRestrictionMessage = (product: PosProduct) => {
   return restriction.messageKey ? t(restriction.messageKey) : "";
 };
 
-const productListItems = computed(() => pos.productList.list.value || []);
-const filteredProducts = computed(() => {
-  if (props.restrictionContext === "standaloneAdditionalService") {
-    return productListItems.value;
+const onSelectProduct = (product: PosProduct) => {
+  if (getProductRestrictionForRow(product).restricted) {
+    return;
   }
 
-  return productListItems.value.filter(product => !isProductRestricted(product));
-});
+  emits("addProduct", product);
+};
+
+const productListItems = computed(() => pos.productList.list.value || []);
 const shouldShowLoadingState = computed(() => {
   return pos.categories.loading.value || (pos.productList.loading.value && productListItems.value.length === 0);
 });
@@ -119,10 +120,10 @@ const shouldShowLoadingState = computed(() => {
   </div>
   <template v-else-if="pos.categories.isSelected()">
     <template v-if="!props.asAddons">
-      <!-- Display of products, without a "basket" (filtered for customer restrictions) -->
-	      <template v-for="product in filteredProducts" :key="product.id">
+      <!-- Display of products, without a "basket" -->
+	      <template v-for="product in productListItems" :key="product.id">
 	        <PosDepartmentStepMobile2CategoryProduct
-	            @addProduct="emits('addProduct', product)"
+	            @addProduct="onSelectProduct(product)"
 	            :price="product.price"
 	            :label="product.name"
 	            :piktogram="product.piktogram"

src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep2MobileVehicleSelection.vue

@@ -11,6 +11,7 @@ import PosDepartmentStepMobile2Products
 import PosDepartmentStepMobile2ProductRecommendations
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2ProductRecommendations.vue";
 import {Addon} from "@/components/displays/department/pos/steps/mobile/objects/PosAddon.vue";
+import { getProductRestriction } from "@/components/shop/POSDepartmentProcess.vue";
 // Define the close event to emit when the component is closed
 const emit = defineEmits(["close"]);
 // Define props
@@ -51,7 +52,7 @@ const props = defineProps({
 
 // Function to handle adding a product
 const onAddProduct = (product: any) => {
-  if (!canClose()) return;
+  if (!canClose() || getProductRestriction(product).restricted) return;
   // If a custom onAddProduct function is provided, use it
   if (props.onAddProduct) {
     product.quantity = product.quantity || 1; // Ensure quantity is set

src/components/displays/pagination/PaginationOtherFiltersDropdown.vue

@@ -63,10 +63,10 @@ onBeforeUnmount(() => {
     :class="{ 'is-active': isOpen }"
     :data-testid="testId"
   >
-    <div class="dropdown-trigger">
+    <div class="dropdown-trigger pagination-other-filters__trigger">
       <button
         type="button"
-        class="button is-light is-small pagination-other-filters__button"
+        class="button is-light pagination-other-filters__button"
         :aria-expanded="isOpen ? 'true' : 'false'"
         aria-haspopup="true"
         :aria-label="label"
@@ -77,14 +77,14 @@ onBeforeUnmount(() => {
           <i class="fas fa-filter" aria-hidden="true"></i>
         </span>
         <span>{{ label }}</span>
-        <span
-          v-if="normalizedActiveCount > 0"
-          class="tag is-info is-rounded is-small pagination-other-filters__count"
-          :data-testid="`${testId}-count`"
-        >
-          {{ normalizedActiveCount }}
-        </span>
       </button>
+      <span
+        v-if="normalizedActiveCount > 0"
+        class="tag is-info is-rounded is-small pagination-other-filters__count"
+        :data-testid="`${testId}-count`"
+      >
+        {{ normalizedActiveCount }}
+      </span>
     </div>
 
     <div
@@ -93,20 +93,39 @@ onBeforeUnmount(() => {
       :data-testid="`${testId}-menu`"
     >
       <div class="dropdown-content pagination-other-filters__content">
-        <slot />
+        <div class="pagination-other-filters__body">
+          <slot />
+        </div>
+        <div
+          v-if="$slots.footer"
+          class="pagination-other-filters__footer"
+        >
+          <slot name="footer" />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.pagination-other-filters__button {
+.pagination-other-filters {
   overflow: visible;
-  padding-right: 1.15rem;
   position: relative;
+  z-index: 40;
+}
+
+.pagination-other-filters__button {
+  height: 2.25em;
+  padding-right: 1.15rem;
   white-space: nowrap;
 }
 
+.pagination-other-filters__trigger {
+  display: inline-flex;
+  overflow: visible;
+  position: relative;
+}
+
 .pagination-other-filters__count {
   align-items: center;
   border: 2px solid #fff;
@@ -115,9 +134,12 @@ onBeforeUnmount(() => {
   justify-content: center;
   min-width: 1.15rem;
   padding: 0 0.3rem;
+  pointer-events: none;
   position: absolute;
-  right: -0.35rem;
-  top: -0.45rem;
+  right: 0;
+  top: 0;
+  transform: translate(50%, -50%);
+  z-index: 50;
 }
 
 .pagination-other-filters__menu {
@@ -127,8 +149,22 @@ onBeforeUnmount(() => {
 .pagination-other-filters__content {
   border: 1px solid #dbdbdb;
   border-radius: 6px;
+  overflow: hidden;
+  padding: 0;
+}
+
+.pagination-other-filters__body {
   max-height: min(70vh, 36rem);
   overflow-y: auto;
   padding: 0.75rem;
 }
+
+.pagination-other-filters__footer {
+  align-items: center;
+  background: #fff;
+  border-top: 1px solid #dbdbdb;
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.5rem 0.75rem;
+}
 </style>

src/components/displays/pagination/TableLabeledPagination.vue

@@ -15,6 +15,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
   showFilters: {
     type: Boolean,
     default: true,
@@ -38,7 +42,7 @@ const isSmall = ref(window.innerWidth < 1024);
 <template>
   <div data-disable-auto-excel-export="1">
     <!-- Label -->
-    <h2 class="title is-4 mb-4">{{ label }}</h2>
+    <h2 v-if="props.showLabel" class="title is-4 mb-4">{{ label }}</h2>
     <slot name="description"></slot>
     <!-- Search & reload -->
     <PaginationDisplayGeneralSearchReload

src/components/displays/pagination/models/DepartmentPos/OrdersPagination.vue

@@ -1,5 +1,6 @@
 <script setup>
-import SessionUser from "@/components/session/token/SessionUser.vue";
+import InvoiceOrdersPagination
+  from "@/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue";
 
 const props = defineProps({
   onlyFromInvoiceCollection: {
@@ -22,124 +23,20 @@ const props = defineProps({
     type: Boolean,
     default: false
   }
-})
-
-import { provide } from "vue";
-import { useRouter } from "vue-router";
-import {
-  usePaginatedList,
-  PaginatedListKey,
-} from "@/components/pagination/paginatedList.vue";
-
-const paginatedList = usePaginatedList();
-provide(PaginatedListKey, paginatedList);
-
-const {
-  isLoaded,
-  isLoading,
-  list,
-  loadList,
-  metaCurrentPage,
-  metaItemsPerPage,
-  metaTotalItems,
-  setEndpoint,
-  setMetaItemsPerPage,
-  setPage,
-  metaSearch,
-  search,
-  setFilter,
-  setOrder,
-  hideSearchField,
-  setHideSearchField,
-} = paginatedList;
-import PaginationNavigation from "@/components/displays/pagination/PaginationNavigation.vue";
-
-import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
-import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
-import OrdersTable from "@/components/displays/department/pos/orders/ordersTable.vue";
-import PaginationDisplayGeneralSearchReload
-  from "@/components/displays/pagination/PaginationDisplayGeneralSearchReload.vue";
-import PaginationDisplayFilters from "@/components/displays/pagination/PaginationDisplayFilters.vue";
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-const router = useRouter();
-const resolveDepartmentId = () => {
-  const routeDepartmentId = Number.parseInt(String(router.currentRoute.value.params.departmentId ?? ""), 10);
-  if (Number.isInteger(routeDepartmentId) && routeDepartmentId > 0) {
-    return routeDepartmentId;
-  }
-
-  const pathDepartmentId = Number.parseInt(
-    String(
-      router.currentRoute.value.path?.match(/^\/admin\/(\d+)(?:\/|$)/)?.[1] ??
-      window.location.pathname?.match(/^\/admin\/(\d+)(?:\/|$)/)?.[1] ??
-      ""
-    ),
-    10
-  );
-
-  return Number.isInteger(pathDepartmentId) && pathDepartmentId > 0 ? pathDepartmentId : null;
-};
-setEndpoint("/orders", false);
-// If the customer filter is set, filter the orders by the customer number
-if (props.setCustomerFilter > 0) {
-  setFilter("customer_id", props.setCustomerFilter, false);
-  console.log("Setting customer filter to: " + props.setCustomerFilter);
-}
-
-// Hide the search field
-if (props.hideSearch) {
-  setHideSearchField(true);
-  console.log("Hiding search field");
-} else {
-  setHideSearchField(false);
-}
-
-// If the departmentId is set, in the route, filter the orders by the departmentId
-const currentDepartmentId = resolveDepartmentId();
-if (currentDepartmentId) {
-  setOrder("created_at", "desc");
-  setFilter("department_id", currentDepartmentId, false);
-} else {
-  setOrder("created_at", "desc", false);
-}
-
-// If the onlyFromInvoiceCollection prop is set, filter the orders by the invoice collection id
-if (props.onlyFromInvoiceCollection > 0) {
-  setFilter("invoice_collection_id", props.onlyFromInvoiceCollection, false);
-}
-
-// Load the list automatically if the autoLoad prop is set
-if (props.autoLoad) {
-  loadList();
-}
-
+});
 </script>
 
 <template>
-  <PaginationDisplayGeneralSearchReload/>
-  <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
-    <template #paginationColumns>
-      <!-- Sort by created_at -->
-      <div class="column is-narrow my-3">
-        <label class="label is-small">{{ t('pagination.order_direction') }}</label>
-        <div class="control">
-          <div class="select">
-            <select @change="setOrder('created_at', $event.target.value); loadList();">
-              <option value="asc">{{ t('pagination.ascending') }}</option>
-              <option value="desc" selected>{{ t('pagination.descending') }}</option>
-            </select>
-          </div>
-        </div>
-      </div>
-      <PaginationDisplayFilters />
-    </template>
-  </PaginationDisplay>
-  <OrdersTable :orders="list" :show-draft-assignment-actions="props.showDraftAssignmentActions" />
-  <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
+  <InvoiceOrdersPagination
+    :only-from-invoice-collection="props.onlyFromInvoiceCollection"
+    :auto-load="props.autoLoad"
+    :set-customer-filter="props.setCustomerFilter"
+    :hide-search="props.hideSearch"
+    :show-draft-assignment-actions="props.showDraftAssignmentActions"
+    :apply-default-filters="false"
+    :show-department-filter="false"
+    :show-label="false"
+    :invoice-view="false"
+    :allow-select-multiple="false"
+  />
 </template>
-
-<style scoped>
-
-</style>

src/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue

@@ -35,6 +35,18 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  showDepartmentFilter: {
+    type: Boolean,
+    default: true
+  },
+  showLabel: {
+    type: Boolean,
+    default: true
+  },
+  allowSelectMultiple: {
+    type: Boolean,
+    default: true
+  },
   dates: {
     type: Object,
     default: () => ({
@@ -92,13 +104,10 @@ const paginatedList = usePaginatedList();
 provide(PaginatedListKey, paginatedList);
 
 const {
-  isLoading,
   list,
   loadList,
   setEndpoint,
   setMetaItemsPerPage,
-  setPage,
-  search,
   endpoint,
   filter,
   metaSearch,
@@ -128,6 +137,23 @@ import {
 
 const { t } = useI18n()
 const router = useRouter();
+const resolveDepartmentId = () => {
+  const routeDepartmentId = Number.parseInt(String(router.currentRoute.value.params.departmentId ?? ""), 10);
+  if (Number.isInteger(routeDepartmentId) && routeDepartmentId > 0) {
+    return routeDepartmentId;
+  }
+
+  const pathDepartmentId = Number.parseInt(
+    String(
+      router.currentRoute.value.path?.match(/^\/admin\/(\d+)(?:\/|$)/)?.[1] ??
+      window.location.pathname?.match(/^\/admin\/(\d+)(?:\/|$)/)?.[1] ??
+      ""
+    ),
+    10
+  );
+
+  return Number.isInteger(pathDepartmentId) && pathDepartmentId > 0 ? pathDepartmentId : null;
+};
 const areFiltersVisible = ref(!props.hideFilter);
 const filterToggleLabel = computed(() => (
   areFiltersVisible.value ? t("pagination.hide_filters") : t("pagination.show_filters")
@@ -143,10 +169,11 @@ if (props.setCustomerFilter > 0) {
 if (Object.keys(props.queryParameters).length > 0) {
   setAdditionalQueryParameters(props.queryParameters);
 }
-// If the departmentId is set, in the route, filter the orders by the departmentId
-if (router.currentRoute.value.params.departmentId) {
+// If the departmentId is set in the route, constrain both table and date-event requests.
+const currentDepartmentId = resolveDepartmentId();
+if (currentDepartmentId) {
   setOrder("created_at", "desc");
-  setFilter("department_id", router.currentRoute.value.params.departmentId, false);
+  setFilter("department_id", currentDepartmentId, false);
 } else {
   setOrder("created_at", "desc");
 }
@@ -323,6 +350,25 @@ const activeHiddenOrderFiltersCount = computed(() => hiddenOrderFilterDefinition
   return isActiveHiddenOrderFilterValue(value);
 }).length);
 
+const hasActiveHiddenOrderFilters = computed(() => activeHiddenOrderFiltersCount.value > 0);
+
+const clearHiddenOrderFilters = () => {
+  if (!hasActiveHiddenOrderFilters.value) {
+    return;
+  }
+
+  hiddenOrderFilterDefinitions.value.forEach((filterDefinition) => {
+    if (filterDefinition.type === "order") {
+      setOrder("created_at", filterDefinition.defaultValue);
+      return;
+    }
+
+    setFilter(filterDefinition.filterKey, "*", false);
+  });
+
+  loadList();
+};
+
 const doesEndpointMatch = (matcher) => {
   // Check if the endpoint matches the current endpoint
   return endpoint.value === matcher;
@@ -395,6 +441,7 @@ watch(orderDateEventSignature, () => {
   <template v-if="doesEndpointMatch('/orders')">
     <TableLabeledPagination
       :label="SessionUser.objects.orders.meta.labels.multiple"
+      :show-label="props.showLabel"
       :show-filters="areFiltersVisible"
       :hide-search="props.hideSearch"
       :hide-pagination="props.hidePagination"
@@ -417,6 +464,7 @@ watch(orderDateEventSignature, () => {
       </template>
       <template #paginationDisplayFiltersElement>
         <PaginationDisplayFilters
+            v-if="props.showDepartmentFilter"
             :departmentColumn="'department_id'"
         />
       </template>
@@ -454,62 +502,73 @@ watch(orderDateEventSignature, () => {
           </div>
         </div>
       </template>
-      <template #rightFilterActions>
-        <div class="column is-narrow invoice-orders-other-filters-column">
-          <PaginationOtherFiltersDropdown
-            :label="t('pagination.other_filters')"
-            :active-count="activeHiddenOrderFiltersCount"
-            test-id="invoice-orders-other-filters"
-          >
-            <div class="invoice-orders-other-filters__fields">
-              <div
-                v-for="filterDefinition in hiddenOrderFilterDefinitions"
-                :key="filterDefinition.key"
-                class="field invoice-orders-other-filters__field"
+      <template #rightPaginationColumns>
+        <div class="column is-12 invoice-orders-shortcuts-column">
+          <div class="invoice-orders-shortcut-actions">
+            <div class="invoice-orders-other-filters-trigger">
+              <PaginationOtherFiltersDropdown
+                :label="t('pagination.other_filters')"
+                :active-count="activeHiddenOrderFiltersCount"
+                test-id="invoice-orders-other-filters"
               >
-                <label
-                  class="label is-small"
-                  :for="`invoice-orders-other-filter-${filterDefinition.key}`"
-                >
-                  {{ filterDefinition.label }}
-                </label>
-                <div class="control">
-                  <div class="select is-fullwidth">
-                    <select
-                      :id="`invoice-orders-other-filter-${filterDefinition.key}`"
-                      :value="getHiddenOrderFilterValue(filterDefinition)"
-                      :data-testid="`invoice-orders-other-filter-${filterDefinition.key}`"
-                      @change="applyHiddenOrderFilter(filterDefinition, $event.target.value)"
+                <div class="invoice-orders-other-filters__fields">
+                  <div
+                    v-for="filterDefinition in hiddenOrderFilterDefinitions"
+                    :key="filterDefinition.key"
+                    class="field invoice-orders-other-filters__field"
+                  >
+                    <label
+                      class="label is-small"
+                      :for="`invoice-orders-other-filter-${filterDefinition.key}`"
                     >
-                      <option
-                        v-for="option in filterDefinition.options"
-                        :key="option.value"
-                        :value="option.value"
-                      >
-                        {{ option.label }}
-                      </option>
-                    </select>
+                      {{ filterDefinition.label }}
+                    </label>
+                    <div class="control">
+                      <div class="select is-fullwidth">
+                        <select
+                          :id="`invoice-orders-other-filter-${filterDefinition.key}`"
+                          :value="getHiddenOrderFilterValue(filterDefinition)"
+                          :data-testid="`invoice-orders-other-filter-${filterDefinition.key}`"
+                          @change="applyHiddenOrderFilter(filterDefinition, $event.target.value)"
+                        >
+                          <option
+                            v-for="option in filterDefinition.options"
+                            :key="option.value"
+                            :value="option.value"
+                          >
+                            {{ option.label }}
+                          </option>
+                        </select>
+                      </div>
+                    </div>
                   </div>
                 </div>
-              </div>
+                <template #footer>
+                  <button
+                    type="button"
+                    class="button is-text is-small invoice-orders-other-filters__clear"
+                    data-testid="invoice-orders-other-filters-clear"
+                    :disabled="!hasActiveHiddenOrderFilters"
+                    @click="clearHiddenOrderFilters"
+                  >
+                    {{ t('pagination.clear_all') }}
+                  </button>
+                </template>
+              </PaginationOtherFiltersDropdown>
             </div>
-          </PaginationOtherFiltersDropdown>
-        </div>
-      </template>
-      <template #rightPaginationColumns>
-        <div class="column is-12">
-        <!-- Shortcuts for date filters -->
-        <DatePeriodSelector :on-selection-change="onDateRangeSelected"
-                            :visibility="{ showDailySelector: false, showWeeklySelector: false, showMultipleMonthWarning: false, showUpdateButton: false, showMonthSelector: false, showStartDate: false, showEndDate: false, showSelectionValidity: false, showYearSelector: false, showToLabel: false }"
-                            v-bind:allow-empty-selection="true"
-                            v-bind:events="orderDateEvents"
-                            v-bind:selection="{ startDate: date_from ? parseLocalDateOnly(date_from) : null, endDate: date_to ? parseLocalDateOnly(date_to) : null }"/>
+            <!-- Shortcuts for date filters -->
+            <DatePeriodSelector :on-selection-change="onDateRangeSelected"
+                                :visibility="{ showDailySelector: false, showWeeklySelector: false, showMultipleMonthWarning: false, showUpdateButton: false, showMonthSelector: false, showStartDate: false, showEndDate: false, showSelectionValidity: false, showYearSelector: false, showToLabel: false }"
+                                v-bind:allow-empty-selection="true"
+                                v-bind:events="orderDateEvents"
+                                v-bind:selection="{ startDate: date_from ? parseLocalDateOnly(date_from) : null, endDate: date_to ? parseLocalDateOnly(date_to) : null }"/>
+          </div>
         </div>
       </template>
       <template #default>
         <OrdersTable :orders="list"
                      :invoiceView="props.invoiceView"
-                     :allowSelectMultiple="true"
+                     :allowSelectMultiple="props.allowSelectMultiple"
                      :show-draft-assignment-actions="props.showDraftAssignmentActions"
                      v-bind:groupInvoiceCollection="props.groupInvoiceCollection"
                      v-bind:showOnlyWithIds="props.showOnlyWithIds"
@@ -530,9 +589,46 @@ watch(orderDateEventSignature, () => {
   margin-bottom: 0.25rem;
 }
 
-.invoice-orders-other-filters-column {
-  align-self: flex-end;
-  margin-left: auto;
+.invoice-orders-shortcuts-column {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.invoice-orders-shortcut-actions {
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 0;
+  justify-content: flex-end;
+  margin-top: -0.5rem;
+  padding-top: 0.5rem;
+  row-gap: 0.5rem;
+  overflow: visible;
+  width: 100%;
+}
+
+.invoice-orders-shortcut-actions :deep(.date-period-selector .navbar-item) {
+  padding-left: 0.5rem;
+}
+
+.invoice-orders-other-filters-trigger {
+  display: flex;
+  justify-content: flex-end;
+  overflow: visible;
+  position: relative;
+  z-index: 40;
+}
+
+@media screen and (min-width: 769px) {
+  .invoice-orders-other-filters-trigger {
+    margin-top: 0.625rem;
+  }
+}
+
+.invoice-orders-other-filters__clear {
+  height: auto;
+  min-height: 1.75rem;
+  padding: 0;
 }
 
 .invoice-orders-other-filters__field {

src/components/displays/pagination/models/SuperUserDashboard/SubusersPagination.vue

@@ -1,11 +1,9 @@
 <script setup>
 import { provide } from "vue";
-import { useI18n } from "vue-i18n";
 import SubusersTable from "@/components/displays/superuser/tables/SubusersTable.vue";
-import PaginationNavigation from "@/components/displays/pagination/PaginationNavigation.vue";
-import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
-import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
+import TableLabeledPagination from "@/components/displays/pagination/TableLabeledPagination.vue";
 import { PaginatedListKey, usePaginatedList } from "@/components/pagination/paginatedList.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
 
 const props = defineProps({
   hideSearch: {
@@ -29,22 +27,15 @@ const props = defineProps({
     default: null,
   },
 });
-const { t } = useI18n();
+const emit = defineEmits(["mutated"]);
 
 const paginatedList = usePaginatedList();
 provide(PaginatedListKey, paginatedList);
 
 const {
-  isLoading,
   list,
   loadList,
-  metaCurrentPage,
-  metaItemsPerPage,
-  metaTotalItems,
   setEndpoint,
-  setMetaItemsPerPage,
-  setPage,
-  search,
   setOrder,
   hideSearchField,
   setHideSearchField,
@@ -62,60 +53,25 @@ if (props.hideSearch) {
 if (props.autoLoad) {
   loadList();
 }
+
+const onTableMutated = () => {
+  emit("mutated");
+};
 </script>
 
 <template>
-  <div class="columns is-vcentered is-multiline">
-    <div class="column">
-      <input
-        v-if="!hideSearchField"
-        class="input"
-        type="text"
-        :placeholder="$t('global.search_driver')"
-        @input="search($event.target.value)"
-      />
-    </div>
-    <div class="column is-narrow pl-0">
-      <LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">
-        {{ t('pagination.reload') }}
-      </LoadButtonWhileAwait>
-    </div>
-  </div>
-
-  <PaginationDisplay
-    :metaItemsPerPage="metaItemsPerPage"
-    :loadFunction="loadList"
-    :isLoading="isLoading"
-    :setMetaItemsPerPage="setMetaItemsPerPage"
+  <TableLabeledPagination
+    :label="SessionUser.objects.subusers.meta.title"
+    :hide-search="hideSearchField"
+    :search-placeholder="$t('global.search_driver')"
   >
-    <template #paginationColumns>
-      <div class="column is-narrow my-3">
-        <label class="label is-small">{{ t("pagination.order_direction") }}</label>
-        <div class="control">
-          <div class="select">
-            <select @change="setOrder('created_at', $event.target.value); loadList();">
-              <option value="asc">{{ t("pagination.ascending") }}</option>
-              <option value="desc" selected>{{ t("pagination.descending") }}</option>
-            </select>
-          </div>
-        </div>
-      </div>
-    </template>
-  </PaginationDisplay>
-
-  <SubusersTable
-    :objects="list"
-    :show-customer="showCustomer"
-    :user-scoped-user-id="userScopedUserId"
-  />
-
-  <PaginationNavigation
-    :currentPage="metaCurrentPage"
-    :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)"
-    :loadFunction="loadList"
-    :setPage="setPage"
-    :isLoading="isLoading"
-  />
+    <SubusersTable
+      :objects="list"
+      :show-customer="showCustomer"
+      :user-scoped-user-id="userScopedUserId"
+      @mutated="onTableMutated"
+    />
+  </TableLabeledPagination>
 </template>
 
 <style scoped>

src/components/displays/superuser/configuration/ModuleUsageMeter.vue

@@ -0,0 +1,116 @@
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { listModuleUsageSummary } from "@/services/moduleUsage.js";
+
+const props = defineProps({
+  moduleKey: {
+    type: String,
+    required: true,
+  },
+  metricKey: {
+    type: String,
+    required: true,
+  },
+});
+
+const { t, locale } = useI18n();
+const loading = ref(false);
+const metric = ref(null);
+
+const usagePercent = computed(() => Number(metric.value?.usage_percent ?? 0));
+const hasMetric = computed(() => metric.value && (metric.value.used !== null || metric.value.limit !== null));
+
+const load = async () => {
+  loading.value = true;
+  try {
+    const response = await listModuleUsageSummary({ module: props.moduleKey });
+    const metrics = Array.isArray(response?.data?.data?.metrics) ? response.data.data.metrics : [];
+    metric.value = metrics.find((row) => row.metric_key === props.metricKey) || null;
+  } finally {
+    loading.value = false;
+  }
+};
+
+function formatNumber(value) {
+  if (value === null || value === undefined || Number.isNaN(Number(value))) {
+    return "--";
+  }
+  return new Intl.NumberFormat(locale.value || "da").format(Number(value));
+}
+
+function formatPercent(value) {
+  if (value === null || value === undefined || Number.isNaN(Number(value))) {
+    return "--";
+  }
+  return `${Number(value).toFixed(1)}%`;
+}
+
+function progressClass(value) {
+  const percent = Number(value);
+  if (!Number.isFinite(percent)) {
+    return "";
+  }
+  if (percent >= 100) {
+    return "is-danger";
+  }
+  if (percent >= 90) {
+    return "is-warning";
+  }
+  return "is-success";
+}
+
+onMounted(load);
+</script>
+
+<template>
+  <div v-if="loading || hasMetric" class="module-usage-meter" :data-testid="`module-usage-meter-${moduleKey}-${metricKey}`">
+    <div class="module-usage-meter__top">
+      <span>{{ metric?.metric_label || $t("system_status.labels.quota_usage") }}</span>
+      <strong>{{ loading ? "--" : formatPercent(metric?.usage_percent) }}</strong>
+    </div>
+    <progress
+      class="progress module-usage-meter__progress"
+      :class="progressClass(usagePercent)"
+      :value="Math.max(0, Math.min(100, usagePercent))"
+      max="100"
+    />
+    <div class="module-usage-meter__stats">
+      <span>{{ t("system_status.labels.used") }}: {{ formatNumber(metric?.used) }}</span>
+      <span>{{ t("system_status.labels.limit") }}: {{ formatNumber(metric?.limit) }}</span>
+      <span>{{ t("system_status.labels.remaining") }}: {{ formatNumber(metric?.remaining) }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.module-usage-meter {
+  display: grid;
+  gap: 0.4rem;
+  margin-top: 0.75rem;
+  padding: 0.75rem;
+  border: 1px solid #d7dde7;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.module-usage-meter__top {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  color: #334155;
+}
+
+.module-usage-meter__progress {
+  height: 0.55rem;
+  margin: 0;
+}
+
+.module-usage-meter__stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  color: #475569;
+  font-size: 0.85rem;
+}
+</style>

src/components/displays/superuser/system/MinioDisplay.vue

@@ -0,0 +1,7 @@
+<script setup>
+import SystemDependencyDisplay from "@/components/displays/superuser/system/SystemDependencyDisplay.vue";
+</script>
+
+<template>
+  <SystemDependencyDisplay dependency-key="minio" title-key="system_status.cards.minio" />
+</template>

src/components/displays/superuser/system/RedisDisplay.vue

@@ -0,0 +1,7 @@
+<script setup>
+import SystemDependencyDisplay from "@/components/displays/superuser/system/SystemDependencyDisplay.vue";
+</script>
+
+<template>
+  <SystemDependencyDisplay dependency-key="redis" title-key="system_status.cards.redis" />
+</template>

src/components/displays/superuser/system/SystemDependencyDisplay.vue

@@ -0,0 +1,210 @@
+<script setup>
+import { computed, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
+import {
+  SuperUserSystemStatusObject,
+  getSystemDependencyStatus,
+} from "@/components/session/token/superUser/systemStatus.vue";
+
+const props = defineProps({
+  dependencyKey: {
+    type: String,
+    required: true,
+    validator: (value) => ["database", "redis", "minio"].includes(value),
+  },
+  titleKey: {
+    type: String,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const dependencyStatus = computed(() => SuperUserSystemStatusObject.dependencies.value?.[props.dependencyKey] ?? null);
+const loading = computed(() => SuperUserSystemStatusObject.loading.value);
+const error = computed(() => SuperUserSystemStatusObject.error.value);
+const testId = computed(() => `${props.dependencyKey}-status-card`);
+const bucketRows = computed(() => {
+  if (props.dependencyKey !== "minio" || !Array.isArray(dependencyStatus.value?.buckets)) {
+    return [];
+  }
+
+  return dependencyStatus.value.buckets;
+});
+
+const rows = computed(() => {
+  const status = dependencyStatus.value;
+  if (!status) {
+    return [];
+  }
+
+  if (props.dependencyKey === "database") {
+    return [
+      statusRow(status),
+      row("database", t("system_status.cards.database"), status.database || "MySQL"),
+      row("server_version", t("system_status.labels.server_version"), status.server_version || "--"),
+      row("latency", t("system_status.labels.latency"), formatLatency(status.latency_ms)),
+      row("checked_at", t("system_status.labels.checked_at"), status.checked_at || "--"),
+      row("error", t("system_status.states.error"), status.error || "--"),
+    ];
+  }
+
+  if (props.dependencyKey === "redis") {
+    return [
+      statusRow(status),
+      row("database_index", t("system_status.labels.database_index"), status.database ?? "--"),
+      row("latency", t("system_status.labels.latency"), formatLatency(status.latency_ms)),
+      row("checked_at", t("system_status.labels.checked_at"), status.checked_at || "--"),
+      row("error", t("system_status.states.error"), status.error || "--"),
+    ];
+  }
+
+  return [
+    statusRow(status),
+    row("endpoint", t("system_status.labels.endpoint"), status.endpoint || "--"),
+    row("buckets-summary", t("system_status.labels.buckets"), formatMinioBuckets(status.buckets)),
+    row("latency", t("system_status.labels.latency"), formatLatency(status.latency_ms)),
+    row("checked_at", t("system_status.labels.checked_at"), status.checked_at || "--"),
+    row("error", t("system_status.states.error"), status.error || "--"),
+  ];
+});
+
+const refresh = async ({ force = false } = {}) => {
+  await getSystemDependencyStatus(props.dependencyKey, { force });
+};
+
+onMounted(async () => {
+  await refresh();
+});
+
+function row(key, label, value) {
+  return { key, label, value };
+}
+
+function statusRow(status) {
+  return row("overall", t("system_status.summary.overall"), t(`system_status.status.${status.status || "unknown"}`));
+}
+
+function formatLatency(value) {
+  if (value === null || value === undefined || Number.isNaN(Number(value))) {
+    return "--";
+  }
+  return `${Number(value).toFixed(1)} ms`;
+}
+
+function formatMinioBuckets(buckets) {
+  if (!Array.isArray(buckets) || buckets.length === 0) {
+    return "--";
+  }
+  const available = buckets.filter((bucket) => bucket.status === "ok").length;
+  return t("system_status.labels.buckets_available", { available, total: buckets.length });
+}
+</script>
+
+<template>
+  <section class="system-dependency-card" :data-testid="testId">
+    <div class="system-dependency-card__top">
+      <div>
+        <p class="system-dependency-card__eyebrow">{{ $t("system_status.sections.infrastructure") }}</p>
+        <h2>{{ $t(titleKey) }}</h2>
+      </div>
+      <button class="button is-dark is-small" type="button" @click="refresh({ force: true })">
+        {{ $t("system_status.actions.refresh") }}
+      </button>
+    </div>
+
+    <div v-if="loading && !dependencyStatus" class="notification is-light">
+      {{ $t("system_status.states.loading") }}
+    </div>
+
+    <div v-if="error" class="notification is-danger is-light">
+      <strong>{{ $t("system_status.states.error") }}</strong>
+      <span>{{ error?.message || $t("system_status.states.error_generic") }}</span>
+    </div>
+
+    <div v-if="dependencyStatus" class="system-dependency-card__grid">
+      <article v-for="entry in rows" :key="entry.key" :data-testid="`${dependencyKey}-status-${entry.key}`">
+        <span>{{ entry.label }}</span>
+        <strong>{{ entry.value }}</strong>
+      </article>
+    </div>
+
+    <div v-if="bucketRows.length" class="system-dependency-card__buckets" data-testid="minio-status-buckets">
+      <article v-for="bucket in bucketRows" :key="bucket.name || bucket.status">
+        <span>{{ bucket.name || "--" }}</span>
+        <strong>{{ $t(`system_status.status.${bucket.status || "unknown"}`) }}</strong>
+      </article>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.system-dependency-card {
+  border: 1px solid #d7dde7;
+  border-radius: 8px;
+  padding: 1rem 1.1rem;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
+  display: grid;
+  gap: 1rem;
+}
+
+.system-dependency-card__top {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  gap: 1rem;
+}
+
+.system-dependency-card__eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.72rem;
+  color: #64748b;
+  margin-bottom: 0.25rem;
+}
+
+.system-dependency-card__top h2 {
+  margin: 0;
+  color: #102a43;
+}
+
+.system-dependency-card__grid,
+.system-dependency-card__buckets {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.system-dependency-card__grid article,
+.system-dependency-card__buckets article {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.system-dependency-card__grid span,
+.system-dependency-card__buckets span {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.72rem;
+  color: #64748b;
+}
+
+.system-dependency-card__grid strong,
+.system-dependency-card__buckets strong {
+  color: #0f172a;
+  overflow-wrap: anywhere;
+}
+
+.system-dependency-card__buckets {
+  border-top: 1px solid #e2e8f0;
+  padding-top: 1rem;
+}
+
+@media (max-width: 768px) {
+  .system-dependency-card__top {
+    flex-direction: column;
+    align-items: start;
+  }
+}
+</style>

src/components/displays/superuser/system/SystemStatusDashboard.vue

@@ -6,17 +6,15 @@ import {
   SuperUserSystemStatusObject,
   getSuperuserSystemStatus,
 } from "@/components/session/token/superUser/systemStatus.vue";
+import SystemStatusModuleIndicator from "@/components/displays/superuser/system/SystemStatusModuleIndicator.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
-import {
-  listEdgeGatewayDepartments,
-  listEdgeGateways,
-  unwrapEdgeGatewayMeta,
-} from "@/services/edgeGateways.js";
+import { listEdgeGatewayDepartments, listEdgeGateways, unwrapEdgeGatewayMeta } from "@/services/edgeGateways.js";
 
 const { t, te, locale } = useI18n();
 
 const MAX_GATEWAY_CARDS = 8;
 const DEFAULT_DASHBOARD_TAB = "infrastructure";
+const MODULE_PLACEHOLDER_CARDS = [0, 1, 2];
 const gatewayStatusPriority = Object.freeze({
   OFFLINE: 0,
   DEGRADED: 1,
@@ -80,6 +78,8 @@ const gatewayDepartments = ref({});
 const gatewayDepartmentsLoaded = ref(false);
 const activeDashboardTab = ref(DEFAULT_DASHBOARD_TAB);
 const showGatewaySection = computed(() => canViewGateways.value && !gatewaySectionSuppressed.value);
+const showModuleSkeletonCards = computed(() => loading.value && modules.value.length === 0);
+const showModuleErrorCards = computed(() => Boolean(error.value) && modules.value.length === 0);
 const dashboardTabKeys = computed(() => [
   DEFAULT_DASHBOARD_TAB,
   ...(showGatewaySection.value ? ["gateways"] : []),
@@ -192,7 +192,7 @@ const isStale = computed(() => {
   if (!lastLoadedAt.value) {
     return false;
   }
-  return nowTick.value - lastLoadedAt.value.getTime() > (refreshAfterSeconds.value * 2000);
+  return nowTick.value - lastLoadedAt.value.getTime() > refreshAfterSeconds.value * 2000;
 });
 
 watch(
@@ -206,10 +206,7 @@ watch(
 );
 
 const loadStatus = async ({ force = false } = {}) => {
-  const [snapshotValue] = await Promise.all([
-    getSuperuserSystemStatus({ force }),
-    loadGatewayFleet({ force }),
-  ]);
+  const [snapshotValue] = await Promise.all([getSuperuserSystemStatus({ force }), loadGatewayFleet({ force })]);
 
   return snapshotValue;
 };
@@ -330,6 +327,10 @@ function moduleReasonText(module) {
   );
 }
 
+function systemStatusErrorMessage() {
+  return error.value?.message || t("system_status.states.error_generic");
+}
+
 function createEmptyGatewayFleetUsage() {
   return {
     total: 0,
@@ -408,12 +409,7 @@ async function ensureGatewayDepartmentsLoaded() {
 }
 
 function warningText(warning) {
-  return translateSystemStatusText(
-    "warnings",
-    warning?.key,
-    warning?.params,
-    warning?.message || ""
-  );
+  return translateSystemStatusText("warnings", warning?.key, warning?.params, warning?.message || "");
 }
 
 function sessionDisplayName(session) {
@@ -443,7 +439,9 @@ function formatDeviceType(deviceType) {
 }
 
 function normalizeGatewayStatus(status) {
-  const normalizedStatus = String(status || "").trim().toUpperCase();
+  const normalizedStatus = String(status || "")
+    .trim()
+    .toUpperCase();
   return normalizedStatus || "UNKNOWN";
 }
 
@@ -460,16 +458,13 @@ function gatewayToneClass(status) {
 
 function gatewayStatusLabel(status) {
   const normalizedStatus = normalizeGatewayStatus(status).toLowerCase();
-  return translateSystemStatusText(
-    "gateways.status",
-    normalizedStatus,
-    {},
-    t("system_status.gateways.status.unknown")
-  );
+  return translateSystemStatusText("gateways.status", normalizedStatus, {}, t("system_status.gateways.status.unknown"));
 }
 
 function gatewayDiscoveryLabel(status) {
-  const normalizedStatus = String(status || "unknown").trim().toLowerCase();
+  const normalizedStatus = String(status || "unknown")
+    .trim()
+    .toLowerCase();
   return translateSystemStatusText(
     "gateways.discovery_status",
     normalizedStatus,
@@ -506,6 +501,212 @@ function formatUsage(value) {
   return `${Number(value).toFixed(1)}%`;
 }
 
+function formatNumber(value) {
+  if (value === null || value === undefined || Number.isNaN(Number(value))) {
+    return "--";
+  }
+  return new Intl.NumberFormat(locale.value || "da").format(Number(value));
+}
+
+function hasModuleUsage(module) {
+  return visibleModuleUsageMetrics(module).length > 0;
+}
+
+function moduleUsageErrorMessage(module) {
+  return String(module?.usage_metrics_error || "").trim();
+}
+
+function showModuleUsageSkeleton(module) {
+  return loading.value && !hasModuleUsage(module) && moduleUsageErrorMessage(module) === "";
+}
+
+function showModuleUsageUnavailablePlaceholder(module) {
+  return !loading.value && !hasModuleUsage(module) && moduleUsageErrorMessage(module) === "";
+}
+
+function moduleUsageMetrics(module) {
+  if (Array.isArray(module?.usage_metrics) && module.usage_metrics.length > 0) {
+    return module.usage_metrics;
+  }
+
+  if (module?.usage && typeof module.usage === "object") {
+    return [
+      {
+        module_key: module.key,
+        metric_key: module.usage.metric_key || "usage",
+        metric_label: t("system_status.labels.quota_usage"),
+        unit: module.usage.unit || "calls",
+        period: module.usage.period || "provider",
+        source: module.usage.source || "provider_snapshot",
+        primary: true,
+        used: module.usage.calls_used,
+        limit: module.usage.quota_calls,
+        remaining: module.usage.calls_remaining,
+        usage_percent: module.usage.usage_percent,
+        status: module.usage.status || "ok",
+        enforce_mode: module.usage.enforce_mode || "observe",
+        version: module.usage.version,
+        usage_available: module.usage.usage_available !== false,
+        unavailable_reason: module.usage.unavailable_reason || null,
+      },
+    ];
+  }
+
+  return [];
+}
+
+function visibleModuleUsageMetrics(module) {
+  return moduleUsageMetrics(module)
+    .filter(
+      (metric) =>
+        metric.used !== null ||
+        metric.limit !== null ||
+        metric.usage_percent !== null ||
+        isModuleUsageUnavailable(metric)
+    )
+    .filter(
+      (metric) =>
+        metric.limit !== null ||
+        metric.usage_percent !== null ||
+        metric.writable_limit ||
+        metric.source === "provider_snapshot"
+    )
+    .sort((left, right) => {
+      if ((left.primary || false) !== (right.primary || false)) {
+        return (right.primary || false) - (left.primary || false);
+      }
+      return moduleUsageLabel(left).localeCompare(moduleUsageLabel(right));
+    });
+}
+
+function isModuleUsageUnavailable(metric) {
+  return metric?.usage_available === false;
+}
+
+function moduleUsageUnavailableReason(metric) {
+  const reason = String(metric?.unavailable_reason || "").trim();
+  if (reason === "") {
+    return t("system_status.states.module_usage_error");
+  }
+
+  const translationKey = `system_status.quota_unavailable_reasons.${reason}`;
+  return te(translationKey) ? t(translationKey) : reason.replaceAll("_", " ");
+}
+
+function moduleUsageLabel(metric) {
+  if (!metric) {
+    return t("system_status.labels.quota_usage");
+  }
+  if (isModuleUsageUnavailable(metric)) {
+    return t("system_status.labels.usage_unavailable");
+  }
+  return metric.metric_label || metric.metric_key || t("system_status.labels.quota_usage");
+}
+
+function moduleUsageUsedLabel(metric) {
+  return metric?.unit === "calls" ? t("system_status.labels.calls_used") : t("system_status.labels.used");
+}
+
+function moduleUsageLimitLabel(metric) {
+  return metric?.unit === "calls" ? t("system_status.labels.quota_calls") : t("system_status.labels.limit");
+}
+
+function moduleUsageRemainingLabel(metric) {
+  return metric?.unit === "calls" ? t("system_status.labels.calls_remaining") : t("system_status.labels.remaining");
+}
+
+function moduleBooleanLabel(value) {
+  return value ? t("system_status.status.yes") : t("system_status.status.no");
+}
+
+function moduleEnabledIndicator(module) {
+  const isEnabled = module?.enabled === true;
+  return {
+    iconClass: "fas fa-power-off",
+    badgeIconClass: isEnabled ? "fas fa-check" : "fas fa-xmark",
+    tone: isEnabled ? "ok" : "down",
+    badgeTone: isEnabled ? "ok" : "down",
+    label: `${t("system_status.labels.enabled")}: ${moduleBooleanLabel(isEnabled)}`,
+  };
+}
+
+function moduleConfiguredIndicator(module) {
+  const isConfigured = module?.configured === true;
+  return {
+    iconClass: "fas fa-cog",
+    badgeIconClass: isConfigured ? "fas fa-check" : "fas fa-xmark",
+    tone: isConfigured ? "ok" : "down",
+    badgeTone: isConfigured ? "ok" : "down",
+    label: `${t("system_status.labels.configured")}: ${moduleBooleanLabel(isConfigured)}`,
+  };
+}
+
+function moduleCheckedIndicator(module) {
+  const checkedAt = formatDate(module?.checked_at);
+  const hasCheckedAt = checkedAt !== "--";
+  return {
+    iconClass: "fas fa-clipboard-check",
+    badgeIconClass: hasCheckedAt ? "fas fa-check" : "fas fa-question",
+    tone: hasCheckedAt ? "ok" : "neutral",
+    badgeTone: hasCheckedAt ? "ok" : "neutral",
+    label: `${t("system_status.labels.checked_at")}: ${hasCheckedAt ? checkedAt : t("system_status.status.unknown")}`,
+  };
+}
+
+function moduleConfigActionLabel(module) {
+  return `${t("system_status.actions.open_config")}: ${moduleLabel(module?.key)}`;
+}
+
+function moduleVersion(module) {
+  const directVersion = String(module?.version || "").trim();
+  if (directVersion !== "") {
+    return directVersion;
+  }
+
+  const usageVersion = String(module?.usage?.version || "").trim();
+  if (usageVersion !== "") {
+    return usageVersion;
+  }
+
+  const metricWithVersion = visibleModuleUsageMetrics(module).find(
+    (metric) => String(metric?.version || "").trim() !== ""
+  );
+  return metricWithVersion ? String(metricWithVersion.version).trim() : "";
+}
+
+function formatMetricValue(value, unit = "") {
+  if (unit === "bytes") {
+    return formatBytes(value);
+  }
+  const formatted = formatNumber(value);
+  if (formatted === "--" || !unit || unit === "calls") {
+    return formatted;
+  }
+  return `${formatted} ${unit}`;
+}
+
+function boundedUsagePercent(value) {
+  const percent = Number(value);
+  if (!Number.isFinite(percent)) {
+    return 0;
+  }
+  return Math.max(0, Math.min(100, percent));
+}
+
+function usageProgressClass(value) {
+  const percent = Number(value);
+  if (!Number.isFinite(percent)) {
+    return "";
+  }
+  if (percent >= 100) {
+    return "is-danger";
+  }
+  if (percent >= 90) {
+    return "is-warning";
+  }
+  return "is-success";
+}
+
 function formatReplicationLabel(replication) {
   if (!replication || typeof replication !== "object") {
     return null;
@@ -649,7 +850,8 @@ function compareGateways(left, right) {
     return rankDifference;
   }
 
-  const heartbeatDifference = gatewayHeartbeatTimestamp(left?.last_heartbeat_at) - gatewayHeartbeatTimestamp(right?.last_heartbeat_at);
+  const heartbeatDifference =
+    gatewayHeartbeatTimestamp(left?.last_heartbeat_at) - gatewayHeartbeatTimestamp(right?.last_heartbeat_at);
   if (heartbeatDifference !== 0) {
     return heartbeatDifference;
   }
@@ -716,10 +918,7 @@ function modulePath(key) {
     <div v-if="warningEntries.length" class="notification is-warning is-light">
       <strong>{{ $t("system_status.labels.warnings") }}</strong>
       <ul class="warning-list">
-        <li
-          v-for="warning in warningEntries"
-          :key="`${warning.key || 'warning'}-${warning.message}`"
-        >
+        <li v-for="warning in warningEntries" :key="`${warning.key || 'warning'}-${warning.message}`">
           {{ warningText(warning) }}
         </li>
       </ul>
@@ -772,7 +971,6 @@ function modulePath(key) {
             </article>
           </div>
         </section>
-
       </b-tab-item>
 
       <b-tab-item v-if="showGatewaySection" value="gateways">
@@ -783,10 +981,7 @@ function modulePath(key) {
           </span>
         </template>
 
-        <section
-          class="system-status-section"
-          data-testid="system-status-gateways"
-        >
+        <section class="system-status-section" data-testid="system-status-gateways">
           <div class="section-heading">
             <div>
               <h3>{{ $t("system_status.sections.gateways") }}</h3>
@@ -818,10 +1013,7 @@ function modulePath(key) {
             {{ $t("system_status.gateways.error") }}
           </div>
 
-          <div
-            v-if="gatewayLoading && !gatewayCards.length"
-            class="notification is-light gateway-notification"
-          >
+          <div v-if="gatewayLoading && !gatewayCards.length" class="notification is-light gateway-notification">
             {{ $t("system_status.gateways.loading") }}
           </div>
 
@@ -842,9 +1034,7 @@ function modulePath(key) {
               </div>
 
               <div class="gateway-card__meta">
-                <span>
-                  {{ $t("system_status.gateways.labels.discovery") }}: {{ gateway.discoveryLabel }}
-                </span>
+                <span> {{ $t("system_status.gateways.labels.discovery") }}: {{ gateway.discoveryLabel }} </span>
                 <span>
                   {{ $t("system_status.gateways.labels.last_heartbeat") }}: {{ gateway.lastHeartbeatLabel }}
                 </span>
@@ -863,15 +1053,10 @@ function modulePath(key) {
             </article>
           </div>
 
-          <div
-            v-else-if="!gatewayLoading && !gatewayError"
-            class="gateway-empty"
-            data-testid="gateway-empty-state"
-          >
+          <div v-else-if="!gatewayLoading && !gatewayError" class="gateway-empty" data-testid="gateway-empty-state">
             {{ $t("system_status.gateways.empty") }}
           </div>
         </section>
-
       </b-tab-item>
 
       <b-tab-item value="modules">
@@ -886,7 +1071,114 @@ function modulePath(key) {
           <div class="section-heading">
             <h3>{{ $t("system_status.sections.modules") }}</h3>
           </div>
-          <div class="module-grid">
+          <div v-if="showModuleSkeletonCards" class="module-grid" data-testid="system-status-modules-loading">
+            <article
+              v-for="placeholder in MODULE_PLACEHOLDER_CARDS"
+              :key="`module-skeleton-${placeholder}`"
+              class="module-card module-card--placeholder"
+              :data-testid="`module-card-skeleton-${placeholder}`"
+            >
+              <div class="module-card__top">
+                <div class="module-card__identity">
+                  <b-skeleton width="46%" height="1.25rem" />
+                  <small class="module-card__version-line module-card__version-line--empty" aria-hidden="true"></small>
+                </div>
+                <b-skeleton width="88px" height="1.65rem" />
+              </div>
+              <div class="module-card__reason module-card__reason--skeleton">
+                <b-skeleton width="100%" height="0.95rem" />
+                <b-skeleton width="72%" height="0.95rem" />
+              </div>
+              <div class="module-card__usage-list">
+                <div
+                  class="module-card__usage module-card__usage--loading"
+                  :data-testid="`module-usage-skeleton-${placeholder}`"
+                >
+                  <div class="module-card__usage-top">
+                    <b-skeleton width="58%" height="1rem" />
+                    <b-skeleton width="48px" height="1rem" />
+                  </div>
+                  <b-skeleton width="100%" height="0.55rem" />
+                  <div class="module-card__usage-grid">
+                    <span><b-skeleton width="86%" height="2.2rem" /></span>
+                    <span><b-skeleton width="86%" height="2.2rem" /></span>
+                    <span><b-skeleton width="86%" height="2.2rem" /></span>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="module-card__footer module-card__footer--skeleton"
+                :data-testid="`module-footer-skeleton-${placeholder}`"
+              >
+                <div class="module-card__indicator-group" aria-hidden="true">
+                  <span class="module-card__indicator-placeholder"></span>
+                  <span class="module-card__indicator-placeholder"></span>
+                  <span class="module-card__indicator-placeholder"></span>
+                </div>
+                <span class="module-card__config-action module-card__config-action--placeholder" aria-hidden="true">
+                  <i class="fas fa-arrow-right"></i>
+                </span>
+              </div>
+            </article>
+          </div>
+
+          <div v-else-if="showModuleErrorCards" class="module-grid" data-testid="system-status-modules-error">
+            <article
+              v-for="placeholder in MODULE_PLACEHOLDER_CARDS"
+              :key="`module-error-${placeholder}`"
+              class="module-card module-card--placeholder is-down"
+              :data-testid="`module-card-error-${placeholder}`"
+            >
+              <div class="module-card__top">
+                <div class="module-card__identity">
+                  <p class="module-card__title">{{ $t("system_status.sections.modules") }}</p>
+                  <small class="module-card__version-line module-card__version-line--empty" aria-hidden="true"></small>
+                </div>
+                <span class="status-pill is-down">{{ $t("system_status.states.error") }}</span>
+              </div>
+              <p class="module-card__reason module-card__reason--text" :title="systemStatusErrorMessage()">
+                {{ systemStatusErrorMessage() }}
+              </p>
+              <div class="module-card__usage-list">
+                <div
+                  class="module-card__usage module-card__usage--error"
+                  :data-testid="`module-usage-error-placeholder-${placeholder}`"
+                >
+                  <div class="module-card__usage-top">
+                    <span>{{ $t("system_status.labels.usage_unavailable") }}</span>
+                  </div>
+                  <div class="module-card__usage-warning">
+                    <small>{{ $t("system_status.labels.status") }}: {{ $t("system_status.states.error") }}</small>
+                    <strong>{{ systemStatusErrorMessage() }}</strong>
+                  </div>
+                </div>
+              </div>
+              <div class="module-card__footer" :data-testid="`module-footer-error-${placeholder}`">
+                <div class="module-card__indicator-group">
+                  <SystemStatusModuleIndicator
+                    icon-class="fas fa-power-off"
+                    :label="`${$t('system_status.labels.enabled')}: --`"
+                    :test-id="`module-indicator-error-${placeholder}-enabled`"
+                  />
+                  <SystemStatusModuleIndicator
+                    icon-class="fas fa-cog"
+                    :label="`${$t('system_status.labels.configured')}: --`"
+                    :test-id="`module-indicator-error-${placeholder}-configured`"
+                  />
+                  <SystemStatusModuleIndicator
+                    icon-class="fas fa-clipboard-check"
+                    :label="`${$t('system_status.labels.checked_at')}: --`"
+                    :test-id="`module-indicator-error-${placeholder}-checked`"
+                  />
+                </div>
+                <span class="module-card__config-action module-card__config-action--placeholder" aria-hidden="true">
+                  <i class="fas fa-arrow-right"></i>
+                </span>
+              </div>
+            </article>
+          </div>
+
+          <div v-else class="module-grid">
             <article
               v-for="module in modules"
               :key="module.key"
@@ -895,24 +1187,170 @@ function modulePath(key) {
               :data-testid="`module-card-${module.key}`"
             >
               <div class="module-card__top">
-                <p class="module-card__title">{{ moduleLabel(module.key) }}</p>
+                <div class="module-card__identity">
+                  <p class="module-card__title">{{ moduleLabel(module.key) }}</p>
+                  <small
+                    class="module-card__version-line"
+                    :class="{ 'module-card__version-line--empty': !moduleVersion(module) }"
+                    :title="
+                      moduleVersion(module) ? `${$t('system_status.labels.version')}: ${moduleVersion(module)}` : null
+                    "
+                    :aria-hidden="moduleVersion(module) ? null : 'true'"
+                    :data-testid="`module-version-${module.key}`"
+                  >
+                    <template v-if="moduleVersion(module)">
+                      {{ $t("system_status.labels.version") }}: {{ moduleVersion(module) }}
+                    </template>
+                  </small>
+                </div>
                 <span class="status-pill" :class="statusClass(module.status)">{{ statusLabel(module.status) }}</span>
               </div>
-              <p class="module-card__reason" :data-testid="`module-reason-${module.key}`">
+              <p
+                class="module-card__reason module-card__reason--text"
+                :title="moduleReasonText(module)"
+                :data-testid="`module-reason-${module.key}`"
+              >
                 {{ moduleReasonText(module) }}
               </p>
-              <div class="module-card__meta">
-                <span>{{ $t("system_status.labels.enabled") }}: {{ module.enabled ? $t("system_status.status.yes") : $t("system_status.status.no") }}</span>
-                <span>{{ $t("system_status.labels.configured") }}: {{ module.configured ? $t("system_status.status.yes") : $t("system_status.status.no") }}</span>
-                <span>{{ $t("system_status.labels.checked_at") }}: {{ formatDate(module.checked_at) }}</span>
+              <div
+                v-if="showModuleUsageSkeleton(module)"
+                class="module-card__usage-list"
+                :data-testid="`module-usage-${module.key}`"
+              >
+                <div
+                  class="module-card__usage module-card__usage--loading"
+                  :data-testid="`module-usage-skeleton-${module.key}`"
+                >
+                  <div class="module-card__usage-top">
+                    <b-skeleton width="58%" height="1rem" />
+                    <b-skeleton width="48px" height="1rem" />
+                  </div>
+                  <b-skeleton width="100%" height="0.55rem" />
+                  <div class="module-card__usage-grid">
+                    <span><b-skeleton width="86%" height="2.2rem" /></span>
+                    <span><b-skeleton width="86%" height="2.2rem" /></span>
+                    <span><b-skeleton width="86%" height="2.2rem" /></span>
+                  </div>
+                </div>
+              </div>
+              <div
+                v-else-if="moduleUsageErrorMessage(module)"
+                class="module-card__usage-list"
+                :data-testid="`module-usage-${module.key}`"
+              >
+                <div
+                  class="module-card__usage module-card__usage--error"
+                  :data-testid="`module-usage-error-${module.key}`"
+                >
+                  <div class="module-card__usage-top">
+                    <span>{{ $t("system_status.labels.usage_unavailable") }}</span>
+                  </div>
+                  <div class="module-card__usage-warning">
+                    <small>{{ $t("system_status.labels.status") }}: {{ $t("system_status.states.error") }}</small>
+                    <strong>{{ moduleUsageErrorMessage(module) }}</strong>
+                  </div>
+                </div>
+              </div>
+              <div
+                v-else-if="hasModuleUsage(module)"
+                class="module-card__usage-list"
+                :data-testid="`module-usage-${module.key}`"
+              >
+                <div
+                  v-for="metric in visibleModuleUsageMetrics(module)"
+                  :key="`${metric.module_key || module.key}-${metric.metric_key}`"
+                  class="module-card__usage"
+                  :class="{ 'module-card__usage--error': isModuleUsageUnavailable(metric) }"
+                  :data-testid="`module-usage-${module.key}-${metric.metric_key}`"
+                >
+                  <div class="module-card__usage-top">
+                    <span>{{ moduleUsageLabel(metric) }}</span>
+                    <strong v-if="!isModuleUsageUnavailable(metric)">{{ formatUsage(metric.usage_percent) }}</strong>
+                  </div>
+                  <div v-if="isModuleUsageUnavailable(metric)" class="module-card__usage-warning">
+                    <small>{{ $t("system_status.labels.status") }}: {{ $t("system_status.status.unknown") }}</small>
+                    <strong>{{ moduleUsageUnavailableReason(metric) }}</strong>
+                  </div>
+                  <progress
+                    v-else
+                    class="progress module-card__usage-progress"
+                    :class="usageProgressClass(metric.usage_percent)"
+                    :value="boundedUsagePercent(metric.usage_percent)"
+                    max="100"
+                  >
+                    {{ formatUsage(metric.usage_percent) }}
+                  </progress>
+                  <div v-if="!isModuleUsageUnavailable(metric)" class="module-card__usage-grid">
+                    <span>
+                      <small>{{ moduleUsageUsedLabel(metric) }}</small>
+                      <strong>{{ formatMetricValue(metric.used, metric.unit) }}</strong>
+                    </span>
+                    <span>
+                      <small>{{ moduleUsageLimitLabel(metric) }}</small>
+                      <strong>{{ formatMetricValue(metric.limit, metric.unit) }}</strong>
+                    </span>
+                    <span>
+                      <small>{{ moduleUsageRemainingLabel(metric) }}</small>
+                      <strong>{{ formatMetricValue(metric.remaining, metric.unit) }}</strong>
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div
+                v-else-if="showModuleUsageUnavailablePlaceholder(module)"
+                class="module-card__usage-list"
+                :data-testid="`module-usage-${module.key}`"
+              >
+                <div
+                  class="module-card__usage module-card__usage--warning"
+                  :data-testid="`module-usage-unavailable-${module.key}`"
+                >
+                  <div class="module-card__usage-top">
+                    <span>{{ $t("system_status.labels.usage_unavailable") }}</span>
+                  </div>
+                  <div class="module-card__usage-warning">
+                    <small>{{ $t("system_status.labels.status") }}: {{ $t("system_status.status.unknown") }}</small>
+                    <strong>{{ $t("system_status.states.module_usage_unavailable") }}</strong>
+                  </div>
+                </div>
+              </div>
+              <div class="module-card__footer" :data-testid="`module-footer-${module.key}`">
+                <div class="module-card__indicator-group">
+                  <SystemStatusModuleIndicator
+                    v-bind="moduleEnabledIndicator(module)"
+                    :test-id="`module-indicator-${module.key}-enabled`"
+                  />
+                  <SystemStatusModuleIndicator
+                    v-bind="moduleConfiguredIndicator(module)"
+                    :test-id="`module-indicator-${module.key}-configured`"
+                  />
+                  <SystemStatusModuleIndicator
+                    v-bind="moduleCheckedIndicator(module)"
+                    :test-id="`module-indicator-${module.key}-checked`"
+                  />
+                </div>
+                <RouterLink
+                  v-if="modulePath(module.key)"
+                  :to="modulePath(module.key)"
+                  class="module-card__config-action"
+                  :aria-label="moduleConfigActionLabel(module)"
+                  :title="moduleConfigActionLabel(module)"
+                  :data-testid="`module-config-action-${module.key}`"
+                >
+                  <i class="fas fa-arrow-right" aria-hidden="true"></i>
+                </RouterLink>
+                <span
+                  v-else
+                  class="module-card__config-action module-card__config-action--placeholder"
+                  aria-hidden="true"
+                  :data-testid="`module-config-action-${module.key}`"
+                >
+                  <i class="fas fa-arrow-right"></i>
+                </span>
               </div>
-              <RouterLink v-if="modulePath(module.key)" :to="modulePath(module.key)" class="module-card__link">
-                {{ $t("system_status.actions.open_config") }}
-              </RouterLink>
             </article>
           </div>
         </section>
-
       </b-tab-item>
 
       <b-tab-item value="sessions">
@@ -943,7 +1381,10 @@ function modulePath(key) {
                 </tr>
               </thead>
               <tbody>
-                <tr v-for="session in sessions.recent_sessions" :key="`${session.session_kind}-${session.principal_id}-${session.last_seen_at}`">
+                <tr
+                  v-for="session in sessions.recent_sessions"
+                  :key="`${session.session_kind}-${session.principal_id}-${session.last_seen_at}`"
+                >
                   <td>
                     <span class="status-pill" :class="session.active ? 'is-ok' : 'is-down'">
                       {{ session.active ? $t("system_status.status.active") : $t("system_status.status.inactive") }}
@@ -966,7 +1407,6 @@ function modulePath(key) {
             </table>
           </div>
         </section>
-
       </b-tab-item>
     </b-tabs>
   </div>
@@ -1031,7 +1471,6 @@ function modulePath(key) {
 }
 
 .status-card-grid,
-.module-grid,
 .gateway-grid {
   display: grid;
   gap: 1rem;
@@ -1039,6 +1478,13 @@ function modulePath(key) {
   align-items: stretch;
 }
 
+.module-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  align-items: stretch;
+}
+
 .gateway-summary-grid {
   display: grid;
   gap: 1rem;
@@ -1090,7 +1536,6 @@ function modulePath(key) {
 .status-card__secondary,
 .status-card__detail,
 .module-card small,
-.module-card__meta,
 .session-context {
   color: #475569;
 }
@@ -1102,8 +1547,10 @@ function modulePath(key) {
 .module-card {
   display: grid;
   gap: 0.85rem;
+  grid-template-rows: 3.55rem 5.1rem 10.8rem 2.35rem;
   height: 100%;
-  align-content: start;
+  min-height: 26.35rem;
+  align-content: stretch;
 }
 
 .gateway-card {
@@ -1120,6 +1567,8 @@ function modulePath(key) {
   justify-content: stretch;
   column-gap: 0.75rem;
   row-gap: 0.35rem;
+  min-height: 3.55rem;
+  overflow: hidden;
 }
 
 .gateway-card__top {
@@ -1138,6 +1587,32 @@ function modulePath(key) {
   letter-spacing: 0.04em;
   line-height: 1.35;
   overflow-wrap: anywhere;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.module-card__identity {
+  display: grid;
+  gap: 0.12rem;
+  align-content: start;
+  min-width: 0;
+}
+
+.module-card__version-line {
+  display: block;
+  min-height: 1rem;
+  color: #64748b;
+  font-size: 0.7rem;
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.module-card__version-line--empty {
+  visibility: hidden;
 }
 
 .module-card__top .status-pill {
@@ -1162,12 +1637,20 @@ function modulePath(key) {
   color: #475569;
   line-height: 1.65;
   overflow-wrap: anywhere;
+  min-height: 5.1rem;
+  overflow: hidden;
 }
 
-.module-card__meta {
+.module-card__reason--text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.module-card__reason--skeleton {
   display: grid;
-  gap: 0.25rem;
-  font-size: 0.85rem;
+  gap: 0.35rem;
+  align-content: start;
 }
 
 .gateway-card__meta {
@@ -1177,6 +1660,178 @@ function modulePath(key) {
   color: #475569;
 }
 
+.module-card__usage {
+  display: grid;
+  gap: 0.45rem;
+  padding: 0.75rem;
+  border: 1px solid #d7dde7;
+  border-radius: 8px;
+  background: #f8fafc;
+  min-height: 10.8rem;
+}
+
+.module-card__usage-list {
+  display: grid;
+  gap: 0.55rem;
+  min-height: 10.8rem;
+  max-height: 10.8rem;
+  overflow: auto;
+  scrollbar-width: thin;
+}
+
+.module-card__usage-list > .module-card__usage:only-child {
+  min-height: 10.8rem;
+}
+
+.module-card__usage--loading {
+  align-content: start;
+}
+
+.module-card__usage--error {
+  border-color: rgba(220, 38, 38, 0.22);
+  background: #fef2f2;
+}
+
+.module-card__usage--warning {
+  border-color: rgba(245, 158, 11, 0.28);
+  background: #fffbeb;
+}
+
+.module-card__usage-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: baseline;
+  color: #334155;
+  font-size: 0.85rem;
+}
+
+.module-card__usage-progress {
+  margin: 0;
+  height: 0.55rem;
+}
+
+.module-card__usage-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.module-card__usage-grid span {
+  min-width: 0;
+}
+
+.module-card__usage-grid small {
+  display: block;
+  color: #64748b;
+  font-size: 0.72rem;
+  line-height: 1.25;
+}
+
+.module-card__usage-grid strong {
+  display: block;
+  color: #0f172a;
+  overflow-wrap: anywhere;
+}
+
+.module-card__usage-warning {
+  display: grid;
+  align-content: center;
+  gap: 0.35rem;
+  min-height: 5.4rem;
+  padding: 0.55rem 0.65rem;
+  border-radius: 6px;
+  background: rgba(220, 38, 38, 0.08);
+  color: #991b1b;
+}
+
+.module-card__usage-warning small {
+  color: #b45309;
+  font-size: 0.72rem;
+  line-height: 1.25;
+}
+
+.module-card__usage-warning strong {
+  color: #991b1b;
+  font-size: 0.9rem;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.module-card__usage--warning .module-card__usage-warning {
+  background: rgba(245, 158, 11, 0.12);
+}
+
+.module-card__usage--warning .module-card__usage-warning strong {
+  color: #92400e;
+}
+
+.module-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  min-height: 2.35rem;
+  padding-top: 0.15rem;
+}
+
+.module-card__indicator-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  min-width: 0;
+}
+
+.module-card__indicator-placeholder,
+.module-card__config-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.15rem;
+  height: 2.15rem;
+  flex: 0 0 2.15rem;
+  border-radius: 999px;
+}
+
+.module-card__indicator-placeholder {
+  border: 1px solid #d7dde7;
+  background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 50%, #eef2f7 75%);
+  background-size: 200% 100%;
+  animation: module-placeholder-pulse 1.4s ease-in-out infinite;
+}
+
+.module-card__config-action {
+  border: 1px solid rgba(15, 76, 129, 0.24);
+  color: #0f4c81;
+  background: rgba(15, 76, 129, 0.06);
+  transition: background-color 140ms ease, box-shadow 140ms ease, color 140ms ease, transform 140ms ease;
+}
+
+.module-card__config-action:hover,
+.module-card__config-action:focus-visible {
+  color: #ffffff;
+  background: #0f4c81;
+  box-shadow: 0 8px 18px rgba(15, 76, 129, 0.22);
+  transform: translateX(1px);
+}
+
+.module-card__config-action--placeholder {
+  border-color: #d7dde7;
+  color: #cbd5e1;
+  background: #f8fafc;
+  pointer-events: none;
+}
+
+@keyframes module-placeholder-pulse {
+  0% {
+    background-position: 100% 0;
+  }
+
+  100% {
+    background-position: -100% 0;
+  }
+}
+
 .gateway-card__message {
   margin: 0;
   color: #7c2d12;

src/components/displays/superuser/system/SystemStatusModuleIndicator.vue

@@ -0,0 +1,124 @@
+<script setup>
+defineProps({
+  iconClass: {
+    type: String,
+    required: true,
+  },
+  badgeIconClass: {
+    type: String,
+    default: "",
+  },
+  tone: {
+    type: String,
+    default: "neutral",
+  },
+  badgeTone: {
+    type: String,
+    default: "neutral",
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  testId: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <span
+    class="system-status-module-indicator"
+    :class="`is-${tone}`"
+    role="img"
+    :aria-label="label"
+    :title="label"
+    :data-testid="testId || undefined"
+  >
+    <span class="system-status-module-indicator__icon" aria-hidden="true">
+      <i :class="iconClass"></i>
+    </span>
+    <span
+      v-if="badgeIconClass"
+      class="system-status-module-indicator__badge"
+      :class="`is-${badgeTone}`"
+      aria-hidden="true"
+    >
+      <i :class="badgeIconClass"></i>
+    </span>
+  </span>
+</template>
+
+<style scoped>
+.system-status-module-indicator {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.15rem;
+  height: 2.15rem;
+  border: 1px solid currentColor;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.72);
+  color: #64748b;
+  cursor: help;
+  transition: background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
+}
+
+.system-status-module-indicator:hover,
+.system-status-module-indicator:focus-visible {
+  background: #ffffff;
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
+  transform: translateY(-1px);
+}
+
+.system-status-module-indicator__icon {
+  font-size: 0.98rem;
+  line-height: 1;
+}
+
+.system-status-module-indicator__badge {
+  position: absolute;
+  right: -0.22rem;
+  bottom: -0.18rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid #ffffff;
+  border-radius: 999px;
+  background: #64748b;
+  color: #ffffff;
+  font-size: 0.56rem;
+  line-height: 1;
+}
+
+.system-status-module-indicator.is-ok {
+  color: #166534;
+  background: rgba(22, 163, 74, 0.1);
+}
+
+.system-status-module-indicator.is-down {
+  color: #b91c1c;
+  background: rgba(220, 38, 38, 0.1);
+}
+
+.system-status-module-indicator.is-degraded {
+  color: #b45309;
+  background: rgba(245, 158, 11, 0.12);
+}
+
+.system-status-module-indicator__badge.is-ok {
+  background: #16a34a;
+}
+
+.system-status-module-indicator__badge.is-down {
+  background: #dc2626;
+}
+
+.system-status-module-indicator__badge.is-degraded {
+  background: #d97706;
+}
+</style>

src/components/displays/user/vehicles/vehiclesTable.vue

@@ -58,7 +58,9 @@ const reload = () => {
 const canViewVehicle = () => SessionUser.canAccessCustomerFeature("vehicles", "list");
 const canEditVehicle = () => SessionUser.canAccessCustomerFeature("vehicles", "edit");
 const canDeleteVehicle = () => SessionUser.canAccessCustomerFeature("vehicles", "delete");
-const canShowVehicleRowActions = () => canViewVehicle() || canDeleteVehicle();
+const usesBuiltInVehicleWheelActions = (vehicle) =>
+  SessionUser.canAccessSuperUser() && String(vehicle?.reg || "").trim().length > 0;
+const canShowVehicleRowActions = (vehicle) => usesBuiltInVehicleWheelActions(vehicle) || canViewVehicle() || canDeleteVehicle();
 const isUserScoped = () => Boolean(props.userScopedUserId);
 
 const redirectVehiclePage = (vehicle) => {
@@ -260,12 +262,12 @@ const deleteVehicle = (id) => {
             <td v-if="!props.compact">
               <!-- Actions stay grouped behind the wheel menu. -->
               <ActionSettingsWheelButton
-                v-if="canShowVehicleRowActions()"
+                v-if="canShowVehicleRowActions(object)"
                 :user_id="object.user_id"
                 :reg_1="object.reg"
                 :displayActionsDirectly="false"
               >
-                <template #actions>
+                <template v-if="!usesBuiltInVehicleWheelActions(object)" #actions>
                   <!-- View (Redirect to the vehicle page) -->
                   <ActionSettingsWheelItem
                     v-if="canViewVehicle()"

src/components/forms/department/pos/SelectProductsFormPOS.vue

@@ -18,6 +18,8 @@ import {
   getUserDiscounts,
   customer_id,
   customer_attributes,
+  customer_attributes_status,
+  retryCustomerAttributes,
   loadCustomerAttributes
 } from "@/components/shop/POSDepartmentProcess.vue";
 import {getProductCategory, getProducts} from "@/components/shop/Products.vue";
@@ -205,6 +207,7 @@ const getValidOrderId = () => {
 };
 
 const CUSTOMER_PRODUCT_RULE_BLOCK_MESSAGE = "This product is not allowed for the selected customer";
+const CUSTOMER_PRODUCT_RULE_BLOCK_CODE = "CUSTOMER_RULE_PRODUCT_RESTRICTED";
 
 const getCreateOrderItemErrorMessage = (error) => {
   return String(
@@ -216,7 +219,15 @@ const getCreateOrderItemErrorMessage = (error) => {
 };
 
 const isCustomerProductRuleBlockError = (error) => {
-  return getCreateOrderItemErrorMessage(error).includes(CUSTOMER_PRODUCT_RULE_BLOCK_MESSAGE);
+  const errorCode = String(
+    error?.response?.data?.data?.code ??
+    error?.response?.data?.code ??
+    ""
+  );
+  return (
+    errorCode === CUSTOMER_PRODUCT_RULE_BLOCK_CODE ||
+    getCreateOrderItemErrorMessage(error).includes(CUSTOMER_PRODUCT_RULE_BLOCK_MESSAGE)
+  );
 };
 
 const showRestrictionWarning = async (messageKey = "pos.restrictions.product_not_allowed") => {
@@ -274,6 +285,13 @@ const getProductAddonDefinition = (productId, addonId) => {
   return product.addons.find((addon) => Number(addon.option_id ?? addon.id) === Number(addonId)) || null;
 };
 
+const getProductAddonRestriction = (productId, addonId) => {
+  const addon = getProductAddonDefinition(productId, addonId);
+  return addon
+    ? getAddonRestriction(addon, { isRelatedAddon: true })
+    : { restricted: true, messageKey: "pos.restrictions.product_not_allowed" };
+};
+
 const getPendingProductFromAddon = (productId, addonId) => {
   const addon = getProductAddonDefinition(productId, addonId);
   const addonProduct = addon?.product || {};
@@ -372,7 +390,11 @@ const showAddMultipleProducts = (productId) => {
           return false;
         }
         return createOrderItem(orderId, productId, inputValue)
-          .then(async () => await addAddonsToOrderMiddleware(productId, inputValue, null, orderId).then(() => loadOrderItems()))
+          .then(async (result) => {
+            const createdItemId = Number(result?.data?.data?.id ?? 0);
+            await addAddonsToOrderMiddleware(productId, inputValue, createdItemId, orderId);
+            await loadOrderItems();
+          })
           .catch((error) => handleCreateOrderItemError(error, { validationMessage: true }).then(() => false));
       }
     },
@@ -485,6 +507,9 @@ const isProductAddonTrue = (productId, addonId) => {
 };
 // Set the product addon
 const setProductAddon = (productId, addonId, status, quantity = 1) => {
+  if (status && quantity > 0 && getProductAddonRestriction(productId, addonId).restricted) {
+    return;
+  }
   // Set the product addon status
   const productAddon = productAddons.value.find((productAddon) => productAddon.product_id === productId && productAddon.addon_id === addonId);
   if (productAddon === undefined) {
@@ -515,6 +540,10 @@ const addAddonsToOrderMiddleware = async (product_id, quantity = 1, related_item
     relatedItemId: related_item_id,
   });
   await warnIfRestrictedAddonsWereSkipped(restrictedSelections);
+  const normalizedRelatedItemId = Number(related_item_id);
+  if (product_addons.length > 0 && (!Number.isInteger(normalizedRelatedItemId) || normalizedRelatedItemId <= 0)) {
+    throw new Error("Created parent order item ID is missing");
+  }
 
   for (let i = 0; i < product_addons.length; i++) {
     // Get the addons quantity (If the addon quantity is 0, use the product quantity, otherwise multiply the addon quantity with the product quantity)
@@ -524,7 +553,7 @@ const addAddonsToOrderMiddleware = async (product_id, quantity = 1, related_item
         getPendingProductFromAddon(product_id, product_addons[i].addon_id),
         addon_quantity,
         getAddonPrice(product_id, product_addons[i].addon_id),
-        related_item_id,
+        normalizedRelatedItemId,
         product_addons[i].notes === undefined ? null : product_addons[i].notes
     );
   }
@@ -535,7 +564,7 @@ const addAddonsToOrderMiddleware = async (product_id, quantity = 1, related_item
         targetOrderId,
         product_addons[i].addon_id,
         addon_quantity,
-        related_item_id,
+        normalizedRelatedItemId,
         product_addons[i].notes === undefined ? null : product_addons[i].notes
     ).catch((error) => handleCreateOrderItemError(error));
   }
@@ -686,6 +715,16 @@ const getPreviousOrderProductPrice = (orderItem) => {
   return Number(getPreviousOrderProduct(orderItem)?.price ?? 0);
 };
 
+const getPreviousOrderItemId = (orderItem) => {
+  const parsed = Number(orderItem?.id ?? 0);
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+};
+
+const getPreviousOrderRelatedItemId = (orderItem) => {
+  const parsed = Number(orderItem?.related_item_id ?? 0);
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+};
+
 const addPreviousOrderToCurrent = async (previousOrder) => {
   if (!hasOrderItems(previousOrder)) {
     return;
@@ -695,14 +734,21 @@ const addPreviousOrderToCurrent = async (previousOrder) => {
     return;
   }
 
-  for (const orderItem of previousOrder) {
+  const sourceToCreatedItemIds = new Map();
+  const standaloneItems = previousOrder.filter((orderItem) => getPreviousOrderRelatedItemId(orderItem) === null);
+  const relatedItems = previousOrder.filter((orderItem) => getPreviousOrderRelatedItemId(orderItem) !== null);
+
+  for (const orderItem of standaloneItems) {
     const productId = getPreviousOrderProductId(orderItem);
     const quantity = Number(orderItem?.quantity ?? 0);
     if (productId <= 0 || quantity <= 0) {
       continue;
     }
 
-    const previousOrderProduct = getPreviousOrderProduct(orderItem) || { id: productId, price: getPreviousOrderProductPrice(orderItem) };
+    const previousOrderProduct = getPreviousOrderProduct(orderItem) || {
+      id: productId,
+      price: getPreviousOrderProductPrice(orderItem),
+    };
     const restriction = getProductRestriction(previousOrderProduct);
     if (restriction.restricted) {
       await showRestrictionWarning(restriction.messageKey);
@@ -712,8 +758,51 @@ const addPreviousOrderToCurrent = async (previousOrder) => {
     const discountedPrice = String(getUserProductPrice({ ...previousOrderProduct, price: basePrice }));
 
     showPendingCreateOrderItem({ ...previousOrderProduct, price: basePrice }, quantity, discountedPrice);
-    await createOrderItem(orderId, productId, quantity).catch((error) => handleCreateOrderItemError(error));
-    await addAddonsToOrderMiddleware(productId, quantity, null, orderId);
+    const result = await createOrderItem(
+      orderId,
+      productId,
+      quantity,
+      null,
+      String(orderItem?.notes ?? "")
+    ).catch((error) => handleCreateOrderItemError(error));
+    const sourceItemId = getPreviousOrderItemId(orderItem);
+    const createdItemId = Number(result?.data?.data?.id ?? 0);
+    if (sourceItemId && createdItemId > 0) {
+      sourceToCreatedItemIds.set(sourceItemId, createdItemId);
+    }
+  }
+
+  for (const orderItem of relatedItems) {
+    const productId = getPreviousOrderProductId(orderItem);
+    const quantity = Number(orderItem?.quantity ?? 0);
+    const relatedItemId = sourceToCreatedItemIds.get(getPreviousOrderRelatedItemId(orderItem));
+    if (productId <= 0 || quantity <= 0 || !relatedItemId) {
+      continue;
+    }
+
+    const previousOrderProduct = getPreviousOrderProduct(orderItem) || { id: productId };
+    const restriction = getAddonRestriction(previousOrderProduct, {
+      isRelatedAddon: true,
+      relatedItemId,
+    });
+    if (restriction.restricted) {
+      await showRestrictionWarning(restriction.messageKey);
+      continue;
+    }
+
+    showPendingCreateOrderItem(
+      { ...previousOrderProduct, price: getPreviousOrderProductPrice(orderItem) },
+      quantity,
+      String(getUserProductPrice(previousOrderProduct)),
+      relatedItemId
+    );
+    await createOrderItem(
+      orderId,
+      productId,
+      quantity,
+      relatedItemId,
+      String(orderItem?.notes ?? "")
+    ).catch((error) => handleCreateOrderItemError(error));
   }
 
   await loadOrderItems();
@@ -737,6 +826,15 @@ const getRecommendedProductAddons = (productId) => {
   return Array.isArray(product?.addons) ? product.addons : [];
 };
 
+const getRecommendedAddonRestriction = (addon) => {
+  return getAddonRestriction(addon, { isRelatedAddon: true });
+};
+
+const getRecommendedAddonRestrictionMessage = (addon) => {
+  const restriction = getRecommendedAddonRestriction(addon);
+  return restriction.messageKey ? t(restriction.messageKey) : "";
+};
+
 const getRecommendedProductPrice = (productId) => {
   const product = getProductById(productId);
   if (!product) {
@@ -767,8 +865,11 @@ const addRecommendedProductToOrder = async (productId) => {
   }
 
   showPendingCreateOrderItem(product, 1, getRecommendedProductPrice(productId));
-  await createOrderItem(orderId, productId, 1).catch((error) => handleCreateOrderItemError(error));
-  await addAddonsToOrderMiddleware(productId, 1, null, orderId);
+  const result = await createOrderItem(orderId, productId, 1).catch((error) => handleCreateOrderItemError(error));
+  const createdItemId = Number(result?.data?.data?.id ?? 0);
+  if (createdItemId > 0) {
+    await addAddonsToOrderMiddleware(productId, 1, createdItemId, orderId);
+  }
   await loadOrderItems();
 };
 
@@ -953,7 +1054,7 @@ const addProductAddon = (productId, addonId) => {
   }
 
   const addon = product.addons.find((addon) => addon.option_id === addonId);
-  if (!addon) {
+  if (!addon || getAddonRestriction(addon, { isRelatedAddon: true }).restricted) {
     return;
   }
 
@@ -979,6 +1080,9 @@ const setProductAddonNote = (productId, addonId, note) => {
 };
 
 const subtractProductAddon = (productId, addonId) => {
+  if (getProductAddonRestriction(productId, addonId).restricted) {
+    return;
+  }
   const productAddon = productAddons.value.find((productAddon) => productAddon.product_id === productId && productAddon.addon_id === addonId);
   if (productAddon !== undefined) {
     if (productAddon.quantity > 0) {
@@ -998,6 +1102,25 @@ const unselectProduct = () => {
   }, 100);
 };
 
+const sanitizeRestrictedProductAddonSelections = () => {
+  productAddons.value.forEach((productAddon) => {
+    if (!productAddon?.status && Number(productAddon?.quantity ?? 0) <= 0) {
+      return;
+    }
+
+    if (getProductAddonRestriction(productAddon.product_id, productAddon.addon_id).restricted) {
+      productAddon.status = false;
+      productAddon.quantity = 0;
+    }
+  });
+};
+
+watch(
+  [customer_attributes, customer_attributes_status],
+  () => sanitizeRestrictedProductAddonSelections(),
+  { deep: true }
+);
+
 // If the customer id is set, get the discounts
 const onCustomerChange = () => {
   if (parseInt(customer_id.value) > 0) {
@@ -1127,6 +1250,21 @@ const onSelectCategory = (rawId) => {
 
 <template>
   <div>
+    <div
+      v-if="customer_attributes_status === 'error'"
+      class="notification is-danger is-light is-flex is-align-items-center is-justify-content-space-between"
+      data-testid="pos-customer-restrictions-load-error"
+    >
+      <span>{{ t('pos.restrictions.load_failed') }}</span>
+      <button
+        type="button"
+        class="button is-small is-danger is-light"
+        data-testid="pos-customer-restrictions-retry"
+        @click="retryCustomerAttributes"
+      >
+        {{ t('common.retry') }}
+      </button>
+    </div>
     <div class="columns is-multiline">
       <div class="column is-12 is-flex is-justify-content-space-between">
         <!-- Categories - Desktop -->
@@ -1260,13 +1398,35 @@ const onSelectCategory = (rawId) => {
                     <div class="content">
                       <div class="buttons is-narrow">
                         <template v-for="addons in getRecommendedProductAddons(product_id)" :key="addons.id">
-                          <button class="button is-rounded is-small" @click="setProductAddon(product_id, addons.option_id, !isProductAddonTrue(product_id, addons.option_id))" :class="{ 'is-primary': isProductAddonTrue(product_id, addons.option_id), 'is-inverted': isProductAddonTrue(product_id, addons.option_id) }">
+                          <button
+                              class="button is-rounded is-small"
+                              @click="setProductAddon(product_id, addons.option_id, !isProductAddonTrue(product_id, addons.option_id))"
+                              :class="{
+                                'is-primary': isProductAddonTrue(product_id, addons.option_id),
+                                'is-inverted': isProductAddonTrue(product_id, addons.option_id),
+                                'is-danger': getRecommendedAddonRestriction(addons).restricted,
+                                'is-light': getRecommendedAddonRestriction(addons).restricted,
+                              }"
+                              :disabled="getRecommendedAddonRestriction(addons).restricted"
+                              :data-testid="getRecommendedAddonRestriction(addons).restricted
+                                ? `pos-recommended-addon-restriction-${addons.option_id}`
+                                : undefined"
+                          >
                             <span class="icon">
-                              <i class="fas fa-plus" v-if="!isProductAddonTrue(product_id, addons.option_id)"></i>
+                              <i
+                                  class="fas"
+                                  :class="getRecommendedAddonRestriction(addons).restricted
+                                    ? 'fa-exclamation-triangle'
+                                    : 'fa-plus'"
+                                  v-if="!isProductAddonTrue(product_id, addons.option_id)"
+                              ></i>
                               <i class="fas fa-check" v-else></i>
                             </span>
                             <span>
                               {{ addons.name }}
+                              <template v-if="getRecommendedAddonRestriction(addons).restricted">
+                                / {{ getRecommendedAddonRestrictionMessage(addons) }}
+                              </template>
                             </span>
                           </button>
                         </template>
@@ -1347,6 +1507,7 @@ const onSelectCategory = (rawId) => {
                     :setProductAddonNote="setProductAddonNote"
                     :customer-discounts="user_discounts"
                     v-bind:customer-attributes="customer_attributes"
+                    :customer-attributes-status="customer_attributes_status"
                 />
               </WhiteBox>
             </div>

src/components/global/BrandedLoadingScreen.vue

@@ -0,0 +1,516 @@
+<script setup>
+import { computed, onBeforeUnmount, watch } from "vue";
+import truckWashLogo from "@/assets/branding/truckwash-banner-white-compressed.png";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "Loading...",
+  },
+  subtitle: {
+    type: String,
+    default: "",
+  },
+  testId: {
+    type: String,
+    default: "branded-loading-screen",
+  },
+  statusTestId: {
+    type: String,
+    default: "",
+  },
+  ariaLabel: {
+    type: String,
+    default: "",
+  },
+  lockScroll: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const resolvedAriaLabel = computed(() => props.ariaLabel || props.title || "Loading");
+const SCROLL_LOCK_CLASS = "tw-loader-scroll-lock";
+const SCROLL_LOCK_COUNT_KEY = "twLoaderScrollLocks";
+const LOADER_START_GLOBAL_KEY = "__TW_LOADER_STARTED_AT__";
+let hasScrollLock = false;
+
+const currentTime = () => {
+  if (typeof performance !== "undefined" && typeof performance.now === "function") {
+    return performance.now();
+  }
+  return Date.now();
+};
+
+const sharedLoaderStart = () => {
+  if (typeof window === "undefined") {
+    return currentTime();
+  }
+
+  const startedAt = Number(window[LOADER_START_GLOBAL_KEY]);
+  if (Number.isFinite(startedAt)) {
+    return startedAt;
+  }
+
+  const fallbackStartedAt = currentTime();
+  window[LOADER_START_GLOBAL_KEY] = fallbackStartedAt;
+  return fallbackStartedAt;
+};
+
+const animationDelay = (extraDelayMs = 0) => `${extraDelayMs - Math.max(0, currentTime() - sharedLoaderStart())}ms`;
+const animationPhaseStyle = computed(() => ({
+  "--branded-loader-spin-delay": animationDelay(),
+  "--branded-loader-sweep-delay": animationDelay(),
+  "--branded-loader-pulse-delay": animationDelay(),
+  "--branded-loader-wash-wide-delay": animationDelay(),
+  "--branded-loader-wash-tight-delay": animationDelay(),
+  "--branded-loader-spark-one-delay": animationDelay(),
+  "--branded-loader-spark-two-delay": animationDelay(650),
+  "--branded-loader-dot-one-delay": animationDelay(),
+  "--branded-loader-dot-two-delay": animationDelay(180),
+  "--branded-loader-dot-three-delay": animationDelay(360),
+}));
+
+const pageRoot = () => (typeof document === "undefined" ? null : document.documentElement);
+const scrollLockElements = () => {
+  if (typeof document === "undefined") {
+    return [];
+  }
+  return [document.documentElement, document.body].filter(Boolean);
+};
+
+const currentLockCount = (root) => {
+  const count = Number.parseInt(root?.dataset?.[SCROLL_LOCK_COUNT_KEY] || "0", 10);
+  return Number.isFinite(count) && count > 0 ? count : 0;
+};
+
+const lockPageScroll = () => {
+  const root = pageRoot();
+  if (!root || hasScrollLock) {
+    return;
+  }
+
+  root.dataset[SCROLL_LOCK_COUNT_KEY] = String(currentLockCount(root) + 1);
+  scrollLockElements().forEach((element) => element.classList.add(SCROLL_LOCK_CLASS));
+  hasScrollLock = true;
+};
+
+const unlockPageScroll = () => {
+  const root = pageRoot();
+  if (!root || !hasScrollLock) {
+    return;
+  }
+
+  const nextCount = Math.max(0, currentLockCount(root) - 1);
+  if (nextCount > 0) {
+    root.dataset[SCROLL_LOCK_COUNT_KEY] = String(nextCount);
+  } else {
+    delete root.dataset[SCROLL_LOCK_COUNT_KEY];
+    scrollLockElements().forEach((element) => element.classList.remove(SCROLL_LOCK_CLASS));
+  }
+  hasScrollLock = false;
+};
+
+watch(
+  () => props.lockScroll,
+  (shouldLock) => {
+    if (shouldLock) {
+      lockPageScroll();
+    } else {
+      unlockPageScroll();
+    }
+  },
+  { immediate: true }
+);
+
+onBeforeUnmount(unlockPageScroll);
+</script>
+
+<template>
+  <div
+    class="branded-loading-screen"
+    :data-testid="testId"
+    role="status"
+    aria-live="polite"
+    :aria-label="resolvedAriaLabel"
+    :style="animationPhaseStyle"
+  >
+    <div class="branded-loading-screen__ambient" aria-hidden="true">
+      <span class="branded-loading-screen__wash branded-loading-screen__wash--wide"></span>
+      <span class="branded-loading-screen__wash branded-loading-screen__wash--tight"></span>
+    </div>
+    <div class="branded-loading-screen__panel">
+      <div class="branded-loading-screen__brand">
+        <img :src="truckWashLogo" alt="Truck Wash" class="branded-loading-screen__logo" />
+      </div>
+      <div class="branded-loading-screen__motion" aria-hidden="true">
+        <span class="branded-loading-screen__ring"></span>
+        <span class="branded-loading-screen__sweep"></span>
+        <span class="branded-loading-screen__spark branded-loading-screen__spark--one"></span>
+        <span class="branded-loading-screen__spark branded-loading-screen__spark--two"></span>
+      </div>
+      <p class="branded-loading-screen__status" :data-testid="statusTestId || undefined">
+        {{ title }}
+      </p>
+      <p v-if="subtitle" class="branded-loading-screen__hint">{{ subtitle }}</p>
+      <div class="branded-loading-screen__dots" aria-hidden="true">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:global(html.tw-loader-scroll-lock),
+:global(body.tw-loader-scroll-lock) {
+  overflow: hidden;
+  scrollbar-width: none;
+}
+
+:global(html.tw-loader-scroll-lock) {
+  font-size: 16px !important;
+}
+
+:global(html.tw-loader-scroll-lock::-webkit-scrollbar),
+:global(body.tw-loader-scroll-lock::-webkit-scrollbar) {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.branded-loading-screen {
+  --branded-loader-navy: #063651;
+  --branded-loader-blue: #0787bb;
+  --branded-loader-cyan: #69d7f5;
+  --branded-loader-foam: #f8fbff;
+  --branded-loader-warm: #f4c15d;
+
+  position: fixed;
+  inset: 0;
+  z-index: 100000;
+  display: grid;
+  min-height: 100vh;
+  place-items: center;
+  overflow: hidden;
+  padding: 2rem;
+  box-sizing: border-box;
+  background:
+    radial-gradient(circle at 20% 20%, rgba(105, 215, 245, 0.18), transparent 28rem),
+    radial-gradient(circle at 82% 74%, rgba(244, 193, 93, 0.12), transparent 24rem),
+    linear-gradient(145deg, #041f32 0%, var(--branded-loader-navy) 52%, #04263d 100%);
+  color: var(--branded-loader-foam);
+  font-family: Avenir, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.branded-loading-screen__ambient {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.branded-loading-screen__ambient::before {
+  position: absolute;
+  inset: 14% 9%;
+  content: "";
+  border: 1px solid rgba(248, 251, 255, 0.08);
+  border-radius: 8px;
+}
+
+.branded-loading-screen__wash {
+  position: absolute;
+  left: 50%;
+  display: block;
+  width: 72rem;
+  height: 8rem;
+  border-radius: 999px;
+  background: linear-gradient(90deg, transparent, rgba(105, 215, 245, 0.2), rgba(248, 251, 255, 0.18), transparent);
+  filter: blur(8px);
+  transform: translateX(-50%) rotate(-9deg);
+}
+
+.branded-loading-screen__wash--wide {
+  top: 26%;
+  animation: branded-loader-wash 5.8s ease-in-out var(--branded-loader-wash-wide-delay, 0ms) infinite;
+}
+
+.branded-loading-screen__wash--tight {
+  bottom: 22%;
+  width: 48rem;
+  height: 5rem;
+  animation: branded-loader-wash 6.8s ease-in-out var(--branded-loader-wash-tight-delay, 0ms) infinite reverse;
+}
+
+.branded-loading-screen__panel {
+  position: relative;
+  display: grid;
+  width: min(100%, 25rem);
+  min-height: 27rem;
+  align-content: center;
+  justify-items: center;
+  padding: 2.5rem 2rem 2.25rem;
+  box-sizing: border-box;
+  border: 1px solid rgba(248, 251, 255, 0.16);
+  border-radius: 8px;
+  background: rgba(4, 31, 50, 0.74);
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32) !important;
+  text-align: center;
+  backdrop-filter: blur(18px);
+}
+
+.branded-loading-screen__panel::after {
+  position: absolute;
+  inset: 0;
+  content: "";
+  border-radius: inherit;
+  background: linear-gradient(180deg, rgba(248, 251, 255, 0.08), transparent 38%);
+  pointer-events: none;
+}
+
+.branded-loading-screen__brand,
+.branded-loading-screen__motion,
+.branded-loading-screen__status,
+.branded-loading-screen__hint,
+.branded-loading-screen__dots {
+  position: relative;
+  z-index: 1;
+}
+
+.branded-loading-screen__brand {
+  display: grid;
+  width: 13rem;
+  min-height: 4rem;
+  place-items: center;
+  margin-bottom: 2.25rem;
+}
+
+.branded-loading-screen__logo {
+  display: block;
+  width: 100%;
+  max-height: 4rem;
+  object-fit: contain;
+}
+
+.branded-loading-screen__motion {
+  display: grid;
+  width: 8.5rem;
+  height: 8.5rem;
+  place-items: center;
+  margin-bottom: 2rem;
+}
+
+.branded-loading-screen__ring {
+  position: absolute;
+  inset: 0;
+  border: 2px solid rgba(248, 251, 255, 0.12);
+  border-top-color: var(--branded-loader-cyan);
+  border-right-color: rgba(7, 135, 187, 0.78);
+  border-radius: 50%;
+  animation: branded-loader-spin 1.8s linear var(--branded-loader-spin-delay, 0ms) infinite;
+}
+
+.branded-loading-screen__ring::before,
+.branded-loading-screen__ring::after {
+  position: absolute;
+  content: "";
+  border-radius: 50%;
+}
+
+.branded-loading-screen__ring::before {
+  inset: 1rem;
+  border: 1px solid rgba(248, 251, 255, 0.18);
+}
+
+.branded-loading-screen__ring::after {
+  inset: 2.3rem;
+  background: radial-gradient(circle, rgba(105, 215, 245, 0.38), rgba(7, 135, 187, 0.18) 45%, transparent 70%);
+  animation: branded-loader-pulse 2.4s ease-in-out var(--branded-loader-pulse-delay, 0ms) infinite;
+}
+
+.branded-loading-screen__sweep {
+  width: 6rem;
+  height: 1.15rem;
+  border-radius: 999px;
+  background: linear-gradient(90deg, transparent 0%, rgba(248, 251, 255, 0.92) 45%, var(--branded-loader-cyan) 100%);
+  box-shadow: 0 0 24px rgba(105, 215, 245, 0.48);
+  transform: rotate(-12deg);
+  animation: branded-loader-sweep 1.8s ease-in-out var(--branded-loader-sweep-delay, 0ms) infinite;
+}
+
+.branded-loading-screen__spark {
+  position: absolute;
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 50%;
+  background: var(--branded-loader-warm);
+  box-shadow: 0 0 18px rgba(244, 193, 93, 0.76);
+  opacity: 0.9;
+}
+
+.branded-loading-screen__spark--one {
+  top: 1rem;
+  right: 1.3rem;
+  animation: branded-loader-spark 2.6s ease-in-out var(--branded-loader-spark-one-delay, 0ms) infinite;
+}
+
+.branded-loading-screen__spark--two {
+  bottom: 1.4rem;
+  left: 1rem;
+  animation: branded-loader-spark 2.6s ease-in-out var(--branded-loader-spark-two-delay, 0.65s) infinite;
+}
+
+.branded-loading-screen__status {
+  margin: 0;
+  color: var(--branded-loader-foam);
+  font-size: 1.2rem;
+  font-weight: 800;
+  letter-spacing: 0;
+  line-height: 1.25;
+}
+
+.branded-loading-screen__hint {
+  max-width: 18rem;
+  margin: 0.55rem 0 0;
+  color: rgba(248, 251, 255, 0.72);
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
+.branded-loading-screen__dots {
+  display: inline-flex;
+  gap: 0.45rem;
+  height: 0.6rem;
+  margin-top: 1.35rem;
+  align-items: center;
+}
+
+.branded-loading-screen__dots span {
+  display: block;
+  width: 0.42rem;
+  height: 0.42rem;
+  border-radius: 50%;
+  background: var(--branded-loader-cyan);
+  animation: branded-loader-dot 1.35s ease-in-out var(--branded-loader-dot-one-delay, 0ms) infinite;
+}
+
+.branded-loading-screen__dots span:nth-child(2) {
+  animation-delay: var(--branded-loader-dot-two-delay, 0.18s);
+}
+
+.branded-loading-screen__dots span:nth-child(3) {
+  animation-delay: var(--branded-loader-dot-three-delay, 0.36s);
+}
+
+@keyframes branded-loader-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes branded-loader-sweep {
+  0%,
+  100% {
+    opacity: 0.6;
+    transform: translateX(-0.65rem) rotate(-12deg);
+  }
+  50% {
+    opacity: 1;
+    transform: translateX(0.65rem) rotate(-12deg);
+  }
+}
+
+@keyframes branded-loader-pulse {
+  0%,
+  100% {
+    opacity: 0.7;
+    transform: scale(0.94);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes branded-loader-spark {
+  0%,
+  100% {
+    opacity: 0.35;
+    transform: scale(0.7);
+  }
+  45% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes branded-loader-dot {
+  0%,
+  100% {
+    opacity: 0.35;
+    transform: translateY(0);
+  }
+  45% {
+    opacity: 1;
+    transform: translateY(-0.25rem);
+  }
+}
+
+@keyframes branded-loader-wash {
+  0%,
+  100% {
+    opacity: 0.42;
+    transform: translateX(-54%) rotate(-9deg);
+  }
+  50% {
+    opacity: 0.72;
+    transform: translateX(-46%) rotate(-9deg);
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .branded-loading-screen {
+    padding: 1rem;
+  }
+
+  .branded-loading-screen__panel {
+    min-height: 25rem;
+    padding: 2rem 1.4rem;
+  }
+
+  .branded-loading-screen__brand {
+    width: 11.5rem;
+    margin-bottom: 1.8rem;
+  }
+
+  .branded-loading-screen__motion {
+    width: 7.25rem;
+    height: 7.25rem;
+    margin-bottom: 1.75rem;
+  }
+
+  .branded-loading-screen__status {
+    font-size: 1.1rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .branded-loading-screen *,
+  .branded-loading-screen *::before,
+  .branded-loading-screen *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
+
+  .branded-loading-screen__sweep {
+    opacity: 0.95;
+    transform: rotate(-12deg);
+  }
+
+  .branded-loading-screen__dots span {
+    opacity: 0.75;
+    transform: none;
+  }
+}
+</style>

src/components/menus/superuser/SuperUserLeftMenu.vue

@@ -1,7 +1,8 @@
 <script setup>
 import MenuDefault from "@/components/menus/MenuDefault.vue";
-import {ref, watch} from "vue";
-import {SessionUser} from "@/components/session/token/SessionUser.vue";
+import { ref, watch } from "vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import i18n from "@/i18n";
 
 // Define the isLoaded function
 // This is here, because the departments need to be loaded before the menu is shown,
@@ -9,249 +10,292 @@ import {SessionUser} from "@/components/session/token/SessionUser.vue";
 const isLoaded = ref(true);
 const doesRouteStartWith = (route) => {
   return window.location.pathname.startsWith(route);
-}
+};
+const t = (key, fallback = key) => {
+  const value = i18n.global.t(key);
+  return value === key ? fallback : value;
+};
 
 const menu_items = ref([
   {
     name: SessionUser.objects.departments.meta.title,
-    route: '/superuser' +SessionUser.objects.departments.meta.endpoint,
+    route: "/superuser" + SessionUser.objects.departments.meta.endpoint,
     icon: SessionUser.objects.departments.meta.icon,
-    children: []
+    children: [],
   },
   {
-    name: 'Nummerplade scanning',
-    route: '/superuser/scanners',
-    icon: 'fas fa-cogs',
-    children: []
+    name: "Nummerplade scanning",
+    route: "/superuser/scanners",
+    icon: "fas fa-cogs",
+    children: [],
   },
   {
-    name: 'Kassesystem',
-    permissions: [
-        'canAccessSuperUser'
-    ],
-    icon: 'fas fa-cogs',
+    name: "Kassesystem",
+    permissions: ["canAccessSuperUser"],
+    icon: "fas fa-cogs",
     options: [
       {
         label: SessionUser.objects.collectedOrderInvoices.meta.title,
         value: SessionUser.objects.collectedOrderInvoices.meta.endpoint,
         icon: SessionUser.objects.collectedOrderInvoices.meta.icon,
         children: [],
-        hidden: false
+        hidden: false,
       },
       {
         label: SessionUser.objects.products.meta.title,
         value: SessionUser.objects.products.meta.endpoint,
         icon: SessionUser.objects.products.meta.icon,
         children: [],
-        hidden: false
+        hidden: false,
       },
       {
         label: SessionUser.objects.orders.meta.title,
         value: SessionUser.objects.orders.meta.endpoint,
         icon: SessionUser.objects.orders.meta.icon,
         children: [],
-        hidden: false
+        hidden: false,
       },
       {
         label: SessionUser.objects.categories.meta.title,
         value: SessionUser.objects.categories.meta.endpoint,
         icon: SessionUser.objects.categories.meta.icon,
         children: [],
-        hidden: false
+        hidden: false,
       },
     ],
     onSelect: async (value) => {
       SessionUser.functions.redirectTo.superUser(value);
     },
-    hidden: false
+    hidden: false,
   },
   {
-    name: 'Brugere',
-    permissions: [
-      'canAccessSuperUser'
-    ],
-    icon: 'fas fa-cogs',
+    name: "Brugere",
+    permissions: ["canAccessSuperUser"],
+    icon: "fas fa-cogs",
     options: [
       {
-        label: 'Kunder',
-        value: '/customers',
-        icon: 'fas fa-users',
+        label: "Kunder",
+        value: "/customers",
+        icon: "fas fa-users",
         children: [],
-        hidden: false
+        hidden: false,
       },
       {
-        label: 'Medarbejdere',
-        value: '/users',
-        icon: 'fas fa-users-cog',
+        label: "Medarbejdere",
+        value: "/users",
+        icon: "fas fa-users-cog",
         children: [],
-        hidden: false
+        hidden: false,
       },
       {
-        label: 'Chauffører',
-        value: '/subusers',
-        icon: 'fas fa-id-card',
+        label: "Chauffører",
+        value: "/subusers",
+        icon: "fas fa-id-card",
         children: [],
-        hidden: false
+        hidden: false,
       },
       {
         label: SessionUser.objects.roles.meta.title,
         value: SessionUser.objects.roles.meta.endpoint,
         icon: SessionUser.objects.roles.meta.icon,
         children: [],
-        hidden: false
+        hidden: false,
       },
     ],
     onSelect: async (value) => {
       SessionUser.functions.redirectTo.superUser(value);
     },
-    hidden: false
+    hidden: false,
   },
   {
-    name: 'Konfiguration',
-    permissions: [
-      'canAccessSuperUser'
-    ],
-    icon: 'fas fa-cogs',
+    name: "Konfiguration",
+    permissions: ["canAccessSuperUser"],
+    icon: "fas fa-cogs",
     options: [
       {
         label: SessionUser.superUser.modules.economic.meta.title,
         value: SessionUser.superUser.modules.economic.meta.config_endpoint,
         icon: SessionUser.superUser.modules.economic.meta.icon,
         children: [],
-        hidden: false
+        hidden: false,
       },
       {
         label: SessionUser.superUser.modules.reCAPTCHA.meta.title,
         value: SessionUser.superUser.modules.reCAPTCHA.meta.config_endpoint,
         icon: SessionUser.superUser.modules.reCAPTCHA.meta.icon,
         children: [],
-        hidden: false
+        hidden: false,
       },
       {
         label: SessionUser.superUser.modules.email.meta.title,
         value: SessionUser.superUser.modules.email.meta.config_endpoint,
         icon: SessionUser.superUser.modules.email.meta.icon,
         children: [],
-        hidden: false
+        hidden: false,
       },
       {
         label: SessionUser.superUser.modules.backups.meta.title,
         value: SessionUser.superUser.modules.backups.meta.config_endpoint,
         icon: SessionUser.superUser.modules.backups.meta.icon,
         children: [],
-        hidden: false
+        hidden: false,
       },
       {
         label: SessionUser.superUser.modules.coolify.meta.title,
         value: SessionUser.superUser.modules.coolify.meta.config_endpoint,
         icon: SessionUser.superUser.modules.coolify.meta.icon,
         children: [],
-        hidden: false
+        hidden: false,
       },
       {
         label: SessionUser.superUser.modules.releasemanager.meta.title,
         value: SessionUser.superUser.modules.releasemanager.meta.config_endpoint,
         icon: SessionUser.superUser.modules.releasemanager.meta.icon,
         children: [],
-        hidden: false
+        hidden: false,
       },
       {
         label: SessionUser.superUser.modules.motorapi.meta.title,
         value: SessionUser.superUser.modules.motorapi.meta.config_endpoint,
         icon: SessionUser.superUser.modules.motorapi.meta.icon,
         children: [],
-        hidden: false
+        hidden: false,
       },
       {
         label: SessionUser.superUser.modules.stripe.meta.title,
         value: SessionUser.superUser.modules.stripe.meta.config_endpoint,
         icon: SessionUser.superUser.modules.stripe.meta.icon,
         children: [],
-        hidden: false
+        hidden: false,
       },
       {
         label: SessionUser.superUser.modules.weatherapi.meta.title,
         value: SessionUser.superUser.modules.weatherapi.meta.config_endpoint,
         icon: SessionUser.superUser.modules.weatherapi.meta.icon,
         children: [],
-        hidden: false
+        hidden: false,
       },
       {
         label: SessionUser.superUser.modules.workfeed.meta.title,
         value: SessionUser.superUser.modules.workfeed.meta.config_endpoint,
         icon: SessionUser.superUser.modules.workfeed.meta.icon,
         children: [],
-        hidden: false
+        hidden: false,
       },
     ],
     onSelect: async (value) => {
       SessionUser.functions.redirectTo.superUser(value);
     },
-    hidden: false
+    hidden: false,
   },
   {
-    name: 'XL Vask',
-    permissions: [
-      'canAccessSuperUser'
-    ],
-    icon: 'fas fa-cogs',
+    name: t("cron.system_nav", "System"),
+    permissions: ["canAccessSuperUser"],
+    icon: "fas fa-shield-alt",
     options: [
       {
-        label: 'Dashboard',
-        value: '/xlvask',
-        icon: 'fas fa-tachometer-alt',
+        label: t("system_status.title", "System status"),
+        value: null,
+        icon: "fas fa-heartbeat",
         children: [],
-        hidden: false
+        hidden: false,
+      },
+      {
+        label: t("cron.nav", "Cron tasks"),
+        value: "/system/cron",
+        icon: "fas fa-clock",
+        children: [],
+        hidden: false,
+      },
+      {
+        label: t("system_status.cards.database", "Database"),
+        value: "/system/database",
+        icon: "fas fa-database",
+        children: [],
+        hidden: false,
+      },
+      {
+        label: t("system_status.cards.minio", "MinIO"),
+        value: "/system/minio",
+        icon: "fas fa-archive",
+        children: [],
+        hidden: false,
+      },
+      {
+        label: t("system_status.cards.redis", "Redis"),
+        value: "/system/redis",
+        icon: "fas fa-memory",
+        children: [],
+        hidden: false,
+      },
+      {
+        label: t("security.nav", "Security"),
+        value: "/system/security/overview",
+        icon: "fas fa-shield-alt",
+        children: [],
+        hidden: false,
+      },
+    ],
+    onSelect: async (value) => {
+      SessionUser.functions.redirectTo.superUser(value);
+    },
+    hidden: false,
+  },
+  {
+    name: "XL Vask",
+    permissions: ["canAccessSuperUser"],
+    icon: "fas fa-cogs",
+    options: [
+      {
+        label: "Dashboard",
+        value: "/xlvask",
+        icon: "fas fa-tachometer-alt",
+        children: [],
+        hidden: false,
       },
       {
         label: SessionUser.objects.global.language.customers,
-        value: '/xlvask/customers',
-        icon: 'fas fa-users',
+        value: "/xlvask/customers",
+        icon: "fas fa-users",
         children: [],
-        hidden: false
+        hidden: false,
       },
       {
         label: SessionUser.objects.global.language.usage_log,
-        value: '/xlvask/usagelogs',
-        icon: 'fas fa-users',
+        value: "/xlvask/usagelogs",
+        icon: "fas fa-users",
         children: [],
-        hidden: false
+        hidden: false,
       },
       {
         label: SessionUser.objects.global.language.configuration,
         value: SessionUser.superUser.modules.xlvask.meta.config_endpoint,
         icon: SessionUser.superUser.modules.xlvask.meta.icon,
         children: [],
-        hidden: false
+        hidden: false,
       },
     ],
     onSelect: async (value) => {
       SessionUser.functions.redirectTo.superUser(value);
     },
-    hidden: false
+    hidden: false,
   },
 ]);
 
 const selectDepartment = (department) => {
   // Get the current path (After /admin/:department_id)
-  const currentPath = window.location.pathname.split('/').slice(3).join('/');
-  console.log('Selected department: ' + department);
+  const currentPath = window.location.pathname.split("/").slice(3).join("/");
+  console.log("Selected department: " + department);
   menu_items.value[1].selected = department;
   // Hide the menu
   menu_items.value[1].isExpanded = false;
   // Redirect to the department
   SessionUser.functions.redirectTo.department(department, currentPath);
-}
-
+};
 </script>
 
 <template>
-  <MenuDefault v-if="isLoaded"
-      v-bind:menu_items="menu_items"
-      :show_icons="false"
-  />
+  <MenuDefault v-if="isLoaded" v-bind:menu_items="menu_items" :show_icons="false" />
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/components/models/navigation/items/NavigationMenuItemsSuperUser.vue

@@ -11,6 +11,7 @@ import { fetchSuperUserDraftCount } from "@/components/models/navigation/items/s
 import { fetchSuperUserBookingCounts } from "@/components/models/navigation/items/superUserBookingCount.js";
 import { hasExplicitBookingCountPermission } from "@/components/models/navigation/items/bookingCountGuards.js";
 import { NAVIGATION_COUNT_REFRESH_EVENT } from "@/components/models/navigation/items/navigationCountEvents.js";
+import { canViewCustomerRuleConfiguration } from "@/features/customer/customerRuleConfigurationPermissions.js";
 
 const firstToUpperCase = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
 
@@ -331,6 +332,11 @@ const items = computed<NavigationItemProps[]>(() => [
     children: [
       { label: t("common.products"), to: "/superuser/products" },
       { label: t("superuser.nav.categories"), to: "/superuser/categories" },
+      {
+        label: t("customer_rules.configuration.nav"),
+        to: "/superuser/customer-rules",
+        hidden: !canViewCustomerRuleConfiguration(),
+      },
     ],
   },
   // Users
@@ -471,7 +477,9 @@ const items = computed<NavigationItemProps[]>(() => [
       { label: t("system_status.title"), to: "/superuser" },
       { label: t("cron.nav"), to: "/superuser/system/cron" },
       { label: t("system_status.cards.database"), to: "/superuser/system/database" },
-      { label: t("cron.replication"), to: "/superuser/system/replication" },
+      { label: t("system_status.cards.minio"), to: "/superuser/system/minio" },
+      { label: t("system_status.cards.redis"), to: "/superuser/system/redis" },
+      { label: t("security.nav"), to: "/superuser/system/security/overview" },
     ],
   },
   // Other

src/components/page/wrappers/RestrictedPageWrapper.vue

@@ -4,6 +4,7 @@ import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import Swal from "sweetalert2";
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { pingApiServer } from "@/services/apiHealth.js";
+import BrandedLoadingScreen from "@/components/global/BrandedLoadingScreen.vue";
 
 const props = defineProps({
   hasPermission: {
@@ -76,11 +77,14 @@ onBeforeUnmount(clearSessionTimeout);
 
 <template>
   <div>
-    <div v-if="!isSessionInitiated">
-      <div class="pageloader is-active is-dark">
-        <span class="title">Bekræfter bruger...</span>
-      </div>
-    </div>
+    <BrandedLoadingScreen
+      v-if="!isSessionInitiated"
+      title="Bekræfter bruger..."
+      subtitle="Vi indlæser din session"
+      test-id="restricted-auth-loading"
+      status-test-id="restricted-auth-loading-status"
+      aria-label="Bekræfter bruger"
+    />
     <slot v-else-if="props.hasPermission" />
     <div v-else>
       <div class="my-6">
@@ -131,5 +135,3 @@ onBeforeUnmount(clearSessionTimeout);
     </div>
   </div>
 </template>
-
-<style scoped></style>

src/components/pagination/departmentTabs.vue

@@ -6,6 +6,8 @@ import { sortByDepartmentPriorityOrder } from "@/services/departmentVisibility.j
 // Define the departments
 export const departments = ref([]);
 export const isLoading = ref(true);
+export const timeBookingDepartments = ref([]);
+export const timeBookingDepartmentsIsLoading = ref(false);
 
 // Get the departments from the API
 export const getDepartments = async () => {
@@ -57,4 +59,19 @@ export const getDepartmentsGuest = async (queryParams = {}) => {
     isLoading.value = false;
   }
 };
+
+export const getTimeBookingDepartments = async (queryParams = {}) => {
+  timeBookingDepartmentsIsLoading.value = true;
+  try {
+    const queryString = new URLSearchParams(queryParams).toString();
+    const request = await unauthenticatedRequest(
+      "/department/timebookings/departments/public" + (queryString ? `?${queryString}` : ""),
+      "get"
+    );
+    timeBookingDepartments.value = sortByDepartmentPriorityOrder(request.data.data || []);
+    return timeBookingDepartments.value;
+  } finally {
+    timeBookingDepartmentsIsLoading.value = false;
+  }
+};
 </script>

src/components/session/authenticatedRequest.vue

@@ -285,6 +285,7 @@ export const authenticatedRequest = (url, method, data, catchCallable = null, th
       url: requestUrl,
       ...(method === 'GET' ? { params: data } : { data }),
       ...(options?.signal ? { signal: options.signal } : {}),
+      ...(options?.responseType ? { responseType: options.responseType } : {}),
       __skipRequestQueue: true,
       headers
     }),

src/components/session/token/SessionUser.vue

@@ -64,6 +64,7 @@ import {
   clearPeriodCache,
   clearSelfWashCountsCache,
 } from "@/views/dashboards/superUserDashboard/InvoicingBillingPeriod/imports/InvoicingBillingPeriodImportPaging.js";
+import { markStoredSessionAsSubuser } from "@/services/sessionStorage.js";
 
 const normalizePositiveInteger = (value) => {
   const parsedValue = Number.parseInt(String(value ?? ""), 10);
@@ -278,8 +279,14 @@ const resetSessionState = () => {
   SessionUser.subuser.username.value = null;
   SessionUser.subuser.name.value = null;
   SessionUser.subuser.email.value = null;
+  SessionUser.subuser.email_verified.value = false;
+  SessionUser.subuser.email_verified_at.value = null;
   SessionUser.subuser.phone.country_code.value = null;
   SessionUser.subuser.phone.number.value = null;
+  SessionUser.subuser.phone.verified.value = false;
+  SessionUser.subuser.phone.verified_at.value = null;
+  SessionUser.subuser.verification_state.value = null;
+  SessionUser.subuser.verification.value = null;
   SessionUser.subuser.grants.value = [];
   SessionUser.subuser.created_at.value = null;
   SessionUser.subuser.updated_at.value = null;
@@ -397,6 +404,12 @@ export const isInvalidSessionError = (error) => {
   );
 };
 
+const isUserEndpointSubuserTokenMismatch = (error) => {
+  const status = Number.parseInt(String(error?.response?.status ?? ""), 10);
+  const message = extractErrorMessage(error).toLowerCase();
+  return [400, 401].includes(status) && message.includes("user not found");
+};
+
 const redirectToConnectivityIssue = () => {
   if (typeof window === "undefined" || window.location.pathname === "/connectivity-issue") {
     return false;
@@ -406,9 +419,10 @@ const redirectToConnectivityIssue = () => {
   return true;
 };
 
-export const handleSessionBootstrapFailure = async (error, { title, text } = {}) => {
+export const handleSessionBootstrapFailure = async (error, { title, text, subuserSession = false } = {}) => {
   if (isInvalidSessionError(error)) {
-    const wasSubuserSession = SessionUser.isSubuser.value || getStoredSessionSnapshot()?.isSubuser === true;
+    const wasSubuserSession =
+      Boolean(subuserSession) || SessionUser.isSubuser.value || getStoredSessionSnapshot()?.isSubuser === true;
     const pingResult = await pingApiServer();
     if (!pingResult.ok) {
       console.warn("Preserving stored session because API ping failed during invalid-session handling.", pingResult);
@@ -567,6 +581,44 @@ export const authenticateSubuser = async (credentials) => {
     });
 };
 
+const applySubuserSessionPayload = async (payload) => {
+  const data = payload || {};
+  SessionUser.isSubuser.value = true;
+  markStoredSessionAsSubuser();
+  SessionUser.subuser.id.value = data.id;
+  SessionUser.subuser.username.value = data.username;
+  SessionUser.subuser.name.value = data.name;
+  SessionUser.subuser.email.value = data.email;
+  SessionUser.subuser.email_verified.value = Boolean(data.email_verified);
+  SessionUser.subuser.email_verified_at.value = data.email_verified_at || null;
+  SessionUser.subuser.phone.country_code.value = data.phone_country_code;
+  SessionUser.subuser.phone.number.value = data.phone;
+  SessionUser.subuser.phone.verified.value = Boolean(data.phone_verified);
+  SessionUser.subuser.phone.verified_at.value = data.phone_verified_at || null;
+  SessionUser.subuser.verification_state.value = data.verification_state || data.verification?.state || null;
+  SessionUser.subuser.verification.value = data.verification || null;
+  SessionUser.subuser.grants.value = data.grants || [];
+  reconcileSelectedSubuserGrant(SessionUser.subuser.grants.value);
+  SessionUser.subuser.created_at.value = data.created_at;
+  SessionUser.subuser.updated_at.value = data.updated_at;
+  SessionUser.subuser.suspended_at.value = data.suspended_at;
+  SessionUser.subuser.cached_at.value = new Date();
+  setReleaseChannelSwitchNoticePrincipal(`subuser:${data.id || data.username || data.email || "unknown"}`);
+
+  // Build permissions from grants
+  const allPermissions = [];
+  if (data.grants && Array.isArray(data.grants)) {
+    data.grants.forEach((grant) => {
+      if (grant.permissions && Array.isArray(grant.permissions)) {
+        allPermissions.push(...grant.permissions);
+      }
+    });
+  }
+  SessionUser.permissions.value = [...new Set(allPermissions)];
+  await refreshReleaseRuntime();
+  SessionUser.initiated.value = true;
+};
+
 /**
  * Get the subuser's session data from /subusers/me
  * @returns {Promise<void>}
@@ -575,32 +627,7 @@ export const getSubuserSessionData = async () => {
   return await authenticatedRequest("/subusers/me", "GET")
     .then(async (response) => {
       const data = response.data.data || response.data;
-      SessionUser.subuser.id.value = data.id;
-      SessionUser.subuser.username.value = data.username;
-      SessionUser.subuser.name.value = data.name;
-      SessionUser.subuser.email.value = data.email;
-      SessionUser.subuser.phone.country_code.value = data.phone_country_code;
-      SessionUser.subuser.phone.number.value = data.phone;
-      SessionUser.subuser.grants.value = data.grants || [];
-      reconcileSelectedSubuserGrant(SessionUser.subuser.grants.value);
-      SessionUser.subuser.created_at.value = data.created_at;
-      SessionUser.subuser.updated_at.value = data.updated_at;
-      SessionUser.subuser.suspended_at.value = data.suspended_at;
-      SessionUser.subuser.cached_at.value = new Date();
-      setReleaseChannelSwitchNoticePrincipal(`subuser:${data.id || data.username || data.email || "unknown"}`);
-
-      // Build permissions from grants
-      const allPermissions = [];
-      if (data.grants && Array.isArray(data.grants)) {
-        data.grants.forEach((grant) => {
-          if (grant.permissions && Array.isArray(grant.permissions)) {
-            allPermissions.push(...grant.permissions);
-          }
-        });
-      }
-      SessionUser.permissions.value = [...new Set(allPermissions)];
-      await refreshReleaseRuntime();
-      SessionUser.initiated.value = true;
+      await applySubuserSessionPayload(data);
     })
     .catch(async (error) => {
       if (isReleaseChannelApiAvailabilityError(error)) {
@@ -612,6 +639,7 @@ export const getSubuserSessionData = async () => {
       return await handleSessionBootstrapFailure(error, {
         title: "Fejl ved hentning af subbrugerdata",
         text: "Der opstod en fejl ved hentning af dine brugerdata. Prøv at logge ind igen.",
+        subuserSession: true,
       });
     });
 };
@@ -680,6 +708,10 @@ export const getSessionData = async () => {
         return;
       }
 
+      if (isUserEndpointSubuserTokenMismatch(error)) {
+        return await getSubuserSessionData();
+      }
+
       return await handleSessionBootstrapFailure(error, {
         title: "Fejl ved hentning af brugerdata",
         text: "Der opstod en fejl ved hentning af dine brugerdata. Prøv at logge ind igen.",
@@ -819,10 +851,16 @@ export const SessionUser = {
     username: ref(null),
     name: ref(null),
     email: ref(null),
+    email_verified: ref(false),
+    email_verified_at: ref(null),
     phone: {
       country_code: ref(null),
       number: ref(null),
+      verified: ref(false),
+      verified_at: ref(null),
     },
+    verification_state: ref(null),
+    verification: ref(null),
     grants: ref([]),
     created_at: ref(null),
     updated_at: ref(null),

src/components/session/token/SessionUser/Objects/CollectedOrderInvoices.vue

@@ -735,6 +735,18 @@ export const CollectedOrderInvoices = {
           throw error;
         });
       },
+      pdf: async (collectedInvoiceId, type = 'booked') => {
+        return authenticatedRequest('/collected-invoices/economic/pdf', 'GET', {
+          collected_invoice_id: parseInt(collectedInvoiceId),
+          type,
+        }).then((response) => {
+          console.warn(response);
+          return response;
+        }).catch((error) => {
+          console.warn(error);
+          throw error;
+        });
+      },
       v2: {
         details: async (collectedInvoiceId) => {
           return authenticatedRequest('/collected-invoices/economic/v2/details', 'GET', {

src/components/session/token/SessionUser/Objects/Orders.vue

@@ -953,8 +953,30 @@ const assignDraftOrderCustomer = async ({
             }
             return response.data.data.download_link;
           }).catch((error) => {
-            console.error(error);
-          });
+              console.error(error);
+            });
+        },
+        fetchAttachmentContent: async (id, attachment_id, disposition = "inline") => {
+          const normalizedDisposition = disposition === "attachment" ? "attachment" : "inline";
+          const response = await authenticatedRequest(
+            Orders.meta.endpoint + "/attachments/content",
+            "GET",
+            {
+              order_id: id,
+              attachment_id,
+              disposition: normalizedDisposition,
+            },
+            null,
+            null,
+            {
+              concurrencyLimit: 5,
+              responseType: "blob",
+            },
+          );
+          if (!(response?.data instanceof Blob)) {
+            throw new Error("Invalid attachment content response");
+          }
+          return response.data;
         },
         resendWashCertificate: async (id) => {
           return SessionUser.request(

src/components/session/token/SessionUser/Objects/Subusers.vue

@@ -2,8 +2,18 @@
 import Swal from "sweetalert2";
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
 import i18n from "@/i18n";
+import { getSubuserPasswordPolicyError } from "@/services/subuserPasswordPolicy.js";
 
 const t = (key, values = undefined) => i18n.global.t(key, values);
+let qrCodeModulePromise;
+
+const loadQRCodeModule = () => {
+  if (!qrCodeModulePromise) {
+    qrCodeModulePromise = import("qrcode");
+  }
+
+  return qrCodeModulePromise;
+};
 
 const escapeHtml = (value) => String(value ?? "")
   .replace(/&/g, "&")
@@ -12,6 +22,137 @@ const escapeHtml = (value) => String(value ?? "")
   .replace(/"/g, """)
   .replace(/'/g, "'");
 
+const apiErrorMessage = (error, fallback) =>
+  error?.response?.data?.data?.message || error?.response?.data?.message || error?.message || fallback;
+
+const absoluteLoginLink = (path) => {
+  try {
+    return new URL(path, window.location.origin).toString();
+  } catch (_error) {
+    return String(path || "");
+  }
+};
+
+const directLoginPayload = (context = {}) => ({
+  ...(context.customer_number ? { customer_number: context.customer_number } : {}),
+  ...(context.grant_id ? { grant_id: context.grant_id } : {}),
+});
+
+const driverContactText = (key, values = undefined) =>
+  t(`templates.generated.compat.superuser.driver_contact.${key}`, values);
+
+const showDeliveryFeedback = async (response, options = {}) => {
+  const payload = response?.data?.data || response?.data || {};
+  const delivery = payload.delivery || {};
+  const sent = delivery.status === "sent";
+
+  await Swal.fire({
+    title: sent
+      ? (options.sentTitle || driverContactText("link_sent_title"))
+      : (options.notSentTitle || driverContactText("link_not_sent_title")),
+    text: delivery.message || (sent
+      ? driverContactText("link_sent_default")
+      : driverContactText("link_not_sent_default")),
+    icon: sent ? "success" : "warning",
+    confirmButtonText: driverContactText("close"),
+  });
+};
+
+const copyText = async (text) => {
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return;
+    } catch (_error) {
+      // Fall back below when clipboard permission is denied.
+    }
+  }
+
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.select();
+  document.execCommand("copy");
+  textarea.remove();
+};
+
+const buildAdminContactFormHtml = (subuser = {}) => `
+  <div class="subuser-form">
+    <div class="field">
+      <label class="label" for="subuser-admin-email">E-mail</label>
+      <div class="control">
+        <input id="subuser-admin-email" class="input" type="email" value="${escapeHtml(subuser.email || "")}" placeholder="chauffor@example.com" />
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-4">
+        <div class="field">
+          <label class="label" for="subuser-admin-phone-country-code">Landekode</label>
+          <div class="control">
+            <input id="subuser-admin-phone-country-code" class="input" type="number" inputmode="numeric" value="${escapeHtml(subuser.phone_country_code || 45)}" />
+          </div>
+        </div>
+      </div>
+      <div class="column">
+        <div class="field">
+          <label class="label" for="subuser-admin-phone">Telefon</label>
+          <div class="control">
+            <input id="subuser-admin-phone" class="input" type="number" inputmode="numeric" value="${escapeHtml(subuser.phone || "")}" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+`;
+
+const readAdminContactFormValues = () => {
+  const email = document.getElementById("subuser-admin-email")?.value?.trim() || "";
+  const phoneCountryCode = document.getElementById("subuser-admin-phone-country-code")?.value?.trim() || "";
+  const phone = document.getElementById("subuser-admin-phone")?.value?.trim() || "";
+
+  if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    Swal.showValidationMessage("E-mail er ugyldig.");
+    return null;
+  }
+
+  if (!/^\d{1,3}$/.test(phoneCountryCode)) {
+    Swal.showValidationMessage("Landekode skal være 1-3 cifre.");
+    return null;
+  }
+
+  if (!/^\d{4,15}$/.test(phone)) {
+    Swal.showValidationMessage("Telefon skal være 4-15 cifre.");
+    return null;
+  }
+
+  return {
+    email: email || null,
+    phone_country_code: Number.parseInt(phoneCountryCode, 10),
+    phone: Number.parseInt(phone, 10),
+  };
+};
+
+const buildPasswordFormHtml = () => `
+  <div class="subuser-form">
+    <div class="field">
+      <label class="label" for="subuser-admin-password">Ny adgangskode</label>
+      <div class="control">
+        <input id="subuser-admin-password" class="input" type="password" autocomplete="new-password" />
+      </div>
+      <p class="help">Minimum 8 tegn med store bogstaver, små bogstaver og tal.</p>
+    </div>
+    <div class="field">
+      <label class="label" for="subuser-admin-password-confirm">Gentag adgangskode</label>
+      <div class="control">
+        <input id="subuser-admin-password-confirm" class="input" type="password" autocomplete="new-password" />
+      </div>
+    </div>
+  </div>
+`;
+
 const buildAccessTemplateOptions = (templates = [], selectedKey = "driver") => templates
   .filter((template) => template?.key && template.key !== "custom")
   .map((template) => `
@@ -192,6 +333,259 @@ export const Subusers = {
       const normalized = permissions.filter(Boolean);
       return customSummary(t("superuser.driver_access.summary.permission_count", { count: normalized.length }));
     },
+    async updateAdminProfile(subuserId, payload) {
+      return authenticatedRequest(`/superuser/subusers/${encodeURIComponent(subuserId)}`, "PATCH", payload);
+    },
+    async setAdminPassword(subuserId, password) {
+      return authenticatedRequest(`/superuser/subusers/${encodeURIComponent(subuserId)}/password`, "POST", { password });
+    },
+    async generateAdminLoginLink(subuserId, context = {}) {
+      return authenticatedRequest(
+        `/superuser/subusers/${encodeURIComponent(subuserId)}/login-link`,
+        "POST",
+        directLoginPayload(context)
+      );
+    },
+    async setAdminVerificationState(subuserId, channel, verified) {
+      try {
+        return await authenticatedRequest(
+          `/superuser/subusers/${encodeURIComponent(subuserId)}/verification/${encodeURIComponent(channel)}`,
+          "PATCH",
+          { verified: Boolean(verified) }
+        );
+      } catch (error) {
+        await Swal.fire({
+          title: driverContactText("verification_update_failed_title"),
+          text: apiErrorMessage(error, driverContactText("verification_update_failed")),
+          icon: "error",
+          confirmButtonText: driverContactText("close"),
+        });
+        throw error;
+      }
+    },
+    async sendAdminPasswordGuideLink(subuserId, channel, context = {}) {
+      try {
+        const response = await authenticatedRequest(
+          `/superuser/subusers/${encodeURIComponent(subuserId)}/password-guide/${encodeURIComponent(channel)}/send`,
+          "POST",
+          directLoginPayload(context)
+        );
+        await showDeliveryFeedback(response, {
+          sentTitle: driverContactText("password_guide_sent_title"),
+          notSentTitle: driverContactText("password_guide_not_sent_title"),
+        });
+        return response;
+      } catch (error) {
+        await Swal.fire({
+          title: driverContactText("password_guide_failed_title"),
+          text: apiErrorMessage(error, driverContactText("link_send_failed")),
+          icon: "error",
+          confirmButtonText: driverContactText("close"),
+        });
+        throw error;
+      }
+    },
+    async sendAdminLoginLink(subuserId, channel, context = {}) {
+      try {
+        const response = await authenticatedRequest(
+          `/superuser/subusers/${encodeURIComponent(subuserId)}/login-link/${encodeURIComponent(channel)}/send`,
+          "POST",
+          directLoginPayload(context)
+        );
+        await showDeliveryFeedback(response, {
+          sentTitle: driverContactText("login_link_sent_title"),
+          notSentTitle: driverContactText("login_link_not_sent_title"),
+        });
+        return response;
+      } catch (error) {
+        await Swal.fire({
+          title: driverContactText("login_link_failed_title"),
+          text: apiErrorMessage(error, driverContactText("link_send_failed")),
+          icon: "error",
+          confirmButtonText: driverContactText("close"),
+        });
+        throw error;
+      }
+    },
+    async resendVerificationCode(subuser, channel, refreshCallback = null, options = {}) {
+      const superuser = Boolean(options.superuser);
+      const endpoint = superuser
+        ? `/superuser/subusers/${encodeURIComponent(subuser.id)}/verification/${encodeURIComponent(channel)}/send`
+        : `/subusers/${encodeURIComponent(subuser.id)}/verification/${encodeURIComponent(channel)}/send`;
+
+      try {
+        const response = await authenticatedRequest(endpoint, "POST");
+        const payload = response?.data?.data || response?.data || {};
+        const delivery = payload.delivery || {};
+        const channelLabel = channel === "email" ? "e-mail" : "telefon";
+
+        await Swal.fire({
+          title: delivery.status === "sent" ? "Kode sendt" : "Kode kunne ikke sendes",
+          text: delivery.message || (delivery.status === "sent"
+            ? `Verifikationskode er sendt til chaufførens ${channelLabel}.`
+            : `Verifikationskode kunne ikke sendes til chaufførens ${channelLabel}.`),
+          icon: delivery.status === "sent" ? "success" : "warning",
+          confirmButtonText: "Luk",
+        });
+
+        if (typeof refreshCallback === "function") {
+          await refreshCallback();
+        }
+
+        return response;
+      } catch (error) {
+        await Swal.fire({
+          title: "Kode kunne ikke sendes",
+          text: apiErrorMessage(error, "Der opstod en fejl."),
+          icon: "error",
+          confirmButtonText: "Luk",
+        });
+        throw error;
+      }
+    },
+    async showEditNameForm(subuser, refreshCallback = null) {
+      const result = await Swal.fire({
+        title: "Redigér chaufførnavn",
+        input: "text",
+        inputLabel: "Navn",
+        inputValue: subuser?.name || "",
+        showCancelButton: true,
+        confirmButtonText: "Gem",
+        cancelButtonText: "Annuller",
+        inputValidator: (value) => {
+          const name = String(value || "").trim();
+          if (name.length < 3) {
+            return "Navn skal være mindst 3 tegn.";
+          }
+          if (name.length > 255) {
+            return "Navn må højst være 255 tegn.";
+          }
+          return null;
+        },
+        preConfirm: async (value) => {
+          try {
+            return await this.updateAdminProfile(subuser.id, { name: String(value || "").trim() });
+          } catch (error) {
+            Swal.showValidationMessage(apiErrorMessage(error, "Kunne ikke gemme navnet."));
+            return false;
+          }
+        },
+      });
+
+      if (result.isConfirmed && typeof refreshCallback === "function") {
+        await refreshCallback();
+      }
+
+      return result.value || null;
+    },
+    async showEditContactForm(subuser, refreshCallback = null) {
+      const result = await Swal.fire({
+        title: "Redigér kontaktoplysninger",
+        html: buildAdminContactFormHtml(subuser),
+        width: 640,
+        focusConfirm: false,
+        showCancelButton: true,
+        confirmButtonText: "Gem",
+        cancelButtonText: "Annuller",
+        preConfirm: async () => {
+          const values = readAdminContactFormValues();
+          if (!values) {
+            return false;
+          }
+
+          try {
+            return await this.updateAdminProfile(subuser.id, values);
+          } catch (error) {
+            Swal.showValidationMessage(apiErrorMessage(error, "Kunne ikke gemme kontaktoplysningerne."));
+            return false;
+          }
+        },
+      });
+
+      if (result.isConfirmed && typeof refreshCallback === "function") {
+        await refreshCallback();
+      }
+
+      return result.value || null;
+    },
+    async showSetPasswordForm(subuser, refreshCallback = null) {
+      const result = await Swal.fire({
+        title: "Sæt adgangskode",
+        html: buildPasswordFormHtml(),
+        width: 560,
+        focusConfirm: false,
+        showCancelButton: true,
+        confirmButtonText: "Gem",
+        cancelButtonText: "Annuller",
+        preConfirm: async () => {
+          const password = document.getElementById("subuser-admin-password")?.value || "";
+          const passwordConfirm = document.getElementById("subuser-admin-password-confirm")?.value || "";
+          const policyError = getSubuserPasswordPolicyError(password);
+
+          if (policyError) {
+            Swal.showValidationMessage(policyError);
+            return false;
+          }
+
+          if (password !== passwordConfirm) {
+            Swal.showValidationMessage("Adgangskoderne matcher ikke.");
+            return false;
+          }
+
+          try {
+            return await this.setAdminPassword(subuser.id, password);
+          } catch (error) {
+            Swal.showValidationMessage(apiErrorMessage(error, "Kunne ikke gemme adgangskoden."));
+            return false;
+          }
+        },
+      });
+
+      if (result.isConfirmed && typeof refreshCallback === "function") {
+        await refreshCallback();
+      }
+
+      return result.value || null;
+    },
+    async showDirectLoginQrCode(subuser, context = {}) {
+      try {
+        const response = await this.generateAdminLoginLink(subuser.id, context);
+        const payload = response?.data?.data || response?.data || {};
+        const loginPath = String(payload.login_path || "");
+        if (!loginPath) {
+          throw new Error("Loginlink mangler i API-svaret.");
+        }
+
+        const loginUrl = absoluteLoginLink(loginPath);
+        const { toDataURL } = await loadQRCodeModule();
+        const qrSrc = await toDataURL(loginUrl, { margin: 2, width: 240 });
+
+        return Swal.fire({
+          title: "Direkte login",
+          html: `
+            <div class="has-text-centered">
+              <img src="${escapeHtml(qrSrc)}" alt="Direkte login QR-kode" width="240" height="240" />
+              <input id="subuser-direct-login-link" class="input mt-4" type="text" readonly value="${escapeHtml(loginUrl)}" />
+            </div>
+          `,
+          showCancelButton: true,
+          confirmButtonText: "Kopiér link",
+          cancelButtonText: "Luk",
+          preConfirm: async () => {
+            await copyText(loginUrl);
+            return loginUrl;
+          },
+        });
+      } catch (error) {
+        await Swal.fire({
+          title: "Kunne ikke oprette loginlink",
+          text: apiErrorMessage(error, "Der opstod en fejl."),
+          icon: "error",
+          confirmButtonText: "Luk",
+        });
+        return null;
+      }
+    },
     async showInviteForm(refreshCallback = null, options = {}) {
       const superuser = Boolean(options.superuser);
       const userId = options.userId || null;

src/components/session/token/superUser/modules/Backups/Backups.vue

@@ -30,12 +30,47 @@ export const Backups = {
         }
     )
   },
+  getJob: async (jobId) => {
+    return authenticatedRequest(
+        `/modules/backup/jobs/${jobId}`,
+        "GET"
+    )
+  },
   listBackups: async () => {
     return authenticatedRequest(
         Backups.meta.endpoint,
         "GET"
     )
   },
+  verifyBackup: async (backupUuid) => {
+    return authenticatedRequest(
+        `${Backups.meta.endpoint}/${backupUuid}/verify`,
+        "POST"
+    )
+  },
+  previewRestore: async (backupUuid) => {
+    return authenticatedRequest(
+        `${Backups.meta.endpoint}/${backupUuid}/restore/preview`,
+        "POST"
+    )
+  },
+  restoreBackup: async (backupUuid, previewId, confirmationPhrase, reason) => {
+    return authenticatedRequest(
+        `${Backups.meta.endpoint}/${backupUuid}/restore`,
+        "POST",
+        {
+          preview_id: previewId,
+          confirmation_phrase: confirmationPhrase,
+          reason: reason
+        }
+    )
+  },
+  restoreAudit: async () => {
+    return authenticatedRequest(
+        "/modules/backup/restore-audit",
+        "GET"
+    )
+  },
 };
 
-</script>
+</script>

src/components/session/token/superUser/modules/Backups/Config.vue

@@ -42,7 +42,28 @@ export const Config = {
       set: async (enabled) => {
         return Config.set("enabled", enabled);
       },
-  },
+    },
+    retentionRecentHours: {
+      set: async (value) => Config.set("retention_recent_hours", value),
+    },
+    retentionDailyDays: {
+      set: async (value) => Config.set("retention_daily_days", value),
+    },
+    retentionWeeklyWeeks: {
+      set: async (value) => Config.set("retention_weekly_weeks", value),
+    },
+    retentionMonthlyMonths: {
+      set: async (value) => Config.set("retention_monthly_months", value),
+    },
+    appDataEnabled: {
+      set: async (enabled) => Config.set("app_data_enabled", enabled),
+    },
+    verificationRequired: {
+      set: async (enabled) => Config.set("verification_required", enabled),
+    },
+    restoreEnabled: {
+      set: async (enabled) => Config.set("restore_enabled", enabled),
+    },
 };
 
-</script>
+</script>

src/components/session/token/superUser/modules/Economic/Config.vue

@@ -34,6 +34,14 @@ export const Config = {
           return Config.set("invoiceLayoutNumber", layout);
         },
       },
+      invoiceDiscountLayoutNumber: {
+        get: async () => {
+          return Config.get("invoiceDiscountLayoutNumber");
+        },
+        set: async (layout) => {
+          return Config.set("invoiceDiscountLayoutNumber", layout);
+        },
+      },
     },
     fees: {
      adminFeeMonthly:  {

src/components/session/token/superUser/systemDatabase.vue

@@ -2,7 +2,12 @@
 export {
   SuperUserSystemStatusObject,
   DatabaseSystemObject,
+  RedisSystemObject,
+  MinioSystemObject,
   getSuperuserSystemStatus,
+  getSystemDependencyStatus,
   getSystemDatabaseStatus,
+  getSystemRedisStatus,
+  getSystemMinioStatus,
 } from "@/components/session/token/superUser/systemStatus.vue";
 </script>

src/components/session/token/superUser/systemMinio.vue

@@ -0,0 +1,8 @@
+<script>
+export {
+  SuperUserSystemStatusObject,
+  MinioSystemObject,
+  getSuperuserSystemStatus,
+  getSystemMinioStatus,
+} from "@/components/session/token/superUser/systemStatus.vue";
+</script>

src/components/session/token/superUser/systemRedis.vue

@@ -0,0 +1,8 @@
+<script>
+export {
+  SuperUserSystemStatusObject,
+  RedisSystemObject,
+  getSuperuserSystemStatus,
+  getSystemRedisStatus,
+} from "@/components/session/token/superUser/systemStatus.vue";
+</script>

src/components/session/token/superUser/systemStatus.vue

@@ -13,12 +13,15 @@ export const SuperUserSystemStatusObject = {
   runtime: computed(() => SuperUserSystemStatusObject.snapshot.value?.runtime ?? {}),
   dependencies: computed(() => SuperUserSystemStatusObject.snapshot.value?.dependencies ?? {}),
   modules: computed(() => SuperUserSystemStatusObject.snapshot.value?.modules ?? []),
-  sessions: computed(() => SuperUserSystemStatusObject.snapshot.value?.sessions ?? {
-    active_window_minutes: 15,
-    active_users: 0,
-    active_sessions: 0,
-    recent_sessions: [],
-  }),
+  sessions: computed(
+    () =>
+      SuperUserSystemStatusObject.snapshot.value?.sessions ?? {
+        active_window_minutes: 15,
+        active_users: 0,
+        active_sessions: 0,
+        recent_sessions: [],
+      }
+  ),
   warnings: computed(() => SuperUserSystemStatusObject.snapshot.value?.warnings ?? []),
   refreshAfterSeconds: computed(() => Number(SuperUserSystemStatusObject.snapshot.value?.refresh_after_seconds ?? 30)),
 };
@@ -49,15 +52,23 @@ export const getSuperuserSystemStatus = async ({ force = false } = {}) => {
   return pendingRequest.value;
 };
 
-export const DatabaseSystemObject = {
-  status: computed(() => SuperUserSystemStatusObject.dependencies.value?.database ?? null),
+const createDependencySystemObject = (key) => ({
+  status: computed(() => SuperUserSystemStatusObject.dependencies.value?.[key] ?? null),
   loading: computed(() => SuperUserSystemStatusObject.loading.value),
   error: computed(() => SuperUserSystemStatusObject.error.value),
   lastLoadedAt: computed(() => SuperUserSystemStatusObject.lastLoadedAt.value),
+});
+
+export const DatabaseSystemObject = createDependencySystemObject("database");
+export const RedisSystemObject = createDependencySystemObject("redis");
+export const MinioSystemObject = createDependencySystemObject("minio");
+
+export const getSystemDependencyStatus = async (key, { force = false } = {}) => {
+  const snapshot = await getSuperuserSystemStatus({ force });
+  return snapshot?.dependencies?.[key] ?? null;
 };
 
-export const getSystemDatabaseStatus = async ({ force = false } = {}) => {
-  const snapshot = await getSuperuserSystemStatus({ force });
-  return snapshot?.dependencies?.database ?? null;
-};
+export const getSystemDatabaseStatus = (options = {}) => getSystemDependencyStatus("database", options);
+export const getSystemRedisStatus = (options = {}) => getSystemDependencyStatus("redis", options);
+export const getSystemMinioStatus = (options = {}) => getSystemDependencyStatus("minio", options);
 </script>

src/components/session/token/superUserObject.vue

@@ -2,7 +2,11 @@
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
 import { parseError } from "@/components/request/HandleGlobalError.vue";
 import { clearEdgeGatewayWorkspaceCache } from "@/services/edgeGateways.js";
-import { DatabaseSystemObject } from "@/components/session/token/superUser/systemDatabase.vue";
+import {
+  DatabaseSystemObject,
+  RedisSystemObject,
+  MinioSystemObject,
+} from "@/components/session/token/superUser/systemDatabase.vue";
 import { Cron } from "@/components/session/token/superUser/cron.vue";
 import { Economic } from "@/components/session/token/superUser/modules/Economic/Economic.vue";
 import { reCAPTCHA } from "@/components/session/token/superUser/modules/reCAPTCHA/reCAPTCHA.vue";
@@ -20,7 +24,7 @@ import { Limble } from "@/components/session/token/superUser/modules/limble/Limb
 import { OcrSpace } from "@/components/session/token/superUser/modules/ocrSpace/OcrSpace.vue";
 import { OpenAI } from "@/components/session/token/superUser/modules/openAI/OpenAI.vue";
 import { LicensePlateRecognizer } from "@/components/session/token/superUser/modules/licensePlateRecognizer/LicensePlateRecognizer.vue";
-import { VirkData} from "@/components/session/token/superUser/modules/virkdata/VirkData.vue";
+import { VirkData } from "@/components/session/token/superUser/modules/virkdata/VirkData.vue";
 import { Shelly } from "@/components/session/token/superUser/modules/shelly/Shelly.vue";
 import { SelfServe } from "@/components/session/token/superUser/modules/selfserve/SelfServe.vue";
 import { Bird } from "@/components/session/token/superUser/modules/bird/Bird.vue";
@@ -40,40 +44,97 @@ const loadQRCodeModule = async () => {
   return qrCodeModulePromise;
 };
 
-
 /**
  * The superuser object
  */
 export const SuperUserObject = {
   system: {
-    get database() { return DatabaseSystemObject; },
+    get database() {
+      return DatabaseSystemObject;
+    },
+    get redis() {
+      return RedisSystemObject;
+    },
+    get minio() {
+      return MinioSystemObject;
+    },
   },
   modules: {
-    get economic() { return Economic; },
-    get reCAPTCHA() { return reCAPTCHA; },
-    get email() { return Email; },
-    get backups() { return Backups; },
-    get motorapi() { return MotorAPI; },
-    get stripe() { return Stripe; },
-    get fxratesapi() { return FXRatesAPI; },
-    get weatherapi() { return WeatherAPI; },
-    get workfeed() { return Workfeed; },
-    get gatewayapi() { return GatewayAPI; },
-    get xlvask() { return XLVask; },
-    get entra() { return Entra; },
-    get limble() { return Limble; },
-    get ocrspace() { return OcrSpace; },
-    get openai() { return OpenAI; },
-    get licenseplaterecognizer() { return LicensePlateRecognizer; },
-    get virkdata() { return VirkData; },
-    get shelly() { return Shelly; },
-    get selfserve() { return SelfServe; },
-    get bird() { return Bird; },
-    get edgegateway() { return EdgeGateway; },
-    get failover() { return Failover; },
-    get coolify() { return Coolify; },
-    get releasemanager() { return ReleaseManager; },
-    get slack() { return Slack; },
+    get economic() {
+      return Economic;
+    },
+    get reCAPTCHA() {
+      return reCAPTCHA;
+    },
+    get email() {
+      return Email;
+    },
+    get backups() {
+      return Backups;
+    },
+    get motorapi() {
+      return MotorAPI;
+    },
+    get stripe() {
+      return Stripe;
+    },
+    get fxratesapi() {
+      return FXRatesAPI;
+    },
+    get weatherapi() {
+      return WeatherAPI;
+    },
+    get workfeed() {
+      return Workfeed;
+    },
+    get gatewayapi() {
+      return GatewayAPI;
+    },
+    get xlvask() {
+      return XLVask;
+    },
+    get entra() {
+      return Entra;
+    },
+    get limble() {
+      return Limble;
+    },
+    get ocrspace() {
+      return OcrSpace;
+    },
+    get openai() {
+      return OpenAI;
+    },
+    get licenseplaterecognizer() {
+      return LicensePlateRecognizer;
+    },
+    get virkdata() {
+      return VirkData;
+    },
+    get shelly() {
+      return Shelly;
+    },
+    get selfserve() {
+      return SelfServe;
+    },
+    get bird() {
+      return Bird;
+    },
+    get edgegateway() {
+      return EdgeGateway;
+    },
+    get failover() {
+      return Failover;
+    },
+    get coolify() {
+      return Coolify;
+    },
+    get releasemanager() {
+      return ReleaseManager;
+    },
+    get slack() {
+      return Slack;
+    },
   },
   /** Intimidate a user */
   intimidate: {
@@ -83,18 +144,14 @@ export const SuperUserObject = {
      * @returns {Promise<string>} The impersonation token
      */
     getImpersonationToken: async (userId) => {
-      return await authenticatedRequest("/su/intimidate", "POST", {user_id: userId})
-          .then(
-              (response) => {
-                // Return the token
-                return response.data.data.token;
-              }
-          )
-          .catch(
-              (error) => {
-                parseError(error, 'auth');
-              }
-          );
+      return await authenticatedRequest("/su/intimidate", "POST", { user_id: userId })
+        .then((response) => {
+          // Return the token
+          return response.data.data.token;
+        })
+        .catch((error) => {
+          parseError(error, "auth");
+        });
     },
     /**
      * Intimidate a user
@@ -102,24 +159,20 @@ export const SuperUserObject = {
      * @returns {Promise<void>}
      */
     intimidateUser: async (userId) => {
-      return await authenticatedRequest("/su/intimidate", "POST", {user_id: userId})
-          .then(
-              (response) => {
-                // Save the current token, so we can restore it after the user has been intimidated
-                const currentToken = localStorage.getItem("token");
-                localStorage.setItem("superuser_token", currentToken);
-                // Set the token in the local storage
-                clearEdgeGatewayWorkspaceCache();
-                localStorage.setItem("token", response.data.data.token);
-                // Redirect the user to the dashboard
-                window.location = "/";
-              }
-          )
-          .catch(
-              (error) => {
-                parseError(error, 'auth');
-              }
-          );
+      return await authenticatedRequest("/su/intimidate", "POST", { user_id: userId })
+        .then((response) => {
+          // Save the current token, so we can restore it after the user has been intimidated
+          const currentToken = localStorage.getItem("token");
+          localStorage.setItem("superuser_token", currentToken);
+          // Set the token in the local storage
+          clearEdgeGatewayWorkspaceCache();
+          localStorage.setItem("token", response.data.data.token);
+          // Redirect the user to the dashboard
+          window.location = "/";
+        })
+        .catch((error) => {
+          parseError(error, "auth");
+        });
     },
     /**
      * Can the current superuser intimidate another superuser?
@@ -160,8 +213,10 @@ export const SuperUserObject = {
      */
     isIntimidated: () => {
       return localStorage.getItem("superuser_token") !== null;
-    }
+    },
+  },
+  get cron() {
+    return Cron;
   },
-  get cron() { return Cron; }
 };
 </script>

src/components/shop/POSDepartmentProcess.vue

@@ -13,8 +13,8 @@ import { doesOrderContainWashCertificateProduct } from "@/components/displays/de
 import {
   getCustomerProductRestriction,
   getProductCategoryRestrictionForCustomer,
+  hasValidCustomerProductRestrictionContract,
   isProductCategoryRestrictedForCustomer,
-  isProductRestrictedForCustomer,
 } from "@/features/customer/customerProductRules.js";
 import Swal from "sweetalert2";
 
@@ -278,6 +278,8 @@ export const reg_3 = ref(""); // Only uppercase letters and numbers without spac
 export const order_id = ref(null);
 export const order_items = ref([]);
 export const customer_attributes = ref([]);
+export const customer_attributes_status = ref("idle");
+export const customer_attributes_error = ref(null);
 export const user_discounts = ref([]);
 const has_user_discounts_loaded = ref(false);
 export const scan_data = ref([]);
@@ -285,6 +287,7 @@ export const invoiceCollectionId = ref(null);
 export const completed_at = ref(null);
 let latestCustomerNotesRequestId = 0;
 let activeCustomerNotesCustomerNumber = null;
+let latestCustomerAttributesRequestId = 0;
 
 const toPositiveInteger = (value) => {
   const parsed = Number.parseInt(String(value), 10);
@@ -546,6 +549,9 @@ const clearSelectedCustomerState = (options = {}) => {
   customer_name.value = "";
   customer_data.value = [];
   customer_attributes.value = [];
+  customer_attributes_status.value = "idle";
+  customer_attributes_error.value = null;
+  latestCustomerAttributesRequestId += 1;
   notes.value = [];
   user_discounts.value = [];
   has_user_discounts_loaded.value = false;
@@ -1577,23 +1583,65 @@ export const loadCustomerAttributes = async (customerNumber = customer_id.value)
   const normalizedCustomerNumber = resolveCustomerNumber(customerNumber);
   if (!normalizedCustomerNumber) {
     customer_attributes.value = [];
+    customer_attributes_status.value = "idle";
+    customer_attributes_error.value = null;
     return customer_attributes.value;
   }
 
-  const response = await getAttributes(normalizedCustomerNumber);
+  const requestId = ++latestCustomerAttributesRequestId;
+  customer_attributes.value = [];
+  customer_attributes_status.value = "loading";
+  customer_attributes_error.value = null;
+
   try {
-    if (!response.data.success) {
+    const response = await getAttributes(normalizedCustomerNumber);
+    if (
+      requestId !== latestCustomerAttributesRequestId ||
+      getSelectedCustomerNumber() !== normalizedCustomerNumber
+    ) {
       return customer_attributes.value;
     }
-  } catch (e) {
+
+    if (
+      !response?.data?.success
+      || !Array.isArray(response?.data?.data)
+      || !hasValidCustomerProductRestrictionContract(response.data.data)
+    ) {
+      throw new Error("Customer attributes response was invalid");
+    }
+
+    customer_attributes.value = response.data.data;
+    customer_attributes_status.value = "ready";
     return customer_attributes.value;
+  } catch (error) {
+    if (
+      requestId === latestCustomerAttributesRequestId &&
+      getSelectedCustomerNumber() === normalizedCustomerNumber
+    ) {
+      customer_attributes.value = [];
+      customer_attributes_status.value = "error";
+      customer_attributes_error.value = error;
+    }
+    return customer_attributes.value;
+  }
+};
+
+export const retryCustomerAttributes = () => loadCustomerAttributes(customer_id.value);
+
+const getCustomerAttributeReadinessRestriction = () => {
+  if (!getSelectedCustomerNumber() || customer_attributes_status.value === "ready") {
+    return null;
   }
 
-  if (getSelectedCustomerNumber() !== normalizedCustomerNumber) {
-    return customer_attributes.value;
-  }
-  customer_attributes.value = response.data.data;
-  return customer_attributes.value;
+  const isLoadFailure = customer_attributes_status.value === "error";
+  return {
+    restricted: true,
+    rule: null,
+    rules: [],
+    collections: [],
+    messageKey: isLoadFailure ? "pos.restrictions.load_failed" : "pos.restrictions.loading",
+    reason: isLoadFailure ? "customer-attributes-error" : "customer-attributes-loading",
+  };
 };
 
 /** Check if an attribute is set in the customer attributes */
@@ -1665,17 +1713,22 @@ export const hasOnlyTankCleaning = () => {
 
 /** Check if a product is restricted based on customer attributes */
 export const getProductRestriction = (product, options = {}) => {
+  const readinessRestriction = getCustomerAttributeReadinessRestriction();
+  if (readinessRestriction) {
+    return readinessRestriction;
+  }
   return getCustomerProductRestriction(product, customer_attributes.value, options);
 };
 
 export const isProductRestricted = (product, options = {}) => {
-  return isProductRestrictedForCustomer(product, customer_attributes.value, options);
+  return getProductRestriction(product, options).restricted;
 };
 
 const getAddonProductForRestriction = (addon) => {
   const addonProduct = addon?.product || addon || {};
   return {
     ...addonProduct,
+    id: addon?.option_id ?? addonProduct.id ?? addon?.product_id ?? addon?.id,
     name: addon?.name || addonProduct.name,
     category: addonProduct.category ?? addon?.category,
     category_name: addonProduct.category_name ?? addon?.category_name,
@@ -1684,6 +1737,10 @@ const getAddonProductForRestriction = (addon) => {
 
 /** Check if an addon is restricted based on customer attributes */
 export const getAddonRestriction = (addon, options = {}) => {
+  const readinessRestriction = getCustomerAttributeReadinessRestriction();
+  if (readinessRestriction) {
+    return readinessRestriction;
+  }
   return getCustomerProductRestriction(getAddonProductForRestriction(addon), customer_attributes.value, {
     includeNumericAddonCategory: true,
     isRelatedAddon: true,

src/components/viewport/elements/controls/ControlSelectAmount.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 
+import { BTooltip } from "buefy";
 
 const props = defineProps({
   quantity: {
@@ -18,6 +19,14 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  restrictionMessage: {
+    type: String,
+    default: "",
+  },
 });
 
 const isBelow = (value: number, limit: number): boolean => {
@@ -28,21 +37,81 @@ const isBelow = (value: number, limit: number): boolean => {
 <template>
   <div class="control-select-amount">
     <!-- Minus Button -->
-    <button class="modify-button"
+    <BTooltip
+      v-if="props.disabled"
+      :label="props.restrictionMessage"
+      :triggers="['hover', 'focus', 'click']"
+      multilined
+      position="is-top"
+      type="is-dark"
+      append-to-body
+    >
+      <span
+        class="control-select-amount__tooltip-trigger"
+        tabindex="0"
+        :data-testid="props.testIdPrefix ? `${props.testIdPrefix}-restriction-tooltip-decrease` : undefined"
+      >
+        <button
+          class="modify-button"
+          :data-testid="props.testIdPrefix ? `${props.testIdPrefix}-decrease` : undefined"
+          disabled
+          aria-label="Decrease amount"
+        >
+          -
+        </button>
+      </span>
+    </BTooltip>
+    <button
+      v-else
+      class="modify-button"
             :data-testid="props.testIdPrefix ? `${props.testIdPrefix}-decrease` : undefined"
             :disabled="props.quantity <= 0"
             @click="$emit('update:quantity', isBelow(props.quantity - 1, props.min) ? 0 : props.quantity - 1)"
-            aria-label="Decrease amount">
+      aria-label="Decrease amount"
+    >
       -
     </button>
     <!-- Amount Display -->
-    <button class="amount-display" :data-testid="props.testIdPrefix ? `${props.testIdPrefix}-value` : undefined">{{ props.quantity }}</button>
+    <button
+      class="amount-display"
+      :data-testid="props.testIdPrefix ? `${props.testIdPrefix}-value` : undefined"
+      :disabled="props.disabled"
+    >
+      {{ props.quantity }}
+    </button>
     <!-- Plus Button -->
-    <button class="modify-button"
+    <BTooltip
+      v-if="props.disabled"
+      :label="props.restrictionMessage"
+      :triggers="['hover', 'focus', 'click']"
+      multilined
+      position="is-top"
+      type="is-dark"
+      append-to-body
+    >
+      <span
+        class="control-select-amount__tooltip-trigger"
+        tabindex="0"
+        :data-testid="props.testIdPrefix ? `${props.testIdPrefix}-restriction-tooltip-increase` : undefined"
+      >
+        <button
+          class="modify-button"
+          :data-testid="props.testIdPrefix ? `${props.testIdPrefix}-increase` : undefined"
+          disabled
+          aria-label="Increase amount"
+        >
+          +
+        </button>
+      </span>
+    </BTooltip>
+    <button
+      v-else
+      class="modify-button"
             :data-testid="props.testIdPrefix ? `${props.testIdPrefix}-increase` : undefined"
             :disabled="props.max !== -1 && props.quantity >= props.max"
             @click="$emit('update:quantity', isBelow(props.quantity + 1, props.min) ? props.min : props.quantity + 1)"
-            aria-label="Increase amount">
+      aria-label="Increase amount"
+    >
       +
     </button>
   </div>
@@ -73,6 +142,9 @@ const isBelow = (value: number, limit: number): boolean => {
   flex-grow: 0;
 
 }
+.control-select-amount__tooltip-trigger {
+  display: inline-flex;
+}
 .modify-button {
   /* - */