Updated auto finalize button

src/layouts/headers/headerauth.vue

@@ -236,6 +236,7 @@ export default defineComponent({
       user: {} as User,
       currentPhone: '',
       routingOptions: [
+        { value: 'main', label: '407323' },
         { value: 'sip', label: '407323_auburnoil' },
         { value: 'cellphone1', label: 'Ed Cell' },
         { value: 'cellphone2', label: 'Aneta Cell' },

src/pages/automatic/home.vue

@@ -28,23 +28,28 @@
               <thead>
                 <tr>
                   <!-- SORTABLE HEADERS -->
-                  <th @click="sortBy('tank_level_percent')" :class="sortKey === 'tank_level_percent' ? 'cursor-pointer hover:text-white bg-orange-500' : 'cursor-pointer hover:text-white'">
+                  <th @click="sortBy('tank_level_percent')"
+                    :class="sortKey === 'tank_level_percent' ? 'cursor-pointer hover:text-white bg-orange-500' : 'cursor-pointer hover:text-white'">
                     Tank Level
                     <span v-if="sortKey === 'tank_level_percent'">{{ sortAsc ? '▲' : '▼' }}</span>
                   </th>
-                  <th @click="sortBy('days_since_last_fill')" :class="sortKey === 'days_since_last_fill' ? 'cursor-pointer hover:text-white bg-orange-500' : 'cursor-pointer hover:text-white'">
+                  <th @click="sortBy('days_since_last_fill')"
+                    :class="sortKey === 'days_since_last_fill' ? 'cursor-pointer hover:text-white bg-orange-500' : 'cursor-pointer hover:text-white'">
                     Days Since Fill
                     <span v-if="sortKey === 'days_since_last_fill'">{{ sortAsc ? '▲' : '▼' }}</span>
                   </th>
-                  <th @click="sortBy('customer_full_name')" :class="sortKey === 'customer_full_name' ? 'cursor-pointer hover:text-white bg-orange-500' : 'cursor-pointer hover:text-white'">
+                  <th @click="sortBy('customer_full_name')"
+                    :class="sortKey === 'customer_full_name' ? 'cursor-pointer hover:text-white bg-orange-500' : 'cursor-pointer hover:text-white'">
                     Name
                     <span v-if="sortKey === 'customer_full_name'">{{ sortAsc ? '▲' : '▼' }}</span>
                   </th>
-                  <th @click="sortBy('house_factor')" :class="sortKey === 'house_factor' ? 'cursor-pointer hover:text-white bg-orange-500' : 'cursor-pointer hover:text-white'">
+                  <th @click="sortBy('house_factor')"
+                    :class="sortKey === 'house_factor' ? 'cursor-pointer hover:text-white bg-orange-500' : 'cursor-pointer hover:text-white'">
                     Usage Factor
                     <span v-if="sortKey === 'house_factor'">{{ sortAsc ? '▲' : '▼' }}</span>
                   </th>
-                  <th @click="sortBy('hot_water_summer')" :class="sortKey === 'hot_water_summer' ? 'cursor-pointer hover:text-white bg-orange-500' : 'cursor-pointer hover:text-white'">
+                  <th @click="sortBy('hot_water_summer')"
+                    :class="sortKey === 'hot_water_summer' ? 'cursor-pointer hover:text-white bg-orange-500' : 'cursor-pointer hover:text-white'">
                     Hot Water Tank
                     <span v-if="sortKey === 'hot_water_summer'">{{ sortAsc ? '▲' : '▼' }}</span>
                   </th>
@@ -54,25 +59,23 @@
               </thead>
               <tbody>
                 <!-- Loop over the new 'sortedDeliveries' computed property -->
-                <tr v-for="oil in sortedDeliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white" :class="{ 'bg-yellow-400 text-black' : oil.auto_status == 3 }">
+                <tr v-for="oil in sortedDeliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white"
+                  :class="{ 'bg-yellow-400 text-black': oil.auto_status == 3 }">
                   <td>
                     <div v-if="oil.last_fill === null" class="text-gray-500">New Auto</div>
                     <div v-else class="flex items-center gap-3">
-                      <progress class="progress w-24" 
+                      <progress class="progress w-24" :value="oil.estimated_gallons_left" :max="oil.tank_size" :class="{
-                        :value="oil.estimated_gallons_left" 
-                        :max="oil.tank_size"
-                        :class="{
                         'progress-success': getTankLevelPercentage(oil) > 60,
                         'progress-warning': getTankLevelPercentage(oil) >= 25 && getTankLevelPercentage(oil) <= 60,
                         'progress-error': getTankLevelPercentage(oil) < 25
-                        }"
+                      }"></progress>
-                      ></progress>
                       <span class="font-mono text-xs">{{ oil.estimated_gallons_left }} / {{ oil.tank_size }} gal</span>
                     </div>
                   </td>
                   <td>{{ oil.days_since_last_fill }} days</td>
                   <td>
-                    <router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
+                    <router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }"
+                      class="link link-hover">
                       {{ oil.customer_full_name }}
                     </router-link>
                   </td>
