From 72ccdabae156d158bbd3726d2ba7a9b36b0d2bad Mon Sep 17 00:00:00 2001
From: Hieu Thien <73751502+thientran2606@users.noreply.github.com>
Date: Sat, 23 May 2026 22:52:02 +0700
Subject: [PATCH 1/3] Add global search input to navbar

---
 frontend/src/components/Common/Navbar.tsx | 36 ++++++++++++++++-------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Common/Navbar.tsx b/frontend/src/components/Common/Navbar.tsx
index edcb3d0..897ecba 100644
--- a/frontend/src/components/Common/Navbar.tsx
+++ b/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}

From ec19ee0f67fc3dfa8fe8ddf6aa47739594f85345 Mon Sep 17 00:00:00 2001
From: Hieu Thien <73751502+thientran2606@users.noreply.github.com>
Date: Sat, 23 May 2026 22:52:33 +0700
Subject: [PATCH 2/3] Filter items by search term

---
 frontend/src/routes/_layout/items.tsx | 47 +++++++++++++++++++++++----
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/frontend/src/routes/_layout/items.tsx b/frontend/src/routes/_layout/items.tsx
index 1f53d27..2c7e0f7 100644
--- a/frontend/src/routes/_layout/items.tsx
+++ b/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>
   )
 }

From 4d81d9ee2b59c4597fd45b98f10bc876d4cd320e Mon Sep 17 00:00:00 2001
From: Hieu Thien <73751502+thientran2606@users.noreply.github.com>
Date: Sat, 23 May 2026 22:53:08 +0700
Subject: [PATCH 3/3] Filter users by search term

---
 frontend/src/routes/_layout/admin.tsx | 44 ++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/frontend/src/routes/_layout/admin.tsx b/frontend/src/routes/_layout/admin.tsx
index 800317b..a963f9f 100644
--- a/frontend/src/routes/_layout/admin.tsx
+++ b/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>