diff --git a/src/components/displays/department/pos/orders/ordersTable.vue b/src/components/displays/department/pos/orders/ordersTable.vue
index 2ef2662b..29c1713c 100644
--- a/src/components/displays/department/pos/orders/ordersTable.vue
+++ b/src/components/displays/department/pos/orders/ordersTable.vue
@@ -514,36 +514,29 @@ const confirmCloseModal = () => {
   <table class="table is-fullwidth is-hoverable">
     <thead>
     <tr>
-      <td>
-        <p>
-          {{selectedInvoiceCollections.length}}
-        </p>
-      </td>
-      <td>
-        <button
-            class="button is-small"
-            @click="invoiceSelectedCollections()"
-            >
-          {{SessionUser.objects.global.language.invoice}} {{SessionUser.objects.global.language.selected_multiple}}
-        </button>
-      </td>
-      <td colspan="90%">
-        <code>{{selectedInvoiceCollections}}</code>
+      <td colspan="100%">
+        <div class="buttons">
+          <button
+              class="button is-small"
+              @click="invoiceSelectedCollections()"
+              >
+            {{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()
+              }"
+          >
+            {{ isInvoiceCollectionSelectedAll() ? SessionUser.objects.global.language.unselect : SessionUser.objects.global.language.select }} {{ SessionUser.objects.global.language.all.toLowerCase() }}
+          </button>
+        </div>
       </td>
     </tr>
     <tr>
-      <th class="is-narrow" v-if="props.invoiceView && props.allowSelectMultiple">
-        <button
-            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() }}
-        </button>
-      </th>
+      <th class="is-narrow" v-if="props.invoiceView && props.allowSelectMultiple"></th>
       <th class="is-narrow" v-if="props.invoiceView"></th>
       <th class="status-bar-table-header"></th>
       <template v-for="tableHeaders in tableHeaders" :key="tableHeaders">
