@dainamite/cpq 0.2.2

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

@@ -0,0 +1,253 @@
+"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 { Button } from '@open-mercato/ui/primitives/button'
+import { Tag } from '@open-mercato/ui/primitives/tag'
+import type { FilterDef, FilterValues } from '@open-mercato/ui/backend/FilterBar'
+import { CpqListView, useCpqListData } from '../../../components/CpqListView'
+import {
+  PriceRuleForm,
+  RULE_TYPE_LABELS,
+  emptyPriceRuleForm,
+  priceRuleFormToPayload,
+  type PriceRule,
+  type PriceRuleFormData,
+  type ProductOffering,
+} from './PriceRuleForm'
+
+const PAGE_SIZE = 50
+
+function buildFilterParams(values: FilterValues, params: URLSearchParams) {
+  if (typeof values.ruleType === 'string' && values.ruleType) {
+    params.set('ruleType', values.ruleType)
+  }
+  if (typeof values.chargeTypeFilter === 'string' && values.chargeTypeFilter) {
+    params.set('chargeTypeFilter', values.chargeTypeFilter)
+  }
+  if (values.globalOnly === true) params.set('globalOnly', 'true')
+  if (values.isActive === true) params.set('isActive', 'true')
+  if (values.isActive === false) params.set('isActive', 'false')
+}
+
+function formatValue(rule: PriceRule) {
+  if (rule.ruleType.includes('percent')) return `${rule.value}%`
+  if (rule.ruleType === 'price_override') return `= ${rule.value}`
+  return `${rule.value}`
+}
+
+export default function PriceRulesPage() {
+  const t = useT()
+  const router = useRouter()
+
+  const data = useCpqListData<PriceRule>({
+    endpoint: '/api/cpq/price-rules',
+    pageSize: PAGE_SIZE,
+    initialSorting: [{ id: 'sortOrder', desc: false }],
+    buildFilterParams,
+    loadErrorMessage: t('cpq.priceRules.list.error.load', 'Failed to load price rules'),
+  })
+
+  const [showForm, setShowForm] = React.useState(false)
+  const [form, setForm] = React.useState<PriceRuleFormData>(emptyPriceRuleForm)
+  const [saving, setSaving] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+  const [offerings, setOfferings] = React.useState<ProductOffering[]>([])
+
+  React.useEffect(() => {
+    fetch('/api/cpq/product-offerings?pageSize=100')
+      .then((r) => r.json())
+      .then((d) => setOfferings(d.items ?? []))
+      .catch(() => {})
+  }, [])
+
+  const ruleTypeOptions = React.useMemo(
+    () => Object.entries(RULE_TYPE_LABELS).map(([value, label]) => ({ value, label })),
+    [],
+  )
+
+  const chargeTypeOptions = React.useMemo(
+    () => [
+      { value: 'nrc', label: 'NRC' },
+      { value: 'mrc', label: 'MRC' },
+      { value: 'usage', label: 'Usage' },
+    ],
+    [],
+  )
+
+  const filters = React.useMemo<FilterDef[]>(
+    () => [
+      {
+        id: 'ruleType',
+        label: t('cpq.priceRules.filters.ruleType', 'Rule Type'),
+        type: 'select',
+        options: ruleTypeOptions,
+      },
+      {
+        id: 'chargeTypeFilter',
+        label: t('cpq.priceRules.filters.chargeType', 'Charge Type'),
+        type: 'select',
+        options: chargeTypeOptions,
+      },
+      {
+        id: 'globalOnly',
+        label: t('cpq.priceRules.filters.globalOnly', 'Global only'),
+        type: 'checkbox',
+      },
+      {
+        id: 'isActive',
+        label: t('cpq.priceRules.filters.isActive', 'Active'),
+        type: 'checkbox',
+      },
+    ],
+    [chargeTypeOptions, ruleTypeOptions, t],
+  )
+
+  const openCreate = React.useCallback(() => {
+    setForm(emptyPriceRuleForm)
+    setError(null)
+    setShowForm(true)
+  }, [])
+
+  const handleSave = React.useCallback(async () => {
+    setSaving(true)
+    setError(null)
+    try {
+      const payload = priceRuleFormToPayload(form)
+      const res = await fetch('/api/cpq/price-rules', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      })
+      if (!res.ok) {
+        const err = await res.json()
+        throw new Error(err.details ? JSON.stringify(err.details) : err.error ?? 'Failed to create')
+      }
+      setShowForm(false)
+      data.reload()
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Unknown error')
+    } finally {
+      setSaving(false)
+    }
+  }, [data, form])
+
+  const columns = React.useMemo<ColumnDef<PriceRule>[]>(
+    () => [
+      {
+        accessorKey: 'sortOrder',
+        header: t('cpq.priceRules.table.order', 'Order'),
+        cell: ({ row }) => <span className="text-muted-foreground">{row.original.sortOrder}</span>,
+      },
+      {
+        accessorKey: 'name',
+        header: t('cpq.priceRules.table.name', 'Name'),
+        cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
+      },
+      {
+        accessorKey: 'code',
+        header: t('cpq.priceRules.table.code', 'Code'),
+        cell: ({ row }) => <span className="font-mono text-xs">{row.original.code}</span>,
+      },
+      {
+        accessorKey: 'ruleType',
+        header: t('cpq.priceRules.table.type', 'Type'),
+        cell: ({ row }) => (
+          <span>{RULE_TYPE_LABELS[row.original.ruleType] ?? row.original.ruleType}</span>
+        ),
+      },
+      {
+        id: 'value',
+        header: t('cpq.priceRules.table.value', 'Value'),
+        cell: ({ row }) => <span className="font-mono">{formatValue(row.original)}</span>,
+      },
+      {
+        id: 'scope',
+        header: t('cpq.priceRules.table.scope', 'Scope'),
+        cell: ({ row }) => (
+          <span className="text-xs">
+            {row.original.productOfferingId
+              ? row.original.productOfferingName ?? 'Product-scoped'
+              : 'Global'}
+          </span>
+        ),
+      },
+      {
+        id: 'filter',
+        header: t('cpq.priceRules.table.filter', 'Filter'),
+        cell: ({ row }) => {
+          const rule = row.original
+          const parts: string[] = []
+          if (rule.chargeTypeFilter) parts.push(rule.chargeTypeFilter)
+          if (rule.chargeCodeFilter) parts.push(rule.chargeCodeFilter)
+          const cond = rule.applicabilityCondition as
+            | { attribute?: string; operator?: string; value?: string }
+            | null
+          if (cond?.attribute) {
+            const op = cond.operator === 'neq' ? '≠' : '='
+            parts.push(`${cond.attribute} ${op} ${cond.value ?? '""'}`)
+          }
+          return (
+            <span className="text-xs text-muted-foreground">
+              {parts.length > 0 ? parts.join(' / ') : '—'}
+            </span>
+          )
+        },
+        meta: { truncate: true, maxWidth: 240 },
+      },
+      {
+        accessorKey: 'isActive',
+        header: t('cpq.priceRules.table.status', 'Status'),
+        cell: ({ row }) => (
+          <Tag variant={row.original.isActive ? 'success' : 'neutral'} dot>
+            {row.original.isActive ? 'Active' : 'Inactive'}
+          </Tag>
+        ),
+      },
+    ],
+    [t],
+  )
+
+  return (
+    <CpqListView<PriceRule>
+      title={t('cpq.priceRules.list.title', 'Price Rules')}
+      tableId="cpq.price-rules.list"
+      data={data}
+      columns={columns}
+      filters={filters}
+      pageSize={PAGE_SIZE}
+      searchPlaceholder={t('cpq.priceRules.search.placeholder', 'Search price rules...')}
+      actions={
+        <Button type="button" onClick={openCreate}>
+          {t('cpq.priceRules.create', 'Create Rule')}
+        </Button>
+      }
+      crud={{
+        endpoint: '/api/cpq/price-rules',
+        entityName: t('cpq.priceRules.entityName', 'price rule'),
+        editHref: (row) => `/backend/cpq/price-rules/${row.id}`,
+      }}
+      onRowClick={(row) => router.push(`/backend/cpq/price-rules/${row.id}`)}
+      toolbarContent={
+        showForm ? (
+          <PriceRuleForm
+            editingId={null}
+            form={form}
+            onFormChange={setForm}
+            offerings={offerings}
+            saving={saving}
+            error={error}
+            onSave={handleSave}
+            onCancel={() => setShowForm(false)}
+          />
+        ) : null
+      }
+      emptyState={
+        <div className="rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground">
+          No price rules found. Click &quot;Create Rule&quot; to add one.
+        </div>
+      }
+    />
+  )
+}

