{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dashboard-01", "type": "registry:block", "title": "Dashboard with Revenue and Customers", "description": "Dashboard with Revenue and Customers. Complete application dashboards combining navigation, metrics, charts, and customer data.", "author": "Ephraim Duncan", "registryDependencies": [], "dependencies": [ "@base-ui/react@1.9.0", "class-variance-authority@0.7.1", "cn@0.2.6", "date-fns@4.4.0", "lucide-react@0.577.0", "recharts@3.8.0" ], "files": [ { "path": "content/components/dashboard/dashboard-01/app/page.tsx", "type": "registry:component", "target": "@components/uiblocks/dashboard-01/app/page.tsx", "content": "'use client';\n\nimport { useState } from 'react';\nimport { SidebarInset, SidebarProvider } from \"../shared/components/ui/sidebar\";\nimport { cn } from \"../shared/lib/utils\";\nimport { CustomersTable } from \"../customers-table\";\nimport { DashboardCharts } from \"../dashboard-charts\";\nimport { DashboardHeader } from \"../dashboard-header\";\nimport { DashboardSidebar } from \"../dashboard-sidebar\";\n\nexport default function Page() {\n const [period, setPeriod] = useState<'day' | 'week' | 'month' | 'year'>(\n 'week'\n );\n const [range, setRange] = useState({ from: '2025-11-10', to: '2025-11-16' });\n\n const bindTheme = (node: HTMLElement | null) => {\n if (!node) {\n return;\n }\n const onKey = (event: KeyboardEvent) => {\n const target = event.target as HTMLElement;\n if (\n event.key === 'D' &&\n event.shiftKey &&\n !target.isContentEditable &&\n !['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName)\n ) {\n document.documentElement.classList.toggle('dark');\n }\n };\n window.addEventListener('keydown', onKey);\n return () => window.removeEventListener('keydown', onKey);\n };\n\n return (\n \n \n Skip to dashboard\n \n \n \n \n
\n
\n {metrics.map((metric) => (\n \n
\n {metric.label}\n
\n
\n \n {metric.value}\n \n \n {metric.change}\n \n
\n
\n ))}\n \n \n \n \n \n \n );\n}\n\nconst metrics = [\n {\n label: 'New customers',\n value: '1,284',\n change: '+8.2%',\n changeClass: 'text-green-600 dark:text-green-400',\n },\n {\n label: 'Success rate',\n value: '97.4%',\n change: '+0.6%',\n changeClass: 'text-green-600 dark:text-green-400',\n },\n {\n label: 'Failure rate',\n value: '2.6%',\n change: '-0.6%',\n changeClass: 'text-red-600 dark:text-red-400',\n },\n {\n label: 'Refunds',\n value: '38',\n change: '0.0%',\n changeClass: 'text-muted-foreground',\n },\n];\n" }, { "path": "content/components/dashboard/dashboard-01/customers-table.tsx", "type": "registry:component", "target": "@components/uiblocks/dashboard-01/customers-table.tsx", "content": "'use client';\n\nimport {\n DownloadIcon,\n EllipsisIcon,\n EyeIcon,\n FunnelIcon,\n MailIcon,\n SearchIcon,\n XIcon,\n} from 'lucide-react';\nimport { useState } from 'react';\nimport { Button } from \"./shared/components/ui/button\";\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"./shared/components/ui/dialog\";\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"./shared/components/ui/dropdown-menu\";\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n InputGroupText,\n} from \"./shared/components/ui/input-group\";\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"./shared/components/ui/table\";\nimport { cn } from \"./shared/lib/utils\";\n\nconst easeOut = 'ease-[cubic-bezier(0.23,1,0.32,1)]';\nconst press = `${easeOut} transition-[scale,background-color] duration-150 active:scale-[0.96] motion-reduce:active:scale-100`;\nconst swap = `${easeOut} fade-in zoom-in-95 motion-reduce:zoom-in-100 animate-in duration-150`;\n\nexport function CustomersTable() {\n const [query, setQuery] = useState('');\n const [selected, setSelected] = useState>({\n Plan: [],\n Status: [],\n });\n const [page, setPage] = useState(1);\n const [customer, setCustomer] = useState(null);\n\n const bindSearch = (node: HTMLInputElement | null) => {\n if (!node) {\n return;\n }\n\n const focusSearch = (event: KeyboardEvent) => {\n if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {\n event.preventDefault();\n node.focus();\n }\n };\n window.addEventListener('keydown', focusSearch);\n return () => window.removeEventListener('keydown', focusSearch);\n };\n\n const term = query.trim().toLocaleLowerCase();\n const filtered = customers.filter(\n (item) =>\n (!term ||\n item.name.toLocaleLowerCase().includes(term) ||\n item.email.toLocaleLowerCase().includes(term)) &&\n (!selected.Plan.length || selected.Plan.includes(item.plan)) &&\n (!selected.Status.length || selected.Status.includes(item.status))\n );\n\n const pageCount = Math.max(1, Math.ceil(filtered.length / 9));\n const visibleCustomers = filtered.slice((page - 1) * 9, page * 9);\n const filterCount = selected.Plan.length + selected.Status.length;\n const toggle = (facet: Facet, option: string) => {\n setSelected((current) => ({\n ...current,\n [facet]: current[facet].includes(option)\n ? current[facet].filter((item) => item !== option)\n : [...current[facet], option],\n }));\n setPage(1);\n };\n const clear = (facet?: Facet) => {\n setSelected((current) =>\n facet ? { ...current, [facet]: [] } : { Plan: [], Status: [] }\n );\n setPage(1);\n };\n\n const exportCustomers = () => {\n const csv = [\n ['Customer', 'Email', 'Signed up', 'Plan', 'Status'],\n ...filtered.map((item) => [\n item.name,\n item.email,\n item.signedUp,\n item.plan,\n item.status,\n ]),\n ]\n .map((row) =>\n row.map((value) => `\"${value.replaceAll('\"', '\"\"')}\"`).join(',')\n )\n .join('\\n');\n const url = URL.createObjectURL(\n new Blob([csv], { type: 'text/csv;charset=utf-8' })\n );\n const link = document.createElement('a');\n link.href = url;\n link.download = 'customers.csv';\n link.click();\n URL.revokeObjectURL(url);\n };\n\n return (\n
\n
\n
\n

New customers

\n

\n Recent signups across all plans\n

