Implement Volunteer Table Sort Modal

src/components/volunteers/ColumnSelector.tsx

@@ -0,0 +1,72 @@
+import React, { useState, useRef, useEffect } from "react";
+
+export interface SelectorColumn {
+  id: string;
+  label: string;
+  icon: React.ElementType;
+}
+
+interface ColumnSelectorProps {
+  columns: SelectorColumn[];
+  onSelect: (colId: string) => void;
+  placeholder?: string;
+}
+
+export const ColumnSelector = ({
+  columns,
+  onSelect,
+  placeholder = "Select column...",
+}: ColumnSelectorProps): React.JSX.Element => {
+  const [search, setSearch] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setTimeout(() => inputRef.current?.focus(), 0);
+  }, []);
+
+  const visibleColumns = columns.filter((col) =>
+    col.label.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <>
+      <input
+        ref={inputRef}
+        type="text"
+        placeholder={placeholder}
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            if (visibleColumns.length > 0 && visibleColumns[0]) {
+              onSelect(visibleColumns[0].id);
+            }
+          }
+        }}
+        className="w-full bg-gray-50 border border-gray-200 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-secondary-purple"
+      />
+      <div className="flex flex-col max-h-60 overflow-y-auto mt-2">
+        {visibleColumns.length > 0 ? (
+          visibleColumns.map((col) => {
+            const Icon = col.icon;
+            return (
+              <button
+                key={col.id}
+                onClick={() => onSelect(col.id)}
+                className="text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2"
+              >
+                <Icon className="w-4 h-4 text-gray-400 shrink-0" />
+                <span>{col.label}</span>
+              </button>
+            );
+          })
+        ) : (
+          <p className="text-xs text-gray-500 italic p-2 text-center">
+            No available columns
+          </p>
+        )}
+      </div>
+    </>
+  );
+};

src/components/volunteers/FilterBar.tsx

@@ -1,16 +1,20 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { FilterTuple } from "@/lib/api/getVolunteersByMultipleColumns";
-import { ChevronDown, Plus } from "lucide-react";
+import { ChevronDown, Plus, ArrowUpDown } from "lucide-react";
+import { SortingState } from "@tanstack/react-table";
 import clsx from "clsx";
 import { FILTERABLE_COLUMNS } from "./volunteerColumns";
 import { FilterModal, filterModalAlignRight } from "./FilterModal";
