Component library

Showing 4 components in the workshop kit with role content.

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.

    PropTypeNotes
    severity"low" | "medium" | "high"Optional. Default: medium. Visual emphasis. High = red ring, medium = amber, low = neutral.Values: low, medium, highExample: high
    titlestringOptional. Optional title shown above the body.Example: Order intake passes through five inboxes
    childrenReactNodeRequired. 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.

    PropTypeNotes
    priority"now" | "next" | "later"Optional. Default: next. Wave assignment. now = wave 1, next = wave 2, later = backlog.Values: now, next, laterExample: now
    titlestringRequired. The recommendation as an imperative sentence.Example: Commit to a 12-week first wave covering invoice intake, order acks, and HR triage
    ownerstringOptional. 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
    childrenReactNodeRequired. 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>

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
    PropTypeNotes
    titlestringRequired. Short use case name.Example: Supplier invoice intake
    descriptionReactNodeRequired. One-paragraph description of what gets automated.
    areastringOptional. Functional area.Example: Finance
    ownerstringOptional. Process owner.Example: Maria Fernandes
    priority"now" | "next" | "later"Optional. Default: next. Wave assignment.Values: now, next, laterExample: now
    impactstringOptional. Estimated impact.Example: ≈ 220 hrs / month
    effortstringOptional. Estimated effort, T-shirt size or duration.Example: M
    timeToValuestringOptional. 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
    PropTypeNotes
    columns2 | 3Optional. Default: 2. Desktop column count.Values: 2, 3Example: 2
    childrenReactNodeRequired. 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>