fix: resolve TypeScript build errors for production builds

- Add local AxiosResponse/AxiosError interfaces to models.ts as workaround
  for bundler moduleResolution issues with axios types
- Update 7 payment Vue files to import axios types from local models
- Convert axios.get<T>() generic calls to typed .then() response callbacks
- Fix type narrowing in getTypeColor(), getEmployeeTypeName() functions
- Add Number() conversion for tank_size arithmetic in auto preauth
- Use 'as unknown as' for Delivery to DeliveryFormData type assertions
- Fix incorrect import paths for sidebar/footer in delivery/create.vue

Production build (npm run build) now completes successfully.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/pages/customer/profile/profile/TransactionsTable.vue

@@ -125,7 +125,7 @@ const getSourceText = (transaction: AuthorizeTransaction) => {
   }
 }
 const formatDate = (dateStr: string) => dateStr.split('T')[0]; // YYYY-MM-DD
-const getTypeColor = (transactionType: number) => {
+const getTypeColor = (transactionType: number | undefined) => {
   switch (transactionType) {
     case 1: return 'text-blue-600';    // Auth
     case 0: return 'text-orange-600';   // Charge

src/pages/delivery/create.vue

@@ -312,8 +312,8 @@ import axios from 'axios'
 import authHeader from '../../services/auth.header'
 import { Customer, CreditCard, CreateCardRequest } from '../../types/models'
 import Header from '../../layouts/headers/headerauth.vue'
-import SideBar from '../../../layouts/sidebar/sidebar.vue'
-import Footer from '../../../layouts/footers/footer.vue'
+import SideBar from '../../layouts/sidebar/sidebar.vue'
+import Footer from '../../layouts/footers/footer.vue'
 import { useVuelidate } from "@vuelidate/core";
 import { notify } from "@kyvg/vue3-notification"
 import { minLength, required, requiredIf } from "@vuelidate/validators";

src/pages/employee/changepassword.vue

@@ -130,7 +130,8 @@ export default defineComponent({
           });
         });
     },
