🎨(view): Refaktor dan optimasi tampilan detail jaminan dengan perbaikan CSS & struktur kode

- Konsistensi urutan class CSS mengikuti standar Tailwind (layout → sizing → typography → colors)
- Perbaikan indentasi, spacing, whitespace, dan formatting string ("" → '')
- Penyusunan ulang struktur HTML dengan alignment & spacing yang lebih rapi
- Optimalisasi Blade template: perbaikan kondisi `@if (isset($penawaran))` & closing tag
- Standarisasi penggunaan grid layout dan urutan class grid (contoh: `grid grid-cols-1 gap-5 xl:grid-cols-2`)
- Konsistensi typography classes (`font-normal text-gray-700 text-2sm`) dan urutan color classes
- Refaktor struktur tabel: perbaikan class ordering, cell formatting, dan spacing kolom
- Penyusunan ulang komponen accordion dengan indentasi & struktur konten yang konsisten
- Konsistensi class pada tombol accordion & link structure untuk meningkatkan maintainability
This commit is contained in:
Daeng Deni Mardaeni
2025-09-21 21:19:56 +07:00
parent c4bb3bea28
commit dfd2a82b42
8 changed files with 951 additions and 911 deletions

View File

@@ -6,14 +6,14 @@
@section('content')
@include('lpj::assetsku.includenya')
<div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
<form id="form-memo" method="POST" class="w-full grid gap-5">
<div class="grid gap-5 mx-auto w-full lg:gap-7.5">
<form id="form-memo" method="POST" class="grid gap-5 w-full">
<div class="card">
<div class="card-header bg-agi-50">
<h3 class="card-title uppercase">
<h3 class="uppercase card-title">
Memo Antar Kantor
</h3>
<div class="flex items-center gap-2">
<div class="flex gap-2 items-center">
@php
use Illuminate\Support\Facades\Route;
@endphp
@@ -30,51 +30,51 @@
@endif
</div>
</div>
<div class="card-body grid gap-5">
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<div class="grid gap-5 card-body">
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
<label class="form-label max-w-56">Kepada</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="text" name="kepada" class="input w-full" placeholder="Masukkan..."
<input type="text" name="kepada" class="w-full input" placeholder="Masukkan..."
value=" {{ $memo->kepada ?? '' }}">
</div>
</div>
<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">Dari</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="text" name="dari" class="input w-full" placeholder="Masukkan..."
<input type="text" name="dari" class="w-full input" placeholder="Masukkan..."
value="{{ $memo->dari ?? '' }}">
</div>
</div>
<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">Nomor Memo</label>
<div class="flex flex-wrap items-base line w-full">
<input type="text" name="nomor_memo" class="input w-full" placeholder="Masukkan..."
<div class="flex flex-wrap w-full items-base line">
<input type="text" name="nomor_memo" class="w-full input" placeholder="Masukkan..."
value="{{ $nomorLaporan ?? '' }}" @readonly(true)>
</div>
</div>
{{-- 250109828129/ --}}
<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">Tanggal</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="date" name="tanggal" class="input w-full" placeholder="Masukkan..."
<input type="date" name="tanggal" class="w-full input" placeholder="Masukkan..."
value="{{ $memo->tanggal ?? '' }}">
</div>
</div>
<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">Perihal</label>
<div class="flex flex-wrap items-base line w-full">
<input type="text" name="perihal" class="input w-full" placeholder="Masukkan..."
<div class="flex flex-wrap w-full items-base line">
<input type="text" name="perihal" class="w-full input" placeholder="Masukkan..."
value="{{ $memo->perihal ?? '' }}">
</div>
</div>
</div>
</div>
<div class="card border border-agi-100 w-full bg-white rounded-lg shadow-md ">
<div class="w-full bg-white rounded-lg border shadow-md card border-agi-100">
<div class="card-header bg-agi-50">
<h1 class="text-md font-medium text-gray-900 uppercase">Sehubungan dengan permintaan BAGI Cabang
<h1 class="font-medium text-gray-900 uppercase text-md">Sehubungan dengan permintaan BAGI Cabang
<b>{{ $permohonan->branch->name }}</b>, untuk dilakukan survey untuk penilaian baru/review, calon
debitur/debitur an
<b>{{ $permohonan->debiture->name }}</b>,dengan deskripsi sebagai berikut :
@@ -82,12 +82,12 @@
</div>
<div class="card-body">
<div class="grid gap-5 w-full">
<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">Jenis Aset</label>
<div class="flex flex-wrap items-baseline w-full">
<select id="jenis_asset_tidak_sesuai" class="input w-full" name="jenis_asset_tidak_sesuai">
<select id="jenis_asset_tidak_sesuai" class="w-full input" name="jenis_asset_tidak_sesuai">
<option value="">Select Jenis asset</option>
@foreach ($basicData['jenisJaminan'] as $item)
<option value="{{ $item->name }}"
@@ -99,21 +99,21 @@
</div>
</div>
<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">
<div class="grid gap-2.5 w-full">
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<label for="lokasi" class="form-label max-w-56">Lokasi</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="text" id="lokasi" name="lokasi" class="input w-full"
<input type="text" id="lokasi" name="lokasi" class="w-full input"
placeholder="Masukkan Jl."
value="{{ $memo->lokasi->lokasi ?? old('lokasi') }}">
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<label for="province_code" class="form-label max-w-56">Provinsi</label>
<div class="flex flex-wrap items-baseline w-full">
<select id="province_code" name="province_code" class="input w-full">
<select id="province_code" name="province_code" class="w-full input">
<option value="">Pilih Provinsi</option>
@foreach ($provinces as $item)
<option value="{{ $item->code }}"
@@ -124,10 +124,10 @@
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<label for="city_code" class="form-label max-w-56">Kota/Kabupaten</label>
<div class="flex flex-wrap items-baseline w-full">
<select id="city_code" name="city_code" class="select w-full">
<select id="city_code" name="city_code" class="w-full select">
<option value="">Pilih Kota/Kabupaten</option>
@if (isset($cities))
@foreach ($cities as $item)
@@ -140,10 +140,10 @@
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<label for="district_code" class="form-label max-w-56">Kecamatan</label>
<div class="flex flex-wrap items-baseline w-full">
<select id="district_code" name="district_code" class="select w-full">
<select id="district_code" name="district_code" class="w-full select">
<option value="">Pilih Kecamatan</option>
@if (isset($districts))
@foreach ($districts as $item)
@@ -156,10 +156,10 @@
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<label for="village_code" class="form-label max-w-56">Kelurahan</label>
<div class="flex flex-wrap items-baseline w-full">
<select id="village_code" name="village_code" class="select w-full">
<select id="village_code" name="village_code" class="w-full select">
<option value="">Pilih Kelurahan</option>
@if (isset($villages))
@foreach ($villages as $item)
@@ -172,29 +172,29 @@
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<label for="address" class="form-label max-w-56">Address</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="text" id="address" name="address" class="input w-full"
<input type="text" id="address" name="address" class="w-full input"
placeholder="Masukkan Jl."
value="{{ $memo->lokasi->address ?? old('address') }}">
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<label for="tanggal_survey" class="form-label max-w-56">Tanggal Survey</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="date-time" id="tanggal_survey" name="tanggal_survey"
class="input w-full" placeholder="Masukkan Tanggal Survey"
class="w-full input" placeholder="Masukkan Tanggal Survey"
value="{{ $permohonan->penilaian->updated_at ?? old('tanggal_survey') }}"
@readonly(true)>
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<label for="penilai" class="form-label max-w-56">Penilai</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="text" id="penilai" name="penilai" class="input w-full"
<input type="text" id="penilai" name="penilai" class="w-full input"
placeholder="Masukkan Penilai"
value="{{ $memo->lokasi->penilai ?? old('penilai') }}">
</div>
@@ -211,30 +211,30 @@
<div class="card">
<div class="card-header bg-agi-50">
<h3 class="card-title uppercase">
<h3 class="uppercase card-title">
Dokumen
</h3>
</div>
<div class="card-body grid gap-5">
<div class="grid gap-5 card-body">
<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">Terlampir</label>
<div id="fakta-positif-container" class="flex flex-wrap items-baseline w-full">
<div class="terlampir flex items-center gap-2 mt-2 textarea-group w-full">
<textarea class="textarea mt-2" name="terlampir[]" rows="3">{{ $memo->terlampir[0] ?? old('terlampir', '') }}</textarea>
<div class="flex gap-2 items-center mt-2 w-full terlampir textarea-group">
<textarea class="mt-2 textarea" name="terlampir[]" rows="3">{{ $memo->terlampir[0] ?? old('terlampir', '') }}</textarea>
</div>
</div>
</div>
<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">Berdasarkan hasil survey dapat disampaikan sbb:</label>
<div id="hasil_survey" class="flex flex-wrap items-baseline w-full">
@if (!empty($memo->hasil_survey))
@foreach ($memo->hasil_survey as $index => $positif)
<div class="hasil_survey flex items-center gap-2 mt-2 textarea-group w-full">
<textarea class="textarea mt-2" name="hasil_survey[]" rows="3">{{ old("hasil_survey.$index", $positif) }}</textarea>
<div class="flex gap-2 items-center mt-2 w-full hasil_survey textarea-group">
<textarea class="mt-2 textarea" name="hasil_survey[]" rows="3">{{ old("hasil_survey.$index", $positif) }}</textarea>
<button class="btn btn-danger btn-sm remove-btn" type="button"
style="display: none;">
<i class="ki-outline ki-trash"></i>
@@ -242,15 +242,15 @@
</div>
@endforeach
@else
<div class="hasil_survey flex items-center gap-2 mt-2 textarea-group w-full">
<textarea class="textarea mt-2" name="hasil_survey[]" rows="3">{{ old('hasil_survey.0', '') }}</textarea>
<div class="flex gap-2 items-center mt-2 w-full hasil_survey textarea-group">
<textarea class="mt-2 textarea" name="hasil_survey[]" rows="3">{{ old('hasil_survey.0', '') }}</textarea>
<button class="btn btn-danger btn-sm remove-btn" type="button"
style="display: none;">
<i class="ki-outline ki-trash"></i>
</button>
</div>
@endif
<button type="button" class="btn btn-primary btn-sm mt-5"
<button type="button" class="mt-5 btn btn-primary btn-sm"
onclick="addClonableItem('hasil_survey', 'hasil_survey')">
<i class="ki-outline ki-plus"></i>
</button>
@@ -258,13 +258,13 @@
</div>
<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">Kesimpulan dan saran</label>
<div id="fakta-negatif-container" class="flex flex-wrap items-baseline w-full">
@if (!empty($memo->kesimpulan_saran))
@foreach ($memo->kesimpulan_saran as $index => $negatif)
<div class="fakta_negatif flex items-center gap-2 mt-2 textarea-group w-full">
<textarea class="textarea mt-2" name="kesimpulan_saran[]" rows="3">{{ old("kesimpulan_saran.$index", $negatif) }}</textarea>
<div class="flex gap-2 items-center mt-2 w-full fakta_negatif textarea-group">
<textarea class="mt-2 textarea" name="kesimpulan_saran[]" rows="3">{{ old("kesimpulan_saran.$index", $negatif) }}</textarea>
<button class="btn btn-danger btn-sm remove-btn" type="button"
style="display: none;">
<i class="ki-outline ki-trash"></i>
@@ -272,16 +272,16 @@
</div>
@endforeach
@else
<div class="kesimpulan_saran flex items-center gap-2 mt-2 textarea-group w-full">
<textarea class="textarea mt-2" name="kesimpulan_saran[]" rows="3">{{ old('kesimpulan_saran.0') }}</textarea>
<div class="flex gap-2 items-center mt-2 w-full kesimpulan_saran textarea-group">
<textarea class="mt-2 textarea" name="kesimpulan_saran[]" rows="3">{{ old('kesimpulan_saran.0') }}</textarea>
<button class="btn btn-danger btn-sm remove-btn" type="button"
style="display: none;">
<i class="ki-outline ki-trash"></i>
</button>
<em id="error-kesimpulan_saran" class="alert text-danger text-sm"></em>
<em id="error-kesimpulan_saran" class="text-sm alert text-danger"></em>
</div>
@endif
<button type="button" class="btn btn-primary btn-sm mt-5"
<button type="button" class="mt-5 btn btn-primary btn-sm"
onclick="addClonableItem('fakta-negatif-container', 'kesimpulan_saran')">
<i class="ki-outline ki-plus"></i>
</button>
@@ -290,19 +290,19 @@
</div>
</div>
<div class="card border border-agi-100 rounded-lg shadow-md">
<div class="rounded-lg border shadow-md card border-agi-100">
<div class="card-body">
<div class=" py-4 flex items-center justify-between">
<h1 class="text-md font-medium text-gray-900">Upload Foto</h1>
<div class="flex justify-between items-center py-4">
<h1 class="font-medium text-gray-900 text-md">Upload Foto</h1>
</div>
<div class="dropzone" id="dropzone-upload">
<div class="dz-message needsclick" data-foto-type="upload_foto">
<i class="ki-duotone ki-file-up text-primary text-3xl"><span class="path1"></span><span
<i class="text-3xl ki-duotone ki-file-up text-primary"><span class="path1"></span><span
class="path2"></span></i>
<div class="ms-4">
<h3 class="fs-5 fw-bold text-gray-900 mb-1">Drop files here or click to upload.</h3>
<span class="fs-7 fw-semibold text-gray-500">Upload up to 10 files</span>
<h3 class="mb-1 text-gray-900 fs-5 fw-bold">Drop files here or click to upload.</h3>
<span class="text-gray-500 fs-7 fw-semibold">Upload up to 10 files</span>
</div>
</div>
</div>
@@ -314,7 +314,7 @@
{{-- @include('lpj::penilai.components.foto-lampiran') --}}
<div class="flex card-footer justify-end gap-5">
<div class="flex gap-5 justify-end card-footer">
@if (Auth::user()->hasAnyRole(['senior-officer', 'surveyor', 'administrator']))
<a class="btn btn-primary" onclick="saveMemo()"
{{ $permohonan->status == 'proses-paparan' || ($permohonan->status == 'proses-laporan' && Auth::user()->hasAnyRole(['surveyor'])) ? 'disabled' : '' }}>
@@ -429,38 +429,39 @@
function handleDeletePhoto(photoPath, photoDiv) {
const BASE_URL = "{{ asset('storage/') }}";
Swal.fire({
title: 'Hapus Foto?',
text: "Foto ini akan dihapus secara permanen!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ya, hapus!'
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
url: "{{ route('penilai.deleteTempPhoto') }}",
method: 'DELETE',
data: {
path: photoPath,
permohonan_id: {{ $permohonan->id ?? 0 }},
dokument_id: '{{ request('documentId') ?? '' }}',
},
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
success: function() {
Swal.fire('Dihapus!', 'Foto berhasil dihapus.', 'success');
photoDiv.remove();
},
error: function() {
Swal.fire('Gagal!', 'Foto gagal dihapus.', 'error');
}
})
title: 'Hapus Foto?',
text: "Foto ini akan dihapus secara permanen!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ya, hapus!'
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
url: "{{ route('penilai.deleteTempPhoto') }}",
method: 'DELETE',
data: {
path: photoPath,
permohonan_id: {{ $permohonan->id ?? 0 }},
dokument_id: '{{ request('documentId') ?? '' }}',
},
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
success: function() {
Swal.fire('Dihapus!', 'Foto berhasil dihapus.', 'success');
photoDiv.remove();
},
error: function() {
Swal.fire('Gagal!', 'Foto gagal dihapus.', 'error');
}
})
}
});
}
});
}
function saveMemo() {
const form = document.getElementById('form-memo');
const formData = new FormData(form);