diff --git a/app/Http/Controllers/OnlineTransactionController.php b/app/Http/Controllers/OnlineTransactionController.php
new file mode 100644
index 0000000..eeabfe3
--- /dev/null
+++ b/app/Http/Controllers/OnlineTransactionController.php
@@ -0,0 +1,17 @@
+<?php
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Http;
+use Carbon\Carbon;
+use Illuminate\Support\Facades\Auth;
+
+class OnlineTransactionController extends Controller
+{
+    public function __invoke(Request $request)
+    {
+        $auth_user = Auth::user();
+
+        return view('onlineTransaction.home', compact('auth_user'));
+    }
+}
diff --git a/app/Http/Controllers/OnlineTransactionLogController.php b/app/Http/Controllers/OnlineTransactionLogController.php
new file mode 100644
index 0000000..35e26c9
--- /dev/null
+++ b/app/Http/Controllers/OnlineTransactionLogController.php
@@ -0,0 +1,20 @@
+<?php
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Http;
+use Carbon\Carbon;
+
+class OnlineTransactionLogController extends Controller
+{
+    public function __invoke(Request $request)
+    {
+        $date = request()->selectedDate ?? Carbon::now()->toDateString();
+
+        $transactionLog = Http::get(config('api.url') . '/api/transaction/online/log', ['date' => $date])->json();
+        
+        $logs = collect($transactionLog)->groupBy('bill_id');
+
+        return view('online.log.index', compact('logs', 'date'));
+    }
+}
diff --git a/resources/views/layouts/sidebar.blade.php b/resources/views/layouts/sidebar.blade.php
index f2f6abd..b18d644 100644
--- a/resources/views/layouts/sidebar.blade.php
+++ b/resources/views/layouts/sidebar.blade.php
@@ -260,22 +260,15 @@
                     </div>
                 </li>
             </a>
-            <a href="{{ route('transaction.online.trail') }}" class="rounded mb-2 mr-2 {{ Route::is('transaction.online') || Route::is('transaction.online.trail')  ? 'bg-gray-200 rounded text-white-500' : 'hover:bg-yellow-300 ' }}">
-                <li class="flex w-full justify-between text-gray-600 hover:text-gray-500 cursor-pointer items-center ">
-                    <div class="flex items-center">
-                    <svg fill="#000000" width="28px" height="28px" 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>
-                        <span class="text-sm ml-2 text-lg">Trail Transaksi Online</span>
-                    </div>
-                </li>
-            </a>
-            <a href="{{ route('transaction.online.billplz-transaction-review') }}" class="rounded mb-2 mr-2 {{ Route::is('transaction.online') || Route::is('transaction.online.billplz-transaction-review')  ? 'bg-gray-200 rounded text-white-500' : 'hover:bg-yellow-300 ' }}">
+            <a href="{{ route('transaction.online.home') }}" class="rounded mb-2 mr-2 {{ Route::is('transaction.online') || Route::is('transaction.online.home')  ? 'bg-gray-200 rounded text-white-500' : 'hover:bg-yellow-300 ' }}">
                 <li class="flex w-full justify-between text-gray-600 hover:text-gray-500 cursor-pointer items-center ">
                     <div class="flex items-center">
                     <svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28px" height="28px" 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>
-                        <span class="text-sm ml-2 text-lg">Review Transaksi Billplz</span>
+                        <span class="text-sm ml-2 text-lg">Debug Transaksi Online</span>
                     </div>
                 </li>
             </a>
