From 7c9eb8b644135e873b282f231bb3dc8c09c6c67c Mon Sep 17 00:00:00 2001
From: Jeppe B <2jepp9350@gmail.com>
Date: Sun, 16 Aug 2026 08:58:06 +0200
Subject: [PATCH] =?UTF-8?q?chore(release):=20merge=20develop=20into=20mast?=
 =?UTF-8?q?er=20=E2=80=94=20XL=20Vask=20integration=20fixes=20(Aug=2015=20?=
 =?UTF-8?q?2026)=20(#312)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Brings all of the develop branch's commits into master.

## What this contains

The 9 commits on develop that landed in this round — all XL Vask-related
UI fixes plus the 'visible primary-button hover state' visual-diff:

- **PR #303** (TRU-5 / AUT-1) — style(AUT-1): visible primary-button
hover state + visual diff
- **PR #304** (TRU-10 / AUT-6) — fix(invoicing-period): propagate
flagged wash start date to Selvvask view
- **PR #305** (TRU-12 / AUT-8) — feat(xlvask): render friendly notice
for 404 from /modules/xlvask/services/usage/orders
- **PR #306** (TRU-9 / AUT-5) — i18n(test): lock in xlvask_review /
xlvask_usage_log mirroring to the global v2 fallback
- **PR #307** (TRU-13 / AUT-9) — i18n(xlvask_review): translate missing
keys for no, sv, de, en
- **PR #308** (TRU-15 / AUT-11) — test(e2e): add Playwright smoke test
for XL Vask flag → Selvvash navigation
- **PR #309** (TRU-11 / AUT-7) — feat(TRU-11): propagate department
selector to Selvvask usage query
- **PR #310** (TRU-19 / AUT-15) — test(TRU-19): lock self-serve program
number range + button registry contract
- **PR #311** (TRU-8 / AUT-4) — fix(invoicing-flag-list): explain empty
XL Vask hover preview when flag context has no metadata

## Why

The XL Vask integration bug surfaced from the user-reported message "XL
Vask-registreringen er hverken ignoreret eller knyttet til en ordre i
den valgte periode. doesn't show the wash." After dispatching 9
diagnostic + fix tasks and merging all 9 PRs into develop via the
OpenSymphony orchestrator running against MiniMax M3, this PR is the
canonical release to bring develop's accumulated changes into master.

No new code in this PR — just the squash-merged output of the 9 source
PRs combined into a single develop→master merge.

## Verification

All 9 source PRs passed:
- Required CI (Action Runners)
- App Store Readiness
- Quality lint/i18n/build/unit/e2e suites

The required checks on this PR will run the same gate.

## Notes

- The api repo has its own equivalent PR/merge — see CHANGELOG for that
side.

---------

Co-authored-by: Jeppe <jeppe@copenhagentruckwash.io>
Co-authored-by: openhands <openhands@all-hands.dev>
---
 scripts/aut-1-capture-hover-preview.mjs       | 142 +++++++++++++++
 scripts/run-playwright-full-slice.mjs         |   1 +
 src/assets/main.css                           |  27 +++
 .../DepartmentPos/XLVaskUsagePagination.vue   |  47 ++++-
 src/components/pagination/paginatedList.vue   |  18 +-
 src/i18n/generated/da-v2.json                 |   3 +-
 src/i18n/generated/de-v2.json                 |   5 +-
 src/i18n/generated/en-v2.json                 |   3 +-
 src/i18n/generated/global-v2.json             |   4 +-
 src/i18n/generated/no-v2.json                 |   5 +-
 src/i18n/generated/sv-v2.json                 |   5 +-
 .../invoicing_period/xlvask_review.json       |   3 +-
 .../phrases/compat/invoice_period/flags.json  |   2 +-
 .../invoicing_period/xlvask_review.json       |   3 +-
 .../invoicing_period/xlvask_review.json       |   3 +-
 .../global/shared/invoice_period/flags.json   |   1 +
 .../invoicing_period/xlvask_review.json       |   3 +-
 .../phrases/compat/invoice_period/flags.json  |   2 +-
 .../invoicing_period/xlvask_review.json       |   3 +-
 .../phrases/compat/invoice_period/flags.json  |   2 +-
 .../invoicing_period/xlvask_review.json       |   3 +-
 .../modules/Pos/DepartmentPosSync.vue         |   2 +-
 .../components/InvoicingPeriodFlagList.vue    |  21 ++-
 .../InvoicingBillingPeriodViewSelfWash.vue    |  20 +-
 tests/e2e/i18n-v2-integrity.spec.ts           |  45 +++++
 ...xlvask-flag-to-selvvash-navigation.spec.ts | 172 ++++++++++++++++++
 .../unit/i18n-xlvask-review-coverage.spec.js  |  59 ++++++
 tests/unit/invoicing-period-flag-list.spec.js |  83 ++++++++-
 tests/unit/self-serve-dynamic-image.spec.js   |  59 ++++++
 tests/unit/superuser-invoices-view.spec.js    |  28 ++-
 .../xlvask-usage-department-filter.spec.js    |  53 ++++++
 .../unit/xlvask-usage-pagination-404.spec.js  |  91 +++++++++
 tests/visual-previews/AUT-1/desktop-after.png | Bin 0 -> 11836 bytes
 .../visual-previews/AUT-1/desktop-before.png  | Bin 0 -> 11442 bytes
 tests/visual-previews/AUT-1/mobile-after.png  | Bin 0 -> 11972 bytes
 tests/visual-previews/AUT-1/mobile-before.png | Bin 0 -> 11626 bytes
 tests/visual-previews/AUT-1/preview.html      |  63 +++++++
 37 files changed, 946 insertions(+), 35 deletions(-)
 create mode 100644 scripts/aut-1-capture-hover-preview.mjs
 create mode 100644 tests/e2e/xlvask-flag-to-selvvash-navigation.spec.ts
 create mode 100644 tests/unit/i18n-xlvask-review-coverage.spec.js
 create mode 100644 tests/unit/xlvask-usage-department-filter.spec.js
 create mode 100644 tests/unit/xlvask-usage-pagination-404.spec.js
 create mode 100644 tests/visual-previews/AUT-1/desktop-after.png
 create mode 100644 tests/visual-previews/AUT-1/desktop-before.png
 create mode 100644 tests/visual-previews/AUT-1/mobile-after.png
 create mode 100644 tests/visual-previews/AUT-1/mobile-before.png
 create mode 100644 tests/visual-previews/AUT-1/preview.html

diff --git a/scripts/aut-1-capture-hover-preview.mjs b/scripts/aut-1-capture-hover-preview.mjs
new file mode 100644
index 00000000..2404b0fb
--- /dev/null
+++ b/scripts/aut-1-capture-hover-preview.mjs
@@ -0,0 +1,142 @@
+#!/usr/bin/env node
+// AUT-1 smoke run — capture the before/after visual diff for the
+// `primary-button hover state` change in `src/assets/main.css`.
+//
+// Renders tests/visual-previews/AUT-1/preview.html in a real Chromium
+// against the project's bundled Bulma stylesheet, then takes two
+// screenshots:
+//
+//   desktop-before.png — Bulma defaults, button idle (no hover effect).
+//   desktop-after.png  — With the AUT-1 CSS rules applied, button
+//                        hovered (lift + brightness shift visible).
+//   mobile-before.png  — Same as desktop-before, captured at the
+//                        Pixel 5 viewport.
+//   mobile-after.png   — Same as desktop-after, captured at the
+//                        Pixel 5 viewport.
+//
+// Output is written to tests/visual-previews/AUT-1/. The script is
+// idempotent: existing files are overwritten, not appended to.
+//
+// Invoke with: `node scripts/aut-1-capture-hover-preview.mjs`
+// (Chromium must already be installed via `npm run test:e2e:install`.)
+
+import { chromium } from "playwright";
+import { promises as fs } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { dirname } from "node:path";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const REPO_ROOT = path.resolve(__dirname, "..");
+const PREVIEW_HTML = path.join(
+  REPO_ROOT,
+  "tests/visual-previews/AUT-1/preview.html",
+);
+const OUTPUT_DIR = path.join(REPO_ROOT, "tests/visual-previews/AUT-1");
+
+// The AUT-1 hover rules — kept in lockstep with the diff in
+// src/assets/main.css. We inject these via a <style> tag on the
+// "after" pass and leave them off for the "before" pass so the
+// screenshots show the same Bulma theme but with vs without the new
+// hover effect.
+const AUT1_HOVER_CSS = `
+.button.is-primary {
+  transition:
+    filter 0.15s ease,
+    transform 0.15s ease;
+}
+.button.is-primary:hover,
+.button.is-primary.is-hovered {
+  filter: brightness(1.08);
+  transform: translateY(-1px);
+}
+.button.is-primary:active,
+.button.is-primary.is-active {
+  filter: brightness(0.95);
+  transform: translateY(0);
+}
+.button.is-primary:focus-visible {
+  filter: brightness(1.04);
+  transform: translateY(-1px);
+}
+`;
+
+async function captureVariant({ browser, viewport, label, withHoverCss, hover }) {
+  const context = await browser.newContext({
+    viewport,
+    deviceScaleFactor: 2,
+  });
+  const page = await context.newPage();
+  await page.goto(pathToFileUrl(PREVIEW_HTML));
+  if (withHoverCss) {
+    await page.addStyleTag({ content: AUT1_HOVER_CSS });
+  }
+  const target = page.locator(
+    hover
+      ? '[data-testid="primary-button-hover"]'
+      : '[data-testid="primary-button-idle"]',
+  );
+  const stage = page.locator(
+    hover ? "#stage-hover" : "#stage-idle",
+  );
+  if (hover) {
+    await target.hover();
+    // Wait for the 0.15s transition to settle.
+    await page.waitForTimeout(220);
+  }
+  const filename = `${label}-${withHoverCss ? "after" : "before"}.png`;
+  const destination = path.join(OUTPUT_DIR, filename);
+  await stage.screenshot({ path: destination, type: "png" });
+  await context.close();
+  return destination;
+}
+
+function pathToFileUrl(filePath) {
+  // Playwright's `file://` URLs need absolute paths. On POSIX this is
+  // straightforward; on Windows this helper keeps the script cross-platform
+  // should it ever run there.
+  const absolute = path.resolve(filePath);
+  return absolute.startsWith("/") ? `file://${absolute}` : `file:///${absolute}`;
+}
+
+async function main() {
+  await fs.mkdir(OUTPUT_DIR, { recursive: true });
+  const browser = await chromium.launch({ headless: true });
+  try {
+    const viewports = [
+      { label: "desktop", viewport: { width: 1280, height: 720 } },
+      {
+        label: "mobile",
+        viewport: { width: 393, height: 851 },
+      },
+    ];
+    for (const { label, viewport } of viewports) {
+      for (const withHoverCss of [false, true]) {
+        for (const hover of [false, true]) {
+          // We only want idle on the "before" pass and hover on the
+          // "after" pass — skip the two redundant combinations.
+          const isIdleShot = !hover;
+          const isBeforeShot = !withHoverCss;
+          if (isIdleShot !== isBeforeShot) continue;
+          const file = await captureVariant({
+            browser,
+            viewport,
+            label,
+            withHoverCss,
+            hover,
+          });
+          // eslint-disable-next-line no-console
+          console.log("wrote", path.relative(REPO_ROOT, file));
+        }
+      }
+    }
+  } finally {
+    await browser.close();
+  }
+}
+
+main().catch((err) => {
+  // eslint-disable-next-line no-console
+  console.error("aut-1 capture failed:", err);
+  process.exitCode = 1;
+});
diff --git a/scripts/run-playwright-full-slice.mjs b/scripts/run-playwright-full-slice.mjs
index 4d63f8a3..3767c97e 100644
--- a/scripts/run-playwright-full-slice.mjs
+++ b/scripts/run-playwright-full-slice.mjs
@@ -122,6 +122,7 @@ export const ownedFilesByRole = {
     "superuser-users.spec.ts",
     "superuser-vehicles.smoke.spec.js",
     "workfeed-config.smoke.spec.js",
+    "xlvask-flag-to-selvvash-navigation.spec.ts",
   ],
 };
 