-    getEmployeeTypeName(typeId: number | string): string {
+    getEmployeeTypeName(typeId: number | string | undefined): string {
+      if (typeId === undefined) return 'Unknown Role';
       const typeMap: { [key: string]: string } = {
         '0': 'Owner', '1': 'Manager', '2': 'Secretary', '3': 'Office',
         '4': 'Driver', '5': 'Service Tech', '6': 'Contractor', '7': 'Cash Driver', '8': 'Driver/Tech'

src/pages/employee/home.vue

@@ -161,7 +161,8 @@ export default defineComponent({
             console.error("Failed to fetch employees:", error);
         });
     },
-    getEmployeeTypeName(typeId: number | string): string {
+    getEmployeeTypeName(typeId: number | string | undefined): string {
+      if (typeId === undefined) return 'Unknown Role';
       const typeMap: { [key: string]: string } = {
         '0': 'Owner', '1': 'Manager', '2': 'Secretary', '3': 'Office',
         '4': 'Driver', '5': 'Service Tech', '6': 'Contractor', '7': 'Cash Driver', '8': 'Driver/Tech'

src/pages/pay/auto/authorize_precharge_autho.vue

@@ -205,10 +205,12 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import axios, { AxiosResponse, AxiosError } from 'axios'
+import axios from 'axios'
 import authHeader from '../../../services/auth.header'
 import { notify } from "@kyvg/vue3-notification"
 import type {
+  AxiosResponse,
+  AxiosError,
   CustomerFormData,
   CreditCardFormData,
   PricingData,
@@ -496,7 +498,7 @@ const setGallons = (gallons: number) => {
 }
 
 const calculateGallonsToFill = () => {
-  return autoDelivery.value.tank_size - autoDelivery.value.estimated_gallons_left
+  return Number(autoDelivery.value.tank_size) - autoDelivery.value.estimated_gallons_left
 }
 
 const calculateSubtotal = () => {

src/pages/pay/auto/capture_authorize_autho.vue

@@ -240,10 +240,12 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import axios, { AxiosResponse, AxiosError } from 'axios'
+import axios from 'axios'
 import authHeader from '../../../services/auth.header'
 import { notify } from "@kyvg/vue3-notification"
 import type {
+  AxiosResponse,
+  AxiosError,
   CustomerFormData,
   CreditCardFormData,
   PricingData,
@@ -439,8 +441,8 @@ const getPaymentCard = (card_id: number | string) => {
 
 const getCustomer = (user_id: number | string) => {
   const path = `${import.meta.env.VITE_BASE_URL}/customer/${user_id}`;
-  axios.get<CustomerFormData>(path, { withCredentials: true })
-    .then((response) => {
+  axios.get(path, { withCredentials: true })
+    .then((response: AxiosResponse<CustomerFormData>) => {
       customer.value = response.data;
     })
     .catch((error: Error) => {
@@ -471,8 +473,8 @@ const getCustomerDescription = (user_id: number | string) => {
 
 const getTransaction = () => {
   const path = `${import.meta.env.VITE_AUTHORIZE_URL}/api/auto/transaction/delivery/${route.params.id}`;
-  axios.get<AuthorizeNetTransactionResponse>(path, { withCredentials: true, headers: authHeader() })
-    .then((response) => {
+  axios.get(path, { withCredentials: true, headers: authHeader() })
+    .then((response: AxiosResponse<AuthorizeNetTransactionResponse>) => {
       transaction.value = response.data;
       preAuthAmount.value = parseFloat(String(response.data.preauthorize_amount) || '0');
       if (response.data.status !== 0) { // Not approved

src/pages/pay/oil/authorize_preauthcharge.vue

@@ -175,10 +175,12 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import axios, { AxiosResponse, AxiosError } from 'axios'
+import axios from 'axios'
 import authHeader from '../../../services/auth.header'
 import { notify } from "@kyvg/vue3-notification"
 import type {
+  AxiosResponse,
+  AxiosError,
   DeliveryFormData,
   CustomerFormData,
   CreditCardFormData,
@@ -454,7 +456,7 @@ const getOilOrder = (delivery_id: number | string) => {
   })
     .then((response: AxiosResponse<DeliveryOrderResponse>) => {
       if (response.data && response.data.ok) {
-        delivery.value = response.data.delivery as DeliveryFormData;
+        delivery.value = response.data.delivery as unknown as DeliveryFormData;
         getCustomer(delivery.value.customer_id)
         getCreditCards(delivery.value.customer_id)
         if (delivery.value.promo_id != null) {

src/pages/pay/oil/capture_authorize.vue

@@ -281,13 +281,15 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import axios, { AxiosResponse, AxiosError } from 'axios'
+import axios from 'axios'
 import authHeader from '../../../services/auth.header'
 import Header from '../../../layouts/headers/headerauth.vue'
 import SideBar from '../../../layouts/sidebar/sidebar.vue'
 import Footer from '../../../layouts/footers/footer.vue'
 import { notify } from "@kyvg/vue3-notification"
 import type {
+  AxiosResponse,
+  AxiosError,
   CustomerFormData,
   CreditCardFormData,
   PricingData,
@@ -447,10 +449,10 @@ const getPromo = (promo_id: number) => {
 
 const getOilOrder = (delivery_id: number | string) => {
   const path = `${import.meta.env.VITE_BASE_URL}/delivery/order/${delivery_id}`;
-  axios.get<DeliveryOrderResponse>(path, { withCredentials: true, headers: authHeader() })
-    .then((response) => {
+  axios.get(path, { withCredentials: true, headers: authHeader() })
+    .then((response: AxiosResponse<DeliveryOrderResponse>) => {
       if (response.data && response.data.ok) {
-        deliveryOrder.value = response.data.delivery as typeof deliveryOrder.value;
+        deliveryOrder.value = response.data.delivery as unknown as typeof deliveryOrder.value;
         gallonsDelivered.value = deliveryOrder.value.gallons_delivered;
         getCustomer(deliveryOrder.value.customer_id);
         sumdelivery(delivery_id);
@@ -472,8 +474,8 @@ const getOilOrder = (delivery_id: number | string) => {
 
 const getPaymentCard = (card_id: number | string) => {
   const path = `${import.meta.env.VITE_BASE_URL}/payment/card/${card_id}`;
-  axios.get<PaymentCardResponse>(path, { withCredentials: true })
-    .then((response) => {
+  axios.get(path, { withCredentials: true })
+    .then((response: AxiosResponse<PaymentCardResponse>) => {
       if (response.data.userCard && response.data.userCard.card_number !== '') {
         userCard.value = response.data.userCard as CreditCardFormData;
         userCardfound.value = true;
@@ -487,8 +489,8 @@ const getPaymentCard = (card_id: number | string) => {
 
 const getCustomer = (user_id: number) => {
   const path = `${import.meta.env.VITE_BASE_URL}/customer/${user_id}`;
-  axios.get<CustomerFormData>(path, { withCredentials: true })
-    .then((response) => {
+  axios.get(path, { withCredentials: true })
+    .then((response: AxiosResponse<CustomerFormData>) => {
       customer.value = response.data;
     })
     .catch((error: Error) => {
@@ -499,8 +501,8 @@ const getCustomer = (user_id: number) => {
 
 const getOilPricing = () => {
   const path = `${import.meta.env.VITE_BASE_URL}/info/price/oil/table`;
-  axios.get<OilPricingResponse>(path, { withCredentials: true })
-    .then((response) => {
+  axios.get(path, { withCredentials: true })
+    .then((response: AxiosResponse<OilPricingResponse>) => {
       pricing.value = response.data;
       // Calculate capture amount if delivery order is already loaded
       calculateCaptureAmount();
@@ -513,8 +515,8 @@ const getOilPricing = () => {
 
 const getTransaction = () => {
   const path = `${import.meta.env.VITE_AUTHORIZE_URL}/api/transaction/delivery/${route.params.id}`;
-  axios.get<AuthorizeNetTransactionResponse>(path, { withCredentials: true, headers: authHeader() })
-    .then((response) => {
+  axios.get(path, { withCredentials: true, headers: authHeader() })
+    .then((response: AxiosResponse<AuthorizeNetTransactionResponse>) => {
       transaction.value = response.data;
       preAuthAmount.value = parseFloat(String(response.data.preauthorize_amount) || '0');
       if (response.data.status !== 0) { // Not approved

src/pages/pay/oil/pay_oil.vue

@@ -338,12 +338,13 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import axios, { AxiosResponse } from 'axios'
+import axios from 'axios'
 import authHeader from '../../../services/auth.header'
 import Header from '../../../layouts/headers/headerauth.vue'
 import SideBar from '../../../layouts/sidebar/sidebar.vue'
 import Footer from '../../../layouts/footers/footer.vue'
 import type {
+  AxiosResponse,
   DeliveryFormData,
   CustomerFormData,
   CreditCardFormData,
@@ -588,7 +589,7 @@ const getOilOrder = (delivery_id: number | string) => {
       if (response.data && response.data.ok) {
         console.log("=== DEBUG: Delivery data from API:", response.data.delivery);
         console.log("=== DEBUG: Delivery ID from API:", response.data.delivery?.id);
-        delivery.value = response.data.delivery as DeliveryFormData;
+        delivery.value = response.data.delivery as unknown as DeliveryFormData;
         console.log("=== DEBUG: Delivery object after assignment:", delivery.value);
         console.log("=== DEBUG: Delivery ID after assignment:", delivery.value.id);
         getCustomer(delivery.value.customer_id)

src/pages/pay/service/authorize_preauthcharge.vue

@@ -157,10 +157,12 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import axios, { AxiosResponse, AxiosError } from 'axios'
+import axios from 'axios'
 import authHeader from '../../../services/auth.header'
 import { notify } from "@kyvg/vue3-notification"
 import type {
+  AxiosResponse,
+  AxiosError,
   CustomerFormData,
   CreditCardFormData,
   WhoAmIResponse

src/pages/pay/service/pay_service.vue

@@ -274,10 +274,12 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import axios, { AxiosResponse, AxiosError } from 'axios'
+import axios from 'axios'
 import authHeader from '../../../services/auth.header'
 import { ServiceCall, ServicePart, CreditCard, Customer } from '../../../types/models'
 import type {
+  AxiosResponse,
+  AxiosError,
   WhoAmIResponse,
   CardsOnFileResponse,
   AuthorizeCheckResponse,
@@ -466,8 +468,8 @@ const getServicePartsForCustomer = () => {
   if (!service.value.customer_id) return;
 
   let path = `${import.meta.env.VITE_BASE_URL}/service/parts/customer/${service.value.customer_id}`;
-  axios.get<ServicePart[]>(path, { headers: authHeader() })
-    .then((response) => {
+  axios.get(path, { headers: authHeader() })
+    .then((response: AxiosResponse<ServicePart[]>) => {
       serviceParts.value = response.data;
     })
     .catch((error: Error) => {

src/types/models.ts

@@ -5,6 +5,24 @@
  * to replace 'any' types throughout the application.
  */
 
+// Local type definitions for Axios (workaround for bundler moduleResolution issue)
+export interface AxiosResponse<T = any, D = any> {
+  data: T;
+  status: number;
+  statusText: string;
+  headers: Record<string, string>;
+  config: any;
+  request?: any;
+}
+
+export interface AxiosError<T = unknown, D = any> extends Error {
+  config?: any;
+  code?: string;
+  request?: any;
+  response?: AxiosResponse<T, D>;
+  isAxiosError: boolean;
+}
+
 import {
   DeliveryStatusType,
   PaymentStatusType,