@@ -82,10 +85,15 @@
                   <td class="text-right">
                     <div class="flex items-center justify-end gap-2">
                       <!-- <router-link :to="{ name: 'customerEdit', params: { id: oil.customer_id } }" class="btn btn-sm btn-secondary">Edit Customer</router-link> -->
-                     <router-link v-if="oil.auto_status != 3" :to="{ name: 'payAutoAuthorize', params: { id: oil['id'] } }">
+                      <router-link v-if="oil.auto_status != 3"
+                        :to="{ name: 'payAutoAuthorize', params: { id: oil['id'] } }">
                         <button class="btn btn-primary btn-sm">Preauthorize</button>
                       </router-link>
-                   <router-link v-if="oil.auto_status == 3" :to="{ name: 'finalizeTicketAuto', params: { id: oil.open_ticket_id || oil['id'] } }">
+                      <router-link :to="{ name: 'finalizeTicketAutoNocc', params: { id: oil['id'] } }">
+                        <button class="btn btn-secondary btn-sm">Finalize</button>
+                      </router-link>
+                      <router-link v-if="oil.auto_status == 3"
+                        :to="{ name: 'finalizeTicketAuto', params: { id: oil.open_ticket_id || oil['id'] } }">
                         <button class="btn btn-secondary btn-sm">Finalize</button>
                       </router-link>
                       <router-link :to="{ name: 'TicketAuto', params: { id: oil['id'] } }">
@@ -130,26 +138,29 @@
                     <label class="label p-0 mb-1"><span class="label-text">Tank Level</span></label>
                     <div v-if="oil.last_fill === null" class="text-gray-500 text-sm">New Auto Customer</div>
                     <div v-else>
-                      <progress class="progress w-full"
+                      <progress class="progress w-full" :value="oil.estimated_gallons_left" :max="oil.tank_size" :class="{
-                        :value="oil.estimated_gallons_left"
-                        :max="oil.tank_size"
-                        :class="{
                         'progress-success': getTankLevelPercentage(oil) > 60,
                         'progress-warning': getTankLevelPercentage(oil) >= 25 && getTankLevelPercentage(oil) <= 60,
                         'progress-error': getTankLevelPercentage(oil) < 25
-                        }"
+                      }"></progress>
-                      ></progress>
+                      <div class="text-xs text-gray-400 text-right">{{ oil.estimated_gallons_left }} / {{ oil.tank_size
-                      <div class="text-xs text-gray-400 text-right">{{ oil.estimated_gallons_left }} / {{ oil.tank_size }} gal estimated</div>
+                        }} gal estimated</div>
                     </div>
                   </div>
                 </div>
 
                 <div class="card-actions justify-end flex-wrap gap-2 mt-4">
