[TOOL-4821] Improve Team members search

Author: MananTank

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx

@@ -19,6 +19,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useMutation } from "@tanstack/react-query";
+import Fuse from "fuse.js";
 import { EllipsisIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
@@ -41,19 +42,25 @@ export function ManageMembersSection(props: {
   const [role, setRole] = useState<RoleFilterValue>("ALL ROLES");
   const [sortBy, setSortBy] = useState<MemberSortId>("date");
 
-  const membersToShow = useMemo(() => {
-    let value = props.members;
+  const membersIndex = useMemo(() => {
+    return new Fuse(props.members, {
+      keys: [
+        { name: "account.name", weight: 2 },
+        { name: "account.email", weight: 1 },
+      ],
+      threshold: 0.3,
+    });
+  }, [props.members]);
 
-    if (searchTerm) {
-      value = value.filter((m) =>
-        m.account.name.toLowerCase().includes(searchTerm.toLowerCase()),
-      );
-    }
+  const membersToShow = useMemo(() => {
+    let value = searchTerm
+      ? membersIndex.search(searchTerm).map((result) => result.item)
+      : props.members;
 
     value = value.filter((m) => !deletedMembersIds.includes(m.accountId));
 
     if (role !== "ALL ROLES") {
-      value = value.filter((m) => m.role === role);
+      value = value.filter((m) => m.role === (role as TeamAccountRole));
     }
 
     switch (sortBy) {
@@ -76,7 +83,14 @@ export function ManageMembersSection(props: {
     }
 
     return value;
-  }, [role, props.members, sortBy, deletedMembersIds, searchTerm]);
+  }, [
+    role,
+    props.members,
+    sortBy,
+    deletedMembersIds,
+    searchTerm,
+    membersIndex,
+  ]);
 
   if (!props.userHasEditPermission) {
     topSection = (