🎨 refactor(ui): perbaikan styling form penilai & optimasi dashboard role-based
- Form Penilai: hapus spasi ganda di class CSS input currency/currency-format - Konsistensi class Tailwind: gunakan "w-full currency" & "w-full currency-format" - Hapus console.log tidak perlu, tambah debug log untuk parsing luas - Optimasi parsing input luas dengan parseFloat + regex sanitasi numerik - Dashboard: tambahkan pembatasan akses berdasarkan role (!penilai, !surveyor, !pemohon-ao, !pemohon-eo) - Perbaiki struktur HTML & urutan class Tailwind (grid, flex, spacing, alignment) - Optimalkan layout header, stats cards, & tabel dengan class yang konsisten - Hapus class CSS redundan & perbaiki konsistensi penamaan - Tingkatkan keamanan & UX dengan role-based access + struktur HTML lebih maintainable
This commit is contained in:
Daeng Deni Mardaeni
@@ -5,11 +5,11 @@
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
|
||||
<div class="grid gap-5 mx-auto w-full lg:gap-7.5">
|
||||
|
||||
<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="permohonan-table" data-api-url="{{ route('permohonan.datatables') }}">
|
||||
<div class="card-header 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="permohonan-table" data-api-url="{{ route('permohonan.datatables') }}">
|
||||
<div class="flex-wrap py-5 card-header bg-agi-50">
|
||||
<h3 class="card-title">
|
||||
Daftar Permohonan
|
||||
</h3>
|
||||
@@ -22,69 +22,70 @@
|
||||
<div class="flex flex-wrap gap-2.5">
|
||||
<div class="h-[24px] border border-r-gray-200"></div>
|
||||
<a class="btn btn-sm btn-light" href="{{ route('permohonan.export') }}"> Export to Excel </a>
|
||||
@if(auth()->user()->hasAnyRole(['administrator', 'pemohon-ao']))
|
||||
<a class="btn btn-sm btn-primary" href="{{ route('permohonan.create') }}"> Tambah Permohonan </a>
|
||||
@if (auth()->user()->hasAnyRole(['administrator', 'pemohon-ao']))
|
||||
<a class="btn btn-sm btn-primary" href="{{ route('permohonan.create') }}"> Tambah Permohonan
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<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="mig_mst_lpj_nomor_jaminan">
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="mig_mst_lpj_nomor_jaminan">
|
||||
<span class="sort"> <span class="sort-label"> Nomor LPJ Lama </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="tanggal_permohonan">
|
||||
</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="pemohon">
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="pemohon">
|
||||
<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">
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="branch">
|
||||
<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">
|
||||
</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]" data-datatable-column="tujuan_penilaian_id">
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="tujuan_penilaian_id">
|
||||
<span class="sort"> <span class="sort-label"> Tujuan Penilaian </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px] text-center" data-datatable-column="status">
|
||||
</th>
|
||||
<th class="min-w-[150px] text-center" data-datatable-column="status">
|
||||
<span class="sort"> <span class="sort-label"> Status </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="keterangan">
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="keterangan">
|
||||
<span class="sort"> <span class="sort-label"> Keterangan </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[50px] text-right" data-datatable-column="actions">Action</th>
|
||||
</tr>
|
||||
</th>
|
||||
<th class="min-w-[50px] text-right" 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 page
|
||||
<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>
|
||||
@@ -193,9 +194,9 @@
|
||||
title: 'Status',
|
||||
render: (item, data) => {
|
||||
if (data.documents > 0) {
|
||||
return `<span class="badge badge-sm badge-default uppercase flex justify-center">${data.status}</span>`;
|
||||
return `<span class="flex justify-center uppercase badge badge-sm badge-default">${data.status}</span>`;
|
||||
}
|
||||
return `<span class="badge badge-sm badge-danger uppercase flex justify-center">Lengkapi Aset Jaminan</span>`;
|
||||
return `<span class="flex justify-center uppercase badge badge-sm badge-danger">Lengkapi Aset Jaminan</span>`;
|
||||
|
||||
}
|
||||
},
|
||||
@@ -215,7 +216,7 @@
|
||||
actions: {
|
||||
title: 'Actions',
|
||||
render: (item, data) => {
|
||||
let actionHtml = `<div class="flex flex-nowrap justify-end gap-1.5">`;
|
||||
let actionHtml = `<div class="flex flex-nowrap gap-1.5 justify-end">`;
|
||||
const hasRole = (roles) => roles.some(role => userRoles.includes(role));
|
||||
|
||||
if (data.status === 'proses-survey' || data.status == 'rejected-reschedule') {
|
||||
@@ -259,13 +260,17 @@ title="Approve Jadwal Kunjungan No Reg ${data.nomor_registrasi}"
|
||||
`;
|
||||
}
|
||||
|
||||
if (data.status !== 'done' && data.status !== 'batal' && hasRole(['administrator', 'pemohon-ao'])) {
|
||||
if (data.status !== 'done' && data.status !== 'batal' && hasRole(['administrator',
|
||||
'pemohon-ao'
|
||||
])) {
|
||||
actionHtml += `
|
||||
<a class="btn btn-sm btn-outline btn-info" href="permohonan/${data.id}/edit" title="Edit Permohonan">
|
||||
<i class="ki-outline ki-notepad-edit"></i>
|
||||
</a>`;
|
||||
}
|
||||
if (data.status === 'order' && hasRole(['administrator', 'pemohon-ao'])) {
|
||||
if (data.status !== 'done' && data.status !== 'batal' && hasRole(['administrator',
|
||||
'pemohon-ao'
|
||||
])) {
|
||||
actionHtml += `
|
||||
<a onclick="deleteData(${data.id}, '${data.nomor_registrasi}','${data.debiture?.name}')" class="delete btn btn-sm btn-outline btn-danger" title="Batalkan Permohonan">
|
||||
<i class="ki-outline ki-cross-square"></i>
|
||||
@@ -283,7 +288,7 @@ title="Approve Jadwal Kunjungan No Reg ${data.nomor_registrasi}"
|
||||
|
||||
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);
|
||||
|
||||
@@ -328,7 +333,7 @@ title="Approve Jadwal Kunjungan No Reg ${data.nomor_registrasi}"
|
||||
cache: false,
|
||||
data: input_data,
|
||||
dataType: "json",
|
||||
success: function (response) {
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
if ('success' == response.status) {
|
||||
swal.fire('Sukses Menyetujui!', response.message, 'success').then(
|
||||
@@ -340,7 +345,7 @@ title="Approve Jadwal Kunjungan No Reg ${data.nomor_registrasi}"
|
||||
}
|
||||
|
||||
},
|
||||
error: function (response, textStatus, errorThrown) {
|
||||
error: function(response, textStatus, errorThrown) {
|
||||
// var errors = response.responseJSON.errors;
|
||||
// console.log(errors);
|
||||
console.log(response);
|
||||
@@ -351,7 +356,7 @@ title="Approve Jadwal Kunjungan No Reg ${data.nomor_registrasi}"
|
||||
Swal.fire({
|
||||
title: 'Reschedule Jadwal Kunjungan',
|
||||
html: `
|
||||
<div class="text-left space-y-4">
|
||||
<div class="space-y-4 text-left">
|
||||
|
||||
<p class="text-gray-700">
|
||||
Yakin akan Reschedule Jadwal Kunjungan
|
||||
@@ -363,15 +368,15 @@ title="Approve Jadwal Kunjungan No Reg ${data.nomor_registrasi}"
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<label for="reschedule_date" class="block text-sm font-medium text-gray-700 mb-1">Tanggal Baru</label>
|
||||
<label for="reschedule_date" class="block mb-1 text-sm font-medium text-gray-700">Tanggal Baru</label>
|
||||
<input type="datetime-local" id="reschedule_date"
|
||||
class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
|
||||
class="block px-4 py-2 w-full rounded-lg border border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="reschedule_note" class="block text-sm font-medium text-gray-700 mb-1">Catatan</label>
|
||||
<label for="reschedule_note" class="block mb-1 text-sm font-medium text-gray-700">Catatan</label>
|
||||
<textarea id="reschedule_note"
|
||||
class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
||||
class="block px-4 py-2 w-full rounded-lg border border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
||||
placeholder="Masukkan alasan reschedule..."></textarea>
|
||||
</div>
|
||||
|
||||
@@ -418,7 +423,7 @@ title="Approve Jadwal Kunjungan No Reg ${data.nomor_registrasi}"
|
||||
cache: false,
|
||||
data: data,
|
||||
dataType: "json",
|
||||
success: function (response) {
|
||||
success: function(response) {
|
||||
if (response.status === 'success') {
|
||||
Swal.fire('Sukses Reschedule!', response.message,
|
||||
'success').then(() => {
|
||||
@@ -428,7 +433,7 @@ title="Approve Jadwal Kunjungan No Reg ${data.nomor_registrasi}"
|
||||
Swal.fire('Error!', response.message, 'error');
|
||||
}
|
||||
},
|
||||
error: function (response) {
|
||||
error: function(response) {
|
||||
console.log(response);
|
||||
}
|
||||
});
|
||||
@@ -460,7 +465,7 @@ title="Approve Jadwal Kunjungan No Reg ${data.nomor_registrasi}"
|
||||
Swal.fire({
|
||||
title: 'Reschedule Jadwal Kunjungan',
|
||||
html: `
|
||||
<div class="text-left space-y-4">
|
||||
<div class="space-y-4 text-left">
|
||||
|
||||
<p class="text-gray-700">
|
||||
Yakin akan Reschedule Jadwal Kunjungan
|
||||
@@ -472,20 +477,20 @@ title="Approve Jadwal Kunjungan No Reg ${data.nomor_registrasi}"
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<label for="reschedule_date" class="block text-sm font-medium text-gray-700 mb-1">Tanggal Baru</label>
|
||||
<label for="reschedule_date" class="block mb-1 text-sm font-medium text-gray-700">Tanggal Baru</label>
|
||||
<input type="datetime-local" id="reschedule_date"
|
||||
class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
|
||||
class="block px-4 py-2 w-full rounded-lg border border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="reschedule_note" class="block text-sm font-medium text-gray-700 mb-1">Catatan</label>
|
||||
<label for="reschedule_note" class="block mb-1 text-sm font-medium text-gray-700">Catatan</label>
|
||||
<textarea id="reschedule_note"
|
||||
class="block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
||||
class="block px-4 py-2 w-full rounded-lg border border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
||||
placeholder="Masukkan alasan reschedule..."></textarea>
|
||||
</div>
|
||||
${note ? `
|
||||
<p class="text-gray-700"><strong>Catatan Reject:</strong> ${note}</p>
|
||||
` : ''}
|
||||
<p class="text-gray-700"><strong>Catatan Reject:</strong> ${note}</p>
|
||||
` : ''}
|
||||
|
||||
</div>
|
||||
`,
|
||||
@@ -532,7 +537,7 @@ title="Approve Jadwal Kunjungan No Reg ${data.nomor_registrasi}"
|
||||
cache: false,
|
||||
data: data,
|
||||
dataType: "json",
|
||||
success: function (response) {
|
||||
success: function(response) {
|
||||
if (response.status === 'success') {
|
||||
Swal.fire('Sukses Reschedule!', response.message, 'success').then(
|
||||
() => {
|
||||
@@ -542,7 +547,7 @@ title="Approve Jadwal Kunjungan No Reg ${data.nomor_registrasi}"
|
||||
Swal.fire('Error!', response.message, 'error');
|
||||
}
|
||||
},
|
||||
error: function (response) {
|
||||
error: function(response) {
|
||||
const errorMessage = response.responseJSON?.message ||
|
||||
'Terjadi kesalahan saat memproses data.';
|
||||
Swal.fire('Error!', errorMessage, 'error');
|
||||
|
||||
Reference in New Issue
Block a user