{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dashboard-4",
  "title": "Overview With Recent Orders",
  "description": "Dashboard overview pairing a four-metric KPI row with a recent orders table of customer avatars, status badges, and amounts.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "avatar",
    "badge",
    "table"
  ],
  "files": [
    {
      "path": "registry/blocks/dashboard/4/dashboard-block.tsx",
      "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\n/** Props a call site may pass through to an icon. */\ntype IconProps = { className?: string; size?: number | string }\n\nconst kpis = [\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Wallet\"\n        tabler=\"IconWallet\"\n        hugeicons=\"WalletIcon\"\n        phosphor=\"Wallet\"\n        remixicon=\"RiWalletLine\"\n        {...p}\n      />\n    ),\n    label: \"Revenue\",\n    value: \"$48,290\",\n    delta: 12.4,\n    up: true,\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"ShoppingBag\"\n        tabler=\"IconShoppingBag\"\n        hugeicons=\"ShoppingBagIcon\"\n        phosphor=\"ShoppingBag\"\n        remixicon=\"RiShoppingBag3Line\"\n        {...p}\n      />\n    ),\n    label: \"Orders\",\n    value: \"1,284\",\n    delta: 8.1,\n    up: true,\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Users\"\n        tabler=\"IconUsersGroup\"\n        hugeicons=\"UserGroupIcon\"\n        phosphor=\"UsersThree\"\n        remixicon=\"RiTeamLine\"\n        {...p}\n      />\n    ),\n    label: \"Customers\",\n    value: \"3,942\",\n    delta: 3.2,\n    up: true,\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"CreditCard\"\n        tabler=\"IconCreditCard\"\n        hugeicons=\"CreditCardIcon\"\n        phosphor=\"CreditCard\"\n        remixicon=\"RiBankCardLine\"\n        {...p}\n      />\n    ),\n    label: \"Refunds\",\n    value: \"$1,120\",\n    delta: 1.8,\n    up: false,\n  },\n]\n\ntype Status = \"Paid\" | \"Processing\" | \"Refunded\"\n\nconst statusVariant: Record<Status, \"default\" | \"secondary\" | \"outline\"> = {\n  Paid: \"default\",\n  Processing: \"secondary\",\n  Refunded: \"outline\",\n}\n\nconst orders: {\n  id: string\n  name: string\n  initials: string\n  avatar: string\n  amount: string\n  status: Status\n  date: string\n}[] = [\n  {\n    id: \"#3312\",\n    name: \"Elena Duarte\",\n    initials: \"ED\",\n    avatar: \"https://i.pravatar.cc/80?img=45\",\n    amount: \"$420.00\",\n    status: \"Paid\",\n    date: \"Jul 21\",\n  },\n  {\n    id: \"#3311\",\n    name: \"Marcus Feld\",\n    initials: \"MF\",\n    avatar: \"https://i.pravatar.cc/80?img=13\",\n    amount: \"$180.50\",\n    status: \"Processing\",\n    date: \"Jul 21\",\n  },\n  {\n    id: \"#3310\",\n    name: \"Priya Nair\",\n    initials: \"PN\",\n    avatar: \"https://i.pravatar.cc/80?img=32\",\n    amount: \"$650.00\",\n    status: \"Paid\",\n    date: \"Jul 20\",\n  },\n  {\n    id: \"#3309\",\n    name: \"Tomás Rivera\",\n    initials: \"TR\",\n    avatar: \"https://i.pravatar.cc/80?img=52\",\n    amount: \"$92.00\",\n    status: \"Refunded\",\n    date: \"Jul 20\",\n  },\n  {\n    id: \"#3308\",\n    name: \"Hannah Osei\",\n    initials: \"HO\",\n    avatar: \"https://i.pravatar.cc/80?img=27\",\n    amount: \"$1,240.00\",\n    status: \"Paid\",\n    date: \"Jul 19\",\n  },\n]\n\nexport default function DashboardBlock() {\n  return (\n    <section className=\"flex min-h-svh w-full items-start justify-center bg-background px-6 py-12 text-foreground\">\n      <div className=\"w-full max-w-4xl\">\n        <div className=\"flex flex-col gap-1\">\n          <p className=\"text-[10px] font-semibold tracking-widest text-muted-foreground uppercase\">\n            Overview\n          </p>\n          <h1 className=\"font-heading text-xl font-semibold tracking-tight\">\n            Dashboard\n          </h1>\n        </div>\n\n        <div className=\"mt-6 grid grid-cols-2 gap-px overflow-hidden rounded-lg border border-border bg-border lg:grid-cols-4\">\n          {kpis.map(({ icon: Icon, label, value, delta, up }) => (\n            <div key={label} className=\"flex flex-col gap-3 bg-card p-5\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-xs font-medium text-muted-foreground\">\n                  {label}\n                </span>\n                <Icon\n                  className=\"size-4 text-muted-foreground\"\n                  aria-hidden=\"true\"\n                />\n              </div>\n              <span className=\"text-2xl font-bold tracking-tight tabular-nums\">\n                {value}\n              </span>\n              <span\n                className={\n                  up\n                    ? \"inline-flex items-center gap-1 text-xs font-medium text-foreground\"\n                    : \"inline-flex items-center gap-1 text-xs font-medium text-muted-foreground\"\n                }\n              >\n                {up ? (\n                  <IconPlaceholder\n                    lucide=\"ArrowUp\"\n                    tabler=\"IconArrowUp\"\n                    hugeicons=\"ArrowUpIcon\"\n                    phosphor=\"ArrowUp\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-3.5\"\n                    aria-hidden=\"true\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"ArrowDown\"\n                    tabler=\"IconArrowDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"ArrowDown\"\n                    remixicon=\"RiArrowDownLine\"\n                    className=\"size-3.5\"\n                    aria-hidden=\"true\"\n                  />\n                )}\n                {delta}% vs last month\n              </span>\n            </div>\n          ))}\n        </div>\n\n        <div className=\"mt-6 overflow-hidden rounded-lg border border-border bg-card\">\n          <div className=\"flex items-center justify-between border-b border-border px-5 py-3.5\">\n            <h2 className=\"font-heading text-sm font-semibold tracking-tight\">\n              Recent orders\n            </h2>\n            <span className=\"text-xs text-muted-foreground\">Last 7 days</span>\n          </div>\n          <Table>\n            <TableHeader>\n              <TableRow className=\"hover:bg-transparent\">\n                <TableHead className=\"pl-5 text-xs font-semibold tracking-wider text-muted-foreground uppercase\">\n                  Customer\n                </TableHead>\n                <TableHead className=\"hidden text-xs font-semibold tracking-wider text-muted-foreground uppercase sm:table-cell\">\n                  Order\n                </TableHead>\n                <TableHead className=\"text-xs font-semibold tracking-wider text-muted-foreground uppercase\">\n                  Status\n                </TableHead>\n                <TableHead className=\"hidden text-xs font-semibold tracking-wider text-muted-foreground uppercase md:table-cell\">\n                  Date\n                </TableHead>\n                <TableHead className=\"pr-5 text-right text-xs font-semibold tracking-wider text-muted-foreground uppercase\">\n                  Amount\n                </TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {orders.map((order) => (\n                <TableRow\n                  key={order.id}\n                  className=\"border-b border-border/60 last:border-0 hover:bg-muted/30\"\n                >\n                  <TableCell className=\"pl-5\">\n                    <div className=\"flex items-center gap-2.5\">\n                      <Avatar className=\"size-7 border border-border\">\n                        <AvatarImage\n                          src={order.avatar}\n                          alt={order.name}\n                          className=\"grayscale\"\n                        />\n                        <AvatarFallback className=\"text-[10px]\">\n                          {order.initials}\n                        </AvatarFallback>\n                      </Avatar>\n                      <span className=\"text-sm font-medium\">{order.name}</span>\n                    </div>\n                  </TableCell>\n                  <TableCell className=\"hidden font-mono text-xs text-muted-foreground sm:table-cell\">\n                    {order.id}\n                  </TableCell>\n                  <TableCell>\n                    <Badge\n                      variant={statusVariant[order.status]}\n                      className=\"text-[11px] font-medium\"\n                    >\n                      {order.status}\n                    </Badge>\n                  </TableCell>\n                  <TableCell className=\"hidden text-sm text-muted-foreground md:table-cell\">\n                    {order.date}\n                  </TableCell>\n                  <TableCell className=\"pr-5 text-right text-sm font-semibold tabular-nums\">\n                    {order.amount}\n                  </TableCell>\n                </TableRow>\n              ))}\n            </TableBody>\n          </Table>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "645px",
    "tier": "free"
  },
  "categories": [
    "dashboard"
  ],
  "type": "registry:block"
}