From 7dfd02133308b4e007ed8c9372ba6d3a90150b91 Mon Sep 17 00:00:00 2001
From: Yuri Dimas <yuri@impstudio.co.id>
Date: Tue, 18 Nov 2025 14:31:50 +0700
Subject: [PATCH] style: add modal filter

---
 Views/DataBankSampah/Index.cshtml |  35 +++++++++-
 Views/DataKecamatan/Index.cshtml  |  34 +++++++++-
 Views/DataRt/Index.cshtml         |  35 +++++++++-
 Views/DataRw/Index.cshtml         | 105 ++++++++++++------------------
 4 files changed, 136 insertions(+), 73 deletions(-)

diff --git a/Views/DataBankSampah/Index.cshtml b/Views/DataBankSampah/Index.cshtml
index dcf29e3..87a2ab7 100644
--- a/Views/DataBankSampah/Index.cshtml
+++ b/Views/DataBankSampah/Index.cshtml
@@ -4,7 +4,8 @@
 
 <div class="breadcrumbs text-sm">
     <ul>
-        <li><a>Data Bank Sampah</a></li>
+        <li class="text-gray-500"><a>Master Data</a></li>
+        <li>Data Bank Sampah</li>
     </ul>
 </div>
 
@@ -14,13 +15,41 @@
         <h3 class="mb-2">Data Bank Sampah</h3>
     </div>
     <div class="justify-self-end lg:self-center">
-        <a class="btn rounded-full bg-white" href="#">
+        <button class="btn rounded-full bg-white" type="button" onclick="modal_filter.showModal()">
             <span class="icon icon-fill me-2">filter_list</span>
             Filter
-        </a>
+        </button>
     </div>
 </div>
 
+<!-- Filter Modal -->
+<dialog id="modal_filter" class="modal modal-bottom sm:modal-middle">
+    <div class="modal-box w-full sm:max-w-sm">
+        <div class="flex items-center justify-between">
+            <h3 class="text-lg font-bold">Filter</h3>
+            <button type="button" class="btn btn-sm btn-circle btn-ghost" onclick="modal_filter.close()">✕</button>
+        </div>
+        <form action="#" method="get">
+            <fieldset class="fieldset max-w-sm">
+                <legend class="fieldset-legend">Kelurahan</legend>
+                <select class="select w-full">
+                    <option disabled selected>Pilih Kelurahan</option>
+                </select>
+            </fieldset>
+            <fieldset class="fieldset max-w-sm">
+                <legend class="fieldset-legend">RW</legend>
+                <select class="select w-full">
+                    <option disabled selected>Pilih RW</option>
+                </select>
+            </fieldset>
+            <div class="modal-action">
+                <button type="button" class="btn rounded-full" onclick="modal_filter.close()">Bersihkan</button>
+                <button type="submit" class="btn btn-primary rounded-full text-white">Terapkan Filter</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+
 <div class="h-8"></div>
 
 <div class="card bg-white shadow-sm">
diff --git a/Views/DataKecamatan/Index.cshtml b/Views/DataKecamatan/Index.cshtml
index e2a398b..c54df14 100644
--- a/Views/DataKecamatan/Index.cshtml
+++ b/Views/DataKecamatan/Index.cshtml
@@ -4,7 +4,7 @@
 
 <div class="breadcrumbs text-sm">
     <ul>
-        <li class="text-gray-500"><a>Data Kecamatan</a></li>
+        <li class="text-gray-500"><a>Master Data</a></li>
         <li>Data Kecamatan</li>
     </ul>
 </div>
@@ -15,13 +15,41 @@
         <h3 class="mb-2">Data Kecamatan</h3>
     </div>
     <div class="justify-self-end lg:self-center">
-        <a class="btn rounded-full bg-white" href="#">
+        <button class="btn rounded-full bg-white" type="button" onclick="modal_filter.showModal()">
             <span class="icon icon-fill me-2">filter_list</span>
             Filter
-        </a>
+        </button>
     </div>
 </div>
 
+<!-- Filter Modal -->
+<dialog id="modal_filter" class="modal modal-bottom sm:modal-middle">
+    <div class="modal-box w-full sm:max-w-sm">
+        <div class="flex items-center justify-between">
+            <h3 class="text-lg font-bold">Filter</h3>
+            <button type="button" class="btn btn-sm btn-circle btn-ghost" onclick="modal_filter.close()">✕</button>
+        </div>
+        <form action="#" method="get">
+            <fieldset class="fieldset max-w-sm">
+                <legend class="fieldset-legend">Kelurahan</legend>
+                <select class="select w-full">
+                    <option disabled selected>Pilih Kelurahan</option>
+                </select>
+            </fieldset>
+            <fieldset class="fieldset max-w-sm">
+                <legend class="fieldset-legend">RW</legend>
+                <select class="select w-full">
+                    <option disabled selected>Pilih RW</option>
+                </select>
+            </fieldset>
+            <div class="modal-action">
+                <button type="button" class="btn rounded-full" onclick="modal_filter.close()">Bersihkan</button>
+                <button type="submit" class="btn btn-primary rounded-full text-white">Terapkan Filter</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+
 <div class="h-8"></div>
 
 <div class="card bg-white shadow-sm">
