slicing: add table laporan rumah memilah for dashboard admin/dinas

Controllers/DashboardController.cs

@@ -9,5 +9,21 @@ namespace BpsRwApp.Controllers
         {
             return View();
         }
+
+        [HttpGet]
+        public IActionResult Table()
+        {
+            var data = new[]
+            {
+                new { wilayah = "Jakarta Pusat", totalRumah = 79671, totalRumahMemilah = 62392, capaianTarget = 80 },
+                new { wilayah = "Jakarta Selatan", totalRumah = 6945, totalRumahMemilah = 93224, capaianTarget = 80 },
+                new { wilayah = "Jakarta Barat", totalRumah = 8768, totalRumahMemilah = 55985, capaianTarget = 80 },
+                new { wilayah = "Jakarta Timur", totalRumah = 69517, totalRumahMemilah = 13264, capaianTarget = 80 },
+                new { wilayah = "Jakarta Utara", totalRumah = 90028, totalRumahMemilah = 53936, capaianTarget = 80 },
+                new { wilayah = "Kepulauan Seribu", totalRumah = 98931, totalRumahMemilah = 968, capaianTarget = 80 }
+            };
+
+            return Json(new { data });
+        }
     }
-}
+}

Views/Dashboard/Index.cshtml

@@ -7,7 +7,7 @@
     <div class="card card-border h-full bg-white lg:col-span-9">
         <div class="card-body">
             <div class="flex flex-col items-center justify-between gap-2 lg:flex-row">
-                <h2 class="w-full text-lg font-bold md:w-1/2">Profile RW 7</h2>
+                <h2 class="w-full text-lg font-bold md:w-1/2">Admin Pengelola Sampah DLH</h2>
                 <div class="flex w-full items-center justify-end gap-2 md:w-1/2">
                     <select id="filterPeriod" class="select select-bordered select-sm w-32">
                         <option selected>Tahunan</option>
@@ -206,7 +206,51 @@
     </div>
 </div>
 
+<div class="h-4"></div>
+
+<!-- Table Laporan Rumah Memilah -->
+<div class="card bg-white shadow-sm">
+    <div class="card-body">
+        <div class="flex flex-col items-center justify-between gap-4 lg:flex-row">
+            <h2 class="text-lg font-bold">Laporan Rumah Memilah</h2>
+            <div class="flex flex-wrap items-center gap-2">
+                <input type="month" id="filterBulanTable" class="px-4 py-2 border bg-white rounded-full"
+                    min="2020-01" max="@DateTime.Now.ToString("yyyy-MM")" value="@DateTime.Now.ToString("yyyy-MM")" />
+                <a class="btn btn-primary text-white rounded-full" href="#">
+                    <span class="icon icon-fill me-2">download</span>
+                    Download
+                </a>
+            </div>
+        </div>
+    </div>
+    <div class="card-body p-0">
+        <table class="table table-zebra w-full" id="tableLaporanRumahMemilah">
+            <thead>
+                <tr>
+                    <th class="w-[5%]">No</th>
+                    <th class="w-[35%]">Wilayah</th>
+                    <th class="w-[20%]">Total Rumah</th>
+                    <th class="w-[20%]">Total Rumah Memilah</th>
+                    <th class="w-[20%]">Capaian Target (%)</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+            <tfoot>
+                <tr class="font-bold">
+                    <td colspan="2">Subtotal</td>
+                    <td id="subtotalRumah">0</td>
+                    <td id="subtotalMemilah">0</td>
+                    <td id="subtotalCapaian">80</td>
+                </tr>
+            </tfoot>
+        </table>
+    </div>
+</div>
+
 <script src="/lib/chart.js/chart.umd.js"></script>
+<script src="/lib/jquery/jquery-3.7.1.js"></script>
+<script src="/lib/datatables/dataTables.js"></script>
+<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
 
 <script>
 
@@ -266,11 +310,11 @@
       options: {
         responsive: true,
         maintainAspectRatio: false,
-                  layout: {
-      padding: {
-        bottom: 32  // kecilkan padding
-      }
-    },
+        layout: {
+          padding: {
+            bottom: 32  // kecilkan padding
+          }
+        },
         plugins: {
           legend: {
             position: "bottom",
@@ -295,4 +339,53 @@
         }
       }
     });
-</script>
+
+    // DataTable initialization
+    $(document).ready(function () {
+        const table = new DataTable('#tableLaporanRumahMemilah', {
+            ajax: '@Url.Action("Table", "Dashboard")',
+            scrollX: true,
+            autoWidth: false,
+            initComplete: function () {
+                $('div.dt-scroll-body thead').css('visibility', 'collapse');
+                
+                // Calculate subtotal
+                const data = this.api().rows().data();
+                let totalRumah = 0;
+                let totalMemilah = 0;
+                
+                data.each(function(row) {
+                    totalRumah += row.totalRumah;
+                    totalMemilah += row.totalRumahMemilah;
+                });
+                
+                $('#subtotalRumah').text(totalRumah.toLocaleString("id-ID"));
+                $('#subtotalMemilah').text(totalMemilah.toLocaleString("id-ID"));
+            },
+            columns: [
+                { 
+                    data: null,
+                    render: (d, t, r, m) => m.row + 1,
+                    orderable: false,
+                    searchable: false
+                },
+                { data: 'wilayah' },
+                { 
+                    data: 'totalRumah',
+                    render: data => data.toLocaleString("id-ID")
+                },
+                { 
+                    data: 'totalRumahMemilah',
+                    render: data => data.toLocaleString("id-ID")
+                },
+                { data: 'capaianTarget' }
+            ]
+        });
+
+        // Filter bulan handler
+        $('#filterBulanTable').on('change', function() {
+            const bulan = $(this).val();
+            console.log('Filter bulan:', bulan);
+        });
+    });
+</script>