🎨 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
@@ -24,9 +24,9 @@
|
||||
@php
|
||||
$paparan = $permohonan->status === 'proses-paparan' ? 'Paparan' : 'Pelaporan';
|
||||
@endphp
|
||||
<div class="w-full grid gap-5 lg:gap-7.5 mx-auto ">
|
||||
<div class="grid gap-5 mx-auto w-full lg:gap-7.5">
|
||||
|
||||
<form id="formResume" method="POST" class="w-full grid gap-5">
|
||||
<form id="formResume" method="POST" class="grid gap-5 w-full">
|
||||
@csrf
|
||||
|
||||
@foreach ($permohonan->documents as $dokumen)
|
||||
@@ -47,13 +47,13 @@
|
||||
@endforeach
|
||||
<div class="card">
|
||||
<div class="card-header bg-agi-50">
|
||||
<h3 class="card-title uppercase">
|
||||
<h3 class="uppercase card-title">
|
||||
Data Jaminan
|
||||
</h3>
|
||||
@php
|
||||
use Illuminate\Support\Facades\Route;
|
||||
@endphp
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex gap-2 items-center">
|
||||
|
||||
@if (Auth::user()->hasAnyRole(['administrator', 'senior-officer', 'EO Appraisal', 'DD Appraisal']) &&
|
||||
Route::currentRouteName('otorisator.show'))
|
||||
@@ -69,81 +69,81 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body grid gap-5 grid-cols-2">
|
||||
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<div class="grid grid-cols-2 gap-5 card-body">
|
||||
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
|
||||
<label class="form-label max-w-56">Nama Debitur</label>
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
@if (isset($permohonan->debiture))
|
||||
<p class="text-2sm text-gray-700">{{ $permohonan->debiture->name }}</p>
|
||||
<p class="text-gray-700 text-2sm">{{ $permohonan->debiture->name }}</p>
|
||||
@endif
|
||||
</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">Alamat Object</label>
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
@foreach ($permohonan->documents as $dokumen)
|
||||
<span class="text-2sm text-gray-700">
|
||||
<span class="text-gray-700 text-2sm">
|
||||
{{ formatAlamat($dokumen->pemilik) }}
|
||||
</span>
|
||||
@endforeach
|
||||
</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 Registrasi</label>
|
||||
<div class="flex flex-wrap items-base line w-full">
|
||||
<p class="text-2sm text-gray-700">{{ $permohonan->nomor_registrasi }}</p>
|
||||
<div class="flex flex-wrap w-full items-base line">
|
||||
<p class="text-gray-700 text-2sm">{{ $permohonan->nomor_registrasi }}</p>
|
||||
</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">Cab/Direktorat</label>
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
@if (isset($permohonan->branch))
|
||||
<p class="text-2sm text-gray-700">{{ $permohonan->branch->name }}</p>
|
||||
<p class="text-gray-700 text-2sm">{{ $permohonan->branch->name }}</p>
|
||||
@endif
|
||||
</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 Laporan</label>
|
||||
<div class="flex flex-wrap items-base line w-full">
|
||||
<p class="text-2sm text-gray-700">{{ $nomorLaporan ?? '' }}</p>
|
||||
<div class="flex flex-wrap w-full items-base line">
|
||||
<p class="text-gray-700 text-2sm">{{ $nomorLaporan ?? '' }}</p>
|
||||
</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">AO</label>
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
@if (isset($permohonan->user))
|
||||
<p class="text-2sm text-gray-700">{{ $permohonan->user->name }}</p>
|
||||
<p class="text-gray-700 text-2sm">{{ $permohonan->user->name }}</p>
|
||||
@endif
|
||||
</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">Tanggal Resume</label>
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
<input type="date" name="tanggal_resume" class="input w-full" placeholder="Masukkan..."
|
||||
<input type="date" name="tanggal_resume" class="w-full input" placeholder="Masukkan..."
|
||||
value="{{ $resumeData['tanggal_resume'] ?? '' }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card ">
|
||||
<div class="card">
|
||||
<div class="card-header bg-agi-50">
|
||||
<h3 class="card-title uppercase">
|
||||
<h3 class="uppercase card-title">
|
||||
faktor
|
||||
</h3>
|
||||
</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">Faktor Positif</label>
|
||||
<div id="fakta-positif-container" class="flex flex-wrap items-baseline w-full">
|
||||
@if (!empty($forminspeksi['fakta']['fakta_positif']))
|
||||
@foreach ($forminspeksi['fakta']['fakta_positif'] as $index => $positif)
|
||||
<div class="fakta_positif flex items-center gap-2 mt-2 textarea-group w-full">
|
||||
<textarea class="textarea mt-2" name="fakta_positif[]" rows="10">{{ old("fakta_positif.$index", $positif) }}</textarea>
|
||||
<div class="flex gap-2 items-center mt-2 w-full fakta_positif textarea-group">
|
||||
<textarea class="mt-2 textarea" name="fakta_positif[]" rows="10">{{ old("fakta_positif.$index", $positif) }}</textarea>
|
||||
<button class="btn btn-danger btn-sm remove-btn" type="button"
|
||||
style="display: none;">
|
||||
<i class="ki-outline ki-trash"></i>
|
||||
@@ -151,27 +151,27 @@
|
||||
</div>
|
||||
@endforeach
|
||||
@else
|
||||
<div class="fakta_positif flex items-center gap-2 mt-2 textarea-group w-full">
|
||||
<textarea class="textarea mt-2" name="fakta_positif[]" rows="10">{{ old('fakta_positif.0', '') }}</textarea>
|
||||
<div class="flex gap-2 items-center mt-2 w-full fakta_positif textarea-group">
|
||||
<textarea class="mt-2 textarea" name="fakta_positif[]" rows="10">{{ old('fakta_positif.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('fakta-positif-container', 'fakta_positif')">
|
||||
<i class="ki-outline ki-plus"></i>
|
||||
</button>
|
||||
</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">Faktor Negatif</label>
|
||||
<div id="fakta-negatif-container" class="flex flex-wrap items-baseline w-full">
|
||||
@if (!empty($forminspeksi['fakta']['fakta_negatif']))
|
||||
@foreach ($forminspeksi['fakta']['fakta_negatif'] as $index => $negatif)
|
||||
<div class="fakta_negatif flex items-center gap-2 mt-2 textarea-group w-full">
|
||||
<textarea class="textarea mt-2" name="fakta_negatif[]" rows="10">{{ old("fakta_negatif.$index", $negatif) }}</textarea>
|
||||
<div class="flex gap-2 items-center mt-2 w-full fakta_negatif textarea-group">
|
||||
<textarea class="mt-2 textarea" name="fakta_negatif[]" rows="10">{{ old("fakta_negatif.$index", $negatif) }}</textarea>
|
||||
<button class="btn btn-danger btn-sm remove-btn" type="button"
|
||||
style="display: none;">
|
||||
<i class="ki-outline ki-trash"></i>
|
||||
@@ -179,15 +179,15 @@
|
||||
</div>
|
||||
@endforeach
|
||||
@else
|
||||
<div class="fakta_negatif flex items-center gap-2 mt-2 textarea-group w-full">
|
||||
<textarea class="textarea mt-2" name="fakta_negatif[]" rows="10">{{ old('fakta_negatif.0', $forminspeksi['fakta']['fakta_negatif'][0] ?? '') }}</textarea>
|
||||
<div class="flex gap-2 items-center mt-2 w-full fakta_negatif textarea-group">
|
||||
<textarea class="mt-2 textarea" name="fakta_negatif[]" rows="10">{{ old('fakta_negatif.0', $forminspeksi['fakta']['fakta_negatif'][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-fakta_negatif" class="alert text-danger text-sm"></em>
|
||||
<em id="error-fakta_negatif" 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', 'fakta_negatif')">
|
||||
<i class="ki-outline ki-plus"></i>
|
||||
</button>
|
||||
@@ -197,18 +197,18 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card border border-agi-100 min-w-full ">
|
||||
<div class="min-w-full border card border-agi-100">
|
||||
<div class="card-header bg-agi-50">
|
||||
<h3 class="card-title uppercase">
|
||||
<h3 class="uppercase card-title">
|
||||
KESIMPULAN NILAI PASAR WAJAR
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body grid gap-5">
|
||||
<div class="grid gap-5 card-body">
|
||||
|
||||
<div class="gird gap-5 ">
|
||||
<div class="gap-5 gird">
|
||||
<label class="form-label max-w-56">SESUAI FISIK</label>
|
||||
<div class="flex flex-wrap items-baseline w-full mt-5">
|
||||
<table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm">
|
||||
<div class="flex flex-wrap items-baseline mt-5 w-full">
|
||||
<table class="table text-sm font-medium text-gray-700 align-middle table-auto table-border">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center">Sertipikat</th>
|
||||
@@ -299,12 +299,12 @@
|
||||
|
||||
@if (!empty($resumeData['tambahan']))
|
||||
@foreach ($resumeData['tambahan'] as $counter => $item)
|
||||
<div id="kesimpulan" class="gird gap-5 ">
|
||||
<div id="kesimpulan" class="gap-5 gird">
|
||||
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
|
||||
<table
|
||||
class="table table-auto table-border align-middle text-gray-700 font-medium text-sm mt-5">
|
||||
class="table mt-5 text-sm font-medium text-gray-700 align-middle table-auto table-border">
|
||||
<input class="input" name="tambahan_nama_kesimpulan[]"
|
||||
placeholder="Masukkan Nama Kesimpulan" type="text"
|
||||
value="{{ $item['tambahan_nama_kesimpulan'] ?? '' }}">
|
||||
@@ -338,7 +338,7 @@
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<input type="text" name="tambahan_nilai[]"
|
||||
class="input currency-format nilai-pasar"
|
||||
class="input currency-format nilai-pasar"
|
||||
value="{{ $item['nilai'] }}">
|
||||
</td>
|
||||
|
||||
@@ -352,23 +352,23 @@
|
||||
@endif
|
||||
<div id="kesimpulan" class="grid gap-5 w-full"></div>
|
||||
<div class="">
|
||||
<button type="button" class="btn btn-primary btn-sm mt-5" onclick="tambahKesimpulanNilai()">
|
||||
<button type="button" class="mt-5 btn btn-primary btn-sm" onclick="tambahKesimpulanNilai()">
|
||||
<i class="ki-outline ki-plus"></i>
|
||||
Kesimpulan Nilai
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
@@ -376,27 +376,27 @@
|
||||
</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>
|
||||
</div>
|
||||
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5" style="margin-top: 20px">
|
||||
<label class="form-label lg:form-label max-w-56 ">DISCLAIMER
|
||||
<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">DISCLAIMER
|
||||
</label>
|
||||
<div class="input-group w-full flex gap-2">
|
||||
<ol class="list-decimal pl-5 space-y-2">
|
||||
<div class="flex gap-2 w-full input-group">
|
||||
<ol class="pl-5 space-y-2 list-decimal">
|
||||
<li>LAPORAN RESUME INI DIKELUARKAN DIKARENAKAN BELUM DILAKUKANNYA PEMBAYARAN BIAYA PENILAIAN
|
||||
JAMINAN
|
||||
</li>
|
||||
@@ -421,18 +421,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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']))
|
||||
<button type="button" class="btn btn-primary" onclick="saveResume()" {{ $permohonan->status == 'proses-paparan' || $permohonan->status == 'proses-laporan' && Auth::user()->hasAnyRole(['surveyor']) ? 'disabled' : '' }}>
|
||||
<i class="ki-filled ki-save-2"></i>
|
||||
Simpan</button>
|
||||
<button type="button" class="btn btn-primary" onclick="saveResume()"
|
||||
{{ $permohonan->status == 'proses-paparan' || ($permohonan->status == 'proses-laporan' && Auth::user()->hasAnyRole(['surveyor'])) ? 'disabled' : '' }}>
|
||||
<i class="ki-filled ki-save-2"></i>
|
||||
Simpan</button>
|
||||
@endif
|
||||
|
||||
@if (Auth::user()->hasAnyRole(['senior-officer', 'EO Appraisal', 'DD Appraisal', 'administrator']))
|
||||
<a class="btn btn-info"
|
||||
href="{{ route('penilai.lampiran') }}?permohonanId={{ request('permohonanId') }}&documentId={{ request('documentId') }}&jaminanId={{ request('jaminanId') }}&statusLpj=1">
|
||||
Lampiran Foto dan Dokumen
|
||||
href="{{ route('penilai.lampiran') }}?permohonanId={{ request('permohonanId') }}&documentId={{ request('documentId') }}&jaminanId={{ request('jaminanId') }}&statusLp
|
||||
j=1&statusLpj=1&header={{ request('header') }}">Lampiran
|
||||
Foto dan Dokumen
|
||||
</a>
|
||||
<a href="{{ route('surveyor.print_out_inspeksi', ['permohonan_id' => $permohonan->id, 'dokument_id' => request('documentId'), 'jenis_jaminan_id' => request('jaminanId')]) }}"
|
||||
class="btn btn-light">
|
||||
@@ -459,12 +461,12 @@
|
||||
const kesimpulan = document.getElementById('kesimpulan');
|
||||
|
||||
kesimpulan.innerHTML += `
|
||||
<div class="grid gap-5 w-full mt-5" id="kesimpulan-${counter}">
|
||||
<div class="grid gap-5 mt-5 w-full" id="kesimpulan-${counter}">
|
||||
|
||||
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
<div class="tabel-container w-full">
|
||||
<table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm mt-5">
|
||||
<div class="w-full tabel-container">
|
||||
<table class="table mt-5 text-sm font-medium text-gray-700 align-middle table-auto table-border">
|
||||
|
||||
<input type="text" name="tambahan_nama_kesimpulan[]"
|
||||
class="input number-format"
|
||||
|
||||
Reference in New Issue
Block a user