@happyvertical/smrt-sales 0.39.2

package/dist/svelte/components/ReferralLinkManager.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+/**
+ * ReferralLinkManager — referrer-portal share link manager (#1931).
+ *
+ * Lists a referrer's share links (label, code, share URL, clicks, status) and
+ * offers a create form plus per-link enable/disable. The share URL is built
+ * from the host-provided `shareBaseUrl`; creation and status changes are
+ * delegated to callbacks.
+ */
+import { Form, FormGroup, Input } from '@happyvertical/smrt-ui/forms';
+import { Badge, Button } from '@happyvertical/smrt-ui/ui';
+import type { CreateReferralLinkDraft, ReferralLinkView } from '../types.js';
+import {
+  buildShareUrl,
+  isHttpUrl,
+  referralLinkStatusBadgeVariant,
+} from '../types.js';
+
+export interface Props {
+  /** The referrer's links. */
+  links?: ReferralLinkView[];
+  /** Base URL share links are served from (e.g. `https://example.com/r`). */
+  shareBaseUrl?: string;
+  /** Disable actions while a mutation is in flight. */
+  busy?: boolean;
+  /** Create a new share link. */
+  onCreate?: (draft: CreateReferralLinkDraft) => void;
+  /** Enable or disable an existing link. */
+  onSetEnabled?: (linkId: string, enabled: boolean) => void;
+}
+
+let {
+  links = [],
+  shareBaseUrl = '',
+  busy = false,
+  onCreate,
+  onSetEnabled,
+}: Props = $props();
+
+let draftTargetUrl = $state('');
+let draftLabel = $state('');
+
+const canCreate = $derived(isHttpUrl(draftTargetUrl));
+
+function submitCreate() {
+  if (!canCreate) return;
+  const label = draftLabel.trim();
+  onCreate?.({
+    targetUrl: draftTargetUrl.trim(),
+    label: label === '' ? undefined : label,
+  });
+  draftTargetUrl = '';
+  draftLabel = '';
+}
+</script>
+
+<div class="sales-referral-links">
+  {#if onCreate}
+    <Form class="sales-referral-links-create" onsubmit={submitCreate}>
+      <FormGroup
+        label="Destination URL"
+        required
+        hint="Where the share link should send visitors (must be http/https)."
+      >
+        <Input
+          type="url"
+          value={draftTargetUrl}
+          disabled={busy}
+          required
+          oninput={(event) => {
+            draftTargetUrl = (event.currentTarget as HTMLInputElement).value;
+          }}
+        />
+      </FormGroup>
+      <FormGroup label="Label" hint="Optional name for this link.">
+        <Input
+          value={draftLabel}
+          disabled={busy}
+          oninput={(event) => {
+            draftLabel = (event.currentTarget as HTMLInputElement).value;
+          }}
+        />
+      </FormGroup>
+      <Button type="submit" variant="primary" size="sm" disabled={busy || !canCreate}>
+        Create link
+      </Button>
+    </Form>
+  {/if}
+
+  {#if links.length === 0}
+    <p class="empty">No share links yet.</p>
+  {:else}
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">Label</th>
+          <th scope="col">Code</th>
+          <th scope="col">Share URL</th>
+          <th scope="col">Clicks</th>
+          <th scope="col">Status</th>
+          <th scope="col"><span class="visually-hidden">Actions</span></th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each links as link (link.id)}
+          <tr>
+            <td>{link.label ?? '—'}</td>
+            <td><code>{link.code}</code></td>
+            <td class="share-url">
+              {#if shareBaseUrl}
+                <code>{buildShareUrl(shareBaseUrl, link.code)}</code>
+              {:else}
+                —
+              {/if}
+            </td>
+            <td class="clicks">{link.clickCount}</td>
+            <td>
+              <Badge variant={referralLinkStatusBadgeVariant(link.status)} size="sm">
+                {link.status}
+              </Badge>
+            </td>
+            <td class="actions">
+              {#if onSetEnabled}
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  disabled={busy}
+                  onclick={() => onSetEnabled?.(link.id, link.status !== 'active')}
+                >
+                  {link.status === 'active' ? 'Disable' : 'Enable'}
+                </Button>
+              {/if}
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</div>
+
+<style>
+  .sales-referral-links {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-4, 1rem);
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  .sales-referral-links :global(.sales-referral-links-create) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: var(--smrt-spacing-2, 0.5rem);
+  }
+
+  .sales-referral-links :global(.sales-referral-links-create .form-group) {
+    margin-bottom: 0;
+    flex: 1 1 14rem;
+  }
+
+  .empty {
+    margin: 0;
+    color: var(--smrt-color-on-surface-variant, #64748b);
+    font-style: italic;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+  }
+
+  th {
+    padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
+    text-align: left;
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    background: var(--smrt-color-surface-container, #f3f4f6);
+    border-bottom: 1px solid var(--smrt-color-outline-variant, #d8dde6);
+    white-space: nowrap;
+  }
+
+  td {
+    padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
+    border-bottom: 1px solid var(--smrt-color-outline-variant, #d8dde6);
+    vertical-align: middle;
+  }
+
+  code {
+    font-family: var(--smrt-font-family-mono, ui-monospace, monospace);
+    font-size: var(--smrt-typography-body-small-size, 0.8125rem);
+  }
+
+  .share-url {
+    word-break: break-all;
+  }
+
+  .clicks {
+    text-align: right;
+    font-family: var(--smrt-font-family-mono, ui-monospace, monospace);
+  }
+
+  .actions {
+    white-space: nowrap;
+    text-align: right;
+  }
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+</style>

package/dist/svelte/components/ReferralLinkManager.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { CreateReferralLinkDraft, ReferralLinkView } from '../types.js';
+export interface Props {
+    /** The referrer's links. */
+    links?: ReferralLinkView[];
+    /** Base URL share links are served from (e.g. `https://example.com/r`). */
+    shareBaseUrl?: string;
+    /** Disable actions while a mutation is in flight. */
+    busy?: boolean;
+    /** Create a new share link. */
+    onCreate?: (draft: CreateReferralLinkDraft) => void;
+    /** Enable or disable an existing link. */
+    onSetEnabled?: (linkId: string, enabled: boolean) => void;
+}
+declare const ReferralLinkManager: import("svelte").Component<Props, {}, "">;
+type ReferralLinkManager = ReturnType<typeof ReferralLinkManager>;
+export default ReferralLinkManager;
+//# sourceMappingURL=ReferralLinkManager.svelte.d.ts.map

package/dist/svelte/components/ReferralLinkManager.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReferralLinkManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ReferralLinkManager.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAQ7E,MAAM,WAAW,KAAK;IACpB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qDAAqD;IACrD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACpD,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3D;AAqGD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/ReferralStatusList.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+/**
+ * ReferralStatusList — referrer-portal referral status view (#1931).
+ *
+ * Read-only table of a referrer's introductions: lifecycle status badge,
+ * qualifying target kind, credit fraction (with a split indicator when the
+ * referral shares a `splitGroupId`), and the attribution/qualification dates.
+ */
+import { Badge } from '@happyvertical/smrt-ui/ui';
+import { formatDate, formatPercent } from '../format.js';
+import type { ReferralStatusView } from '../types.js';
+import { referralStatusBadgeVariant } from '../types.js';
+
+export interface Props {
+  /** The referrer's referrals, newest first by convention. */
+  referrals?: ReferralStatusView[];
+  /** BCP 47 locale for date/percent formatting. */
+  locale?: string;
+}
+
+let { referrals = [], locale }: Props = $props();
+</script>
+
+<div class="sales-referral-status">
+  {#if referrals.length === 0}
+    <p class="empty">No referrals yet.</p>
+  {:else}
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">Status</th>
+          <th scope="col">Target</th>
+          <th scope="col">Credit</th>
+          <th scope="col">Program</th>
+          <th scope="col">Attributed</th>
+          <th scope="col">Qualified</th>
+          <th scope="col">Expires</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each referrals as referral (referral.id)}
+          <tr>
+            <td>
+              <Badge variant={referralStatusBadgeVariant(referral.status)} size="sm">
+                {referral.status.replace('_', ' ')}
+              </Badge>
+            </td>
+            <td>
+              <span class="target-kind">{referral.targetKind}</span>
+              {#if referral.targetLabel}
+                <span class="secondary">{referral.targetLabel}</span>
+              {/if}
+            </td>
+            <td class="credit">
+              {formatPercent(referral.creditFraction, locale)}
+              {#if referral.splitGroupId}
+                <Badge variant="info" size="sm">split</Badge>
+              {/if}
+            </td>
+            <td>{referral.programName ?? '—'}</td>
+            <td>{formatDate(referral.attributedAt, locale)}</td>
+            <td>{formatDate(referral.qualifiedAt, locale)}</td>
+            <td>{formatDate(referral.expiresAt, locale)}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</div>
+
+<style>
+  .sales-referral-status {
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  .empty {
+    margin: 0;
+    color: var(--smrt-color-on-surface-variant, #64748b);
+    font-style: italic;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+  }
+
+  th {
+    padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
+    text-align: left;
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    background: var(--smrt-color-surface-container, #f3f4f6);
+    border-bottom: 1px solid var(--smrt-color-outline-variant, #d8dde6);
+    white-space: nowrap;
+  }
+
+  td {
+    padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
+    border-bottom: 1px solid var(--smrt-color-outline-variant, #d8dde6);
+    vertical-align: top;
+  }
+
+  .target-kind {
+    display: block;
+    font-weight: var(--smrt-typography-weight-medium, 500);
+  }
+
+  .secondary {
+    display: block;
+    color: var(--smrt-color-on-surface-variant, #64748b);
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+  }
+
+  .credit {
+    white-space: nowrap;
+  }
+</style>

package/dist/svelte/components/ReferralStatusList.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ReferralStatusView } from '../types.js';
+export interface Props {
+    /** The referrer's referrals, newest first by convention. */
+    referrals?: ReferralStatusView[];
+    /** BCP 47 locale for date/percent formatting. */
+    locale?: string;
+}
+declare const ReferralStatusList: import("svelte").Component<Props, {}, "">;
+type ReferralStatusList = ReturnType<typeof ReferralStatusList>;
+export default ReferralStatusList;
+//# sourceMappingURL=ReferralStatusList.svelte.d.ts.map

package/dist/svelte/components/ReferralStatusList.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReferralStatusList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ReferralStatusList.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAItD,MAAM,WAAW,KAAK;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA+DD,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/svelte/components/ReferrerEarningsSummary.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+/**
+ * ReferrerEarningsSummary — referrer-portal balance tiles (#1933).
+ *
+ * Renders an `EarnerBalance`-shaped prop (the computed, never-stored balance
+ * from `CommissionBalanceService`) as tiles: pending, earned, approved,
+ * payable, unsettled adjustments, and net payable. Negative-safe — clawbacks
+ * can drive adjustments and even net payable below zero.
+ */
+import { formatCents } from '../format.js';
+import type { EarnerBalance } from '../types.js';
+
+export interface Props {
+  /** Computed balance for one earner+currency, or `null` before load. */
+  balance?: EarnerBalance | null;
+  /** BCP 47 locale for money formatting. */
+  locale?: string;
+}
+
+let { balance = null, locale }: Props = $props();
+
+interface Tile {
+  label: string;
+  amountCents: number;
+  emphasis?: boolean;
+}
+
+const tiles = $derived.by((): Tile[] => {
+  if (!balance) return [];
+  return [
+    { label: 'Pending (clearing)', amountCents: balance.pendingCents },
+    { label: 'Earned', amountCents: balance.earnedCents },
+    { label: 'Approved', amountCents: balance.approvedCents },
+    { label: 'Payable', amountCents: balance.payableCents },
+    {
+      label: 'Unsettled adjustments',
+      amountCents: balance.unsettledAdjustmentCents,
+    },
+    {
+      label: 'Net payable',
+      amountCents: balance.netPayableCents,
+      emphasis: true,
+    },
+  ];
+});
+</script>
+
+<div class="sales-earnings-summary">
+  {#if !balance}
+    <p class="empty">No earnings yet.</p>
+  {:else}
+    <dl class="tiles">
+      {#each tiles as tile (tile.label)}
+        <div class="tile" class:tile--emphasis={tile.emphasis}>
+          <dt>{tile.label}</dt>
+          <dd class:negative={tile.amountCents < 0}>
+            {formatCents(tile.amountCents, balance.currency, locale)}
+          </dd>
+        </div>
+      {/each}
+    </dl>
+  {/if}
+</div>
+
+<style>
+  .empty {
+    margin: 0;
+    color: var(--smrt-color-on-surface-variant, #64748b);
+    font-style: italic;
+  }
+
+  .tiles {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+    gap: var(--smrt-spacing-3, 0.75rem);
+    margin: 0;
+  }
+
+  .tile {
+    background: var(--smrt-color-surface, #fff);
+    border: 1px solid var(--smrt-color-outline-variant, #d8dde6);
+    border-radius: var(--smrt-radius-md, 8px);
+    padding: var(--smrt-spacing-3, 0.75rem);
+  }
+
+  .tile--emphasis {
+    border-color: var(--smrt-color-primary, #2563eb);
+  }
+
+  .tile dt {
+    color: var(--smrt-color-on-surface-variant, #64748b);
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .tile dd {
+    margin: var(--smrt-spacing-1, 0.25rem) 0 0;
+    font-size: var(--smrt-typography-title-medium-size, 1rem);
+    font-weight: var(--smrt-typography-weight-bold, 700);
+  }
+
+  .tile dd.negative {
+    color: var(--smrt-color-error, #dc2626);
+  }
+</style>

package/dist/svelte/components/ReferrerEarningsSummary.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { EarnerBalance } from '../types.js';
+export interface Props {
+    /** Computed balance for one earner+currency, or `null` before load. */
+    balance?: EarnerBalance | null;
+    /** BCP 47 locale for money formatting. */
+    locale?: string;
+}
+declare const ReferrerEarningsSummary: import("svelte").Component<Props, {}, "">;
+type ReferrerEarningsSummary = ReturnType<typeof ReferrerEarningsSummary>;
+export default ReferrerEarningsSummary;
+//# sourceMappingURL=ReferrerEarningsSummary.svelte.d.ts.map

package/dist/svelte/components/ReferrerEarningsSummary.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReferrerEarningsSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ReferrerEarningsSummary.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,MAAM,WAAW,KAAK;IACpB,uEAAuE;IACvE,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC/B,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyDD,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/svelte/components/SalesDashboard.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+/**
+ * SalesDashboard — CRM composition surface (#1924).
+ *
+ * Summary tiles (open opportunity count, open pipeline value per stage, win
+ * rate) computed from props via the exported pure helpers in `types.ts`, plus
+ * snippet props to embed the board and list surfaces underneath. Multi-currency
+ * pipelines render one total line per currency — amounts are never summed
+ * across currencies.
+ */
+import type { Snippet } from 'svelte';
+import { formatCents, formatPercent } from '../format.js';
+import type { OpportunityCardView, PipelineStageView } from '../types.js';
+import {
+  openOpportunityCount,
+  openPipelineTotals,
+  pipelineValueByStage,
+  winRate,
+} from '../types.js';
+
+export interface Props {
+  /** All opportunities in scope (open and closed — closed feed the win rate). */
+  opportunities?: OpportunityCardView[];
+  /** Pipeline stages, in order (for the per-stage value breakdown). */
+  stages?: PipelineStageView[];
+  /** BCP 47 locale for money/percent formatting. */
+  locale?: string;
+  /** Embedded pipeline board (e.g. an `OpportunityBoard`). */
+  board?: Snippet;
+  /** Embedded lead/opportunity list (e.g. a `LeadList`). */
+  list?: Snippet;
+  /** Additional embedded content rendered last. */
+  children?: Snippet;
+}
+
+let {
+  opportunities = [],
+  stages = [],
+  locale,
+  board,
+  list,
+  children,
+}: Props = $props();
+
+const openCount = $derived(openOpportunityCount(opportunities));
+const totals = $derived(openPipelineTotals(opportunities));
+const byStage = $derived(pipelineValueByStage(stages, opportunities));
+const rate = $derived(winRate(opportunities));
+</script>
+
+<div class="sales-dashboard">
+  <dl class="tiles">
+    <div class="tile">
+      <dt>Open opportunities</dt>
+      <dd>{openCount}</dd>
+    </div>
+    <div class="tile">
+      <dt>Open pipeline value</dt>
+      <dd>
+        {#if totals.length === 0}
+          —
+        {:else}
+          {#each totals as total (total.currency)}
+            <span class="tile__line">
+              {formatCents(total.amountCents, total.currency, locale)}
+            </span>
+          {/each}
+        {/if}
+      </dd>
+    </div>
+    <div class="tile">
+      <dt>Win rate</dt>
+      <dd>{rate === null ? '—' : formatPercent(rate, locale)}</dd>
+    </div>
+  </dl>
+
+  {#if byStage.length > 0}
+    <section class="stages" aria-label="Pipeline value by stage">
+      <h3>Pipeline by stage</h3>
+      <ul class="stages__list">
+        {#each byStage as stage (stage.stageId)}
+          <li class="stages__item">
+            <span class="stages__name">{stage.stageName}</span>
+            <span class="stages__count">{stage.openCount} open</span>
+            <span class="stages__value">
+              {#if stage.totals.length === 0}
+                —
+              {:else}
+                {#each stage.totals as total, index (total.currency)}
+                  {index > 0 ? ' · ' : ''}{formatCents(total.amountCents, total.currency, locale)}
+                {/each}
+              {/if}
+            </span>
+          </li>
+        {/each}
+      </ul>
+    </section>
+  {/if}
+
+  {#if board}
+    <section aria-label="Pipeline board">
+      {@render board()}
+    </section>
+  {/if}
+
+  {#if list}
+    <section aria-label="Lead list">
+      {@render list()}
+    </section>
+  {/if}
+
+  {@render children?.()}
+</div>
+
+<style>
+  .sales-dashboard {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-4, 1rem);
+  }
+
+  .tiles {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+    gap: var(--smrt-spacing-3, 0.75rem);
+    margin: 0;
+  }
+
+  .tile {
+    background: var(--smrt-color-surface, #fff);
+    border: 1px solid var(--smrt-color-outline-variant, #d8dde6);
+    border-radius: var(--smrt-radius-md, 8px);
+    padding: var(--smrt-spacing-3, 0.75rem);
+  }
+
+  .tile dt {
+    color: var(--smrt-color-on-surface-variant, #64748b);
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .tile dd {
+    margin: var(--smrt-spacing-1, 0.25rem) 0 0;
+    font-size: var(--smrt-typography-title-large-size, 1.25rem);
+    font-weight: var(--smrt-typography-weight-bold, 700);
+  }
+
+  .tile__line {
+    display: block;
+  }
+
+  h3 {
+    margin: 0 0 var(--smrt-spacing-2, 0.5rem);
+    font-size: var(--smrt-typography-title-small-size, 0.875rem);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--smrt-color-on-surface-variant, #64748b);
+  }
+
+  .stages__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-1, 0.25rem);
+  }
+
+  .stages__item {
+    display: flex;
+    align-items: baseline;
+    gap: var(--smrt-spacing-2, 0.5rem);
+    padding: var(--smrt-spacing-1, 0.25rem) 0;
+    border-bottom: 1px solid var(--smrt-color-outline-variant, #d8dde6);
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+  }
+
+  .stages__name {
+    flex: 1 1 auto;
+    font-weight: var(--smrt-typography-weight-medium, 500);
+  }
+
+  .stages__count {
+    color: var(--smrt-color-on-surface-variant, #64748b);
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+  }
+
+  .stages__value {
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+</style>