diff --git a/app/Http/Controllers/OnlineTransactionGadaianController.php b/app/Http/Controllers/OnlineTransactionGadaianController.php
new file mode 100644
index 0000000..be38e4e
--- /dev/null
+++ b/app/Http/Controllers/OnlineTransactionGadaianController.php
@@ -0,0 +1,18 @@
+<?php
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Http;
+use Carbon\Carbon;
+
+class OnlineTransactionGadaianController extends Controller
+{
+    public function __invoke($norujukan)
+    {
+        $gadaian = Http::arrahn()->get('/api/gadai/norujukan/'.$norujukan)->json();
+        
+        return response()->json($gadaian);
+        
+        
+    }
+}
diff --git a/app/Http/Controllers/OnlineTransactionLogController.php b/app/Http/Controllers/OnlineTransactionLogController.php
index 35e26c9..bfee06b 100644
--- a/app/Http/Controllers/OnlineTransactionLogController.php
+++ b/app/Http/Controllers/OnlineTransactionLogController.php
@@ -7,7 +7,7 @@ use Carbon\Carbon;
 
 class OnlineTransactionLogController extends Controller
 {
-    public function __invoke(Request $request)
+    public function index(Request $request)
     {
         $date = request()->selectedDate ?? Carbon::now()->toDateString();
 
@@ -17,4 +17,14 @@ class OnlineTransactionLogController extends Controller
 
         return view('online.log.index', compact('logs', 'date'));
     }
+    
+    
+    public function show($bill_id)
+    {
+        $transactionLog = Http::arrahn()->get('/api/transaction/online/log/'.$bill_id)->json();
+        
+        $logs = collect($transactionLog)->groupBy('bill_id');
+
+        return view('online.log.show', compact('logs', 'bill_id'));
+    }
 }
diff --git a/resources/views/components/table/data-link.blade.php b/resources/views/components/table/data-link.blade.php
new file mode 100644
index 0000000..6c7432f
--- /dev/null
+++ b/resources/views/components/table/data-link.blade.php
@@ -0,0 +1,13 @@
+@props(['content', 'url'])
+
+<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>
+        </div>
+    </td>
+</div>
diff --git a/resources/views/online/log/index.blade.php b/resources/views/online/log/index.blade.php
index 68141b8..9b8a859 100644
--- a/resources/views/online/log/index.blade.php
+++ b/resources/views/online/log/index.blade.php
@@ -22,7 +22,7 @@
     <div class="container mx-auto p-4 pt-2">
 
         <x-filter-date-card title="Online Transaction Log"
-            action="{{ route('transaction.online.log') }}" :selectedDate="$date" />
+            action="{{ route('transaction.online.log.index') }}" :selectedDate="$date" />
 
         @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">
