From 3e8a7ee3db8a283feecd08331d3163f5bc1f8043 Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Mon, 13 Apr 2026 14:28:12 +0200
Subject: [PATCH] Update POS styling and refactor Vue component for
 consistency:

- **CSS Enhancements:** Added `.pos-registration-control` class, improved styling for registration fields, and enhanced responsiveness for `.pos-order-items--order-detail`.
- **Vue Refactor:** Standardized imports, object keys, and quotes in `ActionSettingsWheelButton.vue` to align with consistent formatting and readability.
---
 src/assets/pos.css                            |   19 +
 .../buttons/ActionSettingsWheelButton.vue     |  858 +++++-----
 .../department/pos/orders/ordersTable.vue     | 1458 ++++++++++-------
 tests/e2e/admin-pos-orders.spec.ts            |   31 +-
 tests/e2e/support/network.js                  |   23 +-
 5 files changed, 1358 insertions(+), 1031 deletions(-)

diff --git a/src/assets/pos.css b/src/assets/pos.css
index 858a7e80..1d258a7a 100644
--- a/src/assets/pos.css
+++ b/src/assets/pos.css
@@ -368,6 +368,12 @@
   min-width: 0;
 }
 
+.pos-registration-control {
+  width: 100%;
+  min-width: 0;
+  margin-bottom: 0;
+}
+
 .pos-registration-field {
   display: flex;
   flex-direction: column;
@@ -542,9 +548,18 @@
 
 .pos-order-items--order-detail .pos-registration-slot {
   display: flex;
+  min-width: 0;
+}
+
+.pos-order-items--order-detail .pos-registration-control {
+  display: flex;
+  flex: 1 1 0;
+  width: 100%;
+  min-width: 0;
 }
 
 .pos-order-items--order-detail .pos-registration-field {
+  flex: 1 1 0;
   height: 100%;
   justify-content: space-between;
 }
@@ -558,6 +573,10 @@
   box-shadow: none;
 }
 
+.pos-order-items--order-detail .pos-registration-field--editing {
+  width: 100%;
+}
+
 .pos-order-items--order-detail .pos-registration-field:hover,
 .pos-order-items--order-detail .pos-registration-field:focus-visible {
   transform: none;
diff --git a/src/components/displays/buttons/ActionSettingsWheelButton.vue b/src/components/displays/buttons/ActionSettingsWheelButton.vue
index 280e6b33..19d66073 100644
--- a/src/components/displays/buttons/ActionSettingsWheelButton.vue
+++ b/src/components/displays/buttons/ActionSettingsWheelButton.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {defineProps, defineEmits, onMounted, onBeforeUnmount, computed, watch} from 'vue';
+import { defineProps, defineEmits, onMounted, onBeforeUnmount, computed, watch } from "vue";
 import { useSlots } from "vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
@@ -7,75 +7,75 @@ import Swal from "sweetalert2";
 import { ref } from "vue";
 import CustomerModal from "@/components/displays/modals/CustomerModal.vue";
 import ActionSettingsWheelItemLabel from "@/components/displays/buttons/ActionSettingsWheelItemLabel.vue";
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
-const emit = defineEmits(['deleted']);
+const emit = defineEmits(["deleted"]);
 const emitDeleted = () => {
-  emit('deleted');
+  emit("deleted");
 };
 const props = defineProps({
   icon: {
     type: String,
-    default: "fas fa-cog"
+    default: "fas fa-cog",
   },
   label: {
     type: String,
-    default: ""
+    default: "",
   },
   user_id: {
     type: Number,
-    default: null
+    default: null,
   },
   order_id: {
     type: Number,
-    default: null
+    default: null,
   },
   invoice_collection_id: {
     type: Number,
-    default: null
+    default: null,
   },
   reg_1: {
     type: String,
-    default: null
+    default: null,
   },
   reg_2: {
     type: String,
-    default: null
+    default: null,
   },
   order_booking_id: {
     type: Number,
-    default: null
+    default: null,
   },
   customer_number: {
     type: Number,
-    default: null
+    default: null,
   },
   refreshFunction: {
     type: Function,
     default: () => {
       console.warn("Refresh function is not defined");
-    }
+    },
   },
   department_id: {
     type: Number,
-    default: null
+    default: null,
   },
   attachments: {
     type: Array,
-    default: () => []
+    default: () => [],
   },
   displayActionsDirectly: {
     type: Boolean,
-    default: false
+    default: false,
   },
   department_lane_id: {
     type: Number,
-    default: null
+    default: null,
   },
   subuserGrant: {
     type: Object,
-    default: null
+    default: null,
   },
 });
 
