Implement global search for users and items

frontend/src/components/Common/Navbar.tsx

@@ -1,27 +1,43 @@
-import { Button, Flex, Icon, useDisclosure } from "@chakra-ui/react"
-import { FaPlus } from "react-icons/fa"
+import {
+  Button,
+  Flex,
+  Icon,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  useDisclosure,
+} from "@chakra-ui/react"
+import { FaPlus, FaSearch } from "react-icons/fa"
 
 import AddUser from "../Admin/AddUser"
 import AddItem from "../Items/AddItem"
 
 interface NavbarProps {
   type: string
+  searchTerm?: string
+  onSearchChange?: (value: string) => void
 }
 
-const Navbar = ({ type }: NavbarProps) => {
+const Navbar = ({ type, searchTerm = "", onSearchChange }: NavbarProps) => {
   const addUserModal = useDisclosure()
   const addItemModal = useDisclosure()
 
   return (
     <>
       <Flex py={8} gap={4}>
-        {/* TODO: Complete search functionality */}
-        {/* <InputGroup w={{ base: '100%', md: 'auto' }}>
-                    <InputLeftElement pointerEvents='none'>
-                        <Icon as={FaSearch} color='ui.dim' />
-                    </InputLeftElement>
-                    <Input type='text' placeholder='Search' fontSize={{ base: 'sm', md: 'inherit' }} borderRadius='8px' />
-                </InputGroup> */}
+        <InputGroup w={{ base: "100%", md: "sm" }}>
+          <InputLeftElement pointerEvents="none">
+            <Icon as={FaSearch} color="ui.dim" />
+          </InputLeftElement>
+          <Input
+            type="search"
+            placeholder={`Search ${type.toLowerCase()}s`}
+            value={searchTerm}
+            onChange={(event) => onSearchChange?.(event.target.value)}
+            fontSize={{ base: "sm", md: "inherit" }}
+            borderRadius="8px"
+          />
+        </InputGroup>
         <Button
           variant="primary"
           gap={1}

frontend/src/routes/_layout/admin.tsx

@@ -16,7 +16,7 @@ import {
 import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query"
 import { createFileRoute } from "@tanstack/react-router"
 
-import { Suspense } from "react"
+import { Suspense, useMemo, useState } from "react"
 import { type UserPublic, UsersService } from "../../client"
 import ActionsMenu from "../../components/Common/ActionsMenu"
 import Navbar from "../../components/Common/Navbar"
@@ -25,7 +25,11 @@ export const Route = createFileRoute("/_layout/admin")({
   component: Admin,
 })
 
-const MembersTableBody = () => {
+interface MembersTableBodyProps {
+  searchTerm: string
+}
+
+const MembersTableBody = ({ searchTerm }: MembersTableBodyProps) => {
   const queryClient = useQueryClient()
   const currentUser = queryClient.getQueryData<UserPublic>(["currentUser"])
 
@@ -34,9 +38,28 @@ const MembersTableBody = () => {
     queryFn: () => UsersService.readUsers({}),
   })
 
+  const filteredUsers = useMemo(() => {
+    const searchValue = searchTerm.trim().toLowerCase()
+
+    if (!searchValue) {
+      return users.data
+    }
+
+    return users.data.filter((user) =>
+      [
+        user.full_name,
+        user.email,
+        user.is_superuser ? "superuser" : "user",
+        user.is_active ? "active" : "inactive",
+      ]
+        .filter(Boolean)
+        .some((value) => String(value).toLowerCase().includes(searchValue)),
+    )
+  }, [searchTerm, users.data])
+
   return (
     <Tbody>
-      {users.data.map((user) => (
+      {filteredUsers.map((user) => (
         <Tr key={user.id}>
           <Td color={!user.full_name ? "ui.dim" : "inherit"}>
             {user.full_name || "N/A"}
@@ -69,6 +92,11 @@ const MembersTableBody = () => {
           </Td>
         </Tr>
       ))}
+      {filteredUsers.length === 0 && (
+        <Tr>
+          <Td colSpan={5}>No users found.</Td>
+        </Tr>
+      )}
     </Tbody>
   )
 }
@@ -88,12 +116,18 @@ const MembersBodySkeleton = () => {
 }
 
 function Admin() {
+  const [searchTerm, setSearchTerm] = useState("")
+
   return (
     <Container maxW="full">
       <Heading size="lg" textAlign={{ base: "center", md: "left" }} pt={12}>
         User Management
       </Heading>
-      <Navbar type={"User"} />
+      <Navbar
+        type={"User"}
+        searchTerm={searchTerm}
+        onSearchChange={setSearchTerm}
+      />
       <TableContainer>
         <Table fontSize="md" size={{ base: "sm", md: "md" }}>
           <Thead>
@@ -106,7 +140,7 @@ function Admin() {
             </Tr>
           </Thead>
           <Suspense fallback={<MembersBodySkeleton />}>
-            <MembersTableBody />
+            <MembersTableBody searchTerm={searchTerm} />
           </Suspense>
         </Table>
       </TableContainer>

frontend/src/routes/_layout/items.tsx

@@ -14,7 +14,7 @@ import {
 import { useSuspenseQuery } from "@tanstack/react-query"
 import { createFileRoute } from "@tanstack/react-router"
 
-import { Suspense } from "react"
+import { Suspense, useMemo, useState } from "react"
 import { ErrorBoundary } from "react-error-boundary"
 import { ItemsService } from "../../client"
 import ActionsMenu from "../../components/Common/ActionsMenu"
@@ -24,15 +24,33 @@ export const Route = createFileRoute("/_layout/items")({
   component: Items,
 })
 
-function ItemsTableBody() {
+interface ItemsTableBodyProps {
+  searchTerm: string
+}
+
+function ItemsTableBody({ searchTerm }: ItemsTableBodyProps) {
   const { data: items } = useSuspenseQuery({
     queryKey: ["items"],
     queryFn: () => ItemsService.readItems({}),
   })
 
+  const filteredItems = useMemo(() => {
+    const searchValue = searchTerm.trim().toLowerCase()
+
+    if (!searchValue) {
+      return items.data
+    }
+
+    return items.data.filter((item) =>
+      [item.id, item.title, item.description]
+        .filter(Boolean)
+        .some((value) => String(value).toLowerCase().includes(searchValue)),
+    )
+  }, [items.data, searchTerm])
+
   return (
     <Tbody>
-      {items.data.map((item) => (
+      {filteredItems.map((item) => (
         <Tr key={item.id}>
           <Td>{item.id}</Td>
           <Td>{item.title}</Td>
@@ -44,10 +62,19 @@ function ItemsTableBody() {
           </Td>
         </Tr>
       ))}
+      {filteredItems.length === 0 && (
+        <Tr>
+          <Td colSpan={4}>No items found.</Td>
+        </Tr>
+      )}
     </Tbody>
   )
 }
-function ItemsTable() {
+interface ItemsTableProps {
+  searchTerm: string
+}
+
+function ItemsTable({ searchTerm }: ItemsTableProps) {
   return (
     <TableContainer>
       <Table size={{ base: "sm", md: "md" }}>
@@ -85,7 +112,7 @@ function ItemsTable() {
               </Tbody>
             }
           >
-            <ItemsTableBody />
+            <ItemsTableBody searchTerm={searchTerm} />
           </Suspense>
         </ErrorBoundary>
       </Table>
@@ -94,14 +121,20 @@ function ItemsTable() {
 }
 
 function Items() {
+  const [searchTerm, setSearchTerm] = useState("")
+
   return (
     <Container maxW="full">
       <Heading size="lg" textAlign={{ base: "center", md: "left" }} pt={12}>
         Items Management
       </Heading>
 
-      <Navbar type={"Item"} />
-      <ItemsTable />
+      <Navbar
+        type={"Item"}
+        searchTerm={searchTerm}
+        onSearchChange={setSearchTerm}
+      />
+      <ItemsTable searchTerm={searchTerm} />
     </Container>
   )
 }