@dainamite/cpq 0.2.2

package/src/modules/cpq/components/StatusPath.tsx

@@ -0,0 +1,116 @@
+"use client"
+import * as React from 'react'
+import { ChevronRight } from 'lucide-react'
+import { Tag } from '@open-mercato/ui/primitives/tag'
+import type { TagMap } from '@open-mercato/ui/primitives/tag'
+import { formatStatusLabel } from './statusMaps'
+
+// Generic horizontal status breadcrumb shared by quotes, orders,
+// subscriptions, and assets. Each consumer passes its own `path`
+// (happy-path order) + `terminals` (off-path failure / cancellation
+// states always rendered at the end) + `statusMap` (status → Tag
+// variant for colours).
+//
+// Two interaction modes:
+//   - read-only: omit `onTransition`. Path renders as a progress
+//     indicator only.
+//   - interactive: pass `onTransition`. Every non-current step
+//     becomes a button that calls `onTransition(target)`. If
+//     `allowedTransitions` is provided, only those targets are
+//     clickable; otherwise all non-current steps are clickable.
+
+type TagVariant = TagMap<string>[string]
+
+export function StatusPath({
+  current,
+  path: happyPath,
+  terminals = [],
+  statusMap,
+  labels,
+  onTransition,
+  allowedTransitions,
+  disabled,
+  ariaLabel = 'Status path',
+}: {
+  current: string
+  /** Happy-path statuses in order. */
+  path: string[]
+  /** Off-path terminal statuses always rendered after the happy path. */
+  terminals?: string[]
+  /** Status → Tag variant. Missing entries fall back to "neutral". */
+  statusMap: Record<string, TagVariant>
+  /** Optional human labels (overrides `formatStatusLabel`). */
+  labels?: Record<string, string>
+  /** Click handler. Omit for read-only path. */
+  onTransition?: (target: string) => void
+  /** If set, only these targets are clickable. Else any non-current. */
+  allowedTransitions?: string[]
+  disabled?: boolean
+  ariaLabel?: string
+}) {
+  // Build the displayed sequence. Aliases can swap into the happy
+  // path slot (e.g. quote's `pre_approved` shown as `approved`). We
+  // don't handle aliasing here — consumers can swap entries in
+  // their own happyPath before passing it in.
+  const sequence = React.useMemo<string[]>(
+    () => [...happyPath, ...terminals],
+    [happyPath, terminals],
+  )
+
+  const currentIdx = sequence.findIndex((s) => s === current)
+  const interactiveMode = typeof onTransition === 'function'
+
+  return (
+    <nav aria-label={ariaLabel} className="flex items-center gap-1.5 flex-wrap text-xs">
+      {sequence.map((status, idx) => {
+        const reached = currentIdx >= 0 && idx <= currentIdx
+        const isCurrent = status === current
+        const variant = statusMap[status] ?? 'neutral'
+        const label = labels?.[status] ?? formatStatusLabel(status)
+        const tagClass = isCurrent
+          ? 'ring-2 ring-primary/40'
+          : reached
+            ? ''
+            : 'opacity-60'
+        // Clickability: interactive mode + not current + not disabled
+        // + (no allowedTransitions list OR status is in the list).
+        const clickable =
+          interactiveMode &&
+          !isCurrent &&
+          !disabled &&
+          (allowedTransitions ? allowedTransitions.includes(status) : true)
+        const wrapperClass = clickable
+          ? 'cursor-pointer hover:ring-2 hover:ring-primary/30 rounded-full'
+          : ''
+
+        return (
+          <React.Fragment key={status}>
+            {idx > 0 && <ChevronRight className="h-3 w-3 text-muted-foreground shrink-0" />}
+            {clickable ? (
+              <button
+                type="button"
+                onClick={() => onTransition!(status)}
+                aria-current={isCurrent ? 'step' : undefined}
+                title={`Transition to ${label}`}
+                className={wrapperClass}
+              >
+                <Tag variant={variant} dot={isCurrent} className={tagClass}>
+                  {label}
+                </Tag>
+              </button>
+            ) : (
+              <Tag
+                variant={variant}
+                dot={isCurrent}
+                className={tagClass}
+                aria-current={isCurrent ? 'step' : undefined}
+              >
+                {label}
+              </Tag>
+            )}
+          </React.Fragment>
+        )
+      })}
+    </nav>
+  )
+}

