284 lines
13 KiB
Vue
284 lines
13 KiB
Vue
<!-- src/pages/transactions/authorize/index.vue -->
|
|
<template>
|
|
<div class="flex">
|
|
<div class="w-full px-4 md:px-10 py-4">
|
|
<!-- Breadcrumbs & Title -->
|
|
<div class="text-sm breadcrumbs">
|
|
<ul>
|
|
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
|
|
<li>Transactions</li>
|
|
<li>Authorize</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Page Header with Stats -->
|
|
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mt-4 mb-6">
|
|
<div>
|
|
<h1 class="text-2xl md:text-3xl font-bold flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center shadow-lg">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-primary-content">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
|
|
</svg>
|
|
</div>
|
|
Authorize.net Transactions
|
|
</h1>
|
|
<p class="text-base-content/60 mt-1 ml-13">View payment gateway history and status</p>
|
|
</div>
|
|
|
|
<!-- Quick Stats -->
|
|
<div class="flex flex-wrap gap-3">
|
|
<div class="stat-pill">
|
|
<span class="stat-pill-value">{{ transactions.length }}</span>
|
|
<span class="stat-pill-label">Total Records</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content Card -->
|
|
<div class="modern-table-card">
|
|
|
|
<!-- DESKTOP VIEW: Table -->
|
|
<div class="overflow-x-auto hidden xl:block">
|
|
<table class="modern-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Transaction #</th>
|
|
<th>Transaction ID</th>
|
|
<th>Customer</th>
|
|
<th>Date</th>
|
|
<th>Status</th>
|
|
<th>Pre-Auth Amount</th>
|
|
<th>Charge Amount</th>
|
|
<th>Type</th>
|
|
<th>Source</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template v-for="transaction in transactions" :key="transaction.id">
|
|
<tr class="table-row-hover">
|
|
|
|
<td>{{ transaction.id }}</td>
|
|
<td>{{ transaction.auth_net_transaction_id || 'N/A' }}</td>
|
|
<td>
|
|
|
|
|
|
{{ transaction.customer_name || 'N/A' }}
|
|
</td>
|
|
<td>{{ formatDate(transaction.created_at) }}</td>
|
|
<td>
|
|
<span :class="'badge badge-sm ' + getStatusClass(transaction.status)">{{ getStatusText(transaction.status) }}</span>
|
|
</td>
|
|
<td>
|
|
${{ transaction.preauthorize_amount || '0.00' }}
|
|
</td>
|
|
<td>
|
|
${{ transaction.charge_amount || '0.00' }}
|
|
</td>
|
|
<td>
|
|
{{ transaction.transaction_type === 0 ? 'Charge' : transaction.transaction_type === 1 ? 'Auth' : 'Capture' }}
|
|
</td>
|
|
<td>
|
|
|
|
{{ getSourceText(transaction) }}
|
|
</td>
|
|
<td>
|
|
<div class="flex gap-1">
|
|
<router-link v-if="transaction.delivery_id" :to="{ name: 'deliveryOrder', params: { id: transaction.delivery_id } }" class="btn btn-xs btn-info">
|
|
View
|
|
</router-link>
|
|
<router-link v-if="transaction.auto_id" :to="{ name: 'automaticView', params: { id: transaction.auto_id } }" class="btn btn-xs btn-primary">
|
|
View
|
|
</router-link>
|
|
<template v-if="(Number(transaction.preauthorize_amount) >= 0 && Number(transaction.charge_amount) === 0 && (transaction.delivery_id || transaction.service_id))">
|
|
<router-link v-if="!transaction.auth_net_transaction_id" :to="getPreauthRoute(transaction)" class="btn btn-xs btn-warning">
|
|
Preauth/Charge
|
|
</router-link>
|
|
<router-link v-else-if="Number(transaction.preauthorize_amount) > 0" :to="getCaptureRoute(transaction)" class="btn btn-xs btn-primary">
|
|
Capture
|
|
</router-link>
|
|
</template>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- Rejection Reason Row (Full Width) -->
|
|
<tr v-if="transaction.rejection_reason && transaction.rejection_reason.trim()" class="bg-transparent border-t border-gray-300">
|
|
<td colspan="10" class="px-4 py-3 text-red-800 font-medium">
|
|
<div class="flex items-center">
|
|
<svg class="w-5 h-5 mr-2 text-red-500" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
<span class="text-red-700">{{ transaction.rejection_reason }}</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- MOBILE VIEW: Cards -->
|
|
<div class="xl:hidden space-y-4 px-4 pb-4">
|
|
<div v-for="transaction in transactions" :key="transaction.id" class="mobile-card">
|
|
<div class="p-3">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<div class="text-base font-bold">
|
|
<router-link v-if="transaction.customer_id" :to="{ name: 'customerProfile', params: { id: transaction.customer_id } }" class="link link-hover">
|
|
{{ transaction.customer_name || 'N/A' }}
|
|
</router-link>
|
|
<span v-else>{{ transaction.customer_name || 'N/A' }}</span>
|
|
</div>
|
|
<p class="text-xs text-base-content/60">Transaction #{{ transaction.id }}</p>
|
|
</div>
|
|
<div :class="'badge badge-sm border-0 ' + getStatusClass(transaction.status)">
|
|
{{ getStatusText(transaction.status) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-sm mt-3 grid grid-cols-2 gap-x-4 gap-y-2">
|
|
<div class="col-span-2">
|
|
<p class="text-xs text-base-content/50">Transaction ID</p>
|
|
<p class="font-mono text-xs">{{ transaction.auth_net_transaction_id || 'N/A' }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-base-content/50">Date</p>
|
|
<p>{{ formatDate(transaction.created_at) }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-base-content/50">Type</p>
|
|
<p>{{ transaction.transaction_type === 0 ? 'Charge' : transaction.transaction_type === 1 ? 'Auth' : 'Capture' }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-base-content/50">Pre-Auth</p>
|
|
<p class="font-mono">${{ transaction.preauthorize_amount || '0.00' }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-base-content/50">Charge</p>
|
|
<p class="font-mono font-bold">${{ transaction.charge_amount || '0.00' }}</p>
|
|
</div>
|
|
<div class="col-span-2">
|
|
<p class="text-xs text-base-content/50">Source</p>
|
|
<p class="text-xs">
|
|
<router-link v-if="transaction.delivery_id" :to="{ name: 'deliveryOrder', params: { id: transaction.delivery_id } }" class="link link-primary">{{ getSourceText(transaction) }}</router-link><span v-else>{{ getSourceText(transaction) }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rejection Reason in Mobile View -->
|
|
<div v-if="transaction.rejection_reason && transaction.rejection_reason.trim()" class="bg-error/10 border border-error/20 rounded-lg p-3 mt-3">
|
|
<div class="flex items-start">
|
|
<svg class="w-4 h-4 mr-2 text-error mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
<span class="text-error text-sm font-medium">{{ transaction.rejection_reason }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex gap-2 pt-3 mt-3 border-t border-base-content/10 flex-wrap">
|
|
<router-link v-if="transaction.delivery_id" :to="{ name: 'deliveryOrder', params: { id: transaction.delivery_id } }" class="btn btn-xs btn-info flex-1">
|
|
View Delivery
|
|
</router-link>
|
|
<router-link v-if="transaction.auto_id" :to="{ name: 'automaticView', params: { id: transaction.auto_id } }" class="btn btn-xs btn-primary flex-1">
|
|
View Auto
|
|
</router-link>
|
|
<template v-if="(Number(transaction.preauthorize_amount) >= 0 && Number(transaction.charge_amount) === 0 && (transaction.delivery_id || transaction.service_id))">
|
|
<router-link v-if="!transaction.auth_net_transaction_id" :to="getPreauthRoute(transaction)" class="btn btn-xs btn-warning flex-1">
|
|
Preauth/Charge
|
|
</router-link>
|
|
<router-link v-else-if="Number(transaction.preauthorize_amount) > 0" :to="getCaptureRoute(transaction)" class="btn btn-xs btn-primary flex-1">
|
|
Capture
|
|
</router-link>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</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 {AuthorizeTransaction} from '../../../types/models'
|
|
|
|
export default defineComponent({
|
|
name: 'transactionsAuthorize',
|
|
|
|
components: {
|
|
Header,
|
|
SideBar,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
transactions: [] as AuthorizeTransaction[],
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.getTransactions()
|
|
},
|
|
methods: {
|
|
getTransactions() {
|
|
let path = import.meta.env.VITE_BASE_URL + '/payment/transactions/authorize/1';
|
|
axios({
|
|
method: 'get',
|
|
url: path,
|
|
headers: authHeader(),
|
|
}).then((response: any) => {
|
|
this.transactions = response.data?.transactions || response.data || []
|
|
}).catch(() => {
|
|
this.transactions = []
|
|
})
|
|
},
|
|
getStatusClass(status: number) {
|
|
return status === 0 ? 'badge-success' : 'badge-error'
|
|
},
|
|
getStatusText(status: number) {
|
|
return status === 0 ? 'Approved' : 'Declined'
|
|
},
|
|
getSourceText(transaction: AuthorizeTransaction) {
|
|
if (transaction.auto_id) {
|
|
return 'Automatic'
|
|
} else if (transaction.delivery_id) {
|
|
return 'Delivery - ' + transaction.delivery_id
|
|
} else if (transaction.service_id) {
|
|
return 'Service - ' + transaction.service_id
|
|
} else {
|
|
return 'Other'
|
|
}
|
|
},
|
|
formatDate(dateStr: string) {
|
|
if (!dateStr) return 'N/A';
|
|
return dateStr.split('T')[0]; // YYYY-MM-DD
|
|
},
|
|
getCaptureRoute(transaction: AuthorizeTransaction) {
|
|
if (transaction.service_id) {
|
|
return { name: 'chargeServiceAuthorize', params: { id: transaction.service_id } };
|
|
} else if (transaction.delivery_id) {
|
|
return { name: 'captureAuthorize', params: { id: transaction.delivery_id } };
|
|
}
|
|
return {}; // fallback, though condition should prevent this
|
|
},
|
|
getPreauthRoute(transaction: AuthorizeTransaction) {
|
|
if (transaction.service_id) {
|
|
return { name: 'chargeServiceAuthorize', params: { id: transaction.service_id } };
|
|
} else if (transaction.delivery_id) {
|
|
return { name: 'authorizePreauthCharge', params: { id: transaction.delivery_id } };
|
|
}
|
|
return {}; // fallback, though condition should prevent this
|
|
},
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|