🎨(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 {
$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 == 1) {
unset(

View File

@@ -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,7 +27,7 @@
</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"
<table class="table text-sm font-medium text-gray-700 align-middle table-auto table-border"
data-datatable-table="true">
<thead>
<tr>
@@ -87,13 +88,13 @@
</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>
@@ -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 "";
@@ -284,7 +282,8 @@
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: {
@@ -345,7 +344,7 @@
var iconPembayaranOtorisator = '';
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')">
<i class="ki-filled ki-double-check"></i>
</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 "";
@@ -375,4 +375,3 @@
});
</script>
@endpush