From 77dac14abc847313eb075b4091794474d4cd9620 Mon Sep 17 00:00:00 2001
From: Regiaaaaaa <gheizarafashaquille@gmail.com>
Date: Tue, 9 Dec 2025 11:44:06 +0700
Subject: [PATCH] feat: add filter dropdown

---
 Views/DashboardRw/Index.cshtml | 36 ++++++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/Views/DashboardRw/Index.cshtml b/Views/DashboardRw/Index.cshtml
index f11052c..9c33f94 100644
--- a/Views/DashboardRw/Index.cshtml
+++ b/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",