@dainamite/cpq 0.2.2

package/src/modules/cpq/backend/cpq/orders/page.meta.ts

@@ -0,0 +1,16 @@
+import React from 'react'
+import { ClipboardList } from 'lucide-react'
+
+const ordersIcon = React.createElement(ClipboardList, { size: 16 })
+
+export const metadata = {
+  requireAuth: true,
+  requireFeatures: ['cpq.orders.view'],
+  pageTitle: 'CPQ Orders',
+  pageTitleKey: 'cpq.orders.title',
+  pageGroup: 'CPQ',
+  pageGroupKey: 'customers~sales~cpq.nav.group',
+  pageOrder: 91,
+  icon: ordersIcon,
+  breadcrumb: [{ label: 'CPQ Orders', labelKey: 'cpq.orders.title' }],
+} as const

package/src/modules/cpq/backend/cpq/orders/page.tsx

@@ -0,0 +1,182 @@
+"use client"
+import * as React from 'react'
+import { useRouter } from 'next/navigation'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { ColumnDef } from '@tanstack/react-table'
+import type { FilterDef, FilterValues } from '@open-mercato/ui/backend/FilterBar'
+import { RowActions } from '@open-mercato/ui/backend/RowActions'
+import { Tag } from '@open-mercato/ui/primitives/tag'
+import { CpqListView, useCpqListData } from '../../../components/CpqListView'
+import {
+  formatStatusLabel,
+  orderCpqStatusMap,
+  type OrderCpqStatus,
+} from '../../../components/statusMaps'
+
+type OrderConfig = {
+  id: string
+  orderId: string
+  orderNumber: string | null
+  customerId: string
+  cpqStatus: string
+  currencyCode: string
+  pricingSummary: {
+    nrcTotal?: number
+    mrcTotal?: number
+  } | null
+  createdAt: string
+  activatedAt: string | null
+}
+
+const PAGE_SIZE = 50
+
+function fmt(amount: number | undefined, currency: string): string {
+  if (amount == null || amount === 0) return '—'
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount)
+}
+
+function buildFilterParams(values: FilterValues, params: URLSearchParams) {
+  if (typeof values.cpqStatus === 'string' && values.cpqStatus) {
+    params.set('cpqStatus', values.cpqStatus)
+  }
+  if (typeof values.currencyCode === 'string' && values.currencyCode.trim()) {
+    params.set('currencyCode', values.currencyCode.trim().toUpperCase())
+  }
+}
+
+export default function CpqOrdersListPage() {
+  const router = useRouter()
+  const t = useT()
+
+  const data = useCpqListData<OrderConfig>({
+    endpoint: '/api/cpq/orders',
+    pageSize: PAGE_SIZE,
+    buildFilterParams,
+    loadErrorMessage: t('cpq.orders.list.error.load', 'Failed to load orders'),
+  })
+
+  const statusOptions = React.useMemo(
+    () => [
+      { value: 'draft', label: 'Draft' },
+      { value: 'pending_activation', label: 'Pending Activation' },
+      { value: 'active', label: 'Active' },
+      { value: 'fulfilled', label: 'Fulfilled' },
+      { value: 'cancelled', label: 'Cancelled' },
+    ],
+    [],
+  )
+
+  const filters = React.useMemo<FilterDef[]>(
+    () => [
+      {
+        id: 'cpqStatus',
+        label: t('cpq.orders.filters.status', 'Status'),
+        type: 'select',
+        options: statusOptions,
+      },
+      {
+        id: 'currencyCode',
+        label: t('cpq.orders.filters.currency', 'Currency'),
+        type: 'text',
+      },
+    ],
+    [statusOptions, t],
+  )
+
+  const columns = React.useMemo<ColumnDef<OrderConfig>[]>(
+    () => [
+      {
+        id: 'orderNumber',
+        header: t('cpq.orders.table.order', 'Order'),
+        cell: ({ row }) => (
+          <span className="text-sm font-medium text-primary">
+            {row.original.orderNumber ?? `${row.original.orderId?.slice(0, 8)}…`}
+          </span>
+        ),
+      },
+      {
+        accessorKey: 'cpqStatus',
+        header: t('cpq.orders.table.status', 'Status'),
+        cell: ({ row }) => (
+          <Tag variant={orderCpqStatusMap[row.original.cpqStatus as OrderCpqStatus] ?? 'neutral'} dot>
+            {formatStatusLabel(row.original.cpqStatus)}
+          </Tag>
+        ),
+      },
+      {
+        accessorKey: 'currencyCode',
+        header: t('cpq.orders.table.currency', 'Currency'),
+        cell: ({ row }) => <span className="text-muted-foreground">{row.original.currencyCode}</span>,
+      },
+      {
+        id: 'nrcTotal',
+        header: t('cpq.orders.table.nrcTotal', 'NRC Total'),
+        cell: ({ row }) => (
+          <span className="font-mono text-xs">
+            {fmt(row.original.pricingSummary?.nrcTotal, row.original.currencyCode)}
+          </span>
+        ),
+      },
+      {
+        id: 'mrcTotal',
+        header: t('cpq.orders.table.mrcTotal', 'MRC Total'),
+        cell: ({ row }) => (
+          <span className="font-mono text-xs">
+            {fmt(row.original.pricingSummary?.mrcTotal, row.original.currencyCode)}
+          </span>
+        ),
+      },
+      {
+        accessorKey: 'createdAt',
+        header: t('cpq.orders.table.createdAt', 'Created'),
+        cell: ({ row }) => (
+          <span className="text-xs text-muted-foreground">
+            {new Date(row.original.createdAt).toLocaleDateString()}
+          </span>
+        ),
+      },
+      {
+        accessorKey: 'activatedAt',
+        header: t('cpq.orders.table.activatedAt', 'Activated'),
+        cell: ({ row }) => (
+          <span className="text-xs text-muted-foreground">
+            {row.original.activatedAt ? new Date(row.original.activatedAt).toLocaleDateString() : '—'}
+          </span>
+        ),
+      },
+    ],
+    [t],
+  )
+
+  return (
+    <CpqListView<OrderConfig>
+      title={t('cpq.orders.list.title', 'CPQ Orders')}
+      tableId="cpq.orders.list"
+      data={data}
+      columns={columns}
+      filters={filters}
+      pageSize={PAGE_SIZE}
+      searchPlaceholder={t('cpq.orders.search.placeholder', 'Search by order / customer id...')}
+      onRowClick={(row) => router.push(`/backend/cpq/orders/${row.id}`)}
+      rowActions={(row) => (
+        <RowActions
+          items={[
+            {
+              id: 'open',
+              label: t('cpq.orders.actions.open', 'Open'),
+              href: `/backend/cpq/orders/${row.id}`,
+            },
+          ]}
+        />
+      )}
+      emptyState={
+        <div className="rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground">
+          {t(
+            'cpq.orders.empty',
+            'No CPQ orders found. Convert an accepted quote to create an order.',
+          )}
+        </div>
+      }
+    />
+  )
+}

