added notification and sound to the admin and added record of autoserahan

app/Http/Controllers/AutoSerahanController.php

@@ -6,10 +6,78 @@ use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Http;
 use Illuminate\Pagination\LengthAwarePaginator;
 use Illuminate\Support\Facades\Log;
+use Carbon\Carbon;
 class AutoSerahanController extends Controller
 {
     public function index(Request $request)
     {
+        $response = Http::get(config('api.url') . '/api/autoserahan/list', [
+            'page' => request('page', 1) // Get current page from request
+        ])->json();
+
+        $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
+
+        $items = array_map(function ($item) {
+            $time_created = Carbon::parse($item['created_at']);
+
+            $item['cawangan_name'] = $this->CawanganKod($item['kodcaw']);
+            $item['tarikh'] = $time_created->toDateString();
+            $item['masa'] = $time_created->format('h:i A');
+
+            return $item;
+        }, $items);
+
+        // 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 record(Request $request){
+
+        $response = Http::get(config('api.url') . '/api/autoserahan/allrecord', [
+            'page' => request('page', 1),
+            'kodcaw' => request('kodcaw', null),
+            'tarikh_mula' => request('tarikh_mula', null),
+            'tarikh_hingga' => request('tarikh_hingga', null),
+            'masa_mula' => request('masa_mula', null),
+            'masa_hingga' => request('masa_hingga', null),
+            'status' => request('status', null),
+            'transaksi' => request('transaksi', null),
+        ])->json();
+
+
+        $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
+
+        $items = array_map(function ($item) {
+            $time_created = Carbon::parse($item['created_at']);
+
+            $item['cawangan_name'] = $this->CawanganKod($item['kodcaw']);
+            $item['tarikh'] = $time_created->toDateString();
+            $item['masa'] = $time_created->format('h:i A');
+
+            return $item;
+        }, $items);
+
+        $list = new LengthAwarePaginator($items, $total, $perPage, $currentPage, [
+            'path' => request()->url(), // Current URL
+            'query' => request()->query(), // Append other query params
+        ]);
+
+        $filteredCawangan = $this->listkodcaw();
+
+        return view('autoserahan.rekod', compact('list','filteredCawangan'));
+    }
+
+    public function getList(Request $request){
         // Fetch paginated data from API
         $response = Http::get(config('api.url') . '/api/autoserahan/list', [
             'page' => request('page', 1) // Get current page from request
@@ -32,7 +100,8 @@ class AutoSerahanController extends Controller
             'path' => request()->url(), // Current URL
             'query' => request()->query(), // Append other query params
         ]);
-        return view('autoserahan.index', compact('list'));
+
+        return response()->json($list);
     }
 
     public function approve(Request $request)
@@ -128,10 +197,25 @@ class AutoSerahanController extends Controller
         }
     }
 
+    private function listkodcaw(){
+        $cawangan = Http::get(config('api.url_koop') . '/api/cawangan/')->json();
 
-private function CawanganKod($kodcaw) {
+            // Extract only kodcaw and details_caw
-    $cawangan = Http::get(config('api.url_koop') . '/api/cawangan/' . $kodcaw)->json();
+        $filteredCawangan = array_map(function ($item) {
+            return [
+                'kodcaw' => $item['kodcaw'],
+                'details_caw' => $item['details_caw']
+            ];
+        }, $cawangan);
 
-    return $cawangan['details_caw'] ?? 'Undefined';
+        return $filteredCawangan;
-}
+    }
+
+    private function CawanganKod($kodcaw) {
+        $cawangan = Http::get(config('api.url_koop') . '/api/cawangan/' . $kodcaw)->json();
+
+
+
+        return $cawangan['details_caw'] ?? 'Undefined';
+    }
 }

resources/views/autoserahan/index.blade.php

@@ -20,61 +20,12 @@
                 </div>
             @endif
 
-            <h1>Kelulusan Serahan</h1>
+            <a href="{{route('autoserahan.rekod')}}" class="mb-4 float-right bg-blue-500 text-center rounded p-2 text-white">Rekod Serahan</a>
-            <table class="min-w-full leading-normal">
+
-                  <thead class="text-center">
+            <div id="tableContainer">
-                      <tr>
+                @include('components.list-table', ['list' => $list, 'record' => false])
-                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-xs font-semibold text-gray-600 uppercase tracking-wider text-center">Bil</th>
+            </div>
-                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-xs font-semibold text-gray-600 uppercase tracking-wider text-center">Cawangan</th>
+
-                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-xs font-semibold text-gray-600 uppercase tracking-wider text-center">Transaksi</th>
-                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-xs font-semibold text-gray-600 uppercase tracking-wider text-center">Pemohon</th>
-                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-xs font-semibold text-gray-600 uppercase tracking-wider text-center">Amaun</th>
-                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-xs font-semibold text-gray-600 uppercase tracking-wider text-center">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 text-center">{{ $item['id'] }}</td>
-                          <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">{{ $item['cawangan_name'] }}</td>
-                          <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">
-                            @if($item['action'] === 'create')
-                                <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-800 ring-1 ring-green-600/20 ring-inset">
-                                    Create
-                                </span>
-                            @elseif($item['action'] === 'delete')
-                                <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-800 ring-1 ring-red-600/20 ring-inset">
-                                    Delete
-                                </span>
-                            @endif
-                        </td>
-                          <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">{{ $item['pc_name'] }}</td>
-                          <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">{{ number_format($item['amount'], 2) }}</td>
-                          <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">
-                            <a href="{{ route('autoserahan.approve', ['id' => $item['id'], 'kodcaw' => $item['kodcaw'], 'teller' => $item['pc_name'], 'amaun' => $item['amount']]) }}" 
-                                onclick="return confirmApproval(event, this)" 
-                                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']]) }}" 
-                                onclick="return confirmApproval(event, this)" 
-                                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 bg-white 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() }}
@@ -89,6 +40,111 @@
 </div>
 @push('additional_scripts')
 <script>
