Board meeting recipe
Rendered
Goal
When a board secretary or company counsel opens an entity's board meeting page, they need to see (1) what's on the agenda, (2) who's attending, (3) what consents are pending signature, and (4) what materials are attached — all in one screen, with clear paths to act on each. The board recipe consolidates these into a two-column layout that follows the user's reading order: agenda first, materials and consents alongside.
Layout breakdown
Two-column body inside the authenticated dashboard shell. Region map:
┌─ AppBreadcrumb (sticky) ─────────────────────────────────────────┐
│ Entities › Waypoint Holdings › Board › Q3 2026 Meeting │
├─ Section: Hero ───────────────────────────────────────────────────┤
│ Eyebrow: BOARD MEETING │
│ DisplayHeading: Q3 2026 board meeting │
│ StatusPill: 4 of 7 attendees confirmed │
├─ Section: Body (two columns at ≥ 1024px) ─────────────────────────┤
│ ┌── Agenda column (8/12) ──┐ ┌── Side column (4/12) ──┐ │
│ │ Card: Agenda │ │ Card: Attendance │ │
│ │ 1. Approve minutes │ │ ● Founder · CEO │ │
│ │ 2. Approve grants │ │ ● Founder · CTO │ │
│ │ 3. New business │ │ ◌ Series Seed lead │ │
│ │ Card: Action items │ │ Card: Materials │ │
│ │ ☑ Send pre-read │ │ 📄 Deck (47p, 2.1MB) │ │
│ │ ☐ Confirm conflicts │ │ 📄 Resolutions (4) │ │
│ │ BoardConsentCard │ │ Timeline.* feed │ │
│ │ Q3 SAFE authorisation │ │ recent board events │ │
│ └───────────────────────────┘ └─────────────────────────┘ │
└────────────────────────────────────────────────────────────────────┘Top section padding uses --section-y-tight (clamp(72px, 8vw, 120px)); inner gap uses --gap-card (16px).
Component manifest
| Region | Component | Why over alternatives |
|---|---|---|
| Breadcrumb | AppBreadcrumb | Carries the entity → board → meeting hierarchy with current-page semantics |
| Hero eyebrow | Eyebrow | Section anchor — "BOARD MEETING" |
| Hero heading | DisplayHeading as="h1" size="hero" | Top of the page outline |
| Attendee status | StatusPill | Live "4 of 7 confirmed" indicator with shimmer |
| Agenda + Action items | Card | Generic elevated containers — no domain-card primitive needed |
| Attendance + Materials | Card | Same as above |
| Pending consent | BoardConsentCard | The canonical pending-signature surface — drops in inline |
| Activity feed | Timeline.* namespace (Timeline) | Composable event-feed atoms |
| External-link icon | Lucide ArrowUpRight | 1.5px stroke, 16px size |
Responsive behaviour
| Breakpoint | Body columns | Card stacking |
|---|---|---|
< 768px | Single column | Cards stack: Agenda → Action items → BoardConsent → Attendance → Materials → Feed |
768–1023px | Single column with wider cards | Same stacking |
≥ 1024px | Two columns (8/12 + 4/12) | Agenda + Action items + BoardConsent left; Attendance + Materials + Feed right |
States
| State | Trigger | Behaviour |
|---|---|---|
| Loading | Initial nav into route | CardSkeleton placeholders in each region; AppBreadcrumb hydrates first |
| Empty (no pending consents) | No Resolution rows in partially_signed | BoardConsentCard region hidden entirely (no empty card) |
| Active board meeting | BoardMeeting.state = "in_progress" | StatusPill shimmer brightens; "Join" CTA appears in hero |
| Past meeting | BoardMeeting.state = "completed" | StatusPill replaced with a static <Pill tone="neutral">Completed</Pill>; action items become read-only |
Implementation
Source: apps/app/app/(authenticated)/entities/[id]/board/page.tsx. The page is a server component — board data is fetched server-side via @repo/database + @matter/api-client. Domain cards (BoardConsentCard) hydrate the per-row signer state from the meeting's agenda_items[] and pending_resolutions[] arrays.
The Timeline feed reads from auditLog.query({ entity_id, scope: "board" }) and streams updates via Server-Sent Events for in-progress meetings.
Source
apps/app/app/(authenticated)/entities/[id]/board/page.tsxDocument detail
Single-document inspector — lifecycle bar, identity card, signature timeline, audit trail, and an action rail. The canonical document-detail surface in apps/app/(authenticated)/documents/[id]/.
Equity dashboard
Cap-table snapshot + share-class breakdown + grants table + recent activity. Canonical equity surface in apps/app/(authenticated)/entities/[id]/equity/.