@@ -584,7 +577,7 @@ const confirmCloseModal = () => {
     <template v-for="order in orders" :key="order.id">
       <tr>
         <template v-if="props.invoiceView && props.allowSelectMultiple">
-          <td>
+          <td class="is-narrow">
             <button
                 class="button is-small"
                 @click="toggleInvoiceCollectionSelection(order.invoice_collection_id)"
@@ -598,7 +591,7 @@ const confirmCloseModal = () => {
           </td>
         </template>
         <template v-if="props.invoiceView">
-          <td>
+          <td class="is-narrow">
             <button
                 class="button is-small"
                 @click="toggleDropdown(order)"
diff --git a/src/components/displays/modals/PickCustomerInvoiceCollectionModal.vue b/src/components/displays/modals/PickCustomerInvoiceCollectionModal.vue
index b747e49f..ccfd702e 100644
--- a/src/components/displays/modals/PickCustomerInvoiceCollectionModal.vue
+++ b/src/components/displays/modals/PickCustomerInvoiceCollectionModal.vue
@@ -163,7 +163,7 @@ const tabs = ref([
                 isSelector: true,
                 onSelected: props.onInvoiceCollectionSelected,
               }"
-                  :display-closed="false"
+                  :display-booked="false"
               />
 
             </template>
diff --git a/src/components/displays/pagination/models/SuperUserDashboard/CollectedOrderInvoicesPagination.vue b/src/components/displays/pagination/models/SuperUserDashboard/CollectedOrderInvoicesPagination.vue
index 049a0e28..cdfd85e1 100644
--- a/src/components/displays/pagination/models/SuperUserDashboard/CollectedOrderInvoicesPagination.vue
+++ b/src/components/displays/pagination/models/SuperUserDashboard/CollectedOrderInvoicesPagination.vue
@@ -26,6 +26,10 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
+  displayBooked: {
+    type: Boolean,
+    default: true
+  },
 });
 import { defineProps } from "vue";
 import { useRouter } from "vue-router";
@@ -69,7 +73,11 @@ if (props.setCustomerFilter) {
 }
 
 if (!props.displayClosed) {
-  setFilter("closed_at", 'IS_NULL', false);
+  setFilter("closed_at", 'is_null', false);
+}
+
+if (!props.displayBooked) {
+  setFilter("booked_invoice_id", 'is_null', false);
 }
 
 if (props.autoLoad) {
diff --git a/src/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue b/src/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue
index e3047525..0a22a989 100644
--- a/src/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue
+++ b/src/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue
@@ -42,6 +42,7 @@ import {
   getFilter,
   metaSearch,
   search,
+  endpoint,
   setFilter,
   setOrder,
   hideSearchField,
@@ -193,240 +194,248 @@ const getTimeShortcutIcon = (boolean) => {
   return boolean ? 'fas fa-check' : '';
 }
 
+
+const doesEndpointMatch = (matcher) => {
+  // Check if the endpoint matches the current endpoint
+  return endpoint.value === matcher;
+}
+
 </script>
 
 <template>
-  <input @input="search($event.target.value)" class="input" type="text" placeholder="Søg i transaktioner" v-if="!hideSearchField"/>
-  <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
-    <template #paginationColumns>
-      <!-- Sort by created_at -->
-      <div class="column is-narrow my-3">
-        <label class="label">Order direction</label>
-        <div class="control">
-          <div class="select">
-            <select @change="setOrder('created_at', $event.target.value, true);">
-              <option value="asc">Ascending (Oldest first)</option>
-              <option value="desc" selected>Descending (Newest first)</option>
-            </select>
+  <template v-if="doesEndpointMatch('/orders')">
+    <input @input="search($event.target.value)" class="input" type="text" placeholder="Søg i transaktioner" v-if="!hideSearchField"/>
+    <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
+      <template #paginationColumns>
+        <!-- Sort by created_at -->
+        <div class="column is-narrow my-3">
+          <label class="label">Order direction</label>
+          <div class="control">
+            <div class="select">
+              <select @change="setOrder('created_at', $event.target.value, true);">
+                <option value="asc">Ascending (Oldest first)</option>
+                <option value="desc" selected>Descending (Newest first)</option>
+              </select>
+            </div>
           </div>
         </div>
-      </div>
-      <!-- Invoice status -->
-      <div class="column is-narrow my-3">
-        <label class="label">Bogføringsstatus</label>
-        <div class="control">
-          <div class="select">
-            <select @change="setFilter('booked_invoice_id', $event.target.value, true);">
-              <option value="*" :selected="!props.applyDefaultFilters">All</option>
-              <option value="not null">Bogført</option>
-              <option value="is_null" :selected="props.applyDefaultFilters">Ikke bogført</option>
-            </select>
+        <!-- Invoice status -->
+        <div class="column is-narrow my-3">
+          <label class="label">Bogføringsstatus</label>
+          <div class="control">
+            <div class="select">
+              <select @change="setFilter('booked_invoice_id', $event.target.value, true);">
+                <option value="*" :selected="!props.applyDefaultFilters">All</option>
+                <option value="not null">Bogført</option>
+                <option value="is_null" :selected="props.applyDefaultFilters">Ikke bogført</option>
+              </select>
+            </div>
           </div>
         </div>
-      </div>
-      <!-- Error status -->
-      <div class="column is-narrow my-3">
-        <label class="label">Fejlstatus</label>
-        <div class="control">
-          <div class="select">
-            <select @change="setFilter('error_message', $event.target.value, true);">
-              <option value="*" selected>All</option>
-              <option value="not null">Ja</option>
-              <option value="is_null">Nej</option>
-            </select>
+        <!-- Error status -->
+        <div class="column is-narrow my-3">
+          <label class="label">Fejlstatus</label>
+          <div class="control">
+            <div class="select">
+              <select @change="setFilter('error_message', $event.target.value, true);">
+                <option value="*" selected>All</option>
+                <option value="not null">Ja</option>
+                <option value="is_null">Nej</option>
+              </select>
+            </div>
           </div>
         </div>
-      </div>
-      <!-- Payment processor -->
-      <div class="column is-narrow my-3">
-        <label class="label">Betalingsprocessor</label>
-        <div class="control">
-          <div class="select">
-            <select @change="setFilter('processor', $event.target.value, true);">
-              <option value="*" selected>All</option>
-              <option value="1">E-conomic</option>
-              <option value="2">Stripe</option>
-              <option value="3">Anden ( Uden tracking )</option>
-              <option :value="'is_null'">Ikke specificeret</option>
-            </select>
+        <!-- Payment processor -->
+        <div class="column is-narrow my-3">
+          <label class="label">Betalingsprocessor</label>
+          <div class="control">
+            <div class="select">
+              <select @change="setFilter('processor', $event.target.value, true);">
+                <option value="*" selected>All</option>
+                <option value="1">E-conomic</option>
+                <option value="2">Stripe</option>
+                <option value="3">Anden ( Uden tracking )</option>
+                <option :value="'is_null'">Ikke specificeret</option>
+              </select>
+            </div>
           </div>
         </div>
-      </div>
-      <!-- Marked as complete ("Gennemført") -->
-      <div class="column is-narrow my-3">
-        <label class="label">Gennemført</label>
-        <div class="control">
-          <div class="select">
-            <select @change="setFilter('completed_at', $event.target.value, true);">
-              <option value="*" selected>All</option>
-              <option value="not null">Gennemført</option>
-              <option :value="'is_null'">Ikke gennemført</option>
-            </select>
+        <!-- Marked as complete ("Gennemført") -->
+        <div class="column is-narrow my-3">
+          <label class="label">Gennemført</label>
+          <div class="control">
+            <div class="select">
+              <select @change="setFilter('completed_at', $event.target.value, true);">
+                <option value="*" selected>All</option>
+                <option value="not null">Gennemført</option>
+                <option :value="'is_null'">Ikke gennemført</option>
+              </select>
+            </div>
           </div>
         </div>
-      </div>
-      <!-- Multiple selection, customer has attribute -->
-      <div class="column is-narrow my-3">
-        <label class="label">Faktura valg</label>
-        <div class="control">
-          <div class="select">
-            <select @change="setFilter('customer_id-has_attribute', $event.target.value, true);">
-              <option value="*" selected>All</option>
-              <option value="invoiceAllOrdersIndividually">Faktura pr. ordre</option>
-              <option value="!invoiceAllOrdersIndividually">Faktura pr. måned</option>
-            </select>
+        <!-- Multiple selection, customer has attribute -->
+        <div class="column is-narrow my-3">
+          <label class="label">Faktura valg</label>
+          <div class="control">
+            <div class="select">
+              <select @change="setFilter('customer_id-has_attribute', $event.target.value, true);">
+                <option value="*" selected>All</option>
+                <option value="invoiceAllOrdersIndividually">Faktura pr. ordre</option>
+                <option value="!invoiceAllOrdersIndividually">Faktura pr. måned</option>
+              </select>
+            </div>
           </div>
         </div>
-      </div>
-      <!-- Multiple selection, customer has special arrangement -->
-      <div class="column is-narrow my-3">
-        <label class="label">Specialaftale</label>
-        <div class="control">
-          <div class="select">
-            <select @change="setFilter('customer_id-has_key-OtherSpecialArrangement', $event.target.value, true);">
-              <option value="*" :selected="!props.applyDefaultFilters">All</option>
-              <option value="OtherSpecialArrangement">Har specialaftale</option>
-              <option value="!OtherSpecialArrangement" :selected="props.applyDefaultFilters">Har ikke specialaftale</option>
-            </select>
+        <!-- Multiple selection, customer has special arrangement -->
+        <div class="column is-narrow my-3">
+          <label class="label">Specialaftale</label>
+          <div class="control">
+            <div class="select">
+              <select @change="setFilter('customer_id-has_key-OtherSpecialArrangement', $event.target.value, true);">
+                <option value="*" :selected="!props.applyDefaultFilters">All</option>
+                <option value="OtherSpecialArrangement">Har specialaftale</option>
+                <option value="!OtherSpecialArrangement" :selected="props.applyDefaultFilters">Har ikke specialaftale</option>
+              </select>
+            </div>
           </div>
         </div>
-      </div>
-      <!-- Multiple selection, customer has washing subscription -->
-      <div class="column is-narrow my-3">
-        <label class="label">Vaskeabonnement</label>
-        <div class="control">
-          <div class="select">
-            <select @change="setFilter('customer_id-has_key-OtherVaskeabonnement', $event.target.value, true);">
-              <option value="*" :selected="!props.applyDefaultFilters">All</option>
-              <option value="OtherVaskeabonnement">Har vaskeabonnement</option>
-              <option value="!OtherVaskeabonnement" :selected="props.applyDefaultFilters">Har ikke vaskeabonnement</option>
-            </select>
+        <!-- Multiple selection, customer has washing subscription -->
+        <div class="column is-narrow my-3">
+          <label class="label">Vaskeabonnement</label>
+          <div class="control">
+            <div class="select">
+              <select @change="setFilter('customer_id-has_key-OtherVaskeabonnement', $event.target.value, true);">
+                <option value="*" :selected="!props.applyDefaultFilters">All</option>
+                <option value="OtherVaskeabonnement">Har vaskeabonnement</option>
+                <option value="!OtherVaskeabonnement" :selected="props.applyDefaultFilters">Har ikke vaskeabonnement</option>
+              </select>
+            </div>
           </div>
         </div>
-      </div>
-      <!-- Multiple selection, customer has washing subscription -FIX
-      <div class="column is-narrow my-3">
-        <label class="label">Only tank cleaning</label>s
-        <div class="control">
-          <div class="select">
-            <select @change="setFilter('customer_id-has_attribute', $event.target.value, true);">
-              <option value="*" :selected="!props.applyDefaultFilters">All</option>
-              <option value="onlyTankCleaning">Only tank cleaning</option>
-              <option value="!onlyTankCleaning" :selected="props.applyDefaultFilters">Ikke tankcleaning</option>
-            </select>
+        <!-- Multiple selection, customer has washing subscription -FIX
+        <div class="column is-narrow my-3">
+          <label class="label">Only tank cleaning</label>s
+          <div class="control">
+            <div class="select">
+              <select @change="setFilter('customer_id-has_attribute', $event.target.value, true);">
+                <option value="*" :selected="!props.applyDefaultFilters">All</option>
+                <option value="onlyTankCleaning">Only tank cleaning</option>
+                <option value="!onlyTankCleaning" :selected="props.applyDefaultFilters">Ikke tankcleaning</option>
+              </select>
+            </div>
+          </div>
+        </div> -->
+        <!-- Date from -->
+        <div class="column is-narrow my-3">
+          <label class="label">Fra dato</label>
+          <div class="control">
+            <input type="date" class="input" @change="setFilter('created_at-date_from', $event.target.value, true)" v-model="date_from" />
           </div>
         </div>
-      </div> -->
-      <!-- Date from -->
-      <div class="column is-narrow my-3">
-        <label class="label">Fra dato</label>
-        <div class="control">
-          <input type="date" class="input" @change="setFilter('created_at-date_from', $event.target.value, true)" v-model="date_from" />
+        <!-- Date to -->
+        <div class="column is-narrow my-3">
+          <label class="label">Til dato</label>
+          <div class="control">
+            <input type="date" class="input" @change="setFilter('created_at-date_to', $event.target.value, true)" v-model="date_to" />
+          </div>
         </div>
-      </div>
-      <!-- Date to -->
-      <div class="column is-narrow my-3">
-        <label class="label">Til dato</label>
-        <div class="control">
-          <input type="date" class="input" @change="setFilter('created_at-date_to', $event.target.value, true)" v-model="date_to" />
+        <!-- Time shortcuts -->
+        <!-- Last month -->
+        <div class="column is-narrow my-3">
+          <label class="label">&nbsp</label>
+          <div class="control">
+            <button
+                class="button"
+                v-bind:class="getTimeShortcutClass(setFilterTime.is_last_month(date_from, date_to))"
+                @click="setFilterTime.last_month()"
+            >
+              <span class="icon">
+                <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_last_month(date_from, date_to))"></i>
+              </span>
+              <span>{{SessionUser.objects.global.language.time.last_month}}</span>
+              <span class="icon">
+              </span>
+            </button>
+          </div>
         </div>
-      </div>
-      <!-- Time shortcuts -->
-      <!-- Last month -->
-      <div class="column is-narrow my-3">
-        <label class="label">&nbsp</label>
-        <div class="control">
-          <button
-              class="button"
-              v-bind:class="getTimeShortcutClass(setFilterTime.is_last_month(date_from, date_to))"
-              @click="setFilterTime.last_month()"
-          >
-            <span class="icon">
-              <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_last_month(date_from, date_to))"></i>
-            </span>
-            <span>{{SessionUser.objects.global.language.time.last_month}}</span>
-            <span class="icon">
-            </span>
-          </button>
+        <!-- This month -->
+        <div class="column is-narrow my-3">
+          <label class="label">&nbsp</label>
+          <div class="control">
+            <button
+                class="button"
+                v-bind:class="getTimeShortcutClass(setFilterTime.is_this_month(date_from, date_to))"
+                @click="setFilterTime.this_month()"
+            >
+              <span class="icon">
+                <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_this_month(date_from, date_to))"></i>
+              </span>
+              <span>{{SessionUser.objects.global.language.time.this_month}}</span>
+              <span class="icon">
+              </span>
+            </button>
+          </div>
         </div>
