Upload 3 files

app.js

@@ -13,6 +13,7 @@ const elements = {
   totalAreaRai: document.getElementById("totalAreaRai"),
   itemCount: document.getElementById("itemCount"),
   loadingOverlay: document.getElementById("loadingOverlay"),
+  clearButton: document.getElementById("clearFilters"),
 };
 
 declareLoadingRow("Loading data...");
@@ -171,6 +172,23 @@ function attachEventListeners() {
     state.adm3 = elements.adm3.value;
     updateDashboard({ fitBounds: true });
   });
+
+  if (elements.clearButton) {
+    elements.clearButton.addEventListener("click", () => {
+      state.adm1 = "";
+      state.adm2 = "";
+      state.adm3 = "";
+
+      elements.adm1.value = "";
+      elements.adm2.value = "";
+      elements.adm3.value = "";
+
+      elements.adm2.disabled = elements.adm2.options.length <= 1;
+      elements.adm3.disabled = elements.adm3.options.length <= 1;
+
+      updateDashboard({ fitBounds: true });
+    });
+  }
 }
 
 function initializeSelects() {

index.html

@@ -43,6 +43,9 @@
               <option value="">ทั้งหมด</option>
             </select>
           </label>
+          <button id="clearFilters" type="button" class="clear-btn">
+            รีเซ็ตตัวกรอง
+          </button>
         </div>
         <div class="summary">
           <div class="card">

styles.css

@@ -121,6 +121,33 @@ main.dashboard {
   min-width: 140px;
 }
 
+.filters .clear-btn {
+  align-self: stretch;
+  margin-top: auto;
+  padding: 0.6rem 1rem;
+  border: 1px solid #4aa564;
+  border-radius: 8px;
+  background: #ddf7e4;
+  color: #000000;
+  font-family: "Kanit", "Segoe UI", sans-serif;
+  font-size: 0.9rem;
+  font-weight: 400;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.15s ease, color 0.2s ease;
+  min-width: 140px;
+}
+
+.filters .clear-btn:hover {
+  background: #a9e9c0;
+}
+
+.filters .clear-btn:disabled {
+  background: #e0e7e2;
+  border-color: #d2d8d3;
+  color: #7a867c;
+  cursor: not-allowed;
+}
+
 .filters select {
   padding: 0.5rem 0.75rem;
   border: 1px solid var(--border);
@@ -283,6 +310,7 @@ main.dashboard {
   .summary {
     flex: 1 1 auto;
     width: 100%;
+    gap: 0.75rem;
   }
 }
 
@@ -305,6 +333,10 @@ main.dashboard {
     width: 100%;
   }
 
+  .filters .clear-btn {
+    width: 100%;
+  }
+
   .card {
     width: 100%;
   }