diff --git a/app/Events/AutoSerahan.php b/app/Events/AutoSerahan.php
new file mode 100644
index 0000000..a618636
--- /dev/null
+++ b/app/Events/AutoSerahan.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Events;
+
+use Illuminate\Queue\SerializesModels;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
+
+class AutoSerahan implements ShouldBroadcast
+{
+  use Dispatchable, InteractsWithSockets, SerializesModels;
+
+  public $pengesahan;
+  public $cawangan;
+  public $kodlaluan;
+  public $id;
+
+  public function __construct($pengesahan,$id,$cawangan,$kodlaluan)
+  {
+      $this->pengesahan = $pengesahan;
+      $this->id = $id;
+      $this->cawangan = $cawangan;
+      $this->kodlaluan = $kodlaluan;
+  }
+
+  public function broadcastOn()
+  {
+    return ['autoserahan-notice'];
+  }
+
+  public function broadcastAs()
+  {
+    return 'autoserahan-event';
+  }
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/AutoSerahanController.php b/app/Http/Controllers/AutoSerahanController.php
index 697f7d7..9d7f896 100644
--- a/app/Http/Controllers/AutoSerahanController.php
+++ b/app/Http/Controllers/AutoSerahanController.php
@@ -1,15 +1,71 @@
 <?php
 namespace App\Http\Controllers;
 
+use App\Events\AutoSerahan;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Http;
-use Carbon\Carbon;
+use Illuminate\Pagination\LengthAwarePaginator;
 
 class AutoSerahanController extends Controller
 {
     public function index(Request $request)
     {
-        $index = 0;
-        return view('autoserahan.index', compact('index'));
+        // Fetch paginated data from API
+        $response = Http::get(config('api.url') . '/api/autoserahan/list', [
+            'page' => request('page', 1) // Get current page from request
+        ])->json();
+
+        // Extract pagination details
+        $items = $response['data'] ?? []; // Data array
+        $total = $response['total'] ?? 0; // Total items
+        $perPage = $response['per_page'] ?? 10; // Items per page
+        $currentPage = $response['current_page'] ?? 1; // Current page
+
+        // Create Laravel paginator
+        $list = new LengthAwarePaginator($items, $total, $perPage, $currentPage, [
+            'path' => request()->url(), // Current URL
+            'query' => request()->query(), // Append other query params
+        ]);
+        return view('autoserahan.index', compact('list'));
+    }
+
+    public function approve(Request $request)
+    {
+        $response = Http::put(config('api.url') . '/api/autoserahan/approve', [
+            'id' => $request->id,
+            'kodcaw' => $request->kodcaw,
+            'teller' => $request->teller,
+            'amaun' => $request->amaun,
+            'sendApproval' => 'ACCEPTED',
+            'operasi_name' => auth()->user()->name,
+        ])->json();
+
+        if($response['status'] == 'success'){
+            event(new AutoSerahan("Lulus",$request->id,$request->kodcaw,$request->teller));
+            return redirect()->route('autoserahan')->with('success', 'Serahan approved successfully');
+        }else{
+            event(new AutoSerahan("Error",$request->id,$request->kodcaw,$request->teller));
+            return redirect()->route('autoserahan')->with('error', 'Serahan approved failed');
+        }
+    }
+
+    public function reject(Request $request)
+    {
+        $response = Http::put(config('api.url') . '/api/autoserahan/approve', [
+            'id' => $request->id,
+            'kodcaw' => $request->kodcaw,
+            'teller' => $request->teller,
+            'amaun' => $request->amaun,
+            'sendApproval' => 'REJECTED',
+            'operasi_name' => auth()->user()->name,
+        ])->json();
+
+        if($response['status'] == 'success'){
+            event(new AutoSerahan("Batal",$request->id,$request->kodcaw,$request->teller));
+            return redirect()->route('autoserahan')->with('success', 'Serahan rejected successfully');
+        }else{
+            event(new AutoSerahan("Error",$request->id,$request->kodcaw,$request->teller));
+            return redirect()->route('autoserahan')->with('error', 'Serahan rejected failed');
+        }
     }
 }
diff --git a/resources/views/autoserahan/index.blade.php b/resources/views/autoserahan/index.blade.php
index dd4778d..ab4d2b1 100644
--- a/resources/views/autoserahan/index.blade.php
+++ b/resources/views/autoserahan/index.blade.php
@@ -7,75 +7,62 @@
         <div class="pt-6 px-4">
             <breadcrumb :items="[{'title' : 'Kelulusan Serahan', 'icon' : 'fas fa-stamp','url' : {{ json_encode(route('transaction.online.home')) }}}]"></breadcrumb>
       
+            @if (session('success'))
+            <div id="successMessage" class="bg-green-500 text-white p-3 rounded-lg mb-4 flex justify-between items-center">
+                <span>{{ session('success') }}</span>
+                <button onclick="document.getElementById('successMessage').remove()" class="text-white ml-2">&times;</button>
+            </div>
+            @endif
+            @if (session('error'))
+                <div id="errorMessage" class="bg-red-500 text-white p-3 rounded-lg mb-4 flex justify-between items-center">
+                    <span>{{ session('error') }}</span>
+                    <button onclick="document.getElementById('errorMessage').remove()" class="text-white ml-2">&times;</button>
+                </div>
+            @endif
+
             <h1>Kelulusan Serahan</h1>
             <table class="min-w-full leading-normal">
-                <thead class="text-center">
-                  <tr>
-                    <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                      Bil
-                    </th>
-                    <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                      Nama
-                    </th>
-                    <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                      IC
-                    </th>
-                    <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                      Nota
-                    </th>
-                    <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                      Action
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr >
-                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                      <div class="flex items-center">
-                        <div class="ml-3">
-                          <p class="text-gray-900 whitespace-no-wrap">
-                          </p>
-                        </div>
-                      </div>
-                    </td>
-                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                      <div class="flex items-center">
-                        <div class="ml-3">
-                          <p class="text-gray-900 whitespace-no-wrap" >
-                          </p>
-                        </div>
-                      </div>
-                    </td>
-                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                      <div class="flex items-center">
-                        <div class="ml-3">
-                          <p class="text-gray-900 whitespace-no-wrap" >
-                          </p>
-                        </div>
-                      </div>
-                    </td>
-                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                      <div class="flex items-center">
-                        <div class="ml-3">
-                          <p class="text-gray-900 whitespace-no-wrap" >
-                          </p>
-                        </div>
-                      </div>
-                    </td>
-                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                      <div class="flex items-center">
-                        <div class="ml-3">
-                          <button data-modal-toggle="popup-modal" class="border border-red-600 text-red-600 font-montserrat py-2 px-4 font-medium rounded-xl hover:bg-red-600 hover:text-white transition-all duration-300">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
+                  <thead class="text-center">
+                      <tr>
+                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Bil</th>
+                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Cawangan</th>
+                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Pemohon</th>
+                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Amaun</th>
+                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Tindakan</th>
+                      </tr>
+                  </thead>
+                  @if ($list->count() > 0)
+                  @foreach($list as $item)
+                  <tbody>
+                      <tr>
+                          <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">{{ $item['id'] }}</td>
+                          <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">{{ $item['kodcaw'] }}</td>
+                          <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">{{ $item['pc_name'] }}</td>
+                          <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">{{ number_format($item['amount'], 2) }}</td>
+                          <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                              <a href="{{ route('autoserahan.approve', ['id' => $item['id'], 'kodcaw' => $item['kodcaw'], 'teller' => $item['pc_name'], 'amaun' => $item['amount']]) }}" class="cursor-pointer bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
+                                  <i class="fas fa-thumbs-up mr-1 text-md"></i> Lulus
+                              </a>
+                              <a href="{{ route('autoserahan.reject', ['id' => $item['id'], 'kodcaw' => $item['kodcaw'], 'teller' => $item['pc_name'], 'amaun' => $item['amount']]) }}" class="cursor-pointer bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
+                                  <i class="fas fa-thumbs-down mr-1 text-md"></i> Tolak
+                              </a>
+                          </td>
+                      </tr>
+                  </tbody>
+                  @endforeach
+              @else
+                  <tbody>
+                      <tr>
+                          <td colspan="5" class="text-center py-5 text-gray-500 text-sm font-semibold">Tiada data</td>
+                      </tr>
+                  </tbody>
+              @endif
+          </table>
+          
+          <!-- Pagination Controls -->
+          <div class="mt-4 flex justify-right">
+              {{ $list->links() }}
+          </div>
         </div>
    </main>
 @endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 75bdcdf..f296780 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -188,7 +188,8 @@ Route::get('/transaction/online/gadaian/{norujukan}', OnlineTransactionGadaianCo
 
 //Auto-Serahan
 Route::get('/autoserahan/home',  [AutoSerahanController::class,'index'])->name('autoserahan');
-
+Route::get('/autoserahan/approve',  [AutoSerahanController::class,'approve'])->name('autoserahan.approve');
+Route::get('/autoserahan/reject',  [AutoSerahanController::class,'reject'])->name('autoserahan.reject');
 
 Route::get('{any}', function () {
     return view('home');