+
+ {fullName || "N/A"}
+
+ {row.original.isCurrentUser && (
+
+ You
+
+ )}
+
+ )
+ },
+ },
+ {
+ accessorKey: "email",
+ header: "Email",
+ cell: ({ row }) => (
+ {row.original.email}
+ ),
+ },
+ {
+ accessorKey: "is_superuser",
+ header: "Role",
+ cell: ({ row }) => (
+
+
+
+ {row.original.is_active ? "Active" : "Inactive"}
+
+
+ ),
+ },
+ {
+ id: "actions",
+ header: () => Actions,
+ cell: ({ row }) => (
+
+
+ ),
+ },
+]
diff --git a/frontend/src/components/Common/Appearance.tsx b/frontend/src/components/Common/Appearance.tsx
new file mode 100644
index 0000000000..1c56f6c410
--- /dev/null
+++ b/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
+
+
+
+
+
+ setTheme("light")}
+ >
+
+ setTheme("dark")}
+ >
+
+ setTheme("system")}>
+
+
+
+
+ )
+}
diff --git a/frontend/src/components/Common/AuthLayout.tsx b/frontend/src/components/Common/AuthLayout.tsx
new file mode 100644
index 0000000000..4551610267
--- /dev/null
+++ b/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 (
+
+
+ )
+}
diff --git a/frontend/src/components/Common/DataTable.tsx b/frontend/src/components/Common/DataTable.tsx
new file mode 100644
index 0000000000..e5bf2ae129
--- /dev/null
+++ b/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
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+ {table.getPageCount() > 1 && (
+
+ )
+}
diff --git a/frontend/src/components/Common/ErrorComponent.tsx b/frontend/src/components/Common/ErrorComponent.tsx
new file mode 100644
index 0000000000..e4a97d29cd
--- /dev/null
+++ b/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 (
+
+
+ )}
+
+
+
+
+ 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{" "}
+ {data.length}{" "}
+ entries
+
+
+
+ Rows per page
+ +
+
+
+ Page
+
+ {table.getState().pagination.pageIndex + 1}
+
+ of
+
+ {table.getPageCount()}
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default ErrorComponent
diff --git a/frontend/src/components/Common/Footer.tsx b/frontend/src/components/Common/Footer.tsx
new file mode 100644
index 0000000000..e7475d1227
--- /dev/null
+++ b/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 (
+
+ )
+}
diff --git a/frontend/src/components/Common/ItemActionsMenu.tsx b/frontend/src/components/Common/ItemActionsMenu.tsx
deleted file mode 100644
index 18e424fdd4..0000000000
--- a/frontend/src/components/Common/ItemActionsMenu.tsx
+++ /dev/null
@@ -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 (
-
+
+
+
+
+ Error
+
+ Oops!
+
+ + Something went wrong. Please try again. +
+ + + +
+
-
+
404
-
-
- Oops!
-
-
-
+
+ Oops!
+
+ The page you are looking for was not found. -
-
+
-
-
+
+
)
}
diff --git a/frontend/src/components/Common/Sidebar.tsx b/frontend/src/components/Common/Sidebar.tsx
deleted file mode 100644
index 8437634f47..0000000000
--- a/frontend/src/components/Common/Sidebar.tsx
+++ /dev/null
@@ -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
+ {id}
+
+
+ )
+}
+
+export const columns: ColumnDef
+
+ ),
+ },
+]
diff --git a/frontend/src/components/Pending/PendingItems.tsx b/frontend/src/components/Pending/PendingItems.tsx
index 0afc50477d..9658335b6d 100644
--- a/frontend/src/components/Pending/PendingItems.tsx
+++ b/frontend/src/components/Pending/PendingItems.tsx
@@ -1,35 +1,46 @@
-import { Table } from "@chakra-ui/react"
-import { SkeletonText } from "../ui/skeleton"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table"
const PendingItems = () => (
-
+
+
+ {getInitials(fullName || "User")}
+
+
+
+ )
+}
+
+export function User({ user }: { user: any }) {
+ const { logout } = useAuth()
+ const { isMobile, setOpenMobile } = useSidebar()
+
+ if (!user) return null
+
+ const handleMenuClick = () => {
+ if (isMobile) {
+ setOpenMobile(false)
+ }
+ }
+ const handleLogout = async () => {
+ logout()
+ }
+
+ return (
+
+
+ {fullName}
+{email}
+
+
)
}
+
export default ChangePassword
diff --git a/frontend/src/components/UserSettings/DeleteAccount.tsx b/frontend/src/components/UserSettings/DeleteAccount.tsx
index 5800c98fe1..7b9e895ec5 100644
--- a/frontend/src/components/UserSettings/DeleteAccount.tsx
+++ b/frontend/src/components/UserSettings/DeleteAccount.tsx
@@ -1,19 +1,15 @@
-import { Container, Heading, Text } from "@chakra-ui/react"
-
import DeleteConfirmation from "./DeleteConfirmation"
const DeleteAccount = () => {
return (
- Change Password
+ + +
+
)
}
+
export default DeleteAccount
diff --git a/frontend/src/components/UserSettings/DeleteConfirmation.tsx b/frontend/src/components/UserSettings/DeleteConfirmation.tsx
index 3885a570d7..06d76d9228 100644
--- a/frontend/src/components/UserSettings/DeleteConfirmation.tsx
+++ b/frontend/src/components/UserSettings/DeleteConfirmation.tsx
@@ -1,44 +1,36 @@
-import { Button, ButtonGroup, Text } from "@chakra-ui/react"
import { useMutation, useQueryClient } from "@tanstack/react-query"
-import { useState } from "react"
import { useForm } from "react-hook-form"
-import { type ApiError, UsersService } from "@/client"
+import { UsersService } from "@/client"
+import { Button } from "@/components/ui/button"
import {
- DialogActionTrigger,
- DialogBody,
- DialogCloseTrigger,
+ Dialog,
+ DialogClose,
DialogContent,
+ DialogDescription,
DialogFooter,
DialogHeader,
- DialogRoot,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
+import { LoadingButton } from "@/components/ui/loading-button"
import useAuth from "@/hooks/useAuth"
import useCustomToast from "@/hooks/useCustomToast"
import { handleError } from "@/utils"
const DeleteConfirmation = () => {
- const [isOpen, setIsOpen] = useState(false)
const queryClient = useQueryClient()
- const { showSuccessToast } = useCustomToast()
- const {
- handleSubmit,
- formState: { isSubmitting },
- } = useForm()
+ const { showSuccessToast, showErrorToast } = useCustomToast()
+ const { handleSubmit } = useForm()
const { logout } = useAuth()
const mutation = useMutation({
mutationFn: () => UsersService.deleteUserMe(),
onSuccess: () => {
showSuccessToast("Your account has been successfully deleted")
- setIsOpen(false)
logout()
},
- onError: (err: ApiError) => {
- handleError(err)
- },
+ onError: handleError.bind(showErrorToast),
onSettled: () => {
queryClient.invalidateQueries({ queryKey: ["currentUser"] })
},
@@ -49,58 +41,41 @@ const DeleteConfirmation = () => {
}
return (
- Delete Account
++ Permanently delete your account and all associated data. +
User Information
++ {field.value || "N/A"} +
+{field.value}
+
+ {editMode ? (
+ <>
+
+ Save
+
+
+
+ ) : (
+
+ )}
+
+
+
+
)
}
diff --git a/frontend/src/components/theme-provider.tsx b/frontend/src/components/theme-provider.tsx
new file mode 100644
index 0000000000..a582b28cf1
--- /dev/null
+++ b/frontend/src/components/theme-provider.tsx
@@ -0,0 +1,115 @@
+import {
+ createContext,
+ useCallback,
+ useContext,
+ useEffect,
+ useState,
+} from "react"
+
+export type Theme = "dark" | "light" | "system"
+
+type ThemeProviderProps = {
+ children: React.ReactNode
+ defaultTheme?: Theme
+ storageKey?: string
+}
+
+type ThemeProviderState = {
+ theme: Theme
+ resolvedTheme: "dark" | "light"
+ setTheme: (theme: Theme) => void
+}
+
+const initialState: ThemeProviderState = {
+ theme: "system",
+ resolvedTheme: "light",
+ setTheme: () => null,
+}
+
+const ThemeProviderContext = createContext