diff --git a/Views/DataRt/Index.cshtml b/Views/DataRt/Index.cshtml
index c6e2e10..2660c92 100644
--- a/Views/DataRt/Index.cshtml
+++ b/Views/DataRt/Index.cshtml
@@ -4,7 +4,8 @@
 
 <div class="breadcrumbs text-sm">
     <ul>
-        <li class="text-gray-500"><a>Data RT</a></li>
+        <li class="text-gray-500"><a>Master Data</a></li>
+        <li>Data RT</li>
     </ul>
 </div>
 
@@ -14,13 +15,41 @@
         <h3 class="mb-2">Data RT</h3>
     </div>
     <div class="justify-self-end lg:self-center">
-        <a class="btn rounded-full bg-white" href="#">
+        <button class="btn rounded-full bg-white" type="button" onclick="modal_filter.showModal()">
             <span class="icon icon-fill me-2">filter_list</span>
             Filter
-        </a>
+        </button>
     </div>
 </div>
 
+<!-- Filter Modal -->
+<dialog id="modal_filter" class="modal modal-bottom sm:modal-middle">
+    <div class="modal-box w-full sm:max-w-sm">
+        <div class="flex items-center justify-between">
+            <h3 class="text-lg font-bold">Filter</h3>
+            <button type="button" class="btn btn-sm btn-circle btn-ghost" onclick="modal_filter.close()">✕</button>
+        </div>
+        <form action="#" method="get">
+            <fieldset class="fieldset max-w-sm">
+                <legend class="fieldset-legend">Kelurahan</legend>
+                <select class="select w-full">
+                    <option disabled selected>Pilih Kelurahan</option>
+                </select>
+            </fieldset>
+            <fieldset class="fieldset max-w-sm">
+                <legend class="fieldset-legend">RW</legend>
+                <select class="select w-full">
+                    <option disabled selected>Pilih RW</option>
+                </select>
+            </fieldset>
+            <div class="modal-action">
+                <button type="button" class="btn rounded-full" onclick="modal_filter.close()">Bersihkan</button>
+                <button type="submit" class="btn btn-primary rounded-full text-white">Terapkan Filter</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+
 <div class="h-8"></div>
 
 <div class="card bg-white shadow-sm">
diff --git a/Views/DataRw/Index.cshtml b/Views/DataRw/Index.cshtml
index 02696a0..db28b80 100644
--- a/Views/DataRw/Index.cshtml
+++ b/Views/DataRw/Index.cshtml
@@ -5,7 +5,7 @@
 <div class="breadcrumbs text-sm">
     <ul>
         <li class="text-gray-500"><a>Master Data</a></li>
-        <li><a>Data RW</a></li>
+        <li>Data RW</li>
     </ul>
 </div>
 
@@ -15,15 +15,43 @@
         <h3 class="mb-2">Data RW</h3>
     </div>
     <div class="justify-self-end lg:self-center">
-        <a class="btn rounded-full bg-white" href="#">
+        <button class="btn rounded-full bg-white" type="button" onclick="modal_filter.showModal()">
             <span class="icon icon-fill me-2">filter_list</span>
             Filter
-        </a>
+        </button>
     </div>
 </div>
 
 <div class="h-8"></div>
 
+<!-- Filter Modal -->
+<dialog id="modal_filter" class="modal modal-bottom sm:modal-middle">
+    <div class="modal-box w-full sm:max-w-sm">
+        <div class="flex items-center justify-between">
+            <h3 class="text-lg font-bold">Filter</h3>
+            <button type="button" class="btn btn-sm btn-circle btn-ghost" onclick="modal_filter.close()">✕</button>
+        </div>
+        <form action="#" method="get">
+            <fieldset class="fieldset max-w-sm">
+                <legend class="fieldset-legend">Kelurahan</legend>
+                <select class="select w-full">
+                    <option disabled selected>Pilih Kelurahan</option>
+                </select>
+            </fieldset>
+            <fieldset class="fieldset max-w-sm">
+                <legend class="fieldset-legend">RW</legend>
+                <select class="select w-full">
+                    <option disabled selected>Pilih RW</option>
+                </select>
+            </fieldset>
+            <div class="modal-action">
+                <button type="button" class="btn rounded-full" onclick="modal_filter.close()">Bersihkan</button>
+                <button type="submit" class="btn btn-primary rounded-full text-white">Terapkan Filter</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+
 <div class="card bg-white shadow-sm">
     <div class="card-body p-0">
         <table class="table-zebra table" id="example">
