From bfb3d277edacfef8740d9fc1e07ad884c24bc04f Mon Sep 17 00:00:00 2001
From: Kevin Hendrawan <projectkevin97@gmail.com>
Date: Mon, 1 Dec 2025 23:19:42 +0700
Subject: [PATCH] feat(CMS) : Table Panduan & Helpdesk

---
 Controllers/Main/CmsController.cs |  59 ++++++++
 Views/Main/Cms/Index.cshtml       | 221 +++++++++++++++++++++++++++++-
 2 files changed, 276 insertions(+), 4 deletions(-)

diff --git a/Controllers/Main/CmsController.cs b/Controllers/Main/CmsController.cs
index a3ea14e..73c61f1 100644
--- a/Controllers/Main/CmsController.cs
+++ b/Controllers/Main/CmsController.cs
@@ -160,6 +160,65 @@ namespace BankSampahApp.Controllers.Main
             };
 
 
+            var response = new
+            {
+                data = data
+            };
+
+            return Json(response);
+        }
+
+        [HttpGet]
+        public IActionResult TablePanduan(){
+            var data = new[]
+            {
+                new{
+                    judul = "Judul Panduan 1",
+                    jenis = "Dokumen",
+                    dokumen = "<a href=\"#\" class=\"btn bg-gray-500 text-white rounded-lg\"><i class=\"ph ph-file-text\"></i></a>",
+                    aksi = "<div class=\"flex gap-2\">" +
+                        "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                        "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                        "</div>",
+                },
+                new{
+                    judul = "Judul Panduan 2",
+                    jenis = "Video",
+                    dokumen = "<a href=\"#\" class=\"btn bg-gray-500 text-white rounded-lg\"><i class=\"ph ph-video\"></i></a>",
+                    aksi = "<div class=\"flex gap-2\">" +
+                        "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                        "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                        "</div>",
+                },
+                new{
+                    judul = "Judul Panduan 3",
+                    jenis = "Dokumen",
+                    dokumen = "<a href=\"#\" class=\"btn bg-gray-500 text-white rounded-lg\"><i class=\"ph ph-file-text\"></i></a>",
+                    aksi = "<div class=\"flex gap-2\">" +
+                        "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                        "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                        "</div>",
+                },
+                new{
+                    judul = "Judul Panduan 4",
+                    jenis = "Video",
+                    dokumen = "<a href=\"#\" class=\"btn bg-gray-500 text-white rounded-lg\"><i class=\"ph ph-video\"></i></a>",
+                    aksi = "<div class=\"flex gap-2\">" +
+                        "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                        "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                        "</div>",
+                },
+                new{
+                    judul = "Judul Panduan 5",
+                    jenis = "Dokumen",
+                    dokumen = "<a href=\"#\" class=\"btn bg-gray-500 text-white rounded-lg\"><i class=\"ph ph-file-text\"></i></a>",
+                    aksi = "<div class=\"flex gap-2\">" +
+                        "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                        "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                        "</div>",
+                }
+            };
+
             var response = new
             {
                 data = data
diff --git a/Views/Main/Cms/Index.cshtml b/Views/Main/Cms/Index.cshtml
index bd76561..857a9da 100644
--- a/Views/Main/Cms/Index.cshtml
+++ b/Views/Main/Cms/Index.cshtml
@@ -99,7 +99,7 @@
         </div>
     </div>
 
-    <!-- Section 3 -->
+    <!-- Regulasi -->
     <div class="collapse collapse-arrow bg-base-100 shadow-xl">
         <input type="checkbox" checked /> 
         <div class="collapse-title text-gray-900 text-base font-semibold font-['Plus_Jakarta_Sans'] leading-8">
@@ -107,10 +107,10 @@
         </div>
         <div class="collapse-content">
             <div class="flex justify-end mb-4">
-                <a href="javascript:void(0)" class="btn bg-[#344054] text-white hover:bg-gray-900 px-4 py-2 rounded-full">
+                <button type="button" class="btn bg-[#344054] text-white hover:bg-gray-900 px-4 py-2 rounded-full">
                     Tambah Regulasi
                     <i class="ph ph-plus"></i>
-                </a>
+                </button>
             </div>
             <div class="w-full overflow-x-auto">
                 <table class="table-zebra table w-full" id="example">
@@ -132,11 +132,170 @@
             </div>
         </div>
     </div>
+
+    <!-- Helpdesk -->
+    <div class="collapse collapse-arrow bg-base-100 shadow-xl">
+        <input type="checkbox" checked /> 
+        <div class="collapse-title text-gray-900 text-base font-semibold font-['Plus_Jakarta_Sans'] leading-8">
+            Halp Desk
+        </div>
+        <div class="collapse-content">
+            <div class="pt-4 flex flex-col gap-6">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                   <div class="flex flex-col">
+                        <fieldset class="fieldset">
+                            <legend class="text-base">
+                                Nama Help Desk 1
+                            </legend>
+                            <input type="text" id="judul" class="input w-full" placeholder="Admin 1" required />
+                        </fieldset>
+                    </div>
+                     <div class="flex flex-col">
+                        <fieldset class="fieldset">
+                            <legend class="text-base">
+                                No. WhatsApp
+                            </legend>
+                            <input type="text" id="judul" class="input w-full" placeholder="08123456789" required />
+                        </fieldset>
+                    </div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                   <div class="flex flex-col">
+                        <fieldset class="fieldset">
+                            <legend class="text-base">
+                                Nama Help Desk 2
+                            </legend>
+                            <input type="text" id="judul" class="input w-full" placeholder="Admin 2" required />
+                        </fieldset>
+                    </div>
+                     <div class="flex flex-col">
+                        <fieldset class="fieldset">
+                            <legend class="text-base">
+                                No. WhatsApp
+                            </legend>
+                            <input type="text" id="judul" class="input w-full" placeholder="08123456789" required />
+                        </fieldset>
+                    </div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                   <div class="flex flex-col">
+                        <fieldset class="fieldset">
+                            <legend class="text-base">
+                                Nama Help Desk 3
+                            </legend>
+                            <input type="text" id="judul" class="input w-full" placeholder="Admin 3" required />
+                        </fieldset>
+                    </div>
+                     <div class="flex flex-col">
+                        <fieldset class="fieldset">
+                            <legend class="text-base">
+                                No. WhatsApp
+                            </legend>
+                            <input type="text" id="judul" class="input w-full" placeholder="08123456789" required />
+                        </fieldset>
+                    </div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                   <div class="flex flex-col">
+                        <fieldset class="fieldset">
+                            <legend class="text-base">
+                                Nama Help Desk 4
+                            </legend>
+                            <input type="text" id="judul" class="input w-full" placeholder="Admin 4" required />
+                        </fieldset>
+                    </div>
+                     <div class="flex flex-col">
+                        <fieldset class="fieldset">
+                            <legend class="text-base">
+                                No. WhatsApp
+                            </legend>
+                            <input type="text" id="judul" class="input w-full" placeholder="08123456789" required />
+                        </fieldset>
+                    </div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                   <div class="flex flex-col">
+                        <fieldset class="fieldset">
+                            <legend class="text-base">
+                                Nama Help Desk 5
+                            </legend>
+                            <input type="text" id="judul" class="input w-full" placeholder="Admin 5" required />
+                        </fieldset>
+                    </div>
+                     <div class="flex flex-col">
+                        <fieldset class="fieldset">
+                            <legend class="text-base">
+                                No. WhatsApp
+                            </legend>
+                            <input type="text" id="judul" class="input w-full" placeholder="08123456789" required />
+                        </fieldset>
+                    </div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                   <div class="flex flex-col">
+                        <fieldset class="fieldset">
+                            <legend class="text-base">
+                                Nama Help Desk 6
+                            </legend>
+                            <input type="text" id="judul" class="input w-full" placeholder="Admin 6" required />
+                        </fieldset>
+                    </div>
+                     <div class="flex flex-col">
+                        <fieldset class="fieldset">
+                            <legend class="text-base">
+                                No. WhatsApp
+                            </legend>
+                            <input type="text" id="judul" class="input w-full" placeholder="08123456789" required />
+                        </fieldset>
+                    </div>
+                </div>
+                <div class="flex justify-end mb-4">
+                    <button type="submit" class="w-full sm:w-auto px-8 py-2.5 bg-green-800 rounded-full text-white text-base font-semibold font-['Plus_Jakarta_Sans'] leading-6 hover:bg-green-900">
+                        Simpan
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Panduan -->
+    <div class="collapse collapse-arrow bg-base-100 shadow-xl">
+        <input type="checkbox" checked /> 
+        <div class="collapse-title text-gray-900 text-base font-semibold font-['Plus_Jakarta_Sans'] leading-8">
+            Regulasi
+        </div>
+        <div class="collapse-content">
+            <div class="flex justify-end mb-4">
+                <button type="button" class="btn bg-[#344054] text-white hover:bg-gray-900 px-4 py-2 rounded-full">
+                    Tambah Regulasi
+                    <i class="ph ph-plus"></i>
+                </button>
+            </div>
+            <div class="w-full overflow-x-auto">
+                <table class="table-zebra table w-full" id="examplePanduan">
+                    <!-- head -->
+                    <thead>
+                        <tr>
+                            <th class="w-[10%]">No</th>
+                            <th class="w-[30%]">Judul</th>
+                            <th class="w-[30%]">Jenis</th>
+                            <th class="w-[15%]">Dokumen</th>
+                            <th class="w-[15%]">Aksi</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+
 </div>
 
 @section Scripts {
     <script type="text/javascript">
-        var table;
+        var table, tablePanduan;
     
         $(document).ready(function () {
             table = new DataTable('#example', {
@@ -201,6 +360,60 @@
                     }
                 });
             });
+
+            tablePanduan = new DataTable('#examplePanduan', {
+                ajax: '/Main/Cms/TablePanduan',
+                scrollX: true,
+                autoWidth: false,
+                initComplete: function () {
+                    $('div.dt-scroll-body thead').css('visibility', 'collapse');
+                },
+                columns: [
+                    { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
+                    { data: 'judul' },
+                    { data: 'jenis' },
+                    { data: 'dokumen', orderable: false, searchable: false, },
+                    { data: 'aksi', orderable: false, searchable: false, },
+                ]
+            });
+    
+            // Delete button handler
+            $('#examplePanduan').on('click', '.delete-btn', function (e) {
+                e.preventDefault();
+    
+                var id = $(this).data('id');
+    
+                Swal.fire({
+                    title: 'Apakah anda yakin?',
+                    text: "Data yang dihapus tidak dapat dikembalikan lagi",
+                    icon: 'warning',
+                    showCancelButton: true,
+                    confirmButtonText: 'Ya, Hapus',
+                    cancelButtonText: 'Batal',
+                    buttonsStyling: false,
+                    customClass: {
+                        confirmButton: 'btn bg-red-500 text-white hover:bg-red-600 px-4 py-2 rounded-full mr-2',
+                        cancelButton: 'btn bg-white text-gray-500 hover:bg-gray-50 px-4 py-2 rounded-full border border-gray-300',
+                    },
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                        // TODO: Implement actual delete API call
+                        Swal.fire({
+                            title: 'Terhapus!',
+                            text: 'Data berhasil dihapus.',
+                            icon: 'success',
+                            confirmButtonText: 'OK',
+                            buttonsStyling: false,
+                            customClass: {
+                                confirmButton: 'btn bg-green-800 text-white hover:bg-green-900 px-4 py-2 rounded-full',
+                            },
+                        }).then(() => {
+                            // Reload table
+                            table.ajax.reload();
+                        });
+                    }
+                });
+            });
         });
     
         function submitForm(e) {