Component library

Showing 6 components in the workshop kit.

Narrative

<KeyFinding>

workshopStatementContentNarrative

Highlighted observation from the engagement, with severity colour-coding.

When to use: Call out an insight that materially affects the client's decisions. A 12-page report typically has 4–8 of these.

Preview

Key findingHigh impact

Order intake passes through five inboxes before reaching ERP

Every customer order today is touched by sales, customer service, operations, finance, and operations again. Each handover is a manual email or shared inbox forward.

Prop	Type	Notes
severity	"low" \| "medium" \| "high"	Optional. Default: `medium`. Visual emphasis. High = red ring, medium = amber, low = neutral.Values: low, medium, highExample: `high`
title	string	Optional. Optional title shown above the body.Example: `Order intake passes through five inboxes`
children	ReactNode	Required. The finding's body prose.

Examples

<KeyFinding severity="high" title="Order intake passes through five inboxes before reaching ERP">
    Every customer order today is touched by sales, customer service,
    operations, finance, and operations again. Each handover is a manual
    email or shared inbox forward.
</KeyFinding>

<Recommendation>

workshopAgendaContentNarrative

Actionable next step with priority, owner, and effort.

When to use: Whenever the report tells the client to do something. Always answer 'what should they do, and by when'. Use sparingly: a 12-page report typically has 5–8.

Preview

RecommendationDo nowEffort: MOwner: COO + IT Director

Commit to a 12-week first wave covering invoice intake, order acks, and HR triage

The three use cases share a deployment pattern (Lunnoa agent + ERP API + ticket fan-out) and together cover the largest concentration of manual hours we observed.

Prop	Type	Notes
priority	"now" \| "next" \| "later"	Optional. Default: `next`. Wave assignment. now = wave 1, next = wave 2, later = backlog.Values: now, next, laterExample: `now`
title	string	Required. The recommendation as an imperative sentence.Example: `Commit to a 12-week first wave covering invoice intake, order acks, and HR triage`
owner	string	Optional. Named role or person responsible.Example: `COO + IT Director`
effort	"S" \| "M" \| "L" \| "XL"	Optional. T-shirt size estimate.Values: S, M, L, XLExample: `M`
children	ReactNode	Required. Rationale and next-step detail.

Examples

<Recommendation priority="now" title="Commit to a 12-week first wave covering invoice intake, order acks, and HR triage" effort="M" owner="COO + IT Director">
    The three use cases share a deployment pattern (Lunnoa agent + ERP
    API + ticket fan-out) and together cover the largest concentration of
    manual hours we observed.
</Recommendation>

<PersonCard>

workshopListQuoteNarrative

Contributor attribution card.

When to use: Use in contributor or participant sections to credit interviewees, sponsors, and reviewers.

Preview

Maria Fernandes

Head of Finance · Finance

Interviewee

Prop	Type	Notes
name	string	Required. Person's full name.Example: `Maria Fernandes`
role	string	Optional. Job title.Example: `Head of Finance`
department	string	Optional. Team or department.Example: `Finance`
contributedAs	"Interviewee" \| "Participant" \| "Sponsor" \| "Reviewer"	Optional. How the person contributed to the report.Values: Interviewee, Participant, Sponsor, ReviewerExample: `Interviewee`

Examples

<PersonCard name="Maria Fernandes" role="Head of Finance" department="Finance" contributedAs="Interviewee" />

<BeforeAfter>

workshopCompareNarrative

Explicit current-state vs proposed-state comparison block.

When to use: Use to contrast the as-is process with the to-be process for one specific flow. Most reports have 1–2 of these maximum.

Preview

Today (manual)

Invoice arrives by email, forwarded to AP shared inbox.
AP coordinator opens PDF, retypes header data into ERP.

After Wave 1 (Lunnoa-led)

Lunnoa agent receives the invoice, extracts header and lines.
Three-way match runs automatically; clean invoices post.

Prop	Type	Notes
beforeTitle	string	Optional. Default: `"Today"`. Label above the left card.
before	ReactNode	Required. Current-state content (often a <ul>).
afterTitle	string	Optional. Default: `"After"`. Label above the right card.
after	ReactNode	Required. Proposed-state content.

