From 87bd706962d61a93b77c61ffbdfba92a10d6dbdf Mon Sep 17 00:00:00 2001
From: Groot89 <jenishp703@gmail.com>
Date: Wed, 20 May 2026 11:35:37 +0530
Subject: [PATCH] Implement global search

---
 .../src/components/Common/GlobalSearch.tsx    | 240 ++++++++++++++++++
 frontend/src/components/Common/Navbar.tsx     |  51 +++-
 frontend/src/components/Common/Sidebar.tsx    |   3 +
 frontend/src/routes/_layout/admin.tsx         | 113 ++++++---
 frontend/src/routes/_layout/items.tsx         |  79 ++++--
 5 files changed, 425 insertions(+), 61 deletions(-)
 create mode 100644 frontend/src/components/Common/GlobalSearch.tsx

diff --git a/frontend/src/components/Common/GlobalSearch.tsx b/frontend/src/components/Common/GlobalSearch.tsx
new file mode 100644
index 0000000..11abb85
--- /dev/null
+++ b/frontend/src/components/Common/GlobalSearch.tsx
@@ -0,0 +1,240 @@
+import {
+  Badge,
+  Box,
+  Icon,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  List,
+  ListItem,
+  Spinner,
+  Text,
+  useColorModeValue,
+} from "@chakra-ui/react"
+import { useQuery, useQueryClient } from "@tanstack/react-query"
+import { useNavigate } from "@tanstack/react-router"
+import { useMemo, useState } from "react"
+import { FiSearch } from "react-icons/fi"
+
+import { ItemsService, type UserPublic, UsersService } from "../../client"
+
+type SearchResult = {
+  key: string
+  label: string
+  meta: string
+  type: string
+  onSelect: () => void
+}
+
+const includesQuery = (
+  value: string | number | null | undefined,
+  query: string,
+) =>
+  String(value ?? "")
+    .toLowerCase()
+    .includes(query)
+
+const GlobalSearch = () => {
+  const [query, setQuery] = useState("")
+  const [isOpen, setIsOpen] = useState(false)
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const currentUser = queryClient.getQueryData<UserPublic>(["currentUser"])
+  const menuBg = useColorModeValue("white", "gray.800")
+  const hoverBg = useColorModeValue("gray.50", "gray.700")
+  const borderColor = useColorModeValue("gray.200", "gray.700")
+
+  const itemsQuery = useQuery({
+    queryKey: ["items"],
+    queryFn: () => ItemsService.readItems({}),
+  })
+
+  const usersQuery = useQuery({
+    queryKey: ["users"],
+    queryFn: () => UsersService.readUsers({}),
+    enabled: !!currentUser?.is_superuser,
+  })
+
+  const normalizedQuery = query.trim().toLowerCase()
+
+  const results = useMemo<SearchResult[]>(() => {
+    if (!normalizedQuery) {
+      return []
+    }
+
+    const pageResults: SearchResult[] = [
+      {
+        key: "page-dashboard",
+        label: "Dashboard",
+        meta: "Page",
+        type: "Page",
+        onSelect: () => navigate({ to: "/" }),
+      },
+      {
+        key: "page-items",
+        label: "Items",
+        meta: "Page",
+        type: "Page",
+        onSelect: () => navigate({ to: "/items", search: { search: "" } }),
+      },
+      {
+        key: "page-settings",
+        label: "User Settings",
+        meta: "Page",
+        type: "Page",
+        onSelect: () => navigate({ to: "/settings" }),
+      },
+      ...(currentUser?.is_superuser
+        ? [
+            {
+              key: "page-admin",
+              label: "Admin",
+              meta: "Page",
+              type: "Page",
+              onSelect: () =>
+                navigate({ to: "/admin", search: { search: "" } }),
+            },
+          ]
+        : []),
+    ].filter(
+      (result) =>
+        includesQuery(result.label, normalizedQuery) ||
+        includesQuery(result.meta, normalizedQuery),
+    )
+
+    const itemResults =
+      itemsQuery.data?.data
+        .filter(
+          (item) =>
+            includesQuery(item.id, normalizedQuery) ||
+            includesQuery(item.title, normalizedQuery) ||
+            includesQuery(item.description, normalizedQuery),
+        )
+        .slice(0, 4)
+        .map((item) => ({
+          key: `item-${item.id}`,
+          label: item.title,
+          meta: item.description || `Item #${item.id}`,
+          type: "Item",
+          onSelect: () =>
+            navigate({
+              to: "/items",
+              search: { search: item.title || String(item.id) },
+            }),
+        })) ?? []
+
+    const userResults =
+      usersQuery.data?.data
+        .filter(
+          (user) =>
+            includesQuery(user.id, normalizedQuery) ||
+            includesQuery(user.full_name, normalizedQuery) ||
+            includesQuery(user.email, normalizedQuery),
+        )
+        .slice(0, 4)
+        .map((user) => ({
+          key: `user-${user.id}`,
+          label: user.full_name || user.email,
+          meta: user.email,
+          type: "User",
+          onSelect: () =>
+            navigate({
+              to: "/admin",
+              search: { search: user.full_name || user.email },
+            }),
+        })) ?? []
+
+    return [...pageResults, ...itemResults, ...userResults].slice(0, 8)
+  }, [
+    currentUser?.is_superuser,
+    itemsQuery.data?.data,
+    navigate,
+    normalizedQuery,
+    usersQuery.data?.data,
+  ])
+
+  const isLoading =
+    itemsQuery.isLoading || (currentUser?.is_superuser && usersQuery.isLoading)
+
+  const selectResult = (result: SearchResult) => {
+    result.onSelect()
+    setQuery("")
+    setIsOpen(false)
+  }
+
+  return (
+    <Box position="relative" w="100%" px={2} mb={4}>
+      <InputGroup size="sm">
+        <InputLeftElement pointerEvents="none">
+          <Icon as={FiSearch} color="ui.dim" />
+        </InputLeftElement>
+        <Input
+          value={query}
+          onChange={(event) => {
+            setQuery(event.target.value)
+            setIsOpen(true)
+          }}
+          onFocus={() => setIsOpen(true)}
+          onBlur={() => window.setTimeout(() => setIsOpen(false), 120)}
+          placeholder="Search"
+          borderRadius="8px"
+          bg={menuBg}
+        />
+      </InputGroup>
+
+      {isOpen && normalizedQuery && (
+        <Box
+          position="absolute"
+          left={2}
+          right={2}
+          top="calc(100% + 6px)"
+          zIndex={20}
+          bg={menuBg}
+          border="1px solid"
+          borderColor={borderColor}
+          borderRadius="8px"
+          boxShadow="lg"
+          overflow="hidden"
+        >
+          {isLoading ? (
+            <Box p={3} textAlign="center">
+              <Spinner size="sm" />
+            </Box>
+          ) : results.length > 0 ? (
+            <List>
+              {results.map((result) => (
+                <ListItem
+                  as="button"
+                  key={result.key}
+                  w="100%"
+                  textAlign="left"
+                  px={3}
+                  py={2}
+                  _hover={{ bg: hoverBg }}
+                  onMouseDown={(event) => event.preventDefault()}
+                  onClick={() => selectResult(result)}
+                >
+                  <Badge size="sm" mr={2}>
+                    {result.type}
+                  </Badge>
+                  <Text as="span" fontWeight="medium" noOfLines={1}>
+                    {result.label}
+                  </Text>
+                  <Text fontSize="xs" color="ui.dim" noOfLines={1}>
+                    {result.meta}
+                  </Text>
+                </ListItem>
+              ))}
+            </List>
+          ) : (
+            <Text p={3} fontSize="sm" color="ui.dim">
+              No results found
+            </Text>
+          )}
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+export default GlobalSearch
diff --git a/frontend/src/components/Common/Navbar.tsx b/frontend/src/components/Common/Navbar.tsx
index edcb3d0..996c667 100644
--- a/frontend/src/components/Common/Navbar.tsx
+++ b/frontend/src/components/Common/Navbar.tsx
@@ -1,27 +1,56 @@
-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
+  searchPlaceholder?: string
+  onSearchChange?: (value: string) => void
 }
 
-const Navbar = ({ type }: NavbarProps) => {
+const Navbar = ({
+  type,
+  searchValue = "",
+  searchPlaceholder,
+  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> */}
+      <Flex
+        py={8}
+        gap={4}
+        align={{ base: "stretch", sm: "center" }}
+        direction={{ base: "column", sm: "row" }}
+      >
+        {onSearchChange && (
+          <InputGroup w={{ base: "100%", md: "320px" }}>
+            <InputLeftElement pointerEvents="none">
+              <Icon as={FaSearch} color="ui.dim" />
+            </InputLeftElement>
+            <Input
+              type="text"
+              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}
diff --git a/frontend/src/components/Common/Sidebar.tsx b/frontend/src/components/Common/Sidebar.tsx
index 7582fb4..b277098 100644
--- a/frontend/src/components/Common/Sidebar.tsx
+++ b/frontend/src/components/Common/Sidebar.tsx
@@ -18,6 +18,7 @@ import { FiLogOut, FiMenu } from "react-icons/fi"
 import Logo from "../../assets/images/fastapi-logo.svg"
 import type { UserPublic } from "../../client"
 import useAuth from "../../hooks/useAuth"
+import GlobalSearch from "./GlobalSearch"
 import SidebarItems from "./SidebarItems"
 
 const Sidebar = () => {
@@ -53,6 +54,7 @@ const Sidebar = () => {
             <Flex flexDir="column" justify="space-between">
               <Box>
                 <Image src={Logo} alt="logo" p={6} />
+                <GlobalSearch />
                 <SidebarItems onClose={onClose} />
                 <Flex
                   as="button"
@@ -94,6 +96,7 @@ const Sidebar = () => {
         >
           <Box>
             <Image src={Logo} alt="Logo" w="180px" maxW="2xs" p={6} />
+            <GlobalSearch />
             <SidebarItems />
           </Box>
           {currentUser?.email && (
diff --git a/frontend/src/routes/_layout/admin.tsx b/frontend/src/routes/_layout/admin.tsx
index 800317b..1a61fe8 100644
--- a/frontend/src/routes/_layout/admin.tsx
+++ b/frontend/src/routes/_layout/admin.tsx
@@ -14,7 +14,7 @@ import {
   Tr,
 } from "@chakra-ui/react"
 import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query"
-import { createFileRoute } from "@tanstack/react-router"
+import { createFileRoute, useNavigate } from "@tanstack/react-router"
 
 import { Suspense } from "react"
 import { type UserPublic, UsersService } from "../../client"
@@ -22,10 +22,28 @@ import ActionsMenu from "../../components/Common/ActionsMenu"
 import Navbar from "../../components/Common/Navbar"
 
 export const Route = createFileRoute("/_layout/admin")({
+  validateSearch: (search: Record<string, unknown>) => ({
+    search: typeof search.search === "string" ? search.search : "",
+  }),
   component: Admin,
 })
 
-const MembersTableBody = () => {
+const matchesUserSearch = (user: UserPublic, query: string) => {
+  const normalizedQuery = query.trim().toLowerCase()
+
+  if (!normalizedQuery) {
+    return true
+  }
+
+  const role = user.is_superuser ? "superuser" : "user"
+  const status = user.is_active ? "active" : "inactive"
+
+  return [user.id, user.full_name, user.email, role, status]
+    .map((value) => String(value ?? "").toLowerCase())
+    .some((value) => value.includes(normalizedQuery))
+}
+
+const MembersTableBody = ({ search }: { search: string }) => {
   const queryClient = useQueryClient()
   const currentUser = queryClient.getQueryData<UserPublic>(["currentUser"])
 
@@ -34,41 +52,53 @@ const MembersTableBody = () => {
     queryFn: () => UsersService.readUsers({}),
   })
 
+  const filteredUsers = users.data.filter((user) =>
+    matchesUserSearch(user, search),
+  )
+
   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"
+      {filteredUsers.length > 0 ? (
+        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}
               />
-              {user.is_active ? "Active" : "Inactive"}
-            </Flex>
-          </Td>
-          <Td>
-            <ActionsMenu
-              type="User"
-              value={user}
-              disabled={currentUser?.id === user.id ? true : false}
-            />
+            </Td>
+          </Tr>
+        ))
+      ) : (
+        <Tr>
+          <Td colSpan={5} color="ui.dim">
+            No users match your search.
           </Td>
         </Tr>
-      ))}
+      )}
     </Tbody>
   )
 }
@@ -88,12 +118,27 @@ const MembersBodySkeleton = () => {
 }
 
 function Admin() {
+  const { search } = Route.useSearch()
+  const navigate = useNavigate()
+
+  const handleSearchChange = (value: string) => {
+    navigate({
+      to: "/admin",
+      search: { search: value },
+      replace: true,
+    })
+  }
+
   return (
     <Container maxW="full">
       <Heading size="lg" textAlign={{ base: "center", md: "left" }} pt={12}>
         User Management
       </Heading>
-      <Navbar type={"User"} />
+      <Navbar
+        type={"User"}
+        searchValue={search}
+        onSearchChange={handleSearchChange}
+      />
       <TableContainer>
         <Table fontSize="md" size={{ base: "sm", md: "md" }}>
           <Thead>
@@ -106,7 +151,7 @@ function Admin() {
             </Tr>
           </Thead>
           <Suspense fallback={<MembersBodySkeleton />}>
-            <MembersTableBody />
+            <MembersTableBody search={search} />
           </Suspense>
         </Table>
       </TableContainer>
diff --git a/frontend/src/routes/_layout/items.tsx b/frontend/src/routes/_layout/items.tsx
index 1f53d27..4334b59 100644
--- a/frontend/src/routes/_layout/items.tsx
+++ b/frontend/src/routes/_layout/items.tsx
@@ -12,7 +12,7 @@ import {
   Tr,
 } from "@chakra-ui/react"
 import { useSuspenseQuery } from "@tanstack/react-query"
-import { createFileRoute } from "@tanstack/react-router"
+import { createFileRoute, useNavigate } from "@tanstack/react-router"
 
 import { Suspense } from "react"
 import { ErrorBoundary } from "react-error-boundary"
@@ -21,33 +21,65 @@ import ActionsMenu from "../../components/Common/ActionsMenu"
 import Navbar from "../../components/Common/Navbar"
 
 export const Route = createFileRoute("/_layout/items")({
+  validateSearch: (search: Record<string, unknown>) => ({
+    search: typeof search.search === "string" ? search.search : "",
+  }),
   component: Items,
 })
 
-function ItemsTableBody() {
+type ItemRow = Awaited<
+  ReturnType<typeof ItemsService.readItems>
+>["data"][number]
+
+const matchesItemSearch = (item: ItemRow, query: string) => {
+  const normalizedQuery = query.trim().toLowerCase()
+
+  if (!normalizedQuery) {
+    return true
+  }
+
+  return [item.id, item.title, item.description]
+    .map((value) => String(value ?? "").toLowerCase())
+    .some((value) => value.includes(normalizedQuery))
+}
+
+function ItemsTableBody({ search }: { search: string }) {
   const { data: items } = useSuspenseQuery({
     queryKey: ["items"],
     queryFn: () => ItemsService.readItems({}),
   })
 
+  const filteredItems = items.data.filter((item) =>
+    matchesItemSearch(item, search),
+  )
+
   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 ? (
+        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>
+        ))
+      ) : (
+        <Tr>
+          <Td colSpan={4} color="ui.dim">
+            No items match your search.
           </Td>
         </Tr>
-      ))}
+      )}
     </Tbody>
   )
 }
-function ItemsTable() {
+
+function ItemsTable({ search }: { search: string }) {
   return (
     <TableContainer>
       <Table size={{ base: "sm", md: "md" }}>
@@ -85,7 +117,7 @@ function ItemsTable() {
               </Tbody>
             }
           >
-            <ItemsTableBody />
+            <ItemsTableBody search={search} />
           </Suspense>
         </ErrorBoundary>
       </Table>
@@ -94,14 +126,29 @@ function ItemsTable() {
 }
 
 function Items() {
+  const { search } = Route.useSearch()
+  const navigate = useNavigate()
+
+  const handleSearchChange = (value: string) => {
+    navigate({
+      to: "/items",
+      search: { search: value },
+      replace: true,
+    })
+  }
+
   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={search}
+        onSearchChange={handleSearchChange}
+      />
+      <ItemsTable search={search} />
     </Container>
   )
 }