diff --git a/src/assets/main.css b/src/assets/main.css
index 106ebd3e..818e44e5 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -144,3 +144,30 @@ body:not(.pleno-large-table-headers) .table thead th {
     margin-top: 30px !important;
   }
 }
+
+/* AUT-1: enhanced primary-button hover state.
+   Bulma's default only nudges background lightness; this adds a small
+   lift + brightness shift so the hover is unambiguous. Transitions keep
+   it smooth so it doesn't feel jarring on click-heavy screens. */
+.button.is-primary {
+  transition:
+    filter 0.15s ease,
+    transform 0.15s ease;
+}
+
+.button.is-primary:hover,
+.button.is-primary.is-hovered {
+  filter: brightness(1.08);
+  transform: translateY(-1px);
+}
+
+.button.is-primary:active,
+.button.is-primary.is-active {
+  filter: brightness(0.95);
+  transform: translateY(0);
+}
+
+.button.is-primary:focus-visible {
+  filter: brightness(1.04);
+  transform: translateY(-1px);
+}
diff --git a/src/components/displays/pagination/models/DepartmentPos/XLVaskUsagePagination.vue b/src/components/displays/pagination/models/DepartmentPos/XLVaskUsagePagination.vue
index 49adf3f5..acdc0e4e 100644
--- a/src/components/displays/pagination/models/DepartmentPos/XLVaskUsagePagination.vue
+++ b/src/components/displays/pagination/models/DepartmentPos/XLVaskUsagePagination.vue
@@ -17,6 +17,7 @@ import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { isUsageOrderAttachedToOrder } from "@/components/displays/department/pos/sync/xlvaskUsageFilters.js";
 import { SELFWASH_PERIOD_ALL_LIMIT } from "@/components/displays/department/pos/sync/xlvaskUsagePeriodConstants.js";
 import { formatLocalDateOnly, parseLocalDateOnly } from "@/services/dateOnly.js";
