-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/components/forms/forms-toolbar.tsx b/components/forms/forms-toolbar.tsx
new file mode 100644
index 0000000..8538e0f
--- /dev/null
+++ b/components/forms/forms-toolbar.tsx
@@ -0,0 +1,190 @@
+import { useState, useEffect, useRef } from "react"
+import { Search, Filter, ArrowUpDown, Clock, X } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+type StatusFilter = "all" | "has_responses" | "no_responses"
+type SortBy = "created_at" | "updated_at"
+type SortDir = "newest" | "oldest"
+
+const STATUS_OPTIONS: { label: string; value: StatusFilter }[] = [
+ { label: "All Status", value: "all" },
+ { label: "Has Responses", value: "has_responses" },
+ { label: "No Responses", value: "no_responses" },
+]
+
+const SORT_OPTIONS: { label: string; value: SortBy }[] = [
+ { label: "Created", value: "created_at" },
+ { label: "Updated", value: "updated_at" },
+]
+
+const ORDER_OPTIONS: { label: string; value: SortDir }[] = [
+ { label: "Newest first", value: "newest" },
+ { label: "Oldest first", value: "oldest" },
+]
+
+interface FormsToolbarProps {
+ search: string
+ status: StatusFilter
+ sortBy: SortBy
+ sortDir: SortDir
+ onSearchChange: (value: string) => void
+ onStatusChange: (status: StatusFilter) => void
+ onSortChange: (sort: SortBy) => void
+ onOrderChange: (order: SortDir) => void
+}
+
+export function FormsToolbar({
+ search,
+ status,
+ sortBy,
+ sortDir,
+ onSearchChange,
+ onStatusChange,
+ onSortChange,
+ onOrderChange,
+}: FormsToolbarProps) {
+ const [openDropdown, setOpenDropdown] = useState
(null)
+ const toolbarRef = useRef(null)
+
+ useEffect(() => {
+ function handleClickOutside(e: MouseEvent) {
+ if (toolbarRef.current && !toolbarRef.current.contains(e.target as Node)) {
+ setOpenDropdown(null)
+ }
+ }
+ document.addEventListener("mousedown", handleClickOutside)
+ return () => document.removeEventListener("mousedown", handleClickOutside)
+ }, [])
+
+ function toggleDropdown(name: string) {
+ setOpenDropdown((prev) => (prev === name ? null : name))
+ }
+
+ const statusLabel = STATUS_OPTIONS.find((o) => o.value === status)?.label ?? "All Status"
+ const sortLabel = SORT_OPTIONS.find((o) => o.value === sortBy)?.label ?? "Created"
+ const orderLabel = ORDER_OPTIONS.find((o) => o.value === sortDir)?.label ?? "Newest first"
+
+ return (
+
+
+
+
+ onSearchChange(e.target.value)}
+ className="w-full min-w-0 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
+ />
+ {search && (
+
+ )}
+
+
+
+
+
+
+ }
+ label={statusLabel}
+ open={openDropdown === "status"}
+ onToggle={() => toggleDropdown("status")}
+ options={STATUS_OPTIONS}
+ value={status}
+ onSelect={(v) => {
+ onStatusChange(v)
+ setOpenDropdown(null)
+ }}
+ />
+
+ }
+ label={`Sort: ${sortLabel}`}
+ open={openDropdown === "sort"}
+ onToggle={() => toggleDropdown("sort")}
+ options={SORT_OPTIONS}
+ value={sortBy}
+ onSelect={(v) => {
+ onSortChange(v)
+ setOpenDropdown(null)
+ }}
+ />
+
+ }
+ label={orderLabel}
+ open={openDropdown === "order"}
+ onToggle={() => toggleDropdown("order")}
+ options={ORDER_OPTIONS}
+ value={sortDir}
+ onSelect={(v) => {
+ onOrderChange(v)
+ setOpenDropdown(null)
+ }}
+ />
+
+
+
+
+
+ {open && (
+
+ {options.map((option) => (
+
+ ))}
+
+ )}
+