Add customer notes component to collected order invoice

Introduced a new `CollectedOrderInvoiceCustomerNotes` component to display and manage customer notes. Updated related views and added a new filter option in the invoice orders pagination to enhance user filtering capabilities. Implemented error handling and loading states in the new component for better user experience.

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

@@ -171,7 +171,9 @@ if (props.autoLoad) {
             <select @change="setFilter('customer_id-has_key', $event.target.value, true);">
               <option value="*" selected>All</option>
               <option value="OtherSpecialArrangement">Har specialaftale</option>
+              <option value="!OtherSpecialArrangement">Har ikke specialaftale</option>
               <option value="OtherVaskeabonnement">Har vaskeabonnement</option>
+              <option value="!OtherVaskeabonnement">Har ikke vaskeabonnement</option>
             </select>
           </div>
         </div>

src/views/dashboards/superUserDashboard/collectedOrderInvoice/collectedOrderInvoice.vue

@@ -17,6 +17,8 @@ import UserOtherSpecialArrangement
 import UserOtherVaskeabonnement
   from "@/views/dashboards/superUserDashboard/user/displays/other/UserOtherVaskeabonnement.vue";
 import OrdersPagination from "@/components/displays/pagination/models/DepartmentPos/OrdersPagination.vue";
+import CollectedOrderInvoiceCustomerNotes
+  from "@/views/dashboards/superUserDashboard/collectedOrderInvoice/displays/collectedOrderInvoiceCustomerNotes.vue";
 
 // Get the id from the URL
 const router = useRouter();
@@ -79,6 +81,8 @@ getCollectedOrderInvoice();
         <UserOtherSpecialArrangement :user_id="user.id" class="mb-2" v-if="user" :readOnly="true"/>
         <!-- Vaskeabonnement -->
         <UserOtherVaskeabonnement :user_id="user.id" class="mb-6" v-if="user" :readOnly="true"/>
+        <!-- Customer notes -->
+        <CollectedOrderInvoiceCustomerNotes :user_id="user.id" class="mb-2" v-if="user" :readOnly="true"/>
         <!-- Manage -->
         <CollectedOrderInvoiceManage
             :invoiceId="parseInt(collectedOrderInvoiceId)"

src/views/dashboards/superUserDashboard/collectedOrderInvoice/displays/collectedOrderInvoiceCustomerNotes.vue

@@ -1,17 +1,73 @@
 <script setup>
 import { ref, defineProps } from 'vue';
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { parseError, hasError, getError} from "@/components/request/HandleGlobalError.vue";
+import ShowErrorField from "@/components/global/ShowErrorField.vue";
+import PosNotes from "@/components/displays/department/pos/PosNotes.vue";
 
 const props = defineProps({
-  customer_id: Number
+  user_id: Number,
 });
 
+const uniqueId = () => {
+  return Math.random().toString(36).substring(2, 15);
+};
+const notes = ref(null);
+const isLoaded = ref(false);
+const isLoading = ref(false);
+const uniqueElementId = uniqueId();
 
+const getNotes = async () => {
+  isLoading.value = true;
+  // Get the notes
+  await SessionUser.request(
+      '/customer/notes',
+      'GET',
+      {
+        user_id: props.user_id,
+      }
+  ).then((response) => {
+    // Check if the key exists
+    try {
+      if (response.data.data) {
+        notes.value = response.data.data;
+        isLoaded.value = true;
+      }
+    } catch (e) {
+      parseError(e, uniqueElementId);
+    }
+    isLoading.value = false;
+  }).catch((error) => {
+    parseError(error, uniqueElementId);
+    isLoading.value = false;
+  });
+};
+
+getNotes();
 </script>
 
 <template>
   <div>
-    <h1>CollectedOrderInvoiceCustomerNotes</h1>
+    <template v-if="!isLoaded && !isLoading">
+      <!-- Check if there is an error -->
+      <template v-if="hasError(uniqueElementId)">
+        <ShowErrorField :error="uniqueElementId" />
+      </template>
+      <template v-else>
+        <p>Unable to load notes, but no error was found.</p>
+      </template>
+    </template>
+    <template v-else-if="isLoading">
+      <progress class="progress is-small is-link" max="100">Loading...</progress>
+    </template>
+    <template v-else>
+      <pos-notes
+          :notes="notes"
+          :isAddFormVisible="true"
+          :isOldNotesVisible="true"
+          :isLabelVisible="true"
+          />
+    </template>
   </div>
 </template>