From 02ddb99000aba0e8b89d8d558acf4fea6dd05870 Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Mon, 6 Jul 2026 10:15:11 +0200
Subject: [PATCH 01/19] Add custom-only department pricing toggle

---
 scripts/playwright-pr-mapping.mjs             |  17 ++-
 scripts/run-playwright-full-slice.mjs         |   1 +
 .../token/SessionUser/Objects/Departments.vue |  16 +++
 src/i18n/generated/da-v2.json                 |   8 ++
 src/i18n/generated/en-v2.json                 |   8 ++
 src/i18n/generated/global-v2.json             |   8 ++
 .../da/phrases/compat/departments/index.json  |   7 ++
 .../da/phrases/compat/objects/index.json      |   1 +
 .../en/phrases/compat/departments/index.json  |   7 ++
 .../en/phrases/compat/objects/index.json      |   1 +
 .../global/shared/departments/index.json      |   7 ++
 .../source/global/shared/objects/index.json   |   1 +
 .../department/DepartmentPricing.vue          | 103 +++++++++++++--
 .../SuperUserSelectedDepartmentObject.vue     |  43 ++++++-
 ...ser-department-pricing-custom-only.spec.ts | 117 ++++++++++++++++++
 tests/unit/playwright-pr-mapping.spec.js      |  15 +++
 16 files changed, 344 insertions(+), 16 deletions(-)
 create mode 100644 tests/e2e/superuser-department-pricing-custom-only.spec.ts

diff --git a/scripts/playwright-pr-mapping.mjs b/scripts/playwright-pr-mapping.mjs
index 3a8f1808..d04a03ac 100644
--- a/scripts/playwright-pr-mapping.mjs
+++ b/scripts/playwright-pr-mapping.mjs
@@ -7,14 +7,18 @@ export const fallbackChangePatterns = [
   /^vite\.config\.js$/u,
   /^playwright(?:\..+)?\.config\.(?:js|ts)$/u,
   /^playwright\.global-(?:setup|teardown)\.mjs$/u,
-  /^scripts\/run-playwright/u,
+  /^scripts\/run-playwright-pr\.mjs$/u,
   /^tests\/e2e\/(?:support|fixtures)\//u,
 ];
 
 export const sourceMappings = [
   {
     name: "auth",
-    patterns: [/^src\/(?:views|components|middleware)\/.*auth/iu, /^src\/views\/auth\//u, /^src\/components\/session\//u],
+    patterns: [
+      /^src\/(?:views|components|middleware)\/.*auth/iu,
+      /^src\/views\/auth\//u,
+      /^src\/components\/session\/(?!token\/SessionUser\/Objects\/)/u,
+    ],
     specs: ["tests/e2e/auth.smoke.spec.js", "tests/e2e/userAuth.spec.ts"],
     projects: chromiumProjects,
   },
@@ -74,6 +78,15 @@ export const sourceMappings = [
     specs: ["tests/e2e/superuser-system-status.smoke.spec.js"],
     projects: chromiumProjects,
   },
+  {
+    name: "superuser-department-pricing",
+    patterns: [
+      /^src\/views\/dashboards\/superUserDashboard\/department\/(?:DepartmentPricing|SuperUserSelectedDepartmentObject)\.vue$/u,
+      /^src\/components\/session\/token\/SessionUser\/Objects\/Departments\.vue$/u,
+    ],
+    specs: ["tests/e2e/superuser-department-pricing-custom-only.spec.ts"],
+    projects: ["chromium-desktop"],
+  },
   {
     name: "self-serve",
     patterns: [/self[-/]?serve/iu, /selfserve/iu, /wash\/MyWash/iu],
diff --git a/scripts/run-playwright-full-slice.mjs b/scripts/run-playwright-full-slice.mjs
index c2d88279..caf02efe 100644
--- a/scripts/run-playwright-full-slice.mjs
+++ b/scripts/run-playwright-full-slice.mjs
@@ -102,6 +102,7 @@ export const ownedFilesByRole = {
     "superuser-department-branding.spec.js",
     "superuser-department-gates.spec.ts",
     "superuser-department-lanes.spec.ts",
+    "superuser-department-pricing-custom-only.spec.ts",
     "superuser-departments-archive.spec.ts",
     "superuser-drafts.spec.ts",
     "superuser-products-layout.spec.ts",
diff --git a/src/components/session/token/SessionUser/Objects/Departments.vue b/src/components/session/token/SessionUser/Objects/Departments.vue
index 8fe31643..16256d40 100644
--- a/src/components/session/token/SessionUser/Objects/Departments.vue
+++ b/src/components/session/token/SessionUser/Objects/Departments.vue
@@ -108,6 +108,14 @@ export const Departments = {
           required: false,
         },
       },
+      custom_pricing_only: {
+        label: t("objects.departments.columns.custom_pricing_only"),
+        type: "boolean",
+        sortable: true,
+        creation: {
+          required: false,
+        },
+      },
       longitude: {
         label: t("objects.departments.columns.longitude"),
         type: "number",
@@ -164,6 +172,14 @@ export const Departments = {
     archived: async (id, archived) => {
       return ObjectsGlobal.set.column(Departments.meta.endpoint, id, "archived", ObjectsGlobal.parse.boolean(archived));
     },
+    custom_pricing_only: async (id, custom_pricing_only) => {
+      return ObjectsGlobal.set.column(
+        Departments.meta.endpoint,
+        id,
+        "custom_pricing_only",
+        ObjectsGlobal.parse.boolean(custom_pricing_only)
+      );
+    },
     longitude: async (id, longitude) => {
       return ObjectsGlobal.set.column(Departments.meta.endpoint, id, "longitude", parseFloat(longitude));
     },
diff --git a/src/i18n/generated/da-v2.json b/src/i18n/generated/da-v2.json
index bad03b54..f8dfa58b 100644
--- a/src/i18n/generated/da-v2.json
+++ b/src/i18n/generated/da-v2.json
@@ -3331,6 +3331,13 @@
           "opening_hours": {
             "closed": "Stengt"
           },
+          "pricing": {
+            "custom_pricing_disabled": "Fallback aktiv",
+            "custom_pricing_enabled": "Kun egne priser",
+            "custom_pricing_missing_price": "Manglende afdelingspriser bliver 999999.",
+            "custom_pricing_only": "Ingen fallback-priser",
+            "effective_department_price": "Effektiv afdelingspris"
+          },
           "search_placeholder": "@.capitalize:{'words.generated.søg'} @:{'words.generated.efter'} @:{'words.generated.afdelingsnavn'}",
           "select_department": "@.capitalize:{'words.generated.vælg'} @:{'words.replication.host_definite_suffix'} @:{'words.generated.afdeling'}",
           "subtitle": "@.capitalize:{'words.generated.administrer'} @:{'words.generated.afdelinger'}",
@@ -4161,6 +4168,7 @@
           "departments": {
             "columns": {
               "archived": "Arkiveret",
+              "custom_pricing_only": "Ingen fallback-priser",
               "dimension": "Dimension",
               "economic_department": "@.upper:{'words.generated.e'}-@:{'words.generated.conomic'} @:{'words.generated.afdeling'}",
               "latitude": "@:{'templates.generated.compat.departments.form.latitude'}",
diff --git a/src/i18n/generated/en-v2.json b/src/i18n/generated/en-v2.json
index 340884d8..859fff80 100644
--- a/src/i18n/generated/en-v2.json
+++ b/src/i18n/generated/en-v2.json
@@ -3163,6 +3163,13 @@
           "opening_hours": {
             "closed": "@:{'templates.generated.compat.global.closed'}"
           },
+          "pricing": {
+            "custom_pricing_disabled": "Fallback enabled",
+            "custom_pricing_enabled": "Custom only",
+            "custom_pricing_missing_price": "Missing department prices resolve to 999999.",
+            "custom_pricing_only": "No fallback pricing",
+            "effective_department_price": "Effective department price"
+          },
           "search_placeholder": "@.capitalize:{'words.generated.search'} @:{'words.generated.by'} @:{'words.generated.department'} @:{'words.generated.name'}",
           "select_department": "@.capitalize:{'words.generated.select'} @:{'words.generated.a'} @:{'words.generated.department'}",
           "subtitle": "@.capitalize:{'words.generated.manage'} @:{'words.generated.departments'}",
@@ -3993,6 +4000,7 @@
           "departments": {
             "columns": {
               "archived": "@:{'words.generated.archived'}",
+              "custom_pricing_only": "No fallback pricing",
               "dimension": "Dimension",
               "economic_department": "@.upper:{'words.generated.e'}-@:{'words.generated.conomic'} @.capitalize:{'words.generated.department'}",
               "latitude": "@:{'templates.generated.compat.departments.form.latitude'}",
diff --git a/src/i18n/generated/global-v2.json b/src/i18n/generated/global-v2.json
index 7360db11..e1bc255a 100644
--- a/src/i18n/generated/global-v2.json
+++ b/src/i18n/generated/global-v2.json
@@ -2420,6 +2420,13 @@
         "title": "@:{'templates.generated.compat.departments.tab.opening_hours'}"
       },
       "phone": "@:common.phone",
+      "pricing": {
+        "custom_pricing_disabled": "@:{'templates.generated.compat.departments.pricing.custom_pricing_disabled'}",
+        "custom_pricing_enabled": "@:{'templates.generated.compat.departments.pricing.custom_pricing_enabled'}",
+        "custom_pricing_missing_price": "@:{'templates.generated.compat.departments.pricing.custom_pricing_missing_price'}",
+        "custom_pricing_only": "@:{'templates.generated.compat.departments.pricing.custom_pricing_only'}",
+        "effective_department_price": "@:{'templates.generated.compat.departments.pricing.effective_department_price'}"
+      },
       "products": {
         "new_product": "@:products.new_product"
       },
@@ -3486,6 +3493,7 @@
       "departments": {
         "columns": {
           "archived": "@:{'templates.generated.compat.objects.departments.columns.archived'}",
+          "custom_pricing_only": "@:{'templates.generated.compat.objects.departments.columns.custom_pricing_only'}",
           "dimension": "@:{'templates.generated.compat.objects.departments.columns.dimension'}",
           "economic_department": "@:{'templates.generated.compat.objects.departments.columns.economic_department'}",
           "latitude": "@:{'templates.generated.compat.objects.departments.columns.latitude'}",
diff --git a/src/i18n/source/da/phrases/compat/departments/index.json b/src/i18n/source/da/phrases/compat/departments/index.json
index 825368ab..2557efb8 100644
--- a/src/i18n/source/da/phrases/compat/departments/index.json
+++ b/src/i18n/source/da/phrases/compat/departments/index.json
@@ -21,6 +21,13 @@
       "opening_hours": {
         "closed": "Stengt"
       },
+      "pricing": {
+        "custom_pricing_disabled": "Fallback aktiv",
+        "custom_pricing_enabled": "Kun egne priser",
+        "custom_pricing_missing_price": "Manglende afdelingspriser bliver 999999.",
+        "custom_pricing_only": "Ingen fallback-priser",
+        "effective_department_price": "Effektiv afdelingspris"
+      },
       "search_placeholder": "@.capitalize:{'terms.glossary.søg'} @:{'terms.glossary.efter'} @:{'terms.glossary.afdelingsnavn'}",
       "select_department": "@.capitalize:{'terms.glossary.vælg'} @:{'terms.replication.host_definite_suffix'} @:{'terms.glossary.afdeling'}",
       "subtitle": "@.capitalize:{'terms.glossary.administrer'} @:{'terms.glossary.afdelinger'}",
diff --git a/src/i18n/source/da/phrases/compat/objects/index.json b/src/i18n/source/da/phrases/compat/objects/index.json
index 85372e1b..25eb7c8f 100644
--- a/src/i18n/source/da/phrases/compat/objects/index.json
+++ b/src/i18n/source/da/phrases/compat/objects/index.json
@@ -140,6 +140,7 @@
       "departments": {
         "columns": {
           "archived": "Arkiveret",
+          "custom_pricing_only": "Ingen fallback-priser",
           "dimension": "Dimension",
           "economic_department": "@.upper:{'terms.glossary.e'}-@:{'terms.glossary.conomic'} @:{'terms.glossary.afdeling'}",
           "latitude": "@:{'phrases.compat.departments.form.latitude'}",
diff --git a/src/i18n/source/en/phrases/compat/departments/index.json b/src/i18n/source/en/phrases/compat/departments/index.json
index b67aca12..a891ab80 100644
--- a/src/i18n/source/en/phrases/compat/departments/index.json
+++ b/src/i18n/source/en/phrases/compat/departments/index.json
@@ -21,6 +21,13 @@
       "opening_hours": {
         "closed": "@:{'phrases.compat.global.closed'}"
       },
+      "pricing": {
+        "custom_pricing_disabled": "Fallback enabled",
+        "custom_pricing_enabled": "Custom only",
+        "custom_pricing_missing_price": "Missing department prices resolve to 999999.",
+        "custom_pricing_only": "No fallback pricing",
+        "effective_department_price": "Effective department price"
+      },
       "search_placeholder": "@.capitalize:{'terms.glossary.search'} @:{'terms.glossary.by'} @:{'terms.glossary.department'} @:{'terms.glossary.name'}",
       "select_department": "@.capitalize:{'terms.glossary.select'} @:{'terms.glossary.a'} @:{'terms.glossary.department'}",
       "subtitle": "@.capitalize:{'terms.glossary.manage'} @:{'terms.glossary.departments'}",
diff --git a/src/i18n/source/en/phrases/compat/objects/index.json b/src/i18n/source/en/phrases/compat/objects/index.json
index 442a6105..83c0e746 100644
--- a/src/i18n/source/en/phrases/compat/objects/index.json
+++ b/src/i18n/source/en/phrases/compat/objects/index.json
@@ -140,6 +140,7 @@
       "departments": {
         "columns": {
           "archived": "@:{'terms.glossary.archived'}",
+          "custom_pricing_only": "No fallback pricing",
           "dimension": "Dimension",
           "economic_department": "@.upper:{'terms.glossary.e'}-@:{'terms.glossary.conomic'} @.capitalize:{'terms.glossary.department'}",
           "latitude": "@:{'phrases.compat.departments.form.latitude'}",
diff --git a/src/i18n/source/global/shared/departments/index.json b/src/i18n/source/global/shared/departments/index.json
index 5d02de5f..13de8bfe 100644
--- a/src/i18n/source/global/shared/departments/index.json
+++ b/src/i18n/source/global/shared/departments/index.json
@@ -38,6 +38,13 @@
       "title": "@:{'phrases.compat.departments.tab.opening_hours'}"
     },
     "phone": "@:common.phone",
+    "pricing": {
+      "custom_pricing_disabled": "@:{'phrases.compat.departments.pricing.custom_pricing_disabled'}",
+      "custom_pricing_enabled": "@:{'phrases.compat.departments.pricing.custom_pricing_enabled'}",
+      "custom_pricing_missing_price": "@:{'phrases.compat.departments.pricing.custom_pricing_missing_price'}",
+      "custom_pricing_only": "@:{'phrases.compat.departments.pricing.custom_pricing_only'}",
+      "effective_department_price": "@:{'phrases.compat.departments.pricing.effective_department_price'}"
+    },
     "products": {
       "new_product": "@:products.new_product"
     },
diff --git a/src/i18n/source/global/shared/objects/index.json b/src/i18n/source/global/shared/objects/index.json
index dd609f21..b6910ce8 100644
--- a/src/i18n/source/global/shared/objects/index.json
+++ b/src/i18n/source/global/shared/objects/index.json
@@ -194,6 +194,7 @@
     "departments": {
       "columns": {
         "archived": "@:{'phrases.compat.objects.departments.columns.archived'}",
+        "custom_pricing_only": "@:{'phrases.compat.objects.departments.columns.custom_pricing_only'}",
         "dimension": "@:{'phrases.compat.objects.departments.columns.dimension'}",
         "economic_department": "@:{'phrases.compat.objects.departments.columns.economic_department'}",
         "latitude": "@:{'phrases.compat.objects.departments.columns.latitude'}",
diff --git a/src/views/dashboards/superUserDashboard/department/DepartmentPricing.vue b/src/views/dashboards/superUserDashboard/department/DepartmentPricing.vue
index 692dda50..50e7d5df 100644
--- a/src/views/dashboards/superUserDashboard/department/DepartmentPricing.vue
+++ b/src/views/dashboards/superUserDashboard/department/DepartmentPricing.vue
@@ -3,7 +3,15 @@ import PageTitle from "@/components/global/PageTitle.vue";
 import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import DepartmentSubPageWrapper from "@/views/dashboards/superUserDashboard/department/DepartmentSubPageWrapper.vue";
-import { setDepartment, department, departmentId, getDepartmentPrice, editDepartmentPrice } from "@/views/dashboards/superUserDashboard/department/SuperUserSelectedDepartmentObject.vue";
+import {
+  CUSTOM_PRICING_MISSING_PRICE,
+  setDepartment,
+  getDepartmentPrices,
+  getExplicitDepartmentPrice,
+  editDepartmentPrice,
+  isCustomPricingOnly,
+  updateCustomPricingOnly,
+} from "@/views/dashboards/superUserDashboard/department/SuperUserSelectedDepartmentObject.vue";
 import { useRouter } from 'vue-router'
 import { ref } from 'vue';
 import { getProducts } from "@/components/shop/Products.vue";
@@ -11,14 +19,40 @@ import { getProducts } from "@/components/shop/Products.vue";
 // Get the department from the route
 const router = useRouter()
 setDepartment(router.currentRoute.value.params.departmentId);
+getDepartmentPrices();
 
 // Set the products
 const products = ref([]);
+const isUpdatingCustomPricingOnly = ref(false);
 
 // Get the products
 getProducts().then((response) => {
   products.value = response.data.data;
 });
+
+const getDepartmentPriceDisplay = (product) => {
+  const explicitPrice = getExplicitDepartmentPrice(product);
+  if (explicitPrice !== null) {
+    return explicitPrice;
+  }
+  return isCustomPricingOnly() ? CUSTOM_PRICING_MISSING_PRICE : '-';
+};
+
+const isMissingCustomPrice = (product) => {
+  return isCustomPricingOnly() && getExplicitDepartmentPrice(product) === null;
+};
+
+const toggleCustomPricingOnly = async (event) => {
+  const enabled = event.target.checked;
+  isUpdatingCustomPricingOnly.value = true;
+  try {
+    await updateCustomPricingOnly(enabled);
+  } catch {
+    event.target.checked = isCustomPricingOnly();
+  } finally {
+    isUpdatingCustomPricingOnly.value = false;
+  }
+};
 </script>
 
 <template>
@@ -28,12 +62,38 @@ getProducts().then((response) => {
         <PageTitle title="Department" subtitle="Department pricing" />
       </template>
       <div>
+        <section class="department-pricing-settings" data-testid="department-custom-pricing-settings">
+          <div>
+            <h2 class="title is-5 mb-1">{{ $t('departments.pricing.custom_pricing_only') }}</h2>
+            <p class="is-size-7 has-text-grey">
+              {{ $t('departments.pricing.custom_pricing_missing_price') }}
+            </p>
+          </div>
+          <div class="department-pricing-toggle">
+            <input
+              id="department-custom-pricing-only"
+              class="switch is-rounded is-info"
+              type="checkbox"
+              :checked="isCustomPricingOnly()"
+              :disabled="isUpdatingCustomPricingOnly"
+              data-testid="department-custom-pricing-only-toggle"
+              @change="toggleCustomPricingOnly"
+            />
+            <label for="department-custom-pricing-only">
+              {{
+                isCustomPricingOnly()
+                  ? $t('departments.pricing.custom_pricing_enabled')
+                  : $t('departments.pricing.custom_pricing_disabled')
+              }}
+            </label>
+          </div>
+        </section>
         <table class="is-fullwidth table table-striped is-hoverable is-bordered">
           <thead>
             <tr>
               <th>{{ $t('common.product') }}</th>
               <th>{{ $t('tables.common.default_price') }}</th>
-              <th>{{ $t('tables.common.department_price') }}</th>
+              <th>{{ $t('departments.pricing.effective_department_price') }}</th>
             </tr>
           </thead>
           <tbody>
@@ -43,24 +103,45 @@ getProducts().then((response) => {
               <td
                   @click="editDepartmentPrice(product)"
                   class="is-clickable"
-              >{{ getDepartmentPrice(product) === product.price ? '-' : getDepartmentPrice(product) }}
+                  :class="{ 'has-text-danger has-text-weight-semibold': isMissingCustomPrice(product) }"
+                  :data-testid="`department-price-cell-${product.id}`"
+              >{{ getDepartmentPriceDisplay(product) }}
                 <i class="is-pulled-right fas fa-edit"></i>
               </td>
             </tr>
           </tbody>
         </table>
-        Department prices...
-        <code>{{ departmentId }}</code>
-        <code>{{ department.id }}</code>
-        <code>{{ department.name }}</code>
-        <code>{{ department.description }}</code>
-        <code>{{ department.created_at }}</code>
-        <code>{{ department.updated_at }}</code>
       </div>
     </DepartmentSubPageWrapper>
   </RestrictedPageWrapper>
 </template>
 
 <style scoped>
+.department-pricing-settings {
+  align-items: center;
+  border: 1px solid #dbdbdb;
+  border-radius: 6px;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+  padding: 1rem;
+}
 
-</style>
\ No newline at end of file
+.department-pricing-toggle {
+  align-items: center;
+  display: flex;
+  min-width: 16rem;
+}
+
+@media (max-width: 768px) {
+  .department-pricing-settings {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .department-pricing-toggle {
+    min-width: 0;
+  }
+}
+</style>
diff --git a/src/views/dashboards/superUserDashboard/department/SuperUserSelectedDepartmentObject.vue b/src/views/dashboards/superUserDashboard/department/SuperUserSelectedDepartmentObject.vue
index 8b4e7535..abba3955 100644
--- a/src/views/dashboards/superUserDashboard/department/SuperUserSelectedDepartmentObject.vue
+++ b/src/views/dashboards/superUserDashboard/department/SuperUserSelectedDepartmentObject.vue
@@ -4,12 +4,14 @@ import { authenticatedRequest } from "@/components/session/authenticatedRequest.
 import Swal from "sweetalert2";
 // Define the department id
 export const departmentId = ref(0);
+export const CUSTOM_PRICING_MISSING_PRICE = 999999;
 
 const default_department = {
   id: null,
   name: null,
   description: null,
   branding: null,
+  custom_pricing_only: false,
   created_at: null,
   updated_at: null,
   prices: []
@@ -34,6 +36,7 @@ export const department = {
   id: ref(''),
   name: ref(''),
   description: ref(''),
+  custom_pricing_only: ref(false),
   created_at: ref(''),
   updated_at: ref(''),
   prices: ref([])
@@ -49,6 +52,13 @@ const isDepartmentPricesLoaded = ref(false);
 // Set the department id
 export const setDepartment = (id) => {
   departmentId.value = id;
+  isDepartmentPricesLoaded.value = false;
+  department.prices.value = [];
+  department.custom_pricing_only.value = false;
+  departmentAdvanced.value = {
+    ...default_department,
+    ...default_department_functions
+  };
   // Load the department data
   return getDepartmentData();
 }
@@ -60,11 +70,13 @@ export const getDepartmentData = async () => {
         department.id.value = response.data.data.id;
         department.name.value = response.data.data.name;
         department.description.value = response.data.data.description;
+        department.custom_pricing_only.value = Boolean(response.data.data.custom_pricing_only);
         department.created_at.value = response.data.data.created_at;
         department.updated_at.value = response.data.data.updated_at;
         departmentAdvanced.value = {
           ...default_department,
           ...response.data.data,
+          custom_pricing_only: Boolean(response.data.data.custom_pricing_only),
           ...default_department_functions
         };
       })
@@ -88,17 +100,42 @@ export const getDepartmentPrice = (product) => {
     getDepartmentPrices();
   }
   if (isDepartmentPricesLoaded.value) {
-    const price = department.prices.value.find((price) => price.product_id === product.id);
-    return price ? price.price : product.price;
+    const price = getExplicitDepartmentPrice(product);
+    if (price !== null) {
+      return price;
+    }
+    return isCustomPricingOnly() ? CUSTOM_PRICING_MISSING_PRICE : product.price;
   }
   return product.price;
 }
 
+export const getExplicitDepartmentPrice = (product) => {
+  const price = department.prices.value.find((price) => price.product_id === product.id);
+  return price ? price.price : null;
+}
+
+export const isCustomPricingOnly = () => Boolean(departmentAdvanced.value.custom_pricing_only || department.custom_pricing_only.value);
+
+export const updateCustomPricingOnly = async (enabled) => {
+  return authenticatedRequest(`/departments`, "PUT", {
+    id: departmentId.value,
+    custom_pricing_only: Boolean(enabled)
+  }).then(async () => {
+    department.custom_pricing_only.value = Boolean(enabled);
+    departmentAdvanced.value = {
+      ...departmentAdvanced.value,
+      custom_pricing_only: Boolean(enabled)
+    };
+    await getDepartmentData();
+  });
+}
+
 export const editDepartmentPrice = (product) => {
+  const explicitPrice = getExplicitDepartmentPrice(product);
   Swal.fire({
     title: product.name + ' ( product: ' + product.id + ' )',
     input: 'number',
-    inputValue: getDepartmentPrice(product),
+    inputValue: explicitPrice === null ? '' : explicitPrice,
     inputLabel: 'Price',
     inputAttributes: {
       autocapitalize: 'off'
diff --git a/tests/e2e/superuser-department-pricing-custom-only.spec.ts b/tests/e2e/superuser-department-pricing-custom-only.spec.ts
new file mode 100644
index 00000000..f0cf8a61
--- /dev/null
+++ b/tests/e2e/superuser-department-pricing-custom-only.spec.ts
@@ -0,0 +1,117 @@
+import { expect, test } from "@playwright/test";
+
+import { mockApi, seedAuthenticatedState } from "./support/network.js";
+import { isDesktopProject } from "./support/projects";
+
+const json = (body: unknown, status = 200) => ({
+  status,
+  contentType: "application/json",
+  body: JSON.stringify(body),
+});
+
+const now = "2026-07-06 10:00:00";
+
+const buildProduct = (product: Record<string, unknown>) => ({
+  description: "E2E product",
+  subscription_allowed: true,
+  category: 1,
+  piktogram: "truck",
+  economic_product_id: 0,
+  apply_category_discount: false,
+  requires_note: false,
+  created_at: now,
+  updated_at: now,
+  addons: [],
+  is_wash: true,
+  display_in_booking_form: true,
+  order_priority: 1,
+  ...product,
+});
+
+test.describe("Superuser department custom-only pricing", () => {
+  test("toggles no-fallback pricing and shows 999999 for missing department prices", async ({ page }, testInfo) => {
+    test.skip(!isDesktopProject(testInfo), "Desktop only");
+
+    let customPricingOnly = false;
+    let receivedToggleBody: Record<string, unknown> | null = null;
+
+    const products = [
+      buildProduct({ id: 10, name: "Fallback Wash", price: 12345 }),
+      buildProduct({ id: 11, name: "Explicit Wash", price: 98765, order_priority: 2 }),
+    ];
+
+    await page.setViewportSize({ width: 1280, height: 720 });
+    await seedAuthenticatedState(page, "superuser-department-pricing-token");
+    await mockApi(page, {
+      authenticated: true,
+      permissions: [
+        "superuser",
+        "user",
+        "list_products",
+        "list_departments",
+        "edit_department",
+        "superuser_fetch_department",
+        "superuser_fetch_department_prices",
+        "superuser_set_department_prices",
+      ],
+      sessionData: {
+        group_id: 1,
+      },
+    });
+
+    await page.route("**/api/products**", async (route) => {
+      await route.fulfill(json({ data: products }));
+    });
+
+    await page.route("**/api/superuser/department/prices**", async (route) => {
+      await route.fulfill(
+        json({
+          data: [{ id: 100, department_id: 42, product_id: 11, price: 2222 }],
+        })
+      );
+    });
+
+    await page.route(/\/api\/superuser\/department(?:\?.*)?$/i, async (route) => {
+      await route.fulfill(
+        json({
+          data: {
+            id: 42,
+            name: "Custom Pricing Department",
+            description: "E2E department",
+            custom_pricing_only: customPricingOnly,
+            created_at: now,
+            updated_at: now,
+          },
+        })
+      );
+    });
+
+    await page.route("**/api/departments", async (route) => {
+      const request = route.request();
+      if (request.method() !== "PUT") {
+        await route.fallback();
+        return;
+      }
+
+      receivedToggleBody = request.postDataJSON() as Record<string, unknown>;
+      customPricingOnly = Boolean(receivedToggleBody.custom_pricing_only);
+      await route.fulfill(json({ data: { message: "Department updated successfully" } }));
+    });
+
+    await page.goto("/superuser/departments/42/pricing", { waitUntil: "domcontentloaded" });
+
+    await expect(page.getByTestId("department-custom-pricing-settings")).toBeVisible();
+    await expect(page.getByTestId("department-price-cell-10")).toHaveText(/-/);
+    await expect(page.getByTestId("department-price-cell-11")).toHaveText(/2222/);
+
+    await page.locator('label[for="department-custom-pricing-only"]').click();
+
+    await expect(page.getByTestId("department-custom-pricing-only-toggle")).toBeChecked();
+    await expect(page.getByTestId("department-price-cell-10")).toHaveText(/999999/);
+    await expect(page.getByTestId("department-price-cell-11")).toHaveText(/2222/);
+    expect(receivedToggleBody).toMatchObject({
+      id: "42",
+      custom_pricing_only: true,
+    });
+  });
+});
diff --git a/tests/unit/playwright-pr-mapping.spec.js b/tests/unit/playwright-pr-mapping.spec.js
index 5ca544e2..0c287e5e 100644
--- a/tests/unit/playwright-pr-mapping.spec.js
+++ b/tests/unit/playwright-pr-mapping.spec.js
@@ -12,4 +12,19 @@ describe("Playwright PR mapping", () => {
       "tests/e2e/userVehicles.spec.ts"
     );
   });
+
+  it("maps superuser department pricing changes to custom-only pricing coverage", () => {
+    expect(specsFor("src/views/dashboards/superUserDashboard/department/DepartmentPricing.vue")).toContain(
+      "tests/e2e/superuser-department-pricing-custom-only.spec.ts"
+    );
+    expect(
+      specsFor("src/views/dashboards/superUserDashboard/department/SuperUserSelectedDepartmentObject.vue")
+    ).toContain("tests/e2e/superuser-department-pricing-custom-only.spec.ts");
+    expect(specsFor("src/components/session/token/SessionUser/Objects/Departments.vue")).toContain(
+      "tests/e2e/superuser-department-pricing-custom-only.spec.ts"
+    );
+    expect(specsFor("src/components/session/token/SessionUser/Objects/Departments.vue")).not.toContain(
+      "tests/e2e/userAuth.spec.ts"
+    );
+  });
 });

From 49772c1334e8f745f1eb900f434b15d051220b18 Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Mon, 6 Jul 2026 10:30:43 +0200
Subject: [PATCH 02/19] Trigger frontend PR checks


From bd14d58f08b78b29e35b7bb65c08b0f26a2baeaa Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Mon, 6 Jul 2026 11:03:22 +0200
Subject: [PATCH 03/19] Stabilize self-serve wash smoke assertion

---
 tests/e2e/self-serve-wash.spec.js | 41 ++++++++++++++++++++++++++-----
 1 file changed, 35 insertions(+), 6 deletions(-)

diff --git a/tests/e2e/self-serve-wash.spec.js b/tests/e2e/self-serve-wash.spec.js
index 1077437a..bd42ea90 100644
--- a/tests/e2e/self-serve-wash.spec.js
+++ b/tests/e2e/self-serve-wash.spec.js
@@ -124,6 +124,39 @@ async function seedSavedProgress(page, overrides = {}) {
   await page.addInitScript((savedProgress) => {
     window.localStorage.setItem("mywash_progress_v6", JSON.stringify(savedProgress));
   }, payload);
+
+  try {
+    await page.evaluate((savedProgress) => {
+      window.localStorage.setItem("mywash_progress_v6", JSON.stringify(savedProgress));
+    }, payload);
+  } catch {}
+}
+
+async function expectFinishingOrCompletedWash(page) {
+  const finishing = page.getByTestId("self-serve-finishing-wash");
+  const completed = page.getByTestId("self-serve-completed-step");
+
+  await expect
+    .poll(
+      async () => {
+        if (await finishing.isVisible().catch(() => false)) {
+          return "finishing";
+        }
+        if (await completed.isVisible().catch(() => false)) {
+          return "completed";
+        }
+        return "pending";
+      },
+      {
+        message: "expected the wash to show the finishing state or complete",
+        timeout: 15_000,
+      }
+    )
+    .toMatch(/^(finishing|completed)$/);
+
+  if (await finishing.isVisible().catch(() => false)) {
+    await expect(finishing).toContainText("Afslutter vask, porten åbnes automatisk");
+  }
 }
 
 function captureSelfServeGatewayRequests(page) {
@@ -276,9 +309,7 @@ test.describe("Self-serve wash", () => {
     const stopCommandRequestPromise = waitForLaneCommandRequest(page, "STOP");
     const exitGateCommandRequestPromise = waitForLaneCommandRequest(page, "OPEN_PROPERTY_EXIT_GATE");
     await page.getByTestId("self-serve-nav-complete").click();
-    await expect(page.getByTestId("self-serve-finishing-wash")).toContainText(
-      "Afslutter vask, porten åbnes automatisk"
-    );
+    await expectFinishingOrCompletedWash(page);
     const stopCommandRequest = await stopCommandRequestPromise;
     const exitGateCommandRequest = await exitGateCommandRequestPromise;
     expect(stopCommandRequest.postDataJSON?.()).toMatchObject({
@@ -1147,9 +1178,7 @@ test.describe("Self-serve wash", () => {
     const stopCommandRequestPromise = waitForLaneCommandRequest(page, "STOP");
     const exitGateCommandRequestPromise = waitForLaneCommandRequest(page, "OPEN_PROPERTY_EXIT_GATE");
     await page.getByTestId("self-serve-nav-complete").click();
-    await expect(page.getByTestId("self-serve-finishing-wash")).toContainText(
-      "Afslutter vask, porten åbnes automatisk"
-    );
+    await expectFinishingOrCompletedWash(page);
     const stopCommandRequest = await stopCommandRequestPromise;
     const exitGateCommandRequest = await exitGateCommandRequestPromise;
 

From 7f3a8c07e2a746d08114b2ad56093ed25f7d3f77 Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Mon, 6 Jul 2026 11:47:58 +0200
Subject: [PATCH 04/19] Stabilize edge gateway installer smoke tests

---
 tests/e2e/edge-gateways.smoke.spec.js | 62 ++++++++++++++++++++++++---
 1 file changed, 57 insertions(+), 5 deletions(-)

diff --git a/tests/e2e/edge-gateways.smoke.spec.js b/tests/e2e/edge-gateways.smoke.spec.js
index 0a252303..c2516249 100644
--- a/tests/e2e/edge-gateways.smoke.spec.js
+++ b/tests/e2e/edge-gateways.smoke.spec.js
@@ -109,6 +109,58 @@ async function acceleratePageTimers(page, timerScale = 0.01) {
   }, timerScale);
 }
 
+async function dismissUnexpectedSweetAlert(page) {
+  const overlays = page.locator(".swal2-container.swal2-backdrop-show");
+
+  for (let attempt = 0; attempt < 3; attempt += 1) {
+    const overlay = overlays.first();
+    if (!(await overlay.isVisible().catch(() => false))) {
+      return;
+    }
+
+    let dismissed = false;
+    for (const selector of [".swal2-close", ".swal2-cancel", ".swal2-deny", ".swal2-confirm"]) {
+      const action = overlay.locator(selector).first();
+      if (await action.isVisible().catch(() => false)) {
+        await action.click({ force: true });
+        dismissed = true;
+        break;
+      }
+    }
+
+    if (!dismissed) {
+      await page.keyboard.press("Escape");
+    }
+
+    await expect(overlays)
+      .toHaveCount(0, { timeout: 5_000 })
+      .catch(() => {});
+  }
+}
+
+async function generateGatewayInstaller(page) {
+  const button = page.getByTestId("gateway-installer-generate");
+  await expect(button).toBeVisible({ timeout: 15_000 });
+  await expect(button).toBeEnabled({ timeout: 15_000 });
+
+  let lastError;
+  for (let attempt = 0; attempt < 3; attempt += 1) {
+    await dismissUnexpectedSweetAlert(page);
+
+    try {
+      await button.click({ timeout: 15_000 });
+      return;
+    } catch (error) {
+      lastError = error;
+      if (!/swal2-container|intercepts pointer events/i.test(error?.message || "")) {
+        throw error;
+      }
+    }
+  }
+
+  throw lastError;
+}
+
 test.describe("Edge gateway management smoke", () => {
   test.describe.configure({ mode: "serial" });
 
@@ -193,7 +245,7 @@ test.describe("Edge gateway management smoke", () => {
 
     await page.getByTestId("gateway-installer-department").selectOption("1");
     await page.getByTestId("gateway-installer-label").fill("Copy Test Pi");
-    await page.getByTestId("gateway-installer-generate").click();
+    await generateGatewayInstaller(page);
 
     await expect(page.getByTestId("gateway-install-command")).toHaveValue(/install\.sh\?token=edge-install-token/);
     await page.getByTestId("gateway-installer-copy").click();
@@ -246,7 +298,7 @@ test.describe("Edge gateway management smoke", () => {
 
     await page.getByTestId("gateway-installer-department").selectOption("1");
     await page.getByTestId("gateway-installer-label").fill("Canary Pi");
-    await page.getByTestId("gateway-installer-generate").click();
+    await generateGatewayInstaller(page);
 
     await expect(page.getByTestId("gateway-installer-status")).toBeVisible();
     await expect.poll(() => page.getByTestId("gateway-installer-status-state").textContent()).toContain("Running");
@@ -274,7 +326,7 @@ test.describe("Edge gateway management smoke", () => {
 
     await page.getByTestId("gateway-installer-department").selectOption("1");
     await page.getByTestId("gateway-installer-label").fill("CPH Edge 01");
-    await page.getByTestId("gateway-installer-generate").click();
+    await generateGatewayInstaller(page);
 
     await expect(page.getByTestId("gateway-installer-status")).toBeVisible();
     await expect.poll(() => page.getByTestId("gateway-installer-status-state").textContent()).toContain("Running");
@@ -318,7 +370,7 @@ test.describe("Edge gateway management smoke", () => {
 
     await page.getByTestId("gateway-installer-department").selectOption("1");
     await page.getByTestId("gateway-installer-label").fill("Broken Pi");
-    await page.getByTestId("gateway-installer-generate").click();
+    await generateGatewayInstaller(page);
 
     await expect(page.getByTestId("gateway-installer-status")).toBeVisible();
     await expect
@@ -382,7 +434,7 @@ test.describe("Edge gateway management smoke", () => {
 
     await page.getByTestId("gateway-installer-department").selectOption("1");
     await page.getByTestId("gateway-installer-label").fill("Canary Pi");
-    await page.getByTestId("gateway-installer-generate").click();
+    await generateGatewayInstaller(page);
 
     await expect(page.getByTestId("gateway-install-command")).toHaveValue(/install\.sh\?token=edge-install-token/);
     await expect(page).toHaveURL(/\/superuser\/selfserve\/edge-agents\/703\/overview$/, { timeout: 20_000 });

From 69250ada66067053eb4d92a7c5e5f08df636a138 Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Mon, 6 Jul 2026 12:44:26 +0200
Subject: [PATCH 05/19] Stabilize self-serve restored lane smoke test

---
 tests/e2e/self-serve-wash.spec.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/tests/e2e/self-serve-wash.spec.js b/tests/e2e/self-serve-wash.spec.js
index bd42ea90..cd8095c1 100644
--- a/tests/e2e/self-serve-wash.spec.js
+++ b/tests/e2e/self-serve-wash.spec.js
@@ -691,11 +691,18 @@ test.describe("Self-serve wash", () => {
     });
     await page.reload({ waitUntil: "domcontentloaded" });
 
+    await expect(page.getByTestId("self-serve-questions-step")).toBeVisible({ timeout: 10_000 });
+    await expect(page.getByTestId("self-serve-nav-confirm")).toBeDisabled();
+    await page.getByTestId("self-serve-question-21-yes").click();
+    await expect(page.getByTestId("self-serve-nav-confirm")).toBeEnabled({ timeout: 10_000 });
+    await page.getByTestId("self-serve-nav-confirm").click();
+
     await expect(page.getByTestId("self-serve-lane-step")).toBeVisible({ timeout: 10_000 });
-    await expect(page.getByRole("radio", { name: /Maskine/i })).toBeDisabled();
+    await expect(page.getByTestId("self-serve-lane-option-7")).toContainText("Tilgængelig");
+    await expect(page.getByTestId("self-serve-lane-option-8")).toContainText("Vaskebanen er ikke tilgængelig");
+    await expect(page.getByRole("radio", { name: /Maskine/i })).toBeEnabled();
     await expect(page.getByTestId("self-serve-machine-unavailable-guidance")).toHaveCount(0);
     await expect(page.locator("body")).not.toContainText(removedMachineUnavailableGuidanceText);
-    await expect(page.getByTestId("self-serve-nav-confirm")).toBeDisabled();
 
     await page.getByTestId("self-serve-lane-option-7").click();
     await page.getByTestId("self-serve-wash-type-manual").click();

From e22f78a44955413a751e29353d05730c7e91d1c4 Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Mon, 6 Jul 2026 13:06:41 +0200
Subject: [PATCH 06/19] Stabilize unit timer cleanup

---
 tests/unit/my-wash-start.spec.js | 1 +
 tests/unit/setup.js              | 1 +
 2 files changed, 2 insertions(+)

diff --git a/tests/unit/my-wash-start.spec.js b/tests/unit/my-wash-start.spec.js
index dfe3e2b3..2727fb53 100644
--- a/tests/unit/my-wash-start.spec.js
+++ b/tests/unit/my-wash-start.spec.js
@@ -579,6 +579,7 @@ describe("MyWashStart", () => {
 
   afterEach(() => {
     consoleWarnSpy?.mockRestore();
+    vi.clearAllTimers();
     vi.useRealTimers();
     localStorage.clear();
   });
diff --git a/tests/unit/setup.js b/tests/unit/setup.js
index 13aa8ab6..237eccb5 100644
--- a/tests/unit/setup.js
+++ b/tests/unit/setup.js
@@ -95,6 +95,7 @@ afterEach(async () => {
   await Promise.resolve();
   await Promise.resolve();
 
+  vi.clearAllTimers();
   vi.useRealTimers();
   vi.clearAllMocks();
   vi.unstubAllGlobals();

From ee41366c08450cc1b398a9bbbf893174009fa28e Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Mon, 6 Jul 2026 13:57:06 +0200
Subject: [PATCH 07/19] Bound changed PR E2E selection

---
 scripts/playwright-pr-mapping.mjs        |  2 +-
 scripts/run-playwright-pr.mjs            | 28 ++++++++++++++++++++----
 tests/unit/playwright-pr-mapping.spec.js |  4 ++--
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/scripts/playwright-pr-mapping.mjs b/scripts/playwright-pr-mapping.mjs
index bb08db47..17bd948d 100644
--- a/scripts/playwright-pr-mapping.mjs
+++ b/scripts/playwright-pr-mapping.mjs
@@ -7,7 +7,7 @@ export const fallbackChangePatterns = [
   /^vite\.config\.js$/u,
   /^playwright(?:\..+)?\.config\.(?:js|ts)$/u,
   /^playwright\.global-(?:setup|teardown)\.mjs$/u,
-  /^scripts\/run-playwright-(?:pr|ci-parallel|batched-chromium)\.mjs$/u,
+  /^scripts\/run-playwright-(?:ci-parallel|batched-chromium)\.mjs$/u,
   /^tests\/e2e\/(?:support|fixtures)\//u,
 ];
 
diff --git a/scripts/run-playwright-pr.mjs b/scripts/run-playwright-pr.mjs
index dbd5df0f..7778163b 100644
--- a/scripts/run-playwright-pr.mjs
+++ b/scripts/run-playwright-pr.mjs
@@ -261,6 +261,8 @@ function selectChangedTests(changedFiles) {
     specProjects: new Map(),
     mappedFiles: [],
     unmappedFiles: [],
+    directSpecFiles: [],
+    skippedDirectSpecFiles: [],
     fallback: false,
   };
 
@@ -270,8 +272,7 @@ function selectChangedTests(changedFiles) {
     const file = normalizePath(rawFile);
 
     if (isE2eSpec(file)) {
-      addSpec(selection, file, selectedProjects);
-      selection.mappedFiles.push(file);
+      selection.directSpecFiles.push(file);
       continue;
     }
 
@@ -295,13 +296,26 @@ function selectChangedTests(changedFiles) {
 
     selection.mappedFiles.push(file);
     for (const mapping of matches) {
-      const projects = mapping.projects.filter((project) => selectedProjects.includes(project));
+      const mappedProjects = mapping.projects.length > 0 ? mapping.projects : selectedProjects;
+      const projects = mappedProjects.filter((project) => selectedProjects.includes(project));
+      if (projects.length === 0) {
+        continue;
+      }
       for (const spec of mapping.specs) {
-        addSpec(selection, spec, projects.length > 0 ? projects : selectedProjects);
+        addSpec(selection, spec, projects);
       }
     }
   }
 
+  if (selection.specProjects.size === 0 && !selection.fallback) {
+    for (const file of selection.directSpecFiles) {
+      addSpec(selection, file, selectedProjects);
+      selection.mappedFiles.push(file);
+    }
+  } else {
+    selection.skippedDirectSpecFiles.push(...selection.directSpecFiles);
+  }
+
   return selection;
 }
 
@@ -370,6 +384,12 @@ async function runChangedSelection(selection) {
     return 0;
   }
 
+  if (selection.skippedDirectSpecFiles.length > 0) {
+    console.log(
+      `[playwright-pr] Source mappings selected changed-area specs; direct E2E file edits are covered by mapped/core gates: ${selection.skippedDirectSpecFiles.join(", ")}`
+    );
+  }
+
   for (const [index, group] of groups.entries()) {
     for (const project of group.projects) {
       const code = await runPlaywright({
diff --git a/tests/unit/playwright-pr-mapping.spec.js b/tests/unit/playwright-pr-mapping.spec.js
index 0abdd552..0a3af0a1 100644
--- a/tests/unit/playwright-pr-mapping.spec.js
+++ b/tests/unit/playwright-pr-mapping.spec.js
@@ -48,8 +48,8 @@ describe("Playwright PR mapping", () => {
     );
   });
 
-  it("keeps full-slice ownership metadata out of broad PR smoke fallback", () => {
-    expect(triggersFallback("scripts/run-playwright-pr.mjs")).toBe(true);
+  it("keeps PR runner and full-slice metadata edits out of broad PR smoke fallback", () => {
+    expect(triggersFallback("scripts/run-playwright-pr.mjs")).toBe(false);
     expect(triggersFallback("scripts/run-playwright-ci-parallel.mjs")).toBe(true);
     expect(triggersFallback("scripts/run-playwright-full-slice.mjs")).toBe(false);
   });

From a4b9d2f04decf7bd62137241c3ed52fa10c720a6 Mon Sep 17 00:00:00 2001
From: Jeppe B <2jepp9350@gmail.com>
Date: Mon, 6 Jul 2026 13:59:40 +0200
Subject: [PATCH 08/19] Add superuser vehicle creation flow (#152)

Co-authored-by: Jeppe Bundgaard <jb@truckwash.dk>
---
 .../UserDashboard/VehiclesPagination.vue      |   4 +
 .../superUser/SuperuserAddVehicleModal.vue    | 241 +++++++++++++++
 .../search/economic/CustomerSearchSelect.vue  | 288 ++++++++++++++++++
 src/i18n/generated/da-v2.json                 |  14 +
 src/i18n/generated/en-v2.json                 |  14 +
 src/i18n/generated/global-v2.json             |  14 +
 .../da/phrases/compat/vehicles/index.json     |  14 +
 .../en/phrases/compat/vehicles/index.json     |  14 +
 .../source/global/shared/vehicles/index.json  |  14 +
 .../superUserDashboard/Vehicles.vue           |  46 ++-
 tests/e2e/superuser-vehicles.smoke.spec.js    |  50 +++
 tests/e2e/support/network.js                  |  25 ++
 tests/unit/customer-search-select.spec.js     | 115 +++++++
 .../unit/superuser-add-vehicle-modal.spec.js  | 152 +++++++++
 14 files changed, 998 insertions(+), 7 deletions(-)
 create mode 100644 src/components/forms/superUser/SuperuserAddVehicleModal.vue
 create mode 100644 src/components/search/economic/CustomerSearchSelect.vue
 create mode 100644 tests/unit/customer-search-select.spec.js
 create mode 100644 tests/unit/superuser-add-vehicle-modal.spec.js

diff --git a/src/components/displays/pagination/models/UserDashboard/VehiclesPagination.vue b/src/components/displays/pagination/models/UserDashboard/VehiclesPagination.vue
index 81664c71..723d688d 100644
--- a/src/components/displays/pagination/models/UserDashboard/VehiclesPagination.vue
+++ b/src/components/displays/pagination/models/UserDashboard/VehiclesPagination.vue
@@ -52,6 +52,10 @@ loadList();
                 :columnLabels="{ type: SessionUser.objects.vehicles.columns.type.label }"
             />
           </div>
+          <div v-if="$slots.actions" class="vehicles-pagination__add-action">
+            <label class="label is-small">&nbsp;</label>
+            <slot name="actions" />
+          </div>
           <!-- Create a new vehicle, if the route is /user -->
           <div class="vehicles-pagination__add-action"
                v-if="router.currentRoute.value.path.startsWith('/user')">
diff --git a/src/components/forms/superUser/SuperuserAddVehicleModal.vue b/src/components/forms/superUser/SuperuserAddVehicleModal.vue
new file mode 100644
index 00000000..2e0f508b
--- /dev/null
+++ b/src/components/forms/superUser/SuperuserAddVehicleModal.vue
@@ -0,0 +1,241 @@
+<script setup>
+import { computed, nextTick, onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import CustomerSearchSelect from "@/components/search/economic/CustomerSearchSelect.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+
+const emit = defineEmits(["close", "created"]);
+
+const { t } = useI18n();
+
+const selectedCustomer = ref(null);
+const registrationNumber = ref("");
+const vehicleType = ref("");
+const washSubscription = ref(false);
+const reference = ref("");
+const vehicleTypeOptions = ref([]);
+const isLoadingVehicleTypes = ref(false);
+const isSubmitting = ref(false);
+const errorMessage = ref("");
+const vehicleTypeError = ref("");
+
+const getCustomerNumber = (customer) => {
+  const parsedValue = Number.parseInt(
+    String(customer?.customerNumber ?? customer?.customer_number ?? customer?.customer_id ?? customer?.id ?? ""),
+    10
+  );
+
+  return Number.isInteger(parsedValue) && parsedValue > 0 ? parsedValue : null;
+};
+
+const selectedCustomerNumber = computed(() => getCustomerNumber(selectedCustomer.value));
+
+const normalizedVehicleType = computed(() => {
+  if (vehicleType.value === "") {
+    return null;
+  }
+
+  const parsedValue = Number.parseInt(String(vehicleType.value), 10);
+  return Number.isInteger(parsedValue) && parsedValue >= 0 ? parsedValue : null;
+});
+
+const normalizedRegistrationNumber = computed(() => {
+  return registrationNumber.value.trim().toUpperCase();
+});
+
+const canSubmit = computed(() => {
+  return (
+    !isSubmitting.value &&
+    !isLoadingVehicleTypes.value &&
+    selectedCustomerNumber.value !== null &&
+    normalizedRegistrationNumber.value.length > 0 &&
+    normalizedVehicleType.value !== null
+  );
+});
+
+const parseErrorMessage = (error) => {
+  return SessionUser.functions.parseErrorMessage(error) || t("vehicles.add_modal.error");
+};
+
+const loadVehicleTypes = async () => {
+  isLoadingVehicleTypes.value = true;
+  vehicleTypeError.value = "";
+
+  try {
+    vehicleTypeOptions.value = await SessionUser.objects.vehicles.columns.type.options();
+  } catch (error) {
+    vehicleTypeError.value = parseErrorMessage(error) || t("vehicles.add_modal.type_load_error");
+  } finally {
+    isLoadingVehicleTypes.value = false;
+  }
+};
+
+const closeModal = () => {
+  if (!isSubmitting.value) {
+    emit("close");
+  }
+};
+
+const submitVehicle = async () => {
+  if (!canSubmit.value) {
+    errorMessage.value = t("vehicles.add_modal.validation_error");
+    return;
+  }
+
+  isSubmitting.value = true;
+  errorMessage.value = "";
+
+  try {
+    const response = await SessionUser.objects.vehicles.add(
+      normalizedVehicleType.value,
+      normalizedRegistrationNumber.value,
+      washSubscription.value,
+      selectedCustomerNumber.value,
+      reference.value.trim() || null
+    );
+
+    emit("created", response);
+  } catch (error) {
+    errorMessage.value = parseErrorMessage(error);
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+onMounted(async () => {
+  await loadVehicleTypes();
+  await nextTick();
+  document.getElementById("superuser-add-vehicle-customer-search")?.focus();
+});
+</script>
+
+<template>
+  <div class="modal is-active" data-testid="superuser-add-vehicle-modal">
+    <div class="modal-background" @click="closeModal"></div>
+    <div class="modal-card superuser-add-vehicle-modal">
+      <header class="modal-card-head">
+        <p class="modal-card-title">{{ t("vehicles.add_modal.title") }}</p>
+        <button
+          class="delete"
+          type="button"
+          :aria-label="t('common.close')"
+          data-testid="superuser-add-vehicle-close"
+          @click="closeModal"
+        ></button>
+      </header>
+
+      <section class="modal-card-body">
+        <div v-if="errorMessage" class="notification is-danger is-light" data-testid="superuser-add-vehicle-error">
+          {{ errorMessage }}
+        </div>
+
+        <CustomerSearchSelect
+          v-model="selectedCustomer"
+          input-id="superuser-add-vehicle-customer-search"
+          test-id-prefix="superuser-add-vehicle-customer"
+          :disabled="isSubmitting"
+          :placeholder="t('vehicles.add_modal.customer_placeholder')"
+        />
+
+        <div class="field">
+          <label class="label" for="superuser-add-vehicle-registration">{{ t("vehicles.form.license_plate") }}</label>
+          <div class="control">
+            <input
+              id="superuser-add-vehicle-registration"
+              v-model="registrationNumber"
+              class="input"
+              type="text"
+              autocomplete="off"
+              :placeholder="t('vehicles.add_modal.registration_placeholder')"
+              :disabled="isSubmitting"
+              data-testid="superuser-add-vehicle-registration"
+            />
+          </div>
+        </div>
+
+        <div class="field">
+          <label class="label" for="superuser-add-vehicle-type">{{ t("vehicles.form.type") }}</label>
+          <div class="control" :class="{ 'is-loading': isLoadingVehicleTypes }">
+            <div class="select is-fullwidth">
+              <select
+                id="superuser-add-vehicle-type"
+                v-model="vehicleType"
+                :disabled="isSubmitting || isLoadingVehicleTypes || vehicleTypeOptions.length === 0"
+                data-testid="superuser-add-vehicle-type"
+              >
+                <option disabled value="">{{ t("vehicles.add_modal.type_placeholder") }}</option>
+                <option v-for="option in vehicleTypeOptions" :key="option.id" :value="option.id">
+                  {{ option.name }}
+                </option>
+              </select>
+            </div>
+          </div>
+          <p v-if="vehicleTypeError" class="help is-danger" data-testid="superuser-add-vehicle-type-error">
+            {{ vehicleTypeError }}
+          </p>
+        </div>
+
+        <div class="field">
+          <label class="checkbox">
+            <input
+              v-model="washSubscription"
+              type="checkbox"
+              :disabled="isSubmitting"
+              data-testid="superuser-add-vehicle-wash-subscription"
+            />
+            {{ t("objects.vehicles.columns.wash_subscription") }}
+          </label>
+        </div>
+
+        <div class="field">
+          <label class="label" for="superuser-add-vehicle-reference">{{ t("common.reference") }}</label>
+          <div class="control">
+            <input
+              id="superuser-add-vehicle-reference"
+              v-model="reference"
+              class="input"
+              type="text"
+              autocomplete="off"
+              :placeholder="t('vehicles.add_modal.reference_placeholder')"
+              :disabled="isSubmitting"
+              data-testid="superuser-add-vehicle-reference"
+            />
+          </div>
+        </div>
+      </section>
+
+      <footer class="modal-card-foot is-justify-content-flex-end">
+        <button
+          class="button"
+          type="button"
+          :disabled="isSubmitting"
+          data-testid="superuser-add-vehicle-cancel"
+          @click="closeModal"
+        >
+          {{ t("common.cancel") }}
+        </button>
+        <button
+          class="button is-link"
+          type="button"
+          :class="{ 'is-loading': isSubmitting }"
+          :disabled="!canSubmit"
+          data-testid="superuser-add-vehicle-submit"
+          @click="submitVehicle"
+        >
+          {{ t("vehicles.add_modal.submit") }}
+        </button>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.superuser-add-vehicle-modal {
+  max-width: min(44rem, calc(100vw - 2rem));
+  width: 100%;
+}
+
+.modal-card-body {
+  overflow: visible;
+}
+</style>
diff --git a/src/components/search/economic/CustomerSearchSelect.vue b/src/components/search/economic/CustomerSearchSelect.vue
new file mode 100644
index 00000000..1fb779f5
--- /dev/null
+++ b/src/components/search/economic/CustomerSearchSelect.vue
@@ -0,0 +1,288 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { isSearching, searchCustomer, searchCustomerResults } from "@/components/search/economic/customerSearch.vue";
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: null,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  inputId: {
+    type: String,
+    default: "customer-search-select-input",
+  },
+  testIdPrefix: {
+    type: String,
+    default: "customer-search-select",
+  },
+  placeholder: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "selected", "cleared"]);
+
+const { t } = useI18n();
+
+const searchQuery = ref("");
+const showResults = ref(false);
+const selectedResultIndex = ref(-1);
+
+const getCustomerNumber = (customer) => {
+  const parsedValue = Number.parseInt(
+    String(customer?.customerNumber ?? customer?.customer_number ?? customer?.customer_id ?? customer?.id ?? ""),
+    10
+  );
+
+  return Number.isInteger(parsedValue) && parsedValue > 0 ? parsedValue : null;
+};
+
+const getCustomerName = (customer) => {
+  return String(customer?.name ?? customer?.customer_name ?? customer?.customerName ?? "").trim();
+};
+
+const getCustomerCity = (customer) => {
+  return String(customer?.city ?? customer?.address_city ?? "").trim();
+};
+
+const formatCustomer = (customer) => {
+  if (!customer) {
+    return "";
+  }
+
+  const name = getCustomerName(customer);
+  const customerNumber = getCustomerNumber(customer);
+
+  return [name, customerNumber ? `#${customerNumber}` : null].filter(Boolean).join(" - ");
+};
+
+const selectedCustomerNumber = computed(() => getCustomerNumber(props.modelValue));
+const selectedCustomerName = computed(() => getCustomerName(props.modelValue));
+const selectedCustomerCity = computed(() => getCustomerCity(props.modelValue));
+const hasResults = computed(() => searchCustomerResults.value.length > 0);
+const placeholderText = computed(() => props.placeholder || t("vehicles.add_modal.customer_placeholder"));
+
+const resetSearchResults = () => {
+  searchCustomer(null);
+  selectedResultIndex.value = -1;
+};
+
+const setSelectedCustomer = (customer) => {
+  emit("update:modelValue", customer);
+  emit("selected", customer);
+  searchQuery.value = formatCustomer(customer);
+  showResults.value = false;
+  selectedResultIndex.value = -1;
+};
+
+const clearSelectedCustomer = async () => {
+  emit("update:modelValue", null);
+  emit("cleared");
+  searchQuery.value = "";
+  showResults.value = false;
+  resetSearchResults();
+  await nextTick();
+  document.getElementById(props.inputId)?.focus();
+};
+
+const handleSearchInput = () => {
+  if (props.modelValue) {
+    emit("update:modelValue", null);
+  }
+
+  const query = searchQuery.value.trim();
+  selectedResultIndex.value = -1;
+
+  if (!query) {
+    showResults.value = false;
+    resetSearchResults();
+    return;
+  }
+
+  showResults.value = true;
+  searchCustomer(query);
+};
+
+const handleFocus = () => {
+  if (searchQuery.value.trim() && hasResults.value) {
+    showResults.value = true;
+  }
+};
+
+const handleBlur = () => {
+  window.setTimeout(() => {
+    showResults.value = false;
+    selectedResultIndex.value = -1;
+  }, 150);
+};
+
+const handleKeydown = (event) => {
+  if (!showResults.value || !hasResults.value) {
+    return;
+  }
+
+  if (event.key === "ArrowDown") {
+    event.preventDefault();
+    selectedResultIndex.value = Math.min(selectedResultIndex.value + 1, searchCustomerResults.value.length - 1);
+  } else if (event.key === "ArrowUp") {
+    event.preventDefault();
+    selectedResultIndex.value = Math.max(selectedResultIndex.value - 1, 0);
+  } else if (event.key === "Enter") {
+    event.preventDefault();
+    const selectedCustomer = searchCustomerResults.value[selectedResultIndex.value] || searchCustomerResults.value[0];
+    if (selectedCustomer) {
+      setSelectedCustomer(selectedCustomer);
+    }
+  } else if (event.key === "Escape") {
+    showResults.value = false;
+    selectedResultIndex.value = -1;
+  }
+};
+
+watch(
+  () => props.modelValue,
+  (customer) => {
+    if (customer) {
+      searchQuery.value = formatCustomer(customer);
+    } else if (!document.activeElement || document.activeElement.id !== props.inputId) {
+      searchQuery.value = "";
+    }
+  },
+  { immediate: true }
+);
+
+onBeforeUnmount(() => {
+  resetSearchResults();
+});
+</script>
+
+<template>
+  <div class="customer-search-select">
+    <div class="field">
+      <label class="label" :for="inputId">{{ t("vehicles.add_modal.customer_label") }}</label>
+      <div class="control has-icons-left" :class="{ 'is-loading': isSearching }">
+        <input
+          :id="inputId"
+          v-model="searchQuery"
+          class="input"
+          type="text"
+          autocomplete="off"
+          :placeholder="placeholderText"
+          :disabled="disabled"
+          :aria-expanded="showResults && hasResults"
+          :data-testid="`${testIdPrefix}-input`"
+          @input="handleSearchInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @keydown="handleKeydown"
+        />
+        <span class="icon is-left">
+          <i class="fas fa-search"></i>
+        </span>
+      </div>
+    </div>
+
+    <div
+      v-if="showResults && hasResults"
+      class="dropdown is-active customer-search-select__dropdown"
+      :data-testid="`${testIdPrefix}-results`"
+    >
+      <div class="dropdown-menu customer-search-select__menu" role="listbox">
+        <div class="dropdown-content">
+          <button
+            v-for="(customer, index) in searchCustomerResults"
+            :key="getCustomerNumber(customer) || index"
+            type="button"
+            class="dropdown-item customer-search-select__option"
+            :class="{ 'is-active': selectedResultIndex === index }"
+            :data-testid="`${testIdPrefix}-option-${index}`"
+            @mousedown.prevent="setSelectedCustomer(customer)"
+          >
+            <span class="customer-search-select__option-main">{{ getCustomerName(customer) }}</span>
+            <span class="customer-search-select__option-meta">
+              #{{ getCustomerNumber(customer) }}
+              <template v-if="getCustomerCity(customer)"> · {{ getCustomerCity(customer) }}</template>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="modelValue" class="customer-search-select__selected" :data-testid="`${testIdPrefix}-selected`">
+      <div>
+        <p class="has-text-weight-semibold">{{ t("vehicles.add_modal.selected_customer") }}</p>
+        <p>{{ selectedCustomerName }}</p>
+        <p class="is-size-7 has-text-grey">
+          #{{ selectedCustomerNumber }}
+          <span v-if="selectedCustomerCity"> · {{ selectedCustomerCity }}</span>
+        </p>
+      </div>
+      <button
+        type="button"
+        class="button is-small is-light"
+        :disabled="disabled"
+        :data-testid="`${testIdPrefix}-clear`"
+        @click="clearSelectedCustomer"
+      >
+        {{ t("common.clear") }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.customer-search-select {
+  position: relative;
+}
+
+.customer-search-select__dropdown,
+.customer-search-select__menu {
+  width: 100%;
+}
+
+.customer-search-select__dropdown {
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 4.75rem;
+  z-index: 40;
+}
+
+.customer-search-select__option {
+  align-items: flex-start;
+  background: transparent;
+  border: 0;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  white-space: normal;
+  width: 100%;
+}
+
+.customer-search-select__option-main {
+  font-weight: 600;
+}
+
+.customer-search-select__option-meta {
+  color: #6b7280;
+  font-size: 0.8rem;
+}
+
+.customer-search-select__selected {
+  align-items: flex-start;
+  background: #f5f8fc;
+  border: 1px solid #d8e2ef;
+  border-radius: 6px;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+  padding: 0.85rem 1rem;
+}
+</style>
diff --git a/src/i18n/generated/da-v2.json b/src/i18n/generated/da-v2.json
index ad72e06f..c51cb3c2 100644
--- a/src/i18n/generated/da-v2.json
+++ b/src/i18n/generated/da-v2.json
@@ -5932,6 +5932,20 @@
         },
         "vehicles": {
           "add": "@:{'words.generated.tilføj'} @:{'words.generated.køretøj'}",
+          "add_modal": {
+            "customer_label": "Kunde",
+            "customer_placeholder": "Søg efter kundenavn eller kundenummer",
+            "error": "Køretøjet kunne ikke tilføjes.",
+            "no_customer_results": "Ingen kunder fundet",
+            "reference_placeholder": "Valgfri reference",
+            "registration_placeholder": "Registreringsnummer",
+            "selected_customer": "Valgt kunde",
+            "submit": "Tilføj køretøj",
+            "title": "Tilføj køretøj",
+            "type_load_error": "Køretøjstyper kunne ikke indlæses.",
+            "type_placeholder": "Vælg køretøjstype",
+            "validation_error": "Vælg kunde, registreringsnummer og køretøjstype."
+          },
           "brand": "@:{'templates.generated.compat.admin.pos.make'}",
           "color": "Farve",
           "delete_vehicle": "@:{'templates.generated.compat.vehicles.delete'}",
diff --git a/src/i18n/generated/en-v2.json b/src/i18n/generated/en-v2.json
index 8e9a03dc..e9891084 100644
--- a/src/i18n/generated/en-v2.json
+++ b/src/i18n/generated/en-v2.json
@@ -5764,6 +5764,20 @@
         },
         "vehicles": {
           "add": "@.capitalize:{'words.generated.add'} @:{'words.generated.vehicle'}",
+          "add_modal": {
+            "customer_label": "Customer",
+            "customer_placeholder": "Search by customer name or number",
+            "error": "Unable to add vehicle.",
+            "no_customer_results": "No customers found",
+            "reference_placeholder": "Optional reference",
+            "registration_placeholder": "Registration number",
+            "selected_customer": "Selected customer",
+            "submit": "Add vehicle",
+            "title": "Add vehicle",
+            "type_load_error": "Unable to load vehicle types.",
+            "type_placeholder": "Select vehicle type",
+            "validation_error": "Select a customer, registration number, and vehicle type."
+          },
           "brand": "Brand",
           "color": "Color",
           "delete_vehicle": "@:{'templates.generated.compat.vehicles.delete'}",
diff --git a/src/i18n/generated/global-v2.json b/src/i18n/generated/global-v2.json
index c9bb93c9..e63cb9be 100644
--- a/src/i18n/generated/global-v2.json
+++ b/src/i18n/generated/global-v2.json
@@ -5834,6 +5834,20 @@
     "vehicles": {
       "actions": "@:common.actions",
       "add": "@:{'templates.generated.compat.vehicles.add'}",
+      "add_modal": {
+        "customer_label": "@:{'templates.generated.compat.vehicles.add_modal.customer_label'}",
+        "customer_placeholder": "@:{'templates.generated.compat.vehicles.add_modal.customer_placeholder'}",
+        "error": "@:{'templates.generated.compat.vehicles.add_modal.error'}",
+        "no_customer_results": "@:{'templates.generated.compat.vehicles.add_modal.no_customer_results'}",
+        "reference_placeholder": "@:{'templates.generated.compat.vehicles.add_modal.reference_placeholder'}",
+        "registration_placeholder": "@:{'templates.generated.compat.vehicles.add_modal.registration_placeholder'}",
+        "selected_customer": "@:{'templates.generated.compat.vehicles.add_modal.selected_customer'}",
+        "submit": "@:{'templates.generated.compat.vehicles.add_modal.submit'}",
+        "title": "@:{'templates.generated.compat.vehicles.add_modal.title'}",
+        "type_load_error": "@:{'templates.generated.compat.vehicles.add_modal.type_load_error'}",
+        "type_placeholder": "@:{'templates.generated.compat.vehicles.add_modal.type_placeholder'}",
+        "validation_error": "@:{'templates.generated.compat.vehicles.add_modal.validation_error'}"
+      },
       "brand": "@:{'templates.generated.compat.vehicles.brand'}",
       "color": "@:{'templates.generated.compat.vehicles.color'}",
       "created_at": "@:{'templates.generated.compat.global.generated'}",
diff --git a/src/i18n/source/da/phrases/compat/vehicles/index.json b/src/i18n/source/da/phrases/compat/vehicles/index.json
index fb01286a..4646619c 100644
--- a/src/i18n/source/da/phrases/compat/vehicles/index.json
+++ b/src/i18n/source/da/phrases/compat/vehicles/index.json
@@ -2,6 +2,20 @@
   "compat": {
     "vehicles": {
       "add": "@:{'terms.glossary.tilføj'} @:{'terms.glossary.køretøj'}",
+      "add_modal": {
+        "customer_label": "Kunde",
+        "customer_placeholder": "Søg efter kundenavn eller kundenummer",
+        "error": "Køretøjet kunne ikke tilføjes.",
+        "no_customer_results": "Ingen kunder fundet",
+        "reference_placeholder": "Valgfri reference",
+        "registration_placeholder": "Registreringsnummer",
+        "selected_customer": "Valgt kunde",
+        "submit": "Tilføj køretøj",
+        "title": "Tilføj køretøj",
+        "type_load_error": "Køretøjstyper kunne ikke indlæses.",
+        "type_placeholder": "Vælg køretøjstype",
+        "validation_error": "Vælg kunde, registreringsnummer og køretøjstype."
+      },
       "brand": "@:{'phrases.compat.admin.pos.make'}",
       "color": "Farve",
       "delete_vehicle": "@:{'phrases.compat.vehicles.delete'}",
diff --git a/src/i18n/source/en/phrases/compat/vehicles/index.json b/src/i18n/source/en/phrases/compat/vehicles/index.json
index e25e5230..76883465 100644
--- a/src/i18n/source/en/phrases/compat/vehicles/index.json
+++ b/src/i18n/source/en/phrases/compat/vehicles/index.json
@@ -2,6 +2,20 @@
   "compat": {
     "vehicles": {
       "add": "@.capitalize:{'terms.glossary.add'} @:{'terms.glossary.vehicle'}",
+      "add_modal": {
+        "customer_label": "Customer",
+        "customer_placeholder": "Search by customer name or number",
+        "error": "Unable to add vehicle.",
+        "no_customer_results": "No customers found",
+        "reference_placeholder": "Optional reference",
+        "registration_placeholder": "Registration number",
+        "selected_customer": "Selected customer",
+        "submit": "Add vehicle",
+        "title": "Add vehicle",
+        "type_load_error": "Unable to load vehicle types.",
+        "type_placeholder": "Select vehicle type",
+        "validation_error": "Select a customer, registration number, and vehicle type."
+      },
       "brand": "Brand",
       "color": "Color",
       "delete_vehicle": "@:{'phrases.compat.vehicles.delete'}",
diff --git a/src/i18n/source/global/shared/vehicles/index.json b/src/i18n/source/global/shared/vehicles/index.json
index 1db53a32..14bf9680 100644
--- a/src/i18n/source/global/shared/vehicles/index.json
+++ b/src/i18n/source/global/shared/vehicles/index.json
@@ -2,6 +2,20 @@
   "vehicles": {
     "actions": "@:common.actions",
     "add": "@:{'phrases.compat.vehicles.add'}",
+    "add_modal": {
+      "customer_label": "@:{'phrases.compat.vehicles.add_modal.customer_label'}",
+      "customer_placeholder": "@:{'phrases.compat.vehicles.add_modal.customer_placeholder'}",
+      "error": "@:{'phrases.compat.vehicles.add_modal.error'}",
+      "no_customer_results": "@:{'phrases.compat.vehicles.add_modal.no_customer_results'}",
+      "reference_placeholder": "@:{'phrases.compat.vehicles.add_modal.reference_placeholder'}",
+      "registration_placeholder": "@:{'phrases.compat.vehicles.add_modal.registration_placeholder'}",
+      "selected_customer": "@:{'phrases.compat.vehicles.add_modal.selected_customer'}",
+      "submit": "@:{'phrases.compat.vehicles.add_modal.submit'}",
+      "title": "@:{'phrases.compat.vehicles.add_modal.title'}",
+      "type_load_error": "@:{'phrases.compat.vehicles.add_modal.type_load_error'}",
+      "type_placeholder": "@:{'phrases.compat.vehicles.add_modal.type_placeholder'}",
+      "validation_error": "@:{'phrases.compat.vehicles.add_modal.validation_error'}"
+    },
     "brand": "@:{'phrases.compat.vehicles.brand'}",
     "color": "@:{'phrases.compat.vehicles.color'}",
     "created_at": "@:{'phrases.compat.global.generated'}",
diff --git a/src/views/dashboards/superUserDashboard/Vehicles.vue b/src/views/dashboards/superUserDashboard/Vehicles.vue
index 21d235c3..c71bd2af 100644
--- a/src/views/dashboards/superUserDashboard/Vehicles.vue
+++ b/src/views/dashboards/superUserDashboard/Vehicles.vue
@@ -1,21 +1,53 @@
 <script setup>
-import { getOrders } from "@/components/shop/Orders.vue";
-import { showCreateOrderForm } from "@/components/forms/superUser/createOrderForm.vue";
+import { ref } from "vue";
 import SuperUserDashboardNavigation from "@/views/dashboards/superUserDashboard/SuperUserDashboardNavigation.vue";
-import PageTitle from "@/components/global/PageTitle.vue";
-import Orders from "@/components/displays/Orders.vue";
 import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import VehiclesPagination from "@/components/displays/pagination/models/UserDashboard/VehiclesPagination.vue";
+import SuperuserAddVehicleModal from "@/components/forms/superUser/SuperuserAddVehicleModal.vue";
+import { loadList } from "@/components/pagination/paginatedList.vue";
+
+const isAddVehicleModalOpen = ref(false);
+
+const openAddVehicleModal = () => {
+  isAddVehicleModalOpen.value = true;
+};
+
+const closeAddVehicleModal = () => {
+  isAddVehicleModalOpen.value = false;
+};
+
+const handleVehicleCreated = async () => {
+  closeAddVehicleModal();
+  await loadList();
+};
 </script>
 
 <template>
   <RestrictedPageWrapper :hasPermission="SessionUser.canAccessSuperUser()">
     <SuperUserDashboardNavigation />
-    <VehiclesPagination />
+    <VehiclesPagination>
+      <template #actions>
+        <button
+          class="button is-link button-same-width superuser-vehicles__add-button"
+          type="button"
+          data-testid="superuser-vehicles-add"
+          @click="openAddVehicleModal"
+        >
+          {{ $t("vehicles.add") }}
+        </button>
+      </template>
+    </VehiclesPagination>
+    <SuperuserAddVehicleModal
+      v-if="isAddVehicleModalOpen"
+      @close="closeAddVehicleModal"
+      @created="handleVehicleCreated"
+    />
   </RestrictedPageWrapper>
 </template>
 
 <style scoped>
-
-</style>
\ No newline at end of file
+.superuser-vehicles__add-button {
+  white-space: nowrap;
+}
+</style>
diff --git a/tests/e2e/superuser-vehicles.smoke.spec.js b/tests/e2e/superuser-vehicles.smoke.spec.js
index f2ec8a7e..0f1523ea 100644
--- a/tests/e2e/superuser-vehicles.smoke.spec.js
+++ b/tests/e2e/superuser-vehicles.smoke.spec.js
@@ -7,10 +7,13 @@ async function primeSuperuserSession(page) {
 }
 
 test.describe("Superuser vehicles smoke", () => {
+  test.describe.configure({ mode: "serial" });
+
   test.beforeEach(async ({ page }) => {
     await mockApi(page, {
       authenticated: true,
       permissions: ["superuser", "user"],
+      pos: true,
     });
     await primeSuperuserSession(page);
   });
@@ -23,4 +26,51 @@ test.describe("Superuser vehicles smoke", () => {
     await expect(page.locator("body")).toContainText(/registrerede|registered/i);
     await expect(page.locator("body")).not.toContainText(/Order ID is required/i);
   });
+
+  test("superuser can add a vehicle after selecting a customer from searchable results", async ({ page }) => {
+    const createVehiclePayloads = [];
+
+    page.on("request", (request) => {
+      const url = new URL(request.url());
+      if (url.pathname.endsWith("/vehicles") && request.method() === "POST") {
+        createVehiclePayloads.push(request.postDataJSON());
+      }
+    });
+
+    await page.goto("/superuser/vehicles");
+
+    await page.getByTestId("superuser-vehicles-add").click();
+    await expect(page.getByTestId("superuser-add-vehicle-modal")).toBeVisible();
+
+    await page.getByTestId("superuser-add-vehicle-customer-input").fill("12345679");
+    await expect(page.getByTestId("superuser-add-vehicle-customer-option-0")).toBeVisible();
+    await page.getByTestId("superuser-add-vehicle-customer-option-0").click();
+    await expect(page.getByTestId("superuser-add-vehicle-customer-selected")).toContainText("#12345679");
+
+    await page.getByTestId("superuser-add-vehicle-registration").fill("ab12345");
+    await expect(page.getByTestId("superuser-add-vehicle-type")).toBeEnabled();
+    await page.getByTestId("superuser-add-vehicle-type").selectOption("53");
+    await page.getByTestId("superuser-add-vehicle-wash-subscription").check();
+    await page.getByTestId("superuser-add-vehicle-reference").fill("Fleet reference");
+
+    await Promise.all([
+      page.waitForResponse(
+        (response) => response.url().includes("/vehicles") && response.request().method() === "POST"
+      ),
+      page.getByTestId("superuser-add-vehicle-submit").click(),
+    ]);
+
+    expect(createVehiclePayloads).toEqual([
+      {
+        type: 53,
+        reg: "AB12345",
+        wash_subscription: true,
+        customer_id: 12345679,
+        reference: "Fleet reference",
+      },
+    ]);
+
+    await expect(page.getByTestId("superuser-add-vehicle-modal")).toBeHidden();
+    await expect(page.getByTestId("user-vehicles-table")).toContainText("AB12345");
+  });
 });
diff --git a/tests/e2e/support/network.js b/tests/e2e/support/network.js
index 60163eae..e25c4a8c 100644
--- a/tests/e2e/support/network.js
+++ b/tests/e2e/support/network.js
@@ -2736,6 +2736,7 @@ export function createPosFixture(overrides = {}) {
         last_order_id: 54518,
       },
     ],
+    nextVehicleId: 7002,
     unknownVehicles: [],
     orderBookings: [],
     bookingOrderAssignments: [],
@@ -3278,6 +3279,30 @@ async function handlePosRoute({ route, request, parsedUrl, pathname, method, pos
     return true;
   }
 
+  if (pathname.endsWith("/vehicles") && method === "POST") {
+    const body = request.postDataJSON?.() || {};
+    const customerId = Number(body.customer_id || 0);
+    const customer = posFixture.customersByNumber[customerId] || null;
+    const vehicle = {
+      id: posFixture.nextVehicleId || 9001,
+      reg: String(body.reg || "").toUpperCase(),
+      customer_id: customerId,
+      customer_name: customer?.name || "",
+      type: Number(body.type || 0),
+      status: "verified",
+      barred: false,
+      wash_subscription: Boolean(body.wash_subscription),
+      addons: { enabled: 0, available: 0, list: [] },
+      reference: body.reference || null,
+    };
+
+    posFixture.nextVehicleId = vehicle.id + 1;
+    posFixture.vehicles = [vehicle, ...(posFixture.vehicles || [])];
+
+    await route.fulfill(json({ success: true, data: vehicle }));
+    return true;
+  }
+
   if (pathname.endsWith("/department/vehicles/unknown-customer") && method === "GET") {
     await route.fulfill(json({ success: true, data: posFixture.unknownVehicles || [] }));
     return true;
diff --git a/tests/unit/customer-search-select.spec.js b/tests/unit/customer-search-select.spec.js
new file mode 100644
index 00000000..0d628faf
--- /dev/null
+++ b/tests/unit/customer-search-select.spec.js
@@ -0,0 +1,115 @@
+// @vitest-environment jsdom
+import { nextTick } from "vue";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { mountWithApp } from "./helpers/mountWithApp.js";
+
+const searchMocks = vi.hoisted(() => ({
+  isSearchingRef: null,
+  resultsRef: null,
+  searchCustomer: vi.fn(),
+}));
+
+vi.mock("@/components/search/economic/customerSearch.vue", async () => {
+  const { ref } = await vi.importActual("vue");
+
+  searchMocks.isSearchingRef = ref(false);
+  searchMocks.resultsRef = ref([]);
+
+  return {
+    isSearching: searchMocks.isSearchingRef,
+    searchCustomerResults: searchMocks.resultsRef,
+    searchCustomer: searchMocks.searchCustomer,
+  };
+});
+
+import CustomerSearchSelect from "@/components/search/economic/CustomerSearchSelect.vue";
+
+const customers = [
+  {
+    customerNumber: 12345679,
+    name: "Acme Transport",
+    city: "Taastrup",
+  },
+  {
+    customerNumber: 87654321,
+    name: "Nordic Wash",
+    city: "Copenhagen",
+  },
+];
+
+const messages = {
+  en: {
+    vehicles: {
+      add_modal: {
+        customer_label: "Customer",
+        customer_placeholder: "Search customers",
+        selected_customer: "Selected customer",
+      },
+    },
+    common: {
+      clear: "Clear",
+    },
+  },
+};
+
+const mountComponent = (props = {}) =>
+  mountWithApp(CustomerSearchSelect, {
+    props: {
+      inputId: "test-customer-search",
+      testIdPrefix: "test-customer",
+      ...props,
+    },
+    messages,
+  });
+
+describe("CustomerSearchSelect", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    searchMocks.isSearchingRef.value = false;
+    searchMocks.resultsRef.value = [];
+    searchMocks.searchCustomer.mockImplementation((query) => {
+      searchMocks.resultsRef.value = query ? customers : [];
+      return Promise.resolve(searchMocks.resultsRef.value);
+    });
+  });
+
+  it("searches customers and emits the selected customer", async () => {
+    const wrapper = mountComponent();
+
+    await wrapper.get('[data-testid="test-customer-input"]').setValue("acme");
+    await nextTick();
+
+    expect(searchMocks.searchCustomer).toHaveBeenLastCalledWith("acme");
+    expect(wrapper.get('[data-testid="test-customer-option-0"]').text()).toContain("Acme Transport");
+
+    await wrapper.get('[data-testid="test-customer-option-0"]').trigger("mousedown");
+    await nextTick();
+
+    expect(wrapper.emitted("update:modelValue").at(-1)).toEqual([customers[0]]);
+    expect(wrapper.emitted("selected").at(-1)).toEqual([customers[0]]);
+    await wrapper.setProps({ modelValue: customers[0] });
+    await nextTick();
+
+    expect(wrapper.get('[data-testid="test-customer-selected"]').text()).toContain("Acme Transport");
+  });
+
+  it("supports keyboard selection and clearing", async () => {
+    const wrapper = mountComponent();
+
+    await wrapper.get('[data-testid="test-customer-input"]').setValue("nordic");
+    await wrapper.get('[data-testid="test-customer-input"]').trigger("keydown", { key: "ArrowDown" });
+    await wrapper.get('[data-testid="test-customer-input"]').trigger("keydown", { key: "ArrowDown" });
+    await wrapper.get('[data-testid="test-customer-input"]').trigger("keydown", { key: "Enter" });
+    await nextTick();
+
+    expect(wrapper.emitted("update:modelValue").at(-1)).toEqual([customers[1]]);
+    await wrapper.setProps({ modelValue: customers[1] });
+    await nextTick();
+
+    await wrapper.get('[data-testid="test-customer-clear"]').trigger("click");
+    await nextTick();
+
+    expect(wrapper.emitted("update:modelValue").at(-1)).toEqual([null]);
+    expect(wrapper.emitted("cleared")).toHaveLength(1);
+  });
+});
diff --git a/tests/unit/superuser-add-vehicle-modal.spec.js b/tests/unit/superuser-add-vehicle-modal.spec.js
new file mode 100644
index 00000000..40a7497e
--- /dev/null
+++ b/tests/unit/superuser-add-vehicle-modal.spec.js
@@ -0,0 +1,152 @@
+// @vitest-environment jsdom
+import { nextTick } from "vue";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { mountWithApp } from "./helpers/mountWithApp.js";
+
+const sessionMocks = vi.hoisted(() => ({
+  addVehicle: vi.fn(),
+  parseErrorMessage: vi.fn(),
+  vehicleTypeOptions: vi.fn(),
+}));
+
+vi.mock("@/components/session/token/SessionUser.vue", () => {
+  const sessionUser = {
+    functions: {
+      parseErrorMessage: sessionMocks.parseErrorMessage,
+    },
+    objects: {
+      vehicles: {
+        add: sessionMocks.addVehicle,
+        columns: {
+          type: {
+            options: sessionMocks.vehicleTypeOptions,
+          },
+        },
+      },
+    },
+  };
+
+  return {
+    SessionUser: sessionUser,
+    default: sessionUser,
+  };
+});
+
+import SuperuserAddVehicleModal from "@/components/forms/superUser/SuperuserAddVehicleModal.vue";
+
+const CustomerSearchSelectStub = {
+  props: ["modelValue"],
+  emits: ["update:modelValue"],
+  template: `
+    <button
+      type="button"
+      data-testid="customer-select-stub"
+      @click="$emit('update:modelValue', { customerNumber: 12345679, name: 'Acme Transport' })"
+    >
+      Select customer
+    </button>
+  `,
+};
+
+const messages = {
+  en: {
+    vehicles: {
+      add_modal: {
+        customer_label: "Customer",
+        customer_placeholder: "Search customers",
+        error: "Unable to add vehicle.",
+        reference_placeholder: "Optional reference",
+        registration_placeholder: "Registration number",
+        selected_customer: "Selected customer",
+        submit: "Add vehicle",
+        title: "Add vehicle",
+        type_load_error: "Unable to load vehicle types.",
+        type_placeholder: "Select vehicle type",
+        validation_error: "Select required fields.",
+      },
+      form: {
+        license_plate: "Registration",
+        type: "Type",
+      },
+    },
+    objects: {
+      vehicles: {
+        columns: {
+          wash_subscription: "Wash subscription",
+        },
+      },
+    },
+    common: {
+      cancel: "Cancel",
+      close: "Close",
+      reference: "Reference",
+    },
+  },
+};
+
+const flushAll = async () => {
+  await Promise.resolve();
+  await nextTick();
+  await Promise.resolve();
+  await nextTick();
+};
+
+const mountComponent = () =>
+  mountWithApp(SuperuserAddVehicleModal, {
+    messages,
+    global: {
+      stubs: {
+        CustomerSearchSelect: CustomerSearchSelectStub,
+      },
+    },
+  });
+
+describe("SuperuserAddVehicleModal", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    sessionMocks.vehicleTypeOptions.mockResolvedValue([
+      {
+        id: 53,
+        name: "Forvogn",
+      },
+    ]);
+    sessionMocks.addVehicle.mockResolvedValue({
+      data: {
+        data: {
+          id: 7002,
+        },
+      },
+    });
+    sessionMocks.parseErrorMessage.mockReturnValue(null);
+  });
+
+  it("submits the selected customer and vehicle fields through the vehicle API", async () => {
+    const wrapper = mountComponent();
+    await flushAll();
+
+    await wrapper.get('[data-testid="customer-select-stub"]').trigger("click");
+    await wrapper.get('[data-testid="superuser-add-vehicle-registration"]').setValue("ab12345");
+    await wrapper.get('[data-testid="superuser-add-vehicle-type"]').setValue("53");
+    await wrapper.get('[data-testid="superuser-add-vehicle-wash-subscription"]').setValue(true);
+    await wrapper.get('[data-testid="superuser-add-vehicle-reference"]').setValue("Fleet ref");
+    await wrapper.get('[data-testid="superuser-add-vehicle-submit"]').trigger("click");
+    await flushAll();
+
+    expect(sessionMocks.addVehicle).toHaveBeenCalledWith(53, "AB12345", true, 12345679, "Fleet ref");
+    expect(wrapper.emitted("created")).toHaveLength(1);
+  });
+
+  it("keeps submit disabled until required fields are present", async () => {
+    const wrapper = mountComponent();
+    await flushAll();
+
+    expect(wrapper.get('[data-testid="superuser-add-vehicle-submit"]').attributes("disabled")).toBeDefined();
+
+    await wrapper.get('[data-testid="customer-select-stub"]').trigger("click");
+    await wrapper.get('[data-testid="superuser-add-vehicle-registration"]').setValue("AB12345");
+    await wrapper.get('[data-testid="superuser-add-vehicle-type"]').setValue("53");
+    await nextTick();
+
+    expect(wrapper.get('[data-testid="superuser-add-vehicle-submit"]').attributes("disabled")).toBeUndefined();
+  });
+});

From dec90bbbbf096dd40e7c06cb0bc137810141d25c Mon Sep 17 00:00:00 2001
From: Jeppe B <2jepp9350@gmail.com>
Date: Mon, 6 Jul 2026 14:07:04 +0200
Subject: [PATCH 09/19] Block restricted mobile additional items (#148)

Co-authored-by: Jeppe Bundgaard <jb@truckwash.dk>
---
 ...osDepartmentStepMobile2AdditionalItems.vue | 51 +++++++++++++---
 tests/e2e/pos-mobile-order-flow.spec.js       | 60 +++++++++++++++++++
 2 files changed, 104 insertions(+), 7 deletions(-)

diff --git a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2AdditionalItems.vue b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2AdditionalItems.vue
index 396067d0..7845a042 100644
--- a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2AdditionalItems.vue
+++ b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2AdditionalItems.vue
@@ -22,7 +22,7 @@ import PosDepartmentStep2MobileVehicleSelection
 import GenericButton from "@/components/viewport/page/templates/generic/graphics/GenericButton.vue";
 import PosDepartmentStepMobile2FloatingCart
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2FloatingCart.vue";
-import { isAddonRestricted, canBuyAdditionalServices } from "@/components/shop/POSDepartmentProcess.vue";
+import { isAddonRestricted, canBuyAdditionalServices, isProductRestricted } from "@/components/shop/POSDepartmentProcess.vue";
 
 const props = defineProps({
   label: {
@@ -46,6 +46,7 @@ const props = defineProps({
   },
 });
 
+const canSelectAdditionalItems = computed(() => canBuyAdditionalServices());
 const checked = ref(props.defaultChecked);
 // Function to generate a summary from the last order
 function generateSummary(order: PosOrder): string {
@@ -72,6 +73,12 @@ const displaySubtitle = computed(() => {
 });
 // Emit event on toggle
 function onToggle(isOpen: boolean) {
+  if (isOpen && !canSelectAdditionalItems.value) {
+    checked.value = false;
+    pos.views.additionalItemSelection.value = false;
+    return;
+  }
+
   checked.value = isOpen;
   // Open the additional item selection view if toggled open
   if (isOpen) {
@@ -118,17 +125,45 @@ const getAvailableAdditionalItems = () => {
   }));
 }
 const availableAdditionalItems = ref<Addon[]>(getAvailableAdditionalItems());
+const isAdditionalItemRestricted = (product: PosProduct) => {
+  if (!canSelectAdditionalItems.value) {
+    return true;
+  }
+  if (isProductRestricted(product)) {
+    return true;
+  }
+  return isAddonRestricted(convertProductToAddon(product));
+}
+
+watch(canSelectAdditionalItems, (canSelect) => {
+  if (!canSelect) {
+    checked.value = false;
+    pos.views.additionalItemSelection.value = false;
+  }
+});
 
 // Computed property to filter out restricted additional items based on customer attributes
 const filteredAdditionalItems = computed(() => {
   // If additional services are restricted, return empty array
-  if (!canBuyAdditionalServices()) {
+  if (!canSelectAdditionalItems.value) {
     return [];
   }
   // Filter out individually restricted addons
-  return availableAdditionalItems.value.filter((addon: Addon) => !isAddonRestricted(addon));
+  return availableAdditionalItems.value.filter((addon: Addon) => {
+    if (isAddonRestricted(addon)) {
+      return false;
+    }
+    if (addon.product && isProductRestricted(addon.product)) {
+      return false;
+    }
+    return true;
+  });
 });
 const onClickAddOtherProduct = () => {
+  if (!canSelectAdditionalItems.value) {
+    pos.views.additionalItemSelection.value = false;
+    return;
+  }
   pos.views.additionalItemSelection.value = !pos.views.additionalItemSelection.value;
 }
 
@@ -159,7 +194,9 @@ watch(() => pos.transactionItems.additionalItems.value, (newVal) => {
 }, { deep: true });
 
 const onClickAddProduct = async (product: PosProduct) => {
-  // If the product requires note, open note input.
+  if (isAdditionalItemRestricted(product)) {
+    return;
+  }
   pos.transactionItems.addAdditionalItem(product);
   // If the view is fullscreen, close it after adding
   //if (pos.views.additionalItemSelection.value) {
@@ -171,7 +208,7 @@ const onClickAddProduct = async (product: PosProduct) => {
 <template>
   <div data-testid="pos-mobile-additional-items">
   <!-- Minimal view, when not set as fullscreen view -->
-    <WhiteBoxCard :toggleable="pos.transactionItems.additionalItems.value && pos.transactionItems.additionalItems.value.length == 0"
+    <WhiteBoxCard :toggleable="canSelectAdditionalItems && pos.transactionItems.additionalItems.value && pos.transactionItems.additionalItems.value.length == 0"
                   :defaultOpen="pos.transactionItems.additionalItems.value && pos.transactionItems.additionalItems.value.length > 0"
                   @toggle="onToggle"
                   :forceState="(pos.transactionItems.additionalItems.value && pos.transactionItems.additionalItems.value.length > 0) ? true : (pos.views.additionalItemSelection.value)"
@@ -201,7 +238,7 @@ const onClickAddProduct = async (product: PosProduct) => {
         </div>
       </template>
       <!-- Footer -->
-      <template #footer>
+      <template #footer v-if="canSelectAdditionalItems">
         <!-- Select other product button -->
         <a class="card-footer-item" data-testid="pos-mobile-additional-items-open" @click="onClickAddOtherProduct">
           <span class="icon">
@@ -212,7 +249,7 @@ const onClickAddProduct = async (product: PosProduct) => {
       </template>
     </WhiteBoxCard>
     <!-- Fullscreen view, when selecting other products -->
-    <template v-else>
+    <template v-else-if="canSelectAdditionalItems">
       <div data-testid="pos-mobile-additional-items-selection">
       <!-- Categories of products -->
       <PosDepartmentStep2MobileVehicleSelection :onAddProduct="onClickAddProduct" :onSearchClick="() => console.warn('AdditionalItem Search Clicked')"/><!-- :asAddons="true" :addons="availableAdditionalItems" @update:addons="availableAdditionalItems = $event"/>-->
diff --git a/tests/e2e/pos-mobile-order-flow.spec.js b/tests/e2e/pos-mobile-order-flow.spec.js
index 4eb464dc..549b6f0e 100644
--- a/tests/e2e/pos-mobile-order-flow.spec.js
+++ b/tests/e2e/pos-mobile-order-flow.spec.js
@@ -3272,6 +3272,66 @@ test.describe("POS mobile order flow", () => {
     expect(createdProductIds).toEqual([53, 71, 91]);
   });
 
+  test("manual step 2 blocks additional items when customer restricts additional services", async ({ page }) => {
+    const orderId = 9414;
+    const fixture = createMobilePosFixture({
+      customerAttributesByNumber: {
+        [REGULAR_CUSTOMER_ID]: [
+          {
+            id: 941401,
+            customer_number: REGULAR_CUSTOMER_ID,
+            attribute: "restrictAdditionalServices",
+          },
+        ],
+      },
+      ordersById: {
+        [orderId]: buildRegularOrder(orderId, {
+          reference: "STEP2-RESTRICT-ADDITIONAL",
+          reg_1: "ZZ00000",
+        }),
+      },
+      orderItemsByOrderId: {
+        [orderId]: [],
+      },
+    });
+
+    await setupMobilePosPage(page, fixture, {
+      token: "mobile-step2-restrict-additional-token",
+      seedState: {
+        customerId: REGULAR_CUSTOMER_ID,
+        reg: "ZZ00000",
+        reference: "STEP2-RESTRICT-ADDITIONAL",
+        includePrimaryItem: false,
+        vehicleType: null,
+        lastOrderId: null,
+      },
+      route: {
+        step: 2,
+        orderId,
+        customerId: REGULAR_CUSTOMER_ID,
+      },
+    });
+
+    await expect.poll(() => fixture.requestCounters.customerAttributesGet, { timeout: 10_000 }).toBeGreaterThan(0);
+    await selectPrimaryProduct(page, 53);
+    await expect(page.getByTestId("pos-mobile-additional-items-open")).toHaveCount(1);
+
+    await page.getByTestId("pos-mobile-additional-items-open").click();
+    await expect(page.getByTestId("pos-mobile-additional-items-selection")).toHaveCount(0);
+
+    await longPressAdditionalItems(page);
+    await expect(page.getByTestId("pos-mobile-additional-items-selection")).toHaveCount(0);
+    await expect
+      .poll(
+        async () => {
+          const snapshot = await getStoredPosSnapshot(page);
+          return snapshot?.transactionItems?.additionalItems || [];
+        },
+        { timeout: 10_000 }
+      )
+      .toEqual([]);
+  });
+
   test("clear all deletes the order and returns to the scanner", async ({ page }) => {
     const orderId = 9403;
     const fixture = createMobilePosFixture({

From 278298ecd29a4b62222911373afe37e5208baca4 Mon Sep 17 00:00:00 2001
From: Jeppe B <2jepp9350@gmail.com>
Date: Mon, 6 Jul 2026 14:28:24 +0200
Subject: [PATCH 10/19] Submit error reports without screenshots (#153)

Co-authored-by: Jeppe Bundgaard <jb@truckwash.dk>
---
 src/components/global/ErrorReportLauncher.vue |  15 +-
 src/i18n/generated/da-v2.json                 |   6 +-
 src/i18n/generated/de-v2.json                 |   6 +-
 src/i18n/generated/en-v2.json                 |   6 +-
 src/i18n/generated/no-v2.json                 |   6 +-
 src/i18n/generated/sv-v2.json                 |   6 +-
 .../da/phrases/compat/error_report/index.json |   6 +-
 .../de/phrases/compat/error_report/index.json |   6 +-
 .../en/phrases/compat/error_report/index.json |   6 +-
 .../no/phrases/compat/error_report/index.json |   6 +-
 .../sv/phrases/compat/error_report/index.json |   6 +-
 tests/e2e/errorReports.spec.ts                | 156 +++++++++++++++++-
 12 files changed, 191 insertions(+), 40 deletions(-)

diff --git a/src/components/global/ErrorReportLauncher.vue b/src/components/global/ErrorReportLauncher.vue
index 8c59be7e..12fc9e92 100644
--- a/src/components/global/ErrorReportLauncher.vue
+++ b/src/components/global/ErrorReportLauncher.vue
@@ -19,17 +19,17 @@ const SENSITIVE_QUERY_KEYS = /authorization|password|passwd|secret|token|api[_-]
 const FALLBACK_LABELS = {
   "error_report.button": "Report error",
   "error_report.title": "Report error",
-  "error_report.subtitle": "Send the current screen and recent error details to support.",
+  "error_report.subtitle": "Send recent error details to support. A screenshot is attached when available.",
   "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.consent": "I accept that recent request errors, Vue errors, browser details, my answers, and an app screenshot when available are collected for troubleshooting.",
   "error_report.submit": "Submit report",
   "error_report.submitted": "Error report submitted.",
-  "error_report.capture_failed": "The screen capture failed. Please try again.",
+  "error_report.capture_failed": "The screen capture failed. The report will be sent without a screenshot.",
   "error_report.submit_failed": "The error report could not be submitted.",
   "error_report.required": "All fields and data collection acceptance are required.",
 };
@@ -277,15 +277,18 @@ const submit = async () => {
 
   isSubmitting.value = true;
   try {
-    let screenshot = "";
+    let screenshot = null;
     try {
       screenshot = await captureScreenshot();
     } catch {
       captureError.value = tr("error_report.capture_failed");
-      return;
     }
 
     const context = buildContext();
+    context.screenshot_attachment = {
+      status: screenshot ? "stored" : "capture_failed",
+      attached: Boolean(screenshot),
+    };
     await submitErrorReport({
       before_error: form.before_error.trim(),
       expected: form.expected.trim(),
@@ -340,7 +343,7 @@ const submit = async () => {
         <div v-if="submitted" class="notification is-success is-light" data-testid="error-report-submitted">
           {{ tr("error_report.submitted") }}
         </div>
-        <div v-if="captureError" class="notification is-danger is-light">
+        <div v-if="captureError" class="notification is-warning is-light" data-testid="error-report-capture-warning">
           {{ captureError }}
         </div>
         <div v-if="submitError" class="notification is-danger is-light">
diff --git a/src/i18n/generated/da-v2.json b/src/i18n/generated/da-v2.json
index c51cb3c2..a4180fea 100644
--- a/src/i18n/generated/da-v2.json
+++ b/src/i18n/generated/da-v2.json
@@ -3478,17 +3478,17 @@
         "error_report": {
           "button": "Rapporter fejl",
           "title": "Rapporter fejl",
-          "subtitle": "Send det aktuelle skærmbillede og de seneste fejldetaljer til support.",
+          "subtitle": "Send de seneste fejldetaljer til support. Et skærmbillede vedhæftes, når det er muligt.",
           "before_error": "Hvad lavede du, før fejlen opstod?",
           "expected": "Hvad forventede du, der ville ske?",
           "actual": "Hvad skete der faktisk?",
           "before_error_placeholder": "Beskriv handlingen, du var i gang med, for eksempel at åbne ordrer eller vælge en kunde.",
           "expected_placeholder": "Beskriv det resultat, du forventede at se.",
           "actual_placeholder": "Beskriv, hvad du så i stedet, inklusive eventuel fejltekst.",
-          "consent": "Jeg accepterer, at det aktuelle app-skærmbillede, de seneste request-fejl, Vue-fejl, browseroplysninger og mine svar indsamles til fejlfinding.",
+          "consent": "Jeg accepterer, at de seneste request-fejl, Vue-fejl, browseroplysninger, mine svar og et app-skærmbillede, når det er muligt, indsamles til fejlfinding.",
           "submit": "Send rapport",
           "submitted": "Fejlrapporten er sendt.",
-          "capture_failed": "Skærmbilledet kunne ikke oprettes. Prøv igen.",
+          "capture_failed": "Skærmbilledet kunne ikke oprettes. Rapporten sendes uden skærmbillede.",
           "submit_failed": "Fejlrapporten kunne ikke sendes.",
           "required": "Alle felter og accept af dataindsamling er påkrævet.",
           "page_subtitle": "Rapporterede skærme, request-fejl og Vue-fejl",
diff --git a/src/i18n/generated/de-v2.json b/src/i18n/generated/de-v2.json
index bc7ca8aa..702341cc 100644
--- a/src/i18n/generated/de-v2.json
+++ b/src/i18n/generated/de-v2.json
@@ -3589,17 +3589,17 @@
         "error_report": {
           "button": "Fehler melden",
           "title": "Fehler melden",
-          "subtitle": "Sende den aktuellen Bildschirm und die letzten Fehlerdetails an den Support.",
+          "subtitle": "Sende die letzten Fehlerdetails an den Support. Ein Screenshot wird angehängt, wenn möglich.",
           "before_error": "Was haben Sie getan, bevor der Fehler auftrat?",
           "expected": "Was hatten Sie erwartet?",
           "actual": "Was ist tatsächlich passiert?",
           "before_error_placeholder": "Beschreiben Sie die Aktion, zum Beispiel Bestellungen öffnen oder einen Kunden auswählen.",
           "expected_placeholder": "Beschreiben Sie das erwartete Ergebnis.",
           "actual_placeholder": "Beschreiben Sie, was stattdessen zu sehen war, inklusive Fehlermeldung.",
-          "consent": "Ich akzeptiere, dass der aktuelle App-Bildschirm, letzte Request-Fehler, Vue-Fehler, Browserdetails und meine Antworten zur Fehlersuche erfasst werden.",
+          "consent": "Ich akzeptiere, dass letzte Request-Fehler, Vue-Fehler, Browserdetails, meine Antworten und ein App-Screenshot, wenn möglich, zur Fehlersuche erfasst werden.",
           "submit": "Bericht senden",
           "submitted": "Fehlerbericht gesendet.",
-          "capture_failed": "Der Screenshot konnte nicht erstellt werden. Bitte versuchen Sie es erneut.",
+          "capture_failed": "Der Screenshot konnte nicht erstellt werden. Der Bericht wird ohne Screenshot gesendet.",
           "submit_failed": "Der Fehlerbericht konnte nicht gesendet werden.",
           "required": "Alle Felder und die Zustimmung zur Datenerfassung sind erforderlich.",
           "page_subtitle": "Gemeldete Bildschirme, Request-Fehler und Vue-Fehler",
diff --git a/src/i18n/generated/en-v2.json b/src/i18n/generated/en-v2.json
index e9891084..c5195ffc 100644
--- a/src/i18n/generated/en-v2.json
+++ b/src/i18n/generated/en-v2.json
@@ -3310,17 +3310,17 @@
         "error_report": {
           "button": "Report error",
           "title": "Report error",
-          "subtitle": "Send the current screen and recent error details to support.",
+          "subtitle": "Send recent error details to support. A screenshot is attached when available.",
           "before_error": "What were you doing before the error occurred?",
           "expected": "What did you expect would happen?",
           "actual": "What actually happened?",
           "before_error_placeholder": "Describe the action you were taking, for example opening orders or selecting a customer.",
           "expected_placeholder": "Describe the result you expected to see.",
           "actual_placeholder": "Describe what you saw instead, including any error text.",
-          "consent": "I accept that the current app screen, recent request errors, Vue errors, browser details, and my answers are collected for troubleshooting.",
+          "consent": "I accept that recent request errors, Vue errors, browser details, my answers, and an app screenshot when available are collected for troubleshooting.",
           "submit": "Submit report",
           "submitted": "Error report submitted.",
-          "capture_failed": "The screen capture failed. Please try again.",
+          "capture_failed": "The screen capture failed. The report will be sent without a screenshot.",
           "submit_failed": "The error report could not be submitted.",
           "required": "All fields and data collection acceptance are required.",
           "page_subtitle": "Reported screens, request failures, and Vue errors",
diff --git a/src/i18n/generated/no-v2.json b/src/i18n/generated/no-v2.json
index 089958f0..c25dad2c 100644
--- a/src/i18n/generated/no-v2.json
+++ b/src/i18n/generated/no-v2.json
@@ -3592,17 +3592,17 @@
         "error_report": {
           "button": "Rapporter feil",
           "title": "Rapporter feil",
-          "subtitle": "Send gjeldende skjermbilde og de siste feildetaljene til support.",
+          "subtitle": "Send de siste feildetaljene til support. Et skjermbilde legges ved når det er mulig.",
           "before_error": "Hva gjorde du før feilen oppstod?",
           "expected": "Hva forventet du at skulle skje?",
           "actual": "Hva skjedde faktisk?",
           "before_error_placeholder": "Beskriv handlingen du utførte, for eksempel å åpne ordre eller velge en kunde.",
           "expected_placeholder": "Beskriv resultatet du forventet å se.",
           "actual_placeholder": "Beskriv hva du så i stedet, inkludert eventuell feiltekst.",
-          "consent": "Jeg godtar at gjeldende app-skjermbilde, siste request-feil, Vue-feil, nettleserdetaljer og svarene mine samles inn for feilsøking.",
+          "consent": "Jeg godtar at siste request-feil, Vue-feil, nettleserdetaljer, svarene mine og et app-skjermbilde når det er mulig, samles inn for feilsøking.",
           "submit": "Send rapport",
           "submitted": "Feilrapport sendt.",
-          "capture_failed": "Skjermbildet kunne ikke tas. Prøv igjen.",
+          "capture_failed": "Skjermbildet kunne ikke tas. Rapporten sendes uten skjermbilde.",
           "submit_failed": "Feilrapporten kunne ikke sendes.",
           "required": "Alle felter og godkjenning av datainnsamling er påkrevd.",
           "page_subtitle": "Rapporterte skjermer, request-feil og Vue-feil",
diff --git a/src/i18n/generated/sv-v2.json b/src/i18n/generated/sv-v2.json
index 88c31b06..915a65b9 100644
--- a/src/i18n/generated/sv-v2.json
+++ b/src/i18n/generated/sv-v2.json
@@ -3642,17 +3642,17 @@
         "error_report": {
           "button": "Rapportera fel",
           "title": "Rapportera fel",
-          "subtitle": "Skicka aktuell skärm och de senaste feldetaljerna till support.",
+          "subtitle": "Skicka de senaste feldetaljerna till support. En skärmbild bifogas när det är möjligt.",
           "before_error": "Vad gjorde du innan felet uppstod?",
           "expected": "Vad förväntade du dig skulle hända?",
           "actual": "Vad hände faktiskt?",
           "before_error_placeholder": "Beskriv åtgärden du gjorde, till exempel att öppna ordrar eller välja en kund.",
           "expected_placeholder": "Beskriv resultatet du förväntade dig att se.",
           "actual_placeholder": "Beskriv vad du såg i stället, inklusive eventuell feltext.",
-          "consent": "Jag accepterar att aktuell app-skärm, senaste request-fel, Vue-fel, webbläsardetaljer och mina svar samlas in för felsökning.",
+          "consent": "Jag accepterar att senaste request-fel, Vue-fel, webbläsardetaljer, mina svar och en app-skärmbild när det är möjligt samlas in för felsökning.",
           "submit": "Skicka rapport",
           "submitted": "Felrapport skickad.",
-          "capture_failed": "Skärmbilden kunde inte tas. Försök igen.",
+          "capture_failed": "Skärmbilden kunde inte tas. Rapporten skickas utan skärmbild.",
           "submit_failed": "Felrapporten kunde inte skickas.",
           "required": "Alla fält och godkännande av datainsamling krävs.",
           "page_subtitle": "Rapporterade skärmar, request-fel och Vue-fel",
diff --git a/src/i18n/source/da/phrases/compat/error_report/index.json b/src/i18n/source/da/phrases/compat/error_report/index.json
index fe4f779e..6f1be0a8 100644
--- a/src/i18n/source/da/phrases/compat/error_report/index.json
+++ b/src/i18n/source/da/phrases/compat/error_report/index.json
@@ -3,17 +3,17 @@
     "error_report": {
       "button": "Rapporter fejl",
       "title": "Rapporter fejl",
-      "subtitle": "Send det aktuelle skærmbillede og de seneste fejldetaljer til support.",
+      "subtitle": "Send de seneste fejldetaljer til support. Et skærmbillede vedhæftes, når det er muligt.",
       "before_error": "Hvad lavede du, før fejlen opstod?",
       "expected": "Hvad forventede du, der ville ske?",
       "actual": "Hvad skete der faktisk?",
       "before_error_placeholder": "Beskriv handlingen, du var i gang med, for eksempel at åbne ordrer eller vælge en kunde.",
       "expected_placeholder": "Beskriv det resultat, du forventede at se.",
       "actual_placeholder": "Beskriv, hvad du så i stedet, inklusive eventuel fejltekst.",
-      "consent": "Jeg accepterer, at det aktuelle app-skærmbillede, de seneste request-fejl, Vue-fejl, browseroplysninger og mine svar indsamles til fejlfinding.",
+      "consent": "Jeg accepterer, at de seneste request-fejl, Vue-fejl, browseroplysninger, mine svar og et app-skærmbillede, når det er muligt, indsamles til fejlfinding.",
       "submit": "Send rapport",
       "submitted": "Fejlrapporten er sendt.",
-      "capture_failed": "Skærmbilledet kunne ikke oprettes. Prøv igen.",
+      "capture_failed": "Skærmbilledet kunne ikke oprettes. Rapporten sendes uden skærmbillede.",
       "submit_failed": "Fejlrapporten kunne ikke sendes.",
       "required": "Alle felter og accept af dataindsamling er påkrævet.",
       "page_subtitle": "Rapporterede skærme, request-fejl og Vue-fejl",
diff --git a/src/i18n/source/de/phrases/compat/error_report/index.json b/src/i18n/source/de/phrases/compat/error_report/index.json
index 4d2b5a0b..5dc6fc4e 100644
--- a/src/i18n/source/de/phrases/compat/error_report/index.json
+++ b/src/i18n/source/de/phrases/compat/error_report/index.json
@@ -3,17 +3,17 @@
     "error_report": {
       "button": "Fehler melden",
       "title": "Fehler melden",
-      "subtitle": "Sende den aktuellen Bildschirm und die letzten Fehlerdetails an den Support.",
+      "subtitle": "Sende die letzten Fehlerdetails an den Support. Ein Screenshot wird angehängt, wenn möglich.",
       "before_error": "Was haben Sie getan, bevor der Fehler auftrat?",
       "expected": "Was hatten Sie erwartet?",
       "actual": "Was ist tatsächlich passiert?",
       "before_error_placeholder": "Beschreiben Sie die Aktion, zum Beispiel Bestellungen öffnen oder einen Kunden auswählen.",
       "expected_placeholder": "Beschreiben Sie das erwartete Ergebnis.",
       "actual_placeholder": "Beschreiben Sie, was stattdessen zu sehen war, inklusive Fehlermeldung.",
-      "consent": "Ich akzeptiere, dass der aktuelle App-Bildschirm, letzte Request-Fehler, Vue-Fehler, Browserdetails und meine Antworten zur Fehlersuche erfasst werden.",
+      "consent": "Ich akzeptiere, dass letzte Request-Fehler, Vue-Fehler, Browserdetails, meine Antworten und ein App-Screenshot, wenn möglich, zur Fehlersuche erfasst werden.",
       "submit": "Bericht senden",
       "submitted": "Fehlerbericht gesendet.",
-      "capture_failed": "Der Screenshot konnte nicht erstellt werden. Bitte versuchen Sie es erneut.",
+      "capture_failed": "Der Screenshot konnte nicht erstellt werden. Der Bericht wird ohne Screenshot gesendet.",
       "submit_failed": "Der Fehlerbericht konnte nicht gesendet werden.",
       "required": "Alle Felder und die Zustimmung zur Datenerfassung sind erforderlich.",
       "page_subtitle": "Gemeldete Bildschirme, Request-Fehler und Vue-Fehler",
diff --git a/src/i18n/source/en/phrases/compat/error_report/index.json b/src/i18n/source/en/phrases/compat/error_report/index.json
index 2e8094ed..f5945bb5 100644
--- a/src/i18n/source/en/phrases/compat/error_report/index.json
+++ b/src/i18n/source/en/phrases/compat/error_report/index.json
@@ -3,17 +3,17 @@
     "error_report": {
       "button": "Report error",
       "title": "Report error",
-      "subtitle": "Send the current screen and recent error details to support.",
+      "subtitle": "Send recent error details to support. A screenshot is attached when available.",
       "before_error": "What were you doing before the error occurred?",
       "expected": "What did you expect would happen?",
       "actual": "What actually happened?",
       "before_error_placeholder": "Describe the action you were taking, for example opening orders or selecting a customer.",
       "expected_placeholder": "Describe the result you expected to see.",
       "actual_placeholder": "Describe what you saw instead, including any error text.",
-      "consent": "I accept that the current app screen, recent request errors, Vue errors, browser details, and my answers are collected for troubleshooting.",
+      "consent": "I accept that recent request errors, Vue errors, browser details, my answers, and an app screenshot when available are collected for troubleshooting.",
       "submit": "Submit report",
       "submitted": "Error report submitted.",
-      "capture_failed": "The screen capture failed. Please try again.",
+      "capture_failed": "The screen capture failed. The report will be sent without a screenshot.",
       "submit_failed": "The error report could not be submitted.",
       "required": "All fields and data collection acceptance are required.",
       "page_subtitle": "Reported screens, request failures, and Vue errors",
diff --git a/src/i18n/source/no/phrases/compat/error_report/index.json b/src/i18n/source/no/phrases/compat/error_report/index.json
index 0e454c37..dad5f86d 100644
--- a/src/i18n/source/no/phrases/compat/error_report/index.json
+++ b/src/i18n/source/no/phrases/compat/error_report/index.json
@@ -3,17 +3,17 @@
     "error_report": {
       "button": "Rapporter feil",
       "title": "Rapporter feil",
-      "subtitle": "Send gjeldende skjermbilde og de siste feildetaljene til support.",
+      "subtitle": "Send de siste feildetaljene til support. Et skjermbilde legges ved når det er mulig.",
       "before_error": "Hva gjorde du før feilen oppstod?",
       "expected": "Hva forventet du at skulle skje?",
       "actual": "Hva skjedde faktisk?",
       "before_error_placeholder": "Beskriv handlingen du utførte, for eksempel å åpne ordre eller velge en kunde.",
       "expected_placeholder": "Beskriv resultatet du forventet å se.",
       "actual_placeholder": "Beskriv hva du så i stedet, inkludert eventuell feiltekst.",
-      "consent": "Jeg godtar at gjeldende app-skjermbilde, siste request-feil, Vue-feil, nettleserdetaljer og svarene mine samles inn for feilsøking.",
+      "consent": "Jeg godtar at siste request-feil, Vue-feil, nettleserdetaljer, svarene mine og et app-skjermbilde når det er mulig, samles inn for feilsøking.",
       "submit": "Send rapport",
       "submitted": "Feilrapport sendt.",
-      "capture_failed": "Skjermbildet kunne ikke tas. Prøv igjen.",
+      "capture_failed": "Skjermbildet kunne ikke tas. Rapporten sendes uten skjermbilde.",
       "submit_failed": "Feilrapporten kunne ikke sendes.",
       "required": "Alle felter og godkjenning av datainnsamling er påkrevd.",
       "page_subtitle": "Rapporterte skjermer, request-feil og Vue-feil",
diff --git a/src/i18n/source/sv/phrases/compat/error_report/index.json b/src/i18n/source/sv/phrases/compat/error_report/index.json
index 3067b0f3..e0b608c1 100644
--- a/src/i18n/source/sv/phrases/compat/error_report/index.json
+++ b/src/i18n/source/sv/phrases/compat/error_report/index.json
@@ -3,17 +3,17 @@
     "error_report": {
       "button": "Rapportera fel",
       "title": "Rapportera fel",
-      "subtitle": "Skicka aktuell skärm och de senaste feldetaljerna till support.",
+      "subtitle": "Skicka de senaste feldetaljerna till support. En skärmbild bifogas när det är möjligt.",
       "before_error": "Vad gjorde du innan felet uppstod?",
       "expected": "Vad förväntade du dig skulle hända?",
       "actual": "Vad hände faktiskt?",
       "before_error_placeholder": "Beskriv åtgärden du gjorde, till exempel att öppna ordrar eller välja en kund.",
       "expected_placeholder": "Beskriv resultatet du förväntade dig att se.",
       "actual_placeholder": "Beskriv vad du såg i stället, inklusive eventuell feltext.",
-      "consent": "Jag accepterar att aktuell app-skärm, senaste request-fel, Vue-fel, webbläsardetaljer och mina svar samlas in för felsökning.",
+      "consent": "Jag accepterar att senaste request-fel, Vue-fel, webbläsardetaljer, mina svar och en app-skärmbild när det är möjligt samlas in för felsökning.",
       "submit": "Skicka rapport",
       "submitted": "Felrapport skickad.",
-      "capture_failed": "Skärmbilden kunde inte tas. Försök igen.",
+      "capture_failed": "Skärmbilden kunde inte tas. Rapporten skickas utan skärmbild.",
       "submit_failed": "Felrapporten kunde inte skickas.",
       "required": "Alla fält och godkännande av datainsamling krävs.",
       "page_subtitle": "Rapporterade skärmar, request-fel och Vue-fel",
diff --git a/tests/e2e/errorReports.spec.ts b/tests/e2e/errorReports.spec.ts
index 0b385a3c..480df2de 100644
--- a/tests/e2e/errorReports.spec.ts
+++ b/tests/e2e/errorReports.spec.ts
@@ -15,16 +15,20 @@ function isApiUrl(url: string) {
   );
 }
 
-async function mockHtml2Canvas(page) {
-  await page.route(/\/node_modules\/html2canvas\/dist\/html2canvas\.esm\.js(?:\?.*)?$/i, async (route) => {
+const html2CanvasModulePattern = /\/(?:node_modules\/.*)?html2canvas(?:\.[\w-]+)?\.js(?:\?.*)?$/i;
+
+async function mockHtml2Canvas(page, { alwaysFail = false } = {}) {
+  await page.unroute(html2CanvasModulePattern).catch(() => {});
+  await page.route(html2CanvasModulePattern, async (route) => {
     await route.fulfill({
       contentType: "text/javascript",
       body: `
+        const alwaysFail = ${alwaysFail ? "true" : "false"};
         let html2canvasAttempts = 0;
         export default async function html2canvas() {
           html2canvasAttempts += 1;
-          if (html2canvasAttempts === 1) {
-            throw new Error("Simulated first capture failure");
+          if (alwaysFail || html2canvasAttempts === 1) {
+            throw new Error(alwaysFail ? "Simulated permanent capture failure" : "Simulated first capture failure");
           }
           const canvas = document.createElement("canvas");
           canvas.width = 8;
@@ -163,10 +167,68 @@ test.describe("Authenticated error reports", () => {
     expect(Array.isArray(body.vue_errors)).toBe(true);
     expect(body.context).toMatchObject({
       data_collection_policy_version: "error-report-v1",
+      screenshot_attachment: {
+        status: "stored",
+        attached: true,
+      },
     });
     await expect(page.getByTestId("error-report-submitted")).toBeVisible();
   });
 
+  test("submits without a screenshot when capture never succeeds", async ({ page }) => {
+    await mockHtml2Canvas(page, { alwaysFail: true });
+    const submittedBodies: Array<Record<string, unknown>> = [];
+
+    await page.route(/\/error-reports(?:\?.*)?$/i, async (route) => {
+      if (!isApiUrl(route.request().url())) {
+        await route.fallback();
+        return;
+      }
+      if (route.request().method().toUpperCase() !== "POST") {
+        await route.fallback();
+        return;
+      }
+      const body = route.request().postDataJSON() as Record<string, unknown>;
+      submittedBodies.push(body);
+      await route.fulfill(
+        json(
+          {
+            success: true,
+            data: {
+              id: 100,
+              status: "open",
+              screenshot: null,
+            },
+          },
+          201
+        )
+      );
+    });
+
+    await primeMockSession(page, { token: "error-report-user-token", bootPath: "/admin" });
+    await openErrorReportLauncher(page);
+
+    await page.getByLabel("What were you doing before the error occurred?").fill("Opening the orders page");
+    await page.getByLabel("What did you expect would happen?").fill("The orders should load");
+    await page.getByLabel("What actually happened?").fill("The page showed an error");
+    await page.getByTestId("error-report-consent").check();
+    await page.getByTestId("error-report-submit").click();
+
+    await expect.poll(() => submittedBodies.length).toBe(1);
+    const body = submittedBodies[0];
+    expect(body.screenshot).toBeNull();
+    expect(body.context).toMatchObject({
+      screenshot_attachment: {
+        status: "capture_failed",
+        attached: false,
+      },
+    });
+    await expect(page.getByTestId("error-report-capture-warning")).toContainText(
+      "The screen capture failed. The report will be sent without a screenshot."
+    );
+    await expect(page.getByTestId("error-report-submitted")).toBeVisible();
+  });
+
   test("lets superusers inspect and resolve submitted reports", async ({ page }) => {
     const report: Record<string, any> = {
       id: 12,
@@ -277,4 +339,90 @@ test.describe("Authenticated error reports", () => {
       ]);
     await expect(page.getByTestId("error-report-detail")).toContainText("resolved");
   });
+
+  test("lets superusers inspect submitted reports without screenshots", async ({ page }) => {
+    const report: Record<string, any> = {
+      id: 13,
+      status: "open",
+      reporter: {
+        type: "user",
+        user_id: 7,
+        customer_number: 12345,
+        name: "Error Reporter",
+        email: "reporter@example.test",
+      },
+      route_path: "/user/orders",
+      page_url: "https://app.example.test/user/orders",
+      release_trace_id: "trace-no-screenshot",
+      frontend_version: "front-1",
+      api_version: "api-1",
+      screenshot: null,
+      answers: {
+        before_error: "Opening the orders page",
+        expected: "Orders should load",
+        actual: "The table stayed empty",
+      },
+      request_error_count: 0,
+      vue_error_count: 0,
+      request_errors: [],
+      vue_errors: [],
+      runtime_context: {
+        screenshot_attachment: {
+          status: "capture_failed",
+          attached: false,
+          mime_type: null,
+          size_bytes: 0,
+        },
+      },
+      created_at: "2026-05-19 08:00:00",
+      updated_at: "2026-05-19 08:00:00",
+      resolved_at: null,
+      resolved_by_user_id: null,
+      resolution_note: null,
+    };
+
+    await page.route(/\/superuser\/error-reports(?:\?.*)?$/i, async (route) => {
+      if (!isApiUrl(route.request().url())) {
+        await route.fallback();
+        return;
+      }
+      if (route.request().method().toUpperCase() !== "GET") {
+        await route.fallback();
+        return;
+      }
+      await route.fulfill(
+        json({
+          success: true,
+          data: {
+            items: [report],
+            counts: {
+              open: 1,
+              resolved: 0,
+              all: 1,
+            },
+            limit: 100,
+            offset: 0,
+          },
+        })
+      );
+    });
+
+    await page.route(/\/superuser\/error-reports\/13$/i, async (route) => {
+      if (!isApiUrl(route.request().url())) {
+        await route.fallback();
+        return;
+      }
+      await route.fulfill(json({ success: true, data: report }));
+    });
+
+    await primeMockSession(page, { token: "error-report-superuser-token", bootPath: "/superuser/error-reports" });
+    await expect(page.getByTestId("error-reports-page")).toBeVisible();
+    await expect(page.getByTestId("error-report-list")).toContainText("/user/orders");
+
+    await page.getByTestId("error-report-view").click();
+    const detail = page.getByTestId("error-report-detail");
+    await expect(detail).toContainText("Opening the orders page");
+    await expect(detail).toContainText("trace-no-screenshot");
+    await expect(detail.locator("img")).toHaveCount(0);
+  });
 });

From 36c1f10de81bbedd2d9127944b9e4d739db7f0a7 Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Mon, 6 Jul 2026 14:47:03 +0200
Subject: [PATCH 11/19] Reduce PR E2E runner pressure

---
 .github/workflows/tests.yml                 |  4 ++++
 tests/unit/playwright-full-workflow.spec.js | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 33fd7c8b..ab032d70 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -112,6 +112,8 @@ jobs:
     env:
       PLAYWRIGHT_ARTIFACT_NAMESPACE: e2e-pr-${{ matrix.suite }}-${{ matrix.project }}
       PLAYWRIGHT_REPORTER_MODE: line-html
+      PLAYWRIGHT_WORKERS: 1
+      PLAYWRIGHT_VIDEO_MODE: on-first-retry
     steps:
       - name: Repair self-hosted workspace permissions
         shell: bash
@@ -223,6 +225,8 @@ jobs:
             --env CI="${CI:-}" \
             --env PLAYWRIGHT_ARTIFACT_NAMESPACE="$PLAYWRIGHT_ARTIFACT_NAMESPACE" \
             --env PLAYWRIGHT_REPORTER_MODE="$PLAYWRIGHT_REPORTER_MODE" \
+            --env PLAYWRIGHT_WORKERS="$PLAYWRIGHT_WORKERS" \
+            --env PLAYWRIGHT_VIDEO_MODE="$PLAYWRIGHT_VIDEO_MODE" \
             --env PLAYWRIGHT_DEV_PORT="$playwright_dev_port" \
             --env MATRIX_SUITE="$MATRIX_SUITE" \
             --env MATRIX_PROJECT="$MATRIX_PROJECT" \
diff --git a/tests/unit/playwright-full-workflow.spec.js b/tests/unit/playwright-full-workflow.spec.js
index 61d033a4..a255c4a1 100644
--- a/tests/unit/playwright-full-workflow.spec.js
+++ b/tests/unit/playwright-full-workflow.spec.js
@@ -40,6 +40,16 @@ describe("Playwright full E2E workflow grouping", () => {
     expect(source).toContain("scripts/ci/runner-diagnostics.sh");
   });
 
+  it("keeps PR E2E runner pressure bounded and diagnosable", () => {
+    const source = workflowSource();
+
+    expect(source).toMatch(/e2e-pr:[\s\S]*?max-parallel: 4/u);
+    expect(source).toMatch(/e2e-pr:[\s\S]*?PLAYWRIGHT_WORKERS: 1/u);
+    expect(source).toMatch(/e2e-pr:[\s\S]*?PLAYWRIGHT_VIDEO_MODE: on-first-retry/u);
+    expect(source).toMatch(/e2e-pr:[\s\S]*?--env PLAYWRIGHT_WORKERS="\$PLAYWRIGHT_WORKERS"/u);
+    expect(source).toMatch(/e2e-pr:[\s\S]*?--env PLAYWRIGHT_VIDEO_MODE="\$PLAYWRIGHT_VIDEO_MODE"/u);
+  });
+
   it("allows CI to reduce Playwright video artifact pressure", () => {
     const source = readFileSync(join(root, "playwright.config.ts"), "utf8");
 

From 3fc4be833517d7bdb4bc07c195ed8146588e0103 Mon Sep 17 00:00:00 2001
From: Jeppe B <2jepp9350@gmail.com>
Date: Mon, 6 Jul 2026 15:31:16 +0200
Subject: [PATCH 12/19] Update limited backoffice employee form (#146)

* Update limited backoffice employee form

* Map limited backoffice changes to focused E2E

---------

Co-authored-by: Jeppe Bundgaard <jb@truckwash.dk>
---
 scripts/playwright-pr-mapping.mjs             |   6 +
 src/i18n/generated/da-v2.json                 |  16 ++
 src/i18n/generated/de-v2.json                 |  16 ++
 src/i18n/generated/en-v2.json                 |  16 ++
 src/i18n/generated/no-v2.json                 |  16 ++
 src/i18n/generated/sv-v2.json                 |  16 ++
 src/i18n/source/da/phrases/index.json         |  16 ++
 src/i18n/source/de/phrases/index.json         |  16 ++
 src/i18n/source/en/phrases/index.json         |  16 ++
 src/i18n/source/no/phrases/index.json         |  16 ++
 src/i18n/source/sv/phrases/index.json         |  16 ++
 .../backoffice/LimitedBackofficeEmployees.vue | 131 +++++++++++++--
 tests/e2e/limited-backoffice.spec.ts          | 152 +++++++++++++++++-
 tests/unit/playwright-pr-mapping.spec.js      |   6 +
 14 files changed, 436 insertions(+), 19 deletions(-)

diff --git a/scripts/playwright-pr-mapping.mjs b/scripts/playwright-pr-mapping.mjs
index 7c8669ad..2c43561a 100644
--- a/scripts/playwright-pr-mapping.mjs
+++ b/scripts/playwright-pr-mapping.mjs
@@ -70,6 +70,12 @@ export const sourceMappings = [
     specs: ["tests/e2e/admin-department-notifications.spec.ts"],
     projects: chromiumProjects,
   },
+  {
+    name: "limited-backoffice",
+    patterns: [/^src\/views\/backoffice\/LimitedBackoffice/u],
+    specs: ["tests/e2e/limited-backoffice.spec.ts"],
+    projects: chromiumProjects,
+  },
   {
     name: "invoicing",
     patterns: [/invoic/iu, /economic[-/]?queue/iu, /collected-order/iu],
diff --git a/src/i18n/generated/da-v2.json b/src/i18n/generated/da-v2.json
index a4180fea..6b440162 100644
--- a/src/i18n/generated/da-v2.json
+++ b/src/i18n/generated/da-v2.json
@@ -1190,6 +1190,14 @@
         "edit_title": "@:{'templates.generated.compat.limited_backoffice.employees.edit_title'}",
         "name": "@:{'templates.generated.compat.limited_backoffice.employees.name'}",
         "email": "@:{'templates.generated.compat.limited_backoffice.employees.email'}",
+        "phone": "@:{'templates.generated.compat.limited_backoffice.employees.phone'}",
+        "phone_validation": "@:{'templates.generated.compat.limited_backoffice.employees.phone_validation'}",
+        "country_codes": {
+          "denmark": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.denmark'}",
+          "sweden": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.sweden'}",
+          "norway": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.norway'}",
+          "finland": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.finland'}"
+        },
         "password": "@:{'templates.generated.compat.limited_backoffice.employees.password'}",
         "password_create_help": "@:{'templates.generated.compat.limited_backoffice.employees.password_create_help'}",
         "password_update_help": "@:{'templates.generated.compat.limited_backoffice.employees.password_update_help'}",
@@ -6024,6 +6032,14 @@
             "edit_title": "@:{'words.generated.rediger'} @:{'words.generated.medarbejder'}",
             "name": "Navn",
             "email": "Email",
+            "phone": "Telefon",
+            "phone_validation": "Telefonnummeret skal være 4-15 cifre.",
+            "country_codes": {
+              "denmark": "Danmark",
+              "sweden": "Sverige",
+              "norway": "Norge",
+              "finland": "Finland"
+            },
             "password": "@.capitalize:{'words.generated.adgangskode'}",
             "password_create_help": "@.capitalize:{'words.generated.pakrævet'} @:{'words.generated.for'} nye @:{'words.generated.medarbejdere'}. Brug @:{'words.generated.mindst'} 8 tegn.",
             "password_update_help": "Lad feltet være tomt @:{'words.generated.for'} at beholde den nuværende @:{'words.generated.adgangskode'}.",
diff --git a/src/i18n/generated/de-v2.json b/src/i18n/generated/de-v2.json
index 702341cc..8936ff7f 100644
--- a/src/i18n/generated/de-v2.json
+++ b/src/i18n/generated/de-v2.json
@@ -1301,6 +1301,14 @@
         "edit_title": "@:{'templates.generated.compat.limited_backoffice.employees.edit_title'}",
         "name": "@:{'templates.generated.compat.limited_backoffice.employees.name'}",
         "email": "@:{'templates.generated.compat.limited_backoffice.employees.email'}",
+        "phone": "@:{'templates.generated.compat.limited_backoffice.employees.phone'}",
+        "phone_validation": "@:{'templates.generated.compat.limited_backoffice.employees.phone_validation'}",
+        "country_codes": {
+          "denmark": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.denmark'}",
+          "sweden": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.sweden'}",
+          "norway": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.norway'}",
+          "finland": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.finland'}"
+        },
         "password": "@:{'templates.generated.compat.limited_backoffice.employees.password'}",
         "password_create_help": "@:{'templates.generated.compat.limited_backoffice.employees.password_create_help'}",
         "password_update_help": "@:{'templates.generated.compat.limited_backoffice.employees.password_update_help'}",
@@ -6121,6 +6129,14 @@
             "edit_title": "@:{'words.generated.mitarbeiter'} @:{'words.generated.bearbeiten'}",
             "name": "Name",
             "email": "E-Mail",
+            "phone": "Telefon",
+            "phone_validation": "Die Telefonnummer muss 4-15 Ziffern enthalten.",
+            "country_codes": {
+              "denmark": "Dänemark",
+              "sweden": "Schweden",
+              "norway": "Norwegen",
+              "finland": "Finnland"
+            },
             "password": "@:{'words.generated.passwort'}",
             "password_create_help": "@.capitalize:{'words.generated.fur'} neue @:{'words.generated.mitarbeiter'} @:{'words.generated.erforderlich'}. Verwenden @.capitalize:{'words.generated.sie'} @:{'words.generated.mindestens'} 8 Zeichen.",
             "password_update_help": "Leer lassen, um das vorhandene @:{'words.generated.passwort'} beizubehalten.",
diff --git a/src/i18n/generated/en-v2.json b/src/i18n/generated/en-v2.json
index c5195ffc..3e57bafd 100644
--- a/src/i18n/generated/en-v2.json
+++ b/src/i18n/generated/en-v2.json
@@ -1022,6 +1022,14 @@
         "edit_title": "@:{'templates.generated.compat.limited_backoffice.employees.edit_title'}",
         "name": "@:{'templates.generated.compat.limited_backoffice.employees.name'}",
         "email": "@:{'templates.generated.compat.limited_backoffice.employees.email'}",
+        "phone": "@:{'templates.generated.compat.limited_backoffice.employees.phone'}",
+        "phone_validation": "@:{'templates.generated.compat.limited_backoffice.employees.phone_validation'}",
+        "country_codes": {
+          "denmark": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.denmark'}",
+          "sweden": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.sweden'}",
+          "norway": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.norway'}",
+          "finland": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.finland'}"
+        },
         "password": "@:{'templates.generated.compat.limited_backoffice.employees.password'}",
         "password_create_help": "@:{'templates.generated.compat.limited_backoffice.employees.password_create_help'}",
         "password_update_help": "@:{'templates.generated.compat.limited_backoffice.employees.password_update_help'}",
@@ -5856,6 +5864,14 @@
             "edit_title": "@.capitalize:{'words.generated.edit'} @:{'words.generated.employee'}",
             "name": "Name",
             "email": "Email",
+            "phone": "Phone",
+            "phone_validation": "Phone number must be 4-15 digits.",
+            "country_codes": {
+              "denmark": "Denmark",
+              "sweden": "Sweden",
+              "norway": "Norway",
+              "finland": "Finland"
+            },
             "password": "@.capitalize:{'words.generated.password'}",
             "password_create_help": "@.capitalize:{'words.generated.required'} @:{'words.generated.for'} new @:{'words.generated.employees'}. Use @:{'words.generated.at'} @:{'words.generated.least'} 8 characters.",
             "password_update_help": "Leave blank @:{'words.generated.to'} keep @:{'words.replication.article.host_mention'} existing @:{'words.generated.password'}.",
diff --git a/src/i18n/generated/no-v2.json b/src/i18n/generated/no-v2.json
index c25dad2c..25d94a03 100644
--- a/src/i18n/generated/no-v2.json
+++ b/src/i18n/generated/no-v2.json
@@ -1304,6 +1304,14 @@
         "edit_title": "@:{'templates.generated.compat.limited_backoffice.employees.edit_title'}",
         "name": "@:{'templates.generated.compat.limited_backoffice.employees.name'}",
         "email": "@:{'templates.generated.compat.limited_backoffice.employees.email'}",
+        "phone": "@:{'templates.generated.compat.limited_backoffice.employees.phone'}",
+        "phone_validation": "@:{'templates.generated.compat.limited_backoffice.employees.phone_validation'}",
+        "country_codes": {
+          "denmark": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.denmark'}",
+          "sweden": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.sweden'}",
+          "norway": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.norway'}",
+          "finland": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.finland'}"
+        },
         "password": "@:{'templates.generated.compat.limited_backoffice.employees.password'}",
         "password_create_help": "@:{'templates.generated.compat.limited_backoffice.employees.password_create_help'}",
         "password_update_help": "@:{'templates.generated.compat.limited_backoffice.employees.password_update_help'}",
@@ -6124,6 +6132,14 @@
             "edit_title": "@:{'words.generated.rediger'} @:{'words.generated.medarbeider'}",
             "name": "Navn",
             "email": "E-post",
+            "phone": "Telefon",
+            "phone_validation": "Telefonnummeret må være 4-15 sifre.",
+            "country_codes": {
+              "denmark": "Danmark",
+              "sweden": "Sverige",
+              "norway": "Norge",
+              "finland": "Finland"
+            },
             "password": "@.capitalize:{'words.generated.passord'}",
             "password_create_help": "@.capitalize:{'words.generated.kreves'} @:{'words.generated.for'} nye @:{'words.generated.medarbeidere'}. Bruk @:{'words.generated.minst'} 8 tegn.",
             "password_update_help": "La stå tomt @:{'words.generated.for'} å beholde nåværende @:{'words.generated.passord'}.",
diff --git a/src/i18n/generated/sv-v2.json b/src/i18n/generated/sv-v2.json
index 915a65b9..f24912ea 100644
--- a/src/i18n/generated/sv-v2.json
+++ b/src/i18n/generated/sv-v2.json
@@ -1354,6 +1354,14 @@
         "edit_title": "@:{'templates.generated.compat.limited_backoffice.employees.edit_title'}",
         "name": "@:{'templates.generated.compat.limited_backoffice.employees.name'}",
         "email": "@:{'templates.generated.compat.limited_backoffice.employees.email'}",
+        "phone": "@:{'templates.generated.compat.limited_backoffice.employees.phone'}",
+        "phone_validation": "@:{'templates.generated.compat.limited_backoffice.employees.phone_validation'}",
+        "country_codes": {
+          "denmark": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.denmark'}",
+          "sweden": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.sweden'}",
+          "norway": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.norway'}",
+          "finland": "@:{'templates.generated.compat.limited_backoffice.employees.country_codes.finland'}"
+        },
         "password": "@:{'templates.generated.compat.limited_backoffice.employees.password'}",
         "password_create_help": "@:{'templates.generated.compat.limited_backoffice.employees.password_create_help'}",
         "password_update_help": "@:{'templates.generated.compat.limited_backoffice.employees.password_update_help'}",
@@ -6174,6 +6182,14 @@
             "edit_title": "@:{'words.generated.redigera'} @:{'words.generated.medarbetare'}",
             "name": "Namn",
             "email": "E-post",
+            "phone": "Telefon",
+            "phone_validation": "Telefonnumret måste vara 4-15 siffror.",
+            "country_codes": {
+              "denmark": "Danmark",
+              "sweden": "Sverige",
+              "norway": "Norge",
+              "finland": "Finland"
+            },
             "password": "@.capitalize:{'words.generated.losenord'}",
             "password_create_help": "@.capitalize:{'words.generated.kravs'} @:{'words.generated.for'} nya @:{'words.generated.medarbetare'}. Använd @:{'words.generated.minst'} 8 tecken.",
             "password_update_help": "Lämna tomt @:{'words.generated.for'} att behålla nuvarande @:{'words.generated.losenord'}.",
diff --git a/src/i18n/source/da/phrases/index.json b/src/i18n/source/da/phrases/index.json
index 0913b5cb..7b5bd811 100644
--- a/src/i18n/source/da/phrases/index.json
+++ b/src/i18n/source/da/phrases/index.json
@@ -46,6 +46,14 @@
       "edit_title": "@:{'phrases.compat.limited_backoffice.employees.edit_title'}",
       "name": "@:{'phrases.compat.limited_backoffice.employees.name'}",
       "email": "@:{'phrases.compat.limited_backoffice.employees.email'}",
+      "phone": "@:{'phrases.compat.limited_backoffice.employees.phone'}",
+      "phone_validation": "@:{'phrases.compat.limited_backoffice.employees.phone_validation'}",
+      "country_codes": {
+        "denmark": "@:{'phrases.compat.limited_backoffice.employees.country_codes.denmark'}",
+        "sweden": "@:{'phrases.compat.limited_backoffice.employees.country_codes.sweden'}",
+        "norway": "@:{'phrases.compat.limited_backoffice.employees.country_codes.norway'}",
+        "finland": "@:{'phrases.compat.limited_backoffice.employees.country_codes.finland'}"
+      },
       "password": "@:{'phrases.compat.limited_backoffice.employees.password'}",
       "password_create_help": "@:{'phrases.compat.limited_backoffice.employees.password_create_help'}",
       "password_update_help": "@:{'phrases.compat.limited_backoffice.employees.password_update_help'}",
@@ -279,6 +287,14 @@
         "edit_title": "@:{'terms.glossary.rediger'} @:{'terms.glossary.medarbejder'}",
         "name": "Navn",
         "email": "Email",
+        "phone": "Telefon",
+        "phone_validation": "Telefonnummeret skal være 4-15 cifre.",
+        "country_codes": {
+          "denmark": "Danmark",
+          "sweden": "Sverige",
+          "norway": "Norge",
+          "finland": "Finland"
+        },
         "password": "@.capitalize:{'terms.glossary.adgangskode'}",
         "password_create_help": "@.capitalize:{'terms.glossary.pakrævet'} @:{'terms.glossary.for'} nye @:{'terms.glossary.medarbejdere'}. Brug @:{'terms.glossary.mindst'} 8 tegn.",
         "password_update_help": "Lad feltet være tomt @:{'terms.glossary.for'} at beholde den nuværende @:{'terms.glossary.adgangskode'}.",
diff --git a/src/i18n/source/de/phrases/index.json b/src/i18n/source/de/phrases/index.json
index 5bb6df51..5868636c 100644
--- a/src/i18n/source/de/phrases/index.json
+++ b/src/i18n/source/de/phrases/index.json
@@ -46,6 +46,14 @@
       "edit_title": "@:{'phrases.compat.limited_backoffice.employees.edit_title'}",
       "name": "@:{'phrases.compat.limited_backoffice.employees.name'}",
       "email": "@:{'phrases.compat.limited_backoffice.employees.email'}",
+      "phone": "@:{'phrases.compat.limited_backoffice.employees.phone'}",
+      "phone_validation": "@:{'phrases.compat.limited_backoffice.employees.phone_validation'}",
+      "country_codes": {
+        "denmark": "@:{'phrases.compat.limited_backoffice.employees.country_codes.denmark'}",
+        "sweden": "@:{'phrases.compat.limited_backoffice.employees.country_codes.sweden'}",
+        "norway": "@:{'phrases.compat.limited_backoffice.employees.country_codes.norway'}",
+        "finland": "@:{'phrases.compat.limited_backoffice.employees.country_codes.finland'}"
+      },
       "password": "@:{'phrases.compat.limited_backoffice.employees.password'}",
       "password_create_help": "@:{'phrases.compat.limited_backoffice.employees.password_create_help'}",
       "password_update_help": "@:{'phrases.compat.limited_backoffice.employees.password_update_help'}",
@@ -279,6 +287,14 @@
         "edit_title": "@:{'terms.glossary.mitarbeiter'} @:{'terms.glossary.bearbeiten'}",
         "name": "Name",
         "email": "E-Mail",
+        "phone": "Telefon",
+        "phone_validation": "Die Telefonnummer muss 4-15 Ziffern enthalten.",
+        "country_codes": {
+          "denmark": "Dänemark",
+          "sweden": "Schweden",
+          "norway": "Norwegen",
+          "finland": "Finnland"
+        },
         "password": "@:{'terms.glossary.passwort'}",
         "password_create_help": "@.capitalize:{'terms.glossary.fur'} neue @:{'terms.glossary.mitarbeiter'} @:{'terms.glossary.erforderlich'}. Verwenden @.capitalize:{'terms.glossary.sie'} @:{'terms.glossary.mindestens'} 8 Zeichen.",
         "password_update_help": "Leer lassen, um das vorhandene @:{'terms.glossary.passwort'} beizubehalten.",
diff --git a/src/i18n/source/en/phrases/index.json b/src/i18n/source/en/phrases/index.json
index 40eb1207..7af8b641 100644
--- a/src/i18n/source/en/phrases/index.json
+++ b/src/i18n/source/en/phrases/index.json
@@ -46,6 +46,14 @@
       "edit_title": "@:{'phrases.compat.limited_backoffice.employees.edit_title'}",
       "name": "@:{'phrases.compat.limited_backoffice.employees.name'}",
       "email": "@:{'phrases.compat.limited_backoffice.employees.email'}",
+      "phone": "@:{'phrases.compat.limited_backoffice.employees.phone'}",
+      "phone_validation": "@:{'phrases.compat.limited_backoffice.employees.phone_validation'}",
+      "country_codes": {
+        "denmark": "@:{'phrases.compat.limited_backoffice.employees.country_codes.denmark'}",
+        "sweden": "@:{'phrases.compat.limited_backoffice.employees.country_codes.sweden'}",
+        "norway": "@:{'phrases.compat.limited_backoffice.employees.country_codes.norway'}",
+        "finland": "@:{'phrases.compat.limited_backoffice.employees.country_codes.finland'}"
+      },
       "password": "@:{'phrases.compat.limited_backoffice.employees.password'}",
       "password_create_help": "@:{'phrases.compat.limited_backoffice.employees.password_create_help'}",
       "password_update_help": "@:{'phrases.compat.limited_backoffice.employees.password_update_help'}",
@@ -279,6 +287,14 @@
         "edit_title": "@.capitalize:{'terms.glossary.edit'} @:{'terms.glossary.employee'}",
         "name": "Name",
         "email": "Email",
+        "phone": "Phone",
+        "phone_validation": "Phone number must be 4-15 digits.",
+        "country_codes": {
+          "denmark": "Denmark",
+          "sweden": "Sweden",
+          "norway": "Norway",
+          "finland": "Finland"
+        },
         "password": "@.capitalize:{'terms.glossary.password'}",
         "password_create_help": "@.capitalize:{'terms.glossary.required'} @:{'terms.glossary.for'} new @:{'terms.glossary.employees'}. Use @:{'terms.glossary.at'} @:{'terms.glossary.least'} 8 characters.",
         "password_update_help": "Leave blank @:{'terms.glossary.to'} keep @:{'terms.replication.article.host_mention'} existing @:{'terms.glossary.password'}.",
diff --git a/src/i18n/source/no/phrases/index.json b/src/i18n/source/no/phrases/index.json
index 350f14dc..5fa723d5 100644
--- a/src/i18n/source/no/phrases/index.json
+++ b/src/i18n/source/no/phrases/index.json
@@ -46,6 +46,14 @@
       "edit_title": "@:{'phrases.compat.limited_backoffice.employees.edit_title'}",
       "name": "@:{'phrases.compat.limited_backoffice.employees.name'}",
       "email": "@:{'phrases.compat.limited_backoffice.employees.email'}",
+      "phone": "@:{'phrases.compat.limited_backoffice.employees.phone'}",
+      "phone_validation": "@:{'phrases.compat.limited_backoffice.employees.phone_validation'}",
+      "country_codes": {
+        "denmark": "@:{'phrases.compat.limited_backoffice.employees.country_codes.denmark'}",
+        "sweden": "@:{'phrases.compat.limited_backoffice.employees.country_codes.sweden'}",
+        "norway": "@:{'phrases.compat.limited_backoffice.employees.country_codes.norway'}",
+        "finland": "@:{'phrases.compat.limited_backoffice.employees.country_codes.finland'}"
+      },
       "password": "@:{'phrases.compat.limited_backoffice.employees.password'}",
       "password_create_help": "@:{'phrases.compat.limited_backoffice.employees.password_create_help'}",
       "password_update_help": "@:{'phrases.compat.limited_backoffice.employees.password_update_help'}",
@@ -279,6 +287,14 @@
         "edit_title": "@:{'terms.glossary.rediger'} @:{'terms.glossary.medarbeider'}",
         "name": "Navn",
         "email": "E-post",
+        "phone": "Telefon",
+        "phone_validation": "Telefonnummeret må være 4-15 sifre.",
+        "country_codes": {
+          "denmark": "Danmark",
+          "sweden": "Sverige",
+          "norway": "Norge",
+          "finland": "Finland"
+        },
         "password": "@.capitalize:{'terms.glossary.passord'}",
         "password_create_help": "@.capitalize:{'terms.glossary.kreves'} @:{'terms.glossary.for'} nye @:{'terms.glossary.medarbeidere'}. Bruk @:{'terms.glossary.minst'} 8 tegn.",
         "password_update_help": "La stå tomt @:{'terms.glossary.for'} å beholde nåværende @:{'terms.glossary.passord'}.",
diff --git a/src/i18n/source/sv/phrases/index.json b/src/i18n/source/sv/phrases/index.json
index 6985e2f7..4ab1e324 100644
--- a/src/i18n/source/sv/phrases/index.json
+++ b/src/i18n/source/sv/phrases/index.json
@@ -46,6 +46,14 @@
       "edit_title": "@:{'phrases.compat.limited_backoffice.employees.edit_title'}",
       "name": "@:{'phrases.compat.limited_backoffice.employees.name'}",
       "email": "@:{'phrases.compat.limited_backoffice.employees.email'}",
+      "phone": "@:{'phrases.compat.limited_backoffice.employees.phone'}",
+      "phone_validation": "@:{'phrases.compat.limited_backoffice.employees.phone_validation'}",
+      "country_codes": {
+        "denmark": "@:{'phrases.compat.limited_backoffice.employees.country_codes.denmark'}",
+        "sweden": "@:{'phrases.compat.limited_backoffice.employees.country_codes.sweden'}",
+        "norway": "@:{'phrases.compat.limited_backoffice.employees.country_codes.norway'}",
+        "finland": "@:{'phrases.compat.limited_backoffice.employees.country_codes.finland'}"
+      },
       "password": "@:{'phrases.compat.limited_backoffice.employees.password'}",
       "password_create_help": "@:{'phrases.compat.limited_backoffice.employees.password_create_help'}",
       "password_update_help": "@:{'phrases.compat.limited_backoffice.employees.password_update_help'}",
@@ -279,6 +287,14 @@
         "edit_title": "@:{'terms.glossary.redigera'} @:{'terms.glossary.medarbetare'}",
         "name": "Namn",
         "email": "E-post",
+        "phone": "Telefon",
+        "phone_validation": "Telefonnumret måste vara 4-15 siffror.",
+        "country_codes": {
+          "denmark": "Danmark",
+          "sweden": "Sverige",
+          "norway": "Norge",
+          "finland": "Finland"
+        },
         "password": "@.capitalize:{'terms.glossary.losenord'}",
         "password_create_help": "@.capitalize:{'terms.glossary.kravs'} @:{'terms.glossary.for'} nya @:{'terms.glossary.medarbetare'}. Använd @:{'terms.glossary.minst'} 8 tecken.",
         "password_update_help": "Lämna tomt @:{'terms.glossary.for'} att behålla nuvarande @:{'terms.glossary.losenord'}.",
diff --git a/src/views/backoffice/LimitedBackofficeEmployees.vue b/src/views/backoffice/LimitedBackofficeEmployees.vue
index 4a5004cb..d5dcdd0b 100644
--- a/src/views/backoffice/LimitedBackofficeEmployees.vue
+++ b/src/views/backoffice/LimitedBackofficeEmployees.vue
@@ -16,6 +16,12 @@ import {
 } from "@/services/limitedBackoffice.js";
 
 const ROLE_KEYS = ["viewer", "cashier", "booking_coordinator", "operations_lead", "department_admin"];
+const PHONE_COUNTRY_CODES = [
+  { value: "45", flag: "🇩🇰", labelKey: "denmark" },
+  { value: "46", flag: "🇸🇪", labelKey: "sweden" },
+  { value: "47", flag: "🇳🇴", labelKey: "norway" },
+  { value: "358", flag: "🇫🇮", labelKey: "finland" },
+];
 
 const { t } = useI18n();
 const departments = ref([]);
@@ -32,6 +38,8 @@ const showRolePermissions = ref(false);
 const form = ref({
   display_name: "",
   email: "",
+  phone_country_code: "45",
+  phone: "",
   password: "",
   role_key: "viewer",
   department_ids: [],
@@ -212,15 +220,41 @@ const rolePermissionGroups = (role) =>
 
 const visibleRoles = computed(() => roles.value.filter((role) => ROLE_KEYS.includes(role.key)));
 const isEditing = computed(() => Boolean(editingEmployee.value));
+const trimmedEmail = computed(() => String(form.value.email || "").trim());
+const isEmailValid = computed(() => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmedEmail.value));
+const normalizedPhone = computed(() => String(form.value.phone || "").replace(/\D/g, ""));
+const hasPhone = computed(() => normalizedPhone.value.length > 0);
+const isPhoneValid = computed(() => !hasPhone.value || /^\d{4,15}$/.test(normalizedPhone.value));
 const isPasswordValid = computed(() => isEditing.value || String(form.value.password || "").length >= 8);
 const isFormValid = computed(
   () =>
     String(form.value.display_name || "").trim().length > 0 &&
+    isEmailValid.value &&
+    isPhoneValid.value &&
     ROLE_KEYS.includes(form.value.role_key) &&
     form.value.department_ids.length > 0 &&
     isPasswordValid.value
 );
 
+const countryCodeLabel = (countryCode) => {
+  const option = PHONE_COUNTRY_CODES.find((item) => item.value === String(countryCode || ""));
+  if (!option) {
+    return "";
+  }
+  return `${option.flag} +${option.value} ${t(`templates.limited_backoffice.employees.country_codes.${option.labelKey}`)}`;
+};
+
+const formatEmployeePhone = (employee) => {
+  if (!employee?.phone_country_code || !employee?.phone) {
+    return "";
+  }
+  return `+${employee.phone_country_code} ${employee.phone}`;
+};
+
+const sanitizePhone = (event) => {
+  form.value.phone = String(event?.target?.value || "").replace(/\D/g, "");
+};
+
 const loadEmployees = async () => {
   const response = await getLimitedBackofficeEmployees({ includeInactive: includeInactive.value });
   employees.value = unwrapLimitedBackofficeResponse(response) || [];
@@ -257,6 +291,8 @@ const resetForm = () => {
   form.value = {
     display_name: "",
     email: "",
+    phone_country_code: "45",
+    phone: "",
     password: "",
     role_key: roles.value[0]?.key || "viewer",
     department_ids: [],
@@ -269,6 +305,8 @@ const editEmployee = (employee) => {
   form.value = {
     display_name: employee.display_name || "",
     email: employee.email || "",
+    phone_country_code: employee.phone_country_code ? String(employee.phone_country_code) : "45",
+    phone: employee.phone ? String(employee.phone) : "",
     password: "",
     role_key: employee.role?.key || roles.value[0]?.key || "viewer",
     department_ids: (employee.departments || []).map((department) => Number(department.id)),
@@ -291,7 +329,9 @@ const setDepartmentChecked = (departmentId, checked) => {
 const buildPayload = () => {
   const payload = {
     display_name: String(form.value.display_name || "").trim(),
-    email: String(form.value.email || "").trim() || null,
+    email: trimmedEmail.value,
+    phone_country_code: hasPhone.value ? Number.parseInt(form.value.phone_country_code, 10) : null,
+    phone: hasPhone.value ? Number.parseInt(normalizedPhone.value, 10) : null,
     role_key: form.value.role_key,
     department_ids: form.value.department_ids,
   };
@@ -416,12 +456,51 @@ onMounted(() => {
                   id="limited-employee-email"
                   v-model="form.email"
                   class="input"
+                  :class="{ 'is-danger': formAttempted && !isEmailValid }"
                   type="email"
+                  required
                   data-testid="limited-employee-email"
                 />
               </div>
             </div>
 
+            <div class="field">
+              <label class="label" for="limited-employee-phone">
+                {{ t("templates.limited_backoffice.employees.phone") }}
+              </label>
+              <div class="limited-employee-phone">
+                <div class="control">
+                  <div class="select is-fullwidth">
+                    <select
+                      id="limited-employee-phone-country-code"
+                      v-model="form.phone_country_code"
+                      data-testid="limited-employee-phone-country-code"
+                    >
+                      <option v-for="option in PHONE_COUNTRY_CODES" :key="option.value" :value="option.value">
+                        {{ countryCodeLabel(option.value) }}
+                      </option>
+                    </select>
+                  </div>
+                </div>
+                <div class="control">
+                  <input
+                    id="limited-employee-phone"
+                    v-model="form.phone"
+                    class="input"
+                    :class="{ 'is-danger': formAttempted && !isPhoneValid }"
+                    type="tel"
+                    inputmode="numeric"
+                    pattern="[0-9]*"
+                    data-testid="limited-employee-phone"
+                    @input="sanitizePhone"
+                  />
+                </div>
+              </div>
+              <p v-if="formAttempted && !isPhoneValid" class="help is-danger">
+                {{ t("templates.limited_backoffice.employees.phone_validation") }}
+              </p>
+            </div>
+
             <div class="field">
               <label class="label" for="limited-employee-password">
                 {{ t("templates.limited_backoffice.employees.password") }}
@@ -488,15 +567,17 @@ onMounted(() => {
             <div class="field">
               <label class="label">{{ t("templates.limited_backoffice.employees.departments") }}</label>
               <div class="limited-employee-departments" data-testid="limited-employee-departments">
-                <label v-for="department in departments" :key="department.id" class="checkbox">
-                  <input
-                    type="checkbox"
-                    :checked="departmentChecked(department.id)"
-                    :data-testid="`limited-employee-department-${department.id}`"
-                    @change="setDepartmentChecked(department.id, $event.target.checked)"
-                  />
-                  <span>{{ department.name }}</span>
-                </label>
+                <b-switch
+                  v-for="department in departments"
+                  :key="department.id"
+                  size="is-small"
+                  type="is-link"
+                  :model-value="departmentChecked(department.id)"
+                  :data-testid="`limited-employee-department-${department.id}`"
+                  @update:model-value="setDepartmentChecked(department.id, $event)"
+                >
+                  {{ department.name }}
+                </b-switch>
               </div>
               <p v-if="formAttempted && form.department_ids.length === 0" class="help is-danger">
                 {{ t("templates.limited_backoffice.employees.department_required") }}
@@ -507,12 +588,12 @@ onMounted(() => {
               {{ t("templates.limited_backoffice.employees.validation") }}
             </div>
 
-            <div class="buttons">
+            <div class="limited-employee-actions">
               <button
                 type="submit"
-                class="button is-dark"
+                class="button is-dark is-fullwidth"
                 :class="{ 'is-loading': saving }"
-                :disabled="saving"
+                :disabled="saving || !isFormValid"
                 data-testid="limited-employee-save"
               >
                 <span class="icon is-small"><i class="fas fa-save" aria-hidden="true"></i></span>
@@ -521,7 +602,7 @@ onMounted(() => {
               <button
                 v-if="isEditing"
                 type="button"
-                class="button is-light"
+                class="button is-light is-fullwidth"
                 data-testid="limited-employee-cancel"
                 @click="resetForm"
               >
@@ -582,6 +663,13 @@ onMounted(() => {
                   <td>
                     <strong>{{ employee.display_name }}</strong>
                     <p v-if="employee.email" class="has-text-grey is-size-7">{{ employee.email }}</p>
+                    <p
+                      v-if="formatEmployeePhone(employee)"
+                      class="has-text-grey is-size-7"
+                      :data-testid="`limited-employee-phone-${employee.id}`"
+                    >
+                      {{ formatEmployeePhone(employee) }}
+                    </p>
                   </td>
                   <td>
                     <strong>{{ roleLabel(employee.role) }}</strong>
@@ -733,9 +821,14 @@ onMounted(() => {
   gap: 0.5rem;
 }
 
-.limited-employee-departments .checkbox {
-  display: flex;
-  align-items: center;
+.limited-employee-phone {
+  display: grid;
+  grid-template-columns: minmax(9.5rem, 0.75fr) minmax(0, 1fr);
+  gap: 0.75rem;
+}
+
+.limited-employee-actions {
+  display: grid;
   gap: 0.5rem;
 }
 
@@ -866,6 +959,10 @@ onMounted(() => {
   .limited-employees-header__inactive {
     margin-top: 0.5rem;
   }
+
+  .limited-employee-phone {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media screen and (max-width: 768px) {
diff --git a/tests/e2e/limited-backoffice.spec.ts b/tests/e2e/limited-backoffice.spec.ts
index 0386d702..a14b3930 100644
--- a/tests/e2e/limited-backoffice.spec.ts
+++ b/tests/e2e/limited-backoffice.spec.ts
@@ -213,6 +213,8 @@ const employeesPayload = [
     customer_number: 900000501,
     display_name: "Casey Clerk",
     email: "casey@example.com",
+    phone_country_code: 45,
+    phone: 12345678,
     active: true,
     role: { key: "cashier", label: "Cashier", description: "Can sell." },
     departments: [{ id: 1, name: "Assigned Depot" }],
@@ -228,10 +230,17 @@ async function seedLimitedBackofficeSession(page, token = "limited-backoffice-to
   await seedAuthenticatedState(page, token);
 }
 
-async function mockLimitedBackofficeApi(page, authSessionData = sessionData) {
+const cloneJson = <T>(value: T): T => JSON.parse(JSON.stringify(value));
+
+async function mockLimitedBackofficeApi(page, authSessionData = sessionData, options: any = {}) {
   const calls: string[] = [];
   const forbiddenCalls: string[] = [];
   const priceUpdateCalls: unknown[] = [];
+  const employeeCreateCalls: unknown[] = [];
+  const employeeUpdateCalls: unknown[] = [];
+  const currentEmployees = {
+    value: cloneJson(options.employeesPayload ?? employeesPayload),
+  };
 
   await page.route(API_HOST, async (route) => {
     const request = route.request();
@@ -298,7 +307,56 @@ async function mockLimitedBackofficeApi(page, authSessionData = sessionData) {
     }
 
     if (pathname.endsWith("/limited-backoffice/employees") && method === "GET") {
-      await route.fulfill(json({ data: employeesPayload }));
+      await route.fulfill(json({ data: currentEmployees.value }));
+      return;
+    }
+
+    if (pathname.endsWith("/limited-backoffice/employees") && method === "POST") {
+      const body = request.postDataJSON?.() || {};
+      employeeCreateCalls.push(body);
+      const role = rolesPayload.find((item) => item.key === body.role_key) || rolesPayload[0];
+      const created = {
+        id: 900 + currentEmployees.value.length + 1,
+        customer_number: 900001000 + currentEmployees.value.length + 1,
+        display_name: body.display_name,
+        email: body.email,
+        phone_country_code: body.phone_country_code ?? null,
+        phone: body.phone ?? null,
+        active: true,
+        role,
+        departments: assignedDepartments.filter((department) => body.department_ids?.includes(department.id)),
+        created_at: "2026-01-01 00:00:00",
+        updated_at: "2026-01-01 00:00:00",
+      };
+      currentEmployees.value.unshift(created);
+      await route.fulfill(json({ data: created }));
+      return;
+    }
+
+    const employeeMatch = pathname.match(/\/limited-backoffice\/employees\/(\d+)$/);
+    if (employeeMatch && method === "PUT") {
+      const body = request.postDataJSON?.() || {};
+      employeeUpdateCalls.push(body);
+      const employeeId = Number(employeeMatch[1]);
+      const target = currentEmployees.value.find((employee) => Number(employee.id) === employeeId);
+      if (!target) {
+        await route.fulfill(json({ message: "Employee not found" }, 404));
+        return;
+      }
+
+      const role = rolesPayload.find((item) => item.key === body.role_key) || target.role;
+      Object.assign(target, {
+        display_name: body.display_name ?? target.display_name,
+        email: body.email ?? target.email,
+        phone_country_code: body.phone_country_code ?? null,
+        phone: body.phone ?? null,
+        role,
+        departments: Array.isArray(body.department_ids)
+          ? assignedDepartments.filter((department) => body.department_ids.includes(department.id))
+          : target.departments,
+        updated_at: "2026-01-01 01:00:00",
+      });
+      await route.fulfill(json({ data: target }));
       return;
     }
 
@@ -309,6 +367,8 @@ async function mockLimitedBackofficeApi(page, authSessionData = sessionData) {
     calls,
     forbiddenCalls,
     priceUpdateCalls,
+    employeeCreateCalls,
+    employeeUpdateCalls,
   };
 }
 
@@ -378,6 +438,7 @@ test.describe("Limited backoffice", () => {
 
     await expect(page.getByTestId("limited-employees-title")).toBeVisible();
     await expect(page.getByTestId("limited-employee-row-501")).toContainText("Casey Clerk");
+    await expect(page.getByTestId("limited-employee-phone-501")).toHaveText("+45 12345678");
     await expect(page.locator("#limited-employee-role option")).toHaveCount(5);
     await expect(page.getByTestId("limited-employee-role")).not.toContainText("Superuser");
     await expect(page.locator("body")).not.toContainText("department_access_1");
@@ -436,6 +497,93 @@ test.describe("Limited backoffice", () => {
     await expect(page.getByTestId("limited-role-permissions-modal")).toHaveCount(0);
   });
 
+  test("validates employee fields and submits optional phone details", async ({ page }) => {
+    await seedLimitedBackofficeSession(page);
+    const api = await mockLimitedBackofficeApi(page);
+
+    await page.goto("/backoffice/employees");
+
+    await expect(page.getByTestId("limited-employees-title")).toBeVisible();
+    await expect(page.getByTestId("limited-employee-save")).toBeDisabled();
+    await expect(page.getByTestId("limited-employee-save")).toHaveClass(/is-fullwidth/);
+    await expect(page.getByTestId("limited-employee-departments").locator(".switch")).toHaveCount(1);
+    await expect(page.getByTestId("limited-employee-phone-country-code")).toContainText("+45");
+
+    await page.getByTestId("limited-employee-name").fill("No Phone Worker");
+    await page.getByTestId("limited-employee-email").fill("no-phone@example.com");
+    await page.getByTestId("limited-employee-password").fill("Secret123!");
+    await expect(page.getByTestId("limited-employee-save")).toBeDisabled();
+
+    await page.getByTestId("limited-employee-department-1").click();
+    await expect(page.getByTestId("limited-employee-save")).toBeEnabled();
+    await page.getByTestId("limited-employee-save").click();
+
+    await expect.poll(() => api.employeeCreateCalls.length).toBe(1);
+    expect(api.employeeCreateCalls[0]).toEqual({
+      display_name: "No Phone Worker",
+      email: "no-phone@example.com",
+      phone_country_code: null,
+      phone: null,
+      password: "Secret123!",
+      role_key: "viewer",
+      department_ids: [1],
+    });
+    await expect(page.getByTestId("limited-employee-row-902")).toContainText("No Phone Worker");
+
+    await page.getByTestId("limited-employee-name").fill("Phone Worker");
+    await page.getByTestId("limited-employee-email").fill("phone@example.com");
+    await page.getByTestId("limited-employee-phone-country-code").selectOption("358");
+    await page.getByTestId("limited-employee-phone").fill("87654321");
+    await page.getByTestId("limited-employee-password").fill("Secret123!");
+    await page.getByTestId("limited-employee-department-1").click();
+    await expect(page.getByTestId("limited-employee-save")).toBeEnabled();
+    await page.getByTestId("limited-employee-save").click();
+
+    await expect.poll(() => api.employeeCreateCalls.length).toBe(2);
+    expect(api.employeeCreateCalls[1]).toEqual({
+      display_name: "Phone Worker",
+      email: "phone@example.com",
+      phone_country_code: 358,
+      phone: 87654321,
+      password: "Secret123!",
+      role_key: "viewer",
+      department_ids: [1],
+    });
+    await expect(page.getByTestId("limited-employee-row-903")).toContainText("Phone Worker");
+    await expect(page.getByTestId("limited-employee-phone-903")).toHaveText("+358 87654321");
+  });
+
+  test("edits employee contact details without requiring a new password", async ({ page }) => {
+    await seedLimitedBackofficeSession(page);
+    const api = await mockLimitedBackofficeApi(page);
+
+    await page.goto("/backoffice/employees");
+
+    await expect(page.getByTestId("limited-employee-row-501")).toBeVisible();
+    await page.getByTestId("limited-employee-edit-501").click();
+
+    await expect(page.getByTestId("limited-employee-password")).toHaveValue("");
+    await expect(page.getByTestId("limited-employee-save")).toBeEnabled();
+    await page.getByTestId("limited-employee-name").fill("Casey Lead");
+    await page.getByTestId("limited-employee-email").fill("casey.lead@example.com");
+    await page.getByTestId("limited-employee-phone-country-code").selectOption("358");
+    await page.getByTestId("limited-employee-phone").fill("87654321");
+    await page.getByTestId("limited-employee-save").click();
+
+    await expect.poll(() => api.employeeUpdateCalls.length).toBe(1);
+    expect(api.employeeUpdateCalls[0]).toEqual({
+      display_name: "Casey Lead",
+      email: "casey.lead@example.com",
+      phone_country_code: 358,
+      phone: 87654321,
+      role_key: "cashier",
+      department_ids: [1],
+    });
+    expect(api.employeeUpdateCalls[0]).not.toHaveProperty("password");
+    await expect(page.getByTestId("limited-employee-row-501")).toContainText("Casey Lead");
+    await expect(page.getByTestId("limited-employee-phone-501")).toHaveText("+358 87654321");
+  });
+
   test("does not render data for a department outside the manager scope", async ({ page }, testInfo) => {
     test.skip(!isDesktopProject(testInfo), "Desktop only");
 
diff --git a/tests/unit/playwright-pr-mapping.spec.js b/tests/unit/playwright-pr-mapping.spec.js
index 5eab9e4e..a8255be9 100644
--- a/tests/unit/playwright-pr-mapping.spec.js
+++ b/tests/unit/playwright-pr-mapping.spec.js
@@ -38,4 +38,10 @@ describe("Playwright PR mapping", () => {
     expect(triggersFallback("scripts/run-playwright-ci-parallel.mjs")).toBe(true);
     expect(triggersFallback("scripts/run-playwright-full-slice.mjs")).toBe(false);
   });
+
+  it("maps limited backoffice changes to the limited backoffice E2E coverage", () => {
+    expect(specsFor("src/views/backoffice/LimitedBackofficeEmployees.vue")).toContain(
+      "tests/e2e/limited-backoffice.spec.ts"
+    );
+  });
 });

From 5cc22f14bc8d73daca5c185ba6c2df9bc200c705 Mon Sep 17 00:00:00 2001
From: Jeppe B <2jepp9350@gmail.com>
Date: Mon, 6 Jul 2026 15:52:19 +0200
Subject: [PATCH 13/19] Fix date-only selection handling

Use local date-only parsing and formatting across date inputs and filters so clicked dates persist exactly.\n\nVerified with local format, lint, i18n, build, full unit tests, PR E2E, focused date E2E, broad smoke reruns, and GitHub PR checks.
---
 .../displays/buttons/DatePeriodSelector.vue   |  17 +--
 .../pos/steps/PosDepartmentStep1.vue          |   5 +-
 ...epartmentStep1MobileTransactionHistory.vue |   3 +-
 .../pagination/PaginationDisplayDates.vue     |   7 +-
 .../DepartmentPos/XLVaskUsagePagination.vue   |   9 +-
 .../InvoiceOrdersPagination.vue               |   8 +-
 .../UserDashboard/BookingsPagination.vue      |   9 +-
 .../UserDashboard/OrderBookingsPagination.vue |  15 ++-
 .../PaginationDisplayTemplateDate.vue         |  10 +-
 .../PaginationDisplayTemplateDates.vue        |   6 +-
 .../displays/user/bookings/bookingsTable.vue  |   6 +-
 src/components/menus/admin/AdminLeftMenu.vue  |   7 +-
 .../token/SessionUser/Objects/Bookings.vue    |   5 +-
 .../Objects/DepartmentDailyReports.vue        |   3 +-
 .../Objects/DepartmentTimeBookingsEntries.vue |   7 +-
 src/services/dateOnly.js                      |  84 +++++++++++++
 .../daily-report/DepartmentDailyReport.vue    |   7 +-
 .../DepartmentDailyReportObject.vue           |   8 +-
 ...partmentDashboardDailyReportNavigation.vue |  12 +-
 ...epartmentDashboardDailyReportTodayForm.vue |   7 +-
 .../grid/TimeBookingsNewGridControls.vue      |   7 +-
 .../DepartmentDailyBookingReportSmall.vue     |   4 +-
 .../DepartmentDashboardOverviewNavigation.vue |   7 +-
 .../displays/DepartmentsOverviewObject.vue    |   7 +-
 .../statistics/StatisticsOverview.vue         |   6 +-
 .../displays/StatisticsBookings.vue           |   5 +-
 tests/unit/date-only.spec.js                  |  34 ++++++
 tests/unit/date-period-selector.spec.js       |  26 +++++
 ...tment-overview-navigation.behavior.spec.js |   9 +-
 tests/unit/pagination-date-selection.spec.js  | 110 ++++++++++++++++++
 tests/unit/superuser-invoices-view.spec.js    |   2 +
 31 files changed, 354 insertions(+), 98 deletions(-)
 create mode 100644 src/services/dateOnly.js
 create mode 100644 tests/unit/date-only.spec.js
 create mode 100644 tests/unit/pagination-date-selection.spec.js

diff --git a/src/components/displays/buttons/DatePeriodSelector.vue b/src/components/displays/buttons/DatePeriodSelector.vue
index 8ae23ce5..ca7bbe0f 100644
--- a/src/components/displays/buttons/DatePeriodSelector.vue
+++ b/src/components/displays/buttons/DatePeriodSelector.vue
@@ -5,6 +5,7 @@ import { useWindowSize } from "@vueuse/core";
 import { BMessage } from "buefy";
 
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { formatLocalDateOnly, parseLocalDateOnly } from "@/services/dateOnly.js";
 
 type DateRange = {
   startDate: Date,
@@ -115,23 +116,11 @@ const availableYears = computed(() => (
 ));
 
 const formatDateInputValue = (date: Date) => {
-  if (!(date instanceof Date) || Number.isNaN(date.getTime())) {
-    return "";
-  }
-
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
+  return formatLocalDateOnly(date);
 };
 
 const parseDateInputValue = (value: string) => {
-  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
-  if (!match) {
-    return new Date(value);
-  }
-
-  return new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+  return parseLocalDateOnly(value);
 };
 
 const isSameDateInputValue = (left: Date, right: Date) => (
diff --git a/src/components/displays/department/pos/steps/PosDepartmentStep1.vue b/src/components/displays/department/pos/steps/PosDepartmentStep1.vue
index 01c6d26c..ebbb08e8 100644
--- a/src/components/displays/department/pos/steps/PosDepartmentStep1.vue
+++ b/src/components/displays/department/pos/steps/PosDepartmentStep1.vue
@@ -30,6 +30,7 @@ import PosLastScannedLicensePlatesV2 from "@/components/displays/department/pos/
 import PosDesktopOrderBookingSelectorModal from "@/components/displays/department/pos/steps/elements/PosDesktopOrderBookingSelectorModal.vue";
 import PosDesktopCustomerConflictModal from "@/components/displays/department/pos/steps/elements/PosDesktopCustomerConflictModal.vue";
 import PosDesktopDuplicateWarning from "@/components/displays/department/pos/steps/elements/PosDesktopDuplicateWarning.vue";
+import { todayLocalDateOnly } from "@/services/dateOnly.js";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { parsePosRouteSearch } from "@/views/dashboards/departmentDashboard/modules/Pos/posRouteState.js";
 import {
@@ -377,8 +378,8 @@ const fetchDuplicateOrdersForContext = async (context) => {
   try {
     const response = await SessionUser.request(SessionUser.objects.orders.meta.endpoint, "GET", {
       filters: `reg_1:${normalizedContext.reg1},department_id:${department_id.value},created_at-date_from:${
-        new Date().toISOString().split("T")[0]
-      },created_at-date_to:${new Date().toISOString().split("T")[0]}`,
+        todayLocalDateOnly()
+      },created_at-date_to:${todayLocalDateOnly()}`,
       limit: 5,
     });
 
diff --git a/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileTransactionHistory.vue b/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileTransactionHistory.vue
index e1be1054..b07c68dc 100644
--- a/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileTransactionHistory.vue
+++ b/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileTransactionHistory.vue
@@ -12,6 +12,7 @@ import PosDepartmentStepMobileButtonNextStep from "@/components/displays/departm
 import SessionUser from "@/components/session/token/SessionUser.vue";
 import { PosOrder } from "@/components/displays/department/pos/steps/mobile/objects/PosOrder.vue";
 import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
+import { todayLocalDateOnly } from "@/services/dateOnly.js";
 // Define the close event to emit when the component is closed
 const emit = defineEmits(["close"]);
 /** Display variables */
@@ -126,7 +127,7 @@ const liveTransactions = ref(null);
 const isLoading = ref(true);
 
 const syncListTransactionHistory = async () => {
-  let dateToday = new Date().toISOString().split("T")[0]; // Get today's date in YYYY-MM-DD format
+  let dateToday = todayLocalDateOnly(); // Get today's date in YYYY-MM-DD format
   isLoading.value = true;
   // Fetch the list of orders created today for the current department
   SessionUser.objects.orders.get
diff --git a/src/components/displays/pagination/PaginationDisplayDates.vue b/src/components/displays/pagination/PaginationDisplayDates.vue
index 13ead56b..a4b7a9de 100644
--- a/src/components/displays/pagination/PaginationDisplayDates.vue
+++ b/src/components/displays/pagination/PaginationDisplayDates.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { formatLocalDateOnly } from '@/services/dateOnly.js';
 type startEndDate = {
   start: Date; // The start date of the range
   end: Date; // The end date of the range
@@ -27,7 +28,7 @@ const datePresetFunctions = {
   month: {
     // Get the first day of the month based on the provided date first day at 00:00:01
     firstDayOfMonth: (date: Date): Date => {
-      return new Date(date.getFullYear(), date.getMonth(), 2, 0, 0, 1, 0); // Set to the first day of the month at 00:00:01
+      return new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0, 0); // Set to the first day of the month at 00:00:00
     },
     // Get the last day of the month based on the provided date last day at 23:59:59
     lastDayOfMonth: (date: Date): Date => {
@@ -116,7 +117,7 @@ export const datePresets = <datePreset[]>[
  */
 
 const convertToISO = (date: Date): string => {
-  return date.toISOString().split('T')[0]; // Convert to YYYY-MM-DD format
+  return formatLocalDateOnly(date); // Convert to YYYY-MM-DD format
 };
 
 export const dateFunctions = {
@@ -150,4 +151,4 @@ export default defineComponent({
   },
 });
 </script>
-<template></template>
\ No newline at end of file
+<template></template>
diff --git a/src/components/displays/pagination/models/DepartmentPos/XLVaskUsagePagination.vue b/src/components/displays/pagination/models/DepartmentPos/XLVaskUsagePagination.vue
index f148fe44..792030c2 100644
--- a/src/components/displays/pagination/models/DepartmentPos/XLVaskUsagePagination.vue
+++ b/src/components/displays/pagination/models/DepartmentPos/XLVaskUsagePagination.vue
@@ -50,6 +50,7 @@ import ShowErrorField from "@/components/global/ShowErrorField.vue";
 import { useI18n } from 'vue-i18n'
 import { BSwitch } from "buefy";
 import { isUsageOrderAttachedToOrder } from "@/components/displays/department/pos/sync/xlvaskUsageFilters.js";
+import { formatLocalDateOnly, parseLocalDateOnly } from "@/services/dateOnly.js";
 
 const { t } = useI18n()
 const router = useRouter();
@@ -63,7 +64,7 @@ const parseInitialDate = (value) => {
     return new Date();
   }
 
-  const parsed = new Date(`${value}T00:00:00`);
+  const parsed = parseLocalDateOnly(value);
   return Number.isNaN(parsed.getTime()) ? new Date() : parsed;
 };
 
@@ -129,7 +130,7 @@ const dateFrom = ref(parseInitialDate(props.initialDateFrom));
 const dateTo = ref(parseInitialDate(props.initialDateTo));
 
 const parsedDate = (date) => {
-  return new Date(date);
+  return parseLocalDateOnly(date);
 };
 
 const reloadScheduled = ref(false);
@@ -148,14 +149,14 @@ const actions = {
     from: {
       select: (date) => {
         dateFrom.value = parsedDate(date);
-        setFilter("StartTime-date_from", date.toISOString().split("T")[0], false);
+        setFilter("StartTime-date_from", formatLocalDateOnly(date), false);
         scheduleReload();
       }
     },
     to: {
       select: (date) => {
         dateTo.value = parsedDate(date);
-        setFilter("StartTime-date_to", date.toISOString().split("T")[0], false);
+        setFilter("StartTime-date_to", formatLocalDateOnly(date), false);
         scheduleReload();
       }
     },
diff --git a/src/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue b/src/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue
index 6adea012..8961165c 100644
--- a/src/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue
+++ b/src/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue
@@ -109,8 +109,8 @@ import OrdersTable from "@/components/displays/department/pos/orders/ordersTable
 import {SessionUser} from "@/components/session/token/SessionUser.vue";
 import PaginationDisplayFilters from "@/components/displays/pagination/PaginationDisplayFilters.vue";
 import DatePeriodSelector from "@/components/displays/buttons/DatePeriodSelector.vue";
-import {now} from "@vueuse/core";
 import { useI18n } from 'vue-i18n'
+import { formatLocalDateOnly, parseLocalDateOnly, todayLocalDateOnly } from "@/services/dateOnly.js";
 
 const { t } = useI18n()
 const router = useRouter();
@@ -176,8 +176,8 @@ if (props.autoLoad) {
 const date_from = ref(null);
 const date_to = ref(null);
 const onDateRangeSelected = (newSelectionStartDate, newSelectionToDate) => {
-  const formattedStartDate = newSelectionStartDate.toISOString().split("T")[0];
-  const formattedEndDate = newSelectionToDate.toISOString().split("T")[0];
+  const formattedStartDate = formatLocalDateOnly(newSelectionStartDate);
+  const formattedEndDate = formatLocalDateOnly(newSelectionToDate);
   date_from.value = formattedStartDate;
   date_to.value = formattedEndDate;
   setFilter("created_at-date_from", formattedStartDate, true);
@@ -361,7 +361,7 @@ const doesEndpointMatch = (matcher) => {
         <!-- Shortcuts for date filters -->
         <DatePeriodSelector :on-selection-change="onDateRangeSelected"
                             :visibility="{ showDailySelector: false, showWeeklySelector: false, showMultipleMonthWarning: false, showUpdateButton: false, showMonthSelector: false, showStartDate: false, showEndDate: false, showSelectionValidity: false, showYearSelector: false, showToLabel: false }"
-                            v-bind:selection="{ startDate: date_from ? new Date(date_from) : new Date(now()), endDate: date_to ? new Date(date_to) : new Date(now()) }"/>
+                            v-bind:selection="{ startDate: parseLocalDateOnly(date_from || todayLocalDateOnly()), endDate: parseLocalDateOnly(date_to || todayLocalDateOnly()) }"/>
         </div>
       </template>
       <template #default>
diff --git a/src/components/displays/pagination/models/UserDashboard/BookingsPagination.vue b/src/components/displays/pagination/models/UserDashboard/BookingsPagination.vue
index 7a9db406..d47793bb 100644
--- a/src/components/displays/pagination/models/UserDashboard/BookingsPagination.vue
+++ b/src/components/displays/pagination/models/UserDashboard/BookingsPagination.vue
@@ -28,6 +28,7 @@ import {ref, watch} from "vue";
 import { Colors } from "@/ThemeConfig.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { useI18n } from 'vue-i18n'
+import { todayLocalDateOnly } from "@/services/dateOnly.js";
 
 const { t } = useI18n()
 const router = useRouter();
@@ -52,7 +53,7 @@ watch(() => getFilter("status"), (value) => {
 // If the route starts with /user, set the endpoint to /user/bookings
 if (router.currentRoute.value.path.startsWith("/user")) {
   setEndpoint("/user/bookings", false);
-  setFilter("date", new Date().toISOString().split("T")[0], false);
+  setFilter("date", todayLocalDateOnly(), false);
   setOrder("created_at", "desc");
 }
 // If the route starts with /superuser, set the endpoint to /bookings
@@ -81,7 +82,7 @@ loadList();
 const showingToday = ref(true);
 
 watch(() => getFilter("date"), (value) => {
-  showingToday.value = value === new Date().toISOString().split("T")[0];
+  showingToday.value = value === todayLocalDateOnly();
 });
 
 // If the screen is mobile, set the is small variable to true
@@ -151,7 +152,7 @@ const showNewOrderBookingsPortal = () => {
         <label class="label">{{ isSmall ? t('common.today') : t('pagination.show_only_today') }}</label>
         <div class="control">
           <div class="field">
-            <input id="today" type="checkbox" class="switch is-rounded" @change="(event) => { setFilter('date', event.target.checked ? new Date().toISOString().split('T')[0] : '*') }" checked="checked" :class="{ 'is-link': showingToday }" />
+            <input id="today" type="checkbox" class="switch is-rounded" @change="(event) => { setFilter('date', event.target.checked ? todayLocalDateOnly() : '*') }" checked="checked" :class="{ 'is-link': showingToday }" />
             <label for="today"></label>
           </div>
         </div>
@@ -188,4 +189,4 @@ const showNewOrderBookingsPortal = () => {
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/displays/pagination/models/UserDashboard/OrderBookingsPagination.vue b/src/components/displays/pagination/models/UserDashboard/OrderBookingsPagination.vue
index 411c1648..46336b15 100644
--- a/src/components/displays/pagination/models/UserDashboard/OrderBookingsPagination.vue
+++ b/src/components/displays/pagination/models/UserDashboard/OrderBookingsPagination.vue
@@ -8,6 +8,7 @@ import OrderBookingsTable from "@/views/dashboards/userDashboard/bookings/displa
 import { departments, getDepartments } from "@/components/pagination/departmentTabs.vue";
 import { Colors } from "@/ThemeConfig.vue";
 import { useI18n } from "vue-i18n";
+import { endOfLocalDate, startOfLocalDate, todayLocalDateOnly } from "@/services/dateOnly.js";
 
 const { t } = useI18n();
 /**
@@ -52,11 +53,9 @@ const onOnlyTodayFilterChange = (event, autoLoadList = true) => {
     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", startOfLocalDate(val).toISOString(), false);
+    setFilter("datetime-date_to", endOfLocalDate(val).toISOString(), false);
   }
   if (autoLoadList) {
     loadList();
@@ -95,7 +94,7 @@ onMounted(() => {
       departmentFilter.value = value;
     } 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: todayLocalDateOnly() } }, false);
     }
     if (setFilterKey) {
       setFilter(key, value, false);
@@ -170,7 +169,7 @@ onMounted(() => {
               <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>
+                  <option :value="todayLocalDateOnly()">{{ t("common.yes") }}</option>
                 </select>
               </div>
             </div>
@@ -193,7 +192,7 @@ onMounted(() => {
                   @change="
                     (event) => {
                       onOnlyTodayFilterChange({
-                        target: { value: event.target.checked ? new Date().toISOString().split('T')[0] : '*' },
+                        target: { value: event.target.checked ? todayLocalDateOnly() : '*' },
                       });
                     }
                   "
@@ -226,7 +225,7 @@ onMounted(() => {
               @change="
                 (event) => {
                   onOnlyTodayFilterChange(
-                    { target: { value: event.target.checked ? new Date().toISOString().split('T')[0] : '*' } },
+                    { target: { value: event.target.checked ? todayLocalDateOnly() : '*' } },
                     false
                   );
                   onOrderIdFilterChange({ target: { value: event.target.checked ? 'is null' : '*' } });
diff --git a/src/components/displays/pagination/templates/PaginationDisplayTemplateDate.vue b/src/components/displays/pagination/templates/PaginationDisplayTemplateDate.vue
index e9dd7d52..0c12990f 100644
--- a/src/components/displays/pagination/templates/PaginationDisplayTemplateDate.vue
+++ b/src/components/displays/pagination/templates/PaginationDisplayTemplateDate.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import PaginationDisplayItemColumn from "@/components/displays/pagination/PaginationDisplayItemColumn.vue";
-import { ref, computed } from "vue";
+import { computed } from "vue";
+import { formatLocalDateOnly, parseLocalDateOnly } from "@/services/dateOnly.js";
 const props = defineProps({
   label: {
     type: String,
@@ -19,7 +20,7 @@ defineExpose({
 });
 
 const formattedDate = computed(() => {
-  return date.value.toISOString().split('T')[0];
+  return formatLocalDateOnly(date.value);
 });
 
 // This component is used to display a date input in a pagination display item column.
@@ -36,8 +37,7 @@ const formattedDate = computed(() => {
         class="input"
         :value="formattedDate"
         @input="(e) => {
-          const newDate = new Date(e.target.value);
-          console.log('Selected date:', newDate);
+          const newDate = parseLocalDateOnly(e.target.value);
           emit('update:date', newDate);
         }"
       />
@@ -47,4 +47,4 @@ const formattedDate = computed(() => {
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/displays/pagination/templates/PaginationDisplayTemplateDates.vue b/src/components/displays/pagination/templates/PaginationDisplayTemplateDates.vue
index eb6ab8ad..7be90d68 100644
--- a/src/components/displays/pagination/templates/PaginationDisplayTemplateDates.vue
+++ b/src/components/displays/pagination/templates/PaginationDisplayTemplateDates.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { SessionUser } from '@/components/session/token/SessionUser.vue';
 
@@ -10,7 +9,7 @@ import PaginationDisplayTemplateButton
   from "@/components/displays/pagination/templates/PaginationDisplayTemplateButton.vue";
 import { datePresets , dateFunctions} from '@/components/displays/pagination/PaginationDisplayDates.vue';
 
-const props = defineProps({
+defineProps({
   startDate: {
     type: Date,
     required: true,
@@ -46,6 +45,7 @@ function updateStartDate(date: Date) {
 // Update the end date model when the date is changed
 function updateEndDate(date: Date) {
   endDateModel.value = date;
+  emits('update:endDate', date);
 }
 </script>
 
@@ -79,4 +79,4 @@ function updateEndDate(date: Date) {
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/displays/user/bookings/bookingsTable.vue b/src/components/displays/user/bookings/bookingsTable.vue
index f8accbdf..7dcb2a30 100644
--- a/src/components/displays/user/bookings/bookingsTable.vue
+++ b/src/components/displays/user/bookings/bookingsTable.vue
@@ -13,6 +13,7 @@ import { showDownloadWashCertificate } from "@/components/shop/DownloadWashCerti
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
 import Swal from 'sweetalert2';
 import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
+import { todayLocalDateOnly, yesterdayLocalDateOnly } from "@/services/dateOnly.js";
 const redirectBookingObjectPage = (objectId) => {
   // Send the user to the object page
   window.location.href = `/user/bookings/${objectId}`;
@@ -237,7 +238,8 @@ window.addEventListener('resize', () => {
  * To organize the bookings, we want to show the bookings that are created today first, then yesterday, then all other days
  * @type {string}
  */
-const currentDate = new Date().toISOString().split("T")[0];
+const currentDate = todayLocalDateOnly();
+const previousDate = yesterdayLocalDateOnly();
 
 /**
  * Sort the bookings by date
@@ -362,7 +364,7 @@ const canUserEditObject = (object) => {
           </span>
           <span class="has-text-grey">
             <!-- Human readable date (Today, Yesterday, etc.) -->
-            {{ object.date === currentDate ? $t('tables.bookings.today') : object.date === new Date(new Date().setDate(new Date().getDate() - 1)).toISOString().split("T")[0] ? $t('tables.bookings.yesterday') : object.date }}
+            {{ object.date === currentDate ? $t('tables.bookings.today') : object.date === previousDate ? $t('tables.bookings.yesterday') : object.date }}
             <!-- Number of bookings on the date -->
             ({{ $t('tables.bookings.bookings_count', { count: objects.filter((booking) => booking.date === object.date).length }) }})
           </span>
diff --git a/src/components/menus/admin/AdminLeftMenu.vue b/src/components/menus/admin/AdminLeftMenu.vue
index 4974d03a..bd205b71 100644
--- a/src/components/menus/admin/AdminLeftMenu.vue
+++ b/src/components/menus/admin/AdminLeftMenu.vue
@@ -4,6 +4,7 @@ import { ref, watch, onMounted } from "vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { useRoute } from "vue-router";
 import { isAccessibleVisibleNamedDepartment, sortByDepartmentPriorityOrder } from "@/services/departmentVisibility.js";
+import { todayLocalDateOnly } from "@/services/dateOnly.js";
 // Get the department ID from the URL
 const route = useRoute();
 const department_id = route.params.departmentId || SessionUser.functions.getDepartmentIdFromUrl() || null;
@@ -73,9 +74,9 @@ const emphasis = ref({
           "department:" +
           department_id +
           ",status:pending,date-date_from:" +
-          new Date().toISOString().split("T")[0] +
+          todayLocalDateOnly() +
           ",date-date_to:" +
-          new Date().toISOString().split("T")[0],
+          todayLocalDateOnly(),
         limit: 1, // Limit to 1 booking, we only need to know if there are any bookings or not
         page: 1,
       })
@@ -97,7 +98,7 @@ const emphasis = ref({
        * Check if the department has a daily report for today
        */
       SessionUser.request(SessionUser.objects.department_daily_reports.meta.endpoint + "/get", "GET", {
-        date: new Date().toISOString().split("T")[0],
+        date: todayLocalDateOnly(),
         id: department_id, // This refers to the department ID
       })
         .then((response) => {
diff --git a/src/components/session/token/SessionUser/Objects/Bookings.vue b/src/components/session/token/SessionUser/Objects/Bookings.vue
index 45fdd53c..2ae9dd0d 100644
--- a/src/components/session/token/SessionUser/Objects/Bookings.vue
+++ b/src/components/session/token/SessionUser/Objects/Bookings.vue
@@ -5,6 +5,7 @@ import { ObjectsGlobal } from "@/components/session/token/SessionUser/Objects/Ob
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import {ref} from "vue";
 import i18n from '@/i18n';
+import { todayLocalDateOnly } from "@/services/dateOnly.js";
 
 const t = (key) => i18n.global.t(key);
 
@@ -241,7 +242,7 @@ export const Bookings = {
           '/bookings',
           'GET',
           {
-            filters: `department:${department},status:pending,date-date_from:${new Date().toISOString().split('T')[0]},date-date_to:${new Date().toISOString().split('T')[0]}`,
+            filters: `department:${department},status:pending,date-date_from:${todayLocalDateOnly()},date-date_to:${todayLocalDateOnly()}`,
             limit: 100,
             page: 1
           }
@@ -289,4 +290,4 @@ export const Bookings = {
     );
   }
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/session/token/SessionUser/Objects/DepartmentDailyReports.vue b/src/components/session/token/SessionUser/Objects/DepartmentDailyReports.vue
index e4417a4e..7230f2d7 100644
--- a/src/components/session/token/SessionUser/Objects/DepartmentDailyReports.vue
+++ b/src/components/session/token/SessionUser/Objects/DepartmentDailyReports.vue
@@ -5,6 +5,7 @@ import { ObjectsGlobal } from "@/components/session/token/SessionUser/Objects/Ob
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import {ref} from "vue";
 import i18n from '@/i18n';
+import { todayLocalDateOnly } from "@/services/dateOnly.js";
 
 const t = (key) => i18n.global.t(key);
 
@@ -80,7 +81,7 @@ const t = (key) => i18n.global.t(key);
               water_usage_morning: parseInt(water_usage_morning),
               water_usage: parseInt(water_usage),
               notes: notes ? notes : 'Daily report',
-              date: date ? date : new Date().toISOString().split('T')[0]
+              date: date ? date : todayLocalDateOnly()
             }
         );
       },
diff --git a/src/components/session/token/SessionUser/Objects/DepartmentTimeBookingsEntries.vue b/src/components/session/token/SessionUser/Objects/DepartmentTimeBookingsEntries.vue
index f6a2a9a5..cc294acf 100644
--- a/src/components/session/token/SessionUser/Objects/DepartmentTimeBookingsEntries.vue
+++ b/src/components/session/token/SessionUser/Objects/DepartmentTimeBookingsEntries.vue
@@ -1,6 +1,7 @@
 <script>
 import { ObjectsGlobal } from "@/components/session/token/SessionUser/Objects/ObjectsGlobal.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { formatLocalDateOnly, todayLocalDateOnly } from "@/services/dateOnly.js";
 
 /**
  * The DepartmentTimeBookingsEntries object
@@ -230,10 +231,10 @@ export const DepartmentTimeBookingsEntries = {
       if (!dateFrom) {
         const lastWeek = new Date();
         lastWeek.setDate(lastWeek.getDate() - 7);
-        dateFrom = lastWeek.toISOString().split('T')[0]; // Format as YYYY-MM-DD
+        dateFrom = formatLocalDateOnly(lastWeek); // Format as YYYY-MM-DD
       }
       if (!dateTo) {
-        dateTo = new Date().toISOString().split('T')[0]; // Format as YYYY-MM-DD
+        dateTo = todayLocalDateOnly(); // Format as YYYY-MM-DD
       }
       console.log("Fetching public available times for department:", departmentId, "from", dateFrom, "to", dateTo);
       // Make the request to fetch public available times for the department
@@ -279,4 +280,4 @@ export const DepartmentTimeBookingsEntries = {
     );
   }
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/services/dateOnly.js b/src/services/dateOnly.js
new file mode 100644
index 00000000..f13cd671
--- /dev/null
+++ b/src/services/dateOnly.js
@@ -0,0 +1,84 @@
+const DATE_ONLY_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/;
+const DATE_ONLY_PREFIX_PATTERN = /^(\d{4}-\d{2}-\d{2})/;
+
+const padDatePart = (value) => String(value).padStart(2, "0");
+
+export const isValidDate = (value) => value instanceof Date && !Number.isNaN(value.getTime());
+
+export const formatLocalDateOnly = (value = new Date()) => {
+  if (typeof value === "string") {
+    const directMatch = value.trim().match(DATE_ONLY_PREFIX_PATTERN);
+    if (directMatch) {
+      return directMatch[1];
+    }
+  }
+
+  const date = value instanceof Date ? value : new Date(value);
+  if (!isValidDate(date)) {
+    return "";
+  }
+
+  return [
+    date.getFullYear(),
+    padDatePart(date.getMonth() + 1),
+    padDatePart(date.getDate()),
+  ].join("-");
+};
+
+export const parseLocalDateOnly = (value) => {
+  if (value instanceof Date) {
+    return isValidDate(value)
+      ? new Date(value.getFullYear(), value.getMonth(), value.getDate())
+      : new Date(Number.NaN);
+  }
+
+  const stringValue = String(value ?? "").trim();
+  const match = DATE_ONLY_PATTERN.exec(stringValue);
+  if (match) {
+    const year = Number(match[1]);
+    const month = Number(match[2]);
+    const day = Number(match[3]);
+    const parsed = new Date(year, month - 1, day);
+
+    if (
+      parsed.getFullYear() === year
+      && parsed.getMonth() === month - 1
+      && parsed.getDate() === day
+    ) {
+      return parsed;
+    }
+
+    return new Date(Number.NaN);
+  }
+
+  const parsed = new Date(stringValue);
+  return isValidDate(parsed)
+    ? new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate())
+    : parsed;
+};
+
+export const todayLocalDateOnly = () => formatLocalDateOnly(new Date());
+
+export const yesterdayLocalDateOnly = () => {
+  const yesterday = new Date();
+  yesterday.setDate(yesterday.getDate() - 1);
+  return formatLocalDateOnly(yesterday);
+};
+
+export const startOfLocalDate = (value) => {
+  const date = parseLocalDateOnly(value);
+  if (!isValidDate(date)) {
+    return date;
+  }
+  date.setHours(0, 0, 0, 0);
+  return date;
+};
+
+export const endOfLocalDate = (value) => {
+  const date = parseLocalDateOnly(value);
+  if (!isValidDate(date)) {
+    return date;
+  }
+  date.setHours(23, 59, 59, 999);
+  return date;
+};
diff --git a/src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReport.vue b/src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReport.vue
index 714aa2c3..d1ba3abd 100644
--- a/src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReport.vue
+++ b/src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReport.vue
@@ -19,6 +19,7 @@ import DepartmentDashboardDailyReportNavigation from "@/views/dashboards/departm
 import DepartmentDashboardDailyReportProductSales from "@/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportProductSales.vue";
 import DepartmentDashboardDailyReportTodayForm from "@/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportTodayForm.vue";
 import DepartmentWeather from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentWeather.vue";
+import { parseLocalDateOnly, todayLocalDateOnly } from "@/services/dateOnly.js";
 import {
   complaints_metric_state,
   count_bookings,
@@ -131,7 +132,7 @@ onMounted(() => {
     return [...accessibleDepartmentIds.value];
   })();
 
-  const initialDateFrom = typeof query.dateFrom === "string" ? query.dateFrom : new Date().toISOString().split("T")[0];
+  const initialDateFrom = typeof query.dateFrom === "string" ? query.dateFrom : todayLocalDateOnly();
   const initialDateTo = typeof query.dateTo === "string" ? query.dateTo : initialDateFrom;
 
   initializeDailyReportFilters({
@@ -170,7 +171,7 @@ watch(
 );
 
 const formatDateShort = (dateString) => {
-  const date = new Date(dateString);
+  const date = parseLocalDateOnly(dateString);
   const dayName = date.toLocaleDateString("da-DK", { weekday: "long" });
   const dateValue = date.toLocaleDateString("da-DK", { day: "2-digit", month: "2-digit", year: "2-digit" });
   return `${dayName} d. ${dateValue}`;
@@ -178,7 +179,7 @@ const formatDateShort = (dateString) => {
 
 const formatDateRangeSubtitle = (startDateString, endDateString) => {
   const dateOptions = { day: "2-digit", month: "2-digit", year: "2-digit" };
-  return `${new Date(startDateString).toLocaleDateString("da-DK", dateOptions)} - ${new Date(endDateString).toLocaleDateString("da-DK", dateOptions)}`;
+  return `${parseLocalDateOnly(startDateString).toLocaleDateString("da-DK", dateOptions)} - ${parseLocalDateOnly(endDateString).toLocaleDateString("da-DK", dateOptions)}`;
 };
 
 const formatSubtitle = (subtitle) => {
diff --git a/src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue b/src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue
index 4dd56e4d..47a567db 100644
--- a/src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue
+++ b/src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue
@@ -2,18 +2,16 @@
 import { computed, ref, watch } from "vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { createEmptyOutsideHours, normalizeOutsideHours } from "@/views/dashboards/departmentDashboard/modules/daily-report/outsideHours.js";
+import { todayLocalDateOnly, yesterdayLocalDateOnly } from "@/services/dateOnly.js";
 
 const GENERATE_UNIQUE_ID = () => Math.random().toString(36).slice(2, 11);
 
 const DATE_TODAY = () => {
-  const date = new Date();
-  return date.toISOString().split("T")[0];
+  return todayLocalDateOnly();
 };
 
 const DATE_YESTERDAY = () => {
-  const date = new Date();
-  date.setDate(date.getDate() - 1);
-  return date.toISOString().split("T")[0];
+  return yesterdayLocalDateOnly();
 };
 
 const date_shortcuts = ref({
diff --git a/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportNavigation.vue b/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportNavigation.vue
index 7fad607c..daef8f37 100644
--- a/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportNavigation.vue
+++ b/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportNavigation.vue
@@ -17,6 +17,7 @@ import {
   isLoading as departmentsStoreLoading,
 } from "@/components/pagination/departmentTabs.vue";
 import { isAccessibleVisibleDepartment, sortByDepartmentPriorityOrder } from "@/services/departmentVisibility.js";
+import { formatLocalDateOnly, parseLocalDateOnly } from "@/services/dateOnly.js";
 
 /**
  * Props:
@@ -141,14 +142,7 @@ const toggleAllDepartments = () => {
 };
 
 const formatDateSelectionValue = (date) => {
-  if (!(date instanceof Date) || Number.isNaN(date.getTime())) {
-    return "";
-  }
-
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
+  return formatLocalDateOnly(date);
 };
 
 const onDateSelectionChange = (startDate, endDate) => {
@@ -161,7 +155,7 @@ const onDateSelectionChange = (startDate, endDate) => {
     <div class="column is-12" data-testid="daily-report-date-controls">
       <DatePeriodSelector
         :on-selection-change="onDateSelectionChange"
-        :selection="{ startDate: new Date(selected_date), endDate: new Date(selected_date_to) }"
+        :selection="{ startDate: parseLocalDateOnly(selected_date), endDate: parseLocalDateOnly(selected_date_to) }"
         :visibility="{
           showDailySelector: true,
           showWeeklySelector: true,
diff --git a/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportTodayForm.vue b/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportTodayForm.vue
index 800c39d8..c9555728 100644
--- a/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportTodayForm.vue
+++ b/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportTodayForm.vue
@@ -5,6 +5,7 @@ import { parseError, getError, clearErrors} from "@/components/request/HandleGlo
 import ShowErrorField from "@/components/global/ShowErrorField.vue";
 import { selected_date, onChangeCall, selected_department_id} from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue";
 import Swal from "sweetalert2";
+import { parseLocalDateOnly, yesterdayLocalDateOnly } from "@/services/dateOnly.js";
 
 const props = defineProps({
     department_id: Number,
@@ -23,7 +24,7 @@ const created_at = ref(null);
 const id = ref(null);
 const message = ref('');
 const yesterday = ref({
-    date: new Date(new Date().setDate(new Date().getDate() - 1)).toISOString().split('T')[0],
+    date: yesterdayLocalDateOnly(),
     water_usage: 0,
     water_usage_morning: 0,
     notes: null,
@@ -104,7 +105,7 @@ const getDailyReport = async () => {
         // Check if the date is today
         const created_at_val = new Date(response.data.data.created_at);
         const today = new Date();
-        if (created_at_val.toDateString() === (selected_date.value ? new Date(selected_date.value) : today).toDateString()) {
+        if (created_at_val.toDateString() === (selected_date.value ? parseLocalDateOnly(selected_date.value) : today).toDateString()) {
           // The daily report is today
           // So we can set the values
           water_usage.value = parseInt(response.data.data.water_usage);
@@ -212,4 +213,4 @@ onChangeCall(() => {
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboards/departmentDashboard/modules/time-bookings/book/displays/grid/TimeBookingsNewGridControls.vue b/src/views/dashboards/departmentDashboard/modules/time-bookings/book/displays/grid/TimeBookingsNewGridControls.vue
index d9229179..ac2b85d9 100644
--- a/src/views/dashboards/departmentDashboard/modules/time-bookings/book/displays/grid/TimeBookingsNewGridControls.vue
+++ b/src/views/dashboards/departmentDashboard/modules/time-bookings/book/displays/grid/TimeBookingsNewGridControls.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import { timeBookingsNewScheduler } from '@/views/dashboards/departmentDashboard/modules/time-bookings/book/TimeBookingsNewScheduler.vue';
+import { formatLocalDateOnly, parseLocalDateOnly } from "@/services/dateOnly.js";
 const date = ref();
 // Set the initial date to the current date YYYY-MM-DD format
 const formatDate = (date_input) => {
-  return date_input.toISOString().split('T')[0];
+  return formatLocalDateOnly(date_input);
 };
 date.value = formatDate(new Date());
 
@@ -15,7 +16,7 @@ watch(timeBookingsNewScheduler.date.selected, (newDate) => {
 
 watch(date, (newDate) => {
   // Update the selected date in the scheduler when the date input changes
-  timeBookingsNewScheduler.date.selected.value = new Date(newDate);
+  timeBookingsNewScheduler.date.selected.value = parseLocalDateOnly(newDate);
 });
 </script>
 
@@ -63,4 +64,4 @@ watch(date, (newDate) => {
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboards/departmentDashboard/other/displays/DepartmentDailyBookingReportSmall.vue b/src/views/dashboards/departmentDashboard/other/displays/DepartmentDailyBookingReportSmall.vue
index 1a274ee7..19d62e30 100644
--- a/src/views/dashboards/departmentDashboard/other/displays/DepartmentDailyBookingReportSmall.vue
+++ b/src/views/dashboards/departmentDashboard/other/displays/DepartmentDailyBookingReportSmall.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref, watch } from 'vue';
 import { SessionUser } from '@/components/session/token/SessionUser.vue';
+import { todayLocalDateOnly } from "@/services/dateOnly.js";
 
 const props = defineProps({
   department_id: {
@@ -68,8 +69,7 @@ const getBookings = async () => {
 };
 
 const getDate = () => {
-  const date = new Date();
-  return date.toISOString().split('T')[0];
+  return todayLocalDateOnly();
 };
 
 // Get the department
diff --git a/src/views/dashboards/departmentDashboard/other/displays/DepartmentDashboardOverviewNavigation.vue b/src/views/dashboards/departmentDashboard/other/displays/DepartmentDashboardOverviewNavigation.vue
index e3bc9fc1..daf41206 100644
--- a/src/views/dashboards/departmentDashboard/other/displays/DepartmentDashboardOverviewNavigation.vue
+++ b/src/views/dashboards/departmentDashboard/other/displays/DepartmentDashboardOverviewNavigation.vue
@@ -2,6 +2,7 @@
 
 import { selected_date, selected_date_to, selectDate as selectDailyReportDate } from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue";
 import DatePeriodSelector from "@/components/displays/buttons/DatePeriodSelector.vue";
+import { formatLocalDateOnly, parseLocalDateOnly } from "@/services/dateOnly.js";
 
 // Emits for parents that want to react to date changes (non-breaking if unused)
 const emit = defineEmits(['date-change']);
@@ -16,12 +17,12 @@ const selectDate = (startIso, endIso) => {
 
 <template>
   <DatePeriodSelector
-      :on-selection-change="(startDate, endDate) => selectDate(startDate.toISOString().split('T')[0], endDate.toISOString().split('T')[0])"
-      :selection="{ startDate: new Date(selected_date), endDate: new Date(selected_date_to) }"
+      :on-selection-change="(startDate, endDate) => selectDate(formatLocalDateOnly(startDate), formatLocalDateOnly(endDate))"
+      :selection="{ startDate: parseLocalDateOnly(selected_date), endDate: parseLocalDateOnly(selected_date_to) }"
       :visibility="{ showDailySelector: true, showWeeklySelector: true, showMultipleMonthWarning: false, showUpdateButton: false }"
       :reverse-level-order="true"
       @update:selection="(newSelection) => {
-        selectDate(newSelection.startDate.toISOString().split('T')[0], newSelection.endDate.toISOString().split('T')[0]);
+        selectDate(formatLocalDateOnly(newSelection.startDate), formatLocalDateOnly(newSelection.endDate));
       }"
   />
 </template>
diff --git a/src/views/dashboards/departmentDashboard/other/displays/DepartmentsOverviewObject.vue b/src/views/dashboards/departmentDashboard/other/displays/DepartmentsOverviewObject.vue
index 1ed0bebc..174ad4c4 100644
--- a/src/views/dashboards/departmentDashboard/other/displays/DepartmentsOverviewObject.vue
+++ b/src/views/dashboards/departmentDashboard/other/displays/DepartmentsOverviewObject.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import {defineComponent, ref, watch} from 'vue';
+import { todayLocalDateOnly } from "@/services/dateOnly.js";
 
 
 type fetch = {
@@ -11,8 +12,8 @@ type fetch = {
 };
 /** Define the variables */
 export const show_this_week = ref(false);
-export const selected_date = ref(new Date().toISOString().split('T')[0]);
-export const selected_date_to = ref(new Date().toISOString().split('T')[0]);
+export const selected_date = ref(todayLocalDateOnly());
+export const selected_date_to = ref(todayLocalDateOnly());
 export const last_fetch_id = ref(0);
 export const fetches = ref<fetch[]>([]);
 /** Define the functions */
@@ -53,4 +54,4 @@ watch([selected_date, selected_date_to], () => {
 export default defineComponent({
   name: 'DepartmentsOverviewObject'
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/dashboards/superUserDashboard/statistics/StatisticsOverview.vue b/src/views/dashboards/superUserDashboard/statistics/StatisticsOverview.vue
index 8dc538b1..950725ea 100644
--- a/src/views/dashboards/superUserDashboard/statistics/StatisticsOverview.vue
+++ b/src/views/dashboards/superUserDashboard/statistics/StatisticsOverview.vue
@@ -13,6 +13,7 @@ import StatisticsDepartmentGoal
   from "@/views/dashboards/superUserDashboard/statistics/displays/overview/StatisticsDepartmentGoal.vue";
 import {departments, getDepartments} from "@/components/pagination/departmentTabs.vue";
 import { useI18n } from 'vue-i18n';
+import { todayLocalDateOnly } from "@/services/dateOnly.js";
 
 const { t } = useI18n();
 
@@ -70,7 +71,8 @@ getDepartments()
 // Get the statistics
 const getStatistics = async () => {
   // Get the statistics
-  const response = await authenticatedRequest('/statistics/income/departments?start_date=' + (new Date()).toISOString().split('T')[0] + '&end_date=' + (new Date()).toISOString().split('T')[0])
+  const today = todayLocalDateOnly();
+  const response = await authenticatedRequest('/statistics/income/departments?start_date=' + today + '&end_date=' + today)
   // Get the sent data
   statistics_department_today.value = response.data.data
   // Log the data
@@ -131,4 +133,4 @@ getStatistics()
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboards/superUserDashboard/statistics/displays/StatisticsBookings.vue b/src/views/dashboards/superUserDashboard/statistics/displays/StatisticsBookings.vue
index 3aab2373..2daf5ff1 100644
--- a/src/views/dashboards/superUserDashboard/statistics/displays/StatisticsBookings.vue
+++ b/src/views/dashboards/superUserDashboard/statistics/displays/StatisticsBookings.vue
@@ -4,6 +4,7 @@ import {ref} from 'vue';
 import { Bar } from 'vue-chartjs';
 import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { todayLocalDateOnly } from "@/services/dateOnly.js";
 
 
 ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
@@ -16,7 +17,7 @@ const chartOptions = {
 // Shortcut to statistics
 
 // Set the time for the statistics to today
-SessionUser.adminUser.statistics.set_time((new Date()).toISOString().split('T')[0], (new Date()).toISOString().split('T')[0])
+SessionUser.adminUser.statistics.set_time(todayLocalDateOnly(), todayLocalDateOnly())
 
 
 
@@ -33,4 +34,4 @@ SessionUser.adminUser.statistics.set_time((new Date()).toISOString().split('T')[
         }"
     />
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/tests/unit/date-only.spec.js b/tests/unit/date-only.spec.js
new file mode 100644
index 00000000..a8e1cd7c
--- /dev/null
+++ b/tests/unit/date-only.spec.js
@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+
+import { endOfLocalDate, formatLocalDateOnly, parseLocalDateOnly, startOfLocalDate } from "@/services/dateOnly.js";
+
+describe("date-only helpers", () => {
+  it("formats Date objects from their local calendar date", () => {
+    expect(formatLocalDateOnly(new Date(2026, 2, 31, 0, 0, 0, 0))).toBe("2026-03-31");
+  });
+
+  it("parses date input values as local calendar dates", () => {
+    const parsed = parseLocalDateOnly("2026-03-31");
+
+    expect(parsed.getFullYear()).toBe(2026);
+    expect(parsed.getMonth()).toBe(2);
+    expect(parsed.getDate()).toBe(31);
+    expect(formatLocalDateOnly(parsed)).toBe("2026-03-31");
+  });
+
+  it("keeps date-only prefixes from API timestamps without timezone reinterpretation", () => {
+    expect(formatLocalDateOnly("2026-03-31T23:30:00.000Z")).toBe("2026-03-31");
+  });
+
+  it("rejects impossible date input values", () => {
+    expect(Number.isNaN(parseLocalDateOnly("2026-02-31").getTime())).toBe(true);
+  });
+
+  it("builds local day boundaries from the selected date", () => {
+    expect(startOfLocalDate("2026-03-31").getHours()).toBe(0);
+    expect(startOfLocalDate("2026-03-31").getMinutes()).toBe(0);
+    expect(endOfLocalDate("2026-03-31").getHours()).toBe(23);
+    expect(endOfLocalDate("2026-03-31").getMinutes()).toBe(59);
+    expect(formatLocalDateOnly(endOfLocalDate("2026-03-31"))).toBe("2026-03-31");
+  });
+});
diff --git a/tests/unit/date-period-selector.spec.js b/tests/unit/date-period-selector.spec.js
index c516c724..91620d02 100644
--- a/tests/unit/date-period-selector.spec.js
+++ b/tests/unit/date-period-selector.spec.js
@@ -122,6 +122,32 @@ describe("DatePeriodSelector mobile layout", () => {
     expect(formatLocalDate(onSelectionChange.mock.calls[0][0])).toBe("2026-03-01");
     expect(formatLocalDate(onSelectionChange.mock.calls[0][1])).toBe("2026-03-05");
   });
+
+  it("emits the exact clicked date for start and end inputs", async () => {
+    sharedState.width.value = 1024;
+    const onSelectionChange = vi.fn();
+    const wrapper = mount(DatePeriodSelector, {
+      props: {
+        selection: {
+          startDate: new Date(2026, 2, 1, 0, 0, 0, 0),
+          endDate: new Date(2026, 2, 3, 23, 59, 59, 999),
+        },
+        onSelectionChange,
+        visibility: {
+          showUpdateButton: false,
+        },
+      },
+    });
+
+    await wrapper.get("[data-testid='date-period-start']").setValue("2026-03-31");
+    await wrapper.get("[data-testid='date-period-end']").setValue("2026-04-02");
+
+    const emittedSelection = wrapper.emitted("update:selection")?.at(-1)?.[0];
+    expect(formatLocalDate(emittedSelection.startDate)).toBe("2026-03-31");
+    expect(formatLocalDate(emittedSelection.endDate)).toBe("2026-04-02");
+    expect(formatLocalDate(onSelectionChange.mock.calls.at(-1)[0])).toBe("2026-03-31");
+    expect(formatLocalDate(onSelectionChange.mock.calls.at(-1)[1])).toBe("2026-04-02");
+  });
 });
 
 describe("DatePeriodSelector month warning", () => {
diff --git a/tests/unit/department-overview-navigation.behavior.spec.js b/tests/unit/department-overview-navigation.behavior.spec.js
index 03a22e5e..3911ba1a 100644
--- a/tests/unit/department-overview-navigation.behavior.spec.js
+++ b/tests/unit/department-overview-navigation.behavior.spec.js
@@ -2,6 +2,7 @@
 import { defineComponent, nextTick } from "vue";
 import { mount } from "@vue/test-utils";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { formatLocalDateOnly } from "@/services/dateOnly.js";
 
 const selectDateMock = vi.hoisted(() => vi.fn());
 const sharedDateState = vi.hoisted(() => ({
@@ -39,10 +40,10 @@ const DatePeriodSelectorStub = defineComponent({
   emits: ["update:selection"],
   template: `
     <div>
-      <button class="trigger-on-selection-change" @click="onSelectionChange(new Date('2026-03-24T00:00:00.000Z'), new Date('2026-03-29T00:00:00.000Z'))">
+      <button class="trigger-on-selection-change" @click="onSelectionChange(new Date(2026, 2, 24), new Date(2026, 2, 29))">
         onSelectionChange
       </button>
-      <button class="trigger-update-selection" @click="$emit('update:selection', { startDate: new Date('2026-04-01T00:00:00.000Z'), endDate: new Date('2026-04-30T00:00:00.000Z') })">
+      <button class="trigger-update-selection" @click="$emit('update:selection', { startDate: new Date(2026, 3, 1), endDate: new Date(2026, 3, 30) })">
         update:selection
       </button>
     </div>
@@ -105,7 +106,7 @@ describe("DepartmentDashboardOverviewNavigation", () => {
     });
 
     const selector = wrapper.findComponent(DatePeriodSelectorStub);
-    expect(selector.props("selection").startDate.toISOString().split("T")[0]).toBe("2026-05-05");
-    expect(selector.props("selection").endDate.toISOString().split("T")[0]).toBe("2026-05-11");
+    expect(formatLocalDateOnly(selector.props("selection").startDate)).toBe("2026-05-05");
+    expect(formatLocalDateOnly(selector.props("selection").endDate)).toBe("2026-05-11");
   });
 });
diff --git a/tests/unit/pagination-date-selection.spec.js b/tests/unit/pagination-date-selection.spec.js
new file mode 100644
index 00000000..4ca3aebb
--- /dev/null
+++ b/tests/unit/pagination-date-selection.spec.js
@@ -0,0 +1,110 @@
+// @vitest-environment jsdom
+import { defineComponent } from "vue";
+import { mount } from "@vue/test-utils";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("vue-i18n", async (importOriginal) => {
+  const actual = await importOriginal();
+
+  return {
+    ...actual,
+    useI18n: () => ({
+      t: (value) => value,
+    }),
+  };
+});
+
+vi.mock("@/components/session/token/SessionUser.vue", () => ({
+  SessionUser: {
+    objects: {
+      global: {
+        language: {
+          date_from: "From",
+          date_to: "To",
+        },
+      },
+    },
+  },
+}));
+
+import { formatLocalDateOnly } from "@/services/dateOnly.js";
+import PaginationDisplayTemplateDate from "@/components/displays/pagination/templates/PaginationDisplayTemplateDate.vue";
+import PaginationDisplayTemplateDates from "@/components/displays/pagination/templates/PaginationDisplayTemplateDates.vue";
+import { dateFunctions } from "@/components/displays/pagination/PaginationDisplayDates.vue";
+
+const PaginationDisplayItemColumnStub = defineComponent({
+  name: "PaginationDisplayItemColumn",
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+  },
+  template: "<div><slot name='control' /></div>",
+});
+
+describe("pagination date selection", () => {
+  it("renders Date model values as the same local date", () => {
+    const wrapper = mount(PaginationDisplayTemplateDate, {
+      props: {
+        label: "Date",
+        modelValue: new Date(2026, 2, 31, 0, 0, 0, 0),
+      },
+      global: {
+        stubs: {
+          PaginationDisplayItemColumn: PaginationDisplayItemColumnStub,
+        },
+      },
+    });
+
+    expect(wrapper.get("input[type='date']").element.value).toBe("2026-03-31");
+  });
+
+  it("emits the clicked input date as the same local date", async () => {
+    const wrapper = mount(PaginationDisplayTemplateDate, {
+      props: {
+        label: "Date",
+        modelValue: new Date(2026, 2, 1, 0, 0, 0, 0),
+      },
+      global: {
+        stubs: {
+          PaginationDisplayItemColumn: PaginationDisplayItemColumnStub,
+        },
+      },
+    });
+
+    await wrapper.get("input[type='date']").setValue("2026-03-31");
+
+    const emittedDate = wrapper.emitted("update:date")?.at(-1)?.[0];
+    expect(formatLocalDateOnly(emittedDate)).toBe("2026-03-31");
+  });
+
+  it("uses the real first day of the month for month presets", () => {
+    const firstDay = dateFunctions.datePresetFunctions.month.firstDayOfMonth(new Date(2026, 4, 15, 12, 0, 0, 0));
+
+    expect(formatLocalDateOnly(firstDay)).toBe("2026-05-01");
+    expect(firstDay.getHours()).toBe(0);
+    expect(firstDay.getMinutes()).toBe(0);
+  });
+
+  it("emits both start and end updates from the paired date selector", async () => {
+    const wrapper = mount(PaginationDisplayTemplateDates, {
+      props: {
+        startDate: new Date(2026, 2, 1, 0, 0, 0, 0),
+        endDate: new Date(2026, 2, 31, 0, 0, 0, 0),
+      },
+      global: {
+        stubs: {
+          PaginationDisplayItemColumn: PaginationDisplayItemColumnStub,
+        },
+      },
+    });
+
+    const inputs = wrapper.findAll("input[type='date']");
+    await inputs[0].setValue("2026-04-01");
+    await inputs[1].setValue("2026-04-30");
+
+    expect(formatLocalDateOnly(wrapper.emitted("update:startDate")?.at(-1)?.[0])).toBe("2026-04-01");
+    expect(formatLocalDateOnly(wrapper.emitted("update:endDate")?.at(-1)?.[0])).toBe("2026-04-30");
+  });
+});
diff --git a/tests/unit/superuser-invoices-view.spec.js b/tests/unit/superuser-invoices-view.spec.js
index 2e07fe1f..1feaee7d 100644
--- a/tests/unit/superuser-invoices-view.spec.js
+++ b/tests/unit/superuser-invoices-view.spec.js
@@ -367,6 +367,8 @@ describe("Invoice orders pagination contract", () => {
     expect(invoiceOrdersPaginationSource).toContain(
       "const onDateRangeSelected = (newSelectionStartDate, newSelectionToDate) => {"
     );
+    expect(invoiceOrdersPaginationSource).toContain("formatLocalDateOnly(newSelectionStartDate)");
+    expect(invoiceOrdersPaginationSource).toContain("formatLocalDateOnly(newSelectionToDate)");
     expect(invoiceOrdersPaginationSource).toContain("date_from.value = formattedStartDate;");
     expect(invoiceOrdersPaginationSource).toContain("date_to.value = formattedEndDate;");
     expect(invoiceOrdersPaginationSource).toContain('setFilter("created_at-date_from", formattedStartDate, true);');

From 44e31672784a6b006799774b982a29d78b416bbb Mon Sep 17 00:00:00 2001
From: Jeppe B <2jepp9350@gmail.com>
Date: Mon, 6 Jul 2026 16:01:26 +0200
Subject: [PATCH 14/19] Build superuser department overview page (#156)

Build the superuser department overview page and align PR changed-E2E selection with the PR head ref.
---
 .github/workflows/tests.yml                   |   8 +-
 scripts/playwright-pr-mapping.mjs             |  10 +
 scripts/run-playwright-full-slice.mjs         |   1 +
 src/i18n/generated/global-v2.json             |  76 ++
 .../shared/superuser_dashboard/index.json     |  76 ++
 src/services/superuserDepartmentOverview.js   |  23 +
 .../department/Department.vue                 | 869 +++++++++++++++++-
 ...SuperUserDashboardDepartmentNavigation.vue |  79 +-
 .../e2e/superuser-department-overview.spec.js |  96 ++
 .../superuser-department-overview.spec.js     | 278 ++++++
 10 files changed, 1475 insertions(+), 41 deletions(-)
 create mode 100644 src/services/superuserDepartmentOverview.js
 create mode 100644 tests/e2e/superuser-department-overview.spec.js
 create mode 100644 tests/unit/superuser-department-overview.spec.js

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index ab032d70..e7bd7a47 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -142,6 +142,7 @@ jobs:
           EVENT_NAME: ${{ github.event_name }}
           HEAD_SHA: ${{ github.sha }}
           PR_BASE_SHA: ${{ github.event.pull_request.base.sha }}
+          PR_HEAD_SHA: ${{ github.event.pull_request.head.sha }}
           PUSH_BEFORE_SHA: ${{ github.event.before }}
         run: |
           set -euo pipefail
@@ -154,8 +155,13 @@ jobs:
           else
             base_ref="$PUSH_BEFORE_SHA"
           fi
+          if [[ "$EVENT_NAME" == "pull_request" && -n "$PR_HEAD_SHA" ]]; then
+            head_ref="$PR_HEAD_SHA"
+          else
+            head_ref="$HEAD_SHA"
+          fi
           echo "base=$base_ref" >> "$GITHUB_OUTPUT"
-          echo "head=$HEAD_SHA" >> "$GITHUB_OUTPUT"
+          echo "head=$head_ref" >> "$GITHUB_OUTPUT"
 
       - name: Setup Node.js
         uses: actions/setup-node@v5
diff --git a/scripts/playwright-pr-mapping.mjs b/scripts/playwright-pr-mapping.mjs
index e793e780..39b9819d 100644
--- a/scripts/playwright-pr-mapping.mjs
+++ b/scripts/playwright-pr-mapping.mjs
@@ -37,6 +37,16 @@ export const sourceMappings = [
     specs: ["tests/e2e/superuser-roles-permissions.spec.ts"],
     projects: chromiumProjects,
   },
+  {
+    name: "superuser-department-overview",
+    patterns: [
+      /^src\/services\/superuserDepartmentOverview\.js$/u,
+      /^src\/views\/dashboards\/superUserDashboard\/department\/Department\.vue$/u,
+      /^src\/views\/dashboards\/superUserDashboard\/department\/SuperUserDashboardDepartmentNavigation\.vue$/u,
+    ],
+    specs: ["tests/e2e/superuser-department-overview.spec.js"],
+    projects: chromiumProjects,
+  },
   {
     name: "booking",
     patterns: [/bookings?/iu, /time-bookings/iu, /^src\/views\/guest\/book\//u],
diff --git a/scripts/run-playwright-full-slice.mjs b/scripts/run-playwright-full-slice.mjs
index ef936fed..81e3a1ab 100644
--- a/scripts/run-playwright-full-slice.mjs
+++ b/scripts/run-playwright-full-slice.mjs
@@ -101,6 +101,7 @@ export const ownedFilesByRole = {
     "superuser-customer-complaints.spec.ts",
     "superuser-customers-mass-import.spec.ts",
     "superuser-department-branding.spec.js",
+    "superuser-department-overview.spec.js",
     "superuser-department-gates.spec.ts",
     "superuser-department-lanes.spec.ts",
     "superuser-department-pricing-custom-only.spec.ts",
diff --git a/src/i18n/generated/global-v2.json b/src/i18n/generated/global-v2.json
index 070254a2..0ca3304c 100644
--- a/src/i18n/generated/global-v2.json
+++ b/src/i18n/generated/global-v2.json
@@ -4567,6 +4567,82 @@
         "subtitle": "@:{'templates.generated.compat.superuser_dashboard.departments.subtitle'}",
         "title": "@:common.departments"
       },
+      "department_navigation": {
+        "overview": "Overview",
+        "modules": "Modules",
+        "branding": "Profile & Branding",
+        "gateways": "Gateways",
+        "stripe": "Stripe",
+        "pricing": "Pricing",
+        "categories": "Categories"
+      },
+      "department_overview": {
+        "title": "Department overview",
+        "subtitle": "Operational overview for the selected department",
+        "loading": "Loading department overview",
+        "date_from": "From",
+        "date_to": "To",
+        "range_label": "{from} to {to}",
+        "empty_value": "-",
+        "out_of": "of {total}",
+        "presets": {
+          "today": "Today",
+          "last_seven_days": "Last 7 days"
+        },
+        "metrics": {
+          "bookings": "Bookings",
+          "complaints": "Complaints",
+          "night_washes": "Night washes",
+          "overtime": "Overtime",
+          "products_sold": "Products sold",
+          "revenue": "Revenue",
+          "transactions": "Transactions",
+          "washes": "Washes",
+          "water_usage": "Water"
+        },
+        "units": {
+          "hours": "h",
+          "liters": "L"
+        },
+        "products": {
+          "title": "Product mix",
+          "subtitle": "Tracked wash products in the selected period",
+          "empty": "No product activity for the selected period"
+        },
+        "profile": {
+          "title": "Department profile",
+          "no_description": "No department description",
+          "department_id": "Department ID",
+          "economic_department_id": "Economic department",
+          "branding": "Branding",
+          "created_at": "Created",
+          "updated_at": "Updated"
+        },
+        "hardware": {
+          "title": "Hardware readiness",
+          "subtitle": "Gateway-backed lane and relay state",
+          "gateways": "Gateways online",
+          "lanes": "Lanes",
+          "gates": "Gates",
+          "relays": "Relays",
+          "scanners": "Scanners",
+          "issues": "Issues"
+        },
+        "quick_links": {
+          "title": "Department tools",
+          "subtitle": "Open the focused setup areas for this department",
+          "modules": "Modules",
+          "branding": "Branding",
+          "gateways": "Gateways",
+          "stripe": "Stripe",
+          "pricing": "Pricing",
+          "categories": "Categories"
+        },
+        "errors": {
+          "invalid_department": "A valid department is required",
+          "load": "Unable to load the department overview"
+        }
+      },
       "employees": {
         "edit_employee_title": "@:employees.edit_employee",
         "new_employee_subtitle": "@:{'templates.generated.compat.superuser_dashboard.employees.new_employee_subtitle'}",
diff --git a/src/i18n/source/global/shared/superuser_dashboard/index.json b/src/i18n/source/global/shared/superuser_dashboard/index.json
index 8c33a175..a2059492 100644
--- a/src/i18n/source/global/shared/superuser_dashboard/index.json
+++ b/src/i18n/source/global/shared/superuser_dashboard/index.json
@@ -40,6 +40,82 @@
       "subtitle": "@:{'phrases.compat.superuser_dashboard.departments.subtitle'}",
       "title": "@:common.departments"
     },
+    "department_navigation": {
+      "overview": "Overview",
+      "modules": "Modules",
+      "branding": "Profile & Branding",
+      "gateways": "Gateways",
+      "stripe": "Stripe",
+      "pricing": "Pricing",
+      "categories": "Categories"
+    },
+    "department_overview": {
+      "title": "Department overview",
+      "subtitle": "Operational overview for the selected department",
+      "loading": "Loading department overview",
+      "date_from": "From",
+      "date_to": "To",
+      "range_label": "{from} to {to}",
+      "empty_value": "-",
+      "out_of": "of {total}",
+      "presets": {
+        "today": "Today",
+        "last_seven_days": "Last 7 days"
+      },
+      "metrics": {
+        "bookings": "Bookings",
+        "complaints": "Complaints",
+        "night_washes": "Night washes",
+        "overtime": "Overtime",
+        "products_sold": "Products sold",
+        "revenue": "Revenue",
+        "transactions": "Transactions",
+        "washes": "Washes",
+        "water_usage": "Water"
+      },
+      "units": {
+        "hours": "h",
+        "liters": "L"
+      },
+      "products": {
+        "title": "Product mix",
+        "subtitle": "Tracked wash products in the selected period",
+        "empty": "No product activity for the selected period"
+      },
+      "profile": {
+        "title": "Department profile",
+        "no_description": "No department description",
+        "department_id": "Department ID",
+        "economic_department_id": "Economic department",
+        "branding": "Branding",
+        "created_at": "Created",
+        "updated_at": "Updated"
+      },
+      "hardware": {
+        "title": "Hardware readiness",
+        "subtitle": "Gateway-backed lane and relay state",
+        "gateways": "Gateways online",
+        "lanes": "Lanes",
+        "gates": "Gates",
+        "relays": "Relays",
+        "scanners": "Scanners",
+        "issues": "Issues"
+      },
+      "quick_links": {
+        "title": "Department tools",
+        "subtitle": "Open the focused setup areas for this department",
+        "modules": "Modules",
+        "branding": "Branding",
+        "gateways": "Gateways",
+        "stripe": "Stripe",
+        "pricing": "Pricing",
+        "categories": "Categories"
+      },
+      "errors": {
+        "invalid_department": "A valid department is required",
+        "load": "Unable to load the department overview"
+      }
+    },
     "employees": {
       "edit_employee_title": "@:employees.edit_employee",
       "new_employee_subtitle": "@:{'phrases.compat.superuser_dashboard.employees.new_employee_subtitle'}",
diff --git a/src/services/superuserDepartmentOverview.js b/src/services/superuserDepartmentOverview.js
new file mode 100644
index 00000000..b48c8d58
--- /dev/null
+++ b/src/services/superuserDepartmentOverview.js
@@ -0,0 +1,23 @@
+import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
+
+export const getSuperuserDepartmentOverview = (departmentId, { date, dateTo } = {}) => {
+  const normalizedDepartmentId = Number.parseInt(String(departmentId ?? ""), 10);
+
+  if (!Number.isInteger(normalizedDepartmentId) || normalizedDepartmentId <= 0) {
+    return Promise.reject(new Error("A valid department id is required."));
+  }
+
+  const params = {
+    date,
+  };
+
+  if (dateTo) {
+    params.date_to = dateTo;
+  }
+
+  return authenticatedRequest(
+    `/superuser/departments/${encodeURIComponent(String(normalizedDepartmentId))}/overview`,
+    "GET",
+    params
+  );
+};
diff --git a/src/views/dashboards/superUserDashboard/department/Department.vue b/src/views/dashboards/superUserDashboard/department/Department.vue
index a4c6536a..eff54017 100644
--- a/src/views/dashboards/superUserDashboard/department/Department.vue
+++ b/src/views/dashboards/superUserDashboard/department/Department.vue
@@ -2,34 +2,871 @@
 import PageTitle from "@/components/global/PageTitle.vue";
 import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { getEdgeGatewayDepartmentWorkspace } from "@/services/edgeGateways.js";
+import { getSuperuserDepartmentOverview } from "@/services/superuserDepartmentOverview.js";
 import DepartmentSubPageWrapper from "@/views/dashboards/superUserDashboard/department/DepartmentSubPageWrapper.vue";
-import { setDepartment, department, departmentId } from "@/views/dashboards/superUserDashboard/department/SuperUserSelectedDepartmentObject.vue";
-import { useRouter } from 'vue-router'
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute, useRouter } from "vue-router";
 
-// Get the department from the route
-const router = useRouter()
-setDepartment(router.currentRoute.value.params.departmentId);
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+
+const DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+
+const formatDateInput = (value = new Date()) => {
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return formatDateInput(new Date());
+  }
+
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+
+const addDays = (value, days) => {
+  const date = new Date(`${value}T00:00:00`);
+  date.setDate(date.getDate() + days);
+  return formatDateInput(date);
+};
+
+const today = () => formatDateInput(new Date());
+const isDateValue = (value) => DATE_PATTERN.test(String(value || ""));
+const normalizeDate = (value, fallback = today()) => (isDateValue(value) ? String(value) : fallback);
+
+const dateFrom = ref(normalizeDate(route.query.date));
+const dateTo = ref(normalizeDate(route.query.date_to, dateFrom.value));
+const department = ref(null);
+const overview = ref(null);
+const hardwareWorkspace = ref(null);
+const loading = ref(false);
+const hardwareLoading = ref(false);
+const errorMessage = ref("");
+
+const departmentId = computed(() => Number.parseInt(String(route.params.departmentId || ""), 10));
+const hasDepartmentId = computed(() => Number.isInteger(departmentId.value) && departmentId.value > 0);
+const pageTitle = computed(() => department.value?.name || t("superuser_dashboard.department_overview.title"));
+const pageSubtitle = computed(() => t("superuser_dashboard.department_overview.subtitle"));
+const overviewMetrics = computed(() => overview.value?.metrics || {});
+const productTiles = computed(() => (Array.isArray(overview.value?.products) ? overview.value.products : []));
+const periodLabel = computed(() =>
+  dateFrom.value === dateTo.value
+    ? dateFrom.value
+    : t("superuser_dashboard.department_overview.range_label", {
+        from: dateFrom.value,
+        to: dateTo.value,
+      })
+);
+
+const metricDefinitions = computed(() => [
+  {
+    key: "revenue",
+    icon: "fa-sack-dollar",
+    label: t("superuser_dashboard.department_overview.metrics.revenue"),
+    formatter: formatCurrency,
+  },
+  {
+    key: "washes",
+    icon: "fa-truck",
+    label: t("superuser_dashboard.department_overview.metrics.washes"),
+    formatter: formatNumber,
+  },
+  {
+    key: "transactions",
+    icon: "fa-receipt",
+    label: t("superuser_dashboard.department_overview.metrics.transactions"),
+    formatter: formatNumber,
+  },
+  {
+    key: "bookings",
+    icon: "fa-calendar-check",
+    label: t("superuser_dashboard.department_overview.metrics.bookings"),
+    formatter: formatNumber,
+    showOutOf: true,
+  },
+  {
+    key: "products_sold",
+    icon: "fa-boxes-stacked",
+    label: t("superuser_dashboard.department_overview.metrics.products_sold"),
+    formatter: formatNumber,
+  },
+  {
+    key: "water_usage",
+    icon: "fa-droplet",
+    label: t("superuser_dashboard.department_overview.metrics.water_usage"),
+    formatter: formatNumber,
+    suffix: t("superuser_dashboard.department_overview.units.liters"),
+  },
+  {
+    key: "complaints",
+    icon: "fa-triangle-exclamation",
+    label: t("superuser_dashboard.department_overview.metrics.complaints"),
+    formatter: formatNumber,
+  },
+  {
+    key: "night_washes",
+    icon: "fa-moon",
+    label: t("superuser_dashboard.department_overview.metrics.night_washes"),
+    formatter: formatNumber,
+  },
+  {
+    key: "overtime",
+    icon: "fa-clock",
+    label: t("superuser_dashboard.department_overview.metrics.overtime"),
+    formatter: formatDecimal,
+    suffix: t("superuser_dashboard.department_overview.units.hours"),
+  },
+]);
+
+const quickLinks = computed(() => [
+  {
+    label: t("superuser_dashboard.department_overview.quick_links.modules"),
+    icon: "fa-toggle-on",
+    path: `/superuser/departments/${departmentId.value}/modules`,
+  },
+  {
+    label: t("superuser_dashboard.department_overview.quick_links.branding"),
+    icon: "fa-palette",
+    path: `/superuser/departments/${departmentId.value}/branding`,
+  },
+  {
+    label: t("superuser_dashboard.department_overview.quick_links.gateways"),
+    icon: "fa-network-wired",
+    path: `/superuser/departments/${departmentId.value}/gateways`,
+  },
+  {
+    label: t("superuser_dashboard.department_overview.quick_links.stripe"),
+    icon: "fa-credit-card",
+    path: `/superuser/departments/${departmentId.value}/stripe/terminals/readers`,
+  },
+  {
+    label: t("superuser_dashboard.department_overview.quick_links.pricing"),
+    icon: "fa-tags",
+    path: `/superuser/departments/${departmentId.value}/pricing`,
+  },
+  {
+    label: t("superuser_dashboard.department_overview.quick_links.categories"),
+    icon: "fa-layer-group",
+    path: `/superuser/departments/${departmentId.value}/categories`,
+  },
+]);
+
+function toNumber(value) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+function formatNumber(value) {
+  return new Intl.NumberFormat("da-DK").format(toNumber(value));
+}
+
+function formatDecimal(value) {
+  return new Intl.NumberFormat("da-DK", {
+    maximumFractionDigits: 2,
+  }).format(toNumber(value));
+}
+
+function formatCurrency(value) {
+  const amount = toNumber(value);
+  if (SessionUser.functions?.currency?.toLocal) {
+    return SessionUser.functions.currency.toLocal(amount);
+  }
+
+  return new Intl.NumberFormat("da-DK", {
+    style: "currency",
+    currency: "DKK",
+    maximumFractionDigits: 0,
+  }).format(amount);
+}
+
+function formatDateTime(value) {
+  if (!value) {
+    return t("superuser_dashboard.department_overview.empty_value");
+  }
+
+  if (SessionUser.functions?.date?.toLocal) {
+    return SessionUser.functions.date.toLocal(value);
+  }
+
+  const date = new Date(String(value).replace(" ", "T"));
+  return Number.isNaN(date.getTime()) ? String(value) : new Intl.DateTimeFormat("da-DK").format(date);
+}
+
+function metricPayload(key) {
+  return overviewMetrics.value?.[key] || {
+    state: "unavailable",
+    value: null,
+  };
+}
+
+function metricValue(definition) {
+  const metric = metricPayload(definition.key);
+  if (metric.state && metric.state !== "ready") {
+    return t("superuser_dashboard.department_overview.empty_value");
+  }
+
+  const formatted = definition.formatter(metric.value);
+  return definition.suffix ? `${formatted} ${definition.suffix}` : formatted;
+}
+
+function metricSecondary(definition) {
+  const metric = metricPayload(definition.key);
+  if (!definition.showOutOf || metric.out_of === undefined || metric.out_of === null) {
+    return "";
+  }
+
+  return t("superuser_dashboard.department_overview.out_of", {
+    total: formatNumber(metric.out_of),
+  });
+}
+
+const asArray = (value) => {
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  if (value && typeof value === "object") {
+    return Object.values(value);
+  }
+
+  return [];
+};
+
+const hardwareSummary = computed(() => {
+  const workspace = hardwareWorkspace.value || {};
+  const gateways = asArray(workspace.gateways);
+  const lanes = asArray(workspace.lanes);
+  const gates = asArray(workspace.gates);
+  const relays = asArray(workspace.relays);
+  const scanners = asArray(workspace.scanners || workspace.number_plate_scanners);
+  const issues = asArray(workspace.issues || workspace.diagnostics || workspace.hardware?.issues);
+  const onlineGateways = gateways.filter((gateway) => {
+    const status = String(gateway?.status || gateway?.health || "").toLowerCase();
+    return ["online", "ready", "ok", "healthy"].includes(status);
+  }).length;
+
+  return {
+    gateways: gateways.length,
+    onlineGateways,
+    lanes: lanes.length,
+    gates: gates.length,
+    relays: relays.length,
+    scanners: scanners.length,
+    issues: issues.length,
+  };
+});
+
+const hasHardwareSummary = computed(() => hardwareLoading.value || Boolean(hardwareWorkspace.value));
+const departmentProfileRows = computed(() => [
+  {
+    label: t("superuser_dashboard.department_overview.profile.department_id"),
+    value: department.value?.id ?? t("superuser_dashboard.department_overview.empty_value"),
+  },
+  {
+    label: t("superuser_dashboard.department_overview.profile.economic_department_id"),
+    value: department.value?.economic_department_id ?? t("superuser_dashboard.department_overview.empty_value"),
+  },
+  {
+    label: t("superuser_dashboard.department_overview.profile.branding"),
+    value: department.value?.branding ?? t("superuser_dashboard.department_overview.empty_value"),
+  },
+  {
+    label: t("superuser_dashboard.department_overview.profile.created_at"),
+    value: formatDateTime(department.value?.created_at),
+  },
+  {
+    label: t("superuser_dashboard.department_overview.profile.updated_at"),
+    value: formatDateTime(department.value?.updated_at),
+  },
+]);
+
+function normalizeRange(from, to) {
+  const normalizedFrom = normalizeDate(from);
+  let normalizedTo = normalizeDate(to, normalizedFrom);
+
+  if (normalizedTo < normalizedFrom) {
+    normalizedTo = normalizedFrom;
+  }
+
+  return {
+    from: normalizedFrom,
+    to: normalizedTo,
+  };
+}
+
+async function replaceRange(from, to) {
+  const normalized = normalizeRange(from, to);
+  dateFrom.value = normalized.from;
+  dateTo.value = normalized.to;
+
+  await router.replace({
+    query: {
+      ...route.query,
+      date: normalized.from,
+      date_to: normalized.to === normalized.from ? undefined : normalized.to,
+    },
+  });
+}
+
+const applyDateInputs = () => replaceRange(dateFrom.value, dateTo.value);
+const setToday = () => replaceRange(today(), today());
+const setLastSevenDays = () => replaceRange(addDays(today(), -6), today());
+
+async function loadOverview() {
+  if (!hasDepartmentId.value) {
+    errorMessage.value = t("superuser_dashboard.department_overview.errors.invalid_department");
+    return;
+  }
+
+  loading.value = true;
+  errorMessage.value = "";
+
+  try {
+    const response = await getSuperuserDepartmentOverview(departmentId.value, {
+      date: dateFrom.value,
+      dateTo: dateTo.value,
+    });
+    const payload = response?.data?.data || {};
+    department.value = payload.department || null;
+    overview.value = payload.overview || null;
+  } catch (error) {
+    department.value = null;
+    overview.value = null;
+    errorMessage.value =
+      error?.response?.data?.message || error?.message || t("superuser_dashboard.department_overview.errors.load");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function loadHardware() {
+  if (!hasDepartmentId.value) {
+    return;
+  }
+
+  hardwareLoading.value = true;
+  hardwareWorkspace.value = null;
+
+  try {
+    const response = await getEdgeGatewayDepartmentWorkspace(departmentId.value);
+    hardwareWorkspace.value = response?.data?.data || null;
+  } catch (_error) {
+    hardwareWorkspace.value = null;
+  } finally {
+    hardwareLoading.value = false;
+  }
+}
+
+function openQuickLink(path) {
+  router.push(path);
+}
+
+watch(
+  () => [route.params.departmentId, route.query.date, route.query.date_to],
+  () => {
+    const normalized = normalizeRange(route.query.date, route.query.date_to || route.query.date);
+    dateFrom.value = normalized.from;
+    dateTo.value = normalized.to;
+    loadOverview();
+    loadHardware();
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
   <RestrictedPageWrapper :hasPermission="SessionUser.canAccessSuperUser()">
     <DepartmentSubPageWrapper>
       <template #title>
-        <PageTitle title="Department" subtitle="Department data" />
+        <PageTitle :title="pageTitle" :subtitle="pageSubtitle" />
       </template>
-      <div>
-        Department stuff
-        <code>{{ departmentId }}</code>
-        <code>{{ department.id }}</code>
-        <code>{{ department.name }}</code>
-        <code>{{ department.description }}</code>
-        <code>{{ department.created_at }}</code>
-        <code>{{ department.updated_at }}</code>
-      </div>
+
+      <section class="department-overview" data-testid="superuser-department-overview">
+        <div class="overview-toolbar">
+          <div class="overview-period">
+            <label class="date-field">
+              <span>{{ t("superuser_dashboard.department_overview.date_from") }}</span>
+              <input
+                v-model="dateFrom"
+                class="input"
+                data-testid="department-overview-date-from"
+                type="date"
+                @change="applyDateInputs"
+              />
+            </label>
+            <label class="date-field">
+              <span>{{ t("superuser_dashboard.department_overview.date_to") }}</span>
+              <input
+                v-model="dateTo"
+                class="input"
+                data-testid="department-overview-date-to"
+                type="date"
+                @change="applyDateInputs"
+              />
+            </label>
+            <button
+              class="button is-light"
+              data-testid="department-overview-preset-today"
+              type="button"
+              @click="setToday"
+            >
+              <span class="icon"><i class="fa-solid fa-calendar-day" /></span>
+              <span>{{ t("superuser_dashboard.department_overview.presets.today") }}</span>
+            </button>
+            <button
+              class="button is-light"
+              data-testid="department-overview-preset-week"
+              type="button"
+              @click="setLastSevenDays"
+            >
+              <span class="icon"><i class="fa-solid fa-calendar-week" /></span>
+              <span>{{ t("superuser_dashboard.department_overview.presets.last_seven_days") }}</span>
+            </button>
+          </div>
+          <div class="period-chip" data-testid="department-overview-period">
+            <span class="icon"><i class="fa-solid fa-clock-rotate-left" /></span>
+            <span>{{ periodLabel }}</span>
+          </div>
+        </div>
+
+        <div v-if="errorMessage" class="notification is-danger is-light" data-testid="department-overview-error">
+          {{ errorMessage }}
+        </div>
+
+        <div v-if="loading && !overview" class="overview-loading" data-testid="department-overview-loading">
+          <span class="icon"><i class="fa-solid fa-spinner fa-spin" /></span>
+          <span>{{ t("superuser_dashboard.department_overview.loading") }}</span>
+        </div>
+
+        <template v-else>
+          <div class="kpi-grid">
+            <article
+              v-for="metric in metricDefinitions"
+              :key="metric.key"
+              class="kpi-card"
+              :data-testid="`department-overview-kpi-${metric.key}`"
+            >
+              <div class="kpi-icon">
+                <i :class="['fa-solid', metric.icon]" />
+              </div>
+              <div class="kpi-content">
+                <span class="kpi-label">{{ metric.label }}</span>
+                <strong class="kpi-value">{{ metricValue(metric) }}</strong>
+                <span v-if="metricSecondary(metric)" class="kpi-secondary">{{ metricSecondary(metric) }}</span>
+              </div>
+            </article>
+          </div>
+
+          <div class="overview-main">
+            <section class="overview-panel" data-testid="department-overview-products">
+              <div class="panel-heading-row">
+                <div>
+                  <h2>{{ t("superuser_dashboard.department_overview.products.title") }}</h2>
+                  <p>{{ t("superuser_dashboard.department_overview.products.subtitle") }}</p>
+                </div>
+                <span class="count-badge">{{ productTiles.length }}</span>
+              </div>
+              <div v-if="productTiles.length" class="product-list">
+                <div v-for="product in productTiles" :key="product.slug || product.product_id" class="product-row">
+                  <div class="product-title">
+                    <strong>{{ product.title }}</strong>
+                    <span>{{ product.slug }}</span>
+                  </div>
+                  <div class="product-stat">
+                    <strong>{{ formatNumber(product.value) }}</strong>
+                    <span>
+                      {{
+                        t("superuser_dashboard.department_overview.out_of", {
+                          total: formatNumber(product.out_of),
+                        })
+                      }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div v-else class="empty-state">
+                {{ t("superuser_dashboard.department_overview.products.empty") }}
+              </div>
+            </section>
+
+            <section class="overview-panel" data-testid="department-overview-profile">
+              <div class="panel-heading-row">
+                <div>
+                  <h2>{{ t("superuser_dashboard.department_overview.profile.title") }}</h2>
+                  <p>{{ department?.description || t("superuser_dashboard.department_overview.profile.no_description") }}</p>
+                </div>
+              </div>
+              <dl class="profile-list">
+                <div v-for="row in departmentProfileRows" :key="row.label" class="profile-row">
+                  <dt>{{ row.label }}</dt>
+                  <dd>{{ row.value }}</dd>
+                </div>
+              </dl>
+            </section>
+
+            <section v-if="hasHardwareSummary" class="overview-panel" data-testid="department-overview-hardware">
+              <div class="panel-heading-row">
+                <div>
+                  <h2>{{ t("superuser_dashboard.department_overview.hardware.title") }}</h2>
+                  <p>{{ t("superuser_dashboard.department_overview.hardware.subtitle") }}</p>
+                </div>
+                <span v-if="hardwareLoading" class="icon"><i class="fa-solid fa-spinner fa-spin" /></span>
+              </div>
+              <div class="hardware-grid">
+                <div class="hardware-stat">
+                  <span>{{ t("superuser_dashboard.department_overview.hardware.gateways") }}</span>
+                  <strong>{{ formatNumber(hardwareSummary.onlineGateways) }} / {{ formatNumber(hardwareSummary.gateways) }}</strong>
+                </div>
+                <div class="hardware-stat">
+                  <span>{{ t("superuser_dashboard.department_overview.hardware.lanes") }}</span>
+                  <strong>{{ formatNumber(hardwareSummary.lanes) }}</strong>
+                </div>
+                <div class="hardware-stat">
+                  <span>{{ t("superuser_dashboard.department_overview.hardware.gates") }}</span>
+                  <strong>{{ formatNumber(hardwareSummary.gates) }}</strong>
+                </div>
+                <div class="hardware-stat">
+                  <span>{{ t("superuser_dashboard.department_overview.hardware.relays") }}</span>
+                  <strong>{{ formatNumber(hardwareSummary.relays) }}</strong>
+                </div>
+                <div class="hardware-stat">
+                  <span>{{ t("superuser_dashboard.department_overview.hardware.scanners") }}</span>
+                  <strong>{{ formatNumber(hardwareSummary.scanners) }}</strong>
+                </div>
+                <div class="hardware-stat" :class="{ 'has-issues': hardwareSummary.issues > 0 }">
+                  <span>{{ t("superuser_dashboard.department_overview.hardware.issues") }}</span>
+                  <strong>{{ formatNumber(hardwareSummary.issues) }}</strong>
+                </div>
+              </div>
+            </section>
+
+            <section class="overview-panel quick-links-panel" data-testid="department-overview-quick-links">
+              <div class="panel-heading-row">
+                <div>
+                  <h2>{{ t("superuser_dashboard.department_overview.quick_links.title") }}</h2>
+                  <p>{{ t("superuser_dashboard.department_overview.quick_links.subtitle") }}</p>
+                </div>
+              </div>
+              <div class="quick-link-grid">
+                <button
+                  v-for="link in quickLinks"
+                  :key="link.path"
+                  class="quick-link"
+                  type="button"
+                  @click="openQuickLink(link.path)"
+                >
+                  <span class="icon"><i :class="['fa-solid', link.icon]" /></span>
+                  <span>{{ link.label }}</span>
+                </button>
+              </div>
+            </section>
+          </div>
+        </template>
+      </section>
     </DepartmentSubPageWrapper>
   </RestrictedPageWrapper>
 </template>
 
 <style scoped>
+.department-overview {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
 
-</style>
\ No newline at end of file
+.overview-toolbar {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.overview-period {
+  align-items: flex-end;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.date-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 10rem;
+}
+
+.date-field span,
+.kpi-label,
+.kpi-secondary,
+.panel-heading-row p,
+.product-title span,
+.product-stat span,
+.hardware-stat span,
+.profile-row dt {
+  color: #64748b;
+  font-size: 0.82rem;
+}
+
+.period-chip {
+  align-items: center;
+  background: #eef2ff;
+  border: 1px solid #c7d2fe;
+  border-radius: 8px;
+  color: #3730a3;
+  display: inline-flex;
+  font-weight: 700;
+  gap: 0.35rem;
+  min-height: 2.5rem;
+  padding: 0 0.75rem;
+  white-space: nowrap;
+}
+
+.overview-loading,
+.empty-state {
+  align-items: center;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  color: #475569;
+  display: flex;
+  gap: 0.5rem;
+  min-height: 5rem;
+  padding: 1rem;
+}
+
+.kpi-grid {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+}
+
+.kpi-card,
+.overview-panel {
+  background: #ffffff;
+  border: 1px solid #dbe3ec;
+  border-radius: 8px;
+}
+
+.kpi-card {
+  align-items: center;
+  display: flex;
+  gap: 0.75rem;
+  min-height: 6rem;
+  padding: 1rem;
+}
+
+.kpi-icon {
+  align-items: center;
+  background: #ecfeff;
+  border-radius: 8px;
+  color: #0f766e;
+  display: inline-flex;
+  height: 2.5rem;
+  justify-content: center;
+  width: 2.5rem;
+}
+
+.kpi-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.kpi-value {
+  color: #0f172a;
+  font-size: 1.35rem;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.overview-main {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
+}
+
+.overview-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.panel-heading-row {
+  align-items: flex-start;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.panel-heading-row h2 {
+  color: #0f172a;
+  font-size: 1.05rem;
+  font-weight: 800;
+  margin: 0;
+}
+
+.panel-heading-row p {
+  margin: 0.2rem 0 0;
+}
+
+.count-badge {
+  align-items: center;
+  background: #f1f5f9;
+  border: 1px solid #dbe3ec;
+  border-radius: 999px;
+  color: #334155;
+  display: inline-flex;
+  font-weight: 800;
+  justify-content: center;
+  min-width: 2rem;
+  padding: 0.2rem 0.55rem;
+}
+
+.product-list,
+.profile-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  margin: 0;
+}
+
+.product-row,
+.profile-row {
+  align-items: center;
+  border-top: 1px solid #edf2f7;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  min-height: 3.25rem;
+  padding-top: 0.55rem;
+}
+
+.product-title {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.product-title strong {
+  color: #1e293b;
+  overflow-wrap: anywhere;
+}
+
+.product-stat {
+  display: flex;
+  flex-direction: column;
+  min-width: 5.5rem;
+  text-align: right;
+}
+
+.product-stat strong,
+.hardware-stat strong,
+.profile-row dd {
+  color: #0f172a;
+  font-weight: 800;
+}
+
+.profile-row dt,
+.profile-row dd {
+  margin: 0;
+}
+
+.profile-row dd {
+  max-width: 58%;
+  overflow-wrap: anywhere;
+  text-align: right;
+}
+
+.hardware-grid,
+.quick-link-grid {
+  display: grid;
+  gap: 0.6rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.hardware-stat {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  min-height: 4.5rem;
+  padding: 0.75rem;
+}
+
+.hardware-stat.has-issues {
+  background: #fff7ed;
+  border-color: #fed7aa;
+}
+
+.quick-links-panel {
+  grid-column: 1 / -1;
+}
+
+.quick-link {
+  align-items: center;
+  background: #ffffff;
+  border: 1px solid #dbe3ec;
+  border-radius: 8px;
+  color: #1e293b;
+  cursor: pointer;
+  display: inline-flex;
+  font-weight: 800;
+  gap: 0.5rem;
+  justify-content: flex-start;
+  min-height: 3rem;
+  padding: 0 0.85rem;
+  text-align: left;
+}
+
+.quick-link:hover,
+.quick-link:focus {
+  border-color: #0f766e;
+  color: #0f766e;
+}
+
+@media (max-width: 980px) {
+  .overview-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .period-chip {
+    justify-content: center;
+  }
+
+  .overview-main {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .date-field,
+  .overview-period .button {
+    width: 100%;
+  }
+
+  .hardware-grid,
+  .quick-link-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .product-row,
+  .profile-row {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.35rem;
+  }
+
+  .product-stat,
+  .profile-row dd {
+    max-width: 100%;
+    text-align: left;
+  }
+}
+</style>
diff --git a/src/views/dashboards/superUserDashboard/department/SuperUserDashboardDepartmentNavigation.vue b/src/views/dashboards/superUserDashboard/department/SuperUserDashboardDepartmentNavigation.vue
index a5699627..5e0c4da1 100644
--- a/src/views/dashboards/superUserDashboard/department/SuperUserDashboardDepartmentNavigation.vue
+++ b/src/views/dashboards/superUserDashboard/department/SuperUserDashboardDepartmentNavigation.vue
@@ -1,31 +1,60 @@
 <script setup>
-import { useRouter} from "vue-router";
-import { ref } from 'vue';
-import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute, useRouter } from "vue-router";
 
+const route = useRoute();
 const router = useRouter();
-// Get the user from the route
-const departmentId = ref(parseInt(router.currentRoute.value.params.departmentId))
+const { t } = useI18n();
 
-const tabs = [
-  { name: 'Overblik', path: '/superuser/departments/' + departmentId.value },
-  { name: 'Moduler', path: '/superuser/departments/' + departmentId.value + '/modules' },
-  { name: 'Profil & Branding', path: '/superuser/departments/' + departmentId.value + '/branding' },
-  { name: 'Gateways', path: '/superuser/departments/' + departmentId.value + '/gateways' },
-  { name: 'Stripe', path: '/superuser/departments/' + departmentId.value + '/stripe/terminals/readers' },
-  { name: 'Priser', path: '/superuser/departments/' + departmentId.value + '/pricing' },
-  { name: SessionUser.objects.categories.meta.title, path: '/superuser/departments/' + departmentId.value + '/categories' },
-];
+const departmentId = computed(() => String(route.params.departmentId || ""));
+const departmentPath = computed(() => `/superuser/departments/${encodeURIComponent(departmentId.value)}`);
 
-// Get the current path
-const currentPath = ref(router.currentRoute.value.path);
+const tabs = computed(() => [
+  {
+    name: t("superuser_dashboard.department_navigation.overview"),
+    path: departmentPath.value,
+    active: (path) => path === departmentPath.value,
+  },
+  {
+    name: t("superuser_dashboard.department_navigation.modules"),
+    path: `${departmentPath.value}/modules`,
+    active: (path) => path.startsWith(`${departmentPath.value}/modules`),
+  },
+  {
+    name: t("superuser_dashboard.department_navigation.branding"),
+    path: `${departmentPath.value}/branding`,
+    active: (path) => path.startsWith(`${departmentPath.value}/branding`),
+  },
+  {
+    name: t("superuser_dashboard.department_navigation.gateways"),
+    path: `${departmentPath.value}/gateways`,
+    active: (path) => path.startsWith(`${departmentPath.value}/gateways`),
+  },
+  {
+    name: t("superuser_dashboard.department_navigation.stripe"),
+    path: `${departmentPath.value}/stripe/terminals/readers`,
+    active: (path) => path.startsWith(`${departmentPath.value}/stripe`),
+  },
+  {
+    name: t("superuser_dashboard.department_navigation.pricing"),
+    path: `${departmentPath.value}/pricing`,
+    active: (path) => path.startsWith(`${departmentPath.value}/pricing`),
+  },
+  {
+    name: t("superuser_dashboard.department_navigation.categories"),
+    path: `${departmentPath.value}/categories`,
+    active: (path) => path.startsWith(`${departmentPath.value}/categories`),
+  },
+]);
 
-// Get the index of the active tab
-const activeTab = tabs.findIndex(tab => tab.path === currentPath.value);
+const activeTab = computed(() => tabs.value.findIndex((tab) => tab.active(route.path)));
 
-// Change the tab
 const changeTab = (index) => {
-  router.push(tabs[index].path);
+  const tab = tabs.value[index];
+  if (tab) {
+    router.push(tab.path);
+  }
 };
 </script>
 
@@ -33,13 +62,15 @@ const changeTab = (index) => {
   <div>
     <div class="tabs is-right">
       <ul>
-        <li v-for="(tab, index) in tabs" :key="index" :class="{'is-active': activeTab === index}" @click="changeTab(index)">
+        <li
+          v-for="(tab, index) in tabs"
+          :key="tab.path"
+          :class="{ 'is-active': activeTab === index }"
+          @click="changeTab(index)"
+        >
           <a>{{ tab.name }}</a>
         </li>
       </ul>
     </div>
   </div>
 </template>
-
-<style scoped>
-</style>
diff --git a/tests/e2e/superuser-department-overview.spec.js b/tests/e2e/superuser-department-overview.spec.js
new file mode 100644
index 00000000..bb7be94a
--- /dev/null
+++ b/tests/e2e/superuser-department-overview.spec.js
@@ -0,0 +1,96 @@
+import { expect, test } from "@playwright/test";
+import { apiPathPattern, mockApi, seedAuthenticatedState } from "./support/network.js";
+
+const json = (body, status = 200) => ({
+  status,
+  contentType: "application/json",
+  body: JSON.stringify(body),
+});
+
+async function installOverviewRoutes(page) {
+  await page.route(apiPathPattern("/superuser/departments/1/overview"), async (route) => {
+    const parsedUrl = new URL(route.request().url());
+    expect(parsedUrl.searchParams.get("date")).toBe("2026-07-06");
+
+    await route.fulfill(
+      json({
+        data: {
+          department: {
+            id: 1,
+            name: "Esbjerg",
+            description: "Skagerrakvej 15",
+            economic_department_id: 42,
+            branding: 14,
+            created_at: "2026-01-01 00:00:00",
+            updated_at: "2026-07-06 09:30:00",
+          },
+          overview: {
+            department_ids: [1],
+            date: "2026-07-06",
+            date_to: "2026-07-06",
+            metrics: {
+              bookings: { state: "ready", value: 3, out_of: 4 },
+              complaints: { state: "ready", value: 1 },
+              night_washes: { state: "ready", value: 2 },
+              revenue: { state: "ready", value: 1234 },
+              washes: { state: "ready", value: 11 },
+              products_sold: { state: "ready", value: 18 },
+              transactions: { state: "ready", value: 9 },
+              water_usage: { state: "ready", value: 250 },
+              overtime: { state: "ready", value: 1.5 },
+            },
+            products: [
+              {
+                product_id: 24,
+                slug: "spot-free-lastbil",
+                title: "Spot Free",
+                state: "ready",
+                value: 4,
+                out_of: 11,
+              },
+            ],
+          },
+        },
+      })
+    );
+  });
+
+  await page.route(apiPathPattern("/modules/edge-gateways/workspace/departments/1"), async (route) => {
+    await route.fulfill(
+      json({
+        data: {
+          gateways: [
+            { id: 1, status: "ONLINE" },
+            { id: 2, status: "OFFLINE" },
+          ],
+          lanes: [{ id: 1 }, { id: 2 }],
+          gates: [{ id: 1 }],
+          relays: [{ id: 1 }, { id: 2 }, { id: 3 }],
+          scanners: [{ id: 1 }],
+          issues: [{ key: "gateway-offline" }],
+        },
+      })
+    );
+  });
+}
+
+test.describe("superuser department overview", () => {
+  test("renders the operational overview for a selected department", async ({ page }) => {
+    await seedAuthenticatedState(page, "superuser-department-overview-token");
+    await mockApi(page, {
+      authenticated: true,
+      permissions: ["superuser", "user"],
+    });
+    await installOverviewRoutes(page);
+
+    await page.goto("/superuser/departments/1?date=2026-07-06", { waitUntil: "domcontentloaded" });
+
+    await expect(page.getByTestId("superuser-department-overview")).toBeVisible();
+    await expect(page.getByRole("heading", { name: "Esbjerg" })).toBeVisible();
+    await expect(page.getByTestId("department-overview-kpi-revenue")).toContainText("1.234");
+    await expect(page.getByTestId("department-overview-kpi-bookings")).toContainText("of 4");
+    await expect(page.getByTestId("department-overview-products")).toContainText("Spot Free");
+    await expect(page.getByTestId("department-overview-hardware")).toContainText("1 / 2");
+    await expect(page.getByTestId("department-overview-quick-links")).toContainText("Gateways");
+  });
+});
diff --git a/tests/unit/superuser-department-overview.spec.js b/tests/unit/superuser-department-overview.spec.js
new file mode 100644
index 00000000..49ef4ff8
--- /dev/null
+++ b/tests/unit/superuser-department-overview.spec.js
@@ -0,0 +1,278 @@
+/* @vitest-environment jsdom */
+import { nextTick } from "vue";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { mountWithApp } from "./helpers/mountWithApp.js";
+
+const mocks = vi.hoisted(() => ({
+  route: {
+    params: { departmentId: "1" },
+    query: { date: "2026-07-06", date_to: "2026-07-06" },
+    path: "/superuser/departments/1",
+  },
+  router: {
+    replace: vi.fn((nextRoute) => {
+      mocks.route.query = nextRoute.query || {};
+      return Promise.resolve();
+    }),
+    push: vi.fn(),
+  },
+  getSuperuserDepartmentOverview: vi.fn(),
+  getEdgeGatewayDepartmentWorkspace: vi.fn(),
+}));
+
+vi.mock("vue-router", () => ({
+  useRoute: () => mocks.route,
+  useRouter: () => mocks.router,
+}));
+
+vi.mock("@/services/superuserDepartmentOverview.js", () => ({
+  getSuperuserDepartmentOverview: mocks.getSuperuserDepartmentOverview,
+}));
+
+vi.mock("@/services/edgeGateways.js", () => ({
+  getEdgeGatewayDepartmentWorkspace: mocks.getEdgeGatewayDepartmentWorkspace,
+}));
+
+vi.mock("@/components/session/token/SessionUser.vue", () => ({
+  SessionUser: {
+    canAccessSuperUser: () => true,
+    functions: {
+      currency: {
+        toLocal: (value) => `${Number(value).toLocaleString("da-DK")} kr.`,
+      },
+      date: {
+        toLocal: (value) => `local:${value}`,
+      },
+    },
+  },
+}));
+
+vi.mock("@/components/global/PageTitle.vue", () => ({
+  default: {
+    props: ["title", "subtitle"],
+    template: "<header><h1>{{ title }}</h1><p>{{ subtitle }}</p></header>",
+  },
+}));
+
+vi.mock("@/components/page/wrappers/RestrictedPageWrapper.vue", () => ({
+  default: {
+    template: "<div><slot /></div>",
+  },
+}));
+
+vi.mock("@/views/dashboards/superUserDashboard/department/DepartmentSubPageWrapper.vue", () => ({
+  default: {
+    template: "<main><slot name='title' /><slot /></main>",
+  },
+}));
+
+import DepartmentOverview from "@/views/dashboards/superUserDashboard/department/Department.vue";
+import DepartmentNavigation from "@/views/dashboards/superUserDashboard/department/SuperUserDashboardDepartmentNavigation.vue";
+
+const messages = {
+  en: {
+    superuser_dashboard: {
+      department_navigation: {
+        overview: "Overview",
+        modules: "Modules",
+        branding: "Profile & Branding",
+        gateways: "Gateways",
+        stripe: "Stripe",
+        pricing: "Pricing",
+        categories: "Categories",
+      },
+      department_overview: {
+        title: "Department overview",
+        subtitle: "Operational overview",
+        loading: "Loading department overview",
+        date_from: "From",
+        date_to: "To",
+        range_label: "{from} to {to}",
+        empty_value: "-",
+        out_of: "of {total}",
+        presets: {
+          today: "Today",
+          last_seven_days: "Last 7 days",
+        },
+        metrics: {
+          bookings: "Bookings",
+          complaints: "Complaints",
+          night_washes: "Night washes",
+          overtime: "Overtime",
+          products_sold: "Products sold",
+          revenue: "Revenue",
+          transactions: "Transactions",
+          washes: "Washes",
+          water_usage: "Water",
+        },
+        units: {
+          hours: "h",
+          liters: "L",
+        },
+        products: {
+          title: "Product mix",
+          subtitle: "Tracked wash products",
+          empty: "No product activity",
+        },
+        profile: {
+          title: "Department profile",
+          no_description: "No department description",
+          department_id: "Department ID",
+          economic_department_id: "Economic department",
+          branding: "Branding",
+          created_at: "Created",
+          updated_at: "Updated",
+        },
+        hardware: {
+          title: "Hardware readiness",
+          subtitle: "Gateway-backed state",
+          gateways: "Gateways online",
+          lanes: "Lanes",
+          gates: "Gates",
+          relays: "Relays",
+          scanners: "Scanners",
+          issues: "Issues",
+        },
+        quick_links: {
+          title: "Department tools",
+          subtitle: "Open setup areas",
+          modules: "Modules",
+          branding: "Branding",
+          gateways: "Gateways",
+          stripe: "Stripe",
+          pricing: "Pricing",
+          categories: "Categories",
+        },
+        errors: {
+          invalid_department: "A valid department is required",
+          load: "Unable to load the department overview",
+        },
+      },
+    },
+  },
+};
+
+const overviewResponse = {
+  data: {
+    data: {
+      department: {
+        id: 1,
+        name: "Esbjerg",
+        description: "Skagerrakvej 15",
+        economic_department_id: 42,
+        branding: 14,
+        created_at: "2026-01-01 00:00:00",
+        updated_at: "2026-07-06 09:30:00",
+      },
+      overview: {
+        department_ids: [1],
+        date: "2026-07-06",
+        date_to: "2026-07-06",
+        metrics: {
+          bookings: { state: "ready", value: 3, out_of: 4 },
+          complaints: { state: "ready", value: 1 },
+          night_washes: { state: "ready", value: 2 },
+          revenue: { state: "ready", value: 1234 },
+          washes: { state: "ready", value: 11 },
+          products_sold: { state: "ready", value: 18 },
+          transactions: { state: "ready", value: 9 },
+          water_usage: { state: "ready", value: 250 },
+          overtime: { state: "ready", value: 1.5 },
+        },
+        products: [
+          {
+            product_id: 24,
+            slug: "spot-free-lastbil",
+            title: "Spot Free",
+            state: "ready",
+            value: 4,
+            out_of: 11,
+          },
+        ],
+      },
+    },
+  },
+};
+
+const hardwareResponse = {
+  data: {
+    data: {
+      gateways: [
+        { id: 1, status: "ONLINE" },
+        { id: 2, status: "OFFLINE" },
+      ],
+      lanes: [{ id: 1 }, { id: 2 }],
+      gates: [{ id: 1 }],
+      relays: [{ id: 1 }, { id: 2 }, { id: 3 }],
+      scanners: [{ id: 1 }],
+      issues: [{ key: "gateway-offline" }],
+    },
+  },
+};
+
+const flushRendering = async () => {
+  await Promise.resolve();
+  await Promise.resolve();
+  await nextTick();
+};
+
+beforeEach(() => {
+  mocks.route.params = { departmentId: "1" };
+  mocks.route.query = { date: "2026-07-06", date_to: "2026-07-06" };
+  mocks.route.path = "/superuser/departments/1";
+  mocks.router.replace.mockClear();
+  mocks.router.push.mockClear();
+  mocks.getSuperuserDepartmentOverview.mockReset();
+  mocks.getEdgeGatewayDepartmentWorkspace.mockReset();
+  mocks.getSuperuserDepartmentOverview.mockResolvedValue(overviewResponse);
+  mocks.getEdgeGatewayDepartmentWorkspace.mockResolvedValue(hardwareResponse);
+});
+
+describe("Superuser department overview", () => {
+  it("loads the superuser overview endpoint and renders operations data", async () => {
+    const wrapper = mountWithApp(DepartmentOverview, {
+      messages,
+    });
+
+    await flushRendering();
+
+    expect(mocks.getSuperuserDepartmentOverview).toHaveBeenCalledWith(1, {
+      date: "2026-07-06",
+      dateTo: "2026-07-06",
+    });
+    expect(mocks.getEdgeGatewayDepartmentWorkspace).toHaveBeenCalledWith(1);
+    expect(wrapper.find("h1").text()).toBe("Esbjerg");
+    expect(wrapper.get('[data-testid="department-overview-kpi-revenue"]').text()).toContain("1.234 kr.");
+    expect(wrapper.get('[data-testid="department-overview-kpi-bookings"]').text()).toContain("of 4");
+    expect(wrapper.get('[data-testid="department-overview-products"]').text()).toContain("Spot Free");
+    expect(wrapper.get('[data-testid="department-overview-profile"]').text()).toContain("Economic department");
+    expect(wrapper.get('[data-testid="department-overview-hardware"]').text()).toContain("1 / 2");
+  });
+
+  it("keeps the overview visible when the optional hardware summary is unavailable", async () => {
+    mocks.getEdgeGatewayDepartmentWorkspace.mockRejectedValue(new Error("Forbidden"));
+
+    const wrapper = mountWithApp(DepartmentOverview, {
+      messages,
+    });
+
+    await flushRendering();
+
+    expect(wrapper.get('[data-testid="department-overview-kpi-revenue"]').text()).toContain("1.234 kr.");
+    expect(wrapper.find('[data-testid="department-overview-hardware"]').exists()).toBe(false);
+  });
+
+  it("uses translated reactive department tabs and pushes the selected route", async () => {
+    mocks.route.path = "/superuser/departments/1/gateways";
+
+    const wrapper = mountWithApp(DepartmentNavigation, { messages });
+    const activeTab = wrapper.find(".tabs li.is-active");
+
+    expect(activeTab.text()).toBe("Gateways");
+
+    const tabs = wrapper.findAll(".tabs li");
+    await tabs.find((tab) => tab.text() === "Pricing").trigger("click");
+
+    expect(mocks.router.push).toHaveBeenCalledWith("/superuser/departments/1/pricing");
+  });
+});

From da86b69b2ca630fbbfdaa8aa5940e4509356f356 Mon Sep 17 00:00:00 2001
From: Jeppe B <2jepp9350@gmail.com>
Date: Mon, 6 Jul 2026 16:02:10 +0200
Subject: [PATCH 15/19] Warn before invoicing multiple months together (#155)

Co-authored-by: Jeppe Bundgaard <jb@truckwash.dk>
---
 .../superuser/tables/InvoiceOrderTable.vue    |  48 +++--
 .../Objects/CollectedOrderInvoices.vue        |   4 +
 src/i18n/generated/da-v2.json                 |   9 +
 src/i18n/generated/de-v2.json                 |   9 +
 src/i18n/generated/en-v2.json                 |   9 +
 src/i18n/generated/global-v2.json             |   9 +
 src/i18n/generated/no-v2.json                 |   9 +
 src/i18n/generated/sv-v2.json                 |   9 +
 .../multi_month_invoice_warning.json          |  15 ++
 .../multi_month_invoice_warning.json          |  15 ++
 .../multi_month_invoice_warning.json          |  15 ++
 .../multi_month_invoice_warning.json          |  13 ++
 .../multi_month_invoice_warning.json          |  15 ++
 .../multi_month_invoice_warning.json          |  15 ++
 src/services/invoiceMonthSplitWarning.js      | 139 +++++++++++++
 .../views/InvoicingBillingPeriodViewAll.vue   |  40 +++-
 tests/e2e/invoicing-period.smoke.spec.js      | 105 ++++++++++
 .../unit/invoice-month-split-warning.spec.js  | 123 ++++++++++++
 ...ce-order-table-multi-month-warning.spec.js | 170 ++++++++++++++++
 ...oicing-period-queue-state.behavior.spec.js | 185 +++++++++++++++++-
 20 files changed, 931 insertions(+), 25 deletions(-)
 create mode 100644 src/i18n/source/da/phrases/compat/invoicing_period/multi_month_invoice_warning.json
 create mode 100644 src/i18n/source/de/phrases/compat/invoicing_period/multi_month_invoice_warning.json
 create mode 100644 src/i18n/source/en/phrases/compat/invoicing_period/multi_month_invoice_warning.json
 create mode 100644 src/i18n/source/global/shared/invoicing_period/multi_month_invoice_warning.json
 create mode 100644 src/i18n/source/no/phrases/compat/invoicing_period/multi_month_invoice_warning.json
 create mode 100644 src/i18n/source/sv/phrases/compat/invoicing_period/multi_month_invoice_warning.json
 create mode 100644 src/services/invoiceMonthSplitWarning.js
 create mode 100644 tests/unit/invoice-month-split-warning.spec.js
 create mode 100644 tests/unit/invoice-order-table-multi-month-warning.spec.js

diff --git a/src/components/displays/superuser/tables/InvoiceOrderTable.vue b/src/components/displays/superuser/tables/InvoiceOrderTable.vue
index 0e96125c..ff3ed956 100644
--- a/src/components/displays/superuser/tables/InvoiceOrderTable.vue
+++ b/src/components/displays/superuser/tables/InvoiceOrderTable.vue
@@ -12,6 +12,11 @@ import UserOtherVaskeabonnement
 import Swal from "sweetalert2";
 import OrderItemsTable from "@/components/displays/department/pos/order/orderItemsTable.vue";
 import OrderContentTable from "@/components/displays/superuser/tables/OrderContentTable.vue";
+import {
+  buildMultiMonthInvoiceContext,
+  MULTI_MONTH_INVOICE_ACTION,
+  promptMultiMonthInvoiceWarning,
+} from "@/services/invoiceMonthSplitWarning.js";
 
 const props = defineProps({
   orders: {
@@ -126,32 +131,34 @@ const isAnyOrderSelected = () => {
   return selectedInvoiceCollections.value.length > 0;
 }
 
+const getSelectedOrders = () => {
+  return props.orders.filter((order) => selectedInvoiceCollections.value.includes(order.invoice_collection_id));
+}
+
 /** Invoice collections */
 const onInvoiceCollections = async () => {
   // Check if any orders are selected
   if (selectedInvoiceCollections.value.length === 0) {
     return;
   }
-  /** Create the invoice */
-  const onCreateInvoiceDraft = async () => {
-    // Create the invoice
-    console.log('Create invoice');
-    await SessionUser.objects.collectedOrderInvoices.functions.economic.invoice(parseInt(props.collectedOrderInvoice.id)).then((response) => {
-      console.log('Invoice created successfully', response);
-      Swal.fire({
-        title: 'Fakturaen er oprettet',
-        text: 'Fakturaen er oprettet i E-conomic',
-        icon: 'success',
-        showConfirmButton: false,
-        timer: 2000
-      }).then(() => {
-        location.reload();
-      });
-    }).catch((error) => {
-          console.log('Error creating invoice', error);
-        }
-    )
+  const selectedOrders = getSelectedOrders();
+  const invoiceWarningContext = buildMultiMonthInvoiceContext(selectedOrders, {
+    getDate: (order) => order?.created_at ?? order?.date,
+    getInvoiceCollectionId: (order) => order?.invoice_collection_id,
+  });
+  const invoiceWarningAction = await promptMultiMonthInvoiceWarning({
+    context: invoiceWarningContext,
+    splitByMonth: SessionUser.objects.collectedOrderInvoices.functions.split_by_month,
+    parseErrorMessage: SessionUser.functions.parseErrorMessage,
+  });
+  if (invoiceWarningAction === MULTI_MONTH_INVOICE_ACTION.SPLIT) {
+    location.reload();
+    return;
   }
+  if (invoiceWarningAction === MULTI_MONTH_INVOICE_ACTION.CANCEL) {
+    return;
+  }
+
   for (let i = 0; i < selectedInvoiceCollections.value.length; i++) {
     const selectedInvoiceCollectionId = selectedInvoiceCollections.value[i];
     // Check if the invoice collection is already booked
@@ -210,6 +217,7 @@ const isOrderContentVisible = (order) => {
         class="button is-small"
         @click="onInvoiceCollections()"
         :disabled="!isAnyOrderSelected()"
+        data-testid="invoice-order-table-invoice-button"
     >
       {{ $t('global.invoice_now') }}
     </button>
@@ -274,4 +282,4 @@ const isOrderContentVisible = (order) => {
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/session/token/SessionUser/Objects/CollectedOrderInvoices.vue b/src/components/session/token/SessionUser/Objects/CollectedOrderInvoices.vue
index c81b500c..dcafa150 100644
--- a/src/components/session/token/SessionUser/Objects/CollectedOrderInvoices.vue
+++ b/src/components/session/token/SessionUser/Objects/CollectedOrderInvoices.vue
@@ -444,10 +444,14 @@ export const CollectedOrderInvoices = {
       });
     },
     split_by_month: async (dateFrom, dateTo, options = {}) => {
+      const invoiceCollectionIds = Array.isArray(options.invoiceCollectionIds)
+        ? options.invoiceCollectionIds
+        : options.invoice_collection_ids;
       return authenticatedRequest('/collected-invoices/split-by-month', 'POST', {
         dateFrom,
         dateTo,
         ...(options.preview !== undefined ? { preview: !!options.preview } : {}),
+        ...(Array.isArray(invoiceCollectionIds) ? { invoice_collection_ids: invoiceCollectionIds } : {}),
       }).then((response) => {
         console.log(response);
         return response;
diff --git a/src/i18n/generated/da-v2.json b/src/i18n/generated/da-v2.json
index cfc6d9d4..795b85ff 100644
--- a/src/i18n/generated/da-v2.json
+++ b/src/i18n/generated/da-v2.json
@@ -4043,6 +4043,15 @@
             "preview_title": "@:{'words.generated.forhandsvis'} @:{'words.generated.manedsopdeling'}",
             "success_text": "@:{'words.generated.behandlede'} {processed} @:{'words.generated.fakturasamlinger'}. Opdelte {changed} @:{'words.generated.og'} sprang {skipped} @:{'words.generated.over'}.",
             "success_title": "@.capitalize:{'words.generated.manedsopdeling'} @:{'words.generated.fuldført'}"
+          },
+          "multi_month_invoice_warning": {
+            "invoice_together": "Fakturer sammen",
+            "split_by_month": "Opdel efter måned",
+            "split_error_title": "Månedsopdeling mislykkedes",
+            "split_success_text": "Behandlede {processed} fakturasamlinger. Opdelte {changed} og sprang {skipped} over.",
+            "split_success_title": "Månedsopdeling fuldført",
+            "text": "Du er ved at fakturere ordrer fra flere måneder sammen ({months}). Skal de i stedet opdeles efter måned?",
+            "title": "Ordrer fra flere måneder"
           }
         },
         "invoicing": {
diff --git a/src/i18n/generated/de-v2.json b/src/i18n/generated/de-v2.json
index 8936ff7f..2d4d7964 100644
--- a/src/i18n/generated/de-v2.json
+++ b/src/i18n/generated/de-v2.json
@@ -4147,6 +4147,15 @@
             "preview_title": "Preview @:{'words.generated.monthly'} @:{'words.generated.split'}",
             "success_text": "@:{'words.generated.processed'} {processed} @:{'words.generated.invoice'} @:{'words.generated.collections'}. @.capitalize:{'words.generated.split'} {changed}, @:{'words.generated.skipped'} {skipped}.",
             "success_title": "@.capitalize:{'words.generated.monthly'} @:{'words.generated.split'} @:{'words.generated.completed'}"
+          },
+          "multi_month_invoice_warning": {
+            "invoice_together": "Zusammen abrechnen",
+            "split_by_month": "Nach Monat aufteilen",
+            "split_error_title": "Monatsaufteilung fehlgeschlagen",
+            "split_success_text": "{processed} Rechnungssammlungen verarbeitet. {changed} aufgeteilt, {skipped} übersprungen.",
+            "split_success_title": "Monatsaufteilung abgeschlossen",
+            "text": "Sie sind dabei, Aufträge aus mehreren Monaten gemeinsam abzurechnen ({months}). Sollen sie stattdessen nach Monat aufgeteilt werden?",
+            "title": "Aufträge aus mehreren Monaten"
           }
         },
         "invoicing": {
diff --git a/src/i18n/generated/en-v2.json b/src/i18n/generated/en-v2.json
index 3809e6ae..3ea6b944 100644
--- a/src/i18n/generated/en-v2.json
+++ b/src/i18n/generated/en-v2.json
@@ -3875,6 +3875,15 @@
             "preview_title": "@.capitalize:{'words.generated.preview'} @:{'words.generated.monthly'} @:{'words.generated.split'}",
             "success_text": "@:{'words.generated.processed'} {processed} @:{'words.generated.invoice'} @:{'words.generated.collections'}. @.capitalize:{'words.generated.split'} {changed}, @:{'words.generated.skipped'} {skipped}.",
             "success_title": "@.capitalize:{'words.generated.monthly'} @:{'words.generated.split'} @:{'words.generated.completed'}"
+          },
+          "multi_month_invoice_warning": {
+            "invoice_together": "Invoice together",
+            "split_by_month": "Split by month",
+            "split_error_title": "Monthly split failed",
+            "split_success_text": "Processed {processed} invoice collections. Split {changed}, skipped {skipped}.",
+            "split_success_title": "Monthly split completed",
+            "text": "You are about to invoice orders from multiple months together ({months}). Should they be split by month instead?",
+            "title": "Orders from multiple months"
           }
         },
         "invoicing": {
diff --git a/src/i18n/generated/global-v2.json b/src/i18n/generated/global-v2.json
index 0ca3304c..2657f84b 100644
--- a/src/i18n/generated/global-v2.json
+++ b/src/i18n/generated/global-v2.json
@@ -3156,6 +3156,15 @@
         "preview_title": "@:{'templates.generated.compat.invoicing_period.monthly_split.preview_title'}",
         "success_text": "@:{'templates.generated.compat.invoicing_period.monthly_split.success_text'}",
         "success_title": "@:{'templates.generated.compat.invoicing_period.monthly_split.success_title'}"
+      },
+      "multi_month_invoice_warning": {
+        "invoice_together": "@:{'templates.generated.compat.invoicing_period.multi_month_invoice_warning.invoice_together'}",
+        "split_by_month": "@:{'templates.generated.compat.invoicing_period.multi_month_invoice_warning.split_by_month'}",
+        "split_error_title": "@:{'templates.generated.compat.invoicing_period.multi_month_invoice_warning.split_error_title'}",
+        "split_success_text": "@:{'templates.generated.compat.invoicing_period.multi_month_invoice_warning.split_success_text'}",
+        "split_success_title": "@:{'templates.generated.compat.invoicing_period.multi_month_invoice_warning.split_success_title'}",
+        "text": "@:{'templates.generated.compat.invoicing_period.multi_month_invoice_warning.text'}",
+        "title": "@:{'templates.generated.compat.invoicing_period.multi_month_invoice_warning.title'}"
       }
     },
     "invoicing": {
diff --git a/src/i18n/generated/no-v2.json b/src/i18n/generated/no-v2.json
index 25d94a03..af65bd69 100644
--- a/src/i18n/generated/no-v2.json
+++ b/src/i18n/generated/no-v2.json
@@ -4150,6 +4150,15 @@
             "preview_title": "Preview @:{'words.generated.monthly'} @:{'words.generated.split'}",
             "success_text": "@:{'words.generated.processed'} {processed} @:{'words.generated.invoice'} @:{'words.generated.collections'}. @.capitalize:{'words.generated.split'} {changed}, @:{'words.generated.skipped'} {skipped}.",
             "success_title": "@.capitalize:{'words.generated.monthly'} @:{'words.generated.split'} @:{'words.generated.completed'}"
+          },
+          "multi_month_invoice_warning": {
+            "invoice_together": "Fakturer samlet",
+            "split_by_month": "Del opp etter måned",
+            "split_error_title": "Månedsdeling mislyktes",
+            "split_success_text": "Behandlet {processed} fakturasamlinger. Delte opp {changed}, hoppet over {skipped}.",
+            "split_success_title": "Månedsdeling fullført",
+            "text": "Du er i ferd med å fakturere ordrer fra flere måneder samlet ({months}). Skal de i stedet deles opp etter måned?",
+            "title": "Ordrer fra flere måneder"
           }
         },
         "invoicing": {
diff --git a/src/i18n/generated/sv-v2.json b/src/i18n/generated/sv-v2.json
index f24912ea..ab8e4f12 100644
--- a/src/i18n/generated/sv-v2.json
+++ b/src/i18n/generated/sv-v2.json
@@ -4200,6 +4200,15 @@
             "preview_title": "Preview @:{'words.generated.monthly'} @:{'words.generated.split'}",
             "success_text": "@:{'words.generated.processed'} {processed} @:{'words.generated.invoice'} @:{'words.generated.collections'}. @.capitalize:{'words.generated.split'} {changed}, @:{'words.generated.skipped'} {skipped}.",
             "success_title": "@.capitalize:{'words.generated.monthly'} @:{'words.generated.split'} @:{'words.generated.completed'}"
+          },
+          "multi_month_invoice_warning": {
+            "invoice_together": "Fakturera tillsammans",
+            "split_by_month": "Dela upp per månad",
+            "split_error_title": "Månadsuppdelning misslyckades",
+            "split_success_text": "Bearbetade {processed} fakturasamlingar. Delade upp {changed}, hoppade över {skipped}.",
+            "split_success_title": "Månadsuppdelning klar",
+            "text": "Du håller på att fakturera ordrar från flera månader tillsammans ({months}). Ska de delas upp per månad i stället?",
+            "title": "Ordrar från flera månader"
           }
         },
         "invoicing": {
diff --git a/src/i18n/source/da/phrases/compat/invoicing_period/multi_month_invoice_warning.json b/src/i18n/source/da/phrases/compat/invoicing_period/multi_month_invoice_warning.json
new file mode 100644
index 00000000..9807d0df
--- /dev/null
+++ b/src/i18n/source/da/phrases/compat/invoicing_period/multi_month_invoice_warning.json
@@ -0,0 +1,15 @@
+{
+  "compat": {
+    "invoicing_period": {
+      "multi_month_invoice_warning": {
+        "invoice_together": "Fakturer sammen",
+        "split_by_month": "Opdel efter måned",
+        "split_error_title": "Månedsopdeling mislykkedes",
+        "split_success_text": "Behandlede {processed} fakturasamlinger. Opdelte {changed} og sprang {skipped} over.",
+        "split_success_title": "Månedsopdeling fuldført",
+        "text": "Du er ved at fakturere ordrer fra flere måneder sammen ({months}). Skal de i stedet opdeles efter måned?",
+        "title": "Ordrer fra flere måneder"
+      }
+    }
+  }
+}
diff --git a/src/i18n/source/de/phrases/compat/invoicing_period/multi_month_invoice_warning.json b/src/i18n/source/de/phrases/compat/invoicing_period/multi_month_invoice_warning.json
new file mode 100644
index 00000000..d6b70119
--- /dev/null
+++ b/src/i18n/source/de/phrases/compat/invoicing_period/multi_month_invoice_warning.json
@@ -0,0 +1,15 @@
+{
+  "compat": {
+    "invoicing_period": {
+      "multi_month_invoice_warning": {
+        "invoice_together": "Zusammen abrechnen",
+        "split_by_month": "Nach Monat aufteilen",
+        "split_error_title": "Monatsaufteilung fehlgeschlagen",
+        "split_success_text": "{processed} Rechnungssammlungen verarbeitet. {changed} aufgeteilt, {skipped} übersprungen.",
+        "split_success_title": "Monatsaufteilung abgeschlossen",
+        "text": "Sie sind dabei, Aufträge aus mehreren Monaten gemeinsam abzurechnen ({months}). Sollen sie stattdessen nach Monat aufgeteilt werden?",
+        "title": "Aufträge aus mehreren Monaten"
+      }
+    }
+  }
+}
diff --git a/src/i18n/source/en/phrases/compat/invoicing_period/multi_month_invoice_warning.json b/src/i18n/source/en/phrases/compat/invoicing_period/multi_month_invoice_warning.json
new file mode 100644
index 00000000..91dfaa7f
--- /dev/null
+++ b/src/i18n/source/en/phrases/compat/invoicing_period/multi_month_invoice_warning.json
@@ -0,0 +1,15 @@
+{
+  "compat": {
+    "invoicing_period": {
+      "multi_month_invoice_warning": {
+        "invoice_together": "Invoice together",
+        "split_by_month": "Split by month",
+        "split_error_title": "Monthly split failed",
+        "split_success_text": "Processed {processed} invoice collections. Split {changed}, skipped {skipped}.",
+        "split_success_title": "Monthly split completed",
+        "text": "You are about to invoice orders from multiple months together ({months}). Should they be split by month instead?",
+        "title": "Orders from multiple months"
+      }
+    }
+  }
+}
diff --git a/src/i18n/source/global/shared/invoicing_period/multi_month_invoice_warning.json b/src/i18n/source/global/shared/invoicing_period/multi_month_invoice_warning.json
new file mode 100644
index 00000000..7c24323e
--- /dev/null
+++ b/src/i18n/source/global/shared/invoicing_period/multi_month_invoice_warning.json
@@ -0,0 +1,13 @@
+{
+  "invoicing_period": {
+    "multi_month_invoice_warning": {
+      "invoice_together": "@:{'phrases.compat.invoicing_period.multi_month_invoice_warning.invoice_together'}",
+      "split_by_month": "@:{'phrases.compat.invoicing_period.multi_month_invoice_warning.split_by_month'}",
+      "split_error_title": "@:{'phrases.compat.invoicing_period.multi_month_invoice_warning.split_error_title'}",
+      "split_success_text": "@:{'phrases.compat.invoicing_period.multi_month_invoice_warning.split_success_text'}",
+      "split_success_title": "@:{'phrases.compat.invoicing_period.multi_month_invoice_warning.split_success_title'}",
+      "text": "@:{'phrases.compat.invoicing_period.multi_month_invoice_warning.text'}",
+      "title": "@:{'phrases.compat.invoicing_period.multi_month_invoice_warning.title'}"
+    }
+  }
+}
diff --git a/src/i18n/source/no/phrases/compat/invoicing_period/multi_month_invoice_warning.json b/src/i18n/source/no/phrases/compat/invoicing_period/multi_month_invoice_warning.json
new file mode 100644
index 00000000..fea6eb4d
--- /dev/null
+++ b/src/i18n/source/no/phrases/compat/invoicing_period/multi_month_invoice_warning.json
@@ -0,0 +1,15 @@
+{
+  "compat": {
+    "invoicing_period": {
+      "multi_month_invoice_warning": {
+        "invoice_together": "Fakturer samlet",
+        "split_by_month": "Del opp etter måned",
+        "split_error_title": "Månedsdeling mislyktes",
+        "split_success_text": "Behandlet {processed} fakturasamlinger. Delte opp {changed}, hoppet over {skipped}.",
+        "split_success_title": "Månedsdeling fullført",
+        "text": "Du er i ferd med å fakturere ordrer fra flere måneder samlet ({months}). Skal de i stedet deles opp etter måned?",
+        "title": "Ordrer fra flere måneder"
+      }
+    }
+  }
+}
diff --git a/src/i18n/source/sv/phrases/compat/invoicing_period/multi_month_invoice_warning.json b/src/i18n/source/sv/phrases/compat/invoicing_period/multi_month_invoice_warning.json
new file mode 100644
index 00000000..b8056782
--- /dev/null
+++ b/src/i18n/source/sv/phrases/compat/invoicing_period/multi_month_invoice_warning.json
@@ -0,0 +1,15 @@
+{
+  "compat": {
+    "invoicing_period": {
+      "multi_month_invoice_warning": {
+        "invoice_together": "Fakturera tillsammans",
+        "split_by_month": "Dela upp per månad",
+        "split_error_title": "Månadsuppdelning misslyckades",
+        "split_success_text": "Bearbetade {processed} fakturasamlingar. Delade upp {changed}, hoppade över {skipped}.",
+        "split_success_title": "Månadsuppdelning klar",
+        "text": "Du håller på att fakturera ordrar från flera månader tillsammans ({months}). Ska de delas upp per månad i stället?",
+        "title": "Ordrar från flera månader"
+      }
+    }
+  }
+}
diff --git a/src/services/invoiceMonthSplitWarning.js b/src/services/invoiceMonthSplitWarning.js
new file mode 100644
index 00000000..95182bb9
--- /dev/null
+++ b/src/services/invoiceMonthSplitWarning.js
@@ -0,0 +1,139 @@
+import Swal from "sweetalert2";
+import i18n from "@/i18n";
+
+export const MULTI_MONTH_INVOICE_ACTION = {
+  CONTINUE: "continue",
+  CANCEL: "cancel",
+  SPLIT: "split",
+};
+
+const toPositiveInteger = (value) => {
+  const parsed = Number.parseInt(String(value ?? ""), 10);
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+};
+
+const getDateKey = (value) => {
+  const rawValue = String(value ?? "").trim();
+  const directMatch = rawValue.match(/^(\d{4})-(\d{2})-(\d{2})/);
+  if (directMatch) {
+    return `${directMatch[1]}-${directMatch[2]}-${directMatch[3]}`;
+  }
+
+  const parsedDate = new Date(rawValue);
+  if (Number.isNaN(parsedDate.getTime())) {
+    return null;
+  }
+
+  const year = parsedDate.getFullYear();
+  const month = String(parsedDate.getMonth() + 1).padStart(2, "0");
+  const day = String(parsedDate.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+
+export const getMonthKey = (value) => {
+  const dateKey = getDateKey(value);
+  return dateKey ? dateKey.slice(0, 7) : null;
+};
+
+const translate = (key, params = {}) => i18n.global.t(key, params);
+
+const getSplitResponsePayload = (response = {}) => response?.data?.data ?? response?.data ?? {};
+
+export const buildMultiMonthInvoiceContext = (
+  items = [],
+  {
+    getDate = (item) => item?.created_at ?? item?.date,
+    getInvoiceCollectionId = (item) => item?.invoice_collection_id,
+  } = {}
+) => {
+  const months = new Set();
+  const dateKeys = [];
+  const invoiceCollectionIds = new Set();
+
+  (Array.isArray(items) ? items : []).forEach((item) => {
+    const dateValue = getDate(item);
+    const dateKey = getDateKey(dateValue);
+    if (dateKey) {
+      dateKeys.push(dateKey);
+      months.add(dateKey.slice(0, 7));
+    }
+
+    const invoiceCollectionId = toPositiveInteger(getInvoiceCollectionId(item));
+    if (invoiceCollectionId) {
+      invoiceCollectionIds.add(invoiceCollectionId);
+    }
+  });
+
+  dateKeys.sort();
+
+  return {
+    months: Array.from(months).sort(),
+    dateFrom: dateKeys[0] ?? null,
+    dateTo: dateKeys[dateKeys.length - 1] ?? null,
+    invoiceCollectionIds: Array.from(invoiceCollectionIds).sort((left, right) => left - right),
+  };
+};
+
+export const shouldWarnAboutMultiMonthInvoice = (context = {}) => (
+  Array.isArray(context.months) &&
+  context.months.length > 1 &&
+  Array.isArray(context.invoiceCollectionIds) &&
+  context.invoiceCollectionIds.length > 0 &&
+  Boolean(context.dateFrom) &&
+  Boolean(context.dateTo)
+);
+
+export const promptMultiMonthInvoiceWarning = async ({
+  context,
+  splitByMonth,
+  parseErrorMessage = (error) => error?.message ?? String(error),
+} = {}) => {
+  if (!shouldWarnAboutMultiMonthInvoice(context)) {
+    return MULTI_MONTH_INVOICE_ACTION.CONTINUE;
+  }
+
+  const months = context.months.join(", ");
+  const confirmation = await Swal.fire({
+    icon: "warning",
+    title: translate("invoicing_period.multi_month_invoice_warning.title"),
+    text: translate("invoicing_period.multi_month_invoice_warning.text", { months }),
+    showCancelButton: true,
+    showDenyButton: true,
+    confirmButtonText: translate("invoicing_period.multi_month_invoice_warning.split_by_month"),
+    denyButtonText: translate("invoicing_period.multi_month_invoice_warning.invoice_together"),
+    cancelButtonText: translate("common.cancel"),
+  });
+
+  if (confirmation.isDenied) {
+    return MULTI_MONTH_INVOICE_ACTION.CONTINUE;
+  }
+
+  if (!confirmation.isConfirmed) {
+    return MULTI_MONTH_INVOICE_ACTION.CANCEL;
+  }
+
+  try {
+    const response = await splitByMonth(context.dateFrom, context.dateTo, {
+      invoiceCollectionIds: context.invoiceCollectionIds,
+      preview: false,
+    });
+    const result = getSplitResponsePayload(response);
+    await Swal.fire({
+      icon: "success",
+      title: translate("invoicing_period.multi_month_invoice_warning.split_success_title"),
+      text: translate("invoicing_period.multi_month_invoice_warning.split_success_text", {
+        processed: result.processed_count ?? 0,
+        changed: result.changed_count ?? 0,
+        skipped: result.skipped_count ?? 0,
+      }),
+    });
+    return MULTI_MONTH_INVOICE_ACTION.SPLIT;
+  } catch (error) {
+    await Swal.fire({
+      icon: "error",
+      title: translate("invoicing_period.multi_month_invoice_warning.split_error_title"),
+      text: parseErrorMessage(error),
+    });
+    return MULTI_MONTH_INVOICE_ACTION.CANCEL;
+  }
+};
diff --git a/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewAll.vue b/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewAll.vue
index dfaeb399..537d62d6 100644
--- a/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewAll.vue
+++ b/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewAll.vue
@@ -22,6 +22,11 @@ import InvoicingBillingPeriodFilters from "@/views/dashboards/superUserDashboard
 import InvoicingBillingPeriodCustomerAttributes from "@/views/dashboards/superUserDashboard/InvoicingBillingPeriod/displays/layout/InvoicingBillingPeriodCustomerAttributes.vue";
 import InvoicingPeriodFlagList from "@/views/dashboards/superUserDashboard/InvoicingBillingPeriod/components/InvoicingPeriodFlagList.vue";
 import PaginationNavigation from "@/components/displays/pagination/PaginationNavigation.vue";
+import {
+  buildMultiMonthInvoiceContext,
+  MULTI_MONTH_INVOICE_ACTION,
+  promptMultiMonthInvoiceWarning,
+} from "@/services/invoiceMonthSplitWarning.js";
 import {
   buildPossibleDuplicateGroups,
   formatDuplicateDateLabel,
@@ -330,6 +335,13 @@ const parsePositiveInteger = (value: any) => {
 
 const getCustomerNumber = (customer: any) => parsePositiveInteger(customer?.customer_number);
 
+const markCustomerPeriodRefreshLoading = (customer: any) => {
+  const customerNumber = getCustomerNumber(customer);
+  if (customerNumber) {
+    invoiceQueue.markPeriodRefreshLoading?.([customerNumber], []);
+  }
+};
+
 const queueInvoiceCollections = (invoiceCollectionIds: number[], customer: any = null) => {
   const uniqueInvoiceCollectionIds = Array.from(
     new Set(
@@ -351,12 +363,10 @@ const queueInvoiceCollections = (invoiceCollectionIds: number[], customer: any =
 
 const onClickInvoiceNow = async (customer: any, transactionIds: number[]) => {
   const customerNumber = getCustomerNumber(customer);
-  if (customerNumber) {
-    invoiceQueue.markPeriodRefreshLoading?.([customerNumber], []);
-  }
 
   try {
     if (transactionIds.length === 0) {
+      markCustomerPeriodRefreshLoading(customer);
       const month = dates.variables.start.value.getMonth() + 1;
       const year = dates.variables.start.value.getFullYear();
 
@@ -392,10 +402,32 @@ const onClickInvoiceNow = async (customer: any, transactionIds: number[]) => {
     await fetchMissingInvoiceCollections(customer, transactionIds);
     const invoiceCollectionIds = getInvoiceCollectionIdsForTransactionIds(customer, transactionIds);
     if (invoiceCollectionIds.length === 0) {
-      invoiceQueue.finishPeriodRefresh?.([customerNumber], []);
       return;
     }
 
+    const invoiceWarningContext = buildMultiMonthInvoiceContext(
+      transactionIds
+        .map((transactionId) => getTransactionById(customer, transactionId))
+        .filter((transaction: any) => transaction !== null),
+      {
+        getDate: (transaction: any) => transaction?.date ?? transaction?.created_at,
+        getInvoiceCollectionId: (transaction: any) => getTransactionInvoiceCollectionId(transaction),
+      }
+    );
+    const invoiceWarningAction = await promptMultiMonthInvoiceWarning({
+      context: invoiceWarningContext,
+      splitByMonth: SessionUser.objects.collectedOrderInvoices.functions.split_by_month,
+      parseErrorMessage: SessionUser.functions.parseErrorMessage,
+    });
+    if (invoiceWarningAction === MULTI_MONTH_INVOICE_ACTION.SPLIT) {
+      reloadPeriodPage();
+      return;
+    }
+    if (invoiceWarningAction === MULTI_MONTH_INVOICE_ACTION.CANCEL) {
+      return;
+    }
+
+    markCustomerPeriodRefreshLoading(customer);
     queueInvoiceCollections(invoiceCollectionIds, customer);
   } catch (error: any) {
     invoiceQueue.finishPeriodRefresh?.([customerNumber], []);
diff --git a/tests/e2e/invoicing-period.smoke.spec.js b/tests/e2e/invoicing-period.smoke.spec.js
index 6ee85f7f..dd284da3 100644
--- a/tests/e2e/invoicing-period.smoke.spec.js
+++ b/tests/e2e/invoicing-period.smoke.spec.js
@@ -1933,6 +1933,111 @@ test.describe("Invoicing period tab", () => {
     await expect(page).toHaveURL(/activeTab=period/);
   });
 
+  test("@smoke period view warns and splits selected multi-month invoice collections", async ({ page }) => {
+    const splitRequests = [];
+    const economicInvoiceRequests = [];
+    await openPeriodView(page, {
+      payloadFactory: () => ({
+        types: {
+          all: [
+            {
+              id: 31,
+              customer_number: 4301,
+              customer_name: "Multi Month Fleet",
+              requires_action: true,
+              transactions: [
+                {
+                  id: 8801,
+                  date: "2026-03-28T10:00:00.000Z",
+                  amount: 120,
+                  booked: false,
+                  excluded: false,
+                  invoice_collection_id: 88001,
+                },
+                {
+                  id: 8802,
+                  date: "2026-04-02T10:00:00.000Z",
+                  amount: 180,
+                  booked: false,
+                  excluded: false,
+                  invoice_collection_id: 88001,
+                },
+              ],
+              queue: {
+                has_active_job: false,
+                statuses: [],
+                invoice_collection_ids: [],
+                is_action_blocked: false,
+              },
+              meta: {},
+            },
+          ],
+          invoice_per_order: [],
+          fixed_pricing: [],
+          tank_cleaning: [],
+          special_arrangements: [],
+          vehicle_subscriptions: [],
+          possible_duplicates: [],
+        },
+      }),
+    });
+
+    await page.route("**/collected-invoices/split-by-month**", async (route) => {
+      if (
+        route.request().method() !== "POST" ||
+        !matchesApiPath(route.request().url(), "/collected-invoices/split-by-month")
+      ) {
+        await route.fallback();
+        return;
+      }
+
+      const payload = JSON.parse(route.request().postData() || "{}");
+      splitRequests.push(payload);
+      await route.fulfill(
+        json({
+          data: {
+            preview: false,
+            processed_count: 1,
+            changed_count: 1,
+            skipped_count: 0,
+          },
+        })
+      );
+    });
+
+    await page.route("**/collected-invoices/economic**", async (route) => {
+      if (
+        route.request().method() === "POST" &&
+        matchesApiPath(route.request().url(), "/collected-invoices/economic")
+      ) {
+        economicInvoiceRequests.push(JSON.parse(route.request().postData() || "{}"));
+        await route.fulfill(json({ data: {} }));
+        return;
+      }
+
+      await route.fallback();
+    });
+
+    await page.getByTestId("invoicing-period-view-selector-all").click();
+    await expect(page.getByTestId("invoicing-period-customer-4301")).toBeVisible();
+    await page.getByTestId("invoicing-period-customer-invoice-4301").click();
+
+    await expect(
+      page.getByRole("heading", { name: /Orders from multiple months|Ordrer fra flere måneder/i })
+    ).toBeVisible();
+    await page.getByRole("button", { name: /Split by month|Opdel efter måned/i }).click();
+
+    await expect.poll(() => splitRequests.length).toBe(1);
+    expect(splitRequests[0]).toEqual({
+      dateFrom: "2026-03-28",
+      dateTo: "2026-04-02",
+      invoice_collection_ids: [88001],
+      preview: false,
+    });
+    expect(economicInvoiceRequests).toEqual([]);
+    await expect(page.getByText(/Monthly split completed|Månedsopdeling fuldført/i)).toBeVisible();
+  });
+
   test("@smoke period view invoices multiple customers with page refresh and independent loading", async ({ page }) => {
     const token = "superuser-period-parallel-token";
     const periodRequests = [];
diff --git a/tests/unit/invoice-month-split-warning.spec.js b/tests/unit/invoice-month-split-warning.spec.js
new file mode 100644
index 00000000..268c3686
--- /dev/null
+++ b/tests/unit/invoice-month-split-warning.spec.js
@@ -0,0 +1,123 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("sweetalert2", () => ({
+  default: {
+    fire: vi.fn(),
+  },
+}));
+
+import Swal from "sweetalert2";
+import {
+  buildMultiMonthInvoiceContext,
+  MULTI_MONTH_INVOICE_ACTION,
+  promptMultiMonthInvoiceWarning,
+  shouldWarnAboutMultiMonthInvoice,
+} from "@/services/invoiceMonthSplitWarning.js";
+
+describe("invoice month split warning", () => {
+  beforeEach(() => {
+    Swal.fire.mockReset();
+  });
+
+  it("builds a scoped multi-month context without timezone shifting date strings", () => {
+    const context = buildMultiMonthInvoiceContext([
+      { id: 1, created_at: "2026-03-31 23:30:00", invoice_collection_id: 501 },
+      { id: 2, created_at: "2026-04-01T00:30:00.000Z", invoice_collection_id: "501" },
+      { id: 3, created_at: "2026-04-03 09:00:00", invoice_collection_id: 502 },
+      { id: 4, created_at: "invalid", invoice_collection_id: null },
+    ]);
+
+    expect(context).toEqual({
+      months: ["2026-03", "2026-04"],
+      dateFrom: "2026-03-31",
+      dateTo: "2026-04-03",
+      invoiceCollectionIds: [501, 502],
+    });
+    expect(shouldWarnAboutMultiMonthInvoice(context)).toBe(true);
+  });
+
+  it("continues without a modal for single-month selections", async () => {
+    const action = await promptMultiMonthInvoiceWarning({
+      context: buildMultiMonthInvoiceContext([
+        { created_at: "2026-04-01 10:00:00", invoice_collection_id: 501 },
+        { created_at: "2026-04-02 10:00:00", invoice_collection_id: 501 },
+      ]),
+      splitByMonth: vi.fn(),
+    });
+
+    expect(action).toBe(MULTI_MONTH_INVOICE_ACTION.CONTINUE);
+    expect(Swal.fire).not.toHaveBeenCalled();
+  });
+
+  it("splits selected invoice collections when the warning is confirmed", async () => {
+    const splitByMonth = vi.fn().mockResolvedValue({
+      data: {
+        data: {
+          processed_count: 2,
+          changed_count: 1,
+          skipped_count: 1,
+        },
+      },
+    });
+    Swal.fire.mockResolvedValueOnce({ isConfirmed: true }).mockResolvedValueOnce({ isConfirmed: true });
+
+    const action = await promptMultiMonthInvoiceWarning({
+      context: buildMultiMonthInvoiceContext([
+        { created_at: "2026-03-20 10:00:00", invoice_collection_id: 7001 },
+        { created_at: "2026-04-02 10:00:00", invoice_collection_id: 7001 },
+      ]),
+      splitByMonth,
+    });
+
+    expect(action).toBe(MULTI_MONTH_INVOICE_ACTION.SPLIT);
+    expect(splitByMonth).toHaveBeenCalledWith("2026-03-20", "2026-04-02", {
+      invoiceCollectionIds: [7001],
+      preview: false,
+    });
+    expect(Swal.fire).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({
+        icon: "warning",
+        showDenyButton: true,
+      })
+    );
+    expect(Swal.fire).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        icon: "success",
+      })
+    );
+  });
+
+  it("continues invoicing together when the warning deny button is selected", async () => {
+    const splitByMonth = vi.fn();
+    Swal.fire.mockResolvedValueOnce({ isDenied: true });
+
+    const action = await promptMultiMonthInvoiceWarning({
+      context: buildMultiMonthInvoiceContext([
+        { created_at: "2026-03-20 10:00:00", invoice_collection_id: 7001 },
+        { created_at: "2026-04-02 10:00:00", invoice_collection_id: 7001 },
+      ]),
+      splitByMonth,
+    });
+
+    expect(action).toBe(MULTI_MONTH_INVOICE_ACTION.CONTINUE);
+    expect(splitByMonth).not.toHaveBeenCalled();
+  });
+
+  it("cancels invoicing when the warning is dismissed", async () => {
+    const splitByMonth = vi.fn();
+    Swal.fire.mockResolvedValueOnce({ isDismissed: true });
+
+    const action = await promptMultiMonthInvoiceWarning({
+      context: buildMultiMonthInvoiceContext([
+        { created_at: "2026-03-20 10:00:00", invoice_collection_id: 7001 },
+        { created_at: "2026-04-02 10:00:00", invoice_collection_id: 7001 },
+      ]),
+      splitByMonth,
+    });
+
+    expect(action).toBe(MULTI_MONTH_INVOICE_ACTION.CANCEL);
+    expect(splitByMonth).not.toHaveBeenCalled();
+  });
+});
diff --git a/tests/unit/invoice-order-table-multi-month-warning.spec.js b/tests/unit/invoice-order-table-multi-month-warning.spec.js
new file mode 100644
index 00000000..3330c710
--- /dev/null
+++ b/tests/unit/invoice-order-table-multi-month-warning.spec.js
@@ -0,0 +1,170 @@
+// @vitest-environment jsdom
+import { flushPromises, mount } from "@vue/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("vue-i18n", async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    useI18n: () => ({
+      t: (key) => key,
+    }),
+  };
+});
+
+vi.mock("sweetalert2", () => ({
+  default: {
+    fire: vi.fn(),
+  },
+}));
+
+vi.mock("@/components/session/token/SessionUser.vue", () => ({
+  SessionUser: {
+    objects: {
+      global: {
+        language: {
+          hide_content: "Hide",
+          show_content: "Show",
+          status: "Status",
+          completed: "Completed",
+          not_completed: "Not completed",
+        },
+      },
+      orders: {
+        columns: {
+          id: { label: "ID", visible: true },
+          created_at: { label: "Created", visible: true },
+        },
+      },
+      collectedOrderInvoices: {
+        functions: {
+          split_by_month: vi.fn(),
+          economic: {
+            invoice: vi.fn(),
+          },
+        },
+      },
+      vehicles: {
+        columns: {
+          wash_subscription: {
+            label: "Subscription",
+          },
+        },
+      },
+    },
+    functions: {
+      currency: {
+        toLocal: (value) => String(value),
+      },
+      parseErrorMessage: (error) => error?.message ?? String(error),
+    },
+  },
+}));
+
+vi.mock("@/views/dashboards/superUserDashboard/user/displays/other/UserOtherSpecialArrangement.vue", () => ({
+  default: { template: "<div />" },
+}));
+
+vi.mock("@/views/dashboards/superUserDashboard/user/displays/other/UserOtherVaskeabonnement.vue", () => ({
+  default: { template: "<div />" },
+}));
+
+vi.mock("@/components/displays/department/pos/order/orderItemsTable.vue", () => ({
+  default: { template: "<div />" },
+}));
+
+vi.mock("@/components/displays/superuser/tables/OrderContentTable.vue", () => ({
+  default: { template: "<div />" },
+}));
+
+import Swal from "sweetalert2";
+import InvoiceOrderTable from "@/components/displays/superuser/tables/InvoiceOrderTable.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+
+const mountTable = (orders) =>
+  mount(InvoiceOrderTable, {
+    props: {
+      orders,
+      options: {},
+      columns: {},
+      user_id: 42,
+    },
+    global: {
+      mocks: {
+        $t: (key) =>
+          ({
+            "global.invoice_now": "Invoice now",
+            "global.unselect": "Unselect",
+            "common.all": "All",
+            "common.select": "Select",
+          }[key] ?? key),
+      },
+    },
+  });
+
+describe("InvoiceOrderTable multi-month warning", () => {
+  beforeEach(() => {
+    Swal.fire.mockReset();
+    SessionUser.objects.collectedOrderInvoices.functions.split_by_month.mockReset();
+    SessionUser.objects.collectedOrderInvoices.functions.economic.invoice.mockReset();
+    SessionUser.objects.collectedOrderInvoices.functions.economic.invoice.mockResolvedValue({});
+  });
+
+  it("warns for selected invoice collections containing orders from multiple months before invoicing together", async () => {
+    Swal.fire.mockResolvedValueOnce({ isDenied: true }).mockReturnValueOnce(new Promise(() => {}));
+    const wrapper = mountTable([
+      {
+        id: 1,
+        invoice_collection_id: 9001,
+        created_at: "2026-03-15 10:00:00",
+      },
+      {
+        id: 2,
+        invoice_collection_id: 9001,
+        created_at: "2026-04-02 10:00:00",
+      },
+    ]);
+
+    await wrapper.find("tbody input[type='checkbox']").trigger("click");
+    await wrapper.get("[data-testid='invoice-order-table-invoice-button']").trigger("click");
+    await flushPromises();
+
+    expect(Swal.fire).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({
+        icon: "warning",
+        showDenyButton: true,
+      })
+    );
+    expect(SessionUser.objects.collectedOrderInvoices.functions.split_by_month).not.toHaveBeenCalled();
+    expect(SessionUser.objects.collectedOrderInvoices.functions.economic.invoice).toHaveBeenCalledWith(9001, 42);
+  });
+
+  it("does not warn for selected invoice collections containing only one month", async () => {
+    Swal.fire.mockReturnValueOnce(new Promise(() => {}));
+    const wrapper = mountTable([
+      {
+        id: 1,
+        invoice_collection_id: 9002,
+        created_at: "2026-04-01 10:00:00",
+      },
+      {
+        id: 2,
+        invoice_collection_id: 9002,
+        created_at: "2026-04-02 10:00:00",
+      },
+    ]);
+
+    await wrapper.find("tbody input[type='checkbox']").trigger("click");
+    await wrapper.get("[data-testid='invoice-order-table-invoice-button']").trigger("click");
+    await flushPromises();
+
+    expect(Swal.fire).toHaveBeenCalledTimes(1);
+    expect(Swal.fire).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "Fakturaer oprettet",
+      })
+    );
+    expect(SessionUser.objects.collectedOrderInvoices.functions.economic.invoice).toHaveBeenCalledWith(9002, 42);
+  });
+});
diff --git a/tests/unit/invoicing-period-queue-state.behavior.spec.js b/tests/unit/invoicing-period-queue-state.behavior.spec.js
index 0e4d2f7f..d208f40e 100644
--- a/tests/unit/invoicing-period-queue-state.behavior.spec.js
+++ b/tests/unit/invoicing-period-queue-state.behavior.spec.js
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { computed, nextTick } from "vue";
-import { mount } from "@vue/test-utils";
+import { flushPromises, mount } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 const {
@@ -34,6 +34,12 @@ vi.mock("@/services/economicTransferQueue.js", () => ({
   },
 }));
 
+vi.mock("sweetalert2", () => ({
+  default: {
+    fire: vi.fn(),
+  },
+}));
+
 vi.mock("@/components/session/token/SessionUser.vue", () => ({
   SessionUser: {
     objects: {
@@ -62,6 +68,7 @@ vi.mock("@/components/session/token/SessionUser.vue", () => ({
           createVehicleSubscriptionInvoice: vi.fn(),
           add_fixed_pricing: vi.fn(),
           add_vehicle_subscriptions: vi.fn(),
+          split_by_month: vi.fn(),
         },
       },
       vehicles: {
@@ -76,6 +83,7 @@ vi.mock("@/components/session/token/SessionUser.vue", () => ({
       currency: {
         toLocal: (value) => String(value),
       },
+      parseErrorMessage: (error) => error?.message ?? String(error),
     },
   },
 }));
@@ -148,6 +156,7 @@ vi.mock(
 import InvoicingBillingPeriodViewAll from "@/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewAll.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { invoiceQueue } from "@/views/dashboards/superUserDashboard/InvoicingBillingPeriod/imports/InvoicingBillingPeriodImportInvoiceQueue.vue";
+import Swal from "sweetalert2";
 import {
   periodPaging,
   resetPeriodPagingState,
@@ -222,11 +231,23 @@ describe("Invoicing period queue state", () => {
     loadingCustomerNumbersRef.value = [];
     SessionUser.objects.orders.get.multiple.mockReset();
     SessionUser.objects.orders.get.multiple.mockResolvedValue([]);
+    SessionUser.objects.collectedOrderInvoices.functions.split_by_month.mockReset();
+    SessionUser.objects.collectedOrderInvoices.functions.split_by_month.mockResolvedValue({
+      data: {
+        data: {
+          processed_count: 1,
+          changed_count: 1,
+          skipped_count: 0,
+        },
+      },
+    });
     invoiceQueue.addInvoiceCollectionsToQueue.mockReset();
     invoiceQueue.processInvoiceCollectionQueue.mockReset();
     invoiceQueue.markPeriodRefreshLoading.mockClear();
     invoiceQueue.finishPeriodRefresh.mockClear();
     invoiceQueue.isPeriodCustomerRefreshLoading.mockClear();
+    Swal.fire.mockReset();
+    Swal.fire.mockResolvedValue({ isDenied: true });
     resetPeriodPagingState();
     sharedVariablesRef.value = {
       types: {
@@ -644,6 +665,168 @@ describe("Invoicing period queue state", () => {
     expect(windowOpenSpy).not.toHaveBeenCalled();
   });
 
+  it("splits instead of queueing when multi-month invoicing warning is confirmed", async () => {
+    sharedVariablesRef.value = {
+      types: {
+        all: [
+          {
+            id: 8,
+            customer_number: 1008,
+            customer_name: "Multi Month Customer",
+            requires_action: true,
+            queue: {
+              has_active_job: false,
+              statuses: [],
+              invoice_collection_ids: [],
+              is_action_blocked: false,
+            },
+            transactions: [
+              {
+                id: 8101,
+                amount: 75,
+                booked: false,
+                excluded: false,
+                invoice_collection_id: 8100,
+                date: "2026-03-28T10:00:00.000Z",
+              },
+              {
+                id: 8102,
+                amount: 125,
+                booked: false,
+                excluded: false,
+                invoice_collection_id: 8100,
+                date: "2026-04-02T10:00:00.000Z",
+              },
+            ],
+          },
+        ],
+      },
+    };
+    Swal.fire.mockResolvedValueOnce({ isConfirmed: true }).mockResolvedValueOnce({ isConfirmed: true });
+
+    const wrapper = mountView();
+    await nextTick();
+
+    await wrapper.get("[data-testid='invoicing-period-customer-invoice-1008']").trigger("click");
+    await flushPromises();
+    await nextTick();
+
+    expect(SessionUser.objects.collectedOrderInvoices.functions.split_by_month).toHaveBeenCalledWith(
+      "2026-03-28",
+      "2026-04-02",
+      {
+        invoiceCollectionIds: [8100],
+        preview: false,
+      }
+    );
+    expect(invoiceQueue.addInvoiceCollectionsToQueue).not.toHaveBeenCalled();
+    expect(invoiceQueue.processInvoiceCollectionQueue).not.toHaveBeenCalled();
+  });
+
+  it("continues queueing together when multi-month invoicing warning is denied", async () => {
+    sharedVariablesRef.value = {
+      types: {
+        all: [
+          {
+            id: 9,
+            customer_number: 1009,
+            customer_name: "Invoice Together Customer",
+            requires_action: true,
+            queue: {
+              has_active_job: false,
+              statuses: [],
+              invoice_collection_ids: [],
+              is_action_blocked: false,
+            },
+            transactions: [
+              {
+                id: 8201,
+                amount: 75,
+                booked: false,
+                excluded: false,
+                invoice_collection_id: 8200,
+                date: "2026-03-28T10:00:00.000Z",
+              },
+              {
+                id: 8202,
+                amount: 125,
+                booked: false,
+                excluded: false,
+                invoice_collection_id: 8200,
+                date: "2026-04-02T10:00:00.000Z",
+              },
+            ],
+          },
+        ],
+      },
+    };
+    Swal.fire.mockResolvedValueOnce({ isDenied: true });
+
+    const wrapper = mountView();
+    await nextTick();
+
+    await wrapper.get("[data-testid='invoicing-period-customer-invoice-1009']").trigger("click");
+    await flushPromises();
+    await nextTick();
+
+    expect(SessionUser.objects.collectedOrderInvoices.functions.split_by_month).not.toHaveBeenCalled();
+    expect(invoiceQueue.addInvoiceCollectionsToQueue).toHaveBeenCalledWith([8200], {
+      customerNumber: 1009,
+    });
+    expect(invoiceQueue.processInvoiceCollectionQueue).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not queue when multi-month invoicing warning is dismissed", async () => {
+    sharedVariablesRef.value = {
+      types: {
+        all: [
+          {
+            id: 10,
+            customer_number: 1010,
+            customer_name: "Cancel Multi Month Customer",
+            requires_action: true,
+            queue: {
+              has_active_job: false,
+              statuses: [],
+              invoice_collection_ids: [],
+              is_action_blocked: false,
+            },
+            transactions: [
+              {
+                id: 8301,
+                amount: 75,
+                booked: false,
+                excluded: false,
+                invoice_collection_id: 8300,
+                date: "2026-03-28T10:00:00.000Z",
+              },
+              {
+                id: 8302,
+                amount: 125,
+                booked: false,
+                excluded: false,
+                invoice_collection_id: 8300,
+                date: "2026-04-02T10:00:00.000Z",
+              },
+            ],
+          },
+        ],
+      },
+    };
+    Swal.fire.mockResolvedValueOnce({ isDismissed: true });
+
+    const wrapper = mountView();
+    await nextTick();
+
+    await wrapper.get("[data-testid='invoicing-period-customer-invoice-1010']").trigger("click");
+    await flushPromises();
+    await nextTick();
+
+    expect(SessionUser.objects.collectedOrderInvoices.functions.split_by_month).not.toHaveBeenCalled();
+    expect(invoiceQueue.addInvoiceCollectionsToQueue).not.toHaveBeenCalled();
+    expect(invoiceQueue.processInvoiceCollectionQueue).not.toHaveBeenCalled();
+  });
+
   it("applies invoice-now loading only to the affected customer", async () => {
     sharedVariablesRef.value = {
       types: {

From d8d67301ed97b72b65256b1ed723e5cb5c7b8fa5 Mon Sep 17 00:00:00 2001
From: Jeppe B <2jepp9350@gmail.com>
Date: Mon, 6 Jul 2026 16:26:46 +0200
Subject: [PATCH 16/19] Add autosave for limited backoffice prices (#143)

---
 scripts/playwright-pr-mapping.mjs             |   6 +
 src/i18n/generated/da-v2.json                 |   6 +
 src/i18n/generated/de-v2.json                 |   6 +
 src/i18n/generated/en-v2.json                 |   6 +
 src/i18n/generated/no-v2.json                 |   6 +
 src/i18n/generated/sv-v2.json                 |   6 +
 src/i18n/source/da/phrases/index.json         |  20 +-
 src/i18n/source/de/phrases/index.json         |  20 +-
 src/i18n/source/en/phrases/index.json         |  20 +-
 src/i18n/source/no/phrases/index.json         |  20 +-
 src/i18n/source/sv/phrases/index.json         |  20 +-
 .../backoffice/LimitedBackofficeHome.vue      |   5 +
 .../backoffice/LimitedBackofficePrices.vue    | 287 +++++++++++++++---
 .../components/LimitedBackofficeLayout.vue    |   5 +-
 .../InvoiceDistributionMonthView.vue          |  12 +-
 .../InvoiceDistributionOverview.vue           |   3 +-
 .../userDashboard/wash/MyWashStart.vue        |  24 +-
 tests/e2e/invoice-distribution.smoke.spec.js  |  29 +-
 tests/e2e/limited-backoffice.spec.ts          | 184 ++++++++++-
 tests/e2e/support/network.js                  |   7 +-
 tests/unit/playwright-pr-mapping.spec.js      |   9 +
 21 files changed, 583 insertions(+), 118 deletions(-)

diff --git a/scripts/playwright-pr-mapping.mjs b/scripts/playwright-pr-mapping.mjs
index 39b9819d..a125ed3d 100644
--- a/scripts/playwright-pr-mapping.mjs
+++ b/scripts/playwright-pr-mapping.mjs
@@ -28,6 +28,12 @@ export const sourceMappings = [
     specs: ["tests/e2e/navigation.smoke.spec.js"],
     projects: chromiumProjects,
   },
+  {
+    name: "backoffice",
+    patterns: [/^src\/views\/backoffice\//u],
+    specs: ["tests/e2e/limited-backoffice.spec.ts"],
+    projects: chromiumProjects,
+  },
   {
     name: "superuser-roles-permissions",
     patterns: [
diff --git a/src/i18n/generated/da-v2.json b/src/i18n/generated/da-v2.json
index 795b85ff..1f4e5374 100644
--- a/src/i18n/generated/da-v2.json
+++ b/src/i18n/generated/da-v2.json
@@ -1176,6 +1176,9 @@
         "title": "@:{'templates.generated.compat.limited_backoffice.prices.title'}",
         "save": "@:{'templates.generated.compat.limited_backoffice.prices.save'}",
         "saved": "@:{'templates.generated.compat.limited_backoffice.prices.saved'}",
+        "autosave_saving": "@:{'templates.generated.compat.limited_backoffice.prices.autosave_saving'}",
+        "autosave_pending": "@:{'templates.generated.compat.limited_backoffice.prices.autosave_pending'}",
+        "autosave_saved": "@:{'templates.generated.compat.limited_backoffice.prices.autosave_saved'}",
         "product": "@:{'templates.generated.compat.limited_backoffice.prices.product'}",
         "price": "@:{'templates.generated.compat.limited_backoffice.prices.price'}",
         "price_required": "@:{'templates.generated.compat.limited_backoffice.prices.price_required'}",
@@ -6035,6 +6038,9 @@
             "title": "@.capitalize:{'words.generated.afdelingspriser'}",
             "save": "@:{'words.generated.gem'} @:{'words.generated.priser'}",
             "saved": "Priserne @:{'words.generated.er'} @:{'words.generated.gemt'}.",
+            "autosave_saving": "Gemmer priser...",
+            "autosave_pending": "Prisændringer afventer.",
+            "autosave_saved": "Alle prisændringer er gemt.",
             "product": "Produkt",
             "price": "Afdelingspris",
             "price_required": "@.capitalize:{'words.generated.alle'} @:{'words.generated.produkter'} @:{'words.generated.skal'} have @:{'words.replication.host_definite_suffix'} @:{'words.generated.ikke'}-negativ numerisk pris.",
diff --git a/src/i18n/generated/de-v2.json b/src/i18n/generated/de-v2.json
index 2d4d7964..b70c2ebd 100644
--- a/src/i18n/generated/de-v2.json
+++ b/src/i18n/generated/de-v2.json
@@ -1287,6 +1287,9 @@
         "title": "@:{'templates.generated.compat.limited_backoffice.prices.title'}",
         "save": "@:{'templates.generated.compat.limited_backoffice.prices.save'}",
         "saved": "@:{'templates.generated.compat.limited_backoffice.prices.saved'}",
+        "autosave_saving": "@:{'templates.generated.compat.limited_backoffice.prices.autosave_saving'}",
+        "autosave_pending": "@:{'templates.generated.compat.limited_backoffice.prices.autosave_pending'}",
+        "autosave_saved": "@:{'templates.generated.compat.limited_backoffice.prices.autosave_saved'}",
         "product": "@:{'templates.generated.compat.limited_backoffice.prices.product'}",
         "price": "@:{'templates.generated.compat.limited_backoffice.prices.price'}",
         "price_required": "@:{'templates.generated.compat.limited_backoffice.prices.price_required'}",
@@ -6124,6 +6127,9 @@
             "title": "@.capitalize:{'words.generated.abteilungspreise'}",
             "save": "@:{'words.generated.preise'} @:{'words.generated.speichern'}",
             "saved": "@:{'words.generated.preise'} @:{'words.generated.gespeichert'}.",
+            "autosave_saving": "Preise werden gespeichert...",
+            "autosave_pending": "Preisaenderungen ausstehend.",
+            "autosave_saved": "Alle Preisaenderungen gespeichert.",
             "product": "@.capitalize:{'words.generated.produkt'}",
             "price": "Abteilungspreis",
             "price_required": "Jedes @.capitalize:{'words.generated.produkt'} @:{'words.generated.muss'} einen @:{'words.generated.nicht'}-negativen numerischen Preis @:{'words.generated.haben'}.",
diff --git a/src/i18n/generated/en-v2.json b/src/i18n/generated/en-v2.json
index 3ea6b944..9fd28b4e 100644
--- a/src/i18n/generated/en-v2.json
+++ b/src/i18n/generated/en-v2.json
@@ -1008,6 +1008,9 @@
         "title": "@:{'templates.generated.compat.limited_backoffice.prices.title'}",
         "save": "@:{'templates.generated.compat.limited_backoffice.prices.save'}",
         "saved": "@:{'templates.generated.compat.limited_backoffice.prices.saved'}",
+        "autosave_saving": "@:{'templates.generated.compat.limited_backoffice.prices.autosave_saving'}",
+        "autosave_pending": "@:{'templates.generated.compat.limited_backoffice.prices.autosave_pending'}",
+        "autosave_saved": "@:{'templates.generated.compat.limited_backoffice.prices.autosave_saved'}",
         "product": "@:{'templates.generated.compat.limited_backoffice.prices.product'}",
         "price": "@:{'templates.generated.compat.limited_backoffice.prices.price'}",
         "price_required": "@:{'templates.generated.compat.limited_backoffice.prices.price_required'}",
@@ -5867,6 +5870,9 @@
             "title": "@.capitalize:{'words.generated.department'} @:{'words.generated.prices'}",
             "save": "@.capitalize:{'words.generated.save'} @:{'words.generated.prices'}",
             "saved": "@.capitalize:{'words.generated.prices'} @:{'words.generated.saved'}.",
+            "autosave_saving": "Saving prices...",
+            "autosave_pending": "Price changes pending.",
+            "autosave_saved": "All price changes saved.",
             "product": "@.capitalize:{'words.generated.product'}",
             "price": "@.capitalize:{'words.generated.department'} @:{'words.generated.price'}",
             "price_required": "Every @:{'words.generated.product'} @:{'words.generated.must'} @:{'words.generated.have'} @:{'words.generated.a'} non-negative numeric @:{'words.generated.price'}.",
diff --git a/src/i18n/generated/no-v2.json b/src/i18n/generated/no-v2.json
index af65bd69..03312126 100644
--- a/src/i18n/generated/no-v2.json
+++ b/src/i18n/generated/no-v2.json
@@ -1290,6 +1290,9 @@
         "title": "@:{'templates.generated.compat.limited_backoffice.prices.title'}",
         "save": "@:{'templates.generated.compat.limited_backoffice.prices.save'}",
         "saved": "@:{'templates.generated.compat.limited_backoffice.prices.saved'}",
+        "autosave_saving": "@:{'templates.generated.compat.limited_backoffice.prices.autosave_saving'}",
+        "autosave_pending": "@:{'templates.generated.compat.limited_backoffice.prices.autosave_pending'}",
+        "autosave_saved": "@:{'templates.generated.compat.limited_backoffice.prices.autosave_saved'}",
         "product": "@:{'templates.generated.compat.limited_backoffice.prices.product'}",
         "price": "@:{'templates.generated.compat.limited_backoffice.prices.price'}",
         "price_required": "@:{'templates.generated.compat.limited_backoffice.prices.price_required'}",
@@ -6127,6 +6130,9 @@
             "title": "@.capitalize:{'words.generated.avdelingspriser'}",
             "save": "@.capitalize:{'words.generated.lagre'} @:{'words.generated.priser'}",
             "saved": "Prisene @:{'words.generated.er'} @:{'words.generated.lagret'}.",
+            "autosave_saving": "Lagrer priser...",
+            "autosave_pending": "Prisendringer venter.",
+            "autosave_saved": "Alle prisendringer er lagret.",
             "product": "Produkt",
             "price": "Avdelingspris",
             "price_required": "@.capitalize:{'words.generated.alle'} @:{'words.generated.produkter'} @:{'words.generated.ma'} ha @:{'words.replication.host_definite_suffix'} @:{'words.generated.ikke'}-negativ numerisk pris.",
diff --git a/src/i18n/generated/sv-v2.json b/src/i18n/generated/sv-v2.json
index ab8e4f12..5156b6be 100644
--- a/src/i18n/generated/sv-v2.json
+++ b/src/i18n/generated/sv-v2.json
@@ -1340,6 +1340,9 @@
         "title": "@:{'templates.generated.compat.limited_backoffice.prices.title'}",
         "save": "@:{'templates.generated.compat.limited_backoffice.prices.save'}",
         "saved": "@:{'templates.generated.compat.limited_backoffice.prices.saved'}",
+        "autosave_saving": "@:{'templates.generated.compat.limited_backoffice.prices.autosave_saving'}",
+        "autosave_pending": "@:{'templates.generated.compat.limited_backoffice.prices.autosave_pending'}",
+        "autosave_saved": "@:{'templates.generated.compat.limited_backoffice.prices.autosave_saved'}",
         "product": "@:{'templates.generated.compat.limited_backoffice.prices.product'}",
         "price": "@:{'templates.generated.compat.limited_backoffice.prices.price'}",
         "price_required": "@:{'templates.generated.compat.limited_backoffice.prices.price_required'}",
@@ -6177,6 +6180,9 @@
             "title": "@.capitalize:{'words.generated.avdelningspriser'}",
             "save": "@.capitalize:{'words.generated.spara'} @:{'words.generated.priser'}",
             "saved": "Priserna @:{'words.generated.har'} @:{'words.generated.sparats'}.",
+            "autosave_saving": "Sparar priser...",
+            "autosave_pending": "Prisandringar vantar.",
+            "autosave_saved": "Alla prisandringar har sparats.",
             "product": "Produkt",
             "price": "Avdelningspris",
             "price_required": "@.capitalize:{'words.generated.alla'} @:{'words.generated.produkter'} @:{'words.generated.maste'} ha ett icke-negativt numeriskt pris.",
diff --git a/src/i18n/source/da/phrases/index.json b/src/i18n/source/da/phrases/index.json
index 7b5bd811..eb28456d 100644
--- a/src/i18n/source/da/phrases/index.json
+++ b/src/i18n/source/da/phrases/index.json
@@ -28,13 +28,16 @@
       "title": "@:{'phrases.compat.limited_backoffice.forbidden.title'}",
       "department": "@:{'phrases.compat.limited_backoffice.forbidden.department'}"
     },
-    "prices": {
-      "title": "@:{'phrases.compat.limited_backoffice.prices.title'}",
-      "save": "@:{'phrases.compat.limited_backoffice.prices.save'}",
-      "saved": "@:{'phrases.compat.limited_backoffice.prices.saved'}",
-      "product": "@:{'phrases.compat.limited_backoffice.prices.product'}",
-      "price": "@:{'phrases.compat.limited_backoffice.prices.price'}",
-      "price_required": "@:{'phrases.compat.limited_backoffice.prices.price_required'}",
+      "prices": {
+        "title": "@:{'phrases.compat.limited_backoffice.prices.title'}",
+        "save": "@:{'phrases.compat.limited_backoffice.prices.save'}",
+        "saved": "@:{'phrases.compat.limited_backoffice.prices.saved'}",
+        "autosave_saving": "@:{'phrases.compat.limited_backoffice.prices.autosave_saving'}",
+        "autosave_pending": "@:{'phrases.compat.limited_backoffice.prices.autosave_pending'}",
+        "autosave_saved": "@:{'phrases.compat.limited_backoffice.prices.autosave_saved'}",
+        "product": "@:{'phrases.compat.limited_backoffice.prices.product'}",
+        "price": "@:{'phrases.compat.limited_backoffice.prices.price'}",
+        "price_required": "@:{'phrases.compat.limited_backoffice.prices.price_required'}",
       "setup_required_title": "@:{'phrases.compat.limited_backoffice.prices.setup_required_title'}",
       "setup_required_message": "@:{'phrases.compat.limited_backoffice.prices.setup_required_message'}",
       "no_products": "@:{'phrases.compat.limited_backoffice.prices.no_products'}"
@@ -273,6 +276,9 @@
         "title": "@.capitalize:{'terms.glossary.afdelingspriser'}",
         "save": "@:{'terms.glossary.gem'} @:{'terms.glossary.priser'}",
         "saved": "Priserne @:{'terms.glossary.er'} @:{'terms.glossary.gemt'}.",
+        "autosave_saving": "Gemmer priser...",
+        "autosave_pending": "Prisændringer afventer.",
+        "autosave_saved": "Alle prisændringer er gemt.",
         "product": "Produkt",
         "price": "Afdelingspris",
         "price_required": "@.capitalize:{'terms.glossary.alle'} @:{'terms.glossary.produkter'} @:{'terms.glossary.skal'} have @:{'terms.replication.host_definite_suffix'} @:{'terms.glossary.ikke'}-negativ numerisk pris.",
diff --git a/src/i18n/source/de/phrases/index.json b/src/i18n/source/de/phrases/index.json
index 5868636c..ea3984e4 100644
--- a/src/i18n/source/de/phrases/index.json
+++ b/src/i18n/source/de/phrases/index.json
@@ -28,13 +28,16 @@
       "title": "@:{'phrases.compat.limited_backoffice.forbidden.title'}",
       "department": "@:{'phrases.compat.limited_backoffice.forbidden.department'}"
     },
-    "prices": {
-      "title": "@:{'phrases.compat.limited_backoffice.prices.title'}",
-      "save": "@:{'phrases.compat.limited_backoffice.prices.save'}",
-      "saved": "@:{'phrases.compat.limited_backoffice.prices.saved'}",
-      "product": "@:{'phrases.compat.limited_backoffice.prices.product'}",
-      "price": "@:{'phrases.compat.limited_backoffice.prices.price'}",
-      "price_required": "@:{'phrases.compat.limited_backoffice.prices.price_required'}",
+      "prices": {
+        "title": "@:{'phrases.compat.limited_backoffice.prices.title'}",
+        "save": "@:{'phrases.compat.limited_backoffice.prices.save'}",
+        "saved": "@:{'phrases.compat.limited_backoffice.prices.saved'}",
+        "autosave_saving": "@:{'phrases.compat.limited_backoffice.prices.autosave_saving'}",
+        "autosave_pending": "@:{'phrases.compat.limited_backoffice.prices.autosave_pending'}",
+        "autosave_saved": "@:{'phrases.compat.limited_backoffice.prices.autosave_saved'}",
+        "product": "@:{'phrases.compat.limited_backoffice.prices.product'}",
+        "price": "@:{'phrases.compat.limited_backoffice.prices.price'}",
+        "price_required": "@:{'phrases.compat.limited_backoffice.prices.price_required'}",
       "setup_required_title": "@:{'phrases.compat.limited_backoffice.prices.setup_required_title'}",
       "setup_required_message": "@:{'phrases.compat.limited_backoffice.prices.setup_required_message'}",
       "no_products": "@:{'phrases.compat.limited_backoffice.prices.no_products'}"
@@ -273,6 +276,9 @@
         "title": "@.capitalize:{'terms.glossary.abteilungspreise'}",
         "save": "@:{'terms.glossary.preise'} @:{'terms.glossary.speichern'}",
         "saved": "@:{'terms.glossary.preise'} @:{'terms.glossary.gespeichert'}.",
+        "autosave_saving": "Preise werden gespeichert...",
+        "autosave_pending": "Preisaenderungen ausstehend.",
+        "autosave_saved": "Alle Preisaenderungen gespeichert.",
         "product": "@.capitalize:{'terms.glossary.produkt'}",
         "price": "Abteilungspreis",
         "price_required": "Jedes @.capitalize:{'terms.glossary.produkt'} @:{'terms.glossary.muss'} einen @:{'terms.glossary.nicht'}-negativen numerischen Preis @:{'terms.glossary.haben'}.",
diff --git a/src/i18n/source/en/phrases/index.json b/src/i18n/source/en/phrases/index.json
index 7af8b641..38d67974 100644
--- a/src/i18n/source/en/phrases/index.json
+++ b/src/i18n/source/en/phrases/index.json
@@ -28,13 +28,16 @@
       "title": "@:{'phrases.compat.limited_backoffice.forbidden.title'}",
       "department": "@:{'phrases.compat.limited_backoffice.forbidden.department'}"
     },
-    "prices": {
-      "title": "@:{'phrases.compat.limited_backoffice.prices.title'}",
-      "save": "@:{'phrases.compat.limited_backoffice.prices.save'}",
-      "saved": "@:{'phrases.compat.limited_backoffice.prices.saved'}",
-      "product": "@:{'phrases.compat.limited_backoffice.prices.product'}",
-      "price": "@:{'phrases.compat.limited_backoffice.prices.price'}",
-      "price_required": "@:{'phrases.compat.limited_backoffice.prices.price_required'}",
+      "prices": {
+        "title": "@:{'phrases.compat.limited_backoffice.prices.title'}",
+        "save": "@:{'phrases.compat.limited_backoffice.prices.save'}",
+        "saved": "@:{'phrases.compat.limited_backoffice.prices.saved'}",
+        "autosave_saving": "@:{'phrases.compat.limited_backoffice.prices.autosave_saving'}",
+        "autosave_pending": "@:{'phrases.compat.limited_backoffice.prices.autosave_pending'}",
+        "autosave_saved": "@:{'phrases.compat.limited_backoffice.prices.autosave_saved'}",
+        "product": "@:{'phrases.compat.limited_backoffice.prices.product'}",
+        "price": "@:{'phrases.compat.limited_backoffice.prices.price'}",
+        "price_required": "@:{'phrases.compat.limited_backoffice.prices.price_required'}",
       "setup_required_title": "@:{'phrases.compat.limited_backoffice.prices.setup_required_title'}",
       "setup_required_message": "@:{'phrases.compat.limited_backoffice.prices.setup_required_message'}",
       "no_products": "@:{'phrases.compat.limited_backoffice.prices.no_products'}"
@@ -273,6 +276,9 @@
         "title": "@.capitalize:{'terms.glossary.department'} @:{'terms.glossary.prices'}",
         "save": "@.capitalize:{'terms.glossary.save'} @:{'terms.glossary.prices'}",
         "saved": "@.capitalize:{'terms.glossary.prices'} @:{'terms.glossary.saved'}.",
+        "autosave_saving": "Saving prices...",
+        "autosave_pending": "Price changes pending.",
+        "autosave_saved": "All price changes saved.",
         "product": "@.capitalize:{'terms.glossary.product'}",
         "price": "@.capitalize:{'terms.glossary.department'} @:{'terms.glossary.price'}",
         "price_required": "Every @:{'terms.glossary.product'} @:{'terms.glossary.must'} @:{'terms.glossary.have'} @:{'terms.glossary.a'} non-negative numeric @:{'terms.glossary.price'}.",
diff --git a/src/i18n/source/no/phrases/index.json b/src/i18n/source/no/phrases/index.json
index 5fa723d5..853bbe06 100644
--- a/src/i18n/source/no/phrases/index.json
+++ b/src/i18n/source/no/phrases/index.json
@@ -28,13 +28,16 @@
       "title": "@:{'phrases.compat.limited_backoffice.forbidden.title'}",
       "department": "@:{'phrases.compat.limited_backoffice.forbidden.department'}"
     },
-    "prices": {
-      "title": "@:{'phrases.compat.limited_backoffice.prices.title'}",
-      "save": "@:{'phrases.compat.limited_backoffice.prices.save'}",
-      "saved": "@:{'phrases.compat.limited_backoffice.prices.saved'}",
-      "product": "@:{'phrases.compat.limited_backoffice.prices.product'}",
-      "price": "@:{'phrases.compat.limited_backoffice.prices.price'}",
-      "price_required": "@:{'phrases.compat.limited_backoffice.prices.price_required'}",
+      "prices": {
+        "title": "@:{'phrases.compat.limited_backoffice.prices.title'}",
+        "save": "@:{'phrases.compat.limited_backoffice.prices.save'}",
+        "saved": "@:{'phrases.compat.limited_backoffice.prices.saved'}",
+        "autosave_saving": "@:{'phrases.compat.limited_backoffice.prices.autosave_saving'}",
+        "autosave_pending": "@:{'phrases.compat.limited_backoffice.prices.autosave_pending'}",
+        "autosave_saved": "@:{'phrases.compat.limited_backoffice.prices.autosave_saved'}",
+        "product": "@:{'phrases.compat.limited_backoffice.prices.product'}",
+        "price": "@:{'phrases.compat.limited_backoffice.prices.price'}",
+        "price_required": "@:{'phrases.compat.limited_backoffice.prices.price_required'}",
       "setup_required_title": "@:{'phrases.compat.limited_backoffice.prices.setup_required_title'}",
       "setup_required_message": "@:{'phrases.compat.limited_backoffice.prices.setup_required_message'}",
       "no_products": "@:{'phrases.compat.limited_backoffice.prices.no_products'}"
@@ -273,6 +276,9 @@
         "title": "@.capitalize:{'terms.glossary.avdelingspriser'}",
         "save": "@.capitalize:{'terms.glossary.lagre'} @:{'terms.glossary.priser'}",
         "saved": "Prisene @:{'terms.glossary.er'} @:{'terms.glossary.lagret'}.",
+        "autosave_saving": "Lagrer priser...",
+        "autosave_pending": "Prisendringer venter.",
+        "autosave_saved": "Alle prisendringer er lagret.",
         "product": "Produkt",
         "price": "Avdelingspris",
         "price_required": "@.capitalize:{'terms.glossary.alle'} @:{'terms.glossary.produkter'} @:{'terms.glossary.ma'} ha @:{'terms.replication.host_definite_suffix'} @:{'terms.glossary.ikke'}-negativ numerisk pris.",
diff --git a/src/i18n/source/sv/phrases/index.json b/src/i18n/source/sv/phrases/index.json
index 4ab1e324..5912cc4b 100644
--- a/src/i18n/source/sv/phrases/index.json
+++ b/src/i18n/source/sv/phrases/index.json
@@ -28,13 +28,16 @@
       "title": "@:{'phrases.compat.limited_backoffice.forbidden.title'}",
       "department": "@:{'phrases.compat.limited_backoffice.forbidden.department'}"
     },
-    "prices": {
-      "title": "@:{'phrases.compat.limited_backoffice.prices.title'}",
-      "save": "@:{'phrases.compat.limited_backoffice.prices.save'}",
-      "saved": "@:{'phrases.compat.limited_backoffice.prices.saved'}",
-      "product": "@:{'phrases.compat.limited_backoffice.prices.product'}",
-      "price": "@:{'phrases.compat.limited_backoffice.prices.price'}",
-      "price_required": "@:{'phrases.compat.limited_backoffice.prices.price_required'}",
+      "prices": {
+        "title": "@:{'phrases.compat.limited_backoffice.prices.title'}",
+        "save": "@:{'phrases.compat.limited_backoffice.prices.save'}",
+        "saved": "@:{'phrases.compat.limited_backoffice.prices.saved'}",
+        "autosave_saving": "@:{'phrases.compat.limited_backoffice.prices.autosave_saving'}",
+        "autosave_pending": "@:{'phrases.compat.limited_backoffice.prices.autosave_pending'}",
+        "autosave_saved": "@:{'phrases.compat.limited_backoffice.prices.autosave_saved'}",
+        "product": "@:{'phrases.compat.limited_backoffice.prices.product'}",
+        "price": "@:{'phrases.compat.limited_backoffice.prices.price'}",
+        "price_required": "@:{'phrases.compat.limited_backoffice.prices.price_required'}",
       "setup_required_title": "@:{'phrases.compat.limited_backoffice.prices.setup_required_title'}",
       "setup_required_message": "@:{'phrases.compat.limited_backoffice.prices.setup_required_message'}",
       "no_products": "@:{'phrases.compat.limited_backoffice.prices.no_products'}"
@@ -273,6 +276,9 @@
         "title": "@.capitalize:{'terms.glossary.avdelningspriser'}",
         "save": "@.capitalize:{'terms.glossary.spara'} @:{'terms.glossary.priser'}",
         "saved": "Priserna @:{'terms.glossary.har'} @:{'terms.glossary.sparats'}.",
+        "autosave_saving": "Sparar priser...",
+        "autosave_pending": "Prisandringar vantar.",
+        "autosave_saved": "Alla prisandringar har sparats.",
         "product": "Produkt",
         "price": "Avdelningspris",
         "price_required": "@.capitalize:{'terms.glossary.alla'} @:{'terms.glossary.produkter'} @:{'terms.glossary.maste'} ha ett icke-negativt numeriskt pris.",
diff --git a/src/views/backoffice/LimitedBackofficeHome.vue b/src/views/backoffice/LimitedBackofficeHome.vue
index 3a166d55..14e3b11b 100644
--- a/src/views/backoffice/LimitedBackofficeHome.vue
+++ b/src/views/backoffice/LimitedBackofficeHome.vue
@@ -38,6 +38,10 @@ const loadDepartments = async () => {
   }
 };
 
+const changeDepartment = async (departmentId) => {
+  await router.push(`/backoffice/departments/${departmentId}/prices`);
+};
+
 onMounted(() => {
   void loadDepartments();
 });
@@ -50,6 +54,7 @@ onMounted(() => {
       :departments="departments"
       :loading-departments="loading"
       show-department-switcher
+      @change-department="changeDepartment"
     >
       <div v-if="loading" class="notification is-light" data-testid="limited-backoffice-loading">
         {{ t("templates.limited_backoffice.loading") }}
diff --git a/src/views/backoffice/LimitedBackofficePrices.vue b/src/views/backoffice/LimitedBackofficePrices.vue
index 5e1a2ff5..dd067777 100644
--- a/src/views/backoffice/LimitedBackofficePrices.vue
+++ b/src/views/backoffice/LimitedBackofficePrices.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
@@ -16,6 +16,7 @@ import {
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
+const AUTOSAVE_DELAY_MS = 600;
 
 const departments = ref([]);
 const priceData = ref(null);
@@ -24,9 +25,14 @@ const loadingDepartments = ref(false);
 const loadingPrices = ref(false);
 const saving = ref(false);
 const errorMessage = ref("");
-const successMessage = ref("");
 const setupRequired = ref(null);
-const saveAttempted = ref(false);
+const lastSavedPriceSnapshot = ref("");
+
+let autosaveTimerId = null;
+let saveAgainAfterCurrentRequest = false;
+let nextSaveSequence = 0;
+let lastAppliedSaveSequence = 0;
+let nextLoadSequence = 0;
 
 const selectedDepartmentId = computed(() => {
   const departmentId = Number.parseInt(String(route.params.departmentId ?? ""), 10);
@@ -53,7 +59,92 @@ const invalidPriceCount = computed(
   () => products.value.filter((product) => !isPriceValueValid(formPrices.value[product.id])).length
 );
 
-const canSave = computed(() => hasProducts.value && invalidPriceCount.value === 0 && !saving.value && !loadingPrices.value);
+const productsFromPayload = (payload) =>
+  (Array.isArray(payload?.categories) ? payload.categories : []).flatMap((category) => category.products || []);
+
+const buildFormPricesFromPayload = (payload) =>
+  productsFromPayload(payload).reduce((prices, product) => {
+    prices[product.id] = product.price === null || product.price === undefined ? "" : String(product.price);
+    return prices;
+  }, {});
+
+const priceRowsFrom = (priceSource, productList = products.value) =>
+  productList.map((product) => ({
+    product_id: product.id,
+    price: String(priceSource[product.id] ?? "").trim(),
+  }));
+
+const serializePriceRows = (rows) => JSON.stringify(rows);
+
+const priceSnapshotFrom = (priceSource, productList = products.value) =>
+  serializePriceRows(priceRowsFrom(priceSource, productList));
+
+const hydratePriceState = (payload) => {
+  const nextFormPrices = buildFormPricesFromPayload(payload);
+  const productList = productsFromPayload(payload);
+
+  priceData.value = payload;
+  formPrices.value = nextFormPrices;
+  lastSavedPriceSnapshot.value = priceSnapshotFrom(nextFormPrices, productList);
+};
+
+const currentPriceSnapshot = computed(() => (hasProducts.value ? priceSnapshotFrom(formPrices.value) : ""));
+
+const hasUnsavedChanges = computed(
+  () => hasProducts.value && currentPriceSnapshot.value !== lastSavedPriceSnapshot.value
+);
+
+const canAutosave = computed(
+  () =>
+    Boolean(selectedDepartmentId.value) &&
+    hasProducts.value &&
+    invalidPriceCount.value === 0 &&
+    !loadingDepartments.value &&
+    !loadingPrices.value &&
+    !setupRequired.value &&
+    !hasForbiddenDepartment.value
+);
+
+const autosaveStatusMessage = computed(() => {
+  if (!hasProducts.value || loadingDepartments.value || loadingPrices.value || setupRequired.value) {
+    return "";
+  }
+
+  if (saving.value) {
+    return t("templates.limited_backoffice.prices.autosave_saving");
+  }
+
+  if (hasUnsavedChanges.value && invalidPriceCount.value === 0) {
+    return t("templates.limited_backoffice.prices.autosave_pending");
+  }
+
+  if (!hasUnsavedChanges.value && lastSavedPriceSnapshot.value !== "") {
+    return t("templates.limited_backoffice.prices.autosave_saved");
+  }
+
+  return "";
+});
+
+const autosaveStatusClass = computed(() => ({
+  "has-text-grey": saving.value,
+  "has-text-warning-dark": !saving.value && hasUnsavedChanges.value && invalidPriceCount.value === 0,
+  "has-text-success": !saving.value && !hasUnsavedChanges.value && lastSavedPriceSnapshot.value !== "",
+}));
+
+const autosaveStatusIcon = computed(() => {
+  if (saving.value) {
+    return "fa-spinner fa-spin";
+  }
+
+  return hasUnsavedChanges.value ? "fa-clock" : "fa-check";
+});
+
+const clearPendingAutosave = () => {
+  if (autosaveTimerId !== null) {
+    window.clearTimeout(autosaveTimerId);
+    autosaveTimerId = null;
+  }
+};
 
 const loadDepartments = async () => {
   loadingDepartments.value = true;
@@ -73,11 +164,12 @@ const loadDepartments = async () => {
 };
 
 const resetPriceState = () => {
+  nextLoadSequence += 1;
+  clearPendingAutosave();
   priceData.value = null;
   formPrices.value = {};
   setupRequired.value = null;
-  successMessage.value = "";
-  saveAttempted.value = false;
+  lastSavedPriceSnapshot.value = "";
 };
 
 const loadPrices = async () => {
@@ -86,20 +178,28 @@ const loadPrices = async () => {
     return;
   }
 
+  const loadSequence = ++nextLoadSequence;
+  clearPendingAutosave();
   loadingPrices.value = true;
   errorMessage.value = "";
   setupRequired.value = null;
-  successMessage.value = "";
+  priceData.value = null;
+  formPrices.value = {};
+  lastSavedPriceSnapshot.value = "";
 
   try {
     const response = await getLimitedBackofficeDepartmentPrices(selectedDepartmentId.value);
+    if (loadSequence !== nextLoadSequence) {
+      return;
+    }
+
     const payload = unwrapLimitedBackofficeResponse(response) || null;
-    priceData.value = payload;
-    formPrices.value = productsFromPayload(payload).reduce((prices, product) => {
-      prices[product.id] = product.price === null || product.price === undefined ? "" : String(product.price);
-      return prices;
-    }, {});
+    hydratePriceState(payload);
   } catch (error) {
+    if (loadSequence !== nextLoadSequence) {
+      return;
+    }
+
     const payload = error?.response?.data?.data || error?.response?.data || {};
     if (Number(error?.response?.status) === 409 && payload?.code === "department_price_setup_required") {
       setupRequired.value = payload;
@@ -107,6 +207,8 @@ const loadPrices = async () => {
         department: payload.department || selectedDepartment.value,
         categories: [],
       };
+      formPrices.value = {};
+      lastSavedPriceSnapshot.value = "";
     } else {
       errorMessage.value = limitedBackofficeErrorMessage(
         error,
@@ -114,45 +216,113 @@ const loadPrices = async () => {
       );
     }
   } finally {
-    loadingPrices.value = false;
+    if (loadSequence === nextLoadSequence) {
+      loadingPrices.value = false;
+    }
   }
 };
 
-const productsFromPayload = (payload) =>
-  (Array.isArray(payload?.categories) ? payload.categories : []).flatMap((category) => category.products || []);
+const applySuccessfulSavePayload = (updatedPayload, requestedRows, requestedSnapshot) => {
+  lastSavedPriceSnapshot.value = requestedSnapshot;
 
-const savePrices = async () => {
-  saveAttempted.value = true;
-  successMessage.value = "";
-  errorMessage.value = "";
-
-  if (!canSave.value || !selectedDepartmentId.value) {
+  if (!updatedPayload || currentPriceSnapshot.value !== requestedSnapshot) {
     return;
   }
 
+  const requestedPriceLookup = requestedRows.reduce((lookup, row) => {
+    lookup[row.product_id] = row.price;
+    return lookup;
+  }, {});
+  const productList = productsFromPayload(updatedPayload);
+  const nextFormPrices = productList.reduce((prices, product) => {
+    prices[product.id] =
+      requestedPriceLookup[product.id] ??
+      (product.price === null || product.price === undefined ? "" : String(product.price));
+    return prices;
+  }, {});
+
+  priceData.value = updatedPayload;
+  formPrices.value = nextFormPrices;
+  lastSavedPriceSnapshot.value = priceSnapshotFrom(nextFormPrices, productList);
+};
+
+const savePrices = async () => {
+  clearPendingAutosave();
+
+  if (!hasUnsavedChanges.value) {
+    return true;
+  }
+
+  if (!canAutosave.value) {
+    return false;
+  }
+
+  if (saving.value) {
+    saveAgainAfterCurrentRequest = true;
+    return false;
+  }
+
+  const departmentId = selectedDepartmentId.value;
+  const requestedRows = priceRowsFrom(formPrices.value);
+  const requestedSnapshot = serializePriceRows(requestedRows);
+  const saveSequence = ++nextSaveSequence;
+  let saveCompleted = false;
+
+  errorMessage.value = "";
   saving.value = true;
+
   try {
-    const payload = products.value.map((product) => ({
-      product_id: product.id,
-      price: String(formPrices.value[product.id]).trim(),
-    }));
-    const response = await updateLimitedBackofficeDepartmentPrices(selectedDepartmentId.value, payload);
+    const response = await updateLimitedBackofficeDepartmentPrices(departmentId, requestedRows);
     const updatedPayload = unwrapLimitedBackofficeResponse(response) || null;
-    priceData.value = updatedPayload;
-    formPrices.value = productsFromPayload(updatedPayload).reduce((prices, product) => {
-      prices[product.id] = product.price === null || product.price === undefined ? "" : String(product.price);
-      return prices;
-    }, {});
-    saveAttempted.value = false;
-    successMessage.value = t("templates.limited_backoffice.prices.saved");
+
+    if (selectedDepartmentId.value === departmentId && saveSequence >= lastAppliedSaveSequence) {
+      lastAppliedSaveSequence = saveSequence;
+      applySuccessfulSavePayload(updatedPayload, requestedRows, requestedSnapshot);
+    }
+
+    saveCompleted = true;
+    return true;
   } catch (error) {
-    errorMessage.value = limitedBackofficeErrorMessage(error, t("templates.limited_backoffice.errors.save_prices"));
+    if (selectedDepartmentId.value === departmentId) {
+      errorMessage.value = limitedBackofficeErrorMessage(error, t("templates.limited_backoffice.errors.save_prices"));
+    }
+
+    return false;
   } finally {
     saving.value = false;
+
+    const shouldSaveAgain = saveAgainAfterCurrentRequest;
+    saveAgainAfterCurrentRequest = false;
+
+    if (saveCompleted && (shouldSaveAgain || hasUnsavedChanges.value) && canAutosave.value) {
+      void savePrices();
+    }
   }
 };
 
+const scheduleAutosave = () => {
+  clearPendingAutosave();
+
+  if (!hasUnsavedChanges.value || !canAutosave.value) {
+    return;
+  }
+
+  autosaveTimerId = window.setTimeout(() => {
+    autosaveTimerId = null;
+    void savePrices();
+  }, AUTOSAVE_DELAY_MS);
+};
+
+const flushAutosave = async () => {
+  return savePrices();
+};
+
 const changeDepartment = async (departmentId) => {
+  const flushed = await flushAutosave();
+  if (!flushed && hasUnsavedChanges.value) {
+    return;
+  }
+
   await router.push(`/backoffice/departments/${departmentId}/prices`);
 };
 
@@ -167,6 +337,22 @@ watch(
     await loadPrices();
   }
 );
+
+watch(
+  formPrices,
+  () => {
+    scheduleAutosave();
+  },
+  { deep: true }
+);
+
+onBeforeUnmount(() => {
+  clearPendingAutosave();
+
+  if (hasUnsavedChanges.value && canAutosave.value) {
+    void savePrices();
+  }
+});
 </script>
 
 <template>
@@ -197,17 +383,17 @@ watch(
             </div>
           </div>
           <div class="level-right">
-            <button
-              type="button"
-              class="button is-dark"
-              :class="{ 'is-loading': saving }"
-              :disabled="!canSave"
-              data-testid="limited-prices-save"
-              @click="savePrices"
+            <div
+              v-if="autosaveStatusMessage"
+              class="limited-backoffice-prices__autosave"
+              :class="autosaveStatusClass"
+              data-testid="limited-prices-autosave-status"
+              role="status"
+              aria-live="polite"
             >
-              <span class="icon is-small"><i class="fas fa-save" aria-hidden="true"></i></span>
-              <span>{{ t("templates.limited_backoffice.prices.save") }}</span>
-            </button>
+              <span class="icon is-small"><i class="fas" :class="autosaveStatusIcon" aria-hidden="true"></i></span>
+              <span>{{ autosaveStatusMessage }}</span>
+            </div>
           </div>
         </div>
 
@@ -229,10 +415,6 @@ watch(
           {{ errorMessage }}
         </div>
 
-        <div v-if="successMessage" class="notification is-success is-light" data-testid="limited-prices-success">
-          {{ successMessage }}
-        </div>
-
         <div
           v-if="hasProducts && invalidPriceCount > 0"
           class="notification is-danger is-light"
@@ -273,6 +455,7 @@ watch(
                       required
                       :aria-label="`${product.name} ${t('templates.limited_backoffice.prices.price')}`"
                       :data-testid="`limited-price-input-${product.id}`"
+                      @blur="flushAutosave"
                     />
                   </td>
                 </tr>
@@ -291,6 +474,14 @@ watch(
   margin-bottom: 1rem;
 }
 
+.limited-backoffice-prices__autosave {
+  align-items: center;
+  display: inline-flex;
+  font-size: 0.875rem;
+  gap: 0.25rem;
+  min-height: 2.25rem;
+}
+
 .limited-price-category {
   margin-top: 1.25rem;
 }
diff --git a/src/views/backoffice/components/LimitedBackofficeLayout.vue b/src/views/backoffice/components/LimitedBackofficeLayout.vue
index 4fdbe72c..14d5fdf0 100644
--- a/src/views/backoffice/components/LimitedBackofficeLayout.vue
+++ b/src/views/backoffice/components/LimitedBackofficeLayout.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
-import { useRouter } from "vue-router";
 import PageTitle from "@/components/global/PageTitle.vue";
 
 const props = defineProps({
@@ -28,7 +27,6 @@ const props = defineProps({
 });
 
 const emit = defineEmits(["changeDepartment"]);
-const router = useRouter();
 const { t } = useI18n();
 
 const pricesRoute = computed(() =>
@@ -50,14 +48,13 @@ const tabs = computed(() => [
   },
 ]);
 
-const selectDepartment = async (event) => {
+const selectDepartment = (event) => {
   const departmentId = Number.parseInt(String(event?.target?.value ?? ""), 10);
   if (!Number.isInteger(departmentId) || departmentId <= 0) {
     return;
   }
 
   emit("changeDepartment", departmentId);
-  await router.push(`/backoffice/departments/${departmentId}/prices`);
 };
 </script>
 
diff --git a/src/views/dashboards/superUserDashboard/invoiceDistribution/InvoiceDistributionMonthView.vue b/src/views/dashboards/superUserDashboard/invoiceDistribution/InvoiceDistributionMonthView.vue
index 63d904fd..b5b0f429 100644
--- a/src/views/dashboards/superUserDashboard/invoiceDistribution/InvoiceDistributionMonthView.vue
+++ b/src/views/dashboards/superUserDashboard/invoiceDistribution/InvoiceDistributionMonthView.vue
@@ -620,8 +620,10 @@ onMounted(async () => {
       </b-message>
 
       <b-message v-if="monthFallback.usedLegacyDistribution" type="is-warning" has-icon icon-pack="fas" class="mb-0">
-        <p>{{ t('superuser_invoice_distribution.warnings.legacy_distribution_month') }}</p>
-        <p v-if="monthFallback.distributionFallbackReason" class="is-size-7">{{ monthFallback.distributionFallbackReason }}</p>
+        <div data-testid="distribution-month-legacy-fallback-warning">
+          <p>{{ t('superuser_invoice_distribution.warnings.legacy_distribution_month') }}</p>
+          <p v-if="monthFallback.distributionFallbackReason" class="is-size-7">{{ monthFallback.distributionFallbackReason }}</p>
+        </div>
       </b-message>
 
       <b-tabs v-model="activeTab" expanded data-testid="distribution-month-tabs" class="distribution-tabs">
@@ -899,8 +901,10 @@ onMounted(async () => {
           </b-message>
 
           <b-message v-if="compareFallback.usedLegacyCompare" type="is-warning" has-icon icon-pack="fas" class="mb-3">
-            <p>{{ t('superuser_invoice_distribution.warnings.legacy_compare_fallback') }}</p>
-            <p v-if="compareFallback.compareFallbackReason" class="is-size-7">{{ compareFallback.compareFallbackReason }}</p>
+            <div data-testid="distribution-compare-legacy-fallback-warning">
+              <p>{{ t('superuser_invoice_distribution.warnings.legacy_compare_fallback') }}</p>
+              <p v-if="compareFallback.compareFallbackReason" class="is-size-7">{{ compareFallback.compareFallbackReason }}</p>
+            </div>
           </b-message>
 
           <section class="v3-compare-summary mb-3" v-if="sortedCompareRows.length">
diff --git a/src/views/dashboards/superUserDashboard/invoiceDistribution/InvoiceDistributionOverview.vue b/src/views/dashboards/superUserDashboard/invoiceDistribution/InvoiceDistributionOverview.vue
index 114f2262..514140a6 100644
--- a/src/views/dashboards/superUserDashboard/invoiceDistribution/InvoiceDistributionOverview.vue
+++ b/src/views/dashboards/superUserDashboard/invoiceDistribution/InvoiceDistributionOverview.vue
@@ -209,7 +209,7 @@ onMounted(() => {
       icon-pack="fas"
       class="mb-0"
     >
-      <div class="fallback-note">
+      <div class="fallback-note" data-testid="distribution-overview-legacy-fallback-warning">
         <p>{{ t('superuser_invoice_distribution.warnings.legacy_distribution_fallback', { count: monthsUsingLegacyDistribution.length }) }}</p>
         <p v-if="latestDistributionFallbackReason" class="is-size-7">{{ latestDistributionFallbackReason }}</p>
       </div>
@@ -601,4 +601,3 @@ onMounted(() => {
   outline-offset: 2px;
 }
 </style>
-
diff --git a/src/views/dashboards/userDashboard/wash/MyWashStart.vue b/src/views/dashboards/userDashboard/wash/MyWashStart.vue
index b44ddc69..667c553a 100644
--- a/src/views/dashboards/userDashboard/wash/MyWashStart.vue
+++ b/src/views/dashboards/userDashboard/wash/MyWashStart.vue
@@ -1327,20 +1327,30 @@ refreshRecentlyCompletedWashState();
 
 const clearRecentCompletedRefreshTimeout = () => {
   if (recentCompletedRefreshTimeout.value !== null) {
-    window.clearTimeout(recentCompletedRefreshTimeout.value);
+    const timeoutId = recentCompletedRefreshTimeout.value;
+    if (typeof window !== "undefined") {
+      window.clearTimeout(timeoutId);
+    } else {
+      globalThis.clearTimeout(timeoutId);
+    }
     recentCompletedRefreshTimeout.value = null;
   }
 };
 
 const clearRecentCompletedRefreshInterval = () => {
   if (recentCompletedRefreshInterval.value !== null) {
-    window.clearInterval(recentCompletedRefreshInterval.value);
+    const intervalId = recentCompletedRefreshInterval.value;
+    if (typeof window !== "undefined") {
+      window.clearInterval(intervalId);
+    } else {
+      globalThis.clearInterval(intervalId);
+    }
     recentCompletedRefreshInterval.value = null;
   }
 };
 
 const scheduleRecentCompletedWashRefresh = (attempt = 0) => {
-  if (isMyWashStartUnmounted.value) {
+  if (isMyWashStartUnmounted.value || typeof window === "undefined") {
     return;
   }
 
@@ -1351,7 +1361,7 @@ const scheduleRecentCompletedWashRefresh = (attempt = 0) => {
   }
 
   recentCompletedRefreshTimeout.value = window.setTimeout(() => {
-    if (isMyWashStartUnmounted.value) {
+    if (isMyWashStartUnmounted.value || typeof window === "undefined") {
       return;
     }
 
@@ -1360,10 +1370,14 @@ const scheduleRecentCompletedWashRefresh = (attempt = 0) => {
 };
 
 const startRecentCompletedWashRefresh = () => {
+  if (typeof window === "undefined") {
+    return;
+  }
+
   clearRecentCompletedRefreshInterval();
 
   recentCompletedRefreshInterval.value = window.setInterval(() => {
-    if (isMyWashStartUnmounted.value) {
+    if (isMyWashStartUnmounted.value || typeof window === "undefined") {
       clearRecentCompletedRefreshInterval();
       return;
     }
diff --git a/tests/e2e/invoice-distribution.smoke.spec.js b/tests/e2e/invoice-distribution.smoke.spec.js
index 9d74510e..b816d0dd 100644
--- a/tests/e2e/invoice-distribution.smoke.spec.js
+++ b/tests/e2e/invoice-distribution.smoke.spec.js
@@ -1,6 +1,18 @@
 import { expect, test } from "@playwright/test";
 import { mockApi, primeMockSession } from "./support/network.js";
 
+const FALLBACK_WARNING_TIMEOUT_MS = 30_000;
+
+function currentUtcMonthStartIso() {
+  const now = new Date();
+  return new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 1, 0, 0, 0)).toISOString();
+}
+
+async function expectV2FallbackWarning(locator) {
+  await expect(locator).toBeVisible({ timeout: FALLBACK_WARNING_TIMEOUT_MS });
+  await expect(locator).toContainText(/v2/i, { timeout: FALLBACK_WARNING_TIMEOUT_MS });
+}
+
 async function suppressVueDevtoolsOverlay(page) {
   await page.addInitScript(() => {
     const STYLE_ID = "__e2e-hide-vue-devtools";
@@ -165,25 +177,24 @@ test.describe("Invoice distribution smoke", () => {
   });
 
   test("@smoke fallback mode keeps results and surfaces warning banners", async ({ page }) => {
+    test.setTimeout(90_000);
+
     await prepareInvoiceDistributionPage(page, {
+      invoiceDistributionFirstOrderDate: currentUtcMonthStartIso(),
       invoiceDistributionForceLegacyFallback: true,
       invoiceDistributionForceCompareFallback: true,
     });
 
     await gotoInvoiceDistribution(page, "/superuser/invoices?activeTab=distribution");
-    await expect(page.locator(".message.is-warning").filter({ hasText: /v2/i }).first()).toBeVisible({
-      timeout: 15_000,
-    });
+    await expect(page.getByTestId("distribution-overview-page")).toBeVisible({ timeout: 15_000 });
+    await expectV2FallbackWarning(page.getByTestId("distribution-overview-legacy-fallback-warning"));
 
     await gotoInvoiceDistribution(page, "/superuser/invoices/distribution/2026/3/compare?compareMode=line_by_line");
-    await expect(page.locator(".message.is-warning").filter({ hasText: /v2/i }).first()).toBeVisible({
-      timeout: 15_000,
-    });
+    await expect(page.getByTestId("distribution-month-tabs")).toBeVisible({ timeout: 15_000 });
+    await expectV2FallbackWarning(page.getByTestId("distribution-month-legacy-fallback-warning"));
 
     await page.getByTestId("distribution-compare-submit").click();
     await expect(page.getByTestId("distribution-compare-table")).toBeVisible({ timeout: 15_000 });
-    await expect(page.locator(".message.is-warning").filter({ hasText: /v2/i }).first()).toBeVisible({
-      timeout: 15_000,
-    });
+    await expectV2FallbackWarning(page.getByTestId("distribution-compare-legacy-fallback-warning"));
   });
 });
diff --git a/tests/e2e/limited-backoffice.spec.ts b/tests/e2e/limited-backoffice.spec.ts
index a14b3930..182c3d74 100644
--- a/tests/e2e/limited-backoffice.spec.ts
+++ b/tests/e2e/limited-backoffice.spec.ts
@@ -82,6 +82,35 @@ const pricePayload = {
   ],
 };
 
+const cloneJson = <T>(value: T): T => JSON.parse(JSON.stringify(value));
+
+const applyPriceRowsToPayload = (
+  payload: typeof pricePayload,
+  priceRows: Array<{ product_id: number; price: number | string }>
+) => {
+  const updatedPayload = cloneJson(payload);
+  const priceLookup = new Map(priceRows.map((row) => [Number(row.product_id), Number(row.price)]));
+
+  for (const category of updatedPayload.categories) {
+    for (const product of category.products) {
+      if (priceLookup.has(Number(product.id))) {
+        product.price = priceLookup.get(Number(product.id)) ?? product.price;
+      }
+    }
+  }
+
+  return updatedPayload;
+};
+
+const deferred = () => {
+  let resolve!: () => void;
+  const promise = new Promise<void>((resolvePromise) => {
+    resolve = resolvePromise;
+  });
+
+  return { promise, resolve };
+};
+
 const rolePermissionGroups = {
   viewer: [{ key: "account", capabilities: ["sign_in", "view_own_permissions"] }],
   cashier: [
@@ -230,14 +259,15 @@ async function seedLimitedBackofficeSession(page, token = "limited-backoffice-to
   await seedAuthenticatedState(page, token);
 }
 
-const cloneJson = <T>(value: T): T => JSON.parse(JSON.stringify(value));
-
 async function mockLimitedBackofficeApi(page, authSessionData = sessionData, options: any = {}) {
   const calls: string[] = [];
   const forbiddenCalls: string[] = [];
   const priceUpdateCalls: unknown[] = [];
   const employeeCreateCalls: unknown[] = [];
   const employeeUpdateCalls: unknown[] = [];
+  const currentPricePayload = {
+    value: cloneJson(options.pricePayload ?? pricePayload),
+  };
   const currentEmployees = {
     value: cloneJson(options.employeesPayload ?? employeesPayload),
   };
@@ -291,13 +321,26 @@ async function mockLimitedBackofficeApi(page, authSessionData = sessionData, opt
     }
 
     if (pathname.endsWith("/limited-backoffice/departments/1/prices") && method === "GET") {
-      await route.fulfill(json({ data: pricePayload }));
+      await route.fulfill(json({ data: currentPricePayload.value }));
       return;
     }
 
     if (pathname.endsWith("/limited-backoffice/departments/1/prices") && method === "PUT") {
-      priceUpdateCalls.push(request.postDataJSON?.() || null);
-      await route.fulfill(json({ data: pricePayload }));
+      const body = request.postDataJSON?.() || null;
+      priceUpdateCalls.push(body);
+
+      if (typeof options.onPriceUpdate === "function") {
+        await options.onPriceUpdate({
+          route,
+          request,
+          body,
+          currentPricePayload,
+        });
+        return;
+      }
+
+      currentPricePayload.value = applyPriceRowsToPayload(currentPricePayload.value, body?.prices || []);
+      await route.fulfill(json({ data: currentPricePayload.value }));
       return;
     }
 
@@ -400,9 +443,7 @@ test.describe("Limited backoffice", () => {
     await expect(page.getByTestId("desktop-buefy-navigation").locator('a[href="/backoffice"]:visible')).toHaveCount(0);
   });
 
-  test("limits price management to assigned departments and explicit prices", async ({ page }, testInfo) => {
-    test.skip(!isDesktopProject(testInfo), "Desktop only");
-
+  test("limits price management to assigned departments and explicit prices", async ({ page }) => {
     await seedLimitedBackofficeSession(page);
     const api = await mockLimitedBackofficeApi(page);
 
@@ -419,15 +460,138 @@ test.describe("Limited backoffice", () => {
     await expect(page.locator("body")).not.toContainText("department_access_1");
     await expect(page.locator("body")).not.toContainText("limited_backoffice_prices_manage");
 
-    await expect(page.getByTestId("limited-prices-save")).toBeEnabled();
+    await expect(page.getByTestId("limited-prices-save")).toHaveCount(0);
+    await expect(page.getByTestId("limited-prices-autosave-status")).toContainText(/saved/i);
     await page.getByTestId("limited-price-input-101").fill("");
-    await expect(page.getByTestId("limited-prices-save")).toBeDisabled();
     await expect(page.getByTestId("limited-price-validation")).toBeVisible();
+    await page.waitForTimeout(700);
 
     expect(api.priceUpdateCalls).toEqual([]);
     expect(api.forbiddenCalls).toEqual([]);
   });
 
+  test("autosaves valid price changes after a typing pause without blur", async ({ page }) => {
+    await seedLimitedBackofficeSession(page);
+    const api = await mockLimitedBackofficeApi(page);
+
+    await page.goto("/backoffice/departments/1/prices");
+
+    const priceInput = page.getByTestId("limited-price-input-101");
+    await expect(priceInput).toHaveValue("125");
+
+    await priceInput.fill("130");
+
+    await expect(page.getByTestId("limited-prices-autosave-status")).toContainText(/pending/i);
+    await expect.poll(() => api.priceUpdateCalls.length).toBe(1);
+    await expect(priceInput).toBeFocused();
+    expect(api.priceUpdateCalls[0]).toEqual({
+      prices: [
+        { product_id: 101, price: "130" },
+        { product_id: 102, price: "95" },
+      ],
+    });
+    await expect(page.getByTestId("limited-prices-autosave-status")).toContainText(/saved/i);
+  });
+
+  test("flushes a valid pending price change on blur", async ({ page }) => {
+    await seedLimitedBackofficeSession(page);
+    const api = await mockLimitedBackofficeApi(page);
+
+    await page.goto("/backoffice/departments/1/prices");
+
+    const priceInput = page.getByTestId("limited-price-input-101");
+    await priceInput.fill("133");
+    await priceInput.blur();
+
+    await expect.poll(() => api.priceUpdateCalls.length).toBe(1);
+    expect(api.priceUpdateCalls[0]).toEqual({
+      prices: [
+        { product_id: 101, price: "133" },
+        { product_id: 102, price: "95" },
+      ],
+    });
+  });
+
+  test("keeps newer edits when an older autosave response resolves late", async ({ page }) => {
+    const firstSave = deferred();
+    let saveCount = 0;
+
+    await seedLimitedBackofficeSession(page);
+    const api = await mockLimitedBackofficeApi(page, sessionData, {
+      onPriceUpdate: async ({ route, body, currentPricePayload }) => {
+        saveCount += 1;
+
+        if (saveCount === 1) {
+          await firstSave.promise;
+          await route.fulfill(json({ data: pricePayload }));
+          return;
+        }
+
+        currentPricePayload.value = applyPriceRowsToPayload(currentPricePayload.value, body?.prices || []);
+        await route.fulfill(json({ data: currentPricePayload.value }));
+      },
+    });
+
+    await page.goto("/backoffice/departments/1/prices");
+
+    const priceInput = page.getByTestId("limited-price-input-101");
+    await priceInput.fill("130");
+    await expect.poll(() => api.priceUpdateCalls.length).toBe(1);
+
+    await priceInput.fill("140");
+    await page.waitForTimeout(700);
+    expect(api.priceUpdateCalls.length).toBe(1);
+
+    firstSave.resolve();
+
+    await expect.poll(() => api.priceUpdateCalls.length).toBe(2);
+    await expect(priceInput).toHaveValue("140");
+    expect(api.priceUpdateCalls[1]).toEqual({
+      prices: [
+        { product_id: 101, price: "140" },
+        { product_id: 102, price: "95" },
+      ],
+    });
+  });
+
+  test("keeps failed autosaves dirty and retries on the next valid edit", async ({ page }) => {
+    let shouldFail = true;
+
+    await seedLimitedBackofficeSession(page);
+    const api = await mockLimitedBackofficeApi(page, sessionData, {
+      onPriceUpdate: async ({ route, body, currentPricePayload }) => {
+        if (shouldFail) {
+          shouldFail = false;
+          await route.fulfill(json({ message: "Price save failed" }, 422));
+          return;
+        }
+
+        currentPricePayload.value = applyPriceRowsToPayload(currentPricePayload.value, body?.prices || []);
+        await route.fulfill(json({ data: currentPricePayload.value }));
+      },
+    });
+
+    await page.goto("/backoffice/departments/1/prices");
+
+    const priceInput = page.getByTestId("limited-price-input-101");
+    await priceInput.fill("130");
+    await expect.poll(() => api.priceUpdateCalls.length).toBe(1);
+    await expect(page.getByTestId("limited-prices-error")).toContainText("Price save failed");
+    await expect(page.getByTestId("limited-prices-autosave-status")).toContainText(/pending/i);
+
+    await priceInput.fill("131");
+
+    await expect.poll(() => api.priceUpdateCalls.length).toBe(2);
+    await expect(page.getByTestId("limited-prices-error")).toHaveCount(0);
+    await expect(page.getByTestId("limited-prices-autosave-status")).toContainText(/saved/i);
+    expect(api.priceUpdateCalls[1]).toEqual({
+      prices: [
+        { product_id: 101, price: "131" },
+        { product_id: 102, price: "95" },
+      ],
+    });
+  });
+
   test("shows only limited role presets in employee access", async ({ page }, testInfo) => {
     test.skip(!isDesktopProject(testInfo), "Desktop only");
 
diff --git a/tests/e2e/support/network.js b/tests/e2e/support/network.js
index e25c4a8c..e2c7eb3c 100644
--- a/tests/e2e/support/network.js
+++ b/tests/e2e/support/network.js
@@ -6783,6 +6783,11 @@ export async function mockApi(page, options = {}) {
       const monthFromDate = parsedUrl.searchParams.get("dateFrom");
       const monthNumber = monthFromDate ? Number(monthFromDate.split("-")[1]) : 1;
       const monthBase = Number.isFinite(monthNumber) ? monthNumber * 10 : 10;
+      const firstOrderCreatedAt =
+        typeof options.invoiceDistributionFirstOrderDate === "string" &&
+        options.invoiceDistributionFirstOrderDate.trim()
+          ? options.invoiceDistributionFirstOrderDate
+          : "2026-01-01T00:00:00.000Z";
       const forceDistributionLegacy = Boolean(options.invoiceDistributionForceLegacyFallback);
       const forceCompareLegacy = Boolean(options.invoiceDistributionForceCompareFallback);
 
@@ -6792,7 +6797,7 @@ export async function mockApi(page, options = {}) {
             data: [
               {
                 id: 1,
-                created_at: "2026-01-01T00:00:00.000Z",
+                created_at: firstOrderCreatedAt,
               },
             ],
           })
diff --git a/tests/unit/playwright-pr-mapping.spec.js b/tests/unit/playwright-pr-mapping.spec.js
index 6232cb2b..e96d8db2 100644
--- a/tests/unit/playwright-pr-mapping.spec.js
+++ b/tests/unit/playwright-pr-mapping.spec.js
@@ -39,6 +39,15 @@ describe("Playwright PR mapping", () => {
     ).toContain("tests/e2e/admin-department-notifications.spec.ts");
   });
 
+  it("maps limited backoffice view changes to limited backoffice E2E coverage", () => {
+    expect(specsFor("src/views/backoffice/LimitedBackofficePrices.vue")).toContain(
+      "tests/e2e/limited-backoffice.spec.ts"
+    );
+    expect(specsFor("src/views/backoffice/components/LimitedBackofficeLayout.vue")).toContain(
+      "tests/e2e/limited-backoffice.spec.ts"
+    );
+  });
+
   it("maps superuser role permission page changes to role permissions E2E coverage", () => {
     expect(specsFor("src/views/dashboards/superUserDashboard/roles/SuperUserRolesPermissions.vue")).toContain(
       "tests/e2e/superuser-roles-permissions.spec.ts"

From 04860a7304ff145767468f479643fc41aae0e8e1 Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Mon, 6 Jul 2026 16:28:08 +0200
Subject: [PATCH 17/19] Deduplicate limited backoffice price products

---
 .../backoffice/LimitedBackofficePrices.vue    | 40 ++++++++++++++---
 tests/e2e/limited-backoffice.spec.ts          | 45 +++++++++++++++++++
 2 files changed, 80 insertions(+), 5 deletions(-)

diff --git a/src/views/backoffice/LimitedBackofficePrices.vue b/src/views/backoffice/LimitedBackofficePrices.vue
index dd067777..56383a4e 100644
--- a/src/views/backoffice/LimitedBackofficePrices.vue
+++ b/src/views/backoffice/LimitedBackofficePrices.vue
@@ -59,9 +59,6 @@ const invalidPriceCount = computed(
   () => products.value.filter((product) => !isPriceValueValid(formPrices.value[product.id])).length
 );
 
-const productsFromPayload = (payload) =>
-  (Array.isArray(payload?.categories) ? payload.categories : []).flatMap((category) => category.products || []);
-
 const buildFormPricesFromPayload = (payload) =>
   productsFromPayload(payload).reduce((prices, product) => {
     prices[product.id] = product.price === null || product.price === undefined ? "" : String(product.price);
@@ -146,6 +143,39 @@ const clearPendingAutosave = () => {
   }
 };
 
+const deduplicateCategoryProducts = (categoryList) => {
+  const seenProductIds = new Set();
+
+  return (Array.isArray(categoryList) ? categoryList : []).map((category) => ({
+    ...category,
+    products: (Array.isArray(category.products) ? category.products : []).filter((product) => {
+      const productId = Number(product?.id);
+      if (!Number.isInteger(productId) || productId <= 0) {
+        return true;
+      }
+      if (seenProductIds.has(productId)) {
+        return false;
+      }
+      seenProductIds.add(productId);
+      return true;
+    }),
+  }));
+};
+
+const normalizePriceData = (payload) => {
+  if (!payload || typeof payload !== "object") {
+    return payload;
+  }
+
+  return {
+    ...payload,
+    categories: deduplicateCategoryProducts(payload.categories),
+  };
+};
+
+const productsFromPayload = (payload) =>
+  deduplicateCategoryProducts(payload?.categories).flatMap((category) => category.products || []);
+
 const loadDepartments = async () => {
   loadingDepartments.value = true;
   errorMessage.value = "";
@@ -193,7 +223,7 @@ const loadPrices = async () => {
       return;
     }
 
-    const payload = unwrapLimitedBackofficeResponse(response) || null;
+    const payload = normalizePriceData(unwrapLimitedBackofficeResponse(response) || null);
     hydratePriceState(payload);
   } catch (error) {
     if (loadSequence !== nextLoadSequence) {
@@ -273,7 +303,7 @@ const savePrices = async () => {
 
   try {
     const response = await updateLimitedBackofficeDepartmentPrices(departmentId, requestedRows);
-    const updatedPayload = unwrapLimitedBackofficeResponse(response) || null;
+    const updatedPayload = normalizePriceData(unwrapLimitedBackofficeResponse(response) || null);
 
     if (selectedDepartmentId.value === departmentId && saveSequence >= lastAppliedSaveSequence) {
       lastAppliedSaveSequence = saveSequence;
diff --git a/tests/e2e/limited-backoffice.spec.ts b/tests/e2e/limited-backoffice.spec.ts
index 182c3d74..0ac0010f 100644
--- a/tests/e2e/limited-backoffice.spec.ts
+++ b/tests/e2e/limited-backoffice.spec.ts
@@ -82,6 +82,20 @@ const pricePayload = {
   ],
 };
 
+const duplicatePricePayload = {
+  ...pricePayload,
+  categories: [
+    {
+      ...pricePayload.categories[0],
+      products: [
+        pricePayload.categories[0].products[0],
+        { ...pricePayload.categories[0].products[0], price: 999 },
+        pricePayload.categories[0].products[1],
+      ],
+    },
+  ],
+};
+
 const cloneJson = <T>(value: T): T => JSON.parse(JSON.stringify(value));
 
 const applyPriceRowsToPayload = (
@@ -592,6 +606,37 @@ test.describe("Limited backoffice", () => {
     });
   });
 
+  test("deduplicates repeated products in the price configuration", async ({ page }, testInfo) => {
+    test.skip(!isDesktopProject(testInfo), "Desktop only");
+
+    await seedLimitedBackofficeSession(page);
+    const api = await mockLimitedBackofficeApi(page, sessionData, { pricePayload: duplicatePricePayload });
+
+    await page.goto("/backoffice/departments/1/prices");
+
+    await expect(page.getByTestId("limited-price-row-101")).toHaveCount(1);
+    await expect(page.getByTestId("limited-price-row-102")).toHaveCount(1);
+    await expect(page.getByTestId("limited-price-input-101")).toHaveValue("125");
+
+    await page.getByTestId("limited-price-input-101").fill("130");
+
+    await expect.poll(() => api.priceUpdateCalls.length).toBe(1);
+    expect(api.priceUpdateCalls[0]).toEqual({
+      prices: [
+        { product_id: 101, price: "130" },
+        { product_id: 102, price: "95" },
+      ],
+    });
+    expect(api.priceUpdateCalls[0]).not.toEqual({
+      prices: [
+        { product_id: 101, price: "130" },
+        { product_id: 101, price: "130" },
+        { product_id: 102, price: "95" },
+      ],
+    });
+    expect(api.forbiddenCalls).toEqual([]);
+  });
+
   test("shows only limited role presets in employee access", async ({ page }, testInfo) => {
     test.skip(!isDesktopProject(testInfo), "Desktop only");
 

From db1c0e25c08b5f95272c3065f50dfb36d9e6b236 Mon Sep 17 00:00:00 2001
From: Jeppe B <2jepp9350@gmail.com>
Date: Mon, 6 Jul 2026 16:47:33 +0200
Subject: [PATCH 18/19] Move limited backoffice shortcut into header (#140)

* Move limited backoffice shortcut into header

* Use shared Playwright port locks in CI

---------

Co-authored-by: Jeppe Bundgaard <jb@truckwash.dk>
---
 .github/workflows/tests.yml                   |  6 +-
 scripts/playwright-pr-mapping.mjs             |  9 ++
 .../items/NavigationMenuItemsGlobal.vue       |  7 --
 .../viewport/page/headers/DesktopHeader.vue   | 18 +---
 .../page/headers/HeaderAccessShortcuts.vue    | 99 +++++++++++++++++++
 .../viewport/page/headers/TabletHeader.vue    | 18 +---
 .../viewport/page/headers/headerShortcuts.js  | 31 ++++++
 tests/e2e/limited-backoffice.spec.ts          | 83 +++++++++++++---
 tests/unit/header-shortcuts.spec.js           | 35 +++++++
 tests/unit/playwright-full-workflow.spec.js   |  8 ++
 tests/unit/playwright-pr-mapping.spec.js      |  9 ++
 11 files changed, 266 insertions(+), 57 deletions(-)
 create mode 100644 src/components/viewport/page/headers/HeaderAccessShortcuts.vue
 create mode 100644 src/components/viewport/page/headers/headerShortcuts.js
 create mode 100644 tests/unit/header-shortcuts.spec.js

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index e7bd7a47..3aadba9a 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -189,8 +189,9 @@ jobs:
             *) echo "Unsupported Playwright PR project: $MATRIX_PROJECT" >&2; exit 1 ;;
           esac
           port_seed=$((20000 + (RUN_ID % 20000) + suite_offset + project_offset))
-          lock_root="${RUNNER_TEMP:-/tmp}/pleno-playwright-port-locks"
+          lock_root="${PLAYWRIGHT_PORT_LOCK_ROOT:-/tmp/pleno-playwright-port-locks}"
           mkdir -p "$lock_root"
+          chmod 1777 "$lock_root" 2>/dev/null || true
           find "$lock_root" -mindepth 1 -maxdepth 1 -type d -mmin +360 -exec rmdir {} \; 2>/dev/null || true
           playwright_port_lock=""
           playwright_dev_port=""
@@ -367,8 +368,9 @@ jobs:
             *) echo "Unsupported Playwright device: $MATRIX_DEVICE" >&2; exit 1 ;;
           esac
           port_seed=$((20000 + (RUN_ID % 20000) + role_offset + browser_offset + device_offset))
-          lock_root="${RUNNER_TEMP:-/tmp}/pleno-playwright-port-locks"
+          lock_root="${PLAYWRIGHT_PORT_LOCK_ROOT:-/tmp/pleno-playwright-port-locks}"
           mkdir -p "$lock_root"
+          chmod 1777 "$lock_root" 2>/dev/null || true
           find "$lock_root" -mindepth 1 -maxdepth 1 -type d -mmin +360 -exec rmdir {} \; 2>/dev/null || true
           playwright_port_lock=""
           playwright_dev_port=""
diff --git a/scripts/playwright-pr-mapping.mjs b/scripts/playwright-pr-mapping.mjs
index a125ed3d..10526a0b 100644
--- a/scripts/playwright-pr-mapping.mjs
+++ b/scripts/playwright-pr-mapping.mjs
@@ -53,6 +53,15 @@ export const sourceMappings = [
     specs: ["tests/e2e/superuser-department-overview.spec.js"],
     projects: chromiumProjects,
   },
+  {
+    name: "header-navigation",
+    patterns: [
+      /^src\/components\/viewport\/page\/headers\//u,
+      /^src\/components\/models\/navigation\/items\/NavigationMenuItemsGlobal\.vue$/u,
+    ],
+    specs: ["tests/e2e/navigation.smoke.spec.js", "tests/e2e/limited-backoffice.spec.ts"],
+    projects: chromiumProjects,
+  },
   {
     name: "booking",
     patterns: [/bookings?/iu, /time-bookings/iu, /^src\/views\/guest\/book\//u],
diff --git a/src/components/models/navigation/items/NavigationMenuItemsGlobal.vue b/src/components/models/navigation/items/NavigationMenuItemsGlobal.vue
index 2e00de84..fba05361 100644
--- a/src/components/models/navigation/items/NavigationMenuItemsGlobal.vue
+++ b/src/components/models/navigation/items/NavigationMenuItemsGlobal.vue
@@ -75,13 +75,6 @@ const items = computed<NavigationItemProps[]>(() => [
    *     ]
    *   }
    */
-  {
-    label: t('templates.limited_backoffice.title'),
-    to: `/backoffice`,
-    type: 'link',
-    permissions: ['limited_backoffice_access'],
-    hidden: hasPermission('superuser'),
-  },
   {
     label: t('common.settings'),
     to: `/user/profile`,
diff --git a/src/components/viewport/page/headers/DesktopHeader.vue b/src/components/viewport/page/headers/DesktopHeader.vue
index d67bd093..da2dc8f9 100644
--- a/src/components/viewport/page/headers/DesktopHeader.vue
+++ b/src/components/viewport/page/headers/DesktopHeader.vue
@@ -6,9 +6,8 @@ import CollectedInvoiceQueueMonitor from "@/components/viewport/page/headers/men
 import SubuserGrantSelector from "@/components/session/subuser/SubuserGrantSelector.vue";
 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();
+import HeaderAccessShortcuts from "@/components/viewport/page/headers/HeaderAccessShortcuts.vue";
 const isAuthenticatedSessionReady = computed(() => SessionUser.isInitiated() && SessionUser.authenticated.value);
 </script>
 
@@ -41,20 +40,7 @@ const isAuthenticatedSessionReady = computed(() => SessionUser.isInitiated() &&
       <!-- User account name and avatar (Desktop) -->
       <div class="navbar-item mr-1">
         <div class="buttons">
-          <!-- Back-Office button -->
-          <router-link class="button is-white" to="/superuser" v-if="SessionUser.canAccessSuperUser() && !route.path.includes('/superuser')">
-            <span class="icon">
-              <i class="fas fa-tools" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
-            </span>
-            <span>{{ $t('header.backoffice') }}</span>
-          </router-link>
-          <!-- Department button -->
-          <router-link class="button is-white" to="/admin" v-if="SessionUser.canAccessAdmin() && !route.path.includes('/admin')">
-            <span class="icon">
-              <i class="fas fa-building" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
-            </span>
-            <span>{{ $t('common.departments') }}</span>
-          </router-link>
+          <HeaderAccessShortcuts />
           <!-- Return to own account if impersonating -->
           <template v-if="SessionUser.hasSuperUserToken()">
             <router-link class="button is-white" to="/auth/return">
diff --git a/src/components/viewport/page/headers/HeaderAccessShortcuts.vue b/src/components/viewport/page/headers/HeaderAccessShortcuts.vue
new file mode 100644
index 00000000..97874430
--- /dev/null
+++ b/src/components/viewport/page/headers/HeaderAccessShortcuts.vue
@@ -0,0 +1,99 @@
+<script setup>
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { IS_DEV } from "@/config.js";
+import SessionUser from "@/components/session/token/SessionUser.vue";
+import {
+  getAdminDepartmentIdFromRoute,
+  getAdminDepartmentRoute,
+  getLimitedBackofficeDepartmentIdFromRoute,
+  getLimitedBackofficeDepartmentRoute,
+} from "@/components/viewport/page/headers/headerShortcuts.js";
+
+const route = useRoute();
+const { t } = useI18n({ useScope: "global" });
+
+const adminDepartmentId = computed(() => getAdminDepartmentIdFromRoute(route));
+const backofficeDepartmentId = computed(() => getLimitedBackofficeDepartmentIdFromRoute(route));
+
+const canAccessDepartment = (departmentId) =>
+  Number.isInteger(departmentId) && departmentId > 0 && SessionUser.canAccessDepartment(departmentId);
+
+const canShowSuperuserBackoffice = computed(
+  () => SessionUser.canAccessSuperUser() && !route.path.includes("/superuser")
+);
+
+const canShowLimitedBackoffice = computed(() => {
+  const departmentId = adminDepartmentId.value;
+
+  return (
+    canAccessDepartment(departmentId) &&
+    SessionUser.hasPermission("limited_backoffice_access") &&
+    !SessionUser.canAccessSuperUser()
+  );
+});
+
+const limitedBackofficeTarget = computed(() => getLimitedBackofficeDepartmentRoute(adminDepartmentId.value));
+
+const adminShortcutTarget = computed(() =>
+  backofficeDepartmentId.value ? getAdminDepartmentRoute(backofficeDepartmentId.value) : "/admin"
+);
+
+const canShowAdminShortcut = computed(() => {
+  if (!SessionUser.canAccessAdmin() || route.path.includes("/admin")) {
+    return false;
+  }
+
+  const departmentId = backofficeDepartmentId.value;
+  return departmentId === null || canAccessDepartment(departmentId);
+});
+</script>
+
+<template>
+  <router-link
+    v-if="canShowSuperuserBackoffice"
+    class="button is-white"
+    to="/superuser"
+    data-testid="superuser-backoffice-header-button"
+  >
+    <span class="icon">
+      <i class="fas fa-tools" :class="{ 'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV }"></i>
+    </span>
+    <span>{{ t("header.backoffice") }}</span>
+  </router-link>
+
+  <router-link
+    v-if="canShowLimitedBackoffice"
+    class="button is-white"
+    :to="limitedBackofficeTarget"
+    data-testid="limited-backoffice-header-button"
+  >
+    <span class="icon">
+      <i class="fas fa-tools" :class="{ 'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV }"></i>
+    </span>
+    <span>{{ t("templates.limited_backoffice.title") }}</span>
+  </router-link>
+
+  <router-link
+    v-if="canShowAdminShortcut"
+    class="button is-white"
+    :to="adminShortcutTarget"
+    data-testid="admin-header-button"
+  >
+    <span class="icon">
+      <i class="fas fa-building" :class="{ 'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV }"></i>
+    </span>
+    <span>{{ t("common.departments") }}</span>
+  </router-link>
+</template>
+
+<style scoped>
+.transform-color-black {
+  filter: invert(100%) grayscale(100%) brightness(0) contrast(100%);
+}
+
+.transform-color-red {
+  filter: invert(27%) sepia(96%) saturate(7493%) hue-rotate(357deg) brightness(103%) contrast(101%);
+}
+</style>
diff --git a/src/components/viewport/page/headers/TabletHeader.vue b/src/components/viewport/page/headers/TabletHeader.vue
index 9fd4d627..b2d99e59 100644
--- a/src/components/viewport/page/headers/TabletHeader.vue
+++ b/src/components/viewport/page/headers/TabletHeader.vue
@@ -5,9 +5,8 @@ import NavigationMenuGlobalSearch from "@/components/viewport/page/headers/menu/
 import CollectedInvoiceQueueMonitor from "@/components/viewport/page/headers/menu/CollectedInvoiceQueueMonitor.vue";
 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();
+import HeaderAccessShortcuts from "@/components/viewport/page/headers/HeaderAccessShortcuts.vue";
 const isAuthenticatedSessionReady = computed(() => SessionUser.isInitiated() && SessionUser.authenticated.value);
 </script>
 
@@ -41,20 +40,7 @@ const isAuthenticatedSessionReady = computed(() => SessionUser.isInitiated() &&
       <!-- User account name and avatar (Desktop) -->
       <div class="navbar-item mr-1">
         <div class="buttons">
-          <!-- Back-Office button -->
-          <router-link class="button is-white" to="/superuser" v-if="SessionUser.canAccessSuperUser() && !route.path.includes('/superuser')">
-            <span class="icon">
-              <i class="fas fa-tools" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
-            </span>
-            <span>{{ $t('header.backoffice') }}</span>
-          </router-link>
-          <!-- Department button -->
-          <router-link class="button is-white" to="/admin" v-if="SessionUser.canAccessAdmin() && !route.path.includes('/admin')">
-            <span class="icon">
-              <i class="fas fa-building" :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
-            </span>
-            <span>{{ $t('common.departments') }}</span>
-          </router-link>
+          <HeaderAccessShortcuts />
           <!-- Return to own account if impersonating -->
           <template v-if="SessionUser.hasSuperUserToken()">
             <router-link class="button is-white" to="/auth/return">
diff --git a/src/components/viewport/page/headers/headerShortcuts.js b/src/components/viewport/page/headers/headerShortcuts.js
new file mode 100644
index 00000000..9e31cd28
--- /dev/null
+++ b/src/components/viewport/page/headers/headerShortcuts.js
@@ -0,0 +1,31 @@
+const parsePositiveInteger = (value) => {
+  const parsedValue = Number.parseInt(String(value ?? ""), 10);
+  return Number.isInteger(parsedValue) && parsedValue > 0 ? parsedValue : null;
+};
+
+const getPath = (route) => String(route?.path ?? "");
+
+export const getAdminDepartmentIdFromRoute = (route) => {
+  const path = getPath(route);
+  const fromPath = parsePositiveInteger(path.match(/^\/admin\/(\d+)(?:\/|$)/)?.[1]);
+  if (fromPath !== null) {
+    return fromPath;
+  }
+
+  return path.startsWith("/admin") ? parsePositiveInteger(route?.params?.departmentId) : null;
+};
+
+export const getLimitedBackofficeDepartmentIdFromRoute = (route) => {
+  const path = getPath(route);
+  const fromPath = parsePositiveInteger(path.match(/^\/backoffice\/departments\/(\d+)(?:\/|$)/)?.[1]);
+  if (fromPath !== null) {
+    return fromPath;
+  }
+
+  return path.startsWith("/backoffice/departments") ? parsePositiveInteger(route?.params?.departmentId) : null;
+};
+
+export const getLimitedBackofficeDepartmentRoute = (departmentId) =>
+  `/backoffice/departments/${encodeURIComponent(String(departmentId))}/prices`;
+
+export const getAdminDepartmentRoute = (departmentId) => `/admin/${encodeURIComponent(String(departmentId))}`;
diff --git a/tests/e2e/limited-backoffice.spec.ts b/tests/e2e/limited-backoffice.spec.ts
index 0ac0010f..ea978b5a 100644
--- a/tests/e2e/limited-backoffice.spec.ts
+++ b/tests/e2e/limited-backoffice.spec.ts
@@ -53,6 +53,15 @@ const superuserSessionData = {
   permissions: ["user", "superuser", "limited_backoffice_access", "department_access_1"],
 };
 
+const adminLimitedSessionData = {
+  ...sessionData,
+  id: 52,
+  customer_number: 12347,
+  email: "admin-manager@example.com",
+  display_name: "Admin Manager",
+  permissions: ["user", "admin", "limited_backoffice_access", "department_access_1"],
+};
+
 const assignedDepartments = [{ id: 1, name: "Assigned Depot", description: "", visible: true, archived: false }];
 
 const pricePayload = {
@@ -430,7 +439,63 @@ async function mockLimitedBackofficeApi(page, authSessionData = sessionData, opt
 }
 
 test.describe("Limited backoffice", () => {
-  test("shows the limited backoffice desktop nav item without an icon for limited managers", async ({
+  test("shows the limited backoffice header shortcut only on department-scoped admin pages", async ({
+    page,
+  }, testInfo) => {
+    test.skip(!isDesktopProject(testInfo), "Desktop only");
+
+    await seedLimitedBackofficeSession(page);
+    await mockLimitedBackofficeApi(page);
+
+    await page.goto("/admin/1");
+
+    const desktopNavigation = page.getByTestId("desktop-buefy-navigation");
+    const backofficeNavItem = desktopNavigation.locator('a[href="/backoffice"]:visible');
+    const headerShortcut = page.getByTestId("limited-backoffice-header-button");
+
+    await expect(backofficeNavItem).toHaveCount(0);
+    await expect(headerShortcut).toBeVisible();
+    await expect(headerShortcut).toHaveAttribute("href", "/backoffice/departments/1/prices");
+    await expect(headerShortcut).toContainText("Backoffice");
+    await expect(headerShortcut.locator(".icon i.fas.fa-tools")).toHaveCount(1);
+
+    await page.goto("/admin");
+
+    await expect(page.getByTestId("limited-backoffice-header-button")).toHaveCount(0);
+  });
+
+  test("hides the limited backoffice header shortcut for superusers", async ({ page }, testInfo) => {
+    test.skip(!isDesktopProject(testInfo), "Desktop only");
+
+    await seedLimitedBackofficeSession(page, "limited-backoffice-superuser-token");
+    await mockLimitedBackofficeApi(page, superuserSessionData);
+
+    await page.goto("/admin/1");
+
+    await expect(page.getByTestId("desktop-buefy-navigation").locator('a[href="/backoffice"]:visible')).toHaveCount(0);
+    await expect(page.getByTestId("limited-backoffice-header-button")).toHaveCount(0);
+    await expect(page.getByTestId("superuser-backoffice-header-button")).toBeVisible();
+  });
+
+  test("links backoffice department pages to the matching admin department for admin-capable users", async ({
+    page,
+  }, testInfo) => {
+    test.skip(!isDesktopProject(testInfo), "Desktop only");
+
+    await seedLimitedBackofficeSession(page, "admin-limited-backoffice-token");
+    await mockLimitedBackofficeApi(page, adminLimitedSessionData);
+
+    await page.goto("/backoffice/departments/1/prices");
+
+    const adminShortcut = page.getByTestId("admin-header-button");
+
+    await expect(adminShortcut).toBeVisible();
+    await expect(adminShortcut).toHaveAttribute("href", "/admin/1");
+    await expect(adminShortcut).toContainText("Departments");
+    await expect(page.getByTestId("limited-backoffice-header-button")).toHaveCount(0);
+  });
+
+  test("does not show the admin shortcut on backoffice department pages for limited-only users", async ({
     page,
   }, testInfo) => {
     test.skip(!isDesktopProject(testInfo), "Desktop only");
@@ -440,21 +505,7 @@ test.describe("Limited backoffice", () => {
 
     await page.goto("/backoffice/departments/1/prices");
 
-    const backofficeNavItem = page.getByTestId("desktop-buefy-navigation").locator('a[href="/backoffice"]:visible');
-
-    await expect(backofficeNavItem).toHaveCount(1);
-    await expect(backofficeNavItem.locator(".icon, i, svg")).toHaveCount(0);
-  });
-
-  test("hides the limited backoffice desktop nav item for superusers", async ({ page }, testInfo) => {
-    test.skip(!isDesktopProject(testInfo), "Desktop only");
-
-    await seedLimitedBackofficeSession(page, "limited-backoffice-superuser-token");
-    await mockLimitedBackofficeApi(page, superuserSessionData);
-
-    await page.goto("/backoffice/departments/1/prices");
-
-    await expect(page.getByTestId("desktop-buefy-navigation").locator('a[href="/backoffice"]:visible')).toHaveCount(0);
+    await expect(page.getByTestId("admin-header-button")).toHaveCount(0);
   });
 
   test("limits price management to assigned departments and explicit prices", async ({ page }) => {
diff --git a/tests/unit/header-shortcuts.spec.js b/tests/unit/header-shortcuts.spec.js
new file mode 100644
index 00000000..7bfb4ebd
--- /dev/null
+++ b/tests/unit/header-shortcuts.spec.js
@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+import {
+  getAdminDepartmentIdFromRoute,
+  getAdminDepartmentRoute,
+  getLimitedBackofficeDepartmentIdFromRoute,
+  getLimitedBackofficeDepartmentRoute,
+} from "@/components/viewport/page/headers/headerShortcuts.js";
+
+describe("header shortcuts", () => {
+  it("detects department-scoped admin routes", () => {
+    expect(getAdminDepartmentIdFromRoute({ path: "/admin/12", params: {} })).toBe(12);
+    expect(getAdminDepartmentIdFromRoute({ path: "/admin/12/modules/pos", params: {} })).toBe(12);
+    expect(getAdminDepartmentIdFromRoute({ path: "/admin", params: { departmentId: 12 } })).toBe(12);
+    expect(getAdminDepartmentIdFromRoute({ path: "/admin", params: {} })).toBeNull();
+    expect(
+      getAdminDepartmentIdFromRoute({ path: "/backoffice/departments/12/prices", params: { departmentId: 12 } })
+    ).toBeNull();
+  });
+
+  it("detects department-scoped limited backoffice routes", () => {
+    expect(getLimitedBackofficeDepartmentIdFromRoute({ path: "/backoffice/departments/12/prices", params: {} })).toBe(
+      12
+    );
+    expect(getLimitedBackofficeDepartmentIdFromRoute({ path: "/backoffice/departments/12/other", params: {} })).toBe(
+      12
+    );
+    expect(getLimitedBackofficeDepartmentIdFromRoute({ path: "/backoffice", params: { departmentId: 12 } })).toBeNull();
+    expect(getLimitedBackofficeDepartmentIdFromRoute({ path: "/admin/12", params: { departmentId: 12 } })).toBeNull();
+  });
+
+  it("builds scoped shortcut targets", () => {
+    expect(getLimitedBackofficeDepartmentRoute(12)).toBe("/backoffice/departments/12/prices");
+    expect(getAdminDepartmentRoute(12)).toBe("/admin/12");
+  });
+});
diff --git a/tests/unit/playwright-full-workflow.spec.js b/tests/unit/playwright-full-workflow.spec.js
index a255c4a1..9b01fee9 100644
--- a/tests/unit/playwright-full-workflow.spec.js
+++ b/tests/unit/playwright-full-workflow.spec.js
@@ -50,6 +50,14 @@ describe("Playwright full E2E workflow grouping", () => {
     expect(source).toMatch(/e2e-pr:[\s\S]*?--env PLAYWRIGHT_VIDEO_MODE="\$PLAYWRIGHT_VIDEO_MODE"/u);
   });
 
+  it("uses a machine-wide Playwright port lock across self-hosted runner processes", () => {
+    const source = workflowSource();
+
+    expect(source.match(/PLAYWRIGHT_PORT_LOCK_ROOT:-\/tmp\/pleno-playwright-port-locks/gu)).toHaveLength(2);
+    expect(source.match(/chmod 1777 "\$lock_root"/gu)).toHaveLength(2);
+    expect(source).not.toContain("${RUNNER_TEMP:-/tmp}/pleno-playwright-port-locks");
+  });
+
   it("allows CI to reduce Playwright video artifact pressure", () => {
     const source = readFileSync(join(root, "playwright.config.ts"), "utf8");
 
diff --git a/tests/unit/playwright-pr-mapping.spec.js b/tests/unit/playwright-pr-mapping.spec.js
index e96d8db2..aa205fb5 100644
--- a/tests/unit/playwright-pr-mapping.spec.js
+++ b/tests/unit/playwright-pr-mapping.spec.js
@@ -68,4 +68,13 @@ describe("Playwright PR mapping", () => {
       "tests/e2e/limited-backoffice.spec.ts"
     );
   });
+
+  it("maps header navigation changes to limited backoffice E2E coverage", () => {
+    expect(specsFor("src/components/viewport/page/headers/HeaderAccessShortcuts.vue")).toContain(
+      "tests/e2e/limited-backoffice.spec.ts"
+    );
+    expect(specsFor("src/components/models/navigation/items/NavigationMenuItemsGlobal.vue")).toContain(
+      "tests/e2e/limited-backoffice.spec.ts"
+    );
+  });
 });

From 92a52d6194a8cef1126921acfec62ff1bb4d5d53 Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Mon, 6 Jul 2026 16:48:07 +0200
Subject: [PATCH 19/19] Gate subuser customer navigation and actions

---
 .../department/pos/orders/ordersTable.vue     | 18 +++--
 .../UserDashboard/BookingsPagination.vue      |  8 +-
 .../UserDashboard/OrderBookingsPagination.vue |  3 +-
 .../UserDashboard/VehiclesPagination.vue      |  5 +-
 .../displays/user/vehicles/vehiclesTable.vue  | 17 ++++-
 .../items/NavigationMenuItemsGlobal.vue       |  3 +-
 .../items/NavigationMenuItemsUser.vue         |  2 +-
 src/components/session/token/SessionUser.vue  | 76 +++++++++++++++++++
 .../page/headers/DesktopNavigationBuefy.vue   |  6 +-
 .../page/headers/menu/NavigationMenuItem.vue  | 27 ++++---
 src/views/dashboards/UserDashboard.vue        | 20 ++---
 .../UserDashboardPageWrapper.vue              | 58 +++++++++++---
 .../userDashboard/bookings/MyBookings.vue     |  9 ++-
 .../userDashboard/bookings/MyBookingsBook.vue |  7 +-
 .../bookings/MyBookingsLegacy.vue             |  9 ++-
 .../userDashboard/bookings/MyBookingsNew.vue  |  9 ++-
 .../displays/tables/OrderBookingsTable.vue    |  5 +-
 .../userDashboard/invoices/MyInvoices.vue     |  9 ++-
 .../userDashboard/materials/MyMaterials.vue   |  9 ++-
 .../userDashboard/orders/MyOrder.vue          | 10 ++-
 .../userDashboard/orders/MyOrders.vue         | 10 ++-
 .../userDashboard/vehicles/MyVehicle.vue      |  9 ++-
 .../userDashboard/vehicles/MyVehicles.vue     |  9 ++-
 .../userDashboard/vehicles/NewVehicle.vue     | 14 +++-
 .../dashboards/userDashboard/wash/MyWash.vue  |  7 +-
 .../userDashboard/wash/MyWashStart.vue        |  7 +-
 ...avigation-menu-items-user-subusers.spec.js | 12 +++
 tests/unit/session-bootstrap.spec.js          | 39 ++++++++++
 28 files changed, 335 insertions(+), 82 deletions(-)

diff --git a/src/components/displays/department/pos/orders/ordersTable.vue b/src/components/displays/department/pos/orders/ordersTable.vue
index 626ab6ad..3e1b0b8c 100644
--- a/src/components/displays/department/pos/orders/ordersTable.vue
+++ b/src/components/displays/department/pos/orders/ordersTable.vue
@@ -817,6 +817,10 @@ const isDraftAssignmentModalOpen = computed(() => {
 });
 
 const canEditTransaction = (order) => {
+  if (props.isCustomerView) {
+    return SessionUser.canAccessCustomerFeature("orders", "edit");
+  }
+
   return SessionUser.canAccessAdmin() || SessionUser.canAccessDepartment(order.department_id);
 };
 
@@ -1259,7 +1263,7 @@ const formatCashierName = (order) => {
                 :hover-text="order.reference"
                 :parse-function="(value) => truncateOrderField(value, 10)"
                 :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-                :permission-check-function="() => true"
+                :permission-check-function="() => canEditTransaction(order)"
               />
               <EditableTableColumn
                 :object="order"
@@ -1278,7 +1282,7 @@ const formatCashierName = (order) => {
                 :hover-text="order.po"
                 :parse-function="(value) => truncateOrderField(value, 10)"
                 :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-                :permission-check-function="() => canSeePoField() || SessionUser.canAccessAdmin()"
+                :permission-check-function="() => canEditTransaction(order)"
               />
               <td>{{ order.created_at }}</td>
               <td>{{ SessionUser.functions.currency.toLocal(order.total_net_amount) }}</td>
@@ -1774,7 +1778,7 @@ const formatCashierName = (order) => {
                                 :hover-text="order.reference"
                                 :parse-function="(value) => truncateOrderField(value, 20)"
                                 :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-                                :permission-check-function="() => true"
+                                :permission-check-function="() => canEditTransaction(order)"
                               />
                             </small>
                           </div>
@@ -1818,7 +1822,7 @@ const formatCashierName = (order) => {
                                 :hover-text="order.po"
                                 :parse-function="(value) => truncateOrderField(value, 20)"
                                 :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-                                :permission-check-function="() => canSeePoField() || SessionUser.canAccessAdmin()"
+                                :permission-check-function="() => canEditTransaction(order)"
                               />
                             </small>
                           </div>
@@ -1863,7 +1867,7 @@ const formatCashierName = (order) => {
                                       :hover-text="order.reg_1"
                                       :parse-function="(value) => truncateOrderField(value, 20)"
                                       :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-                                      :permission-check-function="() => true"
+                                      :permission-check-function="() => canEditTransaction(order)"
                                     />
                                   </small>
                                 </div>
@@ -1895,7 +1899,7 @@ const formatCashierName = (order) => {
                                       :hover-text="order.reg_2"
                                       :parse-function="(value) => truncateOrderField(value, 20)"
                                       :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-                                      :permission-check-function="() => true"
+                                      :permission-check-function="() => canEditTransaction(order)"
                                     />
                                   </small>
                                 </div>
@@ -1927,7 +1931,7 @@ const formatCashierName = (order) => {
                                       :hover-text="order.reg_3"
                                       :parse-function="(value) => truncateOrderField(value, 20)"
                                       :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-                                      :permission-check-function="() => true"
+                                      :permission-check-function="() => canEditTransaction(order)"
                                     />
                                   </small>
                                 </div>
diff --git a/src/components/displays/pagination/models/UserDashboard/BookingsPagination.vue b/src/components/displays/pagination/models/UserDashboard/BookingsPagination.vue
index d47793bb..3b09fb0f 100644
--- a/src/components/displays/pagination/models/UserDashboard/BookingsPagination.vue
+++ b/src/components/displays/pagination/models/UserDashboard/BookingsPagination.vue
@@ -24,7 +24,7 @@ import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue"
 import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
 import BookingsTable from "@/components/displays/user/bookings/bookingsTable.vue";
 import {departments} from "@/components/pagination/departmentTabs.vue";
-import {ref, watch} from "vue";
+import {computed, ref, watch} from "vue";
 import { Colors } from "@/ThemeConfig.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { useI18n } from 'vue-i18n'
@@ -32,6 +32,8 @@ import { todayLocalDateOnly } from "@/services/dateOnly.js";
 
 const { t } = useI18n()
 const router = useRouter();
+const isUserRoute = computed(() => router.currentRoute.value.path.startsWith("/user"));
+const canCreateBooking = computed(() => SessionUser.canAccessCustomerFeature("bookings", "add"));
 
 // Set the selected status to all
 const selectedStatus = ref("*");
@@ -148,7 +150,7 @@ const showNewOrderBookingsPortal = () => {
       </div>
       <div class="column is-auto-fill my-3" v-if="!isSmall"/>
       <!-- Only show the bookings for today (Switch, if the route is /user) -->
-      <div class="column is-narrow my-3" v-if="router.currentRoute.value.path.startsWith('/user')" :class="{ 'has-text-right': !isSmall }">
+      <div class="column is-narrow my-3" v-if="isUserRoute" :class="{ 'has-text-right': !isSmall }">
         <label class="label">{{ isSmall ? t('common.today') : t('pagination.show_only_today') }}</label>
         <div class="control">
           <div class="field">
@@ -158,7 +160,7 @@ const showNewOrderBookingsPortal = () => {
         </div>
       </div>
       <!-- Create a new booking, if the route is /user -->
-      <div class="column is-narrow my-3" v-if="router.currentRoute.value.path.startsWith('/user')" :class="{ 'has-text-right': !isSmall }">
+      <div class="column is-narrow my-3" v-if="isUserRoute && canCreateBooking" :class="{ 'has-text-right': !isSmall }">
         <button
             class="button is-link"
             @click="SessionUser.functions.redirectTo.external('/user/bookings/new', true)"
diff --git a/src/components/displays/pagination/models/UserDashboard/OrderBookingsPagination.vue b/src/components/displays/pagination/models/UserDashboard/OrderBookingsPagination.vue
index 46336b15..d67fab0a 100644
--- a/src/components/displays/pagination/models/UserDashboard/OrderBookingsPagination.vue
+++ b/src/components/displays/pagination/models/UserDashboard/OrderBookingsPagination.vue
@@ -17,6 +17,7 @@ const { t } = useI18n();
 const router = useRouter();
 const isUserRoute = computed(() => router.currentRoute.value.path.startsWith("/user"));
 const isAdminRoute = computed(() => router.currentRoute.value.path.startsWith("/admin"));
+const canCreateBooking = computed(() => SessionUser.canAccessCustomerFeature("bookings", "add"));
 /**
  * Props
  */
@@ -202,7 +203,7 @@ onMounted(() => {
                 <label for="today"></label>
               </div>
             </div>
-            <div class="order-bookings-pagination__new-booking-action">
+            <div class="order-bookings-pagination__new-booking-action" v-if="canCreateBooking">
               <label class="label is-small order-bookings-pagination__desktop-spacer">&nbsp;</label>
               <button
                 class="button is-link button-same-width"
diff --git a/src/components/displays/pagination/models/UserDashboard/VehiclesPagination.vue b/src/components/displays/pagination/models/UserDashboard/VehiclesPagination.vue
index 723d688d..856aa752 100644
--- a/src/components/displays/pagination/models/UserDashboard/VehiclesPagination.vue
+++ b/src/components/displays/pagination/models/UserDashboard/VehiclesPagination.vue
@@ -8,6 +8,7 @@ import {
 import {SessionUser} from "@/components/session/token/SessionUser.vue";
 import { useRouter } from "vue-router";
 import VehiclesTable from "@/components/displays/user/vehicles/vehiclesTable.vue";
+import { computed } from "vue";
 
 import PaginationDisplayFilters from "@/components/displays/pagination/PaginationDisplayFilters.vue";
 import {Colors} from "@/ThemeConfig.vue";
@@ -20,6 +21,8 @@ const { t } = useI18n();
  * Router
  */
 const router = useRouter();
+const isUserRoute = computed(() => router.currentRoute.value.path.startsWith("/user"));
+const canAddVehicle = computed(() => SessionUser.canAccessCustomerFeature("vehicles", "add"));
 
 const props = defineProps({
   customer_id: {
@@ -58,7 +61,7 @@ loadList();
           </div>
           <!-- Create a new vehicle, if the route is /user -->
           <div class="vehicles-pagination__add-action"
-               v-if="router.currentRoute.value.path.startsWith('/user')">
+               v-if="isUserRoute && canAddVehicle">
             <label class="label is-small">&nbsp;</label>
             <button
                 class="button is-link button-same-width vehicles-pagination__add-button"
diff --git a/src/components/displays/user/vehicles/vehiclesTable.vue b/src/components/displays/user/vehicles/vehiclesTable.vue
index 3f68620c..d15cbbdc 100644
--- a/src/components/displays/user/vehicles/vehiclesTable.vue
+++ b/src/components/displays/user/vehicles/vehiclesTable.vue
@@ -45,6 +45,11 @@ const reload = () => {
   }
 };
 
+const canViewVehicle = () => SessionUser.canAccessCustomerFeature("vehicles", "list");
+const canEditVehicle = () => SessionUser.canAccessCustomerFeature("vehicles", "edit");
+const canDeleteVehicle = () => SessionUser.canAccessCustomerFeature("vehicles", "delete");
+const canShowVehicleRowActions = () => canViewVehicle() || canDeleteVehicle();
+
 const redirectUserVehiclePage = (vehicleId) => {
   // Send the user to the vehicle page
   window.location.href = `/user/vehicles/${vehicleId}`;
@@ -146,6 +151,7 @@ const getProductOptionsLabel = (vehicle) => {
               :object="object"
               :loadList="reload"
               :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
+              :permission-check-function="canEditVehicle"
               column="reg"
             />
             <!-- Type -->
@@ -153,6 +159,7 @@ const getProductOptionsLabel = (vehicle) => {
               :object="object"
               :loadList="reload"
               :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
+              :permission-check-function="canEditVehicle"
               column="type"
               :parse-function="
                 (value) => {
@@ -165,6 +172,7 @@ const getProductOptionsLabel = (vehicle) => {
               :object="object"
               :loadList="reload"
               :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
+              :permission-check-function="canEditVehicle"
               column="wash_subscription"
               :parse-function="
                 (value) => {
@@ -174,7 +182,7 @@ const getProductOptionsLabel = (vehicle) => {
             />
             <!-- Product Options, if the wash subscription is set to true -->
             <td v-if="!props.compact">
-              <template v-if="object.wash_subscription">
+              <template v-if="object.wash_subscription && canEditVehicle()">
                 <!-- Enabled subscription -->
                 <ActionSettingsWheelButton
                   :label="getProductOptionsLabel(object)"
@@ -218,13 +226,14 @@ const getProductOptionsLabel = (vehicle) => {
               :object="object"
               :loadList="reload"
               :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
+              :permission-check-function="canEditVehicle"
               column="reference"
             />
             <!-- Actions -->
-            <td>
+            <td v-if="!props.compact">
               <!-- Actions stay grouped behind the wheel menu. -->
               <ActionSettingsWheelButton
-                v-if="!props.compact"
+                v-if="canShowVehicleRowActions()"
                 :user_id="object.user_id"
                 :reg_1="object.reg"
                 :displayActionsDirectly="false"
@@ -232,12 +241,14 @@ const getProductOptionsLabel = (vehicle) => {
                 <template #actions>
                   <!-- View (Redirect to the vehicle page) -->
                   <ActionSettingsWheelItem
+                    v-if="canViewVehicle()"
                     :label="$t('global.manage') + ' ' + $t('objects.vehicles.single')"
                     icon="fas fa-eye"
                     :click-action="() => redirectUserVehiclePage(object.id)"
                   />
                   <!-- Delete -->
                   <ActionSettingsWheelItem
+                    v-if="canDeleteVehicle()"
                     :label="$t('global.delete') + ' ' + $t('objects.vehicles.single')"
                     icon="fas fa-trash"
                     :template="'danger'"
diff --git a/src/components/models/navigation/items/NavigationMenuItemsGlobal.vue b/src/components/models/navigation/items/NavigationMenuItemsGlobal.vue
index fba05361..0530df50 100644
--- a/src/components/models/navigation/items/NavigationMenuItemsGlobal.vue
+++ b/src/components/models/navigation/items/NavigationMenuItemsGlobal.vue
@@ -79,8 +79,7 @@ const items = computed<NavigationItemProps[]>(() => [
     label: t('common.settings'),
     to: `/user/profile`,
     type: 'link',
-    permissions: ['user'],
-    hidden: !window.location.pathname.startsWith('/user')
+    hidden: !window.location.pathname.startsWith('/user') || !SessionUser.authenticated.value
   },
   {
     label: t('common.logout'),
diff --git a/src/components/models/navigation/items/NavigationMenuItemsUser.vue b/src/components/models/navigation/items/NavigationMenuItemsUser.vue
index 83ea605f..1b6383ae 100644
--- a/src/components/models/navigation/items/NavigationMenuItemsUser.vue
+++ b/src/components/models/navigation/items/NavigationMenuItemsUser.vue
@@ -51,7 +51,7 @@ const items = computed<NavigationItemProps[]>(() => [
     to: `/user`,
     type: 'link',
     // Dashboard visible to regular users and all subusers (subusers always have at least one grant)
-    permissions: ['user', 'BOOKINGS_LIST', 'ORDERS_LIST', 'VEHICLES_LIST', 'SELFSERVE_LIST', 'SUBUSERS_LIST'],
+    permissions: ['user', 'BOOKINGS_LIST', 'BOOKINGS_ADD', 'ORDERS_LIST', 'VEHICLES_LIST', 'VEHICLES_ADD', 'SELFSERVE_LIST', 'SUBUSERS_LIST'],
   },
   {
     label: t('common.vehicles'),
diff --git a/src/components/session/token/SessionUser.vue b/src/components/session/token/SessionUser.vue
index 738ead69..6f4b073b 100644
--- a/src/components/session/token/SessionUser.vue
+++ b/src/components/session/token/SessionUser.vue
@@ -89,6 +89,66 @@ const SUBUSER_MANAGEMENT_PERMISSIONS = {
   },
 };
 
+const CUSTOMER_FEATURE_PERMISSIONS = {
+  vehicles: {
+    list: {
+      customer: ["user", "list_own_vehicles"],
+      subuser: ["VEHICLES_LIST"],
+    },
+    add: {
+      customer: ["user", "add_vehicle"],
+      subuser: ["VEHICLES_ADD"],
+    },
+    edit: {
+      customer: ["edit_vehicle", "add_vehicle"],
+      subuser: ["VEHICLES_EDIT"],
+    },
+    delete: {
+      customer: ["delete_vehicle"],
+      subuser: ["VEHICLES_DELETE"],
+    },
+  },
+  bookings: {
+    list: {
+      customer: ["user", "list_own_bookings"],
+      subuser: ["BOOKINGS_LIST"],
+    },
+    add: {
+      customer: ["user"],
+      subuser: ["BOOKINGS_ADD"],
+    },
+    edit: {
+      customer: ["edit_own_bookings"],
+      subuser: ["BOOKINGS_EDIT"],
+    },
+    delete: {
+      customer: ["delete_own_bookings"],
+      subuser: ["BOOKINGS_DELETE"],
+    },
+  },
+  orders: {
+    list: {
+      customer: ["user", "list_own_orders"],
+      subuser: ["ORDERS_LIST"],
+    },
+    edit: {
+      customer: ["edit_own_orders"],
+      subuser: ["ORDERS_EDIT"],
+    },
+  },
+  selfserve: {
+    list: {
+      customer: ["user", "list_own_department_selfserve_vehicle_conditions"],
+      subuser: ["SELFSERVE_LIST"],
+    },
+    add: {
+      customer: ["add_own_department_selfserve_vehicle_conditions"],
+      subuser: ["SELFSERVE_ADD"],
+    },
+  },
+  subusers: SUBUSER_MANAGEMENT_PERMISSIONS,
+};
+
 const getStoredSessionSnapshot = () => {
   if (typeof window === "undefined") {
     return null;
@@ -858,6 +918,13 @@ export const SessionUser = {
     }
     return SessionUser.permissions.value.includes(permission) || SessionUser.permissions.value.includes("superuser");
   },
+  hasAnyPermission: (permissions = []) => {
+    const permissionList = Array.isArray(permissions) ? permissions : [permissions].filter(Boolean);
+    if (permissionList.length === 0) {
+      return true;
+    }
+    return permissionList.some((permission) => SessionUser.hasPermission(permission));
+  },
   /** Can access shortcuts */
   canAccessAdmin: () => {
     return SessionUser.hasPermission("admin") || SessionUser.hasPermission("superuser");
@@ -877,6 +944,15 @@ export const SessionUser = {
       ? SessionUser.hasPermission(permissions.subuser)
       : SessionUser.hasPermission(permissions.customer);
   },
+  canAccessCustomerFeature: (feature, action = "list") => {
+    const permissions = CUSTOMER_FEATURE_PERMISSIONS[feature]?.[action];
+    if (!permissions) {
+      return false;
+    }
+
+    const permissionList = SessionUser.isSubuser.value ? permissions.subuser : permissions.customer;
+    return SessionUser.hasAnyPermission(permissionList);
+  },
   canAccessDepartment: (id = 0) => {
     return SessionUser.hasPermission("department_access_" + parseInt(id)) || SessionUser.canAccessSuperUser();
   },
diff --git a/src/components/viewport/page/headers/DesktopNavigationBuefy.vue b/src/components/viewport/page/headers/DesktopNavigationBuefy.vue
index a190db6e..bcf096dd 100644
--- a/src/components/viewport/page/headers/DesktopNavigationBuefy.vue
+++ b/src/components/viewport/page/headers/DesktopNavigationBuefy.vue
@@ -63,11 +63,7 @@ const navigationItems = computed<NavigationMenuItem[]>(() => {
 });
 
 const hasPermission = (item: NavigationMenuItem) => {
-  if (!item.permissions?.length) {
-    return true;
-  }
-
-  return item.permissions.some((permission) => SessionUser.hasPermission(permission));
+  return SessionUser.hasAnyPermission(item.permissions ?? []);
 };
 
 const isItemVisible = (item: NavigationMenuItem) => !item.hidden && hasPermission(item);
diff --git a/src/components/viewport/page/headers/menu/NavigationMenuItem.vue b/src/components/viewport/page/headers/menu/NavigationMenuItem.vue
index a0ba12bc..7b1ca2ac 100644
--- a/src/components/viewport/page/headers/menu/NavigationMenuItem.vue
+++ b/src/components/viewport/page/headers/menu/NavigationMenuItem.vue
@@ -43,23 +43,24 @@ const redirect = async (to: string) => {
   }
 };
 // Permissions and visibility logic
-const hasPermission = (permission: string) => {
-  return SessionUser.hasPermission(permission);
-}
-
 const hasDepartmentIdInPath = (path: string) => {
   const departmentRegex = /\/admin\/\d+/;
   return departmentRegex.test(path);
 }
 
+const hasItemPermissions = (item: any) => {
+  return SessionUser.hasAnyPermission(item?.permissions ?? []);
+}
+
 const hasPermissions = computed(() => {
-  if (!props.item.permissions || props.item.permissions.length === 0) {
-    return true; // No permissions required, item is visible
-  }
-  return props.item.permissions.some(hasPermission);
+  return hasItemPermissions(props.item);
 });
 
 const isVisible = () => {
+  if (props.item.hidden) {
+    return false;
+  }
+
   switch (props.item.type) {
     case 'category':
       // Check if any child item is visible
@@ -96,10 +97,14 @@ const hasChildren = computed(() => {
 });
 
 const isChildVisible = (child: any) => {
-  if (child.type === 'department') {
-    return hasPermissions.value && hasDepartmentIdInPath(router.currentRoute.value.path);
+  if (child.hidden) {
+    return false;
   }
-  return hasPermissions.value;
+
+  if (child.type === 'department') {
+    return hasItemPermissions(child) && hasDepartmentIdInPath(router.currentRoute.value.path);
+  }
+  return hasItemPermissions(child);
 }
 
 const hasVisibleChildren = computed(() => {
diff --git a/src/views/dashboards/UserDashboard.vue b/src/views/dashboards/UserDashboard.vue
index 354536a1..8799ada5 100644
--- a/src/views/dashboards/UserDashboard.vue
+++ b/src/views/dashboards/UserDashboard.vue
@@ -62,17 +62,19 @@ const hasAnyShortcutPermission = computed(() => {
   
   // Check if subuser has any of the shortcut permissions
   return (
-    SessionUser.hasPermission('BOOKINGS_ADD') ||
-    SessionUser.hasPermission('VEHICLES_ADD') ||
-    SessionUser.hasPermission('ORDERS_LIST') ||
-    SessionUser.hasPermission('SELFSERVE_ADD')
+    SessionUser.canAccessCustomerFeature("bookings", "add") ||
+    SessionUser.canAccessCustomerFeature("vehicles", "add") ||
+    SessionUser.canAccessCustomerFeature("orders", "list") ||
+    SessionUser.canAccessCustomerFeature("selfserve", "list") ||
+    SessionUser.canManageSubusers("list")
   );
 });
 
 const canShowClassicCustomerShortcut = () => !isSubuser.value && SessionUser.hasPermission('user');
-const canShowBookingShortcut = computed(() => canShowClassicCustomerShortcut() || SessionUser.hasPermission('BOOKINGS_ADD'));
-const canShowVehicleShortcut = computed(() => canShowClassicCustomerShortcut() || SessionUser.hasPermission('VEHICLES_ADD'));
-const canShowOrderShortcut = computed(() => canShowClassicCustomerShortcut() || SessionUser.hasPermission('ORDERS_LIST'));
+const canShowBookingShortcut = computed(() => SessionUser.canAccessCustomerFeature("bookings", "add"));
+const canShowVehicleShortcut = computed(() => SessionUser.canAccessCustomerFeature("vehicles", "add"));
+const canShowOrderShortcut = computed(() => SessionUser.canAccessCustomerFeature("orders", "list"));
+const canShowSelfServeShortcut = computed(() => SessionUser.canAccessCustomerFeature("selfserve", "list"));
 const canShowInvoiceShortcut = computed(() => canShowClassicCustomerShortcut());
 
 const windowInnerWidth = ref(window.innerWidth);
@@ -167,7 +169,7 @@ const isPermissionsLoading = computed(() => {
           {{ $t('messages.welcome') }} {{ SessionUser.getName() }}
         </span>
       </div>
-      <div class="column is-half-desktop is-hidden-desktop is-12-tablet">
+      <div class="column is-half-desktop is-hidden-desktop is-12-tablet" v-if="canShowSelfServeShortcut">
         <!-- Start wash card -->
         <WhiteBoxCard :force-state="true" :defaultOpen="true" :toggleable="false" :loading="false">
           <template #header>
@@ -237,7 +239,7 @@ const isPermissionsLoading = computed(() => {
           </template>
           <template #footer>
             <div class="card-footer-item">
-              <router-link to="/user/vehicles" class="button is-link is-fullwidth" :class="classes.button" id="add-vehicle-button">
+              <router-link to="/user/vehicles/new" class="button is-link is-fullwidth" :class="classes.button" id="add-vehicle-button">
                 {{ $t('user_home.create_vehicle') }}
               </router-link>
             </div>
diff --git a/src/views/dashboards/userDashboard/UserDashboardPageWrapper.vue b/src/views/dashboards/userDashboard/UserDashboardPageWrapper.vue
index b6c48947..121c0304 100644
--- a/src/views/dashboards/userDashboard/UserDashboardPageWrapper.vue
+++ b/src/views/dashboards/userDashboard/UserDashboardPageWrapper.vue
@@ -1,6 +1,30 @@
 <script setup>
+import { computed, useAttrs } from "vue";
 import DefaultPageWrapper from "@/views/dashboards/DefaultPageWrapper.vue";
 import UserLeftMenu from "@/components/menus/user/UserLeftMenu.vue";
+import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  requiredFeature: {
+    type: String,
+    default: null,
+  },
+  requiredAction: {
+    type: String,
+    default: "list",
+  },
+  hasPermission: {
+    type: [Boolean, Function],
+    default: null,
+  },
+});
+
+const attrs = useAttrs();
 const defaultSlots = [
   { name: 'header' },
   { name: 'buttons' },
@@ -9,20 +33,34 @@ const defaultSlots = [
   { name: 'without-formatting' },
 ]
 
+const resolvedHasPermission = computed(() => {
+  if (props.hasPermission !== null) {
+    return typeof props.hasPermission === "function" ? Boolean(props.hasPermission()) : Boolean(props.hasPermission);
+  }
+
+  if (!props.requiredFeature) {
+    return true;
+  }
+
+  return SessionUser.canAccessCustomerFeature(props.requiredFeature, props.requiredAction);
+});
+
 </script>
 
 <template>
-  <DefaultPageWrapper>
-    <template v-for="slot in defaultSlots" :key="slot.name">
-      <slot :name="slot.name"></slot>
-    </template>
-    <!-- Left menu -->
-    <template #left-menu>
-      <UserLeftMenu />
-    </template>
-  </DefaultPageWrapper>
+  <RestrictedPageWrapper :hasPermission="resolvedHasPermission">
+    <DefaultPageWrapper v-bind="attrs">
+      <template v-for="slot in defaultSlots" :key="slot.name">
+        <slot :name="slot.name"></slot>
+      </template>
+      <!-- Left menu -->
+      <template #left-menu>
+        <UserLeftMenu />
+      </template>
+    </DefaultPageWrapper>
+  </RestrictedPageWrapper>
 </template>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboards/userDashboard/bookings/MyBookings.vue b/src/views/dashboards/userDashboard/bookings/MyBookings.vue
index 5012f864..3901ba5f 100644
--- a/src/views/dashboards/userDashboard/bookings/MyBookings.vue
+++ b/src/views/dashboards/userDashboard/bookings/MyBookings.vue
@@ -6,7 +6,12 @@ import OrderBookingsPagination from "@/components/displays/pagination/models/Use
 
 <template>
   <div>
-    <UserDashboardPageWrapper :title="$t('user_dashboard.bookings.title')" :subtitle="$t('user_dashboard.bookings.subtitle')">
+    <UserDashboardPageWrapper
+      :title="$t('user_dashboard.bookings.title')"
+      :subtitle="$t('user_dashboard.bookings.subtitle')"
+      required-feature="bookings"
+      required-action="list"
+    >
       <OrderBookingsPagination :filters="{ only_today: true }"/>
       <!-- TODO: Complete implementation! -->
     </UserDashboardPageWrapper>
@@ -15,4 +20,4 @@ import OrderBookingsPagination from "@/components/displays/pagination/models/Use
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue b/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue
index 34f1d23f..3f0f1657 100644
--- a/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue
+++ b/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue
@@ -1877,7 +1877,12 @@ watch(customerNumber, (newVal) => {
         </div>
       </template>
     </ViewportResponsiveWrapper>
-    <UserDashboardPageWrapper :title="$t('user_dashboard.bookings.title')" :subtitle="$t('user_dashboard.bookings.book_subtitle')">
+    <UserDashboardPageWrapper
+      :title="$t('user_dashboard.bookings.title')"
+      :subtitle="$t('user_dashboard.bookings.book_subtitle')"
+      required-feature="bookings"
+      required-action="add"
+    >
 
       <template v-if="false">
       <!-- Debug -->
diff --git a/src/views/dashboards/userDashboard/bookings/MyBookingsLegacy.vue b/src/views/dashboards/userDashboard/bookings/MyBookingsLegacy.vue
index 8eefb048..dbdbf8c1 100644
--- a/src/views/dashboards/userDashboard/bookings/MyBookingsLegacy.vue
+++ b/src/views/dashboards/userDashboard/bookings/MyBookingsLegacy.vue
@@ -7,7 +7,12 @@ import OrderBookingsTable from "@/views/dashboards/userDashboard/bookings/displa
 
 <template>
   <div>
-    <UserDashboardPageWrapper :title="$t('user_dashboard.bookings.title')" :subtitle="$t('user_dashboard.bookings.subtitle')">
+    <UserDashboardPageWrapper
+      :title="$t('user_dashboard.bookings.title')"
+      :subtitle="$t('user_dashboard.bookings.subtitle')"
+      required-feature="bookings"
+      required-action="list"
+    >
       <BookingsPagination/>
       <!-- TODO: Complete implementation! -->
     </UserDashboardPageWrapper>
@@ -16,4 +21,4 @@ import OrderBookingsTable from "@/views/dashboards/userDashboard/bookings/displa
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboards/userDashboard/bookings/MyBookingsNew.vue b/src/views/dashboards/userDashboard/bookings/MyBookingsNew.vue
index e1b2a9ee..2fdccd56 100644
--- a/src/views/dashboards/userDashboard/bookings/MyBookingsNew.vue
+++ b/src/views/dashboards/userDashboard/bookings/MyBookingsNew.vue
@@ -7,7 +7,12 @@ import FormDisplay from "@/components/displays/FormDisplay.vue";
 
 <template>
   <div>
-    <UserDashboardPageWrapper :title="$t('user_dashboard.bookings.title')" :subtitle="$t('user_dashboard.bookings.book_subtitle')">
+    <UserDashboardPageWrapper
+      :title="$t('user_dashboard.bookings.title')"
+      :subtitle="$t('user_dashboard.bookings.book_subtitle')"
+      required-feature="bookings"
+      required-action="add"
+    >
       <FormDisplay :form_identifier="'BOOK_WASH'" />
     </UserDashboardPageWrapper>
   </div>
@@ -15,4 +20,4 @@ import FormDisplay from "@/components/displays/FormDisplay.vue";
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboards/userDashboard/bookings/displays/tables/OrderBookingsTable.vue b/src/views/dashboards/userDashboard/bookings/displays/tables/OrderBookingsTable.vue
index fd47e32b..f0ce4e30 100644
--- a/src/views/dashboards/userDashboard/bookings/displays/tables/OrderBookingsTable.vue
+++ b/src/views/dashboards/userDashboard/bookings/displays/tables/OrderBookingsTable.vue
@@ -162,13 +162,14 @@ const canEditBooking = (bookingobj) => {
   // Admins can always edit
   if (SessionUser.canAccessAdmin() && SessionUser.hasPermission("edit_bookings")) return true;
   if (!!bookingobj.order_id) return false; // Only allow editing bookings without an order
-  if (SessionUser.hasPermission("edit_own_bookings") && isOwnBooking(bookingobj)) return true;
+  if (SessionUser.canAccessCustomerFeature("bookings", "edit") && isOwnBooking(bookingobj)) return true;
+  return false;
 };
 
 const canDeleteBooking = (bookingobj) => {
   if (!!bookingobj.order_id) return false;
   if (SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()) return true;
-  return SessionUser.hasPermission("edit_own_bookings") && isOwnBooking(bookingobj);
+  return SessionUser.canAccessCustomerFeature("bookings", "delete") && isOwnBooking(bookingobj);
 };
 
 const sortedList = computed(() => {
diff --git a/src/views/dashboards/userDashboard/invoices/MyInvoices.vue b/src/views/dashboards/userDashboard/invoices/MyInvoices.vue
index 54202039..660e84c1 100644
--- a/src/views/dashboards/userDashboard/invoices/MyInvoices.vue
+++ b/src/views/dashboards/userDashboard/invoices/MyInvoices.vue
@@ -2,11 +2,16 @@
 
 import UserDashboardPageWrapper from "@/views/dashboards/userDashboard/UserDashboardPageWrapper.vue";
 import MyInvoicesPagination from "@/components/displays/pagination/models/UserDashboard/MyInvoicesPagination.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
 </script>
 
 <template>
   <div>
-    <UserDashboardPageWrapper :title="$t('user_dashboard.invoices.title')" :subtitle="$t('user_dashboard.invoices.subtitle')">
+    <UserDashboardPageWrapper
+      :title="$t('user_dashboard.invoices.title')"
+      :subtitle="$t('user_dashboard.invoices.subtitle')"
+      :has-permission="() => !SessionUser.isSubuser.value && SessionUser.hasPermission('user')"
+    >
       <MyInvoicesPagination />
     </UserDashboardPageWrapper>
   </div>
@@ -14,4 +19,4 @@ import MyInvoicesPagination from "@/components/displays/pagination/models/UserDa
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboards/userDashboard/materials/MyMaterials.vue b/src/views/dashboards/userDashboard/materials/MyMaterials.vue
index 166053da..cd4f08e7 100644
--- a/src/views/dashboards/userDashboard/materials/MyMaterials.vue
+++ b/src/views/dashboards/userDashboard/materials/MyMaterials.vue
@@ -6,6 +6,7 @@ import MyMaterialCard from "@/views/dashboards/userDashboard/materials/displays/
 //import MyInvoicesPagination from "@/components/displays/pagination/models/UserDashboard/MyInvoicesPagination.vue";
 import type { MaterialDepartmentStorageType } from "@/components/types/MaterialDepartmentStorageType.vue";
 import type { MaterialType } from "@/components/types/MaterialType.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
 
 const material = ref<MaterialType>({
   label: "Materialelager 1",
@@ -62,7 +63,11 @@ const material = ref<MaterialType>({
 
 <template>
   <div>
-    <UserDashboardPageWrapper :title="$t('user_dashboard.materials.title')" :subtitle="$t('user_dashboard.materials.subtitle')">
+    <UserDashboardPageWrapper
+      :title="$t('user_dashboard.materials.title')"
+      :subtitle="$t('user_dashboard.materials.subtitle')"
+      :has-permission="() => !SessionUser.isSubuser.value && SessionUser.hasPermission('user')"
+    >
       <MyMaterialCard
           v-bind:material
       />
@@ -72,4 +77,4 @@ const material = ref<MaterialType>({
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboards/userDashboard/orders/MyOrder.vue b/src/views/dashboards/userDashboard/orders/MyOrder.vue
index 4b1eec73..ede9057d 100644
--- a/src/views/dashboards/userDashboard/orders/MyOrder.vue
+++ b/src/views/dashboards/userDashboard/orders/MyOrder.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 
-import UserDashboardHero from "@/views/dashboards/userDashboard/UserDashboardHero.vue";
 import OrderItemsTable from "@/components/displays/department/pos/order/orderItemsTable.vue";
 import { useRouter} from "vue-router";
 import {ref, Component, computed } from "vue";
@@ -406,7 +405,12 @@ loadOrder();
 </script>
 
 <template>
-  <UserDashboardPageWrapper :title="$t('user_dashboard.orders.single_title') + ' ' + getOrderId()" :subtitle="$t('user_dashboard.orders.single_subtitle')">
+  <UserDashboardPageWrapper
+    :title="$t('user_dashboard.orders.single_title') + ' ' + getOrderId()"
+    :subtitle="$t('user_dashboard.orders.single_subtitle')"
+    required-feature="orders"
+    required-action="list"
+  >
     <template v-if="props.visibleComponents.warnings">
       <div class="message is-warning mt-2" v-if="!isLoading && !economicModuleOrders.invoice_draft_id && !economicModuleOrders.invoice_id">
         <div class="message-body">
@@ -439,7 +443,7 @@ loadOrder();
                 column="po"
                 :parse-function="(value) => order.po"
                 :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-                :permission-check-function="() => true"
+                :permission-check-function="() => SessionUser.canAccessCustomerFeature('orders', 'edit')"
                 :componentWrapper="'span'"
             />
             </p>
diff --git a/src/views/dashboards/userDashboard/orders/MyOrders.vue b/src/views/dashboards/userDashboard/orders/MyOrders.vue
index 3c52bbc2..3b0812f4 100644
--- a/src/views/dashboards/userDashboard/orders/MyOrders.vue
+++ b/src/views/dashboards/userDashboard/orders/MyOrders.vue
@@ -1,6 +1,5 @@
 <script setup>
 
-import UserDashboardHero from "@/views/dashboards/userDashboard/UserDashboardHero.vue";
 import OrdersPagination from "@/components/displays/pagination/models/UserDashboard/OrdersPagination.vue";
 import UserDashboardPageWrapper from "@/views/dashboards/userDashboard/UserDashboardPageWrapper.vue";
 import {SessionUser} from "@/components/session/token/SessionUser.vue";
@@ -9,7 +8,12 @@ import {SessionUser} from "@/components/session/token/SessionUser.vue";
 
 <template>
   <div>
-    <UserDashboardPageWrapper :title="$t('user_dashboard.orders.title')" :subtitle="$t('user_dashboard.orders.subtitle')">
+    <UserDashboardPageWrapper
+      :title="$t('user_dashboard.orders.title')"
+      :subtitle="$t('user_dashboard.orders.subtitle')"
+      required-feature="orders"
+      required-action="list"
+    >
       <template #default>
         <OrdersPagination :allowDropdownToShowOrderContent="SessionUser.hasAttribute('showPricesOnBookingPage')"/>
       </template>
@@ -19,4 +23,4 @@ import {SessionUser} from "@/components/session/token/SessionUser.vue";
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboards/userDashboard/vehicles/MyVehicle.vue b/src/views/dashboards/userDashboard/vehicles/MyVehicle.vue
index cba2d782..2c79654c 100644
--- a/src/views/dashboards/userDashboard/vehicles/MyVehicle.vue
+++ b/src/views/dashboards/userDashboard/vehicles/MyVehicle.vue
@@ -32,7 +32,12 @@ onMounted(() => {
 
 <template>
   <div>
-    <UserDashboardPageWrapper :title="$t('user_dashboard.vehicles.single_title')" :subtitle="$t('user_dashboard.vehicles.subtitle')" >
+    <UserDashboardPageWrapper
+      :title="$t('user_dashboard.vehicles.single_title')"
+      :subtitle="$t('user_dashboard.vehicles.subtitle')"
+      required-feature="vehicles"
+      required-action="list"
+    >
       <VehicleDisplay v-bind:vehicle="vehicle" v-if="vehicle" @reload="fetch" />
       <!--
       {{ SessionUser.user.customer_number.value }}
@@ -44,4 +49,4 @@ onMounted(() => {
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboards/userDashboard/vehicles/MyVehicles.vue b/src/views/dashboards/userDashboard/vehicles/MyVehicles.vue
index b03ffe0f..7309969e 100644
--- a/src/views/dashboards/userDashboard/vehicles/MyVehicles.vue
+++ b/src/views/dashboards/userDashboard/vehicles/MyVehicles.vue
@@ -7,7 +7,12 @@ import { SessionUser } from "@/components/session/token/SessionUser.vue";
 
 <template>
   <div>
-    <UserDashboardPageWrapper :title="$t('user_dashboard.vehicles.title')" :subtitle="$t('user_dashboard.vehicles.subtitle')" >
+    <UserDashboardPageWrapper
+      :title="$t('user_dashboard.vehicles.title')"
+      :subtitle="$t('user_dashboard.vehicles.subtitle')"
+      required-feature="vehicles"
+      required-action="list"
+    >
       <VehiclesPagination v-bind:customer_id="SessionUser.user.customer_number.value"/>
     </UserDashboardPageWrapper>
   </div>
@@ -15,4 +20,4 @@ import { SessionUser } from "@/components/session/token/SessionUser.vue";
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboards/userDashboard/vehicles/NewVehicle.vue b/src/views/dashboards/userDashboard/vehicles/NewVehicle.vue
index 1658d865..62b5cd91 100644
--- a/src/views/dashboards/userDashboard/vehicles/NewVehicle.vue
+++ b/src/views/dashboards/userDashboard/vehicles/NewVehicle.vue
@@ -1,16 +1,22 @@
 <script setup>
 import AddVehicleForm from "@/components/displays/user/vehicles/addVehicleForm.vue";
-import UserDashboardHero from "@/views/dashboards/userDashboard/UserDashboardHero.vue";
+import UserDashboardPageWrapper from "@/views/dashboards/userDashboard/UserDashboardPageWrapper.vue";
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 </script>
 
 <template>
-  <UserDashboardHero :title="t('user_vehicles.add_vehicle')" :subtitle="t('user_vehicles.add_vehicle_subtitle')" />
-  <AddVehicleForm />
+  <UserDashboardPageWrapper
+    :title="t('user_vehicles.add_vehicle')"
+    :subtitle="t('user_vehicles.add_vehicle_subtitle')"
+    required-feature="vehicles"
+    required-action="add"
+  >
+    <AddVehicleForm />
+  </UserDashboardPageWrapper>
 </template>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboards/userDashboard/wash/MyWash.vue b/src/views/dashboards/userDashboard/wash/MyWash.vue
index bc0443f5..1bdb4271 100644
--- a/src/views/dashboards/userDashboard/wash/MyWash.vue
+++ b/src/views/dashboards/userDashboard/wash/MyWash.vue
@@ -97,7 +97,12 @@ onMounted(async () => {
 </script>
 
 <template>
-  <UserDashboardPageWrapper :title="$t('user_dashboard.wash.title')" :subtitle="$t('user_dashboard.wash.subtitle')">
+  <UserDashboardPageWrapper
+    :title="$t('user_dashboard.wash.title')"
+    :subtitle="$t('user_dashboard.wash.subtitle')"
+    required-feature="selfserve"
+    required-action="list"
+  >
     <PosDepartmentStepMobile1Location @location-updated="evaluateLocationDepartments" />
     <div class="columns is-multiline" data-testid="self-serve-wash-home">
       <div class="column is-12">
diff --git a/src/views/dashboards/userDashboard/wash/MyWashStart.vue b/src/views/dashboards/userDashboard/wash/MyWashStart.vue
index 667c553a..7a2fb20f 100644
--- a/src/views/dashboards/userDashboard/wash/MyWashStart.vue
+++ b/src/views/dashboards/userDashboard/wash/MyWashStart.vue
@@ -2256,7 +2256,12 @@ watch(
 </script>
 
 <template>
-  <UserDashboardPageWrapper :title="$t('user_dashboard.wash.title')" :subtitle="$t('user_dashboard.wash.subtitle')">
+  <UserDashboardPageWrapper
+    :title="$t('user_dashboard.wash.title')"
+    :subtitle="$t('user_dashboard.wash.subtitle')"
+    required-feature="selfserve"
+    required-action="list"
+  >
     <PosDepartmentStepMobile1Location @location-updated="evaluateLocationDepartments" />
     <div class="columns is-multiline">
       <div class="column is-12">
diff --git a/tests/unit/navigation-menu-items-user-subusers.spec.js b/tests/unit/navigation-menu-items-user-subusers.spec.js
index 79bcc7f2..fde3e3d9 100644
--- a/tests/unit/navigation-menu-items-user-subusers.spec.js
+++ b/tests/unit/navigation-menu-items-user-subusers.spec.js
@@ -16,6 +16,10 @@ const superuserNavigationSource = readFileSync(
   join(root, "src/components/models/navigation/items/NavigationMenuItemsSuperUser.vue"),
   "utf8"
 ).replace(/\r\n/g, "\n");
+const navigationMenuItemSource = readFileSync(
+  join(root, "src/components/viewport/page/headers/menu/NavigationMenuItem.vue"),
+  "utf8"
+).replace(/\r\n/g, "\n");
 
 describe("Subusers navigation contract", () => {
   it("points the chauffører menu item to the subusers page", () => {
@@ -37,4 +41,12 @@ describe("Subusers navigation contract", () => {
     expect(subusersViewSource).toContain("SessionUser.canAccessSuperUser()");
     expect(subusersViewSource).toContain(":endpoint=\"isSuperuserPage ? '/superuser/subusers' : '/subusers'\"");
   });
+
+  it("checks child navigation permissions against the child item", () => {
+    expect(navigationMenuItemSource).toContain("return hasItemPermissions(child) && hasDepartmentIdInPath");
+    expect(navigationMenuItemSource).toContain("return hasItemPermissions(child);");
+    expect(navigationMenuItemSource).not.toContain(
+      "return hasPermissions.value && hasDepartmentIdInPath(router.currentRoute.value.path);\n  }\n  return hasPermissions.value;"
+    );
+  });
 });
diff --git a/tests/unit/session-bootstrap.spec.js b/tests/unit/session-bootstrap.spec.js
index 0c363c82..2cd95582 100644
--- a/tests/unit/session-bootstrap.spec.js
+++ b/tests/unit/session-bootstrap.spec.js
@@ -182,6 +182,45 @@ describe("session bootstrap failure handling", () => {
     expect(SessionUser.hasPermission("SUBUSERS_LIST")).toBe(true);
   });
 
+  it("maps regular customer feature actions through legacy customer permissions", () => {
+    SessionUser.auth.forceClearSession();
+    SessionUser.isSubuser.value = false;
+    SessionUser.permissions.value = ["user"];
+
+    expect(SessionUser.canAccessCustomerFeature("vehicles", "list")).toBe(true);
+    expect(SessionUser.canAccessCustomerFeature("vehicles", "add")).toBe(true);
+    expect(SessionUser.canAccessCustomerFeature("bookings", "add")).toBe(true);
+    expect(SessionUser.canAccessCustomerFeature("orders", "list")).toBe(true);
+    expect(SessionUser.canAccessCustomerFeature("vehicles", "delete")).toBe(false);
+  });
+
+  it("maps subuser feature actions through the selected grant only", () => {
+    SessionUser.auth.forceClearSession();
+    SessionUser.isSubuser.value = true;
+    SessionUser.permissions.value = ["BOOKINGS_ADD", "VEHICLES_DELETE"];
+    SessionUser.subuser.grants.value = [
+      {
+        billing_customer_number: 12345678,
+        permissions: ["BOOKINGS_ADD", "VEHICLES_LIST"],
+      },
+      {
+        billing_customer_number: 87654321,
+        permissions: ["VEHICLES_DELETE"],
+      },
+    ];
+
+    SessionUser.subuser.selectGrant(12345678);
+
+    expect(SessionUser.canAccessCustomerFeature("bookings", "add")).toBe(true);
+    expect(SessionUser.canAccessCustomerFeature("vehicles", "list")).toBe(true);
+    expect(SessionUser.canAccessCustomerFeature("vehicles", "delete")).toBe(false);
+
+    SessionUser.subuser.selectGrant(87654321);
+
+    expect(SessionUser.canAccessCustomerFeature("bookings", "add")).toBe(false);
+    expect(SessionUser.canAccessCustomerFeature("vehicles", "delete")).toBe(true);
+  });
+
   it("redirects invalid stored subuser sessions to driver login", async () => {
     seedStoredSession("invalid-subuser-token");
     localStorage.setItem("is_subuser", "true");