Cards

All cards live in src/lib/ui/cards/. They split into two groups: data display cards and the Monaco-based template editor panels.

Display cards

Component	File	Purpose
ActivityCaption	ActivityCaption.tsx	Activity summary card showing name, OU, role icon (Controller / Joint Controller / Processor), active status chip, and key attributes. Navigates to the activity detail page on click. Max height 400 px, scrollable.
ContactCard	ContactCard.tsx	Contact detail card for an organisation showing name, role, emails, phones, and notes in a table layout. Supports drag-and-drop reordering, inline edit, staged deletion with watermark, and status indicators for new or modified contacts.
ContractCard	ContractCard.tsx	Contract card displaying name (optionally linked), description, expiration date via DateChip, and partner chips. Supports drag-and-drop, inline edit, staged deletion, and a confirmation dialog when multiple partners are affected.
ContractCaption	ContractCaption.tsx	Read-only contract summary showing partner avatars, description, expiration date, and activity chips grouped under a divider. Clicking triggers the edit callback.
PartnerCaption	PartnerCaption.tsx	Organisation summary card with avatar, name, website, address, primary contact, and activity chips by role (controller / joint controller / processor). Optional clickable variant links to the organisation detail page. Accepts usageData to populate the role chips.
OrgSettingsCaption	OrgSettingsCaption.tsx	Reusable settings tile used inside OrganizationSettingsGrid. Renders a title, description, icon avatar, and an action button that can be a standard button, a hold-to-confirm button, or a navigation link. Optionally includes a radio group before the button.
TemplateCard	TemplateCard.tsx	Template picker card showing title, type label, and a type-specific icon (Activity Declaration, Processing Activity, ROPA Front Page, ROPA TOC). Clickable variant triggers a selection callback; non-clickable variant is used for display only.

Template editor panels

These three components compose the template editor UI and are always used together.

Component	File	Purpose
MonacoHandlebarsEditor	MonacoHandlebarsEditor.tsx	Monaco editor configured for Handlebars syntax with dark theme, word wrap, and automatic layout. Exposes onEditorMount to give the parent direct access to the editor and monaco instances.
MonacoHandlebarsJsonCode	MonacoHandlebarsJsonCode.tsx	Collapsible panel showing the current activity's data as formatted JSON — the Handlebars template context. Collapsed by default; max height 400 px when expanded.
MonacoHandlebarsPreview	MonacoHandlebarsPreview.tsx	Sandboxed <iframe> that renders the compiled Handlebars HTML preview. Displays a formatted error alert if compilation fails.