Add mocks for department daily report components and update Vitest configuration for SCSS

Updated all GitHub Actions workflows to use self-hosted runners instead of `ubuntu-latest`. This change ensures better control over the CI environment and aligns with internal infrastructure requirements.

.claude/settings.local.json

@@ -0,0 +1,11 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(find /c/Users/2jepp/WebstormProjects/pleno-vue -type f \\\\\\(-name *.ts -o -name *.js \\\\\\) -not -path */node_modules* -not -path */dist/* -not -path */.git/* -not -path */dev-dist/*)",
+      "Bash(find /c/Users/2jepp/WebstormProjects/pleno-vue/src -type f \\\\\\(-name *.ts -o -name *.js -o -name *.vue \\\\\\))",
+      "Bash(find /c/Users/2jepp/WebstormProjects/pleno-vue/app -type f \\\\\\(-name *.ts -o -name *.js -o -name *.java -o -name *.kt \\\\\\))",
+      "Bash(grep -r \"getAutomaticFlags\\\\|AutomaticFlags\\\\|automaticFlags\\\\|Automatic.*Flags\" /c/Users/2jepp/WebstormProjects/pleno-vue --include=*.ts --include=*.js --include=*.java --include=*.kt --exclude-dir=node_modules --exclude-dir=dist --exclude-dir=dev-dist --exclude-dir=output --exclude-dir=.git)",
+      "Bash(xargs grep:*)"
+    ]
+  }
+}

.dockerignore

@@ -0,0 +1,17 @@
+.github
+.idea
+.vscode
+coverage
+dev-dist
+dist
+node_modules
+node_modules.*
+output
+playwright-report
+test-results
+.ai
+.ai-workflow
+.claude
+.codex
+.gradle
+gradle

.gitattributes

@@ -0,0 +1,15 @@
+* text=auto eol=lf
+
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.ico binary
+*.webp binary
+*.woff binary
+*.woff2 binary
+*.ttf binary
+*.otf binary
+*.pdf binary
+*.zip binary
+*.webm binary

.github/workflows/code quality.yml

@@ -9,7 +9,7 @@ on:
 
 jobs:
   upload-qodana-config:
-    runs-on: ubuntu-latest
+    runs-on: [self-hosted, Linux, X64, default]
 
     steps:
       - name: Checkout repository

.github/workflows/code_quality.yml

@@ -9,7 +9,7 @@ on:
 
 jobs:
   upload-qodana-config:
-    runs-on: ubuntu-latest
+    runs-on: [self-hosted, Linux, X64, default]
 
     steps:
       - name: Checkout repository

.github/workflows/release.yml

@@ -0,0 +1,123 @@
+name: Frontend Release
+
+on:
+  push:
+    branches:
+      - master
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  actions: read
+
+concurrency:
+  group: frontend-release-${{ github.ref }}
+  cancel-in-progress: false
+
+jobs:
+  build-upload-and-verify:
+    runs-on: [self-hosted, Linux, X64, default]
+    env:
+      RELEASE_BASE_URL: https://api-v2.truckwash.io/master/frontend
+      PLAYWRIGHT_BASE_URL: https://api-v2.truckwash.io/master/frontend
+      PLAYWRIGHT_RELEASE_API_BASE_URL: https://api-v2.truckwash.io
+      PLAYWRIGHT_RELEASE_API_PING_PATHS: /ping,/master/api/ping,/canary/api/ping,/stable/api/ping
+      RELEASE_BUILD_ID: ${{ github.run_id }}-${{ github.run_attempt }}
+      RELEASE_EXPECTED_BUILD_ID: ${{ github.run_id }}-${{ github.run_attempt }}
+      RELEASE_EXPECTED_COMMIT: ${{ github.sha }}
+      RELEASE_WAIT_INITIAL_SECONDS: 45
+      RELEASE_WAIT_TIMEOUT_SECONDS: 600
+      RELEASE_POLL_INTERVAL_SECONDS: 10
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+
+      - name: Check AI workflow sync
+        run: node scripts/sync-ai-workflow.mjs --check
+
+      - name: Source and i18n checks
+        run: |
+          npm run text:check-encoding
+          npm run i18n:v2:source-check
+
+      - name: Unit tests
+        run: npm run test:unit
+        env:
+          VITEST_BATCH_SIZE: 5
+
+      - name: Build release artifact
+        run: npm run build
+
+      - name: Install Playwright Chromium
+        run: npx playwright install --with-deps chromium
+
+      - name: Production Playwright gate
+        run: npm run test:e2e:prod
+
+      - name: Upload dist artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: frontend-dist-${{ env.RELEASE_BUILD_ID }}
+          path: dist
+          retention-days: 14
+
+      - name: Wait for Coolify release artifact
+        run: npm run release:verify-upload
+
+      - name: Public live Playwright gate
+        run: npm run test:e2e:live:public
+        env:
+          NODE_OPTIONS: --use-system-ca
+
+      - name: Credentialed live Playwright gate
+        run: npm run test:e2e:live:roles
+        env:
+          NODE_OPTIONS: --use-system-ca
+          PLAYWRIGHT_REQUIRE_LIVE_CREDENTIALS: "true"
+          PLAYWRIGHT_USER_CUSTOMER_NUMBER: ${{ secrets.PLAYWRIGHT_USER_CUSTOMER_NUMBER }}
+          PLAYWRIGHT_USER_PASSWORD: ${{ secrets.PLAYWRIGHT_USER_PASSWORD }}
+          PLAYWRIGHT_USER_OTP_SECRET: ${{ secrets.PLAYWRIGHT_USER_OTP_SECRET }}
+          PLAYWRIGHT_OPERATOR_USER_ID: ${{ secrets.PLAYWRIGHT_OPERATOR_USER_ID }}
+          PLAYWRIGHT_OPERATOR_PASSWORD: ${{ secrets.PLAYWRIGHT_OPERATOR_PASSWORD }}
+          PLAYWRIGHT_DEPARTMENT_ID: ${{ secrets.PLAYWRIGHT_DEPARTMENT_ID }}
+
+      - name: Record Release Manager gate
+        run: |
+          test -n "$RELEASE_MANAGER_GATE_TOKEN" || (echo "RELEASE_MANAGER_GATE_TOKEN is required" >&2; exit 1)
+          curl --fail --show-error --silent \
+            -X POST "$RELEASE_MANAGER_GATE_URL" \
+            -H "Authorization: Bearer $RELEASE_MANAGER_GATE_TOKEN" \
+            -H "Content-Type: application/json" \
+            --data "{\"environment_url\":\"$RELEASE_BASE_URL\",\"channel_slug\":\"stable\",\"app\":\"frontend\",\"repository\":\"$RELEASE_REPOSITORY\",\"branch\":\"$RELEASE_BRANCH\",\"expected_commit\":\"$RELEASE_EXPECTED_COMMIT\",\"build_id\":\"$RELEASE_EXPECTED_BUILD_ID\",\"workflow_url\":\"$RELEASE_WORKFLOW_URL\",\"auto_sync\":true,\"wait_timeout_seconds\":300,\"poll_interval_seconds\":10,\"required_checks\":[\"static_artifact\",\"api_gateway\"]}"
+        env:
+          RELEASE_MANAGER_GATE_URL: ${{ secrets.RELEASE_MANAGER_GATE_URL || 'https://api.truckwash.io/release/gate/test-runs' }}
+          RELEASE_MANAGER_GATE_TOKEN: ${{ secrets.RELEASE_MANAGER_GATE_TOKEN }}
+          RELEASE_REPOSITORY: ${{ github.repository }}
+          RELEASE_BRANCH: ${{ github.ref_name }}
+          RELEASE_WORKFLOW_URL: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
+
+      - name: Update server version after verification
+        run: npm run release:update-server-version
+        env:
+          SERVER_UPDATE_TOKEN: ${{ secrets.SERVER_UPDATE_TOKEN }}
+          RELEASE_VERSION: ${{ github.sha }}
+
+      - name: Upload Playwright report
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: frontend-release-playwright-${{ env.RELEASE_BUILD_ID }}
+          path: output/playwright
+          if-no-files-found: ignore
+          retention-days: 14

.github/workflows/tests.yml

@@ -16,7 +16,7 @@ concurrency:
 
 jobs:
   format-tests:
-    # Match the labels exposed by the Coolify-managed GitHub runner.
+    # CI runs on the repository's self-hosted runner pool.
     runs-on: [self-hosted, Linux, X64, default]
     steps:
       - name: Checkout repository
@@ -61,17 +61,38 @@ jobs:
         env:
           VITEST_BATCH_SIZE: 5
 
-  e2e-smoke:
+  e2e-pr:
     if: github.event_name != 'schedule'
     needs: build-and-unit
     runs-on: [self-hosted, Linux, X64, default]
-    strategy:
-      fail-fast: false
-      matrix:
-        project: [chromium-desktop, chromium-mobile]
     steps:
       - name: Checkout repository
         uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+
+      - name: Resolve Playwright diff refs
+        id: playwright-diff
+        shell: bash
+        env:
+          DEFAULT_BRANCH: ${{ github.event.repository.default_branch }}
+          EVENT_NAME: ${{ github.event_name }}
+          HEAD_SHA: ${{ github.sha }}
+          PR_BASE_SHA: ${{ github.event.pull_request.base.sha }}
+          PUSH_BEFORE_SHA: ${{ github.event.before }}
+        run: |
+          set -euo pipefail
+          zero_sha="0000000000000000000000000000000000000000"
+          if [[ "$EVENT_NAME" == "pull_request" && -n "$PR_BASE_SHA" ]]; then
+            base_ref="$PR_BASE_SHA"
+          elif [[ -z "$PUSH_BEFORE_SHA" || "$PUSH_BEFORE_SHA" == "$zero_sha" ]]; then
+            git fetch --no-tags --prune origin "$DEFAULT_BRANCH"
+            base_ref="origin/$DEFAULT_BRANCH"
+          else
+            base_ref="$PUSH_BEFORE_SHA"
+          fi
+          echo "base=$base_ref" >> "$GITHUB_OUTPUT"
+          echo "head=$HEAD_SHA" >> "$GITHUB_OUTPUT"
 
       - name: Setup Node.js
         uses: actions/setup-node@v5
@@ -85,17 +106,15 @@ jobs:
       - name: Install Playwright browsers
         run: npx playwright install --with-deps chromium
 
-      - name: Run Playwright smoke tests (${{ matrix.project }})
-        run: npx playwright test --grep @smoke --project="${{ matrix.project }}"
+      - name: Run Playwright PR tests
+        run: npm run test:e2e:pr -- --base="${{ steps.playwright-diff.outputs.base }}" --head="${{ steps.playwright-diff.outputs.head }}"
 
       - name: Upload Playwright report
         if: failure()
         uses: actions/upload-artifact@v4
         with:
-          name: playwright-report-smoke-${{ matrix.project }}
-          path: |
-            output/playwright/report
-            output/playwright/test-results
+          name: playwright-report-pr
+          path: output/playwright
           if-no-files-found: ignore
           retention-days: 7
 

.junie/memory/language.json

@@ -0,0 +1 @@
+[]

.junie/memory/memory.version

@@ -0,0 +1 @@
+3.0

Dockerfile.coolify-frontend

@@ -0,0 +1,26 @@
+FROM node:24-alpine AS build
+
+WORKDIR /app
+
+RUN apk add --no-cache git
+
+COPY package*.json ./
+RUN npm ci --ignore-scripts
+
+COPY . .
+ARG SOURCE_COMMIT
+ARG RELEASE_COMMIT_SHA
+ARG COMMIT_SHA
+ARG GITHUB_SHA
+ENV SOURCE_COMMIT=$SOURCE_COMMIT
+ENV RELEASE_COMMIT_SHA=$RELEASE_COMMIT_SHA
+ENV COMMIT_SHA=$COMMIT_SHA
+ENV GITHUB_SHA=$GITHUB_SHA
+RUN npm run build
+
+FROM nginx:1.27-alpine
+
+COPY nginx.coolify-frontend.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+
+EXPOSE 80

README.md

@@ -22,6 +22,36 @@ npm install
 npm run dev
 ```
 
+By default, the Vite dev server proxies `/api/*` to the remote stable API at
+`https://api-v2.truckwash.io/master/api`. This lets the Vue app run locally
+without a local PHP API container.
+
+To develop against a local PHP API instead:
+
+```powershell
+$env:VITE_API_PROXY_TARGET="http://localhost"; npm run dev
+```
+
+To use another remote API route:
+
+```powershell
+$env:VITE_API_PROXY_BASE_PATH="/canary/api"; npm run dev
+```
+
+TLS certificate validation is enabled for proxied HTTPS APIs by default. If you
+are using a trusted local HTTPS API with a self-signed certificate, you can opt
+out explicitly:
+
+```powershell
+$env:VITE_API_PROXY_TARGET="https://local-api.test"; $env:VITE_API_PROXY_SECURE="false"; npm run dev
+```
+
+For compatible local gateways that expect the `/api` prefix to be preserved:
+
+```powershell
+$env:VITE_API_PROXY_TARGET="http://localhost"; $env:VITE_API_PROXY_STRIP_PREFIX="false"; npm run dev
+```
+
 ### Compile and Minify for Production
 
 ```sh

env.d.ts

@@ -5,6 +5,7 @@ interface ImportMetaEnv {
     readonly VITE_APP_VERSION: string,
     readonly VITE_COMMIT_HASH: string,
     readonly VITE_IS_DEV: string,
+    readonly VITE_RELEASE_SOURCE: 'local' | 'deployment' | 'auto',
 }
 interface ImportMeta {
     readonly env: ImportMetaEnv

index.html

@@ -2,11 +2,10 @@
 <html lang="" class="theme-light" data-theme="light">
 <head>
     <meta charset="UTF-8">
-    <link rel="icon" type="image/png" href="/favicons/favicon-96x96.png" sizes="96x96" />
-    <link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" />
-    <link rel="shortcut icon" href="/favicons/favicon.ico" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
-    <link rel="manifest" href="/manifest.json" />
+    <link rel="icon" type="image/png" href="/assets/favicons/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/assets/favicons/favicon.svg" />
+    <link rel="shortcut icon" href="/assets/favicons/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png" />
     <meta name="apple-mobile-web-app-title" content="Truck Wash Kundeportal" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta name="apple-mobile-web-app-capable" content="yes">
@@ -16,6 +15,6 @@
 </head>
 <body>
 <div id="app"></div>
-<script type="module" src="/src/main.js"></script>
+<script type="module" src="/src/releaseBootstrap.js"></script>
 </body>
 </html>

nginx.coolify-frontend.conf

@@ -0,0 +1,67 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    add_header Content-Security-Policy "frame-ancestors 'self'" always;
+    add_header X-Frame-Options "SAMEORIGIN" always;
+
+    location ~ ^/(release-entry|release-manifest)\.json$ {
+        add_header Cache-Control "no-store";
+        add_header Content-Security-Policy "frame-ancestors 'self'" always;
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        try_files $uri =404;
+    }
+
+    location ~ ^/(master|beta|canary|internal)/frontend/(release-entry|release-manifest)\.json$ {
+        add_header Cache-Control "no-store";
+        add_header Content-Security-Policy "frame-ancestors 'self'" always;
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        try_files /$2.json =404;
+    }
+
+    location ~ ^/(?:.+/)?(?<static_asset_path>(?:assets|resources|favicons|icons|img|sounds|\.well-known)/.+)$ {
+        add_header Cache-Control "public, max-age=31536000, immutable";
+        add_header Content-Security-Policy "frame-ancestors 'self'" always;
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        try_files /$static_asset_path =404;
+    }
+
+    location ~ ^/(?:.+/)?(?<static_file_path>manifest\.json|manifest\.webmanifest|favicon\.ico|favicon_default\.ico|pleno-favicon\.ico|release-entry\.json|release-manifest\.json|registerSW\.js|sw\.js|workbox-[^/]+\.js)$ {
+        try_files /$static_file_path =404;
+    }
+
+    location ~ \.[^/]+$ {
+        try_files $uri =404;
+    }
+
+    location /assets/ {
+        add_header Cache-Control "public, max-age=31536000, immutable";
+        add_header Content-Security-Policy "frame-ancestors 'self'" always;
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        try_files $uri =404;
+    }
+
+    location ~ ^/(master|beta|canary|internal)/frontend/assets/ {
+        add_header Cache-Control "public, max-age=31536000, immutable";
+        add_header Content-Security-Policy "frame-ancestors 'self'" always;
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        rewrite ^/(master|beta|canary|internal)/frontend/(.*)$ /$2 break;
+        try_files $uri =404;
+    }
+
+    location ~ ^/(master|beta|canary|internal)/frontend$ {
+        try_files /index.html =404;
+    }
+
+    location ~ ^/(master|beta|canary|internal)/frontend/ {
+        rewrite ^/(master|beta|canary|internal)/frontend/(.*)$ /$2 break;
+        try_files $uri $uri/ /index.html;
+    }
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

package-lock.json

@@ -7,7 +7,6 @@
     "": {
       "name": "truckwashdashboardsfrontend",
       "version": "0.0.0",
-      "hasInstallScript": true,
       "dependencies": {
         "@azure/msal-browser": "^4.12.0",
         "@bubblewrap/cli": "^1.23.0",
@@ -41,6 +40,8 @@
         "chart.js": "^4.4.7",
         "dayspan-vuetify": "^0.4.0",
         "flow": "^0.2.3",
+        "html2canvas": "^1.4.1",
+        "pinia": "^3.0.4",
         "qrcode": "^1.5.4",
         "sass": "^1.81.1",
         "sweetalert2": "11.22.4",
@@ -232,7 +233,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -1930,6 +1930,16 @@
         }
       }
     },
+    "node_modules/@bubblewrap/core/node_modules/inquirer/node_modules/@types/node": {
+      "version": "25.9.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.1.tgz",
+      "integrity": "sha512-xfrlY7UD5rMJk3ZVJP8BNzS28J36YJg+xp+LPXV1TdWxr8uMH5A860QNxYDGQe/ylDSgjxE52Q9VnO7p75tJxg==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "undici-types": ">=7.24.0 <7.24.7"
+      }
+    },
     "node_modules/@bubblewrap/core/node_modules/mute-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-1.0.0.tgz",
@@ -1949,11 +1959,12 @@
       }
     },
     "node_modules/@bubblewrap/core/node_modules/undici-types": {
-      "version": "7.19.2",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.19.2.tgz",
-      "integrity": "sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg==",
+      "version": "7.24.6",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.24.6.tgz",
+      "integrity": "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==",
       "license": "MIT",
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/@bubblewrap/validator": {
       "version": "1.22.0",
@@ -2076,7 +2087,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       },
@@ -2125,7 +2135,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       }
@@ -2563,7 +2572,6 @@
       "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.20.tgz",
       "integrity": "sha512-1cukXLlePFiJ8YKXn/4tMKsy0etxYLCkXk8nUCFi11nRONF2Ba2CD5b21/ovtOO2tL6afTJfwmc1ed3HG7eB1g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "preact": "~10.12.1"
       }
@@ -2807,7 +2815,6 @@
       "resolved": "https://registry.npmjs.org/@jimp/custom/-/custom-0.22.12.tgz",
       "integrity": "sha512-xcmww1O/JFP2MrlGUMd3Q78S3Qu6W3mYTXYuIqFq33EorgYHV/HqymHfXy9GjiCJ7OI+7lWx6nYFOzU7M4rd1Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jimp/core": "^0.22.12"
       }
@@ -2844,7 +2851,6 @@
       "resolved": "https://registry.npmjs.org/@jimp/plugin-blit/-/plugin-blit-0.22.12.tgz",
       "integrity": "sha512-xslz2ZoFZOPLY8EZ4dC29m168BtDx95D6K80TzgUi8gqT7LY6CsajWO0FAxDwHz6h0eomHMfyGX0stspBrTKnQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jimp/utils": "^0.22.12"
       },
@@ -2857,7 +2863,6 @@
       "resolved": "https://registry.npmjs.org/@jimp/plugin-blur/-/plugin-blur-0.22.12.tgz",
       "integrity": "sha512-S0vJADTuh1Q9F+cXAwFPlrKWzDj2F9t/9JAbUvaaDuivpyWuImEKXVz5PUZw2NbpuSHjwssbTpOZ8F13iJX4uw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jimp/utils": "^0.22.12"
       },
@@ -2882,7 +2887,6 @@
       "resolved": "https://registry.npmjs.org/@jimp/plugin-color/-/plugin-color-0.22.12.tgz",
       "integrity": "sha512-xImhTE5BpS8xa+mAN6j4sMRWaUgUDLoaGHhJhpC+r7SKKErYDR0WQV4yCE4gP+N0gozD0F3Ka1LUSaMXrn7ZIA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jimp/utils": "^0.22.12",
         "tinycolor2": "^1.6.0"
@@ -2926,7 +2930,6 @@
       "resolved": "https://registry.npmjs.org/@jimp/plugin-crop/-/plugin-crop-0.22.12.tgz",
       "integrity": "sha512-FNuUN0OVzRCozx8XSgP9MyLGMxNHHJMFt+LJuFjn1mu3k0VQxrzqbN06yIl46TVejhyAhcq5gLzqmSCHvlcBVw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jimp/utils": "^0.22.12"
       },
@@ -3050,7 +3053,6 @@
       "resolved": "https://registry.npmjs.org/@jimp/plugin-resize/-/plugin-resize-0.22.12.tgz",
       "integrity": "sha512-3NyTPlPbTnGKDIbaBgQ3HbE6wXbAlFfxHVERmrbqAi8R3r6fQPxpCauA8UVDnieg5eo04D0T8nnnNIX//i/sXg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jimp/utils": "^0.22.12"
       },
@@ -3063,7 +3065,6 @@
       "resolved": "https://registry.npmjs.org/@jimp/plugin-rotate/-/plugin-rotate-0.22.12.tgz",
       "integrity": "sha512-9YNEt7BPAFfTls2FGfKBVgwwLUuKqy+E8bDGGEsOqHtbuhbshVGxN2WMZaD4gh5IDWvR+emmmPPWGgaYNYt1gA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jimp/utils": "^0.22.12"
       },
@@ -3079,7 +3080,6 @@
       "resolved": "https://registry.npmjs.org/@jimp/plugin-scale/-/plugin-scale-0.22.12.tgz",
       "integrity": "sha512-dghs92qM6MhHj0HrV2qAwKPMklQtjNpoYgAB94ysYpsXslhRTiPisueSIELRwZGEr0J0VUxpUY7HgJwlSIgGZw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jimp/utils": "^0.22.12"
       },
@@ -5070,7 +5070,6 @@
       "version": "7.7.9",
       "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz",
       "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/devtools-shared": "^7.7.9",
@@ -5086,7 +5085,6 @@
       "version": "7.7.9",
       "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz",
       "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "rfdc": "^1.4.1"
@@ -5342,7 +5340,6 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5377,7 +5374,6 @@
       "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -5471,8 +5467,7 @@
       "version": "5.10.4",
       "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-5.10.4.tgz",
       "integrity": "sha512-gt0VUqZ2+mr25ScbUcKZgJr96jKYm4vjOcxEWCEh/E5F4dWqhyo3dBhPRvNNnkKiWxkMd2cBwj3ZYH3rK39fkA==",
-      "license": "SEE LICENSE IN LICENSE",
-      "peer": true
+      "license": "SEE LICENSE IN LICENSE"
     },
     "node_modules/aria-query": {
       "version": "5.3.1",
@@ -5596,7 +5591,6 @@
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
       "integrity": "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "follow-redirects": "^1.15.11",
         "form-data": "^4.0.5",
@@ -5678,6 +5672,15 @@
         "zxing-wasm": "1.1.3"
       }
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -5733,7 +5736,6 @@
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
       "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -5811,7 +5813,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -5896,8 +5897,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.4.tgz",
       "integrity": "sha512-Ffb6YGXDiZYX3cqvSbHWqQ8+LkX6tVoTcZuVB3lm93sbAVXlO0D6QlOTMnV6g18gILpAXqkG2z9hf9z4hCjz2g==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/bulma-block-list": {
       "version": "1.1.0",
@@ -6155,7 +6155,6 @@
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
       "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -6424,7 +6423,6 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz",
       "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-what": "^5.2.0"
@@ -6492,6 +6490,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
@@ -6569,7 +6576,6 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -6758,7 +6764,6 @@
       "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
       "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-sfc": "2.7.16",
         "csstype": "^3.1.0"
@@ -8237,6 +8242,19 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/https-proxy-agent": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
@@ -8303,8 +8321,7 @@
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.2.tgz",
       "integrity": "sha512-yjD9nARJ/jb1g+CvD0tlhUHOrJ9Sy0P8T9MF3YaLlHnSRpwPfpTX0XIvpmw3gAJUmEu3FiICLBDPXVwyEvrleg==",
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/ieee754": {
       "version": "1.2.1",
@@ -8968,7 +8985,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
       "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -9551,7 +9567,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/mkdirp": {
@@ -10089,7 +10104,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
       "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/performance-now": {
@@ -10151,6 +10165,34 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
+      "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.5.0",
+        "vue": "^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.9.tgz",
+      "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.9"
+      }
+    },
     "node_modules/pixelmatch": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-4.0.2.tgz",
@@ -10371,7 +10413,6 @@
       "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
       "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "dijkstrajs": "^1.0.1",
         "pngjs": "^5.0.0",
@@ -10709,7 +10750,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
       "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/rgbcolor": {
@@ -10726,7 +10766,6 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.0.tgz",
       "integrity": "sha512-yqjxruMGBQJ2gG4HtjZtAfXArHomazDHoFwFFmZZl0r7Pdo7qCIXKqKHZc8yeoMgzJJ+pO6pEEHa+V7uzWlrAQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -10910,7 +10949,6 @@
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.98.0.tgz",
       "integrity": "sha512-+4N/u9dZ4PrgzGgPlKnaaRQx64RO0JBKs9sDhQ2pLgN6JQZ25uPQZKQYaBJU48Kd5BxgXoJ4e09Dq7nMcOUW3A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.1.5",
@@ -10932,7 +10970,6 @@
       "integrity": "sha512-Do7u6iRb6K+lrllcTkB1BXcHwOxcKe3rEfOF/GcCLE2w3WpddakRAosJOHFUR37DpsvimQXEt5abs3NzUjEIqg==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@bufbuild/protobuf": "^2.5.0",
         "colorjs.io": "^0.5.0",
@@ -11630,7 +11667,6 @@
       "version": "14.0.1",
       "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
       "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -11902,7 +11938,6 @@
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz",
       "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "copy-anything": "^4"
@@ -12149,6 +12184,15 @@
       "integrity": "sha512-pv4GjmramjdObhDyR1q85Td8X60Puu/lGQn7Kw2id05LLgHhAcWgnz6xSdMCSxBMWjQDmMyDXPTC2aqADdpiow==",
       "license": "Apache-2.0"
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/throat": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz",
@@ -12654,6 +12698,15 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
@@ -12680,7 +12733,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.11.tgz",
       "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -14073,7 +14125,6 @@
       "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -14133,7 +14184,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.31.tgz",
       "integrity": "sha512-iV/sU9SzOlmA/0tygSmjkEN6Jbs3nPoIPFhCMLD2STrjgOU8DX7ZtzMhg4ahVwf5Rp9KoFzcXeB1ZrVbLBp5/Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.31",
         "@vue/compiler-sfc": "3.5.31",
@@ -14821,7 +14871,6 @@
       "integrity": "sha512-cIFJOD1DESzpjOBl763Kp1AH7UE/0fcdHe6rZXUdQ9c50uvgigvW97u3IcSeBwOkgqL/PXPBktBCh0KEu5L8XQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },

package.json

@@ -11,14 +11,27 @@
     "format:tests:commit": "node scripts/pre-commit-format-tests.mjs",
     "format:tests:check": "prettier --check \"tests/**/*.{js,ts}\"",
     "prepare": "node scripts/prepare-husky.mjs",
-    "postinstall": "node scripts/postinstall-sync-playwright-root-links.mjs",
     "preview": "vite preview",
     "preview:prod": "npm run build && npm run preview -- --host 127.0.0.1 --port 4173",
     "text:fix-encoding": "node scripts/text-encoding.mjs fix",
     "text:check-encoding": "node scripts/text-encoding.mjs check",
-    "test:unit": "npm run text:check-encoding && node scripts/run-vitest-unit-batches.mjs",
+    "i18n:v2:compile": "node scripts/i18n-v2-compile-source.mjs",
+    "i18n:v2:source-check": "node scripts/i18n-v2-compile-source.mjs --check",
+    "i18n:v2:check": "npm run i18n:v2:source-check && npm run i18n:v2:global-template-audit && npm run i18n:v2:template-dedupe-audit && npm run i18n:v2:word-audit",
+    "i18n:v2:word-audit": "node scripts/i18n-v2-word-dedupe.mjs",
+    "i18n:v2:word-dedupe": "node scripts/i18n-v2-word-dedupe.mjs --apply",
+    "i18n:v2:global-template-audit": "node scripts/i18n-v2-globalize-templates.mjs",
+    "i18n:v2:globalize-templates": "node scripts/i18n-v2-globalize-templates.mjs --apply",
+    "i18n:v2:template-dedupe-audit": "node scripts/i18n-v2-template-dedupe.mjs",
+    "i18n:v2:template-dedupe": "node scripts/i18n-v2-template-dedupe.mjs --apply",
+    "test:unit": "npm run text:check-encoding && npm run test:unit:fast && npm run test:unit:serial",
+    "test:unit:fast": "node scripts/run-vitest-unit-fast.mjs",
+    "test:unit:serial": "node scripts/run-vitest-unit-batches.mjs --from-list tests/unit/serial-tests.txt",
     "test:unit:single": "vitest run",
-    "test:e2e": "playwright test",
+    "test:e2e": "npm run test:e2e:matrix --",
+    "test:e2e:matrix": "playwright test",
+    "test:e2e:pr": "node scripts/run-playwright-pr.mjs",
+    "test:e2e:changed": "node scripts/run-playwright-pr.mjs --changed-only",
     "test:e2e:i18n:views": "playwright test tests/e2e/i18n.views.spec.ts --project=chromium-desktop",
     "test:e2e:ci": "node scripts/run-playwright-ci-parallel.mjs",
     "test:e2e:full:slice": "node scripts/run-playwright-full-slice.mjs",
@@ -28,9 +41,14 @@
     "test:e2e:smoke": "playwright test --grep @smoke --project=chromium-desktop --project=chromium-mobile",
     "test:e2e:prod": "playwright test --config=playwright.prod.config.ts",
     "test:e2e:live": "playwright test --config=playwright.live.config.ts",
+    "test:e2e:live:public": "playwright test --config=playwright.live.config.ts --grep @public-live",
+    "test:e2e:live:roles": "playwright test --config=playwright.live.config.ts --grep @role-live",
     "test:e2e:release": "npm run test:e2e:prod && npm run test:e2e:live",
+    "release:verify-upload": "node scripts/release/verify-upload.mjs",
+    "release:update-server-version": "node scripts/release/update-server-version.mjs",
+    "release:upload:lftp": "bash scripts/release/upload-dist-lftp.sh",
     "test:e2e:pos-mobile-live": "node -e \"const { spawnSync } = require('child_process'); const result = spawnSync('npx', ['playwright', 'test', 'tests/e2e/adminModulePosMobileOrderFlow.spec.ts', '--project=chromium-mobile'], { stdio: 'inherit', shell: true, env: { ...process.env, PLAYWRIGHT_LIVE: '1' } }); process.exit(result.status ?? 1);\"",
-    "test:all": "npm run test:unit && npm run test:e2e:smoke",
+    "test:all": "npm run test:unit && npm run test:e2e:pr",
     "twa:build": "bubblewrap build",
     "twa:update": "bubblewrap update"
   },
@@ -67,6 +85,8 @@
     "chart.js": "^4.4.7",
     "dayspan-vuetify": "^0.4.0",
     "flow": "^0.2.3",
+    "html2canvas": "^1.4.1",
+    "pinia": "^3.0.4",
     "qrcode": "^1.5.4",
     "sass": "^1.81.1",
     "sweetalert2": "11.22.4",

playwright.global-setup.mjs

@@ -1,4 +1,5 @@
 import { execFile, spawn } from "node:child_process";
+import { createWriteStream } from "node:fs";
 import fs from "node:fs/promises";
 import path from "node:path";
 import readline from "node:readline";
@@ -11,15 +12,16 @@ const baseURL = process.env.PLAYWRIGHT_BASE_URL || `http://${devHost}:${devPort}
 const runtimeNamespace = String(process.env.PLAYWRIGHT_ARTIFACT_NAMESPACE || `port-${devPort}`)
   .trim()
   .replace(/[^a-zA-Z0-9._-]+/g, "-");
-const pidFile = path.resolve(process.cwd(), "output/playwright", `dev-server-${runtimeNamespace}.json`);
+const serverLogDir = path.resolve(process.cwd(), "output/playwright");
+const pidFile = path.resolve(serverLogDir, `dev-server-${runtimeNamespace}.json`);
+const stdoutLogFile = path.resolve(serverLogDir, `dev-server-${runtimeNamespace}.stdout.log`);
+const stderrLogFile = path.resolve(serverLogDir, `dev-server-${runtimeNamespace}.stderr.log`);
+const viteCliPath = path.resolve(process.cwd(), "node_modules/vite/bin/vite.js");
 const serverOutputLimit = 80;
 const activeOutputReaders = [];
 // Hardlinked Windows worktrees can break Vite's bundled config temp paths during Playwright boot.
 const viteDevArgs = [
-  "run",
-  "dev",
-  "--",
-  "--force",
+  ...(process.env.PLAYWRIGHT_VITE_FORCE === "1" ? ["--force"] : []),
   ...(process.platform === "win32" ? ["--configLoader", "runner"] : []),
   "--host",
   devHost,
@@ -176,14 +178,18 @@ async function killProcessTree(pid) {
   }
 }
 
-function captureProcessOutput(stream, lines) {
+function captureProcessOutput(stream, lines, logStream) {
   const reader = readline.createInterface({ input: stream });
   reader.on("line", (line) => {
     lines.push(line);
+    logStream.write(`${line}\n`);
     if (lines.length > serverOutputLimit) {
       lines.splice(0, lines.length - serverOutputLimit);
     }
   });
+  reader.on("close", () => {
+    logStream.end();
+  });
   return reader;
 }
 
@@ -368,6 +374,10 @@ async function warmModuleGraph(entryUrl, { depth = 2, timeoutMs = 120_000 } = {}
     }
 
     for (const specifier of extractModuleImports(source)) {
+      if (specifier.startsWith("/node_modules/.vite/deps/")) {
+        continue;
+      }
+
       const expectedContentType = resolveExpectedContentType(specifier);
       const importUrl = new URL(specifier, current.url).toString();
 
@@ -386,12 +396,36 @@ async function warmModuleGraph(entryUrl, { depth = 2, timeoutMs = 120_000 } = {}
 
 async function warmUpDevServer(url) {
   const warmupTargets = await buildWarmupTargets();
+  const selfServeEntryModules = [
+    "/src/views/dashboards/userDashboard/wash/MyWash.vue",
+    "/src/views/dashboards/userDashboard/wash/MyWashStart.vue",
+    "/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeStudio.vue",
+    "/src/views/guest/book/GuestBookExteriorWash.vue",
+  ];
+  const smokeRouteEntryModules = [
+    { path: "/src/components/page/wrappers/LayoutV2.vue", depth: 2 },
+    { path: "/src/views/pages/LandingPage.vue", depth: 2 },
+    { path: "/src/views/dashboards/superUserDashboard/selfserve/EdgeAgents.vue", depth: 1 },
+    { path: "/src/features/edgeGateways/EdgeGatewayManager.vue", depth: 2 },
+    { path: "/src/features/edgeGateways/EdgeGatewayTerminalPage.vue", depth: 2 },
+    { path: "/src/views/dashboards/superUserDashboard/department/DepartmentGatewaysWorkspacePage.vue", depth: 1 },
+    { path: "/src/features/edgeGateways/EdgeGatewayDepartmentWorkspace.vue", depth: 2 },
+    { path: "/src/views/dashboards/superUserDashboard/CollectedOrderInvoices.vue", depth: 1 },
+    { path: "/src/views/dashboards/superUserDashboard/invoiceDistribution/InvoiceDistributionOverview.vue", depth: 2 },
+    { path: "/src/views/dashboards/superUserDashboard/invoiceDistribution/InvoiceDistributionMonthView.vue", depth: 2 },
+  ];
 
   for (const target of warmupTargets) {
     await warmUpAsset(new URL(target.pathname, url).toString(), target.expectedContentType);
   }
 
   await warmModuleGraph(new URL("/src/main.js", url).toString());
+  for (const entryModule of selfServeEntryModules) {
+    await warmModuleGraph(new URL(entryModule, url).toString(), { depth: 2 });
+  }
+  for (const { path: entryModule, depth } of smokeRouteEntryModules) {
+    await warmModuleGraph(new URL(entryModule, url).toString(), { depth });
+  }
   await new Promise((resolve) => setTimeout(resolve, 1000));
 }
 
@@ -412,31 +446,25 @@ export default async function globalSetup() {
     await new Promise((resolve) => setTimeout(resolve, 1000));
   }
 
-  const serverProcess =
-    process.platform === "win32"
-      ? spawn("cmd.exe", ["/d", "/s", "/c", `npm.cmd ${viteDevArgs.join(" ")}`], {
-          cwd: process.cwd(),
-          detached: true,
-          env: {
-            ...process.env,
-            PLAYWRIGHT: "1",
-          },
-          stdio: ["ignore", "pipe", "pipe"],
-          windowsHide: true,
-        })
-      : spawn("npm", viteDevArgs, {
-          cwd: process.cwd(),
-          detached: true,
-          env: {
-            ...process.env,
-            PLAYWRIGHT: "1",
-          },
-          stdio: ["ignore", "pipe", "pipe"],
-        });
+  const serverProcess = spawn(process.execPath, [viteCliPath, ...viteDevArgs], {
+    cwd: process.cwd(),
+    detached: true,
+    env: {
+      ...process.env,
+      PLAYWRIGHT: "1",
+    },
+    stdio: ["ignore", "pipe", "pipe"],
+    windowsHide: true,
+  });
   const stdoutLines = [];
   const stderrLines = [];
-  const stdoutReader = captureProcessOutput(serverProcess.stdout, stdoutLines);
-  const stderrReader = captureProcessOutput(serverProcess.stderr, stderrLines);
+  const stdoutLogStream = createWriteStream(stdoutLogFile, { flags: "w" });
+  const stderrLogStream = createWriteStream(stderrLogFile, { flags: "w" });
+  serverProcess.on("exit", (code, signal) => {
+    stderrLogStream.write(`[playwright-global-setup] vite exited with code ${code ?? "null"} signal ${signal ?? "null"}\n`);
+  });
+  const stdoutReader = captureProcessOutput(serverProcess.stdout, stdoutLines, stdoutLogStream);
+  const stderrReader = captureProcessOutput(serverProcess.stderr, stderrLines, stderrLogStream);
   activeOutputReaders.push(stdoutReader, stderrReader);
   serverProcess.unref();
 

public/.htaccess

@@ -0,0 +1,53 @@
+<IfModule mod_negotiation.c>
+  Options -MultiViews
+</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 ^.+/((?: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 ^(?:.*?/)?((?: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 ^(?:.*?/)?((?: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 ^(?:.*?/)?(?: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>

public/manifest.json

@@ -4,13 +4,13 @@
   "description": "Access your Truck Wash accounts and transactions from anywhere.",
   "icons": [
     {
-      "src": "/favicons/web-app-manifest-192x192.png",
+      "src": "assets/favicons/web-app-manifest-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "any"
     },
     {
-      "src": "/favicons/web-app-manifest-512x512.png",
+      "src": "assets/favicons/web-app-manifest-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "any"

scripts/i18n-v2-compile-source.mjs

@@ -0,0 +1,185 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(__dirname, "..");
+const sourceDirectory = path.join(projectRoot, "src", "i18n", "source");
+const generatedDirectory = path.join(projectRoot, "src", "i18n", "generated");
+const activeLocales = ["da", "en", "sv", "de", "no"];
+const mode = process.argv.includes("--check") ? "check" : "write";
+
+const linkTokenPattern = /@(?<modifier>\.[\p{L}]+)?:(?:\{'(?<literal>[^']+)'\}|(?<path>[\p{L}\p{N}_.-]+))/gu;
+
+const isPlainObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+
+const readJson = (filePath) => JSON.parse(fs.readFileSync(filePath, "utf8").replace(/^\uFEFF/, ""));
+
+const stableJson = (value) => `${JSON.stringify(value, null, 2)}\n`;
+
+const writeJson = (filePath, value) => {
+  fs.mkdirSync(path.dirname(filePath), { recursive: true });
+  fs.writeFileSync(filePath, stableJson(value), "utf8");
+};
+
+const listJsonFiles = (directory) => {
+  if (!fs.existsSync(directory)) {
+    return [];
+  }
+
+  const entries = fs.readdirSync(directory, { withFileTypes: true });
+  return entries
+    .flatMap((entry) => {
+      const entryPath = path.join(directory, entry.name);
+      if (entry.isDirectory()) {
+        return listJsonFiles(entryPath);
+      }
+      return entry.isFile() && entry.name.endsWith(".json") ? [entryPath] : [];
+    })
+    .sort((left, right) => left.localeCompare(right, "en", { sensitivity: "base" }));
+};
+
+const mergeMessages = (left = {}, right = {}) => {
+  const merged = { ...left };
+
+  for (const [key, value] of Object.entries(right ?? {})) {
+    if (isPlainObject(value) && isPlainObject(merged[key])) {
+      merged[key] = mergeMessages(merged[key], value);
+    } else {
+      merged[key] = value;
+    }
+  }
+
+  return merged;
+};
+
+const readJsonFragments = (directory) => {
+  let merged = {};
+  for (const filePath of listJsonFiles(directory)) {
+    merged = mergeMessages(merged, readJson(filePath));
+  }
+  return merged;
+};
+
+const mapSourcePathToRuntimePath = (keyPath) => {
+  if (keyPath.startsWith("terms.glossary.")) {
+    return `words.generated.${keyPath.slice("terms.glossary.".length)}`;
+  }
+
+  if (keyPath.startsWith("terms.")) {
+    return `words.${keyPath.slice("terms.".length)}`;
+  }
+
+  if (keyPath.startsWith("phrases.compat.")) {
+    return `templates.generated.compat.${keyPath.slice("phrases.compat.".length)}`;
+  }
+
+  if (keyPath.startsWith("phrases.")) {
+    return `templates.${keyPath.slice("phrases.".length)}`;
+  }
+
+  return keyPath;
+};
+
+const rewriteLinks = (value) => {
+  if (typeof value === "string") {
+    return value.replace(linkTokenPattern, (token, modifier = "", literalTarget, pathTarget) => {
+      const target = literalTarget ?? pathTarget;
+      const mappedTarget = mapSourcePathToRuntimePath(target);
+      const quoteTarget = literalTarget || /[^\p{L}\p{N}_.-]/u.test(mappedTarget);
+      return quoteTarget ? `@${modifier}:{'${mappedTarget}'}` : `@${modifier}:${mappedTarget}`;
+    });
+  }
+
+  if (Array.isArray(value)) {
+    return value.map((entry) => rewriteLinks(entry));
+  }
+
+  if (!isPlainObject(value)) {
+    return value;
+  }
+
+  return Object.fromEntries(Object.entries(value).map(([key, entry]) => [key, rewriteLinks(entry)]));
+};
+
+const compileWords = (sourceTerms) => {
+  const { glossary, ...terms } = sourceTerms;
+  return {
+    grammar: terms.grammar ?? {},
+    actions: terms.actions ?? {},
+    entities: terms.entities ?? {},
+    statuses: terms.statuses ?? {},
+    domain: terms.domain ?? {},
+    services: terms.services ?? {},
+    units: terms.units ?? {},
+    replication: terms.replication ?? {},
+    generated: glossary ?? {},
+  };
+};
+
+const compileTemplates = (sourcePhrases) => {
+  const { compat, ...phrases } = sourcePhrases;
+  return {
+    ...phrases,
+    generated: {
+      compat: compat ?? {},
+    },
+  };
+};
+
+const compileLocale = (locale) => {
+  const localeSourceDirectory = path.join(sourceDirectory, locale);
+  const sourceTerms = readJsonFragments(path.join(localeSourceDirectory, "terms"));
+  const sourcePhrases = readJsonFragments(path.join(localeSourceDirectory, "phrases"));
+
+  return rewriteLinks({
+    words: compileWords(sourceTerms),
+    templates: compileTemplates(sourcePhrases),
+  });
+};
+
+const compileGlobal = () => {
+  const shared = readJsonFragments(path.join(sourceDirectory, "global", "shared"));
+  const locales = {};
+
+  for (const locale of activeLocales) {
+    locales[locale] = readJsonFragments(path.join(sourceDirectory, "global", "locales", locale));
+  }
+
+  return rewriteLinks({
+    shared,
+    locales,
+  });
+};
+
+const compiledFiles = new Map([
+  [path.join(generatedDirectory, "global-v2.json"), compileGlobal()],
+  ...activeLocales.map((locale) => [path.join(generatedDirectory, `${locale}-v2.json`), compileLocale(locale)]),
+]);
+
+if (mode === "check") {
+  const mismatches = [];
+  for (const [filePath, value] of compiledFiles.entries()) {
+    const expected = stableJson(value);
+    const actual = fs.existsSync(filePath) ? fs.readFileSync(filePath, "utf8").replace(/^\uFEFF/, "") : "";
+    if (actual !== expected) {
+      mismatches.push(path.relative(projectRoot, filePath));
+    }
+  }
+
+  if (mismatches.length > 0) {
+    console.error("Generated i18n v2 runtime files are out of date:");
+    for (const mismatch of mismatches) {
+      console.error(`  ${mismatch}`);
+    }
+    console.error("Run npm run i18n:v2:compile.");
+    process.exit(1);
+  }
+
+  console.log("Generated i18n v2 runtime files are up to date.");
+} else {
+  for (const [filePath, value] of compiledFiles.entries()) {
+    writeJson(filePath, value);
+  }
+  console.log(`Compiled i18n v2 runtime files to ${path.relative(projectRoot, generatedDirectory)}.`);
+}

scripts/i18n-v2-globalize-templates.mjs

@@ -0,0 +1,389 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(__dirname, "..");
+const localesDirectory = path.join(projectRoot, "src", "i18n", "generated");
+const activeLocales = ["da", "en", "sv", "de", "no"];
+const mode = process.argv.includes("--apply") ? "apply" : "check";
+
+const templatePrefix = "templates.generated.compat";
+const linkTokenPattern = /@(?:\.[\p{L}]+)?:(?:\{'[^']+'\}|[\p{L}\p{N}_.-]+)/gu;
+const exactLinkPattern = /^@(?<modifier>\.[\p{L}]+)?:(?:\{'(?<literal>[^']+)'\}|(?<path>[\p{L}\p{N}_.-]+))$/u;
+
+const isPlainObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+
+const readJson = (filePath) => JSON.parse(fs.readFileSync(filePath, "utf8").replace(/^\uFEFF/, ""));
+
+const writeJson = (filePath, value) => {
+  fs.writeFileSync(filePath, `${JSON.stringify(value, null, 2)}\n`, "utf8");
+};
+
+const cloneJson = (value) => JSON.parse(JSON.stringify(value));
+
+const flattenStringEntries = (value, prefix = "") => {
+  if (typeof value === "string") {
+    return [{ key: prefix, value }];
+  }
+
+  if (!isPlainObject(value)) {
+    return [];
+  }
+
+  return Object.entries(value).flatMap(([key, entry]) =>
+    flattenStringEntries(entry, prefix ? `${prefix}.${key}` : key)
+  );
+};
+
+const getValueAtPath = (value, keyPath) => {
+  let current = value;
+  for (const segment of keyPath.split(".")) {
+    if (!isPlainObject(current) || !(segment in current)) {
+      return undefined;
+    }
+    current = current[segment];
+  }
+  return current;
+};
+
+const ensureObjectAtPath = (value, keyPath) => {
+  let current = value;
+  for (const segment of keyPath.split(".")) {
+    if (!isPlainObject(current[segment])) {
+      current[segment] = {};
+    }
+    current = current[segment];
+  }
+  return current;
+};
+
+const setValueAtPath = (value, keyPath, nextValue) => {
+  const segments = keyPath.split(".");
+  const parent = ensureObjectAtPath(value, segments.slice(0, -1).join("."));
+  parent[segments.at(-1)] = nextValue;
+};
+
+const deleteValueAtPath = (value, keyPath) => {
+  const segments = keyPath.split(".");
+  const parents = [];
+  let current = value;
+
+  for (const segment of segments.slice(0, -1)) {
+    if (!isPlainObject(current) || !(segment in current)) {
+      return false;
+    }
+    parents.push([current, segment]);
+    current = current[segment];
+  }
+
+  if (!isPlainObject(current) || !(segments.at(-1) in current)) {
+    return false;
+  }
+
+  delete current[segments.at(-1)];
+
+  for (let index = parents.length - 1; index >= 0; index -= 1) {
+    const [parent, segment] = parents[index];
+    const child = parent[segment];
+    if (isPlainObject(child) && Object.keys(child).length === 0) {
+      delete parent[segment];
+    } else {
+      break;
+    }
+  }
+
+  return true;
+};
+
+const mergeMessages = (sharedMessages = {}, localeMessages = {}) => {
+  const mergedMessages = { ...sharedMessages };
+
+  for (const [key, value] of Object.entries(localeMessages ?? {})) {
+    if (isPlainObject(value) && isPlainObject(mergedMessages[key])) {
+      mergedMessages[key] = mergeMessages(mergedMessages[key], value);
+    } else {
+      mergedMessages[key] = value;
+    }
+  }
+
+  return mergedMessages;
+};
+
+const applyTextModifier = (value, modifier) => {
+  switch (modifier) {
+    case ".capitalize":
+      return `${value.charAt(0).toLocaleUpperCase()}${value.slice(1)}`;
+    case ".upper":
+      return value.toLocaleUpperCase();
+    case ".lower":
+      return value.toLocaleLowerCase();
+    default:
+      return value;
+  }
+};
+
+const resolveLinkedMessage = (messages, keyPath, seen = new Set()) => {
+  if (seen.has(keyPath)) {
+    return undefined;
+  }
+  seen.add(keyPath);
+
+  const value = getValueAtPath(messages, keyPath);
+  if (typeof value !== "string") {
+    return undefined;
+  }
+
+  const exactLink = value.trim().match(exactLinkPattern);
+  if (exactLink) {
+    const target = exactLink.groups.literal ?? exactLink.groups.path;
+    const resolved = resolveLinkedMessage(messages, target, seen);
+    return resolved === undefined ? undefined : applyTextModifier(resolved, exactLink.groups.modifier);
+  }
+
+  return value.replace(linkTokenPattern, (token) => {
+    const match = token.match(exactLinkPattern);
+    if (!match?.groups) {
+      return token;
+    }
+
+    const target = match.groups.literal ?? match.groups.path;
+    const resolved = resolveLinkedMessage(messages, target, new Set(seen));
+    return resolved === undefined ? token : applyTextModifier(resolved, match.groups.modifier);
+  });
+};
+
+const readRawLocales = () =>
+  Object.fromEntries(
+    activeLocales.map((locale) => [locale, readJson(path.join(localesDirectory, `${locale}-v2.json`))])
+  );
+
+const buildMergedLocales = (globalMessages, rawLocales) =>
+  Object.fromEntries(
+    activeLocales.map((locale) => [
+      locale,
+      mergeMessages(
+        mergeMessages(globalMessages.shared ?? {}, globalMessages.locales?.[locale] ?? {}),
+        rawLocales[locale]
+      ),
+    ])
+  );
+
+const isCatalogPhraseKey = (keyPath) => !keyPath.startsWith("words.") && !keyPath.startsWith("templates.");
+
+const exactLinkTarget = (value) => {
+  const match = value.trim().match(exactLinkPattern);
+  return match?.groups?.literal ?? match?.groups?.path;
+};
+
+const templateKeyFor = (keyPath) => `${templatePrefix}.${keyPath}`;
+
+const linkedTemplateFor = (keyPath) => `@:{'${templateKeyFor(keyPath)}'}`;
+
+const sourceValueFor = (globalMessages, rawLocales, locale, keyPath) => {
+  const rawValue = getValueAtPath(rawLocales[locale], keyPath);
+  if (typeof rawValue === "string") {
+    return rawValue;
+  }
+
+  const localeValue = getValueAtPath(globalMessages.locales?.[locale] ?? {}, keyPath);
+  if (typeof localeValue === "string") {
+    return localeValue;
+  }
+
+  const sharedValue = getValueAtPath(globalMessages.shared ?? {}, keyPath);
+  return typeof sharedValue === "string" ? sharedValue : undefined;
+};
+
+const collectCandidateKeys = (globalMessages, rawLocales) => {
+  const keys = new Set();
+
+  for (const locale of activeLocales) {
+    for (const entry of flattenStringEntries(rawLocales[locale]).filter((entry) => isCatalogPhraseKey(entry.key))) {
+      keys.add(entry.key);
+    }
+
+    for (const entry of flattenStringEntries(globalMessages.locales?.[locale] ?? {}).filter((entry) =>
+      isCatalogPhraseKey(entry.key)
+    )) {
+      const target = exactLinkTarget(entry.value);
+      if (target !== templateKeyFor(entry.key)) {
+        keys.add(entry.key);
+      }
+    }
+  }
+
+  return [...keys].sort((left, right) => left.localeCompare(right, "en", { sensitivity: "base" }));
+};
+
+const reorderLocaleRoot = (localeMessages) => {
+  const { words, templates, ...rest } = localeMessages;
+  return { words, templates, ...rest };
+};
+
+const pruneLocaleMap = (locales) => {
+  const nextLocales = {};
+  for (const locale of activeLocales) {
+    nextLocales[locale] = isPlainObject(locales?.[locale]) ? locales[locale] : {};
+  }
+  return nextLocales;
+};
+
+const transformCatalogs = (originalGlobalMessages, originalRawLocales) => {
+  const globalMessages = cloneJson(originalGlobalMessages);
+  const rawLocales = cloneJson(originalRawLocales);
+  globalMessages.shared = globalMessages.shared ?? {};
+  globalMessages.locales = pruneLocaleMap(globalMessages.locales ?? {});
+
+  const originalMergedLocales = buildMergedLocales(originalGlobalMessages, originalRawLocales);
+  const candidateKeys = collectCandidateKeys(originalGlobalMessages, originalRawLocales);
+  let directSharedAliasCount = 0;
+  let generatedTemplateCount = 0;
+  let removedRawEntryCount = 0;
+  let removedLocaleEntryCount = 0;
+
+  for (const keyPath of candidateKeys) {
+    const valuesByLocale = Object.fromEntries(
+      activeLocales.map((locale) => {
+        const sourceValue = sourceValueFor(originalGlobalMessages, originalRawLocales, locale, keyPath);
+        if (typeof sourceValue === "string") {
+          return [locale, sourceValue];
+        }
+
+        const mergedValue = getValueAtPath(originalMergedLocales[locale], keyPath);
+        return [locale, typeof mergedValue === "string" ? mergedValue : undefined];
+      })
+    );
+
+    const values = activeLocales.map((locale) => valuesByLocale[locale]);
+    if (values.some((value) => typeof value !== "string")) {
+      continue;
+    }
+
+    const firstValue = values[0];
+    const allValuesIdentical = values.every((value) => value === firstValue);
+    const canUseDirectSharedAlias =
+      allValuesIdentical &&
+      !firstValue.includes("words.generated.") &&
+      !firstValue.includes(templatePrefix) &&
+      exactLinkTarget(firstValue) !== keyPath;
+
+    if (canUseDirectSharedAlias) {
+      setValueAtPath(globalMessages.shared, keyPath, firstValue);
+      directSharedAliasCount += 1;
+    } else {
+      setValueAtPath(globalMessages.shared, keyPath, linkedTemplateFor(keyPath));
+      for (const locale of activeLocales) {
+        setValueAtPath(rawLocales[locale], templateKeyFor(keyPath), valuesByLocale[locale]);
+      }
+      generatedTemplateCount += 1;
+    }
+
+    for (const locale of activeLocales) {
+      if (deleteValueAtPath(rawLocales[locale], keyPath)) {
+        removedRawEntryCount += 1;
+      }
+      if (deleteValueAtPath(globalMessages.locales[locale], keyPath)) {
+        removedLocaleEntryCount += 1;
+      }
+    }
+  }
+
+  for (const locale of activeLocales) {
+    rawLocales[locale] = reorderLocaleRoot(rawLocales[locale]);
+    globalMessages.locales[locale] = isPlainObject(globalMessages.locales[locale])
+      ? globalMessages.locales[locale]
+      : {};
+  }
+
+  const nextMergedLocales = buildMergedLocales(globalMessages, rawLocales);
+  const mismatches = [];
+  for (const locale of activeLocales) {
+    for (const entry of flattenStringEntries(originalMergedLocales[locale])) {
+      const expected = resolveLinkedMessage(originalMergedLocales[locale], entry.key);
+      const actual = resolveLinkedMessage(nextMergedLocales[locale], entry.key);
+      if (actual !== expected) {
+        mismatches.push(
+          `${locale}.${entry.key}: expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`
+        );
+      }
+    }
+  }
+
+  const remainingRawPhraseEntries = activeLocales.flatMap((locale) =>
+    flattenStringEntries(rawLocales[locale])
+      .filter((entry) => isCatalogPhraseKey(entry.key))
+      .map((entry) => `${locale}.${entry.key}`)
+  );
+
+  const remainingLocalePhraseEntries = activeLocales.flatMap((locale) =>
+    flattenStringEntries(globalMessages.locales?.[locale] ?? {})
+      .filter((entry) => isCatalogPhraseKey(entry.key))
+      .map((entry) => `${locale}.${entry.key}`)
+  );
+
+  return {
+    globalMessages,
+    rawLocales,
+    candidateCount: candidateKeys.length,
+    directSharedAliasCount,
+    generatedTemplateCount,
+    removedRawEntryCount,
+    removedLocaleEntryCount,
+    mismatches,
+    remainingRawPhraseEntries,
+    remainingLocalePhraseEntries,
+  };
+};
+
+const globalPath = path.join(localesDirectory, "global-v2.json");
+const originalGlobalMessages = readJson(globalPath);
+const originalRawLocales = readRawLocales();
+const result = transformCatalogs(originalGlobalMessages, originalRawLocales);
+
+console.log(
+  [
+    `candidate phrase keys: ${result.candidateCount}`,
+    `direct shared aliases: ${result.directSharedAliasCount}`,
+    `generated shared template aliases: ${result.generatedTemplateCount}`,
+    `removed raw locale entries: ${result.removedRawEntryCount}`,
+    `removed global locale entries: ${result.removedLocaleEntryCount}`,
+  ].join("\n")
+);
+
+let hasErrors = false;
+
+if (result.mismatches.length > 0) {
+  hasErrors = true;
+  console.error(`transformed output changed ${result.mismatches.length} strings`);
+  for (const mismatch of result.mismatches.slice(0, 30)) {
+    console.error(`  ${mismatch}`);
+  }
+}
+
+if (result.remainingRawPhraseEntries.length > 0) {
+  hasErrors = true;
+  console.error(`raw locale phrase entries remain outside words/templates: ${result.remainingRawPhraseEntries.length}`);
+  for (const entry of result.remainingRawPhraseEntries.slice(0, 30)) {
+    console.error(`  ${entry}`);
+  }
+}
+
+if (result.remainingLocalePhraseEntries.length > 0) {
+  hasErrors = true;
+  console.error(`global-v2 locale phrase entries remain: ${result.remainingLocalePhraseEntries.length}`);
+  for (const entry of result.remainingLocalePhraseEntries.slice(0, 30)) {
+    console.error(`  ${entry}`);
+  }
+}
+
+if (hasErrors) {
+  process.exit(1);
+}
+
+if (mode === "apply") {
+  writeJson(globalPath, result.globalMessages);
+  for (const locale of activeLocales) {
+    writeJson(path.join(localesDirectory, `${locale}-v2.json`), result.rawLocales[locale]);
+  }
+}

scripts/i18n-v2-template-dedupe.mjs

@@ -0,0 +1,341 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(__dirname, "..");
+const localesDirectory = path.join(projectRoot, "src", "i18n", "generated");
+const activeLocales = ["da", "en", "sv", "de", "no"];
+const mode = process.argv.includes("--apply") ? "apply" : "check";
+
+const templatePrefix = "templates.generated.compat";
+const placeholderPattern = /\{[A-Za-z_][A-Za-z0-9_]*\}/g;
+const exactLinkPattern = /^@(?:\.[\p{L}]+)?:(?:\{'[^']+'\}|[\p{L}\p{N}_.-]+)$/u;
+
+const isPlainObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+
+const readJson = (filePath) => JSON.parse(fs.readFileSync(filePath, "utf8").replace(/^\uFEFF/, ""));
+
+const writeJson = (filePath, value) => {
+  fs.writeFileSync(filePath, `${JSON.stringify(value, null, 2)}\n`, "utf8");
+};
+
+const cloneJson = (value) => JSON.parse(JSON.stringify(value));
+
+const flattenStringEntries = (value, prefix = "") => {
+  if (typeof value === "string") {
+    return [{ key: prefix, value }];
+  }
+
+  if (!isPlainObject(value)) {
+    return [];
+  }
+
+  return Object.entries(value).flatMap(([key, entry]) =>
+    flattenStringEntries(entry, prefix ? `${prefix}.${key}` : key)
+  );
+};
+
+const getValueAtPath = (value, keyPath) => {
+  let current = value;
+  for (const segment of keyPath.split(".")) {
+    if (!isPlainObject(current) || !(segment in current)) {
+      return undefined;
+    }
+    current = current[segment];
+  }
+  return current;
+};
+
+const ensureObjectAtPath = (value, keyPath) => {
+  let current = value;
+  if (!keyPath) {
+    return current;
+  }
+
+  for (const segment of keyPath.split(".")) {
+    if (!isPlainObject(current[segment])) {
+      current[segment] = {};
+    }
+    current = current[segment];
+  }
+  return current;
+};
+
+const setValueAtPath = (value, keyPath, nextValue) => {
+  const segments = keyPath.split(".");
+  const parent = ensureObjectAtPath(value, segments.slice(0, -1).join("."));
+  parent[segments.at(-1)] = nextValue;
+};
+
+const deleteValueAtPath = (value, keyPath) => {
+  const segments = keyPath.split(".");
+  const parents = [];
+  let current = value;
+
+  for (const segment of segments.slice(0, -1)) {
+    if (!isPlainObject(current) || !(segment in current)) {
+      return false;
+    }
+    parents.push([current, segment]);
+    current = current[segment];
+  }
+
+  if (!isPlainObject(current) || !(segments.at(-1) in current)) {
+    return false;
+  }
+
+  delete current[segments.at(-1)];
+
+  for (let index = parents.length - 1; index >= 0; index -= 1) {
+    const [parent, segment] = parents[index];
+    const child = parent[segment];
+    if (isPlainObject(child) && Object.keys(child).length === 0) {
+      delete parent[segment];
+    } else {
+      break;
+    }
+  }
+
+  return true;
+};
+
+const normalizePhrase = (value) =>
+  value
+    .normalize("NFKC")
+    .toLocaleLowerCase()
+    .replace(placeholderPattern, "{}")
+    .replace(/[\p{P}\p{S}]+/gu, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+
+const linkToTemplate = (suffix) => `@:{'${templatePrefix}.${suffix}'}`;
+
+const canonicalPriority = (suffix) => {
+  if (suffix.startsWith("common.")) return 0;
+  if (suffix.startsWith("global.")) return 1;
+  if (suffix.startsWith("nav.")) return 2;
+  if (suffix.startsWith("tables.common.")) return 3;
+  if (suffix.startsWith("objects.columns.")) return 4;
+  if (suffix.startsWith("auth.")) return 5;
+  if (suffix.startsWith("products.")) return 6;
+  return 10;
+};
+
+const chooseCanonicalSuffix = (suffixes) =>
+  [...suffixes].sort(
+    (left, right) =>
+      canonicalPriority(left) - canonicalPriority(right) ||
+      left.split(".").length - right.split(".").length ||
+      left.length - right.length ||
+      left.localeCompare(right, "en", { sensitivity: "base" })
+  )[0];
+
+const createDisjointSet = (items) => {
+  const parent = new Map(items.map((item) => [item, item]));
+
+  const find = (item) => {
+    const currentParent = parent.get(item);
+    if (currentParent === item) {
+      return item;
+    }
+    const root = find(currentParent);
+    parent.set(item, root);
+    return root;
+  };
+
+  const union = (left, right) => {
+    const leftRoot = find(left);
+    const rightRoot = find(right);
+    if (leftRoot !== rightRoot) {
+      parent.set(rightRoot, leftRoot);
+    }
+  };
+
+  const groups = () => {
+    const grouped = new Map();
+    for (const item of items) {
+      const root = find(item);
+      const group = grouped.get(root) ?? [];
+      group.push(item);
+      grouped.set(root, group);
+    }
+    return [...grouped.values()];
+  };
+
+  return { union, groups };
+};
+
+const replaceTemplatePathReferences = (value, replacements) => {
+  if (typeof value === "string") {
+    let nextValue = value;
+    for (const [fromSuffix, toSuffix] of replacements.entries()) {
+      nextValue = nextValue.replaceAll(`${templatePrefix}.${fromSuffix}`, `${templatePrefix}.${toSuffix}`);
+    }
+    return nextValue;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map((entry) => replaceTemplatePathReferences(entry, replacements));
+  }
+
+  if (!isPlainObject(value)) {
+    return value;
+  }
+
+  return Object.fromEntries(
+    Object.entries(value).map(([key, entry]) => [key, replaceTemplatePathReferences(entry, replacements)])
+  );
+};
+
+const readRawLocales = () =>
+  Object.fromEntries(
+    activeLocales.map((locale) => [locale, readJson(path.join(localesDirectory, `${locale}-v2.json`))])
+  );
+
+const collectTemplateSuffixes = (rawLocales) => {
+  const suffixes = new Set();
+  for (const locale of activeLocales) {
+    for (const entry of flattenStringEntries(getValueAtPath(rawLocales[locale], templatePrefix) ?? {})) {
+      suffixes.add(entry.key);
+    }
+  }
+  return [...suffixes].sort((left, right) => left.localeCompare(right, "en", { sensitivity: "base" }));
+};
+
+const transformCatalogs = (originalGlobalMessages, originalRawLocales) => {
+  const rawLocales = cloneJson(originalRawLocales);
+  let globalMessages = cloneJson(originalGlobalMessages);
+  const suffixes = collectTemplateSuffixes(rawLocales);
+  const disjointSet = createDisjointSet(suffixes);
+
+  for (const locale of activeLocales) {
+    const groupedByLocalePhrase = new Map();
+    for (const suffix of suffixes) {
+      const value = getValueAtPath(rawLocales[locale], `${templatePrefix}.${suffix}`);
+      if (typeof value !== "string") {
+        continue;
+      }
+
+      const signature = normalizePhrase(value);
+      if (signature.length < 4) {
+        continue;
+      }
+
+      const group = groupedByLocalePhrase.get(signature) ?? [];
+      group.push(suffix);
+      groupedByLocalePhrase.set(signature, group);
+    }
+
+    for (const group of groupedByLocalePhrase.values()) {
+      if (group.length <= 1) {
+        continue;
+      }
+
+      const [first, ...rest] = group;
+      for (const suffix of rest) {
+        disjointSet.union(first, suffix);
+      }
+    }
+  }
+
+  const duplicateGroups = disjointSet.groups().filter((group) => group.length > 1);
+  const replacements = new Map();
+
+  for (const group of duplicateGroups) {
+    const canonicalSuffix = chooseCanonicalSuffix(group);
+    for (const suffix of group) {
+      if (suffix !== canonicalSuffix) {
+        replacements.set(suffix, canonicalSuffix);
+      }
+    }
+  }
+
+  for (const [fromSuffix, toSuffix] of [...replacements.entries()]) {
+    const seen = new Set([fromSuffix]);
+    let finalSuffix = toSuffix;
+    while (replacements.has(finalSuffix) && !seen.has(finalSuffix)) {
+      seen.add(finalSuffix);
+      finalSuffix = replacements.get(finalSuffix);
+    }
+    replacements.set(fromSuffix, finalSuffix);
+  }
+
+  if (replacements.size > 0) {
+    globalMessages = replaceTemplatePathReferences(globalMessages, replacements);
+    for (const locale of activeLocales) {
+      rawLocales[locale] = replaceTemplatePathReferences(rawLocales[locale], replacements);
+    }
+  }
+
+  let removedTemplateCount = 0;
+  let repointedAliasCount = 0;
+  for (const [fromSuffix, toSuffix] of replacements.entries()) {
+    setValueAtPath(globalMessages.shared, fromSuffix, linkToTemplate(toSuffix));
+    repointedAliasCount += 1;
+
+    for (const locale of activeLocales) {
+      if (deleteValueAtPath(rawLocales[locale], `${templatePrefix}.${fromSuffix}`)) {
+        removedTemplateCount += 1;
+      }
+    }
+  }
+
+  const remainingDuplicateGroups = [];
+  for (const locale of activeLocales) {
+    const nonLinkedTemplates = flattenStringEntries(getValueAtPath(rawLocales[locale], templatePrefix) ?? {}).filter(
+      (entry) => !exactLinkPattern.test(entry.value.trim())
+    );
+    const byPhrase = new Map();
+    for (const entry of nonLinkedTemplates) {
+      const signature = normalizePhrase(entry.value);
+      const group = byPhrase.get(signature) ?? [];
+      group.push(entry.key);
+      byPhrase.set(signature, group);
+    }
+    for (const [signature, group] of byPhrase.entries()) {
+      if (signature.length >= 4 && group.length > 1) {
+        remainingDuplicateGroups.push(`${locale}: ${signature} <- ${group.join(", ")}`);
+      }
+    }
+  }
+
+  return {
+    globalMessages,
+    rawLocales,
+    duplicateGroupCount: duplicateGroups.length,
+    replacementCount: replacements.size,
+    repointedAliasCount,
+    removedTemplateCount,
+    remainingDuplicateGroups,
+  };
+};
+
+const globalPath = path.join(localesDirectory, "global-v2.json");
+const originalGlobalMessages = readJson(globalPath);
+const originalRawLocales = readRawLocales();
+const result = transformCatalogs(originalGlobalMessages, originalRawLocales);
+
+console.log(
+  [
+    `duplicate generated template groups: ${result.duplicateGroupCount}`,
+    `template replacements: ${result.replacementCount}`,
+    `repointed shared aliases: ${result.repointedAliasCount}`,
+    `removed locale template entries: ${result.removedTemplateCount}`,
+  ].join("\n")
+);
+
+if (result.remainingDuplicateGroups.length > 0) {
+  console.error(`near-duplicate generated templates remain: ${result.remainingDuplicateGroups.length}`);
+  for (const group of result.remainingDuplicateGroups.slice(0, 30)) {
+    console.error(`  ${group}`);
+  }
+  process.exit(1);
+}
+
+if (mode === "apply") {
+  writeJson(globalPath, result.globalMessages);
+  for (const locale of activeLocales) {
+    writeJson(path.join(localesDirectory, `${locale}-v2.json`), result.rawLocales[locale]);
+  }
+}

scripts/i18n-v2-word-dedupe.mjs

@@ -0,0 +1,390 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(__dirname, "..");
+const localesDirectory = path.join(projectRoot, "src", "i18n", "generated");
+const activeLocales = ["da", "en", "sv", "de", "no"];
+
+const linkTokenPattern = /@(?:\.[\p{L}]+)?:(?:\{'[^']+'\}|[\p{L}\p{N}_.-]+)/gu;
+const placeholderPattern = /\{[A-Za-z_][A-Za-z0-9_]*\}/g;
+const wordTokenPattern = /[\p{L}\p{N}]+/gu;
+const linkedMessagePattern = /^@(?<modifier>\.[\p{L}]+)?:(?:\{'(?<literal>[^']+)'\}|(?<path>[\p{L}\p{N}_.-]+))$/u;
+
+const mode = process.argv.includes("--apply") ? "apply" : "check";
+
+const isPlainObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+
+const readJson = (filePath) => JSON.parse(fs.readFileSync(filePath, "utf8").replace(/^\uFEFF/, ""));
+
+const writeJson = (filePath, value) => {
+  fs.writeFileSync(filePath, `${JSON.stringify(value, null, 2)}\n`, "utf8");
+};
+
+const cloneJson = (value) => JSON.parse(JSON.stringify(value));
+
+const flattenStringEntries = (value, prefix = "") => {
+  if (typeof value === "string") {
+    return [{ key: prefix, value }];
+  }
+
+  if (!isPlainObject(value)) {
+    return [];
+  }
+
+  return Object.entries(value).flatMap(([key, entry]) =>
+    flattenStringEntries(entry, prefix ? `${prefix}.${key}` : key)
+  );
+};
+
+const getValueAtPath = (value, keyPath) => {
+  let current = value;
+  for (const segment of keyPath.split(".")) {
+    if (!isPlainObject(current) || !(segment in current)) {
+      return undefined;
+    }
+    current = current[segment];
+  }
+  return current;
+};
+
+const setValueAtPath = (value, keyPath, nextValue) => {
+  const segments = keyPath.split(".");
+  let current = value;
+  for (const segment of segments.slice(0, -1)) {
+    current = current[segment];
+  }
+  current[segments.at(-1)] = nextValue;
+};
+
+const compareStringValues = (left, right) => left.localeCompare(right, "en", { sensitivity: "base" });
+
+const protectSegments = (value) => {
+  const protectedRanges = [];
+  for (const pattern of [linkTokenPattern, placeholderPattern]) {
+    pattern.lastIndex = 0;
+    for (const match of value.matchAll(pattern)) {
+      protectedRanges.push({ start: match.index ?? 0, end: (match.index ?? 0) + match[0].length });
+    }
+  }
+
+  protectedRanges.sort((a, b) => a.start - b.start || b.end - a.end);
+  const mergedRanges = [];
+  for (const range of protectedRanges) {
+    const previous = mergedRanges.at(-1);
+    if (previous && range.start <= previous.end) {
+      previous.end = Math.max(previous.end, range.end);
+    } else {
+      mergedRanges.push({ ...range });
+    }
+  }
+
+  const segments = [];
+  let offset = 0;
+  for (const range of mergedRanges) {
+    if (offset < range.start) {
+      segments.push({ protected: false, value: value.slice(offset, range.start) });
+    }
+    segments.push({ protected: true, value: value.slice(range.start, range.end) });
+    offset = range.end;
+  }
+  if (offset < value.length) {
+    segments.push({ protected: false, value: value.slice(offset) });
+  }
+
+  return segments;
+};
+
+const normalizeToken = (token) => token.normalize("NFKC").toLocaleLowerCase();
+
+const isAuditedToken = (token) => /\p{L}/u.test(token);
+
+const collectTokens = (value) => {
+  const tokens = [];
+  for (const segment of protectSegments(value)) {
+    if (segment.protected) {
+      continue;
+    }
+
+    wordTokenPattern.lastIndex = 0;
+    for (const match of segment.value.matchAll(wordTokenPattern)) {
+      const token = match[0];
+      if (isAuditedToken(token)) {
+        tokens.push(token);
+      }
+    }
+  }
+  return tokens;
+};
+
+const stripMarks = (value) => value.normalize("NFKD").replace(/\p{M}/gu, "");
+
+const slugify = (token, usedKeys) => {
+  const base =
+    stripMarks(token)
+      .toLocaleLowerCase()
+      .replace(/[^\p{L}\p{N}]+/gu, "_")
+      .replace(/^_+|_+$/g, "")
+      .replace(/_{2,}/g, "_") || "word";
+  const prefixed = /^\p{N}/u.test(base) ? `word_${base}` : base;
+  let key = prefixed;
+  let suffix = 2;
+  while (usedKeys.has(key)) {
+    key = `${prefixed}_${suffix}`;
+    suffix += 1;
+  }
+  usedKeys.add(key);
+  return key;
+};
+
+const isCapitalizedToken = (token) => {
+  const lower = token.toLocaleLowerCase();
+  return token === `${lower.charAt(0).toLocaleUpperCase()}${lower.slice(1)}` && token !== lower;
+};
+
+const isUpperToken = (token) => token.length > 1 && token === token.toLocaleUpperCase() && token !== token.toLocaleLowerCase();
+
+const isLowerToken = (token) => token === token.toLocaleLowerCase() && token !== token.toLocaleUpperCase();
+
+const linkedWord = (keyPath, modifier = "") => `@${modifier}:{'${keyPath}'}`;
+
+const applyTextModifier = (value, modifier) => {
+  switch (modifier) {
+    case ".capitalize":
+      return `${value.charAt(0).toLocaleUpperCase()}${value.slice(1)}`;
+    case ".upper":
+      return value.toLocaleUpperCase();
+    case ".lower":
+      return value.toLocaleLowerCase();
+    default:
+      return value;
+  }
+};
+
+const modifierForToken = (token, word) => {
+  if (normalizeToken(token) !== normalizeToken(word.value)) {
+    return null;
+  }
+
+  const candidateModifiers = ["", ".upper", ".capitalize", ".lower"];
+  for (const modifier of candidateModifiers) {
+    if (applyTextModifier(word.value, modifier) === token) {
+      return modifier;
+    }
+  }
+
+  return null;
+};
+
+const replaceRepeatedTokens = (value, tokenToWord) =>
+  protectSegments(value)
+    .map((segment) => {
+      if (segment.protected) {
+        return segment.value;
+      }
+
+      return segment.value.replace(wordTokenPattern, (token) => {
+        const normalized = normalizeToken(token);
+        const word = tokenToWord.get(normalized);
+        if (!word || !isAuditedToken(token)) {
+          return token;
+        }
+
+        const exactVariant = word.variants?.get(token);
+        if (exactVariant) {
+          return linkedWord(exactVariant.path);
+        }
+
+        const modifier = modifierForToken(token, word);
+        if (modifier !== null) {
+          return linkedWord(word.path, modifier);
+        }
+
+        return token;
+      });
+    })
+    .join("");
+
+const applyLinkedModifier = (value, modifier) => {
+  return applyTextModifier(value, modifier);
+};
+
+const resolveLinkedMessage = (messages, keyPath, seen = new Set()) => {
+  if (seen.has(keyPath)) {
+    return undefined;
+  }
+  seen.add(keyPath);
+
+  const value = getValueAtPath(messages, keyPath);
+  if (typeof value !== "string") {
+    return undefined;
+  }
+
+  const exactLink = value.trim().match(linkedMessagePattern);
+  if (exactLink) {
+    const resolved = resolveLinkedMessage(messages, exactLink.groups.literal ?? exactLink.groups.path, seen);
+    return resolved === undefined ? undefined : applyLinkedModifier(resolved, exactLink.groups.modifier);
+  }
+
+  return value.replace(linkTokenPattern, (token) => {
+    const match = token.match(linkedMessagePattern);
+    if (!match?.groups) {
+      return token;
+    }
+
+    const resolved = resolveLinkedMessage(messages, match.groups.literal ?? match.groups.path, new Set(seen));
+    if (resolved === undefined) {
+      return token;
+    }
+
+    return applyLinkedModifier(resolved, match.groups.modifier);
+  });
+};
+
+const reorderLocaleRoot = (localeMessages) => {
+  const { words, templates, ...rest } = localeMessages;
+  return { words, templates, ...rest };
+};
+
+const transformLocale = (locale, originalMessages) => {
+  const messages = cloneJson(originalMessages);
+  const entries = flattenStringEntries(messages).filter((entry) => !entry.key.startsWith("words."));
+  const tokenStats = new Map();
+
+  for (const entry of entries) {
+    for (const token of collectTokens(entry.value)) {
+      const normalized = normalizeToken(token);
+      const stat = tokenStats.get(normalized) ?? { count: 0, casings: new Map() };
+      stat.count += 1;
+      stat.casings.set(token, (stat.casings.get(token) ?? 0) + 1);
+      tokenStats.set(normalized, stat);
+    }
+  }
+
+  const repeatedTokens = [...tokenStats.entries()]
+    .filter(([, stat]) => stat.count > 1)
+    .sort(([left], [right]) => compareStringValues(left, right));
+  const existingWords = messages.words ?? {};
+  const generatedWords = {};
+  const tokenToWord = new Map();
+  const usedKeys = new Set(Object.keys(existingWords.generated ?? {}));
+
+  for (const [normalized, stat] of repeatedTokens) {
+    const existingWordEntry = flattenStringEntries(existingWords).find(
+      (entry) => normalizeToken(entry.value) === normalized
+    );
+    if (existingWordEntry) {
+      tokenToWord.set(normalized, { path: `words.${existingWordEntry.key}`, value: existingWordEntry.value });
+      continue;
+    }
+
+    const casings = [...stat.casings.entries()].sort(
+      ([leftToken, leftCount], [rightToken, rightCount]) =>
+        rightCount - leftCount || compareStringValues(leftToken, rightToken)
+    );
+    const lowerCaseToken = casings.find(([token]) => token === normalized)?.[0];
+    const canonical = lowerCaseToken ?? casings[0][0];
+    const key = slugify(normalized, usedKeys);
+    generatedWords[key] = canonical;
+    const word = { path: `words.generated.${key}`, value: canonical, variants: new Map() };
+
+    for (const [casing] of casings) {
+      if (modifierForToken(casing, word) !== null) {
+        continue;
+      }
+
+      const variantKey = slugify(`${normalized}_${casing}`, usedKeys);
+      generatedWords[variantKey] = casing;
+      word.variants.set(casing, { path: `words.generated.${variantKey}`, value: casing });
+    }
+
+    tokenToWord.set(normalized, word);
+  }
+
+  messages.words = {
+    grammar: messages.words?.grammar ?? {},
+    actions: messages.words?.actions ?? {},
+    entities: messages.words?.entities ?? {},
+    statuses: messages.words?.statuses ?? {},
+    domain: messages.words?.domain ?? {},
+    services: messages.words?.services ?? {},
+    units: messages.words?.units ?? {},
+    ...(messages.words ?? {}),
+    generated: {
+      ...(messages.words?.generated ?? {}),
+      ...Object.fromEntries(Object.entries(generatedWords).sort(([left], [right]) => compareStringValues(left, right))),
+    },
+  };
+
+  for (const entry of entries) {
+    const nextValue = replaceRepeatedTokens(entry.value, tokenToWord);
+    if (nextValue !== entry.value) {
+      setValueAtPath(messages, entry.key, nextValue);
+    }
+  }
+
+  const mismatches = [];
+  for (const entry of entries) {
+    const previousResolved = resolveLinkedMessage(originalMessages, entry.key);
+    const resolved = resolveLinkedMessage(messages, entry.key);
+    if (resolved !== previousResolved) {
+      mismatches.push(`${entry.key}: expected ${JSON.stringify(previousResolved)}, got ${JSON.stringify(resolved)}`);
+    }
+  }
+
+  return {
+    messages: reorderLocaleRoot(messages),
+    generatedWordCount: Object.keys(generatedWords).length,
+    repeatedTokenCount: repeatedTokens.length,
+    mismatches,
+  };
+};
+
+const countRepeatedTokensOutsideWords = (messages) => {
+  const counts = new Map();
+  for (const entry of flattenStringEntries(messages).filter((entry) => !entry.key.startsWith("words."))) {
+    for (const token of collectTokens(entry.value)) {
+      const normalized = normalizeToken(token);
+      counts.set(normalized, (counts.get(normalized) ?? 0) + 1);
+    }
+  }
+  return [...counts.entries()].filter(([, count]) => count > 1);
+};
+
+let hasErrors = false;
+
+for (const locale of activeLocales) {
+  const filePath = path.join(localesDirectory, `${locale}-v2.json`);
+  const originalMessages = readJson(filePath);
+  const result = transformLocale(locale, originalMessages);
+  const repeatedAfter = countRepeatedTokensOutsideWords(result.messages);
+
+  if (result.mismatches.length > 0) {
+    hasErrors = true;
+    console.error(`${locale}: transformed output changed ${result.mismatches.length} strings`);
+    for (const mismatch of result.mismatches.slice(0, 20)) {
+      console.error(`  ${mismatch}`);
+    }
+  }
+
+  if (repeatedAfter.length > 0) {
+    hasErrors = true;
+    console.error(`${locale}: ${repeatedAfter.length} repeated token groups remain outside words`);
+    for (const [token, count] of repeatedAfter.slice(0, 20)) {
+      console.error(`  ${token}: ${count}`);
+    }
+  }
+
+  console.log(
+    `${locale}: ${result.repeatedTokenCount} repeated token groups, ${result.generatedWordCount} new generated word entries`
+  );
+
+  if (mode === "apply" && !hasErrors) {
+    writeJson(filePath, result.messages);
+  }
+}
+
+if (hasErrors) {
+  process.exit(1);
+}

scripts/playwright-pr-mapping.mjs

@@ -0,0 +1,89 @@
+export const chromiumProjects = ["chromium-desktop", "chromium-mobile"];
+export const prGrep = "@pr";
+export const smokeGrep = "@smoke";
+
+export const fallbackChangePatterns = [
+  /^package(?:-lock)?\.json$/u,
+  /^vite\.config\.js$/u,
+  /^playwright(?:\..+)?\.config\.(?:js|ts)$/u,
+  /^playwright\.global-(?:setup|teardown)\.mjs$/u,
+  /^scripts\/run-playwright/u,
+  /^tests\/e2e\/(?:support|fixtures)\//u,
+];
+
+export const sourceMappings = [
+  {
+    name: "auth",
+    patterns: [/^src\/(?:views|components|middleware)\/.*auth/iu, /^src\/views\/auth\//u, /^src\/components\/session\//u],
+    specs: ["tests/e2e/auth.smoke.spec.js", "tests/e2e/userAuth.spec.ts"],
+    projects: chromiumProjects,
+  },
+  {
+    name: "public-routes",
+    patterns: [/^src\/views\/pages\//u, /^src\/components\/page\//u, /^src\/router\.js$/u],
+    specs: ["tests/e2e/navigation.smoke.spec.js"],
+    projects: chromiumProjects,
+  },
+  {
+    name: "booking",
+    patterns: [/bookings?/iu, /time-bookings/iu, /^src\/views\/guest\/book\//u],
+    specs: [
+      "tests/e2e/booking-selfserve.smoke.spec.js",
+      "tests/e2e/userBookWash.spec.ts",
+      "tests/e2e/userBookings.spec.ts",
+    ],
+    projects: chromiumProjects,
+  },
+  {
+    name: "user-vehicles",
+    patterns: [/^src\/components\/displays\/user\/vehicles\//u, /^src\/views\/dashboards\/userDashboard\/vehicles\//u],
+    specs: ["tests/e2e/userVehicles.spec.ts"],
+    projects: chromiumProjects,
+  },
+  {
+    name: "pos",
+    patterns: [/\/pos[/-]/iu, /POS/iu, /^src\/assets\/pos\.css$/u],
+    specs: ["tests/e2e/pos-flow.spec.js", "tests/e2e/pos-mobile-order-flow.spec.js", "tests/e2e/admin-pos-orders.spec.ts"],
+    projects: chromiumProjects,
+  },
+  {
+    name: "edge-gateways",
+    patterns: [/edge[-/]?gateways?/iu, /edgeGateway/iu],
+    specs: ["tests/e2e/edge-gateways.smoke.spec.js", "tests/e2e/edge-gateways.routes.spec.js"],
+    projects: chromiumProjects,
+  },
+  {
+    name: "invoicing",
+    patterns: [/invoic/iu, /economic[-/]?queue/iu, /collected-order/iu],
+    specs: [
+      "tests/e2e/invoicing-period.smoke.spec.js",
+      "tests/e2e/invoice-distribution.smoke.spec.js",
+      "tests/e2e/invoice-transfer-queue-history.spec.js",
+    ],
+    projects: chromiumProjects,
+  },
+  {
+    name: "workfeed",
+    patterns: [/workfeed/iu],
+    specs: ["tests/e2e/workfeed-config.smoke.spec.js"],
+    projects: chromiumProjects,
+  },
+  {
+    name: "system-status",
+    patterns: [/system[-/]?status/iu, /systemDatabase/iu, /replication/iu],
+    specs: ["tests/e2e/superuser-system-status.smoke.spec.js"],
+    projects: chromiumProjects,
+  },
+  {
+    name: "self-serve",
+    patterns: [/self[-/]?serve/iu, /selfserve/iu, /wash\/MyWash/iu],
+    specs: ["tests/e2e/self-serve-wash.spec.js", "tests/e2e/self-serve-studio-flow.spec.js"],
+    projects: chromiumProjects,
+  },
+  {
+    name: "i18n",
+    patterns: [/^src\/i18n\//u, /i18n/iu, /locales/iu],
+    specs: ["tests/e2e/i18n.smoke.spec.ts"],
+    projects: chromiumProjects,
+  },
+];

scripts/postinstall-sync-playwright-root-links.mjs

@@ -1,22 +0,0 @@
-import fs from "node:fs";
-import path from "node:path";
-import { spawnSync } from "node:child_process";
-
-const helperScriptPath = path.resolve(process.cwd(), "..", "scripts", "sync-playwright-root-links.mjs");
-
-if (!fs.existsSync(helperScriptPath)) {
-  console.log(
-    `Skipping root Playwright link sync: helper script not found at ${helperScriptPath}.`
-  );
-  process.exit(0);
-}
-
-const result = spawnSync(process.execPath, [helperScriptPath], {
-  stdio: "inherit",
-});
-
-if (typeof result.status === "number") {
-  process.exit(result.status);
-}
-
-process.exit(1);

scripts/release/update-server-version.mjs

@@ -0,0 +1,50 @@
+import { execSync } from "node:child_process";
+
+function gitCommit() {
+  try {
+    return execSync("git rev-parse --short HEAD", { encoding: "utf8" }).trim();
+  } catch {
+    return "";
+  }
+}
+
+async function main() {
+  const token = process.env.SERVER_UPDATE_TOKEN;
+  const required = process.env.RELEASE_VERSION_UPDATE_REQUIRED === "true";
+  if (!token) {
+    if (required) {
+      throw new Error("SERVER_UPDATE_TOKEN is required after deploy verification.");
+    }
+    console.log("SERVER_UPDATE_TOKEN is not set. Skipping server version update.");
+    return;
+  }
+
+  const version = process.env.RELEASE_VERSION || process.env.RELEASE_EXPECTED_COMMIT || process.env.GITHUB_SHA || gitCommit();
+  if (!version) {
+    throw new Error("Could not determine release version for server update.");
+  }
+
+  const baseUrl = process.env.SERVER_UPDATE_URL || "https://api-v2.truckwash.io/master/api/worker/update-version";
+  const url = new URL(baseUrl);
+  url.searchParams.set("version", version);
+
+  const response = await fetch(url, {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${token}`,
+      "Cache-Control": "no-cache",
+    },
+  });
+
+  const body = await response.text();
+  if (!response.ok) {
+    throw new Error(`Server version update failed with HTTP ${response.status}: ${body}`);
+  }
+
+  console.log(`Server version updated to ${version}.`);
+}
+
+main().catch((error) => {
+  console.error(error instanceof Error ? error.stack || error.message : error);
+  process.exit(1);
+});

scripts/release/upload-dist-lftp.sh

@@ -0,0 +1,85 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+DIST_DIR="${DIST_DIR:-dist}"
+REMOTE_ROOT="${RELEASE_DEPLOY_REMOTE_ROOT:-/}"
+HOST="${RELEASE_DEPLOY_HOST:-}"
+USER_NAME="${RELEASE_DEPLOY_USER:-}"
+PASSWORD="${RELEASE_DEPLOY_PASSWORD:-}"
+DEPLOY_URL="${RELEASE_DEPLOY_URL:-}"
+
+if [[ ! -d "$DIST_DIR" ]]; then
+  echo "Missing dist directory: $DIST_DIR" >&2
+  exit 1
+fi
+
+if ! command -v lftp >/dev/null 2>&1; then
+  echo "lftp is required for FTP/SFTP uploads." >&2
+  exit 1
+fi
+
+if [[ -z "$DEPLOY_URL" ]]; then
+  if [[ -z "$HOST" || -z "$USER_NAME" || -z "$PASSWORD" ]]; then
+    echo "Set RELEASE_DEPLOY_URL or RELEASE_DEPLOY_HOST, RELEASE_DEPLOY_USER, and RELEASE_DEPLOY_PASSWORD." >&2
+    exit 1
+  fi
+  DEPLOY_URL="ftp://${HOST}"
+elif [[ -n "$USER_NAME" || -n "$PASSWORD" ]]; then
+  if [[ -z "$USER_NAME" || -z "$PASSWORD" ]]; then
+    echo "Set both RELEASE_DEPLOY_USER and RELEASE_DEPLOY_PASSWORD when providing deploy credentials separately." >&2
+    exit 1
+  fi
+fi
+
+lftp_quote() {
+  local value="${1//\'/\'\\\'\'}"
+  printf "'%s'" "$value"
+}
+
+run_lftp() {
+  local transfer_command="$1"
+
+  {
+    printf 'set ftp:ssl-allow true\n'
+    printf 'set ftp:ssl-force true\n'
+    printf 'set ftp:ssl-protect-data true\n'
+    printf 'set net:max-retries 3\n'
+    printf 'set net:timeout 20\n'
+
+    if [[ -n "$USER_NAME" && -n "$PASSWORD" ]]; then
+      printf 'open -u %s,%s %s\n' "$(lftp_quote "$USER_NAME")" "$(lftp_quote "$PASSWORD")" "$(lftp_quote "$DEPLOY_URL")"
+    else
+      printf 'open %s\n' "$(lftp_quote "$DEPLOY_URL")"
+    fi
+
+    printf 'cd %s\n' "$(lftp_quote "$REMOTE_ROOT")"
+    printf '%s\n' "$transfer_command"
+    printf 'bye\n'
+  } | lftp -f /dev/stdin
+}
+
+upload_file() {
+  local source_file="$1"
+  local remote_file="$2"
+  if [[ -f "$source_file" ]]; then
+    run_lftp "put -O $(lftp_quote "$(dirname "$remote_file")") $(lftp_quote "$source_file") -o $(lftp_quote "$(basename "$remote_file")")"
+  fi
+}
+
+for directory in assets resources favicons icons img sounds .well-known; do
+  if [[ -d "$DIST_DIR/$directory" ]]; then
+    run_lftp "mirror -R --only-newer --parallel=4 $(lftp_quote "$DIST_DIR/$directory") $(lftp_quote "$directory")"
+  fi
+done
+
+find "$DIST_DIR" -maxdepth 1 -type f \
+  ! -name 'index.html' \
+  ! -name 'release-entry.json' \
+  ! -name 'release-manifest.json' \
+  -print0 | while IFS= read -r -d '' file; do
+  upload_file "$file" "$(basename "$file")"
+done
+
+upload_file "$DIST_DIR/release-manifest.json" "release-manifest.json"
+upload_file "$DIST_DIR/release-entry.json" "release-entry.json"
+upload_file "$DIST_DIR/index.html" "index.html"

scripts/release/verify-upload.mjs

@@ -0,0 +1,215 @@
+import crypto from "node:crypto";
+
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+function numberEnv(name, fallback) {
+  const value = Number.parseInt(process.env[name] || "", 10);
+  return Number.isFinite(value) && value >= 0 ? value : fallback;
+}
+
+function requiredUrl() {
+  const value = process.env.RELEASE_BASE_URL || process.env.PLAYWRIGHT_BASE_URL;
+  if (!value) {
+    throw new Error("RELEASE_BASE_URL or PLAYWRIGHT_BASE_URL is required.");
+  }
+
+  return value.endsWith("/") ? value : `${value}/`;
+}
+
+function pathUrl(baseUrl, assetPath) {
+  const path = String(assetPath || "").replace(/^\/+/, "");
+  return new URL(path, baseUrl).href;
+}
+
+async function fetchBytes(url) {
+  const response = await fetch(url, {
+    headers: {
+      "Cache-Control": "no-cache",
+      Pragma: "no-cache",
+    },
+  });
+  const bytes = Buffer.from(await response.arrayBuffer());
+  return {
+    response,
+    bytes,
+    text: () => bytes.toString("utf8"),
+  };
+}
+
+async function fetchJson(baseUrl, assetPath) {
+  const url = pathUrl(baseUrl, assetPath);
+  const result = await fetchBytes(url);
+  const contentType = result.response.headers.get("content-type") || "";
+  if (!result.response.ok) {
+    throw new Error(`${assetPath} returned HTTP ${result.response.status}`);
+  }
+  if (contentType.includes("text/html")) {
+    throw new Error(`${assetPath} was served as HTML`);
+  }
+  if (result.bytes.length === 0) {
+    throw new Error(`${assetPath} was empty`);
+  }
+
+  try {
+    return JSON.parse(result.text());
+  } catch (error) {
+    throw new Error(`${assetPath} did not contain valid JSON: ${error instanceof Error ? error.message : error}`);
+  }
+}
+
+function compareCommit(actual, expected) {
+  if (!expected) {
+    return true;
+  }
+
+  return actual === expected || actual.startsWith(expected);
+}
+
+function unique(values) {
+  return Array.from(new Set(values.filter(Boolean)));
+}
+
+function sha256(bytes) {
+  return crypto.createHash("sha256").update(bytes).digest("hex");
+}
+
+function shouldRejectHtml(assetPath) {
+  return /\.(?:js|css|json|webmanifest|svg|png|ico|woff2?|mp3)$/i.test(assetPath);
+}
+
+async function verifyAsset(baseUrl, assetPath, expectedHash) {
+  const url = pathUrl(baseUrl, assetPath);
+  const result = await fetchBytes(url);
+  const contentType = result.response.headers.get("content-type") || "";
+
+  if (!result.response.ok) {
+    throw new Error(`${assetPath} returned HTTP ${result.response.status}`);
+  }
+  if (result.bytes.length === 0) {
+    throw new Error(`${assetPath} was empty`);
+  }
+  if (shouldRejectHtml(assetPath) && contentType.includes("text/html")) {
+    throw new Error(`${assetPath} was served as HTML (${contentType})`);
+  }
+  if (expectedHash?.sha256) {
+    const actualHash = sha256(result.bytes);
+    if (actualHash !== expectedHash.sha256) {
+      throw new Error(`${assetPath} sha256 mismatch: expected ${expectedHash.sha256}, got ${actualHash}`);
+    }
+  }
+}
+
+async function verifyShell(baseUrl, shellPath) {
+  const result = await fetchBytes(pathUrl(baseUrl, shellPath));
+  const contentType = result.response.headers.get("content-type") || "";
+  const body = result.text();
+
+  if (!result.response.ok) {
+    throw new Error(`${shellPath} returned HTTP ${result.response.status}`);
+  }
+  if (!contentType.includes("text/html")) {
+    throw new Error(`${shellPath} did not return HTML (${contentType})`);
+  }
+  if (body.replace(/\s+/g, "").length < 40) {
+    throw new Error(`${shellPath} returned an empty app shell`);
+  }
+  if (!body.includes('<div id="app"></div>')) {
+    throw new Error(`${shellPath} did not include the Vue app root`);
+  }
+}
+
+async function verifyRelease(baseUrl) {
+  const expectedCommit = process.env.RELEASE_EXPECTED_COMMIT || process.env.GITHUB_SHA || "";
+  const expectedBuildId = process.env.RELEASE_EXPECTED_BUILD_ID || process.env.RELEASE_BUILD_ID || "";
+  const manifest = await fetchJson(baseUrl, "release-manifest.json");
+  const releaseEntry = await fetchJson(baseUrl, "release-entry.json");
+
+  if (!manifest.build_id) {
+    throw new Error("release-manifest.json is missing build_id");
+  }
+  if (!compareCommit(String(manifest.commit_sha || ""), expectedCommit)) {
+    throw new Error(`release-manifest.json commit_sha ${manifest.commit_sha || "(missing)"} did not match ${expectedCommit}`);
+  }
+  if (expectedBuildId && manifest.build_id !== expectedBuildId) {
+    throw new Error(`release-manifest.json build_id ${manifest.build_id} did not match ${expectedBuildId}`);
+  }
+  if (releaseEntry.entry !== manifest.entry) {
+    throw new Error("release-entry.json entry does not match release-manifest.json");
+  }
+
+  const releaseCss = JSON.stringify(releaseEntry.css || []);
+  const manifestCss = JSON.stringify(manifest.css || []);
+  if (releaseCss !== manifestCss) {
+    throw new Error("release-entry.json css does not match release-manifest.json");
+  }
+
+  const shellPaths = unique((process.env.RELEASE_SHELL_PATHS || "/,/guest/book/wash").split(",").map((value) => value.trim()));
+  for (const shellPath of shellPaths) {
+    await verifyShell(baseUrl, shellPath);
+  }
+
+  const assetUrls = unique([
+    "release-manifest.json",
+    "release-entry.json",
+    manifest.entry,
+    ...(manifest.css || []),
+    ...(manifest.index_asset_urls || []),
+    ...(manifest.pwa_asset_urls || []),
+    ...(manifest.asset_urls || []),
+  ]);
+
+  for (const assetUrl of assetUrls) {
+    if (assetUrl === "/index.html") {
+      continue;
+    }
+    await verifyAsset(baseUrl, assetUrl, manifest.asset_hashes?.[assetUrl] || manifest.asset_hashes?.[`/${String(assetUrl).replace(/^\/+/, "")}`]);
+  }
+
+  return {
+    build_id: manifest.build_id,
+    commit_sha: manifest.commit_sha,
+    assets: assetUrls.length,
+  };
+}
+
+async function main() {
+  const baseUrl = requiredUrl();
+  const initialWaitSeconds = numberEnv("RELEASE_WAIT_INITIAL_SECONDS", 30);
+  const timeoutSeconds = numberEnv("RELEASE_WAIT_TIMEOUT_SECONDS", 300);
+  const pollIntervalSeconds = numberEnv("RELEASE_POLL_INTERVAL_SECONDS", 10);
+
+  if (initialWaitSeconds > 0) {
+    console.log(`Waiting ${initialWaitSeconds}s before polling ${baseUrl}`);
+    await sleep(initialWaitSeconds * 1000);
+  }
+
+  const deadline = Date.now() + timeoutSeconds * 1000;
+  let attempt = 0;
+  let lastError = null;
+
+  while (Date.now() <= deadline) {
+    attempt += 1;
+    try {
+      const result = await verifyRelease(baseUrl);
+      console.log(
+        `Release upload verified after ${attempt} attempt(s): build_id=${result.build_id}, commit_sha=${result.commit_sha}, assets=${result.assets}`
+      );
+      return;
+    } catch (error) {
+      lastError = error;
+      const message = error instanceof Error ? error.message : String(error);
+      console.log(`Release upload not ready on attempt ${attempt}: ${message}`);
+      if (Date.now() > deadline) {
+        break;
+      }
+      await sleep(pollIntervalSeconds * 1000);
+    }
+  }
+
+  throw lastError || new Error("Release upload verification timed out.");
+}
+
+main().catch((error) => {
+  console.error(error instanceof Error ? error.stack || error.message : error);
+  process.exit(1);
+});

scripts/run-playwright-full-slice.mjs

@@ -1,24 +1,34 @@
 import { execFile, spawn } from "node:child_process";
 import fs from "node:fs/promises";
 import path from "node:path";
+import { fileURLToPath } from "node:url";
 import { promisify } from "node:util";
 
 const workingDirectory = process.cwd();
 const playwrightCliPath = path.join(workingDirectory, "node_modules", "@playwright", "test", "cli.js");
 const execFileAsync = promisify(execFile);
-const roles = ["customer", "subuser", "admin", "superuser"];
+export const roles = ["customer", "subuser", "admin", "superuser"];
 const listEntryPattern = /^\s+\[[^\]]+\]\s+›\s+(.+?):(\d+):(\d+)\s+›\s+(.+)\s*$/u;
 
-const ownedFilesByRole = {
+export const ownedFilesByRole = {
   customer: [
     "auth.smoke.spec.js",
     "booking-selfserve.smoke.spec.js",
     "connectivityIssue.spec.ts",
     "example.spec.ts",
+    "guest-book-wash-mobile.spec.ts",
+    "i18n-catalog-switch.spec.ts",
+    "i18n-v2-integrity.spec.ts",
     "i18n.smoke.spec.ts",
     "i18n.views.spec.ts",
     "navigation.smoke.spec.js",
+    "qr-new-customer-layout.spec.ts",
+    "release-bootstrap.spec.js",
+    "release-channel-switched.spec.js",
+    "release-channel-unavailable.spec.js",
+    "release-update-widget.spec.js",
     "self-serve-wash.spec.js",
+    "session-release-runtime.spec.ts",
     "user-orders.spec.ts",
     "userBookings.spec.ts",
     "userBookWash.spec.ts",
@@ -52,6 +62,7 @@ const ownedFilesByRole = {
     "assign-draft-order-modal-layout.spec.ts",
     "change-invoice-collection.spec.ts",
     "change-customer.spec.ts",
+    "default-mobile-redirect.spec.ts",
     "economic-queue-workflow.spec.js",
     "pos-customer-rules.spec.js",
     "pos-desktop-card-payments.spec.js",
@@ -61,23 +72,40 @@ 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",
     "edge-gateways.visual.spec.js",
+    "errorReports.spec.ts",
+    "failover-config.source.spec.ts",
     "invoice-distribution.smoke.spec.js",
+    "invoice-transfer-monitor.spec.ts",
     "invoice-transfer-queue-history.spec.js",
     "invoicing-period.smoke.spec.js",
+    "issue-repro-duplicates-date.spec.js",
+    "release-manager.spec.js",
+    "self-serve-sessions.spec.js",
+    "self-serve-studio-audit-navigation.spec.js",
+    "self-serve-studio-flow.spec.js",
+    "session-bootstrap.spec.ts",
     "superuser-bookings.spec.ts",
     "superuser-customer-complaints.spec.ts",
+    "superuser-customers-mass-import.spec.ts",
+    "superuser-department-branding.spec.js",
     "superuser-department-gates.spec.ts",
+    "superuser-department-lanes.spec.ts",
+    "superuser-departments-archive.spec.ts",
     "superuser-drafts.spec.ts",
+    "superuser-products-layout.spec.ts",
     "superuser-system-status.smoke.spec.js",
+    "superuser-users.spec.ts",
     "superuser-vehicles.smoke.spec.js",
     "workfeed-config.smoke.spec.js",
   ],
 };
 
-const titleRules = [
+export const titleRules = [
   { role: "customer", file: "userAuth.spec.ts", patterns: [/\[AUTH\]\[User\]/u] },
   { role: "subuser", file: "userAuth.spec.ts", patterns: [/\[AUTH\]\[Subuser\]/u] },
   { role: "admin", file: "userAuth.spec.ts", patterns: [/\[AUTH\]\[Operator\]/u] },
@@ -104,6 +132,11 @@ const titleRules = [
     file: "subuser-management.spec.ts",
     patterns: [/^authorized subuser managers/i, /^subuser self-service/i, /^subusers without /i],
   },
+  {
+    role: "superuser",
+    file: "subuser-management.spec.ts",
+    patterns: [/^superusers can list and invite chauffeurs/i],
+  },
   { role: "subuser", file: "userProfileVisibility.spec.ts", patterns: [/\[PROFILE\]\[Subuser\]\[Visibility\]/u] },
 ];
 
@@ -188,7 +221,7 @@ function toBaseName(filePath) {
   return filePath.split(/[\\/]/u).pop() || filePath;
 }
 
-function parseListedTests(listOutput) {
+export function parseListedTests(listOutput) {
   return listOutput
     .split(/\r?\n/u)
     .map((line) => {
@@ -210,7 +243,7 @@ function parseListedTests(listOutput) {
     .filter(Boolean);
 }
 
-function classifyTest(testEntry) {
+export function classifyTest(testEntry) {
   const matches = new Set();
   const directOwner = ownedFileToRole.get(testEntry.fileName);
 
@@ -297,8 +330,8 @@ async function runPlaywright(project, testListPath, forwardedArgs) {
   });
 }
 
-async function main() {
-  const { options, forwardedArgs } = parseCliArgs(process.argv.slice(2));
+export async function main(argv = process.argv.slice(2)) {
+  const { options, forwardedArgs } = parseCliArgs(argv);
   validateOptions(options, forwardedArgs);
 
   const listOutput = await listProjectTests(options.project, forwardedArgs);
@@ -330,4 +363,17 @@ async function main() {
   await runPlaywright(options.project, testListPath, forwardedArgs);
 }
 
-await main();
+async function isDirectRun() {
+  if (!process.argv[1]) {
+    return false;
+  }
+
+  const currentPath = await fs.realpath(fileURLToPath(import.meta.url));
+  const invokedPath = await fs.realpath(process.argv[1]).catch(() => path.resolve(process.argv[1]));
+
+  return currentPath === invokedPath;
+}
+
+if (await isDirectRun()) {
+  await main();
+}

scripts/run-playwright-pr.mjs

@@ -0,0 +1,448 @@
+import { execFile, spawn } from "node:child_process";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { promisify } from "node:util";
+import { chromiumProjects, fallbackChangePatterns, prGrep, smokeGrep, sourceMappings } from "./playwright-pr-mapping.mjs";
+
+const execFileAsync = promisify(execFile);
+const workingDirectory = process.cwd();
+const playwrightCliPath = path.join(workingDirectory, "node_modules", "@playwright", "test", "cli.js");
+const args = parseArgs(process.argv.slice(2));
+const activeChildren = new Set();
+let isShuttingDown = false;
+
+for (const signal of ["SIGINT", "SIGTERM"]) {
+  process.on(signal, () => {
+    void shutdown(signal).finally(() => {
+      process.exit(130);
+    });
+  });
+}
+
+function parseArgs(rawArgs) {
+  const parsed = {
+    help: false,
+    changedOnly: false,
+    listOnly: false,
+    base: "",
+    head: "",
+    projects: [],
+    forwardedArgs: [],
+  };
+
+  for (let index = 0; index < rawArgs.length; index += 1) {
+    const value = rawArgs[index];
+
+    if (value === "--") {
+      parsed.forwardedArgs.push(...rawArgs.slice(index + 1));
+      break;
+    }
+
+    if (value === "--help" || value === "-h") {
+      parsed.help = true;
+      continue;
+    }
+
+    if (value === "--changed-only") {
+      parsed.changedOnly = true;
+      continue;
+    }
+
+    if (value === "--list-only") {
+      parsed.listOnly = true;
+      continue;
+    }
+
+    if (value === "--base" && rawArgs[index + 1] !== undefined) {
+      parsed.base = rawArgs[index + 1];
+      index += 1;
+      continue;
+    }
+
+    if (value.startsWith("--base=")) {
+      parsed.base = value.slice("--base=".length);
+      continue;
+    }
+
+    if (value === "--head" && rawArgs[index + 1] !== undefined) {
+      parsed.head = rawArgs[index + 1];
+      index += 1;
+      continue;
+    }
+
+    if (value.startsWith("--head=")) {
+      parsed.head = value.slice("--head=".length);
+      continue;
+    }
+
+    if (value === "--project" && rawArgs[index + 1] !== undefined) {
+      parsed.projects.push(rawArgs[index + 1]);
+      index += 1;
+      continue;
+    }
+
+    if (value.startsWith("--project=")) {
+      parsed.projects.push(value.slice("--project=".length));
+      continue;
+    }
+
+    parsed.forwardedArgs.push(value);
+  }
+
+  return parsed;
+}
+
+function printUsage() {
+  console.log(`
+Playwright PR runner
+
+Usage:
+  node scripts/run-playwright-pr.mjs [options] [-- <playwright args>]
+
+Options:
+  --base <ref>       Base ref for changed-area detection
+  --head <ref>       Head ref for changed-area detection. Default: HEAD
+  --project <name>   Restrict to one Chromium Playwright project. Can be repeated.
+  --changed-only     Run changed-area selection without the core @pr gate
+  --list-only        List selected tests instead of running them
+  -h, --help         Show help
+
+Examples:
+  npm run test:e2e:pr
+  npm run test:e2e:changed -- --base=HEAD~1 --head=HEAD
+`);
+}
+
+function normalizePath(value) {
+  return value.replace(/\\/g, "/").replace(/^\.\//u, "");
+}
+
+function isZeroSha(value) {
+  return /^0{40}$/u.test(value || "");
+}
+
+function getSelectedProjects(projects = args.projects) {
+  return projects.length > 0 ? projects : chromiumProjects;
+}
+
+function unique(values) {
+  return [...new Set(values)];
+}
+
+function sanitizeNamespace(value) {
+  return value.replace(/[^a-zA-Z0-9._-]+/g, "-");
+}
+
+function getArtifactNamespace(suffix) {
+  const baseNamespace = process.env.PLAYWRIGHT_ARTIFACT_NAMESPACE || "pr";
+  return sanitizeNamespace(`${baseNamespace}-${suffix}`);
+}
+
+function buildProjectArgs(projects) {
+  return projects.flatMap((project) => ["--project", project]);
+}
+
+async function runPlaywright({ label, commandArgs, artifactSuffix }) {
+  const finalArgs = ["test", ...commandArgs, ...args.forwardedArgs];
+
+  if (args.listOnly && !finalArgs.includes("--list")) {
+    finalArgs.push("--list");
+  }
+
+  console.log(`[playwright-pr] ${args.listOnly ? "Listing" : "Running"} ${label}: playwright ${finalArgs.join(" ")}`);
+
+  return new Promise((resolve) => {
+    const child = spawn(process.execPath, [playwrightCliPath, ...finalArgs], {
+      cwd: workingDirectory,
+      env: {
+        ...process.env,
+        PLAYWRIGHT: "1",
+        PLAYWRIGHT_ARTIFACT_NAMESPACE: getArtifactNamespace(artifactSuffix),
+        PLAYWRIGHT_REPORTER_MODE: "line-html",
+        PLAYWRIGHT_WORKERS: process.env.PLAYWRIGHT_WORKERS || "1",
+      },
+      stdio: "inherit",
+      windowsHide: true,
+    });
+
+    activeChildren.add(child);
+    child.on("close", (code) => {
+      activeChildren.delete(child);
+      resolve(code ?? 1);
+    });
+  });
+}
+
+async function tryGitDiff(rangeArgs) {
+  const { stdout } = await execFileAsync("git", ["diff", "--name-only", "--diff-filter=ACMR", ...rangeArgs], {
+    cwd: workingDirectory,
+    maxBuffer: 16 * 1024 * 1024,
+  });
+
+  return stdout
+    .split(/\r?\n/u)
+    .map((line) => normalizePath(line.trim()))
+    .filter(Boolean);
+}
+
+async function getChangedFiles() {
+  const base = args.base.trim();
+  const head = args.head.trim() || "HEAD";
+
+  if (base && !isZeroSha(base)) {
+    try {
+      return {
+        files: await tryGitDiff([`${base}...${head}`]),
+        source: `${base}...${head}`,
+      };
+    } catch {
+      try {
+        return {
+          files: await tryGitDiff([`${base}..${head}`]),
+          source: `${base}..${head}`,
+        };
+      } catch {
+        return {
+          files: [],
+          source: `${base}...${head}`,
+          unavailable: true,
+        };
+      }
+    }
+  }
+
+  try {
+    return {
+      files: await tryGitDiff(["HEAD~1...HEAD"]),
+      source: "HEAD~1...HEAD",
+    };
+  } catch {
+    return {
+      files: [],
+      source: "HEAD~1...HEAD",
+      unavailable: true,
+    };
+  }
+}
+
+function addSpec(selection, spec, projects) {
+  const normalizedSpec = normalizePath(spec);
+  const existingProjects = selection.specProjects.get(normalizedSpec) || new Set();
+
+  for (const project of projects) {
+    existingProjects.add(project);
+  }
+
+  selection.specProjects.set(normalizedSpec, existingProjects);
+}
+
+function isE2eSpec(file) {
+  return /^tests\/e2e\/.+\.spec\.(?:js|ts)$/u.test(file);
+}
+
+function shouldFallback(file) {
+  return fallbackChangePatterns.some((pattern) => pattern.test(file));
+}
+
+function isFrontendSource(file) {
+  return /^src\//u.test(file) || /^public\//u.test(file) || /^index\.html$/u.test(file);
+}
+
+function selectChangedTests(changedFiles) {
+  const selection = {
+    specProjects: new Map(),
+    mappedFiles: [],
+    unmappedFiles: [],
+    fallback: false,
+  };
+
+  const selectedProjects = getSelectedProjects();
+
+  for (const rawFile of changedFiles) {
+    const file = normalizePath(rawFile);
+
+    if (isE2eSpec(file)) {
+      addSpec(selection, file, selectedProjects);
+      selection.mappedFiles.push(file);
+      continue;
+    }
+
+    if (shouldFallback(file)) {
+      selection.fallback = true;
+      selection.unmappedFiles.push(file);
+      continue;
+    }
+
+    if (!isFrontendSource(file)) {
+      continue;
+    }
+
+    const matches = sourceMappings.filter((mapping) => mapping.patterns.some((pattern) => pattern.test(file)));
+
+    if (matches.length === 0) {
+      selection.fallback = true;
+      selection.unmappedFiles.push(file);
+      continue;
+    }
+
+    selection.mappedFiles.push(file);
+    for (const mapping of matches) {
+      const projects = mapping.projects.filter((project) => selectedProjects.includes(project));
+      for (const spec of mapping.specs) {
+        addSpec(selection, spec, projects.length > 0 ? projects : selectedProjects);
+      }
+    }
+  }
+
+  return selection;
+}
+
+function groupSpecsByProjects(specProjects) {
+  const groups = new Map();
+
+  for (const [spec, projects] of specProjects.entries()) {
+    const projectList = unique([...projects]).sort();
+    const key = projectList.join(",");
+    const existing = groups.get(key) || {
+      projects: projectList,
+      specs: [],
+    };
+    existing.specs.push(spec);
+    groups.set(key, existing);
+  }
+
+  return [...groups.values()].map((group) => ({
+    ...group,
+    specs: group.specs.sort(),
+  }));
+}
+
+async function runCorePrGate() {
+  const projects = getSelectedProjects();
+  for (const project of projects) {
+    const code = await runPlaywright({
+      label: `core ${prGrep} gate (${project})`,
+      artifactSuffix: `core-${project}`,
+      commandArgs: ["--grep", prGrep, "--project", project],
+    });
+
+    if (code !== 0) {
+      return code;
+    }
+  }
+
+  return 0;
+}
+
+async function runChangedSelection(selection) {
+  const projects = getSelectedProjects();
+
+  if (selection.fallback) {
+    console.log(
+      `[playwright-pr] Falling back to broader ${smokeGrep} coverage because these changed files were unmapped: ${selection.unmappedFiles.join(", ")}`
+    );
+    for (const project of projects) {
+      const code = await runPlaywright({
+        label: `fallback ${smokeGrep} gate (${project})`,
+        artifactSuffix: `smoke-fallback-${project}`,
+        commandArgs: ["--grep", smokeGrep, "--grep-invert", prGrep, "--project", project],
+      });
+
+      if (code !== 0) {
+        return code;
+      }
+    }
+
+    return 0;
+  }
+
+  const groups = groupSpecsByProjects(selection.specProjects);
+  if (groups.length === 0) {
+    console.log("[playwright-pr] No changed-area E2E specs selected.");
+    return 0;
+  }
+
+  for (const [index, group] of groups.entries()) {
+    for (const project of group.projects) {
+      const code = await runPlaywright({
+        label: `changed-area specs ${index + 1}/${groups.length} (${project})`,
+        artifactSuffix: `changed-${index + 1}-${project}`,
+        commandArgs: [...group.specs, "--project", project],
+      });
+
+      if (code !== 0) {
+        return code;
+      }
+    }
+  }
+
+  return 0;
+}
+
+async function shutdown(signal) {
+  if (isShuttingDown) {
+    return;
+  }
+
+  isShuttingDown = true;
+  console.error(`Received ${signal}. Stopping active Playwright PR children...`);
+
+  await Promise.all(
+    [...activeChildren].map(
+      (child) =>
+        new Promise((resolve) => {
+          if (!child.pid) {
+            resolve();
+            return;
+          }
+
+          if (process.platform === "win32") {
+            const killer = spawn("taskkill", ["/PID", String(child.pid), "/T", "/F"], {
+              stdio: "ignore",
+              windowsHide: true,
+            });
+            killer.on("close", resolve);
+            return;
+          }
+
+          child.kill("SIGTERM");
+          resolve();
+        })
+    )
+  );
+}
+
+async function main() {
+  if (args.help) {
+    printUsage();
+    return;
+  }
+
+  await fs.access(playwrightCliPath);
+
+  if (!args.changedOnly) {
+    const coreCode = await runCorePrGate();
+    if (coreCode !== 0) {
+      process.exitCode = coreCode;
+      return;
+    }
+  }
+
+  const changed = await getChangedFiles();
+  if (changed.unavailable) {
+    console.log(`[playwright-pr] Changed-area diff unavailable for ${changed.source}; skipping changed-area selection.`);
+    return;
+  }
+
+  console.log(`[playwright-pr] Changed-area diff ${changed.source}: ${changed.files.length} file(s).`);
+  const selection = selectChangedTests(changed.files);
+  const changedCode = await runChangedSelection(selection);
+  if (changedCode !== 0) {
+    process.exitCode = changedCode;
+  }
+}
+
+await main().catch((error) => {
+  console.error(error instanceof Error ? error.message : error);
+  process.exitCode = 1;
+});

scripts/run-vitest-unit-batches.mjs

@@ -2,7 +2,7 @@ import { spawn } from "node:child_process";
 import fs from "node:fs/promises";
 import path from "node:path";
 
-const workingDirectory = process.cwd();
+const workingDirectory = await fs.realpath(process.cwd());
 const vitestCliPath = path.join(workingDirectory, "node_modules", "vitest", "vitest.mjs");
 const unitTestsRoot = path.join(workingDirectory, "tests", "unit");
 const args = parseArgs(process.argv.slice(2));
@@ -23,6 +23,7 @@ function parseArgs(rawArgs) {
   const parsed = {
     help: false,
     batchSize: null,
+    fromList: null,
     specFilters: [],
     forwardedArgs: [],
   };
@@ -51,6 +52,17 @@ function parseArgs(rawArgs) {
       continue;
     }
 
+    if (value === "--from-list" && rawArgs[index + 1]) {
+      parsed.fromList = rawArgs[index + 1];
+      index += 1;
+      continue;
+    }
+
+    if (value.startsWith("--from-list=")) {
+      parsed.fromList = value.slice("--from-list=".length);
+      continue;
+    }
+
     if (value.startsWith("-")) {
       parsed.forwardedArgs.push(...rawArgs.slice(index));
       break;
@@ -80,15 +92,31 @@ Usage:
 
 Options:
   --batch-size <n>   Spec files per batch. Default: 5
+  --from-list <file> Read additional spec filters from a newline-delimited file
   -h, --help         Show help
 
 Examples:
   npm run test:unit
+  npm run test:unit:serial
   npm run test:unit -- tests/unit/select-vehicle-form-pos.spec.js
   npm run test:unit -- tests/unit/select-vehicle-form-pos.spec.js -- --reporter=verbose
 `);
 }
 
+async function readSpecFilterList(listFile) {
+  if (!listFile) {
+    return [];
+  }
+
+  const listPath = path.isAbsolute(listFile) ? listFile : path.join(workingDirectory, listFile);
+  const contents = await fs.readFile(listPath, "utf8");
+
+  return contents
+    .split(/\r?\n/u)
+    .map((line) => line.replace(/#.*/u, "").trim())
+    .filter(Boolean);
+}
+
 async function collectSpecFiles(targetDirectory) {
   const directoryEntries = await fs.readdir(targetDirectory, { withFileTypes: true });
   const files = [];
@@ -234,7 +262,8 @@ async function main() {
   await fs.access(vitestCliPath);
 
   const discoveredFiles = await collectSpecFiles(unitTestsRoot);
-  const selectedFiles = applyFilters(discoveredFiles, args.specFilters);
+  const listFilters = await readSpecFilterList(args.fromList);
+  const selectedFiles = applyFilters(discoveredFiles, [...listFilters, ...args.specFilters]);
 
   if (selectedFiles.length === 0) {
     throw new Error("No unit spec files matched the provided filters.");

scripts/run-vitest-unit-fast.mjs

@@ -0,0 +1,219 @@
+import { spawn } from "node:child_process";
+import fs from "node:fs/promises";
+import path from "node:path";
+
+const workingDirectory = await fs.realpath(process.cwd());
+const vitestCliPath = path.join(workingDirectory, "node_modules", "vitest", "vitest.mjs");
+const unitTestsRoot = path.join(workingDirectory, "tests", "unit");
+const serialListPath = path.join(unitTestsRoot, "serial-tests.txt");
+const args = parseArgs(process.argv.slice(2));
+
+let activeChild = null;
+let isShuttingDown = false;
+
+for (const signal of ["SIGINT", "SIGTERM"]) {
+  process.on(signal, () => {
+    void shutdown(signal).finally(() => {
+      process.exit(130);
+    });
+  });
+}
+
+function parseArgs(rawArgs) {
+  const parsed = {
+    help: false,
+    specFilters: [],
+    forwardedArgs: [],
+  };
+
+  for (let index = 0; index < rawArgs.length; index += 1) {
+    const value = rawArgs[index];
+
+    if (value === "--") {
+      parsed.forwardedArgs.push(...rawArgs.slice(index + 1));
+      break;
+    }
+
+    if (value === "--help" || value === "-h") {
+      parsed.help = true;
+      continue;
+    }
+
+    if (value.startsWith("-")) {
+      parsed.forwardedArgs.push(...rawArgs.slice(index));
+      break;
+    }
+
+    parsed.specFilters.push(value);
+  }
+
+  return parsed;
+}
+
+function normalizePathSegments(value) {
+  return value.replace(/\\/g, "/");
+}
+
+function printUsage() {
+  console.log(`
+Vitest fast unit runner
+
+Usage:
+  node scripts/run-vitest-unit-fast.mjs [spec-filter ...] [-- <vitest args>]
+
+Runs all unit specs except entries in tests/unit/serial-tests.txt.
+
+Environment:
+  VITEST_FAST_MAX_WORKERS   Optional max workers for the fast pass
+
+Examples:
+  npm run test:unit:fast
+  npm run test:unit:fast -- tests/unit/workfeed
+  npm run test:unit:fast -- --reporter=verbose
+`);
+}
+
+async function collectSpecFiles(targetDirectory) {
+  const directoryEntries = await fs.readdir(targetDirectory, { withFileTypes: true });
+  const files = [];
+
+  for (const entry of directoryEntries) {
+    const absolutePath = path.join(targetDirectory, entry.name);
+
+    if (entry.isDirectory()) {
+      files.push(...(await collectSpecFiles(absolutePath)));
+      continue;
+    }
+
+    if (entry.isFile() && entry.name.endsWith(".spec.js")) {
+      files.push(absolutePath);
+    }
+  }
+
+  return files.sort((left, right) => left.localeCompare(right));
+}
+
+async function readSerialAllowlist() {
+  const contents = await fs.readFile(serialListPath, "utf8");
+
+  return new Set(
+    contents
+      .split(/\r?\n/u)
+      .map((line) => line.replace(/#.*/u, "").trim())
+      .filter(Boolean)
+      .map(normalizePathSegments)
+  );
+}
+
+function matchesFilter(relativePath, rawFilter) {
+  const normalizedRelativePath = normalizePathSegments(relativePath);
+  const normalizedFilter = normalizePathSegments(rawFilter.trim());
+
+  if (!normalizedFilter) {
+    return false;
+  }
+
+  return (
+    normalizedRelativePath === normalizedFilter ||
+    normalizedRelativePath.endsWith(normalizedFilter) ||
+    normalizedRelativePath.includes(normalizedFilter)
+  );
+}
+
+function applyFilters(files, specFilters) {
+  if (specFilters.length === 0) {
+    return files;
+  }
+
+  return files.filter((absolutePath) => {
+    const relativePath = path.relative(workingDirectory, absolutePath);
+    return specFilters.some((filter) => matchesFilter(relativePath, filter));
+  });
+}
+
+function hasForwardedArg(name) {
+  return args.forwardedArgs.some((value) => value === name || value.startsWith(`${name}=`));
+}
+
+function resolveMaxWorkers() {
+  return (process.env.VITEST_FAST_MAX_WORKERS || "").trim();
+}
+
+async function runVitest(files) {
+  const enforcedArgs = [];
+
+  const configuredMaxWorkers = resolveMaxWorkers();
+  if (configuredMaxWorkers && !hasForwardedArg("--maxWorkers")) {
+    enforcedArgs.push(`--maxWorkers=${configuredMaxWorkers}`);
+  }
+
+  return new Promise((resolve) => {
+    activeChild = spawn(process.execPath, [vitestCliPath, "run", ...files, ...enforcedArgs, ...args.forwardedArgs], {
+      cwd: workingDirectory,
+      env: process.env,
+      stdio: "inherit",
+      windowsHide: true,
+    });
+
+    activeChild.on("close", (code) => {
+      activeChild = null;
+      resolve(code ?? 1);
+    });
+  });
+}
+
+async function shutdown(signal) {
+  if (isShuttingDown) {
+    return;
+  }
+
+  isShuttingDown = true;
+  console.error(`Received ${signal}. Stopping active Vitest fast run...`);
+
+  if (activeChild?.pid) {
+    if (process.platform === "win32") {
+      spawn("taskkill", ["/PID", String(activeChild.pid), "/T", "/F"], {
+        stdio: "ignore",
+        windowsHide: true,
+      });
+    } else {
+      activeChild.kill("SIGTERM");
+    }
+  }
+}
+
+async function main() {
+  if (args.help) {
+    printUsage();
+    return;
+  }
+
+  await fs.access(vitestCliPath);
+
+  const serialAllowlist = await readSerialAllowlist();
+  const discoveredFiles = await collectSpecFiles(unitTestsRoot);
+  const fastFiles = discoveredFiles.filter((absolutePath) => {
+    const relativePath = normalizePathSegments(path.relative(workingDirectory, absolutePath));
+    return !serialAllowlist.has(relativePath);
+  });
+  const selectedFiles = applyFilters(fastFiles, args.specFilters);
+
+  if (selectedFiles.length === 0) {
+    console.log("No parallel-safe unit spec files matched the provided filters.");
+    return;
+  }
+
+  console.log(
+    `Running ${selectedFiles.length} parallel-safe unit spec file(s); ${serialAllowlist.size} spec file(s) remain in the serial allowlist.`
+  );
+
+  const code = await runVitest(selectedFiles);
+  if (code !== 0) {
+    process.exitCode = code;
+  }
+}
+
+await main().catch((error) => {
+  console.error(error instanceof Error ? error.message : error);
+  process.exitCode = 1;
+});

src/App.vue

@@ -1,41 +1,51 @@
 <script setup>
-import { computed, defineAsyncComponent, onMounted, watch } from "vue";
+import { computed, defineAsyncComponent, onBeforeUnmount, onMounted, watch } from "vue";
 // Set the favicon to the /favicon.ico file
 import { useHead } from "@vueuse/head";
-import favicon from '@/assets/favicon.ico';
-import {useRoute} from "vue-router";
-import LayoutV2 from "@/components/page/wrappers/LayoutV2.vue";
+import favicon from "@/assets/favicon.ico";
+import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { hasStoredSessionToken } from "@/services/sessionStorage.js";
+import {
+  releaseChannelSwitchedStatus,
+  releaseChannelUnavailableStatus,
+  startReleaseChannelAvailabilityClock,
+  stopReleaseChannelAvailabilityClock,
+} from "@/services/releaseChannelAvailability.js";
 
 const route = useRoute();
 const { t, te, locale } = useI18n({ useScope: "global" });
 const APP_TITLE = "Truck Wash";
+const LayoutV2 = defineAsyncComponent(() => import("@/components/page/wrappers/LayoutV2.vue"));
 const DefaultPageWrapper = defineAsyncComponent(() => import("@/components/page/wrappers/DefaultPageWrapper.vue"));
-const VersionCheck = defineAsyncComponent(() => import("@/components/global/VersionCheck.vue"));
 const RequestQueueProgress = defineAsyncComponent(() => import("@/components/global/RequestQueueProgress.vue"));
+const ErrorReportLauncher = defineAsyncComponent(() => import("@/components/global/ErrorReportLauncher.vue"));
+const ReleaseChannelUnavailable = defineAsyncComponent(() =>
+  import("@/components/release/ReleaseChannelUnavailable.vue")
+);
+const ReleaseChannelSwitched = defineAsyncComponent(() => import("@/components/release/ReleaseChannelSwitched.vue"));
 
 const routeTitleI18nKeys = {
   "about-us": ["header.about_us"],
   "book-a-demo": ["about_us.solutions.operator.book_demo"],
   "customer-creation": ["header.customer_creation"],
-  "login": ["header.customer_login"],
-  "subuserlogin": ["header.customer_login"],
-  "adminlogin": ["header.operator_login"],
-  "guestHome": ["guest.home.title"],
-  "PwaDownload": ["guest.pwa.title"],
+  login: ["header.customer_login"],
+  subuserlogin: ["header.customer_login"],
+  adminlogin: ["header.operator_login"],
+  guestHome: ["guest.home.title"],
+  PwaDownload: ["guest.pwa.title"],
   "connectivity-issue": ["connectivity.title"],
-  "selfservestudio": ["admin.self_serve.title"]
+  selfservestudio: ["admin.self_serve.title"],
 };
 
 const toReadableTitle = (value) => {
   if (!value) return "";
   return value
-      .replace(/([a-z])([A-Z])/g, "$1 $2")
-      .replace(/[-_]+/g, " ")
-      .replace(/\s+/g, " ")
-      .trim()
-      .replace(/\b\w/g, (char) => char.toUpperCase());
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/[-_]+/g, " ")
+    .replace(/\s+/g, " ")
+    .trim()
+    .replace(/\b\w/g, (char) => char.toUpperCase());
 };
 
 const resolveRouteTitle = () => {
@@ -49,7 +59,7 @@ const resolveRouteTitle = () => {
   }
 
   const routeName = typeof route.name === "string" ? route.name : "";
-  const knownKeys = routeName ? (routeTitleI18nKeys[routeName] || []) : [];
+  const knownKeys = routeName ? routeTitleI18nKeys[routeName] || [] : [];
   for (const key of knownKeys) {
     if (te(key)) return t(key);
   }
@@ -63,6 +73,13 @@ const updateDocumentTitle = () => {
 };
 
 const shouldRenderRequestQueueProgress = computed(() => hasStoredSessionToken());
+const shouldRenderReleaseChannelUnavailable = computed(() => releaseChannelUnavailableStatus.value.shouldBlock);
+const shouldRenderReleaseChannelSwitched = computed(
+  () => !shouldRenderReleaseChannelUnavailable.value && releaseChannelSwitchedStatus.value.shouldShow
+);
+const shouldHideGlobalOverlays = computed(
+  () => shouldRenderReleaseChannelUnavailable.value || shouldRenderReleaseChannelSwitched.value
+);
 
 const initiateStoredSession = async () => {
   if (!hasStoredSessionToken()) {
@@ -78,19 +95,24 @@ const initiateStoredSession = async () => {
 };
 
 useHead({
-  link: [
-    { rel: 'icon', type: 'image/x-icon', href: favicon }
-  ]
+  link: [{ rel: "icon", type: "image/x-icon", href: favicon }],
 });
 onMounted(() => {
+  startReleaseChannelAvailabilityClock();
   void initiateStoredSession();
 });
 
+onBeforeUnmount(() => {
+  stopReleaseChannelAvailabilityClock();
+});
+
 watch([() => route.fullPath, locale], updateDocumentTitle, { immediate: true });
 </script>
 
 <template>
-  <LayoutV2 v-if="route.meta?.template === 'with-header'">
+  <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'">
@@ -100,13 +122,12 @@ watch([() => route.fullPath, locale], updateDocumentTitle, { immediate: true });
     <header></header>
     <main>
       <DefaultPageWrapper>
-        <VersionCheck/>
         <router-view />
       </DefaultPageWrapper>
     </main>
   </template>
-  <RequestQueueProgress v-if="shouldRenderRequestQueueProgress" />
+  <RequestQueueProgress v-if="shouldRenderRequestQueueProgress && !shouldHideGlobalOverlays" />
+  <ErrorReportLauncher v-if="shouldRenderRequestQueueProgress && !shouldHideGlobalOverlays" />
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>

src/assets/pos.css

@@ -760,6 +760,7 @@
 
 .pos-step-one-insights {
   display: grid;
+  align-items: stretch;
   gap: 0.9rem;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
 }
@@ -903,6 +904,7 @@
 
 .pos-step-one-insight-card__section {
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
   gap: 0.55rem;
   min-width: 0;
@@ -970,6 +972,7 @@
 .pos-step-one-empty-state,
 .pos-step-one-loading-state {
   display: flex;
+  flex: 1 1 auto;
   align-items: center;
   justify-content: center;
   min-height: 4rem;

src/components/LanguageSwitcher.vue

@@ -74,10 +74,7 @@ watch(locale, (newLocale) => {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 8px 16px;
   background-color: transparent;
-  border: 1.5px solid rgba(255, 255, 255, 0.3);
-  border-radius: 8px;
   color: #fff;
   cursor: pointer;
   font-size: 14px;

src/components/displays/CustomerComplaints.vue

@@ -1,18 +1,10 @@
 <script setup>
 import CustomerComplaintsPagination from "@/components/displays/pagination/models/SuperUserDashboard/CustomerComplaintsPagination.vue";
-import PageTitle from "@/components/global/PageTitle.vue";
-import { useI18n } from "vue-i18n";
-
-const { t } = useI18n();
 </script>
 
 <template>
   <div data-testid="superuser-complaints-page">
-    <PageTitle
-      :title="t('superuser.pages.complaints.title')"
-      :subtitle="t('superuser.pages.complaints.subtitle')"
-    />
-    <CustomerComplaintsPagination auto-load="true" />
+    <CustomerComplaintsPagination :auto-load="true" />
   </div>
 </template>
 

src/components/displays/Departments.vue

@@ -1,26 +1,15 @@
 <script setup>
-import { ref } from 'vue'
-import { getDepartmentListData } from "@/components/session/Session.vue";
 import { showCreateDepartmentForm } from "@/components/forms/superUser/createDepartmentForm.vue";
 import PageTitle from "@/components/global/PageTitle.vue";
 import DepartmentsPagination from "@/components/displays/pagination/models/SuperUserDashboard/DepartmentsPagination.vue";
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
-const tableData = ref([]);
-
-getDepartmentListData().then((response) => {
-  tableData.value = response.data.data;
-});
-
-const redirect = (path) => {
-  window.location = path;
-}
 </script>
 
 <template>
   <div>
-    <PageTitle :title="t('superuser.pages.departments.title')" :subtitle="t('superuser.pages.departments.subtitle')">
+    <PageTitle :title="t('common.departments')" :subtitle="t('superuser.pages.departments.subtitle')">
       <template #buttons>
         <button class="button is-dark" @click="showCreateDepartmentForm">
           <span class="icon">
@@ -36,4 +25,4 @@ const redirect = (path) => {
 
 <style scoped>
 
-</style>
+</style>

src/components/displays/Products.vue

@@ -11,7 +11,7 @@ const { t } = useI18n();
 
 <template>
   <div>
-    <PageTitle :title="t('superuser.pages.products.title')" :subtitle="t('superuser.pages.products.subtitle')">
+    <PageTitle :title="t('common.products')" :subtitle="t('superuser.pages.products.subtitle')">
       <template #buttons>
         <button class="button is-dark" @click="SessionUser.objects.products.showCreateObjectForm(loadList)">
           <span class="icon">

src/components/displays/Subusers.vue

@@ -6,15 +6,35 @@ import SubusersPagination from "@/components/displays/pagination/models/SuperUse
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import SubuserGrantSelector from "@/components/session/subuser/SubuserGrantSelector.vue";
 
+const props = defineProps({
+  endpoint: {
+    type: String,
+    default: "/subusers",
+  },
+  showCustomer: {
+    type: Boolean,
+    default: false,
+  },
+  superuserPage: {
+    type: Boolean,
+    default: false,
+  },
+});
 const { t } = useI18n();
 
-const canInvite = computed(() => SessionUser.canAccessUser() || SessionUser.hasPermission("SUBUSERS_ADD"));
+const canInvite = computed(() =>
+  props.superuserPage
+    ? SessionUser.canAccessSuperUser()
+    : SessionUser.canAccessUser() || SessionUser.hasPermission("SUBUSERS_ADD")
+);
 const requiresGrantSelection = computed(
-  () => SessionUser.isSubuser.value && !SessionUser.subuser.selectedGrantCustomerNumber.value
+  () => !props.superuserPage && SessionUser.isSubuser.value && !SessionUser.subuser.selectedGrantCustomerNumber.value
 );
 const paginationVersion = ref(0);
 const paginationKey = computed(() =>
-  SessionUser.isSubuser.value
+  props.superuserPage
+    ? `subusers-superuser-${paginationVersion.value}`
+    : SessionUser.isSubuser.value
     ? `subusers-${SessionUser.subuser.selectedGrantCustomerNumber.value || "none"}-${paginationVersion.value}`
     : `subusers-user-${paginationVersion.value}`
 );
@@ -22,13 +42,13 @@ const paginationKey = computed(() =>
 const onInviteClick = async () => {
   await SessionUser.objects.subusers.functions.showInviteForm(() => {
     paginationVersion.value += 1;
-  });
+  }, { superuser: props.superuserPage });
 };
 </script>
 
 <template>
   <div>
-    <PageTitle :title="t('superuser.pages.subusers.title')" :subtitle="t('superuser.pages.subusers.subtitle')">
+    <PageTitle :title="SessionUser.objects.subusers.meta.title" :subtitle="t('superuser.pages.subusers.subtitle')">
       <template #buttons>
         <button v-if="canInvite" class="button is-dark" type="button" @click="onInviteClick">
           <span class="icon">
@@ -39,7 +59,7 @@ const onInviteClick = async () => {
       </template>
     </PageTitle>
 
-    <div v-if="SessionUser.isSubuser.value" class="mb-5">
+    <div v-if="SessionUser.isSubuser.value && !superuserPage" class="mb-5">
       <SubuserGrantSelector />
       <p class="help">
         Vælg den kunde, du vil administrere chauffører for. Listen og rettighederne følger det valgte kundenummer.
@@ -50,7 +70,13 @@ const onInviteClick = async () => {
       Vælg først en kunde for at se og administrere chauffører.
     </div>
 
-    <SubusersPagination v-else :key="paginationKey" auto-load="true" />
+    <SubusersPagination
+      v-else
+      :key="paginationKey"
+      :endpoint="endpoint"
+      :show-customer="showCustomer"
+      auto-load="true"
+    />
   </div>
 </template>
 

src/components/displays/boxes/WhiteBoxCard.vue

@@ -51,6 +51,10 @@ const props = defineProps({
   hasBorder: {
     type: Boolean,
     default: false
+  },
+  headerTestId: {
+    type: String,
+    default: ""
   }
 });
 /**
@@ -95,7 +99,7 @@ watch(() => props.forceState, (newVal) => {
         </div>
       </div>
       <!-- Default slot for header -->
-      <div class="card-header is-radiusless" @click="toggle" :class="{ 'is-clickable': props.toggleable }" v-if="$slots.header && !props.hideHeader">
+      <div class="card-header is-radiusless" @click="toggle" :class="{ 'is-clickable': props.toggleable }" v-if="$slots.header && !props.hideHeader" :data-testid="props.headerTestId || undefined">
         <slot name="header"></slot>
       </div>
       <!-- Default slot for any content -->

src/components/displays/buttons/ActionSettingsWheelItem.vue

@@ -6,6 +6,10 @@ const props = defineProps({
   icon: String,
   label: String,
   disabled: Boolean,
+  testId: {
+    type: String,
+    default: "",
+  },
   template: String // The style of the button (default, danger, success, warning, info, light)
 });
 const emit = defineEmits(['selected']);
@@ -131,6 +135,7 @@ const getLabelColor = () => {
       @click.stop.prevent="click"
       :class="{'is-disabled': isDisabled()}"
       :disabled="isDisabled()"
+      :data-testid="props.testId || undefined"
   >
                     <span class="icon">
                       <i :class="getIcon() + ' ' + getIconColor()"></i>

src/components/displays/buttons/DatePeriodSelector.vue

@@ -119,9 +119,25 @@ const formatDateInputValue = (date: Date) => {
     return "";
   }
 
-  return date.toISOString().split("T")[0];
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
 };
 
+const parseDateInputValue = (value: string) => {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  if (!match) {
+    return new Date(value);
+  }
+
+  return new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+};
+
+const isSameDateInputValue = (left: Date, right: Date) => (
+  formatDateInputValue(left) === formatDateInputValue(right)
+);
+
 const updateSelection = () => {
   emits("update:selection", { startDate: startDate.value, endDate: endDate.value });
   props.onSelectionChange(startDate.value, endDate.value);
@@ -177,25 +193,38 @@ const isSelectionValid = computed(() => (
 ));
 
 const handleStartDateChange = (event) => {
-  const newDate = new Date(event.target.value);
+  const newDate = parseDateInputValue(event.target.value);
   if (Number.isNaN(newDate.getTime())) {
     console.warn("Invalid start date:", event.target.value);
     return;
   }
 
+  if (isSameDateInputValue(newDate, startDate.value)) {
+    return;
+  }
+
   applyDateRange(newDate, endDate.value);
 };
 
 const handleEndDateChange = (event) => {
-  const newDate = new Date(event.target.value);
+  const newDate = parseDateInputValue(event.target.value);
   if (Number.isNaN(newDate.getTime())) {
     console.warn("Invalid end date:", event.target.value);
     return;
   }
 
+  if (isSameDateInputValue(newDate, endDate.value)) {
+    return;
+  }
+
   applyDateRange(startDate.value, newDate);
 };
 
+const getFullMonthRange = (year: number, month: number): DateRange => ({
+  startDate: new Date(year, month - 1, 1, 0, 0, 0, 0),
+  endDate: new Date(year, month, 0, 23, 59, 59, 999),
+});
+
 const setMonth = (month: number) => {
   if (month < 1 || month > 12) {
     console.warn("Invalid month selection:", month);
@@ -203,9 +232,8 @@ const setMonth = (month: number) => {
   }
 
   const year = startDate.value.getFullYear();
-  const startOfMonth = new Date(year, month - 1, 1);
-  const endOfMonth = new Date(year, month, 0);
-  applyDateRange(startOfMonth, endOfMonth);
+  const range = getFullMonthRange(year, month);
+  applyDateRange(range.startDate, range.endDate);
 };
 
 const handleMonthChange = (event) => {
@@ -217,6 +245,10 @@ const handleMonthChange = (event) => {
   setMonth(month);
 };
 
+const setCurrentSelectionEntireMonth = () => {
+  setMonth(currentMonthSelection.value);
+};
+
 const handleYearChange = (event) => {
   const year = parseInt(event.target.value, 10);
   if (Number.isNaN(year)) {
@@ -307,24 +339,14 @@ const shortcuts = computed<Shortcut[]>(() => {
       label: SessionUser.objects.global.language.text.this_month,
       getRange: () => {
         const today = new Date();
-        const firstDayOfThisMonth = new Date(today.getFullYear(), today.getMonth(), 1);
-        const lastDayOfThisMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
-        return {
-          startDate: new Date(firstDayOfThisMonth.setHours(23, 59, 59, 999)),
-          endDate: new Date(lastDayOfThisMonth.setHours(23, 59, 59, 999)),
-        };
+        return getFullMonthRange(today.getFullYear(), today.getMonth() + 1);
       },
     },
     {
       label: SessionUser.objects.global.language.text.last_month,
       getRange: () => {
         const today = new Date();
-        const firstDayOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
-        const lastDayOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 0);
-        return {
-          startDate: new Date(firstDayOfLastMonth.setHours(23, 59, 59, 999)),
-          endDate: new Date(lastDayOfLastMonth.setHours(23, 59, 59, 999)),
-        };
+        return getFullMonthRange(today.getFullYear(), today.getMonth());
       },
     },
     {
@@ -346,16 +368,7 @@ const shortcuts = computed<Shortcut[]>(() => {
       label: SessionUser.objects.global.language.text.same_month_last_year,
       getRange: () => {
         const today = new Date();
-        const firstDayOfThisMonth = new Date(today.getFullYear(), today.getMonth(), 1);
-        const lastDayOfThisMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
-        const firstDayOfLastYearSameMonth = new Date(firstDayOfThisMonth);
-        firstDayOfLastYearSameMonth.setFullYear(firstDayOfThisMonth.getFullYear() - 1);
-        const lastDayOfLastYearSameMonth = new Date(lastDayOfThisMonth);
-        lastDayOfLastYearSameMonth.setFullYear(lastDayOfThisMonth.getFullYear() - 1);
-        return {
-          startDate: new Date(firstDayOfLastYearSameMonth.setHours(23, 59, 59, 999)),
-          endDate: new Date(lastDayOfLastYearSameMonth.setHours(23, 59, 59, 999)),
-        };
+        return getFullMonthRange(today.getFullYear() - 1, today.getMonth() + 1);
       },
     },
   ];
@@ -402,7 +415,7 @@ const handleShortcutSelection = (event) => {
               :disabled="props.isDisabled || props.isReadonly"
               @change="handleShortcutSelection"
             >
-              <option value="" disabled>Vaelg periode</option>
+              <option value="" disabled>Vælg periode</option>
               <option v-for="shortcut in shortcuts" :key="shortcut.label" :value="shortcut.label">
                 {{ shortcut.label }}
               </option>
@@ -419,6 +432,7 @@ const handleShortcutSelection = (event) => {
             class="input"
             data-testid="date-period-start"
             :value="formatDateInputValue(startDate)"
+            @input="handleStartDateChange"
             @change="handleStartDateChange"
             :disabled="props.isDisabled || props.isReadonly"
             :class="{ 'is-danger': !isSelectionValid }"
@@ -434,6 +448,7 @@ const handleShortcutSelection = (event) => {
             class="input"
             data-testid="date-period-end"
             :value="formatDateInputValue(endDate)"
+            @input="handleEndDateChange"
             @change="handleEndDateChange"
             :disabled="props.isDisabled || props.isReadonly"
             :class="{ 'is-danger': !isSelectionValid }"
@@ -494,9 +509,10 @@ const handleShortcutSelection = (event) => {
         </div>
       </div>
 
-      <div class="date-period-selector__mobile-actions" v-if="visibility.showUpdateButton">
+      <div class="date-period-selector__mobile-actions">
         <slot name="right"></slot>
         <button
+          v-if="visibility.showUpdateButton"
           class="button is-primary is-fullwidth"
           type="button"
           @click="updateSelection"
@@ -516,6 +532,7 @@ const handleShortcutSelection = (event) => {
               class="input"
               data-testid="date-period-start"
               :value="formatDateInputValue(startDate)"
+              @input="handleStartDateChange"
               @change="handleStartDateChange"
               :disabled="props.isDisabled || props.isReadonly"
               :class="{ 'is-danger': !isSelectionValid }"
@@ -530,6 +547,7 @@ const handleShortcutSelection = (event) => {
               class="input"
               data-testid="date-period-end"
               :value="formatDateInputValue(endDate)"
+              @input="handleEndDateChange"
               @change="handleEndDateChange"
               :disabled="props.isDisabled || props.isReadonly"
               :class="{ 'is-danger': !isSelectionValid }"
@@ -648,7 +666,7 @@ const handleShortcutSelection = (event) => {
         iconPack="fas"
         has-icon
       >
-        Selection is not an entire month <span class="has-text-weight-bold is-clickable" @click="setMonth(currentMonthSelection)">Click to set entire month</span>.
+        Selection is not an entire month <span class="has-text-weight-bold is-clickable" data-testid="date-period-set-entire-month" @click="setCurrentSelectionEntireMonth">Click to set entire month</span>.
         When a partial month selection is made, it may not accurately represent the intended time period. Consider selecting an entire month for more precise results.
       </b-message>
     </div>

src/components/displays/department/bookings/bookingsTable.vue

@@ -28,10 +28,10 @@ if (departments.value.length === 0) {
       <th>{{ $t('objects.columns.department') }}</th>
       <th>{{ $t('tables.bookings.reg_tractor') }}</th>
       <th>{{ $t('tables.bookings.reg_trailer') }}</th>
-      <th>{{ $t('objects.columns.reference') }}</th>
+      <th>{{ $t('common.reference') }}</th>
       <th>{{ $t('objects.columns.notes') }}</th>
-      <th>{{ $t('objects.columns.date') }}</th>
-      <th>{{ $t('objects.columns.status') }}</th>
+      <th>{{ $t('common.date') }}</th>
+      <th>{{ $t('common.status') }}</th>
       <th>{{ $t('objects.bookings.columns.contact_email') }}</th>
       <th>{{ $t('objects.bookings.columns.wash_certificate_email') }}</th>
       <th>{{ $t('tables.actions') }}</th>
@@ -53,7 +53,7 @@ if (departments.value.length === 0) {
       <td>{{ booking.washCertificateEmail }}</td>
       <td>
         <div class="buttons">
-          <button class="button is-small is-dark" @click="redirectDepartmentOrderPage(booking.id, booking.department_id)">{{ $t('global.show') }}</button>
+          <button class="button is-small is-dark" @click="redirectDepartmentOrderPage(booking.id, booking.department_id)">{{ $t('common.show') }}</button>
         </div>
       </td>
     </tr>

src/components/displays/department/moduleNavigation/DepartmentModulesDisplay.vue

@@ -94,6 +94,7 @@ const modules = computed(() => [
     },
     count: 0,
     hasSwitch: true,
+    switchLoading: isLoadingSelfServeEnabled.value || isSavingSelfServeEnabled.value,
     switchValue: selfServeEnabled,
     switchDisabled: isLoadingSelfServeEnabled.value || isSavingSelfServeEnabled.value,
     onToggle: async (newValue) => {
@@ -118,8 +119,8 @@ const modules = computed(() => [
   },
   {
     id: 6,
-    name: 'Self-Serve Studio',
-    description: 'Configure questions, conditions, rules and tasks',
+    name: 'Døgnvask konfiguration',
+    description: 'Gå til konfiguration af Døgnvask',
     icon: "fas fa-project-diagram",
     onClick: () => {
       router.push(buildDepartmentModulePath('/modules/self-serve/studio'));
@@ -225,9 +226,17 @@ setInterval(() => {
               <i :class="module.icon"></i>
             </span>
           </div>
-          <p class="card-header-title">{{ module.name }}</p>
-          <div class="is-pulled-right card-header-title pr-0">
+          <p class="card-header-title department-module-card__header-title">{{ module.name }}</p>
+          <div class="department-module-card__actions" data-testid="department-module-card-actions">
             <span class="button is-small is-dark department-module-card__count" @click.stop="module.onClickCount" v-if="module.count > 0">{{ module.count }}</span>
+            <span
+              v-else-if="module?.switchLoading"
+              class="tag is-rounded is-small department-module-card__state-loading"
+              data-testid="department-module-self-serve-state-loading"
+              role="status"
+              :aria-label="t('global.loading')"
+              @click.stop
+            ></span>
             <span class="button is-small is-outlined department-module-card__switch" v-else-if="module?.hasSwitch" @click.stop>
               <b-switch
                 size="is-small"
@@ -253,19 +262,72 @@ setInterval(() => {
   height: 100%;
 }
 
-.department-module-card .card-header-title {
+.department-module-card__header-title {
+  flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.department-module-card__actions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: auto;
+  padding-right: 0.75rem;
+}
+
 .department-module-card__count,
-.department-module-card__switch {
+.department-module-card__switch,
+.department-module-card__state-loading {
   position: relative;
   z-index: 1;
 }
 
+.department-module-card__state-loading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.5rem;
+  min-height: 1.25rem;
+  padding: 0 0.5rem !important;
+  background-color: #e5e7eb !important;
+  border: 1px solid #d1d5db !important;
+  color: transparent !important;
+  background-image:
+    radial-gradient(circle, rgba(156, 163, 175, 0.95) 0.16rem, transparent 0.18rem),
+    radial-gradient(circle, rgba(156, 163, 175, 0.95) 0.16rem, transparent 0.18rem),
+    radial-gradient(circle, rgba(156, 163, 175, 0.95) 0.16rem, transparent 0.18rem);
+  background-repeat: no-repeat;
+  background-size: 0.4rem 0.4rem;
+  background-position:
+    calc(50% - 0.5rem) 50%,
+    50% 50%,
+    calc(50% + 0.5rem) 50%;
+  animation: department-module-state-loading-pulse 1.1s ease-in-out infinite;
+}
+
+@keyframes department-module-state-loading-pulse {
+  0%,
+  100% {
+    opacity: 0.68;
+    transform: scale(0.98);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .department-module-card__state-loading {
+    animation: none;
+  }
+}
+
 @media (max-width: 768px) {
   .department-module-card__title {
     display: none;

src/components/displays/department/notifications/departmentNotificationsPhoneTable.vue

@@ -70,7 +70,7 @@ const hasUpdatePermission = () => {
           :editFunction="su_object.showEditObjectFieldForm"
           column="enabled"
           :parse-function="(value) => {
-            return value ? t('global.yes') : t('global.no');
+            return value ? t('common.yes') : t('common.no');
           }"
           :permission-check-function="hasUpdatePermission"
       />

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

@@ -1,7 +1,16 @@
 <script setup>
 import { watch } from 'vue';
 import { useRouter } from "vue-router";
-import { getCurrentStep, setDepartment, getOrderId, setStep, setOrderId, searchAndSelectCustomer, loadOrderItems } from "@/components/shop/POSDepartmentProcess.vue";
+import {
+  clearActivePosOrderContext,
+  getCurrentStep,
+  setDepartment,
+  getOrderId,
+  setStep,
+  setOrderId,
+  searchAndSelectCustomer,
+  loadOrderItems,
+} from "@/components/shop/POSDepartmentProcess.vue";
 import PosDepartmentStep1 from "@/components/displays/department/pos/steps/PosDepartmentStep1.vue";
 import PosDepartmentStep2 from "@/components/displays/department/pos/steps/PosDepartmentStep2.vue";
 import PosDepartmentStep3 from "@/components/displays/department/pos/steps/PosDepartmentStep3.vue";
@@ -41,20 +50,33 @@ const debugVehicles = () => {
       }
   );
 };
-setDepartment();
 
-watch(() => router.currentRoute.value.params.departmentId, (nextDepartmentId) => {
-  if (nextDepartmentId) {
-    setDepartment(nextDepartmentId);
-  }
-});
-
-applyPosRouteSearch(window.location.search, {
+const routeStateHandlers = {
   setOrderId,
   loadOrderItems,
   setStep,
   searchAndSelectCustomer,
-});
+  clearActivePosOrderContext,
+  resetMobilePos: () => pos.reset.pos(),
+};
+
+const getRouteSearch = (route) => {
+  const fullPath = route?.fullPath || "";
+  const queryIndex = fullPath.indexOf("?");
+  return queryIndex >= 0 ? fullPath.slice(queryIndex) : "";
+};
+
+const applyCurrentPosRoute = () => {
+  const currentRoute = router.currentRoute.value;
+  if (currentRoute.params.departmentId) {
+    setDepartment(currentRoute.params.departmentId);
+  } else {
+    setDepartment();
+  }
+  applyPosRouteSearch(getRouteSearch(currentRoute), routeStateHandlers);
+};
+
+watch(() => router.currentRoute.value.fullPath, applyCurrentPosRoute, { immediate: true });
 
 /** Define the createOrder function */
 </script>

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

@@ -246,7 +246,7 @@ const getScanBadges = (scan) => {
   if (!scan.seen_before) {
     badges.push({
       key: 'unknown',
-      text: t('admin.pos.status_unknown'),
+      text: t('common.new'),
       className: 'pos-scan-badge--unknown',
     });
   }
@@ -560,7 +560,7 @@ setTimeout(() => {
           <span class="icon">
             <i class="fas fa-redo"></i>
           </span>
-          <span>{{ $t('admin.pos.try_again') }}</span>
+          <span>{{ $t('common.retry') }}</span>
         </button>
       </div>
     </article>

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

@@ -1,5 +1,6 @@
 <script setup>
 import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
 import { showEditOrderItemForm } from "@/components/forms/superUser/editOrderItemForm.vue";
 import { removeOrderItem } from "@/components/shop/OrdersItems.vue";
 import { computed, ref, watch, useSlots } from "vue";
@@ -26,6 +27,11 @@ const props = defineProps({
   },
 });
 const emits = defineEmits(["update:orderItems", "onDestroyItem"]);
+const route = useRoute();
+const highlightOrderItemId = computed(() => {
+  const parsed = Number.parseInt(String(route.query.highlightOrderItem || ""), 10);
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : 0;
+});
 import { showPopper, removePopperIfOpen, popperBox } from "@/components/displays/PopperDefault.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
@@ -69,6 +75,10 @@ const handleCustomerWishesFieldSaved = async (fieldKey) => {
 
   await loadOrder();
 };
+
+const handleOrderNoteSaved = (savedValue) => {
+  order_notes.value = savedValue;
+};
 // Check if the size is large
 const isLarge = props.isLarge !== undefined ? props.isLarge : false;
 const isOrderDetailVariant = computed(() => props.variant === "order-detail");
@@ -502,6 +512,7 @@ const deleteOrderItem = async (orderItemId) => {
               :total-price="totalPrice"
               :show-actions="Boolean(editPossible)"
               :can-edit-order-items="canEditOrderItems"
+              :highlight-order-item-id="highlightOrderItemId"
               @edit="openOrderItemEditor"
               @delete="deleteOrderItem"
             />
@@ -518,6 +529,7 @@ const deleteOrderItem = async (orderItemId) => {
               :total-price="totalPrice"
               :show-actions="Boolean(editPossible)"
               :can-edit-order-items="canEditOrderItems"
+              :highlight-order-item-id="highlightOrderItemId"
               @edit="openOrderItemEditor"
               @delete="deleteOrderItem"
             />
@@ -528,14 +540,14 @@ const deleteOrderItem = async (orderItemId) => {
           <table v-if="false" class="table is-fullwidth pos-order-items__table">
             <thead>
               <tr>
-                <th>{{ $t("admin.pos.product") }}</th>
+                <th>{{ $t("common.product") }}</th>
                 <th style="width: 20%; text-align: right">{{ $t("admin.pos.price_dkk") }}</th>
                 <th
                   v-if="editPossible"
                   class="pos-order-items__actions-header"
                   :style="{ width: isOrderDetailVariant ? '18%' : '15%' }"
                 >
-                  {{ isOrderDetailVariant ? $t("global.actions") : "" }}
+                  {{ isOrderDetailVariant ? $t("common.actions") : "" }}
                 </th>
               </tr>
             </thead>
@@ -920,7 +932,12 @@ const deleteOrderItem = async (orderItemId) => {
               data-testid="pos-order-metadata-note"
             >
               <p class="pos-order-metadata-label">{{ $t("admin.pos.order_note") }}</p>
-              <POSOrderNote v-bind:order_id="activeOrderId" v-bind:loadOrder="loadOrder" v-bind:note="order_notes" />
+              <POSOrderNote
+                v-bind:order_id="activeOrderId"
+                v-bind:loadOrder="loadOrder"
+                v-bind:note="order_notes"
+                v-bind:onSaved="handleOrderNoteSaved"
+              />
             </section>
           </div>
         </div>

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

@@ -33,6 +33,7 @@ import ExpandableContentBox from "@/components/displays/boxes/ExpandableContentB
 import { getCustomerRuleDefinitions } from "@/features/customer/customerRuleRegistry.js";
 
 const { t } = useI18n();
+const emit = defineEmits(["update:activeTab"]);
 
 const panel_tabs = ref([
   {
@@ -151,6 +152,7 @@ const rootClasses = computed(() => ({
 }));
 const isSidebarVariant = computed(() => props.variant === "sidebar");
 const isRulesTabActive = computed(() => panel_tabs.value[1]?.active === true);
+const activeTabKey = computed(() => panel_tabs.value.find((tab) => tab.active)?.key ?? "details");
 
 const setActiveTab = (selectedIndex) => {
   panel_tabs.value.forEach((tab, index) => {
@@ -171,6 +173,14 @@ const hasAttribute = (prop) => {
   return customer_attributes.value.some((attribute) => attribute.attribute === prop);
 };
 
+watch(
+  activeTabKey,
+  (tabKey) => {
+    emit("update:activeTab", tabKey);
+  },
+  { immediate: true }
+);
+
 watch(
   isRulesTabActive,
   (isActive) => {
@@ -255,52 +265,62 @@ const customer_data_has_empty_details = () => {
       />
       <!-- Attributes -->
       <RequiresPermission permission="list_customer_attributes">
-        <div
-          class="panel-block pos-selected-customer__row"
-          v-if="panel_tabs[1].active"
-          v-for="attribute in attributes"
-          :key="attribute.attribute"
-        >
-          <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
+        <template v-if="panel_tabs[1].active">
+          <div
+            v-for="attribute in attributes"
+            :key="attribute.attribute"
+            class="panel-block pos-selected-customer__row"
+            data-testid="pos-customer-rule-row"
+            :data-rule-attribute="attribute.attribute"
           >
-          <span class="pos-selected-customer__value">
+            <span class="panel-icon pos-selected-customer__icon">
+              <i :class="attribute.icon" aria-hidden="true"></i>
+            </span>
             <span
-              v-if="hasAttribute(attribute.prop)"
-              @click="deleteAttribute(customer_id, attribute.prop).then(() => loadCustomerAttributes())"
+              class="pos-selected-customer__label"
+              @mouseover="showPopper(popperBox(attribute.name, attribute.description), $event.target)"
+              @mouseleave="removePopperIfOpen()"
+              >{{ attribute.name }}</span
             >
-              <span class="field">
-                <input
-                  :id="attribute.prop"
-                  type="checkbox"
-                  :name="attribute.prop"
-                  class="switch"
-                  checked="checked"
-                  :disabled="!SessionUser.hasPermission('delete_customer_attribute')"
-                />
-                <label :for="attribute.prop"></label>
+            <span class="pos-selected-customer__value">
+              <span
+                v-if="hasAttribute(attribute.prop)"
+                @click="deleteAttribute(customer_id, attribute.prop).then(() => loadCustomerAttributes())"
+              >
+                <span class="field">
+                  <input
+                    :id="attribute.prop"
+                    type="checkbox"
+                    :name="attribute.prop"
+                    class="switch"
+                    checked="checked"
+                    :disabled="!SessionUser.hasPermission('delete_customer_attribute')"
+                  />
+                  <label :for="attribute.prop"></label>
+                </span>
+              </span>
+              <span v-else @click="createAttribute(customer_id, attribute.prop).then(() => loadCustomerAttributes())">
+                <span class="field">
+                  <input
+                    :id="attribute.prop"
+                    type="checkbox"
+                    :name="attribute.prop"
+                    class="switch"
+                    :disabled="!SessionUser.hasPermission('add_customer_attribute')"
+                  />
+                  <label :for="attribute.prop"></label>
+                </span>
               </span>
             </span>
-            <span v-else @click="createAttribute(customer_id, attribute.prop).then(() => loadCustomerAttributes())">
-              <span class="field">
-                <input
-                  :id="attribute.prop"
-                  type="checkbox"
-                  :name="attribute.prop"
-                  class="switch"
-                  :disabled="!SessionUser.hasPermission('add_customer_attribute')"
-                />
-                <label :for="attribute.prop"></label>
-              </span>
-            </span>
-          </span>
-        </div>
+          </div>
+          <div
+            v-if="$slots['rules-footer']"
+            class="pos-selected-customer__rules-footer"
+            data-testid="pos-customer-rules-footer"
+          >
+            <slot name="rules-footer"></slot>
+          </div>
+        </template>
       </RequiresPermission>
       <!-- Shortcuts -->
       <template v-if="panel_tabs[2].active" v-for="shortcut in shortcuts" :key="shortcut.name">
@@ -425,6 +445,14 @@ const customer_data_has_empty_details = () => {
   padding: 1rem;
 }
 
+.pos-selected-customer__rules-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-top: 1px solid #eef3f8;
+}
+
 .pos-selected-customer--sidebar .pos-selected-customer__title,
 .pos-selected-customer--order-detail .pos-selected-customer__title {
   font-size: 1.05rem;

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

@@ -15,6 +15,7 @@ import {
   selectPreferredStripeTerminalReaderId,
   STRIPE_TERMINAL_STATUS,
 } from "@/components/displays/department/pos/displays/stripeTerminalReaders.js";
+import { normalizeStripeInvoice } from "@/components/displays/department/pos/displays/stripeEmailInvoice.js";
 
 const POLLING_INTERVAL_MS = 5000;
 const STRIPE_TERMINAL_SETUP_REQUIRED_CODE = 'stripe_terminal_setup_required';
@@ -87,29 +88,6 @@ const selectedTaxRate = ref(1);
 const paymentIntent = computed(() => StripeModule.paymentIntents.paymentIntent.value);
 const isTerminalPaymentCaptured = computed(() => StripeModule.paymentIntents.isPaymentIntentAmountReceived(paymentIntent.value));
 
-const normalizeStripeInvoice = (value) => {
-  if (!value || typeof value !== 'object' || Array.isArray(value) || Object.keys(value).length === 0) {
-    return null;
-  }
-
-  const invoiceId = value.invoice_id || value.id || null;
-  if (!invoiceId) {
-    return null;
-  }
-
-  return {
-    id: value.id ?? props.order_id,
-    invoice_id: invoiceId,
-    customer_id: value.customer_id ?? null,
-    url: value.url || value.hosted_invoice_url || null,
-    created_at: value.created_at || null,
-    paid: Boolean(value.paid),
-    status: value.status || 'unknown',
-    amount_due: Number(value.amount_due ?? 0),
-    amount_paid: Number(value.amount_paid ?? 0),
-  };
-};
-
 const hasStripeEmailInvoice = computed(() => stripeInvoice.value !== null);
 const isStripeEmailInvoicePaid = computed(() => stripeInvoice.value?.paid === true);
 const isStripeEmailInvoiceTerminalState = computed(() => {
@@ -202,7 +180,7 @@ const loadStripeInvoiceState = async () => {
 
   try {
     const response = await getOrder(props.order_id, true);
-    const nextInvoice = normalizeStripeInvoice(response?.data?.includes?.stripeModuleOrders);
+    const nextInvoice = normalizeStripeInvoice(response?.data?.includes?.stripeModuleOrders, props.order_id);
     stripeInvoice.value = nextInvoice;
     if (nextInvoice) {
       emailPanelState.value = 'tracking';

src/components/displays/department/pos/displays/stripeEmailInvoice.js

@@ -0,0 +1,60 @@
+const STRIPE_INVOICE_PAID_STATUS = 'paid';
+
+export const parseStripeInvoicePaidFlag = (value) => {
+  if (typeof value === 'boolean') {
+    return value;
+  }
+
+  if (typeof value === 'number') {
+    return value === 1;
+  }
+
+  if (typeof value === 'string') {
+    const normalizedValue = value.trim().toLowerCase();
+    if (['true', '1'].includes(normalizedValue)) {
+      return true;
+    }
+
+    if (['false', '0', ''].includes(normalizedValue)) {
+      return false;
+    }
+  }
+
+  return false;
+};
+
+const toFiniteNumber = (value, fallback = 0) => {
+  const parsedValue = Number(value ?? fallback);
+  return Number.isFinite(parsedValue) ? parsedValue : fallback;
+};
+
+export const normalizeStripeInvoice = (value, fallbackOrderId = null) => {
+  if (!value || typeof value !== 'object' || Array.isArray(value) || Object.keys(value).length === 0) {
+    return null;
+  }
+
+  const invoiceId = value.invoice_id || value.id || null;
+  if (!invoiceId) {
+    return null;
+  }
+
+  const status = String(value.status || 'unknown').toLowerCase();
+  const amountDue = toFiniteNumber(value.amount_due);
+  const amountPaid = toFiniteNumber(value.amount_paid);
+  const hasCoveredAmountDue = amountDue <= 0 || amountPaid >= amountDue;
+  const isPaid = status === STRIPE_INVOICE_PAID_STATUS
+    && parseStripeInvoicePaidFlag(value.paid)
+    && hasCoveredAmountDue;
+
+  return {
+    id: value.id ?? fallbackOrderId,
+    invoice_id: invoiceId,
+    customer_id: value.customer_id ?? null,
+    url: value.url || value.hosted_invoice_url || null,
+    created_at: value.created_at || null,
+    paid: isPaid,
+    status,
+    amount_due: amountDue,
+    amount_paid: amountPaid,
+  };
+};

src/components/displays/department/pos/order/POSOrderCustomerWishes.vue

@@ -121,7 +121,7 @@ const createCustomerWishField = ({
 
 const referenceField = createCustomerWishField({
   key: "reference",
-  label: computed(() => t("pos.order.reference")),
+  label: computed(() => t("common.reference")),
   source: () => props.reference,
   saveValue: (value) => SessionUser.objects.orders.set.reference(props.order_id, value),
   testIdBase: "pos-order-customer-wishes-reference",

src/components/displays/department/pos/order/POSOrderNote.vue

@@ -16,6 +16,10 @@ const props = defineProps({
   loadOrder: {
     type: Function,
     required: true
+  },
+  onSaved: {
+    type: Function,
+    default: null
   }
 });
 
@@ -29,6 +33,11 @@ const autosave = useOrderMetadataAutosave({
     await SessionUser.objects.orders.set.notes(props.order_id, value);
     return value;
   },
+  onSaved: async (savedValue, requestedValue) => {
+    if (typeof props.onSaved === "function") {
+      await props.onSaved(savedValue, requestedValue);
+    }
+  },
 });
 
 const previewValue = computed(() => autosave.draft.value);

src/components/displays/department/pos/order/PosDesktopOrderWorkspace.vue

@@ -186,7 +186,7 @@ watch(normalizedOrderId, async (nextOrderId, previousOrderId) => {
                       class="pos-inline-tag"
                       data-testid="pos-order-inline-created"
                   >
-                    <span class="pos-inline-tag__label">{{ $t('pos.order.created') }}:</span>
+                    <span class="pos-inline-tag__label">{{ $t('common.created') }}:</span>
                     <span class="pos-inline-tag__value">{{ resolvedCreatedAt }}</span>
                   </span>
                 </div>

src/components/displays/department/pos/order/PosOrderDetailItemsTable.vue

@@ -19,6 +19,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  highlightOrderItemId: {
+    type: Number,
+    default: 0,
+  },
 });
 
 const emits = defineEmits(['edit', 'delete']);
@@ -42,6 +46,7 @@ const getRowClass = (row) => {
     'pos-order-items__row--related': row.isRelated,
     'pos-order-items__row--group-parent': row.hasRelatedItems,
     'pos-order-items__row--group-middle': row.isRelated && !row.isLastRelatedItem,
+    'pos-order-items__row--highlight': Number(row?.orderItem?.id) === Number(props.highlightOrderItemId),
   };
 };
 
@@ -102,7 +107,7 @@ const getActionsCellAttrs = () => ({
     >
       <b-table-column
         field="product"
-        :label="$t('admin.pos.product')"
+        :label="$t('common.product')"
         v-slot="tableProps"
       >
         <div class="pos-order-items__product-cell" :data-testid="`pos-order-item-name-${tableProps.row.orderItem.id}`">
@@ -187,7 +192,7 @@ const getActionsCellAttrs = () => ({
       <b-table-column
         v-if="showActions"
         field="actions"
-        :label="$t('global.actions')"
+        :label="$t('common.actions')"
         custom-key="actions"
         header-class="pos-order-items__actions-header"
         :th-attrs="getActionsHeaderAttrs"
@@ -293,6 +298,11 @@ const getActionsCellAttrs = () => ({
   border-bottom-color: transparent;
 }
 
+.pos-order-items__detail-table :deep(.table tbody tr.pos-order-items__row--highlight td) {
+  background: #fff3cd !important;
+  box-shadow: inset 3px 0 0 #ffdd57;
+}
+
 .pos-order-items__detail-table :deep(.table tfoot td) {
   font-weight: 600;
   border-top: 1px solid #dfe7f1;

src/components/displays/department/pos/order/PosOrderItemEditModal.vue

@@ -116,12 +116,12 @@ const saveChanges = async () => {
     >
       <div class="pos-order-item-edit-modal__header">
         <p class="title is-5 mb-1">{{ t('admin.pos.edit') }}</p>
-        <p class="is-size-7 has-text-grey mb-0">{{ t('admin.pos.product') }} #{{ orderItem.id }}</p>
+        <p class="is-size-7 has-text-grey mb-0">{{ t('common.product') }} #{{ orderItem.id }}</p>
       </div>
 
       <div class="columns is-multiline">
         <div class="column is-12">
-          <label class="label" for="pos-order-item-edit-name">{{ t('admin.pos.product') }}</label>
+          <label class="label" for="pos-order-item-edit-name">{{ t('common.product') }}</label>
           <input
             id="pos-order-item-edit-name"
             class="input"
@@ -133,7 +133,7 @@ const saveChanges = async () => {
         </div>
 
         <div class="column is-12-mobile is-6-tablet">
-          <label class="label" for="pos-order-item-edit-price">{{ t('global.price') }}</label>
+          <label class="label" for="pos-order-item-edit-price">{{ t('common.price') }}</label>
           <input
             id="pos-order-item-edit-price"
             v-model="form.price"
@@ -147,7 +147,7 @@ const saveChanges = async () => {
         </div>
 
         <div class="column is-12-mobile is-6-tablet">
-          <label class="label" for="pos-order-item-edit-quantity">{{ t('global.quantity') }}</label>
+          <label class="label" for="pos-order-item-edit-quantity">{{ t('common.quantity') }}</label>
           <input
             id="pos-order-item-edit-quantity"
             v-model="form.quantity"
@@ -173,7 +173,7 @@ const saveChanges = async () => {
         </div>
 
         <div class="column is-12">
-          <label class="label" for="pos-order-item-edit-reference">{{ t('objects.columns.reference') }}</label>
+          <label class="label" for="pos-order-item-edit-reference">{{ t('common.reference') }}</label>
           <input
             id="pos-order-item-edit-reference"
             v-model="form.reference"

src/components/displays/department/pos/order/PosOrderItemsDefaultTable.vue

@@ -21,6 +21,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  highlightOrderItemId: {
+    type: Number,
+    default: 0,
+  },
 });
 
 const emits = defineEmits(['edit', 'delete']);
@@ -44,6 +48,7 @@ const getRowClass = (row) => {
     'pos-order-items__row--related': row.isRelated,
     'pos-order-items__row--group-parent': row.hasRelatedItems,
     'pos-order-items__row--group-middle': row.isRelated && !row.isLastRelatedItem,
+    'pos-order-items__row--highlight': Number(row?.orderItem?.id) === Number(props.highlightOrderItemId),
   };
 };
 </script>
@@ -59,7 +64,7 @@ const getRowClass = (row) => {
     >
       <b-table-column
         field="product"
-        :label="$t('admin.pos.product')"
+        :label="$t('common.product')"
         v-slot="tableProps"
       >
         <div class="pos-order-items__product-cell" :data-testid="`pos-order-item-name-${tableProps.row.orderItem.id}`">
@@ -156,7 +161,9 @@ const getRowClass = (row) => {
       >
         <div class="pos-order-items__action-cell">
           <div class="buttons is-narrow">
-            <ActionSettingsWheelButton>
+            <ActionSettingsWheelButton
+              :flag-target="{ target_type: 'order_item', target_id: tableProps.row.orderItem.id }"
+            >
               <template #actions>
                 <ActionSettingsWheelItem
                   :label="$t('admin.pos.delete')"
@@ -232,6 +239,11 @@ const getRowClass = (row) => {
   border-bottom-color: transparent;
 }
 
+.pos-order-items__default-table :deep(.table tbody tr.pos-order-items__row--highlight td) {
+  background: #fff3cd !important;
+  box-shadow: inset 3px 0 0 #ffdd57;
+}
+
 .pos-order-items__default-table :deep(.table tfoot td) {
   font-weight: 600;
 }

src/components/displays/department/pos/order/orderItemsTable.vue

@@ -44,6 +44,10 @@ const props = defineProps({
       console.warn('setItemValue function not provided', orderItem, column, value);
     },
   },
+  highlightOrderItemId: {
+    type: Number,
+    default: 0,
+  },
 });
 
 const calculateTax = (price) => {
@@ -76,9 +80,9 @@ const getOrderItemBasePrice = (orderItem) => {
     <tr>
       <th>{{ $t('tables.products.name') }}</th>
       <th>{{ $t('global.note') }}</th>
-      <th>{{ $t('objects.columns.reference') }}</th>
-      <th>{{ $t('global.quantity') }}</th>
-      <th style="text-align: right;">{{ $t('global.price') }}</th>
+      <th>{{ $t('common.reference') }}</th>
+      <th>{{ $t('common.quantity') }}</th>
+      <th style="text-align: right;">{{ $t('common.price') }}</th>
     </tr>
     </thead>
     <tbody>
@@ -88,7 +92,13 @@ const getOrderItemBasePrice = (orderItem) => {
         <div class="skeleton-lines"><div style="width: 100%;"></div></div>
       </td>
     </tr>
-    <tr v-for="orderItem in props.orderItems" :key="orderItem.id" v-else>
+    <tr
+      v-for="orderItem in props.orderItems"
+      :key="orderItem.id"
+      v-else
+      :id="`order-item-${orderItem.id}`"
+      :class="{ 'order-item-highlight': Number(orderItem.id) === Number(props.highlightOrderItemId) }"
+    >
       <td>{{ getOrderItemProductName(orderItem) }}</td>
       <td>
         <input type="text" v-if="props.allowEdit" v-model="orderItem.notes" @input="props.setItemValue(orderItem, 'notes', orderItem.notes)" class="input is-small" />
@@ -111,7 +121,7 @@ const getOrderItemBasePrice = (orderItem) => {
     <tfoot>
     <!-- Tax -->
     <tr v-if="props.taxPercentage > 0">
-      <td colspan="4">{{ $t('global.tax') }} ({{ props.taxPercentage }}%)</td>
+      <td colspan="4">{{ $t('common.tax') }} ({{ props.taxPercentage }}%)</td>
       <td style="text-align: right;" v-if="props.isLoading">
         <!-- Skeleton-lines 1 row -->
         <div class="skeleton-lines"><div style="width: 100%;"></div></div>
@@ -147,5 +157,8 @@ const getOrderItemBasePrice = (orderItem) => {
 </template>
 
 <style scoped>
-
+.order-item-highlight > td {
+  background: #fff3cd !important;
+  box-shadow: inset 3px 0 0 #ffdd57;
+}
 </style>

src/components/displays/department/pos/orders/OrderAttachmentsActionButton.vue

@@ -10,6 +10,16 @@ import { SessionUser } from "@/components/session/token/SessionUser.vue";
 const acceptedOrderAttachmentFileTypes = "image/*,application/pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx";
 const imageExtensions = [".png", ".jpg", ".jpeg", ".gif", ".webp", ".bmp", ".svg"];
 const officeExtensions = [".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx"];
+const safePreviewBlobTypesByKind = {
+  image: {
+    fallback: "image/png",
+    allowed: new Set(["image/png", "image/jpeg", "image/gif", "image/webp", "image/bmp", "image/svg+xml"]),
+  },
+  document: {
+    fallback: "application/pdf",
+    allowed: new Set(["application/pdf"]),
+  },
+};
 
 const props = defineProps({
   order: {
@@ -294,7 +304,7 @@ const uploadOrderAttachmentFile = async (file) => {
   } catch (error) {
     console.error("Error uploading order attachment:", error);
     Swal.fire({
-      title: t("admin.pos.settings_wheel.error"),
+      title: t("common.error"),
       text: t("admin.pos.attachments_upload_error"),
       icon: "error",
     });
@@ -324,7 +334,21 @@ const hasCachedPreviewSource = (attachmentId) => {
   return Object.prototype.hasOwnProperty.call(previewSourcesById.value, attachmentId);
 };
 
-const createEmbeddablePreviewUrl = async (downloadLink) => {
+const createSafePreviewBlob = (fileBlob, previewKind) => {
+  const previewBlobTypes = safePreviewBlobTypesByKind[previewKind];
+  if (!previewBlobTypes) {
+    return null;
+  }
+
+  const normalizedBlobType = String(fileBlob.type || "").toLowerCase();
+  const safeBlobType = previewBlobTypes.allowed.has(normalizedBlobType)
+    ? normalizedBlobType
+    : previewBlobTypes.fallback;
+
+  return new Blob([fileBlob], { type: safeBlobType });
+};
+
+const createEmbeddablePreviewUrl = async (downloadLink, previewKind) => {
   if (!downloadLink) {
     return null;
   }
@@ -340,7 +364,12 @@ const createEmbeddablePreviewUrl = async (downloadLink) => {
       return null;
     }
 
-    const objectUrl = URL.createObjectURL(fileBlob);
+    const safePreviewBlob = createSafePreviewBlob(fileBlob, previewKind);
+    if (!safePreviewBlob) {
+      return null;
+    }
+
+    const objectUrl = URL.createObjectURL(safePreviewBlob);
     generatedObjectUrls.add(objectUrl);
     return objectUrl;
   } catch (error) {
@@ -372,7 +401,7 @@ const ensurePreviewSource = async (attachment) => {
       attachment.id,
       false
     );
-    const previewSource = await createEmbeddablePreviewUrl(downloadLink);
+    const previewSource = await createEmbeddablePreviewUrl(downloadLink, previewKind);
     previewSourcesById.value = {
       ...previewSourcesById.value,
       [attachment.id]: previewSource,
@@ -517,6 +546,7 @@ const toggleDropdown = async () => {
             :src="activePreviewSource"
             class="order-attachments-preview-panel__document"
             title="Attachment preview"
+            sandbox
           ></iframe>
           <a
             v-else-if="activePreviewKind === 'link'"

src/components/displays/department/pos/orders/ordersTable.vue

@@ -6,6 +6,7 @@ const { t } = useI18n();
 import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
 import OrderAttachmentsActionButton from "@/components/displays/department/pos/orders/OrderAttachmentsActionButton.vue";
 import AssignDraftOrderCustomerModal from "@/components/displays/modals/AssignDraftOrderCustomerModal.vue";
+import InvoicingPeriodFlagList from "@/views/dashboards/superUserDashboard/InvoicingBillingPeriod/components/InvoicingPeriodFlagList.vue";
 
 const props = defineProps({
   orders: {
@@ -44,13 +45,19 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  invoicePeriodFlags: {
+    type: Array,
+    default: () => [],
+  },
 });
+const emit = defineEmits(["flagStatusChanged", "flagCreated"]);
 import { computed, onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { departments, getDepartments, isLoading, getDepartmentName } from "@/components/pagination/departmentTabs.vue";
 import { showPopper, removePopperIfOpen, popperBox } from "@/components/displays/PopperDefault.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
-import { orderBy, orderDirection, setOrder, loadList } from "@/components/pagination/paginatedList.vue";
+import { usePaginatedListInstance } from "@/components/pagination/paginatedList.vue";
+const { orderBy, orderDirection, setOrder, loadList } = usePaginatedListInstance();
 import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
 import OrderContentTable from "@/components/displays/superuser/tables/OrderContentTable.vue";
 import InvoiceMultipleCollectionsModal from "@/components/displays/modals/InvoiceMultipleCollectionsModal.vue";
@@ -397,6 +404,20 @@ const tableHeaders = ref([
   },
 ]);
 
+const isTableHeaderVisible = (header) => {
+  return header.visible === undefined || header.visible(null) === true;
+};
+
+const invoiceCollectionSummaryColumnSpan = computed(() => {
+  const invoiceControlColumns =
+    (props.invoiceView && props.allowSelectMultiple ? 1 : 0) + (props.invoiceView ? 1 : 0);
+  const leadingOrderColumns = tableHeaders.value.filter(
+    (header) => isTableHeaderVisible(header) && !["total_net_amount", "actions"].includes(header.name)
+  ).length;
+
+  return invoiceControlColumns + leadingOrderColumns;
+});
+
 const active_dropdown_object_ids = ref([]);
 const toggleDropdown = (object) => {
   // Check if the object is already in the active dropdown list
@@ -471,6 +492,18 @@ const invoiceCollectionQueueSuccess = invoiceQueue.invoiceCollectionQueueSuccess
 const invoiceCollectionQueue = invoiceQueue.invoiceCollectionQueue;
 const collectionQueueLog = invoiceQueue.collectionQueueLog;
 const isInvoiceMultipleCollectionsModalOpen = ref(false);
+const isSuperuserInvoicesRoute = computed(() => (
+  route.path === "/superuser/invoices" || route.path.startsWith("/superuser/invoices/")
+));
+const legacyInvoiceProgressCount = computed(() => (
+  invoiceCollectionQueueSuccess.value.length
+  + invoiceCollectionQueueFailed.value.length
+  + invoiceCollectionQueueInProgress.value.length
+  + invoiceCollectionQueue.value.length
+));
+const shouldShowLegacyInvoiceProgressBar = computed(() => {
+  return !isSuperuserInvoicesRoute.value && legacyInvoiceProgressCount.value > 0;
+});
 const isInvoiceQueueBusy = computed(() => {
   return invoiceCollectionQueue.value.length > 0 || invoiceCollectionQueueInProgress.value.length > 0;
 });
@@ -666,6 +699,66 @@ const canSeePoField = () => {
   //return (SessionUser.hasAttribute('usePONumbers') || SessionUser.hasPermission('department'))
 };
 
+const sortInvoicePeriodFlags = (flags = []) => [...flags].sort((left, right) => {
+  const sourceOrder = { manual: 0, automatic: 1 };
+  const leftSource = sourceOrder[left?.source] ?? 99;
+  const rightSource = sourceOrder[right?.source] ?? 99;
+  if (leftSource !== rightSource) {
+    return leftSource - rightSource;
+  }
+
+  return String(left?.created_at || left?.fingerprint || "").localeCompare(
+    String(right?.created_at || right?.fingerprint || "")
+  );
+});
+const isActiveInvoicePeriodFlag = (flag) => String(flag?.status || "active") === "active";
+const getOrderLineFlags = (order) => sortInvoicePeriodFlags((props.invoicePeriodFlags || []).filter((flag) => {
+  if (!isActiveInvoicePeriodFlag(flag)) {
+    return false;
+  }
+
+  const targetType = String(flag?.target_type || "");
+  if (!["order", "order_field"].includes(targetType)) {
+    return false;
+  }
+
+  const flagOrderId = Number(flag?.order_id || flag?.target_id || 0);
+  return flagOrderId > 0 && flagOrderId === Number(order?.id || 0);
+}));
+const getOrderItemLineFlags = (order) => sortInvoicePeriodFlags((props.invoicePeriodFlags || []).filter((flag) => {
+  if (!isActiveInvoicePeriodFlag(flag)) {
+    return false;
+  }
+
+  const targetType = String(flag?.target_type || "");
+  if (!["order_item", "order_item_field"].includes(targetType)) {
+    return false;
+  }
+
+  return Number(flag?.order_id || flag?.context?.order_id || 0) === Number(order?.id || 0);
+}));
+const getOrderContainedFlags = (order) => sortInvoicePeriodFlags([
+  ...getOrderLineFlags(order),
+  ...getOrderItemLineFlags(order),
+]);
+const getOrderIndicatorIconClass = (order) => {
+  if (getOrderContainedFlags(order).length > 0) {
+    return "fas fa-flag";
+  }
+
+  return isPendingHandheld(order) ? "fas fa-mobile-alt" : "fas fa-circle";
+};
+const getOrderIndicatorColorClass = (order) => {
+  const flags = getOrderContainedFlags(order);
+  if (flags.length === 0) {
+    return getOrderInvoiceStatusBarColor(order);
+  }
+
+  return flags.some((flag) => flag?.source === "manual") ? "has-text-danger" : "has-text-warning";
+};
+const emitFlagStatusChanged = (flag) => emit("flagStatusChanged", flag);
+const emitFlagCreated = (flag) => emit("flagCreated", flag);
+
 /**
  * Order actions modal
  */
@@ -764,7 +857,7 @@ const formatCashierName = (order) => {
                   @click="invoiceSelectedCollections()"
                   :disabled="selectedInvoiceCollections.length === 0 || isInvoiceQueueBusy"
                 >
-                  {{ $t("global.invoice") }} {{ $t("global.selected_multiple") }} ({{
+                  {{ $t("common.invoice") }} {{ $t("global.selected_multiple") }} ({{
                     selectedInvoiceCollections.length
                   }})
                 </button>
@@ -777,8 +870,8 @@ const formatCashierName = (order) => {
                     'is-dark': isInvoiceCollectionSelectedAll(),
                   }"
                 >
-                  {{ isInvoiceCollectionSelectedAll() ? $t("global.unselect") : $t("global.select") }}
-                  {{ $t("global.all").toLowerCase() }}
+                  {{ isInvoiceCollectionSelectedAll() ? $t("global.unselect") : $t("common.select") }}
+                  {{ $t("common.all").toLowerCase() }}
                 </button>
                 <!-- Expand / Collapse all invoice collections -->
                 <button
@@ -790,7 +883,7 @@ const formatCashierName = (order) => {
                   }"
                 >
                   {{ isAutoExpandAll() ? $t("global.collapse") : $t("global.expand") }}
-                  {{ $t("global.all").toLowerCase() }}
+                  {{ $t("common.all").toLowerCase() }}
                 </button>
               </div>
             </td>
@@ -847,8 +940,11 @@ const formatCashierName = (order) => {
                 isFirstOrderInCollection(order.invoice_collection_id, order)
               "
             >
-              <tr>
-                <td colspan="13">
+              <tr :data-testid="`pos-order-invoice-collection-row-${order.invoice_collection_id}`">
+                <td
+                  :colspan="invoiceCollectionSummaryColumnSpan"
+                  :data-testid="`pos-order-invoice-collection-summary-${order.invoice_collection_id}`"
+                >
                   <div class="has-text-weight-bold">
                     Faktura samling ID: {{ order.invoice_collection_id }}
                     <span class="has-text-grey"
@@ -860,8 +956,10 @@ const formatCashierName = (order) => {
                     >
                   </div>
                 </td>
-                <!-- Spacer -->
-                <td colspan="2">
+                <td
+                  class="has-text-right"
+                  :data-testid="`pos-order-invoice-collection-total-${order.invoice_collection_id}`"
+                >
                   <!-- Total net amount for the invoice collection -->
                   <span class="has-text-weight-bold">
                     {{
@@ -927,7 +1025,11 @@ const formatCashierName = (order) => {
               </template>
               <template v-if="props.invoiceView">
                 <td class="is-narrow">
-                  <button class="button is-small" @click="toggleDropdown(order)">
+                  <button
+                    class="button is-small"
+                    :data-testid="`pos-order-expand-${order.id}`"
+                    @click="toggleDropdown(order)"
+                  >
                     <span
                       class="icon"
                       :class="isDropdownActive(order) ? 'has-text-link' : ''"
@@ -941,8 +1043,8 @@ const formatCashierName = (order) => {
               </template>
               <td>
                 <ColorIndicator
-                  v-bind:color_class="getOrderInvoiceStatusBarColor(order)"
-                  v-bind:icon_class="isPendingHandheld(order) ? 'fas fa-mobile-alt' : 'fas fa-circle'"
+                  v-bind:color_class="getOrderIndicatorColorClass(order)"
+                  v-bind:icon_class="getOrderIndicatorIconClass(order)"
                   v-bind:is_narrow="true"
                   v-bind:label="{
                     text: order.id,
@@ -1158,9 +1260,15 @@ const formatCashierName = (order) => {
                     v-bind:user_id="order.user_id"
                     v-bind:order_id="order.id"
                     v-bind:invoice_collection_id="order.invoice_collection_id"
+                    v-bind:customer_number="order.customer_id"
+                    v-bind:department_id="order.department_id"
                     v-bind:reg_1="order.reg_1"
+                    v-bind:reg_2="order.reg_2"
+                    v-bind:reg_3="order.reg_3"
+                    v-bind:order_booking_id="order.booking_id"
                     :refreshFunction="loadList"
                     @deleted="loadList()"
+                    @flag-created="emitFlagCreated"
                     :data-testid="`pos-order-list-settings-${order.id}`"
                   >
                     <template v-slot:actions>
@@ -1185,13 +1293,29 @@ const formatCashierName = (order) => {
                 </div>
               </td>
             </tr>
+            <tr
+              v-if="getOrderLineFlags(order).length > 0"
+              :data-testid="`pos-order-flags-row-${order.id}`"
+            >
+              <td colspan="100%">
+                <InvoicingPeriodFlagList
+                  compact
+                  :flags="getOrderLineFlags(order)"
+                  @statusChanged="emitFlagStatusChanged"
+                />
+              </td>
+            </tr>
             <!-- Dropdown content (if the invoice view is enabled,and the dropdown is active) -->
             <tr v-if="props.invoiceView && isDropdownActive(order)">
               <!-- Order line items -->
               <td colspan="100%">
                 <!-- Content -->
                 <div class="content">
-                  <OrderContentTable :order-id="order.id" />
+                  <OrderContentTable
+                    :order-id="order.id"
+                    :invoice-period-flags="getOrderItemLineFlags(order)"
+                    @flagStatusChanged="emitFlagStatusChanged"
+                  />
                 </div>
               </td>
             </tr>
@@ -1347,6 +1471,11 @@ const formatCashierName = (order) => {
                     </div>
                   </div>
                 </div>
+                <InvoicingPeriodFlagList
+                  compact
+                  :flags="getOrderLineFlags(order)"
+                  @statusChanged="emitFlagStatusChanged"
+                />
               </template>
               <template #content>
                 <div>
@@ -1377,9 +1506,15 @@ const formatCashierName = (order) => {
                       v-bind:user_id="order.user_id"
                       v-bind:order_id="order.id"
                       v-bind:invoice_collection_id="order.invoice_collection_id"
+                      v-bind:customer_number="order.customer_id"
+                      v-bind:department_id="order.department_id"
                       v-bind:reg_1="order.reg_1"
+                      v-bind:reg_2="order.reg_2"
+                      v-bind:reg_3="order.reg_3"
+                      v-bind:order_booking_id="order.booking_id"
                       :refreshFunction="loadList"
                       @deleted="loadList()"
+                      @flag-created="emitFlagCreated"
                       :displayActionsDirectly="true"
                     >
                       <template #actions></template>
@@ -1392,7 +1527,11 @@ const formatCashierName = (order) => {
                   </div>
                   <!-- Order line items -->
                   <div class="content" v-if="props.invoiceView && isAutoExpandAll()">
-                    <OrderContentTable :order-id="order.id" />
+                    <OrderContentTable
+                      :order-id="order.id"
+                      :invoice-period-flags="getOrderItemLineFlags(order)"
+                      @flagStatusChanged="emitFlagStatusChanged"
+                    />
                   </div>
                 </div>
               </template>
@@ -1457,7 +1596,47 @@ const formatCashierName = (order) => {
         </div>
 
         <!-- Orders as cards -->
-        <template v-for="order in getVisibleOrders" :key="order.id">
+        <template
+          v-for="order in props.groupInvoiceCollection ? getVisibleOrdersSortedByInvoiceCollection : getVisibleOrders"
+          :key="order.id"
+        >
+          <!-- If grouping by invoice collection is enabled, show the invoice collection id -->
+          <template
+            v-if="
+              props.groupInvoiceCollection &&
+              doesOrderHaveInvoiceCollection(order) &&
+              isFirstOrderInCollection(order.invoice_collection_id, order)
+            "
+          >
+            <div
+              class="column is-full"
+              :data-testid="`pos-order-invoice-collection-row-${order.invoice_collection_id}`"
+            >
+              <div class="message is-light mb-0">
+                <div
+                  class="message-body is-flex is-justify-content-space-between is-align-items-center p-2"
+                  :data-testid="`pos-order-invoice-collection-summary-${order.invoice_collection_id}`"
+                >
+                  <div class="has-text-weight-bold">
+                    Faktura samling ID: {{ order.invoice_collection_id }}
+                  </div>
+                  <div class="has-text-weight-bold">
+                    <span :data-testid="`pos-order-invoice-collection-total-${order.invoice_collection_id}`"
+                      >{{
+                        SessionUser.functions.currency.toLocal(
+                          getOrdersByInvoiceCollection(order.invoice_collection_id)
+                            .reduce((sum, order) => sum + order.total_net_amount, 0)
+                            .toFixed(2)
+                        )
+                      }}
+                      kr.</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+
           <div class="column is-full">
             <WhiteBoxCard
               :forceStateFooter="true"
@@ -1468,6 +1647,7 @@ const formatCashierName = (order) => {
               :has-hover-effect="true"
               :hasSelectionStyle="false"
               :data-testid="`pos-order-list-card-${order.id}`"
+              :headerTestId="`pos-order-expand-${order.id}`"
             >
               <template #header>
                 <div
@@ -1478,9 +1658,17 @@ const formatCashierName = (order) => {
                     <div>
                       <small>
                         <!-- ID and status icon -->
-                        <span class="icon mr-1" :class="getOrderInvoiceStatusBarColor(order)">
-                          <i :class="isPendingHandheld(order) ? 'fas fa-mobile-alt' : 'fas fa-circle'"></i>
-                        </span>
+                        <ColorIndicator
+                          class="mr-1"
+                          style="display: inline-flex"
+                          v-bind:color_class="getOrderIndicatorColorClass(order)"
+                          v-bind:icon_class="getOrderIndicatorIconClass(order)"
+                          v-bind:is_narrow="true"
+                          v-bind:visibility="{
+                            icon: true,
+                            dropdown: false,
+                          }"
+                        />
                         {{ order.reg_1 }}<span v-if="order.reg_2">, {{ order.reg_2 }}</span
                         ><span v-if="order.reg_3">, {{ order.reg_3 }}</span>
                         <span class="has-text-grey-light">#{{ order.id }}</span></small
@@ -1596,6 +1784,8 @@ const formatCashierName = (order) => {
                         :order-id="order.id"
                         :summaryMode="true"
                         :display-price="SessionUser.canAccessAdmin()"
+                        :invoice-period-flags="getOrderItemLineFlags(order)"
+                        @flagStatusChanged="emitFlagStatusChanged"
                       />
                     </div>
                     <div class="column is-12 has-text-centered">
@@ -1605,7 +1795,7 @@ const formatCashierName = (order) => {
                       <br />
                       <!-- Cashier • Time ago -->
                       <small class="has-text-grey"
-                        >{{ order.cashier_name }} • {{ SessionUser.functions.date.timeAgo(order.created_at) }}</small
+                        >{{ order.cashier_name }} • {{ SessionUser.functions.date.toLocalTimeHours(order.created_at) }}</small
                       >
                       <!-- Reg 1 • Reg 2 • Reg 3 -->
                       <br />
@@ -1703,6 +1893,11 @@ const formatCashierName = (order) => {
                     </div>
                   </div>
                 </div>
+                <InvoicingPeriodFlagList
+                  compact
+                  :flags="getOrderLineFlags(order)"
+                  @statusChanged="emitFlagStatusChanged"
+                />
               </template>
               <template #content> </template>
               <template #footer>
@@ -1765,6 +1960,7 @@ const formatCashierName = (order) => {
   />
   <!-- bottom progress bar -->
   <InvoicingBillingPeriodInvoiceProgressBar
+    v-if="shouldShowLegacyInvoiceProgressBar"
     v-bind:max-progress="
       invoiceCollectionQueueSuccess.length +
       invoiceCollectionQueueFailed.length +
@@ -1806,6 +2002,7 @@ const formatCashierName = (order) => {
           v-bind:user_id="selectedOrderForActionsMenu.user_id"
           v-bind:order_id="selectedOrderForActionsMenu.id"
           v-bind:invoice_collection_id="selectedOrderForActionsMenu.invoice_collection_id"
+          v-bind:customer_number="selectedOrderForActionsMenu.customer_id"
           v-bind:reg_1="selectedOrderForActionsMenu.reg_1"
           v-bind:reg_2="selectedOrderForActionsMenu.reg_2"
           v-bind:reg_3="selectedOrderForActionsMenu.reg_3"
@@ -1813,6 +2010,7 @@ const formatCashierName = (order) => {
           v-bind:department_id="selectedOrderForActionsMenu.department_id"
           :refreshFunction="loadList"
           @deleted="loadList()"
+          @flag-created="emitFlagCreated"
           :displayActionsDirectly="true"
         >
           <template #actions></template>

src/components/displays/department/pos/steps/PosDepartmentStep1.vue

@@ -15,6 +15,10 @@ import {
   getCurrentStep,
   clearCache,
   nextStep,
+  copyLastWashItemsToCurrentOrder,
+  order_id,
+  customer_id,
+  step,
   setDesktopStep1PreflightHandler,
   clearDesktopStep1PreflightHandler,
 } from "@/components/shop/POSDepartmentProcess.vue";
@@ -24,6 +28,7 @@ import SelectVehicleFormPOS from "@/components/forms/department/pos/SelectVehicl
 import PosLastScannedLicensePlatesV2 from "@/components/displays/department/pos/PosLastScannedLicensePlatesV2.vue";
 import PosDesktopOrderBookingSelectorModal from "@/components/displays/department/pos/steps/elements/PosDesktopOrderBookingSelectorModal.vue";
 import PosDesktopCustomerConflictModal from "@/components/displays/department/pos/steps/elements/PosDesktopCustomerConflictModal.vue";
+import PosDesktopDuplicateWarning from "@/components/displays/department/pos/steps/elements/PosDesktopDuplicateWarning.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { parsePosRouteSearch } from "@/views/dashboards/departmentDashboard/modules/Pos/posRouteState.js";
 import {
@@ -58,6 +63,8 @@ const right_tabs = ref([
 
 const getPreferredRailTab = () => (customer_name.value ? "customer" : "license_plates");
 const forceActiveTab = ref(getPreferredRailTab());
+const activeRailTab = ref(getPreferredRailTab());
+const customerPanelActiveTab = ref("details");
 const selectVehicleFormRef = ref(null);
 
 const createEmptyDesktopStep1Context = () => ({
@@ -83,23 +90,44 @@ const duplicateOrders = ref([]);
 const duplicateWarningKey = ref("");
 const duplicateDetailsExpanded = ref(false);
 const pendingNextResolution = ref(false);
+const isDesktopLastWashCopying = ref(false);
 let desktopStep1CoordinationPromise = Promise.resolve({ canProceed: true });
+let focusOnReg1TimeoutId = null;
 const isDesktopStep1Active = computed(() => getCurrentStep() === 1);
 
 const setTab = (tab) => {
   forceActiveTab.value = tab;
+  activeRailTab.value = tab;
+};
+
+const setCustomerPanelTab = (tab) => {
+  customerPanelActiveTab.value = tab || "details";
 };
 
 watch(
   customer_name,
   (newValue) => {
-    forceActiveTab.value = newValue ? "customer" : "license_plates";
+    const nextRailTab = newValue ? "customer" : "license_plates";
+    forceActiveTab.value = nextRailTab;
+    activeRailTab.value = nextRailTab;
+    if (!newValue) {
+      customerPanelActiveTab.value = "details";
+    }
   },
   { immediate: true }
 );
 
 const focusOnReg1 = () => {
-  setTimeout(() => {
+  if (focusOnReg1TimeoutId !== null) {
+    clearTimeout(focusOnReg1TimeoutId);
+  }
+
+  focusOnReg1TimeoutId = setTimeout(() => {
+    focusOnReg1TimeoutId = null;
+    if (typeof document === "undefined") {
+      return;
+    }
+
     const reg1Input = document.getElementById("reg_1");
     if (reg1Input) {
       reg1Input.focus();
@@ -249,12 +277,8 @@ const bookingSelectionObjects = computed(() => {
     const contentSegments = [
       `${t("admin.pos.order_booking_selector.customer_label")}: ${booking?.customer_name || t("admin.pos.not_found")}`,
       `${t("admin.pos.order_booking_selector.plates_label")}: ${plateText || t("admin.pos.not_found")}`,
-      `${t("admin.pos.order_booking_selector.reference_label")}: ${
-        getOrderBookingReferenceValue(booking) || t("admin.pos.not_found")
-      }`,
-      `${t("admin.pos.order_booking_selector.services_label")}: ${
-        getOrderBookingServiceText(booking) || t("admin.pos.not_found")
-      }`,
+      `${t("common.reference")}: ${getOrderBookingReferenceValue(booking) || t("admin.pos.not_found")}`,
+      `${t("common.services")}: ${getOrderBookingServiceText(booking) || t("admin.pos.not_found")}`,
     ];
 
     return {
@@ -266,7 +290,7 @@ const bookingSelectionObjects = computed(() => {
       content: contentSegments.join(" • "),
       buttons: [
         {
-          label: t("admin.pos.order_booking_selector.use_booking"),
+          label: t("common.select"),
           action: () => handleBookingSelection(booking),
           color: "primary",
           testId: `pos-desktop-order-booking-use-${booking.id}`,
@@ -307,6 +331,18 @@ const isInlineDuplicateWarningVisible = computed(() => {
   return duplicateWarningKey.value === getDuplicateStateKey(normalizedContext);
 });
 
+const isCustomerRulesPanelActive = computed(
+  () => activeRailTab.value === "customer" && customerPanelActiveTab.value === "rules"
+);
+const shouldShowDuplicateWarningInRulesFooter = computed(
+  () => isInlineDuplicateWarningVisible.value && isCustomerRulesPanelActive.value
+);
+const shouldShowDuplicateWarningInActionRail = computed(
+  () => isInlineDuplicateWarningVisible.value && !isCustomerRulesPanelActive.value
+);
+const shouldShowRulesFooterActions = computed(() => isCustomerRulesPanelActive.value);
+const shouldShowActionRailControls = computed(() => !isCustomerRulesPanelActive.value);
+
 const duplicateDetailsToggleLabel = computed(() =>
   duplicateDetailsExpanded.value ? t("admin.pos.hide_order_details") : t("admin.pos.show_order_details")
 );
@@ -604,11 +640,57 @@ const handleCustomerConflictCancel = async () => {
   }
 };
 
+const pushDesktopStepTwoRoute = () => {
+  if (!order_id.value) {
+    return;
+  }
+
+  window.history.pushState({}, "", `?id=${order_id.value}&customer_id=${customer_id.value}&step=2`);
+};
+
+const handleDesktopLastWashCopy = async (payload = {}) => {
+  if (isDesktopLastWashCopying.value) {
+    return;
+  }
+
+  isDesktopLastWashCopying.value = true;
+
+  try {
+    await desktopStep1CoordinationPromise;
+    desktopStep1CoordinationPromise = coordinateDesktopStep1({
+      reason: "copy_last_wash",
+      finalizeReg1Input: true,
+    });
+    const result = await desktopStep1CoordinationPromise;
+    if (!result.canProceed) {
+      return;
+    }
+
+    const didCopy = await copyLastWashItemsToCurrentOrder(payload?.items || [], {
+      sourceReference: payload?.order?.reference,
+    });
+    if (!didCopy) {
+      return;
+    }
+
+    step.value = 2;
+    pushDesktopStepTwoRoute();
+  } catch (error) {
+    console.error("Unable to copy last wash to current order:", error);
+  } finally {
+    isDesktopLastWashCopying.value = false;
+  }
+};
+
 onMounted(() => {
   setDesktopStep1PreflightHandler(handleDesktopStep1Preflight);
 });
 
 onBeforeUnmount(() => {
+  if (focusOnReg1TimeoutId !== null) {
+    clearTimeout(focusOnReg1TimeoutId);
+    focusOnReg1TimeoutId = null;
+  }
   clearDesktopStep1PreflightHandler(handleDesktopStep1Preflight);
 });
 
@@ -631,8 +713,10 @@ watch(
           <template #default>
             <SelectVehicleFormPOS
               ref="selectVehicleFormRef"
+              :is-desktop-last-wash-copying="isDesktopLastWashCopying"
               @update:desktopStep1Context="setDesktopStep1Context"
               @commit:desktopStep1="handleDesktopStep1Commit"
+              @copy-last-wash="handleDesktopLastWashCopy"
             />
           </template>
         </WhiteBox>
@@ -649,7 +733,23 @@ watch(
               @update:activeTab="setTab"
             >
               <template #customer>
-                <PosSelectedCustomer variant="sidebar" />
+                <PosSelectedCustomer variant="sidebar" @update:activeTab="setCustomerPanelTab">
+                  <template v-if="shouldShowRulesFooterActions" #rules-footer>
+                    <PosDesktopDuplicateWarning
+                      v-if="shouldShowDuplicateWarningInRulesFooter"
+                      :title="t('admin.pos.warning')"
+                      :message="t('admin.pos.duplicate_order_warning')"
+                      :toggle-label="duplicateDetailsToggleLabel"
+                      :details-expanded="duplicateDetailsExpanded"
+                      :duplicate-orders="duplicateDetailsObjects"
+                      @toggle-details="toggleDuplicateDetails"
+                    />
+                    <NextStepError class="is-fullwidth" :clear-automatically="true" :clear-delay="8000" />
+                    <ButtonsBox class="pos-actions pos-actions--stacked">
+                      <NextStep class="is-fullwidth" tabindex="6" />
+                    </ButtonsBox>
+                  </template>
+                </PosSelectedCustomer>
               </template>
               <template #license_plates>
                 <PosLastScannedLicensePlatesV2 />
@@ -662,62 +762,16 @@ watch(
         <ButtonsBox class="pos-actions pos-actions--stacked">
           <Cancel tabindex="2" class="is-fullwidth" />
         </ButtonsBox>
-        <div class="pos-shell-actions__rail">
-          <div
-            v-if="isInlineDuplicateWarningVisible"
-            class="notification is-warning is-light pos-duplicate-warning"
-            data-testid="pos-desktop-duplicate-warning-inline"
-          >
-            <div class="pos-duplicate-warning__header">
-              <div class="pos-duplicate-warning__header-copy">
-                <span class="icon pos-duplicate-warning__icon" aria-hidden="true">
-                  <i class="fas fa-triangle-exclamation"></i>
-                </span>
-                <p class="pos-duplicate-warning__title">{{ t("admin.pos.warning") }}</p>
-              </div>
-              <button
-                type="button"
-                class="button is-small is-warning is-light"
-                data-testid="pos-desktop-duplicate-warning-toggle-details"
-                @click="toggleDuplicateDetails"
-              >
-                {{ duplicateDetailsToggleLabel }}
-              </button>
-            </div>
-            <p class="pos-duplicate-warning__message">
-              {{ t("admin.pos.duplicate_order_warning") }}
-            </p>
-            <div
-              v-if="duplicateDetailsExpanded"
-              class="pos-duplicate-warning__details"
-              data-testid="pos-desktop-duplicate-warning-details-inline"
-            >
-              <div
-                v-for="duplicateOrder in duplicateDetailsObjects"
-                :key="duplicateOrder.id"
-                class="pos-duplicate-warning__detail-card"
-                :data-testid="`pos-desktop-duplicate-warning-detail-${duplicateOrder.id}`"
-              >
-                <div class="pos-duplicate-warning__detail-copy">
-                  <p class="pos-duplicate-warning__detail-title">{{ duplicateOrder.label }}</p>
-                  <p class="pos-duplicate-warning__detail-content">{{ duplicateOrder.content }}</p>
-                </div>
-                <div class="buttons pos-duplicate-warning__detail-actions">
-                  <button
-                    v-for="button in duplicateOrder.buttons"
-                    :key="button.label"
-                    type="button"
-                    class="button is-small"
-                    :class="`is-${button.color || 'dark'}`"
-                    :data-testid="button.testId"
-                    @click="button.action()"
-                  >
-                    {{ button.label }}
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
+        <div v-if="shouldShowActionRailControls" class="pos-shell-actions__rail" data-testid="pos-step-1-action-rail">
+          <PosDesktopDuplicateWarning
+            v-if="shouldShowDuplicateWarningInActionRail"
+            :title="t('admin.pos.warning')"
+            :message="t('admin.pos.duplicate_order_warning')"
+            :toggle-label="duplicateDetailsToggleLabel"
+            :details-expanded="duplicateDetailsExpanded"
+            :duplicate-orders="duplicateDetailsObjects"
+            @toggle-details="toggleDuplicateDetails"
+          />
           <NextStepError class="is-fullwidth" :clear-automatically="true" :clear-delay="8000" />
           <ButtonsBox class="pos-actions pos-actions--stacked">
             <NextStep class="is-fullwidth" tabindex="6" />

src/components/displays/department/pos/steps/elements/PosDesktopCustomerConflictModal.vue

@@ -126,7 +126,7 @@ const closeModal = () => {
             data-testid="pos-desktop-customer-conflict-cancel"
             @click="emit('cancel')"
           >
-            {{ t("admin.pos.customer_conflict.cancel") }}
+            {{ t("common.cancel") }}
           </button>
           <button
             class="button is-primary is-light"

src/components/displays/department/pos/steps/elements/PosDesktopDuplicateWarning.vue

@@ -0,0 +1,83 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  message: {
+    type: String,
+    required: true,
+  },
+  toggleLabel: {
+    type: String,
+    required: true,
+  },
+  detailsExpanded: {
+    type: Boolean,
+    default: false,
+  },
+  duplicateOrders: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(["toggle-details"]);
+</script>
+
+<template>
+  <div
+    class="notification is-warning is-light pos-duplicate-warning"
+    data-testid="pos-desktop-duplicate-warning-inline"
+  >
+    <div class="pos-duplicate-warning__header">
+      <div class="pos-duplicate-warning__header-copy">
+        <span class="icon pos-duplicate-warning__icon" aria-hidden="true">
+          <i class="fas fa-triangle-exclamation"></i>
+        </span>
+        <p class="pos-duplicate-warning__title">{{ title }}</p>
+      </div>
+      <button
+        type="button"
+        class="button is-small is-warning is-light"
+        data-testid="pos-desktop-duplicate-warning-toggle-details"
+        @click="emit('toggle-details')"
+      >
+        {{ toggleLabel }}
+      </button>
+    </div>
+    <p class="pos-duplicate-warning__message">
+      {{ message }}
+    </p>
+    <div
+      v-if="detailsExpanded"
+      class="pos-duplicate-warning__details"
+      data-testid="pos-desktop-duplicate-warning-details-inline"
+    >
+      <div
+        v-for="duplicateOrder in duplicateOrders"
+        :key="duplicateOrder.id"
+        class="pos-duplicate-warning__detail-card"
+        :data-testid="`pos-desktop-duplicate-warning-detail-${duplicateOrder.id}`"
+      >
+        <div class="pos-duplicate-warning__detail-copy">
+          <p class="pos-duplicate-warning__detail-title">{{ duplicateOrder.label }}</p>
+          <p class="pos-duplicate-warning__detail-content">{{ duplicateOrder.content }}</p>
+        </div>
+        <div class="buttons pos-duplicate-warning__detail-actions">
+          <button
+            v-for="button in duplicateOrder.buttons"
+            :key="button.label"
+            type="button"
+            class="button is-small"
+            :class="`is-${button.color || 'dark'}`"
+            :data-testid="button.testId"
+            @click="button.action()"
+          >
+            {{ button.label }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

src/components/displays/department/pos/steps/elements/PosDesktopLastWashCard.vue

@@ -8,8 +8,13 @@ const props = defineProps({
     type: [Number, String],
     default: null,
   },
+  copying: {
+    type: Boolean,
+    default: false,
+  },
 });
 
+const emit = defineEmits(["copy"]);
 const { locale, t } = useI18n();
 
 const order = ref(null);
@@ -78,12 +83,52 @@ const groupedOrderItems = computed(() => {
   }));
 });
 
+const getOrderItemProductId = (item) => parsePositiveInteger(item?.product?.id ?? item?.product_id);
+const getOrderItemQuantity = (item) => {
+  const parsedQuantity = Number.parseInt(String(item?.quantity ?? 1), 10);
+  return Number.isInteger(parsedQuantity) && parsedQuantity > 0 ? parsedQuantity : null;
+};
+
+const hasUsableOrderItems = computed(() => {
+  return groupedOrderItems.value.some((group) => getOrderItemProductId(group.item) && getOrderItemQuantity(group.item));
+});
+
+const isCopyDisabled = computed(() => loadState.value !== "loaded" || props.copying || !hasUsableOrderItems.value);
+const copyButtonLabel = computed(() => {
+  const lastWashLabel = SessionUser.objects.global.language.last_wash || t("common.last_wash");
+  return `${SessionUser.objects.global.language.copy || t("common.copy")} ${lastWashLabel.toLowerCase()}`;
+});
+const copyButtonText = computed(() => (props.copying ? t("pos.copying_last_wash") : copyButtonLabel.value));
+const copyButtonState = computed(() => {
+  if (props.copying) {
+    return "copying";
+  }
+
+  if (isCopyDisabled.value) {
+    return "disabled";
+  }
+
+  return "ready";
+});
+
+const onCopy = () => {
+  if (isCopyDisabled.value) {
+    return;
+  }
+
+  emit("copy", {
+    order: order.value,
+    orderId: normalizedOrderId.value,
+    items: orderItems.value,
+  });
+};
+
 const lastWashMetadata = computed(() => {
   const currentOrder = order.value || {};
   return [
     {
       key: "created",
-      label: t("pos.order.created"),
+      label: t("common.created"),
       value: formatDateTime(currentOrder.created_at),
     },
     {
@@ -145,7 +190,7 @@ watch(normalizedOrderId, (nextOrderId, previousOrderId) => {
         </div>
       </dl>
 
-      <section class="pos-step-one-insight-card__section">
+      <section class="pos-step-one-insight-card__section" data-testid="pos-desktop-last-wash-section">
         <div class="pos-step-one-insight-card__section-header">
           <h4 class="pos-step-one-insight-card__section-title">Indhold</h4>
         </div>
@@ -181,12 +226,15 @@ watch(normalizedOrderId, (nextOrderId, previousOrderId) => {
         type="button"
         class="button is-small is-light pos-step-one-copy-action"
         data-testid="pos-desktop-last-wash-copy"
-        disabled
+        :data-state="copyButtonState"
+        :disabled="isCopyDisabled"
+        :aria-busy="props.copying ? 'true' : 'false'"
+        @click="onCopy"
       >
         <span class="icon is-small">
-          <i class="fas fa-copy" aria-hidden="true"></i>
+          <i :class="props.copying ? 'fas fa-spinner fa-spin' : 'fas fa-copy'" aria-hidden="true"></i>
         </span>
-        <span>{{ `${SessionUser.objects.global.language.copy} ${SessionUser.objects.global.language.last_wash.toLowerCase()}` }}</span>
+        <span>{{ copyButtonText }}</span>
       </button>
     </template>
   </section>

src/components/displays/department/pos/steps/elements/PosDesktopOrderBookingSelectorModal.vue

@@ -394,7 +394,7 @@ const closeModal = () => {
                     class="tag pos-desktop-order-booking-card__today-tag"
                     :data-testid="`pos-desktop-order-booking-today-${booking.id}`"
                   >
-                    {{ t("global.time.today") }}
+                    {{ t("common.today") }}
                   </span>
                   <span v-if="didBookingDetailFail(booking)" class="tag is-light pos-desktop-order-booking-card__tag">
                     {{ t("admin.pos.not_found") }}
@@ -413,6 +413,7 @@ const closeModal = () => {
                       :refreshFunction="emitRefreshBookings"
                       :icon="'fas fa-ellipsis-v'"
                       trigger-button-variant="text"
+                      allow-booking-completion
                     >
                       <template #actions />
                     </ActionSettingsWheelButton>
@@ -430,7 +431,7 @@ const closeModal = () => {
                   <dd>{{ getBookingPlates(booking) || t("admin.pos.not_found") }}</dd>
                 </div>
                 <div class="pos-desktop-order-booking-card__meta-item">
-                  <dt>{{ t("admin.pos.order_booking_selector.reference_label") }}</dt>
+                  <dt>{{ t("common.reference") }}</dt>
                   <dd>{{ getBookingReference(booking) || "—" }}</dd>
                 </div>
                 <div v-if="getBookingPo(booking)" class="pos-desktop-order-booking-card__meta-item">
@@ -454,7 +455,7 @@ const closeModal = () => {
               >
                 <div class="pos-desktop-order-booking-card__section-header">
                   <p class="pos-desktop-order-booking-card__section-title">
-                    {{ t("admin.pos.order_booking_selector.services_label") }}
+                    {{ t("common.services") }}
                   </p>
                   <div
                     v-if="!isBookingLoading(booking) && getBookingItemPreviewTotal(booking) !== null"
@@ -475,8 +476,8 @@ const closeModal = () => {
                   class="pos-desktop-order-booking-card__item-preview"
                 >
                   <div class="pos-desktop-order-booking-card__item-preview-head">
-                    <span>{{ t("global.quantity") }}</span>
-                    <span>{{ t("admin.pos.order_booking_selector.services_label") }}</span>
+                    <span>{{ t("common.quantity") }}</span>
+                    <span>{{ t("common.services") }}</span>
                     <span>{{ t("admin.pos.price_dkk") }}</span>
                   </div>
                   <div
@@ -528,7 +529,7 @@ const closeModal = () => {
                   :data-testid="`pos-desktop-order-booking-use-${booking.id}`"
                   @click="onSelect(booking)"
                 >
-                  {{ t("admin.pos.order_booking_selector.use_booking") }}
+                  {{ t("common.select") }}
                 </button>
               </div>
             </article>

src/components/displays/department/pos/steps/elements/PosDesktopVehicleSummaryCard.vue

@@ -2,12 +2,21 @@
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import {
+  getOrderBookingItemPreviewRows,
+  getOrderBookingReferenceValue,
+  getOrderBookingServiceLabels,
+} from "@/components/displays/department/pos/utils/orderBookingDisplay.js";
 
 const props = defineProps({
   vehicle: {
     type: Object,
     default: null,
   },
+  booking: {
+    type: Object,
+    default: null,
+  },
 });
 
 const { t } = useI18n();
@@ -19,6 +28,8 @@ const parsePositiveInteger = (value) => {
 
 const normalizeStatus = (value) => String(value ?? "").trim().toLowerCase();
 
+const selectedBooking = computed(() => (props.booking?.id ? props.booking : null));
+
 const getVehicleStatusLabel = (vehicle) => {
   if (!vehicle) {
     return SessionUser.objects.global.language.no_data;
@@ -78,6 +89,11 @@ const getVehicleStatusTone = (vehicle) => {
 };
 
 const vehicleTypeName = computed(() => {
+  const bookingPrimaryService = bookingSummaryRows.value.find((row) => !row.isAddon)?.label || bookingSummaryRows.value[0]?.label;
+  if (bookingPrimaryService) {
+    return bookingPrimaryService;
+  }
+
   const vehicleTypeId = parsePositiveInteger(props.vehicle?.type);
   if (!vehicleTypeId) {
     return SessionUser.objects.global.language.no_data;
@@ -105,17 +121,24 @@ const vehicleMetadata = computed(() => [
   {
     key: "reg",
     label: SessionUser.objects.orders.columns.reg_1.label,
-    value: String(props.vehicle?.reg ?? "").trim() || SessionUser.objects.global.language.no_data,
+    value:
+      String(selectedBooking.value?.reg_1 ?? props.vehicle?.reg ?? "").trim() ||
+      SessionUser.objects.global.language.no_data,
   },
   {
     key: "customer",
     label: t("admin.pos.customer"),
-    value: String(props.vehicle?.customer_name ?? "").trim() || SessionUser.objects.global.language.no_data,
+    value:
+      String(selectedBooking.value?.customer_name ?? props.vehicle?.customer_name ?? "").trim() ||
+      SessionUser.objects.global.language.no_data,
   },
   {
     key: "reference",
     label: SessionUser.objects.orders.columns.reference.label,
-    value: String(props.vehicle?.reference ?? "").trim() || SessionUser.objects.global.language.no_data,
+    value:
+      getOrderBookingReferenceValue(selectedBooking.value) ||
+      String(props.vehicle?.reference ?? "").trim() ||
+      SessionUser.objects.global.language.no_data,
   },
   {
     key: "status",
@@ -124,7 +147,36 @@ const vehicleMetadata = computed(() => [
   },
 ]);
 
+const bookingSummaryRows = computed(() => {
+  if (!selectedBooking.value) {
+    return [];
+  }
+
+  const previewRows = getOrderBookingItemPreviewRows(selectedBooking.value);
+  if (previewRows.length > 0) {
+    return previewRows.map((row) => ({
+      key: row.key,
+      label: row.label,
+      quantity: row.quantity,
+      isAddon: row.depth > 0,
+      includeInInvoice: true,
+    }));
+  }
+
+  return getOrderBookingServiceLabels(selectedBooking.value).map((label, index) => ({
+    key: `booking-service-${index}`,
+    label,
+    quantity: 1,
+    isAddon: index > 0,
+    includeInInvoice: true,
+  }));
+});
+
 const vehicleSummaryRows = computed(() => {
+  if (bookingSummaryRows.value.length > 0) {
+    return bookingSummaryRows.value;
+  }
+
   if (!props.vehicle) {
     return [];
   }
@@ -166,7 +218,7 @@ const hasVehicleSummaryRows = computed(() => vehicleSummaryRows.value.length > 0
         <p class="pos-step-one-insight-card__eyebrow">{{ SessionUser.objects.vehicles.meta.labels.single }}</p>
         <h3 class="pos-step-one-insight-card__title">{{ vehicleTypeName }}</h3>
         <p class="pos-step-one-insight-card__subtitle">
-          {{ String(vehicle?.reg ?? "").trim() || SessionUser.objects.global.language.no_data }}
+          {{ String(selectedBooking?.reg_1 ?? vehicle?.reg ?? "").trim() || SessionUser.objects.global.language.no_data }}
         </p>
       </div>
       <div class="pos-step-one-insight-card__pills">
@@ -196,7 +248,7 @@ const hasVehicleSummaryRows = computed(() => vehicleSummaryRows.value.length > 0
       </div>
     </dl>
 
-    <section class="pos-step-one-insight-card__section">
+    <section class="pos-step-one-insight-card__section" data-testid="pos-desktop-vehicle-summary-section">
       <div class="pos-step-one-insight-card__section-header">
         <h4 class="pos-step-one-insight-card__section-title">Ydelse og tilvalg</h4>
       </div>

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

@@ -320,16 +320,23 @@ const noop = () => {};
 
 .vehicle-card__media {
   align-items: center;
+  background: rgba(255, 255, 255, 0.66);
+  border: 1px solid rgba(31, 91, 183, 0.12);
   border-radius: 1rem;
   display: flex;
+  flex: 0 0 5.25rem;
+  height: 5.25rem;
   justify-content: center;
   padding: 0.75rem;
+  width: 5.25rem;
 }
 
 .vehicle-card__image {
-  height: 100%;
+  height: auto;
+  max-height: 100%;
+  max-width: 100%;
   object-fit: contain;
-  width: 100%;
+  width: auto;
 }
 
 .vehicle-card__details {

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

@@ -14,7 +14,7 @@ type attachment = {
     image: string | null;
     document: string | null;
     relation: string | null;
-    other: string | null;
+    other: unknown;
     src: string | null; // For document preview (e.g., PDF URL) // THIS IS NEVER STORED, JUST FOR PREVIEW PURPOSES
   };
   created_at: string;
@@ -22,6 +22,8 @@ type attachment = {
   deleted_at: string | null;
 }
 
+const SELF_SERVE_WASH_ATTACHMENT_TYPE = 'SELF_SERVE_WASH';
+
 const getAttachmentContent = (attachmentEntry: attachment) => {
   if (!attachmentEntry.content) {
     return {
@@ -43,7 +45,19 @@ const getAttachmentContent = (attachmentEntry: attachment) => {
 };
 
 const getAttachmentOtherText = (attachmentEntry: attachment) => {
-  return getAttachmentContent(attachmentEntry).other || '';
+  const other = getAttachmentContent(attachmentEntry).other;
+  if (typeof other === 'string') {
+    return other;
+  }
+
+  if (isSelfServeWashAttachment(attachmentEntry)) {
+    const customerNumber = getSelfServeWashPayload(attachmentEntry)?.customer_number;
+    return customerNumber
+      ? `${t('admin.pos.settings_wheel.self_serve_wash_attachment')} #${customerNumber}`
+      : t('admin.pos.settings_wheel.self_serve_wash_attachment');
+  }
+
+  return other && typeof other === 'object' ? JSON.stringify(other) : '';
 };
 const props = defineProps({
   attachments: {
@@ -79,6 +93,26 @@ const determineAttachmentType = (attachment: attachment): 'image' | 'document' |
   return 'unknown';
 };
 
+const getSelfServeWashPayload = (attachmentEntry: attachment): Record<string, any> | null => {
+  const other = getAttachmentContent(attachmentEntry).other;
+  return other && typeof other === 'object' && (other as Record<string, any>).type === SELF_SERVE_WASH_ATTACHMENT_TYPE
+    ? other as Record<string, any>
+    : null;
+};
+
+const isSelfServeWashAttachment = (attachmentEntry: attachment): boolean => {
+  return getSelfServeWashPayload(attachmentEntry) !== null;
+};
+
+const formatSelfServeDriver = (payload: Record<string, any>): string => {
+  return payload.subuser?.name || payload.subuser?.username || (payload.subuser_id ? `#${payload.subuser_id}` : '-');
+};
+
+const formatElapsedMinutes = (seconds: unknown): string => {
+  const parsed = Number(seconds);
+  return Number.isFinite(parsed) && parsed > 0 ? `${Math.ceil(parsed / 60)} min` : '-';
+};
+
 const getAttachmentTypeIcon = (attachment: attachment): string => {
   const type = determineAttachmentType(attachment);
   switch (type) {
@@ -309,14 +343,35 @@ const onClickAttachWashCertificate = () => {
               </template>
               <!-- OTHER PREVIEW -->
               <template v-else-if="determineAttachmentType(attachment) === 'other' && getAttachmentContent(attachment).other">
+                <template v-if="isSelfServeWashAttachment(attachment)">
+                  <div class="content is-size-7">
+                    <p class="has-text-weight-semibold">{{ t('admin.pos.settings_wheel.self_serve_wash_attachment') }}</p>
+                    <p>
+                      <strong>{{ t('admin.pos.settings_wheel.self_serve_customer') }}:</strong>
+                      #{{ getSelfServeWashPayload(attachment)?.customer_number || '-' }}
+                    </p>
+                    <p>
+                      <strong>{{ t('admin.pos.settings_wheel.self_serve_driver') }}:</strong>
+                      {{ formatSelfServeDriver(getSelfServeWashPayload(attachment) || {}) }}
+                    </p>
+                    <p>
+                      <strong>{{ t('pos.license_plate') }}:</strong>
+                      {{ getSelfServeWashPayload(attachment)?.license_plate || '-' }}
+                    </p>
+                    <p>
+                      <strong>{{ t('admin.pos.settings_wheel.self_serve_elapsed') }}:</strong>
+                      {{ formatElapsedMinutes(getSelfServeWashPayload(attachment)?.elapsed_wash_time_seconds) }}
+                    </p>
+                  </div>
+                </template>
                 <!-- If the other type is a URL, you can create a link -->
-                <template v-if="getAttachmentContent(attachment).other.startsWith('http')">
-                  <a :href="getAttachmentContent(attachment).other" target="_blank" rel="noopener noreferrer">
+                <template v-else-if="typeof getAttachmentContent(attachment).other === 'string' && getAttachmentContent(attachment).other.startsWith('http')">
+                  <a :href="String(getAttachmentContent(attachment).other)" target="_blank" rel="noopener noreferrer">
                     {{ getAttachmentContent(attachment).other }}
                   </a>
                 </template>
                 <template v-else>
-                  <span>{{ getAttachmentContent(attachment).other }}</span>
+                  <span>{{ getAttachmentOtherText(attachment) }}</span>
                 </template>
               </template>
               <!-- NO PREVIEW -->
@@ -326,7 +381,7 @@ const onClickAttachWashCertificate = () => {
             </template>
             <template #footer>
               <div class="card-footer-item">
-                {{ t('admin.pos.created') }}: {{ new Date(attachment.created_at).toLocaleString() }}
+                {{ t('common.created') }}: {{ new Date(attachment.created_at).toLocaleString() }}
               </div>
               <a class="card-footer-item" v-if="!attachment.deleted_at" @click="onClickDelete(attachment.id)">
                 <!-- Delete button or action can be placed here -->

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

@@ -179,24 +179,23 @@ const resetAll = () => {
   reset_all_values();
 };
 
-const onClickClearAllButton = () => {
+const onClickClearAllButton = async () => {
   // Check if the session storage contains the pos_order_id
   if (localStorage.getItem("pos_order_id")) {
     order_id.value = parseInt(localStorage.getItem("pos_order_id") || "0");
   }
   // 1. Delete the order (If any)
   if (order_id.value) {
-    SessionUser.objects.orders.delete
-      .single(order_id.value)
-      .then(() => {
-        console.warn("Order deleted successfully");
-      })
-      .catch((error) => {
-        console.error("Error deleting order:", error);
-      })
-      .finally(() => {
-        resetAll();
-      });
+    try {
+      const deleted = await SessionUser.objects.orders.functions.deleteWithConfirmation(order_id.value);
+      if (!deleted) {
+        return;
+      }
+      console.warn("Order deleted successfully");
+    } catch (error) {
+      console.error("Error deleting order:", error);
+    }
+    resetAll();
   } else {
     resetAll();
   }
@@ -294,7 +293,7 @@ const isAttachmentsVisible = () => {
             </div>
             <div class="column is-narrow pl-0">
               <p class="is-size-7 has-text-weight-semibold">
-                {{ t("admin.pos.reference") }}
+                {{ t("common.reference") }}
               </p>
             </div>
           </div>

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

@@ -1,46 +1,38 @@
 <script setup lang="ts">
 import {
   reset_all_values,
-  customer_name,
-  nextStep,
-  searchAndSelectCustomer,
-  isCustomerSelected,
   order_id,
-  customer_id,
-  step,
-  reg_1,
-  reg_2,
-  reg_3,
-  reference,
-  order_notes,
-  setDepartment,
-  getDepartment,
+  getStoredPosOrderId,
 } from "@/components/shop/POSDepartmentProcess.vue";
-import GenericButton from "@/components/viewport/page/templates/generic/graphics/GenericButton.vue";
 import { resetPos } from "../objects/PosDepartmentStepMobileFlow.vue";
 import SessionUser from "@/components/session/token/SessionUser.vue";
 
-const onClickClearAll = () => {
-  // 1. Delete the order (If any)
-  // Check localstorage for pos_order_id
-  if (localStorage.getItem("pos_order_id")) {
-    order_id.value = parseInt(localStorage.getItem("pos_order_id") || "0");
-  }
-  if (order_id.value) {
-    SessionUser.objects.orders.delete
-      .single(order_id.value)
-      .then(() => {
-        // 2. Reset the POS
-        resetPos();
-        // 3. Reset all values
-        reset_all_values();
-      })
-      .catch((error) => {
-        console.error("Error deleting order:", error);
-        resetPos();
-        reset_all_values();
-      });
+const toPositiveInteger = (value: unknown) => {
+  const parsedValue = Number.parseInt(String(value ?? ""), 10);
+  return Number.isInteger(parsedValue) && parsedValue > 0 ? parsedValue : null;
+};
+
+const onClickClearAll = async () => {
+  const storedOrderId = getStoredPosOrderId();
+  const currentOrderId = toPositiveInteger(order_id.value);
+  const activeDraftOrderId = storedOrderId && currentOrderId === storedOrderId ? storedOrderId : null;
+
+  // 1. Delete only the active mobile draft order, never a historical route-loaded order.
+  if (activeDraftOrderId) {
+    try {
+      order_id.value = activeDraftOrderId;
+      const deleted = await SessionUser.objects.orders.functions.deleteWithConfirmation(activeDraftOrderId);
+      if (!deleted) {
+        return;
+      }
+    } catch (error) {
+      console.error("Error deleting order:", error);
+    }
   }
+  // 2. Reset the POS
+  resetPos();
+  // 3. Reset all values
+  reset_all_values();
 };
 </script>
 
@@ -54,7 +46,7 @@ const onClickClearAll = () => {
   >
     <div class="columns is-mobile is-vcentered has-text-centered">
       <!-- Clear all -->
-      <div class="column is-12 has-text-centered" @click="onClickClearAll()">
+      <div class="column is-12 has-text-centered">
         <div class="columns is-mobile is-vcentered is-centered">
           <div class="column is-narrow pr-1">
             <span class="icon is-small">

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

@@ -132,7 +132,7 @@ const promptForReference = async (initialValue = "") => {
     title: t("admin.pos.reference_required_title"),
     text: t("admin.pos.reference_required_text"),
     input: "text",
-    inputLabel: t("admin.pos.reference"),
+    inputLabel: t("common.reference"),
     inputValue: initialValue,
     showCancelButton: true,
     confirmButtonText: t("admin.pos.confirm"),
@@ -177,7 +177,6 @@ const validateReferenceRequirements = async () => {
       reference.value = enteredRef;
       metadata.setReference(enteredRef);
       console.warn("New reference set:", enteredRef);
-      onClick(); // Retry the click action
       return true;
     }
     console.warn("Reference number is required but was not provided. Aborting operation.");
@@ -188,7 +187,7 @@ const validateReferenceRequirements = async () => {
   }
 };
 
-const step1 = () => {
+const step1 = async () => {
   /** This function can be used to perform any specific actions for step 1 */
   // Set registration numbers
   reg_1.value = vehicles.vehicle_1.value?.reg || "";
@@ -202,18 +201,14 @@ const step1 = () => {
   mergeSafetySeal();
   // We only need to check if the customer requires reference, if the field is empty.
   if (!isNonEmptyString(reference.value)) {
-    validateReferenceRequirements().then((isValid) => {
-      if (!isValid) {
-        // The requirements were not met, do not proceed.
-        return;
-      }
-      // Proceed with setting reference and notes
-      finalizeStep1();
-    });
-  } else {
-    // Reference is already filled, just finalize step 1
-    finalizeStep1();
+    const isValid = await validateReferenceRequirements();
+    if (!isValid) {
+      return false;
+    }
   }
+
+  // Reference is resolved, persist metadata and pending attachments.
+  return finalizeStep1();
 };
 const mergeReferences = () => {
   if (metadata.getReference() && metadata.getReference().length >= 1) {
@@ -246,25 +241,34 @@ const mergeSafetySeal = () => {
   syncMobileSafetySealState(resolvedSafetySeal);
   updateSafetySeal();
 };
-const finalizeStep1 = () => {
+const finalizeStep1 = async () => {
   mergeReferences();
   mergeNotes();
   mergeSafetySeal();
   // Upload the attachments if there are any (And the order id has been created)
   if (attachments.getBase64().length > 0 && order_id.value > 0) {
-    for (const attachment of attachments.getBase64()) {
-      uploadAttachment(attachment)
-        .then(() => {
-          console.warn("Attachment uploaded successfully");
-          // Remove the attachment from the list
-          attachments.removeBase64(attachment);
-        })
-        .catch((error: any) => {
+    const uploadResults = await Promise.all(
+      attachments.getBase64().map(async (attachment: any) => {
+        try {
+          const didUpload = await uploadAttachment(attachment);
+          if (didUpload) {
+            console.warn("Attachment uploaded successfully");
+            attachments.removeBase64(attachment);
+          }
+          return didUpload;
+        } catch (error: any) {
           errors.value.push(error);
           console.warn("An error occurred while uploading the attachment:", error);
-        });
+          return false;
+        }
+      })
+    );
+
+    if (uploadResults.some((didUpload) => didUpload === false)) {
+      console.warn("One or more attachments could not be uploaded before completion.");
     }
   }
+  return true;
 };
 
 const addTransactionToHistory = async (orderId: number) => {
@@ -295,14 +299,12 @@ const getSelectedBookingId = () => {
 
 const completeStep2Order = async ({
   bookingSafetySeal = null,
-  markOrderCompleted = false,
 }: {
   bookingSafetySeal?: string | null;
-  markOrderCompleted?: boolean;
 } = {}) => {
   await finalizeCurrentMobileOrder({
     bookingSafetySeal,
-    markOrderCompleted,
+    markOrderCompleted: true,
   });
   popups.select("completed_transaction", {
     message: `Order #${order_id.value} successfully created.`,
@@ -320,16 +322,24 @@ const step2 = async () => {
 
   const selectedBookingId = getSelectedBookingId();
   const hasWashCertificateInBasket = Boolean(transactionItems.containsWashCertificate?.());
+  const resolvedSafetySeal = getResolvedMobileSafetySeal();
+  const hasResolvedSafetySeal = isNonEmptyString(resolvedSafetySeal);
   const requiresBookingCompletionPopup = Boolean(selectedBookingId && hasWashCertificateInBasket);
-  const shouldMarkOrderAsCompleted = !selectedBookingId && hasWashCertificateInBasket;
 
   try {
+    if (requiresBookingCompletionPopup && hasResolvedSafetySeal) {
+      syncMobileSafetySealState(resolvedSafetySeal);
+      await completeStep2Order({
+        bookingSafetySeal: resolvedSafetySeal,
+      });
+      return;
+    }
+
     if (requiresBookingCompletionPopup) {
       const onCompleteBookingWithSafetySeal = async ({ safetySeal = "" } = {}) => {
         syncMobileSafetySealState(safetySeal);
         await completeStep2Order({
           bookingSafetySeal: String(safetySeal ?? ""),
-          markOrderCompleted: false,
         });
       };
 
@@ -343,9 +353,7 @@ const step2 = async () => {
       return;
     }
 
-    await completeStep2Order({
-      markOrderCompleted: shouldMarkOrderAsCompleted,
-    });
+    await completeStep2Order();
   } catch (error: any) {
     errors.value.push(error);
     console.warn("An error occurred while completing the mobile order:", error);
@@ -401,12 +409,15 @@ const onClick = async () => {
     // Proceed to the next step
     switch (step.value) {
       case 1:
-        step1();
+        if (!(await step1())) {
+          return;
+        }
         const restoredOrderId = await restoreStoredPosOrderId({
           validateOrder: true,
           customerId: getCustomerId(),
           departmentId: POSDepartmentProcess.getDepartment(),
           allowCompleted: false,
+          syncDepartment: true,
         });
         if (restoredOrderId) {
           console.warn("Order ID retrieved from local storage:", restoredOrderId);
@@ -424,7 +435,9 @@ const onClick = async () => {
         });
         break;
       case 2:
-        step1();
+        if (!(await step1())) {
+          return;
+        }
         await step2();
         break;
       case 3:

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

@@ -9,6 +9,9 @@ const product = props.product;
 const note = ref(product.notes || "");
 watch(note, (newNote) => {
   product.notes = newNote;
+  if (props) {
+    props.validationMessage = "";
+  }
   // If the note is empty, remove it from the product
   if (newNote === "") {
     delete product.notes;
@@ -28,6 +31,9 @@ watch(note, (newNote) => {
           placeholder="Indtast note"
         />
       </div>
+      <p v-if="props?.validationMessage" class="help is-danger mt-2">
+        {{ props.validationMessage }}
+      </p>
     </div>
   </div>
 </template>
@@ -125,4 +131,4 @@ input.is-searched {
   flex-grow: 0;
 
 }
-</style>
+</style>

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

@@ -4,11 +4,15 @@ import { metadata, popups } from "../objects/PosDepartmentStepMobileFlow.vue";
 import { getResolvedMobileSafetySeal } from "../objects/mobileOrderCompletion.js";
 import SessionUser from "@/components/session/token/SessionUser.vue";
 const emit = defineEmits<{
-  (e: 'close'): void;
+  (e: "close"): void;
 }>();
 
 const popupProps = computed(() => popups.get()?.props || {});
-const isSubmitting = ref(false);
+type SubmitAction = "without_certificate" | "with_certificate";
+
+const submittingAction = ref<SubmitAction | null>(null);
+const isSubmitting = computed(() => submittingAction.value !== null);
+const isSubmittingAction = (action: SubmitAction) => submittingAction.value === action;
 const resolveExistingSafetySeal = () => {
   const popupSafetySeal = popupProps.value?.safetySeal;
   if (popupSafetySeal !== null && popupSafetySeal !== undefined) {
@@ -20,11 +24,17 @@ const resolveExistingSafetySeal = () => {
 const safetySealNumber = ref(resolveExistingSafetySeal());
 
 const closePopup = () => {
-  emit('close');
+  emit("close");
 };
 
-const runPopupCompletionCallback = async (callback: any, safetySeal: string) => {
-  isSubmitting.value = true;
+const closePopupIfStillActive = () => {
+  if (popups.get()?.id === "complete_booking") {
+    closePopup();
+  }
+};
+
+const runPopupCompletionCallback = async (callback: any, safetySeal: string, action: SubmitAction) => {
+  submittingAction.value = action;
   try {
     await Promise.resolve(
       callback({
@@ -32,26 +42,26 @@ const runPopupCompletionCallback = async (callback: any, safetySeal: string) =>
         safetySeal,
       })
     );
-    closePopup();
+    closePopupIfStillActive();
   } catch (error) {
     console.warn("Failed to complete booking from popup callback:", error);
   } finally {
-    isSubmitting.value = false;
+    submittingAction.value = null;
   }
 };
 
-const submitBookingCompletionFallback = async (safetySeal: string) => {
-  isSubmitting.value = true;
+const submitBookingCompletionFallback = async (safetySeal: string, action: SubmitAction) => {
+  submittingAction.value = action;
   try {
     await SessionUser.objects.order_bookings.functions.complete(
       metadata.getBookingId(),
       safetySeal === "" ? null : safetySeal
     );
-    closePopup();
+    closePopupIfStillActive();
   } catch (error) {
     console.warn("Failed to complete booking from popup fallback action:", error);
   } finally {
-    isSubmitting.value = false;
+    submittingAction.value = null;
   }
 };
 
@@ -62,10 +72,10 @@ const completeWithoutCertificate = async () => {
 
   const callback = popupProps.value?.onCompleteWithoutCertificate || popupProps.value?.onComplete;
   if (typeof callback === "function") {
-    await runPopupCompletionCallback(callback, "");
+    await runPopupCompletionCallback(callback, "", "without_certificate");
     return;
   }
-  await submitBookingCompletionFallback("");
+  await submitBookingCompletionFallback("", "without_certificate");
 };
 
 const completeWithCertificate = async () => {
@@ -76,10 +86,10 @@ const completeWithCertificate = async () => {
   const normalizedSafetySeal = String(safetySealNumber.value ?? "").trim() || resolveExistingSafetySeal();
   const callback = popupProps.value?.onCompleteWithCertificate || popupProps.value?.onComplete;
   if (typeof callback === "function") {
-    await runPopupCompletionCallback(callback, normalizedSafetySeal);
+    await runPopupCompletionCallback(callback, normalizedSafetySeal, "with_certificate");
     return;
   }
-  await submitBookingCompletionFallback(normalizedSafetySeal);
+  await submitBookingCompletionFallback(normalizedSafetySeal, "with_certificate");
 };
 </script>
 
@@ -104,29 +114,22 @@ const completeWithCertificate = async () => {
       <button
         class="button is-light"
         data-testid="pos-mobile-booking-complete-without-certificate"
-        :class="{ 'is-loading': isSubmitting }"
+        :class="{ 'is-loading': isSubmittingAction('without_certificate') }"
         :disabled="isSubmitting"
         @click="completeWithoutCertificate"
       >
         Intet vaskecertifikat
       </button>
       <button
-          class="button is-primary"
-          data-testid="pos-mobile-booking-complete-with-certificate"
-          :class="{ 'is-loading': isSubmitting }"
-          :disabled="isSubmitting"
-          @click="completeWithCertificate"
+        class="button is-primary"
+        data-testid="pos-mobile-booking-complete-with-certificate"
+        :class="{ 'is-loading': isSubmittingAction('with_certificate') }"
+        :disabled="isSubmitting"
+        @click="completeWithCertificate"
       >
         Generer vaskecertifikat
       </button>
     </div>
-    <!--<FormDisplay
-        :form_identifier="'GENERATE_BOOKING_WASH_CERTIFICATE'"
-        v-bind:validator_options="{validateBookingId: {default: metadata.getBookingId(), locked: true, visible: false}}"
-        :onSuccessfulSubmission="onSuccessfulCertificateSubmission"
-        :showSuccessSubmitAlert="false"
-        :showResetButton="false"
-    />-->
   </div>
 </template>
 
@@ -152,7 +155,7 @@ input {
   width: 100%;
   height: 42px;
 
-  background: #FFFFFF;
+  background: #ffffff;
   border-color: transparent;
   border-radius: 4px;
 
@@ -185,8 +188,8 @@ input:focus-visible {
   gap: 10px;
   width: 100%;
   height: 42px;
-  background: #FFFFFF;
-  border: 1px solid #A6A5A5;
+  background: #ffffff;
+  border: 1px solid #a6a5a5;
   border-radius: 4px;
 
   /* Inside auto layout */
@@ -211,7 +214,7 @@ input.is-searched {
   width: 100%;
   height: 42px;
 
-  background: #FFFFFF;
+  background: #ffffff;
   border: 1px solid #000000;
   border-radius: 4px;
   border-bottom: none;
@@ -221,6 +224,5 @@ input.is-searched {
   order: 1;
   align-self: stretch;
   flex-grow: 0;
-
 }
 </style>

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

@@ -339,7 +339,7 @@ const isBookingScheduledForToday = (booking: any) => {
               class="tag booking-option__today-tag"
               :data-testid="`pos-mobile-order-booking-today-${booking.id}`"
             >
-              {{ t("global.time.today") }}
+              {{ t("common.today") }}
             </span>
             <span v-if="didBookingDetailFail(booking)" class="tag is-light booking-option__tag">
               {{ t("admin.pos.not_found") }}
@@ -355,6 +355,7 @@ const isBookingScheduledForToday = (booking: any) => {
                 :refreshFunction="emitRefreshBookings"
                 :icon="'fas fa-ellipsis-v'"
                 trigger-button-variant="text"
+                allow-booking-completion
               >
                 <template #actions />
               </ActionSettingsWheelButton>
@@ -372,7 +373,7 @@ const isBookingScheduledForToday = (booking: any) => {
             <dd>{{ getBookingPlates(booking) || t("admin.pos.not_found") }}</dd>
           </div>
           <div class="booking-option__meta-item">
-            <dt>{{ t("admin.pos.order_booking_selector.reference_label") }}</dt>
+            <dt>{{ t("common.reference") }}</dt>
             <dd>{{ getBookingReference(booking) || "-" }}</dd>
           </div>
           <div v-if="getBookingPo(booking)" class="booking-option__meta-item">
@@ -391,7 +392,7 @@ const isBookingScheduledForToday = (booking: any) => {
           :data-testid="`pos-mobile-order-booking-services-${booking.id}`"
         >
           <div class="booking-option__section-header">
-            <p class="booking-option__section-title">{{ t("admin.pos.order_booking_selector.services_label") }}</p>
+            <p class="booking-option__section-title">{{ t("common.services") }}</p>
             <div
               v-if="!isBookingLoading(booking) && getBookingItemPreviewTotal(booking) !== null"
               class="booking-option__section-total"
@@ -408,8 +409,8 @@ const isBookingScheduledForToday = (booking: any) => {
           </div>
           <div v-else-if="getBookingItemPreviewRows(booking).length > 0" class="booking-option__item-preview">
             <div class="booking-option__item-preview-head">
-              <span>{{ t("global.quantity") }}</span>
-              <span>{{ t("admin.pos.order_booking_selector.services_label") }}</span>
+              <span>{{ t("common.quantity") }}</span>
+              <span>{{ t("common.services") }}</span>
               <span>{{ t("admin.pos.price_dkk") }}</span>
             </div>
             <div
@@ -455,7 +456,7 @@ const isBookingScheduledForToday = (booking: any) => {
             :data-testid="`pos-mobile-order-booking-use-${booking.id}`"
             @click="onSelect(booking)"
           >
-            {{ t("admin.pos.order_booking_selector.use_booking") }}
+            {{ t("common.select") }}
           </button>
         </div>
       </article>

src/components/displays/department/pos/steps/mobile/objects/PosDepartment.vue

@@ -4,8 +4,10 @@ export type PosDepartment = {
   id: number;
   name: string;
   description?: string;
+  order_priority?: number | null;
+  priority_order?: number | null;
   branding?: number;
   latitude?: number;
   longitude?: number;
-}
-</script>
+};
+</script>

src/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue

@@ -133,7 +133,7 @@ const defaultActionButtons = computed<{ [key: string]: PosActionButton }>(() =>
   return {
     /** General purpose action buttons (used by PosAddons)*/
     confirm: {
-      label: t("admin.pos.action_buttons.confirm"),
+      label: t("common.confirm"),
       description: t("admin.pos.action_buttons.confirm_desc"),
       onClick: () => {
         clearPopup(); // Close the popup
@@ -141,7 +141,7 @@ const defaultActionButtons = computed<{ [key: string]: PosActionButton }>(() =>
       color: "primary",
     },
     cancel: {
-      label: t("admin.pos.action_buttons.cancel"),
+      label: t("common.cancel"),
       description: t("admin.pos.action_buttons.cancel_desc"),
       onClick: () => {
         clearPopup(); // Close the popup
@@ -149,7 +149,7 @@ const defaultActionButtons = computed<{ [key: string]: PosActionButton }>(() =>
       color: "light",
     },
     close: {
-      label: t("admin.pos.action_buttons.close"),
+      label: t("common.close"),
       description: t("admin.pos.action_buttons.close_desc"),
       onClick: () => {
         clearPopup(); // Close the popup
@@ -788,7 +788,15 @@ const promptForNotesIfRequired = (product: PosProduct, callback: (notes: string)
           label: "Bekræft",
           description: "Bekræft noten og fortsæt",
           onClick: () => {
-            callback(popups.get()?.props?.product?.notes || "");
+            const activePopup = popups.get();
+            const note = String(activePopup?.props?.product?.notes || "").trim();
+            if (!note) {
+              if (activePopup?.props) {
+                activePopup.props.validationMessage = "Note er påkrævet for dette produkt";
+              }
+              return;
+            }
+            callback(note);
             clearPopup();
           },
           color: "primary",

src/components/displays/department/pos/steps/mobile/objects/mobileOrderCompletion.js

@@ -4,6 +4,7 @@ import {
   order_notes,
   order_safety_seal,
   reference,
+  clearStoredPosOrderId,
 } from "@/components/shop/POSDepartmentProcess.vue";
 import { metadata } from "./PosDepartmentStepMobileFlow.vue";
 
@@ -115,5 +116,6 @@ export const finalizeCurrentMobileOrder = async (options = {}) => {
   if (normalizedOptions.markOrderCompleted) {
     await SessionUser.objects.orders.functions.mark_as_completed(normalizedOrderId);
   }
+  clearStoredPosOrderId();
   return normalizedOrderId;
 };

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

@@ -183,7 +183,7 @@ const handleMouseWheel = (e: WheelEvent) => {
         <span class="icon is-small">
           <i class="fas fa-times"></i>
         </span>
-        <small>{{ t("global.close") }}</small>
+        <small>{{ t("common.close") }}</small>
         </button>
     </div>
   </div>

src/components/displays/department/pos/sync/ordersSyncTable.vue

@@ -286,7 +286,7 @@ const tableHeaders = ref([
   },
   {
     name: 'reference',
-    title: t('objects.columns.reference'),
+    title: t('common.reference'),
     sortable: true,
   },
   {
@@ -296,7 +296,7 @@ const tableHeaders = ref([
   },
   {
     name: 'created_at',
-    title: t('objects.columns.date'),
+    title: t('common.date'),
     sortable: true,
   },
   {

src/components/displays/department/pos/sync/xlvaskUsageAmountCache.js

@@ -0,0 +1,160 @@
+export const XLVASK_USAGE_AMOUNT_CACHE_TTL_MS = 10 * 60 * 1000;
+
+const CACHE_PREFIX = "xlvask-usage-amount:";
+const memoryCache = new Map();
+
+const getStorageValue = (key) => {
+  try {
+    if (typeof window === "undefined" || !window.localStorage) {
+      return "";
+    }
+    return window.localStorage.getItem(key) || "";
+  } catch {
+    return "";
+  }
+};
+
+const hashCacheScopePart = (value) => {
+  let hash = 5381;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = ((hash << 5) + hash) ^ value.charCodeAt(index);
+  }
+  return (hash >>> 0).toString(36);
+};
+
+const getAuthenticatedCacheScope = () => {
+  const token = getStorageValue("token");
+  if (!token) {
+    return "";
+  }
+
+  return [
+    hashCacheScopePart(token),
+    getStorageValue("is_subuser") === "true" ? "subuser" : "user",
+    getStorageValue("selected_customer_number"),
+  ]
+    .map((part) => encodeURIComponent(String(part ?? "")))
+    .join("|");
+};
+
+const getScopedCacheKey = (cacheKey) => {
+  const scope = getAuthenticatedCacheScope();
+  return scope ? `${scope}:${cacheKey}` : "";
+};
+
+const safeSessionStorage = () => {
+  try {
+    if (typeof window === "undefined" || !window.sessionStorage) {
+      return null;
+    }
+    return window.sessionStorage;
+  } catch {
+    return null;
+  }
+};
+
+const normalizeUsageLogId = (objectOrId) => {
+  const value = typeof objectOrId === "object" ? objectOrId?.usage_log_id ?? objectOrId?.id : objectOrId;
+  const parsed = Number.parseInt(String(value ?? ""), 10);
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : 0;
+};
+
+const isFreshEntry = (entry) => {
+  const storedAt = Number(entry?.storedAt ?? 0);
+  return storedAt > 0 && Date.now() - storedAt <= XLVASK_USAGE_AMOUNT_CACHE_TTL_MS;
+};
+
+export const buildXlvaskUsageAmountCacheKey = (objectOrId) => {
+  const usageLogId = normalizeUsageLogId(objectOrId);
+  return usageLogId > 0 ? String(usageLogId) : "";
+};
+
+export const getCachedXlvaskUsageAmount = (objectOrId) => {
+  const cacheKey = buildXlvaskUsageAmountCacheKey(objectOrId);
+  const scopedCacheKey = cacheKey ? getScopedCacheKey(cacheKey) : "";
+  if (!scopedCacheKey) {
+    return null;
+  }
+
+  const memoryEntry = memoryCache.get(scopedCacheKey);
+  if (isFreshEntry(memoryEntry)) {
+    return memoryEntry.data;
+  }
+
+  if (memoryEntry) {
+    memoryCache.delete(scopedCacheKey);
+  }
+
+  const storage = safeSessionStorage();
+  if (!storage) {
+    return null;
+  }
+
+  const storageKey = `${CACHE_PREFIX}${scopedCacheKey}`;
+  try {
+    const parsed = JSON.parse(storage.getItem(storageKey) || "null");
+    if (!isFreshEntry(parsed)) {
+      storage.removeItem(storageKey);
+      return null;
+    }
+    memoryCache.set(scopedCacheKey, parsed);
+    return parsed.data;
+  } catch {
+    storage.removeItem(storageKey);
+    return null;
+  }
+};
+
+export const setCachedXlvaskUsageAmount = (objectOrId, data) => {
+  const cacheKey = buildXlvaskUsageAmountCacheKey(objectOrId);
+  const scopedCacheKey = cacheKey ? getScopedCacheKey(cacheKey) : "";
+  if (!scopedCacheKey) {
+    return;
+  }
+
+  const entry = {
+    storedAt: Date.now(),
+    data,
+  };
+  memoryCache.set(scopedCacheKey, entry);
+
+  const storage = safeSessionStorage();
+  if (!storage) {
+    return;
+  }
+
+  try {
+    storage.setItem(`${CACHE_PREFIX}${scopedCacheKey}`, JSON.stringify(entry));
+  } catch {
+    // Best-effort cache. Quota errors should not block XL Vask usage rows.
+  }
+};
+
+export const clearCachedXlvaskUsageAmount = (objectOrId = null) => {
+  const storage = safeSessionStorage();
+  const cacheKey = objectOrId === null ? "" : buildXlvaskUsageAmountCacheKey(objectOrId);
+  const scopedCacheKey = cacheKey ? getScopedCacheKey(cacheKey) : "";
+
+  if (scopedCacheKey) {
+    memoryCache.delete(scopedCacheKey);
+    try {
+      storage?.removeItem(`${CACHE_PREFIX}${scopedCacheKey}`);
+    } catch {
+      // Best-effort cache cleanup.
+    }
+    return;
+  }
+
+  memoryCache.clear();
+  if (!storage) {
+    return;
+  }
+
+  try {
+    Object.keys(storage)
+      .filter((key) => key.startsWith(CACHE_PREFIX))
+      .forEach((key) => storage.removeItem(key));
+  } catch {
+    // Best-effort cache cleanup.
+  }
+};

src/components/displays/department/pos/sync/xlvaskUsageFilters.js

@@ -1,4 +1,19 @@
+const hasLinkedOrder = (object) => Number(object?.linked_order_id) > 0;
+
 export const isUsageOrderAttachedToOrder = (object) => {
+  if (hasLinkedOrder(object)) {
+    return true;
+  }
+
+  const automation = object?.automation;
+  const automationStatus = automation?.status;
+  if (
+    ["auto_accepted", "accepted"].includes(automationStatus) &&
+    ["attach_order", "create_order"].includes(automation?.action)
+  ) {
+    return true;
+  }
+
   const duplicates = Array.isArray(object?.duplicates) ? object.duplicates : [];
   return duplicates.some((duplicate) => duplicate?.wash_id === object?.wash_id);
 };

src/components/displays/department/pos/sync/xlvaskUsageOrdersTable.vue

@@ -14,6 +14,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  highlightUsageLogId: {
+    type: Number,
+    default: 0,
+  },
 });
 import {computed, ref, watch} from 'vue';
 import { departments, getDepartments, getDepartmentName} from "@/components/pagination/departmentTabs.vue";
@@ -28,6 +32,11 @@ import {
   filterUsageOrdersByAttachment,
   isUsageOrderAttachedToOrder
 } from "@/components/displays/department/pos/sync/xlvaskUsageFilters.js";
+import {
+  clearCachedXlvaskUsageAmount,
+  getCachedXlvaskUsageAmount,
+  setCachedXlvaskUsageAmount
+} from "@/components/displays/department/pos/sync/xlvaskUsageAmountCache.js";
 
 const redirectDepartmentOrderPage = (orderId, departmentId) => {
   // Send the user to the order page (In a new tab)
@@ -204,25 +213,57 @@ const humanReadableTimeAgo = (dateString) => {
   return 'lige nu';
 };
 
+const applyGeneratedContent = (object, data) => {
+  const orderItems = Array.isArray(data?.order_items) ? data.order_items : [];
+  const potentialDuplicates = Array.isArray(data?.potential_duplicates) ? data.potential_duplicates : [];
+
+  object.items = orderItems;
+  if (potentialDuplicates.length > 0) {
+    object.selectedDuplicateId = parseInt(potentialDuplicates[0].id);
+    object.duplicates = potentialDuplicates;
+  }
+  if (data?.automation !== undefined) {
+    object.automation = data.automation;
+  }
+  object.fast_link_key = undefined;
+  object.loading = false;
+};
+
+const applyCachedGeneratedContent = (object) => {
+  const cached = getCachedXlvaskUsageAmount(object);
+  if (!cached) {
+    return false;
+  }
+
+  applyGeneratedContent(object, cached);
+  return true;
+};
+
 const generateContent = (object) => {
+  if (applyCachedGeneratedContent(object)) {
+    return Promise.resolve();
+  }
+
   if (!object.fast_link_key || object.loading) {
-    return; // If no fast link key, do not generate content
+    return Promise.resolve(); // If no fast link key, do not generate content
   }
   object.loading = true; // Set loading state to true
   // Generate content based on the object
-  SessionUser.request(
+  return SessionUser.request(
       '/modules/xlvask/services/usage/orders/fast-link?fast_link_key=' + object.fast_link_key,
       'GET'
   ).then((response) => {
     const data = response.data.data;
-        object.fast_link_key = undefined; // Clear the fast link key after use
-        object.items = data.order_items;
-        object.selectedDuplicateId = data.potential_duplicates?.length ? parseInt(data.potential_duplicates[0].id) : null;
-        object.duplicates = data.potential_duplicates;
-        object.loading = false; // Set loading state to false
+        applyGeneratedContent(object, data);
+        setCachedXlvaskUsageAmount(object, {
+          order_items: object.items,
+          potential_duplicates: object.duplicates,
+          automation: object.automation,
+        });
       }
   ).catch((error) => {
     console.error('Error generating content:', error);
+    object.loading = false;
   });
 };
 
@@ -249,9 +290,20 @@ const getPriceFromOrderItems = (orderItems) => {
   }, 0);
 };
 
+const getObjectPrice = (object) => {
+  if (doesObjectHaveItems(object)) {
+    return getPriceFromOrderItems(object.items);
+  }
+
+  const parsedAmount = Number(object?.total_net_amount ?? 0);
+  return Number.isFinite(parsedAmount) ? parsedAmount : 0;
+};
+
+const doesObjectHaveAmount = (object) => getObjectPrice(object) > 0;
+
 const doesObjectPriceMatchPotentialDuplicate = (object, potentialDuplicate) => {
   // Check if the price of the object matches the potential duplicate
-  return getPriceFromOrderItems(object.items) === potentialDuplicate.total_net_amount ?? 0;
+  return getObjectPrice(object) === Number(potentialDuplicate?.total_net_amount ?? 0);
 };
 
 const getPrimaryItemFromOrderItems = (orderItems) => {
@@ -276,6 +328,14 @@ const getProductName = (orderItem) => {
   return product ? product.name : 'Ukendt produkt';
 };
 
+const getObjectPrimaryProductName = (object) => {
+  if (doesObjectHaveItems(object)) {
+    return getProductName(getPrimaryItemFromOrderItems(object.items));
+  }
+
+  return object?.xlvask_primary_product_name || object?.primary_product_name || '';
+};
+
 const doesObjectHaveItems = (object) => {
   // Check if the object has items
   return object.items && Array.isArray(object.items) && object.items.length > 0;
@@ -288,12 +348,12 @@ const automaticallyLoadContent = (object) => {
   }
 }
 
-// Automatically load content for each object when the objects prop changes
+const isHighlightedUsageLog = (object) => Number(object?.id || 0) === Number(props.highlightUsageLogId || 0);
+
+// Reuse cached detail payloads immediately, but only fetch one-time fast-link details on demand.
 watch(() => props.objects, (newObjects) => {
   newObjects.forEach(object => {
-    if (object.fast_link_key && !object.loading) {
-      generateContent(object);
-    }
+    applyCachedGeneratedContent(object);
   });
 }, { immediate: true, deep: true });
 
@@ -416,7 +476,7 @@ const isObjectAttachedToOrder = (object) => {
 const doesObjectHaveExactMatch = (object) => {
   // Check if the object has any duplicates with the same order price
   return object.duplicates?.some(duplicate => {
-    return getPriceFromOrderItems(object.items) === duplicate.total_net_amount;
+    return getObjectPrice(object) === Number(duplicate.total_net_amount ?? 0);
   }) || false;
 };
 
@@ -425,6 +485,151 @@ const doesObjectHaveDuplicates = (object) => {
   return object.duplicates && Array.isArray(object.duplicates) && object.duplicates.length > 0;
 };
 
+const hasAutomationState = (object) => {
+  const status = object?.automation?.status;
+  return !!status && status !== 'none' && status !== 'failed';
+};
+
+const isAutomationActionable = (object) => {
+  return object?.automation?.can_accept || object?.automation?.can_deny;
+};
+
+const getAutomationOrderId = (object) => {
+  return object?.automation?.matched_order_id
+      ?? object?.automation?.created_order_id
+      ?? object?.automation?.candidate_order?.id
+      ?? null;
+};
+
+const getAutomationLabel = (object) => {
+  const automation = object?.automation ?? {};
+  const orderId = getAutomationOrderId(object);
+  const orderSuffix = orderId ? ` #${orderId}` : '';
+
+  if (automation.status === 'suggested') {
+    return automation.action === 'create_order'
+        ? 'Foreslået: Opret ordre'
+        : `Foreslået: Tilknyt ordre${orderSuffix}`;
+  }
+
+  if (automation.status === 'auto_accepted') {
+    return automation.action === 'create_order'
+        ? `Oprettet automatisk${orderSuffix}`
+        : `Tilknyttet automatisk${orderSuffix}`;
+  }
+
+  if (automation.status === 'accepted') {
+    return automation.action === 'create_order'
+        ? `Oprettet${orderSuffix}`
+        : `Accepteret${orderSuffix}`;
+  }
+
+  if (automation.status === 'denied') {
+    return 'Afvist';
+  }
+
+  return '';
+};
+
+const getAutomationReason = (object) => {
+  return object?.automation?.reason || object?.automation?.error || '';
+};
+
+const getAutomationConfidence = (object) => {
+  const confidence = Number(object?.automation?.confidence ?? 0);
+  if (!Number.isFinite(confidence) || confidence <= 0) {
+    return '';
+  }
+
+  return `${Math.round(confidence * 100)}% sikkerhed`;
+};
+
+const getAutomationTagClass = (object) => {
+  const status = object?.automation?.status;
+  if (status === 'auto_accepted' || status === 'accepted') {
+    return 'is-success';
+  }
+  if (status === 'denied') {
+    return 'is-light';
+  }
+  if (status === 'failed') {
+    return 'is-danger';
+  }
+  return object?.automation?.source === 'openai' ? 'is-info' : 'is-warning';
+};
+
+const getAutomationMessageClass = (object) => {
+  const status = object?.automation?.status;
+  if (status === 'auto_accepted' || status === 'accepted') {
+    return 'is-success';
+  }
+  if (status === 'denied') {
+    return 'is-light';
+  }
+  if (status === 'failed') {
+    return 'is-danger';
+  }
+  return object?.automation?.source === 'openai' ? 'is-info' : 'is-warning';
+};
+
+const getAutomationIconClass = (object) => {
+  const automation = object?.automation ?? {};
+  if (automation.status === 'denied') {
+    return 'fa-ban';
+  }
+  if (automation.status === 'failed') {
+    return 'fa-exclamation-triangle';
+  }
+  if (automation.action === 'create_order') {
+    return 'fa-plus-circle';
+  }
+  return 'fa-link';
+};
+
+const setAutomationDecision = (object, decision) => {
+  if (!object?.id || object.automationLoading) {
+    return;
+  }
+
+  object.automationLoading = true;
+  SessionUser.request(
+      `/modules/xlvask/services/usage/orders/${object.id}/automation/${decision}`,
+      'POST',
+      {
+        suggestion_id: object.automation?.id ?? null,
+      }
+  ).then((response) => {
+    object.automation = response.data.data;
+    clearCachedXlvaskUsageAmount(object);
+    window.dispatchEvent(new CustomEvent('xlvask-usage-order-updated', {
+      detail: {
+        usageLogId: object.id,
+        decision,
+      },
+    }));
+  }).catch((error) => {
+    Swal.fire({
+      title: 'Fejl',
+      text: decision === 'accept'
+          ? 'Forslaget kunne ikke accepteres.'
+          : 'Forslaget kunne ikke afvises.',
+      icon: 'error',
+      confirmButtonText: 'OK',
+    });
+    console.error(error);
+  }).finally(() => {
+    object.automationLoading = false;
+  });
+};
+
+const acceptAutomation = (object) => {
+  setAutomationDecision(object, 'accept');
+};
+
+const denyAutomation = (object) => {
+  setAutomationDecision(object, 'deny');
+};
+
 const filteredObjects = computed(() => {
   return filterUsageOrdersByAttachment(props.objects, props.showOnlyUnattachedVehicle);
 });
@@ -539,47 +744,100 @@ const filteredObjects = computed(() => {
     </tfoot>
   </table>
   <template v-for="object in filteredObjects" :key="object.id">
-    <WhiteBoxCard v-bind:loading="object.loading ?? false" :toggleable="true" @mouseover="automaticallyLoadContent(object)" @click="automaticallyLoadContent(object)" :default-open="object.isOpen ?? false">
+    <WhiteBoxCard
+      v-bind:loading="object.loading ?? false"
+      :toggleable="true"
+      :class="{ 'xlvask-usage-card--highlighted': isHighlightedUsageLog(object) }"
+      @mouseover="automaticallyLoadContent(object)"
+      @click="automaticallyLoadContent(object)"
+      :default-open="isHighlightedUsageLog(object) || (object.isOpen ?? false)"
+    >
       <template #header>
-        <p class="card-header-title">
-          <!-- Registration Number -->
-          <span class="has-text-weight-bold">{{ object.reg_1 }}</span>
-          <!-- Time Ago -->
-          <span class="tag is-light is-size-7 ml-2">
-            {{ humanReadableTimeAgo(object.created_at) }}
-          </span>
-          <!-- Primary Item Name -->
-          <span class="tag is-light is-size-7 ml-2" v-if="doesObjectHaveItems(object)">
-            {{ getProductName(getPrimaryItemFromOrderItems(object.items)) }}
-          </span>
-          <!-- Price -->
-          <span class="tag is-light is-size-7 ml-2" v-if="doesObjectHaveItems(object)">
-            {{ SessionUser.functions.currency.toLocal(getPriceFromOrderItems(object.items).toFixed(2)) }}
-          </span>
-          <!-- Linked to order status -->
-          <span class="tag is-light is-size-7 ml-2" :class="{ 'is-grey': !isObjectAttachedToOrder(object), 'is-success': isObjectAttachedToOrder(object) }">
-            <span class="icon is-small"><i class="fas" :class="isObjectAttachedToOrder(object) ? 'fa-link' : 'fa-unlink'"></i></span>
-            <span class="has-text-weight-bold">{{ isObjectAttachedToOrder(object) ? 'Tilknyttet ordre' : 'Ikke tilknyttet ordre' }}</span>
-          </span>
-          <!-- Potential duplicates found?->Exact match found ?-->
-          <span class="tag is-light is-size-7 ml-2" :class="{ 'is-success': doesObjectHaveExactMatch(object), 'is-warning': !doesObjectHaveExactMatch(object) }" v-if="doesObjectHaveDuplicates(object)">
-            <span class="icon is-small"><i class="fas" :class="doesObjectHaveExactMatch(object) ? 'fa-check' : 'fa-exclamation-triangle'"></i></span>
-            <span class="has-text-weight-bold">{{ (doesObjectHaveExactMatch(object) ? SessionUser.objects.global.language.price_match : SessionUser.objects.global.language.price_unmatch) }}</span>
-          </span>
-          <!-- Department and Lane -->
-          <span class="tags has-addons ml-2">
-            <span class="tag">{{ getDepartmentName(object.department_id) }}</span>
-            <span class="tag is-info is-light">{{ object.lane }}</span>
-          </span>
-        </p>
-        <p class="card-header-title is-justify-content-end">
-          <span class="has-text-weight-bold">{{ object.customer_name }}</span>
-        </p>
+        <div class="card-header-title xlvask-usage-card-header">
+          <div class="xlvask-usage-card-main">
+            <div class="xlvask-usage-card-primary">
+              <span class="has-text-weight-bold xlvask-usage-registration">{{ object.reg_1 }}</span>
+              <span class="tag is-light is-size-7 xlvask-usage-chip">
+                {{ humanReadableTimeAgo(object.created_at) }}
+              </span>
+              <span class="tag is-light is-size-7 xlvask-usage-chip" v-if="getObjectPrimaryProductName(object)">
+                {{ getObjectPrimaryProductName(object) }}
+              </span>
+              <span class="tag is-light is-size-7 xlvask-usage-chip xlvask-usage-price" v-if="doesObjectHaveAmount(object)">
+                {{ SessionUser.functions.currency.toLocal(getObjectPrice(object).toFixed(2)) }}
+              </span>
+            </div>
+            <div class="xlvask-usage-card-status">
+              <span class="tag is-light is-size-7 xlvask-usage-chip" :class="{ 'is-grey': !isObjectAttachedToOrder(object), 'is-success': isObjectAttachedToOrder(object) }">
+                <span class="icon is-small"><i class="fas" :class="isObjectAttachedToOrder(object) ? 'fa-link' : 'fa-unlink'"></i></span>
+                <span class="has-text-weight-bold xlvask-usage-chip-text">{{ isObjectAttachedToOrder(object) ? 'Tilknyttet ordre' : 'Ikke tilknyttet ordre' }}</span>
+              </span>
+              <span
+                  v-if="hasAutomationState(object)"
+                  class="tag is-light is-size-7 xlvask-usage-chip xlvask-usage-automation-chip"
+                  :class="getAutomationTagClass(object)"
+                  :data-testid="'xlvask-automation-suggestion-' + object.id"
+              >
+                <span class="icon is-small"><i class="fas" :class="getAutomationIconClass(object)"></i></span>
+                <span class="has-text-weight-bold xlvask-usage-chip-text">{{ getAutomationLabel(object) }}</span>
+              </span>
+              <span class="tag is-light is-size-7 xlvask-usage-chip xlvask-usage-warning-chip" :class="{ 'is-success': doesObjectHaveExactMatch(object), 'is-warning': !doesObjectHaveExactMatch(object) }" v-if="doesObjectHaveDuplicates(object)">
+                <span class="icon is-small"><i class="fas" :class="doesObjectHaveExactMatch(object) ? 'fa-check' : 'fa-exclamation-triangle'"></i></span>
+                <span class="has-text-weight-bold xlvask-usage-chip-text">{{ (doesObjectHaveExactMatch(object) ? SessionUser.objects.global.language.price_match : SessionUser.objects.global.language.price_unmatch) }}</span>
+              </span>
+              <span class="tags has-addons xlvask-usage-location-tags">
+                <span class="tag xlvask-usage-chip">{{ getDepartmentName(object.department_id) }}</span>
+                <span class="tag is-info is-light xlvask-usage-chip">{{ object.lane }}</span>
+              </span>
+            </div>
+          </div>
+          <div class="xlvask-usage-card-customer" :title="object.customer_name">
+            {{ object.customer_name }}
+          </div>
+        </div>
       </template>
       <template #content>
-        <div class="columns">
-          <div class="column is-eight">
+        <div class="columns xlvask-usage-content-columns">
+          <div class="column is-10 xlvask-usage-main-column">
             <div class="content">
+              <article
+                  v-if="hasAutomationState(object)"
+                  class="message mb-3"
+                  :class="getAutomationMessageClass(object)"
+              >
+                <div class="message-body">
+                  <div class="is-flex is-align-items-center is-justify-content-space-between is-flex-wrap-wrap">
+                    <div>
+                      <p class="has-text-weight-bold mb-1">
+                        <span class="icon is-small"><i class="fas" :class="getAutomationIconClass(object)"></i></span>
+                        <span>{{ getAutomationLabel(object) }}</span>
+                      </p>
+                      <p v-if="getAutomationReason(object)" class="mb-1">{{ getAutomationReason(object) }}</p>
+                      <p v-if="getAutomationConfidence(object)" class="is-size-7 has-text-grey">{{ getAutomationConfidence(object) }}</p>
+                    </div>
+                    <div class="buttons mb-0" v-if="isAutomationActionable(object)">
+                      <button
+                          class="button is-small is-success"
+                          :class="{ 'is-loading': object.automationLoading }"
+                          :disabled="object.automationLoading"
+                          :data-testid="'xlvask-automation-accept-' + object.id"
+                          @click.stop="acceptAutomation(object)"
+                      >
+                        Accepter
+                      </button>
+                      <button
+                          class="button is-small is-light"
+                          :class="{ 'is-loading': object.automationLoading }"
+                          :disabled="object.automationLoading"
+                          :data-testid="'xlvask-automation-deny-' + object.id"
+                          @click.stop="denyAutomation(object)"
+                      >
+                        Afvis
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </article>
               <div class="message" :class="{ 'is-warning': (!isObjectAttachedToOrder(object)), 'is-success': isObjectAttachedToOrder(object) }">
                 <div class="message-body">
                   <template v-if="object.wash_id">
@@ -615,9 +873,8 @@ const filteredObjects = computed(() => {
                   </template>
                 </div>
               </div>
-              <span v-if="!object.loading">{{generateContent(object)}}</span>
               <template v-if="object.items">
-                <div class="columns">
+                <div class="columns xlvask-order-comparison-columns">
                   <div class="column" :class="{ 'is-12': (!object.duplicates?.length && !isComparingOrders(object)), 'is-6': (object.duplicates?.length && isComparingOrders(object)) }">
                     <div class="field">
                       <input class="input" type="text" readonly :value="getDepartmentName(object.department_id) + ' - ' + object.created_at + ' (' + SessionUser.objects.global.language.generated + ')'"/>
@@ -666,7 +923,7 @@ const filteredObjects = computed(() => {
               <span><br>{{ object.wash_id }}</span>
             </div>
           </div>
-          <div class="column is-2">
+          <div class="column is-2 xlvask-usage-actions-column">
             <div class="content">
               <div class="buttons">
                 <template v-if="isObjectAttachedToOrder(object)">
@@ -729,4 +986,187 @@ const filteredObjects = computed(() => {
 </template>
 
 <style scoped>
+.xlvask-usage-card--highlighted {
+  border-left: 4px solid #3273dc;
+  box-shadow: 0 0 0 2px rgba(50, 115, 220, 0.16);
+}
+
+.xlvask-usage-card-header {
+  align-items: start;
+  display: grid;
+  gap: 0.6rem 1rem;
+  grid-template-columns: minmax(0, 1fr) minmax(9rem, 15rem);
+  min-width: 0;
+  width: 100%;
+}
+
+.xlvask-usage-card-main {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  min-width: 0;
+}
+
+.xlvask-usage-card-primary,
+.xlvask-usage-card-status {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.xlvask-usage-registration {
+  flex: 0 0 auto;
+  line-height: 1.45;
+  white-space: nowrap;
+}
+
+.xlvask-usage-card-primary > .tag,
+.xlvask-usage-card-status > .tag,
+.xlvask-usage-card-status > .tags {
+  margin: 0 !important;
+}
+
+.xlvask-usage-chip {
+  height: auto;
+  line-height: 1.2;
+  max-width: 100%;
+  min-height: 1.6rem;
+  min-width: 0;
+  padding-bottom: 0.25rem;
+  padding-top: 0.25rem;
+  white-space: normal;
+}
+
+.xlvask-usage-chip .icon {
+  flex: 0 0 auto;
+}
+
+.xlvask-usage-chip-text {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.xlvask-usage-automation-chip .xlvask-usage-chip-text {
+  max-width: 18rem;
+}
+
+.xlvask-usage-warning-chip .xlvask-usage-chip-text {
+  max-width: 15rem;
+}
+
+.xlvask-usage-location-tags {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 1 auto;
+  flex-wrap: nowrap;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.xlvask-usage-location-tags .tag:first-child {
+  display: block;
+  max-width: 10rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.xlvask-usage-card-customer {
+  font-weight: 700;
+  line-height: 1.25;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  text-align: left;
+}
+
+.xlvask-usage-content-columns,
+.xlvask-order-comparison-columns {
+  min-width: 0;
+  width: 100%;
+}
+
+.xlvask-usage-main-column,
+.xlvask-usage-actions-column,
+.xlvask-order-comparison-columns > .column {
+  min-width: 0;
+}
+
+.xlvask-usage-main-column .content {
+  min-width: 0;
+}
+
+.xlvask-order-comparison-columns .input,
+.xlvask-order-comparison-columns :deep(table) {
+  max-width: 100%;
+}
+
+.xlvask-order-comparison-columns :deep(.table-container) {
+  overflow-x: auto;
+}
+
+@media screen and (max-width: 1500px) {
+  .xlvask-usage-card-header {
+    grid-template-columns: minmax(0, 1fr) minmax(8rem, 12rem);
+  }
+
+  .xlvask-usage-automation-chip .xlvask-usage-chip-text {
+    max-width: 13rem;
+  }
+
+  .xlvask-usage-warning-chip .xlvask-usage-chip-text,
+  .xlvask-usage-location-tags .tag:first-child {
+    max-width: 9rem;
+  }
+}
+
+@media screen and (max-width: 1350px) {
+  .xlvask-usage-card-header {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .xlvask-usage-card-customer {
+    max-width: 100%;
+  }
+
+  .xlvask-order-comparison-columns {
+    display: block;
+  }
+
+  .xlvask-order-comparison-columns > .column {
+    flex: none;
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 1215px) {
+  .xlvask-usage-content-columns {
+    display: block;
+  }
+
+  .xlvask-usage-actions-column .buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .xlvask-usage-actions-column .button {
+    flex: 1 1 10rem;
+    margin-bottom: 0;
+    width: auto;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .xlvask-usage-chip-text,
+  .xlvask-usage-automation-chip .xlvask-usage-chip-text,
+  .xlvask-usage-warning-chip .xlvask-usage-chip-text,
+  .xlvask-usage-location-tags .tag:first-child {
+    max-width: 100%;
+  }
+}
 </style>

src/components/displays/department/tables/SelfServeTaskAttachmentsModal.vue

@@ -50,7 +50,7 @@ const handleFileUpload = async (event) => {
       await fetchAttachments();
       Swal.fire({
         icon: "success",
-        title: t('modals.success'),
+        title: t('common.success'),
         text: t('modals.file_uploaded'),
         timer: 1500,
         showConfirmButton: false,
@@ -59,7 +59,7 @@ const handleFileUpload = async (event) => {
       console.error("Error uploading attachment:", error);
       Swal.fire({
         icon: "error",
-        title: t('modals.error'),
+        title: t('common.error'),
         text: t('modals.upload_error'),
       });
     } finally {
@@ -96,7 +96,7 @@ const deleteAttachment = async (attachmentId) => {
       console.error("Error deleting attachment:", error);
       Swal.fire({
         icon: "error",
-        title: t('modals.error'),
+        title: t('common.error'),
         text: t('modals.delete_error'),
       });
     }
@@ -117,7 +117,7 @@ const downloadAttachment = async (attachmentId) => {
     console.error("Error downloading attachment:", error);
     Swal.fire({
       icon: "error",
-      title: t('modals.error'),
+      title: t('common.error'),
       text: t('modals.download_error'),
     });
   }
@@ -145,7 +145,7 @@ onMounted(() => {
             <thead>
               <tr>
                 <th>{{ t('modals.filename') }}</th>
-                <th class="has-text-right">{{ t('modals.actions') }}</th>
+                <th class="has-text-right">{{ t('common.actions') }}</th>
               </tr>
             </thead>
             <tbody>

src/components/displays/department/tables/SelfServeTasksTable.vue

@@ -8,6 +8,10 @@ const { loadList, loadSwitch, metaCurrentPage, metaItemsPerPage, setList } = use
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { ref, watch } from "vue";
 import SelfServeTaskAttachmentsModal from "@/components/displays/department/tables/SelfServeTaskAttachmentsModal.vue";
+import {
+  SELF_SERVE_TASK_BUTTON_OPTIONS,
+  normalizeSelfServeTaskButtons,
+} from "@/components/session/token/SessionUser/Objects/selfServeTaskButtons.js";
 
 // Define the props
 const props = defineProps({
@@ -36,24 +40,15 @@ const closeAttachmentsModal = () => {
 
 const editButtonsFunction = (id, column, value, onAfterSubmit) => {
   editingButtonsId.value = id;
-  try {
-    const parsed = JSON.stringify(value);
-    if (Array.isArray(parsed)) {
-      currentButtonsSelection.value = parsed;
-    } else {
-      console.warn('Parsed buttons value is not an array:', parsed);
-      currentButtonsSelection.value = [];
-    }
-  } catch (e) {
-    console.warn('Error parsing buttons value:', e);
-    currentButtonsSelection.value = [];
-  }
+  currentButtonsSelection.value = normalizeSelfServeTaskButtons(value);
   showButtonsEditModal.value = true;
 };
 
 const saveButtonsEdit = async () => {
-  console.warn('Saving buttons with selection:', currentButtonsSelection.value);
-  await SessionUser.objects.self_serve_tasks.set.buttons(editingButtonsId.value, currentButtonsSelection.value);
+  await SessionUser.objects.self_serve_tasks.set.buttons(
+    editingButtonsId.value,
+    normalizeSelfServeTaskButtons(currentButtonsSelection.value)
+  );
   showButtonsEditModal.value = false;
   loadList();
 };
@@ -195,7 +190,7 @@ const getScopeLabel = (object) => {
       <td>{{ object.order_priority }}</td>
       <td>{{ object.task }}</td>
       <td>{{ object.description }}</td>
-      <td>{{ object.condition_id ? SessionUser.objects.self_serve_conditions.functions.getConditionName(object.condition_id) : $t('global.all') }}</td>
+      <td>{{ object.condition_id ? SessionUser.objects.self_serve_conditions.functions.getConditionName(object.condition_id) : $t('common.all') }}</td>
       <td>{{ getScopeLabel(object) }}</td>
       <td>{{ SessionUser.objects.self_serve_tasks.columns.services.parse(object.services) }}</td>
       <td>{{ SessionUser.objects.self_serve_tasks.columns.buttons.parse(object.buttons) }}</td>
@@ -237,15 +232,15 @@ const getScopeLabel = (object) => {
         <button class="delete" @click="cancelButtonsEdit" aria-label="close"></button>
       </header>
       <section class="modal-card-body">
-        <div v-for="n in 12" :key="n" class="field mb-3">
+        <div v-for="option in SELF_SERVE_TASK_BUTTON_OPTIONS" :key="String(option.id)" class="field mb-3">
           <input
             class="is-checkradio"
             type="checkbox"
-            :id="`btn-${n-1}`"
+            :id="`btn-${option.id}`"
             v-model="currentButtonsSelection"
-            :value="n-1"
+            :value="option.id"
           >
-          <label :for="`btn-${n-1}`">Button {{ n-1 }}</label>
+          <label :for="`btn-${option.id}`">{{ option.name }}</label>
         </div>
       </section>
       <footer class="modal-card-foot">

src/components/displays/department/tables/SelfServeTryModal.vue

@@ -6,7 +6,11 @@ import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { useSelfServeLogic } from "@/composables/useSelfServeLogic";
 import SelfServeQuestionCards from "@/components/displays/selfServe/SelfServeQuestionCards.vue";
 import SelfServeTaskList from "@/components/displays/selfServe/SelfServeTaskList.vue";
-import { API_URL } from "@/config";
+import {
+  buildSelfServeDynamicImageUrl,
+  getSelfServeDynamicImageButtonsToPress,
+  getSelfServeDynamicImageThumbPosition,
+} from "@/services/selfServeDynamicImage.js";
 
 const { t: $t } = useI18n();
 
@@ -61,6 +65,7 @@ const {
   syncVehicleAnswer,
   clearVehicleAnswers,
   evaluateCondition,
+  downloadAttachment,
 } = useSelfServeLogic();
 
 const emptyCompletedTasks = computed(() => ({}));
@@ -136,43 +141,9 @@ const canClearAnswers = computed(() => (
 ));
 const hideDynamicImage = ref(false);
 
-const parseNonNegativeInt = (value) => {
-  const parsed = parseInt(value);
-  if (Number.isNaN(parsed) || parsed < 0) {
-    return null;
-  }
-  return parsed;
-};
+const dynamicImageButtons = computed(() => getSelfServeDynamicImageButtonsToPress(activeTasks.value));
 
-const dynamicImageButtons = computed(() => {
-  const buttonIds = new Set();
-
-  activeTasks.value.forEach((task) => {
-    if (!Array.isArray(task?.buttons)) {
-      return;
-    }
-
-    task.buttons.forEach((button) => {
-      const buttonId = parseInt(button);
-      if (!Number.isNaN(buttonId) && buttonId >= 0 && buttonId <= 11) {
-        buttonIds.add(buttonId);
-      }
-    });
-  });
-
-  return [...buttonIds];
-});
-
-const dynamicImageThumbPosition = computed(() => {
-  for (const task of activeTasks.value) {
-    const parsedPosition = parseNonNegativeInt(task?.dynamic_images_vehicle_type);
-    if (parsedPosition !== null) {
-      return parsedPosition;
-    }
-  }
-
-  return null;
-});
+const dynamicImageThumbPosition = computed(() => getSelfServeDynamicImageThumbPosition(activeTasks.value));
 
 const hasDynamicImageContext = computed(() => (
   dynamicImageButtons.value.length > 0 || dynamicImageThumbPosition.value !== null
@@ -185,23 +156,15 @@ const dynamicImageUrl = computed(() => {
     return null;
   }
 
-  const params = new URLSearchParams({
-    department: String(departmentId),
-    lane: String(laneId),
-    current_step: "0",
-    buttons: JSON.stringify(dynamicImageButtons.value),
-  });
-
   const selectedVehicleType = parseInt(selectedVehicleTypeId.value);
-  if (!Number.isNaN(selectedVehicleType) && selectedVehicleType > 0) {
-    params.set("vehicle_type", String(selectedVehicleType));
-  }
-
-  if (dynamicImageThumbPosition.value !== null) {
-    params.set("thumb_position", String(dynamicImageThumbPosition.value));
-  }
-
-  return `${API_URL}/department/lanes/dynamic-image?${params.toString()}`;
+  return buildSelfServeDynamicImageUrl({
+    departmentId,
+    laneId,
+    buttons: dynamicImageButtons.value,
+    currentStep: 0,
+    vehicleTypeId: !Number.isNaN(selectedVehicleType) && selectedVehicleType > 0 ? selectedVehicleType : null,
+    thumbPosition: dynamicImageThumbPosition.value,
+  });
 });
 
 const displayedDynamicImageUrl = computed(() => (
@@ -266,7 +229,7 @@ const clearAnswers = async () => {
 
   const confirmation = await Swal.fire({
     title: "Ryd besvarelser?",
-    text: `Registreringsnummer ${normalizedReg.value} pa bane ${selectedLaneId.value} bliver ryddet.`,
+    text: `Registreringsnummer ${normalizedReg.value} på bane ${selectedLaneId.value} bliver ryddet.`,
     icon: "warning",
     showCancelButton: true,
     confirmButtonText: "Ja, ryd besvarelser",
@@ -321,7 +284,7 @@ watch(dynamicImageUrl, () => {
     <div class="modal-background" @click="closeModal"></div>
     <div class="modal-card" style="width: 95%; max-width: 1200px;">
       <header class="modal-card-head">
-        <p class="modal-card-title">Self-serve preview</p>
+        <p class="modal-card-title">Forhåndsvisning af selvvask</p>
         <button class="delete" aria-label="close" @click="closeModal"></button>
       </header>
 
@@ -338,7 +301,7 @@ watch(dynamicImageUrl, () => {
                   <label class="label">Bane</label>
                   <div class="select is-fullwidth">
                     <select v-model="selectedLaneId" data-testid="self-serve-try-lane">
-                      <option :value="null">Vaelg bane</option>
+                      <option :value="null">Vælg bane</option>
                       <option v-for="entry in availableLanes" :key="entry.id" :value="entry.id">
                         {{ entry.name }} (ID: {{ entry.id }})
                       </option>
@@ -350,7 +313,7 @@ watch(dynamicImageUrl, () => {
                   <input class="input" :value="selectedLaneId" type="text" disabled>
                 </div>
                 <div class="column is-3">
-                  <label class="label">Koretojstype</label>
+                  <label class="label">Køretøjstype</label>
                   <div class="select is-fullwidth">
                     <select v-model="selectedVehicleTypeId" data-testid="self-serve-try-vehicle-type">
                       <option :value="null">Auto (fra registreringsnummer)</option>
@@ -362,7 +325,7 @@ watch(dynamicImageUrl, () => {
                 </div>
                 <div class="column is-3 is-flex is-align-items-flex-end">
                   <button class="button is-link is-fullwidth" data-testid="self-serve-try-refresh" :class="{ 'is-loading': loading }" @click="refresh">
-                    Hent preview
+                    Hent forhåndsvisning
                   </button>
                 </div>
               </div>
@@ -372,10 +335,10 @@ watch(dynamicImageUrl, () => {
                   Tilladt: {{ allowed ? "Ja" : "Nej" }}
                 </span>
                 <span class="tag" :class="machineAvailable ? 'is-success' : 'is-light'">
-                  Maskine tilgaengelig: {{ machineAvailable ? "Ja" : "Nej" }}
+                  Maskine tilgængelig: {{ machineAvailable ? "Ja" : "Nej" }}
                 </span>
                 <span class="tag" :class="allDisplayQuestionsAnswered ? 'is-success' : 'is-warning'">
-                  Alle synlige sporgsmal besvaret: {{ allDisplayQuestionsAnswered ? "Ja" : "Nej" }}
+                  Alle synlige spørgsmål besvaret: {{ allDisplayQuestionsAnswered ? "Ja" : "Nej" }}
                 </span>
                 <span v-if="session" class="tag is-info">
                   Session: {{ session.status }} (#{{ session.id }})
@@ -384,10 +347,10 @@ watch(dynamicImageUrl, () => {
                   Maskintype: {{ machineType.name }}
                 </span>
                 <span v-if="lane" class="tag is-light">
-                  Lane: {{ lane.name || lane.id }}
+                  Bane: {{ lane.name || lane.id }}
                 </span>
                 <span v-if="configVersionId" class="tag is-dark">
-                  Config version: #{{ configVersionId }}
+                  Konfigurationsversion: #{{ configVersionId }}
                 </span>
               </div>
 
@@ -401,10 +364,10 @@ watch(dynamicImageUrl, () => {
 
           <div class="column is-6">
             <div class="box" style="height: 100%">
-              <h4 class="title is-5">Sporgsmal</h4>
+              <h4 class="title is-5">Spørgsmål</h4>
 
               <div v-if="displayQuestions.length === 0" class="notification is-success is-light">
-                <p>Ingen synlige sporgsmal for denne preview.</p>
+                <p>Ingen synlige spørgsmål for denne forhåndsvisning.</p>
               </div>
 
               <SelfServeQuestionCards
@@ -412,18 +375,18 @@ watch(dynamicImageUrl, () => {
                 :answers="answers"
                 @answer-question="submitAnswer"
               />
-              <p v-if="questions.length === 0" class="has-text-centered is-italic">Ingen sporgsmal fundet.</p>
+              <p v-if="questions.length === 0" class="has-text-centered is-italic">Ingen spørgsmål fundet.</p>
             </div>
           </div>
 
           <div class="column is-6">
             <div class="box" style="height: 100%">
-              <h4 class="title is-5">Tasks og session</h4>
+              <h4 class="title is-5">Opgaver og session</h4>
 
               <div v-if="displayedDynamicImageUrl" class="mb-4">
                 <img
                   :src="displayedDynamicImageUrl"
-                  alt="Machine status preview"
+                  alt="Forhåndsvisning af maskinstatus"
                   data-testid="self-serve-try-dynamic-image"
                   style="max-width: 100%; height: auto; border-radius: 4px; display: block; margin-left: auto; margin-right: auto;"
                   @error="onDynamicImageError"
@@ -435,14 +398,14 @@ watch(dynamicImageUrl, () => {
                 :completedTasks="emptyCompletedTasks"
                 :show-checkboxes="false"
                 @toggle-task="() => {}"
-                @download-attachment="() => {}"
+                @download-attachment="downloadAttachment"
               />
 
-              <p v-if="activeTasks.length === 0" class="is-italic">Ingen aktive tasks.</p>
+              <p v-if="activeTasks.length === 0" class="is-italic">Ingen aktive opgaver.</p>
 
               <hr />
 
-              <h5 class="subtitle is-6">Seneste haendelser</h5>
+              <h5 class="subtitle is-6">Seneste hændelser</h5>
               <ul>
                 <li v-for="event in events" :key="event.id" class="mb-2">
                   <strong>{{ event.type }}</strong>
@@ -453,16 +416,16 @@ watch(dynamicImageUrl, () => {
 
               <hr />
 
-              <h5 class="subtitle is-6">Evaluation trace</h5>
+              <h5 class="subtitle is-6">Evalueringsspor</h5>
               <div v-if="evaluationTrace" class="content is-small">
                 <pre>{{ JSON.stringify(evaluationTrace, null, 2) }}</pre>
               </div>
-              <p v-else class="is-italic">Ingen trace-data returneret.</p>
+              <p v-else class="is-italic">Ingen sporingsdata returneret.</p>
 
               <hr />
 
               <div class="is-flex is-align-items-center is-justify-content-space-between mb-2">
-                <h5 class="subtitle is-6 mb-0">Besvarede sporgsmal</h5>
+                <h5 class="subtitle is-6 mb-0">Besvarede spørgsmål</h5>
                 <button
                   class="button is-small is-light"
                   data-testid="self-serve-try-clear-answers"

src/components/displays/department/tables/SelfServeVehicleConditionsTable.vue

@@ -54,7 +54,7 @@ const props = defineProps({
           :loadList="loadList"
           column="value"
           :edit-function="SessionUser.objects.self_serve_vehicle_conditions.showEditObjectFieldForm"
-          :parse-function="(val) => val ? t('global.yes') : t('global.no')"
+          :parse-function="(val) => val ? t('common.yes') : t('common.no')"
           :permission-check-function="SessionUser.canAccessAdmin"
       />
       <EditableTableColumn

src/components/displays/department/timebookings/departmentTimeBookingsTable.vue

@@ -34,10 +34,10 @@ if (departments.value.length === 0) {
       <th>{{ $t('objects.columns.department') }}</th>
       <th>{{ $t('tables.bookings.reg_tractor') }}</th>
       <th>{{ $t('tables.bookings.reg_trailer') }}</th>
-      <th>{{ $t('objects.columns.reference') }}</th>
+      <th>{{ $t('common.reference') }}</th>
       <th>{{ $t('objects.columns.notes') }}</th>
-      <th>{{ $t('objects.columns.date') }}</th>
-      <th>{{ $t('objects.columns.status') }}</th>
+      <th>{{ $t('common.date') }}</th>
+      <th>{{ $t('common.status') }}</th>
       <th>{{ $t('objects.bookings.columns.contact_email') }}</th>
       <th>{{ $t('objects.bookings.columns.wash_certificate_email') }}</th>
       <th>{{ $t('tables.actions') }}</th>
@@ -59,7 +59,7 @@ if (departments.value.length === 0) {
       <td>{{ booking.washCertificateEmail }}</td>
       <td>
         <div class="buttons">
-          <button class="button is-small is-dark" @click="redirectDepartmentOrderPage(booking.id, booking.department_id)">{{ $t('global.show') }}</button>
+          <button class="button is-small is-dark" @click="redirectDepartmentOrderPage(booking.id, booking.department_id)">{{ $t('common.show') }}</button>
         </div>
       </td>
     </tr>

src/components/displays/modals/AssignDraftOrderCustomerModal.vue

@@ -598,7 +598,7 @@ onBeforeUnmount(() => {
           data-testid="draft-order-assign-cancel"
           @click="closeModal"
         >
-          {{ t("global.cancel") }}
+          {{ t("common.cancel") }}
         </button>
         <button
           class="button is-link"

src/components/displays/modals/CustomerModal.vue

@@ -107,7 +107,7 @@ loadUser();
     <div class="modal-background" @click="closeModal"></div>
     <div class="modal-card">
       <header class="modal-card-head">
-        <p class="modal-card-title">{{getUserKey('customer_name', t('modals.unknown_customer'), t('modals.loading'))}}</p>
+        <p class="modal-card-title">{{getUserKey('customer_name', t('modals.unknown_customer'), t('common.loading'))}}</p>
         <button class="delete" aria-label="close" @click="closeModal"></button>
       </header>
       <section class="modal-card-body">
@@ -150,7 +150,7 @@ loadUser();
             <p>{{ t('modals.fetching_data') }}</p>
             <p>{{ t('modals.please_wait') }}</p>
           </div>
-          <progress class="progress is-small is-dark" max="100">{{ t('modals.loading') }}</progress>
+          <progress class="progress is-small is-dark" max="100">{{ t('common.loading') }}</progress>
         </template>
       </section>
       <footer class="modal-card-foot">

src/components/displays/pagination/PaginationDisplayGeneralSearchReload.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, inject, onBeforeUnmount, onMounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { computed, inject, onBeforeUnmount, onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
 import * as paginatedListModule from "@/components/pagination/paginatedList.vue";
 const paginatedList = inject(paginatedListModule.PaginatedListKey, paginatedListModule);
 const { search, metaSearch, isLoading, loadList } = paginatedList;
@@ -8,8 +8,20 @@ const { t } = useI18n();
 
 import SessionUser from "@/components/session/token/SessionUser.vue";
 
-const canExport = computed(() => typeof paginatedList?.exportToExcel === 'function');
+const props = defineProps({
+  hideSearch: {
+    type: Boolean,
+    default: false,
+  },
+  searchPlaceholder: {
+    type: String,
+    default: "",
+  },
+});
+
+const canExport = computed(() => typeof paginatedList?.exportToExcel === "function");
 const isExporting = computed(() => Boolean(paginatedList?.isExporting?.value));
+const resolvedSearchPlaceholder = computed(() => props.searchPlaceholder || t("global.search_placeholder"));
 const isActionDropdownOpen = ref(false);
 const actionDropdownRef = ref<HTMLElement | null>(null);
 
@@ -54,25 +66,25 @@ const handleDocumentClick = (event: MouseEvent) => {
 };
 
 onMounted(() => {
-  document.addEventListener('click', handleDocumentClick);
+  document.addEventListener("click", handleDocumentClick);
 });
 
 onBeforeUnmount(() => {
-  document.removeEventListener('click', handleDocumentClick);
+  document.removeEventListener("click", handleDocumentClick);
 });
 </script>
 
 <template>
   <!-- Top row: Reload, Search -->
   <div class="columns is-vcentered is-multiline pagination-general-search-reload">
-    <div class="column pagination-general-search-reload__search-column">
+    <div v-if="!props.hideSearch" class="column pagination-general-search-reload__search-column">
       <input
-          data-testid="pagination-search-input"
-          class="input"
-          type="text"
-          :placeholder="$t('global.search_placeholder')"
-          v-model="metaSearch"
-          @input="search($event.target.value)"
+        data-testid="pagination-search-input"
+        class="input"
+        type="text"
+        :placeholder="resolvedSearchPlaceholder"
+        v-model="metaSearch"
+        @input="search($event.target.value)"
       />
     </div>
     <div class="column is-narrow pagination-general-search-reload__buttons-column" v-if="$slots.buttons">
@@ -127,7 +139,7 @@ onBeforeUnmount(() => {
               @click.prevent="handleExportExcel"
             >
               <i class="fas fa-file-excel" aria-hidden="true"></i>
-              <span>{{ t('pagination.download_excel') }}</span>
+              <span>{{ t("pagination.download_excel") }}</span>
             </a>
           </div>
         </div>

src/components/displays/pagination/TableLabeledPagination.vue

@@ -1,20 +1,12 @@
 <script setup>
-import { ref, inject } from 'vue';
+import { ref, inject } from "vue";
 import * as paginatedListModule from "@/components/pagination/paginatedList.vue";
 
 const paginatedList = inject(paginatedListModule.PaginatedListKey, paginatedListModule);
-const {
-  isLoading,
-  loadList,
-  metaCurrentPage,
-  metaItemsPerPage,
-  metaTotalItems,
-  setMetaItemsPerPage,
-  setPage,
-} = paginatedList;
+const { isLoading, loadList, metaCurrentPage, metaItemsPerPage, metaTotalItems, setMetaItemsPerPage, setPage } =
+  paginatedList;
 
-import PaginationDisplayGeneralSearchReload
-  from "@/components/displays/pagination/PaginationDisplayGeneralSearchReload.vue";
+import PaginationDisplayGeneralSearchReload from "@/components/displays/pagination/PaginationDisplayGeneralSearchReload.vue";
 import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
 import PaginationNavigation from "@/components/displays/pagination/PaginationNavigation.vue";
 
@@ -23,6 +15,22 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  showFilters: {
+    type: Boolean,
+    default: true,
+  },
+  hideSearch: {
+    type: Boolean,
+    default: false,
+  },
+  searchPlaceholder: {
+    type: String,
+    default: "",
+  },
+  hidePagination: {
+    type: Boolean,
+    default: false,
+  },
 });
 const isSmall = ref(window.innerWidth < 1024);
 </script>
@@ -31,18 +39,31 @@ const isSmall = ref(window.innerWidth < 1024);
   <div data-disable-auto-excel-export="1">
     <!-- Label -->
     <h2 class="title is-4 mb-4">{{ label }}</h2>
+    <slot name="description"></slot>
     <!-- Search & reload -->
-    <PaginationDisplayGeneralSearchReload>
+    <PaginationDisplayGeneralSearchReload
+      v-if="!props.hideSearch || $slots.buttons"
+      :hide-search="props.hideSearch"
+      :search-placeholder="props.searchPlaceholder"
+    >
       <template #buttons="{ loadList }" v-if="$slots.buttons">
         <slot name="buttons" :loadList="loadList"></slot>
       </template>
     </PaginationDisplayGeneralSearchReload>
+    <slot name="afterSearch"></slot>
     <!-- Filters -->
-    <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
+    <PaginationDisplay
+      v-if="showFilters"
+      data-testid="table-labeled-pagination-filters"
+      :metaItemsPerPage="metaItemsPerPage"
+      :loadFunction="loadList"
+      :isLoading="isLoading"
+      :setMetaItemsPerPage="setMetaItemsPerPage"
+    >
       <template #paginationColumns>
         <slot name="paginationDisplayFiltersElement"></slot>
         <slot name="leftPaginationColumns"></slot>
-        <div class="column is-auto-fill my-3" v-if="!isSmall"/>
+        <div class="column is-auto-fill my-3" v-if="!isSmall" />
         <div class="columns is-multiline">
           <div class="column is-12 p-1 m-0"></div>
           <slot name="rightPaginationColumns"></slot>
@@ -54,9 +75,15 @@ const isSmall = ref(window.innerWidth < 1024);
       <slot name="default"></slot>
     </section>
     <!-- Pagination -->
-    <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
+    <PaginationNavigation
+      v-if="!props.hidePagination"
+      :currentPage="metaCurrentPage"
+      :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)"
+      :loadFunction="loadList"
+      :setPage="setPage"
+      :isLoading="isLoading"
+    />
   </div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>

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

@@ -24,8 +24,17 @@ const props = defineProps({
   }
 })
 
+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,
@@ -42,7 +51,7 @@ import {
   setOrder,
   hideSearchField,
   setHideSearchField,
-} from "@/components/pagination/paginatedList.vue";
+} = paginatedList;
 import PaginationNavigation from "@/components/displays/pagination/PaginationNavigation.vue";
 
 import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";

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

@@ -7,9 +7,21 @@ const props = defineProps({
     type: Number, default: 0
   }, hideSearch: {
     type: Boolean, default: false
+  }, title: {
+    type: String, default: ""
+  }, initialDateFrom: {
+    type: String, default: ""
+  }, initialDateTo: {
+    type: String, default: ""
+  }, inheritPeriodFilters: {
+    type: Boolean, default: false
+  }, loadAllAtOnce: {
+    type: Boolean, default: false
+  }, highlightUsageLogId: {
+    type: Number, default: 0
   }
 })
-import {computed, ref } from "vue";
+import {computed, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import {
   isLoading,
@@ -34,13 +46,40 @@ import PaginationDisplay from "@/components/displays/pagination/PaginationDispla
 import XlvaskUsageOrdersTable from "@/components/displays/department/pos/sync/xlvaskUsageOrdersTable.vue";
 import PaginationDisplayTemplateDates
   from "@/components/displays/pagination/templates/PaginationDisplayTemplateDates.vue";
+import ShowErrorField from "@/components/global/ShowErrorField.vue";
 import { useI18n } from 'vue-i18n'
 import { BSwitch } from "buefy";
 import { isUsageOrderAttachedToOrder } from "@/components/displays/department/pos/sync/xlvaskUsageFilters.js";
 
 const { t } = useI18n()
 const router = useRouter();
+const SELFWASH_PERIOD_ALL_LIMIT = 10000;
 setEndpoint("/modules/xlvask/services/usage/orders", false);
+if (props.loadAllAtOnce) {
+  setMetaItemsPerPage(SELFWASH_PERIOD_ALL_LIMIT, false);
+}
+const parseInitialDate = (value) => {
+  if (!value) {
+    return new Date();
+  }
+
+  const parsed = new Date(`${value}T00:00:00`);
+  return Number.isNaN(parsed.getTime()) ? new Date() : parsed;
+};
+
+const applyInitialPeriodFilters = () => {
+  if (props.initialDateFrom) {
+    setFilter("StartTime-date_from", props.initialDateFrom, false);
+  }
+
+  if (props.initialDateTo) {
+    setFilter("StartTime-date_to", props.initialDateTo, false);
+  }
+};
+
+const shouldShowLocalFilters = computed(() => !props.inheritPeriodFilters);
+
+const titleText = computed(() => props.title || SessionUser.objects.orders.meta.title);
 // If the customer filter is set, filter the orders by the customer number
 if (props.setCustomerFilter > 0) {
   setFilter("customer_number", props.setCustomerFilter);
@@ -62,10 +101,6 @@ if (router.currentRoute.value.params.departmentId) {
 } else {
   setOrder("StartTime", "desc");
 }
-// Load the list automatically if the autoLoad prop is set
-if (props.autoLoad) {
-  loadList();
-}
 const isImportLoading = ref(false);
 
 const importUsageButton = async () => {
@@ -90,8 +125,8 @@ const importUsageButton = async () => {
     isImportLoading.value = false;
   }
 };
-const dateFrom = ref(new Date());
-const dateTo = ref(new Date());
+const dateFrom = ref(parseInitialDate(props.initialDateFrom));
+const dateTo = ref(parseInitialDate(props.initialDateTo));
 
 const parsedDate = (date) => {
   return new Date(date);
@@ -127,6 +162,29 @@ const actions = {
   }
 };
 
+applyInitialPeriodFilters();
+// Load the list automatically if the autoLoad prop is set
+if (props.autoLoad) {
+  loadList();
+}
+
+watch(
+  () => [props.initialDateFrom, props.initialDateTo],
+  ([nextDateFrom, nextDateTo], [previousDateFrom, previousDateTo]) => {
+    if (nextDateFrom === previousDateFrom && nextDateTo === previousDateTo) {
+      return;
+    }
+
+    dateFrom.value = parseInitialDate(nextDateFrom);
+    dateTo.value = parseInitialDate(nextDateTo);
+    applyInitialPeriodFilters();
+
+    if (props.autoLoad) {
+      loadList();
+    }
+  }
+);
+
 const showOnlyUnattachedVehicle = ref(false);
 const visibleObjectsCount = computed(() => {
   const currentList = Array.isArray(list.value) ? list.value : [];
@@ -142,7 +200,7 @@ const visibleObjectsCount = computed(() => {
   <div class="level mb-3">
     <div class="level-left">
       <div class="level-item">
-        <h1 class="title is-4">{{SessionUser.objects.orders.meta.title}} ({{SessionUser.objects.global.language.synchronized}})</h1>
+        <h1 class="title is-4">{{ titleText }} ({{SessionUser.objects.global.language.synchronized}})</h1>
       </div>
       <div class="level-item">
         <h2 class="subtitle is-6">{{SessionUser.objects.global.language.showing}} {{ visibleObjectsCount }} {{SessionUser.objects.global.language.showing_of_separator}} {{ metaTotalItems }} {{SessionUser.objects.orders.meta.title.toLowerCase()}}</h2>
@@ -157,8 +215,8 @@ const visibleObjectsCount = computed(() => {
       </div>
     </div>
   </div>
-  <input @input="search($event.target.value)" class="input" type="text" :placeholder="$t('global.search_transactions')" v-if="!hideSearchField"/>
-  <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
+  <input @input="search($event.target.value)" class="input" type="text" :placeholder="$t('global.search_transactions')" v-if="!hideSearchField && shouldShowLocalFilters"/>
+  <PaginationDisplay v-if="shouldShowLocalFilters" :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
     <template #paginationColumns>
       <!-- Sort by created_at -->
       <div class="column is-narrow my-3">
@@ -186,7 +244,7 @@ const visibleObjectsCount = computed(() => {
               type="is-link"
               v-model="showOnlyUnattachedVehicle"
           >
-            Vis kun ikke tilknyttet køretøj
+            Vis kun ikke tilknyttede vaske
           </b-switch>
         </div>
       </div>
@@ -204,11 +262,20 @@ const visibleObjectsCount = computed(() => {
       -->
     </template>
   </PaginationDisplay>
+  <ShowErrorField v-else error="paginatedGetRequest"/>
   <XlvaskUsageOrdersTable
       :objects="list"
       :show-only-unattached-vehicle="showOnlyUnattachedVehicle"
+      :highlight-usage-log-id="props.highlightUsageLogId"
+  />
+  <PaginationNavigation
+      v-if="!props.loadAllAtOnce"
+      :currentPage="metaCurrentPage"
+      :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)"
+      :loadFunction="loadList"
+      :setPage="setPage"
+      :isLoading="isLoading"
   />
-  <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
 </template>
 
 <style scoped>

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

@@ -1,30 +1,30 @@
 <script setup>
 import { provide, ref } from "vue";
 import { useI18n } from "vue-i18n";
-import PaginationNavigation from "@/components/displays/pagination/PaginationNavigation.vue";
-import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
-import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
+import TableLabeledPagination from "@/components/displays/pagination/TableLabeledPagination.vue";
 import CustomerComplaintsTable from "@/components/displays/superuser/tables/customerComplaintsTable.vue";
 import { PaginatedListKey, usePaginatedList } from "@/components/pagination/paginatedList.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 
-const props = defineProps(["hideSearch", "autoLoad"]);
+const props = defineProps({
+  hideSearch: {
+    type: Boolean,
+    default: false,
+  },
+  autoLoad: {
+    type: Boolean,
+    default: false,
+  },
+});
 const { t } = useI18n();
 
 const paginatedList = usePaginatedList();
 provide(PaginatedListKey, paginatedList);
 
 const {
-  isLoading,
   list,
   loadList,
-  metaCurrentPage,
-  metaItemsPerPage,
-  metaTotalItems,
   setEndpoint,
-  setMetaItemsPerPage,
-  setPage,
-  search,
   setFilter,
   setOrder,
   hideSearchField,
@@ -54,6 +54,11 @@ const onDepartmentFilterChange = (value) => {
   setFilter("department_id", parsedDepartmentId, true);
 };
 
+const onOrderDirectionChange = (value) => {
+  setOrder("created_at", value);
+  loadList();
+};
+
 setEndpoint("/departments/daily-reports/complaints", false);
 setOrder("created_at", "desc");
 
@@ -69,22 +74,15 @@ if (props.autoLoad) {
 </script>
 
 <template>
-  <input
-    v-if="!hideSearchField"
-    class="input"
-    data-testid="superuser-complaints-search"
-    type="text"
-    :placeholder="t('superuser.pages.complaints.search_placeholder')"
-    @input="search($event.target.value)"
-  />
-
-  <PaginationDisplay
-    :metaItemsPerPage="metaItemsPerPage"
-    :loadFunction="loadList"
-    :isLoading="isLoading"
-    :setMetaItemsPerPage="setMetaItemsPerPage"
+  <TableLabeledPagination
+    :label="t('superuser.pages.complaints.title')"
+    :hide-search="hideSearchField"
   >
-    <template #paginationColumns>
+    <template #description>
+      <p class="is-size-6 mb-4">{{ t('superuser.pages.complaints.subtitle') }}</p>
+    </template>
+
+    <template #paginationDisplayFiltersElement>
       <div class="column is-narrow my-3">
         <label class="label is-small">{{ t('superuser.pages.complaints.department_filter') }}</label>
         <div class="control">
@@ -93,7 +91,7 @@ if (props.autoLoad) {
               data-testid="superuser-complaints-department-filter"
               @change="onDepartmentFilterChange($event.target.value)"
             >
-              <option value="*">{{ t('global.all') }}</option>
+              <option value="*">{{ t('common.all') }}</option>
               <option
                 v-for="department in departments"
                 :key="department.id"
@@ -112,7 +110,7 @@ if (props.autoLoad) {
           <div class="select">
             <select
               data-testid="superuser-complaints-order-direction"
-              @change="setOrder('created_at', $event.target.value); loadList();"
+              @change="onOrderDirectionChange($event.target.value)"
             >
               <option value="desc" selected>{{ t('pagination.descending') }}</option>
               <option value="asc">{{ t('pagination.ascending') }}</option>
@@ -121,26 +119,11 @@ if (props.autoLoad) {
         </div>
       </div>
     </template>
-  </PaginationDisplay>
 
-  <CustomerComplaintsTable :objects="list" />
-
-  <PaginationNavigation
-    :currentPage="metaCurrentPage"
-    :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)"
-    :loadFunction="loadList"
-    :setPage="setPage"
-    :isLoading="isLoading"
-  />
-
-  <LoadButtonWhileAwait
-    class="is-dark"
-    :isLoading="isLoading"
-    :loadFunction="loadList"
-    icon="fas fa-sync-alt"
-  >
-    {{ t('pagination.reload') }}
-  </LoadButtonWhileAwait>
+    <template #default>
+      <CustomerComplaintsTable :objects="list" />
+    </template>
+  </TableLabeledPagination>
 </template>
 
 <style scoped>

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

@@ -1,45 +1,27 @@
 <script setup>
-let props = defineProps(["setCustomerFilter", "hideSearch", "autoLoad"]);
-
-import { useRouter } from "vue-router";
-import {
-  usePaginatedList,
-  PaginatedListKey
-} from "@/components/pagination/paginatedList.vue";
 import { provide } from "vue";
+import CustomersTable from "@/components/displays/superuser/tables/customersTable.vue";
+import TableLabeledPagination from "@/components/displays/pagination/TableLabeledPagination.vue";
+import { PaginatedListKey, usePaginatedList } from "@/components/pagination/paginatedList.vue";
+
+const props = defineProps({
+  hideSearch: {
+    type: Boolean,
+    default: false,
+  },
+  autoLoad: {
+    type: Boolean,
+    default: false,
+  },
+});
+
 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 CustomersTable from "@/components/displays/superuser/tables/customersTable.vue";
-import { useI18n } from 'vue-i18n'
+const { list, loadList, setEndpoint, hideSearchField, setHideSearchField } = paginatedList;
 
-const { t } = useI18n()
-const router = useRouter();
 setEndpoint("/customers", false);
 
-// Hide the search field, if the hideSearch prop is set
 if (props.hideSearch) {
   setHideSearchField(true);
 }
@@ -47,20 +29,12 @@ if (props.hideSearch) {
 if (props.autoLoad) {
   loadList();
 }
-
 </script>
 
 <template>
-  <input @input="search($event.target.value)" class="input" type="text" :placeholder="$t('global.search_customers')" v-if="!hideSearchField"/>
-  <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
-    <template #paginationColumns>
-    </template>
-  </PaginationDisplay>
-  <CustomersTable :objects="list" />
-  <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
-  <LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">{{ t('pagination.reload') }}</LoadButtonWhileAwait>
+  <TableLabeledPagination :label="$t('customers.title')" :hide-search="hideSearchField">
+    <CustomersTable :objects="list" />
+  </TableLabeledPagination>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>