{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "record-detail-page",
  "title": "Record Detail Page",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-react/blocks/record-detail-page/RecordDetailPage.tsx",
      "content": "'use client'\n\nimport type { ComponentType } from 'react'\nimport {\n  Building2,\n  ChevronRight,\n  CreditCard,\n  FileText,\n  Mail,\n  MessageSquare,\n  Pencil,\n  Plus,\n  ReceiptText,\n  Trash2,\n  UserPlus,\n} from 'lucide-react'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\ninterface DataListRow {\n  label: string\n  value: string\n}\n\ninterface Section {\n  title: string\n  icon: ComponentType<{ className?: string }>\n  rows: DataListRow[]\n}\n\ninterface ActivityEvent {\n  icon: ComponentType<{ className?: string }>\n  sentence: string\n  time: string\n}\n\ninterface Order {\n  id: string\n  amount: string\n  status: 'Paid' | 'Pending' | 'Refunded'\n}\n\nconst summaryRows: DataListRow[] = [\n  { label: 'Account ID', value: 'CUS-004182' },\n  { label: 'Plan', value: 'Business annual' },\n  { label: 'Lifetime value', value: '$48,200' },\n]\n\nconst sections: Section[] = [\n  {\n    title: 'Contact',\n    icon: Mail,\n    rows: [\n      { label: 'Email', value: 'billing@acmecorp.com' },\n      { label: 'Phone', value: '+1 (415) 555-0134' },\n      { label: 'Website', value: 'acmecorp.com' },\n      { label: 'Address', value: '500 Market St, San Francisco, CA' },\n    ],\n  },\n  {\n    title: 'Company',\n    icon: Building2,\n    rows: [\n      { label: 'Industry', value: 'Logistics & supply chain' },\n      { label: 'Employees', value: '240–500' },\n      { label: 'Tax ID', value: 'US-84-2917365' },\n      { label: 'Payment terms', value: 'Net 30' },\n    ],\n  },\n]\n\nconst activity: ActivityEvent[] = [\n  { icon: ReceiptText, sentence: 'Invoice INV-2091 paid — $12,400', time: '2h ago' },\n  { icon: MessageSquare, sentence: 'Priya left a note on the renewal deal', time: 'Yesterday' },\n  { icon: UserPlus, sentence: 'Dana Whitfield added as billing contact', time: '3d ago' },\n  { icon: FileText, sentence: 'Contract Q3-amendment.pdf uploaded', time: '1w ago' },\n]\n\nconst tags = ['enterprise', 'renewal-q4', 'priority-support']\n\nconst orders: Order[] = [\n  { id: 'ORD-8841', amount: '$12,400.00', status: 'Paid' },\n  { id: 'ORD-8790', amount: '$3,180.50', status: 'Pending' },\n  { id: 'ORD-8612', amount: '$940.00', status: 'Refunded' },\n]\n\nexport function RecordDetailPage() {\n  return (\n    <div data-slot=\"record-detail-page\" className=\"bg-background text-foreground w-full\">\n      <div className=\"flex flex-wrap items-center justify-between gap-4\">\n        <div className=\"flex min-w-0 items-center gap-1.5\">\n          <Button variant=\"link\" size=\"sm\" className=\"text-muted-foreground h-auto min-h-6 px-0\">\n            Customers\n          </Button>\n          <ChevronRight className=\"text-muted-foreground size-4 shrink-0\" aria-hidden=\"true\" />\n          <span className=\"truncate text-sm font-semibold\">Acme Corp</span>\n          <Badge variant=\"secondary\" className=\"ml-2\">\n            Active\n          </Badge>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"sm\">\n            <Pencil className=\"size-4\" aria-hidden=\"true\" />\n            Edit\n          </Button>\n          <Button variant=\"outline\" size=\"sm\" className=\"text-destructive hover:text-destructive\">\n            <Trash2 className=\"size-4\" aria-hidden=\"true\" />\n            Delete\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"mt-6 grid gap-6 lg:grid-cols-3\">\n        <div className=\"space-y-6 lg:col-span-2\">\n          <Card>\n            <CardHeader className=\"flex-row items-center gap-4 space-y-0\">\n              <Avatar className=\"size-14\">\n                <AvatarImage src=\"https://i.pravatar.cc/112?img=32\" alt=\"Acme Corp logo\" />\n                <AvatarFallback>AC</AvatarFallback>\n              </Avatar>\n              <div className=\"min-w-0\">\n                <CardTitle className=\"text-lg\">Acme Corp</CardTitle>\n                <CardDescription className=\"truncate\">billing@acmecorp.com · Customer since March 2023</CardDescription>\n              </div>\n            </CardHeader>\n            <CardContent>\n              <Separator className=\"mb-4\" />\n              <dl className=\"grid gap-x-8 gap-y-3 sm:grid-cols-3\">\n                {summaryRows.map((row) => (\n                  <div key={row.label}>\n                    <dt className=\"text-muted-foreground text-xs\">{row.label}</dt>\n                    <dd className=\"mt-0.5 text-sm font-medium\">{row.value}</dd>\n                  </div>\n                ))}\n              </dl>\n            </CardContent>\n          </Card>\n\n          <Tabs defaultValue=\"details\">\n            <TabsList>\n              <TabsTrigger value=\"details\">Details</TabsTrigger>\n              <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n            </TabsList>\n\n            <TabsContent value=\"details\" className=\"space-y-6 pt-4\">\n              {sections.map((section) => (\n                <section key={section.title}>\n                  <h3 className=\"flex items-center gap-2 text-sm font-semibold\">\n                    <section.icon className=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n                    {section.title}\n                  </h3>\n                  <dl className=\"border-border mt-3 divide-y rounded-lg border\">\n                    {section.rows.map((row) => (\n                      <div key={row.label} className=\"px-4 py-2.5 sm:flex sm:items-center sm:gap-4\">\n                        <dt className=\"text-muted-foreground text-xs sm:w-36 sm:text-sm\">{row.label}</dt>\n                        <dd className=\"mt-0.5 text-sm font-medium sm:mt-0\">{row.value}</dd>\n                      </div>\n                    ))}\n                  </dl>\n                </section>\n              ))}\n            </TabsContent>\n\n            <TabsContent value=\"activity\" className=\"pt-4\">\n              <ol className=\"before:bg-border relative space-y-6 before:absolute before:inset-y-1 before:left-[15px] before:w-px\">\n                {activity.map((event) => (\n                  <li key={event.sentence} className=\"relative flex items-start gap-4 pl-0\">\n                    <span className=\"bg-background ring-border relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full ring-1\">\n                      <event.icon className=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n                    </span>\n                    <div className=\"min-w-0 pt-1\">\n                      <p className=\"truncate text-sm\">{event.sentence}</p>\n                      <time className=\"text-muted-foreground text-xs\">{event.time}</time>\n                    </div>\n                  </li>\n                ))}\n              </ol>\n            </TabsContent>\n          </Tabs>\n        </div>\n\n        <div className=\"space-y-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-sm font-medium\">Record meta</CardTitle>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              <div className=\"flex items-center gap-3\">\n                <Avatar className=\"size-8\">\n                  <AvatarImage src=\"https://i.pravatar.cc/64?img=47\" alt=\"Priya Raman\" />\n                  <AvatarFallback>PR</AvatarFallback>\n                </Avatar>\n                <div className=\"min-w-0\">\n                  <p className=\"text-muted-foreground text-xs\">Owner</p>\n                  <p className=\"truncate text-sm font-medium\">Priya Raman</p>\n                </div>\n              </div>\n              <Separator />\n              <dl className=\"space-y-3\">\n                <div className=\"flex items-center justify-between gap-4\">\n                  <dt className=\"text-muted-foreground text-xs\">Created</dt>\n                  <dd className=\"text-sm font-medium\">Mar 14, 2023</dd>\n                </div>\n                <div className=\"flex items-center justify-between gap-4\">\n                  <dt className=\"text-muted-foreground text-xs\">Updated</dt>\n                  <dd className=\"text-sm font-medium\">2 hours ago</dd>\n                </div>\n              </dl>\n              <Separator />\n              <div>\n                <p className=\"text-muted-foreground mb-2 text-xs\">Tags</p>\n                <div className=\"flex flex-wrap gap-1.5\">\n                  {tags.map((tag) => (\n                    <Badge key={tag} variant=\"secondary\">\n                      {tag}\n                    </Badge>\n                  ))}\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n\n          <Card>\n            <CardHeader className=\"flex-row items-center justify-between space-y-0\">\n              <CardTitle className=\"text-sm font-medium\">Recent orders</CardTitle>\n              <Button variant=\"ghost\" size=\"icon\" aria-label=\"View all orders\">\n                <CreditCard className=\"size-4\" aria-hidden=\"true\" />\n              </Button>\n            </CardHeader>\n            <CardContent>\n              <ul className=\"divide-y\">\n                {orders.map((order) => (\n                  <li key={order.id} className=\"flex items-center gap-3 py-2.5 first:pt-0 last:pb-0\">\n                    <span className=\"font-mono text-xs\">{order.id}</span>\n                    <span className=\"text-muted-foreground ml-auto text-sm tabular-nums\">{order.amount}</span>\n                    <Badge\n                      variant={\n                        order.status === 'Paid' ? 'default' : order.status === 'Pending' ? 'secondary' : 'outline'\n                      }\n                      className=\"min-w-[72px] justify-center\"\n                    >\n                      {order.status}\n                    </Badge>\n                  </li>\n                ))}\n              </ul>\n              <Button variant=\"outline\" size=\"sm\" className=\"mt-4 w-full\">\n                <Plus className=\"size-4\" aria-hidden=\"true\" />\n                New order\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "~/components/blocks/RecordDetailPage.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/avatar.json",
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/tabs.json"
  ],
  "description": "Admin record detail page: breadcrumb header with status badge and Edit / Delete actions, two-column layout with a summary card (avatar, identity, key metrics), Details / Activity tabs (labeled description-list sections and an icon timeline feed), plus a side panel with owner metadata, relative timestamps, tag badges, and a recent-orders mini list. All data is hardcoded inline for you to replace.",
  "categories": [
    "layout",
    "app"
  ]
}