package/src/modules/cpq/backend/cpq/price-rules/PriceRuleForm.tsx

@@ -0,0 +1,310 @@
+"use client"
+import * as React from 'react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
+import { NumberInput } from '../../../components/NumberInput'
+
+// ─── Shared types ────────────────────────────────────────────────
+
+export const RULE_TYPE_LABELS: Record<string, string> = {
+  discount_percent: 'Discount %',
+  discount_absolute: 'Discount $',
+  surcharge_percent: 'Surcharge %',
+  surcharge_absolute: 'Surcharge $',
+  price_override: 'Override',
+}
+
+export type PriceRuleApplicabilityCondition = {
+  attribute?: string
+  operator?: string
+  value?: string
+}
+
+export type PriceRule = {
+  id: string
+  code: string
+  name: string
+  description: string | null
+  productOfferingId: string | null
+  productOfferingName: string | null
+  ruleType: string
+  value: number
+  chargeCodeFilter: string | null
+  chargeTypeFilter: string | null
+  applicabilityCondition: Record<string, unknown> | null
+  sortOrder: number
+  isActive: boolean
+}
+
+export type ProductOffering = { id: string; code: string; name: string }
+
+export type PriceRuleFormData = {
+  code: string
+  name: string
+  description: string
+  productOfferingId: string
+  ruleType: string
+  value: string
+  chargeCodeFilter: string
+  chargeTypeFilter: string
+  conditionAttribute: string
+  conditionOperator: string
+  conditionValue: string
+  sortOrder: string
+  isActive: boolean
+}
+
+export const emptyPriceRuleForm: PriceRuleFormData = {
+  code: '',
+  name: '',
+  description: '',
+  productOfferingId: '',
+  ruleType: 'discount_percent',
+  value: '',
+  chargeCodeFilter: '',
+  chargeTypeFilter: '',
+  conditionAttribute: '',
+  conditionOperator: 'eq',
+  conditionValue: '',
+  sortOrder: '0',
+  isActive: true,
+}
+
+export function priceRuleToFormData(rule: PriceRule): PriceRuleFormData {
+  const cond = rule.applicabilityCondition as PriceRuleApplicabilityCondition | null
+  return {
+    code: rule.code,
+    name: rule.name,
+    description: rule.description ?? '',
+    productOfferingId: rule.productOfferingId ?? '',
+    ruleType: rule.ruleType,
+    value: String(rule.value),
+    chargeCodeFilter: rule.chargeCodeFilter ?? '',
+    chargeTypeFilter: rule.chargeTypeFilter ?? '',
+    conditionAttribute: cond?.attribute ?? '',
+    conditionOperator: cond?.operator ?? 'eq',
+    conditionValue: cond?.value ?? '',
+    sortOrder: String(rule.sortOrder),
+    isActive: rule.isActive,
+  }
+}
+
+export function priceRuleFormToPayload(form: PriceRuleFormData): Record<string, unknown> {
+  const payload: Record<string, unknown> = {
+    code: form.code,
+    name: form.name,
+    ruleType: form.ruleType,
+    value: Number(form.value),
+    sortOrder: Number(form.sortOrder),
+    isActive: form.isActive,
+    productOfferingId: form.productOfferingId || null,
+  }
+  if (form.description) payload.description = form.description
+  if (form.chargeCodeFilter) payload.chargeCodeFilter = form.chargeCodeFilter
+  if (form.chargeTypeFilter) payload.chargeTypeFilter = form.chargeTypeFilter
+  if (form.conditionAttribute) {
+    payload.applicabilityCondition = {
+      attribute: form.conditionAttribute,
+      operator: form.conditionOperator || 'eq',
+      value: form.conditionValue,
+    }
+  } else {
+    payload.applicabilityCondition = null
+  }
+  return payload
+}
+
+// ─── Form component ──────────────────────────────────────────────
+
+type PriceRuleFormProps = {
+  editingId: string | null
+  form: PriceRuleFormData
+  onFormChange: (next: PriceRuleFormData) => void
+  offerings: ProductOffering[]
+  saving: boolean
+  error: string | null
+  onSave: () => void
+  onCancel: () => void
+}
+
+export function PriceRuleForm({
+  editingId,
+  form,
+  onFormChange,
+  offerings,
+  saving,
+  error,
+  onSave,
+  onCancel,
+}: PriceRuleFormProps) {
+  return (
+    <div className="rounded-lg border bg-card p-6 space-y-4">
+      <h2 className="text-lg font-semibold">{editingId ? 'Edit Rule' : 'New Rule'}</h2>
+      {error && (
+        <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">{error}</div>
+      )}
+      <div className="grid grid-cols-2 gap-4">
+        <label className="space-y-1">
+          <span className="text-sm font-medium">Code</span>
+          <Input
+            value={form.code}
+            onChange={(e) => onFormChange({ ...form, code: e.target.value })}
+            disabled={!!editingId}
+          />
+        </label>
+        <label className="space-y-1">
+          <span className="text-sm font-medium">Name</span>
+          <Input
+            value={form.name}
+            onChange={(e) => onFormChange({ ...form, name: e.target.value })}
+          />
+        </label>
+        <label className="space-y-1">
+          <span className="text-sm font-medium">Rule Type</span>
+          <Select
+            value={form.ruleType}
+            onValueChange={(value) => onFormChange({ ...form, ruleType: value })}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {Object.entries(RULE_TYPE_LABELS).map(([k, v]) => (
+                <SelectItem key={k} value={k}>
+                  {v}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </label>
+        <label className="space-y-1">
+          <span className="text-sm font-medium">Value</span>
+          <NumberInput
+            value={form.value === '' ? null : Number(form.value)}
+            onChange={(n) => onFormChange({ ...form, value: n == null ? '' : String(n) })}
+          />
+        </label>
+        <label className="space-y-1">
+          <span className="text-sm font-medium">Charge Type Filter</span>
+          <Select
+            value={form.chargeTypeFilter || '__all__'}
+            onValueChange={(value) =>
+              onFormChange({ ...form, chargeTypeFilter: value === '__all__' ? '' : value })
+            }
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="__all__">All charge types</SelectItem>
+              <SelectItem value="nrc">NRC only</SelectItem>
+              <SelectItem value="mrc">MRC only</SelectItem>
+              <SelectItem value="usage">Usage only</SelectItem>
+            </SelectContent>
+          </Select>
+        </label>
+        <label className="space-y-1">
+          <span className="text-sm font-medium">Charge Code Filter</span>
+          <Input
+            placeholder="e.g. setup_fee (leave empty for all)"
+            value={form.chargeCodeFilter}
+            onChange={(e) => onFormChange({ ...form, chargeCodeFilter: e.target.value })}
+          />
+        </label>
+        <label className="space-y-1">
+          <span className="text-sm font-medium">Sort Order</span>
+          <NumberInput
+            integer
+            value={form.sortOrder === '' ? null : Number(form.sortOrder)}
+            onChange={(n) => onFormChange({ ...form, sortOrder: n == null ? '' : String(n) })}
+          />
+        </label>
+        <label className="space-y-1">
+          <span className="text-sm font-medium">Description</span>
+          <Input
+            placeholder="Optional"
+            value={form.description}
+            onChange={(e) => onFormChange({ ...form, description: e.target.value })}
+          />
+        </label>
+        <label className="space-y-1 col-span-2">
+          <span className="text-sm font-medium">Product Offering</span>
+          <Select
+            value={form.productOfferingId || '__global__'}
+            onValueChange={(value) =>
+              onFormChange({ ...form, productOfferingId: value === '__global__' ? '' : value })
+            }
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="__global__">Global (all products)</SelectItem>
+              {offerings.map((o) => (
+                <SelectItem key={o.id} value={o.id}>
+                  {o.name} ({o.code})
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <span className="text-xs text-muted-foreground">
+            Leave as &quot;Global&quot; to apply to all products, or select a specific offering
+          </span>
+        </label>
+        <div className="col-span-2 space-y-1">
+          <span className="text-sm font-medium">Applicability Condition</span>
+          <span className="ml-2 text-xs text-muted-foreground">
+            (optional — only apply when a product attribute matches)
+          </span>
+          <div className="grid grid-cols-3 gap-2">
+            <Input
+              placeholder="Attribute (e.g. port_size)"
+              value={form.conditionAttribute}
+              onChange={(e) => onFormChange({ ...form, conditionAttribute: e.target.value })}
+            />
+            <Select
+              value={form.conditionOperator}
+              onValueChange={(value) => onFormChange({ ...form, conditionOperator: value })}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="eq">equals (=)</SelectItem>
+                <SelectItem value="neq">not equals (≠)</SelectItem>
+              </SelectContent>
+            </Select>
+            <Input
+              placeholder="Value (e.g. 100G)"
+              value={form.conditionValue}
+              onChange={(e) => onFormChange({ ...form, conditionValue: e.target.value })}
+            />
+          </div>
+        </div>
+      </div>
+      <label className="flex items-center gap-2 text-sm">
+        <Checkbox
+          checked={form.isActive}
+          onCheckedChange={(checked) => onFormChange({ ...form, isActive: checked === true })}
+        />
+        Active
+      </label>
+      <div className="flex gap-2">
+        <Button type="button" onClick={onSave} disabled={saving}>
+          {saving ? 'Saving...' : editingId ? 'Update' : 'Create'}
+        </Button>
+        <Button type="button" variant="outline" onClick={onCancel}>
+          Cancel
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/modules/cpq/backend/cpq/price-rules/[id]/page.meta.ts

@@ -0,0 +1,9 @@
+export const metadata = {
+  requireAuth: true,
+  requireFeatures: ['cpq.pricing.view'],
+  navHidden: true,
+  breadcrumb: [
+    { label: 'Price Rules', labelKey: 'cpq.priceRules.list.title', href: '/backend/cpq/price-rules' },
+    { label: 'Rule Detail' },
+  ],
+} as const