DetailView

┌─────────────────────────────────────────────────────┐
│ header                                              │
│ ┌─────────────────────────────────────────────────┐ │
│ │ ← Back    breadcrumbs: Users / John Doe         │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌────────┐ ┌────────────────────────┐ ┌──────────┐ │
│ │ image/ │ │ title            status│ │ actions  │ │
│ │ icon   │ │ subtitle               │ │ [Edit]   │ │
│ │        │ │ meta: Created Jan 1    │ │ [Delete] │ │
│ └────────┘ └────────────────────────┘ └──────────┘ │
├─────────────────────────────────────────────────────┤
│ tabs: │ Overview │ Activity │ Settings │            │
├───────────────────────────────────────┬─────────────┤
│ main                                  │ sidebar     │
│ ┌───────────────────────────────────┐ │ ┌─────────┐ │
│ │ section: Details                  │ │ │ Quick   │ │
│ │ ┌───────────────────────────────┐ │ │ │ Info    │ │
│ │ │ Name: John Doe                │ │ │ │         │ │
│ │ │ Email: john@example.com       │ │ │ │ Role:   │ │
│ │ │ Role: Admin                   │ │ │ │ Admin   │ │
│ │ └───────────────────────────────┘ │ │ │         │ │
│ └───────────────────────────────────┘ │ │ Status: │ │
│ ┌───────────────────────────────────┐ │ │ Active  │ │
│ │ section: Permissions              │ │ └─────────┘ │
│ │ ...                               │ │ ┌─────────┐ │
│ └───────────────────────────────────┘ │ │ Related │ │
│ ┌───────────────────────────────────┐ │ │ • Item  │ │
│ │ related / activity                │ │ │ • Item  │ │
│ └───────────────────────────────────┘ │ └─────────┘ │
└───────────────────────────────────────┴─────────────┘

<DetailView
  title="John Doe"
  subtitle="john@example.com"
  image={{ src: '/avatars/john.jpg', alt: 'John Doe' }}
  status={{ label: 'Active', variant: 'success' }}
  breadcrumbs={[
    { label: 'Users', href: '/users' },
    { label: 'John Doe' },
  ]}
  actions={[
    { label: 'Edit', href: '/users/john/edit' },
    { label: 'Delete', action: 'delete', variant: 'destructive' },
  ]}
  tabs={[
    { id: 'overview', label: 'Overview' },
    { id: 'activity', label: 'Activity' },
    { id: 'settings', label: 'Settings' },
  ]}
  sections={[
    {
      title: 'Profile',
      fields: [
        { label: 'Name', value: 'John Doe' },
        { label: 'Email', value: 'john@example.com' },
        { label: 'Role', value: 'Admin' },
      ],
    },
    {
      title: 'Permissions',
      content: <PermissionsTable />,
    },
  ]}
  sidebar={{
    sections: [
      { title: 'Quick Info', content: <QuickInfoCard /> },
    ],
  }}
  activity={recentActivity}
/>