feat(demo): printing-company seed + create-order form matching EBC-PP-001

Reworks the demo seed and SPA to match the reference customer's work-order management process (EBC-PP-001 from raw/ docs). Demo seed (DemoSeedRunner): - 7 printing-specific items: paper stock, 4-color ink, CTP plates, lamination film, business cards, brochures, posters - 4 partners: 2 customers (Wucai Advertising, Globe Marketing), 2 suppliers (Huazhong Paper, InkPro Industries) - 2 warehouses with opening stock for all items - Pre-seeded WO-PRINT-0001 with full BOM (3 inputs: paper + ink + CTP plates from WH-RAW) and 3-step routing (CTP plate-making @ CTP-ROOM-01 -> offset printing @ PRESS-A -> post-press finishing @ BIND-01) matching EBC-PP-001 steps C-010/C-040 - 2 DRAFT sales orders: SO-2026-0001 (100x business cards + 500x brochures, $1950), SO-2026-0002 (200x posters, $760) - 1 DRAFT purchase order: PO-2026-0001 (10000x paper + 50kg ink, $2550) from Huazhong Paper SPA additions: - New CreateSalesOrderPage with customer dropdown, item selector, dynamic line add/remove, quantity + price inputs. Navigates to the detail page on creation. - "+ New Order" button on the SalesOrdersPage header - Dashboard "Try the demo" section rewritten to walk the EBC-PP-001 flow: create SO -> confirm (auto-spawns WOs) -> walk WO routing -> complete (material issue + production receipt) -> ship SO (stock debit + AR settle) - salesOrders.create() added to the typed API client The key demo beat: confirming SO-2026-0001 auto-spawns WO-FROM-SO-2026-0001-L1 and -L2 via SalesOrderConfirmedSubscriber (EBC-PP-001 step B-010). The pre-seeded WO-PRINT-0001 shows the full BOM + routing story separately. Together they demonstrate that the framework expresses the customer's production workflow through configuration, not code. Smoke verified on fresh Postgres: all 7 items seeded, WO with 3 BOM + 3 ops created, SO confirm spawns 2 WOs with source traceability, SPA /sales-orders/new renders and creates orders.

feat(demo): printing-company seed + create-order form matching EBC-PP-001
Reworks the demo seed and SPA to match the reference customer's work-order management process (EBC-PP-001 from raw/ docs). Demo seed (DemoSeedRunner): - 7 printing-specific items: paper stock, 4-color ink, CTP plates, lamination film, business cards, brochures, posters - 4 partners: 2 customers (Wucai Advertising, Globe Marketing), 2 suppliers (Huazhong Paper, InkPro Industries) - 2 warehouses with opening stock for all items - Pre-seeded WO-PRINT-0001 with full BOM (3 inputs: paper + ink + CTP plates from WH-RAW) and 3-step routing (CTP plate-making @ CTP-ROOM-01 -> offset printing @ PRESS-A -> post-press finishing @ BIND-01) matching EBC-PP-001 steps C-010/C-040 - 2 DRAFT sales orders: SO-2026-0001 (100x business cards + 500x brochures, $1950), SO-2026-0002 (200x posters, $760) - 1 DRAFT purchase order: PO-2026-0001 (10000x paper + 50kg ink, $2550) from Huazhong Paper SPA additions: - New CreateSalesOrderPage with customer dropdown, item selector, dynamic line add/remove, quantity + price inputs. Navigates to the detail page on creation. - "+ New Order" button on the SalesOrdersPage header - Dashboard "Try the demo" section rewritten to walk the EBC-PP-001 flow: create SO -> confirm (auto-spawns WOs) -> walk WO routing -> complete (material issue + production receipt) -> ship SO (stock debit + AR settle) - salesOrders.create() added to the typed API client The key demo beat: confirming SO-2026-0001 auto-spawns WO-FROM-SO-2026-0001-L1 and -L2 via SalesOrderConfirmedSubscriber (EBC-PP-001 step B-010). The pre-seeded WO-PRINT-0001 shows the full BOM + routing story separately. Together they demonstrate that the framework expresses the customer's production workflow through configuration, not code. Smoke verified on fresh Postgres: all 7 items seeded, WO with 3 BOM + 3 ops created, SO confirm spawns 2 WOs with source traceability, SPA /sales-orders/new renders and creates orders.
zichun
1 parent 87399862
Showing 6 changed files with 360 additions and 156 deletions
distribution/src/main/kotlin/org/vibeerp/demo/DemoSeedRunner.kt
web/src/App.tsx
web/src/api/client.ts
web/src/pages/CreateSalesOrderPage.tsx
web/src/pages/DashboardPage.tsx
web/src/pages/SalesOrdersPage.tsx
@@ -21,63 +21,28 @@ import org.vibeerp.pbc.orders.sales.application.SalesOrderService
 import org.vibeerp.pbc.partners.application.CreatePartnerCommand
 import org.vibeerp.pbc.partners.application.PartnerService
 import org.vibeerp.pbc.partners.domain.PartnerType