+import { SortModal } from "./SortModal";
 
 interface FilterBarProps {
   filters: FilterTuple[];
   setFilters: React.Dispatch<React.SetStateAction<FilterTuple[]>>;
   globalOp: "AND" | "OR";
   setGlobalOp: (op: "AND" | "OR") => void;
   optionsData: Record<string, string[]>;
+  sorting: SortingState;
+  setSorting: React.Dispatch<React.SetStateAction<SortingState>>;
 }
 
 export const FilterBar = ({
@@ -19,13 +23,23 @@ export const FilterBar = ({
   globalOp,
   setGlobalOp,
   optionsData,
+  sorting,
+  setSorting,
 }: FilterBarProps): React.JSX.Element | null => {
   const [editingIndex, setEditingIndex] = useState<number | null>(null);
   const [editAlignRight, setEditAlignRight] = useState(false);
   const [isAddingNew, setIsAddingNew] = useState(false);
   const [newAlignRight, setNewAlignRight] = useState(false);
+  const [isSortModalOpen, setIsSortModalOpen] = useState(false);
+  const [sortAlignRight, setSortAlignRight] = useState(false);
 
-  if (filters.length === 0) return null;
+  useEffect(() => {
+    if (sorting.length === 0) {
+      setIsSortModalOpen(false);
+    }
+  }, [sorting.length]);
+
+  if (filters.length === 0 && sorting.length === 0) return null;
 
   const handleEditClick = (e: React.MouseEvent, index: number): void => {
     setIsAddingNew(false);
@@ -68,6 +82,34 @@ export const FilterBar = ({
 
   return (
     <div className="flex flex-wrap items-center gap-2 py-2 relative">
+      {sorting.length > 0 && (
+        <>
+          <div className={clsx("relative", isSortModalOpen ? "z-50" : "z-10")}>
+            <button
+              onClick={(e) => {
+                setSortAlignRight(
+                  filterModalAlignRight(e.currentTarget as HTMLElement)
+                );
+                setIsSortModalOpen(!isSortModalOpen);
+              }}
+              className="bg-purple-200 text-purple-600 hover:bg-purple-300 rounded-lg px-3 py-1.5 text-sm font-medium flex items-center gap-2 transition-colors cursor-pointer"
+            >
+              <ArrowUpDown className="w-3.5 h-3.5" />
+              {sorting.length} Sort{sorting.length !== 1 && "s"}
+            </button>
+
+            <SortModal
+              isOpen={isSortModalOpen}
+              onClose={() => setIsSortModalOpen(false)}
+              sorting={sorting}
+              setSorting={setSorting}
+              alignRight={sortAlignRight}
+            />
+          </div>
+          <div className="w-px h-5 bg-gray-300 mx-1" />
+        </>
+      )}
+
       <div className="bg-gray-100 rounded-lg px-3 py-1.5 text-sm font-medium flex items-center gap-2 text-gray-800 relative z-10">
         Matches
         <select
@@ -93,7 +135,7 @@ export const FilterBar = ({
           >
             <button
               onClick={(e) => handleEditClick(e, index)}
-              className="bg-primary-purple text-gray-900 hover:bg-secondary-purple rounded-lg px-3 py-1.5 text-sm font-medium flex items-center gap-2 transition-colors cursor-pointer"
+              className="bg-purple-200 text-gray-900 hover:bg-purple-300 rounded-lg px-3 py-1.5 text-sm font-medium flex items-center gap-2 transition-colors cursor-pointer"
             >
               {Icon && <Icon className="w-3.5 h-3.5 opacity-70" />}
               {colDef?.label}
@@ -116,7 +158,7 @@ export const FilterBar = ({
       <div className={clsx("relative", isAddingNew ? "z-50" : "z-10")}>
         <button
           onClick={handleAddNewClick}
-          className="bg-primary-purple hover:bg-secondary-purple text-gray-900 rounded-lg px-3 py-1.5 text-sm font-medium flex items-center gap-2 transition-colors cursor-pointer"
+          className="bg-purple-200 hover:bg-purple-300 text-gray-900 rounded-lg px-3 py-1.5 text-sm font-medium flex items-center gap-2 transition-colors cursor-pointer"
         >
           <Plus className="w-4 h-4" />
           New Filter

src/components/volunteers/FilterModal.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
+import { ColumnSelector } from "./ColumnSelector";
 import { FilterTuple } from "@/lib/api/getVolunteersByMultipleColumns";
 import { Trash2 } from "lucide-react";
 import { VolunteerTag } from "./VolunteerTag";
@@ -34,18 +35,18 @@ export const FilterModal = ({
     "SELECT_COLUMN" | "SELECT_VALUES"
   >("SELECT_COLUMN");
   const [selectedCol, setSelectedCol] = useState<string | null>(null);
-  const [columnSearch, setColumnSearch] = useState("");
   const [inputValue, setInputValue] = useState("");
   const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
   const [miniOp, setMiniOp] = useState<"AND" | "OR">("OR");
 
   const colDef = FILTERABLE_COLUMNS.find((c) => c.id === selectedCol);
   const availableOptions = selectedCol ? optionsData[selectedCol] || [] : [];
-  const visibleColumns = FILTERABLE_COLUMNS.filter((col) =>
-    col.label.toLowerCase().includes(columnSearch.toLowerCase())
-  );
+  const visibleColumns = FILTERABLE_COLUMNS.map((c) => ({
+    id: c.id,
+    label: c.label,
+    icon: c.icon,
+  }));
 
-  const columnInputRef = useRef<HTMLInputElement>(null);
   const valueInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -67,7 +68,6 @@ export const FilterModal = ({
       } else {
         setActiveStep("SELECT_COLUMN");
         setSelectedCol(null);
-        setColumnSearch("");
         setInputValue("");
         setSelectedOptions([]);
         setMiniOp("OR");
@@ -77,9 +77,7 @@ export const FilterModal = ({
 
   useEffect(() => {
     if (isOpen) {
-      if (activeStep === "SELECT_COLUMN") {
-        setTimeout(() => columnInputRef.current?.focus(), 0);
-      } else if (activeStep === "SELECT_VALUES") {
+      if (activeStep === "SELECT_VALUES") {
         setTimeout(() => valueInputRef.current?.focus(), 0);
       }
     }
@@ -154,53 +152,16 @@ export const FilterModal = ({
         )}
       >
         {activeStep === "SELECT_COLUMN" ? (
-          <>
-            <input
-              ref={columnInputRef}
-              type="text"
-              placeholder="Filter by..."
-              value={columnSearch}
-              onChange={(e) => setColumnSearch(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  e.preventDefault();
-                  if (visibleColumns.length > 0 && visibleColumns[0]) {
-                    setSelectedCol(visibleColumns[0].id);
-                    setActiveStep("SELECT_VALUES");
-                    setInputValue("");
-                    setMiniOp("OR");
-                  }
-                }
-              }}
-              className="w-full bg-gray-50 border border-gray-200 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-secondary-purple"
-            />
-            <div className="flex flex-col max-h-60 overflow-y-auto mt-2">
-              {visibleColumns.length > 0 ? (
-                visibleColumns.map((col) => {
-                  const Icon = col.icon;
-                  return (
-                    <button
-                      key={col.id}
-                      onClick={() => {
-                        setSelectedCol(col.id);
-                        setActiveStep("SELECT_VALUES");
-                        setInputValue("");
-                        setMiniOp("OR");
-                      }}
-                      className="text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2"
-                    >
-                      <Icon className="w-4 h-4 text-gray-400" />
-                      <span>{col.label}</span>
-                    </button>
-                  );
-                })
-              ) : (
-                <p className="text-xs text-gray-500 italic p-2 text-center">
-                  No available columns
-                </p>
-              )}
-            </div>
-          </>
+          <ColumnSelector
+            columns={visibleColumns}
+            placeholder="Filter by..."
+            onSelect={(colId) => {
+              setSelectedCol(colId);
+              setActiveStep("SELECT_VALUES");
+              setInputValue("");
+              setMiniOp("OR");
+            }}
+          />
         ) : (
           <>
             <div className="flex items-center justify-between">
@@ -244,7 +205,7 @@ export const FilterModal = ({
                     handleApplyFilter();
                   }
                 }}
-                className="w-full border border-gray-200 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-secondary-purple"
+                className="w-full border border-gray-200 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-300"
               />
             ) : (
               <>
@@ -260,7 +221,7 @@ export const FilterModal = ({
                       handleApplyFilter();
                     }
                   }}
-                  className="w-full border border-gray-200 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-secondary-purple"
+                  className="w-full border border-gray-200 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-300"
                 />
                 <div className="flex flex-col gap-2 max-h-48 overflow-y-auto mt-2">
                   {availableOptions
@@ -283,7 +244,7 @@ export const FilterModal = ({
                                 p.filter((o) => o !== opt)
                               );
                           }}
-                          className="rounded border-gray-300 text-accent-purple focus:ring-accent-purple cursor-pointer"
+                          className="rounded border-gray-300 text-purple-600 focus:ring-purple-600 cursor-pointer"
                         />
                         <VolunteerTag label={opt} />
                       </label>