{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dashboard","title":"Dashboard","description":"Sidebar shell with stat cards, an interactive area chart and a sortable, selectable data table.","dependencies":["@tanstack/react-table@8.21.3","lucide-react@1.47.0","recharts@3.10.1"],"registryDependencies":["https://ward.so/r/badge.json","https://ward.so/r/button.json","https://ward.so/r/card.json","https://ward.so/r/chart.json","https://ward.so/r/checkbox.json","https://ward.so/r/dropdown-menu.json","https://ward.so/r/input.json","https://ward.so/r/select.json","https://ward.so/r/separator.json","https://ward.so/r/sidebar.json","https://ward.so/r/table.json","https://ward.so/r/tabs.json"],"files":[{"path":"registry/ward/blocks/dashboard/dashboard.tsx","content":"\"use client\"\n\n/*\n * Adapted from shadcn/ui (https://github.com/shadcn-ui/ui).\n *\n * MIT License\n *\n * Copyright (c) 2023 shadcn\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport * as React from \"react\"\n\nimport { SidebarInset, SidebarProvider } from \"@/registry/ward/ui/sidebar\"\nimport { AppSidebar } from \"./app-sidebar\"\nimport { ChartArea } from \"./chart-area\"\nimport { DataTable } from \"./data-table\"\nimport { cards, chartConfig, chartData, columns, rows } from \"./data\"\nimport { SectionCards } from \"./section-cards\"\nimport { SiteHeader } from \"./site-header\"\n\nexport default function Dashboard() {\n return (\n \n \n \n \n
\n \n \n \n
\n \n \n )\n}\n","type":"registry:component","target":"components/ward/dashboard/dashboard.tsx"},{"path":"registry/ward/blocks/dashboard/app-sidebar.tsx","content":"import * as React from \"react\"\nimport {\n ChartColumnIcon,\n CircleHelpIcon,\n FolderIcon,\n LayersIcon,\n LayoutDashboardIcon,\n SettingsIcon,\n UsersIcon,\n} from \"lucide-react\"\n\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/ward/ui/sidebar\"\n\n/*\n * Adapted from shadcn/ui (https://github.com/shadcn-ui/ui).\n *\n * MIT License\n *\n * Copyright (c) 2023 shadcn\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n// Swap these links for your routes, and set isActive from the current path.\nconst groups = [\n {\n label: \"Manage\",\n items: [\n { title: \"Overview\", url: \"#\", icon: LayoutDashboardIcon, isActive: true },\n { title: \"Items\", url: \"#\", icon: LayersIcon, badge: \"128\" },\n { title: \"Collections\", url: \"#\", icon: FolderIcon },\n { title: \"Members\", url: \"#\", icon: UsersIcon },\n ],\n },\n {\n label: \"Reports\",\n items: [{ title: \"Analytics\", url: \"#\", icon: ChartColumnIcon }],\n },\n]\n\nconst footer = [\n { title: \"Settings\", url: \"#\", icon: SettingsIcon },\n { title: \"Help\", url: \"#\", icon: CircleHelpIcon },\n]\n\nexport function AppSidebar({ ...props }: React.ComponentProps) {\n return (\n \n \n \n \n \n \n \n W\n \n Ward\n \n \n \n \n \n \n {groups.map((group) => (\n \n {group.label}\n \n \n {group.items.map((item) => (\n \n \n \n \n {item.title}\n \n \n {item.badge && {item.badge}}\n \n ))}\n \n \n \n ))}\n \n \n \n {footer.map((item) => (\n \n \n \n \n {item.title}\n \n \n \n ))}\n \n \n \n )\n}\n","type":"registry:component","target":"components/ward/dashboard/app-sidebar.tsx"},{"path":"registry/ward/blocks/dashboard/site-header.tsx","content":"import { Separator } from \"@/registry/ward/ui/separator\"\nimport { SidebarTrigger } from \"@/registry/ward/ui/sidebar\"\n\n/*\n * Adapted from shadcn/ui (https://github.com/shadcn-ui/ui).\n *\n * MIT License\n *\n * Copyright (c) 2023 shadcn\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n/** The bar above the page: the sidebar toggle and the page title. */\nexport function SiteHeader({ title }: { title: string }) {\n return (\n \n \n \n
{title}
\n \n )\n}\n","type":"registry:component","target":"components/ward/dashboard/site-header.tsx"},{"path":"registry/ward/blocks/dashboard/section-cards.tsx","content":"import { TrendingDownIcon, TrendingUpIcon } from \"lucide-react\"\n\nimport { Badge } from \"@/registry/ward/ui/badge\"\nimport {\n Card,\n CardAction,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/ward/ui/card\"\n\n/*\n * Adapted from shadcn/ui (https://github.com/shadcn-ui/ui).\n *\n * MIT License\n *\n * Copyright (c) 2023 shadcn\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n/** A row of stat cards. A `change` that starts with a minus sign shows a falling trend, any other a rising one. */\nexport function SectionCards({\n cards,\n}: {\n cards: { label: string; value: string; change?: string; note?: string }[]\n}) {\n // The row sizes itself to its own width, so it needs no help from the page around it.\n return (\n
\n )\n}\n","type":"registry:component","target":"components/ward/dashboard/section-cards.tsx"},{"path":"registry/ward/blocks/dashboard/chart-area.tsx","content":"\"use client\"\n\n/*\n * Adapted from shadcn/ui (https://github.com/shadcn-ui/ui).\n *\n * MIT License\n *\n * Copyright (c) 2023 shadcn\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardAction,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/ward/ui/card\"\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/ward/ui/chart\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/ward/ui/select\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/ward/ui/tabs\"\n\nconst DAY = 24 * 60 * 60 * 1000\n\nconst ranges = [\n { value: \"90d\", days: 90, label: \"90 days\" },\n { value: \"30d\", days: 30, label: \"30 days\" },\n { value: \"7d\", days: 7, label: \"7 days\" },\n]\n\nconst MONTHS = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"]\n\n// Turns an ISO day such as 2026-09-28 into \"28 Sep\". Read in UTC and spelt out here, not by Intl,\n// so the server and every browser print the same text.\nexport function formatDate(value: string) {\n const date = new Date(value)\n return `${date.getUTCDate()} ${MONTHS[date.getUTCMonth()]}`\n}\n\n/**\n * A stacked area chart with a date range switch. Each key in `config` is a series in `data`,\n * drawn in the order given, and its colour comes from the config.\n */\nexport function ChartArea({\n data,\n config,\n title = \"Activity\",\n description,\n}: {\n data: { date: string; [series: string]: number | string }[]\n config: ChartConfig\n title?: string\n description?: string\n}) {\n const [range, setRange] = React.useState(\"90d\")\n const chartId = React.useId().replace(/[^a-zA-Z0-9_-]/g, \"\")\n const series = Object.keys(config)\n\n // Ranges count back from the newest row, so the chart works with any data, not only today's.\n const days = (ranges.find((item) => item.value === range) ?? ranges[0]).days\n const newest = Date.parse(data[data.length - 1]?.date ?? \"\")\n const visible = data.filter(\n (row) => Date.parse(row.date) > newest - days * DAY\n )\n\n return (\n \n \n {title}\n {description ?? `Last ${days} days`}\n \n \n \n {ranges.map((item) => (\n \n {item.label}\n \n ))}\n \n \n \n \n \n \n \n \n \n {series.map((key) => (\n \n \n \n \n ))}\n \n \n \n formatDate(String(value))}\n indicator=\"dot\"\n />\n }\n />\n {series.map((key) => (\n \n ))}\n } />\n \n \n \n \n )\n}\n","type":"registry:component","target":"components/ward/dashboard/chart-area.tsx"},{"path":"registry/ward/blocks/dashboard/data-table.tsx","content":"\"use client\"\n\n/*\n * Adapted from shadcn/ui (https://github.com/shadcn-ui/ui).\n *\n * MIT License\n *\n * Copyright (c) 2023 shadcn\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport * as React from \"react\"\nimport {\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type Column,\n type ColumnDef,\n type ColumnFiltersState,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport {\n ArrowDownIcon,\n ArrowUpDownIcon,\n ArrowUpIcon,\n ChevronDownIcon,\n Columns3Icon,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/ward/ui/button\"\nimport { Checkbox } from \"@/registry/ward/ui/checkbox\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuTrigger,\n} from \"@/registry/ward/ui/dropdown-menu\"\nimport { Input } from \"@/registry/ward/ui/input\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/ward/ui/table\"\n\nconst PAGE_SIZE = 10\n\n/** A header button that sorts its column. Use it as a column's `header`. */\nexport function SortableHeader({\n column,\n className,\n children,\n}: {\n column: Column\n className?: string\n children: React.ReactNode\n}) {\n const sorted = column.getIsSorted()\n const Icon =\n sorted === \"asc\"\n ? ArrowUpIcon\n : sorted === \"desc\"\n ? ArrowDownIcon\n : ArrowUpDownIcon\n\n return (\n column.toggleSorting(sorted === \"asc\")}\n >\n {children}\n \n \n )\n}\n\n// The checkbox column comes with the table, so a caller's columns describe only its own data.\nfunction selectColumn(): ColumnDef {\n return {\n id: \"select\",\n header: ({ table }) => (\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all rows on this page\"\n />\n ),\n cell: ({ row }) => (\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n ),\n enableSorting: false,\n enableHiding: false,\n }\n}\n\nexport function DataTable({\n columns,\n data,\n searchKey,\n}: {\n columns: ColumnDef[]\n data: T[]\n /** The id of the column the search box filters. Leave it out for no search box. */\n searchKey?: string\n}) {\n const [sorting, setSorting] = React.useState([])\n const [columnFilters, setColumnFilters] =\n React.useState([])\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [rowSelection, setRowSelection] = React.useState({})\n const allColumns = React.useMemo(\n () => [selectColumn(), ...columns],\n [columns]\n )\n\n // React Compiler skips this component by itself, since TanStack Table returns functions it can't memoize safely.\n // eslint-disable-next-line react-hooks/incompatible-library\n const table = useReactTable({\n data,\n columns: allColumns,\n state: { sorting, columnFilters, columnVisibility, rowSelection },\n initialState: { pagination: { pageSize: PAGE_SIZE } },\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onRowSelectionChange: setRowSelection,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n })\n\n const searchColumn = searchKey ? table.getColumn(searchKey) : undefined\n const { pageIndex } = table.getState().pagination\n\n return (\n