feat: create detail modal

Controllers/LaporanRwController.cs

@@ -30,7 +30,7 @@ namespace BpsRwApp.Controllers
                         rumah_aktif_memilah = 450 + (index * 11 % 600),
                         status,
                         aksi = "<div class=\"flex gap-2\">" +
-                            "<a href=\"#\" class=\"btn bg-white rounded-full btn-sm\">Detail</a>" +
+                            "<button class=\"btn bg-white rounded-full btn-sm btn-detail\">Detail</button>" +
                             "</div>",
                     };
                 })

Views/LaporanRw/Index.cshtml

@@ -75,6 +75,61 @@
     </div>
 </dialog>
 
+<!-- Detail Modal -->
+<dialog id="modal_detail" class="modal modal-bottom sm:modal-middle">
+    <div class="modal-box w-full max-w-2xl">
+        <form method="dialog">
+            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+            <h3 class="text-lg font-bold mb-4">Detail Laporan RW</h3>
+            <div class="grid grid-cols-2 gap-4 mb-6">
+                <div>
+                    <p class="text-sm text-gray-500">Kelurahan</p>
+                    <p class="font-semibold" id="detail_kelurahan">-</p>
+                </div>
+                <div>
+                    <p class="text-sm text-gray-500">RW</p>
+                    <p class="font-semibold" id="detail_rw">-</p>
+                </div>
+                <div>
+                    <p class="text-sm text-gray-500">Period</p>
+                    <p class="font-semibold" id="detail_period">-</p>
+                </div>
+                <div>
+                    <p class="text-sm text-gray-500">Rumah Aktif Memilah</p>
+                    <p class="font-semibold" id="detail_rumah_aktif">-</p>
+                </div>
+            </div>
+            <div class="overflow-x-auto">
+                <table class="table table-zebra w-full">
+                    <thead>
+                        <tr>
+                            <th class="w-[10%]">No</th>
+                            <th class="w-[50%]">Rumah</th>
+                            <th class="w-[20%]">RT</th>
+                            <th class="w-[20%]">Checklist</th>
+                        </tr>
+                    </thead>
+                    <tbody id="detail_table_body">
+                    </tbody>
+                </table>
+            </div>
+            <div class="modal-action mt-6">
+                <button type="button" class="btn btn-ghost rounded-full" onclick="modal_detail.close()">
+                    <span class="icon me-2">close</span>
+                    Tutup
+                </button>
+                <button type="submit" class="btn btn-primary text-white rounded-full">
+                    <span class="icon me-2">check_circle</span>
+                    Verifikasi
+                </button>
+            </div>
+        </form>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+        <button>close</button>
+    </form>
+</dialog>
+
 <div class="card bg-white shadow-sm">
     <div class="card-body p-0">
         <table class="table-zebra table" id="example">
@@ -120,11 +175,43 @@
             ]
         });
 
+
+        table.on("click", ".btn-detail", function (e) {
+            e.preventDefault();
+            
+            let rowData = table.row($(this).closest('tr')).data();
+            $('#detail_kelurahan').text(rowData.kelurahan);
+            $('#detail_rw').text(rowData.rw);
+            $('#detail_period').text(rowData.bulan);
+            $('#detail_rumah_aktif').text(rowData.rumah_aktif_memilah);
+            
+            let detailRows = '';
+            let sampleHouses = [
+                { rumah: 'Jl. Cipinang Raya No 34', rt: '03', checklist: '11' },
+                { rumah: 'Jl. Cipinang Baru No 22', rt: '01', checklist: '23' }
+            ];
+            
+            sampleHouses.forEach((house, index) => {
+                detailRows += `
+                    <tr>
+                        <td>${index + 1}</td>
+                        <td>${house.rumah}</td>
+                        <td>${house.rt}</td>
+                        <td>${house.checklist}</td>
+                    </tr>
+                `;
+            });
+            
+            $('#detail_table_body').html(detailRows);
+            
+            modal_detail.showModal();
+        });
+
         table.on("click", ".delete", function (e) {
             e.preventDefault();
 
             let url = $(this).data("url");
-            swal.fire({
+            Swal.fire({
                 title: "Apakah anda yakin?",
                 text: "Data yang dihapus tidak dapat dikembalikan lagi",
                 icon: "question",