🎨 feat(ui-noc): tambah field nomor rekening lebih bayar & perbaikan styling konsistensi Tailwind
- Form NOC: tambah field nomor rekening lebih bayar (input number, readonly jika ada memo, hidden default, support old value & error handling) - Foto Lampiran: ubah layout jadi grid 4 kolom dengan shadow & hover effect, perbaikan urutan class Tailwind & judul kategori lebih prominent - Foto Lampiran: optimasi class container (relative, overflow-hidden, flex) & perbaikan spacing array $fotoTypes - LPJ Sederhana Standar: konsistensi class grid/flex/input-group, role 'penilai' ditambahkan untuk akses tombol simpan, perbaikan kondisi disabled button - Resume: optimasi class grid, flex, card-body, card-title, text, dan konsistensi urutan Tailwind di seluruh komponen - Konsistensi class: perbaikan di form, foto-lampiran, lpj-standar, resume agar mengikuti urutan Tailwind (layout → sizing → styling) - Struktur HTML: dirapikan untuk layout yang lebih responsif & semantik, dengan grid/flex yang lebih optimal - UX: tampilan foto lebih rapi, form lebih mudah digunakan, role-based access lebih jelas, field tambahan untuk kebutuhan bisnis - Dampak: data NOC lebih lengkap (tracking rekening lebih bayar), styling konsisten, UX meningkat, kode lebih maintainable
This commit is contained in:
Daeng Deni Mardaeni
@@ -12,30 +12,30 @@
|
||||
@else
|
||||
@foreach ($groupedPhotos as $category => $photos)
|
||||
<div class="mt-5">
|
||||
<h2 class="text-gray-800 font-bold text-xl mb-3">{{ $category ?? 'Tanpa Kategori' }}</h2>
|
||||
<div class="card border rounded-lg shadow-lg p-4">
|
||||
<h2 class="mb-3 text-xl font-bold text-gray-800">{{ $category ?? 'Tanpa Kategori' }}</h2>
|
||||
<div class="p-4 rounded-lg border shadow-lg card">
|
||||
<!-- Carousel Container -->
|
||||
<div class="relative w-full overflow-hidden">
|
||||
<div class="overflow-hidden relative w-full">
|
||||
<div class="flex transition-transform duration-500 ease-in-out" id="carousel-{{ $category }}">
|
||||
<span class="absolute top-0 right-2 text-white">
|
||||
<i class="ki-filled ki-maximize"></i>
|
||||
</span>
|
||||
@foreach ($photos as $index => $item)
|
||||
<div class="min-w-full flex flex-col items-center hover:cursor-pointer"
|
||||
<div class="flex flex-col items-center min-w-full hover:cursor-pointer"
|
||||
onclick="openPreview('{{ asset('storage/' . $item['path']) }}', '{{ $item['name'] }}', '{{ $item['description'] }}')">
|
||||
|
||||
<div class="w-full overflow-hidden rounded-md" style="height: 500px;">
|
||||
<div class="overflow-hidden w-full rounded-md" style="height: 500px;">
|
||||
@if (isset($item['path']))
|
||||
<img src="{{ asset('storage/' . $item['path']) }}"
|
||||
alt="Gambar {{ $index + 1 }}" class="w-full h-full object-cover">
|
||||
alt="Gambar {{ $index + 1 }}" class="object-cover w-full h-full">
|
||||
@else
|
||||
<p class="text-gray-500">Gambar tidak tersedia</p>
|
||||
@endif
|
||||
</div>
|
||||
<h3 class="text-gray-600 font-semibold text-lg mt-3">
|
||||
<h3 class="mt-3 text-lg font-semibold text-gray-600">
|
||||
{{ $item['name'] ?? 'Foto - ' . ($index + 1) }}
|
||||
</h3>
|
||||
<p class="text-gray-500 text-sm mt-1">{{ $item['description'] ?? '-' }}</p>
|
||||
<p class="mt-1 text-sm text-gray-500">{{ $item['description'] ?? '-' }}</p>
|
||||
|
||||
</div>
|
||||
@endforeach
|
||||
@@ -43,12 +43,12 @@
|
||||
|
||||
<!-- Navigation Buttons -->
|
||||
<button
|
||||
class="absolute top-1/2 left-0 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2 focus:outline-none"
|
||||
class="absolute left-0 top-1/2 p-2 text-white bg-gray-800 rounded-full transform -translate-y-1/2 focus:outline-none"
|
||||
onclick="prevSlide('{{ $category }}')">
|
||||
<i class="ki-outline ki-left-square"></i>
|
||||
</button>
|
||||
<button
|
||||
class="absolute top-1/2 right-0 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2 focus:outline-none"
|
||||
class="absolute right-0 top-1/2 p-2 text-white bg-gray-800 rounded-full transform -translate-y-1/2 focus:outline-none"
|
||||
onclick="nextSlide('{{ $category }}')">
|
||||
<i class="ki-outline ki-right-square"></i>
|
||||
</button>
|
||||
@@ -87,12 +87,12 @@
|
||||
previewModal.className = 'fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50';
|
||||
previewModal.innerHTML = `
|
||||
<div class="relative">
|
||||
<h3 class="text-white font-semibold text-lg mt-3 text-center">${name}</h3>
|
||||
<img src="${imagePath}" class="max-w-full max-h-screen object-contain">
|
||||
<button class="absolute top-2 right-2 bg-red-500 text-white rounded-full p-2"
|
||||
<h3 class="mt-3 text-lg font-semibold text-center text-white">${name}</h3>
|
||||
<img src="${imagePath}" class="object-contain max-w-full max-h-screen">
|
||||
<button class="absolute top-2 right-2 p-2 text-white bg-red-500 rounded-full"
|
||||
onclick="closePreview(this)">×</button>
|
||||
|
||||
<p class="text-white text-sm mt-1">${description}</p>
|
||||
<p class="mt-1 text-sm text-white">${description}</p>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(previewModal);
|
||||
@@ -109,7 +109,7 @@
|
||||
|
||||
|
||||
@php
|
||||
$fotoTypes = ['upload_gs','foto_sentuh_tanahku','foto_gistaru', 'foto_bhumi', 'foto_argis_region', 'foto_tempat'];
|
||||
$fotoTypes = ['upload_gs', 'foto_sentuh_tanahku', 'foto_gistaru', 'foto_bhumi', 'foto_argis_region', 'foto_tempat'];
|
||||
|
||||
$customLabels = [
|
||||
'upload_gs' => 'Gambar Situasi',
|
||||
@@ -139,27 +139,30 @@
|
||||
@if ($adaFoto)
|
||||
<div class="card">
|
||||
<div class="card-header bg-agi-50" id="basic_settings">
|
||||
<h3 class="card-title uppercase">
|
||||
<h3 class="uppercase card-title">
|
||||
GS, Tata Ruang dan Peta
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="grid grid-cols-1 gap-4 lg:grid-cols-4">
|
||||
@if (isset($forminspeksi))
|
||||
@forelse ($fotoTypes as $type)
|
||||
<div class="border photo-item">
|
||||
@php
|
||||
$imagePath = $forminspeksi[$type] ?? null;
|
||||
@endphp
|
||||
<div class="mb-4">
|
||||
<h4 class="mb-2 text-lg font-semibold text-center text-gray-800">
|
||||
{{ $customLabels[$type] ?? '' }}</h4>
|
||||
<div class="p-4 rounded-lg border shadow transition-shadow photo-item hover:shadow-lg">
|
||||
@php
|
||||
$imagePath = $forminspeksi[$type] ?? null;
|
||||
@endphp
|
||||
|
||||
@if ($imagePath && file_exists(storage_path('app/public/' . $imagePath)))
|
||||
<img src="{{ asset('storage/' . $imagePath) }}" alt="{{ $type }}"
|
||||
class="w-full h-auto object-cover">
|
||||
@endif
|
||||
<p class="mt-2 text-sm">{{ $customLabels[$type] ?? '' }}</p>
|
||||
@if ($imagePath && file_exists(storage_path('app/public/' . $imagePath)))
|
||||
<img src="{{ asset('storage/' . $imagePath) }}" alt="{{ $type }}"
|
||||
class="object-cover w-full h-auto rounded">
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p>Tidak ada tipe foto yang tersedia</p>
|
||||
<p class="col-span-3 text-center text-gray-500">Tidak ada tipe foto yang tersedia</p>
|
||||
@endforelse
|
||||
@endif
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user