Working authorize needs work

Dockerfile.dev

@@ -3,6 +3,7 @@ FROM node:20.11.1
 ENV VITE_BASE_URL="http://localhost:9510"
 ENV VITE_AUTO_URL="http://localhost:9514"
 ENV VITE_MONEY_URL="http://localhost:9513"
+ENV VITE_AUTHORIZE_URL="http://localhost:9516"
 ENV VITE_COMPANY_ID='1'
 
 

Dockerfile.local

@@ -3,7 +3,7 @@ FROM node:20.11.1 AS builder
 ENV VITE_BASE_URL="http://192.168.1.204:9610"
 ENV VITE_AUTO_URL="http://192.168.1.204:9614"
 ENV VITE_MONEY_URL="http://192.168.1.204:9613"
-
+ENV VITE_AUTHORIZE_URL="http://localhost:9516"
 ENV VITE_COMPANY_ID='1'
 
 WORKDIR /app

Dockerfile.prod

@@ -5,6 +5,7 @@ FROM node:20.11.1 AS builder
 ENV VITE_BASE_URL="https://apioil.edwineames.com"
 ENV VITE_AUTO_URL="https://apiauto.edwineames.com"
 ENV VITE_MONEY_URL="https://apimoney.edwineames.com"
+ENV VITE_AUTHORIZE_URL="https://apicard.edwineames.com"
 
 WORKDIR /app
 

src/components/PaymentAuthorizePopup.vue

