@dainamite/cpq 0.2.2

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

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

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

@@ -0,0 +1,191 @@
+"use client"
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useRouter } from 'next/navigation'
+import type { ColumnDef } from '@tanstack/react-table'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+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 {
+  formatStatusLabel,
+  specificationLifecycleStatusMap,
+  type SpecificationLifecycleStatus,
+} from '../../../components/statusMaps'
+
+type Specification = {
+  id: string
+  productId: string
+  code: string
+  name: string
+  description: string | null
+  specType: string
+  isAssetizable: boolean
+  lifecycleStatus: string
+  version: number
+  isActive: boolean
+  createdAt: string
+}
+
+const PAGE_SIZE = 50
+
+function buildFilterParams(values: FilterValues, params: URLSearchParams) {
+  if (typeof values.lifecycleStatus === 'string' && values.lifecycleStatus) {
+    params.set('lifecycleStatus', values.lifecycleStatus)
+  }
+  if (typeof values.specType === 'string' && values.specType) {
+    params.set('specType', values.specType)
+  }
+  if (values.isActive === true) params.set('isActive', 'true')
+  if (values.isActive === false) params.set('isActive', 'false')
+  if (values.isAssetizable === true) params.set('isAssetizable', 'true')
+  if (values.isAssetizable === false) params.set('isAssetizable', 'false')
+}
+
+export default function SpecificationsListPage() {
+  const t = useT()
+  const router = useRouter()
+
+  const data = useCpqListData<Specification>({
+    endpoint: '/api/cpq/product-specifications',
+    pageSize: PAGE_SIZE,
+    buildFilterParams,
+    loadErrorMessage: t('cpq.specifications.list.error.load', 'Failed to load specifications'),
+  })
+
+  const lifecycleOptions = React.useMemo(
+    () => [
+      { value: 'draft', label: t('cpq.specifications.lifecycle.draft', 'Draft') },
+      { value: 'active', label: t('cpq.specifications.lifecycle.active', 'Active') },
+      { value: 'deprecated', label: t('cpq.specifications.lifecycle.deprecated', 'Deprecated') },
+    ],
+    [t],
+  )
+
+  const specTypeOptions = React.useMemo(
+    () => [
+      { value: 'simple', label: t('cpq.specifications.type.simple', 'Simple') },
+      { value: 'bundle', label: t('cpq.specifications.type.bundle', 'Bundle') },
+    ],
+    [t],
+  )
+
+  const filters = React.useMemo<FilterDef[]>(
+    () => [
+      {
+        id: 'lifecycleStatus',
+        label: t('cpq.specifications.filters.lifecycleStatus', 'Lifecycle Status'),
+        type: 'select',
+        options: lifecycleOptions,
+      },
+      {
+        id: 'specType',
+        label: t('cpq.specifications.filters.specType', 'Type'),
+        type: 'select',
+        options: specTypeOptions,
+      },
+      {
+        id: 'isActive',
+        label: t('cpq.specifications.filters.isActive', 'Active'),
+        type: 'checkbox',
+      },
+      {
+        id: 'isAssetizable',
+        label: t('cpq.specifications.filters.isAssetizable', 'Assetizable'),
+        type: 'checkbox',
+      },
+    ],
+    [lifecycleOptions, specTypeOptions, t],
+  )
+
+  const columns = React.useMemo<ColumnDef<Specification>[]>(
+    () => [
+      {
+        accessorKey: 'code',
+        header: t('cpq.specifications.code', 'Code'),
+        cell: ({ row }) => <span className="font-mono text-xs">{row.original.code}</span>,
+      },
+      {
+        accessorKey: 'name',
+        header: t('cpq.specifications.name', 'Name'),
+        cell: ({ row }) => (
+          <span className="font-medium">
+            {row.original.name}
+            {row.original.specType === 'bundle' && (
+              <Tag variant="brand" className="ml-2 px-2 text-[10px]">
+                bundle
+              </Tag>
+            )}
+            {row.original.isAssetizable && (
+              <Tag variant="warning" className="ml-1 px-2 text-[10px]">
+                asset
+              </Tag>
+            )}
+          </span>
+        ),
+      },
+      {
+        accessorKey: 'isActive',
+        header: t('cpq.specifications.isActive', 'Is Active?'),
+        cell: ({ row }) => <Checkbox checked={row.original.isActive} disabled />,
+      },
+      {
+        accessorKey: 'lifecycleStatus',
+        header: t('cpq.specifications.lifecycleStatus', 'Lifecycle Status'),
+        cell: ({ row }) => (
+          <Tag variant={specificationLifecycleStatusMap[row.original.lifecycleStatus as SpecificationLifecycleStatus] ?? 'neutral'} dot>
+            {formatStatusLabel(row.original.lifecycleStatus)}
+          </Tag>
+        ),
+      },
+      {
+        accessorKey: 'version',
+        header: t('cpq.specifications.version', 'Version'),
+        cell: ({ row }) => <span>v{row.original.version}</span>,
+      },
+      {
+        accessorKey: 'description',
+        header: t('cpq.specifications.description', 'Description'),
+        cell: ({ row }) => (
+          <span className="text-muted-foreground">{row.original.description ?? '—'}</span>
+        ),
+        meta: { truncate: true, maxWidth: 320 },
+      },
+    ],
+    [t],
+  )
+
+  return (
+    <CpqListView<Specification>
+      title={t('cpq.specifications.list.title', 'Product Specifications')}
+      tableId="cpq.specifications.list"
+      data={data}
+      columns={columns}
+      filters={filters}
+      pageSize={PAGE_SIZE}
+      searchPlaceholder={t('cpq.specifications.search.placeholder', 'Search specifications...')}
+      actions={
+        <Button asChild>
+          <a href="/backend/cpq/specifications/new">
+            {t('cpq.specifications.add', 'New Specification')}
+          </a>
+        </Button>
+      }
+      crud={{
+        endpoint: '/api/cpq/product-specifications',
+        entityName: t('cpq.specifications.entityName', 'specification'),
+        editHref: (row) => `/backend/cpq/specifications/${row.id}`,
+      }}
+      onRowClick={(row) => router.push(`/backend/cpq/specifications/${row.id}`)}
+      emptyState={
+        <div className="rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground">
+          {t(
+            'cpq.specifications.empty',
+            'No product specifications found. Create one to define your product catalogue.',
+          )}
+        </div>
+      }
+    />
+  )
+}