-      </div>
-      <!-- This month -->
-      <div class="column is-narrow my-3">
-        <label class="label">&nbsp</label>
-        <div class="control">
-          <button
-              class="button"
-              v-bind:class="getTimeShortcutClass(setFilterTime.is_this_month(date_from, date_to))"
-              @click="setFilterTime.this_month()"
-          >
-            <span class="icon">
-              <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_this_month(date_from, date_to))"></i>
-            </span>
-            <span>{{SessionUser.objects.global.language.time.this_month}}</span>
-            <span class="icon">
-            </span>
-          </button>
+        <!-- Today -->
+        <div class="column is-narrow my-3">
+          <label class="label">&nbsp</label>
+          <div class="control">
+            <button
+                class="button"
+                v-bind:class="getTimeShortcutClass(setFilterTime.is_today(date_from, date_to))"
+                @click="setFilterTime.today()"
+            >
+              <span class="icon">
+                <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_today(date_from, date_to))"></i>
+              </span>
+              <span>{{SessionUser.objects.global.language.time.today}}</span>
+              <span class="icon">
+              </span>
+            </button>
+          </div>
         </div>
-      </div>
-      <!-- Today -->
-      <div class="column is-narrow my-3">
-        <label class="label">&nbsp</label>
-        <div class="control">
-          <button
-              class="button"
-              v-bind:class="getTimeShortcutClass(setFilterTime.is_today(date_from, date_to))"
-              @click="setFilterTime.today()"
-          >
-            <span class="icon">
-              <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_today(date_from, date_to))"></i>
-            </span>
-            <span>{{SessionUser.objects.global.language.time.today}}</span>
-            <span class="icon">
-            </span>
-          </button>
+        <!-- Yesterday -->
+        <div class="column is-narrow my-3">
+          <label class="label">&nbsp</label>
+          <div class="control">
+            <button
+                class="button"
+                v-bind:class="getTimeShortcutClass(setFilterTime.is_yesterday(date_from, date_to))"
+                @click="setFilterTime.yesterday()"
+            >
+              <span class="icon">
+                <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_yesterday(date_from, date_to))"></i>
+              </span>
+              <span>{{SessionUser.objects.global.language.time.yesterday}}</span>
+              <span class="icon">
+              </span>
+            </button>
+          </div>
         </div>
