From 6dbe6c09cbdfeb4283fa78201a01ad5df8eab6cf Mon Sep 17 00:00:00 2001
From: Regiaaaaaa <gheizarafashaquille@gmail.com>
Date: Wed, 10 Dec 2025 08:58:54 +0700
Subject: [PATCH] feat: add filter dropdown admin dashboard

---
 Views/Dashboard/Index.cshtml   | 31 ++++++++++++++++++++++++++++++-
 Views/DashboardRw/Index.cshtml | 10 ++++++++--
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/Views/Dashboard/Index.cshtml b/Views/Dashboard/Index.cshtml
index 7cd69ae..ab99fd1 100644
--- a/Views/Dashboard/Index.cshtml
+++ b/Views/Dashboard/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">
@@ -201,6 +209,27 @@
 <script src="/lib/chart.js/chart.umd.js"></script>
 
 <script>
+
+    // Filter period handler
+    const filterPeriod = document.getElementById('filterPeriod');
+    const monthPicker = document.getElementById('monthPicker');
+    const now = new Date();
+    const currentMonth = now.toISOString().slice(0, 7); 
+    monthPicker.value = currentMonth;
+    
+    filterPeriod.addEventListener('change', function() {
+        if (this.value === 'Bulanan') {
+            monthPicker.classList.remove('hidden');
+            monthPicker.value = currentMonth;
+        } 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
diff --git a/Views/DashboardRw/Index.cshtml b/Views/DashboardRw/Index.cshtml
index 9c33f94..a839819 100644
--- a/Views/DashboardRw/Index.cshtml
+++ b/Views/DashboardRw/Index.cshtml
@@ -213,18 +213,24 @@
 <script src="/lib/chart.js/chart.umd.js"></script>
 
 <script>
+
     // Filter period handler
     const filterPeriod = document.getElementById('filterPeriod');
     const monthPicker = document.getElementById('monthPicker');
-    
+    const now = new Date();
+    const currentMonth = now.toISOString().slice(0, 7); 
+    monthPicker.value = currentMonth;
+
     filterPeriod.addEventListener('change', function() {
         if (this.value === 'Bulanan') {
             monthPicker.classList.remove('hidden');
+            
+            monthPicker.value = currentMonth;
         } else {
             monthPicker.classList.add('hidden');
         }
     });
-    
+
     monthPicker.addEventListener('change', function() {
         console.log('Selected month:', this.value);
     });