@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-4">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body bg-gradient-primary p-4 p-lg-5">
                <div class="row align-items-center">
                    <div class="col-lg-8">
                        <p class="text-white text-uppercase text-sm mb-2">MSJFramework</p>
                        <h2 class="text-white mb-3">Dokumentasi Layout dan Fitur</h2>
                        <p class="text-white mb-0 text-sm">
                            Panduan ringkas namun tetap cukup lengkap untuk memahami cara kerja struktur menu dinamis di
                            MSJFramework, hubungan antara <code class="text-info">sys_gmenu</code>,
                            <code class="text-info">sys_dmenu</code>, <code class="text-info">sys_table</code>, dan
                            <code class="text-info">sys_auth</code>, fungsi setiap layout bawaan, pola routing ke controller
                            layout, mekanisme metadata field, validasi, query lookup, generate ID, sampai contoh
                            implementasi
                            nyata yang sudah tersedia di project ini agar proses membuat menu baru lebih cepat, konsisten,
                            dan mudah dipelajari oleh developer lain.
                        </p>
                    </div>
                    <div class="col-lg-4 mt-4 mt-lg-0">
                        <div class="card bg-secondary border-0">
                            <div class="card-body p-4">
                                <h6 class="text-white mb-3">Peta Cepat</h6>
                                <p class="text-white text-sm mb-2">1. Buat / siapkan tabel migrasi</p>
                                <p class="text-white text-sm mb-2">2. Daftarkan menu di <code
                                        class="text-info">sys_dmenu</code></p>
                                <p class="text-white text-sm mb-2">3. Atur field di <code class="text-info">sys_table</code>
                                </p>
                                <p class="text-white text-sm mb-0">4. Beri akses lewat <code
                                        class="text-info">sys_auth</code></p>
                                @if (!empty($setup_app->file_docs ?? null))
                                    <a href="{{ asset('/storage' . '/' . $setup_app->file_docs) }}"
                                        class="btn bg-info text-white btn-sm w-100 mt-3 mb-0" target="_blank" download>
                                        Download PDF Docs
                                    </a>
                                @else
                                    <button type="button" class="btn bg-info text-white btn-sm w-100 mt-3 mb-0" disabled>
                                        PDF Docs Belum Diunggah
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-4 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5>Komponen Inti</h5>
                        <ul class="text-sm mb-0">
                            <li><code>sys_gmenu</code>: grup menu sidebar.</li>
                            <li><code>sys_dmenu</code>: daftar menu, url, icon, layout, tabel.</li>
                            <li><code>sys_table</code>: metadata field, validasi, query, posisi, dan tampilan.</li>
                            <li><code>sys_auth</code>: hak akses per role, termasuk <code>add</code>,
                                <code>edit</code>, <code>delete</code>, <code>print</code>,
                                <code>approval</code>, dan <code>posting</code>.
                            </li>
                            <li><code>sys_id</code> + <code>sys_counter</code>: generator ID otomatis.</li>
                            <li><code>sys_enum</code>: master enum layout, type, status, dan nilai default.</li>
                            <li><code>Function_Helper::resolveContentView()</code>: helper global pencari view konten
                                berdasarkan <code>sys_gmenu</code> aktif.</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5>Alur Routing</h5>
                        <ul class="text-sm mb-0">
                            <li><code>PageController</code> membaca <code>sys_dmenu.url</code>.</li>
                            <li>Jika <code>layout != manual</code>, framework mengarah ke controller layout terkait.</li>
                            <li>Contoh: <code>standr</code> ke <code>StandrController</code>, <code>transc</code> ke
                                <code>TranscController</code>, <code>listdt</code> ke <code>ListdtController</code>.
                            </li>
                            <li>Jika <code>manual</code>, view diambil langsung dari folder sesuai grup menu dan url.</li>
                            <li>Jika anda merubah posisi <code>gmenu</code> pada <code>list_menu</code> yang menggunakan
                                layout <code>standr</code>,
                                <code>master</code>, <code>report</code>,
                                <code>transc</code> dan <code>listdt</code> maka yang harus
                                lakukan adalah mengupdate gmnu di <code>sys_table</code> dan <code>sys_auth</code>.
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5>Seeder Referensi</h5>
                        <ul class="text-sm mb-0">
                            <li><code>example_gmenu</code>: semua menu contoh.</li>
                            <li><code>example_tabel_form_standard</code>: contoh layout standard.</li>
                            <li><code>example_tabel_form_master</code>: contoh layout master.</li>
                            <li><code>example_tabel_form_transaction</code>: contoh layout transaction.</li>
                            <li><code>menu_framework_docs</code>: menu dokumentasi framework.</li>
                            <li><code>example_insert_transaction</code>: sample data transaction untuk <code>trexam</code>.
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header pb-0">
                <h5 class="mb-0">Daftar Layout</h5>
            </div>
            <div class="card-body px-3 pt-0 pb-2">
                <div class="table-responsive">
                    <table class="table align-items-center mb-0">
                        <thead>
                            <tr>
                                <th>Layout</th>
                                <th>Fungsi</th>
                                <th>Controller / View</th>
                                <th>Contoh Menu</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>standr</code></td>
                                <td>CRUD satu tabel, form biasa, cocok untuk master sederhana.</td>
                                <td><code>StandrController</code></td>
                                <td>Layout - Standard (<code>msfrmd</code>)</td>
                            </tr>
                            <tr>
                                <td><code>master</code></td>
                                <td>CRUD dengan list lebih kaya, export, split posisi kiri-kanan.</td>
                                <td><code>MasterController</code></td>
                                <td>Layout - Master (<code>msfrmm</code>), Example Menu X (<code>dmenux</code>)</td>
                            </tr>
                            <tr>
                                <td><code>system</code></td>
                                <td>Header-detail metadata internal framework.</td>
                                <td><code>SystemController</code></td>
                                <td>System Auth (<code>authxx</code>), System Table (<code>tablex</code>)</td>
                            </tr>
                            <tr>
                                <td><code>sublnk</code></td>
                                <td>Sub menu / child data yang ditautkan dari menu lain.</td>
                                <td><code>SublnkController</code></td>
                                <td>Layout - Sublink (<code>sbexam</code>)</td>
                            </tr>
                            <tr>
                                <td><code>report</code></td>
                                <td>Filter report, query dinamis, result DataTable, export.</td>
                                <td><code>ReportController</code></td>
                                <td>Layout - Report (<code>rpexam</code>), Report Syslog (<code>rsyslg</code>)</td>
                            </tr>
                            <tr>
                                <td><code>transc</code></td>
                                <td>Transaksi header-detail dengan tabel <code>_h</code> dan <code>_d</code>, alur
                                    status, approval, posting, reverse, dan print preview PDF.</td>
                                <td><code>TranscController</code></td>
                                <td>Layout - Transaction (<code>trexam</code>)</td>
                            </tr>
                            <tr>
                                <td><code>listdt</code></td>
                                <td>Halaman list / dokumentasi tanpa CRUD, tetap lewat controller layout.</td>
                                <td><code>ListdtController</code></td>
                                <td>Framework Docs (<code>fwdocs</code>)</td>
                            </tr>
                            <tr>
                                <td><code>manual</code></td>
                                <td>Halaman bebas yang langsung menuju view spesifik tanpa controller layout.</td>
                                <td>View custom</td>
                                <td>Dashboard (<code>dashbr</code>), Report Seeder (<code>rpseed</code>)</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <h5 class="mb-0">Field Type Umum</h5>
                    </div>
                    <div class="card-body">
                        <ul class="text-sm mb-0">
                            <li><code>string</code>, <code>char</code>, <code>text</code>: input teks dasar.</li>
                            <li><code>number</code>, <code>currency</code>: angka dan nominal.</li>
                            <li><code>date</code>, <code>date2</code>: tanggal tunggal / rentang.</li>
                            <li><code>enum</code>: select option dari query.</li>
                            <li><code>search</code>: modal lookup berbasis query.</li>
                            <li><code>image</code>, <code>file</code>: upload file / gambar.</li>
                            <li><code>hidden</code>: nilai sistem yang tidak ditampilkan.</li>
                            <li><code>join</code>, <code>report</code>, <code>sublink</code>: kebutuhan khusus layout
                                tertentu.</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <h5 class="mb-0">Arti Kolom Penting di sys_table</h5>
                    </div>
                    <div class="card-body">
                        <ul class="text-sm mb-0">
                            <li><code>field</code>: nama kolom database.</li>
                            <li><code>alias</code>: label tampilan.</li>
                            <li><code>validate</code>: rule Laravel validation.</li>
                            <li><code>query</code>: sumber data untuk <code>enum/search/join/report</code>.</li>
                            <li><code>primary</code>: primary key field.</li>
                            <li><code>list</code>: tampil di list / tabel.</li>
                            <li><code>show</code>: tampil di form / view.</li>
                            <li><code>position</code>:
                                <br><code>0</code> standard,
                                <code>1</code> header,
                                <code>2</code> detail,
                                <code>3</code> left,
                                <code>4</code> right.
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header pb-0">
                <h5 class="mb-0">Fitur dan Kegunaan Tiap Layout</h5>
                <p class="text-sm text-muted mb-0 mt-2">
                    Baca bagian ini jika Anda ingin memilih layout yang paling cocok lebih dulu. Urutannya dibuat dari
                    layout yang paling umum dipakai sampai layout yang paling khusus.
                </p>
            </div>
            <div class="card-body">
                <div class="accordion" id="layoutFeatureAccordion">
                    <div class="accordion-item border mb-3">
                        <h2 class="accordion-header" id="featureStandr">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                data-bs-target="#featureCollapseStandr" aria-expanded="true"
                                aria-controls="featureCollapseStandr">
                                Layout Standard (<code>standr</code>)
                                <span class="badge bg-success ms-3">Paling Umum</span>
                            </button>
                        </h2>
                        <div id="featureCollapseStandr" class="accordion-collapse collapse show"
                            aria-labelledby="featureStandr" data-bs-parent="#layoutFeatureAccordion">
                            <div class="accordion-body text-sm">
                                <p><strong>Kegunaan:</strong> menu CRUD satu tabel yang sederhana dan cepat dipakai untuk
                                    master data umum.</p>
                                <p class="text-muted mb-2"><strong>Gunakan jika:</strong> Anda hanya butuh satu tabel,
                                    form sederhana, dan alur CRUD standar.</p>
                                <ul class="mb-0">
                                    <li>Memakai satu tabel utama.</li>
                                    <li>Mendukung add, edit, show, nonaktifkan, dan upload file / image.</li>
                                    <li>Mendukung validasi dari <code>sys_table.validate</code>.</li>
                                    <li>Bisa memakai <code>enum</code>, <code>search</code>, dan generate ID.</li>
                                    <li>Cocok untuk form standar tanpa detail child.</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item border mb-3">
                        <h2 class="accordion-header" id="featureMaster">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#featureCollapseMaster" aria-expanded="false"
                                aria-controls="featureCollapseMaster">
                                Layout Master (<code>master</code>)
                                <span class="badge bg-info ms-3">List Lebih Kaya</span>
                            </button>
                        </h2>
                        <div id="featureCollapseMaster" class="accordion-collapse collapse" aria-labelledby="featureMaster"
                            data-bs-parent="#layoutFeatureAccordion">
                            <div class="accordion-body text-sm">
                                <p><strong>Kegunaan:</strong> menu CRUD satu tabel dengan list yang lebih kaya dan nyaman
                                    untuk data operasional.</p>
                                <p class="text-muted mb-2"><strong>Gunakan jika:</strong> Anda masih memakai satu tabel,
                                    tetapi butuh list, filter, dan komponen form yang lebih fleksibel.</p>
                                <ul class="mb-0">
                                    <li>Toolbar list mendukung search, pagination, dan export.</li>
                                    <li>Form bisa dibagi posisi kiri dan kanan lewat <code>position 3</code> dan
                                        <code>4</code>.
                                    </li>
                                    <li>Mendukung komponen <code>search</code>, <code>enum</code>,
                                        <code>custom-select</code>, dan <code>select-multiple</code>.
                                    </li>
                                    <li>Cocok untuk menu master yang butuh list lebih fleksibel dibanding
                                        <code>standr</code>.
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item border mb-3">
                        <h2 class="accordion-header" id="featureSystem">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#featureCollapseSystem" aria-expanded="false"
                                aria-controls="featureCollapseSystem">
                                Layout System (<code>system</code>)
                                <span class="badge bg-warning ms-3">Konfigurasi</span>
                            </button>
                        </h2>
                        <div id="featureCollapseSystem" class="accordion-collapse collapse"
                            aria-labelledby="featureSystem" data-bs-parent="#layoutFeatureAccordion">
                            <div class="accordion-body text-sm">
                                <p><strong>Kegunaan:</strong> menu pengaturan internal framework dan tabel metadata
                                    sistem.</p>
                                <p class="text-muted mb-2"><strong>Gunakan jika:</strong> menu yang dibuat berhubungan
                                    langsung dengan konfigurasi aplikasi atau tabel sistem.</p>
                                <ul class="mb-0">
                                    <li>Dipakai untuk menu inti seperti auth, table, role, setup, dan sejenisnya.</li>
                                    <li>Mendukung pola CRUD seperti layout lain, tetapi fokusnya untuk konfigurasi
                                        framework.</li>
                                    <li>Cocok saat field dan prosesnya terkait pengaturan aplikasi, bukan transaksi
                                        bisnis.</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item border mb-3">
                        <h2 class="accordion-header" id="featureSublnk">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#featureCollapseSublnk" aria-expanded="false"
                                aria-controls="featureCollapseSublnk">
                                Layout Sublink (<code>sublnk</code>)
                                <span class="badge bg-secondary ms-3">Child Data</span>
                            </button>
                        </h2>
                        <div id="featureCollapseSublnk" class="accordion-collapse collapse"
                            aria-labelledby="featureSublnk" data-bs-parent="#layoutFeatureAccordion">
                            <div class="accordion-body text-sm">
                                <p><strong>Kegunaan:</strong> child menu yang dibuka dari menu induk untuk menampilkan
                                    data turunan.</p>
                                <p class="text-muted mb-2"><strong>Gunakan jika:</strong> data hanya bermakna ketika
                                    dibuka dari parent atau transaksi induknya.</p>
                                <ul class="mb-0">
                                    <li>Dipakai ketika satu menu bergantung pada data parent.</li>
                                    <li>Cocok untuk daftar detail, referensi turunan, atau shortcut data terkait.</li>
                                    <li>Biasanya dipanggil dari konteks menu lain, bukan berdiri sendiri dari awal.</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item border mb-3">
                        <h2 class="accordion-header" id="featureReport">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#featureCollapseReport" aria-expanded="false"
                                aria-controls="featureCollapseReport">
                                Layout Report (<code>report</code>)
                                <span class="badge bg-primary ms-3">Filter & Export</span>
                            </button>
                        </h2>
                        <div id="featureCollapseReport" class="accordion-collapse collapse"
                            aria-labelledby="featureReport" data-bs-parent="#layoutFeatureAccordion">
                            <div class="accordion-body text-sm">
                                <p><strong>Kegunaan:</strong> halaman filter dan hasil report berbasis query dinamis.</p>
                                <p class="text-muted mb-2"><strong>Gunakan jika:</strong> tujuan utamanya adalah mencari,
                                    menyaring, menampilkan, dan mengekspor hasil query.</p>
                                <ul class="mb-0">
                                    <li>Filter report dibentuk dari metadata <code>sys_table</code>.</li>
                                    <li>Mendukung <code>search</code>, <code>enum</code>, date range, dan query khusus.
                                    </li>
                                    <li>Hasil report dapat ditampilkan dalam tabel dan diexport.</li>
                                    <li>Cocok untuk menu analisa, monitoring, dan laporan operasional.</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item border mb-3">
                        <h2 class="accordion-header" id="featureTransc">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#featureCollapseTransc" aria-expanded="false"
                                aria-controls="featureCollapseTransc">
                                Layout Transaction (<code>transc</code>)
                                <span class="badge bg-danger ms-3">Header Detail</span>
                            </button>
                        </h2>
                        <div id="featureCollapseTransc" class="accordion-collapse collapse"
                            aria-labelledby="featureTransc" data-bs-parent="#layoutFeatureAccordion">
                            <div class="accordion-body text-sm">
                                <p><strong>Kegunaan:</strong> transaksi header-detail dengan alur pilih transaksi, add,
                                    edit, show, hapus, dan print.</p>
                                <p class="text-muted mb-2"><strong>Gunakan jika:</strong> satu data utama memiliki banyak
                                    baris detail dan perlu alur input transaksi lengkap.</p>
                                <ul class="mb-0">
                                    <li>Nama tabel cukup base name, misal <code>trs_rekap_tagihan</code>.</li>
                                    <li>Framework akan baca <code>_h</code> sebagai header dan <code>_d</code> sebagai
                                        detail.</li>
                                    <li>Field <code>position = 1</code> dipakai untuk header dan <code>position = 2</code>
                                        untuk detail.</li>
                                    <li>Status transaksi mendukung alur
                                        <code>E = Entry</code>,
                                        <code>A = Approve</code>,
                                        <code>R = Reject</code>,
                                        <code>F = Finish</code>,
                                        <code>C = Cancel</code>.
                                    </li>
                                    <li>Detail row bisa tambah / hapus dinamis.</li>
                                    <li><code>item</code> otomatis diisi kelipatan <code>10, 20, 30...</code>.</li>
                                    <li>Support <code>search</code> dan <code>enum</code> di header maupun detail,
                                        termasuk <code>custom-select</code> dan <code>select-multiple</code>.</li>
                                    <li>Lookup transaksi di halaman list memakai endpoint
                                        <code>/form-transaction-options/{page}</code>.
                                    </li>
                                    <li>Lookup transaksi di modal list mengikuti query metadata
                                        <code>sys_table</code>, termasuk kolom status dan badge warnanya.</li>
                                    <li>Tombol <code>Approve</code>, <code>UnApprove</code>,
                                        <code>Reject</code>, dan <code>Ajukan Kembali</code> membutuhkan hak
                                        <code>approval</code> di
                                        <code>sys_auth</code>.
                                    </li>
                                    <li>Tombol <code>Posting</code> dan <code>Reverse</code> membutuhkan hak
                                        <code>posting</code> di <code>sys_auth</code>.
                                    </li>
                                    <li>Flow approval dan posting bersifat fleksibel:
                                        jika tidak ada hak <code>approval</code> aktif pada menu itu, maka
                                        <code>Posting</code> bisa langsung dipakai dari status <code>E</code>.
                                        Jika tidak ada hak <code>posting</code> aktif, maka flow approval tetap bisa
                                        dipakai tanpa proses posting terpisah.
                                    </li>
                                    <li>Tombol aksi tampil bertahap sesuai status:
                                        <code>Approve</code> dan <code>Reject</code> saat <code>E</code> jika flow
                                        approval aktif,
                                        <code>UnApprove</code> saat <code>A</code>,
                                        <code>Ajukan Kembali</code> saat <code>R</code>,
                                        <code>Posting</code> saat <code>A</code> atau langsung <code>E</code>
                                        jika approval tidak dipakai,
                                        <code>Reverse</code> saat <code>F</code>.
                                    </li>
                                    <li><code>Edit</code> dan <code>Delete</code> otomatis dikunci saat status sudah
                                        <code>A</code>, <code>F</code>, atau <code>C</code>.
                                    </li>
                                    <li>Tombol print sudah diarahkan ke preview PDF portrait.</li>
                                    <li>Modal transaksi, detail dynamic row, preview show, dan print PDF semua memakai
                                        metadata yang sama agar satu kali setting bisa dipakai di banyak halaman.</li>
                                    <li>Contoh menu: Layout - Transaction (<code>trexam</code>).</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item border mb-3">
                        <h2 class="accordion-header" id="featureListdt">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#featureCollapseListdt" aria-expanded="false"
                                aria-controls="featureCollapseListdt">
                                Layout List Data (<code>listdt</code>)
                                <span class="badge bg-dark ms-3">Informasi</span>
                            </button>
                        </h2>
                        <div id="featureCollapseListdt" class="accordion-collapse collapse"
                            aria-labelledby="featureListdt" data-bs-parent="#layoutFeatureAccordion">
                            <div class="accordion-body text-sm">
                                <p><strong>Kegunaan:</strong> halaman list atau dokumentasi tanpa CRUD dinamis.</p>
                                <p class="text-muted mb-2"><strong>Gunakan jika:</strong> Anda hanya perlu menampilkan
                                    konten informasi atau list statis dalam satu halaman.</p>
                                <ul class="mb-0">
                                    <li>Fokus pada satu view konten <code>list.blade.php</code>.</li>
                                    <li>Tidak memakai add, edit, show, atau delete bawaan framework.</li>
                                    <li>Cocok untuk halaman informasi, dokumentasi, petunjuk, atau dashboard data
                                        ringan.</li>
                                    <li>Resolver view mendukung perpindahan <code>gmenu</code>.</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item border">
                        <h2 class="accordion-header" id="featureManual">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#featureCollapseManual" aria-expanded="false"
                                aria-controls="featureCollapseManual">
                                Layout Manual (<code>manual</code>)
                                <span class="badge bg-dark ms-3">Custom</span>
                            </button>
                        </h2>
                        <div id="featureCollapseManual" class="accordion-collapse collapse"
                            aria-labelledby="featureManual" data-bs-parent="#layoutFeatureAccordion">
                            <div class="accordion-body text-sm">
                                <p><strong>Kegunaan:</strong> halaman bebas yang tidak ingin mengikuti engine CRUD dinamis.
                                </p>
                                <p class="text-muted mb-2"><strong>Gunakan jika:</strong> kebutuhan halaman terlalu khusus
                                    dan akan lebih cepat dibuat manual daripada dipaksa ke layout dinamis.</p>
                                <ul class="mb-0">
                                    <li>Developer bebas menentukan view, query, dan interaksi sendiri.</li>
                                    <li>Cocok untuk dashboard, landing page internal, utility page, atau report khusus.
                                    </li>
                                    <li>Dipakai ketika kebutuhan halaman terlalu spesifik untuk dipaksa ke layout
                                        standar framework.</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header pb-0">
                <h5 class="mb-0">Fallback Framework</h5>
            </div>
            <div class="card-body">
                <ul class="text-sm mb-0">
                    <li><code>Function_Helper::resolveContentView()</code> dipakai layout <code>listdt</code> untuk mencari
                        view berdasarkan daftar <code>sys_gmenu</code> aktif.</li>
                    <li><code>StandrController</code> punya fallback metadata <code>sys_table</code> berdasarkan
                        <code>dmenu</code> bila <code>gmenu</code> menu dipindah tetapi metadata belum ikut dipindah.
                    </li>
                    <li><code>TranscController</code> juga memakai fallback metadata <code>sys_table</code>
                        berdasarkan <code>dmenu</code>, sehingga menu transaksi tetap bisa membaca field walau posisi
                        <code>gmenu</code> dipindah.
                    </li>
                    <li><code>PageController::searchOptions()</code> sekarang bisa membaca field yang punya
                        <code>query</code> walau tidak literal bertipe <code>search</code>, agar cocok untuk lookup
                        transaksi.
                    </li>
                    <li><code>PageController::transactionOptions()</code> membangun modal pilih transaksi dari query
                        metadata dan sekaligus menyiapkan URL aksi <code>show</code>, <code>edit</code>,
                        <code>delete</code>, <code>approve</code>, <code>unapprove</code>, <code>reject</code>,
                        <code>posting</code>, <code>reverse</code>, dan <code>print</code>.
                    </li>
                </ul>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header pb-0">
                <h5 class="mb-0">Flow Status Transaksi</h5>
                <p class="text-sm text-muted mb-0 mt-2">
                    Gunakan bagian ini sebagai panduan cepat untuk memahami kapan tombol aksi transaksi muncul dan apa
                    dampaknya ke status dokumen.
                </p>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-5 mb-3 mb-lg-0">
                        <div class="table-responsive">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th>Kode</th>
                                        <th>Arti</th>
                                        <th>Badge</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><code>E</code></td>
                                        <td>Entry</td>
                                        <td><span class="badge bg-secondary">Entry</span></td>
                                    </tr>
                                    <tr>
                                        <td><code>A</code></td>
                                        <td>Approve</td>
                                        <td><span class="badge bg-info">Approve</span></td>
                                    </tr>
                                    <tr>
                                        <td><code>R</code></td>
                                        <td>Reject</td>
                                        <td><span class="badge bg-warning">Reject</span></td>
                                    </tr>
                                    <tr>
                                        <td><code>F</code></td>
                                        <td>Finish</td>
                                        <td><span class="badge bg-success">Finish</span></td>
                                    </tr>
                                    <tr>
                                        <td><code>C</code></td>
                                        <td>Cancel</td>
                                        <td><span class="badge bg-danger">Cancel</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-lg-7">
                        <div class="card border shadow-none h-100">
                            <div class="card-body">
                                <h6 class="mb-3">Urutan Proses</h6>
                                <p class="text-sm mb-3">
                                    <span class="badge bg-secondary">E</span>
                                    <i class="fas fa-arrow-right text-secondary mx-1"></i>
                                    <span class="badge bg-info">A</span>
                                    <span class="mx-2 text-secondary">/</span>
                                    <span class="badge bg-warning">R</span>
                                    <i class="fas fa-arrow-right text-secondary mx-1"></i>
                                    <span class="badge bg-success">F</span>
                                    <i class="fas fa-arrow-right text-secondary mx-1"></i>
                                    <span class="badge bg-danger">C</span>
                                </p>
                                <ul class="text-sm mb-0">
                                    <li>Status awal transaksi umumnya dimulai dari <code>E</code> atau Entry.</li>
                                    <li>Tombol <code>Approve</code> hanya muncul jika user punya hak
                                        <code>approval</code> dan status masih <code>E</code>.
                                    </li>
                                    <li>Tombol <code>Reject</code> juga muncul saat status <code>E</code> dan akan
                                        meminta alasan reject melalui textarea sebelum status berubah menjadi
                                        <code>R</code>.
                                    </li>
                                    <li>Tombol <code>UnApprove</code> muncul saat status <code>A</code> dan akan
                                        mengembalikan transaksi ke <code>E</code>.
                                    </li>
                                    <li>Tombol <code>Ajukan Kembali</code> muncul saat status <code>R</code> dan akan
                                        mengembalikan transaksi ke <code>E</code> agar bisa diproses approval lagi.
                                    </li>
                                    <li>Tombol <code>Posting</code> hanya muncul jika user punya hak
                                        <code>posting</code> dan status sudah <code>A</code>, atau langsung dari
                                        <code>E</code> jika menu itu memang tidak memakai flow approval terpisah.
                                    </li>
                                    <li>Jika menu tidak punya hak <code>posting</code> aktif, maka alur approval akan
                                        berhenti di <code>A</code> atau <code>R</code> sampai user melakukan
                                        <code>UnApprove</code> dari <code>A</code> atau
                                        <code>Ajukan Kembali</code> dari <code>R</code> untuk kembali ke
                                        <code>E</code>.
                                    </li>
                                    <li>Tombol <code>Reverse</code> hanya muncul jika user punya hak
                                        <code>posting</code> dan status sudah <code>F</code>.
                                    </li>
                                    <li>Saat status sudah <code>A</code>, <code>F</code>, atau <code>C</code>, tombol
                                        <code>Edit</code> dan <code>Delete</code> otomatis dikunci oleh UI dan backend.
                                    </li>
                                    <li>Modal list transaksi akan menampilkan badge status agar user mudah mengenali
                                        posisi dokumen sebelum memilihnya.</li>
                                </ul>
                                <div class="table-responsive mt-3">
                                    <table class="table align-items-center mb-0">
                                        <thead>
                                            <tr>
                                                <th>Skenario</th>
                                                <th>Flow</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><code>approval = 1</code> dan <code>posting = 1</code></td>
                                                <td><code>E -> A / R</code>, lalu <code>A -> F -> C</code> dan
                                                    <code>R -> E</code></td>
                                            </tr>
                                            <tr>
                                                <td>Hanya <code>posting = 1</code></td>
                                                <td><code>E -> F -> C</code></td>
                                            </tr>
                                            <tr>
                                                <td>Hanya <code>approval = 1</code></td>
                                                <td><code>E -> A / R -> E</code></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header pb-0">
                <h5 class="mb-0">Ringkasan Alur Membuat Menu Baru</h5>
                <p class="text-sm text-muted mb-0 mt-2">
                    Jika Anda hanya butuh gambaran cepat, cukup ikuti tujuh langkah ini. Jika perlu panduan detail per
                    layout, lanjutkan ke accordion di bawahnya.
                </p>
            </div>
            <div class="card-body">
                <ol class="text-sm mb-0">
                    <li>Tentukan layout yang ingin dipakai: <code>standr</code>, <code>master</code>, <code>report</code>,
                        <code>transc</code>, <code>listdt</code>, atau <code>manual</code>.
                    </li>
                    <li>Buat migration tabel sesuai kebutuhan.</li>
                    <li>Tambahkan menu ke <code>sys_dmenu</code>.</li>
                    <li>Tambahkan akses role ke <code>sys_auth</code>.</li>
                    <li>Tambahkan metadata field ke <code>sys_table</code>.</li>
                    <li>Jika perlu ID otomatis, isi <code>sys_id</code> dan <code>sys_counter</code>.</li>
                    <li>Untuk transaksi, siapkan dua tabel dengan suffix <code>_h</code> dan <code>_d</code>.</li>
                </ol>
            </div>
        </div>

        <div class="card">
            <div class="card-header pb-0">
                <h5 class="mb-0">Menu Referensi yang Sudah Ada</h5>
            </div>
            <div class="card-body">
                <ul class="text-sm mb-0">
                    <li>Layout - Standard (<code>msfrmd</code>): contoh standard.</li>
                    <li>Layout - Master (<code>msfrmm</code>): contoh master.</li>
                    <li>Layout - System (<code>msfrms</code>): contoh system.</li>
                    <li>Layout - Report (<code>rpexam</code>): contoh report.</li>
                    <li>Layout - Sublink (<code>sbexam</code>): contoh sublink.</li>
                    <li>Layout - Transaction (<code>trexam</code>): contoh transaction sederhana dengan header search dan
                        detail search/enum.</li>
                    <li>Framework Docs (<code>fwdocs</code>): dokumentasi framework dengan layout <code>listdt</code>.</li>
                </ul>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header pb-0">
                <h5 class="mb-0">Contoh Langkah Teknis Membuat Menu Baru</h5>
                <p class="text-sm text-muted mb-0 mt-2">
                    Bagian ini menjelaskan alur teknis yang biasa dipakai di MSJFramework sampai menu benar-benar bisa
                    dibuka.
                    Urutan bacanya disarankan:
                    <br>1. pilih layout yang sesuai,
                    2. baca langkah teknis layout tersebut,
                    3. buat migration dan seeder,
                    4. jalankan <code>migrate:fresh --seed</code> atau <code>db:seed</code>,
                    5. uji menu dari sidebar.
                </p>
            </div>
            <div class="card-body">
                <div class="accordion" id="docsLayoutAccordion">
                    <div class="accordion-item border mb-3">
                        <h2 class="accordion-header" id="headingStandr">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseStandr" aria-expanded="true" aria-controls="collapseStandr">
                                Layout Standard (<code>standr</code>)
                            </button>
                        </h2>
                        <div id="collapseStandr" class="accordion-collapse collapse show" aria-labelledby="headingStandr"
                            data-bs-parent="#docsLayoutAccordion">
                            <div class="accordion-body text-sm">
                                <p><strong>Cocok untuk:</strong> CRUD satu tabel, form sederhana, master data umum.</p>
                                <ol class="mb-3">
                                    <li>Buat migration satu tabel, misalnya <code>master_karyawan</code>.</li>
                                    <li>Pastikan ada primary key yang jelas, misalnya <code>nik</code> atau
                                        <code>id</code>.
                                    </li>
                                    <li>Buat seeder menu ke <code>sys_dmenu</code> dengan:
                                        <br><code>layout = standr</code>,
                                        <code>tabel = master_karyawan</code>,
                                        <code>url</code>,
                                        <code>dmenu</code>,
                                        <code>gmenu</code>.
                                    </li>
                                    <li>Tambahkan akses role ke <code>sys_auth</code>.</li>
                                    <li>Isi <code>sys_table</code> untuk semua field yang tampil di list, add, edit,
                                        dan show.
                                        <br>Gunakan <code>position = 0</code>.
                                    </li>
                                    <li>Set field primary dengan <code>primary = 1</code>.</li>
                                    <li>Jika ID auto generate, isi <code>sys_id</code> lalu pastikan counter awal
                                        tersedia di <code>sys_counter</code>.</li>
                                    <li>Daftarkan seeder ke <code>DatabaseSeeder</code> bila ingin ikut saat
                                        <code>migrate:fresh --seed</code>.
                                    </li>
                                </ol>
                                <p class="mb-0"><strong>Contoh:</strong> Layout - Standard (<code>msfrmd</code>).</p>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item border mb-3">
                        <h2 class="accordion-header" id="headingMaster">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseMaster" aria-expanded="false" aria-controls="collapseMaster">
                                Layout Master (<code>master</code>)
                            </button>
                        </h2>
                        <div id="collapseMaster" class="accordion-collapse collapse" aria-labelledby="headingMaster"
                            data-bs-parent="#docsLayoutAccordion">
                            <div class="accordion-body text-sm">
                                <p><strong>Cocok untuk:</strong> CRUD satu tabel dengan list lebih kaya, export, dan
                                    toolbar data.</p>
                                <ol class="mb-3">
                                    <li>Langkah dasarnya sama dengan <code>standr</code>: migration tabel, seeder
                                        <code>sys_dmenu</code>, <code>sys_auth</code>, dan <code>sys_table</code>.
                                    </li>
                                    <li>Pada <code>sys_dmenu</code> set <code>layout = master</code>.</li>
                                    <li>Gunakan <code>position = 3</code> untuk field kiri dan <code>position = 4</code>
                                        untuk field kanan bila form ingin terbagi dua sisi.</li>
                                    <li>Field list yang ingin tampil di tabel harus <code>list = 1</code>.</li>
                                    <li>Jika ada lookup, isi <code>query</code> pada field bertipe
                                        <code>search</code> atau <code>enum</code>.
                                    </li>
                                    <li>Bila menu dipindah <code>gmenu</code>-nya, framework punya fallback metadata
                                        berdasarkan <code>dmenu</code>, tetapi tetap disarankan metadata
                                        <code>sys_table</code> ikut dirapikan.
                                    </li>
                                </ol>
                                <p class="mb-0"><strong>Contoh:</strong> Layout - Master (<code>msfrmm</code>).</p>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item border mb-3">
                        <h2 class="accordion-header" id="headingSystem">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseSystem" aria-expanded="false" aria-controls="collapseSystem">
                                Layout System (<code>system</code>)
                            </button>
                        </h2>
                        <div id="collapseSystem" class="accordion-collapse collapse" aria-labelledby="headingSystem"
                            data-bs-parent="#docsLayoutAccordion">
                            <div class="accordion-body text-sm">
                                <p><strong>Cocok untuk:</strong> menu internal framework yang butuh pola metadata
                                    sistem.</p>
                                <ol class="mb-3">
                                    <li>Buat tabel dan field sesuai kebutuhan internal.</li>
                                    <li>Set menu ke <code>layout = system</code>.</li>
                                    <li>Definisikan field di <code>sys_table</code> seperti layout CRUD lain.</li>
                                    <li>Gunakan tipe field khusus bila memang dibutuhkan oleh pengaturan sistem.</li>
                                    <li>Karena biasanya dipakai admin, pastikan role yang boleh mengakses benar-benar
                                        dibatasi di <code>sys_auth</code>.</li>
                                </ol>
                                <p class="mb-0"><strong>Contoh:</strong> System Auth (<code>authxx</code>), System Table
                                    (<code>tablex</code>).</p>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item border mb-3">
                        <h2 class="accordion-header" id="headingSublnk">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseSublnk" aria-expanded="false" aria-controls="collapseSublnk">
                                Layout Sublink (<code>sublnk</code>)
                            </button>
                        </h2>
                        <div id="collapseSublnk" class="accordion-collapse collapse" aria-labelledby="headingSublnk"
                            data-bs-parent="#docsLayoutAccordion">
                            <div class="accordion-body text-sm">
                                <p><strong>Cocok untuk:</strong> child data yang dibuka dari menu induk.</p>
                                <ol class="mb-3">
                                    <li>Buat tabel child lebih dulu dan tentukan foreign key ke tabel induk.</li>
                                    <li>Set menu child ke <code>layout = sublnk</code>.</li>
                                    <li>Isi metadata <code>sys_table</code> untuk field child yang tampil.</li>
                                    <li>Pastikan field penghubung ke parent tersedia dan konsisten dengan link yang
                                        dikirim dari menu induk.</li>
                                    <li>Uji dari menu parent, bukan hanya dari URL langsung.</li>
                                </ol>
                                <p class="mb-0"><strong>Contoh:</strong> Layout - Sublink (<code>sbexam</code>).</p>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item border mb-3">
                        <h2 class="accordion-header" id="headingReport">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseReport" aria-expanded="false" aria-controls="collapseReport">
                                Layout Report (<code>report</code>)
                            </button>
                        </h2>
                        <div id="collapseReport" class="accordion-collapse collapse" aria-labelledby="headingReport"
                            data-bs-parent="#docsLayoutAccordion">
                            <div class="accordion-body text-sm">
                                <p><strong>Cocok untuk:</strong> filter report, query dinamis, hasil tabel dan export.
                                </p>
                                <ol class="mb-3">
                                    <li>Tidak wajib membuat tabel baru jika report hanya membaca data yang sudah ada.
                                    </li>
                                    <li>Buat menu di <code>sys_dmenu</code> dengan <code>layout = report</code>.</li>
                                    <li>Di <code>sys_table</code>, field yang tampil pada halaman filter harus
                                        <code>show = 1</code>.
                                    </li>
                                    <li>Isi <code>query</code> untuk field <code>search</code>, <code>enum</code>, atau
                                        lookup report lainnya.</li>
                                    <li>Pastikan query hasil report mengembalikan alias kolom yang stabil agar tabel
                                        result dan export konsisten.</li>
                                    <li>Uji filter, modal search, dan export setelah metadata selesai dibuat.</li>
                                </ol>
                                <p class="mb-0"><strong>Contoh:</strong> Layout - Report (<code>rpexam</code>), Report
                                    Syslog (<code>rsyslg</code>).</p>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item border mb-3">
                        <h2 class="accordion-header" id="headingTransc">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseTransc" aria-expanded="false" aria-controls="collapseTransc">
                                Layout Transaction (<code>transc</code>)
                            </button>
                        </h2>
                        <div id="collapseTransc" class="accordion-collapse collapse" aria-labelledby="headingTransc"
                            data-bs-parent="#docsLayoutAccordion">
                            <div class="accordion-body text-sm">
                                <p><strong>Cocok untuk:</strong> transaksi header-detail dengan add/edit/show/print.
                                </p>
                                <ol class="mb-3">
                                    <li>Tentukan nama base tabel, misalnya <code>example_transaction</code>.</li>
                                    <li>Buat dua tabel:
                                        <br><code>example_transaction_h</code> untuk header,
                                        <code>example_transaction_d</code> untuk detail.
                                    </li>
                                    <li>Tentukan primary key header. Jika auto generate, siapkan format di
                                        <code>sys_id</code>.
                                    </li>
                                    <li>Pastikan tabel detail punya field foreign key yang mengarah ke primary key
                                        header, misalnya <code>idtrx</code> atau <code>id_tanterima</code>.</li>
                                    <li>Tambahkan menu ke <code>sys_dmenu</code> dengan:
                                        <br><code>layout = transc</code>,
                                        <code>tabel = example_transaction</code>.
                                    </li>
                                    <li>Isi <code>sys_auth</code> untuk akses add, edit, delete, dan print.</li>
                                    <li>Jika transaksi memakai proses approval bertahap, isi juga kolom
                                        <code>approval</code> dan <code>posting</code> di <code>sys_auth</code>.
                                    </li>
                                    <li>Isi <code>sys_table</code>:
                                        <br><code>position = 1</code> untuk header,
                                        <code>position = 2</code> untuk detail.
                                    </li>
                                    <li>Field primary header harus <code>primary = 1</code>.</li>
                                    <li>Jika input pilih transaksi di list ingin pakai query custom, isi
                                        <code>query</code> pada field primary header atau field header bertipe
                                        <code>search</code>.
                                    </li>
                                    <li>Untuk detail dinamis, sediakan field <code>item</code> bila ingin urutan
                                        otomatis <code>10, 20, 30...</code>.</li>
                                    <li>Jika ada <code>search</code> atau <code>enum</code> di detail, isi query lookup
                                        di metadata agar modal dan select dapat memuat data via AJAX.</li>
                                    <li>Jika transaksi memakai proses reject, siapkan kolom seperti
                                        <code>remark</code> untuk menyimpan alasan reject dan tambahkan metadata field
                                        yang sesuai di header maupun detail bila memang ingin ikut dilacak.
                                        Pada contoh saat ini, <code>remark</code> disimpan untuk proses reject dan
                                        tidak ditampilkan di halaman tambah, edit, maupun show biasa.</li>
                                    <li>Jika modal pilih transaksi di list ingin menampilkan status yang rapi, gunakan
                                        query lookup dengan <code>CASE WHEN</code> untuk mengubah kode status menjadi
                                        label seperti Entry, Approve, Reject, Finish, dan Cancel.</li>
                                    <li>Flow status bawaan yang saat ini dipakai adalah
                                        <code>E -> A / R</code>, lalu <code>A -> F -> C</code> untuk menu yang memakai
                                        approval dan posting sekaligus. Jika hanya salah satu flow yang dipakai,
                                        sesuaikan rule bisnisnya, misalnya <code>E -> F -> C</code> untuk posting saja
                                        atau <code>E -> A / R -> E</code> untuk approval saja.</li>
                                    <li>Setelah status masuk <code>A</code>, <code>F</code>, atau <code>C</code>,
                                        tombol <code>Edit</code> dan <code>Delete</code> otomatis dikunci oleh UI dan
                                        backend.</li>
                                    <li>Setelah seeder dijalankan, uji alur lengkap:
                                        <br>list,
                                        pilih transaksi,
                                        add,
                                        edit,
                                        hapus,
                                        approve,
                                        unapprove,
                                        reject,
                                        posting,
                                        reverse,
                                        show,
                                        print preview PDF.
                                    </li>
                                </ol>
                                <p class="mb-0"><strong>Contoh:</strong> Layout - Transaction (<code>trexam</code>).</p>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item border mb-3">
                        <h2 class="accordion-header" id="headingListdt">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseListdt" aria-expanded="false" aria-controls="collapseListdt">
                                Layout List Data (<code>listdt</code>)
                            </button>
                        </h2>
                        <div id="collapseListdt" class="accordion-collapse collapse" aria-labelledby="headingListdt"
                            data-bs-parent="#docsLayoutAccordion">
                            <div class="accordion-body text-sm">
                                <p><strong>Cocok untuk:</strong> halaman dokumentasi atau halaman list statis tanpa CRUD.
                                </p>
                                <ol class="mb-3">
                                    <li>Buat menu di <code>sys_dmenu</code> dengan <code>layout = listdt</code>.</li>
                                    <li>Siapkan view konten dengan pola
                                        <code>resources/views/{gmenu}/{url}/list.blade.php</code>.
                                    </li>
                                    <li>Jika menu dipindah ke <code>gmenu</code> lain, resolver view akan mencoba
                                        mencari kandidat berdasarkan semua <code>sys_gmenu</code> aktif.</li>
                                    <li>Layout ini tidak menyiapkan add, edit, delete, atau show. Isi halaman sepenuhnya
                                        dikendalikan oleh view.</li>
                                    <li>Sangat cocok untuk dokumentasi seperti <code>fwdocs</code>.</li>
                                </ol>
                                <p class="mb-0"><strong>Contoh:</strong> Framework Docs (<code>fwdocs</code>).</p>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item border">
                        <h2 class="accordion-header" id="headingManual">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseManual" aria-expanded="false" aria-controls="collapseManual">
                                Layout Manual (<code>manual</code>)
                            </button>
                        </h2>
                        <div id="collapseManual" class="accordion-collapse collapse" aria-labelledby="headingManual"
                            data-bs-parent="#docsLayoutAccordion">
                            <div class="accordion-body text-sm">
                                <p><strong>Cocok untuk:</strong> halaman bebas yang memang punya view atau logic sendiri.
                                </p>
                                <ol class="mb-3">
                                    <li>Buat menu di <code>sys_dmenu</code> dengan <code>layout = manual</code>.</li>
                                    <li>Siapkan view sesuai kebutuhan menu, biasanya di folder yang memang dirancang
                                        khusus untuk halaman tersebut.</li>
                                    <li>Layout ini tidak mengikuti engine CRUD dinamis, jadi logika form, query, atau
                                        komponen tambahan Anda kelola sendiri.</li>
                                    <li>Gunakan layout ini bila kebutuhan halaman terlalu khusus dan tidak cocok dipaksa
                                        ke <code>standr</code>, <code>master</code>, <code>report</code>, atau
                                        <code>transc</code>.
                                    </li>
                                </ol>
                                <p class="mb-0"><strong>Contoh:</strong> Dashboard (<code>dashbr</code>), Report Seeder
                                    (<code>rpseed</code>).</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection