Fix Android launcher icon assets

Regenerate Android launcher icons from the blue striped source asset.
Add a repeatable generator and README documentation for the icon workflow.

.github/workflows/tests.yml

@@ -4,7 +4,9 @@ on:
   pull_request:
   push:
     branches:
+      - main
       - master
+      - dev
   workflow_dispatch:
     inputs:
       mode:

README.md

@@ -154,6 +154,35 @@ Artifacts and summaries:
 - `output/playwright/test-lists/<project>-<role>.txt`
 - `output/playwright/test-lists/<role>-<project>.txt` (legacy compatibility copy)
 
+## Android App Icon
+
+The Play Store Android package is built from the Capacitor project in `android/`.
+The legacy Bubblewrap/TWA project at the repository root is not used by
+`npm run mobile:android:bundle`.
+
+The source image for the native launcher icon is:
+
+```text
+public/favicons/web-app-manifest-512x512.png
+```
+
+Regenerate the checked-in launcher assets after changing that source image:
+
+```sh
+npm run mobile:android:icons
+```
+
+Check that the generated Android launcher assets are current:
+
+```sh
+npm run mobile:android:icons:check
+```
+
+`npm run mobile:android:sync` runs the icon generator before building and syncing
+the Capacitor Android project. The generator updates `android/app/src/main/res`
+launcher assets, `public/icons/icon-192x192.png`, `public/icons/icon-512x512.png`,
+and `store_icon.png`.
+
 ## Bubblewrap (TWA) Build and Install
 
 To build and install the Trusted Web Activity (TWA) using Bubblewrap, use the following commands:

android/app/src/main/res/values/ic_launcher_background.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="ic_launcher_background">#FFFFFF</color>
-</resources>
+    <color name="ic_launcher_background">#0787BB</color>
+</resources>

package-lock.json

@@ -79,6 +79,7 @@
         "eslint-plugin-vue": "^10.9.2",
         "globals": "^17.6.0",
         "husky": "^9.1.7",
+        "jimp": "0.22.12",
         "jsdom": "^29.0.0",
         "otpauth": "^9.5.0",
         "prettier": "2.8.8",

package.json

@@ -55,7 +55,9 @@
     "twa:build": "bubblewrap build",
     "twa:update": "bubblewrap update",
     "mobile:sync": "npm run build && npx cap sync",
-    "mobile:android:sync": "npm run build && npx cap sync android",
+    "mobile:android:icons": "node scripts/mobile/generate-android-icons.mjs",
+    "mobile:android:icons:check": "node scripts/mobile/generate-android-icons.mjs --check",
+    "mobile:android:sync": "npm run mobile:android:icons && npm run build && npx cap sync android",
     "mobile:permissions:check": "node scripts/mobile/check-permissions.mjs",
     "mobile:android:signing:check": "node scripts/mobile/check-android-signing-env.mjs",
     "mobile:android:bundle": "npm run mobile:android:signing:check && npm run mobile:android:sync && npm run mobile:permissions:check && cd android && ./gradlew bundleRelease",
@@ -135,6 +137,7 @@
     "eslint-plugin-vue": "^10.9.2",
     "globals": "^17.6.0",
     "husky": "^9.1.7",
+    "jimp": "0.22.12",
     "jsdom": "^29.0.0",
     "otpauth": "^9.5.0",
     "prettier": "2.8.8",

scripts/i18n-v2-word-dedupe.mjs

@@ -275,7 +275,24 @@ const transformLocale = (locale, originalMessages) => {
       (entry) => normalizeToken(entry.value) === normalized
     );
     if (existingWordEntry) {
-      tokenToWord.set(normalized, { path: `words.${existingWordEntry.key}`, value: existingWordEntry.value });
+      const word = {
+        path: `words.${existingWordEntry.key}`,
+        value: existingWordEntry.value,
+        variants: new Map(),
+      };
+
+      const casings = [...stat.casings.keys()].sort(compareStringValues);
+      for (const casing of casings) {
+        if (modifierForToken(casing, word) !== null) {
+          continue;
+        }
+
+        const variantKey = slugify(`${normalized}_${casing}`, usedKeys);
+        generatedWords[variantKey] = casing;
+        word.variants.set(casing, { path: `words.generated.${variantKey}`, value: casing });
+      }
+
+      tokenToWord.set(normalized, word);
       continue;
     }
 

scripts/mobile/generate-android-icons.mjs

@@ -0,0 +1,133 @@
+#!/usr/bin/env node
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import Jimp from "jimp";
+
+const projectRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "../..");
+const sourcePath = path.join(projectRoot, "public/favicons/web-app-manifest-512x512.png");
+const checkOnly = process.argv.includes("--check");
+const launcherBackground = "#0787BB";
+
+const densityScale = {
+  mdpi: 1,
+  hdpi: 1.5,
+  xhdpi: 2,
+  xxhdpi: 3,
+  xxxhdpi: 4,
+};
+
+const targets = [
+  { relativePath: "public/icons/icon-512x512.png", size: 512, copySource: true },
+  { relativePath: "public/icons/icon-192x192.png", size: 192 },
+  { relativePath: "store_icon.png", size: 512, copySource: true },
+];
+
+for (const [density, scale] of Object.entries(densityScale)) {
+  const legacySize = Math.round(48 * scale);
+  const foregroundSize = Math.round(108 * scale);
+  targets.push(
+    {
+      relativePath: `android/app/src/main/res/mipmap-${density}/ic_launcher.png`,
+      size: legacySize,
+    },
+    {
+      relativePath: `android/app/src/main/res/mipmap-${density}/ic_launcher_round.png`,
+      size: legacySize,
+    },
+    {
+      relativePath: `android/app/src/main/res/mipmap-${density}/ic_launcher_foreground.png`,
+      size: foregroundSize,
+    },
+  );
+}
+
+const xmlTargets = [
+  {
+    relativePath: "android/app/src/main/res/values/ic_launcher_background.xml",
+    content: `<?xml version="1.0" encoding="utf-8"?>\n<resources>\n    <color name="ic_launcher_background">${launcherBackground}</color>\n</resources>\n`,
+  },
+];
+
+function targetPath(relativePath) {
+  return path.join(projectRoot, relativePath);
+}
+
+async function readIfExists(filePath) {
+  try {
+    return await fs.readFile(filePath);
+  } catch (error) {
+    if (error.code === "ENOENT") {
+      return null;
+    }
+    throw error;
+  }
+}
+
+async function writeIfChanged(relativePath, content) {
+  const filePath = targetPath(relativePath);
+  const current = await readIfExists(filePath);
+
+  if (current?.equals(content)) {
+    return false;
+  }
+
+  if (checkOnly) {
+    return true;
+  }
+
+  await fs.mkdir(path.dirname(filePath), { recursive: true });
+  await fs.writeFile(filePath, content);
+  return true;
+}
+
+async function renderPng(sourceImage, size) {
+  const image = sourceImage.clone().resize(size, size, Jimp.RESIZE_BICUBIC);
+  return image.getBufferAsync(Jimp.MIME_PNG);
+}
+
+async function main() {
+  const sourceBuffer = await fs.readFile(sourcePath);
+  const sourceImage = await Jimp.read(sourceBuffer);
+
+  if (sourceImage.bitmap.width !== 512 || sourceImage.bitmap.height !== 512) {
+    throw new Error(`Expected ${path.relative(projectRoot, sourcePath)} to be a 512x512 PNG.`);
+  }
+
+  const changed = [];
+
+  for (const target of targets) {
+    const buffer = target.copySource ? sourceBuffer : await renderPng(sourceImage, target.size);
+    if (await writeIfChanged(target.relativePath, buffer)) {
+      changed.push(target.relativePath);
+    }
+  }
+
+  for (const target of xmlTargets) {
+    if (await writeIfChanged(target.relativePath, Buffer.from(target.content))) {
+      changed.push(target.relativePath);
+    }
+  }
+
+  if (changed.length === 0) {
+    console.log(`Android icon assets are current (${targets.length + xmlTargets.length} files).`);
+    return;
+  }
+
+  if (checkOnly) {
+    console.error("Android icon assets are out of date:");
+    for (const relativePath of changed) {
+      console.error(`- ${relativePath}`);
+    }
+    console.error("Run `npm run mobile:android:icons`.");
+    process.exitCode = 1;
+    return;
+  }
+
+  console.log(`Updated ${changed.length} Android icon asset${changed.length === 1 ? "" : "s"}.`);
+}
+
+main().catch((error) => {
+  console.error(error.message);
+  process.exitCode = 1;
+});

scripts/playwright-pr-mapping.mjs

@@ -30,14 +30,29 @@ export const sourceMappings = [
   },
   {
     name: "limited-backoffice",
-    patterns: [/^src\/views\/backoffice\//u, /^src\/services\/limitedBackoffice\.js$/u],
+    patterns: [
+      /^src\/views\/backoffice\//u,
+      /^src\/services\/limitedBackoffice\.js$/u,
+      /^src\/services\/departmentCustomerPricing\.js$/u,
+      /^src\/components\/displays\/department\/pricing\/DepartmentCustomerPricingEditor\.vue$/u,
+    ],
     specs: ["tests/e2e/limited-backoffice.spec.ts"],
     projects: chromiumProjects,
   },
+  {
+    name: "superuser-department-employees",
+    patterns: [
+      /^src\/views\/dashboards\/superUserDashboard\/department\/DepartmentEmployees\.vue$/u,
+      /^src\/views\/backoffice\/components\/LimitedBackofficeEmployeesManager\.vue$/u,
+    ],
+    specs: ["tests/e2e/superuser-department-employees.spec.ts"],
+    projects: ["chromium-desktop"],
+  },
   {
     name: "superuser-roles-permissions",
     patterns: [
       /^src\/views\/dashboards\/superUserDashboard\/roles\/SuperUserRolesPermissions\.vue$/u,
+      /^src\/views\/dashboards\/superUserDashboard\/roles\/RolePermissionManager\.vue$/u,
       /^src\/views\/dashboards\/superUserDashboard\/roles\/rolePermissionCatalog\.js$/u,
     ],
     specs: ["tests/e2e/superuser-roles-permissions.spec.ts"],
@@ -65,7 +80,7 @@ export const sourceMappings = [
       /^src\/views\/dashboards\/superUserDashboard\/department\/Department\.vue$/u,
       /^src\/views\/dashboards\/superUserDashboard\/department\/SuperUserDashboardDepartmentNavigation\.vue$/u,
     ],
-    specs: ["tests/e2e/superuser-department-overview.spec.js"],
+    specs: ["tests/e2e/superuser-department-overview.spec.js", "tests/e2e/superuser-department-employees.spec.ts"],
     projects: chromiumProjects,
   },
   {
@@ -167,12 +182,29 @@ export const sourceMappings = [
   {
     name: "superuser-department-pricing",
     patterns: [
-      /^src\/views\/dashboards\/superUserDashboard\/department\/(?:DepartmentPricing|SuperUserSelectedDepartmentObject)\.vue$/u,
+      /^src\/views\/dashboards\/superUserDashboard\/department\/(?:DepartmentPricing|DepartmentCustomerPricing|SuperUserSelectedDepartmentObject|SuperUserDashboardDepartmentNavigation)\.vue$/u,
+      /^src\/components\/displays\/department\/pricing\/DepartmentCustomerPricingEditor\.vue$/u,
+      /^src\/services\/departmentCustomerPricing\.js$/u,
       /^src\/components\/session\/token\/SessionUser\/Objects\/Departments\.vue$/u,
     ],
     specs: ["tests/e2e/superuser-department-pricing-custom-only.spec.ts"],
     projects: ["chromium-desktop"],
   },
+  {
+    name: "superuser-department-shells",
+    patterns: [
+      /^src\/views\/dashboards\/superUserDashboard\/department\/DepartmentCategories\.vue$/u,
+      /^src\/views\/dashboards\/superUserDashboard\/department\/DepartmentGatewaysWorkspacePage\.vue$/u,
+      /^src\/views\/dashboards\/superUserDashboard\/department\/DepartmentProfile\.vue$/u,
+      /^src\/views\/dashboards\/superUserDashboard\/department\/modules\/DepartmentModulesSetup\.vue$/u,
+      /^src\/views\/dashboards\/superUserDashboard\/department\/modules\/SuperUserDashboardDepartmentModulesNavigation\.vue$/u,
+      /^src\/views\/dashboards\/superUserDashboard\/department\/stripe\/DepartmentStripeSetup\.vue$/u,
+      /^src\/views\/dashboards\/superUserDashboard\/department\/stripe\/DepartmentStripeTerminalsReaders\.vue$/u,
+      /^src\/views\/dashboards\/superUserDashboard\/department\/stripe\/SuperUserDashboardDepartmentStripeNavigation\.vue$/u,
+    ],
+    specs: ["tests/e2e/superuser-department-shells.spec.js"],
+    projects: chromiumProjects,
+  },
   {
     name: "self-serve",
     patterns: [/self[-/]?serve/iu, /selfserve/iu, /wash\/MyWash/iu],

scripts/run-playwright-full-slice.mjs

@@ -20,6 +20,7 @@ export const ownedFilesByRole = {
     "auth.smoke.spec.js",
     "booking-selfserve.smoke.spec.js",
     "connectivityIssue.spec.ts",
+    "date-period-selector.smoke.spec.js",
     "example.spec.ts",
     "guest-book-wash-mobile.spec.ts",
     "i18n-v2-integrity.spec.ts",
@@ -101,12 +102,15 @@ export const ownedFilesByRole = {
     "superuser-customer-complaints.spec.ts",
     "superuser-customers-mass-import.spec.ts",
     "superuser-department-branding.spec.js",
+    "superuser-department-shells.spec.js",
     "superuser-department-overview.spec.js",
+    "superuser-department-employees.spec.ts",
     "superuser-department-gates.spec.ts",
     "superuser-department-lanes.spec.ts",
     "superuser-department-pricing-custom-only.spec.ts",
     "superuser-departments-archive.spec.ts",
     "superuser-drafts.spec.ts",
+    "superuser-orders-date-filters.spec.ts",
     "superuser-products-layout.spec.ts",
     "superuser-roles-permissions.spec.ts",
     "superuser-system-status.smoke.spec.js",

src/assets/main.css

@@ -48,7 +48,24 @@ textarea.has-sharp-edges {
   --bulma-box-shadow: none !important;
   --bulma-card-shadow: none !important;
 
-  --bulma-skeleton-background: hsla(197 100% 35% / 0.70) !important;
+  --bulma-skeleton-background: hsla(197 100% 35% / 0.7) !important;
+  --pleno-compact-table-header-font-size: 0.72rem;
+  --pleno-compact-table-header-line-height: 1;
+}
+
+body:not(.pleno-large-table-headers) .table thead th {
+  font-size: var(--pleno-compact-table-header-font-size);
+  line-height: var(--pleno-compact-table-header-line-height);
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.pleno-table-header-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.15rem;
+  max-width: 100%;
+  vertical-align: middle;
 }
 
 /*:root {*/
@@ -104,16 +121,16 @@ textarea.has-sharp-edges {
   margin-top: 30px !important;
 }
 
-.cell .card-content .field{
+.cell .card-content .field {
   width: 100%;
 }
 
-.cell .card-content .field .label{
+.cell .card-content .field .label {
   font-weight: 800;
 }
 
 @media screen and (max-width: 768px) {
-  .mb-8-mobile{
+  .mb-8-mobile {
     margin-bottom: 8px !important;
   }
 }
@@ -125,4 +142,4 @@ textarea.has-sharp-edges {
   .mt-30-tablet {
     margin-top: 30px !important;
   }
-}
+}

src/components/displays/FormDisplay.vue

@@ -1,12 +1,11 @@
 <script setup>
-import { onMounted, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import {SessionUser} from "@/components/session/token/SessionUser.vue";
 import {clearErrors, hasError, parseError} from "@/components/request/HandleGlobalError.vue";
 import ShowErrorField from "@/components/global/ShowErrorField.vue";
-import bulmaCalendar from "bulma-calendar";
-import 'bulma-calendar/src/scss/index.scss';
 import Swal from "sweetalert2";
 import {IS_DEV} from "@/config.js";
+import BuefyDateField from "@/components/forms/BuefyDateField.vue";
 
 const props = defineProps({
   form_identifier: {
@@ -106,28 +105,6 @@ SessionUser.auth.reCAPTCHA.preCheck.get().then((response) => {
   }
 });
 
-// Initialize the calendar
-const createCalendar = (element, field) => {
-  const calendar = bulmaCalendar.attach(element, {
-    startDate: new Date(),
-    dateFormat: 'yyyy-MM-dd',
-  });
-}
-
-
-// Load all date fields
-const renderCalendars = () => {
-  console.log('renderCalendars');
-  // Get all date fields
-  const dateFields = document.querySelectorAll('.date-calendar-input');
-  // Loop through the date fields
-  dateFields.forEach((field) => {
-    console.log(field);
-    // Create the calendar
-    createCalendar(field);
-  });
-}
-
 const isUserAdmin = ref(false);
 const randomElementId = Math.random().toString(36).substring(7)
 const fieldErrors = ref([]);
@@ -519,10 +496,6 @@ SessionUser.objects.forms.get.single(props.form_identifier).then((response) => {
   }
   fields.value = fields_tmp;
   setDefaultValues();
-  // Wait one tick before rendering the calendars
-  setTimeout(() => {
-    renderCalendars();
-  }, 0);
 
 }).catch((error) => {
   console.error(error);
@@ -696,17 +669,16 @@ const debugGetForm = () => {
         </div>
         <!-- Date -->
         <div v-else-if="getValidator(field.validation).type === 'date'">
-          <input
-              class="input is-link"
-              :type="getValidator(field.validation).type"
+          <BuefyDateField
+              v-model="fieldValues[field.id]"
+              value-type="string"
               :required="isFieldRequired(field)"
               :name="field.id"
               :id="field.id"
-              @change="onFieldChange(field, $event.target.value)"
-              v-model="fieldValues[field.id]"
               :disabled="isFieldLocked(field)"
-              v-bind:placeholder="field.metadata.placeholder"
-          >
+              :placeholder="field.metadata.placeholder"
+              @change="(value) => onFieldChange(field, value)"
+          />
         </div>
       </template>
       <!-- If the validator is not defined -->

src/components/displays/Subusers.vue

@@ -19,6 +19,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  userScopedUserId: {
+    type: [String, Number],
+    default: null,
+  },
 });
 const { t } = useI18n();
 
@@ -42,7 +46,7 @@ const paginationKey = computed(() =>
 const onInviteClick = async () => {
   await SessionUser.objects.subusers.functions.showInviteForm(() => {
     paginationVersion.value += 1;
-  }, { superuser: props.superuserPage });
+  }, { superuser: props.superuserPage, userId: props.userScopedUserId });
 };
 </script>
 
@@ -75,6 +79,7 @@ const onInviteClick = async () => {
       :key="paginationKey"
       :endpoint="endpoint"
       :show-customer="showCustomer"
+      :user-scoped-user-id="userScopedUserId"
       auto-load="true"
     />
   </div>

src/components/displays/Users.vue

@@ -8,7 +8,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div>
+  <div class="superuser-users-index" data-testid="superuser-users-index">
     <PageTitle :title="t('superuser.pages.employees.title')" :subtitle="t('superuser.pages.employees.subtitle')">
       <template #buttons>
         <button class="button is-dark" @click="showCreateUserForm">
@@ -24,5 +24,7 @@ const { t } = useI18n();
 </template>
 
 <style scoped>
-
-</style>
+.superuser-users-index {
+  min-width: 0;
+}
+</style>

src/components/displays/boxes/ProductBox.vue

@@ -6,7 +6,7 @@ import Swal from "sweetalert2";
 import CustomerProductDiscountDisplay
   from "@/components/displays/department/pos/displays/CustomerProductDiscountDisplay.vue";
 import { useI18n } from 'vue-i18n';
-import { isProductRestrictedForCustomer } from "@/features/customer/customerProductRules.js";
+import { getCustomerProductRestriction } from "@/features/customer/customerProductRules.js";
 
 const { t } = useI18n();
 const expandIcon = ref(null);
@@ -80,10 +80,6 @@ const toggleIsSelected = () => {
   }
 };
 
-const hasRestrictAdditionalServices = () => {
-  return customerAttributesSafe.value.some((attribute) => attribute.attribute === 'restrictAdditionalServices');
-};
-
 /**
  * On before add product addon
  * This is used to check if adding a product has any requirements.
@@ -93,6 +89,9 @@ const hasRestrictAdditionalServices = () => {
  * @param onAfterPreCheck
  */
 const onBeforeAddProductAddon = (addon, onAfterPreCheck) => {
+  if (isAddonRestricted(addon)) {
+    return;
+  }
   // Check if the addon already is selected
   if (isAddonSelected(props.id, addon.option_id)) { onAfterPreCheck(); return; }
   let note = null
@@ -123,6 +122,9 @@ const onBeforeAddProductAddon = (addon, onAfterPreCheck) => {
  * @param onAfterPreCheck
  */
 const onBeforeToggleProductAddon = (addon, isAddonCurrentlySelected, onAfterPreCheck) => {
+  if (!isAddonCurrentlySelected && isAddonRestricted(addon)) {
+    return;
+  }
   // Debug:
   console.log(addon, isAddonCurrentlySelected);
   let note = null
@@ -147,18 +149,35 @@ const doesAddonHaveNoteRequirement = (addon) => {
 
 const isAddonRestricted = (addon) => {
   const addonProduct = getAddonProduct(addon);
-  return isProductRestrictedForCustomer({
+  return getCustomerProductRestriction({
     ...addonProduct,
     name: getAddonName(addon) || addonProduct.name,
     category: addonProduct.category ?? addon?.category,
-  }, customerAttributesSafe.value);
+  }, customerAttributesSafe.value, {
+    includeNumericAddonCategory: true,
+    isRelatedAddon: true,
+  }).restricted;
+};
+
+const getAddonRestrictionMessage = (addon) => {
+  const addonProduct = getAddonProduct(addon);
+  const restriction = getCustomerProductRestriction({
+    ...addonProduct,
+    name: getAddonName(addon) || addonProduct.name,
+    category: addonProduct.category ?? addon?.category,
+  }, customerAttributesSafe.value, {
+    includeNumericAddonCategory: true,
+    isRelatedAddon: true,
+  });
+
+  return restriction.messageKey ? t(restriction.messageKey) : "";
 };
 
 const isProductRestricted = () => {
-  return isProductRestrictedForCustomer({
+  return getCustomerProductRestriction({
     ...props.product,
     name: props.name || props.product?.name,
-  }, customerAttributesSafe.value);
+  }, customerAttributesSafe.value).restricted;
 };
 
 const orderByOrderPriority = (addons) => {
@@ -227,20 +246,7 @@ const orderByOrderPriority = (addons) => {
           <div v-if="isSelected" class="column is-12-desktop">
             <!-- Addons -->
             <div class="is-centered mt-3 mb-0 pl-6" v-if="addonsSafe.length > 0">
-              <template v-if="hasRestrictAdditionalServices()">
-                <div class="buttons has-addons is-small is-fullwidth is-flex-wrap-nowrap">
-                <button
-                    class="button is-small is-fullwidth is-danger"
-                    disabled
-                >
-                  <span class="icon is-small">
-                    <i class="fas fa-exclamation-triangle"></i>
-                  </span>
-                  <span>Ekstra ydelser er ikke tilladt</span>
-                </button>
-                </div>
-              </template>
-              <template v-for="addon in orderByOrderPriority(addonsSafe)" :key="addon.id" v-else>
+              <template v-for="addon in orderByOrderPriority(addonsSafe)" :key="addon.id">
                 <template v-if="!isAddonRestricted(addon)">
                   <div
                       class="buttons has-addons is-small is-fullwidth is-flex-wrap-nowrap"
@@ -287,18 +293,21 @@ const orderByOrderPriority = (addons) => {
                   </div>
                 </template>
                 <!-- Addon is restricted -->
-                <template v-else>
-                  <div class="buttons has-addons is-small is-fullwidth is-flex-wrap-nowrap">
-                    <button
-                        class="button is-small is-fullwidth is-danger"
-                        disabled
-                    >
-                      <span class="icon is-small">
-                        <i class="fas fa-exclamation-triangle"></i>
-                      </span>
-                      <span>{{ addon.name }} er ikke tilladt</span>
-                    </button>
-                  </div>
+	                <template v-else>
+                  <div
+                      class="buttons has-addons is-small is-fullwidth is-flex-wrap-nowrap"
+                      :data-testid="`pos-addon-restriction-${getAddonProduct(addon).id ?? addon.option_id ?? addon.id}`"
+                  >
+	                  <button
+                        class="button is-small is-fullwidth is-danger is-light"
+	                        disabled
+	                    >
+	                      <span class="icon is-small">
+	                        <i class="fas fa-exclamation-triangle"></i>
+	                      </span>
+	                      <span>{{ addon.name }} / {{ getAddonRestrictionMessage(addon) }}</span>
+	                    </button>
+	                  </div>
                 </template>
               </template>
             </div>
@@ -349,4 +358,5 @@ const orderByOrderPriority = (addons) => {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 </style>

src/components/displays/buttons/ActionSettingsWheelButton.vue

@@ -93,6 +93,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  directSectionKeys: {
+    type: Array,
+    default: () => [],
+  },
   allowBookingCompletion: {
     type: Boolean,
     default: false,
@@ -2407,6 +2411,15 @@ const standaloneMenuActions = computed(() => {
   return actions;
 });
 
+const directBuiltInMenuSections = computed(() => {
+  if (!props.displayActionsDirectly || !Array.isArray(props.directSectionKeys) || props.directSectionKeys.length === 0) {
+    return flatBuiltInMenuSections.value;
+  }
+
+  const allowedKeys = new Set(props.directSectionKeys.map((key) => String(key)));
+  return flatBuiltInMenuSections.value.filter((section) => allowedKeys.has(String(section.key)));
+});
+
 const desktopFlyoutMenuSections = computed(() => {
   const mergedSections = [];
   const mergedSectionsByLabel = new Map();
@@ -2624,7 +2637,7 @@ const syncDesktopFlyoutPosition = () => {
         </div>
       </template>
       <slot v-if="hasCustomActionsSlot" name="actions"></slot>
-      <template v-for="section in flatBuiltInMenuSections" :key="section.key">
+      <template v-for="section in directBuiltInMenuSections" :key="section.key">
         <ActionSettingsWheelItemLabel :label="section.label" />
         <template v-for="item in section.items" :key="item.key">
           <ActionSettingsWheelToggleItem

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

@@ -0,0 +1,122 @@
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
+import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
+import ActionSettingsWheelItemLabel from "@/components/displays/buttons/ActionSettingsWheelItemLabel.vue";
+import { INVOICE_COLLECTION_BULK_ACTIONS } from "@/components/displays/department/pos/orders/invoiceCollectionBulkActions.js";
+
+const props = defineProps({
+  selectedInvoiceCollectionIds: {
+    type: Array,
+    default: () => [],
+  },
+  totalInvoiceCollectionCount: {
+    type: Number,
+    default: 0,
+  },
+  allSelected: {
+    type: Boolean,
+    default: false,
+  },
+  allExpanded: {
+    type: Boolean,
+    default: false,
+  },
+  invoiceQueueBusy: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["invoiceSelected", "bulkAction", "toggleSelectAll", "toggleExpandAll"]);
+const { t } = useI18n();
+
+const selectedCount = computed(() => props.selectedInvoiceCollectionIds.length);
+const hasSelectableCollections = computed(() => props.totalInvoiceCollectionCount > 0);
+const hasSelectedCollections = computed(() => selectedCount.value > 0);
+const hasMultipleSelectedCollections = computed(() => selectedCount.value > 1);
+const triggerLabel = computed(() =>
+  t("invoicing_period.invoice_collection_actions.menu.label", { count: selectedCount.value })
+);
+const selectAllLabel = computed(() =>
+  props.allSelected
+    ? t("invoicing_period.invoice_collection_actions.menu.unselect_all")
+    : t("invoicing_period.invoice_collection_actions.menu.select_all")
+);
+const expandAllLabel = computed(() =>
+  props.allExpanded
+    ? t("invoicing_period.invoice_collection_actions.menu.collapse_all")
+    : t("invoicing_period.invoice_collection_actions.menu.expand_all")
+);
+
+const emitBulkAction = (action) => emit("bulkAction", action);
+</script>
+
+<template>
+  <div
+    v-if="hasSelectableCollections"
+    class="invoice-collection-selection-action-wheel"
+    data-testid="invoice-collection-selection-action-wheel"
+  >
+    <ActionSettingsWheelButton icon="fas fa-sliders-h" :label="triggerLabel">
+      <template #actions>
+        <ActionSettingsWheelItemLabel
+          :label="t('invoicing_period.invoice_collection_actions.menu.selection_section')"
+          data-testid="invoice-collection-selection-action-wheel-selection-section"
+        />
+        <ActionSettingsWheelItem
+          icon="fas fa-check-double"
+          :label="selectAllLabel"
+          :click-action="() => emit('toggleSelectAll')"
+          test-id="invoice-collection-selection-action-wheel-select-all"
+        />
+        <ActionSettingsWheelItem
+          :icon="allExpanded ? 'fas fa-compress-alt' : 'fas fa-expand-alt'"
+          :label="expandAllLabel"
+          :click-action="() => emit('toggleExpandAll')"
+          test-id="invoice-collection-selection-action-wheel-expand-all"
+        />
+
+        <template v-if="hasSelectedCollections">
+          <ActionSettingsWheelItemLabel
+            :label="t('invoicing_period.invoice_collection_actions.menu.modification_section')"
+            data-testid="invoice-collection-selection-action-wheel-modification-section"
+          />
+          <ActionSettingsWheelItem
+            icon="fas fa-file-invoice-dollar"
+            :label="t('invoicing_period.invoice_collection_actions.actions.queue_economic')"
+            :click-action="() => emit('invoiceSelected')"
+            :disabled="invoiceQueueBusy"
+            test-id="invoice-collection-selection-action-wheel-invoice-selected"
+          />
+          <ActionSettingsWheelItem
+            icon="fas fa-broom"
+            :label="t('invoicing_period.invoice_collection_actions.actions.remove_customer_rule_violations')"
+            :click-action="() => emitBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.CLEAN_CUSTOMER_RULES)"
+            test-id="invoice-collection-selection-action-wheel-clean-rules"
+          />
+          <ActionSettingsWheelItem
+            v-if="hasMultipleSelectedCollections"
+            icon="fas fa-compress-arrows-alt"
+            :label="t('invoicing_period.invoice_collection_actions.actions.merge_collections')"
+            :click-action="() => emitBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.MERGE)"
+            test-id="invoice-collection-selection-action-wheel-merge"
+          />
+          <ActionSettingsWheelItem
+            icon="fas fa-calendar-alt"
+            :label="t('invoicing_period.invoice_collection_actions.actions.split_by_month')"
+            :click-action="() => emitBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.SPLIT_BY_MONTH)"
+            test-id="invoice-collection-selection-action-wheel-split-by-month"
+          />
+          <ActionSettingsWheelItem
+            icon="fas fa-undo"
+            :label="t('invoicing_period.invoice_collection_actions.actions.reset_hidden_item_prices')"
+            :click-action="() => emitBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.RESET_HIDDEN_PRICES)"
+            test-id="invoice-collection-selection-action-wheel-reset-hidden-prices"
+          />
+        </template>
+      </template>
+    </ActionSettingsWheelButton>
+  </div>
+</template>

src/components/displays/department/pos/orders/invoiceCollectionBulkActions.js

@@ -0,0 +1,7 @@
+export const INVOICE_COLLECTION_BULK_ACTIONS = Object.freeze({
+  CLEAN_CUSTOMER_RULES: "remove_customer_rule_violations",
+  MERGE: "merge_collections",
+  SPLIT_BY_MONTH: "split_by_month",
+  RESET_HIDDEN_PRICES: "reset_hidden_item_prices",
+  QUEUE_ECONOMIC: "queue_economic",
+});

src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile2.vue

@@ -38,14 +38,14 @@ import {
   reg_2,
   reg_3,
   department_id,
-  customer_id,
-  getCustomerEmail,
-  customer_name,
-  isAddonRestricted,
-  canBuyAdditionalServices,
-  registerPosStepSaveBarrier,
-  saveOrderMetadataField,
-} from "@/components/shop/POSDepartmentProcess.vue";
+	  customer_id,
+	  getCustomerEmail,
+	  customer_name,
+	  getAddonRestriction,
+	  getProductRestriction,
+	  registerPosStepSaveBarrier,
+	  saveOrderMetadataField,
+	} 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 from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonClearAll.vue";
@@ -343,13 +343,14 @@ const applyPendingBookingFromSelection = async () => {
         effectivePrimaryProduct = firstWash;
       }
     }
-    effectivePrimaryProduct.addons = preparedAddons as any;
-    transactionItems.setPrimaryItem(effectivePrimaryProduct as any);
-    if (transactionItems.primaryItem.value) {
-      transactionItems.primaryItem.value.addons = preparedAddons as any;
-    }
+	    effectivePrimaryProduct.addons = preparedAddons as any;
+	    transactionItems.setPrimaryItem(effectivePrimaryProduct as any);
+	    if (transactionItems.primaryItem.value) {
+	      transactionItems.primaryItem.value.addons = preparedAddons as any;
+	    }
+	    sanitizeRestrictedTransactionItems();
 
-    lastAppliedBookingId.value = booking.id;
+	    lastAppliedBookingId.value = booking.id;
     //console.warn('Applied pending booking to cart (primary + addons):', booking.id, primaryProduct, preparedAddons);
     //console.warn('Current transaction items after applying booking:', transactionItems.primaryItem.value);
     lastFetchedPrimaryItemProduct.value = effectivePrimaryProduct; // Update last fetched primary item
@@ -481,9 +482,116 @@ const layout = {
 };
 const EXTRAORDINARY_CHEMISTRY_PRODUCT_ID = 27;
 const EXTRAORDINARY_CHEMISTRY_PRODUCT_NAME = "Ekstraordinær pr. 10 min inkl. kemi";
+const restrictionWarningMessageKey = ref("");
+
+const showRestrictedItemsRemovedWarning = () => {
+  restrictionWarningMessageKey.value = "pos.restrictions.restricted_items_removed";
+};
+
+const getMobileAddonRestriction = (addon: any) => getAddonRestriction(addon, { isRelatedAddon: true });
+
+const getStandaloneAdditionalItemRestriction = (item: any) =>
+  getProductRestriction(item, {
+    includeNumericAddonCategory: true,
+    isStandaloneAdditionalService: true,
+  });
+
+const isMobileAddonRestricted = (addon: any) => getMobileAddonRestriction(addon).restricted;
+const isStandaloneAdditionalItemRestricted = (item: any) => getStandaloneAdditionalItemRestriction(item).restricted;
+
+const decorateMobileAddonRestriction = (addon: any) => {
+  const restriction = getMobileAddonRestriction(addon);
+  const nextQuantity = restriction.restricted ? 0 : Number(addon?.quantity ?? addon?.product?.quantity ?? 0);
+  const decoratedAddon = {
+    ...addon,
+    quantity: nextQuantity,
+    product: addon?.product
+      ? {
+          ...addon.product,
+          quantity: nextQuantity,
+        }
+      : addon?.product,
+  };
+
+  if (restriction.restricted) {
+    decoratedAddon.restricted = true;
+    decoratedAddon.restrictionRule = restriction.rule;
+    decoratedAddon.restrictionMessageKey = restriction.messageKey;
+  }
+
+  return decoratedAddon;
+};
+
+const sanitizeRestrictedTransactionItems = () => {
+  let removedRestrictedItem = false;
+  const primary = transactionItems.primaryItem.value;
+
+  if (primary && Array.isArray(primary.addons)) {
+    let changedAddons = false;
+    const sanitizedAddons = primary.addons.map((addon: any) => {
+      const restriction = getMobileAddonRestriction(addon);
+      if (!restriction.restricted) {
+        return addon;
+      }
+
+      if (Number(addon?.quantity ?? addon?.product?.quantity ?? 0) > 0) {
+        removedRestrictedItem = true;
+      }
+
+      if (
+        addon?.restricted === true &&
+        addon?.restrictionRule === restriction.rule &&
+        addon?.restrictionMessageKey === restriction.messageKey &&
+        Number(addon?.quantity ?? 0) === 0 &&
+        Number(addon?.product?.quantity ?? 0) === 0
+      ) {
+        return addon;
+      }
+
+      changedAddons = true;
+
+      return {
+        ...addon,
+        restricted: true,
+        restrictionRule: restriction.rule,
+        restrictionMessageKey: restriction.messageKey,
+        quantity: 0,
+        product: addon?.product
+          ? {
+              ...addon.product,
+              quantity: 0,
+            }
+          : addon?.product,
+      };
+    });
+
+    if (changedAddons) {
+      primary.addons = sanitizedAddons;
+    }
+  }
+
+  const allowedAdditionalItems = (transactionItems.additionalItems.value || []).filter((item: any) => {
+    const restricted = isStandaloneAdditionalItemRestricted(item);
+    if (restricted && Number(item?.quantity ?? 0) > 0) {
+      removedRestrictedItem = true;
+    }
+    return !restricted;
+  });
+
+  if (allowedAdditionalItems.length !== (transactionItems.additionalItems.value || []).length) {
+    transactionItems.setAdditionalItems(allowedAdditionalItems);
+  }
+
+  if (removedRestrictedItem) {
+    showRestrictedItemsRemovedWarning();
+  }
+
+  return !removedRestrictedItem;
+};
 
 const onCopyLastOrder = (vehicleIndex: number) => {
   lastOrders.select(vehicleIndex);
+  sanitizeRestrictedTransactionItems();
 };
 
 const openCustomerSelection = () => {
@@ -786,10 +894,11 @@ const buildDesiredOrderItemShapes = () => {
     related_item_id: null,
     price: Number(transactionItems.primaryItem.value.price ?? 0),
     notes: String(transactionItems.primaryItem.value?.notes ?? ""),
+    skip_price_override: transactionItems.primaryItem.value?.skip_price_override === true,
   };
 
   const addonShapes = (transactionItems.primaryItem.value.addons || [])
-    .filter((addon: any) => Number(addon?.quantity ?? 0) > 0)
+    .filter((addon: any) => Number(addon?.quantity ?? 0) > 0 && !isMobileAddonRestricted(addon))
     .map((addon: any) => {
       const addonProduct = addon?.product ?? addon;
       return {
@@ -800,11 +909,12 @@ const buildDesiredOrderItemShapes = () => {
         related_item_id: "__PRIMARY__",
         price: Number(addonProduct?.price ?? addon?.price ?? 0),
         notes: String(addonProduct?.notes ?? addon?.notes ?? ""),
+        skip_price_override: addonProduct?.skip_price_override === true || addon?.skip_price_override === true,
       };
     });
 
   const additionalShapes = (transactionItems.additionalItems.value || [])
-    .filter((item: any) => Number(item?.quantity ?? 0) > 0)
+    .filter((item: any) => Number(item?.quantity ?? 0) > 0 && !isStandaloneAdditionalItemRestricted(item))
     .map((item: any) => ({
       kind: "additional",
       relatedKey: null,
@@ -813,6 +923,7 @@ const buildDesiredOrderItemShapes = () => {
       related_item_id: null,
       price: Number(item?.price ?? 0),
       notes: String(item?.notes ?? ""),
+      skip_price_override: item?.skip_price_override === true,
     }));
 
   return [primaryShape, ...addonShapes, ...additionalShapes];
@@ -864,8 +975,8 @@ const buildCurrentSelectionComparableShapes = () => {
   };
 
   const addonShapes = sortComparableLastWashShapes(
-    (transactionItems.primaryItem.value.addons || [])
-      .filter((addon: any) => Number(addon?.quantity ?? 0) > 0)
+	    (transactionItems.primaryItem.value.addons || [])
+	      .filter((addon: any) => Number(addon?.quantity ?? 0) > 0 && !isMobileAddonRestricted(addon))
       .map((addon: any) => ({
         kind: "addon",
         product_id: Number(addon?.product?.id ?? addon?.id ?? 0),
@@ -874,8 +985,8 @@ const buildCurrentSelectionComparableShapes = () => {
   );
 
   const additionalShapes = sortComparableLastWashShapes(
-    (transactionItems.additionalItems.value || [])
-      .filter((item: any) => Number(item?.quantity ?? 0) > 0)
+	    (transactionItems.additionalItems.value || [])
+	      .filter((item: any) => Number(item?.quantity ?? 0) > 0 && !isStandaloneAdditionalItemRestricted(item))
       .map((item: any) => ({
         kind: "additional",
         product_id: Number(item?.id ?? 0),
@@ -949,8 +1060,10 @@ const syncCurrentTransactionToOrder = async () => {
 
   const desiredShapes = buildDesiredOrderItemShapes();
   const currentShapes = normalizeExistingOrderItemShapes(existingItems);
+  const shouldForceRecreateForRepricing = desiredShapes.some((shape) => shape.skip_price_override === true);
+  const comparableDesiredShapes = desiredShapes.map(({ kind, relatedKey, skip_price_override, ...shape }) => shape);
 
-  if (JSON.stringify(currentShapes) === JSON.stringify(desiredShapes.map(({ kind, relatedKey, ...shape }) => shape))) {
+  if (!shouldForceRecreateForRepricing && JSON.stringify(currentShapes) === JSON.stringify(comparableDesiredShapes)) {
     return true;
   }
 
@@ -962,12 +1075,12 @@ const syncCurrentTransactionToOrder = async () => {
     1,
     null,
     transactionItems.primaryItem.value?.notes || "",
-    transactionItems.primaryItem.value.price
+    transactionItems.primaryItem.value.skip_price_override === true ? null : transactionItems.primaryItem.value.price
   );
   const createdPrimaryItemId = createdPrimaryItemResponse?.data?.data?.id;
 
   const addonPromises = (transactionItems.primaryItem.value.addons || [])
-    .filter((addon: any) => Number(addon?.quantity ?? 0) > 0)
+    .filter((addon: any) => Number(addon?.quantity ?? 0) > 0 && !isMobileAddonRestricted(addon))
     .map((addon: any) => {
       const addonProduct = addon?.product ?? addon;
       return createOrderItem(
@@ -976,14 +1089,23 @@ const syncCurrentTransactionToOrder = async () => {
         Number(addon.quantity),
         createdPrimaryItemId,
         addonProduct?.notes || addon?.notes || "",
-        addonProduct.price ?? addon.price
+        addonProduct?.skip_price_override === true || addon?.skip_price_override === true
+          ? null
+          : addonProduct.price ?? addon.price
       );
     });
 
   const additionalPromises = (transactionItems.additionalItems.value || [])
-    .filter((item: any) => Number(item?.quantity ?? 0) > 0)
+    .filter((item: any) => Number(item?.quantity ?? 0) > 0 && !isStandaloneAdditionalItemRestricted(item))
     .map((item: any) =>
-      createOrderItem(normalizedOrderId, item.id, Number(item.quantity), null, item?.notes || "", item.price)
+      createOrderItem(
+        normalizedOrderId,
+        item.id,
+        Number(item.quantity),
+        null,
+        item?.notes || "",
+        item?.skip_price_override === true ? null : item.price
+      )
     );
 
   await Promise.all([...addonPromises, ...additionalPromises]);
@@ -1022,8 +1144,8 @@ const getSelectedProductsMissingRequiredNotes = () => {
     missingProducts.push(primaryProduct);
   }
 
-  (primaryProduct?.addons || [])
-    .filter((addon: any) => Number(addon?.quantity ?? 0) > 0)
+	  (primaryProduct?.addons || [])
+	    .filter((addon: any) => Number(addon?.quantity ?? 0) > 0 && !isMobileAddonRestricted(addon))
     .forEach((addon: any) => {
       const addonProduct = addon?.product ?? addon;
       if (
@@ -1035,8 +1157,8 @@ const getSelectedProductsMissingRequiredNotes = () => {
       }
     });
 
-  (transactionItems.additionalItems.value || [])
-    .filter((item: any) => Number(item?.quantity ?? 0) > 0)
+	  (transactionItems.additionalItems.value || [])
+	    .filter((item: any) => Number(item?.quantity ?? 0) > 0 && !isStandaloneAdditionalItemRestricted(item))
     .forEach((item: any) => {
       if (productRequiresOrderItemNote(item) && !productHasOrderItemNote(item)) {
         missingProducts.push(item);
@@ -1126,6 +1248,8 @@ const onBeforeComplete = async () => {
     throw new Error("No primary item selected");
   }
 
+  sanitizeRestrictedTransactionItems();
+
   if (!(await ensureRequiredOrderItemNotes())) {
     return false;
   }
@@ -1156,13 +1280,20 @@ const mapAddonsWithQuantity = (sourceAddons = [], previousAddons = []) =>
     const sourceAddonProductId = getAddonProductId(addon);
     const previousAddon = previousAddons.find((a) => getAddonProductId(a) === sourceAddonProductId);
     const nextQuantity = previousAddon?.quantity ?? addon?.quantity ?? addon?.product?.quantity ?? 0;
+    const skipPriceOverride =
+      previousAddon?.skip_price_override === true ||
+      previousAddon?.product?.skip_price_override === true ||
+      addon?.skip_price_override === true ||
+      addon?.product?.skip_price_override === true;
     return {
       ...addon,
       quantity: nextQuantity,
+      skip_price_override: skipPriceOverride,
       product: addon?.product
         ? {
             ...addon.product,
             quantity: nextQuantity,
+            skip_price_override: skipPriceOverride,
           }
         : addon?.product,
     };
@@ -1272,6 +1403,18 @@ watch(
     }
   }
 );
+
+watch(
+  [
+    () => transactionItems.primaryItem.value?.addons,
+    () => transactionItems.additionalItems.value,
+  ],
+  () => {
+    sanitizeRestrictedTransactionItems();
+  },
+  { deep: true }
+);
+
 // Watch for changes in the vehicle 1 reference and update the reference field when it changes
 watch(
   () => vehicles.vehicle_1.value?.reference,
@@ -1282,15 +1425,10 @@ watch(
   }
 );
 
-// Computed property to filter out restricted addons based on customer attributes
+// Computed property to annotate restricted addons based on customer attributes
 const filteredAddons = computed(() => {
   const addons = transactionItems.primaryItem.value?.addons || [];
-  // If additional services are restricted, return empty array
-  if (!canBuyAdditionalServices()) {
-    return [];
-  }
-  // Filter out individually restricted addons
-  return addons.filter((addon: any) => !isAddonRestricted(addon));
+  return addons.map((addon: any) => decorateMobileAddonRestriction(addon));
 });
 </script>
 
@@ -1353,10 +1491,17 @@ const filteredAddons = computed(() => {
           <i class="fa fa-search"></i>
         </span>
       </button>
-      <!-- Registration numbers -->
-      <PosDepartmentStepMobile2RegistrationNumbers :classes="layout.classes" />
-      <!-- Product -->
-      <PosDepartmentStepMobile2Product
+	      <!-- Registration numbers -->
+	      <PosDepartmentStepMobile2RegistrationNumbers :classes="layout.classes" />
+	      <p
+	        v-if="restrictionWarningMessageKey"
+	        class="notification is-warning is-light py-2 px-3 mb-0"
+	        data-testid="pos-mobile-restriction-warning"
+	      >
+	        {{ t(restrictionWarningMessageKey) }}
+	      </p>
+	      <!-- Product -->
+	      <PosDepartmentStepMobile2Product
         v-on:pointerdown="onPrimaryProductPointerDown"
         v-on:pointermove="onPrimaryProductPointerMove"
         v-on:pointerup="onPrimaryProductPointerUp"

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

@@ -1,59 +1,58 @@
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch, onMounted } from "vue";
 import { PosOrder } from "../objects/PosOrder.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
 import { pos } from "../objects/PosDepartmentStepMobileFlow.vue";
-import {PosProduct} from "@/components/displays/department/pos/steps/mobile/objects/PosProduct.vue";
-import PosDepartmentStepMobile2CategoryProduct
-  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2CategoryProduct.vue";
-import PosDepartmentStepMobile2Addons
-  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Addons.vue";
-import {Addon} from "@/components/displays/department/pos/steps/mobile/objects/PosAddon.vue";
-import PosDepartmentStepMobileFixedBottomControl
-  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileFixedBottomControl.vue";
-import PosDepartmentStepMobileButtonNextStep
-  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonNextStep.vue";
-import {
-  transactionItems
-} from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
-import PosDepartmentStep2MobileVehicleSelection
-  from "@/components/displays/department/pos/steps/mobile/views/PosDepartmentStep2MobileVehicleSelection.vue";
-import GenericButton from "@/components/viewport/page/templates/generic/graphics/GenericButton.vue";
-import PosDepartmentStepMobile2FloatingCart
-  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2FloatingCart.vue";
-import { isAddonRestricted, canBuyAdditionalServices, isProductRestricted } from "@/components/shop/POSDepartmentProcess.vue";
+import { PosProduct } from "@/components/displays/department/pos/steps/mobile/objects/PosProduct.vue";
+import PosDepartmentStepMobile2CategoryProduct from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2CategoryProduct.vue";
+import PosDepartmentStepMobile2Addons from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Addons.vue";
+import { Addon } from "@/components/displays/department/pos/steps/mobile/objects/PosAddon.vue";
+import PosDepartmentStepMobileFixedBottomControl from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileFixedBottomControl.vue";
+import PosDepartmentStepMobileButtonNextStep from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonNextStep.vue";
+import { transactionItems } from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
+import PosDepartmentStepMobile2FloatingCart from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2FloatingCart.vue";
+import { customer_id, getProductRestriction, hasAttribute } from "@/components/shop/POSDepartmentProcess.vue";
+import { useI18n } from "vue-i18n";
+import { orderProducts } from "@/components/shop/Products.vue";
+
+const { t } = useI18n();
+const ADDITIONAL_SERVICES_CATEGORY_ID = 8;
+let latestAdditionalSelectionProductsRequestId = 0;
 
 const props = defineProps({
   label: {
     type: String,
     default: "Additional items",
-    required: true
+    required: true,
   },
   subtitle: {
     type: String,
     default: "Click to modify your additional items",
-    required: true
+    required: true,
   },
   defaultChecked: {
     type: Boolean,
-    default: false
+    default: false,
   },
   lastOrder: {
     type: Object as () => PosOrder | null,
     default: null,
-    required: false
+    required: false,
   },
 });
 
-const canSelectAdditionalItems = computed(() => canBuyAdditionalServices());
+const restrictionWarningMessageKey = ref("");
+const additionalSelectionProducts = ref<PosProduct[]>([]);
+const additionalSelectionLoading = ref(false);
+const canSelectAdditionalItems = computed(() => true);
 const checked = ref(props.defaultChecked);
 // Function to generate a summary from the last order
 function generateSummary(order: PosOrder): string {
   if (!order || !order.items || order.items.length === 0) {
     return "Denne ordre har ingen varer.";
   }
-  const itemNames = order.items.map(item => item?.product?.name || "Ukendt vare");
+  const itemNames = order.items.map((item) => item?.product?.name || "Ukendt vare");
   const uniqueItems = Array.from(new Set(itemNames));
   return uniqueItems.length > 1
     ? `${uniqueItems.length} varer: ${uniqueItems.slice(0, 2).join(", ")}${uniqueItems.length > 2 ? " og flere" : ""}`
@@ -67,18 +66,10 @@ const displayLabel = computed(() => {
     : props.label;
 });
 const displaySubtitle = computed(() => {
-  return props.lastOrder
-    ? generateSummary(props.lastOrder)
-    : props.subtitle;
+  return props.lastOrder ? generateSummary(props.lastOrder) : props.subtitle;
 });
 // Emit event on toggle
 function onToggle(isOpen: boolean) {
-  if (isOpen && !canSelectAdditionalItems.value) {
-    checked.value = false;
-    pos.views.additionalItemSelection.value = false;
-    return;
-  }
-
   checked.value = isOpen;
   // Open the additional item selection view if toggled open
   if (isOpen) {
@@ -91,19 +82,22 @@ const exampleProducts = ref<PosProduct[]>([
   {
     id: 1,
     name: "Extra Towel",
-    price: 5.00,
+    price: 5.0,
     description: "A soft extra towel",
     subscription_allowed: false,
   },
   {
     id: 2,
     name: "Premium Soap",
-    price: 3.50,
+    price: 3.5,
     description: "A premium quality soap",
     subscription_allowed: true,
-  }
+  },
 ]);
-const convertProductToAddon = (product: PosProduct, options: {quantity?: number, min?: number, max?: number} = {}): Addon => {
+const convertProductToAddon = (
+  product: PosProduct,
+  options: { quantity?: number; min?: number; max?: number } = {}
+): Addon => {
   //console.warn("Converting product to addon:", product, options);
   return {
     id: product.id,
@@ -113,88 +107,211 @@ const convertProductToAddon = (product: PosProduct, options: {quantity?: number,
     quantity: options.quantity || 0,
     min: options.min || -1,
     max: options.max || -1,
-  }
-}
+  };
+};
 const getAvailableAdditionalItems = () => {
   const tmp = transactionItems.additionalItems.value || [];
   if (!tmp || tmp.length === 0) return [];
-  return <Addon[]>tmp.map(p => convertProductToAddon(p, {
-    quantity: p?.quantity || 0,
-    min: -1,
-    max: -1,
-  }));
-}
+  return <Addon[]>tmp.map((p) =>
+    convertProductToAddon(p, {
+      quantity: p?.quantity || 0,
+      min: -1,
+      max: -1,
+    })
+  );
+};
 const availableAdditionalItems = ref<Addon[]>(getAvailableAdditionalItems());
-const isAdditionalItemRestricted = (product: PosProduct) => {
-  if (!canSelectAdditionalItems.value) {
-    return true;
-  }
-  if (isProductRestricted(product)) {
-    return true;
-  }
-  return isAddonRestricted(convertProductToAddon(product));
-}
-
-watch(canSelectAdditionalItems, (canSelect) => {
-  if (!canSelect) {
-    checked.value = false;
-    pos.views.additionalItemSelection.value = false;
-  }
+const getStandaloneAdditionalServicesRestriction = () => ({
+  restricted: true,
+  rule: "restrictAdditionalServices",
+  messageKey: "pos.restrictions.addons_not_allowed",
 });
 
+const isAdditionalItemRestricted = (product: PosProduct) => {
+  return getAdditionalItemRestriction({ product } as Addon).restricted;
+};
+
+const getAdditionalSelectionRestrictionMessage = (product: PosProduct) => {
+  const restriction = getAdditionalItemRestriction({ product } as Addon);
+  return restriction.messageKey ? t(restriction.messageKey) : "";
+};
+
+const getAdditionalItemRestriction = (addon: Addon) => {
+  if (hasAttribute("restrictAdditionalServices")) {
+    return getStandaloneAdditionalServicesRestriction();
+  }
+
+  return getProductRestriction(addon.product || addon, {
+    includeNumericAddonCategory: true,
+    isStandaloneAdditionalService: true,
+  });
+};
+
+const decorateAdditionalItemAddon = (addon: Addon): Addon => {
+  const restriction = getAdditionalItemRestriction(addon);
+  const nextAddon = {
+    ...addon,
+    quantity: restriction.restricted ? 0 : addon.quantity,
+    product: addon.product
+      ? {
+          ...addon.product,
+          quantity: restriction.restricted ? 0 : addon.product.quantity,
+        }
+      : addon.product,
+  } as Addon;
+
+  if (restriction.restricted) {
+    (nextAddon as any).restricted = true;
+    (nextAddon as any).restrictionRule = restriction.rule;
+    (nextAddon as any).restrictionMessageKey = restriction.messageKey;
+  }
+
+  return nextAddon;
+};
+
+const showRestrictedItemsRemovedWarning = () => {
+  restrictionWarningMessageKey.value = "pos.restrictions.restricted_items_removed";
+};
+
 // Computed property to filter out restricted additional items based on customer attributes
 const filteredAdditionalItems = computed(() => {
-  // If additional services are restricted, return empty array
-  if (!canSelectAdditionalItems.value) {
-    return [];
-  }
-  // Filter out individually restricted addons
-  return availableAdditionalItems.value.filter((addon: Addon) => {
-    if (isAddonRestricted(addon)) {
-      return false;
-    }
-    if (addon.product && isProductRestricted(addon.product)) {
-      return false;
-    }
-    return true;
-  });
+  return availableAdditionalItems.value.map((addon: Addon) => decorateAdditionalItemAddon(addon));
 });
 const onClickAddOtherProduct = () => {
-  if (!canSelectAdditionalItems.value) {
-    pos.views.additionalItemSelection.value = false;
+  pos.views.additionalItemSelection.value = !pos.views.additionalItemSelection.value;
+  if (pos.views.additionalItemSelection.value) {
+    scheduleAdditionalSelectionProductsLoad();
+  }
+};
+
+const loadAdditionalSelectionProducts = async () => {
+  if (additionalSelectionLoading.value) {
     return;
   }
-  pos.views.additionalItemSelection.value = !pos.views.additionalItemSelection.value;
-}
+
+  const requestId = ++latestAdditionalSelectionProductsRequestId;
+  additionalSelectionLoading.value = true;
+
+  try {
+    const parsedCustomerId = customer_id.value ? parseInt(String(customer_id.value), 10) : null;
+    const response = await SessionUser.objects.products.get.all({
+      category: ADDITIONAL_SERVICES_CATEGORY_ID,
+      department_id: SessionUser.functions.getDepartmentIdFromUrl(),
+      ...(parsedCustomerId !== null ? { customer_id: parsedCustomerId } : {}),
+      final_price: true,
+    });
+
+    if (requestId !== latestAdditionalSelectionProductsRequestId) {
+      return;
+    }
+
+    additionalSelectionProducts.value = orderProducts([...(Array.isArray(response) ? response : [])]);
+    pos.transactionItems.updateTransactionPrices();
+  } catch (error) {
+    if (requestId === latestAdditionalSelectionProductsRequestId) {
+      console.warn("Unable to load additional POS products", error);
+    }
+  } finally {
+    if (requestId === latestAdditionalSelectionProductsRequestId) {
+      additionalSelectionLoading.value = false;
+    }
+  }
+};
+
+const scheduleAdditionalSelectionProductsLoad = () => {
+  window.setTimeout(loadAdditionalSelectionProducts, 0);
+};
 
 // Watch for changes in available additional items, to update the pos.transactionItems.additionalItems
-watch(availableAdditionalItems, (newVal) => {
-  newVal.forEach(addon => {
-    if (addon.quantity && addon.quantity > 0 && addon.product) {
-      addon.product.quantity = addon.quantity; // Ensure product has correct quantity
+watch(
+  availableAdditionalItems,
+  (newVal) => {
+    let removedRestrictedItem = false;
+    const selectedProducts = newVal
+      .filter((addon) => {
+        if (getAdditionalItemRestriction(addon).restricted) {
+          if (addon.quantity && addon.quantity > 0) {
+            removedRestrictedItem = true;
+          }
+          return false;
+        }
+
+        return Boolean(addon.quantity && addon.quantity > 0 && addon.product);
+      })
+      .map((addon) => ({
+        ...addon.product!,
+        quantity: addon.quantity,
+      }));
+
+    if (removedRestrictedItem) {
+      showRestrictedItemsRemovedWarning();
     }
-    pos.transactionItems.setAdditionalItems(newVal.filter(a => a.quantity && a.quantity > 0).map(a => a.product!).filter((p): p is PosProduct => !!p) );
-  });
-}, { deep: true });
+
+    const currentItems = pos.transactionItems.additionalItems.value || [];
+    const isSame =
+      currentItems.length === selectedProducts.length &&
+      currentItems.every(
+        (item: PosProduct, index: number) =>
+          Number(item?.id) === Number(selectedProducts[index]?.id) &&
+          Number(item?.quantity ?? 0) === Number(selectedProducts[index]?.quantity ?? 0)
+      );
+
+    if (isSame) {
+      return;
+    }
+
+    pos.transactionItems.setAdditionalItems(
+      selectedProducts.filter((product): product is PosProduct => Boolean(product))
+    );
+  },
+  { deep: true }
+);
 
 // Watch for changes in pos.transactionItems.additionalItems to remove items with quantity 0
-watch(() => pos.transactionItems.additionalItems.value, (newVal) => {
-  if (!newVal) return;
-  if (newVal.length === 0) {
-    availableAdditionalItems.value = [];
-    //
-    return;
+watch(
+  () => pos.transactionItems.additionalItems.value,
+  (newVal) => {
+    if (!newVal) return;
+    if (newVal.length === 0) {
+      if (availableAdditionalItems.value.length === 0) {
+        return;
+      }
+      availableAdditionalItems.value = [];
+      //
+      return;
+    }
+    // Prevent recursive loop by checking if availableAdditionalItems already matches newVal
+    const currentProductIds = availableAdditionalItems.value.map((a) => a.id);
+    const newProductIds = newVal.map((p) => p.id);
+    const isSame =
+      currentProductIds.length === newProductIds.length && currentProductIds.every((id) => newProductIds.includes(id));
+    if (isSame) return;
+    availableAdditionalItems.value = getAvailableAdditionalItems();
+  },
+  { deep: true }
+);
+
+watch(
+  () => pos.views.additionalItemSelection.value,
+  (isOpen) => {
+    if (!isOpen) {
+      additionalSelectionLoading.value = false;
+      return;
+    }
+
+    scheduleAdditionalSelectionProductsLoad();
   }
-  // Prevent recursive loop by checking if availableAdditionalItems already matches newVal
-  const currentProductIds = availableAdditionalItems.value.map(a => a.id);
-  const newProductIds = newVal.map(p => p.id);
-  const isSame = currentProductIds.length === newProductIds.length && currentProductIds.every(id => newProductIds.includes(id));
-  if (isSame) return;
-  availableAdditionalItems.value = getAvailableAdditionalItems();
-}, { deep: true });
+);
+
+onMounted(() => {
+  if (pos.views.additionalItemSelection.value) {
+    scheduleAdditionalSelectionProductsLoad();
+  }
+});
 
 const onClickAddProduct = async (product: PosProduct) => {
   if (isAdditionalItemRestricted(product)) {
+    showRestrictedItemsRemovedWarning();
     return;
   }
   pos.transactionItems.addAdditionalItem(product);
@@ -202,25 +319,48 @@ const onClickAddProduct = async (product: PosProduct) => {
   //if (pos.views.additionalItemSelection.value) {
   //  pos.views.additionalItemSelection.value = false;
   //}
-}
+};
 </script>
 
 <template>
   <div data-testid="pos-mobile-additional-items">
-  <!-- Minimal view, when not set as fullscreen view -->
-    <WhiteBoxCard :toggleable="canSelectAdditionalItems && pos.transactionItems.additionalItems.value && pos.transactionItems.additionalItems.value.length == 0"
-                  :defaultOpen="pos.transactionItems.additionalItems.value && pos.transactionItems.additionalItems.value.length > 0"
-                  @toggle="onToggle"
-                  :forceState="(pos.transactionItems.additionalItems.value && pos.transactionItems.additionalItems.value.length > 0) ? true : (pos.views.additionalItemSelection.value)"
-                  v-if="!pos.views.additionalItemSelection.value">
+    <!-- Minimal view, when not set as fullscreen view -->
+    <WhiteBoxCard
+      :toggleable="
+        canSelectAdditionalItems &&
+        pos.transactionItems.additionalItems.value &&
+        pos.transactionItems.additionalItems.value.length == 0
+      "
+      :defaultOpen="pos.transactionItems.additionalItems.value && pos.transactionItems.additionalItems.value.length > 0"
+      @toggle="onToggle"
+      :forceState="
+        pos.transactionItems.additionalItems.value && pos.transactionItems.additionalItems.value.length > 0
+          ? true
+          : pos.views.additionalItemSelection.value
+      "
+      v-if="!pos.views.additionalItemSelection.value"
+    >
       <!-- Header -->
       <template #header>
         <div class="pos-mobile-additional-items-header" data-testid="pos-mobile-additional-items-open">
-          <div class="card-header-title pos-mobile-additional-items-header__title" data-testid="pos-mobile-additional-items-header-title">{{ displayLabel }}</div>
-          <div class="card-header-icon pos-mobile-additional-items-header__icon" data-testid="pos-mobile-additional-items-header-icon">
+          <div
+            class="card-header-title pos-mobile-additional-items-header__title"
+            data-testid="pos-mobile-additional-items-header-title"
+          >
+            {{ displayLabel }}
+          </div>
+          <div
+            class="card-header-icon pos-mobile-additional-items-header__icon"
+            data-testid="pos-mobile-additional-items-header-icon"
+          >
             <!-- Right arrow, if there's no items, down arrow if there are items -->
             <span class="icon">
-              <i v-if="!pos.transactionItems.additionalItems.value || pos.transactionItems.additionalItems.value.length === 0" class="fas fa-angle-right"></i>
+              <i
+                v-if="
+                  !pos.transactionItems.additionalItems.value || pos.transactionItems.additionalItems.value.length === 0
+                "
+                class="fas fa-angle-right"
+              ></i>
               <i v-else class="fas fa-angle-down"></i>
             </span>
           </div>
@@ -230,6 +370,13 @@ const onClickAddProduct = async (product: PosProduct) => {
       <template #content>
         <!-- Suggested items -->
         <div>
+          <p
+            v-if="restrictionWarningMessageKey"
+            class="notification is-warning is-light py-2 px-3 mb-3"
+            data-testid="pos-mobile-restriction-warning"
+          >
+            {{ t(restrictionWarningMessageKey) }}
+          </p>
           <!-- No items added yet -->
           <div v-if="!availableAdditionalItems || availableAdditionalItems.length === 0">
             <p>{{ SessionUser.objects.global.language.no_additional_items }}</p>
@@ -238,7 +385,7 @@ const onClickAddProduct = async (product: PosProduct) => {
         </div>
       </template>
       <!-- Footer -->
-      <template #footer v-if="canSelectAdditionalItems">
+      <template #footer>
         <!-- Select other product button -->
         <a class="card-footer-item" data-testid="pos-mobile-additional-items-open" @click="onClickAddOtherProduct">
           <span class="icon">
@@ -249,24 +396,54 @@ const onClickAddProduct = async (product: PosProduct) => {
       </template>
     </WhiteBoxCard>
     <!-- Fullscreen view, when selecting other products -->
-    <template v-else-if="canSelectAdditionalItems">
+    <template v-else>
       <div data-testid="pos-mobile-additional-items-selection">
-      <!-- Categories of products -->
-      <PosDepartmentStep2MobileVehicleSelection :onAddProduct="onClickAddProduct" :onSearchClick="() => console.warn('AdditionalItem Search Clicked')"/><!-- :asAddons="true" :addons="availableAdditionalItems" @update:addons="availableAdditionalItems = $event"/>-->
-      <!-- Buttons -->
-      <PosDepartmentStepMobileFixedBottomControl variant="pos-step">
-        <!-- Floating Card -->
-        <PosDepartmentStepMobile2FloatingCart/>
-        <!-- Next button -->
-        <PosDepartmentStepMobileButtonNextStep :isDark="true" :customAction="onClickAddOtherProduct">
-          <span class="pos-mobile-cta-content">
-            <span class="pos-mobile-cta-label has-text-white">{{ SessionUser.objects.global.language.next }}</span>
-            <span class="pos-mobile-cta-value has-text-white">
-              <i class="fas fa-arrow-right"></i>
+        <div class="pos-mobile-additional-items-categories">
+          <button
+            type="button"
+            class="button is-rounded is-small is-dark"
+            :data-testid="`pos-mobile-category-${ADDITIONAL_SERVICES_CATEGORY_ID}`"
+            @click="scheduleAdditionalSelectionProductsLoad"
+          >
+            Extras
+          </button>
+        </div>
+        <div class="pos-mobile-additional-items-products">
+          <div
+            v-if="additionalSelectionLoading"
+            class="pos-mobile-products-loading"
+            data-testid="pos-mobile-products-loading"
+          >
+            <span class="pos-mobile-products-loading__label">{{ SessionUser.objects.global.language.loading }}</span>
+          </div>
+          <template v-else>
+            <PosDepartmentStepMobile2CategoryProduct
+              v-for="product in additionalSelectionProducts"
+              :key="product.id"
+              :price="product.price"
+              :label="product.name"
+              :piktogram="product.piktogram"
+              :testId="`pos-mobile-product-${product.id}`"
+              :disabled="isAdditionalItemRestricted(product)"
+              :restrictionMessage="getAdditionalSelectionRestrictionMessage(product)"
+              @addProduct="onClickAddProduct(product)"
+            />
+          </template>
+        </div>
+        <!-- Buttons -->
+        <PosDepartmentStepMobileFixedBottomControl variant="pos-step">
+          <!-- Floating Card -->
+          <PosDepartmentStepMobile2FloatingCart />
+          <!-- Next button -->
+          <PosDepartmentStepMobileButtonNextStep :isDark="true" :customAction="onClickAddOtherProduct">
+            <span class="pos-mobile-cta-content">
+              <span class="pos-mobile-cta-label has-text-white">{{ SessionUser.objects.global.language.next }}</span>
+              <span class="pos-mobile-cta-value has-text-white">
+                <i class="fas fa-arrow-right"></i>
+              </span>
             </span>
-          </span>
-        </PosDepartmentStepMobileButtonNextStep>
-      </PosDepartmentStepMobileFixedBottomControl>
+          </PosDepartmentStepMobileButtonNextStep>
+        </PosDepartmentStepMobileFixedBottomControl>
       </div>
     </template>
   </div>
@@ -291,4 +468,10 @@ const onClickAddProduct = async (product: PosProduct) => {
   flex: 0 0 auto;
   margin-left: auto;
 }
+
+.pos-mobile-additional-items-categories {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem 0;
+}
 </style>

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

@@ -4,27 +4,30 @@ import Plus from "@/components/viewport/elements/icons/Plus.vue";
 import ControlSelectAmount from "@/components/viewport/elements/controls/ControlSelectAmount.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { Addon } from "../objects/PosAddon.vue";
-import PosDepartmentStepMobile2CategoryProduct
-  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2CategoryProduct.vue";
+import PosDepartmentStepMobile2CategoryProduct from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2CategoryProduct.vue";
+import { useI18n } from "vue-i18n";
+import { transactionItems } from "../objects/PosDepartmentStepMobileFlow.vue";
+
+const { t } = useI18n();
 
 const props = defineProps({
   label: {
     type: String,
     default: "Add-ons",
-    required: true
+    required: true,
   },
   addons: {
     type: Array as () => Addon[],
-    default: () => []
+    default: () => [],
   },
   compact: {
     type: Boolean,
-    default: false
+    default: false,
   },
   showPrices: {
     type: Boolean,
-    default: true
-  }
+    default: true,
+  },
 });
 const emit = defineEmits(["update:addons"]);
 /**
@@ -44,7 +47,7 @@ const emit = defineEmits(["update:addons"]);
 const getLabel = (addon: Addon) => {
   return addon.name;
   //return `${addon.name} / ${SessionUser.functions.currency.toLocal(addon.price)}`;
-}
+};
 
 /**
  * When double-clicking on the product, it will add 1 to the quantity
@@ -52,85 +55,126 @@ const getLabel = (addon: Addon) => {
 const doubleClickTimeout = 500; // milliseconds
 const doubleClickTimers = ref<{ [key: string]: number | null }>({});
 
+const getAddonKey = (addon: Addon) => String(addon.id ?? addon.product?.id ?? "");
+
+const setAddonQuantity = (addon: Addon, quantity: number) => {
+  const nextQuantity = Number(quantity || 0);
+  const nextAddons = props.addons.map((candidate) =>
+    getAddonKey(candidate) === getAddonKey(addon) ? { ...candidate, quantity: nextQuantity } : candidate
+  );
+  const primaryAddons = transactionItems.primaryItem.value?.addons;
+  if (
+    Array.isArray(primaryAddons) &&
+    primaryAddons.some((candidate) => getAddonKey(candidate) === getAddonKey(addon))
+  ) {
+    transactionItems.primaryItem.value!.addons = nextAddons;
+  }
+
+  emit("update:addons", nextAddons);
+};
+
 /**
  * Function to add a product to the add-ons list
  * @param addon
  */
 const onAddProduct = (addon: Addon) => {
+  if (isAddonRestricted(addon)) {
+    setAddonQuantity(addon, 0);
+    return;
+  }
+
+  const addonKey = getAddonKey(addon);
   // Check if the product was just added
-  if (doubleClickTimers.value[addon.id]) {
+  if (doubleClickTimers.value[addonKey]) {
     // Double-click detected, clear the timeout
-    clearTimeout(doubleClickTimers.value[addon.id]);
-    doubleClickTimers.value[addon.id] = null;
+    clearTimeout(doubleClickTimers.value[addonKey]);
+    doubleClickTimers.value[addonKey] = null;
     // Check if the product can have more quantity
     if (addon.quantity >= addon.max && addon.max !== -1) {
       // If the product max is reached, it will not be added.
       return;
     }
-    addon.quantity = addon.quantity + 1;
-    emit('update:addons', [...props.addons])
+    setAddonQuantity(addon, addon.quantity + 1);
     // Set the timeout again to allow for the next double-click
-    doubleClickTimers.value[addon.id] = window.setTimeout(() => {
-      doubleClickTimers.value[addon.id] = null;
+    doubleClickTimers.value[addonKey] = window.setTimeout(() => {
+      doubleClickTimers.value[addonKey] = null;
     }, doubleClickTimeout);
     return;
   }
   // Single-click detected, add the product to the list
   // If the product is already has a quantity, set it to 0
   if (addon.quantity > 0) {
-    addon.quantity = 0;
-    emit('update:addons', [...props.addons])
+    setAddonQuantity(addon, 0);
     return;
   }
-  addon.quantity = (addon.min > 0 ? addon.min : 1);
+  const nextQuantity = addon.min > 0 ? addon.min : 1;
   // Set a timeout to handle double-clicks.
   // If the product max is reached, it will not be added.
-  if (addon.quantity >= addon.max && addon.max !== -1) {
+  if (nextQuantity >= addon.max && addon.max !== -1) {
     // If the product max is reached, it will not be added.
-    emit('update:addons', [...props.addons])
+    setAddonQuantity(addon, nextQuantity);
     return;
   }
-  doubleClickTimers.value[addon.id] = window.setTimeout(() => {
-    doubleClickTimers.value[addon.id] = null;
+  doubleClickTimers.value[addonKey] = window.setTimeout(() => {
+    doubleClickTimers.value[addonKey] = null;
   }, doubleClickTimeout);
-  emit('update:addons', [...props.addons])
-}
+  setAddonQuantity(addon, nextQuantity);
+};
 
 const sortAddonsByProductOrderPriority = (addons: Addon[]) => {
-  return addons.sort((a, b) => {
+  return [...addons].sort((a, b) => {
     const priorityA = a.product.order_priority || 0;
     const priorityB = b.product.order_priority || 0;
     return priorityA - priorityB;
   });
-}
+};
 
+const isAddonRestricted = (addon: Addon) => (addon as any)?.restricted === true;
+
+const getAddonRestrictionMessage = (addon: Addon) => {
+  if (!isAddonRestricted(addon)) {
+    return "";
+  }
+
+  return (addon as any)?.restrictionMessageKey
+    ? t((addon as any).restrictionMessageKey)
+    : t("pos.restrictions.product_not_allowed");
+};
 </script>
 
 <template>
-  <template v-if="addons.length > 0"> <!-- If there are add-ons available -->
+  <template v-if="addons.length > 0">
+    <!-- If there are add-ons available -->
     <p class="custom-label">{{ props.label }}</p>
     <div>
-    <template v-for="addon in sortAddonsByProductOrderPriority(props.addons)" :key="addon.id">
-      <PosDepartmentStepMobile2CategoryProduct
+      <template v-for="addon in sortAddonsByProductOrderPriority(props.addons)" :key="addon.id">
+        <PosDepartmentStepMobile2CategoryProduct
           :compact="props.compact"
           :price="addon.price"
           :label="getLabel(addon)"
           :piktogram="addon.product.piktogram"
           :testId="`pos-mobile-addon-${addon.product.id}`"
           :showPrices="props.showPrices"
+          :disabled="isAddonRestricted(addon)"
+          :restrictionMessage="getAddonRestrictionMessage(addon)"
           @addProduct="onAddProduct(addon)"
-          :customButton="addon.quantity > 0">
-        <span class="custom-select-quantity-container">
+          :customButton="addon.quantity > 0 && !isAddonRestricted(addon)"
+        >
+          <span class="custom-select-quantity-container">
             <ControlSelectAmount
-                :testIdPrefix="`pos-mobile-addon-${addon.product.id}`"
-                @update:quantity="addon.quantity = $event; emit('update:addons', [...props.addons])"
-                v-model:quantity="addon.quantity"
-                :max="addon.max"
-                :min="addon.min"
+              v-if="!isAddonRestricted(addon)"
+              :testIdPrefix="`pos-mobile-addon-${addon.product.id}`"
+              @update:quantity="setAddonQuantity(addon, $event)"
+              :quantity="addon.quantity"
+              :max="addon.max"
+              :min="addon.min"
             />
+            <span v-else class="tag is-danger is-light is-rounded">
+              {{ getAddonRestrictionMessage(addon) }}
+            </span>
           </span>
-      </PosDepartmentStepMobile2CategoryProduct>
-    </template>
+        </PosDepartmentStepMobile2CategoryProduct>
+      </template>
     </div>
   </template>
 </template>
@@ -148,13 +192,11 @@ const sortAddonsByProductOrderPriority = (addons: Addon[]) => {
   width: 100%;
   height: 100%;
 
-
   /* Inside auto layout */
   flex: none;
   order: 1;
   align-self: stretch;
   flex-grow: 0;
-
 }
 .custom-container-entry-container {
   /* Frame 47 */
@@ -171,14 +213,13 @@ const sortAddonsByProductOrderPriority = (addons: Addon[]) => {
   width: 100%;
   height: 32px;
 
-  border-bottom: 1px solid #D9D9D9;
+  border-bottom: 1px solid #d9d9d9;
 
   /* Inside auto layout */
   flex: none;
   order: 0;
   align-self: stretch;
   flex-grow: 0;
-
 }
 .custom-icon-container {
   /* + */
@@ -210,7 +251,7 @@ const sortAddonsByProductOrderPriority = (addons: Addon[]) => {
   height: 19px;
 
   /* rg-tx */
-  font-family: 'Arial';
+  font-family: "Arial";
   font-style: normal;
   font-weight: 400;
   font-size: 19px;
@@ -219,18 +260,16 @@ const sortAddonsByProductOrderPriority = (addons: Addon[]) => {
 
   color: #000000;
 
-
   /* Inside auto layout */
   flex: none;
   order: 2;
   flex-grow: 0;
-
 }
 .custom-icon {
   /* + */
 
   /* Icon color */
-  fill: #FFFFFF;
+  fill: #ffffff;
   width: 100%;
   height: 100%;
 
@@ -240,7 +279,6 @@ const sortAddonsByProductOrderPriority = (addons: Addon[]) => {
   flex: none;
   order: 0;
   flex-grow: 0;
-
 }
 .custom-label {
   /* Add-ons */
@@ -248,7 +286,7 @@ const sortAddonsByProductOrderPriority = (addons: Addon[]) => {
   width: 60px;
   height: 16px;
 
-  font-family: 'Arial';
+  font-family: "Arial";
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
@@ -257,11 +295,9 @@ const sortAddonsByProductOrderPriority = (addons: Addon[]) => {
 
   color: #000000;
 
-
   /* Inside auto layout */
   flex: none;
   order: 0;
   flex-grow: 0;
-
 }
 </style>

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

@@ -3,6 +3,49 @@ import GenericTag from "@/components/viewport/page/templates/generic/graphics/Ge
 import { pos } from "../objects/PosDepartmentStepMobileFlow.vue";
 import {onBeforeMount } from "vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { customer_id } from "@/components/shop/POSDepartmentProcess.vue";
+import { orderProducts } from "@/components/shop/Products.vue";
+
+let latestProductsRequestId = 0;
+
+const fetchCategoryProducts = async (category: {id: number, name: string}, departmentId: number) => {
+  const requestId = ++latestProductsRequestId;
+  pos.productList.setLoading(true);
+  pos.productList.clear();
+
+  try {
+    const response = await SessionUser.objects.products.get.category(
+      category.id,
+      departmentId,
+      customer_id.value ? parseInt(String(customer_id.value)) : null,
+      true
+    );
+
+    if (requestId !== latestProductsRequestId) {
+      return;
+    }
+
+    orderProducts(response).forEach((result: any) => {
+      pos.productList.add(result);
+    });
+    pos.transactionItems.updateTransactionPrices();
+  } catch (error) {
+    if (requestId === latestProductsRequestId) {
+      console.warn("Unable to load POS products", error);
+    }
+  } finally {
+    if (requestId === latestProductsRequestId) {
+      pos.productList.setLoading(false);
+    }
+  }
+};
+
+const selectCategory = (category: {id: number, name: string}) => {
+  const nextCategory = { ...category };
+  pos.categories.select(nextCategory);
+  fetchCategoryProducts(nextCategory, SessionUser.functions.getDepartmentIdFromUrl());
+};
+
 // Function to fetch categories based on the department ID
 const props = defineProps({
   // Optional list of category IDs to restrict the displayed categories to
@@ -44,14 +87,12 @@ const fetchCategories = async (departmentId: number) => {
     // Select the category 6, if it exists, otherwise select the first category
     const category6 = pos.categories.get().find(cat => cat.id === 6);
     if (category6) {
-      pos.productList.setLoading(true);
-      pos.categories.select(category6);
+      selectCategory(category6);
       return;
     }
 
     if (pos.categories.get().length > 0) {
-      pos.productList.setLoading(true);
-      pos.categories.select(pos.categories.get()[0]);
+      selectCategory(pos.categories.get()[0]);
       return;
     }
   } catch (error) {
@@ -82,10 +123,15 @@ onBeforeMount(() => {
       </div>
     </div>
     <div v-else class="columns is-mobile is-multiline is-gapless">
-      <div class="column is-narrow" v-for="category in pos.categories.get()" :key="category.id" :data-testid="`pos-mobile-category-${category.id}`">
+      <div
+        class="column is-narrow"
+        v-for="category in pos.categories.get()"
+        :key="category.id"
+        :data-testid="`pos-mobile-category-${category.id}`"
+        @click="selectCategory(category)"
+      >
         <GenericTag
             :active="pos.categories.isCategorySelected(category)"
-            @click="pos.categories.select(category)"
             class="custom-gap">
           {{ category.name }}
         </GenericTag>

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

@@ -37,12 +37,24 @@ const props = defineProps({
   testId: {
     type: String,
     default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  restrictionMessage: {
+    type: String,
+    default: "",
   }
 });
 
 const emit = defineEmits(["addProduct"]);
 
 const onClick = () => {
+  if (props.disabled) {
+    return;
+  }
+
   emit("addProduct", {
     piktogram: props.piktogram,
     label: props.label,
@@ -69,14 +81,23 @@ const imageStyleCompact = {
 </script>
 
 <template>
-  <div style="border-bottom: 1px solid #E5E5E5; padding: 10px 0;" class="mb-1">
+  <div
+    style="border-bottom: 1px solid #E5E5E5; padding: 10px 0;"
+    class="mb-1"
+    :class="{ 'pos-mobile-category-product--disabled': props.disabled }"
+  >
     <div class="columns is-vcentered is-mobile" :class="props.customButton ? 'has-quantity' : ''">
-      <div class="column is-narrow" @click="onClick" style="cursor: pointer;">
+      <div class="column is-narrow" @click="onClick" :style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }">
         <img :src="getPicture(props.piktogram)" :alt="props.label" class="product-image"
              :style="props.compact ? imageStyleCompact : imageSize"
              style="border-radius: 8px; object-fit: contain;" />
       </div>
-      <div class="column" @click="onClick" style="cursor: pointer;" :data-testid="props.testId || undefined">
+      <div
+        class="column"
+        @click="onClick"
+        :style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"
+        :data-testid="props.testId || undefined"
+      >
         <template v-if="!props.compact">
           <h1 class="title is-6">{{ props.label }}</h1>
           <h2 class="subtitle is-6" v-if="props.showPrices">{{ SessionUser.functions.currency.toLocal(props.price) }}</h2>
@@ -87,6 +108,9 @@ const imageStyleCompact = {
           <h2 class="subtitle is-6" style="font-size: smaller" v-if="props.showPrices">{{ SessionUser.functions.currency.toLocal(props.price) }}</h2>
           <h2 class="subtitle is-6" style="font-size: smaller" v-else>&nbsp;</h2>
         </template>
+        <p v-if="props.disabled && props.restrictionMessage" class="help is-danger mb-0">
+          {{ props.restrictionMessage }}
+        </p>
       </div>
       <div class="column is-narrow">
         <slot name="right"/>
@@ -156,4 +180,13 @@ const imageStyleCompact = {
 .has-quantity .column .subtitle {
   color: rgba(255, 255, 255, 0.6);
 }
+
+.pos-mobile-category-product--disabled {
+  opacity: 0.72;
+}
+
+.pos-mobile-category-product--disabled.has-quantity,
+.pos-mobile-category-product--disabled .has-quantity {
+  background-color: #f5f5f5;
+}
 </style>

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

@@ -7,7 +7,7 @@ const items = computed(() => {
   return [
       pos.transactionItems.primaryItem.value,
       ...pos.transactionItems.additionalItems.value,
-  ]
+  ].filter((item) => item && String(item.name ?? "").trim() !== "")
 });
 const isCollapsed = ref(true);
 const isAddonsVisible = ref(true);
@@ -83,7 +83,7 @@ const itemNames = computed(() => {
         </div>
         <!-- Product addons -->
         <template v-for="addon in item.addons" :key="addon.id" v-if="item.addons && item.addons.length > 0 && isAddonsVisible">
-          <div class="columns is-mobile is-vcentered is-gapless m-0" v-if="addon?.quantity > 0">
+          <div class="columns is-mobile is-vcentered is-gapless m-0" v-if="addon?.quantity > 0 && addon?.restricted !== true">
             <div class="column"><!-- Product addons -->
               <p class="has-text-left"><small>{{addon.quantity}}x {{ addon.name }}</small></p>
             </div>
@@ -101,4 +101,4 @@ const itemNames = computed(() => {
   max-height: 200px; /* Adjust the max height as needed */
   overflow-y: auto; /* Enable vertical scrolling */
 }
-</style>
+</style>

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

@@ -3,16 +3,20 @@ import {watch, ref, computed} from "vue";
 import { pos } from "../objects/PosDepartmentStepMobileFlow.vue";
 import PosDepartmentStepMobile2CategoryProduct
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2CategoryProduct.vue";
-import {PosCategory} from "@/components/displays/department/pos/steps/mobile/objects/PosCategory.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import {PosProduct} from "@/components/displays/department/pos/steps/mobile/objects/PosProduct.vue";
-import { department_id, customer_id, isProductRestricted } from "@/components/shop/POSDepartmentProcess.vue";
+import {
+  getProductRestriction,
+  hasAttribute,
+  isProductRestricted,
+} from "@/components/shop/POSDepartmentProcess.vue";
 import PosDepartmentStepMobile2Addons
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Addons.vue";
 import {Addon} from "@/components/displays/department/pos/steps/mobile/objects/PosAddon.vue";
-import { orderProducts } from "@/components/shop/Products.vue";
+import { useI18n } from "vue-i18n";
 
 const emits = defineEmits(["addProduct"]);
+const { t } = useI18n();
 const props = defineProps({
   // To be able to count the products, providing the "addonList" object, paired with the "asAddons" boolean
   // This should be the list of addons, not the complete product list
@@ -26,72 +30,12 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  restrictionContext: {
+    type: String,
+    default: "primary",
+  },
 });
 const slots = defineSlots();
-let latestProductsRequestId = 0;
-
-// Function to fetch categories based on the department ID
-// This function will be called when the component is mounted
-const fetchProducts = async (category: PosCategory, departmentId: number) => {
-  const requestId = ++latestProductsRequestId;
-  pos.productList.setLoading(true);
-  pos.productList.clear();
-
-  try {
-    const response = await SessionUser.objects.products.get.category(
-      category.id,
-      departmentId,
-      (customer_id.value ? parseInt(customer_id.value) : null),
-      true
-    );
-
-    if (requestId !== latestProductsRequestId) {
-      return;
-    }
-
-    orderProducts(response).forEach((result: PosProduct) => {
-      pos.productList.add(result);
-    });
-    // TODO: Update prices of products based on customer pricing rules
-    pos.transactionItems.updateTransactionPrices();
-  } catch (error) {
-    if (requestId === latestProductsRequestId) {
-      console.warn("Unable to load POS products", error);
-    }
-  } finally {
-    if (requestId === latestProductsRequestId) {
-      pos.productList.setLoading(false);
-    }
-  }
-};
-
-// Function to fetch suggested products
-const fetchSuggestedProducts = async () => {
-  // TODO: Actually use the vehicle registrations from the pos object
-  await SessionUser.request(
-      '/vehicle/product-suggestions',
-      'GET',
-      {
-        department_id: parseInt(department_id.value),
-        reg_1: pos.vehicles.vehicle_1?.value?.reg || null,
-        reg_2: pos.vehicles.vehicle_2?.value?.reg || null,
-        reg_3: pos.vehicles.vehicle_3?.value?.reg || null,
-      }
-  ).then((response) => {
-  });
-};
-
-// Watch for changes in the selected category
-watch(() => pos.categories.selection(), (newCategory) => {
-  if (newCategory) {
-    // If the category id is -1, get the suggested products
-    if (newCategory.id === -1) {
-      fetchSuggestedProducts();
-    } else {
-      fetchProducts(newCategory, parseInt(department_id.value));
-    }
-  }
-});
 
 /** As Addons **/
 const mergedAddons = ref<Addon[]>([]);
@@ -100,18 +44,21 @@ const mergeCountAddons = (products: PosProduct[], addons: Addon[] | undefined) =
   const tmpAddons = <Addon[]>[]; // Temporary array to hold the merged addons
   // Convert all products to addons (only non-restricted products)
   for (let product of products) {
-    // Skip restricted products
-    if (isProductRestricted(product)) {
-      continue;
-    }
     let tmpAddon = pos.transactionItems.convertProductToAddon(product); // Convert product to addon (count = 0)
+    const restriction = getProductRestrictionForRow(product);
+    if (restriction.restricted) {
+      (tmpAddon as any).restricted = true;
+      (tmpAddon as any).restrictionRule = restriction.rule;
+      (tmpAddon as any).restrictionMessageKey = restriction.messageKey;
+      tmpAddon.quantity = 0;
+    }
     tmpAddons.push(tmpAddon);
   }
   // Loop through the addons and update the count if the addon exists in the tmpAddons array
   if (addons) {
     for (let addon of addons) {
       let index = tmpAddons.findIndex(a => a.product.id === addon.product.id);
-      if (index !== -1) {
+      if (index !== -1 && !(tmpAddons[index] as any).restricted) {
         tmpAddons[index].quantity = addon.quantity; // Update the count
       }
     }
@@ -125,11 +72,36 @@ watch(() => props.addons, (newAddons) => {
 }, { immediate: true });
 
 // Computed property to filter out restricted products
+const getProductRestrictionForRow = (product: PosProduct) => {
+  if (props.restrictionContext === "standaloneAdditionalService" && hasAttribute("restrictAdditionalServices")) {
+    return {
+      restricted: true,
+      rule: "restrictAdditionalServices",
+      messageKey: "pos.restrictions.addons_not_allowed",
+    };
+  }
+
+  const restriction = getProductRestriction(product, props.restrictionContext === "standaloneAdditionalService"
+    ? { isStandaloneAdditionalService: true, includeNumericAddonCategory: true }
+    : {});
+  return restriction;
+};
+
+const getProductRestrictionMessage = (product: PosProduct) => {
+  const restriction = getProductRestrictionForRow(product);
+  return restriction.messageKey ? t(restriction.messageKey) : "";
+};
+
+const productListItems = computed(() => pos.productList.list.value || []);
 const filteredProducts = computed(() => {
-  return pos.productList.get().filter(product => !isProductRestricted(product));
+  if (props.restrictionContext === "standaloneAdditionalService") {
+    return productListItems.value;
+  }
+
+  return productListItems.value.filter(product => !isProductRestricted(product));
 });
 const shouldShowLoadingState = computed(() => {
-  return pos.categories.loading.value || pos.productList.loading.value;
+  return pos.categories.loading.value || (pos.productList.loading.value && productListItems.value.length === 0);
 });
 </script>
 
@@ -148,14 +120,16 @@ const shouldShowLoadingState = computed(() => {
   <template v-else-if="pos.categories.isSelected()">
     <template v-if="!props.asAddons">
       <!-- Display of products, without a "basket" (filtered for customer restrictions) -->
-      <template v-for="product in filteredProducts" :key="product.id">
-        <PosDepartmentStepMobile2CategoryProduct
-            @addProduct="emits('addProduct', product)"
-            :price="product.price"
-            :label="product.name"
-            :piktogram="product.piktogram"
-            :testId="`pos-mobile-product-${product.id}`"
-          >
+	      <template v-for="product in filteredProducts" :key="product.id">
+	        <PosDepartmentStepMobile2CategoryProduct
+	            @addProduct="emits('addProduct', product)"
+	            :price="product.price"
+	            :label="product.name"
+	            :piktogram="product.piktogram"
+	            :testId="`pos-mobile-product-${product.id}`"
+	            :disabled="getProductRestrictionForRow(product).restricted"
+	            :restrictionMessage="getProductRestrictionMessage(product)"
+	          >
           <template #right>
             <slot name="right" :product="product"/>
           </template>

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

@@ -9,6 +9,7 @@ export type Addon = {
   quantity: number;
   min: number; // Optional minimum quantity (This is the minimum, when the add-on is selected)
   max: number; // Optional maximum quantity
+  skip_price_override?: boolean;
   /** The product details for the add-on */
   product?: PosProduct; // The product details for the add-on
 };
@@ -18,4 +19,4 @@ export type PosAddon = Addon;
 export default defineComponent({
   name: "PosAddon",
 });
-</script>
+</script>

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

@@ -1458,6 +1458,7 @@ const selectLastVehicleOrder = (vehicleIndex: number) => {
         notes: item?.notes ?? item?.product?.notes ?? "",
         addons: Array.isArray(item?.product?.addons) ? item.product.addons : [],
         subscription_allowed: Boolean(item?.product?.subscription_allowed ?? false),
+        skip_price_override: true,
       } as PosProduct;
     };
 

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

@@ -23,5 +23,6 @@ export type PosProduct = {
   quantity?: number;
   notes?: string; // Optional notes for the product, used as a part of order item generation
   related_item_id?: number;
+  skip_price_override?: boolean;
 };
-</script>
+</script>

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

@@ -41,6 +41,11 @@ const props = defineProps({
     type: Number,
     required: false,
     default: 750
+  },
+  restrictionContext: {
+    type: String,
+    required: false,
+    default: "primary"
   }
 });
 
@@ -82,7 +87,12 @@ const canClose = () => Date.now() >= earliestCloseTime.value;
     <!-- Product Recommendations -->
     <!--<PosDepartmentStepMobile2ProductRecommendations/>-->
     <!-- Products -->
-    <PosDepartmentStepMobile2Products @addProduct="onAddProduct" :asAddons="props.asAddons" :addons="props.addons">
+    <PosDepartmentStepMobile2Products
+      @addProduct="onAddProduct"
+      :asAddons="props.asAddons"
+      :addons="props.addons"
+      :restriction-context="props.restrictionContext"
+    >
       <template v-slot:right>
         <!-- Right arrow -->
         <span class="icon is-small">

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

@@ -176,7 +176,7 @@ const onClickAttachToOrder = (object) => {
             }"
             @click="onTableHeaderClick(tableHeaders.name)"
         >
-          <span class="is-flex-wrap-nowrap">
+          <span class="is-flex-wrap-nowrap pleno-table-header-content">
             <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
             <span
                 v-if="isColumnCurrentlyBeingSortedBy(tableHeaders.name)"
@@ -194,7 +194,7 @@ const onClickAttachToOrder = (object) => {
                 'has-text-centered': tableHeaders.name === 'id'
             }"
         >
-          <span class="is-flex-wrap-nowrap">
+          <span class="is-flex-wrap-nowrap pleno-table-header-content">
             <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
           </span>
         </th>

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

@@ -453,7 +453,7 @@ const confirmCloseModal = () => {
             }"
             @click="onTableHeaderClick(tableHeaders.name)"
         >
-          <span class="is-flex-wrap-nowrap">
+          <span class="is-flex-wrap-nowrap pleno-table-header-content">
             <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
             <span
                 v-if="isColumnCurrentlyBeingSortedBy(tableHeaders.name)"
@@ -471,7 +471,7 @@ const confirmCloseModal = () => {
                 'has-text-centered': tableHeaders.name === 'id'
             }"
         >
-          <span class="is-flex-wrap-nowrap">
+          <span class="is-flex-wrap-nowrap pleno-table-header-content">
             <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
           </span>
         </th>
@@ -512,7 +512,7 @@ const confirmCloseModal = () => {
             </button>
           </td>
         </template>
-        <td>
+        <td class="has-text-centered">
           <ColorIndicator
               v-bind:color_class="getOrderInvoiceStatusBarColor(order)"
               v-bind:is_narrow="true"

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

@@ -651,7 +651,7 @@ const filteredObjects = computed(() => {
             }"
             @click="onTableHeaderClick(tableHeaders.name)"
         >
-          <span class="is-flex-wrap-nowrap">
+          <span class="is-flex-wrap-nowrap pleno-table-header-content">
             <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
             <span
                 v-if="isColumnCurrentlyBeingSortedBy(tableHeaders.name)"
@@ -669,7 +669,7 @@ const filteredObjects = computed(() => {
                 'has-text-centered': tableHeaders.name === 'id'
             }"
         >
-          <span class="is-flex-wrap-nowrap">
+          <span class="is-flex-wrap-nowrap pleno-table-header-content">
             <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
           </span>
         </th>

src/components/displays/department/pricing/DepartmentCustomerPricingEditor.vue

@@ -0,0 +1,615 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import Swal from "sweetalert2";
+
+import SuperuserOverviewPanel from "@/components/displays/superuser/overview/SuperuserOverviewPanel.vue";
+import {
+  getLimitedBackofficeDepartmentCustomerPricing,
+  getSuperuserDepartmentCustomerPricing,
+  unwrapDepartmentCustomerPricingResponse,
+  updateLimitedBackofficeDepartmentCustomerPricing,
+  updateSuperuserDepartmentCustomerPricing,
+} from "@/services/departmentCustomerPricing.js";
+
+const props = defineProps({
+  scope: {
+    type: String,
+    required: true,
+    validator: (value) => ["superuser", "limited"].includes(value),
+  },
+  departmentId: {
+    type: [Number, String],
+    required: true,
+  },
+  customPricingEnabled: {
+    type: Boolean,
+    default: false,
+  },
+  canRead: {
+    type: Boolean,
+    default: false,
+  },
+  canEdit: {
+    type: Boolean,
+    default: false,
+  },
+  initialCustomerNumber: {
+    type: [Number, String],
+    default: "",
+  },
+  presentation: {
+    type: String,
+    default: "plain",
+    validator: (value) => ["plain", "superuser-tiles"].includes(value),
+  },
+});
+
+const { t, locale } = useI18n({ useScope: "global" });
+
+const customerNumber = ref(String(props.initialCustomerNumber || ""));
+const pricingData = ref(null);
+const loading = ref(false);
+const saving = ref(false);
+const errorMessage = ref("");
+
+const departmentId = computed(() => {
+  const parsed = Number.parseInt(String(props.departmentId || ""), 10);
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+});
+
+const parsedCustomerNumber = computed(() => {
+  const parsed = Number.parseInt(String(customerNumber.value || "").trim(), 10);
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+});
+
+const canLoadPricing = computed(
+  () => props.canRead && props.customPricingEnabled && departmentId.value !== null && parsedCustomerNumber.value !== null
+);
+
+const categories = computed(() => (Array.isArray(pricingData.value?.categories) ? pricingData.value.categories : []));
+const hasProducts = computed(() => categories.value.some((category) => (category.products || []).length > 0));
+const customer = computed(() => pricingData.value?.customer || null);
+const customerDisplay = computed(() => {
+  if (!customer.value) {
+    return "";
+  }
+
+  return [customer.value.display_name, customer.value.customer_number ? `#${customer.value.customer_number}` : null]
+    .filter(Boolean)
+    .join(" - ");
+});
+
+const formatPrice = (price) => {
+  if (price === null || price === undefined || price === "") {
+    return "-";
+  }
+
+  return new Intl.NumberFormat(locale.value || undefined, {
+    style: "currency",
+    currency: "DKK",
+    maximumFractionDigits: 0,
+  }).format(Number(price || 0));
+};
+
+const overrideKey = (isCategory, objectId) => `${isCategory ? 1 : 0}:${String(objectId)}`;
+
+const overridesByKey = computed(() => {
+  const map = new Map();
+  (pricingData.value?.overrides || []).forEach((override) => {
+    map.set(overrideKey(Boolean(override.is_category), override.product_or_category_id), {
+      is_category: Boolean(override.is_category),
+      product_or_category_id: override.product_or_category_id,
+      percentage: Number.parseInt(String(override.percentage ?? 0), 10) || 0,
+      fixed_price:
+        override.fixed_price === null || override.fixed_price === undefined
+          ? null
+          : Number.parseInt(String(override.fixed_price), 10),
+    });
+  });
+  return map;
+});
+
+const getOverride = (isCategory, objectId) =>
+  overridesByKey.value.get(overrideKey(Boolean(isCategory), objectId)) || {
+    is_category: Boolean(isCategory),
+    product_or_category_id: objectId,
+    percentage: 0,
+    fixed_price: null,
+  };
+
+const getDiscountDisplay = (override) => (override.percentage > 0 ? `${override.percentage}%` : "-");
+const getFixedPriceDisplay = (override) => (override.fixed_price !== null ? formatPrice(override.fixed_price) : "-");
+const customerIdentifier = computed(() => ({ customerNumber: parsedCustomerNumber.value }));
+const tilePresentation = computed(() => props.presentation === "superuser-tiles");
+
+const requestLoad = () =>
+  props.scope === "limited"
+    ? getLimitedBackofficeDepartmentCustomerPricing(departmentId.value, customerIdentifier.value)
+    : getSuperuserDepartmentCustomerPricing(departmentId.value, customerIdentifier.value);
+
+const requestSave = (overrides) =>
+  props.scope === "limited"
+    ? updateLimitedBackofficeDepartmentCustomerPricing(departmentId.value, customerIdentifier.value, overrides)
+    : updateSuperuserDepartmentCustomerPricing(departmentId.value, customerIdentifier.value, overrides);
+
+const resetPricingData = () => {
+  pricingData.value = null;
+  errorMessage.value = "";
+};
+
+const loadPricing = async () => {
+  if (!canLoadPricing.value) {
+    resetPricingData();
+    return;
+  }
+
+  loading.value = true;
+  errorMessage.value = "";
+
+  try {
+    const response = await requestLoad();
+    pricingData.value = unwrapDepartmentCustomerPricingResponse(response);
+  } catch (error) {
+    pricingData.value = null;
+    errorMessage.value =
+      error?.response?.data?.data?.message ||
+      error?.response?.data?.message ||
+      error?.message ||
+      t("departments.customer_pricing.errors.load");
+  } finally {
+    loading.value = false;
+  }
+};
+
+const normalizedOverrides = (nextOverride) => {
+  const map = new Map(overridesByKey.value);
+  const key = overrideKey(nextOverride.is_category, nextOverride.product_or_category_id);
+  const percentage = Number.parseInt(String(nextOverride.percentage ?? 0), 10) || 0;
+  const fixedPrice =
+    nextOverride.fixed_price === null || nextOverride.fixed_price === undefined || nextOverride.fixed_price === ""
+      ? null
+      : Number.parseInt(String(nextOverride.fixed_price), 10);
+  const normalized = {
+    is_category: Boolean(nextOverride.is_category),
+    product_or_category_id: nextOverride.product_or_category_id,
+    percentage: Math.min(100, Math.max(0, percentage)),
+    fixed_price: nextOverride.is_category ? null : fixedPrice,
+  };
+
+  if (normalized.percentage <= 0 && normalized.fixed_price === null) {
+    map.delete(key);
+  } else {
+    map.set(key, normalized);
+  }
+
+  return [...map.values()];
+};
+
+const saveOverride = async (nextOverride) => {
+  if (!props.canEdit || !canLoadPricing.value) {
+    return;
+  }
+
+  saving.value = true;
+  errorMessage.value = "";
+
+  try {
+    const response = await requestSave(normalizedOverrides(nextOverride));
+    pricingData.value = unwrapDepartmentCustomerPricingResponse(response);
+  } catch (error) {
+    errorMessage.value =
+      error?.response?.data?.data?.message ||
+      error?.response?.data?.message ||
+      error?.message ||
+      t("departments.customer_pricing.errors.save");
+  } finally {
+    saving.value = false;
+  }
+};
+
+const promptInteger = async ({ title, inputLabel, inputValue, allowEmpty = false, min = 0, max = null }) => {
+  const result = await Swal.fire({
+    title,
+    input: "number",
+    inputLabel,
+    inputValue,
+    inputAttributes: {
+      min,
+      ...(max === null ? {} : { max }),
+      step: 1,
+      autocapitalize: "off",
+    },
+    showCancelButton: true,
+    confirmButtonText: t("common.save"),
+    showLoaderOnConfirm: true,
+    inputValidator: (value) => {
+      const normalized = String(value ?? "").trim();
+      if (allowEmpty && normalized === "") {
+        return null;
+      }
+
+      const parsed = Number.parseInt(normalized, 10);
+      if (!Number.isInteger(parsed) || parsed < min || (max !== null && parsed > max)) {
+        return max === null
+          ? t("departments.customer_pricing.fixed_price_validation")
+          : t("departments.customer_pricing.discount_validation");
+      }
+
+      return null;
+    },
+  });
+
+  if (!result.isConfirmed) {
+    return undefined;
+  }
+
+  const normalized = String(result.value ?? "").trim();
+  return allowEmpty && normalized === "" ? null : Number.parseInt(normalized, 10);
+};
+
+const editDiscount = async (isCategory, objectId, label) => {
+  const override = getOverride(isCategory, objectId);
+  const value = await promptInteger({
+    title: label,
+    inputLabel: t("departments.customer_pricing.discount"),
+    inputValue: override.percentage > 0 ? override.percentage : "",
+    allowEmpty: true,
+    max: 100,
+  });
+
+  if (value === undefined) {
+    return;
+  }
+
+  await saveOverride({
+    ...override,
+    percentage: value ?? 0,
+  });
+};
+
+const editFixedPrice = async (product) => {
+  const override = getOverride(false, product.id);
+  const value = await promptInteger({
+    title: product.name,
+    inputLabel: t("departments.customer_pricing.fixed_price"),
+    inputValue: override.fixed_price === null ? "" : override.fixed_price,
+    allowEmpty: true,
+    max: null,
+  });
+
+  if (value === undefined) {
+    return;
+  }
+
+  await saveOverride({
+    ...override,
+    fixed_price: value,
+  });
+};
+
+watch(
+  () => props.initialCustomerNumber,
+  (value) => {
+    customerNumber.value = String(value || "");
+    if (canLoadPricing.value) {
+      void loadPricing();
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => [props.departmentId, props.customPricingEnabled, props.canRead],
+  () => {
+    if (canLoadPricing.value) {
+      void loadPricing();
+    } else if (!props.customPricingEnabled || !props.canRead) {
+      resetPricingData();
+    }
+  }
+);
+</script>
+
+<template>
+  <section
+    class="department-customer-pricing"
+    :class="{ 'department-customer-pricing--tiles': tilePresentation }"
+    data-testid="department-customer-pricing-editor"
+  >
+    <div v-if="!props.canRead" class="notification is-danger is-light" data-testid="department-customer-pricing-forbidden">
+      {{ t("departments.customer_pricing.no_permission") }}
+    </div>
+
+    <div
+      v-else-if="!props.customPricingEnabled"
+      class="notification is-warning is-light"
+      data-testid="department-customer-pricing-disabled"
+    >
+      {{ t("departments.customer_pricing.not_enabled") }}
+    </div>
+
+    <template v-else>
+      <component
+        :is="tilePresentation ? SuperuserOverviewPanel : 'div'"
+        class="department-customer-pricing__toolbar-panel"
+        :title="tilePresentation ? t('departments.customer_pricing.title') : undefined"
+        :subtitle="tilePresentation ? t('departments.customer_pricing.open') : undefined"
+        data-testid="department-customer-pricing-lookup"
+      >
+      <div class="department-customer-pricing__toolbar">
+        <div class="field department-customer-pricing__customer-field">
+          <label class="label" for="department-customer-pricing-customer-number">
+            {{ t("departments.customer_pricing.customer_number") }}
+          </label>
+          <div class="field has-addons">
+            <div class="control is-expanded">
+              <input
+                id="department-customer-pricing-customer-number"
+                v-model="customerNumber"
+                class="input"
+                type="number"
+                min="1"
+                step="1"
+                inputmode="numeric"
+                :placeholder="t('departments.customer_pricing.customer_number')"
+                data-testid="department-customer-pricing-customer-number"
+                @keydown.enter.prevent="loadPricing"
+              />
+            </div>
+            <div class="control">
+              <b-tooltip :label="t('departments.customer_pricing.load_customer')" position="is-bottom" type="is-dark">
+                <button
+                  class="button is-info"
+                  type="button"
+                  :disabled="!canLoadPricing || loading"
+                  data-testid="department-customer-pricing-load"
+                  @click="loadPricing"
+                >
+                  <span class="icon is-small">
+                    <i class="fas" :class="loading ? 'fa-spinner fa-spin' : 'fa-search'" aria-hidden="true"></i>
+                  </span>
+                </button>
+              </b-tooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+      </component>
+
+      <div v-if="loading" class="notification is-light" data-testid="department-customer-pricing-loading">
+        {{ t("common.loading") }}
+      </div>
+
+      <div v-if="errorMessage" class="notification is-danger is-light" data-testid="department-customer-pricing-error">
+        {{ errorMessage }}
+      </div>
+
+      <div v-if="pricingData" class="department-customer-pricing__content">
+        <component
+          :is="tilePresentation ? SuperuserOverviewPanel : 'div'"
+          class="department-customer-pricing__summary-panel"
+          :title="tilePresentation ? customerDisplay : undefined"
+          :subtitle="tilePresentation ? pricingData.department?.name : undefined"
+          data-testid="department-customer-pricing-customer-panel"
+        >
+        <div class="level department-customer-pricing__summary">
+          <div class="level-left">
+            <div>
+              <h2 class="title is-5" data-testid="department-customer-pricing-customer">
+                {{ customerDisplay }}
+              </h2>
+              <p class="subtitle is-6">{{ pricingData.department?.name }}</p>
+            </div>
+          </div>
+          <div class="level-right">
+            <b-tooltip
+              :label="props.canEdit ? t('departments.customer_pricing.edit_global_discount') : t('departments.customer_pricing.edit_disabled')"
+              position="is-left"
+              type="is-dark"
+            >
+              <span>
+                <button
+                  class="button is-small"
+                  type="button"
+                  :disabled="!props.canEdit || saving"
+                  data-testid="department-customer-pricing-global-discount"
+                  @click="editDiscount(true, 'global', t('departments.customer_pricing.global_discount'))"
+                >
+                  <span class="icon is-small"><i class="fas fa-percent" aria-hidden="true"></i></span>
+                  <span>{{ getDiscountDisplay(getOverride(true, "global")) }}</span>
+                </button>
+              </span>
+            </b-tooltip>
+          </div>
+        </div>
+        </component>
+
+        <div v-if="saving" class="notification is-light py-2" role="status" data-testid="department-customer-pricing-saving">
+          {{ t("departments.customer_pricing.saving") }}
+        </div>
+
+        <div v-if="!hasProducts" class="notification is-light">
+          {{ t("departments.customer_pricing.no_products") }}
+        </div>
+
+        <component
+          :is="tilePresentation ? SuperuserOverviewPanel : 'div'"
+          v-for="category in categories"
+          :key="category.id"
+          class="department-customer-pricing__category"
+          :title="tilePresentation ? category.name : undefined"
+          :subtitle="tilePresentation ? t('departments.customer_pricing.item_discount') : undefined"
+        >
+          <div class="department-customer-pricing__category-header">
+            <h3 class="title is-6">{{ category.name }}</h3>
+            <b-tooltip
+              :label="props.canEdit ? t('departments.customer_pricing.edit_category_discount') : t('departments.customer_pricing.edit_disabled')"
+              position="is-left"
+              type="is-dark"
+            >
+              <span>
+                <button
+                  class="button is-small"
+                  type="button"
+                  :disabled="!props.canEdit || saving"
+                  :data-testid="`department-customer-pricing-category-discount-${category.id}`"
+                  @click="editDiscount(true, category.id, category.name)"
+                >
+                  <span class="icon is-small"><i class="fas fa-tags" aria-hidden="true"></i></span>
+                  <span>{{ getDiscountDisplay(getOverride(true, category.id)) }}</span>
+                </button>
+              </span>
+            </b-tooltip>
+          </div>
+
+          <div class="table-container">
+            <table class="table is-fullwidth is-hoverable is-striped department-customer-pricing__table">
+              <thead>
+                <tr>
+                  <th>{{ t("common.product") }}</th>
+                  <th>{{ t("departments.customer_pricing.department_price") }}</th>
+                  <th>{{ t("departments.customer_pricing.fixed_price") }}</th>
+                  <th>{{ t("departments.customer_pricing.item_discount") }}</th>
+                  <th>{{ t("departments.customer_pricing.effective_price") }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="product in category.products"
+                  :key="product.id"
+                  :data-testid="`department-customer-pricing-product-${product.id}`"
+                >
+                  <td>
+                    <strong>{{ product.name }}</strong>
+                    <p v-if="product.description" class="is-size-7 has-text-grey">{{ product.description }}</p>
+                  </td>
+                  <td :class="{ 'has-text-danger has-text-weight-semibold': product.missing_department_price }">
+                    {{ formatPrice(product.department_price) }}
+                  </td>
+                  <td>
+                    <b-tooltip
+                      :label="props.canEdit ? t('departments.customer_pricing.edit_fixed_price') : t('departments.customer_pricing.edit_disabled')"
+                      position="is-bottom"
+                      type="is-dark"
+                    >
+                      <span>
+                        <button
+                          class="button is-small is-white department-customer-pricing__cell-button"
+                          type="button"
+                          :disabled="!props.canEdit || saving"
+                          :data-testid="`department-customer-pricing-fixed-price-${product.id}`"
+                          @click="editFixedPrice(product)"
+                        >
+                          <span>{{ getFixedPriceDisplay(getOverride(false, product.id)) }}</span>
+                          <span class="icon is-small"><i class="fas fa-edit" aria-hidden="true"></i></span>
+                        </button>
+                      </span>
+                    </b-tooltip>
+                  </td>
+                  <td>
+                    <b-tooltip
+                      :label="props.canEdit ? t('departments.customer_pricing.edit_item_discount') : t('departments.customer_pricing.edit_disabled')"
+                      position="is-bottom"
+                      type="is-dark"
+                    >
+                      <span>
+                        <button
+                          class="button is-small is-white department-customer-pricing__cell-button"
+                          type="button"
+                          :disabled="!props.canEdit || saving"
+                          :data-testid="`department-customer-pricing-item-discount-${product.id}`"
+                          @click="editDiscount(false, product.id, product.name)"
+                        >
+                          <span>{{ getDiscountDisplay(getOverride(false, product.id)) }}</span>
+                          <span class="icon is-small"><i class="fas fa-edit" aria-hidden="true"></i></span>
+                        </button>
+                      </span>
+                    </b-tooltip>
+                  </td>
+                  <td>{{ formatPrice(product.effective_price) }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </component>
+      </div>
+    </template>
+  </section>
+</template>
+
+<style scoped>
+.department-customer-pricing {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.department-customer-pricing__toolbar,
+.department-customer-pricing__summary,
+.department-customer-pricing__category-header {
+  align-items: flex-start;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.department-customer-pricing__customer-field {
+  max-width: 420px;
+  width: 100%;
+}
+
+.department-customer-pricing__content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.department-customer-pricing__category {
+  margin-top: 0.5rem;
+}
+
+.department-customer-pricing--tiles .department-customer-pricing__category {
+  margin-top: 0;
+}
+
+.department-customer-pricing--tiles .department-customer-pricing__summary-panel .department-customer-pricing__summary,
+.department-customer-pricing--tiles .department-customer-pricing__toolbar-panel .department-customer-pricing__toolbar {
+  margin-bottom: 0;
+}
+
+.department-customer-pricing--tiles .department-customer-pricing__category-header .title,
+.department-customer-pricing--tiles .department-customer-pricing__summary .title,
+.department-customer-pricing--tiles .department-customer-pricing__summary .subtitle {
+  display: none;
+}
+
+.department-customer-pricing__category-header {
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.department-customer-pricing__category-header .title {
+  margin-bottom: 0;
+}
+
+.department-customer-pricing__table th,
+.department-customer-pricing__table td {
+  vertical-align: middle;
+}
+
+.department-customer-pricing__cell-button {
+  justify-content: space-between;
+  min-width: 7rem;
+  width: 100%;
+}
+
+@media screen and (max-width: 768px) {
+  .department-customer-pricing__toolbar,
+  .department-customer-pricing__summary,
+  .department-customer-pricing__category-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}
+</style>

src/components/displays/modals/PickCustomerInvoiceCollectionModal.vue

@@ -16,6 +16,7 @@ import InvoicesTable from "@/components/displays/user/invoices/invoicesTable.vue
 import CollectedOrderInvoicesTable from "@/components/displays/superuser/tables/collectedOrderInvoicesTable.vue";
 import CollectedOrderInvoicesPagination
   from "@/components/displays/pagination/models/SuperUserDashboard/CollectedOrderInvoicesPagination.vue";
+import BuefyDateField from "@/components/forms/BuefyDateField.vue";
 const props = defineProps({
   customer_id: {
     type: Number,
@@ -172,7 +173,7 @@ const tabs = ref([
               <div class="field">
                 <label class="label">{{SessionUser.objects.global.language.select}} {{SessionUser.objects.global.language.invoice.toLowerCase()}} {{SessionUser.objects.global.language.time.date.toLowerCase()}}</label>
                 <div class="control">
-                  <input class="input" type="date" v-model="selectedDate" />
+                  <BuefyDateField v-model="selectedDate" value-type="string" data-testid="invoice-collection-date" />
                 </div>
               </div>
               <!-- Create invoice collection button -->

src/components/displays/pagination/PaginationDisplayDates.vue

@@ -6,23 +6,28 @@ type startEndDate = {
   start: Date; // The start date of the range
   end: Date; // The end date of the range
 };
-type datePreset = startEndDate & {
+type datePreset = {
   labelKey: string; // The i18n key for the label (E.g., "global.text.today")
+  getRange: () => startEndDate;
 };
 
 const datePresetFunctions = {
   week: {
     // Get the first day of the week (Monday) based on the provided date
     firstDayOfWeek: (date: Date): Date => {
-      const day = date.getDay();
+      const adjustedDate = new Date(date.getTime());
+      const day = adjustedDate.getDay();
       const diff = (day === 0 ? -6 : 1) - day; // Adjust for Sunday
-      return new Date(date.setDate(date.getDate() + diff));
+      adjustedDate.setDate(adjustedDate.getDate() + diff);
+      return adjustedDate;
     },
     // Get the last day of the week (Sunday) based on the provided date
     lastDayOfWeek: (date: Date): Date => {
-      const day = date.getDay();
+      const adjustedDate = new Date(date.getTime());
+      const day = adjustedDate.getDay();
       const diff = (day === 0 ? 0 : 7) - day; // Adjust for Sunday
-      return new Date(date.setDate(date.getDate() + diff));
+      adjustedDate.setDate(adjustedDate.getDate() + diff);
+      return adjustedDate;
     },
   },
   month: {
@@ -81,26 +86,34 @@ const datePresetFunctions = {
 
 const today: datePreset = {
   labelKey: 'global.text.today',
-  start: new Date(),
-  end: new Date(),
+  getRange: () => {
+    const today = new Date();
+    return { start: today, end: new Date(today.getTime()) };
+  },
 };
 
 const yesterday: datePreset = {
   labelKey: 'global.text.yesterday',
-  start: datePresetFunctions.applyStringModifier(new Date(), '-1 day'),
-  end: datePresetFunctions.applyStringModifier(new Date(), '-1 day'),
+  getRange: () => {
+    const yesterday = datePresetFunctions.applyStringModifier(new Date(), '-1 day');
+    return { start: yesterday, end: new Date(yesterday.getTime()) };
+  },
 };
 
 const thisWeek: datePreset = {
   labelKey: 'global.text.this_week',
-  start: datePresetFunctions.week.firstDayOfWeek(new Date()),
-  end: datePresetFunctions.week.lastDayOfWeek(new Date()),
+  getRange: () => ({
+    start: datePresetFunctions.week.firstDayOfWeek(new Date()),
+    end: datePresetFunctions.week.lastDayOfWeek(new Date()),
+  }),
 };
 
 const thisMonth: datePreset = {
   labelKey: 'global.text.this_month',
-  start: datePresetFunctions.month.firstDayOfMonth(new Date()),
-  end: datePresetFunctions.month.lastDayOfMonth(new Date()),
+  getRange: () => ({
+    start: datePresetFunctions.month.firstDayOfMonth(new Date()),
+    end: datePresetFunctions.month.lastDayOfMonth(new Date()),
+  }),
 };
 
 

src/components/displays/pagination/PaginationOtherFiltersDropdown.vue

@@ -0,0 +1,134 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  activeCount: {
+    type: Number,
+    default: 0,
+  },
+  testId: {
+    type: String,
+    default: "pagination-other-filters",
+  },
+});
+
+const isOpen = ref(false);
+const root = ref(null);
+
+const normalizedActiveCount = computed(() => {
+  const parsedCount = Number.parseInt(props.activeCount, 10);
+  return Number.isFinite(parsedCount) && parsedCount > 0 ? parsedCount : 0;
+});
+
+const close = () => {
+  isOpen.value = false;
+};
+
+const toggle = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const handleDocumentClick = (event) => {
+  if (!root.value || root.value.contains(event.target)) {
+    return;
+  }
+  close();
+};
+
+const handleDocumentKeydown = (event) => {
+  if (event.key === "Escape") {
+    close();
+  }
+};
+
+onMounted(() => {
+  document.addEventListener("click", handleDocumentClick);
+  document.addEventListener("keydown", handleDocumentKeydown);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("click", handleDocumentClick);
+  document.removeEventListener("keydown", handleDocumentKeydown);
+});
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="dropdown is-right pagination-other-filters"
+    :class="{ 'is-active': isOpen }"
+    :data-testid="testId"
+  >
+    <div class="dropdown-trigger">
+      <button
+        type="button"
+        class="button is-light is-small pagination-other-filters__button"
+        :aria-expanded="isOpen ? 'true' : 'false'"
+        aria-haspopup="true"
+        :aria-label="label"
+        :data-testid="`${testId}-button`"
+        @click.stop="toggle"
+      >
+        <span class="icon is-small">
+          <i class="fas fa-filter" aria-hidden="true"></i>
+        </span>
+        <span>{{ label }}</span>
+        <span
+          v-if="normalizedActiveCount > 0"
+          class="tag is-info is-rounded is-small pagination-other-filters__count"
+          :data-testid="`${testId}-count`"
+        >
+          {{ normalizedActiveCount }}
+        </span>
+      </button>
+    </div>
+
+    <div
+      class="dropdown-menu pagination-other-filters__menu"
+      role="menu"
+      :data-testid="`${testId}-menu`"
+    >
+      <div class="dropdown-content pagination-other-filters__content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pagination-other-filters__button {
+  overflow: visible;
+  padding-right: 1.15rem;
+  position: relative;
+  white-space: nowrap;
+}
+
+.pagination-other-filters__count {
+  align-items: center;
+  border: 2px solid #fff;
+  display: inline-flex;
+  height: 1.15rem;
+  justify-content: center;
+  min-width: 1.15rem;
+  padding: 0 0.3rem;
+  position: absolute;
+  right: -0.35rem;
+  top: -0.45rem;
+}
+
+.pagination-other-filters__menu {
+  min-width: min(22rem, calc(100vw - 2rem));
+}
+
+.pagination-other-filters__content {
+  border: 1px solid #dbdbdb;
+  border-radius: 6px;
+  max-height: min(70vh, 36rem);
+  overflow-y: auto;
+  padding: 0.75rem;
+}
+</style>

src/components/displays/pagination/TableLabeledPagination.vue

@@ -64,6 +64,7 @@ const isSmall = ref(window.innerWidth < 1024);
         <slot name="paginationDisplayFiltersElement"></slot>
         <slot name="leftPaginationColumns"></slot>
         <div class="column is-auto-fill my-3" v-if="!isSmall" />
+        <slot name="rightFilterActions"></slot>
         <div class="columns is-multiline">
           <div class="column is-12 p-1 m-0"></div>
           <slot name="rightPaginationColumns"></slot>

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

@@ -81,7 +81,7 @@ const props = defineProps({
   }
 })
 const emit = defineEmits(["flagStatusChanged", "flagCreated"]);
-import { computed, ref, provide } from "vue";
+import { computed, ref, provide, watch } from "vue";
 import { useRouter } from "vue-router";
 import {
   usePaginatedList,
@@ -100,7 +100,13 @@ const {
   setPage,
   search,
   endpoint,
+  filter,
+  metaSearch,
+  additionalQueryParameters,
+  orderBy,
+  orderDirection,
   setFilter,
+  getFilter,
   setAdditionalQueryParameters,
   setOrder,
   setHideSearchField,
@@ -108,9 +114,17 @@ const {
 import OrdersTable from "@/components/displays/department/pos/orders/ordersTable.vue";
 import {SessionUser} from "@/components/session/token/SessionUser.vue";
 import PaginationDisplayFilters from "@/components/displays/pagination/PaginationDisplayFilters.vue";
+import PaginationOtherFiltersDropdown from "@/components/displays/pagination/PaginationOtherFiltersDropdown.vue";
 import DatePeriodSelector from "@/components/displays/buttons/DatePeriodSelector.vue";
+import BuefyDateField from "@/components/forms/BuefyDateField.vue";
 import { useI18n } from 'vue-i18n'
-import { formatLocalDateOnly, parseLocalDateOnly, todayLocalDateOnly } from "@/services/dateOnly.js";
+import { formatLocalDateOnly, parseLocalDateOnly } from "@/services/dateOnly.js";
+import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
+import {
+  buildOrderDateEventRequestParams,
+  buildOrderDateEvents,
+  stripOrderDateFilters,
+} from "@/services/orderDateEvents.js";
 
 const { t } = useI18n()
 const router = useRouter();
@@ -173,24 +187,208 @@ if (props.autoLoad) {
   loadList();
 }
 
-const date_from = ref(null);
-const date_to = ref(null);
+const date_from = ref(props.dates?.dateFrom ?? null);
+const date_to = ref(props.dates?.dateTo ?? null);
+const orderDateEvents = ref([]);
+const orderDateEventRequestId = ref(0);
+const orderDateEventSignature = computed(() => JSON.stringify({
+  endpoint: endpoint.value,
+  filters: stripOrderDateFilters(filter.value),
+  search: metaSearch.value,
+  additionalQueryParameters: additionalQueryParameters.value,
+}));
+
+const setDateFilter = (filterKey, value, autoLoad = true) => {
+  setFilter(filterKey, value || "*", autoLoad);
+};
+
+const onDateFilterChange = (filterKey, value) => {
+  setDateFilter(filterKey, value, true);
+};
+
 const onDateRangeSelected = (newSelectionStartDate, newSelectionToDate) => {
-  const formattedStartDate = formatLocalDateOnly(newSelectionStartDate);
-  const formattedEndDate = formatLocalDateOnly(newSelectionToDate);
+  const formattedStartDate = newSelectionStartDate ? formatLocalDateOnly(newSelectionStartDate) : "";
+  const formattedEndDate = newSelectionToDate ? formatLocalDateOnly(newSelectionToDate) : "";
   date_from.value = formattedStartDate;
   date_to.value = formattedEndDate;
-  setFilter("created_at-date_from", formattedStartDate, true);
-  setFilter("created_at-date_to", formattedEndDate, true);
+  setDateFilter("created_at-date_from", formattedStartDate, false);
+  setDateFilter("created_at-date_to", formattedEndDate, false);
   loadList();
 };
 
+const hiddenOrderFilterDefinitions = computed(() => [
+  {
+    key: "order-direction",
+    type: "order",
+    label: t("pagination.order_direction"),
+    defaultValue: "desc",
+    options: [
+      { value: "asc", label: t("pagination.ascending") },
+      { value: "desc", label: t("pagination.descending") },
+    ],
+  },
+  {
+    key: "booked-invoice-id",
+    filterKey: "booked_invoice_id",
+    label: t("pagination.booking_status"),
+    options: [
+      { value: "*", label: t("common.all") },
+      { value: "not null", label: t("pagination.booked") },
+      { value: "is_null", label: t("pagination.not_booked") },
+    ],
+  },
+  {
+    key: "processor",
+    filterKey: "processor",
+    label: t("pagination.payment_processor"),
+    options: [
+      { value: "*", label: t("common.all") },
+      { value: "1", label: "E-conomic" },
+      { value: "2", label: "Stripe" },
+      { value: "3", label: t("pagination.other_no_tracking") },
+      { value: "is_null", label: t("pagination.not_specified") },
+    ],
+  },
+  {
+    key: "completed-at",
+    filterKey: "completed_at",
+    label: t("pagination.completed"),
+    options: [
+      { value: "*", label: t("common.all") },
+      { value: "not null", label: t("pagination.completed") },
+      { value: "is_null", label: t("pagination.not_completed") },
+    ],
+  },
+  {
+    key: "invoice-selection",
+    filterKey: "customer_id-has_attribute",
+    label: t("pagination.invoice_selection"),
+    options: [
+      { value: "*", label: t("common.all") },
+      { value: "invoiceAllOrdersIndividually", label: t("pagination.invoice_per_order") },
+      { value: "!invoiceAllOrdersIndividually", label: t("pagination.invoice_per_month") },
+    ],
+  },
+  {
+    key: "special-agreement",
+    filterKey: "customer_id-has_key-OtherSpecialArrangement",
+    label: t("pagination.special_agreement"),
+    options: [
+      { value: "*", label: t("common.all") },
+      { value: "OtherSpecialArrangement", label: t("pagination.has_special_agreement") },
+      { value: "!OtherSpecialArrangement", label: t("pagination.no_special_agreement") },
+    ],
+  },
+  {
+    key: "wash-subscription",
+    filterKey: "customer_id-has_key-OtherVaskeabonnement",
+    label: t("pagination.wash_subscription"),
+    options: [
+      { value: "*", label: t("common.all") },
+      { value: "OtherVaskeabonnement", label: t("pagination.has_wash_subscription") },
+      { value: "!OtherVaskeabonnement", label: t("pagination.no_wash_subscription") },
+    ],
+  },
+]);
+
+const isActiveHiddenOrderFilterValue = (value) => (
+  value !== undefined && value !== null && value !== "" && value !== "*"
+);
+
+const getHiddenOrderFilterValue = (filterDefinition) => {
+  if (filterDefinition.type === "order") {
+    return orderDirection.value || filterDefinition.defaultValue;
+  }
+
+  return getFilter(filterDefinition.filterKey) || "*";
+};
+
+const applyHiddenOrderFilter = (filterDefinition, value) => {
+  if (filterDefinition.type === "order") {
+    setOrder("created_at", value);
+    loadList();
+    return;
+  }
+
+  setFilter(filterDefinition.filterKey, value, true);
+};
+
+const activeHiddenOrderFiltersCount = computed(() => hiddenOrderFilterDefinitions.value.filter((filterDefinition) => {
+  const value = getHiddenOrderFilterValue(filterDefinition);
+
+  if (filterDefinition.type === "order") {
+    return value !== filterDefinition.defaultValue;
+  }
+
+  return isActiveHiddenOrderFilterValue(value);
+}).length);
 
 const doesEndpointMatch = (matcher) => {
   // Check if the endpoint matches the current endpoint
   return endpoint.value === matcher;
 }
 
+const loadOrderDateEvents = async () => {
+  if (!doesEndpointMatch("/orders")) {
+    orderDateEvents.value = [];
+    return;
+  }
+
+  const requestId = orderDateEventRequestId.value + 1;
+  orderDateEventRequestId.value = requestId;
+
+  try {
+    const rows = [];
+    let page = 1;
+    let totalPages = 1;
+    const limit = 1000;
+
+    while (page <= totalPages) {
+      const response = await authenticatedRequest(
+        "/orders",
+        "GET",
+        buildOrderDateEventRequestParams({
+          filters: filter.value,
+          search: metaSearch.value,
+          additionalQueryParameters: additionalQueryParameters.value,
+          orderBy: orderBy.value,
+          orderDirection: orderDirection.value,
+          page,
+          limit,
+        })
+      );
+
+      if (requestId !== orderDateEventRequestId.value) {
+        return;
+      }
+
+      const pageRows = Array.isArray(response?.data?.data) ? response.data.data : [];
+      rows.push(...pageRows);
+
+      const pagination = response?.data?.meta?.pagination || {};
+      const perPage = Number.parseInt(pagination.per_page, 10) || limit;
+      const total = Number.parseInt(pagination.total, 10);
+      totalPages = Number.isFinite(total) && total > 0
+        ? Math.max(1, Math.ceil(total / Math.max(1, perPage)))
+        : 1;
+      page += 1;
+    }
+
+    if (requestId === orderDateEventRequestId.value) {
+      orderDateEvents.value = buildOrderDateEvents(rows);
+    }
+  } catch (error) {
+    if (requestId === orderDateEventRequestId.value) {
+      console.warn("Unable to load order date events", error);
+      orderDateEvents.value = [];
+    }
+  }
+};
+
+watch(orderDateEventSignature, () => {
+  loadOrderDateEvents();
+}, { immediate: true });
+
 </script>
 
 <template>
@@ -223,145 +421,89 @@ const doesEndpointMatch = (matcher) => {
         />
       </template>
       <template #leftPaginationColumns>
-        <!-- Sort by created_at -->
-        <div class="column is-narrow">
-          <label class="label is-small">{{ t('pagination.order_direction') }}</label>
-          <div class="control">
-            <div class="select">
-              <select @change="setOrder('created_at', $event.target.value); loadList();">
-                <option value="asc">{{ t('pagination.ascending') }}</option>
-                <option value="desc" selected>{{ t('pagination.descending') }}</option>
-              </select>
-            </div>
-          </div>
-        </div>
-        <!-- Invoice status -->
-        <div class="column is-narrow">
-          <label class="label is-small">{{ t('pagination.booking_status') }}</label>
-          <div class="control">
-            <div class="select">
-              <select @change="setFilter('booked_invoice_id', $event.target.value, true);">
-                <option value="*" :selected="!props.applyDefaultFilters">{{ t('common.all') }}</option>
-                <option value="not null">{{ t('pagination.booked') }}</option>
-                <option value="is_null" :selected="props.applyDefaultFilters">{{ t('pagination.not_booked') }}</option>
-              </select>
-            </div>
-          </div>
-        </div>
-        <!-- Error status -->
-        <div class="column is-narrow">
-          <label class="label is-small">{{ t('pagination.error_status') }}</label>
-          <div class="control">
-            <div class="select">
-              <select @change="setFilter('error_message', $event.target.value, true);">
-                <option value="*" selected>{{ t('common.all') }}</option>
-                <option value="not null">{{ t('common.yes') }}</option>
-                <option value="is_null">{{ t('common.no') }}</option>
-              </select>
-            </div>
-          </div>
-        </div>
-        <!-- Payment processor -->
-        <div class="column is-narrow">
-          <label class="label is-small">{{ t('pagination.payment_processor') }}</label>
-          <div class="control">
-            <div class="select">
-              <select @change="setFilter('processor', $event.target.value, true);">
-                <option value="*" selected>{{ t('common.all') }}</option>
-                <option value="1">E-conomic</option>
-                <option value="2">Stripe</option>
-                <option value="3">{{ t('pagination.other_no_tracking') }}</option>
-                <option :value="'is_null'">{{ t('pagination.not_specified') }}</option>
-              </select>
-            </div>
-          </div>
-        </div>
-        <!-- Marked as complete ("Gennemført") -->
-        <div class="column is-narrow">
-          <label class="label is-small">{{ t('pagination.completed') }}</label>
-          <div class="control">
-            <div class="select">
-              <select @change="setFilter('completed_at', $event.target.value, true);">
-                <option value="*" selected>{{ t('common.all') }}</option>
-                <option value="not null">{{ t('pagination.completed') }}</option>
-                <option :value="'is_null'">{{ t('pagination.not_completed') }}</option>
-              </select>
-            </div>
-          </div>
-        </div>
-        <!-- Multiple selection, customer has attribute -->
-        <div class="column is-narrow">
-          <label class="label is-small">{{ t('pagination.invoice_selection') }}</label>
-          <div class="control">
-            <div class="select">
-              <select @change="setFilter('customer_id-has_attribute', $event.target.value, true);">
-                <option value="*" selected>{{ t('common.all') }}</option>
-                <option value="invoiceAllOrdersIndividually">{{ t('pagination.invoice_per_order') }}</option>
-                <option value="!invoiceAllOrdersIndividually">{{ t('pagination.invoice_per_month') }}</option>
-              </select>
-            </div>
-          </div>
-        </div>
-        <!-- Multiple selection, customer has special arrangement -->
-        <div class="column is-narrow">
-          <label class="label is-small">{{ t('pagination.special_agreement') }}</label>
-          <div class="control">
-            <div class="select">
-              <select @change="setFilter('customer_id-has_key-OtherSpecialArrangement', $event.target.value, true);">
-                <option value="*" :selected="!props.applyDefaultFilters">{{ t('common.all') }}</option>
-                <option value="OtherSpecialArrangement">{{ t('pagination.has_special_agreement') }}</option>
-                <option value="!OtherSpecialArrangement" :selected="props.applyDefaultFilters">{{ t('pagination.no_special_agreement') }}</option>
-              </select>
-            </div>
-          </div>
-        </div>
-        <!-- Multiple selection, customer has washing subscription -->
-        <div class="column is-narrow">
-          <label class="label is-small">{{ t('pagination.wash_subscription') }}</label>
-          <div class="control">
-            <div class="select">
-              <select @change="setFilter('customer_id-has_key-OtherVaskeabonnement', $event.target.value, true);">
-                <option value="*" :selected="!props.applyDefaultFilters">{{ t('common.all') }}</option>
-                <option value="OtherVaskeabonnement">{{ t('pagination.has_wash_subscription') }}</option>
-                <option value="!OtherVaskeabonnement" :selected="props.applyDefaultFilters">{{ t('pagination.no_wash_subscription') }}</option>
-              </select>
-            </div>
-          </div>
-        </div>
-        <!-- Multiple selection, customer has washing subscription -FIX
-        <div class="column is-narrow">
-          <label class="label">Only tank cleaning</label>s
-          <div class="control">
-            <div class="select">
-              <select @change="setFilter('customer_id-has_attribute', $event.target.value, true);">
-                <option value="*" :selected="!props.applyDefaultFilters">All</option>
-                <option value="onlyTankCleaning">Only tank cleaning</option>
-                <option value="!onlyTankCleaning" :selected="props.applyDefaultFilters">Ikke tankcleaning</option>
-              </select>
-            </div>
-          </div>
-        </div> -->
         <!-- Date from -->
         <div class="column is-narrow">
           <label class="label is-small">{{ t('pagination.from_date') }}</label>
           <div class="control">
-            <input type="date" class="input" @change="setFilter('created_at-date_from', $event.target.value, true)" v-model="date_from" />
+            <BuefyDateField
+              v-model="date_from"
+              value-type="string"
+              data-testid="invoice-orders-date-from"
+              placeholder="--.--.----"
+              clearable
+              :events="orderDateEvents"
+              indicators="dots"
+              @change="(value) => onDateFilterChange('created_at-date_from', value)"
+            />
           </div>
         </div>
         <!-- Date to -->
         <div class="column is-narrow">
           <label class="label is-small">{{ t('pagination.to_date') }}</label>
           <div class="control">
-            <input type="date" class="input" @change="setFilter('created_at-date_to', $event.target.value, true)" v-model="date_to" />
+            <BuefyDateField
+              v-model="date_to"
+              value-type="string"
+              data-testid="invoice-orders-date-to"
+              placeholder="--.--.----"
+              clearable
+              :events="orderDateEvents"
+              indicators="dots"
+              @change="(value) => onDateFilterChange('created_at-date_to', value)"
+            />
           </div>
         </div>
       </template>
+      <template #rightFilterActions>
+        <div class="column is-narrow invoice-orders-other-filters-column">
+          <PaginationOtherFiltersDropdown
+            :label="t('pagination.other_filters')"
+            :active-count="activeHiddenOrderFiltersCount"
+            test-id="invoice-orders-other-filters"
+          >
+            <div class="invoice-orders-other-filters__fields">
+              <div
+                v-for="filterDefinition in hiddenOrderFilterDefinitions"
+                :key="filterDefinition.key"
+                class="field invoice-orders-other-filters__field"
+              >
+                <label
+                  class="label is-small"
+                  :for="`invoice-orders-other-filter-${filterDefinition.key}`"
+                >
+                  {{ filterDefinition.label }}
+                </label>
+                <div class="control">
+                  <div class="select is-fullwidth">
+                    <select
+                      :id="`invoice-orders-other-filter-${filterDefinition.key}`"
+                      :value="getHiddenOrderFilterValue(filterDefinition)"
+                      :data-testid="`invoice-orders-other-filter-${filterDefinition.key}`"
+                      @change="applyHiddenOrderFilter(filterDefinition, $event.target.value)"
+                    >
+                      <option
+                        v-for="option in filterDefinition.options"
+                        :key="option.value"
+                        :value="option.value"
+                      >
+                        {{ option.label }}
+                      </option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </PaginationOtherFiltersDropdown>
+        </div>
+      </template>
       <template #rightPaginationColumns>
         <div class="column is-12">
         <!-- Shortcuts for date filters -->
         <DatePeriodSelector :on-selection-change="onDateRangeSelected"
                             :visibility="{ showDailySelector: false, showWeeklySelector: false, showMultipleMonthWarning: false, showUpdateButton: false, showMonthSelector: false, showStartDate: false, showEndDate: false, showSelectionValidity: false, showYearSelector: false, showToLabel: false }"
-                            v-bind:selection="{ startDate: parseLocalDateOnly(date_from || todayLocalDateOnly()), endDate: parseLocalDateOnly(date_to || todayLocalDateOnly()) }"/>
+                            v-bind:allow-empty-selection="true"
+                            v-bind:events="orderDateEvents"
+                            v-bind:selection="{ startDate: date_from ? parseLocalDateOnly(date_from) : null, endDate: date_to ? parseLocalDateOnly(date_to) : null }"/>
         </div>
       </template>
       <template #default>
@@ -387,4 +529,17 @@ const doesEndpointMatch = (matcher) => {
   margin-top: -0.35rem;
   margin-bottom: 0.25rem;
 }
+
+.invoice-orders-other-filters-column {
+  align-self: flex-end;
+  margin-left: auto;
+}
+
+.invoice-orders-other-filters__field {
+  margin-bottom: 0.75rem;
+}
+
+.invoice-orders-other-filters__field:last-child {
+  margin-bottom: 0;
+}
 </style>

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

@@ -24,6 +24,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  userScopedUserId: {
+    type: [String, Number],
+    default: null,
+  },
 });
 const { t } = useI18n();
 
@@ -99,7 +103,11 @@ if (props.autoLoad) {
     </template>
   </PaginationDisplay>
 
-  <SubusersTable :objects="list" :show-customer="showCustomer" />
+  <SubusersTable
+    :objects="list"
+    :show-customer="showCustomer"
+    :user-scoped-user-id="userScopedUserId"
+  />
 
   <PaginationNavigation
     :currentPage="metaCurrentPage"

src/components/displays/pagination/models/UserDashboard/VehiclesPagination.vue

@@ -25,6 +25,11 @@ const isUserRoute = computed(() => router.currentRoute.value.path.startsWith("/u
 const canAddVehicle = computed(() => SessionUser.canAccessCustomerFeature("vehicles", "add"));
 
 const props = defineProps({
+  endpoint: {
+    type: String,
+    required: false,
+    default: "/vehicles",
+  },
   customer_id: {
     type: Number,
     required: false,
@@ -35,12 +40,34 @@ const props = defineProps({
     required: false,
     default: null,
   },
+  userScopedUserId: {
+    type: [Number, String],
+    required: false,
+    default: null,
+  },
+  superuserPage: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  onAfterMutation: {
+    type: Function,
+    required: false,
+    default: null,
+  },
 })
-setEndpoint("/vehicles", false);
+setEndpoint(props.endpoint, false);
 if (props.customer_id) {
   setFilter("customer_id", props.customer_id, false);
 }
 loadList();
+
+const reloadVehicles = async () => {
+  await loadList();
+  if (typeof props.onAfterMutation === "function") {
+    await props.onAfterMutation();
+  }
+};
 </script>
 
 <template>
@@ -75,7 +102,14 @@ loadList();
       </div>
     </template>
     <template #default>
-      <VehiclesTable :vehicles="list" :show_add_vehicle="props.customer_id" :add_other_customer_id="props.add_other_customer_id"/>
+      <VehiclesTable
+        :vehicles="list"
+        :show_add_vehicle="props.customer_id"
+        :add_other_customer_id="props.add_other_customer_id"
+        :reload-list="reloadVehicles"
+        :user-scoped-user-id="props.userScopedUserId"
+        :superuser-page="props.superuserPage"
+      />
     </template>
   </TableLabeledPagination>
   </div>

src/components/displays/pagination/templates/PaginationDisplayTemplateDate.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import PaginationDisplayItemColumn from "@/components/displays/pagination/PaginationDisplayItemColumn.vue";
-import { computed } from "vue";
-import { formatLocalDateOnly, parseLocalDateOnly } from "@/services/dateOnly.js";
+import BuefyDateField from "@/components/forms/BuefyDateField.vue";
 const props = defineProps({
   label: {
     type: String,
     required: true,
     default: "Date",
   },
+  placeholder: {
+    type: String,
+    default: "",
+  },
 });
 const emit = defineEmits(['update:date']);
 const date = defineModel<Date>({
@@ -19,27 +22,20 @@ defineExpose({
   date,
 });
 
-const formattedDate = computed(() => {
-  return formatLocalDateOnly(date.value);
-});
-
-// This component is used to display a date input in a pagination display item column.
-// It allows the user to select a date, which will be emitted to the parent component.
-// The date is displayed in a YYYY-MM-DD format, which is compatible with the HTML date
-// input type.
+const updateDate = (newDate: Date) => {
+  emit('update:date', newDate);
+};
 </script>
 
 <template>
   <PaginationDisplayItemColumn :label="props.label">
     <template #control>
-      <input
-        type="date"
-        class="input"
-        :value="formattedDate"
-        @input="(e) => {
-          const newDate = parseLocalDateOnly(e.target.value);
-          emit('update:date', newDate);
-        }"
+      <BuefyDateField
+        v-model="date"
+        value-type="date"
+        data-testid="pagination-date-picker"
+        :placeholder="props.placeholder"
+        @change="updateDate"
       />
     </template>
   </PaginationDisplayItemColumn>

src/components/displays/pagination/templates/PaginationDisplayTemplateDates.vue

@@ -9,6 +9,8 @@ import PaginationDisplayTemplateButton
   from "@/components/displays/pagination/templates/PaginationDisplayTemplateButton.vue";
 import { datePresets , dateFunctions} from '@/components/displays/pagination/PaginationDisplayDates.vue';
 
+const DATE_FILTER_PLACEHOLDER = "--.--.----";
+
 defineProps({
   startDate: {
     type: Date,
@@ -47,6 +49,23 @@ function updateEndDate(date: Date) {
   endDateModel.value = date;
   emits('update:endDate', date);
 }
+
+function getPresetRange(preset: { getRange: () => { start: Date; end: Date } }) {
+  return preset.getRange();
+}
+
+function isPresetSelected(preset: { getRange: () => { start: Date; end: Date } }) {
+  return dateFunctions.dateComparison.match.dates(
+    { start: startDateModel.value, end: endDateModel.value },
+    getPresetRange(preset),
+  );
+}
+
+function applyPreset(preset: { getRange: () => { start: Date; end: Date } }) {
+  const range = getPresetRange(preset);
+  updateStartDate(new Date(range.start.getTime()));
+  updateEndDate(new Date(range.end.getTime()));
+}
 </script>
 
 <template>
@@ -54,23 +73,19 @@ function updateEndDate(date: Date) {
       :label="SessionUser.objects.global.language.date_from"
       @update:date="updateStartDate"
       v-bind:model-value="startDateModel"
+      :placeholder="DATE_FILTER_PLACEHOLDER"
   />
   <PaginationDisplayTemplateDate
       :label="SessionUser.objects.global.language.date_to"
       @update:date="updateEndDate"
       v-bind:model-value="endDateModel"
+      :placeholder="DATE_FILTER_PLACEHOLDER"
   />
   <template v-for="preset in datePresets" :key="preset.labelKey">
     <PaginationDisplayTemplateButton
         :label="t(preset.labelKey)"
-        v-bind:selected="dateFunctions.dateComparison.match.dates(
-          { start: startDateModel, end: endDateModel },
-          preset,
-        )"
-        @click="() => {
-          updateStartDate(preset.start);
-          updateEndDate(preset.end);
-        }"
+        v-bind:selected="isPresetSelected(preset)"
+        @click="applyPreset(preset)"
     />
   </template>
 

src/components/displays/selectors/SubuserGrantPermissionNodes.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { BCheckbox, BField } from "buefy";
-import { onMounted, ref, watch } from "vue";
+import { BCheckbox } from "buefy";
+import { computed, onMounted, ref, watch } from "vue";
+import i18n from "@/i18n";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 
 const props = defineProps({
   grant: {
-    type: Object as () => { id: number; permissions: string[]; name: string },
-    default: () => ({ id: 0, permissions: [], name: "" }),
+    type: Object as () => { id: number; permissions: string[]; name: string; permission_template_key?: string },
+    default: () => ({ id: 0, permissions: [], name: "", permission_template_key: "custom" }),
     required: true,
   },
   permissions: {
@@ -14,59 +15,182 @@ const props = defineProps({
     default: () => [],
     required: true,
   },
+  templateKey: {
+    type: String,
+    default: null,
+  },
+  allowAdvanced: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-type PermissionNode = {
+type PermissionGroup = {
   key: string;
-  name: string;
-  description: string;
-  type: string;
-  default: boolean;
+  capabilities: string[];
 };
 
-type PermissionNodeGroup = {
-  group: string;
+type PermissionTemplate = {
+  key: string;
+  label: string;
   description: string;
-  nodes: PermissionNode[];
+  enabled: boolean;
+  permissions: string[];
+  permission_groups: PermissionGroup[];
 };
 
-const permissionNodes = ref<PermissionNodeGroup[]>([]);
+const t = (key: string, values: Record<string, string> | undefined = undefined) => i18n.global.t(key, values);
+
+const LEGACY_PERMISSION_GROUPS: PermissionGroup[] = [
+  {
+    key: "vehicles",
+    capabilities: ["VEHICLES_LIST", "VEHICLES_EDIT", "VEHICLES_DELETE", "VEHICLES_ADD"],
+  },
+  {
+    key: "selfserve",
+    capabilities: ["SELFSERVE_LIST", "SELFSERVE_EDIT", "SELFSERVE_DELETE", "SELFSERVE_ADD"],
+  },
+  {
+    key: "bookings",
+    capabilities: ["BOOKINGS_LIST", "BOOKINGS_EDIT", "BOOKINGS_DELETE", "BOOKINGS_ADD"],
+  },
+  {
+    key: "orders",
+    capabilities: ["ORDERS_LIST", "ORDERS_EDIT"],
+  },
+  {
+    key: "driver_management",
+    capabilities: ["SUBUSERS_LIST", "SUBUSERS_EDIT", "SUBUSERS_DELETE", "SUBUSERS_ADD"],
+  },
+];
+
+const LEGACY_PERMISSION_LABEL_KEYS: Record<string, string> = {
+  VEHICLES_LIST: "view_vehicles",
+  VEHICLES_EDIT: "edit_vehicles",
+  VEHICLES_DELETE: "delete_vehicles",
+  VEHICLES_ADD: "add_vehicles",
+  SELFSERVE_LIST: "view_selfserve",
+  SELFSERVE_EDIT: "edit_selfserve",
+  SELFSERVE_DELETE: "delete_selfserve",
+  SELFSERVE_ADD: "start_selfserve",
+  BOOKINGS_LIST: "view_bookings",
+  BOOKINGS_EDIT: "edit_bookings",
+  BOOKINGS_DELETE: "delete_bookings",
+  BOOKINGS_ADD: "add_bookings",
+  ORDERS_LIST: "view_orders",
+  ORDERS_EDIT: "edit_orders",
+  SUBUSERS_LIST: "view_drivers",
+  SUBUSERS_EDIT: "edit_driver_access",
+  SUBUSERS_DELETE: "disable_driver_access",
+  SUBUSERS_ADD: "invite_drivers",
+};
+
+const templates = ref<PermissionTemplate[]>([]);
 const selectedPermissions = ref<string[]>([]);
+const selectedTemplateKey = ref<string>(props.templateKey || props.grant.permission_template_key || "custom");
 const isLoading = ref(true);
 
-const emit = defineEmits(["update:permissions"]);
+const emit = defineEmits(["update:permissions", "update:access"]);
 
-const syncPermissions = (value: string[]) => {
-  selectedPermissions.value = [...new Set((value || []).filter(Boolean))];
+const normalizePermissions = (value: string[]) => [...new Set((value || []).filter(Boolean).map((item) => String(item).toUpperCase()))];
+
+const samePermissions = (left: string[], right: string[]) => {
+  const a = normalizePermissions(left).sort();
+  const b = normalizePermissions(right).sort();
+  return a.length === b.length && a.every((value, index) => value === b[index]);
 };
 
-const togglePermission = (permissionKey: string, enabled: boolean) => {
-  if (enabled) {
-    selectedPermissions.value = [...new Set([...selectedPermissions.value, permissionKey])];
+const findTemplate = (key: string | null | undefined) => templates.value.find((template) => template.key === key) || null;
+
+const classifyTemplate = (permissions: string[]) => {
+  if (permissions.length === 0) {
+    return "deactivated";
+  }
+
+  const match = templates.value.find((template) => template.key !== "deactivated" && samePermissions(template.permissions, permissions));
+  return match?.key || "custom";
+};
+
+const emitAccess = () => {
+  emit("update:permissions", [...selectedPermissions.value]);
+  emit("update:access", {
+    permission_template_key: selectedTemplateKey.value,
+    permissions: [...selectedPermissions.value],
+  });
+};
+
+const syncPermissions = (value: string[]) => {
+  selectedPermissions.value = normalizePermissions(value);
+  if (templates.value.length > 0 && (!props.templateKey || props.templateKey === "custom")) {
+    selectedTemplateKey.value = classifyTemplate(selectedPermissions.value);
+  }
+};
+
+const selectTemplate = (key: string) => {
+  if (key === "custom") {
+    selectedTemplateKey.value = "custom";
+    emitAccess();
     return;
   }
 
-  selectedPermissions.value = selectedPermissions.value.filter((value) => value !== permissionKey);
+  const template = findTemplate(key);
+  if (!template) {
+    return;
+  }
+
+  selectedTemplateKey.value = template.key;
+  selectedPermissions.value = normalizePermissions(template.permissions);
+  emitAccess();
+};
+
+const togglePermission = (permissionKey: string, enabled: boolean) => {
+  selectedTemplateKey.value = "custom";
+  if (enabled) {
+    selectedPermissions.value = [...new Set([...selectedPermissions.value, permissionKey])];
+  } else {
+    selectedPermissions.value = selectedPermissions.value.filter((value) => value !== permissionKey);
+  }
+  emitAccess();
+};
+
+const visibleTemplates = computed(() => templates.value.filter((template) => template.key !== "custom"));
+const activeTemplate = computed(() => findTemplate(selectedTemplateKey.value));
+const showAdvanced = computed(() => props.allowAdvanced && selectedTemplateKey.value === "custom");
+
+const templateLabel = (key: string, _fallback = "") => t(`superuser.driver_access.templates.${key}.label`);
+const templateDescription = (template: PermissionTemplate) =>
+  t(`superuser.driver_access.templates.${template.key}.description`);
+const groupLabel = (key: string) => t(`superuser.driver_access.groups.${key}`);
+const permissionLabel = (permission: string) => {
+  const capabilityKey = LEGACY_PERMISSION_LABEL_KEYS[permission] || permission;
+  return t(`superuser.driver_access.capabilities.${capabilityKey}`);
 };
 
 watch(
   () => props.permissions,
   (newPermissions) => {
     syncPermissions(newPermissions || []);
+    emitAccess();
   },
   { immediate: true }
 );
 
-watch(selectedPermissions, (newPermissions) => {
-  emit("update:permissions", [...newPermissions]);
-});
-
 onMounted(async () => {
   try {
-    permissionNodes.value = await SessionUser.objects.subuser_grants.functions.getPermissionNodes();
+    const accessModel = await SessionUser.objects.subuser_grants.functions.getPermissionTemplates();
+    templates.value = Array.isArray(accessModel?.templates) ? accessModel.templates : [];
+    selectedTemplateKey.value = props.templateKey || props.grant.permission_template_key || classifyTemplate(selectedPermissions.value);
+    if (selectedTemplateKey.value !== "custom") {
+      const template = findTemplate(selectedTemplateKey.value);
+      if (template) {
+        selectedPermissions.value = normalizePermissions(template.permissions);
+      }
+    }
+    emitAccess();
   } catch (error) {
-    console.error("Failed to fetch permission nodes:", error);
-    permissionNodes.value = [];
+    console.error("Failed to fetch permission templates:", error);
+    templates.value = [];
+    selectedTemplateKey.value = "custom";
   } finally {
     isLoading.value = false;
   }
@@ -75,42 +199,66 @@ onMounted(async () => {
 
 <template>
   <div>
-    <h2 class="title is-4">Tilladelsesnoder for {{ props.grant.name }}</h2>
+    <h2 class="title is-4">{{ t("superuser.driver_access.editor_title", { name: props.grant.name }) }}</h2>
     <p class="mb-4 has-text-grey">
-      Vælg tilladelserne og tryk derefter på Gem i dialogen for at opdatere chaufføren.
+      {{ t("superuser.driver_access.editor_intro") }}
     </p>
 
     <div v-if="isLoading" class="notification is-light">
-      Henter tilladelser...
+      {{ t("superuser.driver_access.loading") }}
     </div>
 
-    <div v-else-if="permissionNodes.length === 0" class="notification is-warning is-light">
-      Ingen tilladelsesnoder blev fundet.
+    <div v-else-if="visibleTemplates.length === 0" class="notification is-warning is-light">
+      {{ t("superuser.driver_access.empty") }}
     </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>
-        </div>
-      </div>
+    <div v-else class="driver-access-editor">
+      <button
+        v-for="template in visibleTemplates"
+        :key="template.key"
+        type="button"
+        class="driver-access-card"
+        :class="{ 'driver-access-card--selected': selectedTemplateKey === template.key }"
+        :data-testid="`permission-template-${template.key}`"
+        @click="selectTemplate(template.key)"
+      >
+        <span class="driver-access-card__title">{{ templateLabel(template.key, template.label) }}</span>
+        <span class="driver-access-card__description">{{ templateDescription(template) }}</span>
+        <span v-if="selectedTemplateKey === template.key" class="tag is-success is-light">{{ t("superuser.driver_access.selected") }}</span>
+      </button>
 
-      <div class="columns is-multiline">
-        <div v-for="node in group.nodes" :key="node.key" class="column is-4">
-          <div class="box permission-node">
-            <h4 class="title is-6">{{ node.name }}</h4>
-            <p class="subtitle is-7">{{ node.description }}</p>
-            <b-field class="permission-checkbox">
-              <b-checkbox
-                :model-value="selectedPermissions.includes(node.key)"
-                :data-testid="`permission-node-checkbox-${node.key}`"
-                @update:model-value="(checked) => togglePermission(node.key, !!checked)"
-                @input="(checked) => togglePermission(node.key, !!checked)"
-              >
-                Aktiver
-              </b-checkbox>
-            </b-field>
+      <button
+        v-if="allowAdvanced"
+        type="button"
+        class="driver-access-card"
+        :class="{ 'driver-access-card--selected': selectedTemplateKey === 'custom' }"
+        data-testid="permission-template-custom"
+        @click="selectTemplate('custom')"
+      >
+        <span class="driver-access-card__title">{{ templateLabel("custom") }}</span>
+        <span class="driver-access-card__description">{{ t("superuser.driver_access.custom_description") }}</span>
+        <span v-if="selectedTemplateKey === 'custom'" class="tag is-warning is-light">{{ t("superuser.driver_access.advanced") }}</span>
+      </button>
+    </div>
+
+    <div v-if="activeTemplate && selectedTemplateKey !== 'custom'" class="notification is-info is-light mt-4">
+      <strong>{{ templateLabel(activeTemplate.key, activeTemplate.label) }}</strong>
+      <p>{{ templateDescription(activeTemplate) }}</p>
+    </div>
+
+    <div v-if="showAdvanced" class="advanced-access mt-5" data-testid="permission-template-custom-editor">
+      <div v-for="group in LEGACY_PERMISSION_GROUPS" :key="group.key" class="box">
+        <h3 class="title is-6">{{ groupLabel(group.key) }}</h3>
+        <div class="columns is-multiline">
+          <div v-for="capability in group.capabilities" :key="capability" class="column is-6">
+            <b-checkbox
+              :model-value="selectedPermissions.includes(capability)"
+              :data-testid="`permission-node-checkbox-${capability}`"
+              @update:model-value="(checked) => togglePermission(capability, !!checked)"
+              @input="(checked) => togglePermission(capability, !!checked)"
+            >
+              {{ permissionLabel(capability) }}
+            </b-checkbox>
           </div>
         </div>
       </div>
@@ -119,15 +267,44 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-.permission-node {
-  height: 100%;
+.driver-access-editor {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }
 
-.permission-checkbox {
-  margin-top: 0.75rem;
+.driver-access-card {
+  align-items: flex-start;
+  background: #fff;
+  border: 1px solid #dbdbdb;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  min-height: 150px;
+  padding: 1rem;
+  text-align: left;
 }
 
-.permission-checkbox :deep(.field) {
-  margin-bottom: 0;
+.driver-access-card:hover,
+.driver-access-card--selected {
+  border-color: #3273dc;
+  box-shadow: 0 0 0 1px #3273dc;
+}
+
+.driver-access-card__title {
+  color: #1f2933;
+  font-weight: 700;
+}
+
+.driver-access-card__description {
+  color: #4a4a4a;
+  font-size: 0.9rem;
+  line-height: 1.35;
+}
+
+.advanced-access :deep(.checkbox) {
+  line-height: 1.35;
 }
 </style>

src/components/displays/superuser/overview/SuperuserOverviewActionGrid.vue

@@ -0,0 +1,72 @@
+<script setup>
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="superuser-overview-action-grid">
+    <slot name="before"></slot>
+    <template v-for="item in props.items" :key="item.key">
+      <router-link
+        v-if="item.to"
+        class="superuser-overview-action-grid__item"
+        :to="item.to"
+        :data-testid="item.testId"
+      >
+        <span class="icon" v-if="item.icon"><i :class="item.icon" /></span>
+        <span>{{ item.label }}</span>
+      </router-link>
+      <button
+        v-else
+        type="button"
+        class="superuser-overview-action-grid__item"
+        :data-testid="item.testId"
+        @click="item.onClick?.()"
+      >
+        <span class="icon" v-if="item.icon"><i :class="item.icon" /></span>
+        <span>{{ item.label }}</span>
+      </button>
+    </template>
+    <slot name="after"></slot>
+  </div>
+</template>
+
+<style scoped>
+.superuser-overview-action-grid {
+  display: grid;
+  gap: 0.6rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.superuser-overview-action-grid__item {
+  align-items: center;
+  background: #ffffff;
+  border: 1px solid #dbe3ec;
+  border-radius: 8px;
+  color: #1e293b;
+  cursor: pointer;
+  display: inline-flex;
+  font-weight: 800;
+  gap: 0.5rem;
+  justify-content: flex-start;
+  min-height: 3rem;
+  padding: 0 0.85rem;
+  text-align: left;
+}
+
+.superuser-overview-action-grid__item:hover,
+.superuser-overview-action-grid__item:focus {
+  border-color: #0f766e;
+  color: #0f766e;
+}
+
+@media (max-width: 640px) {
+  .superuser-overview-action-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

src/components/displays/superuser/overview/SuperuserOverviewDefinitionList.vue

@@ -0,0 +1,75 @@
+<script setup>
+const props = defineProps({
+  rows: {
+    type: Array,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <dl class="superuser-overview-definition-list">
+    <div v-for="row in props.rows" :key="row.key || row.label" class="superuser-overview-definition-list__row">
+      <dt>{{ row.label }}</dt>
+      <dd>
+        <b-tooltip
+          v-if="row.tooltip"
+          :label="row.tooltip"
+          multilined
+          position="is-bottom"
+          type="is-dark"
+        >
+          <span>{{ row.value }}</span>
+        </b-tooltip>
+        <span v-else>{{ row.value }}</span>
+      </dd>
+    </div>
+  </dl>
+</template>
+
+<style scoped>
+.superuser-overview-definition-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  margin: 0;
+}
+
+.superuser-overview-definition-list__row {
+  align-items: center;
+  border-top: 1px solid #edf2f7;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  min-height: 3.25rem;
+  padding-top: 0.55rem;
+}
+
+.superuser-overview-definition-list__row dt {
+  color: #64748b;
+  font-size: 0.82rem;
+  margin: 0;
+}
+
+.superuser-overview-definition-list__row dd {
+  color: #0f172a;
+  font-weight: 800;
+  margin: 0;
+  max-width: 58%;
+  overflow-wrap: anywhere;
+  text-align: right;
+}
+
+@media (max-width: 640px) {
+  .superuser-overview-definition-list__row {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.35rem;
+  }
+
+  .superuser-overview-definition-list__row dd {
+    max-width: 100%;
+    text-align: left;
+  }
+}
+</style>

src/components/displays/superuser/overview/SuperuserOverviewMetricCard.vue

@@ -0,0 +1,202 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  actionIcon: {
+    type: String,
+    default: "fas fa-exchange-alt",
+  },
+  actionLabel: {
+    type: String,
+    default: "",
+  },
+  actionTestId: {
+    type: String,
+    default: "superuser-overview-metric-card-action",
+  },
+  actionable: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  icon: {
+    type: String,
+    default: "",
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  value: {
+    type: [String, Number],
+    required: true,
+  },
+  secondary: {
+    type: String,
+    default: "",
+  },
+  status: {
+    type: String,
+    default: "",
+  },
+  tone: {
+    type: String,
+    default: "",
+  },
+  valueTestId: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["click"]);
+
+const rootTag = computed(() => (props.actionable ? "button" : "article"));
+
+const onClick = (event) => {
+  if (!props.actionable || props.disabled) {
+    return;
+  }
+
+  emit("click", event);
+};
+</script>
+
+<template>
+  <component
+    :is="rootTag"
+    class="superuser-overview-metric-card"
+    :class="{ 'superuser-overview-metric-card--actionable': props.actionable }"
+    :type="props.actionable ? 'button' : undefined"
+    :disabled="props.actionable ? props.disabled : undefined"
+    @click="onClick"
+  >
+    <div class="superuser-overview-metric-card__icon" v-if="props.icon">
+      <i :class="props.icon" />
+    </div>
+    <div class="superuser-overview-metric-card__content">
+      <div class="superuser-overview-metric-card__top">
+        <span class="superuser-overview-metric-card__label">{{ props.label }}</span>
+        <span v-if="props.status" class="tag is-light" :class="props.tone">{{ props.status }}</span>
+      </div>
+      <strong class="superuser-overview-metric-card__value" :data-testid="props.valueTestId || undefined">
+        {{ props.value }}
+      </strong>
+      <span v-if="props.secondary" class="superuser-overview-metric-card__secondary">{{ props.secondary }}</span>
+      <span
+        v-if="props.actionLabel"
+        class="superuser-overview-metric-card__action"
+        :data-testid="props.actionTestId"
+      >
+        <span class="icon is-small">
+          <i :class="props.actionIcon" aria-hidden="true"></i>
+        </span>
+        <span>{{ props.actionLabel }}</span>
+      </span>
+    </div>
+  </component>
+</template>
+
+<style scoped>
+.superuser-overview-metric-card {
+  align-items: center;
+  appearance: none;
+  background: #ffffff;
+  border: 1px solid #dbe3ec;
+  border-radius: 8px;
+  display: flex;
+  font: inherit;
+  gap: 0.75rem;
+  min-height: 6rem;
+  padding: 1rem;
+  text-align: left;
+  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
+  width: 100%;
+}
+
+.superuser-overview-metric-card--actionable {
+  cursor: pointer;
+}
+
+.superuser-overview-metric-card--actionable:hover,
+.superuser-overview-metric-card--actionable:focus-visible {
+  background: #f8fafc;
+  border-color: #94a3b8;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+  transform: translateY(-1px);
+}
+
+.superuser-overview-metric-card--actionable:focus-visible {
+  outline: 2px solid #0f766e;
+  outline-offset: 2px;
+}
+
+.superuser-overview-metric-card--actionable:disabled {
+  cursor: default;
+  opacity: 0.7;
+}
+
+.superuser-overview-metric-card__icon {
+  align-items: center;
+  background: #ecfeff;
+  border-radius: 8px;
+  color: #0f766e;
+  display: inline-flex;
+  height: 2.5rem;
+  justify-content: center;
+  width: 2.5rem;
+}
+
+.superuser-overview-metric-card__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.superuser-overview-metric-card__top {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+}
+
+.superuser-overview-metric-card__label,
+.superuser-overview-metric-card__secondary {
+  color: #64748b;
+  font-size: 0.82rem;
+}
+
+.superuser-overview-metric-card__value {
+  color: #0f172a;
+  font-size: 1.35rem;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.superuser-overview-metric-card__action {
+  align-items: center;
+  color: #0f766e;
+  display: inline-flex;
+  font-size: 0.82rem;
+  font-weight: 800;
+  gap: 0.25rem;
+  margin-top: 0.4rem;
+  opacity: 0;
+  transition: opacity 140ms ease;
+}
+
+.superuser-overview-metric-card--actionable:hover .superuser-overview-metric-card__action,
+.superuser-overview-metric-card--actionable:focus-visible .superuser-overview-metric-card__action {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .superuser-overview-metric-card--actionable .superuser-overview-metric-card__action {
+    opacity: 1;
+  }
+}
+</style>

src/components/displays/superuser/overview/SuperuserOverviewMetricGrid.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { computed } from "vue";
+
+import SuperuserOverviewMetricCard from "@/components/displays/superuser/overview/SuperuserOverviewMetricCard.vue";
+
+const props = defineProps({
+  columns: {
+    type: Number,
+    default: 4,
+  },
+  metrics: {
+    type: Array,
+    required: true,
+  },
+  testId: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["metric-click"]);
+
+const gridStyle = computed(() => ({
+  "--superuser-overview-metric-grid-columns": Math.max(1, props.columns),
+}));
+
+const handleMetricClick = (metric, event) => {
+  emit("metric-click", metric, event);
+};
+</script>
+
+<template>
+  <div
+    class="superuser-overview-metric-grid"
+    :data-testid="props.testId || undefined"
+    :style="gridStyle"
+  >
+    <SuperuserOverviewMetricCard
+      v-for="metric in props.metrics"
+      :key="metric.key"
+      :action-icon="metric.actionIcon"
+      :action-label="metric.actionLabel"
+      :action-test-id="metric.actionTestId"
+      :actionable="Boolean(metric.actionable)"
+      :disabled="Boolean(metric.disabled)"
+      :icon="metric.icon"
+      :label="metric.label"
+      :secondary="metric.secondary"
+      :status="metric.status"
+      :tone="metric.tone"
+      :value="metric.value"
+      :value-test-id="metric.valueTestId"
+      :data-testid="metric.testId"
+      @click="handleMetricClick(metric, $event)"
+    />
+  </div>
+</template>
+
+<style scoped>
+.superuser-overview-metric-grid {
+  align-items: stretch;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(var(--superuser-overview-metric-grid-columns), minmax(0, 1fr));
+  min-width: 0;
+}
+
+@media (max-width: 1024px) {
+  .superuser-overview-metric-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .superuser-overview-metric-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

src/components/displays/superuser/overview/SuperuserOverviewPanel.vue

@@ -0,0 +1,87 @@
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  subtitle: {
+    type: String,
+    default: "",
+  },
+  count: {
+    type: [String, Number],
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <section class="superuser-overview-panel">
+    <header class="superuser-overview-panel__header">
+      <div class="superuser-overview-panel__copy">
+        <h2>{{ props.title }}</h2>
+        <p v-if="props.subtitle">{{ props.subtitle }}</p>
+      </div>
+      <div class="superuser-overview-panel__actions">
+        <span v-if="props.count !== null && props.count !== undefined" class="superuser-overview-panel__count">
+          {{ props.count }}
+        </span>
+        <slot name="actions"></slot>
+      </div>
+    </header>
+    <div class="superuser-overview-panel__content">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.superuser-overview-panel {
+  background: #ffffff;
+  border: 1px solid #dbe3ec;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.superuser-overview-panel__header {
+  align-items: flex-start;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.superuser-overview-panel__copy h2 {
+  color: #0f172a;
+  font-size: 1.05rem;
+  font-weight: 800;
+  margin: 0;
+}
+
+.superuser-overview-panel__copy p {
+  color: #64748b;
+  font-size: 0.82rem;
+  margin: 0.2rem 0 0;
+}
+
+.superuser-overview-panel__actions {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.superuser-overview-panel__count {
+  align-items: center;
+  background: #f1f5f9;
+  border: 1px solid #dbe3ec;
+  border-radius: 999px;
+  color: #334155;
+  display: inline-flex;
+  font-weight: 800;
+  justify-content: center;
+  min-width: 2rem;
+  padding: 0.2rem 0.55rem;
+}
+</style>

src/components/displays/superuser/overview/SuperuserOverviewPanelGrid.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  columns: {
+    type: Number,
+    default: 2,
+  },
+  testId: {
+    type: String,
+    default: "",
+  },
+});
+
+const gridStyle = computed(() => ({
+  "--superuser-overview-panel-grid-columns": Math.max(1, props.columns),
+}));
+</script>
+
+<template>
+  <div
+    class="superuser-overview-panel-grid"
+    :data-testid="props.testId || undefined"
+    :style="gridStyle"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.superuser-overview-panel-grid {
+  align-items: start;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(var(--superuser-overview-panel-grid-columns), minmax(0, 1fr));
+  min-width: 0;
+}
+
+@media (max-width: 768px) {
+  .superuser-overview-panel-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

src/components/displays/superuser/overview/SuperuserOverviewSegmentedTabs.vue

@@ -0,0 +1,117 @@
+<script setup>
+const props = defineProps({
+  activeKey: {
+    type: [String, Number],
+    default: "",
+  },
+  ariaLabel: {
+    type: String,
+    default: "",
+  },
+  items: {
+    type: Array,
+    required: true,
+  },
+  testId: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["change"]);
+
+const itemKey = (item) => item.key ?? item.path ?? item.to ?? item.name ?? item.label;
+const isActive = (item) => String(itemKey(item)) === String(props.activeKey);
+const itemTestId = (item) => item.testId || undefined;
+
+const changeItem = (item) => {
+  if (item.disabled) {
+    return;
+  }
+
+  emit("change", item);
+};
+</script>
+
+<template>
+  <nav
+    class="superuser-overview-segmented-tabs"
+    :aria-label="props.ariaLabel || undefined"
+    :data-testid="props.testId || undefined"
+  >
+    <template v-for="item in props.items" :key="itemKey(item)">
+      <router-link
+        v-if="item.to"
+        class="superuser-overview-segmented-tabs__item"
+        :class="{ 'is-active': isActive(item), 'is-disabled': item.disabled }"
+        :to="item.to"
+        :aria-current="isActive(item) ? 'page' : undefined"
+        :data-testid="itemTestId(item)"
+      >
+        <span v-if="item.icon" class="icon is-small"><i :class="item.icon" /></span>
+        <span>{{ item.label }}</span>
+      </router-link>
+      <button
+        v-else
+        class="superuser-overview-segmented-tabs__item"
+        :class="{ 'is-active': isActive(item), 'is-disabled': item.disabled }"
+        type="button"
+        :disabled="item.disabled"
+        :aria-current="isActive(item) ? 'page' : undefined"
+        :data-testid="itemTestId(item)"
+        @click="changeItem(item)"
+      >
+        <span v-if="item.icon" class="icon is-small"><i :class="item.icon" /></span>
+        <span>{{ item.label }}</span>
+      </button>
+    </template>
+  </nav>
+</template>
+
+<style scoped>
+.superuser-overview-segmented-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.superuser-overview-segmented-tabs__item {
+  align-items: center;
+  background: #f8fafc;
+  border: 1px solid #dbe3ec;
+  border-radius: 8px;
+  color: #334155;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: 0.88rem;
+  font-weight: 800;
+  gap: 0.35rem;
+  min-height: 2.5rem;
+  padding: 0 0.75rem;
+  text-decoration: none;
+}
+
+.superuser-overview-segmented-tabs__item:hover,
+.superuser-overview-segmented-tabs__item:focus-visible {
+  border-color: #94a3b8;
+  color: #0f172a;
+}
+
+.superuser-overview-segmented-tabs__item:focus-visible {
+  outline: 2px solid #0f766e;
+  outline-offset: 2px;
+}
+
+.superuser-overview-segmented-tabs__item.is-active {
+  background: #0f172a;
+  border-color: #0f172a;
+  color: #ffffff;
+}
+
+.superuser-overview-segmented-tabs__item.is-disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+</style>

src/components/displays/superuser/system/SystemStatusDashboard.vue

@@ -1117,6 +1117,7 @@ function modulePath(key) {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: start;
+  justify-content: stretch;
   column-gap: 0.75rem;
   row-gap: 0.35rem;
 }
@@ -1131,6 +1132,7 @@ function modulePath(key) {
 
 .module-card__title {
   margin: 0;
+  flex: 1 1 12rem;
   min-width: 0;
   text-transform: none;
   letter-spacing: 0.04em;
@@ -1140,7 +1142,7 @@ function modulePath(key) {
 
 .module-card__top .status-pill {
   justify-self: end;
-  align-self: start;
+  margin-left: 0;
 }
 
 .gateway-card__title {

src/components/displays/superuser/tables/CollectedOrderInvoicesDefaultTable.vue

@@ -7,6 +7,7 @@ const { t } = useI18n();
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
 import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
+import SuperuserInvoiceRowActions from "@/components/displays/superuser/tables/SuperuserInvoiceRowActions.vue";
 
 const props = defineProps({
   objects: {
@@ -65,8 +66,8 @@ const parseClosedAt = (value) => {
         <td>{{ parseClosedAt(object.closed_at) }}</td>
         <td>{{ parseDate(object.created_at) }}</td>
         <td>{{ parseDate(object.updated_at) }}</td>
-        <td>
-          <div class="buttons is-float-right">
+        <td class="is-narrow">
+          <SuperuserInvoiceRowActions :include-buffer="true">
             <ActionSettingsWheelButton>
               <template #actions>
                 <ActionSettingsWheelItem
@@ -76,7 +77,7 @@ const parseClosedAt = (value) => {
                 />
               </template>
             </ActionSettingsWheelButton>
-          </div>
+          </SuperuserInvoiceRowActions>
         </td>
       </tr>
       <tr v-if="objects.length === 0">

src/components/displays/superuser/tables/SubusersTable.vue

@@ -1,7 +1,9 @@
 <script setup>
+import { ref } from "vue";
 import Swal from "sweetalert2";
 import { usePaginatedListInstance } from "@/components/pagination/paginatedList.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
 import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
 import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
 
@@ -14,9 +16,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  userScopedUserId: {
+    type: [String, Number],
+    default: null,
+  },
 });
 
 const { loadList } = usePaginatedListInstance();
+const expandedSubusers = ref(new Set());
 
 const canEditPermissions = () =>
   props.showCustomer ? SessionUser.canAccessSuperUser() : SessionUser.canManageSubusers("edit");
@@ -25,8 +32,70 @@ const canDisableAccess = () =>
 const canResendInvite = (subuser) =>
   (props.showCustomer ? SessionUser.canAccessSuperUser() : SessionUser.canManageSubusers("edit"))
   && Boolean(subuser?.can_resend_invite ?? subuser?.setup_required);
-const hasRowActions = (subuser) =>
+const hasActionsForContext = (subuser) =>
   (canEditPermissions() && subuser?.grant_id) || canResendInvite(subuser) || (canDisableAccess() && subuser?.grant_id);
+const hasRowActions = (subuser) => rowGrants(subuser).length <= 1 && hasActionsForContext(subuser);
+const hasGrantActions = (subuser, grant) => hasActionsForContext(grantContext(subuser, grant));
+
+const isUserScoped = () => Boolean(props.userScopedUserId);
+
+const rowGrants = (subuser) => {
+  if (Array.isArray(subuser?.grants) && subuser.grants.length > 0) {
+    return subuser.grants;
+  }
+
+  return subuser?.grant_id ? [subuser] : [];
+};
+
+const primaryGrant = (subuser) => rowGrants(subuser)[0] || subuser;
+
+const grantContext = (subuser, grant) => ({
+  ...subuser,
+  ...grant,
+  grants: subuser?.grants || [],
+  grant_count: subuser?.grant_count || rowGrants(subuser).length,
+  customer_numbers: subuser?.customer_numbers || [],
+});
+
+const isExpanded = (subuser) => expandedSubusers.value.has(subuser?.id);
+
+const toggleExpanded = (subuser) => {
+  const next = new Set(expandedSubusers.value);
+  if (next.has(subuser.id)) {
+    next.delete(subuser.id);
+  } else {
+    next.add(subuser.id);
+  }
+  expandedSubusers.value = next;
+};
+
+const hasMultipleGrants = (subuser) => rowGrants(subuser).length > 1;
+
+const scopedGrantEndpoint = (grantId) =>
+  `/superuser/users/${encodeURIComponent(props.userScopedUserId)}/subusers/grants/${encodeURIComponent(grantId)}`;
+
+const patchScopedGrant = async (subuser, payload) => {
+  if (!isUserScoped() || !subuser?.grant_id) {
+    return null;
+  }
+
+  return authenticatedRequest(scopedGrantEndpoint(subuser.grant_id), "PATCH", payload);
+};
+
+const patchGrant = async (subuser, payload) => {
+  if (!subuser?.grant_id) {
+    return null;
+  }
+
+  if (isUserScoped()) {
+    return patchScopedGrant(subuser, payload);
+  }
+
+  return authenticatedRequest("/subusers/grants", "PUT", {
+    id: subuser.grant_id,
+    ...payload,
+  });
+};
 
 const formatDateTime = (dateString) => {
   if (!dateString) {
@@ -71,7 +140,11 @@ const formatCustomer = (subuser) => {
 };
 
 const permissionSummary = (subuser) =>
-  SessionUser.objects.subusers.functions.permissionSummary(subuser?.grant_permissions || []);
+  SessionUser.objects.subusers.functions.permissionSummary(
+    primaryGrant(subuser)?.grant_permissions || [],
+    primaryGrant(subuser)?.permission_template_key,
+    primaryGrant(subuser)?.permission_groups || []
+  );
 
 const statusLabel = (subuser) => {
   switch (subuser?.access_state) {
@@ -114,7 +187,20 @@ const onEditPermissions = async (subuser) => {
       permissions: subuser.grant_permissions || [],
       name: subuser.name || formatPhone(subuser) || `Chauffør ${subuser.id}`,
     },
-    refreshList
+    refreshList,
+    isUserScoped()
+      ? {
+          allowAdvanced: true,
+          saveAccess: async (payload) => {
+            await patchGrant(subuser, payload);
+          },
+        }
+      : {
+          allowAdvanced: props.showCustomer,
+          saveAccess: async (payload) => {
+            await patchGrant(subuser, payload);
+          },
+        }
   );
 };
 
@@ -134,9 +220,13 @@ const onEditNote = async (subuser) => {
     cancelButtonText: "Annuller",
     preConfirm: async (value) => {
       try {
-        await SessionUser.objects.subuser_grants.set.note(subuser.grant_id, value || "");
+        if (isUserScoped()) {
+          await patchScopedGrant(subuser, { note: value || "" });
+        } else {
+          await SessionUser.objects.subuser_grants.set.note(subuser.grant_id, value || "");
+        }
         return value || "";
-      } catch (error) {
+      } catch (_error) {
         Swal.showValidationMessage("Kunne ikke gemme noten.");
         return false;
       }
@@ -168,7 +258,11 @@ const onToggleEnabled = async (subuser, enabled) => {
   }
 
   try {
-    await SessionUser.objects.subuser_grants.set.enabled(subuser.grant_id, enabled);
+    if (isUserScoped()) {
+      await patchScopedGrant(subuser, { enabled });
+    } else {
+      await SessionUser.objects.subuser_grants.set.enabled(subuser.grant_id, enabled);
+    }
     await refreshList();
   } catch (error) {
     await Swal.fire({
@@ -181,7 +275,10 @@ const onToggleEnabled = async (subuser, enabled) => {
 };
 
 const onResendInvite = async (subuser) => {
-  await SessionUser.objects.subusers.functions.resendInvite(subuser, refreshList, { superuser: props.showCustomer });
+  await SessionUser.objects.subusers.functions.resendInvite(subuser, refreshList, {
+    superuser: props.showCustomer || isUserScoped(),
+    userId: props.userScopedUserId,
+  });
 };
 </script>
 
@@ -207,90 +304,174 @@ const onResendInvite = async (subuser) => {
           <td :colspan="showCustomer ? 10 : 9" class="has-text-centered has-text-grey py-6">Ingen chauffører fundet.</td>
         </tr>
 
-        <tr v-for="subuser in props.objects" :key="`${subuser.id}-${subuser.grant_id || 'none'}`">
-          <td>{{ subuser.id }}</td>
+        <template v-for="subuser in props.objects" :key="subuser.id">
+          <tr>
+            <td>{{ subuser.id }}</td>
 
-          <td v-if="showCustomer">
-            <div class="has-text-weight-semibold">{{ formatCustomer(subuser) }}</div>
-            <div class="is-size-7 has-text-grey">Grant #{{ subuser.grant_id }}</div>
-          </td>
+            <td v-if="showCustomer">
+              <div v-if="hasMultipleGrants(subuser)">
+                <button
+                  type="button"
+                  class="button is-small is-light"
+                  :data-testid="`subuser-expand-${subuser.id}`"
+                  @click="toggleExpanded(subuser)"
+                >
+                  <span class="icon is-small">
+                    <i :class="isExpanded(subuser) ? 'fas fa-chevron-down' : 'fas fa-chevron-right'"></i>
+                  </span>
+                  <span>{{ rowGrants(subuser).length }} kunder</span>
+                </button>
+                <div class="is-size-7 has-text-grey mt-1">
+                  Primær: {{ formatCustomer(primaryGrant(subuser)) }}
+                </div>
+              </div>
+              <div v-else>
+                <div class="has-text-weight-semibold">{{ formatCustomer(primaryGrant(subuser)) }}</div>
+                <div class="is-size-7 has-text-grey">Grant #{{ primaryGrant(subuser).grant_id }}</div>
+              </div>
+            </td>
 
-          <td>
-            <div class="has-text-weight-semibold">{{ subuser.name || "-" }}</div>
-            <div class="is-size-7 has-text-grey" :data-testid="`subuser-username-${subuser.id}`">
-              {{ formatUsername(subuser) }}
-            </div>
-          </td>
+            <td>
+              <div class="has-text-weight-semibold">{{ subuser.name || "-" }}</div>
+              <div class="is-size-7 has-text-grey" :data-testid="`subuser-username-${subuser.id}`">
+                {{ formatUsername(subuser) }}
+              </div>
+            </td>
 
-          <td>
-            <div :data-testid="`subuser-email-${subuser.id}`">{{ formatEmail(subuser) }}</div>
-            <div class="is-size-7 has-text-grey" :data-testid="`subuser-phone-${subuser.id}`">
-              {{ formatPhone(subuser) }}
-            </div>
-          </td>
+            <td>
+              <div :data-testid="`subuser-email-${subuser.id}`">{{ formatEmail(subuser) }}</div>
+              <div class="is-size-7 has-text-grey" :data-testid="`subuser-phone-${subuser.id}`">
+                {{ 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>
+              <span class="tag" :class="statusClass(subuser)" :data-testid="`subuser-status-${subuser.id}`">
+                {{ statusLabel(subuser) }}
+              </span>
+              <div v-if="!hasMultipleGrants(subuser)" class="is-size-7 has-text-grey mt-2">
+                <span v-if="primaryGrant(subuser).grant_enabled">Grant aktiv</span>
+                <span v-else>Grant inaktiv</span>
+              </div>
+              <div v-else class="is-size-7 has-text-grey mt-2">
+                {{ rowGrants(subuser).filter((grant) => grant.grant_enabled).length }} aktive grants
+              </div>
+            </td>
 
-          <td>
-            <div class="permission-summary">{{ permissionSummary(subuser) }}</div>
-          </td>
+            <td>
+              <div class="permission-summary">{{ permissionSummary(subuser) }}</div>
+            </td>
 
-          <td>
-            <div>{{ subuser.grant_note || "-" }}</div>
-          </td>
+            <td>
+              <div>{{ primaryGrant(subuser).grant_note || "-" }}</div>
+            </td>
 
-          <td>{{ formatDateTime(subuser.created_at) }}</td>
-          <td>{{ formatDateTime(subuser.updated_at) }}</td>
+            <td>{{ formatDateTime(subuser.created_at) }}</td>
+            <td>{{ formatDateTime(subuser.updated_at) }}</td>
 
-          <td>
-            <div class="buttons is-justify-content-flex-end action-buttons" :data-testid="`subuser-actions-${subuser.id}`">
-              <ActionSettingsWheelButton v-if="hasRowActions(subuser)">
-                <template #actions>
-                  <ActionSettingsWheelItem
-                    v-if="canEditPermissions() && subuser.grant_id"
-                    icon="fas fa-pen"
-                    label="Redigér note"
-                    :click-action="() => onEditNote(subuser)"
-                    :test-id="`subuser-note-${subuser.id}`"
-                  />
+            <td>
+              <div class="buttons is-justify-content-flex-end action-buttons" :data-testid="`subuser-actions-${subuser.id}`">
+                <ActionSettingsWheelButton v-if="hasRowActions(subuser)">
+                  <template #actions>
+                    <ActionSettingsWheelItem
+                      v-if="canEditPermissions() && subuser.grant_id"
+                      icon="fas fa-pen"
+                      label="Redigér note"
+                      :click-action="() => onEditNote(subuser)"
+                      :test-id="`subuser-note-${subuser.id}`"
+                    />
 
-                  <ActionSettingsWheelItem
-                    v-if="canEditPermissions() && subuser.grant_id"
-                    icon="fas fa-user-shield"
-                    label="Tilladelser"
-                    :click-action="() => onEditPermissions(subuser)"
-                    :test-id="`subuser-permissions-${subuser.id}`"
-                  />
+                    <ActionSettingsWheelItem
+                      v-if="canEditPermissions() && subuser.grant_id"
+                      icon="fas fa-user-shield"
+                      label="Tilladelser"
+                      :click-action="() => onEditPermissions(subuser)"
+                      :test-id="`subuser-permissions-${subuser.id}`"
+                    />
 
-                  <ActionSettingsWheelItem
-                    v-if="canResendInvite(subuser)"
-                    icon="fas fa-paper-plane"
-                    label="Gensend"
-                    :click-action="() => onResendInvite(subuser)"
-                    :test-id="`subuser-resend-${subuser.id}`"
-                  />
+                    <ActionSettingsWheelItem
+                      v-if="canResendInvite(subuser)"
+                      icon="fas fa-paper-plane"
+                      label="Gensend"
+                      :click-action="() => onResendInvite(subuser)"
+                      :test-id="`subuser-resend-${subuser.id}`"
+                    />
 
-                  <ActionSettingsWheelItem
-                    v-if="canDisableAccess() && subuser.grant_id"
-                    :icon="subuser.grant_enabled ? 'fas fa-ban' : 'fas fa-check'"
-                    :label="subuser.grant_enabled ? 'Deaktivér' : 'Aktivér'"
-                    :template="subuser.grant_enabled ? 'danger' : 'success'"
-                    :click-action="() => onToggleEnabled(subuser, !subuser.grant_enabled)"
-                    :test-id="`subuser-toggle-${subuser.id}`"
-                  />
-                </template>
-              </ActionSettingsWheelButton>
-            </div>
-          </td>
-        </tr>
+                    <ActionSettingsWheelItem
+                      v-if="canDisableAccess() && subuser.grant_id"
+                      :icon="subuser.grant_enabled ? 'fas fa-ban' : 'fas fa-check'"
+                      :label="subuser.grant_enabled ? 'Deaktivér' : 'Aktivér'"
+                      :template="subuser.grant_enabled ? 'danger' : 'success'"
+                      :click-action="() => onToggleEnabled(subuser, !subuser.grant_enabled)"
+                      :test-id="`subuser-toggle-${subuser.id}`"
+                    />
+                  </template>
+                </ActionSettingsWheelButton>
+              </div>
+            </td>
+          </tr>
+
+          <tr v-if="showCustomer && hasMultipleGrants(subuser) && isExpanded(subuser)" class="subuser-grants-row">
+            <td :colspan="showCustomer ? 10 : 9">
+              <div class="subuser-grants" :data-testid="`subuser-grants-${subuser.id}`">
+                <div
+                  v-for="grant in rowGrants(subuser)"
+                  :key="grant.grant_id"
+                  class="subuser-grant"
+                  :data-testid="`subuser-grant-${subuser.id}-${grant.grant_id}`"
+                >
+                  <div>
+                    <div class="has-text-weight-semibold">{{ formatCustomer(grant) }}</div>
+                    <div class="is-size-7 has-text-grey">Grant #{{ grant.grant_id }}</div>
+                  </div>
+                  <div>
+                    <span class="tag" :class="statusClass(grant)">{{ statusLabel(grant) }}</span>
+                  </div>
+                  <div class="permission-summary">{{ permissionSummary(grant) }}</div>
+                  <div>{{ grant.grant_note || "-" }}</div>
+                  <div class="buttons is-justify-content-flex-end action-buttons" :data-testid="`subuser-grant-actions-${subuser.id}-${grant.grant_id}`">
+                    <ActionSettingsWheelButton v-if="hasGrantActions(subuser, grant)">
+                      <template #actions>
+                        <ActionSettingsWheelItem
+                          v-if="canEditPermissions() && grant.grant_id"
+                          icon="fas fa-pen"
+                          label="Redigér note"
+                          :click-action="() => onEditNote(grantContext(subuser, grant))"
+                          :test-id="`subuser-note-${subuser.id}-${grant.grant_id}`"
+                        />
+
+                        <ActionSettingsWheelItem
+                          v-if="canEditPermissions() && grant.grant_id"
+                          icon="fas fa-user-shield"
+                          label="Tilladelser"
+                          :click-action="() => onEditPermissions(grantContext(subuser, grant))"
+                          :test-id="`subuser-permissions-${subuser.id}-${grant.grant_id}`"
+                        />
+
+                        <ActionSettingsWheelItem
+                          v-if="canResendInvite(grantContext(subuser, grant))"
+                          icon="fas fa-paper-plane"
+                          label="Gensend"
+                          :click-action="() => onResendInvite(grantContext(subuser, grant))"
+                          :test-id="`subuser-resend-${subuser.id}-${grant.grant_id}`"
+                        />
+
+                        <ActionSettingsWheelItem
+                          v-if="canDisableAccess() && grant.grant_id"
+                          :icon="grant.grant_enabled ? 'fas fa-ban' : 'fas fa-check'"
+                          :label="grant.grant_enabled ? 'Deaktivér' : 'Aktivér'"
+                          :template="grant.grant_enabled ? 'danger' : 'success'"
+                          :click-action="() => onToggleEnabled(grantContext(subuser, grant), !grant.grant_enabled)"
+                          :test-id="`subuser-toggle-${subuser.id}-${grant.grant_id}`"
+                        />
+                      </template>
+                    </ActionSettingsWheelButton>
+                  </div>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </template>
       </tbody>
     </table>
   </div>
@@ -306,4 +487,31 @@ const onResendInvite = async (subuser) => {
   gap: 0.5rem;
   flex-wrap: wrap;
 }
+
+.subuser-grants-row > td {
+  background: #f8fafc;
+}
+
+.subuser-grants {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.subuser-grant {
+  align-items: center;
+  background: #fff;
+  border: 1px solid #dbdbdb;
+  border-radius: 6px;
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: minmax(180px, 1.4fr) minmax(120px, 0.7fr) minmax(180px, 1fr) minmax(140px, 1fr) auto;
+  padding: 0.75rem;
+}
+
+@media screen and (max-width: 1023px) {
+  .subuser-grant {
+    align-items: flex-start;
+    grid-template-columns: 1fr;
+  }
+}
 </style>

src/components/displays/superuser/tables/SuperuserInvoiceRowActions.vue

@@ -0,0 +1,49 @@
+<script setup>
+defineProps({
+  includeBuffer: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<template>
+  <div class="buttons superuser-invoice-row-actions">
+    <button
+      v-if="includeBuffer"
+      type="button"
+      class="button is-small superuser-invoice-row-actions__buffer"
+      aria-hidden="true"
+      tabindex="-1"
+      disabled
+      data-testid="superuser-invoice-action-buffer"
+    >
+      <span class="icon">
+        <i class="fas fa-paperclip"></i>
+      </span>
+    </button>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.superuser-invoice-row-actions {
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-bottom: 0;
+}
+
+.superuser-invoice-row-actions > :deep(*) {
+  flex-shrink: 0;
+}
+
+.superuser-invoice-row-actions__buffer {
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+</style>

src/components/displays/superuser/tables/collectedOrderInvoicesTable.vue

@@ -1,11 +1,10 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";
+import { BCheckbox } from "buefy";
 
 const { t } = useI18n();
 
 import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
-import {getCustomerName} from "@/components/shop/POSDepartmentProcess.vue";
-import { ref } from 'vue';
 const props = defineProps({
   objects: {
     type: Array,
@@ -29,134 +28,141 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update:selected']);
+const emit = defineEmits(["update:selected"]);
 import { usePaginatedListInstance } from "@/components/pagination/paginatedList.vue";
 const { loadList } = usePaginatedListInstance();
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
 import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
+import SuperuserInvoiceRowActions from "@/components/displays/superuser/tables/SuperuserInvoiceRowActions.vue";
 
 const redirect = (path) => {
   // Open the url in a new tab
-  window.open(path, '_blank');
-}
+  window.open(path, "_blank");
+};
 
 const parseTransactionCount = (value) => {
-  if (typeof value === 'number') {
-    return value === 0 ? t('global.no_data') : value;
-  } else if (typeof value === 'string') {
+  if (typeof value === "number") {
+    return value === 0 ? t("global.no_data") : value;
+  } else if (typeof value === "string") {
     return parseInt(value);
-  } else if (typeof value === 'object') {
+  } else if (typeof value === "object") {
     return value.length;
   } else if (value === null) {
     // Handle other types if necessary
-    return t('global.no_data');
+    return t("global.no_data");
   }
-}
+};
 
 const onSelect = (id) => {
-  emit('update:selected', id);
+  emit("update:selected", id);
   props.onSelected(id);
-}
+};
 
+const onSelectorChecked = (id, checked) => {
+  if (checked) {
+    onSelect(id);
+  }
+};
 </script>
 
 <template>
-    <table class="table is-fullwidth is-hoverable is-striped">
-      <thead>
+  <table class="table is-fullwidth is-hoverable is-striped">
+    <thead>
       <tr>
         <th>{{ SessionUser.objects.collectedOrderInvoices.columns.id.label }}</th>
         <th>{{ SessionUser.objects.global.language.customer_name }}</th>
         <th class="is-narrow">{{ SessionUser.objects.collectedOrderInvoices.columns.customer_number.label }}</th>
         <th class="is-narrow">{{ SessionUser.objects.collectedOrderInvoices.columns.processor.label }}</th>
         <th class="is-narrow">{{ SessionUser.objects.orders.meta.title }}</th>
-        <th>{{ $t('common.status') }}</th>
+        <th>{{ $t("common.status") }}</th>
         <th>{{ SessionUser.objects.collectedOrderInvoices.columns.created_at.label }}</th>
-        <th v-if="props.showTotal">{{ $t('tables.orders.total') }}</th>
+        <th v-if="props.showTotal">{{ $t("tables.orders.total") }}</th>
         <th><!-- Actions / Selector --></th>
       </tr>
-      </thead>
-      <tbody>
+    </thead>
+    <tbody>
       <template v-for="object in props.objects" :key="object.id">
         <tr v-if="object.objects > 0 || props.showEmpty">
-        <td>{{ object.id }}</td>
-        <!-- Customer name -->
-        <EditableTableColumn
+          <td>{{ object.id }}</td>
+          <!-- Customer name -->
+          <EditableTableColumn
             :object="object"
             :loadList="loadList"
             column="customer_name"
             :virtual-column="true"
             :parse-function="(value) => value.customer_name"
-        />
-        <!-- Customer number -->
-        <EditableTableColumn
-            :object="object"
-            :loadList="loadList"
-            column="customer_number"
-        />
-        <!-- Processor -->
-        <EditableTableColumn
+          />
+          <!-- Customer number -->
+          <EditableTableColumn :object="object" :loadList="loadList" column="customer_number" />
+          <!-- Processor -->
+          <EditableTableColumn
             :object="object"
             :loadList="loadList"
             column="processor"
-            :parse-function="(value) => value === null ? t('global.no_data') : value === 1 ? 'E-conomic' : t('global.other')"
-        />
-        <!-- Transactions -->
-        <EditableTableColumn
+            :parse-function="
+              (value) => (value === null ? t('global.no_data') : value === 1 ? 'E-conomic' : t('global.other'))
+            "
+          />
+          <!-- Transactions -->
+          <EditableTableColumn
             :object="object"
             :loadList="loadList"
             column="orders"
             :parse-function="(value) => parseTransactionCount(value)"
-        />
-        <!-- Closed at -->
-        <EditableTableColumn
+          />
+          <!-- Closed at -->
+          <EditableTableColumn
             :object="object"
             :loadList="loadList"
             column="closed_at"
-            :parse-function="(value) => value === null ? t('global.open') : t('global.closed') + ' ' + value"
-        />
-        <!-- Created at -->
-        <EditableTableColumn
-            :object="object"
-            :loadList="loadList"
-            column="created_at"
-        />
-        <!-- Total net amount -->
-        <td v-if="props.showTotal">{{ SessionUser.functions.currency.toLocal(object.total_net_amount) }}</td>
-        <!-- Actions -->
-        <td v-if="!props.isSelector">
-          <ActionSettingsWheelButton>
-            <template #actions>
-              <ActionSettingsWheelItem
-                icon="fas fa-eye"
-                @click="redirect('/superuser/invoices/' + object.id)"
-                :label="t('common.show')"
-              />
-            </template>
-          </ActionSettingsWheelButton>
-        </td>
-        <!-- Selector -->
-        <td v-if="props.isSelector">
-          <button class="button is-small is-dark" @click="onSelect(object.id)">
-            {{ $t('common.select') }}
-          </button>
-        </td>
-      </tr>
+            :parse-function="(value) => (value === null ? t('global.open') : t('global.closed') + ' ' + value)"
+          />
+          <!-- Created at -->
+          <EditableTableColumn :object="object" :loadList="loadList" column="created_at" />
+          <!-- Total net amount -->
+          <td v-if="props.showTotal">{{ SessionUser.functions.currency.toLocal(object.total_net_amount) }}</td>
+          <!-- Actions -->
+          <td v-if="!props.isSelector" class="is-narrow">
+            <SuperuserInvoiceRowActions :include-buffer="true">
+              <ActionSettingsWheelButton>
+                <template #actions>
+                  <ActionSettingsWheelItem
+                    icon="fas fa-eye"
+                    @click="redirect('/superuser/invoices/' + object.id)"
+                    :label="t('common.show')"
+                  />
+                </template>
+              </ActionSettingsWheelButton>
+            </SuperuserInvoiceRowActions>
+          </td>
+          <!-- Selector -->
+          <td v-if="props.isSelector" class="is-narrow">
+            <BCheckbox
+              :model-value="false"
+              size="is-small"
+              :aria-label="`${$t('common.select')} #${object.id}`"
+              :data-testid="`collected-invoice-selector-${object.id}`"
+              @update:model-value="(checked) => onSelectorChecked(object.id, checked)"
+            />
+          </td>
+        </tr>
       </template>
       <!-- If the list is empty -->
       <tr v-if="objects.length === 0">
         <td colspan="9">
-          {{ $t('global.no_data') }}
+          {{ $t("global.no_data") }}
         </td>
       </tr>
       <!-- Show a count of the total number of objects -->
       <tr>
-        <td colspan="9">{{ $t('tables.showing') }} {{ objects.length - objects.filter(object => object.objects === 0).length }} / {{ objects.length }} {{ SessionUser.objects.collectedOrderInvoices.meta.labels.multiple }}</td>
+        <td colspan="9">
+          {{ $t("tables.showing") }} {{ objects.length - objects.filter((object) => object.objects === 0).length }} /
+          {{ objects.length }} {{ SessionUser.objects.collectedOrderInvoices.meta.labels.multiple }}
+        </td>
       </tr>
-      </tbody>
-    </table>
+    </tbody>
+  </table>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/components/displays/superuser/tables/usersTable.vue

@@ -125,52 +125,58 @@ const migrateUser = async (user) => {
 </script>
 
 <template>
-  <table class="table is-fullwidth" data-testid="superuser-users-table">
-    <thead>
-      <tr>
-        <th>{{ $t("objects.columns.id") }}</th>
-        <th>{{ $t("tables.users.name") }}</th>
-        <th>{{ $t("tables.users.role") }}</th>
-        <th class="has-text-right">{{ $t("tables.actions") }}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="user in objects" :key="user.id" :data-testid="`superuser-users-row-${user.id}`">
-        <td>{{ user.id }}</td>
-        <td>{{ user.display_name }}</td>
-        <td>{{ user.group_id }}</td>
-        <td>
-          <div class="buttons is-float-right">
-            <!-- Settings wheel -->
-            <ActionSettingsWheelButton
-              :customer_number="user.customer_number"
-              :user_id="user.id"
-              :data-testid="`superuser-user-actions-${user.id}`"
-            >
-              <template #actions>
-                <ActionSettingsWheelItem
-                  :click-action="() => editUser(user)"
-                  icon="fas fa-user-edit"
-                  :label="$t('global.edit')"
-                  :test-id="`superuser-user-edit-${user.id}`"
-                />
-                <ActionSettingsWheelItem
-                  v-if="canMigrateToLimitedBackoffice(user)"
-                  :click-action="() => migrateUser(user)"
-                  icon="fas fa-random"
-                  :label="$t('superuser.pages.employees.migrate_to_limited_backoffice')"
-                  :test-id="`superuser-user-migrate-limited-${user.id}`"
-                />
-              </template>
-            </ActionSettingsWheelButton>
-          </div>
-        </td>
-      </tr>
-      <tr v-if="objects.length === 0">
-        <td colspan="4">{{ $t("global.no_data") }}</td>
-      </tr>
-    </tbody>
-  </table>
+  <div class="table-container">
+    <table class="table is-fullwidth is-striped is-hoverable" data-testid="superuser-users-table">
+      <thead>
+        <tr>
+          <th>{{ $t("objects.columns.id") }}</th>
+          <th>{{ $t("tables.users.name") }}</th>
+          <th>{{ $t("tables.users.role") }}</th>
+          <th class="has-text-right">{{ $t("tables.actions") }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="user in objects" :key="user.id" :data-testid="`superuser-users-row-${user.id}`">
+          <td>{{ user.id }}</td>
+          <td>{{ user.display_name }}</td>
+          <td>{{ user.group_id }}</td>
+          <td class="has-text-right users-table__actions-cell">
+            <div class="buttons is-justify-content-flex-end">
+              <!-- Settings wheel -->
+              <ActionSettingsWheelButton
+                :customer_number="user.customer_number"
+                :user_id="user.id"
+                :data-testid="`superuser-user-actions-${user.id}`"
+              >
+                <template #actions>
+                  <ActionSettingsWheelItem
+                    :click-action="() => editUser(user)"
+                    icon="fas fa-user-edit"
+                    :label="$t('global.edit')"
+                    :test-id="`superuser-user-edit-${user.id}`"
+                  />
+                  <ActionSettingsWheelItem
+                    v-if="canMigrateToLimitedBackoffice(user)"
+                    :click-action="() => migrateUser(user)"
+                    icon="fas fa-random"
+                    :label="$t('superuser.pages.employees.migrate_to_limited_backoffice')"
+                    :test-id="`superuser-user-migrate-limited-${user.id}`"
+                  />
+                </template>
+              </ActionSettingsWheelButton>
+            </div>
+          </td>
+        </tr>
+        <tr v-if="objects.length === 0">
+          <td colspan="4">{{ $t("global.no_data") }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.users-table__actions-cell {
+  white-space: nowrap;
+}
+</style>

src/components/displays/user/vehicles/addVehicleForm.vue

@@ -1,42 +1,145 @@
 <script setup>
 import { addVehicleUser } from "@/components/session/user/UserVehicleRequest.vue";
 import { clearErrors } from "@/components/request/HandleGlobalError.vue";
-import { ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import ShowErrorField from "@/components/global/ShowErrorField.vue";
 import { useI18n } from 'vue-i18n';
+import { useRouter } from "vue-router";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
 
 const { t } = useI18n();
+const router = useRouter();
 
 const reg = ref("");
 const type = ref("");
-const notes = ref("");
+const reference = ref("");
+const vehicleTypeOptions = ref([]);
+const isLoadingVehicleTypes = ref(false);
+const isSubmitting = ref(false);
+const vehicleTypeError = ref("");
 
+const normalizedReg = computed(() => reg.value.trim().toUpperCase());
+const normalizedType = computed(() => {
+  const parsedValue = Number.parseInt(String(type.value), 10);
+  return Number.isInteger(parsedValue) && parsedValue >= 0 ? parsedValue : null;
+});
+
+const canSubmit = computed(() => {
+  return (
+    !isSubmitting.value &&
+    !isLoadingVehicleTypes.value &&
+    normalizedReg.value.length > 0 &&
+    normalizedType.value !== null
+  );
+});
+
+const parseErrorMessage = (error, fallback) => {
+  return SessionUser.functions.parseErrorMessage(error) || fallback;
+};
+
+const loadVehicleTypes = async () => {
+  isLoadingVehicleTypes.value = true;
+  vehicleTypeError.value = "";
+
+  try {
+    vehicleTypeOptions.value = await SessionUser.objects.vehicles.columns.type.options();
+  } catch (error) {
+    vehicleTypeError.value = parseErrorMessage(error, t("vehicles.add_modal.type_load_error"));
+  } finally {
+    isLoadingVehicleTypes.value = false;
+  }
+};
+
+const submitVehicle = async () => {
+  if (!canSubmit.value) {
+    return;
+  }
+
+  clearErrors();
+  isSubmitting.value = true;
+
+  try {
+    await addVehicleUser(normalizedReg.value, normalizedType.value, reference.value.trim() || null);
+    await router.push("/user/vehicles");
+  } catch {
+    // addVehicleUser records the displayable error in the shared error store.
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+onMounted(loadVehicleTypes);
 </script>
 
 <template>
-  <form @submit.prevent="clearErrors(); addVehicleUser(reg, type, notes)">
+  <form class="user-add-vehicle-form" @submit.prevent="submitVehicle">
     <div class="field">
-      <label class="label">{{ t('user_vehicles.license_plate_label') }}</label>
+      <label class="label" for="user-add-vehicle-registration">{{ t('user_vehicles.license_plate_label') }}</label>
       <div class="control">
-        <input class="input" type="text" placeholder="Reg" v-model="reg">
+        <input
+          id="user-add-vehicle-registration"
+          v-model="reg"
+          class="input"
+          type="text"
+          autocomplete="off"
+          :placeholder="t('vehicles.add_modal.registration_placeholder')"
+          :disabled="isSubmitting"
+          data-testid="user-add-vehicle-registration"
+        >
       </div>
     </div>
+
     <div class="field">
-      <label class="label">{{ t('user_vehicles.type_label') }}</label>
+      <label class="label" for="user-add-vehicle-type">{{ t('user_vehicles.type_label') }}</label>
+      <div class="control" :class="{ 'is-loading': isLoadingVehicleTypes }">
+        <div class="select is-fullwidth">
+          <select
+            id="user-add-vehicle-type"
+            v-model="type"
+            :disabled="isSubmitting || isLoadingVehicleTypes || vehicleTypeOptions.length === 0"
+            data-testid="user-add-vehicle-type"
+          >
+            <option disabled value="">{{ t('vehicles.add_modal.type_placeholder') }}</option>
+            <option v-for="option in vehicleTypeOptions" :key="option.id" :value="option.id">
+              {{ option.name }}
+            </option>
+          </select>
+        </div>
+      </div>
+      <p v-if="vehicleTypeError" class="help is-danger" data-testid="user-add-vehicle-type-error">
+        {{ vehicleTypeError }}
+      </p>
+    </div>
+
+    <div class="field">
+      <label class="label" for="user-add-vehicle-reference">{{ t('common.reference') }}</label>
       <div class="control">
-        <input class="input" type="text" placeholder="Type" v-model="type">
-      </div>
-    </div>
-    <div class="field">
-      <label class="label">{{ t('user_vehicles.notes_label') }}</label>
-      <div class="control">
-        <input class="input" type="text" placeholder="Notes" v-model="notes">
+        <input
+          id="user-add-vehicle-reference"
+          v-model="reference"
+          class="input"
+          type="text"
+          autocomplete="off"
+          :placeholder="t('vehicles.add_modal.reference_placeholder')"
+          :disabled="isSubmitting"
+          data-testid="user-add-vehicle-reference"
+        >
       </div>
     </div>
+
     <ShowErrorField error="addVehicleUser" />
+
     <div class="field">
       <div class="control">
-        <button class="button is-dark">{{ t('user_vehicles.add_vehicle') }}</button>
+        <button
+          class="button is-dark"
+          type="submit"
+          :class="{ 'is-loading': isSubmitting }"
+          :disabled="!canSubmit"
+          data-testid="user-add-vehicle-submit"
+        >
+          {{ t('user_vehicles.add_vehicle') }}
+        </button>
       </div>
     </div>
   </form>
@@ -44,4 +147,4 @@ const notes = ref("");
 
 <style scoped>
 
-</style>
+</style>

src/components/displays/user/vehicles/vehiclesTable.vue

@@ -17,7 +17,7 @@ const props = defineProps({
   show_add_vehicle: {
     type: Number,
     required: false,
-    default: true,
+    default: null,
   },
   compact: {
     type: Boolean,
@@ -34,6 +34,16 @@ const props = defineProps({
     required: false,
     default: null,
   },
+  userScopedUserId: {
+    type: [Number, String],
+    required: false,
+    default: null,
+  },
+  superuserPage: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
 const reload = () => {
@@ -49,10 +59,15 @@ const canViewVehicle = () => SessionUser.canAccessCustomerFeature("vehicles", "l
 const canEditVehicle = () => SessionUser.canAccessCustomerFeature("vehicles", "edit");
 const canDeleteVehicle = () => SessionUser.canAccessCustomerFeature("vehicles", "delete");
 const canShowVehicleRowActions = () => canViewVehicle() || canDeleteVehicle();
+const isUserScoped = () => Boolean(props.userScopedUserId);
 
-const redirectUserVehiclePage = (vehicleId) => {
-  // Send the user to the vehicle page
-  window.location.href = `/user/vehicles/${vehicleId}`;
+const redirectVehiclePage = (vehicle) => {
+  if (props.superuserPage) {
+    window.location.href = `/superuser/vehicles/${encodeURIComponent(vehicle.reg)}`;
+    return;
+  }
+
+  window.location.href = `/user/vehicles/${encodeURIComponent(vehicle.id)}`;
 };
 
 // Get the departments (If the departments are not already loaded)
@@ -60,14 +75,6 @@ if (departments.value.length === 0) {
   getDepartments();
 }
 
-const onClickListAddons = (vehicleId) => {
-  // Redirect to the product addons page
-  console.log("Fetching product addons for vehicle: " + vehicleId);
-  SessionUser.request("/vehicles/addons/available", "GET", {
-    id: vehicleId,
-  });
-};
-
 const vehicleAddons = ref(null);
 const getVehicleAvailableAddons = (vehicleId, forceReload = false) => {
   if (forceReload === true) {
@@ -79,11 +86,9 @@ const getVehicleAvailableAddons = (vehicleId, forceReload = false) => {
     SessionUser.request("/vehicles/addons/available", "GET", {
       id: vehicleId,
     }).then((response) => {
-      console.log("Vehicle addons: ", response.data.data);
       vehicleAddons.value = response.data.data;
     });
   }
-  console.log("Vehicle addons: " + vehicleAddons.value);
   return vehicleAddons.value;
 };
 
@@ -122,6 +127,28 @@ const getProductOptionsLabel = (vehicle) => {
   const available = Number(vehicle?.addons?.available ?? 0);
   return `${SessionUser.objects.product_options.meta.title} ( ${enabled} / ${available} )`;
 };
+
+const editVehicleField = (id, column, value, onAfterSubmit = null) => {
+  if (isUserScoped()) {
+    return SessionUser.objects.vehicles.functions.showEditObjectFieldForUserForm(
+      props.userScopedUserId,
+      id,
+      column,
+      value,
+      onAfterSubmit
+    );
+  }
+
+  return SessionUser.objects.vehicles.showEditObjectFieldForm(id, column, value, onAfterSubmit);
+};
+
+const deleteVehicle = (id) => {
+  if (isUserScoped()) {
+    return SessionUser.objects.vehicles.functions.showDeleteObjectForUserForm(props.userScopedUserId, id, () => reload());
+  }
+
+  return SessionUser.objects.vehicles.functions.showDeleteObjectForm(id, () => reload());
+};
 </script>
 
 <template>
@@ -150,7 +177,7 @@ const getProductOptionsLabel = (vehicle) => {
             <EditableTableColumn
               :object="object"
               :loadList="reload"
-              :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
+              :editFunction="editVehicleField"
               :permission-check-function="canEditVehicle"
               column="reg"
             />
@@ -158,7 +185,7 @@ const getProductOptionsLabel = (vehicle) => {
             <EditableTableColumn
               :object="object"
               :loadList="reload"
-              :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
+              :editFunction="editVehicleField"
               :permission-check-function="canEditVehicle"
               column="type"
               :parse-function="
@@ -171,7 +198,7 @@ const getProductOptionsLabel = (vehicle) => {
             <EditableTableColumn
               :object="object"
               :loadList="reload"
-              :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
+              :editFunction="editVehicleField"
               :permission-check-function="canEditVehicle"
               column="wash_subscription"
               :parse-function="
@@ -225,7 +252,7 @@ const getProductOptionsLabel = (vehicle) => {
               v-if="!props.compact"
               :object="object"
               :loadList="reload"
-              :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
+              :editFunction="editVehicleField"
               :permission-check-function="canEditVehicle"
               column="reference"
             />
@@ -244,7 +271,7 @@ const getProductOptionsLabel = (vehicle) => {
                     v-if="canViewVehicle()"
                     :label="$t('global.manage') + ' ' + $t('objects.vehicles.single')"
                     icon="fas fa-eye"
-                    :click-action="() => redirectUserVehiclePage(object.id)"
+                    :click-action="() => redirectVehiclePage(object)"
                   />
                   <!-- Delete -->
                   <ActionSettingsWheelItem
@@ -252,9 +279,7 @@ const getProductOptionsLabel = (vehicle) => {
                     :label="$t('global.delete') + ' ' + $t('objects.vehicles.single')"
                     icon="fas fa-trash"
                     :template="'danger'"
-                    :click-action="
-                      () => SessionUser.objects.vehicles.functions.showDeleteObjectForm(object.id, () => reload())
-                    "
+                    :click-action="() => deleteVehicle(object.id)"
                   />
                 </template>
               </ActionSettingsWheelButton>

src/components/forms/BuefyDateField.vue

@@ -0,0 +1,156 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { useI18n } from "vue-i18n";
+import { BDatepicker } from "buefy";
+import {
+  formatDatepickerDateForApi,
+  formatDatepickerDateForLocale,
+  normalizeDatepickerDate,
+  parseDatepickerInput,
+} from "@/services/buefyDatepicker.js";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Date],
+    default: "",
+  },
+  valueType: {
+    type: String,
+    default: "string",
+    validator: (value) => ["string", "date", "nullable-string"].includes(value),
+  },
+  placeholder: {
+    type: String,
+    default: "",
+  },
+  icon: {
+    type: String,
+    default: "calendar",
+  },
+  disabled: Boolean,
+  readonly: Boolean,
+  required: Boolean,
+  expanded: {
+    type: Boolean,
+    default: true,
+  },
+  appendToBody: {
+    type: Boolean,
+    default: true,
+  },
+  position: {
+    type: String,
+    default: "is-bottom-left",
+  },
+  openOnFocus: {
+    type: Boolean,
+    default: true,
+  },
+  clearable: Boolean,
+  minDate: {
+    type: Date,
+    default: null,
+  },
+  maxDate: {
+    type: Date,
+    default: null,
+  },
+  unselectableDates: {
+    type: [Array, Function],
+    default: null,
+  },
+  selectableDates: {
+    type: [Array, Function],
+    default: null,
+  },
+  events: {
+    type: Array,
+    default: () => [],
+  },
+  indicators: {
+    type: String,
+    default: "dots",
+  },
+  dataTestid: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+const { locale } = useI18n({ useScope: "global" });
+const attrs = useAttrs();
+const datepickerTestId = computed(() => props.dataTestid || attrs["data-testid"] || undefined);
+
+const selectedDate = computed({
+  get: () => normalizeDatepickerDate(props.modelValue),
+  set: (value) => {
+    const normalized = normalizeDatepickerDate(value);
+    let nextValue = "";
+
+    if (props.valueType === "date") {
+      nextValue = normalized;
+    } else if (props.valueType === "nullable-string") {
+      nextValue = normalized ? formatDatepickerDateForApi(normalized) : null;
+    } else {
+      nextValue = normalized ? formatDatepickerDateForApi(normalized) : "";
+    }
+
+    emit("update:modelValue", nextValue);
+    emit("change", nextValue);
+  },
+});
+
+const showClearIcon = computed(() => (
+  props.clearable
+  && selectedDate.value !== null
+  && !props.disabled
+  && !props.readonly
+));
+
+const clearSelectedDate = (event) => {
+  event?.preventDefault?.();
+  event?.stopPropagation?.();
+  selectedDate.value = null;
+};
+
+const formatter = (value) => formatDatepickerDateForLocale(value, locale.value);
+const parser = (value) => parseDatepickerInput(value, locale.value);
+</script>
+
+<template>
+  <div :data-testid="datepickerTestId">
+    <BDatepicker
+      v-bind="attrs"
+      v-model="selectedDate"
+      icon-pack="fas"
+      :icon="icon"
+      :locale="locale"
+      :placeholder="placeholder"
+      :position="position"
+      :open-on-focus="openOnFocus"
+      :disabled="disabled"
+      :readonly="readonly"
+      :required="required"
+      :expanded="expanded"
+      :append-to-body="appendToBody"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :unselectable-dates="unselectableDates"
+      :selectable-dates="selectableDates"
+      :events="events"
+      :indicators="indicators"
+      :icon-right="showClearIcon ? 'times-circle' : undefined"
+      :icon-right-clickable="showClearIcon"
+      :mobile-native="false"
+      :editable="true"
+      :date-formatter="formatter"
+      :date-parser="parser"
+      @icon-right-click="clearSelectedDate"
+    />
+  </div>
+</template>

src/components/forms/BuefyMonthField.vue

@@ -0,0 +1,153 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { useI18n } from "vue-i18n";
+import { BDatepicker } from "buefy";
+import {
+  formatDatepickerMonthForApi,
+  formatDatepickerMonthForLocale,
+  normalizeDatepickerMonth,
+  parseMonthpickerInput,
+} from "@/services/buefyDatepicker.js";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Date],
+    default: "",
+  },
+  valueType: {
+    type: String,
+    default: "string",
+    validator: (value) => ["string", "date", "nullable-string"].includes(value),
+  },
+  placeholder: {
+    type: String,
+    default: "",
+  },
+  disabled: Boolean,
+  readonly: Boolean,
+  expanded: {
+    type: Boolean,
+    default: true,
+  },
+  appendToBody: {
+    type: Boolean,
+    default: true,
+  },
+  position: {
+    type: String,
+    default: "is-bottom-left",
+  },
+  openOnFocus: {
+    type: Boolean,
+    default: true,
+  },
+  inline: Boolean,
+  clearable: Boolean,
+  minDate: {
+    type: Date,
+    default: null,
+  },
+  maxDate: {
+    type: Date,
+    default: null,
+  },
+  unselectableDates: {
+    type: [Array, Function],
+    default: null,
+  },
+  selectableDates: {
+    type: [Array, Function],
+    default: null,
+  },
+  events: {
+    type: Array,
+    default: () => [],
+  },
+  indicators: {
+    type: String,
+    default: "dots",
+  },
+  dataTestid: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+const { locale } = useI18n({ useScope: "global" });
+const attrs = useAttrs();
+const datepickerTestId = computed(() => props.dataTestid || attrs["data-testid"] || undefined);
+
+const selectedMonth = computed({
+  get: () => normalizeDatepickerMonth(props.modelValue),
+  set: (value) => {
+    const normalized = normalizeDatepickerMonth(value);
+    let nextValue = "";
+
+    if (props.valueType === "date") {
+      nextValue = normalized;
+    } else if (props.valueType === "nullable-string") {
+      nextValue = normalized ? formatDatepickerMonthForApi(normalized) : null;
+    } else {
+      nextValue = normalized ? formatDatepickerMonthForApi(normalized) : "";
+    }
+
+    emit("update:modelValue", nextValue);
+    emit("change", nextValue);
+  },
+});
+
+const showClearIcon = computed(() => (
+  props.clearable
+  && selectedMonth.value !== null
+  && !props.disabled
+  && !props.readonly
+));
+
+const clearSelectedMonth = (event) => {
+  event?.preventDefault?.();
+  event?.stopPropagation?.();
+  selectedMonth.value = null;
+};
+
+const formatter = (value) => formatDatepickerMonthForLocale(value, locale.value);
+const parser = (value) => parseMonthpickerInput(value, locale.value);
+</script>
+
+<template>
+  <div :data-testid="datepickerTestId">
+    <BDatepicker
+      v-bind="attrs"
+      v-model="selectedMonth"
+      type="month"
+      icon-pack="fas"
+      icon="calendar"
+      :locale="locale"
+      :placeholder="placeholder"
+      :position="position"
+      :open-on-focus="openOnFocus"
+      :inline="inline"
+      :disabled="disabled"
+      :readonly="readonly"
+      :expanded="expanded"
+      :append-to-body="appendToBody"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :unselectable-dates="unselectableDates"
+      :selectable-dates="selectableDates"
+      :events="events"
+      :indicators="indicators"
+      :icon-right="showClearIcon ? 'times-circle' : undefined"
+      :icon-right-clickable="showClearIcon"
+      :mobile-native="false"
+      :editable="true"
+      :date-formatter="formatter"
+      :date-parser="parser"
+      @icon-right-click="clearSelectedMonth"
+    />
+  </div>
+</template>

src/components/forms/department/pos/SelectProductsFormPOS.vue

@@ -1,14 +1,17 @@
 <script setup>
 import { onMounted, ref, watch, nextTick, computed } from 'vue';
 import {
+  clearPendingOrderItems,
   getOrderId,
   getProductsCategory,
+  getAddonRestriction,
+  getProductRestriction,
   loadOrderItems,
   productCategoryAllowed,
   isProductRestricted,
   setProductsCategory,
   getUserProductPrice,
-  showFakeCreateOrderItem,
+  showPendingCreateOrderItem,
   department_id,
   user_discounts,
   getUserGlobalDiscount,
@@ -21,6 +24,7 @@ import {getProductCategory, getProducts} from "@/components/shop/Products.vue";
 import {createOrderItem} from "@/components/shop/OrdersItems.vue";
 import {SessionUser} from "@/components/session/token/SessionUser.vue";
 import  { useRoute } from 'vue-router';
+import { useI18n } from "vue-i18n";
 import Swal from "sweetalert2";
 import ConfigurationCategory from "@/components/displays/superuser/configuration/ConfigurationCategory.vue";
 import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
@@ -29,6 +33,7 @@ import { getPicture } from "@/components/displays/department/pos/displays/Piktog
 import { products_category } from "@/components/shop/POSDepartmentProcess.vue";
 const emits = defineEmits(['onAddToCartProduct', 'onAddProduct', 'onSelectProduct']);
 const route = useRoute();
+const { t } = useI18n();
 const props = defineProps({
   isCustomerBooking: {
     type: Boolean,
@@ -199,6 +204,46 @@ const getValidOrderId = () => {
   return Number.isInteger(orderId) && orderId > 0 ? orderId : null;
 };
 
+const CUSTOMER_PRODUCT_RULE_BLOCK_MESSAGE = "This product is not allowed for the selected customer";
+
+const getCreateOrderItemErrorMessage = (error) => {
+  return String(
+    error?.response?.data?.data?.message ??
+    error?.response?.data?.message ??
+    error?.message ??
+    ""
+  );
+};
+
+const isCustomerProductRuleBlockError = (error) => {
+  return getCreateOrderItemErrorMessage(error).includes(CUSTOMER_PRODUCT_RULE_BLOCK_MESSAGE);
+};
+
+const showRestrictionWarning = async (messageKey = "pos.restrictions.product_not_allowed") => {
+  await Swal.fire({
+    icon: "warning",
+    title: t("pos.restrictions.title"),
+    text: t(messageKey),
+  });
+};
+
+const handleCreateOrderItemError = async (error, { validationMessage = false } = {}) => {
+  clearPendingOrderItems();
+  await loadOrderItems().catch(() => {});
+
+  if (isCustomerProductRuleBlockError(error)) {
+    const message = t("pos.restrictions.backend_rejected");
+    if (validationMessage) {
+      Swal.showValidationMessage(message);
+    } else {
+      await showRestrictionWarning("pos.restrictions.backend_rejected");
+    }
+    return true;
+  }
+
+  throw error;
+};
+
 const ensureOrderId = (showWarning = true) => {
   const orderId = getValidOrderId();
   if (orderId !== null) {
@@ -216,10 +261,90 @@ const ensureOrderId = (showWarning = true) => {
   return null;
 };
 
+const findProductById = (productId) => {
+  return products.value.find((product) => Number(product.id) === Number(productId)) || null;
+};
+
+const getProductAddonDefinition = (productId, addonId) => {
+  const product = findProductById(productId);
+  if (!product || !Array.isArray(product.addons)) {
+    return null;
+  }
+
+  return product.addons.find((addon) => Number(addon.option_id ?? addon.id) === Number(addonId)) || null;
+};
+
+const getPendingProductFromAddon = (productId, addonId) => {
+  const addon = getProductAddonDefinition(productId, addonId);
+  const addonProduct = addon?.product || {};
+  if (!addon) {
+    return null;
+  }
+
+  return {
+    ...addonProduct,
+    id: addon.option_id ?? addonProduct.id ?? addon.id,
+    name: addon.name || addonProduct.name,
+    price: getAddonPrice(productId, addonId),
+    category: addonProduct.category ?? addon.category,
+  };
+};
+
+const getSelectedProductAddons = (productId) => {
+  return productAddons.value.filter(
+    (productAddon) => productAddon.product_id === productId && productAddon.status === true
+  );
+};
+
+const getAllowedSelectedProductAddons = (productId, options = {}) => {
+  const restrictedSelections = [];
+  const allowedSelections = [];
+
+  getSelectedProductAddons(productId).forEach((productAddon) => {
+    const addon = getProductAddonDefinition(productId, productAddon.addon_id);
+    const restriction = getAddonRestriction(addon || productAddon, {
+      isRelatedAddon: true,
+      ...options,
+    });
+
+    if (restriction.restricted) {
+      restrictedSelections.push({ productAddon, restriction });
+      return;
+    }
+
+    allowedSelections.push(productAddon);
+  });
+
+  return { allowedSelections, restrictedSelections };
+};
+
+const clearRestrictedProductAddonSelections = (restrictedSelections = []) => {
+  restrictedSelections.forEach(({ productAddon }) => {
+    productAddon.status = false;
+    productAddon.quantity = 0;
+  });
+};
+
+const warnIfRestrictedAddonsWereSkipped = async (restrictedSelections = []) => {
+  if (restrictedSelections.length === 0) {
+    return;
+  }
+
+  clearRestrictedProductAddonSelections(restrictedSelections);
+  await showRestrictionWarning("pos.restrictions.restricted_items_removed");
+};
+
 
 
 
 const showAddMultipleProducts = (productId) => {
+  const product = findProductById(productId);
+  const restriction = getProductRestriction(product);
+  if (restriction.restricted) {
+    void showRestrictionWarning(restriction.messageKey);
+    return;
+  }
+
   Swal.fire({
     title: 'Tilføj flere produkter',
     input: 'number',
@@ -246,7 +371,9 @@ const showAddMultipleProducts = (productId) => {
           Swal.showValidationMessage('Order ID is required');
           return false;
         }
-        return createOrderItem(orderId, productId, inputValue).then(async () => await addAddonsToOrderMiddleware(productId, inputValue, null, orderId).then(() => loadOrderItems()));
+        return createOrderItem(orderId, productId, inputValue)
+          .then(async () => await addAddonsToOrderMiddleware(productId, inputValue, null, orderId).then(() => loadOrderItems()))
+          .catch((error) => handleCreateOrderItemError(error, { validationMessage: true }).then(() => false));
       }
     },
     allowOutsideClick: () => !Swal.isLoading()
@@ -384,15 +511,19 @@ const addAddonsToOrderMiddleware = async (product_id, quantity = 1, related_item
   }
 
   // If the product addons are set, add them to the order (If the product is added)
-  var product_addons = productAddons.value.filter((productAddon) => productAddon.product_id === product_id && productAddon.status === true);
+  const { allowedSelections: product_addons, restrictedSelections } = getAllowedSelectedProductAddons(product_id, {
+    relatedItemId: related_item_id,
+  });
+  await warnIfRestrictedAddonsWereSkipped(restrictedSelections);
+
   for (let i = 0; i < product_addons.length; i++) {
     // Get the addons quantity (If the addon quantity is 0, use the product quantity, otherwise multiply the addon quantity with the product quantity)
     let addon_quantity = product_addons[i].quantity === 0 ? quantity : product_addons[i].quantity * quantity;
     // Get the products addon, and show the fake create order item
-    showFakeCreateOrderItem(
-        product_addons[i].addon_id,
+    showPendingCreateOrderItem(
+        getPendingProductFromAddon(product_id, product_addons[i].addon_id),
         addon_quantity,
-        0,
+        getAddonPrice(product_id, product_addons[i].addon_id),
         related_item_id,
         product_addons[i].notes === undefined ? null : product_addons[i].notes
     );
@@ -406,7 +537,7 @@ const addAddonsToOrderMiddleware = async (product_id, quantity = 1, related_item
         addon_quantity,
         related_item_id,
         product_addons[i].notes === undefined ? null : product_addons[i].notes
-    );
+    ).catch((error) => handleCreateOrderItemError(error));
   }
 };
 
@@ -428,11 +559,23 @@ const setProductAddonQuantity = (productId, addonId, quantity) => {
 
 const addProductWithAddonsToOrder = async (product_id) => {
   // Check if the emit only is set
-  const product = products.value.find((product) => product.id === product_id);
+  const product = findProductById(product_id);
+  if (!product) {
+    return;
+  }
+  const productRestriction = getProductRestriction(product);
+  if (productRestriction.restricted) {
+    await showRestrictionWarning(productRestriction.messageKey);
+    return;
+  }
+  const { restrictedSelections } = getAllowedSelectedProductAddons(product_id);
+  await warnIfRestrictedAddonsWereSkipped(restrictedSelections);
   // Add quantities to the product addons
   const productWithAddons = {
     ...product,
-    addons: product.addons.map((addon) => {
+    addons: (Array.isArray(product.addons) ? product.addons : [])
+      .filter((addon) => !getAddonRestriction(addon, { isRelatedAddon: true }).restricted)
+      .map((addon) => {
       return {
         ...addon,
         product: {
@@ -479,15 +622,17 @@ const addProductWithAddonsToOrder = async (product_id) => {
           return false;
         }
         // Show the fake create order item
-        showFakeCreateOrderItem(product_id, 1, 0, 0, normalizedNote);
+        showPendingCreateOrderItem(product, 1, getUserProductPrice(product), 0, normalizedNote);
         // Create the order item
-        return createOrderItem(confirmedOrderId, product_id, 1, 0, normalizedNote).then(async (result) => {
-          let order_item_id = result.data.data.id;
-          // Add the addons to the order
-          await addAddonsToOrderMiddleware(product_id, 1, order_item_id, confirmedOrderId).then(() => {
-            loadOrderItems();
-          });
-        });
+        return createOrderItem(confirmedOrderId, product_id, 1, 0, normalizedNote)
+          .then(async (result) => {
+            let order_item_id = result.data.data.id;
+            // Add the addons to the order
+            await addAddonsToOrderMiddleware(product_id, 1, order_item_id, confirmedOrderId).then(() => {
+              loadOrderItems();
+            });
+          })
+          .catch((error) => handleCreateOrderItemError(error, { validationMessage: true }).then(() => false));
       },
       allowOutsideClick: () => !Swal.isLoading()
     });
@@ -496,7 +641,7 @@ const addProductWithAddonsToOrder = async (product_id) => {
   // If the product requires a note, show the note input
   let quantity = 1;
   // Show the fake create order item
-  showFakeCreateOrderItem(product_id, quantity, 0);
+  showPendingCreateOrderItem(product, quantity, getUserProductPrice(product));
   // IF only emitting the product, then we don't need to add the addons to the order
   if (props.emitActionsOnly) {
     emits('onAddProduct', {
@@ -507,13 +652,15 @@ const addProductWithAddonsToOrder = async (product_id) => {
     return;
   }
   // Create the order item
-  await createOrderItem(orderId, product_id, quantity).then(async (result) => {
-    let order_item_id = result.data.data.id;
-    // Add the addons to the order
-    await addAddonsToOrderMiddleware(product_id, quantity, order_item_id, orderId).then(() => {
-      loadOrderItems();
-    });
-  });
+  await createOrderItem(orderId, product_id, quantity)
+    .then(async (result) => {
+      let order_item_id = result.data.data.id;
+      // Add the addons to the order
+      await addAddonsToOrderMiddleware(product_id, quantity, order_item_id, orderId).then(() => {
+        loadOrderItems();
+      });
+    })
+    .catch((error) => handleCreateOrderItemError(error));
 };
 
 const recommended_product_ids = ref([]);
@@ -556,11 +703,16 @@ const addPreviousOrderToCurrent = async (previousOrder) => {
     }
 
     const previousOrderProduct = getPreviousOrderProduct(orderItem) || { id: productId, price: getPreviousOrderProductPrice(orderItem) };
+    const restriction = getProductRestriction(previousOrderProduct);
+    if (restriction.restricted) {
+      await showRestrictionWarning(restriction.messageKey);
+      continue;
+    }
     const basePrice = getPreviousOrderProductPrice(orderItem);
     const discountedPrice = String(getUserProductPrice({ ...previousOrderProduct, price: basePrice }));
 
-    showFakeCreateOrderItem(productId, quantity, discountedPrice);
-    await createOrderItem(orderId, productId, quantity);
+    showPendingCreateOrderItem({ ...previousOrderProduct, price: basePrice }, quantity, discountedPrice);
+    await createOrderItem(orderId, productId, quantity).catch((error) => handleCreateOrderItemError(error));
     await addAddonsToOrderMiddleware(productId, quantity, null, orderId);
   }
 
@@ -604,13 +756,18 @@ const addRecommendedProductToOrder = async (productId) => {
   if (!product) {
     return;
   }
+  const restriction = getProductRestriction(product);
+  if (restriction.restricted) {
+    await showRestrictionWarning(restriction.messageKey);
+    return;
+  }
   const orderId = ensureOrderId();
   if (!orderId) {
     return;
   }
 
-  showFakeCreateOrderItem(product, 1, getRecommendedProductPrice(productId));
-  await createOrderItem(orderId, productId, 1);
+  showPendingCreateOrderItem(product, 1, getRecommendedProductPrice(productId));
+  await createOrderItem(orderId, productId, 1).catch((error) => handleCreateOrderItemError(error));
   await addAddonsToOrderMiddleware(productId, 1, null, orderId);
   await loadOrderItems();
 };

src/components/forms/superUser/editUserForm.vue

@@ -1,37 +1,64 @@
 <script>
-import { ref } from 'vue'
-import { editUser } from '@/components/session/Session.vue'
 import Swal from "sweetalert2";
 
-//
+import { editUser } from "@/components/session/Session.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import i18n from "@/i18n";
+
+const t = (key, values = {}) => i18n.global.t(key, values);
+
+const escapeHtml = (value) =>
+  String(value ?? "")
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+
+const buildRoleOptions = (roles, selectedRoleId) =>
+  roles
+    .map((item) => {
+      const roleId = String(item?.id ?? "");
+      const roleName = item?.name || `#${roleId}`;
+      const selected = roleId === String(selectedRoleId ?? "") ? " selected" : "";
+      return `<option value="${escapeHtml(roleId)}"${selected}>${escapeHtml(roleName)}</option>`;
+    })
+    .join("");
 
 export const showEditUserForm = async (id, customer_number, display_name, role, options = {}) => {
-  const lockedRoleFields = options.limitedBackofficeManaged ? 'disabled' : '';
+  const isRoleLocked = Boolean(options.limitedBackofficeManaged);
+  const lockedRoleFields = isRoleLocked ? "disabled" : "";
 
-  await Swal.fire({
-    title: 'Edit User',
+  const roles = await SessionUser.objects.roles.get.all().catch(() => []);
+
+  const result = await Swal.fire({
+    title: t("user_admin.edit_user"),
     html: `
       <form id="editNumberPlateScannerForm">
-        <div class="field">
-          <label class="label">Customer Number</label>
+        <div class="field has-text-left">
+          <label class="label" for="customer_number">${escapeHtml(t("user_admin.customer_number"))}</label>
           <div class="control">
-            <input class="input" type="text" id="customer_number" value="${customer_number}" ${lockedRoleFields} />
+            <input class="input" type="text" id="customer_number" value="${escapeHtml(customer_number)}" ${lockedRoleFields} />
           </div>
         </div>
-        <div class="field">
-          <label class="label">Display Name</label>
+        <div class="field has-text-left">
+          <label class="label" for="display_name">${escapeHtml(t("common.name"))}</label>
           <div class="control">
-            <input class="input" type="text" id="display_name" value="${display_name}" />
+            <input class="input" type="text" id="display_name" value="${escapeHtml(display_name)}" />
           </div>
         </div>
-        <div class="field">
-          <label class="label">Role</label>
+        <div class="field has-text-left">
+          <label class="label" for="role">${escapeHtml(t("user_admin.group_id"))}</label>
           <div class="control">
-            <input class="input" type="text" id="role" value="${role}" ${lockedRoleFields} />
+            <div class="select is-fullwidth ${roles.length === 0 ? "is-loading" : ""}">
+              <select id="role" ${lockedRoleFields}>
+                ${buildRoleOptions(Array.isArray(roles) ? roles : [], role)}
+              </select>
+            </div>
           </div>
         </div>
-        <div class="field">
-          <label class="label">Password</label>
+        <div class="field has-text-left">
+          <label class="label" for="password">${escapeHtml(t("global.password"))}</label>
           <div class="control">
             <input class="input" type="password" id="password" />
           </div>
@@ -39,17 +66,28 @@ export const showEditUserForm = async (id, customer_number, display_name, role,
       </form>
     `,
     showCancelButton: true,
-    confirmButtonText: 'Edit User',
-    preConfirm: () => {
-      editUser(id, document.getElementById('customer_number').value, document.getElementById('display_name').value, document.getElementById('role').value, document.getElementById('password').value)
-          .then(() => {
-            Swal.fire('User edited successfully');
-          })
-          .catch((e) => {
-            Swal.fire('Error', e.response.data.error ?? e.response, 'error');
-          });
-    }
+    confirmButtonText: t("user_admin.edit_user"),
+    preConfirm: async () => {
+      try {
+        await editUser(
+          id,
+          document.getElementById("customer_number").value,
+          document.getElementById("display_name").value,
+          document.getElementById("role").value,
+          document.getElementById("password").value
+        );
+        return true;
+      } catch (error) {
+        Swal.showValidationMessage(
+          error?.response?.data?.error ?? error?.response?.data?.message ?? error?.response ?? t("common.unknown_error")
+        );
+        return false;
+      }
+    },
   });
-}
 
+  if (result.isConfirmed) {
+    await Swal.fire(t("user_admin.user_edited_successfully"));
+  }
+};
 </script>

src/components/global/RequestQueueProgress.vue

@@ -2,11 +2,14 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import axios from "axios";
 import { REQUEST_QUEUE_CONFIG } from "@/config.js";
+import i18n from "@/i18n";
+import router from "@/router";
 import {
   buildReleaseSessionSummary,
   getReleaseRuntimeApiBaseUrl,
   resolveReleaseApiUrl,
 } from "@/services/releaseTimeline.js";
+import { buildRequestErrorTraceText } from "@/services/requestErrorTrace.js";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import {
   clearErrorRequests,
@@ -54,10 +57,22 @@ const pingLatencyMs = ref(null);
 const pingIsUnavailable = ref(false);
 const lastShiftKeyPressedAtMs = ref(0);
 const shiftKeyPressCount = ref(0);
+const copyTraceStatusByRequestId = ref({});
 
 let tickerTimer = null;
 let pingTimer = null;
 
+const LABEL_FALLBACKS = Object.freeze({
+  "maintenance_menu.copy_trace": "Copy trace",
+  "maintenance_menu.copy_trace_copied": "Copied",
+  "maintenance_menu.copy_trace_failed": "Copy failed",
+});
+
+const tr = (key) => {
+  const value = i18n.global.t(key);
+  return value === key ? LABEL_FALLBACKS[key] || key : value;
+};
+
 const hasOutstandingRequests = computed(() => requestQueueState.pending + requestQueueState.active > 0);
 const processedRequests = computed(() => requestQueueState.batchCompleted + requestQueueState.batchFailed);
 const missingPermissions = computed(() => requestQueueState.missingPermissions || []);
@@ -547,12 +562,87 @@ const handleWindowKeydown = (event) => {
 
 const handleClearErrors = () => {
   clearErrorRequests();
+  copyTraceStatusByRequestId.value = {};
 };
 
 const handleClearMissingPermissions = () => {
   clearMissingPermissions();
 };
 
+const getCurrentRouteContext = () => {
+  const route = router?.currentRoute?.value || null;
+  return {
+    name: route?.name ? String(route.name) : "",
+    fullPath: route?.fullPath || (typeof window !== "undefined" ? window.location.pathname : ""),
+    path: route?.path || (typeof window !== "undefined" ? window.location.pathname : ""),
+  };
+};
+
+const writeClipboardText = async (text) => {
+  if (typeof navigator !== "undefined" && typeof navigator.clipboard?.writeText === "function") {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+
+  if (typeof document === "undefined" || typeof document.execCommand !== "function") {
+    throw new Error("Clipboard API is unavailable.");
+  }
+
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "readonly");
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.select();
+
+  try {
+    const copied = document.execCommand("copy");
+    if (!copied) {
+      throw new Error("Clipboard copy failed.");
+    }
+  } finally {
+    textarea.remove();
+  }
+};
+
+const setCopyTraceStatus = (requestId, status) => {
+  copyTraceStatusByRequestId.value = {
+    ...copyTraceStatusByRequestId.value,
+    [String(requestId)]: status,
+  };
+};
+
+const getCopyTraceStatus = (request) => copyTraceStatusByRequestId.value[String(request?.id)] || "idle";
+
+const getCopyTraceLabel = (request) => {
+  const status = getCopyTraceStatus(request);
+  if (status === "copied") {
+    return tr("maintenance_menu.copy_trace_copied");
+  }
+  if (status === "failed") {
+    return tr("maintenance_menu.copy_trace_failed");
+  }
+  return tr("maintenance_menu.copy_trace");
+};
+
+const handleCopyTrace = async (request) => {
+  if (!request?.id) {
+    return;
+  }
+
+  try {
+    const traceText = buildRequestErrorTraceText(request, {
+      routeContext: getCurrentRouteContext(),
+    });
+    await writeClipboardText(traceText);
+    setCopyTraceStatus(request.id, "copied");
+  } catch (error) {
+    console.warn("Failed to copy request error trace", error);
+    setCopyTraceStatus(request.id, "failed");
+  }
+};
+
 const getPermissionGrantStatus = (permission) =>
   permissionGrantStatusByKey.value[String(permission || "")] || "idle";
 
@@ -682,6 +772,18 @@ onBeforeUnmount(() => {
                   <span class="request-queue-progress__error-meta">
                     {{ request.statusCode || "n/a" }} - {{ formatDuration(request.requestDurationMs) }}
                   </span>
+                  <button
+                    class="request-queue-progress__copy-trace-button"
+                    :class="{
+                      'request-queue-progress__copy-trace-button--copied': getCopyTraceStatus(request) === 'copied',
+                      'request-queue-progress__copy-trace-button--failed': getCopyTraceStatus(request) === 'failed',
+                    }"
+                    :data-testid="`request-queue-copy-trace-${request.id}`"
+                    type="button"
+                    @click="handleCopyTrace(request)"
+                  >
+                    {{ getCopyTraceLabel(request) }}
+                  </button>
                 </div>
 
                 <details class="request-queue-progress__error-details">
@@ -1281,7 +1383,7 @@ onBeforeUnmount(() => {
 
 .request-queue-progress__error-summary {
   display: grid;
-  grid-template-columns: 110px 1fr auto;
+  grid-template-columns: 110px minmax(0, 1fr) auto auto;
   gap: 8px;
   align-items: center;
   font-size: 12px;
@@ -1292,6 +1394,36 @@ onBeforeUnmount(() => {
   color: rgba(255, 255, 255, 0.75);
 }
 
+.request-queue-progress__copy-trace-button {
+  border: 1px solid rgba(125, 211, 252, 0.55);
+  background: rgba(14, 165, 233, 0.16);
+  color: #e0f2fe;
+  border-radius: 999px;
+  font-size: 11px;
+  line-height: 1;
+  padding: 4px 8px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.request-queue-progress__copy-trace-button:hover,
+.request-queue-progress__copy-trace-button:focus-visible {
+  background: rgba(14, 165, 233, 0.28);
+  border-color: rgba(125, 211, 252, 0.85);
+}
+
+.request-queue-progress__copy-trace-button--copied {
+  border-color: rgba(74, 222, 128, 0.65);
+  background: rgba(22, 163, 74, 0.2);
+  color: #dcfce7;
+}
+
+.request-queue-progress__copy-trace-button--failed {
+  border-color: rgba(248, 113, 113, 0.7);
+  background: rgba(220, 38, 38, 0.2);
+  color: #fee2e2;
+}
+
 .request-queue-progress__error-details {
   margin-top: 4px;
 }

src/components/global/UserNavigation.vue

@@ -1,52 +0,0 @@
-<script setup>
-import logo from "@/assets/branding/truckwash-banner-white-compressed.png";
-import { showAuthSignOutForm } from "@/components/forms/auth/authSignOutForm.vue";
-import { useRouter } from "vue-router";
-import RoundedUserButton from "@/components/displays/userbuttons/RoundedUserButton.vue";
-import { SessionUser } from "@/components/session/token/SessionUser.vue";
-
-const router = useRouter();
-
-const doesRouteStartWith = (route) => {
-  return router.currentRoute.value.path.startsWith(route);
-}
-
-</script>
-
-<template>
-  <div class="columns my-1 is-mobile is-multiline">
-    <div class="column is-half-desktop is-2-touch is-hidden-mobile is-align-content-center">
-      <!-- Logo -->
-      <img :src="logo"
-           class="image"
-           alt="Company brand banner"
-           width="112"
-           height="28">
-    </div>
-    <!-- User navigation -->
-    <div class="column is-half-desktop is-11-mobile is-align-items-center">
-      <div class="buttons is-float-right">
-        <RoundedUserButton icon="fa-cogs" @click="router.push('/superuser')" :disabled="doesRouteStartWith('/superuser')" v-if="SessionUser.canAccessSuperUser()">
-          System
-        </RoundedUserButton>
-        <RoundedUserButton icon="fa-user-tie" @click="router.push('/admin')" :disabled="doesRouteStartWith('/admin')" v-if="SessionUser.canAccessAdmin()">
-          Medarbejder
-        </RoundedUserButton>
-        <RoundedUserButton icon="fa-user" @click="router.push('/user')" :disabled="doesRouteStartWith('/user')" v-if="SessionUser.canAccessUser()">
-          Kunde
-        </RoundedUserButton>
-        <RoundedUserButton icon="fa-sign-out-alt" @click="showAuthSignOutForm">
-          Log ud
-        </RoundedUserButton>
-        <!-- If the user has a superuserToken stored, show the go back button -->
-        <RoundedUserButton icon="fa-arrow-left" @click="SessionUser.superUser.intimidate.goBack()" v-if="SessionUser.superUser.intimidate.isIntimidated()">
-          Tilbage
-        </RoundedUserButton>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>

src/components/menus/admin/AdminLeftMenu.vue

@@ -3,8 +3,10 @@ import MenuDefault from "@/components/menus/MenuDefault.vue";
 import { ref, watch, onMounted } from "vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { useRoute } from "vue-router";
+import i18n from "@/i18n";
 import { isAccessibleVisibleNamedDepartment, sortByDepartmentPriorityOrder } from "@/services/departmentVisibility.js";
 import { todayLocalDateOnly } from "@/services/dateOnly.js";
+const t = (key) => i18n.global.t(key);
 // Get the department ID from the URL
 const route = useRoute();
 const department_id = route.params.departmentId || SessionUser.functions.getDepartmentIdFromUrl() || null;
@@ -145,6 +147,11 @@ const checkEmphasis = (forcefully = false) => {
   }
 };
 
+const getBookingsLabel = () =>
+  t("nav.bookings")
+  || SessionUser.objects.order_bookings?.meta?.title
+  || "Bookings";
+
 checkEmphasis(); // Initial check for emphasis
 
 // Call the checkEmphasis function on mounted
@@ -228,7 +235,7 @@ const menu_items = ref([
     hidden: SessionUser.functions.getDepartmentIdFromUrl() === undefined,
   },
   {
-    name: "Bookinger",
+    name: getBookingsLabel(),
     route: "/admin/" + SessionUser.functions.getDepartmentIdFromUrl() + "/modules/bookings",
     icon: "fas fa-exchange-alt",
     children: [],
@@ -250,7 +257,7 @@ const menu_items = ref([
         permissions: ["department_timebookings_create"],
       },
       {
-        name: "Bookinger",
+        name: getBookingsLabel(),
         route: "/admin/" + SessionUser.functions.getDepartmentIdFromUrl() + "/modules/time-bookings",
         icon: "fas fa-exchange-alt",
         children: [],

src/components/pagination/paginatedList.vue

@@ -279,7 +279,7 @@ export function usePaginatedList() {
       filter.value = filter.value ? `${filter.value},${newFilter}:${value}` : `${newFilter}:${value}`;
     }
     // Remove duplicates
-    filter.value = [...new Set(filter.value.split(','))].join(',');
+    filter.value = filter.value ? [...new Set(filter.value.split(','))].join(',') : null;
     // If the filter is empty, set it to null
     if (filter.value === '') {
       filter.value = null;

src/components/session/authenticatedRequest.vue

@@ -218,6 +218,7 @@ const buildRequestQueueOptions = (url, method, options = {}) => {
     recordRecentOnSuccess: options?.recordRecentOnSuccess,
     trackActiveRequest: options?.trackActiveRequest,
     trackProgressCounters: options?.trackProgressCounters,
+    traceContext: options?.traceContext,
   };
 
   if (isSelfServeHardwareMutation(url, method)) {

src/components/session/token/SessionUser/Objects/Brandings.vue

@@ -1,291 +1,150 @@
 <script>
 import { ObjectsGlobal } from "@/components/session/token/SessionUser/Objects/ObjectsGlobal.vue";
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
+import i18n from "@/i18n";
 
+const t = (key) => i18n.global.t(key);
 
+/**
+ * The Branding object
+ */
+export const Branding = {
+  meta: {
+    title: t("objects.branding.title"),
+    icon: "fas fa-list",
+    description: t("objects.branding.description"),
+    endpoint: "/branding",
+    labels: {
+      single: t("objects.branding.single"),
+      multiple: t("objects.branding.multiple"),
+    },
+  },
+  columns: {
+    id: {
+      label: t("objects.columns.id"),
+      type: "number",
+      sortable: true,
+      creation: { required: false },
+    },
+    name: {
+      label: t("objects.columns.name"),
+      type: "string",
+      sortable: true,
+      creation: { required: true },
+    },
+    description: {
+      label: t("objects.columns.description"),
+      type: "string",
+      sortable: true,
+      creation: { required: true },
+    },
+    cvr: {
+      label: t("user_admin.cvr"),
+      type: "number",
+      sortable: true,
+      creation: { required: true },
+    },
+    address: {
+      label: t("objects.columns.address"),
+      type: "string",
+      sortable: true,
+      creation: { required: false },
+    },
+    phone_country_code: {
+      label: t("global.phone_country_code"),
+      type: "number",
+      sortable: true,
+      creation: { required: false },
+    },
+    phone: {
+      label: t("objects.columns.phone"),
+      type: "number",
+      sortable: true,
+      creation: { required: false },
+    },
+    email: {
+      label: t("objects.columns.email"),
+      type: "string",
+      sortable: true,
+      creation: { required: false },
+    },
+    website: {
+      label: t("tables.common.website"),
+      type: "string",
+      sortable: true,
+      creation: { required: false },
+    },
+    banner: {
+      label: t("objects.columns.image"),
+      type: "string",
+      sortable: false,
+      creation: { required: false },
+    },
+    logo: {
+      label: t("objects.columns.image"),
+      type: "string",
+      sortable: false,
+      creation: { required: false },
+    },
+    favicon: {
+      label: t("objects.columns.image"),
+      type: "string",
+      sortable: false,
+      creation: { required: false },
+    },
+    signature: {
+      label: t("objects.columns.notes"),
+      type: "string",
+      sortable: false,
+      creation: { required: false },
+    },
+  },
+  add: async (brandingOrName, description = null, cvr = null) => {
+    const payload =
+      typeof brandingOrName === "object" && brandingOrName !== null
+        ? brandingOrName
+        : {
+            name: brandingOrName,
+            description,
+            cvr,
+          };
 
-    /**
-     * The Branding object
-     */
-    export const Branding = {
-      meta: {
-        title: "Branding",
-        icon: "fas fa-list",
-        description: "Oversigt over branding",
-        endpoint: "/branding",
-        labels: {
-          single: "branding",
-          multiple: "brands",
-        }
-      },
-      columns: {
-        id: {
-          label: "ID",
-          type: "number",
-          sortable: true,
-          creation: {
-            required: false
-          }
-        },
-        name: {
-          label: "Navn",
-          type: "string",
-          sortable: true,
-          creation: {
-            required: true
-          },
-        },
-        description: {
-          label: "Beskrivelse",
-          type: "string",
-          sortable: true,
-          creation: {
-            required: true
-          },
-        },
-        cvr: {
-          label: "CVR",
-          type: "number",
-          sortable: true,
-          creation: {
-            required: true
-          },
-        },
-        address: {
-          label: "Adresse",
-          type: "string",
-          sortable: true,
-          creation: {
-            required: false
-          },
-        },
-        phone_country_code: {
-          label: "Landekode",
-          type: "number",
-          sortable: true,
-          creation: {
-            required: false
-          },
-        },
-        phone: {
-          label: "Telefonnummer",
-          type: "number",
-          sortable: true,
-          creation: {
-            required: false
-          },
-        },
-        email: {
-          label: "Email",
-          type: "string",
-          sortable: true,
-          creation: {
-            required: false
-          },
-        },
-        website: {
-          label: "Hjemmeside",
-          type: "string",
-          sortable: true,
-          creation: {
-            required: false
-          },
-        },
-        banner: {
-          label: "Banner",
-          type: "string",
-          sortable: false,
-          creation: {
-            required: false
-          },
-        },
-        logo: {
-          label: "Logo",
-          type: "string",
-          sortable: false,
-          creation: {
-            required: false
-          },
-        },
-        favicon: {
-          label: "Favicon",
-          type: "string",
-          sortable: false,
-          creation: {
-            required: false
-          },
-        },
-        signature: {
-          label: "Signatur",
-          type: "string",
-          sortable: false,
-          creation: {
-            required: false
-          },
-        },
-      },
-      add: async (brandingOrName, description = null, cvr = null) => {
-        const payload = typeof brandingOrName === "object" && brandingOrName !== null
-            ? brandingOrName
-            : {
-              name: brandingOrName,
-              description: description,
-              cvr: cvr
-            };
-        return ObjectsGlobal.add.object(
-            Branding.meta.endpoint,
-            payload
-        ).then((response) => response.data.data);
-      },
-      set: {
-        all: async (id, branding) => {
-          ObjectsGlobal.clearCache();
-          return authenticatedRequest(
-              Branding.meta.endpoint,
-              "PUT",
-              {
-                id: parseInt(id),
-                ...branding,
-              }
-          ).then((response) => {
-            ObjectsGlobal.clearCache();
-            return response.data.data;
-          });
-        },
-        name: async (id, name) => {
-          return ObjectsGlobal.set.column(
-              Branding.meta.endpoint,
-              id,
-              "name",
-              name
-          )
-        },
-        description: async (id, description) => {
-          return ObjectsGlobal.set.column(
-              Branding.meta.endpoint,
-              id,
-              "description",
-              description
-          )
-        },
-        cvr: async (id, cvr) => {
-          return ObjectsGlobal.set.column(
-              Branding.meta.endpoint,
-              id,
-              "cvr",
-              parseInt(cvr)
-          )
-        },
-        address: async (id, address) => {
-          return ObjectsGlobal.set.column(
-              Branding.meta.endpoint,
-              id,
-              "address",
-              address
-          )
-        },
-        phone_country_code: async (id, phone_country_code) => {
-          return ObjectsGlobal.set.column(
-              Branding.meta.endpoint,
-              id,
-              "phone_country_code",
-              parseInt(phone_country_code)
-          )
-        },
-        phone: async (id, phone) => {
-          return ObjectsGlobal.set.column(
-              Branding.meta.endpoint,
-              id,
-              "phone",
-              parseInt(phone)
-          )
-        },
-        email: async (id, email) => {
-          return ObjectsGlobal.set.column(
-              Branding.meta.endpoint,
-              id,
-              "email",
-              email
-          )
-        },
-        website: async (id, website) => {
-          return ObjectsGlobal.set.column(
-              Branding.meta.endpoint,
-              id,
-              "website",
-              website
-          )
-        },
-        banner: async (id, banner) => {
-          return ObjectsGlobal.set.column(
-              Branding.meta.endpoint,
-              id,
-              "banner",
-              banner
-          )
-        },
-        logo: async (id, logo) => {
-          return ObjectsGlobal.set.column(
-              Branding.meta.endpoint,
-              id,
-              "logo",
-              logo
-          )
-        },
-        favicon: async (id, favicon) => {
-          return ObjectsGlobal.set.column(
-              Branding.meta.endpoint,
-              id,
-              "favicon",
-              favicon
-          )
-        },
-        signature: async (id, signature) => {
-          return ObjectsGlobal.set.column(
-              Branding.meta.endpoint,
-              id,
-              "signature",
-              signature
-          )
-        },
-      },
-      get: {
-        all: async () => {
-          return ObjectsGlobal.get.objects(Branding.meta.endpoint);
-        },
-        single: async (id) => {
-          return ObjectsGlobal.get.object(Branding.meta.endpoint, parseInt(id));
-        }
-      },
-      delete: async (id) => {
-        return ObjectsGlobal.delete.object(Branding.meta.endpoint, parseInt(id));
-      },
-      functions: {
-      },
-      /**
-       * Show the create object form
-       * @param onAfterSubmit
-       * @returns {Promise<SweetAlertResult<Awaited<any>>>}
-       */
-      showCreateObjectForm: (onAfterSubmit = null) => {
-        return ObjectsGlobal.showCreateObjectForm(Branding, onAfterSubmit);
-      },
-      /**
-       * Show the edit object field form
-       * @param id
-       * @param column
-       * @param value
-       * @param onAfterSubmit
-       * @returns {Promise<SweetAlertResult<Awaited<any>>>}
-       */
-      showEditObjectFieldForm: (id, column, value, onAfterSubmit = null) => {
-        return ObjectsGlobal.showEditObjectFieldForm(
-            Branding,
-            id,
-            column,
-            value,
-            onAfterSubmit
-        );
-      }
-    };
+    return ObjectsGlobal.add.object(Branding.meta.endpoint, payload).then((response) => response.data.data);
+  },
+  set: {
+    all: async (id, branding) => {
+      ObjectsGlobal.clearCache();
+      return authenticatedRequest(Branding.meta.endpoint, "PUT", {
+        id: parseInt(id, 10),
+        ...branding,
+      }).then((response) => {
+        ObjectsGlobal.clearCache();
+        return response.data.data;
+      });
+    },
+    name: async (id, name) => ObjectsGlobal.set.column(Branding.meta.endpoint, id, "name", name),
+    description: async (id, description) =>
+      ObjectsGlobal.set.column(Branding.meta.endpoint, id, "description", description),
+    cvr: async (id, cvr) => ObjectsGlobal.set.column(Branding.meta.endpoint, id, "cvr", parseInt(cvr, 10)),
+    address: async (id, address) => ObjectsGlobal.set.column(Branding.meta.endpoint, id, "address", address),
+    phone_country_code: async (id, phone_country_code) =>
+      ObjectsGlobal.set.column(Branding.meta.endpoint, id, "phone_country_code", parseInt(phone_country_code, 10)),
+    phone: async (id, phone) => ObjectsGlobal.set.column(Branding.meta.endpoint, id, "phone", parseInt(phone, 10)),
+    email: async (id, email) => ObjectsGlobal.set.column(Branding.meta.endpoint, id, "email", email),
+    website: async (id, website) => ObjectsGlobal.set.column(Branding.meta.endpoint, id, "website", website),
+    banner: async (id, banner) => ObjectsGlobal.set.column(Branding.meta.endpoint, id, "banner", banner),
+    logo: async (id, logo) => ObjectsGlobal.set.column(Branding.meta.endpoint, id, "logo", logo),
+    favicon: async (id, favicon) => ObjectsGlobal.set.column(Branding.meta.endpoint, id, "favicon", favicon),
+    signature: async (id, signature) => ObjectsGlobal.set.column(Branding.meta.endpoint, id, "signature", signature),
+  },
+  get: {
+    all: async () => ObjectsGlobal.get.objects(Branding.meta.endpoint),
+    single: async (id) => ObjectsGlobal.get.object(Branding.meta.endpoint, parseInt(id, 10)),
+  },
+  delete: async (id) => ObjectsGlobal.delete.object(Branding.meta.endpoint, parseInt(id, 10)),
+  functions: {},
+  showCreateObjectForm: (onAfterSubmit = null) => ObjectsGlobal.showCreateObjectForm(Branding, onAfterSubmit),
+  showEditObjectFieldForm: (id, column, value, onAfterSubmit = null) =>
+    ObjectsGlobal.showEditObjectFieldForm(Branding, id, column, value, onAfterSubmit),
+};
 </script>

src/components/session/token/SessionUser/Objects/CollectedOrderInvoices.vue

@@ -3,7 +3,7 @@ import Swal from "sweetalert2";
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
 import { ObjectsGlobal } from "@/components/session/token/SessionUser/Objects/ObjectsGlobal.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
-import {ref} from "vue";
+import {createApp, h, ref, watch} from "vue";
 import i18n from '@/i18n';
 import {
   buildCollectedInvoiceEconomicPayload,
@@ -16,8 +16,8 @@ import {
   retryEconomicTransferJob,
 } from "@/services/economicTransferQueue.js";
 
-import {createApp} from "vue";
 import PickCustomerInvoiceCollectionModal from "@/components/displays/modals/PickCustomerInvoiceCollectionModal.vue";
+import BuefyDateField from "@/components/forms/BuefyDateField.vue";
 
 const t = (key) => i18n.global.t(key);
 
@@ -177,16 +177,63 @@ const normalizeClosedAtForApi = (value) => {
   return `${parsedDate.getFullYear()}-${padTwoDigits(parsedDate.getMonth() + 1)}-${padTwoDigits(parsedDate.getDate())}`;
 };
 
+const mountSweetAlertDateField = ({ mountId, inputId, initialValue, dataTestid }) => {
+  const mountElement = document.getElementById(mountId);
+  const inputElement = document.getElementById(inputId);
+
+  if (!mountElement || !inputElement) {
+    return {
+      cleanup: () => {},
+      setValue: () => {},
+    };
+  }
+
+  const value = ref(initialValue || "");
+  const app = createApp({
+    setup() {
+      watch(value, (nextValue) => {
+        inputElement.value = nextValue || "";
+      }, { immediate: true });
+
+      return () => h(BuefyDateField, {
+        modelValue: value.value,
+        valueType: "string",
+        dataTestid,
+        "onUpdate:modelValue": (nextValue) => {
+          value.value = nextValue || "";
+        },
+      });
+    },
+  });
+
+  app.use(i18n);
+  app.mount(mountElement);
+
+  return {
+    cleanup: () => {
+      app.unmount();
+    },
+    setValue: (nextValue) => {
+      const normalizedValue = nextValue || "";
+      value.value = normalizedValue;
+      inputElement.value = normalizedValue;
+    },
+  };
+};
+
 const showEditClosedAtObjectFieldForm = async (id, value, onAfterSubmit = null) => {
   const inputId = 'collected-order-invoice-closed-at-input';
+  const pickerId = 'collected-order-invoice-closed-at-picker';
   const clearButtonId = 'collected-order-invoice-closed-at-clear-button';
+  let dateField = null;
 
   return Swal.fire({
     title: ObjectsGlobal.language.field(CollectedOrderInvoices, 'closed_at'),
     html: `<div class="field">
       <label class="label has-text-black">${CollectedOrderInvoices.columns.closed_at.label}</label>
       <div class="control mb-3">
-        <input class="input has-background-light has-text-black" type="date" id="${inputId}" value="${normalizeClosedAtForDateInput(value)}">
+        <input type="hidden" id="${inputId}" value="${normalizeClosedAtForDateInput(value)}">
+        <div id="${pickerId}" data-testid="collected-order-invoice-closed-at-picker"></div>
       </div>
       <div class="control">
         <button id="${clearButtonId}" type="button" class="button is-light is-small">${ObjectsGlobal.language.clear}</button>
@@ -196,14 +243,23 @@ const showEditClosedAtObjectFieldForm = async (id, value, onAfterSubmit = null)
     confirmButtonText: ObjectsGlobal.language.save,
     cancelButtonText: ObjectsGlobal.language.cancel,
     didOpen: () => {
+      dateField = mountSweetAlertDateField({
+        mountId: pickerId,
+        inputId,
+        initialValue: normalizeClosedAtForDateInput(value),
+        dataTestid: "collected-order-invoice-closed-at-input",
+      });
       const clearButton = document.getElementById(clearButtonId);
-      const inputElement = document.getElementById(inputId);
-      if (clearButton && inputElement) {
+      if (clearButton) {
         clearButton.addEventListener('click', () => {
-          inputElement.value = '';
+          dateField?.setValue('');
         });
       }
     },
+    willClose: () => {
+      dateField?.cleanup();
+      dateField = null;
+    },
     preConfirm: () => {
       const inputElement = document.getElementById(inputId);
       if (!inputElement) {
@@ -460,6 +516,43 @@ export const CollectedOrderInvoices = {
         throw error;
       });
     },
+    bulk_action_preview: async (action, invoiceCollectionIds = [], options = {}, locale = null) => {
+      return authenticatedRequest('/collected-invoices/bulk-actions/preview', 'POST', {
+        action,
+        invoice_collection_ids: invoiceCollectionIds.map((id) => parseInt(id)).filter((id) => Number.isInteger(id) && id > 0),
+        options,
+        ...(locale ? { locale } : {}),
+      }).then((response) => {
+        console.log(response);
+        return response;
+      }).catch((error) => {
+        console.log(error);
+        throw error;
+      });
+    },
+    bulk_action_apply: async ({
+      preview_id,
+      action,
+      invoice_collection_ids = [],
+      options = {},
+      confirmation_text,
+      locale = null,
+    }) => {
+      return authenticatedRequest('/collected-invoices/bulk-actions/apply', 'POST', {
+        preview_id,
+        action,
+        invoice_collection_ids: invoice_collection_ids.map((id) => parseInt(id)).filter((id) => Number.isInteger(id) && id > 0),
+        options,
+        confirmation_text,
+        ...(locale ? { locale } : {}),
+      }).then((response) => {
+        console.log(response);
+        return response;
+      }).catch((error) => {
+        console.log(error);
+        throw error;
+      });
+    },
     move_to_customer: async (id, customerNumber) => {
       const invoiceCollectionId = parseInt(id);
       const targetCustomerNumber = parseInt(customerNumber);

src/components/session/token/SessionUser/Objects/DepartmentDailyReportComplaints.vue

@@ -1,7 +1,9 @@
 <script>
 import Swal from "sweetalert2";
+import { createApp, h, ref, watch } from "vue";
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import BuefyDateField from "@/components/forms/BuefyDateField.vue";
 import i18n from "@/i18n";
 import {
   COMPLAINT_CUSTOMER_SEARCH_DEBOUNCE_MS,
@@ -23,6 +25,8 @@ const EDIT_COMPLAINT_CUSTOMER_RESULTS_WRAPPER_ID = "superuser-complaint-customer
 const EDIT_COMPLAINT_CUSTOMER_RESULTS_ID = "superuser-complaint-customer-results";
 const EDIT_COMPLAINT_CUSTOMER_HELP_ID = "superuser-complaint-customer-help";
 const EDIT_COMPLAINT_CUSTOMER_CLEAR_ID = "superuser-complaint-customer-clear";
+const EDIT_COMPLAINT_WASH_DATE_INPUT_ID = "superuser-complaint-wash-date";
+const EDIT_COMPLAINT_WASH_DATE_PICKER_ID = "superuser-complaint-wash-date-picker";
 const EDIT_COMPLAINT_CUSTOMER_SEARCH_WRAPPER_STYLE = "position: relative;";
 const EDIT_COMPLAINT_CUSTOMER_RESULTS_WRAPPER_STYLE = "position: absolute; top: calc(100% + 4px); left: 0; right: 0; width: 100%; z-index: 30;";
 const EDIT_COMPLAINT_CUSTOMER_RESULTS_MENU_STYLE = "display: block; position: static; width: 100%; padding-top: 0;";
@@ -67,6 +71,41 @@ const initialComplaintCustomerSelection = (complaint) => normalizeComplaintCusto
 const initialComplaintWashDate = (complaint) => String(complaint?.wash_date ?? "").trim();
 const initialComplaintCategory = (complaint) => String(complaint?.category ?? "").trim();
 
+const mountSweetAlertDateField = ({ mountId, inputId, initialValue, dataTestid }) => {
+  const mountElement = document.getElementById(mountId);
+  const inputElement = document.getElementById(inputId);
+
+  if (!mountElement || !inputElement) {
+    return () => {};
+  }
+
+  const app = createApp({
+    setup() {
+      const value = ref(initialValue || "");
+
+      watch(value, (nextValue) => {
+        inputElement.value = nextValue || "";
+      }, { immediate: true });
+
+      return () => h(BuefyDateField, {
+        modelValue: value.value,
+        valueType: "string",
+        dataTestid,
+        "onUpdate:modelValue": (nextValue) => {
+          value.value = nextValue || "";
+        },
+      });
+    },
+  });
+
+  app.use(i18n);
+  app.mount(mountElement);
+
+  return () => {
+    app.unmount();
+  };
+};
+
 const buildEditComplaintForm = (complaint, departments) => {
   const selectedCustomer = initialComplaintCustomerSelection(complaint);
   const selectedCustomerLabel = formatComplaintCustomerLabel(selectedCustomer);
@@ -136,15 +175,14 @@ const buildEditComplaintForm = (complaint, departments) => {
       ></p>
     </div>
     <div class="field">
-      <label class="label has-text-black" for="superuser-complaint-wash-date">Dato for vask</label>
+      <label class="label has-text-black" for="${EDIT_COMPLAINT_WASH_DATE_INPUT_ID}">Dato for vask</label>
       <div class="control">
         <input
-          id="superuser-complaint-wash-date"
-          data-testid="superuser-complaint-edit-wash-date"
-          class="input has-background-light has-text-black"
-          type="date"
+          id="${EDIT_COMPLAINT_WASH_DATE_INPUT_ID}"
+          type="hidden"
           value="${escapeHtml(washDate)}"
         >
+        <div id="${EDIT_COMPLAINT_WASH_DATE_PICKER_ID}" data-testid="superuser-complaint-edit-wash-date"></div>
       </div>
     </div>
     <div class="field">
@@ -497,6 +535,7 @@ export const DepartmentDailyReportComplaints = {
       );
       const customerLookupState = createComplaintCustomerLookupState(complaint);
       let cleanupCustomerLookup = null;
+      let cleanupDateField = null;
 
       return Swal.fire({
         title: t("superuser.pages.complaints.edit_title"),
@@ -507,12 +546,22 @@ export const DepartmentDailyReportComplaints = {
         focusConfirm: false,
         didOpen: () => {
           cleanupCustomerLookup = setupComplaintCustomerLookupField(customerLookupState);
+          cleanupDateField = mountSweetAlertDateField({
+            mountId: EDIT_COMPLAINT_WASH_DATE_PICKER_ID,
+            inputId: EDIT_COMPLAINT_WASH_DATE_INPUT_ID,
+            initialValue: initialComplaintWashDate(complaint),
+            dataTestid: "superuser-complaint-edit-wash-date-picker",
+          });
         },
         willClose: () => {
           if (typeof cleanupCustomerLookup === "function") {
             cleanupCustomerLookup();
             cleanupCustomerLookup = null;
           }
+          if (typeof cleanupDateField === "function") {
+            cleanupDateField();
+            cleanupDateField = null;
+          }
         },
         preConfirm: async () => {
           try {
@@ -525,7 +574,7 @@ export const DepartmentDailyReportComplaints = {
             }
 
             const washDate = (
-              document.getElementById("superuser-complaint-wash-date")?.value || ""
+              document.getElementById(EDIT_COMPLAINT_WASH_DATE_INPUT_ID)?.value || ""
             ).trim();
             if (washDate === "") {
               throw new Error("Dato for vask er påkrævet.");

src/components/session/token/SessionUser/Objects/DepartmentTimeBookingsEntries.vue

@@ -3,6 +3,13 @@ import { ObjectsGlobal } from "@/components/session/token/SessionUser/Objects/Ob
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { formatLocalDateOnly, todayLocalDateOnly } from "@/services/dateOnly.js";
 
+const DATE_ONLY_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+
+const normalizeDateFilterValue = (value) => {
+  const formatted = formatLocalDateOnly(value);
+  return DATE_ONLY_PATTERN.test(formatted) ? formatted : null;
+};
+
 /**
  * The DepartmentTimeBookingsEntries object
  */
@@ -209,21 +216,23 @@ export const DepartmentTimeBookingsEntries = {
     getPublicEntries: async (departmentId, dateFrom = null, dateTo = null) => {
       /**
        * Example usage:
-       * https://api.truckwash.dk:4433/department/timebookings/entries/public?id=1&filters=created_at-date_from:2025-04-01,created_at-date_to:2025-05-30&order=created_at:desc
+       * https://api.truckwash.dk:4433/department/timebookings/entries/public?id=1&filters=start-date_from:2025-04-01,start-date_to:2025-05-30&order=start:asc
        * This will return all public available times for the department with ID 1
        * The dateFrom and dateTo parameters are optional and can be used to filter the results by date range.
        * If not provided, it will return all available times.
        */
-      // Parse the dateFrom and dateTo parameters to ensure they are in the correct format (YYYY-MM-DD)
       if (!departmentId || isNaN(departmentId)) {
         console.warn('Invalid department ID:', departmentId);
         return [];
       }
-      if (dateFrom && !/^\d{4}-\d{2}-\d{2}$/.test(dateFrom)) {
+      dateFrom = normalizeDateFilterValue(dateFrom);
+      dateTo = normalizeDateFilterValue(dateTo);
+
+      if (dateFrom && !DATE_ONLY_PATTERN.test(dateFrom)) {
         console.warn('Invalid dateFrom format:', dateFrom, 'Expected format: YYYY-MM-DD');
         dateFrom = null;
       }
-      if (dateTo && !/^\d{4}-\d{2}-\d{2}$/.test(dateTo)) {
+      if (dateTo && !DATE_ONLY_PATTERN.test(dateTo)) {
         console.warn('Invalid dateTo format:', dateTo, 'Expected format: YYYY-MM-DD');
         dateTo = null;
       }
@@ -243,7 +252,8 @@ export const DepartmentTimeBookingsEntries = {
           'GET',
           {
             id: departmentId,
-            filters: `created_at-date_from:${dateFrom || ''},created_at-date_to:${dateTo || ''}`,
+            filters: `start-date_from:${dateFrom || ''},start-date_to:${dateTo || ''}`,
+            order: "start:asc",
           },
       ).then(response => {
         return response.data.data;

src/components/session/token/SessionUser/Objects/DepartmentVariables.vue

@@ -4,24 +4,27 @@ import { authenticatedRequest } from "@/components/session/authenticatedRequest.
 import { ObjectsGlobal } from "@/components/session/token/SessionUser/Objects/ObjectsGlobal.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import {ref} from "vue";
+import i18n from '@/i18n';
+
+const t = (key) => i18n.global.t(key);
 
 /**
  * The DepartmentVariables object
  */
 export const DepartmentVariables = {
   meta: {
-    title: "Afdelingsvariabler",
+    title: t("objects.department_variables.title"),
     icon: "fas fa-list",
-    description: "Oversigt over afdelingsvariabler",
+    description: t("objects.department_variables.description"),
     endpoint: "/superuser/department/variables",
     labels: {
-      single: "variabel",
-      multiple: "variabler"
+      single: t("objects.department_variables.single"),
+      multiple: t("objects.department_variables.multiple"),
     }
   },
   columns: {
     id: {
-      label: "ID",
+      label: t("objects.columns.id"),
       type: "number",
       sortable: true,
       creation: {
@@ -29,7 +32,7 @@ export const DepartmentVariables = {
       }
     },
     department_id: {
-      label: "Afdeling",
+      label: t("objects.columns.department_id"),
       type: "select",
       sortable: true,
       creation: {
@@ -40,7 +43,7 @@ export const DepartmentVariables = {
       }
     },
     variable: {
-      label: "Variabel",
+      label: t("objects.columns.key"),
       type: "string",
       sortable: true,
       creation: {
@@ -48,7 +51,7 @@ export const DepartmentVariables = {
       }
     },
     value: {
-      label: "Værdi",
+      label: t("objects.columns.value"),
       type: "string",
       sortable: true,
       creation: {
@@ -110,4 +113,4 @@ export const DepartmentVariables = {
     );
   }
 };
-</script>
+</script>

src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue

@@ -241,6 +241,7 @@ export const ObjectsGlobal = {
         return {
           get at_hour() { return t('global.time.at_hour'); },
           get today() { return t('common.today'); },
+          get anytime() { return t('global.text.anytime'); },
           get yesterday() { return t('global.time.yesterday'); },
           get this_month() { return t('global.time.this_month'); },
           get last_month() { return t('global.time.last_month'); },
@@ -300,6 +301,7 @@ export const ObjectsGlobal = {
       get invoice() { return t('common.invoice'); },
       get text() {
         return {
+          get anytime() { return t('global.text.anytime'); },
           get today() { return t('common.today'); },
           get yesterday() { return t('global.text.yesterday'); },
           get this_week() { return t('global.text.this_week'); },
@@ -307,6 +309,7 @@ export const ObjectsGlobal = {
           get last_week() { return t('global.text.last_week'); },
           get this_month() { return t('global.text.this_month'); },
           get last_month() { return t('global.text.last_month'); },
+          get other_month() { return t('global.text.other_month'); },
           get this_year() { return t('global.text.this_year'); },
           get same_week_last_year() { return t('global.text.same_week_last_year'); },
           get same_month_last_year() { return t('global.text.same_month_last_year'); },

src/components/session/token/SessionUser/Objects/OrderBookings.vue

@@ -2,6 +2,13 @@
 import { ObjectsGlobal } from "@/components/session/token/SessionUser/Objects/ObjectsGlobal.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { getDepartmentName } from "@/components/pagination/departmentTabs.vue";
+import i18n from "@/i18n";
+
+const t = (key) => i18n.global.t(key);
+const tf = (key, fallback) => {
+  const value = t(key);
+  return value === key ? fallback : value;
+};
 
 const normalizeCompletionSafetySeal = (safetySeal) => {
   if (safetySeal === null || safetySeal === undefined) {
@@ -27,13 +34,22 @@ const normalizeCompletionSafetySeal = (safetySeal) => {
  */
 export const OrderBookings = {
   meta: {
-    title: "Bookinger",
+    get title() {
+      return tf("nav.bookings", "Bookings");
+    },
     icon: "fas fa-list",
-    description: "Oversigt over order bookinger",
+    get description() {
+      const multipleLabel = tf("nav.bookings", "Bookings");
+      return `Oversigt over ${String(multipleLabel).toLowerCase()}`;
+    },
     endpoint: "/order-bookings",
     labels: {
-      single: "booking",
-      multiple: "bookinger",
+      get single() {
+        return tf("objects.order_bookings.single", "Booking");
+      },
+      get multiple() {
+        return tf("nav.bookings", "Bookings");
+      },
       fields: {
         names: {
           customer_number: {

src/components/session/token/SessionUser/Objects/SubuserGrants.vue

@@ -3,6 +3,7 @@ import { ObjectsGlobal } from "@/components/session/token/SessionUser/Objects/Ob
 import Swal from "sweetalert2";
 import { createApp, h, ref } from "vue";
 import SubuserGrantPermissionNodes from "@/components/displays/selectors/SubuserGrantPermissionNodes.vue";
+import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
 
 /**
  * The SubuserGrants object
@@ -122,18 +123,31 @@ export const SubuserGrants = {
     getPermissionNodes: async () => {
       return ObjectsGlobal.get.objects("/subusers/permission-nodes");
     },
-    showPermissionEditForm: async (grant, refreshCallback) => {
+    getPermissionTemplates: async () => {
+      return ObjectsGlobal.get.objects("/subusers/permission-templates");
+    },
+    showPermissionEditForm: async (grant, refreshCallback, options = {}) => {
       const container = document.createElement("div");
       container.id = "permission-edit-container";
 
       const permissionsRef = ref(grant.permissions || []);
+      const accessRef = ref({
+        permission_template_key: grant.permission_template_key || "custom",
+        permissions: grant.permissions || [],
+      });
       const app = createApp({
         render() {
           return h(SubuserGrantPermissionNodes, {
             grant: grant,
             permissions: permissionsRef.value,
+            templateKey: accessRef.value.permission_template_key,
+            allowAdvanced: Boolean(options.allowAdvanced),
             "onUpdate:permissions": (newPermissions) => {
               permissionsRef.value = newPermissions;
+            },
+            "onUpdate:access": (newAccess) => {
+              accessRef.value = newAccess;
+              permissionsRef.value = newAccess.permissions || [];
             }
           });
         }
@@ -150,10 +164,27 @@ export const SubuserGrants = {
         cancelButtonText: "Annuller",
         preConfirm: async () => {
           try {
-            await SubuserGrants.set.permissions(grant.id, permissionsRef.value);
+            const accessPayload = accessRef.value?.permission_template_key
+              && accessRef.value.permission_template_key !== "custom"
+              ? { permission_template_key: accessRef.value.permission_template_key }
+              : { permissions: permissionsRef.value };
+
+            if (typeof options.saveAccess === "function") {
+              await options.saveAccess(accessPayload);
+            } else if (typeof options.savePermissions === "function") {
+              await options.savePermissions(permissionsRef.value);
+            } else {
+              await authenticatedRequest(
+                SubuserGrants.meta.endpoint,
+                "PUT",
+                { id: grant.id, ...accessPayload },
+                ObjectsGlobal.errorHandler.handleError
+              );
+            }
             grant.permissions = [...permissionsRef.value];
-            return permissionsRef.value;
-          } catch (error) {
+            grant.permission_template_key = accessRef.value?.permission_template_key || "custom";
+            return accessPayload;
+          } catch (_error) {
             Swal.showValidationMessage("Kunne ikke gemme tilladelserne.");
             return false;
           }

src/components/session/token/SessionUser/Objects/Subusers.vue

@@ -1,6 +1,9 @@
 <script>
 import Swal from "sweetalert2";
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
+import i18n from "@/i18n";
+
+const t = (key, values = undefined) => i18n.global.t(key, values);
 
 const escapeHtml = (value) => String(value ?? "")
   .replace(/&/g, "&amp;")
@@ -9,6 +12,15 @@ const escapeHtml = (value) => String(value ?? "")
   .replace(/"/g, "&quot;")
   .replace(/'/g, "&#039;");
 
+const buildAccessTemplateOptions = (templates = [], selectedKey = "driver") => templates
+  .filter((template) => template?.key && template.key !== "custom")
+  .map((template) => `
+    <option value="${escapeHtml(template.key)}" ${template.key === selectedKey ? "selected" : ""}>
+      ${escapeHtml(template.label || template.key)}
+    </option>
+  `)
+  .join("");
+
 const buildInviteFormHtml = (defaults = {}, options = {}) => `
   <div class="subuser-form">
     ${options.includeCustomerNumber ? `
@@ -46,6 +58,17 @@ const buildInviteFormHtml = (defaults = {}, options = {}) => `
     <p class="help">
       Chaufføren ejer selv sin konto. E-mail, brugernavn og øvrige profiloplysninger udfyldes af chaufføren ved accept.
     </p>
+    <div class="field mt-4">
+      <label class="label">${escapeHtml(t("superuser.driver_access.form_label"))}</label>
+      <div class="control">
+        <div class="select is-fullwidth">
+          <select id="subuser-form-permission-template">
+            ${buildAccessTemplateOptions(options.permissionTemplates || [], defaults.permission_template_key || "driver")}
+          </select>
+        </div>
+      </div>
+      <p class="help">${escapeHtml(t("superuser.driver_access.form_help"))}</p>
+    </div>
   </div>
 `;
 
@@ -54,6 +77,7 @@ const readInviteFormValues = (options = {}) => {
   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 permissionTemplateKey = document.getElementById("subuser-form-permission-template")?.value?.trim() || "driver";
 
   if (options.includeCustomerNumber && !/^\d+$/.test(customerNumberRaw)) {
     Swal.showValidationMessage("Kundenummer skal udfyldes.");
@@ -80,6 +104,7 @@ const readInviteFormValues = (options = {}) => {
     name,
     phone_country_code: Number.parseInt(phoneCountryCodeRaw, 10),
     phone: Number.parseInt(phoneRaw, 10),
+    permission_template_key: permissionTemplateKey,
   };
 };
 
@@ -106,10 +131,10 @@ const showInviteFeedback = async (response) => {
   });
 };
 
-const submitInviteForm = async ({ title, confirmButtonText, defaults = {}, endpoint, method, payloadBuilder, includeCustomerNumber = false }) => {
+const submitInviteForm = async ({ title, confirmButtonText, defaults = {}, endpoint, method, payloadBuilder, includeCustomerNumber = false, permissionTemplates = [] }) => {
   const result = await Swal.fire({
     title,
-    html: buildInviteFormHtml(defaults, { includeCustomerNumber }),
+    html: buildInviteFormHtml(defaults, { includeCustomerNumber, permissionTemplates }),
     width: 640,
     focusConfirm: false,
     showCancelButton: true,
@@ -145,27 +170,51 @@ export const Subusers = {
     endpoint: "/subusers",
   },
   functions: {
-    permissionSummary(permissions = []) {
+    permissionSummary(permissions = [], templateKey = null, permissionGroups = []) {
+      const templateLabel = (key) => t(`superuser.driver_access.templates.${key}.label`);
+      const customSummary = (summary) => t("superuser.driver_access.summary.custom_summary", { summary });
+
+      if (templateKey && templateKey !== "custom") {
+        return templateLabel(templateKey);
+      }
+
+      if (Array.isArray(permissionGroups) && permissionGroups.length > 0) {
+        const labels = permissionGroups
+          .map((group) => t(`superuser.driver_access.groups.${group.key}`))
+          .filter(Boolean);
+        return customSummary(labels.join(", "));
+      }
+
       if (!Array.isArray(permissions) || permissions.length === 0) {
-        return "Ingen tilladelser";
+        return t("superuser.driver_access.summary.no_permissions");
       }
 
       const normalized = permissions.filter(Boolean);
-      if (normalized.length <= 3) {
-        return normalized.join(", ");
-      }
-
-      return `${normalized.slice(0, 3).join(", ")} +${normalized.length - 3}`;
+      return customSummary(t("superuser.driver_access.summary.permission_count", { count: normalized.length }));
     },
     async showInviteForm(refreshCallback = null, options = {}) {
       const superuser = Boolean(options.superuser);
+      const userId = options.userId || null;
+      let permissionTemplates = [];
+      try {
+        const accessResponse = await authenticatedRequest("/subusers/permission-templates", "GET");
+        const accessModel = accessResponse?.data?.data || accessResponse?.data || {};
+        permissionTemplates = Array.isArray(accessModel?.templates) ? accessModel.templates : [];
+      } catch (_error) {
+        permissionTemplates = [];
+      }
       const response = await submitInviteForm({
         title: "Invitér chauffør",
         confirmButtonText: "Send invitation",
-        endpoint: superuser ? "/superuser/subusers/invite" : "/subusers/invite",
+        endpoint: userId
+          ? `/superuser/users/${encodeURIComponent(userId)}/subusers/invite`
+          : superuser
+            ? "/superuser/subusers/invite"
+            : "/subusers/invite",
         method: "POST",
         payloadBuilder: (values) => values,
-        includeCustomerNumber: superuser,
+        includeCustomerNumber: superuser && !userId,
+        permissionTemplates,
       });
 
       if (!response) {
@@ -181,11 +230,21 @@ export const Subusers = {
     },
     async resendInvite(subuser, refreshCallback = null, options = {}) {
       const superuser = Boolean(options.superuser);
+      const userId = options.userId || null;
       try {
+        const endpoint = userId
+          ? `/superuser/users/${encodeURIComponent(userId)}/subusers/${encodeURIComponent(subuser.id)}/invite/resend`
+          : superuser ? "/superuser/subusers/invite/resend" : "/subusers/invite/resend";
         const response = await authenticatedRequest(
-          superuser ? "/superuser/subusers/invite/resend" : "/subusers/invite/resend",
+          endpoint,
           "POST",
-          { id: subuser.id, ...(subuser.grant_id ? { grant_id: subuser.grant_id } : {}) }
+          userId
+            ? {}
+            : {
+                id: subuser.id,
+                ...(subuser.grant_id ? { grant_id: subuser.grant_id } : {}),
+                ...(superuser && subuser.customer_number ? { customer_number: subuser.customer_number } : {}),
+              }
         );
         await showInviteFeedback(response);
         if (typeof refreshCallback === "function") {

src/components/session/token/SessionUser/Objects/Vehicles.vue

@@ -196,6 +196,27 @@ export const Vehicles = {
         id
     );
   },
+  scoped: {
+    endpoint: (userId) => `/superuser/users/${encodeURIComponent(userId)}/vehicles`,
+    add: async (userId, type, reg, wash_subscription = false, customer_id = null, reference = null) => {
+      return ObjectsGlobal.add.object(
+          Vehicles.scoped.endpoint(userId),
+          {
+            type: parseInt(type),
+            reg,
+            wash_subscription: ObjectsGlobal.parse.boolean(wash_subscription),
+            ...(customer_id ? { customer_id: parseInt(customer_id) } : {}),
+            ...(reference ? { reference } : {}),
+          }
+      );
+    },
+    set: async (userId, id, column, value) => {
+      return ObjectsGlobal.set.column(Vehicles.scoped.endpoint(userId), id, column, value);
+    },
+    delete: async (userId, id) => {
+      return ObjectsGlobal.delete.object(Vehicles.scoped.endpoint(userId), id);
+    },
+  },
   functions: {
     showDeleteObjectForm: async (id, onAfterSubmit = null) => {
       return ObjectsGlobal.showDeleteObjectForm(
@@ -204,8 +225,17 @@ export const Vehicles = {
           onAfterSubmit
       );
     },
+    showDeleteObjectForUserForm: async (userId, id, onAfterSubmit = null) => {
+      return ObjectsGlobal.showDeleteObjectForm(
+          {
+            ...Vehicles,
+            delete: (vehicleId) => Vehicles.scoped.delete(userId, vehicleId),
+          },
+          parseInt(id),
+          onAfterSubmit
+      );
+    },
     showCreateObjectForCustomerForm: async (customerId, onAfterSubmit = null) => {
-      console.log('Create vehicle for customer', customerId);
       return ObjectsGlobal.showCreateObjectForm(
           Vehicles,
           onAfterSubmit,
@@ -214,6 +244,52 @@ export const Vehicles = {
           },
       );
     },
+    showCreateObjectForUserForm: async (userId, customerId, onAfterSubmit = null) => {
+      return ObjectsGlobal.showCreateObjectForm(
+          {
+            ...Vehicles,
+            add: (type, reg, washSubscription, scopedCustomerId, reference = null) => Vehicles.scoped.add(
+                userId,
+                type,
+                reg,
+                washSubscription,
+                scopedCustomerId,
+                reference
+            ),
+          },
+          onAfterSubmit,
+          {
+            customer_id: parseInt(customerId),
+          },
+      );
+    },
+    showEditObjectFieldForUserForm: async (userId, id, column, value, onAfterSubmit = null, options = {}) => {
+      const html = await ObjectsGlobal.generateEditObjectFieldForm(Vehicles, column, value, options);
+      return Swal.fire({
+        title: ObjectsGlobal.language.field(Vehicles, column),
+        html,
+        showCancelButton: true,
+        confirmButtonText: ObjectsGlobal.language.save,
+        cancelButtonText: ObjectsGlobal.language.cancel,
+        preConfirm: () => {
+          try {
+            const newValue = document.getElementById(column).value;
+            return Vehicles.scoped.set(userId, id, column, newValue).then(() => {
+              if (onAfterSubmit !== null) {
+                return Promise.resolve(onAfterSubmit());
+              }
+              return null;
+            }).catch((error) => {
+              Swal.showValidationMessage(`Fejl: ${error.message || error}`);
+              return false;
+            });
+          } catch (error) {
+            Swal.showValidationMessage(`Fejl: ${error}`);
+            return false;
+          }
+        },
+      });
+    },
     getVehicleStatus: async (registrationNumber, department = null) => {
       // Get the vehicle status
       return ObjectsGlobal.get.object(

src/components/session/user/UserVehicleRequest.vue

@@ -2,7 +2,6 @@
 import {ref} from "vue";
 import {authenticatedRequest} from "@/components/session/authenticatedRequest.vue";
 import { parseError } from "@/components/request/HandleGlobalError.vue";
-import Swal from "sweetalert2";
 
 // Cached vehicles
 export const vehicles = ref([]);
@@ -21,21 +20,24 @@ export const getUsersVehicles = async () => {
       );
 }
 
-export const addVehicleUser = async (reg, type, notes) => {
+export const addVehicleUser = async (reg, type, reference = null) => {
   return await authenticatedRequest("/vehicles", "POST", {
     reg,
     type: parseInt(type),
     wash_subscription: false,
-    ...(notes ? { notes } : {}),
+    ...(reference ? { reference } : {}),
   })
       .then(
           (response) => {
-            vehicles.value.push(response.data.data);
+            const vehicle = response.data.data;
+            vehicles.value.push(vehicle);
+            return vehicle;
           }
       )
       .catch(
           (error) => {
             parseError(error, 'addVehicleUser');
+            throw error;
           }
       );
 }

src/components/shop/OrdersItems.vue

@@ -24,14 +24,17 @@ export const createOrderItem = (order_id, product_id, quantity, related_item_id
   if (!Number.isInteger(normalizedOrderId) || normalizedOrderId <= 0) {
     return Promise.reject(new Error('Order ID is required'));
   }
-  return axios.post(API_URL + '/order/items', {
+  const payload = {
     order_id: normalizedOrderId,
     product_id,
     quantity,
     related_item_id,
-    notes,
-    price: forcePrice
-  }, {
+    notes
+  };
+  if (forcePrice !== null && forcePrice !== undefined) {
+    payload.price = forcePrice;
+  }
+  return axios.post(API_URL + '/order/items', payload, {
     headers: {
       Authorization: `Bearer ${token}`
     }

src/components/shop/POSDepartmentProcess.vue

@@ -11,6 +11,8 @@ 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 {
+  getCustomerProductRestriction,
+  getProductCategoryRestrictionForCustomer,
   isProductCategoryRestrictedForCustomer,
   isProductRestrictedForCustomer,
 } from "@/features/customer/customerProductRules.js";
@@ -1471,11 +1473,6 @@ const getOrderItemQuantity = (item) => {
   return Number.isInteger(parsedQuantity) && parsedQuantity > 0 ? parsedQuantity : null;
 };
 
-const getOrderItemPrice = (item) => {
-  const parsedPrice = Number(item?.price ?? item?.product?.price);
-  return Number.isFinite(parsedPrice) ? parsedPrice : null;
-};
-
 const getOrderItemNotes = (item) => {
   const notesValue = String(item?.notes ?? item?.product?.notes ?? "").trim();
   return notesValue === "" ? null : notesValue;
@@ -1507,8 +1504,7 @@ const createCopiedOrderItem = (targetOrderId, sourceItem, relatedItemId = null)
     productId,
     quantity,
     relatedItemId,
-    getOrderItemNotes(sourceItem),
-    getOrderItemPrice(sourceItem)
+    getOrderItemNotes(sourceItem)
   );
 };
 
@@ -1618,8 +1614,12 @@ export const customerUsesPONumbers = () => {
 };
 
 /** Check if the product category is allowed */
-export const productCategoryAllowed = (category) => {
-  return !isProductCategoryRestrictedForCustomer(category, customer_attributes.value);
+export const getProductCategoryRestriction = (category, options = {}) => {
+  return getProductCategoryRestrictionForCustomer(category, customer_attributes.value, options);
+};
+
+export const productCategoryAllowed = (category, options = {}) => {
+  return !isProductCategoryRestrictedForCustomer(category, customer_attributes.value, options);
 };
 
 /** Check if the customer should be billed per order, or per billing period */
@@ -1664,13 +1664,35 @@ export const hasOnlyTankCleaning = () => {
 };
 
 /** Check if a product is restricted based on customer attributes */
-export const isProductRestricted = (product) => {
-  return isProductRestrictedForCustomer(product, customer_attributes.value);
+export const getProductRestriction = (product, options = {}) => {
+  return getCustomerProductRestriction(product, customer_attributes.value, options);
+};
+
+export const isProductRestricted = (product, options = {}) => {
+  return isProductRestrictedForCustomer(product, customer_attributes.value, options);
+};
+
+const getAddonProductForRestriction = (addon) => {
+  const addonProduct = addon?.product || addon || {};
+  return {
+    ...addonProduct,
+    name: addon?.name || addonProduct.name,
+    category: addonProduct.category ?? addon?.category,
+    category_name: addonProduct.category_name ?? addon?.category_name,
+  };
 };
 
 /** Check if an addon is restricted based on customer attributes */
-export const isAddonRestricted = (addon) => {
-  return isProductRestrictedForCustomer(addon, customer_attributes.value);
+export const getAddonRestriction = (addon, options = {}) => {
+  return getCustomerProductRestriction(getAddonProductForRestriction(addon), customer_attributes.value, {
+    includeNumericAddonCategory: true,
+    isRelatedAddon: true,
+    ...options,
+  });
+};
+
+export const isAddonRestricted = (addon, options = {}) => {
+  return getAddonRestriction(addon, options).restricted;
 };
 
 export function loadOrderDetails(onAfterSuccess = null, options = {}) {
@@ -1953,16 +1975,37 @@ export const getUserProductPrice = (product) => {
   return Number((price - (price * (discount / 100))).toFixed(0));
 };
 
-export const showFakeCreateOrderItem = (product, quantity, price) => {
-  order_items.value.push({
-    id: Math.floor(Math.random() * 1000),
+const isPendingOrderItemProduct = (product) => {
+  return product && typeof product === "object" && String(product.name ?? product.product_name ?? "").trim() !== "";
+};
+
+export const clearPendingOrderItems = () => {
+  order_items.value = order_items.value.filter((item) => item?._pending !== true);
+};
+
+export const showPendingCreateOrderItem = (product, quantity, price, relatedItemId = null, notes = "") => {
+  if (!isPendingOrderItemProduct(product)) {
+    console.warn("Skipping pending order item without product details", product);
+    return null;
+  }
+
+  const pendingItem = {
+    id: `pending-${Date.now()}-${Math.floor(Math.random() * 1000)}`,
+    _pending: true,
     product: product,
+    product_id: product.id,
+    related_item_id: relatedItemId,
     quantity: quantity,
     price: price,
-    notes: "",
+    notes: notes || "",
     reference: "",
-  });
-  console.log("Fake create order item", product, quantity);
+  };
+  order_items.value.push(pendingItem);
+  return pendingItem;
+};
+
+export const showFakeCreateOrderItem = (product, quantity, price, relatedItemId = null, notes = "") => {
+  return showPendingCreateOrderItem(product, quantity, price, relatedItemId, notes);
 };
 
 /** Vehicle search functionality */

src/components/viewport/page/headers/menu/NavigationMenuGlobalSearch.vue

@@ -2,7 +2,7 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { BButton, BCheckbox, BField, BIcon, BInput, BModal, BPagination, BProgress, BSelect, BSidebar } from 'buefy';
+import { BButton, BCheckbox, BField, BIcon, BInput, BModal, BSelect, BSidebar } from 'buefy';
 import Swal from 'sweetalert2';
 import SessionUser from '@/components/session/token/SessionUser.vue';
 import { showEditOrderItemForm } from '@/components/forms/superUser/editOrderItemForm.vue';
@@ -36,29 +36,19 @@ import {
   type DepartmentGoalOverview
 } from '@/components/viewport/page/headers/menu/systemSearchDepartmentGoalSupport';
 
-type SearchMethod = 'POST' | 'GET';
 type CacheRebuildScope = 'all' | 'types' | 'dirty';
 type InlineEditorKind = 'order_item' | 'customer_discount' | 'customer_fixed_price' | 'department_variable' | 'module_config';
-const SEARCH_FETCH_PAGE_SIZE = 20;
-const SEARCH_FETCH_CONCURRENCY = 5;
+const SEARCH_MAX_RESULTS = 50;
+const RELATED_FETCH_CONCURRENCY = 5;
 const ENTITY_TYPES: EntityType[] = [...SYSTEM_SEARCH_ENTITY_TYPES];
 
 type SearchMeta = {
   query: string;
-  limit: number;
-  offset: number;
-  total: number;
+  max_results: number;
+  returned: number;
+  truncated: boolean;
   allowed_types: EntityType[];
   cache: { hit: boolean };
-  intent_parser?: {
-    invoked: boolean;
-    source: 'cache' | 'openai' | 'none';
-    status: string;
-    confidence: number;
-    expanded_terms: string[];
-    entity_hints: EntityType[];
-    fallback_reason?: string | null;
-  };
 };
 
 type SearchResponse = {
@@ -76,7 +66,6 @@ const router = useRouter();
 const { t, te, locale } = useI18n();
 
 const isModalOpen = ref(false);
-const method = ref<SearchMethod>('POST');
 const query = ref('');
 const queryInputRef = ref<unknown>(null);
 const searchShellRef = ref<HTMLElement | null>(null);
@@ -87,24 +76,16 @@ const resultCardViewportVisibility = ref<Record<string, boolean>>({});
 const includeTypes = ref<EntityType[]>([]);
 const excludeTypes = ref<EntityType[]>([]);
 const includeAssociations = ref(true);
-const debugIntent = ref(false);
-const limit = ref(50);
-const offset = ref(0);
 const loading = ref(false);
 const response = ref<SearchResponse | null>(null);
 const error = ref('');
-const searchProgressActive = ref(false);
-const searchProgressPagesDone = ref(0);
-const searchProgressPagesTotal = ref(0);
-const searchProgressItemsLoaded = ref(0);
-const searchProgressItemsTotal = ref(0);
 
 const showMeta = ref(false);
 const showScore = ref(false);
 const showPayloadInspector = ref(false);
 const selectedGroup = ref('all');
 const settingsOpen = ref(false);
-const activeSetting = ref<'pagination' | 'object-types' | 'manage' | null>(null);
+const activeSetting = ref<'object-types' | 'manage' | null>(null);
 
 const cacheScope = ref<CacheRebuildScope>('all');
 const cacheTypes = ref<EntityType[]>([]);
@@ -112,8 +93,6 @@ const cacheLoading = ref(false);
 const cacheMsg = ref('');
 const cacheErr = ref('');
 
-const clampLimit = (v: number) => Math.min(200, Math.max(1, Math.round(Number.isNaN(Number(v)) ? 50 : Number(v))));
-const clampOffset = (v: number) => Math.max(0, Math.round(Number.isNaN(Number(v)) ? 0 : Number(v)));
 const canCacheManage = computed(() => SessionUser.canAccessSuperUser());
 
 watch(includeTypes, (next) => { excludeTypes.value = excludeTypes.value.filter((t) => !next.includes(t)); }, { deep: true });
@@ -144,11 +123,6 @@ const groupResults = computed(() => {
   return results.value.filter((row) => row.entity_type === selectedGroup.value);
 });
 const selectedGroupTotal = computed(() => groupResults.value.length);
-const effectiveOffset = computed(() => {
-  const perPage = clampLimit(limit.value);
-  const maxOffset = Math.max(0, selectedGroupTotal.value - perPage);
-  return Math.min(clampOffset(offset.value), maxOffset);
-});
 const sidebarGroups = computed(() => ([
   { key: 'all', label: t('common.all'), count: results.value.length },
   ...grouped.value
@@ -156,6 +130,7 @@ const sidebarGroups = computed(() => ([
     .map(([key, rows]) => ({ key, label: humanize(key), count: rows.length }))
 ]));
 const selectedGroupLabel = computed(() => (selectedGroup.value === 'all' ? t('common.all') : humanize(selectedGroup.value)));
+const meta = computed(() => payload.value?.meta ?? null);
 const resultRangeLabel = computed(() => (
   selectedGroup.value === 'all'
     ? t('global_search.results.range', { start: rangeStart.value, end: rangeEnd.value, total: selectedGroupTotal.value })
@@ -166,34 +141,20 @@ const resultRangeLabel = computed(() => (
       total: selectedGroupTotal.value
     })
 ));
+const resultCapLabel = computed(() => {
+  const currentMeta = meta.value;
+  if (!currentMeta) return '';
+  const key = currentMeta.truncated ? 'global_search.results.cap_truncated' : 'global_search.results.cap';
+  return t(key, { returned: currentMeta.returned, max: currentMeta.max_results });
+});
 const activeSettingTitle = computed(() => {
-  if (activeSetting.value === 'pagination') return t('global_search.settings_menu.pagination');
   if (activeSetting.value === 'object-types') return t('global_search.settings_menu.object_types');
   if (activeSetting.value === 'manage') return t('global_search.settings_menu.manage');
   return t('global_search.title');
 });
-const visibleResults = computed(() => {
-  const start = effectiveOffset.value;
-  const end = start + clampLimit(limit.value);
-  return groupResults.value.slice(start, end);
-});
-const meta = computed(() => payload.value?.meta ?? null);
-const rangeStart = computed(() => (visibleResults.value.length ? effectiveOffset.value + 1 : 0));
-const rangeEnd = computed(() => (visibleResults.value.length ? effectiveOffset.value + visibleResults.value.length : 0));
-const currentPage = computed(() => Math.floor(effectiveOffset.value / clampLimit(limit.value)) + 1);
-const searchProgressPercent = computed(() => {
-  if (!searchProgressPagesTotal.value) return 0;
-  return Math.min(100, Math.round((searchProgressPagesDone.value / searchProgressPagesTotal.value) * 100));
-});
-const searchProgressValue = computed<number | undefined>(() => (searchProgressPagesTotal.value ? searchProgressPercent.value : undefined));
-const searchProgressLabel = computed(() => {
-  if (!searchProgressPagesDone.value) return t('global_search.progress.preparing');
-  if (!searchProgressPagesTotal.value) return t('global_search.progress.fetching_unknown', { pagesDone: searchProgressPagesDone.value });
-  return t('global_search.progress.fetching_known', {
-    pagesDone: searchProgressPagesDone.value,
-    pagesTotal: searchProgressPagesTotal.value
-  });
-});
+const visibleResults = computed(() => groupResults.value);
+const rangeStart = computed(() => (visibleResults.value.length ? 1 : 0));
+const rangeEnd = computed(() => visibleResults.value.length);
 
 watch(grouped, (next) => {
   if (selectedGroup.value === 'all') return;
@@ -201,12 +162,6 @@ watch(grouped, (next) => {
     selectedGroup.value = 'all';
   }
 });
-watch([selectedGroupTotal, limit], () => {
-  const perPage = clampLimit(limit.value);
-  const maxOffset = Math.max(0, selectedGroupTotal.value - perPage);
-  if (offset.value > maxOffset) offset.value = maxOffset;
-});
-
 const resolveQueryInputElement = (): HTMLInputElement | null => {
   const buefyInput = queryInputRef.value as { $el?: HTMLElement; $refs?: { input?: HTMLInputElement } } | null;
   return buefyInput?.$refs?.input
@@ -755,46 +710,17 @@ const ensureDepartmentNamesLoaded = async () => {
   }
 };
 
-const buildGetParams = (pagination?: { limit?: number; offset?: number }) => {
-  const requestLimit = clampLimit(pagination?.limit ?? limit.value);
-  const requestOffset = clampOffset(pagination?.offset ?? offset.value);
-  const params: {
-    query: string;
-    include_associations: boolean;
-    debug_intent: boolean;
-    limit: number;
-    offset: number;
-    include_types?: EntityType[];
-    exclude_types?: EntityType[];
-  } = {
-    query: query.value.trim(),
-    include_associations: includeAssociations.value,
-    debug_intent: debugIntent.value,
-    limit: requestLimit,
-    offset: requestOffset
-  };
-  if (includeTypes.value.length) params.include_types = [...includeTypes.value];
-  if (excludeTypes.value.length) params.exclude_types = [...excludeTypes.value];
-  return params;
-};
-
-const buildPostBody = (pagination?: { limit?: number; offset?: number }) => {
-  const requestLimit = clampLimit(pagination?.limit ?? limit.value);
-  const requestOffset = clampOffset(pagination?.offset ?? offset.value);
+const buildPostBody = () => {
   const body: {
     query: string;
     include_associations: boolean;
-    debug_intent: boolean;
-    limit: number;
-    offset: number;
+    max_results: number;
     include_types?: EntityType[];
     exclude_types?: EntityType[];
   } = {
     query: query.value.trim(),
     include_associations: includeAssociations.value,
-    debug_intent: debugIntent.value,
-    limit: requestLimit,
-    offset: requestOffset
+    max_results: SEARCH_MAX_RESULTS
   };
   if (includeTypes.value.length) body.include_types = [...includeTypes.value];
   if (excludeTypes.value.length) body.exclude_types = [...excludeTypes.value];
@@ -805,105 +731,35 @@ const groupRows = (rows: SearchResult[]) => {
   return groupSystemSearchResults(sortSystemSearchResults(rows));
 };
 
-const resetSearchProgress = () => {
-  searchProgressActive.value = false;
-  searchProgressPagesDone.value = 0;
-  searchProgressPagesTotal.value = 0;
-  searchProgressItemsLoaded.value = 0;
-  searchProgressItemsTotal.value = 0;
-};
-
-const requestSearchPage = async (requestedOffset: number, requestedLimit: number) => {
-  const res = method.value === 'GET'
-    ? await SessionUser.request('/search/system', 'GET', buildGetParams({ offset: requestedOffset, limit: requestedLimit }))
-    : await SessionUser.request('/search/system', 'POST', buildPostBody({ offset: requestedOffset, limit: requestedLimit }));
+const requestSearch = async () => {
+  const res = await SessionUser.request('/search/system', 'POST', buildPostBody());
   return res?.data as SearchResponse;
 };
 
-const runSearch = async (nextOffset?: number) => {
+const runSearch = async () => {
   if (!query.value.trim()) {
     error.value = t('global_search.errors.enter_query');
     return;
   }
-  const requestedOffset = clampOffset(typeof nextOffset === 'number' ? nextOffset : 0);
-  offset.value = requestedOffset;
-  limit.value = clampLimit(limit.value);
   loading.value = true;
   error.value = '';
   unresolvedCustomerNumbers.clear();
   loadingCustomerNumbers.clear();
-  searchProgressActive.value = true;
-  searchProgressPagesDone.value = 0;
-  searchProgressPagesTotal.value = 1;
-  searchProgressItemsLoaded.value = 0;
-  searchProgressItemsTotal.value = 0;
   try {
-    const firstPage = await requestSearchPage(0, SEARCH_FETCH_PAGE_SIZE);
-    if (!firstPage?.data?.meta) throw new Error(t('global_search.errors.invalid_payload'));
+    const nextResponse = await requestSearch();
+    if (!nextResponse?.data?.meta) throw new Error(t('global_search.errors.invalid_payload'));
 
-    const firstPayload = firstPage.data;
-    const totalItemsFromMeta = Math.max(0, Number(firstPayload.meta.total ?? 0));
-    const allRows = [...(firstPayload.results ?? [])];
-
-    const hasReliableTotal = totalItemsFromMeta > allRows.length;
-    let knownTotalPages = hasReliableTotal ? Math.max(1, Math.ceil(totalItemsFromMeta / SEARCH_FETCH_PAGE_SIZE)) : 0;
-
-    searchProgressItemsTotal.value = hasReliableTotal ? totalItemsFromMeta : 0;
-    searchProgressPagesTotal.value = knownTotalPages;
-    searchProgressPagesDone.value = 1;
-    searchProgressItemsLoaded.value = allRows.length;
-
-    let nextPageIndex = 1;
-    while (true) {
-      if (knownTotalPages && nextPageIndex >= knownTotalPages) break;
-      const chunkIndexes = Array.from({ length: SEARCH_FETCH_CONCURRENCY }, (_, index) => nextPageIndex + index)
-        .filter((pageIndex) => !knownTotalPages || pageIndex < knownTotalPages);
-      if (!chunkIndexes.length) break;
-
-      const chunkResponses = await Promise.all(
-        chunkIndexes.map(async (pageIndex) => {
-          const pageRes = await requestSearchPage(pageIndex * SEARCH_FETCH_PAGE_SIZE, SEARCH_FETCH_PAGE_SIZE);
-          return { pageIndex, rows: pageRes?.data?.results ?? [] };
-        })
-      );
-
-      chunkResponses
-        .sort((a, b) => a.pageIndex - b.pageIndex)
-        .forEach((chunk) => { allRows.push(...chunk.rows); });
-
-      searchProgressPagesDone.value += chunkResponses.length;
-      searchProgressItemsLoaded.value = allRows.length;
-
-      if (!knownTotalPages) {
-        const firstShortPage = chunkResponses.find((chunk) => chunk.rows.length < SEARCH_FETCH_PAGE_SIZE);
-        if (firstShortPage) {
-          knownTotalPages = firstShortPage.pageIndex + 1;
-          searchProgressPagesTotal.value = knownTotalPages;
-          searchProgressPagesDone.value = Math.min(searchProgressPagesDone.value, knownTotalPages);
-          break;
-        }
-      }
-      nextPageIndex = chunkIndexes[chunkIndexes.length - 1] + 1;
-    }
-
-    const finalTotal = Math.max(totalItemsFromMeta, allRows.length);
+    const nextPayload = nextResponse.data;
+    const allRows = [...(nextPayload.results ?? [])];
     const groupedRows = groupRows(allRows);
     response.value = {
-      ...firstPage,
+      ...nextResponse,
       data: {
-        ...firstPayload,
+        ...nextPayload,
         results: allRows,
-        grouped_results: groupedRows,
-        meta: {
-          ...firstPayload.meta,
-          total: finalTotal,
-          limit: SEARCH_FETCH_PAGE_SIZE,
-          offset: 0
-        }
+        grouped_results: groupedRows
       }
     };
-    const maxOffset = Math.max(0, allRows.length - clampLimit(limit.value));
-    offset.value = Math.min(requestedOffset, maxOffset);
     await nextTick();
     if (visibleResultCardKeys.value.length) {
       highlightFirstVisibleResult('query');
@@ -914,29 +770,19 @@ const runSearch = async (nextOffset?: number) => {
     error.value = parseErr(e);
   } finally {
     loading.value = false;
-    resetSearchProgress();
   }
 };
 
-const onPageChange = (page: number) => {
-  const safePage = Math.max(1, Math.floor(Number.isNaN(Number(page)) ? 1 : Number(page)));
-  const maxPage = Math.max(1, Math.ceil(selectedGroupTotal.value / clampLimit(limit.value)));
-  const nextPage = Math.min(safePage, maxPage);
-  offset.value = (nextPage - 1) * clampLimit(limit.value);
-};
-
 const clearResults = () => {
   response.value = null;
   error.value = '';
   selectedGroup.value = 'all';
-  offset.value = 0;
   actionLoadingByKey.value = {};
   orderAttachmentCacheByOrderId.value = {};
   departmentGoalCacheById.value = {};
   resultCardViewportVisibility.value = {};
   unresolvedCustomerNumbers.clear();
   loadingCustomerNumbers.clear();
-  resetSearchProgress();
   keyboardState.value = {
     pane: 'query',
     selectedSidebarKey: 'all',
@@ -944,15 +790,14 @@ const clearResults = () => {
   };
 };
 
-const selectGroup = (groupKey: string, options?: { resetOffset?: boolean; pane?: SystemSearchKeyboardPane }) => {
+const selectGroup = (groupKey: string, options?: { pane?: SystemSearchKeyboardPane }) => {
   selectedGroup.value = groupKey;
-  if (options?.resetOffset !== false) offset.value = 0;
   closeSettingsView();
   syncKeyboardState({ selectedSidebarKey: groupKey, pane: options?.pane ?? keyboardState.value.pane });
   if (options?.pane && options.pane !== 'query') focusSearchShell();
 };
 
-const openSetting = (setting: 'pagination' | 'object-types' | 'manage') => {
+const openSetting = (setting: 'object-types' | 'manage') => {
   activeSetting.value = setting;
   settingsOpen.value = false;
 };
@@ -1049,7 +894,7 @@ const resolveUserIdForDiscountEdit = async (payload: SearchPayload | null, custo
 };
 
 const refreshAfterInlineEdit = async () => {
-  await runSearch(offset.value);
+  await runSearch();
 };
 
 const editOrderItemInline = async (card: VisibleResultCard) => {
@@ -1624,7 +1469,7 @@ const selectFirstVisibleResult = () => {
 
 const onQueryInputEnter = () => {
   if (keyboardState.value.pane !== 'query') return;
-  void runSearch(0);
+  void runSearch();
 };
 
 const selectedResultCard = computed<VisibleResultCard | null>(() => {
@@ -1722,8 +1567,8 @@ const resolveCustomerNamesForCards = async (cards: VisibleResultCard[]) => {
       .filter((number): number is number => number !== null)
   )).filter((number) => !customerNameByNumber.value[number] && !loadingCustomerNumbers.has(number) && !unresolvedCustomerNumbers.has(number));
 
-  for (let index = 0; index < targetNumbers.length; index += SEARCH_FETCH_CONCURRENCY) {
-    const chunk = targetNumbers.slice(index, index + SEARCH_FETCH_CONCURRENCY);
+  for (let index = 0; index < targetNumbers.length; index += RELATED_FETCH_CONCURRENCY) {
+    const chunk = targetNumbers.slice(index, index + RELATED_FETCH_CONCURRENCY);
     await Promise.all(chunk.map(async (customerNumber) => {
       loadingCustomerNumbers.add(customerNumber);
       try {
@@ -1869,8 +1714,8 @@ const warmVisibleCardOrderAttachments = async (cards: VisibleResultCard[]) => {
       .map((card) => card.orderId as number)
   ));
 
-  for (let index = 0; index < orderIds.length; index += SEARCH_FETCH_CONCURRENCY) {
-    const chunk = orderIds.slice(index, index + SEARCH_FETCH_CONCURRENCY);
+  for (let index = 0; index < orderIds.length; index += RELATED_FETCH_CONCURRENCY) {
+    const chunk = orderIds.slice(index, index + RELATED_FETCH_CONCURRENCY);
     await Promise.all(chunk.map((orderId) => ensureOrderAttachmentsLoaded(orderId)));
   }
 };
@@ -2327,7 +2172,7 @@ const asJson = (v: unknown) => {
   <div v-if="SessionUser.canAccessSuperUser()" class="system-search-launcher">
     <p class="menu-label mb-2">{{ t('global_search.launcher.label') }}</p>
     <b-button expanded type="is-link" icon-left="search" icon-pack="fas" @click="isModalOpen = true">{{ t('global.search') }}</b-button>
-    <p v-if="meta" class="is-size-7 has-text-grey mt-2">{{ t('global_search.launcher.last_search', { query: meta.query, total: meta.total }) }}</p>
+    <p v-if="meta" class="is-size-7 has-text-grey mt-2">{{ t('global_search.launcher.last_search', { query: meta.query, total: meta.returned }) }}</p>
 
     <b-modal
       v-model="isModalOpen"
@@ -2348,7 +2193,7 @@ const asJson = (v: unknown) => {
           <b-sidebar class="search-modal-sidebar" :model-value="true" position="static" :overlay="false" fullheight>
             <div class="search-sidebar-content">
               <div class="search-sidebar-body p-4">
-                <b-button expanded type="is-link" icon-left="search" icon-pack="fas" class="mb-2" :loading="loading" @click="runSearch(0)">{{ t('global_search.actions.run_search') }}</b-button>
+                <b-button expanded type="is-link" icon-left="search" icon-pack="fas" class="mb-2" :loading="loading" @click="runSearch()">{{ t('global_search.actions.run_search') }}</b-button>
                 <b-button expanded type="is-light" icon-left="eraser" icon-pack="fas" class="mb-3" @click="clearResults">{{ t('global_search.actions.clear_results') }}</b-button>
 
                 <div class="sidebar-section-header mb-2">
@@ -2390,14 +2235,6 @@ const asJson = (v: unknown) => {
                 <div v-if="settingsOpen" class="sidebar-settings-panel mb-3">
                   <p class="menu-label mb-2">{{ t('common.settings') }}</p>
 
-                  <button
-                    type="button"
-                    class="button is-small is-light is-fullwidth mb-2 settings-option-button"
-                    :class="{ 'is-link': activeSetting === 'pagination' }"
-                    @click="openSetting('pagination')"
-                  >
-                    {{ t('global_search.settings_menu.pagination') }}
-                  </button>
                   <button
                     type="button"
                     class="button is-small is-light is-fullwidth mb-2 settings-option-button"
@@ -2439,26 +2276,12 @@ const asJson = (v: unknown) => {
             <b-field grouped group-multiline class="search-query-row">
               <b-input ref="queryInputRef" v-model="query" :placeholder="t('global_search.search.placeholder')" icon="search" icon-pack="fas" expanded @focus="setKeyboardPane('query')" @keyup.enter="onQueryInputEnter" />
               <p class="control">
-                <b-button class="search-submit-btn" type="is-link" icon-left="search" icon-pack="fas" :loading="loading" @click="runSearch(0)">
+                <b-button class="search-submit-btn" type="is-link" icon-left="search" icon-pack="fas" :loading="loading" @click="runSearch()">
                   {{ t('global.search') }}
                 </b-button>
               </p>
             </b-field>
 
-            <div v-if="loading && searchProgressActive" class="box p-3 mb-2 search-progress-box">
-              <p class="is-size-7 has-text-weight-semibold mb-2">{{ searchProgressLabel }}</p>
-              <b-progress
-                type="is-info"
-                size="is-medium"
-                :value="searchProgressValue"
-                :max="100"
-                :show-value="Boolean(searchProgressPagesTotal)"
-                format="percent"
-                :precision="0"
-              />
-              <p class="is-size-7 has-text-grey mb-0 mt-1">{{ t('global_search.progress.results_loaded', { loaded: searchProgressItemsLoaded, total: searchProgressItemsTotal || '?' }) }}</p>
-            </div>
-
             <p v-if="error" class="help is-danger mb-2">{{ error }}</p>
 
             <div class="search-content-area">
@@ -2470,6 +2293,8 @@ const asJson = (v: unknown) => {
                         <span class="search-result-toolbar__metric">{{ resultRangeLabel }}</span>
                         <span class="search-result-toolbar__separator" aria-hidden="true">•</span>
                         <span class="search-result-toolbar__detail">{{ t('global_search.groups.active', { group: selectedGroupLabel }) }}</span>
+                        <span v-if="resultCapLabel" class="search-result-toolbar__separator" aria-hidden="true">•</span>
+                        <span v-if="resultCapLabel" class="search-result-toolbar__detail">{{ resultCapLabel }}</span>
                       </p>
                     </div>
                     <div class="search-result-toolbar__actions">
@@ -2486,25 +2311,17 @@ const asJson = (v: unknown) => {
                   </div>
                   <div v-if="showMeta && meta" class="meta-box mb-3">
                     <p class="is-size-7 mb-1"><strong>{{ t('global_search.meta.query') }}:</strong> {{ meta.query }}</p>
-                    <p class="is-size-7 mb-1"><strong>{{ t('global_search.meta.limit') }}:</strong> {{ meta.limit }} | <strong>{{ t('global_search.meta.offset') }}:</strong> {{ meta.offset }}</p>
+                    <p class="is-size-7 mb-1">
+                      <strong>{{ t('global_search.meta.max_results') }}:</strong> {{ meta.max_results }} |
+                      <strong>{{ t('global_search.meta.returned') }}:</strong> {{ meta.returned }} |
+                      <strong>{{ t('global_search.meta.truncated') }}:</strong> {{ meta.truncated ? t('global_search.meta.yes') : t('global_search.meta.no') }}
+                    </p>
                     <p class="is-size-7 mb-1"><strong>{{ t('global_search.meta.cache_hit') }}:</strong> {{ meta.cache.hit ? t('global_search.meta.yes') : t('global_search.meta.no') }}</p>
                     <div class="is-size-7 mb-1">
                       <strong>{{ t('global_search.meta.allowed_types') }}:</strong>
                       <span v-if="meta.allowed_types.length === 0">{{ t('global.none') }}</span>
                       <span v-else class="meta-allowed-types">{{ meta.allowed_types.map(humanize).join(', ') }}</span>
                     </div>
-                    <div v-if="meta.intent_parser" class="intent-meta is-size-7 mt-2">
-                      <p class="has-text-weight-semibold mb-1">{{ t('global_search.meta.intent.title') }}</p>
-                      <p class="mb-1">
-                        <strong>{{ t('global_search.meta.intent.invoked') }}:</strong> {{ meta.intent_parser.invoked ? t('global_search.meta.yes') : t('global_search.meta.no') }} |
-                        <strong>{{ t('global_search.meta.intent.source') }}:</strong> {{ meta.intent_parser.source }} |
-                        <strong>{{ t('common.status') }}:</strong> {{ meta.intent_parser.status }} |
-                        <strong>{{ t('global_search.meta.intent.confidence') }}:</strong> {{ meta.intent_parser.confidence }}
-                      </p>
-                      <p class="mb-1" v-if="meta.intent_parser.expanded_terms.length"><strong>{{ t('global_search.meta.intent.expanded_terms') }}:</strong> {{ meta.intent_parser.expanded_terms.join(', ') }}</p>
-                      <p class="mb-1" v-if="meta.intent_parser.entity_hints.length"><strong>{{ t('global_search.meta.intent.entity_hints') }}:</strong> {{ meta.intent_parser.entity_hints.map(humanize).join(', ') }}</p>
-                      <p class="mb-0" v-if="meta.intent_parser.fallback_reason"><strong>{{ t('global_search.meta.intent.fallback_reason') }}:</strong> {{ meta.intent_parser.fallback_reason }}</p>
-                    </div>
                   </div>
 
                   <template v-if="visibleResultCards.length">
@@ -2720,24 +2537,6 @@ const asJson = (v: unknown) => {
                   </template>
                   <p v-else class="is-size-7 has-text-grey mb-2">{{ t('global_search.results.none_for_search', { group: selectedGroupLabel.toLowerCase() }) }}</p>
                 </div>
-
-                <div class="box p-3 search-pagination-box">
-                  <b-pagination
-                    :total="selectedGroupTotal"
-                    :per-page="clampLimit(limit)"
-                    :model-value="currentPage"
-                    size="is-medium"
-                    order="is-centered"
-                    rounded
-                    icon-pack="fas"
-                    icon-prev="chevron-left"
-                    icon-next="chevron-right"
-                    :range-before="2"
-                    :range-after="2"
-                    @change="onPageChange"
-                    @update:model-value="onPageChange"
-                  />
-                </div>
               </div>
 
               <div v-else class="box has-text-centered p-5 search-empty-box">
@@ -2753,20 +2552,6 @@ const asJson = (v: unknown) => {
                 <b-button size="is-small" type="is-light" icon-left="arrow-left" icon-pack="fas" @click="closeSettingsView">{{ t('global_search.actions.back_to_results') }}</b-button>
               </div>
 
-              <div v-if="activeSetting === 'pagination'" class="sidebar-settings-section no-divider">
-                <b-field v-if="!canCacheManage" :label="t('global_search.settings.search_method')" label-position="on-border" class="mb-2">
-                  <b-select v-model="method" expanded>
-                    <option value="POST">{{ t('global_search.settings.methods.post') }}</option>
-                    <option value="GET">{{ t('global_search.settings.methods.get') }}</option>
-                  </b-select>
-                </b-field>
-
-                <b-field grouped group-multiline>
-                  <b-field :label="t('global_search.settings.limit')" class="mb-2"><b-input v-model.number="limit" type="number" min="1" max="200" @blur="limit = clampLimit(limit)" /></b-field>
-                  <b-field :label="t('global_search.settings.offset')" class="mb-2"><b-input v-model.number="offset" type="number" min="0" @blur="offset = clampOffset(offset)" /></b-field>
-                </b-field>
-              </div>
-
               <div v-if="activeSetting === 'object-types'" class="sidebar-settings-section no-divider">
                 <div class="object-type-grid">
                   <div class="object-type-column">
@@ -2800,10 +2585,9 @@ const asJson = (v: unknown) => {
                 <b-field v-if="canCacheManage" class="mb-1"><b-checkbox v-model="showScore">{{ t('global_search.settings.show_score_badges') }}</b-checkbox></b-field>
                 <b-field v-if="canCacheManage" class="mb-1"><b-checkbox v-model="showPayloadInspector">{{ t('global_search.settings.show_payload_inspector') }}</b-checkbox></b-field>
                 <b-field class="mb-1"><b-checkbox v-model="includeAssociations">{{ t('global_search.settings.include_associations') }}</b-checkbox></b-field>
-                <b-field class="mb-2"><b-checkbox v-model="debugIntent">{{ t('global_search.settings.include_intent_diagnostics') }}</b-checkbox></b-field>
 
                 <div class="is-flex is-flex-wrap-wrap mt-2">
-                  <b-button size="is-small" type="is-light" class="mb-2" @click="includeAssociations = true; debugIntent = false; showScore = false; showPayloadInspector = false; limit = 50; offset = 0">{{ t('global_search.settings.reset_defaults') }}</b-button>
+                  <b-button size="is-small" type="is-light" class="mb-2" @click="includeAssociations = true; showScore = false; showPayloadInspector = false">{{ t('global_search.settings.reset_defaults') }}</b-button>
                 </div>
 
                 <p v-if="!canCacheManage" class="is-size-7 has-text-grey mb-0">{{ t('global_search.cache.superuser_only') }}</p>
@@ -2985,11 +2769,6 @@ const asJson = (v: unknown) => {
   border-radius: 12px;
   font-weight: 600;
 }
-.search-progress-box {
-  border: 1px solid var(--search-border);
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.88);
-}
 .search-content-area {
   flex: 1;
   min-height: 0;
@@ -3013,14 +2792,6 @@ const asJson = (v: unknown) => {
   background: rgba(255, 255, 255, 0.92);
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
 }
-.search-pagination-box {
-  margin-top: 0;
-  margin-bottom: 0;
-  flex: 0 0 auto;
-  border: 1px solid var(--search-border);
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.9);
-}
 .search-empty-box {
   flex: 1;
   min-height: 0;
@@ -3100,10 +2871,6 @@ const asJson = (v: unknown) => {
 .meta-allowed-types {
   color: var(--search-text-subtle);
 }
-.intent-meta {
-  border-left: 3px solid var(--search-accent);
-  padding-left: 10px;
-}
 .result-list {
   display: grid;
   grid-template-columns: 1fr;
@@ -3393,9 +3160,5 @@ const asJson = (v: unknown) => {
   .search-result-box {
     padding: 10px !important;
   }
-  .search-pagination-box {
-    padding: 10px !important;
-  }
 }
 </style>
-

src/components/viewport/page/headers/menu/systemSearchUiSupport.ts

@@ -1,5 +1,4 @@
 import {
-  SYSTEM_SEARCH_ENTITY_TYPES,
   type SearchResult,
 } from '@/components/viewport/page/headers/menu/systemSearchSupport';
 
@@ -13,17 +12,6 @@ export type SystemSearchKeyboardState = {
 
 const TEXT_ENTRY_NAVIGATION_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Enter']);
 
-const UI_PRIORITY_PREFIX = ['customers', 'orders', 'order_bookings'] as const;
-
-export const SYSTEM_SEARCH_UI_ENTITY_ORDER = [
-  ...UI_PRIORITY_PREFIX,
-  ...SYSTEM_SEARCH_ENTITY_TYPES.filter((entityType) => !UI_PRIORITY_PREFIX.includes(entityType))
-] as const;
-
-const SYSTEM_SEARCH_UI_ENTITY_INDEX = new Map(
-  SYSTEM_SEARCH_UI_ENTITY_ORDER.map((entityType, index) => [entityType, index])
-);
-
 const getFirstKey = (keys: string[]): string | null => (keys.length ? keys[0] : null);
 
 const normalizeSelectedKey = (
@@ -36,30 +24,10 @@ const normalizeSelectedKey = (
   return getFirstKey(keys);
 };
 
-const getEntityOrderIndex = (entityType: string): number => (
-  SYSTEM_SEARCH_UI_ENTITY_INDEX.get(entityType as (typeof SYSTEM_SEARCH_UI_ENTITY_ORDER)[number])
-  ?? SYSTEM_SEARCH_UI_ENTITY_ORDER.length
-);
-
-export const sortSystemSearchGroupKeys = (groupKeys: string[]): string[] => [...groupKeys].sort((left, right) => {
-  const byKnownOrder = getEntityOrderIndex(left) - getEntityOrderIndex(right);
-  if (byKnownOrder !== 0) return byKnownOrder;
-  return left.localeCompare(right);
-});
+export const sortSystemSearchGroupKeys = (groupKeys: string[]): string[] => [...groupKeys];
 
 export const sortSystemSearchResults = <T extends SearchResult>(rows: T[]): T[] => {
-  if (rows.length < 2) return [...rows];
-
-  const rowsByGroup = new Map<string, T[]>();
-  for (const row of rows) {
-    const key = String(row.entity_type);
-    const existing = rowsByGroup.get(key);
-    if (existing) existing.push(row);
-    else rowsByGroup.set(key, [row]);
-  }
-
-  const orderedKeys = sortSystemSearchGroupKeys([...rowsByGroup.keys()]);
-  return orderedKeys.flatMap((key) => rowsByGroup.get(key) ?? []);
+  return [...rows];
 };
 
 export const groupSystemSearchResults = <T extends SearchResult>(rows: T[]): Record<string, T[]> => {
@@ -72,7 +40,7 @@ export const groupSystemSearchResults = <T extends SearchResult>(rows: T[]): Rec
   }
 
   return Object.fromEntries(
-    sortSystemSearchGroupKeys([...rowsByGroup.keys()]).map((key) => [key, rowsByGroup.get(key) ?? []])
+    [...rowsByGroup.keys()].map((key) => [key, rowsByGroup.get(key) ?? []])
   ) as Record<string, T[]>;
 };