From 5b3c7eb55d7fc6cf0518d5d69b72b90d873e352b Mon Sep 17 00:00:00 2001
From: Regiaaaaaa <gheizarafashaquille@gmail.com>
Date: Wed, 26 Nov 2025 17:22:51 +0700
Subject: [PATCH] feat: create filter with tom select

---
 Views/ChecklistHarian/Index.cshtml            | 30 +++++-----
 Views/DataBankSampah/Index.cshtml             | 45 +++++++++++---
 Views/DataKecamatan/Index.cshtml              | 45 +++++++++++---
 Views/DataKecamatanRumahMemilah/Index.cshtml  | 52 +++++++++++++++--
 Views/DataRt/Index.cshtml                     | 45 +++++++++++---
 Views/DataRumahRumah/Index.cshtml             | 44 +++++++++++---
 Views/DataRumahRw/Index.cshtml                | 22 ++++---
 Views/DataRw/Index.cshtml                     | 45 +++++++++++---
 .../Index.cshtml                              | 52 +++++++++++++++--
 Views/LaporanRw/Index.cshtml                  | 58 ++++++++++++++++---
 Views/RumahMemilah/Index.cshtml               | 50 ++++++++++++++--
 11 files changed, 400 insertions(+), 88 deletions(-)

diff --git a/Views/ChecklistHarian/Index.cshtml b/Views/ChecklistHarian/Index.cshtml
index 124563b..02bd538 100644
--- a/Views/ChecklistHarian/Index.cshtml
+++ b/Views/ChecklistHarian/Index.cshtml
@@ -70,27 +70,27 @@
                 <legend class="fieldset-legend">Kelurahan</legend>
                 <select id="kelurahanSelect" class="w-full">
                     <option value="">Pilih Kelurahan</option>
-                    <option value="Sukamaju">Kelurahan Sukamaju</option>
-                    <option value="Sukadamai">Kelurahan Sukadamai</option>
-                    <option value="Mekarsari">Kelurahan Mekarsari</option>
-                    <option value="HarapanJaya">Kelurahan Harapan Jaya</option>
-                    <option value="Cibinong">Kelurahan Cibinong</option>
+                    <option value="Sukamaju">Sukamaju</option>
+                    <option value="Sukadamai">Sukadamai</option>
+                    <option value="Mekarsari">Mekarsari</option>
+                    <option value="HarapanJaya">Harapan Jaya</option>
+                    <option value="Cibinong">Cibinong</option>
                 </select>
             </fieldset>
             <fieldset class="fieldset mt-4">
                 <legend class="fieldset-legend">RW</legend>
                 <select id="rwSelect" class="w-full">
                     <option value="">Pilih RW</option>
-                    <option value="01">RW 01</option>
-                    <option value="02">RW 02</option>
-                    <option value="03">RW 03</option>
-                    <option value="04">RW 04</option>
-                    <option value="05">RW 05</option>
-                    <option value="06">RW 06</option>
-                    <option value="07">RW 07</option>
-                    <option value="08">RW 08</option>
-                    <option value="09">RW 09</option>
-                    <option value="10">RW 10</option>
+                    <option value="01">01</option>
+                    <option value="02">02</option>
+                    <option value="03">03</option>
+                    <option value="04">04</option>
+                    <option value="05">05</option>
+                    <option value="06">06</option>
+                    <option value="07">07</option>
+                    <option value="08">08</option>
+                    <option value="09">09</option>
+                    <option value="10">10</option>
                 </select>
             </fieldset>
             <fieldset class="fieldset mt-4">
diff --git a/Views/DataBankSampah/Index.cshtml b/Views/DataBankSampah/Index.cshtml
index ab032f0..a2afacf 100644
--- a/Views/DataBankSampah/Index.cshtml
+++ b/Views/DataBankSampah/Index.cshtml
@@ -31,16 +31,31 @@
         </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>
+                    <legend class="fieldset-legend">Kelurahan</legend>
+                    <select id="filter-kelurahan" class="w-full">
+                        <option value="">Pilih Kelurahan</option>
+                        <option value="Sukamaju">Sukamaju</option>
+                        <option value="Sukadamai">Sukadamai</option>
+                        <option value="Mekarsari">Mekarsari</option>
+                        <option value="HarapanJaya">Harapan Jaya</option>
+                        <option value="Cibinong">Cibinong</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>
+                    <legend class="fieldset-legend">RW</legend>
+                    <select id="filter-rw" class="w-full">
+                        <option value="">Pilih RW</option>
+                        <option value="01">01</option>
+                        <option value="02">02</option>
+                        <option value="03">03</option>
+                        <option value="04">04</option>
+                        <option value="05">05</option>
+                        <option value="06">06</option>
+                        <option value="07">07</option>
+                        <option value="08">08</option>
+                        <option value="09">09</option>
+                        <option value="10">10</option>
+                    </select>
             </fieldset>
             <div class="modal-action">
                 <button type="button" class="btn" onclick="modal_filter.close()">Bersihkan</button>
