img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
- className
- )}
- {...props}
- />
- )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-export {
- Card,
- CardHeader,
- CardFooter,
- CardTitle,
- CardAction,
- CardDescription,
- CardContent,
-}
diff --git a/aha-ui/src/components/ui/input.tsx b/aha-ui/src/components/ui/input.tsx
deleted file mode 100644
index d763cd9..0000000
--- a/aha-ui/src/components/ui/input.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
- return (
-
- )
-}
-
-export { Input }
diff --git a/aha-ui/src/components/ui/label.tsx b/aha-ui/src/components/ui/label.tsx
deleted file mode 100644
index f752f82..0000000
--- a/aha-ui/src/components/ui/label.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from "react"
-import { Label as LabelPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function Label({
- className,
- ...props
-}: React.ComponentProps
) {
- return (
-
- )
-}
-
-export { Label }
diff --git a/aha-ui/src/components/ui/scroll-area.tsx b/aha-ui/src/components/ui/scroll-area.tsx
deleted file mode 100644
index f49b0a8..0000000
--- a/aha-ui/src/components/ui/scroll-area.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as React from "react"
-import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function ScrollArea({
- className,
- children,
- ...props
-}: React.ComponentProps) {
- return (
-
-
- {children}
-
-
-
-
- )
-}
-
-function ScrollBar({
- className,
- orientation = "vertical",
- ...props
-}: React.ComponentProps) {
- return (
-
-
-
- )
-}
-
-export { ScrollArea, ScrollBar }
diff --git a/aha-ui/src/components/ui/select.tsx b/aha-ui/src/components/ui/select.tsx
deleted file mode 100644
index f09dfb4..0000000
--- a/aha-ui/src/components/ui/select.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Select as SelectPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
-
-function Select({
- ...props
-}: React.ComponentProps) {
- return
-}
-
-function SelectGroup({
- className,
- ...props
-}: React.ComponentProps) {
- return (
-
- )
-}
-
-function SelectValue({
- ...props
-}: React.ComponentProps) {
- return
-}
-
-function SelectTrigger({
- className,
- size = "default",
- children,
- ...props
-}: React.ComponentProps & {
- size?: "sm" | "default"
-}) {
- return (
-
- {children}
-
-
-
-
- )
-}
-
-function SelectContent({
- className,
- children,
- position = "item-aligned",
- align = "center",
- ...props
-}: React.ComponentProps) {
- return (
-
-
-
-
- {children}
-
-
-
-
- )
-}
-
-function SelectLabel({
- className,
- ...props
-}: React.ComponentProps) {
- return (
-
- )
-}
-
-function SelectItem({
- className,
- children,
- ...props
-}: React.ComponentProps) {
- return (
-
-
-
-
-
-
- {children}
-
- )
-}
-
-function SelectSeparator({
- className,
- ...props
-}: React.ComponentProps) {
- return (
-
- )
-}
-
-function SelectScrollUpButton({
- className,
- ...props
-}: React.ComponentProps) {
- return (
-
-
-
- )
-}
-
-function SelectScrollDownButton({
- className,
- ...props
-}: React.ComponentProps) {
- return (
-
-
-
- )
-}
-
-export {
- Select,
- SelectContent,
- SelectGroup,
- SelectItem,
- SelectLabel,
- SelectScrollDownButton,
- SelectScrollUpButton,
- SelectSeparator,
- SelectTrigger,
- SelectValue,
-}
diff --git a/aha-ui/src/components/ui/separator.tsx b/aha-ui/src/components/ui/separator.tsx
deleted file mode 100644
index d457090..0000000
--- a/aha-ui/src/components/ui/separator.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Separator as SeparatorPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function Separator({
- className,
- orientation = "horizontal",
- decorative = true,
- ...props
-}: React.ComponentProps) {
- return (
-
- )
-}
-
-export { Separator }
diff --git a/aha-ui/src/config/fonts.ts b/aha-ui/src/config/fonts.ts
new file mode 100644
index 0000000..a0865e0
--- /dev/null
+++ b/aha-ui/src/config/fonts.ts
@@ -0,0 +1,19 @@
+/**
+ * List of available font names (visit the url `/settings/appearance`).
+ * This array is used to generate dynamic font classes (e.g., `font-inter`, `font-manrope`).
+ *
+ * 📝 How to Add a New Font (Tailwind v4+):
+ * 1. Add the font name here.
+ * 2. Update the `` tag in 'index.html' to include the new font from Google Fonts (or any other source).
+ * 3. Add the new font family to 'index.css' using the `@theme inline` and `font-family` CSS variable.
+ *
+ * Example:
+ * fonts.ts → Add 'roboto' to this array.
+ * index.html → Add Google Fonts link for Roboto.
+ * index.css → Add the new font in the CSS, e.g.:
+ * @theme inline {
+ * // ... other font families
+ * --font-roboto: 'Roboto', var(--font-sans);
+ * }
+ */
+export const fonts = ['inter', 'manrope', 'system'] as const
diff --git a/aha-ui/src/context/direction-provider.tsx b/aha-ui/src/context/direction-provider.tsx
new file mode 100644
index 0000000..4a1868c
--- /dev/null
+++ b/aha-ui/src/context/direction-provider.tsx
@@ -0,0 +1,61 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+import { DirectionProvider as RdxDirProvider } from '@radix-ui/react-direction'
+import { getCookie, setCookie, removeCookie } from '@/lib/cookies'
+
+export type Direction = 'ltr' | 'rtl'
+
+const DEFAULT_DIRECTION = 'ltr'
+const DIRECTION_COOKIE_NAME = 'dir'
+const DIRECTION_COOKIE_MAX_AGE = 60 * 60 * 24 * 365 // 1 year
+
+type DirectionContextType = {
+ defaultDir: Direction
+ dir: Direction
+ setDir: (dir: Direction) => void
+ resetDir: () => void
+}
+
+const DirectionContext = createContext(null)
+
+export function DirectionProvider({ children }: { children: React.ReactNode }) {
+ const [dir, _setDir] = useState(
+ () => (getCookie(DIRECTION_COOKIE_NAME) as Direction) || DEFAULT_DIRECTION
+ )
+
+ useEffect(() => {
+ const htmlElement = document.documentElement
+ htmlElement.setAttribute('dir', dir)
+ }, [dir])
+
+ const setDir = (dir: Direction) => {
+ _setDir(dir)
+ setCookie(DIRECTION_COOKIE_NAME, dir, DIRECTION_COOKIE_MAX_AGE)
+ }
+
+ const resetDir = () => {
+ _setDir(DEFAULT_DIRECTION)
+ removeCookie(DIRECTION_COOKIE_NAME)
+ }
+
+ return (
+
+ {children}
+
+ )
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useDirection() {
+ const context = useContext(DirectionContext)
+ if (!context) {
+ throw new Error('useDirection must be used within a DirectionProvider')
+ }
+ return context
+}
diff --git a/aha-ui/src/context/font-provider.tsx b/aha-ui/src/context/font-provider.tsx
new file mode 100644
index 0000000..80b7d7e
--- /dev/null
+++ b/aha-ui/src/context/font-provider.tsx
@@ -0,0 +1,58 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+import { fonts } from '@/config/fonts'
+import { getCookie, setCookie, removeCookie } from '@/lib/cookies'
+
+type Font = (typeof fonts)[number]
+
+const FONT_COOKIE_NAME = 'font'
+const FONT_COOKIE_MAX_AGE = 60 * 60 * 24 * 365 // 1 year
+
+type FontContextType = {
+ font: Font
+ setFont: (font: Font) => void
+ resetFont: () => void
+}
+
+const FontContext = createContext(null)
+
+export function FontProvider({ children }: { children: React.ReactNode }) {
+ const [font, _setFont] = useState(() => {
+ const savedFont = getCookie(FONT_COOKIE_NAME)
+ return fonts.includes(savedFont as Font) ? (savedFont as Font) : fonts[0]
+ })
+
+ useEffect(() => {
+ const applyFont = (font: string) => {
+ const root = document.documentElement
+ root.classList.forEach((cls) => {
+ if (cls.startsWith('font-')) root.classList.remove(cls)
+ })
+ root.classList.add(`font-${font}`)
+ }
+
+ applyFont(font)
+ }, [font])
+
+ const setFont = (font: Font) => {
+ setCookie(FONT_COOKIE_NAME, font, FONT_COOKIE_MAX_AGE)
+ _setFont(font)
+ }
+
+ const resetFont = () => {
+ removeCookie(FONT_COOKIE_NAME)
+ _setFont(fonts[0])
+ }
+
+ return (
+ {children}
+ )
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useFont = () => {
+ const context = useContext(FontContext)
+ if (!context) {
+ throw new Error('useFont must be used within a FontProvider')
+ }
+ return context
+}
diff --git a/aha-ui/src/context/layout-provider.tsx b/aha-ui/src/context/layout-provider.tsx
new file mode 100644
index 0000000..3095f23
--- /dev/null
+++ b/aha-ui/src/context/layout-provider.tsx
@@ -0,0 +1,85 @@
+import { createContext, useContext, useState } from 'react'
+import { getCookie, setCookie } from '@/lib/cookies'
+
+export type Collapsible = 'offcanvas' | 'icon' | 'none'
+type Variant = 'inset' | 'sidebar' | 'floating'
+
+// Cookie constants following the pattern from sidebar.tsx
+const LAYOUT_COLLAPSIBLE_COOKIE_NAME = 'layout_collapsible'
+const LAYOUT_VARIANT_COOKIE_NAME = 'layout_variant'
+const LAYOUT_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 // 7 days
+
+// Default values
+const DEFAULT_VARIANT = 'inset'
+const DEFAULT_COLLAPSIBLE = 'icon'
+
+type LayoutContextType = {
+ resetLayout: () => void
+
+ defaultCollapsible: Collapsible
+ collapsible: Collapsible
+ setCollapsible: (collapsible: Collapsible) => void
+
+ defaultVariant: Variant
+ variant: Variant
+ setVariant: (variant: Variant) => void
+}
+
+const LayoutContext = createContext(null)
+
+type LayoutProviderProps = {
+ children: React.ReactNode
+}
+
+export function LayoutProvider({ children }: LayoutProviderProps) {
+ const [collapsible, _setCollapsible] = useState(() => {
+ const saved = getCookie(LAYOUT_COLLAPSIBLE_COOKIE_NAME)
+ return (saved as Collapsible) || DEFAULT_COLLAPSIBLE
+ })
+
+ const [variant, _setVariant] = useState(() => {
+ const saved = getCookie(LAYOUT_VARIANT_COOKIE_NAME)
+ return (saved as Variant) || DEFAULT_VARIANT
+ })
+
+ const setCollapsible = (newCollapsible: Collapsible) => {
+ _setCollapsible(newCollapsible)
+ setCookie(
+ LAYOUT_COLLAPSIBLE_COOKIE_NAME,
+ newCollapsible,
+ LAYOUT_COOKIE_MAX_AGE
+ )
+ }
+
+ const setVariant = (newVariant: Variant) => {
+ _setVariant(newVariant)
+ setCookie(LAYOUT_VARIANT_COOKIE_NAME, newVariant, LAYOUT_COOKIE_MAX_AGE)
+ }
+
+ const resetLayout = () => {
+ setCollapsible(DEFAULT_COLLAPSIBLE)
+ setVariant(DEFAULT_VARIANT)
+ }
+
+ const contextValue: LayoutContextType = {
+ resetLayout,
+ defaultCollapsible: DEFAULT_COLLAPSIBLE,
+ collapsible,
+ setCollapsible,
+ defaultVariant: DEFAULT_VARIANT,
+ variant,
+ setVariant,
+ }
+
+ return {children}
+}
+
+// Define the hook for the provider
+// eslint-disable-next-line react-refresh/only-export-components
+export function useLayout() {
+ const context = useContext(LayoutContext)
+ if (!context) {
+ throw new Error('useLayout must be used within a LayoutProvider')
+ }
+ return context
+}
diff --git a/aha-ui/src/context/search-provider.tsx b/aha-ui/src/context/search-provider.tsx
new file mode 100644
index 0000000..c4c5ebd
--- /dev/null
+++ b/aha-ui/src/context/search-provider.tsx
@@ -0,0 +1,46 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+import { CommandMenu } from '@/components/command-menu'
+
+type SearchContextType = {
+ open: boolean
+ setOpen: React.Dispatch>
+}
+
+const SearchContext = createContext(null)
+
+type SearchProviderProps = {
+ children: React.ReactNode
+}
+
+export function SearchProvider({ children }: SearchProviderProps) {
+ const [open, setOpen] = useState(false)
+
+ useEffect(() => {
+ const down = (e: KeyboardEvent) => {
+ if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+ e.preventDefault()
+ setOpen((open) => !open)
+ }
+ }
+ document.addEventListener('keydown', down)
+ return () => document.removeEventListener('keydown', down)
+ }, [])
+
+ return (
+
+ {children}
+
+
+ )
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useSearch = () => {
+ const searchContext = useContext(SearchContext)
+
+ if (!searchContext) {
+ throw new Error('useSearch has to be used within SearchProvider')
+ }
+
+ return searchContext
+}
diff --git a/aha-ui/src/context/theme-provider.tsx b/aha-ui/src/context/theme-provider.tsx
new file mode 100644
index 0000000..9675b4d
--- /dev/null
+++ b/aha-ui/src/context/theme-provider.tsx
@@ -0,0 +1,110 @@
+import { createContext, useContext, useEffect, useState, useMemo } from 'react'
+import { getCookie, setCookie, removeCookie } from '@/lib/cookies'
+
+type Theme = 'dark' | 'light' | 'system'
+type ResolvedTheme = Exclude
+
+const DEFAULT_THEME = 'system'
+const THEME_COOKIE_NAME = 'vite-ui-theme'
+const THEME_COOKIE_MAX_AGE = 60 * 60 * 24 * 365 // 1 year
+
+type ThemeProviderProps = {
+ children: React.ReactNode
+ defaultTheme?: Theme
+ storageKey?: string
+}
+
+type ThemeProviderState = {
+ defaultTheme: Theme
+ resolvedTheme: ResolvedTheme
+ theme: Theme
+ setTheme: (theme: Theme) => void
+ resetTheme: () => void
+}
+
+const initialState: ThemeProviderState = {
+ defaultTheme: DEFAULT_THEME,
+ resolvedTheme: 'light',
+ theme: DEFAULT_THEME,
+ setTheme: () => null,
+ resetTheme: () => null,
+}
+
+const ThemeContext = createContext(initialState)
+
+export function ThemeProvider({
+ children,
+ defaultTheme = DEFAULT_THEME,
+ storageKey = THEME_COOKIE_NAME,
+ ...props
+}: ThemeProviderProps) {
+ const [theme, _setTheme] = useState(
+ () => (getCookie(storageKey) as Theme) || defaultTheme
+ )
+
+ // Optimized: Memoize the resolved theme calculation to prevent unnecessary re-computations
+ const resolvedTheme = useMemo((): ResolvedTheme => {
+ if (theme === 'system') {
+ return window.matchMedia('(prefers-color-scheme: dark)').matches
+ ? 'dark'
+ : 'light'
+ }
+ return theme as ResolvedTheme
+ }, [theme])
+
+ useEffect(() => {
+ const root = window.document.documentElement
+ const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+
+ const applyTheme = (currentResolvedTheme: ResolvedTheme) => {
+ root.classList.remove('light', 'dark') // Remove existing theme classes
+ root.classList.add(currentResolvedTheme) // Add the new theme class
+ }
+
+ const handleChange = () => {
+ if (theme === 'system') {
+ const systemTheme = mediaQuery.matches ? 'dark' : 'light'
+ applyTheme(systemTheme)
+ }
+ }
+
+ applyTheme(resolvedTheme)
+
+ mediaQuery.addEventListener('change', handleChange)
+
+ return () => mediaQuery.removeEventListener('change', handleChange)
+ }, [theme, resolvedTheme])
+
+ const setTheme = (theme: Theme) => {
+ setCookie(storageKey, theme, THEME_COOKIE_MAX_AGE)
+ _setTheme(theme)
+ }
+
+ const resetTheme = () => {
+ removeCookie(storageKey)
+ _setTheme(DEFAULT_THEME)
+ }
+
+ const contextValue = {
+ defaultTheme,
+ resolvedTheme,
+ resetTheme,
+ theme,
+ setTheme,
+ }
+
+ return (
+
+ {children}
+
+ )
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useTheme = () => {
+ const context = useContext(ThemeContext)
+
+ if (!context) throw new Error('useTheme must be used within a ThemeProvider')
+
+ return context
+}
diff --git a/aha-ui/src/features/auth/auth-layout.tsx b/aha-ui/src/features/auth/auth-layout.tsx
new file mode 100644
index 0000000..a1f005f
--- /dev/null
+++ b/aha-ui/src/features/auth/auth-layout.tsx
@@ -0,0 +1,19 @@
+import { Logo } from '@/assets/logo'
+
+type AuthLayoutProps = {
+ children: React.ReactNode
+}
+
+export function AuthLayout({ children }: AuthLayoutProps) {
+ return (
+
+
+
+
+
Shadcn Admin
+
+ {children}
+
+
we will send you a link to
+ reset your password.
+
+
+
+
+
+
+
+ Don't have an account?{' '}
+
+ Sign up
+
+ .
+
+
+
+
+ )
+}
diff --git a/aha-ui/src/features/auth/otp/components/otp-form.tsx b/aha-ui/src/features/auth/otp/components/otp-form.tsx
new file mode 100644
index 0000000..dd115e5
--- /dev/null
+++ b/aha-ui/src/features/auth/otp/components/otp-form.tsx
@@ -0,0 +1,100 @@
+import { useState } from 'react'
+import { z } from 'zod'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useNavigate } from '@tanstack/react-router'
+import { showSubmittedData } from '@/lib/show-submitted-data'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from '@/components/ui/form'
+import {
+ InputOTP,
+ InputOTPGroup,
+ InputOTPSlot,
+ InputOTPSeparator,
+} from '@/components/ui/input-otp'
+
+const formSchema = z.object({
+ otp: z
+ .string()
+ .min(6, 'Please enter the 6-digit code.')
+ .max(6, 'Please enter the 6-digit code.'),
+})
+
+type OtpFormProps = React.HTMLAttributes
+
+export function OtpForm({ className, ...props }: OtpFormProps) {
+ const navigate = useNavigate()
+ const [isLoading, setIsLoading] = useState(false)
+
+ const form = useForm>({
+ resolver: zodResolver(formSchema),
+ defaultValues: { otp: '' },
+ })
+
+ // eslint-disable-next-line react-hooks/incompatible-library
+ const otp = form.watch('otp')
+
+ function onSubmit(data: z.infer) {
+ setIsLoading(true)
+ showSubmittedData(data)
+
+ setTimeout(() => {
+ setIsLoading(false)
+ navigate({ to: '/' })
+ }, 1000)
+ }
+
+ return (
+
+
+ )
+}
diff --git a/aha-ui/src/features/auth/otp/index.tsx b/aha-ui/src/features/auth/otp/index.tsx
new file mode 100644
index 0000000..f69fd3d
--- /dev/null
+++ b/aha-ui/src/features/auth/otp/index.tsx
@@ -0,0 +1,44 @@
+import { Link } from '@tanstack/react-router'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from '@/components/ui/card'
+import { AuthLayout } from '../auth-layout'
+import { OtpForm } from './components/otp-form'
+
+export function Otp() {
+ return (
+
+
+
+
+ Two-factor Authentication
+
+
+ Please enter the authentication code.
We have sent the
+ authentication code to your email.
+
+
+
+
+
+
+
+ Haven't received it?{' '}
+
+ Resend a new code.
+
+ .
+
+
+
+
+ )
+}
diff --git a/aha-ui/src/features/auth/sign-in/assets/dashboard-dark.png b/aha-ui/src/features/auth/sign-in/assets/dashboard-dark.png
new file mode 100644
index 0000000..1e557a1
Binary files /dev/null and b/aha-ui/src/features/auth/sign-in/assets/dashboard-dark.png differ
diff --git a/aha-ui/src/features/auth/sign-in/assets/dashboard-light.png b/aha-ui/src/features/auth/sign-in/assets/dashboard-light.png
new file mode 100644
index 0000000..557b54f
Binary files /dev/null and b/aha-ui/src/features/auth/sign-in/assets/dashboard-light.png differ
diff --git a/aha-ui/src/features/auth/sign-in/components/user-auth-form.tsx b/aha-ui/src/features/auth/sign-in/components/user-auth-form.tsx
new file mode 100644
index 0000000..9194dea
--- /dev/null
+++ b/aha-ui/src/features/auth/sign-in/components/user-auth-form.tsx
@@ -0,0 +1,150 @@
+import { useState } from 'react'
+import { z } from 'zod'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Link, useNavigate } from '@tanstack/react-router'
+import { Loader2, LogIn } from 'lucide-react'
+import { toast } from 'sonner'
+import { IconFacebook, IconGithub } from '@/assets/brand-icons'
+import { useAuthStore } from '@/stores/auth-store'
+import { sleep, cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { PasswordInput } from '@/components/password-input'
+
+const formSchema = z.object({
+ email: z.email({
+ error: (iss) => (iss.input === '' ? 'Please enter your email.' : undefined),
+ }),
+ password: z
+ .string()
+ .min(1, 'Please enter your password.')
+ .min(7, 'Password must be at least 7 characters long.'),
+})
+
+interface UserAuthFormProps extends React.HTMLAttributes {
+ redirectTo?: string
+}
+
+export function UserAuthForm({
+ className,
+ redirectTo,
+ ...props
+}: UserAuthFormProps) {
+ const [isLoading, setIsLoading] = useState(false)
+ const navigate = useNavigate()
+ const { auth } = useAuthStore()
+
+ const form = useForm>({
+ resolver: zodResolver(formSchema),
+ defaultValues: {
+ email: '',
+ password: '',
+ },
+ })
+
+ function onSubmit(data: z.infer) {
+ setIsLoading(true)
+
+ toast.promise(sleep(2000), {
+ loading: 'Signing in...',
+ success: () => {
+ setIsLoading(false)
+
+ // Mock successful authentication with expiry computed at success time
+ const mockUser = {
+ accountNo: 'ACC001',
+ email: data.email,
+ role: ['user'],
+ exp: Date.now() + 24 * 60 * 60 * 1000, // 24 hours from now
+ }
+
+ // Set user and access token
+ auth.setUser(mockUser)
+ auth.setAccessToken('mock-access-token')
+
+ // Redirect to the stored location or default to dashboard
+ const targetPath = redirectTo || '/'
+ navigate({ to: targetPath, replace: true })
+
+ return `Welcome back, ${data.email}!`
+ },
+ error: 'Error',
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/aha-ui/src/features/auth/sign-in/index.tsx b/aha-ui/src/features/auth/sign-in/index.tsx
new file mode 100644
index 0000000..1511df9
--- /dev/null
+++ b/aha-ui/src/features/auth/sign-in/index.tsx
@@ -0,0 +1,58 @@
+import { Link, useSearch } from '@tanstack/react-router'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from '@/components/ui/card'
+import { AuthLayout } from '../auth-layout'
+import { UserAuthForm } from './components/user-auth-form'
+
+export function SignIn() {
+ const { redirect } = useSearch({ from: '/(auth)/sign-in' })
+
+ return (
+
+
+
+ Sign in
+
+ Enter your email and password below to log into{' '}
+
your account. Don't have an
+ account?{' '}
+
+ Sign Up
+
+
+
+
+
+
+
+
+ By clicking sign in, you agree to our{' '}
+
+ Terms of Service
+ {' '}
+ and{' '}
+
+ Privacy Policy
+
+ .
+
+
+
+
+ )
+}
diff --git a/aha-ui/src/features/auth/sign-in/sign-in-2.tsx b/aha-ui/src/features/auth/sign-in/sign-in-2.tsx
new file mode 100644
index 0000000..49d9bf5
--- /dev/null
+++ b/aha-ui/src/features/auth/sign-in/sign-in-2.tsx
@@ -0,0 +1,77 @@
+import { Link } from '@tanstack/react-router'
+import { Logo } from '@/assets/logo'
+import { cn } from '@/lib/utils'
+import dashboardDark from './assets/dashboard-dark.png'
+import dashboardLight from './assets/dashboard-light.png'
+import { UserAuthForm } from './components/user-auth-form'
+
+export function SignIn2() {
+ return (
+
+
+
+
+
+
Sign in
+
+ Enter your email and password below to log into{' '}
+
your account. Don't have an
+ account?{' '}
+
+ Sign Up
+
+
+
+
+
+ By clicking sign in, you agree to our{' '}
+
+ Terms of Service
+ {' '}
+ and{' '}
+
+ Privacy Policy
+
+ .
+
+
+
+
+
img]:absolute [&>img]:top-[15%] [&>img]:left-20 [&>img]:h-full [&>img]:w-full [&>img]:object-cover [&>img]:object-top-left [&>img]:select-none'
+ )}
+ >
+
+
+
+
+ Already have an account?{' '}
+
+ Sign In
+
+
+
+
+
+
+
+
+ By creating an account, you agree to our{' '}
+
+ Terms of Service
+ {' '}
+ and{' '}
+
+ Privacy Policy
+
+ .
+
+
+
+
+ )
+}
diff --git a/aha-ui/src/features/errors/forbidden.tsx b/aha-ui/src/features/errors/forbidden.tsx
new file mode 100644
index 0000000..4748e73
--- /dev/null
+++ b/aha-ui/src/features/errors/forbidden.tsx
@@ -0,0 +1,25 @@
+import { useNavigate, useRouter } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button'
+
+export function ForbiddenError() {
+ const navigate = useNavigate()
+ const { history } = useRouter()
+ return (
+
+
+
403
+
Access Forbidden
+
+ You don't have necessary permission
+ to view this resource.
+
+
+
+
+
+
+
+
+ {!minimal && (
+
500
+ )}
+
Oops! Something went wrong {`:')`}
+
+ We apologize for the inconvenience.
Please try again later.
+
+ {!minimal && (
+
+
+
+
+ )}
+
+
+
+
503
+
Website is under maintenance!
+
+ The site is not available at the moment.
+ We'll be back online shortly.
+
+
+
+
+
+
+
+
404
+
Oops! Page Not Found!
+
+ It seems like the page you're looking for
+ does not exist or might have been removed.
+
+
+
+
+
+
+
+
+
401
+
Unauthorized Access
+
+ Please log in with the appropriate credentials
to access this
+ resource.
+
+
+
+
+
+
+
+
+
+ 启动服务
+
+
+ 配置并启动模型推理服务
+
+
+ {/* 配置区 */}
+
+ 启动配置
+
+
+
+
+ {downloadedModels.length === 0 && (
+
+ 没有已下载的模型，请先在"模型列表"页面下载模型
+
+ )}
+
+
+ setWeightPath(e.target.value)}
+ placeholder="留空则使用默认路径"
+ disabled={status.running}
+ />
+
+
+
+ {/* 状态 + 控制 */}
+
+ 服务状态
+
+
+
+ {status.running ? "运行中" : "已停止"}
+
+ {status.pid && (
+
PID: {status.pid}
+ )}
+ {selectedModel && (
+
模型: {selectedModel}
+ )}
+
+ {!status.running ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ 日志输出
+
+
+
+ {status.logs.length === 0 ? (
+
等待日志输出...
+ ) : (
+
+ {status.logs.map((line, i) => (
+
+ {line}
+
+ ))}
+
+
+ )}
+
+
+
+
+ 模型列表
+
+
+ 管理已下载和可用的模型
+
+
+
+
+ {error}
+
+ )}
+
+
+
+
+
+
+ | 模型 ID |
+ 类型 |
+ 大小 |
+ 状态 |
+ 操作 |
+
+
+
+ {models.length === 0 && !loading ? (
+
+ |
+ 暂无模型数据
+ |
+
+ ) : (
+ models.map((m) => (
+
+ |
+ {m.model_id}
+ {m.path && (
+
+ {m.path}
+
+ )}
+ |
+
+
+ {typeLabels[m.model_type] || m.model_type}
+
+ |
+
+ {m.size_human ? (
+
+
+ {m.size_human}
+
+ ) : (
+ "-"
+ )}
+ |
+
+ {m.downloaded ? (
+
+
+ 已下载
+
+ ) : (
+ 未下载
+ )}
+ |
+
+
+ {!m.downloaded ? (
+
+ ) : (
+
+ )}
+
+ |
+
+ ))
+ )}
+
+
+
+
+
+
+ Settings
+
+
+ Manage your account settings and set e-mail preferences.
+
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+}
diff --git a/aha-ui/src/lib/utils.ts b/aha-ui/src/lib/utils.ts
index d084cca..6f44533 100644
--- a/aha-ui/src/lib/utils.ts
+++ b/aha-ui/src/lib/utils.ts
@@ -1,6 +1,75 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
+
+export function sleep(ms: number = 1000) {
+ return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+/**
+ * Generates page numbers for pagination with ellipsis
+ * @param currentPage - Current page number (1-based)
+ * @param totalPages - Total number of pages
+ * @returns Array of page numbers and ellipsis strings
+ *
+ * Examples:
+ * - Small dataset (≤5 pages): [1, 2, 3, 4, 5]
+ * - Near beginning: [1, 2, 3, 4, '...', 10]
+ * - In middle: [1, '...', 4, 5, 6, '...', 10]
+ * - Near end: [1, '...', 7, 8, 9, 10]
+ */
+export function getPageNumbers(currentPage: number, totalPages: number) {
+ const maxVisiblePages = 5 // Maximum number of page buttons to show
+ const rangeWithDots = []
+
+ if (totalPages <= maxVisiblePages) {
+ // If total pages is 5 or less, show all pages
+ for (let i = 1; i <= totalPages; i++) {
+ rangeWithDots.push(i)
+ }
+ } else {
+ // Always show first page
+ rangeWithDots.push(1)
+
+ if (currentPage <= 3) {
+ // Near the beginning: [1] [2] [3] [4] ... [10]
+ for (let i = 2; i <= 4; i++) {
+ rangeWithDots.push(i)
+ }
+ rangeWithDots.push('...', totalPages)
+ } else if (currentPage >= totalPages - 2) {
+ // Near the end: [1] ... [7] [8] [9] [10]
+ rangeWithDots.push('...')
+ for (let i = totalPages - 3; i <= totalPages; i++) {
+ rangeWithDots.push(i)
+ }
+ } else {
+ // In the middle: [1] ... [4] [5] [6] ... [10]
+ rangeWithDots.push('...')
+ for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+ rangeWithDots.push(i)
+ }
+ rangeWithDots.push('...', totalPages)
+ }
+ }
+
+ return rangeWithDots
+}
+
+/**
+ * Initials from a display name: first character of the first word + first
+ * character of the last word. One word only: first two characters. Empty: `?`.
+ */
+export function getDisplayNameInitials(displayName: string): string {
+ const parts = displayName.trim().split(/\s+/).filter(Boolean)
+ if (parts.length === 0) return '?'
+ if (parts.length === 1) {
+ return parts[0].slice(0, 2).toUpperCase()
+ }
+ const first = parts[0][0] ?? ''
+ const last = parts[parts.length - 1]?.[0] ?? ''
+ return (first + last).toUpperCase()
+}
diff --git a/aha-ui/src/main.tsx b/aha-ui/src/main.tsx
index 2be325e..c31f465 100644
--- a/aha-ui/src/main.tsx
+++ b/aha-ui/src/main.tsx
@@ -1,9 +1,107 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
+import { StrictMode } from 'react'
+import ReactDOM from 'react-dom/client'
+import { AxiosError } from 'axios'
+import {
+ QueryCache,
+ QueryClient,
+ QueryClientProvider,
+} from '@tanstack/react-query'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { toast } from 'sonner'
+import { useAuthStore } from '@/stores/auth-store'
+import { handleServerError } from '@/lib/handle-server-error'
+import { DirectionProvider } from './context/direction-provider'
+import { FontProvider } from './context/font-provider'
+import { ThemeProvider } from './context/theme-provider'
+// Generated Routes
+import { routeTree } from './routeTree.gen'
+// Styles
+import './styles/index.css'
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-
-
- ,
-);
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: (failureCount, error) => {
+ // eslint-disable-next-line no-console
+ if (import.meta.env.DEV) console.log({ failureCount, error })
+
+ if (failureCount >= 0 && import.meta.env.DEV) return false
+ if (failureCount > 3 && import.meta.env.PROD) return false
+
+ return !(
+ error instanceof AxiosError &&
+ [401, 403].includes(error.response?.status ?? 0)
+ )
+ },
+ refetchOnWindowFocus: import.meta.env.PROD,
+ staleTime: 10 * 1000, // 10s
+ },
+ mutations: {
+ onError: (error) => {
+ handleServerError(error)
+
+ if (error instanceof AxiosError) {
+ if (error.response?.status === 304) {
+ toast.error('Content not modified!')
+ }
+ }
+ },
+ },
+ },
+ queryCache: new QueryCache({
+ onError: (error) => {
+ if (error instanceof AxiosError) {
+ if (error.response?.status === 401) {
+ toast.error('Session expired!')
+ useAuthStore.getState().auth.reset()
+ const redirect = `${router.history.location.href}`
+ router.navigate({ to: '/sign-in', search: { redirect } })
+ }
+ if (error.response?.status === 500) {
+ toast.error('Internal Server Error!')
+ // Only navigate to error page in production to avoid disrupting HMR in development
+ if (import.meta.env.PROD) {
+ router.navigate({ to: '/500' })
+ }
+ }
+ if (error.response?.status === 403) {
+ // router.navigate("/forbidden", { replace: true });
+ }
+ }
+ },
+ }),
+})
+
+// Create a new router instance
+const router = createRouter({
+ routeTree,
+ context: { queryClient },
+ defaultPreload: 'intent',
+ defaultPreloadStaleTime: 0,
+})
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+ interface Register {
+ router: typeof router
+ }
+}
+
+// Render the app
+const rootElement = document.getElementById('root')!
+if (!rootElement.innerHTML) {
+ const root = ReactDOM.createRoot(rootElement)
+ root.render(
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/aha-ui/src/routeTree.gen.ts b/aha-ui/src/routeTree.gen.ts
new file mode 100644
index 0000000..f9472c0
--- /dev/null
+++ b/aha-ui/src/routeTree.gen.ts
@@ -0,0 +1,462 @@
+/* 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 AuthenticatedRouteRouteImport } from './routes/_authenticated/route'
+import { Route as AuthenticatedIndexRouteImport } from './routes/_authenticated/index'
+import { Route as AuthenticatedLaunchRouteImport } from './routes/_authenticated/launch'
+import { Route as errors503RouteImport } from './routes/(errors)/503'
+import { Route as errors500RouteImport } from './routes/(errors)/500'
+import { Route as errors404RouteImport } from './routes/(errors)/404'
+import { Route as errors403RouteImport } from './routes/(errors)/403'
+import { Route as errors401RouteImport } from './routes/(errors)/401'
+import { Route as authSignUpRouteImport } from './routes/(auth)/sign-up'
+import { Route as authSignIn2RouteImport } from './routes/(auth)/sign-in-2'
+import { Route as authSignInRouteImport } from './routes/(auth)/sign-in'
+import { Route as authOtpRouteImport } from './routes/(auth)/otp'
+import { Route as authForgotPasswordRouteImport } from './routes/(auth)/forgot-password'
+import { Route as AuthenticatedSettingsRouteRouteImport } from './routes/_authenticated/settings/route'
+import { Route as AuthenticatedSettingsIndexRouteImport } from './routes/_authenticated/settings/index'
+import { Route as AuthenticatedSettingsNotificationsRouteImport } from './routes/_authenticated/settings/notifications'
+import { Route as AuthenticatedSettingsDisplayRouteImport } from './routes/_authenticated/settings/display'
+import { Route as AuthenticatedSettingsAppearanceRouteImport } from './routes/_authenticated/settings/appearance'
+import { Route as AuthenticatedSettingsAccountRouteImport } from './routes/_authenticated/settings/account'
+
+const AuthenticatedRouteRoute = AuthenticatedRouteRouteImport.update({
+ id: '/_authenticated',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const AuthenticatedIndexRoute = AuthenticatedIndexRouteImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => AuthenticatedRouteRoute,
+} as any)
+const AuthenticatedLaunchRoute = AuthenticatedLaunchRouteImport.update({
+ id: '/launch',
+ path: '/launch',
+ getParentRoute: () => AuthenticatedRouteRoute,
+} as any)
+const errors503Route = errors503RouteImport.update({
+ id: '/(errors)/503',
+ path: '/503',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const errors500Route = errors500RouteImport.update({
+ id: '/(errors)/500',
+ path: '/500',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const errors404Route = errors404RouteImport.update({
+ id: '/(errors)/404',
+ path: '/404',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const errors403Route = errors403RouteImport.update({
+ id: '/(errors)/403',
+ path: '/403',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const errors401Route = errors401RouteImport.update({
+ id: '/(errors)/401',
+ path: '/401',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const authSignUpRoute = authSignUpRouteImport.update({
+ id: '/(auth)/sign-up',
+ path: '/sign-up',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const authSignIn2Route = authSignIn2RouteImport.update({
+ id: '/(auth)/sign-in-2',
+ path: '/sign-in-2',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const authSignInRoute = authSignInRouteImport.update({
+ id: '/(auth)/sign-in',
+ path: '/sign-in',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const authOtpRoute = authOtpRouteImport.update({
+ id: '/(auth)/otp',
+ path: '/otp',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const authForgotPasswordRoute = authForgotPasswordRouteImport.update({
+ id: '/(auth)/forgot-password',
+ path: '/forgot-password',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const AuthenticatedSettingsRouteRoute =
+ AuthenticatedSettingsRouteRouteImport.update({
+ id: '/settings',
+ path: '/settings',
+ getParentRoute: () => AuthenticatedRouteRoute,
+ } as any)
+const AuthenticatedSettingsIndexRoute =
+ AuthenticatedSettingsIndexRouteImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => AuthenticatedSettingsRouteRoute,
+ } as any)
+const AuthenticatedSettingsNotificationsRoute =
+ AuthenticatedSettingsNotificationsRouteImport.update({
+ id: '/notifications',
+ path: '/notifications',
+ getParentRoute: () => AuthenticatedSettingsRouteRoute,
+ } as any)
+const AuthenticatedSettingsDisplayRoute =
+ AuthenticatedSettingsDisplayRouteImport.update({
+ id: '/display',
+ path: '/display',
+ getParentRoute: () => AuthenticatedSettingsRouteRoute,
+ } as any)
+const AuthenticatedSettingsAppearanceRoute =
+ AuthenticatedSettingsAppearanceRouteImport.update({
+ id: '/appearance',
+ path: '/appearance',
+ getParentRoute: () => AuthenticatedSettingsRouteRoute,
+ } as any)
+const AuthenticatedSettingsAccountRoute =
+ AuthenticatedSettingsAccountRouteImport.update({
+ id: '/account',
+ path: '/account',
+ getParentRoute: () => AuthenticatedSettingsRouteRoute,
+ } as any)
+
+export interface FileRoutesByFullPath {
+ '/': typeof AuthenticatedIndexRoute
+ '/settings': typeof AuthenticatedSettingsRouteRouteWithChildren
+ '/forgot-password': typeof authForgotPasswordRoute
+ '/otp': typeof authOtpRoute
+ '/sign-in': typeof authSignInRoute
+ '/sign-in-2': typeof authSignIn2Route
+ '/sign-up': typeof authSignUpRoute
+ '/401': typeof errors401Route
+ '/403': typeof errors403Route
+ '/404': typeof errors404Route
+ '/500': typeof errors500Route
+ '/503': typeof errors503Route
+ '/launch': typeof AuthenticatedLaunchRoute
+ '/settings/account': typeof AuthenticatedSettingsAccountRoute
+ '/settings/appearance': typeof AuthenticatedSettingsAppearanceRoute
+ '/settings/display': typeof AuthenticatedSettingsDisplayRoute
+ '/settings/notifications': typeof AuthenticatedSettingsNotificationsRoute
+ '/settings/': typeof AuthenticatedSettingsIndexRoute
+}
+export interface FileRoutesByTo {
+ '/forgot-password': typeof authForgotPasswordRoute
+ '/otp': typeof authOtpRoute
+ '/sign-in': typeof authSignInRoute
+ '/sign-in-2': typeof authSignIn2Route
+ '/sign-up': typeof authSignUpRoute
+ '/401': typeof errors401Route
+ '/403': typeof errors403Route
+ '/404': typeof errors404Route
+ '/500': typeof errors500Route
+ '/503': typeof errors503Route
+ '/launch': typeof AuthenticatedLaunchRoute
+ '/': typeof AuthenticatedIndexRoute
+ '/settings/account': typeof AuthenticatedSettingsAccountRoute
+ '/settings/appearance': typeof AuthenticatedSettingsAppearanceRoute
+ '/settings/display': typeof AuthenticatedSettingsDisplayRoute
+ '/settings/notifications': typeof AuthenticatedSettingsNotificationsRoute
+ '/settings': typeof AuthenticatedSettingsIndexRoute
+}
+export interface FileRoutesById {
+ __root__: typeof rootRouteImport
+ '/_authenticated': typeof AuthenticatedRouteRouteWithChildren
+ '/_authenticated/settings': typeof AuthenticatedSettingsRouteRouteWithChildren
+ '/(auth)/forgot-password': typeof authForgotPasswordRoute
+ '/(auth)/otp': typeof authOtpRoute
+ '/(auth)/sign-in': typeof authSignInRoute
+ '/(auth)/sign-in-2': typeof authSignIn2Route
+ '/(auth)/sign-up': typeof authSignUpRoute
+ '/(errors)/401': typeof errors401Route
+ '/(errors)/403': typeof errors403Route
+ '/(errors)/404': typeof errors404Route
+ '/(errors)/500': typeof errors500Route
+ '/(errors)/503': typeof errors503Route
+ '/_authenticated/launch': typeof AuthenticatedLaunchRoute
+ '/_authenticated/': typeof AuthenticatedIndexRoute
+ '/_authenticated/settings/account': typeof AuthenticatedSettingsAccountRoute
+ '/_authenticated/settings/appearance': typeof AuthenticatedSettingsAppearanceRoute
+ '/_authenticated/settings/display': typeof AuthenticatedSettingsDisplayRoute
+ '/_authenticated/settings/notifications': typeof AuthenticatedSettingsNotificationsRoute
+ '/_authenticated/settings/': typeof AuthenticatedSettingsIndexRoute
+}
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath
+ fullPaths:
+ | '/'
+ | '/settings'
+ | '/forgot-password'
+ | '/otp'
+ | '/sign-in'
+ | '/sign-in-2'
+ | '/sign-up'
+ | '/401'
+ | '/403'
+ | '/404'
+ | '/500'
+ | '/503'
+ | '/launch'
+ | '/settings/account'
+ | '/settings/appearance'
+ | '/settings/display'
+ | '/settings/notifications'
+ | '/settings/'
+ fileRoutesByTo: FileRoutesByTo
+ to:
+ | '/forgot-password'
+ | '/otp'
+ | '/sign-in'
+ | '/sign-in-2'
+ | '/sign-up'
+ | '/401'
+ | '/403'
+ | '/404'
+ | '/500'
+ | '/503'
+ | '/launch'
+ | '/'
+ | '/settings/account'
+ | '/settings/appearance'
+ | '/settings/display'
+ | '/settings/notifications'
+ | '/settings'
+ id:
+ | '__root__'
+ | '/_authenticated'
+ | '/_authenticated/settings'
+ | '/(auth)/forgot-password'
+ | '/(auth)/otp'
+ | '/(auth)/sign-in'
+ | '/(auth)/sign-in-2'
+ | '/(auth)/sign-up'
+ | '/(errors)/401'
+ | '/(errors)/403'
+ | '/(errors)/404'
+ | '/(errors)/500'
+ | '/(errors)/503'
+ | '/_authenticated/launch'
+ | '/_authenticated/'
+ | '/_authenticated/settings/account'
+ | '/_authenticated/settings/appearance'
+ | '/_authenticated/settings/display'
+ | '/_authenticated/settings/notifications'
+ | '/_authenticated/settings/'
+ fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+ AuthenticatedRouteRoute: typeof AuthenticatedRouteRouteWithChildren
+ authForgotPasswordRoute: typeof authForgotPasswordRoute
+ authOtpRoute: typeof authOtpRoute
+ authSignInRoute: typeof authSignInRoute
+ authSignIn2Route: typeof authSignIn2Route
+ authSignUpRoute: typeof authSignUpRoute
+ errors401Route: typeof errors401Route
+ errors403Route: typeof errors403Route
+ errors404Route: typeof errors404Route
+ errors500Route: typeof errors500Route
+ errors503Route: typeof errors503Route
+}
+
+declare module '@tanstack/react-router' {
+ interface FileRoutesByPath {
+ '/_authenticated': {
+ id: '/_authenticated'
+ path: ''
+ fullPath: '/'
+ preLoaderRoute: typeof AuthenticatedRouteRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/_authenticated/': {
+ id: '/_authenticated/'
+ path: '/'
+ fullPath: '/'
+ preLoaderRoute: typeof AuthenticatedIndexRouteImport
+ parentRoute: typeof AuthenticatedRouteRoute
+ }
+ '/_authenticated/launch': {
+ id: '/_authenticated/launch'
+ path: '/launch'
+ fullPath: '/launch'
+ preLoaderRoute: typeof AuthenticatedLaunchRouteImport
+ parentRoute: typeof AuthenticatedRouteRoute
+ }
+ '/(errors)/503': {
+ id: '/(errors)/503'
+ path: '/503'
+ fullPath: '/503'
+ preLoaderRoute: typeof errors503RouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/(errors)/500': {
+ id: '/(errors)/500'
+ path: '/500'
+ fullPath: '/500'
+ preLoaderRoute: typeof errors500RouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/(errors)/404': {
+ id: '/(errors)/404'
+ path: '/404'
+ fullPath: '/404'
+ preLoaderRoute: typeof errors404RouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/(errors)/403': {
+ id: '/(errors)/403'
+ path: '/403'
+ fullPath: '/403'
+ preLoaderRoute: typeof errors403RouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/(errors)/401': {
+ id: '/(errors)/401'
+ path: '/401'
+ fullPath: '/401'
+ preLoaderRoute: typeof errors401RouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/(auth)/sign-up': {
+ id: '/(auth)/sign-up'
+ path: '/sign-up'
+ fullPath: '/sign-up'
+ preLoaderRoute: typeof authSignUpRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/(auth)/sign-in-2': {
+ id: '/(auth)/sign-in-2'
+ path: '/sign-in-2'
+ fullPath: '/sign-in-2'
+ preLoaderRoute: typeof authSignIn2RouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/(auth)/sign-in': {
+ id: '/(auth)/sign-in'
+ path: '/sign-in'
+ fullPath: '/sign-in'
+ preLoaderRoute: typeof authSignInRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/(auth)/otp': {
+ id: '/(auth)/otp'
+ path: '/otp'
+ fullPath: '/otp'
+ preLoaderRoute: typeof authOtpRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/(auth)/forgot-password': {
+ id: '/(auth)/forgot-password'
+ path: '/forgot-password'
+ fullPath: '/forgot-password'
+ preLoaderRoute: typeof authForgotPasswordRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/_authenticated/settings': {
+ id: '/_authenticated/settings'
+ path: '/settings'
+ fullPath: '/settings'
+ preLoaderRoute: typeof AuthenticatedSettingsRouteRouteImport
+ parentRoute: typeof AuthenticatedRouteRoute
+ }
+ '/_authenticated/settings/': {
+ id: '/_authenticated/settings/'
+ path: '/'
+ fullPath: '/settings/'
+ preLoaderRoute: typeof AuthenticatedSettingsIndexRouteImport
+ parentRoute: typeof AuthenticatedSettingsRouteRoute
+ }
+ '/_authenticated/settings/notifications': {
+ id: '/_authenticated/settings/notifications'
+ path: '/notifications'
+ fullPath: '/settings/notifications'
+ preLoaderRoute: typeof AuthenticatedSettingsNotificationsRouteImport
+ parentRoute: typeof AuthenticatedSettingsRouteRoute
+ }
+ '/_authenticated/settings/display': {
+ id: '/_authenticated/settings/display'
+ path: '/display'
+ fullPath: '/settings/display'
+ preLoaderRoute: typeof AuthenticatedSettingsDisplayRouteImport
+ parentRoute: typeof AuthenticatedSettingsRouteRoute
+ }
+ '/_authenticated/settings/appearance': {
+ id: '/_authenticated/settings/appearance'
+ path: '/appearance'
+ fullPath: '/settings/appearance'
+ preLoaderRoute: typeof AuthenticatedSettingsAppearanceRouteImport
+ parentRoute: typeof AuthenticatedSettingsRouteRoute
+ }
+ '/_authenticated/settings/account': {
+ id: '/_authenticated/settings/account'
+ path: '/account'
+ fullPath: '/settings/account'
+ preLoaderRoute: typeof AuthenticatedSettingsAccountRouteImport
+ parentRoute: typeof AuthenticatedSettingsRouteRoute
+ }
+ }
+}
+
+interface AuthenticatedSettingsRouteRouteChildren {
+ AuthenticatedSettingsAccountRoute: typeof AuthenticatedSettingsAccountRoute
+ AuthenticatedSettingsAppearanceRoute: typeof AuthenticatedSettingsAppearanceRoute
+ AuthenticatedSettingsDisplayRoute: typeof AuthenticatedSettingsDisplayRoute
+ AuthenticatedSettingsNotificationsRoute: typeof AuthenticatedSettingsNotificationsRoute
+ AuthenticatedSettingsIndexRoute: typeof AuthenticatedSettingsIndexRoute
+}
+
+const AuthenticatedSettingsRouteRouteChildren: AuthenticatedSettingsRouteRouteChildren =
+ {
+ AuthenticatedSettingsAccountRoute: AuthenticatedSettingsAccountRoute,
+ AuthenticatedSettingsAppearanceRoute: AuthenticatedSettingsAppearanceRoute,
+ AuthenticatedSettingsDisplayRoute: AuthenticatedSettingsDisplayRoute,
+ AuthenticatedSettingsNotificationsRoute:
+ AuthenticatedSettingsNotificationsRoute,
+ AuthenticatedSettingsIndexRoute: AuthenticatedSettingsIndexRoute,
+ }
+
+const AuthenticatedSettingsRouteRouteWithChildren =
+ AuthenticatedSettingsRouteRoute._addFileChildren(
+ AuthenticatedSettingsRouteRouteChildren,
+ )
+
+interface AuthenticatedRouteRouteChildren {
+ AuthenticatedSettingsRouteRoute: typeof AuthenticatedSettingsRouteRouteWithChildren
+ AuthenticatedLaunchRoute: typeof AuthenticatedLaunchRoute
+ AuthenticatedIndexRoute: typeof AuthenticatedIndexRoute
+}
+
+const AuthenticatedRouteRouteChildren: AuthenticatedRouteRouteChildren = {
+ AuthenticatedSettingsRouteRoute: AuthenticatedSettingsRouteRouteWithChildren,
+ AuthenticatedLaunchRoute: AuthenticatedLaunchRoute,
+ AuthenticatedIndexRoute: AuthenticatedIndexRoute,
+}
+
+const AuthenticatedRouteRouteWithChildren =
+ AuthenticatedRouteRoute._addFileChildren(AuthenticatedRouteRouteChildren)
+
+const rootRouteChildren: RootRouteChildren = {
+ AuthenticatedRouteRoute: AuthenticatedRouteRouteWithChildren,
+ authForgotPasswordRoute: authForgotPasswordRoute,
+ authOtpRoute: authOtpRoute,
+ authSignInRoute: authSignInRoute,
+ authSignIn2Route: authSignIn2Route,
+ authSignUpRoute: authSignUpRoute,
+ errors401Route: errors401Route,
+ errors403Route: errors403Route,
+ errors404Route: errors404Route,
+ errors500Route: errors500Route,
+ errors503Route: errors503Route,
+}
+export const routeTree = rootRouteImport
+ ._addFileChildren(rootRouteChildren)
+ ._addFileTypes()
diff --git a/aha-ui/src/routes/(auth)/forgot-password.tsx b/aha-ui/src/routes/(auth)/forgot-password.tsx
new file mode 100644
index 0000000..a06c5b9
--- /dev/null
+++ b/aha-ui/src/routes/(auth)/forgot-password.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ForgotPassword } from '@/features/auth/forgot-password'
+
+export const Route = createFileRoute('/(auth)/forgot-password')({
+ component: ForgotPassword,
+})
diff --git a/aha-ui/src/routes/(auth)/otp.tsx b/aha-ui/src/routes/(auth)/otp.tsx
new file mode 100644
index 0000000..7c8cf27
--- /dev/null
+++ b/aha-ui/src/routes/(auth)/otp.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { Otp } from '@/features/auth/otp'
+
+export const Route = createFileRoute('/(auth)/otp')({
+ component: Otp,
+})
diff --git a/aha-ui/src/routes/(auth)/sign-in-2.tsx b/aha-ui/src/routes/(auth)/sign-in-2.tsx
new file mode 100644
index 0000000..c3c0e55
--- /dev/null
+++ b/aha-ui/src/routes/(auth)/sign-in-2.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { SignIn2 } from '@/features/auth/sign-in/sign-in-2'
+
+export const Route = createFileRoute('/(auth)/sign-in-2')({
+ component: SignIn2,
+})
diff --git a/aha-ui/src/routes/(auth)/sign-in.tsx b/aha-ui/src/routes/(auth)/sign-in.tsx
new file mode 100644
index 0000000..22fbf76
--- /dev/null
+++ b/aha-ui/src/routes/(auth)/sign-in.tsx
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+import { createFileRoute } from '@tanstack/react-router'
+import { SignIn } from '@/features/auth/sign-in'
+
+const searchSchema = z.object({
+ redirect: z.string().optional(),
+})
+
+export const Route = createFileRoute('/(auth)/sign-in')({
+ component: SignIn,
+ validateSearch: searchSchema,
+})
diff --git a/aha-ui/src/routes/(auth)/sign-up.tsx b/aha-ui/src/routes/(auth)/sign-up.tsx
new file mode 100644
index 0000000..5447afb
--- /dev/null
+++ b/aha-ui/src/routes/(auth)/sign-up.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { SignUp } from '@/features/auth/sign-up'
+
+export const Route = createFileRoute('/(auth)/sign-up')({
+ component: SignUp,
+})
diff --git a/aha-ui/src/routes/(errors)/401.tsx b/aha-ui/src/routes/(errors)/401.tsx
new file mode 100644
index 0000000..e10bda7
--- /dev/null
+++ b/aha-ui/src/routes/(errors)/401.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { UnauthorisedError } from '@/features/errors/unauthorized-error'
+
+export const Route = createFileRoute('/(errors)/401')({
+ component: UnauthorisedError,
+})
diff --git a/aha-ui/src/routes/(errors)/403.tsx b/aha-ui/src/routes/(errors)/403.tsx
new file mode 100644
index 0000000..a47d849
--- /dev/null
+++ b/aha-ui/src/routes/(errors)/403.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ForbiddenError } from '@/features/errors/forbidden'
+
+export const Route = createFileRoute('/(errors)/403')({
+ component: ForbiddenError,
+})
diff --git a/aha-ui/src/routes/(errors)/404.tsx b/aha-ui/src/routes/(errors)/404.tsx
new file mode 100644
index 0000000..c8b95e4
--- /dev/null
+++ b/aha-ui/src/routes/(errors)/404.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { NotFoundError } from '@/features/errors/not-found-error'
+
+export const Route = createFileRoute('/(errors)/404')({
+ component: NotFoundError,
+})
diff --git a/aha-ui/src/routes/(errors)/500.tsx b/aha-ui/src/routes/(errors)/500.tsx
new file mode 100644
index 0000000..f5976f7
--- /dev/null
+++ b/aha-ui/src/routes/(errors)/500.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { GeneralError } from '@/features/errors/general-error'
+
+export const Route = createFileRoute('/(errors)/500')({
+ component: GeneralError,
+})
diff --git a/aha-ui/src/routes/(errors)/503.tsx b/aha-ui/src/routes/(errors)/503.tsx
new file mode 100644
index 0000000..eca3367
--- /dev/null
+++ b/aha-ui/src/routes/(errors)/503.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { MaintenanceError } from '@/features/errors/maintenance-error'
+
+export const Route = createFileRoute('/(errors)/503')({
+ component: MaintenanceError,
+})
diff --git a/aha-ui/src/routes/__root.tsx b/aha-ui/src/routes/__root.tsx
new file mode 100644
index 0000000..17faf5b
--- /dev/null
+++ b/aha-ui/src/routes/__root.tsx
@@ -0,0 +1,30 @@
+import { type QueryClient } from '@tanstack/react-query'
+import { createRootRouteWithContext, Outlet } from '@tanstack/react-router'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { Toaster } from '@/components/ui/sonner'
+import { NavigationProgress } from '@/components/navigation-progress'
+import { GeneralError } from '@/features/errors/general-error'
+import { NotFoundError } from '@/features/errors/not-found-error'
+
+export const Route = createRootRouteWithContext<{
+ queryClient: QueryClient
+}>()({
+ component: () => {
+ return (
+ <>
+
+
+
+ {import.meta.env.MODE === 'development' && (
+ <>
+
+
+
+ )}
+
+ )
+ },
+ notFoundComponent: NotFoundError,
+ errorComponent: GeneralError,
+})
diff --git a/aha-ui/src/routes/_authenticated/index.tsx b/aha-ui/src/routes/_authenticated/index.tsx
new file mode 100644
index 0000000..1caad84
--- /dev/null
+++ b/aha-ui/src/routes/_authenticated/index.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ModelsPage } from '@/features/models'
+
+export const Route = createFileRoute('/_authenticated/')({
+ component: ModelsPage,
+})
diff --git a/aha-ui/src/routes/_authenticated/launch.tsx b/aha-ui/src/routes/_authenticated/launch.tsx
new file mode 100644
index 0000000..19dd9b4
--- /dev/null
+++ b/aha-ui/src/routes/_authenticated/launch.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { LaunchPage } from '@/features/launch'
+
+export const Route = createFileRoute('/_authenticated/launch')({
+ component: LaunchPage,
+})
diff --git a/aha-ui/src/routes/_authenticated/route.tsx b/aha-ui/src/routes/_authenticated/route.tsx
new file mode 100644
index 0000000..39ea1a3
--- /dev/null
+++ b/aha-ui/src/routes/_authenticated/route.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { AuthenticatedLayout } from '@/components/layout/authenticated-layout'
+
+export const Route = createFileRoute('/_authenticated')({
+ component: AuthenticatedLayout,
+})
diff --git a/aha-ui/src/routes/_authenticated/settings/account.tsx b/aha-ui/src/routes/_authenticated/settings/account.tsx
new file mode 100644
index 0000000..d055d86
--- /dev/null
+++ b/aha-ui/src/routes/_authenticated/settings/account.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { SettingsAccount } from '@/features/settings/account'
+
+export const Route = createFileRoute('/_authenticated/settings/account')({
+ component: SettingsAccount,
+})
diff --git a/aha-ui/src/routes/_authenticated/settings/appearance.tsx b/aha-ui/src/routes/_authenticated/settings/appearance.tsx
new file mode 100644
index 0000000..891c41e
--- /dev/null
+++ b/aha-ui/src/routes/_authenticated/settings/appearance.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { SettingsAppearance } from '@/features/settings/appearance'
+
+export const Route = createFileRoute('/_authenticated/settings/appearance')({
+ component: SettingsAppearance,
+})
diff --git a/aha-ui/src/routes/_authenticated/settings/display.tsx b/aha-ui/src/routes/_authenticated/settings/display.tsx
new file mode 100644
index 0000000..26751e3
--- /dev/null
+++ b/aha-ui/src/routes/_authenticated/settings/display.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { SettingsDisplay } from '@/features/settings/display'
+
+export const Route = createFileRoute('/_authenticated/settings/display')({
+ component: SettingsDisplay,
+})
diff --git a/aha-ui/src/routes/_authenticated/settings/index.tsx b/aha-ui/src/routes/_authenticated/settings/index.tsx
new file mode 100644
index 0000000..b377706
--- /dev/null
+++ b/aha-ui/src/routes/_authenticated/settings/index.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { SettingsProfile } from '@/features/settings/profile'
+
+export const Route = createFileRoute('/_authenticated/settings/')({
+ component: SettingsProfile,
+})
diff --git a/aha-ui/src/routes/_authenticated/settings/notifications.tsx b/aha-ui/src/routes/_authenticated/settings/notifications.tsx
new file mode 100644
index 0000000..557027a
--- /dev/null
+++ b/aha-ui/src/routes/_authenticated/settings/notifications.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { SettingsNotifications } from '@/features/settings/notifications'
+
+export const Route = createFileRoute('/_authenticated/settings/notifications')({
+ component: SettingsNotifications,
+})
diff --git a/aha-ui/src/routes/_authenticated/settings/route.tsx b/aha-ui/src/routes/_authenticated/settings/route.tsx
new file mode 100644
index 0000000..5babd5f
--- /dev/null
+++ b/aha-ui/src/routes/_authenticated/settings/route.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { Settings } from '@/features/settings'
+
+export const Route = createFileRoute('/_authenticated/settings')({
+ component: Settings,
+})
diff --git a/aha-ui/src/stores/auth-store.ts b/aha-ui/src/stores/auth-store.ts
new file mode 100644
index 0000000..33d368f
--- /dev/null
+++ b/aha-ui/src/stores/auth-store.ts
@@ -0,0 +1,53 @@
+import { create } from 'zustand'
+import { getCookie, setCookie, removeCookie } from '@/lib/cookies'
+
+const ACCESS_TOKEN = 'thisisjustarandomstring'
+
+interface AuthUser {
+ accountNo: string
+ email: string
+ role: string[]
+ exp: number
+}
+
+interface AuthState {
+ auth: {
+ user: AuthUser | null
+ setUser: (user: AuthUser | null) => void
+ accessToken: string
+ setAccessToken: (accessToken: string) => void
+ resetAccessToken: () => void
+ reset: () => void
+ }
+}
+
+export const useAuthStore = create()((set) => {
+ const cookieState = getCookie(ACCESS_TOKEN)
+ const initToken = cookieState ? JSON.parse(cookieState) : ''
+ return {
+ auth: {
+ user: null,
+ setUser: (user) =>
+ set((state) => ({ ...state, auth: { ...state.auth, user } })),
+ accessToken: initToken,
+ setAccessToken: (accessToken) =>
+ set((state) => {
+ setCookie(ACCESS_TOKEN, JSON.stringify(accessToken))
+ return { ...state, auth: { ...state.auth, accessToken } }
+ }),
+ resetAccessToken: () =>
+ set((state) => {
+ removeCookie(ACCESS_TOKEN)
+ return { ...state, auth: { ...state.auth, accessToken: '' } }
+ }),
+ reset: () =>
+ set((state) => {
+ removeCookie(ACCESS_TOKEN)
+ return {
+ ...state,
+ auth: { ...state.auth, user: null, accessToken: '' },
+ }
+ }),
+ },
+ }
+})
diff --git a/aha-ui/src/styles/index.css b/aha-ui/src/styles/index.css
new file mode 100644
index 0000000..38797d6
--- /dev/null
+++ b/aha-ui/src/styles/index.css
@@ -0,0 +1,87 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import './theme.css';
+
+@custom-variant dark (&:is(.dark *));
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ scrollbar-width: thin;
+ scrollbar-color: var(--border) transparent;
+ }
+ html {
+ @apply overflow-x-hidden;
+ }
+ body {
+ @apply min-h-svh w-full bg-background text-foreground has-[div[data-variant='inset']]:bg-sidebar;
+ }
+
+ /* Override Radix scroll locking for sticky headers */
+ body[data-scroll-locked] {
+ overflow: unset !important;
+ }
+
+ /* Cursor pointer for buttons */
+ button:not(:disabled),
+ [role='button']:not(:disabled) {
+ cursor: pointer;
+ }
+
+ /* Prevent focus zoom on mobile devices */
+ @media screen and (max-width: 767px) {
+ input,
+ select,
+ textarea {
+ font-size: 16px !important;
+ }
+ }
+}
+
+@utility container {
+ margin-inline: auto;
+ padding-inline: 2rem;
+}
+
+@utility no-scrollbar {
+ /* Hide scrollbar for Chrome, Safari and Opera */
+ &::-webkit-scrollbar {
+ display: none;
+ }
+ /* Hide scrollbar for IE, Edge and Firefox */
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}
+
+@utility faded-bottom {
+ @apply after:pointer-events-none after:absolute after:inset-s-0 after:bottom-0 after:hidden after:h-32 after:w-full after:rounded-b-2xl after:bg-[linear-gradient(180deg,transparent_10%,var(--background)_70%)] md:after:block;
+}
+
+/* styles.css */
+.CollapsibleContent {
+ overflow: hidden;
+}
+.CollapsibleContent[data-state='open'] {
+ animation: slideDown 300ms ease-out;
+}
+.CollapsibleContent[data-state='closed'] {
+ animation: slideUp 300ms ease-out;
+}
+
+@keyframes slideDown {
+ from {
+ height: 0;
+ }
+ to {
+ height: var(--radix-collapsible-content-height);
+ }
+}
+
+@keyframes slideUp {
+ from {
+ height: var(--radix-collapsible-content-height);
+ }
+ to {
+ height: 0;
+ }
+}
diff --git a/aha-ui/src/styles/theme.css b/aha-ui/src/styles/theme.css
new file mode 100644
index 0000000..2832133
--- /dev/null
+++ b/aha-ui/src/styles/theme.css
@@ -0,0 +1,102 @@
+:root {
+ --radius: 0.625rem;
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.129 0.042 264.695);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.129 0.042 264.695);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.129 0.042 264.695);
+ --primary: oklch(0.208 0.042 265.755);
+ --primary-foreground: oklch(0.984 0.003 247.858);
+ --secondary: oklch(0.968 0.007 247.896);
+ --secondary-foreground: oklch(0.208 0.042 265.755);
+ --muted: oklch(0.968 0.007 247.896);
+ --muted-foreground: oklch(0.554 0.046 257.417);
+ --accent: oklch(0.968 0.007 247.896);
+ --accent-foreground: oklch(0.208 0.042 265.755);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.929 0.013 255.508);
+ --input: oklch(0.929 0.013 255.508);
+ --ring: oklch(0.704 0.04 256.788);
+ --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: var(--background);
+ --sidebar-foreground: var(--foreground);
+ --sidebar-primary: var(--primary);
+ --sidebar-primary-foreground: var(--primary-foreground);
+ --sidebar-accent: var(--accent);
+ --sidebar-accent-foreground: var(--accent-foreground);
+ --sidebar-border: var(--border);
+ --sidebar-ring: var(--ring);
+}
+
+.dark {
+ --background: oklch(0.129 0.042 264.695);
+ --foreground: oklch(0.984 0.003 247.858);
+ --card: oklch(0.14 0.04 259.21);
+ --card-foreground: oklch(0.984 0.003 247.858);
+ --popover: oklch(0.208 0.042 265.755);
+ --popover-foreground: oklch(0.984 0.003 247.858);
+ --primary: oklch(0.929 0.013 255.508);
+ --primary-foreground: oklch(0.208 0.042 265.755);
+ --secondary: oklch(0.279 0.041 260.031);
+ --secondary-foreground: oklch(0.984 0.003 247.858);
+ --muted: oklch(0.279 0.041 260.031);
+ --muted-foreground: oklch(0.704 0.04 256.788);
+ --accent: oklch(0.279 0.041 260.031);
+ --accent-foreground: oklch(0.984 0.003 247.858);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.551 0.027 264.364);
+ --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);
+}
+
+@theme inline {
+ --font-inter: 'Inter', 'sans-serif';
+ --font-manrope: 'Manrope', 'sans-serif';
+
+ --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);
+}
diff --git a/aha-ui/src/tanstack-table.d.ts b/aha-ui/src/tanstack-table.d.ts
new file mode 100644
index 0000000..1f9201c
--- /dev/null
+++ b/aha-ui/src/tanstack-table.d.ts
@@ -0,0 +1,10 @@
+import '@tanstack/react-table'
+
+declare module '@tanstack/react-table' {
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ interface ColumnMeta {
+ className?: string // apply to both th and td
+ tdClassName?: string
+ thClassName?: string
+ }
+}
diff --git a/aha-ui/src/test-utils/cookies.ts b/aha-ui/src/test-utils/cookies.ts
new file mode 100644
index 0000000..234efb5
--- /dev/null
+++ b/aha-ui/src/test-utils/cookies.ts
@@ -0,0 +1,28 @@
+import { removeCookie } from '@/lib/cookies'
+
+/**
+ * Remove cookies visible on `document.cookie` for test isolation.
+ *
+ * - No `filter`: remove every cookie.
+ * - `string`: remove only names that **start with** that string (prefix).
+ * - `RegExp`: remove only names where `filter.test(name)` is true.
+ */
+export function clearCookies(filter?: string | RegExp): void {
+ if (typeof document === 'undefined') return
+
+ for (const part of document.cookie.split(';')) {
+ const name = part.split('=')[0]?.trim()
+ if (!name) continue
+
+ const shouldRemove =
+ filter === undefined
+ ? true
+ : typeof filter === 'string'
+ ? name.startsWith(filter)
+ : filter.test(name)
+
+ if (shouldRemove) {
+ removeCookie(name)
+ }
+ }
+}
diff --git a/aha-ui/src/test-utils/tanstack-table.ts b/aha-ui/src/test-utils/tanstack-table.ts
new file mode 100644
index 0000000..2e09da1
--- /dev/null
+++ b/aha-ui/src/test-utils/tanstack-table.ts
@@ -0,0 +1,16 @@
+import { type Table } from '@tanstack/react-table'
+import { vi } from 'vitest'
+
+/**
+ * Minimal TanStack Table mock for tests that only need selected row count and
+ * `resetRowSelection` (e.g. multi-delete dialogs).
+ */
+export function createTableMock(rowCount = 2) {
+ const rows = Array.from({ length: rowCount }, () => ({}))
+ const resetRowSelection = vi.fn()
+ const table = {
+ getFilteredSelectedRowModel: () => ({ rows }),
+ resetRowSelection,
+ } as unknown as Table>
+ return { table, resetRowSelection }
+}
diff --git a/aha-ui/tsconfig.app.json b/aha-ui/tsconfig.app.json
new file mode 100644
index 0000000..3149d8a
--- /dev/null
+++ b/aha-ui/tsconfig.app.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "paths": {
+ "@/*": ["./src/*"]
+ },
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["src"]
+}
diff --git a/aha-ui/tsconfig.json b/aha-ui/tsconfig.json
index 54e4404..e57353e 100644
--- a/aha-ui/tsconfig.json
+++ b/aha-ui/tsconfig.json
@@ -1,38 +1,13 @@
{
- "compilerOptions": {
- "target": "ES2020",
- "useDefineForClassFields": true,
- "lib": [
- "ES2020",
- "DOM",
- "DOM.Iterable"
- ],
- "module": "ESNext",
- "skipLibCheck": true,
- /* Bundler mode */
- "moduleResolution": "bundler",
- "allowImportingTsExtensions": true,
- "resolveJsonModule": true,
- "isolatedModules": true,
- "noEmit": true,
- "jsx": "react-jsx",
- "paths": {
- "@/*": [
- "./src/*"
- ]
- },
- /* Linting */
- "strict": true,
- "noUnusedLocals": true,
- "noUnusedParameters": true,
- "noFallthroughCasesInSwitch": true
- },
- "include": [
- "src"
- ],
+ "files": [],
"references": [
- {
- "path": "./tsconfig.node.json"
- }
- ]
-}
\ No newline at end of file
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ],
+ "compilerOptions": {
+ "paths": {
+ "@/*": ["./src/*"]
+ },
+ "strictNullChecks": true
+ }
+}
diff --git a/aha-ui/tsconfig.node.json b/aha-ui/tsconfig.node.json
index 42872c5..fbd305d 100644
--- a/aha-ui/tsconfig.node.json
+++ b/aha-ui/tsconfig.node.json
@@ -1,10 +1,20 @@
{
"compilerOptions": {
- "composite": true,
- "skipLibCheck": true,
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2022",
+ "lib": ["ES2023"],
"module": "ESNext",
- "moduleResolution": "bundler",
- "allowSyntheticDefaultImports": true
+ "skipLibCheck": true,
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}
diff --git a/aha-ui/vite.config.ts b/aha-ui/vite.config.ts
index 289e364..b50df9e 100644
--- a/aha-ui/vite.config.ts
+++ b/aha-ui/vite.config.ts
@@ -1,13 +1,22 @@
+///
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
-import tailwindcss from '@tailwindcss/vite'
+import tailwindcss from "@tailwindcss/vite";
+import { tanstackRouter } from "@tanstack/router-plugin/vite";
import path from "node:path";
const host = process.env.TAURI_DEV_HOST;
// https://vite.dev/config/
export default defineConfig(async () => ({
- plugins: [react(), tailwindcss(),],
+ plugins: [
+ tanstackRouter({
+ target: "react",
+ autoCodeSplitting: true,
+ }),
+ react(),
+ tailwindcss(),
+ ],
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
//
@@ -25,10 +34,10 @@ export default defineConfig(async () => ({
host: host || false,
hmr: host
? {
- protocol: "ws",
- host,
- port: 1421,
- }
+ protocol: "ws",
+ host,
+ port: 1421,
+ }
: undefined,
watch: {
// 3. tell Vite to ignore watching `src-tauri`