docyrus-crm-like-detail-page-design
Docyrus CRM-like Detail Page Design
Build a full "open one record" page: a header + inline-editable attribute panel on the left, a tabbed work area (related records, activity, comments, files, tasks) on the right.
Architecture — what ships vs. what you build
@docyrus/ui ships the pieces, not the page shell:
- Ships (compose these):
EditableRecordDetail+EditableRecordDetailField(inline attribute editing),RecordActivityPanel,FileAttachmentPanel,CommentsPanel,AvatarThumbnail,EmailComposer,DataGrid/useDataGrid(related-record tables),RecordDeleteConfirmDialog,create-record-dialog. - You build (page shell): the two-pane
RecordDetailLayout(resizable attribute pane + overflow tab bar),RecordKpiCard,RecordTabPlaceholder, and lightweight related-record tables. A ready-to-copy starter shell is provided — see Starter shell below.
Component source: installed into a consuming app at @/components/docyrus/<name> via docyrus add <name>; the underlying package path is @docyrus/ui/components/<name>. Use @/components/docyrus/* in app code.
Starter shell (copy this first)
assets/record-detail-layout.tsx is a self-contained two-pane shell exporting RecordDetailLayout, RecordKpiCard, RecordTabPlaceholder, and the RecordDetailTab / RecordFieldRenderer types. Copy it into the app (e.g. src/components/crm/record-detail-layout.tsx) and adapt. It depends only on shadcn primitives (@/components/ui/*), EditableRecordDetail (@/components/docyrus/editable-record-detail), cn, and lucide-react — no webphone/i18n coupling. It already implements the three fragile parts correctly (overflow-tab measurement, the resizable divider, and the record-version remount key); reuse them rather than re-deriving. Read references/layout-shell.md for the anatomy and which knobs to turn.