major claude changes

src/pages/customer/list.vue

@@ -16,11 +16,11 @@
       <tbody>
         <tr v-for="customer in customers" :key="customer.account_number">
           <td>{{ customer.account_number }}</td>
-          <td>{{ customer.first_name }}</td>
-          <td>{{ customer.last_name }}</td>
-          <td>{{ customer.address }}</td>
-          <td>{{ customer.town }}</td>
-          <td>{{ customer.phone_number }}</td>
+          <td>{{ customer.customer_first_name }}</td>
+          <td>{{ customer.customer_last_name }}</td>
+          <td>{{ customer.customer_address }}</td>
+          <td>{{ customer.customer_town }}</td>
+          <td>{{ customer.customer_phone_number }}</td>
         </tr>
       </tbody>
     </table>
@@ -28,50 +28,38 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import axios from 'axios';
-import authHeader from '../../services/auth.header';
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import axios from 'axios'
+import authHeader from '../../services/auth.header'
+import { Customer } from '../../types/models'
 
-interface Customer {
-  account_number: string;
-  first_name: string;
-  last_name: string;
-  address: string;
-  town: string;
-  phone_number: string;
+// Reactive data
+const customers = ref<Customer[]>([])
+
+// Functions
+const fetchCustomers = () => {
+  let path = import.meta.env.VITE_BASE_URL + '/report/customers/list';
+  axios({
+    method: 'get',
+    url: path,
+    withCredentials: true,
+    headers: authHeader(),
+  })
+    .then((response: any) => {
+      if (response.data.ok) {
+        customers.value = response.data.customers;
+      }
+    })
+    .catch((error: unknown) => {
+      console.error('Error fetching customer data:', error);
+    });
 }
 
-export default defineComponent({
-  name: 'CustomerList',
-  data() {
-    return {
-      customers: [] as Customer[]
-    };
-  },
-  created() {
-    this.fetchCustomers();
-  },
-  methods: {
-    fetchCustomers() {
-      let path = import.meta.env.VITE_BASE_URL + '/report/customers/list';
-      axios({
-        method: 'get',
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
-        .then((response: any) => {
-          if (response.data.ok) {
-            this.customers = response.data.customers;
-          }
-        })
-        .catch((error: unknown) => {
-          console.error('Error fetching customer data:', error);
-        });
-    }
-  }
-});
+// Lifecycle
+onMounted(() => {
+  fetchCustomers();
+})
 </script>
 
 <style scoped>