) => React.ReactElement
+ }
+ isTheme?: boolean
+}) {
+ return (
+ -
+
+
+
+
+
+ {item.label}
+
+
+ )
+}
+
+function ThemeConfig() {
+ const { defaultTheme, theme, setTheme } = useTheme()
+ return (
+
+
setTheme(defaultTheme)}
+ resetAriaLabel='恢复默认主题'
+ />
+
+ {[
+ {
+ value: 'system',
+ label: '跟随系统',
+ icon: IconThemeSystem,
+ },
+ {
+ value: 'light',
+ label: '浅色',
+ icon: IconThemeLight,
+ },
+ {
+ value: 'dark',
+ label: '深色',
+ icon: IconThemeDark,
+ },
+ ].map((item) => (
+
+ ))}
+
+
+ 在跟随系统、浅色和深色模式之间选择
+
+
+ setVariant(defaultVariant)}
+ resetAriaLabel='恢复默认侧边栏样式'
+ />
+
+ {[
+ {
+ value: 'inset',
+ label: '内嵌',
+ icon: IconSidebarInset,
+ },
+ {
+ value: 'floating',
+ label: '浮动',
+ icon: IconSidebarFloating,
+ },
+ {
+ value: 'sidebar',
+ label: '标准',
+ icon: IconSidebarSidebar,
+ },
+ ].map((item) => (
+
+ ))}
+
+
+
+ )
+}
+
+function LayoutConfig() {
+ const { open, setOpen } = useSidebar()
+ const { defaultCollapsible, collapsible, setCollapsible } = useLayout()
+
+ const radioState = open ? 'default' : collapsible
+
+ return (
+
+
{
+ setOpen(true)
+ setCollapsible(defaultCollapsible)
+ }}
+ resetAriaLabel='恢复默认布局'
+ />
+ {
+ if (v === 'default') {
+ setOpen(true)
+ return
+ }
+ setOpen(false)
+ setCollapsible(v as Collapsible)
+ }}
+ className='grid w-full max-w-md grid-cols-3 gap-4'
+ aria-label='选择布局'
+ aria-describedby='layout-description'
+ >
+ {[
+ {
+ value: 'default',
+ label: '默认',
+ icon: IconLayoutDefault,
+ },
+ {
+ value: 'icon',
+ label: '紧凑',
+ icon: IconLayoutCompact,
+ },
+ {
+ value: 'offcanvas',
+ label: '全宽',
+ icon: IconLayoutFull,
+ },
+ ].map((item) => (
+
+ ))}
+
+
+ 在默认展开、紧凑图标和全宽布局之间选择
+
+
+
setDir(defaultDir)}
+ resetAriaLabel='恢复默认文字方向'
+ />
+
+ {[
+ {
+ value: 'ltr',
+ label: '从左到右',
+ icon: (props: SVGProps) => (
+
+ ),
+ },
+ {
+ value: 'rtl',
+ label: '从右到左',
+ icon: (props: SVGProps) => (
+
+ ),
+ },
+ ].map((item) => (
+
+ ))}
+
+
+ 在从左到右和从右到左之间选择
+
+ Type DELETE to confirm.
+
+ }
+ confirmText='Delete'
+ destructive
+ />
+ )
+
+ const deleteBtn = getByRole('button', { name: 'Delete' })
+ await expect.element(deleteBtn).toHaveAttribute('type', 'submit')
+ await expect
+ .element(deleteBtn)
+ .toHaveAttribute('form', 'tasks-multi-delete-form')
+ })
+
+ it('submits the desc form when confirm is clicked (form prop, no handleConfirm)', async () => {
+ const handleFormSubmit = vi.fn((e: SubmitEvent) => {
+ e.preventDefault()
+ })
+
+ const { getByRole } = await render(
+
+ Confirm deletion.
+
+ }
+ confirmText='Delete'
+ destructive
+ />
+ )
+
+ await userEvent.click(getByRole('button', { name: 'Delete' }))
+
+ expect(handleFormSubmit).toHaveBeenCalledOnce()
+ })
+
+ it('submits the form when Enter key is pressed', async () => {
+ const handleFormSubmit = vi.fn((e: SubmitEvent) => {
+ e.preventDefault()
+ })
+
+ const { getByPlaceholder } = await render(
+
+
+
+ }
+ confirmText='Delete'
+ destructive
+ />
+ )
+
+ await userEvent.fill(getByPlaceholder('username'), 'test')
+ await userEvent.keyboard('{Enter}')
+ expect(handleFormSubmit).toHaveBeenCalledOnce()
+ })
+
+ it('does not submit the form when confirm is disabled (typed confirmation mismatch)', async () => {
+ const handleFormSubmit = vi.fn((e: SubmitEvent) => {
+ e.preventDefault()
+ })
+
+ const { getByRole } = await render(
+
+ Enter username to enable Delete.
+
+ }
+ confirmText='Delete'
+ destructive
+ />
+ )
+
+ const deleteBtn = getByRole('button', { name: 'Delete' })
+ await expect.element(deleteBtn).toBeDisabled()
+ expect(handleFormSubmit).not.toHaveBeenCalled()
+ })
+})
diff --git a/packages/frontend/src/components/confirm-dialog.tsx b/packages/frontend/src/components/confirm-dialog.tsx
new file mode 100644
index 0000000..aed089c
--- /dev/null
+++ b/packages/frontend/src/components/confirm-dialog.tsx
@@ -0,0 +1,72 @@
+import { cn } from '@/lib/utils'
+import {
+ AlertDialog,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
+
+type ConfirmDialogProps = {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ title: React.ReactNode
+ disabled?: boolean
+ desc: React.JSX.Element | string
+ cancelBtnText?: string
+ confirmText?: React.ReactNode
+ destructive?: boolean
+ isLoading?: boolean
+ className?: string
+ children?: React.ReactNode
+} & (
+ | { form: string; handleConfirm?: undefined }
+ | { form?: undefined; handleConfirm: () => void }
+)
+
+export function ConfirmDialog(props: ConfirmDialogProps) {
+ const {
+ title,
+ desc,
+ children,
+ className,
+ confirmText,
+ cancelBtnText,
+ destructive,
+ isLoading,
+ disabled = false,
+ form,
+ handleConfirm,
+ ...actions
+ } = props
+ return (
+
+
+
+ {title}
+
+ {desc}
+
+
+ {children}
+
+
+ {cancelBtnText ?? 'Cancel'}
+
+
+
+
+
+ )
+}
diff --git a/packages/frontend/src/components/data-table/bulk-actions.tsx b/packages/frontend/src/components/data-table/bulk-actions.tsx
new file mode 100644
index 0000000..ebdeb05
--- /dev/null
+++ b/packages/frontend/src/components/data-table/bulk-actions.tsx
@@ -0,0 +1,213 @@
+import { useState, useEffect, useRef } from 'react'
+import { type Table } from '@tanstack/react-table'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+type DataTableBulkActionsProps = {
+ table: Table
+ entityName: string
+ children: React.ReactNode
+}
+
+/**
+ * A modular toolbar for displaying bulk actions when table rows are selected.
+ *
+ * @template TData The type of data in the table.
+ * @param {object} props The component props.
+ * @param {Table} props.table The react-table instance.
+ * @param {string} props.entityName The name of the entity being acted upon (e.g., "task", "user").
+ * @param {React.ReactNode} props.children The action buttons to be rendered inside the toolbar.
+ * @returns {React.ReactNode | null} The rendered component or null if no rows are selected.
+ */
+export function DataTableBulkActions({
+ table,
+ entityName,
+ children,
+}: DataTableBulkActionsProps): React.ReactNode | null {
+ const selectedRows = table.getFilteredSelectedRowModel().rows
+ const selectedCount = selectedRows.length
+ const toolbarRef = useRef(null)
+ const [announcement, setAnnouncement] = useState('')
+
+ // Announce selection changes to screen readers
+ useEffect(() => {
+ if (selectedCount > 0) {
+ const message = `${selectedCount} ${entityName}${selectedCount > 1 ? 's' : ''} selected. Bulk actions toolbar is available.`
+
+ // Use queueMicrotask to defer state update and avoid cascading renders
+ queueMicrotask(() => {
+ setAnnouncement(message)
+ })
+
+ // Clear announcement after a delay
+ const timer = setTimeout(() => setAnnouncement(''), 3000)
+ return () => clearTimeout(timer)
+ }
+ }, [selectedCount, entityName])
+
+ const handleClearSelection = () => {
+ table.resetRowSelection()
+ }
+
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ const buttons = toolbarRef.current?.querySelectorAll('button')
+ if (!buttons) return
+
+ const currentIndex = Array.from(buttons).findIndex(
+ (button) => button === document.activeElement
+ )
+
+ switch (event.key) {
+ case 'ArrowRight': {
+ event.preventDefault()
+ const nextIndex = (currentIndex + 1) % buttons.length
+ buttons[nextIndex]?.focus()
+ break
+ }
+ case 'ArrowLeft': {
+ event.preventDefault()
+ const prevIndex =
+ currentIndex === 0 ? buttons.length - 1 : currentIndex - 1
+ buttons[prevIndex]?.focus()
+ break
+ }
+ case 'Home':
+ event.preventDefault()
+ buttons[0]?.focus()
+ break
+ case 'End':
+ event.preventDefault()
+ buttons[buttons.length - 1]?.focus()
+ break
+ case 'Escape': {
+ // Check if the Escape key came from a dropdown trigger or content
+ // We can't check dropdown state because Radix UI closes it before our handler runs
+ const target = event.target as HTMLElement
+ const activeElement = document.activeElement as HTMLElement
+
+ // Check if the event target or currently focused element is a dropdown trigger
+ const isFromDropdownTrigger =
+ target?.getAttribute('data-slot') === 'dropdown-menu-trigger' ||
+ activeElement?.getAttribute('data-slot') ===
+ 'dropdown-menu-trigger' ||
+ target?.closest('[data-slot="dropdown-menu-trigger"]') ||
+ activeElement?.closest('[data-slot="dropdown-menu-trigger"]')
+
+ // Check if the focused element is inside dropdown content (which is portaled)
+ const isFromDropdownContent =
+ activeElement?.closest('[data-slot="dropdown-menu-content"]') ||
+ target?.closest('[data-slot="dropdown-menu-content"]')
+
+ if (isFromDropdownTrigger || isFromDropdownContent) {
+ // Escape was meant for the dropdown - don't clear selection
+ return
+ }
+
+ // Escape was meant for the toolbar - clear selection
+ event.preventDefault()
+ handleClearSelection()
+ break
+ }
+ }
+ }
+
+ if (selectedCount === 0) {
+ return null
+ }
+
+ return (
+ <>
+ {/* Live region for screen reader announcements */}
+
+ {announcement}
+
+
+ 1 ? 's' : ''}`}
+ aria-describedby='bulk-actions-description'
+ tabIndex={-1}
+ onKeyDown={handleKeyDown}
+ className={cn(
+ 'fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-xl',
+ 'transition-all delay-100 duration-300 ease-out hover:scale-105',
+ 'focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none'
+ )}
+ >
+
+
+
+
+
+
+ Clear selection (Escape)
+
+
+
+
+
+
+
+ {selectedCount}
+ {' '}
+
+ {entityName}
+ {selectedCount > 1 ? 's' : ''}
+ {' '}
+ selected
+
+
+
+
+ {children}
+
+
{title}
+ }
+
+ return (
+
+
+
+
+
+
+ column.toggleSorting(false)}>
+
+ Asc
+
+ column.toggleSorting(true)}>
+
+ Desc
+
+ {column.getCanHide() && (
+ <>
+
+ column.toggleVisibility(false)}>
+
+ Hide
+
+
+ )}
+
+
+
+
+
+ {option.icon && (
+
+ )}
+ {option.label}
+ {facets?.get(option.value) && (
+
+ {facets.get(option.value)}
+
+ )}
+
+ )
+ })}
+
+ {selectedValues.size > 0 && (
+ <>
+
+
+ column?.setFilterValue(undefined)}
+ className='justify-center text-center'
+ >
+ Clear filters
+
+
+
+ )}
+
+
+
+
+ )
+}
diff --git a/packages/frontend/src/components/data-table/index.ts b/packages/frontend/src/components/data-table/index.ts
new file mode 100644
index 0000000..bb1245b
--- /dev/null
+++ b/packages/frontend/src/components/data-table/index.ts
@@ -0,0 +1,4 @@
+export { DataTablePagination } from './pagination'
+export { DataTableColumnHeader } from './column-header'
+export { DataTableToolbar } from './toolbar'
+export { DataTableBulkActions } from './bulk-actions'
diff --git a/packages/frontend/src/components/data-table/pagination.tsx b/packages/frontend/src/components/data-table/pagination.tsx
new file mode 100644
index 0000000..5e5991b
--- /dev/null
+++ b/packages/frontend/src/components/data-table/pagination.tsx
@@ -0,0 +1,130 @@
+import {
+ ChevronLeftIcon,
+ ChevronRightIcon,
+ DoubleArrowLeftIcon,
+ DoubleArrowRightIcon,
+} from '@radix-ui/react-icons'
+import { type Table } from '@tanstack/react-table'
+import { cn, getPageNumbers } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select'
+
+type DataTablePaginationProps = {
+ table: Table
+ className?: string
+}
+
+export function DataTablePagination({
+ table,
+ className,
+}: DataTablePaginationProps) {
+ const currentPage = table.getState().pagination.pageIndex + 1
+ const totalPages = table.getPageCount()
+ const pageNumbers = getPageNumbers(currentPage, totalPages)
+
+ return (
+
+
+
+ Page {currentPage} of {totalPages}
+
+
+
+
Rows per page
+
+
+
+
+
+ Page {currentPage} of {totalPages}
+
+
+
+
+
+ {/* Page number buttons */}
+ {pageNumbers.map((pageNumber, index) => (
+
+ {pageNumber === '...' ? (
+ ...
+ ) : (
+
+ )}
+
+ ))}
+
+
+
+
+
+
+
+ {searchKey ? (
+
+ table.getColumn(searchKey)?.setFilterValue(event.target.value)
+ }
+ className='h-8 w-37.5 lg:w-62.5'
+ />
+ ) : (
+
table.setGlobalFilter(event.target.value)}
+ className='h-8 w-37.5 lg:w-62.5'
+ />
+ )}
+
+ {filters.map((filter) => {
+ const column = table.getColumn(filter.columnId)
+ if (!column) return null
+ return (
+
+ )
+ })}
+
+ {isFiltered && (
+
+ )}
+
+
+
+ setOpenMobile(false)}
+ className='grid flex-1 text-start text-sm leading-tight'
+ >
+ Shadcn-Admin
+ Vite + ShadcnUI
+
+
+
+
+
+
+ )
+}
+
+function ToggleSidebar({
+ className,
+ onClick,
+ ...props
+}: React.ComponentProps) {
+ const { toggleSidebar } = useSidebar()
+
+ return (
+
+ )
+}
diff --git a/packages/frontend/src/components/layout/authenticated-layout.tsx b/packages/frontend/src/components/layout/authenticated-layout.tsx
new file mode 100644
index 0000000..003e6e2
--- /dev/null
+++ b/packages/frontend/src/components/layout/authenticated-layout.tsx
@@ -0,0 +1,42 @@
+import { Outlet } from '@tanstack/react-router'
+import { getCookie } from '@/lib/cookies'
+import { cn } from '@/lib/utils'
+import { LayoutProvider } from '@/context/layout-provider'
+import { SearchProvider } from '@/context/search-provider'
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
+import { AppSidebar } from '@/components/layout/app-sidebar'
+import { SkipToMain } from '@/components/skip-to-main'
+
+type AuthenticatedLayoutProps = {
+ children?: React.ReactNode
+}
+
+export function AuthenticatedLayout({ children }: AuthenticatedLayoutProps) {
+ const defaultOpen = getCookie('sidebar_state') !== 'false'
+ return (
+
+
+
+
+
+
+ {children ?? }
+
+
+
+
+ )
+}
diff --git a/packages/frontend/src/components/layout/data/sidebar-data.ts b/packages/frontend/src/components/layout/data/sidebar-data.ts
new file mode 100644
index 0000000..bb9682a
--- /dev/null
+++ b/packages/frontend/src/components/layout/data/sidebar-data.ts
@@ -0,0 +1,161 @@
+import {
+ ClipboardList,
+ Cable,
+ Home,
+ LayoutGrid,
+ PackageSearch,
+ ReceiptText,
+ ScrollText,
+ Settings,
+ ShieldCheck,
+ TicketCheck,
+ Users,
+} from 'lucide-react'
+import { type SidebarData } from '../types'
+
+export const sidebarData: SidebarData = {
+ user: {
+ name: '管理员',
+ email: 'root@local.dev',
+ avatar: '',
+ },
+ teams: [
+ {
+ name: 'Work Admin',
+ logo: LayoutGrid,
+ plan: '商城后台',
+ },
+ ],
+ navGroups: [
+ {
+ title: '工作台',
+ items: [
+ {
+ title: '后台首页',
+ url: '/',
+ icon: Home,
+ },
+ ],
+ },
+ {
+ title: '商城业务',
+ items: [
+ {
+ title: '商品管理',
+ icon: PackageSearch,
+ items: [
+ {
+ title: '分类管理',
+ url: '/catalog/categories',
+ permission: {
+ resource: 'catalog/categories',
+ action: 'read',
+ },
+ },
+ {
+ title: '商品列表',
+ url: '/catalog/products',
+ permission: {
+ resource: 'catalog/products',
+ action: 'read',
+ },
+ },
+ ],
+ },
+ {
+ title: '订单管理',
+ icon: ReceiptText,
+ items: [
+ {
+ title: '订单列表',
+ url: '/orders',
+ permission: {
+ resource: 'orders',
+ action: 'read',
+ },
+ },
+ {
+ title: '查课下单',
+ url: '/course-query',
+ permission: {
+ resource: 'orders',
+ action: 'write',
+ },
+ },
+ {
+ title: '自营下单',
+ url: '/self-owned-order',
+ permission: {
+ resource: 'orders',
+ action: 'write',
+ },
+ },
+ ],
+ },
+ {
+ title: '工单管理',
+ url: '/tickets',
+ icon: TicketCheck,
+ },
+ {
+ title: '日志查询',
+ url: '/order-logs',
+ icon: ClipboardList,
+ permission: {
+ resource: 'order-logs',
+ action: 'read',
+ },
+ },
+ ],
+ },
+ {
+ title: '系统管理',
+ items: [
+ {
+ title: '用户与权限',
+ icon: ShieldCheck,
+ items: [
+ {
+ title: '用户管理',
+ url: '/system/users',
+ icon: Users,
+ permission: {
+ resource: 'admin/users',
+ action: 'read',
+ },
+ },
+ ],
+ },
+ {
+ title: '安全审计',
+ icon: ScrollText,
+ items: [
+ {
+ title: '第三方接口',
+ url: '/system/third-party',
+ icon: Cable,
+ permission: {
+ resource: 'admin/third-party',
+ action: 'read',
+ },
+ },
+ {
+ title: '操作日志',
+ url: '/system/audit-logs',
+ icon: ScrollText,
+ permission: {
+ resource: 'admin/audit-logs',
+ action: 'read',
+ },
+ },
+ ],
+ },
+ {
+ title: '账号安全',
+ url: '/settings/account',
+ icon: Settings,
+ },
+ ],
+ },
+ ],
+}
diff --git a/packages/frontend/src/components/layout/header.tsx b/packages/frontend/src/components/layout/header.tsx
new file mode 100644
index 0000000..4c07798
--- /dev/null
+++ b/packages/frontend/src/components/layout/header.tsx
@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react'
+import { cn } from '@/lib/utils'
+import { Separator } from '@/components/ui/separator'
+import { SidebarTrigger } from '@/components/ui/sidebar'
+
+type HeaderProps = React.HTMLAttributes & {
+ fixed?: boolean
+ ref?: React.Ref
+}
+
+export function Header({ className, fixed, children, ...props }: HeaderProps) {
+ const [offset, setOffset] = useState(0)
+
+ useEffect(() => {
+ const onScroll = () => {
+ setOffset(document.body.scrollTop || document.documentElement.scrollTop)
+ }
+
+ // Add scroll listener to the body
+ document.addEventListener('scroll', onScroll, { passive: true })
+
+ // Clean up the event listener on unmount
+ return () => document.removeEventListener('scroll', onScroll)
+ }, [])
+
+ return (
+
+ )
+}
diff --git a/packages/frontend/src/components/layout/main.tsx b/packages/frontend/src/components/layout/main.tsx
new file mode 100644
index 0000000..b3d6d0a
--- /dev/null
+++ b/packages/frontend/src/components/layout/main.tsx
@@ -0,0 +1,27 @@
+import { cn } from '@/lib/utils'
+
+type MainProps = React.HTMLAttributes & {
+ fixed?: boolean
+ fluid?: boolean
+ ref?: React.Ref
+}
+
+export function Main({ fixed, className, fluid, ...props }: MainProps) {
+ return (
+
+ )
+}
diff --git a/packages/frontend/src/components/layout/nav-group.tsx b/packages/frontend/src/components/layout/nav-group.tsx
new file mode 100644
index 0000000..3a0b73c
--- /dev/null
+++ b/packages/frontend/src/components/layout/nav-group.tsx
@@ -0,0 +1,185 @@
+import { type ReactNode } from 'react'
+import { Link, useLocation } from '@tanstack/react-router'
+import { ChevronRight } from 'lucide-react'
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+import {
+ SidebarGroup,
+ SidebarGroupLabel,
+ SidebarMenu,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ SidebarMenuSub,
+ SidebarMenuSubButton,
+ SidebarMenuSubItem,
+ useSidebar,
+} from '@/components/ui/sidebar'
+import { Badge } from '../ui/badge'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+import {
+ type NavCollapsible,
+ type NavItem,
+ type NavLink,
+ type NavGroup as NavGroupProps,
+} from './types'
+
+export function NavGroup({ title, items }: NavGroupProps) {
+ const { state, isMobile } = useSidebar()
+ const href = useLocation({ select: (location) => location.href })
+ return (
+
+ {title}
+
+ {items.map((item) => {
+ const key = `${item.title}-${item.url}`
+
+ if (!item.items)
+ return
+
+ if (state === 'collapsed' && !isMobile)
+ return (
+
+ )
+
+ return
+ })}
+
+
+ )
+}
+
+function NavBadge({ children }: { children: ReactNode }) {
+ return {children}
+}
+
+function SidebarMenuLink({ item, href }: { item: NavLink; href: string }) {
+ const { setOpenMobile } = useSidebar()
+ return (
+
+
+ setOpenMobile(false)}>
+ {item.icon && }
+ {item.title}
+ {item.badge && {item.badge}}
+
+
+
+ )
+}
+
+function SidebarMenuCollapsible({
+ item,
+ href,
+}: {
+ item: NavCollapsible
+ href: string
+}) {
+ const { setOpenMobile } = useSidebar()
+ return (
+
+
+
+
+ {item.icon && }
+ {item.title}
+ {item.badge && {item.badge}}
+
+
+
+
+
+ {item.items.map((subItem) => (
+
+
+ setOpenMobile(false)}>
+ {subItem.icon && }
+ {subItem.title}
+ {subItem.badge && {subItem.badge}}
+
+
+
+ ))}
+
+
+
+
+ )
+}
+
+function SidebarMenuCollapsedDropdown({
+ item,
+ href,
+}: {
+ item: NavCollapsible
+ href: string
+}) {
+ return (
+
+
+
+
+ {item.icon && }
+ {item.title}
+ {item.badge && {item.badge}}
+
+
+
+
+
+ {item.title} {item.badge ? `(${item.badge})` : ''}
+
+
+ {item.items.map((sub) => (
+
+
+ {sub.icon && }
+ {sub.title}
+ {sub.badge && (
+ {sub.badge}
+ )}
+
+
+ ))}
+
+
+
+ )
+}
+
+function checkIsActive(href: string, item: NavItem, mainNav = false) {
+ return (
+ href === item.url || // /endpint?search=param
+ href.split('?')[0] === item.url || // endpoint
+ !!item?.items?.filter((i) => i.url === href).length || // if child nav is active
+ (mainNav &&
+ href.split('/')[1] !== '' &&
+ href.split('/')[1] === item?.url?.split('/')[1])
+ )
+}
diff --git a/packages/frontend/src/components/layout/nav-user.tsx b/packages/frontend/src/components/layout/nav-user.tsx
new file mode 100644
index 0000000..46877ca
--- /dev/null
+++ b/packages/frontend/src/components/layout/nav-user.tsx
@@ -0,0 +1,119 @@
+import { Link } from '@tanstack/react-router'
+import { BadgeCheck, ChevronsUpDown, LogOut, Users } from 'lucide-react'
+import useDialogState from '@/hooks/use-dialog-state'
+import { hasPermission } from '@/lib/permissions'
+import { useAuthStore } from '@/stores/auth-store'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+ SidebarMenu,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ useSidebar,
+} from '@/components/ui/sidebar'
+import { SignOutDialog } from '@/components/sign-out-dialog'
+
+type NavUserProps = {
+ user: {
+ name: string
+ email: string
+ avatar: string
+ }
+}
+
+export function NavUser({ user }: NavUserProps) {
+ const { isMobile } = useSidebar()
+ const [open, setOpen] = useDialogState()
+ const authUser = useAuthStore((state) => state.auth.user)
+ const displayUser = {
+ name: authUser?.name || user.name,
+ email: authUser?.email || user.email,
+ avatar: authUser?.avatar || user.avatar,
+ roleName: authUser?.roleName || '管理员',
+ }
+ const fallback = displayUser.name.slice(0, 1).toUpperCase() || '管'
+ const canReadUsers = hasPermission(authUser?.permissions, 'admin/users')
+
+ return (
+ <>
+
+
+
+
+
+
+
+ {fallback}
+
+
+ {displayUser.name}
+ {displayUser.email}
+
+
+
+
+
+
+
+
+
+ {fallback}
+
+
+
+ {displayUser.name}
+
+ {displayUser.email}
+
+
+ {activeTeam.name}
+ {activeTeam.plan}
+
+
+
+
+ )
+}
diff --git a/packages/frontend/src/components/layout/top-nav.tsx b/packages/frontend/src/components/layout/top-nav.tsx
new file mode 100644
index 0000000..9059fec
--- /dev/null
+++ b/packages/frontend/src/components/layout/top-nav.tsx
@@ -0,0 +1,70 @@
+import { Link } from '@tanstack/react-router'
+import { Menu } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+type TopNavProps = React.HTMLAttributes & {
+ links: {
+ title: string
+ href: string
+ isActive: boolean
+ disabled?: boolean
+ }[]
+}
+
+export function TopNav({ className, links, ...props }: TopNavProps) {
+ return (
+ <>
+
+
+
+
+
+ {links.map(({ title, href, isActive, disabled }) => (
+
+
+ {title}
+
+
+ ))}
+
+
+
+
+
+ )
+}
diff --git a/packages/frontend/src/components/layout/types.ts b/packages/frontend/src/components/layout/types.ts
new file mode 100644
index 0000000..412bcc3
--- /dev/null
+++ b/packages/frontend/src/components/layout/types.ts
@@ -0,0 +1,48 @@
+import { type LinkProps } from '@tanstack/react-router'
+
+type User = {
+ name: string
+ email: string
+ avatar: string
+}
+
+type Team = {
+ name: string
+ logo: React.ElementType
+ plan: string
+}
+
+type BaseNavItem = {
+ title: string
+ badge?: string
+ icon?: React.ElementType
+ permission?: {
+ resource: string
+ action?: string
+ }
+}
+
+type NavLink = BaseNavItem & {
+ url: LinkProps['to'] | (string & {})
+ items?: never
+}
+
+type NavCollapsible = BaseNavItem & {
+ items: (BaseNavItem & { url: LinkProps['to'] | (string & {}) })[]
+ url?: never
+}
+
+type NavItem = NavCollapsible | NavLink
+
+type NavGroup = {
+ title: string
+ items: NavItem[]
+}
+
+type SidebarData = {
+ user: User
+ teams: Team[]
+ navGroups: NavGroup[]
+}
+
+export type { SidebarData, NavGroup, NavItem, NavCollapsible, NavLink }
diff --git a/packages/frontend/src/components/learn-more.tsx b/packages/frontend/src/components/learn-more.tsx
new file mode 100644
index 0000000..54e2785
--- /dev/null
+++ b/packages/frontend/src/components/learn-more.tsx
@@ -0,0 +1,44 @@
+import { type Root, type Content, type Trigger } from '@radix-ui/react-popover'
+import { CircleQuestionMark } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@/components/ui/popover'
+
+type LearnMoreProps = React.ComponentProps & {
+ contentProps?: React.ComponentProps
+ triggerProps?: React.ComponentProps
+}
+
+export function LearnMore({
+ children,
+ contentProps,
+ triggerProps,
+ ...props
+}: LearnMoreProps) {
+ return (
+
+
+
+
+
+ {children}
+
+
+ )
+}
diff --git a/packages/frontend/src/components/long-text.tsx b/packages/frontend/src/components/long-text.tsx
new file mode 100644
index 0000000..74bf47d
--- /dev/null
+++ b/packages/frontend/src/components/long-text.tsx
@@ -0,0 +1,84 @@
+import { useRef, useState } from 'react'
+import { cn } from '@/lib/utils'
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@/components/ui/popover'
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+type LongTextProps = {
+ children: React.ReactNode
+ className?: string
+ contentClassName?: string
+}
+
+export function LongText({
+ children,
+ className = '',
+ contentClassName = '',
+}: LongTextProps) {
+ const ref = useRef(null)
+ const [isOverflown, setIsOverflown] = useState(false)
+
+ // Use ref callback to check overflow when element is mounted
+ const refCallback = (node: HTMLDivElement | null) => {
+ ref.current = node
+ if (node && checkOverflow(node)) {
+ queueMicrotask(() => setIsOverflown(true))
+ }
+ }
+
+ if (!isOverflown)
+ return (
+
+ {children}
+
+ )
+
+ return (
+ <>
+
+
+
+
+
+ {children}
+
+
+
+ {children}
+
+
+
+
+
+
+
+ {children}
+
+
+
+ {children}
+
+
+
+
+
+
+ )
+}
diff --git a/packages/frontend/src/components/profile-dropdown.tsx b/packages/frontend/src/components/profile-dropdown.tsx
new file mode 100644
index 0000000..a894680
--- /dev/null
+++ b/packages/frontend/src/components/profile-dropdown.tsx
@@ -0,0 +1,75 @@
+import { Link } from '@tanstack/react-router'
+import { BadgeCheck, LogOut, Users } from 'lucide-react'
+import useDialogState from '@/hooks/use-dialog-state'
+import { hasPermission } from '@/lib/permissions'
+import { useAuthStore } from '@/stores/auth-store'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { SignOutDialog } from '@/components/sign-out-dialog'
+
+export function ProfileDropdown() {
+ const [open, setOpen] = useDialogState()
+ const user = useAuthStore((state) => state.auth.user)
+ const name = user?.name || '管理员'
+ const email = user?.email || 'root@local.dev'
+ const fallback = name.slice(0, 1).toUpperCase() || '管'
+ const canReadUsers = hasPermission(user?.permissions, 'admin/users')
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 账号安全
+
+
+ {canReadUsers && (
+
+
+
+ 用户管理
+
+
+ )}
+
+
+ setOpen(true)}>
+
+ 退出登录
+
+
+
+
+
+
+ )
+}
diff --git a/packages/frontend/src/components/search.tsx b/packages/frontend/src/components/search.tsx
new file mode 100644
index 0000000..a152edb
--- /dev/null
+++ b/packages/frontend/src/components/search.tsx
@@ -0,0 +1,34 @@
+import { SearchIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useSearch } from '@/context/search-provider'
+import { Button } from './ui/button'
+
+export function Search({
+ className = '',
+ placeholder = 'Search',
+ ...props
+}: React.ComponentProps<'button'> & { placeholder?: string }) {
+ const { setOpen } = useSearch()
+ return (
+
+ )
+}
diff --git a/packages/frontend/src/components/select-dropdown.tsx b/packages/frontend/src/components/select-dropdown.tsx
new file mode 100644
index 0000000..2bba569
--- /dev/null
+++ b/packages/frontend/src/components/select-dropdown.tsx
@@ -0,0 +1,62 @@
+import { Loader } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { FormControl } from '@/components/ui/form'
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select'
+
+type SelectDropdownProps = {
+ onValueChange?: (value: string) => void
+ defaultValue: string | undefined
+ placeholder?: string
+ isPending?: boolean
+ items: { label: string; value: string }[] | undefined
+ disabled?: boolean
+ className?: string
+ isControlled?: boolean
+}
+
+export function SelectDropdown({
+ defaultValue,
+ onValueChange,
+ isPending,
+ items,
+ placeholder,
+ disabled,
+ className = '',
+ isControlled = false,
+}: SelectDropdownProps) {
+ const defaultState = isControlled
+ ? { value: defaultValue, onValueChange }
+ : { defaultValue, onValueChange }
+ return (
+
+ )
+}
diff --git a/packages/frontend/src/components/sign-out-dialog.test.tsx b/packages/frontend/src/components/sign-out-dialog.test.tsx
new file mode 100644
index 0000000..c541568
--- /dev/null
+++ b/packages/frontend/src/components/sign-out-dialog.test.tsx
@@ -0,0 +1,56 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { render } from 'vitest-browser-react'
+import { userEvent } from 'vitest/browser'
+import { SignOutDialog } from './sign-out-dialog'
+
+const navigate = vi.fn()
+const reset = vi.fn()
+
+const MOCK_HREF = 'https://app.test/dashboard?tab=1'
+
+vi.mock('@/stores/auth-store', () => ({
+ useAuthStore: () => ({
+ auth: { reset },
+ }),
+}))
+
+vi.mock('@tanstack/react-router', async (importOriginal) => {
+ const actual = await importOriginal()
+ return {
+ ...actual,
+ useNavigate: () => navigate,
+ useLocation: () => ({ href: MOCK_HREF }),
+ }
+})
+
+describe('SignOutDialog', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ it('calls auth.reset and navigates to sign-in with current location as redirect', async () => {
+ const { getByRole } = await render(
+
+ )
+
+ await userEvent.click(getByRole('button', { name: /^Sign out$/i }))
+
+ expect(reset).toHaveBeenCalledOnce()
+ expect(navigate).toHaveBeenCalledWith({
+ to: '/sign-in',
+ search: { redirect: MOCK_HREF },
+ replace: true,
+ })
+ })
+
+ it('does not call reset or navigate when Cancel is clicked', async () => {
+ const { getByRole } = await render(
+
+ )
+
+ await userEvent.click(getByRole('button', { name: /^Cancel$/i }))
+
+ expect(reset).not.toHaveBeenCalled()
+ expect(navigate).not.toHaveBeenCalled()
+ })
+})
diff --git a/packages/frontend/src/components/sign-out-dialog.tsx b/packages/frontend/src/components/sign-out-dialog.tsx
new file mode 100644
index 0000000..46370d0
--- /dev/null
+++ b/packages/frontend/src/components/sign-out-dialog.tsx
@@ -0,0 +1,39 @@
+import { useNavigate, useLocation } from '@tanstack/react-router'
+import { useAuthStore } from '@/stores/auth-store'
+import { ConfirmDialog } from '@/components/confirm-dialog'
+
+interface SignOutDialogProps {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+}
+
+export function SignOutDialog({ open, onOpenChange }: SignOutDialogProps) {
+ const navigate = useNavigate()
+ const location = useLocation()
+ const { auth } = useAuthStore()
+
+ const handleSignOut = () => {
+ auth.reset()
+ // Preserve current location for redirect after sign-in
+ const currentPath = location.href
+ navigate({
+ to: '/sign-in',
+ search: { redirect: currentPath },
+ replace: true,
+ })
+ }
+
+ return (
+
+ )
+}
diff --git a/packages/frontend/src/components/skip-to-main.tsx b/packages/frontend/src/components/skip-to-main.tsx
new file mode 100644
index 0000000..7ab6440
--- /dev/null
+++ b/packages/frontend/src/components/skip-to-main.tsx
@@ -0,0 +1,10 @@
+export function SkipToMain() {
+ return (
+
+ Skip to Main
+
+ )
+}
diff --git a/packages/frontend/src/components/theme-switch.tsx b/packages/frontend/src/components/theme-switch.tsx
new file mode 100644
index 0000000..16137bc
--- /dev/null
+++ b/packages/frontend/src/components/theme-switch.tsx
@@ -0,0 +1,58 @@
+import { useEffect } from 'react'
+import { Check, Moon, Sun } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useTheme } from '@/context/theme-provider'
+import { Button } from '@/components/ui/button'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+export function ThemeSwitch() {
+ const { theme, setTheme } = useTheme()
+
+ /* Update theme-color meta tag
+ * when theme is updated */
+ useEffect(() => {
+ const themeColor = theme === 'dark' ? '#020817' : '#fff'
+ const metaThemeColor = document.querySelector("meta[name='theme-color']")
+ if (metaThemeColor) metaThemeColor.setAttribute('content', themeColor)
+ }, [theme])
+
+ return (
+
+
+
+
+
+ setTheme('light')}>
+ Light{' '}
+
+
+ setTheme('dark')}>
+ Dark
+
+
+ setTheme('system')}>
+ System
+
+
+
+
+ )
+}
diff --git a/packages/frontend/src/components/ui/alert-dialog.tsx b/packages/frontend/src/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..184fa90
--- /dev/null
+++ b/packages/frontend/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,154 @@
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+function AlertDialog({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function AlertDialogTrigger({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogPortal({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogOverlay({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+ )
+}
+
+function AlertDialogHeader({
+ className,
+ ...props
+}: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function AlertDialogFooter({
+ className,
+ ...props
+}: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function AlertDialogTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogDescription({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogAction({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AlertDialogCancel({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+export {
+ AlertDialog,
+ AlertDialogPortal,
+ AlertDialogOverlay,
+ AlertDialogTrigger,
+ AlertDialogContent,
+ AlertDialogHeader,
+ AlertDialogFooter,
+ AlertDialogTitle,
+ AlertDialogDescription,
+ AlertDialogAction,
+ AlertDialogCancel,
+}
diff --git a/packages/frontend/src/components/ui/alert.tsx b/packages/frontend/src/components/ui/alert.tsx
new file mode 100644
index 0000000..debcdf6
--- /dev/null
+++ b/packages/frontend/src/components/ui/alert.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+ 'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+ {
+ variants: {
+ variant: {
+ default: 'bg-card text-card-foreground',
+ destructive:
+ 'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ },
+ }
+)
+
+function Alert({
+ className,
+ variant,
+ ...props
+}: React.ComponentProps<'div'> & VariantProps) {
+ return (
+
+ )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function AlertDescription({
+ className,
+ ...props
+}: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/packages/frontend/src/components/ui/avatar.tsx b/packages/frontend/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..b2a343e
--- /dev/null
+++ b/packages/frontend/src/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import { cn } from '@/lib/utils'
+
+function Avatar({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AvatarImage({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function AvatarFallback({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/packages/frontend/src/components/ui/badge.tsx b/packages/frontend/src/components/ui/badge.tsx
new file mode 100644
index 0000000..26769c3
--- /dev/null
+++ b/packages/frontend/src/components/ui/badge.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+ 'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+ {
+ variants: {
+ variant: {
+ default:
+ 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+ secondary:
+ 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+ destructive:
+ 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+ outline:
+ 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ },
+ }
+)
+
+function Badge({
+ className,
+ variant,
+ asChild = false,
+ ...props
+}: React.ComponentProps<'span'> &
+ VariantProps & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : 'span'
+
+ return (
+
+ )
+}
+
+export { Badge, badgeVariants }
diff --git a/packages/frontend/src/components/ui/button.tsx b/packages/frontend/src/components/ui/button.tsx
new file mode 100644
index 0000000..27b86ed
--- /dev/null
+++ b/packages/frontend/src/components/ui/button.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+ {
+ variants: {
+ variant: {
+ default:
+ 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+ destructive:
+ 'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+ outline:
+ 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+ secondary:
+ 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+ ghost:
+ 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+ link: 'text-primary underline-offset-4 hover:underline',
+ },
+ size: {
+ default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+ sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+ lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+ icon: 'size-9',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ },
+ }
+)
+
+function Button({
+ className,
+ variant,
+ size,
+ asChild = false,
+ ...props
+}: React.ComponentProps<'button'> &
+ VariantProps & {
+ asChild?: boolean
+ }) {
+ const Comp = asChild ? Slot : 'button'
+
+ return (
+
+ )
+}
+
+export { Button, buttonVariants }
diff --git a/packages/frontend/src/components/ui/calendar.tsx b/packages/frontend/src/components/ui/calendar.tsx
new file mode 100644
index 0000000..7b1c90a
--- /dev/null
+++ b/packages/frontend/src/components/ui/calendar.tsx
@@ -0,0 +1,210 @@
+import * as React from 'react'
+import {
+ ChevronDownIcon,
+ ChevronLeftIcon,
+ ChevronRightIcon,
+} from 'lucide-react'
+import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'
+import { cn } from '@/lib/utils'
+import { Button, buttonVariants } from '@/components/ui/button'
+
+function Calendar({
+ className,
+ classNames,
+ showOutsideDays = true,
+ captionLayout = 'label',
+ buttonVariant = 'ghost',
+ formatters,
+ components,
+ ...props
+}: React.ComponentProps & {
+ buttonVariant?: React.ComponentProps['variant']
+}) {
+ const defaultClassNames = getDefaultClassNames()
+
+ return (
+ svg]:rotate-180`,
+ String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+ className
+ )}
+ captionLayout={captionLayout}
+ formatters={{
+ formatMonthDropdown: (date) =>
+ date.toLocaleString('default', { month: 'short' }),
+ ...formatters,
+ }}
+ classNames={{
+ root: cn('w-fit', defaultClassNames.root),
+ months: cn(
+ 'relative flex flex-col gap-4 md:flex-row',
+ defaultClassNames.months
+ ),
+ month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
+ nav: cn(
+ 'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',
+ defaultClassNames.nav
+ ),
+ button_previous: cn(
+ buttonVariants({ variant: buttonVariant }),
+ 'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
+ defaultClassNames.button_previous
+ ),
+ button_next: cn(
+ buttonVariants({ variant: buttonVariant }),
+ 'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
+ defaultClassNames.button_next
+ ),
+ month_caption: cn(
+ 'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',
+ defaultClassNames.month_caption
+ ),
+ dropdowns: cn(
+ 'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
+ defaultClassNames.dropdowns
+ ),
+ dropdown_root: cn(
+ 'relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50',
+ defaultClassNames.dropdown_root
+ ),
+ dropdown: cn(
+ 'absolute inset-0 bg-popover opacity-0',
+ defaultClassNames.dropdown
+ ),
+ caption_label: cn(
+ 'font-medium select-none',
+ captionLayout === 'label'
+ ? 'text-sm'
+ : 'flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
+ defaultClassNames.caption_label
+ ),
+ table: 'w-full border-collapse',
+ weekdays: cn('flex', defaultClassNames.weekdays),
+ weekday: cn(
+ 'flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none',
+ defaultClassNames.weekday
+ ),
+ week: cn('mt-2 flex w-full', defaultClassNames.week),
+ week_number_header: cn(
+ 'w-(--cell-size) select-none',
+ defaultClassNames.week_number_header
+ ),
+ week_number: cn(
+ 'text-[0.8rem] text-muted-foreground select-none',
+ defaultClassNames.week_number
+ ),
+ day: cn(
+ 'group/day relative aspect-square h-full w-full p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md',
+ defaultClassNames.day
+ ),
+ range_start: cn(
+ 'rounded-l-md bg-accent',
+ defaultClassNames.range_start
+ ),
+ range_middle: cn('rounded-none', defaultClassNames.range_middle),
+ range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
+ today: cn(
+ 'rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none',
+ defaultClassNames.today
+ ),
+ outside: cn(
+ 'text-muted-foreground aria-selected:text-muted-foreground',
+ defaultClassNames.outside
+ ),
+ disabled: cn(
+ 'text-muted-foreground opacity-50',
+ defaultClassNames.disabled
+ ),
+ hidden: cn('invisible', defaultClassNames.hidden),
+ ...classNames,
+ }}
+ components={{
+ Root: ({ className, rootRef, ...props }) => {
+ return (
+
+ )
+ },
+ Chevron: ({ className, orientation, ...props }) => {
+ if (orientation === 'left') {
+ return (
+
+ )
+ }
+
+ if (orientation === 'right') {
+ return (
+
+ )
+ }
+
+ return (
+
+ )
+ },
+ DayButton: CalendarDayButton,
+ WeekNumber: ({ children, ...props }) => {
+ return (
+
+
+ {children}
+
+ |
+ )
+ },
+ ...components,
+ }}
+ {...props}
+ />
+ )
+}
+
+function CalendarDayButton({
+ className,
+ day,
+ modifiers,
+ ...props
+}: React.ComponentProps) {
+ const defaultClassNames = getDefaultClassNames()
+
+ const ref = React.useRef(null)
+ React.useEffect(() => {
+ if (modifiers.focused) ref.current?.focus()
+ }, [modifiers.focused])
+
+ return (
+