🎨(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
@@ -8,8 +8,8 @@
|
||||
{{ $title }}
|
||||
</h3>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
{!! $customlink ?? "" !!}
|
||||
<div class="flex gap-2 items-center">
|
||||
{!! $customlink ?? '' !!}
|
||||
@if (isset($id))
|
||||
@php
|
||||
$parameters = isset($id) ? ['id' => $id] : [];
|
||||
@@ -31,89 +31,88 @@
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body lg:py-7.5 grid grid-cols-3">
|
||||
<div class="grid grid-cols-3 card-body lg:py-7.5">
|
||||
<div class="mb-5">
|
||||
<h3 class="text-md font-medium text-gray-900">
|
||||
<h3 class="font-medium text-gray-900 text-md">
|
||||
Nomor Register Permohonan:
|
||||
</h3>
|
||||
<span class="text-2sm text-gray-700">
|
||||
<span class="text-gray-700 text-2sm">
|
||||
{{ $permohonan->nomor_registrasi }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<h3 class="text-md font-medium text-gray-900">
|
||||
<h3 class="font-medium text-gray-900 text-md">
|
||||
Pemohon:
|
||||
</h3>
|
||||
<span class="text-2sm text-gray-700">
|
||||
<span class="text-gray-700 text-2sm">
|
||||
{{ $permohonan->user->nik }} | {{ $permohonan->user->name }} | {{ $permohonan->user->branch->name }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@if(isset($penawaran))
|
||||
@if (isset($penawaran))
|
||||
<div class="mb-5">
|
||||
<h3 class="text-md font-medium text-gray-900">
|
||||
<h3 class="font-medium text-gray-900 text-md">
|
||||
Nomor Penawaran:
|
||||
</h3>
|
||||
<span class="text-2sm text-gray-700">
|
||||
{{ $penawaran->code }}
|
||||
</span>
|
||||
<span class="text-gray-700 text-2sm">
|
||||
{{ $penawaran->code }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<h3 class="text-md font-medium text-gray-900">
|
||||
<h3 class="font-medium text-gray-900 text-md">
|
||||
Nomor Penawaran:
|
||||
</h3>
|
||||
<span class="text-2sm text-gray-700">
|
||||
{{ $penawaran->tujuanPenilaianKjpp->name }}
|
||||
</span>
|
||||
<span class="text-gray-700 text-2sm">
|
||||
{{ $penawaran->tujuanPenilaianKjpp->name }}
|
||||
</span>
|
||||
</div>
|
||||
@else
|
||||
|
||||
<div class="mb-5">
|
||||
<h3 class="text-md font-medium text-gray-900">
|
||||
<h3 class="font-medium text-gray-900 text-md">
|
||||
Tujan Permohonan:
|
||||
</h3>
|
||||
<span class="text-2sm text-gray-700">
|
||||
{{ $permohonan->tujuanPenilaian->name }}
|
||||
</span>
|
||||
<span class="text-gray-700 text-2sm">
|
||||
{{ $permohonan->tujuanPenilaian->name }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<h3 class="text-md font-medium text-gray-900">
|
||||
<h3 class="font-medium text-gray-900 text-md">
|
||||
Nilai Plafond:
|
||||
</h3>
|
||||
<span class="text-2sm text-gray-700">
|
||||
{{ $permohonan->nilaiPlafond->name }}
|
||||
</span>
|
||||
<span class="text-gray-700 text-2sm">
|
||||
{{ $permohonan->nilaiPlafond->name }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<h3 class="text-md font-medium text-gray-900">
|
||||
<h3 class="font-medium text-gray-900 text-md">
|
||||
Status Bayar:
|
||||
</h3>
|
||||
<span
|
||||
class="text-md font-bold {{ $permohonan->status_bayar === 'belum_bayar' ? 'text-red-600' : 'text-green-600' }} uppercase">
|
||||
{{ str_replace('_', ' ', $permohonan->status_bayar) }}
|
||||
</span>
|
||||
{{ str_replace('_', ' ', $permohonan->status_bayar) }}
|
||||
</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
</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 light:bg-agi-50">
|
||||
<h3 class="card-title">
|
||||
Detail Debitur
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-table scrollable-x-auto pb-3">
|
||||
<div class="grid grid-cols-1 xl:grid-cols-2 gap-5 lg:gap-7.5">
|
||||
<div class="pb-3 card-table scrollable-x-auto">
|
||||
<div class="grid grid-cols-1 gap-5 xl:grid-cols-2 lg:gap-7.5">
|
||||
<div class="col-span-1">
|
||||
<table class="table align-middle text-sm text-gray-500">
|
||||
<table class="table text-sm text-gray-500 align-middle">
|
||||
<tr>
|
||||
<td class="py-2 text-gray-600 font-normal">
|
||||
<td class="py-2 font-normal text-gray-600">
|
||||
Nama
|
||||
</td>
|
||||
<td class="py-2 text-gray-800 font-normaltext-sm">
|
||||
@@ -124,7 +123,7 @@
|
||||
<td class="py-3">
|
||||
Email
|
||||
</td>
|
||||
<td class="py-3 text-gray-700 text-2sm font-normal">
|
||||
<td class="py-3 font-normal text-gray-700 text-2sm">
|
||||
{{ $permohonan->debiture->email ?? '' }}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -132,24 +131,24 @@
|
||||
<td class="py-3">
|
||||
No Hp
|
||||
</td>
|
||||
<td class="py-3 text-gray-700 text-2sm font-normal">
|
||||
<td class="py-3 font-normal text-gray-700 text-2sm">
|
||||
{{ $permohonan->debiture->phone ?? '' }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="py-3 text-gray-600 font-normal">
|
||||
<td class="py-3 font-normal text-gray-600">
|
||||
Alamat
|
||||
</td>
|
||||
<td class="py-3 text-gray-700 text-sm font-normal">
|
||||
<td class="py-3 text-sm font-normal text-gray-700">
|
||||
{{ $permohonan->debiture->address ?? '' }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 text-gray-600 font-normal">
|
||||
<td class="py-3 font-normal text-gray-600">
|
||||
|
||||
</td>
|
||||
<td class="py-3 text-gray-700 text-sm font-normal">
|
||||
<td class="py-3 text-sm font-normal text-gray-700">
|
||||
{{ $permohonan->debiture->village->name ?? '' }},
|
||||
{{ $permohonan->debiture->district->name ?? '' }},
|
||||
{{ $permohonan->debiture->city->name ?? '' }},
|
||||
@@ -160,9 +159,9 @@
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-span-1">
|
||||
<table class="table align-middle text-sm text-gray-500">
|
||||
<table class="table text-sm text-gray-500 align-middle">
|
||||
<tr>
|
||||
<td class="py-3 text-gray-600 font-normal">
|
||||
<td class="py-3 font-normal text-gray-600">
|
||||
Cabang
|
||||
</td>
|
||||
<td class="py-2 text-gray-800 font-normaltext-sm">
|
||||
@@ -170,7 +169,7 @@
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 text-gray-600 font-normal">
|
||||
<td class="py-3 font-normal text-gray-600">
|
||||
CIF
|
||||
</td>
|
||||
<td class="py-2 text-gray-800 font-normaltext-sm">
|
||||
@@ -178,10 +177,10 @@
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 text-gray-600 font-normal">
|
||||
<td class="py-3 font-normal text-gray-600">
|
||||
Nomor Rekening
|
||||
</td>
|
||||
<td class="py-3 text-gray-700 text-sm font-normal">
|
||||
<td class="py-3 text-sm font-normal text-gray-700">
|
||||
{{ $permohonan->debiture->nomor_rekening ?? '' }}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -189,7 +188,7 @@
|
||||
<td class="py-3">
|
||||
NPWP
|
||||
</td>
|
||||
<td class="py-3 text-gray-700 text-2sm font-normal">
|
||||
<td class="py-3 font-normal text-gray-700 text-2sm">
|
||||
{{ $permohonan->debiture->npwp ?? '' }}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -201,160 +200,172 @@
|
||||
|
||||
|
||||
|
||||
<div class="card border border-agi-100 min-w-full">
|
||||
<div class="min-w-full border card border-agi-100">
|
||||
<div class="card-header light:bg-agi-50">
|
||||
<h3 class="card-title">
|
||||
Data Jaminan
|
||||
</h3>
|
||||
</div>
|
||||
@endif
|
||||
<div data-accordion="true">
|
||||
@foreach ($permohonan->documents as $dokumen)
|
||||
<div class="accordion-item {{ count($permohonan->documents) == 1 ? 'active' : '' }} [&:not(:last-child)]:border-b border-b-gray-200"
|
||||
data-accordion-item="true" id="accordion_detail_jaminan">
|
||||
<button @class(['accordion-toggle py-4 group', 'mx-8' => !isset($status)])"
|
||||
data-accordion-toggle="#accordion_detail_jaminan_{{ $loop->index }}">
|
||||
<span class="text-base text-gray-900 font-medium">
|
||||
@endif
|
||||
<div data-accordion="true">
|
||||
@foreach ($permohonan->documents as $dokumen)
|
||||
<div class="accordion-item {{ count($permohonan->documents) == 1 ? 'active' : '' }} [&:not(:last-child)]:border-b border-b-gray-200"
|
||||
data-accordion-item="true" id="accordion_detail_jaminan">
|
||||
<button @class(['accordion-toggle py-4 group', 'mx-8' => !isset($status)])"
|
||||
data-accordion-toggle="#accordion_detail_jaminan_{{ $loop->index }}">
|
||||
<span class="text-base font-medium text-gray-900">
|
||||
@if (count($permohonan->documents) > 1)
|
||||
Jaminan {{ $loop->index + 1 }}
|
||||
@else
|
||||
Jaminan
|
||||
@endif
|
||||
Jaminan {{ $loop->index + 1 }}
|
||||
@else
|
||||
Jaminan
|
||||
@endif
|
||||
</span>
|
||||
<i class="ki-outline ki-plus text-gray-600 text-2sm accordion-active:hidden block">
|
||||
</i>
|
||||
<i class="ki-outline ki-minus text-gray-600 text-2sm accordion-active:block hidden">
|
||||
</i>
|
||||
</button>
|
||||
<div class="accordion-content {{ count($permohonan->documents) > 1 ? 'hidden' : '' }}"
|
||||
id="accordion_detail_jaminan_{{ $loop->index }}">
|
||||
<i class="block text-gray-600 ki-outline ki-plus text-2sm accordion-active:hidden">
|
||||
</i>
|
||||
<i class="hidden text-gray-600 ki-outline ki-minus text-2sm accordion-active:block">
|
||||
</i>
|
||||
</button>
|
||||
<div class="accordion-content {{ count($permohonan->documents) > 1 ? 'hidden' : '' }}"
|
||||
id="accordion_detail_jaminan_{{ $loop->index }}">
|
||||
|
||||
@if (!isset($status))
|
||||
<div class="card-body lg:py-7.5 grid grid-cols-2">
|
||||
<div class="mb-5">
|
||||
<h3 class="text-md font-medium text-gray-900">
|
||||
Pemilik Jaminan:
|
||||
</h3>
|
||||
<span class="text-2sm text-gray-700">
|
||||
@if (!isset($status))
|
||||
<div class="grid grid-cols-2 card-body lg:py-7.5">
|
||||
<div class="mb-5">
|
||||
<h3 class="font-medium text-gray-900 text-md">
|
||||
Pemilik Jaminan:
|
||||
</h3>
|
||||
<span class="text-gray-700 text-2sm">
|
||||
{{ $dokumen->pemilik->name ?? '' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<h3 class="text-md font-medium text-gray-900">
|
||||
Jenis Jaminan:
|
||||
</h3>
|
||||
<span class="text-2sm text-gray-700">
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<h3 class="font-medium text-gray-900 text-md">
|
||||
Jenis Jaminan:
|
||||
</h3>
|
||||
<span class="text-gray-700 text-2sm">
|
||||
{{ $dokumen->jenisJaminan->name ?? '' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<h3 class="text-md font-medium text-gray-900">
|
||||
Hubungan Pemilik Jaminan:
|
||||
</h3>
|
||||
<span class="text-2sm text-gray-700">
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<h3 class="font-medium text-gray-900 text-md">
|
||||
Hubungan Pemilik Jaminan:
|
||||
</h3>
|
||||
<span class="text-gray-700 text-2sm">
|
||||
{{ $dokumen->pemilik->hubungan_pemilik->name ?? '' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<h3 class="text-md font-medium text-gray-900">
|
||||
Alamat Jaminan:
|
||||
</h3>
|
||||
<span class="text-2sm text-gray-700">
|
||||
{{ formatAlamat($dokumen) }}
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<h3 class="font-medium text-gray-900 text-md">
|
||||
Alamat Jaminan:
|
||||
</h3>
|
||||
<span class="text-gray-700 text-2sm">
|
||||
{{ formatAlamat($dokumen) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
<div class="card-table scrollable-x-auto pb-3">
|
||||
<a href="{{ route('debitur.jaminan.bulk.download', ['id' => $permohonan->debiture->id, 'jaminan' => $dokumen->id]) }}"
|
||||
class="ml-6 btn btn-dark dark:btn-light">
|
||||
<i class="ki-outline ki-cloud-download"></i> Download Semua Dokumen
|
||||
</a>
|
||||
<table class="table align-middle text-sm text-gray-500">
|
||||
@php $document = $dokumen; @endphp
|
||||
@foreach($document->detail as $detail)
|
||||
@if(isset($detail->dokumen_jaminan))
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<strong class="text-2xs text-gray-600 uppercase">
|
||||
{{ $loop->index+1 }}. {{ $detail->jenisLegalitasJaminan->name }}
|
||||
</strong>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@if(isset($detail->dokumen_jaminan))
|
||||
@php
|
||||
$dokumen_jaminan = is_array(json_decode($detail->dokumen_jaminan)) ? json_decode($detail->dokumen_jaminan) : [$detail->dokumen_jaminan];
|
||||
$dokumen_nomor = is_array(json_decode($detail->dokumen_nomor)) ? json_decode($detail->dokumen_nomor) : ($detail->dokumen_nomor ? [$detail->dokumen_nomor] : []);
|
||||
@endphp
|
||||
@foreach($dokumen_jaminan as $index => $dokumen)
|
||||
<tr>
|
||||
<td>
|
||||
<span class="text-2xs text-gray-600 uppercase pl-3">
|
||||
{{ $loop->index+1 }}. Nomor : {{ $dokumen_nomor[$index] }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-left">
|
||||
@if(in_array(Auth::user()->roles[0]->name,['administrator','pemohon-eo']))
|
||||
<a href="{{ route('debitur.jaminan.download', ['id' => $permohonan->debiture->id, 'dokumen' => $detail->id, 'index' => $index]) }}"
|
||||
class="flex-none badge badge-sm badge-outline mt-2 mr-2">
|
||||
{{ basename($dokumen) }}
|
||||
<i class="ki-filled ki-cloud-download"></i>
|
||||
</a>
|
||||
@endif
|
||||
<span class="badge badge-sm badge-outline badge-warning mt-2" onclick="viewPDF('{{ Storage::url($dokumen_jaminan[$index]) }}')">
|
||||
<i class="ki-filled ki-eye mr-2"></i>Preview
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@if(isset($detail->details) && isset(json_decode($detail->details)[$index]))
|
||||
@foreach (json_decode($detail->details)[$index] as $key => $value)
|
||||
<tr>
|
||||
<td>
|
||||
<span class="text-2xs text-gray-600 uppercase pl-3">
|
||||
- {{ str_replace("_"," ",$key) ?? "" }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-left">
|
||||
<p class="text-2xs text-gray-600 max-w-[250px]">
|
||||
{{ $value }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<span class="text-2xs text-gray-600 uppercase pl-3">
|
||||
- keterangan
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<p class="text-2xs text-gray-600 max-w-[250px]">
|
||||
{{ $detail->keterangan }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
@endif
|
||||
@endforeach
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
<div class="pb-3 card-table scrollable-x-auto">
|
||||
<a href="{{ route('debitur.jaminan.bulk.download', ['id' => $permohonan->debiture->id, 'jaminan' => $dokumen->id]) }}"
|
||||
class="ml-6 btn btn-dark dark:btn-light">
|
||||
<i class="ki-outline ki-cloud-download"></i> Download Semua Dokumen
|
||||
</a>
|
||||
<table class="table text-sm text-gray-500 align-middle">
|
||||
@php $document = $dokumen; @endphp
|
||||
@foreach ($document->detail as $detail)
|
||||
@if (isset($detail->dokumen_jaminan))
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<strong class="text-gray-600 uppercase text-2xs">
|
||||
{{ $loop->index + 1 }}. {{ $detail->jenisLegalitasJaminan->name }}
|
||||
</strong>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@if (isset($detail->dokumen_jaminan))
|
||||
@php
|
||||
$dokumen_jaminan = is_array(json_decode($detail->dokumen_jaminan))
|
||||
? json_decode($detail->dokumen_jaminan)
|
||||
: [$detail->dokumen_jaminan];
|
||||
$dokumen_nomor = is_array(json_decode($detail->dokumen_nomor))
|
||||
? json_decode($detail->dokumen_nomor)
|
||||
: ($detail->dokumen_nomor
|
||||
? [$detail->dokumen_nomor]
|
||||
: []);
|
||||
@endphp
|
||||
@foreach ($dokumen_jaminan as $index => $dokumen)
|
||||
<tr>
|
||||
<td>
|
||||
<span class="pl-3 text-gray-600 uppercase text-2xs">
|
||||
{{ $loop->index + 1 }}. Nomor : {{ $dokumen_nomor[$index] }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-left">
|
||||
@if (in_array(Auth::user()->roles[0]->name, [
|
||||
'administrator',
|
||||
'pemohon-eo',
|
||||
'surveyor',
|
||||
'senior-officer',
|
||||
'EO Appraisal',
|
||||
'DD Appraisal',
|
||||
]))
|
||||
<a href="{{ route('debitur.jaminan.download', ['id' => $permohonan->debiture->id, 'dokumen' => $detail->id, 'index' => $index]) }}"
|
||||
class="flex-none mt-2 mr-2 badge badge-sm badge-outline">
|
||||
{{ basename($dokumen) }}
|
||||
<i class="ki-filled ki-cloud-download"></i>
|
||||
</a>
|
||||
@endif
|
||||
<span class="mt-2 badge badge-sm badge-outline badge-warning"
|
||||
onclick="viewPDF('{{ Storage::url($dokumen_jaminan[$index]) }}')">
|
||||
<i class="mr-2 ki-filled ki-eye"></i>Preview
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@if (isset($detail->details) && isset(json_decode($detail->details)[$index]))
|
||||
@foreach (json_decode($detail->details)[$index] as $key => $value)
|
||||
<tr>
|
||||
<td>
|
||||
<span class="pl-3 text-gray-600 uppercase text-2xs">
|
||||
- {{ str_replace('_', ' ', $key) ?? '' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-left">
|
||||
<p class="text-2xs text-gray-600 max-w-[250px]">
|
||||
{{ $value }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<span class="pl-3 text-gray-600 uppercase text-2xs">
|
||||
- keterangan
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<p class="text-2xs text-gray-600 max-w-[250px]">
|
||||
{{ $detail->keterangan }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
@endif
|
||||
@endforeach
|
||||
</table>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@if (!isset($status))
|
||||
@endforeach
|
||||
</div>
|
||||
@if (!isset($status))
|
||||
</div>
|
||||
|
||||
@include('lpj::component.lampiran-dokumen')
|
||||
@include('lpj::component.history-permohonan')
|
||||
|
||||
|
||||
@endif
|
||||
@include('lpj::component.pdfviewer')
|
||||
|
||||
Reference in New Issue
Block a user