{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "use-cases", "title": "Use Cases", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/use-cases/use-cases-industry-grid.component.ts", "content": "// Filterable industry use-case grid: segment chips narrow a six-card grid in place,\n// each card carrying an icon, industry label, outcome headline, proof metric, and a\n// quiet read-more link. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n ArrowUpRight,\n Banknote,\n Factory,\n HeartPulse,\n LucideAngularModule,\n Ship,\n ShoppingCart,\n Truck,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiToggleGroupComponent, UiToggleGroupItemComponent } from '@/ui/toggle-group/toggle-group.component'\n\ninterface IndustryUseCase {\n icon: unknown\n segment: string\n title: string\n body: string\n metric: string\n}\n\nconst useCases: IndustryUseCase[] = [\n {\n icon: Banknote,\n segment: 'Financial services',\n title: 'Close the books without a spreadsheet relay',\n body: 'Ledger-reconciled metrics that lock on period close, with an auditable trail for every restatement.',\n metric: '5 days off close',\n },\n {\n icon: HeartPulse,\n segment: 'Healthcare',\n title: 'Report on care quality without exposing PHI',\n body: 'Row-level scoping evaluated per query, so a shared dashboard never leaks a chart the viewer cannot open.',\n metric: 'HIPAA-scoped by default',\n },\n {\n icon: ShoppingCart,\n segment: 'Retail',\n title: 'One margin definition across every channel',\n body: 'Store, marketplace, and wholesale roll up to the same certified metric instead of three competing exports.',\n metric: '3 channels, 1 number',\n },\n {\n icon: Truck,\n segment: 'Logistics',\n title: 'Track service levels against the contract',\n body: 'On-time thresholds encoded per customer contract, so breach reporting stops being a manual comparison.',\n metric: '98.2% SLA visibility',\n },\n {\n icon: Factory,\n segment: 'Manufacturing',\n title: 'Yield reporting that survives a line change',\n body: 'Definitions version with the production line, so last quarter’s numbers stay comparable after a retool.',\n metric: '12 lines reconciled',\n },\n {\n icon: Ship,\n segment: 'Logistics',\n title: 'Landed cost per shipment, not per guess',\n body: 'Freight, duty, and demurrage join at query time against the booking rather than a monthly allocation.',\n metric: 'Per-shipment costing',\n },\n]\n\nconst ALL = 'All'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-use-cases-industry-grid, [ui-use-cases-industry-grid]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiToggleGroupComponent,\n UiToggleGroupItemComponent,\n ],\n template: `\n
\n
\n
\n
\n By industry\n

Where teams start

\n

\n Six rollouts we run often enough to have opinions about. Filter to yours.\n

\n
\n\n \n @for (segment of segments(); track segment) {\n \n }\n
\n
\n\n
\n @for (useCase of visible(); track useCase.title) {\n
\n
\n \n

\n {{ useCase.segment }}\n

\n

{{ useCase.title }}

\n

{{ useCase.body }}

\n\n
\n {{ useCase.metric }}\n \n
\n
\n
\n }\n
\n \n
\n `,\n})\nexport class UiUseCasesIndustryGridComponent {\n protected readonly ArrowUpRight = ArrowUpRight\n\n @Input('class') className?: string\n @Input() set initialSegment(v: string | undefined) {\n if (v) this.active.set(v)\n }\n\n readonly active = signal(ALL)\n readonly segments = computed(() => [ALL, ...new Set(useCases.map((u) => u.segment))])\n readonly visible = computed(() =>\n this.active() === ALL ? useCases : useCases.filter((u) => u.segment === this.active()),\n )\n\n get rootClass(): string {\n return cn('bg-background', this.className)\n }\n\n // ToggleGroup single-select emits '' when the active item is pressed again;\n // fall back to ALL so the grid can never end up empty.\n onSegmentChange(value: unknown): void {\n this.active.set(typeof value === 'string' && value ? value : ALL)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/use-cases/use-cases-industry-grid.component.ts" }, { "path": "packages/registry-angular/blocks/use-cases/use-cases-persona-tabs.component.ts", "content": "// Persona-switched use cases: selecting a role swaps the pain-point summary, outcome\n// list, supporting metric, and CTA in place — no navigation, no layout shift between\n// tabs. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { ArrowRight, Check, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport {\n UiTabsComponent,\n UiTabsContentComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n} from '@/ui/tabs/tabs.component'\n\ninterface Persona {\n value: string\n role: string\n pain: string\n outcomes: string[]\n metric: { value: string; label: string }\n cta: string\n}\n\nconst personas: Persona[] = [\n {\n value: 'analytics',\n role: 'Data & analytics',\n pain: 'Every request becomes a bespoke SQL ticket, and nobody trusts the number in the deck.',\n outcomes: [\n 'Publish one certified metric definition per number',\n 'Retire the ad-hoc query queue without losing coverage',\n 'Trace any figure back to the column it came from',\n ],\n metric: { value: '71%', label: 'fewer ad-hoc data requests after one quarter' },\n cta: 'See the analyst workflow',\n },\n {\n value: 'finance',\n role: 'Finance',\n pain: 'Close depends on four spreadsheets and one person who knows how they link.',\n outcomes: [\n 'Reconcile against the ledger before anything publishes',\n 'Lock a period so restated figures cannot drift',\n 'Hand auditors a change log instead of a folder',\n ],\n metric: { value: '5 days', label: 'cut from the average monthly close' },\n cta: 'See the close workflow',\n },\n {\n value: 'revops',\n role: 'RevOps',\n pain: 'Pipeline reporting disagrees with the CRM, so forecast reviews start with an argument.',\n outcomes: [\n 'One pipeline definition shared by sales and finance',\n 'Stage changes tracked with the rep and the timestamp',\n 'Forecast snapshots you can diff week over week',\n ],\n metric: { value: '2.4pp', label: 'tighter forecast accuracy band' },\n cta: 'See the forecast workflow',\n },\n {\n value: 'engineering',\n role: 'Engineering',\n pain: 'The reporting layer is an undocumented service nobody wants to own.',\n outcomes: [\n 'Definitions live in the repo, reviewed like any other change',\n 'No bespoke ETL to babysit at 3am',\n 'Warehouse cost ceilings enforced per team',\n ],\n metric: { value: '0', label: 'bespoke pipelines to maintain' },\n cta: 'See the engineering setup',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-use-cases-persona-tabs, [ui-use-cases-persona-tabs]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiTabsComponent,\n UiTabsContentComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n ],\n template: `\n
\n
\n
\n Use cases\n

Pick the seat you sit in

\n

\n Same platform, four very different first weeks. Start with the one that matches your job.\n

\n
\n\n \n \n \n @for (persona of personas; track persona.value) {\n \n }\n \n\n @for (persona of personas; track persona.value) {\n \n \n
\n
\n

Today

\n

{{ persona.pain }}

\n\n

With uipkge

\n
    \n @for (outcome of persona.outcomes; track outcome) {\n
  • \n \n {{ outcome }}\n
    • \n }\n
\n\n \n
\n\n
\n
\n

{{ persona.metric.value }}

\n

{{ persona.metric.label }}

\n
\n
\n
\n \n }\n \n
\n
\n `,\n})\nexport class UiUseCasesPersonaTabsComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Check = Check\n\n protected readonly personas = personas\n\n @Input('class') className?: string\n @Input() set initialPersona(v: string | undefined) {\n if (v) this.activeTab.set(v)\n }\n\n readonly activeTab = signal('analytics')\n\n get rootClass(): string {\n return cn('bg-background', this.className)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/use-cases/use-cases-persona-tabs.component.ts" }, { "path": "packages/registry-angular/blocks/use-cases/use-cases-role-cards.component.ts", "content": "// Role cards stating the job to be done, the first week of work, and the metric that\n// role is measured on — self-selection without a tab interaction. Port of the React\n// block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowUpRight, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\n// Naming the metric each role is judged on is what lets someone self-select\n// without reading all four cards.\nconst roles = [\n {\n initials: 'FC',\n role: 'Financial controller',\n job: 'Close the books without a reconciliation relay.',\n week: 'Reconcile revenue and margin against the ledger, then lock the period.',\n metric: 'Days to close',\n },\n {\n initials: 'AL',\n role: 'Analytics lead',\n job: 'Stop being a query queue for the rest of the company.',\n week: 'Publish the ten numbers that generate the most tickets as certified metrics.',\n metric: 'Ad-hoc requests per month',\n },\n {\n initials: 'RO',\n role: 'RevOps',\n job: 'Make forecast review about the forecast.',\n week: 'Agree one pipeline definition with finance and snapshot it weekly.',\n metric: 'Forecast accuracy band',\n },\n {\n initials: 'DE',\n role: 'Data engineer',\n job: 'Stop owning an undocumented reporting service.',\n week: 'Move definitions into the repo and delete the bespoke extract jobs.',\n metric: 'Pipelines maintained',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-use-cases-role-cards, [ui-use-cases-role-cards]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n
\n
\n By role\n

Find the card with your job on it

\n

\n Each one names the work of the first week and the number that role is actually judged on.\n

\n
\n\n
\n @for (role of roles; track role.role) {\n
\n
\n
\n \n {{ role.initials }}\n \n

{{ role.role }}

\n
\n\n

{{ role.job }}

\n\n
\n\n

First week

\n

{{ role.week }}

\n\n
\n \n Measured on \n {{ role.metric }}\n \n \n
\n
\n
\n }\n
\n
\n
\n `,\n})\nexport class UiUseCasesRoleCardsComponent {\n protected readonly ArrowUpRight = ArrowUpRight\n\n protected readonly roles = roles\n\n @Input('class') className?: string\n\n get rootClass(): string {\n return cn('bg-background', this.className)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/use-cases/use-cases-role-cards.component.ts" }, { "path": "packages/registry-angular/blocks/use-cases/use-cases-scenario-walkthrough.component.ts", "content": "// A single scenario walked end to end: what happens, who does it, and what the\n// system records at each step. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowRight, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\n// One concrete scenario beats four abstract ones: the reader can check it\n// against their own Tuesday.\nconst steps = [\n {\n actor: 'Controller',\n action: 'Notices Q1 revenue in the board deck is £41k above the close pack.',\n recorded: 'Nothing yet — this is the part that used to take a day to explain.',\n },\n {\n actor: 'Controller',\n action: 'Opens the metric and reads its history instead of asking the analytics team.',\n recorded: 'Definition v127, changed 14 Feb by finance-analytics, reviewed by A. Reyes.',\n },\n {\n actor: 'Analyst',\n action: 'Sees the deck was built on v126, before the trailing window changed.',\n recorded: 'Consumer list shows which dashboards still resolve the older version.',\n },\n {\n actor: 'Analyst',\n action: 'Republishes the deck against the current definition; the gap disappears.',\n recorded: 'Publish event, with the before and after figures attached.',\n },\n {\n actor: 'Auditor',\n action: 'Six months later, asks why Q1 was restated.',\n recorded: 'The whole chain above, exported as a single PDF in under a minute.',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-use-cases-scenario-walkthrough, [ui-use-cases-scenario-walkthrough]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n
\n
\n A Tuesday\n

\n Two numbers disagree. Here is the whole sequence.\n

\n

\n Not a feature list — the actual path, including what the system writes down at each step.\n

\n
\n\n
    \n @for (step of steps; track step.action; let i = $index) {\n
  1. \n
    \n \n {{ stepNumber(i) }}\n \n @if (i < steps.length - 1) {\n \n }\n
    \n\n
    \n
    \n {{ step.actor }}\n

    {{ step.action }}

    \n
    \n

    \n Recorded: {{ step.recorded }}\n

    \n
    \n
    \n
    2. \n }\n
\n\n
\n

Total elapsed, start to resolution: about nine minutes.

\n \n
\n
\n
\n `,\n})\nexport class UiUseCasesScenarioWalkthroughComponent {\n protected readonly ArrowRight = ArrowRight\n\n protected readonly steps = steps\n\n @Input('class') className?: string\n\n get rootClass(): string {\n return cn('bg-background', this.className)\n }\n\n stepNumber(index: number): string {\n return String(index + 1).padStart(2, '0')\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/use-cases/use-cases-scenario-walkthrough.component.ts" }, { "path": "packages/registry-angular/blocks/use-cases/index.ts", "content": "export { UiUseCasesIndustryGridComponent } from './use-cases-industry-grid.component'\nexport { UiUseCasesPersonaTabsComponent } from './use-cases-persona-tabs.component'\nexport { UiUseCasesRoleCardsComponent } from './use-cases-role-cards.component'\nexport { UiUseCasesScenarioWalkthroughComponent } from './use-cases-scenario-walkthrough.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/use-cases/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/tabs.json", "https://uipkge.dev/r/angular/toggle-group.json" ], "description": "Use-case set spanning a filterable industry grid, persona-switched tabs, self-select role cards, and a numbered end-to-end scenario walkthrough.", "categories": [ "marketing" ] }