refactor(frontend): migrate Customer domain to centralized API services

- Replaced all direct axios imports with service layer calls across 8 customer files
- Migrated core pages: home.vue, create.vue, edit.vue
- Migrated profile pages: profile.vue (1100+ lines), TankEstimation.vue
- Migrated supporting pages: ServicePlanEdit.vue, tank/edit.vue, list.vue

Services integrated:
- customerService: CRUD, descriptions, tank info, automatic status
- authService: authentication and Authorize.net account management
- paymentService: credit cards, transactions, payment authorization
- deliveryService: delivery records and automatic delivery data
- serviceService: service calls, parts, and service plans
- adminService: statistics, social comments, and reports
- queryService: dropdown data (customer types, states)

Type safety improvements:
- Updated paymentService.ts with accurate AxiosResponse types
- Fixed response unwrapping to match api.ts interceptor behavior
- Resolved all TypeScript errors in customer domain (0 errors)

Benefits:
- Consistent authentication via centralized interceptors
- Standardized error handling across all API calls
- Improved type safety with proper TypeScript interfaces
- Single source of truth for API endpoints
- Better testability through mockable services

Verified with vue-tsc --noEmit - all customer domain files pass type checking

src/pages/customer/home.vue

@@ -42,16 +42,18 @@
             <tbody>
               <tr v-for="person in customers" :key="person.id" class="hover:bg-blue-600 hover:text-white">
                 <td>
-                  <router-link :to="{ name: 'customerProfile', params: { id: person.id } }" class="link link-hover">
+                  <router-link v-if="person.id" :to="{ name: 'customerProfile', params: { id: person.id } }" class="link link-hover">
                     {{ person.account_number }}
                   </router-link>
+                  <span v-else>{{ person.account_number }}</span>
+                </td>
+                <td>
+                  <router-link v-if="person.id" :to="{ name: 'customerProfile', params: { id: person.id } }" class="link link-hover hover:text-green-500">{{ person.customer_first_name }} {{ person.customer_last_name }}</router-link>
+                  <span v-else>{{ person.customer_first_name }} {{ person.customer_last_name }}</span>
                 </td>
-                <td><router-link :to="{ name: 'customerProfile', params: { id: person.id } }" class="link link-hover hover:text-green-500">{{ person.customer_first_name }} {{ person.customer_last_name }}</router-link></td>
                 <td>{{ person.customer_town }}</td>
                 <td><span :class="person.customer_automatic ? 'text-success' : 'text-gray-500'">{{ person.customer_automatic ? 'Yes' : 'No' }}</span></td>
                 <td>{{ person.customer_phone_number }}</td>
-              
-             
               </tr>
             </tbody>
           </table>
@@ -63,9 +65,10 @@
             <div class="card-body p-4">
               <div class="flex justify-between items-start">
                 <div>
-                  <router-link :to="{ name: 'customerProfile', params: { id: person.id } }" class="hover:text-green-500">
+                  <router-link v-if="person.id" :to="{ name: 'customerProfile', params: { id: person.id } }" class="hover:text-green-500">
                     <h2 class="card-title text-base">{{ person.customer_first_name }} {{ person.customer_last_name }}</h2>
                   </router-link>
+                  <h2 v-else class="card-title text-base">{{ person.customer_first_name }} {{ person.customer_last_name }}</h2>
                   <p class="text-xs text-gray-400">#{{ person.account_number }}</p>
                 </div>
                 <div class="badge" :class="person.customer_automatic ? 'badge-success' : 'badge-ghost'">
@@ -76,7 +79,7 @@
                 <p>{{ person.customer_town }}</p>
                 <p>{{ person.customer_phone_number }}</p>
               </div>
-              <div class="card-actions justify-end flex-wrap gap-2 mt-2">
+              <div v-if="person.id" class="card-actions justify-end flex-wrap gap-2 mt-2">
                 <router-link :to="{ name: 'deliveryCreate', params: { id: person.id } }" class="btn btn-sm btn-primary">
                   New Delivery
                 </router-link>
@@ -106,10 +109,9 @@
   <Footer />
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import axios from 'axios'
-import authHeader from '../../services/auth.header'
+import { ref, onMounted, markRaw } from 'vue'
 import { customerService } from '../../services/customerService'
+import { authService } from '../../services/authService'
 import { Customer } from '../../types/models'
 import Header from '../../layouts/headers/headerauth.vue'
 import PaginationComp from '../../components/pagination.vue'
@@ -127,7 +129,7 @@ const recordsLength = ref(0)
 const options = ref({
   edgeNavigation: false,
   format: false,
-  template: PaginationComp
+  template: markRaw(PaginationComp)
 })
 
 // Functions
@@ -138,13 +140,7 @@ const getPage = (pageVal: any) => {
 }
 
 const userStatus = () => {
-  let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
-  axios({
-    method: 'get',
-    url: path,
-    withCredentials: true,
-    headers: authHeader(),
-  })
+  authService.whoami()
     .then((response: any) => {
       if (response.data.ok) {
         user.value = response.data.user;
@@ -158,7 +154,7 @@ const userStatus = () => {
 const get_customers = async (pageVal: number) => {
   try {
     const response = await customerService.getAll(pageVal)
-    customers.value = response.data || []
+    customers.value = response.data?.customers || []
   } catch (error) {
     console.error('Error fetching customers:', error)
     customers.value = []
@@ -176,13 +172,8 @@ const get_customer_count = async () => {
   }
 }
 
-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(() => {
+const deleteCustomer = (user_id: number) => {
+  customerService.delete(user_id).then(() => {
     get_customers(1)
   })
 }