DONE: layout letter with letterhead and footer, notification for newly...

2026-06-28 02:16:49 +00:00
parent 94ecbe5887
commit 034ecf947f
400 changed files with 29802 additions and 5446 deletions
@@ -0,0 +1,2 @@
+Terima kasih,<br>
+{{ config('app.name') }}
@@ -0,0 +1,9 @@
+@php
+    $logoPath = $logoPath ?? config('mail.logo_path');
+@endphp
+
+@if (! empty($logoPath) && file_exists($logoPath) && isset($message))
+<div style="text-align: center; margin-bottom: 24px;">
+    <img src="{{ $message->embed($logoPath) }}" alt="{{ config('app.name') }}" style="max-height: 80px; width: auto;">
+</div>
+@endif
@@ -0,0 +1,380 @@
+{{--
+    Reusable base layout for official PDF letters.
+
+    Extend this layout and fill the sections below:
+
+    @extends('pdf.layouts.letter')
+
+    @section('letter-reference') Ruj: APP-2026-00001 @endsection
+    @section('letter-date') {{ now()->format('d F Y') }} @endsection
+    @section('letter-recipient') ... @endsection
+    @section('letter-subject') Perkara: ... @endsection
+    @section('letter-salutation') Assalamualaikum dan Salam Sejahtera, @endsection
+    @section('letter-body') ... @endsection
+    @section('letter-closing') Yang benar, @endsection
+    @section('letter-signature') ... @endsection
+
+    Optional overrides via view data:
+    - logoPath, organizationAddress, organizationContact
+    - showReference, showDate, showSubject (bool, default true)
+--}}
+@php
+    $showReference = $showReference ?? true;
+    $showDate = $showDate ?? true;
+    $showSubject = $showSubject ?? true;
+    $letterDate = trim($__env->yieldContent('letter-date'));
+    $css = ($letterLayout ?? \App\Support\LetterLayout::resolve())['css'];
+@endphp
+<!DOCTYPE html>
+<html lang="ms">
+<head>
+    <meta charset="utf-8">
+    <title>@yield('letter-title', trim($__env->yieldContent('letter-subject', 'Surat Rasmi')))</title>
+    <style>
+        :root {
+            --letter-margin-top: {{ $css['margin_top'] }};
+            --letter-margin-right: {{ $css['margin_right'] }};
+            --letter-margin-bottom: {{ $css['margin_bottom'] }};
+            --letter-margin-left: {{ $css['margin_left'] }};
+            --letter-content-padding-x: {{ $css['content_padding_x'] }};
+            --letter-sheet-min-height: {{ $css['sheet_min_height'] }};
+            --letter-font-family: {{ $css['font_family'] }};
+            --letter-font-size: {{ $css['font_size'] }};
+            --letter-line-height: {{ $css['line_height'] }};
+            --letter-body-color: {{ $css['body_color'] }};
+            --letter-signatory-title-size: {{ $css['signatory_title_size'] }};
+            --letter-signatory-title-color: {{ $css['signatory_title_color'] }};
+            --letter-footer-font-size: {{ $css['footer_font_size'] }};
+            --letter-footer-line-height: {{ $css['footer_line_height'] }};
+            --letterhead-registration-size: {{ $css['letterhead_registration_size'] }};
+            --letterhead-margin-bottom: {{ $css['letterhead_margin_bottom'] }};
+            --letter-meta-margin-bottom: {{ $css['meta_margin_bottom'] }};
+            --letter-recipient-margin-bottom: {{ $css['recipient_margin_bottom'] }};
+            --letter-subject-margin-bottom: {{ $css['subject_margin_bottom'] }};
+            --letter-body-margin-bottom: {{ $css['body_margin_bottom'] }};
+            --letter-body-paragraph-margin-bottom: {{ $css['body_paragraph_margin_bottom'] }};
+            --letter-signature-block-margin-bottom: {{ $css['signature_block_margin_bottom'] }};
+            --letter-signature-company-margin-bottom: {{ $css['signature_company_margin_bottom'] }};
+            --letter-signature-space-height: {{ $css['signature_space_height'] }};
+            --letter-logo-height: {{ $css['logo_height'] }};
+            --letter-color-blue: {{ $css['color_blue'] }};
+            --letter-color-orange: {{ $css['color_orange'] }};
+            --letter-color-white: {{ $css['color_white'] }};
+            --letter-color-black: {{ $css['color_black'] }};
+        }
+
+        @page {
+            size: A4;
+            margin: var(--letter-margin-top) var(--letter-margin-right) var(--letter-margin-bottom) var(--letter-margin-left);
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        html {
+            -webkit-print-color-adjust: exact;
+            print-color-adjust: exact;
+        }
+
+        body.letter-page {
+            font-family: var(--letter-font-family);
+            font-size: var(--letter-font-size);
+            line-height: var(--letter-line-height);
+            color: var(--letter-body-color);
+            margin: 0;
+            padding: var(--letter-margin-top) var(--letter-margin-right) var(--letter-margin-bottom) var(--letter-margin-left);
+        }
+
+        .letter-sheet {
+            display: flex;
+            flex-direction: column;
+            min-height: var(--letter-sheet-min-height);
+        }
+
+        .letter-content {
+            flex: 1 1 auto;
+            padding-left: var(--letter-content-padding-x);
+            padding-right: var(--letter-content-padding-x);
+        }
+
+        .letter-bottom {
+            flex-shrink: 0;
+            margin-top: auto;
+            page-break-inside: avoid;
+        }
+
+        .letterhead {
+            width: 100%;
+            margin-bottom: var(--letterhead-margin-bottom);
+            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-logo-img {
+            height: var(--letter-logo-height);
+            width: auto;
+            display: block;
+        }
+
+        .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 {
+            font-size: var(--letterhead-registration-size);
+            font-weight: bold;
+            line-height: 1.3;
+            color: var(--letter-color-black);
+            margin-top: 2px;
+            letter-spacing: 0.5px;
+        }
+
+        .meta-table {
+            width: 100%;
+            margin-bottom: var(--letter-meta-margin-bottom);
+            border-collapse: collapse;
+        }
+
+        .meta-table td {
+            vertical-align: top;
+            padding: 0;
+        }
+
+        .meta-label {
+            width: 70px;
+            font-weight: bold;
+        }
+
+        .meta-value {
+            padding-left: 4px;
+        }
+
+        .meta-date {
+            margin-top: 4px;
+        }
+
+        .recipient-block {
+            margin-bottom: var(--letter-recipient-margin-bottom);
+        }
+
+        .subject-block {
+            font-weight: bold;
+            margin-bottom: var(--letter-subject-margin-bottom);
+            text-decoration: underline;
+        }
+
+        .letter-body {
+            margin-bottom: var(--letter-body-margin-bottom);
+            text-align: justify;
+        }
+
+        .letter-body p {
+            margin: 0 0 var(--letter-body-paragraph-margin-bottom);
+        }
+
+        .signature-block {
+            padding-left: var(--letter-content-padding-x);
+            padding-right: var(--letter-content-padding-x);
+            margin-bottom: var(--letter-signature-block-margin-bottom);
+            page-break-inside: avoid;
+        }
+
+        .signature-company {
+            font-weight: bold;
+            margin-bottom: var(--letter-signature-company-margin-bottom);
+        }
+
+        .signature-space {
+            height: var(--letter-signature-space-height);
+        }
+
+        .signatory-name {
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+
+        .signatory-title {
+            font-size: var(--letter-signatory-title-size);
+            line-height: 1.5;
+            color: var(--letter-signatory-title-color);
+        }
+
+        .letter-footer-wrapper {
+            -webkit-print-color-adjust: exact;
+            print-color-adjust: exact;
+        }
+
+        .letter-footer {
+            width: 100%;
+            border-collapse: collapse;
+            table-layout: fixed;
+        }
+
+        .letter-footer-contact-box {
+            background-color: var(--letter-color-orange);
+            padding: 8px 12px;
+            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;
+        }
+
+        @media print {
+            body.letter-page {
+                padding: 0;
+            }
+
+            .letter-sheet {
+                min-height: auto;
+            }
+
+            .letterhead {
+                page-break-inside: avoid;
+            }
+        }
+    </style>
+    @stack('letter-styles')
+</head>
+<body class="letter-page">
+    <div class="letter-sheet">
+        @include('pdf.partials.letterhead')
+
+        <div class="letter-content">
+            <div class="meta-table">
+                @if ($showReference && trim($__env->yieldContent('letter-reference')) !== '')
+                    <table cellpadding="0" cellspacing="0">
+                        <tr>
+                            <td class="meta-label">Ruj.</td>
+                            <td class="meta-value">: @yield('letter-reference')</td>
+                        </tr>
+                    </table>
+                @endif
+                @if ($showDate && $letterDate !== '')
+                    <div class="meta-date">{{ $letterDate }}</div>
+                @endif
+            </div>
+
+            @hasSection('letter-recipient')
+                <div class="recipient-block">
+                    <div>@yield('letter-recipient')</div>
+                </div>
+            @endif
+
+            @if ($showSubject && trim($__env->yieldContent('letter-subject')) !== '')
+                <div class="subject-block">
+                    @yield('letter-subject')
+                </div>
+            @endif
+
+            @hasSection('letter-salutation')
+                <div class="letter-salutation">@yield('letter-salutation')</div>
+            @endif
+
+            <div class="letter-body">
+                @yield('letter-body')
+            </div>
+
+            @hasSection('letter-closing')
+                <div class="letter-closing">@yield('letter-closing')</div>
+            @endif
+        </div>
+
+        <div class="letter-bottom">
+            @hasSection('letter-signature')
+                <div class="signature-block">@yield('letter-signature')</div>
+            @endif
+
+            <div class="letter-footer-wrapper">
+                @hasSection('letter-footer')
+                    @yield('letter-footer')
+                @else
+                    @include('pdf.partials.letterfooter')
+                @endif
+            </div>
+        </div>
+    </div>
+
+    @stack('letter-scripts')
+</body>
+</html>
@@ -0,0 +1,30 @@
+@php
+    $color = $color ?? '#ffffff';
+@endphp
+@switch($icon)
+    @case('phone')
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="{{ $color }}">
+            <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
+        </svg>
+        @break
+    @case('fax')
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="{{ $color }}">
+            <path d="M19 8h-1V3H6v5H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H7v4h10V3z"/>
+        </svg>
+        @break
+    @case('email')
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="{{ $color }}">
+            <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"/>
+        </svg>
+        @break
+    @case('web')
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="{{ $color }}">
+            <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14a7.9 7.9 0 0 1 0-4h3.38a16.5 16.5 0 0 0 0 4H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.99 7.99 0 0 1 5.08 16zm2.95-8H5.08a7.99 7.99 0 0 1 4.33-3.56C9.32 5.55 8.86 6.75 8.54 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.34.16-2h4.68c.09.66.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/>
+        </svg>
+        @break
+    @case('location')
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="{{ $color }}">
+            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/>
+        </svg>
+        @break
+@endswitch
@@ -0,0 +1,38 @@
+<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>
+    </tr>
+</table>
@@ -0,0 +1,28 @@
+<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>
+    </tr>
+</table>
@@ -0,0 +1,72 @@
+@extends('pdf.layouts.letter')
+
+@section('letter-title', '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>KELULUSAN KEANGGOTAAN KOPERASI PERMODALAN KELANTAN BERHAD</strong>
+@endsection
+
+{{-- @section('letter-salutation')
+    Assalamualaikum dan Salam Sejahtera,
+@endsection --}}
+
+@section('letter-body')
+    <p style="line-height: 1;">
+        Dengan segala hormatnya saya merujuk kepada perkara di atas.
+    </p>
+    <p style="line-height: 1;">
+        2. Sukacita dimaklumkan bahawa, permohonan tuan untuk menjadi anggota Koperasi 
+        Permodalan Kelantan Berhad(KoPKB) telah <strong>DILULUSKAN</strong> dalam Mesyuarat Lembaga 
+        Koperasi Bil. 4-2025/2026 pada 24 Jun 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 (Mei 2026 - Jun 2026)</li>
+                <li>Potongan sebanyak RM 50.00 sehingga Syer Maksima</li>
+            </ul>
+            <li>Yuran</li>
+            <ul style="line-height: 1;">
+                <li>Potongan sebanyak RM 50.00 setiap bulan</li>
+            </ul>
+            <li>Fi Masuk</li>
+            <ul style="line-height: 1;">
+                <li>Potongan sebanyak RM 10.00 (Pembayaran Pertama)</li>
+            </ul>
+        </ul>
+    </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.
+    </p>
+@endsection
+
+@section('letter-closing')
+    Sekian, terima kasih.
+@endsection
+
+@section('letter-signature')
+    <div class="signature-header">Dengan hormatnya,</div>
+    <div class="signature-company">KOPERASI PERMODALAN KELANTAN BERHAD</div>
+    <div class="signature-space"></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
@@ -0,0 +1,43 @@
+@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