Merged in feature/autoserahan (pull request #90)

Feature/autoserahan
2025-04-07 08:09:18 +00:00
parent 6447a706b2 abecbe4fa8
commit de2845f79b
11 changed files with 688 additions and 1 deletions
@@ -0,0 +1,210 @@
+@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>
+      
+            @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
+
+            <a href="{{route('autoserahan.rekod')}}" class="mb-4 float-right bg-blue-500 text-center rounded p-2 text-white">Rekod Serahan</a>
+
+            <div id="tableContainer">
+                @include('components.list-table', ['list' => $list, 'record' => false])
+            </div>
+
+          <!-- Pagination Controls -->
+          <div class="mt-4 flex justify-right">
+              {{ $list->links() }}
+          </div>
+        </div>
+   </main>
+
+
+
+   @include('layouts.footer')
+
+</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;
+    }
+    console.log('this data:',data);
+
+    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 baseApproveUrl = "{{ route('autoserahan.approve') }}";
+        let baseRejectUrl = "{{ route('autoserahan.reject') }}";
+
+        let approveurl = `${baseApproveUrl}?id=${item.id}&kodcaw=${item.kodcaw}&teller=${item.pc_name}&amaun=${item.amount}`;
+        let rejecturl = `${baseRejectUrl}?id=${item.id}&kodcaw=${item.kodcaw}&teller=${item.pc_name}&amaun=${item.amount}`;
+        
+        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="${approveurl}" 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="${rejecturl}" 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
+        } = await Swal.fire({
+            title: 'Masukkan Katalaluan Semula',
+            input: 'password',
+            inputPlaceholder: 'Katalaluan',
+            confirmButtonText: 'Hantar',
+            showCancelButton: true,
+            cancelButtonText: 'Batal',
+            allowOutsideClick: false
+        });
+        boolkatalaluan = 0;
+        if (katalaluan) { 
+            $.ajax({
+                url: '/mintasemulakelulusan',
+                type: 'GET',
+                data: { passsemula: katalaluan },
+                success: function(response) {
+                    boolkatalaluan = response;
+                    if (boolkatalaluan == 1) {
+                        Swal.fire({
+                            title: 'Success',
+                            text: 'Katalaluan Sah',
+                            icon: 'success',
+                            confirmButtonText: 'OK',
+                            allowOutsideClick: false,
+                            allowEscapeKey: false,
+                        }).then((result) => {
+                            if (result.isConfirmed) {
+                                window.location.href = element.href;
+                            }
+                        });
+                    } else {
+                        Swal.fire('Error', 'Katalaluan Tidak Sah', 'error');
+                    }
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error:', error);
+                    Swal.fire('Error', 'Something went wrong!', 'error');
+                }
+            });
+        }else{
+            return false;
+        }
+
+    }
+
+    function confirmApproval(event, element) {
+        event.preventDefault();
+    
+        requestPasswordAndSend(element);
+    }
+</script>
+@endpush
+@endsection
@@ -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
@@ -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">{{ ($list->currentPage() - 1) * $list->perPage() + $loop->iteration }}</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>
@@ -32,7 +32,9 @@

    <!-- 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%;
@@ -205,6 +205,8 @@
                </li>
            </a>

+
+
            {{-- <a href="{{ route('tetapan') }}"
            class="rounded mb-2 mr-2
            {{ Route::is('tetapan') || Route::is('tetapan.*')  ? 'bg-gray-200 rounded text-white-500' : 'hover:bg-yellow-300 ' }}">
@@ -245,6 +247,16 @@
            </li>
            </a> --}}

+            <a href="{{ route('autoserahan') }}" class="rounded mb-2 mr-2 {{ Route::is('autoserahan') || Route::is('autoserahan.*')  ? '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 xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3a3 3 0 00-3 3v4H8a2 2 0 00-2 2v2h12v-2a2 2 0 00-2-2h-1V6a3 3 0 00-3-3zM5 17h14a2 2 0 012 2v2H3v-2a2 2 0 012-2z"/>
+                          </svg>
+                        <span class="ml-2 text-lg">Auto-Serahan</span>
+                    </div>
+                </li>
+            </a>

            <a href="{{ route('akaun.home') }}" class="rounded mb-2 mr-2 {{ Route::is('akaun.home') || Route::is('akaun.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 ">