feat: add filter

Views/DataBeratSampah/Index.cshtml

@@ -21,6 +21,49 @@
     </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 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 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>
+                <button type="submit" class="btn btn-neutral">Terapkan Filter</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+
 <div class="h-8"></div>
 
 <div class="card bg-white shadow-sm">
@@ -48,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", "DataBeratSampah")',
             scrollX: true,