🎨(pembayaran): Perbaiki logika status pembayaran dan optimasi tampilan approval
- Memperbaiki nested condition untuk jenis_penilaian_id == 2 pada PembayaranController - Memindahkan logika status 'spk' ke blok else yang sesuai - Menyempurnakan flow status pembayaran agar konsisten dan bebas konflik - Menghindari benturan status antara 'proses-laporan' dan 'spk' - Menyusun ulang class Tailwind CSS pada approval.blade.php agar konsisten dan rapi - Memperbaiki struktur HTML dan layout card untuk meningkatkan readability dan responsivitas - Menambahkan fallback nominal_bayar dari biaya_final untuk keandalan data - Mengoptimalkan tampilan tombol action berdasarkan status_bayar dengan null-checking - Menambahkan fallback values untuk data kosong serta perbaikan spacing & alignment - Meningkatkan UX dan accessibility agar approval page lebih user-friendly dan stabil
This commit is contained in:
Daeng Deni Mardaeni
@@ -346,11 +346,11 @@ class PembayaranController extends Controller
|
||||
} else {
|
||||
$data['status_bayar'] = 'sudah_bayar';
|
||||
$data['status'] = 'proses-laporan';
|
||||
}
|
||||
|
||||
if ($permohonan->jenis_penilaian_id == 2) {
|
||||
$data['status_bayar'] = 'sudah_bayar';
|
||||
$data['status'] = 'spk';
|
||||
if ($permohonan->jenis_penilaian_id == 2) {
|
||||
$data['status_bayar'] = 'sudah_bayar';
|
||||
$data['status'] = 'spk';
|
||||
}
|
||||
}
|
||||
|
||||
if ($permohonan->jenis_penilaian_id == 1) {
|
||||
|
||||
@@ -6,9 +6,10 @@
|
||||
|
||||
@section('content')
|
||||
<div class="grid">
|
||||
<div class="card border border-agi-100 card-grid min-w-full" data-datatable="false" data-datatable-page-size="10" data-datatable-state-save="false"
|
||||
id="pembayaran-table" data-api-url="{{ route('pembayaran.approval.datatables') }}">
|
||||
<div class="card-header light:bg-agi-50 py-5 flex-wrap">
|
||||
<div class="min-w-full border card border-agi-100 card-grid" data-datatable="false" data-datatable-page-size="10"
|
||||
data-datatable-state-save="false" id="pembayaran-table"
|
||||
data-api-url="{{ route('pembayaran.approval.datatables') }}">
|
||||
<div class="flex-wrap py-5 card-header light:bg-agi-50">
|
||||
<h3 class="card-title">
|
||||
Daftar Pembayaran
|
||||
</h3>
|
||||
@@ -26,74 +27,74 @@
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="scrollable-x-auto">
|
||||
<table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm"
|
||||
data-datatable-table="true">
|
||||
<table class="table text-sm font-medium text-gray-700 align-middle table-auto table-border"
|
||||
data-datatable-table="true">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-14">
|
||||
<input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="nomor_registrasi">
|
||||
<span class="sort"> <span class="sort-label"> Nomor Registrasi </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="tanggal_permohonan">
|
||||
<span class="sort"> <span class="sort-label"> Tanggal Permohonan </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="user_id">
|
||||
<span class="sort"> <span class="sort-label"> User Pemohon </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="branch_id">
|
||||
<span class="sort"> <span class="sort-label"> Cabang Pemohon </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="debitur_id">
|
||||
<span class="sort"> <span class="sort-label"> Debitur </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<tr>
|
||||
<th class="w-14">
|
||||
<input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox" />
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="nomor_registrasi">
|
||||
<span class="sort"> <span class="sort-label"> Nomor Registrasi </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="tanggal_permohonan">
|
||||
<span class="sort"> <span class="sort-label"> Tanggal Permohonan </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="user_id">
|
||||
<span class="sort"> <span class="sort-label"> User Pemohon </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="branch_id">
|
||||
<span class="sort"> <span class="sort-label"> Cabang Pemohon </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="debitur_id">
|
||||
<span class="sort"> <span class="sort-label"> Debitur </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
|
||||
<th class="min-w-[150px] text-center" data-datatable-column="tujuan_penilaian_id">
|
||||
<span class="sort"> <span class="sort-label"> Status Bayar </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px] text-center" data-datatable-column="tujuan_penilaian_id">
|
||||
<span class="sort"> <span class="sort-label"> Status Bayar </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>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="nominal_bayar">
|
||||
<span class="sort"> <span class="sort-label"> Nominal bayar </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="bukti_bayar">
|
||||
<span class="sort"> <span class="sort-label"> Bukti Bayar </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="approval_by">
|
||||
<span class="sort"> <span class="sort-label"> Approval By </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>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="nominal_bayar">
|
||||
<span class="sort"> <span class="sort-label"> Nominal bayar </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="bukti_bayar">
|
||||
<span class="sort"> <span class="sort-label"> Bukti Bayar </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="approval_by">
|
||||
<span class="sort"> <span class="sort-label"> Approval By </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
|
||||
<th class="min-w-[150px]" data-datatable-column="approve_keterangan_bayar">
|
||||
<span class="sort"> <span class="sort-label"> Keterangan </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="approve_keterangan_bayar">
|
||||
<span class="sort"> <span class="sort-label"> Keterangan </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
|
||||
<th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
|
||||
</tr>
|
||||
<th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div
|
||||
class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
|
||||
<div class="flex items-center gap-2">
|
||||
class="flex-col gap-3 justify-center font-medium text-gray-600 card-footer md:justify-between md:flex-row text-2sm">
|
||||
<div class="flex gap-2 items-center">
|
||||
Show
|
||||
<select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per
|
||||
<select class="w-16 select select-sm" data-datatable-size="true" name="perpage"> </select> per
|
||||
page
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex gap-4 items-center">
|
||||
<span data-datatable-info="true"> </span>
|
||||
<div class="pagination" data-datatable-pagination="true">
|
||||
</div>
|
||||
@@ -195,7 +196,7 @@
|
||||
render: (item, data) => {
|
||||
if (data.permohonan) {
|
||||
return `${data.permohonan.nomor_registrasi}`;
|
||||
} else if(data.penawaran) {
|
||||
} else if (data.penawaran) {
|
||||
return `${data.penawaran.permohonan.nomor_registrasi}`;
|
||||
}
|
||||
return "";
|
||||
@@ -207,7 +208,7 @@
|
||||
render: (item, data) => {
|
||||
if (data.permohonan) {
|
||||
return `${data.permohonan.tanggal_permohonan}`;
|
||||
} else if(data.penawaran) {
|
||||
} else if (data.penawaran) {
|
||||
return `${data.penawaran.permohonan.tanggal_permohonan}`;
|
||||
}
|
||||
return "";
|
||||
@@ -218,8 +219,7 @@
|
||||
render: (item, data) => {
|
||||
if (data.permohonan) {
|
||||
return `${data.permohonan.user.name}`;
|
||||
}
|
||||
else if(data.penawaran) {
|
||||
} else if (data.penawaran) {
|
||||
return `${data.penawaran.permohonan.user.name}`;
|
||||
}
|
||||
return "";
|
||||
@@ -231,8 +231,7 @@
|
||||
render: (item, data) => {
|
||||
if (data.permohonan) {
|
||||
return `${data.permohonan.branch.name}`;
|
||||
}
|
||||
else if(data.penawaran) {
|
||||
} else if (data.penawaran) {
|
||||
return `${data.penawaran.permohonan.branch.name}`;
|
||||
}
|
||||
return "";
|
||||
@@ -244,8 +243,7 @@
|
||||
render: (item, data) => {
|
||||
if (data.permohonan) {
|
||||
return `${data.permohonan.debiture.name}`;
|
||||
}
|
||||
else if(data.penawaran) {
|
||||
} else if (data.penawaran) {
|
||||
return `${data.penawaran.permohonan.debiture.name}`;
|
||||
}
|
||||
return "";
|
||||
@@ -255,13 +253,13 @@
|
||||
status_bayar: {
|
||||
title: 'Status Bayar',
|
||||
render: (item, data) => {
|
||||
if(data.permohonan){
|
||||
if (data.permohonan) {
|
||||
var permohonan = data.permohonan;
|
||||
} else if(data.penawaran){
|
||||
} else if (data.penawaran) {
|
||||
var permohonan = data.penawaran.permohonan;
|
||||
}
|
||||
|
||||
if(permohonan) {
|
||||
if (permohonan) {
|
||||
|
||||
const status = permohonan.status_bayar.replace(/_/g,
|
||||
' ');
|
||||
@@ -284,10 +282,11 @@
|
||||
nominal_bayar: {
|
||||
title: 'Nominal Bayar',
|
||||
render: (item, data) => {
|
||||
return `${window.formatRupiah(data.nominal_bayar)}`;
|
||||
return data.nominal_bayar ? `${window.formatRupiah(data.nominal_bayar)}` : `${window.formatRu
|
||||
piah(data.biaya_final)}`;
|
||||
},
|
||||
},
|
||||
bukti_bayar:{
|
||||
bukti_bayar: {
|
||||
title: 'Bukti Bayar',
|
||||
render: (item, data) => {
|
||||
if (data.bukti_bayar) {
|
||||
@@ -302,14 +301,14 @@
|
||||
approve_bayar_by: {
|
||||
title: 'Status Approve',
|
||||
render: (item, data) => {
|
||||
if(data.permohonan){
|
||||
if (data.permohonan) {
|
||||
var permohonan = data.permohonan;
|
||||
} else if(data.penawaran){
|
||||
} else if (data.penawaran) {
|
||||
var permohonan = data.penawaran.permohonan;
|
||||
}
|
||||
|
||||
if(permohonan) {
|
||||
if(permohonan.approve_bayar) {
|
||||
if (permohonan) {
|
||||
if (permohonan.approve_bayar) {
|
||||
return `${permohonan.approve_bayar.name}`;
|
||||
}
|
||||
return "";
|
||||
@@ -321,13 +320,13 @@
|
||||
approve_keterangan_bayar: {
|
||||
title: 'Status Approve',
|
||||
render: (item, data) => {
|
||||
if(data.permohonan){
|
||||
if (data.permohonan) {
|
||||
var permohonan = data.permohonan;
|
||||
} else if(data.penawaran){
|
||||
} else if (data.penawaran) {
|
||||
var permohonan = data.penawaran.permohonan;
|
||||
}
|
||||
|
||||
if(permohonan) {
|
||||
if (permohonan) {
|
||||
return `${permohonan.approve_keterangan_bayar}` || '-';
|
||||
}
|
||||
|
||||
@@ -337,26 +336,27 @@
|
||||
actions: {
|
||||
title: 'Status',
|
||||
render: (item, data) => {
|
||||
if(data.permohonan){
|
||||
if (data.permohonan) {
|
||||
var permohonan = data.permohonan;
|
||||
} else if(data.penawaran){
|
||||
} else if (data.penawaran) {
|
||||
var permohonan = data.penawaran.permohonan;
|
||||
}
|
||||
|
||||
var iconPembayaranOtorisator = '';
|
||||
if(permohonan) {
|
||||
if (!permohonan.approve_bayar_by) {
|
||||
iconPembayaranOtorisator = `<a class="btn btn-sm btn-icon btn-clear btn-primary " onclick="handlePembayaran(${permohonan.id},'otorisator')">
|
||||
if (permohonan) {
|
||||
if (permohonan.status_bayar !== 'sudah_bayar') {
|
||||
iconPembayaranOtorisator = `<a class="btn btn-sm btn-icon btn-clear btn-primary" onclick="handlePembayaran(${permohonan.id},'otorisator')">
|
||||
<i class="ki-filled ki-double-check"></i>
|
||||
</a>
|
||||
<a class="btn btn-sm btn-icon btn-clear btn-primary " onclick="handlePembayaran(${permohonan.id}, 'revisi')">
|
||||
<a class="btn btn-sm btn-icon btn-clear btn-primary" onclick="handlePembayaran(${permohonan.id}, 'revisi')">
|
||||
<i class="ki-filled ki-arrow-circle-left"></i>
|
||||
</a>
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
return `<div class="flex flex-nowrap justify-center">` + iconPembayaranOtorisator + `</div>`;
|
||||
return `<div class="flex flex-nowrap justify-center">` + iconPembayaranOtorisator +
|
||||
`</div>`;
|
||||
}
|
||||
|
||||
return "";
|
||||
@@ -368,11 +368,10 @@
|
||||
|
||||
let dataTable = new KTDataTable(element, dataTableOptions);
|
||||
// Custom search functionality
|
||||
searchInput.addEventListener('input', function () {
|
||||
searchInput.addEventListener('input', function() {
|
||||
const searchValue = this.value.trim();
|
||||
dataTable.search(searchValue, true);
|
||||
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
|
||||
Reference in New Issue
Block a user