@happyvertical/smrt-sales 0.39.2

package/dist/svelte/components/CommissionExpenseSummary.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+/**
+ * CommissionExpenseSummary — operator reconciliation of commission expense
+ * vs. payouts (#1933).
+ *
+ * Renders pre-aggregated reconciliation rows and per-currency totals:
+ * accrued commission expense, adjustments, amounts settled via payouts, and
+ * the outstanding net accrual. This is COMMISSION EXPENSE owed to earners —
+ * deliberately separate from client invoices and client revenue/margin.
+ */
+import { formatCents } from '../format.js';
+import type { CommissionExpenseRowView } from '../types.js';
+import { sumExpenseRowsByCurrency } from '../types.js';
+
+export interface Props {
+  /** Pre-aggregated reconciliation rows (per period/program/plan). */
+  rows?: CommissionExpenseRowView[];
+  /** Heading context, e.g. `June 2026`. */
+  periodLabel?: string;
+  /** BCP 47 locale for money formatting. */
+  locale?: string;
+}
+
+let { rows = [], periodLabel, locale }: Props = $props();
+
+const totals = $derived(sumExpenseRowsByCurrency(rows));
+</script>
+
+<div class="sales-expense-summary">
+  <header class="head">
+    <h3>Commission expense{periodLabel ? ` — ${periodLabel}` : ''}</h3>
+    <p class="note">
+      Amounts owed to earners (operator reconciliation). This is commission
+      expense — distinct from client invoices and client revenue.
+    </p>
+  </header>
+
+  {#if rows.length === 0}
+    <p class="empty">Nothing to reconcile for this period.</p>
+  {:else}
+    <dl class="tiles">
+      {#each totals as total (total.currency)}
+        <div class="tile">
+          <dt>Expense ({total.currency})</dt>
+          <dd>{formatCents(total.commissionExpenseCents, total.currency, locale)}</dd>
+        </div>
+        <div class="tile">
+          <dt>Adjustments ({total.currency})</dt>
+          <dd class:negative={total.adjustmentCents < 0}>
+            {formatCents(total.adjustmentCents, total.currency, locale)}
+          </dd>
+        </div>
+        <div class="tile">
+          <dt>Paid out ({total.currency})</dt>
+          <dd>{formatCents(total.payoutCents, total.currency, locale)}</dd>
+        </div>
+        <div class="tile tile--net">
+          <dt>Net accrued ({total.currency})</dt>
+          <dd class:negative={total.netAccruedCents < 0}>
+            {formatCents(total.netAccruedCents, total.currency, locale)}
+          </dd>
+        </div>
+      {/each}
+    </dl>
+
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">Segment</th>
+          <th scope="col" class="num">Expense</th>
+          <th scope="col" class="num">Adjustments</th>
+          <th scope="col" class="num">Paid out</th>
+          <th scope="col" class="num">Net accrued</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each rows as row (row.id)}
+          {@const net = row.commissionExpenseCents + row.adjustmentCents - row.payoutCents}
+          <tr>
+            <td>{row.label}</td>
+            <td class="num">
+              {formatCents(row.commissionExpenseCents, row.currency, locale)}
+            </td>
+            <td class="num" class:negative={row.adjustmentCents < 0}>
+              {formatCents(row.adjustmentCents, row.currency, locale)}
+            </td>
+            <td class="num">{formatCents(row.payoutCents, row.currency, locale)}</td>
+            <td class="num net" class:negative={net < 0}>
+              {formatCents(net, row.currency, locale)}
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</div>
+
+<style>
+  .sales-expense-summary {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-3, 0.75rem);
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  .head h3 {
+    margin: 0;
+    font-size: var(--smrt-typography-title-medium-size, 1rem);
+  }
+
+  .note {
+    margin: var(--smrt-spacing-1, 0.25rem) 0 0;
+    color: var(--smrt-color-on-surface-variant, #64748b);
+    font-size: var(--smrt-typography-body-small-size, 0.8125rem);
+  }
+
+  .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--net {
+    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-weight: var(--smrt-typography-weight-bold, 700);
+  }
+
+  .negative {
+    color: var(--smrt-color-error, #dc2626);
+  }
+
+  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);
+  }
+
+  .num {
+    text-align: right;
+    white-space: nowrap;
+  }
+
+  .net {
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+</style>

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

@@ -0,0 +1,13 @@
+import type { CommissionExpenseRowView } from '../types.js';
+export interface Props {
+    /** Pre-aggregated reconciliation rows (per period/program/plan). */
+    rows?: CommissionExpenseRowView[];
+    /** Heading context, e.g. `June 2026`. */
+    periodLabel?: string;
+    /** BCP 47 locale for money formatting. */
+    locale?: string;
+}
+declare const CommissionExpenseSummary: import("svelte").Component<Props, {}, "">;
+type CommissionExpenseSummary = ReturnType<typeof CommissionExpenseSummary>;
+export default CommissionExpenseSummary;
+//# sourceMappingURL=CommissionExpenseSummary.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommissionExpenseSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/CommissionExpenseSummary.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAI5D,MAAM,WAAW,KAAK;IACpB,oEAAoE;IACpE,IAAI,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAClC,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAsFD,QAAA,MAAM,wBAAwB,2CAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}

package/dist/svelte/components/ExecutedAgreementsList.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+/**
+ * ExecutedAgreementsList — referrer agreement versions (#1933).
+ *
+ * Table of agreement versions: version, status, effective window, the pinned
+ * commission plan (`key@version`), clearing days, approval mode, and the
+ * executed-artifact evidence (URL + content hash) when the agreement has been
+ * executed.
+ */
+import { Badge } from '@happyvertical/smrt-ui/ui';
+import { formatDate } from '../format.js';
+import type { AgreementVersionView } from '../types.js';
+import { agreementStatusBadgeVariant, formatPlanRef } from '../types.js';
+
+export interface Props {
+  /** Agreement versions, newest first by convention. */
+  agreements?: AgreementVersionView[];
+  /** BCP 47 locale for date formatting. */
+  locale?: string;
+}
+
+let { agreements = [], locale }: Props = $props();
+</script>
+
+<div class="sales-agreements">
+  {#if agreements.length === 0}
+    <p class="empty">No agreements yet.</p>
+  {:else}
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">Version</th>
+          <th scope="col">Status</th>
+          <th scope="col">Effective</th>
+          <th scope="col">Commission plan</th>
+          <th scope="col" class="num">Clearing</th>
+          <th scope="col">Approval</th>
+          <th scope="col">Executed artifact</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each agreements as agreement (agreement.id)}
+          <tr>
+            <td>v{agreement.version}</td>
+            <td>
+              <Badge variant={agreementStatusBadgeVariant(agreement.status)} size="sm">
+                {agreement.status}
+              </Badge>
+            </td>
+            <td>
+              {formatDate(agreement.effectiveFrom, locale)}
+              –
+              {#if agreement.effectiveTo}
+                {formatDate(agreement.effectiveTo, locale)}
+              {:else}
+                open-ended
+              {/if}
+            </td>
+            <td>
+              <code>{formatPlanRef(agreement.planKey, agreement.planVersion)}</code>
+            </td>
+            <td class="num">{agreement.clearingDays} days</td>
+            <td>{agreement.approvalMode}</td>
+            <td>
+              {#if agreement.artifactUrl}
+                <a href={agreement.artifactUrl} target="_blank" rel="noopener noreferrer">
+                  executed copy
+                </a>
+                {#if agreement.artifactHash}
+                  <code class="hash" title={agreement.artifactHash}>
+                    {agreement.artifactHash.slice(0, 12)}…
+                  </code>
+                {/if}
+              {:else}
+                —
+              {/if}
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</div>
+
+<style>
+  .sales-agreements {
+    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;
+  }
+
+  .num {
+    text-align: right;
+    white-space: nowrap;
+  }
+
+  code {
+    font-family: var(--smrt-font-family-mono, ui-monospace, monospace);
+    font-size: var(--smrt-typography-body-small-size, 0.8125rem);
+  }
+
+  .hash {
+    margin-left: var(--smrt-spacing-1, 0.25rem);
+    color: var(--smrt-color-on-surface-variant, #64748b);
+  }
+
+  a {
+    color: var(--smrt-color-primary, #2563eb);
+  }
+</style>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExecutedAgreementsList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ExecutedAgreementsList.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,KAAK;IACpB,sDAAsD;IACtD,UAAU,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACpC,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAwED,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/svelte/components/LeadList.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">
+/**
+ * LeadList — CRM lead worklist (#1924).
+ *
+ * Presentational table of leads with owner assignment (rep picker), a qualify
+ * action, status badges, and the open next action per lead. Merged leads show
+ * a merged-into indicator instead of actions. All data arrives via props and
+ * all actions are delegated to callbacks.
+ */
+import { Select } from '@happyvertical/smrt-ui/forms';
+import { Badge, Button } from '@happyvertical/smrt-ui/ui';
+import { formatDate } from '../format.js';
+import type { LeadListItemView, SalesRepOptionView } from '../types.js';
+import { canQualifyLead, isOverdue, leadStatusBadgeVariant } from '../types.js';
+
+export interface Props {
+  /** Leads to display. */
+  leads?: LeadListItemView[];
+  /** Assignable sales representatives for the owner picker. */
+  reps?: SalesRepOptionView[];
+  /** Disable actions while a mutation is in flight. */
+  busy?: boolean;
+  /** BCP 47 locale for date formatting. */
+  locale?: string;
+  /** Assign (or reassign) a lead to a representative. */
+  onAssign?: (leadId: string, repId: string) => void;
+  /** Qualify a lead into an opportunity. */
+  onQualify?: (leadId: string) => void;
+}
+
+let {
+  leads = [],
+  reps = [],
+  busy = false,
+  locale,
+  onAssign,
+  onQualify,
+}: Props = $props();
+
+function handleAssign(leadId: string, event: Event) {
+  const value = (event.currentTarget as HTMLSelectElement).value;
+  if (value) onAssign?.(leadId, value);
+}
+</script>
+
+<div class="sales-lead-list">
+  {#if leads.length === 0}
+    <p class="sales-lead-list__empty">No leads yet.</p>
+  {:else}
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">Lead</th>
+          <th scope="col">Contact</th>
+          <th scope="col">Source</th>
+          <th scope="col">Owner</th>
+          <th scope="col">Status</th>
+          <th scope="col">Next action</th>
+          <th scope="col"><span class="visually-hidden">Actions</span></th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each leads as lead (lead.id)}
+          {@const merged = lead.status === 'merged'}
+          <tr class:merged>
+            <td>
+              <span class="lead-name">{lead.name}</span>
+              {#if lead.organizationName}
+                <span class="secondary">{lead.organizationName}</span>
+              {/if}
+              {#if merged && lead.mergedIntoId}
+                <span class="merged-note">
+                  merged into <code>{lead.mergedIntoId.slice(0, 8)}</code>
+                </span>
+              {/if}
+            </td>
+            <td>
+              {#if lead.contactName}
+                <span class="secondary">{lead.contactName}</span>
+              {/if}
+              {#if lead.email}
+                <span class="secondary">{lead.email}</span>
+              {/if}
+              {#if lead.phone}
+                <span class="secondary">{lead.phone}</span>
+              {/if}
+            </td>
+            <td>{lead.sourceLabel ?? '—'}</td>
+            <td>
+              {#if onAssign && !merged}
+                <Select
+                  value={lead.ownerRepId ?? ''}
+                  disabled={busy}
+                  aria-label={`Assign owner for ${lead.name}`}
+                  onchange={(event) => handleAssign(lead.id, event)}
+                >
+                  <option value="" disabled>Unassigned</option>
+                  {#each reps as rep (rep.id)}
+                    <option value={rep.id}>{rep.name}</option>
+                  {/each}
+                </Select>
+              {:else}
+                {lead.ownerName ?? '—'}
+              {/if}
+            </td>
+            <td>
+              <Badge variant={leadStatusBadgeVariant(lead.status)} size="sm">
+                {lead.status}
+              </Badge>
+            </td>
+            <td>
+              {#if lead.nextAction}
+                <span class="next-action" class:overdue={isOverdue(lead.nextAction.dueAt)}>
+                  {lead.nextAction.summary}
+                </span>
+                {#if lead.nextAction.dueAt}
+                  <span class="secondary">
+                    due {formatDate(lead.nextAction.dueAt, locale)}
+                  </span>
+                {/if}
+              {:else}
+                —
+              {/if}
+            </td>
+            <td class="actions">
+              {#if onQualify && canQualifyLead(lead.status)}
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  disabled={busy}
+                  onclick={() => onQualify?.(lead.id)}
+                >
+                  Qualify
+                </Button>
+              {/if}
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</div>
+
+<style>
+  .sales-lead-list {
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  .sales-lead-list__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;
+  }
+
+  tr.merged td {
+    opacity: 0.65;
+  }
+
+  .lead-name {
+    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);
+  }
+
+  .merged-note {
+    display: block;
+    color: var(--smrt-color-on-surface-variant, #64748b);
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+  }
+
+  .merged-note code {
+    font-family: var(--smrt-font-family-mono, ui-monospace, monospace);
+  }
+
+  .next-action {
+    display: block;
+  }
+
+  .next-action.overdue {
+    color: var(--smrt-color-error, #dc2626);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+  }
+
+  .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/LeadList.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { LeadListItemView, SalesRepOptionView } from '../types.js';
+export interface Props {
+    /** Leads to display. */
+    leads?: LeadListItemView[];
+    /** Assignable sales representatives for the owner picker. */
+    reps?: SalesRepOptionView[];
+    /** Disable actions while a mutation is in flight. */
+    busy?: boolean;
+    /** BCP 47 locale for date formatting. */
+    locale?: string;
+    /** Assign (or reassign) a lead to a representative. */
+    onAssign?: (leadId: string, repId: string) => void;
+    /** Qualify a lead into an opportunity. */
+    onQualify?: (leadId: string) => void;
+}
+declare const LeadList: import("svelte").Component<Props, {}, "">;
+type LeadList = ReturnType<typeof LeadList>;
+export default LeadList;
+//# sourceMappingURL=LeadList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LeadList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/LeadList.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAIxE,MAAM,WAAW,KAAK;IACpB,wBAAwB;IACxB,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,6DAA6D;IAC7D,IAAI,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC5B,qDAAqD;IACrD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAmHD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}