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
This commit is contained in:
Daeng Deni Mardaeni
2025-09-15 14:40:40 +07:00
parent d851ab58bc
commit 4ad11593d5
2 changed files with 32 additions and 2 deletions

View File

@@ -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),

View File

@@ -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