Working API CHARGING!

src/pages/pay/oil/authorize_preauthcharge.vue

@@ -117,7 +117,7 @@
               </router-link>
               <button
                 @click="handlePreauthorize"
-                class="btn btn-warning"
+                class="btn btn-success"
                 :disabled="loading || !chargeAmount"
               >
                 <span v-if="loading && action === 'preauthorize'" class="loading loading-spinner loading-sm"></span>
@@ -125,7 +125,7 @@
               </button>
               <button
                 @click="handleChargeNow"
-                class="btn btn-primary"
+                class="btn btn-warning text-black"
                 :disabled="loading || !chargeAmount"
               >
                 <span v-if="loading && action === 'charge'" class="loading loading-spinner loading-sm"></span>
@@ -137,6 +137,29 @@
       </div>
     </div>
   </div>
+
+  <!-- Charge Confirmation Modal -->
+  <div class="modal" :class="{ 'modal-open': isChargeConfirmationModalVisible }">
+    <div class="modal-box">
+      <h3 class="font-bold text-lg text-warning">⚠️ Warning: Charge Now</h3>
+      <p class="py-4">
+        You are about to <strong>immediately charge</strong> this customer's card
+        for <strong>${{ chargeAmount.toFixed(2) }}</strong>.
+        <br><br>
+        This action is <strong>not reversible</strong> and will debit the customer's account immediately.
+        <br><br>
+        Are you sure you want to proceed with the charge?
+      </p>
+      <div class="modal-action">
+        <button @click="proceedWithCharge" class="btn btn-warning">
+          Yes, Charge Now
+        </button>
+        <button @click="cancelCharge" class="btn btn-ghost">
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -157,6 +180,7 @@ export default defineComponent({
       action: '', // 'preauthorize' or 'charge'
       error: '',
       success: '',
+      isChargeConfirmationModalVisible: false,
       user: {
         user_id: 0,
       },
@@ -517,9 +541,26 @@ export default defineComponent({
     },
 
     async handleChargeNow() {
+      if (!this.selectedCard) {
+        this.error = 'No credit card found for this customer'
+        return
+      }
+      if (!this.chargeAmount || this.chargeAmount <= 0) {
+        this.error = 'Please enter a valid charge amount'
+        return
+      }
+      this.isChargeConfirmationModalVisible = true
+    },
+
+    async proceedWithCharge() {
+      this.isChargeConfirmationModalVisible = false
       await this.processPayment('charge')
     },
 
+    cancelCharge() {
+      this.isChargeConfirmationModalVisible = false
+    },
+
     async processPayment(actionType: string) {
       if (!this.selectedCard) {
         this.error = 'No credit card found for this customer'