fixed filtering

Author: Sectonic

src/app/accountManagement/page.tsx

@@ -8,6 +8,7 @@ import InviteUserForm from "@/components/InviteUserForm";
 import ConfirmationModal from "@/components/AccountManagement/ConfirmationModal";
 import EditModal from "@/components/AccountManagement/EditModal";
 import { useApiClient } from "@/hooks/useApiClient";
+import { useFetch } from "@/hooks/useFetch";
 import { isStaff, formatUserType } from "@/lib/userUtils";
 import AccountDropdown from "@/components/AccountManagement/AccountDropdown";
 import AccountStatusTag from "@/components/tags/AccountStatusTag";
@@ -51,6 +52,9 @@ function getStatusLabel(user: AccountUserResponse) {
 export default function AccountManagementPage() {
   const tableRef = useRef<AdvancedBaseTableHandle<AccountRow>>(null);
   const { apiClient } = useApiClient();
+  const { data: tags, refetch: refetchTags } = useFetch<string[]>(
+    "/api/users/tags"
+  );
 
   const [isInviteModalOpen, setInviteModalOpen] = useState(false);
 
@@ -134,6 +138,7 @@ export default function AccountManagementPage() {
 
       tableRef.current?.upsertItem(nextUser);
       setSelectedUser(nextUser);
+      refetchTags();
     } catch (error) {
       console.error("Error updating user:", error);
     }
@@ -198,7 +203,8 @@ export default function AccountManagementPage() {
     },
     {
       id: "tag",
-      filterType: "string",
+      filterType: "enum",
+      filterOptions: tags ?? [],
       cell: (item) =>
         item.tag ? (
           <span className="px-3 py-1 bg-red-primary/70 text-white rounded-md text-sm">
@@ -334,6 +340,7 @@ This will restore the user's access to the system.`
         selectedUserId={
           selectedUser && !selectedUser.pending ? selectedUser.id : undefined
         }
+        existingTags={tags ?? []}
       />
     </>
   );

src/components/AccountManagement/EditModal.tsx

@@ -2,7 +2,6 @@ import { useState, useEffect } from "react";
 import { UserType } from "@prisma/client";
 import Select from "react-select/creatable";
 import GeneralModal from "./GeneralModal";
-import { useFetch } from "@/hooks/useFetch";
 import { useUser } from "@/components/context/UserContext";
 import { isAdmin } from "@/lib/userUtils";
 
@@ -27,6 +26,7 @@ interface EditModalProps {
   cancelText?: string;
   isStaffAccount?: boolean;
   selectedUserId?: number;
+  existingTags?: string[];
 }
 
 export default function EditModal({
@@ -40,6 +40,7 @@ export default function EditModal({
   cancelText = "Cancel",
   isStaffAccount = true,
   selectedUserId,
+  existingTags = [],
 }: EditModalProps) {
   const { user: currentUser } = useUser();
   const [formData, setFormData] = useState({
@@ -49,10 +50,6 @@ export default function EditModal({
     tag: "",
   });
 
-  const { data: existingTags } = useFetch<string[]>("/api/users/tags", {
-    conditionalFetch: isOpen,
-  });
-
   useEffect(() => {
     if (initialData) {
       setFormData({
@@ -207,12 +204,10 @@ export default function EditModal({
             onChange={(selectedOption) =>
               handleInputChange("tag", selectedOption?.value || "")
             }
-            options={
-              existingTags?.map((tag) => ({
-                value: tag,
-                label: tag,
-              })) || []
-            }
+            options={existingTags.map((tag) => ({
+              value: tag,
+              label: tag,
+            }))}
             isClearable
             placeholder="Select or create a tag..."
             className="react-select-container"

src/components/baseTable/AdvancedBaseTable.tsx

@@ -128,14 +128,17 @@ function AdvancedBaseTableInner<T extends object>(
 
         let options: string[] | undefined;
         if (type === "enum") {
-          const providedOptions = column.filterOptions ?? [];
-          const collectedOptions = collectEnumOptions([
-            ...providedOptions,
-            ...(previousMeta?.options ?? []),
-            ...values,
-          ]);
-          options =
-            collectedOptions.length > 0 ? collectedOptions : providedOptions;
+          // If filterOptions is explicitly provided, always use it
+          if (column.filterOptions) {
+            options = column.filterOptions;
+          } else {
+            // Otherwise, collect options from data
+            const collectedOptions = collectEnumOptions([
+              ...(previousMeta?.options ?? []),
+              ...values,
+            ]);
+            options = collectedOptions.length > 0 ? collectedOptions : undefined;
+          }
         }
 
         next.push({