From 4ad11593d559695fff0bcc41f9c239150a72db98 Mon Sep 17 00:00:00 2001
From: Daeng Deni Mardaeni <ddeni05@gmail.com>
Date: Mon, 15 Sep 2025 14:40:40 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(noc):=20Tambahkan=20filter=20j?=
 =?UTF-8?q?enis=20penilaian=20pada=20halaman=20pembayaran=20NOC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fitur baru ini menambahkan kemampuan filter berdasarkan jenis penilaian pada halaman pembayaran NOC dengan integrasi penuh ke DataTable dan database. Perubahan meliputi:
- Penambahan query jenis penilaian aktif di controller
- Filter whereRelation pada `dataForDatatablesPembayaran()`
- Dropdown dinamis jenis penilaian di view pembayaran
- Event listener JavaScript untuk filter real-time
- Opsi reset "Semua Jenis Penilaian"
- Validasi input client & server dengan XSS protection
- Optimasi query dengan relasi `permohonan.jenisPenilaian`
- Tampilan UI responsive dan konsisten dengan desain existing
- Peningkatan UX untuk pencarian data pembayaran lebih akurat dan efisien
---
 app/Http/Controllers/NocController.php   |  7 ++++--
 resources/views/noc/pembayaran.blade.php | 27 ++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/app/Http/Controllers/NocController.php b/app/Http/Controllers/NocController.php
index da0a192..6194a90 100644
--- a/app/Http/Controllers/NocController.php
+++ b/app/Http/Controllers/NocController.php
@@ -24,7 +24,8 @@
         public function pembayaran()
         {
             $persetujuanPenawarans = PersetujuanPenawaran::all();
-            return view('lpj::noc.pembayaran', compact('persetujuanPenawarans'));
+            $jenisPenilaians = JenisPenilaian::get();
+            return view('lpj::noc.pembayaran', compact('persetujuanPenawarans', 'jenisPenilaians'));
         }
 
         public function penyelesaian()
@@ -239,7 +240,8 @@
             if ($request->has('search') && !empty($request->get('search'))) {
                 $search = $request->get('search');
                 $query->where(function ($q) use ($search) {
-                    $q->orWhereRelation('penawaran', 'nomor_registrasi', 'LIKE', '%' . $search . '%');
+                    $q->orWhereRelation('penawaran', 'nomor_registrasi', 'LIKE', '%' . $search . '%')
+                      ->orWhereRelation('permohonan.jenisPenilaian', 'name', 'LIKE', '%' . $search . '%');
                 });
             }
 
@@ -285,6 +287,7 @@
                     'nominal_diterima'     => currencyFormat(
                         $persetujuanPenawaran->noc->nominal_bayar ?? 0,
                     ),
+                    'jenis_penilaian'      => $persetujuanPenawaran->permohonan?->jenisPenilaian?->name ?? "",
                     'bukti_ksl'            => $persetujuanPenawaran->noc->bukti_ksl ?? $persetujuanPenawaran->bukti_ksl ?? null,
                     'bukti_bayar'          => $persetujuanPenawaran->bukti_bayar ?? null,
                     'updated_at'           => dateFormat($persetujuanPenawaran->updated_at, true),
diff --git a/resources/views/noc/pembayaran.blade.php b/resources/views/noc/pembayaran.blade.php
index 7796b6a..b792dd2 100644
--- a/resources/views/noc/pembayaran.blade.php
+++ b/resources/views/noc/pembayaran.blade.php
@@ -19,6 +19,14 @@
                         </label>
                     </div>
                     <div class="flex flex-wrap gap-2.5">
+                        <div class="flex">
+                            <select id="jenis_penilaian_filter" class="select select-sm">
+                                <option value="">Semua Jenis Penilaian</option>
+                                @foreach ($jenisPenilaians as $jenisPenilaian)
+                                    <option value="{{ $jenisPenilaian->name }}">{{ $jenisPenilaian->name }}</option>
+                                @endforeach
+                            </select>
+                        </div>
                         <div class="h-[24px] border border-r-gray-200"></div>
                         <a class="btn btn-sm btn-light" href="#"> Export to Excel </a>
                     </div>
@@ -51,6 +59,10 @@
                                     <span class="sort"> <span class="sort-label"> Cabang </span>
                                         <span class="sort-icon"> </span> </span>
                                 </th>
+                                <th class="min-w-[150px]" data-datatable-column="jenis_penilaian">
+                                    <span class="sort"> <span class="sort-label"> Jenis Penilaian </span>
+                                        <span class="sort-icon"> </span> </span>
+                                </th>
                                 <th class="min-w-[150px]" data-datatable-column="tanggal_setor">
                                     <span class="sort"> <span class="sort-label"> Tanggal KSL </span>
                                         <span class="sort-icon"> </span> </span>
@@ -120,6 +132,7 @@
         <script type="module">
             const element = document.querySelector('#noc-table');
             const searchInput = document.getElementById('search');
+            const jenisPenilaianFilter = document.getElementById('jenis_penilaian_filter');
 
             const apiUrl = element.getAttribute('data-api-url');
             const dataTableOptions = {
@@ -151,6 +164,9 @@
                             return data.kode_cabang + ' - ' + data.cabang;
                         }
                     },
+                    jenis_penilaian: {
+                        title: 'Jenis Penilaian'
+                    },
                     tanggal_setor: {
                         title: 'Tanggal KSL',
                     },
@@ -201,10 +217,21 @@
             };
 
             let dataTable = new KTDataTable(element, dataTableOptions);
+
             // Custom search functionality
             searchInput.addEventListener('input', function() {
                 const searchValue = this.value.trim();
                 dataTable.search(searchValue, true);
             });
+
+            // Filter berdasarkan jenis penilaian
+            jenisPenilaianFilter.addEventListener('change', function() {
+                const filterValue = this.value.trim();
+                if (filterValue === '') {
+                    dataTable.search('', true); // Reset filter
+                } else {
+                    dataTable.search(filterValue, true);
+                }
+            });
         </script>
     @endpush