feat(web): CRUD create forms for items, partners, purchase orders, work orders

Extends the R1 SPA with create forms for the four entities operators interact with most. Each page follows the same pattern proven by CreateSalesOrderPage: a card-scoped form with dropdowns populated from the API, inline validation, and a redirect to the detail or list page on success. New pages: - CreateItemPage — code, name, type (GOOD/SERVICE/DIGITAL), UoM dropdown populated from /api/v1/catalog/uoms - CreatePartnerPage — code, name, type (CUSTOMER/SUPPLIER/BOTH), optional email + phone - CreatePurchaseOrderPage — symmetric to CreateSalesOrderPage; supplier dropdown filtered to SUPPLIER/BOTH partners, optional expected date, dynamic line items - CreateWorkOrderPage — output item + quantity + optional due date, dynamic BOM inputs (item + qty/unit + source location dropdown), dynamic routing operations (op code + work center + std minutes). The most complex form in the SPA — matches the EBC-PP-001 work order creation flow API client additions: catalog.createItem, partners.create, purchaseOrders.create, production.createWorkOrder — each a typed wrapper around POST to the corresponding endpoint. List pages updated: Items, Partners, Purchase Orders, Work Orders all now show a "+ New" button in the PageHeader that links to the create form. Routes wired: /items/new, /partners/new, /purchase-orders/new, /work-orders/new — all covered by the existing SpaController wildcard patterns and SecurityConfiguration permitAll rules.

feat(web): CRUD create forms for items, partners, purchase orders, work orders
Extends the R1 SPA with create forms for the four entities operators interact with most. Each page follows the same pattern proven by CreateSalesOrderPage: a card-scoped form with dropdowns populated from the API, inline validation, and a redirect to the detail or list page on success. New pages: - CreateItemPage — code, name, type (GOOD/SERVICE/DIGITAL), UoM dropdown populated from /api/v1/catalog/uoms - CreatePartnerPage — code, name, type (CUSTOMER/SUPPLIER/BOTH), optional email + phone - CreatePurchaseOrderPage — symmetric to CreateSalesOrderPage; supplier dropdown filtered to SUPPLIER/BOTH partners, optional expected date, dynamic line items - CreateWorkOrderPage — output item + quantity + optional due date, dynamic BOM inputs (item + qty/unit + source location dropdown), dynamic routing operations (op code + work center + std minutes). The most complex form in the SPA — matches the EBC-PP-001 work order creation flow API client additions: catalog.createItem, partners.create, purchaseOrders.create, production.createWorkOrder — each a typed wrapper around POST to the corresponding endpoint. List pages updated: Items, Partners, Purchase Orders, Work Orders all now show a "+ New" button in the PageHeader that links to the create form. Routes wired: /items/new, /partners/new, /purchase-orders/new, /work-orders/new — all covered by the existing SpaController wildcard patterns and SecurityConfiguration permitAll rules.
zichun · 朱子纯
1 parent 7b0d2f8c
Showing 10 changed files with 524 additions and 4 deletions
web/src/App.tsx
web/src/api/client.ts
web/src/pages/CreateItemPage.tsx
web/src/pages/CreatePartnerPage.tsx
web/src/pages/CreatePurchaseOrderPage.tsx
web/src/pages/CreateWorkOrderPage.tsx
web/src/pages/ItemsPage.tsx
web/src/pages/PartnersPage.tsx
web/src/pages/PurchaseOrdersPage.tsx
web/src/pages/WorkOrdersPage.tsx
@@ -14,8 +14,10 @@ import { ProtectedRoute } from &#39;@/components/ProtectedRoute&#39;
 import { LoginPage } from '@/pages/LoginPage'
 import { DashboardPage } from '@/pages/DashboardPage'
 import { ItemsPage } from '@/pages/ItemsPage'
+import { CreateItemPage } from '@/pages/CreateItemPage'
 import { UomsPage } from '@/pages/UomsPage'
 import { PartnersPage } from '@/pages/PartnersPage'
+import { CreatePartnerPage } from '@/pages/CreatePartnerPage'
 import { LocationsPage } from '@/pages/LocationsPage'
 import { BalancesPage } from '@/pages/BalancesPage'
 import { MovementsPage } from '@/pages/MovementsPage'