+    notifyOperasi();
+    var audiokhazanah = new Audio("{{ asset('sound/notification.mp3') }}");
+    audiokhazanah.muted = true;
+
+    function refreshTable() {
+        let fullUrl = window.location.href;
+        let queryString = window.location.search;
+        let params = new URLSearchParams(window.location.search);
+        let currentPage = params.get('page') ?? 1;
+
+        $.ajax({
+            url: "{{ route('autoserahan.get') }}",
+            type: 'GET',
+            dataType: 'json',
+            data:{
+                'page' : currentPage
+            },
+            success: function(response) {
+                updateTable(response.data);
+            },
+            error: function(xhr, status, error) {
+                console.error('Error:', error);
+            }
+        });
+    }
+
+    function updateTable(data) {
+    let tableBody = $('#tableContainer tbody');
+    tableBody.empty();
+
+    if (data.length === 0) {
+        tableBody.append('<tr><td colspan="8" class="text-center bg-white py-5 text-gray-500 text-sm font-semibold">Tiada data</td></tr>');
+        return;
+    }
+
+    data.forEach((item, index) => {
+        let actionBadge = '';
+
+        if (item.action === 'create') {
+            actionBadge = '<span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-800 ring-1 ring-green-600/20 ring-inset">Create</span>';
+        } else if (item.action === 'delete') {
+            actionBadge = '<span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-800 ring-1 ring-red-600/20 ring-inset">Delete</span>';
+        }
+
+        let row = `
+            <tr>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">${item.id}</td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">${item.cawangan_name}</td>
+                                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">${item.tarikh}</td>
+                                                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">${item.masa}</td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">${actionBadge}</td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">${item.pc_name}</td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">${parseFloat(item.amount).toFixed(2)}</td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">
+                    <a href="${item.approve_url}" onclick="return confirmApproval(event, this)" 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="${item.reject_url}" onclick="return confirmApproval(event, this)" 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>
+            `;
+            tableBody.append(row);
+        });
+    }
+
+    function playtoast(){
+        const Toast = Swal.mixin({
+            toast: true,
+            position: 'top-end',
+            showConfirmButton: false,
+            timer: 5000,
+            timerProgressBar: true,
+            didOpen: (toast) => {
+                toast.addEventListener('mouseenter', Swal.stopTimer)
+                toast.addEventListener('mouseleave', Swal.resumeTimer)
+            }
+        })
+
+        Toast.fire({
+            icon: 'info',
+            title: 'Kelulusan Dipohon Sekarang!'
+        })
+    }
+
+    function notifyOperasi(){
+
+        var pusher = new Pusher("{{ env('PUSHER_APP_KEY') }}", {
+            cluster: 'ap1',
+            encrypted: true
+        });
+    
+        var channel = pusher.subscribe('autoserahan-notice');
+        channel.bind('autoserahan-event', function(data) {
+
+            if(data.pengesahan === 'Operasi'){
+                refreshTable();
+                playtoast();
+                audiokhazanah.play();
+                audiokhazanah.muted = false;
+            }
+        });
+    }
+
     async function requestPasswordAndSend(element) {
         const {
             value: katalaluan

resources/views/autoserahan/rekod.blade.php

@@ -0,0 +1,102 @@
+@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' : 'Kelulusan Serahan', 'icon' : 'fas fa-stamp','url' : {{ json_encode(route('transaction.online.home')) }}}]"></breadcrumb>
+      
+            <a href="{{ route('autoserahan') }}"
+                class="mb-4 inline-flex items-center px-3 py-1.5 rounded-md bg-yellow-600 text-white">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18">
+                    </path>
+                </svg>
+                <span class="ml-1 font-bold text-lg">Back</span>
+            </a>
+
+            <div class="bg-white p-4 rounded-lg shadow-md mb-4">
+                <form method="GET" action="{{ route('autoserahan.rekod') }}" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
+                    <!-- Transaksi -->
+                    <div>
+                        <label class="block text-gray-700 text-sm font-bold mb-1">Transaksi</label>
+                        <select name="transaksi" class="w-full border rounded-lg p-2">
+                            <option value="">Select Transaksi</option>
+                            <option value="create">Create</option>
+                            <option value="delete">Delete</option>
+                        </select>
+                    </div>
+                    
+                    <!-- Range Date -->
+                    <div>
+                        <label class="block text-gray-700 text-sm font-bold mb-1">Date Range</label>
+                        <div class="flex space-x-2">
+                            <input type="date" name="tarikh_mula" class="w-1/2 border rounded-lg p-2">
+                            <input type="date" name="tarikh_hingga" class="w-1/2 border rounded-lg p-2">
+                        </div>
+                    </div>
+                    
+                    <!-- Range Time -->
+                    <div>
+                        <label class="block text-gray-700 text-sm font-bold mb-1">Time Range</label>
+                        <div class="flex space-x-2">
+                            <input type="time" name="masa_mula" class="w-1/2 border rounded-lg p-2">
+                            <input type="time" name="masa_hingga" class="w-1/2 border rounded-lg p-2">
+                        </div>
+                    </div>
+                    
+                    <!-- Cawangan -->
+                    <div>
+                        <label class="block text-gray-700 text-sm font-bold mb-1">Cawangan</label>
+                        <select name="kodcaw" class="w-full border rounded-lg p-2">
+                            <option value="">Select Cawangan</option>
+                            @foreach ($filteredCawangan as $kodcaw)
+                                <option value="{{ $kodcaw['kodcaw'] }}">{{ $kodcaw['details_caw'] }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+                    
+                    <!-- Approval Status -->
+                    <div>
+                        <label class="block text-gray-700 text-sm font-bold mb-1">Approval Status</label>
+                        <select name="status" class="w-full border rounded-lg p-2">
+                            <option value="">Select Status</option>
+                            <option value="APPROVED">Approved</option>
+                            <option value="REJECTED">Rejected</option>
+                        </select>
+                    </div>
+                    
+                    <!-- Submit Button -->
+                    <div class="col-span-1 md:col-span-3 lg:col-span-5 flex justify-end">
+                        <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg">
+                            Apply Filters
+                        </button>
+                    </div>
+                </form>
+            </div>
+            
+            
+            
+
+
+            <div id="tableContainer">
+                @include('components.list-table', ['list' => $list,'record' => true])
+            </div>
+
+          <!-- Pagination Controls -->
+          <div class="mt-4 flex justify-right">
+              {{ $list->links() }}
+          </div>
+        </div>
+   </main>
+
+
+
+   @include('layouts.footer')
+
+</div>
+@push('additional_scripts')
+
+@endpush
+@endsection

resources/views/components/list-table.blade.php

@@ -0,0 +1,71 @@
+<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-xs font-semibold text-gray-600 uppercase tracking-wider text-center">Bil</th>
+            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-xs font-semibold text-gray-600 uppercase tracking-wider text-center">Cawangan</th>            
+            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-xs font-semibold text-gray-600 uppercase tracking-wider text-center">Tarikh</th>
+            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-xs font-semibold text-gray-600 uppercase tracking-wider text-center">Masa</th>
+            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-xs font-semibold text-gray-600 uppercase tracking-wider text-center">Transaksi</th>
+            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-xs font-semibold text-gray-600 uppercase tracking-wider text-center">Pemohon</th>
+            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-xs font-semibold text-gray-600 uppercase tracking-wider text-center">Amaun</th>
+            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-xs font-semibold text-gray-600 uppercase tracking-wider text-center">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 text-center">{{ $item['id'] }}</td>
+            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">{{ $item['cawangan_name'] }}</td>
+            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">{{ $item['tarikh'] }}</td>
+            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">{{ $item['masa'] }}</td>
+            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">
+              @if($item['action'] === 'create')
+                  <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-800 ring-1 ring-green-600/20 ring-inset">
+                      Create
+                  </span>
+              @elseif($item['action'] === 'delete')
+                  <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-800 ring-1 ring-red-600/20 ring-inset">
+                      Delete
+                  </span>
+              @endif
+          </td>
+            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">{{ $item['pc_name'] }}</td>
+            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">{{ number_format($item['amount'], 2) }}</td>
+            @if($record == false)
+            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">
+              <a href="{{ route('autoserahan.approve', ['id' => $item['id'], 'kodcaw' => $item['kodcaw'], 'teller' => $item['pc_name'], 'amaun' => $item['amount']]) }}" 
+                  onclick="return confirmApproval(event, this)" 
+                  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']]) }}" 
+                  onclick="return confirmApproval(event, this)" 
+                  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>
+            @else
+            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">
+                @if($item['approval_status'] === 'APPROVED')
+                    <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-800 ring-1 ring-green-600/20 ring-inset">
+                        Approved
+                    </span>
+                @elseif($item['approval_status'] === 'REJECTED')
+                    <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-800 ring-1 ring-red-600/20 ring-inset">
+                        Rejected
+                    </span>
+                @endif
+            </td>
+            @endif
+        </tr>
+    </tbody>
+    @endforeach
+@else
+    <tbody>
+        <tr>
+            <td colspan="8" class="text-center bg-white py-5 text-gray-500 text-sm font-semibold">Tiada data</td>
+        </tr>
+    </tbody>
+@endif
+</table>

resources/views/layouts/app.blade.php

@@ -33,6 +33,8 @@
     <!-- Styles -->
     <link href="{{ asset('css/app.css') }}" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    {{-- Pusher --}}
+    <script src="{{ asset('js/pusher.min.js') }}"></script>
     <style>
         .sidebar {
             height: 100%;

routes/web.php

@@ -190,6 +190,8 @@ Route::get('/transaction/online/gadaian/{norujukan}', OnlineTransactionGadaianCo
 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('/autoserahan/list',  [AutoSerahanController::class,'getList'])->name('autoserahan.get');
+Route::get('/autoserahan/rekod',  [AutoSerahanController::class,'record'])->name('autoserahan.rekod');
 
 Route::get('{any}', function () {
     return view('home');