+import org.vibeerp.pbc.production.application.CreateWorkOrderCommand
+import org.vibeerp.pbc.production.application.WorkOrderInputCommand
+import org.vibeerp.pbc.production.application.WorkOrderOperationCommand
+import org.vibeerp.pbc.production.application.WorkOrderService
 import org.vibeerp.platform.persistence.security.PrincipalContext
 import java.math.BigDecimal
 import java.time.LocalDate
 /**
- * One-shot demo data seeder, gated behind `vibeerp.demo.seed=true`.
+ * One-shot demo data seeder matching the EBC-PP-001 work-order
+ * management process from the reference printing company (昆明五彩印务).
  *
- * **Why this exists.** Out-of-the-box, vibe_erp boots against an
- * empty Postgres and the SPA dashboard shows zeros for every PBC.
- * Onboarding a new operator (or running a tomorrow-morning demo)
- * needs a couple of minutes of clicking to create items,
- * locations, partners, and a starting inventory before the
- * interesting screens become useful. This runner stages a tiny
- * but representative dataset on first boot so the moment the
- * bootstrap admin lands on `/`, every page already has rows.
+ * Gated behind `vibeerp.demo.seed=true` (dev profile only).
+ * Idempotent via sentinel item check.
  *
- * **Opt-in by property.** `@ConditionalOnProperty` keeps this
- * bean entirely absent from production deployments — only the
- * dev profile (`application-dev.yaml` sets `vibeerp.demo.seed:
- * true`) opts in. A future release can ship a `--demo` CLI flag
- * or a one-time admin "Load demo data" button that flips the
- * same property at runtime; for v1 the dev profile is enough.
- *
- * **Idempotent.** The runner checks for one of its own seeded
- * item codes and short-circuits if already present. Restarting
- * the dev server is a no-op; deleting the demo data has to
- * happen via SQL or by dropping the DB. Idempotency on the
- * sentinel item is intentional (vs. on every entity it creates):
- * a half-seeded DB from a crashed first run will *not* recover
- * cleanly, but that case is exotic and we can clear and retry
- * in dev.
- *
- * **All seeded data shares the `DEMO-` prefix.** Items, partners,
- * locations, and order codes all start with `DEMO-`. This makes
- * the seeded data trivially distinguishable from anything an
- * operator creates by hand later — and gives a future
- * "delete demo data" command an obvious filter.
- *
- * **System principal.** Audit columns need a non-blank
- * `created_by`; `PrincipalContext.runAs("__demo_seed__")` wraps
- * the entire seed so every row carries that sentinel. The
- * authorization aspect (`@RequirePermission`) lives on
- * controllers, not services — calling services directly bypasses
- * it cleanly, which is correct for system-level seeders.
- *
- * **Why CommandLineRunner.** Equivalent to `ApplicationRunner`
- * here — there are no command-line args this seeder cares about.
- * Spring runs every CommandLineRunner once, after the application
- * context is fully initialized but before serving traffic, which
- * is exactly the right window: services are wired, the schema is
- * applied, but the first HTTP request hasn't arrived yet.
- *
- * **Lives in distribution.** This is the only module that
- * already depends on every PBC, which is what the seeder needs
- * to compose. It's gated behind a property the production
- * application.yaml never sets, so its presence in the fat-jar
- * is dormant unless explicitly opted in.
+ * The seeded data demonstrates the core flow from the doc:
+ *   A-010  Sales order confirmed (SO already in DRAFT, ready to confirm)
+ *   B-010  System auto-generates work orders from confirmed SO lines
+ *   B-020  Work order with BOM + routing (pre-seeded WO-PRINT-0001)
+ *   C-040  Material requisition (BOM inputs consumed on WO complete)
+ *   C-050  Material picking from warehouse (inventory ledger writes)
+ *   E-010  Shop floor tracking (shop-floor dashboard polls IN_PROGRESS WOs)
  */
 @Component
 @ConditionalOnProperty(prefix = "vibeerp.demo", name = ["seed"], havingValue = "true")
