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 0000000000..3d6f3acf86
--- /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/toaster.tsx b/frontend/src/components/ui/toaster.tsx
deleted file mode 100644
index baac2e7406..0000000000
--- a/frontend/src/components/ui/toaster.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client"
-
-import {
- Toaster as ChakraToaster,
- Portal,
- Spinner,
- Stack,
- Toast,
- createToaster,
-} from "@chakra-ui/react"
-
-export const toaster = createToaster({
- placement: "top-end",
- pauseOnPageIdle: true,
-})
-
-export const Toaster = () => {
- return (
-
-
- {(toast) => (
-
- {toast.type === "loading" ? (
-
- ) : (
-
- )}
-
- {toast.title && {toast.title}}
- {toast.description && (
- {toast.description}
- )}
-
- {toast.action && (
- {toast.action.label}
- )}
- {toast.meta?.closable && }
-
- )}
-
-
- )
-}
diff --git a/frontend/src/components/ui/tooltip.tsx b/frontend/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000000..715bf76d6b
--- /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
index 5344493d49..7ccc795c48 100644
--- a/frontend/src/hooks/useAuth.ts
+++ b/frontend/src/hooks/useAuth.ts
@@ -1,25 +1,25 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import { useNavigate } from "@tanstack/react-router"
-import { useState } from "react"
import {
type Body_login_login_access_token as AccessToken,
- type ApiError,
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 [error, setError] = useState(null)
const navigate = useNavigate()
const queryClient = useQueryClient()
+ const { showErrorToast } = useCustomToast()
+
const { data: user } = useQuery({
queryKey: ["currentUser"],
queryFn: UsersService.readUserMe,
@@ -29,13 +29,10 @@ const useAuth = () => {
const signUpMutation = useMutation({
mutationFn: (data: UserRegister) =>
UsersService.registerUser({ requestBody: data }),
-
onSuccess: () => {
navigate({ to: "/login" })
},
- onError: (err: ApiError) => {
- handleError(err)
- },
+ onError: handleError.bind(showErrorToast),
onSettled: () => {
queryClient.invalidateQueries({ queryKey: ["users"] })
},
@@ -53,9 +50,7 @@ const useAuth = () => {
onSuccess: () => {
navigate({ to: "/" })
},
- onError: (err: ApiError) => {
- handleError(err)
- },
+ onError: handleError.bind(showErrorToast),
})
const logout = () => {
@@ -68,8 +63,6 @@ const useAuth = () => {
loginMutation,
logout,
user,
- error,
- resetError: () => setError(null),
}
}
diff --git a/frontend/src/hooks/useCopyToClipboard.ts b/frontend/src/hooks/useCopyToClipboard.ts
new file mode 100644
index 0000000000..8a4a841c72
--- /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
index fb04623516..ab03265bd8 100644
--- a/frontend/src/hooks/useCustomToast.ts
+++ b/frontend/src/hooks/useCustomToast.ts
@@ -1,21 +1,15 @@
-"use client"
-
-import { toaster } from "@/components/ui/toaster"
+import { toast } from "sonner"
const useCustomToast = () => {
const showSuccessToast = (description: string) => {
- toaster.create({
- title: "Success!",
+ toast.success("Success!", {
description,
- type: "success",
})
}
const showErrorToast = (description: string) => {
- toaster.create({
- title: "Something went wrong!",
+ toast.error("Something went wrong!", {
description,
- type: "error",
})
}
diff --git a/frontend/src/hooks/useMobile.ts b/frontend/src/hooks/useMobile.ts
new file mode 100644
index 0000000000..2b0fe1dfef
--- /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 0000000000..47e56960ad
--- /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 0000000000..d084ccade0
--- /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
index 77f648090d..8afe946cb5 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -8,7 +8,9 @@ import { createRouter, RouterProvider } from "@tanstack/react-router"
import { StrictMode } from "react"
import ReactDOM from "react-dom/client"
import { ApiError, OpenAPI } from "./client"
-import { CustomProvider } from "./components/ui/provider"
+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
@@ -40,10 +42,11 @@ declare module "@tanstack/react-router" {
ReactDOM.createRoot(document.getElementById("root")!).render(
-
+
+
-
+
,
)
diff --git a/frontend/src/routes/__root.tsx b/frontend/src/routes/__root.tsx
index ab74696101..842642c169 100644
--- a/frontend/src/routes/__root.tsx
+++ b/frontend/src/routes/__root.tsx
@@ -1,34 +1,17 @@
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
import { createRootRoute, Outlet } from "@tanstack/react-router"
-import React, { Suspense } from "react"
-
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"
+import ErrorComponent from "@/components/Common/ErrorComponent"
import NotFound from "@/components/Common/NotFound"
-const loadDevtools = () =>
- Promise.all([
- import("@tanstack/router-devtools"),
- import("@tanstack/react-query-devtools"),
- ]).then(([routerDevtools, reactQueryDevtools]) => {
- return {
- default: () => (
- <>
-
-
-
- ),
- }
- })
-
-const TanStackDevtools =
- process.env.NODE_ENV === "production" ? () => null : React.lazy(loadDevtools)
-
export const Route = createRootRoute({
component: () => (
<>
-
-
-
+
+
),
notFoundComponent: () => ,
+ errorComponent: () => ,
})
diff --git a/frontend/src/routes/_layout.tsx b/frontend/src/routes/_layout.tsx
index 2514324271..169730546e 100644
--- a/frontend/src/routes/_layout.tsx
+++ b/frontend/src/routes/_layout.tsx
@@ -1,8 +1,12 @@
-import { Flex } from "@chakra-ui/react"
import { createFileRoute, Outlet, redirect } from "@tanstack/react-router"
-import Navbar from "@/components/Common/Navbar"
-import Sidebar from "@/components/Common/Sidebar"
+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")({
@@ -18,15 +22,20 @@ export const Route = createFileRoute("/_layout")({
function Layout() {
return (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
)
}
diff --git a/frontend/src/routes/_layout/admin.tsx b/frontend/src/routes/_layout/admin.tsx
index 706fd58dc9..9c60bad6a6 100644
--- a/frontend/src/routes/_layout/admin.tsx
+++ b/frontend/src/routes/_layout/admin.tsx
@@ -1,129 +1,58 @@
-import { Badge, Container, Flex, Heading, Table } from "@chakra-ui/react"
-import { useQuery, useQueryClient } from "@tanstack/react-query"
-import { createFileRoute, useNavigate } from "@tanstack/react-router"
-import { z } from "zod"
+import { useSuspenseQuery } from "@tanstack/react-query"
+import { createFileRoute } from "@tanstack/react-router"
+import { Suspense } from "react"
import { type UserPublic, UsersService } from "@/client"
import AddUser from "@/components/Admin/AddUser"
-import { UserActionsMenu } from "@/components/Common/UserActionsMenu"
+import { columns, type UserTableData } from "@/components/Admin/columns"
+import { DataTable } from "@/components/Common/DataTable"
import PendingUsers from "@/components/Pending/PendingUsers"
-import {
- PaginationItems,
- PaginationNextTrigger,
- PaginationPrevTrigger,
- PaginationRoot,
-} from "@/components/ui/pagination.tsx"
+import useAuth from "@/hooks/useAuth"
-const usersSearchSchema = z.object({
- page: z.number().catch(1),
-})
-
-const PER_PAGE = 5
-
-function getUsersQueryOptions({ page }: { page: number }) {
+function getUsersQueryOptions() {
return {
- queryFn: () =>
- UsersService.readUsers({ skip: (page - 1) * PER_PAGE, limit: PER_PAGE }),
- queryKey: ["users", { page }],
+ queryFn: () => UsersService.readUsers({ skip: 0, limit: 100 }),
+ queryKey: ["users"],
}
}
export const Route = createFileRoute("/_layout/admin")({
component: Admin,
- validateSearch: (search) => usersSearchSchema.parse(search),
})
-function UsersTable() {
- const queryClient = useQueryClient()
- const currentUser = queryClient.getQueryData(["currentUser"])
- const navigate = useNavigate({ from: Route.fullPath })
- const { page } = Route.useSearch()
-
- const { data, isLoading, isPlaceholderData } = useQuery({
- ...getUsersQueryOptions({ page }),
- placeholderData: (prevData) => prevData,
- })
+function UsersTableContent() {
+ const { user: currentUser } = useAuth()
+ const { data: users } = useSuspenseQuery(getUsersQueryOptions())
- const setPage = (page: number) => {
- navigate({
- to: "/admin",
- search: (prev) => ({ ...prev, page }),
- })
- }
+ const tableData: UserTableData[] = users.data.map((user: UserPublic) => ({
+ ...user,
+ isCurrentUser: currentUser?.id === user.id,
+ }))
- const users = data?.data.slice(0, PER_PAGE) ?? []
- const count = data?.count ?? 0
-
- if (isLoading) {
- return
- }
+ return
+}
+function UsersTable() {
return (
- <>
-
-
-
- Full name
- Email
- Role
- Status
- Actions
-
-
-
- {users?.map((user) => (
-
-
- {user.full_name || "N/A"}
- {currentUser?.id === user.id && (
-
- You
-
- )}
-
-
- {user.email}
-
-
- {user.is_superuser ? "Superuser" : "User"}
-
- {user.is_active ? "Active" : "Inactive"}
-
-
-
-
- ))}
-
-
-
- setPage(page)}
- >
-
-
-
-
-
-
-
-
+ }>
+
+
)
}
function Admin() {
return (
-
-
- Users Management
-
-
-
+
+
+
+ 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) => (
-
+
-
+
))}
-
-
+
+ |