feat: create detail page for checklist harian

Controllers/DataVerifikasiChecklistHarianController.cs

@@ -19,7 +19,8 @@ namespace BpsRwApp.Controllers
                 .Select(index =>
                 {
                     var wilayah = ControllerSampleData.WilayahSeeds[index % ControllerSampleData.WilayahSeeds.Length];
-                    var tanggal = ControllerSampleData.FormatTanggal(startDate.AddDays(index * 3));
+                    var tanggal = startDate.AddDays(index * 3);
+                    var tanggalStr = ControllerSampleData.FormatTanggal(tanggal);
                     var target = 12;
                     var mudahTerurai = 8 + (index % 5);
                     var mudahDaur = 7 + (index % 4);
@@ -29,7 +30,7 @@ namespace BpsRwApp.Controllers
 
                     return new
                     {
-                        tanggal,
+                        tanggal = tanggalStr,
                         kelurahan = wilayah.Kelurahan,
                         rw = ((index % 15) + 1).ToString("D2"),
                         mudah_terurai = $"{mudahTerurai}/{target}",
@@ -37,8 +38,8 @@ namespace BpsRwApp.Controllers
                         b3 = $"{b3}/{target}",
                         residu = $"{residu}/{target}",
                         jumlah_foto = "<button class=\"btn btn-xs btn-square me-2\" disabled><span class=\"icon icon-outline text-sm text-black\">image</span></button>" + fotoCount,
-                        aksi = "<div class=\"flex gap-2\">" +
+                        aksi = $"<div class=\"flex gap-2\">" +
-                            "<a href=\"#\" class=\"btn bg-white rounded-full btn-xs\">Detail</a>" +
+                            $"<a href='/DataVerifikasiChecklistHarian/Detail?tanggal={tanggal:yyyy-MM-dd}&kelurahan={wilayah.Kelurahan}&rw={((index % 15) + 1):D2}' class=\"btn bg-white rounded-full btn-xs\">Detail</a>" +
                             "</div>",
                     };
                 })
@@ -51,5 +52,44 @@ namespace BpsRwApp.Controllers
 
             return Json(response);
         }
+
+        [HttpGet]
+        public IActionResult Detail(string tanggal, string kelurahan, string rw)
+        {
+            if (string.IsNullOrEmpty(tanggal))
+                return RedirectToAction("Index");
+
+            ViewBag.Tanggal = tanggal;
+            ViewBag.Kelurahan = kelurahan;
+            ViewBag.RW = rw;
+            
+            return View();
+        }
+
+        [HttpGet]
+        public IActionResult DetailTable(string tanggal, string kelurahan, string rw)
+        {
+            var data = Enumerable.Range(1, 10)
+                .Select(i => new
+                {
+                    no = i,
+                    alamat_rumah = $"Pulau Lancang RT.01/RW.01 - ({GetRandomName(i)})",
+                    rw = rw,
+                    mudah_terurai = true,
+                    material_daur = true,
+                    b3 = false,
+                    residu = true,
+                    photo = "<button class=\"btn btn-xs btn-info text-white btn-lihat-gambar\">LIHAT GAMBAR</button>"
+                })
+                .ToList();
+
+            return Json(new { data });
+        }
+
+        private string GetRandomName(int index)
+        {
+            var names = new[] { "Hernalin", "Supriyadi", "Rohili", "Wahyudi", "Eva Ratna Ayu", "Riski Cahyadi", "Sembari", "Sandi Setiawan" };
+            return names[index % names.Length];
+        }
     }
 }

Views/DataVerifikasiChecklistHarian/Detail.cshtml

