feat: create a detail page on the checklist tab

Controllers/DataPendampingRwController.cs

@@ -11,6 +11,38 @@ namespace BpsRwApp.Controllers
             return View();
         }
 
+        [HttpGet]
+        public IActionResult DetailPendamping(string nama, string rw)
+        {
+            if (string.IsNullOrEmpty(nama) || string.IsNullOrEmpty(rw))
+                return RedirectToAction("Index");
+
+            ViewBag.Nama = nama;
+            ViewBag.RW = rw;
+            return View();
+        }
+
+        [HttpGet]
+        public IActionResult TableDetailPendamping(string rw)
+        {
+            var data = Enumerable.Range(1, 10)
+                .Select(i => new
+                {
+                    id = i,
+                    tanggal = "2025-09-22",
+                    rw = rw ?? "04",
+                    kelurahan = "Tomang",
+                    mudah_terurai = "17/4",
+                    materi_daur = "17/4",
+                    b3 = "17/4",
+                    residu_jumlah = "17/4",
+                    photo = 0
+                })
+                .ToList();
+
+            return Json(new { data });
+        }
+
         [HttpGet]
         public IActionResult TableRapot()
         {
@@ -54,13 +86,16 @@ namespace BpsRwApp.Controllers
                         rumahAktif = 0;
                     }
 
+                    var rw = (index % 10 + 1).ToString("D2");
+                    var detailUrl = $"/DataPendampingRw/DetailPendamping?nama={System.Web.HttpUtility.UrlEncode(nama)}&rw={rw}";
+
                     return new
                     {
                         nama,
                         checklist = BuildMetricBadge(checklistCount, 10, 15),
                         foto = BuildFotoIndicator(fotoCount),
                         rumah_aktif_memilah = BuildRatioBadge(rumahAktif, targetRumah),
-                        aksi = BuildDetailAction(),
+                        aksi = BuildDetailAction(detailUrl),
                     };
                 })
                 .ToArray();
@@ -143,9 +178,9 @@ namespace BpsRwApp.Controllers
             return $"<div class=\"badge badge-{status.Item2} badge-soft rounded-full\">{status.Item1}</div>";
         }
 
-        private static string BuildDetailAction() =>
+        private static string BuildDetailAction(string url) =>
             "<div class=\"flex gap-2\">" +
-            "<a href=\"#\" class=\"btn bg-white rounded-full btn-xs\">Detail</a>" +
+            $"<a href=\"{url}\" class=\"btn bg-white rounded-full btn-xs\">Detail</a>" +
             "</div>";
     }
 }

Views/DataPendampingRw/DetailPendamping.cshtml

@@ -0,0 +1,127 @@
+@{
+    ViewData["Title"] = "Data PILP Pendamping";
+    var nama = ViewBag.Nama as string;
+    var rw = ViewBag.RW as string;
+}
+
+<div class="breadcrumbs text-sm mb-4">
+    <ul>
+        <li class="text-gray-500"><a href="/DataPendampingRw/Index">Data Pendamping RW</a></li>
+        <li class="text-gray-500"><a>Checklist</a></li>
+        <li id="breadcrumb-active">@nama</li>
+    </ul>
+</div>
+
+<div class="flex items-center justify-between mb-6">
+    <div>
+        <h2 class="text-xl font-semibold text-gray-800">Data PJLP Pendamping</h2>
+        <p class="text-sm text-gray-600 mt-1">@nama</p>
+    </div>
+    <div class="flex items-center gap-3">
+        <label class="text-sm font-medium text-gray-700">RW :</label>
+        <select class="select select-bordered rounded-lg px-4 py-2" id="select-rt" style="width: 120px;">
+            <option value="">Pilih RW</option>
+            @for (int i = 1; i <= 10; i++)
+            {
+                <option>@i.ToString("D2")</option>
+            }
+        </select>
+    </div>
+</div>
+
+<div class="card bg-white shadow-sm">
+    <div class="card-body p-0">
+        <table class="table w-full" id="tableDetailPendamping">
+            <thead>
+                <tr>
+                    <th class="w-12"></th>
+                    <th>Tanggal</th>
+                    <th>RW</th>
+                    <th>Kelurahan</th>
+                    <th>Mudah Terurai<br>(Jumlah/Berat)</th>
+                    <th>Materi Daur<br>(Jumlah/Berat)</th>
+                    <th>B3<br>(Jumlah/Berat)</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+    </div>
+</div>
+
+<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
+<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
+<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
+<script>
+    let table;
+    let currentRW = '@rw';
+
+    $(document).ready(function () {
+        table = new DataTable('#tableDetailPendamping', {
+            ajax: {
+                url: '@Url.Action("TableDetailPendamping", "DataPendampingRw")',
+                data: (d) => ({ rw: currentRW })
+            },
+            scrollX: true,
+            autoWidth: false,
+            searching: true,
+            paging: true,
+            pageLength: 10,
+            initComplete: function () {
+                $('div.dt-scroll-body thead').css('visibility', 'collapse');
+            },
+            columns: [
+                {
+                    className: 'dt-control',
+                    orderable: false,
+                    data: null,
+                    defaultContent: '<button class="btn btn-xs btn-circle"><span class="icon icon-fill">expand_more</span></button>'
+                },
+                { data: 'tanggal' },
+                { data: 'rw' },
+                { data: 'kelurahan' },
+                { data: 'mudah_terurai' },
+                { data: 'materi_daur' },
+                { data: 'b3' }
+            ]
+        });
+
+        $('#tableDetailPendamping tbody').on('click', 'td.dt-control', function () {
+            const tr = $(this).closest('tr');
+            const row = table.row(tr);
+            const btn = $(this).find('.icon');
+
+            if (row.child.isShown()) {
+                row.child.hide();
+                btn.text('expand_more');
+                tr.removeClass('shown');
+            } else {
+                row.child(getExpandedContent(row.data())).show();
+                btn.text('expand_less');
+                tr.addClass('shown');
+            }
+        });
+    });
+
+    // Expand row content
+    function getExpandedContent(data) {
+        return `
+            <div class="px-4 py-3 bg-base-100">
+                <div class="flex justify-between items-center pl-10">
+                    <div class="grid grid-cols-2 gap-24">
+                        <div>
+                            <span class="text-sm text-gray-600">Residu (Jumlah/Berat):</span>
+                            <div class="font-semibold">${data.residu_jumlah}</div>
+                        </div>
+                        <div>
+                            <span class="text-sm text-gray-600">Photo:</span>
+                            <div class="font-semibold">${data.photo}</div>
+                        </div>
+                    </div>
+                    <div>
+                        <button class="btn btn-sm btn-ghost rounded-full">Detail</button>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+</script>