Merge remote-tracking branch 'origin/master' into codex/github-hosted-test-runners

# Conflicts:
#	.github/workflows/tests.yml
#	tests/e2e/self-serve-wash.spec.js
#	tests/unit/playwright-full-workflow.spec.js

.github/workflows/tests.yml

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

README.md

@@ -154,35 +154,6 @@ 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">#0787BB</color>
+    <color name="ic_launcher_background">#FFFFFF</color>
-</resources>
+</resources>

package-lock.json

@@ -79,7 +79,6 @@
         "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,9 +55,7 @@
     "twa:build": "bubblewrap build",
     "twa:update": "bubblewrap update",
     "mobile:sync": "npm run build && npx cap sync",
-    "mobile:android:icons": "node scripts/mobile/generate-android-icons.mjs",
+    "mobile:android:sync": "npm run build && npx cap sync android",
-    "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",
@@ -137,7 +135,6 @@
     "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,24 +275,7 @@ const transformLocale = (locale, originalMessages) => {
       (entry) => normalizeToken(entry.value) === normalized
     );
     if (existingWordEntry) {
-      const word = {
+      tokenToWord.set(normalized, { path: `words.${existingWordEntry.key}`, value: existingWordEntry.value });
-        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

@@ -1,133 +0,0 @@
-#!/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,29 +30,14 @@ export const sourceMappings = [
   },
   {
     name: "limited-backoffice",
-    patterns: [
+    patterns: [/^src\/views\/backoffice\//u, /^src\/services\/limitedBackoffice\.js$/u],
-      /^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"],
@@ -80,7 +65,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", "tests/e2e/superuser-department-employees.spec.ts"],
+    specs: ["tests/e2e/superuser-department-overview.spec.js"],
     projects: chromiumProjects,
   },
   {
@@ -182,29 +167,12 @@ export const sourceMappings = [
   {
     name: "superuser-department-pricing",
     patterns: [
-      /^src\/views\/dashboards\/superUserDashboard\/department\/(?:DepartmentPricing|DepartmentCustomerPricing|SuperUserSelectedDepartmentObject|SuperUserDashboardDepartmentNavigation)\.vue$/u,
+      /^src\/views\/dashboards\/superUserDashboard\/department\/(?:DepartmentPricing|SuperUserSelectedDepartmentObject)\.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,7 +20,6 @@ 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",
@@ -102,15 +101,12 @@ 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,24 +48,7 @@ textarea.has-sharp-edges {
   --bulma-box-shadow: none !important;
   --bulma-card-shadow: none !important;
 
-  --bulma-skeleton-background: hsla(197 100% 35% / 0.7) !important;
+  --bulma-skeleton-background: hsla(197 100% 35% / 0.70) !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 {*/
@@ -121,16 +104,16 @@ body:not(.pleno-large-table-headers) .table thead th {
   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;
   }
 }
@@ -142,4 +125,4 @@ body:not(.pleno-large-table-headers) .table thead th {
   .mt-30-tablet {
     margin-top: 30px !important;
   }
-}
+}

src/components/displays/FormDisplay.vue

@@ -1,11 +1,12 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { onMounted, 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: {
@@ -105,6 +106,28 @@ 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([]);
@@ -496,6 +519,10 @@ 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);
@@ -669,16 +696,17 @@ const debugGetForm = () => {
         </div>
         <!-- Date -->
         <div v-else-if="getValidator(field.validation).type === 'date'">
-          <BuefyDateField
+          <input
-              v-model="fieldValues[field.id]"
+              class="input is-link"
-              value-type="string"
+              :type="getValidator(field.validation).type"
               :required="isFieldRequired(field)"
               :name="field.id"
               :id="field.id"
+              @change="onFieldChange(field, $event.target.value)"
+              v-model="fieldValues[field.id]"
               :disabled="isFieldLocked(field)"
-              :placeholder="field.metadata.placeholder"
+              v-bind:placeholder="field.metadata.placeholder"
-              @change="(value) => onFieldChange(field, value)"
+          >
-          />
         </div>
       </template>
       <!-- If the validator is not defined -->

src/components/displays/Subusers.vue

@@ -19,10 +19,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  userScopedUserId: {
-    type: [String, Number],
-    default: null,
-  },
 });
 const { t } = useI18n();
 
@@ -46,7 +42,7 @@ const paginationKey = computed(() =>
 const onInviteClick = async () => {
   await SessionUser.objects.subusers.functions.showInviteForm(() => {
     paginationVersion.value += 1;
-  }, { superuser: props.superuserPage, userId: props.userScopedUserId });
+  }, { superuser: props.superuserPage });
 };
 </script>
 
@@ -79,7 +75,6 @@ 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 class="superuser-users-index" data-testid="superuser-users-index">
+  <div>
     <PageTitle :title="t('superuser.pages.employees.title')" :subtitle="t('superuser.pages.employees.subtitle')">
       <template #buttons>
         <button class="button is-dark" @click="showCreateUserForm">
@@ -24,7 +24,5 @@ const { t } = useI18n();
 </template>
 
 <style scoped>
-.superuser-users-index {
+
-  min-width: 0;
+</style>
-}
-</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 { getCustomerProductRestriction } from "@/features/customer/customerProductRules.js";
+import { isProductRestrictedForCustomer } from "@/features/customer/customerProductRules.js";
 
 const { t } = useI18n();
 const expandIcon = ref(null);
@@ -80,6 +80,10 @@ 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.
@@ -89,9 +93,6 @@ const toggleIsSelected = () => {
  * @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
@@ -122,9 +123,6 @@ const onBeforeAddProductAddon = (addon, onAfterPreCheck) => {
  * @param onAfterPreCheck
  */
 const onBeforeToggleProductAddon = (addon, isAddonCurrentlySelected, onAfterPreCheck) => {
-  if (!isAddonCurrentlySelected && isAddonRestricted(addon)) {
-    return;
-  }
   // Debug:
   console.log(addon, isAddonCurrentlySelected);
   let note = null
@@ -149,35 +147,18 @@ const doesAddonHaveNoteRequirement = (addon) => {
 
 const isAddonRestricted = (addon) => {
   const addonProduct = getAddonProduct(addon);
-  return getCustomerProductRestriction({
+  return isProductRestrictedForCustomer({
     ...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 getCustomerProductRestriction({
+  return isProductRestrictedForCustomer({
     ...props.product,
     name: props.name || props.product?.name,
-  }, customerAttributesSafe.value).restricted;
+  }, customerAttributesSafe.value);
 };
 
 const orderByOrderPriority = (addons) => {
@@ -246,7 +227,20 @@ 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-for="addon in orderByOrderPriority(addonsSafe)" :key="addon.id">
+              <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-if="!isAddonRestricted(addon)">
                   <div
                       class="buttons has-addons is-small is-fullwidth is-flex-wrap-nowrap"
@@ -293,21 +287,18 @@ const orderByOrderPriority = (addons) => {
                   </div>
                 </template>
                 <!-- Addon is restricted -->
-	                <template v-else>
+                <template v-else>
-                  <div
+                  <div class="buttons has-addons is-small is-fullwidth is-flex-wrap-nowrap">
-                      class="buttons has-addons is-small is-fullwidth is-flex-wrap-nowrap"
+                    <button
-                      :data-testid="`pos-addon-restriction-${getAddonProduct(addon).id ?? addon.option_id ?? addon.id}`"
+                        class="button is-small is-fullwidth is-danger"
-                  >
+                        disabled
-	                  <button
+                    >
-                        class="button is-small is-fullwidth is-danger is-light"
+                      <span class="icon is-small">
-	                        disabled
+                        <i class="fas fa-exclamation-triangle"></i>
-	                    >
+                      </span>
-	                      <span class="icon is-small">
+                      <span>{{ addon.name }} er ikke tilladt</span>
-	                        <i class="fas fa-exclamation-triangle"></i>
+                    </button>
-	                      </span>
+                  </div>
-	                      <span>{{ addon.name }} / {{ getAddonRestrictionMessage(addon) }}</span>
-	                    </button>
-	                  </div>
                 </template>
               </template>
             </div>
@@ -358,5 +349,4 @@ const orderByOrderPriority = (addons) => {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
 </style>

src/components/displays/buttons/ActionSettingsWheelButton.vue

@@ -93,10 +93,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  directSectionKeys: {
-    type: Array,
-    default: () => [],
-  },
   allowBookingCompletion: {
     type: Boolean,
     default: false,
@@ -2411,15 +2407,6 @@ 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();
@@ -2637,7 +2624,7 @@ const syncDesktopFlyoutPosition = () => {
         </div>
       </template>
       <slot v-if="hasCustomActionsSlot" name="actions"></slot>
-      <template v-for="section in directBuiltInMenuSections" :key="section.key">
+      <template v-for="section in flatBuiltInMenuSections" :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

@@ -1,122 +0,0 @@
-<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

@@ -1,7 +0,0 @@
-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,
+  customer_id,
-	  getCustomerEmail,
+  getCustomerEmail,
-	  customer_name,
+  customer_name,
-	  getAddonRestriction,
+  isAddonRestricted,
-	  getProductRestriction,
+  canBuyAdditionalServices,
-	  registerPosStepSaveBarrier,
+  registerPosStepSaveBarrier,
-	  saveOrderMetadataField,
+  saveOrderMetadataField,
-	} from "@/components/shop/POSDepartmentProcess.vue";
+} 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,14 +343,13 @@ const applyPendingBookingFromSelection = async () => {
         effectivePrimaryProduct = firstWash;
       }
     }
-	    effectivePrimaryProduct.addons = preparedAddons as any;
+    effectivePrimaryProduct.addons = preparedAddons as any;
-	    transactionItems.setPrimaryItem(effectivePrimaryProduct as any);
+    transactionItems.setPrimaryItem(effectivePrimaryProduct as any);
-	    if (transactionItems.primaryItem.value) {
+    if (transactionItems.primaryItem.value) {
-	      transactionItems.primaryItem.value.addons = preparedAddons as any;
+      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
@@ -482,116 +481,9 @@ 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 = () => {
@@ -894,11 +786,10 @@ 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 && !isMobileAddonRestricted(addon))
+    .filter((addon: any) => Number(addon?.quantity ?? 0) > 0)
     .map((addon: any) => {
       const addonProduct = addon?.product ?? addon;
       return {
@@ -909,12 +800,11 @@ 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 && !isStandaloneAdditionalItemRestricted(item))
+    .filter((item: any) => Number(item?.quantity ?? 0) > 0)
     .map((item: any) => ({
       kind: "additional",
       relatedKey: null,
@@ -923,7 +813,6 @@ 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];
@@ -975,8 +864,8 @@ const buildCurrentSelectionComparableShapes = () => {
   };
 
   const addonShapes = sortComparableLastWashShapes(
-	    (transactionItems.primaryItem.value.addons || [])
+    (transactionItems.primaryItem.value.addons || [])
-	      .filter((addon: any) => Number(addon?.quantity ?? 0) > 0 && !isMobileAddonRestricted(addon))
+      .filter((addon: any) => Number(addon?.quantity ?? 0) > 0)
       .map((addon: any) => ({
         kind: "addon",
         product_id: Number(addon?.product?.id ?? addon?.id ?? 0),
@@ -985,8 +874,8 @@ const buildCurrentSelectionComparableShapes = () => {
   );
 
   const additionalShapes = sortComparableLastWashShapes(
-	    (transactionItems.additionalItems.value || [])
+    (transactionItems.additionalItems.value || [])
-	      .filter((item: any) => Number(item?.quantity ?? 0) > 0 && !isStandaloneAdditionalItemRestricted(item))
+      .filter((item: any) => Number(item?.quantity ?? 0) > 0)
       .map((item: any) => ({
         kind: "additional",
         product_id: Number(item?.id ?? 0),
@@ -1060,10 +949,8 @@ 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 (!shouldForceRecreateForRepricing && JSON.stringify(currentShapes) === JSON.stringify(comparableDesiredShapes)) {
+  if (JSON.stringify(currentShapes) === JSON.stringify(desiredShapes.map(({ kind, relatedKey, ...shape }) => shape))) {
     return true;
   }
 
@@ -1075,12 +962,12 @@ const syncCurrentTransactionToOrder = async () => {
     1,
     null,
     transactionItems.primaryItem.value?.notes || "",
-    transactionItems.primaryItem.value.skip_price_override === true ? null : transactionItems.primaryItem.value.price
+    transactionItems.primaryItem.value.price
   );
   const createdPrimaryItemId = createdPrimaryItemResponse?.data?.data?.id;
 
   const addonPromises = (transactionItems.primaryItem.value.addons || [])
-    .filter((addon: any) => Number(addon?.quantity ?? 0) > 0 && !isMobileAddonRestricted(addon))
+    .filter((addon: any) => Number(addon?.quantity ?? 0) > 0)
     .map((addon: any) => {
       const addonProduct = addon?.product ?? addon;
       return createOrderItem(
@@ -1089,23 +976,14 @@ const syncCurrentTransactionToOrder = async () => {
         Number(addon.quantity),
         createdPrimaryItemId,
         addonProduct?.notes || addon?.notes || "",
-        addonProduct?.skip_price_override === true || addon?.skip_price_override === true
+        addonProduct.price ?? addon.price
-          ? null
-          : addonProduct.price ?? addon.price
       );
     });
 
   const additionalPromises = (transactionItems.additionalItems.value || [])
-    .filter((item: any) => Number(item?.quantity ?? 0) > 0 && !isStandaloneAdditionalItemRestricted(item))
+    .filter((item: any) => Number(item?.quantity ?? 0) > 0)
     .map((item: any) =>
-      createOrderItem(
+      createOrderItem(normalizedOrderId, item.id, Number(item.quantity), null, item?.notes || "", item.price)
-        normalizedOrderId,
-        item.id,
-        Number(item.quantity),
-        null,
-        item?.notes || "",
-        item?.skip_price_override === true ? null : item.price
-      )
     );
 
   await Promise.all([...addonPromises, ...additionalPromises]);
@@ -1144,8 +1022,8 @@ const getSelectedProductsMissingRequiredNotes = () => {
     missingProducts.push(primaryProduct);
   }
 
-	  (primaryProduct?.addons || [])
+  (primaryProduct?.addons || [])
-	    .filter((addon: any) => Number(addon?.quantity ?? 0) > 0 && !isMobileAddonRestricted(addon))
+    .filter((addon: any) => Number(addon?.quantity ?? 0) > 0)
     .forEach((addon: any) => {
       const addonProduct = addon?.product ?? addon;
       if (
@@ -1157,8 +1035,8 @@ const getSelectedProductsMissingRequiredNotes = () => {
       }
     });
 
-	  (transactionItems.additionalItems.value || [])
+  (transactionItems.additionalItems.value || [])
-	    .filter((item: any) => Number(item?.quantity ?? 0) > 0 && !isStandaloneAdditionalItemRestricted(item))
+    .filter((item: any) => Number(item?.quantity ?? 0) > 0)
     .forEach((item: any) => {
       if (productRequiresOrderItemNote(item) && !productHasOrderItemNote(item)) {
         missingProducts.push(item);
@@ -1248,8 +1126,6 @@ const onBeforeComplete = async () => {
     throw new Error("No primary item selected");
   }
 
-  sanitizeRestrictedTransactionItems();
-
   if (!(await ensureRequiredOrderItemNotes())) {
     return false;
   }
@@ -1280,20 +1156,13 @@ 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,
     };
@@ -1403,18 +1272,6 @@ 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,
@@ -1425,10 +1282,15 @@ watch(
   }
 );
 
-// Computed property to annotate restricted addons based on customer attributes
+// Computed property to filter out restricted addons based on customer attributes
 const filteredAddons = computed(() => {
   const addons = transactionItems.primaryItem.value?.addons || [];
-  return addons.map((addon: any) => decorateMobileAddonRestriction(addon));
+  // If additional services are restricted, return empty array
+  if (!canBuyAdditionalServices()) {
+    return [];
+  }
+  // Filter out individually restricted addons
+  return addons.filter((addon: any) => !isAddonRestricted(addon));
 });
 </script>
 
@@ -1491,17 +1353,10 @@ const filteredAddons = computed(() => {
           <i class="fa fa-search"></i>
         </span>
       </button>
-	      <!-- Registration numbers -->
+      <!-- Registration numbers -->
-	      <PosDepartmentStepMobile2RegistrationNumbers :classes="layout.classes" />
+      <PosDepartmentStepMobile2RegistrationNumbers :classes="layout.classes" />
-	      <p
+      <!-- Product -->
-	        v-if="restrictionWarningMessageKey"
+      <PosDepartmentStepMobile2Product
-	        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,58 +1,59 @@
 <script setup lang="ts">
-import { ref, computed, watch, onMounted } from "vue";
+import { ref, computed, watch } 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 {PosProduct} from "@/components/displays/department/pos/steps/mobile/objects/PosProduct.vue";
-import PosDepartmentStepMobile2CategoryProduct from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2CategoryProduct.vue";
+import PosDepartmentStepMobile2CategoryProduct
-import PosDepartmentStepMobile2Addons from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Addons.vue";
+  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2CategoryProduct.vue";
-import { Addon } from "@/components/displays/department/pos/steps/mobile/objects/PosAddon.vue";
+import PosDepartmentStepMobile2Addons
-import PosDepartmentStepMobileFixedBottomControl from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileFixedBottomControl.vue";
+  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Addons.vue";
-import PosDepartmentStepMobileButtonNextStep from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonNextStep.vue";
+import {Addon} from "@/components/displays/department/pos/steps/mobile/objects/PosAddon.vue";
-import { transactionItems } from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
+import PosDepartmentStepMobileFixedBottomControl
-import PosDepartmentStepMobile2FloatingCart from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2FloatingCart.vue";
+  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileFixedBottomControl.vue";
-import { customer_id, getProductRestriction, hasAttribute } from "@/components/shop/POSDepartmentProcess.vue";
+import PosDepartmentStepMobileButtonNextStep
-import { useI18n } from "vue-i18n";
+  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonNextStep.vue";
-import { orderProducts } from "@/components/shop/Products.vue";
+import {
-
+  transactionItems
-const { t } = useI18n();
+} from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
-const ADDITIONAL_SERVICES_CATEGORY_ID = 8;
+import PosDepartmentStep2MobileVehicleSelection
-let latestAdditionalSelectionProductsRequestId = 0;
+  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";
 
 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 restrictionWarningMessageKey = ref("");
+const canSelectAdditionalItems = computed(() => canBuyAdditionalServices());
-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" : ""}`
@@ -66,10 +67,18 @@ 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) {
@@ -82,22 +91,19 @@ const exampleProducts = ref<PosProduct[]>([
   {
     id: 1,
     name: "Extra Towel",
-    price: 5.0,
+    price: 5.00,
     description: "A soft extra towel",
     subscription_allowed: false,
   },
   {
     id: 2,
     name: "Premium Soap",
-    price: 3.5,
+    price: 3.50,
     description: "A premium quality soap",
     subscription_allowed: true,
-  },
+  }
 ]);
-const convertProductToAddon = (
+const convertProductToAddon = (product: PosProduct, options: {quantity?: number, min?: number, max?: number} = {}): Addon => {
-  product: PosProduct,
-  options: { quantity?: number; min?: number; max?: number } = {}
-): Addon => {
   //console.warn("Converting product to addon:", product, options);
   return {
     id: product.id,
@@ -107,211 +113,88 @@ const convertProductToAddon = (
     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) =>
+  return <Addon[]>tmp.map(p => convertProductToAddon(p, {
-    convertProductToAddon(p, {
+    quantity: p?.quantity || 0,
-      quantity: p?.quantity || 0,
+    min: -1,
-      min: -1,
+    max: -1,
-      max: -1,
+  }));
-    })
+}
-  );
-};
 const availableAdditionalItems = ref<Addon[]>(getAvailableAdditionalItems());
-const getStandaloneAdditionalServicesRestriction = () => ({
-  restricted: true,
-  rule: "restrictAdditionalServices",
-  messageKey: "pos.restrictions.addons_not_allowed",
-});
-
 const isAdditionalItemRestricted = (product: PosProduct) => {
-  return getAdditionalItemRestriction({ product } as Addon).restricted;
+  if (!canSelectAdditionalItems.value) {
-};
+    return true;
-
-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();
   }
-
+  if (isProductRestricted(product)) {
-  return getProductRestriction(addon.product || addon, {
+    return true;
-    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 isAddonRestricted(convertProductToAddon(product));
+}
 
-  return nextAddon;
+watch(canSelectAdditionalItems, (canSelect) => {
-};
+  if (!canSelect) {
-
+    checked.value = false;
-const showRestrictedItemsRemovedWarning = () => {
+    pos.views.additionalItemSelection.value = false;
-  restrictionWarningMessageKey.value = "pos.restrictions.restricted_items_removed";
+  }
-};
+});
 
 // Computed property to filter out restricted additional items based on customer attributes
 const filteredAdditionalItems = computed(() => {
-  return availableAdditionalItems.value.map((addon: Addon) => decorateAdditionalItemAddon(addon));
+  // 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;
+  });
 });
 const onClickAddOtherProduct = () => {
-  pos.views.additionalItemSelection.value = !pos.views.additionalItemSelection.value;
+  if (!canSelectAdditionalItems.value) {
-  if (pos.views.additionalItemSelection.value) {
+    pos.views.additionalItemSelection.value = false;
-    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(
+watch(availableAdditionalItems, (newVal) => {
-  availableAdditionalItems,
+  newVal.forEach(addon => {
-  (newVal) => {
+    if (addon.quantity && addon.quantity > 0 && addon.product) {
-    let removedRestrictedItem = false;
+      addon.product.quantity = addon.quantity; // Ensure product has correct quantity
-    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) );
-    const currentItems = pos.transactionItems.additionalItems.value || [];
+  });
-    const isSame =
+}, { deep: true });
-      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(
+watch(() => pos.transactionItems.additionalItems.value, (newVal) => {
-  () => pos.transactionItems.additionalItems.value,
+  if (!newVal) return;
-  (newVal) => {
+  if (newVal.length === 0) {
-    if (!newVal) return;
+    availableAdditionalItems.value = [];
-    if (newVal.length === 0) {
+    //
-      if (availableAdditionalItems.value.length === 0) {
+    return;
-        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);
-onMounted(() => {
+  const newProductIds = newVal.map(p => p.id);
-  if (pos.views.additionalItemSelection.value) {
+  const isSame = currentProductIds.length === newProductIds.length && currentProductIds.every(id => newProductIds.includes(id));
-    scheduleAdditionalSelectionProductsLoad();
+  if (isSame) return;
-  }
+  availableAdditionalItems.value = getAvailableAdditionalItems();
-});
+}, { deep: true });
 
 const onClickAddProduct = async (product: PosProduct) => {
   if (isAdditionalItemRestricted(product)) {
-    showRestrictedItemsRemovedWarning();
     return;
   }
   pos.transactionItems.addAdditionalItem(product);
@@ -319,48 +202,25 @@ 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 -->
+  <!-- Minimal view, when not set as fullscreen view -->
-    <WhiteBoxCard
+    <WhiteBoxCard :toggleable="canSelectAdditionalItems && pos.transactionItems.additionalItems.value && pos.transactionItems.additionalItems.value.length == 0"
-      :toggleable="
+                  :defaultOpen="pos.transactionItems.additionalItems.value && pos.transactionItems.additionalItems.value.length > 0"
-        canSelectAdditionalItems &&
+                  @toggle="onToggle"
-        pos.transactionItems.additionalItems.value &&
+                  :forceState="(pos.transactionItems.additionalItems.value && pos.transactionItems.additionalItems.value.length > 0) ? true : (pos.views.additionalItemSelection.value)"
-        pos.transactionItems.additionalItems.value.length == 0
+                  v-if="!pos.views.additionalItemSelection.value">
-      "
-      :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
+          <div class="card-header-title pos-mobile-additional-items-header__title" data-testid="pos-mobile-additional-items-header-title">{{ displayLabel }}</div>
-            class="card-header-title pos-mobile-additional-items-header__title"
+          <div class="card-header-icon pos-mobile-additional-items-header__icon" data-testid="pos-mobile-additional-items-header-icon">
-            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
+              <i v-if="!pos.transactionItems.additionalItems.value || pos.transactionItems.additionalItems.value.length === 0" class="fas fa-angle-right"></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>
@@ -370,13 +230,6 @@ 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>
@@ -385,7 +238,7 @@ const onClickAddProduct = async (product: PosProduct) => {
         </div>
       </template>
       <!-- Footer -->
-      <template #footer>
+      <template #footer v-if="canSelectAdditionalItems">
         <!-- Select other product button -->
         <a class="card-footer-item" data-testid="pos-mobile-additional-items-open" @click="onClickAddOtherProduct">
           <span class="icon">
@@ -396,54 +249,24 @@ const onClickAddProduct = async (product: PosProduct) => {
       </template>
     </WhiteBoxCard>
     <!-- Fullscreen view, when selecting other products -->
-    <template v-else>
+    <template v-else-if="canSelectAdditionalItems">
       <div data-testid="pos-mobile-additional-items-selection">
-        <div class="pos-mobile-additional-items-categories">
+      <!-- Categories of products -->
-          <button
+      <PosDepartmentStep2MobileVehicleSelection :onAddProduct="onClickAddProduct" :onSearchClick="() => console.warn('AdditionalItem Search Clicked')"/><!-- :asAddons="true" :addons="availableAdditionalItems" @update:addons="availableAdditionalItems = $event"/>-->
-            type="button"
+      <!-- Buttons -->
-            class="button is-rounded is-small is-dark"
+      <PosDepartmentStepMobileFixedBottomControl variant="pos-step">
-            :data-testid="`pos-mobile-category-${ADDITIONAL_SERVICES_CATEGORY_ID}`"
+        <!-- Floating Card -->
-            @click="scheduleAdditionalSelectionProductsLoad"
+        <PosDepartmentStepMobile2FloatingCart/>
-          >
+        <!-- Next button -->
-            Extras
+        <PosDepartmentStepMobileButtonNextStep :isDark="true" :customAction="onClickAddOtherProduct">
-          </button>
+          <span class="pos-mobile-cta-content">
-        </div>
+            <span class="pos-mobile-cta-label has-text-white">{{ SessionUser.objects.global.language.next }}</span>
-        <div class="pos-mobile-additional-items-products">
+            <span class="pos-mobile-cta-value has-text-white">
-          <div
+              <i class="fas fa-arrow-right"></i>
-            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>
-          </PosDepartmentStepMobileButtonNextStep>
+          </span>
-        </PosDepartmentStepMobileFixedBottomControl>
+        </PosDepartmentStepMobileButtonNextStep>
+      </PosDepartmentStepMobileFixedBottomControl>
       </div>
     </template>
   </div>
@@ -468,10 +291,4 @@ 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,30 +4,27 @@ 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
-import { useI18n } from "vue-i18n";
+  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2CategoryProduct.vue";
-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"]);
 /**
@@ -47,7 +44,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
@@ -55,126 +52,85 @@ 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[addonKey]) {
+  if (doubleClickTimers.value[addon.id]) {
     // Double-click detected, clear the timeout
-    clearTimeout(doubleClickTimers.value[addonKey]);
+    clearTimeout(doubleClickTimers.value[addon.id]);
-    doubleClickTimers.value[addonKey] = null;
+    doubleClickTimers.value[addon.id] = 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;
     }
-    setAddonQuantity(addon, addon.quantity + 1);
+    addon.quantity = addon.quantity + 1;
+    emit('update:addons', [...props.addons])
     // Set the timeout again to allow for the next double-click
-    doubleClickTimers.value[addonKey] = window.setTimeout(() => {
+    doubleClickTimers.value[addon.id] = window.setTimeout(() => {
-      doubleClickTimers.value[addonKey] = null;
+      doubleClickTimers.value[addon.id] = 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) {
-    setAddonQuantity(addon, 0);
+    addon.quantity = 0;
+    emit('update:addons', [...props.addons])
     return;
   }
-  const nextQuantity = addon.min > 0 ? addon.min : 1;
+  addon.quantity = (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 (nextQuantity >= addon.max && addon.max !== -1) {
+  if (addon.quantity >= addon.max && addon.max !== -1) {
     // If the product max is reached, it will not be added.
-    setAddonQuantity(addon, nextQuantity);
+    emit('update:addons', [...props.addons])
     return;
   }
-  doubleClickTimers.value[addonKey] = window.setTimeout(() => {
+  doubleClickTimers.value[addon.id] = window.setTimeout(() => {
-    doubleClickTimers.value[addonKey] = null;
+    doubleClickTimers.value[addon.id] = null;
   }, doubleClickTimeout);
-  setAddonQuantity(addon, nextQuantity);
+  emit('update:addons', [...props.addons])
-};
+}
 
 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">
+  <template v-if="addons.length > 0"> <!-- If there are add-ons available -->
-    <!-- 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">
+    <template v-for="addon in sortAddonsByProductOrderPriority(props.addons)" :key="addon.id">
-        <PosDepartmentStepMobile2CategoryProduct
+      <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 && !isAddonRestricted(addon)"
+          :customButton="addon.quantity > 0">
-        >
+        <span class="custom-select-quantity-container">
-          <span class="custom-select-quantity-container">
             <ControlSelectAmount
-              v-if="!isAddonRestricted(addon)"
+                :testIdPrefix="`pos-mobile-addon-${addon.product.id}`"
-              :testIdPrefix="`pos-mobile-addon-${addon.product.id}`"
+                @update:quantity="addon.quantity = $event; emit('update:addons', [...props.addons])"
-              @update:quantity="setAddonQuantity(addon, $event)"
+                v-model:quantity="addon.quantity"
-              :quantity="addon.quantity"
+                :max="addon.max"
-              :max="addon.max"
+                :min="addon.min"
-              :min="addon.min"
             />
-            <span v-else class="tag is-danger is-light is-rounded">
-              {{ getAddonRestrictionMessage(addon) }}
-            </span>
           </span>
-        </PosDepartmentStepMobile2CategoryProduct>
+      </PosDepartmentStepMobile2CategoryProduct>
-      </template>
+    </template>
     </div>
   </template>
 </template>
@@ -192,11 +148,13 @@ const getAddonRestrictionMessage = (addon: Addon) => {
   width: 100%;
   height: 100%;
 
+
   /* Inside auto layout */
   flex: none;
   order: 1;
   align-self: stretch;
   flex-grow: 0;
+
 }
 .custom-container-entry-container {
   /* Frame 47 */
@@ -213,13 +171,14 @@ const getAddonRestrictionMessage = (addon: 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 {
   /* + */
@@ -251,7 +210,7 @@ const getAddonRestrictionMessage = (addon: Addon) => {
   height: 19px;
 
   /* rg-tx */
-  font-family: "Arial";
+  font-family: 'Arial';
   font-style: normal;
   font-weight: 400;
   font-size: 19px;
@@ -260,16 +219,18 @@ const getAddonRestrictionMessage = (addon: 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%;
 
@@ -279,6 +240,7 @@ const getAddonRestrictionMessage = (addon: Addon) => {
   flex: none;
   order: 0;
   flex-grow: 0;
+
 }
 .custom-label {
   /* Add-ons */
@@ -286,7 +248,7 @@ const getAddonRestrictionMessage = (addon: Addon) => {
   width: 60px;
   height: 16px;
 
-  font-family: "Arial";
+  font-family: 'Arial';
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
@@ -295,9 +257,11 @@ const getAddonRestrictionMessage = (addon: 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,49 +3,6 @@ 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
@@ -87,12 +44,14 @@ 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) {
-      selectCategory(category6);
+      pos.productList.setLoading(true);
+      pos.categories.select(category6);
       return;
     }
 
     if (pos.categories.get().length > 0) {
-      selectCategory(pos.categories.get()[0]);
+      pos.productList.setLoading(true);
+      pos.categories.select(pos.categories.get()[0]);
       return;
     }
   } catch (error) {
@@ -123,15 +82,10 @@ onBeforeMount(() => {
       </div>
     </div>
     <div v-else class="columns is-mobile is-multiline is-gapless">
-      <div
+      <div class="column is-narrow" v-for="category in pos.categories.get()" :key="category.id" :data-testid="`pos-mobile-category-${category.id}`">
-        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,24 +37,12 @@ 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,
@@ -81,23 +69,14 @@ const imageStyleCompact = {
 </script>
 
 <template>
-  <div
+  <div style="border-bottom: 1px solid #E5E5E5; padding: 10px 0;" class="mb-1">
-    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: props.disabled ? 'not-allowed' : 'pointer' }">
+      <div class="column is-narrow" @click="onClick" style="cursor: 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
+      <div class="column" @click="onClick" style="cursor: pointer;" :data-testid="props.testId || undefined">
-        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>
@@ -108,9 +87,6 @@ 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"/>
@@ -180,13 +156,4 @@ 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 && addon?.restricted !== true">
+          <div class="columns is-mobile is-vcentered is-gapless m-0" v-if="addon?.quantity > 0">
             <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,20 +3,16 @@ 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 {
+import { department_id, customer_id, isProductRestricted } from "@/components/shop/POSDepartmentProcess.vue";
-  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 { useI18n } from "vue-i18n";
+import { orderProducts } from "@/components/shop/Products.vue";
 
 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
@@ -30,12 +26,72 @@ 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[]>([]);
@@ -44,21 +100,18 @@ 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) {
-    let tmpAddon = pos.transactionItems.convertProductToAddon(product); // Convert product to addon (count = 0)
+    // Skip restricted products
-    const restriction = getProductRestrictionForRow(product);
+    if (isProductRestricted(product)) {
-    if (restriction.restricted) {
+      continue;
-      (tmpAddon as any).restricted = true;
-      (tmpAddon as any).restrictionRule = restriction.rule;
-      (tmpAddon as any).restrictionMessageKey = restriction.messageKey;
-      tmpAddon.quantity = 0;
     }
+    let tmpAddon = pos.transactionItems.convertProductToAddon(product); // Convert product to addon (count = 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 && !(tmpAddons[index] as any).restricted) {
+      if (index !== -1) {
         tmpAddons[index].quantity = addon.quantity; // Update the count
       }
     }
@@ -72,36 +125,11 @@ 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(() => {
-  if (props.restrictionContext === "standaloneAdditionalService") {
+  return pos.productList.get().filter(product => !isProductRestricted(product));
-    return productListItems.value;
-  }
-
-  return productListItems.value.filter(product => !isProductRestricted(product));
 });
 const shouldShowLoadingState = computed(() => {
-  return pos.categories.loading.value || (pos.productList.loading.value && productListItems.value.length === 0);
+  return pos.categories.loading.value || pos.productList.loading.value;
 });
 </script>
 
@@ -120,16 +148,14 @@ 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">
+      <template v-for="product in filteredProducts" :key="product.id">
-	        <PosDepartmentStepMobile2CategoryProduct
+        <PosDepartmentStepMobile2CategoryProduct
-	            @addProduct="emits('addProduct', product)"
+            @addProduct="emits('addProduct', product)"
-	            :price="product.price"
+            :price="product.price"
-	            :label="product.name"
+            :label="product.name"
-	            :piktogram="product.piktogram"
+            :piktogram="product.piktogram"
-	            :testId="`pos-mobile-product-${product.id}`"
+            :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,7 +9,6 @@ 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
 };
@@ -19,4 +18,4 @@ export type PosAddon = Addon;
 export default defineComponent({
   name: "PosAddon",
 });
-</script>
+</script>

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

@@ -1458,7 +1458,6 @@ 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,6 +23,5 @@ 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,11 +41,6 @@ const props = defineProps({
     type: Number,
     required: false,
     default: 750
-  },
-  restrictionContext: {
-    type: String,
-    required: false,
-    default: "primary"
   }
 });
 
@@ -87,12 +82,7 @@ const canClose = () => Date.now() >= earliestCloseTime.value;
     <!-- Product Recommendations -->
     <!--<PosDepartmentStepMobile2ProductRecommendations/>-->
     <!-- Products -->
-    <PosDepartmentStepMobile2Products
+    <PosDepartmentStepMobile2Products @addProduct="onAddProduct" :asAddons="props.asAddons" :addons="props.addons">
-      @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 pleno-table-header-content">
+          <span class="is-flex-wrap-nowrap">
             <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 pleno-table-header-content">
+          <span class="is-flex-wrap-nowrap">
             <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 pleno-table-header-content">
+          <span class="is-flex-wrap-nowrap">
             <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 pleno-table-header-content">
+          <span class="is-flex-wrap-nowrap">
             <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
           </span>
         </th>
@@ -512,7 +512,7 @@ const confirmCloseModal = () => {
             </button>
           </td>
         </template>
-        <td class="has-text-centered">
+        <td>
           <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 pleno-table-header-content">
+          <span class="is-flex-wrap-nowrap">
             <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 pleno-table-header-content">
+          <span class="is-flex-wrap-nowrap">
             <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
           </span>
         </th>

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

@@ -1,615 +0,0 @@
-<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,7 +16,6 @@ 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,
@@ -173,7 +172,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">
-                  <BuefyDateField v-model="selectedDate" value-type="string" data-testid="invoice-collection-date" />
+                  <input class="input" type="date" v-model="selectedDate" />
                 </div>
               </div>
               <!-- Create invoice collection button -->

src/components/displays/pagination/PaginationDisplayDates.vue

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

src/components/displays/pagination/PaginationOtherFiltersDropdown.vue

@@ -1,134 +0,0 @@
-<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,7 +64,6 @@ 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/DepartmentPos/XLVaskUsagePagination.vue

@@ -112,24 +112,13 @@ if (router.currentRoute.value.params.departmentId) {
 }
 const isImportLoading = ref(false);
 
-const buildImportUsageParams = () => {
-  if (!props.inheritPeriodFilters) {
-    return {};
-  }
-
-  return {
-    ...(props.initialDateFrom ? { dateFrom: props.initialDateFrom } : {}),
-    ...(props.initialDateTo ? { dateTo: props.initialDateTo } : {}),
-  };
-};
-
 const importUsageButton = async () => {
   isImportLoading.value = true;
   try {
     await SessionUser.request(
         '/modules/xlvask/tasks/import-usage',
         'GET',
-        buildImportUsageParams(),
+        {},
         function (error) {
           // This function is called when the request fails
           console.error("Failed to import orders.", error);

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

@@ -81,7 +81,7 @@ const props = defineProps({
   }
 })
 const emit = defineEmits(["flagStatusChanged", "flagCreated"]);
-import { computed, ref, provide, watch } from "vue";
+import { computed, ref, provide } from "vue";
 import { useRouter } from "vue-router";
 import {
   usePaginatedList,
@@ -100,13 +100,7 @@ const {
   setPage,
   search,
   endpoint,
-  filter,
-  metaSearch,
-  additionalQueryParameters,
-  orderBy,
-  orderDirection,
   setFilter,
-  getFilter,
   setAdditionalQueryParameters,
   setOrder,
   setHideSearchField,
@@ -114,17 +108,9 @@ 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 } from "@/services/dateOnly.js";
+import { formatLocalDateOnly, parseLocalDateOnly, todayLocalDateOnly } 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();
@@ -187,208 +173,24 @@ if (props.autoLoad) {
   loadList();
 }
 
-const date_from = ref(props.dates?.dateFrom ?? null);
+const date_from = ref(null);
-const date_to = ref(props.dates?.dateTo ?? null);
+const date_to = ref(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 = newSelectionStartDate ? formatLocalDateOnly(newSelectionStartDate) : "";
+  const formattedStartDate = formatLocalDateOnly(newSelectionStartDate);
-  const formattedEndDate = newSelectionToDate ? formatLocalDateOnly(newSelectionToDate) : "";
+  const formattedEndDate = formatLocalDateOnly(newSelectionToDate);
   date_from.value = formattedStartDate;
   date_to.value = formattedEndDate;
-  setDateFilter("created_at-date_from", formattedStartDate, false);
+  setFilter("created_at-date_from", formattedStartDate, true);
-  setDateFilter("created_at-date_to", formattedEndDate, false);
+  setFilter("created_at-date_to", formattedEndDate, true);
   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>
@@ -421,89 +223,145 @@ watch(orderDateEventSignature, () => {
         />
       </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">
-            <BuefyDateField
+            <input type="date" class="input" @change="setFilter('created_at-date_from', $event.target.value, true)" v-model="date_from" />
-              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">
-            <BuefyDateField
+            <input type="date" class="input" @change="setFilter('created_at-date_to', $event.target.value, true)" v-model="date_to" />
-              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:allow-empty-selection="true"
+                            v-bind:selection="{ startDate: parseLocalDateOnly(date_from || todayLocalDateOnly()), endDate: parseLocalDateOnly(date_to || todayLocalDateOnly()) }"/>
-                            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>
@@ -529,17 +387,4 @@ watch(orderDateEventSignature, () => {
   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,10 +24,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  userScopedUserId: {
-    type: [String, Number],
-    default: null,
-  },
 });
 const { t } = useI18n();
 
@@ -103,11 +99,7 @@ if (props.autoLoad) {
     </template>
   </PaginationDisplay>
 
-  <SubusersTable
+  <SubusersTable :objects="list" :show-customer="showCustomer" />
-    :objects="list"
-    :show-customer="showCustomer"
-    :user-scoped-user-id="userScopedUserId"
-  />
 
   <PaginationNavigation
     :currentPage="metaCurrentPage"

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

@@ -62,7 +62,7 @@ if (props.autoLoad) {
         </div>
       </div>
     </template>
-    <UsersTable :objects="list" @migrated="loadList" />
+    <UsersTable :objects="list" />
   </TableLabeledPagination>
 </template>
 

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

@@ -25,11 +25,6 @@ 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,
@@ -40,34 +35,12 @@ 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(props.endpoint, false);
+setEndpoint("/vehicles", 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>
@@ -102,14 +75,7 @@ const reloadVehicles = async () => {
       </div>
     </template>
     <template #default>
-      <VehiclesTable
+      <VehiclesTable :vehicles="list" :show_add_vehicle="props.customer_id" :add_other_customer_id="props.add_other_customer_id"/>
-        :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,16 +1,13 @@
 <script setup lang="ts">
 import PaginationDisplayItemColumn from "@/components/displays/pagination/PaginationDisplayItemColumn.vue";
-import BuefyDateField from "@/components/forms/BuefyDateField.vue";
+import { computed } from "vue";
+import { formatLocalDateOnly, parseLocalDateOnly } from "@/services/dateOnly.js";
 const props = defineProps({
   label: {
     type: String,
     required: true,
     default: "Date",
   },
-  placeholder: {
-    type: String,
-    default: "",
-  },
 });
 const emit = defineEmits(['update:date']);
 const date = defineModel<Date>({
@@ -22,20 +19,27 @@ defineExpose({
   date,
 });
 
-const updateDate = (newDate: Date) => {
+const formattedDate = computed(() => {
-  emit('update:date', newDate);
+  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.
 </script>
 
 <template>
   <PaginationDisplayItemColumn :label="props.label">
     <template #control>
-      <BuefyDateField
+      <input
-        v-model="date"
+        type="date"
-        value-type="date"
+        class="input"
-        data-testid="pagination-date-picker"
+        :value="formattedDate"
-        :placeholder="props.placeholder"
+        @input="(e) => {
-        @change="updateDate"
+          const newDate = parseLocalDateOnly(e.target.value);
+          emit('update:date', newDate);
+        }"
       />
     </template>
   </PaginationDisplayItemColumn>

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

@@ -9,8 +9,6 @@ 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,
@@ -49,23 +47,6 @@ 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>
@@ -73,19 +54,23 @@ function applyPreset(preset: { getRange: () => { start: Date; end: 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="isPresetSelected(preset)"
+        v-bind:selected="dateFunctions.dateComparison.match.dates(
-        @click="applyPreset(preset)"
+          { start: startDateModel, end: endDateModel },
+          preset,
+        )"
+        @click="() => {
+          updateStartDate(preset.start);
+          updateEndDate(preset.end);
+        }"
     />
   </template>
 

src/components/displays/selectors/SubuserGrantPermissionNodes.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { BCheckbox } from "buefy";
+import { BCheckbox, BField } from "buefy";
-import { computed, onMounted, ref, watch } from "vue";
+import { 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; permission_template_key?: string },
+    type: Object as () => { id: number; permissions: string[]; name: string },
-    default: () => ({ id: 0, permissions: [], name: "", permission_template_key: "custom" }),
+    default: () => ({ id: 0, permissions: [], name: "" }),
     required: true,
   },
   permissions: {
@@ -15,182 +14,59 @@ const props = defineProps({
     default: () => [],
     required: true,
   },
-  templateKey: {
-    type: String,
-    default: null,
-  },
-  allowAdvanced: {
-    type: Boolean,
-    default: false,
-  },
 });
 
-type PermissionGroup = {
+type PermissionNode = {
   key: string;
-  capabilities: string[];
+  name: string;
-};
-
-type PermissionTemplate = {
-  key: string;
-  label: string;
   description: string;
-  enabled: boolean;
+  type: string;
-  permissions: string[];
+  default: boolean;
-  permission_groups: PermissionGroup[];
 };
 
-const t = (key: string, values: Record<string, string> | undefined = undefined) => i18n.global.t(key, values);
+type PermissionNodeGroup = {
-
+  group: string;
-const LEGACY_PERMISSION_GROUPS: PermissionGroup[] = [
+  description: string;
-  {
+  nodes: PermissionNode[];
-    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 permissionNodes = ref<PermissionNodeGroup[]>([]);
 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", "update:access"]);
+const emit = defineEmits(["update:permissions"]);
-
-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 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);
+  selectedPermissions.value = [...new Set((value || []).filter(Boolean))];
-  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;
-  }
-
-  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 {
+    return;
-    selectedPermissions.value = selectedPermissions.value.filter((value) => value !== permissionKey);
   }
-  emitAccess();
-};
 
-const visibleTemplates = computed(() => templates.value.filter((template) => template.key !== "custom"));
+  selectedPermissions.value = selectedPermissions.value.filter((value) => value !== permissionKey);
-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 {
-    const accessModel = await SessionUser.objects.subuser_grants.functions.getPermissionTemplates();
+    permissionNodes.value = await SessionUser.objects.subuser_grants.functions.getPermissionNodes();
-    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 templates:", error);
+    console.error("Failed to fetch permission nodes:", error);
-    templates.value = [];
+    permissionNodes.value = [];
-    selectedTemplateKey.value = "custom";
   } finally {
     isLoading.value = false;
   }
@@ -199,66 +75,42 @@ onMounted(async () => {
 
 <template>
   <div>
-    <h2 class="title is-4">{{ t("superuser.driver_access.editor_title", { name: props.grant.name }) }}</h2>
+    <h2 class="title is-4">Tilladelsesnoder for {{ props.grant.name }}</h2>
     <p class="mb-4 has-text-grey">
-      {{ t("superuser.driver_access.editor_intro") }}
+      Vælg tilladelserne og tryk derefter på Gem i dialogen for at opdatere chaufføren.
     </p>
 
     <div v-if="isLoading" class="notification is-light">
-      {{ t("superuser.driver_access.loading") }}
+      Henter tilladelser...
     </div>
 
-    <div v-else-if="visibleTemplates.length === 0" class="notification is-warning is-light">
+    <div v-else-if="permissionNodes.length === 0" class="notification is-warning is-light">
-      {{ t("superuser.driver_access.empty") }}
+      Ingen tilladelsesnoder blev fundet.
     </div>
 
-    <div v-else class="driver-access-editor">
+    <div v-else v-for="group in permissionNodes" :key="group.group" class="box">
-      <button
+      <div class="divider">
-        v-for="template in visibleTemplates"
+        <div class="content">
-        :key="template.key"
+          <h3 class="title is-5">{{ group.group }}</h3>
-        type="button"
+          <p class="subtitle is-6">{{ group.description }}</p>
-        class="driver-access-card"
+        </div>
-        :class="{ 'driver-access-card--selected': selectedTemplateKey === template.key }"
+      </div>
-        :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>
 
-      <button
+      <div class="columns is-multiline">
-        v-if="allowAdvanced"
+        <div v-for="node in group.nodes" :key="node.key" class="column is-4">
-        type="button"
+          <div class="box permission-node">
-        class="driver-access-card"
+            <h4 class="title is-6">{{ node.name }}</h4>
-        :class="{ 'driver-access-card--selected': selectedTemplateKey === 'custom' }"
+            <p class="subtitle is-7">{{ node.description }}</p>
-        data-testid="permission-template-custom"
+            <b-field class="permission-checkbox">
-        @click="selectTemplate('custom')"
+              <b-checkbox
-      >
+                :model-value="selectedPermissions.includes(node.key)"
-        <span class="driver-access-card__title">{{ templateLabel("custom") }}</span>
+                :data-testid="`permission-node-checkbox-${node.key}`"
-        <span class="driver-access-card__description">{{ t("superuser.driver_access.custom_description") }}</span>
+                @update:model-value="(checked) => togglePermission(node.key, !!checked)"
-        <span v-if="selectedTemplateKey === 'custom'" class="tag is-warning is-light">{{ t("superuser.driver_access.advanced") }}</span>
+                @input="(checked) => togglePermission(node.key, !!checked)"
-      </button>
+              >
-    </div>
+                Aktiver
-
+              </b-checkbox>
-    <div v-if="activeTemplate && selectedTemplateKey !== 'custom'" class="notification is-info is-light mt-4">
+            </b-field>
-      <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>
@@ -267,44 +119,15 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-.driver-access-editor {
+.permission-node {
-  display: grid;
+  height: 100%;
-  gap: 0.75rem;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }
 
-.driver-access-card {
+.permission-checkbox {
-  align-items: flex-start;
+  margin-top: 0.75rem;
-  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;
 }
 
-.driver-access-card:hover,
+.permission-checkbox :deep(.field) {
-.driver-access-card--selected {
+  margin-bottom: 0;
-  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

@@ -1,72 +0,0 @@
-<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

@@ -1,75 +0,0 @@
-<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

@@ -1,202 +0,0 @@
-<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

@@ -1,79 +0,0 @@
-<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

@@ -1,87 +0,0 @@
-<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

@@ -1,44 +0,0 @@
-<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

@@ -1,117 +0,0 @@
-<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,7 +1117,6 @@ 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;
 }
@@ -1132,7 +1131,6 @@ function modulePath(key) {
 
 .module-card__title {
   margin: 0;
-  flex: 1 1 12rem;
   min-width: 0;
   text-transform: none;
   letter-spacing: 0.04em;
@@ -1142,7 +1140,7 @@ function modulePath(key) {
 
 .module-card__top .status-pill {
   justify-self: end;
-  margin-left: 0;
+  align-self: start;
 }
 
 .gateway-card__title {

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

@@ -7,7 +7,6 @@ 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: {
@@ -66,8 +65,8 @@ const parseClosedAt = (value) => {
         <td>{{ parseClosedAt(object.closed_at) }}</td>
         <td>{{ parseDate(object.created_at) }}</td>
         <td>{{ parseDate(object.updated_at) }}</td>
-        <td class="is-narrow">
+        <td>
-          <SuperuserInvoiceRowActions :include-buffer="true">
+          <div class="buttons is-float-right">
             <ActionSettingsWheelButton>
               <template #actions>
                 <ActionSettingsWheelItem
@@ -77,7 +76,7 @@ const parseClosedAt = (value) => {
                 />
               </template>
             </ActionSettingsWheelButton>
-          </SuperuserInvoiceRowActions>
+          </div>
         </td>
       </tr>
       <tr v-if="objects.length === 0">

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

@@ -1,9 +1,7 @@
 <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";
 
@@ -16,14 +14,9 @@ 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");
@@ -32,70 +25,8 @@ const canDisableAccess = () =>
 const canResendInvite = (subuser) =>
   (props.showCustomer ? SessionUser.canAccessSuperUser() : SessionUser.canManageSubusers("edit"))
   && Boolean(subuser?.can_resend_invite ?? subuser?.setup_required);
-const hasActionsForContext = (subuser) =>
+const hasRowActions = (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) {
@@ -140,11 +71,7 @@ const formatCustomer = (subuser) => {
 };
 
 const permissionSummary = (subuser) =>
-  SessionUser.objects.subusers.functions.permissionSummary(
+  SessionUser.objects.subusers.functions.permissionSummary(subuser?.grant_permissions || []);
-    primaryGrant(subuser)?.grant_permissions || [],
-    primaryGrant(subuser)?.permission_template_key,
-    primaryGrant(subuser)?.permission_groups || []
-  );
 
 const statusLabel = (subuser) => {
   switch (subuser?.access_state) {
@@ -187,20 +114,7 @@ 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);
-          },
-        }
   );
 };
 
@@ -220,13 +134,9 @@ const onEditNote = async (subuser) => {
     cancelButtonText: "Annuller",
     preConfirm: async (value) => {
       try {
-        if (isUserScoped()) {
+        await SessionUser.objects.subuser_grants.set.note(subuser.grant_id, value || "");
-          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;
       }
@@ -258,11 +168,7 @@ const onToggleEnabled = async (subuser, enabled) => {
   }
 
   try {
-    if (isUserScoped()) {
+    await SessionUser.objects.subuser_grants.set.enabled(subuser.grant_id, enabled);
-      await patchScopedGrant(subuser, { enabled });
-    } else {
-      await SessionUser.objects.subuser_grants.set.enabled(subuser.grant_id, enabled);
-    }
     await refreshList();
   } catch (error) {
     await Swal.fire({
@@ -275,10 +181,7 @@ const onToggleEnabled = async (subuser, enabled) => {
 };
 
 const onResendInvite = async (subuser) => {
-  await SessionUser.objects.subusers.functions.resendInvite(subuser, refreshList, {
+  await SessionUser.objects.subusers.functions.resendInvite(subuser, refreshList, { superuser: props.showCustomer });
-    superuser: props.showCustomer || isUserScoped(),
-    userId: props.userScopedUserId,
-  });
 };
 </script>
 
@@ -304,174 +207,90 @@ const onResendInvite = async (subuser) => {
           <td :colspan="showCustomer ? 10 : 9" class="has-text-centered has-text-grey py-6">Ingen chauffører fundet.</td>
         </tr>
 
-        <template v-for="subuser in props.objects" :key="subuser.id">
+        <tr v-for="subuser in props.objects" :key="`${subuser.id}-${subuser.grant_id || 'none'}`">
-          <tr>
+          <td>{{ subuser.id }}</td>
-            <td>{{ subuser.id }}</td>
 
-            <td v-if="showCustomer">
+          <td v-if="showCustomer">
-              <div v-if="hasMultipleGrants(subuser)">
+            <div class="has-text-weight-semibold">{{ formatCustomer(subuser) }}</div>
-                <button
+            <div class="is-size-7 has-text-grey">Grant #{{ subuser.grant_id }}</div>
-                  type="button"
+          </td>
-                  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>
+          <td>
-              <div class="has-text-weight-semibold">{{ subuser.name || "-" }}</div>
+            <div class="has-text-weight-semibold">{{ subuser.name || "-" }}</div>
-              <div class="is-size-7 has-text-grey" :data-testid="`subuser-username-${subuser.id}`">
+            <div class="is-size-7 has-text-grey" :data-testid="`subuser-username-${subuser.id}`">
-                {{ formatUsername(subuser) }}
+              {{ formatUsername(subuser) }}
-              </div>
+            </div>
-            </td>
+          </td>
 
-            <td>
+          <td>
-              <div :data-testid="`subuser-email-${subuser.id}`">{{ formatEmail(subuser) }}</div>
+            <div :data-testid="`subuser-email-${subuser.id}`">{{ formatEmail(subuser) }}</div>
-              <div class="is-size-7 has-text-grey" :data-testid="`subuser-phone-${subuser.id}`">
+            <div class="is-size-7 has-text-grey" :data-testid="`subuser-phone-${subuser.id}`">
-                {{ formatPhone(subuser) }}
+              {{ formatPhone(subuser) }}
-              </div>
+            </div>
-            </td>
+          </td>
 
-            <td>
+          <td>
-              <span class="tag" :class="statusClass(subuser)" :data-testid="`subuser-status-${subuser.id}`">
+            <span class="tag" :class="statusClass(subuser)" :data-testid="`subuser-status-${subuser.id}`">
-                {{ statusLabel(subuser) }}
+              {{ statusLabel(subuser) }}
-              </span>
+            </span>
-              <div v-if="!hasMultipleGrants(subuser)" class="is-size-7 has-text-grey mt-2">
+            <div class="is-size-7 has-text-grey mt-2">
-                <span v-if="primaryGrant(subuser).grant_enabled">Grant aktiv</span>
+              <span v-if="subuser.grant_enabled">Grant aktiv</span>
-                <span v-else>Grant inaktiv</span>
+              <span v-else>Grant inaktiv</span>
-              </div>
+            </div>
-              <div v-else class="is-size-7 has-text-grey mt-2">
+          </td>
-                {{ rowGrants(subuser).filter((grant) => grant.grant_enabled).length }} aktive grants
-              </div>
-            </td>
 
-            <td>
+          <td>
-              <div class="permission-summary">{{ permissionSummary(subuser) }}</div>
+            <div class="permission-summary">{{ permissionSummary(subuser) }}</div>
-            </td>
+          </td>
 
-            <td>
+          <td>
-              <div>{{ primaryGrant(subuser).grant_note || "-" }}</div>
+            <div>{{ subuser.grant_note || "-" }}</div>
-            </td>
+          </td>
 
-            <td>{{ formatDateTime(subuser.created_at) }}</td>
+          <td>{{ formatDateTime(subuser.created_at) }}</td>
-            <td>{{ formatDateTime(subuser.updated_at) }}</td>
+          <td>{{ formatDateTime(subuser.updated_at) }}</td>
 
-            <td>
+          <td>
-              <div class="buttons is-justify-content-flex-end action-buttons" :data-testid="`subuser-actions-${subuser.id}`">
+            <div class="buttons is-justify-content-flex-end action-buttons" :data-testid="`subuser-actions-${subuser.id}`">
-                <ActionSettingsWheelButton v-if="hasRowActions(subuser)">
+              <ActionSettingsWheelButton v-if="hasRowActions(subuser)">
-                  <template #actions>
+                <template #actions>
-                    <ActionSettingsWheelItem
+                  <ActionSettingsWheelItem
-                      v-if="canEditPermissions() && subuser.grant_id"
+                    v-if="canEditPermissions() && subuser.grant_id"
-                      icon="fas fa-pen"
+                    icon="fas fa-pen"
-                      label="Redigér note"
+                    label="Redigér note"
-                      :click-action="() => onEditNote(subuser)"
+                    :click-action="() => onEditNote(subuser)"
-                      :test-id="`subuser-note-${subuser.id}`"
+                    :test-id="`subuser-note-${subuser.id}`"
-                    />
+                  />
 
-                    <ActionSettingsWheelItem
+                  <ActionSettingsWheelItem
-                      v-if="canEditPermissions() && subuser.grant_id"
+                    v-if="canEditPermissions() && subuser.grant_id"
-                      icon="fas fa-user-shield"
+                    icon="fas fa-user-shield"
-                      label="Tilladelser"
+                    label="Tilladelser"
-                      :click-action="() => onEditPermissions(subuser)"
+                    :click-action="() => onEditPermissions(subuser)"
-                      :test-id="`subuser-permissions-${subuser.id}`"
+                    :test-id="`subuser-permissions-${subuser.id}`"
-                    />
+                  />
 
-                    <ActionSettingsWheelItem
+                  <ActionSettingsWheelItem
-                      v-if="canResendInvite(subuser)"
+                    v-if="canResendInvite(subuser)"
-                      icon="fas fa-paper-plane"
+                    icon="fas fa-paper-plane"
-                      label="Gensend"
+                    label="Gensend"
-                      :click-action="() => onResendInvite(subuser)"
+                    :click-action="() => onResendInvite(subuser)"
-                      :test-id="`subuser-resend-${subuser.id}`"
+                    :test-id="`subuser-resend-${subuser.id}`"
-                    />
+                  />
 
-                    <ActionSettingsWheelItem
+                  <ActionSettingsWheelItem
-                      v-if="canDisableAccess() && subuser.grant_id"
+                    v-if="canDisableAccess() && subuser.grant_id"
-                      :icon="subuser.grant_enabled ? 'fas fa-ban' : 'fas fa-check'"
+                    :icon="subuser.grant_enabled ? 'fas fa-ban' : 'fas fa-check'"
-                      :label="subuser.grant_enabled ? 'Deaktivér' : 'Aktivér'"
+                    :label="subuser.grant_enabled ? 'Deaktivér' : 'Aktivér'"
-                      :template="subuser.grant_enabled ? 'danger' : 'success'"
+                    :template="subuser.grant_enabled ? 'danger' : 'success'"
-                      :click-action="() => onToggleEnabled(subuser, !subuser.grant_enabled)"
+                    :click-action="() => onToggleEnabled(subuser, !subuser.grant_enabled)"
-                      :test-id="`subuser-toggle-${subuser.id}`"
+                    :test-id="`subuser-toggle-${subuser.id}`"
-                    />
+                  />
-                  </template>
+                </template>
-                </ActionSettingsWheelButton>
+              </ActionSettingsWheelButton>
-              </div>
+            </div>
-            </td>
+          </td>
-          </tr>
+        </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>
@@ -487,31 +306,4 @@ 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

@@ -1,49 +0,0 @@
-<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,10 +1,11 @@
 <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,
@@ -28,141 +29,134 @@ 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") {
+  if (typeof value === 'number') {
-    return value === 0 ? t("global.no_data") : value;
+    return value === 0 ? t('global.no_data') : value;
-  } else if (typeof value === "string") {
+  } 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">
+    <table class="table is-fullwidth is-hoverable is-striped">
-    <thead>
+      <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>
+      </thead>
-    <tbody>
+      <tbody>
       <template v-for="object in props.objects" :key="object.id">
         <tr v-if="object.objects > 0 || props.showEmpty">
-          <td>{{ object.id }}</td>
+        <td>{{ object.id }}</td>
-          <!-- Customer name -->
+        <!-- Customer name -->
-          <EditableTableColumn
+        <EditableTableColumn
             :object="object"
             :loadList="loadList"
             column="customer_name"
             :virtual-column="true"
             :parse-function="(value) => value.customer_name"
-          />
+        />
-          <!-- Customer number -->
+        <!-- Customer number -->
-          <EditableTableColumn :object="object" :loadList="loadList" column="customer_number" />
+        <EditableTableColumn
-          <!-- Processor -->
+            :object="object"
-          <EditableTableColumn
+            :loadList="loadList"
+            column="customer_number"
+        />
+        <!-- Processor -->
+        <EditableTableColumn
             :object="object"
             :loadList="loadList"
             column="processor"
-            :parse-function="
+            :parse-function="(value) => value === null ? t('global.no_data') : value === 1 ? 'E-conomic' : t('global.other')"
-              (value) => (value === null ? t('global.no_data') : value === 1 ? 'E-conomic' : t('global.other'))
+        />
-            "
+        <!-- Transactions -->
-          />
+        <EditableTableColumn
-          <!-- Transactions -->
-          <EditableTableColumn
             :object="object"
             :loadList="loadList"
             column="orders"
             :parse-function="(value) => parseTransactionCount(value)"
-          />
+        />
-          <!-- Closed at -->
+        <!-- Closed at -->
-          <EditableTableColumn
+        <EditableTableColumn
             :object="object"
             :loadList="loadList"
             column="closed_at"
-            :parse-function="(value) => (value === null ? t('global.open') : t('global.closed') + ' ' + value)"
+            :parse-function="(value) => value === null ? t('global.open') : t('global.closed') + ' ' + value"
-          />
+        />
-          <!-- Created at -->
+        <!-- Created at -->
-          <EditableTableColumn :object="object" :loadList="loadList" column="created_at" />
+        <EditableTableColumn
-          <!-- Total net amount -->
+            :object="object"
-          <td v-if="props.showTotal">{{ SessionUser.functions.currency.toLocal(object.total_net_amount) }}</td>
+            :loadList="loadList"
-          <!-- Actions -->
+            column="created_at"
-          <td v-if="!props.isSelector" class="is-narrow">
+        />
-            <SuperuserInvoiceRowActions :include-buffer="true">
+        <!-- Total net amount -->
-              <ActionSettingsWheelButton>
+        <td v-if="props.showTotal">{{ SessionUser.functions.currency.toLocal(object.total_net_amount) }}</td>
-                <template #actions>
+        <!-- Actions -->
-                  <ActionSettingsWheelItem
+        <td v-if="!props.isSelector">
-                    icon="fas fa-eye"
+          <ActionSettingsWheelButton>
-                    @click="redirect('/superuser/invoices/' + object.id)"
+            <template #actions>
-                    :label="t('common.show')"
+              <ActionSettingsWheelItem
-                  />
+                icon="fas fa-eye"
-                </template>
+                @click="redirect('/superuser/invoices/' + object.id)"
-              </ActionSettingsWheelButton>
+                :label="t('common.show')"
-            </SuperuserInvoiceRowActions>
+              />
-          </td>
+            </template>
-          <!-- Selector -->
+          </ActionSettingsWheelButton>
-          <td v-if="props.isSelector" class="is-narrow">
+        </td>
-            <BCheckbox
+        <!-- Selector -->
-              :model-value="false"
+        <td v-if="props.isSelector">
-              size="is-small"
+          <button class="button is-small is-dark" @click="onSelect(object.id)">
-              :aria-label="`${$t('common.select')} #${object.id}`"
+            {{ $t('common.select') }}
-              :data-testid="`collected-invoice-selector-${object.id}`"
+          </button>
-              @update:model-value="(checked) => onSelectorChecked(object.id, checked)"
+        </td>
-            />
+      </tr>
-          </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">
+        <td colspan="9">{{ $t('tables.showing') }} {{ objects.length - objects.filter(object => object.objects === 0).length }} / {{ objects.length }} {{ SessionUser.objects.collectedOrderInvoices.meta.labels.multiple }}</td>
-          {{ $t("tables.showing") }} {{ objects.length - objects.filter((object) => object.objects === 0).length }} /
-          {{ objects.length }} {{ SessionUser.objects.collectedOrderInvoices.meta.labels.multiple }}
-        </td>
       </tr>
-    </tbody>
+      </tbody>
-  </table>
+    </table>
 </template>
 
-<style scoped></style>
+<style scoped>
+
+</style>

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

@@ -1,136 +1,21 @@
 <script setup>
 import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
 import { useI18n } from 'vue-i18n';
-import Swal from "sweetalert2";
 
 const { t } = useI18n();
 
 defineProps(['objects']);
-import { computed, onMounted, ref } from 'vue';
+import { ref } from 'vue';
 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 ActionSettingsWheelItemLabel from "@/components/displays/buttons/ActionSettingsWheelItemLabel.vue";
 
 const redirect = (path) => {
   window.location = path;
 }
 
-const limitedBackofficeTemplates = ref([]);
-const templatesLoading = ref(false);
-const templatesLoadError = ref(false);
-const applyingTemplateKey = ref("");
-
-const canApplyLimitedBackofficeTemplates = computed(() => SessionUser.hasPermission("add_role_permission"));
-
-const loadLimitedBackofficeTemplates = async () => {
-  if (!canApplyLimitedBackofficeTemplates.value || templatesLoading.value) {
-    return;
-  }
-
-  templatesLoading.value = true;
-  templatesLoadError.value = false;
-  try {
-    const templates = await SessionUser.objects.roles.functions.getLimitedBackofficePermissionTemplates();
-    limitedBackofficeTemplates.value = Array.isArray(templates) ? templates : [];
-  } catch (error) {
-    console.error("Failed to load limited backoffice permission templates", error);
-    templatesLoadError.value = true;
-  } finally {
-    templatesLoading.value = false;
-  }
-};
-
-const templateTranslation = (template, field) => {
-  const key = `templates.limited_backoffice.roles.${template?.key}.${field}`;
-  const translated = t(key);
-  return translated === key ? template?.[field] || template?.key || "" : translated;
-};
-
-const templateLabel = (template) => templateTranslation(template, "label");
-
-const rolePermissions = (role) => (Array.isArray(role?.permissions) ? role.permissions : []);
-const templatePermissions = (template) => (Array.isArray(template?.permissions) ? template.permissions : []);
-
-const missingTemplatePermissions = (role, template) => {
-  const currentPermissions = new Set(rolePermissions(role));
-  return templatePermissions(template).filter((permission) => permission && !currentPermissions.has(permission));
-};
-
-const roleTemplateActionKey = (role, template) => `${role?.id}:${template?.key}`;
-const isApplyingTemplate = (role, template) => applyingTemplateKey.value === roleTemplateActionKey(role, template);
-const isTemplateActionDisabled = (role, template) =>
-  templatesLoading.value || Boolean(applyingTemplateKey.value) || missingTemplatePermissions(role, template).length === 0;
-
-const applyLimitedBackofficeTemplate = async (role, template) => {
-  const missingPermissions = missingTemplatePermissions(role, template);
-  const label = templateLabel(template);
-
-  if (missingPermissions.length === 0) {
-    await Swal.fire({
-      icon: "success",
-      title: t("roles.templates.up_to_date_title"),
-      text: t("roles.templates.up_to_date_text", { role: role.name, template: label }),
-    });
-    return;
-  }
-
-  const confirmation = await Swal.fire({
-    icon: "question",
-    title: t("roles.templates.confirm_title"),
-    text: t("roles.templates.confirm_text", {
-      count: missingPermissions.length,
-      role: role.name,
-      template: label,
-    }),
-    showCancelButton: true,
-    confirmButtonText: t("roles.templates.confirm_button"),
-    cancelButtonText: t("common.cancel"),
-  });
-
-  if (!confirmation.isConfirmed) {
-    return;
-  }
-
-  applyingTemplateKey.value = roleTemplateActionKey(role, template);
-  try {
-    const results = await Promise.allSettled(
-      missingPermissions.map((permission) =>
-        SessionUser.objects.roles.functions.permissions.add(role.id, permission)
-      )
-    );
-    const failed = results.filter((result) => result.status === "rejected");
-
-    if (failed.length > 0) {
-      throw failed[0].reason;
-    }
-
-    await Swal.fire({
-      icon: "success",
-      title: t("roles.templates.success_title"),
-      text: t("roles.templates.success_text", {
-        count: missingPermissions.length,
-        role: role.name,
-        template: label,
-      }),
-    });
-  } catch (error) {
-    console.error("Failed to apply limited backoffice permission template", error);
-    await Swal.fire({
-      icon: "error",
-      title: t("roles.templates.error_title"),
-      text: t("roles.templates.error_text", { role: role.name, template: label }),
-    });
-  } finally {
-    applyingTemplateKey.value = "";
-    await loadList();
-  }
-};
-
-onMounted(loadLimitedBackofficeTemplates);
-
 </script>
 
 <template>
@@ -181,46 +66,6 @@ onMounted(loadLimitedBackofficeTemplates);
                     icon="fas fa-clone"
                     :click-action="() => SessionUser.objects.roles.functions.cloneObject(object.id).then(() => loadList())"
                 ></ActionSettingsWheelItem>
-
-                <div
-                  v-if="canApplyLimitedBackofficeTemplates"
-                  class="role-limited-backoffice-template-actions"
-                  :data-testid="`role-limited-backoffice-template-actions-${object.id}`"
-                >
-                  <ActionSettingsWheelItemLabel
-                      :label="$t('roles.templates.section')"
-                      icon="fas fa-id-badge"
-                  ></ActionSettingsWheelItemLabel>
-                  <ActionSettingsWheelItem
-                      v-if="templatesLoading"
-                      :label="$t('roles.templates.loading')"
-                      icon="fas fa-spinner"
-                      disabled
-                  ></ActionSettingsWheelItem>
-                  <ActionSettingsWheelItem
-                      v-else-if="templatesLoadError"
-                      :label="$t('roles.templates.load_error')"
-                      icon="fas fa-sync-alt"
-                      :click-action="loadLimitedBackofficeTemplates"
-                  ></ActionSettingsWheelItem>
-                  <ActionSettingsWheelItem
-                      v-else-if="limitedBackofficeTemplates.length === 0"
-                      :label="$t('roles.templates.unavailable')"
-                      icon="fas fa-ban"
-                      disabled
-                  ></ActionSettingsWheelItem>
-                  <template v-else>
-                    <ActionSettingsWheelItem
-                        v-for="template in limitedBackofficeTemplates"
-                        :key="template.key"
-                        :label="$t('roles.templates.apply', { template: templateLabel(template) })"
-                        :icon="isApplyingTemplate(object, template) ? 'fas fa-spinner' : 'fas fa-id-badge'"
-                        :disabled="isTemplateActionDisabled(object, template)"
-                        :test-id="`role-template-${object.id}-${template.key}`"
-                        :click-action="() => applyLimitedBackofficeTemplate(object, template)"
-                    ></ActionSettingsWheelItem>
-                  </template>
-                </div>
               </template>
             </ActionSettingsWheelButton>
           </div>
@@ -240,4 +85,4 @@ onMounted(loadLimitedBackofficeTemplates);
 
 <style scoped>
 
-</style>
+</style>

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

@@ -2,14 +2,6 @@
 import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
 import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
 import { showEditUserForm } from "@/components/forms/superUser/editUserForm.vue";
-import {
-  getLimitedBackofficeDepartments,
-  getLimitedBackofficeRoles,
-  limitedBackofficeErrorMessage,
-  migrateLimitedBackofficeEmployee,
-  unwrapLimitedBackofficeResponse,
-} from "@/services/limitedBackoffice.js";
-import Swal from "sweetalert2";
 
 defineProps({
   objects: {
@@ -18,165 +10,53 @@ defineProps({
   },
 });
 
-const emit = defineEmits(["migrated"]);
-
 const editUser = (user) => {
   showEditUserForm(user.id, user.customer_number, user.display_name, user.group_id, {
     limitedBackofficeManaged: Boolean(user.limited_backoffice_managed),
   });
 };
-
-const escapeHtml = (value) =>
-  String(value ?? "")
-    .replaceAll("&", "&")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;")
-    .replaceAll("'", "&#039;");
-
-const canMigrateToLimitedBackoffice = (user) =>
-  Number(user?.customer_number) === 0 && !Boolean(user?.limited_backoffice_managed);
-
-const migrateUser = async (user) => {
-  try {
-    const [departmentsResponse, rolesResponse] = await Promise.all([
-      getLimitedBackofficeDepartments(),
-      getLimitedBackofficeRoles(),
-    ]);
-    const departments = unwrapLimitedBackofficeResponse(departmentsResponse) || [];
-    const roles = unwrapLimitedBackofficeResponse(rolesResponse) || [];
-
-    if (!Array.isArray(departments) || departments.length === 0 || !Array.isArray(roles) || roles.length === 0) {
-      throw new Error("Limited backoffice roles or departments are unavailable.");
-    }
-
-    const roleOptions = roles
-      .filter((role) => role?.key && role?.key !== "superuser")
-      .map((role) => {
-        const selected = role.key === "cashier" ? " selected" : "";
-        return `<option value="${escapeHtml(role.key)}"${selected}>${escapeHtml(role.label || role.key)}</option>`;
-      })
-      .join("");
-    const departmentOptions = departments
-      .map(
-        (department) => `
-          <label class="checkbox is-block has-text-left mb-2">
-            <input type="checkbox" class="limited-migration-department" value="${escapeHtml(department.id)}" />
-            ${escapeHtml(department.name || `Department ${department.id}`)}
-          </label>
-        `
-      )
-      .join("");
-
-    const result = await Swal.fire({
-      title: "Migrate employee",
-      html: `
-        <div class="field has-text-left">
-          <label class="label">Employee</label>
-          <p>${escapeHtml(user.display_name || `#${user.id}`)}</p>
-        </div>
-        <div class="field has-text-left">
-          <label class="label" for="limited-migration-role">Role</label>
-          <div class="control">
-            <div class="select is-fullwidth">
-              <select id="limited-migration-role">${roleOptions}</select>
-            </div>
-          </div>
-        </div>
-        <div class="field has-text-left">
-          <label class="label">Departments</label>
-          <div class="control">${departmentOptions}</div>
-        </div>
-      `,
-      showCancelButton: true,
-      confirmButtonText: "Migrate",
-      preConfirm: async () => {
-        const role = document.getElementById("limited-migration-role")?.value;
-        const departmentIds = Array.from(document.querySelectorAll(".limited-migration-department:checked")).map(
-          (checkbox) => Number(checkbox.value)
-        );
-
-        if (!role || departmentIds.length === 0) {
-          Swal.showValidationMessage("Select a role and at least one department.");
-          return false;
-        }
-
-        try {
-          await migrateLimitedBackofficeEmployee(user.id, {
-            role_key: role,
-            department_ids: departmentIds,
-          });
-          return true;
-        } catch (error) {
-          Swal.showValidationMessage(limitedBackofficeErrorMessage(error, "Could not migrate employee."));
-          return false;
-        }
-      },
-    });
-
-    if (result.isConfirmed) {
-      await Swal.fire("Employee migrated");
-      emit("migrated");
-    }
-  } catch (error) {
-    await Swal.fire("Error", limitedBackofficeErrorMessage(error, "Could not migrate employee."), "error");
-  }
-};
 </script>
 
 <template>
-  <div class="table-container">
+  <table class="table is-fullwidth" data-testid="superuser-users-table">
-    <table class="table is-fullwidth is-striped is-hoverable" data-testid="superuser-users-table">
+    <thead>
-      <thead>
+      <tr>
-        <tr>
+        <th>{{ $t("objects.columns.id") }}</th>
-          <th>{{ $t("objects.columns.id") }}</th>
+        <th>{{ $t("tables.users.name") }}</th>
-          <th>{{ $t("tables.users.name") }}</th>
+        <th>{{ $t("tables.users.role") }}</th>
-          <th>{{ $t("tables.users.role") }}</th>
+        <th class="has-text-right">{{ $t("tables.actions") }}</th>
-          <th class="has-text-right">{{ $t("tables.actions") }}</th>
+      </tr>
-        </tr>
+    </thead>
-      </thead>
+    <tbody>
-      <tbody>
+      <tr v-for="user in objects" :key="user.id" :data-testid="`superuser-users-row-${user.id}`">
-        <tr v-for="user in objects" :key="user.id" :data-testid="`superuser-users-row-${user.id}`">
+        <td>{{ user.id }}</td>
-          <td>{{ user.id }}</td>
+        <td>{{ user.display_name }}</td>
-          <td>{{ user.display_name }}</td>
+        <td>{{ user.group_id }}</td>
-          <td>{{ user.group_id }}</td>
+        <td>
-          <td class="has-text-right users-table__actions-cell">
+          <div class="buttons is-float-right">
-            <div class="buttons is-justify-content-flex-end">
+            <!-- Settings wheel -->
-              <!-- Settings wheel -->
+            <ActionSettingsWheelButton
-              <ActionSettingsWheelButton
+              :customer_number="user.customer_number"
-                :customer_number="user.customer_number"
+              :user_id="user.id"
-                :user_id="user.id"
+              :data-testid="`superuser-user-actions-${user.id}`"
-                :data-testid="`superuser-user-actions-${user.id}`"
+            >
-              >
+              <template #actions>
-                <template #actions>
+                <ActionSettingsWheelItem
-                  <ActionSettingsWheelItem
+                  :click-action="() => editUser(user)"
-                    :click-action="() => editUser(user)"
+                  icon="fas fa-user-edit"
-                    icon="fas fa-user-edit"
+                  :label="$t('global.edit')"
-                    :label="$t('global.edit')"
+                  :test-id="`superuser-user-edit-${user.id}`"
-                    :test-id="`superuser-user-edit-${user.id}`"
+                />
-                  />
+              </template>
-                  <ActionSettingsWheelItem
+            </ActionSettingsWheelButton>
-                    v-if="canMigrateToLimitedBackoffice(user)"
+          </div>
-                    :click-action="() => migrateUser(user)"
+        </td>
-                    icon="fas fa-random"
+      </tr>
-                    :label="$t('superuser.pages.employees.migrate_to_limited_backoffice')"
+      <tr v-if="objects.length === 0">
-                    :test-id="`superuser-user-migrate-limited-${user.id}`"
+        <td colspan="4">{{ $t("global.no_data") }}</td>
-                  />
+      </tr>
-                </template>
+    </tbody>
-              </ActionSettingsWheelButton>
+  </table>
-            </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 scoped></style>
-.users-table__actions-cell {
-  white-space: nowrap;
-}
-</style>

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

@@ -1,145 +1,42 @@
 <script setup>
 import { addVehicleUser } from "@/components/session/user/UserVehicleRequest.vue";
 import { clearErrors } from "@/components/request/HandleGlobalError.vue";
-import { computed, onMounted, ref } from "vue";
+import { 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 reference = ref("");
+const notes = 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 class="user-add-vehicle-form" @submit.prevent="submitVehicle">
+  <form @submit.prevent="clearErrors(); addVehicleUser(reg, type, notes)">
     <div class="field">
-      <label class="label" for="user-add-vehicle-registration">{{ t('user_vehicles.license_plate_label') }}</label>
+      <label class="label">{{ t('user_vehicles.license_plate_label') }}</label>
       <div class="control">
-        <input
+        <input class="input" type="text" placeholder="Reg" v-model="reg">
-          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" for="user-add-vehicle-type">{{ t('user_vehicles.type_label') }}</label>
+      <label class="label">{{ 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
+        <input class="input" type="text" placeholder="Type" v-model="type">
-          id="user-add-vehicle-reference"
+      </div>
-          v-model="reference"
+    </div>
-          class="input"
+    <div class="field">
-          type="text"
+      <label class="label">{{ t('user_vehicles.notes_label') }}</label>
-          autocomplete="off"
+      <div class="control">
-          :placeholder="t('vehicles.add_modal.reference_placeholder')"
+        <input class="input" type="text" placeholder="Notes" v-model="notes">
-          :disabled="isSubmitting"
-          data-testid="user-add-vehicle-reference"
-        >
       </div>
     </div>
-
     <ShowErrorField error="addVehicleUser" />
-
     <div class="field">
       <div class="control">
-        <button
+        <button class="button is-dark">{{ t('user_vehicles.add_vehicle') }}</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>
@@ -147,4 +44,4 @@ onMounted(loadVehicleTypes);
 
 <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: null,
+    default: true,
   },
   compact: {
     type: Boolean,
@@ -34,16 +34,6 @@ const props = defineProps({
     required: false,
     default: null,
   },
-  userScopedUserId: {
-    type: [Number, String],
-    required: false,
-    default: null,
-  },
-  superuserPage: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
 });
 
 const reload = () => {
@@ -59,15 +49,10 @@ 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 redirectVehiclePage = (vehicle) => {
+const redirectUserVehiclePage = (vehicleId) => {
-  if (props.superuserPage) {
+  // Send the user to the vehicle page
-    window.location.href = `/superuser/vehicles/${encodeURIComponent(vehicle.reg)}`;
+  window.location.href = `/user/vehicles/${vehicleId}`;
-    return;
-  }
-
-  window.location.href = `/user/vehicles/${encodeURIComponent(vehicle.id)}`;
 };
 
 // Get the departments (If the departments are not already loaded)
@@ -75,6 +60,14 @@ 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) {
@@ -86,9 +79,11 @@ 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;
 };
 
@@ -127,28 +122,6 @@ 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>
@@ -177,7 +150,7 @@ const deleteVehicle = (id) => {
             <EditableTableColumn
               :object="object"
               :loadList="reload"
-              :editFunction="editVehicleField"
+              :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
               :permission-check-function="canEditVehicle"
               column="reg"
             />
@@ -185,7 +158,7 @@ const deleteVehicle = (id) => {
             <EditableTableColumn
               :object="object"
               :loadList="reload"
-              :editFunction="editVehicleField"
+              :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
               :permission-check-function="canEditVehicle"
               column="type"
               :parse-function="
@@ -198,7 +171,7 @@ const deleteVehicle = (id) => {
             <EditableTableColumn
               :object="object"
               :loadList="reload"
-              :editFunction="editVehicleField"
+              :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
               :permission-check-function="canEditVehicle"
               column="wash_subscription"
               :parse-function="
@@ -252,7 +225,7 @@ const deleteVehicle = (id) => {
               v-if="!props.compact"
               :object="object"
               :loadList="reload"
-              :editFunction="editVehicleField"
+              :editFunction="SessionUser.objects.vehicles.showEditObjectFieldForm"
               :permission-check-function="canEditVehicle"
               column="reference"
             />
@@ -271,7 +244,7 @@ const deleteVehicle = (id) => {
                     v-if="canViewVehicle()"
                     :label="$t('global.manage') + ' ' + $t('objects.vehicles.single')"
                     icon="fas fa-eye"
-                    :click-action="() => redirectVehiclePage(object)"
+                    :click-action="() => redirectUserVehiclePage(object.id)"
                   />
                   <!-- Delete -->
                   <ActionSettingsWheelItem
@@ -279,7 +252,9 @@ const deleteVehicle = (id) => {
                     :label="$t('global.delete') + ' ' + $t('objects.vehicles.single')"
                     icon="fas fa-trash"
                     :template="'danger'"
-                    :click-action="() => deleteVehicle(object.id)"
+                    :click-action="
+                      () => SessionUser.objects.vehicles.functions.showDeleteObjectForm(object.id, () => reload())
+                    "
                   />
                 </template>
               </ActionSettingsWheelButton>

src/components/forms/BuefyDateField.vue

@@ -1,156 +0,0 @@
-<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

@@ -1,153 +0,0 @@
-<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,17 +1,14 @@
 <script setup>
 import { onMounted, ref, watch, nextTick, computed } from 'vue';
 import {
-  clearPendingOrderItems,
   getOrderId,
   getProductsCategory,
-  getAddonRestriction,
-  getProductRestriction,
   loadOrderItems,
   productCategoryAllowed,
   isProductRestricted,
   setProductsCategory,
   getUserProductPrice,
-  showPendingCreateOrderItem,
+  showFakeCreateOrderItem,
   department_id,
   user_discounts,
   getUserGlobalDiscount,
@@ -24,7 +21,6 @@ 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";
@@ -33,7 +29,6 @@ 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,
@@ -204,46 +199,6 @@ 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) {
@@ -261,90 +216,10 @@ 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',
@@ -371,9 +246,7 @@ const showAddMultipleProducts = (productId) => {
           Swal.showValidationMessage('Order ID is required');
           return false;
         }
-        return createOrderItem(orderId, productId, inputValue)
+        return createOrderItem(orderId, productId, inputValue).then(async () => await addAddonsToOrderMiddleware(productId, inputValue, null, orderId).then(() => loadOrderItems()));
-          .then(async () => await addAddonsToOrderMiddleware(productId, inputValue, null, orderId).then(() => loadOrderItems()))
-          .catch((error) => handleCreateOrderItemError(error, { validationMessage: true }).then(() => false));
       }
     },
     allowOutsideClick: () => !Swal.isLoading()
@@ -511,19 +384,15 @@ 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)
-  const { allowedSelections: product_addons, restrictedSelections } = getAllowedSelectedProductAddons(product_id, {
+  var product_addons = productAddons.value.filter((productAddon) => productAddon.product_id === product_id && productAddon.status === true);
-    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
-    showPendingCreateOrderItem(
+    showFakeCreateOrderItem(
-        getPendingProductFromAddon(product_id, product_addons[i].addon_id),
+        product_addons[i].addon_id,
         addon_quantity,
-        getAddonPrice(product_id, product_addons[i].addon_id),
+        0,
         related_item_id,
         product_addons[i].notes === undefined ? null : product_addons[i].notes
     );
@@ -537,7 +406,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));
+    );
   }
 };
 
@@ -559,23 +428,11 @@ const setProductAddonQuantity = (productId, addonId, quantity) => {
 
 const addProductWithAddonsToOrder = async (product_id) => {
   // Check if the emit only is set
-  const product = findProductById(product_id);
+  const product = products.value.find((product) => product.id === 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: (Array.isArray(product.addons) ? product.addons : [])
+    addons: product.addons.map((addon) => {
-      .filter((addon) => !getAddonRestriction(addon, { isRelatedAddon: true }).restricted)
-      .map((addon) => {
       return {
         ...addon,
         product: {
@@ -622,17 +479,15 @@ const addProductWithAddonsToOrder = async (product_id) => {
           return false;
         }
         // Show the fake create order item
-        showPendingCreateOrderItem(product, 1, getUserProductPrice(product), 0, normalizedNote);
+        showFakeCreateOrderItem(product_id, 1, 0, 0, normalizedNote);
         // Create the order item
-        return createOrderItem(confirmedOrderId, product_id, 1, 0, normalizedNote)
+        return createOrderItem(confirmedOrderId, product_id, 1, 0, normalizedNote).then(async (result) => {
-          .then(async (result) => {
+          let order_item_id = result.data.data.id;
-            let order_item_id = result.data.data.id;
+          // Add the addons to the order
-            // Add the addons to the order
+          await addAddonsToOrderMiddleware(product_id, 1, order_item_id, confirmedOrderId).then(() => {
-            await addAddonsToOrderMiddleware(product_id, 1, order_item_id, confirmedOrderId).then(() => {
+            loadOrderItems();
-              loadOrderItems();
+          });
-            });
+        });
-          })
-          .catch((error) => handleCreateOrderItemError(error, { validationMessage: true }).then(() => false));
       },
       allowOutsideClick: () => !Swal.isLoading()
     });
@@ -641,7 +496,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
-  showPendingCreateOrderItem(product, quantity, getUserProductPrice(product));
+  showFakeCreateOrderItem(product_id, quantity, 0);
   // IF only emitting the product, then we don't need to add the addons to the order
   if (props.emitActionsOnly) {
     emits('onAddProduct', {
@@ -652,15 +507,13 @@ const addProductWithAddonsToOrder = async (product_id) => {
     return;
   }
   // Create the order item
-  await createOrderItem(orderId, product_id, quantity)
+  await createOrderItem(orderId, product_id, quantity).then(async (result) => {
-    .then(async (result) => {
+    let order_item_id = result.data.data.id;
-      let order_item_id = result.data.data.id;
+    // Add the addons to the order
-      // Add the addons to the order
+    await addAddonsToOrderMiddleware(product_id, quantity, order_item_id, orderId).then(() => {
-      await addAddonsToOrderMiddleware(product_id, quantity, order_item_id, orderId).then(() => {
+      loadOrderItems();
-        loadOrderItems();
+    });
-      });
+  });
-    })
-    .catch((error) => handleCreateOrderItemError(error));
 };
 
 const recommended_product_ids = ref([]);
@@ -703,16 +556,11 @@ 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 }));
 
-    showPendingCreateOrderItem({ ...previousOrderProduct, price: basePrice }, quantity, discountedPrice);
+    showFakeCreateOrderItem(productId, quantity, discountedPrice);
-    await createOrderItem(orderId, productId, quantity).catch((error) => handleCreateOrderItemError(error));
+    await createOrderItem(orderId, productId, quantity);
     await addAddonsToOrderMiddleware(productId, quantity, null, orderId);
   }
 
@@ -756,18 +604,13 @@ 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;
   }
 
-  showPendingCreateOrderItem(product, 1, getRecommendedProductPrice(productId));
+  showFakeCreateOrderItem(product, 1, getRecommendedProductPrice(productId));
-  await createOrderItem(orderId, productId, 1).catch((error) => handleCreateOrderItemError(error));
+  await createOrderItem(orderId, productId, 1);
   await addAddonsToOrderMiddleware(productId, 1, null, orderId);
   await loadOrderItems();
 };

src/components/forms/superUser/editUserForm.vue

@@ -1,64 +1,37 @@
 <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 isRoleLocked = Boolean(options.limitedBackofficeManaged);
+  const lockedRoleFields = options.limitedBackofficeManaged ? 'disabled' : '';
-  const lockedRoleFields = isRoleLocked ? "disabled" : "";
 
-  const roles = await SessionUser.objects.roles.get.all().catch(() => []);
+  await Swal.fire({
-
+    title: 'Edit User',
-  const result = await Swal.fire({
-    title: t("user_admin.edit_user"),
     html: `
       <form id="editNumberPlateScannerForm">
-        <div class="field has-text-left">
+        <div class="field">
-          <label class="label" for="customer_number">${escapeHtml(t("user_admin.customer_number"))}</label>
+          <label class="label">Customer Number</label>
           <div class="control">
-            <input class="input" type="text" id="customer_number" value="${escapeHtml(customer_number)}" ${lockedRoleFields} />
+            <input class="input" type="text" id="customer_number" value="${customer_number}" ${lockedRoleFields} />
           </div>
         </div>
-        <div class="field has-text-left">
+        <div class="field">
-          <label class="label" for="display_name">${escapeHtml(t("common.name"))}</label>
+          <label class="label">Display Name</label>
           <div class="control">
-            <input class="input" type="text" id="display_name" value="${escapeHtml(display_name)}" />
+            <input class="input" type="text" id="display_name" value="${display_name}" />
           </div>
         </div>
-        <div class="field has-text-left">
+        <div class="field">
-          <label class="label" for="role">${escapeHtml(t("user_admin.group_id"))}</label>
+          <label class="label">Role</label>
           <div class="control">
-            <div class="select is-fullwidth ${roles.length === 0 ? "is-loading" : ""}">
+            <input class="input" type="text" id="role" value="${role}" ${lockedRoleFields} />
-              <select id="role" ${lockedRoleFields}>
-                ${buildRoleOptions(Array.isArray(roles) ? roles : [], role)}
-              </select>
-            </div>
           </div>
         </div>
-        <div class="field has-text-left">
+        <div class="field">
-          <label class="label" for="password">${escapeHtml(t("global.password"))}</label>
+          <label class="label">Password</label>
           <div class="control">
             <input class="input" type="password" id="password" />
           </div>
@@ -66,28 +39,17 @@ export const showEditUserForm = async (id, customer_number, display_name, role,
       </form>
     `,
     showCancelButton: true,
-    confirmButtonText: t("user_admin.edit_user"),
+    confirmButtonText: 'Edit User',
-    preConfirm: async () => {
+    preConfirm: () => {
-      try {
+      editUser(id, document.getElementById('customer_number').value, document.getElementById('display_name').value, document.getElementById('role').value, document.getElementById('password').value)
-        await editUser(
+          .then(() => {
-          id,
+            Swal.fire('User edited successfully');
-          document.getElementById("customer_number").value,
+          })
-          document.getElementById("display_name").value,
+          .catch((e) => {
-          document.getElementById("role").value,
+            Swal.fire('Error', e.response.data.error ?? e.response, 'error');
-          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,14 +2,11 @@
 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,
@@ -57,22 +54,10 @@ 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 || []);
@@ -562,87 +547,12 @@ 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";
 
@@ -772,18 +682,6 @@ 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">
@@ -1383,7 +1281,7 @@ onBeforeUnmount(() => {
 
 .request-queue-progress__error-summary {
   display: grid;
-  grid-template-columns: 110px minmax(0, 1fr) auto auto;
+  grid-template-columns: 110px 1fr auto;
   gap: 8px;
   align-items: center;
   font-size: 12px;
@@ -1394,36 +1292,6 @@ 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

@@ -0,0 +1,52 @@
+<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,10 +3,8 @@ 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;
@@ -147,11 +145,6 @@ 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
@@ -235,7 +228,7 @@ const menu_items = ref([
     hidden: SessionUser.functions.getDepartmentIdFromUrl() === undefined,
   },
   {
-    name: getBookingsLabel(),
+    name: "Bookinger",
     route: "/admin/" + SessionUser.functions.getDepartmentIdFromUrl() + "/modules/bookings",
     icon: "fas fa-exchange-alt",
     children: [],
@@ -257,7 +250,7 @@ const menu_items = ref([
         permissions: ["department_timebookings_create"],
       },
       {
-        name: getBookingsLabel(),
+        name: "Bookinger",
         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 = filter.value ? [...new Set(filter.value.split(','))].join(',') : null;
+    filter.value = [...new Set(filter.value.split(','))].join(',');
     // If the filter is empty, set it to null
     if (filter.value === '') {
       filter.value = null;

src/components/session/authenticatedRequest.vue

@@ -218,7 +218,6 @@ 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,150 +1,291 @@
 <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,
-          };
 
-    return ObjectsGlobal.add.object(Branding.meta.endpoint, payload).then((response) => response.data.data);
+    /**
-  },
+     * The Branding object
-  set: {
+     */
-    all: async (id, branding) => {
+    export const Branding = {
-      ObjectsGlobal.clearCache();
+      meta: {
-      return authenticatedRequest(Branding.meta.endpoint, "PUT", {
+        title: "Branding",
-        id: parseInt(id, 10),
+        icon: "fas fa-list",
-        ...branding,
+        description: "Oversigt over branding",
-      }).then((response) => {
+        endpoint: "/branding",
-        ObjectsGlobal.clearCache();
+        labels: {
-        return response.data.data;
+          single: "branding",
-      });
+          multiple: "brands",
-    },
+        }
-    name: async (id, name) => ObjectsGlobal.set.column(Branding.meta.endpoint, id, "name", name),
+      },
-    description: async (id, description) =>
+      columns: {
-      ObjectsGlobal.set.column(Branding.meta.endpoint, id, "description", description),
+        id: {
-    cvr: async (id, cvr) => ObjectsGlobal.set.column(Branding.meta.endpoint, id, "cvr", parseInt(cvr, 10)),
+          label: "ID",
-    address: async (id, address) => ObjectsGlobal.set.column(Branding.meta.endpoint, id, "address", address),
+          type: "number",
-    phone_country_code: async (id, phone_country_code) =>
+          sortable: true,
-      ObjectsGlobal.set.column(Branding.meta.endpoint, id, "phone_country_code", parseInt(phone_country_code, 10)),
+          creation: {
-    phone: async (id, phone) => ObjectsGlobal.set.column(Branding.meta.endpoint, id, "phone", parseInt(phone, 10)),
+            required: false
-    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),
+        name: {
-    logo: async (id, logo) => ObjectsGlobal.set.column(Branding.meta.endpoint, id, "logo", logo),
+          label: "Navn",
-    favicon: async (id, favicon) => ObjectsGlobal.set.column(Branding.meta.endpoint, id, "favicon", favicon),
+          type: "string",
-    signature: async (id, signature) => ObjectsGlobal.set.column(Branding.meta.endpoint, id, "signature", signature),
+          sortable: true,
-  },
+          creation: {
-  get: {
+            required: true
-    all: async () => ObjectsGlobal.get.objects(Branding.meta.endpoint),
+          },
-    single: async (id) => ObjectsGlobal.get.object(Branding.meta.endpoint, parseInt(id, 10)),
+        },
-  },
+        description: {
-  delete: async (id) => ObjectsGlobal.delete.object(Branding.meta.endpoint, parseInt(id, 10)),
+          label: "Beskrivelse",
-  functions: {},
+          type: "string",
-  showCreateObjectForm: (onAfterSubmit = null) => ObjectsGlobal.showCreateObjectForm(Branding, onAfterSubmit),
+          sortable: true,
-  showEditObjectFieldForm: (id, column, value, onAfterSubmit = null) =>
+          creation: {
-    ObjectsGlobal.showEditObjectFieldForm(Branding, id, column, value, onAfterSubmit),
+            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
+        );
+      }
+    };
 </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 {createApp, h, ref, watch} from "vue";
+import {ref} 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,63 +177,16 @@ 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 type="hidden" id="${inputId}" value="${normalizeClosedAtForDateInput(value)}">
+        <input class="input has-background-light has-text-black" type="date" 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>
@@ -243,23 +196,14 @@ 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);
-      if (clearButton) {
+      const inputElement = document.getElementById(inputId);
+      if (clearButton && inputElement) {
         clearButton.addEventListener('click', () => {
-          dateField?.setValue('');
+          inputElement.value = '';
         });
       }
     },
-    willClose: () => {
-      dateField?.cleanup();
-      dateField = null;
-    },
     preConfirm: () => {
       const inputElement = document.getElementById(inputId);
       if (!inputElement) {
@@ -516,43 +460,6 @@ 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,9 +1,7 @@
 <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,
@@ -25,8 +23,6 @@ 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;";
@@ -71,41 +67,6 @@ 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);
@@ -175,14 +136,15 @@ const buildEditComplaintForm = (complaint, departments) => {
       ></p>
     </div>
     <div class="field">
-      <label class="label has-text-black" for="${EDIT_COMPLAINT_WASH_DATE_INPUT_ID}">Dato for vask</label>
+      <label class="label has-text-black" for="superuser-complaint-wash-date">Dato for vask</label>
       <div class="control">
         <input
-          id="${EDIT_COMPLAINT_WASH_DATE_INPUT_ID}"
+          id="superuser-complaint-wash-date"
-          type="hidden"
+          data-testid="superuser-complaint-edit-wash-date"
+          class="input has-background-light has-text-black"
+          type="date"
           value="${escapeHtml(washDate)}"
         >
-        <div id="${EDIT_COMPLAINT_WASH_DATE_PICKER_ID}" data-testid="superuser-complaint-edit-wash-date"></div>
       </div>
     </div>
     <div class="field">
@@ -535,7 +497,6 @@ export const DepartmentDailyReportComplaints = {
       );
       const customerLookupState = createComplaintCustomerLookupState(complaint);
       let cleanupCustomerLookup = null;
-      let cleanupDateField = null;
 
       return Swal.fire({
         title: t("superuser.pages.complaints.edit_title"),
@@ -546,22 +507,12 @@ 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 {
@@ -574,7 +525,7 @@ export const DepartmentDailyReportComplaints = {
             }
 
             const washDate = (
-              document.getElementById(EDIT_COMPLAINT_WASH_DATE_INPUT_ID)?.value || ""
+              document.getElementById("superuser-complaint-wash-date")?.value || ""
             ).trim();
             if (washDate === "") {
               throw new Error("Dato for vask er påkrævet.");

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

@@ -3,13 +3,6 @@ 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
  */
@@ -216,23 +209,21 @@ export const DepartmentTimeBookingsEntries = {
     getPublicEntries: async (departmentId, dateFrom = null, dateTo = null) => {
       /**
        * Example usage:
-       * 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
+       * 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
        * 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 [];
       }
-      dateFrom = normalizeDateFilterValue(dateFrom);
+      if (dateFrom && !/^\d{4}-\d{2}-\d{2}$/.test(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 && !DATE_ONLY_PATTERN.test(dateTo)) {
+      if (dateTo && !/^\d{4}-\d{2}-\d{2}$/.test(dateTo)) {
         console.warn('Invalid dateTo format:', dateTo, 'Expected format: YYYY-MM-DD');
         dateTo = null;
       }
@@ -252,8 +243,7 @@ export const DepartmentTimeBookingsEntries = {
           'GET',
           {
             id: departmentId,
-            filters: `start-date_from:${dateFrom || ''},start-date_to:${dateTo || ''}`,
+            filters: `created_at-date_from:${dateFrom || ''},created_at-date_to:${dateTo || ''}`,
-            order: "start:asc",
           },
       ).then(response => {
         return response.data.data;

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

@@ -4,27 +4,24 @@ 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: t("objects.department_variables.title"),
+    title: "Afdelingsvariabler",
     icon: "fas fa-list",
-    description: t("objects.department_variables.description"),
+    description: "Oversigt over afdelingsvariabler",
     endpoint: "/superuser/department/variables",
     labels: {
-      single: t("objects.department_variables.single"),
+      single: "variabel",
-      multiple: t("objects.department_variables.multiple"),
+      multiple: "variabler"
     }
   },
   columns: {
     id: {
-      label: t("objects.columns.id"),
+      label: "ID",
       type: "number",
       sortable: true,
       creation: {
@@ -32,7 +29,7 @@ export const DepartmentVariables = {
       }
     },
     department_id: {
-      label: t("objects.columns.department_id"),
+      label: "Afdeling",
       type: "select",
       sortable: true,
       creation: {
@@ -43,7 +40,7 @@ export const DepartmentVariables = {
       }
     },
     variable: {
-      label: t("objects.columns.key"),
+      label: "Variabel",
       type: "string",
       sortable: true,
       creation: {
@@ -51,7 +48,7 @@ export const DepartmentVariables = {
       }
     },
     value: {
-      label: t("objects.columns.value"),
+      label: "Værdi",
       type: "string",
       sortable: true,
       creation: {
@@ -113,4 +110,4 @@ export const DepartmentVariables = {
     );
   }
 };
-</script>
+</script>

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

@@ -241,7 +241,6 @@ 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'); },
@@ -301,7 +300,6 @@ 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'); },
@@ -309,7 +307,6 @@ 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,13 +2,6 @@
 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) {
@@ -34,22 +27,13 @@ const normalizeCompletionSafetySeal = (safetySeal) => {
  */
 export const OrderBookings = {
   meta: {
-    get title() {
+    title: "Bookinger",
-      return tf("nav.bookings", "Bookings");
-    },
     icon: "fas fa-list",
-    get description() {
+    description: "Oversigt over order bookinger",
-      const multipleLabel = tf("nav.bookings", "Bookings");
-      return `Oversigt over ${String(multipleLabel).toLowerCase()}`;
-    },
     endpoint: "/order-bookings",
     labels: {
-      get single() {
+      single: "booking",
-        return tf("objects.order_bookings.single", "Booking");
+      multiple: "bookinger",
-      },
-      get multiple() {
-        return tf("nav.bookings", "Bookings");
-      },
       fields: {
         names: {
           customer_number: {

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

@@ -1,4 +1,5 @@
 <script>
+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";
@@ -122,10 +123,6 @@ export const Roles = {
         id: id
       });
     },
-    getLimitedBackofficePermissionTemplates: async () => {
-      const response = await authenticatedRequest("/roles/limited-backoffice-permission-templates", "GET");
-      return response?.data?.data ?? response?.data ?? [];
-    },
     permissions: {
       add: async (roleId, permissionId) => {
         return authenticatedRequest("/roles/permissions", "POST", {
@@ -164,4 +161,4 @@ export const Roles = {
     );
   }
 };
-</script>
+</script>

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

@@ -3,7 +3,6 @@ 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
@@ -123,31 +122,18 @@ export const SubuserGrants = {
     getPermissionNodes: async () => {
       return ObjectsGlobal.get.objects("/subusers/permission-nodes");
     },
-    getPermissionTemplates: async () => {
+    showPermissionEditForm: async (grant, refreshCallback) => {
-      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 || [];
             }
           });
         }
@@ -164,27 +150,10 @@ export const SubuserGrants = {
         cancelButtonText: "Annuller",
         preConfirm: async () => {
           try {
-            const accessPayload = accessRef.value?.permission_template_key
+            await SubuserGrants.set.permissions(grant.id, permissionsRef.value);
-              && 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];
-            grant.permission_template_key = accessRef.value?.permission_template_key || "custom";
+            return permissionsRef.value;
-            return accessPayload;
+          } catch (error) {
-          } catch (_error) {
             Swal.showValidationMessage("Kunne ikke gemme tilladelserne.");
             return false;
           }

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

@@ -1,9 +1,6 @@
 <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;")
@@ -12,15 +9,6 @@ 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 ? `
@@ -58,17 +46,6 @@ 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>
 `;
 
@@ -77,7 +54,6 @@ 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.");
@@ -104,7 +80,6 @@ const readInviteFormValues = (options = {}) => {
     name,
     phone_country_code: Number.parseInt(phoneCountryCodeRaw, 10),
     phone: Number.parseInt(phoneRaw, 10),
-    permission_template_key: permissionTemplateKey,
   };
 };
 
@@ -131,10 +106,10 @@ const showInviteFeedback = async (response) => {
   });
 };
 
-const submitInviteForm = async ({ title, confirmButtonText, defaults = {}, endpoint, method, payloadBuilder, includeCustomerNumber = false, permissionTemplates = [] }) => {
+const submitInviteForm = async ({ title, confirmButtonText, defaults = {}, endpoint, method, payloadBuilder, includeCustomerNumber = false }) => {
   const result = await Swal.fire({
     title,
-    html: buildInviteFormHtml(defaults, { includeCustomerNumber, permissionTemplates }),
+    html: buildInviteFormHtml(defaults, { includeCustomerNumber }),
     width: 640,
     focusConfirm: false,
     showCancelButton: true,
@@ -170,51 +145,27 @@ export const Subusers = {
     endpoint: "/subusers",
   },
   functions: {
-    permissionSummary(permissions = [], templateKey = null, permissionGroups = []) {
+    permissionSummary(permissions = []) {
-      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 t("superuser.driver_access.summary.no_permissions");
+        return "Ingen tilladelser";
       }
 
       const normalized = permissions.filter(Boolean);
-      return customSummary(t("superuser.driver_access.summary.permission_count", { count: normalized.length }));
+      if (normalized.length <= 3) {
+        return normalized.join(", ");
+      }
+
+      return `${normalized.slice(0, 3).join(", ")} +${normalized.length - 3}`;
     },
     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: userId
+        endpoint: superuser ? "/superuser/subusers/invite" : "/subusers/invite",
-          ? `/superuser/users/${encodeURIComponent(userId)}/subusers/invite`
-          : superuser
-            ? "/superuser/subusers/invite"
-            : "/subusers/invite",
         method: "POST",
         payloadBuilder: (values) => values,
-        includeCustomerNumber: superuser && !userId,
+        includeCustomerNumber: superuser,
-        permissionTemplates,
       });
 
       if (!response) {
@@ -230,21 +181,11 @@ 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(
-          endpoint,
+          superuser ? "/superuser/subusers/invite/resend" : "/subusers/invite/resend",
           "POST",
-          userId
+          { id: subuser.id, ...(subuser.grant_id ? { grant_id: subuser.grant_id } : {}) }
-            ? {}
-            : {
-                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,27 +196,6 @@ 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(
@@ -225,17 +204,8 @@ 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,
@@ -244,52 +214,6 @@ 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,6 +2,7 @@
 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([]);
@@ -20,24 +21,21 @@ export const getUsersVehicles = async () => {
       );
 }
 
-export const addVehicleUser = async (reg, type, reference = null) => {
+export const addVehicleUser = async (reg, type, notes) => {
   return await authenticatedRequest("/vehicles", "POST", {
     reg,
     type: parseInt(type),
     wash_subscription: false,
-    ...(reference ? { reference } : {}),
+    ...(notes ? { notes } : {}),
   })
       .then(
           (response) => {
-            const vehicle = response.data.data;
+            vehicles.value.push(response.data.data);
-            vehicles.value.push(vehicle);
-            return vehicle;
           }
       )
       .catch(
           (error) => {
             parseError(error, 'addVehicleUser');
-            throw error;
           }
       );
 }