package/src/modules/cpq/components/statusMaps.ts

@@ -0,0 +1,148 @@
+// Centralised CPQ status → OM Tag variant mapping.
+//
+// All status pills across CPQ must use these maps so the visual contract is
+// single-sourced and changes propagate everywhere. Never hand-roll
+// `bg-green-100 text-green-800` etc. — the OM design system uses tokenised
+// status colors (see `src/app/globals.css` for `--status-{success,warning,
+// error,info,neutral}-*`). Reach for `<Tag variant={STATUS_MAP[value]} dot>`.
+
+import type { TagMap } from '@open-mercato/ui/primitives/tag'
+
+// ─── Unified lifecycle (specifications + offerings) ──────────────
+//
+// Both surfaces collapsed `retired` into `deprecated` after reviewer
+// feedback: a single 3-state ladder keeps the UI uniform and the
+// "what does retired mean here?" footnote goes away. Existing rows
+// were migrated by:
+//   - `<timestamp>-merge-spec-retired-into-deprecated.ts`
+//   - `<timestamp>-merge-offering-retired-into-deprecated.ts`
+
+export type LifecycleStatus = 'draft' | 'active' | 'deprecated'
+
+export const lifecycleStatusMap: TagMap<LifecycleStatus> = {
+  draft: 'neutral',
+  active: 'success',
+  deprecated: 'warning',
+}
+
+/**
+ * @deprecated Use `LifecycleStatus` — kept as a re-export to avoid churn
+ * in spec detail / list pages that imported this name.
+ */
+export type SpecificationLifecycleStatus = LifecycleStatus
+
+/** @deprecated Use `lifecycleStatusMap`. */
+export const specificationLifecycleStatusMap = lifecycleStatusMap
+
+// ─── Quote CPQ status ────────────────────────────────────────────
+
+export type QuoteCpqStatus =
+  | 'new'
+  | 'incomplete'
+  | 'ready'
+  | 'in_approval'
+  | 'approved'
+  | 'with_customer'
+  | 'accepted'
+  | 'rejected'
+  | 'cancelled'
+
+export const quoteCpqStatusMap: TagMap<QuoteCpqStatus> = {
+  new: 'info',
+  incomplete: 'warning',
+  ready: 'success',
+  in_approval: 'brand',
+  approved: 'success',
+  with_customer: 'info',
+  accepted: 'success',
+  rejected: 'error',
+  cancelled: 'neutral',
+}
+
+// ─── Order CPQ status ────────────────────────────────────────────
+
+export type OrderCpqStatus =
+  | 'draft'
+  | 'pending_activation'
+  | 'active'
+  | 'fulfilled'
+  | 'cancelled'
+
+export const orderCpqStatusMap: TagMap<OrderCpqStatus> = {
+  draft: 'info',
+  pending_activation: 'warning',
+  active: 'success',
+  fulfilled: 'success',
+  cancelled: 'neutral',
+}
+
+// ─── Inventory subscription status ───────────────────────────────
+
+export type SubscriptionStatus =
+  | 'pending'
+  | 'active'
+  | 'suspended'
+  | 'terminated'
+  | 'expired'
+  | 'cancelled'
+
+export const subscriptionStatusMap: TagMap<SubscriptionStatus> = {
+  pending: 'info',
+  active: 'success',
+  suspended: 'warning',
+  terminated: 'error',
+  expired: 'neutral',
+  cancelled: 'neutral',
+}
+
+// ─── Inventory asset status ──────────────────────────────────────
+
+export type AssetStatus = 'pending' | 'delivered' | 'active' | 'returned' | 'cancelled'
+
+export const assetStatusMap: TagMap<AssetStatus> = {
+  pending: 'info',
+  delivered: 'success',
+  active: 'success',
+  returned: 'warning',
+  cancelled: 'neutral',
+}
+
+// ─── Pricing rule type ───────────────────────────────────────────
+
+export type PriceRuleType =
+  | 'discount_percent'
+  | 'discount_absolute'
+  | 'surcharge_percent'
+  | 'surcharge_absolute'
+  | 'price_override'
+
+export const priceRuleTypeMap: TagMap<PriceRuleType> = {
+  discount_percent: 'success',
+  discount_absolute: 'success',
+  surcharge_percent: 'warning',
+  surcharge_absolute: 'warning',
+  price_override: 'info',
+}
+
+// ─── Charge type ─────────────────────────────────────────────────
+
+export type ChargeType = 'mrc' | 'nrc' | 'usage'
+
+export const chargeTypeMap: TagMap<ChargeType> = {
+  mrc: 'info',
+  nrc: 'success',
+  usage: 'brand',
+}
+
+// ─── Helper to format a status into a human label ────────────────
+
+/**
+ * Normalises a snake_case status to a Title Case display label.
+ * `pending_activation` → `Pending Activation`.
+ */
+export function formatStatusLabel(status: string): string {
+  return status
+    .split('_')
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ')
+}