package/src/modules/cpq/backend/cpq/wizards/[definitionCode]/detail/page.tsx

@@ -0,0 +1,319 @@
+"use client"
+import * as React from 'react'
+import { useRouter } from 'next/navigation'
+import { Alert } from '@open-mercato/ui/primitives/alert'
+import { RowActions } from '@open-mercato/ui/backend/RowActions'
+import { Tag } from '@open-mercato/ui/primitives/tag'
+import type {
+  WizardDefinitionResult,
+  WizardStepDefinition,
+  WizardTransition,
+  WizardApplicability,
+} from '../../../../../workflows/types'
+
+async function apiJson<T>(url: string): Promise<T> {
+  const res = await fetch(url)
+  if (!res.ok) throw new Error(`API error ${res.status}`)
+  return res.json() as Promise<T>
+}
+
+// ─── Sub-components ──────────────────────────────────────────────
+
+function Badge({ children, variant = 'default' }: { children: React.ReactNode; variant?: 'default' | 'success' | 'muted' }) {
+  const tagVariant = variant === 'success' ? 'success' : variant === 'muted' ? 'neutral' : 'info'
+  return <Tag variant={tagVariant}>{children}</Tag>
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-3">
+      <h2 className="text-base font-semibold">{title}</h2>
+      {children}
+    </div>
+  )
+}
+
+function KV({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <span className="text-xs font-medium text-muted-foreground">{label}</span>
+      <span className="text-sm">{children}</span>
+    </div>
+  )
+}
+
+function JsonBlock({ data }: { data: unknown }) {
+  if (data == null) return <span className="text-xs text-muted-foreground">none</span>
+  return (
+    <pre className="rounded-md bg-muted/50 p-3 text-xs overflow-x-auto max-h-48">
+      {JSON.stringify(data, null, 2)}
+    </pre>
+  )
+}
+
+function TransitionRow({ t, index }: { t: WizardTransition; index: number }) {
+  return (
+    <div className="flex items-start gap-3 text-xs">
+      <span className="font-mono text-muted-foreground w-4 shrink-0">{index + 1}.</span>
+      <div className="space-y-0.5">
+        <div className="flex items-center gap-2">
+          <span className="font-medium">-&gt; {t.targetStepId}</span>
+          {t.isDefault && <Badge variant="muted">default</Badge>}
+          {t.label && <span className="text-muted-foreground">({t.label})</span>}
+        </div>
+        {t.condition && (
+          <div className="font-mono text-muted-foreground">
+            when {t.condition.field} {t.condition.operator}
+            {t.condition.value !== undefined ? ` ${JSON.stringify(t.condition.value)}` : ''}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function StepCard({ step, index }: { step: WizardStepDefinition; index: number }) {
+  const [open, setOpen] = React.useState(false)
+  const configKeys = Object.keys(step.config)
+
+  return (
+    <div className="rounded-lg border">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-muted/30 transition-colors"
+      >
+        <span className="flex items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-bold w-7 h-7 shrink-0">
+          {index + 1}
+        </span>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium truncate">{step.title}</span>
+            <Badge>{step.type}</Badge>
+            {step.isOptional && <Badge variant="muted">optional</Badge>}
+          </div>
+          {step.description && (
+            <p className="text-xs text-muted-foreground truncate mt-0.5">{step.description}</p>
+          )}
+        </div>
+        <span className="text-xs text-muted-foreground shrink-0">{open ? '\u25B2' : '\u25BC'}</span>
+      </button>
+
+      {open && (
+        <div className="border-t px-4 py-3 space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <KV label="Step ID"><span className="font-mono text-xs">{step.stepId}</span></KV>
+            <KV label="Type"><span className="font-mono text-xs">{step.type}</span></KV>
+          </div>
+
+          {configKeys.length > 0 && (
+            <div className="space-y-1">
+              <span className="text-xs font-medium text-muted-foreground">Config</span>
+              <JsonBlock data={step.config} />
+            </div>
+          )}
+
+          {step.transitions.length > 0 && (
+            <div className="space-y-2">
+              <span className="text-xs font-medium text-muted-foreground">
+                Transitions ({step.transitions.length})
+              </span>
+              <div className="space-y-1.5">
+                {step.transitions.map((t, i) => (
+                  <TransitionRow key={`${t.targetStepId}-${i}`} t={t} index={i} />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {step.transitions.length === 0 && (
+            <div className="text-xs text-muted-foreground">No transitions (terminal step)</div>
+          )}
+
+          {step.validationRules && step.validationRules.length > 0 && (
+            <div className="space-y-1">
+              <span className="text-xs font-medium text-muted-foreground">Validation Rules</span>
+              <JsonBlock data={step.validationRules} />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ApplicabilityPanel({ applicability }: { applicability: WizardApplicability | null }) {
+  if (!applicability) {
+    return <span className="text-sm text-muted-foreground">No applicability constraints</span>
+  }
+  return (
+    <div className="grid grid-cols-2 gap-4">
+      {applicability.priority != null && (
+        <KV label="Priority">{applicability.priority}</KV>
+      )}
+      {applicability.specCodes?.length ? (
+        <KV label="Spec Codes">
+          <div className="flex flex-wrap gap-1">
+            {applicability.specCodes.map((c) => (
+              <span key={c} className="font-mono text-xs rounded bg-muted px-1.5 py-0.5">{c}</span>
+            ))}
+          </div>
+        </KV>
+      ) : null}
+      {applicability.offeringCodes?.length ? (
+        <KV label="Offering Codes">
+          <div className="flex flex-wrap gap-1">
+            {applicability.offeringCodes.map((c) => (
+              <span key={c} className="font-mono text-xs rounded bg-muted px-1.5 py-0.5">{c}</span>
+            ))}
+          </div>
+        </KV>
+      ) : null}
+      {applicability.customerSegments?.length ? (
+        <KV label="Customer Segments">
+          <div className="flex flex-wrap gap-1">
+            {applicability.customerSegments.map((c) => (
+              <span key={c} className="font-mono text-xs rounded bg-muted px-1.5 py-0.5">{c}</span>
+            ))}
+          </div>
+        </KV>
+      ) : null}
+    </div>
+  )
+}
+
+// ─── Main Page ───────────────────────────────────────────────────
+
+export default function CpqWizardDetailPage({ params }: { params: Record<string, string | string[]> }) {
+  const router = useRouter()
+  const definitionCode = params.definitionCode as string
+
+  const [definition, setDefinition] = React.useState<WizardDefinitionResult | null>(null)
+  const [loading, setLoading] = React.useState(true)
+  const [error, setError] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    async function load() {
+      if (!definitionCode) return
+      setLoading(true)
+      setError(null)
+      try {
+        const def = await apiJson<WizardDefinitionResult>(
+          `/api/cpq/wizards?code=${encodeURIComponent(definitionCode)}`,
+        )
+        setDefinition(def)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load wizard')
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [definitionCode])
+
+  if (loading) {
+    return <div className="text-sm text-muted-foreground">Loading...</div>
+  }
+
+  if (error) {
+    return (
+      <div className="space-y-4">
+        <Alert variant="destructive">{error}</Alert>
+        <button type="button" onClick={() => router.push('/backend/cpq/wizards')} className="text-sm text-muted-foreground hover:text-foreground">
+          &larr; Back to Wizards
+        </button>
+      </div>
+    )
+  }
+
+  if (!definition) {
+    return (
+      <div className="rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground">
+        Wizard not found.
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6 max-w-[900px] mx-auto">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          onClick={() => router.push('/backend/cpq/wizards')}
+          className="text-sm text-muted-foreground hover:text-foreground"
+        >
+          &larr; All Wizards
+        </button>
+      </div>
+
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold">{definition.name}</h1>
+          {definition.description && (
+            <p className="text-sm text-muted-foreground mt-1">{definition.description}</p>
+          )}
+        </div>
+        {/* Actions live in a 3-dot menu — wizards are read-only in admin UI
+            for the time being, so only `Preview` is exposed. */}
+        <div className="shrink-0">
+          <RowActions
+            items={[
+              {
+                id: 'preview',
+                label: 'Preview',
+                onSelect: () => router.push(`/backend/cpq/wizards/${definitionCode}`),
+              },
+            ]}
+          />
+        </div>
+      </div>
+
+      {/* General Info */}
+      <Section title="General">
+        <div className="rounded-lg border p-4">
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+            <KV label="Code"><span className="font-mono text-xs">{definition.code}</span></KV>
+            <KV label="Version">v{definition.version}</KV>
+            <KV label="Surface">{definition.surface}</KV>
+            <KV label="Active">
+              <Badge variant={definition.isActive ? 'success' : 'muted'}>
+                {definition.isActive ? 'Yes' : 'No'}
+              </Badge>
+            </KV>
+          </div>
+        </div>
+      </Section>
+
+      {/* Applicability */}
+      <Section title="Applicability">
+        <div className="rounded-lg border p-4">
+          <ApplicabilityPanel applicability={definition.applicability} />
+        </div>
+      </Section>
+
+      {/* Params Schema */}
+      {definition.paramsSchema && Object.keys(definition.paramsSchema).length > 0 && (
+        <Section title="Parameters Schema">
+          <JsonBlock data={definition.paramsSchema} />
+        </Section>
+      )}
+
+      {/* Steps */}
+      <Section title={`Steps (${definition.steps.length})`}>
+        <div className="space-y-2">
+          {definition.steps.map((step, i) => (
+            <StepCard key={step.stepId} step={step} index={i} />
+          ))}
+        </div>
+      </Section>
+
+      {/* Metadata */}
+      {definition.metadata && Object.keys(definition.metadata).length > 0 && (
+        <Section title="Metadata">
+          <JsonBlock data={definition.metadata} />
+        </Section>
+      )}
+    </div>
+  )
+}