feat: create a detail page for verified RW reports

Controllers/ChecklistHarianController.cs

@@ -18,27 +18,33 @@ namespace BpsRwApp.Controllers
             var data = Enumerable.Range(0, 100)
                 .Select(index =>
                 {
-                    var tanggal = ControllerSampleData.FormatTanggal(startDate.AddDays(index));
+                    var tanggal = startDate.AddDays(index);
+                    var tanggalStr = ControllerSampleData.FormatTanggal(tanggal);
+
                     var mudahTerurai = 15 + index % 10 + (index / 5);
                     var materialDaurUlang = 8 + (index % 6);
                     var b3 = 1 + index % 3;
                     var residu = 3 + index % 4;
+
                     var sudahDiverifikasi = index % 3 != 0;
-                    var statusBadge = sudahDiverifikasi ?
+
-                        "<div class=\"badge badge-success badge-soft rounded-full\">Verifikasi</div>" :
+                    var statusBadge = sudahDiverifikasi
-                        "<div class=\"badge badge-error badge-soft rounded-full\">Belum Verifikasi</div>";
+                        ? "<div class='badge badge-success badge-soft rounded-full'>Verifikasi</div>"
+                        : "<div class='badge badge-error badge-soft rounded-full'>Belum Verifikasi</div>";
+
+                    var aksi = sudahDiverifikasi
+                        ? $"<a href='/ChecklistHarian/Detail?tanggal={tanggal:yyyy-MM-dd}' class='btn bg-white rounded-full btn-sm'>Detail</a>"
+                        : $"<a href='#' onclick='return false;' class='btn bg-white rounded-full btn-sm'>Detail</a>";
 
                     return new
                     {
-                        tanggal,
+                        tanggal = tanggalStr,
                         mudah_terurai = mudahTerurai,
                         material_daur_ulang = materialDaurUlang,
                         b3,
                         residu,
                         status = statusBadge,
-                        aksi = "<div class=\"flex gap-2\">" +
+                        aksi = aksi
-                               "<a href=\"#\" class=\"btn bg-white rounded-full btn-sm\">Detail</a>" +
-                               "</div>"
                     };
                 })
                 .ToArray();
@@ -51,5 +57,34 @@ namespace BpsRwApp.Controllers
 
             return Json(new { data });
         }
+
+        [HttpGet]
+        public IActionResult Detail(string tanggal)
+        {
+            if (string.IsNullOrEmpty(tanggal))
+                return RedirectToAction("Index");
+
+            ViewBag.Tanggal = tanggal;
+            return View();
+        }
+
+        [HttpGet]
+        public IActionResult DetailTable(string tanggal)
+        {
+            var data = Enumerable.Range(1, 10)
+                .Select(i => new
+                {
+                    no = i,
+                    alamat_rumah = $"Jalan Buah No. {10 + i}",
+                    rw = (3 + i).ToString("D2"),
+                    mudah_terurai = true,
+                    material_daur = true,
+                    b3 = true,
+                    residu = true
+                })
+                .ToList();
+
+            return Json(new { data });
+        }
     }
 }

Views/ChecklistHarian/Detail.cshtml

@@ -0,0 +1,108 @@
+@{
+    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="flex items-center gap-2 text-sm mb-6">
+    <span class="text-gray-600">Checklist Harian</span>
+    <span class="text-gray-400">›</span>
+    <span class="font-medium">Detail</span>
+</div>
+
+<!-- Header -->
+<div class="flex justify-between items-center mb-6">
+    <h2 class="text-2xl font-semibold">@tanggalDisplay</h2>
+    <a href="/ChecklistHarian/Index" class="btn bg-white hover:bg-gray-50 rounded-full border border-gray-200">
+        <span class="icon">arrow_back</span>
+        Kembali
+    </a>
+</div>
+
+<!-- Summary Cards -->
+<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+    <div class="card bg-green-600 text-white shadow-sm rounded-xl">
+        <div class="card-body">
+            <p class="text-sm opacity-90 mb-1">Mudah Terurai</p>
+            <h2 class="text-4xl font-bold">3,341 <span class="text-base font-normal opacity-90">Kg</span></h2>
+        </div>
+    </div>
+    <div class="card bg-yellow-500 text-white shadow-sm rounded-xl">
+        <div class="card-body">
+            <p class="text-sm opacity-90 mb-1">Material Daur</p>
+            <h2 class="text-4xl font-bold">3,341 <span class="text-base font-normal opacity-90">Kg</span></h2>
+        </div>
+    </div>
+    <div class="card bg-red-500 text-white shadow-sm rounded-xl">
+        <div class="card-body">
+            <p class="text-sm opacity-90 mb-1">B3</p>
+            <h2 class="text-4xl font-bold">3,341 <span class="text-base font-normal opacity-90">Kg</span></h2>
+        </div>
+    </div>
+    <div class="card bg-black text-white shadow-sm rounded-xl">
+        <div class="card-body">
+            <p class="text-sm opacity-90 mb-1">Residu</p>
+            <h2 class="text-4xl font-bold">3,341 <span class="text-base font-normal opacity-90">Kg</span></h2>
+        </div>
+    </div>
+</div>
+
+<!-- Table Card -->
+<div class="card bg-white shadow-sm rounded-xl">
+    <div class="card-body p-0">
+        <table class="table" id="detailTable">
+            <thead class="bg-gray-50">
+                <tr>
+                    <th class="w-[5%] text-gray-600 font-medium">No</th>
+                    <th class="w-[30%] text-gray-600 font-medium">Alamat Rumah</th>
+                    <th class="w-[8%] text-gray-600 font-medium">RW</th>
+                    <th class="w-[12%] text-gray-600 font-medium">Mudah Terurai</th>
+                    <th class="w-[12%] text-gray-600 font-medium">Material Daur</th>
+                    <th class="w-[8%] text-gray-600 font-medium">B3</th>
+                    <th class="w-[12%] text-gray-600 font-medium">Residu</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>
+    $(document).ready(function () {
+
+        new DataTable('#detailTable', {
+            ajax: '/ChecklistHarian/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" />' : '<input type="checkbox" class="checkbox" />'
+                },
+                {
+                    data: 'material_daur',
+                    render: (value) => value ? '<input type="checkbox" checked="checked" class="checkbox checkbox-success checked:text-white" />' : '<input type="checkbox" class="checkbox" />'
+                },
+                {
+                    data: 'b3',
+                    render: (value) => value ? '<input type="checkbox" checked="checked" class="checkbox checkbox-success checked:text-white" />' : '<input type="checkbox" class="checkbox" />'
+                },
+                {
+                    data: 'residu',
+                    render: (value) => value ? '<input type="checkbox" checked="checked" class="checkbox checkbox-success checked:text-white" />' : '<input type="checkbox" class="checkbox" />'
+                }
+            ]
+        });
+    });
+</script>