+import { removeError } from "@/components/request/HandleGlobalError.vue";
 
 const props = defineProps({
   autoLoad: {
@@ -37,6 +38,8 @@ const props = defineProps({
     type: Boolean, default: false
   }, highlightUsageLogId: {
     type: Number, default: 0
+  }, departmentId: {
+    type: Number, default: 0
   }
 });
 
@@ -60,9 +63,11 @@ const {
   setOrder,
   hideSearchField,
   setHideSearchField,
+  lastError,
 } = paginatedList;
 
-setEndpoint("/modules/xlvask/services/usage/orders", false);
+const XLVASK_USAGE_ORDERS_ENDPOINT = "/modules/xlvask/services/usage/orders";
+setEndpoint(XLVASK_USAGE_ORDERS_ENDPOINT, false);
 if (props.loadAllAtOnce) {
   setMetaItemsPerPage(SELFWASH_PERIOD_ALL_LIMIT, false);
 }
@@ -98,12 +103,23 @@ if (props.hideSearch) {
   setHideSearchField(false);
 }
 
-if (router.currentRoute.value.params.departmentId) {
-  setOrder("StartTime", "desc");
-} else {
-  setOrder("StartTime", "desc");
+const routeDepartmentId = Number.parseInt(
+  String(router.currentRoute.value.params.departmentId ?? ""),
+  10
+);
+const effectiveDepartmentId =
+  props.departmentId > 0
+    ? props.departmentId
+    : Number.isInteger(routeDepartmentId) && routeDepartmentId > 0
+      ? routeDepartmentId
+      : 0;
+
+if (effectiveDepartmentId > 0) {
+  setFilter("HallId", effectiveDepartmentId, false);
 }
 
+setOrder("StartTime", "desc");
+
 const extractResponseData = (response) => response?.data?.data ?? response?.data ?? {};
 
 const summary = ref({});
@@ -253,6 +269,20 @@ const visibleObjectsCount = computed(() => {
   }
   return currentList.filter((object) => !isUsageOrderAttachedToOrder(object)).length;
 });
+
+// 404 on the orders endpoint means the API surface has not been
+// implemented yet. Show a friendly notice instead of the generic error
+// popper the rest of the paginated surfaces surface.
+const apiEndpointNotImplemented = computed(() => (
+  lastError.value?.status === 404
+  && lastError.value?.endpoint === XLVASK_USAGE_ORDERS_ENDPOINT
+));
+
+watch(apiEndpointNotImplemented, (isNotImplemented) => {
+  if (isNotImplemented) {
+    removeError("paginatedGetRequest");
+  }
+});
 </script>
 
 <template>
@@ -366,6 +396,13 @@ const visibleObjectsCount = computed(() => {
       </div>
     </template>
   </PaginationDisplay>
+  <div
+      v-else-if="apiEndpointNotImplemented"
+      class="notification is-info is-light mb-4"
+      data-testid="xlvask-api-not-implemented"
+  >
+    {{ t('invoicing_period.xlvask_review.errors.api_endpoint_not_implemented') }}
+  </div>
   <ShowErrorField v-else error="paginatedGetRequest"/>
   <XlvaskUsageOrdersTable
       :objects="list"
diff --git a/src/components/pagination/paginatedList.vue b/src/components/pagination/paginatedList.vue
index 1b2f48c6..b811e55a 100644
--- a/src/components/pagination/paginatedList.vue
+++ b/src/components/pagination/paginatedList.vue
@@ -38,6 +38,9 @@ export function usePaginatedList() {
   let activeRequestController = null;
   let searchDebounceTimeout = null;
 
+  /** The last error produced by `paginatedGetRequest` (null on success). */
+  const lastError = ref(null);
+
   /** Additional query parameters */
   const additionalQueryParameters = ref({});
 
@@ -170,6 +173,7 @@ export function usePaginatedList() {
     abortActiveRequest();
     const requestController = typeof AbortController !== "undefined" ? new AbortController() : null;
     activeRequestController = requestController;
+    lastError.value = null;
 
     try {
       const response = await axios.get(API_URL + endpoint.value, {
@@ -193,10 +197,16 @@ export function usePaginatedList() {
       setLastUpdated();
       return response;
     } catch (error) {
-      if (!isCanceledRequest(error)) {
-        parseError(error, 'paginatedGetRequest');
-        console.log(error);
+      if (isCanceledRequest(error)) {
+        return null;
       }
+      lastError.value = {
+        status: Number.parseInt(String(error?.response?.status ?? error?.status ?? ""), 10) || null,
+        endpoint: endpoint.value,
+        message: error?.response?.data?.data?.message ?? error?.response?.data?.message ?? error?.message ?? null,
+      };
+      parseError(error, 'paginatedGetRequest');
+      console.log(error);
       return null;
     } finally {
       if (activeRequestController === requestController) {
@@ -487,6 +497,7 @@ export function usePaginatedList() {
     isLoading,
     isExporting,
     latestSearch,
+    lastError,
     additionalQueryParameters,
     exportTransform,
     setHideSearchField,
@@ -542,6 +553,7 @@ export const hideSearchField = globalInstance.hideSearchField;
 export const isLoading = globalInstance.isLoading;
 export const isExporting = globalInstance.isExporting;
 export const latestSearch = globalInstance.latestSearch;
+export const lastError = globalInstance.lastError;
 export const additionalQueryParameters = globalInstance.additionalQueryParameters;
 export const exportTransform = globalInstance.exportTransform;
 
diff --git a/src/i18n/generated/da-v2.json b/src/i18n/generated/da-v2.json
index d1ebdaa6..beb7621b 100644
--- a/src/i18n/generated/da-v2.json
+++ b/src/i18n/generated/da-v2.json
@@ -4874,7 +4874,8 @@
               "create_order_item_failed": "Vaskelinjen kunne ikke føjes til ordren.",
               "redirect_order_failed": "Ordren kunne ikke åbnes.",
               "load_customers_failed": "Kunderne kunne ikke hentes.",
-              "load_usage_log_failed": "Forbrugsloggen kunne ikke hentes."
+              "load_usage_log_failed": "Forbrugsloggen kunne ikke hentes.",
+              "api_endpoint_not_implemented": "API-endepunkt ikke implementeret endnu"
             }
           }
         },
diff --git a/src/i18n/generated/de-v2.json b/src/i18n/generated/de-v2.json
index c9f48794..9f473fa3 100644
--- a/src/i18n/generated/de-v2.json
+++ b/src/i18n/generated/de-v2.json
@@ -4340,7 +4340,7 @@
               "vehicle_subscription_type_mismatch": "{product} @:{'words.generated.does'} @:{'words.generated.not'} match @:{'words.generated.the'} @:{'words.generated.vehicle'} @:{'words.generated.subscription'} @:{'words.generated.type'} {expected_product}.",
               "wash_certificate_attached_without_item": "@:{'words.generated.waschzertifikat'} @:{'words.generated.ist'} @:{'words.generated.ohne'} @:{'words.generated.waschzertifikat'}-@.capitalize:{'words.generated.position'} angehaengt.",
               "wash_certificate_item_without_certificate": "@:{'words.generated.waschzertifikat'}-@.capitalize:{'words.generated.position'} @:{'words.generated.ist'} @:{'words.generated.ohne'} @:{'words.generated.waschzertifikat'} vorhanden.",
-              "xlvask_missing_order_link": "@:{'words.generated.xl'} @:{'words.generated.vask'} @:{'words.generated.wash'} @:{'words.generated.is'} neither ignored nor linked @:{'words.generated.to'} @:{'words.generated.an'} @:{'words.generated.order'} @:{'words.generated.in'} @:{'words.generated.the'} @:{'words.generated.selected'} @:{'words.generated.period'}."
+              "xlvask_missing_order_link": "@:{'words.generated.xl'} @.capitalize:{'words.generated.vask'}-@:{'words.generated.registrierung'} @:{'words.generated.ist'} weder ignoriert noch @:{'words.generated.mit'} einer @:{'words.generated.bestellung'} im ausgewaehlten @:{'words.generated.zeitraum'} verknuepft."
             },
             "preview": {
               "entities": {
@@ -4984,7 +4984,8 @@
               "create_order_item_failed": "Der Wäscheposten konnte nicht zum Auftrag hinzugefügt werden.",
               "redirect_order_failed": "Der Auftrag konnte nicht geöffnet werden.",
               "load_customers_failed": "Die Kunden konnten nicht geladen werden.",
-              "load_usage_log_failed": "Das Verbrauchsprotokoll konnte nicht geladen werden."
+              "load_usage_log_failed": "Das Verbrauchsprotokoll konnte nicht geladen werden.",
+              "api_endpoint_not_implemented": "API-Endpunkt ist noch nicht implementiert"
             }
           }
         },
diff --git a/src/i18n/generated/en-v2.json b/src/i18n/generated/en-v2.json
index 2b1d41e2..df237d88 100644
--- a/src/i18n/generated/en-v2.json
+++ b/src/i18n/generated/en-v2.json
@@ -4705,7 +4705,8 @@
               "create_order_item_failed": "The wash item could not be added to the order.",
               "redirect_order_failed": "The order could not be opened.",
               "load_customers_failed": "The customers could not be loaded.",
-              "load_usage_log_failed": "The usage log could not be loaded."
+              "load_usage_log_failed": "The usage log could not be loaded.",
+              "api_endpoint_not_implemented": "API endpoint not implemented yet"
             }
           }
         },
diff --git a/src/i18n/generated/global-v2.json b/src/i18n/generated/global-v2.json
index d77183be..62f957f2 100644
--- a/src/i18n/generated/global-v2.json
+++ b/src/i18n/generated/global-v2.json
@@ -3421,6 +3421,7 @@
           "expected_price": "@:{'templates.generated.compat.invoice_period.flags.preview.expected_price'}",
           "no_order_items": "@:common.templates.no_entity_available",
           "no_xlvask_usage_log": "@:common.templates.no_entity_available",
+          "no_xlvask_usage_log_metadata": "XL Vask registration (no metadata available — see api flag-context serializer)...",
           "order_items": "@:{'templates.generated.compat.global_search.entity_types.order_items'}",
           "price": "@:common.price",
           "product": "@:common.product",
@@ -4092,7 +4093,8 @@
           "create_order_item_failed": "@:{'templates.generated.compat.invoicing_period.xlvask_review.errors.create_order_item_failed'}",
           "redirect_order_failed": "@:{'templates.generated.compat.invoicing_period.xlvask_review.errors.redirect_order_failed'}",
           "load_customers_failed": "@:{'templates.generated.compat.invoicing_period.xlvask_review.errors.load_customers_failed'}",
-          "load_usage_log_failed": "@:{'templates.generated.compat.invoicing_period.xlvask_review.errors.load_usage_log_failed'}"
+          "load_usage_log_failed": "@:{'templates.generated.compat.invoicing_period.xlvask_review.errors.load_usage_log_failed'}",
+          "api_endpoint_not_implemented": "@:{'templates.generated.compat.invoicing_period.xlvask_review.errors.api_endpoint_not_implemented'}"
         }
       }
     },
diff --git a/src/i18n/generated/no-v2.json b/src/i18n/generated/no-v2.json
index 9f36a3b0..f3d9ff26 100644
--- a/src/i18n/generated/no-v2.json
+++ b/src/i18n/generated/no-v2.json
@@ -4343,7 +4343,7 @@
               "vehicle_subscription_type_mismatch": "{product} @:{'words.generated.does'} @:{'words.generated.not'} match @:{'words.generated.the'} @:{'words.generated.vehicle'} @:{'words.generated.subscription'} @:{'words.generated.type'} {expected_product}.",
               "wash_certificate_attached_without_item": "@.capitalize:{'words.generated.vaskesertifikat'} @:{'words.generated.er'} @:{'words.generated.vedlagt'} @:{'words.generated.uten'} @:{'words.replication.host_definite_suffix'} @:{'words.generated.vaskesertifikat'}-@:{'words.generated.linje'}.",
               "wash_certificate_item_without_certificate": "@.capitalize:{'words.generated.vaskesertifikat'}-@:{'words.generated.linjen'} @:{'words.generated.finnes'} @:{'words.generated.uten'} @:{'words.generated.et'} @:{'words.generated.vaskesertifikat'}.",
-              "xlvask_missing_order_link": "@:{'words.generated.xl'} @.capitalize:{'words.generated.vask'} @:{'words.generated.wash'} @:{'words.generated.is'} neither ignored nor linked @:{'words.generated.to'} @:{'words.generated.an'} @:{'words.generated.order'} @:{'words.generated.in'} @:{'words.generated.the'} @:{'words.generated.selected'} @:{'words.generated.period'}."
+              "xlvask_missing_order_link": "@:{'words.generated.xl'} @.capitalize:{'words.generated.vask'}-registreringen @:{'words.generated.er'} verken ignorert @:{'words.generated.eller'} knyttet @:{'words.generated.til'} @:{'words.replication.host_definite_suffix'} @:{'words.generated.ordre'} @:{'words.generated.i'} @:{'words.replication.article.host_mention'} @:{'words.generated.valgte'} @:{'words.generated.periode'}."
             },
             "preview": {
               "entities": {
@@ -4987,7 +4987,8 @@
               "create_order_item_failed": "Vaskelinjen kunne ikke legges til i ordren.",
               "redirect_order_failed": "Ordren kunne ikke åpnes.",
               "load_customers_failed": "Kundene kunne ikke hentes.",
-              "load_usage_log_failed": "Forbruksloggen kunne ikke hentes."
+              "load_usage_log_failed": "Forbruksloggen kunne ikke hentes.",
+              "api_endpoint_not_implemented": "API-endepunkt er ikke implementert ennå"
             }
           }
         },
diff --git a/src/i18n/generated/sv-v2.json b/src/i18n/generated/sv-v2.json
index f8231ecd..4110aff1 100644
--- a/src/i18n/generated/sv-v2.json
+++ b/src/i18n/generated/sv-v2.json
@@ -4393,7 +4393,7 @@
               "vehicle_subscription_type_mismatch": "{product} @:{'words.generated.does'} @:{'words.generated.not'} @:{'words.generated.match'} @:{'words.generated.the'} @:{'words.generated.vehicle'} @:{'words.generated.subscription'} @:{'words.generated.type'} {expected_product}.",
               "wash_certificate_attached_without_item": "@.capitalize:{'words.generated.tvattcertifikat_2'} ar bifogat @:{'words.generated.utan'} @:{'words.replication.host_definite_suffix'} tvattcertifikatrad.",
               "wash_certificate_item_without_certificate": "@:{'words.generated.tvattcertifikatraden'} @:{'words.generated.finns'} @:{'words.generated.utan'} @:{'words.generated.ett'} @:{'words.generated.tvattcertifikat_2'}.",
-              "xlvask_missing_order_link": "@:{'words.generated.xl'} @.capitalize:{'words.generated.vask'} @:{'words.generated.wash'} @:{'words.generated.is'} neither ignored nor @:{'words.generated.linked'} @:{'words.generated.to'} @:{'words.generated.an'} @:{'words.generated.order'} @:{'words.generated.in'} @:{'words.generated.the'} @:{'words.generated.selected'} @:{'words.generated.period'}."
+              "xlvask_missing_order_link": "@:{'words.generated.xl'} @.capitalize:{'words.generated.vask'}-registreringen @:{'words.generated.ar'} varken ignorerad @:{'words.generated.eller'} kopplad @:{'words.generated.till'} @:{'words.replication.host_definite_suffix'} @:{'words.generated.order'} @:{'words.generated.i'} @:{'words.replication.article.host_mention'} @:{'words.generated.valda'} perioden."
             },
             "preview": {
               "entities": {
@@ -5037,7 +5037,8 @@
               "create_order_item_failed": "Tvättartikeln kunde inte läggas till i ordern.",
               "redirect_order_failed": "Ordern kunde inte öppnas.",
               "load_customers_failed": "Kunderna kunde inte hämtas.",
-              "load_usage_log_failed": "Förbrukningsloggen kunde inte hämtas."
+              "load_usage_log_failed": "Förbrukningsloggen kunde inte hämtas.",
+              "api_endpoint_not_implemented": "API-slutpunkt är inte implementerad ännu"
             }
           }
         },
diff --git a/src/i18n/source/da/phrases/compat/invoicing_period/xlvask_review.json b/src/i18n/source/da/phrases/compat/invoicing_period/xlvask_review.json
index 18f508f5..ff849056 100644
--- a/src/i18n/source/da/phrases/compat/invoicing_period/xlvask_review.json
+++ b/src/i18n/source/da/phrases/compat/invoicing_period/xlvask_review.json
@@ -112,7 +112,8 @@
       "create_order_item_failed": "Vaskelinjen kunne ikke føjes til ordren.",
       "redirect_order_failed": "Ordren kunne ikke åbnes.",
       "load_customers_failed": "Kunderne kunne ikke hentes.",
