🎨 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
@@ -6,8 +6,9 @@
|
||||
|
||||
@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="debitur-table" data-api-url="{{ route('debitur.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="debitur-table" data-api-url="{{ route('debitur.datatables') }}">
|
||||
<div class="flex-wrap py-5 card-header bg-agi-50">
|
||||
<h3 class="card-title">
|
||||
Daftar Debitur
|
||||
</h3>
|
||||
@@ -20,7 +21,7 @@
|
||||
<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('debitur.export') }}"> Export to Excel </a>
|
||||
@if(auth()->user()->hasAnyRole(['administrator', 'pemohon-ao']))
|
||||
@if (auth()->user()->hasAnyRole(['administrator', 'pemohon-ao']))
|
||||
<a class="btn btn-sm btn-primary" href="{{ route('debitur.create') }}"> Tambah Debitur </a>
|
||||
@endif
|
||||
</div>
|
||||
@@ -28,59 +29,57 @@
|
||||
</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-[50px]" data-datatable-column="cif">
|
||||
<span class="sort"> <span class="sort-label"> Cif </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[50px]" data-datatable-column="nomor_rekening">
|
||||
<span class="sort"> <span class="sort-label"> Nomor Rekening </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[50px]" data-datatable-column="name">
|
||||
<span class="sort"> <span class="sort-label"> Debitur </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[50px]" data-datatable-column="branch">
|
||||
<span class="sort"> <span class="sort-label"> Cabang </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[50px]" data-datatable-column="nomor_id">
|
||||
<span class="sort"> <span class="sort-label"> Nomor ID </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[50px]" data-datatable-column="npwp">
|
||||
<span class="sort"> <span class="sort-label"> NPWP </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[50px]" data-datatable-column="email">
|
||||
<span class="sort"> <span class="sort-label"> Email </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[50px]" data-datatable-column="phone">
|
||||
<span class="sort"> <span class="sort-label"> Phone </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[50px]" data-datatable-column="address">
|
||||
<span class="sort"> <span class="sort-label"> Alamat </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="w-14">
|
||||
<input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox" />
|
||||
</th>
|
||||
<th class="min-w-[50px]" data-datatable-column="cif">
|
||||
<span class="sort"> <span class="sort-label"> Cif </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[50px]" data-datatable-column="nomor_rekening">
|
||||
<span class="sort"> <span class="sort-label"> Nomor Rekening </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[50px]" data-datatable-column="name">
|
||||
<span class="sort"> <span class="sort-label"> Debitur </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[50px]" data-datatable-column="branch">
|
||||
<span class="sort"> <span class="sort-label"> Cabang </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[50px]" data-datatable-column="nomor_id">
|
||||
<span class="sort"> <span class="sort-label"> Nomor ID </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[50px]" data-datatable-column="npwp">
|
||||
<span class="sort"> <span class="sort-label"> NPWP </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[50px]" data-datatable-column="phone">
|
||||
<span class="sort"> <span class="sort-label"> Phone </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[50px]" data-datatable-column="address">
|
||||
<span class="sort"> <span class="sort-label"> Alamat KTP</span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<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">
|
||||
<div
|
||||
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>
|
||||
@@ -97,9 +96,10 @@
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
window.addEventListener('DOMContentLoaded', function () {
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
})
|
||||
|
||||
function deleteData(data) {
|
||||
Swal.fire({
|
||||
title: 'Are you sure?',
|
||||
@@ -113,7 +113,7 @@
|
||||
if (result.isConfirmed) {
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
}
|
||||
});
|
||||
|
||||
@@ -170,14 +170,11 @@
|
||||
npwp: {
|
||||
title: 'NPWP',
|
||||
},
|
||||
email: {
|
||||
title: 'Email',
|
||||
},
|
||||
phone: {
|
||||
title: 'Phone',
|
||||
},
|
||||
address: {
|
||||
title: 'Alamat',
|
||||
title: 'Alamat KTP',
|
||||
},
|
||||
actions: {
|
||||
title: 'Status',
|
||||
@@ -220,11 +217,10 @@
|
||||
let dataTable = new KTDataTable(element, dataTableOptions);
|
||||
dataTable.showSpinner();
|
||||
// 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