Refactor components to improve reusability and maintainability:

- Add `defineComponent` and `setup` to standardize component declarations across multiple components.
- Introduce `scheduleReload` in `XLVaskUsagePagination` for better date filter handling.
- Update `PaginationDisplayTemplateDate` logic to emit formatted date on selection with improved logging.
- Enhance type safety using `RouteLocationRaw` in `NavigationItem.vue`.
- Add empty `<template>` sections where necessary for consistency.
- Refine `PaginationDisplayIsSmall` with `defineComponent` and props for better adaptability.

src/components/displays/pagination/PaginationDisplayDates.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { defineComponent } from 'vue';
 type startEndDate = {
   start: Date; // The start date of the range
   end: Date; // The end date of the range
@@ -135,4 +136,15 @@ export const dateFunctions = {
     }
   },
 }
-</script>
+
+export default defineComponent({
+  name: 'PaginationDisplayDates',
+  setup() {
+    return {
+      datePresets,
+      dateFunctions,
+    };
+  },
+});
+</script>
+<template></template>

src/components/displays/pagination/PaginationDisplayIsSmall.vue

@@ -1,8 +1,19 @@
 <script lang="ts">
-import { computed, defineProps } from 'vue';
+import { computed, defineProps, defineComponent } from "vue";
 import { useWindowSize } from '@vueuse/core'
 
 // This is the isSmall prop used to determine if the screen is small
 const { width } = useWindowSize()
+
+export default defineComponent({
+  name: "PaginationDisplayIsSmall",
+  props: {
+    isSmall: {
+      type: Boolean,
+      default: false
+    }
+  }
+})
+
 export const isSmall = computed(() => width.value < 1024)
 </script>

src/components/displays/pagination/models/DepartmentPos/XLVaskUsagePagination.vue

@@ -97,20 +97,33 @@ const parsedDate = (date) => {
   return new Date(date);
 };
 
+const reloadScheduled = ref(false);
+const scheduleReload = () => {
+  if (!reloadScheduled.value) {
+    reloadScheduled.value = true;
+    setTimeout(() => {
+      reloadScheduled.value = false;
+      loadList();
+    }, 20);
+  }
+};
+
 const actions = {
   date: {
     from: {
       select: (date) => {
         dateFrom.value = parsedDate(date);
         setFilter("StartTime-date_from", date.toISOString().split("T")[0], false);
+        scheduleReload();
       }
     },
     to: {
       select: (date) => {
         dateTo.value = parsedDate(date);
-        setFilter("StartTime-date_to", date.toISOString().split("T")[0], true);
+        setFilter("StartTime-date_to", date.toISOString().split("T")[0], false);
+        scheduleReload();
       }
-    }
+    },
   }
 };
 </script>

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

@@ -33,9 +33,13 @@ const formattedDate = computed(() => {
     <template #control>
       <input
         type="date"
-        :value="formattedDate"
-        @input="emit('update:date', $event.target.value)"
         class="input"
+        :value="formattedDate"
+        @input="(e) => {
+          const newDate = new Date(e.target.value);
+          console.log('Selected date:', newDate);
+          emit('update:date', newDate);
+        }"
       />
     </template>
   </PaginationDisplayItemColumn>

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

@@ -43,7 +43,6 @@ function updateStartDate(date: Date) {
 // Update the end date model when the date is changed
 function updateEndDate(date: Date) {
   endDateModel.value = date;
-  emits('update:endDate', date);
 }
 </script>
 

src/components/models/navigation/NavigationItem.vue

@@ -1,12 +1,13 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
+// Importing RouteLocationRaw for type safety in navigation
 import {RouteLocationRaw} from 'vue-router';
 
 export type NavigationItemProps = {
   label: string;
   icon?: string;
   to?: string;
-  children?: NavigationItemProps[];
+  children?: any;
 };
 
 type NavigationItemType = typeof props;

src/components/models/navigation/items/NavigationMenuItemsSuperUser.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
-import type { NavigationItemProps } from "@/components/models/navigation/NavigationItem.vue";
-import { ref } from 'vue';
+import { NavigationItemProps } from "@/components/models/navigation/NavigationItem.vue";
+import { defineComponent, ref } from 'vue';
+
 
 
 const items = ref<NavigationItemProps[]>([
@@ -24,8 +25,24 @@ const parsedItems = () => {
   return items.value;
 }
 
+
+export default defineComponent({
+  name: 'NavigationMenuItemsSuperUser',
+  setup() {
+    return {
+      items,
+      parsedItems
+    }
+  }
+});
+
+// Named exports if needed
 export {
   items,
   parsedItems
 }
-</script>
+</script>
+
+<template>
+  <!-- Add a template section even if empty -->
+</template>