DONE: update logo to original official logo, update letterhead and letterfooter layout

be/resources/views/pdf/layouts/letter.blade.php

@@ -8,6 +8,7 @@
     @section('letter-reference') Ruj: APP-2026-00001 @endsection
     @section('letter-date') {{ now()->format('d F Y') }} @endsection
     @section('letter-recipient') ... @endsection
+    @section('letter-honorific') Tuan/Puan @endsection
     @section('letter-subject') Perkara: ... @endsection
     @section('letter-salutation') Assalamualaikum dan Salam Sejahtera, @endsection
     @section('letter-body') ... @endsection
@@ -110,74 +111,27 @@
             border-collapse: collapse;
         }
 
-        .letterhead-line {
-            vertical-align: middle;
-            padding-right: 16px;
-        }
-
-        .letterhead-rule {
-            width: 100%;
-            border-collapse: collapse;
-            -webkit-print-color-adjust: exact;
-            print-color-adjust: exact;
-        }
-
-        .letterhead-rule-blue {
-            background-color: var(--letter-color-blue);
-            font-size: 0;
-            line-height: 0;
-        }
-
-        .letterhead-rule-orange {
-            background-color: var(--letter-color-orange);
-            font-size: 0;
-            line-height: 0;
-        }
-
-        .letterhead-logo {
-            vertical-align: middle;
-            white-space: nowrap;
-            padding-right: 10px;
+        .letterhead-center {
+            text-align: center;
+            vertical-align: top;
         }
 
         .letterhead-logo-img {
             height: var(--letter-logo-height);
             width: auto;
             display: block;
+            margin: 0 auto 8px;
         }
 
-        .letterhead-brand {
-            vertical-align: middle;
-            white-space: nowrap;
-            padding-left: 4px;
-        }
-
-        .letterhead-brand-inner {
-            border-collapse: collapse;
-        }
-
-        .letterhead-name {
-            vertical-align: middle;
-            text-align: left;
-            padding-left: 2px;
-        }
-
-        .letterhead-name-line {
-            font-size: var(--letter-font-size);
-            font-weight: bold;
-            line-height: 1.25;
-            color: var(--letter-color-black);
-            text-transform: uppercase;
-            letter-spacing: 0.3px;
-        }
-
-        .letterhead-registration {
+        .letterhead-address,
+        .letterhead-contact {
             font-size: var(--letterhead-registration-size);
-            font-weight: bold;
-            line-height: 1.3;
+            line-height: 1.4;
             color: var(--letter-color-black);
-            margin-top: 2px;
-            letter-spacing: 0.5px;
+        }
+
+        .letterhead-address {
+            margin-bottom: 4px;
         }
 
         .meta-table {
@@ -192,22 +146,25 @@
         }
 
         .meta-label {
-            width: 70px;
             font-weight: bold;
+            white-space: nowrap;
+            padding-right: 4px;
+            vertical-align: top;
         }
 
         .meta-value {
             padding-left: 4px;
         }
 
-        .meta-date {
-            margin-top: 4px;
-        }
-
         .recipient-block {
             margin-bottom: var(--letter-recipient-margin-bottom);
         }
 
+        .letter-honorific {
+            font-weight: bold;
+            margin-bottom: 8px;
+        }
+
         .subject-block {
             font-weight: bold;
             margin-bottom: var(--letter-subject-margin-bottom);
@@ -223,6 +180,26 @@
             margin: 0 0 var(--letter-body-paragraph-margin-bottom);
         }
 
+        .letter-info-table {
+            width: 80%;
+            /* max-width: 50%; */
+            margin: 0 auto var(--letter-body-paragraph-margin-bottom);
+            border-collapse: collapse;
+            line-height: 1;
+        }
+
+        .letter-info-table th,
+        .letter-info-table td {
+            border: 1px solid var(--letter-color-black);
+            padding: 4px 8px;
+            vertical-align: top;
+            text-align: left;
+        }
+
+        .letter-info-table th {
+            font-weight: bold;
+        }
+
         .signature-block {
             padding-left: var(--letter-content-padding-x);
             padding-right: var(--letter-content-padding-x);
@@ -267,43 +244,18 @@
             table-layout: fixed;
         }
 
-        .letter-footer-contact-box {
-            background-color: var(--letter-color-orange);
-            padding: 8px 12px;
+        .letter-footer-divider {
+            border-top: 1px solid var(--letter-color-black);
+            font-size: 0;
+            line-height: 0;
+            padding: 0;
+        }
+
+        .letter-footer-nota {
+            padding-top: 8px;
             font-size: var(--letter-footer-font-size);
             line-height: var(--letter-footer-line-height);
-            color: var(--letter-color-white);
-            vertical-align: middle;
-            -webkit-print-color-adjust: exact;
-            print-color-adjust: exact;
-        }
-
-        .letter-footer-address-inner {
-            background-color: var(--letter-color-blue);
-            color: var(--letter-color-white);
-            padding: 8px 12px;
-            font-size: var(--letter-footer-font-size);
-            line-height: var(--letter-footer-line-height);
-            text-align: left;
-            vertical-align: middle;
-            -webkit-print-color-adjust: exact;
-            print-color-adjust: exact;
-        }
-
-        .letter-footer-lines {
-            border-collapse: collapse;
-        }
-
-        .letter-footer-icon {
-            width: 18px;
-            padding: 2px 8px 2px 0;
-            vertical-align: middle;
-        }
-
-        .letter-footer-line-text {
-            padding: 2px 0;
-            color: var(--letter-color-white);
-            vertical-align: middle;
+            color: var(--letter-body-color);
         }
 
         @media print {
@@ -328,17 +280,22 @@
 
         <div class="letter-content">
             <div class="meta-table">
-                @if ($showReference && trim($__env->yieldContent('letter-reference')) !== '')
+                @if (($showReference && trim($__env->yieldContent('letter-reference')) !== '') || ($showDate && $letterDate !== ''))
                     <table cellpadding="0" cellspacing="0">
-                        <tr>
-                            <td class="meta-label">Ruj.</td>
-                            <td class="meta-value">: @yield('letter-reference')</td>
-                        </tr>
+                        @if ($showReference && trim($__env->yieldContent('letter-reference')) !== '')
+                            <tr>
+                                <td class="meta-label">RUJ. KAMI</td>
+                                <td class="meta-value">: @yield('letter-reference')</td>
+                            </tr>
+                        @endif
+                        @if ($showDate && $letterDate !== '')
+                            <tr>
+                                <td class="meta-label">TARIKH</td>
+                                <td class="meta-value">: {{ $letterDate }}</td>
+                            </tr>
+                        @endif
                     </table>
                 @endif
-                @if ($showDate && $letterDate !== '')
-                    <div class="meta-date">{{ $letterDate }}</div>
-                @endif
             </div>
 
             @hasSection('letter-recipient')
@@ -347,6 +304,10 @@
                 </div>
             @endif
 
+            @hasSection('letter-honorific')
+                <div class="letter-honorific">@yield('letter-honorific')</div>
+            @endif
+
             @if ($showSubject && trim($__env->yieldContent('letter-subject')) !== '')
                 <div class="subject-block">
                     @yield('letter-subject')

be/resources/views/pdf/partials/letterfooter.blade.php

@@ -1,38 +1,11 @@
 <table class="letter-footer" width="100%" cellpadding="0" cellspacing="0" border="0">
     <tr>
-        <td class="letter-footer-contact-box" valign="middle" width="50%" bgcolor="#d35400">
-            <table class="letter-footer-lines" width="100%" cellpadding="0" cellspacing="0" border="0">
-                <tr>
-                    <td class="letter-footer-icon" valign="middle">@include('pdf.partials.footer-icon', ['icon' => 'phone'])</td>
-                    <td class="letter-footer-line-text" valign="middle">Tel. Pejabat: 09-741 4331</td>
-                </tr>
-                <tr>
-                    <td class="letter-footer-icon" valign="middle">@include('pdf.partials.footer-icon', ['icon' => 'fax'])</td>
-                    <td class="letter-footer-line-text" valign="middle">Faks: 09-741 4330</td>
-                </tr>
-                <tr>
-                    <td class="letter-footer-icon" valign="middle">@include('pdf.partials.footer-icon', ['icon' => 'email'])</td>
-                    <td class="letter-footer-line-text" valign="middle">E-mel: admin@koppkb.com</td>
-                </tr>
-                <tr>
-                    <td class="letter-footer-icon" valign="middle">@include('pdf.partials.footer-icon', ['icon' => 'web'])</td>
-                    <td class="letter-footer-line-text" valign="middle">Laman Web: www.koppkb.com</td>
-                </tr>
-            </table>
-        </td>
-        <td class="letter-footer-address-inner" valign="middle" width="50%" bgcolor="#0e579b">
-            <table class="letter-footer-lines" width="100%" cellpadding="0" cellspacing="0" border="0">
-                <tr>
-                    <td class="letter-footer-icon" rowspan="3" valign="middle">@include('pdf.partials.footer-icon', ['icon' => 'location'])</td>
-                    <td class="letter-footer-line-text" valign="middle">Lot PT 448. Tingkat 1, Jalan Kuala Krai</td>
-                </tr>
-                <tr>
-                    <td class="letter-footer-line-text" valign="middle">Batu 3 Wakaf Che Yeh</td>
-                </tr>
-                <tr>
-                    <td class="letter-footer-line-text" valign="middle">15150 Kota Bharu, Kelantan Darul Naim</td>
-                </tr>
-            </table>
+        <td class="letter-footer-divider">&nbsp;</td>
+    </tr>
+    <tr>
+        <td class="letter-footer-nota">
+            <strong>Nota:</strong><br>
+            <em>Surat ini dijana secara komputer dan merupakan dokumen rasmi Koperasi Permodalan Kelantan Berhad (KoPKB). Oleh itu, surat ini adalah sah tanpa tandatangan.</em>
         </td>
     </tr>
 </table>

be/resources/views/pdf/partials/letterhead.blade.php

@@ -1,28 +1,15 @@
 <table class="letterhead" width="100%" cellpadding="0" cellspacing="0">
     <tr>
-        <td class="letterhead-line" valign="middle">
-            <table class="letterhead-rule" width="100%" cellpadding="0" cellspacing="0">
-                <tr>
-                    <td class="letterhead-rule-blue" width="50%" height="6" bgcolor="#0e579b">&nbsp;</td>
-                    <td class="letterhead-rule-orange" width="50%" height="6" bgcolor="#d35400">&nbsp;</td>
-                </tr>
-            </table>
-        </td>
-        <td class="letterhead-brand" valign="middle" align="right" width="1">
-            <table class="letterhead-brand-inner" cellpadding="0" cellspacing="0" align="right">
-                <tr>
-                    @if (! empty($logoUrl))
-                        <td class="letterhead-logo" valign="middle">
-                            <img src="{{ $logoUrl }}" alt="Koperasi Permodalan Kelantan Berhad" class="letterhead-logo-img">
-                        </td>
-                    @endif
-                    <td class="letterhead-name" valign="middle">
-                        <div class="letterhead-name-line">KOPERASI PERMODALAN</div>
-                        <div class="letterhead-name-line">KELANTAN BERHAD</div>
-                        <div class="letterhead-registration">D-5-0228</div>
-                    </td>
-                </tr>
-            </table>
+        <td class="letterhead-center" align="center" valign="top">
+            @if (! empty($logoUrl))
+                <img src="{{ $logoUrl }}" alt="Koperasi Permodalan Kelantan Berhad" class="letterhead-logo-img">
+            @endif
+            <div class="letterhead-address">
+                Lot Pt 448, Tingkat 1, Jalan Kuala Krai, Batu 3, Wakaf Che Yeh, 15150 Kota Bharu, Kelantan.
+            </div>
+            <div class="letterhead-contact">
+                Tel: 09-7414331 | Fax: 09-7414330 | Web:www.koppkb.com
+            </div>
         </td>
     </tr>
 </table>

be/resources/views/pdf/preview-approved-membership.blade.php

@@ -13,8 +13,12 @@
     43000 Kajang, Selangor
 @endsection
 
+@section('letter-honorific')
+    Tuan/Puan,
+@endsection
+
 @section('letter-subject')
-    <strong>KELULUSAN KEANGGOTAAN KOPERASI PERMODALAN KELANTAN BERHAD</strong>
+    <strong>KELULUSAN PERMOHONAN MENJADI ANGGOTA KOPERASI PERMODALAN KELANTAN BERHAD (KoPKB)</strong>
 @endsection
 
 {{-- @section('letter-salutation')
@@ -23,38 +27,57 @@
 
 @section('letter-body')
     <p style="line-height: 1;">
-        Dengan segala hormatnya saya merujuk kepada perkara di atas.
+        Dengan segala hormatnya perkara di atas adalah dirujuk.
     </p>
     <p style="line-height: 1;">
-        2. Sukacita dimaklumkan bahawa, permohonan tuan untuk menjadi anggota Koperasi 
-        Permodalan Kelantan Berhad(KoPKB) telah <strong></strong> dalam 
+        2. Sukacita dimaklumkan bahawa, permohonan tuan/puan untuk menjadi <strong>
+        Anggota Koperasi Permodalan Kelantan Berhad(KoPKB)</strong> telah dipertimbangkan dan <strong>DILULUSKAN</strong> 
+        oleh Lembaga Koperasi dalam Mesyuarat Lembaga Bil. yang diadakan pada 01 Jan 2026. 
     </p>
     <p style="line-height: 1;">
-        3. Pihak Koperasi akan membuat potongan gaji melalui majikan tuan sebagaiman ketetapan berikut:-
-        <ul style="line-height: 1;">
-            <li>Saham</li>
-            <ul style="line-height: 1;">
-                <li>Potongan sebanyak RM 84.00 </li>
-                <li>Potongan sebanyak RM  sehingga Syer Maksima</li>
-            </ul>
-            <li>Yuran</li>
-            <ul style="line-height: 1;">
-                <li>Potongan sebanyak RM setiap bulan</li>
-            </ul>
-            <li>Fi Masuk</li>
-            <ul style="line-height: 1;">
-                <li>Potongan sebanyak RM 10.00 (Pembayaran Pertama)</li>
-            </ul>
-        </ul>
+        3. Maklumat keanggotaan tuan/puan adalah seperti berikut:-
+    </p>
+    <table class="letter-info-table" cellpadding="0" cellspacing="0">
+        <tr>
+            <th>Perkara</th>
+            <th>Maklumat</th>
+        </tr>
+        <tr>
+            <td>Nama Anggota</td>
+            <td>Ali</td>
+        </tr>
+        <tr>
+            <td>No. Kad Pengenalan</td>
+            <td>0123456789012345</td>
+        </tr>
+        <tr>
+            <td>No. Anggota</td>
+            <td>123</td>
+        </tr>
+        <tr>
+            <td>Tarikh Kuat Kuasa Keanggotaan</td>
+            <td>01 Jan</td>
+        </tr>
+        <tr>
+            <td>Modal Syer Permulaan</td>
+            <td>RM500.00 (perlu dijelaskan dalam tempoh 6 bulan)</td>
+        </tr>
+        <tr>
+            <td>Fi Masuk</td>
+            <td>RM10.00</td>
+        </tr>
+        <tr>
+            <td>Yuran Tahunan</td>
+            <td>RM30.00 sebulan</td>
+        </tr>
+    </table>
+    <p style="line-height: 1;">
+    4. Sebagai anggota KoPKB, tuan/puan adalah tertakluk kepada Undang-Undang Kecil (UUK), dasar, polisi dan peraturan-peraturan KoPKB yang berkuat kuasa dari semasa ke semasa.
     </p>
     <p style="line-height: 1;">
-    4. Untuk makluman tuan, kelulusan keanggotaan ini adalah bersyarat di mana tuan dikehendaki 
-    menjelaskan modal syer minimum sebanyak RM500.00. Bayaran tersebut 
-    perlu dibuat secara ansuran melalui potongan gaji dalam tempoh enam (6) bulan. 
-    Pemenuhan syarat ini adalah bagi melayakkan tuan memperoleh hak, kewajipan dan 
-    liabiliti sebagai anggota KoPKB sebagaimana terkandung di dalam Undang-Undang Kecil (UUK), 
-    Perkara 59 yang telah didaftarkan pada 11 September 2024. Manakala had maksima modal syer adalah 
-    sebanyak RM5,000.00.
+    5. Sebagai anggota, tuan/puan adalah layak menikmati kemudahan, produk dan manfaat yang ditawarkan oleh koperasi dari semasa ke semasa, tertakluk kepada syarat-syarat yang ditetapkan.    </p>
+    <p style="line-height: 1;">
+    6. Pihak KoPKB mengucapkan tahniah dan mengalu-alukan penyertaan tuan/puan sebagai anggota. Semoga keanggotaan ini akan memberi manfaat kepada tuan/puan serta menyumbang kepada kemajuan dan kecemerlangan KoPKB.
     </p>
 @endsection
 
@@ -63,14 +86,5 @@
 @endsection
 
 @section('letter-signature')
-    <div class="signature-header">Dengan hormatnya,</div>
     <div class="signature-company">KOPERASI PERMODALAN KELANTAN BERHAD</div>
-    <div class="signature-space">
-        @if (! empty($signatureUrl))
-            <img src="{{ $signatureUrl }}" alt="" class="signature-space-img">
-        @endif
-    </div>
-    <div class="signatory-name">MUHAMMAD NAFIS BIN ZAINUDDIN</div>
-    <div class="signatory-title">Pengurus Besar</div>
-    <div class="signatory-title">b/p Setiausaha</div>
 @endsection

be/resources/views/pdf/preview.blade.php

@@ -1,43 +0,0 @@
-@extends('pdf.layouts.letter')
-
-@section('letter-title', 'Pratonton Surat')
-
-@section('letter-reference', 'APP-2026-00001')
-
-@section('letter-date', now()->translatedFormat('d F Y'))
-
-@section('letter-recipient')
-    <strong>Ahmad bin Abdullah</strong><br>
-    No. 12, Jalan Contoh,<br>
-    43000 Kajang, Selangor
-@endsection
-
-@section('letter-subject')
-    <strong>PERKARA: PRATONTON REKA BENTUK SURAT RASMI</strong>
-@endsection
-
-@section('letter-salutation')
-    Assalamualaikum dan Salam Sejahtera,
-@endsection
-
-@section('letter-body')
-    <p>
-        Dengan hormatnya perkara di atas adalah dirujuk.
-    </p>
-    <p>
-        1. Ini adalah kandungan contoh untuk pratonton reka bentuk surat. Gunakan halaman ini
-        untuk menguji susun atur, fon, jarak, dan elemen letterhead sebelum menghasilkan PDF sebenar.
-    </p>
-    <p>
-        2. Teks ini boleh diganti apabila templat surat muktamad disediakan.
-    </p>
-@endsection
-
-@section('letter-closing')
-    Sekian, terima kasih.
-@endsection
-
-@section('letter-signature')
-    <div class="signatory-name">NAMA PENGARAH</div>
-    <div class="signatory-title">Jawatan / {{ config('app.name') }}</div>
-@endsection