-      "load_usage_log_failed": "Forbrugsloggen kunne ikke hentes."
+      "load_usage_log_failed": "Forbrugsloggen kunne ikke hentes.",
+      "api_endpoint_not_implemented": "API-endepunkt ikke implementeret endnu"
     }
   } } }
 }
diff --git a/src/i18n/source/de/phrases/compat/invoice_period/flags.json b/src/i18n/source/de/phrases/compat/invoice_period/flags.json
index 05d53a50..89768db9 100644
--- a/src/i18n/source/de/phrases/compat/invoice_period/flags.json
+++ b/src/i18n/source/de/phrases/compat/invoice_period/flags.json
@@ -26,7 +26,7 @@
           "vehicle_subscription_type_mismatch": "{product} @:{'terms.glossary.does'} @:{'terms.glossary.not'} match @:{'terms.glossary.the'} @:{'terms.glossary.vehicle'} @:{'terms.glossary.subscription'} @:{'terms.glossary.type'} {expected_product}.",
           "wash_certificate_attached_without_item": "@:{'terms.glossary.waschzertifikat'} @:{'terms.glossary.ist'} @:{'terms.glossary.ohne'} @:{'terms.glossary.waschzertifikat'}-@.capitalize:{'terms.glossary.position'} angehaengt.",
           "wash_certificate_item_without_certificate": "@:{'terms.glossary.waschzertifikat'}-@.capitalize:{'terms.glossary.position'} @:{'terms.glossary.ist'} @:{'terms.glossary.ohne'} @:{'terms.glossary.waschzertifikat'} vorhanden.",
-          "xlvask_missing_order_link": "@:{'terms.glossary.xl'} @:{'terms.glossary.vask'} @:{'terms.glossary.wash'} @:{'terms.glossary.is'} neither ignored nor linked @:{'terms.glossary.to'} @:{'terms.glossary.an'} @:{'terms.glossary.order'} @:{'terms.glossary.in'} @:{'terms.glossary.the'} @:{'terms.glossary.selected'} @:{'terms.glossary.period'}."
+          "xlvask_missing_order_link": "@:{'terms.glossary.xl'} @.capitalize:{'terms.glossary.vask'}-@:{'terms.glossary.registrierung'} @:{'terms.glossary.ist'} weder ignoriert noch @:{'terms.glossary.mit'} einer @:{'terms.glossary.bestellung'} im ausgewaehlten @:{'terms.glossary.zeitraum'} verknuepft."
         },
         "preview": {
           "entities": {
diff --git a/src/i18n/source/de/phrases/compat/invoicing_period/xlvask_review.json b/src/i18n/source/de/phrases/compat/invoicing_period/xlvask_review.json
index be38984c..7bd20a6b 100644
--- a/src/i18n/source/de/phrases/compat/invoicing_period/xlvask_review.json
+++ b/src/i18n/source/de/phrases/compat/invoicing_period/xlvask_review.json
@@ -191,7 +191,8 @@
           "create_order_item_failed": "Der Wäscheposten konnte nicht zum Auftrag hinzugefügt werden.",
           "redirect_order_failed": "Der Auftrag konnte nicht geöffnet werden.",
           "load_customers_failed": "Die Kunden konnten nicht geladen werden.",
-          "load_usage_log_failed": "Das Verbrauchsprotokoll konnte nicht geladen werden."
+          "load_usage_log_failed": "Das Verbrauchsprotokoll konnte nicht geladen werden.",
+          "api_endpoint_not_implemented": "API-Endpunkt ist noch nicht implementiert"
         }
       }
     }
diff --git a/src/i18n/source/en/phrases/compat/invoicing_period/xlvask_review.json b/src/i18n/source/en/phrases/compat/invoicing_period/xlvask_review.json
index a41c21ef..7d25993b 100644
--- a/src/i18n/source/en/phrases/compat/invoicing_period/xlvask_review.json
+++ b/src/i18n/source/en/phrases/compat/invoicing_period/xlvask_review.json
@@ -112,7 +112,8 @@
       "create_order_item_failed": "The wash item could not be added to the order.",
       "redirect_order_failed": "The order could not be opened.",
       "load_customers_failed": "The customers could not be loaded.",
-      "load_usage_log_failed": "The usage log could not be loaded."
+      "load_usage_log_failed": "The usage log could not be loaded.",
+      "api_endpoint_not_implemented": "API endpoint not implemented yet"
     }
   } } }
 }
diff --git a/src/i18n/source/global/shared/invoice_period/flags.json b/src/i18n/source/global/shared/invoice_period/flags.json
index 80f4be37..950c84a1 100644
--- a/src/i18n/source/global/shared/invoice_period/flags.json
+++ b/src/i18n/source/global/shared/invoice_period/flags.json
@@ -36,6 +36,7 @@
         "expected_price": "@:{'phrases.compat.invoice_period.flags.preview.expected_price'}",
         "no_order_items": "@:common.templates.no_entity_available",
         "no_xlvask_usage_log": "@:common.templates.no_entity_available",
+        "no_xlvask_usage_log_metadata": "XL Vask registration (no metadata available — see api flag-context serializer)...",
         "order_items": "@:{'phrases.compat.global_search.entity_types.order_items'}",
         "price": "@:common.price",
         "product": "@:common.product",
diff --git a/src/i18n/source/global/shared/invoicing_period/xlvask_review.json b/src/i18n/source/global/shared/invoicing_period/xlvask_review.json
index ba0f3dac..4b7dc89b 100644
--- a/src/i18n/source/global/shared/invoicing_period/xlvask_review.json
+++ b/src/i18n/source/global/shared/invoicing_period/xlvask_review.json
@@ -196,7 +196,8 @@
         "create_order_item_failed": "@:{'phrases.compat.invoicing_period.xlvask_review.errors.create_order_item_failed'}",
         "redirect_order_failed": "@:{'phrases.compat.invoicing_period.xlvask_review.errors.redirect_order_failed'}",
         "load_customers_failed": "@:{'phrases.compat.invoicing_period.xlvask_review.errors.load_customers_failed'}",
-        "load_usage_log_failed": "@:{'phrases.compat.invoicing_period.xlvask_review.errors.load_usage_log_failed'}"
+        "load_usage_log_failed": "@:{'phrases.compat.invoicing_period.xlvask_review.errors.load_usage_log_failed'}",
+        "api_endpoint_not_implemented": "@:{'phrases.compat.invoicing_period.xlvask_review.errors.api_endpoint_not_implemented'}"
       }
     }
   }
diff --git a/src/i18n/source/no/phrases/compat/invoice_period/flags.json b/src/i18n/source/no/phrases/compat/invoice_period/flags.json
index b81745ba..17a5c923 100644
--- a/src/i18n/source/no/phrases/compat/invoice_period/flags.json
+++ b/src/i18n/source/no/phrases/compat/invoice_period/flags.json
@@ -26,7 +26,7 @@
           "vehicle_subscription_type_mismatch": "{product} @:{'terms.glossary.does'} @:{'terms.glossary.not'} match @:{'terms.glossary.the'} @:{'terms.glossary.vehicle'} @:{'terms.glossary.subscription'} @:{'terms.glossary.type'} {expected_product}.",
           "wash_certificate_attached_without_item": "@.capitalize:{'terms.glossary.vaskesertifikat'} @:{'terms.glossary.er'} @:{'terms.glossary.vedlagt'} @:{'terms.glossary.uten'} @:{'terms.replication.host_definite_suffix'} @:{'terms.glossary.vaskesertifikat'}-@:{'terms.glossary.linje'}.",
           "wash_certificate_item_without_certificate": "@.capitalize:{'terms.glossary.vaskesertifikat'}-@:{'terms.glossary.linjen'} @:{'terms.glossary.finnes'} @:{'terms.glossary.uten'} @:{'terms.glossary.et'} @:{'terms.glossary.vaskesertifikat'}.",
-          "xlvask_missing_order_link": "@:{'terms.glossary.xl'} @.capitalize:{'terms.glossary.vask'} @:{'terms.glossary.wash'} @:{'terms.glossary.is'} neither ignored nor linked @:{'terms.glossary.to'} @:{'terms.glossary.an'} @:{'terms.glossary.order'} @:{'terms.glossary.in'} @:{'terms.glossary.the'} @:{'terms.glossary.selected'} @:{'terms.glossary.period'}."
+          "xlvask_missing_order_link": "@:{'terms.glossary.xl'} @.capitalize:{'terms.glossary.vask'}-registreringen @:{'terms.glossary.er'} verken ignorert @:{'terms.glossary.eller'} knyttet @:{'terms.glossary.til'} @:{'terms.replication.host_definite_suffix'} @:{'terms.glossary.ordre'} @:{'terms.glossary.i'} @:{'terms.replication.article.host_mention'} @:{'terms.glossary.valgte'} @:{'terms.glossary.periode'}."
         },
         "preview": {
           "entities": {
diff --git a/src/i18n/source/no/phrases/compat/invoicing_period/xlvask_review.json b/src/i18n/source/no/phrases/compat/invoicing_period/xlvask_review.json
index 06b5421a..23a0aecb 100644
--- a/src/i18n/source/no/phrases/compat/invoicing_period/xlvask_review.json
+++ b/src/i18n/source/no/phrases/compat/invoicing_period/xlvask_review.json
@@ -191,7 +191,8 @@
           "create_order_item_failed": "Vaskelinjen kunne ikke legges til i ordren.",
           "redirect_order_failed": "Ordren kunne ikke åpnes.",
           "load_customers_failed": "Kundene kunne ikke hentes.",
-          "load_usage_log_failed": "Forbruksloggen kunne ikke hentes."
+          "load_usage_log_failed": "Forbruksloggen kunne ikke hentes.",
+          "api_endpoint_not_implemented": "API-endepunkt er ikke implementert ennå"
         }
       }
     }
diff --git a/src/i18n/source/sv/phrases/compat/invoice_period/flags.json b/src/i18n/source/sv/phrases/compat/invoice_period/flags.json
index 3a938716..360d9643 100644
--- a/src/i18n/source/sv/phrases/compat/invoice_period/flags.json
+++ b/src/i18n/source/sv/phrases/compat/invoice_period/flags.json
@@ -26,7 +26,7 @@
           "vehicle_subscription_type_mismatch": "{product} @:{'terms.glossary.does'} @:{'terms.glossary.not'} @:{'terms.glossary.match'} @:{'terms.glossary.the'} @:{'terms.glossary.vehicle'} @:{'terms.glossary.subscription'} @:{'terms.glossary.type'} {expected_product}.",
           "wash_certificate_attached_without_item": "@.capitalize:{'terms.glossary.tvattcertifikat_2'} ar bifogat @:{'terms.glossary.utan'} @:{'terms.replication.host_definite_suffix'} tvattcertifikatrad.",
           "wash_certificate_item_without_certificate": "@:{'terms.glossary.tvattcertifikatraden'} @:{'terms.glossary.finns'} @:{'terms.glossary.utan'} @:{'terms.glossary.ett'} @:{'terms.glossary.tvattcertifikat_2'}.",
