🎨(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
2025-09-30 16:57:44 +07:00
parent 112262d7d6
commit db55471111
2 changed files with 91 additions and 92 deletions

View File

@@ -346,12 +346,12 @@ class PembayaranController extends Controller
} else { } else {
$data['status_bayar'] = 'sudah_bayar'; $data['status_bayar'] = 'sudah_bayar';
$data['status'] = 'proses-laporan'; $data['status'] = 'proses-laporan';
}
if ($permohonan->jenis_penilaian_id == 2) { if ($permohonan->jenis_penilaian_id == 2) {
$data['status_bayar'] = 'sudah_bayar'; $data['status_bayar'] = 'sudah_bayar';
$data['status'] = 'spk'; $data['status'] = 'spk';
} }
}
if ($permohonan->jenis_penilaian_id == 1) { if ($permohonan->jenis_penilaian_id == 1) {
unset( unset(

View File

@@ -6,9 +6,10 @@
@section('content') @section('content')
<div class="grid"> <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" <div class="min-w-full border card border-agi-100 card-grid" data-datatable="false" data-datatable-page-size="10"
id="pembayaran-table" data-api-url="{{ route('pembayaran.approval.datatables') }}"> data-datatable-state-save="false" id="pembayaran-table"
<div class="card-header light:bg-agi-50 py-5 flex-wrap"> data-api-url="{{ route('pembayaran.approval.datatables') }}">
<div class="flex-wrap py-5 card-header light:bg-agi-50">
<h3 class="card-title"> <h3 class="card-title">
Daftar Pembayaran Daftar Pembayaran
</h3> </h3>
@@ -26,7 +27,7 @@
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="scrollable-x-auto"> <div class="scrollable-x-auto">
<table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" <table class="table text-sm font-medium text-gray-700 align-middle table-auto table-border"
data-datatable-table="true"> data-datatable-table="true">
<thead> <thead>
<tr> <tr>
@@ -87,13 +88,13 @@
</table> </table>
</div> </div>
<div <div
class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium"> 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 items-center gap-2"> <div class="flex gap-2 items-center">
Show 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 page
</div> </div>
<div class="flex items-center gap-4"> <div class="flex gap-4 items-center">
<span data-datatable-info="true"> </span> <span data-datatable-info="true"> </span>
<div class="pagination" data-datatable-pagination="true"> <div class="pagination" data-datatable-pagination="true">
</div> </div>
@@ -218,8 +219,7 @@
render: (item, data) => { render: (item, data) => {
if (data.permohonan) { if (data.permohonan) {
return `${data.permohonan.user.name}`; return `${data.permohonan.user.name}`;
} } else if (data.penawaran) {
else if(data.penawaran) {
return `${data.penawaran.permohonan.user.name}`; return `${data.penawaran.permohonan.user.name}`;
} }
return ""; return "";
@@ -231,8 +231,7 @@
render: (item, data) => { render: (item, data) => {
if (data.permohonan) { if (data.permohonan) {
return `${data.permohonan.branch.name}`; return `${data.permohonan.branch.name}`;
} } else if (data.penawaran) {
else if(data.penawaran) {
return `${data.penawaran.permohonan.branch.name}`; return `${data.penawaran.permohonan.branch.name}`;
} }
return ""; return "";
@@ -244,8 +243,7 @@
render: (item, data) => { render: (item, data) => {
if (data.permohonan) { if (data.permohonan) {
return `${data.permohonan.debiture.name}`; return `${data.permohonan.debiture.name}`;
} } else if (data.penawaran) {
else if(data.penawaran) {
return `${data.penawaran.permohonan.debiture.name}`; return `${data.penawaran.permohonan.debiture.name}`;
} }
return ""; return "";
@@ -284,7 +282,8 @@
nominal_bayar: { nominal_bayar: {
title: 'Nominal Bayar', title: 'Nominal Bayar',
render: (item, data) => { 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: {
@@ -345,7 +344,7 @@
var iconPembayaranOtorisator = ''; var iconPembayaranOtorisator = '';
if (permohonan) { if (permohonan) {
if (!permohonan.approve_bayar_by) { if (permohonan.status_bayar !== 'sudah_bayar') {
iconPembayaranOtorisator = `<a class="btn btn-sm btn-icon btn-clear btn-primary" onclick="handlePembayaran(${permohonan.id},'otorisator')"> 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> <i class="ki-filled ki-double-check"></i>
</a> </a>
@@ -356,7 +355,8 @@
`; `;
} }
return `<div class="flex flex-nowrap justify-center">` + iconPembayaranOtorisator + `</div>`; return `<div class="flex flex-nowrap justify-center">` + iconPembayaranOtorisator +
`</div>`;
} }
return ""; return "";
@@ -375,4 +375,3 @@
}); });
</script> </script>
@endpush @endpush