{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "home-dashboard", "title": "Home Dashboard", "description": "Company revenue, hiring, regional filters, and a sortable customer table.", "dependencies": [ "@tanstack/react-table@^8.21.3", "lucide-react@^1.33.0" ], "registryDependencies": [ "https://components.exe.xyz/r/app-shell.json", "https://components.exe.xyz/r/avatar.json", "https://components.exe.xyz/r/breadcrumb.json", "https://components.exe.xyz/r/button.json", "https://components.exe.xyz/r/chart-card.json", "https://components.exe.xyz/r/chip.json", "https://components.exe.xyz/r/dashboard-view-state.json", "https://components.exe.xyz/r/earnings-chart-card.json", "https://components.exe.xyz/r/icon-button.json", "https://components.exe.xyz/r/input.json", "https://components.exe.xyz/r/line-chart-card.json", "https://components.exe.xyz/r/popover.json", "https://components.exe.xyz/r/select.json", "https://components.exe.xyz/r/sidebar.json", "https://components.exe.xyz/r/stat-cards.json", "https://components.exe.xyz/r/table.json", "https://components.exe.xyz/r/utils.json" ], "files": [ { "path": "src/components/templates/home-dashboard.tsx", "content": "\"use client\"\n\nimport { useEffect, useMemo, useState } from \"react\"\nimport {\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from \"@tanstack/react-table\"\nimport type { ColumnDef, SortingState } from \"@tanstack/react-table\"\nimport {\n BarChart3,\n Bell,\n CalendarDays,\n FolderKanban,\n Home,\n Inbox,\n LifeBuoy,\n Menu,\n Package,\n Search,\n ShoppingBag,\n UserRound,\n Users,\n} from \"lucide-react\"\n\nimport { EarningsChartCard } from \"@/components/charts/earnings-chart-card\"\nimport { LineChartCard } from \"@/components/charts/line-chart-card\"\nimport { Sidebar } from \"@/components/blocks/sidebar\"\nimport type { SidebarItem } from \"@/components/blocks/sidebar\"\nimport { AppShell } from \"@/components/templates/app-shell\"\nimport { useDashboardView } from \"@/lib/use-dashboard-view\"\nimport type { DashboardView } from \"@/lib/use-dashboard-view\"\nimport { cn } from \"@/lib/utils\"\nimport { StatCard, StatCardRow } from \"@/components/blocks/stat-cards\"\nimport { Avatar, AvatarFallback } from \"@/components/ui/avatar\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport { Chip } from \"@/components/ui/chip\"\nimport { IconButton } from \"@/components/ui/icon-button\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/components/ui/table\"\nimport { formatNumber } from \"@/components/charts/chart-card\"\n\nexport const homeKpis = [\n { label: \"Customers\", value: 14592, delta: 0.053, icon: Users },\n { label: \"Unit sold\", value: 385, delta: -0.021, icon: ShoppingBag },\n { label: \"Orders\", value: 1394, delta: 0, icon: Package },\n { label: \"Support tickets\", value: 708, delta: 0.128, icon: LifeBuoy },\n]\n\nexport type HomeCustomer = {\n name: string\n initials: string\n status: \"Waiting\" | \"Processing\" | \"Shipped\" | \"Completed\" | \"Delivery failed\"\n product: string\n region: \"NA\" | \"EU\" | \"Asia\" | \"Oceania\"\n date: string\n amount: number\n}\n\nexport const homeCustomers: HomeCustomer[] = [\n {\n name: \"John Clarkson\",\n initials: \"JC\",\n status: \"Waiting\",\n product: \"Sneakers\",\n region: \"NA\",\n date: \"Sep 05, 2026\",\n amount: 3412,\n },\n {\n name: \"Aspen Lubin\",\n initials: \"AL\",\n status: \"Processing\",\n product: \"Jacket\",\n region: \"EU\",\n date: \"Sep 04, 2026\",\n amount: 890,\n },\n {\n name: \"Michael Ekstrom\",\n initials: \"ME\",\n status: \"Completed\",\n product: \"Wallet\",\n region: \"EU\",\n date: \"Sep 03, 2026\",\n amount: 124,\n },\n {\n name: \"Kianna Vaccaro\",\n initials: \"KV\",\n status: \"Shipped\",\n product: \"Sneakers\",\n region: \"Asia\",\n date: \"Sep 02, 2026\",\n amount: 210,\n },\n {\n name: \"Livia Saris\",\n initials: \"LS\",\n status: \"Processing\",\n product: \"Bag\",\n region: \"Oceania\",\n date: \"Sep 01, 2026\",\n amount: 640,\n },\n {\n name: \"Jaydon Aminoff\",\n initials: \"JA\",\n status: \"Delivery failed\",\n product: \"Jacket\",\n region: \"NA\",\n date: \"Aug 30, 2026\",\n amount: 188,\n },\n {\n name: \"Maria Lubin\",\n initials: \"ML\",\n status: \"Completed\",\n product: \"Wallet\",\n region: \"EU\",\n date: \"Aug 28, 2026\",\n amount: 96,\n },\n {\n name: \"Ann Press\",\n initials: \"AP\",\n status: \"Shipped\",\n product: \"Sneakers\",\n region: \"NA\",\n date: \"Aug 27, 2026\",\n amount: 430,\n },\n]\n\nconst hires = [\n {\n name: \"Livia Saris\",\n role: \"Backend Engineer\",\n when: \"Joined today\",\n initials: \"LS\",\n },\n {\n name: \"Jaydon Aminoff\",\n role: \"UI Designer\",\n when: \"2 days ago\",\n initials: \"JA\",\n },\n {\n name: \"Maria Lubin\",\n role: \"User Researcher\",\n when: \"5 days ago\",\n initials: \"ML\",\n },\n {\n name: \"Ann Press\",\n role: \"DevOps Engineer\",\n when: \"A week ago\",\n initials: \"AP\",\n },\n]\n\nconst inbox = [\n {\n id: \"n1\",\n title: \"Livia Saris mentioned you\",\n description: \"Payroll for the new hires is ready to review.\",\n timestamp: \"8m\",\n unread: true,\n },\n {\n id: \"n2\",\n title: \"Weekly earnings posted\",\n description: \"$7,462 this period.\",\n timestamp: \"2h\",\n unread: true,\n },\n {\n id: \"n3\",\n title: \"Customer export finished\",\n description: \"North America CSV is ready.\",\n timestamp: \"1d\",\n unread: false,\n },\n]\n\nconst statusChip: Record = {\n Waiting:\n \"border-transparent bg-[color-mix(in_srgb,var(--chart-4)_18%,transparent)] text-[var(--chart-4)]\",\n Processing: \"border-transparent bg-primary/10 text-primary\",\n Shipped:\n \"border-transparent bg-[color-mix(in_srgb,var(--chart-2)_16%,transparent)] text-[var(--chart-2)]\",\n Completed: \"border-border bg-card text-foreground\",\n \"Delivery failed\": \"border-transparent bg-destructive/10 text-destructive\",\n}\n\nconst mobileHiddenCustomerColumns = new Set([\n \"status\",\n \"product\",\n \"region\",\n \"date\",\n])\n\nconst companyViewLabel: Record = {\n home: \"Overview\",\n analytics: \"Revenue\",\n calendar: \"Hiring\",\n projects: \"Orders\",\n medical: \"Inventory\",\n profile: \"Account\",\n inbox: \"Inbox\",\n}\n\nfunction companyNavItems(current: DashboardView): SidebarItem[] {\n return [\n { id: \"home\", href: \"#home\", label: \"Overview\", icon: Home },\n { id: \"analytics\", href: \"#revenue\", label: \"Revenue\", icon: BarChart3 },\n {\n id: \"calendar\",\n href: \"#hiring\",\n label: \"Hiring\",\n icon: CalendarDays,\n badge: 4,\n },\n {\n id: \"projects\",\n href: \"#orders\",\n label: \"Orders\",\n icon: FolderKanban,\n badge: 18,\n },\n { id: \"medical\", href: \"#inventory\", label: \"Inventory\", icon: Package },\n { id: \"profile\", href: \"#account\", label: \"Account\", icon: UserRound },\n { id: \"inbox\", href: \"#inbox\", label: \"Inbox\", icon: Inbox, badge: 3 },\n ].map((item) => ({ ...item, current: item.id === current }))\n}\n\nconst companySections: Record<\n Exclude,\n {\n eyebrow: string\n title: string\n description: string\n rows: [string, string][]\n }\n> = {\n analytics: {\n eyebrow: \"Revenue review\",\n title: \"$184,920 booked in September\",\n description:\n \"Direct sales passed marketplace revenue for the first time this quarter.\",\n rows: [\n [\"Direct store\", \"$92,480\"],\n [\"Marketplace\", \"$68,210\"],\n [\"Wholesale\", \"$24,230\"],\n ],\n },\n calendar: {\n eyebrow: \"Hiring schedule\",\n title: \"Four interviews this week\",\n description:\n \"Product design and backend engineering are the two open hiring loops.\",\n rows: [\n [\"Mon 10:00\", \"Portfolio review · Hana Cole\"],\n [\"Tue 14:30\", \"Systems interview · Luis Moreno\"],\n [\"Thu 11:00\", \"Team interview · Cass Bell\"],\n ],\n },\n projects: {\n eyebrow: \"Fulfillment queue\",\n title: \"18 orders need attention\",\n description:\n \"Most exceptions are address checks or items waiting for a warehouse scan.\",\n rows: [\n [\"Address check\", \"7 orders\"],\n [\"Awaiting scan\", \"6 orders\"],\n [\"Carrier delay\", \"5 orders\"],\n ],\n },\n medical: {\n eyebrow: \"Stock control\",\n title: \"Three products are below reorder level\",\n description:\n \"The East warehouse can cover current demand while replenishment is in transit.\",\n rows: [\n [\"Canvas sneaker · 42\", \"18 remaining\"],\n [\"Field jacket · M\", \"11 remaining\"],\n [\"Fold wallet · rust\", \"8 remaining\"],\n ],\n },\n profile: {\n eyebrow: \"Company account\",\n title: \"Plotter Supply Co.\",\n description:\n \"Billing, tax, and notification details for the commerce account.\",\n rows: [\n [\"Billing contact\", \"finance@plotter.supply\"],\n [\"Default region\", \"North America\"],\n [\"Statement day\", \"First business day\"],\n ],\n },\n}\n\nfunction CompanySection({\n view,\n}: {\n view: Exclude\n}) {\n const section = companySections[view]\n return (\n
\n
\n

\n {section.eyebrow}\n

\n

\n {section.title}\n

\n

\n {section.description}\n

\n
\n
\n {section.rows.map(([label, value]) => (\n \n
{label}
\n
\n {value}\n
\n \n ))}\n
\n
\n )\n}\n\nexport function HomeDashboardTemplate() {\n const { view, go } = useDashboardView(\"home\")\n const [mobileOpen, setMobileOpen] = useState(false)\n const [collapsed, setCollapsed] = useState(false)\n const [query, setQuery] = useState(\"\")\n\n function navigate(id: string) {\n go(id)\n setMobileOpen(false)\n }\n\n return (\n \n \n Skip to table\n \n \n
\n
\n setMobileOpen(true)}\n />\n \n \n \n {\n event.preventDefault()\n navigate(\"home\")\n }}\n >\n Home\n \n \n \n \n {companyViewLabel[view]}\n \n \n \n
\n \n setQuery(event.target.value)}\n placeholder=\"Search\"\n aria-label=\"Search\"\n className=\"rounded-[2px] pl-7\"\n />\n
\n \n \n \n \n \n \n \n \n
\n
\n

\n {companyViewLabel[view]}\n

\n {view !== \"home\" && view !== \"inbox\" ? (\n \n ) : null}\n {view === \"inbox\" ? (\n
\n \n
\n ) : null}\n {view === \"home\" ? (\n <>\n \n {homeKpis.map((kpi) => (\n \n ))}\n \n
\n \n \n
\n
\n
\n

\n Recent hires\n

\n

\n 56 this month\n

\n
\n
    \n {hires.map((hire) => (\n \n \n {hire.initials}\n \n
    \n

    \n {hire.name}\n

    \n

    \n {hire.role}\n

    \n

    \n {hire.when}\n

    \n
    \n \n ))}\n
\n
\n \n \n \n \n ) : null}\n
\n
\n \n )\n}\n\nfunction CustomersTable({\n data,\n query,\n}: {\n data: HomeCustomer[]\n query: string\n}) {\n const [sorting, setSorting] = useState([])\n const [globalFilter, setGlobalFilter] = useState(query)\n const [region, setRegion] = useState(\"all\")\n const filtered = useMemo(() => {\n const byRegion =\n region === \"all\" ? data : data.filter((row) => row.region === region)\n const q = globalFilter.trim().toLowerCase()\n if (!q) return byRegion\n return byRegion.filter((row) =>\n `${row.name} ${row.product} ${row.status}`.toLowerCase().includes(q)\n )\n }, [data, globalFilter, region])\n\n useEffect(() => setGlobalFilter(query), [query])\n\n const columns = useMemo[]>(\n () => [\n {\n accessorKey: \"name\",\n header: \"Customer\",\n cell: ({ row }) => (\n
\n \n {row.original.initials}\n \n {row.original.name}\n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ getValue }) => {\n const status = getValue() as HomeCustomer[\"status\"]\n return (\n \n {status}\n \n )\n },\n },\n { accessorKey: \"product\", header: \"Product\" },\n { accessorKey: \"region\", header: \"Region\" },\n { accessorKey: \"date\", header: \"Date\" },\n {\n accessorKey: \"amount\",\n header: \"Amount\",\n cell: ({ getValue }) => (\n \n ${formatNumber(getValue() as number)}\n \n ),\n },\n ],\n []\n )\n\n const table = useReactTable({\n data: filtered,\n columns,\n state: { sorting },\n onSortingChange: setSorting,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n initialState: { pagination: { pageIndex: 0, pageSize: 5 } },\n })\n\n return (\n
\n
\n
\n

Customers

\n

\n {filtered.length} {filtered.length === 1 ? \"customer\" : \"customers\"}\n

\n
\n
\n setGlobalFilter(event.target.value)}\n placeholder=\"Search customers\"\n className=\"max-w-xs rounded-[2px]\"\n aria-label=\"Search customers\"\n />\n \n
\n
\n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => (\n \n \n {flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n \n ))}\n \n ))}\n \n \n {table.getRowModel().rows.map((row) => (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n ))}\n \n
\n
\n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Previous\n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Next\n \n
\n
\n )\n}\n\nfunction InboxList({\n items,\n}: {\n items: {\n id: string\n title: string\n description?: string\n timestamp: string\n unread: boolean\n }[]\n}) {\n return (\n
    \n {items.map((item) => (\n
  • \n \n
    \n
    \n

    {item.title}

    \n

    \n {item.timestamp}\n

    \n
    \n {item.description ? (\n

    \n {item.description}\n

    \n ) : null}\n
    \n
    • \n ))}\n
\n )\n}\n", "type": "registry:block" } ], "type": "registry:block" }