-      </div>
-      <!-- Yesterday -->
-      <div class="column is-narrow my-3">
-        <label class="label">&nbsp</label>
-        <div class="control">
-          <button
-              class="button"
-              v-bind:class="getTimeShortcutClass(setFilterTime.is_yesterday(date_from, date_to))"
-              @click="setFilterTime.yesterday()"
-          >
-            <span class="icon">
-              <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_yesterday(date_from, date_to))"></i>
-            </span>
-            <span>{{SessionUser.objects.global.language.time.yesterday}}</span>
-            <span class="icon">
-            </span>
-          </button>
+        <!-- All -->
+        <div class="column is-narrow my-3">
+          <label class="label">&nbsp</label>
+          <div class="control">
+            <button
+                class="button"
+                v-bind:class="getTimeShortcutClass(setFilterTime.is_all(date_from, date_to))"
+                @click="setFilterTime.all()"
+            >
+              <span class="icon">
+                <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_all(date_from, date_to))"></i>
+              </span>
+              <span>{{SessionUser.objects.global.language.time.all}}</span>
+              <span class="icon">
+              </span>
+            </button>
+          </div>
         </div>
-      </div>
-      <!-- All -->
-      <div class="column is-narrow my-3">
-        <label class="label">&nbsp</label>
-        <div class="control">
-          <button
-              class="button"
-              v-bind:class="getTimeShortcutClass(setFilterTime.is_all(date_from, date_to))"
-              @click="setFilterTime.all()"
-          >
-            <span class="icon">
-              <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_all(date_from, date_to))"></i>
-            </span>
-            <span>{{SessionUser.objects.global.language.time.all}}</span>
-            <span class="icon">
-            </span>
-          </button>
-        </div>
-      </div>
-    </template>
-  </PaginationDisplay>
-  <OrdersTable :orders="list" :invoiceView="props.invoiceView" :allowSelectMultiple="true"/>
-  <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
-  <LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">Reload</LoadButtonWhileAwait>
+      </template>
+    </PaginationDisplay>
+    <OrdersTable :orders="list" :invoiceView="props.invoiceView" :allowSelectMultiple="true"/>
+    <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
+    <LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">Reload</LoadButtonWhileAwait>
+  </template>
 </template>
 
 <style scoped>
