From 0a4069483bd282fed1cfb30c29707dfd610cff3a Mon Sep 17 00:00:00 2001
From: Yuri Dimas <yuri@impstudio.co.id>
Date: Tue, 4 Nov 2025 22:01:51 +0700
Subject: [PATCH] style: implement plugin datatable & sweetalert

---
 .../Controllers/DataNasabahController.cs      |  94 ++++++++
 Areas/Dinas/Views/DataNasabah/Index.cshtml    | 223 ++++++------------
 2 files changed, 162 insertions(+), 155 deletions(-)

diff --git a/Areas/Dinas/Controllers/DataNasabahController.cs b/Areas/Dinas/Controllers/DataNasabahController.cs
index 08c9754..fb72755 100644
--- a/Areas/Dinas/Controllers/DataNasabahController.cs
+++ b/Areas/Dinas/Controllers/DataNasabahController.cs
@@ -3,11 +3,105 @@
 namespace BankSampahApp.Areas.Dinas.Controllers
 {
     [Area("Dinas")]
+    [Route("Dinas/[controller]/[action]")]
     public class DataNasabahController : Controller
     {
         public IActionResult Index()
         {
             return View();
         }
+
+        [HttpGet]
+        public IActionResult Table()
+        {
+            var data = new[]
+            {
+                new {
+                    nama = "Andi Prabowo",
+                    kabupaten = "Kota Adm Jakarta Timur",
+                    kecamatan = "Cipayung",
+                    kelurahan = "Kebon Jeruk",
+                    id_bangunan = "BSU 4567890",
+                    jenis = "Perorangan",
+                    status= "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
+                    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 {
+                    nama = "Siti Nurhaliza",
+                    kabupaten = "Kota Adm Jakarta Timur",
+                    kecamatan = "Matraman",
+                    kelurahan = "Pancoran",
+                    id_bangunan = "BSU 7654321",
+                    jenis = "Organisasi",
+                    status= "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
+                    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 {
+                    nama = "Budi Santoso",
+                    kabupaten = "Kota Adm Jakarta Timur",
+                    kecamatan = "Kramat Jati",
+                    kelurahan = "Kembangan",
+                    id_bangunan = "BSU 1234567",
+                    jenis = "Perorangan",
+                    status= "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
+                    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 {
+                    nama = "Nina Sari",
+                    kabupaten = "Kota Adm Jakarta Timur",
+                    kecamatan = "Pulogadung",
+                    kelurahan = "Senen",
+                    id_bangunan = "BSU 9876543",
+                    jenis = "Perorangan",
+                    status= "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
+                    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 {
+                    nama = "Dewi Lestari",
+                    kabupaten = "Kota Adm Jakarta Timur",
+                    kecamatan = "Cakung",
+                    kelurahan = "Kebayoran Baru",
+                    id_bangunan = "BSU 3456789",
+                    jenis = "Perorangan",
+                    status= "<div class=\"badge badge-error badge-soft rounded-full\">Tidak Disetujui</div>",
+                    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 {
+                    nama = "Rudi Hartono",
+                    kabupaten = "Kota Adm Jakarta Timur",
+                    kecamatan = "Jatinegara",
+                    kelurahan = "Menteng",
+                    id_bangunan = "BSU 2345678",
+                    jenis = "Organisasi",
+                    status= "<div class=\"badge badge-error badge-soft rounded-full\">Tidak Disetujui</div>",
+                    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
+            };
+
+            return Json(response);
+        }
     }
 }
diff --git a/Areas/Dinas/Views/DataNasabah/Index.cshtml b/Areas/Dinas/Views/DataNasabah/Index.cshtml
index 093afe4..99fa8e0 100644
--- a/Areas/Dinas/Views/DataNasabah/Index.cshtml
+++ b/Areas/Dinas/Views/DataNasabah/Index.cshtml
@@ -43,159 +43,72 @@
 
 <div class="card bg-white">
     <div class="card-body p-2">
-        <partial name="~/Areas/Shared/Components/Table/_Control.cshtml" />
-        <div class="overflow-x-auto">
-            <table class="table-zebra table">
-                <!-- head -->
-                <thead>
-                    <tr>
-                        <th></th>
-                        <th>Nama Nasabah</th>
-                        <th>Kabupaten</th>
-                        <th>Kecamatan</th>
-                        <th>Kelurahan</th>
-                        <th>ID Bangunan</th>
-                        <th>Jenis Nasabah</th>
-                        <th>Status</th>
-                        <th>Aksi</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <th>1</th>
-                        <td>Andi Prabowo</td>
-                        <td>Kota Adm Jakarta Timur</td>
-                        <td>Cipayung</td>
-                        <td>Kebon Jeruk</td>
-                        <td>BSU 4567890</td>
-                        <td>Perorangan</td>
-                        <td>
-                            <div class="badge badge-success badge-soft rounded-full">
-                                Aktif
-                            </div>
-                        </td>
-                        <td>
-                            <a href="#" class="btn btn-circle btn-warning btn-sm text-white">
-                                <i class="ph ph-note-pencil"></i>
-                            </a>
-                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
-                                <i class="ph ph-trash"></i>
-                            </a>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>2</th>
-                        <td>Siti Nurhaliza</td>
-                        <td>Kota Adm Jakarta Timur</td>
-                        <td>Matraman</td>
-                        <td>Pancoran</td>
-                        <td>BSU 7654321</td>
-                        <td>Organisasi</td>
-                        <td>
-                            <div class="badge badge-success badge-soft rounded-full">
-                                Aktif
-                            </div>
-                        </td>
-                        <td>
-                            <a href="#" class="btn btn-circle btn-warning btn-sm text-white">
-                                <i class="ph ph-note-pencil"></i>
-                            </a>
-                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
-                                <i class="ph ph-trash"></i>
-                            </a>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>3</th>
-                        <td>Budi Santoso</td>
-                        <td>Kota Adm Jakarta Timur</td>
-                        <td>Kramat Jati</td>
-                        <td>Kembangan</td>
-                        <td>BSU 1234567</td>
-                        <td>Perorangan</td>
-                        <td>
-                            <div class="badge badge-success badge-soft rounded-full">
-                                Aktif
-                            </div>
-                        </td>
-                        <td>
-                            <a href="#" class="btn btn-circle btn-warning btn-sm text-white">
-                                <i class="ph ph-note-pencil"></i>
-                            </a>
-                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
-                                <i class="ph ph-trash"></i>
-                            </a>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>4</th>
-                        <td>Nina Sari</td>
-                        <td>Kota Adm Jakarta Timur</td>
-                        <td>Pulogadung</td>
-                        <td>Senen</td>
-                        <td>BSU 9876543</td>
-                        <td>Perorangan</td>
-                        <td>
-                            <div class="badge badge-success badge-soft rounded-full">
-                                Aktif
-                            </div>
-                        </td>
-                        <td>
-                            <a href="#" class="btn btn-circle btn-warning btn-sm text-white">
-                                <i class="ph ph-note-pencil"></i>
-                            </a>
-                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
-                                <i class="ph ph-trash"></i>
-                            </a>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>5</th>
-                        <td>Dewi Lestasi</td>
-                        <td>Kota Adm Jakarta Timur</td>
-                        <td>Cakung</td>
-                        <td>Kebayoran Baru</td>
-                        <td>BSU 3456789</td>
-                        <td>Perorangan</td>
-                        <td>
-                            <div class="badge badge-error badge-soft rounded-full">
-                                Tidak Disetujui
-                            </div>
-                        </td>
-                        <td>
-                            <a href="#" class="btn btn-circle btn-warning btn-sm text-white">
-                                <i class="ph ph-note-pencil"></i>
-                            </a>
-                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
-                                <i class="ph ph-trash"></i>
-                            </a>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>6</th>
-                        <td>Rudi Hartono</td>
-                        <td>Kota Adm Jakarta Timur</td>
-                        <td>Jatinegara</td>
-                        <td>Menteng</td>
-                        <td>BSU 2345678</td>
-                        <td>Organisasi</td>
-                        <td>
-                            <div class="badge badge-error badge-soft rounded-full">
-                                Tidak Disetujui
-                            </div>
-                        </td>
-                        <td>
-                            <a href="#" class="btn btn-circle btn-warning btn-sm text-white">
-                                <i class="ph ph-note-pencil"></i>
-                            </a>
-                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
-                                <i class="ph ph-trash"></i>
-                            </a>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-        <partial name="~/Areas/Shared/Components/Table/_Pagination.cshtml" />
+        <table class="table-zebra table" id="example">
+            <!-- head -->
+            <thead>
+                <tr>
+                    <th>No</th>
+                    <th>Nama Nasabah</th>
+                    <th>Kabupaten</th>
+                    <th>Kecamatan</th>
+                    <th>Kelurahan</th>
+                    <th>ID Bangunan</th>
+                    <th>Jenis Nasabah</th>
+                    <th>Status</th>
+                    <th>Aksi</th>
+                </tr>
+            </thead>
+            <tbody>
+            </tbody>
+        </table>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
+<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
+<script type="text/javascript">
+    var table;
+
+    $(document).ready(function () {
+        table = new DataTable('#example', {
+            ajax: '/Dinas/DataNasabah/Table',
+            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: 'nama' },
+                { data: 'kabupaten' },
+                { data: 'kecamatan' },
+                { data: 'kelurahan' },
+                { data: 'id_bangunan' },
+                { data: 'jenis' },
+                { data: 'status' },
+                { data: 'aksi' },
+            ]
+        });
+
+        table.on("click", ".delete", function (e) {
+            e.preventDefault();
+
+            let url = $(this).data("url");
+            swal.fire({
+                title: "Apakah anda yakin?",
+                text: "Data yang dihapus tidak dapat dikembalikan lagi",
+                icon: "question",
+                showCancelButton: true,
+                confirmButtonText: "Ya, Hapus",
+                cancelButtonText: "Batal",
+                buttonsStyling: false,
+                customClass: {
+                    confirmButton: "btn btn-error text-white",
+                    cancelButton: "btn btn-link no-underline text-gray-500",
+                },
+            });
+        });
+    });
+</script>
\ No newline at end of file