diff --git a/app/Http/Controllers/OnlineTransactionTrailController.php b/app/Http/Controllers/OnlineTransactionTrailController.php
index a7c2c2d..906acd4 100644
--- a/app/Http/Controllers/OnlineTransactionTrailController.php
+++ b/app/Http/Controllers/OnlineTransactionTrailController.php
@@ -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' ));
     }
 }
diff --git a/resources/views/components/filter-card.blade.php b/resources/views/components/filter-card.blade.php
index bbfb237..92ad755 100644
--- a/resources/views/components/filter-card.blade.php
+++ b/resources/views/components/filter-card.blade.php
@@ -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
diff --git a/resources/views/components/table/data-link.blade.php b/resources/views/components/table/data-link.blade.php
index 6c7432f..afe7178 100644
--- a/resources/views/components/table/data-link.blade.php
+++ b/resources/views/components/table/data-link.blade.php
@@ -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>
diff --git a/resources/views/online/trail/index.blade.php b/resources/views/online/trail/index.blade.php
index 611a9bc..4e1d30d 100644
--- a/resources/views/online/trail/index.blade.php
+++ b/resources/views/online/trail/index.blade.php
@@ -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
diff --git a/resources/views/online/trail/partials/grouped-by-norujukan/table-transactions-online.blade.php b/resources/views/online/trail/partials/grouped-by-norujukan/table-transactions-online.blade.php
index 579ef84..d554adb 100644
--- a/resources/views/online/trail/partials/grouped-by-norujukan/table-transactions-online.blade.php
+++ b/resources/views/online/trail/partials/grouped-by-norujukan/table-transactions-online.blade.php
@@ -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']" />
diff --git a/resources/views/online/trail/partials/table-transactions-online.blade.php b/resources/views/online/trail/partials/table-transactions-online.blade.php
index aa42ccf..af4260f 100644
--- a/resources/views/online/trail/partials/table-transactions-online.blade.php
+++ b/resources/views/online/trail/partials/table-transactions-online.blade.php
@@ -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']" />