50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T4722,'use client'; import { format, parseISO } from 'date-fns'; import { Bell, CalendarDays, ChartNoAxesCombined, ChevronDown, LockKeyhole, LogOut, Moon, PanelLeftClose, PanelLeftOpen, Sun, UserRound, } from 'lucide-react'; import { type ComponentProps, useState } from 'react'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { Field, FieldGroup, FieldLabel } from '@/components/ui/field'; import { Input } from '@/components/ui/input'; import { Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, } from '@/components/ui/popover'; import { Separator } from '@/components/ui/separator'; import { useSidebar } from '@/components/ui/sidebar'; import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'; import { cn } from '@/lib/utils'; import type { DashboardCharts } from '@/components/dashboard-01/dashboard-charts'; type ChartOptions = ComponentProps; type DateRange = Pick; const press = 'ease-[cubic-bezier(0.23,1,0.32,1)] transition-[scale,background-color] duration-150 active:scale-[0.96] motion-reduce:active:scale-100'; export function DashboardHeader({ period, range, onPeriodChange, onRangeChange, }: { period: ChartOptions['period']; range: DateRange; onPeriodChange: (period: ChartOptions['period']) => void; onRangeChange: (range: DateRange) => void; }) { const { isMobile, openMobile, state, toggleSidebar } = useSidebar(); const sidebarOpen = isMobile ? openMobile : state === 'expanded'; const [customRange, setCustomRange] = useState(null); const [unread, setUnread] = useState(true); const [notificationsOpen, setNotificationsOpen] = useState(false); const from = parseISO(range.from); const to = parseISO(range.to); const rangeLabel = range.from === range.to ? format(to, 'd MMM') : `${format(from, from.getMonth() === to.getMonth() && from.getFullYear() === to.getFullYear() ? 'd' : 'd MMM')} – ${format(to, 'd MMM')}`; return ( <>

Overview

Updated 2 min ago

{ const next = periods.find((item) => item.value === values[0]); if (!next) { return; } onPeriodChange(next.value); onRangeChange({ from: next.from, to: '2025-11-16' }); }} size="sm" spacing={0.5} value={[period]} > {periods.map((item) => ( {item.label} ))} } > {rangeLabel} Date range { const next = ranges.find((item) => item.from === value); if (next) { onRangeChange({ from: next.from, to: '2025-11-16' }); } }} value={range.to === '2025-11-16' ? range.from : ''} > {ranges.map((item) => ( {item.label} ))} setCustomRange(range)} > Custom range… } > {unread && ( )}

Notifications

{unread ? '2 unread' : 'All read'}

Recent workspace activity.

} > EB

Ephraim Brooks

ephraim@lumenlabs.io

Profile } /> Notifications } /> Security } /> Log out } variant="destructive" />

); } const periods = [ { label: 'Day', value: 'day', from: '2025-11-16' }, { label: 'Week', value: 'week', from: '2025-11-10' }, { label: 'Month', value: 'month', from: '2025-10-18' }, { label: 'Year', value: 'year', from: '2025-01-01' }, ] as const; const ranges = [ { label: 'Last 7 days', from: '2025-11-10' }, { label: 'Last 14 days', from: '2025-11-03' }, { label: 'Last 30 days', from: '2025-10-18' }, { label: 'This quarter', from: '2025-10-01' }, { label: 'Year to date', from: '2025-01-01' }, ]; 53:T33e2,'use client'; import { ArrowLeftRight, BriefcaseBusiness, ChartNoAxesCombined, Check, ChevronDown, CircleHelp, CirclePlus, CreditCard, LayoutDashboard, Moon, Settings, Users, } from 'lucide-react'; import { useState } from 'react'; import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { Field, FieldGroup, FieldLabel } from '@/components/ui/field'; import { Input } from '@/components/ui/input'; import { Progress } from '@/components/ui/progress'; import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar, } from '@/components/ui/sidebar'; import { cn } from '@/lib/utils'; export function DashboardSidebar() { const { isMobile, setOpenMobile, state } = useSidebar(); const [workspaces, setWorkspaces] = useState([ 'Lumen Labs', 'Halcyon Studio', 'Pinecrest Co.', ]); const [workspace, setWorkspace] = useState('Lumen Labs'); const [creating, setCreating] = useState(false); const [name, setName] = useState(''); return ( <> } > {workspace.slice(0, 1)} {workspace} Workspaces {workspaces.map((item, index) => ( setWorkspace(item)} > {item.slice(0, 1)} {item} {item === workspace && } ))} setCreating(true)} > Create workspace WORKSPACE {navigation.map((item) => ( setOpenMobile(false)} render={ } tooltip={item.label} /> ))} } > Settings Company profile } /> Team } /> Billing } /> document.documentElement.classList.toggle('dark') } > Appearance

