From c14f0cc1c402193ca97473a3f4286f26c8c13a8d Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Tue, 14 Apr 2026 10:09:10 +0200
Subject: [PATCH] Add utilities and tests for mobile order management and
 Subuser navigation:

- Introduced `mobileOrderCompletion.js` for mobile order metadata handling with safety seal syncing, metadata persistence, and booking linking utilities.
- Added tests for Subuser navigation menu (`navigation-menu-items-user-subusers.spec.js`) to validate links and permission gating.
- Created unit and end-to-end tests for Subuser grant permissions and management, including permission nodes and invites (`subuser-grant-permission-nodes.spec.js`, `subuser-management.spec.ts`).
- Implemented `SubuserCompleteRegistrationPage.vue` with validation, token handling, and registration flow for Subuser setup.
- Enhanced Playwright e2e tests for Subuser features (`subuserCompleteRegistration.spec.ts`).
---
 src/components/displays/Subusers.vue          |  50 +-
 .../department/pos/PosOrderItemsCurrent.vue   |   5 +
 .../pos/order/POSOrderCustomerWishes.vue      |  23 +-
 .../pos/steps/PosDepartmentStep1.vue          |  73 ++-
 .../PosDesktopOrderBookingSelectorModal.vue   | 427 ++++++++++++++--
 .../steps/mobile/PosDepartmentStepMobile2.vue |  99 +++-
 .../steps/mobile/PosDepartmentStepMobile3.vue |   3 +-
 .../PosDepartmentStepMobile2Product.vue       |   4 +-
 .../PosDepartmentStepMobileButtonNextStep.vue | 109 +---
 ...DepartmentStepMobileFixedBottomControl.vue |   2 +-
 .../objects/PosDepartmentStepMobileFlow.vue   |  57 ++-
 .../mobile/objects/mobileOrderCompletion.js   | 101 ++++
 .../pos/utils/orderBookingDisplay.js          | 100 ++++
 .../department/pos/utils/washCertificate.js   |  61 +++
 .../SuperUserDashboard/SubusersPagination.vue |  76 +--
 .../selectors/SubuserGrantPermissionNodes.vue | 148 +++---
 .../superuser/tables/SubusersTable.vue        | 300 +++++++++--
 .../department/pos/SelectVehicleFormPOS.vue   |  67 ++-
 .../items/NavigationMenuItemsUser.vue         |   2 +-
 src/components/session/token/SessionUser.vue  |   2 +
 .../SessionUser/Objects/OrderBookings.vue     |   9 +-
 .../token/SessionUser/Objects/Orders.vue      |  16 +
 .../SessionUser/Objects/SubuserGrants.vue     |  31 +-
 .../token/SessionUser/Objects/Subusers.vue    | 237 +++++++++
 src/components/shop/POSDepartmentProcess.vue  | 108 ++--
 src/router.js                                 |   9 +-
 .../TimeBookingsElementSelectDateTime.vue     |  23 +-
 .../superUserDashboard/Subusers.vue           |   7 +-
 .../userDashboard/bookings/MyBookingsBook.vue | 297 ++---------
 .../elements/UserBookingDateTimeSelector.vue  | 475 ++++++++++++++++++
 .../displays/steps/NewBookingStep5.vue        |   2 +-
 .../userDashboard/profile/UserProfile.vue     |  23 +-
 .../auth/SubuserCompleteRegistrationPage.vue  | 399 +++++++++++++++
 tests/e2e/admin-pos-orders.spec.ts            | 119 +++++
 tests/e2e/pos-flow.spec.js                    | 364 ++++++++++++--
 tests/e2e/pos-mobile-order-flow.spec.js       |  53 +-
 tests/e2e/subuser-management.spec.ts          | 469 +++++++++++++++++
 tests/e2e/subuserCompleteRegistration.spec.ts |  79 +++
 tests/e2e/subuserProfileSecurity.spec.ts      |  39 +-
 tests/e2e/support/bookingFlow.ts              |  62 ++-
 tests/e2e/support/mobilePos.js                |  67 +++
 tests/e2e/support/network.js                  |  71 +++
 tests/e2e/userProfileSecurity.spec.ts         |  29 ++
 ...avigation-menu-items-user-subusers.spec.js |  25 +
 .../subuser-grant-permission-nodes.spec.js    |  71 +++
 .../user-booking-date-time-selector.spec.js   | 139 +++++
 46 files changed, 4258 insertions(+), 674 deletions(-)
 create mode 100644 src/components/displays/department/pos/steps/mobile/objects/mobileOrderCompletion.js
 create mode 100644 src/components/displays/department/pos/utils/washCertificate.js
 create mode 100644 src/components/session/token/SessionUser/Objects/Subusers.vue
 create mode 100644 src/views/dashboards/userDashboard/bookings/displays/elements/UserBookingDateTimeSelector.vue
 create mode 100644 src/views/pages/auth/SubuserCompleteRegistrationPage.vue
 create mode 100644 tests/e2e/subuser-management.spec.ts
 create mode 100644 tests/e2e/subuserCompleteRegistration.spec.ts
 create mode 100644 tests/unit/navigation-menu-items-user-subusers.spec.js
 create mode 100644 tests/unit/subuser-grant-permission-nodes.spec.js
 create mode 100644 tests/unit/user-booking-date-time-selector.spec.js

diff --git a/src/components/displays/Subusers.vue b/src/components/displays/Subusers.vue
index d520e415..6619c65d 100644
--- a/src/components/displays/Subusers.vue
+++ b/src/components/displays/Subusers.vue
@@ -1,19 +1,61 @@
 <script setup>
-import SubusersPagination from "@/components/displays/pagination/models/SuperUserDashboard/SubusersPagination.vue";
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
 import PageTitle from "@/components/global/PageTitle.vue";
-import { useI18n } from 'vue-i18n';
+import SubusersPagination from "@/components/displays/pagination/models/SuperUserDashboard/SubusersPagination.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import SubuserGrantSelector from "@/components/session/subuser/SubuserGrantSelector.vue";
 
 const { t } = useI18n();
+
+const canInvite = computed(() => SessionUser.canAccessUser() || SessionUser.hasPermission("SUBUSERS_ADD"));
+const requiresGrantSelection = computed(
+  () => SessionUser.isSubuser.value && !SessionUser.subuser.selectedGrantCustomerNumber.value
+);
+const paginationVersion = ref(0);
+const paginationKey = computed(() =>
+  SessionUser.isSubuser.value
+    ? `subusers-${SessionUser.subuser.selectedGrantCustomerNumber.value || "none"}-${paginationVersion.value}`
+    : `subusers-user-${paginationVersion.value}`
+);
+
+const onInviteClick = async () => {
+  await SessionUser.objects.subusers.functions.showInviteForm(() => {
+    paginationVersion.value += 1;
+  });
+};
 </script>
 
 <template>
   <div>
     <PageTitle :title="t('superuser.pages.subusers.title')" :subtitle="t('superuser.pages.subusers.subtitle')">
+      <template #buttons>
+        <button v-if="canInvite" class="button is-dark" type="button" @click="onInviteClick">
+          <span class="icon">
+            <i class="fas fa-user-plus"></i>
+          </span>
+          <span>Invitér chauffør</span>
+        </button>
+      </template>
     </PageTitle>
-    <SubusersPagination auto-load="true" />
+
+    <div v-if="SessionUser.isSubuser.value" class="mb-5">
+      <SubuserGrantSelector />
+      <p class="help">
+        Vælg den kunde, du vil administrere chauffører for. Listen og rettighederne følger det valgte kundenummer.
+      </p>
+    </div>
+
+    <div v-if="requiresGrantSelection" class="notification is-info is-light">
+      Vælg først en kunde for at se og administrere chauffører.
+    </div>
+
+    <SubusersPagination v-else :key="paginationKey" auto-load="true" />
   </div>
 </template>
 
 <style scoped>
-
+.help {
+  font-size: 0.95rem;
+}
 </style>
diff --git a/src/components/displays/department/pos/PosOrderItemsCurrent.vue b/src/components/displays/department/pos/PosOrderItemsCurrent.vue
index 009ae8bb..bcd91d53 100644
--- a/src/components/displays/department/pos/PosOrderItemsCurrent.vue
+++ b/src/components/displays/department/pos/PosOrderItemsCurrent.vue
@@ -40,11 +40,13 @@ import {
   reference,
   order_notes,
   order_po,
+  order_safety_seal,
 } from "@/components/shop/POSDepartmentProcess.vue";
 import SpanSkeleton from "@/components/displays/skeletons/SpanSkeleton.vue";
 import PosOrderLicensePlates from "@/components/displays/department/pos/order/PosOrderLicensePlates.vue";
 import POSOrderCustomerWishes from "@/components/displays/department/pos/order/POSOrderCustomerWishes.vue";
 import POSOrderNote from "@/components/displays/department/pos/order/POSOrderNote.vue";
+import { doesOrderContainWashCertificateProduct } from "@/components/displays/department/pos/utils/washCertificate.js";
 
 const { t } = useI18n();
 const slots = useSlots();
@@ -84,6 +86,7 @@ const selectedOrderItem = ref(null);
 const isOrderItemEditModalOpen = ref(false);
 const referenceRequired = computed(() => customerRequiresReferenceNumber());
 const poRequired = computed(() => customerUsesPONumbers());