\n
\n
\n {filterCount > 0 && (\n \n {facets.map(\n (facet) =>\n selected[facet].length > 0 && (\n \n \n \n }\n >\n \n {facet}:\n \n \n {selected[facet].join(', ')}\n \n \n \n \n {options[facet].map((option) => (\n toggle(facet, option)}\n >\n {option}\n \n ))}\n \n \n \n clear(facet)}\n type=\"button\"\n >\n \n \n
\n )\n )}\n clear()}\n size=\"sm\"\n type=\"button\"\n variant=\"ghost\"\n >\n Clear all\n \n \n )}\n \n \n \n \n \n \n \n {\n setQuery(event.target.value);\n setPage(1);\n }}\n placeholder=\"Search customers\"\n ref={bindSearch}\n type=\"search\"\n value={query}\n />\n \n \n ⌘K\n \n \n \n
\n \n \n }\n >\n \n Filter{filterCount ? ` (${filterCount})` : ''}\n \n \n {facets.map((facet, index) => (\n \n {index > 0 && }\n {facet}\n {options[facet].map((option) => (\n toggle(facet, option)}\n >\n {option}\n \n ))}\n \n ))}\n {filterCount > 0 && (\n <>\n \n \n clear()}>\n Clear filters\n \n \n \n )}\n \n \n \n \n Export\n \n
\n
\n \n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n Customer\n \n \n Email\n \n \n Signed up\n \n \n Plan\n \n \n Status\n \n \n Actions\n \n \n \n \n {visibleCustomers.map((item) => (\n \n \n {item.name}\n \n \n {item.email}\n \n \n {item.signedUp}\n \n {item.plan}\n \n \n \n \n \n \n }\n >\n \n \n \n \n \n
\n {item.name}\n
\n
\n {item.email}\n
\n \n \n \n \n setCustomer(item)}\n >\n \n View customer\n \n \n \n Send email\n \n }\n />\n \n \n \n \n \n ))}\n {!visibleCustomers.length && (\n \n \n No customers match your search and filters.\n \n \n )}\n \n
\n
\n\n
\n

\n {filtered.length\n ? `${(page - 1) * 9 + 1}–${Math.min(page * 9, filtered.length)} of ${filtered.length} customers`\n : '0 customers'}\n