diff --git a/resources/views/online/log/show.blade.php b/resources/views/online/log/show.blade.php
new file mode 100644
index 0000000..c3d46fa
--- /dev/null
+++ b/resources/views/online/log/show.blade.php
@@ -0,0 +1,122 @@
+@extends('layouts.app')
+@section('content')
+
+    @section('title', 'Bill ID Log : ' . $bill_id)
+    
+    @push('additional_styles')
+        <style>
+            .accordion-content {
+                max-height: 0;
+                overflow: hidden;
+                transition: max-height 0.3s ease-out;
+            }
+
+            .accordion-content.show {
+                max-height: 1000px;
+                /* Adjust this value based on your content */
+            }
+        </style>
+    @endpush
+    <breadcrumb :items="[{'title' : 'Debug Transaksi Online', 'icon' : 'fas fa-file-invoice','url' : {{ json_encode(route('transaction.online.home')) }}}, {'title' : 'Log', 'icon' : 'fas fa-file-invoice'}]"></breadcrumb>
+    
+    <div class="container mx-auto p-4 bg-yellow-50">
+        @forelse ($logs as $bill_id => $logs)
+            <div class="mb-4">
+                <button class="accordion-toggle w-full bg-gray-600 text-gray-100 p-2 text-left focus:outline-none">
+                    <h2 class="inline-block">Bill ID: {{ $bill_id }}</h2>
+                    @php
+                     $extractedCustomerName = json_decode($logs[0]['payload']) != null && $logs[0]['status'] == '1' ? json_decode($logs[0]['payload'])[3] : 'error';
+                    @endphp
+                    @if($extractedCustomerName == 'error')
+                        <span class="ml-4 bg-red-200 text-red-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-red-200 dark:text-red-800"><h2 class="inline-block">{{ $extractedCustomerName }}</h2></span>
+                    @else
+                        <span class="ml-4 bg-green-200 text-green-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-green-200 dark:text-green-800"><h2 class="inline-block">Customer Name: {{ $extractedCustomerName }}</h2></span>
+                    @endif
+                    <span class="acccordian-arrow float-right">&#9660;</span>
+                </button>
+                <div class="accordion-content hidden">
+                    @foreach ($logs as $log)
+                        <div class="bg-gray-500 text-white border-black p-3 flex justify-between items-center">
+                            <span>{{ $log['status_label'] }}</span>
+                            <span
+                                class="inline-block bg-yellow-200 text-yellow-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-200 dark:text-yellow-800">
+                                {{ $log['status'] }}
+                            </span>
+                            <!-- More log details here -->
+                        </div>
+                        <div class="flex w-full ">
+                            <div class="w-1/2 bg-gray-800 text-black border-r border-green-500">
+                                <div class="bg-green-600 text-gray-800">Request</div>
+                                <div class="pr-3 bg-gray-800 text-green-600">
+                                    <pre>{{ json_encode(json_decode($log['payload']), JSON_PRETTY_PRINT) }}</pre>
+                                </div>
+                            </div>
+                            <div class="w-1/2 bg-gray-800 text-black">
+                                <div class="bg-green-600 text-gray-800">Response</div>
+                                <div class="pl-3 bg-gray-800 text-green-600">
+                                    <pre>{{ json_encode(json_decode($log['response']), JSON_PRETTY_PRINT) }}</pre>
+                                </div>
+                            </div>
+                        </div>
+                        <br>
+                    @endforeach
+                </div>
+            </div>
+            @empty
+                <div class="bg-white text-center py-6">
+                    No data available for the date selected
+                </div>
+        @endforelse
+        
+    </div>
+    @push('additional_scripts')
+        <script>
+            document.addEventListener('DOMContentLoaded', (event) => {
+                const accordionToggles = document.querySelectorAll('.accordion-toggle');
+
+                accordionToggles.forEach(toggle => {
+                    toggle.addEventListener('click', () => {
+                        // Close all other toggles
+                        accordionToggles.forEach(otherToggle => {
+                            if (otherToggle !== toggle) {
+                                const otherContent = otherToggle.nextElementSibling;
+                                const otherArrow = otherToggle.querySelector('span.acccordian-arrow');
+
+                                otherContent.classList.add('hidden');
+                                otherContent.classList.remove('show');
+                                otherContent.style.maxHeight = "0";
+                                otherArrow.innerHTML = '&#9660;';
+                            }
+                        });
+
+                        // Toggle the clicked accordion
+                        const content = toggle.nextElementSibling;
+                        const arrow = toggle.querySelector('span.acccordian-arrow');
+
+                        content.classList.toggle('hidden');
+                        content.classList.toggle('show');
+
+                        if (content.classList.contains('show')) {
+                            content.style.maxHeight = content.scrollHeight + "px";
+                            arrow.innerHTML = '&#9650;';
+                        } else {
+                            content.style.maxHeight = "0";
+                            arrow.innerHTML = '&#9660;';
+                        }
+                    });
+                });
+            });
+        </script>
+        <script>
+            // automatically open all accordion
+            document.addEventListener('DOMContentLoaded', (event) => {  
+                const accordionToggles = document.querySelectorAll('.accordion-toggle');
+                
+                accordionToggles.forEach(toggle => {
+                    toggle.click();
+                });
+                
+            });
+        </script>
+    @endpush
+@endsection
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 61ca336..579ef84 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
@@ -31,13 +31,13 @@
                     <tr>
                     <x-table.data-status-orb :content="$data['update_status']" />
                     <x-table.data-status-orb :content="$data['update_serahan']" />
-                    <x-table.data :content="$data['billplz_id']" />
-                    <x-table.data :content="$data['norujukan']" />
+                    <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']" />
                     <x-table.data :content="$data['nokp']" />
                     <x-table.data :content="$data['customer_name']" />
                     <x-table.data :content="$data['kodcaw']" />