package/src/modules/cpq/components/useCpqRowActions.tsx

@@ -0,0 +1,183 @@
+"use client"
+import * as React from 'react'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { type RowActionItem } from '@open-mercato/ui/backend/RowActions'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
+
+// ─── Types ───────────────────────────────────────────────────────
+
+export type UseCpqRowActionsOptions<T extends { id: string }> = {
+  /** DELETE endpoint that accepts `{ id }` body (e.g. `/api/cpq/product-offerings`). */
+  endpoint: string
+  /**
+   * Singular noun for the entity, used in confirm + flash messages.
+   * E.g. `'offering'`, `'pricing table'`, `'price rule'`.
+   */
+  entityName: string
+  /**
+   * Build the href for the row's edit/detail page (e.g. `(row) =>
+   * `/backend/cpq/offerings/${row.id}`).
+   */
+  editHref: (row: T) => string
+  /** Reload the table after a successful delete. */
+  onReload: () => void
+  /**
+   * Override the row-deletion guard. Returning `false` skips the
+   * delete request without flashing an error (e.g. when the row is in a
+   * lifecycle state that disallows deletion).
+   */
+  canDelete?: (row: T) => boolean
+}
+
+export type CpqRowActionsApi<T extends { id: string }> = {
+  /**
+   * Items for `<RowActions>` for a single row. Always returns
+   * `Edit` + `Delete` — extras can be prepended / appended.
+   */
+  buildItems: (row: T, extras?: { prepend?: RowActionItem[]; append?: RowActionItem[] }) => RowActionItem[]
+  /**
+   * Bulk-delete handler suitable for `<DataTable bulkActions>`. Confirms once
+   * for the whole selection, then issues `DELETE` requests sequentially so
+   * a partial failure stops cleanly. Reports per-row failures via `flash`.
+   *
+   * Note: sequential by design — DELETE on the same table from N parallel
+   * requests can deadlock at the row-lock level under load. Chunked
+   * parallelism would be the next step if selection counts grow > ~200.
+   */
+  bulkDelete: (rows: T[]) => Promise<{ ok: boolean; affectedCount?: number }>
+  /**
+   * Render this element somewhere in the page (typically as the
+   * `footerContent` slot of `<CpqListView>`) so the confirm dialog
+   * portal mounts.
+   */
+  ConfirmDialogElement: React.ReactNode
+}
+
+// ─── Implementation ──────────────────────────────────────────────
+
+export function useCpqRowActions<T extends { id: string }>(
+  options: UseCpqRowActionsOptions<T>,
+): CpqRowActionsApi<T> {
+  const { endpoint, entityName, editHref, onReload, canDelete } = options
+  const t = useT()
+  const { confirm, ConfirmDialogElement } = useConfirmDialog()
+
+  const deleteOne = React.useCallback(
+    async (id: string) => {
+      const res = await fetch(endpoint, {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id }),
+      })
+      return res.ok
+    },
+    [endpoint],
+  )
+
+  const singleDelete = React.useCallback(
+    async (row: T) => {
+      if (canDelete && !canDelete(row)) return
+      const confirmed = await confirm({
+        title: t(
+          'cpq.rowActions.deleteOne.confirm',
+          `Delete this ${entityName}?`,
+        ),
+        variant: 'destructive',
+      })
+      if (!confirmed) return
+      const ok = await deleteOne(row.id)
+      if (!ok) {
+        flash(
+          t('cpq.rowActions.deleteOne.error', `Failed to delete ${entityName}`),
+          'error',
+        )
+        return
+      }
+      flash(t('cpq.rowActions.deleteOne.success', `${entityName} deleted`), 'success')
+      onReload()
+    },
+    [canDelete, confirm, deleteOne, entityName, onReload, t],
+  )
+
+  const bulkDelete = React.useCallback(
+    async (rows: T[]) => {
+      if (!rows.length) return { ok: false }
+      const eligible = canDelete ? rows.filter(canDelete) : rows
+      if (!eligible.length) {
+        flash(
+          t(
+            'cpq.rowActions.deleteBulk.noEligible',
+            `None of the selected ${entityName}s can be deleted in their current state.`,
+          ),
+          'error',
+        )
+        return { ok: false }
+      }
+      const confirmed = await confirm({
+        title: t(
+          'cpq.rowActions.deleteBulk.confirm',
+          `Delete ${eligible.length} ${entityName}${eligible.length > 1 ? 's' : ''}?`,
+        ),
+        variant: 'destructive',
+      })
+      if (!confirmed) return { ok: false }
+
+      let failed = 0
+      for (const row of eligible) {
+        const ok = await deleteOne(row.id)
+        if (!ok) failed += 1
+      }
+
+      if (failed > 0) {
+        flash(
+          t(
+            'cpq.rowActions.deleteBulk.partialError',
+            `Failed to delete ${failed} ${entityName}${failed > 1 ? 's' : ''}`,
+          ),
+          'error',
+        )
+      } else {
+        flash(
+          t('cpq.rowActions.deleteBulk.success', `${entityName}s deleted`),
+          'success',
+        )
+      }
+      onReload()
+      return { ok: failed === 0, affectedCount: eligible.length - failed }
+    },
+    [canDelete, confirm, deleteOne, entityName, onReload, t],
+  )
+
+  const buildItems = React.useCallback(
+    (row: T, extras?: { prepend?: RowActionItem[]; append?: RowActionItem[] }): RowActionItem[] => {
+      const items: RowActionItem[] = []
+      if (extras?.prepend) items.push(...extras.prepend)
+      items.push({
+        id: 'edit',
+        label: t('cpq.rowActions.edit', 'Edit'),
+        href: editHref(row),
+      })
+      if (extras?.append) items.push(...extras.append)
+      const deletable = !canDelete || canDelete(row)
+      if (deletable) {
+        items.push({
+          id: 'delete',
+          label: t('cpq.rowActions.delete', 'Delete'),
+          destructive: true,
+          onSelect: () => {
+            void singleDelete(row)
+          },
+        })
+      }
+      return items
+    },
+    [canDelete, editHref, singleDelete, t],
+  )
+
+  return {
+    buildItems,
+    bulkDelete,
+    ConfirmDialogElement,
+  }
+}