\n \n
\n\n {\n if (!open) {\n setCustomer(null);\n }\n }}\n open={customer !== null}\n >\n \n {customer && (\n <>\n \n {customer.name}\n \n Customer details and signup information.\n \n \n
\n
Email
\n
{customer.email}
\n
Signed up
\n
{customer.signedUp}
\n
Plan
\n
{customer.plan}
\n
Status
\n
\n \n
\n
\n \n \n \n Contact customer\n \n }\n />\n \n \n )}\n \n \n
\n );\n}\n\nfunction StatusDot({ status }: { readonly status: Status }) {\n return (\n \n \n {status}\n \n );\n}\n\ntype Plan = 'Starter' | 'Pro' | 'Team';\ntype Status = 'Active' | 'Pending' | 'Under review' | 'Rejected' | 'Inactive';\n\ntype Customer = {\n readonly name: string;\n readonly email: string;\n readonly signedUp: string;\n readonly plan: Plan;\n readonly status: Status;\n};\n\nconst customers: readonly Customer[] = [\n {\n name: 'Priya Raman',\n email: 'priya.raman@lumenlabs.io',\n signedUp: 'Today, 9:12 AM',\n plan: 'Pro',\n status: 'Active',\n },\n {\n name: 'Daniel Okafor',\n email: 'd.okafor@fastmail.com',\n signedUp: 'Today, 8:40 AM',\n plan: 'Starter',\n status: 'Pending',\n },\n {\n name: 'Mei Lin Chen',\n email: 'meilin@outlook.com',\n signedUp: 'Yesterday, 6:05 PM',\n plan: 'Team',\n status: 'Active',\n },\n {\n name: 'Tomás Herrera',\n email: 'tomas.h@gmail.com',\n signedUp: 'Yesterday, 2:31 PM',\n plan: 'Pro',\n status: 'Under review',\n },\n {\n name: 'Aisha Bello',\n email: 'aisha.bello@proton.me',\n signedUp: '11 Nov, 4:18 PM',\n plan: 'Starter',\n status: 'Rejected',\n },\n {\n name: 'Lucas Moreau',\n email: 'l.moreau@yahoo.fr',\n signedUp: '11 Nov, 11:02 AM',\n plan: 'Team',\n status: 'Active',\n },\n {\n name: 'Hannah Weiss',\n email: 'hannah.w@gmail.com',\n signedUp: '10 Nov, 7:44 PM',\n plan: 'Pro',\n status: 'Pending',\n },\n {\n name: 'Kenji Sato',\n email: 'kenji.sato@icloud.com',\n signedUp: '10 Nov, 3:15 PM',\n plan: 'Starter',\n status: 'Inactive',\n },\n {\n name: 'Olivia Brooks',\n email: 'olivia@brooks.studio',\n signedUp: '9 Nov, 10:27 AM',\n plan: 'Team',\n status: 'Active',\n },\n {\n name: 'Sofia Alvarez',\n email: 'sofia@northstar.co',\n signedUp: '9 Nov, 8:16 AM',\n plan: 'Pro',\n status: 'Active',\n },\n {\n name: 'Marcus Johnson',\n email: 'marcus.j@hey.com',\n signedUp: '8 Nov, 5:42 PM',\n plan: 'Team',\n status: 'Under review',\n },\n {\n name: 'Elena Petrova',\n email: 'elena@kinetic.design',\n signedUp: '8 Nov, 1:20 PM',\n plan: 'Starter',\n status: 'Pending',\n },\n {\n name: 'Noah Williams',\n email: 'noah@fieldnotes.app',\n signedUp: '7 Nov, 4:55 PM',\n plan: 'Pro',\n status: 'Active',\n },\n {\n name: 'Fatima Zahra',\n email: 'fatima.z@proton.me',\n signedUp: '7 Nov, 11:09 AM',\n plan: 'Team',\n status: 'Active',\n },\n {\n name: 'Ethan Park',\n email: 'ethan.park@icloud.com',\n signedUp: '6 Nov, 6:33 PM',\n plan: 'Starter',\n status: 'Inactive',\n },\n {\n name: 'Amara Nwosu',\n email: 'amara@woven.studio',\n signedUp: '6 Nov, 2:08 PM',\n plan: 'Pro',\n status: 'Rejected',\n },\n {\n name: 'Gabriel Silva',\n email: 'gabriel@orbit.dev',\n signedUp: '5 Nov, 9:47 AM',\n plan: 'Team',\n status: 'Active',\n },\n {\n name: 'Leila Haddad',\n email: 'leila.h@fastmail.com',\n signedUp: '4 Nov, 3:26 PM',\n plan: 'Starter',\n status: 'Pending',\n },\n];\n\ntype Facet = 'Plan' | 'Status';\nconst facets: readonly Facet[] = ['Plan', 'Status'];\nconst options: Record = {\n Plan: ['Starter', 'Pro', 'Team'],\n Status: ['Active', 'Pending', 'Under review', 'Rejected', 'Inactive'],\n};\n\nconst statusDots: Record = {\n Active: 'bg-green-500',\n Pending: 'bg-amber-500',\n 'Under review': 'bg-blue-500',\n Rejected: 'bg-red-500',\n Inactive: 'bg-muted-foreground/40',\n};\n" }, { "path": "content/components/dashboard/dashboard-01/dashboard-charts.tsx", "type": "registry:component", "target": "@components/uiblocks/dashboard-01/dashboard-charts.tsx", "content": "'use client';\n\nimport { format, parseISO } from 'date-fns';\nimport {\n Area,\n CartesianGrid,\n ComposedChart,\n Line,\n XAxis,\n YAxis,\n} from 'recharts';\nimport {\n type ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"./shared/components/ui/chart\";\nimport { cn } from \"./shared/lib/utils\";\n\nconst swap =\n 'ease-[cubic-bezier(0.23,1,0.32,1)] fade-in zoom-in-95 motion-reduce:zoom-in-100 animate-in duration-150';\n\nexport function DashboardCharts({\n period,\n from,\n to,\n}: {\n period: 'day' | 'week' | 'month' | 'year';\n from: string;\n to: string;\n}) {\n const hourly = from === to;\n const start = days.findIndex((day) => day.date >= from);\n const current = days.filter((day) => day.date >= from && day.date <= to);\n const prior = days.slice(start - current.length, start);\n const data = hourly\n ? hours(current[0], prior[0])\n : current.map((day, index) => ({\n date: day.date,\n revenue: day.revenue,\n priorRevenue: prior[index]?.revenue ?? 0,\n charges: day.charges,\n priorCharges: prior[index]?.charges ?? 0,\n }));\n const tickStep = Math.max(1, Math.ceil(data.length / 7));\n const ticks = data\n .filter((_, index) => index % tickStep === 0)\n .map((row) => row.date);\n const tickFormat = hourly ? 'ha' : data.length > 90 ? 'MMM' : 'd MMM';\n const labelFormat = hourly ? 'EEE, d MMM, ha' : 'EEE, d MMM yyyy';\n\n return (\n
\n
\n {panels.map((panel) => {\n const total = data.reduce((sum, row) => sum + row[panel.current], 0);\n const previous = data.reduce(\n (sum, row) => sum + row[panel.previous],\n 0\n );\n const change = previous ? ((total - previous) / previous) * 100 : 0;\n const config = {\n [panel.current]: {\n label: `This ${period}`,\n color: 'var(--chart-1)',\n },\n [panel.previous]: {\n label: `Last ${period}`,\n color: 'var(--chart-2)',\n },\n } satisfies ChartConfig;\n\n return (\n \n
\n \n {panel.title}\n \n
\n

\n {panel.currency ? '$' : ''}\n {total.toLocaleString('en-US')}\n

\n \n {change > 0 ? '+' : ''}\n {change.toFixed(1)}%\n

\n

\n vs. last {period}\n

\n
\n
\n
\n \n This {period}\n
\n
\n \n Last {period}\n
\n
\n
\n {data.length ? (\n \n \n \n \n format(parseISO(date), tickFormat)\n }\n tickLine={false}\n tickMargin={16}\n ticks={ticks}\n />\n \n `${panel.currency ? '$' : ''}${value >= 1000 ? `${value / 1000}k` : value}`\n }\n tickLine={false}\n tickMargin={8}\n width={48}\n />\n (\n
\n \n \n {name === panel.current\n ? `This ${period}`\n : `Last ${period}`}\n \n \n {panel.currency ? '$' : ''}\n {Number(value).toLocaleString('en-US')}\n \n
\n )}\n labelClassName=\"font-normal text-muted-foreground\"\n labelFormatter={(label) =>\n typeof label === 'string'\n ? format(parseISO(label), labelFormat)\n : label\n }\n />\n }\n cursor={{\n stroke: 'var(--chart-1)',\n strokeDasharray: '3 3',\n }}\n />\n \n \n \n \n \n ) : (\n

\n No data for this date range.\n

\n )}\n \n );\n })}\n
\n
\n );\n}\n\nconst panels = [\n {\n id: 'revenue',\n title: 'Revenue',\n current: 'revenue',\n previous: 'priorRevenue',\n currency: true,\n },\n {\n id: 'charges',\n title: 'Charges',\n current: 'charges',\n previous: 'priorCharges',\n currency: false,\n },\n] as const;\n\ntype Day = { date: string; revenue: number; charges: number };\n\n// Seeded LCG so every render draws the same two years of demo data.\nlet seed = 20_251_116;\nconst random = () => {\n seed = (Math.imul(seed, 1_664_525) + 1_013_904_223) >>> 0;\n return seed / 2 ** 32;\n};\n\nconst days: Day[] = Array.from({ length: 731 }, (_, index) => {\n const date = new Date(Date.UTC(2023, 10, 17 + index));\n const growth = 1 + index / 731;\n const weekend = date.getUTCDay() % 6 === 0 ? 0.62 : 1;\n const season =\n 1 + 0.12 * Math.sin(((date.getUTCMonth() - 3) / 12) * Math.PI * 2);\n const spike = random() < 0.04 ? 1.6 : 1;\n const revenue = Math.round(\n 3400 * growth * weekend * season * spike * (0.82 + random() * 0.36)\n );\n return {\n date: date.toISOString().slice(0, 10),\n revenue,\n charges: Math.round((revenue / 13.5) * (0.9 + random() * 0.2)),\n };\n});\n\nconst activity = [\n 0.54, 0.46, 0.38, 0.35, 0.41, 0.58, 0.74, 0.97, 1.12, 1.38, 1.21, 1.53, 1.29,\n 1.41, 1.67, 1.48, 1.31, 1.58, 1.36, 1.19, 1.04, 0.86, 0.72, 0.63,\n];\n\n// Split a day's totals across 24 hours. Noise is keyed on the date so the\n// same day always draws the same curve, and the hourly shares sum to the day.\nfunction hours(day: Day | undefined, previous: Day | undefined) {\n if (!(day && previous)) {\n return [];\n }\n const weights = [day, previous].map((row) => {\n const key = Number(row.date.replaceAll('-', ''));\n const noisy = activity.map(\n (weight, hour) =>\n weight * (0.8 + 0.4 * ((Math.sin(key + hour * 7.31) + 1) / 2))\n );\n const total = noisy.reduce((sum, weight) => sum + weight, 0);\n return noisy.map((weight) => weight / total);\n });\n let share = 0;\n let priorShare = 0;\n return activity.map((_, hour) => {\n const from = share;\n const priorFrom = priorShare;\n share += weights[0][hour];\n priorShare += weights[1][hour];\n return {\n date: `${day.date}T${String(hour).padStart(2, '0')}:00:00`,\n revenue: Math.round(day.revenue * share) - Math.round(day.revenue * from),\n priorRevenue:\n Math.round(previous.revenue * priorShare) -\n Math.round(previous.revenue * priorFrom),\n charges: Math.round(day.charges * share) - Math.round(day.charges * from),\n priorCharges:\n Math.round(previous.charges * priorShare) -\n Math.round(previous.charges * priorFrom),\n };\n });\n}\n" }, { "path": "content/components/dashboard/dashboard-01/dashboard-header.tsx", "type": "registry:component", "target": "@components/uiblocks/dashboard-01/dashboard-header.tsx", "content": "'use client';\n\nimport { format, parseISO } from 'date-fns';\nimport {\n Bell,\n CalendarDays,\n ChartNoAxesCombined,\n ChevronDown,\n LockKeyhole,\n LogOut,\n Moon,\n PanelLeftClose,\n PanelLeftOpen,\n Sun,\n UserRound,\n} from 'lucide-react';\nimport { type ComponentProps, useState } from 'react';\nimport { Avatar, AvatarFallback, AvatarImage } from \"./shared/components/ui/avatar\";\nimport { Button } from \"./shared/components/ui/button\";\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"./shared/components/ui/dialog\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"./shared/components/ui/dropdown-menu\";\nimport { Field, FieldGroup, FieldLabel } from \"./shared/components/ui/field\";\nimport { Input } from \"./shared/components/ui/input\";\nimport {\n Popover,\n PopoverContent,\n PopoverDescription,\n PopoverTitle,\n PopoverTrigger,\n} from \"./shared/components/ui/popover\";\nimport { Separator } from \"./shared/components/ui/separator\";\nimport { useSidebar } from \"./shared/components/ui/sidebar\";\nimport { ToggleGroup, ToggleGroupItem } from \"./shared/components/ui/toggle-group\";\nimport { cn } from \"./shared/lib/utils\";\nimport type { DashboardCharts } from \"./dashboard-charts\";\n\ntype ChartOptions = ComponentProps;\ntype DateRange = Pick;\n\nconst press =\n 'ease-[cubic-bezier(0.23,1,0.32,1)] transition-[scale,background-color] duration-150 active:scale-[0.96] motion-reduce:active:scale-100';\n\nexport function DashboardHeader({\n period,\n range,\n onPeriodChange,\n onRangeChange,\n}: {\n period: ChartOptions['period'];\n range: DateRange;\n onPeriodChange: (period: ChartOptions['period']) => void;\n onRangeChange: (range: DateRange) => void;\n}) {\n const { isMobile, openMobile, state, toggleSidebar } = useSidebar();\n const sidebarOpen = isMobile ? openMobile : state === 'expanded';\n const [customRange, setCustomRange] = useState(null);\n const [unread, setUnread] = useState(true);\n const [notificationsOpen, setNotificationsOpen] = useState(false);\n const from = parseISO(range.from);\n const to = parseISO(range.to);\n const rangeLabel =\n range.from === range.to\n ? format(to, 'd MMM')\n : `${format(from, from.getMonth() === to.getMonth() && from.getFullYear() === to.getFullYear() ? 'd' : 'd MMM')} – ${format(to, 'd MMM')}`;\n\n return (\n <>\n
\n
\n \n {sidebarOpen ? (\n \n ) : (\n \n )}\n \n