@@ -76,10 +91,24 @@
 <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>
+<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
 <script type="text/javascript">
     var table;
 
     $(document).ready(function () {
+        new TomSelect("#filter-kelurahan", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih Kelurahan",
+        });
+
+        new TomSelect("#filter-rw", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih RW",
+        });
+        
         table = new DataTable('#example', {
             ajax: '@Url.Action("Table", "DataBankSampah")',
             scrollX: true,
diff --git a/Views/DataKecamatan/Index.cshtml b/Views/DataKecamatan/Index.cshtml
index 5898eb3..e9ccb85 100644
--- a/Views/DataKecamatan/Index.cshtml
+++ b/Views/DataKecamatan/Index.cshtml
@@ -31,16 +31,31 @@
         </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>
+                    <legend class="fieldset-legend">Kelurahan</legend>
+                    <select id="filter-kelurahan" class="w-full">
+                        <option value="">Pilih Kelurahan</option>
+                        <option value="Sukamaju">Sukamaju</option>
+                        <option value="Sukadamai">Sukadamai</option>
+                        <option value="Mekarsari">Mekarsari</option>
+                        <option value="HarapanJaya">Harapan Jaya</option>
+                        <option value="Cibinong">Cibinong</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>
+                    <legend class="fieldset-legend">RW</legend>
+                    <select id="filter-rw" class="w-full">
+                        <option value="">Pilih RW</option>
+                        <option value="01">01</option>
+                        <option value="02">02</option>
+                        <option value="03">03</option>
+                        <option value="04">04</option>
+                        <option value="05">05</option>
+                        <option value="06">06</option>
+                        <option value="07">07</option>
+                        <option value="08">08</option>
+                        <option value="09">09</option>
+                        <option value="10">10</option>
+                    </select>
             </fieldset>
             <div class="modal-action">
                 <button type="button" class="btn" onclick="modal_filter.close()">Bersihkan</button>
@@ -75,10 +90,24 @@
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
 <script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
 <script type="text/javascript">
     var table;
 
     $(document).ready(function () {
+        new TomSelect("#filter-kelurahan", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih Kelurahan",
+        });
+
+        new TomSelect("#filter-rw", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih RW",
+        });
+        
         table = new DataTable('#example', {
             ajax: '@Url.Action("Table", "DataKecamatan")',
             scrollX: true,
diff --git a/Views/DataKecamatanRumahMemilah/Index.cshtml b/Views/DataKecamatanRumahMemilah/Index.cshtml
index 4edb5b2..c213a39 100644
--- a/Views/DataKecamatanRumahMemilah/Index.cshtml
+++ b/Views/DataKecamatanRumahMemilah/Index.cshtml
@@ -32,20 +32,40 @@
         <form action="#" method="get">
             <fieldset class="fieldset max-w-sm">
                 <legend class="fieldset-legend">Kecamatan</legend>
-                <select class="select w-full">
-                    <option disabled selected>Pilih Kecamatan</option>
+                <select id="kecamatanSelect" class="w-full">
+                    <option value="">Pilih Kecamatan</option>
+                    <option value="Matraman">Matraman</option>
+                    <option value="Pulogadung">Pulogadung</option>
+                    <option value="Jatinegara">Jatinegara</option>
+                    <option value="Kramat Jati">Kramat Jati</option>
+                    <option value="Pasar Rebo">Pasar Rebo</option>
                 </select>
             </fieldset>
             <fieldset class="fieldset max-w-sm">
                 <legend class="fieldset-legend">Kelurahan</legend>
-                <select class="select w-full">
-                    <option disabled selected>Pilih Kelurahan</option>
+                <select id="kelurahanSelect" class="w-full">
+                    <option value="">Pilih Kelurahan</option>
+                    <option value="Sukamaju">Sukamaju</option>
+                    <option value="Sukadamai">Sukadamai</option>
+                    <option value="Mekarsari">Mekarsari</option>
+                    <option value="HarapanJaya">Harapan Jaya</option>
+                    <option value="Cibinong">Cibinong</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 id="rwSelect" class="w-full">
+                    <option value="">Pilih RW</option>
+                    <option value="01">01</option>
+                    <option value="02">02</option>
+                    <option value="03">03</option>
+                    <option value="04">04</option>
+                    <option value="05">05</option>
+                    <option value="06">06</option>
+                    <option value="07">07</option>
+                    <option value="08">08</option>
+                    <option value="09">09</option>
+                    <option value="10">10</option>
                 </select>
             </fieldset>
             <div class="modal-action">
@@ -80,10 +100,30 @@
 <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>
+<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
 <script type="text/javascript">
     var table;
 
     $(document).ready(function () {
+        new TomSelect("#kecamatanSelect", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih Kecamatan",
+        });
+
+        new TomSelect("#kelurahanSelect", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih Kelurahan",
+        });
+
+        new TomSelect("#rwSelect", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih RW",
+        });
+
         table = new DataTable('#example', {
             ajax: '@Url.Action("Table", "DataKecamatanRumahMemilah")',
             scrollX: true,
diff --git a/Views/DataRt/Index.cshtml b/Views/DataRt/Index.cshtml
index a645f51..acbed15 100644
--- a/Views/DataRt/Index.cshtml
+++ b/Views/DataRt/Index.cshtml
@@ -31,16 +31,31 @@
         </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>
+                    <legend class="fieldset-legend">Kelurahan</legend>
+                    <select id="filter-kelurahan" class="w-full">
+                        <option value="">Pilih Kelurahan</option>
+                        <option value="Sukamaju">Sukamaju</option>
+                        <option value="Sukadamai">Sukadamai</option>
+                        <option value="Mekarsari">Mekarsari</option>
+                        <option value="HarapanJaya">Harapan Jaya</option>
+                        <option value="Cibinong">Cibinong</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>
+                    <legend class="fieldset-legend">RW</legend>
+                    <select id="filter-rw" class="w-full">
+                        <option value="">Pilih RW</option>
+                        <option value="01">01</option>
+                        <option value="02">02</option>
+                        <option value="03">03</option>
+                        <option value="04">04</option>
+                        <option value="05">05</option>
+                        <option value="06">06</option>
+                        <option value="07">07</option>
+                        <option value="08">08</option>
+                        <option value="09">09</option>
+                        <option value="10">10</option>
+                    </select>
             </fieldset>
             <div class="modal-action">
                 <button type="button" class="btn" onclick="modal_filter.close()">Bersihkan</button>
@@ -71,10 +86,24 @@
 <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>
+<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
 <script type="text/javascript">
     var table;
 
     $(document).ready(function () {
+        new TomSelect("#filter-kelurahan", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih Kelurahan",
+        });
+
+        new TomSelect("#filter-rw", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih RW",
+        });
+
         table = new DataTable('#example', {
             ajax: '@Url.Action("Table", "DataRt")',
             scrollX: true,
diff --git a/Views/DataRumahRumah/Index.cshtml b/Views/DataRumahRumah/Index.cshtml
index c360383..060f5a6 100644
--- a/Views/DataRumahRumah/Index.cshtml
+++ b/Views/DataRumahRumah/Index.cshtml
@@ -119,17 +119,25 @@
         <form id="form-filter" action="#" method="get">
             <fieldset class="fieldset max-w-sm">
                 <legend class="fieldset-legend">Kelurahan</legend>
-                <select id="filter-kelurahan" name="kelurahan" class="select w-full">
-                    <option disabled selected>Pilih Kelurahan</option>
-                    <option value="Cempaka Putih Barat">Cempaka Putih Barat</option>
-                    <option value="Cempaka Putih Timur">Cempaka Putih Timur</option>
+                <select id="filter-kelurahan" name="kelurahan" class="w-full">
+                    <option value="">Pilih Kelurahan</option>
+                    <option value="Duren Sawit">Duren Sawit</option>
+                    <option value="Pondok Bambu">Pondok Bambu</option>
+                    <option value="Rawamangun">Rawamangun</option>
+                    <option value="Cengkareng Barat">Cengkareng Barat</option>
+                    <option value="Kembangan Selatan">Kembangan Selatan</option>
+                    <option value="Tanjung Duren Utara">Tanjung Duren Utara</option>
+                    <option value="Sunter Jaya">Sunter Jaya</option>
+                    <option value="Kelapa Gading Timur">Kelapa Gading Timur</option>
+                    <option value="Pademangan Barat">Pademangan Barat</option>
+                    <option value="Koja">Koja</option>
                 </select>
             </fieldset>
 
             <fieldset class="fieldset max-w-sm">
                 <legend class="fieldset-legend">RW</legend>
-                <select id="filter-rw" name="rw" class="select w-full">
-                    <option disabled selected>Pilih RW</option>
+                <select id="filter-rw" name="rw" class="w-full">
+                    <option value="">Pilih RW</option>
                     <option value="01">01</option>
                     <option value="02">02</option>
                     <option value="03">03</option>
@@ -138,8 +146,8 @@
 
             <fieldset class="fieldset max-w-sm">
                 <legend class="fieldset-legend">RT</legend>
-                <select id="filter-rt" name="rt" class="select w-full">
-                    <option disabled selected>Pilih RT</option>
+                <select id="filter-rt" name="rt" class="w-full">
+                    <option value="">Pilih RT</option>
                     <option value="001">001</option>
                     <option value="002">002</option>
                     <option value="003">003</option>
@@ -181,11 +189,31 @@
 <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
 <script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
 
 <script type="text/javascript">
     var table;
 
     $(document).ready(function () {
+        new TomSelect("#filter-kelurahan", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih Kelurahan",
+        });
+
+        new TomSelect("#filter-rw", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih RW",
+        });
+
+        new TomSelect("#filter-rt", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih RT",
+        });
+
         table = new DataTable('#example', {
             ajax: '@Url.Action("Table", "DataRumahRumah")',
             scrollX: true,
diff --git a/Views/DataRumahRw/Index.cshtml b/Views/DataRumahRw/Index.cshtml
index 5871cc2..ca7f115 100644
--- a/Views/DataRumahRw/Index.cshtml
+++ b/Views/DataRumahRw/Index.cshtml
@@ -106,13 +106,13 @@
             </fieldset>
             <fieldset class="fieldset max-w-sm">
                 <legend class="fieldset-legend">RT</legend>
-                <select class="select w-full">
-                    <option disabled selected>Pilih RT</option>
-                    <option>001</option>
-                    <option>002</option>
-                    <option>003</option>
-                    <option>004</option>
-                    <option>005</option>
+                <select id="rtSelect" class="w-full">
+                    <option value="">Pilih RT</option>
+                    <option value="001">001</option>
+                    <option value="002">002</option>
+                    <option value="003">003</option>
+                    <option value="004">004</option>
+                    <option value="005">005</option>
                 </select>
             </fieldset>
             <div class="modal-action">
@@ -288,11 +288,19 @@
 <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
 <script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
 
 <script type="text/javascript">
     var table;
 
     $(document).ready(function () {
+        new TomSelect("#rtSelect", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih RT",
+        });
+        
         table = new DataTable('#example', {
             ajax: '@Url.Action("Table", "DataRumahRw")',
             scrollX: true,
diff --git a/Views/DataRw/Index.cshtml b/Views/DataRw/Index.cshtml
index ec512f5..cf28dfe 100644
--- a/Views/DataRw/Index.cshtml
+++ b/Views/DataRw/Index.cshtml
@@ -33,16 +33,31 @@
         </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>
+                    <legend class="fieldset-legend">Kelurahan</legend>
+                    <select id="filter-kelurahan" class="w-full">
+                        <option value="">Pilih Kelurahan</option>
+                        <option value="Sukamaju">Sukamaju</option>
+                        <option value="Sukadamai">Sukadamai</option>
+                        <option value="Mekarsari">Mekarsari</option>
+                        <option value="HarapanJaya">Harapan Jaya</option>
+                        <option value="Cibinong">Cibinong</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>
+                    <legend class="fieldset-legend">RW</legend>
+                    <select id="filter-rw" class="w-full">
+                        <option value="">Pilih RW</option>
+                        <option value="01">01</option>
+                        <option value="02">02</option>
+                        <option value="03">03</option>
+                        <option value="04">04</option>
+                        <option value="05">05</option>
+                        <option value="06">06</option>
+                        <option value="07">07</option>
+                        <option value="08">08</option>
+                        <option value="09">09</option>
+                        <option value="10">10</option>
+                    </select>
             </fieldset>
             <div class="modal-action">
                 <button type="button" class="btn" onclick="modal_filter.close()">Bersihkan</button>
@@ -160,10 +175,24 @@
 <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>
+<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
 <script type="text/javascript">
     var table;
 
     $(document).ready(function () {
+        new TomSelect("#filter-kelurahan", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih Kelurahan",
+        });
+
+        new TomSelect("#filter-rw", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih RW",
+        });
+
         const detailModal = document.getElementById('rw-detail-modal');
         const detailElements = {
             rw: document.getElementById('detail-rw'),
diff --git a/Views/DataVerifikasiChecklistHarian/Index.cshtml b/Views/DataVerifikasiChecklistHarian/Index.cshtml
index 8a8a395..d71236e 100644
--- a/Views/DataVerifikasiChecklistHarian/Index.cshtml
+++ b/Views/DataVerifikasiChecklistHarian/Index.cshtml
@@ -38,20 +38,40 @@
                 </fieldset>
                 <fieldset class="fieldset max-w-sm">
                     <legend class="fieldset-legend">Kecamatan</legend>
-                    <select class="select w-full">
-                        <option disabled selected>Pilih Kecamatan</option>
+                    <select id="filter-kecamatan" class="w-full">
+                        <option value="">Pilih Kecamatan</option>
+                        <option value="Matraman">Matraman</option>
+                        <option value="Pulogadung">Pulogadung</option>
+                        <option value="Jatinegara">Jatinegara</option>
+                        <option value="Kramat Jati">Kramat Jati</option>
+                        <option value="Pasar Rebo">Pasar Rebo</option>
                     </select>
                 </fieldset>
                 <fieldset class="fieldset max-w-sm">
                     <legend class="fieldset-legend">Kelurahan</legend>
-                    <select class="select w-full">
-                        <option disabled selected>Pilih Kelurahan</option>
+                    <select id="filter-kelurahan" class="w-full">
+                        <option value="">Pilih Kelurahan</option>
+                        <option value="Sukamaju">Sukamaju</option>
+                        <option value="Sukadamai">Sukadamai</option>
+                        <option value="Mekarsari">Mekarsari</option>
+                        <option value="HarapanJaya">Harapan Jaya</option>
+                        <option value="Cibinong">Cibinong</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 id="filter-rw" class="w-full">
+                        <option value="">Pilih RW</option>
+                        <option value="01">01</option>
+                        <option value="02">02</option>
+                        <option value="03">03</option>
+                        <option value="04">04</option>
+                        <option value="05">05</option>
+                        <option value="06">06</option>
+                        <option value="07">07</option>
+                        <option value="08">08</option>
+                        <option value="09">09</option>
+                        <option value="10">10</option>
                     </select>
                 </fieldset>
                 <fieldset class="fieldset max-w-sm">
@@ -96,10 +116,30 @@
 <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>
+<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
 <script type="text/javascript">
     var table;
 
     $(document).ready(function () {
+        new TomSelect("#filter-kecamatan", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih Kecamatan",
+        });
+
+        new TomSelect("#filter-kelurahan", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih Kelurahan",
+        });
+
+        new TomSelect("#filter-rw", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih RW",
+        });
+                
         table = new DataTable('#example', {
             ajax: '@Url.Action("Table", "DataVerifikasiChecklistHarian")',
             scrollX: true,
diff --git a/Views/LaporanRw/Index.cshtml b/Views/LaporanRw/Index.cshtml
index 79f05bf..5b98d63 100644
--- a/Views/LaporanRw/Index.cshtml
+++ b/Views/LaporanRw/Index.cshtml
@@ -44,26 +44,48 @@
                 </fieldset>
                 <fieldset class="fieldset max-w-sm">
                     <legend class="fieldset-legend">Kecamatan</legend>
-                    <select class="select w-full">
-                        <option disabled selected>Pilih Kecamatan</option>
+                    <select id="filter-kecamatan" class="w-full">
+                        <option value="">Pilih Kecamatan</option>
+                        <option value="Matraman">Matraman</option>
+                        <option value="Pulogadung">Pulogadung</option>
+                        <option value="Jatinegara">Jatinegara</option>
+                        <option value="Kramat Jati">Kramat Jati</option>
+                        <option value="Pasar Rebo">Pasar Rebo</option>
                     </select>
                 </fieldset>
                 <fieldset class="fieldset max-w-sm">
                     <legend class="fieldset-legend">Kelurahan</legend>
-                    <select class="select w-full">
-                        <option disabled selected>Pilih Kelurahan</option>
+                    <select id="filter-kelurahan" class="w-full">
+                        <option value="">Pilih Kelurahan</option>
+                        <option value="Sukamaju">Sukamaju</option>
+                        <option value="Sukadamai">Sukadamai</option>
+                        <option value="Mekarsari">Mekarsari</option>
+                        <option value="HarapanJaya">Harapan Jaya</option>
+                        <option value="Cibinong">Cibinong</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 id="filter-rw" class="w-full">
+                        <option value="">Pilih RW</option>
+                        <option value="01">01</option>
+                        <option value="02">02</option>
+                        <option value="03">03</option>
+                        <option value="04">04</option>
+                        <option value="05">05</option>
+                        <option value="06">06</option>
+                        <option value="07">07</option>
+                        <option value="08">08</option>
+                        <option value="09">09</option>
+                        <option value="10">10</option>
                     </select>
                 </fieldset>
                 <fieldset class="fieldset max-w-sm">
                     <legend class="fieldset-legend">Status</legend>
-                    <select class="select w-full">
+                    <select id="filter-status" class="select w-full">
                         <option disabled selected>Pilih Status</option>
+                        <option value="verifikasi">Verifikasi</option>
+                        <option value="belum">Belum Verifikasi</option>
                     </select>
                 </fieldset>
             </p>
@@ -153,10 +175,30 @@
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
 <script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
 <script type="text/javascript">
     var table;
 
     $(document).ready(function () {
+        new TomSelect("#filter-kecamatan", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih Kecamatan",
+        });
+
+        new TomSelect("#filter-kelurahan", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih Kelurahan",
+        });
+
+        new TomSelect("#filter-rw", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih RW",
+        });
+
         table = new DataTable('#example', {
             ajax: '@Url.Action("Table", "LaporanRw")',
             scrollX: true,
@@ -226,4 +268,4 @@
             });
         });
     });
-</script>
+</script>
\ No newline at end of file
diff --git a/Views/RumahMemilah/Index.cshtml b/Views/RumahMemilah/Index.cshtml
index ebe1f9a..0288322 100644
--- a/Views/RumahMemilah/Index.cshtml
+++ b/Views/RumahMemilah/Index.cshtml
@@ -32,20 +32,38 @@
         <form action="#" method="get">
             <fieldset class="fieldset max-w-sm">
                 <legend class="fieldset-legend">Kecamatan</legend>
-                <select class="select w-full">
-                    <option disabled selected>Pilih Kecamatan</option>
+                <select id="kecamatanSelect" class="w-full">
+                    <option value="">Pilih Kecamatan</option>
+                    <option value="Kecamatan1">Cakung</option>
+                    <option value="Kecamatan2">Pasar Rebo</option>
+                    <option value="Kecamatan3">Ciracas</option>
                 </select>
             </fieldset>
             <fieldset class="fieldset max-w-sm">
                 <legend class="fieldset-legend">Kelurahan</legend>
-                <select class="select w-full">
-                    <option disabled selected>Pilih Kelurahan</option>
+                <select id="kelurahanSelect" class="w-full">
+                    <option value="">Pilih Kelurahan</option>
+                    <option value="Sukamaju">Sukamaju</option>
+                    <option value="Sukadamai">Sukadamai</option>
+                    <option value="Mekarsari">Mekarsari</option>
+                    <option value="HarapanJaya">Harapan Jaya</option>
+                    <option value="Cibinong">Cibinong</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 id="rwSelect" class="w-full">
+                    <option value="">Pilih RW</option>
+                    <option value="01">01</option>
+                    <option value="02">02</option>
+                    <option value="03">03</option>
+                    <option value="04">04</option>
+                    <option value="05">05</option>
+                    <option value="06">06</option>
+                    <option value="07">07</option>
+                    <option value="08">08</option>
+                    <option value="09">09</option>
+                    <option value="10">10</option>
                 </select>
             </fieldset>
             <div class="modal-action">
@@ -81,10 +99,30 @@
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
 <script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
 <script type="text/javascript">
     var table;
 
     $(document).ready(function () {
+        new TomSelect("#kecamatanSelect", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih Kecamatan",
+        });
+
+        new TomSelect("#kelurahanSelect", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih Kelurahan",
+        });
+
+        new TomSelect("#rwSelect", {
+            closeAfterSelect: true,
+            maxItems: 1,
+            placeholder: "Pilih RW",
+        });
+
         table = new DataTable('#example', {
             ajax: '@Url.Action("Table", "RumahMemilah")',
             scrollX: true,