Examples

<BeforeAfter
    beforeTitle="Today (manual)"
    afterTitle="After Wave 1 (Lunnoa-led)"
    before={
        <ul>
            <li>Invoice arrives by email, forwarded to AP shared inbox.</li>
            <li>AP coordinator opens PDF, retypes header data into ERP.</li>
        </ul>
    }
    after={
        <ul>
            <li>Lunnoa agent receives the invoice, extracts header and lines.</li>
            <li>Three-way match runs automatically; clean invoices post.</li>
        </ul>
    }
/>

Dashboard

<UseCaseCard>

workshopContentListDashboard

One use case tile with priority, area, owner, impact, effort, and time-to-value.

When to use: Use to surface recommended automation use cases. Always inside <UseCaseGrid>.

Often with: UseCaseGrid

Preview

Wave 1 Finance

Supplier invoice intake

Automate three-way matching between supplier invoices, purchase orders, and goods receipts.

Impact: ≈ 220 hrs / month
Effort: M
TTV: 6 weeks

Owner: Maria Fernandes

Prop	Type	Notes
title	string	Required. Short use case name.Example: `Supplier invoice intake`
description	ReactNode	Required. One-paragraph description of what gets automated.
area	string	Optional. Functional area.Example: `Finance`
owner	string	Optional. Process owner.Example: `Maria Fernandes`
priority	"now" \| "next" \| "later"	Optional. Default: `next`. Wave assignment.Values: now, next, laterExample: `now`
impact	string	Optional. Estimated impact.Example: `≈ 220 hrs / month`
effort	string	Optional. Estimated effort, T-shirt size or duration.Example: `M`
timeToValue	string	Optional. Estimated time to first value.Example: `6 weeks`

Examples

<UseCaseCard
    title="Supplier invoice intake"
    priority="now"
    area="Finance"
    owner="Maria Fernandes"
    impact="≈ 220 hrs / month"
    effort="M"
    timeToValue="6 weeks"
    description="Automate three-way matching between supplier invoices, purchase orders, and goods receipts."
/>

<UseCaseGrid>
workshopContentListDashboard
Grid of UseCaseCards.
When to use: Wrap recommended use cases together. Use 2 columns by default; 3 only if you have many small cards.
Often with: UseCaseCard
Preview
Wave 1 Finance
Supplier invoice intake
Automate three-way matching between supplier invoices, purchase orders, and goods receipts.
Impact
≈ 220 hrs / month
Effort
M
TTV
6 weeks
Owner: Maria Fernandes
Wave 1 Operations
Order acknowledgements
Auto-generate acknowledgement emails within five minutes.
Impact
≈ 90 hrs / month
Effort
S
TTV
4 weeks
Owner: James Okafor
Prop Type Notes
columns 2 | 3 Optional. Default: 2. Desktop column count.Values: 2, 3Example: 2
children ReactNode Required. One or more <UseCaseCard> elements.
Examples
```
<UseCaseGrid columns={2}>
    <UseCaseCard
        title="Supplier invoice intake"
        priority="now"
        area="Finance"
        owner="Maria Fernandes"
        impact="≈ 220 hrs / month"
        effort="M"
        timeToValue="6 weeks"
        description="Automate three-way matching between supplier invoices, purchase orders, and goods receipts."
    />
    <UseCaseCard
        title="Order acknowledgements"
        priority="now"
        area="Operations"
        owner="James Okafor"
        impact="≈ 90 hrs / month"
        effort="S"
        timeToValue="4 weeks"
        description="Auto-generate acknowledgement emails within five minutes."
    />
</UseCaseGrid>
```

Prop	Type	Notes
columns	2 \| 3	Optional. Default: `2`. Desktop column count.Values: 2, 3Example: `2`
children	ReactNode	Required. One or more <UseCaseCard> elements.

Narrative

Preview

Order intake passes through five inboxes before reaching ERP

Examples

Preview

Commit to a 12-week first wave covering invoice intake, order acks, and HR triage

Examples

Preview

Examples

Preview

Examples

Dashboard

Preview

Supplier invoice intake

Examples

Preview

Supplier invoice intake

Order acknowledgements

Examples