feat: add filter dropdown

Views/DashboardRw/Index.cshtml

@@ -6,8 +6,16 @@
     <!-- Profil RW -->
     <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 lg:flex-row">
+            <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>
+                <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>
+                        <option>Bulanan</option>
+                        <option>Harian</option>
+                    </select>
+                    <input type="month" id="monthPicker" class="input input-bordered input-sm w-40 hidden" placeholder="Pilih Bulan">
+                </div>
             </div>
             <div class="h-2"></div>
             <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 xl:grid-cols-4">
@@ -205,6 +213,22 @@
 <script src="/lib/chart.js/chart.umd.js"></script>
 
 <script>
+    // Filter period handler
+    const filterPeriod = document.getElementById('filterPeriod');
+    const monthPicker = document.getElementById('monthPicker');
+    
+    filterPeriod.addEventListener('change', function() {
+        if (this.value === 'Bulanan') {
+            monthPicker.classList.remove('hidden');
+        } else {
+            monthPicker.classList.add('hidden');
+        }
+    });
+    
+    monthPicker.addEventListener('change', function() {
+        console.log('Selected month:', this.value);
+    });
+
     const labels = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
 
     // contoh data variasi
@@ -241,11 +265,11 @@
       options: {
         responsive: true,
         maintainAspectRatio: false,
-                  layout: {
-      padding: {
-        bottom: 32  // kecilkan padding
-      }
-    },
+        layout: {
+          padding: {
+            bottom: 32  // kecilkan padding
+          }
+        },
         plugins: {
           legend: {
             position: "bottom",