Support prefixed beta frontend deployment

Preserve release commit in Coolify frontend builds
Prepare beta frontend release gates
2026-05-27 14:33:44 +02:00 · 2026-05-27 14:04:02 +02:00 · 2026-05-27 13:03:55 +02:00
309 changed files with 7666 additions and 25545 deletions
@@ -9,7 +9,7 @@ on:

 jobs:
  upload-qodana-config:
-    runs-on: [self-hosted, Linux, X64, default]
+    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
@@ -9,7 +9,7 @@ on:

 jobs:
  upload-qodana-config:
-    runs-on: [self-hosted, Linux, X64, default]
+    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
@@ -18,15 +18,15 @@ 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
+      RELEASE_BASE_URL: https://dev.truckwash.io
+      PLAYWRIGHT_BASE_URL: https://dev.truckwash.io
      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_WAIT_INITIAL_SECONDS: 30
+      RELEASE_WAIT_TIMEOUT_SECONDS: 300
      RELEASE_POLL_INTERVAL_SECONDS: 10
    steps:
      - name: Checkout repository
@@ -72,7 +72,26 @@ jobs:
          path: dist
          retention-days: 14

-      - name: Wait for Coolify release artifact
+      - name: Install lftp
+        run: |
+          if ! command -v lftp >/dev/null 2>&1; then
+            sudo apt-get update
+            sudo apt-get install -y lftp
+          fi
+
+      - name: Upload hashed assets before release metadata
+        run: |
+          test -n "$RELEASE_DEPLOY_HOST" || (echo "RELEASE_DEPLOY_HOST is required" >&2; exit 1)
+          test -n "$RELEASE_DEPLOY_USER" || (echo "RELEASE_DEPLOY_USER is required" >&2; exit 1)
+          test -n "$RELEASE_DEPLOY_PASSWORD" || (echo "RELEASE_DEPLOY_PASSWORD is required" >&2; exit 1)
+          npm run release:upload:lftp
+        env:
+          RELEASE_DEPLOY_HOST: ${{ secrets.RELEASE_DEPLOY_HOST }}
+          RELEASE_DEPLOY_USER: ${{ secrets.RELEASE_DEPLOY_USER }}
+          RELEASE_DEPLOY_PASSWORD: ${{ secrets.RELEASE_DEPLOY_PASSWORD }}
+          RELEASE_DEPLOY_REMOTE_ROOT: ${{ secrets.RELEASE_DEPLOY_REMOTE_ROOT }}
+
+      - name: Wait for exact uploaded build
        run: npm run release:verify-upload

      - name: Public live Playwright gate
@@ -99,13 +118,10 @@ jobs:
            -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\"]}"
+            --data "{\"environment_url\":\"$RELEASE_BASE_URL\",\"channel_slug\":\"stable\",\"expected_commit\":\"$RELEASE_EXPECTED_COMMIT\",\"build_id\":\"$RELEASE_EXPECTED_BUILD_ID\",\"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
@@ -16,7 +16,7 @@ concurrency:

 jobs:
  format-tests:
-    # CI runs on the repository's self-hosted runner pool.
+    # Match the labels exposed by the Coolify-managed GitHub runner.
    runs-on: [self-hosted, Linux, X64, default]
    steps:
      - name: Checkout repository
@@ -65,35 +65,15 @@ jobs:
    if: github.event_name != 'schedule'
    needs: build-and-unit
    runs-on: [self-hosted, Linux, X64, default]
+    env:
+      PLAYWRIGHT_PR_BASE: ${{ github.event.pull_request.base.sha || github.event.before }}
+      PLAYWRIGHT_PR_HEAD: ${{ github.sha }}
    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
        with:
@@ -107,7 +87,7 @@ jobs:
        run: npx playwright install --with-deps chromium

      - name: Run Playwright PR tests
-        run: npm run test:e2e:pr -- --base="${{ steps.playwright-diff.outputs.base }}" --head="${{ steps.playwright-diff.outputs.head }}"
+        run: npm run test:e2e:pr -- --base="$PLAYWRIGHT_PR_BASE" --head="$PLAYWRIGHT_PR_HEAD"

      - name: Upload Playwright report
        if: failure()
@@ -1,6 +1,16 @@
 FROM node:24-alpine AS build

 WORKDIR /app
+ARG RELEASE_COMMIT_SHA=""
+ARG COMMIT_SHA=""
+ARG GITHUB_SHA=""
+ARG SOURCE_COMMIT=""
+ARG VITE_BASE_PATH=""
+ENV RELEASE_COMMIT_SHA="${RELEASE_COMMIT_SHA}"
+ENV COMMIT_SHA="${COMMIT_SHA}"
+ENV GITHUB_SHA="${GITHUB_SHA}"
+ENV SOURCE_COMMIT="${SOURCE_COMMIT}"
+ENV VITE_BASE_PATH="${VITE_BASE_PATH}"

 RUN apk add --no-cache git

@@ -8,14 +18,6 @@ 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
@@ -22,36 +22,6 @@ 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
@@ -5,27 +5,18 @@ server {
    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;
    }

@@ -39,15 +30,11 @@ server {

    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;
    }
@@ -3056,8 +3056,6 @@ paths:
    get:
      tags:
        - Orders
-      x-api-coverage:
-        happy: true
      summary: List orders
      description: Retrieve a paginated list of orders
      operationId: listOrders
@@ -4624,7 +4622,7 @@ paths:
      tags:
        - Self-Serve
      summary: Add vehicle condition
-      description: Add a new vehicle condition (answer to a question). Customers can only add conditions for their own vehicles. This answer mutation does not activate machines or synchronize live relay state; hardware changes are handled only by the explicit wash start flow.
+      description: Add a new vehicle condition (answer to a question). Customers can only add conditions for their own vehicles.
      operationId: addSelfserveVehicleCondition
      requestBody:
        required: true
@@ -4659,6 +4657,14 @@ paths:
                  type: integer
                  nullable: true
                  description: Alias for vehicle_type.
+                activate_machine:
+                  type: boolean
+                  default: true
+                  description: Whether the session synchronization may enable the machine relay. User wash-start saves answers with false.
+                sync_relay_state:
+                  type: boolean
+                  default: true
+                  description: Whether the answer mutation should synchronize live relay state.
      responses:
        '200':
          description: Successfully added vehicle condition
@@ -4675,7 +4681,7 @@ paths:
      tags:
        - Self-Serve
      summary: Update vehicle condition
-      description: Update an existing vehicle condition. Customers can only update conditions for their own vehicles. This answer mutation does not activate machines or synchronize live relay state; hardware changes are handled only by the explicit wash start flow.
+      description: Update an existing vehicle condition. Customers can only update conditions for their own vehicles.
      operationId: updateSelfserveVehicleCondition
      parameters:
        - name: id
@@ -4711,6 +4717,14 @@ paths:
                  type: integer
                  nullable: true
                  description: Alias for vehicle_type.
+                activate_machine:
+                  type: boolean
+                  default: true
+                  description: Whether the session synchronization may enable the machine relay.
+                sync_relay_state:
+                  type: boolean
+                  default: true
+                  description: Whether the mutation should synchronize live relay state.
      responses:
        '200':
          description: Successfully updated vehicle condition
@@ -5386,7 +5400,7 @@ paths:
          application/json:
            schema:
              type: object
-              required: [department, gateway_id, action, confirm]
+              required: [department, gateway_id, action]
              properties:
                department: { type: integer }
                gateway_id: { type: integer }
@@ -8688,116 +8702,6 @@ paths:
              schema:
                $ref: '#/components/schemas/SelfServeLaneStatus'

-  /modules/self-serve/lane/wash/my-active-wash:
-    get:
-      tags:
-        - Modules
-      summary: Get the authenticated customer's active self-serve wash
-      description: |
-        Returns the current authenticated customer's open self-serve wash session,
-        if one exists. Regular customers must only receive their own active wash
-        details from this endpoint.
-      operationId: getMyActiveSelfServeWash
-      responses:
-        '200':
-          description: Authenticated customer's active wash details resolved
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  lane_id:
-                    type: integer
-                    nullable: true
-                  in_progress:
-                    type: boolean
-                  session:
-                    type: object
-                    nullable: true
-                    properties:
-                      id:
-                        type: integer
-                      lane_id:
-                        type: integer
-                        nullable: true
-                      department_id:
-                        type: integer
-                        nullable: true
-                      status:
-                        type: string
-                      reg:
-                        type: string
-                      customer_number:
-                        type: integer
-                        nullable: true
-                      vehicle_id:
-                        type: integer
-                        nullable: true
-                      vehicle_type_id:
-                        type: integer
-                        nullable: true
-                      included_minutes:
-                        type: integer
-                        nullable: true
-                      machine_type_id:
-                        type: integer
-                        nullable: true
-                      machine_relay_enabled:
-                        type: boolean
-                      machine_relay_enabled_at:
-                        type: string
-                        nullable: true
-                      machine_start_triggered:
-                        type: boolean
-                      machine_start_triggered_at:
-                        type: string
-                        nullable: true
-                      wash_started_at:
-                        type: string
-                        nullable: true
-                      created_at:
-                        type: string
-                      updated_at:
-                        type: string
-                        nullable: true
-                  customer:
-                    type: object
-                    nullable: true
-                    properties:
-                      id:
-                        type: integer
-                        nullable: true
-                      customer_number:
-                        type: integer
-                        nullable: true
-                      display_name:
-                        type: string
-                        nullable: true
-                      email:
-                        type: string
-                        nullable: true
-                      phone_country_code:
-                        type: integer
-                        nullable: true
-                      phone:
-                        type: string
-                        nullable: true
-                  vehicle:
-                    type: object
-                    nullable: true
-                    properties:
-                      id:
-                        type: integer
-                      customer_id:
-                        type: integer
-                      type:
-                        type: integer
-                      reg:
-                        type: string
-                      reference:
-                        type: string
-                        nullable: true
-
  /modules/self-serve/lane/wash/in-progress:
    get:
      tags:
@@ -7,6 +7,7 @@
    "": {
      "name": "truckwashdashboardsfrontend",
      "version": "0.0.0",
+      "hasInstallScript": true,
      "dependencies": {
        "@azure/msal-browser": "^4.12.0",
        "@bubblewrap/cli": "^1.23.0",
@@ -232,6 +233,7 @@
      "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",
@@ -1929,16 +1931,6 @@
        }
      }
    },
-    "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",
@@ -1962,8 +1954,7 @@
      "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,
-      "peer": true
+      "optional": true
    },
    "node_modules/@bubblewrap/validator": {
      "version": "1.22.0",
@@ -2086,6 +2077,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=20.19.0"
      },
@@ -2134,6 +2126,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=20.19.0"
      }
@@ -2571,6 +2564,7 @@
      "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"
      }
@@ -2814,6 +2808,7 @@
      "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"
      }
@@ -2850,6 +2845,7 @@
      "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"
      },
@@ -2862,6 +2858,7 @@
      "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"
      },
@@ -2886,6 +2883,7 @@
      "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"
@@ -2929,6 +2927,7 @@
      "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"
      },
@@ -3052,6 +3051,7 @@
      "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"
      },
@@ -3064,6 +3064,7 @@
      "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,6 +3080,7 @@
      "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"
      },
@@ -5341,6 +5343,7 @@
      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
      "devOptional": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -5375,6 +5378,7 @@
      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.3",
        "fast-uri": "^3.0.1",
@@ -5468,7 +5472,8 @@
      "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"
+      "license": "SEE LICENSE IN LICENSE",
+      "peer": true
    },
    "node_modules/aria-query": {
      "version": "5.3.1",
@@ -5592,6 +5597,7 @@
      "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",
@@ -5815,6 +5821,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.9.0",
        "caniuse-lite": "^1.0.30001759",
@@ -5899,7 +5906,8 @@
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.4.tgz",
      "integrity": "sha512-Ffb6YGXDiZYX3cqvSbHWqQ8+LkX6tVoTcZuVB3lm93sbAVXlO0D6QlOTMnV6g18gILpAXqkG2z9hf9z4hCjz2g==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/bulma-block-list": {
      "version": "1.1.0",
@@ -6157,6 +6165,7 @@
      "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"
      },
@@ -6579,6 +6588,7 @@
      "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"
      }
@@ -6767,6 +6777,7 @@
      "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"
@@ -8324,7 +8335,8 @@
      "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"
+      "license": "Apache-2.0",
+      "peer": true
    },
    "node_modules/ieee754": {
      "version": "1.2.1",
@@ -10391,6 +10403,7 @@
      "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",
@@ -10745,6 +10758,7 @@
      "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"
      },
@@ -10928,6 +10942,7 @@
      "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",
@@ -10949,6 +10964,7 @@
      "integrity": "sha512-Do7u6iRb6K+lrllcTkB1BXcHwOxcKe3rEfOF/GcCLE2w3WpddakRAosJOHFUR37DpsvimQXEt5abs3NzUjEIqg==",
      "devOptional": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@bufbuild/protobuf": "^2.5.0",
        "colorjs.io": "^0.5.0",
@@ -12714,6 +12730,7 @@
      "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",
@@ -14106,6 +14123,7 @@
      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "esbuild": "^0.21.3",
        "postcss": "^8.4.43",
@@ -14165,6 +14183,7 @@
      "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",
@@ -14852,6 +14871,7 @@
      "integrity": "sha512-cIFJOD1DESzpjOBl763Kp1AH7UE/0fcdHe6rZXUdQ9c50uvgigvW97u3IcSeBwOkgqL/PXPBktBCh0KEu5L8XQ==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "rollup": "dist/bin/rollup"
      },
@@ -11,6 +11,7 @@
    "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",
@@ -1,5 +1,4 @@
 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";
@@ -12,16 +11,15 @@ 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 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 pidFile = path.resolve(process.cwd(), "output/playwright", `dev-server-${runtimeNamespace}.json`);
 const serverOutputLimit = 80;
 const activeOutputReaders = [];
 // Hardlinked Windows worktrees can break Vite's bundled config temp paths during Playwright boot.
 const viteDevArgs = [
-  ...(process.env.PLAYWRIGHT_VITE_FORCE === "1" ? ["--force"] : []),
+  "run",
+  "dev",
+  "--",
+  "--force",
  ...(process.platform === "win32" ? ["--configLoader", "runner"] : []),
  "--host",
  devHost,
@@ -178,18 +176,14 @@ async function killProcessTree(pid) {
  }
 }

-function captureProcessOutput(stream, lines, logStream) {
+function captureProcessOutput(stream, lines) {
  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;
 }

@@ -374,10 +368,6 @@ 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();

@@ -446,25 +436,31 @@ export default async function globalSetup() {
    await new Promise((resolve) => setTimeout(resolve, 1000));
  }

-  const serverProcess = spawn(process.execPath, [viteCliPath, ...viteDevArgs], {
-    cwd: process.cwd(),
-    detached: true,
-    env: {
-      ...process.env,
-      PLAYWRIGHT: "1",
-    },
-    stdio: ["ignore", "pipe", "pipe"],
-    windowsHide: true,
-  });
+  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 stdoutLines = [];
  const 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);
+  const stdoutReader = captureProcessOutput(serverProcess.stdout, stdoutLines);
+  const stderrReader = captureProcessOutput(serverProcess.stderr, stderrLines);
  activeOutputReaders.push(stdoutReader, stderrReader);
  serverProcess.unref();

@@ -12,7 +12,7 @@ export default defineConfig({
  fullyParallel: true,
  forbidOnly: isCI,
  retries: isCI ? 2 : 0,
-  workers: isCI ? 2 : 3,
+  workers: isCI ? 2 : 1,
  reporter: [["list"], ["html", { open: "never", outputFolder: "output/playwright/prod/report" }]],
  outputDir: "output/playwright/prod/test-results",
  use: {
@@ -34,12 +34,6 @@ export const sourceMappings = [
    ],
    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],
@@ -0,0 +1,22 @@
+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);
@@ -23,52 +23,20 @@ if [[ -z "$DEPLOY_URL" ]]; 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
+  DEPLOY_URL="ftp://${USER_NAME}:${PASSWORD}@${HOST}"
 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")")"
+    lftp "$DEPLOY_URL" -e "set ftp:ssl-allow true; set net:max-retries 3; set net:timeout 20; cd \"$REMOTE_ROOT\"; put -O \"$(dirname "$remote_file")\" \"$source_file\" -o \"$(basename "$remote_file")\"; bye"
  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")"
+    lftp "$DEPLOY_URL" -e "set ftp:ssl-allow true; set net:max-retries 3; set net:timeout 20; cd \"$REMOTE_ROOT\"; mirror -R --only-newer --parallel=4 \"$DIST_DIR/$directory\" \"$directory\"; bye"
  fi
 done

@@ -1,34 +1,25 @@
 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);
-export const roles = ["customer", "subuser", "admin", "superuser"];
+const roles = ["customer", "subuser", "admin", "superuser"];
 const listEntryPattern = /^\s+\[[^\]]+\]\s+›\s+(.+?):(\d+):(\d+)\s+›\s+(.+)\s*$/u;

-export const ownedFilesByRole = {
+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",
@@ -62,7 +53,6 @@ export 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",
@@ -72,23 +62,18 @@ export const ownedFilesByRole = {
    "pos.visual.spec.js",
  ],
  superuser: [
-    "coolify-infrastructure.spec.js",
    "edge-gateways.fleet-outline.spec.js",
    "edge-gateways.routes.spec.js",
    "edge-gateways.smoke.spec.js",
    "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",
@@ -99,13 +84,12 @@ export const ownedFilesByRole = {
    "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",
  ],
 };

-export const titleRules = [
+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] },
@@ -132,11 +116,6 @@ export 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] },
 ];

@@ -221,7 +200,7 @@ function toBaseName(filePath) {
  return filePath.split(/[\\/]/u).pop() || filePath;
 }

