daengdeni/lpj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

292
resources/views/surveyor/components/informasi.blade.php
View File

@@ -1,7 +1,7 @@
<!-- Informasi Tata Ruang -->
<div class="card border border-agi-100 w-full ">
<div class="w-full border card border-agi-100">
<div class="card-header light:bg-agi-50">
<h3 class="card-title uppercase">
<h3 class="uppercase card-title">
@if (strtolower($permohonan->tujuanPenilaian->name) == 'rap')
ATURAN TATA KOTA
@else
@@ -102,57 +102,56 @@
@if (count($inputDinasTata) > 0)
@foreach ($inputDinasTata as $item)
<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">{{ $item['label'] }}</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="text" name="{{ $item['name'] }}" class="input"
placeholder="Masukkan {{ $item['label'] }}" value="{{ $item['value'] }}">
@error($item['name'])
<em class="alert text-danger text-sm"></em>
<em class="text-sm alert text-danger"></em>
@enderror
</div>
</div>
@endforeach
@endif
<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">
<span class="form-label">Gambar Surat Ukur</span>
</label>
<div class="input-group w-full flex gap-2">
<div class="flex gap-2 w-full input-group">
<input class="upload_gs" type="hidden" name="upload_gs" value="upload_gs">
<div class="w-full">
<input id="inputGistaru" type="file" name="upload_gs"
class="file-input file-input-bordered w-full"
class="w-full file-input file-input-bordered"
accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
onchange="uploadFile(this, 'upload-gs-preview', 'upload_gs')">
<img id="upload-gs-preview"
src="{{ isset($forminspeksi['upload_gs']) && is_string($forminspeksi['upload_gs']) && !empty($forminspeksi['upload_gs']) ? asset('storage/' . $forminspeksi['upload_gs']) : '' }}"
alt="Foto Gs" class="mt-2 max-w-full h-auto"
style="{{ isset($forminspeksi['upload_gs']) && is_string($forminspeksi['upload_gs']) && !empty($forminspeksi['upload_gs']) ? '' : 'display: none;' }} max-width: 30rem;" />
style="{{ isset($forminspeksi['upload_gs']) && is_string($forminspeksi['upload_gs']) && !empty($forminspeksi['upload_gs']) ? '' : 'display: none;' }} max-width: 20rem;" />
</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">
<span class="form-label">Sentuh Tanahku</span>
</label>
<div class="input-group w-full flex gap-2">
<div class="flex gap-2 w-full input-group">
<input class="name_rute" type="hidden" name="name_rute" value="rute">
<div class="w-full">
<input id="inputGistaru" type="file" name="foto_sentuh_tanahku"
class="file-input file-input-bordered w-full"
class="w-full file-input file-input-bordered"
accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
onchange="uploadFile(this, 'sentuh_tanahku-preview', 'foto_sentuh_tanahku')"
>
onchange="uploadFile(this, 'sentuh_tanahku-preview', 'foto_sentuh_tanahku')">
<img id="sentuh_tanahku-preview"
src="{{ isset($forminspeksi['foto_sentuh_tanahku']) && is_string($forminspeksi['foto_sentuh_tanahku']) && !empty($forminspeksi['foto_sentuh_tanahku']) ? asset('storage/' . $forminspeksi['foto_sentuh_tanahku']) : '' }}"
src="{{ isset($forminspeksi['foto_sentuh_tanahku']) && is_string($forminspeksi['foto_sentuh_tanahku']) && !empty($forminspeksi['foto_sentuh_tanahku']) ? asset('storage/' . $forminspeksi['foto_sentuh_tanahku']) : '' }}"
alt="Foto Bhumi" class="mt-2 max-w-full h-auto"
style="{{ isset($forminspeksi['foto_sentuh_tanahku']) && is_string($forminspeksi['foto_sentuh_tanahku']) && !empty($forminspeksi['foto_sentuh_tanahku']) ? '' : 'display: none;' }} max-width: 30rem;"/>
style="{{ isset($forminspeksi['foto_sentuh_tanahku']) && is_string($forminspeksi['foto_sentuh_tanahku']) && !empty($forminspeksi['foto_sentuh_tanahku']) ? '' : 'display: none;' }} max-width: 20rem;" />
</div>
</div>
@@ -160,22 +159,22 @@
<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">
<span class="form-label">Gistaru</span>
</label>
<div class="input-group w-full flex gap-2">
<div class="flex gap-2 w-full input-group">
<input class="name_rute" type="hidden" name="name_rute" value="rute">
<div class="w-full">
<input id="inputGistaru" type="file" name="foto_gistaru"
class="file-input file-input-bordered w-full"
class="w-full file-input file-input-bordered"
accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
onchange="uploadFile(this, 'gistaru-preview', 'foto_gistaru')">
<img id="gistaru-preview"
src="{{ isset($forminspeksi['foto_gistaru']) && is_string($forminspeksi['foto_gistaru']) && !empty($forminspeksi['foto_gistaru']) ? asset('storage/' . $forminspeksi['foto_gistaru']) : '' }}"
alt="Foto Bhumi" class="mt-2 max-w-full h-auto"
style="{{ isset($forminspeksi['foto_gistaru']) && is_string($forminspeksi['foto_gistaru']) && !empty($forminspeksi['foto_gistaru']) ? '' : 'display: none;' }} max-width: 30rem;" />
style="{{ isset($forminspeksi['foto_gistaru']) && is_string($forminspeksi['foto_gistaru']) && !empty($forminspeksi['foto_gistaru']) ? '' : 'display: none;' }} max-width: 20rem;" />
</div>
@@ -186,28 +185,30 @@
</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">
<span class="form-label ">Bhumi</span>
<span class="form-label">Bhumi</span>
</label>
<div class="input-group w-full flex gap-2">
<div class="flex gap-2 w-full input-group">
<input class="name_rute" type="hidden" name="name_rute" value="rute">
<div class="w-full grid gap-2">
<div class="grid gap-2 w-full">
<input id="inputBhumi" type="file" name="foto_bhumi"
class="file-input file-input-bordered w-full "
class="w-full file-input file-input-bordered"
accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
onchange="uploadFile(this, 'bhumi-preview', 'foto_bhumi')">
@php
$bhumiPath = isset($forminspeksi['foto_bhumi']) && is_string($forminspeksi['foto_bhumi']) && !empty($forminspeksi['foto_bhumi'])
@php
$bhumiPath =
isset($forminspeksi['foto_bhumi']) &&
is_string($forminspeksi['foto_bhumi']) &&
!empty($forminspeksi['foto_bhumi'])
? asset('storage/' . $forminspeksi['foto_bhumi'])
: '';
@endphp
<img id="bhumi-preview"
src="{{ $bhumiPath }}"
alt="Foto Bhumi" class="mt-2 max-w-full h-auto"
style="{{ $bhumiPath ? '' : 'display: none;' }} max-width: 30rem;" />
@endphp
<img id="bhumi-preview" src="{{ $bhumiPath }}" alt="Foto Bhumi"
class="mt-2 max-w-full h-auto"
style="{{ $bhumiPath ? '' : 'display: none;' }} max-width: 20rem;" />
</div>
<a href="https://bhumi.atrbpn.go.id/peta" type="button" class="btn btn-light" target="_blank">
<i class="ki-filled ki-map"></i> Bhumi
@@ -216,71 +217,76 @@
</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">
<span class="form-label">Blad Tata Ruang Perdaerah</span>
</label>
<div class="input-group w-full flex gap-2">
<div class="flex gap-2 w-full input-group">
<input class="name_rute" type="hidden" name="name_rute" value="rute">
<div class="w-full">
<input id="inputArgisRegion" type="file" name="foto_argis_region"
class="file-input file-input-bordered w-full"
class="w-full file-input file-input-bordered"
accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
onchange="uploadFile(this, 'argis-region-preview', 'foto_argis_region')">
@php
$argisRegionPath = isset($forminspeksi['foto_argis_region']) && is_string($forminspeksi['foto_argis_region']) && !empty($forminspeksi['foto_argis_region'])
? asset('storage/' . $forminspeksi['foto_argis_region'])
: '';
$argisRegionPath =
isset($forminspeksi['foto_argis_region']) &&
is_string($forminspeksi['foto_argis_region']) &&
!empty($forminspeksi['foto_argis_region'])
? asset('storage/' . $forminspeksi['foto_argis_region'])
: '';
@endphp
<img id="argis-region-preview"
src="{{ $argisRegionPath }}"
alt="Foto Argis Region" class="mt-2 max-w-full h-auto"
style="{{ $argisRegionPath ? '' : 'display: none;' }} max-width: 30rem;">
<img id="argis-region-preview" src="{{ $argisRegionPath }}" alt="Foto Argis Region"
class="mt-2 max-w-full h-auto"
style="{{ $argisRegionPath ? '' : 'display: none;' }} max-width: 20rem;">
</div>
</div>
</div>
<!-- Upload Photo Button -->
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5" style="margin-top: 20px">
<label for="" class="form-label max-w-56 text-sm font-medium text-gray-700">Upload
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap" style="margin-top: 20px">
<label for="" class="text-sm font-medium text-gray-700 form-label max-w-56">Upload
Peta</label>
<div class="w-full grid gap-5">
<div class="input-group w-full flex gap-2">
<div class="grid gap-5 w-full">
<div class="flex gap-2 w-full input-group">
<input id="foto_tempat" type="file" name="foto_tempat"
class="file-input file-input-bordered w-full"
class="w-full file-input file-input-bordered"
accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
onchange="uploadFile(this, 'foto_tempat-preview', 'foto_tempat')">
<button type="button" id="btnCamera" class="btn btn-light"
data-modal-toggle="#cameraModal">
<i class="ki-outline ki-abstract-33"></i> Camera
<i class="ki-outline ki-abstract-33"></i> Camera
</button>
</div>
@php
$fotoTempat = isset($forminspeksi['foto_tempat']) && is_string($forminspeksi['foto_tempat']) && !empty($forminspeksi['foto_tempat'])
? asset('storage/' . $forminspeksi['foto_tempat'])
: '';
$fotoTempat =
isset($forminspeksi['foto_tempat']) &&
is_string($forminspeksi['foto_tempat']) &&
!empty($forminspeksi['foto_tempat'])
? asset('storage/' . $forminspeksi['foto_tempat'])
: '';
@endphp
<img id="foto_tempat-preview" src="{{ $fotoTempat ?: '' }}" alt="Foto Tempat"
class="mt-2 max-w-full h-auto"
style="max-width: 30rem; {{ $fotoTempat ? '' : 'display: none;' }}">
style="max-width: 20rem; {{ $fotoTempat ? '' : 'display: none;' }}">
</div>
</div>
<!-- Notes Section -->
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5" style="margin-top: 20px">
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap" style="margin-top: 20px">
<label class="form-label lg:form-label max-w-56 ">Catatan yang Perlu Diperhatikan
<label class="form-label lg:form-label max-w-56">Catatan yang Perlu Diperhatikan
</label>
<div class="w-full">
<div id="keterangan-container" class="flex items-baseline flex-wrap gap-2.5 w-full">
<div id="keterangan-container" class="flex flex-wrap gap-2.5 items-baseline w-full">
@if (!empty($forminspeksi['fakta']['keterangan']) && is_array($forminspeksi['fakta']['keterangan']))
@foreach ($forminspeksi['fakta']['keterangan'] as $index => $item)
<div class="keterangan flex items-center gap-2 mt-2 textarea-group w-full">
<textarea name="keterangan[]" class="textarea mt-2" placeholder="Masukkan catatan penting" rows="10">{{ old("keterangan.$index", $item) }}</textarea>
<div class="flex gap-2 items-center mt-2 w-full keterangan textarea-group">
<textarea name="keterangan[]" class="mt-2 textarea" placeholder="Masukkan catatan penting" rows="10">{{ old("keterangan.$index", $item) }}</textarea>
<button class="btn btn-danger btn-sm remove-btn" type="button"
style="display: none;">
<i class="ki-outline ki-trash"></i>
@@ -288,18 +294,18 @@
</div>
@endforeach
@else
<div class="keterangan flex items-center gap-2 mt-2 textarea-group w-full">
<textarea name="keterangan[]" class="textarea mt-2" placeholder="Masukkan catatan penting" rows="10"></textarea>
<div class="flex gap-2 items-center mt-2 w-full keterangan textarea-group">
<textarea name="keterangan[]" class="mt-2 textarea" placeholder="Masukkan catatan penting" rows="10"></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-keterangan" class="alert text-danger text-sm"></em>
<em id="error-keterangan" class="text-sm alert text-danger"></em>
</div>
@endif
</div>
<button type="button" onclick="addClonableItem('keterangan-container', 'keterangan')"
class="btn btn-primary btn-sm mt-5 ">
class="mt-5 btn btn-primary btn-sm">
<i class="ki-outline ki-plus"></i>
</button>
</div>
@@ -310,97 +316,97 @@
@include('lpj::surveyor.components.modal-kamera')
@push('scripts')
<script stype="text/javascript">
function uploadFile(inputElement, previewElement, url) {
// Ambil file dari elemen input
const file = inputElement.files[0];
<script stype="text/javascript">
function uploadFile(inputElement, previewElement, url) {
// Ambil file dari elemen input
const file = inputElement.files[0];
if (!file) {
Swal.fire({
icon: 'warning',
title: 'Tidak ada file yang dipilih.',
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 1500
});
return;
}
if (inputElement.files && file) {
var reader = new FileReader();
reader.onload = function(e) {
$('#' + previewElement).attr('src', e.target.result).show();
}
reader.readAsDataURL(inputElement.files[0]);
} else {
$('#' + previewElement).hide();
}
// Buat FormData untuk mengirim file
const formData = new FormData();
const dokument = "{{ request('documentId') }}";
const permohonan = "{{ $permohonan->id }}";
formData.append('file', file);
formData.append('dokument_id', dokument);
formData.append('permohonan_id', permohonan);
$.ajax({
url: '/surveyor/upload-file-foto/' + url,
type: 'POST',
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
data: formData,
processData: false,
contentType: false,
success: function(response) {
if (response.success) {
// Tampilkan pesan sukses
Swal.fire({
icon: 'success',
title: response.message || 'File berhasil diunggah!',
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 1500
});
// Perbarui elemen preview
$(previewElement).attr('src', response.data.path).show();
$(inputElement).data('file-name', response.data.file_name);
} else {
// Tampilkan pesan kesalahan dari server
Swal.fire({
icon: 'error',
title: response.message || 'Gagal mengunggah file!',
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 1500
});
}
},
error: function(xhr, status, error) {
// Tampilkan pesan kesalahan
if (!file) {
Swal.fire({
icon: 'error',
title: xhr.responseJSON?.message || 'Terjadi kesalahan saat mengunggah file.',
icon: 'warning',
title: 'Tidak ada file yang dipilih.',
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 1500
});
console.error(`Error: ${error}`);
return;
}
});
}
</script>
if (inputElement.files && file) {
var reader = new FileReader();
reader.onload = function(e) {
$('#' + previewElement).attr('src', e.target.result).show();
}
reader.readAsDataURL(inputElement.files[0]);
} else {
$('#' + previewElement).hide();
}
// Buat FormData untuk mengirim file
const formData = new FormData();
const dokument = "{{ request('documentId') }}";
const permohonan = "{{ $permohonan->id }}";
formData.append('file', file);
formData.append('dokument_id', dokument);
formData.append('permohonan_id', permohonan);
$.ajax({
url: '/surveyor/upload-file-foto/' + url,
type: 'POST',
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
data: formData,
processData: false,
contentType: false,
success: function(response) {
if (response.success) {
// Tampilkan pesan sukses
Swal.fire({
icon: 'success',
title: response.message || 'File berhasil diunggah!',
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 1500
});
// Perbarui elemen preview
$(previewElement).attr('src', response.data.path).show();
$(inputElement).data('file-name', response.data.file_name);
} else {
// Tampilkan pesan kesalahan dari server
Swal.fire({
icon: 'error',
title: response.message || 'Gagal mengunggah file!',
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 1500
});
}
},
error: function(xhr, status, error) {
// Tampilkan pesan kesalahan
Swal.fire({
icon: 'error',
title: xhr.responseJSON?.message || 'Terjadi kesalahan saat mengunggah file.',
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 1500
});
console.error(`Error: ${error}`);
}
});
}
</script>
@include('lpj::surveyor.js.camera-editor')
@endpush