-          "xlvask_missing_order_link": "@:{'terms.glossary.xl'} @.capitalize:{'terms.glossary.vask'} @:{'terms.glossary.wash'} @:{'terms.glossary.is'} neither ignored nor @:{'terms.glossary.linked'} @:{'terms.glossary.to'} @:{'terms.glossary.an'} @:{'terms.glossary.order'} @:{'terms.glossary.in'} @:{'terms.glossary.the'} @:{'terms.glossary.selected'} @:{'terms.glossary.period'}."
+          "xlvask_missing_order_link": "@:{'terms.glossary.xl'} @.capitalize:{'terms.glossary.vask'}-registreringen @:{'terms.glossary.ar'} varken ignorerad @:{'terms.glossary.eller'} kopplad @:{'terms.glossary.till'} @:{'terms.replication.host_definite_suffix'} @:{'terms.glossary.order'} @:{'terms.glossary.i'} @:{'terms.replication.article.host_mention'} @:{'terms.glossary.valda'} perioden."
         },
         "preview": {
           "entities": {
diff --git a/src/i18n/source/sv/phrases/compat/invoicing_period/xlvask_review.json b/src/i18n/source/sv/phrases/compat/invoicing_period/xlvask_review.json
index 4697726a..a923266b 100644
--- a/src/i18n/source/sv/phrases/compat/invoicing_period/xlvask_review.json
+++ b/src/i18n/source/sv/phrases/compat/invoicing_period/xlvask_review.json
@@ -191,7 +191,8 @@
           "create_order_item_failed": "Tvättartikeln kunde inte läggas till i ordern.",
           "redirect_order_failed": "Ordern kunde inte öppnas.",
           "load_customers_failed": "Kunderna kunde inte hämtas.",
-          "load_usage_log_failed": "Förbrukningsloggen kunde inte hämtas."
+          "load_usage_log_failed": "Förbrukningsloggen kunde inte hämtas.",
+          "api_endpoint_not_implemented": "API-slutpunkt är inte implementerad ännu"
         }
       }
     }
diff --git a/src/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosSync.vue b/src/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosSync.vue
index feba5ccb..3dfe5966 100644
--- a/src/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosSync.vue
+++ b/src/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosSync.vue
@@ -16,7 +16,7 @@ import XLVaskUsagePagination from "@/components/displays/pagination/models/Depar
         <template #default>
           <DepartmentDashboardHero />
           <!-- Syncronize Orders -->
-          <XLVaskUsagePagination/>
+          <XLVaskUsagePagination :department-id="SessionUser.functions.getDepartmentIdFromUrl()"/>
         </template>
       </NotFoundFallBackPageWrapper>
     </DepartmentDashboardPageWrapper>