@@ -108,7 +108,7 @@ const onDocumentClick = (event) => {
 };
 
 const onDocumentKeydown = (event) => {
-  if (event.key === 'Escape') {
+  if (event.key === "Escape") {
     closeDropdown();
   }
 };
@@ -154,59 +154,60 @@ watch(
 
 const showSetCustomerPassword = (userId) => {
   Swal.fire({
-    title: t('admin.pos.settings_wheel.change_password'),
-    html: `<input id="swal-input1" class="swal2-input" placeholder="${t('admin.pos.settings_wheel.enter_password')}">`,
+    title: t("admin.pos.settings_wheel.change_password"),
+    html: `<input id="swal-input1" class="swal2-input" placeholder="${t("admin.pos.settings_wheel.enter_password")}">`,
     focusConfirm: false,
     preConfirm: () => {
-      const password = document.getElementById('swal-input1').value;
-      if (password === '') {
-        Swal.showValidationMessage(t('admin.pos.settings_wheel.please_enter_password'));
+      const password = document.getElementById("swal-input1").value;
+      if (password === "") {
+        Swal.showValidationMessage(t("admin.pos.settings_wheel.please_enter_password"));
       }
       return password;
-    }
+    },
   }).then((result) => {
     if (result.isConfirmed) {
       const password = result.value;
       // Call the API to set the password
-      SessionUser.request(
-          '/superuser/user/password',
-          'POST',
-          {
-            user_id: userId,
-            password: password,
-          }
-      ).then(() => {
-        Swal.fire({
-          title: t('admin.pos.settings_wheel.password_changed'),
-          text: t('admin.pos.settings_wheel.password_changed_text'),
-          icon: 'success',
+      SessionUser.request("/superuser/user/password", "POST", {
+        user_id: userId,
+        password: password,
+      })
+        .then(() => {
+          Swal.fire({
+            title: t("admin.pos.settings_wheel.password_changed"),
+            text: t("admin.pos.settings_wheel.password_changed_text"),
+            icon: "success",
+          });
+        })
+        .catch((error) => {
+          Swal.fire({
+            title: t("admin.pos.settings_wheel.error"),
+            text: t("admin.pos.settings_wheel.error_changing_password"),
+            icon: "error",
+          });
         });
-      }).catch((error) => {
-        Swal.fire({
-          title: t('admin.pos.settings_wheel.error'),
-          text: t('admin.pos.settings_wheel.error_changing_password'),
-          icon: 'error',
-        });
-      });
     }
   });
-}
+};
 
 const redirectSuperUserInvoiceCollectionPage = (invoiceCollectionId) => {
   // Send the user to the invoice collection page (In a new tab)
-  window.open(`/superuser/invoices/${invoiceCollectionId}`, '_blank');
+  window.open(`/superuser/invoices/${invoiceCollectionId}`, "_blank");
 };
 
 const redirectDepartmentOrderPage = async (orderId, newTab = false) => {
   // Send the user to the order page (In a new tab)
   // Get the department id from the order
-  await SessionUser.objects.orders.functions.get_department_id(props.order_id).then((response) => {
-    console.warn(response);
-    // Get the department id from the response
-    SessionUser.functions.redirectTo.department(response, 'modules/pos/orders/' + orderId, !!newTab);
-  }).catch((error) => {
-    console.error(error);
-  });
+  await SessionUser.objects.orders.functions
+    .get_department_id(props.order_id)
+    .then((response) => {
+      console.warn(response);
+      // Get the department id from the response
+      SessionUser.functions.redirectTo.department(response, "modules/pos/orders/" + orderId, !!newTab);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
 };
 
 const hasUser = computed(() => Boolean(props.user_id || props.customer_number || userIdFromCustomerNumber.value));
@@ -214,64 +215,67 @@ const hasUser = computed(() => Boolean(props.user_id || props.customer_number ||
 const attachmentsFromOrder = ref([]);
 const attachmentsFromOrderError = ref(null);
 onMounted(() => {
-  document.addEventListener('click', onDocumentClick);
-  document.addEventListener('keydown', onDocumentKeydown);
+  document.addEventListener("click", onDocumentClick);
+  document.addEventListener("keydown", onDocumentKeydown);
 
   if (props.order_id) {
-    SessionUser.objects.orders.functions.fetchAttachments(props.order_id).then((response) => {
-      /**
-       * [
-       *     {
-       *         "id": 4396,
-       *         "object_type": "`orders`",
-       *         "object_id": 30242,
-       *         "content": {
-       *             "image": null,
-       *             "document": "pdf_6912ea1886f15.pdf",
-       *             "relation": null,
-       *             "other": "wash_certificate"
-       *         },
-       *         "created_at": "2025-11-11 08:47:36",
-       *         "updated_at": null,
-       *         "deleted_at": null
-       *     }
-       * ]
-       */
-      // Validate the response is an array
-      if (!Array.isArray(response)) {
-        response = [];
-      }
-      attachmentsFromOrder.value = response;
-    }).catch((error) => {
-      const parsedErrorMessage = SessionUser.functions.parseErrorMessage(error);
-      console.warn('Error fetching attachments from order:', error, parsedErrorMessage);
-      // Check if there's an error message in the response
-      attachmentsFromOrderError.value = `ERROR: ${parsedErrorMessage || 'Failed to fetch attachments'}`;
-    });
+    SessionUser.objects.orders.functions
+      .fetchAttachments(props.order_id)
+      .then((response) => {
+        /**
+         * [
+         *     {
+         *         "id": 4396,
+         *         "object_type": "`orders`",
+         *         "object_id": 30242,
+         *         "content": {
+         *             "image": null,
+         *             "document": "pdf_6912ea1886f15.pdf",
+         *             "relation": null,
+         *             "other": "wash_certificate"
+         *         },
+         *         "created_at": "2025-11-11 08:47:36",
+         *         "updated_at": null,
+         *         "deleted_at": null
+         *     }
+         * ]
+         */
+        // Validate the response is an array
+        if (!Array.isArray(response)) {
+          response = [];
+        }
+        attachmentsFromOrder.value = response;
+      })
+      .catch((error) => {
+        const parsedErrorMessage = SessionUser.functions.parseErrorMessage(error);
+        console.warn("Error fetching attachments from order:", error, parsedErrorMessage);
+        // Check if there's an error message in the response
+        attachmentsFromOrderError.value = `ERROR: ${parsedErrorMessage || "Failed to fetch attachments"}`;
+      });
   }
 });
 
 onBeforeUnmount(() => {
-  document.removeEventListener('click', onDocumentClick);
-  document.removeEventListener('keydown', onDocumentKeydown);
+  document.removeEventListener("click", onDocumentClick);
+  document.removeEventListener("keydown", onDocumentKeydown);
 });
 
 const onShowImpersonationQRCode = (src, directLink) => {
   Swal.fire({
-    title: t('admin.pos.settings_wheel.scan_qr_to_login'),
+    title: t("admin.pos.settings_wheel.scan_qr_to_login"),
     html: `<img src="${src}" alt="QR-kode" />`,
     showCloseButton: true,
     showConfirmButton: !!directLink,
     showCancelButton: true,
     focusConfirm: false,
-    confirmButtonText: t('admin.pos.settings_wheel.copy_link'),
-    cancelButtonText: t('admin.pos.settings_wheel.close'),
+    confirmButtonText: t("admin.pos.settings_wheel.copy_link"),
+    cancelButtonText: t("admin.pos.settings_wheel.close"),
     preConfirm: () => {
       navigator.clipboard.writeText(directLink);
-      Swal.showValidationMessage(t('admin.pos.settings_wheel.link_copied'));
-    }
+      Swal.showValidationMessage(t("admin.pos.settings_wheel.link_copied"));
+    },
   });
-}
+};
 
 const onClickShowImpersonationQRCode = async (userId) => {
   // Get the session token
@@ -282,7 +286,7 @@ const onClickShowImpersonationQRCode = async (userId) => {
   const response = await SessionUser.superUser.intimidate.showImpersonationQRCode(link);
   // Show the QR code in a modal
   onShowImpersonationQRCode(response.value, link);
-}
+};
 
 const defaultActions = computed(() => {
   return [
@@ -304,20 +308,23 @@ const defaultActions = computed(() => {
      */
     /** Bookings actions */
     {
-      label: t('admin.pos.settings_wheel.booking'),
+      label: t("admin.pos.settings_wheel.booking"),
       isLabel: true,
       showFunction: () => {
         return !!props.order_booking_id;
-      }
+      },
     },
     {
-      icon: 'fas fa-check-circle',
-      label: t('admin.pos.settings_wheel.mark_as_completed'),
-      template: 'success',
+      icon: "fas fa-check-circle",
+      label: t("admin.pos.settings_wheel.mark_as_completed"),
+      template: "success",
       clickAction: () => {
-        return SessionUser.objects.order_bookings.functions.showCompleteConfirmationModal(props.order_booking_id, () => {
-          props.refreshFunction();
-        });
+        return SessionUser.objects.order_bookings.functions.showCompleteConfirmationModal(
+          props.order_booking_id,
+          () => {
+            props.refreshFunction();
+          }
+        );
       },
       showFunction: () => {
         return !!props.order_booking_id && SessionUser.canAccessAdmin() && !props.order_id;
@@ -325,31 +332,41 @@ const defaultActions = computed(() => {
       disabled: false,
     },
     {
-      icon: 'fas fa-external-link-alt',
-      label: t('admin.pos.settings_wheel.view_booking_new_tab'),
+      icon: "fas fa-external-link-alt",
+      label: t("admin.pos.settings_wheel.view_booking_new_tab"),
       clickAction: () => {
-        return SessionUser.functions.redirectTo.department(props.department_id, 'modules/bookings/order/' + props.order_booking_id, true);
+        return SessionUser.functions.redirectTo.department(
+          props.department_id,
+          "modules/bookings/order/" + props.order_booking_id,
+          true
+        );
       },
       showFunction: () => {
         return !!props.order_booking_id;
       },
     },
     {
-      icon: 'fas fa-edit',
-      label: t('admin.pos.settings_wheel.change_association'),
+      icon: "fas fa-edit",
+      label: t("admin.pos.settings_wheel.change_association"),
       clickAction: () => {
-        return SessionUser.objects.order_bookings.showEditObjectFieldForm(props.order_booking_id, 'order_id', props.order_id, () => {
-          props.refreshFunction();
-        }, {
-          filters: {
-            ...(props.customer_number ? {customer_id: props.customer_number} : {}),
-            ...(props.department_id ? {department_id: props.department_id} : {})
+        return SessionUser.objects.order_bookings.showEditObjectFieldForm(
+          props.order_booking_id,
+          "order_id",
+          props.order_id,
+          () => {
+            props.refreshFunction();
           },
-          pagination: {
-            page: 1,
-            limit: 100
+          {
+            filters: {
+              ...(props.customer_number ? { customer_id: props.customer_number } : {}),
+              ...(props.department_id ? { department_id: props.department_id } : {}),
+            },
+            pagination: {
+              page: 1,
+              limit: 100,
+            },
           }
-        });
+        );
       },
       showFunction: () => {
         return !!props.order_booking_id && SessionUser.canAccessAdmin();
@@ -357,8 +374,8 @@ const defaultActions = computed(() => {
       disabled: false,
     },
     {
-      icon: 'fas fa-trash-alt',
-      label: t('admin.pos.settings_wheel.delete_booking'),
+      icon: "fas fa-trash-alt",
+      label: t("admin.pos.settings_wheel.delete_booking"),
       clickAction: () => {
         return SessionUser.objects.order_bookings.functions.showDeleteConfirmationModal(props.order_booking_id, () => {
           props.refreshFunction();
@@ -368,7 +385,7 @@ const defaultActions = computed(() => {
         return !!props.order_booking_id && SessionUser.canAccessAdmin() && !props.order_id;
       },
       disabled: false,
-      template: 'danger'
+      template: "danger",
     },
     /** Department lane actions */
     {
@@ -376,22 +393,25 @@ const defaultActions = computed(() => {
       isLabel: true,
       showFunction: () => {
         return !!props.department_lane_id;
-      }
+      },
     },
     {
       icon: `fas fa-external-link-alt`,
-      label: t('admin.pos.settings_wheel.view_lane_new_tab'),
+      label: t("admin.pos.settings_wheel.view_lane_new_tab"),
       clickAction: () => {
-        return SessionUser.functions.redirectTo.superUser('/department/lanes/' + props.department_lane_id, !SessionUser.functions.device.isMobile());
+        return SessionUser.functions.redirectTo.superUser(
+          "/department/lanes/" + props.department_lane_id,
+          !SessionUser.functions.device.isMobile()
+        );
       },
       showFunction: () => {
         return !!props.department_lane_id && SessionUser.canAccessSuperUser();
       },
     },
     {
-      icon: 'fas fa-play',
-      label: t('superuser.department_lane.force_enable_machine'),
-      template: 'success',
+      icon: "fas fa-play",
+      label: t("superuser.department_lane.force_enable_machine"),
+      template: "success",
       clickAction: () => {
         return SessionUser.objects.department_lanes.functions.forceEnableMachine(props.department_lane_id);
       },
@@ -400,9 +420,9 @@ const defaultActions = computed(() => {
       },
     },
     {
-      icon: 'fas fa-stop',
-      label: t('superuser.department_lane.force_disable_machine'),
-      template: 'danger',
+      icon: "fas fa-stop",
+      label: t("superuser.department_lane.force_disable_machine"),
+      template: "danger",
       clickAction: () => {
         return SessionUser.objects.department_lanes.functions.forceDisableMachine(props.department_lane_id);
       },
@@ -416,11 +436,11 @@ const defaultActions = computed(() => {
       isLabel: true,
       showFunction: () => {
         return !!props.order_id;
-      }
+      },
     },
     {
-      icon: 'fas fa-external-link-alt',
-      label: t('admin.pos.settings_wheel.view_order_new_tab'),
+      icon: "fas fa-external-link-alt",
+      label: t("admin.pos.settings_wheel.view_order_new_tab"),
       clickAction: async () => {
         return redirectDepartmentOrderPage(props.order_id, true);
       },
@@ -429,8 +449,8 @@ const defaultActions = computed(() => {
       },
     },
     {
-      icon: 'fas fa-paperclip',
-      label: t('admin.pos.settings_wheel.attach_wash_certificate'),
+      icon: "fas fa-paperclip",
+      label: t("admin.pos.settings_wheel.attach_wash_certificate"),
       clickAction: () => {
         return SessionUser.objects.orders.functions.showAttachWashCertificateForm(props.order_id, () => {
           props.refreshFunction();
@@ -442,8 +462,8 @@ const defaultActions = computed(() => {
       disabled: false,
     },
     {
-      icon: 'fas fa-user-edit',
-      label: t('admin.pos.settings_wheel.change_customer'),
+      icon: "fas fa-user-edit",
+      label: t("admin.pos.settings_wheel.change_customer"),
       clickAction: () => {
         return SessionUser.objects.orders.functions.showChangeCustomerForm(props.order_id);
       },
@@ -453,10 +473,13 @@ const defaultActions = computed(() => {
       disabled: false,
     },
     {
-      icon: 'fas fa-file-invoice-dollar',
-      label: t('admin.pos.settings_wheel.change_invoice_collection'),
+      icon: "fas fa-file-invoice-dollar",
+      label: t("admin.pos.settings_wheel.change_invoice_collection"),
       clickAction: () => {
-        return SessionUser.objects.orders.functions.showChangeInvoiceCollectionForm(props.order_id, props.refreshFunction);
+        return SessionUser.objects.orders.functions.showChangeInvoiceCollectionForm(
+          props.order_id,
+          props.refreshFunction
+        );
       },
       showFunction: () => {
         return !!props.order_id && SessionUser.canAccessSuperUser();
@@ -464,8 +487,8 @@ const defaultActions = computed(() => {
       disabled: false,
     },
     {
-      icon: 'fas fa-download',
-      label: t('admin.pos.settings_wheel.download_invoice'),
+      icon: "fas fa-download",
+      label: t("admin.pos.settings_wheel.download_invoice"),
       clickAction: () => {
         return SessionUser.objects.collectedOrderInvoices.functions.download(props.invoice_collection_id);
       },
@@ -475,8 +498,8 @@ const defaultActions = computed(() => {
       disabled: false,
     },
     {
-      icon: 'fas fa-trash-alt',
-      label: t('admin.pos.settings_wheel.delete_order'),
+      icon: "fas fa-trash-alt",
+      label: t("admin.pos.settings_wheel.delete_order"),
       clickAction: () => {
         return SessionUser.objects.orders.functions.showDeleteConfirmationModal(props.order_id, () => {
           emitDeleted();
@@ -486,11 +509,11 @@ const defaultActions = computed(() => {
         return !!props.order_id && (SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser());
       },
       disabled: false,
-      template: 'danger'
+      template: "danger",
     },
     {
-      icon: 'fas fa-file-invoice-dollar',
-      label: t('admin.pos.settings_wheel.view_invoice_collection_new_tab'),
+      icon: "fas fa-file-invoice-dollar",
+      label: t("admin.pos.settings_wheel.view_invoice_collection_new_tab"),
       clickAction: () => {
         return redirectSuperUserInvoiceCollectionPage(props.invoice_collection_id);
       },
@@ -500,52 +523,56 @@ const defaultActions = computed(() => {
     },
     /** Vehicle actions */
     {
-      label: props.reg_1 && props.reg_2 ? `${SessionUser.objects.vehicles.meta.labels.multiple}` : `${SessionUser.objects.vehicles.meta.labels.single}`,
+      label:
+        props.reg_1 && props.reg_2
+          ? `${SessionUser.objects.vehicles.meta.labels.multiple}`
+          : `${SessionUser.objects.vehicles.meta.labels.single}`,
       isLabel: true,
       showFunction: () => {
         return (!!props.reg_1 || !!props.reg_2) && SessionUser.canAccessSuperUser();
-      }
+      },
     },
     {
-      icon: 'fas fa-car',
-      label: t('admin.pos.settings_wheel.view_vehicle_new_tab', { reg: props.reg_1 ? props.reg_1 : '-' }),
+      icon: "fas fa-car",
+      label: t("admin.pos.settings_wheel.view_vehicle_new_tab", { reg: props.reg_1 ? props.reg_1 : "-" }),
       clickAction: () => {
-        return SessionUser.functions.redirectTo.superUser('/vehicles/' + props.reg_1, true);
+        return SessionUser.functions.redirectTo.superUser("/vehicles/" + props.reg_1, true);
       },
       showFunction: () => {
         return !!props.reg_1 && SessionUser.canAccessSuperUser();
       },
     },
     {
-      icon: 'fas fa-car',
-      label: t('admin.pos.settings_wheel.view_vehicle_new_tab', { reg: props.reg_2 ? props.reg_2 : '-' }),
+      icon: "fas fa-car",
+      label: t("admin.pos.settings_wheel.view_vehicle_new_tab", { reg: props.reg_2 ? props.reg_2 : "-" }),
       clickAction: () => {
-        return SessionUser.functions.redirectTo.superUser('/vehicles/' + props.reg_2, true);
+        return SessionUser.functions.redirectTo.superUser("/vehicles/" + props.reg_2, true);
       },
       showFunction: () => {
         return !!props.reg_2 && SessionUser.canAccessSuperUser();
       },
     },
     /** User actions */
-    {      label: SessionUser.objects.global.language.customer,
+    {
+      label: SessionUser.objects.global.language.customer,
       isLabel: true,
       showFunction: () => {
         return hasUser.value && SessionUser.canAccessSuperUser();
-      }
+      },
     },
     {
-      icon: 'fas fa-user-edit',
-      label: t('admin.pos.settings_wheel.view_customer_new_tab'),
+      icon: "fas fa-user-edit",
+      label: t("admin.pos.settings_wheel.view_customer_new_tab"),
       clickAction: () => {
-        return SessionUser.functions.redirectTo.superUser('/users/' + userIdFromCustomerNumber.value, true);
+        return SessionUser.functions.redirectTo.superUser("/users/" + userIdFromCustomerNumber.value, true);
       },
       showFunction: () => {
         return hasUser.value && SessionUser.canAccessSuperUser() && userIdFromCustomerNumber.value;
       },
     },
     {
-      icon: 'fas fa-user-shield',
-      label: t('admin.pos.settings_wheel.login_as_customer'),
+      icon: "fas fa-user-shield",
+      label: t("admin.pos.settings_wheel.login_as_customer"),
       clickAction: () => {
         return SessionUser.superUser.intimidate.intimidateUser(userIdFromCustomerNumber.value);
       },
@@ -554,18 +581,18 @@ const defaultActions = computed(() => {
       },
     },
     {
-      icon: 'fas fa-qrcode',
-      label: t('admin.pos.settings_wheel.show_qr_code'),
+      icon: "fas fa-qrcode",
+      label: t("admin.pos.settings_wheel.show_qr_code"),
       clickAction: () => {
         return onClickShowImpersonationQRCode(userIdFromCustomerNumber.value);
       },
       showFunction: () => {
         return hasUser.value && SessionUser.canAccessSuperUser();
-      }
+      },
     },
     {
-      icon: 'fas fa-key',
-      label: t('admin.pos.settings_wheel.change_password'),
+      icon: "fas fa-key",
+      label: t("admin.pos.settings_wheel.change_password"),
       clickAction: () => {
         return showSetCustomerPassword(userIdFromCustomerNumber.value);
       },
@@ -574,8 +601,8 @@ const defaultActions = computed(() => {
       },
     },
     {
-      icon: 'fas fa-user',
-      label: t('admin.pos.settings_wheel.show_customer'),
+      icon: "fas fa-user",
+      label: t("admin.pos.settings_wheel.show_customer"),
       clickAction: () => {
         customerModalVisible.value = true;
       },
@@ -585,8 +612,8 @@ const defaultActions = computed(() => {
     },
     /** Subuser grant actions */
     {
-      icon: 'fas fa-edit',
-      label: t('admin.pos.settings_wheel.edit_permissions'),
+      icon: "fas fa-edit",
+      label: t("admin.pos.settings_wheel.edit_permissions"),
       clickAction: () => {
         return SessionUser.objects.subuser_grants.functions.showPermissionEditForm(props.subuserGrant, () => {
           props.refreshFunction();
@@ -602,62 +629,67 @@ const defaultActions = computed(() => {
 
 <template>
   <div>
-  <template v-if="displayActionsDirectly">
-    <!-- Error -->
-    <template v-if="attachmentsFromOrderError">
-      <div class="message is-danger">
-        <div class="message-body">
-          {{ attachmentsFromOrderError }}
+    <template v-if="displayActionsDirectly">
+      <!-- Error -->
+      <template v-if="attachmentsFromOrderError">
+        <div class="message is-danger">
+          <div class="message-body">
+            {{ attachmentsFromOrderError }}
+          </div>
         </div>
-      </div>
-    </template>
-      <template v-for="(action, index) in [ ...defaultActions, ...(useSlots().actions ? [] : []) ]" :key="index">
+      </template>
+      <template v-for="(action, index) in [...defaultActions, ...(useSlots().actions ? [] : [])]" :key="index">
         <ActionSettingsWheelItem
-            v-if="(!action.showFunction || action.showFunction()) && (!action.isLabel || action.isLabel === false)"
-            :icon="action.icon"
-            :label="action.label"
-            :template="action.template"
-            :click-action="action.clickAction"
-            :show-function="action.showFunction"
-            :disabled="action.disabled"
+          v-if="(!action.showFunction || action.showFunction()) && (!action.isLabel || action.isLabel === false)"
+          :icon="action.icon"
+          :label="action.label"
+          :template="action.template"
+          :click-action="action.clickAction"
+          :show-function="action.showFunction"
+          :disabled="action.disabled"
         />
         <ActionSettingsWheelItemLabel
-            v-else-if="action.isLabel && action.isLabel === true && (!action.showFunction || action.showFunction())"
-            :label="action.label"
-            />
+          v-else-if="action.isLabel && action.isLabel === true && (!action.showFunction || action.showFunction())"
+          :label="action.label"
+        />
       </template>
+      <slot name="actions"></slot>
       <!-- If there are attachments, show the attachments -->
       <template v-if="attachmentsFromOrder.length > 0">
-        <ActionSettingsWheelItemLabel :label="t('admin.pos.settings_wheel.attached_files')"/>
+        <ActionSettingsWheelItemLabel :label="t('admin.pos.settings_wheel.attached_files')" />
         <ActionSettingsWheelItem
-            v-for="attachment in attachmentsFromOrder"
-            :key="attachment.id"
-            :icon="'fas fa-paperclip'"
-            :label="t('admin.pos.settings_wheel.open_attached_file', { id: attachment.id })"
-            :click-action="() => SessionUser.objects.orders.functions.downloadAttachment(props.order_id, attachment.id, true)
-                      .catch((error) => {
-                        Swal.fire({
-                          title: t('admin.pos.settings_wheel.error'),
-                          text: t('admin.pos.settings_wheel.error_downloading_attachment'),
-                          icon: 'error',
-                        });
-                      })"
+          v-for="attachment in attachmentsFromOrder"
+          :key="attachment.id"
+          :icon="'fas fa-paperclip'"
+          :label="t('admin.pos.settings_wheel.open_attached_file', { id: attachment.id })"
+          :click-action="
+            () =>
+              SessionUser.objects.orders.functions
+                .downloadAttachment(props.order_id, attachment.id, true)
+                .catch((error) => {
+                  Swal.fire({
+                    title: t('admin.pos.settings_wheel.error'),
+                    text: t('admin.pos.settings_wheel.error_downloading_attachment'),
+                    icon: 'error',
+                  });
+                })
+          "
         />
       </template>
     </template>
     <div class="dropdown is-right" :class="{ 'is-active': isDropdownOpen }" v-else ref="dropdownRoot">
       <div class="dropdown-trigger">
         <button
-            type="button"
-            class="button is-small is-dark"
-            aria-haspopup="true"
-            aria-controls="dropdown-menu"
-            :aria-expanded="isDropdownOpen ? 'true' : 'false'"
-            @click.stop="toggleDropdown"
+          type="button"
+          class="button is-small is-dark"
+          aria-haspopup="true"
+          aria-controls="dropdown-menu"
+          :aria-expanded="isDropdownOpen ? 'true' : 'false'"
+          @click.stop="toggleDropdown"
         >
-                    <span class="icon">
-                      <i :class="props.icon"></i>
-                    </span>
+          <span class="icon">
+            <i :class="props.icon"></i>
+          </span>
           <span v-if="props.label.length > 0" class="ml-2">{{ props.label }}</span>
         </button>
       </div>
@@ -668,106 +700,154 @@ const defaultActions = computed(() => {
             <slot name="actions"></slot>
             <!-- If there is an order_booking_id, show the order booking actions -->
             <template v-if="props.order_booking_id">
-              <ActionSettingsWheelItemLabel :label="t('admin.pos.settings_wheel.booking')"/>
+              <ActionSettingsWheelItemLabel :label="t('admin.pos.settings_wheel.booking')" />
               <ActionSettingsWheelItem
-                  v-if="(SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()) && !props.order_id"
-                  :icon="'fas fa-check-circle'"
-                  :label="t('admin.pos.settings_wheel.mark_as_completed')"
-                  template="success"
-                  :click-action="() => SessionUser.objects.order_bookings.functions.showCompleteConfirmationModal(props.order_booking_id, () => {
-                    props.refreshFunction();
-                  })"
+                v-if="(SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()) && !props.order_id"
+                :icon="'fas fa-check-circle'"
+                :label="t('admin.pos.settings_wheel.mark_as_completed')"
+                template="success"
+                :click-action="
+                  () =>
+                    SessionUser.objects.order_bookings.functions.showCompleteConfirmationModal(
+                      props.order_booking_id,
+                      () => {
+                        props.refreshFunction();
+                      }
+                    )
+                "
               />
               <ActionSettingsWheelItem
-                  :icon="'fas fa-external-link-alt'"
-                  :label="t('admin.pos.settings_wheel.view_booking_new_tab')"
-                  :click-action="() => SessionUser.functions.redirectTo.department(props.department_id, 'modules/bookings/order/' + props.order_booking_id, true)"
+                :icon="'fas fa-external-link-alt'"
+                :label="t('admin.pos.settings_wheel.view_booking_new_tab')"
+                :click-action="
+                  () =>
+                    SessionUser.functions.redirectTo.department(
+                      props.department_id,
+                      'modules/bookings/order/' + props.order_booking_id,
+                      true
+                    )
+                "
               />
               <ActionSettingsWheelItem
-                  v-if="SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()"
-                  :icon="'fas fa-edit'"
-                  :label="(!props.order_id) ? t('admin.pos.settings_wheel.associate_order', { order: SessionUser.objects.orders.meta.labels.single.toLowerCase() }) : t('admin.pos.settings_wheel.change_order', { order: SessionUser.objects.orders.meta.labels.single.toLowerCase() })"
-                  :click-action="() => SessionUser.objects.order_bookings.showEditObjectFieldForm(props.order_booking_id, 'order_id', props.order_id, () => {
-                    props.refreshFunction();
-                  }, {
-                    filters: {
-                      ...(customer_number ? {customer_id: props.customer_number} : {}),
-                      ...(props.department_id ? {department_id: props.department_id} : {})
-                    },
-                    pagination: {
-                      page: 1,
-                      limit: 100
-                    }
-               })"
+                v-if="SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()"
+                :icon="'fas fa-edit'"
+                :label="
+                  !props.order_id
+                    ? t('admin.pos.settings_wheel.associate_order', {
+                        order: SessionUser.objects.orders.meta.labels.single.toLowerCase(),
+                      })
+                    : t('admin.pos.settings_wheel.change_order', {
+                        order: SessionUser.objects.orders.meta.labels.single.toLowerCase(),
+                      })
+                "
+                :click-action="
+                  () =>
+                    SessionUser.objects.order_bookings.showEditObjectFieldForm(
+                      props.order_booking_id,
+                      'order_id',
+                      props.order_id,
+                      () => {
+                        props.refreshFunction();
+                      },
+                      {
+                        filters: {
+                          ...(customer_number ? { customer_id: props.customer_number } : {}),
+                          ...(props.department_id ? { department_id: props.department_id } : {}),
+                        },
+                        pagination: {
+                          page: 1,
+                          limit: 100,
+                        },
+                      }
+                    )
+                "
               />
               <ActionSettingsWheelItem
-                  :icon="'fas fa-trash-alt'"
-                  :label="t('admin.pos.settings_wheel.delete_booking')"
-                  template="danger"
-                  v-show="!props.order_id"
-                  :click-action="() => SessionUser.objects.order_bookings.functions.showDeleteConfirmationModal(props.order_booking_id, () => {
-                    props.refreshFunction();
-                  })"
+                :icon="'fas fa-trash-alt'"
+                :label="t('admin.pos.settings_wheel.delete_booking')"
+                template="danger"
+                v-show="!props.order_id"
+                :click-action="
+                  () =>
+                    SessionUser.objects.order_bookings.functions.showDeleteConfirmationModal(
+                      props.order_booking_id,
+                      () => {
+                        props.refreshFunction();
+                      }
+                    )
+                "
               />
             </template>
             <!-- If there's an order_id, show the order actions -->
             <template v-if="props.order_id">
               <!-- Label -->
               <action-settings-wheel-item-label
-                  :label="SessionUser.functions.ucFirst(SessionUser.objects.orders.meta.labels.single)"
+                :label="SessionUser.functions.ucFirst(SessionUser.objects.orders.meta.labels.single)"
               />
               <!-- Go to the order page, in a new tab -->
               <action-settings-wheel-item
-                  v-if="SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()"
-                  :label="t('admin.pos.settings_wheel.view_order_new_tab')"
-                  icon="fas fa-external-link-alt"
-                  :click-action="async () => redirectDepartmentOrderPage(props.order_id, true)"
-                  :disabled="false"
+                v-if="SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()"
+                :label="t('admin.pos.settings_wheel.view_order_new_tab')"
+                icon="fas fa-external-link-alt"
+                :click-action="async () => redirectDepartmentOrderPage(props.order_id, true)"
+                :disabled="false"
               />
               <!-- Go to the user/order/:order_id page, in a new tab -->
               <action-settings-wheel-item
-                  v-if="!SessionUser.canAccessAdmin() && !SessionUser.canAccessSuperUser()"
-                  :label="t('admin.pos.settings_wheel.view_order_new_tab')"
-                  icon="fas fa-external-link-alt"
-                  :click-action="() => SessionUser.functions.redirectTo.user('/orders/' + props.order_id, true)"
-                  :disabled="false"
-                  />
+                v-if="!SessionUser.canAccessAdmin() && !SessionUser.canAccessSuperUser()"
+                :label="t('admin.pos.settings_wheel.view_order_new_tab')"
+                icon="fas fa-external-link-alt"
+                :click-action="() => SessionUser.functions.redirectTo.user('/orders/' + props.order_id, true)"
+                :disabled="false"
+              />
               <!-- Attach wash certificate -->
               <action-settings-wheel-item
-                  v-if="SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()"
-                  :label="t('admin.pos.settings_wheel.attach_wash_certificate')"
-                  icon="fas fa-paperclip"
-                  :click-action="() => SessionUser.objects.orders.functions.showAttachWashCertificateForm(props.order_id, () => {
-                    props.refreshFunction();
-                  })"
-                  :disabled="false"
+                v-if="SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()"
+                :label="t('admin.pos.settings_wheel.attach_wash_certificate')"
+                icon="fas fa-paperclip"
+                :click-action="
+                  () =>
+                    SessionUser.objects.orders.functions.showAttachWashCertificateForm(props.order_id, () => {
+                      props.refreshFunction();
+                    })
+                "
+                :disabled="false"
               />
               <!-- Change the customer (of the order) -->
               <action-settings-wheel-item
-                  v-if="SessionUser.canAccessSuperUser()"
-                  :label="t('admin.pos.settings_wheel.change_customer')"
-                  icon="fas fa-user-edit"
-                  :click-action="() => SessionUser.objects.orders.functions.showChangeCustomerForm(props.order_id)"
-                  :disabled="false"
+                v-if="SessionUser.canAccessSuperUser()"
+                :label="t('admin.pos.settings_wheel.change_customer')"
+                icon="fas fa-user-edit"
+                :click-action="() => SessionUser.objects.orders.functions.showChangeCustomerForm(props.order_id)"
+                :disabled="false"
               />
               <!-- Change the invoice collection (of the order) -->
               <action-settings-wheel-item
-                  v-if="SessionUser.canAccessSuperUser()"
-                  :label="t('admin.pos.settings_wheel.change_invoice_collection')"
-                  icon="fas fa-file-invoice-dollar"
-                  :click-action="() => SessionUser.objects.orders.functions.showChangeInvoiceCollectionForm(props.order_id, props.refreshFunction)"
-                  :disabled="false"
+                v-if="SessionUser.canAccessSuperUser()"
+                :label="t('admin.pos.settings_wheel.change_invoice_collection')"
+                icon="fas fa-file-invoice-dollar"
+                :click-action="
+                  () =>
+                    SessionUser.objects.orders.functions.showChangeInvoiceCollectionForm(
+                      props.order_id,
+                      props.refreshFunction
+                    )
+                "
+                :disabled="false"
               />
               <!-- Delete the order -->
               <action-settings-wheel-item
-                  v-if="SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()"
-                  :label="t('admin.pos.settings_wheel.delete_order')"
-                  template="danger"
-                  icon="fas fa-trash-alt"
-                  :click-action="() => SessionUser.objects.orders.functions.showDeleteConfirmationModal(props.order_id, () => {
-                  emitDeleted();
-                })"
-                  :disabled="false"
+                v-if="SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()"
+                :label="t('admin.pos.settings_wheel.delete_order')"
+                template="danger"
+                icon="fas fa-trash-alt"
+                :click-action="
+                  () =>
+                    SessionUser.objects.orders.functions.showDeleteConfirmationModal(props.order_id, () => {
+                      emitDeleted();
+                    })
+                "
+                :disabled="false"
               />
             </template>
             <!-- If there is an invoice collection id, show the invoice actions -->
@@ -779,131 +859,153 @@ const defaultActions = computed(() => {
               />
               <!-- Show the invoice collection, in a new tab -->
               <action-settings-wheel-item
-                  v-if="SessionUser.canAccessSuperUser()"
-                  :label="t('admin.pos.settings_wheel.view_invoice_collection_new_tab')"
-                  icon="fas fa-file-invoice-dollar"
-                  :click-action="() => redirectSuperUserInvoiceCollectionPage(props.invoice_collection_id)"
+                v-if="SessionUser.canAccessSuperUser()"
+                :label="t('admin.pos.settings_wheel.view_invoice_collection_new_tab')"
+                icon="fas fa-file-invoice-dollar"
+                :click-action="() => redirectSuperUserInvoiceCollectionPage(props.invoice_collection_id)"
               />
             </template>
             <!-- if there is a department_lane_id, show the department lane actions -->
             <template v-if="props.department_lane_id">
               <!-- Label -->
               <action-settings-wheel-item-label
-                  :label="SessionUser.objects.department_lanes.meta.labels.single"
-                  v-show="SessionUser.canAccessSuperUser() || SessionUser.canAccessAdmin()"
+                :label="SessionUser.objects.department_lanes.meta.labels.single"
+                v-show="SessionUser.canAccessSuperUser() || SessionUser.canAccessAdmin()"
               />
               <!-- Show the department lane (Admin), in a new tab -->
               <action-settings-wheel-item
-                  v-if="(SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()) && props.department_id"
-                  :label="t('admin.pos.settings_wheel.view_lane_new_tab')"
-                  icon="fas fa-external-link-alt"
-                  :click-action="() => SessionUser.functions.redirectTo.department(props.department_id, 'modules/wash-lanes/' + props.department_lane_id, !SessionUser.functions.device.isMobile())"
+                v-if="(SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()) && props.department_id"
+                :label="t('admin.pos.settings_wheel.view_lane_new_tab')"
+                icon="fas fa-external-link-alt"
+                :click-action="
+                  () =>
+                    SessionUser.functions.redirectTo.department(
+                      props.department_id,
+                      'modules/wash-lanes/' + props.department_lane_id,
+                      !SessionUser.functions.device.isMobile()
+                    )
+                "
               />
               <!-- Show the department lane (SuperUser), in a new tab -->
               <action-settings-wheel-item
-                  v-if="SessionUser.canAccessSuperUser()"
-                  :label="t('admin.pos.settings_wheel.view_lane_setup_new_tab')"
-                  icon="fas fa-external-link-alt"
-                  :click-action="() => SessionUser.functions.redirectTo.superUser('/department/lanes/' + props.department_lane_id, true)"
+                v-if="SessionUser.canAccessSuperUser()"
+                :label="t('admin.pos.settings_wheel.view_lane_setup_new_tab')"
+                icon="fas fa-external-link-alt"
+                :click-action="
+                  () =>
+                    SessionUser.functions.redirectTo.superUser('/department/lanes/' + props.department_lane_id, true)
+                "
               />
               <!-- Force enable machine -->
               <action-settings-wheel-item
-                  v-if="SessionUser.canAccessSuperUser()"
-                  :label="t('superuser.department_lane.force_enable_machine')"
-                  icon="fas fa-play"
-                  template="success"
-                  :click-action="() => SessionUser.objects.department_lanes.functions.forceEnableMachine(props.department_lane_id)"
+                v-if="SessionUser.canAccessSuperUser()"
+                :label="t('superuser.department_lane.force_enable_machine')"
+                icon="fas fa-play"
+                template="success"
+                :click-action="
+                  () => SessionUser.objects.department_lanes.functions.forceEnableMachine(props.department_lane_id)
+                "
               />
               <!-- Force disable machine -->
               <action-settings-wheel-item
-                  v-if="SessionUser.canAccessSuperUser()"
-                  :label="t('superuser.department_lane.force_disable_machine')"
-                  icon="fas fa-stop"
-                  template="danger"
-                  :click-action="() => SessionUser.objects.department_lanes.functions.forceDisableMachine(props.department_lane_id)"
+                v-if="SessionUser.canAccessSuperUser()"
+                :label="t('superuser.department_lane.force_disable_machine')"
+                icon="fas fa-stop"
+                template="danger"
+                :click-action="
+                  () => SessionUser.objects.department_lanes.functions.forceDisableMachine(props.department_lane_id)
+                "
               />
             </template>
             <!-- If there's a user_id, show the user actions -->
             <template v-if="hasUser">
               <!-- Label -->
               <ActionSettingsWheelItemLabel
-                  :label="SessionUser.objects.global.language.customer"
-                  v-show="SessionUser.canAccessSuperUser()"
+                :label="SessionUser.objects.global.language.customer"
+                v-show="SessionUser.canAccessSuperUser()"
               />
               <!-- Se bruger -->
               <ActionSettingsWheelItem
-                  :label="t('admin.pos.settings_wheel.view_customer_new_tab')"
-                  icon="fas fa-user-edit"
-                  :click-action="() => SessionUser.functions.redirectTo.superUser('/users/' + userIdFromCustomerNumber, true)"
-                  v-if="SessionUser.canAccessSuperUser() && userIdFromCustomerNumber"
+                :label="t('admin.pos.settings_wheel.view_customer_new_tab')"
+                icon="fas fa-user-edit"
+                :click-action="
+                  () => SessionUser.functions.redirectTo.superUser('/users/' + userIdFromCustomerNumber, true)
+                "
+                v-if="SessionUser.canAccessSuperUser() && userIdFromCustomerNumber"
               />
               <!-- Log ind som kunde -->
               <ActionSettingsWheelItem
-                  :label="t('admin.pos.settings_wheel.login_as_user')"
-                  icon="fas fa-user-shield"
-                  :click-action="() => SessionUser.superUser.intimidate.intimidateUser(userIdFromCustomerNumber)"
-                  v-if="SessionUser.canAccessSuperUser() && userIdFromCustomerNumber"
+                :label="t('admin.pos.settings_wheel.login_as_user')"
+                icon="fas fa-user-shield"
+                :click-action="() => SessionUser.superUser.intimidate.intimidateUser(userIdFromCustomerNumber)"
+                v-if="SessionUser.canAccessSuperUser() && userIdFromCustomerNumber"
               />
               <!-- Log ind som kunde (QR) -->
               <ActionSettingsWheelItem
-                  @click="onClickShowImpersonationQRCode(userIdFromCustomerNumber)"
-                  icon="fas fa-user-shield"
-                  :label="t('admin.pos.settings_wheel.login_as_user_qr')"
-                  v-if="SessionUser.canAccessSuperUser() && userIdFromCustomerNumber"
+                @click="onClickShowImpersonationQRCode(userIdFromCustomerNumber)"
+                icon="fas fa-user-shield"
+                :label="t('admin.pos.settings_wheel.login_as_user_qr')"
+                v-if="SessionUser.canAccessSuperUser() && userIdFromCustomerNumber"
               />
 
               <!-- Set password -->
               <ActionSettingsWheelItem
-                  :label="t('admin.pos.settings_wheel.change_password')"
-                  icon="fas fa-key"
-                  :click-action="() => showSetCustomerPassword(userIdFromCustomerNumber)"
-                  v-if="SessionUser.canAccessSuperUser()"
+                :label="t('admin.pos.settings_wheel.change_password')"
+                icon="fas fa-key"
+                :click-action="() => showSetCustomerPassword(userIdFromCustomerNumber)"
+                v-if="SessionUser.canAccessSuperUser()"
               />
               <!-- Show customer modal -->
               <ActionSettingsWheelItem
-                  :label="t('admin.pos.settings_wheel.show_customer')"
-                  icon="fas fa-user"
-                  :click-action="() => customerModalVisible = true"
-                  v-if="SessionUser.canAccessSuperUser()"
+                :label="t('admin.pos.settings_wheel.show_customer')"
+                icon="fas fa-user"
+                :click-action="() => (customerModalVisible = true)"
+                v-if="SessionUser.canAccessSuperUser()"
               />
             </template>
             <!-- If there is a reg_1, show the reg_1 actions -->
             <template v-if="props.reg_1 || props.reg_2">
               <!-- Label -->
               <action-settings-wheel-item-label
-                  :label="props.reg_1 && props.reg_2 ? `${SessionUser.objects.vehicles.meta.labels.multiple}` : `${SessionUser.objects.vehicles.meta.labels.single}`"
-                  v-show="SessionUser.canAccessSuperUser()"
+                :label="
+                  props.reg_1 && props.reg_2
+                    ? `${SessionUser.objects.vehicles.meta.labels.multiple}`
+                    : `${SessionUser.objects.vehicles.meta.labels.single}`
+                "
+                v-show="SessionUser.canAccessSuperUser()"
               />
               <!-- Show the vehicle, in a new tab -->
               <action-settings-wheel-item
-                  :label="t('admin.pos.settings_wheel.view_vehicle_new_tab', { reg: props.reg_1 })"
-                  icon="fas fa-car"
-                  v-if="props.reg_1 && SessionUser.canAccessSuperUser()"
-                  :click-action="() => SessionUser.functions.redirectTo.superUser('/vehicles/' + props.reg_1, true)"
+                :label="t('admin.pos.settings_wheel.view_vehicle_new_tab', { reg: props.reg_1 })"
+                icon="fas fa-car"
+                v-if="props.reg_1 && SessionUser.canAccessSuperUser()"
+                :click-action="() => SessionUser.functions.redirectTo.superUser('/vehicles/' + props.reg_1, true)"
               />
               <action-settings-wheel-item
-                  :label="t('admin.pos.settings_wheel.view_vehicle_new_tab', { reg: props.reg_2 })"
-                  icon="fas fa-car"
-                  v-if="props.reg_2 && SessionUser.canAccessSuperUser()"
-                  :click-action="() => SessionUser.functions.redirectTo.superUser('/vehicles/' + props.reg_2, true)"
+                :label="t('admin.pos.settings_wheel.view_vehicle_new_tab', { reg: props.reg_2 })"
+                icon="fas fa-car"
+                v-if="props.reg_2 && SessionUser.canAccessSuperUser()"
+                :click-action="() => SessionUser.functions.redirectTo.superUser('/vehicles/' + props.reg_2, true)"
               />
               <!-- If there are any attachments, show the attachments actions -->
               <template v-if="attachmentsFromOrder.length > 0">
-                <action-settings-wheel-item-label
-                    :label="t('admin.pos.settings_wheel.attached_files')"
-                />
+                <action-settings-wheel-item-label :label="t('admin.pos.settings_wheel.attached_files')" />
                 <template v-for="(attachment, index) in attachmentsFromOrder" :key="index">
                   <action-settings-wheel-item
-                      :label="`${attachment.content?.document || attachment.content?.other}`"
-                      icon="fas fa-paperclip"
-                      :click-action="() => SessionUser.objects.orders.functions.downloadAttachment(props.order_id, attachment.id, true)
-                      .catch((error) => {
-                        Swal.fire({
-                          title: t('admin.pos.settings_wheel.error'),
-                          text: t('admin.pos.settings_wheel.error_downloading_attachment'),
-                          icon: 'error',
-                        });
-                      })"
+                    :label="`${attachment.content?.document || attachment.content?.other}`"
+                    icon="fas fa-paperclip"
+                    :click-action="
+                      () =>
+                        SessionUser.objects.orders.functions
+                          .downloadAttachment(props.order_id, attachment.id, true)
+                          .catch((error) => {
+                            Swal.fire({
+                              title: t('admin.pos.settings_wheel.error'),
+                              text: t('admin.pos.settings_wheel.error_downloading_attachment'),
+                              icon: 'error',
+                            });
+                          })
+                    "
                   />
                 </template>
               </template>
@@ -911,53 +1013,59 @@ const defaultActions = computed(() => {
             <!-- Collected order invoice actions -->
             <template v-if="props.invoice_collection_id">
               <ActionSettingsWheelItemLabel
-                  :label="SessionUser.objects.collectedOrderInvoices.meta.title"
-                  v-show="props.invoice_collection_id"
+                :label="SessionUser.objects.collectedOrderInvoices.meta.title"
+                v-show="props.invoice_collection_id"
               />
               <!-- Download invoice -->
               <ActionSettingsWheelItem
-                  :label="t('admin.pos.settings_wheel.download_invoice')"
-                  icon="fas fa-download"
-                  :click-action="() => SessionUser.objects.collectedOrderInvoices.functions.download(props.invoice_collection_id)"
+                :label="t('admin.pos.settings_wheel.download_invoice')"
+                icon="fas fa-download"
+                :click-action="
+                  () => SessionUser.objects.collectedOrderInvoices.functions.download(props.invoice_collection_id)
+                "
               />
             </template>
             <!-- Subuser grant actions -->
             <template v-if="props.subuserGrant">
               <ActionSettingsWheelItem
-                  :label="t('admin.pos.settings_wheel.edit_permissions')"
-                  icon="fas fa-edit"
-                  :click-action="() => SessionUser.objects.subuser_grants.functions.showPermissionEditForm(props.subuserGrant, () => {
-                    props.refreshFunction();
-                  })"
-                  v-if="SessionUser.canAccessUser()"
+                :label="t('admin.pos.settings_wheel.edit_permissions')"
+                icon="fas fa-edit"
+                :click-action="
+                  () =>
+                    SessionUser.objects.subuser_grants.functions.showPermissionEditForm(props.subuserGrant, () => {
+                      props.refreshFunction();
+                    })
+                "
+                v-if="SessionUser.canAccessUser()"
               />
               <ActionSettingsWheelItem
-                  :label="t('admin.pos.settings_wheel.delete_user')"
-                  icon="fas fa-trash"
-                  :click-action="() => SessionUser.objects.subuser_grants.delete(props.subuserGrant.id, () => {
-                    props.refreshFunction();
-                  })"
-                  v-if="SessionUser.canAccessUser()"
+                :label="t('admin.pos.settings_wheel.delete_user')"
+                icon="fas fa-trash"
+                :click-action="
+                  () =>
+                    SessionUser.objects.subuser_grants.delete(props.subuserGrant.id, () => {
+                      props.refreshFunction();
+                    })
+                "
+                v-if="SessionUser.canAccessUser()"
               />
             </template>
           </template>
           <!-- If no actions are defined, then show that no actions are defined -->
           <template v-else>
             <div class="dropdown-item">
-              <p class="has-text-centered">{{ t('admin.pos.settings_wheel.no_actions_defined') }}</p>
+              <p class="has-text-centered">{{ t("admin.pos.settings_wheel.no_actions_defined") }}</p>
             </div>
           </template>
         </div>
       </div>
     </div>
     <CustomerModal
-        v-if="customerModalVisible"
-        :user_id="userIdFromCustomerNumber"
-        @closeModal="customerModalVisible = false"
+      v-if="customerModalVisible"
+      :user_id="userIdFromCustomerNumber"
+      @closeModal="customerModalVisible = false"
     />
   </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/components/displays/department/pos/orders/ordersTable.vue b/src/components/displays/department/pos/orders/ordersTable.vue
index de862343..4b37baeb 100644
--- a/src/components/displays/department/pos/orders/ordersTable.vue
+++ b/src/components/displays/department/pos/orders/ordersTable.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
 
@@ -38,42 +38,39 @@ const props = defineProps({
   excludedOrderIds: {
     type: Array, // Any order ids that should be excluded from the list, will also be excluded from calculations (e.g. hidden orders).
     default: () => [],
-  }
+  },
 });
-import {computed, onMounted, ref, watch} from 'vue';
-import { departments, getDepartments, isLoading, getDepartmentName} from "@/components/pagination/departmentTabs.vue";
-import {showPopper, removePopperIfOpen, popperBox} from "@/components/displays/PopperDefault.vue";
+import { computed, onMounted, ref, watch } from "vue";
+import { departments, getDepartments, isLoading, getDepartmentName } from "@/components/pagination/departmentTabs.vue";
+import { showPopper, removePopperIfOpen, popperBox } from "@/components/displays/PopperDefault.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
-import {orderBy, orderDirection, setOrder, loadList} from "@/components/pagination/paginatedList.vue";
+import { orderBy, orderDirection, setOrder, loadList } from "@/components/pagination/paginatedList.vue";
 import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
 import OrderContentTable from "@/components/displays/superuser/tables/OrderContentTable.vue";
 import InvoiceMultipleCollectionsModal from "@/components/displays/modals/InvoiceMultipleCollectionsModal.vue";
 import Swal from "sweetalert2";
 import ColorIndicator from "@/components/displays/buttons/ColorIndicator.vue";
-import InvoicingBillingPeriodInvoiceProgressBar
-  from "@/views/dashboards/superUserDashboard/InvoicingBillingPeriod/displays/InvoicingBillingPeriodInvoiceProgressBar.vue";
+import InvoicingBillingPeriodInvoiceProgressBar from "@/views/dashboards/superUserDashboard/InvoicingBillingPeriod/displays/InvoicingBillingPeriodInvoiceProgressBar.vue";
 import { invoiceQueue } from "@/views/dashboards/superUserDashboard/InvoicingBillingPeriod/imports/InvoicingBillingPeriodImportInvoiceQueue.vue";
-import PosDepartmentStepMobileAttachment
-  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileAttachment.vue";
+import PosDepartmentStepMobileAttachment from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileAttachment.vue";
 import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
 import ViewportResponsiveWrapper from "@/components/viewport/conditions/elements/ViewportResponsiveWrapper.vue";
 import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
 
-
 const redirectDepartmentOrderPage = (orderId, departmentId, newTab = true) => {
   // Check if the user has access to the department
   if (!SessionUser.canAccessDepartment(departmentId)) {
-    window.open('/user/orders/' + orderId, newTab ? '_blank' : '_self');
+    window.open("/user/orders/" + orderId, newTab ? "_blank" : "_self");
   } else {
     // Send the user to the order page (In a new tab)
     // `/admin/${departmentId}/modules/pos/orders/${orderId}`
-    window.open(`/admin/${departmentId}/modules/pos/orders/${orderId}`, newTab ? '_blank' : '_self');
+    window.open(`/admin/${departmentId}/modules/pos/orders/${orderId}`, newTab ? "_blank" : "_self");
   }
 };
 
 const redirectSuperUserInvoiceCollectionPage = (invoiceCollectionId) => {
   // Send the user to the invoice collection page (In a new tab)
-  window.open(`/superuser/invoices/${invoiceCollectionId}`, '_blank');
+  window.open(`/superuser/invoices/${invoiceCollectionId}`, "_blank");
 };
 
 // Get the departments (If the departments are not already loaded)
@@ -85,7 +82,29 @@ const getEconomicInvoiceModule = (order) => order?.economic_invoice_module ?? nu
 const getStripeInvoiceModule = (order) => order?.stripe_invoice_module ?? null;
 const getInvoiceCollection = (order) => order?.invoice_collection ?? null;
 const getOrderAttachments = (order) => (Array.isArray(order?.attachments) ? order.attachments : []);
-const getAttachmentLabel = (attachment) => attachment?.content?.document || attachment?.content?.other || `Attachment ${attachment?.id ?? ''}`.trim();
+const canAccessOrderAttachments = () => {
+  return (
+    SessionUser.canAccessAdmin() ||
+    SessionUser.canAccessSuperUser() ||
+    SessionUser.hasPermission("download_order_attachments_own") ||
+    SessionUser.hasPermission("download_order_attachments")
+  );
+};
+const hasOrderAttachments = (order) => {
+  if (getOrderAttachments(order).length > 0 || order?.has_attachments === true) {
+    return true;
+  }
+
+  const attachmentCountCandidates = [order?.attachments_count, order?.attachment_count, order?.attachmentsCount];
+
+  return attachmentCountCandidates.some((value) => {
+    const normalizedValue = Number.parseInt(value, 10);
+    return Number.isInteger(normalizedValue) && normalizedValue > 0;
+  });
+};
+const shouldShowOrderAttachmentsButton = (order) => hasOrderAttachments(order) && canAccessOrderAttachments();
+const getAttachmentLabel = (attachment) =>
+  attachment?.content?.document || attachment?.content?.other || `Attachment ${attachment?.id ?? ""}`.trim();
 
 const isOrderInvoicedWithEconomic = (order) => {
   const economicInvoiceModule = getEconomicInvoiceModule(order);
@@ -149,33 +168,29 @@ const doesOrderHaveErrorMessage = (order) => {
 
 const getOrderInvoiceStatusBarColor = (order) => {
   // Check the invoice status
-  let color_class = 'has-text-danger';
+  let color_class = "has-text-danger";
   if (isOrderInvoicedWithStripe(order)) {
-    isOrderStripeInvoicePaid(order)
-        ? color_class = 'has-text-success'
-        : color_class = 'has-text-warning';
+    isOrderStripeInvoicePaid(order) ? (color_class = "has-text-success") : (color_class = "has-text-warning");
   }
   if (isOrderInvoicedWithEconomic(order)) {
-    isOrderEconomicInvoiceBooked(order)
-        ? color_class = 'has-text-success'
-        : color_class = 'has-text-warning';
+    isOrderEconomicInvoiceBooked(order) ? (color_class = "has-text-success") : (color_class = "has-text-warning");
   }
   if (doesOrderHaveInvoiceCollection(order)) {
     if (isPendingHandheld(order) && !order?.completed_at) {
-      return 'has-text-warning'; // If the order is pending handheld, show a warning color
+      return "has-text-warning"; // If the order is pending handheld, show a warning color
     }
-    color_class = 'has-text-grey';
+    color_class = "has-text-grey";
     // Check if the invoice collection is closed
     if (isOrderInvoiceCollectionClosed(order)) {
-      color_class = 'has-text-warning';
+      color_class = "has-text-warning";
       // Check if the invoice collection is booked
       if (isOrderInvoiceCollectionBooked(order)) {
-        color_class = 'has-text-success';
+        color_class = "has-text-success";
       }
     }
   }
   if (doesOrderHaveErrorMessage(order)) {
-    color_class = 'has-text-danger';
+    color_class = "has-text-danger";
   }
   // Return the color class
   return color_class;
@@ -190,51 +205,51 @@ const getOrderInvoiceStatusContent = (order) => {
     // If the order is invoiced with e-conomic, show the invoice id
     if (isOrderInvoicedWithEconomic(order)) {
       isOrderEconomicInvoiceBooked(order)
-          ? content.push('Bogført i e-conomic')
-          : content.push('Gemt som kladde i e-conomic');
+        ? content.push("Bogført i e-conomic")
+        : content.push("Gemt som kladde i e-conomic");
       isOrderEconomicInvoiceBooked(order)
-          ? content.push('Faktura ID: <strong>' + (economicInvoiceModule?.invoice_id ?? '-') + '</strong>')
-          : content.push('Faktura Kladde ID: <strong>' + (economicInvoiceModule?.invoice_draft_id ?? '-') + '</strong>');
+        ? content.push("Faktura ID: <strong>" + (economicInvoiceModule?.invoice_id ?? "-") + "</strong>")
+        : content.push("Faktura Kladde ID: <strong>" + (economicInvoiceModule?.invoice_draft_id ?? "-") + "</strong>");
     }
     // If the order is invoiced with stripe, show the invoice id
     if (isOrderInvoicedWithStripe(order)) {
       isOrderStripeInvoicePaid(order)
-          ? content.push('Fakturaen er <strong>betalt</strong>')
-          : content.push('Fakturaen er <strong>ikke betalt</strong>');
-      content.push('Faktura ID: <strong>' + (stripeInvoiceModule?.id ?? '-') + '</strong>');
+        ? content.push("Fakturaen er <strong>betalt</strong>")
+        : content.push("Fakturaen er <strong>ikke betalt</strong>");
+      content.push("Faktura ID: <strong>" + (stripeInvoiceModule?.id ?? "-") + "</strong>");
     }
-    content.push(''); // Add a line break
+    content.push(""); // Add a line break
     isOrderInvoicedWithEconomic(order)
-        ? content.push('<span class="has-text-grey">Faktureret med e-conomic</span>')
-        : content.push('<span class="has-text-grey">Faktureret med stripe</span>');
+      ? content.push('<span class="has-text-grey">Faktureret med e-conomic</span>')
+      : content.push('<span class="has-text-grey">Faktureret med stripe</span>');
   } else {
     // Check if the order has an invoice collection
     if (doesOrderHaveInvoiceCollection(order)) {
       // Check if the invoice collection is closed
       if (isOrderInvoiceCollectionClosed(order)) {
-        content.push('Faktura samlingen er <strong>lukket</strong>');
+        content.push("Faktura samlingen er <strong>lukket</strong>");
         // Check if the invoice collection is booked
         if (isOrderInvoiceCollectionBooked(order)) {
-          content.push('Faktura samlingen er <strong>bogført</strong>');
+          content.push("Faktura samlingen er <strong>bogført</strong>");
         }
       }
-      content.push(''); // Add a line break
-      content.push('Faktura samling ID: <strong>' + (invoiceCollection?.id ?? '-') + '</strong>');
+      content.push(""); // Add a line break
+      content.push("Faktura samling ID: <strong>" + (invoiceCollection?.id ?? "-") + "</strong>");
       // Add the Error message if it exists
       if (doesOrderHaveErrorMessage(order)) {
-        content.push('Fejl: <strong class="has-text-danger">' + order.error_message + '</strong>');
+        content.push('Fejl: <strong class="has-text-danger">' + order.error_message + "</strong>");
       }
     } else {
-      content.push(''); // Add a line break
+      content.push(""); // Add a line break
       content.push('<strong class="has-text-grey">Transaktionen er ikke faktureret</strong>');
     }
   }
   // Return the list of content as a string, with line breaks between each item
-  return content.join('<br>');
+  return content.join("<br>");
 };
 
 const getOrderInvoiceStatusTitle = (order) => {
-  return isOrderInvoiced(order) ? 'Faktura status' : 'Transaktion status';
+  return isOrderInvoiced(order) ? "Faktura status" : "Transaktion status";
 };
 
 const clickUser = (customer_id) => {
@@ -242,18 +257,20 @@ const clickUser = (customer_id) => {
     return;
   }
   // Send the user to the user page
-  SessionUser.adminUser.customers.fromCustomerNumber.getUserId(customer_id).then(response => window.open('/superuser/users/' + response.data.data.user_id, '_blank'));
+  SessionUser.adminUser.customers.fromCustomerNumber
+    .getUserId(customer_id)
+    .then((response) => window.open("/superuser/users/" + response.data.data.user_id, "_blank"));
 };
 
 const truncateOrderField = (value, length = 25) => {
-  return SessionUser.functions.text.truncate(value ?? '', length);
+  return SessionUser.functions.text.truncate(value ?? "", length);
 };
 
 const normalizeInvoiceCollectionId = (invoiceCollectionId) => {
   const parsedInvoiceCollectionId = Number.parseInt(invoiceCollectionId, 10);
   return Number.isInteger(parsedInvoiceCollectionId) && parsedInvoiceCollectionId > 0
-      ? parsedInvoiceCollectionId
-      : null;
+    ? parsedInvoiceCollectionId
+    : null;
 };
 
 const getInvoiceCollectionResponseOrders = (response) => {
@@ -279,30 +296,24 @@ const isColumnCurrentlyBeingSortedBy = (column) => {
 
 const isCurrentSortDirectionAscending = () => {
   // Check if the current sort direction is ascending
-  return orderDirection.value === 'asc';
+  return orderDirection.value === "asc";
 };
 
 const isCurrentSortDirectionDescending = () => {
   // Check if the current sort direction is descending
-  return orderDirection.value === 'desc';
+  return orderDirection.value === "desc";
 };
 
 const onTableHeaderClick = (column) => {
   // Check if the column is already sorted
   if (orderBy.value === column) {
     // If the column is already sorted, toggle the direction
-    const direction = orderDirection.value === 'asc' ? 'desc' : 'asc';
-    setOrder(
-        column,
-        direction
-    );
+    const direction = orderDirection.value === "asc" ? "desc" : "asc";
+    setOrder(column, direction);
   } else {
     // If the column is not sorted, set the order to the new column and default to ascending
-    const direction = 'asc';
-    setOrder(
-        column,
-        direction
-    );
+    const direction = "asc";
+    setOrder(column, direction);
   }
   // Load the list
   loadList();
@@ -310,27 +321,35 @@ const onTableHeaderClick = (column) => {
 
 const tableHeaders = ref([
   {
-    name: 'id',
+    name: "id",
     title: SessionUser.objects.orders.columns.id.label,
     sortable: true,
   },
-    ...(props.isCustomerView) ? [] : [{
-    name: 'customer_id',
-    title: SessionUser.objects.orders.columns.customer_id.label,
-    sortable: true,
-  }],
-    ...(props.isCustomerView) ? [] : [{
-    name: 'cashier_id',
-    title: SessionUser.objects.orders.columns.cashier_id.label,
-    sortable: true,
-  }],
+  ...(props.isCustomerView
+    ? []
+    : [
+        {
+          name: "customer_id",
+          title: SessionUser.objects.orders.columns.customer_id.label,
+          sortable: true,
+        },
+      ]),
+  ...(props.isCustomerView
+    ? []
+    : [
+        {
+          name: "cashier_id",
+          title: SessionUser.objects.orders.columns.cashier_id.label,
+          sortable: true,
+        },
+      ]),
   {
-    name: 'department_id',
+    name: "department_id",
     title: SessionUser.objects.orders.columns.department_id.label,
     sortable: true,
   },
   {
-    name: 'reg_1',
+    name: "reg_1",
     title: SessionUser.functions.ucFirst(SessionUser.objects.vehicles.meta.labels.multiple),
     sortable: true,
   },
@@ -352,30 +371,30 @@ const tableHeaders = ref([
    *   },
    */
   {
-    name: 'reference',
+    name: "reference",
     title: SessionUser.objects.orders.columns.reference.label,
     sortable: true,
   },
   {
-    name: 'notes',
+    name: "notes",
     title: SessionUser.objects.orders.columns.notes.label,
     sortable: true,
   },
   {
-    name: 'po',
+    name: "po",
     title: SessionUser.objects.orders.columns.po.label,
     visible: (order) => {
-      return (canSeePoField() || SessionUser.canAccessAdmin())
+      return canSeePoField() || SessionUser.canAccessAdmin();
     },
   },
   {
-    name: 'created_at',
+    name: "created_at",
     title: SessionUser.objects.orders.columns.created_at.label,
     sortable: true,
   },
   {
-    name: 'total_net_amount',
-    title: t('tables.orders.amount'),
+    name: "total_net_amount",
+    title: t("tables.orders.amount"),
     sortable: false,
   },
   /**
@@ -386,8 +405,8 @@ const tableHeaders = ref([
    *   },
    */
   {
-    name: 'actions',
-    title: '',
+    name: "actions",
+    title: "",
     sortable: false,
   },
 ]);
@@ -397,7 +416,7 @@ const toggleDropdown = (object) => {
   // Check if the object is already in the active dropdown list
   if (active_dropdown_object_ids.value.includes(object.id)) {
     // If it is, remove it from the list
-    active_dropdown_object_ids.value = active_dropdown_object_ids.value.filter(id => id !== object.id);
+    active_dropdown_object_ids.value = active_dropdown_object_ids.value.filter((id) => id !== object.id);
   } else {
     // If it is not, add it to the list
     active_dropdown_object_ids.value.push(object.id);
@@ -418,7 +437,7 @@ const toggleInvoiceCollectionSelection = (invoiceCollectionId) => {
   // Check if the invoice collection is already selected
   if (selectedInvoiceCollections.value.includes(invoiceCollectionId)) {
     // If it is, remove it from the list
-    selectedInvoiceCollections.value = selectedInvoiceCollections.value.filter(id => id !== invoiceCollectionId);
+    selectedInvoiceCollections.value = selectedInvoiceCollections.value.filter((id) => id !== invoiceCollectionId);
   } else {
     // If it is not, add it to the list
     selectedInvoiceCollections.value.push(invoiceCollectionId);
@@ -451,9 +470,13 @@ const getUniqueInvoiceCollections = () => {
     return [];
   }
   // Get a list of unique invoice collections from the orders
-  return [...new Set(props.orders
-      .map(order => normalizeInvoiceCollectionId(order?.invoice_collection_id))
-      .filter(invoiceCollectionId => invoiceCollectionId !== null))];
+  return [
+    ...new Set(
+      props.orders
+        .map((order) => normalizeInvoiceCollectionId(order?.invoice_collection_id))
+        .filter((invoiceCollectionId) => invoiceCollectionId !== null)
+    ),
+  ];
 };
 
 const invoiceCollectionQueueInProgress = invoiceQueue.invoiceCollectionQueueInProgress;
@@ -481,16 +504,15 @@ const retryInvoiceCollection = (invoiceCollectionId) => {
 };
 
 const confirmCloseModal = () => {
-  Swal.fire(
-      {
-        title: 'Er du sikker på at du vil lukke vinduet?',
-        text: "Du vil ikke kunne få den visualiseret igen!",
-        icon: 'warning',
-        showCancelButton: true,
-        confirmButtonColor: '#3085d6',
-        cancelButtonColor: '#d33',
-        confirmButtonText: 'Ja, luk vinduet!'
-      }).then((result) => {
+  Swal.fire({
+    title: "Er du sikker på at du vil lukke vinduet?",
+    text: "Du vil ikke kunne få den visualiseret igen!",
+    icon: "warning",
+    showCancelButton: true,
+    confirmButtonColor: "#3085d6",
+    cancelButtonColor: "#d33",
+    confirmButtonText: "Ja, luk vinduet!",
+  }).then((result) => {
     if (result.isConfirmed) {
       isInvoiceMultipleCollectionsModalOpen.value = false;
     }
@@ -508,17 +530,17 @@ const ordersSortedByInvoiceCollection = computed(() => {
 
 const redirectDepartmentBookingPage = (bookingId, departmentId, newTab = true) => {
   // Send the user to the booking page (In a new tab)
-  window.open(`/admin/${departmentId}/modules/pos/bookings/${bookingId}`, newTab ? '_blank' : '_self');
+  window.open(`/admin/${departmentId}/modules/pos/bookings/${bookingId}`, newTab ? "_blank" : "_self");
 };
 
 const getVisibleOrdersSortedByInvoiceCollection = computed(() => {
   // Get the orders that are visible and sorted by invoice collection id
-  return ordersSortedByInvoiceCollection.value.filter(order => isObjectVisible(order));
+  return ordersSortedByInvoiceCollection.value.filter((order) => isObjectVisible(order));
 });
 
 const getVisibleOrders = computed(() => {
   // Get the orders that are visible
-  return props.orders.filter(order => isObjectVisible(order));
+  return props.orders.filter((order) => isObjectVisible(order));
 });
 
 const getOrdersByInvoiceCollection = (invoiceCollectionId) => {
@@ -528,11 +550,17 @@ const getOrdersByInvoiceCollection = (invoiceCollectionId) => {
   }
   // If the showOnlyWithIds prop is set, filter the orders by the ids in the array
   if (props.showOnlyWithIds.length > 0) {
-    return props.orders.filter(order => normalizeInvoiceCollectionId(order?.invoice_collection_id) === normalizedInvoiceCollectionId && props.showOnlyWithIds.includes(order.id));
+    return props.orders.filter(
+      (order) =>
+        normalizeInvoiceCollectionId(order?.invoice_collection_id) === normalizedInvoiceCollectionId &&
+        props.showOnlyWithIds.includes(order.id)
+    );
   }
   // Get the orders by invoice collection id
-  return props.orders.filter(order => normalizeInvoiceCollectionId(order?.invoice_collection_id) === normalizedInvoiceCollectionId);
-}
+  return props.orders.filter(
+    (order) => normalizeInvoiceCollectionId(order?.invoice_collection_id) === normalizedInvoiceCollectionId
+  );
+};
 
 const isFirstOrderInCollection = (invoiceCollectionId, order) => {
   // Check if the order is the first in the collection
@@ -545,9 +573,11 @@ const isFirstOrderInCollection = (invoiceCollectionId, order) => {
 const invoiceCollectionDetails = ref({}); // Used to provide the invoice collection booked id in the list
 const invoiceCollectionOrderCounts = ref({});
 const shouldLoadInvoiceCollectionOrderCounts = computed(() => {
-  return props.groupInvoiceCollection
-      && SessionUser.canAccessSuperUser()
-      && typeof SessionUser.objects?.collectedOrderInvoices?.get?.single === 'function';
+  return (
+    props.groupInvoiceCollection &&
+    SessionUser.canAccessSuperUser() &&
+    typeof SessionUser.objects?.collectedOrderInvoices?.get?.single === "function"
+  );
 });
 const resetInvoiceCollectionLookups = () => {
   invoiceCollectionDetails.value = {};
@@ -564,22 +594,26 @@ const loadInvoiceCollectionOrderCounts = async () => {
     return;
   }
   // Loop through each unique invoice collection id
-  await Promise.all(uniqueInvoiceCollections.map(async (invoiceCollectionId) => {
-    try {
-      // Get the orders for the invoice collection
-      const response = await SessionUser.objects.collectedOrderInvoices.get.single(invoiceCollectionId);
-      // Get the orders from the response
-      const orders = getInvoiceCollectionResponseOrders(response).filter(order => props.excludedOrderIds.includes(order.id) === false);
-      // Set the count for the invoice collection id
-      invoiceCollectionOrderCounts.value[invoiceCollectionId] = orders.length;
-      invoiceCollectionDetails.value[invoiceCollectionId] = response ?? null;
-    } catch (error) {
-      console.error('Error loading invoice collection order counts for: ' + invoiceCollectionId, error);
-      // Set the count for the invoice collection id to 0 if there was an error
-      invoiceCollectionOrderCounts.value[invoiceCollectionId] = 0;
-      invoiceCollectionDetails.value[invoiceCollectionId] = null;
-    }
-  }));
+  await Promise.all(
+    uniqueInvoiceCollections.map(async (invoiceCollectionId) => {
+      try {
+        // Get the orders for the invoice collection
+        const response = await SessionUser.objects.collectedOrderInvoices.get.single(invoiceCollectionId);
+        // Get the orders from the response
+        const orders = getInvoiceCollectionResponseOrders(response).filter(
+          (order) => props.excludedOrderIds.includes(order.id) === false
+        );
+        // Set the count for the invoice collection id
+        invoiceCollectionOrderCounts.value[invoiceCollectionId] = orders.length;
+        invoiceCollectionDetails.value[invoiceCollectionId] = response ?? null;
+      } catch (error) {
+        console.error("Error loading invoice collection order counts for: " + invoiceCollectionId, error);
+        // Set the count for the invoice collection id to 0 if there was an error
+        invoiceCollectionOrderCounts.value[invoiceCollectionId] = 0;
+        invoiceCollectionDetails.value[invoiceCollectionId] = null;
+      }
+    })
+  );
 };
 const getInvoiceCollectionOrderCount = (invoiceCollectionId) => {
   const normalizedInvoiceCollectionId = normalizeInvoiceCollectionId(invoiceCollectionId);
@@ -597,12 +631,12 @@ const getInvoiceCollectionDetails = (invoiceCollectionId) => {
   return null;
 };
 watch(
-    [() => props.orders, () => props.excludedOrderIds, () => props.groupInvoiceCollection],
-    () => {
-      // Load the invoice collection order counts when the orders change
-      loadInvoiceCollectionOrderCounts();
-    },
-    { immediate: true }
+  [() => props.orders, () => props.excludedOrderIds, () => props.groupInvoiceCollection],
+  () => {
+    // Load the invoice collection order counts when the orders change
+    loadInvoiceCollectionOrderCounts();
+  },
+  { immediate: true }
 );
 
 const isObjectVisible = (object) => {
@@ -631,7 +665,7 @@ const toggleAutoExpandAll = () => {
   // Clear the active dropdown list
   // This is to avoid confusion when toggling the auto expand all button
   active_dropdown_object_ids.value = [];
-}
+};
 
 const isSystemOrder = (order) => {
   const systemUserIds = SessionUser.objects.global.system_user_ids || [];
@@ -645,7 +679,7 @@ const isPendingHandheld = (order) => {
 const canSeePoField = () => {
   return true;
   //return (SessionUser.hasAttribute('usePONumbers') || SessionUser.hasPermission('department'))
-}
+};
 
 /**
  * Order actions modal
@@ -656,14 +690,14 @@ const isOrderActionsModalOpen = computed(() => {
 });
 const closeOrderActionsModal = () => {
   selectedOrderForActionsMenu.value = null;
-}
+};
 const openOrderActionsModal = (order) => {
   selectedOrderForActionsMenu.value = order;
 };
 
 const canEditTransaction = (order) => {
-  return (SessionUser.canAccessAdmin() || SessionUser.canAccessDepartment(order.department_id));
-}
+  return SessionUser.canAccessAdmin() || SessionUser.canAccessDepartment(order.department_id);
+};
 
 /**
  * Cashier name formatting
@@ -676,265 +710,306 @@ const formatCashierName = (order) => {
     return SessionUser.functions.ucFirst(SessionUser.objects.departments.meta.labels.single);
   }
   return order.cashier_name;
-}
+};
 </script>
 
 <template>
   <ViewportResponsiveWrapper>
     <template #desktop>
       <table class="table is-fullwidth">
-    <thead>
-    <tr v-if="props.invoiceView && props.allowSelectMultiple">
-      <td colspan="100%">
-        <div class="buttons">
-          <!-- Invoice selected collections -->
-          <button
-              class="button is-small"
-              @click="invoiceSelectedCollections()"
-              :disabled="selectedInvoiceCollections.length === 0 || isInvoiceQueueBusy"
-              >
-            {{ $t('global.invoice') }} {{ $t('global.selected_multiple') }} ({{selectedInvoiceCollections.length}})
-          </button>
-          <!-- Select / Unselect all invoice collections -->
-          <button
-              class="button is-small"
-              @click="selectAllInvoiceCollections()"
-              :class="{
-                  'is-light': !isInvoiceCollectionSelectedAll(),
-                  'is-dark': isInvoiceCollectionSelectedAll()
-              }"
-          >
-            {{ isInvoiceCollectionSelectedAll() ? $t('global.unselect') : $t('global.select') }} {{ $t('global.all').toLowerCase() }}
-          </button>
-          <!-- Expand / Collapse all invoice collections -->
-          <button
-              class="button is-small"
-              @click="toggleAutoExpandAll()"
-              :class="{
-                  'is-light': !isAutoExpandAll(),
-                  'is-dark': isAutoExpandAll()
-              }"
-          >
-            {{ isAutoExpandAll() ? $t('global.collapse') : $t('global.expand') }} {{ $t('global.all').toLowerCase() }}
-          </button>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <th class="is-narrow" v-if="props.invoiceView && props.allowSelectMultiple"></th>
-      <th class="is-narrow" v-if="props.invoiceView"></th>
-      <template v-for="tableHeaders in tableHeaders" :key="tableHeaders">
-        <template v-if="tableHeaders.visible === undefined || tableHeaders.visible(null) === true">
-          <th
-              v-if="tableHeaders.sortable"
-              :class="{
-                  'is-clickable': tableHeaders.sortable,
-                  'has-text-centered': tableHeaders.name === 'id'
-              }"
-              @click="onTableHeaderClick(tableHeaders.name)"
-          >
-            <span class="is-flex-wrap-nowrap">
-              <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
-              <span
-                  v-if="isColumnCurrentlyBeingSortedBy(tableHeaders.name)"
-                  :class="{
-                      'fas fa-sort-up': isCurrentSortDirectionAscending(),
-                      'fas fa-sort-down': isCurrentSortDirectionDescending()
-                  }"
-                  class="icon is-small"
-              />
-            </span>
-          </th>
-          <th
-              v-else
-              :class="{
-                  'has-text-centered': tableHeaders.name === 'id'
-              }"
-          >
-            <span class="is-flex-wrap-nowrap">
-              <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
-            </span>
-          </th>
-        </template>
-      </template>
-    </tr>
-    </thead>
-    <tbody>
-    <template
-        v-for="order in (props.groupInvoiceCollection ? getVisibleOrdersSortedByInvoiceCollection : getVisibleOrders)"
-        :key="order.id">
-      <!-- If grouping by invoice collection is enabled, show the invoice collection id -->
-      <template v-if="props.groupInvoiceCollection && doesOrderHaveInvoiceCollection(order) && isFirstOrderInCollection(order.invoice_collection_id, order)">
-        <tr>
-          <td colspan="13">
-            <div class="has-text-weight-bold">
-              Faktura samling ID: {{ order.invoice_collection_id }}
-              <span class="has-text-grey">( {{ SessionUser.objects.global.language.showing }} {{ getOrdersByInvoiceCollection(order.invoice_collection_id).length }} {{ SessionUser.objects.global.language.showing_of_separator }} {{ getInvoiceCollectionOrderCount(order.invoice_collection_id) }} {{ SessionUser.objects.orders.meta.labels.multiple.toLowerCase() }} )</span>
-            </div>
-          </td>
-          <!-- Spacer -->
-          <td colspan="2">
-            <!-- Total net amount for the invoice collection -->
-            <span class="has-text-weight-bold">
-              {{ SessionUser.functions.currency.toLocal(getOrdersByInvoiceCollection(order.invoice_collection_id).reduce((sum, order) => sum + order.total_net_amount, 0).toFixed(2)) }}
-            </span>
-          </td>
-          <!-- Actions for the invoice collection -->
-          <td class="is-narrow">
-            <ActionSettingsWheelButton
-              v-bind:invoice_collection_id="order.invoice_collection_id"
-              >
-              <template #actions>
-              </template>
-            </ActionSettingsWheelButton>
-          </td>
-        </tr>
-        <!-- Warning, if there's orders in the collection that are filtered out -->
-        <tr v-if="getInvoiceCollectionOrderCount(order.invoice_collection_id) > getOrdersByInvoiceCollection(order.invoice_collection_id).length">
-          <td colspan="100%">
-            <div class="message is-warning">
-              <div class="message-body">
-                <span class="has-text-weight-bold">Bemærk:</span> Der er ordrer i denne faktura samling, som ikke er synlige pga. filtre.
-                <br>
-                <span class="has-text-weight-bold">Disse {{ getInvoiceCollectionOrderCount(order.invoice_collection_id) - getOrdersByInvoiceCollection(order.invoice_collection_id).length }} er ikke vist, men vil muligvis blive faktureret alligevel.</span>
-              </div>
-            </div>
-          </td>
-        </tr>
-      </template>
-      <tr v-if="isObjectVisible(order)" :class="{ 'has-background-info-light' : isSystemOrder(order) }">
-        <template v-if="props.invoiceView && props.allowSelectMultiple">
-          <td class="is-narrow">
-            <button
-                class="button is-small"
-                @click="toggleInvoiceCollectionSelection(order.invoice_collection_id)"
-                :class="{
-                    'is-light': !isInvoiceCollectionSelected(parseInt(order.invoice_collection_id)),
-                    'is-dark': isInvoiceCollectionSelected(parseInt(order.invoice_collection_id))
-                }"
+        <thead>
+          <tr v-if="props.invoiceView && props.allowSelectMultiple">
+            <td colspan="100%">
+              <div class="buttons">
+                <!-- Invoice selected collections -->
+                <button
+                  class="button is-small"
+                  @click="invoiceSelectedCollections()"
+                  :disabled="selectedInvoiceCollections.length === 0 || isInvoiceQueueBusy"
                 >
-              {{ isInvoiceCollectionSelected(parseInt(order.invoice_collection_id)) ? SessionUser.objects.global.language.unselect : SessionUser.objects.global.language.select }}
-            </button>
-          </td>
-        </template>
-        <template v-if="props.invoiceView">
-          <td class="is-narrow">
-            <button
-                class="button is-small"
-                @click="toggleDropdown(order)"
+                  {{ $t("global.invoice") }} {{ $t("global.selected_multiple") }} ({{
+                    selectedInvoiceCollections.length
+                  }})
+                </button>
+                <!-- Select / Unselect all invoice collections -->
+                <button
+                  class="button is-small"
+                  @click="selectAllInvoiceCollections()"
+                  :class="{
+                    'is-light': !isInvoiceCollectionSelectedAll(),
+                    'is-dark': isInvoiceCollectionSelectedAll(),
+                  }"
+                >
+                  {{ isInvoiceCollectionSelectedAll() ? $t("global.unselect") : $t("global.select") }}
+                  {{ $t("global.all").toLowerCase() }}
+                </button>
+                <!-- Expand / Collapse all invoice collections -->
+                <button
+                  class="button is-small"
+                  @click="toggleAutoExpandAll()"
+                  :class="{
+                    'is-light': !isAutoExpandAll(),
+                    'is-dark': isAutoExpandAll(),
+                  }"
+                >
+                  {{ isAutoExpandAll() ? $t("global.collapse") : $t("global.expand") }}
+                  {{ $t("global.all").toLowerCase() }}
+                </button>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <th class="is-narrow" v-if="props.invoiceView && props.allowSelectMultiple"></th>
+            <th class="is-narrow" v-if="props.invoiceView"></th>
+            <template v-for="tableHeaders in tableHeaders" :key="tableHeaders">
+              <template v-if="tableHeaders.visible === undefined || tableHeaders.visible(null) === true">
+                <th
+                  v-if="tableHeaders.sortable"
+                  :class="{
+                    'is-clickable': tableHeaders.sortable,
+                    'has-text-centered': tableHeaders.name === 'id',
+                  }"
+                  @click="onTableHeaderClick(tableHeaders.name)"
+                >
+                  <span class="is-flex-wrap-nowrap">
+                    <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
+                    <span
+                      v-if="isColumnCurrentlyBeingSortedBy(tableHeaders.name)"
+                      :class="{
+                        'fas fa-sort-up': isCurrentSortDirectionAscending(),
+                        'fas fa-sort-down': isCurrentSortDirectionDescending(),
+                      }"
+                      class="icon is-small"
+                    />
+                  </span>
+                </th>
+                <th
+                  v-else
+                  :class="{
+                    'has-text-centered': tableHeaders.name === 'id',
+                  }"
+                >
+                  <span class="is-flex-wrap-nowrap">
+                    <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
+                  </span>
+                </th>
+              </template>
+            </template>
+          </tr>
+        </thead>
+        <tbody>
+          <template
+            v-for="order in props.groupInvoiceCollection ? getVisibleOrdersSortedByInvoiceCollection : getVisibleOrders"
+            :key="order.id"
+          >
+            <!-- If grouping by invoice collection is enabled, show the invoice collection id -->
+            <template
+              v-if="
+                props.groupInvoiceCollection &&
+                doesOrderHaveInvoiceCollection(order) &&
+                isFirstOrderInCollection(order.invoice_collection_id, order)
+              "
             >
-              <span
-                  class="icon"
-                  :class="isDropdownActive(order) ? 'has-text-link' : ''"
-                  :style="isDropdownActive(order) ? 'transform: rotate(90deg);' : ''"
+              <tr>
+                <td colspan="13">
+                  <div class="has-text-weight-bold">
+                    Faktura samling ID: {{ order.invoice_collection_id }}
+                    <span class="has-text-grey"
+                      >( {{ SessionUser.objects.global.language.showing }}
+                      {{ getOrdersByInvoiceCollection(order.invoice_collection_id).length }}
+                      {{ SessionUser.objects.global.language.showing_of_separator }}
+                      {{ getInvoiceCollectionOrderCount(order.invoice_collection_id) }}
+                      {{ SessionUser.objects.orders.meta.labels.multiple.toLowerCase() }} )</span
+                    >
+                  </div>
+                </td>
+                <!-- Spacer -->
+                <td colspan="2">
+                  <!-- Total net amount for the invoice collection -->
+                  <span class="has-text-weight-bold">
+                    {{
+                      SessionUser.functions.currency.toLocal(
+                        getOrdersByInvoiceCollection(order.invoice_collection_id)
+                          .reduce((sum, order) => sum + order.total_net_amount, 0)
+                          .toFixed(2)
+                      )
+                    }}
+                  </span>
+                </td>
+                <!-- Actions for the invoice collection -->
+                <td class="is-narrow">
+                  <ActionSettingsWheelButton v-bind:invoice_collection_id="order.invoice_collection_id">
+                    <template #actions> </template>
+                  </ActionSettingsWheelButton>
+                </td>
+              </tr>
+              <!-- Warning, if there's orders in the collection that are filtered out -->
+              <tr
+                v-if="
+                  getInvoiceCollectionOrderCount(order.invoice_collection_id) >
+                  getOrdersByInvoiceCollection(order.invoice_collection_id).length
+                "
               >
-                <!-- Dropdown icon -->
-                <i class="fas fa-angle-right"></i>
-              </span>
-            </button>
-          </td>
-        </template>
-        <td>
-          <ColorIndicator
-              v-bind:color_class="getOrderInvoiceStatusBarColor(order)"
-              v-bind:icon_class="isPendingHandheld(order) ? 'fas fa-mobile-alt' : 'fas fa-circle'"
-              v-bind:is_narrow="true"
-              v-bind:label="{
-                text: order.id,
-                classes: [],
-                max_length: 7,
-              }"
-              v-bind:visibility="{
-                icon: true,
-                dropdown: true,
-              }"
-              v-bind:dropdown_content="{
-                title: null,
-                buttons_title: null,
-                content: [
-                    // Transaction
-                    {
-                      text: SessionUser.functions.ucFirst(SessionUser.objects.orders.meta.labels.single),
-                      action: () => {
-                        redirectDepartmentOrderPage(order.id, order.department_id);
+                <td colspan="100%">
+                  <div class="message is-warning">
+                    <div class="message-body">
+                      <span class="has-text-weight-bold">Bemærk:</span> Der er ordrer i denne faktura samling, som ikke
+                      er synlige pga. filtre.
+                      <br />
+                      <span class="has-text-weight-bold"
+                        >Disse
+                        {{
+                          getInvoiceCollectionOrderCount(order.invoice_collection_id) -
+                          getOrdersByInvoiceCollection(order.invoice_collection_id).length
+                        }}
+                        er ikke vist, men vil muligvis blive faktureret alligevel.</span
+                      >
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </template>
+            <tr v-if="isObjectVisible(order)" :class="{ 'has-background-info-light': isSystemOrder(order) }">
+              <template v-if="props.invoiceView && props.allowSelectMultiple">
+                <td class="is-narrow">
+                  <button
+                    class="button is-small"
+                    @click="toggleInvoiceCollectionSelection(order.invoice_collection_id)"
+                    :class="{
+                      'is-light': !isInvoiceCollectionSelected(parseInt(order.invoice_collection_id)),
+                      'is-dark': isInvoiceCollectionSelected(parseInt(order.invoice_collection_id)),
+                    }"
+                  >
+                    {{
+                      isInvoiceCollectionSelected(parseInt(order.invoice_collection_id))
+                        ? SessionUser.objects.global.language.unselect
+                        : SessionUser.objects.global.language.select
+                    }}
+                  </button>
+                </td>
+              </template>
+              <template v-if="props.invoiceView">
+                <td class="is-narrow">
+                  <button class="button is-small" @click="toggleDropdown(order)">
+                    <span
+                      class="icon"
+                      :class="isDropdownActive(order) ? 'has-text-link' : ''"
+                      :style="isDropdownActive(order) ? 'transform: rotate(90deg);' : ''"
+                    >
+                      <!-- Dropdown icon -->
+                      <i class="fas fa-angle-right"></i>
+                    </span>
+                  </button>
+                </td>
+              </template>
+              <td>
+                <ColorIndicator
+                  v-bind:color_class="getOrderInvoiceStatusBarColor(order)"
+                  v-bind:icon_class="isPendingHandheld(order) ? 'fas fa-mobile-alt' : 'fas fa-circle'"
+                  v-bind:is_narrow="true"
+                  v-bind:label="{
+                    text: order.id,
+                    classes: [],
+                    max_length: 7,
+                  }"
+                  v-bind:visibility="{
+                    icon: true,
+                    dropdown: true,
+                  }"
+                  v-bind:dropdown_content="{
+                    title: null,
+                    buttons_title: null,
+                    content: [
+                      // Transaction
+                      {
+                        text: SessionUser.functions.ucFirst(SessionUser.objects.orders.meta.labels.single),
+                        action: () => {
+                          redirectDepartmentOrderPage(order.id, order.department_id);
+                        },
+                        ...(SessionUser.canAccessSuperUser() ? {} : { disabled: true }),
+                        button_classes: ['no-underline-text', 'is-text'],
+                        button: true,
+                        button_text: order.id,
+                        v_centered: true,
                       },
-                      ...(SessionUser.canAccessSuperUser() ? {} : { disabled: true }),
-                      button_classes: ['no-underline-text', 'is-text'],
-                      button: true,
-                      button_text: order.id,
-                      v_centered: true,
-                    },
-                    // Invoice collection
-                    {
-                      text: SessionUser.objects.global.language.invoice + ' ' + SessionUser.objects.global.language.collection.toLowerCase(),
-                      action: () => {
-                        redirectSuperUserInvoiceCollectionPage(order.invoice_collection_id);
+                      // Invoice collection
+                      {
+                        text:
+                          SessionUser.objects.global.language.invoice +
+                          ' ' +
+                          SessionUser.objects.global.language.collection.toLowerCase(),
+                        action: () => {
+                          redirectSuperUserInvoiceCollectionPage(order.invoice_collection_id);
+                        },
+                        ...(SessionUser.canAccessSuperUser() ? {} : { disabled: true }),
+                        button_classes: ['no-underline-text', 'is-text'],
+                        button: true,
+                        button_text: order.invoice_collection_id,
+                        v_centered: true,
                       },
-                      ...(SessionUser.canAccessSuperUser() ? {} : { disabled: true }),
-                      button_classes: ['no-underline-text', 'is-text'],
-                      button: true,
-                      button_text: order.invoice_collection_id,
-                      v_centered: true,
-                    },
-                    /**
-                    * // Completed status
-                    *                     {
-                    *                       text: SessionUser.objects.orders.columns.completed_at.label,
-                    *                       action: () => {
-                    *                         redirectDepartmentOrderPage(order.id, order.department_id);
-                    *                       },
-                    *                       ...(SessionUser.canAccessSuperUser() ? {} : { disabled: true }),
-                    *                       button_classes: ['no-underline-text', 'is-text', ...(order.completed_at !== null ? [] : ['has-text-warning'])],
-                    *                       button: true,
-                    *                       button_text: (order.completed_at !== null ? SessionUser.objects.global.language.yes : SessionUser.objects.global.language.no),
-                    *                       v_centered: true,
-                    *                     },
-                    */
+                      /**
+                       * // Completed status
+                       *                     {
+                       *                       text: SessionUser.objects.orders.columns.completed_at.label,
+                       *                       action: () => {
+                       *                         redirectDepartmentOrderPage(order.id, order.department_id);
+                       *                       },
+                       *                       ...(SessionUser.canAccessSuperUser() ? {} : { disabled: true }),
+                       *                       button_classes: ['no-underline-text', 'is-text', ...(order.completed_at !== null ? [] : ['has-text-warning'])],
+                       *                       button: true,
+                       *                       button_text: (order.completed_at !== null ? SessionUser.objects.global.language.yes : SessionUser.objects.global.language.no),
+                       *                       v_centered: true,
+                       *                     },
+                       */
 
-                    // Handheld status
-                    ...(isPendingHandheld(order) ? [{
-                      text: SessionUser.objects.global.language.handheld_pending_order,
-                      action: () => {},
-                      button_classes: ['no-underline-text', 'is-text', 'has-text-warning'],
-                      button: true,
-                      button_text: SessionUser.objects.global.language.confirmation_needed,
-                      v_centered: true,
-                    }] : []),
-                ],
-                buttons: [],
-              }"
-          />
-        </td>
-        <td v-if="!props.isCustomerView">
-          <ColorIndicator
-              v-bind:label="{
-                text: order.customer_name,
-                classes: [],
-                max_length: 7,
-              }"
-              v-bind:visibility="{
-                icon: false,
-                dropdown: true
-              }"
-              v-bind:dropdown_content="{
-                title: null,
-                buttons_title: null,
-                content: [
-                    {
-                      text: order.customer_name,
-                      action: () => {
-                        clickUser(order.customer_id);
+                      // Handheld status
+                      ...(isPendingHandheld(order)
+                        ? [
+                            {
+                              text: SessionUser.objects.global.language.handheld_pending_order,
+                              action: () => {},
+                              button_classes: ['no-underline-text', 'is-text', 'has-text-warning'],
+                              button: true,
+                              button_text: SessionUser.objects.global.language.confirmation_needed,
+                              v_centered: true,
+                            },
+                          ]
+                        : []),
+                    ],
+                    buttons: [],
+                  }"
+                />
+              </td>
+              <td v-if="!props.isCustomerView">
+                <ColorIndicator
+                  v-bind:label="{
+                    text: order.customer_name,
+                    classes: [],
+                    max_length: 7,
+                  }"
+                  v-bind:visibility="{
+                    icon: false,
+                    dropdown: true,
+                  }"
+                  v-bind:dropdown_content="{
+                    title: null,
+                    buttons_title: null,
+                    content: [
+                      {
+                        text: order.customer_name,
+                        action: () => {
+                          clickUser(order.customer_id);
+                        },
+                        ...(SessionUser.canAccessSuperUser() ? {} : { disabled: true }),
+                        button: true,
+                        button_text: 'Vis kunde',
                       },
-                      ...(SessionUser.canAccessSuperUser() ? {} : { disabled: true }),
-                      button: true,
-                      button_text: 'Vis kunde',
-                    }
-                ],
-                buttons: [],
-              }"
-          />
-        </td>
-        <!--
+                    ],
+                    buttons: [],
+                  }"
+                />
+              </td>
+              <!--
         <td>
           <span
               @mouseover="showPopper(
@@ -951,91 +1026,91 @@ const formatCashierName = (order) => {
         {{ order.customer_name }}
       </span>
         </td> -->
-        <td v-if="!props.isCustomerView">
-          <template v-if="!isSystemOrder(order)">{{ formatCashierName(order) }}</template>
-          <template v-else><span class="has-text-grey-light">System</span></template>
-        </td>
-        <td>{{ getDepartmentName(order.department_id) }}</td>
-        <!-- Vehicles -->
-        <td>
-          <p>
-            <EditableTableColumn
-                :componentWrapper="'div'"
+              <td v-if="!props.isCustomerView">
+                <template v-if="!isSystemOrder(order)">{{ formatCashierName(order) }}</template>
+                <template v-else><span class="has-text-grey-light">System</span></template>
+              </td>
+              <td>{{ getDepartmentName(order.department_id) }}</td>
+              <!-- Vehicles -->
+              <td>
+                <p>
+                  <EditableTableColumn
+                    :componentWrapper="'div'"
+                    :object="order"
+                    :loadList="loadList"
+                    column="reg_1"
+                    :parse-function="(value) => value || t('global.no_data')"
+                    :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
+                    :permissionCheckFunction="(orderobj) => canEditTransaction(order)"
+                  />
+                </p>
+                <p>
+                  <EditableTableColumn
+                    :componentWrapper="'div'"
+                    :object="order"
+                    :loadList="loadList"
+                    column="reg_2"
+                    :parse-function="(value) => value || '-'"
+                    :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
+                    :permissionCheckFunction="(bookingobj) => canEditTransaction(order)"
+                  />
+                </p>
+                <p v-show="order.reg_3">
+                  <EditableTableColumn
+                    :componentWrapper="'div'"
+                    :object="order"
+                    :loadList="loadList"
+                    column="reg_3"
+                    :parse-function="(value) => value || '-'"
+                    :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
+                    :permissionCheckFunction="(bookingobj) => canEditTransaction(order)"
+                  />
+                </p>
+              </td>
+              <EditableTableColumn
                 :object="order"
                 :loadList="loadList"
-                column="reg_1"
-                :parse-function="(value) => value || t('global.no_data')"
+                column="reference"
+                :hover-text="order.reference"
+                :parse-function="(value) => truncateOrderField(value, 10)"
                 :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-                :permissionCheckFunction="(orderobj) => canEditTransaction(order)"
-            />
-          </p>
-          <p>
-            <EditableTableColumn
-                :componentWrapper="'div'"
+                :permission-check-function="() => true"
+              />
+              <EditableTableColumn
                 :object="order"
                 :loadList="loadList"
-                column="reg_2"
-                :parse-function="(value) => value || '-'"
+                column="notes"
+                :parse-function="(value) => truncateOrderField(value, 10)"
+                :hover-text="order.notes"
                 :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-                :permissionCheckFunction="(bookingobj) => canEditTransaction(order)"
-            />
-          </p>
-          <p v-show="order.reg_3">
-            <EditableTableColumn
-                :componentWrapper="'div'"
+                :permission-check-function="() => SessionUser.canAccessAdmin()"
+              />
+              <EditableTableColumn
+                v-if="canSeePoField() || SessionUser.canAccessAdmin()"
                 :object="order"
                 :loadList="loadList"
-                column="reg_3"
-                :parse-function="(value) => value || '-'"
+                column="po"
+                :hover-text="order.po"
+                :parse-function="(value) => truncateOrderField(value, 10)"
                 :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-                :permissionCheckFunction="(bookingobj) => canEditTransaction(order)"
-            />
-          </p>
-        </td>
-        <EditableTableColumn
-            :object="order"
-            :loadList="loadList"
-            column="reference"
-            :hover-text="order.reference"
-            :parse-function="(value) => truncateOrderField(value, 10)"
-            :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-            :permission-check-function="() => true"
-        />
-          <EditableTableColumn
-              :object="order"
-              :loadList="loadList"
-              column="notes"
-              :parse-function="(value) => truncateOrderField(value, 10)"
-              :hover-text="order.notes"
-              :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-              :permission-check-function="() => SessionUser.canAccessAdmin()"
-          />
-        <EditableTableColumn
-              v-if="canSeePoField() || SessionUser.canAccessAdmin()"
-              :object="order"
-              :loadList="loadList"
-              column="po"
-              :hover-text="order.po"
-              :parse-function="(value) => truncateOrderField(value, 10)"
-              :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-              :permission-check-function="() => canSeePoField() || SessionUser.canAccessAdmin()"
-        />
-        <td>{{ order.created_at }}</td>
-        <td>{{ SessionUser.functions.currency.toLocal(order.total_net_amount) }}</td>
-        <!--<td>{{ order.completed_at }}</td>-->
-          <td class="is-narrow">
-            <div class="buttons">
-            <!-- Dropdown -->
-            <ActionSettingsWheelButton
-            v-bind:user_id="order.user_id"
-            v-bind:order_id="order.id"
-            v-bind:invoice_collection_id="order.invoice_collection_id"
-            v-bind:reg_1="order.reg_1"
-            :refreshFunction="loadList"
-            @deleted="loadList()"
-            >
-              <template v-slot:actions>
-                <!--
+                :permission-check-function="() => canSeePoField() || SessionUser.canAccessAdmin()"
+              />
+              <td>{{ order.created_at }}</td>
+              <td>{{ SessionUser.functions.currency.toLocal(order.total_net_amount) }}</td>
+              <!--<td>{{ order.completed_at }}</td>-->
+              <td class="is-narrow">
+                <div class="buttons">
+                  <!-- Dropdown -->
+                  <ActionSettingsWheelButton
+                    v-bind:user_id="order.user_id"
+                    v-bind:order_id="order.id"
+                    v-bind:invoice_collection_id="order.invoice_collection_id"
+                    v-bind:reg_1="order.reg_1"
+                    :refreshFunction="loadList"
+                    @deleted="loadList()"
+                  >
+                    <template v-slot:actions>
+                      <!--
                 Go to the order page, in a new tab
                 <action-settings-wheel-item
                   label="Se transaktion i ny fane"
@@ -1051,44 +1126,49 @@ const formatCashierName = (order) => {
                   :disabled="!doesOrderHaveInvoiceCollection(order)"
                   />
                 -->
-              </template>
-            </ActionSettingsWheelButton>
+                    </template>
+                  </ActionSettingsWheelButton>
 
-            <!-- Attachments -->
-            <ActionSettingsWheelButton v-show="(getOrderAttachments(order).length > 0 && (SessionUser.hasPermission('download_order_attachments_own') || SessionUser.hasPermission('download_order_attachments')))" :icon="'fas fa-paperclip'">
-              <template v-slot:actions>
-                <template v-for="attachment in getOrderAttachments(order)" :key="attachment.id">
-                  <action-settings-wheel-item
-                      :label="getAttachmentLabel(attachment)"
-                      icon="fas fa-paperclip"
-                      :click-action="() => downloadAttachment(attachment.id, order.id)"
-                      :disabled="false"
-                  />
-                </template>
-              </template>
-            </ActionSettingsWheelButton>
-            </div>
-          </td>
-      </tr>
-      <!-- Dropdown content (if the invoice view is enabled,and the dropdown is active) -->
-      <tr v-if="props.invoiceView && isDropdownActive(order)">
-        <!-- Order line items -->
-        <td colspan="100%">
-          <!-- Content -->
-          <div class="content">
-            <OrderContentTable
-                :order-id="order.id"
-            />
-          </div>
-        </td>
-      </tr>
-    </template>
-    </tbody>
-    <tfoot>
-    <tr>
-      <td colspan="100%">{{ t('tables.showing') }} {{ getVisibleOrders.length }} {{SessionUser.objects.orders.meta.labels.entries.toLowerCase()}}</td>
-    </tr>
-    </tfoot>
+                  <!-- Attachments -->
+                  <ActionSettingsWheelButton
+                    v-show="shouldShowOrderAttachmentsButton(order)"
+                    :icon="'fas fa-paperclip'"
+                    :data-testid="`pos-order-list-attachments-${order.id}`"
+                  >
+                    <template v-slot:actions>
+                      <template v-for="attachment in getOrderAttachments(order)" :key="attachment.id">
+                        <action-settings-wheel-item
+                          :label="getAttachmentLabel(attachment)"
+                          icon="fas fa-paperclip"
+                          :click-action="() => downloadAttachment(attachment.id, order.id)"
+                          :disabled="false"
+                        />
+                      </template>
+                    </template>
+                  </ActionSettingsWheelButton>
+                </div>
+              </td>
+            </tr>
+            <!-- Dropdown content (if the invoice view is enabled,and the dropdown is active) -->
+            <tr v-if="props.invoiceView && isDropdownActive(order)">
+              <!-- Order line items -->
+              <td colspan="100%">
+                <!-- Content -->
+                <div class="content">
+                  <OrderContentTable :order-id="order.id" />
+                </div>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+        <tfoot>
+          <tr>
+            <td colspan="100%">
+              {{ t("tables.showing") }} {{ getVisibleOrders.length }}
+              {{ SessionUser.objects.orders.meta.labels.entries.toLowerCase() }}
+            </td>
+          </tr>
+        </tfoot>
       </table>
     </template>
     <!-- Treat tablet the same as mobile to ensure visibility on larger phones/tablets -->
@@ -1098,31 +1178,42 @@ const formatCashierName = (order) => {
         <div class="column is-full" v-if="props.invoiceView && props.allowSelectMultiple">
           <div class="buttons">
             <button
-                class="button is-small"
-                @click="invoiceSelectedCollections()"
-                :disabled="selectedInvoiceCollections.length === 0 || isInvoiceQueueBusy"
+              class="button is-small"
+              @click="invoiceSelectedCollections()"
+              :disabled="selectedInvoiceCollections.length === 0 || isInvoiceQueueBusy"
             >
-              {{SessionUser.objects.global.language.invoice}} {{SessionUser.objects.global.language.selected_multiple}} ({{selectedInvoiceCollections.length}})
+              {{ SessionUser.objects.global.language.invoice }}
+              {{ SessionUser.objects.global.language.selected_multiple }} ({{ selectedInvoiceCollections.length }})
             </button>
             <button
-                class="button is-small"
-                @click="selectAllInvoiceCollections()"
-                :class="{
-                  'is-light': !isInvoiceCollectionSelectedAll(),
-                  'is-dark': isInvoiceCollectionSelectedAll()
-                }"
+              class="button is-small"
+              @click="selectAllInvoiceCollections()"
+              :class="{
+                'is-light': !isInvoiceCollectionSelectedAll(),
+                'is-dark': isInvoiceCollectionSelectedAll(),
+              }"
             >
-              {{ isInvoiceCollectionSelectedAll() ? SessionUser.objects.global.language.unselect : SessionUser.objects.global.language.select }} {{ SessionUser.objects.global.language.all.toLowerCase() }}
+              {{
+                isInvoiceCollectionSelectedAll()
+                  ? SessionUser.objects.global.language.unselect
+                  : SessionUser.objects.global.language.select
+              }}
+              {{ SessionUser.objects.global.language.all.toLowerCase() }}
             </button>
             <button
-                class="button is-small"
-                @click="toggleAutoExpandAll()"
-                :class="{
-                  'is-light': !isAutoExpandAll(),
-                  'is-dark': isAutoExpandAll()
-                }"
+              class="button is-small"
+              @click="toggleAutoExpandAll()"
+              :class="{
+                'is-light': !isAutoExpandAll(),
+                'is-dark': isAutoExpandAll(),
+              }"
             >
-              {{ isAutoExpandAll() ? SessionUser.objects.global.language.collapse : SessionUser.objects.global.language.expand }} {{ SessionUser.objects.global.language.all.toLowerCase() }}
+              {{
+                isAutoExpandAll()
+                  ? SessionUser.objects.global.language.collapse
+                  : SessionUser.objects.global.language.expand
+              }}
+              {{ SessionUser.objects.global.language.all.toLowerCase() }}
             </button>
           </div>
         </div>
@@ -1130,9 +1221,20 @@ const formatCashierName = (order) => {
         <!-- Orders as cards -->
         <template v-for="order in getVisibleOrders" :key="order.id">
           <div class="column is-full">
-            <WhiteBoxCard :forceStateFooter="false" :forceState="false" :defaultOpen="false" :toggleable="true" class="is-clickable" :has-hover-effect="true" :hasSelectionStyle="false">
+            <WhiteBoxCard
+              :forceStateFooter="false"
+              :forceState="false"
+              :defaultOpen="false"
+              :toggleable="true"
+              class="is-clickable"
+              :has-hover-effect="true"
+              :hasSelectionStyle="false"
+            >
               <template #header>
-                <div class="card-header-title is-flex is-justify-content-space-between is-align-items-center" style="width: 100%;">
+                <div
+                  class="card-header-title is-flex is-justify-content-space-between is-align-items-center"
+                  style="width: 100%"
+                >
                   <div>
                     <div>
                       <small>
@@ -1148,7 +1250,9 @@ const formatCashierName = (order) => {
                     </div>
                   </div>
                   <div class="is-pulled-right" style="width: fit-content">
-                    <div class="columns is-multiline is-mobile is-gapless is-justify-content-flex-end is-align-items-center">
+                    <div
+                      class="columns is-multiline is-mobile is-gapless is-justify-content-flex-end is-align-items-center"
+                    >
                       <div class="column is-narrow has-text-right mb-2">
                         <span class="tag is-light is-small mr-1">
                           <small>{{ getDepartmentName(order.department_id) }}</small>
@@ -1156,9 +1260,17 @@ const formatCashierName = (order) => {
                       </div>
                       <div class="column is-12 has-text-right mb-2">
                         <span class="buttons is-right mr-1">
-                          <button v-if="props.invoiceView && props.allowSelectMultiple" class="button is-light is-small" @click="toggleInvoiceCollectionSelection(order.invoice_collection_id)"
-                                  :class="{ 'is-dark': isInvoiceCollectionSelected(parseInt(order.invoice_collection_id)) }">
-                            {{ isInvoiceCollectionSelected(parseInt(order.invoice_collection_id)) ? SessionUser.objects.global.language.unselect : SessionUser.objects.global.language.select }}
+                          <button
+                            v-if="props.invoiceView && props.allowSelectMultiple"
+                            class="button is-light is-small"
+                            @click="toggleInvoiceCollectionSelection(order.invoice_collection_id)"
+                            :class="{ 'is-dark': isInvoiceCollectionSelected(parseInt(order.invoice_collection_id)) }"
+                          >
+                            {{
+                              isInvoiceCollectionSelected(parseInt(order.invoice_collection_id))
+                                ? SessionUser.objects.global.language.unselect
+                                : SessionUser.objects.global.language.select
+                            }}
                           </button>
                         </span>
                       </div>
@@ -1170,29 +1282,48 @@ const formatCashierName = (order) => {
                 <div class="card-content">
                   <div class="columns is-mobile is-multiline">
                     <div class="column is-12">
-                      <small>{{ order.reg_1 }}<span v-if="order.reg_2">, {{ order.reg_2 }}</span><span v-if="order.reg_3">, {{ order.reg_3 }}</span></small>
+                      <small
+                        >{{ order.reg_1 }}<span v-if="order.reg_2">, {{ order.reg_2 }}</span
+                        ><span v-if="order.reg_3">, {{ order.reg_3 }}</span></small
+                      >
                     </div>
                     <div class="column is-12">
-                      <strong><small>{{ order.created_at }}</small></strong>
+                      <strong
+                        ><small>{{ order.created_at }}</small></strong
+                      >
                     </div>
                     <div class="column is-12">
-                      <small>{{ SessionUser.objects.orders.columns.total_net_amount.label || 'Total' }}: {{ SessionUser.functions.currency.toLocal(order.total_net_amount) }}</small>
+                      <small
+                        >{{ SessionUser.objects.orders.columns.total_net_amount.label || "Total" }}:
+                        {{ SessionUser.functions.currency.toLocal(order.total_net_amount) }}</small
+                      >
                     </div>
                     <div class="column is-12" v-if="order.completed_at">
-                      <small>{{ SessionUser.objects.orders.columns.completed_at.label }}: {{ order.completed_at }}</small>
+                      <small
+                        >{{ SessionUser.objects.orders.columns.completed_at.label }}: {{ order.completed_at }}</small
+                      >
                     </div>
                     <div class="column is-12" v-if="isPendingHandheld(order)">
-                      <small class="has-text-warning">{{ SessionUser.objects.global.language.handheld_pending_order }} • {{ SessionUser.objects.global.language.confirmation_needed }}</small>
+                      <small class="has-text-warning"
+                        >{{ SessionUser.objects.global.language.handheld_pending_order }} •
+                        {{ SessionUser.objects.global.language.confirmation_needed }}</small
+                      >
                     </div>
                   </div>
                 </div>
               </template>
               <template #content>
                 <div>
-                  <p v-show="!!order.po"><strong>PO:</strong> {{ order.po || '-' }}</p>
-                  <p v-show="!!order.reference"><strong>{{ SessionUser.objects.orders.columns.reference?.label || 'Reference' }}:</strong> {{ order.reference || '-' }}</p>
-                  <p v-show="!!order.notes"><strong>{{ SessionUser.objects.orders.columns.notes?.label || 'Noter' }}:</strong> {{ order.notes || '-' }}</p>
-                  <hr/>
+                  <p v-show="!!order.po"><strong>PO:</strong> {{ order.po || "-" }}</p>
+                  <p v-show="!!order.reference">
+                    <strong>{{ SessionUser.objects.orders.columns.reference?.label || "Reference" }}:</strong>
+                    {{ order.reference || "-" }}
+                  </p>
+                  <p v-show="!!order.notes">
+                    <strong>{{ SessionUser.objects.orders.columns.notes?.label || "Noter" }}:</strong>
+                    {{ order.notes || "-" }}
+                  </p>
+                  <hr />
                   <!-- Actions and attachments -->
                   <div class="buttons is-right">
                     <ActionSettingsWheelButton
@@ -1206,14 +1337,19 @@ const formatCashierName = (order) => {
                     >
                       <template #actions></template>
                     </ActionSettingsWheelButton>
-                    <ActionSettingsWheelButton v-show="(getOrderAttachments(order).length > 0 && (SessionUser.hasPermission('download_order_attachments_own') || SessionUser.hasPermission('download_order_attachments')))" :icon="'fas fa-paperclip'" :displayActionsDirectly="true">
+                    <ActionSettingsWheelButton
+                      v-show="shouldShowOrderAttachmentsButton(order)"
+                      :icon="'fas fa-paperclip'"
+                      :displayActionsDirectly="true"
+                      :data-testid="`pos-order-list-attachments-${order.id}`"
+                    >
                       <template #actions>
                         <template v-for="attachment in getOrderAttachments(order)" :key="attachment.id">
                           <action-settings-wheel-item
-                              :label="getAttachmentLabel(attachment)"
-                              icon="fas fa-paperclip"
-                              :click-action="() => downloadAttachment(attachment.id, order.id)"
-                              :disabled="false"
+                            :label="getAttachmentLabel(attachment)"
+                            icon="fas fa-paperclip"
+                            :click-action="() => downloadAttachment(attachment.id, order.id)"
+                            :disabled="false"
                           />
                         </template>
                       </template>
@@ -1231,7 +1367,10 @@ const formatCashierName = (order) => {
         <!-- Footer count -->
         <div class="column is-full">
           <div class="has-text-centered">
-            <small>{{ t('tables.showing') }} {{ getVisibleOrders.length }} {{SessionUser.objects.orders.meta.labels.entries.toLowerCase()}}</small>
+            <small
+              >{{ t("tables.showing") }} {{ getVisibleOrders.length }}
+              {{ SessionUser.objects.orders.meta.labels.entries.toLowerCase() }}</small
+            >
           </div>
         </div>
       </div>
@@ -1242,31 +1381,42 @@ const formatCashierName = (order) => {
         <div class="column is-full" v-if="props.invoiceView && props.allowSelectMultiple">
           <div class="buttons">
             <button
-                class="button is-small"
-                @click="invoiceSelectedCollections()"
-                :disabled="selectedInvoiceCollections.length === 0 || isInvoiceQueueBusy"
+              class="button is-small"
+              @click="invoiceSelectedCollections()"
+              :disabled="selectedInvoiceCollections.length === 0 || isInvoiceQueueBusy"
             >
-              {{SessionUser.objects.global.language.invoice}} {{SessionUser.objects.global.language.selected_multiple}} ({{selectedInvoiceCollections.length}})
+              {{ SessionUser.objects.global.language.invoice }}
+              {{ SessionUser.objects.global.language.selected_multiple }} ({{ selectedInvoiceCollections.length }})
             </button>
             <button
-                class="button is-small"
-                @click="selectAllInvoiceCollections()"
-                :class="{
-                  'is-light': !isInvoiceCollectionSelectedAll(),
-                  'is-dark': isInvoiceCollectionSelectedAll()
-                }"
+              class="button is-small"
+              @click="selectAllInvoiceCollections()"
+              :class="{
+                'is-light': !isInvoiceCollectionSelectedAll(),
+                'is-dark': isInvoiceCollectionSelectedAll(),
+              }"
             >
-              {{ isInvoiceCollectionSelectedAll() ? SessionUser.objects.global.language.unselect : SessionUser.objects.global.language.select }} {{ SessionUser.objects.global.language.all.toLowerCase() }}
+              {{
+                isInvoiceCollectionSelectedAll()
+                  ? SessionUser.objects.global.language.unselect
+                  : SessionUser.objects.global.language.select
+              }}
+              {{ SessionUser.objects.global.language.all.toLowerCase() }}
             </button>
             <button
-                class="button is-small"
-                @click="toggleAutoExpandAll()"
-                :class="{
-                  'is-light': !isAutoExpandAll(),
-                  'is-dark': isAutoExpandAll()
-                }"
+              class="button is-small"
+              @click="toggleAutoExpandAll()"
+              :class="{
+                'is-light': !isAutoExpandAll(),
+                'is-dark': isAutoExpandAll(),
+              }"
             >
-              {{ isAutoExpandAll() ? SessionUser.objects.global.language.collapse : SessionUser.objects.global.language.expand }} {{ SessionUser.objects.global.language.all.toLowerCase() }}
+              {{
+                isAutoExpandAll()
+                  ? SessionUser.objects.global.language.collapse
+                  : SessionUser.objects.global.language.expand
+              }}
+              {{ SessionUser.objects.global.language.all.toLowerCase() }}
             </button>
           </div>
         </div>
@@ -1285,7 +1435,10 @@ const formatCashierName = (order) => {
               :data-testid="`pos-order-list-card-${order.id}`"
             >
               <template #header>
-                <div class="card-header-title is-flex is-justify-content-space-between is-align-items-center" style="width: 100%;">
+                <div
+                  class="card-header-title is-flex is-justify-content-space-between is-align-items-center"
+                  style="width: 100%"
+                >
                   <div>
                     <div>
                       <small>
@@ -1293,14 +1446,19 @@ const formatCashierName = (order) => {
                         <span class="icon mr-1" :class="getOrderInvoiceStatusBarColor(order)">
                           <i :class="isPendingHandheld(order) ? 'fas fa-mobile-alt' : 'fas fa-circle'"></i>
                         </span>
-                        {{ order.reg_1 }}<span v-if="order.reg_2">, {{ order.reg_2 }}</span><span v-if="order.reg_3">, {{ order.reg_3 }}</span> <span class="has-text-grey-light">#{{ order.id }}</span></small>
+                        {{ order.reg_1 }}<span v-if="order.reg_2">, {{ order.reg_2 }}</span
+                        ><span v-if="order.reg_3">, {{ order.reg_3 }}</span>
+                        <span class="has-text-grey-light">#{{ order.id }}</span></small
+                      >
                     </div>
                     <div v-if="!props.isCustomerView">
                       <small>{{ order.customer_name }}</small>
                     </div>
                   </div>
                   <div class="is-pulled-right" style="width: fit-content">
-                    <div class="columns is-multiline is-mobile is-gapless is-justify-content-flex-end is-align-items-center">
+                    <div
+                      class="columns is-multiline is-mobile is-gapless is-justify-content-flex-end is-align-items-center"
+                    >
                       <div class="column is-narrow has-text-right mb-2">
                         <span class="tag is-light is-small mr-1">
                           <small>{{ getDepartmentName(order.department_id) }}</small>
@@ -1308,9 +1466,17 @@ const formatCashierName = (order) => {
                       </div>
                       <div class="column is-12 has-text-right mb-2">
                         <span class="buttons is-right mr-1">
-                          <button v-if="props.invoiceView && props.allowSelectMultiple" class="button is-light is-small" @click="toggleInvoiceCollectionSelection(order.invoice_collection_id)"
-                                  :class="{ 'is-dark': isInvoiceCollectionSelected(parseInt(order.invoice_collection_id)) }">
-                            {{ isInvoiceCollectionSelected(parseInt(order.invoice_collection_id)) ? SessionUser.objects.global.language.unselect : SessionUser.objects.global.language.select }}
+                          <button
+                            v-if="props.invoiceView && props.allowSelectMultiple"
+                            class="button is-light is-small"
+                            @click="toggleInvoiceCollectionSelection(order.invoice_collection_id)"
+                            :class="{ 'is-dark': isInvoiceCollectionSelected(parseInt(order.invoice_collection_id)) }"
+                          >
+                            {{
+                              isInvoiceCollectionSelected(parseInt(order.invoice_collection_id))
+                                ? SessionUser.objects.global.language.unselect
+                                : SessionUser.objects.global.language.select
+                            }}
                           </button>
                         </span>
                       </div>
@@ -1325,19 +1491,21 @@ const formatCashierName = (order) => {
                       <template v-if="!!order.reference">
                         <div class="columns is-mobile is-gapless is-align-items-center mb-1">
                           <div class="column is-narrow mr-1">
-                            <label class="label is-small">{{ SessionUser.objects.orders.columns.reference?.label || 'Reference' }}:</label>
+                            <label class="label is-small"
+                              >{{ SessionUser.objects.orders.columns.reference?.label || "Reference" }}:</label
+                            >
                           </div>
                           <div class="column is-flex-grow-1">
                             <small>
                               <editable-table-column
-                                  :componentWrapper="'div'"
-                                  :object="order"
-                                  :loadList="loadList"
-                                  column="reference"
-                                  :hover-text="order.reference"
-                                  :parse-function="(value) => truncateOrderField(value, 20)"
-                                  :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-                                  :permission-check-function="() => true"
+                                :componentWrapper="'div'"
+                                :object="order"
+                                :loadList="loadList"
+                                column="reference"
+                                :hover-text="order.reference"
+                                :parse-function="(value) => truncateOrderField(value, 20)"
+                                :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
+                                :permission-check-function="() => true"
                               />
                             </small>
                           </div>
@@ -1346,19 +1514,21 @@ const formatCashierName = (order) => {
                       <template v-if="!!order.notes">
                         <div class="columns is-mobile is-gapless is-align-items-center mb-1">
                           <div class="column is-narrow mr-1">
-                            <label class="label is-small" :class="{ 'has-text-grey': !order.notes }">{{ SessionUser.objects.orders.columns.notes?.label || 'Noter' }}:</label>
+                            <label class="label is-small" :class="{ 'has-text-grey': !order.notes }"
+                              >{{ SessionUser.objects.orders.columns.notes?.label || "Noter" }}:</label
+                            >
                           </div>
                           <div class="column is-flex-grow-1">
                             <small>
                               <editable-table-column
-                                  :componentWrapper="'div'"
-                                  :object="order"
-                                  :loadList="loadList"
-                                  column="notes"
-                                  :hover-text="order.notes"
-                                  :parse-function="(value) => truncateOrderField(value, 20)"
-                                  :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-                                  :permission-check-function="() => SessionUser.canAccessAdmin()"
+                                :componentWrapper="'div'"
+                                :object="order"
+                                :loadList="loadList"
+                                column="notes"
+                                :hover-text="order.notes"
+                                :parse-function="(value) => truncateOrderField(value, 20)"
+                                :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
+                                :permission-check-function="() => SessionUser.canAccessAdmin()"
                               />
                             </small>
                           </div>
@@ -1372,32 +1542,38 @@ const formatCashierName = (order) => {
                           <div class="column is-flex-grow-1">
                             <small>
                               <editable-table-column
-                                  :componentWrapper="'div'"
-                                  :object="order"
-                                  :loadList="loadList"
-                                  column="po"
-                                  :hover-text="order.po"
-                                  :parse-function="(value) => truncateOrderField(value, 20)"
-                                  :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-                                  :permission-check-function="() => canSeePoField() || SessionUser.canAccessAdmin()"
+                                :componentWrapper="'div'"
+                                :object="order"
+                                :loadList="loadList"
+                                column="po"
+                                :hover-text="order.po"
+                                :parse-function="(value) => truncateOrderField(value, 20)"
+                                :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
+                                :permission-check-function="() => canSeePoField() || SessionUser.canAccessAdmin()"
                               />
                             </small>
                           </div>
                         </div>
                       </template>
                       <!-- Order summary -->
-                      <hr v-if="!!order.reference || !!order.notes || !!order.po"/>
-                      <order-content-table :order-id="order.id" :summaryMode="true" :display-price="SessionUser.canAccessAdmin()" />
+                      <hr v-if="!!order.reference || !!order.notes || !!order.po" />
+                      <order-content-table
+                        :order-id="order.id"
+                        :summaryMode="true"
+                        :display-price="SessionUser.canAccessAdmin()"
+                      />
                     </div>
                     <div class="column is-12 has-text-centered">
-                      <hr/>
+                      <hr />
                       <!-- Total net amount -->
                       <strong>{{ SessionUser.functions.currency.toLocal(order.total_net_amount) }}</strong>
-                      <br/>
+                      <br />
                       <!-- Cashier • Time ago -->
-                      <small class="has-text-grey">{{ order.cashier_name }} • {{ SessionUser.functions.date.timeAgo(order.created_at) }}</small>
+                      <small class="has-text-grey"
+                        >{{ order.cashier_name }} • {{ SessionUser.functions.date.timeAgo(order.created_at) }}</small
+                      >
                       <!-- Reg 1 • Reg 2 • Reg 3 -->
-                      <br/>
+                      <br />
                       <div class="has-text-grey">
                         <div class="columns is-mobile is-gapless is-justify-content-center is-align-items-center">
                           <div class="column is-narrow">
@@ -1409,14 +1585,14 @@ const formatCashierName = (order) => {
                                 <div class="column is-flex-grow-1">
                                   <small>
                                     <editable-table-column
-                                        :componentWrapper="'div'"
-                                        :object="order"
-                                        :loadList="loadList"
-                                        column="reg_1"
-                                        :hover-text="order.reg_1"
-                                        :parse-function="(value) => truncateOrderField(value, 20)"
-                                        :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-                                        :permission-check-function="() => true"
+                                      :componentWrapper="'div'"
+                                      :object="order"
+                                      :loadList="loadList"
+                                      column="reg_1"
+                                      :hover-text="order.reg_1"
+                                      :parse-function="(value) => truncateOrderField(value, 20)"
+                                      :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
+                                      :permission-check-function="() => true"
                                     />
                                   </small>
                                 </div>
@@ -1441,14 +1617,14 @@ const formatCashierName = (order) => {
                                 <div class="column is-flex-grow-1">
                                   <small>
                                     <editable-table-column
-                                        :componentWrapper="'div'"
-                                        :object="order"
-                                        :loadList="loadList"
-                                        column="reg_2"
-                                        :hover-text="order.reg_2"
-                                        :parse-function="(value) => truncateOrderField(value, 20)"
-                                        :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-                                        :permission-check-function="() => true"
+                                      :componentWrapper="'div'"
+                                      :object="order"
+                                      :loadList="loadList"
+                                      column="reg_2"
+                                      :hover-text="order.reg_2"
+                                      :parse-function="(value) => truncateOrderField(value, 20)"
+                                      :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
+                                      :permission-check-function="() => true"
                                     />
                                   </small>
                                 </div>
@@ -1473,14 +1649,14 @@ const formatCashierName = (order) => {
                                 <div class="column is-flex-grow-1">
                                   <small>
                                     <editable-table-column
-                                        :componentWrapper="'div'"
-                                        :object="order"
-                                        :loadList="loadList"
-                                        column="reg_3"
-                                        :hover-text="order.reg_3"
-                                        :parse-function="(value) => truncateOrderField(value, 20)"
-                                        :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
-                                        :permission-check-function="() => true"
+                                      :componentWrapper="'div'"
+                                      :object="order"
+                                      :loadList="loadList"
+                                      column="reg_3"
+                                      :hover-text="order.reg_3"
+                                      :parse-function="(value) => truncateOrderField(value, 20)"
+                                      :edit-function="SessionUser.objects.orders.showEditObjectFieldForm"
+                                      :permission-check-function="() => true"
                                     />
                                   </small>
                                 </div>
@@ -1493,8 +1669,7 @@ const formatCashierName = (order) => {
                   </div>
                 </div>
               </template>
-              <template #content>
-              </template>
+              <template #content> </template>
               <template #footer>
                 <!-- Delete
                 <a class="card-footer-item" @click="SessionUser.objects.orders.functions.showDeleteConfirmationModal(order, loadList)">
@@ -1511,9 +1686,9 @@ const formatCashierName = (order) => {
                 </a>
                 <!-- Go to booking (if any) -->
                 <a
-                    class="card-footer-item"
-                    v-if="order.booking_id"
-                    @click="redirectDepartmentBookingPage(order.booking_id, order.department_id, false)"
+                  class="card-footer-item"
+                  v-if="order.booking_id"
+                  @click="redirectDepartmentBookingPage(order.booking_id, order.department_id, false)"
                 >
                   <span class="icon mr-1">
                     <i class="fas fa-calendar-alt"></i>
@@ -1533,32 +1708,40 @@ const formatCashierName = (order) => {
         <!-- Footer count -->
         <div class="column is-full">
           <div class="has-text-centered">
-            <small>{{ t('tables.showing') }} {{ getVisibleOrders.length }} {{SessionUser.objects.orders.meta.labels.entries.toLowerCase()}}</small>
+            <small
+              >{{ t("tables.showing") }} {{ getVisibleOrders.length }}
+              {{ SessionUser.objects.orders.meta.labels.entries.toLowerCase() }}</small
+            >
           </div>
         </div>
       </div>
     </template>
   </ViewportResponsiveWrapper>
   <InvoiceMultipleCollectionsModal
-      v-if="isInvoiceMultipleCollectionsModalOpen"
-      v-bind:in-progress="invoiceCollectionQueueInProgress"
-      v-bind:failed="invoiceCollectionQueueFailed"
-      v-bind:succeeded="invoiceCollectionQueueSuccess"
-      v-bind:queued="invoiceCollectionQueue"
-      v-bind:jobs="invoiceQueue.invoiceCollectionQueueJobs"
-      v-bind:log="collectionQueueLog"
-      @closeModal="confirmCloseModal()"
-      @retry="retryInvoiceCollection"
-      />
+    v-if="isInvoiceMultipleCollectionsModalOpen"
+    v-bind:in-progress="invoiceCollectionQueueInProgress"
+    v-bind:failed="invoiceCollectionQueueFailed"
+    v-bind:succeeded="invoiceCollectionQueueSuccess"
+    v-bind:queued="invoiceCollectionQueue"
+    v-bind:jobs="invoiceQueue.invoiceCollectionQueueJobs"
+    v-bind:log="collectionQueueLog"
+    @closeModal="confirmCloseModal()"
+    @retry="retryInvoiceCollection"
+  />
   <!-- bottom progress bar -->
   <InvoicingBillingPeriodInvoiceProgressBar
-      v-bind:max-progress="invoiceCollectionQueueSuccess.length + invoiceCollectionQueueFailed.length + invoiceCollectionQueueInProgress.length + invoiceCollectionQueue.length"
-      v-bind:progress="invoiceCollectionQueueSuccess.length"
-      v-bind:failed="invoiceCollectionQueueFailed.length"
-      v-bind:in-progress="invoiceCollectionQueueInProgress.length"
-      v-bind:queued="invoiceCollectionQueue.length"
-      @dismissed="isInvoiceMultipleCollectionsModalOpen = true"
-    />
+    v-bind:max-progress="
+      invoiceCollectionQueueSuccess.length +
+      invoiceCollectionQueueFailed.length +
+      invoiceCollectionQueueInProgress.length +
+      invoiceCollectionQueue.length
+    "
+    v-bind:progress="invoiceCollectionQueueSuccess.length"
+    v-bind:failed="invoiceCollectionQueueFailed.length"
+    v-bind:in-progress="invoiceCollectionQueueInProgress.length"
+    v-bind:queued="invoiceCollectionQueue.length"
+    @dismissed="isInvoiceMultipleCollectionsModalOpen = true"
+  />
   <!-- Order actions menu modal -->
   <div
     class="modal"
@@ -1590,7 +1773,9 @@ const formatCashierName = (order) => {
         </ActionSettingsWheelButton>
       </section>
       <footer class="modal-card-foot">
-        <button class="button is-light is-link is-fullwidth" @click="closeOrderActionsModal">{{ SessionUser.objects.global.language.close }}</button>
+        <button class="button is-light is-link is-fullwidth" @click="closeOrderActionsModal">
+          {{ SessionUser.objects.global.language.close }}
+        </button>
       </footer>
     </div>
   </div>
@@ -1607,7 +1792,6 @@ const formatCashierName = (order) => {
   width: 5px;
   padding-left: 0;
   padding-right: 0;
-
 }
 .status-bar.has-text-danger {
   border-color: #ff3860;
diff --git a/tests/e2e/admin-pos-orders.spec.ts b/tests/e2e/admin-pos-orders.spec.ts
index 0b459d79..553b98ba 100644
--- a/tests/e2e/admin-pos-orders.spec.ts
+++ b/tests/e2e/admin-pos-orders.spec.ts
@@ -103,12 +103,7 @@ async function openOrderDetailsTab(page: Page) {
   await expect(page.getByTestId("pos-order-panel-details")).toBeVisible();
 }
 
-async function submitOrderSettingModal(
-  page: Page,
-  field: string,
-  value: string,
-  type: "input" | "select" = "input"
-) {
+async function submitOrderSettingModal(page: Page, field: string, value: string, type: "input" | "select" = "input") {
   await getOrderSettingsEditButton(page, field).click();
 
   const popup = page.locator(".swal2-popup");
@@ -443,9 +438,7 @@ test.describe("Admin POS Orders - desktop settings", () => {
     expect(productPanelWidth / workspaceWidth).toBeGreaterThan(0.55);
     expect(cartPanelWidth / workspaceWidth).toBeLessThan(0.42);
     expect(productPanelBox?.x ?? 0).toBeLessThan(cartPanelBox?.x ?? 0);
-    expect(addItemsBackButtonBox?.y ?? 0).toBeGreaterThan(
-      (cartPanelBox?.y ?? 0) + (cartPanelBox?.height ?? 0) - 2
-    );
+    expect(addItemsBackButtonBox?.y ?? 0).toBeGreaterThan((cartPanelBox?.y ?? 0) + (cartPanelBox?.height ?? 0) - 2);
     expect(Math.abs((addItemsBackButtonBox?.x ?? 0) - (cartPanelBox?.x ?? 0))).toBeLessThanOrEqual(8);
 
     await expect(getVisibleTestId(page, "pos-order-total")).toBeVisible();
@@ -485,7 +478,9 @@ test.describe("Admin POS Orders - desktop settings", () => {
     await expectOrderTotal(page, 1397);
   });
 
-  test("loads step 2 customer context after reload and keeps actions directly below the basket card", async ({ page }) => {
+  test("loads step 2 customer context after reload and keeps actions directly below the basket card", async ({
+    page,
+  }) => {
     await page.goto("/admin/12/modules/pos");
     await expect(page.getByTestId("pos-step-1")).toBeVisible();
     await page.locator("#reg_1").fill("EC21235");
@@ -901,9 +896,7 @@ test.describe("Admin POS Orders - desktop settings", () => {
     await expect(getOrderDetailInput(page, "booking_id")).toHaveValue(expectedValues.booking_id);
   });
 
-  test("persists department, created_at, and invoice inclusion changes through per-field modals", async ({
-    page,
-  }) => {
+  test("persists department, created_at, and invoice inclusion changes through per-field modals", async ({ page }) => {
     const { orderId } = await createDisposableOrder(page);
     const updatedCreatedAt = "2026-04-09T13:37";
     const helper = page.getByTestId("pos-order-settings-include-helper");
@@ -971,6 +964,18 @@ test.describe("Admin POS Orders - desktop settings", () => {
     await openOrderDetailsTab(page);
     await expect(getOrderDetailInput(page, "invoice_collection_id")).toHaveValue("301");
   });
+
+  test("shows the attachment quick action in the desktop order list when the order has attachments", async ({
+    page,
+  }) => {
+    await page.goto("/admin/12/modules/pos/orders");
+
+    const attachmentAction = getVisibleTestId(page, "pos-order-list-attachments-54518");
+    await expect(attachmentAction).toBeVisible();
+
+    await attachmentAction.locator(".dropdown-trigger button").click();
+    await expect(page.getByRole("button", { name: /safety-seal\.pdf/i })).toBeVisible();
+  });
 });
 
 test.describe("Admin POS Orders - desktop locked states", () => {
diff --git a/tests/e2e/support/network.js b/tests/e2e/support/network.js
index d5b271cb..18d66ead 100644
--- a/tests/e2e/support/network.js
+++ b/tests/e2e/support/network.js
@@ -120,8 +120,16 @@ function withEffectiveOrderState(posFixture, order) {
   }
 
   const includeInInvoice = normalizeIncludeInInvoiceValue(order.include_in_invoice);
+  const orderId = Number(order.id || 0);
+  const attachments = Array.isArray(order.attachments)
+    ? order.attachments
+    : Array.isArray(posFixture.attachmentsByOrderId?.[orderId])
+    ? posFixture.attachmentsByOrderId[orderId]
+    : [];
+
   return {
     ...order,
+    attachments,
     include_in_invoice: includeInInvoice,
     include_in_invoice_effective:
       includeInInvoice === null ? resolveDepartmentIncludeInInvoice(posFixture, order.department_id) : includeInInvoice,
@@ -1397,10 +1405,10 @@ async function handlePosRoute({ route, request, parsedUrl, pathname, method, pos
           body.field === "include_in_invoice"
             ? normalizeIncludeInInvoiceValue(body.value)
             : body.field === "reg_1" || body.field === "reg_2" || body.field === "reg_3"
-              ? normalizeRegistrationValue(body.value)
+            ? normalizeRegistrationValue(body.value)
             : body.field === "created_at"
-              ? normalizeCreatedAtValue(body.value)
-              : body.value;
+            ? normalizeCreatedAtValue(body.value)
+            : body.value;
       } else {
         posFixture.ordersById[orderId] = {
           ...posFixture.ordersById[orderId],
@@ -2991,9 +2999,12 @@ export async function seedAuthenticatedState(page, token = "e2e-token") {
 export async function primeMockSession(page, { token = "e2e-token", bootPath = "/redirect" } = {}) {
   await seedAuthenticatedState(page, token);
   const sessionRequest = page
-    .waitForResponse((response) => {
-      return response.request().method() === "GET" && response.url().includes("/auth/session");
-    }, { timeout: 10_000 })
+    .waitForResponse(
+      (response) => {
+        return response.request().method() === "GET" && response.url().includes("/auth/session");
+      },
+      { timeout: 10_000 }
+    )
     .catch(() => null);
   await page.goto(bootPath);
   await sessionRequest;