change filter year on dashboard to dropdown

resources/js/dashboards/bigdata.js

@@ -8,10 +8,10 @@ class BigData {
         try {
             this.filterYear = new Date().getFullYear(); // Set initial year
 
-            let yearInput = document.querySelector("#yearPicker");
+            let yearSelect = document.querySelector("#yearPicker");
             let filterButton = document.querySelector("#btnFilterYear");
 
-            if (!yearInput || !filterButton) {
+            if (!yearSelect || !filterButton) {
                 console.error(
                     "Element #yearPicker or #btnFilterYear not found."
                 );
@@ -19,18 +19,15 @@ class BigData {
             }
 
             // Set default value for input
-            yearInput.value = this.filterYear;
+            yearSelect.value = this.filterYear;
 
-            // Handle manual input (pressing Enter)
-            yearInput.addEventListener("keypress", (event) => {
-                if (event.key === "Enter") {
-                    this.updateYear(yearInput.value);
-                }
+            yearSelect.addEventListener("change", () => {
+                this.updateYear(yearSelect.value);
             });
 
             // Handle button click
             filterButton.addEventListener("click", () => {
-                this.updateYear(yearInput.value);
+                this.updateYear(yearSelect.value);
             });
 
             console.log("init filter this year", this.filterYear);

resources/views/dashboards/bigdata.blade.php

@@ -57,8 +57,14 @@
     </h2>
 
     <div class="d-flex justify-content-end">
-        <input type="number" class="me-3" id="yearPicker" name="year">
-        <button class="btn btn-sm btn-primary" id="btnFilterYear">filter</button>
+        <div class="d-flex">
+            <select class="me-2 form-select" id="yearPicker" name="year">
+            @for ($i = date('Y'); $i > date('Y') - 5; $i--)
+                <option value="{{ $i }}" {{ $i == date('Y') ? 'selected' : '' }}>{{ $i }}</option>
+            @endfor
+            </select>
+            <button class="btn btn-sm btn-primary" id="btnFilterYear">Filter</button>
+        </div>
     </div>
     <div id="dashboard-fixed-container" style="width:1110px;height:770px;position:relative;margin:auto;">
         @component('components.circle', [