Light Dark

Help & support } tooltip="Help and support" />

Monthly volume

72%

$72,400 of $100,000 used

); } const navigation = [ { label: 'Overview', href: '#overview', icon: LayoutDashboard }, { label: 'Customers', href: '#customers', icon: Users }, { label: 'Transactions', href: '/transactions', icon: ArrowLeftRight }, { label: 'Payouts', href: '/payouts', icon: CreditCard }, { label: 'Reports', href: '#revenue', icon: ChartNoAxesCombined }, ]; 54:T56a7,'use client'; import { DownloadIcon, EllipsisIcon, EyeIcon, FunnelIcon, MailIcon, SearchIcon, XIcon, } from 'lucide-react'; import { useState } from 'react'; import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, } from '@/components/ui/input-group'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { cn } from '@/lib/utils'; const easeOut = 'ease-[cubic-bezier(0.23,1,0.32,1)]'; const press = `${easeOut} transition-[scale,background-color] duration-150 active:scale-[0.96] motion-reduce:active:scale-100`; const swap = `${easeOut} fade-in zoom-in-95 motion-reduce:zoom-in-100 animate-in duration-150`; export function CustomersTable() { const [query, setQuery] = useState(''); const [selected, setSelected] = useState>({ Plan: [], Status: [], }); const [page, setPage] = useState(1); const [customer, setCustomer] = useState(null); const bindSearch = (node: HTMLInputElement | null) => { if (!node) { return; } const focusSearch = (event: KeyboardEvent) => { if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') { event.preventDefault(); node.focus(); } }; window.addEventListener('keydown', focusSearch); return () => window.removeEventListener('keydown', focusSearch); }; const term = query.trim().toLocaleLowerCase(); const filtered = customers.filter( (item) => (!term || item.name.toLocaleLowerCase().includes(term) || item.email.toLocaleLowerCase().includes(term)) && (!selected.Plan.length || selected.Plan.includes(item.plan)) && (!selected.Status.length || selected.Status.includes(item.status)) ); const pageCount = Math.max(1, Math.ceil(filtered.length / 9)); const visibleCustomers = filtered.slice((page - 1) * 9, page * 9); const filterCount = selected.Plan.length + selected.Status.length; const toggle = (facet: Facet, option: string) => { setSelected((current) => ({ ...current, [facet]: current[facet].includes(option) ? current[facet].filter((item) => item !== option) : [...current[facet], option], })); setPage(1); }; const clear = (facet?: Facet) => { setSelected((current) => facet ? { ...current, [facet]: [] } : { Plan: [], Status: [] } ); setPage(1); }; const exportCustomers = () => { const csv = [ ['Customer', 'Email', 'Signed up', 'Plan', 'Status'], ...filtered.map((item) => [ item.name, item.email, item.signedUp, item.plan, item.status, ]), ] .map((row) => row.map((value) => `"${value.replaceAll('"', '""')}"`).join(',') ) .join('\n'); const url = URL.createObjectURL( new Blob([csv], { type: 'text/csv;charset=utf-8' }) ); const link = document.createElement('a'); link.href = url; link.download = 'customers.csv'; link.click(); URL.revokeObjectURL(url); }; return (

New customers

Recent signups across all plans

{filterCount > 0 && (

{facets.map( (facet) => selected[facet].length > 0 && (

} > {facet}: {selected[facet].join(', ')} {options[facet].map((option) => ( toggle(facet, option)} > {option} ))}

) )}

)} Search customers { setQuery(event.target.value); setPage(1); }} placeholder="Search customers" ref={bindSearch} type="search" value={query} /> ⌘K

} > {facets.map((facet, index) => ( {index > 0 && } {facet} {options[facet].map((option) => ( toggle(facet, option)} > {option} ))} ))} {filterCount > 0 && ( <> clear()}> Clear filters )}

Customer Email Signed up Plan Status Actions {visibleCustomers.map((item) => ( {item.name} {item.email} {item.signedUp} {item.plan} } >

{item.name}

{item.email}

setCustomer(item)} > ))} {!visibleCustomers.length && ( No customers match your search and filters. )}

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

{Array.from({ length: pageCount }, (_, index) => index + 1).map( (number) => ( ) )}

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

{panels.map((panel) => { const total = data.reduce((sum, row) => sum + row[panel.current], 0); const previous = data.reduce( (sum, row) => sum + row[panel.previous], 0 ); const change = previous ? ((total - previous) / previous) * 100 : 0; const config = { [panel.current]: { label: `This ${period}`, color: 'var(--chart-1)', }, [panel.previous]: { label: `Last ${period}`, color: 'var(--chart-2)', }, } satisfies ChartConfig; return (

{panel.title}

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

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

vs. last {period}

{data.length ? ( format(parseISO(date), tickFormat) } tickLine={false} tickMargin={16} ticks={ticks} /> `${panel.currency ? '$' : ''}${value >= 1000 ? `${value / 1000}k` : value}` } tickLine={false} tickMargin={8} width={48} /> (

{name === panel.current ? `This ${period}` : `Last ${period}`} {panel.currency ? '$' : ''} {Number(value).toLocaleString('en-US')}

)} labelClassName="font-normal text-muted-foreground" labelFormatter={(label) => typeof label === 'string' ? format(parseISO(label), labelFormat) : label } /> } cursor={{ stroke: 'var(--chart-1)', strokeDasharray: '3 3', }} /> ) : (

No data for this date range.

)}

); })}

); } const panels = [ { id: 'revenue', title: 'Revenue', current: 'revenue', previous: 'priorRevenue', currency: true, }, { id: 'charges', title: 'Charges', current: 'charges', previous: 'priorCharges', currency: false, }, ] as const; type Day = { date: string; revenue: number; charges: number }; // Seeded LCG so every render draws the same two years of demo data. let seed = 20_251_116; const random = () => { seed = (Math.imul(seed, 1_664_525) + 1_013_904_223) >>> 0; return seed / 2 ** 32; }; const days: Day[] = Array.from({ length: 731 }, (_, index) => { const date = new Date(Date.UTC(2023, 10, 17 + index)); const growth = 1 + index / 731; const weekend = date.getUTCDay() % 6 === 0 ? 0.62 : 1; const season = 1 + 0.12 * Math.sin(((date.getUTCMonth() - 3) / 12) * Math.PI * 2); const spike = random() < 0.04 ? 1.6 : 1; const revenue = Math.round( 3400 * growth * weekend * season * spike * (0.82 + random() * 0.36) ); return { date: date.toISOString().slice(0, 10), revenue, charges: Math.round((revenue / 13.5) * (0.9 + random() * 0.2)), }; }); const activity = [ 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, 1.41, 1.67, 1.48, 1.31, 1.58, 1.36, 1.19, 1.04, 0.86, 0.72, 0.63, ]; // Split a day's totals across 24 hours. Noise is keyed on the date so the // same day always draws the same curve, and the hourly shares sum to the day. function hours(day: Day | undefined, previous: Day | undefined) { if (!(day && previous)) { return []; } const weights = [day, previous].map((row) => { const key = Number(row.date.replaceAll('-', '')); const noisy = activity.map( (weight, hour) => weight * (0.8 + 0.4 * ((Math.sin(key + hour * 7.31) + 1) / 2)) ); const total = noisy.reduce((sum, weight) => sum + weight, 0); return noisy.map((weight) => weight / total); }); let share = 0; let priorShare = 0; return activity.map((_, hour) => { const from = share; const priorFrom = priorShare; share += weights[0][hour]; priorShare += weights[1][hour]; return { date: `${day.date}T${String(hour).padStart(2, '0')}:00:00`, revenue: Math.round(day.revenue * share) - Math.round(day.revenue * from), priorRevenue: Math.round(previous.revenue * priorShare) - Math.round(previous.revenue * priorFrom), charges: Math.round(day.charges * share) - Math.round(day.charges * from), priorCharges: Math.round(previous.charges * priorShare) - Math.round(previous.charges * priorFrom), }; }); } 56:T1043,'use client'; import { useState } from 'react'; import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'; import { cn } from '@/lib/utils'; import { CustomersTable } from '@/components/dashboard-01/customers-table'; import { DashboardCharts } from '@/components/dashboard-01/dashboard-charts'; import { DashboardHeader } from '@/components/dashboard-01/dashboard-header'; import { DashboardSidebar } from '@/components/dashboard-01/dashboard-sidebar'; export default function Page() { const [period, setPeriod] = useState<'day' | 'week' | 'month' | 'year'>( 'week' ); const [range, setRange] = useState({ from: '2025-11-10', to: '2025-11-16' }); const bindTheme = (node: HTMLElement | null) => { if (!node) { return; } const onKey = (event: KeyboardEvent) => { const target = event.target as HTMLElement; if ( event.key === 'D' && event.shiftKey && !target.isContentEditable && !['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName) ) { document.documentElement.classList.toggle('dark'); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }; return ( Skip to dashboard

{metric.label}: {metric.value} {metric.change}

); } const metrics = [ { label: 'New customers', value: '1,284', change: '+8.2%', changeClass: 'text-green-600 dark:text-green-400', }, { label: 'Success rate', value: '97.4%', change: '+0.6%', changeClass: 'text-green-600 dark:text-green-400', }, { label: 'Failure rate', value: '2.6%', change: '-0.6%', changeClass: 'text-red-600 dark:text-red-400', }, { label: 'Refunds', value: '38', change: '0.0%', changeClass: 'text-muted-foreground', }, ]; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","date-fns",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"date-fns"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","recharts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/recharts","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"recharts"}]]}]}]]}],["$","$L50",null,{"namespace":"@blocks-so","registryDependencies":["avatar","button","chart","dialog","dropdown-menu","field","input","input-group","popover","progress","separator","sidebar","table","toggle-group"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"content/components/dashboard/dashboard-01/dashboard-header.tsx","content":"$52","type":"registry:component","target":"components/dashboard-01/dashboard-header.tsx"},{"path":"content/components/dashboard/dashboard-01/dashboard-sidebar.tsx","content":"$53","type":"registry:component","target":"components/dashboard-01/dashboard-sidebar.tsx"},{"path":"content/components/dashboard/dashboard-01/customers-table.tsx","content":"$54","type":"registry:component","target":"components/dashboard-01/customers-table.tsx"},{"path":"content/components/dashboard/dashboard-01/dashboard-charts.tsx","content":"$55","type":"registry:component","target":"components/dashboard-01/dashboard-charts.tsx"},{"path":"content/components/dashboard/dashboard-01/app/page.tsx","content":"$56","type":"registry:page","target":"app/page.tsx"}],"className":"h-[70svh] min-h-80"}]]}]