-export function parseListedTests(listOutput) {
+function parseListedTests(listOutput) {
  return listOutput
    .split(/\r?\n/u)
    .map((line) => {
@@ -243,7 +222,7 @@ export function parseListedTests(listOutput) {
    .filter(Boolean);
 }

-export function classifyTest(testEntry) {
+function classifyTest(testEntry) {
  const matches = new Set();
  const directOwner = ownedFileToRole.get(testEntry.fileName);

@@ -330,8 +309,8 @@ async function runPlaywright(project, testListPath, forwardedArgs) {
  });
 }

-export async function main(argv = process.argv.slice(2)) {
-  const { options, forwardedArgs } = parseCliArgs(argv);
+async function main() {
+  const { options, forwardedArgs } = parseCliArgs(process.argv.slice(2));
  validateOptions(options, forwardedArgs);

  const listOutput = await listProjectTests(options.project, forwardedArgs);
@@ -363,17 +342,4 @@ export async function main(argv = process.argv.slice(2)) {
  await runPlaywright(options.project, testListPath, forwardedArgs);
 }

-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();
-}
+await main();
@@ -159,7 +159,6 @@ async function runPlaywright({ label, commandArgs, artifactSuffix }) {
        PLAYWRIGHT: "1",
        PLAYWRIGHT_ARTIFACT_NAMESPACE: getArtifactNamespace(artifactSuffix),
        PLAYWRIGHT_REPORTER_MODE: "line-html",
-        PLAYWRIGHT_WORKERS: process.env.PLAYWRIGHT_WORKERS || "1",
      },
      stdio: "inherit",
      windowsHide: true,
@@ -319,19 +318,11 @@ function groupSpecsByProjects(specProjects) {

 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;
+  return runPlaywright({
+    label: `core ${prGrep} gate`,
+    artifactSuffix: "core",
+    commandArgs: ["--grep", prGrep, ...buildProjectArgs(projects)],
+  });
 }

 async function runChangedSelection(selection) {
@@ -341,19 +332,11 @@ async function runChangedSelection(selection) {
    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;
+    return runPlaywright({
+      label: `fallback ${smokeGrep} gate`,
+      artifactSuffix: "smoke-fallback",
+      commandArgs: ["--grep", smokeGrep, "--grep-invert", prGrep, ...buildProjectArgs(projects)],
+    });
  }

  const groups = groupSpecsByProjects(selection.specProjects);
@@ -363,16 +346,14 @@ async function runChangedSelection(selection) {
  }

  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],
-      });
+    const code = await runPlaywright({
+      label: `changed-area specs ${index + 1}/${groups.length}`,
+      artifactSuffix: `changed-${index + 1}`,
+      commandArgs: [...group.specs, ...buildProjectArgs(group.projects)],
+    });

-      if (code !== 0) {
-        return code;
-      }
+    if (code !== 0) {
+      return code;
    }
  }

@@ -18,6 +18,7 @@ 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(() =>
@@ -122,6 +123,7 @@ watch([() => route.fullPath, locale], updateDocumentTitle, { immediate: true });
    <header></header>
    <main>
      <DefaultPageWrapper>
+        <VersionCheck />
        <router-view />
      </DefaultPageWrapper>
    </main>
@@ -1,10 +1,18 @@
 <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">
-    <CustomerComplaintsPagination :auto-load="true" />
+    <PageTitle
+      :title="t('superuser.pages.complaints.title')"
+      :subtitle="t('superuser.pages.complaints.subtitle')"
+    />
+    <CustomerComplaintsPagination auto-load="true" />
  </div>
 </template>

@@ -1,10 +1,21 @@
 <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>
@@ -25,4 +36,4 @@ const { t } = useI18n();

 <style scoped>

-</style>
+</style>
@@ -6,35 +6,15 @@ 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(() =>
-  props.superuserPage
-    ? SessionUser.canAccessSuperUser()
-    : SessionUser.canAccessUser() || SessionUser.hasPermission("SUBUSERS_ADD")
-);
+const canInvite = computed(() => SessionUser.canAccessUser() || SessionUser.hasPermission("SUBUSERS_ADD"));
 const requiresGrantSelection = computed(
-  () => !props.superuserPage && SessionUser.isSubuser.value && !SessionUser.subuser.selectedGrantCustomerNumber.value
+  () => SessionUser.isSubuser.value && !SessionUser.subuser.selectedGrantCustomerNumber.value
 );
 const paginationVersion = ref(0);
 const paginationKey = computed(() =>
-  props.superuserPage
-    ? `subusers-superuser-${paginationVersion.value}`
-    : SessionUser.isSubuser.value
+  SessionUser.isSubuser.value
    ? `subusers-${SessionUser.subuser.selectedGrantCustomerNumber.value || "none"}-${paginationVersion.value}`
    : `subusers-user-${paginationVersion.value}`
 );
@@ -42,13 +22,13 @@ const paginationKey = computed(() =>
 const onInviteClick = async () => {
  await SessionUser.objects.subusers.functions.showInviteForm(() => {
    paginationVersion.value += 1;
-  }, { superuser: props.superuserPage });
+  });
 };
 </script>

 <template>
  <div>
-    <PageTitle :title="SessionUser.objects.subusers.meta.title" :subtitle="t('superuser.pages.subusers.subtitle')">
+    <PageTitle :title="t('superuser.pages.subusers.title')" :subtitle="t('superuser.pages.subusers.subtitle')">
      <template #buttons>
        <button v-if="canInvite" class="button is-dark" type="button" @click="onInviteClick">
          <span class="icon">
@@ -59,7 +39,7 @@ const onInviteClick = async () => {
      </template>
    </PageTitle>

-    <div v-if="SessionUser.isSubuser.value && !superuserPage" class="mb-5">
+    <div v-if="SessionUser.isSubuser.value" 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.
@@ -70,13 +50,7 @@ const onInviteClick = async () => {
      Vælg først en kunde for at se og administrere chauffører.
    </div>

-    <SubusersPagination
-      v-else
-      :key="paginationKey"
-      :endpoint="endpoint"
-      :show-customer="showCustomer"
-      auto-load="true"
-    />
+    <SubusersPagination v-else :key="paginationKey" auto-load="true" />
  </div>
 </template>

@@ -63,10 +63,6 @@ const props = defineProps({
    type: String,
    default: null,
  },
-  reg_3: {
-    type: String,
-    default: null,
-  },
  order_booking_id: {
    type: Number,
    default: null,
@@ -97,10 +93,6 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
-  allowBookingDeletion: {
-    type: Boolean,
-    default: false,
-  },
  department_lane_id: {
    type: Number,
    default: null,
@@ -847,38 +839,6 @@ watch(isDropdownOpen, async (isOpen) => {

 const attachmentsFromOrder = ref([]);
 const attachmentsFromOrderError = ref(null);
-const SELF_SERVE_WASH_ATTACHMENT_TYPE = "SELF_SERVE_WASH";
-
-const normalizePositiveInteger = (value) => {
-  const parsed = Number.parseInt(String(value ?? ""), 10);
-  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
-};
-
-const getAttachmentOtherPayload = (attachment) => attachment?.content?.other ?? null;
-
-const isSelfServeWashAttachment = (attachment) => {
-  const other = getAttachmentOtherPayload(attachment);
-  return Boolean(other && typeof other === "object" && other.type === SELF_SERVE_WASH_ATTACHMENT_TYPE);
-};
-
-const getSelfServeWashAttachment = computed(() =>
-  attachmentsFromOrder.value.find((attachment) => isSelfServeWashAttachment(attachment)) || null
-);
-
-const getSelfServeWashPayload = computed(() => getAttachmentOtherPayload(getSelfServeWashAttachment.value));
-
-const getSelfServeWashCustomerNumber = computed(() =>
-  normalizePositiveInteger(getSelfServeWashPayload.value?.customer_number)
-);
-
-const canAcceptSelfServeWashDraft = computed(() =>
-  Boolean(
-    props.order_id
-    && getSelfServeWashCustomerNumber.value
-    && normalizePositiveInteger(props.customer_number) !== getSelfServeWashCustomerNumber.value
-    && (SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser())
-  )
-);

 const isObjectUrl = (value) => typeof value === "string" && value.startsWith("blob:");

@@ -903,39 +863,16 @@ const clearAttachmentPreviewState = () => {
 };

 const getAttachmentLabel = (attachment) => {
-  if (isSelfServeWashAttachment(attachment)) {
-    const customerNumber = normalizePositiveInteger(attachment?.content?.other?.customer_number);
-    return customerNumber
-      ? t("admin.pos.settings_wheel.self_serve_wash_attachment_for_customer", { customerNumber })
-      : t("admin.pos.settings_wheel.self_serve_wash_attachment");
-  }
-
-  const other = getAttachmentOtherPayload(attachment);
-  const otherLabel = typeof other === "string"
-    ? other
-    : other && typeof other === "object"
-      ? (other.label || other.type || JSON.stringify(other))
-      : null;
-
  return (
    attachment?.content?.document ||
    attachment?.content?.image ||
-    otherLabel ||
+    attachment?.content?.other ||
    `Attachment ${attachment?.id ?? ""}`.trim()
  );
 };

-const isWashCertificateAttachment = (attachment) => {
-  const marker = String(getAttachmentOtherPayload(attachment) || "").trim().toUpperCase();
-  if (marker === "WASH_CERTIFICATE") {
-    return true;
-  }
-
-  return /(?:^|[/\\])wash[_-]?certificate.*\.pdf$/i.test(getAttachmentLabel(attachment));
-};
-
 const getAttachmentExtension = (attachment) => {
-  const match = String(getAttachmentLabel(attachment))
+  const match = getAttachmentLabel(attachment)
    .toLowerCase()
    .match(/(\.[a-z0-9]+)$/);

@@ -957,51 +894,17 @@ const getAttachmentPreviewKind = (attachment) => {
    return "office";
  }

-  const other = getAttachmentOtherPayload(attachment);
-  if (typeof other === "string" && other.startsWith("http")) {
+  if (String(attachment?.content?.other || "").startsWith("http")) {
    return "link";
  }

-  if (other) {
+  if (attachment?.content?.other) {
    return "text";
  }

  return "none";
 };

-const formatAttachmentText = (attachment) => {
-  const other = getAttachmentOtherPayload(attachment);
-  if (isSelfServeWashAttachment(attachment)) {
-    const parts = [
-      t("admin.pos.settings_wheel.self_serve_wash_attachment"),
-      other?.customer_number
-        ? `${t("admin.pos.settings_wheel.self_serve_customer")}: #${other.customer_number}`
-        : null,
-      other?.subuser?.name || other?.subuser?.username || other?.subuser_id
-        ? `${t("admin.pos.settings_wheel.self_serve_driver")}: ${other?.subuser?.name || other?.subuser?.username || `#${other.subuser_id}`}`
-        : null,
-      other?.license_plate
-        ? `${t("pos.license_plate")}: ${other.license_plate}`
-        : null,
-      other?.elapsed_wash_time_seconds
-        ? `${t("admin.pos.settings_wheel.self_serve_elapsed")}: ${Math.ceil(Number(other.elapsed_wash_time_seconds) / 60)} min`
-        : null,
-    ].filter(Boolean);
-
-    return parts.join("\n");
-  }
-
-  if (typeof other === "string") {
-    return other;
-  }
-
-  if (other && typeof other === "object") {
-    return JSON.stringify(other, null, 2);
-  }
-
-  return "";
-};
-
 const getAttachmentPreviewPlaceholderIcon = (attachment) => {
  const previewKind = getAttachmentPreviewKind(attachment);

@@ -1062,10 +965,6 @@ const activeAttachmentPreviewSource = computed(() => {
  return previewSourcesById.value[activeAttachment.value.id] ?? null;
 });

-const hasWashCertificateAttachment = computed(() =>
-  attachmentsFromOrder.value.some((attachment) => isWashCertificateAttachment(attachment))
-);
-
 const hasCachedPreviewSource = (attachmentId) => {
  return Object.prototype.hasOwnProperty.call(previewSourcesById.value, attachmentId);
 };
@@ -1630,137 +1529,6 @@ const showCompleteOrderBookingConfirmation = async () => {
  }
 };

-const showEmailNotificationActionResult = async (requestAction, successKey, errorKey) => {
-  try {
-    await requestAction();
-    await Swal.fire({
-      title: t(successKey),
-      icon: "success",
-      showConfirmButton: false,
-      timer: 2000,
-      heightAuto: false,
-    });
-  } catch (error) {
-    console.error(error);
-    await Swal.fire({
-      title: t("common.error"),
-      text: [t(errorKey), SessionUser.functions.parseErrorMessage?.(error)].filter(Boolean).join(": "),
-      icon: "error",
-      heightAuto: false,
-    });
-  }
-};
-
-const resendBookingConfirmation = () =>
-  showEmailNotificationActionResult(
-    () => SessionUser.objects.order_bookings.functions.resendBookingConfirmation(props.order_booking_id),
-    "admin.pos.settings_wheel.resend_booking_confirmation_success",
-    "admin.pos.settings_wheel.resend_booking_confirmation_error"
-  );
-
-const resendBookingCompletionConfirmation = () =>
-  showEmailNotificationActionResult(
-    () => SessionUser.objects.order_bookings.functions.resendBookingCompletionConfirmation(props.order_booking_id),
-    "admin.pos.settings_wheel.resend_booking_completion_confirmation_success",
-    "admin.pos.settings_wheel.resend_booking_completion_confirmation_error"
-  );
-
-const resendWashCertificate = () =>
-  showEmailNotificationActionResult(
-    () => SessionUser.objects.orders.functions.resendWashCertificate(props.order_id),
-    "admin.pos.settings_wheel.resend_wash_certificate_success",
-    "admin.pos.settings_wheel.resend_wash_certificate_error"
-  );
-
-const getAvailableInvoiceCollectionsForCustomer = async (customerNumber) => {
-  const normalizedCustomerNumber = normalizePositiveInteger(customerNumber);
-  if (!normalizedCustomerNumber) {
-    return [];
-  }
-
-  const response = await SessionUser.request("/collected-invoices", "GET", {
-    page: 1,
-    limit: 100,
-    order: "closed_at:asc",
-    filters: `customer_number:${normalizedCustomerNumber},booked_invoice_id:is_null`,
-  });
-
-  return Array.isArray(response?.data?.data) ? response.data.data : [];
-};
-
-const ensureOpenInvoiceCollectionForCustomer = async (customerNumber) => {
-  const collections = await getAvailableInvoiceCollectionsForCustomer(customerNumber);
-  const openCollection = collections.find((collection) => collection?.closed_at === null);
-  const openCollectionId = normalizePositiveInteger(openCollection?.id);
-  if (openCollectionId) {
-    return openCollectionId;
-  }
-
-  const response = await SessionUser.objects.collectedOrderInvoices.add(
-    customerNumber,
-    t("admin.pos.drafts_assignment.new_collection_name"),
-    t("admin.pos.drafts_assignment.new_collection_description"),
-    null
-  );
-
-  return normalizePositiveInteger(response?.data?.data?.id ?? response?.data?.id);
-};
-
-const acceptSelfServeWashDraft = async () => {
-  const customerNumber = getSelfServeWashCustomerNumber.value;
-  const orderId = normalizePositiveInteger(props.order_id);
-  if (!customerNumber || !orderId) {
-    return;
-  }
-
-  const result = await Swal.fire({
-    title: t("admin.pos.settings_wheel.accept_self_serve_wash"),
-    text: t("admin.pos.settings_wheel.accept_self_serve_wash_confirm", { customerNumber }),
-    icon: "question",
-    showCancelButton: true,
-    confirmButtonText: t("common.confirm"),
-    cancelButtonText: t("common.cancel"),
-  });
-
-  if (!result.isConfirmed) {
-    return;
-  }
-
-  try {
-    const invoiceCollectionId = await ensureOpenInvoiceCollectionForCustomer(customerNumber);
-    if (!invoiceCollectionId) {
-      throw new Error(t("admin.pos.drafts_assignment.invoice_collection_empty"));
-    }
-
-    await SessionUser.objects.orders.functions.assignDraftCustomer({
-      order_id: orderId,
-      customer_id: customerNumber,
-      invoice_collection_id: invoiceCollectionId,
-      department_id: normalizePositiveInteger(props.department_id),
-      recalculate_prices: true,
-    });
-
-    await props.refreshFunction();
-    await Swal.fire({
-      icon: "success",
-      title: t("admin.pos.settings_wheel.accept_self_serve_wash_success"),
-      timer: 1800,
-      showConfirmButton: false,
-    });
-  } catch (error) {
-    await Swal.fire({
-      icon: "error",
-      title: t("admin.pos.drafts_assignment.error"),
-      text: SessionUser.functions.parseErrorMessage(error) || t("admin.pos.drafts_assignment.error"),
-    });
-  }
-};
-
-const canDeleteOrderBooking = computed(() =>
-  !props.order_id &&
-  (props.allowBookingDeletion || SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser())
-);
-
 const flatBuiltInMenuSections = computed(() => {
  const sections = [];

@@ -1815,7 +1583,7 @@ const flatBuiltInMenuSections = computed(() => {
              ),
          })
        : null,
-      canDeleteOrderBooking.value
+      !props.order_id
        ? buildMenuAction("booking-delete", {
            icon: "fas fa-trash-alt",
            label: t("admin.pos.settings_wheel.delete_booking"),
@@ -1846,16 +1614,6 @@ const flatBuiltInMenuSections = computed(() => {
              ? redirectDepartmentOrderPage(props.order_id, true)
              : SessionUser.functions.redirectTo.user("/orders/" + props.order_id, true),
        }),
-        SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()
-          ? canAcceptSelfServeWashDraft.value
-            ? buildMenuAction("order-accept-self-serve-wash", {
-                icon: "fas fa-check-circle",
-                label: t("admin.pos.settings_wheel.accept_self_serve_wash"),
-                template: "success",
-                clickAction: acceptSelfServeWashDraft,
-              })
-            : null
-          : null,
        SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()
          ? buildMenuAction("order-attach-wash-certificate", {
              icon: "fas fa-paperclip",
@@ -1903,40 +1661,6 @@ const flatBuiltInMenuSections = computed(() => {
    }
  }

-  if (props.order_booking_id || hasWashCertificateAttachment.value) {
-    const emailNotificationsSection = buildMenuSection(
-      "email-notifications",
-      t("admin.pos.settings_wheel.email_notifications_section"),
-      [
-        props.order_booking_id
-          ? buildMenuAction("email-notifications-resend-booking-confirmation", {
-              icon: "fas fa-envelope",
-              label: t("admin.pos.settings_wheel.resend_booking_confirmation"),
-              clickAction: resendBookingConfirmation,
-            })
-          : null,
-        props.order_booking_id && hasWashCertificateAttachment.value
-          ? buildMenuAction("email-notifications-resend-booking-completion-confirmation", {
-              icon: "fas fa-envelope-open-text",
-              label: t("admin.pos.settings_wheel.resend_booking_completion_confirmation"),
-              clickAction: resendBookingCompletionConfirmation,
-            })
-          : null,
-        !props.order_booking_id && hasWashCertificateAttachment.value
-          ? buildMenuAction("email-notifications-resend-wash-certificate", {
-              icon: "fas fa-file-pdf",
-              label: t("admin.pos.settings_wheel.resend_wash_certificate"),
-              clickAction: resendWashCertificate,
-            })
-          : null,
-      ]
-    );
-
-    if (emailNotificationsSection) {
-      sections.push(emailNotificationsSection);
-    }
-  }
-
  if (props.invoice_collection_id && SessionUser.canAccessSuperUser()) {
    const invoiceCollectionLinkSection = buildMenuSection(
      "invoice-collection-link",
@@ -2238,10 +1962,10 @@ const flatBuiltInMenuSections = computed(() => {
    }
  }

-  if (props.reg_1 || props.reg_2 || props.reg_3) {
+  if (props.reg_1 || props.reg_2) {
    const vehicleSection = buildMenuSection(
      "vehicle",
-      [props.reg_1, props.reg_2, props.reg_3].filter(Boolean).length > 1
+      props.reg_1 && props.reg_2
        ? SessionUser.objects.vehicles.meta.labels.multiple
        : SessionUser.objects.vehicles.meta.labels.single,
      [
@@ -2259,13 +1983,6 @@ const flatBuiltInMenuSections = computed(() => {
              clickAction: () => SessionUser.functions.redirectTo.superUser("/vehicles/" + props.reg_2, true),
            })
          : null,
-        props.reg_3 && SessionUser.canAccessSuperUser()
-          ? buildMenuAction("vehicle-reg-3", {
-              icon: "fas fa-car",
-              label: t("admin.pos.settings_wheel.view_vehicle_new_tab", { reg: props.reg_3 }),
-              clickAction: () => SessionUser.functions.redirectTo.superUser("/vehicles/" + props.reg_3, true),
-            })
-          : null,
      ]
    );

@@ -2760,7 +2477,7 @@ const syncDesktopFlyoutPosition = () => {
                        {{ t("admin.pos.attachments_office_preview_unavailable") }}
                      </span>
                      <span v-else-if="activeAttachmentPreviewKind === 'text'" class="action-settings-wheel-attachment-panel__text">
-                        {{ formatAttachmentText(activeAttachment) }}
+                        {{ activeAttachment.content?.other }}
                      </span>
                      <span v-else class="action-settings-wheel-attachment-panel__text">
                        {{ t("admin.pos.attachments_no_preview") }}
@@ -3150,7 +2867,6 @@ const syncDesktopFlyoutPosition = () => {
  text-align: center;
  color: #4a5568;
  overflow-wrap: anywhere;
-  white-space: pre-line;
 }

 .action-settings-wheel-attachment-panel__link {
@@ -6,10 +6,6 @@ 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']);
@@ -135,7 +131,6 @@ 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>
@@ -415,7 +415,7 @@ const handleShortcutSelection = (event) => {
              :disabled="props.isDisabled || props.isReadonly"
              @change="handleShortcutSelection"
            >
-              <option value="" disabled>Vælg periode</option>
+              <option value="" disabled>Vaelg periode</option>
              <option v-for="shortcut in shortcuts" :key="shortcut.label" :value="shortcut.label">
                {{ shortcut.label }}
              </option>
@@ -1,16 +1,7 @@
 <script setup>
 import { watch } from 'vue';
 import { useRouter } from "vue-router";
-import {
-  clearActivePosOrderContext,
-  getCurrentStep,
-  setDepartment,
-  getOrderId,
-  setStep,
-  setOrderId,
-  searchAndSelectCustomer,
-  loadOrderItems,
-} from "@/components/shop/POSDepartmentProcess.vue";
+import { 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";
@@ -50,33 +41,20 @@ const debugVehicles = () => {
      }
  );
 };
+setDepartment();

-const routeStateHandlers = {
+watch(() => router.currentRoute.value.params.departmentId, (nextDepartmentId) => {
+  if (nextDepartmentId) {
+    setDepartment(nextDepartmentId);
+  }
+});
+
+applyPosRouteSearch(window.location.search, {
  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>
@@ -15,7 +15,6 @@ 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';
@@ -88,6 +87,29 @@ 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(() => {
@@ -180,7 +202,7 @@ const loadStripeInvoiceState = async () => {

  try {
    const response = await getOrder(props.order_id, true);
-    const nextInvoice = normalizeStripeInvoice(response?.data?.includes?.stripeModuleOrders, props.order_id);
+    const nextInvoice = normalizeStripeInvoice(response?.data?.includes?.stripeModuleOrders);
    stripeInvoice.value = nextInvoice;
    if (nextInvoice) {
      emailPanelState.value = 'tracking';
@@ -1,60 +0,0 @@
-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,
-  };
-};
@@ -10,16 +10,6 @@ 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: {
@@ -334,21 +324,7 @@ const hasCachedPreviewSource = (attachmentId) => {
  return Object.prototype.hasOwnProperty.call(previewSourcesById.value, attachmentId);
 };

-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) => {
+const createEmbeddablePreviewUrl = async (downloadLink) => {
  if (!downloadLink) {
    return null;
  }
@@ -364,12 +340,7 @@ const createEmbeddablePreviewUrl = async (downloadLink, previewKind) => {
      return null;
    }

-    const safePreviewBlob = createSafePreviewBlob(fileBlob, previewKind);
-    if (!safePreviewBlob) {
-      return null;
-    }
-
-    const objectUrl = URL.createObjectURL(safePreviewBlob);
+    const objectUrl = URL.createObjectURL(fileBlob);
    generatedObjectUrls.add(objectUrl);
    return objectUrl;
  } catch (error) {
@@ -401,7 +372,7 @@ const ensurePreviewSource = async (attachment) => {
      attachment.id,
      false
    );
-    const previewSource = await createEmbeddablePreviewUrl(downloadLink, previewKind);
+    const previewSource = await createEmbeddablePreviewUrl(downloadLink);
    previewSourcesById.value = {
      ...previewSourcesById.value,
      [attachment.id]: previewSource,
@@ -546,7 +517,6 @@ const toggleDropdown = async () => {
            :src="activePreviewSource"
            class="order-attachments-preview-panel__document"
            title="Attachment preview"
-            sandbox
          ></iframe>
          <a
            v-else-if="activePreviewKind === 'link'"
@@ -1260,12 +1260,7 @@ 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"
@@ -1506,12 +1501,7 @@ 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"
@@ -2002,7 +1992,6 @@ 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"
@@ -92,7 +92,6 @@ 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) => {
@@ -118,16 +117,7 @@ watch(
 );

 const focusOnReg1 = () => {
-  if (focusOnReg1TimeoutId !== null) {
-    clearTimeout(focusOnReg1TimeoutId);
-  }
-
-  focusOnReg1TimeoutId = setTimeout(() => {
-    focusOnReg1TimeoutId = null;
-    if (typeof document === "undefined") {
-      return;
-    }
-
+  setTimeout(() => {
    const reg1Input = document.getElementById("reg_1");
    if (reg1Input) {
      reg1Input.focus();
@@ -277,8 +267,12 @@ 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("common.reference")}: ${getOrderBookingReferenceValue(booking) || t("admin.pos.not_found")}`,
-      `${t("common.services")}: ${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 {
@@ -303,7 +297,7 @@ const bookingSelectionObjects = computed(() => {
 const duplicateDetailsObjects = computed(() => {
  return duplicateOrders.value.map((order) => ({
    id: Number(order.id),
-    label: `${t("admin.pos.order")} #${order.id} - ${formatDuplicateOrderDate(order.created_at)}`,
+    label: `${t("common.order")} #${order.id} - ${formatDuplicateOrderDate(order.created_at)}`,
    content: getDuplicateOrderContent(order),
    buttons: [
      {
@@ -687,10 +681,6 @@ onMounted(() => {
 });

 onBeforeUnmount(() => {
-  if (focusOnReg1TimeoutId !== null) {
-    clearTimeout(focusOnReg1TimeoutId);
-    focusOnReg1TimeoutId = null;
-  }
  clearDesktopStep1PreflightHandler(handleDesktopStep1Preflight);
 });

@@ -762,7 +752,11 @@ watch(
        <ButtonsBox class="pos-actions pos-actions--stacked">
          <Cancel tabindex="2" class="is-fullwidth" />
        </ButtonsBox>
-        <div v-if="shouldShowActionRailControls" class="pos-shell-actions__rail" data-testid="pos-step-1-action-rail">
+        <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')"
@@ -14,7 +14,7 @@ type attachment = {
    image: string | null;
    document: string | null;
    relation: string | null;
-    other: unknown;
+    other: string | null;
    src: string | null; // For document preview (e.g., PDF URL) // THIS IS NEVER STORED, JUST FOR PREVIEW PURPOSES
  };
  created_at: string;
@@ -22,8 +22,6 @@ type attachment = {
  deleted_at: string | null;
 }

-const SELF_SERVE_WASH_ATTACHMENT_TYPE = 'SELF_SERVE_WASH';
-
 const getAttachmentContent = (attachmentEntry: attachment) => {
  if (!attachmentEntry.content) {
    return {
@@ -45,19 +43,7 @@ const getAttachmentContent = (attachmentEntry: attachment) => {
 };

 const getAttachmentOtherText = (attachmentEntry: attachment) => {
-  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) : '';
+  return getAttachmentContent(attachmentEntry).other || '';
 };
 const props = defineProps({
  attachments: {
@@ -93,26 +79,6 @@ 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) {
@@ -343,35 +309,14 @@ 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-else-if="typeof getAttachmentContent(attachment).other === 'string' && getAttachmentContent(attachment).other.startsWith('http')">
-                  <a :href="String(getAttachmentContent(attachment).other)" target="_blank" rel="noopener noreferrer">
+                <template v-if="getAttachmentContent(attachment).other.startsWith('http')">
+                  <a :href="getAttachmentContent(attachment).other" target="_blank" rel="noopener noreferrer">
                    {{ getAttachmentContent(attachment).other }}
                  </a>
                </template>
                <template v-else>
-                  <span>{{ getAttachmentOtherText(attachment) }}</span>
+                  <span>{{ getAttachmentContent(attachment).other }}</span>
                </template>
              </template>
              <!-- NO PREVIEW -->
@@ -1,27 +1,34 @@
 <script setup lang="ts">
 import {
  reset_all_values,
+  customer_name,
+  nextStep,
+  searchAndSelectCustomer,
+  isCustomerSelected,
  order_id,
-  getStoredPosOrderId,
+  customer_id,
+  step,
+  reg_1,
+  reg_2,
+  reg_3,
+  reference,
+  order_notes,
+  setDepartment,
+  getDepartment,
 } 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 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) {
+  // 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) {
    try {
-      order_id.value = activeDraftOrderId;
-      const deleted = await SessionUser.objects.orders.functions.deleteWithConfirmation(activeDraftOrderId);
+      const deleted = await SessionUser.objects.orders.functions.deleteWithConfirmation(order_id.value);
      if (!deleted) {
        return;
      }
@@ -299,12 +299,14 @@ const getSelectedBookingId = () => {

 const completeStep2Order = async ({
  bookingSafetySeal = null,
+  markOrderCompleted = false,
 }: {
  bookingSafetySeal?: string | null;
+  markOrderCompleted?: boolean;
 } = {}) => {
  await finalizeCurrentMobileOrder({
    bookingSafetySeal,
-    markOrderCompleted: true,
+    markOrderCompleted,
  });
  popups.select("completed_transaction", {
    message: `Order #${order_id.value} successfully created.`,
@@ -325,12 +327,14 @@ const step2 = async () => {
  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,
+        markOrderCompleted: false,
      });
      return;
    }
@@ -340,6 +344,7 @@ const step2 = async () => {
        syncMobileSafetySealState(safetySeal);
        await completeStep2Order({
          bookingSafetySeal: String(safetySeal ?? ""),
+          markOrderCompleted: false,
        });
      };

@@ -353,7 +358,9 @@ const step2 = async () => {
      return;
    }

-    await completeStep2Order();
+    await completeStep2Order({
+      markOrderCompleted: shouldMarkOrderAsCompleted,
+    });
  } catch (error: any) {
    errors.value.push(error);
    console.warn("An error occurred while completing the mobile order:", error);
@@ -9,9 +9,6 @@ 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;
@@ -31,9 +28,6 @@ watch(note, (newNote) => {
          placeholder="Indtast note"
        />
      </div>
-      <p v-if="props?.validationMessage" class="help is-danger mt-2">
-        {{ props.validationMessage }}
-      </p>
    </div>
  </div>
 </template>
@@ -131,4 +125,4 @@ input.is-searched {
  flex-grow: 0;

 }
-</style>
+</style>
@@ -788,15 +788,7 @@ const promptForNotesIfRequired = (product: PosProduct, callback: (notes: string)
          label: "Bekræft",
          description: "Bekræft noten og fortsæt",
          onClick: () => {
-            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);
+            callback(popups.get()?.props?.product?.notes || "");
            clearPopup();
          },
          color: "primary",
@@ -3,45 +3,6 @@ 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) {
@@ -54,7 +15,9 @@ const safeSessionStorage = () => {
 };

 const normalizeUsageLogId = (objectOrId) => {
-  const value = typeof objectOrId === "object" ? objectOrId?.usage_log_id ?? objectOrId?.id : 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;
 };
@@ -71,18 +34,17 @@ export const buildXlvaskUsageAmountCacheKey = (objectOrId) => {

 export const getCachedXlvaskUsageAmount = (objectOrId) => {
  const cacheKey = buildXlvaskUsageAmountCacheKey(objectOrId);
-  const scopedCacheKey = cacheKey ? getScopedCacheKey(cacheKey) : "";
-  if (!scopedCacheKey) {
+  if (!cacheKey) {
    return null;
  }

-  const memoryEntry = memoryCache.get(scopedCacheKey);
+  const memoryEntry = memoryCache.get(cacheKey);
  if (isFreshEntry(memoryEntry)) {
    return memoryEntry.data;
  }

  if (memoryEntry) {
-    memoryCache.delete(scopedCacheKey);
+    memoryCache.delete(cacheKey);
  }

  const storage = safeSessionStorage();
@@ -90,14 +52,14 @@ export const getCachedXlvaskUsageAmount = (objectOrId) => {
    return null;
  }

-  const storageKey = `${CACHE_PREFIX}${scopedCacheKey}`;
+  const storageKey = `${CACHE_PREFIX}${cacheKey}`;
  try {
    const parsed = JSON.parse(storage.getItem(storageKey) || "null");
    if (!isFreshEntry(parsed)) {
      storage.removeItem(storageKey);
      return null;
    }
-    memoryCache.set(scopedCacheKey, parsed);
+    memoryCache.set(cacheKey, parsed);
    return parsed.data;
  } catch {
    storage.removeItem(storageKey);
@@ -107,8 +69,7 @@ export const getCachedXlvaskUsageAmount = (objectOrId) => {

 export const setCachedXlvaskUsageAmount = (objectOrId, data) => {
  const cacheKey = buildXlvaskUsageAmountCacheKey(objectOrId);
-  const scopedCacheKey = cacheKey ? getScopedCacheKey(cacheKey) : "";
-  if (!scopedCacheKey) {
+  if (!cacheKey) {
    return;
  }

@@ -116,7 +77,7 @@ export const setCachedXlvaskUsageAmount = (objectOrId, data) => {
    storedAt: Date.now(),
    data,
  };
-  memoryCache.set(scopedCacheKey, entry);
+  memoryCache.set(cacheKey, entry);

  const storage = safeSessionStorage();
  if (!storage) {
@@ -124,7 +85,7 @@ export const setCachedXlvaskUsageAmount = (objectOrId, data) => {
  }

  try {
-    storage.setItem(`${CACHE_PREFIX}${scopedCacheKey}`, JSON.stringify(entry));
+    storage.setItem(`${CACHE_PREFIX}${cacheKey}`, JSON.stringify(entry));
  } catch {
    // Best-effort cache. Quota errors should not block XL Vask usage rows.
  }
@@ -133,12 +94,11 @@ export const setCachedXlvaskUsageAmount = (objectOrId, data) => {
 export const clearCachedXlvaskUsageAmount = (objectOrId = null) => {
  const storage = safeSessionStorage();
  const cacheKey = objectOrId === null ? "" : buildXlvaskUsageAmountCacheKey(objectOrId);
-  const scopedCacheKey = cacheKey ? getScopedCacheKey(cacheKey) : "";

-  if (scopedCacheKey) {
-    memoryCache.delete(scopedCacheKey);
+  if (cacheKey) {
+    memoryCache.delete(cacheKey);
    try {
-      storage?.removeItem(`${CACHE_PREFIX}${scopedCacheKey}`);
+      storage?.removeItem(`${CACHE_PREFIX}${cacheKey}`);
    } catch {
      // Best-effort cache cleanup.
    }
@@ -229,7 +229,7 @@ const clearAnswers = async () => {

  const confirmation = await Swal.fire({
    title: "Ryd besvarelser?",
-    text: `Registreringsnummer ${normalizedReg.value} på bane ${selectedLaneId.value} bliver ryddet.`,
+    text: `Registreringsnummer ${normalizedReg.value} pa bane ${selectedLaneId.value} bliver ryddet.`,
    icon: "warning",
    showCancelButton: true,
    confirmButtonText: "Ja, ryd besvarelser",
@@ -284,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">Forhåndsvisning af selvvask</p>
+        <p class="modal-card-title">Self-serve preview</p>
        <button class="delete" aria-label="close" @click="closeModal"></button>
      </header>

@@ -301,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">Vælg bane</option>
+                      <option :value="null">Vaelg bane</option>
                      <option v-for="entry in availableLanes" :key="entry.id" :value="entry.id">
                        {{ entry.name }} (ID: {{ entry.id }})
                      </option>
@@ -313,7 +313,7 @@ watch(dynamicImageUrl, () => {
                  <input class="input" :value="selectedLaneId" type="text" disabled>
                </div>
                <div class="column is-3">
-                  <label class="label">Køretøjstype</label>
+                  <label class="label">Koretojstype</label>
                  <div class="select is-fullwidth">
                    <select v-model="selectedVehicleTypeId" data-testid="self-serve-try-vehicle-type">
                      <option :value="null">Auto (fra registreringsnummer)</option>
@@ -325,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 forhåndsvisning
+                    Hent preview
                  </button>
                </div>
              </div>
@@ -335,10 +335,10 @@ watch(dynamicImageUrl, () => {
                  Tilladt: {{ allowed ? "Ja" : "Nej" }}
                </span>
                <span class="tag" :class="machineAvailable ? 'is-success' : 'is-light'">
-                  Maskine tilgængelig: {{ machineAvailable ? "Ja" : "Nej" }}
+                  Maskine tilgaengelig: {{ machineAvailable ? "Ja" : "Nej" }}
                </span>
                <span class="tag" :class="allDisplayQuestionsAnswered ? 'is-success' : 'is-warning'">
-                  Alle synlige spørgsmål besvaret: {{ allDisplayQuestionsAnswered ? "Ja" : "Nej" }}
+                  Alle synlige sporgsmal besvaret: {{ allDisplayQuestionsAnswered ? "Ja" : "Nej" }}
                </span>
                <span v-if="session" class="tag is-info">
                  Session: {{ session.status }} (#{{ session.id }})
@@ -347,10 +347,10 @@ watch(dynamicImageUrl, () => {
                  Maskintype: {{ machineType.name }}
                </span>
                <span v-if="lane" class="tag is-light">
-                  Bane: {{ lane.name || lane.id }}
+                  Lane: {{ lane.name || lane.id }}
                </span>
                <span v-if="configVersionId" class="tag is-dark">
-                  Konfigurationsversion: #{{ configVersionId }}
+                  Config version: #{{ configVersionId }}
                </span>
              </div>

@@ -364,10 +364,10 @@ watch(dynamicImageUrl, () => {

          <div class="column is-6">
            <div class="box" style="height: 100%">
-              <h4 class="title is-5">Spørgsmål</h4>
+              <h4 class="title is-5">Sporgsmal</h4>

              <div v-if="displayQuestions.length === 0" class="notification is-success is-light">
-                <p>Ingen synlige spørgsmål for denne forhåndsvisning.</p>
+                <p>Ingen synlige sporgsmal for denne preview.</p>
              </div>

              <SelfServeQuestionCards
@@ -375,18 +375,18 @@ watch(dynamicImageUrl, () => {
                :answers="answers"
                @answer-question="submitAnswer"
              />
-              <p v-if="questions.length === 0" class="has-text-centered is-italic">Ingen spørgsmål fundet.</p>
+              <p v-if="questions.length === 0" class="has-text-centered is-italic">Ingen sporgsmal fundet.</p>
            </div>
          </div>

          <div class="column is-6">
            <div class="box" style="height: 100%">
-              <h4 class="title is-5">Opgaver og session</h4>
+              <h4 class="title is-5">Tasks og session</h4>

              <div v-if="displayedDynamicImageUrl" class="mb-4">
                <img
                  :src="displayedDynamicImageUrl"
-                  alt="Forhåndsvisning af maskinstatus"
+                  alt="Machine status preview"
                  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"
@@ -401,11 +401,11 @@ watch(dynamicImageUrl, () => {
                @download-attachment="downloadAttachment"
              />

-              <p v-if="activeTasks.length === 0" class="is-italic">Ingen aktive opgaver.</p>
+              <p v-if="activeTasks.length === 0" class="is-italic">Ingen aktive tasks.</p>

              <hr />

-              <h5 class="subtitle is-6">Seneste hændelser</h5>
+              <h5 class="subtitle is-6">Seneste haendelser</h5>
              <ul>
                <li v-for="event in events" :key="event.id" class="mb-2">
                  <strong>{{ event.type }}</strong>
@@ -416,16 +416,16 @@ watch(dynamicImageUrl, () => {

              <hr />

-              <h5 class="subtitle is-6">Evalueringsspor</h5>
+              <h5 class="subtitle is-6">Evaluation trace</h5>
              <div v-if="evaluationTrace" class="content is-small">
                <pre>{{ JSON.stringify(evaluationTrace, null, 2) }}</pre>
              </div>
-              <p v-else class="is-italic">Ingen sporingsdata returneret.</p>
+              <p v-else class="is-italic">Ingen trace-data 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 spørgsmål</h5>
+                <h5 class="subtitle is-6 mb-0">Besvarede sporgsmal</h5>
                <button
                  class="button is-small is-light"
                  data-testid="self-serve-try-clear-answers"
@@ -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;
@@ -13,15 +13,10 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
-  searchPlaceholder: {
-    type: String,
-    default: "",
-  },
 });

-const canExport = computed(() => typeof paginatedList?.exportToExcel === "function");
+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);

@@ -66,11 +61,11 @@ const handleDocumentClick = (event: MouseEvent) => {
 };

 onMounted(() => {
-  document.addEventListener("click", handleDocumentClick);
+  document.addEventListener('click', handleDocumentClick);
 });

 onBeforeUnmount(() => {
-  document.removeEventListener("click", handleDocumentClick);
+  document.removeEventListener('click', handleDocumentClick);
 });
 </script>

@@ -79,12 +74,12 @@ onBeforeUnmount(() => {
  <div class="columns is-vcentered is-multiline pagination-general-search-reload">
    <div v-if="!props.hideSearch" class="column pagination-general-search-reload__search-column">
      <input
-        data-testid="pagination-search-input"
-        class="input"
-        type="text"
-        :placeholder="resolvedSearchPlaceholder"
-        v-model="metaSearch"
-        @input="search($event.target.value)"
+          data-testid="pagination-search-input"
+          class="input"
+          type="text"
+          :placeholder="$t('global.search_placeholder')"
+          v-model="metaSearch"
+          @input="search($event.target.value)"
      />
    </div>
    <div class="column is-narrow pagination-general-search-reload__buttons-column" v-if="$slots.buttons">
@@ -139,7 +134,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>
@@ -1,12 +1,20 @@
 <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,10 +31,6 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
-  searchPlaceholder: {
-    type: String,
-    default: "",
-  },
  hidePagination: {
    type: Boolean,
    default: false,
@@ -44,7 +48,6 @@ const isSmall = ref(window.innerWidth < 1024);
    <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>
@@ -63,7 +66,7 @@ const isSmall = ref(window.innerWidth < 1024);
      <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>
@@ -86,4 +89,5 @@ const isSmall = ref(window.innerWidth < 1024);
  </div>
 </template>

-<style scoped></style>
+<style scoped>
+</style>
@@ -1,30 +1,30 @@
 <script setup>
 import { provide, ref } from "vue";
 import { useI18n } from "vue-i18n";
-import TableLabeledPagination from "@/components/displays/pagination/TableLabeledPagination.vue";
+import PaginationNavigation from "@/components/displays/pagination/PaginationNavigation.vue";
+import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
+import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.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: {
-    type: Boolean,
-    default: false,
-  },
-  autoLoad: {
-    type: Boolean,
-    default: false,
-  },
-});
+const props = defineProps(["hideSearch", "autoLoad"]);
 const { t } = useI18n();

 const paginatedList = usePaginatedList();
 provide(PaginatedListKey, paginatedList);

 const {
+  isLoading,
  list,
  loadList,
+  metaCurrentPage,
+  metaItemsPerPage,
+  metaTotalItems,
  setEndpoint,
+  setMetaItemsPerPage,
+  setPage,
+  search,
  setFilter,
  setOrder,
  hideSearchField,
@@ -54,11 +54,6 @@ 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");

@@ -74,15 +69,22 @@ if (props.autoLoad) {
 </script>

 <template>
-  <TableLabeledPagination
-    :label="t('superuser.pages.complaints.title')"
-    :hide-search="hideSearchField"
-  >
-    <template #description>
-      <p class="is-size-6 mb-4">{{ t('superuser.pages.complaints.subtitle') }}</p>
-    </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)"
+  />

-    <template #paginationDisplayFiltersElement>
+  <PaginationDisplay
+    :metaItemsPerPage="metaItemsPerPage"
+    :loadFunction="loadList"
+    :isLoading="isLoading"
+    :setMetaItemsPerPage="setMetaItemsPerPage"
+  >
+    <template #paginationColumns>
      <div class="column is-narrow my-3">
        <label class="label is-small">{{ t('superuser.pages.complaints.department_filter') }}</label>
        <div class="control">
@@ -110,7 +112,7 @@ if (props.autoLoad) {
          <div class="select">
            <select
              data-testid="superuser-complaints-order-direction"
-              @change="onOrderDirectionChange($event.target.value)"
+              @change="setOrder('created_at', $event.target.value); loadList();"
            >
              <option value="desc" selected>{{ t('pagination.descending') }}</option>
              <option value="asc">{{ t('pagination.ascending') }}</option>
@@ -119,11 +121,26 @@ if (props.autoLoad) {
        </div>
      </div>
    </template>
+  </PaginationDisplay>

-    <template #default>
-      <CustomerComplaintsTable :objects="list" />
-    </template>
-  </TableLabeledPagination>
+  <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>

 <style scoped>
@@ -1,27 +1,45 @@
 <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";

-const { list, loadList, setEndpoint, hideSearchField, setHideSearchField } = paginatedList;
+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 { t } = useI18n()
+const router = useRouter();
 setEndpoint("/customers", false);

+// Hide the search field, if the hideSearch prop is set
 if (props.hideSearch) {
  setHideSearchField(true);
 }
@@ -29,12 +47,20 @@ if (props.hideSearch) {
 if (props.autoLoad) {
  loadList();
 }
+
 </script>

 <template>
-  <TableLabeledPagination :label="$t('customers.title')" :hide-search="hideSearchField">
-    <CustomersTable :objects="list" />
-  </TableLabeledPagination>
+  <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>
 </template>

-<style scoped></style>
+<style scoped>
+
+</style>
@@ -3,7 +3,9 @@ import { computed, provide, ref } from "vue";
 import { useI18n } from "vue-i18n";

 import DepartmentsTable from "@/components/displays/superuser/tables/departmentsTable.vue";
-import TableLabeledPagination from "@/components/displays/pagination/TableLabeledPagination.vue";
+import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
+import PaginationDisplayGeneralSearchReload from "@/components/displays/pagination/PaginationDisplayGeneralSearchReload.vue";
+import PaginationNavigation from "@/components/displays/pagination/PaginationNavigation.vue";
 import { PaginatedListKey, usePaginatedList } from "@/components/pagination/paginatedList.vue";

 const props = defineProps(["setCustomerFilter", "hideSearch", "autoLoad"]);
@@ -12,9 +14,15 @@ const paginatedList = usePaginatedList();
 provide(PaginatedListKey, paginatedList);

 const {
+  isLoading,
  list,
  loadList,
+  metaCurrentPage,
+  metaItemsPerPage,
+  metaTotalItems,
  setEndpoint,
+  setMetaItemsPerPage,
+  setPage,
  setFilter,
  setOrder,
  hideSearchField,
@@ -46,11 +54,14 @@ if (props.autoLoad) {
 </script>

 <template>
-  <TableLabeledPagination
-    :label="t('common.departments')"
-    :hide-search="hideSearchField"
+  <PaginationDisplayGeneralSearchReload v-if="!hideSearchField" />
+  <PaginationDisplay
+    :metaItemsPerPage="metaItemsPerPage"
+    :loadFunction="loadList"
+    :isLoading="isLoading"
+    :setMetaItemsPerPage="setMetaItemsPerPage"
  >
-    <template #paginationDisplayFiltersElement>
+    <template #paginationColumns>
      <div class="column is-narrow my-3 department-status-filter">
        <label class="label is-small" for="department-archive-filter">{{
          t("common.status")
@@ -70,8 +81,23 @@ if (props.autoLoad) {
        </div>
      </div>
    </template>
-    <DepartmentsTable :objects="sortedList" />
-  </TableLabeledPagination>
+  </PaginationDisplay>
+  <div v-if="hideSearchField" class="mb-3">
+    <button class="button is-dark" :class="{ 'is-loading': isLoading }" :disabled="isLoading" @click="loadList">
+      <span class="icon is-small">
+        <i class="fas fa-sync-alt" aria-hidden="true"></i>
+      </span>
+      <span>{{ t("pagination.reload") }}</span>
+    </button>
+  </div>
+  <DepartmentsTable :objects="sortedList" />
+  <PaginationNavigation
+    :currentPage="metaCurrentPage"
+    :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)"
+    :loadFunction="loadList"
+    :setPage="setPage"
+    :isLoading="isLoading"
+  />
 </template>

 <style scoped>
@@ -7,24 +7,7 @@ import PaginationDisplay from "@/components/displays/pagination/PaginationDispla
 import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
 import { PaginatedListKey, usePaginatedList } from "@/components/pagination/paginatedList.vue";

-const props = defineProps({
-  hideSearch: {
-    type: Boolean,
-    default: false,
-  },
-  autoLoad: {
-    type: [Boolean, String],
-    default: false,
-  },
-  endpoint: {
-    type: String,
-    default: "/subusers",
-  },
-  showCustomer: {
-    type: Boolean,
-    default: false,
-  },
-});
+const props = defineProps(["hideSearch", "autoLoad"]);
 const { t } = useI18n();

 const paginatedList = usePaginatedList();
@@ -47,7 +30,7 @@ const {
  setAdditionalQueryParameters,
 } = paginatedList;

-setEndpoint(props.endpoint, false);
+setEndpoint("/subusers", false);
 setAdditionalQueryParameters({ include_non_enabled: true });
 setOrder("created_at", "desc");

@@ -99,7 +82,7 @@ if (props.autoLoad) {
    </template>
  </PaginationDisplay>

-  <SubusersTable :objects="list" :show-customer="showCustomer" />
+  <SubusersTable :objects="list" />

  <PaginationNavigation
    :currentPage="metaCurrentPage"
@@ -1,21 +1,45 @@
 <script setup>
-import { provide } from "vue";
-import { useI18n } from "vue-i18n";
-
-import TableLabeledPagination from "@/components/displays/pagination/TableLabeledPagination.vue";
 import UsersTable from "@/components/displays/superuser/tables/usersTable.vue";
-import { PaginatedListKey, usePaginatedList } from "@/components/pagination/paginatedList.vue";

-const props = defineProps(["setCustomerFilter", "hideSearch", "autoLoad"]);
+let props = defineProps(["setCustomerFilter", "hideSearch", "autoLoad"]);

+import { useRouter } from "vue-router";
+import {
+  usePaginatedList,
+  PaginatedListKey
+} from "@/components/pagination/paginatedList.vue";
+import { provide } from "vue";
 const paginatedList = usePaginatedList();
 provide(PaginatedListKey, paginatedList);
-const { list, loadList, setEndpoint, setFilter, setOrder, hideSearchField, setHideSearchField } = 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";

-const { t } = useI18n();
+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 { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const router = useRouter();
 setEndpoint("/users", false);
 setFilter("customer_number", 0, false);
-setOrder("created_at", "desc");

 // Hide the search field, if the hideSearch prop is set
 if (props.hideSearch) {
@@ -25,35 +49,32 @@ if (props.hideSearch) {
 if (props.autoLoad) {
  loadList();
 }
+
 </script>

 <template>
-  <TableLabeledPagination
-    :label="t('superuser.pages.employees.title')"
-    :hide-search="hideSearchField"
-    :search-placeholder="t('global.search_user')"
-  >
-    <template #paginationDisplayFiltersElement>
+  <input @input="search($event.target.value)" class="input" type="text" :placeholder="$t('global.search_user')" v-if="!hideSearchField"/>
+  <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
+    <template #paginationColumns>
      <!-- Sort by created_at -->
      <div class="column is-narrow my-3">
-        <label class="label is-small">{{ t("pagination.order_direction") }}</label>
+        <label class="label is-small">{{ t('pagination.order_direction') }}</label>
        <div class="control">
          <div class="select">
-            <select
-              @change="
-                setOrder('created_at', $event.target.value);
-                loadList();
-              "
-            >
-              <option value="asc">{{ t("pagination.ascending") }}</option>
-              <option value="desc" selected>{{ t("pagination.descending") }}</option>
+            <select @change="setOrder('created_at', $event.target.value); loadList();">
+              <option value="asc">{{ t('pagination.ascending') }}</option>
+              <option value="desc" selected>{{ t('pagination.descending') }}</option>
            </select>
          </div>
        </div>
      </div>
    </template>
-    <UsersTable :objects="list" />
-  </TableLabeledPagination>
+  </PaginationDisplay>
+  <UsersTable :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>

-<style scoped></style>
+<style scoped>
+
+</style>
@@ -1,21 +1,25 @@
 <script setup>
-import { list, loadList, setEndpoint, setFilter, setOrder } from "@/components/pagination/paginatedList.vue";
-import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import {
+  list,
+  loadList,
+  setEndpoint,
+  setFilter,
+  setOrder
+} from "@/components/pagination/paginatedList.vue";
+import {SessionUser} from "@/components/session/token/SessionUser.vue";
 import { useRouter } from "vue-router";
-import { computed, onMounted, ref } from "vue";
+import { onMounted, ref } from "vue";
 import TableLabeledPagination from "@/components/displays/pagination/TableLabeledPagination.vue";
 import OrderBookingsTable from "@/views/dashboards/userDashboard/bookings/displays/tables/OrderBookingsTable.vue";
 import { departments, getDepartments } from "@/components/pagination/departmentTabs.vue";
 import { Colors } from "@/ThemeConfig.vue";
-import { useI18n } from "vue-i18n";
+import { useI18n } from 'vue-i18n'

-const { t } = useI18n();
+const { t } = useI18n()
 /**
 * Router
 */
 const router = useRouter();
-const isUserRoute = computed(() => router.currentRoute.value.path.startsWith("/user"));
-const isAdminRoute = computed(() => router.currentRoute.value.path.startsWith("/admin"));
 /**
 * Props
 */
@@ -23,40 +27,41 @@ const props = defineProps({
  filters: {
    type: Object,
    default: () => ({}),
-    required: false,
+    required: false
  },
-});
-const orderIdFilter = ref("*");
+})
+const orderIdFilter = ref('*');
 const onOrderIdFilterChange = (event) => {
  const val = event.target.value;
  orderIdFilter.value = val;
  // Apply filter: '*' clears, 'is null' shows without order, 'not null' shows with order
-  setFilter("order_id", val);
+  setFilter('order_id', val);
+
 };

 // Department filter
-const departmentFilter = ref("*");
+const departmentFilter = ref('*');
 const onDepartmentFilterChange = (event) => {
  const val = event.target.value;
  departmentFilter.value = val;
-  setFilter("department", val);
+  setFilter('department', val);
 };

 // Only today filter
-const onlyTodayFilter = ref("*");
+const onlyTodayFilter = ref('*');
 const onOnlyTodayFilterChange = (event, autoLoadList = true) => {
  const val = event.target.value;
  onlyTodayFilter.value = val;
-  if (val === "*") {
-    setFilter("datetime", val, false); // Clear filter
-    setFilter("datetime-date_from", null, false);
-    setFilter("datetime-date_to", null, false);
+  if (val === '*') {
+    setFilter('datetime', val, false); // Clear filter
+    setFilter('datetime-date_from', null, false);
+    setFilter('datetime-date_to', null, false);
  } else {
    const startOfDay = new Date().setHours(0, 0, 0, 0);
    const endOfDay = new Date().setHours(23, 59, 59, 999);
    //setFilter('datetime', null, false);
-    setFilter("datetime-date_from", new Date(startOfDay).toISOString(), false);
-    setFilter("datetime-date_to", new Date(endOfDay).toISOString(), false);
+    setFilter('datetime-date_from', new Date(startOfDay).toISOString(), false);
+    setFilter('datetime-date_to', new Date(endOfDay).toISOString(), false);
  }
  if (autoLoadList) {
    loadList();
@@ -64,38 +69,34 @@ const onOnlyTodayFilterChange = (event, autoLoadList = true) => {
 };

 // Version selector + helpers
-const versionSelector = ref("new");
+const versionSelector = ref('new');
 const resetVersionToNew = () => {
-  versionSelector.value = "new";
+  versionSelector.value = 'new';
 };
 const showLegacyOrderBookingsPortal = () => {
  const departmentId = SessionUser.functions.getDepartmentIdFromUrl();
  if (!departmentId) {
-    SessionUser.functions.redirectTo.user("/bookings-legacy", true);
+    SessionUser.functions.redirectTo.user('/bookings-legacy', true);
    return;
  }
-  SessionUser.functions.redirectTo.department(
-    SessionUser.functions.getDepartmentIdFromUrl(),
-    "modules/bookings-legacy",
-    true
-  );
+  SessionUser.functions.redirectTo.department(SessionUser.functions.getDepartmentIdFromUrl(), 'modules/bookings-legacy', true);
 };

 // Filters
 onMounted(() => {
  setEndpoint(SessionUser.objects.order_bookings.meta.endpoint, false);
-  setOrder("datetime", "desc", false);
+  setOrder('datetime', 'desc', false);
  // Apply initial filters from props
  for (const [key, value] of Object.entries(props.filters)) {
    let setFilterKey = true;
    // Also set the filter controls if applicable
-    if (key === "order_id") {
+    if (key === 'order_id') {
      orderIdFilter.value = value;
-    } else if (key === "department") {
+    } else if (key === 'department') {
      departmentFilter.value = value;
-    } else if (key === "only_today" && value === true) {
+    } else if (key === 'only_today' && value === true) {
      setFilterKey = false; // Since the only_today filter is handled separately
-      onOnlyTodayFilterChange({ target: { value: new Date().toISOString().split("T")[0] } }, false);
+      onOnlyTodayFilterChange({ target: { value: new Date().toISOString().split('T')[0] } }, false);
    }
    if (setFilterKey) {
      setFilter(key, value, false);
@@ -105,218 +106,108 @@ onMounted(() => {
  // Load departments for filter options
  getDepartments().catch(() => {});
 });
+
 </script>

 <template>
-  <div class="order-bookings-pagination">
-    <TableLabeledPagination :label="t('pagination.bookings_overview')" class="order-bookings-pagination__table">
-      <template #paginationDisplayFiltersElement>
-        <!-- Status filter -->
-        <div class="column is-narrow order-bookings-pagination__filter">
-          <div class="field mb-0">
-            <label class="label is-small">{{ t("common.status") }}</label>
-            <div class="control">
-              <div class="select">
-                <select :value="orderIdFilter" @change="onOrderIdFilterChange">
-                  <option value="*">{{ t("common.all") }}</option>
-                  <option value="is null">{{ t("pagination.not_completed") }}</option>
-                  <option value="not null">{{ t("pagination.completed") }}</option>
-                </select>
-              </div>
+  <div>
+  <TableLabeledPagination :label="t('pagination.bookings_overview')">
+    <template #paginationDisplayFiltersElement>
+      <!-- Status filter -->
+      <div class="column is-narrow">
+        <div class="field mb-0">
+          <label class="label is-small">{{ t('common.status') }}</label>
+          <div class="control">
+            <div class="select">
+              <select :value="orderIdFilter" @change="onOrderIdFilterChange">
+                <option value="*">{{ t('common.all') }}</option>
+                <option value="is null">{{ t('pagination.not_completed') }}</option>
+                <option value="not null">{{ t('pagination.completed') }}</option>
+              </select>
            </div>
          </div>
        </div>
-        <!-- Department filter -->
-        <div class="column is-narrow order-bookings-pagination__filter">
-          <div class="field mb-0">
-            <label class="label is-small">{{ t("pagination.department") }}</label>
-            <div class="control">
-              <div class="select">
-                <select :value="departmentFilter" @change="onDepartmentFilterChange">
-                  <option value="*">{{ t("common.all") }}</option>
-                  <option v-for="department in departments" :key="department.id" :value="department.id">
-                    {{ department.name }}
-                  </option>
-                </select>
-              </div>
+      </div>
+      <!-- Department filter -->
+      <div class="column is-narrow">
+        <div class="field mb-0">
+          <label class="label is-small">{{ t('pagination.department') }}</label>
+          <div class="control">
+            <div class="select">
+              <select :value="departmentFilter" @change="onDepartmentFilterChange">
+                <option value="*">{{ t('common.all') }}</option>
+                <option v-for="department in departments" :key="department.id" :value="department.id">{{ department.name }}</option>
+              </select>
            </div>
          </div>
        </div>
-        <!-- Version selector -->
-        <div class="column is-narrow order-bookings-pagination__filter">
-          <div class="field mb-0">
-            <label class="label is-small">{{ t("pagination.version") }}</label>
-            <div class="control">
-              <div class="select">
-                <select
-                  @change="
-                    showLegacyOrderBookingsPortal();
-                    resetVersionToNew();
-                  "
-                  v-model="versionSelector"
-                >
-                  <option value="new">{{ t("common.new") }}</option>
-                  <option value="legacy">{{ t("pagination.old") }}</option>
-                </select>
-              </div>
+      </div>
+      <!-- Version selector -->
+      <div class="column is-narrow">
+        <div class="field mb-0">
+          <label class="label is-small">{{ t('pagination.version') }}</label>
+          <div class="control">
+            <div class="select">
+              <select @change="showLegacyOrderBookingsPortal(); resetVersionToNew()" v-model="versionSelector">
+                <option value="new">{{ t('common.new') }}</option>
+                <option value="legacy">{{ t('pagination.old') }}</option>
+              </select>
            </div>
          </div>
        </div>
-        <!-- Only today filter -->
-        <div class="column is-narrow order-bookings-pagination__filter" v-if="!isUserRoute">
-          <div class="field mb-0">
-            <label class="label is-small">{{ t("pagination.only_today") }}</label>
-            <div class="control">
-              <div class="select">
-                <select :value="onlyTodayFilter" @change="onOnlyTodayFilterChange">
-                  <option value="*">{{ t("common.all") }}</option>
-                  <option :value="new Date().toISOString().split('T')[0]">{{ t("common.yes") }}</option>
-                </select>
-              </div>
+      </div>
+      <!-- Only today filter -->
+      <div class="column is-narrow">
+        <div class="field mb-0">
+          <label class="label is-small">{{ t('pagination.only_today') }}</label>
+          <div class="control">
+            <div class="select">
+              <select :value="onlyTodayFilter" @change="onOnlyTodayFilterChange">
+                <option value="*">{{ t('common.all') }}</option>
+                <option :value="new Date().toISOString().split('T')[0]">{{ t('common.yes') }}</option>
+              </select>
            </div>
          </div>
        </div>
-      </template>
-      <template #leftPaginationColumns> </template>
-      <template #rightPaginationColumns>
-        <!-- Toggles and actions depending on route -->
-        <!-- User: Only today switch + New booking button -->
-        <div class="column is-narrow order-bookings-pagination__actions" v-if="isUserRoute">
-          <div class="order-bookings-pagination__actions-grid">
-            <div class="order-bookings-pagination__today-action">
-              <label class="label is-small">{{ t("pagination.show_only_today") }}</label>
-              <div class="field mb-0">
-                <input
-                  id="today"
-                  type="checkbox"
-                  class="switch is-rounded"
-                  @change="
-                    (event) => {
-                      onOnlyTodayFilterChange({
-                        target: { value: event.target.checked ? new Date().toISOString().split('T')[0] : '*' },
-                      });
-                    }
-                  "
-                  :class="{ 'is-link': onlyTodayFilter !== '*' }"
-                  :checked="onlyTodayFilter !== '*'"
-                />
-                <label for="today"></label>
-              </div>
-            </div>
-            <div class="order-bookings-pagination__new-booking-action">
-              <label class="label is-small order-bookings-pagination__desktop-spacer">&nbsp;</label>
-              <button
-                class="button is-link button-same-width"
-                data-testid="user-bookings-new-booking"
-                @click="SessionUser.functions.redirectTo.external('/user/bookings/new', true)"
-              >
-                {{ t("pagination.new_booking") }}
-              </button>
-            </div>
-          </div>
+      </div>
+    </template>
+    <template #leftPaginationColumns>
+    </template>
+    <template #rightPaginationColumns>
+      <!-- Toggles and actions depending on route -->
+      <!-- User: Only today switch + New booking button -->
+      <div class="column is-narrow" v-if="router.currentRoute.value.path.startsWith('/user')">
+        <label class="label is-small">{{ t('pagination.show_only_today') }}</label>
+        <div class="field">
+          <input id="today" type="checkbox" class="switch is-rounded" @change="(event) => { onOnlyTodayFilterChange({ target: { value: event.target.checked ? new Date().toISOString().split('T')[0] : '*' } }) }" :class="{ 'is-link': onlyTodayFilter !== '*' }" :checked="onlyTodayFilter !== '*'" />
+          <label for="today"></label>
        </div>
-        <!-- Admin: pending + only today combined switch -->
-        <div class="column is-narrow" v-if="isAdminRoute">
-          <label class="label is-small">{{ t("pagination.show_only_todays_pending") }}</label>
-          <div class="field">
-            <input
-              id="today-pending"
-              type="checkbox"
-              class="switch is-rounded"
-              @change="
-                (event) => {
-                  onOnlyTodayFilterChange(
-                    { target: { value: event.target.checked ? new Date().toISOString().split('T')[0] : '*' } },
-                    false
-                  );
-                  onOrderIdFilterChange({ target: { value: event.target.checked ? 'is null' : '*' } });
-                }
-              "
-              :class="{ 'is-link': onlyTodayFilter !== '*' && orderIdFilter === 'is null' }"
-              :checked="onlyTodayFilter !== '*' && orderIdFilter === 'is null'"
-            />
-            <label for="today-pending"></label>
-          </div>
+      </div>
+      <div class="column is-narrow is-float-right" v-if="router.currentRoute.value.path.startsWith('/user')">
+        <label class="label is-small">&nbsp;</label>
+        <button
+            class="button is-link button-same-width"
+            @click="SessionUser.functions.redirectTo.external('/user/bookings/new', true)"
+        >
+          {{ t('pagination.new_booking') }}
+        </button>
+      </div>
+      <!-- Admin: pending + only today combined switch -->
+      <div class="column is-narrow" v-if="router.currentRoute.value.path.startsWith('/admin')">
+        <label class="label is-small">{{ t('pagination.show_only_todays_pending') }}</label>
+        <div class="field">
+          <input id="today-pending" type="checkbox" class="switch is-rounded" @change="(event) => { onOnlyTodayFilterChange({ target: { value: event.target.checked ? new Date().toISOString().split('T')[0] : '*' } }, false); onOrderIdFilterChange({ target: { value: event.target.checked ? 'is null' : '*' } }); }" :class="{ 'is-link': onlyTodayFilter !== '*' && orderIdFilter === 'is null' }" :checked="onlyTodayFilter !== '*' && orderIdFilter === 'is null'" />
+          <label for="today-pending"></label>
        </div>
-      </template>
-      <template #default>
-        <OrderBookingsTable :objects="list" />
-      </template>
-    </TableLabeledPagination>
+      </div>
+    </template>
+    <template #default>
+      <OrderBookingsTable :objects="list" />
+    </template>
+  </TableLabeledPagination>
  </div>
 </template>

 <style scoped>
-.order-bookings-pagination__filter .select,
-.order-bookings-pagination__filter select {
-  width: 100%;
-}

-.order-bookings-pagination__actions-grid {
-  align-items: flex-end;
-  display: flex;
-  gap: 0.75rem;
-  justify-content: flex-end;
-}
-
-.order-bookings-pagination__today-action .field {
-  min-height: 2.5rem;
-}
-
-.order-bookings-pagination__new-booking-action .button {
-  min-width: 10rem;
-}
-
-@media screen and (max-width: 768px) {
-  .order-bookings-pagination__table :deep([data-testid="table-labeled-pagination-filters"] > .columns) {
-    align-items: flex-start;
-    column-gap: 0.75rem;
-    margin-left: 0;
-    margin-right: 0;
-    row-gap: 0.85rem;
-  }
-
-  .order-bookings-pagination__table :deep([data-testid="table-labeled-pagination-filters"] > .columns > .column),
-  .order-bookings-pagination__filter,
-  .order-bookings-pagination__actions {
-    margin: 0;
-    padding: 0;
-  }
-
-  .order-bookings-pagination__filter {
-    flex: 1 1 calc(50% - 0.375rem);
-    max-width: calc(50% - 0.375rem);
-  }
-
-  .order-bookings-pagination__table
-    :deep([data-testid="table-labeled-pagination-filters"] > .columns > .columns.is-multiline) {
-    flex: 1 1 100%;
-    margin: 0;
-    max-width: 100%;
-    padding: 0;
-    width: 100%;
-  }
-
-  .order-bookings-pagination__actions {
-    flex: 1 1 100%;
-    max-width: 100%;
-    width: 100%;
-  }
-
-  .order-bookings-pagination__actions-grid {
-    display: grid;
-    gap: 0.75rem;
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    justify-content: stretch;
-  }
-
-  .order-bookings-pagination__new-booking-action .button {
-    min-width: 0;
-    width: 100%;
-  }
-
-  .order-bookings-pagination__desktop-spacer {
-    display: none;
-  }
-}
-</style>
+</style>
@@ -2,16 +2,13 @@
 import { computed } from "vue";
 import { BButton, BField } from "buefy";

-const props = withDefaults(
-  defineProps<{
-    steps: Array<any>;
-    currentStep: number;
-    showActions?: boolean;
-  }>(),
-  {
-    showActions: true,
-  }
-);
+const props = withDefaults(defineProps<{
+  steps: Array<any>;
+  currentStep: number;
+  showActions?: boolean;
+}>(), {
+  showActions: true,
+});

 const emit = defineEmits<{
  (e: "update:currentStep", value: number): void;
@@ -48,6 +45,9 @@ const goNext = () => {
  <div class="guided-instructions" data-testid="self-serve-guided-instructions">
    <div class="guided-instructions__header">
      <h3 class="title is-6">{{ $t("self_wash.follow_steps") }}</h3>
+      <span class="guided-instructions__counter">
+        {{ normalizedStepIndex + 1 }} / {{ steps.length }}
+      </span>
    </div>

    <section
@@ -55,18 +55,8 @@ const goNext = () => {
      class="guided-instructions__step"
      :data-testid="`self-serve-guided-step-${normalizedStepIndex}`"
    >
-      <b-field>
-        <template #label>
-          <span class="guided-instructions__step-label" data-testid="self-serve-guided-step-label">
-            <span class="guided-instructions__step-title" data-testid="self-serve-guided-step-title">
-              {{ normalizedStepIndex + 1 }}. {{ activeStep.title }}
-            </span>
-            <span class="guided-instructions__counter" data-testid="self-serve-guided-counter">
-              {{ normalizedStepIndex + 1 }}/{{ steps.length }}
-            </span>
-          </span>
-        </template>
-        <div class="guided-instructions__content" data-testid="self-serve-guided-content">
+      <b-field :label="`${normalizedStepIndex + 1}. ${activeStep.title}`">
+        <div class="guided-instructions__content">
          <p v-if="activeStep.content" class="guided-instructions__paragraph">{{ activeStep.content }}</p>
          <template v-for="(brush, brushIndex) in activeStep.brushes || []" :key="brushIndex">
            <p class="guided-instructions__paragraph">
@@ -115,28 +105,14 @@ const goNext = () => {
 .guided-instructions__header {
  display: flex;
  align-items: center;
+  justify-content: space-between;
  gap: 0.75rem;
 }

-.guided-instructions__step-label {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 1rem;
-  width: 100%;
-}
-
-.guided-instructions__step-title {
-  min-width: 0;
-}
-
 .guided-instructions__counter {
-  flex: 0 0 auto;
  color: #566074;
  font-size: 0.9rem;
  font-weight: 600;
-  margin-left: auto;
-  text-align: right;
  white-space: nowrap;
 }

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BIcon, BMessage, BRadioButton } from "buefy";
+import { BField, BIcon, BMessage, BRadioButton } from "buefy";

 defineProps<{
  lanes: Array<any>;
@@ -19,23 +19,14 @@ const emit = defineEmits<{
 <template>
  <div data-testid="self-serve-lane-step">
    <h1 class="title has-text-centered">{{ $t("self_wash.start_wash") }}</h1>
-    <section class="self-serve-choice-group" data-testid="self-serve-lane-choice-group">
-      <h2 class="self-serve-choice-label">{{ $t("self_wash.wash_lane") }}</h2>
-      <div
-        class="self-serve-choice-grid"
-        :class="{ 'self-serve-choice-grid--centered': lanes.length >= 2 }"
-        data-testid="self-serve-lane-options"
-      >
+    <b-field :label="$t('self_wash.wash_lane')">
+      <div class="columns is-multiline is-mobile" :class="{ 'is-centered': lanes.length >= 2 }">
        <template v-for="lane in lanes" :key="lane.id">
-          <div class="self-serve-choice-grid__item">
+          <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
            <b-radio-button
-              class="self-serve-choice-card"
              :model-value="selectedLaneId"
              :native-value="lane.id"
              type="is-link"
-              :disabled="!isLaneAvailable(lane)"
-              :title="!isLaneAvailable(lane) ? $t('self_wash.lane_unavailable') : null"
-              :aria-label="!isLaneAvailable(lane) ? $t('self_wash.lane_unavailable') : null"
              :data-testid="`self-serve-lane-option-${lane.id}`"
              @update:model-value="emit('update:selectedLaneId', lane.id)"
              @input="emit('update:selectedLaneId', lane.id)"
@@ -45,7 +36,7 @@ const emit = defineEmits<{
                <span v-if="!isLaneAvailable(lane)">
                  <small>
                    <b-icon icon="times-circle" type="is-danger" pack="fas" class="mr-1" />
-                    {{ $t("self_wash.lane_unavailable") }}
+                    {{ $t("self_wash.occupied") }}
                  </small>
                </span>
                <span v-else>
@@ -58,18 +49,18 @@ const emit = defineEmits<{
            </b-radio-button>
          </div>
        </template>
+        <div v-if="lanes.length === 0" class="column is-12">
+          <b-message type="is-warning" aria-close-label="Luk besked">
+            Ingen vaskebaner tilgaengelige for selvvask i <b>{{ departmentName || "denne" }}</b> afdeling.
+          </b-message>
+        </div>
      </div>
-      <b-message v-if="lanes.length === 0" type="is-warning" aria-close-label="Luk besked">
-        Ingen vaskebaner tilgængelige for selvvask i <b>{{ departmentName || "denne" }}</b> afdeling.
-      </b-message>
-    </section>
+    </b-field>

-    <section class="self-serve-choice-group" data-testid="self-serve-wash-type-group">
-      <h2 class="self-serve-choice-label">Maskine eller manuel vask</h2>
-      <div class="self-serve-choice-grid self-serve-choice-grid--centered" data-testid="self-serve-wash-type-options">
-        <div class="self-serve-choice-grid__item">
+    <b-field label="Maskine eller manuel vask">
+      <div class="columns is-mobile is-centered is-multiline">
+        <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
          <b-radio-button
-            class="self-serve-choice-card"
            :model-value="washType"
            native-value="Manual"
            type="is-link"
@@ -81,20 +72,17 @@ const emit = defineEmits<{
              <span>Manuel<br /></span>
              <small>
                <b-icon icon="check-circle" type="is-success" pack="fas" class="mr-1" />
-                Tilgængelig
+                Tilgaengelig
              </small>
            </span>
          </b-radio-button>
        </div>
-        <div class="self-serve-choice-grid__item">
+        <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
          <b-radio-button
-            class="self-serve-choice-card"
            :model-value="washType"
            native-value="Machine"
            type="is-link"
            :disabled="!isMachineAvailable(selectedLaneId)"
-            :title="!isMachineAvailable(selectedLaneId) ? $t('self_wash.machine_unavailable_for_lane') : null"
-            :aria-label="!isMachineAvailable(selectedLaneId) ? $t('self_wash.machine_unavailable_for_lane') : null"
            data-testid="self-serve-wash-type-machine"
            @update:model-value="emit('update:washType', 'Machine')"
            @input="emit('update:washType', 'Machine')"
@@ -117,85 +105,6 @@ const emit = defineEmits<{
          </b-radio-button>
        </div>
      </div>
-      <b-message
-        v-if="!isMachineAvailable(selectedLaneId)"
-        type="is-warning"
-        aria-close-label="Luk besked"
-        data-testid="self-serve-machine-unavailable-guidance"
-      >
-        {{ $t("self_wash.machine_unavailable_for_lane") }}
-      </b-message>
-    </section>
+    </b-field>
  </div>
 </template>
-
-<style scoped>
-.self-serve-choice-group {
-  margin-bottom: 1.25rem;
-}
-
-.self-serve-choice-label {
-  color: #303440;
-  font-size: 1.25rem;
-  font-weight: 700;
-  line-height: 1.2;
-  margin: 0 0 0.75rem;
-}
-
-.self-serve-choice-grid {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  margin-bottom: 0.75rem;
-  width: 100%;
-}
-
-.self-serve-choice-grid--centered {
-  justify-content: center;
-}
-
-.self-serve-choice-grid__item {
-  min-width: 0;
-}
-
-.self-serve-choice-card {
-  align-items: center;
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  min-height: 5rem;
-  padding: 0.75rem 0.5rem;
-  white-space: normal;
-  width: 100%;
-}
-
-.self-serve-choice-card :deep(.button) {
-  align-items: center;
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  min-height: 5rem;
-  padding: 0.75rem 0.5rem;
-  white-space: normal;
-  width: 100%;
-}
-
-.self-serve-choice-card :deep(.button),
-.self-serve-choice-card span,
-.self-serve-choice-card :deep(.button span) {
-  min-width: 0;
-}
-
-.self-serve-choice-card small,
-.self-serve-choice-card :deep(.button small) {
-  display: inline-flex;
-  align-items: center;
-  line-height: 1.25;
-}
-
-@media screen and (min-width: 769px) {
-  .self-serve-choice-grid {
-    grid-template-columns: repeat(auto-fit, minmax(11rem, 15rem));
-  }
-}
-</style>
@@ -38,7 +38,7 @@ const emit = defineEmits<{
          <div class="card-footer-item">
            <button
              class="button is-fullwidth"
-              :class="[answers[question.id] === false ? 'is-danger' : 'is-light']"
+              :class="[answers[question.id] === false ? 'is-danger is-light' : 'is-light']"
              :data-testid="`self-serve-question-${question.id}-no`"
              @click="emit('answer-question', question.id, false)"
            >
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BButton, BIcon } from "buefy";
+import { BButton, BIcon, BTooltip } from "buefy";
 import SelfServeQuestionCards from "@/components/displays/selfServe/SelfServeQuestionCards.vue";

 defineProps<{
@@ -7,9 +7,18 @@ defineProps<{
  visibleQuestions: Array<any>;
  answers: Record<number, boolean | undefined>;
  editAnswers: boolean;
+  showDebug: boolean;
+  conditions: Array<any>;
+  rules: Array<any>;
+  evaluateCondition: (conditionId: number) => boolean;
+  evaluateRule: (rule: any, visited?: Set<number>) => boolean;
+  isQuestionVisible: (question: any) => boolean;
+  getConditionById: (conditionId: number) => any;
+  getRuleTypeLabel: (type: string) => string;
 }>();

 const emit = defineEmits<{
+  (e: "toggle-debug"): void;
  (e: "toggle-edit"): void;
  (e: "answer-question", questionId: number, value: boolean): void;
 }>();
@@ -26,8 +35,27 @@ const emitAnswerQuestion = (questionId: number, value: boolean) => {
      <p>{{ $t("self_wash.loading_data") }}</p>
    </div>
    <div v-else>
+      <div
+        v-if="isLoading"
+        class="notification is-info is-light py-2 px-3 mb-4"
+        data-testid="self-serve-questions-inline-loading"
+      >
+        <b-icon pack="fas" icon="spinner" custom-class="fa-pulse" size="is-small" />
+        <span class="ml-2">{{ $t("self_wash.loading_data") }}</span>
+      </div>
+
      <div class="is-flex is-justify-content-center is-align-items-center mb-4">
        <h1 class="title mb-0">{{ $t("self_wash.answer_questions") }}</h1>
+        <b-button
+          size="is-small"
+          icon-left="bug"
+          type="is-ghost"
+          class="ml-2"
+          data-testid="self-serve-toggle-debug"
+          @click="emit('toggle-debug')"
+        >
+          Debug
+        </b-button>
        <b-button
          v-if="editAnswers"
          size="is-small"
@@ -41,16 +69,75 @@ const emitAnswerQuestion = (questionId: number, value: boolean) => {
        </b-button>
      </div>

-      <div class="self-serve-questions-status-slot" aria-live="polite">
-        <div
-          class="notification is-info is-light py-2 px-3 mb-0"
-          :class="{ 'is-invisible': !isLoading }"
-          data-testid="self-serve-questions-inline-loading"
-          :aria-hidden="!isLoading"
-        >
-          <b-icon pack="fas" icon="spinner" custom-class="fa-pulse" size="is-small" />
-          <span class="ml-2">{{ $t("self_wash.loading_data") }}</span>
+      <div v-if="showDebug" class="box mb-4 has-background-light" data-testid="self-serve-debug-panel">
+        <h5 class="subtitle is-5">Debug: Betingelser</h5>
+        <div class="tags">
+          <b-tooltip
+            v-for="condition in conditions"
+            :key="condition.id"
+            position="is-top"
+            multilined
+            type="is-dark"
+          >
+            <template #content>
+              <div class="has-text-left">
+                <p v-if="condition.description" class="mb-2"><i>{{ condition.description }}</i></p>
+                <p class="is-size-7 has-text-weight-bold mb-1">Regler:</p>
+                <div
+                  v-for="rule in rules.filter(entry => parseInt(entry.condition_id as any) === parseInt(condition.id))"
+                  :key="rule.id"
+                  class="is-size-7"
+                >
+                  <span class="icon is-small">
+                    <i :class="evaluateRule(rule, new Set([parseInt(condition.id)])) ? 'fas fa-check has-text-success' : 'fas fa-times has-text-danger'" />
+                  </span>
+                  <span class="ml-1">[{{ getRuleTypeLabel(rule.type) }}] {{ rule.name }}</span>
+                </div>
+              </div>
+            </template>
+            <span class="tag" :class="evaluateCondition(condition.id) ? 'is-success' : 'is-light'">
+              <span class="icon is-small mr-1">
+                <i :class="evaluateCondition(condition.id) ? 'fas fa-check-circle' : 'fas fa-times-circle'" />
+              </span>
+              {{ condition.name }}
+            </span>
+          </b-tooltip>
        </div>
+
+        <hr />
+
+        <h5 class="subtitle is-5">Debug: Alle mulige sporgsmal (synlighed)</h5>
+        <ul>
+          <li v-for="question in visibleQuestions" :key="question.id" class="is-size-7">
+            <span class="icon is-small">
+              <i :class="isQuestionVisible(question) ? 'fas fa-eye has-text-success' : 'fas fa-eye-slash has-text-grey-light'" />
+            </span>
+            {{ question.question }}
+            <b-tooltip v-if="question.condition_id" position="is-top" multilined type="is-dark">
+              <template #content>
+                <div v-if="getConditionById(question.condition_id)" class="has-text-left">
+                  <p v-if="getConditionById(question.condition_id).description" class="mb-2">
+                    <i>{{ getConditionById(question.condition_id).description }}</i>
+                  </p>
+                  <p class="is-size-7 has-text-weight-bold mb-1">Regler:</p>
+                  <div
+                    v-for="rule in rules.filter(entry => parseInt(entry.condition_id as any) === parseInt(question.condition_id))"
+                    :key="rule.id"
+                    class="is-size-7"
+                  >
+                    <span class="icon is-small">
+                      <i :class="evaluateRule(rule, new Set([parseInt(question.condition_id)])) ? 'fas fa-check has-text-success' : 'fas fa-times has-text-danger'" />
+                    </span>
+                    <span class="ml-1">[{{ getRuleTypeLabel(rule.type) }}] {{ rule.name }}</span>
+                  </div>
+                </div>
+              </template>
+              <span class="has-text-grey is-clickable">
+                (Hvis: {{ getConditionById(question.condition_id)?.name || question.condition_id }})
+              </span>
+            </b-tooltip>
+          </li>
+        </ul>
      </div>

      <SelfServeQuestionCards
@@ -61,20 +148,3 @@ const emitAnswerQuestion = (questionId: number, value: boolean) => {
    </div>
  </div>
 </template>
-
-<style scoped>
-.self-serve-questions-status-slot {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  min-height: 2.75rem;
-}
-
-.self-serve-questions-status-slot .notification {
-  width: 100%;
-}
-
-.self-serve-questions-status-slot .notification.is-invisible {
-  visibility: hidden;
-}
-</style>
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { BCheckbox, BField, BIcon } from "buefy";
-import { getSelfServeTaskDynamicImagePresentation } from "@/services/selfServeDynamicImage.js";

 const props = withDefaults(defineProps<{
  tasks: Array<any>;
@@ -75,24 +74,20 @@ const getProgramWheelSelection = (task: any) => {
  if (!taskUsesProgramPicker(task)) {
    return null;
  }
+  const rawValue = task?.dynamic_images_vehicle_type ?? task?.dynamic_image_vehicle_type ?? task?.dynamicImagesVehicleType;
+  if (rawValue === null || rawValue === undefined || rawValue === "") {
+    return null;
+  }

-  return getSelfServeTaskDynamicImagePresentation(task).thumbPosition;
+  const parsed = Number.parseInt(String(rawValue), 10);
+  return Number.isInteger(parsed) && parsed >= 0 ? parsed : null;
 };

 const formatTaskTitle = (task: any) => {
  const title = String(task?.task || "");
  const programWheelSelection = getProgramWheelSelection(task);

-  if (programWheelSelection === null) {
-    return title;
-  }
-
-  const programTitle = title.match(/^(.*?\bprogram)(\b.*)$/i);
-  if (programTitle) {
-    return `${programTitle[1]} #${programWheelSelection}${programTitle[2]}`;
-  }
-
-  return `${title} #${programWheelSelection}`;
+  return programWheelSelection === null ? title : `#${programWheelSelection} ${title}`;
 };
 </script>

@@ -62,7 +62,6 @@ const onDynamicImageError = () => {
        v-if="dynamicImageUrl"
        class="self-serve-dynamic-image-frame mb-4"
        :class="{ 'is-loading': isDynamicImageLoading }"
-        data-testid="self-serve-dynamic-image-frame"
      >
        <b-skeleton
          v-if="isDynamicImageLoading"
@@ -99,18 +98,16 @@ const onDynamicImageError = () => {
 <style scoped>
 .self-serve-dynamic-image-frame {
  position: relative;
-  width: 100%;
  max-width: 100%;
-  aspect-ratio: 16 / 9;
  margin-left: auto;
  margin-right: auto;
-  overflow: hidden;
 }

-@media screen and (min-width: 769px) {
-  .self-serve-dynamic-image-frame {
-    max-width: 640px;
-  }
+.self-serve-dynamic-image-frame.is-loading {
+  width: 100%;
+  max-width: 640px;
+  min-height: 180px;
+  aspect-ratio: 16 / 9;
 }

 .self-serve-dynamic-image-skeleton {
@@ -121,11 +118,12 @@ const onDynamicImageError = () => {
 }

 .self-serve-dynamic-image {
-  width: 100%;
-  height: 100%;
+  max-width: 100%;
+  height: auto;
  border-radius: 4px;
  display: block;
-  object-fit: contain;
+  margin-left: auto;
+  margin-right: auto;
  transition: opacity 120ms ease;
 }

@@ -16,7 +16,6 @@ const props = defineProps<{
  availableProductIds: number[];
  vehicleTypes: Array<any>;
  vehicleStepError?: string | null;
-  vehicleStepGuidance?: string | null;
 }>();

 const emit = defineEmits<{
@@ -110,15 +109,6 @@ const emitRegistration = (value: unknown) => {
    >
      {{ props.vehicleStepError }}
    </b-message>
-    <b-message
-      v-else-if="props.vehicleStepGuidance"
-      type="is-info"
-      has-icon
-      :closable="false"
-      data-testid="self-serve-vehicle-step-guidance"
-    >
-      {{ props.vehicleStepGuidance }}
-    </b-message>
    <b-field :label="$t('self_wash.select_your_vehicle')">
      <template v-if="availableProductIds.length > 0">
        <SelfServeVehicleTypeSelector
@@ -29,7 +29,7 @@ const getLoadingVehicleTypes = (count: number): VehicleTypeTemplate[] => {
  for (let index = 0; index < count; index += 1) {
    loadingTypes.push({
      id: index,
-      name: "Indlæser...",
+      name: "Indlaeser...",
      price: 0,
      loading: true,
    });
@@ -146,7 +146,7 @@ watch(() => props.selectedVehicleTypeId, (newId) => {
              </template>
            </template>
            <template v-else>
-              Vælg en køretøjstype ved at trykke på et af ikonerne ovenfor.
+              Vaelg venligst din koretojstype ved at klikke pa ikonet ovenfor.
            </template>
          </p>
        </div>
@@ -2,31 +2,21 @@
 import Swal from "sweetalert2";
 import { usePaginatedListInstance } from "@/components/pagination/paginatedList.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
-import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
-import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";

 const props = defineProps({
  objects: {
    type: Array,
    default: () => [],
  },
-  showCustomer: {
-    type: Boolean,
-    default: false,
-  },
 });

 const { loadList } = usePaginatedListInstance();

-const canEditPermissions = () =>
-  props.showCustomer ? SessionUser.canAccessSuperUser() : SessionUser.canAccessUser() || SessionUser.hasPermission("SUBUSERS_EDIT");
-const canDisableAccess = () =>
-  props.showCustomer ? SessionUser.canAccessSuperUser() : SessionUser.canAccessUser() || SessionUser.hasPermission("SUBUSERS_DELETE");
+const canEditPermissions = () => SessionUser.canAccessUser() || SessionUser.hasPermission("SUBUSERS_EDIT");
+const canDisableAccess = () => SessionUser.canAccessUser() || SessionUser.hasPermission("SUBUSERS_DELETE");
 const canResendInvite = (subuser) =>
-  (props.showCustomer ? SessionUser.canAccessSuperUser() : SessionUser.canAccessUser() || SessionUser.hasPermission("SUBUSERS_EDIT"))
+  (SessionUser.canAccessUser() || SessionUser.hasPermission("SUBUSERS_EDIT"))
  && Boolean(subuser?.can_resend_invite ?? subuser?.setup_required);
-const hasRowActions = (subuser) =>
-  (canEditPermissions() && subuser?.grant_id) || canResendInvite(subuser) || (canDisableAccess() && subuser?.grant_id);

 const formatDateTime = (dateString) => {
  if (!dateString) {
@@ -60,16 +50,6 @@ const formatEmail = (subuser) => {
  return subuser?.setup_required ? "E-mail oplyses ved accept" : "-";
 };

-const formatCustomer = (subuser) => {
-  if (!props.showCustomer) {
-    return "";
-  }
-
-  const number = subuser?.customer_number ?? "-";
-  const name = subuser?.customer_name || "Ukendt kunde";
-  return `${number} - ${name}`;
-};
-
 const permissionSummary = (subuser) =>
  SessionUser.objects.subusers.functions.permissionSummary(subuser?.grant_permissions || []);

@@ -181,7 +161,7 @@ const onToggleEnabled = async (subuser, enabled) => {
 };

 const onResendInvite = async (subuser) => {
-  await SessionUser.objects.subusers.functions.resendInvite(subuser, refreshList, { superuser: props.showCustomer });
+  await SessionUser.objects.subusers.functions.resendInvite(subuser, refreshList);
 };
 </script>

@@ -191,7 +171,6 @@ const onResendInvite = async (subuser) => {
      <thead>
        <tr>
          <th>ID</th>
-          <th v-if="showCustomer">Kunde</th>
          <th>Chauffør</th>
          <th>Kontakt</th>
          <th>Adgang</th>
@@ -204,17 +183,12 @@ const onResendInvite = async (subuser) => {
      </thead>
      <tbody>
        <tr v-if="props.objects.length === 0">
-          <td :colspan="showCustomer ? 10 : 9" class="has-text-centered has-text-grey py-6">Ingen chauffører fundet.</td>
+          <td colspan="9" class="has-text-centered has-text-grey py-6">Ingen chauffører fundet.</td>
        </tr>

-        <tr v-for="subuser in props.objects" :key="`${subuser.id}-${subuser.grant_id || 'none'}`">
+        <tr v-for="subuser in props.objects" :key="subuser.id">
          <td>{{ subuser.id }}</td>

-          <td v-if="showCustomer">
-            <div class="has-text-weight-semibold">{{ formatCustomer(subuser) }}</div>
-            <div class="is-size-7 has-text-grey">Grant #{{ subuser.grant_id }}</div>
-          </td>
-
          <td>
            <div class="has-text-weight-semibold">{{ subuser.name || "-" }}</div>
            <div class="is-size-7 has-text-grey" :data-testid="`subuser-username-${subuser.id}`">
@@ -245,6 +219,14 @@ const onResendInvite = async (subuser) => {

          <td>
            <div>{{ subuser.grant_note || "-" }}</div>
+            <button
+              v-if="canEditPermissions() && subuser.grant_id"
+              class="button is-text is-small px-0 mt-1"
+              type="button"
+              @click="onEditNote(subuser)"
+            >
+              Redigér note
+            </button>
          </td>

          <td>{{ formatDateTime(subuser.created_at) }}</td>
@@ -252,42 +234,36 @@ const onResendInvite = async (subuser) => {

          <td>
            <div class="buttons is-justify-content-flex-end action-buttons">
-              <ActionSettingsWheelButton v-if="hasRowActions(subuser)">
-                <template #actions>
-                  <ActionSettingsWheelItem
-                    v-if="canEditPermissions() && subuser.grant_id"
-                    icon="fas fa-pen"
-                    label="Redigér note"
-                    :click-action="() => onEditNote(subuser)"
-                    :test-id="`subuser-note-${subuser.id}`"
-                  />
+              <button
+                v-if="canEditPermissions() && subuser.grant_id"
+                class="button is-small"
+                type="button"
+                :data-testid="`subuser-permissions-${subuser.id}`"
+                @click="onEditPermissions(subuser)"
+              >
+                Tilladelser
+              </button>

-                  <ActionSettingsWheelItem
-                    v-if="canEditPermissions() && subuser.grant_id"
-                    icon="fas fa-user-shield"
-                    label="Tilladelser"
-                    :click-action="() => onEditPermissions(subuser)"
-                    :test-id="`subuser-permissions-${subuser.id}`"
-                  />
+              <button
+                v-if="canResendInvite(subuser)"
+                class="button is-small"
+                type="button"
+                :data-testid="`subuser-resend-${subuser.id}`"
+                @click="onResendInvite(subuser)"
+              >
+                Gensend
+              </button>

-                  <ActionSettingsWheelItem
-                    v-if="canResendInvite(subuser)"
-                    icon="fas fa-paper-plane"
-                    label="Gensend"
-                    :click-action="() => onResendInvite(subuser)"
-                    :test-id="`subuser-resend-${subuser.id}`"
-                  />
-
-                  <ActionSettingsWheelItem
-                    v-if="canDisableAccess() && subuser.grant_id"
-                    :icon="subuser.grant_enabled ? 'fas fa-ban' : 'fas fa-check'"
-                    :label="subuser.grant_enabled ? 'Deaktivér' : 'Aktivér'"
-                    :template="subuser.grant_enabled ? 'danger' : 'success'"
-                    :click-action="() => onToggleEnabled(subuser, !subuser.grant_enabled)"
-                    :test-id="`subuser-toggle-${subuser.id}`"
-                  />
-                </template>
-              </ActionSettingsWheelButton>
+              <button
+                v-if="canDisableAccess() && subuser.grant_id"
+                class="button is-small"
+                :class="subuser.grant_enabled ? 'is-danger is-light' : 'is-success is-light'"
+                type="button"
+                :data-testid="`subuser-toggle-${subuser.id}`"
+                @click="onToggleEnabled(subuser, !subuser.grant_enabled)"
+              >
+                {{ subuser.grant_enabled ? "Deaktivér" : "Aktivér" }}
+              </button>
            </div>
          </td>
        </tr>
@@ -1,6 +1,4 @@
 <script setup>
-import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
-import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
 import { usePaginatedListInstance } from "@/components/pagination/paginatedList.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { getDepartmentDailyReportComplaintCategoryLabel } from "@/services/departmentDailyReportComplaintCategories.js";
@@ -94,24 +92,29 @@ const formatCategory = (value) => (
        <td class="complaint-description">{{ complaint.description }}</td>
        <td>{{ formatCreatedBy(complaint) }}</td>
        <td class="has-text-right">
-          <div class="buttons is-right is-justify-content-flex-end" :data-testid="`superuser-complaint-actions-${complaint.id}`">
-            <ActionSettingsWheelButton>
-              <template #actions>
-                <ActionSettingsWheelItem
-                  icon="fas fa-pen"
-                  :label="$t('global.edit')"
-                  :test-id="`superuser-complaint-edit-${complaint.id}`"
-                  :click-action="() => SessionUser.objects.department_daily_report_complaints.functions.showEditForm(complaint, loadList)"
-                />
-                <ActionSettingsWheelItem
-                  icon="fas fa-trash"
-                  :label="$t('global.delete')"
-                  template="danger"
-                  :test-id="`superuser-complaint-delete-${complaint.id}`"
-                  :click-action="() => SessionUser.objects.department_daily_report_complaints.functions.showDeleteConfirmationModal(complaint.id, loadList)"
-                />
-              </template>
-            </ActionSettingsWheelButton>
+          <div class="buttons is-right is-justify-content-flex-end">
+            <button
+              class="button is-small is-dark"
+              type="button"
+              :data-testid="`superuser-complaint-edit-${complaint.id}`"
+              @click="SessionUser.objects.department_daily_report_complaints.functions.showEditForm(complaint, loadList)"
+            >
+              <span class="icon is-small">
+                <i class="fas fa-pen"></i>
+              </span>
+              <span>{{ $t('global.edit') }}</span>
+            </button>
+            <button
+              class="button is-small is-danger"
+              type="button"
+              :data-testid="`superuser-complaint-delete-${complaint.id}`"
+              @click="SessionUser.objects.department_daily_report_complaints.functions.showDeleteConfirmationModal(complaint.id, loadList)"
+            >
+              <span class="icon is-small">
+                <i class="fas fa-trash"></i>
+              </span>
+              <span>{{ $t('global.delete') }}</span>
+            </button>
          </div>
        </td>
      </tr>
@@ -102,16 +102,26 @@ const parseBalance = (user) => {
            {{ parseBalance(user) }}</td>
          <td>
            <div class="buttons is-float-right">
-              <ActionSettingsWheelButton icon="fas fa-exclamation-triangle">
-                <template #actions>
-                  <ActionSettingsWheelItem
-                    label="Kundekonto er lukket i E-conomic"
-                    icon="fas fa-exclamation-triangle"
-                    template="warning"
-                    :click-action="showCustomerBarred"
-                  />
-                </template>
-              </ActionSettingsWheelButton>
+              <!-- Disabled customer actions -->
+              <div class="dropdown is-right is-hoverable">
+                <div class="dropdown-trigger">
+                  <button class="button is-small is-danger is-inverted" aria-haspopup="true" aria-controls="dropdown-menu" @click="showCustomerBarred">
+                    <span class="icon">
+                      <i class="fas fa-exclamation-triangle"></i>
+                    </span>
+                  </button>
+                </div>
+                <div class="dropdown-menu" id="dropdown-menu" role="menu">
+                  <div class="dropdown-content">
+                    <a class="dropdown-item has-text-warning" @click="showCustomerBarred">
+                      <span class="icon">
+                        <i class="fas fa-exclamation-triangle"></i>
+                      </span>
+                      <span class="ml-1">Kundekonto er lukket i E-conomic</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
            </div>
          </td>
        </tr>
@@ -133,4 +143,4 @@ const parseBalance = (user) => {
  width: 1%;
  white-space: nowrap;
 }
-</style>
+</style>
@@ -1,17 +1,15 @@
 <script setup>
-import { ref } from "vue";
-import { useI18n } from "vue-i18n";
-
-import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
-import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
-import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
-import { showEditDepartmentForm } from "@/components/forms/superUser/editDepartmentForm.vue";
-import { usePaginatedListInstance } from "@/components/pagination/paginatedList.vue";
-import { SessionUser } from "@/components/session/token/SessionUser.vue";
-
 const props = defineProps(["objects"]);
-const { t } = useI18n();
+import { ref } from "vue";
+import { departments, getDepartments, isLoading, getDepartmentName } from "@/components/pagination/departmentTabs.vue";
+import { usePaginatedListInstance } from "@/components/pagination/paginatedList.vue";
 const { loadList, loadSwitch, metaCurrentPage, metaItemsPerPage, setList } = usePaginatedListInstance();
+import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
+
+// Get the departments (If the departments are not already loaded)
+if (departments.value.length === 0) {
+  getDepartments();
+}

 const draggingIndex = ref(null);
 const dragOverIndex = ref(null);
@@ -70,6 +68,18 @@ const onDrop = async (event, newIndex) => {
  }
 };

+const parseCustomerName = (user) => {
+  if (user.customer_name) {
+    return user.customer_name;
+  } else {
+    return "-";
+  }
+};
+import { showEditDepartmentForm } from "@/components/forms/superUser/editDepartmentForm.vue";
+
+import { showEditUserForm } from "@/components/forms/superUser/editUserForm.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+
 const redirect = (path) => {
  window.location = path;
 };
@@ -126,7 +136,7 @@ const toggleArchived = async (department) => {
        <th>{{ SessionUser.objects.departments.columns.archived.label }}</th>
        <th>{{ SessionUser.objects.departments.columns.latitude.label }}</th>
        <th>{{ SessionUser.objects.departments.columns.longitude.label }}</th>
-        <th class="has-text-right">{{ $t("tables.actions") }}</th>
+        <th>{{ $t("tables.actions") }}</th>
      </tr>
    </thead>
    <tbody>
@@ -202,41 +212,34 @@ const toggleArchived = async (department) => {
          column="longitude"
          :edit-function="SessionUser.objects.departments.showEditObjectFieldForm"
        />
-        <td class="has-text-right">
-          <div
-            class="buttons is-right is-justify-content-flex-end"
-            :data-testid="`superuser-department-actions-${department.id}`"
-          >
-            <ActionSettingsWheelButton>
-              <template #actions>
-                <ActionSettingsWheelItem
-                  icon="fas fa-edit"
-                  :label="t('global.edit')"
-                  :test-id="`superuser-department-edit-${department.id}`"
-                  :click-action="
-                    () =>
-                      showEditDepartmentForm(
-                        department.id,
-                        department.name,
-                        department.description,
-                        department.economic_department_id
-                      )
-                  "
-                />
-                <ActionSettingsWheelItem
-                  icon="fas fa-external-link-alt"
-                  :label="t('global.open')"
-                  :test-id="`superuser-department-open-${department.id}`"
-                  :click-action="() => redirect('/admin/' + department.id)"
-                />
-                <ActionSettingsWheelItem
-                  icon="fas fa-cog"
-                  :label="t('global.settings')"
-                  :test-id="`superuser-department-settings-${department.id}`"
-                  :click-action="() => redirect('/superuser/departments/' + department.id)"
-                />
-              </template>
-            </ActionSettingsWheelButton>
+        <td>
+          <div class="buttons">
+            <button
+              class="button is-small"
+              @click="
+                showEditDepartmentForm(
+                  department.id,
+                  department.name,
+                  department.description,
+                  department.economic_department_id
+                )
+              "
+            >
+              <span class="icon">
+                <i class="fas fa-edit"></i>
+              </span>
+            </button>
+            <button class="button is-small" @click="redirect('/admin/' + department.id)">
+              <!-- External link icon -->
+              <span class="icon">
+                <i class="fas fa-external-link-alt"></i>
+              </span>
+            </button>
+            <button class="button is-small is-dark" @click="redirect('/superuser/departments/' + department.id)">
+              <span class="icon">
+                <i class="fas fa-cog"></i>
+              </span>
+            </button>
          </div>
        </td>
      </tr>
@@ -1,32 +1,44 @@
 <script setup>
 import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
-import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+defineProps(['objects']);
+import { departments, getDepartments, isLoading, getDepartmentName} from "@/components/pagination/departmentTabs.vue";
+import Swal from "sweetalert2";
+
+// Get the departments (If the departments are not already loaded)
+if (departments.value.length === 0) {
+  getDepartments();
+}
+
+
+
 import { showEditUserForm } from "@/components/forms/superUser/editUserForm.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
+
+const redirect = (path) => {
+  window.location = path;
+}
+

-defineProps({
-  objects: {
-    type: Array,
-    default: () => [],
-  },
-});

-const editUser = (user) => {
-  showEditUserForm(user.id, user.customer_number, user.display_name, user.group_id);
-};
 </script>

 <template>
-  <table class="table is-fullwidth" data-testid="superuser-users-table">
-    <thead>
+    <table class="table is-fullwidth">
+      <thead>
      <tr>
-        <th>{{ $t("objects.columns.id") }}</th>
-        <th>{{ $t("tables.users.name") }}</th>
-        <th>{{ $t("tables.users.role") }}</th>
-        <th class="has-text-right">{{ $t("tables.actions") }}</th>
+        <th>{{ $t('objects.columns.id') }}</th>
+        <th>{{ $t('tables.users.name') }}</th>
+        <th>{{ $t('tables.users.role') }}</th>
+        <th class="has-text-right">{{ $t('tables.actions') }}</th>
      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="user in objects" :key="user.id" :data-testid="`superuser-users-row-${user.id}`">
+      </thead>
+      <tbody>
+      <tr v-for="user in objects" :key="user.id">
        <td>{{ user.id }}</td>
        <td>{{ user.display_name }}</td>
        <td>{{ user.group_id }}</td>
@@ -34,27 +46,25 @@ const editUser = (user) => {
          <div class="buttons is-float-right">
            <!-- Settings wheel -->
            <ActionSettingsWheelButton
-              :customer_number="user.customer_number"
-              :user_id="user.id"
-              :data-testid="`superuser-user-actions-${user.id}`"
+                :customer_number="user.customer_number"
+                :user_id="user.id"
            >
              <template #actions>
                <ActionSettingsWheelItem
-                  :click-action="() => editUser(user)"
-                  icon="fas fa-user-edit"
-                  :label="$t('global.edit')"
-                  :test-id="`superuser-user-edit-${user.id}`"
+                    @click="showEditUserForm(user.id, user.customer_number, user.display_name, user.group_id)"
+                    icon="fas fa-user-edit"
+                    :label="$t('global.edit')"
                />
              </template>
            </ActionSettingsWheelButton>
          </div>
        </td>
      </tr>
-      <tr v-if="objects.length === 0">
-        <td colspan="4">{{ $t("global.no_data") }}</td>
-      </tr>
-    </tbody>
-  </table>
+      </tbody>
+    </table>
+
 </template>

-<style scoped></style>
+<style scoped>
+
+</style>
@@ -1,10 +1,10 @@
 <script setup>
 import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
 import { ref } from "vue";
-import { useI18n } from "vue-i18n";
+import { useI18n } from 'vue-i18n';

 const { t } = useI18n();
-import { departments, getDepartments } from "@/components/pagination/departmentTabs.vue";
+import { departments, getDepartments} from "@/components/pagination/departmentTabs.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { loadList } from "@/components/pagination/paginatedList.vue";
 import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
@@ -27,15 +27,16 @@ const props = defineProps({
  reloadList: {
    type: Function,
    required: false,
-    default: null,
+    default: null
  },
  add_other_customer_id: {
    type: Number,
    required: false,
-    default: null,
-  },
+    default: null
+  }
 });

+
 const reload = () => {
  // Load the list of vehicles
  if (props.reloadList) {
@@ -58,9 +59,13 @@ if (departments.value.length === 0) {
 const onClickListAddons = (vehicleId) => {
  // Redirect to the product addons page
  console.log("Fetching product addons for vehicle: " + vehicleId);
-  SessionUser.request("/vehicles/addons/available", "GET", {
-    id: vehicleId,
-  });
+  SessionUser.request(
+      '/vehicles/addons/available',
+      'GET',
+      {
+        id: vehicleId
+      },
+  )
 };

 const vehicleAddons = ref(null);
@@ -71,9 +76,13 @@ const getVehicleAvailableAddons = (vehicleId, forceReload = false) => {
  // Get the vehicle addons from the server
  if (vehicleAddons.value === null) {
    vehicleAddons.value = [];
-    SessionUser.request("/vehicles/addons/available", "GET", {
-      id: vehicleId,
-    }).then((response) => {
+    SessionUser.request(
+        '/vehicles/addons/available',
+        'GET',
+        {
+          id: vehicleId
+        },
+    ).then((response) => {
      console.log("Vehicle addons: ", response.data.data);
      vehicleAddons.value = response.data.data;
    });
@@ -84,10 +93,14 @@ const getVehicleAvailableAddons = (vehicleId, forceReload = false) => {

 const toggleVehicleAddon = (vehicleId, addonId) => {
  // Toggle the vehicle addon
-  SessionUser.request("/vehicles/addons/toggle", "POST", {
-    vehicle_id: vehicleId,
-    addon_id: addonId,
-  }).then(() => {
+  SessionUser.request(
+      '/vehicles/addons/toggle',
+      'POST',
+      {
+        vehicle_id: vehicleId,
+        addon_id: addonId
+      },
+  ).then(() => {
    reload();
  });
 };
@@ -95,9 +108,9 @@ const toggleVehicleAddon = (vehicleId, addonId) => {
 const getVehicleAddonToggleIcon = (vehicleAddon) => {
  // Check if the vehicle addon is applied
  if (isVehicleAddonApplied(vehicleAddon)) {
-    return "fas fa-minus";
+    return 'fas fa-minus';
  } else {
-    return "fas fa-plus";
+    return 'fas fa-plus';
  }
 };

@@ -124,142 +137,140 @@ const getProductOptionsLabel = (vehicle) => {
    <div class="table-container" data-testid="user-vehicles-table-container">
      <table class="table is-fullwidth" data-testid="user-vehicles-table">
        <thead>
-          <tr>
-            <th v-if="!props.compact">{{ $t("objects.columns.id") }}</th>
-            <th v-if="!props.compact">{{ $t("objects.columns.customer_id") }}</th>
-            <th>{{ $t("objects.bookings.columns.reg_1") }}</th>
-            <th>{{ $t("vehicles.type") }}</th>
-            <th>{{ $t("objects.vehicles.columns.wash_subscription") }}</th>
-            <th v-if="!props.compact">{{ SessionUser.objects.product_options.meta.title }}</th>
-            <th v-if="!props.compact">{{ $t("common.reference") }}</th>
-            <th v-if="!props.compact"></th>
-          </tr>
+        <tr>
+          <th v-if="!props.compact">{{ $t('objects.columns.id') }}</th>
+          <th v-if="!props.compact">{{ $t('objects.columns.customer_id') }}</th>
+          <th>{{ $t('objects.bookings.columns.reg_1') }}</th>
+          <th>{{ $t('vehicles.type') }}</th>
+          <th>{{ $t('objects.vehicles.columns.wash_subscription') }}</th>
+          <th v-if="!props.compact">{{ SessionUser.objects.product_options.meta.title }}</th>
+          <th v-if="!props.compact">{{ $t('common.reference') }}</th>
+          <th v-if="!props.compact"></th>
+        </tr>
        </thead>
        <tbody>
-          <tr v-for="object in props.vehicles" :key="object.id">
-            <!-- ID -->
-            <EditableTableColumn v-if="!props.compact" :object="object" :loadList="reload" column="id" />
-            <!-- Customer ID -->
-            <EditableTableColumn v-if="!props.compact" :object="object" :loadList="reload" column="customer_id" />
-            <!-- Reg -->
-            <EditableTableColumn
-              :object="object"
-              :loadList="reload"
-              :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
-              column="reg"
-            />
-            <!-- Type -->
-            <EditableTableColumn
-              :object="object"
-              :loadList="reload"
-              :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
-              column="type"
-              :parse-function="
-                (value) => {
-                  return SessionUser.objects.products.functions.getProductName(value, 'Ukendt');
-                }
-              "
-            />
-            <!-- Wash Subscription -->
-            <EditableTableColumn
-              :object="object"
-              :loadList="reload"
-              :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
-              column="wash_subscription"
-              :parse-function="
-                (value) => {
-                  return value ? t('common.yes') : t('common.no');
-                }
-              "
-            />
-            <!-- Product Options, if the wash subscription is set to true -->
-            <td v-if="!props.compact">
-              <template v-if="object.wash_subscription">
-                <!-- Enabled subscription -->
-                <ActionSettingsWheelButton
-                  :label="getProductOptionsLabel(object)"
-                  :icon="SessionUser.objects.product_options.meta.icon"
-                  @mouseenter="getVehicleAvailableAddons(object.id, true)"
-                >
-                  <template #actions>
-                    <!-- List addons -->
-                    <template v-for="vehicleAddon in vehicleAddons" :key="vehicleAddon.id">
-                      <ActionSettingsWheelItem
-                        :label="
-                          (isVehicleAddonApplied(vehicleAddon)
-                            ? SessionUser.objects.global.language.remove
-                            : SessionUser.objects.global.language.add) +
-                          ' ' +
-                          vehicleAddon.name
-                        "
-                        :icon="getVehicleAddonToggleIcon(vehicleAddon)"
-                        :click-action="() => toggleVehicleAddon(object.id, vehicleAddon.id)"
-                        :template="isVehicleAddonApplied(vehicleAddon) ? 'danger' : 'default'"
-                      />
-                    </template>
-                    <!-- If there are no addons, show a message -->
-                    <ActionSettingsWheelItem
-                      v-if="vehicleAddons ? vehicleAddons.length === 0 : true"
-                      :label="$t('global.no_data')"
-                      icon="fas fa-list"
-                    />
-                    <!-- Addons -->
-                  </template>
-                </ActionSettingsWheelButton>
+        <tr v-for="object in props.vehicles" :key="object.id">
+      <!-- ID -->
+      <EditableTableColumn
+          v-if="!props.compact"
+          :object="object"
+          :loadList="reload"
+          column="id"
+          />
+      <!-- Customer ID -->
+      <EditableTableColumn
+          v-if="!props.compact"
+          :object="object"
+          :loadList="reload"
+          column="customer_id"
+          />
+      <!-- Reg -->
+      <EditableTableColumn
+          :object="object"
+          :loadList="reload"
+          :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
+          column="reg"
+          />
+      <!-- Type -->
+      <EditableTableColumn
+          :object="object"
+          :loadList="reload"
+          :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
+          column="type"
+          :parse-function="(value) => {
+            return SessionUser.objects.products.functions.getProductName(value, 'Ukendt');
+          }"
+          />
+      <!-- Wash Subscription -->
+      <EditableTableColumn
+          :object="object"
+          :loadList="reload"
+          :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
+          column="wash_subscription"
+          :parse-function="(value) => {
+            return value ? t('common.yes') : t('common.no');
+          }"
+          />
+      <!-- Product Options, if the wash subscription is set to true -->
+      <td v-if="!props.compact">
+        <template v-if="object.wash_subscription">
+          <!-- Enabled subscription -->
+          <ActionSettingsWheelButton
+            :label="getProductOptionsLabel(object)"
+            :icon="SessionUser.objects.product_options.meta.icon"
+            @mouseenter="getVehicleAvailableAddons(object.id, true)"
+            >
+            <template #actions>
+              <!-- List addons -->
+              <template v-for="vehicleAddon in vehicleAddons" :key="vehicleAddon.id">
+                <ActionSettingsWheelItem
+                  :label="(isVehicleAddonApplied(vehicleAddon) ? SessionUser.objects.global.language.remove : SessionUser.objects.global.language.add) + ' ' + vehicleAddon.name"
+                  :icon="getVehicleAddonToggleIcon(vehicleAddon)"
+                  :click-action="() => toggleVehicleAddon(object.id, vehicleAddon.id)"
+                  :template="isVehicleAddonApplied(vehicleAddon) ? 'danger' : 'default'"
+                />
              </template>
-              <template v-else>
-                <!-- Disabled subscription -->
-                {{ $t("global.no_data") }}
-              </template>
-            </td>
-            <!-- Reference to the vehicle -->
-            <EditableTableColumn
-              v-if="!props.compact"
-              :object="object"
-              :loadList="reload"
-              :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
-              column="reference"
-            />
-            <!-- Actions -->
-            <td>
-              <!-- Actions stay grouped behind the wheel menu. -->
-              <ActionSettingsWheelButton
-                v-if="!props.compact"
-                :user_id="object.user_id"
-                :reg_1="object.reg"
-                :displayActionsDirectly="false"
-              >
-                <template #actions>
-                  <!-- View (Redirect to the vehicle page) -->
-                  <ActionSettingsWheelItem
-                    :label="$t('global.manage') + ' ' + $t('objects.vehicles.single')"
-                    icon="fas fa-eye"
-                    :click-action="() => redirectUserVehiclePage(object.id)"
-                  />
-                  <!-- Delete -->
-                  <ActionSettingsWheelItem
-                    :label="$t('global.delete') + ' ' + $t('objects.vehicles.single')"
-                    icon="fas fa-trash"
-                    :template="'danger'"
-                    :click-action="
-                      () => SessionUser.objects.vehicles.functions.showDeleteObjectForm(object.id, () => reload())
-                    "
-                  />
-                </template>
-              </ActionSettingsWheelButton>
-            </td>
-          </tr>
+              <!-- If there are no addons, show a message -->
+              <ActionSettingsWheelItem
+                v-if="vehicleAddons ? vehicleAddons.length === 0 : true"
+                :label="$t('global.no_data')"
+                icon="fas fa-list"
+                />
+              <!-- Addons -->
+            </template>
+          </ActionSettingsWheelButton>
+        </template>
+        <template v-else>
+          <!-- Disabled subscription -->
+          {{ $t('global.no_data') }}
+        </template>
+      </td>
+      <!-- Reference to the vehicle -->
+      <EditableTableColumn
+          v-if="!props.compact"
+          :object="object"
+          :loadList="reload"
+          :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
+          column="reference"
+          />
+      <!-- Actions -->
+      <td>
+        <!-- Actions -->
+        <ActionSettingsWheelButton
+            v-if="!props.compact"
+            :user_id="object.user_id"
+            :reg_1="object.reg"
+            :displayActionsDirectly="true"
+        >
+          <template #actions>
+            <!-- View (Redirect to the vehicle page) -->
+            <ActionSettingsWheelItem
+              :label="$t('global.manage') + ' ' + $t('objects.vehicles.single')"
+              icon="fas fa-eye"
+              :click-action="() => redirectUserVehiclePage(object.id)"
+              />
+            <!-- Delete -->
+            <ActionSettingsWheelItem
+              :label="$t('global.delete') + ' ' + $t('objects.vehicles.single')"
+              icon="fas fa-trash"
+              :template="'danger'"
+              :click-action="() => SessionUser.objects.vehicles.functions.showDeleteObjectForm(object.id, () => reload())"
+              />
+          </template>
+        </ActionSettingsWheelButton>
+      </td>
+        </tr>
        </tbody>
        <tfoot>
-          <tr>
-            <td colspan="10">
-              {{ $t("tables.showing") }} {{ props.vehicles.length }} {{ $t("objects.vehicles.multiple") }}
-            </td>
-          </tr>
+        <tr>
+          <td colspan="10">{{ $t('tables.showing') }} {{ props.vehicles.length }} {{ $t('objects.vehicles.multiple') }}</td>
+        </tr>
        </tfoot>
      </table>
    </div>
  </div>
 </template>

-<style scoped></style>
+<style scoped>
+
+</style>
@@ -10,7 +10,6 @@ import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue"
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import TwoFactorVerify from "@/components/forms/auth/TwoFactorVerify.vue";
 import { isPasskeySupported, authenticateWithPasskey } from "@/services/PasskeyAuthService.js";
-import { clearEdgeGatewayWorkspaceCache } from "@/services/edgeGateways.js";

 const employees = ref([]);
 const { t } = useI18n();
@@ -53,7 +52,6 @@ const login = async () => {
    }
    
    // Save the token in the local storage
-    clearEdgeGatewayWorkspaceCache();
    localStorage.setItem('token', data.token);
    // Redirect to the dashboard
    window.location.href = '/admin';
@@ -74,7 +72,6 @@ const loginWithPasskey = async () => {
    const result = await authenticateWithPasskey('employee', null, recaptchaToken);

    if (result.token) {
-      clearEdgeGatewayWorkspaceCache();
      localStorage.setItem('token', result.token);
      window.location.href = '/admin';
      return;
@@ -9,7 +9,6 @@ import { parseError, clearErrors, addError, getError } from "@/components/reques
 import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
 import { isPasskeySupported, authenticateWithPasskey } from "@/services/PasskeyAuthService.js";
 import TwoFactorVerify from "@/components/forms/auth/TwoFactorVerify.vue";
-import { clearEdgeGatewayWorkspaceCache } from "@/services/edgeGateways.js";

 const { t } = useI18n();

@@ -69,7 +68,6 @@ const login = async () => {
    }
    
    // Save the token in the local storage
-    clearEdgeGatewayWorkspaceCache();
    localStorage.setItem('token', data.token);
    // Set the success message
    successMessage.value = "Du er nu logget ind!"
@@ -105,7 +103,6 @@ const loginWithPasskey = async () => {
    const result = await authenticateWithPasskey('user', customerNum, recaptchaToken);
    console.log('Passkey authentication result:', result);
    if (result.token) {
-      clearEdgeGatewayWorkspaceCache();
      localStorage.setItem('token', result.token);
      successMessage.value = "Du er nu logget ind!";
      setTimeout(() => {
@@ -7,9 +7,7 @@ import { parseError, getError, addError, clearErrors } from "@/components/reques
 import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { isPasskeySupported, authenticateWithPasskey } from "@/services/PasskeyAuthService.js";
-import { getSubuserPasswordPolicyError } from "@/services/subuserPasswordPolicy.js";
 import TwoFactorVerify from "@/components/forms/auth/TwoFactorVerify.vue";
-import { clearEdgeGatewayWorkspaceCache } from "@/services/edgeGateways.js";

 const { t } = useI18n();

@@ -41,12 +39,6 @@ const twoFactorToken = ref('');

 const login = async () => {
  clearErrors();
-  const passwordPolicyError = getSubuserPasswordPolicyError(password.value);
-  if (passwordPolicyError) {
-    addError(passwordPolicyError, 'auth');
-    return;
-  }
-
  try {
    let requestBody = { password: password.value };
    
@@ -70,7 +62,6 @@ const login = async () => {
    
    // Save the session token
    if (data.session) {
-      clearEdgeGatewayWorkspaceCache();
      localStorage.setItem('token', data.session);
      localStorage.setItem('is_subuser', 'true');
      window.location.reload();
@@ -99,7 +90,6 @@ const loginWithPasskey = async () => {
    // Subuser login returns 'session' token, user login returns 'token'
    const sessionToken = result.session || result.token;
    if (sessionToken) {
-      clearEdgeGatewayWorkspaceCache();
      localStorage.setItem('token', sessionToken);
      localStorage.setItem('is_subuser', 'true');
      // Reload the page to update the UI
@@ -5,7 +5,6 @@ import { useI18n } from 'vue-i18n';
 import { verify2FA } from "@/services/TwoFactorAuthService.js";
 import { parseError, getError, clearErrors } from "@/components/request/HandleGlobalError.vue";
 import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
-import { clearEdgeGatewayWorkspaceCache } from "@/services/edgeGateways.js";

 const { t } = useI18n();
 const router = useRouter();
@@ -44,11 +43,9 @@ const verify = async () => {
    
    // Handle the response based on user type
    if (props.userType === 'subuser' && result.session) {
-      clearEdgeGatewayWorkspaceCache();
      localStorage.setItem('token', result.session);
      localStorage.setItem('is_subuser', 'true');
    } else if (result.token) {
-      clearEdgeGatewayWorkspaceCache();
      localStorage.setItem('token', result.token);
      localStorage.removeItem('is_subuser');
    }
@@ -441,23 +441,16 @@ const addProductWithAddonsToOrder = async (product_id) => {
      showCancelButton: true,
      confirmButtonText: 'Tilføj',
      showLoaderOnConfirm: true,
-      inputValidator: (note) => {
-        if (!String(note || '').trim()) {
-          return 'Note er påkrævet for dette produkt';
-        }
-        return null;
-      },
      preConfirm: (note) => {
-        const normalizedNote = String(note || '').trim();
        const confirmedOrderId = getValidOrderId();
        if (!confirmedOrderId) {
          Swal.showValidationMessage('Order ID is required');
          return false;
        }
        // Show the fake create order item
-        showFakeCreateOrderItem(product_id, 1, 0, 0, normalizedNote);
+        showFakeCreateOrderItem(product_id, 1, 0, 0, note);
        // Create the order item
-        return createOrderItem(confirmedOrderId, product_id, 1, 0, normalizedNote).then(async (result) => {
+        return createOrderItem(confirmedOrderId, product_id, 1, 0, note).then(async (result) => {
          let order_item_id = result.data.data.id;
          // Add the addons to the order
          await addAddonsToOrderMiddleware(product_id, 1, order_item_id, confirmedOrderId).then(() => {
@@ -217,44 +217,6 @@ const getVehicleReferenceValue = () => {
  return String(vehicleObject.value?.reference ?? "").trim();
 };

-const getVehicleStateKey = (vehicle) => {
-  if (!vehicle) {
-    return "";
-  }
-
-  return [
-    vehicle?.id ?? "",
-    normalizePlateValue(vehicle?.reg),
-    normalizeCustomerNumber(vehicle?.customer_id) ?? "",
-    vehicle?.type ?? "",
-    vehicle?.booking_id ?? "",
-    String(vehicle?.reference ?? "").trim(),
-  ].join("|");
-};
-
-const getBookingStateKey = (booking) => {
-  if (!booking) {
-    return "";
-  }
-
-  return [
-    booking?.id ?? "",
-    getBookingReg1Value(booking),
-    getBookingReg2Value(booking),
-    getBookingCustomerNumber(booking) ?? "",
-    String(booking?.reference_number ?? booking?.reference ?? "").trim(),
-    String(booking?.po ?? "").trim(),
-  ].join("|");
-};
-
-const getBookingMatchesStateKey = (matches) => {
-  if (!Array.isArray(matches) || matches.length === 0) {
-    return "";
-  }
-
-  return matches.map((booking) => getBookingStateKey(booking)).join("||");
-};
-
 const setVehicleObject = (emittedVehicleObject, options = {}) => {
  const normalizedOptions = {
    preserveManualReference: true,
@@ -262,26 +224,17 @@ const setVehicleObject = (emittedVehicleObject, options = {}) => {
    ...options,
  };

-  const emittedVehiclePlate = normalizePlateValue(emittedVehicleObject?.reg || reg_1.value);
+  vehicleObject.value = emittedVehicleObject;
+
+  const emittedVehiclePlate = normalizePlateValue(vehicleObject.value?.reg || reg_1.value);
  if (
    emittedVehiclePlate &&
    skippedDesktopBookingVehiclePlate.value === emittedVehiclePlate &&
-    !isBookingMarkedVehicle(emittedVehicleObject)
+    !isBookingMarkedVehicle(vehicleObject.value)
  ) {
    skippedDesktopBookingVehiclePlate.value = "";
  }

-  const currentVehicleKey = getVehicleStateKey(vehicleObject.value);
-  const nextVehicleKey = getVehicleStateKey(emittedVehicleObject);
-  if (currentVehicleKey === nextVehicleKey) {
-    if (normalizedOptions.nextSelectionSource) {
-      setSelectionSource(normalizedOptions.nextSelectionSource);
-    }
-    return;
-  }
-
-  vehicleObject.value = emittedVehicleObject;
-
  const matchedVehicleCustomerNumber = normalizeCustomerNumber(vehicleObject.value?.customer_id);
  const selectedCustomerNumber = normalizeCustomerNumber(customer_id.value);

@@ -321,10 +274,6 @@ const setBookingObject = (emittedBookingObject, options = {}) => {
    ...options,
  };

-  if (getBookingStateKey(bookingObject.value) === getBookingStateKey(emittedBookingObject)) {
-    return;
-  }
-
  bookingObject.value = emittedBookingObject;

  if (emittedBookingObject && emittedBookingObject.reference_number) {
@@ -335,12 +284,7 @@ const setBookingObject = (emittedBookingObject, options = {}) => {
 };

 const setBookingMatches = (emittedBookingMatches) => {
-  const nextBookingMatches = Array.isArray(emittedBookingMatches) ? emittedBookingMatches : [];
-  if (getBookingMatchesStateKey(bookingMatches.value) === getBookingMatchesStateKey(nextBookingMatches)) {
-    return;
-  }
-
-  bookingMatches.value = nextBookingMatches;
+  bookingMatches.value = Array.isArray(emittedBookingMatches) ? emittedBookingMatches : [];
 };

 const mergeBookingMatchDetails = (booking) => {
@@ -416,21 +416,6 @@ const shouldPreserveCustomerSelection = (plateValue) => {
 };

 let pendingVehicleCustomerLookup = null;
-const lastAutoSyncedVehicleKey = ref("");
-
-const getVehicleAutoSyncKey = (vehicle, plateOverride = null) => {
-  if (!vehicle) {
-    return "";
-  }
-
-  return [
-    resolveBookingPlate(vehicle, plateOverride),
-    vehicle?.id ?? "",
-    normalizeCustomerNumber(vehicle?.customer_id) ?? "",
-    normalizeCustomerNumber(customer_id.value) ?? "",
-  ].join("|");
-};
-
 const syncMatchedVehicleSelection = (vehicle, options = {}) => {
  const normalizedOptions = {
    plateOverride: null,
@@ -605,7 +590,6 @@ watch(reg_1, (newValue) => {
  // Define the search ID for this input change
  const search_id = register_new_search();
  console.log("reg_1 changed:", newValue);
-  lastAutoSyncedVehicleKey.value = "";
  const shouldKeepCustomerSelection = shouldPreserveCustomerSelection(newValue);
  selectedDropdownItem.value = -1;
  // Check if the new value is empty, if so, clear the vehicles_matching array
@@ -863,17 +847,11 @@ watch(vehicles_matching, (newValue) => {
  const currentValue = reg_1.value;
  const vehicle = newValue.find((vehicle) => vehicle.reg === currentValue);
  if (vehicle) {
-    const nextAutoSyncKey = getVehicleAutoSyncKey(vehicle, currentValue);
-    if (lastAutoSyncedVehicleKey.value !== nextAutoSyncKey) {
-      lastAutoSyncedVehicleKey.value = nextAutoSyncKey;
-      syncMatchedVehicleSelection(vehicle);
-    }
+    syncMatchedVehicleSelection(vehicle);
  } else if (getBookingMatchesForSelection(null, currentValue).length > 0) {
-    lastAutoSyncedVehicleKey.value = "";
    clearCustomerConflict();
    emitVehicleObject(null, currentValue);
  } else {
-    lastAutoSyncedVehicleKey.value = "";
    clearCustomerConflict();
  }
  // Check if the selectedDropdownItem index is valid
@@ -52,7 +52,6 @@ const customer_suggestions = ref([
 const isSettingCustomer = ref(false);
 const isSettingCustomerToInteger = ref(0);
 const isSettingCustomerStartTime = ref(null);
-let customerSuggestionsRequestId = 0;

 const isSettingCustomerTo = (customer_number) => {
  return isSettingCustomerToInteger.value === parseInt(customer_number);
@@ -89,17 +88,10 @@ const getCustomerSuggestions = () => {
  if (!props.reg_1) {
    return;
  }
-  const requestedReg1 = props.reg_1;
-  const requestId = ++customerSuggestionsRequestId;
-
  SessionUser.request("/department/vehicle/customer-suggestions", "GET", {
-    reg_1: requestedReg1,
+    reg_1: props.reg_1,
  })
    .then((response) => {
-      if (requestId !== customerSuggestionsRequestId || requestedReg1 !== props.reg_1) {
-        return;
-      }
-
      // Assuming the response contains an array of customer suggestions
      console.log("Customer suggestions:", response.data.data);
      let suggestions = [];
@@ -134,7 +126,6 @@ watch(
    if (newValue) {
      getCustomerSuggestions();
    } else {
-      customerSuggestionsRequestId += 1;
      customer_suggestions.value = [];
    }
  }
@@ -1,6 +1,5 @@
 <script setup>
-import { computed, nextTick, reactive, ref, watch } from "vue";
-import { useMediaQuery } from "@vueuse/core";
+import { computed, nextTick, reactive, ref } from "vue";
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
@@ -10,7 +9,6 @@ import {
  releaseRuntimeState,
 } from "@/services/releaseTimeline.js";
 import { submitErrorReport } from "@/services/errorReports.js";
-import { errorReportLaunchRequestId } from "@/services/errorReportLauncher.js";

 const route = useRoute();
 const { t } = useI18n({ useScope: "global" });
@@ -23,9 +21,6 @@ const FALLBACK_LABELS = {
  "error_report.before_error": "What were you doing before the error occurred?",
  "error_report.expected": "What did you expect would happen?",
  "error_report.actual": "What actually happened?",
-  "error_report.before_error_placeholder": "Describe the action you were taking, for example opening orders or selecting a customer.",
-  "error_report.expected_placeholder": "Describe the result you expected to see.",
-  "error_report.actual_placeholder": "Describe what you saw instead, including any error text.",
  "error_report.consent": "I accept that the current app screen, recent request errors, Vue errors, browser details, and my answers are collected for troubleshooting.",
  "error_report.submit": "Submit report",
  "error_report.submitted": "Error report submitted.",
@@ -51,12 +46,7 @@ const form = reactive({
  data_collection_accepted: false,
 });

-const isMobileReportPlacement = useMediaQuery("(max-width: 768px)");
-const isDesktopNavigationReportPlacement = useMediaQuery("(min-width: 1024px)");
 const isAuthenticated = computed(() => SessionUser.isInitiated() && SessionUser.authenticated.value);
-const shouldShowFloatingButton = computed(
-  () => !isMobileReportPlacement.value && !isDesktopNavigationReportPlacement.value
-);
 const isValid = computed(() => (
  form.before_error.trim().length > 0
  && form.expected.trim().length > 0
@@ -106,12 +96,6 @@ const open = () => {
  void loadHtml2Canvas().catch(() => {});
 };

-watch(errorReportLaunchRequestId, () => {
-  if (isAuthenticated.value) {
-    open();
-  }
-});
-
 const close = () => {
  if (isSubmitting.value) {
    return;
@@ -316,7 +300,6 @@ const submit = async () => {
 <template>
  <div v-if="isAuthenticated" data-error-report-exclude>
    <button
-      v-if="shouldShowFloatingButton"
      class="button is-danger error-report-button"
      type="button"
      data-testid="error-report-button"
@@ -334,7 +317,7 @@ const submit = async () => {
            <h2 class="title is-4">{{ tr("error_report.title") }}</h2>
            <p class="subtitle is-6">{{ tr("error_report.subtitle") }}</p>
          </div>
-          <button class="delete" type="button" :aria-label="t('common.close')" :disabled="isSubmitting" @click="close"></button>
+          <button class="delete" type="button" aria-label="close" :disabled="isSubmitting" @click="close"></button>
        </header>

        <div v-if="submitted" class="notification is-success is-light" data-testid="error-report-submitted">
@@ -349,35 +332,17 @@ const submit = async () => {

        <label class="field">
          <span class="label">{{ tr("error_report.before_error") }}</span>
-          <textarea
-            v-model="form.before_error"
-            class="textarea"
-            maxlength="4000"
-            :placeholder="tr('error_report.before_error_placeholder')"
-            required
-          ></textarea>
+          <textarea v-model="form.before_error" class="textarea" maxlength="4000" required></textarea>
        </label>

        <label class="field">
          <span class="label">{{ tr("error_report.expected") }}</span>
-          <textarea
-            v-model="form.expected"
-            class="textarea"
-            maxlength="4000"
-            :placeholder="tr('error_report.expected_placeholder')"
-            required
-          ></textarea>
+          <textarea v-model="form.expected" class="textarea" maxlength="4000" required></textarea>
        </label>

        <label class="field">
          <span class="label">{{ tr("error_report.actual") }}</span>
-          <textarea
-            v-model="form.actual"
-            class="textarea"
-            maxlength="4000"
-            :placeholder="tr('error_report.actual_placeholder')"
-            required
-          ></textarea>
+          <textarea v-model="form.actual" class="textarea" maxlength="4000" required></textarea>
        </label>

        <label class="checkbox error-report-consent">
@@ -118,7 +118,6 @@ const impersonatedUserRoleId = computed(() => {
 const canGrantMissingPermissions = computed(() =>
  hasSuperuserToken.value && !SessionUser.isSubuser.value && impersonatedUserRoleId.value !== null
 );
-const canInspectReleaseRuntime = computed(() => hasSuperuserToken.value || SessionUser.canAccessAdmin?.() === true);

 const userDetailRows = computed(() => {
  if (SessionUser.isSubuser.value) {
@@ -285,12 +284,7 @@ const resolvePingUrl = () => {
 };

 const activeApiUrl = computed(() => getReleaseRuntimeApiBaseUrl());
-const activeApiUrlLabel = computed(() =>
-  canInspectReleaseRuntime.value ? activeApiUrl.value : "Restricted to release operators"
-);
-const releaseSessionSummary = computed(() =>
-  buildReleaseSessionSummary(undefined, { includeInfrastructureDetails: canInspectReleaseRuntime.value })
-);
+const releaseSessionSummary = computed(() => buildReleaseSessionSummary());

 const measurePingLatency = async () => {
  if (typeof fetch !== "function") {
@@ -652,10 +646,9 @@ onBeforeUnmount(() => {
        </aside>

        <aside class="request-queue-progress__side request-queue-progress__side--runtime" data-testid="request-queue-runtime-box">
-          <template v-if="canInspectReleaseRuntime">
-            <div class="request-queue-progress__section-title">Session release</div>
-            <div class="request-queue-progress__section-content request-queue-progress__section-content--release">
-              <ul class="request-queue-progress__meta-list">
+          <div class="request-queue-progress__section-title">Session release</div>
+          <div class="request-queue-progress__section-content request-queue-progress__section-content--release">
+            <ul class="request-queue-progress__meta-list">
              <li class="request-queue-progress__meta-item">
                <span class="request-queue-progress__meta-label">Channel</span>
                <span
@@ -778,15 +771,11 @@ onBeforeUnmount(() => {
              </li>
            </ul>

-            </div>
-          </template>
-
-          <div class="request-queue-progress__section-title">Runtime details</div>
-          <div class="request-queue-progress__section-content request-queue-progress__section-content--release">
+            <div class="request-queue-progress__subsection-title">Runtime details</div>
            <ul class="request-queue-progress__meta-list">
              <li class="request-queue-progress__meta-item">
                <span class="request-queue-progress__meta-label">API URL</span>
-                <span class="request-queue-progress__meta-value" :title="activeApiUrlLabel">{{ activeApiUrlLabel }}</span>
+                <span class="request-queue-progress__meta-value" :title="activeApiUrl">{{ activeApiUrl }}</span>
              </li>
              <li class="request-queue-progress__meta-item">
                <span class="request-queue-progress__meta-label">Current host</span>
@@ -86,13 +86,6 @@ const menu_items = ref([
        children: [],
        hidden: false
      },
-      {
-        label: 'Chauffører',
-        value: '/subusers',
-        icon: 'fas fa-id-card',
-        children: [],
-        hidden: false
-      },
      {
        label: SessionUser.objects.roles.meta.title,
        value: SessionUser.objects.roles.meta.endpoint,
@@ -332,7 +332,6 @@ const items = computed<NavigationItemProps[]>(() => [
    type: "category",
    children: [
      { label: t("superuser.nav.employees"), to: "/superuser/users" },
-      { label: "Chauffører", to: "/superuser/subusers" },
      { label: t("superuser.nav.customers"), to: "/superuser/customers" },
      { label: t("superuser.nav.complaints"), to: "/superuser/complaints" },
      { label: t("superuser.nav.roles"), to: "/superuser/roles" },
@@ -3,80 +3,38 @@
 import { useRouter } from 'vue-router';
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import Swal from "sweetalert2";
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
-import { pingApiServer } from "@/services/apiHealth.js";
-
-const props = defineProps({
-  hasPermission: {
-    type: Boolean,
-    default: false,
-  },
-});
+import { ref } from 'vue';
+defineProps(['hasPermission']);
 const router = useRouter();

 const showDebugInfo = ref(false);
-const isSessionInitiated = computed(() => SessionUser.isInitiated());
-let sessionTimeout = null;

-const clearSessionTimeout = () => {
-  if (sessionTimeout) {
-    clearTimeout(sessionTimeout);
-    sessionTimeout = null;
-  }
-};
-
-const redirectToConnectivityIssue = () => {
-  if (typeof window === "undefined" || window.location.pathname === "/connectivity-issue") {
-    return;
-  }
-
-  window.location.href = "/connectivity-issue";
-};
-
-const handleSlowSessionBootstrap = async () => {
+// If the user is not initiated, and it takes more than 5 seconds, show an error message
+setTimeout(() => {
  if (!SessionUser.isInitiated()) {
-    const pingResult = await pingApiServer();
-    if (!pingResult.ok) {
-      redirectToConnectivityIssue();
-      return;
-    }
-
-    const result = await Swal.fire({
+    Swal.fire({
      title: 'Error',
      text: 'The user session could not be initiated.',
      icon: 'error',
      confirmButtonText: 'Clear session, and try again',
      showCancelButton: true,
      cancelButtonText: 'Retry',
-    });
-
-    if (result.isConfirmed) {
+    }).then(() => {
      SessionUser.auth.forceClearSession();
-      SessionUser.functions.redirectTo.pages.login();
-      return;
-    }
-
-    await SessionUser.initiateOnAppStart({ force: true });
+      window.location.reload();
+    });
  }
-};
-
-onMounted(() => {
-  sessionTimeout = setTimeout(() => {
-    void handleSlowSessionBootstrap();
-  }, 5000);
-});
-
-onBeforeUnmount(clearSessionTimeout);
+}, 5000);
 </script>

 <template>
  <div>
-    <div v-if="!isSessionInitiated">
+    <div v-if="!SessionUser.isInitiated()">
      <div class="pageloader is-active is-dark">
        <span class="title">Bekræfter bruger...</span>
      </div>
    </div>
-    <slot v-else-if="props.hasPermission" />
+    <slot v-if="hasPermission" />
    <div v-else>
      <div class="my-6">
        <h2 class="title is-2">403 Forbidden</h2>
@@ -118,4 +76,4 @@ onBeforeUnmount(clearSessionTimeout);

 <style scoped>

-</style>
+</style>
@@ -48,13 +48,10 @@ export const getDepartmentDescription = (id) => {

 export const getDepartmentsGuest = async (queryParams = {}) => {
  isLoading.value = true;
-  try {
-    const queryString = new URLSearchParams(queryParams).toString();
-    const request = await unauthenticatedRequest("/guest/departments" + (queryString ? `?${queryString}` : ""), "get");
-    departments.value = sortByDepartmentPriorityOrder(request.data.data || []);
-    return departments.value;
-  } finally {
-    isLoading.value = false;
-  }
+  const queryString = new URLSearchParams(queryParams).toString();
+  const request = await unauthenticatedRequest("/guest/departments" + (queryString ? `?${queryString}` : ""), "get");
+  departments.value = sortByDepartmentPriorityOrder(request.data.data || []);
+  isLoading.value = false;
+  return departments.value;
 };
 </script>
@@ -1,12 +1,11 @@
 <script>
-import { getCurrentScope, inject, onScopeDispose, provide, ref } from 'vue';
+import { ref, inject, provide } from 'vue';
 import axios from "axios";
 import {API_URL} from "@/config.js";
 import { parseError, clearErrors } from "@/components/request/HandleGlobalError.vue";
 import { exportRowsToExcel } from "@/services/TableExcelExportService.js";

 export const PaginatedListKey = Symbol('PaginatedList');
-const SEARCH_DEBOUNCE_MS = 250;

 /**
 * usePaginatedList composable
@@ -34,9 +33,6 @@ export function usePaginatedList() {

  /** The latest search */
  const latestSearch = ref(null);
-  const latestRequestId = ref(0);
-  let activeRequestController = null;
-  let searchDebounceTimeout = null;

  /** Additional query parameters */
  const additionalQueryParameters = ref({});
@@ -128,58 +124,24 @@ export function usePaginatedList() {
    return search === latestSearch.value;
  };

-  const clearPendingSearch = () => {
-    if (searchDebounceTimeout) {
-      clearTimeout(searchDebounceTimeout);
-      searchDebounceTimeout = null;
-    }
-  };
-
-  const abortActiveRequest = () => {
-    activeRequestController?.abort();
-    activeRequestController = null;
-  };
-
-  if (getCurrentScope()) {
-    onScopeDispose(() => {
-      clearPendingSearch();
-      abortActiveRequest();
-    });
-  }
-
-  const isCanceledRequest = (error) => {
-    return error?.code === "ERR_CANCELED"
-      || error?.name === "CanceledError"
-      || error?.name === "AbortError"
-      || (typeof axios.isCancel === "function" && axios.isCancel(error));
-  };
-
  /** The paginated get request */
  const paginatedGetRequest = async () => {
    // Set the latest search
    latestSearch.value = metaSearch.value;
    const tmp_search = metaSearch.value;
-    const requestId = latestRequestId.value + 1;
-    latestRequestId.value = requestId;
    const token = localStorage.getItem('token');
    if (!token) {
-      loadSwitch(false);
      return null;
    }

-    abortActiveRequest();
-    const requestController = typeof AbortController !== "undefined" ? new AbortController() : null;
-    activeRequestController = requestController;
-
    try {
      const response = await axios.get(API_URL + endpoint.value, {
        params: buildRequestParams(),
-        headers: buildRequestHeaders(token),
-        ...(requestController ? { signal: requestController.signal } : {}),
+        headers: buildRequestHeaders(token)
      });

      // Check if the search is the latest search
-      if (!isLatestSearch(tmp_search) || requestId !== latestRequestId.value) {
+      if (!isLatestSearch(tmp_search)) {
        return null;
      }

@@ -190,30 +152,22 @@ export function usePaginatedList() {
        response?.data?.meta?.pagination?.total || 0
      );
      meta.value = response?.data?.meta || null;
+      loadSwitch(false);
      setLastUpdated();
      return response;
    } catch (error) {
-      if (!isCanceledRequest(error)) {
-        parseError(error, 'paginatedGetRequest');
-        console.log(error);
-      }
+      parseError(error, 'paginatedGetRequest');
+      console.log(error);
+      loadSwitch(false);
      return null;
-    } finally {
-      if (activeRequestController === requestController) {
-        activeRequestController = null;
-      }
-      if (requestId === latestRequestId.value) {
-        loadSwitch(false);
-      }
    }
  };

  /** The load list function */
  const loadList = () => {
-    clearPendingSearch();
    loadSwitch(true);
    // clear the list
-    return paginatedGetRequest();
+    paginatedGetRequest();
  };

  /** Set the page */
@@ -300,17 +254,11 @@ export function usePaginatedList() {
  const search = (searchValue, autoLoad = true) => {
    // If the search is *, remove the search
    metaSearch.value = searchValue === '*' ? null : searchValue;
-    latestSearch.value = metaSearch.value;
    // Reset the page to 1
    setPage(1);
    // Load the list
    if (autoLoad) {
-      clearPendingSearch();
-      loadSwitch(true);
-      searchDebounceTimeout = setTimeout(() => {
-        searchDebounceTimeout = null;
-        paginatedGetRequest();
-      }, SEARCH_DEBOUNCE_MS);
+      loadList();
    }
  };

@@ -5,7 +5,6 @@ import {
  releaseChannelKey,
  releaseChannelOptions,
 } from "@/services/releaseChannelAvailability.js";
-import ReleaseFrontendVersionBadge from "@/components/release/ReleaseFrontendVersionBadge.vue";
 import { releaseRuntimeState } from "@/services/releaseTimeline.js";

 const props = defineProps({
@@ -158,10 +157,7 @@ const selectOption = (option) => {
    data-testid="release-channel-selector"
  >
    <div class="release-channel-selector__header">
-      <div class="release-channel-selector__header-main">
-        <p>{{ selectorTitle }}</p>
-        <ReleaseFrontendVersionBadge v-if="isSidebar" />
-      </div>
+      <p>{{ selectorTitle }}</p>
      <span v-if="selectorSubtitle">{{ selectorSubtitle }}</span>
    </div>

@@ -243,14 +239,6 @@ const selectOption = (option) => {
  margin-bottom: 10px;
 }

-.release-channel-selector__header-main {
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
 .release-channel-selector__header p {
  margin: 0;
  color: #10243f;
@@ -1,42 +1,21 @@
 <script setup>
-import { computed, inject, ref } from "vue";
+import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import ReleaseChannelSelector from "@/components/release/ReleaseChannelSelector.vue";
-import ReleaseUpdateWidget from "@/components/release/ReleaseUpdateWidget.vue";
 import {
-  clearSelectedReleaseChannel,
  releaseChannelSelectorVisible,
  switchSelectedReleaseChannel,
 } from "@/services/releaseChannelAvailability.js";
-import {
-  isReleaseSourceOverrideAvailable,
-  RELEASE_SOURCE_MODES,
-  setReleaseSourceOverride,
-} from "@/services/releaseBootstrap.js";
-import { inspectReleaseRuntimeForUpdate } from "@/services/releaseUpdate.js";
-import { releaseRuntimeState } from "@/services/releaseTimeline.js";

 const switchingSlug = ref("");
 const switchError = ref("");
 const { t, te } = useI18n({ useScope: "global" });
-const reloadWindow = inject("releaseSourceReload", () => {
-  if (typeof window !== "undefined") {
-    window.location.reload();
-  }
-});
 const tr = (key, fallback) => {
  const path = `configuration.release_manager.channel_selector.${key}`;
  return te(path) ? t(path) : fallback;
 };

-const showUseLocalFrontend = computed(
-  () =>
-    releaseChannelSelectorVisible.value &&
-    isReleaseSourceOverrideAvailable() &&
-    String(releaseRuntimeState.source || "").toLowerCase() !== RELEASE_SOURCE_MODES.LOCAL
-);
-
 const switchChannel = async (option) => {
  if (switchingSlug.value) {
    return;
@@ -46,84 +25,29 @@ const switchChannel = async (option) => {
  switchError.value = "";
  try {
    await switchSelectedReleaseChannel(option.channel, SessionUser.refreshReleaseRuntime);
-    void inspectReleaseRuntimeForUpdate(releaseRuntimeState, { autoDownload: true });
  } catch (error) {
    switchError.value = tr("switch_error", "Release channel could not be switched. The previous channel is still active.");
  } finally {
    switchingSlug.value = "";
  }
 };
-
-const useLocalFrontend = () => {
-  if (switchingSlug.value) {
-    return;
-  }
-
-  setReleaseSourceOverride(RELEASE_SOURCE_MODES.LOCAL);
-  clearSelectedReleaseChannel();
-  reloadWindow();
-};
 </script>

 <template>
-  <div class="release-channel-sidebar-selector">
+  <div v-if="releaseChannelSelectorVisible" class="release-channel-sidebar-selector">
    <ReleaseChannelSelector
-      v-if="releaseChannelSelectorVisible"
      variant="sidebar"
      :switching-slug="switchingSlug"
      :disabled="Boolean(switchingSlug)"
      @select="switchChannel"
    />
-    <button
-      v-if="showUseLocalFrontend"
-      type="button"
-      class="release-channel-sidebar-selector__local-button"
-      data-testid="release-channel-use-local-frontend"
-      :disabled="Boolean(switchingSlug)"
-      @click="useLocalFrontend"
-    >
-      <i class="fas fa-code" aria-hidden="true"></i>
-      <span>{{ tr("use_local_frontend", "Use local frontend") }}</span>
-    </button>
    <p v-if="switchError" class="release-channel-sidebar-selector__error" role="alert">
      {{ switchError }}
    </p>
-    <ReleaseUpdateWidget />
  </div>
 </template>

 <style scoped>
-.release-channel-sidebar-selector__local-button {
-  width: calc(100% - 32px);
-  min-width: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  margin: -2px 16px 14px;
-  padding: 9px 10px;
-  border: 1px solid #b8c7d9;
-  border-radius: 5px;
-  background: #f8fbff;
-  color: #153554;
-  cursor: pointer;
-  font-size: 0.82rem;
-  font-weight: 800;
-  line-height: 1.2;
-  text-align: center;
-  transition: border-color 0.18s ease, box-shadow 0.18s ease;
-}
-
-.release-channel-sidebar-selector__local-button:hover:not(:disabled) {
-  border-color: #6f8fb4;
-  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
-}
-
-.release-channel-sidebar-selector__local-button:disabled {
-  cursor: default;
-  opacity: 0.7;
-}
-
 .release-channel-sidebar-selector__error {
  margin: 0 16px 14px;
  color: #b42318;
@@ -1,115 +0,0 @@
-<script setup>
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-import {
-  isSameReleaseCommit,
-  releaseUpdateState,
-  shortReleaseCommit,
-} from "@/services/releaseUpdate.js";
-import { releaseRuntimeState } from "@/services/releaseTimeline.js";
-
-const { locale } = useI18n({ useScope: "global" });
-const textValue = (value) => String(value ?? "").trim();
-const githubAccess = (version) =>
-  version?.metadata?.github_access && typeof version.metadata.github_access === "object"
-    ? version.metadata.github_access
-    : {};
-const githubCommit = (version) => {
-  const access = githubAccess(version);
-  return version?.commit && typeof version.commit === "object"
-    ? version.commit
-    : access.commit || access.latest_commit || null;
-};
-const versionTimestamp = (version) => {
-  const commit = githubCommit(version);
-  return (
-    textValue(version?.deployed_at) ||
-    textValue(version?.released_at) ||
-    textValue(version?.promoted_at) ||
-    textValue(version?.created_at) ||
-    textValue(version?.commit_authored_at) ||
-    textValue(commit?.authored_at) ||
-    textValue(githubAccess(version)?.commit_authored_at)
-  );
-};
-const formatReleaseTime = (value) => {
-  const timestamp = textValue(value);
-  if (!timestamp) {
-    return "";
-  }
-  const parsed = new Date(timestamp);
-  if (Number.isNaN(parsed.getTime())) {
-    return timestamp;
-  }
-  return new Intl.DateTimeFormat(locale.value || undefined, {
-    dateStyle: "medium",
-    timeStyle: "short",
-  }).format(parsed);
-};
-
-const currentText = computed(() => shortReleaseCommit(releaseUpdateState.currentCommit));
-const latestText = computed(() => shortReleaseCommit(releaseUpdateState.latestCommit));
-const currentReleaseTime = computed(() =>
-  formatReleaseTime(versionTimestamp(releaseRuntimeState.versions?.frontend || null))
-);
-const hasLatestUpdate = computed(
-  () =>
-    Boolean(releaseUpdateState.latestCommit) &&
-    !isSameReleaseCommit(releaseUpdateState.currentCommit, releaseUpdateState.latestCommit)
-);
-const title = computed(() => {
-  const releaseTime = currentReleaseTime.value;
-  if (!hasLatestUpdate.value) {
-    return releaseTime ? `Frontend ${currentText.value} released ${releaseTime}` : `Frontend ${currentText.value}`;
-  }
-  return releaseTime
-    ? `Frontend ${currentText.value} released ${releaseTime} to ${latestText.value}`
-    : `Frontend ${currentText.value} to ${latestText.value}`;
-});
-</script>
-
-<template>
-  <span
-    class="release-frontend-version-badge"
-    :class="{ 'release-frontend-version-badge--update': hasLatestUpdate }"
-    :title="title"
-    data-testid="release-frontend-version-badge"
-  >
-    <span class="release-frontend-version-badge__commit">{{ currentText }}</span>
-    <template v-if="hasLatestUpdate">
-      <span class="release-frontend-version-badge__arrow">-&gt;</span>
-      <span class="release-frontend-version-badge__commit">{{ latestText }}</span>
-    </template>
-  </span>
-</template>
-
-<style scoped>
-.release-frontend-version-badge {
-  min-width: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: #64748b;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
-  font-size: 0.68rem;
-  font-weight: 700;
-  line-height: 1.2;
-  white-space: nowrap;
-}
-
-.release-frontend-version-badge__commit {
-  padding: 0;
-  color: #64748b;
-}
-
-.release-frontend-version-badge--update {
-  color: #64748b;
-}
-
-.release-frontend-version-badge__arrow {
-  color: #64748b;
-}
-</style>
@@ -1,9 +1,7 @@
 <script setup>
-import { computed } from "vue";
-
 const emit = defineEmits(["retry"]);

-const props = defineProps({
+defineProps({
  operation: {
    type: Object,
    default: null,
@@ -18,32 +16,6 @@ const statusClass = (status) => {
  if (["running", "queued", "pending"].includes(normalized)) return "is-info";
  return "is-light";
 };
-
-const shortCommit = (value) => {
-  const text = String(value || "").trim();
-  return text.length > 12 ? text.slice(0, 12) : text;
-};
-
-const operationContext = computed(() => props.operation?.context || {});
-const releaseGateContext = computed(() => operationContext.value.release_gate || {});
-const autoSyncEvent = computed(
-  () => operationContext.value.auto_sync_event || props.operation?.steps?.find((step) => step.context?.auto_sync_event)?.context?.auto_sync_event || null
-);
-const operationMeta = computed(() => {
-  const context = operationContext.value;
-  const gate = releaseGateContext.value;
-  const event = autoSyncEvent.value || {};
-  const rows = [
-    ["Source", context.source || event.source || (gate.auto_sync ? "release_gate" : "")],
-    ["App", props.operation?.app || context.app || gate.app || event.app],
-    ["Commit", shortCommit(context.commit_sha || gate.expected_commit || event.commit_sha)],
-    ["Auto-sync", event.status || (gate.auto_sync ? "requested" : "")],
-  ];
-
-  return rows
-    .filter(([, value]) => String(value || "").trim() !== "")
-    .map(([label, value]) => ({ label, value }));
-});
 </script>

 <template>
@@ -55,13 +27,6 @@ const operationMeta = computed(() => {
      <span>{{ operation?.warning_step_count || 0 }} warnings</span>
    </div>

-    <div v-if="operationMeta.length" class="release-operation-timeline__meta" data-testid="release-operation-meta">
-      <span v-for="item in operationMeta" :key="item.label">
-        <strong>{{ item.label }}</strong>
-        <span>{{ item.value }}</span>
-      </span>
-    </div>
-
    <ol class="release-operation-timeline__steps">
      <li
        v-for="step in operation?.steps || []"
@@ -107,7 +72,6 @@ const operationMeta = computed(() => {
 }

 .release-operation-timeline__status,
-.release-operation-timeline__meta,
 .release-operation-timeline__step-head,
 .release-operation-timeline__diagnostic,
 .release-operation-timeline__solution,
@@ -122,21 +86,6 @@ const operationMeta = computed(() => {
  justify-content: flex-start;
 }

-.release-operation-timeline__meta {
-  background: #f8fafc;
-  border: 1px solid #e2e8f0;
-  border-radius: 6px;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  padding: 0.55rem 0.65rem;
-}
-
-.release-operation-timeline__meta span {
-  align-items: center;
-  display: inline-flex;
-  gap: 0.35rem;
-}
-
 .release-operation-timeline__steps {
  display: grid;
  gap: 0.75rem;
@@ -1,232 +0,0 @@
-<script setup>
-import { computed, onBeforeUnmount, onMounted, watch } from "vue";
-import { releaseRuntimeState } from "@/services/releaseTimeline.js";
-import {
-  checkReleaseUpdateNow,
-  downloadReleaseCandidate,
-  inspectReleaseRuntimeForUpdate,
-  installReadyReleaseUpdate,
-  isSameReleaseCommit,
-  releaseUpdateState,
-  shortReleaseCommit,
-  startReleaseUpdateAutoCheck,
-} from "@/services/releaseUpdate.js";
-
-let stopAutoCheck = null;
-
-const updateAvailable = computed(
-  () =>
-    Boolean(releaseUpdateState.latestCommit) &&
-    !isSameReleaseCommit(releaseUpdateState.currentCommit, releaseUpdateState.latestCommit)
-);
-const isVisible = computed(
-  () => updateAvailable.value && ["downloading", "ready", "failed"].includes(releaseUpdateState.status)
-);
-const progress = computed(() => Math.max(0, Math.min(100, Number(releaseUpdateState.progress || 0))));
-const progressStyle = computed(() => ({ width: `${progress.value}%` }));
-const latestCommitText = computed(() => shortReleaseCommit(releaseUpdateState.latestCommit));
-const currentCommitText = computed(() => shortReleaseCommit(releaseUpdateState.currentCommit));
-const statusLabel = computed(() => {
-  if (releaseUpdateState.status === "ready") {
-    return "Ready";
-  }
-  if (releaseUpdateState.status === "failed") {
-    return "Failed";
-  }
-  return "Downloading";
-});
-const runtimeSignature = computed(() =>
-  JSON.stringify({
-    channel: releaseRuntimeState.channel?.slug || "",
-    commit: releaseRuntimeState.versions?.frontend?.commit_sha || releaseRuntimeState.versions?.frontend?.commit || "",
-    frontendBaseUrl: releaseRuntimeState.frontendBaseUrl || "",
-    configured: releaseRuntimeState.availability?.configured !== false,
-  })
-);
-const hasRuntimeCandidate = () =>
-  Boolean(releaseRuntimeState.channel || releaseRuntimeState.frontendBaseUrl || releaseRuntimeState.versions?.frontend);
-
-const inspectCurrentRuntime = () => {
-  if (!hasRuntimeCandidate()) {
-    return;
-  }
-  void inspectReleaseRuntimeForUpdate(releaseRuntimeState, { autoDownload: true });
-};
-
-const retryDownload = () => {
-  if (releaseUpdateState.candidate) {
-    void downloadReleaseCandidate(releaseUpdateState.candidate);
-    return;
-  }
-  void checkReleaseUpdateNow();
-};
-
-const installUpdate = () => {
-  void installReadyReleaseUpdate();
-};
-
-onMounted(() => {
-  stopAutoCheck = startReleaseUpdateAutoCheck();
-  inspectCurrentRuntime();
-});
-
-onBeforeUnmount(() => {
-  stopAutoCheck?.();
-  stopAutoCheck = null;
-});
-
-watch(runtimeSignature, inspectCurrentRuntime, { immediate: true });
-</script>
-
-<template>
-  <section v-if="isVisible" class="release-update-widget" data-testid="release-update-widget">
-    <div class="release-update-widget__topline">
-      <span class="release-update-widget__label">{{ statusLabel }}</span>
-      <span class="release-update-widget__commits">{{ currentCommitText }} -&gt; {{ latestCommitText }}</span>
-    </div>
-
-    <template v-if="releaseUpdateState.status === 'ready'">
-      <button
-        type="button"
-        class="release-update-widget__install"
-        data-testid="release-update-install"
-        @click="installUpdate"
-      >
-        Install
-      </button>
-    </template>
-
-    <template v-else-if="releaseUpdateState.status === 'failed'">
-      <div class="release-update-widget__failed">
-        <span>{{ releaseUpdateState.error || "Download failed." }}</span>
-        <button type="button" data-testid="release-update-retry" @click="retryDownload">Retry</button>
-      </div>
-    </template>
-
-    <template v-else>
-      <div
-        class="release-update-widget__progress"
-        role="progressbar"
-        :aria-valuenow="progress"
-        aria-valuemin="0"
-        aria-valuemax="100"
-        data-testid="release-update-progress"
-      >
-        <span :style="progressStyle"></span>
-      </div>
-      <div class="release-update-widget__progress-meta">
-        <span>{{ progress }}%</span>
-        <span v-if="releaseUpdateState.totalAssets">
-          {{ releaseUpdateState.downloadedAssets }}/{{ releaseUpdateState.totalAssets }}
-        </span>
-      </div>
-    </template>
-  </section>
-</template>
-
-<style scoped>
-.release-update-widget {
-  margin: -2px 16px 14px;
-  padding: 9px 10px;
-  border: 1px solid #d7e2ef;
-  border-radius: 5px;
-  background: #f8fbff;
-  color: #1f2937;
-}
-
-.release-update-widget__topline,
-.release-update-widget__progress-meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.release-update-widget__label {
-  color: #10243f;
-  font-size: 0.72rem;
-  font-weight: 800;
-  text-transform: uppercase;
-}
-
-.release-update-widget__commits {
-  min-width: 0;
-  overflow: hidden;
-  color: #475569;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
-  font-size: 0.68rem;
-  font-weight: 700;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.release-update-widget__progress {
-  height: 7px;
-  margin-top: 8px;
-  border-radius: 999px;
-  background: #dbe5f0;
-  overflow: hidden;
-}
-
-.release-update-widget__progress span {
-  display: block;
-  height: 100%;
-  border-radius: inherit;
-  background: #153554;
-  transition: width 0.18s ease;
-}
-
-.release-update-widget__progress-meta {
-  margin-top: 5px;
-  color: #64748b;
-  font-size: 0.68rem;
-  font-weight: 700;
-}
-
-.release-update-widget__install {
-  width: 100%;
-  min-height: 30px;
-  margin-top: 8px;
-  border: 0;
-  border-radius: 4px;
-  background: #153554;
-  color: #ffffff;
-  cursor: pointer;
-  font-size: 0.78rem;
-  font-weight: 800;
-}
-
-.release-update-widget__install:hover {
-  background: #10243f;
-}
-
-.release-update-widget__failed {
-  display: grid;
-  gap: 7px;
-  margin-top: 7px;
-}
-
-.release-update-widget__failed span {
-  color: #b42318;
-  font-size: 0.7rem;
-  font-weight: 700;
-  line-height: 1.25;
-}
-
-.release-update-widget__failed button {
-  min-height: 28px;
-  border: 1px solid #f4a3a3;
-  border-radius: 4px;
-  background: #fff5f5;
-  color: #9f1c1c;
-  cursor: pointer;
-  font-size: 0.74rem;
-  font-weight: 800;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .release-update-widget__progress span {
-    transition: none;
-  }
-}
-</style>
@@ -2,7 +2,6 @@
 import { ref } from 'vue'
 import axios from 'axios'
 import {API_URL} from "@/config.js";
-import { clearEdgeGatewayWorkspaceCache } from "@/services/edgeGateways.js";

 export const currentDepartment = ref(null);
 export const selectDepartment = (department) => {
@@ -32,7 +31,6 @@ export const exitSession = () => {
    }
  });

-  clearEdgeGatewayWorkspaceCache();
  localStorage.removeItem('token');
  return result;
 };
@@ -2,7 +2,6 @@
 import axios from 'axios'
 import { enqueueRequest } from "@/services/requestQueue.js";
 import { buildCurrentReleaseHeaders, resolveReleaseApiUrl } from "@/services/releaseTimeline.js";
-import { isTrustedReleaseUrl } from "@/services/releaseTrust.js";

 /**
 * Get the selected customer number for X-Customer-Number header (used by subusers)
@@ -19,24 +18,22 @@ export const authenticatedRequest = (url, method, data, catchCallable = null, th
    //throw new Error('No token was found, unable to make authenticated request');
  }
  
-  const requestUrl = resolveReleaseApiUrl(url);
-  const canSendCredentials = isTrustedReleaseUrl(requestUrl);
-
  // Build headers
  const headers = {
    ...buildCurrentReleaseHeaders(),
  };
-  if (canSendCredentials && token && token.length > 0) {
+  if (token && token.length > 0) {
    headers.Authorization = `Bearer ${token}`;
  }
  
  // Add X-Customer-Number header if subuser has selected a grant
  const isSubuser = localStorage.getItem('is_subuser') === 'true';
  const selectedCustomerNumber = getSelectedCustomerNumber();
-  if (canSendCredentials && isSubuser && selectedCustomerNumber) {
+  if (isSubuser && selectedCustomerNumber) {
    headers['X-Customer-Number'] = selectedCustomerNumber;
  }
  
+  const requestUrl = resolveReleaseApiUrl(url);
  return enqueueRequest(
    () => axios({
      method,
@@ -49,7 +49,6 @@ import { SubuserGrants } from "@/components/session/token/SessionUser/Objects/Su
 import { Subusers } from "@/components/session/token/SessionUser/Objects/Subusers.vue";
 import { configureReleaseRuntime } from "@/services/releaseTimeline.js";
 import { fetchReleaseRuntime } from "@/services/releaseBootstrap.js";
-import { pingApiServer } from "@/services/apiHealth.js";
 import { normalizeSessionPayload } from "@/services/sessionPayload.js";
 import {
  isReleaseChannelApiAvailabilityError,
@@ -58,12 +57,6 @@ import {
  releaseChannelRuntimeRequestParams,
  setReleaseChannelSwitchNoticePrincipal,
 } from "@/services/releaseChannelAvailability.js";
-import { clearCachedXlvaskUsageAmount } from "@/components/displays/department/pos/sync/xlvaskUsageAmountCache.js";
-import { clearEdgeGatewayWorkspaceCache } from "@/services/edgeGateways.js";
-import {
-  clearPeriodCache,
-  clearSelfWashCountsCache,
-} from "@/views/dashboards/superUserDashboard/InvoicingBillingPeriod/imports/InvoicingBillingPeriodImportPaging.js";

 const normalizePositiveInteger = (value) => {
  const parsedValue = Number.parseInt(String(value ?? ""), 10);
@@ -104,16 +97,7 @@ const hydrateSessionFromStorage = () => {
  return true;
 };

-const clearPrivilegedSessionCaches = () => {
-  clearPeriodCache();
-  clearSelfWashCountsCache();
-  clearCachedXlvaskUsageAmount();
-  clearEdgeGatewayWorkspaceCache();
-};
-
 const clearStoredSession = () => {
-  clearPrivilegedSessionCaches();
-
  if (typeof window === "undefined") {
    return;
  }
@@ -130,8 +114,7 @@ const applyReleaseRuntimeConfig = (runtime) => {
  const normalizedRuntime = runtime || {};
  configureReleaseRuntime(normalizedRuntime);
  reconcileSelectedReleaseChannel(normalizedRuntime);
-  const runtimeUrls =
-    normalizedRuntime.urls && typeof normalizedRuntime.urls === "object" ? normalizedRuntime.urls : {};
+  const runtimeUrls = normalizedRuntime.urls && typeof normalizedRuntime.urls === "object" ? normalizedRuntime.urls : {};
  SessionUser.runtimeConfig.release.traceId.value = normalizedRuntime.trace_id || null;
  SessionUser.runtimeConfig.release.channel.value = normalizedRuntime.channel || null;
  SessionUser.runtimeConfig.release.availableChannels.value =
@@ -250,92 +233,6 @@ const resetSessionState = () => {
  configureReleaseRuntime({});
 };

-let sessionBootstrapPromise = null;
-
-const extractErrorMessage = (error) => {
-  if (typeof error === "string") {
-    return error;
-  }
-
-  if (error?.response?.data?.data?.message) {
-    return error.response.data.data.message;
-  }
-
-  if (error?.response?.data?.message) {
-    return error.response.data.message;
-  }
-
-  if (typeof error?.response?.data === "string") {
-    return error.response.data;
-  }
-
-  if (error?.message) {
-    return error.message;
-  }
-
-  return "";
-};
-
-export const isInvalidSessionError = (error) => {
-  const status = Number.parseInt(String(error?.response?.status ?? ""), 10);
-  const message = extractErrorMessage(error).toLowerCase();
-
-  if (status === 401 || status === 419) {
-    return true;
-  }
-
-  if (![400, 403].includes(status)) {
-    return false;
-  }
-
-  return (
-    message.includes("invalid session") ||
-    message.includes("invalid token") ||
-    message.includes("unauthenticated") ||
-    message.includes("unauthorized")
-  );
-};
-
-const redirectToConnectivityIssue = () => {
-  if (typeof window === "undefined" || window.location.pathname === "/connectivity-issue") {
-    return false;
-  }
-
-  window.location.href = "/connectivity-issue";
-  return true;
-};
-
-export const handleSessionBootstrapFailure = async (error, { title, text } = {}) => {
-  if (isInvalidSessionError(error)) {
-    const pingResult = await pingApiServer();
-    if (!pingResult.ok) {
-      console.warn("Preserving stored session because API ping failed during invalid-session handling.", pingResult);
-      const redirected = redirectToConnectivityIssue();
-      return {
-        cleared: false,
-        apiReachable: false,
-        ping: pingResult,
-        redirectedTo: redirected ? "/connectivity-issue" : null,
-      };
-    }
-
-    forceClearSession();
-    SessionUser.functions.redirectTo.pages.login();
-    return { cleared: true, apiReachable: true, ping: pingResult, redirectedTo: "/login" };
-  }
-
-  parseError(error, "auth");
-  console.error(error);
-  await Swal.fire({
-    title,
-    text,
-    icon: "error",
-    confirmButtonText: "Ok",
-  });
-
-  return { cleared: false, apiReachable: null, ping: null, redirectedTo: null };
-};
-
 export const refreshSessionData = async () => {
  if (!hydrateSessionFromStorage()) {
    resetSessionState();
@@ -353,30 +250,12 @@ export const refreshSessionData = async () => {
 * Initiate the user session on app start
 * @returns {Promise<void>}
 */
-export const initiateOnAppStart = async ({ force = false } = {}) => {
-  if (sessionBootstrapPromise && !force) {
-    return await sessionBootstrapPromise;
-  }
-
-  const bootstrapPromise = (async () => {
-    if (!hydrateSessionFromStorage()) {
-      return null;
-    }
-
+export const initiateOnAppStart = async () => {
+  if (hydrateSessionFromStorage()) {
    if (SessionUser.isSubuser.value) {
-      return await getSubuserSessionData();
-    }
-
-    return await getSessionData();
-  })();
-
-  sessionBootstrapPromise = bootstrapPromise;
-
-  try {
-    return await bootstrapPromise;
-  } finally {
-    if (sessionBootstrapPromise === bootstrapPromise) {
-      sessionBootstrapPromise = null;
+      await getSubuserSessionData();
+    } else {
+      await getSessionData();
    }
  }
 };
@@ -393,7 +272,6 @@ export const authenticateUser = async (customer_number, password) => {
    password,
  })
    .then((response) => {
-      clearPrivilegedSessionCaches();
      SessionUser.token.value = response.data.token;
      SessionUser.authenticated.value = true;
      localStorage.setItem("token", response.data.token);
@@ -418,7 +296,7 @@ export const authenticateUser = async (customer_number, password) => {
 * @param {number} [credentials.phone] - Phone number (4-15 digits)
 * @param {number} [credentials.subuser_id] - Subuser ID
 * @param {string} [credentials.username] - Username
- * @param {string} credentials.password - Password (8-255 characters, uppercase, lowercase, and number)
+ * @param {string} credentials.password - Password (8-255 characters)
 * @returns {Promise<void>}
 */
 export const authenticateSubuser = async (credentials) => {
@@ -440,7 +318,6 @@ export const authenticateSubuser = async (credentials) => {

  return await authenticatedRequest("/subusers/auth/password", "POST", requestBody)
    .then((response) => {
-      clearPrivilegedSessionCaches();
      SessionUser.token.value = response.data.data.session;
      SessionUser.authenticated.value = true;
      SessionUser.isSubuser.value = true;
@@ -495,16 +372,23 @@ export const getSubuserSessionData = async () => {
      await refreshReleaseRuntime();
      SessionUser.initiated.value = true;
    })
-    .catch(async (error) => {
+    .catch((error) => {
      if (isReleaseChannelApiAvailabilityError(error)) {
        console.warn("Selected release channel API is unavailable during session bootstrap.", error);
        markReleaseChannelApiUnavailable();
        return;
      }

-      return await handleSessionBootstrapFailure(error, {
+      parseError(error, "auth");
+      console.error(error);
+      Swal.fire({
        title: "Fejl ved hentning af subbrugerdata",
        text: "Der opstod en fejl ved hentning af dine brugerdata. Prøv at logge ind igen.",
+        icon: "error",
+        confirmButtonText: "Ok",
+      }).then(() => {
+        SessionUser.auth.forceClearSession();
+        SessionUser.functions.redirectTo.pages.login();
      });
    });
 };
@@ -564,16 +448,23 @@ export const getSessionData = async () => {
      }
      SessionUser.initiated.value = true;
    })
-    .catch(async (error) => {
+    .catch((error) => {
      if (isReleaseChannelApiAvailabilityError(error)) {
        console.warn("Selected release channel API is unavailable during session bootstrap.", error);
        markReleaseChannelApiUnavailable();
        return;
      }

-      return await handleSessionBootstrapFailure(error, {
+      parseError(error, "auth");
+      console.error(error);
+      Swal.fire({
        title: "Fejl ved hentning af brugerdata",
        text: "Der opstod en fejl ved hentning af dine brugerdata. Prøv at logge ind igen.",
+        icon: "error",
+        confirmButtonText: "Ok",
+      }).then(() => {
+        SessionUser.auth.forceClearSession();
+        SessionUser.functions.redirectTo.pages.login();
      });
    });
 };
@@ -687,7 +578,6 @@ export const SessionUser = {
     * @param {number|null} customerNumber - The billing_customer_number to select, or null to clear
     */
    selectGrant: (customerNumber) => {
-      clearEdgeGatewayWorkspaceCache();
      if (customerNumber === null) {
        localStorage.removeItem("selected_customer_number");
        SessionUser.subuser.selectedGrantCustomerNumber.value = null;
@@ -905,7 +795,6 @@ export const SessionUser = {
   * @param {string} token
   */
  setToken: (token) => {
-    clearPrivilegedSessionCaches();
    SessionUser.token.value = token;
    localStorage.setItem("token", token);
    // Reload the window to make sure the user's session is initiated
@@ -49,7 +49,7 @@ const buildDepartmentOptions = (departments, selectedDepartmentId) => {
 const buildComplaintCategoryOptions = (selectedCategory) => {
  const normalizedSelectedCategory = String(selectedCategory ?? "").trim();
  const options = [
-    `<option value="">${escapeHtml("Vælg kategori")}</option>`,
+    `<option value="">${escapeHtml("Vaelg kategori")}</option>`,
    ...DEPARTMENT_DAILY_REPORT_COMPLAINT_CATEGORY_OPTIONS.map((category) => {
      const selected = category.value === normalizedSelectedCategory ? " selected" : "";
      return `<option value="${escapeHtml(category.value)}"${selected}>${escapeHtml(category.label)}</option>`;
@@ -236,7 +236,7 @@ const resolveComplaintCustomerNumberFromLookup = (lookupState) => {
    return lookupState.selectedCustomer.customer_number;
  }

-  throw new Error("Vælg en kunde fra listen eller ryd feltet.");
+  throw new Error("Vaelg en kunde fra listen eller ryd feltet.");
 };

 const setupComplaintCustomerLookupField = (lookupState) => {
@@ -521,28 +521,28 @@ export const DepartmentDailyReportComplaints = {
              10
            );
            if (!Number.isFinite(departmentId) || departmentId <= 0) {
-              throw new Error("Afdeling er påkrævet.");
+              throw new Error("Afdeling er paakraevet.");
            }

            const washDate = (
              document.getElementById("superuser-complaint-wash-date")?.value || ""
            ).trim();
            if (washDate === "") {
-              throw new Error("Dato for vask er påkrævet.");
+              throw new Error("Dato for vask er paakraevet.");
            }

            const category = (
              document.getElementById("superuser-complaint-category")?.value || ""
            ).trim();
            if (!isDepartmentDailyReportComplaintCategory(category)) {
-              throw new Error("Kategori er påkrævet.");
+              throw new Error("Kategori er paakraevet.");
            }

            const description = (
              document.getElementById("superuser-complaint-description")?.value || ""
            ).trim();
            if (description === "") {
-              throw new Error("Beskrivelse er påkrævet.");
+              throw new Error("Beskrivelse er paakraevet.");
            }

            const customerNumber = resolveComplaintCustomerNumberFromLookup(customerLookupState);
@@ -20,67 +20,6 @@
      return normalizedRelayId;
    };

-    const OPERATIONAL_STATUSES = ["AVAILABLE", "OCCUPIED", "RESERVED"];
-    const SELF_SERVE_CONFIGURATION_FIELDS = [
-      { field: "relay_in_id", label: "Indgangsrelæ" },
-      { field: "relay_out_id", label: "Udgangsrelæ" },
-      { field: "relay_machine_id", label: "Maskinrelæ" },
-      { field: "relay_machine_program_picker_id", label: "Programvælgerrelæ" },
-      { field: "relay_machine_cleaner_id", label: "Vaskerelæ" },
-      { field: "dynamic_image_id", label: "Maskinstatusbillede" },
-      { field: "machine_type_id", label: "Maskintype" },
-    ];
-
-    const hasConfiguredValue = (value) => {
-      if (value === null || value === undefined) {
-        return false;
-      }
-
-      if (typeof value === "string") {
-        const normalizedValue = value.trim().toLowerCase();
-        return normalizedValue !== "" && normalizedValue !== "0" && normalizedValue !== "null";
-      }
-
-      if (typeof value === "number") {
-        return value > 0;
-      }
-
-      return Boolean(value);
-    };
-
-    const getSelfServeConfigurationWarnings = (object) => {
-      if (Array.isArray(object?.dognvask_configuration_warnings)) {
-        return object.dognvask_configuration_warnings;
-      }
-
-      return SELF_SERVE_CONFIGURATION_FIELDS
-        .filter(({ field }) => !hasConfiguredValue(object?.[field]))
-        .map(({ field, label }) => ({
-          field,
-          label,
-          message: `${label} mangler`,
-        }));
-    };
-
-    const isSelfServeConfigured = (object) => {
-      if (typeof object?.dognvask_configured === "boolean") {
-        return object.dognvask_configured;
-      }
-      if (typeof object?.selfserve_configured === "boolean") {
-        return object.selfserve_configured;
-      }
-
-      return getSelfServeConfigurationWarnings(object).length === 0;
-    };
-
-    const isMachineStatusEnabled = (object) => {
-      if (typeof object?.machine_status_enabled === "boolean") {
-        return object.machine_status_enabled;
-      }
-
-      return OPERATIONAL_STATUSES.includes(String(object?.status ?? "").toUpperCase());
-    };
-
    /**
     * The Department Lanes object
     */
@@ -337,20 +276,6 @@
      },
      functions: {
        getDepartmentName: getDepartmentName,
-        getStatusToggles: async (departmentId) => {
-          return SessionUser.request('/department/lanes/status-toggles', 'GET', {
-            department_id: parseInt(departmentId)
-          });
-        },
-        setMachineStatusEnabled: async (laneId, enabled) => {
-          return SessionUser.request('/modules/self-serve/lane/status', 'PUT', {
-            lane_id: parseInt(laneId),
-            enabled: Boolean(enabled),
-          });
-        },
-        isMachineStatusEnabled,
-        isSelfServeConfigured,
-        getSelfServeConfigurationWarnings,
        isOperational: (object) => {
          return object.status === "AVAILABLE" || object.status === "OCCUPIED" || object.status === "RESERVED";
        },
@@ -7,13 +7,6 @@ import { getSystemUserIds } from "@/components/session/token/SessionUser/Objects
 // Helper function to get i18n translation
 const t = (key) => i18n.global.t(key);

-const escapeHtml = (value = "") => String(value)
-  .replaceAll("&", "&amp;")
-  .replaceAll("<", "&lt;")
-  .replaceAll(">", "&gt;")
-  .replaceAll("\"", "&quot;")
-  .replaceAll("'", "&#39;");
-
 const normalizeDateTimeLocalValue = (value) => {
  if (value === null || value === undefined || value === '') {
    return '';
@@ -772,11 +765,9 @@ export const ObjectsGlobal = {
          console.log(response);
          // How long are the list of options
          for (let i = 0; i < response.length; i++) {
-            const tmp = response[i];
-            const optionValue = tmp?.id ?? "";
-            const optionLabel = tmp?.name ? tmp.name : optionValue;
+            var tmp = response[i];
            console.log(tmp);
-            html += `<option value="${escapeHtml(optionValue)}" ${(value == optionValue || (value === null && optionValue === 0)) ? 'selected' : ''}>${escapeHtml(optionLabel)}</option>`;
+            html += `<option value="${tmp.id}" ${(value == tmp.id || (value === null && tmp.id === 0)) ? 'selected' : ''}>${tmp.name ? tmp.name : tmp.id}</option>`;
          }
        });
        html += `</select>
@@ -356,20 +356,6 @@ export const OrderBookings = {
          { safety_seal: normalizeCompletionSafetySeal(safetySeal) },
          onAfterComplete
      );
-    },
-    resendBookingConfirmation: async (id) => {
-      return SessionUser.request(
-          OrderBookings.meta.endpoint + "/booking-confirmation/resend",
-          "POST",
-          { id: parseInt(id, 10) }
-      ).then((response) => response.data.data);
-    },
-    resendBookingCompletionConfirmation: async (id) => {
-      return SessionUser.request(
-          OrderBookings.meta.endpoint + "/completion-confirmation/resend",
-          "POST",
-          { id: parseInt(id, 10) }
-      ).then((response) => response.data.data);
    }
  },
  /**
@@ -19,14 +19,6 @@ const getProtectedDeletePayload = (error) => {
  return payload;
 };

-const escapeHtml = (value) => String(value ?? "").replace(/[&<>"']/g, (character) => ({
-  "&": "&amp;",
-  "<": "&lt;",
-  ">": "&gt;",
-  "\"": "&quot;",
-  "'": "&#39;",
-})[character]);
-
 const formatDeleteProtectionReason = (reason) => {
  switch (reason) {
    case "completed":
@@ -36,23 +28,22 @@ const formatDeleteProtectionReason = (reason) => {
    case "attachments":
      return "ordren har vedhæftninger";
    default:
-      return escapeHtml(String(reason || "").replace(/_/g, " "));
+      return String(reason || "").replace(/_/g, " ");
  }
 };

 const showProtectedOrderDeleteConfirmation = async (id, protectionPayload, onAfterSubmit = null) => {
  const orderId = String(id);
-  const escapedOrderId = escapeHtml(orderId);
  const reasons = Array.isArray(protectionPayload?.protected_reasons)
    ? protectionPayload.protected_reasons.map(formatDeleteProtectionReason).filter(Boolean)
    : [];
  const reasonText = reasons.length > 0 ? reasons.join(", ") : "ordren indeholder gemte data";

  const result = await Swal.fire({
-    titleText: `Bekræft sletning af ordre #${orderId}`,
+    title: `Bekræft sletning af ordre #${orderId}`,
    html: `
      <p>Ordren kan stadig slettes, men kræver ekstra bekræftelse fordi ${reasonText}.</p>
-      <p>Skriv <strong>${escapedOrderId}</strong> for at slette ordren.</p>
+      <p>Skriv <strong>${orderId}</strong> for at slette ordren.</p>
    `,
    input: "text",
    inputAttributes: {
@@ -933,13 +924,6 @@ const assignDraftOrderCustomer = async ({
            console.error(error);
          });
        },
-        resendWashCertificate: async (id) => {
-          return SessionUser.request(
-              Orders.meta.endpoint + "/wash-certificate/resend",
-              "POST",
-              { id: parseInt(id, 10) }
-          ).then((response) => response.data.data);
-        },
        showAttachWashCertificateForm(order_id, onAfterSubmit = null) {
          const normalizedOrderId = Number.parseInt(order_id, 10);
          if (!Number.isInteger(normalizedOrderId) || normalizedOrderId <= 0) {
@@ -127,13 +127,6 @@ export const SelfServeVehicleConditions = {
    }
  },
  add: async (department, lane, customer_id, reg, question, value, options = {}) => {
-    const safeOptions = {};
-    const normalizedVehicleType = parseInt(options.vehicle_type ?? options.vehicle_type_id);
-
-    if (!Number.isNaN(normalizedVehicleType) && normalizedVehicleType > 0) {
-      safeOptions.vehicle_type = normalizedVehicleType;
-    }
-
    return ObjectsGlobal.add.object(SelfServeVehicleConditions.meta.endpoint, {
      department: parseInt(department),
      lane: parseInt(lane),
@@ -141,9 +134,7 @@ export const SelfServeVehicleConditions = {
      reg: reg,
      question: parseInt(question),
      value: value === "true" || value === true,
-      ...safeOptions,
-      activate_machine: false,
-      sync_relay_state: false
+      ...options
    });
  },
  set: {
@@ -9,16 +9,8 @@ const escapeHtml = (value) => String(value ?? "")
  .replace(/"/g, "&quot;")
  .replace(/'/g, "&#039;");

-const buildInviteFormHtml = (defaults = {}, options = {}) => `
+const buildInviteFormHtml = (defaults = {}) => `
  <div class="subuser-form">
-    ${options.includeCustomerNumber ? `
-      <div class="field">
-        <label class="label">Kundenummer</label>
-        <div class="control">
-          <input id="subuser-form-customer-number" class="input" type="number" inputmode="numeric" value="${escapeHtml(defaults.customer_number || defaults.customerNumber || "")}" placeholder="Kundens kundenummer" />
-        </div>
-      </div>
-    ` : ""}
    <div class="field">
      <label class="label">Navn</label>
      <div class="control">
@@ -49,17 +41,11 @@ const buildInviteFormHtml = (defaults = {}, options = {}) => `
  </div>
 `;

-const readInviteFormValues = (options = {}) => {
-  const customerNumberRaw = document.getElementById("subuser-form-customer-number")?.value?.trim() || "";
+const readInviteFormValues = () => {
  const name = document.getElementById("subuser-form-name")?.value?.trim() || "";
  const phoneCountryCodeRaw = document.getElementById("subuser-form-phone-country-code")?.value?.trim() || "";
  const phoneRaw = document.getElementById("subuser-form-phone")?.value?.trim() || "";

-  if (options.includeCustomerNumber && !/^\d+$/.test(customerNumberRaw)) {
-    Swal.showValidationMessage("Kundenummer skal udfyldes.");
-    return null;
-  }
-
  if (name.length < 3) {
    Swal.showValidationMessage("Navn skal være mindst 3 tegn.");
    return null;
@@ -76,7 +62,6 @@ const readInviteFormValues = (options = {}) => {
  }

  return {
-    ...(options.includeCustomerNumber ? { customer_number: Number.parseInt(customerNumberRaw, 10) } : {}),
    name,
    phone_country_code: Number.parseInt(phoneCountryCodeRaw, 10),
    phone: Number.parseInt(phoneRaw, 10),
@@ -106,17 +91,17 @@ const showInviteFeedback = async (response) => {
  });
 };

-const submitInviteForm = async ({ title, confirmButtonText, defaults = {}, endpoint, method, payloadBuilder, includeCustomerNumber = false }) => {
+const submitInviteForm = async ({ title, confirmButtonText, defaults = {}, endpoint, method, payloadBuilder }) => {
  const result = await Swal.fire({
    title,
-    html: buildInviteFormHtml(defaults, { includeCustomerNumber }),
+    html: buildInviteFormHtml(defaults),
    width: 640,
    focusConfirm: false,
    showCancelButton: true,
    confirmButtonText,
    cancelButtonText: "Annuller",
    preConfirm: async () => {
-      const values = readInviteFormValues({ includeCustomerNumber });
+      const values = readInviteFormValues();
      if (!values) {
        return false;
      }
@@ -157,15 +142,13 @@ export const Subusers = {

      return `${normalized.slice(0, 3).join(", ")} +${normalized.length - 3}`;
    },
-    async showInviteForm(refreshCallback = null, options = {}) {
-      const superuser = Boolean(options.superuser);
+    async showInviteForm(refreshCallback = null) {
      const response = await submitInviteForm({
        title: "Invitér chauffør",
        confirmButtonText: "Send invitation",
-        endpoint: superuser ? "/superuser/subusers/invite" : "/subusers/invite",
+        endpoint: "/subusers/invite",
        method: "POST",
        payloadBuilder: (values) => values,
-        includeCustomerNumber: superuser,
      });

      if (!response) {
@@ -179,14 +162,9 @@ export const Subusers = {

      return response;
    },
-    async resendInvite(subuser, refreshCallback = null, options = {}) {
-      const superuser = Boolean(options.superuser);
+    async resendInvite(subuser, refreshCallback = null) {
      try {
-        const response = await authenticatedRequest(
-          superuser ? "/superuser/subusers/invite/resend" : "/subusers/invite/resend",
-          "POST",
-          { id: subuser.id, ...(subuser.grant_id ? { grant_id: subuser.grant_id } : {}) }
-        );
+        const response = await authenticatedRequest("/subusers/invite/resend", "POST", { id: subuser.id });
        await showInviteFeedback(response);
        if (typeof refreshCallback === "function") {
          await refreshCallback();
@@ -17,15 +17,13 @@ const normalizeEntries = (entries) => {
  return [];
 };

-const SENSITIVE_WRITE_ONLY_KEYS = new Set(["broker_shared_secret"]);
-
 const toConfigPayload = (entries) => {
  const payload = {};
  normalizeEntries(entries).forEach((entry) => {
    if (!entry || !entry.variable) {
      return;
    }
-    payload[entry.variable] = SENSITIVE_WRITE_ONLY_KEYS.has(entry.variable) ? "" : entry.value;
+    payload[entry.variable] = entry.value;
  });
  return payload;
 };
@@ -44,11 +42,6 @@ export const Config = {
  test_broker: async (payload) => testEdgeGatewayBrokerConfig(payload),
  set: async (variable, value) => {
    const currentConfig = await Config.get_config();
-    SENSITIVE_WRITE_ONLY_KEYS.forEach((key) => {
-      if (key !== variable) {
-        delete currentConfig[key];
-      }
-    });
    return Config.set_config({
      ...currentConfig,
      [variable]: value,
@@ -80,6 +73,7 @@ export const Config = {
      set: async (value) => Config.set("broker_auth_mode", value),
    },
    broker_shared_secret: {
+      get: async () => Config.get("broker_shared_secret"),
      set: async (value) => Config.set("broker_shared_secret", value),
    },
  },
@@ -1,7 +1,6 @@
 <script>
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
 import { parseError } from "@/components/request/HandleGlobalError.vue";
-import { clearEdgeGatewayWorkspaceCache } from "@/services/edgeGateways.js";
 import { DatabaseSystemObject } from "@/components/session/token/superUser/systemDatabase.vue";
 import { Cron } from "@/components/session/token/superUser/cron.vue";
 import { Economic } from "@/components/session/token/superUser/modules/Economic/Economic.vue";
@@ -107,7 +106,6 @@ export const SuperUserObject = {
                const currentToken = localStorage.getItem("token");
                localStorage.setItem("superuser_token", currentToken);
                // Set the token in the local storage
-                clearEdgeGatewayWorkspaceCache();
                localStorage.setItem("token", response.data.data.token);
                // Redirect the user to the dashboard
                window.location = "/";
@@ -145,7 +143,6 @@ export const SuperUserObject = {
      // Get the superuser token
      const superuserToken = localStorage.getItem("superuser_token");
      // Set the token in the local storage
-      clearEdgeGatewayWorkspaceCache();
      localStorage.setItem("token", superuserToken);
      // Clear the superuser token
      localStorage.removeItem("superuser_token");
@@ -320,26 +320,20 @@ export const ensureCurrentOrderDepartment = async (targetDepartmentId = null) =>
  }

  try {
-    const currentDepartmentId = await getCurrentOrderDepartmentId(normalizedOrderId);
+    let currentDepartmentId = null;
+    try {
+      currentDepartmentId = await getCurrentOrderDepartmentId(normalizedOrderId);
+    } catch (error) {
+      currentDepartmentId = null;
+    }
    if (currentDepartmentId === normalizedDepartmentId) {
      department_id.value = normalizedDepartmentId;
      return true;
    }

-    parseError(
-      {
-        response: {
-          data: {
-            data: {
-              message: "Ordren tilhører ikke den valgte afdeling",
-            },
-            message: "Ordren tilhører ikke den valgte afdeling",
-          },
-        },
-      },
-      "stepError"
-    );
-    return false;
+    await SessionUser.objects.orders.set.department_id(normalizedOrderId, normalizedDepartmentId);
+    department_id.value = normalizedDepartmentId;
+    return true;
  } catch (error) {
    parseError(error, "stepError");
    return false;
@@ -513,63 +507,6 @@ export const clearStoredPosOrderId = () => {
  localStorage.removeItem("pos_order_id");
 };

-const hasActivePosOrderContext = () => {
-  return Boolean(
-    toPositiveInteger(order_id.value) ||
-      getSelectedCustomerNumber() ||
-      String(customer_name.value ?? "").trim() ||
-      (Array.isArray(order_items.value) && order_items.value.length > 0) ||
-      String(reference.value ?? "").trim() ||
-      String(order_notes.value ?? "").trim() ||
-      String(order_po.value ?? "").trim() ||
-      String(order_safety_seal.value ?? "").trim() ||
-      String(reg_1.value ?? "").trim() ||
-      String(reg_2.value ?? "").trim() ||
-      String(reg_3.value ?? "").trim() ||
-      invoiceCollectionId.value ||
-      completed_at.value ||
-      getStoredPosOrderId()
-  );
-};
-
-export const clearActivePosOrderContext = (options = {}) => {
-  const normalizedOptions = {
-    clearStep: false,
-    clearStoredOrderId: true,
-    ...options,
-  };
-  const hadActiveContext = hasActivePosOrderContext();
-
-  clearErrors();
-  if (normalizedOptions.clearStep) {
-    step.value = 1;
-  }
-  order_id.value = null;
-  clearSelectedCustomerState({ clearOrderNotes: true });
-  order_items.value = [];
-  user_discounts.value = [];
-  has_user_discounts_loaded.value = false;
-  scans.value = [];
-  scan_data.value = [];
-  invoiceCollectionId.value = null;
-  completed_at.value = null;
-  reference.value = "";
-  order_notes.value = "";
-  order_po.value = "";
-  order_safety_seal.value = "";
-  reg_1.value = "";
-  reg_2.value = "";
-  reg_3.value = "";
-  isCreatingOrder.value = false;
-  createOrderRequest = null;
-  clearSelectedOrderBookingSelection();
-  if (normalizedOptions.clearStoredOrderId) {
-    clearStoredPosOrderId();
-  }
-
-  return hadActiveContext;
-};
-
 const SELECTED_ORDER_BOOKING_ID_STORAGE_KEY = "pos_selected_order_booking_id";
 const SELECTED_ORDER_BOOKING_PLATE_STORAGE_KEY = "pos_selected_order_booking_plate";
 const SELECTED_ORDER_BOOKING_SKIPPED_PLATE_STORAGE_KEY = "pos_selected_order_booking_skipped_plate";
@@ -733,9 +670,9 @@ export const restoreStoredPosOrderId = async (
    if (selectedDepartmentId && toPositiveInteger(storedOrder?.department_id) !== selectedDepartmentId) {
      if (options.syncDepartment === true) {
        order_id.value = storedOrderId;
-        const isCurrentDepartment = await ensureCurrentOrderDepartment(selectedDepartmentId);
-        if (!isCurrentDepartment) {
-          throw new Error("Stored order department does not match current department");
+        const didSyncDepartment = await ensureCurrentOrderDepartment(selectedDepartmentId);
+        if (!didSyncDepartment) {
+          throw new Error("Stored order department could not be changed to current department");
        }
      } else {
        throw new Error("Stored order department does not match current department");
@@ -755,7 +692,26 @@ export const restoreStoredPosOrderId = async (

 export const reset_all_values = () => {
  // Reset all values to their initial state
-  clearActivePosOrderContext({ clearStep: true });
+  clearErrors();
+  step.value = 1;
+  order_id.value = null;
+  clearCustomerSelection();
+  clearCache();
+  user_discounts.value = [];
+  has_user_discounts_loaded.value = false;
+  scans.value = [];
+  scan_data.value = [];
+  invoiceCollectionId.value = null;
+  completed_at.value = null;
+  reference.value = "";
+  order_notes.value = "";
+  order_po.value = "";
+  order_safety_seal.value = "";
+  isCreatingOrder.value = false;
+  createOrderRequest = null;
+  clearSelectedOrderBookingSelection();
+  // Clear the order id from the local storage (if present)
+  clearStoredPosOrderId();
  // Clear the query parameters
  window.history.pushState({}, "", `?step=1`);
 };
@@ -1194,7 +1150,6 @@ export const selectScan = (scan) => {
 };

 const cached_customer_names = [];
-const activeCustomerSelectionRequests = new Map();

 /** Get the customer's name */
 export const getCustomerName = async (customerNumber) => {
@@ -1223,62 +1178,23 @@ export const getCustomerName = async (customerNumber) => {

 /** Search, then select customer by customer number */
 export const searchAndSelectCustomer = async (customerNumber, options = {}) => {
-  const normalizedOptions = {
-    forceRefresh: false,
-    ...options,
-  };
-  const normalizedCustomerNumber = resolveCustomerNumber(customerNumber);
-  if (!normalizedCustomerNumber) {
-    return null;
-  }
-
-  const selectedCustomerNumber = getSelectedCustomerNumber();
-  const hasSelectedCustomerData =
-    customer_data.value &&
-    typeof customer_data.value === "object" &&
-    !Array.isArray(customer_data.value) &&
-    Object.keys(customer_data.value).length > 0;
-
-  if (
-    !normalizedOptions.forceRefresh &&
-    selectedCustomerNumber === normalizedCustomerNumber &&
-    hasSelectedCustomerData
-  ) {
-    return customer_data.value;
-  }
-
-  if (!normalizedOptions.forceRefresh && activeCustomerSelectionRequests.has(normalizedCustomerNumber)) {
-    return await activeCustomerSelectionRequests.get(normalizedCustomerNumber);
-  }
-
  // Get the customer data
-  const request = authenticatedRequest(`/users/customer?customer_number=${normalizedCustomerNumber}`, "GET")
+  return await authenticatedRequest(`/users/customer?customer_number=${customerNumber}`, "GET")
    .then((response) => {
      console.log(response);
      const responseData = response?.data?.data ?? {};
      const rawEconomicCustomer = responseData.economic_customer ?? null;
      const normalizedCustomer = normalizeCustomerRecord(rawEconomicCustomer, {
        ...responseData,
-        customerNumber: resolveCustomerNumber(rawEconomicCustomer) ?? normalizedCustomerNumber,
+        customerNumber: resolveCustomerNumber(rawEconomicCustomer) ?? resolveCustomerNumber(customerNumber),
      });
-      selectCustomer(normalizedCustomer, normalizedOptions);
+      selectCustomer(normalizedCustomer, options);
      return normalizedCustomer;
    })
    .catch((error) => {
      console.error(error);
      return null;
-    })
-    .finally(() => {
-      if (activeCustomerSelectionRequests.get(normalizedCustomerNumber) === request) {
-        activeCustomerSelectionRequests.delete(normalizedCustomerNumber);
-      }
    });
-
-  if (!normalizedOptions.forceRefresh) {
-    activeCustomerSelectionRequests.set(normalizedCustomerNumber, request);
-  }
-
-  return await request;
 };

 /** Get order items */
@@ -2018,14 +1934,18 @@ export const getVehiclePlateBookings = (vehiclePlate) => {
  return sortPendingOrderBookings(matchingBookings);
 };

-export const ensureVehiclePlateBookingsLoaded = async (vehiclePlate, _options = {}) => {
+export const ensureVehiclePlateBookingsLoaded = async (vehiclePlate, options = {}) => {
+  const normalizedOptions = {
+    force: false,
+    ...options,
+  };
  const normalizedVehiclePlate = normalizeVehiclePlateForBookingSelection(vehiclePlate);
  const currentDepartmentKey = syncPendingBookingsDepartmentState();
  if (!normalizedVehiclePlate || !department_id.value) {
    return [];
  }

-  if (loadedPendingBookingPlates.has(normalizedVehiclePlate)) {
+  if (!normalizedOptions.force && loadedPendingBookingPlates.has(normalizedVehiclePlate)) {
    return getVehiclePlateBookings(normalizedVehiclePlate);
  }

@@ -2169,7 +2089,7 @@ const getFirstAvailableWashProduct = async () => {
  }
 };

-export const hydrateSelectedOrderBookingForDesktop = async () => {
+const hydrateSelectedOrderBookingForDesktop = async () => {
  const normalizedOrderId = toPositiveInteger(order_id.value);
  const normalizedBookingId = toPositiveInteger(selectedOrderBookingId.value);

@@ -2252,7 +2172,8 @@ export const hydrateSelectedOrderBookingForDesktop = async () => {
      }
    }

-    const forcedPrimaryPrice = primaryProduct.price ?? null;
+    const forcedPrimaryPrice =
+      typeof primaryRawItem?.price === "number" ? Number(primaryRawItem.price) : primaryProduct.price ?? null;
    const primaryItemResponse = await createOrderItem(
      normalizedOrderId,
      primaryProduct.id,
@@ -2270,15 +2191,13 @@ export const hydrateSelectedOrderBookingForDesktop = async () => {
        continue;
      }

-      const secondaryProduct = await fetchOrderBookingProductWithPricing(secondaryProductId);
-
      await createOrderItem(
        normalizedOrderId,
        secondaryProductId,
        Math.max(1, Number.parseInt(String(bookingItem?.quantity ?? 1), 10) || 1),
        relatedPrimaryItemId,
        String(bookingItem?.notes ?? "").trim() || null,
-        secondaryProduct?.price ?? null
+        typeof bookingItem?.price === "number" ? Number(bookingItem.price) : null
      );
    }

@@ -26,7 +26,7 @@ const pages = {
    to: "/user/wash/start",
    label: "Selv vask",
    icon: "tint",
-    disabled: false,
+    disabled: !IS_DEV,
  },
  bookings: {
    to: "/user/bookings",
@@ -7,9 +7,7 @@ import SubuserGrantSelector from "@/components/session/subuser/SubuserGrantSelec
 import { IS_DEV } from '@/config.js';
 import SessionUser from "@/components/session/token/SessionUser.vue";
 import { useRoute } from "vue-router";
-import { computed } from "vue";
 const route = useRoute();
-const isAuthenticatedSessionReady = computed(() => SessionUser.isInitiated() && SessionUser.authenticated.value);
 </script>

 <template>
@@ -64,13 +62,13 @@ const isAuthenticatedSessionReady = computed(() => SessionUser.isInitiated() &&
              <span>{{ $t('header.return_to_account') }}</span>
            </router-link>
          </template>
-          <router-link class="button is-white" to="/user/profile" v-if="isAuthenticatedSessionReady">
+          <router-link class="button is-white" to="/user/profile" v-if="SessionUser.authenticated.value">
            <span class="icon">
              <i class="fas fa-user-circle" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
            </span>
-            <span :class="{'has-text-black': !IS_DEV, 'has-text-red': IS_DEV}">{{ isAuthenticatedSessionReady ? SessionUser.getName() : ''}}</span>
+            <span :class="{'has-text-black': !IS_DEV, 'has-text-red': IS_DEV}">{{ SessionUser.authenticated.value ? SessionUser.getName() : ''}}</span>
          </router-link>
-          <template v-if="!SessionUser.authenticated.value">
+          <template v-else>
            <router-link class="button is-white" to="/register">
              <span class="icon">
                <i class="fas fa-user-plus" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useRoute } from "vue-router";
-import { useI18n } from "vue-i18n";
 import { BIcon, BMenu, BMenuItem, BMenuList, BTooltip } from "buefy";
 import type { NavigationItemProps } from "@/components/models/navigation/NavigationItem.vue";
 import { useNavigationItems } from "@/components/models/navigation/items/NavigationMenuItems.vue";
@@ -12,7 +11,6 @@ import LanguageSelector from "@/components/i18n/LanguageSelector.vue";
 import ReleaseChannelSidebarSelector from "@/components/release/ReleaseChannelSidebarSelector.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import NavigationMenuGlobalSearch from "@/components/viewport/page/headers/menu/NavigationMenuGlobalSearch.vue";
-import { requestOpenErrorReport } from "@/services/errorReportLauncher.js";

 type NavigationMenuItem = NavigationItemProps & {
  priority_order?: number | null;
@@ -21,17 +19,9 @@ type NavigationMenuItem = NavigationItemProps & {
 type NavigationBadge = NonNullable<NavigationMenuItem["badge"]>;

 const route = useRoute();
-const { t } = useI18n({ useScope: "global" });
 const { parsedItems, parsedItemsGlobal } = useNavigationItems();
-const ERROR_REPORT_BUTTON_FALLBACK = "Report error";

 const isMatchingRoute = (item: NavigationMenuItem) => item.to === route.path;
-const isAuthenticated = computed(() => SessionUser.isInitiated() && SessionUser.authenticated.value);
-const shouldShowErrorReportAction = computed(() => !isSmall.value && isAuthenticated.value);
-const errorReportButtonLabel = computed(() => {
-  const label = t("error_report.button");
-  return label === "error_report.button" ? ERROR_REPORT_BUTTON_FALLBACK : label;
-});

 const navigationItems = computed<NavigationMenuItem[]>(() => {
  const items = [...parsedItems(), ...parsedItemsGlobal()] as NavigationMenuItem[];
@@ -464,39 +454,10 @@ const getChildBadgeTestId = (item: NavigationMenuItem) => (isDraftsNavigationChi
    </BMenu>
    <LanguageSelector />
    <ReleaseChannelSidebarSelector />
-    <div v-if="shouldShowErrorReportAction" class="desktop-buefy-error-report-action">
-      <button
-        class="button is-text desktop-buefy-error-report-button"
-        type="button"
-        data-testid="error-report-button"
-        @click="requestOpenErrorReport"
-      >
-        <span class="icon is-small"><i class="fas fa-bug" aria-hidden="true"></i></span>
-        <span>{{ errorReportButtonLabel }}</span>
-      </button>
-    </div>
  </div>
 </template>

 <style scoped>
-.desktop-buefy-error-report-action {
-  padding: 0 16px 14px;
-}
-
-.desktop-buefy-error-report-button {
-  width: 100%;
-  justify-content: flex-start;
-  color: #172033;
-  text-decoration: none;
-}
-
-.button.desktop-buefy-error-report-button:hover,
-.button.desktop-buefy-error-report-button:focus-visible {
-  background: rgba(180, 35, 24, 0.08);
-  color: #b42318;
-  text-decoration: none;
-}
-
 .desktop-buefy-item-label,
 .desktop-buefy-child-label {
  display: flex;
@@ -13,7 +13,6 @@ const showProfile = computed(() => {
  const path = route.path;
  return path.startsWith("/user");
 });
-const isAuthenticatedSessionReady = computed(() => SessionUser.isInitiated() && SessionUser.authenticated.value);


 </script>
@@ -24,7 +23,7 @@ const isAuthenticatedSessionReady = computed(() => SessionUser.isInitiated() &&
  <nav class="navbar is-link is-mobile is-fixed-top mobile-header-section" role="navigation" aria-label="main navigation" :class="{'is-blurred': isTransparent}">
    <div class="navbar-item" v-if="showProfile">
      <!-- Profile -->
-      <router-link class="button is-white py-0" to="/user/profile" v-if="isAuthenticatedSessionReady">
+      <router-link class="button is-white py-0" to="/user/profile" v-if="SessionUser.authenticated.value">
              <span class="icon is-large">
                <i class="fas fa-user-circle fa-2x"
                   :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
@@ -46,7 +45,7 @@ const isAuthenticatedSessionReady = computed(() => SessionUser.isInitiated() &&
      <NavigationMenuDepartment/>
    </div>
    <!-- Subuser Grant Selection -->
-    <div class="navbar-item" v-if="isAuthenticatedSessionReady && SessionUser.isSubuser.value && showProfile">
+    <div class="navbar-item" v-if="SessionUser.isSubuser.value && showProfile">
      <SubuserGrantSelector :showLabel="false" :compact="true" />
    </div>
    <div class="navbar-end" style="margin-left: auto;" v-show="!SessionUser.canAccessAdmin()">
@@ -1,31 +1,12 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
 import { toggleExpanded, isOpen } from '@/components/viewport/page/headers/ViewportHeaderSettings.vue';
 import NavigationMenuItems from "@/components/viewport/page/headers/menu/NavigationMenuItems.vue";
 import SessionUser from "@/components/session/token/SessionUser.vue";
 import DesktopNavigationBuefy from "@/components/viewport/page/headers/DesktopNavigationBuefy.vue";
-import { requestOpenErrorReport } from "@/services/errorReportLauncher.js";
-
-const { t } = useI18n({ useScope: "global" });
 const VITE_BUILD_DATE = import.meta.env.VITE_BUILD_DATE || 'No build date';
 const VITE_COMMIT_HASH = import.meta.env.VITE_COMMIT_HASH || 'No commit hash';
 const VITE_APP_VERSION = import.meta.env.VITE_APP_VERSION || 'No app version';
 const VITE_IS_DEV = import.meta.env.DEV || false;
-const ERROR_REPORT_BUTTON_FALLBACK = "Report error";
-
-const isAuthenticated = computed(() => SessionUser.isInitiated() && SessionUser.authenticated.value);
-const errorReportButtonLabel = computed(() => {
-  const label = t("error_report.button");
-  return label === "error_report.button" ? ERROR_REPORT_BUTTON_FALLBACK : label;
-});
-
-const openErrorReport = () => {
-  if (isOpen.value) {
-    toggleExpanded();
-  }
-  requestOpenErrorReport();
-};

 /**
 * Scrollable menu for mobile viewports.
@@ -84,23 +65,12 @@ const openErrorReport = () => {
          <NavigationMenuItems />
        </div>
        <!-- Bottom version info -->
-        <div class="has-text-centered" style="padding: 16px; font-size: 12px; color: gray;" data-testid="mobile-build-info">
+        <div class="has-text-centered" style="padding: 16px; font-size: 12px; color: gray;">
          <!--<div>Version: {{ VITE_APP_VERSION }}</div>-->
          <div>Commit: {{ VITE_COMMIT_HASH }}</div>
          <div>Build Date: {{ SessionUser.functions.date.toLocal(VITE_BUILD_DATE) }}</div>
          <div v-if="VITE_IS_DEV" style="color: red;">Development Mode</div>
        </div>
-        <div v-if="isAuthenticated" class="mobile-error-report-action">
-          <button
-            class="button is-danger mobile-error-report-button"
-            type="button"
-            data-testid="error-report-button"
-            @click="openErrorReport"
-          >
-            <span class="icon is-small"><i class="fas fa-bug" aria-hidden="true"></i></span>
-            <span>{{ errorReportButtonLabel }}</span>
-          </button>
-        </div>
      </div>
    </div>

@@ -141,12 +111,6 @@ const openErrorReport = () => {
 .mobile-menu-open .mobile-menu-spacer {
  flex: 1;
 }
-.mobile-error-report-action {
-  padding: 0 16px 16px;
-}
-.mobile-error-report-button {
-  width: 100%;
-}
 .mobile-menu-open .text {
  /* Menu */
  margin: 0 auto;
@@ -180,4 +144,4 @@ const openErrorReport = () => {
  /* Prevent click-through */
  pointer-events: auto;
 }
-</style>
+</style>
@@ -6,9 +6,7 @@ import CollectedInvoiceQueueMonitor from "@/components/viewport/page/headers/men
 import { IS_DEV } from '@/config.js';
 import SessionUser from "@/components/session/token/SessionUser.vue";
 import { useRoute } from "vue-router";
-import { computed } from "vue";
 const route = useRoute();
-const isAuthenticatedSessionReady = computed(() => SessionUser.isInitiated() && SessionUser.authenticated.value);
 </script>

 <template>
@@ -64,13 +62,13 @@ const isAuthenticatedSessionReady = computed(() => SessionUser.isInitiated() &&
              <span>{{ $t('header.return_to_account') }}</span>
            </router-link>
          </template>
-          <router-link class="button is-white" to="/user/profile" v-if="isAuthenticatedSessionReady">
+          <router-link class="button is-white" to="/user/profile" v-if="SessionUser.authenticated.value">
            <span class="icon">
              <i class="fas fa-user-circle" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
            </span>
-            <span :class="{'has-text-black': !IS_DEV, 'has-text-red': IS_DEV}">{{ isAuthenticatedSessionReady ? SessionUser.getName() : ''}}</span>
+            <span :class="{'has-text-black': !IS_DEV, 'has-text-red': IS_DEV}">{{ SessionUser.authenticated.value ? SessionUser.getName() : ''}}</span>
          </router-link>
-          <template v-if="!SessionUser.authenticated.value">
+          <template v-else>
            <router-link class="button is-white" to="/register">
              <span class="icon">
                <i class="fas fa-user-plus" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
@@ -64,7 +64,6 @@ export const useOrderMetadataAutosave = ({

    const requestedValue = normalizeValue(draft.value);
    const sequence = ++nextSequence;
-    let saveCompleted = false;
    isSaving.value = true;

    try {
@@ -84,8 +83,6 @@ export const useOrderMetadataAutosave = ({
        await onSaved(savedValue, requestedValue);
      }

-      saveCompleted = true;
-
      return true;
    } catch (error) {
      if (typeof onError === "function") {
@@ -98,11 +95,12 @@ export const useOrderMetadataAutosave = ({
    } finally {
      isSaving.value = false;

-      const shouldSaveAgain = saveAgainAfterCurrentRequest;
-      saveAgainAfterCurrentRequest = false;
+      if (saveAgainAfterCurrentRequest || isDirty.value) {
+        saveAgainAfterCurrentRequest = false;

-      if (saveCompleted && (shouldSaveAgain || isDirty.value) && isDirty.value) {
-        void persist();
+        if (isDirty.value) {
+          void persist();
+        }
      }
    }
  };
@@ -1,6 +1,5 @@
 import { computed, ref } from "vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
-import { safeAttachmentDownloadLink } from "@/services/attachmentDownloadLinks.js";

 const normalizeBooleanAnswer = (value) => {
  if (value === true || value === false) {
@@ -107,42 +106,12 @@ const sortByOrderPriority = (list) => [...list].sort((a, b) => {
  return parseInt(a?.id ?? 0) - parseInt(b?.id ?? 0);
 });

-const mergeStableQuestionOrder = (previousIds, incomingIds) => {
-  const normalizedIncomingIds = [];
-  const seenIncomingIds = new Set();
-  incomingIds.forEach((id) => {
-    if (seenIncomingIds.has(id)) {
-      return;
-    }
-
-    seenIncomingIds.add(id);
-    normalizedIncomingIds.push(id);
-  });
-
-  if (normalizedIncomingIds.length === 0 || !Array.isArray(previousIds) || previousIds.length === 0) {
-    return normalizedIncomingIds;
-  }
-
-  const incomingIdSet = new Set(normalizedIncomingIds);
-  const nextIds = previousIds.filter((id) => incomingIdSet.has(id));
-  const nextIdSet = new Set(nextIds);
-
-  normalizedIncomingIds.forEach((id) => {
-    if (!nextIdSet.has(id)) {
-      nextIds.push(id);
-      nextIdSet.add(id);
-    }
-  });
-
-  return nextIds;
-};
-
 const normalizePositiveInt = (value) => {
  const parsed = parseInt(value);
  return !Number.isNaN(parsed) && parsed > 0 ? parsed : null;
 };

-const extractErrorMessage = (error, fallback = "Kunne ikke hente selvvaskdata. Prøv igen.") => {
+const extractErrorMessage = (error, fallback = "Kunne ikke hente selvvaskdata. Prov igen.") => {
  const candidates = [
    error?.response?.data?.data?.message,
    error?.response?.data?.message,
@@ -297,30 +266,6 @@ export function useSelfServeLogic() {
  const summaryVisibleQuestionIds = ref([]);
  const summaryQuestionOrder = ref({});
  const latestFetchRequestId = ref(0);
-  const latestSuccessfulFetchKey = ref(null);
-  const inFlightFetchKey = ref(null);
-
-  const createFetchKey = (departmentId, vehicleTypeId, laneId, reg) => {
-    const normalizedDepartmentId = parseInt(departmentId);
-    const normalizedLaneId = parseInt(laneId);
-    const normalizedReg = String(reg || "").trim().toUpperCase();
-    const normalizedVehicleTypeId = parseInt(vehicleTypeId);
-    const vehicleTypeKey = !Number.isNaN(normalizedVehicleTypeId) && normalizedVehicleTypeId > 0
-      ? normalizedVehicleTypeId
-      : "";
-
-    if (
-      Number.isNaN(normalizedDepartmentId)
-      || normalizedDepartmentId <= 0
-      || Number.isNaN(normalizedLaneId)
-      || normalizedLaneId <= 0
-      || normalizedReg.length < 2
-    ) {
-      return null;
-    }
-
-    return [normalizedDepartmentId, normalizedLaneId, normalizedReg, vehicleTypeKey].join("|");
-  };

  const beginFetchRequest = () => {
    latestFetchRequestId.value += 1;
@@ -337,10 +282,9 @@ export function useSelfServeLogic() {
    const normalizedIds = (Array.isArray(questionList) ? questionList : [])
      .map((question) => parseInt(question?.id ?? 0))
      .filter((id) => id > 0);
-    const orderedIds = mergeStableQuestionOrder(summaryVisibleQuestionIds.value, normalizedIds);

-    summaryVisibleQuestionIds.value = orderedIds;
-    summaryQuestionOrder.value = orderedIds.reduce((accumulator, id, index) => {
+    summaryVisibleQuestionIds.value = normalizedIds;
+    summaryQuestionOrder.value = normalizedIds.reduce((accumulator, id, index) => {
      accumulator[id] = index;
      return accumulator;
    }, {});
@@ -551,7 +495,7 @@ export function useSelfServeLogic() {
  };

  const downloadAttachment = async (taskId, attachmentId, attachment = null) => {
-    const existingDownloadLink = safeAttachmentDownloadLink(attachment?.download_link);
+    const existingDownloadLink = attachment?.download_link || null;
    if (existingDownloadLink) {
      window.open(existingDownloadLink, "_blank", "noopener");
      return;
@@ -559,9 +503,10 @@ export function useSelfServeLogic() {

    try {
      const response = await SessionUser.objects.self_serve_tasks.attachments.download(taskId, attachmentId);
-      const downloadLink = safeAttachmentDownloadLink(response?.data?.download_link || response?.download_link);
-      if (downloadLink) {
-        window.open(downloadLink, "_blank", "noopener");
+      if (response?.data?.download_link) {
+        window.open(response.data.download_link, "_blank", "noopener");
+      } else if (response?.download_link) {
+        window.open(response.download_link, "_blank", "noopener");
      }
    } catch (error) {
      console.error("Error downloading attachment:", error);
@@ -589,7 +534,7 @@ export function useSelfServeLogic() {
    } catch (error) {
      console.error("Error fetching self-serve summary:", error);
      if (isFetchRequestActive(requestId)) {
-        requestError.value = extractErrorMessage(error, "Kunne ikke hente vaskestatus. Prøv igen.");
+        requestError.value = extractErrorMessage(error, "Kunne ikke hente vaskestatus. Prov igen.");
      }
      return null;
    } finally {
@@ -599,17 +544,10 @@ export function useSelfServeLogic() {
    }
  };

-  const fetchSelfServeData = async (_departmentId, _vehicleTypeId, laneId = null, reg = null, options = {}) => {
-    const fetchKey = createFetchKey(_departmentId, _vehicleTypeId, laneId, reg);
-    if (!options.force && fetchKey && (fetchKey === latestSuccessfulFetchKey.value || fetchKey === inFlightFetchKey.value)) {
-      return null;
-    }
-
+  const fetchSelfServeData = async (_departmentId, _vehicleTypeId, laneId = null, reg = null) => {
    const requestId = beginFetchRequest();

    if (!laneId || !reg || reg.trim().length < 2) {
-      latestSuccessfulFetchKey.value = null;
-      inFlightFetchKey.value = null;
      preview.value = null;
      summary.value = null;
      session.value = null;
@@ -637,7 +575,6 @@ export function useSelfServeLogic() {

    loading.value = true;
    requestError.value = null;
-    inFlightFetchKey.value = fetchKey;
    try {
      const normalizedReg = reg.trim().toUpperCase();
      const normalizedVehicleTypeId = parseInt(_vehicleTypeId);
@@ -719,10 +656,6 @@ export function useSelfServeLogic() {
        setSummaryVisibleQuestions(questions.value);
      }

-      if (isFetchRequestActive(requestId)) {
-        latestSuccessfulFetchKey.value = fetchKey;
-      }
-
      return previewData;
    } catch (error) {
      console.error("Error fetching self-serve preview:", error);
@@ -731,9 +664,6 @@ export function useSelfServeLogic() {
      }
      return null;
    } finally {
-      if (inFlightFetchKey.value === fetchKey) {
-        inFlightFetchKey.value = null;
-      }
      if (isFetchRequestActive(requestId)) {
        loading.value = false;
      }
@@ -788,7 +718,7 @@ export function useSelfServeLogic() {
        updateResolvedVehicleTypeId(responseSummary, responseSummary?.session);
      }

-      await fetchSelfServeData(departmentId, refreshVehicleTypeId, laneId, normalizedReg, { force: true });
+      await fetchSelfServeData(departmentId, refreshVehicleTypeId, laneId, normalizedReg);
      answers.value = {
        ...answers.value,
        [parseInt(questionId)]: value,
@@ -796,7 +726,7 @@ export function useSelfServeLogic() {
      return payload;
    } catch (error) {
      console.error("Error synchronizing vehicle answer:", error);
-      requestError.value = extractErrorMessage(error, "Kunne ikke gemme svaret. Prøv igen.");
+      requestError.value = extractErrorMessage(error, "Kunne ikke gemme svaret. Prov igen.");
      throw error;
    } finally {
      loading.value = false;
@@ -853,12 +783,12 @@ export function useSelfServeLogic() {
        ? normalizedRefreshVehicleTypeId
        : null;

-      await fetchSelfServeData(departmentId, refreshVehicleTypeId, parseInt(laneId), normalizedReg, { force: true });
+      await fetchSelfServeData(departmentId, refreshVehicleTypeId, parseInt(laneId), normalizedReg);

      return { deletedCount: conditionIdsToDelete.length };
    } catch (error) {
      console.error("Error clearing self-serve answers:", error);
-      requestError.value = extractErrorMessage(error, "Kunne ikke nulstille svar. Prøv igen.");
+      requestError.value = extractErrorMessage(error, "Kunne ikke nulstille svar. Prov igen.");
      throw error;
    } finally {
      loading.value = false;
@@ -1034,7 +964,7 @@ export function useSelfServeLogic() {
      });
      const successValue = response?.data?.success ?? response?.success;
      if (successValue === false) {
-        throw new Error(extractErrorMessage(response, "Kunne ikke opdatere vaskebanens tjenester. Prøv igen."));
+        throw new Error(extractErrorMessage(response, "Kunne ikke opdatere vaskebanens tjenester. Prov igen."));
      }

      const responsePayload = response?.data?.data ?? response?.data ?? response ?? {};
@@ -1046,7 +976,7 @@ export function useSelfServeLogic() {
      return response;
    } catch (error) {
      console.error("Error updating lane allowed services:", error);
-      requestError.value = extractErrorMessage(error, "Kunne ikke opdatere vaskebanens tjenester. Prøv igen.");
+      requestError.value = extractErrorMessage(error, "Kunne ikke opdatere vaskebanens tjenester. Prov igen.");
      if (!allowedServicesKnown.value) {
        allowedServices.value = activeTaskServices.value;
      }
@@ -1066,7 +996,7 @@ export function useSelfServeLogic() {
      return await SessionUser.request('/modules/self-serve/lane/relay/machine/enable', 'post', payload);
    } catch (error) {
      console.error("Error enabling machine relay:", error);
-      requestError.value = extractErrorMessage(error, "Kunne ikke starte maskinen. Prøv igen.");
+      requestError.value = extractErrorMessage(error, "Kunne ikke starte maskinen. Prov igen.");
      throw error;
    }
  };
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jeppe Bundgaard	fac731ae19	Support prefixed beta frontend deployment	2026-05-27 14:33:44 +02:00
Jeppe Bundgaard	2f2beb774a	Preserve release commit in Coolify frontend builds	2026-05-27 14:04:02 +02:00
Jeppe Bundgaard	a98dc061da	Prepare beta frontend release gates	2026-05-27 13:03:55 +02:00