feat: implement global search filters

frontend/src/components/Common/Navbar.tsx

@@ -1,27 +1,46 @@
-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()
+  const isSearchable = onSearchChange !== undefined
 
   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> */}
+        {isSearchable && (
+          <InputGroup w={{ base: "100%", md: "md" }}>
+            <InputLeftElement pointerEvents="none">
+              <Icon as={FaSearch} color="ui.dim" />
+            </InputLeftElement>
+            <Input
+              type="search"
+              placeholder={`Search ${type.toLowerCase()}s`}
+              value={searchValue ?? ""}
+              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, 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 {
+  searchQuery: string
+}
+
+const MembersTableBody = ({ searchQuery }: MembersTableBodyProps) => {
   const queryClient = useQueryClient()
   const currentUser = queryClient.getQueryData<UserPublic>(["currentUser"])
 
@@ -34,9 +38,31 @@ const MembersTableBody = () => {
     queryFn: () => UsersService.readUsers({}),
   })
 
+  const normalizedSearchQuery = searchQuery.trim().toLowerCase()
+  const filteredUsers = users.data.filter((user) =>
+    [
+      user.full_name ?? "",
+      user.email,
+      user.is_superuser ? "superuser" : "user",
+      user.is_active ? "active" : "inactive",
+    ].some((value) => value.toLowerCase().includes(normalizedSearchQuery)),
+  )
+
+  if (filteredUsers.length === 0) {
+    return (
+      <Tbody>
+        <Tr>
+          <Td colSpan={5} color="ui.dim">
+            No users found
+          </Td>
+        </Tr>
+      </Tbody>
+    )
+  }
+
   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"}
@@ -88,12 +114,18 @@ const MembersBodySkeleton = () => {
 }
 
 function Admin() {
+  const [searchQuery, setSearchQuery] = 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={searchQuery}
+        onSearchChange={setSearchQuery}
+      />
       <TableContainer>
         <Table fontSize="md" size={{ base: "sm", md: "md" }}>
           <Thead>
@@ -106,7 +138,7 @@ function Admin() {
             </Tr>
           </Thead>
           <Suspense fallback={<MembersBodySkeleton />}>
-            <MembersTableBody />
+            <MembersTableBody searchQuery={searchQuery} />
           </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,15 +24,38 @@ export const Route = createFileRoute("/_layout/items")({
   component: Items,
 })
 
-function ItemsTableBody() {
+interface ItemsTableBodyProps {
+  searchQuery: string
+}
+
+function ItemsTableBody({ searchQuery }: ItemsTableBodyProps) {
   const { data: items } = useSuspenseQuery({
     queryKey: ["items"],
     queryFn: () => ItemsService.readItems({}),
   })
 
+  const normalizedSearchQuery = searchQuery.trim().toLowerCase()
+  const filteredItems = items.data.filter((item) =>
+    [item.id.toString(), item.title, item.description ?? ""].some((value) =>
+      value.toLowerCase().includes(normalizedSearchQuery),
+    ),
+  )
+
+  if (filteredItems.length === 0) {
+    return (
+      <Tbody>
+        <Tr>
+          <Td colSpan={4} color="ui.dim">
+            No items found
+          </Td>
+        </Tr>
+      </Tbody>
+    )
+  }
+
   return (
     <Tbody>
-      {items.data.map((item) => (
+      {filteredItems.map((item) => (
         <Tr key={item.id}>
           <Td>{item.id}</Td>
           <Td>{item.title}</Td>
@@ -47,7 +70,11 @@ function ItemsTableBody() {
     </Tbody>
   )
 }
-function ItemsTable() {
+interface ItemsTableProps {
+  searchQuery: string
+}
+
+function ItemsTable({ searchQuery }: ItemsTableProps) {
   return (
     <TableContainer>
       <Table size={{ base: "sm", md: "md" }}>
@@ -85,7 +112,7 @@ function ItemsTable() {
               </Tbody>
             }
           >
-            <ItemsTableBody />
+            <ItemsTableBody searchQuery={searchQuery} />
           </Suspense>
         </ErrorBoundary>
       </Table>
@@ -94,14 +121,20 @@ function ItemsTable() {
 }
 
 function Items() {
+  const [searchQuery, setSearchQuery] = 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={searchQuery}
+        onSearchChange={setSearchQuery}
+      />
+      <ItemsTable searchQuery={searchQuery} />
     </Container>
   )
 }