@happyvertical/smrt-sales 0.39.2

package/dist/svelte/components/PayoutBatchReview.svelte

@@ -0,0 +1,285 @@
+<script lang="ts">
+/**
+ * PayoutBatchReview — operator settlement approvals (#1933).
+ *
+ * One card per payout batch with actions gated by the batch status
+ * (`pending → approved → processing → completed | failed`): approve, start
+ * processing, complete (requires a payment reference), and mark failed
+ * (requires a reason). The gating mirrors the CommissionPayout transition
+ * guard via the pure `payoutActionsFor` helper.
+ */
+import { FormGroup, Input } from '@happyvertical/smrt-ui/forms';
+import { Badge, Button, Card } from '@happyvertical/smrt-ui/ui';
+import { formatCents, formatDate } from '../format.js';
+import type { PayoutBatchReviewItemView } from '../types.js';
+import { payoutActionsFor, payoutStatusBadgeVariant } from '../types.js';
+
+export interface Props {
+  /** Payout batches under operator review. */
+  payouts?: PayoutBatchReviewItemView[];
+  /** Disable actions while a mutation is in flight. */
+  busy?: boolean;
+  /** BCP 47 locale for money/date formatting. */
+  locale?: string;
+  /** Approve a pending batch. */
+  onApprove?: (payoutId: string) => void;
+  /** Move an approved batch into processing. */
+  onMarkProcessing?: (payoutId: string) => void;
+  /** Complete a processing batch with the settlement payment reference. */
+  onComplete?: (payoutId: string, paymentReference: string) => void;
+  /** Mark an approved/processing batch failed with a reason. */
+  onFail?: (payoutId: string, reason: string) => void;
+}
+
+let {
+  payouts = [],
+  busy = false,
+  locale,
+  onApprove,
+  onMarkProcessing,
+  onComplete,
+  onFail,
+}: Props = $props();
+
+// Per-payout drafts.
+let referenceDrafts = $state<Record<string, string>>({});
+let failReasonDrafts = $state<Record<string, string>>({});
+
+function setReference(payoutId: string, value: string) {
+  referenceDrafts = { ...referenceDrafts, [payoutId]: value };
+}
+
+function setFailReason(payoutId: string, value: string) {
+  failReasonDrafts = { ...failReasonDrafts, [payoutId]: value };
+}
+
+function complete(payoutId: string) {
+  const reference = (referenceDrafts[payoutId] ?? '').trim();
+  if (reference !== '') onComplete?.(payoutId, reference);
+}
+
+function fail(payoutId: string) {
+  const reason = (failReasonDrafts[payoutId] ?? '').trim();
+  if (reason !== '') onFail?.(payoutId, reason);
+}
+
+function methodLabel(method: string): string {
+  return method.replace(/_/g, ' ');
+}
+</script>
+
+<section class="sales-payout-review">
+  {#if payouts.length === 0}
+    <p class="empty">No payout batches to review.</p>
+  {:else}
+    {#each payouts as payout (payout.id)}
+      {@const actions = payoutActionsFor(payout.status)}
+      <Card variant="outlined">
+        <div class="head">
+          <span class="head__earner">{payout.earnerName ?? 'Earner'}</span>
+          <Badge variant={payoutStatusBadgeVariant(payout.status)} size="sm">
+            {payout.status}
+          </Badge>
+        </div>
+
+        <dl class="facts">
+          <div class="facts__item">
+            <dt>Period</dt>
+            <dd>
+              {formatDate(payout.periodStart, locale)} – {formatDate(payout.periodEnd, locale)}
+            </dd>
+          </div>
+          <div class="facts__item">
+            <dt>Method</dt>
+            <dd>{methodLabel(payout.payoutMethod)}</dd>
+          </div>
+          <div class="facts__item">
+            <dt>Commissions</dt>
+            <dd>{formatCents(payout.commissionTotalCents, payout.currency, locale)}</dd>
+          </div>
+          <div class="facts__item">
+            <dt>Adjustments</dt>
+            <dd class:negative={payout.adjustmentTotalCents < 0}>
+              {formatCents(payout.adjustmentTotalCents, payout.currency, locale)}
+            </dd>
+          </div>
+          <div class="facts__item facts__item--net">
+            <dt>Net</dt>
+            <dd class:negative={payout.totalAmountCents < 0}>
+              {formatCents(payout.totalAmountCents, payout.currency, locale)}
+            </dd>
+          </div>
+        </dl>
+
+        {#if payout.status === 'completed' && payout.paymentReference}
+          <p class="settled">
+            Settled with reference <code>{payout.paymentReference}</code>
+            {#if payout.paidAt}
+              on {formatDate(payout.paidAt, locale)}
+            {/if}
+          </p>
+        {/if}
+
+        {#if payout.status === 'failed' && payout.notes}
+          <p class="failed-note">{payout.notes}</p>
+        {/if}
+
+        {#if actions.canApprove && onApprove}
+          <div class="actions">
+            <Button
+              variant="primary"
+              size="sm"
+              disabled={busy}
+              onclick={() => onApprove?.(payout.id)}
+            >
+              Approve
+            </Button>
+          </div>
+        {/if}
+
+        {#if actions.canMarkProcessing && onMarkProcessing}
+          <div class="actions">
+            <Button
+              variant="secondary"
+              size="sm"
+              disabled={busy}
+              onclick={() => onMarkProcessing?.(payout.id)}
+            >
+              Start processing
+            </Button>
+          </div>
+        {/if}
+
+        {#if actions.canComplete && onComplete}
+          <div class="actions actions--form">
+            <FormGroup
+              label="Payment reference"
+              required
+              hint="Bank/provider reference recorded on the completed batch."
+            >
+              <Input
+                value={referenceDrafts[payout.id] ?? ''}
+                disabled={busy}
+                oninput={(event) =>
+                  setReference(
+                    payout.id,
+                    (event.currentTarget as HTMLInputElement).value,
+                  )}
+              />
+            </FormGroup>
+            <Button
+              variant="primary"
+              size="sm"
+              disabled={busy || (referenceDrafts[payout.id] ?? '').trim() === ''}
+              onclick={() => complete(payout.id)}
+            >
+              Complete
+            </Button>
+          </div>
+        {/if}
+
+        {#if actions.canFail && onFail}
+          <div class="actions actions--form">
+            <FormGroup label="Failure reason" required>
+              <Input
+                value={failReasonDrafts[payout.id] ?? ''}
+                disabled={busy}
+                oninput={(event) =>
+                  setFailReason(
+                    payout.id,
+                    (event.currentTarget as HTMLInputElement).value,
+                  )}
+              />
+            </FormGroup>
+            <Button
+              variant="danger"
+              size="sm"
+              disabled={busy || (failReasonDrafts[payout.id] ?? '').trim() === ''}
+              onclick={() => fail(payout.id)}
+            >
+              Mark failed
+            </Button>
+          </div>
+        {/if}
+      </Card>
+    {/each}
+  {/if}
+</section>
+
+<style>
+  .sales-payout-review {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-4, 1rem);
+  }
+
+  .empty {
+    margin: 0;
+    color: var(--smrt-color-on-surface-variant, #64748b);
+    font-style: italic;
+  }
+
+  .head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--smrt-spacing-2, 0.5rem);
+    margin-bottom: var(--smrt-spacing-2, 0.5rem);
+  }
+
+  .head__earner {
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+
+  .facts {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-4, 1rem);
+    margin: 0 0 var(--smrt-spacing-2, 0.5rem);
+  }
+
+  .facts__item 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;
+  }
+
+  .facts__item dd {
+    margin: 0;
+  }
+
+  .facts__item--net dd {
+    font-weight: var(--smrt-typography-weight-bold, 700);
+  }
+
+  .negative {
+    color: var(--smrt-color-error, #dc2626);
+  }
+
+  .settled {
+    margin: 0 0 var(--smrt-spacing-2, 0.5rem);
+  }
+
+  .failed-note {
+    margin: 0 0 var(--smrt-spacing-2, 0.5rem);
+    color: var(--smrt-color-error, #dc2626);
+  }
+
+  .actions {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--smrt-spacing-2, 0.5rem);
+    margin-top: var(--smrt-spacing-2, 0.5rem);
+  }
+
+  .actions--form :global(.form-group) {
+    margin-bottom: 0;
+    flex: 1 1 14rem;
+  }
+
+  code {
+    font-family: var(--smrt-font-family-mono, ui-monospace, monospace);
+    font-size: var(--smrt-typography-body-small-size, 0.8125rem);
+  }
+</style>

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

@@ -0,0 +1,21 @@
+import type { PayoutBatchReviewItemView } from '../types.js';
+export interface Props {
+    /** Payout batches under operator review. */
+    payouts?: PayoutBatchReviewItemView[];
+    /** Disable actions while a mutation is in flight. */
+    busy?: boolean;
+    /** BCP 47 locale for money/date formatting. */
+    locale?: string;
+    /** Approve a pending batch. */
+    onApprove?: (payoutId: string) => void;
+    /** Move an approved batch into processing. */
+    onMarkProcessing?: (payoutId: string) => void;
+    /** Complete a processing batch with the settlement payment reference. */
+    onComplete?: (payoutId: string, paymentReference: string) => void;
+    /** Mark an approved/processing batch failed with a reason. */
+    onFail?: (payoutId: string, reason: string) => void;
+}
+declare const PayoutBatchReview: import("svelte").Component<Props, {}, "">;
+type PayoutBatchReview = ReturnType<typeof PayoutBatchReview>;
+export default PayoutBatchReview;
+//# sourceMappingURL=PayoutBatchReview.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PayoutBatchReview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PayoutBatchReview.svelte.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,WAAW,KAAK;IACpB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,yBAAyB,EAAE,CAAC;IACtC,qDAAqD;IACrD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,yEAAyE;IACzE,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,8DAA8D;IAC9D,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AA4JD,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/svelte/components/PayoutHistoryList.svelte

@@ -0,0 +1,245 @@
+<script lang="ts">
+/**
+ * PayoutHistoryList — settlement batch history (#1933).
+ *
+ * One card per payout batch: settlement period, totals (commission /
+ * adjustments / net), delivery method, a linear status timeline
+ * (`pending → approved → processing → completed`, with `failed` as the
+ * terminal marker when a batch fails), and payment references when present.
+ */
+import { Badge } from '@happyvertical/smrt-ui/ui';
+import { formatCents, formatDate } from '../format.js';
+import type { PayoutView } from '../types.js';
+import { payoutStatusBadgeVariant, payoutStatusTimeline } from '../types.js';
+
+export interface Props {
+  /** Payout batches, newest first by convention. */
+  payouts?: PayoutView[];
+  /** BCP 47 locale for money/date formatting. */
+  locale?: string;
+}
+
+let { payouts = [], locale }: Props = $props();
+
+function methodLabel(method: string): string {
+  return method.replace(/_/g, ' ');
+}
+</script>
+
+<div class="sales-payout-history">
+  {#if payouts.length === 0}
+    <p class="empty">No payouts yet.</p>
+  {:else}
+    <ul class="list">
+      {#each payouts as payout (payout.id)}
+        <li class="payout">
+          <div class="payout__head">
+            <span class="payout__period">
+              {formatDate(payout.periodStart, locale)} – {formatDate(payout.periodEnd, locale)}
+            </span>
+            <span class="payout__head-right">
+              <span class="payout__method">{methodLabel(payout.payoutMethod)}</span>
+              <Badge variant={payoutStatusBadgeVariant(payout.status)} size="sm">
+                {payout.status}
+              </Badge>
+            </span>
+          </div>
+
+          <dl class="totals">
+            <div class="totals__item">
+              <dt>Commissions</dt>
+              <dd>{formatCents(payout.commissionTotalCents, payout.currency, locale)}</dd>
+            </div>
+            <div class="totals__item">
+              <dt>Adjustments</dt>
+              <dd class:negative={payout.adjustmentTotalCents < 0}>
+                {formatCents(payout.adjustmentTotalCents, payout.currency, locale)}
+              </dd>
+            </div>
+            <div class="totals__item totals__item--net">
+              <dt>Net</dt>
+              <dd class:negative={payout.totalAmountCents < 0}>
+                {formatCents(payout.totalAmountCents, payout.currency, locale)}
+              </dd>
+            </div>
+          </dl>
+
+          <ol class="timeline">
+            {#each payoutStatusTimeline(payout.status) as step (step.status)}
+              <li
+                class="timeline__step timeline__step--{step.state}"
+                class:timeline__step--failed={step.status === 'failed'}
+                aria-current={step.state === 'current' ? 'step' : undefined}
+              >
+                {step.status}
+              </li>
+            {/each}
+          </ol>
+
+          {#if payout.paymentReference || payout.providerRef || payout.paidAt}
+            <dl class="refs">
+              {#if payout.paymentReference}
+                <div class="refs__item">
+                  <dt>Payment reference</dt>
+                  <dd><code>{payout.paymentReference}</code></dd>
+                </div>
+              {/if}
+              {#if payout.providerRef}
+                <div class="refs__item">
+                  <dt>Provider reference</dt>
+                  <dd><code>{payout.providerRef}</code></dd>
+                </div>
+              {/if}
+              {#if payout.paidAt}
+                <div class="refs__item">
+                  <dt>Paid</dt>
+                  <dd>{formatDate(payout.paidAt, locale)}</dd>
+                </div>
+              {/if}
+            </dl>
+          {/if}
+
+          {#if payout.notes}
+            <p class="notes">{payout.notes}</p>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .empty {
+    margin: 0;
+    color: var(--smrt-color-on-surface-variant, #64748b);
+    font-style: italic;
+  }
+
+  .list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-3, 0.75rem);
+  }
+
+  .payout {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-2, 0.5rem);
+    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);
+  }
+
+  .payout__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--smrt-spacing-2, 0.5rem);
+  }
+
+  .payout__period {
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+
+  .payout__head-right {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 0.5rem);
+  }
+
+  .payout__method {
+    color: var(--smrt-color-on-surface-variant, #64748b);
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+  }
+
+  .totals {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-4, 1rem);
+    margin: 0;
+  }
+
+  .totals__item 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;
+  }
+
+  .totals__item dd {
+    margin: 0;
+  }
+
+  .totals__item--net dd {
+    font-weight: var(--smrt-typography-weight-bold, 700);
+  }
+
+  .negative {
+    color: var(--smrt-color-error, #dc2626);
+  }
+
+  .timeline {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-1, 0.25rem);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .timeline__step {
+    padding: var(--smrt-spacing-0_5, 0.125rem) var(--smrt-spacing-2, 0.5rem);
+    border-radius: var(--smrt-radius-full, 9999px);
+    border: 1px solid var(--smrt-color-outline-variant, #d8dde6);
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant, #64748b);
+  }
+
+  .timeline__step--done {
+    background: var(--smrt-color-surface-container, #f3f4f6);
+  }
+
+  .timeline__step--current {
+    border-color: var(--smrt-color-primary, #2563eb);
+    color: var(--smrt-color-primary, #2563eb);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+
+  .timeline__step--current.timeline__step--failed {
+    border-color: var(--smrt-color-error, #dc2626);
+    color: var(--smrt-color-error, #dc2626);
+  }
+
+  .refs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-4, 1rem);
+    margin: 0;
+  }
+
+  .refs__item 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;
+  }
+
+  .refs__item dd {
+    margin: 0;
+  }
+
+  code {
+    font-family: var(--smrt-font-family-mono, ui-monospace, monospace);
+    font-size: var(--smrt-typography-body-small-size, 0.8125rem);
+  }
+
+  .notes {
+    margin: 0;
+    color: var(--smrt-color-on-surface-variant, #64748b);
+    font-size: var(--smrt-typography-body-small-size, 0.8125rem);
+  }
+</style>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PayoutHistoryList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PayoutHistoryList.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,MAAM,WAAW,KAAK;IACpB,kDAAkD;IAClD,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAkGD,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}