fixed

app/purchase-orders/page.tsx

@@ -1,9 +1,11 @@
-import { createPurchaseOrder, receivePurchaseOrder } from "@/lib/actions";
+import { receivePurchaseOrder } from "@/lib/actions";
+import { PurchaseOrderCreateForm } from "@/components/purchase-order-create-form";
 import { formatCurrency, formatDate } from "@/lib/format";
-import { getLowStockParts, getPurchaseOrders, getVendors } from "@/lib/repository";
+import { getLowStockParts, getOrderItemOptions, getPurchaseOrders, getVendors } from "@/lib/repository";
 
 export default function PurchaseOrdersPage() {
   const vendors = getVendors();
+  const items = getOrderItemOptions();
   const orders = getPurchaseOrders();
   const lowStockParts = getLowStockParts();
 
@@ -12,18 +14,8 @@ export default function PurchaseOrdersPage() {
       <section className="two-up">
         <article className="panel">
           <h2 className="section-title">Create Purchase Order</h2>
-          <p className="section-copy">Enter one line per row as `SKU,quantity,unit cost`.</p>
-          <form action={createPurchaseOrder} className="form-grid">
-            <div className="form-row">
-              <label htmlFor="vendorCode">Vendor Code</label>
-              <select className="select" id="vendorCode" name="vendorCode">
-                {vendors.map((vendor) => <option key={vendor.id} value={vendor.code}>{vendor.code} - {vendor.name}</option>)}
-              </select>
-            </div>
-            <div className="form-row"><label htmlFor="purchase-lines">Line Items</label><textarea className="textarea" id="purchase-lines" name="lines" placeholder={"PART-001,10,31.50\nPART-002,24,6.25"} required /></div>
-            <div className="form-row"><label htmlFor="purchase-notes">Notes</label><textarea className="textarea" id="purchase-notes" name="notes" /></div>
-            <button className="button" type="submit">Save Purchase Order</button>
-          </form>
+          <p className="section-copy">Build the PO from real inventory items so receipts, costing, and restocking stay relational.</p>
+          <PurchaseOrderCreateForm vendors={vendors} items={items} />
         </article>
         <article className="panel">
           <h2 className="section-title">Receiving Flow</h2>