@@ -45,80 +73,29 @@
 
 <dialog id="rw-detail-modal" class="modal modal-bottom sm:modal-middle">
     <div class="modal-box">
-        <h3 class="text-lg font-semibold mb-4">Detail RW</h3>
-        <div class="grid grid-cols-1 md:grid-cols-2 md:gap-4">
-            <div class="flex flex-col">
-                <span class="text-gray-500">Nama Ketua RW</span>
-                <span class="font-semibold">Ahmad Kurniawan</span>
-            </div>
-            <div class="flex flex-col">
-                <span class="text-gray-500">No. HP Ketua RW</span>
-                <span class="font-semibold">2260</span>
-            </div>
-            <div class="flex flex-col">
-                <span class="text-gray-500">Jumlah KK</span>
-                <span class="font-semibold">341</span>
-            </div>
-            <div class="flex flex-col">
-                <span class="text-gray-500">Jumlah Rumah Memilah</span>
-                <span class="font-semibold" id="detail-jumlah-rumah-memilah">-</span>
-            </div>
-            <div class="flex flex-col">
-                <span class="text-gray-500">Jumlah RT</span>
-                <span class="font-semibold">9</span>
-            </div>
-            <div class="flex flex-col">
-                <span class="text-gray-500">Luas RW (m<sup>2</sup>)</span>
-                <span class="font-semibold">10</span>
-            </div>
-            <div class="flex flex-col">
-                <span class="text-gray-500">Jumlah Jiwa</span>
-                <span class="font-semibold">2260</span>
-            </div>
-            <div class="flex flex-col">
-                <span class="text-gray-500">Jumlah Timbulan Sampah Per Hari (Kg)</span>
-                <span class="font-semibold">2260</span>
-            </div>
-            <div class="flex flex-col">
-                <span class="text-gray-500">Kota / Kabupaten</span>
-                <span class="font-semibold">Kota Adm. Jakarta Barat</span>
-            </div>
-            <div class="flex flex-col">
+        <h3 class="text-lg font-semibold">Detail RW <span id="detail-rw" class="text-primary">-</span></h3>
+        <div class="mt-4 space-y-4 text-sm">
+            <div class="flex items-center justify-between border-b pb-2">
                 <span class="text-gray-500">Kecamatan</span>
                 <span class="font-semibold" id="detail-kecamatan">-</span>
             </div>
-            <div class="flex flex-col">
-                <span class="text-gray-500">Kelurahan</span>
-                <span class="font-semibold">Grogol</span>
+            <div class="flex items-center justify-between border-b pb-2">
+                <span class="text-gray-500">Jumlah Rumah Memilah</span>
+                <span class="font-semibold" id="detail-jumlah-rumah-memilah">-</span>
             </div>
-            <div class="flex flex-col">
-                <span class="text-gray-500">RW</span>
-                <span class="font-semibold" id="detail-rw">-</span>
-            </div>
-            <div class="flex flex-col">
-                <span class="text-gray-500">No. SK RW</span>
-                <span class="font-semibold">SK-/1838/83293</span>
-            </div>
-            <div class="flex flex-col">
+            <div class="flex items-center justify-between border-b pb-2">
                 <span class="text-gray-500">Jumlah Rumah Nasabah</span>
                 <span class="font-semibold" id="detail-jumlah-rumah-nasabah">-</span>
             </div>
-            <div class="flex flex-col">
+            <div class="flex items-center justify-between">
                 <span class="text-gray-500">Jumlah Bank Sampah</span>
                 <span class="font-semibold" id="detail-jumlah-bank-sampah">-</span>
             </div>
         </div>
         <div class="modal-action">
             <form method="dialog">
-                <button class="btn rounded-full">
-                    <span class="icon me-1">cancel</span>
-                    Tutup
-                </button>
+                <button class="btn">Tutup</button>
             </form>
-            <button type="button" class="btn rounded-full btn-primary">
-                <span class="icon">print</span>
-                Cetak
-            </button>
         </div>
     </div>
     <form method="dialog" class="modal-backdrop">
@@ -177,4 +154,4 @@
             detailModal.showModal();
         });
     });
-</script>
\ No newline at end of file
+</script>