{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "case-study", "title": "Case Study", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/case-study/case-study.component.ts", "content": "// Customer-proof set pairing a featured split story with a sticky results panel, a\n// filterable story index, three-up metric cards, a before-and-after metric comparison\n// table, and a compact results strip. Port of the React block 1:1.\n//\n// The five sections ship as five standalone components (one per install file in the\n// Vue/React blocks) plus a `UiCaseStudyComponent` wrapper that stacks the full set.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { ArrowRight, ArrowUpRight, LucideAngularModule, Quote, TrendingDown, TrendingUp } 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'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\nimport { UiToggleGroupComponent, UiToggleGroupItemComponent } from '@/ui/toggle-group/toggle-group.component'\n\n// ---------------------------------------------------------------- Featured story\n\ninterface FeaturedResult {\n value: string\n label: string\n}\n\ninterface CompanyFact {\n term: string\n detail: string\n}\n\nconst featuredResults: FeaturedResult[] = [\n { value: '5 days', label: 'off the monthly close' },\n { value: '11 → 1', label: 'reconciliation spreadsheets' },\n { value: '340', label: 'certified metrics published' },\n { value: '6 weeks', label: 'kickoff to full hand-over' },\n]\n\nconst companyFacts: CompanyFact[] = [\n { term: 'Industry', detail: 'Freight forwarding' },\n { term: 'Size', detail: '1,200 staff · 18 countries' },\n { term: 'Stack', detail: 'Snowflake · dbt · Okta' },\n { term: 'Live since', detail: 'Q1 2026' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-case-study-featured-story, [ui-case-study-featured-story]',\n standalone: true,\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
\n Case study\n

\n How Northwind Logistics closed the books five days early\n

\n\n
\n
\n

The challenge

\n

\n Month-end ran on eleven spreadsheets maintained by four people across three time zones. Every close\n opened with a reconciliation pass nobody had budgeted for, and restatements were tracked in email.\n

\n
\n\n
\n

The approach

\n

\n We mirrored the warehouse schema, rebuilt revenue and margin as versioned definitions, and reconciled\n them against the prior four quarters before anything was published. A single regional team piloted the\n first close; the rest of finance moved over two weeks later.\n

\n
\n\n
\n

The result

\n

\n Close now starts from a reconciled position. Restatements open a reviewable change instead of a\n thread, and the audit pack is generated from the same history.\n

\n
\n
\n\n
\n \n
\n We stopped arguing about whose number was right and started arguing about what to do next. That is the\n whole change, and it was worth the six weeks.\n
\n
\n \n EW\n \n
\n

Erin Walsh

\n

VP Finance, Northwind Logistics

\n
\n
\n
\n\n \n
\n\n \n \n
\n
\n
\n `,\n})\nexport class UiCaseStudyFeaturedStorySectionComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Quote = Quote\n\n protected readonly results = featuredResults\n protected readonly facts = companyFacts\n\n @Input('class') className?: string\n\n get rootClass(): string {\n return cn('bg-background', this.className)\n }\n}\n\n// ------------------------------------------------------------ Filterable list\n\ninterface StoryIndexItem {\n company: string\n industry: string\n result: string\n stack: string\n readTime: string\n}\n\nconst storyIndex: StoryIndexItem[] = [\n {\n company: 'Northwind Logistics',\n industry: 'Logistics',\n result: '5 days off the monthly close',\n stack: 'Snowflake · dbt · Okta',\n readTime: '8 min',\n },\n {\n company: 'Halden Health',\n industry: 'Healthcare',\n result: '71% fewer ad-hoc data requests',\n stack: 'BigQuery · Airflow',\n readTime: '6 min',\n },\n {\n company: 'Verity Retail Group',\n industry: 'Retail',\n result: '2.4pp tighter forecast band',\n stack: 'Redshift · dbt',\n readTime: '7 min',\n },\n {\n company: 'Calder Manufacturing',\n industry: 'Manufacturing',\n result: '11 spreadsheets retired',\n stack: 'Postgres · Dagster',\n readTime: '5 min',\n },\n {\n company: 'Ridgeway Freight',\n industry: 'Logistics',\n result: 'Per-shipment landed cost',\n stack: 'Snowflake · Fivetran',\n readTime: '9 min',\n },\n {\n company: 'Ashford Clinics',\n industry: 'Healthcare',\n result: 'PHI-scoped self-serve reporting',\n stack: 'BigQuery · Entra ID',\n readTime: '6 min',\n },\n]\n\nconst ALL_INDUSTRIES = 'All'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-case-study-filterable-list, [ui-case-study-filterable-list]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiSeparatorComponent,\n UiToggleGroupComponent,\n UiToggleGroupItemComponent,\n ],\n template: `\n
\n
\n
\n
\n Customer stories\n

Read one close to your own

\n
\n\n \n @for (industry of industries(); track industry) {\n \n }\n
\n
\n\n
\n
\n @if (visible().length === 0) {\n
\n

No stories in that industry yet.

\n \n
\n } @else {\n
    \n @for (study of visible(); track study.company; let last = $last) {\n
  • \n \n
    \n
    \n

    {{ study.company }}

    \n {{ study.industry }}\n
    \n

    {{ study.result }}

    \n

    {{ study.stack }}

    \n
    \n {{ study.readTime }}\n \n \n @if (!last) {\n \n }\n
    • \n }\n
\n }\n
\n
\n \n
\n `,\n})\nexport class UiCaseStudyFilterableListComponent {\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly allLabel = ALL_INDUSTRIES\n\n @Input('class') className?: string\n\n readonly active = signal(ALL_INDUSTRIES)\n\n readonly industries = computed(() => [ALL_INDUSTRIES, ...new Set(storyIndex.map((study) => study.industry))])\n readonly visible = computed(() =>\n this.active() === ALL_INDUSTRIES ? storyIndex : storyIndex.filter((study) => study.industry === this.active()),\n )\n\n get rootClass(): string {\n return cn('bg-background', this.className)\n }\n\n // Single-select emits '' when the pressed chip is pressed again; fall back to\n // ALL so the list is never empty by accident.\n onChange(value: unknown): void {\n this.active.set(typeof value === 'string' && value ? value : ALL_INDUSTRIES)\n }\n}\n\n// --------------------------------------------------------------- Metric cards\n\ninterface MetricCardStudy {\n metric: string\n metricLabel: string\n company: string\n industry: string\n outcome: string\n quote: string\n author: { name: string; role: string; initials: string }\n}\n\nconst metricCardStudies: MetricCardStudy[] = [\n {\n metric: '5 days',\n metricLabel: 'off the monthly close',\n company: 'Northwind Logistics',\n industry: 'Freight forwarding · 1,200 staff',\n outcome: 'Replaced eleven reconciliation spreadsheets with one certified revenue model.',\n quote: 'We stopped arguing about whose number was right and started arguing about what to do next.',\n author: { name: 'Erin Walsh', role: 'VP Finance', initials: 'EW' },\n },\n {\n metric: '71%',\n metricLabel: 'fewer ad-hoc data requests',\n company: 'Halden Health',\n industry: 'Provider network · 40 clinics',\n outcome: 'Clinic leads self-serve their own quality metrics without filing a ticket.',\n quote: 'The analytics team went from a request queue to actually building things again.',\n author: { name: 'Daniel Brooks', role: 'Head of Analytics', initials: 'DB' },\n },\n {\n metric: '2.4pp',\n metricLabel: 'tighter forecast accuracy',\n company: 'Verity Retail Group',\n industry: 'Omnichannel retail · 310 stores',\n outcome: 'Sales and finance now forecast off the same pipeline definition, snapshotted weekly.',\n quote: 'Forecast review stopped opening with twenty minutes of reconciling two decks.',\n author: { name: 'Priya Raman', role: 'RevOps Director', initials: 'PR' },\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-case-study-metric-cards, [ui-case-study-metric-cards]',\n standalone: true,\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
\n Customer results\n

What changed after the rollout

\n

\n Three teams, measured against their own numbers from the quarter before.\n

\n
\n \n
\n\n
\n @for (study of studies; track study.company) {\n
\n
\n \n

{{ study.metric }}

\n

{{ study.metricLabel }}

\n\n \n\n

{{ study.company }}

\n

{{ study.industry }}

\n

{{ study.outcome }}

\n\n
\n “{{ study.quote }}”\n
\n\n
\n \n {{ study.author.initials }}\n \n
\n

{{ study.author.name }}

\n

{{ study.author.role }}

\n
\n \n \n \n
\n
\n
\n }\n
\n
\n
\n `,\n})\nexport class UiCaseStudyMetricCardsComponent {\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly studies = metricCardStudies\n\n @Input('class') className?: string\n\n get rootClass(): string {\n return cn('bg-background', this.className)\n }\n}\n\n// ---------------------------------------------------------- Metric comparison\n\ninterface ComparisonMetric {\n name: string\n before: string\n after: string\n delta: string\n better: 'up' | 'down'\n}\n\n// `better` records which direction is good, so the delta colour never has to be\n// hard-coded per row — a falling close time is good, falling accuracy is not.\nconst comparisonMetrics: ComparisonMetric[] = [\n { name: 'Days to close', before: '9.4', after: '4.2', delta: '−55%', better: 'down' },\n { name: 'Ad-hoc data requests / month', before: '212', after: '61', delta: '−71%', better: 'down' },\n { name: 'Certified metrics published', before: '0', after: '340', delta: '+340', better: 'up' },\n { name: 'Forecast accuracy band', before: '±6.1pp', after: '±3.7pp', delta: '−2.4pp', better: 'down' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-case-study-metric-comparison, [ui-case-study-metric-comparison]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiSeparatorComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n
\n Northwind Logistics\n