@@ -23,8 +25,10 @@ import { SalesOrdersPage } from &#39;@/pages/SalesOrdersPage&#39;
 import { CreateSalesOrderPage } from '@/pages/CreateSalesOrderPage'
 import { SalesOrderDetailPage } from '@/pages/SalesOrderDetailPage'
 import { PurchaseOrdersPage } from '@/pages/PurchaseOrdersPage'
+import { CreatePurchaseOrderPage } from '@/pages/CreatePurchaseOrderPage'
 import { PurchaseOrderDetailPage } from '@/pages/PurchaseOrderDetailPage'
 import { WorkOrdersPage } from '@/pages/WorkOrdersPage'
+import { CreateWorkOrderPage } from '@/pages/CreateWorkOrderPage'
 import { WorkOrderDetailPage } from '@/pages/WorkOrderDetailPage'
 import { ShopFloorPage } from '@/pages/ShopFloorPage'
 import { JournalEntriesPage } from '@/pages/JournalEntriesPage'
@@ -43,8 +47,10 @@ export default function App() {
       >
         <Route index element={<DashboardPage />} />
         <Route path="items" element={<ItemsPage />} />
+        <Route path="items/new" element={<CreateItemPage />} />
         <Route path="uoms" element={<UomsPage />} />
         <Route path="partners" element={<PartnersPage />} />
+        <Route path="partners/new" element={<CreatePartnerPage />} />
         <Route path="locations" element={<LocationsPage />} />
         <Route path="balances" element={<BalancesPage />} />
         <Route path="movements" element={<MovementsPage />} />
@@ -52,8 +58,10 @@ export default function App() {
         <Route path="sales-orders/new" element={<CreateSalesOrderPage />} />
         <Route path="sales-orders/:id" element={<SalesOrderDetailPage />} />
         <Route path="purchase-orders" element={<PurchaseOrdersPage />} />
+        <Route path="purchase-orders/new" element={<CreatePurchaseOrderPage />} />
         <Route path="purchase-orders/:id" element={<PurchaseOrderDetailPage />} />
         <Route path="work-orders" element={<WorkOrdersPage />} />
+        <Route path="work-orders/new" element={<CreateWorkOrderPage />} />
         <Route path="work-orders/:id" element={<WorkOrderDetailPage />} />
         <Route path="shop-floor" element={<ShopFloorPage />} />
         <Route path="journal-entries" element={<JournalEntriesPage />} />
@@ -136,6 +136,10 @@ export const auth = {
 export const catalog = {
   listItems: () => apiFetch<Item[]>('/api/v1/catalog/items'),
   getItem: (id: string) => apiFetch<Item>(`/api/v1/catalog/items/${id}`),
+  createItem: (body: {
+    code: string; name: string; description?: string | null;
+    itemType: string; baseUomCode: string; active?: boolean
+  }) => apiFetch<Item>('/api/v1/catalog/items', { method: 'POST', body: JSON.stringify(body) }),
   listUoms: () => apiFetch<Uom[]>('/api/v1/catalog/uoms'),
 }
  
@@ -144,6 +148,11 @@ export const catalog = {
 export const partners = {
   list: () => apiFetch<Partner[]>('/api/v1/partners/partners'),
   get: (id: string) => apiFetch<Partner>(`/api/v1/partners/partners/${id}`),
+  create: (body: {
+    code: string; name: string; type: string;
+    email?: string | null; phone?: string | null;
+    taxId?: string | null; website?: string | null
+  }) => apiFetch<Partner>('/api/v1/partners/partners', { method: 'POST', body: JSON.stringify(body) }),
 }
  
 // ─── Inventory ───────────────────────────────────────────────────────
@@ -190,6 +199,11 @@ export const salesOrders = {
 export const purchaseOrders = {
   list: () => apiFetch<PurchaseOrder[]>('/api/v1/orders/purchase-orders'),
   get: (id: string) => apiFetch<PurchaseOrder>(`/api/v1/orders/purchase-orders/${id}`),
+  create: (body: {
+    code: string; partnerCode: string; orderDate: string;
+    expectedDate?: string | null; currencyCode: string;
+    lines: { lineNo: number; itemCode: string; quantity: number; unitPrice: number; currencyCode: string }[]
+  }) => apiFetch<PurchaseOrder>('/api/v1/orders/purchase-orders', { method: 'POST', body: JSON.stringify(body) }),
   confirm: (id: string) =>
     apiFetch<PurchaseOrder>(`/api/v1/orders/purchase-orders/${id}/confirm`, {
       method: 'POST',
@@ -211,6 +225,12 @@ export const production = {
   listWorkOrders: () => apiFetch<WorkOrder[]>('/api/v1/production/work-orders'),
   getWorkOrder: (id: string) =>
     apiFetch<WorkOrder>(`/api/v1/production/work-orders/${id}`),
+  createWorkOrder: (body: {
+    code: string; outputItemCode: string; outputQuantity: number;
+    dueDate?: string | null; sourceSalesOrderCode?: string | null;
+    inputs?: { lineNo: number; itemCode: string; quantityPerUnit: number; sourceLocationCode: string }[];
+    operations?: { lineNo: number; operationCode: string; workCenter: string; standardMinutes: number }[];
+  }) => apiFetch<WorkOrder>('/api/v1/production/work-orders', { method: 'POST', body: JSON.stringify(body) }),
   startWorkOrder: (id: string) =>
     apiFetch<WorkOrder>(`/api/v1/production/work-orders/${id}/start`, {
       method: 'POST',
+import { useEffect, useState, type FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { catalog } from '@/api/client'
+import type { Uom } from '@/types/api'
+import { PageHeader } from '@/components/PageHeader'
+import { ErrorBox } from '@/components/ErrorBox'
+
+const ITEM_TYPES = ['GOOD', 'SERVICE', 'DIGITAL'] as const
+
+export function CreateItemPage() {
+  const navigate = useNavigate()
+  const [code, setCode] = useState('')
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [itemType, setItemType] = useState<string>('GOOD')
+  const [baseUomCode, setBaseUomCode] = useState('')
+  const [uoms, setUoms] = useState<Uom[]>([])
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    catalog.listUoms().then((u) => {
+      setUoms(u)
+      if (u.length > 0 && !baseUomCode) setBaseUomCode(u[0].code)
+    })
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setSubmitting(true)
+    try {
+      await catalog.createItem({
+        code, name, itemType, baseUomCode,
+        description: description || null,
+      })
+      navigate('/items')
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err : new Error(String(err)))
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader
+        title="New Item"
+        subtitle="Add a raw material, finished good, or service to the catalog."
+        actions={<button className="btn-secondary" onClick={() => navigate('/items')}>Cancel</button>}
+      />
+      <form onSubmit={onSubmit} className="card p-6 space-y-4 max-w-2xl">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <div>
+            <label className="block text-sm font-medium text-slate-700">Item code</label>
+            <input type="text" required value={code} onChange={(e) => setCode(e.target.value)}
+              placeholder="PAPER-120G-A3" className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700">Name</label>
+            <input type="text" required value={name} onChange={(e) => setName(e.target.value)}
+              placeholder="120g A3 coated paper" className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700">Type</label>
+            <select value={itemType} onChange={(e) => setItemType(e.target.value)}
+              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
+              {ITEM_TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700">Base UoM</label>
+            <select value={baseUomCode} onChange={(e) => setBaseUomCode(e.target.value)}
+              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
+              {uoms.map((u) => <option key={u.id} value={u.code}>{u.code} — {u.name}</option>)}
+            </select>
+          </div>
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-slate-700">Description (optional)</label>
+          <input type="text" value={description} onChange={(e) => setDescription(e.target.value)}
+            className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
+        </div>
+        {error && <ErrorBox error={error} />}
+        <button type="submit" className="btn-primary" disabled={submitting}>
+          {submitting ? 'Creating...' : 'Create Item'}
+        </button>
+      </form>
+    </div>
+  )
+}
+import { useState, type FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { partners } from '@/api/client'
+import { PageHeader } from '@/components/PageHeader'
+import { ErrorBox } from '@/components/ErrorBox'
+
+const PARTNER_TYPES = ['CUSTOMER', 'SUPPLIER', 'BOTH'] as const
+
+export function CreatePartnerPage() {
+  const navigate = useNavigate()
+  const [code, setCode] = useState('')
+  const [name, setName] = useState('')
+  const [type, setType] = useState<string>('CUSTOMER')
+  const [email, setEmail] = useState('')
+  const [phone, setPhone] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  const onSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setSubmitting(true)
+    try {
+      await partners.create({
+        code, name, type,
+        email: email || null,
+        phone: phone || null,
+      })
+      navigate('/partners')
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err : new Error(String(err)))
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader
+        title="New Partner"
+        subtitle="Add a customer, supplier, or dual-role partner."
+        actions={<button className="btn-secondary" onClick={() => navigate('/partners')}>Cancel</button>}
+      />
+      <form onSubmit={onSubmit} className="card p-6 space-y-4 max-w-2xl">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <div>
+            <label className="block text-sm font-medium text-slate-700">Partner code</label>
+            <input type="text" required value={code} onChange={(e) => setCode(e.target.value)}
+              placeholder="CUST-NEWCO" className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700">Name</label>
+            <input type="text" required value={name} onChange={(e) => setName(e.target.value)}
+              placeholder="New Company Ltd." className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700">Type</label>
+            <select value={type} onChange={(e) => setType(e.target.value)}
+              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
+              {PARTNER_TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700">Email (optional)</label>
+            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)}
+              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700">Phone (optional)</label>
+            <input type="tel" value={phone} onChange={(e) => setPhone(e.target.value)}
+              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
+          </div>
+        </div>
+        {error && <ErrorBox error={error} />}
+        <button type="submit" className="btn-primary" disabled={submitting}>
+          {submitting ? 'Creating...' : 'Create Partner'}
+        </button>
+      </form>
+    </div>
+  )
+}
+import { useEffect, useState, type FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { catalog, partners, purchaseOrders } from '@/api/client'
+import type { Item, Partner } from '@/types/api'
+import { PageHeader } from '@/components/PageHeader'
+import { ErrorBox } from '@/components/ErrorBox'
+
+interface LineInput {
+  itemCode: string
+  quantity: string
+  unitPrice: string
+}
+
+export function CreatePurchaseOrderPage() {
+  const navigate = useNavigate()
+  const [code, setCode] = useState('')
+  const [partnerCode, setPartnerCode] = useState('')
+  const [expectedDate, setExpectedDate] = useState('')
+  const [currencyCode] = useState('USD')
+  const [lines, setLines] = useState<LineInput[]>([{ itemCode: '', quantity: '', unitPrice: '' }])
+  const [items, setItems] = useState<Item[]>([])
+  const [supplierList, setSupplierList] = useState<Partner[]>([])
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    Promise.all([catalog.listItems(), partners.list()]).then(([i, p]) => {
+      setItems(i)
+      const suppliers = p.filter((x) => x.type === 'SUPPLIER' || x.type === 'BOTH')
+      setSupplierList(suppliers)
+      if (suppliers.length > 0 && !partnerCode) setPartnerCode(suppliers[0].code)
+    })
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const addLine = () =>
+    setLines([...lines, { itemCode: items[0]?.code ?? '', quantity: '1', unitPrice: '1.00' }])
+
+  const removeLine = (idx: number) => {
+    if (lines.length <= 1) return
+    setLines(lines.filter((_, i) => i !== idx))
+  }
+
+  const updateLine = (idx: number, field: keyof LineInput, value: string) => {
+    const next = [...lines]
+    next[idx] = { ...next[idx], [field]: value }
+    setLines(next)
+  }
+
+  const onSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setSubmitting(true)
+    try {
+      const created = await purchaseOrders.create({
+        code, partnerCode, currencyCode,
+        orderDate: new Date().toISOString().slice(0, 10),
+        expectedDate: expectedDate || null,
+        lines: lines.map((l, i) => ({
+          lineNo: i + 1,
+          itemCode: l.itemCode,
+          quantity: Number(l.quantity),
+          unitPrice: Number(l.unitPrice),
+          currencyCode,
+        })),
+      })
+      navigate(`/purchase-orders/${created.id}`)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err : new Error(String(err)))
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader
+        title="New Purchase Order"
+        subtitle="Order materials from a supplier. Confirm and receive to credit inventory."
+        actions={<button className="btn-secondary" onClick={() => navigate('/purchase-orders')}>Cancel</button>}
+      />
+      <form onSubmit={onSubmit} className="card p-6 space-y-5 max-w-3xl">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+          <div>
+            <label className="block text-sm font-medium text-slate-700">Order code</label>
+            <input type="text" required value={code} onChange={(e) => setCode(e.target.value)}
+              placeholder="PO-2026-0002" className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700">Supplier</label>
+            <select required value={partnerCode} onChange={(e) => setPartnerCode(e.target.value)}
+              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
+              {supplierList.map((p) => (
+                <option key={p.id} value={p.code}>{p.code} — {p.name}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700">Expected date</label>
+            <input type="date" value={expectedDate} onChange={(e) => setExpectedDate(e.target.value)}
+              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
+          </div>
+        </div>
+
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <label className="text-sm font-medium text-slate-700">Order lines</label>
+            <button type="button" className="btn-secondary text-xs" onClick={addLine}>+ Add line</button>
+          </div>
+          <div className="space-y-2">
+            {lines.map((line, idx) => (
+              <div key={idx} className="flex items-center gap-2">
+                <span className="w-6 text-xs text-slate-400 text-right">{idx + 1}</span>
+                <select value={line.itemCode} onChange={(e) => updateLine(idx, 'itemCode', e.target.value)}
+                  className="flex-1 rounded-md border border-slate-300 px-2 py-1.5 text-sm">
+                  <option value="">Select item...</option>
+                  {items.map((it) => <option key={it.id} value={it.code}>{it.code} — {it.name}</option>)}
+                </select>
+                <input type="number" min="1" step="1" placeholder="Qty" value={line.quantity}
+                  onChange={(e) => updateLine(idx, 'quantity', e.target.value)}
+                  className="w-20 rounded-md border border-slate-300 px-2 py-1.5 text-sm text-right" />
+                <input type="number" min="0" step="0.01" placeholder="Price" value={line.unitPrice}
+                  onChange={(e) => updateLine(idx, 'unitPrice', e.target.value)}
+                  className="w-24 rounded-md border border-slate-300 px-2 py-1.5 text-sm text-right" />
+                <button type="button" className="text-slate-400 hover:text-rose-500"
+                  onClick={() => removeLine(idx)} title="Remove line">&times;</button>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {error && <ErrorBox error={error} />}
+        <button type="submit" className="btn-primary" disabled={submitting}>
+          {submitting ? 'Creating...' : 'Create Purchase Order'}
+        </button>
+      </form>
+    </div>
+  )
+}
+import { useEffect, useState, type FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { catalog, inventory, production } from '@/api/client'
+import type { Item, Location } from '@/types/api'
+import { PageHeader } from '@/components/PageHeader'
+import { ErrorBox } from '@/components/ErrorBox'
+
+interface BomLine { itemCode: string; quantityPerUnit: string; sourceLocationCode: string }
+interface OpLine { operationCode: string; workCenter: string; standardMinutes: string }
+
+export function CreateWorkOrderPage() {
+  const navigate = useNavigate()
+  const [code, setCode] = useState('')
+  const [outputItemCode, setOutputItemCode] = useState('')
+  const [outputQuantity, setOutputQuantity] = useState('')
+  const [dueDate, setDueDate] = useState('')
+  const [bom, setBom] = useState<BomLine[]>([])
+  const [ops, setOps] = useState<OpLine[]>([])
+  const [items, setItems] = useState<Item[]>([])
+  const [locations, setLocations] = useState<Location[]>([])
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    Promise.all([catalog.listItems(), inventory.listLocations()]).then(([i, l]) => {
+      setItems(i)
+      setLocations(l.filter((x) => x.active))
+    })
+  }, [])
+
+  const addBom = () =>
+    setBom([...bom, { itemCode: '', quantityPerUnit: '1', sourceLocationCode: locations[0]?.code ?? '' }])
+  const removeBom = (i: number) => setBom(bom.filter((_, idx) => idx !== i))
+  const updateBom = (i: number, f: keyof BomLine, v: string) => {
+    const next = [...bom]; next[i] = { ...next[i], [f]: v }; setBom(next)
+  }
+
+  const addOp = () =>
+    setOps([...ops, { operationCode: '', workCenter: '', standardMinutes: '30' }])
+  const removeOp = (i: number) => setOps(ops.filter((_, idx) => idx !== i))
+  const updateOp = (i: number, f: keyof OpLine, v: string) => {
+    const next = [...ops]; next[i] = { ...next[i], [f]: v }; setOps(next)
+  }
+
+  const onSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setSubmitting(true)
+    try {
+      const created = await production.createWorkOrder({
+        code, outputItemCode,
+        outputQuantity: Number(outputQuantity),
+        dueDate: dueDate || null,
+        inputs: bom.map((b, i) => ({
+          lineNo: i + 1, itemCode: b.itemCode,
+          quantityPerUnit: Number(b.quantityPerUnit),
+          sourceLocationCode: b.sourceLocationCode,
+        })),
+        operations: ops.map((o, i) => ({
+          lineNo: i + 1, operationCode: o.operationCode,
+          workCenter: o.workCenter,
+          standardMinutes: Number(o.standardMinutes),
+        })),
+      })
+      navigate(`/work-orders/${created.id}`)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err : new Error(String(err)))
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader
+        title="New Work Order"
+        subtitle="Create a production work order with optional BOM inputs and routing operations."
+        actions={<button className="btn-secondary" onClick={() => navigate('/work-orders')}>Cancel</button>}
+      />
+      <form onSubmit={onSubmit} className="card p-6 space-y-5 max-w-3xl">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+          <div>
+            <label className="block text-sm font-medium text-slate-700">WO code</label>
+            <input type="text" required value={code} onChange={(e) => setCode(e.target.value)}
+              placeholder="WO-PRINT-0002" className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700">Output item</label>
+            <select required value={outputItemCode} onChange={(e) => setOutputItemCode(e.target.value)}
+              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
+              <option value="">Select item...</option>
+              {items.map((it) => <option key={it.id} value={it.code}>{it.code} — {it.name}</option>)}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700">Output qty</label>
+            <input type="number" required min="1" step="1" value={outputQuantity}
+              onChange={(e) => setOutputQuantity(e.target.value)}
+              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm text-right" />
+          </div>
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-slate-700">Due date (optional)</label>
+          <input type="date" value={dueDate} onChange={(e) => setDueDate(e.target.value)}
+            className="mt-1 max-w-xs rounded-md border border-slate-300 px-3 py-2 text-sm" />
+        </div>
+
+        {/* ─── BOM inputs ─────────────────────────────────────── */}
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <label className="text-sm font-medium text-slate-700">BOM inputs (materials consumed per unit of output)</label>
+            <button type="button" className="btn-secondary text-xs" onClick={addBom}>+ Add input</button>
+          </div>
+          {bom.length === 0 && <p className="text-xs text-slate-400">No BOM lines. Output will be produced without consuming materials.</p>}
+          <div className="space-y-2">
+            {bom.map((b, idx) => (
+              <div key={idx} className="flex items-center gap-2">
+                <span className="w-6 text-xs text-slate-400 text-right">{idx + 1}</span>
+                <select value={b.itemCode} onChange={(e) => updateBom(idx, 'itemCode', e.target.value)}
+                  className="flex-1 rounded-md border border-slate-300 px-2 py-1.5 text-sm">
+                  <option value="">Item...</option>
+                  {items.map((it) => <option key={it.id} value={it.code}>{it.code}</option>)}
+                </select>
+                <input type="number" min="0.01" step="0.01" placeholder="Qty/unit" value={b.quantityPerUnit}
+                  onChange={(e) => updateBom(idx, 'quantityPerUnit', e.target.value)}
+                  className="w-24 rounded-md border border-slate-300 px-2 py-1.5 text-sm text-right" />
+                <select value={b.sourceLocationCode} onChange={(e) => updateBom(idx, 'sourceLocationCode', e.target.value)}
+                  className="w-32 rounded-md border border-slate-300 px-2 py-1.5 text-sm">
+                  {locations.map((l) => <option key={l.id} value={l.code}>{l.code}</option>)}
+                </select>
+                <button type="button" className="text-slate-400 hover:text-rose-500" onClick={() => removeBom(idx)}>&times;</button>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* ─── Routing operations ─────────────────────────────── */}
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <label className="text-sm font-medium text-slate-700">Routing operations (sequential steps)</label>
+            <button type="button" className="btn-secondary text-xs" onClick={addOp}>+ Add operation</button>
+          </div>
+          {ops.length === 0 && <p className="text-xs text-slate-400">No routing. Work order completes in one step.</p>}
+          <div className="space-y-2">
+            {ops.map((o, idx) => (
+              <div key={idx} className="flex items-center gap-2">
+                <span className="w-6 text-xs text-slate-400 text-right">{idx + 1}</span>
+                <input type="text" required placeholder="Op code (e.g. CTP)" value={o.operationCode}
+                  onChange={(e) => updateOp(idx, 'operationCode', e.target.value)}
+                  className="w-28 rounded-md border border-slate-300 px-2 py-1.5 text-sm" />
+                <input type="text" required placeholder="Work center" value={o.workCenter}
+                  onChange={(e) => updateOp(idx, 'workCenter', e.target.value)}
+                  className="flex-1 rounded-md border border-slate-300 px-2 py-1.5 text-sm" />
+                <input type="number" min="1" step="1" placeholder="Std min" value={o.standardMinutes}
+                  onChange={(e) => updateOp(idx, 'standardMinutes', e.target.value)}
+                  className="w-20 rounded-md border border-slate-300 px-2 py-1.5 text-sm text-right" />
+                <button type="button" className="text-slate-400 hover:text-rose-500" onClick={() => removeOp(idx)}>&times;</button>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {error && <ErrorBox error={error} />}
+        <button type="submit" className="btn-primary" disabled={submitting}>
+          {submitting ? 'Creating...' : 'Create Work Order'}
+        </button>
+      </form>
+    </div>
+  )
+}
 import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
 import { catalog } from '@/api/client'
 import type { Item } from '@/types/api'
 import { PageHeader } from '@/components/PageHeader'
@@ -35,7 +36,8 @@ export function ItemsPage() {
     <div>
       <PageHeader
         title="Items"
-        subtitle="Catalog of items the framework can transact: raw materials, components, finished goods, services."
+        subtitle="Catalog of items the framework can transact: raw materials, finished goods, services."
+        actions={<Link to="/items/new" className="btn-primary">+ New Item</Link>}
       />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}
 import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
 import { partners } from '@/api/client'
 import type { Partner } from '@/types/api'
 import { PageHeader } from '@/components/PageHeader'
@@ -36,7 +37,8 @@ export function PartnersPage() {
     <div>
       <PageHeader
         title="Partners"
-        subtitle="Customers, suppliers, and partners that play both roles. Seeded by the demo."
+        subtitle="Customers, suppliers, and dual-role partners."
+        actions={<Link to="/partners/new" className="btn-primary">+ New Partner</Link>}
       />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}
@@ -51,7 +51,11 @@ export function PurchaseOrdersPage() {
  
   return (
     <div>
-      <PageHeader title="Purchase Orders" subtitle="Supplier-facing orders. Click a code to drill in." />
+      <PageHeader
+        title="Purchase Orders"
+        subtitle="Supplier-facing orders. Confirm and receive to credit inventory."
+        actions={<Link to="/purchase-orders/new" className="btn-primary">+ New Order</Link>}
+      />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}
       {!loading && !error && <DataTable rows={rows} columns={columns} />}
@@ -52,7 +52,11 @@ export function WorkOrdersPage() {
  
   return (
     <div>
-      <PageHeader title="Work Orders" subtitle="Production orders the framework consumes inputs and produces outputs through." />
+      <PageHeader
+        title="Work Orders"
+        subtitle="Production orders with BOM inputs and routing operations."
+        actions={<Link to="/work-orders/new" className="btn-primary">+ New Work Order</Link>}
+      />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}
       {!loading && !error && <DataTable rows={rows} columns={columns} />}