major claude changes

src/pages/customer/home.vue

@@ -105,107 +105,92 @@
   </div>
   <Footer />
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
 import axios from 'axios'
-
 import authHeader from '../../services/auth.header'
+import { customerService } from '../../services/customerService'
+import { Customer } 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'
 
-export default defineComponent({
-  name: 'CustomerHome',
+// Reactive data
+const token = ref(null)
+const user = ref(null)
+const customers = ref<Customer[]>([])
+const customer_count = ref(0)
+const page = ref(1)
+const perPage = ref(50)
+const recordsLength = ref(0)
+const options = ref({
+  edgeNavigation: false,
+  format: false,
+  template: PaginationComp
+})
 
-  components: {
-    Header,
-    SideBar,
-    Footer,
-  },
+// Functions
+const getPage = (pageVal: any) => {
+  customers.value = [];
+  get_customers(pageVal)
+  get_customer_count()
+}
 
-  data() {
-    return {
-      token: null,
-      user: null,
-      customers: [] as any[],
-      customer_count: 0,
-      page: 1,
-      perPage: 50,
-      recordsLength: 0,
-
-      options: {
-        edgeNavigation: false,
-        format: false,
-        template: PaginationComp
+const 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) {
+        user.value = response.data.user;
       }
+    })
+    .catch(() => {
+      user.value = null
+    })
+}
+
+const get_customers = async (pageVal: number) => {
+  try {
+    const response = await customerService.getAll(pageVal)
+    customers.value = response.data || []
+  } catch (error) {
+    console.error('Error fetching customers:', error)
+    customers.value = []
+  }
+}
+
+const get_customer_count = async () => {
+  try {
+    const response = await customerService.getCount()
+    if (response.data) {
+      customer_count.value = response.data.count
     }
-  },
+  } catch (error) {
+    console.error('Error fetching customer count:', error)
+  }
+}
 
-  created() {
-    this.userStatus()
-  },
-  mounted() {
-    this.getPage(this.page)
+const deleteCustomer = (user_id: any) => {
+  let path = import.meta.env.VITE_BASE_URL + '/customer/delete/' + user_id;
+  axios({
+    method: 'delete',
+    url: path,
+    headers: authHeader(),
+  }).then(() => {
+    get_customers(1)
+  })
+}
 
-  },
-  methods: {
-    getPage: function (page: any) {
-      // we simulate an api call that fetch the records from a backend
-      this.customers = [];
-      this.get_customers(page)
-      this.get_customer_count()
-    },
-    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
-        })
-    },
-    get_customers(page: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/customer/all/' + page;
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.customers = response.data
-      })
-    },
-    get_customer_count() {
-      let path = import.meta.env.VITE_BASE_URL + '/customer/count';
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.customer_count = response.data.count
-      })
-    },
-    deleteCustomer(user_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/customer/delete/' + user_id;
-      axios({
-        method: 'delete',
-        url: path,
-        headers: authHeader(),
-      }).then(() => {
-
-        this.get_customers(1)
-      })
-    },
-  },
+// Lifecycle
+onMounted(() => {
+  userStatus()
+  getPage(page.value)
 })
 </script>