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/packages/admin/src/components/ui/tabs.tsx b/packages/admin/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..7f2c4f2
--- /dev/null
+++ b/packages/admin/src/components/ui/tabs.tsx
@@ -0,0 +1,89 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+ className,
+ orientation = "horizontal",
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+const tabsListVariants = cva(
+ "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+ {
+ variants: {
+ variant: {
+ default: "bg-muted",
+ line: "gap-1 bg-transparent",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function TabsList({
+ className,
+ variant = "default",
+ ...props
+}: React.ComponentProps &
+ VariantProps) {
+ return (
+
+ )
+}
+
+function TabsTrigger({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function TabsContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/packages/admin/src/components/ui/textarea.tsx b/packages/admin/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..e67d8fe
--- /dev/null
+++ b/packages/admin/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+ return (
+
+ )
+}
+
+export { Textarea }
diff --git a/packages/admin/src/components/ui/tooltip.tsx b/packages/admin/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..d4d2254
--- /dev/null
+++ b/packages/admin/src/components/ui/tooltip.tsx
@@ -0,0 +1,55 @@
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+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/packages/admin/src/hooks/use-mobile.ts b/packages/admin/src/hooks/use-mobile.ts
new file mode 100644
index 0000000..2b0fe1d
--- /dev/null
+++ b/packages/admin/src/hooks/use-mobile.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/packages/admin/src/lib/api-client.ts b/packages/admin/src/lib/api-client.ts
new file mode 100644
index 0000000..0fde8ce
--- /dev/null
+++ b/packages/admin/src/lib/api-client.ts
@@ -0,0 +1,77 @@
+import { useAuthStore } from '@/stores/auth.store'
+
+class ApiError extends Error {
+ statusCode: number
+ details?: unknown
+
+ constructor(message: string, statusCode: number, details?: unknown) {
+ super(message)
+ this.name = 'ApiError'
+ this.statusCode = statusCode
+ this.details = details
+ }
+}
+
+async function request(method: string, path: string, body?: unknown): Promise {
+ const { token } = useAuthStore.getState()
+
+ const headers: Record = {
+ 'Content-Type': 'application/json',
+ }
+
+ if (token) {
+ headers['Authorization'] = `Bearer ${token}`
+ }
+
+ const res = await fetch(path, {
+ method,
+ headers,
+ body: body ? JSON.stringify(body) : undefined,
+ })
+
+ if (res.status === 401) {
+ useAuthStore.getState().logout()
+ window.location.href = '/login'
+ throw new ApiError('Unauthorized', 401)
+ }
+
+ const json = await res.json()
+
+ if (!res.ok) {
+ throw new ApiError(
+ json.error?.message ?? 'Request failed',
+ res.status,
+ json.error?.details,
+ )
+ }
+
+ return json as T
+}
+
+function buildQueryString(params?: Record): string {
+ if (!params) return ''
+ const searchParams = new URLSearchParams()
+ for (const [key, value] of Object.entries(params)) {
+ if (value !== undefined && value !== null && value !== '') {
+ searchParams.set(key, String(value))
+ }
+ }
+ const qs = searchParams.toString()
+ return qs ? `?${qs}` : ''
+}
+
+export const api = {
+ get: (path: string, params?: Record) =>
+ request('GET', `${path}${buildQueryString(params)}`),
+
+ post: (path: string, body: unknown) =>
+ request('POST', path, body),
+
+ patch: (path: string, body: unknown) =>
+ request('PATCH', path, body),
+
+ del: (path: string) =>
+ request('DELETE', path),
+}
+
+export { ApiError }
diff --git a/packages/admin/src/lib/query-client.ts b/packages/admin/src/lib/query-client.ts
new file mode 100644
index 0000000..acf2023
--- /dev/null
+++ b/packages/admin/src/lib/query-client.ts
@@ -0,0 +1,11 @@
+import { QueryClient } from '@tanstack/react-query'
+
+export const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ staleTime: 30_000,
+ retry: 1,
+ refetchOnWindowFocus: false,
+ },
+ },
+})
diff --git a/packages/admin/src/lib/utils.ts b/packages/admin/src/lib/utils.ts
new file mode 100644
index 0000000..d32b0fe
--- /dev/null
+++ b/packages/admin/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/packages/admin/src/main.tsx b/packages/admin/src/main.tsx
new file mode 100644
index 0000000..ed5990c
--- /dev/null
+++ b/packages/admin/src/main.tsx
@@ -0,0 +1,23 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { queryClient } from '@/lib/query-client'
+import { routeTree } from './routeTree.gen'
+import './app.css'
+
+const router = createRouter({ routeTree })
+
+declare module '@tanstack/react-router' {
+ interface Register {
+ router: typeof router
+ }
+}
+
+createRoot(document.getElementById('root')!).render(
+
+
+
+
+ ,
+)
diff --git a/packages/admin/src/routeTree.gen.ts b/packages/admin/src/routeTree.gen.ts
new file mode 100644
index 0000000..b980cf5
--- /dev/null
+++ b/packages/admin/src/routeTree.gen.ts
@@ -0,0 +1,126 @@
+/* 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 LoginRouteImport } from './routes/login'
+import { Route as AuthenticatedRouteImport } from './routes/_authenticated'
+import { Route as AuthenticatedIndexRouteImport } from './routes/_authenticated/index'
+import { Route as AuthenticatedAccountsIndexRouteImport } from './routes/_authenticated/accounts/index'
+
+const LoginRoute = LoginRouteImport.update({
+ id: '/login',
+ path: '/login',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const AuthenticatedRoute = AuthenticatedRouteImport.update({
+ id: '/_authenticated',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const AuthenticatedIndexRoute = AuthenticatedIndexRouteImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => AuthenticatedRoute,
+} as any)
+const AuthenticatedAccountsIndexRoute =
+ AuthenticatedAccountsIndexRouteImport.update({
+ id: '/accounts/',
+ path: '/accounts/',
+ getParentRoute: () => AuthenticatedRoute,
+ } as any)
+
+export interface FileRoutesByFullPath {
+ '/': typeof AuthenticatedIndexRoute
+ '/login': typeof LoginRoute
+ '/accounts/': typeof AuthenticatedAccountsIndexRoute
+}
+export interface FileRoutesByTo {
+ '/login': typeof LoginRoute
+ '/': typeof AuthenticatedIndexRoute
+ '/accounts': typeof AuthenticatedAccountsIndexRoute
+}
+export interface FileRoutesById {
+ __root__: typeof rootRouteImport
+ '/_authenticated': typeof AuthenticatedRouteWithChildren
+ '/login': typeof LoginRoute
+ '/_authenticated/': typeof AuthenticatedIndexRoute
+ '/_authenticated/accounts/': typeof AuthenticatedAccountsIndexRoute
+}
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath
+ fullPaths: '/' | '/login' | '/accounts/'
+ fileRoutesByTo: FileRoutesByTo
+ to: '/login' | '/' | '/accounts'
+ id:
+ | '__root__'
+ | '/_authenticated'
+ | '/login'
+ | '/_authenticated/'
+ | '/_authenticated/accounts/'
+ fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+ AuthenticatedRoute: typeof AuthenticatedRouteWithChildren
+ LoginRoute: typeof LoginRoute
+}
+
+declare module '@tanstack/react-router' {
+ interface FileRoutesByPath {
+ '/login': {
+ id: '/login'
+ path: '/login'
+ fullPath: '/login'
+ preLoaderRoute: typeof LoginRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/_authenticated': {
+ id: '/_authenticated'
+ path: ''
+ fullPath: '/'
+ preLoaderRoute: typeof AuthenticatedRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/_authenticated/': {
+ id: '/_authenticated/'
+ path: '/'
+ fullPath: '/'
+ preLoaderRoute: typeof AuthenticatedIndexRouteImport
+ parentRoute: typeof AuthenticatedRoute
+ }
+ '/_authenticated/accounts/': {
+ id: '/_authenticated/accounts/'
+ path: '/accounts'
+ fullPath: '/accounts/'
+ preLoaderRoute: typeof AuthenticatedAccountsIndexRouteImport
+ parentRoute: typeof AuthenticatedRoute
+ }
+ }
+}
+
+interface AuthenticatedRouteChildren {
+ AuthenticatedIndexRoute: typeof AuthenticatedIndexRoute
+ AuthenticatedAccountsIndexRoute: typeof AuthenticatedAccountsIndexRoute
+}
+
+const AuthenticatedRouteChildren: AuthenticatedRouteChildren = {
+ AuthenticatedIndexRoute: AuthenticatedIndexRoute,
+ AuthenticatedAccountsIndexRoute: AuthenticatedAccountsIndexRoute,
+}
+
+const AuthenticatedRouteWithChildren = AuthenticatedRoute._addFileChildren(
+ AuthenticatedRouteChildren,
+)
+
+const rootRouteChildren: RootRouteChildren = {
+ AuthenticatedRoute: AuthenticatedRouteWithChildren,
+ LoginRoute: LoginRoute,
+}
+export const routeTree = rootRouteImport
+ ._addFileChildren(rootRouteChildren)
+ ._addFileTypes()
diff --git a/packages/admin/src/routes/__root.tsx b/packages/admin/src/routes/__root.tsx
new file mode 100644
index 0000000..2fe94c2
--- /dev/null
+++ b/packages/admin/src/routes/__root.tsx
@@ -0,0 +1,15 @@
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+import { Toaster } from 'sonner'
+
+export const Route = createRootRoute({
+ component: RootLayout,
+})
+
+function RootLayout() {
+ return (
+ <>
+
+
+
+ )
+}
diff --git a/packages/admin/src/routes/_authenticated.tsx b/packages/admin/src/routes/_authenticated.tsx
new file mode 100644
index 0000000..9d25a12
--- /dev/null
+++ b/packages/admin/src/routes/_authenticated.tsx
@@ -0,0 +1,30 @@
+import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
+import { useAuthStore } from '@/stores/auth.store'
+
+export const Route = createFileRoute('/_authenticated')({
+ beforeLoad: () => {
+ const { token } = useAuthStore.getState()
+ if (!token) {
+ throw redirect({ to: '/login' })
+ }
+ },
+ component: AuthenticatedLayout,
+})
+
+function AuthenticatedLayout() {
+ return (
+
+ )
+}
diff --git a/packages/admin/src/routes/_authenticated/accounts/index.tsx b/packages/admin/src/routes/_authenticated/accounts/index.tsx
new file mode 100644
index 0000000..36817c2
--- /dev/null
+++ b/packages/admin/src/routes/_authenticated/accounts/index.tsx
@@ -0,0 +1,14 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_authenticated/accounts/')({
+ component: AccountsListPage,
+})
+
+function AccountsListPage() {
+ return (
+
+ Accounts
+ Account list — coming next phase
+
+
+
+ Forte
+ Sign in to your account
+
+
+
+
+
+ |