feat(memo): Perbaiki tampilan preview memo dengan logo resmi dan format A4

Memperbaiki tampilan preview memo penyelesaian agar sesuai dengan standar dokumen resmi bank.

Perubahan yang dilakukan:
- Mengganti logo placeholder AGI dengan logo resmi Bank Artha Graha Internasional.
- Mengubah layout dari card-based menjadi full-width format A4 untuk preview, print, dan PDF.
- Menambahkan header controls dengan class `no-print` agar tersembunyi saat dicetak atau di-generate PDF.
- Memperbaiki struktur header bank dengan logo dan nama perusahaan yang proper.
- Menyesuaikan judul memo menjadi lebih compact dan professional.
- Memperbaiki struktur tabel informasi memo dengan penggunaan inline styling untuk konsistensi PDF.
- Menambahkan helper `dateFormat()` untuk penulisan tanggal yang lebih rapi.
- Memperbaiki posisi tanda tangan agar lebih proporsional dan sesuai format resmi.
- Menambahkan class `page-memo` untuk styling halaman memo secara khusus.
- Menyempurnakan responsive design dengan flex layout yang lebih baik.
- Menambahkan path logo: `assets/media/images/logo-arthagraha.png` untuk keperluan cetak dan PDF.
- Memperbaiki typography dan spacing agar sesuai dengan standar dokumen resmi.
- Menambahkan kontrol print-friendly menggunakan class `no-print`.

Tujuan perubahan:
- Menjamin tampilan memo penyelesaian sesuai standar corporate identity bank.
- Memastikan output PDF dan print preview konsisten dengan dokumen resmi.
- Meningkatkan profesionalitas tampilan dan mempermudah proses administrasi.
This commit is contained in:
Daeng Deni Mardaeni
2025-07-17 10:30:02 +07:00
parent 0c2c0c9e20
commit d0cc62f8c0

View File