@@ -0,0 +1,276 @@
+<template>
+  <div v-if="show" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+    <div class="bg-base-100 rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
+      <!-- Header -->
+      <div class="flex justify-between items-center p-6 border-b">
+        <h2 class="text-2xl font-bold">Payment Authorization</h2>
+        <button @click="close" class="btn btn-ghost btn-sm">✕</button>
+      </div>
+
+      <!-- Content -->
+      <div class="p-6 space-y-6">
+        <!-- Amount Input -->
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text font-semibold">Charge Amount</span>
+          </label>
+          <input
+            v-model="chargeAmount"
+            type="number"
+            step="0.01"
+            class="input input-bordered"
+            placeholder="Enter amount"
+            :disabled="loading"
+          />
+        </div>
+
+        <!-- Charge Breakdown -->
+        <div class="bg-neutral rounded-lg p-4">
+          <h3 class="text-lg font-semibold mb-4">Charge Breakdown</h3>
+          <div class="space-y-2">
+            <div class="flex justify-between">
+              <span>Gallons Ordered:</span>
+              <span>{{ delivery.gallons_ordered || 0 }} gallons</span>
+            </div>
+            <div class="flex justify-between">
+              <span>Price per Gallon:</span>
+              <span>${{ delivery.customer_price || 0 }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span>Subtotal:</span>
+              <span>${{ calculateSubtotal() }}</span>
+            </div>
+            <div v-if="delivery.prime == 1" class="flex justify-between text-sm">
+              <span>Prime Fee:</span>
+              <span>+ ${{ pricing.price_prime || 0 }}</span>
+            </div>
+            <div v-if="delivery.same_day == 1" class="flex justify-between text-sm">
+              <span>Same Day Fee:</span>
+              <span>+ ${{ pricing.price_same_day || 0 }}</span>
+            </div>
+            <div v-if="delivery.emergency == 1" class="flex justify-between text-sm">
+              <span>Emergency Fee:</span>
+              <span>+ ${{ pricing.price_emergency || 0 }}</span>
+            </div>
+            <div v-if="promoActive" class="flex justify-between text-success">
+              <span>{{ promo.name_of_promotion }}:</span>
+              <span>- ${{ discount }}</span>
+            </div>
+            <hr class="my-2">
+            <div class="flex justify-between font-bold">
+              <span>Total:</span>
+              <span>${{ promoActive ? totalAmountAfterDiscount : totalAmount }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Credit Card Display -->
+        <div v-if="selectedCard" class="bg-neutral rounded-lg p-4">
+          <h3 class="text-lg font-semibold mb-4">Payment Method</h3>
+          <div class="bg-base-100 p-4 rounded-md">
+            <div class="flex justify-between items-center mb-2">
+              <div class="font-semibold">{{ selectedCard.type_of_card }}</div>
+              <div v-if="selectedCard.main_card" class="badge badge-primary">Primary</div>
+            </div>
+            <div class="font-mono text-sm">
+              <div>**** **** **** {{ selectedCard.last_four_digits }}</div>
+              <div>{{ selectedCard.name_on_card }}</div>
+              <div>Expires: {{ selectedCard.expiration_month }}/{{ selectedCard.expiration_year }}</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Error Message -->
+        <div v-if="error" class="alert alert-error">
+          <span>{{ error }}</span>
+        </div>
+
+        <!-- Success Message -->
+        <div v-if="success" class="alert alert-success">
+          <span>{{ success }}</span>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="flex justify-end gap-4 p-6 border-t">
+        <button @click="close" class="btn btn-ghost" :disabled="loading">Cancel</button>
+        <button
+          @click="handlePreauthorize"
+          class="btn btn-warning"
+          :disabled="loading || !chargeAmount"
+        >
+          <span v-if="loading && action === 'preauthorize'" class="loading loading-spinner loading-sm"></span>
+          Preauthorize
+        </button>
+        <button
+          @click="handleChargeNow"
+          class="btn btn-primary"
+          :disabled="loading || !chargeAmount"
+        >
+          <span v-if="loading && action === 'charge'" class="loading loading-spinner loading-sm"></span>
+          Charge Now
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import axios from 'axios'
+import { notify } from "@kyvg/vue3-notification"
+
+export default defineComponent({
+  name: 'PaymentAuthorizePopup',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    delivery: {
+      type: Object,
+      required: true
+    },
+    customer: {
+      type: Object,
+      required: true
+    },
+    creditCards: {
+      type: Array,
+      default: () => []
+    },
+    pricing: {
+      type: Object,
+      required: true
+    },
+    promoActive: {
+      type: Boolean,
+      default: false
+    },
+    promo: {
+      type: Object,
+      default: () => ({})
+    },
+    totalAmount: {
+      type: Number,
+      required: true
+    },
+    totalAmountAfterDiscount: {
+      type: Number,
+      required: true
+    },
+    discount: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: ['close', 'payment-success'],
+  data() {
+    return {
+      chargeAmount: 0,
+      loading: false,
+      action: '', // 'preauthorize' or 'charge'
+      error: '',
+      success: ''
+    }
+  },
+  computed: {
+    selectedCard(): any {
+      // Find the card that matches the delivery's payment_card_id
+      return this.creditCards.find((card: any) => card.id === this.delivery.payment_card_id)
+    }
+  },
+  watch: {
+    show(newVal) {
+      if (newVal) {
+        // Pre-populate with total amount when popup opens
+        this.chargeAmount = this.promoActive ? this.totalAmountAfterDiscount : this.totalAmount
+        this.error = ''
+        this.success = ''
+      }
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('close')
+    },
+
+    calculateSubtotal() {
+      const gallons = this.delivery.gallons_ordered || 0
+      const pricePerGallon = this.delivery.customer_price || 0
+      return (gallons * pricePerGallon).toFixed(2)
+    },
+
+    async handlePreauthorize() {
+      await this.processPayment('preauthorize')
+    },
+
+    async handleChargeNow() {
+      await this.processPayment('charge')
+    },
+
+    async processPayment(actionType: string) {
+      if (!this.selectedCard) {
+        this.error = 'No credit card found for this customer'
+        return
+      }
+
+      this.loading = true
+      this.action = actionType
+      this.error = ''
+      this.success = ''
+
+      try {
+        const endpoint = actionType === 'preauthorize' ? 'authorize' : 'charge'
+        const payload = {
+          card_number: (this.selectedCard as any).card_number,
+          expiration_date: `${(this.selectedCard as any).expiration_month}${(this.selectedCard as any).expiration_year}`,
+          cvv: (this.selectedCard as any).security_number,
+          [actionType === 'preauthorize' ? 'preauthorize_amount' : 'charge_amount']: this.chargeAmount.toString(),
+          transaction_type: actionType === 'preauthorize' ? 1 : 0,
+          service_id: this.delivery.service_id || null,  // Add service_id from delivery
+          delivery_id: this.delivery.id,  // Add delivery_id from delivery
+          card_id: (this.selectedCard as any).id  // Add card_id from selected card
+        }
+
+        console.log('=== DEBUG: PaymentAuthorizePopup payload ===')
+        console.log('Delivery object:', this.delivery)
+        console.log('Delivery ID:', this.delivery.id)
+        console.log('Service ID:', this.delivery.service_id)
+        console.log('Final payload being sent:', payload)
+
+        const response = await axios.post(
+          `${import.meta.env.VITE_AUTHORIZE_URL}/api/${endpoint}/?customer_id=${this.customer.id}`,
+          payload,
+          { withCredentials: true }
+        )
+
+        if (response.data && response.data.status === 0) {
+          this.success = `${actionType === 'preauthorize' ? 'Preauthorization' : 'Charge'} successful! Transaction ID: ${response.data.auth_net_transaction_id || 'N/A'}`
+          this.$emit('payment-success', {
+            action: actionType,
+            transaction: response.data
+          })
+          setTimeout(() => this.close(), 2000)
+        } else {
+          throw new Error(`Payment ${actionType} failed: ${response.data?.status || 'Unknown error'}`)
+        }
+      } catch (error: any) {
+        this.error = error.response?.data?.detail || `Failed to ${actionType} payment`
+        notify({
+          title: "Error",
+          text: this.error,
+          type: "error",
+        })
+      } finally {
+        this.loading = false
+        this.action = ''
+      }
+    }
+  }
+})
+</script>
+
+<style scoped>
+/* Additional styles if needed */
+</style>

src/pages/delivery/routes.ts

@@ -92,6 +92,7 @@ const deliveryRoutes = [
         name: 'finalizeTicketAuto',
         component: finalizeTicketAuto,
     },
+
 ]
 
 export default deliveryRoutes

src/pages/delivery/update_tickets/finalize_ticket.vue

@@ -36,7 +36,6 @@
           <!-- 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>
@@ -76,7 +75,7 @@
                    <span v-if="deliveryOrder.delivery_status == 0">waiting</span>
                    <span v-else-if="deliveryOrder.delivery_status == 1">delivered</span>
                    <span v-else-if="deliveryOrder.delivery_status == 2">Today</span>
-                   <span v-else-if="deliveryOrder.delivery_status == 3">Tommorrow </span>
+                   <span v-else-if="deliveryOrder.delivery_status == 3">Tomorrow</span>
                    <span v-else-if="deliveryOrder.delivery_status == 4">Partial Delivery</span>
                    <span v-else-if="deliveryOrder.delivery_status == 5">misdelivery</span>
                    <span v-else-if="deliveryOrder.delivery_status == 6">unknown</span>
@@ -150,10 +149,17 @@
               <div class="flex justify-between items-center border-t border-base-100 pt-3">
                 <span class="text-lg font-bold">
                   <span v-if="deliveryOrder.payment_type == 0">Cash Total</span>
-                  <span v-else-if="deliveryOrder.payment_type == 1 || deliveryOrder.payment_type == 2 || deliveryOrder.payment_type == 3">Pre Charge Total</span>
+                  <span v-else-if="deliveryOrder.payment_type == 1 || deliveryOrder.payment_type == 2 || deliveryOrder.payment_type == 3">Pre-Auth Estimate</span>
                   <span v-else>Total Amount</span>
                 </span>
-                <span class="text-2xl font-bold text-success">${{ Number(total_amount).toFixed(2) }}</span>
+                <span class="text-2xl font-bold text-success">
+                  <span v-if="deliveryOrder.payment_type == 1 || deliveryOrder.payment_type == 2 || deliveryOrder.payment_type == 3">
+                    ${{ Number(preChargeTotal).toFixed(2) }}
+                  </span>
+                  <span v-else>
+                    ${{ Number(total_amount).toFixed(2) }}
+                  </span>
+                </span>
               </div>
             </div>
           </div>
@@ -168,7 +174,7 @@
 
               <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" />
+                <input v-model="FinalizeOilOrderForm.gallons_delivered" class="input input-bordered input-sm w-full max-w-xs" type="number" step="0.01" placeholder="# gallons" />
               </div>
 
               <div>
@@ -176,13 +182,11 @@
                 <input v-model="FinalizeOilOrderForm.fill_location" class="input input-bordered input-sm w-full max-w-xs" type="text" placeholder="Fill location (e.g., 1-12)" />
               </div>
               
-              <!-- FIX: Cash Received input is now ALWAYS visible -->
               <div>
                 <label class="label"><span class="label-text font-bold">Cash Received</span></label>
-                <input v-model="FinalizeOilOrderForm.cash_recieved" class="input input-bordered input-sm w-full max-w-xs" type="number" placeholder="Amount received" />
+                <input v-model="FinalizeOilOrderForm.cash_recieved" class="input input-bordered input-sm w-full max-w-xs" type="number" step="0.01" placeholder="Amount received" />
               </div>
 
-              <!-- FIX: Check # input is now ALWAYS visible -->
               <div>
                 <label class="label"><span class="label-text font-bold">Check #</span></label>
                 <input v-model="FinalizeOilOrderForm.check_number" class="input input-bordered input-sm w-full max-w-xs" type="text" placeholder="Check Number" />
@@ -221,7 +225,6 @@
   <Footer />
 </template>
 
-
 <script lang="ts">
 import { defineComponent } from 'vue'
 import axios from 'axios'
@@ -229,10 +232,8 @@ 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: 'finalizeTicket',
 
@@ -244,48 +245,24 @@ export default defineComponent({
 
   data() {
     return {
-      v$: useValidate(),
       loaded: false,
-      user: {
+      user: { id: 0 },
-        id: 0
-      },
       userCardfound: false,
       deliveryStatus: [],
       userCards: [],
       deliveryNotesDriver: [],
-      priceprime: 0,
-      pricesameday: 0,
       total_amount: 0,
+      preChargeTotal: 0,
 
       FinalizeOilOrderForm: {
-        cash: false,
-        card: false,
-        check: false,
-        other: false,
         cash_recieved: '',
         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: '',
-          prime: false,
-          same_day: false,
-          cash: false,
-          card: false,
-          check: false,
-          other: false,
-          userCards: []
-        },
       },
       userCard: {
         date_added: '',
@@ -320,14 +297,6 @@ export default defineComponent({
         fill_location: 0,
         description: '',
       },
-      deliveryMoney: {
-        time_added: '',
-        total_amount_oil: '',
-        total_amount_emergency: '',
-        total_amount_prime: '',
-        total_amount_fee: '',
-        total_amount: '',
-      },
       deliveryOrder: {
         id: '',
         customer_id: 0,
@@ -370,338 +339,208 @@ export default defineComponent({
     }
   },
 
-  created() {
-    this.userStatus()
-  },
-  watch: {
-    $route() {
-      this.sumdelivery(this.$route.params.id);
-      this.getOilOrder(this.$route.params.id);
-    },
-  },
   mounted() {
-    this.sumdelivery(this.$route.params.id);
+    const deliveryId = this.$route.params.id;
-    this.getOilOrder(this.$route.params.id);
+    this.sumdelivery(deliveryId);
+    this.getOilOrder(deliveryId);
     this.getOilPricing();
     this.getDeliveryStatusList();
-
   },
 
   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;
-          }
-        })
-    },
-
     getOilOrder(delivery_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/delivery/order/" + delivery_id;
+      const path = `${import.meta.env.VITE_BASE_URL}/delivery/order/${delivery_id}`;
-      axios({
+      axios.get(path, { withCredentials: true, headers: authHeader() })
-        method: "get",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
         .then((response: any) => {
           if (response.data && response.data.ok) {
-            this.deliveryOrder = response.data.delivery
+            this.deliveryOrder = response.data.delivery;
-            this.getCustomer(this.deliveryOrder.customer_id)
+            this.getCustomer(this.deliveryOrder.customer_id);
 
-            if (this.deliveryOrder.payment_type === 1) {
+            if ([1, 2, 3].includes(this.deliveryOrder.payment_type)) {
-              this.getPaymentCard(this.deliveryOrder.payment_card_id);
-            }
-            if (this.deliveryOrder.payment_type === 2) {
-              this.getPaymentCard(this.deliveryOrder.payment_card_id);
-            }
-            if (this.deliveryOrder.payment_type === 3) {
               this.getPaymentCard(this.deliveryOrder.payment_card_id);
             }
             
             this.FinalizeOilOrderForm.cash_recieved = response.data.delivery.cash_recieved;
             this.FinalizeOilOrderForm.check_number = response.data.delivery.check_number;
             this.FinalizeOilOrderForm.credit_card_id = response.data.delivery.payment_card_id;
-
+            this.FinalizeOilOrderForm.customer_filled = response.data.delivery.customer_filled == 1;
-            if (response.data.delivery.customer_filled == 1) {
-              this.FinalizeOilOrderForm.customer_filled = true
-            }
           } else {
             console.error("API Error:", response.data.error || "Failed to fetch delivery data.");
           }
         })
+        .catch((error: any) => console.error("Error fetching oil order:", error));
     },
-    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 === ''){
+    getPaymentCard(card_id: any) {
-            this.userCard === null;
+      const path = `${import.meta.env.VITE_BASE_URL}/payment/card/${card_id}`;
-            this.userCardfound = false;
+      axios.get(path, { withCredentials: true })
-          }
+        .then((response: any) => {
-          else{
+          if (response.data.userCard && response.data.userCard.card_number !== '') {
             this.userCard = response.data;
             this.userCardfound = true;
+          } else {
+            this.userCardfound = false;
           }
-          this.FinalizeOilOrderForm.userCards = response.data.id
         })
-        .catch(() => {
+        .catch((error: any) => {
-        });
+            this.userCardfound = false;
-    },
+            console.error(`Error fetching payment card ${card_id}:`, error);
-    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;
-        })
-        .catch(() => {
         });
     },
+
     getCustomer(user_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/customer/" + user_id;
+      const path = `${import.meta.env.VITE_BASE_URL}/customer/${user_id}`;
-      axios({
+      axios.get(path, { withCredentials: true })
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
         .then((response: any) => {
           this.customer = response.data;
           this.getCustomerDescription(this.deliveryOrder.customer_id);
-          this.getPaymentCards(this.deliveryOrder.customer_id);
-          if (this.deliveryOrder.payment_type == 1) {
-            this.getPaymentCard(this.deliveryOrder.payment_card_id)
-          }
-          if (this.deliveryOrder.payment_type == 2) {
-            this.getPaymentCard(this.deliveryOrder.payment_card_id)
-          }
-          if (this.deliveryOrder.payment_type == 3) {
-            this.getPaymentCard(this.deliveryOrder.payment_card_id)
-          }
         })
-        .catch(() => {
+        .catch((error: any) => {
-          notify({
+          notify({ title: "Error", text: "Could not find customer", type: "error" });
-            title: "Error",
+          console.error("Error fetching customer:", error);
-            text: "Could not find customer",
-            type: "error",
-          });
         });
     },
+
     getCustomerDescription(user_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/customer/description/" + user_id;
+      const path = `${import.meta.env.VITE_BASE_URL}/customer/description/${user_id}`;
-      axios({
+      axios.get(path, { withCredentials: true })
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
         .then((response: any) => {
           this.customerDescription = response.data;
-          this.FinalizeOilOrderForm.fill_location =this.customerDescription.fill_location
+          this.FinalizeOilOrderForm.fill_location = this.customerDescription.fill_location;
         })
-        .catch(() => {
+        .catch((error: any) => {
-          notify({
+          notify({ title: "Error", text: "Could not find customer description", type: "error" });
-            title: "Error",
+          console.error("Error fetching customer description:", error);
-            text: "Could not find customer",
-            type: "error",
-          });
         });
     },
+
     getOilPricing() {
-      let path = import.meta.env.VITE_BASE_URL + "/info/price/oil/table";
+      const path = `${import.meta.env.VITE_BASE_URL}/info/price/oil/table`;
-      axios({
+      axios.get(path, { withCredentials: true })
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
         .then((response: any) => {
           this.pricing = response.data;
+        })
+        .catch((error: any) => {
+          notify({ title: "Error", text: "Could not get oil pricing", type: "error" });
+          console.error("Error fetching oil pricing:", error);
+        });
+    },
 
-        })
-        .catch(() => {
-          notify({
-            title: "Error",
-            text: "Could not get oil pricing",
-            type: "error",
-          });
-        });
-    },
     sumdelivery(delivery_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + "/delivery/total/" + delivery_id;
+      const path = `${import.meta.env.VITE_BASE_URL}/delivery/total/${delivery_id}`;
-      axios({
+      axios.get(path, { withCredentials: true })
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
         .then((response: any) => {
           if (response.data.ok) {
-            this.priceprime = response.data.priceprime;
-            this.pricesameday = response.data.pricesameday;
             this.total_amount = response.data.total_amount;
+            this.preChargeTotal = response.data.total_amount;
           }
         })
-        .catch(() => {
+        .catch((error: any) => {
-          notify({
+          notify({ title: "Error", text: "Could not get delivery total", type: "error" });
-            title: "Error",
+          console.error("Error summing delivery:", error);
-            text: "Could not get oil pricing",
-            type: "error",
-          });
         });
     },
-    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: "deliveryOutForDelivery" });
-          }
-          else {
-            notify({
-              text: 'Auto Failure',
-              type: 'negative',
-              title: 'Update'
-            })
-          }
-        })
-    },
     getDeliveryStatusList() {
-      let path = import.meta.env.VITE_BASE_URL + "/query/deliverystatus";
+      const path = `${import.meta.env.VITE_BASE_URL}/query/deliverystatus`;
-      axios({
+      axios.get(path, { withCredentials: true })
-        method: "get",
-        url: path,
-        withCredentials: true,
-      })
         .then((response: any) => {
           this.deliveryStatus = response.data;
         })
-        .catch(() => {
+        .catch((error: any) => console.error("Error fetching delivery status list:", error));
-        });
     },
 
     CreateTransaction() {
-      let path = import.meta.env.VITE_MONEY_URL + "/delivery/add/" + this.deliveryOrder.id;
+      const path = `${import.meta.env.VITE_MONEY_URL}/delivery/add/${this.deliveryOrder.id}`;
-      axios({
+      axios.post(path, {}, { withCredentials: true, headers: authHeader() })
-        method: "post",
-        url: path,
-        withCredentials: true,
-        headers: authHeader(),
-      })
         .then((response: any) => {
-          if (response.status == 201) {
+          if (response.status === 201) {
-            notify({
+            notify({ title: "Success", text: "Confirmed Transaction", type: "success" });
-              title: "Success",
+          } else {
-              text: "Confirmed Transaction",
+            notify({ title: "Error", text: "Error Confirming Transaction", type: "error" });
-              type: "success",
-            })
-          }
-          else {
-            notify({
-              title: "Error",
-              text: "Error Confirming Transaction",
-              type: "error",
-            })
           }
         })
+        .catch((error: any) => {
+            notify({ title: "Error", text: "Failed to create transaction", type: "error" });
+            console.error("CreateTransaction error:", error);
+        });
     },
 
-    FinalizeOrder(payload: {
+    FinalizeOrder(payload: any) {
-      cash_recieved: string,
+      const path = `${import.meta.env.VITE_BASE_URL}/deliverydata/finalize/${this.deliveryOrder.id}`;
-      check_number: number,
+      axios.put(path, payload, { withCredentials: true, headers: authHeader() })
-      delivery_status: any,
-      driver_employee_id: number,
-      gallons_delivered: string,
-      customer_filled: boolean,
-      fill_location: number,
-
-    }) {
-      let path = import.meta.env.VITE_BASE_URL + "/deliverydata/finalize/" + this.deliveryOrder.id;
-      axios({
-        method: "put",
-        url: path,
-        data: payload,
-        withCredentials: true,
-        headers: authHeader(),
-      })
         .then((response: any) => {
           if (response.data.ok) {
-            notify({
+            notify({ title: "Success", text: "Ticket is finalized", type: "success" });
-              title: "Success",
+            this.CreateTransaction();
-              text: "Ticket is finalized",
+            this.$router.push({ name: "deliveryOrder", params: { id: this.deliveryOrder.id } });
-              type: "success",
+          } else {
-            });
+            notify({ title: "Error", text: response.data.error || "Could not finalize ticket", type: "error" });
-            this.CreateTransaction()
-            // Navigate to delivery view page with proper error handling
-            if (this.deliveryOrder && this.deliveryOrder.id) {
-              this.$router.push({ name: "deliveryOrder", params: { id: this.deliveryOrder.id } });
-            } else {
-              // Fallback if delivery ID is not available
-              this.$router.push({ name: "delivery" });
-            }
-
-          }
-          if (response.data.error) {
-            notify({
-              title: "Error",
-              text: "Could not finalize ticket",
-              type: "error",
-            });
             this.$router.push({ name: "delivery" });
           }
         })
+        .catch((error: any) => {
+            notify({ title: "Error", text: "Failed to finalize order", type: "error" });
+            console.error("FinalizeOrder error:", error);
+        });
     },
-    onSubmit() {
-      if (this.deliveryOrder.automatic == 1) {
-        let auto_payload = {
-          gallons: this.CreateOilOrderForm.basicInfo.gallons_delivered,
-          delivery_id: this.deliveryOrder.id
-        }
-        this.UpdateAuto(auto_payload);
-      }
-      let payload = {
 
+    async onSubmit() {
+      // First, check if there's a pre-authorized transaction for this delivery.
+      try {
+        // This is the CORRECT URL for the backend endpoint.
+        const correctedUrl = `${import.meta.env.VITE_AUTHORIZE_URL}/api/transaction/delivery/${this.$route.params.id}`;
+
+        const transactionResponse = await axios.get(correctedUrl, {
+          withCredentials: true,
+          headers: authHeader(),
+        });
+
+        // If a valid, approved, pre-auth transaction is found...
+        if (transactionResponse.data && transactionResponse.data.transaction_type === 1 && transactionResponse.data.status === 0) {
+          
+          // Recalculate the final amount based on the GALLONS DELIVERED from the form
+          const gallons = this.FinalizeOilOrderForm.gallons_delivered || '0';
+          const pricePerGallon = parseFloat(this.deliveryOrder.customer_price);
+          let finalAmount = parseFloat(gallons) * pricePerGallon;
+
+          if (this.deliveryOrder.prime == 1) {
+              finalAmount += parseFloat(this.pricing.price_prime.toString()) || 0;
+          }
+          if (this.deliveryOrder.same_day == 1) {
+              finalAmount += parseFloat(this.pricing.price_same_day.toString()) || 0;
+          }
+
+          // ...then redirect to the capture page with the correct data.
+          this.$router.push({
+            name: 'captureAuthorize',
+            params: { id: this.$route.params.id },
+            query: {
+              gallons: gallons,
+              amount: finalAmount.toFixed(2).toString()
+            }
+          });
+          return; // IMPORTANT: Stop execution here to prevent finalization.
+        }
+      } catch (error: any) { // ✅ FIX: Added ': any' to solve TypeScript error
+        // This is the expected path if no pre-auth transaction exists.
+        // We log the error for debugging but continue to the finalization logic below.
+        console.log("No pre-authorized transaction found. Proceeding with standard finalization.");
+      }
+
+      // If no pre-auth transaction was found, proceed with the normal finalization flow.
+      const payload = {
         cash_recieved: this.FinalizeOilOrderForm.cash_recieved,
         check_number: this.FinalizeOilOrderForm.check_number,
         delivery_status: this.FinalizeOilOrderForm.delivery_status,
         driver_employee_id: this.FinalizeOilOrderForm.driver,
         gallons_delivered: this.FinalizeOilOrderForm.gallons_delivered,
         customer_filled: this.FinalizeOilOrderForm.customer_filled,
-
         fill_location: this.FinalizeOilOrderForm.fill_location,
       };
+
       this.FinalizeOrder(payload);
     },
-
   },
-})
+});
 </script>
-
-<style scoped></style>

src/pages/pay/capture_authorize.vue

@@ -0,0 +1,462 @@
+<!-- src/pages/pay/capture_authorize.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>Capture Payment #{{ deliveryOrder.id }}</li>
+        </ul>
+      </div>
+
+      <!-- Page Header -->
+      <div class="flex flex-wrap justify-between items-center gap-2 mt-4">
+        <h1 class="text-3xl font-bold">
+          Capture Payment #{{ deliveryOrder.id }}
+        </h1>
+        <router-link v-if="deliveryOrder.id" :to="{ name: 'finalizeTicket', params: { id: deliveryOrder.id } }">
+          <button class="btn btn-sm btn-secondary">Back to Finalize</button>
+        </router-link>
+      </div>
+
+      <!-- Main Content Grid -->
+      <div v-if="deliveryOrder.id" class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
+
+        <!-- LEFT COLUMN: Customer and Delivery Details -->
+        <div class="space-y-6">
+
+          <!-- Customer Info Card -->
+          <div class="bg-neutral rounded-lg p-5">
+            <div class="text-xl font-bold mb-2">Customer</div>
+            <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>
+
+          <!-- Delivery Details Card -->
+          <div class="bg-neutral rounded-lg p-5">
+            <h3 class="text-xl font-bold mb-4">Delivery Details</h3>
+            <div class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+              <div>
+                <div class="font-bold">Status</div>
+                <div class="opacity-80">
+                  <span v-if="deliveryOrder.delivery_status == 0">waiting</span>
+                  <span v-else-if="deliveryOrder.delivery_status == 1">delivered</span>
+                  <span v-else-if="deliveryOrder.delivery_status == 2">Today</span>
+                  <span v-else-if="deliveryOrder.delivery_status == 3">Tomorrow</span>
+                  <span v-else-if="deliveryOrder.delivery_status == 4">Partial Delivery</span>
+                  <span v-else-if="deliveryOrder.delivery_status == 5">misdelivery</span>
+                  <span v-else-if="deliveryOrder.delivery_status == 6">unknown</span>
+                  <span v-else-if="deliveryOrder.delivery_status == 10">Finalized</span>
+                </div>
+              </div>
+              <div>
+                <div class="font-bold">Scheduled Date</div>
+                <div class="opacity-80">{{ deliveryOrder.expected_delivery_date }}</div>
+              </div>
+              <div>
+                <div class="font-bold">When Ordered</div>
+                <div class="opacity-80">{{ deliveryOrder.when_ordered }}</div>
+              </div>
+              <div>
+                <div class="font-bold">When Delivered</div>
+                <div class="opacity-80">{{ deliveryOrder.when_delivered }}</div>
+              </div>
+              <div>
+                <div class="font-bold">Driver</div>
+                <div class="opacity-80">{{ deliveryOrder.driver_first_name }} {{ deliveryOrder.driver_last_name }}</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Credit Card Details -->
+          <div v-if="userCardfound" class="bg-neutral rounded-lg p-5">
+            <h3 class="text-xl font-bold mb-4">Payment Method</h3>
+            <div class="bg-base-100 p-4 rounded-md">
+              <div class="flex justify-between items-center mb-2">
+                <div class="font-semibold">{{ userCard.type_of_card }}</div>
+                <div v-if="userCard.main_card" class="badge badge-primary">Primary</div>
+              </div>
+              <div class="font-mono text-sm">
+                <div>**** **** **** {{ userCard.last_four_digits }}</div>
+                <div>{{ userCard.name_on_card }}</div>
+                <div>Expires: {{ userCard.expiration_month }}/{{ userCard.expiration_year }}</div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+
+        <!-- RIGHT COLUMN: Capture Form -->
+        <div class="space-y-6">
+
+          <!-- Gallons Delivered Display -->
+          <div class="bg-base-100 rounded-lg p-5">
+            <h2 class="text-2xl font-bold mb-4">Gallons Delivered</h2>
+            <div class="text-center">
+              <div class="text-4xl font-bold text-primary">{{ gallonsDelivered || '0.00' }}</div>
+              <div class="text-sm opacity-70">gallons</div>
+            </div>
+          </div>
+
+          <!-- Financial Summary Card -->
+          <div class="bg-neutral rounded-lg p-5">
+            <h3 class="text-xl font-bold mb-4">Financial Summary</h3>
+            <div class="space-y-3">
+              <!-- Pricing & Gallons -->
+              <div class="grid grid-cols-2 gap-3 text-sm">
+                <div>
+                  <div class="font-bold">Price / Gallon</div>
+                  <div class="opacity-80">${{ Number(deliveryOrder.customer_price).toFixed(2) }}</div>
+                </div>
+                <div>
+                  <div class="font-bold">Gallons Delivered</div>
+                  <div class="opacity-80">{{ gallonsDelivered || '0.00' }}</div>
+                </div>
+              </div>
+              <!-- Fees -->
+              <div class="text-sm space-y-1 border-t border-base-100 pt-3">
+                <div v-if="deliveryOrder.prime == 1" class="flex justify-between">
+                  <span>Prime Fee</span>
+                  <span>${{ Number(pricing.price_prime).toFixed(2) }}</span>
+                </div>
+                <div v-if="deliveryOrder.same_day === 1" class="flex justify-between">
+                  <span>Same Day Fee</span>
+                  <span>${{ Number(pricing.price_same_day).toFixed(2) }}</span>
+                </div>
+              </div>
+              <!-- Total -->
+              <div class="flex justify-between items-center border-t border-base-100 pt-3">
+                <span class="text-lg font-bold">Total Amount</span>
+                <span class="text-2xl font-bold text-success">${{ Number(captureAmount).toFixed(2) }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Capture Payment Form -->
+          <div class="bg-base-100 rounded-lg p-5">
+            <h2 class="text-2xl font-bold mb-4">Capture Payment</h2>
+            <div class="space-y-4">
+              <div class="form-control">
+                <label class="label">
+                  <span class="label-text font-bold">Capture Amount</span>
+                </label>
+                <input
+                  v-model="captureAmount"
+                  class="input input-bordered input-lg w-full"
+                  type="number"
+                  step="0.01"
+                  placeholder="0.00"
+                />
+              </div>
+
+              <div class="alert alert-info">
+                <span>Pre-authorized transaction found. Ready to capture payment.</span>
+              </div>
+
+              <div class="flex gap-4">
+                <button
+                  @click="capturePayment"
+                  class="btn btn-primary flex-1"
+                  :disabled="loading || !captureAmount"
+                >
+                  <span v-if="loading" class="loading loading-spinner loading-sm"></span>
+                  Capture Payment
+                </button>
+                <button
+                  @click="cancelCapture"
+                  class="btn btn-ghost"
+                  :disabled="loading"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+      <div v-else class="text-center p-10">
+        Loading capture details...
+      </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 { notify } from "@kyvg/vue3-notification"
+
+export default defineComponent({
+  name: 'captureAuthorize',
+
+  components: {
+    Header,
+    SideBar,
+    Footer,
+  },
+
+  data() {
+    return {
+      loading: false,
+      userCardfound: false,
+      gallonsDelivered: '',
+      captureAmount: 0,
+      transaction: null as any,
+
+      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: '',
+      },
+      deliveryOrder: {
+        id: '',
+        customer_id: 0,
+        customer_name: '',
+        customer_address: '',
+        customer_town: '',
+        customer_state: 0,
+        customer_zip: '',
+        gallons_ordered: 0,
+        customer_asked_for_fill: 0,
+        gallons_delivered: '',
+        customer_filled: 0,
+        delivery_status: 0,
+        when_ordered: '',
+        when_delivered: '',
+        expected_delivery_date: '',
+        automatic: 0,
+        oil_id: 0,
+        supplier_price: '',
+        customer_price: '',
+        customer_temperature: '',
+        dispatcher_notes: '',
+        prime: 0,
+        same_day: 0,
+        payment_type: 0,
+        payment_card_id: '',
+        driver_employee_id: 0,
+        driver_first_name: '',
+        driver_last_name: '',
+        total_price: 0,
+      },
+      pricing: {
+        price_from_supplier: 0,
+        price_for_customer: 0,
+        price_for_employee: 0,
+        price_same_day: 0,
+        price_prime: 0,
+        date: "",
+      },
+    }
+  },
+
+  mounted() {
+    this.gallonsDelivered = this.$route.query.gallons as string || '';
+    // Use the amount from the query params, passed from the finalize page
+    this.captureAmount = parseFloat(this.$route.query.amount as string) || 0;
+
+    this.getOilOrder(this.$route.params.id)
+    this.getOilPricing()
+    this.getTransaction()
+  },
+
+  methods: {
+    getOilOrder(delivery_id: any) {
+      const path = `${import.meta.env.VITE_BASE_URL}/delivery/order/${delivery_id}`;
+      axios.get(path, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => {
+          if (response.data && response.data.ok) {
+            this.deliveryOrder = response.data.delivery;
+            this.getCustomer(this.deliveryOrder.customer_id);
+
+            if ([1, 2, 3].includes(this.deliveryOrder.payment_type)) {
+              this.getPaymentCard(this.deliveryOrder.payment_card_id);
+            }
+          } else {
+            console.error("API Error:", response.data.error || "Failed to fetch delivery data.");
+          }
+        })
+        .catch((error: any) => console.error("Error fetching oil order:", error));
+    },
+
+    getPaymentCard(card_id: any) {
+      const path = `${import.meta.env.VITE_BASE_URL}/payment/card/${card_id}`;
+      axios.get(path, { withCredentials: true })
+        .then((response: any) => {
+          if (response.data.userCard && response.data.userCard.card_number !== '') {
+            this.userCard = response.data;
+            this.userCardfound = true;
+          }
+        })
+        .catch((error: any) => {
+          this.userCardfound = false;
+          console.error("Error fetching payment card:", error);
+        });
+    },
+
+    getCustomer(user_id: any) {
+      const path = `${import.meta.env.VITE_BASE_URL}/customer/${user_id}`;
+      axios.get(path, { withCredentials: true })
+        .then((response: any) => {
+          this.customer = response.data;
+        })
+        .catch((error: any) => {
+          notify({ title: "Error", text: "Could not find customer", type: "error" });
+          console.error("Error fetching customer:", error);
+        });
+    },
+
+    getOilPricing() {
+      const path = `${import.meta.env.VITE_BASE_URL}/info/price/oil/table`;
+      axios.get(path, { withCredentials: true })
+        .then((response: any) => {
+          this.pricing = response.data;
+        })
+        .catch((error: any) => {
+          notify({ title: "Error", text: "Could not get oil pricing", type: "error" });
+          console.error("Error fetching oil pricing:", error);
+        });
+    },
+
+    getTransaction() {
+      const path = `${import.meta.env.VITE_AUTHORIZE_URL}/api/transaction/delivery/${this.$route.params.id}`;
+      axios.get(path, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => {
+          this.transaction = response.data;
+        })
+        .catch((error: any) => {
+          notify({ title: "Error", text: "No pre-authorized transaction found", type: "error" });
+          console.error("Error fetching transaction:", error);
+          this.$router.push({ name: 'finalizeTicket', params: { id: this.$route.params.id } });
+        });
+    },
+
+    async capturePayment() {
+      if (!this.transaction || !this.captureAmount) {
+        notify({ title: "Error", text: "Invalid capture amount or transaction data", type: "error" });
+        return;
+      }
+
+      this.loading = true;
+
+      try {
+        const payload = {
+          charge_amount: this.captureAmount, // FastAPI handles string/number conversion
+          auth_net_transaction_id: this.transaction.auth_net_transaction_id
+        };
+        
+        // ✅ FIX: Cleaned up URL, removing the unnecessary customer_id query parameter.
+        const url = `${import.meta.env.VITE_AUTHORIZE_URL}/api/capture/`;
+
+        const response = await axios.post(
+          url,
+          payload,
+          { withCredentials: true, headers: authHeader() }
+        );
+
+        // ✅ FIX: Improved logic to handle both success and declines properly.
+        if (response.data && response.data.status === 0) {
+          // This is the APPROVED case
+          notify({
+            title: "Success",
+            text: "Payment captured successfully!",
+            type: "success",
+          });
+          this.$router.push({ name: 'deliveryOrder', params: { id: this.$route.params.id } });
+        
+        } else if (response.data && response.data.status === 1) {
+          // This is the DECLINED case
+          const reason = response.data.rejection_reason || "The payment was declined by the gateway.";
+          notify({
+            title: "Payment Declined",
+            text: reason,
+            type: "warn", // Use 'warn' for declines instead of 'error'
+          });
+
+        } else {
+          // This handles unexpected responses from the backend.
+          throw new Error("Invalid response from server during capture.");
+        }
+
+      } catch (error: any) {
+        // This 'catch' block now only handles network errors or server crashes (500 errors).
+        const detail = error.response?.data?.detail || "Failed to capture payment due to a server error.";
+        notify({
+          title: "Error",
+          text: detail,
+          type: "error",
+        });
+        console.error("Capture Payment Error:", error);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    cancelCapture() {
+      this.$router.push({ name: 'finalizeTicket', params: { id: this.$route.params.id } });
+    },
+  },
+})
+</script>
+
+<style scoped></style>

src/pages/pay/pay_oil.vue

@@ -55,9 +55,11 @@
                   <span v-if="delivery.delivery_status == 0">Waiting</span>
                   <span v-else-if="delivery.delivery_status == 1">Delivered</span>
                   <span v-else-if="delivery.delivery_status == 2">Out_for_Delivery</span>
-                  <span v-else-if="delivery.delivery_status == 3">Cancelled</span>
+                  <span v-else-if="delivery.delivery_status == 3">Tomorrow_Delivery</span>
                   <span v-else-if="delivery.delivery_status == 4">Partial Delivery</span>
                   <span v-else-if="delivery.delivery_status == 5">Issue</span>
+                  <span v-else-if="delivery.delivery_status == 9">Pending</span>
+                  <span v-else-if="delivery.delivery_status == 10">Finalized</span>
                   <span v-else>Pending</span>
                 </div>
               </div>
@@ -93,10 +95,10 @@
                   <span v-else-if="delivery.payment_type == 3">Check</span>
                   <span v-else-if="delivery.payment_type == 4">Other</span>
                 </div>
-                <!-- Show the main card if payment is by credit -->
+                <!-- Show the selected card if payment is by credit -->
                 <div v-if="delivery.payment_type == 1 || delivery.payment_type == 3" class="mt-2">
                   <div v-for="card in credit_cards" :key="card.id">
-                    <div v-if="card.main_card" class="bg-base-100 p-3 rounded-md text-sm">
+                    <div v-if="card.id === delivery.payment_card_id" class="bg-base-100 p-3 rounded-md text-sm">
                       <div class="font-mono font-semibold">{{ card.type_of_card }} ending in {{ card.last_four_digits }}</div>
                       <div>{{ card.name_on_card }}</div>
                       <div>Expires: {{ card.expiration_month }}/{{ card.expiration_year }}</div>
@@ -111,6 +113,13 @@
                   <span>Price per Gallon</span>
                   <span>${{ delivery.customer_price }}</span>
                 </div>
+                <div class="flex justify-between text-sm">
+                  <span>Gallons Ordered</span>
+                  <span>
+                    <span v-if="delivery.customer_asked_for_fill == 1" class="badge badge-info">FILL (250 gal estimate)</span>
+                    <span v-else>{{ delivery.gallons_ordered }} Gallons</span>
+                  </span>
+                </div>
                 <div v-if="delivery.prime == 1" class="flex justify-between text-sm">
                   <span>Prime Fee</span>
                   <span>+ ${{ pricing.price_prime }}</span>
@@ -143,6 +152,10 @@
           <!-- Actions Card -->
           <div class="bg-neutral rounded-lg p-5">
              <div class="flex flex-wrap gap-4 justify-between items-center">
+                <!-- Pay Authorize Button -->
+                <button class="btn btn-warning" @click="showPaymentPopup = true">
+                  Pay Authorize
+                </button>
                 <!-- A single confirm button is cleaner -->
                 <button class="btn btn-primary" @click="checkoutOilUpdatePayment(delivery.payment_type)">
                   Confirm & Process Payment
@@ -157,6 +170,23 @@
       </div>
     </div>
   </div>
+
+  <!-- Payment Authorization Popup -->
+  <PaymentAuthorizePopup
+    :show="showPaymentPopup"
+    :delivery="delivery"
+    :customer="customer"
+    :credit-cards="credit_cards"
+    :pricing="pricing"
+    :promo-active="promo_active"
+    :promo="promo"
+    :total-amount="total_amount"
+    :total-amount-after-discount="total_amount_after_discount"
+    :discount="discount"
+    @close="showPaymentPopup = false"
+    @payment-success="handlePaymentSuccess"
+  />
+
   <Footer />
 </template>
 
@@ -167,6 +197,7 @@ 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 PaymentAuthorizePopup from '../../components/PaymentAuthorizePopup.vue'
 import useValidate from "@vuelidate/core";
 import { notify } from "@kyvg/vue3-notification"
 import { minLength, required } from "@vuelidate/validators";
@@ -178,6 +209,7 @@ export default defineComponent({
     Header,
     SideBar,
     Footer,
+    PaymentAuthorizePopup,
   },
 
   data() {
@@ -274,6 +306,7 @@ export default defineComponent({
       total_amount: 0,
       discount: 0,
       total_amount_after_discount: 0,
+      showPaymentPopup: false,
     }
   },
   validations() {
@@ -324,19 +357,22 @@ export default defineComponent({
       })
         .then((response: any) => {
           if (response.data.ok) {
-            console.log(response.data)
+                  console.log('%%%%%%%%%%%%%%%')
+             console.log(response.data)
+      
             this.priceprime = response.data.priceprime;
             this.pricesameday = response.data.pricesameday;
             this.priceemergency = response.data.priceemergency;
             this.total_amount = response.data.total_amount;
             this.discount = response.data.discount;
             this.total_amount_after_discount = response.data.total_amount_after_discount;
+                  console.log('%%%%%%%%%%%%%%%')
           }
         })
         .catch(() => {
           notify({
             title: "Error",
-            text: "Could not get oil pricing",
+            text: "Could not get oil pricing 1",
             type: "error",
           });
         });
@@ -384,12 +420,13 @@ export default defineComponent({
         .catch(() => {
           notify({
             title: "Error",
-            text: "Could not get oil pricing",
+            text: "Could not get oil pricing 2",
             type: "error",
           });
         });
     },
     getOilOrder(delivery_id: any) {
+      console.log("=== DEBUG: getOilOrder called with delivery_id:", delivery_id);
       let path = import.meta.env.VITE_BASE_URL + "/delivery/order/" + delivery_id;
       axios({
         method: "get",
@@ -397,8 +434,13 @@ export default defineComponent({
         withCredentials: true,
       })
         .then((response: any) => {
+          console.log("=== DEBUG: API Response:", response.data);
           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);
             this.delivery = response.data.delivery;
+            console.log("=== DEBUG: Delivery object after assignment:", this.delivery);
+            console.log("=== DEBUG: Delivery ID after assignment:", this.delivery.id);
             this.getCustomer(this.delivery.customer_id)
             this.getCreditCards(this.delivery.customer_id)
             if (this.delivery.promo_id != null) {
@@ -409,7 +451,8 @@ export default defineComponent({
             console.error("API Error:", response.data.error || "Failed to fetch delivery data.");
           }
         })
-        .catch(() => {
+        .catch((error: any) => {
+          console.error("=== DEBUG: API Error in getOilOrder:", error);
           notify({
             title: "Error",
             text: "Could not get delivery",
@@ -487,7 +530,23 @@ export default defineComponent({
         });
     },
 
+    handlePaymentSuccess(data: any) {
+      // Handle successful payment
+      console.log('Payment successful:', data)
 
+      // Show success notification
+      notify({
+        title: "Success",
+        text: "Payment authorized successfully",
+        type: "success",
+      });
+
+      // Close the popup
+      this.showPaymentPopup = false
+
+      // Redirect to customer profile
+      this.$router.push({ name: "customerProfile", params: { id: this.customer.id } });
+    },
 
   },
 })

src/pages/pay/routes.ts

@@ -1,9 +1,7 @@
 
 
-import PayOil from '../pay/pay_oil.vue';
+import PayOil from './pay_oil.vue';
-
+import CaptureAuthorize from './capture_authorize.vue';
-
-
 
 const payRoutes = [
 
@@ -12,7 +10,11 @@ const payRoutes = [
         name: 'payOil',
         component: PayOil,
     },
-
+    {
+        path: '/pay/capture/authorize/:id',
+        name: 'captureAuthorize',
+        component: CaptureAuthorize,
+    },
 
 ]