🛂 Migrate frontend to Shadcn (#2010)

* 🔧 Add Tailwind, update dependencies and config files

* ✨ Introduce new Shadcn components and remove old ones

* 🔧 Update dependencies

* Add new components.json file

* 🔥 Remove Chakra UI files

* 🔧 Add ThemeProvider component and integrate it into main

* 🔥 Remove common components

* Update primary color

* ✨ Add new components

* ✨ Add AuthLayout component

* 🔧 Add utility function cn

* 🔧 Refactor devtools integration and update dependencies

* ✨ Add Footer and Error components

* ♻️ Update Footer

* 🔥 Remove utils

* ♻️ Refactor error handling in useAuth

* ♻️ Refactor useCustomToast

* ♻️ Refactor Login component and form handling

* ♻️ Refactor SignUp component and form handling

* 🔧 Update dependencies

* ♻️ Refactor RecoverPassword component and form handling

* ♻️ Refactor ResetPassword and form handling

* ♻️ Add error component to root route

* ♻️ Refactor error handling in utils

* ♻️ Update buttons

* 🍱 Add icons and logos assets

* ♻️ Refactor Sidebar component

* 🎨 Format

* ♻️ Refactor ThemeProvider

* ♻️ Refactor Common components

* 🔥 Remove old Appearance component

* ✨ Add Sidebar components

* ♻️ Refactor DeleteAccount components

* ♻️ Refactor ChangePassword component

* ♻️ Refactor UserSettings

* ✨ Add TanStack table

* ♻️ Update SignUp

* ✨ Add Select component

* 🎨 Format

* ♻️ Update Footer

* ✨ Add useCopyToClipboard hook

* 🎨 Tweak table styles

* 🎨 Tweak styling

* ♻️ Refactor AddUser and AddItem components

* ♻️ Update DeleteConfirmation

* ✅ Update tests

* ✅ Update tests

* ✅ Fix tests

* ✨ Add DataTable for item and admin management

* ♻️ Refactor DeleteUser and DeleteItem components

* ✅ Fix tests

* ♻️ Refactor EditUser and EditItem components

* ♻️ Refactor UserInformation component

* 🎨 Format

* ♻️ Refactor pending components

* 🎨 Format

* ✅ Update tests

* ✅ Update tests

* ✅ Fix test

* ♻️ Minor tweaks

* ♻️ Update social media links

frontend/src/components/Common/Appearance.tsx

@@ -0,0 +1,105 @@
+import { Monitor, Moon, Sun } from "lucide-react"
+
+import { type Theme, useTheme } from "@/components/theme-provider"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar"
+
+type LucideIcon = React.FC<React.SVGProps<SVGSVGElement>>
+
+const ICON_MAP: Record<Theme, LucideIcon> = {
+  system: Monitor,
+  light: Sun,
+  dark: Moon,
+}
+
+export const SidebarAppearance = () => {
+  const { isMobile } = useSidebar()
+  const { setTheme, theme } = useTheme()
+  const Icon = ICON_MAP[theme]
+
+  return (
+    <SidebarMenuItem>
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <SidebarMenuButton tooltip="Appearance" data-testid="theme-button">
+            <Icon className="size-4 text-muted-foreground" />
+            <span>Appearance</span>
+            <span className="sr-only">Toggle theme</span>
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          side={isMobile ? "top" : "right"}
+          align="end"
+          className="w-(--radix-dropdown-menu-trigger-width) min-w-56"
+        >
+          <DropdownMenuItem
+            data-testid="light-mode"
+            onClick={() => setTheme("light")}
+          >
+            <Sun className="mr-2 h-4 w-4" />
+            Light
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            data-testid="dark-mode"
+            onClick={() => setTheme("dark")}
+          >
+            <Moon className="mr-2 h-4 w-4" />
+            Dark
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setTheme("system")}>
+            <Monitor className="mr-2 h-4 w-4" />
+            System
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  )
+}
+
+export const Appearance = () => {
+  const { setTheme } = useTheme()
+
+  return (
+    <div className="flex items-center justify-center">
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <Button data-testid="theme-button" variant="outline" size="icon">
+            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <span className="sr-only">Toggle theme</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem
+            data-testid="light-mode"
+            onClick={() => setTheme("light")}
+          >
+            <Sun className="mr-2 h-4 w-4" />
+            Light
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            data-testid="dark-mode"
+            onClick={() => setTheme("dark")}
+          >
+            <Moon className="mr-2 h-4 w-4" />
+            Dark
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setTheme("system")}>
+            <Monitor className="mr-2 h-4 w-4" />
+            System
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

frontend/src/components/Common/AuthLayout.tsx

@@ -0,0 +1,26 @@
+import { Appearance } from "@/components/Common/Appearance"
+import { Logo } from "@/components/Common/Logo"
+import { Footer } from "./Footer"
+
+interface AuthLayoutProps {
+  children: React.ReactNode
+}
+
+export function AuthLayout({ children }: AuthLayoutProps) {
+  return (
+    <div className="grid min-h-svh lg:grid-cols-2">
+      <div className="bg-muted dark:bg-zinc-900 relative hidden lg:flex lg:items-center lg:justify-center">
+        <Logo variant="full" className="h-16" asLink={false} />
+      </div>
+      <div className="flex flex-col gap-4 p-6 md:p-10">
+        <div className="flex justify-end">
+          <Appearance />
+        </div>
+        <div className="flex flex-1 items-center justify-center">
+          <div className="w-full max-w-xs">{children}</div>
+        </div>
+        <Footer />
+      </div>
+    </div>
+  )
+}

frontend/src/components/Common/DataTable.tsx

@@ -0,0 +1,194 @@
+import {
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  })
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="hover:bg-transparent">
+              {headerGroup.headers.map((header) => {
+                return (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableHead>
+                )
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow className="hover:bg-transparent">
+              <TableCell
+                colSpan={columns.length}
+                className="h-32 text-center text-muted-foreground"
+              >
+                No results found.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+
+      {table.getPageCount() > 1 && (
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-4 border-t bg-muted/20">
+          <div className="flex flex-col sm:flex-row sm:items-center gap-4">
+            <div className="text-sm text-muted-foreground">
+              Showing{" "}
+              {table.getState().pagination.pageIndex *
+                table.getState().pagination.pageSize +
+                1}{" "}
+              to{" "}
+              {Math.min(
+                (table.getState().pagination.pageIndex + 1) *
+                  table.getState().pagination.pageSize,
+                data.length,
+              )}{" "}
+              of{" "}
+              <span className="font-medium text-foreground">{data.length}</span>{" "}
+              entries
+            </div>
+            <div className="flex items-center gap-x-2">
+              <p className="text-sm text-muted-foreground">Rows per page</p>
+              <Select
+                value={`${table.getState().pagination.pageSize}`}
+                onValueChange={(value) => {
+                  table.setPageSize(Number(value))
+                }}
+              >
+                <SelectTrigger className="h-8 w-[70px]">
+                  <SelectValue
+                    placeholder={table.getState().pagination.pageSize}
+                  />
+                </SelectTrigger>
+                <SelectContent side="top">
+                  {[5, 10, 25, 50].map((pageSize) => (
+                    <SelectItem key={pageSize} value={`${pageSize}`}>
+                      {pageSize}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-x-6">
+            <div className="flex items-center gap-x-1 text-sm text-muted-foreground">
+              <span>Page</span>
+              <span className="font-medium text-foreground">
+                {table.getState().pagination.pageIndex + 1}
+              </span>
+              <span>of</span>
+              <span className="font-medium text-foreground">
+                {table.getPageCount()}
+              </span>
+            </div>
+
+            <div className="flex items-center gap-x-1">
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-8 w-8 p-0"
+                onClick={() => table.setPageIndex(0)}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <span className="sr-only">Go to first page</span>
+                <ChevronsLeft className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-8 w-8 p-0"
+                onClick={() => table.previousPage()}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <span className="sr-only">Go to previous page</span>
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-8 w-8 p-0"
+                onClick={() => table.nextPage()}
+                disabled={!table.getCanNextPage()}
+              >
+                <span className="sr-only">Go to next page</span>
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-8 w-8 p-0"
+                onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+                disabled={!table.getCanNextPage()}
+              >
+                <span className="sr-only">Go to last page</span>
+                <ChevronsRight className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/Common/ErrorComponent.tsx

@@ -0,0 +1,29 @@
+import { Link } from "@tanstack/react-router"
+import { Button } from "@/components/ui/button"
+
+const ErrorComponent = () => {
+  return (
+    <div
+      className="flex min-h-screen items-center justify-center flex-col p-4"
+      data-testid="error-component"
+    >
+      <div className="flex items-center z-10">
+        <div className="flex flex-col ml-4 items-center justify-center p-4">
+          <span className="text-6xl md:text-8xl font-bold leading-none mb-4">
+            Error
+          </span>
+          <span className="text-2xl font-bold mb-2">Oops!</span>
+        </div>
+      </div>
+
+      <p className="text-lg text-muted-foreground mb-4 text-center z-10">
+        Something went wrong. Please try again.
+      </p>
+      <Link to="/">
+        <Button>Go Home</Button>
+      </Link>
+    </div>
+  )
+}
+
+export default ErrorComponent

frontend/src/components/Common/Footer.tsx

@@ -0,0 +1,36 @@
+import { FaGithub, FaLinkedinIn } from "react-icons/fa"
+import { FaXTwitter } from "react-icons/fa6"
+
+const socialLinks = [
+  { icon: FaGithub, href: "https://github.com/fastapi/fastapi", label: "GitHub" },
+  { icon: FaXTwitter, href: "https://x.com/fastapi", label: "X" },
+  { icon: FaLinkedinIn, href: "https://linkedin.com/company/fastapi", label: "LinkedIn" },
+]
+
+export function Footer() {
+  const currentYear = new Date().getFullYear()
+
+  return (
+    <footer className="border-t py-4 px-6">
+      <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
+        <p className="text-muted-foreground text-sm">
+          Full Stack FastAPI Template - {currentYear}
+        </p>
+        <div className="flex items-center gap-4">
+          {socialLinks.map(({ icon: Icon, href, label }) => (
+            <a
+              key={label}
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={label}
+              className="text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <Icon className="h-5 w-5" />
+            </a>
+          ))}
+        </div>
+      </div>
+    </footer>
+  )
+}

frontend/src/components/Common/ItemActionsMenu.tsx

@@ -1,26 +0,0 @@
-import { IconButton } from "@chakra-ui/react"
-import { BsThreeDotsVertical } from "react-icons/bs"
-import type { ItemPublic } from "@/client"
-import DeleteItem from "../Items/DeleteItem"
-import EditItem from "../Items/EditItem"
-import { MenuContent, MenuRoot, MenuTrigger } from "../ui/menu"
-
-interface ItemActionsMenuProps {
-  item: ItemPublic
-}
-
-export const ItemActionsMenu = ({ item }: ItemActionsMenuProps) => {
-  return (
-    <MenuRoot>
-      <MenuTrigger asChild>
-        <IconButton variant="ghost" color="inherit">
-          <BsThreeDotsVertical />
-        </IconButton>
-      </MenuTrigger>
-      <MenuContent>
-        <EditItem item={item} />
-        <DeleteItem id={item.id} />
-      </MenuContent>
-    </MenuRoot>
-  )
-}

frontend/src/components/Common/Logo.tsx

@@ -0,0 +1,60 @@
+import { Link } from "@tanstack/react-router"
+
+import { useTheme } from "@/components/theme-provider"
+import { cn } from "@/lib/utils"
+import icon from "/assets/images/fastapi-icon.svg"
+import iconLight from "/assets/images/fastapi-icon-light.svg"
+import logo from "/assets/images/fastapi-logo.svg"
+import logoLight from "/assets/images/fastapi-logo-light.svg"
+
+interface LogoProps {
+  variant?: "full" | "icon" | "responsive"
+  className?: string
+  asLink?: boolean
+}
+
+export function Logo({
+  variant = "full",
+  className,
+  asLink = true,
+}: LogoProps) {
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === "dark"
+
+  const fullLogo = isDark ? logoLight : logo
+  const iconLogo = isDark ? iconLight : icon
+
+  const content =
+    variant === "responsive" ? (
+      <>
+        <img
+          src={fullLogo}
+          alt="FastAPI"
+          className={cn(
+            "h-6 w-auto group-data-[collapsible=icon]:hidden",
+            className,
+          )}
+        />
+        <img
+          src={iconLogo}
+          alt="FastAPI"
+          className={cn(
+            "size-5 hidden group-data-[collapsible=icon]:block",
+            className,
+          )}
+        />
+      </>
+    ) : (
+      <img
+        src={variant === "full" ? fullLogo : iconLogo}
+        alt="FastAPI"
+        className={cn(variant === "full" ? "h-6 w-auto" : "size-5", className)}
+      />
+    )
+
+  if (!asLink) {
+    return content
+  }
+
+  return <Link to="/">{content}</Link>
+}

frontend/src/components/Common/Navbar.tsx

@@ -1,32 +0,0 @@
-import { Flex, Image, useBreakpointValue } from "@chakra-ui/react"
-import { Link } from "@tanstack/react-router"
-
-import Logo from "/assets/images/fastapi-logo.svg"
-import UserMenu from "./UserMenu"
-
-function Navbar() {
-  const display = useBreakpointValue({ base: "none", md: "flex" })
-
-  return (
-    <Flex
-      display={display}
-      justify="space-between"
-      position="sticky"
-      color="white"
-      align="center"
-      bg="bg.muted"
-      w="100%"
-      top={0}
-      p={4}
-    >
-      <Link to="/">
-        <Image src={Logo} alt="Logo" maxW="3xs" p={2} />
-      </Link>
-      <Flex gap={2} alignItems="center">
-        <UserMenu />
-      </Flex>
-    </Flex>
-  )
-}
-
-export default Navbar

frontend/src/components/Common/NotFound.tsx

@@ -1,43 +1,30 @@
-import { Button, Center, Flex, Text } from "@chakra-ui/react"
 import { Link } from "@tanstack/react-router"
+import { Button } from "@/components/ui/button"
 
 const NotFound = () => {
   return (
-    <Flex
-      height="100vh"
-      align="center"
-      justify="center"
-      flexDir="column"
+    <div
+      className="flex min-h-screen items-center justify-center flex-col p-4"
       data-testid="not-found"
-      p={4}
     >
-      <Flex alignItems="center" zIndex={1}>
-        <Flex flexDir="column" ml={4} align="center" justify="center" p={4}>
-          <Text
-            fontSize={{ base: "6xl", md: "8xl" }}
-            fontWeight="bold"
-            lineHeight="1"
-            mb={4}
-          >
+      <div className="flex items-center z-10">
+        <div className="flex flex-col ml-4 items-center justify-center p-4">
+          <span className="text-6xl md:text-8xl font-bold leading-none mb-4">
             404
-          </Text>
-          <Text fontSize="2xl" fontWeight="bold" mb={2}>
-            Oops!
-          </Text>
-        </Flex>
-      </Flex>
+          </span>
+          <span className="text-2xl font-bold mb-2">Oops!</span>
+        </div>
+      </div>
 
-      <Text fontSize="lg" color="gray.600" mb={4} textAlign="center" zIndex={1}>
+      <p className="text-lg text-muted-foreground mb-4 text-center z-10">
         The page you are looking for was not found.
-      </Text>
-      <Center zIndex={1}>
+      </p>
+      <div className="z-10">
         <Link to="/">
-          <Button variant="solid" colorScheme="teal" mt={4} alignSelf="center">
-            Go Back
-          </Button>
+          <Button className="mt-4">Go Back</Button>
         </Link>
-      </Center>
-    </Flex>
+      </div>
+    </div>
   )
 }
 

frontend/src/components/Common/Sidebar.tsx

@@ -1,97 +0,0 @@
-import { Box, Flex, IconButton, Text } from "@chakra-ui/react"
-import { useQueryClient } from "@tanstack/react-query"
-import { useState } from "react"
-import { FaBars } from "react-icons/fa"
-import { FiLogOut } from "react-icons/fi"
-
-import type { UserPublic } from "@/client"
-import useAuth from "@/hooks/useAuth"
-import {
-  DrawerBackdrop,
-  DrawerBody,
-  DrawerCloseTrigger,
-  DrawerContent,
-  DrawerRoot,
-  DrawerTrigger,
-} from "../ui/drawer"
-import SidebarItems from "./SidebarItems"
-
-const Sidebar = () => {
-  const queryClient = useQueryClient()
-  const currentUser = queryClient.getQueryData<UserPublic>(["currentUser"])
-  const { logout } = useAuth()
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      {/* Mobile */}
-      <DrawerRoot
-        placement="start"
-        open={open}
-        onOpenChange={(e) => setOpen(e.open)}
-      >
-        <DrawerBackdrop />
-        <DrawerTrigger asChild>
-          <IconButton
-            variant="ghost"
-            color="inherit"
-            display={{ base: "flex", md: "none" }}
-            aria-label="Open Menu"
-            position="absolute"
-            zIndex="100"
-            m={4}
-          >
-            <FaBars />
-          </IconButton>
-        </DrawerTrigger>
-        <DrawerContent maxW="xs">
-          <DrawerCloseTrigger />
-          <DrawerBody>
-            <Flex flexDir="column" justify="space-between">
-              <Box>
-                <SidebarItems onClose={() => setOpen(false)} />
-                <Flex
-                  as="button"
-                  onClick={() => {
-                    logout()
-                  }}
-                  alignItems="center"
-                  gap={4}
-                  px={4}
-                  py={2}
-                >
-                  <FiLogOut />
-                  <Text>Log Out</Text>
-                </Flex>
-              </Box>
-              {currentUser?.email && (
-                <Text fontSize="sm" p={2} truncate maxW="sm">
-                  Logged in as: {currentUser.email}
-                </Text>
-              )}
-            </Flex>
-          </DrawerBody>
-          <DrawerCloseTrigger />
-        </DrawerContent>
-      </DrawerRoot>
-
-      {/* Desktop */}
-
-      <Box
-        display={{ base: "none", md: "flex" }}
-        position="sticky"
-        bg="bg.subtle"
-        top={0}
-        minW="xs"
-        h="100vh"
-        p={4}
-      >
-        <Box w="100%">
-          <SidebarItems />
-        </Box>
-      </Box>
-    </>
-  )
-}
-
-export default Sidebar

frontend/src/components/Common/SidebarItems.tsx

@@ -1,61 +0,0 @@
-import { Box, Flex, Icon, Text } from "@chakra-ui/react"
-import { useQueryClient } from "@tanstack/react-query"
-import { Link as RouterLink } from "@tanstack/react-router"
-import { FiBriefcase, FiHome, FiSettings, FiUsers } from "react-icons/fi"
-import type { IconType } from "react-icons/lib"
-
-import type { UserPublic } from "@/client"
-
-const items = [
-  { icon: FiHome, title: "Dashboard", path: "/" },
-  { icon: FiBriefcase, title: "Items", path: "/items" },
-  { icon: FiSettings, title: "User Settings", path: "/settings" },
-]
-
-interface SidebarItemsProps {
-  onClose?: () => void
-}
-
-interface Item {
-  icon: IconType
-  title: string
-  path: string
-}
-
-const SidebarItems = ({ onClose }: SidebarItemsProps) => {
-  const queryClient = useQueryClient()
-  const currentUser = queryClient.getQueryData<UserPublic>(["currentUser"])
-
-  const finalItems: Item[] = currentUser?.is_superuser
-    ? [...items, { icon: FiUsers, title: "Admin", path: "/admin" }]
-    : items
-
-  const listItems = finalItems.map(({ icon, title, path }) => (
-    <RouterLink key={title} to={path} onClick={onClose}>
-      <Flex
-        gap={4}
-        px={4}
-        py={2}
-        _hover={{
-          background: "gray.subtle",
-        }}
-        alignItems="center"
-        fontSize="sm"
-      >
-        <Icon as={icon} alignSelf="center" />
-        <Text ml={2}>{title}</Text>
-      </Flex>
-    </RouterLink>
-  ))
-
-  return (
-    <>
-      <Text fontSize="xs" px={4} py={2} fontWeight="bold">
-        Menu
-      </Text>
-      <Box>{listItems}</Box>
-    </>
-  )
-}
-
-export default SidebarItems

frontend/src/components/Common/UserActionsMenu.tsx

@@ -1,27 +0,0 @@
-import { IconButton } from "@chakra-ui/react"
-import { BsThreeDotsVertical } from "react-icons/bs"
-import type { UserPublic } from "@/client"
-import DeleteUser from "../Admin/DeleteUser"
-import EditUser from "../Admin/EditUser"
-import { MenuContent, MenuRoot, MenuTrigger } from "../ui/menu"
-
-interface UserActionsMenuProps {
-  user: UserPublic
-  disabled?: boolean
-}
-
-export const UserActionsMenu = ({ user, disabled }: UserActionsMenuProps) => {
-  return (
-    <MenuRoot>
-      <MenuTrigger asChild>
-        <IconButton variant="ghost" color="inherit" disabled={disabled}>
-          <BsThreeDotsVertical />
-        </IconButton>
-      </MenuTrigger>
-      <MenuContent>
-        <EditUser user={user} />
-        <DeleteUser id={user.id} />
-      </MenuContent>
-    </MenuRoot>
-  )
-}

frontend/src/components/Common/UserMenu.tsx

@@ -1,59 +0,0 @@
-import { Box, Button, Flex, Text } from "@chakra-ui/react"
-import { Link } from "@tanstack/react-router"
-import { FaUserAstronaut } from "react-icons/fa"
-import { FiLogOut, FiUser } from "react-icons/fi"
-
-import useAuth from "@/hooks/useAuth"
-import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from "../ui/menu"
-
-const UserMenu = () => {
-  const { user, logout } = useAuth()
-
-  const handleLogout = async () => {
-    logout()
-  }
-
-  return (
-    <>
-      {/* Desktop */}
-      <Flex>
-        <MenuRoot>
-          <MenuTrigger asChild p={2}>
-            <Button data-testid="user-menu" variant="solid" maxW="sm" truncate>
-              <FaUserAstronaut fontSize="18" />
-              <Text>{user?.full_name || "User"}</Text>
-            </Button>
-          </MenuTrigger>
-
-          <MenuContent>
-            <Link to="/settings">
-              <MenuItem
-                closeOnSelect
-                value="user-settings"
-                gap={2}
-                py={2}
-                style={{ cursor: "pointer" }}
-              >
-                <FiUser fontSize="18px" />
-                <Box flex="1">My Profile</Box>
-              </MenuItem>
-            </Link>
-
-            <MenuItem
-              value="logout"
-              gap={2}
-              py={2}
-              onClick={handleLogout}
-              style={{ cursor: "pointer" }}
-            >
-              <FiLogOut />
-              Log Out
-            </MenuItem>
-          </MenuContent>
-        </MenuRoot>
-      </Flex>
-    </>
-  )
-}
-
-export default UserMenu