package/src/modules/cpq/backend/cpq/pricing/[id]/EntriesEditor.tsx

@@ -0,0 +1,431 @@
+"use client"
+import * as React from 'react'
+import { Alert } from '@open-mercato/ui/primitives/alert'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
+import { Trash2 } from 'lucide-react'
+
+// ─── Types ──────────────────────────────────────────────────────
+
+export type Dimension = { key: string; label: string }
+export type PriceColumn = { key: string; label: string }
+
+export type PricingTableShape = {
+  id: string
+  dimensions: Dimension[]
+  priceColumns: PriceColumn[]
+  currencyCodeList: string[]
+}
+
+export type Entry = {
+  id: string
+  dimensionValues: Record<string, string>
+  tierNumber: number | null
+  rangeFrom: string | null
+  rangeTo: string | null
+  currencyCode: string
+  prices: Record<string, number>
+}
+
+type DraftEntry = Entry & {
+  // null = unchanged, 'new' = added locally, 'modified' = field edited,
+  // 'deleted' = pending delete (hidden from main grid but kept for save diff).
+  _state: null | 'new' | 'modified' | 'deleted'
+  _localId: string
+}
+
+type SaveResult = { ok: true } | { ok: false; error: string }
+
+// ─── Component ──────────────────────────────────────────────────
+
+export function EntriesEditor({
+  table,
+  initialEntries,
+  onSaved,
+}: {
+  table: PricingTableShape
+  initialEntries: Entry[]
+  onSaved: (entries: Entry[]) => void
+}) {
+  const [drafts, setDrafts] = React.useState<DraftEntry[]>(() =>
+    initialEntries.map((e) => ({ ...e, _state: null, _localId: e.id })),
+  )
+  const [mode, setMode] = React.useState<'view' | 'edit'>('view')
+  const [saving, setSaving] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+
+  // Sync external changes (e.g. parent reloads after config save).
+  React.useEffect(() => {
+    setDrafts(initialEntries.map((e) => ({ ...e, _state: null, _localId: e.id })))
+  }, [initialEntries])
+
+  const hasTieredEntries = drafts.some((d) => d.tierNumber != null && d._state !== 'deleted')
+  const visibleDrafts = drafts.filter((d) => d._state !== 'deleted')
+  const dirty = drafts.some((d) => d._state !== null)
+
+  // ─── Mutation helpers ─────────────────────────────────────────
+
+  const newLocalId = React.useCallback(() => `new-${Math.random().toString(36).slice(2, 10)}`, [])
+
+  const addRow = (asTiered: boolean) => {
+    const seed: DraftEntry = {
+      id: '',
+      _localId: newLocalId(),
+      _state: 'new',
+      dimensionValues: Object.fromEntries(table.dimensions.map((d) => [d.key, ''])),
+      tierNumber: asTiered ? (drafts.filter((d) => d.tierNumber != null).length + 1) : null,
+      rangeFrom: asTiered ? '0' : null,
+      rangeTo: asTiered ? null : null,
+      currencyCode: table.currencyCodeList[0] ?? 'USD',
+      prices: Object.fromEntries(table.priceColumns.map((c) => [c.key, 0])),
+    }
+    setDrafts((prev) => [...prev, seed])
+  }
+
+  const updateRow = (localId: string, patch: Partial<DraftEntry>) => {
+    setDrafts((prev) =>
+      prev.map((d) =>
+        d._localId === localId
+          ? { ...d, ...patch, _state: d._state === 'new' ? 'new' : 'modified' }
+          : d,
+      ),
+    )
+  }
+
+  const deleteRow = (localId: string) => {
+    setDrafts((prev) =>
+      prev.flatMap((d) => {
+        if (d._localId !== localId) return [d]
+        // New (not yet persisted) → drop entirely. Persisted → mark for delete.
+        if (d._state === 'new') return []
+        return [{ ...d, _state: 'deleted' }]
+      }),
+    )
+  }
+
+  const cancelEdit = () => {
+    // Revert to initial — drop any local mutations.
+    setDrafts(initialEntries.map((e) => ({ ...e, _state: null, _localId: e.id })))
+    setError(null)
+    setMode('view')
+  }
+
+  // ─── Save (diff against initialEntries) ───────────────────────
+
+  const save = async (): Promise<SaveResult> => {
+    setSaving(true)
+    setError(null)
+    try {
+      // POST new entries (batch — route accepts arrays)
+      const news = drafts.filter((d) => d._state === 'new')
+      if (news.length > 0) {
+        const payload = news.map((d) => ({
+          pricingTableId: table.id,
+          dimensionValues: d.dimensionValues,
+          tierNumber: d.tierNumber ?? undefined,
+          rangeFrom: d.rangeFrom != null ? Number(d.rangeFrom) : undefined,
+          rangeTo: d.rangeTo != null ? Number(d.rangeTo) : undefined,
+          currencyCode: d.currencyCode,
+          prices: d.prices,
+        }))
+        const res = await fetch('/api/cpq/pricing-table-entries', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+        })
+        if (!res.ok) {
+          const body = await res.json().catch(() => ({}))
+          return { ok: false, error: body.error ?? 'Failed to create entries' }
+        }
+      }
+
+      // PUT modified entries (one-by-one, route doesn't batch updates)
+      const mods = drafts.filter((d) => d._state === 'modified')
+      for (const d of mods) {
+        const res = await fetch('/api/cpq/pricing-table-entries', {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            id: d.id,
+            dimensionValues: d.dimensionValues,
+            tierNumber: d.tierNumber ?? null,
+            rangeFrom: d.rangeFrom != null ? Number(d.rangeFrom) : null,
+            rangeTo: d.rangeTo != null ? Number(d.rangeTo) : null,
+            currencyCode: d.currencyCode,
+            prices: d.prices,
+          }),
+        })
+        if (!res.ok) {
+          const body = await res.json().catch(() => ({}))
+          return { ok: false, error: body.error ?? `Failed to update entry ${d.id}` }
+        }
+      }
+
+      // DELETE removed entries
+      const dels = drafts.filter((d) => d._state === 'deleted')
+      for (const d of dels) {
+        const res = await fetch('/api/cpq/pricing-table-entries', {
+          method: 'DELETE',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ id: d.id }),
+        })
+        if (!res.ok) {
+          const body = await res.json().catch(() => ({}))
+          return { ok: false, error: body.error ?? `Failed to delete entry ${d.id}` }
+        }
+      }
+
+      return { ok: true }
+    } catch (err) {
+      return { ok: false, error: err instanceof Error ? err.message : 'Failed to save entries' }
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleSave = async () => {
+    const r = await save()
+    if (!r.ok) {
+      setError(r.error)
+      return
+    }
+    // Reload from server via parent (which re-fetches the pricing table
+    // and pushes a fresh `initialEntries` down — useEffect resets drafts).
+    onSaved([])
+    setMode('view')
+  }
+
+  // ─── Render ─────────────────────────────────────────────────
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold">
+          Entries ({visibleDrafts.length})
+        </h2>
+        <div className="flex items-center gap-2">
+          {mode === 'view' ? (
+            <Button type="button" variant="outline" size="sm" onClick={() => setMode('edit')}>
+              Edit Entries
+            </Button>
+          ) : (
+            <>
+              <Button type="button" variant="outline" size="sm" onClick={() => addRow(false)}>
+                + Add Row
+              </Button>
+              <Button type="button" variant="outline" size="sm" onClick={() => addRow(true)}>
+                + Add Tier
+              </Button>
+              <Button type="button" size="sm" onClick={handleSave} disabled={saving || !dirty}>
+                {saving ? 'Saving...' : 'Save'}
+              </Button>
+              <Button type="button" variant="outline" size="sm" onClick={cancelEdit} disabled={saving}>
+                Cancel
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {error && <Alert variant="destructive">{error}</Alert>}
+
+      {visibleDrafts.length === 0 ? (
+        <div className="rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground">
+          {mode === 'edit'
+            ? 'No entries yet — use "+ Add Row" (dimensions lookup) or "+ Add Tier" (range lookup).'
+            : 'No entries in this pricing table.'}
+        </div>
+      ) : (
+        <div className="rounded-lg border overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b bg-muted/50">
+                {hasTieredEntries && (
+                  <>
+                    <th className="px-3 py-3 text-left font-medium whitespace-nowrap">Tier #</th>
+                    <th className="px-3 py-3 text-left font-medium whitespace-nowrap">Range From</th>
+                    <th className="px-3 py-3 text-left font-medium whitespace-nowrap">Range To</th>
+                  </>
+                )}
+                {table.dimensions.map((dim) => (
+                  <th key={dim.key} className="px-3 py-3 text-left font-medium whitespace-nowrap">
+                    {dim.label}
+                  </th>
+                ))}
+                {table.priceColumns.map((col) => (
+                  <th key={col.key} className="px-3 py-3 text-right font-medium whitespace-nowrap">
+                    {col.label}
+                  </th>
+                ))}
+                <th className="px-3 py-3 text-left font-medium">Currency</th>
+                {mode === 'edit' && <th className="px-3 py-3 w-8" aria-label="Actions" />}
+              </tr>
+            </thead>
+            <tbody>
+              {visibleDrafts.map((entry) => (
+                <EntryRow
+                  key={entry._localId}
+                  entry={entry}
+                  table={table}
+                  hasTieredEntries={hasTieredEntries}
+                  mode={mode}
+                  onChange={(patch) => updateRow(entry._localId, patch)}
+                  onDelete={() => deleteRow(entry._localId)}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ─── Row sub-component ──────────────────────────────────────────
+
+function EntryRow({
+  entry,
+  table,
+  hasTieredEntries,
+  mode,
+  onChange,
+  onDelete,
+}: {
+  entry: DraftEntry
+  table: PricingTableShape
+  hasTieredEntries: boolean
+  mode: 'view' | 'edit'
+  onChange: (patch: Partial<DraftEntry>) => void
+  onDelete: () => void
+}) {
+  const readOnly = mode === 'view'
+  const rowBg = entry._state === 'new'
+    ? 'bg-success/5'
+    : entry._state === 'modified'
+      ? 'bg-warning/5'
+      : ''
+
+  return (
+    <tr className={`border-b hover:bg-muted/30 ${rowBg}`}>
+      {hasTieredEntries && (
+        <>
+          <td className="px-3 py-2">
+            {readOnly ? (
+              entry.tierNumber ?? '—'
+            ) : (
+              <Input
+                type="number"
+                value={entry.tierNumber ?? ''}
+                onChange={(e) => onChange({ tierNumber: e.target.value === '' ? null : Number(e.target.value) })}
+                className="w-20 h-8"
+              />
+            )}
+          </td>
+          <td className="px-3 py-2">
+            {readOnly ? (
+              entry.rangeFrom ?? '—'
+            ) : (
+              <Input
+                type="number"
+                value={entry.rangeFrom ?? ''}
+                onChange={(e) => onChange({ rangeFrom: e.target.value === '' ? null : e.target.value })}
+                className="w-24 h-8"
+              />
+            )}
+          </td>
+          <td className="px-3 py-2">
+            {readOnly ? (
+              entry.rangeTo ?? '—'
+            ) : (
+              <Input
+                type="number"
+                value={entry.rangeTo ?? ''}
+                onChange={(e) => onChange({ rangeTo: e.target.value === '' ? null : e.target.value })}
+                placeholder="∞"
+                className="w-24 h-8"
+              />
+            )}
+          </td>
+        </>
+      )}
+      {table.dimensions.map((dim) => (
+        <td key={dim.key} className="px-3 py-2">
+          {readOnly ? (
+            entry.dimensionValues?.[dim.key] ?? '—'
+          ) : (
+            <Input
+              value={entry.dimensionValues?.[dim.key] ?? ''}
+              onChange={(e) =>
+                onChange({
+                  dimensionValues: { ...entry.dimensionValues, [dim.key]: e.target.value },
+                })
+              }
+              className="w-28 h-8"
+            />
+          )}
+        </td>
+      ))}
+      {table.priceColumns.map((col) => (
+        <td key={col.key} className="px-3 py-2 text-right font-mono">
+          {readOnly ? (
+            entry.prices?.[col.key] != null ? Number(entry.prices[col.key]).toFixed(2) : '—'
+          ) : (
+            <Input
+              type="number"
+              step="0.01"
+              value={entry.prices?.[col.key] ?? ''}
+              onChange={(e) =>
+                onChange({
+                  prices: {
+                    ...entry.prices,
+                    [col.key]: e.target.value === '' ? 0 : Number(e.target.value),
+                  },
+                })
+              }
+              className="w-24 h-8 text-right"
+            />
+          )}
+        </td>
+      ))}
+      <td className="px-3 py-2">
+        {readOnly ? (
+          entry.currencyCode
+        ) : (
+          <Select
+            value={entry.currencyCode}
+            onValueChange={(value) => onChange({ currencyCode: value })}
+          >
+            <SelectTrigger className="w-24 h-8">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {table.currencyCodeList.map((c) => (
+                <SelectItem key={c} value={c}>{c}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      </td>
+      {mode === 'edit' && (
+        <td className="px-3 py-2">
+          <button
+            type="button"
+            onClick={onDelete}
+            className="text-destructive hover:bg-destructive/10 rounded p-1"
+            aria-label="Delete row"
+          >
+            <Trash2 className="h-4 w-4" />
+          </button>
+        </td>
+      )}
+    </tr>
+  )
+}
+