feat: create detail page pjlp pendamping data

Controllers/DataPendampingRwController.cs

@@ -12,7 +12,7 @@ namespace BpsRwApp.Controllers
         }
 
         [HttpGet]
-        public IActionResult DetailPendamping(string nama, string rw)
+        public IActionResult Detail(string nama, string rw)
         {
             if (string.IsNullOrEmpty(nama) || string.IsNullOrEmpty(rw))
                 return RedirectToAction("Index");
@@ -23,7 +23,7 @@ namespace BpsRwApp.Controllers
         }
 
         [HttpGet]
-        public IActionResult TableDetailPendamping(string rw)
+        public IActionResult TableDetail(string rw)
         {
             var data = Enumerable.Range(1, 10)
                 .Select(i => new
@@ -87,7 +87,7 @@ namespace BpsRwApp.Controllers
                     }
 
                     var rw = (index % 10 + 1).ToString("D2");
-                    var detailUrl = $"/DataPendampingRw/DetailPendamping?nama={System.Web.HttpUtility.UrlEncode(nama)}&rw={rw}";
+                    var detailUrl = $"/DataPendampingRw/Detail?nama={System.Web.HttpUtility.UrlEncode(nama)}&rw={rw}";
 
                     return new
                     {
@@ -130,6 +130,53 @@ namespace BpsRwApp.Controllers
 
             return Json(new { data });
         }
+        [HttpGet]
+        public IActionResult DetailPendamping(string nama, string rw, string tanggal)
+        {
+            if (string.IsNullOrEmpty(nama) || string.IsNullOrEmpty(rw))
+                return RedirectToAction("Index");
+
+            ViewBag.Nama = nama;
+            ViewBag.RW = rw;
+            ViewBag.Tanggal = tanggal ?? DateTime.Now.ToString("yyyy-MM-dd");
+            return View();
+        }
+
+        [HttpGet]
+        public IActionResult TableDetailPendamping(string rw, string tanggal)
+        {
+            var random = new Random();
+            
+            var data = Enumerable.Range(1, 50)
+                .Select(i => new
+                {
+                    no = i,
+                    alamat_rumah = GenerateAlamat(i),
+                    rw = rw ?? "04",
+                    mudah_terurai = true, 
+                    material_daur = true, 
+                    b3 = true, 
+                    residu = true, 
+                    photo = random.Next(0, 5) 
+                })
+                .ToList();
+
+            return Json(new { data });
+        }
+
+        private static string GenerateAlamat(int index)
+        {
+            var streetNames = new[]
+            {
+                "Kedongan", "Jambu", "Mangga", "Durian", "Sawo", 
+                "Mangga", "Rambutan", "Salak", "Nangka", "Duku"
+            };
+            
+            var randomStreet = streetNames[index % streetNames.Length];
+            var houseNumber = (index * 11) % 100 + 1;
+            
+            return $"Jalan {randomStreet} No. {houseNumber}";
+        }
 
         private static string BuildMetricBadge(int value, int warningThreshold, int successThreshold)
         {

Views/DataPendampingRw/Detail.cshtml

@@ -0,0 +1,132 @@
+@{
+    ViewData["Title"] = "Data Detail Pendamping RW";
+    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="tableDetail">
+            <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('#tableDetail', {
+            ajax: {
+                url: '@Url.Action("TableDetail", "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' }
+            ]
+        });
+
+        $('#tableDetail 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');
+            }
+        });
+    });
+
+    function getExpandedContent(data) {
+    const nama = encodeURIComponent('@nama');
+    const rw = encodeURIComponent(data.rw || '');
+    const tanggal = encodeURIComponent(data.tanggal || '');
+    
+    const detailUrl = `/DataPendampingRw/DetailPendamping?nama=${nama}&rw=${rw}&tanggal=${tanggal}`;
+    
+    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>
+                    <a href="${detailUrl}" class="btn btn-sm btn-ghost rounded-full">Detail</a>
+                </div>
+            </div>
+        </div>
+    `;
+}
+</script>

Views/DataPendampingRw/DetailPendamping.cshtml

@@ -1,46 +1,86 @@
 @{
-    ViewData["Title"] = "Data PILP Pendamping";
+    ViewData["Title"] = "Detail Data PJLP Pendamping";
     var nama = ViewBag.Nama as string;
     var rw = ViewBag.RW as string;
+    var tanggal = ViewBag.Tanggal as string;
 }
 
-<div class="breadcrumbs text-sm mb-4">
+<div class="text-sm breadcrumbs mb-6">
     <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><a class="text-gray-600">Checklist</a></li>
-        <li id="breadcrumb-active">@nama</li>
+        <li><a class="text-gray-600">@nama</a></li>
+        <li class="font-medium">Detail</li>
     </ul>
 </div>
 
-<div class="flex items-center justify-between mb-6">
+
-    <div>
+<!-- Header -->
-        <h2 class="text-xl font-semibold text-gray-800">Data PJLP Pendamping</h2>
+<div class="flex flex-col lg:flex-row justify-between lg:items-center gap-4 mb-6">
-        <p class="text-sm text-gray-600 mt-1">@nama</p>
+    <h2 class="text-2xl font-semibold">
-    </div>
+        Rabu, 22 Oktober 2025
-    <div class="flex items-center gap-3">
+    </h2>
-        <label class="text-sm font-medium text-gray-700">RW :</label>
+    <div class="flex flex-wrap gap-3 justify-end">
-        <select class="select select-bordered rounded-lg px-4 py-2" id="select-rt" style="width: 120px;">
+        <a href="/DataPendampingRw/Index" 
-            <option value="">Pilih RW</option>
+           class="btn bg-white hover:bg-gray-50 rounded-full">
-            @for (int i = 1; i <= 10; i++)
+            <span class="icon">arrow_back</span>
-            {
+            Kembali
-                <option>@i.ToString("D2")</option>
+        </a>
-            }
+        <button type="button" 
-        </select>
+                class="btn btn-primary rounded-full text-white border-0">
+            <span class="icon icon-fill me-2">check_circle</span>
+            Verifikasi
+        </button>
+        <button class="btn rounded-full bg-white">
+            <span class="icon icon-fill me-2">filter_list</span>
+            Filter
+        </button>
     </div>
 </div>
 
-<div class="card bg-white shadow-sm">
+
+<!-- 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 w-full" id="tableDetailPendamping">
+        <table class="table" id="detailTable">
-            <thead>
+            <thead class="bg-gray-50">
                 <tr>
-                    <th class="w-12"></th>
+                    <th class="w-[5%] text-gray-600 font-medium">No</th>
-                    <th>Tanggal</th>
+                    <th class="w-[25%] text-gray-600 font-medium">Alamat Rumah</th>
-                    <th>RW</th>
+                    <th class="w-[8%] text-gray-600 font-medium">RW</th>
-                    <th>Kelurahan</th>
+                    <th class="w-[12%] text-gray-600 font-medium text-center">Mudah Terurai</th>
-                    <th>Mudah Terurai<br>(Jumlah/Berat)</th>
+                    <th class="w-[12%] text-gray-600 font-medium text-center">Material Daur</th>
-                    <th>Materi Daur<br>(Jumlah/Berat)</th>
+                    <th class="w-[8%] text-gray-600 font-medium text-center">B3</th>
-                    <th>B3<br>(Jumlah/Berat)</th>
+                    <th class="w-[12%] text-gray-600 font-medium text-center">Residu</th>
+                    <th class="w-[10%] text-gray-600 font-medium text-center">Photo</th>
                 </tr>
             </thead>
             <tbody></tbody>
@@ -48,80 +88,87 @@
     </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>
-    let table;
-    let currentRW = '@rw';
 
+<script>
     $(document).ready(function () {
-        table = new DataTable('#tableDetailPendamping', {
+        const rw = '@rw';
-            ajax: {
+        const tanggal = '@tanggal';
-                url: '@Url.Action("TableDetailPendamping", "DataPendampingRw")',
+
-                data: (d) => ({ rw: currentRW })
+        console.log('RW:', rw, 'Tanggal:', tanggal);
-            },
+
+        new DataTable('#detailTable', {
+            ajax: '/DataPendampingRw/TableDetailPendamping?rw=' + rw + '&tanggal=' + tanggal,
             scrollX: true,
             autoWidth: false,
-            searching: true,
-            paging: true,
-            pageLength: 10,
             initComplete: function () {
                 $('div.dt-scroll-body thead').css('visibility', 'collapse');
             },
             columns: [
+                { data: 'no', className: '!align-middle' },
+                { data: 'alamat_rumah', className: '!align-middle' },
+                { data: 'rw', className: '!align-middle' },
+
                 {
-                    className: 'dt-control',
+                    data: 'mudah_terurai',
-                    orderable: false,
+                    className: '!align-middle !text-center',
-                    data: null,
+                    render: (v) => v
-                    defaultContent: '<button class="btn btn-xs btn-circle"><span class="icon icon-fill">expand_more</span></button>'
+                        ? '<input type="checkbox" checked class="checkbox checkbox-success text-white" />'
+                        : '<input type="checkbox" class="checkbox" />'
                 },
-                { data: 'tanggal' },
+                {
-                { data: 'rw' },
+                    data: 'material_daur',
-                { data: 'kelurahan' },
+                    className: '!align-middle !text-center',
-                { data: 'mudah_terurai' },
+                    render: (v) => v
-                { data: 'materi_daur' },
+                        ? '<input type="checkbox" checked class="checkbox checkbox-success text-white" />'
-                { data: 'b3' }
+                        : '<input type="checkbox" class="checkbox" />'
+                },
+                {
+                    data: 'b3',
+                    className: '!align-middle !text-center',
+                    render: (v) => v
+                        ? '<input type="checkbox" checked class="checkbox checkbox-success text-white" />'
+                        : '<input type="checkbox" class="checkbox" />'
+                },
+                {
+                    data: 'residu',
+                    className: '!align-middle !text-center',
+                    render: (v) => v
+                        ? '<input type="checkbox" checked class="checkbox checkbox-success text-white" />'
+                        : '<input type="checkbox" class="checkbox" />'
+                },
+                {
+                    data: 'photo',
+                    className: '!align-middle !text-center',
+                    render: () => `
+                        <button class="btn btn-sm btn-ghost rounded-full btn-lihat-gambar">Photo</button>`
+                }
             ]
         });
 
-        $('#tableDetailPendamping tbody').on('click', 'td.dt-control', function () {
+        $(document).on('click', '.btn-lihat-gambar', function() {
-            const tr = $(this).closest('tr');
+            modal_image.showModal();
-            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>