-                  <router-link :to="{ name: 'customerEdit', params: { id: oil.customer_id } }" class="btn btn-sm btn-secondary">Edit Customer</router-link>
+                  <router-link :to="{ name: 'customerEdit', params: { id: oil.customer_id } }"
-                  <router-link v-if="oil.auto_status != 3" :to="{ name: 'payAutoAuthorize', params: { id: oil['id'] } }">
+                    class="btn btn-sm btn-secondary">Edit Customer</router-link>
+                  <router-link v-if="oil.auto_status != 3"
+                    :to="{ name: 'payAutoAuthorize', params: { id: oil['id'] } }">
                     <button class="btn btn-primary btn-sm">Preauthorize</button>
                   </router-link>
-                   <router-link v-if="oil.auto_status == 3" :to="{ name: 'finalizeTicketAuto', params: { id: oil.open_ticket_id || oil['id'] } }">
+                  <router-link :to="{ name: 'finalizeTicketAutoNocc', params: { id: oil['id'] } }">
+                    <button class="btn btn-secondary btn-sm">Finalize</button>
+                  </router-link>
+                  <router-link v-if="oil.auto_status == 3"
+                    :to="{ name: 'finalizeTicketAuto', params: { id: oil.open_ticket_id || oil['id'] } }">
                     <button class="btn btn-secondary btn-sm">Finalize</button>
                   </router-link>
                   <router-link :to="{ name: 'TicketAuto', params: { id: oil['id'] } }">
