@happyvertical/smrt-commerce 0.30.0

package/dist/svelte/components/InvoiceHeader.svelte

@@ -0,0 +1,258 @@
+<script lang="ts">
+/**
+ * InvoiceHeader - Invoice metadata display
+ *
+ * Shows invoice number, status, dates, and customer info.
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.js';
+import type { InvoiceStatus } from '../types.js';
+
+const { t } = useI18n();
+
+/** Props for InvoiceHeader component */
+export interface Props {
+  /** Invoice number/reference */
+  invoiceNumber: string;
+  /** Current status */
+  status: InvoiceStatus;
+  /** Issue date */
+  issueDate: Date | string;
+  /** Due date */
+  dueDate?: Date | string | null;
+  /** Paid date */
+  paidDate?: Date | string | null;
+  /** Customer/client name */
+  customerName?: string;
+  /** Project name */
+  projectName?: string;
+  /** Allow editing */
+  editable?: boolean;
+  /** Called when status changes */
+  onstatuschange?: (status: InvoiceStatus) => void;
+}
+
+const {
+  invoiceNumber,
+  status,
+  issueDate,
+  dueDate,
+  paidDate,
+  customerName,
+  projectName,
+  editable = false,
+  onstatuschange,
+}: Props = $props();
+
+// Format date
+function formatDate(date: Date | string | null | undefined): string {
+  if (!date) return 'N/A';
+  const d = typeof date === 'string' ? new Date(date) : date;
+  return new Intl.DateTimeFormat('en-CA', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  }).format(d);
+}
+
+// Status display config - uses Material 3 color roles
+const statusConfig: Record<
+  InvoiceStatus,
+  { label: string; bg: string; text: string }
+> = {
+  draft: {
+    label: 'Draft',
+    bg: 'var(--smrt-color-surface-variant, #e7e0ec)',
+    text: 'var(--smrt-color-on-surface-variant, #49454f)',
+  },
+  sent: {
+    label: 'Sent',
+    bg: 'var(--smrt-color-primary-container, #d3e3fd)',
+    text: 'var(--smrt-color-on-primary-container, #041e49)',
+  },
+  viewed: {
+    label: 'Viewed',
+    bg: 'var(--smrt-color-secondary-container, #e3e0f9)',
+    text: 'var(--smrt-color-on-secondary-container, #1d192b)',
+  },
+  paid: {
+    label: 'Paid',
+    bg: 'var(--smrt-color-tertiary-container, #ddf5e5)',
+    text: 'var(--smrt-color-on-tertiary-container, #0c1f15)',
+  },
+  overdue: {
+    label: 'Overdue',
+    bg: 'var(--smrt-color-error-container, #ffdad6)',
+    text: 'var(--smrt-color-on-error-container, #410002)',
+  },
+  cancelled: {
+    label: 'Cancelled',
+    bg: 'var(--smrt-color-error-container, #ffdad6)',
+    text: 'var(--smrt-color-error, #ba1a1a)',
+  },
+};
+
+const statusInfo = $derived(statusConfig[status] ?? statusConfig.draft);
+
+// Check if overdue
+const isOverdue = $derived.by(() => {
+  if (status === 'paid' || status === 'cancelled') return false;
+  if (!dueDate) return false;
+  const due = typeof dueDate === 'string' ? new Date(dueDate) : dueDate;
+  return due < new Date();
+});
+</script>
+
+<div class="invoice-header">
+  <div class="header-main">
+    <div class="invoice-title">
+      <h2 class="invoice-number">{invoiceNumber}</h2>
+      <span
+        class="status-badge"
+        style:background-color={isOverdue && status !== 'overdue' ? statusConfig.overdue.bg : statusInfo.bg}
+        style:color={isOverdue && status !== 'overdue' ? statusConfig.overdue.text : statusInfo.text}
+      >
+        {isOverdue && status !== 'overdue' ? 'Overdue' : statusInfo.label}
+      </span>
+    </div>
+
+    {#if customerName || projectName}
+      <div class="invoice-context">
+        {#if customerName}
+          <span class="context-item">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+              <circle cx="8" cy="5" r="3" />
+              <path d="M2 14v-1a4 4 0 014-4h4a4 4 0 014 4v1" />
+            </svg>
+            {customerName}
+          </span>
+        {/if}
+        {#if projectName}
+          <span class="context-item">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+              <path d="M2 4h12v10H2z" />
+              <path d="M5 4V2h6v2" />
+            </svg>
+            {projectName}
+          </span>
+        {/if}
+      </div>
+    {/if}
+  </div>
+
+  <div class="header-meta">
+    <div class="meta-item">
+      <span class="meta-label">{t(M['commerce.invoice_header.issue_date'])}</span>
+      <span class="meta-value">{formatDate(issueDate)}</span>
+    </div>
+
+    {#if dueDate}
+      <div class="meta-item" class:overdue={isOverdue}>
+        <span class="meta-label">{t(M['commerce.invoice_header.due_date'])}</span>
+        <span class="meta-value">{formatDate(dueDate)}</span>
+      </div>
+    {/if}
+
+    {#if paidDate && status === 'paid'}
+      <div class="meta-item paid">
+        <span class="meta-label">{t(M['commerce.invoice_header.paid_date'])}</span>
+        <span class="meta-value">{formatDate(paidDate)}</span>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .invoice-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--smrt-spacing-6, 1.5rem);
+    padding: var(--smrt-spacing-6, 1.5rem);
+    background: var(--smrt-color-surface, #ffffff);
+    border: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    flex-wrap: wrap;
+  }
+
+  .header-main {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-2, 0.5rem);
+  }
+
+  .invoice-title {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-3, 0.75rem);
+  }
+
+  .invoice-number {
+    font: var(--smrt-typography-title-large-font);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    color: var(--smrt-color-on-surface, #1c1b1f);
+    margin: 0;
+  }
+
+  .status-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--smrt-spacing-1, 0.25rem) var(--smrt-spacing-3, 0.75rem);
+    font: var(--smrt-typography-label-small-font);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    border-radius: var(--smrt-radius-full, 9999px);
+    text-transform: capitalize;
+  }
+
+  .invoice-context {
+    display: flex;
+    gap: var(--smrt-spacing-4, 1rem);
+    flex-wrap: wrap;
+  }
+
+  .context-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--smrt-spacing-1_5, 0.375rem);
+    font: var(--smrt-typography-body-medium-font);
+    color: var(--smrt-color-on-surface-variant, #49454f);
+  }
+
+  .context-item svg {
+    flex-shrink: 0;
+  }
+
+  .header-meta {
+    display: flex;
+    gap: var(--smrt-spacing-6, 1.5rem);
+    flex-wrap: wrap;
+  }
+
+  .meta-item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-0_5, 0.125rem);
+  }
+
+  .meta-label {
+    font: var(--smrt-typography-label-small-font);
+    color: var(--smrt-color-on-surface-variant, #49454f);
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+  }
+
+  .meta-value {
+    font: var(--smrt-typography-body-medium-font);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-on-surface, #1c1b1f);
+  }
+
+  .meta-item.overdue .meta-value {
+    color: var(--smrt-color-error, #ba1a1a);
+  }
+
+  .meta-item.paid .meta-value {
+    color: var(--smrt-color-tertiary, #006c4c);
+  }
+</style>

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

@@ -0,0 +1,26 @@
+import type { InvoiceStatus } from '../types.js';
+/** Props for InvoiceHeader component */
+export interface Props {
+    /** Invoice number/reference */
+    invoiceNumber: string;
+    /** Current status */
+    status: InvoiceStatus;
+    /** Issue date */
+    issueDate: Date | string;
+    /** Due date */
+    dueDate?: Date | string | null;
+    /** Paid date */
+    paidDate?: Date | string | null;
+    /** Customer/client name */
+    customerName?: string;
+    /** Project name */
+    projectName?: string;
+    /** Allow editing */
+    editable?: boolean;
+    /** Called when status changes */
+    onstatuschange?: (status: InvoiceStatus) => void;
+}
+declare const InvoiceHeader: import("svelte").Component<Props, {}, "">;
+type InvoiceHeader = ReturnType<typeof InvoiceHeader>;
+export default InvoiceHeader;
+//# sourceMappingURL=InvoiceHeader.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InvoiceHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceHeader.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,wCAAwC;AACxC,MAAM,WAAW,KAAK;IACpB,+BAA+B;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,qBAAqB;IACrB,MAAM,EAAE,aAAa,CAAC;IACtB,iBAAiB;IACjB,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,eAAe;IACf,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,gBAAgB;IAChB,QAAQ,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IAChC,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;CAClD;AA6ID,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/InvoiceLineItems.svelte

@@ -0,0 +1,322 @@
+<script lang="ts">
+/**
+ * InvoiceLineItems - Line items table for invoices/estimates
+ *
+ * Displays line items with optional inline editing capabilities.
+ * Supports both read-only and editable modes.
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { Snippet } from 'svelte';
+import { M } from '../i18n.js';
+import type { LineItem } from '../types.js';
+
+const { t } = useI18n();
+
+/** Props for InvoiceLineItems component */
+export interface Props {
+  /** Line items to display */
+  items: LineItem[];
+  /** Enable editing mode */
+  editable?: boolean;
+  /** Currency code */
+  currency?: 'CAD' | 'USD';
+  /** Called when item is updated */
+  onupdate?: (id: string, item: Partial<LineItem>) => void;
+  /** Called when item is deleted */
+  ondelete?: (id: string) => void;
+  /** Called when add button is clicked */
+  onadd?: () => void;
+  /** Show source type column */
+  showSource?: boolean;
+  /** Empty state message */
+  emptyMessage?: string;
+}
+
+const {
+  items,
+  editable = false,
+  currency = 'CAD',
+  onupdate,
+  ondelete,
+  onadd,
+  showSource = false,
+  emptyMessage = 'No line items',
+}: Props = $props();
+
+// Format cents to dollars
+function formatMoney(cents: number): string {
+  return new Intl.NumberFormat('en-CA', {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: 2,
+  }).format(cents / 100);
+}
+
+// Source type labels
+const sourceLabels: Record<string, string> = {
+  expense: 'Expense',
+  time: 'Time',
+  manual: 'Manual',
+};
+
+// Calculate total
+const total = $derived(items.reduce((sum, item) => sum + item.amount, 0));
+</script>
+
+<div class="line-items-container">
+  {#if items.length === 0}
+    <div class="empty-state">
+      <p>{emptyMessage}</p>
+      {#if editable && onadd}
+        <button type="button" class="add-btn" onclick={onadd}>
+          {t(M['commerce.invoice_line_items.add_item'])}
+        </button>
+      {/if}
+    </div>
+  {:else}
+    <table class="line-items-table">
+      <thead>
+        <tr>
+          <th class="col-description">Description</th>
+          {#if showSource}
+            <th class="col-source">Source</th>
+          {/if}
+          <th class="col-qty">Qty</th>
+          <th class="col-price">{t(M['commerce.invoice_line_items.unit_price'])}</th>
+          <th class="col-amount">Amount</th>
+          {#if editable}
+            <th class="col-actions"></th>
+          {/if}
+        </tr>
+      </thead>
+      <tbody>
+        {#each items as item (item.id)}
+          <tr>
+            <td class="col-description">
+              {#if item.category}
+                <span class="item-category">{item.category}</span>
+              {/if}
+              <span class="item-description">{item.description}</span>
+            </td>
+            {#if showSource}
+              <td class="col-source">
+                <span class="source-badge source-{item.sourceType ?? 'manual'}">
+                  {sourceLabels[item.sourceType ?? 'manual']}
+                </span>
+              </td>
+            {/if}
+            <td class="col-qty">{item.quantity}</td>
+            <td class="col-price">{formatMoney(item.unitPrice)}</td>
+            <td class="col-amount">{formatMoney(item.amount)}</td>
+            {#if editable}
+              <td class="col-actions">
+                <button
+                  type="button"
+                  class="action-btn delete"
+                  title={t(M['commerce.invoice_line_items.remove_item'])}
+                  onclick={() => ondelete?.(item.id)}
+                >
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M4 4l8 8M4 12l8-8" />
+                  </svg>
+                </button>
+              </td>
+            {/if}
+          </tr>
+        {/each}
+      </tbody>
+      <tfoot>
+        <tr class="total-row">
+          <td colspan={showSource ? 4 : 3} class="total-label">Subtotal</td>
+          <td class="col-amount">{formatMoney(total)}</td>
+          {#if editable}
+            <td></td>
+          {/if}
+        </tr>
+      </tfoot>
+    </table>
+
+    {#if editable && onadd}
+      <button type="button" class="add-btn add-btn-below" onclick={onadd}>
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M8 3v10M3 8h10" />
+        </svg>
+        {t(M['commerce.invoice_line_items.add_item'])}
+      </button>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .line-items-container {
+    width: 100%;
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--smrt-spacing-8, 2rem) var(--smrt-spacing-4, 1rem);
+    background: var(--smrt-color-surface-container-low, #f7f2fa);
+    border: 1px dashed var(--smrt-color-outline, #79747e);
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    text-align: center;
+  }
+
+  .empty-state p {
+    color: var(--smrt-color-on-surface-variant, #49454f);
+    margin: 0 0 var(--smrt-spacing-4, 1rem);
+  }
+
+  .line-items-table {
+    width: 100%;
+    border-collapse: collapse;
+    font: var(--smrt-typography-body-medium-font);
+  }
+
+  .line-items-table th {
+    text-align: left;
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-on-surface-variant, #49454f);
+    padding: var(--smrt-spacing-3, 0.75rem) var(--smrt-spacing-2, 0.5rem);
+    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+  }
+
+  .line-items-table td {
+    padding: var(--smrt-spacing-3, 0.75rem) var(--smrt-spacing-2, 0.5rem);
+    border-bottom: 1px solid var(--smrt-color-surface-variant, #e7e0ec);
+    vertical-align: top;
+  }
+
+  .col-description {
+    width: 50%;
+  }
+
+  .col-source {
+    width: 80px;
+  }
+
+  .col-qty {
+    width: 60px;
+    text-align: right;
+  }
+
+  .col-price,
+  .col-amount {
+    width: 100px;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .col-actions {
+    width: 40px;
+    text-align: center;
+  }
+
+  .item-category {
+    display: block;
+    font: var(--smrt-typography-label-small-font);
+    color: var(--smrt-color-on-surface-variant, #49454f);
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+  }
+
+  .item-description {
+    color: var(--smrt-color-on-surface, #1c1b1f);
+  }
+
+  .source-badge {
+    display: inline-block;
+    padding: var(--smrt-spacing-0_5, 0.125rem) var(--smrt-spacing-2, 0.5rem);
+    font: var(--smrt-typography-label-small-font);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    border-radius: var(--smrt-radius-full, 9999px);
+  }
+
+  .source-expense {
+    background: var(--smrt-color-tertiary-container, #ddf5e5);
+    color: var(--smrt-color-on-tertiary-container, #0c1f15);
+  }
+
+  .source-time {
+    background: var(--smrt-color-primary-container, #d3e3fd);
+    color: var(--smrt-color-on-primary-container, #041e49);
+  }
+
+  .source-manual {
+    background: var(--smrt-color-surface-variant, #e7e0ec);
+    color: var(--smrt-color-on-surface-variant, #49454f);
+  }
+
+  .total-row td {
+    border-top: 2px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border-bottom: none;
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    padding-top: var(--smrt-spacing-4, 1rem);
+  }
+
+  .total-label {
+    text-align: right;
+    color: var(--smrt-color-on-surface, #1c1b1f);
+  }
+
+  .action-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    background: transparent;
+    border: none;
+    border-radius: var(--smrt-radius-extra-small, 0.25rem);
+    cursor: pointer;
+    color: var(--smrt-color-on-surface-variant, #49454f);
+    transition: all var(--smrt-duration-fast, 150ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .action-btn {
+      transition: none;
+    }
+  }
+
+  .action-btn:hover {
+    background: var(--smrt-color-surface-variant, #e7e0ec);
+    color: var(--smrt-color-on-surface, #1c1b1f);
+  }
+
+  .action-btn.delete:hover {
+    background: var(--smrt-color-error-container, #ffdad6);
+    color: var(--smrt-color-error, #ba1a1a);
+  }
+
+  .add-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 0.5rem);
+    padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-4, 1rem);
+    font: var(--smrt-typography-label-large-font);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-primary, #005ac1);
+    background: transparent;
+    border: 1px dashed var(--smrt-color-primary, #005ac1);
+    border-radius: var(--smrt-radius-small, 0.375rem);
+    cursor: pointer;
+    transition: all var(--smrt-duration-fast, 150ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .add-btn {
+      transition: none;
+    }
+  }
+
+  .add-btn:hover {
+    background: var(--smrt-color-primary-container, #d3e3fd);
+  }
+
+  .add-btn-below {
+    margin-top: var(--smrt-spacing-3, 0.75rem);
+  }
+</style>

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

@@ -0,0 +1,24 @@
+import type { LineItem } from '../types.js';
+/** Props for InvoiceLineItems component */
+export interface Props {
+    /** Line items to display */
+    items: LineItem[];
+    /** Enable editing mode */
+    editable?: boolean;
+    /** Currency code */
+    currency?: 'CAD' | 'USD';
+    /** Called when item is updated */
+    onupdate?: (id: string, item: Partial<LineItem>) => void;
+    /** Called when item is deleted */
+    ondelete?: (id: string) => void;
+    /** Called when add button is clicked */
+    onadd?: () => void;
+    /** Show source type column */
+    showSource?: boolean;
+    /** Empty state message */
+    emptyMessage?: string;
+}
+declare const InvoiceLineItems: import("svelte").Component<Props, {}, "">;
+type InvoiceLineItems = ReturnType<typeof InvoiceLineItems>;
+export default InvoiceLineItems;
+//# sourceMappingURL=InvoiceLineItems.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InvoiceLineItems.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceLineItems.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG5C,2CAA2C;AAC3C,MAAM,WAAW,KAAK;IACpB,4BAA4B;IAC5B,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IACzD,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,8BAA8B;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA8HD,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}