@@ -88,166 +53,170 @@ class DemoSeedRunner(
     private val partnerService: PartnerService,
     private val salesOrderService: SalesOrderService,
     private val purchaseOrderService: PurchaseOrderService,
+    private val workOrderService: WorkOrderService,
 ) : CommandLineRunner {
     private val log = LoggerFactory.getLogger(DemoSeedRunner::class.java)
     @Transactional
     override fun run(vararg args: String?) {
-        if (itemService.findByCode(SENTINEL_ITEM_CODE) != null) {
-            log.info("Demo seed: data already present (sentinel item {} found); skipping", SENTINEL_ITEM_CODE)
+        if (itemService.findByCode(SENTINEL) != null) {
+            log.info("Demo seed: already present ({}); skipping", SENTINEL)
             return
         }
-
-        log.info("Demo seed: populating starter dataset…")
+        log.info("Demo seed: populating printing-company dataset...")
         PrincipalContext.runAs("__demo_seed__") {
             seedItems()
             seedLocations()
             seedPartners()
             seedStock()
-            seedSalesOrder()
+            seedWorkOrder()
+            seedSalesOrders()
             seedPurchaseOrder()
         }
         log.info("Demo seed: done")
     }
-    // ─── Items ───────────────────────────────────────────────────────
+    // ─── Catalog items (printing industry) ───────────────────────────
     private fun seedItems() {
-        item(SENTINEL_ITEM_CODE, "A4 paper, 80gsm, white", ItemType.GOOD, "sheet")
-        item("DEMO-INK-CYAN", "Cyan offset ink", ItemType.GOOD, "kg")
-        item("DEMO-INK-MAGENTA", "Magenta offset ink", ItemType.GOOD, "kg")
-        item("DEMO-CARD-BIZ", "Business cards, 100/pack", ItemType.GOOD, "pack")
-        item("DEMO-BROCHURE-A5", "Folded A5 brochure", ItemType.GOOD, "ea")
+        // Raw materials
+        item(SENTINEL, "80g A4 white card stock", ItemType.GOOD, "sheet")
+        item("INK-4C", "4-color offset ink set (CMYK)", ItemType.GOOD, "kg")
+        item("PLATE-CTP", "CTP printing plate", ItemType.GOOD, "ea")
+        item("COVER-MATT", "Matt lamination film", ItemType.GOOD, "m2")
+        // Finished goods
+        item("BIZ-CARD-250", "Business cards, 250gsm coated, 100/box", ItemType.GOOD, "pack")
+        item("BROCHURE-A5", "A5 tri-fold brochure, full color", ItemType.GOOD, "ea")
+        item("POSTER-A3", "A3 promotional poster, glossy", ItemType.GOOD, "ea")
     }
-    private fun item(code: String, name: String, type: ItemType, baseUomCode: String) {
-        itemService.create(
-            CreateItemCommand(
-                code = code,
-                name = name,
-                description = null,
-                itemType = type,
-                baseUomCode = baseUomCode,
-                active = true,
-            ),
-        )
+    private fun item(code: String, name: String, type: ItemType, uom: String) {
+        itemService.create(CreateItemCommand(code = code, name = name, description = null, itemType = type, baseUomCode = uom))
     }
     // ─── Locations ───────────────────────────────────────────────────
     private fun seedLocations() {
-        location("DEMO-WH-RAW", "Raw materials warehouse")
-        location("DEMO-WH-FG", "Finished goods warehouse")
+        location("WH-RAW", "Raw materials warehouse")
+        location("WH-FG", "Finished goods warehouse")
     }
     private fun location(code: String, name: String) {
-        locationService.create(
-            CreateLocationCommand(
-                code = code,
-                name = name,
-                type = LocationType.WAREHOUSE,
-                active = true,
-            ),
-        )
+        locationService.create(CreateLocationCommand(code = code, name = name, type = LocationType.WAREHOUSE))
     }
     // ─── Partners ────────────────────────────────────────────────────
     private fun seedPartners() {
-        partner("DEMO-CUST-ACME", "Acme Print Co.", PartnerType.CUSTOMER, "ap@acme.example")
-        partner("DEMO-CUST-GLOBE", "Globe Marketing", PartnerType.CUSTOMER, "ops@globe.example")
-        partner("DEMO-SUPP-PAPERWORLD", "Paper World Ltd.", PartnerType.SUPPLIER, "sales@paperworld.example")
-        partner("DEMO-SUPP-INKCO", "InkCo Industries", PartnerType.SUPPLIER, "orders@inkco.example")
+        partner("CUST-WCAD", "Wucai Advertising Co.", PartnerType.CUSTOMER, "info@wucai-ad.example")
+        partner("CUST-GLOBE", "Globe Marketing Ltd.", PartnerType.CUSTOMER, "ops@globe.example")
+        partner("SUPP-HZPAPER", "Huazhong Paper Co.", PartnerType.SUPPLIER, "sales@hzpaper.example")
+        partner("SUPP-INKPRO", "InkPro Industries", PartnerType.SUPPLIER, "orders@inkpro.example")
     }
     private fun partner(code: String, name: String, type: PartnerType, email: String) {
-        partnerService.create(
-            CreatePartnerCommand(
-                code = code,
-                name = name,
-                type = type,
-                email = email,
-                active = true,
-            ),
-        )
+        partnerService.create(CreatePartnerCommand(code = code, name = name, type = type, email = email))
     }
-    // ─── Initial stock ───────────────────────────────────────────────
+    // ─── Opening stock ───────────────────────────────────────────────
     private fun seedStock() {
-        val rawWh = locationService.findByCode("DEMO-WH-RAW")!!
-        val fgWh = locationService.findByCode("DEMO-WH-FG")!!
+        val raw = locationService.findByCode("WH-RAW")!!
+        val fg = locationService.findByCode("WH-FG")!!
+
+        stockBalanceService.adjust(SENTINEL, raw.id, BigDecimal("5000"))
+        stockBalanceService.adjust("INK-4C", raw.id, BigDecimal("80"))
+        stockBalanceService.adjust("PLATE-CTP", raw.id, BigDecimal("100"))
+        stockBalanceService.adjust("COVER-MATT", raw.id, BigDecimal("500"))
-        stockBalanceService.adjust(SENTINEL_ITEM_CODE, rawWh.id, BigDecimal("5000"))
-        stockBalanceService.adjust("DEMO-INK-CYAN", rawWh.id, BigDecimal("50"))
-        stockBalanceService.adjust("DEMO-INK-MAGENTA", rawWh.id, BigDecimal("50"))
+        stockBalanceService.adjust("BIZ-CARD-250", fg.id, BigDecimal("200"))
+        stockBalanceService.adjust("BROCHURE-A5", fg.id, BigDecimal("150"))
+        stockBalanceService.adjust("POSTER-A3", fg.id, BigDecimal("50"))
+    }
-        stockBalanceService.adjust("DEMO-CARD-BIZ", fgWh.id, BigDecimal("200"))
-        stockBalanceService.adjust("DEMO-BROCHURE-A5", fgWh.id, BigDecimal("100"))
+    // ─── Pre-seeded work order with BOM + routing ────────────────────
+    //
+    // Matches the EBC-PP-001 flow: a production work order for
+    // business cards with 3 BOM inputs and a 3-step routing
+    // (CTP plate-making → offset printing → post-press finishing).
+    // Left in DRAFT so the demo operator can start it, walk the
+    // operations on the shop-floor dashboard, and complete it.
+
+    private fun seedWorkOrder() {
+        workOrderService.create(
+            CreateWorkOrderCommand(
+                code = "WO-PRINT-0001",
+                outputItemCode = "BIZ-CARD-250",
+                outputQuantity = BigDecimal("50"),
+                dueDate = LocalDate.now().plusDays(3),
+                inputs = listOf(
+                    WorkOrderInputCommand(lineNo = 1, itemCode = SENTINEL, quantityPerUnit = BigDecimal("10"), sourceLocationCode = "WH-RAW"),
+                    WorkOrderInputCommand(lineNo = 2, itemCode = "INK-4C", quantityPerUnit = BigDecimal("0.2"), sourceLocationCode = "WH-RAW"),
+                    WorkOrderInputCommand(lineNo = 3, itemCode = "PLATE-CTP", quantityPerUnit = BigDecimal("1"), sourceLocationCode = "WH-RAW"),
+                ),
+                operations = listOf(
+                    WorkOrderOperationCommand(lineNo = 1, operationCode = "CTP", workCenter = "CTP-ROOM-01", standardMinutes = BigDecimal("30")),
+                    WorkOrderOperationCommand(lineNo = 2, operationCode = "PRINT", workCenter = "PRESS-A", standardMinutes = BigDecimal("45")),
+                    WorkOrderOperationCommand(lineNo = 3, operationCode = "FINISH", workCenter = "BIND-01", standardMinutes = BigDecimal("20")),
+                ),
+            ),
+        )
     }
-    // ─── Open sales order (DRAFT — ready to confirm + ship) ──────────
+    // ─── Sales orders (DRAFT — confirm to auto-spawn work orders) ───
+    //
+    // Two orders for different customers. Confirming either one
+    // triggers SalesOrderConfirmedSubscriber in pbc-production,
+    // which auto-creates one DRAFT work order per SO line (the
+    // B-010 step from EBC-PP-001). The demo operator watches the
+    // work order count jump on the dashboard after clicking Confirm.
-    private fun seedSalesOrder() {
+    private fun seedSalesOrders() {
+        salesOrderService.create(
+            CreateSalesOrderCommand(
+                code = "SO-2026-0001",
+                partnerCode = "CUST-WCAD",
+                orderDate = LocalDate.now(),
+                currencyCode = "USD",
+                lines = listOf(
+                    SalesOrderLineCommand(lineNo = 1, itemCode = "BIZ-CARD-250", quantity = BigDecimal("100"), unitPrice = BigDecimal("8.50"), currencyCode = "USD"),
+                    SalesOrderLineCommand(lineNo = 2, itemCode = "BROCHURE-A5", quantity = BigDecimal("500"), unitPrice = BigDecimal("2.20"), currencyCode = "USD"),
+                ),
+            ),
+        )
         salesOrderService.create(
             CreateSalesOrderCommand(
-                code = "DEMO-SO-0001",
-                partnerCode = "DEMO-CUST-ACME",
+                code = "SO-2026-0002",
+                partnerCode = "CUST-GLOBE",
                 orderDate = LocalDate.now(),
                 currencyCode = "USD",
                 lines = listOf(
-                    SalesOrderLineCommand(
-                        lineNo = 1,
-                        itemCode = "DEMO-CARD-BIZ",
-                        quantity = BigDecimal("50"),
-                        unitPrice = BigDecimal("12.50"),
-                        currencyCode = "USD",
-                    ),
-                    SalesOrderLineCommand(
-                        lineNo = 2,
-                        itemCode = "DEMO-BROCHURE-A5",
-                        quantity = BigDecimal("20"),
-                        unitPrice = BigDecimal("4.75"),
-                        currencyCode = "USD",
-                    ),
+                    SalesOrderLineCommand(lineNo = 1, itemCode = "POSTER-A3", quantity = BigDecimal("200"), unitPrice = BigDecimal("3.80"), currencyCode = "USD"),
                 ),
             ),
         )
     }
-    // ─── Open purchase order (DRAFT — ready to confirm + receive) ────
+    // ─── Purchase order (DRAFT — confirm + receive to restock) ───────
     private fun seedPurchaseOrder() {
         purchaseOrderService.create(
             CreatePurchaseOrderCommand(
-                code = "DEMO-PO-0001",
-                partnerCode = "DEMO-SUPP-PAPERWORLD",
+                code = "PO-2026-0001",
+                partnerCode = "SUPP-HZPAPER",
                 orderDate = LocalDate.now(),
-                expectedDate = LocalDate.now().plusDays(7),
+                expectedDate = LocalDate.now().plusDays(5),
                 currencyCode = "USD",
                 lines = listOf(
-                    PurchaseOrderLineCommand(
-                        lineNo = 1,
-                        itemCode = SENTINEL_ITEM_CODE,
-                        quantity = BigDecimal("10000"),
-                        unitPrice = BigDecimal("0.04"),
-                        currencyCode = "USD",
-                    ),
+                    PurchaseOrderLineCommand(lineNo = 1, itemCode = SENTINEL, quantity = BigDecimal("10000"), unitPrice = BigDecimal("0.03"), currencyCode = "USD"),
+                    PurchaseOrderLineCommand(lineNo = 2, itemCode = "INK-4C", quantity = BigDecimal("50"), unitPrice = BigDecimal("45.00"), currencyCode = "USD"),
                 ),
             ),
         )
     }
     companion object {
-        /**
-         * The seeder uses the presence of this item as the
-         * idempotency marker — re-running the seeder against a
-         * Postgres that already contains it short-circuits. The
-         * choice of "the very first item the seeder creates" is
-         * deliberate: if the seed transaction commits at all, this
-         * row is in the DB; if it doesn't, nothing is.
-         */
-        const val SENTINEL_ITEM_CODE: String = "DEMO-PAPER-A4"
+        const val SENTINEL: String = "PAPER-80G-A4"
     }
 }
@@ -20,6 +20,7 @@ import { LocationsPage } from &#39;@/pages/LocationsPage&#39;
 import { BalancesPage } from '@/pages/BalancesPage'
 import { MovementsPage } from '@/pages/MovementsPage'
 import { SalesOrdersPage } from '@/pages/SalesOrdersPage'
+import { CreateSalesOrderPage } from '@/pages/CreateSalesOrderPage'
 import { SalesOrderDetailPage } from '@/pages/SalesOrderDetailPage'
 import { PurchaseOrdersPage } from '@/pages/PurchaseOrdersPage'
 import { PurchaseOrderDetailPage } from '@/pages/PurchaseOrderDetailPage'
@@ -48,6 +49,7 @@ export default function App() {
         <Route path="balances" element={<BalancesPage />} />
         <Route path="movements" element={<MovementsPage />} />
         <Route path="sales-orders" element={<SalesOrdersPage />} />
+        <Route path="sales-orders/new" element={<CreateSalesOrderPage />} />
         <Route path="sales-orders/:id" element={<SalesOrderDetailPage />} />
         <Route path="purchase-orders" element={<PurchaseOrdersPage />} />
         <Route path="purchase-orders/:id" element={<PurchaseOrderDetailPage />} />
@@ -159,6 +159,17 @@ export const inventory = {
 export const salesOrders = {
   list: () => apiFetch<SalesOrder[]>('/api/v1/orders/sales-orders'),
   get: (id: string) => apiFetch<SalesOrder>(`/api/v1/orders/sales-orders/${id}`),
+  create: (body: {
+    code: string
+    partnerCode: string
+    orderDate: string
+    currencyCode: string
+    lines: { lineNo: number; itemCode: string; quantity: number; unitPrice: number; currencyCode: string }[]
+  }) =>
+    apiFetch<SalesOrder>('/api/v1/orders/sales-orders', {
+      method: 'POST',
+      body: JSON.stringify(body),
+    }),
   confirm: (id: string) =>
     apiFetch<SalesOrder>(`/api/v1/orders/sales-orders/${id}/confirm`, {
       method: 'POST',
+import { useEffect, useState, type FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { catalog, partners, salesOrders } 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 CreateSalesOrderPage() {
+  const navigate = useNavigate()
+  const [code, setCode] = useState('')
+  const [partnerCode, setPartnerCode] = useState('')
+  const [currencyCode] = useState('USD')
+  const [lines, setLines] = useState<LineInput[]>([
+    { itemCode: '', quantity: '', unitPrice: '' },
+  ])
+  const [items, setItems] = useState<Item[]>([])
+  const [partnerList, setPartnerList] = 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 customers = p.filter((x) => x.type === 'CUSTOMER' || x.type === 'BOTH')
+      setPartnerList(customers)
+      if (customers.length > 0 && !partnerCode) setPartnerCode(customers[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 salesOrders.create({
+        code,
+        partnerCode,
+        orderDate: new Date().toISOString().slice(0, 10),
+        currencyCode,
+        lines: lines.map((l, i) => ({
+          lineNo: i + 1,
+          itemCode: l.itemCode,
+          quantity: Number(l.quantity),
+          unitPrice: Number(l.unitPrice),
+          currencyCode,
+        })),
+      })
+      navigate(`/sales-orders/${created.id}`)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err : new Error(String(err)))
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader
+        title="New Sales Order"
+        subtitle="Create a sales order. Confirming it will auto-generate production work orders."
+        actions={
+          <button className="btn-secondary" onClick={() => navigate('/sales-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="SO-2026-0003"
+              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-brand-500 focus:ring-brand-500"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700">Customer</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 shadow-sm focus:border-brand-500 focus:ring-brand-500"
+            >
+              {partnerList.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">Currency</label>
+            <input
+              type="text"
+              value={currencyCode}
+              disabled
+              className="mt-1 w-full rounded-md border border-slate-200 bg-slate-50 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} />}
+
+        <div className="flex items-center gap-3 pt-2">
+          <button type="submit" className="btn-primary" disabled={submitting}>
+            {submitting ? 'Creating...' : 'Create Sales Order'}
+          </button>
+          <span className="text-xs text-slate-400">
+            After creation, confirm the order to auto-generate work orders.
+          </span>
+        </div>
+      </form>
+    </div>
+  )
+}
@@ -100,25 +100,48 @@ export function DashboardPage() {
         </div>
       )}
       <div className="mt-8 card p-5 text-sm text-slate-600">
-        <h2 className="mb-2 text-base font-semibold text-slate-800">Try the demo</h2>
-        <ol className="list-decimal space-y-1 pl-5">
+        <h2 className="mb-2 text-base font-semibold text-slate-800">
+          Demo: EBC-PP-001 Work Order Management Flow
+        </h2>
+        <p className="mb-3 text-slate-500">
+          Walk the printing company's production flow end-to-end — sales order to finished goods.
+        </p>
+        <ol className="list-decimal space-y-2 pl-5">
           <li>
-            Open a <Link to="/sales-orders" className="text-brand-600 hover:underline">sales order</Link>{' '}
-            in DRAFT, click <span className="font-mono">Confirm</span>.
+            <strong>Create or open a sales order</strong> —{' '}
+            <Link to="/sales-orders/new" className="text-brand-600 hover:underline">
+              create a new order
+            </Link>{' '}
+            or open an existing one from the{' '}
+            <Link to="/sales-orders" className="text-brand-600 hover:underline">list</Link>.
           </li>
           <li>
-            With the same sales order CONFIRMED, click <span className="font-mono">Ship</span>.
-            The framework atomically debits stock, flips status to SHIPPED, and emits a domain
-            event.
+            <strong>Confirm the order</strong> — click{' '}
+            <span className="font-mono bg-slate-100 px-1 rounded">Confirm</span>. The system
+            auto-generates one production work order per line (EBC-PP-001 step B-010). Check the{' '}
+            <Link to="/work-orders" className="text-brand-600 hover:underline">Work Orders</Link>{' '}
+            page to see them appear. Finance posts an AR entry automatically.
           </li>
           <li>
-            Watch <Link to="/balances" className="text-brand-600 hover:underline">stock balances</Link>{' '}
-            drop, <Link to="/movements" className="text-brand-600 hover:underline">movements</Link>{' '}
-            grow by one row, and{' '}
-            <Link to="/journal-entries" className="text-brand-600 hover:underline">
-              journal entries
-            </Link>{' '}
-            settle from POSTED to SETTLED — all from the cross-PBC event subscriber in pbc-finance.
+            <strong>Walk the pre-seeded work order</strong> — open{' '}
+            <Link to="/work-orders" className="text-brand-600 hover:underline">WO-PRINT-0001</Link>.
+            It has a 3-step routing (CTP plate-making → offset printing → post-press finishing) and
+            a BOM with paper, ink, and CTP plates. Click <span className="font-mono bg-slate-100 px-1 rounded">Start</span>{' '}
+            to put it in progress, then watch it on the{' '}
+            <Link to="/shop-floor" className="text-brand-600 hover:underline">Shop Floor</Link> dashboard.
+          </li>
+          <li>
+            <strong>Complete the work order</strong> — materials are consumed from the warehouse,
+            finished goods are credited. Check{' '}
+            <Link to="/balances" className="text-brand-600 hover:underline">Stock Balances</Link>{' '}
+            and{' '}
+            <Link to="/movements" className="text-brand-600 hover:underline">Movements</Link>{' '}
+            to see the ledger entries.
+          </li>
+          <li>
+            <strong>Ship the sales order</strong> — finished goods leave the warehouse, the AR
+            journal entry settles from POSTED to SETTLED in{' '}
+            <Link to="/journal-entries" className="text-brand-600 hover:underline">Finance</Link>.
           </li>
         </ol>
       </div>
@@ -56,7 +56,13 @@ export function SalesOrdersPage() {
   return (
     <div>
-      <PageHeader title="Sales Orders" subtitle="Customer-facing orders. Click a code to drill in." />
+      <PageHeader
+        title="Sales Orders"
+        subtitle="Customer-facing orders. Confirm to auto-generate production work orders."
+        actions={
+          <Link to="/sales-orders/new" className="btn-primary">+ New Order</Link>
+        }
+      />
       {loading && <Loading />}
       {error && <ErrorBox error={error} />}
       {!loading && !error && <DataTable rows={rows} columns={columns} />}