Overview

\n

\n Updated 2 min ago\n

\n
\n
\n {\n const next = periods.find((item) => item.value === values[0]);\n if (!next) {\n return;\n }\n onPeriodChange(next.value);\n onRangeChange({ from: next.from, to: '2025-11-16' });\n }}\n size=\"sm\"\n spacing={0.5}\n value={[period]}\n >\n {periods.map((item) => (\n \n {item.label}\n \n ))}\n \n \n \n }\n >\n \n {rangeLabel}\n \n \n \n \n Date range\n \n {\n const next = ranges.find((item) => item.from === value);\n if (next) {\n onRangeChange({ from: next.from, to: '2025-11-16' });\n }\n }}\n value={range.to === '2025-11-16' ? range.from : ''}\n >\n {ranges.map((item) => (\n \n {item.label}\n \n ))}\n \n \n \n \n setCustomRange(range)}\n >\n Custom range…\n \n \n \n \n \n document.documentElement.classList.toggle('dark')}\n size=\"icon-lg\"\n title=\"Toggle dark mode (Shift+D)\"\n type=\"button\"\n variant=\"ghost\"\n >\n \n \n \n \n \n }\n >\n \n {unread && (\n \n )}\n \n \n
\n Notifications\n
\n {unread ? '2 unread' : 'All read'}\n
\n \n Recent workspace activity.\n \n
\n setNotificationsOpen(false)}\n render={\n \n
\n \n
\n
\n
\n Weekly report\n \n
\n

\n 10–16 Nov · $42,910 in revenue\n

\n

\n 3,482 charges processed\n

\n
\n \n \n }\n variant=\"ghost\"\n />\n \n setNotificationsOpen(false)}\n render={\n \n \n \n PR\n \n
\n
\n \n Priya Raman signed up\n \n \n
\n

\n Joined Lumen Labs on the Pro plan.\n