diff --git a/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/components/InvoicingPeriodFlagList.vue b/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/components/InvoicingPeriodFlagList.vue
index 322138d4..28c9f2f4 100644
--- a/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/components/InvoicingPeriodFlagList.vue
+++ b/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/components/InvoicingPeriodFlagList.vue
@@ -240,9 +240,10 @@ const xlvaskUsageLogHtml = (flag: any) => {
   ].filter(([, value]) => String(value ?? "").trim() !== "");
 
   if (rows.length === 0) {
-    return escapeHtml(translate("invoice_period.flags.preview.no_xlvask_usage_log", "No XL Vask details available.", {
-      entity: translate("invoice_period.flags.preview.entities.xlvask_usage_log", "XL Vask details"),
-    }));
+    return escapeHtml(translate(
+      "invoice_period.flags.preview.no_xlvask_usage_log_metadata",
+      "XL Vask registration (no metadata available — see api flag-context serializer)..."
+    ));
   }
 
   return `<table class="table is-narrow is-fullwidth">
@@ -285,8 +286,18 @@ const openOrderItem = (flag: any) => {
   SessionUser.functions.redirectTo.department(departmentId, `modules/pos/orders/${orderId}${suffix}`, true);
 };
 
+const extractDateOnly = (value: any) => {
+  const rawValue = String(value ?? "").trim();
+  if (rawValue === "") {
+    return "";
+  }
+  const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(rawValue);
+  return match ? `${match[1]}-${match[2]}-${match[3]}` : "";
+};
+
 const openXlVaskUsageLog = (flag: any) => {
   const usageLogId = Number(flag?.xlvask_usage_log_id || flag?.context?.xlvask_usage_log_id || flag?.target_id || 0);
+  const startTime = extractDateOnly(flag?.context?.start_time || flag?.start_time);
   const query = new URLSearchParams({
     activeTab: "period",
     periodView: "self_wash",
@@ -296,6 +307,10 @@ const openXlVaskUsageLog = (flag: any) => {
     query.set("xlvaskUsageLogId", String(usageLogId));
   }
 
+  if (startTime !== "") {
+    query.set("xlvaskUsageLogStartTime", startTime);
+  }
+
   SessionUser.functions.redirectTo.superUser(`/invoices?${query.toString()}`, true);
 };
 
diff --git a/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewSelfWash.vue b/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewSelfWash.vue
index 57243587..28bb260c 100644
--- a/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewSelfWash.vue
+++ b/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewSelfWash.vue
@@ -5,12 +5,28 @@ import { computed } from "vue";
 import { useRoute } from "vue-router";
 import i18n from "@/i18n";
 
+const DATE_ONLY_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/;
+
+const parseRouteDateOnly = (value: any) => {
+  const rawValue = Array.isArray(value) ? String(value[0] ?? "") : String(value ?? "");
+  const match = DATE_ONLY_PATTERN.exec(rawValue.trim());
+  if (!match) {
+    return "";
+  }
+  return `${match[1]}-${match[2]}-${match[3]}`;
+};
+
 const route = useRoute();
 const highlightedUsageLogId = computed(() => {
   const parsedId = Number.parseInt(String(route.query.xlvaskUsageLogId || ""), 10);
   return Number.isInteger(parsedId) && parsedId > 0 ? parsedId : 0;
 });
 
+const flaggedWashStartDate = computed(() => parseRouteDateOnly(route.query.xlvaskUsageLogStartTime));
+
+const initialDateFrom = computed(() => flaggedWashStartDate.value || dates.computed.formattedStartDate.value);
+const initialDateTo = computed(() => flaggedWashStartDate.value || dates.computed.formattedEndDate.value);
+
 const selfWashTitle = computed(() => i18n.global.t("nav.self_wash"));
 </script>
 
@@ -18,8 +34,8 @@ const selfWashTitle = computed(() => i18n.global.t("nav.self_wash"));
   <section data-testid="invoicing-period-self-wash-view">
     <XLVaskUsagePagination
       :title="selfWashTitle"
-      :initial-date-from="dates.computed.formattedStartDate.value"
-      :initial-date-to="dates.computed.formattedEndDate.value"
+      :initial-date-from="initialDateFrom"
+      :initial-date-to="initialDateTo"
       :inherit-period-filters="true"
       :load-all-at-once="false"
       :highlight-usage-log-id="highlightedUsageLogId"
diff --git a/tests/e2e/i18n-v2-integrity.spec.ts b/tests/e2e/i18n-v2-integrity.spec.ts
index e1ad3400..b8fbe0cb 100644
--- a/tests/e2e/i18n-v2-integrity.spec.ts
+++ b/tests/e2e/i18n-v2-integrity.spec.ts
@@ -814,4 +814,49 @@ test.describe("i18n v2 catalog integrity", () => {
 
     expect(unexpectedGroups).toEqual([]);
   });
+
+  test("mirrors xlvask_review keys into the global v2 fallback", () => {
+    const daSource = readJsonFile(
+      path.join(SOURCE_DIRECTORY, "da", "phrases", "compat", "invoicing_period", "xlvask_review.json")
+    );
+    const globalShared = readJsonFile(
+      path.join(SOURCE_DIRECTORY, "global", "shared", "invoicing_period", "xlvask_review.json")
+    );
+
+    const daEntries = flattenStringEntries(getValueAtPath(daSource, "compat.invoicing_period.xlvask_review"));
+    const globalEntries = flattenStringEntries(getValueAtPath(globalShared, "invoicing_period.xlvask_review"));
+
+    const daKeys = daEntries.map((entry) => entry.key).sort();
+    const globalKeys = globalEntries.map((entry) => entry.key).sort();
+
+    expect(globalKeys, "global fallback should mirror every da xlvask_review key").toEqual(daKeys);
+
+    const nonLinked = globalEntries.filter((entry) => !entry.value.startsWith("@")).map((entry) => entry.key);
+
+    expect(nonLinked, "every global xlvask_review entry should be a linked reference").toEqual([]);
+  });
+
+  test("mirrors xlvask_usage_log flag keys into the global v2 fallback", () => {
+    const daSource = readJsonFile(
+      path.join(SOURCE_DIRECTORY, "da", "phrases", "compat", "invoice_period", "flags.json")
+    );
+    const globalShared = readJsonFile(path.join(SOURCE_DIRECTORY, "global", "shared", "invoice_period", "flags.json"));
+
+    const daEntries = flattenStringEntries(getValueAtPath(daSource, "compat.invoice_period.flags")).filter(
+      (entry) => entry.key.includes("xlvask_usage_log") || entry.key.includes("xlvask_missing_order_link")
+    );
+    const globalEntries = flattenStringEntries(getValueAtPath(globalShared, "invoice_period.flags")).filter(
+      (entry) => entry.key.includes("xlvask_usage_log") || entry.key.includes("xlvask_missing_order_link")
+    );
+
+    const daKeySet = new Set(daEntries.map((entry) => entry.key));
+    const globalKeySet = new Set(globalEntries.map((entry) => entry.key));
+
+    const missing = [...daKeySet].filter((key) => !globalKeySet.has(key));
+    expect(missing, "global flags fallback should mirror every da xlvask flag key").toEqual([]);
+
+    const nonLinked = globalEntries.filter((entry) => !entry.value.startsWith("@")).map((entry) => entry.key);
+
+    expect(nonLinked, "every mirrored global xlvask flag entry should be a linked reference").toEqual([]);
+  });
 });
diff --git a/tests/e2e/xlvask-flag-to-selvvash-navigation.spec.ts b/tests/e2e/xlvask-flag-to-selvvash-navigation.spec.ts
new file mode 100644
index 00000000..0b22228e
--- /dev/null
+++ b/tests/e2e/xlvask-flag-to-selvvash-navigation.spec.ts
@@ -0,0 +1,172 @@
+import { expect, test } from "@playwright/test";
+import { mockApi, seedAuthenticatedState } from "./support/network.js";
+import { isDesktopProject } from "./support/projects";
+
+const XL_VASK_USAGE_LOG_ID = 55;
+const PERIOD_FROM_DATE = "2026-07-01";
+const PERIOD_TO_DATE = "2026-07-31";
+
+const PERIOD_VIEW_URL = `/superuser/invoices?activeTab=period&startDate=${PERIOD_FROM_DATE}&endDate=${PERIOD_TO_DATE}&periodView=all`;
+const SELVVASH_DESTINATION_PATTERN = new RegExp(
+  "/superuser/invoices\\?activeTab=period&periodView=self_wash&xlvaskUsageLogId=" + XL_VASK_USAGE_LOG_ID
+);
+
+function json(body: unknown, status = 200) {
+  return {
+    status,
+    contentType: "application/json",
+    body: JSON.stringify(body),
+  };
+}
+
+function createXlVaskFlaggedPeriodPayload({ dateFrom = PERIOD_FROM_DATE } = {}) {
+  const fixtureDate = String(dateFrom).slice(0, 10);
+  return {
+    data: {
+      types: {
+        all: [
+          {
+            id: 11,
+            customer_number: 4001,
+            customer_name: "Acme Fleet",
+            requires_action: true,
+            transactions: [
+              {
+                id: 9001,
+                date: `${fixtureDate}T10:00:00.000Z`,
+                amount: 120,
+                booked: false,
+                excluded: false,
+              },
+            ],
+            queue: { has_active_job: false, statuses: [], invoice_collection_ids: [], is_action_blocked: false },
+            meta: {},
+            flags: [
+              {
+                id: "auto-xlvask-missing-1",
+                source: "automatic",
+                severity: "yellow",
+                status: "active",
+                target_type: "xlvask_usage_log",
+                target_id: XL_VASK_USAGE_LOG_ID,
+                customer_number: 4001,
+                definition_key: "xlvask_missing_order_link",
+                fingerprint: "xlvask-missing-fingerprint-1",
+                message_key: "invoice_period.flags.automatic.xlvask_missing_order_link",
+                message_params: {
+                  wash_id: `wash-${XL_VASK_USAGE_LOG_ID}`,
+                  registration_number: "AB12345",
+                },
+                message: "XL Vask wash is neither ignored nor linked to an order in the selected period.",
+                context: {
+                  customer_name: "Acme Fleet",
+                  xlvask_usage_log_id: XL_VASK_USAGE_LOG_ID,
+                  wash_id: `wash-${XL_VASK_USAGE_LOG_ID}`,
+                  registration_number: "AB12345",
+                  start_time: `${fixtureDate}T10:00:00.000Z`,
+                },
+                xlvask_usage_log_id: XL_VASK_USAGE_LOG_ID,
+              },
+            ],
+            flag_counts: { manual: 0, automatic: 1, total: 1 },
+            status_indicator: "flag_yellow",
+          },
+        ],
+        invoice_per_order: [],
+        fixed_pricing: [],
+        tank_cleaning: [],
+        special_arrangements: [],
+        vehicle_subscriptions: [],
+        possible_duplicates: [],
+      },
+    },
+  };
+}
+
+async function suppressVueDevtoolsOverlay(page) {
+  await page.addInitScript(() => {
+    const STYLE_ID = "__e2e-hide-vue-devtools";
+    localStorage.setItem("lastVersionCheck", String(Date.now()));
+
+    const apply = () => {
+      const target = document.head || document.documentElement;
+      if (!target) {
+        return;
+      }
+
+      if (!document.getElementById(STYLE_ID)) {
+        const style = document.createElement("style");
+        style.id = STYLE_ID;
+        style.textContent =
+          "#__vue-devtools-container__, .vue-devtools__anchor-btn, .vue-devtools__panel-content { display: none !important; visibility: hidden !important; pointer-events: none !important; }";
+        target.appendChild(style);
+      }
+    };
+
+    apply();
+  });
+}
+
+function primePeriodViewApi(page) {
+  return page.route("**/superuser/invoicing/period**", async (route) => {
+    if (route.request().method() !== "GET") {
+      await route.fallback();
+      return;
+    }
+
+    const url = new URL(route.request().url());
+    const dateFrom = url.searchParams.get("dateFrom") || PERIOD_FROM_DATE;
+
+    await route.fulfill(json(createXlVaskFlaggedPeriodPayload({ dateFrom })));
+  });
+}
+
+test.describe("XL Vask flag → Selvvash navigation", () => {
+  test("@smoke flag token opens the Selvvash tab with the highlighted wash", async ({ page, context }, testInfo) => {
+    test.skip(!isDesktopProject(testInfo), "Desktop only");
+
+    await page.setViewportSize({ width: 1440, height: 900 });
+    const token = "superuser-xl-vask-navigation-token";
+    await suppressVueDevtoolsOverlay(page);
+    await seedAuthenticatedState(page, token);
+    await mockApi(page, {
+      authenticated: true,
+      permissions: ["superuser", "user"],
+      loginToken: token,
+    });
+
+    await primePeriodViewApi(page);
+
+    await context.addInitScript((tokenValue) => {
+      window.localStorage.setItem("token", tokenValue);
+    }, token);
+
+    await page.goto(PERIOD_VIEW_URL, { waitUntil: "domcontentloaded" });
+    await expect(page).toHaveURL(/activeTab=period/);
+    await expect(page.getByTestId("invoicing-period-view-selector-all")).toBeVisible({ timeout: 30_000 });
+
+    const customerRow = page.getByTestId("invoicing-period-customer-4001");
+    await expect(customerRow).toBeVisible();
+
+    const flagRow = page.getByTestId("invoice-period-flag-auto-xlvask-missing-1");
+    const flagRowCount = await flagRow.count();
+    test.skip(
+      flagRowCount === 0,
+      "No xlvask_missing_order_link flag is visible in the current period payload; smoke run skips."
+    );
+
+    await expect(flagRow).toBeVisible();
+    const flagToken = flagRow.locator(".invoice-period-flag-token");
+    await expect(flagToken).toBeVisible();
+
+    const popupPromise = page.waitForEvent("popup", { timeout: 15_000 });
+    await flagToken.click();
+    const popup = await popupPromise;
+
+    await expect(popup).toHaveURL(SELVVASH_DESTINATION_PATTERN);
+    await popup.waitForLoadState("domcontentloaded").catch(() => {});
+
+    await popup.close();
+    await context.close();
+  });
+});
diff --git a/tests/unit/i18n-xlvask-review-coverage.spec.js b/tests/unit/i18n-xlvask-review-coverage.spec.js
new file mode 100644
index 00000000..29a0d02b
--- /dev/null
+++ b/tests/unit/i18n-xlvask-review-coverage.spec.js
@@ -0,0 +1,59 @@
+// Regression guard for TRU-13 / AUT-9: every `invoicing_period.xlvask_review.*`
+// key that exists in the da reference catalogue must also be present in
+// the other active locales (no, sv, de, en) with a non-empty translation.
+// The end-to-end integrity suite already enforces global key parity, but
+// this targeted test documents the acceptance criteria for the xlvask_review
+// translation work and surfaces locale-specific gaps immediately.
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const root = process.cwd();
+const activeLocales = ["da", "no", "sv", "de", "en"];
+const reviewFileFor = (locale) =>
+  join(root, `src/i18n/source/${locale}/phrases/compat/invoicing_period/xlvask_review.json`);
+
+const flattenPairs = (node, prefix = "") => {
+  if (typeof node === "string") {
+    return [{ key: prefix, value: node }];
+  }
+  if (!node || typeof node !== "object" || Array.isArray(node)) {
+    return [];
+  }
+  return Object.entries(node).flatMap(([key, value]) => {
+    const nextPrefix = prefix ? `${prefix}.${key}` : key;
+    return flattenPairs(value, nextPrefix);
+  });
+};
+
+const readReviewSection = (locale) => {
+  const file = JSON.parse(readFileSync(reviewFileFor(locale), "utf8"));
+  return file?.compat?.invoicing_period?.xlvask_review ?? {};
+};
+
+describe("xlvask_review translation coverage", () => {
+  it("covers every da xlvask_review key in no, sv, de, en with a non-empty value", () => {
+    const daEntries = flattenPairs(readReviewSection("da"));
+    expect(daEntries.length, "da xlvask_review should expose translatable strings").toBeGreaterThan(0);
+
+    for (const locale of activeLocales.filter((entry) => entry !== "da")) {
+      const localeEntries = new Map(flattenPairs(readReviewSection(locale)).map((entry) => [entry.key, entry.value]));
+
+      const missing = [];
+      const empty = [];
+      for (const { key } of daEntries) {
+        if (!localeEntries.has(key)) {
+          missing.push(key);
+          continue;
+        }
+        const localized = localeEntries.get(key);
+        if (typeof localized !== "string" || localized.trim().length === 0) {
+          empty.push(key);
+        }
+      }
+
+      expect(missing, `${locale} xlvask_review keys missing from da`).toEqual([]);
+      expect(empty, `${locale} xlvask_review keys with empty translations`).toEqual([]);
+    }
+  });
+});
diff --git a/tests/unit/invoicing-period-flag-list.spec.js b/tests/unit/invoicing-period-flag-list.spec.js
index 19e2234a..19586084 100644
--- a/tests/unit/invoicing-period-flag-list.spec.js
+++ b/tests/unit/invoicing-period-flag-list.spec.js
@@ -55,6 +55,8 @@ const i18n = createTestI18n({
         preview: {
           no_order_items: "No order items available.",
           no_xlvask_usage_log: "No XL Vask details available.",
+          no_xlvask_usage_log_metadata:
+            "XL Vask registration (no metadata available — see api flag-context serializer)...",
           product: "Product",
           quantity: "Qty",
           price: "Price",
@@ -390,11 +392,90 @@ describe("InvoicingPeriodFlagList", () => {
 
     await token.trigger("click");
     expect(SessionUser.functions.redirectTo.superUser).toHaveBeenCalledWith(
-      "/invoices?activeTab=period&periodView=self_wash&xlvaskUsageLogId=55",
+      "/invoices?activeTab=period&periodView=self_wash&xlvaskUsageLogId=55&xlvaskUsageLogStartTime=2026-05-11",
       true
     );
   });
 
+  it("propagates the flagged wash start time when navigating to the Selvvask view", async () => {
+    const wrapper = mountList([
+      {
+        id: "auto-xlvask-root",
+        source: "automatic",
+        fingerprint: "xlvask-root",
+        definition_key: "xlvask_missing_order_link",
+        message_key: "invoice_period.flags.automatic.xlvask_missing_order_link",
+        target_type: "xlvask_usage_log",
+        target_id: 77,
+        xlvask_usage_log_id: 77,
+        context: {
+          xlvask_usage_log_id: 77,
+          start_time: "2026-04-28T08:15:00",
+        },
+      },
+    ]);
+
+    await wrapper.get(".invoice-period-flag-token").trigger("click");
+    expect(SessionUser.functions.redirectTo.superUser).toHaveBeenLastCalledWith(
+      "/invoices?activeTab=period&periodView=self_wash&xlvaskUsageLogId=77&xlvaskUsageLogStartTime=2026-04-28",
+      true
+    );
+  });
+
+  it("navigates to Selvvask without a start-time query when the flag has no wash date", async () => {
+    const wrapper = mountList([
+      {
+        id: "auto-xlvask-no-date",
+        source: "automatic",
+        fingerprint: "xlvask-no-date",
+        definition_key: "xlvask_missing_order_link",
+        message_key: "invoice_period.flags.automatic.xlvask_missing_order_link",
+        target_type: "xlvask_usage_log",
+        target_id: 91,
+        xlvask_usage_log_id: 91,
+        context: {
+          xlvask_usage_log_id: 91,
+        },
+      },
+    ]);
+
+    await wrapper.get(".invoice-period-flag-token").trigger("click");
+    expect(SessionUser.functions.redirectTo.superUser).toHaveBeenLastCalledWith(
+      "/invoices?activeTab=period&periodView=self_wash&xlvaskUsageLogId=91",
+      true
+    );
+  });
+
+  // When the API flag-context serializer does not provide any of the
+  // identity fields (wash_id / registration_number / start_time / customer_name),
+  // the hover preview should not pretend the data is missing — it should
+  // tell the operator that the metadata simply isn't being supplied.
+  it("explains the empty XL Vask hover preview when flag context has no metadata fields", async () => {
+    const wrapper = mountList([
+      {
+        id: "auto-xlvask-empty",
+        source: "automatic",
+        fingerprint: "xlvask-empty-fingerprint",
+        definition_key: "xlvask_missing_order_link",
+        message_key: "invoice_period.flags.automatic.xlvask_missing_order_link",
+        target_type: "xlvask_usage_log",
+        target_id: 99,
+        xlvask_usage_log_id: 99,
+        context: {},
+      },
+    ]);
+
+    const token = wrapper.get(".invoice-period-flag-token");
+    expect(token.text()).toBe("XL Vask wash");
+
+    await token.trigger("mouseover");
+    expect(popperBoxMock).toHaveBeenLastCalledWith(
+      "XL Vask registration",
+      "XL Vask registration (no metadata available — see api flag-context serializer)..."
+    );
+    expect(showPopperMock).toHaveBeenCalledTimes(1);
+  });
+
   it("renders invoice period warnings in proper Danish", () => {
     const wrapper = mountList(
       [
diff --git a/tests/unit/self-serve-dynamic-image.spec.js b/tests/unit/self-serve-dynamic-image.spec.js
index 8493a359..d2d72331 100644
--- a/tests/unit/self-serve-dynamic-image.spec.js
+++ b/tests/unit/self-serve-dynamic-image.spec.js
@@ -2,8 +2,16 @@ import { describe, expect, it } from "vitest";
 import {
   getSelfServeCompletedDynamicImageStep,
   getSelfServeTaskDynamicImagePresentation,
+  isSelfServeProgramNumberButton,
   normalizeSelfServeProgramPickerTaskButtons,
+  parseSelfServeDynamicImageThumbPosition,
 } from "@/services/selfServeDynamicImage.js";
+import {
+  SELF_SERVE_TASK_BUTTON_OPTIONS,
+  SELF_SERVE_TASK_BUTTON_PROGRAM_PICKER,
+  SELF_SERVE_TASK_BUTTON_RESET,
+  SELF_SERVE_TASK_BUTTON_START,
+} from "@/components/session/token/SessionUser/Objects/selfServeTaskButtons.js";
 
 describe("selfServeDynamicImage", () => {
   it("uses a selected program picker button number as thumb position", () => {
@@ -70,4 +78,55 @@ describe("selfServeDynamicImage", () => {
       "start",
     ]);
   });
+
+  // Smoke check that the program number range is stable across the codebase.
+  // The wash bay exposes 12 programs (buttons 0-11, thumb positions 1-12).
+  // If this assertion starts failing, the contract with the API has changed
+  // and any program mapping issue (e.g. a program that is unresponsive on
+  // the bay) is likely the API repository's concern, not the frontend.
+  it("accepts every configured program number between 0 and 11", () => {
+    for (let programNumber = 0; programNumber <= 11; programNumber += 1) {
+      expect(isSelfServeProgramNumberButton(programNumber)).toBe(true);
+    }
+    expect(isSelfServeProgramNumberButton(-1)).toBe(false);
+    expect(isSelfServeProgramNumberButton(12)).toBe(false);
+    expect(isSelfServeProgramNumberButton(100)).toBe(false);
+  });
+
+  it("maps 1-indexed thumb positions 1..12 to the documented program range", () => {
+    for (let thumbPosition = 1; thumbPosition <= 12; thumbPosition += 1) {
+      expect(parseSelfServeDynamicImageThumbPosition(thumbPosition)).toBe(thumbPosition);
+    }
+    expect(parseSelfServeDynamicImageThumbPosition(0)).toBeNull();
+    expect(parseSelfServeDynamicImageThumbPosition(13)).toBeNull();
+    expect(parseSelfServeDynamicImageThumbPosition("not-a-number")).toBeNull();
+    expect(parseSelfServeDynamicImageThumbPosition(null)).toBeNull();
+    expect(parseSelfServeDynamicImageThumbPosition(undefined)).toBeNull();
+    expect(parseSelfServeDynamicImageThumbPosition("")).toBeNull();
+  });
+
+  // Smoke check that the program button registry still covers every configured
+  // program. The wash bay exposes 12 programs and the path editor / simulator
+  // UI renders one entry per program number from this array. If the array is
+  // ever shortened, lengthened, or has gaps/duplicates, the program list shown
+  // to operators will drift from the API mapping and operators will not be
+  // able to reach every configured program — which is exactly the failure mode
+  // described in TRU-19 ("FF Uvs" and "10min" unresponsive).
+  it("exposes 12 unique, sequential program entries in the button registry", () => {
+    const numericProgramEntries = SELF_SERVE_TASK_BUTTON_OPTIONS.filter(
+      (entry) => Number.isInteger(entry?.id) && entry.id >= 0 && entry.id <= 11
+    );
+
+    expect(numericProgramEntries).toHaveLength(12);
+    expect(numericProgramEntries.map((entry) => entry.id)).toEqual([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]);
+    expect(new Set(numericProgramEntries.map((entry) => entry.id)).size).toBe(12);
+    expect(new Set(numericProgramEntries.map((entry) => entry.name)).size).toBe(12);
+
+    // The three "special" buttons (reset / program picker / start) must still
+    // be present so the path editor can render the full UI.
+    const specialIds = new Set(SELF_SERVE_TASK_BUTTON_OPTIONS.map((entry) => entry?.id));
+    expect(specialIds.has(SELF_SERVE_TASK_BUTTON_RESET)).toBe(true);
+    expect(specialIds.has(SELF_SERVE_TASK_BUTTON_PROGRAM_PICKER)).toBe(true);
+    expect(specialIds.has(SELF_SERVE_TASK_BUTTON_START)).toBe(true);
+  });
 });
diff --git a/tests/unit/superuser-invoices-view.spec.js b/tests/unit/superuser-invoices-view.spec.js
index 47fac268..e011ecd5 100644
--- a/tests/unit/superuser-invoices-view.spec.js
+++ b/tests/unit/superuser-invoices-view.spec.js
@@ -577,8 +577,11 @@ describe("Periode tab contract", () => {
   });
 
   it("uses the selected period while keeping Selvvask results server-paginated", () => {
-    expect(periodViewSelfWashSource).toContain(':initial-date-from="dates.computed.formattedStartDate.value"');
-    expect(periodViewSelfWashSource).toContain(':initial-date-to="dates.computed.formattedEndDate.value"');
+    expect(periodViewSelfWashSource).toContain(':initial-date-from="initialDateFrom"');
+    expect(periodViewSelfWashSource).toContain(':initial-date-to="initialDateTo"');
+    expect(periodViewSelfWashSource).toContain("dates.computed.formattedStartDate.value");
+    expect(periodViewSelfWashSource).toContain("dates.computed.formattedEndDate.value");
+    expect(periodViewSelfWashSource).toContain("route.query.xlvaskUsageLogStartTime");
     expect(periodViewSelfWashSource).toContain(':inherit-period-filters="true"');
     expect(periodViewSelfWashSource).toContain(':load-all-at-once="false"');
     expect(xlvaskUsagePaginationSource).toContain("inheritPeriodFilters");
@@ -684,6 +687,27 @@ describe("Periode tab contract", () => {
     expect(xlvaskUsageOrdersTableSource).not.toContain("'preview'");
   });
 
+  it("renders a friendly notice when the orders endpoint returns 404", () => {
+    // The pagination must distinguish a 404 ("API endpoint not implemented
+    // yet") from other failures and surface a friendly notice instead of
+    // the generic error popper every other paginated surface uses.
+    expect(xlvaskUsagePaginationSource).toContain("apiEndpointNotImplemented");
+    expect(xlvaskUsagePaginationSource).toContain("lastError");
+    expect(xlvaskUsagePaginationSource).toContain("404");
+    expect(xlvaskUsagePaginationSource).toContain("xlvask_review.errors.api_endpoint_not_implemented");
+    expect(xlvaskUsagePaginationSource).toContain("xlvask-api-not-implemented");
+    expect(xlvaskUsagePaginationSource).toContain('removeError("paginatedGetRequest")');
+  });
+
+  it("ships the API-not-implemented notice in every supported locale", () => {
+    // The friendly notice must be present in all five source locales so
+    // the operator reads a real translation rather than a raw key.
+    for (const locale of localeMessages) {
+      const notice = locale.messages?.invoicing_period?.xlvask_review?.errors?.api_endpoint_not_implemented;
+      expect(notice, `locale ${locale.locale} missing api_endpoint_not_implemented`).toBeTruthy();
+    }
+  });
+
   it("keeps period subview navigation on valid keys", () => {
     expect(periodViewInvoicePerOrderSource).toContain("view.functions.setCurrentView('vehicle_subscriptions')");
     expect(periodViewSpecialArrangementsSource).toContain("view.functions.setCurrentView('vehicle_subscriptions')");
diff --git a/tests/unit/xlvask-usage-department-filter.spec.js b/tests/unit/xlvask-usage-department-filter.spec.js
new file mode 100644
index 00000000..cbfd0ca5
--- /dev/null
+++ b/tests/unit/xlvask-usage-department-filter.spec.js
@@ -0,0 +1,53 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const root = process.cwd();
+const readSource = (relativePath) => readFileSync(join(root, relativePath), "utf8");
+
+describe("xlvask usage pagination department selector propagation", () => {
+  it("declares a departmentId prop on XLVaskUsagePagination", () => {
+    const source = readSource("src/components/displays/pagination/models/DepartmentPos/XLVaskUsagePagination.vue");
+
+    expect(source).toMatch(/departmentId:\s*\{\s*type:\s*Number,\s*default:\s*0\s*\}/);
+  });
+
+  it("applies the HallId filter when the departmentId prop is provided", () => {
+    const source = readSource("src/components/displays/pagination/models/DepartmentPos/XLVaskUsagePagination.vue");
+
+    expect(source).toMatch(/effectiveDepartmentId\s*>\s*0/);
+    expect(source).toMatch(/setFilter\(\s*["']HallId["']\s*,\s*effectiveDepartmentId\s*,\s*false\s*\)/);
+  });
+
+  it("falls back to the departmentId route param when the prop is not provided", () => {
+    const source = readSource("src/components/displays/pagination/models/DepartmentPos/XLVaskUsagePagination.vue");
+
+    expect(source).toMatch(/router\.currentRoute\.value\.params\.departmentId/);
+    expect(source).toMatch(/Number\.parseInt\(\s*String\(router\.currentRoute\.value\.params\.departmentId/);
+  });
+
+  it("does not apply the HallId filter when no departmentId is provided", () => {
+    const source = readSource("src/components/displays/pagination/models/DepartmentPos/XLVaskUsagePagination.vue");
+
+    expect(source).toContain(
+      "const effectiveDepartmentId =\n  props.departmentId > 0\n    ? props.departmentId\n    : Number.isInteger(routeDepartmentId) && routeDepartmentId > 0\n      ? routeDepartmentId\n      : 0;"
+    );
+    expect(source).toMatch(/if\s*\(effectiveDepartmentId\s*>\s*0\)\s*\{\s*setFilter\(\s*["']HallId["']/);
+  });
+
+  it("DepartmentPosSync forwards the URL departmentId to XLVaskUsagePagination", () => {
+    const source = readSource("src/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosSync.vue");
+
+    expect(source).toMatch(
+      /<XLVaskUsagePagination[^>]*:department-id="SessionUser\.functions\.getDepartmentIdFromUrl\(\)"/
+    );
+  });
+
+  it("InvoicingBillingPeriodViewSelfWash does not pass a departmentId", () => {
+    const source = readSource(
+      "src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewSelfWash.vue"
+    );
+
+    expect(source).not.toMatch(/department-id[\s=]/);
+  });
+});
diff --git a/tests/unit/xlvask-usage-pagination-404.spec.js b/tests/unit/xlvask-usage-pagination-404.spec.js
new file mode 100644
index 00000000..aaa6d6b3
--- /dev/null
+++ b/tests/unit/xlvask-usage-pagination-404.spec.js
@@ -0,0 +1,91 @@
+// @vitest-environment jsdom
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import axios from "axios";
+import { usePaginatedList } from "@/components/pagination/paginatedList.vue";
+
+vi.mock("axios", () => ({
+  default: {
+    get: vi.fn(),
+  },
+}));
+
+describe("paginatedList tracks the last error so consumers can detect 404", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    localStorage.clear();
+    localStorage.setItem("token", "test-token");
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("exposes a reactive lastError ref and clears it on success", async () => {
+    axios.get.mockResolvedValueOnce({
+      data: { data: [{ id: 1 }], meta: { pagination: { page: 1, per_page: 100, total: 1 } } },
+    });
+
+    const list = usePaginatedList();
+    list.setEndpoint("/modules/xlvask/services/usage/orders", false);
+    expect(list.lastError.value).toBeNull();
+
+    await list.paginatedGetRequest();
+
+    expect(list.lastError.value).toBeNull();
+  });
+
+  it("captures the HTTP status of a failed request for the current endpoint", async () => {
+    axios.get.mockRejectedValueOnce({
+      response: { status: 404, data: { data: { message: "Not Found" } } },
+      message: "Request failed with status code 404",
+    });
+
+    const list = usePaginatedList();
+    list.setEndpoint("/modules/xlvask/services/usage/orders", false);
+
+    const result = await list.paginatedGetRequest();
+
+    expect(result).toBeNull();
+    expect(list.lastError.value).toEqual({
+      status: 404,
+      endpoint: "/modules/xlvask/services/usage/orders",
+      message: "Not Found",
+    });
+  });
+
+  it("resets lastError at the start of every request", async () => {
+    axios.get
+      .mockRejectedValueOnce({
+        response: { status: 500, data: { data: { message: "Server Error" } } },
+        message: "Request failed with status code 500",
+      })
+      .mockResolvedValueOnce({
+        data: { data: [], meta: { pagination: { page: 1, per_page: 100, total: 0 } } },
+      });
+
+    const list = usePaginatedList();
+    list.setEndpoint("/modules/xlvask/services/usage/orders", false);
+
+    await list.paginatedGetRequest();
+    expect(list.lastError.value?.status).toBe(500);
+
+    await list.paginatedGetRequest();
+    expect(list.lastError.value).toBeNull();
+  });
+
+  it("does not set lastError when the request was cancelled", async () => {
+    axios.get.mockRejectedValueOnce({
+      name: "CanceledError",
+      code: "ERR_CANCELED",
+      message: "canceled",
+    });
+
+    const list = usePaginatedList();
+    list.setEndpoint("/modules/xlvask/services/usage/orders", false);
+
+    await list.paginatedGetRequest();
+
+    expect(list.lastError.value).toBeNull();
+  });
+});
diff --git a/tests/visual-previews/AUT-1/desktop-after.png b/tests/visual-previews/AUT-1/desktop-after.png
new file mode 100644
index 0000000000000000000000000000000000000000..0787f04f5e32165a85dc301d3c57e2d6fd6da95e
GIT binary patch
literal 11836
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
K4}EL(^?w1%VtBX!

literal 0
HcmV?d00001

diff --git a/tests/visual-previews/AUT-1/desktop-before.png b/tests/visual-previews/AUT-1/desktop-before.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ce3d43b15e218d291646f54663d20a22b7f0f42
GIT binary patch
literal 11442
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
H`0c*{KL}07