diff --git a/src/components/session/token/SessionUser/Objects/Orders.vue b/src/components/session/token/SessionUser/Objects/Orders.vue
index 423c800c..33ea483f 100644
--- a/src/components/session/token/SessionUser/Objects/Orders.vue
+++ b/src/components/session/token/SessionUser/Objects/Orders.vue
@@ -6,7 +6,7 @@ import CustomerSearchFieldPos from "@/components/forms/department/pos/input/cust
 import {createApp} from "vue";
 
 // Define a function to show the SweetAlert2 modal with the Vue component
-function showCustomerSearchModal() {
+const showCustomerSearchModal = (onSuccessFunction = null) => {
   // Create a container element for the Vue component
   const div = document.createElement('div')
 
@@ -24,12 +24,12 @@ function showCustomerSearchModal() {
       }
       // Handle the customer selection here
       console.log('Selected customer:', customer)
+      // Call the onSuccess function with the selected customer
+      if (onSuccessFunction) {
+        await onSuccessFunction(customer.customerNumber);
+      }
       // Close the modal
       Swal.close()
-      // Call the function to pick the customer invoice collection
-      await SessionUser.objects.collectedOrderInvoices.functions.showInvoiceCollectionPickerForm(
-          customer.customerNumber,
-      );
     }
   })
 