\n
\n \n \n }\n variant=\"ghost\"\n />\n
\n setUnread(false)}\n size=\"sm\"\n type=\"button\"\n variant=\"ghost\"\n >\n Mark all as read\n \n
\n \n \n \n \n }\n >\n \n \n EB\n \n \n \n \n \n \n \n
\n Ephraim Brooks\n
\n
\n ephraim@lumenlabs.io\n
\n \n \n \n \n \n \n Profile\n \n }\n />\n \n \n Notifications\n \n }\n />\n \n \n Security\n \n }\n />\n \n \n \n \n \n Log out\n \n }\n variant=\"destructive\"\n />\n \n \n \n
\n
\n {\n if (!open) {\n setCustomRange(null);\n }\n }}\n open={customRange !== null}\n >\n \n {customRange && (\n {\n event.preventDefault();\n if (\n customRange.from &&\n customRange.to &&\n customRange.from <= customRange.to\n ) {\n onRangeChange(customRange);\n setCustomRange(null);\n }\n }}\n >\n \n Custom date range\n \n Choose the dates to include in your charts.\n \n \n \n \n Start date\n \n setCustomRange({\n ...customRange,\n from: event.target.value,\n })\n }\n required\n type=\"date\"\n value={customRange.from}\n />\n \n \n End date\n \n setCustomRange({ ...customRange, to: event.target.value })\n }\n required\n type=\"date\"\n value={customRange.to}\n />\n \n \n \n setCustomRange(null)}\n type=\"button\"\n variant=\"outline\"\n >\n Cancel\n \n \n \n \n )}\n \n \n \n );\n}\n\nconst periods = [\n { label: 'Day', value: 'day', from: '2025-11-16' },\n { label: 'Week', value: 'week', from: '2025-11-10' },\n { label: 'Month', value: 'month', from: '2025-10-18' },\n { label: 'Year', value: 'year', from: '2025-01-01' },\n] as const;\n\nconst ranges = [\n { label: 'Last 7 days', from: '2025-11-10' },\n { label: 'Last 14 days', from: '2025-11-03' },\n { label: 'Last 30 days', from: '2025-10-18' },\n { label: 'This quarter', from: '2025-10-01' },\n { label: 'Year to date', from: '2025-01-01' },\n];\n" }, { "path": "content/components/dashboard/dashboard-01/dashboard-sidebar.tsx", "type": "registry:component", "target": "@components/uiblocks/dashboard-01/dashboard-sidebar.tsx", "content": "'use client';\n\nimport {\n ArrowLeftRight,\n BriefcaseBusiness,\n ChartNoAxesCombined,\n Check,\n ChevronDown,\n CircleHelp,\n CirclePlus,\n CreditCard,\n LayoutDashboard,\n Moon,\n Settings,\n Users,\n} from 'lucide-react';\nimport { useState } from 'react';\nimport { Button } from \"./shared/components/ui/button\";\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"./shared/components/ui/dialog\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"./shared/components/ui/dropdown-menu\";\nimport { Field, FieldGroup, FieldLabel } from \"./shared/components/ui/field\";\nimport { Input } from \"./shared/components/ui/input\";\nimport { Progress } from \"./shared/components/ui/progress\";\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"./shared/components/ui/sidebar\";\nimport { cn } from \"./shared/lib/utils\";\n\nexport function DashboardSidebar() {\n const { isMobile, setOpenMobile, state } = useSidebar();\n const [workspaces, setWorkspaces] = useState([\n 'Lumen Labs',\n 'Halcyon Studio',\n 'Pinecrest Co.',\n ]);\n const [workspace, setWorkspace] = useState('Lumen Labs');\n const [creating, setCreating] = useState(false);\n const [name, setName] = useState('');\n\n return (\n <>\n \n \n \n \n \n \n }\n >\n \n {workspace.slice(0, 1)}\n \n \n {workspace}\n \n \n \n \n \n \n Workspaces\n \n {workspaces.map((item, index) => (\n setWorkspace(item)}\n >\n \n {item.slice(0, 1)}\n \n {item}\n {item === workspace && }\n \n ))}\n \n \n \n setCreating(true)}\n >\n \n Create workspace\n \n \n \n \n \n \n \n \n \n \n WORKSPACE\n \n \n {navigation.map((item) => (\n \n setOpenMobile(false)}\n render={\n \n \n \n {item.label}\n \n {item.label === 'Customers' && (\n
\n 12\n
\n )}\n \n }\n tooltip={item.label}\n />\n \n ))}\n \n \n \n \n \n \n \n \n }\n >\n \n \n Settings\n \n \n \n \n \n \n Company profile\n \n }\n />\n \n \n Team\n \n }\n />\n \n \n Billing\n \n }\n />\n \n document.documentElement.classList.toggle('dark')\n }\n >\n \n Appearance\n
\n Light\n Dark\n
\n \n \n \n \n \n \n \n \n \n Help & support\n \n \n }\n tooltip=\"Help and support\"\n />\n \n \n
\n
\n Monthly volume\n
\n 72%\n
\n
\n \n

\n $72,400 of $100,000 used\n