@@ -290,7 +301,7 @@ export default defineComponent({
         });
     },
     get_oil_orders() {
-      const path = import.meta.env.VITE_BASE_URL + '/customer/automatic/deliveries';
+  const path = import.meta.env.VITE_AUTO_URL + '/delivery/all/customers';
       axios.get(path, { withCredentials: true, headers: authHeader() })
         .then((response: any) => {
           this.deliveries = response.data;

src/pages/customer/profile/profile.vue

@@ -57,10 +57,9 @@
             />
           </div>
           
-          <AutomaticDeliveries v-if="automatic_status === 1 && autodeliveries.length > 0" :deliveries="autodeliveries" />
-          
           <HistoryTabs
             :deliveries="deliveries"
+            :autodeliveries="autodeliveries"
             :service-calls="serviceCalls"
             :transactions="transactions"
             @open-service-modal="openEditModal"
@@ -283,7 +282,6 @@ import TankInfo from './profile/TankInfo.vue';
 import EquipmentParts from './profile/EquipmentParts.vue';
 import CreditCards from './profile/CreditCards.vue';
 import CustomerComments from './profile/CustomerComments.vue';
-import AutomaticDeliveries from './profile/AutomaticDeliveries.vue';
 import HistoryTabs from './profile/HistoryTabs.vue';
 
 
@@ -370,7 +368,6 @@ export default defineComponent({
     EquipmentParts,
     CreditCards,
     CustomerComments,
-    AutomaticDeliveries,
     HistoryTabs,
   },
   data() {
@@ -603,7 +600,7 @@ export default defineComponent({
       })
     },
     getCustomerAutoDelivery(userid: any) {
-      let path = import.meta.env.VITE_AUTO_URL + '/delivery/all/profile/' + userid ;
+      let path = import.meta.env.VITE_AUTO_URL + '/delivery/all/profile/profile/' + userid ;
       axios({
         method: 'get',
         url: path,

src/pages/customer/profile/profile/HistoryTabs.vue

@@ -21,6 +21,38 @@
     <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-4" v-show="activeTab === 'transactions'">
       <TransactionsTable :transactions="transactions" />
     </div>
+
+    <a role="tab" class="tab [--tab-bg:oklch(var(--b1))] text-base-content" :class="{ 'tab-active': activeTab === 'automatic' }" @click="activeTab = 'automatic'" >
+      Automatic Deliveries
+    </a>
+    <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-4" v-show="activeTab === 'automatic'">
+      <div class="overflow-x-auto">
+        <table class="table table-sm w-full">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Name</th>
+              <th>Gallons</th>
+              <th>Date</th>
+              <th>View</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="auto in autodeliveries" :key="auto.id" class="hover">
+              <td>{{ auto.id }}</td>
+              <td>{{ auto.customer_full_name }}</td>
+              <td>{{ auto.gallons_delivered }}</td>
+              <td>{{ auto.fill_date }}</td>
+              <td>
+                <router-link :to="{ name: 'automaticView', params: { id: auto.id } }">
+                  <button class="btn btn-xs btn-primary">View</button>
+                </router-link>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -42,6 +74,13 @@ interface Delivery {
   expected_delivery_date: string;
 }
 
+interface AutomaticDelivery {
+  id: number;
+  customer_full_name: string;
+  gallons_delivered: number | string;
+  fill_date: string;
+}
+
 interface ServiceCall {
   id: number;
   scheduled_date: string;
@@ -69,6 +108,7 @@ interface Transaction {
 // 2. Define the Props interface
 interface Props {
   deliveries: Delivery[];
+  autodeliveries: AutomaticDelivery[];
   serviceCalls: ServiceCall[];
   transactions: Transaction[];
 }

src/pages/delivery/routes.ts

@@ -14,6 +14,7 @@ import deliveryFinalized from './viewstatus/finalized.vue'
 import deliveryTommorrow from './viewstatus/tommorrow.vue'
 import finalizeTicket from './update_tickets/finalize_ticket.vue';
 import finalizeTicketAuto from './update_tickets/finalize_ticket_auto.vue';
+import finalizeTicketAutoNocc from './update_tickets/finalize_ticket_auto_nocc.vue';
 
 const deliveryRoutes = [
     {
@@ -92,6 +93,11 @@ const deliveryRoutes = [
         name: 'finalizeTicketAuto',
         component: finalizeTicketAuto,
     },
+    {
+        path: '/delivery/tickets/finalize/auto/nocc/:id',
+        name: 'finalizeTicketAutoNocc',
+        component: finalizeTicketAutoNocc,
+    },
 
 ]
 

src/pages/delivery/update_tickets/finalize_ticket_auto.vue

@@ -369,7 +369,7 @@
               type: "error",
             });
           });
-      },//TODO STUCK HERE !!!!!!!!!
+      },
        getAutoTicket(delivery_id: any) {
         let path = import.meta.env.VITE_AUTO_URL + "/delivery/autoticket/" + delivery_id;
         axios({
@@ -416,7 +416,6 @@
             });
           });
       },
-//TODO STUCK HERE !!!!!!!!!
       today_price_oil() {
       let path = import.meta.env.VITE_BASE_URL + '/info/price/oil'
       axios({

src/pages/delivery/update_tickets/finalize_ticket_auto_nocc.vue

@@ -0,0 +1,569 @@
+<!-- src/pages/delivery/update_tickets/finalize_ticket_auto.vue -->
+<template>
+  <div class="flex">
+
+    <!-- Main container with responsive horizontal padding -->
+    <div class="w-full px-4 md:px-6 py-4">
+      <div class="text-sm breadcrumbs">
+        <ul>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li><router-link :to="{ name: 'customer' }">Customers</router-link></li>
+          <li v-if="customer && customer.id">
+            <router-link :to="{ name: 'customerProfile', params: { id: customer.id } }">
+              {{ customer.customer_first_name }} {{ customer.customer_last_name }}
+            </router-link>
+          </li>
+          <li>Finalize Auto Ticket</li>
+        </ul>
+      </div>
+
+      <!-- Page Header -->
+      <div class="flex flex-wrap justify-between items-center gap-2 mt-4">
+        <h1 class="text-3xl font-bold">
+          Auto Delivery #{{ autoDelivery.id }}
+        </h1>
+        <router-link v-if="customer.id > 0" :to="{ name: 'customerProfile', params: { id: customer.id } }">
+          <button class="btn btn-sm btn-secondary">Customer Profile</button>
+        </router-link>
+      </div>
+
+      <!-- NEW LAYOUT: A single 2-column grid for the whole page -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
+
+        <!-- LEFT COLUMN: All Display Information -->
+        <div class="space-y-4">
+
+          <!-- Customer Info Card -->
+          <div class="bg-neutral rounded-lg p-5">
+            <div class="text-xl font-bold mb-2">Customer</div>
+            <!-- This section uses your original v-if logic -->
+            <div>
+              <div class="font-bold">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</div>
+              <div>{{ customer.customer_address }}</div>
+              <div v-if="customer.customer_apt && customer.customer_apt !== 'None'">{{ customer.customer_apt }}</div>
+              <div>
+                {{ customer.customer_town }},
+                <span v-if="customer.customer_state == 0">Massachusetts</span>
+                <span v-else-if="customer.customer_state == 1">Rhode Island</span>
+                <span v-else-if="customer.customer_state == 2">New Hampshire</span>
+                <span v-else-if="customer.customer_state == 3">Maine</span>
+                <span v-else-if="customer.customer_state == 4">Vermont</span>
+                <span v-else-if="customer.customer_state == 5">Maine</span>
+                <span v-else-if="customer.customer_state == 6">New York</span>
+                <span v-else>Unknown state</span>
+                {{ customer.customer_zip }}
+              </div>
+              <div class="mt-2 text-sm">
+                {{ customer.customer_phone_number }}
+                (<span v-if="customer.customer_home_type == 0">Residential</span>
+                <span v-else-if="customer.customer_home_type == 1">apartment</span>
+                <span v-else-if="customer.customer_home_type == 2">condo</span>
+                <span v-else-if="customer.customer_home_type == 3">commercial</span>
+                <span v-else-if="customer.customer_home_type == 4">business</span>
+                <span v-else-if="customer.customer_home_type == 5">construction</span>
+                <span v-else-if="customer.customer_home_type == 6">container</span>)
+              </div>
+            </div>
+          </div>
+
+          <!-- Payment & Pricing Card -->
+          <div class="bg-neutral rounded-lg p-5">
+            <h3 class="text-xl font-bold mb-4">Payment & Pricing</h3>
+            <div class="space-y-4">
+              <div>
+                <div class="font-bold text-sm">Today's Price / Gallon</div>
+                <div class="text-lg font-mono">${{ Number(today_oil_price).toFixed(2) }}</div>
+              </div>
+
+              <div>
+                <div class="font-bold text-sm">Payment Method</div>
+                <div v-if="!userCardfound" class="text-warning text-sm">No card on file for this customer.</div>
+                <div v-if="userCardfound" class="mt-2 p-3 rounded-lg border bg-primary/10 border-primary">
+                  <div class="font-bold text-sm">{{ userCard.name_on_card }}</div>
+                  <div class="text-xs opacity-70">{{ userCard.type_of_card }}</div>
+                  <div class="mt-1 text-sm font-mono tracking-wider">
+                    <p>{{ userCard.card_number }}</p>
+                    <p>{{ userCard.security_number }}</p>
+                    <p>Exp: {{ userCard.expiration_month }} / {{ userCard.expiration_year }}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+
+        <!-- RIGHT COLUMN: Finalize Form -->
+        <div class="space-y-4">
+          <div v-if="customer.id > 0" class="bg-base-100 rounded-lg p-5">
+            <h2 class="text-2xl font-bold mb-4">Finalize Auto Delivery</h2>
+            <form class="space-y-4" @submit.prevent="onSubmit">
+              <div>
+                <label class="label"><span class="label-text font-bold">Gallons Delivered</span></label>
+                <input v-model="FinalizeOilOrderForm.gallons_delivered"
+                  class="input input-bordered input-sm w-full max-w-xs" type="number" placeholder="# gallons" />
+              </div>
+
+              <div class="pt-2">
+                <button type="submit" class="btn btn-success btn-sm">Finalize Delivery</button>
+              </div>
+            </form>
+          </div>
+          <div v-else class="bg-base-100 rounded-lg p-5">
+            <h2 class="text-2xl font-bold mb-4 text-error">Error</h2>
+            <p>Customer information not found. Please check the automatic delivery data.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <Footer />
+</template>
+
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+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 useValidate from "@vuelidate/core";
+import { notify } from "@kyvg/vue3-notification"
+
+
+export default defineComponent({
+  name: 'finalizeTicketAuto',
+
+  components: {
+    Header,
+    SideBar,
+    Footer,
+  },
+
+  data() {
+    return {
+      v$: useValidate(),
+      loaded: false,
+      user: {
+        id: 0
+      },
+      userCardfound: false,
+      deliveryStatus: [],
+      userCards: [],
+      deliveryNotesDriver: [],
+      today_oil_price: 0,
+
+      FinalizeOilOrderForm: {
+        fill_location: 0,
+        check_number: 0,
+        delivery_status: 10,
+        userCards: [],
+        credit_card_id: 0,
+        driver: 0,
+        gallons_delivered: '',
+        customer_filled: false,
+        prime: false,
+        same_day: false,
+        emergency: false,
+      },
+      CreateOilOrderForm: {
+        basicInfo: {
+          gallons_delivered: '',
+          userCards: []
+        },
+      },
+      userCard: {
+        date_added: '',
+        user_id: '',
+        card_number: '',
+        last_four_digits: '',
+        name_on_card: '',
+        expiration_month: '',
+        expiration_year: '',
+        type_of_card: '',
+        security_number: '',
+        accepted_or_declined: '',
+        main_card: '',
+      },
+      customer: {
+        id: 0,
+        user_id: 0,
+        customer_address: '',
+        customer_first_name: '',
+        customer_last_name: '',
+        customer_town: '',
+        customer_state: 0,
+        customer_zip: '',
+        customer_apt: '',
+        customer_home_type: 0,
+        customer_phone_number: '',
+      },
+      customerDescription: {
+        customer_id: 0,
+        account_number: '',
+        company_id: 0,
+        fill_location: 0,
+        description: '',
+      },
+
+
+      autoTicket: {
+        id: 0,
+        customer_id: '',
+        account_number: '',
+
+        customer_town: '',
+        customer_state: '',
+        customer_address: '',
+        customer_zip: '',
+        customer_full_name: '',
+
+        oil_prices_id: '',
+        fill_date: '',
+        gallons_delivered: '',
+        price_per_gallon: '',
+
+        total_amount_customer: '',
+
+        payment_type: '',
+        payment_card_id: '',
+        payment_status: '',
+        open_ticket_id: 0
+
+      },
+
+      autoDelivery: {
+        id: 0,
+        customer_id: 0,
+        account_number: '',
+        customer_town: '',
+        customer_state: 0,
+        customer_address: '',
+        customer_zip: '',
+        customer_full_name: '',
+        last_fill: '',
+        days_since_last_fill: 0,
+        last_updated: '',
+        estimated_gallons_left: 0,
+        estimated_gallons_left_prev_day: 0,
+        tank_height: '',
+        tank_size: '',
+        house_factor: 0,
+        auto_status: 0,
+        open_ticket_id: null,
+      },
+
+    }
+  },
+
+  created() {
+    this.userStatus()
+  },
+  watch: {
+    $route() {
+      this.today_price_oil();
+      this.getAutoTicket(this.$route.params.id);
+    },
+  },
+  mounted() {
+    this.today_price_oil();
+    this.getAutoDelivery(this.$route.params.id);
+
+
+  },
+
+  methods: {
+    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;
+            this.user.id = response.data.user_id;
+          }
+        })
+    },
+
+
+    getPaymentCard(card_id: any) {
+      let path = import.meta.env.VITE_BASE_URL + "/payment/card/" + card_id;
+      axios({
+        method: "get",
+        url: path,
+        withCredentials: true,
+      })
+        .then((response: any) => {
+
+          if (response.data.userCard.card_number === '') {
+            this.userCard === null;
+            this.userCardfound = false;
+          }
+          else {
+            this.userCard = response.data;
+            this.userCardfound = true;
+          }
+          this.FinalizeOilOrderForm.userCards = response.data.id
+        })
+        .catch(() => {
+        });
+    },
+    getPaymentCards(user_id: any) {
+      let path = import.meta.env.VITE_BASE_URL + "/payment/cards/" + user_id;
+      axios({
+        method: "get",
+        url: path,
+        withCredentials: true,
+      })
+        .then((response: any) => {
+          this.userCards = response.data;
+          if (this.userCards && this.userCards.length > 0) {
+            this.userCardfound = true;
+            this.userCard = this.userCards.find((card: any) => card.main_card) || this.userCards[0];
+          }
+        })
+        .catch(() => {
+        });
+    },
+    getCustomer(userid: any) {
+      let path = import.meta.env.VITE_BASE_URL + '/customer/' + userid;
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        this.customer = response.data
+      })
+    },
+    getCreditCards(userid: any) {
+      let path = import.meta.env.VITE_BASE_URL + '/payment/cards/' + userid;
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        this.userCards = response.data;
+        if (this.userCards && this.userCards.length > 0) {
+          this.userCardfound = true;
+          this.userCard = this.userCards.find((card: any) => card.main_card) || this.userCards[0];
+        }
+      })
+    },
+    getCustomerDescription(user_id: any) {
+      let path = import.meta.env.VITE_BASE_URL + "/customer/description/" + user_id;
+      axios({
+        method: "get",
+        url: path,
+        withCredentials: true,
+      })
+        .then((response: any) => {
+          this.customerDescription = response.data;
+          this.loaded = true
+        })
+        .catch(() => {
+          notify({
+            title: "Error",
+            text: "Could not find customer",
+            type: "error",
+          });
+        });
+    },
+    getAutoTicket(delivery_id: any) {
+      let path = import.meta.env.VITE_AUTO_URL + "/delivery/autoticket/" + delivery_id;
+      axios({
+        method: "get",
+        url: path,
+        withCredentials: true,
+      })
+        .then((response: any) => {
+          this.autoTicket = response.data;
+          this.getCustomer(this.autoTicket.customer_id)
+
+          this.getAutoDelivery(this.autoTicket.id)
+          this.getCustomerDescription(this.autoTicket.customer_id)
+
+        })
+        .catch(() => {
+          notify({
+            title: "Error",
+            text: "Could not get automatic",
+            type: "error",
+          });
+        });
+    },
+
+    getAutoDelivery(delivery_id: any) {
+      let path = import.meta.env.VITE_AUTO_URL + "/delivery/delivery/" + delivery_id;
+      axios({
+        method: "get",
+        url: path,
+        withCredentials: true,
+      })
+        .then((response: any) => {
+          if (response.data && response.data.customer_id) {
+            this.autoDelivery = response.data;
+            this.getCustomer(this.autoDelivery.customer_id)
+            this.getCreditCards(this.autoDelivery.customer_id)
+          } else {
+            console.error("API Error:", response.data.error || "Failed to fetch auto delivery data.");
+          }
+        })
+        .catch((error: any) => {
+          console.error("API Error in getAutoDelivery:", error);
+          notify({
+            title: "Error",
+            text: "Could not get automatic delivery",
+            type: "error",
+          });
+        });
+    },
+    today_price_oil() {
+      let path = import.meta.env.VITE_BASE_URL + '/info/price/oil'
+      axios({
+        method: "get",
+        url: path,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+        .then((response: any) => {
+          this.today_oil_price = response.data.price_for_customer;
+        })
+    },
+    UpdateAuto(payload: {
+      gallons: string,
+      delivery_id: string,
+    }) {
+      let path = import.meta.env.VITE_AUTO_URL + "/confirm/delivery"
+      axios({
+        method: "put",
+        url: path,
+        data: payload,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+        .then((response: any) => {
+          if (response.data.ok) {
+            notify({
+              text: 'Update',
+              type: 'postive',
+              title: 'top'
+            })
+            this.$router.push({ name: "auto" });
+          }
+          else {
+            notify({
+              text: 'Auto Failure',
+              type: 'negative',
+              title: 'Update'
+            })
+          }
+        })
+    },
+
+
+
+
+
+
+    UpdateDeliveredAuto(payload: {
+      gallons_delivered: string,
+    }) {
+      let path = import.meta.env.VITE_AUTO_URL + "/confirm/auto/update/" + this.autoDelivery.id;
+      axios({
+        method: "put",
+        url: path,
+        data: payload,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+        .then((response: any) => {
+          if (response.data) {
+            notify({
+              title: "Success",
+              text: "Auto Updated",
+              type: "success",
+            });
+            // Removed redirect from here, will handle in onSubmit
+          }
+        })
+    },
+
+
+
+    CreateTransaction(auto_ticket_id: string,) {
+      let path = import.meta.env.VITE_MONEY_URL + "/delivery/add/auto/" + auto_ticket_id;
+      axios({
+        method: "post",
+        url: path,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+        .then((response: any) => {
+          if (response.status == 201) {
+            notify({
+              message: 'Confirmed Transaction',
+              type: 'positive',
+              position: 'top'
+            })
+          }
+          else {
+            notify({
+              message: 'Form Error',
+              type: 'negative',
+              position: 'top'
+            })
+          }
+        })
+    },
+
+    ConfirmAuto(payload: {
+      gallons_delivered: string,
+    }) {
+      let path = import.meta.env.VITE_AUTO_URL + "/confirm/auto/create/nopreauth/" + this.autoDelivery.id;
+      axios({
+        method: "post",
+        url: path,
+        data: payload,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+        .then((response: any) => {
+          if (response.data) {
+            notify({
+              title: "Success",
+              text: "Auto Delivered",
+              type: "success",
+            });
+            this.CreateTransaction(response.data['0']['auto_ticket_id'])
+          }
+          if (response.data.error) {
+            notify({
+              title: "Error",
+              text: "Could not finalize auto",
+              type: "error",
+            });
+            this.$router.push("auto");
+          }
+        })
+    },
+    onSubmit() {
+      let payload = {
+        gallons_delivered: this.FinalizeOilOrderForm.gallons_delivered,
+      };
+      this.UpdateDeliveredAuto(payload);
+
+      this.ConfirmAuto(payload)
+      this.$router.push({ name: "auto" });
+
+    },
+
+  },
+})
+</script>
+
+<style scoped></style>

src/pages/pay/oil/pay_oil.vue

@@ -225,14 +225,18 @@
           <!-- Actions Card -->
           <div class="bg-neutral rounded-lg p-5">
              <div class="flex flex-wrap gap-4 justify-between items-center">
-                <!-- Pay Authorize Button -->
+                <!-- Pay Authorize Button - hidden when payment_type is 0 (Cash) -->
-                <button class="btn btn-success" :class="{ 'btn-disabled': !authorizeCheck.valid_for_charging }" :disabled="!authorizeCheck.valid_for_charging" @click="$router.push({ name: 'authorizePreauthCharge', params: { id: $route.params.id } })">
+                <button v-if="delivery.payment_type !== 0" class="btn btn-success" :class="{ 'btn-disabled': !authorizeCheck.valid_for_charging }" :disabled="!authorizeCheck.valid_for_charging" @click="$router.push({ name: 'authorizePreauthCharge', params: { id: $route.params.id } })">
                   Pay Authorize.net
                 </button>
-                <!-- A single confirm button is cleaner -->
+                <!-- Pay Tiger Button - hidden when payment_type is 0 (Cash) -->
-                <button class="btn btn-warning" @click="checkoutOilUpdatePayment(1)">
+                <button v-if="delivery.payment_type !== 0" class="btn btn-warning" @click="checkoutOilUpdatePayment(1)">
                   Pay Tiger
                 </button>
+                <!-- Pay Cash Button - shown only when payment_type is 0 (Cash) -->
+                <button v-if="delivery.payment_type === 0" class="btn btn-success" @click="$router.push({ name: 'deliveryOrder', params: { id: $route.params.id } })">
+                  Pay Cash
+                </button>
                 <router-link v-if="delivery && delivery.id" :to="{ name: 'deliveryEdit', params: { id: delivery.id } }">
                   <button class="btn btn-sm btn-primary">Edit Delivery</button>
                 </router-link>