-                    <x-table.data :content="$data['tagportal']" />
+                    <x-table.data :content="$data['tagportal'] == '1' ? 'ArrahnPay' : 'SPARE'" />
                     <x-table.data :content="$data['masa']" />
                     <x-table.data :content="$data['tarikh']" />
                     <x-table.data :content="$data['reference_no']" />
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 b8757ab..c7fca9a 100644
--- a/resources/views/online/trail/partials/table-transactions-online.blade.php
+++ b/resources/views/online/trail/partials/table-transactions-online.blade.php
@@ -26,13 +26,13 @@
                 <tr>
                     <x-table.data-status-orb :content="$data['update_status']" />
                     <x-table.data-status-orb :content="$data['update_serahan']" />
-                    <x-table.data :content="$data['billplz_id']" />
-                    <x-table.data :content="$data['norujukan']" />
+                    <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']" />
                     <x-table.data :content="$data['nokp']" />
                     <x-table.data :content="$data['customer_name']" />
                     <x-table.data :content="$data['kodcaw']" />
-                    <x-table.data :content="$data['tagportal']" />
+                    <x-table.data :content="$data['tagportal'] == '1' ? 'ArrahnPay' : 'SPARE'" />
                     <x-table.data :content="$data['masa']" />
                     <x-table.data :content="$data['tarikh']" />
                     <x-table.data :content="$data['reference_no']" />
diff --git a/resources/views/onlineTransaction/home.blade.php b/resources/views/onlineTransaction/home.blade.php
index fe32f94..fb42f5e 100644
--- a/resources/views/onlineTransaction/home.blade.php
+++ b/resources/views/onlineTransaction/home.blade.php
@@ -33,22 +33,21 @@
 
 
          <div class=" flex justify-center items-center mx-auto">
-            <a href="{{ route('transaction.online.log') }}" class="bg-white shadow  px-6 py-4 border border-solid rounded-lg w-1/6 mr-3 hover:bg-yellow-300 hover:transition-all cursor-pointer transition transform hover:-translate-y-1 ">
-                <div class="flex justify-center items-center">
-                    <svg width="128px" height="128px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 4C5 3.44772 5.44772 3 6 3V21C5.44772 21 5 20.5523 5 20V4ZM8 21V3H19V21H8ZM7 23H6C4.34315 23 3 21.6569 3 20V4C3 2.34315 4.34315 1 6 1H7H19C20.1046 1 21 1.89543 21 3V21C21 22.1046 20.1046 23 19 23H7Z" fill="#000000"></path> </g></svg>
-                </div>
-                <h2 class="mx-auto text-center font-bold text-2xl mt-4 uppercase">Log Transaksi Online</h2>
-            </a>
-         </div>
-
-         <div class=" flex justify-center items-center mx-auto pt-5 mr- 3">
             <a href="{{ route('transaction.online.trail') }}" class="bg-white shadow  px-6 py-4 border border-solid rounded-lg w-1/6 hover:bg-yellow-300 hover:transition-all cursor-pointer  transition transform hover:-translate-y-1 ">
                 <div class="flex justify-center items-center">
                     <svg fill="#000000" width="128px" height="128px" viewBox="0 0 256 256" id="Flat" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M208,72V184a7.99989,7.99989,0,0,1-8,8H176V104L136,64H80V40.00006a7.99989,7.99989,0,0,1,8-8L168,32Z" opacity="0.2"></path> <path d="M213.65723,66.34326l-40-40A8.00076,8.00076,0,0,0,168,24H88A16.01833,16.01833,0,0,0,72,40V56H56A16.01833,16.01833,0,0,0,40,72V216a16.01833,16.01833,0,0,0,16,16H168a16.01833,16.01833,0,0,0,16-16V200h16a16.01833,16.01833,0,0,0,16-16V72A8.00035,8.00035,0,0,0,213.65723,66.34326ZM168,216H56V72h76.68652L168,107.314l.00781,84.53083c-.001.05212-.00781.10284-.00781.15521,0,.05255.00684.10345.00781.15576l.002,23.84375Zm32-32H184V104a8.00035,8.00035,0,0,0-2.34277-5.65674l-40-40A8.00076,8.00076,0,0,0,136,56H88V40h76.68652L200,75.314Zm-56-32a8.00008,8.00008,0,0,1-8,8H88a8,8,0,0,1,0-16h48A8.00008,8.00008,0,0,1,144,152Zm0,32a8.00008,8.00008,0,0,1-8,8H88a8,8,0,0,1,0-16h48A8.00008,8.00008,0,0,1,144,184Z"></path> </g></svg>
                 </div>
                 <h2 class="mx-auto text-center font-bold text-2xl mt-4 uppercase">Trail Transaksi Online</h2>
             </a>