+            
             {{-- <a href="{{ route('permohonan.index') }}" class="rounded mb-2 mr-2
             {{ Route::is('permohonan') || Route::is('permohonan.*')  ? 'bg-gray-200 rounded text-white-500' : 'hover:bg-yellow-300 ' }}">
             <li class="flex w-full justify-between text-gray-600 hover:text-gray-500 cursor-pointer items-center ">
diff --git a/resources/views/online/log/index.blade.php b/resources/views/online/log/index.blade.php
new file mode 100644
index 0000000..4f07929
--- /dev/null
+++ b/resources/views/online/log/index.blade.php
@@ -0,0 +1,131 @@
+@extends('layouts.app')
+@section('content')
+    @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
+    <x-breadcrumb title="Online Transaction Log" />
+
+    <div class="container mx-auto p-4 pt-2">
+
+        <x-filter-date-card title="Online Transaction Log"
+            action="{{ route('transaction.online.log') }}" :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">
+                <div class="flex">
+                    <div class="py-1">
+                        <svg class="fill-current h-6 w-6 text-red-500 mr-4" xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 20 20">
+                            <path
+                                d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" />
+                        </svg>
+                    </div>
+                    <div>
+                        <p class="font-bold">{{ Session::get('errormessage') }}</p>
+                    </div>
+                </div>
+            </div>
+        @endif
+
+    </div>
+    <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>
+    @endpush
+@endsection
diff --git a/resources/views/online/trail/partials/grouped-by-norujukan/table-gldetail.blade.php b/resources/views/online/trail/partials/grouped-by-norujukan/table-gldetail.blade.php
index 3e5157a..6cabe67 100644
--- a/resources/views/online/trail/partials/grouped-by-norujukan/table-gldetail.blade.php
+++ b/resources/views/online/trail/partials/grouped-by-norujukan/table-gldetail.blade.php
@@ -50,7 +50,7 @@
             </x-slot>
         </x-table>
         <x-table.horizontal-scroller scrollDirection="left" tabContent="glDetail" />
-    @ @empty
+     @empty
         <div class="bg-white text-center py-6">
             No data available for the date selected
         </div>
diff --git a/resources/views/onlineTransaction/home.blade.php b/resources/views/onlineTransaction/home.blade.php
new file mode 100644
index 0000000..f403175
--- /dev/null
+++ b/resources/views/onlineTransaction/home.blade.php
@@ -0,0 +1,65 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="bg-gray-900 opacity-50 hidden fixed inset-0 z-10" id="sidebarBackdrop"></div>
+<div id="main-content" class="h-full w-full bg-gray-50 relative overflow-y-auto">
+   <main>
+
+      <div class="pt-6 px-4">
+
+         <breadcrumb :items="[{'title' : 'Tetapan', 'icon' : 'fas fa-file-invoice'}]"></breadcrumb>
+
+
+         @if (Session::has('type'))
+         <div class="@if(Session::get('type') == 'error') bg-red-100 border-red-500 text-red-900 @else bg-yellow-100 border-green-500 text-green-900 @endif  border-t-4 rounded-b px-4 py-3 shadow-md w-96 mx-auto mb-5" role="alert">
+            <div class="flex">
+              <div class="py-1">
+                  @if(Session::get('type') == 'error')
+                     <svg class="fill-current h-6 w-6 text-red-500 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
+                  @else
+                     <svg xmlns="http://www.w3.org/2000/svg" class="fill-current h-6 w-6 text-green-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
+                     </svg>
+                  @endif
+               </div>
+              <div>
+                <p class="font-bold">{{ Session::get('message') }}</p>
+                <p class="text-sm">{{ Session::get('title') }}</p>
+              </div>
+            </div>
+          </div>
+         @endif
+
+
+
+         <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>
+
+            <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>
+                </div>
+                <h2 class="mx-auto text-center font-bold text-2xl mt-4 uppercase">Review Transaksi Billplz</h2>
+            </a>
+
+        </div>
+
+
+      </div>
+   </main>
+   @include('layouts.footer')
+@endsection
diff --git a/routes/web.php b/routes/web.php
index 23544f9..85cade8 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,6 +1,8 @@
 <?php
 
 use App\Http\Controllers\BillplzTransactionReviewController;
+use App\Http\Controllers\OnlineTransactionController;
+use App\Http\Controllers\OnlineTransactionLogController;
 use App\Http\Controllers\OnlineTransactionTrailController;
 use Illuminate\Support\Facades\Route;
 use Illuminate\Support\Facades\Http;
@@ -168,8 +170,10 @@ Route::get('/tetapan-unsold-commodity-notification',['as'=>'tetapan.unsold-commo
 Route::get('/pengguna',['as'=>'pengguna','uses'=>'App\Http\Controllers\PenggunaController@index'])->middleware(['roleChecker:admin,akaun,operasi,kpo,callcenter']);
 
 //Payment online trail 
+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('{any}', function () {