{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "record-detail-page", "title": "Record Detail Page", "type": "registry:page", "files": [ { "path": "packages/registry-angular/blocks/record-detail-page/record-detail-page.component.ts", "content": "// Admin record detail page: breadcrumb header with status badge and Edit / Delete\n// actions, two-column layout with a summary card (avatar, identity, key metrics),\n// Details / Activity tabs (labeled description-list sections and an icon timeline feed),\n// plus a side panel with owner metadata, relative timestamps, tag badges, and a\n// recent-orders mini list. All data is hardcoded inline for you to replace.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport {\n Building2,\n ChevronRight,\n CreditCard,\n FileText,\n LucideAngularModule,\n Mail,\n MessageSquare,\n Pencil,\n Plus,\n ReceiptText,\n Trash2,\n UserPlus,\n type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTabsComponent,\n UiTabsContentComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n} from '@/ui/tabs/tabs.component'\n\ninterface DataListRow {\n label: string\n value: string\n}\n\ninterface Section {\n title: string\n icon: LucideIconData\n rows: DataListRow[]\n}\n\ninterface ActivityEvent {\n icon: LucideIconData\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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-record-detail-page, [ui-record-detail-page]',\n standalone: true,\n // The block renders its own root
: keep this wrapper out of the layout.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiAvatarImageComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiSeparatorComponent,\n UiTabsComponent,\n UiTabsContentComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n ],\n template: `\n
\n
\n
\n \n \n Acme Corp\n Active\n
\n
\n \n \n
\n
\n\n
\n
\n
\n
\n \n \n AC\n \n
\n

Acme Corp

\n

billing@acmecorp.com · Customer since March 2023

\n
\n
\n
\n \n
\n @for (row of summaryRows; track row.label) {\n
\n
{{ row.label }}
\n
{{ row.value }}
\n
\n }\n
\n
\n
\n\n \n \n \n \n \n\n \n @for (section of sections; track section.title) {\n
\n

\n \n {{ section.title }}\n

\n
\n @for (row of section.rows; track row.label) {\n
\n
{{ row.label }}
\n
{{ row.value }}
\n
\n }\n
\n
\n }\n \n\n \n \n @for (event of activity; track event.sentence) {\n
  • \n \n \n \n
    \n

    {{ event.sentence }}

    \n \n
    \n
    • \n }\n \n     \n     \n
    \n\n
    \n
    \n
    \n

    Record meta

    \n
    \n
    \n
    \n \n \n PR\n \n
    \n

    Owner

    \n

    Priya Raman

    \n
    \n
    \n \n
    \n
    \n
    Created
    \n
    Mar 14, 2023
    \n
    \n
    \n
    Updated
    \n
    2 hours ago
    \n
    \n
    \n \n
    \n

    Tags

    \n
    \n @for (tag of tags; track tag) {\n {{ tag }}\n }\n
    \n
    \n
    \n
    \n\n
    \n
    \n

    Recent orders

    \n \n
    \n
    \n
      \n @for (order of orders; track order.id) {\n
    • \n {{ order.id }}\n {{ order.amount }}\n \n {{ order.status }}\n \n
      • \n }\n
    \n \n
    \n
    \n
    \n
    \n
    \n `,\n})\nexport class UiRecordDetailPageComponent {\n protected readonly ChevronRight = ChevronRight\n protected readonly CreditCard = CreditCard\n protected readonly Pencil = Pencil\n protected readonly Plus = Plus\n protected readonly Trash2 = Trash2\n protected readonly summaryRows = summaryRows\n protected readonly sections = sections\n protected readonly activity = activity\n protected readonly tags = tags\n protected readonly orders = orders\n\n @Input('class') className?: string\n\n get rootClass(): string {\n return cn('bg-background text-foreground w-full', this.className)\n }\n}\n", "type": "registry:page", "target": "~/src/app/components/blocks/record-detail-page/record-detail-page.component.ts" }, { "path": "packages/registry-angular/blocks/record-detail-page/index.ts", "content": "export { UiRecordDetailPageComponent } from './record-detail-page.component'\n", "type": "registry:page", "target": "~/src/app/components/blocks/record-detail-page/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/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" ] }