+         </div>
 
+         <div class=" flex justify-center items-center mx-auto pt-5 mr- 3">
+            <a href="{{ route('transaction.online.log.index') }}" class="bg-white shadow  px-6 py-4 border border-solid rounded-lg w-1/6 mr-3 hover:bg-yellow-300 hover:transition-all cursor-pointer transition transform hover:-translate-y-1 ">
+                <div class="flex justify-center items-center">
+                    <svg width="128px" height="128px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 4C5 3.44772 5.44772 3 6 3V21C5.44772 21 5 20.5523 5 20V4ZM8 21V3H19V21H8ZM7 23H6C4.34315 23 3 21.6569 3 20V4C3 2.34315 4.34315 1 6 1H7H19C20.1046 1 21 1.89543 21 3V21C21 22.1046 20.1046 23 19 23H7Z" fill="#000000"></path> </g></svg>
+                </div>
+                <h2 class="mx-auto text-center font-bold text-2xl mt-4 uppercase">Log Transaksi Online</h2>
+            </a>
             <a href="{{ route('transaction.online.billplz-transaction-review') }}" class="bg-white shadow  px-6 py-4 border border-solid rounded-lg w-1/6 hover:bg-yellow-300 hover:transition-all cursor-pointer  transition transform hover:-translate-y-1 ml-5">
                 <div class="flex justify-center items-center">
                     <svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 512 512" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <style type="text/css">  .st0{fill:#000000;}  </style> <g> <rect x="136" y="400" class="st0" width="48" height="48"></rect> <rect x="136" y="320" class="st0" width="48" height="48"></rect> <rect x="136" y="240" class="st0" width="48" height="48"></rect> <rect x="232" y="400" class="st0" width="48" height="48"></rect> <rect x="232" y="320" class="st0" width="48" height="48"></rect> <rect x="232" y="240" class="st0" width="48" height="48"></rect> <rect x="328" y="320" class="st0" width="48" height="128"></rect> <rect x="328" y="240" class="st0" width="48" height="48"></rect> <path class="st0" d="M394.656,0H117.359C92.313,0,72,20.313,72,45.344v421.313C72,491.688,92.313,512,117.359,512h277.297 C419.703,512,440,491.688,440,466.656V45.344C440,20.313,419.703,0,394.656,0z M136,72h240v80H136V72z M416,466.656 c0,11.766-9.578,21.344-21.344,21.344H117.359C105.594,488,96,478.422,96,466.656V197.328h320V466.656z"></path> </g> </g></svg>
diff --git a/routes/web.php b/routes/web.php
index 59fb976..7d350f8 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -2,6 +2,7 @@
 
 use App\Http\Controllers\BillplzTransactionReviewController;
 use App\Http\Controllers\OnlineTransactionController;
+use App\Http\Controllers\OnlineTransactionGadaianController;
 use App\Http\Controllers\OnlineTransactionLogController;
 use App\Http\Controllers\OnlineTransactionTrailController;
 use Illuminate\Support\Facades\Route;
@@ -175,7 +176,9 @@ Route::get('/pengguna',['as'=>'pengguna','uses'=>'App\Http\Controllers\PenggunaC
 Route::get('/transaction/online/home',  OnlineTransactionController::class)->name('transaction.online.home');
 Route::get('/transaction/online/trail', OnlineTransactionTrailController::class)->name('transaction.online.trail');
 Route::get('/transaction/online/billplz-transaction-review', BillplzTransactionReviewController::class)->name('transaction.online.billplz-transaction-review');
-Route::get('/transaction/online/log', OnlineTransactionLogController::class)->name('transaction.online.log');
+Route::get('/transaction/online/log', [OnlineTransactionLogController::class, 'index'])->name('transaction.online.log.index');
+Route::get('/transaction/online/log/{bill_id}', [OnlineTransactionLogController::class, 'show'])->name('transaction.online.log.show');
+Route::get('/transaction/online/gadaian/{norujukan}', OnlineTransactionGadaianController::class)->name('transaction.online.gadaian');
 
 
 Route::get('{any}', function () {