From d92716d82fa0e8f540f39df73a67673c129de6a9 Mon Sep 17 00:00:00 2001
From: Philip Okugbe <16838612+Philipinho@users.noreply.github.com>
Date: Thu, 27 Aug 2026 12:43:08 +0100
Subject: [PATCH] feat: search group members (#2445)

---
 .../group/components/group-members.tsx        | 118 ++++++++++--------
 .../database/repos/group/group-user.repo.ts   |   4 +
 2 files changed, 70 insertions(+), 52 deletions(-)

diff --git a/apps/client/src/features/group/components/group-members.tsx b/apps/client/src/features/group/components/group-members.tsx
index 3bf04b5ac..b8003e01b 100644
--- a/apps/client/src/features/group/components/group-members.tsx
+++ b/apps/client/src/features/group/components/group-members.tsx
@@ -12,13 +12,19 @@ import useUserRole from "@/hooks/use-user-role.tsx";
 import { useTranslation } from "react-i18next";
 import { IUser } from "@/features/user/types/user.types.ts";
 import Paginate from "@/components/common/paginate.tsx";
-import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
+import { SearchInput } from "@/components/common/search-input.tsx";
+import NoTableResults from "@/components/common/no-table-results.tsx";
+import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search.tsx";
 
 export default function GroupMembersList() {
   const { t } = useTranslation();
   const { groupId } = useParams();
-  const { cursor, goNext, goPrev } = useCursorPaginate();
-  const { data, isLoading } = useGroupMembersQuery(groupId, { cursor });
+  const { search, cursor, goNext, goPrev, handleSearch } =
+    usePaginateAndSearch();
+  const { data, isLoading } = useGroupMembersQuery(groupId, {
+    cursor,
+    query: search,
+  });
   const removeGroupMember = useRemoveGroupMemberMutation();
   const { isAdmin } = useUserRole();
 
@@ -48,6 +54,7 @@ export default function GroupMembersList() {
 
   return (
     <>
+      <SearchInput onSearch={handleSearch} />
       <Table.ScrollContainer minWidth={500}>
         <Table highlightOnHover verticalSpacing="sm">
           <Table.Thead>
@@ -59,55 +66,62 @@ export default function GroupMembersList() {
           </Table.Thead>
 
           <Table.Tbody>
-            {data?.items.map((user: IUser, index: number) => (
-              <Table.Tr key={index}>
-                <Table.Td>
-                  <Group gap="sm" wrap="nowrap">
-                    <CustomAvatar avatarUrl={user.avatarUrl} name={user.name} />
-                    <div>
-                      <Text fz="sm" fw={500} lineClamp={1}>
-                        {user.name}
-                      </Text>
-                      <Text fz="xs" c="dimmed">
-                        {user.email}
-                      </Text>
-                    </div>
-                  </Group>
-                </Table.Td>
-                <Table.Td>
-                  <Badge variant="light">{t("Active")}</Badge>
-                </Table.Td>
-                <Table.Td>
-                  {isAdmin && (
-                    <Menu
-                      shadow="xl"
-                      position="bottom-end"
-                      offset={20}
-                      width={200}
-                      withArrow
-                      arrowPosition="center"
-                    >
-                      <Menu.Target>
-                        <ActionIcon
-                          variant="subtle"
-                          c="gray"
-                          aria-label={t("Member actions for {{name}}", {
-                            name: user.name,
-                          })}
-                        >
-                          <IconDots size={20} stroke={2} />
-                        </ActionIcon>
-                      </Menu.Target>
-                      <Menu.Dropdown>
-                        <Menu.Item onClick={() => openRemoveModal(user.id)}>
-                          {t("Remove group member")}
-                        </Menu.Item>
-                      </Menu.Dropdown>
-                    </Menu>
-                  )}
-                </Table.Td>
-              </Table.Tr>
-            ))}
+            {data?.items.length > 0 ? (
+              data?.items.map((user: IUser, index: number) => (
+                <Table.Tr key={index}>
+                  <Table.Td>
+                    <Group gap="sm" wrap="nowrap">
+                      <CustomAvatar
+                        avatarUrl={user.avatarUrl}
+                        name={user.name}
+                      />
+                      <div>
+                        <Text fz="sm" fw={500} lineClamp={1}>
+                          {user.name}
+                        </Text>
+                        <Text fz="xs" c="dimmed">
+                          {user.email}
+                        </Text>
+                      </div>
+                    </Group>
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge variant="light">{t("Active")}</Badge>
+                  </Table.Td>
+                  <Table.Td>
+                    {isAdmin && (
+                      <Menu
+                        shadow="xl"
+                        position="bottom-end"
+                        offset={20}
+                        width={200}
+                        withArrow
+                        arrowPosition="center"
+                      >
+                        <Menu.Target>
+                          <ActionIcon
+                            variant="subtle"
+                            c="gray"
+                            aria-label={t("Member actions for {{name}}", {
+                              name: user.name,
+                            })}
+                          >
+                            <IconDots size={20} stroke={2} />
+                          </ActionIcon>
+                        </Menu.Target>
+                        <Menu.Dropdown>
+                          <Menu.Item onClick={() => openRemoveModal(user.id)}>
+                            {t("Remove group member")}
+                          </Menu.Item>
+                        </Menu.Dropdown>
+                      </Menu>
+                    )}
+                  </Table.Td>
+                </Table.Tr>
+              ))
+            ) : (
+              <NoTableResults colSpan={3} />
+            )}
           </Table.Tbody>
         </Table>
       </Table.ScrollContainer>
diff --git a/apps/server/src/database/repos/group/group-user.repo.ts b/apps/server/src/database/repos/group/group-user.repo.ts
index 08184e2c9..76b023f81 100644
--- a/apps/server/src/database/repos/group/group-user.repo.ts
+++ b/apps/server/src/database/repos/group/group-user.repo.ts
@@ -60,6 +60,10 @@ export class GroupUserRepo {
           sql`f_unaccent(users.name)`,
           'ilike',
           sql`f_unaccent(${'%' + pagination.query + '%'})`,
+        ).or(
+          sql`users.email`,
+          'ilike',
+          sql`f_unaccent(${'%' + pagination.query + '%'})`,
         ),
       );
     }