@@ -5,215 +5,245 @@
@endsection @endsection
@section('content') @section('content')
<div class="grid gap-5 mx-auto w-full lg:gap-7.5"> <div class="w-full">
<!-- Preview Memo Penyelesaian --> <!-- Preview Memo Penyelesaian -->
<div class="card"> <div class="bg-white">
<div class="card-header"> <!-- Header Controls - Hidden saat print -->
<h3 class="card-title"> <div class="p-4 border-b bg-agi-50 no-print">
<div class="flex justify-between items-center mx-auto">
<h3 class="text-lg font-semibold text-gray-800">
Preview Memo Penyelesaian Preview Memo Penyelesaian
</h3> </h3>
<div class="flex gap-2 items-center"> <div class="flex gap-2">
<button onclick="history.back()" class="btn btn-sm btn-light"> <button onclick="history.back()" class="btn btn-sm btn-light">
<i class="ki-filled ki-black-left"></i> <i class="ki-filled ki-black-left"></i>
Kembali Kembali Edit
</button>
<button type="button" onclick="window.print()" class="btn btn-sm btn-secondary">
<i class="ki-filled ki-printer"></i>
Print Preview
</button> </button>
</div> </div>
</div> </div>
</div>
<div class="card-body">
@if (session('error')) @if (session('error'))
<div class="alert alert-danger"> <div class="m-4 no-print alert alert-danger">
{{ session('error') }} {{ session('error') }}
</div> </div>
@endif @endif
<!-- Template Memo --> <!-- Halaman 1: Memo Utama -->
<div class="p-8 mx-auto bg-white" style="max-width: 800px; font-family: 'Times New Roman', serif;"> <div class="p-5 w-full bg-white page-memo">
<!-- Header Bank --> <!-- Header Bank -->
<div class="flex items-center mb-6"> <div class="flex items-center mb-3">
<div class="mr-4"> <img class="default-logo min-h-[22px] max-w-none" style="height: 53.55px;"
<div class="flex justify-center items-center w-16 h-16 bg-blue-600 rounded"> src="assets/media/images/logo-arthagraha.png" />
<span class="text-lg font-bold text-white">AGI</span>
</div>
</div>
<div>
<h2 class="text-lg font-bold text-blue-600">BANK</h2>
<h2 class="text-lg font-bold text-blue-600">ARTHA GRAHA</h2>
<h2 class="text-lg font-bold text-blue-600">INTERNASIONAL</h2>
</div>
</div> </div>
<!-- Judul Memo --> <!-- Judul Memo -->
<div class="mb-6"> <div class="mb-8 text-left">
<h3 class="text-lg font-bold">Memo Instruksi Penyelesaian</h3> <h4 class="text-base font-semibold" style="margin: 0;"><strong>Memo Instruksi Penyelesaian</strong>
<h4 class="text-base font-semibold">Rekening Escrow / KSL Penilai Jaminan</h4> Rekening Escrow / <strong>KSL Penilai Jaminan</strong></h4>
</div> </div>
<!-- Informasi Memo --> <!-- Informasi Memo -->
<div class="mb-6 space-y-2"> <div class="mb-8">
<div class="flex"> <table style="width: 100%; border-collapse: collapse;">
<span class="w-20 font-medium">Kepada</span> <tr>
<span class="mr-2">:</span> <td style="width: 80px; padding: 2px 0; vertical-align: top;">Kepada</td>
<span>SUBDIT E-Channel Support & Operation (NOC)</span> <td style="width: 10px; padding: 2px 0; vertical-align: top;">:</td>
</div> <td style="padding: 2px 0; vertical-align: top;">SUBDIT E-Channel Support & Operation (NOC)</td>
<div class="flex"> </tr>
<span class="w-20 font-medium">Dari</span> <tr>
<span class="mr-2">:</span> <td style="padding: 2px 0; vertical-align: top;">Dari</td>
<span>SUBDIT Appraisal</span> <td style="padding: 2px 0; vertical-align: top;">:</td>
</div> <td style="padding: 2px 0; vertical-align: top;">SUBDIT Appraisal</td>
<div class="flex"> </tr>
<span class="w-20 font-medium">Nomor</span> <tr>
<span class="mr-2">:</span> <td style="padding: 2px 0; vertical-align: top;">Nomor</td>
<span>{{ $memoData['memo_number'] }}</span> <td style="padding: 2px 0; vertical-align: top;">:</td>
</div> <td style="padding: 2px 0; vertical-align: top;"><strong>{{ $memoData['memo_number'] }}</strong>
<div class="flex"> </td>
<span class="w-20 font-medium">Tanggal</span> </tr>
<span class="mr-2">:</span> <tr>
<span>{{ \Carbon\Carbon::parse($memoData['memo_date'])->format('d F Y') }}</span> <td style="padding: 2px 0; vertical-align: top;">Tanggal</td>
</div> <td style="padding: 2px 0; vertical-align: top;">:</td>
<div class="flex"> <td style="padding: 2px 0; vertical-align: top;">
<span class="w-20 font-medium">Perihal</span> {{ dateFormat($memoData['memo_date']) }}</td>
<span class="mr-2">:</span> </tr>
<span>Penyelesaian Rekening Escrow / <strong>KSL Penilai Jaminan (PJ)</strong></span> <tr>
</div> <td style="padding: 2px 0; vertical-align: top;">Perihal</td>
<td style="padding: 2px 0; vertical-align: top;">:</td>
<td style="padding: 2px 0; vertical-align: top;">Penyelesaian Rekening Escrow / <strong>KSL
Penilai Jaminan (PJ)</strong></td>
</tr>
</table>
</div> </div>
<hr class="mb-6 border-black"> <hr style="border: none; border-top: 1px solid #000; margin: 20px 0;">
<!-- Isi Memo --> <!-- Isi Memo -->
<div class="mb-6 space-y-4"> <div class="mb-8">
<p>Sehubungan dengan telah dilakukannya penilaian jaminan dengan keterangan sbb :</p> <p style="margin-bottom: 16px; text-align: justify;">Sehubungan dengan telah dilakukannya penilaian
jaminan dengan keterangan sbb :</p>
<div class="space-y-2"> <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
<div class="flex"> <tr>
<span class="w-32 font-medium">Nama Debitur</span> <td style="width: 120px; padding: 2px 0; vertical-align: top;">Nama Debitur</td>
<span class="mr-2">:</span> <td style="width: 10px; padding: 2px 0; vertical-align: top;">:</td>
<span>Terlampir ({{ $memoData['debitur_count'] }} Debitur)</span> <td style="padding: 2px 0; vertical-align: top;">Terlampir ({{ $memoData['debitur_count'] }}
</div> Debitur)</td>
<div class="flex"> </tr>
<span class="w-32 font-medium">Jaminan</span> <tr>
<span class="mr-2">:</span> <td style="padding: 2px 0; vertical-align: top;">Jaminan</td>
<span>{{ $memoData['jaminan_info'] }}</span> <td style="padding: 2px 0; vertical-align: top;">:</td>
</div> <td style="padding: 2px 0; vertical-align: top;">{{ $memoData['jaminan_info'] }}</td>
<div class="flex"> </tr>
<span class="w-32 font-medium">Total Biaya PJ</span> <tr>
<span class="mr-2">:</span> <td style="padding: 2px 0; vertical-align: top;">Total Biaya PJ</td>
<span><strong>Rp <td style="padding: 2px 0; vertical-align: top;">:</td>
{{ number_format($memoData['total_biaya_pj'], 0, ',', '.') }},-</strong></span> <td style="padding: 2px 0; vertical-align: top;"><strong>Rp
</div> {{ number_format($memoData['total_biaya_pj'], 0, ',', '.') }},-</strong></td>
<div class="ml-32"> </tr>
<span class="text-sm">({{ terbilang($memoData['total_biaya_pj']) }} Rupiah)</span> <tr>
</div> <td></td>
<div class="flex"> <td></td>
<span class="w-32 font-medium">Pembayaran Tanggal</span> <td style="padding: 2px 0; vertical-align: top; font-size: 11pt;">
<span class="mr-2">:</span> ({{ terbilang($memoData['total_biaya_pj']) }} Rupiah)</td>
<span>{{ \Carbon\Carbon::parse($memoData['payment_date'])->format('d F Y') }}</span> </tr>
</div> <tr>
<div class="flex"> <td style="padding: 2px 0; vertical-align: top;">Pembayaran Tanggal</td>
<span class="w-32 font-medium">LPJ selesai dikirim</span> <td style="padding: 2px 0; vertical-align: top;">:</td>
<span class="mr-2">:</span> <td style="padding: 2px 0; vertical-align: top;">
<span>-</span> {{ \Carbon\Carbon::parse($memoData['payment_date'])->format('d F Y') }}</td>
</div> </tr>
<div class="flex"> <tr>
<span class="w-32 font-medium">Jenis Penilaian</span> <td style="padding: 2px 0; vertical-align: top;">LPJ selesai dikirim</td>
<span class="mr-2">:</span> <td style="padding: 2px 0; vertical-align: top;">:</td>
<span><strong>KJPP</strong></span> <td style="padding: 2px 0; vertical-align: top;">-</td>
</div> </tr>
</div> <tr>
<td style="padding: 2px 0; vertical-align: top;">Jenis Penilaian</td>
<td style="padding: 2px 0; vertical-align: top;">:</td>
<td style="padding: 2px 0; vertical-align: top;"><strong>KJPP</strong></td>
</tr>
</table>
<p class="mt-4"> <p style="margin-bottom: 16px; text-align: justify;">
Kami menginstruksikan kepada Sentra Operasi untuk menyelesaikan Rekening Escrow / Kami menginstruksikan kepada Sentra Operasi untuk menyelesaikan Rekening Escrow /
<strong>KSL Penilai Jaminan</strong> atas nama debitur tersebut diatas ke <strong>KJPP <strong>KSL Penilai Jaminan</strong> atas nama debitur tersebut diatas ke <strong>KJPP
(terlampir)</strong>. (terlampir)</strong>.
</p> </p>
<p>Demikian kami sampaikan, atas perhatian dan kerjasamanya kami ucapkan terima kasih.</p> <p style="margin-bottom: 16px; text-align: justify;">Demikian kami sampaikan, atas perhatian dan
kerjasamanya kami ucapkan terima kasih.</p>
</div> </div>
<!-- Tanda Tangan --> <!-- Tanda Tangan -->
<div class="flex justify-between mt-12"> <div style="display: flex; justify-content: space-between; margin-top: 60px;">
<div class="text-center"> <div style="text-align: center; width: 30%;">
<p class="mb-16">Salam</p> <p style="margin-bottom: 80px;">Salam</p>
<div class="mx-auto mb-2 w-32 border-b border-black"></div> <div style="border-bottom: 1px solid #000; margin: 0 auto 8px; width: 120px;"></div>
<p class="font-medium">Innawati Sulina</p> <p style="font-weight: 500; margin: 0;">Innawati Sulina</p>
<p class="text-sm">DD Operation 2</p> <p style="font-size: 11pt; margin: 0;">DD Operation 2</p>
</div> </div>
<div class="text-center"> <div style="text-align: center; width: 30%;">
<p class="mb-16">&nbsp;</p> <p style="margin-bottom: 80px;">&nbsp;</p>
<div class="mx-auto mb-2 w-32 border-b border-black"></div> <div style="border-bottom: 1px solid #000; margin: 0 auto 8px; width: 120px;"></div>
<p class="font-medium">Wahab N. Wibawa</p> <p style="font-weight: 500; margin: 0;">Wahab N. Wibawa</p>
<p class="text-sm">Pgs EO Subdit Appraisal</p> <p style="font-size: 11pt; margin: 0;">Pgs EO Subdit Appraisal</p>
</div> </div>
<div class="text-center"> <div style="text-align: center; width: 30%;">
<p class="mb-16">&nbsp;</p> <p style="margin-bottom: 80px;">&nbsp;</p>
<div class="mx-auto mb-2 w-32 border-b border-black"></div> <div style="border-bottom: 1px solid #000; margin: 0 auto 8px; width: 120px;"></div>
<p class="font-medium">Sumurung P. Siahaan</p> <p style="font-weight: 500; margin: 0;">Sumurung P. Siahaan</p>
<p class="text-sm">&nbsp;</p> <p style="font-size: 11pt; margin: 0;">&nbsp;</p>
</div> </div>
</div> </div>
<!-- Lampiran --> <!-- Lampiran -->
<div class="mt-8"> <div style="margin-top: 40px;">
<p class="mb-2 font-medium">Lampiran :</p> <p style="font-weight: 500; margin-bottom: 8px;">Lampiran :</p>
<ul class="space-y-1 text-sm list-disc list-inside"> <ul style="margin: 0; padding-left: 20px; font-size: 11pt;">
<li>Rekap permohonan penyelesaian biaya KJPP (Eksternal)</li> <li style="margin-bottom: 4px;">Rekap permohonan penyelesaian biaya KJPP (Eksternal)</li>
<li>Asli Invoice & Faktur Pajak KJPP (Eksternal)</li> <li style="margin-bottom: 4px;">Asli Invoice & Faktur Pajak KJPP (Eksternal)</li>
<li>Copy Tiket Debet (KSL)</li> <li style="margin-bottom: 4px;">Copy Tiket Debet (KSL)</li>
</ul> </ul>
</div> </div>
</div> </div>
<!-- Daftar Permohonan --> <!-- Halaman 2: Lampiran Daftar Permohonan -->
<div class="mt-8"> <div class="p-5 w-full bg-white page-lampiran">
<h4 class="mb-4 text-lg font-semibold">Daftar Permohonan Terlampir</h4> <div style="text-align: center; margin-bottom: 30px;">
<div class="overflow-x-auto"> <h3 style="font-weight: bold; margin: 0; font-size: 14pt;">LAMPIRAN</h3>
<table class="table table-border"> <h4 style="font-weight: bold; margin: 8px 0 0 0; font-size: 13pt;">REKAP PERMOHONAN PENYELESAIAN BIAYA
KJPP</h4>
<p style="margin: 8px 0 0 0; font-size: 11pt;">Memo No: {{ $memoData['memo_number'] }}</p>
</div>
<div style="overflow-x: auto;">
<table style="width: 100%; border-collapse: collapse; font-size: 10pt;">
<thead> <thead>
<tr class="bg-gray-50"> <tr style="background-color: #f8f9fa;">
<th class="text-center">No</th> <th style="border: 1px solid #000; padding: 8px; text-align: center; font-weight: bold;">No
<th>Nomor Registrasi</th> </th>
<th>Debitur</th> <th style="border: 1px solid #000; padding: 8px; text-align: left; font-weight: bold;">Nomor
<th>Cabang</th> Registrasi</th>
<th>AO</th> <th style="border: 1px solid #000; padding: 8px; text-align: left; font-weight: bold;">
<th>Tujuan Penilaian</th> Debitur</th>
<th class="text-right">Biaya PJ</th> <th style="border: 1px solid #000; padding: 8px; text-align: left; font-weight: bold;">
Cabang</th>
<th style="border: 1px solid #000; padding: 8px; text-align: left; font-weight: bold;">AO
</th>
<th style="border: 1px solid #000; padding: 8px; text-align: left; font-weight: bold;">
Tujuan Penilaian</th>
<th style="border: 1px solid #000; padding: 8px; text-align: right; font-weight: bold;">
Biaya PJ</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@foreach ($permohonanList as $index => $permohonan) @foreach ($permohonanList as $index => $permohonan)
<tr> <tr>
<td class="text-center">{{ $index + 1 }}</td> <td style="border: 1px solid #000; padding: 6px; text-align: center;">
<td class="font-medium">{{ $permohonan->nomor_registrasi }}</td> {{ $index + 1 }}</td>
<td>{{ $permohonan->debiture->name ?? '-' }}</td> <td style="border: 1px solid #000; padding: 6px; font-weight: 500;">
<td>{{ $permohonan->branch->name ?? '-' }}</td> {{ $permohonan->nomor_registrasi }}</td>
<td>{{ $permohonan->user->name ?? '-' }}</td> <td style="border: 1px solid #000; padding: 6px;">
<td> {{ $permohonan->debiture->name ?? '-' }}</td>
<td style="border: 1px solid #000; padding: 6px;">
{{ $permohonan->branch->name ?? '-' }}</td>
<td style="border: 1px solid #000; padding: 6px;">{{ $permohonan->user->name ?? '-' }}
</td>
<td style="border: 1px solid #000; padding: 6px;">
@if ($permohonan->tujuanPenilaian) @if ($permohonan->tujuanPenilaian)
<span class="badge badge-sm badge-primary">
{{ $permohonan->tujuanPenilaian->name }} {{ $permohonan->tujuanPenilaian->name }}
</span>
@else @else
- -
@endif @endif
</td> </td>
<td class="font-medium text-right"> <td style="border: 1px solid #000; padding: 6px; text-align: right; font-weight: 500;">
Rp {{ number_format($permohonan->noc->nominal_bayar ?? 0, 0, ',', '.') }} Rp {{ number_format($permohonan->noc->nominal_bayar ?? 0, 0, ',', '.') }}
</td> </td>
</tr> </tr>
@endforeach @endforeach
</tbody> </tbody>
<tfoot> <tfoot>
<tr class="font-semibold bg-gray-50"> <tr style="background-color: #f8f9fa; font-weight: bold;">
<td colspan="6" class="text-right">Total Biaya PJ:</td> <td colspan="6"
<td class="text-right">Rp {{ number_format($totalBiayaPJ, 0, ',', '.') }}</td> style="border: 1px solid #000; padding: 8px; text-align: right; font-weight: bold;">
Total Biaya PJ:</td>
<td style="border: 1px solid #000; padding: 8px; text-align: right; font-weight: bold;">Rp
{{ number_format($totalBiayaPJ, 0, ',', '.') }}</td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
</div> </div>
</div> </div>
<!-- Form untuk Generate PDF --> <!-- Form untuk Generate PDF - Hidden saat print -->
<form action="{{ route('memo.generate-pdf') }}" method="POST" id="generate-form"> <div class="p-4 bg-gray-50 border-t no-print">
<form action="{{ route('memo.generate-pdf') }}" method="POST" id="generate-form" class="mx-auto">
@csrf @csrf
@foreach ($permohonanList as $permohonan) @foreach ($permohonanList as $permohonan)
<input type="hidden" name="permohonan_ids[]" value="{{ $permohonan->id }}"> <input type="hidden" name="permohonan_ids[]" value="{{ $permohonan->id }}">
@@ -222,15 +252,7 @@
<input type="hidden" name="memo_date" value="{{ $memoData['memo_date'] }}"> <input type="hidden" name="memo_date" value="{{ $memoData['memo_date'] }}">
<input type="hidden" name="payment_date" value="{{ $memoData['payment_date'] }}"> <input type="hidden" name="payment_date" value="{{ $memoData['payment_date'] }}">
<div class="flex gap-2 justify-end mt-8"> <div class="flex gap-2 justify-end">
<button type="button" onclick="history.back()" class="btn btn-light">
<i class="ki-filled ki-black-left"></i>
Kembali Edit
</button>
<button type="button" onclick="window.print()" class="btn btn-secondary">
<i class="ki-filled ki-printer"></i>
Print Preview
</button>
<button type="submit" class="btn btn-primary" id="generate-btn"> <button type="submit" class="btn btn-primary" id="generate-btn">
<i class="ki-filled ki-file-down"></i> <i class="ki-filled ki-file-down"></i>
Generate PDF & Simpan Generate PDF & Simpan
@@ -270,29 +292,69 @@
}); });
} }
}); });
</script>
@endpush
// Print styles @push('styles')
const printStyles = `
<style> <style>
/* Print Styles */
@media print { @media print {
body * { * {
visibility: hidden; -webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
} }
.card-body, .card-body * {
visibility: visible; body {
margin: 0 !important;
padding: 0 !important;
background: white !important;
} }
.card-body {
position: absolute; .no-print {
left: 0;
top: 0;
width: 100%;
}
.btn, .card-header, .mt-8:last-child {
display: none !important; display: none !important;
} }
.page-memo,
.page-lampiran {
width: 210mm !important;
min-height: 297mm !important;
margin: 0 !important;
padding: 20mm !important;
page-break-after: always;
box-shadow: none !important;
}
.page-lampiran {
page-break-before: always !important;
}
/* Ensure table borders print correctly */
table,
th,
td {
border-collapse: collapse !important;
}
th,
td {
border: 1px solid #000 !important;
}
/* Ensure background colors print */
.bg-gray-50,
tr[style*="background-color: #f8f9fa"] {
background-color: #f8f9fa !important;
}
}
/* Screen Styles */
@media screen {
.page-memo,
.page-lampiran {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
margin-bottom: 20px;
}
} }
</style> </style>
`;
document.head.insertAdjacentHTML('beforeend', printStyles);
</script>
@endpush @endpush