🎨 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
2025-09-26 10:55:27 +07:00
parent e3540a1dd6
commit a1b9b7af86
6 changed files with 452 additions and 437 deletions

View File

@@ -1,24 +1,23 @@
<div class="card border border-agi-100 w-full rounded-lg shadow-md overflow-hidden">
<div class="overflow-hidden w-full rounded-lg border shadow-md card border-agi-100">
<div class="card-header light:bg-agi-50">
<h3 class="card-title uppercase">
<h3 class="uppercase card-title">
Analisa Tanah
</h3>
</div>
<div class="card-body">
<div class="grid gap-5">
<!-- Luas tanah -->
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
<label class="form-label max-w-56">Luas Tanah</label>
<div class="mt-2">
@if (isset($permohonan->documents))
@foreach ($permohonan->documents as $item)
@php
// 27
$total_luas_tanah = 0;
$jenis_legalitas_jaminan_id = 0;
if (isset($item->detail)) {
$total_luas_tanah = calculateTotalLuas($item->detail, 'luas_tanah', 1, 27, 3);
if (isset($item->details)) {
$total_luas_tanah = calculateTotalLuas($item->details, 'luas_tanah', 1, 27, 3);
}
@endphp
<input type="hidden" id="jenis_legalistas_jaminan_tanah_id"
@@ -26,25 +25,25 @@
value="{{ $jenis_legalitas_jaminan_id }}">
<input type="hidden" name="luas_tanah_sesuai" class="input"
value="{{ $total_luas_tanah }}">
<p class="text-2sm text-gray-700">{{ $total_luas_tanah }} m<sup>2</sup></p>
<p class="text-gray-700 text-2sm">{{ $total_luas_tanah }} m<sup>2</sup></p>
@endforeach
@endif
<div class="flex-wrap items-stretch">
<div class="grid grid-cols-3 md:grid-cols-3 gap-4 mt-2">
<label class="form-label flex items-center gap-3 text-nowrap">
<div class="grid grid-cols-3 gap-4 mt-2 md:grid-cols-3">
<label class="flex gap-3 items-center form-label text-nowrap">
<input type="radio" class="radio" name="luas_tanah" value="sesuai"
onclick="toggleFieldVisibility('luas_tanah', 'luas_tanah_tidak_sesuai', ['tidak sesuai'])"
{{ old('luas_tanah', isset($forminspeksi['tanah']['luas_tanah']['sesuai'])) ? 'checked' : '' }}>
<span class="ml-2">Sesuai</span>
</label>
<label class="form-label flex items-center gap-2.5 text-nowrap">
<label class="flex gap-2.5 items-center form-label text-nowrap">
<input type="radio" class="radio" name="luas_tanah" value="tidak sesuai"
onclick="toggleFieldVisibility('luas_tanah', 'luas_tanah_tidak_sesuai', ['tidak sesuai'])"
{{ old('luas_tanah', isset($forminspeksi['tanah']['luas_tanah']['tidak sesuai'])) ? 'checked' : '' }}>
<span class="ml-2">Tidak Sesuai</span>
</label>
<div id="luas_tanah_tidak_sesuai" class="flex items-baseline gap-2"
<div id="luas_tanah_tidak_sesuai" class="flex gap-2 items-baseline"
style="{{ old('luas_tanah', isset($forminspeksi['tanah']['luas_tanah']['tidak sesuai'])) ? '' : 'display: none;' }}">
<div class="input">
<input id="analisa_tanah_tidak_sesuai" type="text" name="luas_tanah_tidak_sesuai"
@@ -57,26 +56,26 @@
</button> --}}
</div>
</div>
<em id="error-luas_tanah" class="alert text-danger text-sm"></em>
<em id="error-luas_tanah" class="text-sm alert text-danger"></em>
</div>
</div>
</div>
<!-- Hadap Mata Angin -->
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
<input type="hidden" name="hadap_mata_angin_sesuai" class="input" value="sesuai">
<label class="form-label max-w-56">Hadap Mata Angin</label>
<div class="mt-2">
<div class="flex-wrap items-stretch">
<div class="grid grid-cols-3 md:grid-cols-3 gap-4 mt-2">
<label class="form-label flex items-center gap-3 text-nowrap">
<div class="grid grid-cols-3 gap-4 mt-2 md:grid-cols-3">
<label class="flex gap-3 items-center form-label text-nowrap">
<input type="radio" class="radio" name="hadap_mata_angin" value="sesuai"
onclick="toggleFieldVisibility('hadap_mata_angin', 'hadap_mata_angin_tidak_sesuai' ,['tidak sesuai'])"
{{ old('hadap_mata_angin', isset($forminspeksi['tanah']['hadap_mata_angin']['sesuai'])) ? 'checked' : '' }}>
<span class="ml-2">Sesuai</span>
</label>
<label class="form-label flex items-center gap-2.5 text-nowrap">
<label class="flex gap-2.5 items-center form-label text-nowrap">
<input type="radio" class="radio" name="hadap_mata_angin" value="tidak sesuai"
onclick="toggleFieldVisibility('hadap_mata_angin', 'hadap_mata_angin_tidak_sesuai' ,['tidak sesuai'])"
{{ old('hadap_mata_angin', isset($forminspeksi['tanah']['hadap_mata_angin']['tidak sesuai'])) ? 'checked' : '' }}>
@@ -84,7 +83,7 @@
</label>
<!-- Select dropdown untuk "Tidak Sesuai" -->
<div id="hadap_mata_angin_tidak_sesuai" class="flex items-baseline gap-2"
<div id="hadap_mata_angin_tidak_sesuai" class="flex gap-2 items-baseline"
style="{{ old('hadap_mata_angin', isset($forminspeksi['tanah']['hadap_mata_angin']['tidak sesuai'])) ? '' : 'display: none;' }}">
<select class="input w-full
id="
@@ -108,19 +107,19 @@
{{-- <button type="button" class="btn btn-md btn-primary" onclick="updateAnalisa('hadap_mata_angin')">Save</button> --}}
</div>
</div>
<em id="error-hadap_mata_angin" class="alert text-danger text-sm"></em>
<em id="error-hadap_mata_angin" class="text-sm alert text-danger"></em>
</div>
</div>
</div>
<!-- Bentuk Tanah -->
<div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
<div class="flex flex-wrap gap-2.5 items-stretch lg:flex-nowrap">
<label class="form-label max-w-56">Bentuk Tanah</label>
<div class="flex-wrap items-stretch">
<div class="flex flex-col items-start gap-4">
<div class="flex flex-col gap-4 items-start">
@if (isset($basicData['bentukTanah']))
@foreach ($basicData['bentukTanah'] as $item)
<div class="flex items-center">
<label class="form-label flex items-center gap-2.5 text-nowrap">
<label class="flex gap-2.5 items-center form-label text-nowrap">
<input class="checkbox" name="bentuk_tanah[]" type="checkbox"
value="{{ $item->name }}"
{{ in_array($item->name, old('bentuk_tanah', [])) ||
@@ -135,7 +134,7 @@
@if (strcasecmp($item->name, 'lainnya') == 0)
<input id="bentuk_tanah_lainnya" type="text"
style="{{ isset($forminspeksi['tanah']['bentuk_tanah']['lainnya']) && $forminspeksi['tanah']['bentuk_tanah']['lainnya'] ? '' : 'display: none;' }}"
name="bentuk_tanah_lainnya" class="input w-full mt-2"
name="bentuk_tanah_lainnya" class="mt-2 w-full input"
placeholder="Masukkan bentuk tanah..."
value="{{ old('bentuk_tanah_lainnya', $forminspeksi['tanah']['bentuk_tanah']['lainnya'] ?? '') }}" />
@endif
@@ -143,17 +142,17 @@
@endforeach
@endif
</div>
<em id="error-bentuk_tanah" class="alert text-danger text-sm"></em>
<em id="error-bentuk_tanah" class="text-sm alert text-danger"></em>
</div>
</div>
<div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
<div class="flex flex-wrap gap-2.5 items-stretch lg:flex-nowrap">
<label class="form-label max-w-56">Kontur Tanah</label>
<div class="flex-wrap items-stretch">
<div class="flex flex-col items-start gap-4">
<div class="flex flex-col gap-4 items-start">
@if (isset($basicData['konturTanah']))
@foreach ($basicData['konturTanah'] as $item)
<label class="form-label flex items-center gap-2.5 text-nowrap">
<label class="flex gap-2.5 items-center form-label text-nowrap">
<input class="checkbox" name="kontur_tanah[]" type="checkbox"
value="{{ $item->name }}"
{{ in_array($item->name, old('kontur_tanah', $forminspeksi['tanah']['kontur_tanah'] ?? [])) ? 'checked' : '' }} />
@@ -162,18 +161,18 @@
@endforeach
@endif
</div>
<em id="error-kontur_tanah" class="alert text-danger text-sm"></em>
<em id="error-kontur_tanah" class="text-sm alert text-danger"></em>
</div>
</div>
<!-- Beda Ketinggian Dengan Jalan -->
<div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
<div class="flex flex-wrap gap-2.5 items-stretch lg:flex-nowrap">
<label class="form-label max-w-56">Beda Ketinggian Dengan Jalan</label>
<div class="flex-wrap items-stretch">
<div class="flex flex-col items-start gap-4">
<div class="flex flex-col gap-4 items-start">
@if (isset($basicData['ketinggianTanah']))
@foreach ($basicData['ketinggianTanah'] as $item)
<div class="flex flex-col gap-2">
<label class="form-label flex items-center gap-2.5 text-nowrap">
<label class="flex gap-2.5 items-center form-label text-nowrap">
<input class="checkbox" name="ketinggian_jalan[]" type="checkbox"
value="{{ $item->name }}"
{{ in_array($item->name, old('ketinggian_jalan', $forminspeksi['tanah']['ketinggian_jalan'] ?? [])) ? 'checked' : '' }}
@@ -186,12 +185,12 @@
@if (strcasecmp($item->name, 'Lebih Tinggi') == 0)
<input id="input-lebih-tinggi" type="text"
style="{{ isset($forminspeksi['tanah']['ketinggian_tanah']['lebih_tinggi']) && $forminspeksi['tanah']['ketinggian_tanah']['lebih_tinggi'] ? '' : 'display: none;' }}"
name="ketinggian_lebih_tinggi" class="input w-full mt-2" placeholder="Masukkan Ketinggian..."
name="ketinggian_lebih_tinggi" class="mt-2 w-full input" placeholder="Masukkan Ketinggian..."
value="{{ old('ketinggian_lebih_tinggi', $forminspeksi['tanah']['ketinggian_tanah']['lebih_tinggi'] ?? '') }}" />
@elseif (strcasecmp($item->name, 'Lebih Rendah') == 0)
<input id="input-lebih-rendah" type="text"
style="{{ isset($forminspeksi['tanah']['ketinggian_tanah']['lebih_rendah']) && $forminspeksi['tanah']['ketinggian_tanah']['lebih_rendah'] ? '' : 'display: none;' }}"
name="ketinggian_lebih_rendah" class="input w-full mt-2" placeholder="Masukkan Ketinggian..."
name="ketinggian_lebih_rendah" class="mt-2 w-full input" placeholder="Masukkan Ketinggian..."
value="{{ old('ketinggian_lebih_rendah', $forminspeksi['tanah']['ketinggian_tanah']['lebih_rendah'] ?? '') }}" />
@endif
@@ -199,39 +198,39 @@
@endforeach
@endif
</div>
<em id="error-ketinggian_jalan" class="alert text-danger text-sm"></em>
<em id="error-ketinggian_jalan" class="text-sm alert text-danger"></em>
</div>
</div>
<!-- Kontur Jalan Depan Objek -->
<div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
<div class="flex flex-wrap gap-2.5 items-stretch lg:flex-nowrap">
<label class="form-label max-w-56">Kontur Jalan Depan Objek</label>
<div class="flex-wrap items-stretch">
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<label class="form-label flex items-center gap-2.5 text-nowrap">
<div class="grid grid-cols-2 gap-4 md:grid-cols-3">
<label class="flex gap-2.5 items-center form-label text-nowrap">
<input type="radio" class="radio" name="kontur_jalan" value="menurun"
{{ old('kontur_jalan', isset($forminspeksi['tanah']['kontur_jalan']) ? $forminspeksi['tanah']['kontur_jalan'] : '') == 'menurun' ? 'checked' : '' }}>
<span class="ml-2">Menurun</span>
</label>
<label class="form-label flex items-center gap-2.5 text-nowrap">
<label class="flex gap-2.5 items-center form-label text-nowrap">
<input type="radio" class="radio" name="kontur_jalan" value="rata"
{{ old('kontur_jalan', isset($forminspeksi['tanah']['kontur_jalan']) ? $forminspeksi['tanah']['kontur_jalan'] : '') == 'rata' ? 'checked' : '' }}>
<span class="ml-2">Rata</span>
</label>
<label class="form-label flex items-center gap-2.5 text-nowrap">
<label class="flex gap-2.5 items-center form-label text-nowrap">
<input type="radio" class="radio" name="kontur_jalan" value="Menanjak"
{{ old('kontur_jalan', isset($forminspeksi['tanah']['kontur_jalan']) ? $forminspeksi['tanah']['kontur_jalan'] : '') == 'Menanjak' ? 'checked' : '' }}>
<span class="ml-2">Menanjak</span>
</label>
</div>
<em id="error-kontur_jalan" class="alert text-danger text-sm"></em>
<em id="error-kontur_jalan" class="text-sm alert text-danger"></em>
</div>
</div>
<div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
<div class="flex flex-wrap gap-2.5 items-stretch lg:flex-nowrap">
<label class="form-label max-w-56">Posisi Kavling</label>
<div class="flex-wrap items-stretch">
<div class="flex flex-col items-start gap-4">
<div class="flex flex-col gap-4 items-start">
@if (isset($basicData['posisiKavling']))
@php
$selectedPosisiKavling = old(
@@ -245,7 +244,7 @@
@endphp
@foreach ($basicData['posisiKavling'] as $item)
<div class="flex items-center">
<label class="form-label flex items-center gap-2.5 text-nowrap">
<label class="flex gap-2.5 items-center form-label text-nowrap">
<input class="checkbox" name="posisi_kavling[]" type="checkbox"
value="{{ $item->name }}"
{{ in_array($item->name, $selectedPosisiKavling) ? 'checked' : '' }}
@@ -255,7 +254,7 @@
@if (strcasecmp($item->name, 'Lainnya') == 0)
<input id="posisi_kavling_lainnya" type="text"
style="{{ $lainnyaValue ? '' : 'display: none' }}"
name="posisi_kavling_lainnya" class="input w-full mt-2"
name="posisi_kavling_lainnya" class="mt-2 w-full input"
placeholder="Masukkan Posisi Kavling lainnya..."
value="{{ $lainnyaValue }}" />
@endif
@@ -263,16 +262,16 @@
@endforeach
@endif
</div>
<em id="error-posisi_kavling" class="alert text-danger text-sm"></em>
<em id="error-posisi_kavling" class="text-sm alert text-danger"></em>
</div>
</div>
<!-- Tusuk Sate -->
<div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
<div class="flex flex-wrap gap-2.5 items-stretch lg:flex-nowrap">
<label class="form-label max-w-56">Tusuk Sate</label>
<div class="flex-wrap items-stretch">
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
<label class="form-label flex items-center gap-2.5 text-nowrap">
<div class="grid grid-cols-2 gap-4 mt-2 md:grid-cols-3">
<label class="flex gap-2.5 items-center form-label text-nowrap">
<input onclick="toggleFieldVisibility('tusuk_sate', 'tusuk_sate_ya', ['Ya'])"
type="radio" class="radio" name="tusuk_sate" value="Ya"
{{ old('tusuk_sate') == 'Ya' || (isset($forminspeksi['tanah']['tusuk_sate']['Ya']) && $forminspeksi['tanah']['tusuk_sate']['Ya']) ? 'checked' : '' }}>
@@ -287,45 +286,45 @@
value="{{ old('tusuk_sate_ya', isset($selectedData) ? $selectedData : '') }}"
style="{{ $statusKey == 'Ya' ? '' : 'display: none;' }}">
</label>
<label class="form-label flex items-center gap-2.5 text-nowrap">
<label class="flex gap-2.5 items-center form-label text-nowrap">
<input onclick="toggleFieldVisibility('tusuk_sate', 'tusuk_sate_ya', ['Ya'])"
type="radio" class="radio" name="tusuk_sate" value="Tidak"
{{ old('tusuk_sate') == 'Tidak' || (isset($forminspeksi['tanah']['tusuk_sate']['Tidak']) && $forminspeksi['tanah']['tusuk_sate']['Tidak']) ? 'checked' : '' }}>
<span class="ml-2">Tidak</span>
</label>
</div>
<em id="error-tusuk_sate" class="alert text-danger text-sm"></em>
<em id="error-tusuk_sate" class="text-sm alert text-danger"></em>
</div>
</div>
<!-- Lockland -->
<div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
<div class="flex flex-wrap gap-2.5 items-stretch lg:flex-nowrap">
<label class="form-label max-w-56">Lockland</label>
<div class="flex-wrap items-stretch">
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
<label class="form-label flex items-center gap-2.5 text-nowrap">
<div class="grid grid-cols-2 gap-4 mt-2 md:grid-cols-3">
<label class="flex gap-2.5 items-center form-label text-nowrap">
<input type="radio" class="radio" name="lockland" value="yes"
{{ old('lockland') == 'yes' || (isset($forminspeksi['tanah']['lockland']) && $forminspeksi['tanah']['lockland'] == 'yes') ? 'checked' : '' }}>
<span class="ml-2">Ya</span>
</label>
<label class="form-label flex items-center gap-2.5 text-nowrap">
<label class="flex gap-2.5 items-center form-label text-nowrap">
<input type="radio" class="radio" name="lockland" value="no"
{{ old('lockland') == 'no' || (isset($forminspeksi['tanah']['lockland']) && $forminspeksi['tanah']['lockland'] == 'no') ? 'checked' : '' }}>
<span class="ml-2">Tidak</span>
</label>
</div>
<em id="error-lockland" class="alert text-danger text-sm"></em>
<em id="error-lockland" class="text-sm alert text-danger"></em>
</div>
</div>
<!-- Kondisi Fisik Tanah -->
<div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
<div class="flex flex-wrap gap-2.5 items-stretch lg:flex-nowrap">
<label class="form-label max-w-56">Kondisi Fisik Tanah</label>
<div class="flex-wrap items-stretch">
<div class="flex flex-col items-start gap-4">
<div class="flex flex-col gap-4 items-start">
@if (isset($basicData['kondisiFisikTanah']))
@foreach ($basicData['kondisiFisikTanah'] as $item)
<label class="form-label flex items-center gap-2.5 text-nowrap">
<label class="flex gap-2.5 items-center form-label text-nowrap">
<input class="checkbox" name="kondisi_fisik_tanah[]" type="checkbox"
value="{{ $item->name }}"
{{ in_array($item->name, old('kondisi_fisik_tanah', [])) || (isset($forminspeksi['tanah']['kondisi_fisik_tanah']['kondisi_fisik_tanah']) && in_array($item->name, $forminspeksi['tanah']['kondisi_fisik_tanah']['kondisi_fisik_tanah'])) ? 'checked' : '' }}
@@ -337,7 +336,7 @@
@if (strcasecmp($item->name, 'lainnya') == 0)
<div class="flex items-center">
<input type="text" name="kondisi_fisik_tanah_lainnya"
id="kondisi_fisik_tanah_lainnya" class="input mt-2"
id="kondisi_fisik_tanah_lainnya" class="mt-2 input"
placeholder="Masukkan Kondisi Fisik Tanah..." style="display: none;"
value="{{ old('kondisi_fisik_tanah_lainnya', isset($forminspeksi['tanah']['kondisi_fisik_tanah']['lainnya'])) }}">
</div>
@@ -345,7 +344,7 @@
@endforeach
@endif
</div>
<em id="error-kondisi_fisik_tanah" class="alert text-danger text-sm"></em>
<em id="error-kondisi_fisik_tanah" class="text-sm alert text-danger"></em>
</div>
</div>