\n Two quarters either side of the rollout\n

\n

\n Their numbers, their definitions, measured the same way before and after. Nothing normalised.\n

\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n @for (metric of metrics; track metric.name) {\n \n \n \n \n \n \n }\n \n
MetricQ4 2025Q2 2026Change
{{ metric.name }}\n {{ metric.before }}\n {{ metric.after }}\n \n @if (metric.better === 'down') {\n \n } @else {\n \n }\n {{ metric.delta }}\n \n
\n\n \n\n

\n Measured from their own close calendar and ticket queue. The rollout completed between the two quarters;\n no headcount was added or removed in finance during the period.\n

\n
\n
\n\n \n
\n
\n `,\n})\nexport class UiCaseStudyMetricComparisonComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly TrendingDown = TrendingDown\n protected readonly TrendingUp = TrendingUp\n protected readonly metrics = comparisonMetrics\n\n @Input('class') className?: string\n\n get rootClass(): string {\n return cn('bg-background', this.className)\n }\n}\n\n// --------------------------------------------------------------- Results strip\n\ninterface StripResult {\n wordmark: string\n metric: string\n label: string\n}\n\n// One result per customer. A second number halves the weight of the first.\nconst stripResults: StripResult[] = [\n { wordmark: 'Northwind', metric: '5 days', label: 'off the monthly close' },\n { wordmark: 'Halden', metric: '71%', label: 'fewer ad-hoc requests' },\n { wordmark: 'Verity', metric: '2.4pp', label: 'tighter forecast band' },\n { wordmark: 'Calder', metric: '11 → 1', label: 'reporting spreadsheets' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-case-study-results-strip, [ui-case-study-results-strip]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiSeparatorComponent],\n template: `\n
\n
\n
\n Proven\n \n
\n\n
\n @for (result of results; track result.wordmark; let last = $last) {\n
\n

{{ result.wordmark }}

\n

{{ result.metric }}

\n

{{ result.label }}

\n\n @if (!last) {\n
\n }\n
\n
\n
\n `,\n})\nexport class UiCaseStudyResultsStripComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly results = stripResults\n\n @Input('class') className?: string\n\n get rootClass(): string {\n return cn('border-border bg-card border-y', this.className)\n }\n}\n\n// ------------------------------------------------------------------ Full stack\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-case-study, [ui-case-study]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n UiCaseStudyFeaturedStorySectionComponent,\n UiCaseStudyFilterableListComponent,\n UiCaseStudyMetricCardsComponent,\n UiCaseStudyMetricComparisonComponent,\n UiCaseStudyResultsStripComponent,\n ],\n template: `\n
\n \n \n \n \n \n
\n `,\n})\nexport class UiCaseStudyComponent {\n @Input('class') className?: string\n\n get rootClass(): string {\n return cn('w-full', this.className)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/case-study/case-study.component.ts" }, { "path": "packages/registry-angular/blocks/case-study/index.ts", "content": "export {\n UiCaseStudyComponent,\n UiCaseStudyFeaturedStorySectionComponent,\n UiCaseStudyFilterableListComponent,\n UiCaseStudyMetricCardsComponent,\n UiCaseStudyMetricComparisonComponent,\n UiCaseStudyResultsStripComponent,\n} from './case-study.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/case-study/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/table.json", "https://uipkge.dev/r/angular/toggle-group.json" ], "description": "Customer-proof set pairing a featured split story with a sticky results panel, a filterable story index, three-up metric cards, a before-and-after metric comparison table, and a compact results strip.", "categories": [ "marketing" ] }