Add search filters to management tables

frontend/src/components/Common/Navbar.tsx

@@ -1,30 +1,55 @@
-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 {
+  onSearchChange?: (value: string) => void
+  searchPlaceholder?: string
+  searchValue?: string
   type: string
 }
 
-const Navbar = ({ type }: NavbarProps) => {
+const Navbar = ({
+  onSearchChange,
+  searchPlaceholder,
+  searchValue = "",
+  type,
+}: 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> */}
+      <Flex py={8} gap={4} flexWrap="wrap">
+        {onSearchChange && (
+          <InputGroup w={{ base: "100%", md: "sm" }}>
+            <InputLeftElement pointerEvents="none">
+              <Icon as={FaSearch} color="ui.dim" />
+            </InputLeftElement>
+            <Input
+              type="search"
+              value={searchValue}
+              onChange={(event) => onSearchChange(event.target.value)}
+              placeholder={searchPlaceholder ?? `Search ${type.toLowerCase()}s`}
+              fontSize={{ base: "sm", md: "inherit" }}
+              borderRadius="8px"
+            />
+          </InputGroup>
+        )}
         <Button
           variant="primary"
           gap={1}
+          flexShrink={0}
           fontSize={{ base: "sm", md: "inherit" }}
           onClick={type === "User" ? addUserModal.onOpen : addItemModal.onOpen}
         >

frontend/src/routes/_layout/admin.tsx

@@ -16,27 +16,49 @@ 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"
+import { matchesSearchTerm } from "../../utils"
 
 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"])
 
   const { data: users } = useSuspenseQuery({
     queryKey: ["users"],
     queryFn: () => UsersService.readUsers({}),
   })
+  const filteredUsers = users.data.filter((user) =>
+    matchesSearchTerm(
+      [
+        user.id,
+        user.full_name,
+        user.email,
+        user.is_superuser ? "Superuser" : "User",
+        user.is_active ? "Active" : "Inactive",
+      ],
+      searchTerm,
+    ),
+  )
 
   return (
     <Tbody>
-      {users.data.map((user) => (
+      {filteredUsers.length === 0 && (
+        <Tr>
+          <Td colSpan={5}>No results found</Td>
+        </Tr>
+      )}
+      {filteredUsers.map((user) => (
         <Tr key={user.id}>
           <Td color={!user.full_name ? "ui.dim" : "inherit"}>
             {user.full_name || "N/A"}
@@ -88,12 +110,19 @@ 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"}
+        searchValue={searchTerm}
+        onSearchChange={setSearchTerm}
+        searchPlaceholder="Search users"
+      />
       <TableContainer>
         <Table fontSize="md" size={{ base: "sm", md: "md" }}>
           <Thead>
@@ -106,7 +135,7 @@ function Admin() {
             </Tr>
           </Thead>
           <Suspense fallback={<MembersBodySkeleton />}>
-            <MembersTableBody />
+            <MembersTableBody searchTerm={searchTerm} />
           </Suspense>
         </Table>
       </TableContainer>

frontend/src/routes/_layout/items.tsx

@@ -14,25 +14,41 @@ 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"
 import Navbar from "../../components/Common/Navbar"
+import { matchesSearchTerm } from "../../utils"
 
 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 = items.data.filter((item) =>
+    matchesSearchTerm(
+      [item.id, item.title, item.description, item.owner_id],
+      searchTerm,
+    ),
+  )
 
   return (
     <Tbody>
-      {items.data.map((item) => (
+      {filteredItems.length === 0 && (
+        <Tr>
+          <Td colSpan={4}>No results found</Td>
+        </Tr>
+      )}
+      {filteredItems.map((item) => (
         <Tr key={item.id}>
           <Td>{item.id}</Td>
           <Td>{item.title}</Td>
@@ -47,7 +63,11 @@ function ItemsTableBody() {
     </Tbody>
   )
 }
-function ItemsTable() {
+interface ItemsTableProps {
+  searchTerm: string
+}
+
+function ItemsTable({ searchTerm }: ItemsTableProps) {
   return (
     <TableContainer>
       <Table size={{ base: "sm", md: "md" }}>
@@ -85,7 +105,7 @@ function ItemsTable() {
               </Tbody>
             }
           >
-            <ItemsTableBody />
+            <ItemsTableBody searchTerm={searchTerm} />
           </Suspense>
         </ErrorBoundary>
       </Table>
@@ -94,14 +114,21 @@ 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"}
+        searchValue={searchTerm}
+        onSearchChange={setSearchTerm}
+        searchPlaceholder="Search items"
+      />
+      <ItemsTable searchTerm={searchTerm} />
     </Container>
   )
 }

frontend/src/utils.ts

@@ -35,8 +35,25 @@ export const confirmPasswordRules = (
   }
 
   if (isRequired) {
-    rules.required = "Password confirmation is required";
+    rules.required = "Password confirmation is required"
   }
 
-  return rules;
+  return rules
+}
+
+export const matchesSearchTerm = (
+  values: Array<boolean | number | string | null | undefined>,
+  searchTerm: string,
+) => {
+  const normalizedSearchTerm = searchTerm.trim().toLowerCase()
+
+  if (!normalizedSearchTerm) {
+    return true
+  }
+
+  return values.some((value) =>
+    String(value ?? "")
+      .toLowerCase()
+      .includes(normalizedSearchTerm),
+  )
 }