feat(ui): Massive frontend modernization including customer table redesign, new map features, and consistent styling
This commit is contained in:
@@ -10,20 +10,35 @@
|
||||
<li>Authorize</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold mt-4">Authorize.net</h1>
|
||||
|
||||
<!-- Main Content Card -->
|
||||
<div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
|
||||
<!-- Header: Title and Count -->
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
|
||||
<h2 class="text-lg font-bold">All Transactions</h2>
|
||||
<!-- 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>
|
||||
|
||||
<div class="divider"></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="table w-full">
|
||||
<table class="modern-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Transaction #</th>
|
||||
@@ -40,7 +55,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="transaction in transactions" :key="transaction.id">
|
||||
<tr class="hover:bg-blue-600 hover:text-white">
|
||||
<tr class="table-row-hover">
|
||||
|
||||
<td>{{ transaction.id }}</td>
|
||||
<td>{{ transaction.auth_net_transaction_id || 'N/A' }}</td>
|
||||
@@ -102,57 +117,79 @@
|
||||
</div>
|
||||
|
||||
<!-- MOBILE VIEW: Cards -->
|
||||
<div class="xl:hidden space-y-4">
|
||||
<div v-for="transaction in transactions" :key="transaction.id" class="card bg-base-100 shadow-md">
|
||||
<div class="card-body p-4">
|
||||
<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>
|
||||
<h2 class="card-title text-base">
|
||||
<router-link v-if="transaction.customer_id" :to="{ name: 'customerProfile', params: { id: transaction.customer_id } }" class="link link-primary">
|
||||
<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>
|
||||
</h2>
|
||||
<p class="text-xs text-gray-400">Transaction #{{ transaction.id }}</p>
|
||||
</div>
|
||||
<p class="text-xs text-base-content/60">Transaction #{{ transaction.id }}</p>
|
||||
</div>
|
||||
<div :class="'badge badge-' + getStatusClass(transaction.status)">
|
||||
<div :class="'badge badge-sm border-0 ' + getStatusClass(transaction.status)">
|
||||
{{ getStatusText(transaction.status) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-sm mt-2 space-y-1">
|
||||
<p><strong>Transaction ID:</strong> {{ transaction.auth_net_transaction_id || 'N/A' }}</p>
|
||||
<p><strong>Date:</strong> {{ formatDate(transaction.created_at) }}</p>
|
||||
<p><strong>Pre-Auth:</strong> ${{ transaction.preauthorize_amount || '0.00' }}</p>
|
||||
<p><strong>Charge:</strong> ${{ transaction.charge_amount || '0.00' }}</p>
|
||||
<p><strong>Type:</strong> {{ transaction.transaction_type === 0 ? 'Charge' : transaction.transaction_type === 1 ? 'Auth' : 'Capture' }}</p>
|
||||
<p><strong>Source:</strong> <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>
|
||||
<!-- Rejection Reason in Mobile View -->
|
||||
<div v-if="transaction.rejection_reason && transaction.rejection_reason.trim()" class="bg-transparent border border-gray-300 rounded-md p-3 mt-2">
|
||||
<div class="flex items-start">
|
||||
<svg class="w-4 h-4 mr-2 text-red-500 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-red-700 text-sm">{{ transaction.rejection_reason }}</span>
|
||||
</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>
|
||||
<!-- Action Buttons -->
|
||||
<div class="mt-3 space-y-2">
|
||||
<router-link v-if="transaction.delivery_id" :to="{ name: 'deliveryOrder', params: { id: transaction.delivery_id } }" class="btn btn-xs btn-info btn-block">
|
||||
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 btn-block">
|
||||
View Automatic
|
||||
</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 btn-block">
|
||||
Preauth/Charge
|
||||
</router-link>
|
||||
<router-link v-else-if="Number(transaction.preauthorize_amount) > 0" :to="getCaptureRoute(transaction)" class="btn btn-xs btn-primary btn-block">
|
||||
Capture Payment
|
||||
</router-link>
|
||||
</template>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user