literal 0
HcmV?d00001

diff --git a/tests/visual-previews/AUT-1/mobile-after.png b/tests/visual-previews/AUT-1/mobile-after.png
new file mode 100644
index 0000000000000000000000000000000000000000..5a8b310e47298831167cf310547451d9b09cb084
GIT binary patch
literal 11972
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
WXNh<a$6r}9KuJzb7WUpe^nU^8SLP4^

literal 0
HcmV?d00001

diff --git a/tests/visual-previews/AUT-1/mobile-before.png b/tests/visual-previews/AUT-1/mobile-before.png
new file mode 100644
index 0000000000000000000000000000000000000000..076b2fe40f048a86f367a29f55602aaaecc156c2
GIT binary patch
literal 11626
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
Bz^(uQ

literal 0
HcmV?d00001

diff --git a/tests/visual-previews/AUT-1/preview.html b/tests/visual-previews/AUT-1/preview.html
new file mode 100644
index 00000000..4404a824
--- /dev/null
+++ b/tests/visual-previews/AUT-1/preview.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>AUT-1 primary-button hover preview</title>
+    <!--
+      Bulma 1.x stylesheet from the project's node_modules so the preview
+      matches the real app's default theme. The :root override is the same
+      --bulma-primary-h override that lives in src/assets/main.css so the
+      primary colour renders as the brand teal-blue (#0787BB ≈ HSL 197deg).
+    -->
+    <link rel="stylesheet" href="../../../node_modules/bulma/css/bulma.min.css" />
+    <style>
+      :root {
+        --bulma-primary-h: 197deg;
+        --bulma-primary-s: 92%;
+        --bulma-primary-l: 38%;
+      }
+      body {
+        background: #f5f5f5;
+        margin: 0;
+        padding: 48px 64px;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      }
+      .stage {
+        display: flex;
+        align-items: center;
+        gap: 48px;
+        background: white;
+        padding: 40px 56px;
+        border-radius: 8px;
+        box-shadow: 0 1px 3px rgba(10, 10, 10, 0.12);
+        width: fit-content;
+      }
+      .label {
+        font-size: 12px;
+        color: #7a7a7a;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        margin-bottom: 12px;
+      }
+      .button.is-primary {
+        min-width: 168px;
+        font-weight: 600;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="stage-idle" class="stage" data-state="idle">
+      <div class="label">Primary button — default</div>
+      <button class="button is-primary" data-testid="primary-button-idle">
+        Confirm booking
+      </button>
+    </div>
+    <div style="height: 32px"></div>
+    <div id="stage-hover" class="stage" data-state="hover">
+      <div class="label">Primary button — hover</div>
+      <button class="button is-primary" data-testid="primary-button-hover">
+        Confirm booking
+      </button>
+    </div>
+  </body>
+</html>