Add tabbable views in billplz transaction summary
This commit is contained in:
Afiq Hamzah
@@ -9,21 +9,30 @@
|
||||
]">
|
||||
</breadcrumb>
|
||||
|
||||
<div class="container mx-auto p-4 bg-yellow-50">
|
||||
<div class="flex mb-4 border-b border-gray-200">
|
||||
<button class="flex items-center tab-button active" data-tab="pkb-transactions-summary">
|
||||
<span>PKB (v2)</span>
|
||||
</button>
|
||||
<button class="flex items-center tab-button" data-tab="kopkb-transactions-summary">
|
||||
<span>KOPKB (v3)</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<div id="pkb-transactions-summary" class="container p-4 mx-auto bg-yellow-50 tab-content active">
|
||||
<x-filter-date-card title="Billplz Transaction Summary"
|
||||
action="{{ route('transaction.online.billplz-transaction-summary.index') }}" :selectedDate="$date" />
|
||||
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="container px-4 mx-auto">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex flex-row space-x-4 mt-6">
|
||||
<div class="flex flex-row mt-6 space-x-4">
|
||||
<x-card title="Sum of Billplz Transactions" subtitle="{{ $sumOfBillplzTransactions }}"></x-card>
|
||||
<div class="flex items-center"><span class="text-5xl font-bold">-</span></div>
|
||||
<x-card title="Sum of Arrahn Transactions" subtitle="{{ $sumOfArrahnTransactions }}"></x-card>
|
||||
<div class="flex items-center"><span class="text-5xl font-bold"> = </span></div>
|
||||
<x-card title="Payment Gateway Cost" subtitle="{{ $paymentGatewayCost }}"></x-card>
|
||||
</div>
|
||||
<hr class="border-b-2 border-gray-300 border-solid my-4 w-full">
|
||||
<div class="flex flex-row space-x-4 mb-6">
|
||||
<hr class="w-full my-4 border-b-2 border-gray-300 border-solid">
|
||||
<div class="flex flex-row mb-6 space-x-4">
|
||||
<x-card title="No of Arrahn Transactions" subtitle="{{ $numberOfArrahnTransactions }}"></x-card>
|
||||
<div class="flex items-center"><span class="text-5xl font-bold">x</span></div>
|
||||
<x-card title="Charge Per Transaction" subtitle="RM 1.00"></x-card>
|
||||
@@ -45,7 +54,7 @@
|
||||
<tr>
|
||||
<x-table.data :content="$loop->iteration" />
|
||||
<x-table.data :content="$data['billplz_bill']['id']" />
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
|
||||
@foreach ($data['arrahn_transactions'] as $arrahn_transaction)
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3 text-gray-900 whitespace-no-wrap">
|
||||
@@ -72,7 +81,7 @@
|
||||
</div>
|
||||
@endforeach
|
||||
</td>
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||
<td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3 text-gray-900 whitespace-no-wrap">
|
||||
<div class="flex items-center">
|
||||
@@ -100,4 +109,149 @@
|
||||
</x-slot>
|
||||
</x-table>
|
||||
</div>
|
||||
<div id="kopkb-transactions-summary" class="container hidden p-4 mx-auto bg-yellow-50 tab-content">
|
||||
<x-filter-date-card title="Billplz Transaction Summary"
|
||||
action="{{ route('transaction.online.billplz-transaction-summary.index') }}" :selectedDate="$date" />
|
||||
|
||||
<div class="container px-4 mx-auto">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex flex-row mt-6 space-x-4">
|
||||
<x-card title="Sum of Billplz Transactions" subtitle="{{ $sumOfBillplzTransactions }}"></x-card>
|
||||
<div class="flex items-center"><span class="text-5xl font-bold">-</span></div>
|
||||
<x-card title="Sum of Arrahn Transactions" subtitle="{{ $sumOfArrahnTransactions }}"></x-card>
|
||||
<div class="flex items-center"><span class="text-5xl font-bold"> = </span></div>
|
||||
<x-card title="Payment Gateway Cost" subtitle="{{ $paymentGatewayCost }}"></x-card>
|
||||
</div>
|
||||
<hr class="w-full my-4 border-b-2 border-gray-300 border-solid">
|
||||
<div class="flex flex-row mb-6 space-x-4">
|
||||
<x-card title="No of Arrahn Transactions" subtitle="{{ $numberOfArrahnTransactions }}"></x-card>
|
||||
<div class="flex items-center"><span class="text-5xl font-bold">x</span></div>
|
||||
<x-card title="Charge Per Transaction" subtitle="RM 1.00"></x-card>
|
||||
<div class="flex items-center"><span class="text-5xl font-bold"> = </span></div>
|
||||
<x-card title="Payment Gateway Cost"
|
||||
subtitle="RM {{ number_format(($numberOfArrahnTransactions * 100) / 100, 2) }}"></x-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<x-table>
|
||||
<x-slot name="header">
|
||||
<x-table.header content="No." />
|
||||
<x-table.header content="billplz_id" />
|
||||
<x-table.header content="Transaction Arrahn" />
|
||||
<x-table.header content="Transaction Billplz" />
|
||||
</x-slot>
|
||||
<x-slot name="body">
|
||||
@forelse ($billPlzTransactionSummary as $data)
|
||||
<tr>
|
||||
<x-table.data :content="$loop->iteration" />
|
||||
<x-table.data :content="$data['billplz_bill']['id']" />
|
||||
<td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
|
||||
@foreach ($data['arrahn_transactions'] as $arrahn_transaction)
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3 text-gray-900 whitespace-no-wrap">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<p class="text-gray-900 whitespace-no-wrap">
|
||||
status : <span
|
||||
class="inline-block bg-green-600 text-white px-2 py-0.5 rounded text-xs font-medium">{{ $arrahn_transaction['status'] }}</span>
|
||||
<br>
|
||||
total_payment:
|
||||
{{ number_format((float) $arrahn_transaction['total_payment'], 2, '.', '') }}<br>
|
||||
norujukan: {{ $arrahn_transaction['norujukan'] }}
|
||||
|
||||
</p>
|
||||
<br>
|
||||
<p class="text-gray-900 whitespace-no-wrap">
|
||||
kodcaw: {{ $arrahn_transaction['kodcaw'] }} <br>
|
||||
customer_name: {{ $arrahn_transaction['customer_name'] }} <br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</td>
|
||||
<td class="px-5 py-5 text-sm bg-white border-b border-gray-200">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3 text-gray-900 whitespace-no-wrap">
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<p class="text-gray-900 whitespace-no-wrap">
|
||||
billplz_status : <span
|
||||
class="inline-block bg-green-600 text-white px-2 py-0.5 rounded text-xs font-medium">{{ $data['billplz_bill']['state'] ?? '' }}</span>
|
||||
<br>
|
||||
billplz_paid_amount:
|
||||
{{ number_format($data['billplz_bill']['paid_amount']['amount'] / 100, 2, '.', '') }}
|
||||
<br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<x-table.data colspan="3" class="text-center" content="No data available" />
|
||||
</tr>
|
||||
@endforelse
|
||||
</x-slot>
|
||||
</x-table>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@push('additional_scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const tabButtons = document.querySelectorAll('.tab-button');
|
||||
const tabContents = document.querySelectorAll('.tab-content');
|
||||
|
||||
tabButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const tabId = button.getAttribute('data-tab');
|
||||
|
||||
// Deactivate all tabs
|
||||
tabButtons.forEach(btn => btn.classList.remove('active'));
|
||||
tabContents.forEach(content => content.classList.remove('active'));
|
||||
|
||||
// Activate the clicked tab
|
||||
button.classList.add('active');
|
||||
console.log(tabId)
|
||||
document.getElementById(tabId).classList.add('active');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
@push('additional_styles')
|
||||
<style>
|
||||
.tab-button {
|
||||
padding: 10px 15px;
|
||||
background-color: #f3f4f6;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background-color: #ffffff;
|
||||
border-bottom: 2px solid #3b82f6;
|
||||
}
|
||||
|
||||
.tab-button-diff.active {
|
||||
background-color: #f87171;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
Reference in New Issue
Block a user