✨ feat(noc): Tambahkan filter jenis penilaian pada halaman pembayaran NOC

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

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