major claude changes

src/pages/delivery/viewstatus/finalized.vue

@@ -121,109 +121,95 @@
   <Footer />
 </template>
   
-  <script lang="ts">
-  import {defineComponent} from 'vue'
-  import axios from 'axios'
-  import authHeader from '../../../services/auth.header'
-  import Header from '../../../layouts/headers/headerauth.vue'
-  import PaginationComp from '../../../components/pagination.vue'
-  import SideBar from '../../../layouts/sidebar/sidebar.vue'
-  import Footer from '../../../layouts/footers/footer.vue'
-  import {notify} from "@kyvg/vue3-notification";
-  
-  export default defineComponent({
-    name: 'deliveryFinalized',
-  
-    components: {
-      Header,
-      SideBar,
-      Footer,
-    },
-  
-    data() {
-      return {
-        token: null,
-        user: null,
-        deliveries: [] as any[], 
-        page: 1,
-        perPage: 50,
-        recordsLength: 0,
-        options: {
-          edgeNavigation: false,
-          format: false,
-          template: PaginationComp
-        }
-      }
-    },
-  
-    created() {
-      this.userStatus()
-    },
-    mounted() {
-      this.getPage(this.page)
-    },
-    methods: {
-      getPage: function (page: any) {
-        // we simulate an api call that fetch the records from a backend
-        this.deliveries = [];
-        this.get_oil_orders(page)
-      },
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import axios from 'axios'
+import authHeader from '../../../services/auth.header'
+import { deliveryService } from '../../../services/deliveryService'
+import { Delivery } from '../../../types/models'
+import Header from '../../../layouts/headers/headerauth.vue'
+import PaginationComp from '../../../components/pagination.vue'
+import SideBar from '../../../layouts/sidebar/sidebar.vue'
+import Footer from '../../../layouts/footers/footer.vue'
+import {notify} from "@kyvg/vue3-notification";
 
-      userStatus() {
-        let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
-        axios({
-          method: 'get',
-          url: path,
-          withCredentials: true,
-          headers: authHeader(),
-        })
-            .then((response: any) => {
-              if (response.data.ok) {
-                this.user = response.data.user;
-              }
-            })
-            .catch(() => {
-              this.user = null
-            })
-      },
+// Reactive data
+const token = ref(null)
+const user = ref(null)
+const deliveries = ref<Delivery[]>([])
+const page = ref(1)
+const perPage = ref(50)
+const recordsLength = ref(0)
+const options = ref({
+  edgeNavigation: false,
+  format: false,
+  template: PaginationComp
+})
 
-      get_oil_orders(page: any) {
-        let path = import.meta.env.VITE_BASE_URL + '/delivery/finalized/' + page;
-        axios({
-          method: 'get',
-          url: path,
-          headers: authHeader(),
-        }).then((response: any) => {
-          this.deliveries = response.data
-        })
-      },
+// Functions
+const getPage = (pageVal: any) => {
+  deliveries.value = [];
+  get_oil_orders(pageVal)
+}
 
-      deleteCall(delivery_id: any) {
-        let path = import.meta.env.VITE_BASE_URL + '/delivery/delete/' + delivery_id;
-        axios({
-          method: 'delete',
-          url: path,
-          headers: authHeader(),
-        }).then((response: any) => {
-          if (response.data.ok) {
-            notify({
-              title: "Success",
-              text: "deleted delivery",
-              type: "success",
-            });
-            this.getPage(this.page)
-          } else {
-            notify({
-              title: "Failure",
-              text: "error deleting delivery",
-              type: "success",
-            });
-          }
-        })
-      },
-    },
+const userStatus = () => {
+  let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+  axios({
+    method: 'get',
+    url: path,
+    withCredentials: true,
+    headers: authHeader(),
   })
-  </script>
+      .then((response: any) => {
+        if (response.data.ok) {
+          user.value = response.data.user;
+        }
+      })
+      .catch(() => {
+        user.value = null
+      })
+}
+
+const get_oil_orders = async (pageVal: number) => {
+  try {
+    const response = await deliveryService.getFinalized(pageVal)
+    deliveries.value = response.data || []
+  } catch (error) {
+    console.error('Error fetching finalized deliveries:', error)
+    deliveries.value = []
+  }
+}
+
+const deleteCall = (delivery_id: any) => {
+  let path = import.meta.env.VITE_BASE_URL + '/delivery/delete/' + delivery_id;
+  axios({
+    method: 'delete',
+    url: path,
+    headers: authHeader(),
+  }).then((response: any) => {
+    if (response.data.ok) {
+      notify({
+        title: "Success",
+        text: "deleted delivery",
+        type: "success",
+      });
+      getPage(page.value)
+    } else {
+      notify({
+        title: "Failure",
+        text: "error deleting delivery",
+        type: "success",
+      });
+    }
+  })
+}
+
+// Lifecycle
+onMounted(() => {
+  userStatus()
+  getPage(page.value)
+})
+</script>
   
   <style scoped>