@@ -54,7 +54,100 @@ function showCustomerSearchModal() {
 
 
 const showChangeOrderCustomerForm = async (id) => {
-  showCustomerSearchModal();
+  function noCustomerSelected() {
+    Swal.fire({
+      icon: 'error',
+      title: 'Ingen kunde valgt',
+      timer: 2000,
+    })
+  }
+  function noInvoiceCollectionSelected() {
+    Swal.fire({
+      icon: 'error',
+      title: 'Ingen faktura samling valgt',
+      timer: 2000,
+    })
+  }
+  function changeOrderInvoiceCollectionId(order_id, new_collection_id) {
+    // Change the invoice collection
+    return SessionUser.objects.orders.set.invoice_collection_id(
+        parseInt(order_id),
+        parseInt(new_collection_id)
+    );
+  }
+  function changeOrderCustomerId(order_id, new_customer_id) {
+    // Change the customer
+    return SessionUser.objects.orders.set.customer_id(
+        parseInt(order_id),
+        parseInt(new_customer_id)
+    );
+  }
+  function saveChanges (order_id, new_customer_id, new_collection_id) {
+    // Change the customer
+    changeOrderCustomerId(order_id, new_customer_id).then((response) => {
+      console.log("Customer changed successfully:", response);
+      // Change the invoice collection
+      changeOrderInvoiceCollectionId(order_id, new_collection_id).then((response) => {
+        console.log("Invoice collection changed successfully:", response);
+        Swal.fire({
+          icon: 'success',
+          title: 'Faktura samling ændret',
+          timer: 2000,
+        })
+      }).catch((error) => {
+        console.error("Error changing invoice collection:", error);
+        Swal.fire({
+          icon: 'error',
+          title: 'Fejl ved ændring af faktura samling',
+          timer: 2000,
+        });
+      })
+    }).catch((error) => {
+      console.error("Error changing customer:", error);
+      Swal.fire({
+        icon: 'error',
+        title: 'Fejl ved ændring af kunde',
+        timer: 2000,
+      });
+    }).finally(() => {
+      // Wait 2 seconds before reloading the page
+      // This is to give the user time to see the success / error message
+      setTimeout(() => {
+        // Reload the page
+        window.location.reload();
+      }, 2000);
+    })
+  }
+  async function chooseInvoiceCollection(order_id, new_customer_id) {
+    // Select the new invoice collection
+    await SessionUser.objects.collectedOrderInvoices.functions.showInvoiceCollectionPickerForm(new_customer_id, (invoice_collection_id) => {
+      // Make sure it's valid
+      if (!invoice_collection_id) {
+        noInvoiceCollectionSelected();
+        return;
+      }
+      // Change the invoice collection in the database.
+      saveChanges(order_id, new_customer_id, invoice_collection_id);
+    });
+  }
+  // Show the customer search modal
+  // Define the new data.
+  let new_customer_id = null;
+  // Let the user select a customer
+  showCustomerSearchModal(async (customer_number) => {
+        // Store the new customer id
+        new_customer_id = customer_number;
+        // Make sure it's valid
+        if (!new_customer_id) {
+          noCustomerSelected();
+          return;
+        }
+        // Show the invoice collection picker form
+        console.log('Displaying invoice collection picker form for customer:', new_customer_id);
+        await chooseInvoiceCollection(id, new_customer_id);
+      }
+  );
+
 }
 
 const showChangeOrderInvoiceCollectionForm = async (id) => {
@@ -70,28 +163,52 @@ const showChangeOrderInvoiceCollectionForm = async (id) => {
     console.error("Ingen kunde fundet");
     return;
   }
-  let invoice_collection_id = null;
   // Select the invoice collection
-  invoice_collection_id = await SessionUser.objects.collectedOrderInvoices.functions.showInvoiceCollectionPickerForm(
-      customer_number
+  await SessionUser.objects.collectedOrderInvoices.functions.showInvoiceCollectionPickerForm(
+      customer_number,
+      (invoice_collection_id) => {
+        if (!invoice_collection_id) {
+          Swal.fire({
+            icon: 'error',
+            title: 'Ingen faktura samling valgt',
+            timer: 2000,
+          });
+          return;
+        }
+        // Handle the invoice collection selection here
+        console.log("Selected invoice collection:", invoice_collection_id);
+        console.log("Changing invoice collection for order:", id, " customer:", customer_number);
+        console.log("New invoice collection:", invoice_collection_id);
+        // Change the invoice collection
+        SessionUser.objects.orders.set.invoice_collection_id(
+            parseInt(id),
+            parseInt(invoice_collection_id)
+        )
+            .then((response) => {
+              console.log("Invoice collection changed successfully:", response);
+              Swal.fire({
+                icon: 'success',
+                title: 'Faktura samling ændret',
+                timer: 2000,
+              })
+            })
+            .catch((error) => {
+              console.error("Error changing invoice collection:", error);
+              Swal.fire({
+                icon: 'error',
+                title: 'Fejl ved ændring af faktura samling',
+                timer: 2000,
+              });
+            })
+      }
   ).finally(() => {
-    if (!invoice_collection_id) {
-      console.error("Ingen faktura samling valgt");
-      return;
-    }
-    // Get the invoice collection id
-    console.log("Selected invoice collection:", invoice_collection_id);
-    // Change the invoice collection
-    //changeInvoiceCollection(id, customer_number, invoiceCollection);
-  }).catch((error) => {
-    console.error(error);
-  });
-  if (!invoice_collection_id) {
-    console.error("Ingen faktura samling valgt");
-    return;
-  }
-  // Change the invoice collection
-  console.log("Selected invoice collection:", invoice_collection_id, "customer_number:", customer_number, "order_id:", id);
+    // Wait 2 seconds before reloading the page
+    // This is to give the user time to see the success / error message
+    setTimeout(() => {
+      // Reload the page
+      window.location.reload();
+    }, 2000);
+  })
 }
 
     /**