@@ -0,0 +1,140 @@
+@{
+    ViewData["Title"] = "Detail Checklist Harian";
+    var tanggal = DateTime.Parse(ViewBag.Tanggal);
+    var tanggalDisplay = tanggal.ToString("dddd, dd MMMM yyyy", new System.Globalization.CultureInfo("id-ID"));
+}
+
+<div class="breadcrumbs text-sm">
+    <ul>
+        <li class="text-gray-500"><a>Data Verifikasi</a></li>
+        <li class="text-gray-500"><a href="/DataVerifikasiChecklistHarian/Index">Checklist Harian</a></li>
+        <li>Detail</li>
+    </ul>
+</div>
+
+<!-- Header -->
+<div class="grid grid-cols-1 gap-4 lg:grid-cols-2 mb-6">
+    <div>
+        <h3 class="text-2xl font-semibold">@tanggalDisplay</h3>
+    </div>
+    <div class="justify-self-end lg:self-center">
+        <a href="/DataVerifikasiChecklistHarian/Index" class="btn bg-white hover:bg-gray-50 rounded-full">
+            <span class="icon">arrow_back</span>
+            Kembali
+        </a>
+        <button type="button" class="btn btn-primary rounded-full text-white border-0">
+            <span class="icon icon-fill me-2">check_circle</span>
+            Verifikasi
+        </button>
+    </div>
+</div>
+
+<!-- Summary Cards -->
+<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+    <div class="card bg-teal-600 text-white shadow-sm">
+        <div class="card-body">
+            <p class="text-sm opacity-90 mb-1">Mudah Terurai</p>
+            <h2 class="text-3xl font-bold">1.80 <span class="text-base font-normal">Kg</span></h2>
+        </div>
+    </div>
+    <div class="card bg-yellow-500 text-white shadow-sm">
+        <div class="card-body">
+            <p class="text-sm opacity-90 mb-1">Material Daur</p>
+            <h2 class="text-3xl font-bold">1.00 <span class="text-base font-normal">Kg</span></h2>
+        </div>
+    </div>
+    <div class="card bg-red-500 text-white shadow-sm">
+        <div class="card-body">
+            <p class="text-sm opacity-90 mb-1">B3</p>
+            <h2 class="text-3xl font-bold">0.00 <span class="text-base font-normal">Kg</span></h2>
+        </div>
+    </div>
+    <div class="card bg-gray-700 text-white shadow-sm">
+        <div class="card-body">
+            <p class="text-sm opacity-90 mb-1">Residu</p>
+            <h2 class="text-3xl font-bold">0.70 <span class="text-base font-normal">Kg</span></h2>
+        </div>
+    </div>
+</div>
+
+<!-- Table Card -->
+<div class="card bg-white shadow-sm">
+    <div class="card-body p-0">
+        <table class="table table-zebra" id="detailTable">
+            <thead>
+                <tr>
+                    <th class="w-[5%]">No</th>
+                    <th class="w-[35%]">Alamat Rumah</th>
+                    <th class="w-[8%]">RW</th>
+                    <th class="w-[10%]">Mudah Terurai</th>
+                    <th class="w-[10%]">Material Daur</th>
+                    <th class="w-[8%]">B3</th>
+                    <th class="w-[10%]">Residu</th>
+                    <th class="w-[14%]">Photo</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+    </div>
+</div>
+
+<!-- Modal Image Popup -->
+<dialog id="modal_image" class="modal">
+    <div class="modal-box max-w-lg p-4">
+        <h3 class="font-bold text-base mb-3">Foto Sampah</h3>
+        <div class="mb-3">
+            <img src="/images/weightrash.jpg" alt="Foto Sampah" class="w-full h-auto rounded-lg">
+        </div>
+        <div class="modal-action mt-3">
+            <form method="dialog">
+                <button class="btn btn-sm btn-neutral">Tutup</button>
+            </form>
+        </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+        <button>close</button>
+    </form>
+</dialog>
+
+<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>
+    $(document).ready(function () {
+        new DataTable('#detailTable', {
+            ajax: '/DataVerifikasiChecklistHarian/DetailTable?tanggal=@ViewBag.Tanggal',
+            scrollX: true,
+            autoWidth: false,
+            initComplete: function () {
+                $('div.dt-scroll-body thead').css('visibility', 'collapse');
+            },
+            columns: [
+                { data: 'no' },
+                { data: 'alamat_rumah' },
+                { data: 'rw' },
+                {
+                    data: 'mudah_terurai',
+                    render: (value) => value ? '<input type="checkbox" checked="checked" class="checkbox checkbox-success checked:text-white" disabled />' : '<input type="checkbox" class="checkbox" disabled />'
+                },
+                {
+                    data: 'material_daur',
+                    render: (value) => value ? '<input type="checkbox" checked="checked" class="checkbox checkbox-success checked:text-white" disabled />' : '<input type="checkbox" class="checkbox" disabled />'
+                },
+                {
+                    data: 'b3',
+                    render: (value) => value ? '<input type="checkbox" checked="checked" class="checkbox checkbox-success checked:text-white" disabled />' : '<input type="checkbox" class="checkbox" disabled />'
+                },
+                {
+                    data: 'residu',
+                    render: (value) => value ? '<input type="checkbox" checked="checked" class="checkbox checkbox-success checked:text-white" disabled />' : '<input type="checkbox" class="checkbox" disabled />'
+                },
+                { data: 'photo' }
+            ]
+        });
+
+        $(document).on('click', '.btn-lihat-gambar', function() {
+            modal_image.showModal();
+        });
+    });
+</script>