Add search filters to management tables

frontend/src/components/Common/Navbar.tsx

@@ -1,27 +1,45 @@
-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
+  searchValue?: string
+  onSearchChange?: (value: string) => void
 }
 
-const Navbar = ({ type }: NavbarProps) => {
+const Navbar = ({ type, searchValue = "", 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> */}
+        {onSearchChange && (
+          <InputGroup w={{ base: "100%", md: "auto" }}>
+            <InputLeftElement pointerEvents="none">
+              <Icon as={FaSearch} color="ui.dim" />
+            </InputLeftElement>
+            <Input
+              type="text"
+              placeholder={`Search ${type.toLowerCase()}s`}
+              fontSize={{ base: "sm", md: "inherit" }}
+              borderRadius="8px"
+              value={searchValue}
+              onChange={(event) => onSearchChange(event.target.value)}
+            />
+          </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, 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 {
+  searchValue: string
+}
+
+const MembersTableBody = ({ searchValue }: MembersTableBodyProps) => {
   const queryClient = useQueryClient()
   const currentUser = queryClient.getQueryData<UserPublic>(["currentUser"])
 
@@ -34,41 +38,65 @@ const MembersTableBody = () => {
     queryFn: () => UsersService.readUsers({}),
   })
 
+  const normalizedSearch = searchValue.trim().toLowerCase()
+  const filteredUsers = users.data.filter((user) => {
+    if (!normalizedSearch) {
+      return true
+    }
+
+    return [
+      user.full_name,
+      user.email,
+      user.is_superuser ? "superuser" : "user",
+      user.is_active ? "active" : "inactive",
+    ]
+      .filter(Boolean)
+      .some((value) => String(value).toLowerCase().includes(normalizedSearch))
+  })
+
   return (
     <Tbody>
-      {users.data.map((user) => (
-        <Tr key={user.id}>
-          <Td color={!user.full_name ? "ui.dim" : "inherit"}>
-            {user.full_name || "N/A"}
-            {currentUser?.id === user.id && (
-              <Badge ml="1" colorScheme="teal">
-                You
-              </Badge>
-            )}
-          </Td>
-          <Td>{user.email}</Td>
-          <Td>{user.is_superuser ? "Superuser" : "User"}</Td>
-          <Td>
-            <Flex gap={2}>
-              <Box
-                w="2"
-                h="2"
-                borderRadius="50%"
-                bg={user.is_active ? "ui.success" : "ui.danger"}
-                alignSelf="center"
-              />
-              {user.is_active ? "Active" : "Inactive"}
-            </Flex>
-          </Td>
-          <Td>
-            <ActionsMenu
-              type="User"
-              value={user}
-              disabled={currentUser?.id === user.id ? true : false}
-            />
+      {filteredUsers.length === 0 ? (
+        <Tr>
+          <Td colSpan={5} color="ui.dim">
+            No users match your search.
           </Td>
         </Tr>
-      ))}
+      ) : (
+        filteredUsers.map((user) => (
+          <Tr key={user.id}>
+            <Td color={!user.full_name ? "ui.dim" : "inherit"}>
+              {user.full_name || "N/A"}
+              {currentUser?.id === user.id && (
+                <Badge ml="1" colorScheme="teal">
+                  You
+                </Badge>
+              )}
+            </Td>
+            <Td>{user.email}</Td>
+            <Td>{user.is_superuser ? "Superuser" : "User"}</Td>
+            <Td>
+              <Flex gap={2}>
+                <Box
+                  w="2"
+                  h="2"
+                  borderRadius="50%"
+                  bg={user.is_active ? "ui.success" : "ui.danger"}
+                  alignSelf="center"
+                />
+                {user.is_active ? "Active" : "Inactive"}
+              </Flex>
+            </Td>
+            <Td>
+              <ActionsMenu
+                type="User"
+                value={user}
+                disabled={currentUser?.id === user.id ? true : false}
+              />
+            </Td>
+          </Tr>
+        ))
+      )}
     </Tbody>
   )
 }
@@ -88,12 +116,18 @@ const MembersBodySkeleton = () => {
 }
 
 function Admin() {
+  const [searchValue, setSearchValue] = useState("")
+
   return (
     <Container maxW="full">
       <Heading size="lg" textAlign={{ base: "center", md: "left" }} pt={12}>
         User Management
       </Heading>
-      <Navbar type={"User"} />
+      <Navbar
+        type={"User"}
+        searchValue={searchValue}
+        onSearchChange={setSearchValue}
+      />
       <TableContainer>
         <Table fontSize="md" size={{ base: "sm", md: "md" }}>
           <Thead>
@@ -106,7 +140,7 @@ function Admin() {
             </Tr>
           </Thead>
           <Suspense fallback={<MembersBodySkeleton />}>
-            <MembersTableBody />
+            <MembersTableBody searchValue={searchValue} />
           </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, useState } from "react"
 import { ErrorBoundary } from "react-error-boundary"
 import { ItemsService } from "../../client"
 import ActionsMenu from "../../components/Common/ActionsMenu"
@@ -24,30 +24,53 @@ export const Route = createFileRoute("/_layout/items")({
   component: Items,
 })
 
-function ItemsTableBody() {
+interface ItemsTableBodyProps {
+  searchValue: string
+}
+
+function ItemsTableBody({ searchValue }: ItemsTableBodyProps) {
   const { data: items } = useSuspenseQuery({
     queryKey: ["items"],
     queryFn: () => ItemsService.readItems({}),
   })
 
+  const normalizedSearch = searchValue.trim().toLowerCase()
+  const filteredItems = items.data.filter((item) => {
+    if (!normalizedSearch) {
+      return true
+    }
+
+    return [item.id, item.title, item.description]
+      .filter(Boolean)
+      .some((value) => String(value).toLowerCase().includes(normalizedSearch))
+  })
+
   return (
     <Tbody>
-      {items.data.map((item) => (
-        <Tr key={item.id}>
-          <Td>{item.id}</Td>
-          <Td>{item.title}</Td>
-          <Td color={!item.description ? "ui.dim" : "inherit"}>
-            {item.description || "N/A"}
-          </Td>
-          <Td>
-            <ActionsMenu type={"Item"} value={item} />
+      {filteredItems.length === 0 ? (
+        <Tr>
+          <Td colSpan={4} color="ui.dim">
+            No items match your search.
           </Td>
         </Tr>
-      ))}
+      ) : (
+        filteredItems.map((item) => (
+          <Tr key={item.id}>
+            <Td>{item.id}</Td>
+            <Td>{item.title}</Td>
+            <Td color={!item.description ? "ui.dim" : "inherit"}>
+              {item.description || "N/A"}
+            </Td>
+            <Td>
+              <ActionsMenu type={"Item"} value={item} />
+            </Td>
+          </Tr>
+        ))
+      )}
     </Tbody>
   )
 }
-function ItemsTable() {
+function ItemsTable({ searchValue }: ItemsTableBodyProps) {
   return (
     <TableContainer>
       <Table size={{ base: "sm", md: "md" }}>
@@ -85,7 +108,7 @@ function ItemsTable() {
               </Tbody>
             }
           >
-            <ItemsTableBody />
+            <ItemsTableBody searchValue={searchValue} />
           </Suspense>
         </ErrorBoundary>
       </Table>
@@ -94,14 +117,20 @@ function ItemsTable() {
 }
 
 function Items() {
+  const [searchValue, setSearchValue] = 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"}
+        searchValue={searchValue}
+        onSearchChange={setSearchValue}
+      />
+      <ItemsTable searchValue={searchValue} />
     </Container>
   )
 }