\n
\n \n \n \n \n {\n event.preventDefault();\n const nextName = name.trim();\n if (!nextName) {\n return;\n }\n if (!workspaces.includes(nextName)) {\n setWorkspaces([...workspaces, nextName]);\n }\n setWorkspace(nextName);\n setName('');\n setCreating(false);\n }}\n >\n \n Create workspace\n \n Add a workspace to this dashboard preview.\n \n \n \n \n Workspace name\n setName(event.target.value)}\n pattern=\".*\\S.*\"\n required\n value={name}\n />\n \n \n \n setCreating(false)}\n type=\"button\"\n variant=\"outline\"\n >\n Cancel\n \n \n \n \n \n \n \n );\n}\n\nconst navigation = [\n { label: 'Overview', href: '#overview', icon: LayoutDashboard },\n { label: 'Customers', href: '#customers', icon: Users },\n { label: 'Transactions', href: '/transactions', icon: ArrowLeftRight },\n { label: 'Payouts', href: '/payouts', icon: CreditCard },\n { label: 'Reports', href: '#revenue', icon: ChartNoAxesCombined },\n];\n" }, { "path": "licenses/dashboard-01/LICENSE.txt", "type": "registry:file", "target": "@components/uiblocks/dashboard-01/LICENSE.txt", "content": "Includes source from Blocks.so and its bundled primitives.\nSource: https://github.com/ephraimduncan/blocks\nRevision: 3f759d5171c2391253ec4c772e9e5b3db2bc7c7f\n\nMIT License\n\nCopyright (c) 2025 Ephraim Duncan\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "components/ui/avatar.tsx", "type": "registry:component", "target": "@components/uiblocks/dashboard-01/shared/components/ui/avatar.tsx", "content": "'use client';\n\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\nimport type * as React from 'react';\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Avatar({\n className,\n size = 'default',\n ...props\n}: AvatarPrimitive.Root.Props & {\n size?: 'default' | 'sm' | 'lg';\n}) {\n return (\n \n );\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n return (\n \n );\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: AvatarPrimitive.Fallback.Props) {\n return (\n \n );\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n svg]:hidden',\n 'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',\n 'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',\n className\n )}\n data-slot=\"avatar-badge\"\n {...props}\n />\n );\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction AvatarGroupCount({\n className,\n ...props\n}: React.ComponentProps<'div'>) {\n return (\n svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',\n className\n )}\n data-slot=\"avatar-group-count\"\n {...props}\n />\n );\n}\n\nexport {\n Avatar,\n AvatarImage,\n AvatarFallback,\n AvatarGroup,\n AvatarGroupCount,\n AvatarBadge,\n};\n" }, { "path": "components/ui/button.tsx", "type": "registry:component", "target": "@components/uiblocks/dashboard-01/shared/components/ui/button.tsx", "content": "import { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n \"group/button inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-clip-padding font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground hover:bg-primary/80',\n outline:\n 'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',\n ghost:\n 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',\n destructive:\n 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 dark:hover:bg-destructive/30',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n size: {\n default:\n 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n xs: \"h-6 gap-1 in-data-[slot=button-group]:rounded-lg rounded-[min(var(--radius-md),10px)] px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-7 gap-1 in-data-[slot=button-group]:rounded-lg rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n icon: 'size-8',\n 'icon-xs':\n \"size-6 in-data-[slot=button-group]:rounded-lg rounded-[min(var(--radius-md),10px)] [&_svg:not([class*='size-'])]:size-3\",\n 'icon-sm':\n 'size-7 in-data-[slot=button-group]:rounded-lg rounded-[min(var(--radius-md),12px)]',\n 'icon-lg': 'size-9',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n\nfunction Button({\n className,\n variant = 'default',\n size = 'default',\n ...props\n}: ButtonPrimitive.Props & VariantProps) {\n return (\n \n );\n}\n\nexport { Button, buttonVariants };\n" }, { "path": "components/ui/chart.tsx", "type": "registry:component", "target": "@components/uiblocks/dashboard-01/shared/components/ui/chart.tsx", "content": "'use client';\n\nimport * as React from 'react';\nimport type { TooltipValueType } from 'recharts';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { cn } from \"../../lib/utils\";\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: '', dark: '.dark' } as const;\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\ntype TooltipNameType = number | string;\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode;\n icon?: React.ComponentType;\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>;\n\ntype ChartContextProps = {\n config: ChartConfig;\n};\n\nconst ChartContext = React.createContext(null);\n\nfunction useChart() {\n const context = React.useContext(ChartContext);\n\n if (!context) {\n throw new Error('useChart must be used within a ');\n }\n\n return context;\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<'div'> & {\n config: ChartConfig;\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >['children'];\n initialDimension?: {\n width: number;\n height: number;\n };\n}) {\n const uniqueId = React.useId();\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, '')}`;\n\n return (\n \n \n \n \n {children}\n \n \n \n );\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n );\n\n if (!colorConfig.length) {\n return null;\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color;\n return color ? ` --color-${key}: ${color};` : null;\n })\n .join('\\n')}\n}\n`\n )\n .join('\\n'),\n }}\n />\n );\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = 'dot',\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<'div'> & {\n hideLabel?: boolean;\n hideIndicator?: boolean;\n indicator?: 'line' | 'dot' | 'dashed';\n nameKey?: string;\n labelKey?: string;\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n 'accessibilityLayer'\n >) {\n const { config } = useChart();\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null;\n }\n\n const [item] = payload;\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? 'value'}`;\n const itemConfig = getPayloadConfigFromPayload(config, item, key);\n const value =\n !labelKey && typeof label === 'string'\n ? (config[label]?.label ?? label)\n : itemConfig?.label;\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n );\n }\n\n if (!value) {\n return null;\n }\n\n return
{value}
;\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ]);\n\n if (!(active && payload?.length)) {\n return null;\n }\n\n const nestLabel = payload.length === 1 && indicator !== 'dot';\n\n return (\n \n {nestLabel ? null : tooltipLabel}\n
\n {payload\n .filter((item) => item.type !== 'none')\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? 'value'}`;\n const itemConfig = getPayloadConfigFromPayload(config, item, key);\n const indicatorColor = color ?? item.payload?.fill ?? item.color;\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',\n indicator === 'dot' && 'items-center'\n )}\n key={index}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === 'number'\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n );\n })}\n \n \n );\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = 'bottom',\n nameKey,\n}: React.ComponentProps<'div'> & {\n hideIcon?: boolean;\n nameKey?: string;\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart();\n\n if (!payload?.length) {\n return null;\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== 'none')\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? 'value'}`;\n const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground'\n )}\n key={index}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n );\n })}\n \n );\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== 'object' || payload === null) {\n return;\n }\n\n const payloadPayload =\n 'payload' in payload &&\n typeof payload.payload === 'object' &&\n payload.payload !== null\n ? payload.payload\n : undefined;\n\n let configLabelKey: string = key;\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === 'string'\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string;\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string;\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n};\n" }, { "path": "components/ui/dialog.tsx", "type": "registry:component", "target": "@components/uiblocks/dashboard-01/shared/components/ui/dialog.tsx", "content": "'use client';\n\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { XIcon } from 'lucide-react';\nimport type * as React from 'react';\nimport { Button } from \"./button\";\nimport { cn } from \"../../lib/utils\";\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n return ;\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n return ;\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n return ;\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n return ;\n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: DialogPrimitive.Backdrop.Props) {\n return (\n \n );\n}\n\nfunction DialogContent({\n className,\n children,\n showCloseButton = true,\n ...props\n}: DialogPrimitive.Popup.Props & {\n showCloseButton?: boolean;\n}) {\n return (\n \n \n \n {children}\n {showCloseButton && (\n \n }\n >\n \n Close\n \n )}\n \n \n );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction DialogFooter({\n className,\n showCloseButton = false,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n showCloseButton?: boolean;\n}) {\n return (\n \n {children}\n {showCloseButton && (\n }>\n Close\n \n )}\n \n );\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n return (\n \n );\n}\n\nfunction DialogDescription({\n className,\n ...props\n}: DialogPrimitive.Description.Props) {\n return (\n \n );\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n};\n" }, { "path": "components/ui/dropdown-menu.tsx", "type": "registry:component", "target": "@components/uiblocks/dashboard-01/shared/components/ui/dropdown-menu.tsx", "content": "'use client';\n\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { CheckIcon, ChevronRightIcon } from 'lucide-react';\nimport type * as React from 'react';\nimport { cn } from \"../../lib/utils\";\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n return ;\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n return ;\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n return ;\n}\n\nfunction DropdownMenuContent({\n align = 'start',\n alignOffset = 0,\n side = 'bottom',\n sideOffset = 4,\n className,\n ...props\n}: MenuPrimitive.Popup.Props &\n Pick<\n MenuPrimitive.Positioner.Props,\n 'align' | 'alignOffset' | 'side' | 'sideOffset'\n >) {\n return (\n \n \n \n \n \n );\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n return ;\n}\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: MenuPrimitive.GroupLabel.Props & {\n inset?: boolean;\n}) {\n return (\n \n );\n}\n\nfunction DropdownMenuItem({\n className,\n inset,\n variant = 'default',\n ...props\n}: MenuPrimitive.Item.Props & {\n inset?: boolean;\n variant?: 'default' | 'destructive';\n}) {\n return (\n \n );\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n return ;\n}\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n inset?: boolean;\n}) {\n return (\n \n {children}\n \n \n );\n}\n\nfunction DropdownMenuSubContent({\n align = 'start',\n alignOffset = -3,\n side = 'right',\n sideOffset = 0,\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n inset?: boolean;\n}) {\n return (\n \n \n \n \n \n \n {children}\n \n );\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n return (\n \n );\n}\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n inset,\n ...props\n}: MenuPrimitive.RadioItem.Props & {\n inset?: boolean;\n}) {\n return (\n \n \n \n \n \n \n {children}\n \n );\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: MenuPrimitive.Separator.Props) {\n return (\n \n );\n}\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<'span'>) {\n return (\n \n );\n}\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n};\n" }, { "path": "components/ui/field.tsx", "type": "registry:component", "target": "@components/uiblocks/dashboard-01/shared/components/ui/field.tsx", "content": "'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useMemo } from 'react';\nimport { Label } from \"./label\";\nimport { Separator } from \"./separator\";\nimport { cn } from \"../../lib/utils\";\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {\n return (\n [data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',\n className\n )}\n data-slot=\"field-set\"\n {...props}\n />\n );\n}\n\nfunction FieldLegend({\n className,\n variant = 'legend',\n ...props\n}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {\n return (\n \n );\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nconst fieldVariants = cva(\n 'group/field flex w-full gap-2 data-[invalid=true]:text-destructive',\n {\n variants: {\n orientation: {\n vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',\n horizontal:\n 'flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n responsive:\n '@md/field-group:flex-row flex-col @md/field-group:items-center *:w-full @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n },\n },\n defaultVariants: {\n orientation: 'vertical',\n },\n }\n);\n\nfunction Field({\n className,\n orientation = 'vertical',\n ...props\n}: React.ComponentProps<'div'> & VariantProps) {\n return (\n \n );\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction FieldLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n [data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 *:data-[slot=field]:p-2.5 group-data-[disabled=true]/field:opacity-50 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10',\n 'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',\n className\n )}\n data-slot=\"field-label\"\n {...props}\n />\n );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {\n return (\n a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n className\n )}\n data-slot=\"field-description\"\n {...props}\n />\n );\n}\n\nfunction FieldSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<'div'> & {\n children?: React.ReactNode;\n}) {\n return (\n \n \n {children && (\n \n {children}\n \n )}\n \n );\n}\n\nfunction FieldError({\n className,\n children,\n errors,\n ...props\n}: React.ComponentProps<'div'> & {\n errors?: Array<{ message?: string } | undefined>;\n}) {\n const content = useMemo(() => {\n if (children) {\n return children;\n }\n\n if (!errors?.length) {\n return null;\n }\n\n const uniqueErrors = [\n ...new Map(errors.map((error) => [error?.message, error])).values(),\n ];\n\n if (uniqueErrors?.length === 1) {\n return uniqueErrors[0]?.message;\n }\n\n return (\n
    \n {uniqueErrors.map(\n (error, index) =>\n error?.message &&
  • {error.message}
    • \n )}\n
