tr]:last:border-b-0",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+ return (
+ |
+ )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+ return (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+ return (
+ | [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableCaption({
+ className,
+ ...props
+}: React.ComponentProps<"caption">) {
+ return (
+
+ )
+}
+
+export {
+ Table,
+ TableHeader,
+ TableBody,
+ TableFooter,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableCaption,
+}
diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..3d6f3ac
--- /dev/null
+++ b/frontend/src/components/ui/tabs.tsx
@@ -0,0 +1,64 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function TabsList({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function TabsTrigger({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function TabsContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/frontend/src/components/ui/tooltip.tsx b/frontend/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..715bf76
--- /dev/null
+++ b/frontend/src/components/ui/tooltip.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+ delayDuration = 0,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function Tooltip({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+function TooltipTrigger({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function TooltipContent({
+ className,
+ sideOffset = 0,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ {children}
+
+
+
+ )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/frontend/src/hooks/useAuth.ts b/frontend/src/hooks/useAuth.ts
new file mode 100644
index 0000000..7ccc795
--- /dev/null
+++ b/frontend/src/hooks/useAuth.ts
@@ -0,0 +1,70 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { useNavigate } from "@tanstack/react-router"
+
+import {
+ type Body_login_login_access_token as AccessToken,
+ LoginService,
+ type UserPublic,
+ type UserRegister,
+ UsersService,
+} from "@/client"
+import { handleError } from "@/utils"
+import useCustomToast from "./useCustomToast"
+
+const isLoggedIn = () => {
+ return localStorage.getItem("access_token") !== null
+}
+
+const useAuth = () => {
+ const navigate = useNavigate()
+ const queryClient = useQueryClient()
+ const { showErrorToast } = useCustomToast()
+
+ const { data: user } = useQuery({
+ queryKey: ["currentUser"],
+ queryFn: UsersService.readUserMe,
+ enabled: isLoggedIn(),
+ })
+
+ const signUpMutation = useMutation({
+ mutationFn: (data: UserRegister) =>
+ UsersService.registerUser({ requestBody: data }),
+ onSuccess: () => {
+ navigate({ to: "/login" })
+ },
+ onError: handleError.bind(showErrorToast),
+ onSettled: () => {
+ queryClient.invalidateQueries({ queryKey: ["users"] })
+ },
+ })
+
+ const login = async (data: AccessToken) => {
+ const response = await LoginService.loginAccessToken({
+ formData: data,
+ })
+ localStorage.setItem("access_token", response.access_token)
+ }
+
+ const loginMutation = useMutation({
+ mutationFn: login,
+ onSuccess: () => {
+ navigate({ to: "/" })
+ },
+ onError: handleError.bind(showErrorToast),
+ })
+
+ const logout = () => {
+ localStorage.removeItem("access_token")
+ navigate({ to: "/login" })
+ }
+
+ return {
+ signUpMutation,
+ loginMutation,
+ logout,
+ user,
+ }
+}
+
+export { isLoggedIn }
+export default useAuth
diff --git a/frontend/src/hooks/useCopyToClipboard.ts b/frontend/src/hooks/useCopyToClipboard.ts
new file mode 100644
index 0000000..8a4a841
--- /dev/null
+++ b/frontend/src/hooks/useCopyToClipboard.ts
@@ -0,0 +1,32 @@
+// source: https://usehooks-ts.com/react-hook/use-copy-to-clipboard
+import { useCallback, useState } from "react"
+
+type CopiedValue = string | null
+
+type CopyFn = (text: string) => Promise
+
+export function useCopyToClipboard(): [CopiedValue, CopyFn] {
+ const [copiedText, setCopiedText] = useState(null)
+
+ const copy: CopyFn = useCallback(async (text) => {
+ if (!navigator?.clipboard) {
+ console.warn("Clipboard not supported")
+ return false
+ }
+
+ try {
+ await navigator.clipboard.writeText(text)
+ setCopiedText(text)
+
+ setTimeout(() => setCopiedText(null), 2000)
+
+ return true
+ } catch (error) {
+ console.warn("Copy failed", error)
+ setCopiedText(null)
+ return false
+ }
+ }, [])
+
+ return [copiedText, copy]
+}
diff --git a/frontend/src/hooks/useCustomToast.ts b/frontend/src/hooks/useCustomToast.ts
new file mode 100644
index 0000000..ab03265
--- /dev/null
+++ b/frontend/src/hooks/useCustomToast.ts
@@ -0,0 +1,19 @@
+import { toast } from "sonner"
+
+const useCustomToast = () => {
+ const showSuccessToast = (description: string) => {
+ toast.success("Success!", {
+ description,
+ })
+ }
+
+ const showErrorToast = (description: string) => {
+ toast.error("Something went wrong!", {
+ description,
+ })
+ }
+
+ return { showSuccessToast, showErrorToast }
+}
+
+export default useCustomToast
diff --git a/frontend/src/hooks/useMobile.ts b/frontend/src/hooks/useMobile.ts
new file mode 100644
index 0000000..2b0fe1d
--- /dev/null
+++ b/frontend/src/hooks/useMobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+ const [isMobile, setIsMobile] = React.useState(undefined)
+
+ React.useEffect(() => {
+ const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+ const onChange = () => {
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+ }
+ mql.addEventListener("change", onChange)
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+ return () => mql.removeEventListener("change", onChange)
+ }, [])
+
+ return !!isMobile
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000..47e5696
--- /dev/null
+++ b/frontend/src/index.css
@@ -0,0 +1,124 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+ --radius: 0.625rem;
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.145 0 0);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.145 0 0);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.145 0 0);
+ --primary: oklch(0.5982 0.10687 182.4689);
+ --primary-foreground: oklch(0.985 0 0);
+ --secondary: oklch(0.97 0 0);
+ --secondary-foreground: oklch(0.205 0 0);
+ --muted: oklch(0.97 0 0);
+ --muted-foreground: oklch(0.556 0 0);
+ --accent: oklch(0.97 0 0);
+ --accent-foreground: oklch(0.205 0 0);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.922 0 0);
+ --input: oklch(0.922 0 0);
+ --ring: oklch(0.708 0 0);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: oklch(0.5982 0.10687 182.4689);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+ --background: oklch(0.145 0 0);
+ --foreground: oklch(0.985 0 0);
+ --card: oklch(0.205 0 0);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.205 0 0);
+ --popover-foreground: oklch(0.985 0 0);
+ --primary: oklch(0.65 0.10687 182.4689);
+ --primary-foreground: oklch(0.985 0 0);
+ --secondary: oklch(0.269 0 0);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.269 0 0);
+ --muted-foreground: oklch(0.708 0 0);
+ --accent: oklch(0.269 0 0);
+ --accent-foreground: oklch(0.985 0 0);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.556 0 0);
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --sidebar: oklch(0.205 0 0);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.65 0.10687 182.4689);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.269 0 0);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+ button,
+ [role="button"] {
+ cursor: pointer;
+ }
+}
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
new file mode 100644
index 0000000..d084cca
--- /dev/null
+++ b/frontend/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 0000000..8afe946
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,52 @@
+import {
+ MutationCache,
+ QueryCache,
+ QueryClient,
+ QueryClientProvider,
+} from "@tanstack/react-query"
+import { createRouter, RouterProvider } from "@tanstack/react-router"
+import { StrictMode } from "react"
+import ReactDOM from "react-dom/client"
+import { ApiError, OpenAPI } from "./client"
+import { ThemeProvider } from "./components/theme-provider"
+import { Toaster } from "./components/ui/sonner"
+import "./index.css"
+import { routeTree } from "./routeTree.gen"
+
+OpenAPI.BASE = import.meta.env.VITE_API_URL
+OpenAPI.TOKEN = async () => {
+ return localStorage.getItem("access_token") || ""
+}
+
+const handleApiError = (error: Error) => {
+ if (error instanceof ApiError && [401, 403].includes(error.status)) {
+ localStorage.removeItem("access_token")
+ window.location.href = "/login"
+ }
+}
+const queryClient = new QueryClient({
+ queryCache: new QueryCache({
+ onError: handleApiError,
+ }),
+ mutationCache: new MutationCache({
+ onError: handleApiError,
+ }),
+})
+
+const router = createRouter({ routeTree })
+declare module "@tanstack/react-router" {
+ interface Register {
+ router: typeof router
+ }
+}
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+
+
+
+
+
+
+
+ ,
+)
diff --git a/frontend/src/routeTree.gen.ts b/frontend/src/routeTree.gen.ts
new file mode 100644
index 0000000..8849130
--- /dev/null
+++ b/frontend/src/routeTree.gen.ts
@@ -0,0 +1,235 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as SignupRouteImport } from './routes/signup'
+import { Route as ResetPasswordRouteImport } from './routes/reset-password'
+import { Route as RecoverPasswordRouteImport } from './routes/recover-password'
+import { Route as LoginRouteImport } from './routes/login'
+import { Route as LayoutRouteImport } from './routes/_layout'
+import { Route as LayoutIndexRouteImport } from './routes/_layout/index'
+import { Route as LayoutSettingsRouteImport } from './routes/_layout/settings'
+import { Route as LayoutItemsRouteImport } from './routes/_layout/items'
+import { Route as LayoutAdminRouteImport } from './routes/_layout/admin'
+
+const SignupRoute = SignupRouteImport.update({
+ id: '/signup',
+ path: '/signup',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const ResetPasswordRoute = ResetPasswordRouteImport.update({
+ id: '/reset-password',
+ path: '/reset-password',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const RecoverPasswordRoute = RecoverPasswordRouteImport.update({
+ id: '/recover-password',
+ path: '/recover-password',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const LoginRoute = LoginRouteImport.update({
+ id: '/login',
+ path: '/login',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const LayoutRoute = LayoutRouteImport.update({
+ id: '/_layout',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const LayoutIndexRoute = LayoutIndexRouteImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => LayoutRoute,
+} as any)
+const LayoutSettingsRoute = LayoutSettingsRouteImport.update({
+ id: '/settings',
+ path: '/settings',
+ getParentRoute: () => LayoutRoute,
+} as any)
+const LayoutItemsRoute = LayoutItemsRouteImport.update({
+ id: '/items',
+ path: '/items',
+ getParentRoute: () => LayoutRoute,
+} as any)
+const LayoutAdminRoute = LayoutAdminRouteImport.update({
+ id: '/admin',
+ path: '/admin',
+ getParentRoute: () => LayoutRoute,
+} as any)
+
+export interface FileRoutesByFullPath {
+ '/login': typeof LoginRoute
+ '/recover-password': typeof RecoverPasswordRoute
+ '/reset-password': typeof ResetPasswordRoute
+ '/signup': typeof SignupRoute
+ '/admin': typeof LayoutAdminRoute
+ '/items': typeof LayoutItemsRoute
+ '/settings': typeof LayoutSettingsRoute
+ '/': typeof LayoutIndexRoute
+}
+export interface FileRoutesByTo {
+ '/login': typeof LoginRoute
+ '/recover-password': typeof RecoverPasswordRoute
+ '/reset-password': typeof ResetPasswordRoute
+ '/signup': typeof SignupRoute
+ '/admin': typeof LayoutAdminRoute
+ '/items': typeof LayoutItemsRoute
+ '/settings': typeof LayoutSettingsRoute
+ '/': typeof LayoutIndexRoute
+}
+export interface FileRoutesById {
+ __root__: typeof rootRouteImport
+ '/_layout': typeof LayoutRouteWithChildren
+ '/login': typeof LoginRoute
+ '/recover-password': typeof RecoverPasswordRoute
+ '/reset-password': typeof ResetPasswordRoute
+ '/signup': typeof SignupRoute
+ '/_layout/admin': typeof LayoutAdminRoute
+ '/_layout/items': typeof LayoutItemsRoute
+ '/_layout/settings': typeof LayoutSettingsRoute
+ '/_layout/': typeof LayoutIndexRoute
+}
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath
+ fullPaths:
+ | '/login'
+ | '/recover-password'
+ | '/reset-password'
+ | '/signup'
+ | '/admin'
+ | '/items'
+ | '/settings'
+ | '/'
+ fileRoutesByTo: FileRoutesByTo
+ to:
+ | '/login'
+ | '/recover-password'
+ | '/reset-password'
+ | '/signup'
+ | '/admin'
+ | '/items'
+ | '/settings'
+ | '/'
+ id:
+ | '__root__'
+ | '/_layout'
+ | '/login'
+ | '/recover-password'
+ | '/reset-password'
+ | '/signup'
+ | '/_layout/admin'
+ | '/_layout/items'
+ | '/_layout/settings'
+ | '/_layout/'
+ fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+ LayoutRoute: typeof LayoutRouteWithChildren
+ LoginRoute: typeof LoginRoute
+ RecoverPasswordRoute: typeof RecoverPasswordRoute
+ ResetPasswordRoute: typeof ResetPasswordRoute
+ SignupRoute: typeof SignupRoute
+}
+
+declare module '@tanstack/react-router' {
+ interface FileRoutesByPath {
+ '/signup': {
+ id: '/signup'
+ path: '/signup'
+ fullPath: '/signup'
+ preLoaderRoute: typeof SignupRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/reset-password': {
+ id: '/reset-password'
+ path: '/reset-password'
+ fullPath: '/reset-password'
+ preLoaderRoute: typeof ResetPasswordRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/recover-password': {
+ id: '/recover-password'
+ path: '/recover-password'
+ fullPath: '/recover-password'
+ preLoaderRoute: typeof RecoverPasswordRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/login': {
+ id: '/login'
+ path: '/login'
+ fullPath: '/login'
+ preLoaderRoute: typeof LoginRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/_layout': {
+ id: '/_layout'
+ path: ''
+ fullPath: ''
+ preLoaderRoute: typeof LayoutRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/_layout/': {
+ id: '/_layout/'
+ path: '/'
+ fullPath: '/'
+ preLoaderRoute: typeof LayoutIndexRouteImport
+ parentRoute: typeof LayoutRoute
+ }
+ '/_layout/settings': {
+ id: '/_layout/settings'
+ path: '/settings'
+ fullPath: '/settings'
+ preLoaderRoute: typeof LayoutSettingsRouteImport
+ parentRoute: typeof LayoutRoute
+ }
+ '/_layout/items': {
+ id: '/_layout/items'
+ path: '/items'
+ fullPath: '/items'
+ preLoaderRoute: typeof LayoutItemsRouteImport
+ parentRoute: typeof LayoutRoute
+ }
+ '/_layout/admin': {
+ id: '/_layout/admin'
+ path: '/admin'
+ fullPath: '/admin'
+ preLoaderRoute: typeof LayoutAdminRouteImport
+ parentRoute: typeof LayoutRoute
+ }
+ }
+}
+
+interface LayoutRouteChildren {
+ LayoutAdminRoute: typeof LayoutAdminRoute
+ LayoutItemsRoute: typeof LayoutItemsRoute
+ LayoutSettingsRoute: typeof LayoutSettingsRoute
+ LayoutIndexRoute: typeof LayoutIndexRoute
+}
+
+const LayoutRouteChildren: LayoutRouteChildren = {
+ LayoutAdminRoute: LayoutAdminRoute,
+ LayoutItemsRoute: LayoutItemsRoute,
+ LayoutSettingsRoute: LayoutSettingsRoute,
+ LayoutIndexRoute: LayoutIndexRoute,
+}
+
+const LayoutRouteWithChildren =
+ LayoutRoute._addFileChildren(LayoutRouteChildren)
+
+const rootRouteChildren: RootRouteChildren = {
+ LayoutRoute: LayoutRouteWithChildren,
+ LoginRoute: LoginRoute,
+ RecoverPasswordRoute: RecoverPasswordRoute,
+ ResetPasswordRoute: ResetPasswordRoute,
+ SignupRoute: SignupRoute,
+}
+export const routeTree = rootRouteImport
+ ._addFileChildren(rootRouteChildren)
+ ._addFileTypes()
diff --git a/frontend/src/routes/__root.tsx b/frontend/src/routes/__root.tsx
new file mode 100644
index 0000000..8644b83
--- /dev/null
+++ b/frontend/src/routes/__root.tsx
@@ -0,0 +1,18 @@
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
+import { createRootRoute, HeadContent, Outlet } from "@tanstack/react-router"
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"
+import ErrorComponent from "@/components/Common/ErrorComponent"
+import NotFound from "@/components/Common/NotFound"
+
+export const Route = createRootRoute({
+ component: () => (
+ <>
+
+
+
+
+
+ ),
+ notFoundComponent: () => ,
+ errorComponent: () => ,
+})
diff --git a/frontend/src/routes/_layout.tsx b/frontend/src/routes/_layout.tsx
new file mode 100644
index 0000000..1697305
--- /dev/null
+++ b/frontend/src/routes/_layout.tsx
@@ -0,0 +1,42 @@
+import { createFileRoute, Outlet, redirect } from "@tanstack/react-router"
+
+import { Footer } from "@/components/Common/Footer"
+import AppSidebar from "@/components/Sidebar/AppSidebar"
+import {
+ SidebarInset,
+ SidebarProvider,
+ SidebarTrigger,
+} from "@/components/ui/sidebar"
+import { isLoggedIn } from "@/hooks/useAuth"
+
+export const Route = createFileRoute("/_layout")({
+ component: Layout,
+ beforeLoad: async () => {
+ if (!isLoggedIn()) {
+ throw redirect({
+ to: "/login",
+ })
+ }
+ },
+})
+
+function Layout() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Layout
diff --git a/frontend/src/routes/_layout/admin.tsx b/frontend/src/routes/_layout/admin.tsx
new file mode 100644
index 0000000..99ae755
--- /dev/null
+++ b/frontend/src/routes/_layout/admin.tsx
@@ -0,0 +1,73 @@
+import { useSuspenseQuery } from "@tanstack/react-query"
+import { createFileRoute, redirect } from "@tanstack/react-router"
+import { Suspense } from "react"
+
+import { type UserPublic, UsersService } from "@/client"
+import AddUser from "@/components/Admin/AddUser"
+import { columns, type UserTableData } from "@/components/Admin/columns"
+import { DataTable } from "@/components/Common/DataTable"
+import PendingUsers from "@/components/Pending/PendingUsers"
+import useAuth from "@/hooks/useAuth"
+
+function getUsersQueryOptions() {
+ return {
+ queryFn: () => UsersService.readUsers({ skip: 0, limit: 100 }),
+ queryKey: ["users"],
+ }
+}
+
+export const Route = createFileRoute("/_layout/admin")({
+ component: Admin,
+ beforeLoad: async () => {
+ const user = await UsersService.readUserMe()
+ if (!user.is_superuser) {
+ throw redirect({
+ to: "/",
+ })
+ }
+ },
+ head: () => ({
+ meta: [
+ {
+ title: "Admin - FastAPI Cloud",
+ },
+ ],
+ }),
+})
+
+function UsersTableContent() {
+ const { user: currentUser } = useAuth()
+ const { data: users } = useSuspenseQuery(getUsersQueryOptions())
+
+ const tableData: UserTableData[] = users.data.map((user: UserPublic) => ({
+ ...user,
+ isCurrentUser: currentUser?.id === user.id,
+ }))
+
+ return
+}
+
+function UsersTable() {
+ return (
+ }>
+
+
+ )
+}
+
+function Admin() {
+ return (
+
+
+
+ Users
+
+ Manage user accounts and permissions
+
+
+
+
+
+
+
+
+ Hi, {currentUser?.full_name || currentUser?.email} 👋
+
+
+ Welcome back, nice to see you again!!!
+
+
+
+
+
+
+ You don't have any items yet
+ Add a new item to get started
+
+
+
+ Items
+ Create and manage your items
+
+
+
+
+
+
+ User Settings
+
+ Manage your account settings and preferences
+
+
+
+
+
+ {finalTabs.map((tab) => (
+
+ {tab.title}
+
+ ))}
+
+ {finalTabs.map((tab) => (
+
+
+
+ ))}
+
+ |