Experience / Application
Dashboard
The screen you land on: your own card, who is waiting on you, and how the card is doing.
It leads with the card itself rather than a chart, because the card is the product and the first question on opening the app is "what does mine look like right now". The numbers come after, and they are only the three that would make someone change something — the rest live in Analytics, one link away, so the dashboard stays a page you can read rather than one you have to study.
Follow-ups sit above the metrics for the same reason. A count going up is information; a person waiting two days for a reply is a task, and tasks outrank information on a home screen.
Clearing a follow-up is local and instant. Deck has no data layer, so nothing here persists.
Not exported from @meetcard/deck — this is a composed screen, built from the components below rather than shipped as one.
Stories
Source
const Default = () => <Dashboard />;The greeting reads from the clock it is given, not the one in the room — otherwise this page is a different screenshot depending on when CI runs.
Source
const Morning = () => <Dashboard now={new Date('2027-05-04T08:15:00')} />;The same dashboard in the evening — the greeting follows the clock.
Source
const Evening = () => <Dashboard now={new Date('2027-05-04T20:40:00')} />;Every row's action says the same word, so the announced name carries the person — three buttons called "Follow up" name nobody.
Source
const ClearingAFollowUp = () => <Dashboard />;Nobody waiting. The card, the numbers and the lists are all still there.
Source
const NothingDue = () => <Dashboard followUps={[]} />;A new account: the card exists, nothing has happened to it yet.
Source
const NewAccount = () => <Dashboard followUps={[]} recent={[]} events={[]} />;The page in the shell it actually lives in.
Source
const InTheShell = () => (
<AppShell currentId="/">
<Dashboard />
</AppShell>
);Props
| Prop | Type | Default | Description |
|---|---|---|---|
events | UpcomingEvent[] | [
{
slug: 'revops-summit',
name: 'RevOps Summit',
date: '2027-05-18',
time: '9:00 AM',
venue: 'Austin Convention Center',
},
{
slug: 'boulder-climate',
name: 'Boulder Climate Happy Hour',
date: '2027-06-16',
time: '5:30 PM',
venue: 'Rayback Collective',
},
{
slug: 'saastr-annual',
name: 'SaaStr Annual',
date: '2027-09-09',
time: '10:00 AM',
venue: 'Moscone West',
},
] | — |
followUps | FollowUp[] | [
{
slug: 'priya@northwind',
name: 'Priya Shah',
reason: 'Met at RevOps',
waitingFor: '2 days ago',
},
{
slug: 'marcus@loop',
name: 'Marcus Liu',
reason: 'Promised an intro',
waitingFor: 'Yesterday',
},
{
slug: 'hannah@meetcard',
name: 'Hannah Davis',
reason: 'Wants to book a time',
waitingFor: 'Today',
},
] | — |
now | Date | new Date('2027-05-04T14:30:00') | The clock the greeting is read from. Pinned in stories and tests. |
recent | RecentConnection[] | [
{
slug: 'ben@meetcard',
name: 'Ben Ackles',
role: 'Head of Product @ MeetCard',
when: '2h',
},
{
slug: 'priya@northwind',
name: 'Priya Shah',
role: 'VP Sales @ Northwind',
when: 'Yesterday',
},
{
slug: 'marcus@loop',
name: 'Marcus Liu',
role: 'Founder @ Loop CRM',
when: 'Mon',
},
] | — |