fixed

app/purchase-orders/page.tsx

@@ -19,14 +19,14 @@ export default function PurchaseOrdersPage() {
           <PurchaseOrderForm vendors={vendors} items={items} />
         </article>
         <article className="panel">
-          <h2 className="section-title">Receiving Flow</h2>
+          <h2 className="section-title">Purchase Orders</h2>
-          <p className="section-copy">Receive relational order lines directly by entering quantities against the remaining balance on each line.</p>
+          <p className="section-copy">Review vendor demand, total value, and receiving progress without nested scrolling.</p>
           <div className="table-wrap">
             <table className="table">
-              <thead><tr><th>Order</th><th>Vendor</th><th>Status</th><th>Total</th><th>Qty Progress</th><th>Created</th><th>Action</th></tr></thead>
+              <thead><tr><th>Order</th><th>Vendor</th><th>Status</th><th>Total</th><th>Qty Progress</th><th>Created</th></tr></thead>
               <tbody>
                 {orders.length === 0 ? (
-                  <tr><td colSpan={7} className="muted">No purchase orders yet.</td></tr>
+                  <tr><td colSpan={6} className="muted">No purchase orders yet.</td></tr>
                 ) : (
                   orders.map((order) => (
                     <tr key={order.id}>
@@ -36,16 +36,6 @@ export default function PurchaseOrdersPage() {
                       <td>{formatCurrency(order.totalAmount)}</td>
                       <td>{order.fulfilledQuantity} / {order.orderedQuantity}</td>
                       <td>{formatDate(order.createdAt)}</td>
-                      <td>
-                        {order.status === "received" ? (
-                          <span className="muted">Received</span>
-                        ) : (
-                          <PurchaseOrderFulfillmentForm
-                            orderId={order.id}
-                            lines={orderLines.filter((line) => line.purchaseOrderId === order.id && line.remainingQuantity > 0)}
-                          />
-                        )}
-                      </td>
                     </tr>
                   ))
                 )}
@@ -54,6 +44,32 @@ export default function PurchaseOrdersPage() {
           </div>
         </article>
       </section>
+      <section className="panel">
+        <h2 className="section-title">Receiving Flow</h2>
+        <p className="section-copy">Receive relational order lines directly by entering quantities against the remaining balance on each line.</p>
+        <div className="grid">
+          {orders.filter((order) => order.status !== "received").length === 0 ? (
+            <p className="muted">No open or partial purchase orders need receiving right now.</p>
+          ) : (
+            orders
+              .filter((order) => order.status !== "received")
+              .map((order) => (
+                <article className="panel" key={`receive-${order.id}`}>
+                  <div className="grid" style={{ gap: 10 }}>
+                    <h3 className="section-title">{order.orderNumber}</h3>
+                    <p className="section-copy">
+                      {order.vendorName} • {order.fulfilledQuantity} / {order.orderedQuantity} received • {formatCurrency(order.totalAmount)}
+                    </p>
+                    <PurchaseOrderFulfillmentForm
+                      orderId={order.id}
+                      lines={orderLines.filter((line) => line.purchaseOrderId === order.id && line.remainingQuantity > 0)}
+                    />
+                  </div>
+                </article>
+              ))
+          )}
+        </div>
+      </section>
       <section className="panel">
         <h2 className="section-title">Restock Recommendations</h2>
         <p className="section-copy">Use this list to plan the next purchase order from items already below target.</p>

app/sales-orders/page.tsx

@@ -18,14 +18,14 @@ export default function SalesOrdersPage() {
           <SalesOrderForm customers={customers} items={items} />
         </article>
         <article className="panel">
-          <h2 className="section-title">Shipping Flow</h2>
+          <h2 className="section-title">Sales Orders</h2>
-          <p className="section-copy">Ship relational order lines directly by choosing quantities from the remaining balance on each line.</p>
+          <p className="section-copy">Review the current order queue, fulfillment progress, and order value at a glance.</p>
           <div className="table-wrap">
             <table className="table">
-              <thead><tr><th>Order</th><th>Customer</th><th>Status</th><th>Total</th><th>Qty Progress</th><th>Created</th><th>Action</th></tr></thead>
+              <thead><tr><th>Order</th><th>Customer</th><th>Status</th><th>Total</th><th>Qty Progress</th><th>Created</th></tr></thead>
               <tbody>
                 {orders.length === 0 ? (
-                  <tr><td colSpan={7} className="muted">No sales orders yet.</td></tr>
+                  <tr><td colSpan={6} className="muted">No sales orders yet.</td></tr>
                 ) : (
                   orders.map((order) => (
                     <tr key={order.id}>
@@ -35,16 +35,6 @@ export default function SalesOrdersPage() {
                       <td>{formatCurrency(order.totalAmount)}</td>
                       <td>{order.fulfilledQuantity} / {order.orderedQuantity}</td>
                       <td>{formatDate(order.createdAt)}</td>
-                      <td>
-                        {order.status === "shipped" ? (
-                          <span className="muted">Shipped</span>
-                        ) : (
-                          <SalesOrderFulfillmentForm
-                            orderId={order.id}
-                            lines={orderLines.filter((line) => line.salesOrderId === order.id && line.remainingQuantity > 0)}
-                          />
-                        )}
-                      </td>
                     </tr>
                   ))
                 )}
@@ -53,6 +43,32 @@ export default function SalesOrdersPage() {
           </div>
         </article>
       </section>
+      <section className="panel">
+        <h2 className="section-title">Shipping Flow</h2>
+        <p className="section-copy">Ship relational order lines directly by choosing quantities from the remaining balance on each line.</p>
+        <div className="grid">
+          {orders.filter((order) => order.status !== "shipped").length === 0 ? (
+            <p className="muted">No open or partial sales orders need shipping right now.</p>
+          ) : (
+            orders
+              .filter((order) => order.status !== "shipped")
+              .map((order) => (
+                <article className="panel" key={`ship-${order.id}`}>
+                  <div className="grid" style={{ gap: 10 }}>
+                    <h3 className="section-title">{order.orderNumber}</h3>
+                    <p className="section-copy">
+                      {order.customerName} • {order.fulfilledQuantity} / {order.orderedQuantity} fulfilled • {formatCurrency(order.totalAmount)}
+                    </p>
+                    <SalesOrderFulfillmentForm
+                      orderId={order.id}
+                      lines={orderLines.filter((line) => line.salesOrderId === order.id && line.remainingQuantity > 0)}
+                    />
+                  </div>
+                </article>
+              ))
+          )}
+        </div>
+      </section>
     </div>
   );
 }