+const showSafetySealField = computed(() => doesOrderContainWashCertificateProduct(visibleOrderItems.value));
 
 const buildVisibleOrderItems = (sourceOrderItems = []) => {
   const pendingIds = new Set(pendingRemovedOrderItemIds.value);
@@ -895,6 +898,8 @@ const deleteOrderItem = async (orderItemId) => {
                 v-bind:order_id="activeOrderId"
                 v-bind:reference="reference"
                 v-bind:po="order_po"
+                v-bind:safetySeal="order_safety_seal"
+                v-bind:showSafetySeal="showSafetySealField"
                 v-bind:referenceRequired="referenceRequired"
                 v-bind:poRequired="poRequired"
               />
diff --git a/src/components/displays/department/pos/order/POSOrderCustomerWishes.vue b/src/components/displays/department/pos/order/POSOrderCustomerWishes.vue
index 837bbeee..bd1bbd18 100644
--- a/src/components/displays/department/pos/order/POSOrderCustomerWishes.vue
+++ b/src/components/displays/department/pos/order/POSOrderCustomerWishes.vue
@@ -18,6 +18,14 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  safetySeal: {
+    type: String,
+    default: "",
+  },
+  showSafetySeal: {
+    type: Boolean,
+    default: false,
+  },
   referenceRequired: {
     type: Boolean,
     default: false,
@@ -121,7 +129,20 @@ const poField = createCustomerWishField({
   warningIconClass: "fas fa-exclamation-triangle",
 });
 
-const fields = [referenceField, poField];
+const safetySealField = createCustomerWishField({
+  key: "safety_seal",
+  label: computed(() => t("admin.pos.safety_seal")),
+  source: () => props.safetySeal,
+  saveValue: (value) => SessionUser.objects.orders.set.safety_seal(props.order_id, value),
+  testIdBase: "pos-order-customer-wishes-safety-seal",
+  isRequired: () => false,
+  warningStateWhenEmpty: null,
+  warningIconClass: "fas fa-shield-alt",
+});
+
+const fields = computed(() => {
+  return props.showSafetySeal ? [referenceField, poField, safetySealField] : [referenceField, poField];
+});
 </script>
 
 <template>
diff --git a/src/components/displays/department/pos/steps/PosDepartmentStep1.vue b/src/components/displays/department/pos/steps/PosDepartmentStep1.vue
index a510df9f..04ecaccc 100644
--- a/src/components/displays/department/pos/steps/PosDepartmentStep1.vue
+++ b/src/components/displays/department/pos/steps/PosDepartmentStep1.vue
@@ -12,6 +12,7 @@ import {
   isCustomerSelected,
   department_id,
   getDepartment,
+  getCurrentStep,
   clearCache,
   nextStep,
   setDesktopStep1PreflightHandler,
@@ -34,9 +35,7 @@ const { t, locale } = useI18n();
 
 const routeState = parsePosRouteSearch(window.location.search);
 const shouldResetFreshStepOne =
-  routeState.orderId === null &&
-  routeState.customerId === null &&
-  (routeState.step === null || routeState.step === 1);
+  routeState.orderId === null && routeState.customerId === null && (routeState.step === null || routeState.step === 1);
 
 if (shouldResetFreshStepOne) {
   clearCache();
@@ -81,6 +80,7 @@ const duplicateWarningKey = ref("");
 const acknowledgedDuplicateWarningKey = ref("");
 const pendingNextResolution = ref(false);
 let desktopStep1CoordinationPromise = Promise.resolve({ canProceed: true });
+const isDesktopStep1Active = computed(() => getCurrentStep() === 1);
 
 const setTab = (tab) => {
   forceActiveTab.value = tab;
@@ -123,8 +123,12 @@ const normalizeDuplicateContext = (context = desktopStep1Context.value) => {
   return {
     ...createEmptyDesktopStep1Context(),
     ...(context || {}),
-    reg1: String(context?.reg1 ?? "").trim().toUpperCase(),
-    reg2: String(context?.reg2 ?? "").trim().toUpperCase(),
+    reg1: String(context?.reg1 ?? "")
+      .trim()
+      .toUpperCase(),
+    reg2: String(context?.reg2 ?? "")
+      .trim()
+      .toUpperCase(),
     bookingMatches: Array.isArray(context?.bookingMatches) ? context.bookingMatches : [],
   };
 };
@@ -143,6 +147,14 @@ const getDuplicateStateKey = (context = desktopStep1Context.value) => {
 const setDesktopStep1Context = (context = {}) => {
   desktopStep1Context.value = normalizeDuplicateContext(context);
 
+  if (!isDesktopStep1Active.value) {
+    duplicateOrders.value = [];
+    duplicateWarningKey.value = "";
+    acknowledgedDuplicateWarningKey.value = "";
+    desktopModalState.value = null;
+    return;
+  }
+
   if (!desktopStep1Context.value.reg1) {
     duplicateOrders.value = [];
     duplicateWarningKey.value = "";
@@ -166,6 +178,20 @@ const setDesktopStep1Context = (context = {}) => {
   }
 };
 
+watch(
+  isDesktopStep1Active,
+  (isActive) => {
+    if (!isActive) {
+      desktopModalState.value = null;
+      pendingNextResolution.value = false;
+      return;
+    }
+
+    setDesktopStep1Context(desktopStep1Context.value);
+  },
+  { immediate: true }
+);
+
 const formatBookingDateTime = (booking) => {
   const rawValue = booking?.datetime || booking?.created_at || booking?.date || null;
   if (!rawValue) {
@@ -213,8 +239,12 @@ const bookingSelectionObjects = computed(() => {
     const contentSegments = [
       `${t("admin.pos.order_booking_selector.customer_label")}: ${booking?.customer_name || t("admin.pos.not_found")}`,
       `${t("admin.pos.order_booking_selector.plates_label")}: ${plateText || t("admin.pos.not_found")}`,
-      `${t("admin.pos.order_booking_selector.reference_label")}: ${getOrderBookingReferenceValue(booking) || t("admin.pos.not_found")}`,
-      `${t("admin.pos.order_booking_selector.services_label")}: ${getOrderBookingServiceText(booking) || t("admin.pos.not_found")}`,
+      `${t("admin.pos.order_booking_selector.reference_label")}: ${
+        getOrderBookingReferenceValue(booking) || t("admin.pos.not_found")
+      }`,
+      `${t("admin.pos.order_booking_selector.services_label")}: ${
+        getOrderBookingServiceText(booking) || t("admin.pos.not_found")
+      }`,
     ];
 
     return {
@@ -374,7 +404,9 @@ 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]}`,
+      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]}`,
       limit: 5,
     });
 
@@ -558,6 +590,23 @@ const handleBookingSkip = async () => {
   }
 };
 
+const handleBookingRefresh = async () => {
+  await selectVehicleFormRef.value?.refreshOrderBookingMatches?.({
+    source: "booking_refresh",
+    committed: false,
+  });
+
+  desktopStep1CoordinationPromise = coordinateDesktopStep1({
+    reason: "booking_refresh",
+    finalizeReg1Input: false,
+  });
+  const result = await desktopStep1CoordinationPromise;
+
+  if (result.canProceed) {
+    await resumePendingNextStep();
+  }
+};
+
 onMounted(() => {
   setDesktopStep1PreflightHandler(handleDesktopStep1Preflight);
 });
@@ -615,7 +664,7 @@ onBeforeUnmount(() => {
       </div>
     </div>
     <PosDesktopOrderBookingSelectorModal
-      :isActive="desktopModalState === 'booking_selection'"
+      :isActive="isDesktopStep1Active && desktopModalState === 'booking_selection'"
       :allowClose="false"
       :title="t('admin.pos.order_booking_selector.title')"
       :message="t('admin.pos.order_booking_selector.help_text')"
@@ -624,9 +673,13 @@ onBeforeUnmount(() => {
       :matchedPlate="desktopStep1Context.reg1"
       @select="handleBookingSelection"
       @skip="handleBookingSkip"
+      @refresh-bookings="handleBookingRefresh"
     />
     <DefaultObjectSelector
-      :isActive="desktopModalState === 'duplicate_warning' || desktopModalState === 'duplicate_details'"
+      :isActive="
+        isDesktopStep1Active &&
+        (desktopModalState === 'duplicate_warning' || desktopModalState === 'duplicate_details')
+      "
       :allowClose="false"
       :teleportToBody="true"
       :showRadio="false"
diff --git a/src/components/displays/department/pos/steps/elements/PosDesktopOrderBookingSelectorModal.vue b/src/components/displays/department/pos/steps/elements/PosDesktopOrderBookingSelectorModal.vue
index edab6560..ade007b7 100644
--- a/src/components/displays/department/pos/steps/elements/PosDesktopOrderBookingSelectorModal.vue
+++ b/src/components/displays/department/pos/steps/elements/PosDesktopOrderBookingSelectorModal.vue
@@ -2,7 +2,10 @@
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
 import {
+  getOrderBookingItemPreviewRows,
+  getOrderBookingItemPreviewTotal,
   getOrderBookingNotesValue,
   getOrderBookingPlateText,
   getOrderBookingPoValue,
@@ -42,7 +45,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:isActive", "select", "skip"]);
+const emit = defineEmits(["update:isActive", "select", "skip", "refresh-bookings"]);
 
 const { t, locale } = useI18n();
 
@@ -55,7 +58,10 @@ const toPositiveInteger = (value) => {
   return Number.isInteger(parsedValue) && parsedValue > 0 ? parsedValue : null;
 };
 
-const normalizePlateValue = (value) => String(value ?? "").trim().toUpperCase();
+const normalizePlateValue = (value) =>
+  String(value ?? "")
+    .trim()
+    .toUpperCase();
 
 const formatBookingDateTime = (booking) => {
   const rawValue = booking?.datetime || booking?.created_at || booking?.date || null;
@@ -74,6 +80,28 @@ const formatBookingDateTime = (booking) => {
   }).format(parsedValue);
 };
 
+const getBookingDateValue = (booking) => {
+  const rawValue = booking?.datetime || booking?.created_at || booking?.date || null;
+  if (!rawValue) {
+    return null;
+  }
+
+  const parsedValue = new Date(rawValue);
+  return Number.isNaN(parsedValue.getTime()) ? null : parsedValue;
+};
+
+const isSameCalendarDay = (left, right) => {
+  if (!(left instanceof Date) || !(right instanceof Date)) {
+    return false;
+  }
+
+  return (
+    left.getFullYear() === right.getFullYear() &&
+    left.getMonth() === right.getMonth() &&
+    left.getDate() === right.getDate()
+  );
+};
+
 const getDetailedBooking = (booking) => {
   const bookingId = toPositiveInteger(booking?.id);
   return bookingId ? detailedBookingsById.value[bookingId] || null : null;
@@ -98,6 +126,14 @@ const getBookingServiceLabels = (booking) => {
   return getOrderBookingServiceLabels(getDisplayBooking(booking));
 };
 
+const getBookingItemPreviewRows = (booking) => {
+  return getOrderBookingItemPreviewRows(getDisplayBooking(booking));
+};
+
+const getBookingItemPreviewTotal = (booking) => {
+  return getOrderBookingItemPreviewTotal(getDisplayBooking(booking));
+};
+
 const getBookingNote = (booking) => {
   return getOrderBookingNotesValue(getDisplayBooking(booking));
 };
@@ -114,6 +150,17 @@ const getBookingPlates = (booking) => {
   return getOrderBookingPlateText(getDisplayBooking(booking));
 };
 
+const formatCurrencyAmount = (value) => {
+  const parsedValue = Number(value);
+  if (!Number.isFinite(parsedValue)) {
+    return "—";
+  }
+
+  return SessionUser.functions.currency.toLocal(parsedValue);
+};
+
+const totalAmountLabel = computed(() => SessionUser.objects.orders.columns.total_net_amount?.label || "Total");
+
 const getLoadingCount = computed(() => loadingBookingIds.value.length);
 
 const isLoadingAnyBookingDetails = computed(() => getLoadingCount.value > 0);
@@ -121,11 +168,7 @@ const isLoadingAnyBookingDetails = computed(() => getLoadingCount.value > 0);
 const resolvedBookingCount = computed(() => {
   return props.bookings.filter((booking) => {
     const displayBooking = getDisplayBooking(booking);
-    return (
-      hasOrderBookingDisplayDetails(displayBooking) ||
-      !isBookingLoading(booking) ||
-      didBookingDetailFail(booking)
-    );
+    return hasOrderBookingDisplayDetails(displayBooking) || !isBookingLoading(booking) || didBookingDetailFail(booking);
   }).length;
 });
 
@@ -140,6 +183,41 @@ const summaryChips = computed(() => {
   return chips;
 });
 
+const sortedBookings = computed(() => {
+  const now = new Date();
+
+  return props.bookings
+    .map((booking, index) => {
+      const displayBooking = getDisplayBooking(booking);
+      const bookingDate = getBookingDateValue(displayBooking);
+      const isToday = isSameCalendarDay(bookingDate, now);
+
+      return {
+        booking,
+        index,
+        bookingDate,
+        isToday,
+      };
+    })
+    .sort((left, right) => {
+      if (left.isToday !== right.isToday) {
+        return left.isToday ? -1 : 1;
+      }
+
+      if (left.bookingDate && right.bookingDate) {
+        const timeDifference = left.bookingDate.getTime() - right.bookingDate.getTime();
+        if (timeDifference !== 0) {
+          return timeDifference;
+        }
+      } else if (left.bookingDate || right.bookingDate) {
+        return left.bookingDate ? -1 : 1;
+      }
+
+      return left.index - right.index;
+    })
+    .map((entry) => entry.booking);
+});
+
 const fetchBookingDetails = async (bookings) => {
   const pendingBookings = (Array.isArray(bookings) ? bookings : []).filter(Boolean);
   const bookingsToLoad = pendingBookings.filter((booking) => {
@@ -228,6 +306,26 @@ const onSkip = async () => {
   emit("skip");
 };
 
+const emitRefreshBookings = () => {
+  emit("refresh-bookings");
+};
+
+const getActionBooking = (booking) => getDisplayBooking(booking);
+
+const getActionCustomerNumber = (booking) => {
+  const displayBooking = getActionBooking(booking);
+  return toPositiveInteger(displayBooking?.customer_number ?? displayBooking?.customer_id);
+};
+
+const getActionDepartmentId = (booking) => {
+  const displayBooking = getActionBooking(booking);
+  return toPositiveInteger(displayBooking?.department ?? props.departmentId);
+};
+
+const isBookingScheduledForToday = (booking) => {
+  return isSameCalendarDay(getBookingDateValue(getDisplayBooking(booking)), new Date());
+};
+
 const closeModal = () => {
   if (!props.allowClose) {
     return;
@@ -253,11 +351,7 @@ const closeModal = () => {
               <p v-if="message" class="pos-desktop-order-booking-modal__message">{{ message }}</p>
             </div>
             <div class="pos-desktop-order-booking-modal__summary">
-              <span
-                v-for="chip in summaryChips"
-                :key="chip"
-                class="pos-desktop-order-booking-modal__summary-chip"
-              >
+              <span v-for="chip in summaryChips" :key="chip" class="pos-desktop-order-booking-modal__summary-chip">
                 {{ chip }}
               </span>
             </div>
@@ -281,22 +375,49 @@ const closeModal = () => {
 
           <div class="pos-desktop-order-booking-modal__grid">
             <article
-              v-for="booking in bookings"
+              v-for="booking in sortedBookings"
               :key="booking.id"
               class="pos-desktop-order-booking-card"
+              :class="{ 'pos-desktop-order-booking-card--today': isBookingScheduledForToday(booking) }"
               :data-testid="`pos-desktop-order-booking-option-${booking.id}`"
             >
               <div class="pos-desktop-order-booking-card__header">
-                <div>
+                <div class="pos-desktop-order-booking-card__header-main">
                   <p class="pos-desktop-order-booking-card__eyebrow">Booking #{{ booking.id }}</p>
-                  <h3 class="pos-desktop-order-booking-card__title">{{ formatBookingDateTime(getDisplayBooking(booking)) }}</h3>
+                  <h3 class="pos-desktop-order-booking-card__title">
+                    {{ formatBookingDateTime(getDisplayBooking(booking)) }}
+                  </h3>
+                </div>
+                <div class="pos-desktop-order-booking-card__header-actions">
+                  <span
+                    v-if="isBookingScheduledForToday(booking)"
+                    class="tag pos-desktop-order-booking-card__today-tag"
+                    :data-testid="`pos-desktop-order-booking-today-${booking.id}`"
+                  >
+                    {{ t("global.time.today") }}
+                  </span>
+                  <span v-if="didBookingDetailFail(booking)" class="tag is-light pos-desktop-order-booking-card__tag">
+                    {{ t("admin.pos.not_found") }}
+                  </span>
+                  <div
+                    class="pos-desktop-order-booking-card__settings"
+                    :data-testid="`pos-desktop-order-booking-settings-${booking.id}`"
+                  >
+                    <ActionSettingsWheelButton
+                      :order_booking_id="toPositiveInteger(getActionBooking(booking)?.id)"
+                      :order_id="toPositiveInteger(getActionBooking(booking)?.order_id)"
+                      :customer_number="getActionCustomerNumber(booking)"
+                      :department_id="getActionDepartmentId(booking)"
+                      :reg_1="getActionBooking(booking)?.reg_1 ?? null"
+                      :reg_2="getActionBooking(booking)?.reg_2 ?? null"
+                      :refreshFunction="emitRefreshBookings"
+                      :icon="'fas fa-ellipsis-v'"
+                      trigger-button-variant="text"
+                    >
+                      <template #actions />
+                    </ActionSettingsWheelButton>
+                  </div>
                 </div>
-                <span
-                  v-if="didBookingDetailFail(booking)"
-                  class="tag is-light pos-desktop-order-booking-card__tag"
-                >
-                  {{ t("admin.pos.not_found") }}
-                </span>
               </div>
 
               <p class="pos-desktop-order-booking-card__customer">
@@ -323,16 +444,69 @@ const closeModal = () => {
               </dl>
 
               <div
-                v-if="getBookingServiceLabels(booking).length > 0 || isBookingLoading(booking)"
+                v-if="
+                  getBookingItemPreviewRows(booking).length > 0 ||
+                  getBookingServiceLabels(booking).length > 0 ||
+                  isBookingLoading(booking)
+                "
                 class="pos-desktop-order-booking-card__services"
                 :data-testid="`pos-desktop-order-booking-services-${booking.id}`"
               >
-                <p class="pos-desktop-order-booking-card__section-title">
-                  {{ t("admin.pos.order_booking_selector.services_label") }}
-                </p>
-                <div v-if="isBookingLoading(booking)" class="pos-desktop-order-booking-card__service-skeleton">
-                  <span class="pos-desktop-order-booking-card__service-pill is-skeleton" />
-                  <span class="pos-desktop-order-booking-card__service-pill is-skeleton" />
+                <div class="pos-desktop-order-booking-card__section-header">
+                  <p class="pos-desktop-order-booking-card__section-title">
+                    {{ t("admin.pos.order_booking_selector.services_label") }}
+                  </p>
+                  <div
+                    v-if="!isBookingLoading(booking) && getBookingItemPreviewTotal(booking) !== null"
+                    class="pos-desktop-order-booking-card__section-total"
+                    :data-testid="`pos-desktop-order-booking-service-total-${booking.id}`"
+                  >
+                    <span>{{ totalAmountLabel }}</span>
+                    <strong>{{ formatCurrencyAmount(getBookingItemPreviewTotal(booking)) }}</strong>
+                  </div>
+                </div>
+
+                <div v-if="isBookingLoading(booking)" class="pos-desktop-order-booking-card__item-preview-skeleton">
+                  <div class="pos-desktop-order-booking-card__item-preview-row is-skeleton" />
+                  <div class="pos-desktop-order-booking-card__item-preview-row is-skeleton" />
+                </div>
+                <div
+                  v-else-if="getBookingItemPreviewRows(booking).length > 0"
+                  class="pos-desktop-order-booking-card__item-preview"
+                >
+                  <div class="pos-desktop-order-booking-card__item-preview-head">
+                    <span>{{ t("global.quantity") }}</span>
+                    <span>{{ t("admin.pos.order_booking_selector.services_label") }}</span>
+                    <span>{{ t("admin.pos.price_dkk") }}</span>
+                  </div>
+                  <div
+                    v-for="(item, index) in getBookingItemPreviewRows(booking)"
+                    :key="item.key"
+                    class="pos-desktop-order-booking-card__item-preview-row"
+                    :data-testid="`pos-desktop-order-booking-service-row-${booking.id}-${index}`"
+                  >
+                    <span class="pos-desktop-order-booking-card__item-preview-qty">{{ item.quantity }}x</span>
+                    <div class="pos-desktop-order-booking-card__item-preview-main">
+                      <span
+                        class="pos-desktop-order-booking-card__item-preview-name"
+                        :class="{ 'pos-desktop-order-booking-card__item-preview-name--addon': item.depth > 0 }"
+                      >
+                        {{ item.depth > 0 ? "+ " : "" }}{{ item.label }}
+                      </span>
+                      <span
+                        v-if="item.unitPrice !== null && item.quantity > 1"
+                        class="pos-desktop-order-booking-card__item-preview-meta"
+                      >
+                        {{ formatCurrencyAmount(item.unitPrice) }} / stk
+                      </span>
+                    </div>
+                    <span
+                      class="pos-desktop-order-booking-card__item-preview-amount"
+                      :data-testid="`pos-desktop-order-booking-service-amount-${booking.id}-${index}`"
+                    >
+                      {{ item.totalPrice !== null ? formatCurrencyAmount(item.totalPrice) : "—" }}
+                    </span>
+                  </div>
                 </div>
                 <div v-else class="pos-desktop-order-booking-card__service-list">
                   <span
@@ -361,12 +535,7 @@ const closeModal = () => {
           </div>
         </section>
         <footer class="modal-card-foot pos-desktop-order-booking-modal__foot">
-          <button
-            class="button is-light"
-            type="button"
-            data-testid="pos-desktop-order-booking-skip"
-            @click="onSkip"
-          >
+          <button class="button is-light" type="button" data-testid="pos-desktop-order-booking-skip" @click="onSkip">
             {{ t("admin.pos.order_booking_selector.continue_without_booking") }}
           </button>
         </footer>
@@ -385,15 +554,14 @@ const closeModal = () => {
   max-width: 1180px;
   max-height: calc(100vh - 2rem);
   border-radius: 20px;
-  overflow: hidden;
+  overflow: visible;
   box-shadow: 0 28px 80px rgba(10, 24, 61, 0.35);
 }
 
 .pos-desktop-order-booking-modal__head {
   align-items: flex-start;
   padding: 1.5rem 1.75rem 1.1rem;
-  background:
-    linear-gradient(135deg, rgba(15, 35, 77, 0.98), rgba(10, 24, 61, 0.95)),
+  background: linear-gradient(135deg, rgba(15, 35, 77, 0.98), rgba(10, 24, 61, 0.95)),
     linear-gradient(135deg, #0f234d, #102d62);
   border-bottom: none;
 }
@@ -442,8 +610,7 @@ const closeModal = () => {
 
 .pos-desktop-order-booking-modal__body {
   padding: 1.25rem 1.5rem 1.35rem;
-  background:
-    linear-gradient(180deg, #f8fbff 0%, #f2f6fb 100%);
+  background: linear-gradient(180deg, #f8fbff 0%, #f2f6fb 100%);
 }
 
 .pos-desktop-order-booking-modal__loading {
@@ -467,6 +634,7 @@ const closeModal = () => {
 }
 
 .pos-desktop-order-booking-card {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 0.9rem;
@@ -476,6 +644,13 @@ const closeModal = () => {
   border-radius: 18px;
   background: #fff;
   box-shadow: 0 10px 24px rgba(21, 42, 76, 0.08);
+  overflow: visible;
+}
+
+.pos-desktop-order-booking-card--today {
+  border-color: #3d7ef0;
+  background: linear-gradient(180deg, rgba(61, 126, 240, 0.08), rgba(61, 126, 240, 0.02)), #fff;
+  box-shadow: 0 14px 32px rgba(34, 88, 184, 0.16);
 }
 
 .pos-desktop-order-booking-card__header {
@@ -483,6 +658,21 @@ const closeModal = () => {
   align-items: flex-start;
   justify-content: space-between;
   gap: 0.75rem;
+  overflow: visible;
+}
+
+.pos-desktop-order-booking-card__header-main {
+  min-width: 0;
+}
+
+.pos-desktop-order-booking-card__header-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.45rem;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 2;
 }
 
 .pos-desktop-order-booking-card__eyebrow {
@@ -513,6 +703,31 @@ const closeModal = () => {
   color: #49576b;
 }
 
+.pos-desktop-order-booking-card__today-tag {
+  border-radius: 999px;
+  border: 1px solid rgba(61, 126, 240, 0.2);
+  background: rgba(61, 126, 240, 0.12);
+  color: #18408b;
+  font-weight: 700;
+}
+
+.pos-desktop-order-booking-card__settings {
+  position: relative;
+}
+
+.pos-desktop-order-booking-card__settings :deep(.dropdown) {
+  position: relative;
+}
+
+.pos-desktop-order-booking-card__settings :deep(.dropdown-menu) {
+  z-index: 20;
+}
+
+.pos-desktop-order-booking-card__settings :deep(.action-settings-wheel-trigger--text) {
+  border-radius: 999px;
+  padding: 0.2rem;
+}
+
 .pos-desktop-order-booking-card__meta-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -546,6 +761,124 @@ const closeModal = () => {
   padding-top: 0.1rem;
 }
 
+.pos-desktop-order-booking-card__section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.45rem;
+}
+
+.pos-desktop-order-booking-card__section-total {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.45rem;
+  color: #173559;
+  font-size: 0.76rem;
+  font-weight: 700;
+}
+
+.pos-desktop-order-booking-card__section-total strong {
+  color: #0f234d;
+  font-size: 0.92rem;
+}
+
+.pos-desktop-order-booking-card__item-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.pos-desktop-order-booking-card__item-preview-head,
+.pos-desktop-order-booking-card__item-preview-row {
+  display: grid;
+  grid-template-columns: 3.2rem minmax(0, 1fr) auto;
+  gap: 0.65rem;
+  align-items: center;
+}
+
+.pos-desktop-order-booking-card__item-preview-head {
+  padding: 0 0.1rem;
+  color: #6b7c92;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.pos-desktop-order-booking-card__item-preview-head span:last-child {
+  text-align: right;
+}
+
+.pos-desktop-order-booking-card__item-preview-row {
+  padding: 0.55rem 0.65rem;
+  border: 1px solid #e5edf7;
+  border-radius: 12px;
+  background: linear-gradient(180deg, #fdfefe 0%, #f7fbff 100%);
+}
+
+.pos-desktop-order-booking-card__item-preview-qty {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 1.7rem;
+  padding: 0.1rem 0.45rem;
+  border-radius: 999px;
+  background: #e9f1fb;
+  color: #18408b;
+  font-size: 0.8rem;
+  font-weight: 800;
+}
+
+.pos-desktop-order-booking-card__item-preview-main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.pos-desktop-order-booking-card__item-preview-name {
+  color: #14243b;
+  font-size: 0.92rem;
+  font-weight: 700;
+  line-height: 1.25;
+  word-break: break-word;
+}
+
+.pos-desktop-order-booking-card__item-preview-name--addon {
+  color: #24456e;
+  font-weight: 600;
+}
+
+.pos-desktop-order-booking-card__item-preview-meta {
+  color: #6a7890;
+  font-size: 0.76rem;
+  font-weight: 600;
+}
+
+.pos-desktop-order-booking-card__item-preview-amount {
+  color: #0f234d;
+  font-size: 0.9rem;
+  font-weight: 800;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.pos-desktop-order-booking-card__item-preview-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.pos-desktop-order-booking-card__item-preview-row.is-skeleton {
+  min-height: 3rem;
+  border-color: transparent;
+  color: transparent;
+  background: linear-gradient(90deg, #ebf0f7 0%, #f7f9fc 50%, #ebf0f7 100%);
+  background-size: 200% 100%;
+  animation: pos-booking-selector-pulse 1.2s linear infinite;
+}
+
 .pos-desktop-order-booking-card__service-list,
 .pos-desktop-order-booking-card__service-skeleton {
   display: flex;
@@ -624,5 +957,21 @@ const closeModal = () => {
   .pos-desktop-order-booking-card__meta-grid {
     grid-template-columns: minmax(0, 1fr);
   }
+
+  .pos-desktop-order-booking-card__section-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .pos-desktop-order-booking-card__item-preview-head,
+  .pos-desktop-order-booking-card__item-preview-row {
+    grid-template-columns: 2.8rem minmax(0, 1fr);
+  }
+
+  .pos-desktop-order-booking-card__item-preview-head span:last-child,
+  .pos-desktop-order-booking-card__item-preview-amount {
+    grid-column: 2;
+    text-align: left;
+  }
 }
 </style>
diff --git a/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile2.vue b/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile2.vue
index 6cea3f13..967c94d2 100644
--- a/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile2.vue
+++ b/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile2.vue
@@ -19,7 +19,7 @@ import PosDepartmentStep2MobileVehicleSelection
 import PosDepartmentStepMobileButtonNextStep
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonNextStep.vue";
 import { primaryItem } from "./objects/PosDepartmentStepMobileFlow.vue";
-import { order_id, order_notes, order_po, reference as persistedReference, reg_1, reg_2, reg_3, department_id, customer_id, getCustomerEmail, customer_name, isAddonRestricted, canBuyAdditionalServices } from "@/components/shop/POSDepartmentProcess.vue";
+import { order_id, order_notes, order_po, order_safety_seal, reference as persistedReference, reg_1, reg_2, reg_3, department_id, customer_id, getCustomerEmail, customer_name, isAddonRestricted, canBuyAdditionalServices } from "@/components/shop/POSDepartmentProcess.vue";
 import { createOrderItem, getOrderItems, removeOrderItem } from "@/components/shop/OrdersItems.vue";
 import { PosProduct } from "@/components/displays/department/pos/steps/mobile/objects/PosProduct.vue";
 import PosDepartmentStepMobileButtonClearAll
@@ -40,6 +40,7 @@ onMounted(() => {
   setTransparency(false);
   setBackgroundColor(backgroundColors.default); // Set the default background color
   hydrateReferenceFromSources();
+  hydrateSafetySealFromSources();
   // Set the notes to the order notes if it's not already set
   if (order_notes.value && !notes.value) {
     notes.value = order_notes.value;
@@ -546,8 +547,27 @@ const referenceAutosave = useOrderMetadataAutosave({
   },
 });
 
+const safetySealAutosave = useOrderMetadataAutosave({
+  source: order_safety_seal,
+  saveValue: async (value) => {
+    const normalizedOrderId = getNormalizedOrderId();
+    if (!normalizedOrderId) {
+      return value;
+    }
+
+    await SessionUser.objects.orders.set.safety_seal(normalizedOrderId, value);
+    return value;
+  },
+  onSaved: async (value) => {
+    order_safety_seal.value = value;
+    metadata.setSafetySeal(value);
+  },
+});
+
 const stepTwoNotesInput = notesAutosave.draft;
 const stepTwoReferenceInput = referenceAutosave.draft;
+const stepTwoSafetySealInput = safetySealAutosave.draft;
+const showSafetySealField = computed(() => transactionItems.containsWashCertificate());
 
 const resolveReferenceFromSources = () => {
   const orderReference = normalizeReferenceValue(persistedReference.value);
@@ -574,6 +594,26 @@ function syncReferenceState(value: unknown) {
   metadata.setReference(normalizedValue);
 }
 
+const resolveSafetySealFromSources = () => {
+  const orderSafetySeal = normalizeReferenceValue(order_safety_seal.value);
+  if (hasReferenceValue(orderSafetySeal)) {
+    return orderSafetySeal;
+  }
+
+  const metadataSafetySeal = normalizeReferenceValue(metadata.getSafetySeal?.());
+  if (hasReferenceValue(metadataSafetySeal)) {
+    return metadataSafetySeal;
+  }
+
+  return "";
+};
+
+function syncSafetySealState(value: unknown) {
+  const normalizedValue = normalizeReferenceValue(value);
+  order_safety_seal.value = normalizedValue;
+  metadata.setSafetySeal(normalizedValue);
+}
+
 function hydrateReferenceFromSources() {
   const currentDraft = normalizeReferenceValue(stepTwoReferenceInput.value);
 
@@ -601,6 +641,33 @@ function hydrateReferenceFromSources() {
   return canHydrateDraft ? resolvedReference : currentDraft;
 }
 
+function hydrateSafetySealFromSources() {
+  const currentDraft = normalizeReferenceValue(stepTwoSafetySealInput.value);
+
+  if (safetySealAutosave.isDirty.value && hasReferenceValue(currentDraft)) {
+    syncSafetySealState(currentDraft);
+    return currentDraft;
+  }
+
+  const resolvedSafetySeal = resolveSafetySealFromSources();
+  if (!hasReferenceValue(resolvedSafetySeal)) {
+    if (hasReferenceValue(currentDraft)) {
+      syncSafetySealState(currentDraft);
+    }
+    return currentDraft;
+  }
+
+  const lastSavedSafetySeal = normalizeReferenceValue(safetySealAutosave.lastSavedValue.value);
+  const canHydrateDraft = !hasReferenceValue(currentDraft) || currentDraft === lastSavedSafetySeal;
+
+  if (canHydrateDraft && currentDraft !== resolvedSafetySeal) {
+    safetySealAutosave.syncFromSource(resolvedSafetySeal);
+  }
+
+  syncSafetySealState(canHydrateDraft ? resolvedSafetySeal : currentDraft);
+  return canHydrateDraft ? resolvedSafetySeal : currentDraft;
+}
+
 watch(stepTwoNotesInput, (value) => {
   metadata.setNotes(value);
 
@@ -617,12 +684,26 @@ watch(stepTwoReferenceInput, (value) => {
   }
 });
 
+watch(stepTwoSafetySealInput, (value) => {
+  syncSafetySealState(value);
+
+  if (getNormalizedOrderId()) {
+    safetySealAutosave.scheduleSave();
+  }
+});
+
 watch(persistedReference, (newValue, oldValue) => {
   if (newValue !== oldValue) {
     hydrateReferenceFromSources();
   }
 });
 
+watch(order_safety_seal, (newValue, oldValue) => {
+  if (newValue !== oldValue) {
+    hydrateSafetySealFromSources();
+  }
+});
+
 watch(() => getNormalizedOrderId(), (normalizedOrderId) => {
   if (!normalizedOrderId) {
     return;
@@ -635,6 +716,10 @@ watch(() => getNormalizedOrderId(), (normalizedOrderId) => {
   if (referenceAutosave.isDirty.value) {
     referenceAutosave.scheduleSave();
   }
+
+  if (safetySealAutosave.isDirty.value) {
+    safetySealAutosave.scheduleSave();
+  }
 });
 
 watch([reg_1, reg_2, reg_3], ([nextReg1, nextReg2, nextReg3]) => {
@@ -964,6 +1049,18 @@ const filteredAddons = computed(() => {
           @change="referenceAutosave.flush()"
         />
       </ControlField>
+      <ControlField v-if="showSafetySealField">
+        <ControlFieldInputLabel label="Safety seal" :classes="layout.classes" :optional="true"/>
+        <ControlFieldInput
+          testId="pos-mobile-safety-seal-step-2-input"
+          type="text"
+          placeholder=""
+          :classes="layout.classes"
+          :vmodel="stepTwoSafetySealInput"
+          @input="stepTwoSafetySealInput = $event"
+          @change="safetySealAutosave.flush()"
+        />
+      </ControlField>
       <PosDepartmentStepMobileFixedBottomControl variant="pos-step" :reserveSpace="false">
         <!-- Complete button -->
         <PosDepartmentStepMobileButtonNextStep :isDark="false" :onBeforeStep="() => onBeforeComplete()" :buttonClasses="['has-background-primary', 'has-text-white']">
diff --git a/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile3.vue b/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile3.vue
index 250b2b7b..c400cd85 100644
--- a/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile3.vue
+++ b/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile3.vue
@@ -19,6 +19,7 @@ import {
   resetPos,
   transactionItems,
 } from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
+import { finalizeCurrentMobileOrder } from "@/components/displays/department/pos/steps/mobile/objects/mobileOrderCompletion.js";
 
 const isCompleting = ref(false);
 const completionError = ref(null);
@@ -97,7 +98,7 @@ const completeMobileCardPayment = async () => {
   completedOrderId.value = normalizedOrderId.value;
 
   try {
-    await SessionUser.objects.orders.functions.mark_as_completed(normalizedOrderId.value);
+    await finalizeCurrentMobileOrder();
     popups.select('completed_transaction', {
       message: `Order #${normalizedOrderId.value} successfully created.`,
     });
diff --git a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Product.vue b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Product.vue
index 6fabb8a3..bf46a6c3 100644
--- a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Product.vue
+++ b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Product.vue
@@ -15,7 +15,7 @@ const props = defineProps({
 
 <template>
   <!-- Box -->
-  <div class="box" style="border: 3px solid rgb(0,45,255);">
+  <div class="box" data-testid="pos-mobile-primary-product-card" style="border: 3px solid rgb(0,45,255);">
     <!-- Product image -->
     <div class="has-text-centered">
       <img :src="getPicture(props?.product?.piktogram || props?.product?.id || '')" :alt="props?.product?.name || 'N/A'" class="product-image">
@@ -145,4 +145,4 @@ const props = defineProps({
   order: 1;
   flex-grow: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonNextStep.vue b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonNextStep.vue
index ebfd1d07..ca4d5d3f 100644
--- a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonNextStep.vue
+++ b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonNextStep.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import {defineProps, onMounted, computed, ref} from "vue";
-import { reset_all_values, customer_name, nextStep, searchAndSelectCustomer, isCustomerSelected, order_id, customer_id, step, reg_1, reg_2, reg_3, reference, order_notes, loadCustomerAttributes, hasAttribute, uploadAttachment, restoreStoredPosOrderId } from "@/components/shop/POSDepartmentProcess.vue";
+import { reset_all_values, customer_name, nextStep, searchAndSelectCustomer, isCustomerSelected, order_id, customer_id, step, reg_1, reg_2, reg_3, reference, order_notes, order_safety_seal, loadCustomerAttributes, hasAttribute, uploadAttachment, restoreStoredPosOrderId } from "@/components/shop/POSDepartmentProcess.vue";
 import * as POSDepartmentProcess from "@/components/shop/POSDepartmentProcess.vue";
 import { errors } from "@/components/request/HandleGlobalError.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import GenericButton from "@/components/viewport/page/templates/generic/graphics/GenericButton.vue";
 import ContinueArrow from "@/components/viewport/elements/icons/ContinueArrow.vue";
 import { vehicles, metadata, getCustomerId, popups, resetPos, attachments, transactionHistory, transactionItems } from "../objects/PosDepartmentStepMobileFlow.vue";
+import { finalizeCurrentMobileOrder, getResolvedMobileSafetySeal, syncMobileSafetySealState } from "../objects/mobileOrderCompletion.js";
 import Swal from "sweetalert2";
 import LongPressListener from "@/components/viewport/elements/wrappers/LongPressListener.vue";
 import {views} from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
@@ -63,6 +64,11 @@ const updateNotes = () => {
   SessionUser.objects.orders.set.notes(order_id.value, order_notes.value);
 }
 
+const updateSafetySeal = () => {
+  if (!!order_id.value && order_id.value > 0)
+  SessionUser.objects.orders.set.safety_seal(order_id.value, order_safety_seal.value);
+}
+
 // Helpers: extracted for clarity and reuse
 const isNonEmptyString = (val) => typeof val === 'string' && val.trim().length > 0;
 
@@ -154,6 +160,7 @@ const step1 = () => {
   // Merge references and notes
   mergeReferences();
   mergeNotes();
+  mergeSafetySeal();
   // We only need to check if the customer requires reference, if the field is empty.
   if (!isNonEmptyString(reference.value)) {
     validateReferenceRequirements().then((isValid) => {
@@ -194,9 +201,16 @@ const mergeNotes = () => {
     updateNotes();
   }
 }
+const mergeSafetySeal = () => {
+  const resolvedSafetySeal = getResolvedMobileSafetySeal();
+  order_safety_seal.value = resolvedSafetySeal;
+  syncMobileSafetySealState(resolvedSafetySeal);
+  updateSafetySeal();
+}
 const finalizeStep1 = () => {
   mergeReferences();
   mergeNotes();
+  mergeSafetySeal();
   // Upload the attachments if there are any (And the order id has been created)
   if (attachments.getBase64().length > 0 && order_id.value > 0) {
     for (const attachment of attachments.getBase64()) {
@@ -226,99 +240,26 @@ const addTransactionToHistory = async (orderId: number) => {
   });
 };
 
-const step2 = () => {
+const step2 = async () => {
   /** This function can be used to perform any specific actions for step 2 */
   // If the customer is paying with a card, go to the payment step
   if (isCustomerSelected() && getCustomerId() === 999) {
     nextStep({isMobile: true});
     return;
   }
-  // Add all additional items to the order
-  popups.select('completed_transaction', {
-    message: `Order #${order_id.value} successfully created.`,
-  });
-  if (metadata.getBookingId() && metadata.getBookingId() > 0) {
-    // If there is a booking ID, complete the booking
-    SessionUser.objects.orders.set.booking_id(order_id.value, metadata.getBookingId());
-    // Check if the booking has been completed
-    SessionUser.objects.order_bookings.get.single(metadata.getBookingId()).then((booking: any) => {
-      const isBookingCompleted = booking?.order_id && booking.order_id > 0;
-      if (!isBookingCompleted) {
-        // Set the order bookings id to the metadata
-        if (metadata.getBookingId() && metadata.getBookingId() > 0) {
-          SessionUser.objects.order_bookings.set.order_id(metadata.getBookingId(), order_id.value).then(() => {
-            try {
-              const hasSeal = transactionItems.containsWashCertificate();
-              if (!hasSeal) {
-                metadata.setLoadingState(true);
-                metadata.setLoadingMessage(t('admin.pos.waiting_for_booking'));
-                SessionUser.objects.order_bookings.functions.complete(metadata.getBookingId(), null, (response: any) => {
-                  console.log('Auto-completed booking without safety seal prompt (mobile POS transaction state)');
-                  completeOrder();
-                });
-              } else {
-                popups.select('complete_booking', {});
-                awaitBookingCompletion(() => {
-                  completeOrder();
-                });
-              }
-            } catch (err) {
-              console.error('Error checking safety seal from transaction state:', err);
-              popups.select('complete_booking', {});
-              awaitBookingCompletion(() => {
-                completeOrder();
-              });
-            }
-          }).catch((err: any) => {
-            console.error('Error setting order_id on booking:', err);
-            errors.value.push(err);
-            completeOrder();
-          });
-        }
-      } else {
-        // The booking has been completed, complete the order
-        completeOrder();
-      }
-    }).catch((error: any) => {
-      errors.value.push(error);
-      // An error occurred, log it and complete the order anyway
-      console.warn('An error occurred while checking if the booking has been completed:', error);
-      completeOrder();
+  try {
+    await finalizeCurrentMobileOrder();
+    popups.select('completed_transaction', {
+      message: `Order #${order_id.value} successfully created.`,
     });
-  } else {
     completeOrder();
+  } catch (error: any) {
+    errors.value.push(error);
+    console.warn('An error occurred while completing the mobile order:', error);
+    popups.select('error');
   }
 };
 
-const awaitBookingCompletion = (callback: Function) => {
-  // Lock the next step button to a loading state
-  metadata.setLoadingState(true);
-  metadata.setLoadingMessage(t('admin.pos.waiting_for_booking'));
-  const interval = setInterval(() => {
-    // If the popup is still open, we know the booking is not completed yet
-    if (popups.isSet.value) {
-      // The popup is still open, so the booking is not completed yet
-      return;
-    }
-    // Check if the booking has been completed
-    SessionUser.objects.bookings.functions.isBookingCompleted(metadata.getBookingId()).then((isBookingCompleted: boolean) => {
-      if (isBookingCompleted) {
-        clearInterval(interval);
-        callback();
-      } // Else, console.warn and wait for the next interval
-      else {
-        console.warn('Booking is not completed, but the popup is closed. Expecting cancelation or error.');
-        clearInterval(interval);
-        callback(); // Proceed to complete the order anyway
-      }
-    }).catch((error: any) => {
-      errors.value.push(error);
-      console.warn('An error occurred while checking if the booking has been completed:', error);
-      completeOrder();
-    });
-  }, 250) // Check every 250ms (Should be quick enough to catch the popup close event);
-}
-
 const completeOrder = () => {
   addTransactionToHistory(order_id.value);
   setTimeout(() => {
@@ -383,7 +324,7 @@ const onClick = async () => {
         break;
       case 2:
         step1();
-        step2();
+        await step2();
         break;
       case 3:
         // This step is not defined, but you can add your logic here if needed
diff --git a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileFixedBottomControl.vue b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileFixedBottomControl.vue
index 77ff4d64..34a7ad5f 100644
--- a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileFixedBottomControl.vue
+++ b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileFixedBottomControl.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {defineProps, computed, ref, nextTick, onMounted, onUnmounted} from "vue";
+import {computed, ref, nextTick, onMounted, onUnmounted} from "vue";
 const props = defineProps({
   // Blur amount
   blurAmount: {
diff --git a/src/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue b/src/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue
index 8b1b59fa..7c3d2775 100644
--- a/src/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue
+++ b/src/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue
@@ -9,6 +9,10 @@ import type {Addon} from "@/components/displays/department/pos/steps/mobile/obje
 import type { PosLocation } from './PosLocation.vue';
 import type { PosSoundEffect } from './PosSoundEffect.vue';
 import type { PosActionButton } from './PosActionButton.vue';
+import {
+  doesTransactionContainWashCertificateProduct,
+  WASH_CERTIFICATE_PRODUCT_ID,
+} from "@/components/displays/department/pos/utils/washCertificate.js";
 import i18n from '@/i18n';
 
 /** Views */
@@ -535,7 +539,6 @@ const primaryItem = ref<PosProduct | null>(null);
 // This could include things like additional products, services, or fees.
 // It is a separate list to allow for flexibility in the transaction.
 const additionalItems = ref<PosProduct[]>([]);
-const WASH_CERTIFICATE_PRODUCT_ID = 41;
 const normalizeAdditionalItem = (item: PosProduct): PosProduct => ({
   ...item,
   quantity: Number(item?.quantity ?? 0) > 0 ? Number(item.quantity) : 1,
@@ -751,30 +754,11 @@ const promptForNotesIfRequired = (product: PosProduct, callback: (notes: string)
 }
 
 const containsWashCertificate = (): boolean => {
-  // Check if the transaction contains a wash certificate, either as an additional item or as an addon to any item
-  const washCertificateId = WASH_CERTIFICATE_PRODUCT_ID;
-  // Check primary item addons
-  if (primaryItem.value && primaryItem.value.addons) {
-    const hasAddon = primaryItem.value.addons.some(addon => addon.product.id === washCertificateId && (addon.quantity || 0) > 0);
-    if (hasAddon) return true;
-  }
-  // Check additional items
-  for (const item of additionalItems.value) {
-    if (item.id === washCertificateId) {
-      return true;
-    }
-    if (item.addons) {
-      const hasAddon = item.addons.some(addon => addon.product.id === washCertificateId && (addon.quantity || 0) > 0);
-      if (hasAddon) return true;
-    }
-  }
-
-  // Mobile POS also allows wash certificate selection through attachments UI.
-  if (attachments.hasWashCertificate()) {
-    return true;
-  }
-
-  return false;
+  return doesTransactionContainWashCertificateProduct({
+    primaryItem: primaryItem.value,
+    additionalItems: additionalItems.value,
+    attachmentsHasWashCertificate: attachments.hasWashCertificate(),
+  });
 }
 
 
@@ -1123,6 +1107,7 @@ const camera = {
 const customerId = ref<number | null>(null);
 const notes = ref<string>('');
 const reference = ref<string>('');
+const safetySeal = ref<string>('');
 const washId = ref<string | null>(null); // The Wash ID is used to track the related wash event
 const bookingId = ref<number | null>(null); // The Booking ID is used to track the related booking event
 const bookingSelectionSkippedPlate = ref<string>('');
@@ -1174,6 +1159,14 @@ const setReference = (newReference: string | null | undefined) => {
 const getReference = () => {
   return reference.value;
 }
+// Function to set safety seal
+const setSafetySeal = (newSafetySeal: string | null | undefined) => {
+  safetySeal.value = newSafetySeal ?? '';
+}
+// Function to get safety seal
+const getSafetySeal = () => {
+  return safetySeal.value;
+}
 // Function to set the wash ID
 const setWashId = (id: string | null) => {
   washId.value = id;
@@ -1226,6 +1219,10 @@ const metadata = {
   reference,
   setReference,
   getReference,
+  // Safety seal
+  safetySeal,
+  setSafetySeal,
+  getSafetySeal,
   // Wash ID
   washId,
   setWashId,
@@ -1385,6 +1382,7 @@ const resetMetadata = () => {
   metadata.customerId.value = null;
   metadata.notes.value = '';
   metadata.reference.value = '';
+  metadata.safetySeal.value = '';
   metadata.washId.value = null;
   metadata.bookingId.value = null;
   metadata.bookingSelectionSkippedPlate.value = '';
@@ -1550,6 +1548,7 @@ const buildSnapshot = () => ({
     customerId: metadata.customerId.value,
     notes: metadata.notes.value,
     reference: metadata.reference.value,
+    safetySeal: metadata.safetySeal.value,
     washId: metadata.washId.value,
     bookingId: metadata.bookingId.value,
     bookingSelectionSkippedPlate: metadata.bookingSelectionSkippedPlate.value,
@@ -1635,6 +1634,7 @@ const retrievePos = () => {
       metadata.customerId.value = parsedData.metadata.customerId ?? null;
       metadata.notes.value = parsedData.metadata.notes ?? '';
       metadata.reference.value = parsedData.metadata.reference ?? '';
+      metadata.safetySeal.value = parsedData.metadata.safetySeal ?? '';
       metadata.washId.value = parsedData.metadata.washId ?? null;
       metadata.bookingId.value = parsedData.metadata.bookingId ?? null;
       metadata.bookingSelectionSkippedPlate.value = parsedData.metadata.bookingSelectionSkippedPlate ?? '';
@@ -1705,6 +1705,7 @@ watch(() => [
   metadata.customerId.value,
   metadata.notes.value,
   metadata.reference.value,
+  metadata.safetySeal.value,
   metadata.washId.value,
   metadata.bookingId.value,
   metadata.bookingSelectionSkippedPlate.value,
@@ -1862,6 +1863,9 @@ export const Customer = {
   reference,
   setReference,
   getReference,
+  safetySeal,
+  setSafetySeal,
+  getSafetySeal,
   washId,
   setWashId,
   getWashId,
@@ -2041,6 +2045,9 @@ export {
   reference,
   setReference,
   getReference,
+  safetySeal,
+  setSafetySeal,
+  getSafetySeal,
   washId,
   setWashId,
   getWashId,
diff --git a/src/components/displays/department/pos/steps/mobile/objects/mobileOrderCompletion.js b/src/components/displays/department/pos/steps/mobile/objects/mobileOrderCompletion.js
new file mode 100644
index 00000000..59912216
--- /dev/null
+++ b/src/components/displays/department/pos/steps/mobile/objects/mobileOrderCompletion.js
@@ -0,0 +1,101 @@
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import {
+  order_id,
+  order_notes,
+  order_safety_seal,
+  reference,
+} from "@/components/shop/POSDepartmentProcess.vue";
+import { metadata } from "./PosDepartmentStepMobileFlow.vue";
+
+const normalizeTextValue = (value) => {
+  return value === null || value === undefined ? "" : String(value).trim();
+};
+
+const getNormalizedOrderId = () => {
+  const parsed = Number.parseInt(String(order_id.value ?? ""), 10);
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+};
+
+const getNormalizedBookingId = () => {
+  const parsed = Number.parseInt(String(metadata.getBookingId?.() ?? ""), 10);
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+};
+
+export const getResolvedMobileSafetySeal = () => {
+  const metadataSafetySeal = normalizeTextValue(metadata.getSafetySeal?.());
+  if (metadataSafetySeal !== "") {
+    return metadataSafetySeal;
+  }
+
+  return normalizeTextValue(order_safety_seal.value);
+};
+
+export const syncMobileSafetySealState = (value) => {
+  const normalizedValue = normalizeTextValue(value);
+  order_safety_seal.value = normalizedValue;
+  metadata.setSafetySeal?.(normalizedValue);
+  return normalizedValue;
+};
+
+export const persistCurrentMobileOrderMetadata = async () => {
+  const normalizedOrderId = getNormalizedOrderId();
+  if (!normalizedOrderId) {
+    return null;
+  }
+
+  const normalizedReference = normalizeTextValue(metadata.getReference?.() ?? reference.value);
+  const normalizedNotes = normalizeTextValue(metadata.getNotes?.() ?? order_notes.value);
+  const normalizedSafetySeal = syncMobileSafetySealState(getResolvedMobileSafetySeal());
+
+  reference.value = normalizedReference;
+  order_notes.value = normalizedNotes;
+
+  await Promise.all([
+    SessionUser.objects.orders.set.reference(normalizedOrderId, normalizedReference),
+    SessionUser.objects.orders.set.notes(normalizedOrderId, normalizedNotes),
+    SessionUser.objects.orders.set.safety_seal(normalizedOrderId, normalizedSafetySeal),
+  ]);
+
+  return normalizedOrderId;
+};
+
+export const linkCurrentMobileOrderToBooking = async () => {
+  const normalizedOrderId = getNormalizedOrderId();
+  const normalizedBookingId = getNormalizedBookingId();
+  if (!normalizedOrderId || !normalizedBookingId) {
+    return null;
+  }
+
+  await SessionUser.objects.orders.set.booking_id(normalizedOrderId, normalizedBookingId);
+  await SessionUser.objects.order_bookings.set.order_id(normalizedBookingId, normalizedOrderId);
+  return normalizedBookingId;
+};
+
+export const completeLinkedBookingIfNeeded = async (bookingId = getNormalizedBookingId()) => {
+  const normalizedBookingId = Number.parseInt(String(bookingId ?? ""), 10);
+  if (!Number.isInteger(normalizedBookingId) || normalizedBookingId <= 0) {
+    return null;
+  }
+
+  const booking = await SessionUser.objects.order_bookings.get.single(normalizedBookingId).catch(() => null);
+  if (booking?.status === "completed") {
+    return booking;
+  }
+
+  return SessionUser.objects.order_bookings.functions.complete(normalizedBookingId, null);
+};
+
+export const finalizeCurrentMobileOrder = async () => {
+  const normalizedOrderId = await persistCurrentMobileOrderMetadata();
+  if (!normalizedOrderId) {
+    return null;
+  }
+
+  const normalizedBookingId = await linkCurrentMobileOrderToBooking();
+  if (normalizedBookingId) {
+    await completeLinkedBookingIfNeeded(normalizedBookingId);
+  }
+
+  await SessionUser.objects.orders.functions.mark_as_completed(normalizedOrderId);
+  return normalizedOrderId;
+};
diff --git a/src/components/displays/department/pos/utils/orderBookingDisplay.js b/src/components/displays/department/pos/utils/orderBookingDisplay.js
index 7b9cf1a5..3eef809b 100644
--- a/src/components/displays/department/pos/utils/orderBookingDisplay.js
+++ b/src/components/displays/department/pos/utils/orderBookingDisplay.js
@@ -1,5 +1,40 @@
 const normalizeDisplayValue = (value) => String(value ?? "").trim();
 
+const toFiniteNumber = (value) => {
+  if (value === null || value === undefined || value === "") {
+    return null;
+  }
+
+  const parsedValue = Number(value);
+  return Number.isFinite(parsedValue) ? parsedValue : null;
+};
+
+const getBookingItemQuantity = (item) => {
+  const quantityCandidates = [item?.quantity, item?.qty, item?.amount, item?.product?.quantity];
+
+  for (const candidate of quantityCandidates) {
+    const parsedValue = toFiniteNumber(candidate);
+    if (parsedValue !== null && parsedValue > 0) {
+      return parsedValue;
+    }
+  }
+
+  return 1;
+};
+
+const getBookingItemUnitPrice = (item) => {
+  const priceCandidates = [item?.price, item?.unit_price, item?.product?.price, item?.product_price];
+
+  for (const candidate of priceCandidates) {
+    const parsedValue = toFiniteNumber(candidate);
+    if (parsedValue !== null) {
+      return parsedValue;
+    }
+  }
+
+  return null;
+};
+
 const appendServiceName = (collection, value) => {
   const normalizedValue = normalizeDisplayValue(value);
   if (!normalizedValue) {
@@ -20,6 +55,45 @@ const collectBookingItemNames = (item, collection) => {
   itemAddons.forEach((addon) => collectBookingItemNames(addon, collection));
 };
 
+const collectBookingItemPreviewRows = (item, collection, options = {}) => {
+  if (!item || typeof item !== "object") {
+    return;
+  }
+
+  const normalizedOptions = {
+    depth: 0,
+    parentKey: "booking-item",
+    index: 0,
+    ...options,
+  };
+  const label = normalizeDisplayValue(item?.product?.name ?? item?.name ?? item?.product_name ?? "");
+  const quantity = getBookingItemQuantity(item);
+  const unitPrice = getBookingItemUnitPrice(item);
+  const rowKeySource =
+    item?.id ?? item?.product?.id ?? item?.option_id ?? item?.name ?? item?.product?.name ?? normalizedOptions.index;
+  const rowKey = `${normalizedOptions.parentKey}-${String(rowKeySource)}`;
+
+  if (label) {
+    collection.push({
+      key: rowKey,
+      label,
+      quantity,
+      unitPrice,
+      totalPrice: unitPrice === null ? null : quantity * unitPrice,
+      depth: normalizedOptions.depth,
+    });
+  }
+
+  const itemAddons = Array.isArray(item?.addons) ? item.addons : [];
+  itemAddons.forEach((addon, addonIndex) => {
+    collectBookingItemPreviewRows(addon, collection, {
+      depth: normalizedOptions.depth + 1,
+      parentKey: `${rowKey}-addon`,
+      index: addonIndex,
+    });
+  });
+};
+
 const getUniqueValues = (values = []) => {
   const seenValues = new Set();
 
@@ -82,6 +156,32 @@ export const getOrderBookingServiceText = (booking) => {
   return getOrderBookingServiceLabels(booking).join(", ");
 };
 
+export const getOrderBookingItemPreviewRows = (booking) => {
+  const previewRows = [];
+  const bookingItems = Array.isArray(booking?.items) ? booking.items : [];
+
+  bookingItems.forEach((item, index) => {
+    collectBookingItemPreviewRows(item, previewRows, {
+      depth: 0,
+      parentKey: `booking-${booking?.id ?? "unknown"}-item`,
+      index,
+    });
+  });
+
+  return previewRows;
+};
+
+export const getOrderBookingItemPreviewTotal = (booking) => {
+  const previewRows = getOrderBookingItemPreviewRows(booking);
+  const pricedRows = previewRows.filter((row) => row.totalPrice !== null);
+
+  if (pricedRows.length === 0) {
+    return null;
+  }
+
+  return pricedRows.reduce((sum, row) => sum + row.totalPrice, 0);
+};
+
 export const hasOrderBookingDisplayDetails = (booking) => {
   if (!booking || typeof booking !== "object") {
     return false;
diff --git a/src/components/displays/department/pos/utils/washCertificate.js b/src/components/displays/department/pos/utils/washCertificate.js
new file mode 100644
index 00000000..b9a0216a
--- /dev/null
+++ b/src/components/displays/department/pos/utils/washCertificate.js
@@ -0,0 +1,61 @@
+export const WASH_CERTIFICATE_PRODUCT_ID = 41;
+
+const LEGACY_WASH_CERTIFICATE_NAME_PATTERN = /vaskecertifikat|wash certificate|safety seal/i;
+
+const toInteger = (value) => {
+  const parsed = Number.parseInt(String(value ?? ""), 10);
+  return Number.isInteger(parsed) ? parsed : null;
+};
+
+const getCandidateName = (candidate) => {
+  return String(candidate?.product?.name ?? candidate?.name ?? candidate?.product_name ?? "").trim();
+};
+
+const hasActiveQuantity = (candidate) => {
+  const quantity = Number(candidate?.quantity ?? candidate?.product?.quantity ?? 1);
+  return Number.isFinite(quantity) ? quantity > 0 : false;
+};
+
+const hasActiveAddonQuantity = (candidate) => {
+  const quantity = Number(candidate?.quantity ?? candidate?.product?.quantity ?? 0);
+  return Number.isFinite(quantity) ? quantity > 0 : false;
+};
+
+export const isWashCertificateProduct = (candidate) => {
+  const candidateId = toInteger(candidate?.product?.id ?? candidate?.product_id ?? candidate?.id ?? candidate);
+  if (candidateId === WASH_CERTIFICATE_PRODUCT_ID) {
+    return true;
+  }
+
+  // Keep older mocked data and stale catalog entries functional while the UI
+  // standardizes on product 41 as the canonical wash-certificate item.
+  return LEGACY_WASH_CERTIFICATE_NAME_PATTERN.test(getCandidateName(candidate));
+};
+
+export const doesOrderContainWashCertificateProduct = (items = []) => {
+  return Array.isArray(items) && items.some((item) => hasActiveQuantity(item) && isWashCertificateProduct(item));
+};
+
+const containsWashCertificateAddon = (addons = []) => {
+  return Array.isArray(addons) && addons.some((addon) => hasActiveAddonQuantity(addon) && isWashCertificateProduct(addon));
+};
+
+export const doesTransactionContainWashCertificateProduct = ({
+  primaryItem = null,
+  additionalItems = [],
+} = {}) => {
+  if (primaryItem && containsWashCertificateAddon(primaryItem.addons)) {
+    return true;
+  }
+
+  for (const item of Array.isArray(additionalItems) ? additionalItems : []) {
+    if (hasActiveQuantity(item) && isWashCertificateProduct(item)) {
+      return true;
+    }
+
+    if (containsWashCertificateAddon(item?.addons)) {
+      return true;
+    }
+  }
+  return false;
+};
diff --git a/src/components/displays/pagination/models/SuperUserDashboard/SubusersPagination.vue b/src/components/displays/pagination/models/SuperUserDashboard/SubusersPagination.vue
index b93cc74f..01ab45f7 100644
--- a/src/components/displays/pagination/models/SuperUserDashboard/SubusersPagination.vue
+++ b/src/components/displays/pagination/models/SuperUserDashboard/SubusersPagination.vue
@@ -1,18 +1,19 @@
 <script setup>
+import { defineProps, provide } from "vue";
+import { useI18n } from "vue-i18n";
 import SubusersTable from "@/components/displays/superuser/tables/SubusersTable.vue";
+import PaginationNavigation from "@/components/displays/pagination/PaginationNavigation.vue";
+import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
+import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
+import { PaginatedListKey, usePaginatedList } from "@/components/pagination/paginatedList.vue";
+
+const props = defineProps(["hideSearch", "autoLoad"]);
+const { t } = useI18n();
 
-let props = defineProps(["hideSearch", "autoLoad"]);
-import { defineProps } from "vue";
-import { useRouter } from "vue-router";
-import {
-  usePaginatedList,
-  PaginatedListKey
-} from "@/components/pagination/paginatedList.vue";
-import { provide } from "vue";
 const paginatedList = usePaginatedList();
 provide(PaginatedListKey, paginatedList);
+
 const {
-  isLoaded,
   isLoading,
   list,
   loadList,
@@ -22,24 +23,17 @@ const {
   setEndpoint,
   setMetaItemsPerPage,
   setPage,
-  metaSearch,
   search,
-  setFilter,
   setOrder,
   hideSearchField,
   setHideSearchField,
+  setAdditionalQueryParameters,
 } = paginatedList;
-import PaginationNavigation from "@/components/displays/pagination/PaginationNavigation.vue";
 
-import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
-import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-const router = useRouter();
 setEndpoint("/subusers", false);
+setAdditionalQueryParameters({ include_non_enabled: true });
+setOrder("created_at", "desc");
 
-// Hide the search field, if the hideSearch prop is set
 if (props.hideSearch) {
   setHideSearchField(true);
 }
@@ -47,30 +41,56 @@ if (props.hideSearch) {
 if (props.autoLoad) {
   loadList();
 }
-
 </script>
 
 <template>
-  <input @input="search($event.target.value)" class="input" type="text" :placeholder="$t('global.search_subuser')" v-if="!hideSearchField"/>
-  <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
+  <div class="columns is-vcentered is-multiline">
+    <div class="column">
+      <input
+        v-if="!hideSearchField"
+        class="input"
+        type="text"
+        :placeholder="$t('global.search_driver')"
+        @input="search($event.target.value)"
+      />
+    </div>
+    <div class="column is-narrow pl-0">
+      <LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">
+        {{ t('pagination.reload') }}
+      </LoadButtonWhileAwait>
+    </div>
+  </div>
+
+  <PaginationDisplay
+    :metaItemsPerPage="metaItemsPerPage"
+    :loadFunction="loadList"
+    :isLoading="isLoading"
+    :setMetaItemsPerPage="setMetaItemsPerPage"
+  >
     <template #paginationColumns>
-      <!-- Sort by created_at -->
       <div class="column is-narrow my-3">
-        <label class="label is-small">{{ t('pagination.order_direction') }}</label>
+        <label class="label is-small">{{ t("pagination.order_direction") }}</label>
         <div class="control">
           <div class="select">
             <select @change="setOrder('created_at', $event.target.value); loadList();">
-              <option value="asc">{{ t('pagination.ascending') }}</option>
-              <option value="desc" selected>{{ t('pagination.descending') }}</option>
+              <option value="asc">{{ t("pagination.ascending") }}</option>
+              <option value="desc" selected>{{ t("pagination.descending") }}</option>
             </select>
           </div>
         </div>
       </div>
     </template>
   </PaginationDisplay>
+
   <SubusersTable :objects="list" />
-  <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
-  <LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">{{ t('pagination.reload') }}</LoadButtonWhileAwait>
+
+  <PaginationNavigation
+    :currentPage="metaCurrentPage"
+    :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)"
+    :loadFunction="loadList"
+    :setPage="setPage"
+    :isLoading="isLoading"
+  />
 </template>
 
 <style scoped>
diff --git a/src/components/displays/selectors/SubuserGrantPermissionNodes.vue b/src/components/displays/selectors/SubuserGrantPermissionNodes.vue
index 362e07d5..d8bc4ee6 100644
--- a/src/components/displays/selectors/SubuserGrantPermissionNodes.vue
+++ b/src/components/displays/selectors/SubuserGrantPermissionNodes.vue
@@ -1,95 +1,115 @@
 <script setup lang="ts">
+import { BCheckbox, BField } from "buefy";
+import { onMounted, ref, watch } from "vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
-import { SubuserGrants } from "@/components/session/token/SessionUser/Objects/SubuserGrants.vue";
-import { ref, onMounted, watch, defineEmits } from "vue";
-import {BCheckbox} from "buefy";
 
 const props = defineProps({
   grant: {
-    type: Object as () => { id: number, permissions: string[], name: string },
-    default: () => { return { id: 0, permissions: []} },
-    required: true
+    type: Object as () => { id: number; permissions: string[]; name: string },
+    default: () => ({ id: 0, permissions: [], name: "" }),
+    required: true,
   },
   permissions: {
     type: Array as () => string[],
     default: () => [],
-    required: true
-  }
+    required: true,
+  },
 });
 
 type PermissionNode = {
-  "key": "BOOKINGS_DELETE",
-  "name": "Delete Bookings",
-  "description": "Allows the user to delete existing bookings",
-  "type": "DELETE",
-  "default": false
-}
+  key: string;
+  name: string;
+  description: string;
+  type: string;
+  default: boolean;
+};
+
 type PermissionNodeGroup = {
-  "group": "Bookings",
-  "description": "Bookings management permissions",
-  "nodes": PermissionNode[]
-}
+  group: string;
+  description: string;
+  nodes: PermissionNode[];
+};
+
 const permissionNodes = ref<PermissionNodeGroup[]>([]);
 const selectedPermissions = ref<string[]>([]);
+const isLoading = ref(true);
+
+const emit = defineEmits(["update:permissions"]);
+
+const syncPermissions = (value: string[]) => {
+  selectedPermissions.value = [...new Set((value || []).filter(Boolean))];
+};
+
+const togglePermission = (permissionKey: string, enabled: boolean) => {
+  if (enabled) {
+    selectedPermissions.value = [...new Set([...selectedPermissions.value, permissionKey])];
+    return;
+  }
+
+  selectedPermissions.value = selectedPermissions.value.filter((value) => value !== permissionKey);
+};
+
+watch(
+  () => props.permissions,
+  (newPermissions) => {
+    syncPermissions(newPermissions || []);
+  },
+  { immediate: true }
+);
+
+watch(selectedPermissions, (newPermissions) => {
+  emit("update:permissions", [...newPermissions]);
+});
+
 onMounted(async () => {
   try {
-    const response = await SessionUser.objects.subuser_grants.functions.getPermissionNodes();
-    permissionNodes.value = response;
-    console.warn("Fetched permission nodes:", permissionNodes.value);
+    permissionNodes.value = await SessionUser.objects.subuser_grants.functions.getPermissionNodes();
   } catch (error) {
     console.error("Failed to fetch permission nodes:", error);
+    permissionNodes.value = [];
+  } finally {
+    isLoading.value = false;
   }
-  initPermissions();
 });
-
-const emit = defineEmits(['update:permissions']);
-watch(() => props.grant.permissions, (newPermissions) => {
-  selectedPermissions.value = newPermissions || [];
-  emit('update:permissions', selectedPermissions.value);
-  savePermissions();
-});
-
-const isSelected = (key: string) => {
-  return selectedPermissions.value.includes(key);
-}
-
-const savePermissions = async () => {
-  try {
-    await SessionUser.objects.subuser_grants.set.permissions(props.grant.id, selectedPermissions.value);
-    console.log("Permissions updated successfully");
-  } catch (error) {
-    console.error("Failed to update permissions:", error);
-  }
-}
-
-const initPermissions = () => {
-  selectedPermissions.value = props.permissions || [];
-}
-
 </script>
 
 <template>
   <div>
     <h2 class="title is-4">Tilladelsesnoder for {{ props.grant.name }}</h2>
-    <div v-for="group in permissionNodes" :key="group.group" class="box">
+    <p class="mb-4 has-text-grey">
+      Vælg tilladelserne og tryk derefter på Gem i dialogen for at opdatere chaufføren.
+    </p>
+
+    <div v-if="isLoading" class="notification is-light">
+      Henter tilladelser...
+    </div>
+
+    <div v-else-if="permissionNodes.length === 0" class="notification is-warning is-light">
+      Ingen tilladelsesnoder blev fundet.
+    </div>
+
+    <div v-else v-for="group in permissionNodes" :key="group.group" class="box">
       <div class="divider">
         <div class="content">
-        <h3 class="title is-5">{{ group.group }}</h3>
-        <p class="subtitle is-6">{{ group.description }}</p>
+          <h3 class="title is-5">{{ group.group }}</h3>
+          <p class="subtitle is-6">{{ group.description }}</p>
         </div>
       </div>
+
       <div class="columns is-multiline">
         <div v-for="node in group.nodes" :key="node.key" class="column is-4">
-          <div class="box">
+          <div class="box permission-node">
             <h4 class="title is-6">{{ node.name }}</h4>
             <p class="subtitle is-7">{{ node.description }}</p>
-            <div class="field">
-              <div class="control">
-                <b-checkbox :native-value="node.key" v-model="selectedPermissions" @change="savePermissions" type="is-info">
-                  Aktiver
-                </b-checkbox>
-              </div>
-            </div>
+            <b-field class="permission-checkbox">
+              <b-checkbox
+                :model-value="selectedPermissions.includes(node.key)"
+                @update:model-value="(checked) => togglePermission(node.key, !!checked)"
+                @input="(checked) => togglePermission(node.key, !!checked)"
+              >
+                Aktiver
+              </b-checkbox>
+            </b-field>
           </div>
         </div>
       </div>
@@ -98,5 +118,15 @@ const initPermissions = () => {
 </template>
 
 <style scoped>
+.permission-node {
+  height: 100%;
+}
 
-</style>
\ No newline at end of file
+.permission-checkbox {
+  margin-top: 0.75rem;
+}
+
+.permission-checkbox :deep(.field) {
+  margin-bottom: 0;
+}
+</style>
diff --git a/src/components/displays/superuser/tables/SubusersTable.vue b/src/components/displays/superuser/tables/SubusersTable.vue
index 7221acfc..88ee5e26 100644
--- a/src/components/displays/superuser/tables/SubusersTable.vue
+++ b/src/components/displays/superuser/tables/SubusersTable.vue
@@ -1,46 +1,278 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
+import Swal from "sweetalert2";
+import { usePaginatedListInstance } from "@/components/pagination/paginatedList.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
 
-const { t } = useI18n();
+const props = defineProps({
+  objects: {
+    type: Array,
+    default: () => [],
+  },
+});
 
-import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
-import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
+const { loadList } = usePaginatedListInstance();
 
-defineProps(['objects']);
+const canEditDetails = () => SessionUser.canAccessUser() || SessionUser.hasPermission("SUBUSERS_EDIT");
+const canEditPermissions = () => SessionUser.canAccessUser() || SessionUser.hasPermission("SUBUSERS_EDIT");
+const canDisableAccess = () => SessionUser.canAccessUser() || SessionUser.hasPermission("SUBUSERS_DELETE");
+const canResendInvite = () => SessionUser.canAccessUser() || SessionUser.hasPermission("SUBUSERS_EDIT");
+
+const formatDateTime = (dateString) => {
+  if (!dateString) {
+    return "-";
+  }
+
+  return new Date(dateString).toLocaleString("da-DK");
+};
+
+const formatPhone = (subuser) => {
+  if (!subuser?.phone_country_code || !subuser?.phone) {
+    return "-";
+  }
+
+  return `+${subuser.phone_country_code} ${subuser.phone}`;
+};
+
+const permissionSummary = (subuser) =>
+  SessionUser.objects.subusers.functions.permissionSummary(subuser?.grant_permissions || []);
+
+const statusLabel = (subuser) => {
+  switch (subuser?.access_state) {
+    case "active":
+      return "Aktiv";
+    case "pending_setup":
+      return "Afventer opsætning";
+    case "disabled":
+      return "Deaktiveret";
+    default:
+      return "Ingen adgang";
+  }
+};
+
+const statusClass = (subuser) => {
+  switch (subuser?.access_state) {
+    case "active":
+      return "is-success";
+    case "pending_setup":
+      return "is-warning";
+    case "disabled":
+      return "is-light";
+    default:
+      return "is-light";
+  }
+};
+
+const refreshList = async () => {
+  await loadList();
+};
+
+const onEditSubuser = async (subuser) => {
+  await SessionUser.objects.subusers.functions.showEditForm(subuser, refreshList);
+};
+
+const onEditPermissions = async (subuser) => {
+  if (!subuser?.grant_id) {
+    return;
+  }
+
+  await SessionUser.objects.subuser_grants.functions.showPermissionEditForm(
+    {
+      id: subuser.grant_id,
+      permissions: subuser.grant_permissions || [],
+      name: subuser.name || subuser.username || `Chauffør ${subuser.id}`,
+    },
+    refreshList
+  );
+};
+
+const onEditNote = async (subuser) => {
+  if (!subuser?.grant_id) {
+    return;
+  }
+
+  const result = await Swal.fire({
+    title: "Redigér note",
+    input: "textarea",
+    inputLabel: "Intern note",
+    inputValue: subuser.grant_note || "",
+    inputPlaceholder: "Skriv en note til chaufførens adgang",
+    showCancelButton: true,
+    confirmButtonText: "Gem",
+    cancelButtonText: "Annuller",
+    preConfirm: async (value) => {
+      try {
+        await SessionUser.objects.subuser_grants.set.note(subuser.grant_id, value || "");
+        return value || "";
+      } catch (error) {
+        Swal.showValidationMessage("Kunne ikke gemme noten.");
+        return false;
+      }
+    },
+  });
+
+  if (result.isConfirmed) {
+    await refreshList();
+  }
+};
+
+const onToggleEnabled = async (subuser, enabled) => {
+  if (!subuser?.grant_id) {
+    return;
+  }
+
+  const actionLabel = enabled ? "genaktivere" : "deaktivere";
+  const result = await Swal.fire({
+    title: `${enabled ? "Genaktivér" : "Deaktivér"} adgang`,
+    text: `Vil du ${actionLabel} chaufførens adgang for den valgte kunde?`,
+    icon: "warning",
+    showCancelButton: true,
+    confirmButtonText: enabled ? "Genaktivér" : "Deaktivér",
+    cancelButtonText: "Annuller",
+  });
+
+  if (!result.isConfirmed) {
+    return;
+  }
+
+  try {
+    await SessionUser.objects.subuser_grants.set.enabled(subuser.grant_id, enabled);
+    await refreshList();
+  } catch (error) {
+    await Swal.fire({
+      title: "Kunne ikke opdatere adgang",
+      text: error?.response?.data?.data?.message || error?.response?.data?.message || "Der opstod en fejl.",
+      icon: "error",
+      confirmButtonText: "Luk",
+    });
+  }
+};
+
+const onResendInvite = async (subuser) => {
+  await SessionUser.objects.subusers.functions.resendInvite(subuser, refreshList);
+};
 </script>
 
 <template>
-  <table class="table is-fullwidth">
-    <thead>
-      <tr>
-        <th>{{ $t('objects.columns.id') }}</th>
-        <th>{{ $t('objects.columns.customer_number') }}</th>
-        <th>{{ $t('tables.users.name') }}</th>
-        <th class="has-text-right">{{ $t('tables.actions') }}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="subuser in objects" :key="subuser.id">
-        <td>{{ subuser.id }}</td>
-        <td>{{ subuser.customer_number }}</td>
-        <td>{{ subuser.display_name }}</td>
-        <td>
-          <div class="buttons is-float-right">
-            <ActionSettingsWheelButton>
-              <template #actions>
-                <ActionSettingsWheelItem
-                    icon="fas fa-eye"
-                    :label="$t('global.show')"
-                />
-              </template>
-            </ActionSettingsWheelButton>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <div class="table-container">
+    <table class="table is-fullwidth is-striped is-hoverable">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Chauffør</th>
+          <th>Kontakt</th>
+          <th>Adgang</th>
+          <th>Tilladelser</th>
+          <th>Note</th>
+          <th>Oprettet</th>
+          <th>Opdateret</th>
+          <th class="has-text-right">Handlinger</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="props.objects.length === 0">
+          <td colspan="9" class="has-text-centered has-text-grey py-6">Ingen chauffører fundet.</td>
+        </tr>
+
+        <tr v-for="subuser in props.objects" :key="subuser.id">
+          <td>{{ subuser.id }}</td>
+
+          <td>
+            <div class="has-text-weight-semibold">{{ subuser.name || "-" }}</div>
+            <div class="is-size-7 has-text-grey">@{{ subuser.username || "ingen-bruger" }}</div>
+          </td>
+
+          <td>
+            <div>{{ subuser.email || "-" }}</div>
+            <div class="is-size-7 has-text-grey">{{ formatPhone(subuser) }}</div>
+          </td>
+
+          <td>
+            <span class="tag" :class="statusClass(subuser)" :data-testid="`subuser-status-${subuser.id}`">
+              {{ statusLabel(subuser) }}
+            </span>
+            <div class="is-size-7 has-text-grey mt-2">
+              <span v-if="subuser.grant_enabled">Grant aktiv</span>
+              <span v-else>Grant inaktiv</span>
+            </div>
+          </td>
+
+          <td>
+            <div class="permission-summary">{{ permissionSummary(subuser) }}</div>
+          </td>
+
+          <td>
+            <div>{{ subuser.grant_note || "-" }}</div>
+            <button
+              v-if="canEditPermissions() && subuser.grant_id"
+              class="button is-text is-small px-0 mt-1"
+              type="button"
+              @click="onEditNote(subuser)"
+            >
+              Redigér note
+            </button>
+          </td>
+
+          <td>{{ formatDateTime(subuser.created_at) }}</td>
+          <td>{{ formatDateTime(subuser.updated_at) }}</td>
+
+          <td>
+            <div class="buttons is-justify-content-flex-end action-buttons">
+              <button
+                v-if="canEditDetails()"
+                class="button is-small"
+                type="button"
+                :data-testid="`subuser-edit-${subuser.id}`"
+                @click="onEditSubuser(subuser)"
+              >
+                Redigér
+              </button>
+
+              <button
+                v-if="canEditPermissions() && subuser.grant_id"
+                class="button is-small"
+                type="button"
+                :data-testid="`subuser-permissions-${subuser.id}`"
+                @click="onEditPermissions(subuser)"
+              >
+                Tilladelser
+              </button>
+
+              <button
+                v-if="canResendInvite()"
+                class="button is-small"
+                type="button"
+                :data-testid="`subuser-resend-${subuser.id}`"
+                @click="onResendInvite(subuser)"
+              >
+                Gensend
+              </button>
+
+              <button
+                v-if="canDisableAccess() && subuser.grant_id"
+                class="button is-small"
+                :class="subuser.grant_enabled ? 'is-danger is-light' : 'is-success is-light'"
+                type="button"
+                :data-testid="`subuser-toggle-${subuser.id}`"
+                @click="onToggleEnabled(subuser, !subuser.grant_enabled)"
+              >
+                {{ subuser.grant_enabled ? "Deaktivér" : "Aktivér" }}
+              </button>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>
 
 <style scoped>
+.permission-summary {
+  max-width: 260px;
+  word-break: break-word;
+}
 
+.action-buttons {
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
 </style>
diff --git a/src/components/forms/department/pos/SelectVehicleFormPOS.vue b/src/components/forms/department/pos/SelectVehicleFormPOS.vue
index d578238f..e836e62f 100644
--- a/src/components/forms/department/pos/SelectVehicleFormPOS.vue
+++ b/src/components/forms/department/pos/SelectVehicleFormPOS.vue
@@ -21,6 +21,8 @@ import {
   isSelectedOrderBookingSkippedForPlate,
   doesVehiclePlateRequireBookingSelection,
   getSelectedVehiclePlateBooking,
+  loadPendingBookings,
+  ensureVehiclePlateBookingsLoaded,
 } from "@/components/shop/POSDepartmentProcess.vue";
 import PosNotes from "@/components/displays/department/pos/PosNotes.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
@@ -50,7 +52,10 @@ const keyDownNextInput = (event, field_id) => {
   }
 };
 
-const normalizePlateValue = (value) => String(value ?? "").replace(/\s/g, "").toUpperCase();
+const normalizePlateValue = (value) =>
+  String(value ?? "")
+    .replace(/\s/g, "")
+    .toUpperCase();
 
 const getCurrentVehiclePlate = () => {
   return normalizePlateValue(reg_1.value || vehicleObject.value?.reg);
@@ -153,10 +158,7 @@ const applyBookingMetadata = async (booking) => {
   const previousNotes = String(order_notes.value ?? "").trim();
   const previousPo = String(order_po.value ?? "").trim();
   const bookingCustomerNumber = getBookingCustomerNumber(booking);
-  if (
-    bookingCustomerNumber &&
-    Number.parseInt(String(customer_id.value || ""), 10) !== bookingCustomerNumber
-  ) {
+  if (bookingCustomerNumber && Number.parseInt(String(customer_id.value || ""), 10) !== bookingCustomerNumber) {
     await searchAndSelectCustomer(bookingCustomerNumber);
   }
 
@@ -265,7 +267,10 @@ const getResolvedSelectedBooking = (currentPlate = getCurrentVehiclePlate(), mat
 
   const localBookingId = Number.parseInt(String(bookingObject.value?.id ?? ""), 10);
   if (Number.isInteger(localBookingId) && localBookingId > 0) {
-    return matches.find((booking) => Number.parseInt(String(booking?.id ?? ""), 10) === localBookingId) || bookingObject.value;
+    return (
+      matches.find((booking) => Number.parseInt(String(booking?.id ?? ""), 10) === localBookingId) ||
+      bookingObject.value
+    );
   }
 
   if (matches.length === 1) {
@@ -285,7 +290,8 @@ const buildDesktopStep1Context = (options = {}) => {
   const matches = Array.isArray(bookingMatches.value) ? bookingMatches.value : [];
   const selectedBooking = getResolvedSelectedBooking(currentPlate, matches);
   const skippedBooking = currentPlate !== "" && isSelectedOrderBookingSkippedForPlate(currentPlate);
-  const requiresBookingSelection = currentPlate !== "" && doesVehiclePlateRequireBookingSelection(currentPlate, matches);
+  const requiresBookingSelection =
+    currentPlate !== "" && doesVehiclePlateRequireBookingSelection(currentPlate, matches);
 
   let bookingResolution = "none";
   if (requiresBookingSelection) {
@@ -497,11 +503,45 @@ const skipBookingChoice = async (options = {}) => {
   });
 };
 
+const refreshOrderBookingMatches = async (options = {}) => {
+  const normalizedOptions = {
+    source: "booking_refresh",
+    committed: false,
+    ...options,
+  };
+  const currentPlate = getCurrentVehiclePlate();
+
+  if (!currentPlate) {
+    setBookingMatches([]);
+    const context = await getDesktopStep1Context({
+      committed: normalizedOptions.committed,
+      source: normalizedOptions.source,
+    });
+    emit("update:desktopStep1Context", context);
+    return context;
+  }
+
+  await loadPendingBookings();
+  const refreshedMatches = await ensureVehiclePlateBookingsLoaded(currentPlate, {
+    force: true,
+  });
+
+  setBookingMatches(refreshedMatches);
+
+  const context = await getDesktopStep1Context({
+    committed: normalizedOptions.committed,
+    source: normalizedOptions.source,
+  });
+  emit("update:desktopStep1Context", context);
+  return context;
+};
+
 defineExpose({
   getDesktopStep1Context,
   finalizeDesktopStep1Context,
   applyBookingChoice,
   skipBookingChoice,
+  refreshOrderBookingMatches,
 });
 </script>
 
@@ -613,10 +653,7 @@ defineExpose({
         {{ SessionUser.objects.global.language.select }} {{ SessionUser.objects.global.language.customer }}
       </div>
       <CustomerSearchFieldPos />
-      <VehicleCustomerSuggestionsPos
-        :reg_1="reg_1"
-        @customerSelected="searchAndSelectCustomer"
-      />
+      <VehicleCustomerSuggestionsPos :reg_1="reg_1" @customerSelected="searchAndSelectCustomer" />
     </template>
     <PosNotes
       v-if="showExistingNotes"
@@ -686,7 +723,9 @@ defineExpose({
                     </div>
                   </div>
                   <div class="column is-6" v-if="vehicleObject.wash_subscription">
-                    <div class="divider is-success">{{ SessionUser.objects.vehicles.columns.wash_subscription.label }}</div>
+                    <div class="divider is-success">
+                      {{ SessionUser.objects.vehicles.columns.wash_subscription.label }}
+                    </div>
                     <table class="table is-fullwidth">
                       <thead>
                         <tr>
@@ -696,7 +735,9 @@ defineExpose({
                       </thead>
                       <tbody>
                         <tr>
-                          <td>{{ SessionUser.objects.products.functions.getProductName(parseInt(vehicleObject.type)) }}</td>
+                          <td>
+                            {{ SessionUser.objects.products.functions.getProductName(parseInt(vehicleObject.type)) }}
+                          </td>
                           <td>1</td>
                         </tr>
                         <template v-for="item in getVehicleAddonList()" :key="item.id">
diff --git a/src/components/models/navigation/items/NavigationMenuItemsUser.vue b/src/components/models/navigation/items/NavigationMenuItemsUser.vue
index 1db9ee34..3cdd73a2 100644
--- a/src/components/models/navigation/items/NavigationMenuItemsUser.vue
+++ b/src/components/models/navigation/items/NavigationMenuItemsUser.vue
@@ -79,7 +79,7 @@ const items = computed<NavigationItemProps[]>(() => [
   },
   {
     label: t('nav.drivers'),
-    to: `/user/subusers/grants`,
+    to: `/user/subusers`,
     type: 'link',
     permissions: ['user', 'SUBUSERS_LIST'],
   },
diff --git a/src/components/session/token/SessionUser.vue b/src/components/session/token/SessionUser.vue
index d389427b..acb7461c 100644
--- a/src/components/session/token/SessionUser.vue
+++ b/src/components/session/token/SessionUser.vue
@@ -52,6 +52,7 @@ import {SelfServeMachineTypes} from "@/components/session/token/SessionUser/Obje
 import {ObjectsGlobal} from "@/components/session/token/SessionUser/Objects/ObjectsGlobal.vue";
 import Swal from "sweetalert2";
 import {SubuserGrants} from "@/components/session/token/SessionUser/Objects/SubuserGrants.vue";
+import {Subusers} from "@/components/session/token/SessionUser/Objects/Subusers.vue";
 
 /**
  * Initiate the user session on app start
@@ -491,6 +492,7 @@ export const SessionUser = {
     self_serve_vehicle_conditions: SelfServeVehicleConditions,
     self_serve_condition_rules: SelfServeConditionRules,
     self_serve_machine_types: SelfServeMachineTypes,
+    subusers: Subusers,
     subuser_grants: SubuserGrants,
     global: ObjectsGlobal,
   },
diff --git a/src/components/session/token/SessionUser/Objects/OrderBookings.vue b/src/components/session/token/SessionUser/Objects/OrderBookings.vue
index 0587577d..daaa9e01 100644
--- a/src/components/session/token/SessionUser/Objects/OrderBookings.vue
+++ b/src/components/session/token/SessionUser/Objects/OrderBookings.vue
@@ -331,11 +331,16 @@ export const OrderBookings = {
       );
     },
     complete: async (id, safetySeal = null, onAfterComplete = null) => {
+      const normalizedSafetySeal = typeof safetySeal === "string"
+        ? safetySeal.trim()
+        : safetySeal === null || safetySeal === undefined
+          ? null
+          : String(safetySeal).trim();
       return ObjectsGlobal.performAction(
           OrderBookings.meta.endpoint,
           id,
           "complete",
-          { safety_seal: parseInt(safetySeal) },
+          { safety_seal: normalizedSafetySeal === "" ? null : normalizedSafetySeal },
           onAfterComplete
       );
     },
@@ -404,4 +409,4 @@ export const OrderBookings = {
     );
   }
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/session/token/SessionUser/Objects/Orders.vue b/src/components/session/token/SessionUser/Objects/Orders.vue
index 444fff0e..ef907659 100644
--- a/src/components/session/token/SessionUser/Objects/Orders.vue
+++ b/src/components/session/token/SessionUser/Objects/Orders.vue
@@ -341,6 +341,14 @@ const showChangeOrderInvoiceCollectionForm = async (id, onAfterSubmit = null) =>
             required: false
           }
         },
+        safety_seal: {
+          label: t('admin.pos.safety_seal'),
+          type: "string",
+          sortable: true,
+          creation: {
+            required: false
+          }
+        },
         created_at: {
           label: t('objects.columns.date'),
           type: "datetime",
@@ -495,6 +503,14 @@ const showChangeOrderInvoiceCollectionForm = async (id, onAfterSubmit = null) =>
               po
           )
         },
+        safety_seal: async (id, safety_seal) => {
+          return ObjectsGlobal.set.column(
+              Orders.meta.endpoint,
+              id,
+              "safety_seal",
+              safety_seal
+          )
+        },
         created_at: async (id, created_at) => {
           return ObjectsGlobal.set.column(
               Orders.meta.endpoint,
diff --git a/src/components/session/token/SessionUser/Objects/SubuserGrants.vue b/src/components/session/token/SessionUser/Objects/SubuserGrants.vue
index c5fa2222..87ef7db3 100644
--- a/src/components/session/token/SessionUser/Objects/SubuserGrants.vue
+++ b/src/components/session/token/SessionUser/Objects/SubuserGrants.vue
@@ -123,11 +123,9 @@ export const SubuserGrants = {
       return ObjectsGlobal.get.objects("/subusers/permission-nodes");
     },
     showPermissionEditForm: async (grant, refreshCallback) => {
-      // Create a container for the Vue component
       const container = document.createElement("div");
       container.id = "permission-edit-container";
 
-      // Create the Vue app with the SubuserGrantPermissionNodes component
       const permissionsRef = ref(grant.permissions || []);
       const app = createApp({
         render() {
@@ -136,34 +134,41 @@ export const SubuserGrants = {
             permissions: permissionsRef.value,
             "onUpdate:permissions": (newPermissions) => {
               permissionsRef.value = newPermissions;
-              grant.permissions = newPermissions;
             }
           });
         }
       });
 
-      // Show the modal with SweetAlert2
-      Swal.fire({
+      const result = await Swal.fire({
         title: "Rediger tilladelser",
         html: container,
         width: "80%",
         showCloseButton: true,
         showConfirmButton: true,
-        confirmButtonText: "Luk",
+        showCancelButton: true,
+        confirmButtonText: "Gem",
+        cancelButtonText: "Annuller",
+        preConfirm: async () => {
+          try {
+            await SubuserGrants.set.permissions(grant.id, permissionsRef.value);
+            grant.permissions = [...permissionsRef.value];
+            return permissionsRef.value;
+          } catch (error) {
+            Swal.showValidationMessage("Kunne ikke gemme tilladelserne.");
+            return false;
+          }
+        },
         didOpen: () => {
-          // Mount the Vue app after the modal is open
           app.mount(container);
         },
         willClose: () => {
-          // Unmount the Vue app when the modal closes
           app.unmount();
         }
-      }).then(() => {
-        // Call the refresh callback if provided
-        if (refreshCallback && typeof refreshCallback === "function") {
-          refreshCallback();
-        }
       });
+
+      if (result.isConfirmed && refreshCallback && typeof refreshCallback === "function") {
+        refreshCallback();
+      }
     }
   },
   get: {
diff --git a/src/components/session/token/SessionUser/Objects/Subusers.vue b/src/components/session/token/SessionUser/Objects/Subusers.vue
new file mode 100644
index 00000000..3ee78de7
--- /dev/null
+++ b/src/components/session/token/SessionUser/Objects/Subusers.vue
@@ -0,0 +1,237 @@
+<script>
+import Swal from "sweetalert2";
+import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
+
+const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+const escapeHtml = (value) => String(value ?? "")
+  .replace(/&/g, "&amp;")
+  .replace(/</g, "&lt;")
+  .replace(/>/g, "&gt;")
+  .replace(/"/g, "&quot;")
+  .replace(/'/g, "&#039;");
+
+const buildSubuserFormHtml = (defaults = {}) => `
+  <div class="subuser-form">
+    <div class="field">
+      <label class="label">Navn</label>
+      <div class="control">
+        <input id="subuser-form-name" class="input" type="text" value="${escapeHtml(defaults.name || "")}" placeholder="Chaufførens navn" />
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-4">
+        <div class="field">
+          <label class="label">Landekode</label>
+          <div class="control">
+            <input id="subuser-form-phone-country-code" class="input" type="number" inputmode="numeric" value="${escapeHtml(defaults.phone_country_code || defaults.phoneCountryCode || 45)}" />
+          </div>
+        </div>
+      </div>
+      <div class="column">
+        <div class="field">
+          <label class="label">Telefon</label>
+          <div class="control">
+            <input id="subuser-form-phone" class="input" type="number" inputmode="numeric" value="${escapeHtml(defaults.phone || "")}" placeholder="Telefonnummer" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="field">
+      <label class="label">Brugernavn</label>
+      <div class="control">
+        <input id="subuser-form-username" class="input" type="text" value="${escapeHtml(defaults.username || "")}" placeholder="Valgfrit brugernavn" />
+      </div>
+    </div>
+    <div class="field">
+      <label class="label">E-mail</label>
+      <div class="control">
+        <input id="subuser-form-email" class="input" type="email" value="${escapeHtml(defaults.email || "")}" placeholder="Valgfri e-mailadresse" />
+      </div>
+    </div>
+  </div>
+`;
+
+const readSubuserFormValues = () => {
+  const name = document.getElementById("subuser-form-name")?.value?.trim() || "";
+  const phoneCountryCodeRaw = document.getElementById("subuser-form-phone-country-code")?.value?.trim() || "";
+  const phoneRaw = document.getElementById("subuser-form-phone")?.value?.trim() || "";
+  const username = document.getElementById("subuser-form-username")?.value?.trim() || "";
+  const email = document.getElementById("subuser-form-email")?.value?.trim() || "";
+
+  if (name.length < 3) {
+    Swal.showValidationMessage("Navn skal være mindst 3 tegn.");
+    return null;
+  }
+
+  if (!/^\d{1,3}$/.test(phoneCountryCodeRaw)) {
+    Swal.showValidationMessage("Landekode skal være 1-3 cifre.");
+    return null;
+  }
+
+  if (!/^\d{4,15}$/.test(phoneRaw)) {
+    Swal.showValidationMessage("Telefon skal være 4-15 cifre.");
+    return null;
+  }
+
+  if (username && username.length < 3) {
+    Swal.showValidationMessage("Brugernavn skal være mindst 3 tegn.");
+    return null;
+  }
+
+  if (email && !emailRegex.test(email)) {
+    Swal.showValidationMessage("Indtast en gyldig e-mailadresse.");
+    return null;
+  }
+
+  return {
+    name,
+    phone_country_code: Number.parseInt(phoneCountryCodeRaw, 10),
+    phone: Number.parseInt(phoneRaw, 10),
+    username: username || null,
+    email: email || null,
+  };
+};
+
+const showInviteFeedback = async (response) => {
+  const invite = response?.data?.data?.invite || response?.data?.invite || {};
+  const delivery = invite.delivery || {};
+  const setupLink = invite.setup_link;
+  const statusText = delivery.status === "sent"
+    ? "Invitationen blev sendt på SMS."
+    : (delivery.message || "SMS blev ikke sendt. Brug opsætningslinket nedenfor.");
+
+  const html = `
+    <p>${escapeHtml(statusText)}</p>
+    ${setupLink ? `<p class="mt-4"><a href="${escapeHtml(setupLink)}" target="_blank" rel="noopener noreferrer">${escapeHtml(setupLink)}</a></p>` : ""}
+  `;
+
+  await Swal.fire({
+    title: "Chauffør oprettet",
+    icon: "success",
+    html,
+    confirmButtonText: "Luk",
+  });
+};
+
+const submitSubuserForm = async ({ title, confirmButtonText, defaults = {}, endpoint, method, payloadBuilder }) => {
+  const result = await Swal.fire({
+    title,
+    html: buildSubuserFormHtml(defaults),
+    width: 640,
+    focusConfirm: false,
+    showCancelButton: true,
+    confirmButtonText,
+    cancelButtonText: "Annuller",
+    preConfirm: async () => {
+      const values = readSubuserFormValues();
+      if (!values) {
+        return false;
+      }
+
+      Swal.showLoading();
+
+      try {
+        const payload = payloadBuilder(values);
+        const response = await authenticatedRequest(endpoint, method, payload);
+        return response;
+      } catch (error) {
+        Swal.showValidationMessage(error?.response?.data?.data?.message || error?.response?.data?.message || "Kunne ikke gemme chaufføren.");
+        return false;
+      }
+    },
+  });
+
+  return result.isConfirmed ? result.value : null;
+};
+
+export const Subusers = {
+  meta: {
+    title: "Chauffører",
+    icon: "fas fa-id-card",
+    description: "Administrer chauffører og deres adgang",
+    endpoint: "/subusers",
+  },
+  functions: {
+    permissionSummary(permissions = []) {
+      if (!Array.isArray(permissions) || permissions.length === 0) {
+        return "Ingen tilladelser";
+      }
+
+      const normalized = permissions.filter(Boolean);
+      if (normalized.length <= 3) {
+        return normalized.join(", ");
+      }
+
+      return `${normalized.slice(0, 3).join(", ")} +${normalized.length - 3}`;
+    },
+    async showInviteForm(refreshCallback = null) {
+      const response = await submitSubuserForm({
+        title: "Invitér chauffør",
+        confirmButtonText: "Send invitation",
+        endpoint: "/subusers/invite",
+        method: "POST",
+        payloadBuilder: (values) => values,
+      });
+
+      if (!response) {
+        return null;
+      }
+
+      await showInviteFeedback(response);
+      if (typeof refreshCallback === "function") {
+        await refreshCallback();
+      }
+
+      return response;
+    },
+    async showEditForm(subuser, refreshCallback = null) {
+      const response = await submitSubuserForm({
+        title: `Redigér ${subuser?.name || "chauffør"}`,
+        confirmButtonText: "Gem ændringer",
+        defaults: subuser || {},
+        endpoint: "/subusers",
+        method: "PUT",
+        payloadBuilder: (values) => ({
+          id: subuser.id,
+          ...values,
+        }),
+      });
+
+      if (!response) {
+        return null;
+      }
+
+      await Swal.fire({
+        title: "Chauffør opdateret",
+        icon: "success",
+        confirmButtonText: "Luk",
+      });
+
+      if (typeof refreshCallback === "function") {
+        await refreshCallback();
+      }
+
+      return response;
+    },
+    async resendInvite(subuser, refreshCallback = null) {
+      try {
+        const response = await authenticatedRequest("/subusers/invite/resend", "POST", { id: subuser.id });
+        await showInviteFeedback(response);
+        if (typeof refreshCallback === "function") {
+          await refreshCallback();
+        }
+        return response;
+      } catch (error) {
+        await Swal.fire({
+          title: "Kunne ikke gensende invitation",
+          text: error?.response?.data?.data?.message || error?.response?.data?.message || "Der opstod en fejl.",
+          icon: "error",
+          confirmButtonText: "Luk",
+        });
+        throw error;
+      }
+    },
+  },
+};
+</script>
diff --git a/src/components/shop/POSDepartmentProcess.vue b/src/components/shop/POSDepartmentProcess.vue
index 862ac461..c40c4321 100644
--- a/src/components/shop/POSDepartmentProcess.vue
+++ b/src/components/shop/POSDepartmentProcess.vue
@@ -10,6 +10,7 @@ import { createOrderItem, getOrderItems } from "@/components/shop/OrdersItems.vu
 import { getAttributes } from "@/components/shop/CustomerAttributes.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
+import { doesOrderContainWashCertificateProduct } from "@/components/displays/department/pos/utils/washCertificate.js";
 import Swal from "sweetalert2";
 
 /**
@@ -133,36 +134,56 @@ export const nextStep = async (options = { isMobile: false, orderCreation: true
     window.history.pushState({}, "", `?id=${order_id.value}&customer_id=${customer_id.value}&step=3`);
   }
   if (step.value === 3) {
-    // Mark the order as completed
-    await SessionUser.objects.orders.functions
-      .mark_as_completed(order_id.value)
-      .then(async (response) => {
-        if (normalizedOptions.isMobile === false) {
-          const didCompleteSelectedBooking = await finalizeSelectedOrderBookingForDesktop();
-          if (!didCompleteSelectedBooking) {
-            return;
-          }
+    if (normalizedOptions.isMobile === false && doesOrderContainMaterial()) {
+      step.value = 4;
+      window.history.pushState({}, "", `?id=${order_id.value}&customer_id=${customer_id.value}&step=4`);
+      return;
+    }
+
+    try {
+      if (normalizedOptions.isMobile === false) {
+        const didLinkSelectedBooking = await finalizeSelectedOrderBookingForDesktop();
+        if (!didLinkSelectedBooking) {
+          return;
         }
-        // Check if the order contains any material, if not, we can skip the next step
-        if (!doesOrderContainMaterial()) {
-          // Show a "Success" dialog, that closes after 2 seconds, then redirects to the next page
-          Swal.fire({
-            title: "Fuldført",
-            text: "Transaktionen er fuldført, omdirigerer automatisk...",
-            icon: "success",
-            showConfirmButton: false,
-            timer: 2000,
-          }).then(() => {
-            // Redirect to the next page
-            window.location.href = "/admin/" + department_id.value + "/modules/pos";
-          });
-        }
-        // Set the step to 4 in the query parameters
-        window.history.pushState({}, "", `?id=${order_id.value}&customer_id=${customer_id.value}&step=4`);
-      })
-      .catch((error) => {
-        parseError(error, "stepError");
+      }
+
+      await SessionUser.objects.orders.functions.mark_as_completed(order_id.value);
+      await Swal.fire({
+        title: "Fuldført",
+        text: "Transaktionen er fuldført, omdirigerer automatisk...",
+        icon: "success",
+        showConfirmButton: false,
+        timer: 2000,
       });
+      window.location.href = "/admin/" + department_id.value + "/modules/pos";
+    } catch (error) {
+      parseError(error, "stepError");
+    }
+    return;
+  }
+
+  if (step.value === 4) {
+    try {
+      if (normalizedOptions.isMobile === false) {
+        const didLinkSelectedBooking = await finalizeSelectedOrderBookingForDesktop();
+        if (!didLinkSelectedBooking) {
+          return;
+        }
+      }
+
+      await SessionUser.objects.orders.functions.mark_as_completed(order_id.value);
+      await Swal.fire({
+        title: "Fuldført",
+        text: "Transaktionen er fuldført, omdirigerer automatisk...",
+        icon: "success",
+        showConfirmButton: false,
+        timer: 2000,
+      });
+      window.location.href = "/admin/" + department_id.value + "/modules/pos";
+    } catch (error) {
+      parseError(error, "stepError");
+    }
     return;
   }
   step.value++;
@@ -189,6 +210,7 @@ export const reference = ref("");
 export const notes = ref([]); // The customer notes
 export const order_notes = ref(""); // The order notes
 export const order_po = ref(""); // The PO number
+export const order_safety_seal = ref(""); // Optional safety seal metadata
 export const reg_1 = ref(""); // Only uppercase letters and numbers without spaces
 export const reg_2 = ref(""); // Only uppercase letters and numbers without spaces
 export const reg_3 = ref(""); // Only uppercase letters and numbers without spaces
@@ -208,6 +230,17 @@ const toPositiveInteger = (value) => {
   return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
 };
 
+const MATERIAL_PRODUCT_IDS = new Set([53, 54]);
+
+const normalizeOrderMetadataString = (value) => {
+  return value === null || value === undefined ? "" : String(value);
+};
+
+const getNullableOrderMetadataValue = (value) => {
+  const normalizedValue = normalizeOrderMetadataString(value).trim();
+  return normalizedValue === "" ? null : normalizedValue;
+};
+
 const resolveCustomerNumber = (customerOrNumber) => {
   if (customerOrNumber && typeof customerOrNumber === "object") {
     return toPositiveInteger(
@@ -536,6 +569,7 @@ export const reset_all_values = () => {
   reference.value = "";
   order_notes.value = "";
   order_po.value = "";
+  order_safety_seal.value = "";
   isCreatingOrder.value = false;
   createOrderRequest = null;
   clearSelectedOrderBookingSelection();
@@ -580,6 +614,7 @@ export const getOrderDetails = async (id = null) => {
       reference.value = order_data.reference || "";
       order_notes.value = order_data.notes || "";
       order_po.value = order_data.po || "";
+      order_safety_seal.value = normalizeOrderMetadataString(order_data.safety_seal);
       reg_1.value = order_data.reg_1 || "";
       reg_2.value = order_data.reg_2 || "";
       reg_3.value = order_data.reg_3 || "";
@@ -624,6 +659,7 @@ export const createOrder = (options = { isMobile: false }) => {
         reference: reference.value,
         notes: order_notes.value,
         po: order_po.value,
+        safety_seal: getNullableOrderMetadataValue(order_safety_seal.value),
         reg_1: reg_1.value,
         reg_2: reg_2.value,
         reg_3: reg_3.value,
@@ -839,15 +875,11 @@ export const isCustomerSelected = () => {
 };
 
 export const doesOrderContainMaterial = () => {
-  let ids = [53, 54];
-  let result = false;
-  // Loop through the ids, and check if the order contains any of the ids
-  ids.forEach((id) => {
-    if (order_items.value.some((item) => item.product.id === id)) {
-      result = true;
-    }
-  });
-  return result;
+  return order_items.value.some((item) => MATERIAL_PRODUCT_IDS.has(Number(item?.product?.id ?? item?.product_id)));
+};
+
+export const doesOrderContainWashCertificate = () => {
+  return doesOrderContainWashCertificateProduct(order_items.value);
 };
 
 /** Fetch the customer's notes */
@@ -1209,6 +1241,7 @@ export const clearCache = () => {
   reg_2.value = "";
   reg_3.value = "";
   order_po.value = "";
+  order_safety_seal.value = "";
   clearSelectedOrderBookingSelection();
   // Clear the scans
   scans.value = [];
@@ -1845,7 +1878,6 @@ const finalizeSelectedOrderBookingForDesktop = async () => {
   try {
     await SessionUser.objects.orders.set.booking_id(normalizedOrderId, normalizedBookingId);
     await SessionUser.objects.order_bookings.set.order_id(normalizedBookingId, normalizedOrderId);
-    await SessionUser.objects.order_bookings.functions.complete(normalizedBookingId, null);
     pendingBookings.value = pendingBookings.value.filter(
       (booking) => toPositiveInteger(booking?.id) !== normalizedBookingId
     );
diff --git a/src/router.js b/src/router.js
index e9bc985d..568efcf5 100644
--- a/src/router.js
+++ b/src/router.js
@@ -160,6 +160,7 @@ import AboutUsPage from "@/views/pages/AboutUsPage.vue";
 import PrivacyPolicyPage from "@/views/pages/PrivacyPolicyPage.vue";
 import PasswordResetPage from "@/views/pages/auth/PasswordResetPage.vue";
 import PasswordResetConfirmationPage from "@/views/pages/auth/PasswordResetConfirmationPage.vue";
+import SubuserCompleteRegistrationPage from "@/views/pages/auth/SubuserCompleteRegistrationPage.vue";
 import GuestQRNewCustomer from "@/views/guest/qr/GuestQRNewCustomer.vue";
 import GuestQrNewDriver from "@/views/guest/qr/GuestQRNewDriver.vue";
 import GuestQRNewDriver from "@/views/guest/qr/GuestQRNewDriver.vue";
@@ -224,6 +225,12 @@ export const router = createRouter({
 			component: PasswordResetConfirmationPage,
 			meta: { template: 'with-header', middleware: guestMiddleware }
 		},
+		{
+			name: 'complete-registration',
+			path: '/complete-registration',
+			component: SubuserCompleteRegistrationPage,
+			meta: { template: 'with-header' }
+		},
 		{
 			name: 'privacy-policy',
 			path: '/privacy-policy',
@@ -704,7 +711,7 @@ export const router = createRouter({
 		{
 			name: 'subusergrants',
 			path: '/user/subusers/grants',
-			component: SubuserGrants,
+			redirect: '/user/subusers',
 			meta: { middleware: authMiddleware }
 		},
 		{
diff --git a/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectDateTime.vue b/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectDateTime.vue
index 321b6a4a..f8eba4e2 100644
--- a/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectDateTime.vue
+++ b/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectDateTime.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import {defineProps, defineEmits, computed} from 'vue';
-import type {PosDepartment} from '@/components/displays/department/pos/steps/mobile/objects/PosDepartment.vue';
-import type {PosProduct} from '@/components/displays/department/pos/steps/mobile/objects/PosProduct.vue';
+import {computed} from 'vue';
 
 const props = defineProps<{
   label: string | null | undefined;
   dateTime: Date | null;
   isDisabled: boolean;
+  testIdPrefix?: string | null;
 }>();
 const emits = defineEmits([
   'onClickDateTime'
@@ -47,10 +46,15 @@ const showTimeAndDate = computed(() => {
   <div class="field" v-if="label !== null">
     <label class="label">{{label === undefined ? 'Dato og tid' : label}}</label>
   </div>
-  <div class="field has-addons">
+  <div class="field has-addons" :data-testid="props.testIdPrefix || undefined">
     <!-- Time -->
     <div class="control is-expanded has-icons-left" :class="{ 'is-fixed-half': showTimeAndDate.valueOf() }" v-show="showTimeAndDate">
-      <button class="button is-fullwidth default-button" @click="onClickDateTime" v-bind:disabled="props.isDisabled">
+      <button
+        class="button is-fullwidth default-button"
+        :data-testid="props.testIdPrefix ? `${props.testIdPrefix}-time` : undefined"
+        @click="onClickDateTime"
+        v-bind:disabled="props.isDisabled"
+      >
         <span>
           {{ dateTime === null ? '--.--' : formattedTime }}
         </span>
@@ -61,7 +65,12 @@ const showTimeAndDate = computed(() => {
     </div>
     <!-- Date -->
     <div class="control is-expanded has-icons-left" :class="{ 'is-fixed-half': showTimeAndDate }">
-      <button class="button is-fullwidth default-button" @click="onClickDateTime" v-bind:disabled="props.isDisabled">
+      <button
+        class="button is-fullwidth default-button"
+        :data-testid="props.testIdPrefix ? `${props.testIdPrefix}-date` : undefined"
+        @click="onClickDateTime"
+        v-bind:disabled="props.isDisabled"
+      >
             <span>
                 {{ (dateTime === null || props.isDisabled) ? '--.--.----' : dateTime.toLocaleDateString('da-DK', { month: '2-digit', day: '2-digit', year: 'numeric' }) }}
             </span>
@@ -78,4 +87,4 @@ const showTimeAndDate = computed(() => {
 .is-fixed-half {
   width: 50%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboards/superUserDashboard/Subusers.vue b/src/views/dashboards/superUserDashboard/Subusers.vue
index 0532762b..2c6d07f6 100644
--- a/src/views/dashboards/superUserDashboard/Subusers.vue
+++ b/src/views/dashboards/superUserDashboard/Subusers.vue
@@ -1,13 +1,14 @@
 <script setup>
-import SuperUserDashboardNavigation from "@/views/dashboards/superUserDashboard/SuperUserDashboardNavigation.vue";
+import { computed } from "vue";
 import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import SubusersDisplay from "@/components/displays/Subusers.vue";
+
+const hasAccess = computed(() => SessionUser.canAccessUser() || SessionUser.hasPermission("SUBUSERS_LIST"));
 </script>
 
 <template>
-  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessSuperUser()">
-    <SuperUserDashboardNavigation />
+  <RestrictedPageWrapper :hasPermission="hasAccess">
     <SubusersDisplay />
   </RestrictedPageWrapper>
 </template>
diff --git a/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue b/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue
index b736a9cb..781913c9 100644
--- a/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue
+++ b/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue
@@ -32,6 +32,8 @@ import TimeBookingsElementSelectVehicles
   from "@/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectVehicles.vue";
 import TimeBookingsElementSelectDateTime
   from "@/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectDateTime.vue";
+import UserBookingDateTimeSelector
+  from "@/views/dashboards/userDashboard/bookings/displays/elements/UserBookingDateTimeSelector.vue";
 import TimeBookingsElementSelectReference
   from "@/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectReference.vue";
 import TimeBookingsElementSelectPoNumber
@@ -221,6 +223,13 @@ const onClickDateTime = () => {
   // Set the input to true
   isDateTimeInput.value = true;
 }
+const onCloseDateTime = () => {
+  isDateTimeInput.value = false;
+}
+const onConfirmDateTime = (value: Date) => {
+  dateTime.value = value;
+  isDateTimeInput.value = false;
+}
 const orderProductsByOrderPriority = (products: PosProduct[]) => {
   return products.sort((a, b) => {
     const priorityA = a?.order_priority || 0;
@@ -245,49 +254,6 @@ watch(reg2, (newVal) => {
   }
 })
 
-const isSameDate = (date1, date2) => {
-  return date1.getFullYear() === date2.getFullYear() &&
-    date1.getMonth() === date2.getMonth() &&
-    date1.getDate() === date2.getDate();
-}
-const getNextDays = (numDays) => {
-  const days = [];
-  const today = new Date();
-  for (let i = 0; i < numDays; i++) {
-    const nextDay = new Date(today);
-    nextDay.setDate(today.getDate() + i);
-    const dayName = nextDay.toLocaleDateString('da-DK', { weekday: 'short' });
-    days.push({ date: nextDay, day: dayName });
-  }
-  return days;
-}
-const getTimeSlots = (date) => {
-  const slots = [];
-  const startHour = 8;
-  const endHour = 18;
-  // Add unknown timeslot
-  slots.push({ time: '00:00', date });
-  for (let hour = startHour; hour <= endHour; hour++) {
-    const time = hour.toString().padStart(2, '0') + ':00';
-    slots.push({ time, date });
-  }
-  return slots;
-}
-const isTimeSlotSelected = (timeslot, date) => {
-  return date.getHours() === parseInt(timeslot.time.split(':')[0]) &&
-    date.getMinutes() === parseInt(timeslot.time.split(':')[1]);
-}
-
-const selectTimeSlot = (timeslot, date) => {
-  dateTime.value = new Date(
-    date.getFullYear(),
-    date.getMonth(),
-    date.getDate(),
-    parseInt(timeslot.time.split(':')[0]),
-    parseInt(timeslot.time.split(':')[1])
-  );
-}
-
 const availableVehicleTypes = ref<PosProduct[]>([]);
 const getAvailableVehicleTypes = async () => {
   // In guest mode, skip loading vehicle types (requires authentication)
@@ -1037,13 +1003,6 @@ const missingFields = computed(() => {
   return missingFields;
 })
 
-/**
- * Determine if the user has selected a time. (or the time is 00:00)
- */
-const hasSelectedTime = computed(() => {
-  return dateTime.value && dateTime.value.getHours() > 0;
-});
-
 /**
  * Customer number validation
  */
@@ -1261,7 +1220,13 @@ watch(customerNumber, (newVal) => {
                       <small class="has-text-grey">{{ $t('user_dashboard.bookings.book.required') }}</small>
                     </span>
                     <label class="label">{{ $t('user_dashboard.bookings.book.expected_date_time') }}</label>
-                    <TimeBookingsElementSelectDateTime :dateTime="dateTime" @onClickDateTime="onClickDateTime" :isDisabled="!hasDepartment && false" :label="null"/>
+                    <TimeBookingsElementSelectDateTime
+                      :dateTime="dateTime"
+                      @onClickDateTime="onClickDateTime"
+                      :isDisabled="!hasDepartment && false"
+                      :label="null"
+                      test-id-prefix="booking-date-time-trigger"
+                    />
                   </div>
                   <div class="mb-3">
                     <label class="label">{{ $t('user_dashboard.bookings.book.reference') }}</label>
@@ -1587,73 +1552,13 @@ watch(customerNumber, (newVal) => {
                 </div>
               </div>
             </PosDepartmentStepMobileFixedBottomControl>
-            <!-- DateTime -->
-            <PosDepartmentStepMobileFixedBottomControl v-if="isDateTimeInput">
-          <div class="box" style="overflow-y: auto; overflow-x: hidden;">
-            <!-- Close button -->
-            <div class="is-pulled-right" style="margin-bottom: -32px; margin-top: -16px;">
-              <button class="button is-white" @click="isDateTimeInput = false">
-              <span class="icon">
-                <i class="fas fa-times"></i>
-              </span>
-              </button>
-            </div>
-            <!-- Header "Schedule" -->
-            <div class="field">
-              <label class="label has-text-centered">{{ $t('user_dashboard.bookings.book.expected_date_time') }}</label>
-            </div>
-            <hr />
-            <!-- Date selection -->
-            <div style="max-width: inherit; overflow-x: auto; white-space: nowrap; overflow-y: hidden; padding: 2px 16px;" class="has-invisible-scrollbar">
-              <div class="columns is-mobile is-vcentered">
-                <template v-for="day in getNextDays(30)" :key="day.date.toDateString()">
-                  <div class="column is-narrow">
-                    <div class="custom-date-picker-date" :class="{ 'is-selected': isSameDate(day.date, dateTime) }" @click="dateTime = new Date(dateTime.getFullYear(), day.date.getMonth(), day.date.getDate(), dateTime.getHours(), dateTime.getMinutes())">
-                      <div class="custom-date-picker-date-day">{{ day.day }}</div>
-                      <div class="custom-date-picker-date-date">{{ day.date.getDate() }}</div>
-                    </div>
-                  </div>
-                </template>
-              </div>
-            </div>
-            <hr />
-            <!-- Time selection -->
-            <div class="columns is-mobile is-vcentered is-multiline">
-              <div class="column is-2" v-for="timeslot in getTimeSlots(dateTime)" :key="timeslot.time" style="cursor: not-allowed;">
-                <div class="custom-date-picker-time" :class="{ 'is-selected': isTimeSlotSelected(timeslot, dateTime) }" @click="selectTimeSlot(timeslot, dateTime)">
-                  <template v-if="timeslot.time === '00:00'">
-                    <div class="custom-date-picker-time-hour">{{ $t('common.during_the_day') }}</div>
-                  </template>
-                  <template v-else>
-                    <div class="custom-date-picker-time-hour">~{{ timeslot.time }}</div>
-                  </template>
-                </div>
-              </div>
-            </div>
-            <hr />
-            <!-- Save button -->
-            <div class="field">
-              <button class="button is-fullwidth is-link" @click="isDateTimeInput = false">
-                <!-- No time selected -->
-                <span v-if="!hasSelectedTime">{{ $t('common.select') }} {{ SessionUser.functions.date.toWords(dateTime) }}, {{ $t('common.during_the_day') }}</span>
-                <!-- Time selected -->
-                <span v-else>{{ $t('common.select') }} {{ SessionUser.functions.date.toWords(dateTime) }}, {{ $t('common.approx') }} {{ dateTime.getHours().toString().padStart(2, '0') }}:{{ dateTime.getMinutes().toString().padStart(2, '0') }}</span>
-                <span class="icon is-left">
-                <i class="fas fa-check-circle"></i>
-              </span>
-              </button>
-            </div>
-            <!-- Clear selection -->
-            <div class="field">
-              <button class="button is-fullwidth is-link is-light" @click="dateTime = null; isDateTimeInput = false">
-                <span>{{ $t('common.cancel') }}</span>
-                <span class="icon is-left">
-                <i class="fas fa-times-circle"></i>
-              </span>
-              </button>
-            </div>
-          </div>
-        </PosDepartmentStepMobileFixedBottomControl>
+            <UserBookingDateTimeSelector
+              :dateTime="dateTime"
+              :open="isDateTimeInput"
+              variant="desktop"
+              @confirm="onConfirmDateTime"
+              @close="onCloseDateTime"
+            />
           </template>
         </div>
       </template>
@@ -1822,7 +1727,13 @@ watch(customerNumber, (newVal) => {
                         <small class="has-text-grey">{{ $t('user_dashboard.bookings.book.required') }}</small>
                       </span>
                       <label class="label">{{ $t('user_dashboard.bookings.book.expected_date_time') }}</label>
-                      <TimeBookingsElementSelectDateTime :dateTime="dateTime" @onClickDateTime="onClickDateTime" :isDisabled="!hasDepartment && false" :label="null"/>
+                      <TimeBookingsElementSelectDateTime
+                        :dateTime="dateTime"
+                        @onClickDateTime="onClickDateTime"
+                        :isDisabled="!hasDepartment && false"
+                        :label="null"
+                        test-id-prefix="booking-date-time-trigger"
+                      />
                     </div>
 
                     <div class="mb-3">
@@ -1955,61 +1866,13 @@ watch(customerNumber, (newVal) => {
               </div>
             </PosDepartmentStepMobileFixedBottomControl>
 
-            <PosDepartmentStepMobileFixedBottomControl v-if="isDateTimeInput">
-          <div class="box" style="overflow-y: auto; overflow-x: hidden;">
-            <div class="is-pulled-right" style="margin-bottom: -32px; margin-top: -16px;">
-              <button class="button is-white" @click="isDateTimeInput = false">
-                <span class="icon"><i class="fas fa-times"></i></span>
-              </button>
-            </div>
-            <div class="field">
-              <label class="label has-text-centered">{{ $t('user_dashboard.bookings.book.expected_date_time') }}</label>
-            </div>
-            <hr />
-            <div style="max-width: inherit; overflow-x: auto; white-space: nowrap; overflow-y: hidden; padding: 2px 16px;" class="has-invisible-scrollbar">
-              <div class="columns is-mobile is-vcentered">
-                <template v-for="day in getNextDays(30)" :key="day.date.toDateString()">
-                  <div class="column is-narrow">
-                    <div class="custom-date-picker-date" :class="{ 'is-selected': isSameDate(day.date, dateTime) }" @click="dateTime = new Date(dateTime.getFullYear(), day.date.getMonth(), day.date.getDate(), dateTime.getHours(), dateTime.getMinutes())">
-                      <div class="custom-date-picker-date-day">{{ day.day }}</div>
-                      <div class="custom-date-picker-date-date">{{ day.date.getDate() }}</div>
-                    </div>
-                  </div>
-                </template>
-              </div>
-            </div>
-            <hr />
-            <div class="columns is-mobile is-vcentered is-multiline">
-              <div class="column is-6" v-for="timeslot in getTimeSlots(dateTime)" :key="timeslot.time" style="cursor: not-allowed;">
-                <div class="custom-date-picker-time" :class="{ 'is-selected': isTimeSlotSelected(timeslot, dateTime) }" @click="selectTimeSlot(timeslot, dateTime)">
-                  <template v-if="timeslot.time === '00:00'">
-                    <div class="custom-date-picker-time-hour">{{ $t('common.during_the_day') }}</div>
-                  </template>
-                  <template v-else>
-                    <div class="custom-date-picker-time-hour">~{{ timeslot.time }}</div>
-                  </template>
-                </div>
-              </div>
-            </div>
-            <hr />
-            <div class="field">
-              <button
-                class="button is-fullwidth is-link"
-                @click="isDateTimeInput = false"
-                data-testid="booking-mobile-date-time-confirm"
-              >
-                <span>{{ $t('common.confirm') }}</span>
-                <span class="icon is-left"><i class="fas fa-check-circle"></i></span>
-              </button>
-            </div>
-            <div class="field">
-              <button class="button is-fullwidth is-link is-light" @click="dateTime = null; isDateTimeInput = false">
-                <span>{{ $t('common.cancel') }}</span>
-                <span class="icon is-left"><i class="fas fa-times-circle"></i></span>
-              </button>
-            </div>
-          </div>
-        </PosDepartmentStepMobileFixedBottomControl>
+            <UserBookingDateTimeSelector
+              :dateTime="dateTime"
+              :open="isDateTimeInput"
+              variant="mobile"
+              @confirm="onConfirmDateTime"
+              @close="onCloseDateTime"
+            />
           </template>
         </div>
       </template>
@@ -2073,96 +1936,10 @@ watch(customerNumber, (newVal) => {
 </template>
 
 <style scoped>
-.is-fixed-half {
-  width: 50%;
-}
-.custom-disabled {
-  pointer-events: none;
-  opacity: 0.5;
-  cursor: not-allowed;
-}
 .has-invisible-scrollbar {
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
   scrollbar-width: none;  /* Firefox */
 }
-.is-selected {
-  border-color: #007bff;
-  border-width: 2px;
-  border-style: solid;
-  border-radius: 8px;
-  box-shadow: 0 0 0 2px #007bff;
-  z-index: 1;
-  background-color: #FFFFFF;
-}
-.default-button {
-  padding: 8px 16px;
-  border: 0;
-}
-.custom-date-picker-date {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 64px;
-  height: 64px;
-  overflow: hidden;
-  text-align: center;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  cursor: pointer;
-  margin-right: 8px;
-}
-.custom-date-picker-date-day {
-  font-size: 12px;
-  color: #333;
-}
-.is-selected .custom-date-picker-date-day {
-  color: #2e31e6;
-  font-weight: bold;
-}
-.custom-date-picker-date-date {
-  font-size: 16px;
-  font-weight: bold;
-  color: #2e31e6;
-}
-.custom-date-picker-date:hover {
-  background-color: #f0f0f0;
-}
-.custom-date-picker-time {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 40px;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  cursor: pointer;
-  margin: 4px;
-}
-.custom-date-picker-time-hour {
-  font-size: 16px;
-  font-weight: bold;
-  color: #007bff;
-  margin-top: 4px;
-  margin-bottom: 4px;
-  text-align: center;
-  width: 100%;
-  white-space: nowrap;
-  padding: 0 4px;
-  box-sizing: border-box;
-  border-radius: 4px;
-}
-.custom-date-picker-time:hover {
-  background-color: #f0f0f0;
-}
-.custom-date-picker-time.is-selected {
-  background-color: #dfe9f7;
-}
-
-.custom-date-picker-time.is-selected:hover {
-  background-color: #d0dff5;
-}
 
 /* Mobile fit: wash toggle buttons */
 @media screen and (max-width: 768px) {
diff --git a/src/views/dashboards/userDashboard/bookings/displays/elements/UserBookingDateTimeSelector.vue b/src/views/dashboards/userDashboard/bookings/displays/elements/UserBookingDateTimeSelector.vue
new file mode 100644
index 00000000..bf2358de
--- /dev/null
+++ b/src/views/dashboards/userDashboard/bookings/displays/elements/UserBookingDateTimeSelector.vue
@@ -0,0 +1,475 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import PosDepartmentStepMobileFixedBottomControl
+  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileFixedBottomControl.vue";
+
+type SelectorVariant = "desktop" | "mobile";
+
+type TimeSlot = {
+  time: string;
+};
+
+const props = defineProps<{
+  dateTime: Date | null;
+  open: boolean;
+  variant: SelectorVariant;
+}>();
+
+const emit = defineEmits<{
+  (e: "confirm", value: Date): void;
+  (e: "close"): void;
+}>();
+
+const { locale, t } = useI18n();
+
+const normalizeLocale = (value: string | undefined) => {
+  if (!value) {
+    return "da-DK";
+  }
+
+  if (value === "da") {
+    return "da-DK";
+  }
+
+  return value;
+};
+
+const cloneDateTime = (value: Date | null) => {
+  if (value instanceof Date && !Number.isNaN(value.getTime())) {
+    return new Date(value.getTime());
+  }
+
+  const today = new Date();
+  return new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0, 0);
+};
+
+const draftDateTime = ref<Date>(cloneDateTime(props.dateTime));
+
+watch(
+  () => props.open,
+  (open) => {
+    if (open) {
+      draftDateTime.value = cloneDateTime(props.dateTime);
+    }
+  },
+  { immediate: true }
+);
+
+const activeLocale = computed(() => normalizeLocale(String(locale.value || "da-DK")));
+
+const getNextDays = (numDays: number) => {
+  const days: Array<{ date: Date; day: string }> = [];
+  const today = new Date();
+
+  for (let index = 0; index < numDays; index += 1) {
+    const nextDay = new Date(today.getFullYear(), today.getMonth(), today.getDate() + index, 0, 0, 0, 0);
+    const dayName = nextDay.toLocaleDateString(activeLocale.value, { weekday: "short" });
+    days.push({ date: nextDay, day: dayName });
+  }
+
+  return days;
+};
+
+const getTimeSlots = (): TimeSlot[] => {
+  const slots: TimeSlot[] = [{ time: "00:00" }];
+  const startHour = 8;
+  const endHour = 18;
+
+  for (let hour = startHour; hour <= endHour; hour += 1) {
+    slots.push({ time: `${hour.toString().padStart(2, "0")}:00` });
+  }
+
+  return slots;
+};
+
+const availableDays = computed(() => getNextDays(30));
+const timeSlots = computed(() => getTimeSlots());
+const hasSelectedTime = computed(
+  () => draftDateTime.value.getHours() > 0 || draftDateTime.value.getMinutes() > 0
+);
+
+const isSameDate = (left: Date, right: Date) =>
+  left.getFullYear() === right.getFullYear() &&
+  left.getMonth() === right.getMonth() &&
+  left.getDate() === right.getDate();
+
+const isTimeSlotSelected = (slot: TimeSlot) => {
+  const [hours, minutes] = slot.time.split(":").map((value) => Number.parseInt(value, 10));
+
+  return draftDateTime.value.getHours() === hours && draftDateTime.value.getMinutes() === minutes;
+};
+
+const selectDay = (day: Date) => {
+  draftDateTime.value = new Date(
+    day.getFullYear(),
+    day.getMonth(),
+    day.getDate(),
+    draftDateTime.value.getHours(),
+    draftDateTime.value.getMinutes(),
+    0,
+    0
+  );
+};
+
+const selectTimeSlot = (slot: TimeSlot) => {
+  const [hours, minutes] = slot.time.split(":").map((value) => Number.parseInt(value, 10));
+
+  draftDateTime.value = new Date(
+    draftDateTime.value.getFullYear(),
+    draftDateTime.value.getMonth(),
+    draftDateTime.value.getDate(),
+    hours,
+    minutes,
+    0,
+    0
+  );
+};
+
+const closeSelector = () => {
+  emit("close");
+};
+
+const confirmSelection = () => {
+  emit("confirm", cloneDateTime(draftDateTime.value));
+};
+
+const formatLongDate = (value: Date) =>
+  value.toLocaleDateString(activeLocale.value, {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+
+const formatSlotTime = (value: Date) =>
+  `${value.getHours().toString().padStart(2, "0")}:${value.getMinutes().toString().padStart(2, "0")}`;
+
+const formatDateKey = (value: Date) =>
+  `${value.getFullYear()}-${(value.getMonth() + 1).toString().padStart(2, "0")}-${value.getDate().toString().padStart(2, "0")}`;
+
+const confirmLabel = computed(() => {
+  const baseLabel = `${t("common.select")} ${formatLongDate(draftDateTime.value)}`;
+
+  if (!hasSelectedTime.value) {
+    return `${baseLabel}, ${t("common.during_the_day")}`;
+  }
+
+  return `${baseLabel}, ${t("common.approx")} ${formatSlotTime(draftDateTime.value)}`;
+});
+
+const dayTestId = (day: Date) => `booking-date-time-day-${formatDateKey(day)}`;
+const slotTestId = (slot: TimeSlot) => `booking-date-time-slot-${slot.time.replace(":", "-")}`;
+</script>
+
+<template>
+  <template v-if="open">
+    <div
+      v-if="variant === 'desktop'"
+      class="booking-date-time-selector booking-date-time-selector--desktop"
+      data-testid="booking-date-time-selector-desktop"
+    >
+      <div class="booking-date-time-selector__backdrop" />
+      <div class="booking-date-time-selector__surface">
+        <div class="box booking-date-time-selector__panel">
+          <div class="booking-date-time-selector__header">
+            <div class="field mb-0">
+              <label class="label has-text-centered mb-0">{{ t("user_dashboard.bookings.book.expected_date_time") }}</label>
+            </div>
+            <button
+              type="button"
+              class="button is-white"
+              data-testid="booking-date-time-close"
+              @click="closeSelector"
+            >
+              <span class="icon"><i class="fas fa-times"></i></span>
+            </button>
+          </div>
+          <div class="booking-date-time-selector__body">
+            <div class="booking-date-time-selector__days has-invisible-scrollbar">
+              <button
+                v-for="day in availableDays"
+                :key="day.date.toDateString()"
+                type="button"
+                class="booking-date-time-selector__day"
+                :class="{ 'is-selected': isSameDate(day.date, draftDateTime) }"
+                :data-testid="dayTestId(day.date)"
+                :aria-pressed="isSameDate(day.date, draftDateTime)"
+                @click="selectDay(day.date)"
+              >
+                <span class="booking-date-time-selector__day-name">{{ day.day }}</span>
+                <span class="booking-date-time-selector__day-date">{{ day.date.getDate() }}</span>
+              </button>
+            </div>
+            <div class="booking-date-time-selector__time-grid booking-date-time-selector__time-grid--desktop">
+              <button
+                v-for="slot in timeSlots"
+                :key="slot.time"
+                type="button"
+                class="booking-date-time-selector__time"
+                :class="{ 'is-selected': isTimeSlotSelected(slot) }"
+                :data-testid="slotTestId(slot)"
+                :aria-pressed="isTimeSlotSelected(slot)"
+                @click="selectTimeSlot(slot)"
+              >
+                <span class="booking-date-time-selector__time-label">
+                  {{ slot.time === "00:00" ? t("common.during_the_day") : `~${slot.time}` }}
+                </span>
+              </button>
+            </div>
+          </div>
+          <div class="booking-date-time-selector__actions">
+            <button
+              type="button"
+              class="button is-fullwidth is-link"
+              data-testid="booking-date-time-confirm"
+              @click="confirmSelection"
+            >
+              <span>{{ confirmLabel }}</span>
+              <span class="icon is-left"><i class="fas fa-check-circle"></i></span>
+            </button>
+            <button
+              type="button"
+              class="button is-fullwidth is-link is-light"
+              data-testid="booking-date-time-cancel"
+              @click="closeSelector"
+            >
+              <span>{{ t("common.cancel") }}</span>
+              <span class="icon is-left"><i class="fas fa-times-circle"></i></span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <PosDepartmentStepMobileFixedBottomControl
+      v-else
+      variant="pos-step"
+    >
+      <div class="box booking-date-time-selector__panel booking-date-time-selector__panel--mobile" data-testid="booking-date-time-selector-mobile">
+        <div class="booking-date-time-selector__header">
+          <div class="field mb-0">
+            <label class="label has-text-centered mb-0">{{ t("user_dashboard.bookings.book.expected_date_time") }}</label>
+          </div>
+          <button
+            type="button"
+            class="button is-white"
+            data-testid="booking-date-time-close"
+            @click="closeSelector"
+          >
+            <span class="icon"><i class="fas fa-times"></i></span>
+          </button>
+        </div>
+        <div class="booking-date-time-selector__body">
+          <div class="booking-date-time-selector__days has-invisible-scrollbar">
+            <button
+              v-for="day in availableDays"
+              :key="day.date.toDateString()"
+              type="button"
+              class="booking-date-time-selector__day"
+              :class="{ 'is-selected': isSameDate(day.date, draftDateTime) }"
+              :data-testid="dayTestId(day.date)"
+              :aria-pressed="isSameDate(day.date, draftDateTime)"
+              @click="selectDay(day.date)"
+            >
+              <span class="booking-date-time-selector__day-name">{{ day.day }}</span>
+              <span class="booking-date-time-selector__day-date">{{ day.date.getDate() }}</span>
+            </button>
+          </div>
+          <div class="booking-date-time-selector__time-grid booking-date-time-selector__time-grid--mobile">
+            <button
+              v-for="slot in timeSlots"
+              :key="slot.time"
+              type="button"
+              class="booking-date-time-selector__time"
+              :class="{ 'is-selected': isTimeSlotSelected(slot) }"
+              :data-testid="slotTestId(slot)"
+              :aria-pressed="isTimeSlotSelected(slot)"
+              @click="selectTimeSlot(slot)"
+            >
+              <span class="booking-date-time-selector__time-label">
+                {{ slot.time === "00:00" ? t("common.during_the_day") : `~${slot.time}` }}
+              </span>
+            </button>
+          </div>
+        </div>
+        <div class="booking-date-time-selector__actions">
+          <button
+            type="button"
+            class="button is-fullwidth is-link"
+            data-testid="booking-date-time-confirm"
+            @click="confirmSelection"
+          >
+            <span>{{ confirmLabel }}</span>
+            <span class="icon is-left"><i class="fas fa-check-circle"></i></span>
+          </button>
+          <button
+            type="button"
+            class="button is-fullwidth is-link is-light"
+            data-testid="booking-date-time-cancel"
+            @click="closeSelector"
+          >
+            <span>{{ t("common.cancel") }}</span>
+            <span class="icon is-left"><i class="fas fa-times-circle"></i></span>
+          </button>
+        </div>
+      </div>
+    </PosDepartmentStepMobileFixedBottomControl>
+  </template>
+</template>
+
+<style scoped>
+.booking-date-time-selector--desktop {
+  position: fixed;
+  inset: 0;
+  z-index: 70;
+}
+
+.booking-date-time-selector__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(8, 20, 38, 0.32);
+  backdrop-filter: blur(10px);
+}
+
+.booking-date-time-selector__surface {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+}
+
+.booking-date-time-selector__panel {
+  width: min(100%, 48rem);
+  margin: 0 auto;
+}
+
+.booking-date-time-selector__panel--mobile {
+  margin-bottom: 0;
+}
+
+.booking-date-time-selector__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.booking-date-time-selector__header .field {
+  flex: 1;
+}
+
+.booking-date-time-selector__body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.booking-date-time-selector__days {
+  display: flex;
+  gap: 0.75rem;
+  overflow-x: auto;
+  padding: 0.125rem 0.125rem 0.5rem;
+}
+
+.has-invisible-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.has-invisible-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.booking-date-time-selector__day,
+.booking-date-time-selector__time {
+  border: 1px solid #cfd6e4;
+  border-radius: 0.75rem;
+  background: #ffffff;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+  cursor: pointer;
+}
+
+.booking-date-time-selector__day {
+  min-width: 4.5rem;
+  padding: 0.75rem 0.625rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.15rem;
+}
+
+.booking-date-time-selector__day.is-selected,
+.booking-date-time-selector__time.is-selected {
+  border-color: #2e6be6;
+  box-shadow: 0 0 0 2px rgba(46, 107, 230, 0.18);
+  background: #f4f8ff;
+}
+
+.booking-date-time-selector__day:hover,
+.booking-date-time-selector__time:hover {
+  background: #f8fbff;
+}
+
+.booking-date-time-selector__day-name {
+  font-size: 0.85rem;
+  color: #5c667a;
+}
+
+.booking-date-time-selector__day-date {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: #15306a;
+}
+
+.booking-date-time-selector__time-grid {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.booking-date-time-selector__time-grid--desktop {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.booking-date-time-selector__time-grid--mobile {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.booking-date-time-selector__time {
+  min-height: 3rem;
+  padding: 0.75rem 0.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.booking-date-time-selector__time-label {
+  font-weight: 700;
+  color: #0f5fe6;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.booking-date-time-selector__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+@media screen and (max-width: 768px) {
+  .booking-date-time-selector__surface {
+    padding: 1rem;
+    align-items: flex-end;
+  }
+
+  .booking-date-time-selector__time-grid--desktop {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+</style>
diff --git a/src/views/dashboards/userDashboard/bookings/displays/steps/NewBookingStep5.vue b/src/views/dashboards/userDashboard/bookings/displays/steps/NewBookingStep5.vue
index 5ef01d30..c7086c53 100644
--- a/src/views/dashboards/userDashboard/bookings/displays/steps/NewBookingStep5.vue
+++ b/src/views/dashboards/userDashboard/bookings/displays/steps/NewBookingStep5.vue
@@ -91,7 +91,7 @@ const showWarning = computed(() => {
           </div>
           <div class="mb-3">
             <strong>{{ $t('time_booking_flow.date_and_time') }}:</strong>
-            <div>{{ formattedDateTime || $t('time_booking_flow.not_selected') }}</div>
+            <div data-testid="booking-summary-date-time">{{ formattedDateTime || $t('time_booking_flow.not_selected') }}</div>
           </div>
           <div class="mb-3">
             <strong>{{ $t('time_booking_flow.selected_services') }}:</strong>
diff --git a/src/views/dashboards/userDashboard/profile/UserProfile.vue b/src/views/dashboards/userDashboard/profile/UserProfile.vue
index e8219bf6..67e29ff4 100644
--- a/src/views/dashboards/userDashboard/profile/UserProfile.vue
+++ b/src/views/dashboards/userDashboard/profile/UserProfile.vue
@@ -637,6 +637,18 @@ const onClickSaveWashCertificateEmail = async () => {
             </span>
           </button>
         </div>
+        <!-- Sign out -->
+        <button
+            class="button is-danger is-outlined mt-2 profile-logout-button"
+            @click="SessionUser.functions.showConfirmLogoutDialog()"
+            :disabled="isLoading"
+            data-testid="user-profile-security-logout"
+        >
+          <span>
+            <i class="fas fa-sign-out-alt"></i>
+            <span class="ml-2">{{ $t('user_dashboard.profile.security.logout') }}</span>
+          </span>
+        </button>
         <!-- Passkeys -->
         <hr class="my-4"/>
         <h4 class="title is-6">
@@ -750,7 +762,7 @@ const onClickSaveWashCertificateEmail = async () => {
       >
         <!-- Sign out -->
         <button
-            class="button is-danger is-small mt-2"
+            class="button is-danger is-outlined mt-2 profile-logout-button"
             @click="SessionUser.functions.showConfirmLogoutDialog()"
             :disabled="isLoading"
             data-testid="subuser-profile-security-logout"
@@ -908,5 +920,14 @@ const onClickSaveWashCertificateEmail = async () => {
 </template>
 
 <style scoped>
+.profile-logout-button {
+  justify-content: center;
+}
 
+@media screen and (max-width: 768px) {
+  .profile-logout-button {
+    display: flex;
+    width: 100%;
+  }
+}
 </style>
diff --git a/src/views/pages/auth/SubuserCompleteRegistrationPage.vue b/src/views/pages/auth/SubuserCompleteRegistrationPage.vue
new file mode 100644
index 00000000..49b5a91c
--- /dev/null
+++ b/src/views/pages/auth/SubuserCompleteRegistrationPage.vue
@@ -0,0 +1,399 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import axios from "axios";
+import logo from "@/assets/img/truckwash-banner.png";
+import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
+import { addError, getError, parseError, removeError } from "@/components/request/HandleGlobalError.vue";
+import { API_URL } from "@/config.js";
+
+const route = useRoute();
+
+const token = ref("");
+const isTokenValid = ref(null);
+const isCompleted = ref(false);
+const successMessage = ref("");
+const timeoutId = ref(null);
+
+const name = ref("");
+const username = ref("");
+const email = ref("");
+const password = ref("");
+const confirmPassword = ref("");
+
+const validateErrorKey = "subuserSetupValidate";
+const submitErrorKey = "subuserSetupComplete";
+
+const getTokenFromRoute = () => {
+  const rawToken = route.query.token;
+  if (Array.isArray(rawToken)) {
+    return typeof rawToken[0] === "string" ? rawToken[0].trim() : "";
+  }
+
+  return typeof rawToken === "string" ? rawToken.trim() : "";
+};
+
+const clearSuccessTimeout = () => {
+  if (timeoutId.value) {
+    clearTimeout(timeoutId.value);
+    timeoutId.value = null;
+  }
+};
+
+const setNamedError = (key, message) => {
+  removeError(key);
+  if (message) {
+    addError(message, key);
+  }
+};
+
+const validateSetupToken = async () => {
+  token.value = getTokenFromRoute();
+  isCompleted.value = false;
+  successMessage.value = "";
+  removeError(validateErrorKey);
+  removeError(submitErrorKey);
+
+  if (!token.value) {
+    isTokenValid.value = false;
+    setNamedError(validateErrorKey, "Missing setup token.");
+    return;
+  }
+
+  isTokenValid.value = null;
+
+  try {
+    await axios.get(API_URL + "/subusers/setup", {
+      params: {
+        token: token.value,
+      },
+    });
+    isTokenValid.value = true;
+  } catch (error) {
+    parseError(error, validateErrorKey);
+    isTokenValid.value = false;
+  }
+};
+
+const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/;
+
+const canSubmit = computed(() => {
+  return Boolean(
+    name.value.trim() &&
+      password.value &&
+      confirmPassword.value
+  );
+});
+
+const completeRegistration = async () => {
+  removeError(submitErrorKey);
+
+  if (!token.value) {
+    setNamedError(submitErrorKey, "Missing setup token.");
+    return;
+  }
+
+  if (name.value.trim().length < 3) {
+    setNamedError(submitErrorKey, "Name must be at least 3 characters long.");
+    return;
+  }
+
+  if (password.value.length < 8) {
+    setNamedError(submitErrorKey, "Password must be at least 8 characters long.");
+    return;
+  }
+
+  if (!passwordPattern.test(password.value)) {
+    setNamedError(
+      submitErrorKey,
+      "Password must contain at least one uppercase letter, one lowercase letter, and one number."
+    );
+    return;
+  }
+
+  if (password.value !== confirmPassword.value) {
+    setNamedError(submitErrorKey, "Passwords do not match.");
+    return;
+  }
+
+  try {
+    const response = await axios.post(API_URL + "/subusers/setup", {
+      token: token.value,
+      name: name.value.trim(),
+      ...(username.value.trim() ? { username: username.value.trim() } : {}),
+      ...(email.value.trim() ? { email: email.value.trim() } : {}),
+      password: password.value,
+    });
+
+    clearSuccessTimeout();
+    successMessage.value = response?.data?.data?.message || "Registration completed successfully.";
+    isCompleted.value = true;
+    isTokenValid.value = false;
+    password.value = "";
+    confirmPassword.value = "";
+    timeoutId.value = setTimeout(() => {
+      successMessage.value = "";
+    }, 5000);
+  } catch (error) {
+    parseError(error, submitErrorKey);
+  }
+};
+
+watch(
+  () => route.query.token,
+  () => {
+    validateSetupToken();
+  }
+);
+
+onMounted(() => {
+  validateSetupToken();
+});
+
+onBeforeUnmount(() => {
+  clearSuccessTimeout();
+});
+</script>
+
+<template>
+  <section class="login-section">
+    <div class="wrapper">
+      <div class="sidebar">
+        <h1>Complete driver registration</h1>
+        <p>Create your Truck Wash login from the setup link.</p>
+      </div>
+      <div class="main">
+        <router-link :to="{ name: 'landing' }" class="logo">
+          <img :src="logo" alt="Truck Wash" />
+        </router-link>
+
+        <div v-if="isTokenValid === null" class="status-card" id="complete-registration-validating">
+          Validating your setup link...
+        </div>
+
+        <form v-else-if="isCompleted" id="complete-registration-success" @submit.prevent="() => {}">
+          <p class="help is-success" id="complete_registration_alert_success">
+            {{ successMessage }}
+          </p>
+
+          <router-link :to="{ name: 'subuserlogin' }" class="submit">
+            Go to driver login
+          </router-link>
+        </form>
+
+        <form v-else-if="isTokenValid === false" id="complete-registration-invalid" @submit.prevent="() => {}">
+          <p class="help is-danger" v-if="getError(validateErrorKey)" id="complete_registration_alert_error">
+            {{ getError(validateErrorKey) }}
+          </p>
+
+          <router-link :to="{ name: 'subuserlogin' }" class="submit">
+            Back to driver login
+          </router-link>
+        </form>
+
+        <form v-else id="complete-registration-form" @submit.prevent="() => {}">
+          <div class="form-field">
+            <label class="label" for="complete-registration-name">Name</label>
+            <input id="complete-registration-name" v-model="name" type="text" autocomplete="name" />
+          </div>
+
+          <div class="form-field">
+            <label class="label" for="complete-registration-username">Username (optional)</label>
+            <input id="complete-registration-username" v-model="username" type="text" autocomplete="username" />
+          </div>
+
+          <div class="form-field">
+            <label class="label" for="complete-registration-email">Email (optional)</label>
+            <input id="complete-registration-email" v-model="email" type="email" autocomplete="email" />
+          </div>
+
+          <div class="form-field">
+            <label class="label" for="complete-registration-password">Password</label>
+            <input
+              id="complete-registration-password"
+              v-model="password"
+              type="password"
+              autocomplete="new-password"
+            />
+          </div>
+
+          <div class="form-field">
+            <label class="label" for="complete-registration-confirm-password">Confirm password</label>
+            <input
+              id="complete-registration-confirm-password"
+              v-model="confirmPassword"
+              type="password"
+              autocomplete="new-password"
+            />
+          </div>
+
+          <p class="help">
+            Your password must be at least 8 characters and include uppercase, lowercase, and a number.
+          </p>
+
+          <p class="help is-danger" v-if="getError(submitErrorKey)" id="complete_registration_submit_alert_error">
+            {{ getError(submitErrorKey) }}
+          </p>
+
+          <LoadButtonWhileAwait
+            id="complete-registration-submit"
+            :disabled="!canSubmit"
+            :loadFunction="completeRegistration"
+            class="submit"
+          >
+            Complete registration
+          </LoadButtonWhileAwait>
+        </form>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.login-section .wrapper {
+  display: flex;
+  align-items: stretch;
+  min-height: calc(100vh);
+}
+
+.login-section .wrapper .sidebar {
+  width: 33%;
+  background-color: #13324c;
+  display: flex;
+  flex-direction: column;
+  padding: 70px 20px;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+}
+
+.login-section .wrapper .sidebar h1 {
+  color: #fff;
+  margin-top: auto;
+  font-size: 3.4em;
+  font-weight: 600;
+  text-align: center;
+  line-height: 1.1;
+}
+
+.login-section .wrapper .sidebar p {
+  color: #fff;
+  margin-top: 24px;
+  font-size: 1.1em;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.login-section .wrapper .main {
+  width: 67%;
+  padding: 70px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.login-section .wrapper .main .logo {
+  display: flex;
+  max-width: 230px;
+  margin-bottom: 40px;
+}
+
+.login-section .wrapper .main .logo img {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 183 / 32;
+  object-fit: contain;
+}
+
+.login-section .wrapper .main form,
+.status-card {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 420px;
+  margin-bottom: 40px;
+  width: 100%;
+}
+
+.status-card {
+  padding: 16px 20px;
+  border: 1px solid #d6dde5;
+  border-radius: 12px;
+  color: #13324c;
+  background: #f8fafc;
+}
+
+.login-section .wrapper .main form .form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.login-section .wrapper .main form .form-field label {
+  color: #13324c;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.login-section .wrapper .main form input {
+  border: 1.5px solid #333;
+  border-radius: 8px;
+  margin-top: 4px;
+  font-size: 16px;
+  line-height: 1;
+  min-height: 44px;
+  padding: 0 12px;
+}
+
+.login-section .wrapper .main p {
+  max-width: 420px;
+  font-size: 16px;
+}
+
+.login-section .wrapper .main a {
+  text-decoration: underline;
+  color: inherit;
+}
+
+.login-section .wrapper .main .submit {
+  width: 100%;
+  border-radius: 30px;
+  background-color: #13324c;
+  border: 0;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  min-height: 43px;
+  margin-top: 8px;
+  text-decoration: none;
+}
+
+@media (max-width: 1250px) {
+  .login-section .wrapper .sidebar h1 {
+    font-size: 2.3em;
+  }
+}
+
+@media (max-width: 991px) {
+  .login-section .wrapper {
+    flex-direction: column;
+    min-height: calc(100vh - 96px);
+  }
+
+  .login-section .wrapper .sidebar {
+    width: 100%;
+    padding: 70px 10px;
+    position: relative;
+    top: 0;
+    height: max-content;
+  }
+
+  .login-section .wrapper .main {
+    width: 100%;
+    padding: 70px 10px;
+  }
+}
+</style>
diff --git a/tests/e2e/admin-pos-orders.spec.ts b/tests/e2e/admin-pos-orders.spec.ts
index 098f8cd8..0a25790e 100644
--- a/tests/e2e/admin-pos-orders.spec.ts
+++ b/tests/e2e/admin-pos-orders.spec.ts
@@ -1186,6 +1186,125 @@ test.describe("Admin POS Orders - desktop settings", () => {
   });
 });
 
+test.describe("Admin POS wash certificate completion", () => {
+  test("shows and autosaves the safety seal field when the order contains a wash certificate item", async ({
+    page,
+  }, testInfo) => {
+    test.skip(!testInfo.project.name.includes("desktop"), "Desktop-only wash certificate metadata coverage");
+
+    await mockApi(page, {
+      authenticated: true,
+      permissions: POS_PERMISSIONS,
+      edgeGateways: false,
+      pos: createPosFixture(),
+    });
+    await primeOperatorSession(page, "pos-safety-seal-token");
+
+    await openOrderDetail(page);
+
+    const safetySealField = page.getByTestId("pos-order-customer-wishes-safety-seal");
+    await expect(safetySealField).toBeVisible();
+
+    const updateRequest = waitForOrderMutation(
+      page,
+      "PUT",
+      "/orders",
+      (body) => Number(body.id) === 54518 && body.safety_seal === "SEAL-5566"
+    );
+
+    await safetySealField.click();
+    const safetySealInput = page.getByTestId("pos-order-customer-wishes-safety-seal-input");
+    await expect(safetySealInput).toBeVisible();
+    await safetySealInput.fill("SEAL-5566");
+
+    const capturedRequest = await updateRequest;
+    expect(capturedRequest.postDataJSON()).toMatchObject({
+      id: 54518,
+      safety_seal: "SEAL-5566",
+    });
+    await expect(safetySealInput).toBeFocused();
+    await expect(safetySealInput).toHaveValue("SEAL-5566");
+  });
+
+  test("defers material desktop completion to step 4 and auto-attaches the wash certificate on final completion", async ({
+    page,
+  }, testInfo) => {
+    test.skip(!testInfo.project.name.includes("desktop"), "Desktop-only completion sequencing coverage");
+
+    const baseFixture = createPosFixture();
+    const materialOrderId = 56001;
+    const fixture = createPosFixture({
+      ordersById: {
+        ...baseFixture.ordersById,
+        [materialOrderId]: {
+          ...baseFixture.ordersById[54518],
+          id: materialOrderId,
+          reference: "AUTO-SEAL-REF",
+          completed_at: null,
+        },
+      },
+      orderItemsByOrderId: {
+        ...baseFixture.orderItemsByOrderId,
+        [materialOrderId]: [
+          {
+            ...baseFixture.orderItemsByOrderId[54518][0],
+            id: 9801,
+            order_id: materialOrderId,
+            related_item_id: null,
+          },
+          {
+            ...baseFixture.orderItemsByOrderId[54518][2],
+            id: 9802,
+            order_id: materialOrderId,
+            related_item_id: 9801,
+          },
+        ],
+      },
+      attachmentsByOrderId: {
+        ...baseFixture.attachmentsByOrderId,
+        [materialOrderId]: [],
+      },
+    });
+
+    await mockApi(page, {
+      authenticated: true,
+      permissions: POS_PERMISSIONS,
+      edgeGateways: false,
+      pos: fixture,
+    });
+    await primeOperatorSession(page, "pos-material-sequencing-token");
+
+    await page.goto(`/admin/12/modules/pos?id=${materialOrderId}&customer_id=12345679&step=3`);
+    await expect(page.getByTestId("pos-step-3")).toBeVisible();
+
+    await clickVisibleTestId(page, "pos-next-step");
+    await expect(page.getByTestId("pos-step-4")).toBeVisible();
+    expect(fixture.ordersById[materialOrderId]?.completed_at).toBeNull();
+    await expect(page.getByTestId("pos-step-4").getByTestId("pos-next-step")).toBeVisible({ timeout: 10_000 });
+
+    const completionRequest = page.waitForRequest((request) => {
+      return request.method() === "POST" && request.url().includes("/orders/mark_as_completed");
+    });
+    await clickVisibleTestId(page, "pos-next-step");
+    await completionRequest;
+
+    await expect
+      .poll(() => Boolean(fixture.ordersById[materialOrderId]?.completed_at), { timeout: 10_000 })
+      .toBe(true);
+    await expect
+      .poll(
+        () =>
+          Boolean(
+            fixture.attachmentsByOrderId[materialOrderId]?.some(
+              (attachment) => String(attachment?.content?.other || "").toUpperCase() === "WASH_CERTIFICATE"
+            )
+          ),
+        { timeout: 10_000 }
+      )
+      .toBe(true);
+  });
+});
+
 test.describe("Admin POS Orders - desktop required warning states", () => {
   test.beforeEach(async ({ page }, testInfo) => {
     test.skip(!testInfo.project.name.includes("desktop"), "Desktop-only required warning coverage");
diff --git a/tests/e2e/pos-flow.spec.js b/tests/e2e/pos-flow.spec.js
index a0b8378e..684197d1 100644
--- a/tests/e2e/pos-flow.spec.js
+++ b/tests/e2e/pos-flow.spec.js
@@ -279,6 +279,24 @@ async function mockPosApi(page, fixture) {
         }
       }
 
+      if (filters.includes("reg_1:")) {
+        const reg1Filter = String(filters.split("reg_1:")[1]?.split(",")[0] || "").toUpperCase();
+        if (reg1Filter) {
+          bookings = bookings.filter((booking) => String(booking.reg_1 || "").toUpperCase() === reg1Filter);
+        }
+      }
+
+      if (filters.includes("reg_2:")) {
+        const reg2Filter = String(filters.split("reg_2:")[1]?.split(",")[0] || "").toUpperCase();
+        if (reg2Filter) {
+          bookings = bookings.filter((booking) => String(booking.reg_2 || "").toUpperCase() === reg2Filter);
+        }
+      }
+
+      if (filters.includes("order_id:null") || filters.includes("order_id:is null")) {
+        bookings = bookings.filter((booking) => String(booking.status || "pending").toLowerCase() !== "completed");
+      }
+
       if (bookingId > 0) {
         await route.fulfill(
           json({
@@ -345,6 +363,9 @@ async function mockPosApi(page, fixture) {
           status: "completed",
         };
         fixture.completedBookingIds.push(bookingId);
+        if (typeof fixture.onCompleteOrderBooking === "function") {
+          fixture.onCompleteOrderBooking(bookingId, fixture.orderBookings[bookingIndex], fixture);
+        }
       }
 
       await route.fulfill(
@@ -507,7 +528,9 @@ async function mockPosApi(page, fixture) {
       }
 
       if (createdTo) {
-        duplicateOrders = duplicateOrders.filter((order) => String(order?.created_at || "") <= `${createdTo}T23:59:59.999Z`);
+        duplicateOrders = duplicateOrders.filter(
+          (order) => String(order?.created_at || "") <= `${createdTo}T23:59:59.999Z`
+        );
       }
 
       await route.fulfill(
@@ -833,6 +856,25 @@ async function commitDesktopReg1ByBlur(page, value) {
   });
 }
 
+async function openDesktopOrderBookingSettings(modal, bookingId) {
+  const settings = modal.getByTestId(`pos-desktop-order-booking-settings-${bookingId}`);
+  await expect(settings).toBeVisible({ timeout: 10_000 });
+  await settings.locator(".dropdown-trigger button").click();
+  const dropdown = settings.locator(".dropdown-content");
+  await expect(dropdown).toBeVisible({ timeout: 10_000 });
+  return dropdown;
+}
+
+async function completeDesktopOrderBookingFromSettings(page, modal, bookingId) {
+  const dropdown = await openDesktopOrderBookingSettings(modal, bookingId);
+  await dropdown.locator("button.dropdown-item-action").first().click();
+
+  const popup = page.locator(".swal2-popup");
+  await expect(popup).toBeVisible({ timeout: 10_000 });
+  await popup.locator(".swal2-deny").click();
+  await expect(popup).toBeHidden({ timeout: 10_000 });
+}
+
 test.describe("POS flow", () => {
   test.beforeEach(async ({ page }) => {
     await suppressVueDevtoolsOverlay(page);
@@ -1150,11 +1192,7 @@ test.describe("POS flow", () => {
     await page.locator("#reg_1").fill("EC212");
     await expect(page.getByTestId("desktop-booked-date-7102")).toContainText("20.03.2026", { timeout: 10_000 });
 
-    await page
-      .locator(".dropdown-item")
-      .filter({ hasText: "EC21234 - Pleno Logistics" })
-      .first()
-      .click();
+    await page.locator(".dropdown-item").filter({ hasText: "EC21234 - Pleno Logistics" }).first().click();
 
     await expect(activeBookingSelector).toBeVisible({ timeout: 10_000 });
     await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-use-9102")).toBeVisible({
@@ -1349,14 +1387,50 @@ test.describe("POS flow", () => {
     await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-use-8103")).toBeVisible({
       timeout: 10_000,
     });
+    await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-settings-8102")).toBeVisible({
+      timeout: 10_000,
+    });
     await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-services-8102")).toContainText(
       "Tankvogn",
       { timeout: 10_000 }
     );
-    await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-services-8102")).toContainText(
-      "Dolly",
-      { timeout: 10_000 }
+    await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-services-8102")).toContainText("Dolly", {
+      timeout: 10_000,
+    });
+    await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-service-row-8102-0")).toContainText(
+      "1x",
+      {
+        timeout: 10_000,
+      }
     );
+    await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-service-row-8102-0")).toContainText(
+      "Tankvogn",
+      {
+        timeout: 10_000,
+      }
+    );
+    await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-service-amount-8102-0")).toContainText(
+      "599",
+      {
+        timeout: 10_000,
+      }
+    );
+    await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-service-amount-8102-1")).toContainText(
+      "275",
+      {
+        timeout: 10_000,
+      }
+    );
+    await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-service-total-8102")).toContainText(
+      "874",
+      {
+        timeout: 10_000,
+      }
+    );
+    const bookingSettingsDropdown = await openDesktopOrderBookingSettings(activeBookingSelector, 8102);
+    await expect(bookingSettingsDropdown.locator("button.dropdown-item-action")).toHaveCount(4);
+    await page.keyboard.press("Escape");
+    await expect(bookingSettingsDropdown).toBeHidden({ timeout: 10_000 });
 
     await activeBookingSelector.getByTestId("pos-desktop-order-booking-use-8102").click();
     await expect(page.locator("#reg_1")).toHaveValue("TRACTORA");
@@ -1388,6 +1462,244 @@ test.describe("POS flow", () => {
     expect(fixture.completedBookingIds).not.toContain(8103);
   });
 
+  test("desktop booking selector prioritizes and highlights bookings scheduled for today", async ({
+    page,
+  }, testInfo) => {
+    test.skip(
+      testInfo.project.name !== "chromium-desktop",
+      "Desktop POS booking flow is validated on chromium-desktop."
+    );
+
+    const fixture = createPosFixture();
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+
+    fixture.vehicles = [
+      {
+        ...fixture.vehicles[0],
+        reg: "TODAYFIRST",
+        reference: "REF-TODAYFIRST",
+      },
+    ];
+    fixture.orderBookings = [
+      buildOrderBooking(8151, {
+        reg_1: "TRACTORTOMORROW",
+        reg_2: "TODAYFIRST",
+        datetime: tomorrow.toISOString(),
+        reference: "TOMORROW-BOOKING",
+        reference_number: "TOMORROW-BOOKING",
+      }),
+      buildOrderBooking(8150, {
+        reg_1: "TRACTORTODAY",
+        reg_2: "TODAYFIRST",
+        datetime: buildTodayTimestamp("08:00:00.000Z"),
+        reference: "TODAY-BOOKING",
+        reference_number: "TODAY-BOOKING",
+      }),
+    ];
+
+    await setupDesktopPosPage(page, fixture, { token: "pos-desktop-booking-today-priority" });
+
+    const activeBookingSelector = getActiveDesktopModal(page);
+    await commitDesktopReg1ByBlur(page, "TODAYFIRST");
+    await expect(activeBookingSelector).toBeVisible({ timeout: 10_000 });
+    await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-use-8150")).toBeVisible({
+      timeout: 10_000,
+    });
+    await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-use-8151")).toBeVisible({
+      timeout: 10_000,
+    });
+
+    const orderedBookingCards = await activeBookingSelector
+      .locator('[data-testid^="pos-desktop-order-booking-option-"]')
+      .evaluateAll((elements) => elements.map((element) => element.getAttribute("data-testid")));
+
+    expect(orderedBookingCards[0]).toBe("pos-desktop-order-booking-option-8150");
+    await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-today-8150")).toBeVisible({
+      timeout: 10_000,
+    });
+
+    const isTodayHighlighted = await activeBookingSelector
+      .getByTestId("pos-desktop-order-booking-option-8150")
+      .evaluate((element) => element.classList.contains("pos-desktop-order-booking-card--today"));
+    expect(isTodayHighlighted).toBe(true);
+  });
+
+  test("desktop booking selector refreshes after completing a booking from the action wheel and auto-resolves the last remaining match", async ({
+    page,
+  }, testInfo) => {
+    test.skip(
+      testInfo.project.name !== "chromium-desktop",
+      "Desktop POS booking flow is validated on chromium-desktop."
+    );
+
+    const fixture = createPosFixture();
+    fixture.vehicles = [
+      {
+        ...fixture.vehicles[0],
+        reg: "WHEELREFRESH",
+        reference: "REF-WHEELREFRESH",
+      },
+    ];
+    fixture.orderBookings = [
+      buildOrderBooking(8140, {
+        reg_1: "TRACTORX",
+        reg_2: "WHEELREFRESH",
+        datetime: "2026-01-01T07:00:00.000Z",
+        reference: "WHEEL-REFRESH-A",
+        reference_number: "WHEEL-REFRESH-A",
+      }),
+      buildOrderBooking(8141, {
+        reg_1: "TRACTORY",
+        reg_2: "WHEELREFRESH",
+        datetime: "2026-01-01T09:00:00.000Z",
+        reference: "WHEEL-REFRESH-B",
+        reference_number: "WHEEL-REFRESH-B",
+      }),
+    ];
+
+    await setupDesktopPosPage(page, fixture, { token: "pos-desktop-booking-wheel-refresh" });
+
+    const activeBookingSelector = getActiveDesktopModal(page);
+    await commitDesktopReg1ByBlur(page, "WHEELREFRESH");
+    await expect(activeBookingSelector).toBeVisible({ timeout: 10_000 });
+    await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-use-8140")).toBeVisible({
+      timeout: 10_000,
+    });
+    await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-use-8141")).toBeVisible({
+      timeout: 10_000,
+    });
+
+    await completeDesktopOrderBookingFromSettings(page, activeBookingSelector, 8140);
+
+    await expect(page.locator('[data-testid="pos-desktop-order-booking-modal"].is-active')).toHaveCount(0, {
+      timeout: 10_000,
+    });
+    await expect(page.locator("#reg_1")).toHaveValue("TRACTORY");
+    await expect(page.locator("#reg_2")).toHaveValue("WHEELREFRESH");
+    await expect(page.locator("#reference")).toHaveValue("WHEEL-REFRESH-B");
+    await expect.poll(() => fixture.completedBookingIds, { timeout: 10_000 }).toContain(8140);
+    expect(fixture.completedBookingIds).not.toContain(8141);
+  });
+
+  test("desktop booking selector closes when a wheel action refresh removes all remaining matches", async ({
+    page,
+  }, testInfo) => {
+    test.skip(
+      testInfo.project.name !== "chromium-desktop",
+      "Desktop POS booking flow is validated on chromium-desktop."
+    );
+
+    const fixture = createPosFixture();
+    fixture.vehicles = [
+      {
+        ...fixture.vehicles[0],
+        reg: "WHEELZERO",
+        reference: "REF-WHEELZERO",
+      },
+    ];
+    fixture.orderBookings = [
+      buildOrderBooking(8142, {
+        reg_1: "TRACTORZEROA",
+        reg_2: "WHEELZERO",
+        datetime: "2026-01-01T07:00:00.000Z",
+        reference: "WHEEL-ZERO-A",
+        reference_number: "WHEEL-ZERO-A",
+      }),
+      buildOrderBooking(8143, {
+        reg_1: "TRACTORZEROB",
+        reg_2: "WHEELZERO",
+        datetime: "2026-01-01T09:00:00.000Z",
+        reference: "WHEEL-ZERO-B",
+        reference_number: "WHEEL-ZERO-B",
+      }),
+    ];
+    fixture.onCompleteOrderBooking = (_bookingId, completedBooking, activeFixture) => {
+      const matchingPlate = String(completedBooking?.reg_2 || completedBooking?.reg_1 || "").toUpperCase();
+      activeFixture.orderBookings = activeFixture.orderBookings.map((booking) => {
+        const bookingPlate = String(booking?.reg_2 || booking?.reg_1 || "").toUpperCase();
+        if (bookingPlate !== matchingPlate) {
+          return booking;
+        }
+
+        return {
+          ...booking,
+          status: "completed",
+        };
+      });
+    };
+
+    await setupDesktopPosPage(page, fixture, { token: "pos-desktop-booking-wheel-zero" });
+
+    const activeBookingSelector = getActiveDesktopModal(page);
+    await commitDesktopReg1ByBlur(page, "WHEELZERO");
+    await expect(activeBookingSelector).toBeVisible({ timeout: 10_000 });
+    await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-use-8142")).toBeVisible({
+      timeout: 10_000,
+    });
+    await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-use-8143")).toBeVisible({
+      timeout: 10_000,
+    });
+
+    await completeDesktopOrderBookingFromSettings(page, activeBookingSelector, 8142);
+
+    await expect(page.locator('[data-testid="pos-desktop-order-booking-modal"].is-active')).toHaveCount(0, {
+      timeout: 10_000,
+    });
+    await expect(page.locator("#reg_1")).toHaveValue("WHEELZERO");
+    await expect(page.locator("#reference")).toHaveValue("REF-WHEELZERO");
+
+    await page.locator('[data-testid="pos-next-step"]:visible').click();
+    await expect(page.getByTestId("pos-step-2")).toBeVisible({ timeout: 10_000 });
+    await expect.poll(() => fixture.ordersById[9300]?.booking_id ?? null, { timeout: 10_000 }).toBe(null);
+  });
+
+  test("desktop does not reopen the booking selector after refreshing on a later POS step", async ({
+    page,
+  }, testInfo) => {
+    test.skip(
+      testInfo.project.name !== "chromium-desktop",
+      "Desktop POS reload behavior is validated on chromium-desktop."
+    );
+
+    const fixture = createPosFixture();
+    fixture.ordersById[9201] = {
+      ...fixture.ordersById[9201],
+      reg_1: "STEPTHREE",
+      reference: "STEP-THREE-REF",
+    };
+    fixture.orderItemsByOrderId[9201] = [
+      buildOrderItem(fixture.products[0], { order_id: 9201, product_id: 53, quantity: 1 }, 9801),
+    ];
+    fixture.orderBookings = [
+      buildOrderBooking(8160, {
+        reg_1: "STEPTHREE",
+        datetime: "2026-04-14T07:00:00.000Z",
+        reference: "STEP-THREE-A",
+        reference_number: "STEP-THREE-A",
+      }),
+      buildOrderBooking(8161, {
+        reg_1: "STEPTHREE",
+        datetime: "2026-04-14T09:00:00.000Z",
+        reference: "STEP-THREE-B",
+        reference_number: "STEP-THREE-B",
+      }),
+    ];
+
+    await setupDesktopPosPage(page, fixture, { token: "pos-desktop-step-3-refresh" });
+
+    await page.goto("/admin/1/modules/pos?id=9201&customer_id=12345&step=3");
+    await expect(page.getByTestId("pos-step-3")).toBeVisible({ timeout: 10_000 });
+    await expect(page).toHaveURL(/id=9201&customer_id=12345&step=3/);
+    await expect(getActiveDesktopModal(page)).toHaveCount(0);
+
+    await page.reload();
+    await expect(page.getByTestId("pos-step-3")).toBeVisible({ timeout: 10_000 });
+    await expect(page).toHaveURL(/id=9201&customer_id=12345&step=3/);
+    await expect(page.getByTestId("pos-step-3")).toContainText("STEP-THREE-REF");
+    await expect(getActiveDesktopModal(page)).toHaveCount(0);
+  });
+
   test("desktop shows booking selection before duplicate warning when multiple bookings need selection", async ({
     page,
   }, testInfo) => {
@@ -1545,9 +1857,7 @@ test.describe("POS flow", () => {
     });
   });
 
-  test("desktop duplicate warning cancel keeps the current step-1 state", async ({
-    page,
-  }, testInfo) => {
+  test("desktop duplicate warning cancel keeps the current step-1 state", async ({ page }, testInfo) => {
     test.skip(
       testInfo.project.name !== "chromium-desktop",
       "Desktop POS booking flow is validated on chromium-desktop."
@@ -1625,9 +1935,7 @@ test.describe("POS flow", () => {
     await expect(page.locator("#reg_1")).toHaveValue("AB12345");
   });
 
-  test("desktop blocks next until duplicate warning is resolved", async ({
-    page,
-  }, testInfo) => {
+  test("desktop blocks next until duplicate warning is resolved", async ({ page }, testInfo) => {
     test.skip(
       testInfo.project.name !== "chromium-desktop",
       "Desktop POS booking flow is validated on chromium-desktop."
@@ -1667,9 +1975,7 @@ test.describe("POS flow", () => {
     await expect.poll(() => fixture.ordersById[9300]?.reg_1 || null, { timeout: 10_000 }).toBe("AB12345");
   });
 
-  test("desktop keyboard selection opens the booking chooser for booked search results", async ({
-    page,
-  }, testInfo) => {
+  test("desktop keyboard selection opens the booking chooser for booked search results", async ({ page }, testInfo) => {
     test.skip(
       testInfo.project.name !== "chromium-desktop",
       "Desktop POS booking flow is validated on chromium-desktop."
@@ -1736,9 +2042,7 @@ test.describe("POS flow", () => {
     await reg1Input.press("ArrowDown");
     await expect(activeDropdownItems).toHaveCount(1);
     await expect(activeDropdownItems.first()).toContainText("EC21234");
-    await expect
-      .poll(() => page.evaluate(() => window.getSelection()?.toString() || ""), { timeout: 10_000 })
-      .toBe("");
+    await expect.poll(() => page.evaluate(() => window.getSelection()?.toString() || ""), { timeout: 10_000 }).toBe("");
     await reg1Input.press("Enter");
 
     await expect(reg1Input).toHaveValue("EC21234");
@@ -1751,9 +2055,7 @@ test.describe("POS flow", () => {
     });
   });
 
-  test("desktop dropdown click opens the booking chooser for booked search results", async ({
-    page,
-  }, testInfo) => {
+  test("desktop dropdown click opens the booking chooser for booked search results", async ({ page }, testInfo) => {
     test.skip(
       testInfo.project.name !== "chromium-desktop",
       "Desktop POS booking flow is validated on chromium-desktop."
@@ -1803,16 +2105,10 @@ test.describe("POS flow", () => {
     const reg1Input = page.locator("#reg_1");
 
     await reg1Input.fill("EC21");
-    await page
-      .locator(".dropdown-item")
-      .filter({ hasText: "EC21234 - Pleno Logistics" })
-      .first()
-      .click();
+    await page.locator(".dropdown-item").filter({ hasText: "EC21234 - Pleno Logistics" }).first().click();
 
     await expect(reg1Input).toHaveValue("EC21234");
-    await expect
-      .poll(() => page.evaluate(() => window.getSelection()?.toString() || ""), { timeout: 10_000 })
-      .toBe("");
+    await expect.poll(() => page.evaluate(() => window.getSelection()?.toString() || ""), { timeout: 10_000 }).toBe("");
     await expect(activeBookingSelector).toBeVisible({ timeout: 10_000 });
     await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-use-8124")).toBeVisible({
       timeout: 10_000,
@@ -1822,9 +2118,7 @@ test.describe("POS flow", () => {
     });
   });
 
-  test("desktop blocks next until a multiple-booking chooser is resolved", async ({
-    page,
-  }, testInfo) => {
+  test("desktop blocks next until a multiple-booking chooser is resolved", async ({ page }, testInfo) => {
     test.skip(
       testInfo.project.name !== "chromium-desktop",
       "Desktop POS booking flow is validated on chromium-desktop."
diff --git a/tests/e2e/pos-mobile-order-flow.spec.js b/tests/e2e/pos-mobile-order-flow.spec.js
index 4288efd8..68bf3529 100644
--- a/tests/e2e/pos-mobile-order-flow.spec.js
+++ b/tests/e2e/pos-mobile-order-flow.spec.js
@@ -194,11 +194,18 @@ async function selectPrimaryProduct(page, productId = 53) {
 }
 
 async function openVehicleSelectionFromPrimaryProduct(page, productName = "Tank truck wash") {
-  const currentPrimaryProduct = page.getByText(productName, { exact: true });
-  await expect(currentPrimaryProduct).toBeVisible({ timeout: 10_000 });
-  await currentPrimaryProduct.dispatchEvent("pointerdown");
+  const namedProduct = page.getByText(productName, { exact: true });
+  const fallbackCard = page.getByTestId("pos-mobile-primary-product-card");
+  const hasNamedProduct = await namedProduct
+    .isVisible()
+    .then(() => true)
+    .catch(() => false);
+  const trigger = hasNamedProduct ? namedProduct : fallbackCard;
+
+  await expect(trigger).toBeVisible({ timeout: 10_000 });
+  await trigger.dispatchEvent("pointerdown");
   await page.waitForTimeout(650);
-  await currentPrimaryProduct.dispatchEvent("pointerup");
+  await trigger.dispatchEvent("pointerup");
   await expect(page.getByTestId("pos-mobile-vehicle-selection")).toBeVisible({ timeout: 10_000 });
 }
 
@@ -1894,6 +1901,44 @@ test.describe("POS mobile order flow", () => {
     await expect.poll(() => fixture.requestCounters.attachmentUpload, { timeout: 10_000 }).toBe(1);
     await waitForStepReset(page);
   });
+
+  test("shows the safety seal field for mobile baskets with a wash certificate and completes via order completion", async ({
+    page,
+  }) => {
+    const fixture = createMobilePosFixture();
+
+    await createOrderFromStep1(page, fixture, {
+      reg: "SEAL123",
+      reference: "SEAL-REF",
+      customerNumber: REGULAR_CUSTOMER_ID,
+    });
+
+    const orderId = Number(new URL(page.url()).searchParams.get("id"));
+    expect(orderId).toBeGreaterThan(0);
+
+    const safetySealInput = page.getByTestId("pos-mobile-safety-seal-step-2-input");
+    await expect(safetySealInput).toBeVisible({ timeout: 10_000 });
+    await safetySealInput.fill("SEAL-9001");
+    await safetySealInput.press("Tab");
+
+    await page.getByTestId("pos-mobile-next-step").click();
+    await expect.poll(() => fixture.requestCounters.markAsCompleted, { timeout: 10_000 }).toBe(1);
+    await expect(fixture.markCompletedOrderIds).toContain(orderId);
+    await expect
+      .poll(() => fixture.ordersById[orderId]?.safety_seal ?? "", { timeout: 10_000 })
+      .toBe("SEAL-9001");
+    await expect
+      .poll(
+        () =>
+          Boolean(
+            fixture.attachmentsByOrderId[orderId]?.some(
+              (attachment) => String(attachment?.content?.other || "").toUpperCase() === "WASH_CERTIFICATE"
+            )
+          ),
+        { timeout: 10_000 }
+      )
+      .toBe(true);
+  });
 });
 
 function fixtureProduct(productId) {
diff --git a/tests/e2e/subuser-management.spec.ts b/tests/e2e/subuser-management.spec.ts
new file mode 100644
index 00000000..eff33c6d
--- /dev/null
+++ b/tests/e2e/subuser-management.spec.ts
@@ -0,0 +1,469 @@
+import { expect, test, type Page, type Route } from "@playwright/test";
+
+type MockSubuser = {
+  id: number;
+  username: string | null;
+  name: string | null;
+  email: string | null;
+  phone_country_code: number | null;
+  phone: number | null;
+  created_at: string;
+  updated_at: string;
+  suspended_at: string | null;
+  two_factor_enabled: boolean;
+  setup_required: boolean;
+  grant_id: number;
+  grant_enabled: boolean;
+  grant_note: string | null;
+  grant_permissions: string[];
+  access_state: "active" | "pending_setup" | "disabled" | "inactive";
+};
+
+const API_PATTERN = /https:\/\/api\.truckwash\.io(?::4433)?\//;
+
+const baseUserSession = {
+  id: 12,
+  customer_number: 12345678,
+  group_id: 3,
+  email: "demo@truckwash.test",
+  phone: {
+    number: "11111111",
+    country_code: "45",
+  },
+  notifications: {
+    wash_certificate_email: null,
+    email_notifications_enabled: true,
+    sms_notifications_enabled: false,
+  },
+  created_at: "2026-04-14 09:00:00",
+  updated_at: "2026-04-14 09:00:00",
+  display_name: "Demo Company",
+  economic_customer: [],
+};
+
+const baseSubuserSession = {
+  id: 91,
+  username: "manager",
+  name: "Subuser Manager",
+  email: "manager@example.com",
+  phone_country_code: 45,
+  phone: 12345678,
+  created_at: "2026-04-14 09:00:00",
+  updated_at: "2026-04-14 09:00:00",
+  suspended_at: null,
+  two_factor_enabled: false,
+  grants: [
+    {
+      name: "Demo Company",
+      billing_customer_number: 12345678,
+      permissions: ["SUBUSERS_LIST", "SUBUSERS_ADD", "SUBUSERS_EDIT", "SUBUSERS_DELETE"],
+    },
+  ],
+};
+
+const initialSubusers = (): MockSubuser[] => [
+  {
+    id: 1,
+    username: "driver.pending",
+    name: "Pending Driver",
+    email: null,
+    phone_country_code: 45,
+    phone: 11111111,
+    created_at: "2026-04-14 08:00:00",
+    updated_at: "2026-04-14 08:00:00",
+    suspended_at: null,
+    two_factor_enabled: false,
+    setup_required: true,
+    grant_id: 11,
+    grant_enabled: true,
+    grant_note: null,
+    grant_permissions: ["BOOKINGS_LIST"],
+    access_state: "pending_setup",
+  },
+  {
+    id: 2,
+    username: "driver.active",
+    name: "Active Driver",
+    email: "active@example.com",
+    phone_country_code: 45,
+    phone: 22222222,
+    created_at: "2026-04-14 07:30:00",
+    updated_at: "2026-04-14 07:30:00",
+    suspended_at: null,
+    two_factor_enabled: false,
+    setup_required: false,
+    grant_id: 12,
+    grant_enabled: true,
+    grant_note: "Morgenhold",
+    grant_permissions: ["BOOKINGS_LIST", "VEHICLES_LIST"],
+    access_state: "active",
+  },
+  {
+    id: 3,
+    username: "driver.disabled",
+    name: "Disabled Driver",
+    email: "disabled@example.com",
+    phone_country_code: 45,
+    phone: 33333333,
+    created_at: "2026-04-14 07:00:00",
+    updated_at: "2026-04-14 07:00:00",
+    suspended_at: null,
+    two_factor_enabled: false,
+    setup_required: false,
+    grant_id: 13,
+    grant_enabled: false,
+    grant_note: "Sat på pause",
+    grant_permissions: ["BOOKINGS_LIST"],
+    access_state: "disabled",
+  },
+];
+
+const permissionNodePayload = [
+  {
+    group: "Subusers",
+    description: "Subuser management",
+    nodes: [
+      {
+        key: "SUBUSERS_LIST",
+        name: "List chauffeurs",
+        description: "Can view chauffeurs",
+        type: "LIST",
+        default: false,
+      },
+      {
+        key: "SUBUSERS_EDIT",
+        name: "Edit chauffeurs",
+        description: "Can edit chauffeurs",
+        type: "EDIT",
+        default: false,
+      },
+    ],
+  },
+];
+
+const jsonResponse = (route: Route, data: unknown, meta: Record<string, unknown> = {}) =>
+  route.fulfill({
+    status: 200,
+    contentType: "application/json",
+    body: JSON.stringify({
+      success: true,
+      data,
+      meta,
+      includes: [],
+    }),
+  });
+
+const recalculateAccessState = (subuser: MockSubuser) => {
+  if (subuser.grant_enabled) {
+    subuser.access_state = subuser.setup_required ? "pending_setup" : "active";
+    return;
+  }
+
+  subuser.access_state = "disabled";
+};
+
+async function primeSession(page: Page, options: { token: string; isSubuser?: boolean; selectedCustomerNumber?: number }) {
+  await page.addInitScript((session) => {
+    window.localStorage.setItem("token", session.token);
+    if (session.isSubuser) {
+      window.localStorage.setItem("is_subuser", "true");
+    } else {
+      window.localStorage.removeItem("is_subuser");
+    }
+
+    if (session.selectedCustomerNumber) {
+      window.localStorage.setItem("selected_customer_number", String(session.selectedCustomerNumber));
+    } else {
+      window.localStorage.removeItem("selected_customer_number");
+    }
+  }, options);
+}
+
+async function mockManagementApi(
+  page: Page,
+  {
+    userPermissions = ["user"],
+    subuserPermissions = ["SUBUSERS_LIST", "SUBUSERS_ADD", "SUBUSERS_EDIT", "SUBUSERS_DELETE"],
+    isSubuser = false,
+  }: {
+    userPermissions?: string[];
+    subuserPermissions?: string[];
+    isSubuser?: boolean;
+  }
+) {
+  const subusers = initialSubusers();
+  let nextId = 100;
+  let nextGrantId = 1000;
+
+  await page.route(API_PATTERN, async (route) => {
+    const request = route.request();
+    const url = new URL(request.url());
+
+    if (url.pathname === "/auth/session" && request.method() === "GET") {
+      return jsonResponse(route, {
+        ...baseUserSession,
+        permissions: userPermissions,
+      });
+    }
+
+    if (url.pathname === "/subusers/me" && request.method() === "GET") {
+      return jsonResponse(route, {
+        ...baseSubuserSession,
+        grants: baseSubuserSession.grants.map((grant) => ({
+          ...grant,
+          permissions: subuserPermissions,
+        })),
+      });
+    }
+
+    if (url.pathname === "/subusers" && request.method() === "GET") {
+      return jsonResponse(route, subusers, {
+        pagination: {
+          page: 1,
+          per_page: 100,
+          total: subusers.length,
+        },
+      });
+    }
+
+    if (url.pathname === "/subusers" && request.method() === "PUT") {
+      const payload = request.postDataJSON() as Record<string, string | number | null>;
+      const target = subusers.find((subuser) => subuser.id === Number(payload.id));
+      if (!target) {
+        return route.fulfill({ status: 404, body: JSON.stringify({ success: false }) });
+      }
+
+      target.name = (payload.name as string) ?? target.name;
+      target.username = (payload.username as string | null) ?? target.username;
+      target.email = (payload.email as string | null) ?? target.email;
+      target.phone_country_code = payload.phone_country_code ? Number(payload.phone_country_code) : target.phone_country_code;
+      target.phone = payload.phone ? Number(payload.phone) : target.phone;
+      target.updated_at = "2026-04-14 10:00:00";
+      return jsonResponse(route, { subuser: target, grant: { id: target.grant_id } });
+    }
+
+    if (url.pathname === "/subusers/invite" && request.method() === "POST") {
+      const payload = request.postDataJSON() as Record<string, string | number | null>;
+      const created: MockSubuser = {
+        id: nextId++,
+        username: (payload.username as string | null) || null,
+        name: payload.name as string,
+        email: (payload.email as string | null) || null,
+        phone_country_code: Number(payload.phone_country_code),
+        phone: Number(payload.phone),
+        created_at: "2026-04-14 10:00:00",
+        updated_at: "2026-04-14 10:00:00",
+        suspended_at: null,
+        two_factor_enabled: false,
+        setup_required: true,
+        grant_id: nextGrantId++,
+        grant_enabled: true,
+        grant_note: null,
+        grant_permissions: [],
+        access_state: "pending_setup",
+      };
+      subusers.unshift(created);
+      return jsonResponse(route, {
+        subuser: created,
+        grant: { id: created.grant_id },
+        invite: {
+          setup_link: `https://truckwash.io/complete-registration?token=subuser-${created.id}`,
+          delivery: {
+            status: "unavailable",
+            message: "SMS blev ikke sendt i testmiljøet.",
+          },
+        },
+      });
+    }
+
+    if (url.pathname === "/subusers/invite/resend" && request.method() === "POST") {
+      const payload = request.postDataJSON() as Record<string, number>;
+      const target = subusers.find((subuser) => subuser.id === Number(payload.id));
+      if (!target) {
+        return route.fulfill({ status: 404, body: JSON.stringify({ success: false }) });
+      }
+
+      return jsonResponse(route, {
+        subuser: target,
+        grant: { id: target.grant_id },
+        invite: {
+          setup_link: `https://truckwash.io/complete-registration?token=resend-${target.id}`,
+          delivery: {
+            status: "sent",
+            message: "Invitation sendt igen.",
+          },
+        },
+      });
+    }
+
+    if (url.pathname === "/subusers/grants" && request.method() === "PUT") {
+      const payload = request.postDataJSON() as Record<string, unknown>;
+      const target = subusers.find((subuser) => subuser.grant_id === Number(payload.id));
+      if (!target) {
+        return route.fulfill({ status: 404, body: JSON.stringify({ success: false }) });
+      }
+
+      if (Array.isArray(payload.permissions)) {
+        target.grant_permissions = payload.permissions as string[];
+      }
+      if (Object.prototype.hasOwnProperty.call(payload, "note")) {
+        target.grant_note = (payload.note as string) || null;
+      }
+      if (Object.prototype.hasOwnProperty.call(payload, "enabled")) {
+        target.grant_enabled = Boolean(payload.enabled);
+      }
+      recalculateAccessState(target);
+      target.updated_at = "2026-04-14 10:05:00";
+
+      return jsonResponse(route, {
+        id: target.grant_id,
+        enabled: target.grant_enabled,
+        note: target.grant_note,
+        permissions: target.grant_permissions,
+      });
+    }
+
+    if (url.pathname === "/subusers/permission-nodes" && request.method() === "GET") {
+      return jsonResponse(route, permissionNodePayload);
+    }
+
+    if (url.pathname === "/subusers/me" && request.method() === "PUT") {
+      const payload = request.postDataJSON() as Record<string, unknown>;
+      return jsonResponse(route, {
+        ...baseSubuserSession,
+        name: (payload.name as string) ?? baseSubuserSession.name,
+        email: (payload.email as string) ?? baseSubuserSession.email,
+      });
+    }
+
+    if (url.pathname === "/ping" && request.method() === "GET") {
+      return jsonResponse(route, { ok: true });
+    }
+
+    return route.fulfill({
+      status: 404,
+      contentType: "application/json",
+      body: JSON.stringify({
+        success: false,
+        data: {
+          message: `Unhandled API route in test: ${request.method()} ${url.pathname}`,
+        },
+        meta: {},
+        includes: [],
+      }),
+    });
+  });
+}
+
+test("customer user can invite and manage chauffører from /user/subusers", async ({ page }) => {
+  await primeSession(page, { token: "user-token" });
+  await mockManagementApi(page, { userPermissions: ["user"] });
+
+  await page.goto("/user/subusers");
+
+  await expect(page.getByRole("heading", { name: /underbrugere|chauffører/i })).toBeVisible();
+  await expect(page.getByRole("button", { name: /invitér chauffør/i })).toBeVisible();
+  await expect(page.getByText("Pending Driver")).toBeVisible();
+  await expect(page.getByText("Disabled Driver")).toBeVisible();
+
+  await page.getByRole("button", { name: /invitér chauffør/i }).click();
+  await page.fill("#subuser-form-name", "Invited Driver");
+  await page.fill("#subuser-form-phone-country-code", "45");
+  await page.fill("#subuser-form-phone", "44444444");
+  await page.fill("#subuser-form-username", "driver.invited");
+  await page.fill("#subuser-form-email", "invited@example.com");
+  await page.getByRole("button", { name: "Send invitation" }).click();
+  await expect(page.getByRole("heading", { name: "Chauffør oprettet" })).toBeVisible();
+  await page.getByRole("button", { name: "Luk" }).click();
+  await expect(page.getByText("Invited Driver")).toBeVisible();
+
+  await page.getByTestId("subuser-edit-100").click();
+  await page.fill("#subuser-form-name", "Updated Driver");
+  await page.fill("#subuser-form-phone-country-code", "45");
+  await page.fill("#subuser-form-phone", "45454545");
+  await page.fill("#subuser-form-email", "updated@example.com");
+  await page.getByRole("button", { name: "Gem ændringer" }).click();
+  await expect(page.getByRole("heading", { name: "Chauffør opdateret" })).toBeVisible();
+  await page.getByRole("button", { name: "Luk" }).click();
+  await expect(page.getByText("Updated Driver")).toBeVisible();
+
+  await page.getByTestId("subuser-permissions-100").click();
+  await expect(page.getByText("Tilladelsesnoder for Updated Driver")).toBeVisible();
+  await page.locator('input[type="checkbox"]').first().check();
+  await page.getByRole("button", { name: "Gem" }).click();
+  await expect(page.getByText(/SUBUSERS_LIST/)).toBeVisible();
+
+  await page.getByTestId("subuser-toggle-100").click();
+  await page.getByRole("button", { name: "Deaktivér" }).click();
+  await expect(page.getByTestId("subuser-status-100")).toContainText("Deaktiveret");
+
+  await page.getByTestId("subuser-toggle-100").click();
+  await page.getByRole("button", { name: "Genaktivér" }).click();
+  await expect(page.getByTestId("subuser-status-100")).toContainText("Afventer opsætning");
+
+  await page.getByTestId("subuser-resend-100").click();
+  await expect(page.getByRole("heading", { name: "Chauffør oprettet" })).toBeVisible();
+  await page.getByRole("button", { name: "Luk" }).click();
+});
+
+test("authorized subuser manager can access the chauffører page and legacy grants route redirects", async ({ page }) => {
+  await primeSession(page, {
+    token: "subuser-manager-token",
+    isSubuser: true,
+    selectedCustomerNumber: 12345678,
+  });
+  await mockManagementApi(page, {
+    isSubuser: true,
+    subuserPermissions: ["SUBUSERS_LIST", "SUBUSERS_ADD", "SUBUSERS_EDIT", "SUBUSERS_DELETE"],
+  });
+
+  await page.goto("/user/subusers/grants");
+  await expect(page).toHaveURL("/user/subusers");
+  await expect(page.locator("label.label", { hasText: "Vælg kunde" })).toBeVisible();
+  await expect(page.getByRole("button", { name: /invitér chauffør/i })).toBeVisible();
+});
+
+test("subuser self-service profile edits still save through /subusers/me", async ({ page }) => {
+  await primeSession(page, {
+    token: "subuser-profile-token",
+    isSubuser: true,
+    selectedCustomerNumber: 12345678,
+  });
+  await mockManagementApi(page, {
+    isSubuser: true,
+  });
+
+  await page.goto("/user/profile");
+  await expect(page.locator(".card-header").filter({ has: page.locator(".fa-user") }).first()).toBeVisible();
+
+  await page.locator(".card-header").filter({ has: page.locator(".fa-user") }).first().click();
+  await page.locator('button:has-text("Rediger navn")').click();
+  await page.fill(".swal2-input", "Profile Driver Updated");
+  await page.click(".swal2-confirm");
+  await expect(page.locator(".swal2-title")).toContainText("Navn gemt");
+  await page.click(".swal2-confirm");
+
+  await page.locator(".card-header").filter({ has: page.locator(".fa-address-card") }).first().click();
+  await page.locator('button:has-text("Rediger e-mail")').click();
+  await page.fill(".swal2-input", "profile.updated@example.com");
+  await page.click(".swal2-confirm");
+  await expect(page.locator(".swal2-title")).toContainText("E-mail gemt");
+  await page.click(".swal2-confirm");
+});
+
+test("subuser without SUBUSERS_LIST cannot access the chauffører page", async ({ page }) => {
+  await primeSession(page, {
+    token: "subuser-no-access-token",
+    isSubuser: true,
+    selectedCustomerNumber: 12345678,
+  });
+  await mockManagementApi(page, {
+    isSubuser: true,
+    subuserPermissions: ["BOOKINGS_LIST"],
+  });
+
+  await page.goto("/user/subusers");
+
+  await expect(page.getByRole("heading", { name: "403 Forbidden" }).first()).toBeVisible();
+  await expect(page.getByRole("heading", { name: "You do not have permission to view this page." })).toBeVisible();
+});
diff --git a/tests/e2e/subuserCompleteRegistration.spec.ts b/tests/e2e/subuserCompleteRegistration.spec.ts
new file mode 100644
index 00000000..89f424cd
--- /dev/null
+++ b/tests/e2e/subuserCompleteRegistration.spec.ts
@@ -0,0 +1,79 @@
+import { expect, test } from "@playwright/test";
+import { mockApi } from "./support/network.js";
+
+function json(route, body, status = 200) {
+  return route.fulfill({
+    status,
+    contentType: "application/json",
+    body: JSON.stringify(body),
+  });
+}
+
+test("loads the complete-registration page and completes subuser setup from the token link", async ({ page }) => {
+  await mockApi(page, { authenticated: false });
+
+  let submittedPayload = null;
+
+  await page.route("**/subusers/setup*", async (route) => {
+    const request = route.request();
+    const url = new URL(request.url());
+
+    if (request.method() === "GET") {
+      await json(route, {
+        data: {
+          message: "Token is valid",
+          subuser_id: 91,
+        },
+      });
+      return;
+    }
+
+    submittedPayload = request.postDataJSON();
+    await json(route, {
+      data: {
+        message: "Complete registration successful",
+      },
+    });
+  });
+
+  await page.goto("/complete-registration?token=valid-setup-token");
+
+  await expect(page.locator("#complete-registration-form")).toBeVisible();
+  await page.fill("#complete-registration-name", "Driver Demo");
+  await page.fill("#complete-registration-username", "driver.demo");
+  await page.fill("#complete-registration-email", "driver@example.com");
+  await page.fill("#complete-registration-password", "ValidPass123");
+  await page.fill("#complete-registration-confirm-password", "ValidPass123");
+  await page.click("#complete-registration-submit");
+
+  await expect(page.locator("#complete_registration_alert_success")).toHaveText("Complete registration successful");
+  await expect(page.locator('a[href=\"/login/driver\"]')).toBeVisible();
+  expect(submittedPayload).toMatchObject({
+    token: "valid-setup-token",
+    name: "Driver Demo",
+    username: "driver.demo",
+    email: "driver@example.com",
+    password: "ValidPass123",
+  });
+});
+
+test("shows an inline error when the complete-registration token is invalid", async ({ page }) => {
+  await mockApi(page, { authenticated: false });
+
+  await page.route("**/subusers/setup*", async (route) => {
+    await json(
+      route,
+      {
+        data: {
+          message: "Invalid or expired token",
+        },
+      },
+      400
+    );
+  });
+
+  await page.goto("/complete-registration?token=invalid-setup-token");
+
+  await expect(page.locator("#complete_registration_alert_error")).toHaveText("Invalid or expired token");
+  await expect(page.locator("#complete-registration-invalid")).toBeVisible();
+});
diff --git a/tests/e2e/subuserProfileSecurity.spec.ts b/tests/e2e/subuserProfileSecurity.spec.ts
index fe0e5638..084b39ee 100644
--- a/tests/e2e/subuserProfileSecurity.spec.ts
+++ b/tests/e2e/subuserProfileSecurity.spec.ts
@@ -10,10 +10,31 @@ async function openSubuserSecurity(page) {
   await expect(page.getByTestId("subuser-profile-security-logout")).toBeVisible();
 }
 
+async function expectLogoutButtonStyling(page, button) {
+  await expect(button).toHaveClass(/is-danger/);
+  await expect(button).toHaveClass(/is-outlined/);
+
+  const viewportWidth = page.viewportSize()?.width ?? Number.MAX_SAFE_INTEGER;
+  if (viewportWidth <= 768) {
+    const dimensions = await button.evaluate((element) => {
+      const rect = element.getBoundingClientRect();
+      const parentRect = element.parentElement?.getBoundingClientRect();
+      return {
+        width: rect.width,
+        parentWidth: parentRect?.width ?? rect.width,
+      };
+    });
+
+    expect(Math.abs(dimensions.parentWidth - dimensions.width)).toBeLessThanOrEqual(2);
+  }
+}
+
 test("[PROFILE][Subuser][Security] renders the current security surface", async ({ page }) => {
   await openSubuserSecurity(page);
 
-  await expect(page.getByTestId("subuser-profile-security-logout")).toBeVisible();
+  const logoutButton = page.getByTestId("subuser-profile-security-logout");
+  await expect(logoutButton).toBeVisible();
+  await expectLogoutButtonStyling(page, logoutButton);
   await expect(page.getByTestId("subuser-profile-passkeys").getByTestId("passkey-add")).toBeVisible();
   await expect(page.getByTestId("subuser-profile-two-factor").getByTestId("two-factor-status")).toBeVisible();
 
@@ -28,3 +49,19 @@ test("[PROFILE][Subuser][Security] opens the logout confirmation dialog", async
   await page.getByTestId("subuser-profile-security-logout").click();
   await expect(page.locator(".swal2-popup")).toBeVisible();
 });
+
+test("[PROFILE][Subuser][Security] logs out and requires re-authentication", async ({ page }) => {
+  await openSubuserSecurity(page);
+
+  await page.getByTestId("subuser-profile-security-logout").click();
+  const logoutDialog = page.locator(".swal2-popup");
+  await expect(logoutDialog).toBeVisible();
+  await logoutDialog.locator(".swal2-confirm").click();
+
+  await expect(page).toHaveURL(/\/login(?:\?.*)?$/);
+  await expect(page.locator('input[name="customer_number"]')).toBeVisible();
+
+  await page.goto("/user/profile");
+  await expect(page).toHaveURL(/\/login(?:\?.*)?$/);
+  await expect(page.locator('input[name="customer_number"]')).toBeVisible();
+});
diff --git a/tests/e2e/support/bookingFlow.ts b/tests/e2e/support/bookingFlow.ts
index d1472402..dcd9dc40 100644
--- a/tests/e2e/support/bookingFlow.ts
+++ b/tests/e2e/support/bookingFlow.ts
@@ -8,6 +8,58 @@ type BookingFlowData = {
   notes: string;
 };
 
+function addDays(baseDate: Date, days: number) {
+  return new Date(baseDate.getFullYear(), baseDate.getMonth(), baseDate.getDate() + days, 0, 0, 0, 0);
+}
+
+function formatDateKey(value: Date) {
+  const year = value.getFullYear();
+  const month = String(value.getMonth() + 1).padStart(2, "0");
+  const day = String(value.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+function formatTriggerDate(value: Date) {
+  const day = String(value.getDate()).padStart(2, "0");
+  const month = String(value.getMonth() + 1).padStart(2, "0");
+  const year = value.getFullYear();
+  return `${day}.${month}.${year}`;
+}
+
+function formatSummaryDate(value: Date) {
+  return value.toLocaleDateString("da-DK", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+async function selectBookingDateTime(page: Page) {
+  const selectedDate = addDays(new Date(), 2);
+  const selectedDayTestId = `booking-date-time-day-${formatDateKey(selectedDate)}`;
+  const selectedSlotTestId = "booking-date-time-slot-14-00";
+  const selectorConfirm = page.getByTestId("booking-date-time-confirm");
+
+  if (!(await selectorConfirm.isVisible().catch(() => false))) {
+    await page.getByTestId("booking-date-time-trigger-date").click();
+  }
+
+  await expect(page.getByTestId(selectedDayTestId)).toBeVisible();
+  await page.getByTestId(selectedDayTestId).click();
+  await page.getByTestId(selectedSlotTestId).click();
+  await selectorConfirm.click();
+
+  await expect(page.getByTestId("booking-date-time-trigger-date")).toContainText(formatTriggerDate(selectedDate));
+  await expect(page.getByTestId("booking-date-time-trigger-time")).toContainText("~14.00");
+
+  return {
+    dateLabel: formatTriggerDate(selectedDate),
+    summaryDateLabel: formatSummaryDate(selectedDate),
+    summaryTimeLabel: "14.00",
+    yearLabel: String(selectedDate.getFullYear()),
+  };
+}
+
 async function isMobileBookingWizard(page: Page) {
   return page.getByTestId("booking-mobile-department-trigger").isVisible().catch(() => false);
 }
@@ -129,13 +181,10 @@ export async function completeBookingCreationFlow(page: Page, data: BookingFlowD
   if (mobileWizard) {
     await expect(page.getByTestId("booking-mobile-next")).toBeEnabled();
     await page.getByTestId("booking-mobile-next").click();
-
-    const dateTimeConfirm = page.getByTestId("booking-mobile-date-time-confirm");
-    if (await dateTimeConfirm.isVisible().catch(() => false)) {
-      await dateTimeConfirm.click();
-    }
   }
 
+  const selectedDateTime = await selectBookingDateTime(page);
+
   await fillBookingField(page, "booking-reference-toggle", "booking-reference-input", reference);
   await fillBookingField(page, "booking-po-toggle", "booking-po-input", poNumber);
   await fillBookingField(page, "booking-notes-toggle", "booking-notes-input", notes);
@@ -150,6 +199,9 @@ export async function completeBookingCreationFlow(page: Page, data: BookingFlowD
   }
 
   await expect(page.locator("#booking-summary-title")).toBeVisible();
+  await expect(page.getByTestId("booking-summary-date-time")).toContainText(selectedDateTime.summaryDateLabel);
+  await expect(page.getByTestId("booking-summary-date-time")).toContainText(selectedDateTime.summaryTimeLabel);
+  await expect(page.getByTestId("booking-summary-date-time")).toContainText(selectedDateTime.yearLabel);
   await page.click("#confirm-booking-button", { force: true });
   await expect(page).toHaveURL(/\/user/);
 }
diff --git a/tests/e2e/support/mobilePos.js b/tests/e2e/support/mobilePos.js
index 1e027c40..aafb580c 100644
--- a/tests/e2e/support/mobilePos.js
+++ b/tests/e2e/support/mobilePos.js
@@ -8,6 +8,7 @@ export const DEFAULT_LAST_ORDER_ID = 9100;
 export const DEFAULT_BOOKING_ID = 8101;
 export const REGULAR_CUSTOMER_ID = 12345;
 export const CARD_CUSTOMER_ID = 999;
+export const WASH_CERTIFICATE_PRODUCT_ID = 41;
 export const MOBILE_PERMISSIONS = ["admin", "department_access_1"];
 export const MOBILE_NEXT_STEP_COOLDOWN_MS = 2100;
 
@@ -44,6 +45,14 @@ function normalizeRegistrationValue(value) {
     .replace(/[^A-Z0-9]/g, "");
 }
 
+function normalizeSafetySealValue(value) {
+  if (value === null || value === undefined) {
+    return "";
+  }
+
+  return String(value).trim();
+}
+
 function createCustomer(customerNumber, overrides = {}) {
   return {
     id: customerNumber,
@@ -85,6 +94,7 @@ function createOrderRecord(orderId, overrides = {}) {
     reference: "",
     notes: "",
     po: "",
+    safety_seal: "",
     reg_1: "AB12345",
     reg_2: "",
     reg_3: "",
@@ -291,6 +301,53 @@ function createRequestLog(overrides = {}) {
   };
 }
 
+function isWashCertificateProduct(product) {
+  const productId = Number(product?.id ?? product?.product_id ?? product?.product?.id ?? 0);
+  if (productId === WASH_CERTIFICATE_PRODUCT_ID) {
+    return true;
+  }
+
+  return /vaskecertifikat|wash certificate|safety seal/i.test(String(product?.name ?? product?.product?.name ?? ""));
+}
+
+function orderContainsWashCertificate(fixture, orderId) {
+  return (fixture.orderItemsByOrderId[orderId] || []).some((item) => isWashCertificateProduct(item?.product || item));
+}
+
+function ensureWashCertificateAttachment(fixture, orderId) {
+  if (!Array.isArray(fixture.attachmentsByOrderId[orderId])) {
+    fixture.attachmentsByOrderId[orderId] = [];
+  }
+
+  const existingAttachment =
+    (fixture.attachmentsByOrderId[orderId] || []).find((attachment) => {
+      return String(attachment?.content?.other || "").toUpperCase() === "WASH_CERTIFICATE";
+    }) || null;
+
+  if (existingAttachment) {
+    return existingAttachment;
+  }
+
+  const attachmentId = fixture.nextAttachmentId++;
+  const attachment = {
+    id: attachmentId,
+    object_type: "orders",
+    object_id: orderId,
+    content: {
+      image: null,
+      document: `wash_certificate_${orderId}.pdf`,
+      relation: null,
+      other: "WASH_CERTIFICATE",
+      src: null,
+    },
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+    deleted_at: null,
+  };
+  fixture.attachmentsByOrderId[orderId].push(attachment);
+  return attachment;
+}
+
 function createFailureBudget(overrides = {}) {
   return {
     paymentIntentGet: 0,
@@ -729,6 +786,7 @@ export function buildMobilePosState(options = {}) {
       customerId,
       notes: options.notes ?? "",
       reference,
+      safetySeal: options.safetySeal ?? "",
       washId: options.washId ?? null,
       bookingId,
       bookingSelectionSkippedPlate: options.bookingSelectionSkippedPlate ?? "",
@@ -1415,6 +1473,7 @@ export async function mockMobilePosApi(page, fixture) {
         reference: body.reference || "",
         notes: body.notes || "",
         po: body.po || "",
+        safety_seal: normalizeSafetySealValue(body.safety_seal),
         reg_1: body.reg_1 || "",
         reg_2: body.reg_2 || "",
         reg_3: body.reg_3 || "",
@@ -1443,6 +1502,8 @@ export async function mockMobilePosApi(page, fixture) {
           order[body.field] =
             body.field === "reg_1" || body.field === "reg_2" || body.field === "reg_3"
               ? normalizeRegistrationValue(body.value)
+              : body.field === "safety_seal"
+              ? normalizeSafetySealValue(body.value)
               : body.value;
         } else {
           Object.assign(order, body);
@@ -1455,6 +1516,9 @@ export async function mockMobilePosApi(page, fixture) {
           if (Object.prototype.hasOwnProperty.call(body, "reg_3")) {
             order.reg_3 = normalizeRegistrationValue(body.reg_3);
           }
+          if (Object.prototype.hasOwnProperty.call(body, "safety_seal")) {
+            order.safety_seal = normalizeSafetySealValue(body.safety_seal);
+          }
         }
       }
       await route.fulfill(json({ success: true, data: clone(order || null) }));
@@ -1602,6 +1666,9 @@ export async function mockMobilePosApi(page, fixture) {
         fixture.markCompletedOrderIds.push(orderId);
         if (fixture.ordersById[orderId]) {
           fixture.ordersById[orderId].completed_at = new Date().toISOString();
+          if (orderContainsWashCertificate(fixture, orderId)) {
+            ensureWashCertificateAttachment(fixture, orderId);
+          }
         }
       }
       await route.fulfill(
diff --git a/tests/e2e/support/network.js b/tests/e2e/support/network.js
index d5e14a81..d6b6e754 100644
--- a/tests/e2e/support/network.js
+++ b/tests/e2e/support/network.js
@@ -119,6 +119,61 @@ function normalizeIncludeInInvoiceValue(value) {
   return null;
 }
 
+function normalizeSafetySealValue(value) {
+  if (value === null || value === undefined) {
+    return "";
+  }
+
+  return String(value).trim();
+}
+
+function isWashCertificateProduct(product) {
+  const productId = Number(product?.id ?? product?.product_id ?? product?.product?.id ?? 0);
+  if (productId === 41) {
+    return true;
+  }
+
+  return /vaskecertifikat|wash certificate|safety seal/i.test(String(product?.name ?? product?.product?.name ?? ""));
+}
+
+function orderContainsWashCertificate(posFixture, orderId) {
+  return (posFixture.orderItemsByOrderId[orderId] || []).some((item) => isWashCertificateProduct(item?.product || item));
+}
+
+function ensureWashCertificateAttachment(posFixture, orderId) {
+  if (!Array.isArray(posFixture.attachmentsByOrderId[orderId])) {
+    posFixture.attachmentsByOrderId[orderId] = [];
+  }
+
+  const existingAttachment =
+    (posFixture.attachmentsByOrderId[orderId] || []).find((attachment) => {
+      return String(attachment?.content?.other || "").toUpperCase() === "WASH_CERTIFICATE";
+    }) || null;
+
+  if (existingAttachment) {
+    return existingAttachment;
+  }
+
+  const attachmentId = posFixture.nextAttachmentId++;
+  const attachment = {
+    id: attachmentId,
+    object_type: "orders",
+    object_id: orderId,
+    content: {
+      image: null,
+      document: `wash_certificate_${orderId}.pdf`,
+      relation: null,
+      other: "WASH_CERTIFICATE",
+      src: null,
+    },
+    created_at: toSqlDateTime(),
+    updated_at: toSqlDateTime(),
+    deleted_at: null,
+  };
+  posFixture.attachmentsByOrderId[orderId].push(attachment);
+  return attachment;
+}
+
 function resolveDepartmentIncludeInInvoice(posFixture, departmentId) {
   const department = (posFixture.departments || []).find((entry) => Number(entry.id) === Number(departmentId));
   if (!department) {
@@ -977,6 +1032,7 @@ export function createPosFixture(overrides = {}) {
         department_id: 12,
         reference: "EC21233 - Test Ref. / Intern nummer",
         po: "",
+        safety_seal: "",
         notes: "",
         reg_1: "EC21235",
         reg_2: "",
@@ -1540,6 +1596,7 @@ async function handlePosRoute({ route, request, parsedUrl, pathname, method, pos
       department_id: Number(body.department_id || body.department || 12),
       reference: body.reference || "",
       po: body.po || "",
+      safety_seal: normalizeSafetySealValue(body.safety_seal),
       notes: body.notes || "",
       reg_1: normalizeRegistrationValue(body.reg_1),
       reg_2: normalizeRegistrationValue(body.reg_2),
@@ -1583,6 +1640,9 @@ async function handlePosRoute({ route, request, parsedUrl, pathname, method, pos
         ...(Object.prototype.hasOwnProperty.call(body, "created_at")
           ? { created_at: normalizeCreatedAtValue(body.created_at) }
           : {}),
+        ...(Object.prototype.hasOwnProperty.call(body, "safety_seal")
+          ? { safety_seal: normalizeSafetySealValue(body.safety_seal) }
+          : {}),
         ...(Object.prototype.hasOwnProperty.call(body, "include_in_invoice")
           ? { include_in_invoice: normalizeIncludeInInvoiceValue(body.include_in_invoice) }
           : {}),
@@ -1604,6 +1664,8 @@ async function handlePosRoute({ route, request, parsedUrl, pathname, method, pos
             ? normalizeIncludeInInvoiceValue(body.value)
             : body.field === "reg_1" || body.field === "reg_2" || body.field === "reg_3"
             ? normalizeRegistrationValue(body.value)
+            : body.field === "safety_seal"
+            ? normalizeSafetySealValue(body.value)
             : body.field === "created_at"
             ? normalizeCreatedAtValue(body.value)
             : body.value;
@@ -1623,6 +1685,9 @@ async function handlePosRoute({ route, request, parsedUrl, pathname, method, pos
           ...(Object.prototype.hasOwnProperty.call(body, "created_at")
             ? { created_at: normalizeCreatedAtValue(body.created_at) }
             : {}),
+          ...(Object.prototype.hasOwnProperty.call(body, "safety_seal")
+            ? { safety_seal: normalizeSafetySealValue(body.safety_seal) }
+            : {}),
           ...(Object.prototype.hasOwnProperty.call(body, "include_in_invoice")
             ? { include_in_invoice: normalizeIncludeInInvoiceValue(body.include_in_invoice) }
             : {}),
@@ -1751,6 +1816,9 @@ async function handlePosRoute({ route, request, parsedUrl, pathname, method, pos
   if (pathname.endsWith("/order/wash-certificate") && method === "POST") {
     const body = request.postDataJSON?.() || {};
     const orderId = Number(body.id || 0);
+    if (posFixture.ordersById[orderId]) {
+      posFixture.ordersById[orderId].safety_seal = normalizeSafetySealValue(body.safety_seal);
+    }
 
     if (!Array.isArray(posFixture.attachmentsByOrderId[orderId])) {
       posFixture.attachmentsByOrderId[orderId] = [];
@@ -1828,6 +1896,9 @@ async function handlePosRoute({ route, request, parsedUrl, pathname, method, pos
     const orderId = Number(body.id || 0);
     if (posFixture.ordersById[orderId]) {
       posFixture.ordersById[orderId].completed_at = new Date().toISOString();
+      if (orderContainsWashCertificate(posFixture, orderId)) {
+        ensureWashCertificateAttachment(posFixture, orderId);
+      }
     }
     await route.fulfill(json({ success: true, data: { id: orderId } }));
     return true;
diff --git a/tests/e2e/userProfileSecurity.spec.ts b/tests/e2e/userProfileSecurity.spec.ts
index beb4bbe7..ff675d47 100644
--- a/tests/e2e/userProfileSecurity.spec.ts
+++ b/tests/e2e/userProfileSecurity.spec.ts
@@ -11,17 +11,46 @@ async function openUserSecurity(page) {
   return securityCard;
 }
 
+async function expectLogoutButtonStyling(page, button) {
+  await expect(button).toHaveClass(/is-danger/);
+  await expect(button).toHaveClass(/is-outlined/);
+
+  const viewportWidth = page.viewportSize()?.width ?? Number.MAX_SAFE_INTEGER;
+  if (viewportWidth <= 768) {
+    const dimensions = await button.evaluate((element) => {
+      const rect = element.getBoundingClientRect();
+      const parentRect = element.parentElement?.getBoundingClientRect();
+      return {
+        width: rect.width,
+        parentWidth: parentRect?.width ?? rect.width,
+      };
+    });
+
+    expect(Math.abs(dimensions.parentWidth - dimensions.width)).toBeLessThanOrEqual(2);
+  }
+}
+
 test("[PROFILE][User][Security] renders the current security surface", async ({ page }) => {
   await openUserSecurity(page);
 
   await expect(page.getByTestId("user-profile-security-edit-email")).toBeVisible();
   await expect(page.getByTestId("user-profile-security-edit-phone")).toBeVisible();
   await expect(page.getByTestId("user-profile-security-change-password")).toBeVisible();
+  const logoutButton = page.getByTestId("user-profile-security-logout");
+  await expect(logoutButton).toBeVisible();
+  await expectLogoutButtonStyling(page, logoutButton);
   await expect(page.getByTestId("user-profile-passkeys").getByTestId("passkey-add")).toBeVisible();
   await expect(page.getByTestId("user-profile-two-factor").getByTestId("two-factor-status")).toBeVisible();
   await expect(page.getByTestId("subuser-profile-security-logout")).toHaveCount(0);
 });
 
+test("[PROFILE][User][Security] opens the logout confirmation dialog", async ({ page }) => {
+  await openUserSecurity(page);
+
+  await page.getByTestId("user-profile-security-logout").click();
+  await expect(page.locator(".swal2-popup")).toBeVisible();
+});
+
 test("[PROFILE][User][Security] opens the email password-confirmation dialog", async ({ page }) => {
   await openUserSecurity(page);
 
diff --git a/tests/unit/navigation-menu-items-user-subusers.spec.js b/tests/unit/navigation-menu-items-user-subusers.spec.js
new file mode 100644
index 00000000..92d78c9b
--- /dev/null
+++ b/tests/unit/navigation-menu-items-user-subusers.spec.js
@@ -0,0 +1,25 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const root = process.cwd();
+const navigationSource = readFileSync(
+  join(root, "src/components/models/navigation/items/NavigationMenuItemsUser.vue"),
+  "utf8"
+).replace(/\r\n/g, "\n");
+const subusersViewSource = readFileSync(
+  join(root, "src/views/dashboards/superUserDashboard/Subusers.vue"),
+  "utf8"
+).replace(/\r\n/g, "\n");
+
+describe("Subusers navigation contract", () => {
+  it("points the chauffører menu item to the subusers page", () => {
+    expect(navigationSource).toContain("to: `/user/subusers`");
+    expect(navigationSource).not.toContain("to: `/user/subusers/grants`");
+  });
+
+  it("gates the subusers page for user sessions or subusers with SUBUSERS_LIST", () => {
+    expect(subusersViewSource).toContain('SessionUser.canAccessUser() || SessionUser.hasPermission("SUBUSERS_LIST")');
+    expect(subusersViewSource).not.toContain("SessionUser.canAccessSuperUser()");
+  });
+});
diff --git a/tests/unit/subuser-grant-permission-nodes.spec.js b/tests/unit/subuser-grant-permission-nodes.spec.js
new file mode 100644
index 00000000..bf3f2d7a
--- /dev/null
+++ b/tests/unit/subuser-grant-permission-nodes.spec.js
@@ -0,0 +1,71 @@
+// @vitest-environment jsdom
+import { mount } from "@vue/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import SubuserGrantPermissionNodes from "@/components/displays/selectors/SubuserGrantPermissionNodes.vue";
+
+const getPermissionNodesMock = vi.hoisted(() =>
+  vi.fn(async () => [
+    {
+      group: "Bookings",
+      description: "Booking permissions",
+      nodes: [
+        {
+          key: "BOOKINGS_LIST",
+          name: "List bookings",
+          description: "Can view bookings",
+          type: "LIST",
+          default: false,
+        },
+      ],
+    },
+  ])
+);
+
+const savePermissionsMock = vi.hoisted(() => vi.fn());
+
+vi.mock("@/components/session/token/SessionUser.vue", () => ({
+  SessionUser: {
+    objects: {
+      subuser_grants: {
+        functions: {
+          getPermissionNodes: getPermissionNodesMock,
+        },
+        set: {
+          permissions: savePermissionsMock,
+        },
+      },
+    },
+  },
+}));
+
+const flushMicrotasks = async () => {
+  await Promise.resolve();
+  await Promise.resolve();
+};
+
+describe("SubuserGrantPermissionNodes", () => {
+  it("keeps permission changes local and emits the draft instead of auto-saving", async () => {
+    const wrapper = mount(SubuserGrantPermissionNodes, {
+      props: {
+        grant: {
+          id: 91,
+          name: "Demo driver",
+          permissions: ["BOOKINGS_LIST"],
+        },
+        permissions: ["BOOKINGS_LIST"],
+      },
+    });
+
+    await flushMicrotasks();
+
+    expect(getPermissionNodesMock).toHaveBeenCalledTimes(1);
+
+    const checkbox = wrapper.get('input[type="checkbox"]');
+    await checkbox.setValue(false);
+    await flushMicrotasks();
+
+    const emitted = wrapper.emitted("update:permissions") || [];
+    expect(emitted.at(-1)?.[0]).toEqual([]);
+    expect(savePermissionsMock).not.toHaveBeenCalled();
+  });
+});
diff --git a/tests/unit/user-booking-date-time-selector.spec.js b/tests/unit/user-booking-date-time-selector.spec.js
new file mode 100644
index 00000000..a0cd7d4e
--- /dev/null
+++ b/tests/unit/user-booking-date-time-selector.spec.js
@@ -0,0 +1,139 @@
+// @vitest-environment jsdom
+import { computed, defineComponent, ref } from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { mountWithApp } from "./helpers/mountWithApp.js";
+
+import UserBookingDateTimeSelector from "@/views/dashboards/userDashboard/bookings/displays/elements/UserBookingDateTimeSelector.vue";
+
+const messages = {
+  en: {
+    common: {
+      during_the_day: "During the day",
+      select: "Select",
+      approx: "Approx.",
+      cancel: "Cancel",
+    },
+    user_dashboard: {
+      bookings: {
+        book: {
+          expected_date_time: "Expected date and time",
+        },
+      },
+    },
+  },
+};
+
+const createDate = (year, month, day, hours = 0, minutes = 0) =>
+  new Date(year, month - 1, day, hours, minutes, 0, 0);
+
+const serializeLocalDateTime = (value) =>
+  [
+    value.getFullYear(),
+    String(value.getMonth() + 1).padStart(2, "0"),
+    String(value.getDate()).padStart(2, "0"),
+  ].join("-") +
+  " " +
+  [
+    String(value.getHours()).padStart(2, "0"),
+    String(value.getMinutes()).padStart(2, "0"),
+  ].join(":");
+
+describe("UserBookingDateTimeSelector", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(createDate(2026, 4, 14, 9, 0));
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("opens with the current prefilled during-the-day selection", () => {
+    const wrapper = mountWithApp(UserBookingDateTimeSelector, {
+      props: {
+        dateTime: createDate(2026, 4, 14),
+        open: true,
+        variant: "desktop",
+      },
+      messages,
+    });
+
+    expect(wrapper.get('[data-testid="booking-date-time-day-2026-04-14"]').classes()).toContain("is-selected");
+    expect(wrapper.get('[data-testid="booking-date-time-slot-00-00"]').classes()).toContain("is-selected");
+    expect(wrapper.get('[data-testid="booking-date-time-confirm"]').text()).toContain("During the day");
+  });
+
+  it("keeps draft changes local until the user confirms a concrete time", async () => {
+    const wrapper = mountWithApp(UserBookingDateTimeSelector, {
+      props: {
+        dateTime: createDate(2026, 4, 14),
+        open: true,
+        variant: "desktop",
+      },
+      messages,
+    });
+
+    await wrapper.get('[data-testid="booking-date-time-day-2026-04-16"]').trigger("click");
+    await wrapper.get('[data-testid="booking-date-time-slot-10-00"]').trigger("click");
+
+    expect(wrapper.emitted("confirm")).toBeUndefined();
+    expect(wrapper.get('[data-testid="booking-date-time-confirm"]').text()).toContain("10:00");
+
+    await wrapper.get('[data-testid="booking-date-time-confirm"]').trigger("click");
+
+    const emittedValue = wrapper.emitted("confirm")?.at(0)?.[0];
+    expect(emittedValue).toBeInstanceOf(Date);
+    expect(serializeLocalDateTime(emittedValue)).toBe("2026-04-16 10:00");
+  });
+
+  it("closes on cancel without mutating the committed parent value", async () => {
+    const Host = defineComponent({
+      components: {
+        UserBookingDateTimeSelector,
+      },
+      setup() {
+        const currentDate = ref(createDate(2026, 4, 14));
+        const open = ref(true);
+        const committedValue = computed(() => serializeLocalDateTime(currentDate.value));
+
+        const handleConfirm = (value) => {
+          currentDate.value = value;
+          open.value = false;
+        };
+
+        const handleClose = () => {
+          open.value = false;
+        };
+
+        return {
+          committedValue,
+          currentDate,
+          open,
+          handleConfirm,
+          handleClose,
+        };
+      },
+      template: `
+        <div>
+          <div data-testid="committed-value">{{ committedValue }}</div>
+          <UserBookingDateTimeSelector
+            :dateTime="currentDate"
+            :open="open"
+            variant="mobile"
+            @confirm="handleConfirm"
+            @close="handleClose"
+          />
+        </div>
+      `,
+    });
+
+    const wrapper = mountWithApp(Host, { messages });
+
+    await wrapper.get('[data-testid="booking-date-time-day-2026-04-18"]').trigger("click");
+    await wrapper.get('[data-testid="booking-date-time-slot-14-00"]').trigger("click");
+    await wrapper.get('[data-testid="booking-date-time-cancel"]').trigger("click");
+
+    expect(wrapper.get('[data-testid="committed-value"]').text()).toBe("2026-04-14 00:00");
+    expect(wrapper.find('[data-testid="booking-date-time-selector-mobile"]').exists()).toBe(false);
+  });
+});