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/service/ServiceCalendar.vue

@@ -82,23 +82,35 @@ const handleEventClick = (clickInfo: EventClickArg): void => {
   };
 }
 
+// Fetch events function for FullCalendar
+const fetchCalendarEvents = async (
+  fetchInfo: { startStr: string; endStr: string },
+  successCallback: (events: any[]) => void,
+  failureCallback: (error: Error) => void
+) => {
+  try {
+    const path = `${import.meta.env.VITE_BASE_URL}/service/all`;
+    const response = await axios.get(path, {
+      headers: authHeader(),
+      withCredentials: true,
+    });
+    // Backend returns { ok: true, events: [...] }
+    const events = response.data?.events || [];
+    successCallback(events);
+  } catch (error) {
+    console.error("Failed to fetch calendar events:", error);
+    failureCallback(error as Error);
+  }
+};
+
 // Calendar options
 const calendarOptions = ref({
   plugins: [dayGridPlugin, interactionPlugin],
   initialView: 'dayGridMonth',
   weekends: true,
-  // Instead of a static array, we use a function source.
-  // This is the standard way FullCalendar fetches events.
-  events: `${import.meta.env.VITE_BASE_URL}/service/all`,
+  // Use function source to fetch events with auth headers and transform response
+  events: fetchCalendarEvents,
   eventClick: handleEventClick,
-  // Add headers for authentication if needed by your API
-  eventSourceSuccess: (content) => {
-      // This is where you could transform data if needed
-      return content;
-  },
-  eventSourceFailure: (error) => {
-      console.error("Failed to fetch calendar events:", error);
-  }
 } as CalendarOptions)
 
 // Lifecycle

src/pages/service/ServiceHome.vue

@@ -189,7 +189,8 @@ const fetchUpcomingServices = async (): Promise<void> => {
       headers: authHeader(),
       withCredentials: true,
     });
-    services.value = response.data.sort((a: ServiceCall, b: ServiceCall) => b.id - a.id);
+    const serviceList = response.data?.services || [];
+    services.value = serviceList.sort((a: ServiceCall, b: ServiceCall) => b.id - a.id);
   } catch (error) {
     console.error("Failed to fetch upcoming service calls:", error);
   } finally {

src/pages/service/ServicePast.vue

@@ -220,7 +220,8 @@ const fetchPastServices = async (): Promise<void> => {
       headers: authHeader(),
       withCredentials: true,
     });
-    services.value = response.data.sort((a: ServiceCall, b: ServiceCall) => b.id - a.id);
+    const serviceList = response.data?.services || [];
+    services.value = serviceList.sort((a: ServiceCall, b: ServiceCall) => b.id - a.id);
   } catch (error) {
     console.error("Failed to fetch past service calls:", error);
   } finally {

src/pages/service/ServicePlans.vue

@@ -151,7 +151,8 @@ const fetchServicePlans = async (): Promise<void> => {
       headers: authHeader(),
       withCredentials: true,
     });
-    servicePlans.value = response.data;
+    // Backend returns { ok: true, plans: [...] }
+    servicePlans.value = response.data?.plans || [];
   } catch (error) {
     console.error("Failed to fetch service plans:", error);
   } finally {

src/pages/service/ServiceToday.vue

@@ -220,7 +220,8 @@ const fetchTodayServices = async (): Promise<void> => {
       headers: authHeader(),
       withCredentials: true,
     });
-    services.value = response.data.sort((a: ServiceCall, b: ServiceCall) => b.id - a.id);
+    const serviceList = response.data?.services || [];
+    services.value = serviceList.sort((a: ServiceCall, b: ServiceCall) => b.id - a.id);
   } catch (error) {
     console.error("Failed to fetch today's service calls:", error);
   } finally {

src/pages/service/calender/CalendarCustomer.vue

@@ -157,8 +157,9 @@ const getCustomer = async (customerId: string): Promise<void> => {
   try {
     const path = `${import.meta.env.VITE_BASE_URL}/customer/${customerId}`;
     const response = await axios.get(path, { withCredentials: true, headers: authHeader() });
-    if (response.data && response.data.id) {
-      customer.value = response.data;
+    const customerData = response.data?.customer || response.data;
+    if (customerData && customerData.id) {
+      customer.value = customerData;
     }
   } catch (error) {
     console.error("API call to get customer FAILED:", error);
@@ -171,7 +172,7 @@ const fetchEvents = async (): Promise<void> => {
   try {
     const path = `${import.meta.env.VITE_BASE_URL}/service/all`;
     const response = await axios.get(path, { headers: authHeader(), withCredentials: true });
-    calendarOptions.value.events = response.data;
+    calendarOptions.value.events = response.data?.events || [];
   } catch (error) {
     console.error("Error fetching all calendar events:", error);
   }