Add more filter when query online transaction, add trigger manual cron button
This commit is contained in:
Afiq Hamzah
@@ -9,22 +9,36 @@ class OnlineTransactionTrailController extends Controller
|
||||
{
|
||||
public function __invoke(Request $request)
|
||||
{
|
||||
if ($request->has('selectedDate') && request()->selectedDate == null) {
|
||||
return redirect()->back()->with('errormessage', 'Sila pilih tarikh!');
|
||||
if ($request->has('startDate') && request()->startDate == null) {
|
||||
return redirect()->back()->with('errormessage', 'Sila pilih tarikh mula!');
|
||||
}
|
||||
|
||||
if ($request->has('endDate') && request()->endDate == null) {
|
||||
return redirect()->back()->with('errormessage', 'Sila pilih tarikh akhir!');
|
||||
}
|
||||
|
||||
$date = $request->selectedDate ?? Carbon::now()->toDateString();
|
||||
$startDate = $request->startDate ?? Carbon::now()->toDateString();
|
||||
$endDate = $request->endDate ?? Carbon::now()->toDateString();
|
||||
|
||||
$norujukan = $request->norujukan ?? '';
|
||||
|
||||
$isGroupedByNorujukan = $request->groupedByNorujukan === 'on' ? true : false;
|
||||
|
||||
|
||||
$status = $request->status ?? '';
|
||||
|
||||
$billplzBillId = $request->billplzBillId ?? '';
|
||||
|
||||
$transactionTrail = Http::arrahn()
|
||||
->get('/api/transaction/online/trail', [
|
||||
'date' => $date,
|
||||
'startDate' => $startDate,
|
||||
'endDate' => $endDate,
|
||||
'status' => $status,
|
||||
'billplzBillId' => $billplzBillId,
|
||||
'norujukan' => $norujukan,
|
||||
'isGroupedByNorujukan' => $isGroupedByNorujukan,
|
||||
])
|
||||
->json();
|
||||
|
||||
return view('online.trail.index', compact('transactionTrail', 'date', 'norujukan'));
|
||||
return view('online.trail.index', compact('transactionTrail', 'startDate', 'endDate', 'norujukan', 'status', 'billplzBillId' ));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,63 +1,158 @@
|
||||
@props([
|
||||
'title' => '',
|
||||
'action' => '',
|
||||
'selectedDate' => '',
|
||||
'startDate' => '',
|
||||
'endDate' => '',
|
||||
'norujukan' => '',
|
||||
'billplzBillId' => '',
|
||||
'status' => 'PAID',
|
||||
])
|
||||
|
||||
<div class="px-4">
|
||||
<div class="container">
|
||||
<div class="flex w-full">
|
||||
<div class=" p-8 pb-4 pt-0 mx-auto">
|
||||
<div class="w-full p-8 pb-4 pt-0 mx-auto container-fluid">
|
||||
<div class="bg-yellow-600 text-gray-200 text-lg px-6 py-2 rounded-t-lg"><a href="/akaunhome"
|
||||
class="router-link-active"><i class="fas fa-backspace text-white"></i></a> <span
|
||||
class="text-center mx-auto text-white font-bold">{{ $title }} </span></div>
|
||||
<form id="filterOnlineTransactionForm" method="get" action="{{ $action }}">
|
||||
<div class="rounded bg-white shadow p-6 pb-0 pt-4">
|
||||
<div class="pb-6">
|
||||
<label for="username" class="font-semibold text-gray-700 block pb-1">Tarikh</label>
|
||||
<div class="flex">
|
||||
<span class="text-gray-600 border border-2 rounded-l px-4 py-2 whitespace-no-wrap"
|
||||
style="background-color: rgb(249, 250, 251);">Pada
|
||||
</span>
|
||||
<input id="tarikhmula" name="selectedDate" type="date"
|
||||
class="border border-2 border-l-0 rounded-r px-4 py-2 w-80r mr-2"
|
||||
value="{{ $selectedDate }}">
|
||||
<span class="text-gray-600 border border-2 rounded-l px-4 py-2 whitespace-no-wrap"
|
||||
style="background-color: rgb(249, 250, 251);">
|
||||
Nombor Rujukan
|
||||
</span>
|
||||
|
||||
<input id="norujukan" name="norujukan" type="text" value="{{ $norujukan }}"
|
||||
class="border border-2 border-l-0 rounded-r px-4 py-2 w-80r mr-2">
|
||||
<div class="container mx-auto">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full lg:w-3/5 pr-4">
|
||||
|
||||
<label for="toggle" class="flex items-center cursor-pointer mx-4">
|
||||
<div class="mr-3 text-gray-700 font-medium">
|
||||
NOT GROUP
|
||||
<label for="Tarikh"
|
||||
class="font-semibold text-gray-700 block pb-1">Tarikh</label>
|
||||
<div class="flex">
|
||||
<span
|
||||
class="text-gray-600 border border-2 rounded-l px-4 py-2 whitespace-no-wrap"
|
||||
style="background-color: rgb(249, 250, 251);">Pada
|
||||
</span>
|
||||
<input id="tarikhmula" name="startDate" type="date"
|
||||
class="border border-2 border-l-0 rounded-r px-4 py-2 w-80r mr-2"
|
||||
value="{{ $startDate }}">
|
||||
<span
|
||||
class="text-gray-600 border border-2 rounded-l px-4 py-2 whitespace-no-wrap"
|
||||
style="background-color: rgb(249, 250, 251);">Hingga
|
||||
</span>
|
||||
<input id="tarikhmula" name="endDate" type="date"
|
||||
class="border border-2 border-l-0 rounded-r px-4 py-2 w-80r mr-2"
|
||||
value="{{ $endDate }}">
|
||||
</div>
|
||||
|
||||
|
||||
<button
|
||||
class="bg-yellow-600 text-white font-montserrat py-2 px-8 font-medium rounded-xl transition-all duration-300 mr-8 mt-16"
|
||||
onclick="triggerCronUpdate()"
|
||||
type="button"
|
||||
>
|
||||
<i class="fa-solid fa-arrows-rotate"></i>
|
||||
Trigger Cron Update
|
||||
</button>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<input type="checkbox" id="toggle" class="sr-only" name="groupedByNorujukan"/>
|
||||
<div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner"></div>
|
||||
<div
|
||||
class="dot absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition">
|
||||
<div class="w-full lg:w-2/5 pl-4 flex flex-col gap-y-5 ">
|
||||
|
||||
<div class="input-wrapper flex">
|
||||
<span
|
||||
class="text-gray-600 border-2 rounded-l px-4 py-2 whitespace-no-wrap inline-flex items-center"
|
||||
style="background-color: rgb(249, 250, 251);">
|
||||
Nombor Rujukan
|
||||
</span>
|
||||
|
||||
<input id="norujukan" name="norujukan" type="text"
|
||||
value="{{ $norujukan }}"
|
||||
class="border-2 border-l-0 rounded-r px-4 py-2 w-40r mr-2 flex-grow">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="billplz-id-input-wrapper flex">
|
||||
<span
|
||||
class="text-gray-600 border-2 rounded-l px-4 py-2 whitespace-no-wrap inline-flex items-center"
|
||||
style="background-color: rgb(249, 250, 251);">
|
||||
Bill ID
|
||||
</span>
|
||||
|
||||
<input id="billplzBillId" name="billplzBillId" type="text"
|
||||
value="{{ $billplzBillId }}"
|
||||
class="border-2 border-l-0 rounded-r px-4 py-2 w-80r mr-2 flex-grow">
|
||||
|
||||
</div>
|
||||
<div id="select-wrapper" class="flex">
|
||||
<span
|
||||
class="text-gray-600 border-2 rounded-l px-4 py-2 whitespace-no-wrap inline-flex items-center"
|
||||
style="background-color: rgb(249, 250, 251);">
|
||||
Status
|
||||
</span>
|
||||
<select id="status" name="status"
|
||||
@php
|
||||
$paymentStatuses = [
|
||||
'PAID',
|
||||
'NOT PAID',
|
||||
'UNSUCCESSFUL',
|
||||
];
|
||||
@endphp
|
||||
class="border-2 border-l-0 rounded-r px-4 py-2 w-80r mr-2 bg-white text-gray-700 focus:outline-none focus:border-yellow-500 flex-grow">
|
||||
<option value="" {{ $status === '' ? 'selected' : '' }}>ALL
|
||||
</option>
|
||||
@foreach ($paymentStatuses as $paymentStatus)
|
||||
<option value="{{ $paymentStatus }}"
|
||||
{{ $status == $paymentStatus ? 'selected' : '' }}>
|
||||
{{ $paymentStatus }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex mt-5">
|
||||
<label for="toggle" class="flex items-center cursor-pointer mx-4">
|
||||
<div class="mr-3 text-gray-700 font-medium">
|
||||
NOT GROUP
|
||||
</div>
|
||||
<div class="relative">
|
||||
<input type="checkbox" id="toggle" class="sr-only"
|
||||
name="groupedByNorujukan" />
|
||||
<div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner">
|
||||
</div>
|
||||
<div
|
||||
class="dot absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition">
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-3 text-gray-700 font-medium">
|
||||
GROUP
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-3 text-gray-700 font-medium">
|
||||
GROUP
|
||||
</div>
|
||||
<hr class="h-px my-2 mt-4 bg-gradient-to-r from-gray-200 via-gray-400 to-gray-200">
|
||||
|
||||
<div class="flex mt-5 gap-x-3 justify-center items-center">
|
||||
<div>
|
||||
<button
|
||||
class="border border-yellow-600 text-yellow-600 font-montserrat py-2 px-8 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300 mr-3"
|
||||
id="reset-button">Reset
|
||||
</button>
|
||||
<button
|
||||
class="bg-yellow-600 text-white font-montserrat py-2 px-8 font-medium rounded-xl transition-all duration-300">
|
||||
<i class="fa-solid fa-eye"></i>
|
||||
View
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
<button
|
||||
class="border border-yellow-600 text-yellow-600 font-montserrat py-2 px-8 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300">
|
||||
<i class="fas fa-eye mr-2"></i>View
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('additional_scripts')
|
||||
<script>
|
||||
@@ -87,24 +182,50 @@
|
||||
dot.classList.add('bg-white');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const norujukanInput = document.querySelector('#norujukan').value.trim();
|
||||
|
||||
|
||||
if (norujukanInput.length > 0) {
|
||||
toggle.checked = false;
|
||||
dot.classList.remove('transform', 'translate-x-full', 'bg-green-500');
|
||||
dot.classList.add('bg-white');
|
||||
}
|
||||
|
||||
event.target.submit();
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
event.target.submit();
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
event.preventDefault();
|
||||
const resetButton = document.querySelector('#reset-button');
|
||||
const input_norujukan = document.querySelector('#norujukan');
|
||||
const input_billplzBillId = document.querySelector('#billplzBillId');
|
||||
const select_status = document.querySelector('#status');
|
||||
const toggle = document.querySelector('#toggle');
|
||||
|
||||
resetButton.addEventListener('click', function() {
|
||||
input_norujukan.value = '';
|
||||
input_billplzBillId.value = '';
|
||||
select_status.selectedIndex = 0;
|
||||
toggle.checked = false;
|
||||
});
|
||||
});
|
||||
|
||||
async function triggerCronUpdate(){
|
||||
alert('This will trigger cron job to update the status of the transaction');
|
||||
|
||||
|
||||
let cronUrl = '{{ config("api.url") . "/api/transaction/online/update" }}';
|
||||
|
||||
let callCronUpdate = () => fetch(cronUrl).then(response => response.json());
|
||||
|
||||
let response = await callCronUpdate();
|
||||
|
||||
alert(cronUrl + ' responded with: ' + response);
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
@@ -1,12 +1,17 @@
|
||||
@props(['content', 'url'])
|
||||
@props(['content', 'url', 'searchId' => ''])
|
||||
|
||||
<div>
|
||||
|
||||
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm" {{ $attributes->merge(['colspan' => '']) }}>
|
||||
<div class="flex items-center">
|
||||
<div class="ml-3">
|
||||
<a class="text-blue-400 whitespace-no-wrap" href="{{ $url }}" target="_blank">
|
||||
{{ $content }}</a>
|
||||
<div class="ml-5">
|
||||
<a class="text-blue-400 whitespace-no-wrap hover:underline" href="{{ $url }}"
|
||||
target="_blank">{{ $content }}</a>
|
||||
|
||||
@if ($searchId != '')
|
||||
<a class="p-1 rounded-md text-black-400 whitespace-no-wrap cursor-pointer {{ $searchId }} hover:bg-green-600 hover:text-white transition-all duration-300">
|
||||
<span class="fas fa-magnifying-glass"></span>
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@@ -7,8 +7,15 @@
|
||||
|
||||
<div class="container mx-auto p-4 pt-2">
|
||||
|
||||
<x-filter-card title="Online Payment Trail" action="{{ route('transaction.online.trail') }}" :selectedDate="$date"
|
||||
:norujukan="$norujukan" />
|
||||
<x-filter-card
|
||||
title="Online Payment Trail"
|
||||
action="{{ route('transaction.online.trail') }}"
|
||||
:startDate="$startDate"
|
||||
:endDate="$endDate"
|
||||
:norujukan="$norujukan"
|
||||
:billplzBillId="$billplzBillId"
|
||||
:status="$status"
|
||||
/>
|
||||
|
||||
@if (Session::has('errormessage'))
|
||||
<div id="errorMessage" class="bg-red-100 border-red-500 text-red-900 text-sm p-4 rounded-lg mb-4" role="alert">
|
||||
@@ -218,3 +225,35 @@
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
@push('additional_scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.querySelectorAll('.search_billplz_id').forEach(function(element) {
|
||||
element.addEventListener('click', function(event) {
|
||||
document.getElementById('reset-button').dispatchEvent(new Event('click'));
|
||||
let billpliz_id_value = element.previousElementSibling.innerHTML.trim();
|
||||
alert('search billplz bill id : '+billpliz_id_value)
|
||||
document.getElementById('billplzBillId').value = billpliz_id_value;
|
||||
window.scrollTo(0, 0);
|
||||
document.getElementById('filterOnlineTransactionForm').submit();
|
||||
event.stopPropagation();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.querySelectorAll('.search_norujukan').forEach(function(element) {
|
||||
element.addEventListener('click', function(event) {
|
||||
document.getElementById('reset-button').dispatchEvent(new Event('click'));
|
||||
let norujukan = element.previousElementSibling.innerHTML.trim();
|
||||
alert('search norujukan : '+norujukan);
|
||||
document.getElementById('norujukan').value = norujukan;
|
||||
window.scrollTo(0, 0);
|
||||
document.getElementById('filterOnlineTransactionForm').submit();
|
||||
event.stopPropagation();
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
+2
@@ -9,6 +9,7 @@
|
||||
<x-slot name="header">
|
||||
<x-table.header content="update_status" />
|
||||
<x-table.header content="update_serahan" />
|
||||
<x-table.header content="status" />
|
||||
<x-table.header content="billplz_id" />
|
||||
<x-table.header content="norujukan" />
|
||||
<x-table.header content="total_payment" />
|
||||
@@ -31,6 +32,7 @@
|
||||
<tr>
|
||||
<x-table.data-status-orb :content="$data['update_status']" />
|
||||
<x-table.data-status-orb :content="$data['update_serahan']" />
|
||||
<x-table.data :content="$data['status']" />
|
||||
<x-table.data-link :content="$data['billplz_id']" :url="route('transaction.online.log.show', $data['billplz_id'])" />
|
||||
<x-table.data-link :content="$data['norujukan']" :url="route('transaction.online.gadaian', $data['norujukan'])" />
|
||||
<x-table.data :content="$data['total_payment']" />
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
<x-table.header content="no." />
|
||||
<x-table.header content="update_status" />
|
||||
<x-table.header content="update_serahan" />
|
||||
<x-table.header content="status" />
|
||||
<x-table.header content="billplz_id" />
|
||||
<x-table.header content="norujukan" />
|
||||
<x-table.header content="total_payment" />
|
||||
@@ -28,8 +29,9 @@
|
||||
<x-table.data :content="$loop->iteration" />
|
||||
<x-table.data-status-orb :content="$data['update_status']" />
|
||||
<x-table.data-status-orb :content="$data['update_serahan']" />
|
||||
<x-table.data-link :content="$data['billplz_id']" :url="route('transaction.online.log.show', $data['billplz_id'])" />
|
||||
<x-table.data-link :content="$data['norujukan']" :url="route('transaction.online.gadaian', $data['norujukan'])" />
|
||||
<x-table.data :content="$data['status']" />
|
||||
<x-table.data-link :content="$data['billplz_id']" :url="route('transaction.online.log.show', $data['billplz_id'])" searchId="search_billplz_id" />
|
||||
<x-table.data-link :content="$data['norujukan']" :url="route('transaction.online.gadaian', $data['norujukan'])" searchId="search_norujukan" />
|
||||
<x-table.data-link :content="$data['total_payment']" :url="route('transaction.online.billplz-transaction-review.show', $data['billplz_id'])" />
|
||||
<x-table.data :content="$data['nokp']" />
|
||||
<x-table.data :content="$data['customer_name']" />
|
||||
|
||||
Reference in New Issue
Block a user