Record panel

import"@truvar-ai/design-system"

Record panel

A HubSpot-style side panel for viewing and editing one record without leaving the list. It combines Drawer, Disclosure, Select, TextField, Tabs, Tooltip and toasts.

Open the panel

Built on Drawer side=start | end

Edit any field: a Save bar appears with an unsaved-changes note. Escape or clicking outside closes it.

Anatomy

Header with avatar and stage, quick actions, collapsible property groups, associations, and an activity timeline in tabs. The footer only asks to save when something changed.

<RecordPanel
  contact={contact}
  side="end"            // "start" | "end", mirrors in Arabic
  isOpen={open}
  onOpenChange={setOpen}
  onSave={(next) => update(next)}
/>