From b02e9cb0ce900acb32497908aa7b792d72b37de6 Mon Sep 17 00:00:00 2001
From: vidane <vtugulan@gmail.com>
Date: Sat, 2 May 2026 18:03:49 -0400
Subject: [PATCH] Add src/components/FilterPanel.tsx

---
 src/components/FilterPanel.tsx | 112 +++++++++++++++++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 src/components/FilterPanel.tsx

diff --git a/src/components/FilterPanel.tsx b/src/components/FilterPanel.tsx
new file mode 100644
index 0000000..205a760
--- /dev/null
+++ b/src/components/FilterPanel.tsx
@@ -0,0 +1,112 @@
+'use client';
+
+import { useApp } from './AppProvider';
+
+export default function FilterPanel() {
+  const {
+    filterStatus, setFilterStatus, filterPriority, setFilterPriority,
+    filterDueBefore, setFilterDueBefore, filterDueAfter, setFilterDueAfter,
+    filterCompleted, setFilterCompleted, refreshTasks,
+  } = useApp();
+
+  const handleApply = () => {
+    refreshTasks();
+  };
+
+  const handleReset = () => {
+    setFilterStatus('');
+    setFilterPriority('');
+    setFilterDueBefore('');
+    setFilterDueAfter('');
+    setFilterCompleted('');
+  };
+
+  return (
+    <div className="bg-card border-b border-border px-4 py-3 animate-slide-in">
+      <div className="flex flex-wrap items-center gap-4">
+        {/* Status */}
+        <div>
+          <label className="block text-xs text-text-secondary mb-1">Status</label>
+          <select
+            value={filterStatus}
+            onChange={(e) => setFilterStatus(e.target.value)}
+            className="bg-content border border-border rounded px-2 py-1.5 text-sm focus:outline-none focus:border-accent"
+          >
+            <option value="">All</option>
+            <option value="todo">Todo</option>
+            <option value="in_progress">In Progress</option>
+            <option value="done">Done</option>
+          </select>
+        </div>
+
+        {/* Priority */}
+        <div>
+          <label className="block text-xs text-text-secondary mb-1">Priority</label>
+          <select
+            value={filterPriority}
+            onChange={(e) => setFilterPriority(e.target.value)}
+            className="bg-content border border-border rounded px-2 py-1.5 text-sm focus:outline-none focus:border-accent"
+          >
+            <option value="">All</option>
+            <option value="urgent">🔴 Urgent</option>
+            <option value="high">🟠 High</option>
+            <option value="medium">🟡 Medium</option>
+            <option value="low">🟢 Low</option>
+          </select>
+        </div>
+
+        {/* Due before */}
+        <div>
+          <label className="block text-xs text-text-secondary mb-1">Due before</label>
+          <input
+            type="date"
+            value={filterDueBefore}
+            onChange={(e) => setFilterDueBefore(e.target.value)}
+            className="bg-content border border-border rounded px-2 py-1.5 text-sm focus:outline-none focus:border-accent"
+          />
+        </div>
+
+        {/* Due after */}
+        <div>
+          <label className="block text-xs text-text-secondary mb-1">Due after</label>
+          <input
+            type="date"
+            value={filterDueAfter}
+            onChange={(e) => setFilterDueAfter(e.target.value)}
+            className="bg-content border border-border rounded px-2 py-1.5 text-sm focus:outline-none focus:border-accent"
+          />
+        </div>
+
+        {/* Completed */}
+        <div>
+          <label className="block text-xs text-text-secondary mb-1">Completed</label>
+          <select
+            value={filterCompleted}
+            onChange={(e) => setFilterCompleted(e.target.value)}
+            className="bg-content border border-border rounded px-2 py-1.5 text-sm focus:outline-none focus:border-accent"
+          >
+            <option value="">All</option>
+            <option value="true">Completed</option>
+            <option value="false">Not completed</option>
+          </select>
+        </div>
+
+        {/* Actions */}
+        <div className="flex gap-2 ml-auto">
+          <button
+            onClick={handleReset}
+            className="px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary transition-colors"
+          >
+            Reset
+          </button>
+          <button
+            onClick={handleApply}
+            className="px-4 py-1.5 bg-accent hover:bg-accent-hover text-white rounded text-sm transition-colors"
+          >
+            Apply
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}