\n );\n }, [children, errors]);\n\n if (!content) {\n return null;\n }\n\n return (\n \n {content}\n \n );\n}\n\nexport {\n Field,\n FieldLabel,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLegend,\n FieldSeparator,\n FieldSet,\n FieldContent,\n FieldTitle,\n};\n" }, { "path": "components/ui/input-group.tsx", "type": "registry:component", "target": "@components/uiblocks/dashboard-01/shared/components/ui/input-group.tsx", "content": "'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { Textarea } from \"./textarea\";\nimport { cn } from \"../../lib/utils\";\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n [data-align=block-end]]:h-auto has-[>[data-align=block-start]]:h-auto has-[>textarea]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot][aria-invalid=true]]:border-destructive has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',\n className\n )}\n data-slot=\"input-group\"\n role=\"group\"\n {...props}\n />\n );\n}\n\nconst inputGroupAddonVariants = cva(\n \"flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 font-medium text-muted-foreground text-sm group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n align: {\n 'inline-start':\n 'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',\n 'inline-end':\n 'order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]',\n 'block-start':\n 'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',\n 'block-end':\n 'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',\n },\n },\n defaultVariants: {\n align: 'inline-start',\n },\n }\n);\n\nfunction InputGroupAddon({\n className,\n align = 'inline-start',\n ...props\n}: React.ComponentProps<'div'> & VariantProps) {\n return (\n {\n if ((e.target as HTMLElement).closest('button')) {\n return;\n }\n e.currentTarget.parentElement?.querySelector('input')?.focus();\n }}\n role=\"group\"\n {...props}\n />\n );\n}\n\nconst inputGroupButtonVariants = cva(\n 'flex items-center gap-2 text-sm shadow-none',\n {\n variants: {\n size: {\n xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n sm: '',\n 'icon-xs':\n 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',\n 'icon-sm': 'size-8 p-0 has-[>svg]:p-0',\n },\n },\n defaultVariants: {\n size: 'xs',\n },\n }\n);\n\nfunction InputGroupButton({\n className,\n type = 'button',\n variant = 'ghost',\n size = 'xs',\n ...props\n}: Omit, 'size' | 'type'> &\n VariantProps & {\n type?: 'button' | 'submit' | 'reset';\n }) {\n return (\n \n );\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n \n );\n}\n\nfunction InputGroupInput({\n className,\n ...props\n}: React.ComponentProps<'input'>) {\n return (\n \n );\n}\n\nfunction InputGroupTextarea({\n className,\n ...props\n}: React.ComponentProps<'textarea'>) {\n return (\n \n );\n}\n\nexport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupText,\n InputGroupInput,\n InputGroupTextarea,\n};\n" }, { "path": "components/ui/input.tsx", "type": "registry:component", "target": "@components/uiblocks/dashboard-01/shared/components/ui/input.tsx", "content": "import { Input as InputPrimitive } from '@base-ui/react/input';\nimport type * as React from 'react';\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Input({ className, type, ...props }: React.ComponentProps<'input'>) {\n return (\n \n );\n}\n\nexport { Input };\n" }, { "path": "components/ui/label.tsx", "type": "registry:component", "target": "@components/uiblocks/dashboard-01/shared/components/ui/label.tsx", "content": "'use client';\n\nimport type * as React from 'react';\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Label({ className, ...props }: React.ComponentProps<'label'>) {\n return (\n \n );\n}\n\nexport { Label };\n" }, { "path": "components/ui/popover.tsx", "type": "registry:component", "target": "@components/uiblocks/dashboard-01/shared/components/ui/popover.tsx", "content": "'use client';\n\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport type * as React from 'react';\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Popover({ ...props }: PopoverPrimitive.Root.Props) {\n return ;\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n return ;\n}\n\nfunction PopoverContent({\n className,\n align = 'center',\n alignOffset = 0,\n side = 'bottom',\n sideOffset = 4,\n ...props\n}: PopoverPrimitive.Popup.Props &\n Pick<\n PopoverPrimitive.Positioner.Props,\n 'align' | 'alignOffset' | 'side' | 'sideOffset'\n >) {\n return (\n \n \n \n \n \n );\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n return (\n \n );\n}\n\nfunction PopoverDescription({\n className,\n ...props\n}: PopoverPrimitive.Description.Props) {\n return (\n \n );\n}\n\nexport {\n Popover,\n PopoverContent,\n PopoverDescription,\n PopoverHeader,\n PopoverTitle,\n PopoverTrigger,\n};\n" }, { "path": "components/ui/progress.tsx", "type": "registry:component", "target": "@components/uiblocks/dashboard-01/shared/components/ui/progress.tsx", "content": "'use client';\n\nimport { Progress as ProgressPrimitive } from '@base-ui/react/progress';\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Progress({\n className,\n children,\n value,\n ...props\n}: ProgressPrimitive.Root.Props) {\n return (\n \n {children}\n \n \n \n \n );\n}\n\nfunction ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {\n return (\n \n );\n}\n\nfunction ProgressIndicator({\n className,\n ...props\n}: ProgressPrimitive.Indicator.Props) {\n return (\n \n );\n}\n\nfunction ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {\n return (\n \n );\n}\n\nfunction ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {\n return (\n \n );\n}\n\nexport {\n Progress,\n ProgressTrack,\n ProgressIndicator,\n ProgressLabel,\n ProgressValue,\n};\n" }, { "path": "components/ui/separator.tsx", "type": "registry:component", "target": "@components/uiblocks/dashboard-01/shared/components/ui/separator.tsx", "content": "'use client';\n\nimport { Separator as SeparatorPrimitive } from '@base-ui/react/separator';\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Separator({\n className,\n orientation = 'horizontal',\n ...props\n}: SeparatorPrimitive.Props) {\n return (\n \n );\n}\n\nexport { Separator };\n" }, { "path": "components/ui/sheet.tsx", "type": "registry:component", "target": "@components/uiblocks/dashboard-01/shared/components/ui/sheet.tsx", "content": "'use client';\n\nimport { Dialog as SheetPrimitive } from '@base-ui/react/dialog';\nimport { XIcon } from 'lucide-react';\nimport type * as React from 'react';\nimport { Button } from \"./button\";\nimport { cn } from \"../../lib/utils\";\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n return ;\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n return ;\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n return ;\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n return ;\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n return (\n \n );\n}\n\nfunction SheetContent({\n className,\n children,\n side = 'right',\n showCloseButton = true,\n ...props\n}: SheetPrimitive.Popup.Props & {\n side?: 'top' | 'right' | 'bottom' | 'left';\n showCloseButton?: boolean;\n}) {\n return (\n \n \n \n {children}\n {showCloseButton && (\n \n }\n >\n \n Close\n \n )}\n \n \n );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n return (\n \n );\n}\n\nfunction SheetDescription({\n className,\n ...props\n}: SheetPrimitive.Description.Props) {\n return (\n \n );\n}\n\nexport {\n Sheet,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n};\n" }, { "path": "components/ui/sidebar.tsx", "type": "registry:component", "target": "@components/uiblocks/dashboard-01/shared/components/ui/sidebar.tsx", "content": "'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { PanelLeftIcon } from 'lucide-react';\nimport * as React from 'react';\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { Separator } from \"./separator\";\nimport {\n Sheet,\n SheetContent,\n SheetDescription,\n SheetHeader,\n SheetTitle,\n} from \"./sheet\";\nimport { Skeleton } from \"./skeleton\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"./tooltip\";\nimport { useIsMobile } from \"../../hooks/use-mobile\";\nimport { cn } from \"../../lib/utils\";\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype SidebarContextProps = {\n state: 'expanded' | 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nconst SidebarContext = React.createContext(null);\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n\n return context;\n}\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = React.useState(false);\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = React.useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n\n // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open]\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(() => {\n return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n }, [isMobile, setOpen]);\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [toggleSidebar]);\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue = React.useMemo(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, toggleSidebar]\n );\n\n return (\n \n \n {children}\n \n \n );\n}\n\nfunction Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n dir,\n ...props\n}: React.ComponentProps<'div'> & {\n side?: 'left' | 'right';\n variant?: 'sidebar' | 'floating' | 'inset';\n collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n if (collapsible === 'none') {\n return (\n \n {children}\n \n );\n }\n\n if (isMobile) {\n return (\n \n button]:hidden\"\n data-mobile=\"true\"\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n dir={dir}\n side={side}\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n >\n \n Sidebar\n Displays the mobile sidebar.\n \n
{children}
\n \n \n );\n }\n\n return (\n