fixes

components/sales-order-fulfillment-form.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { shipSalesOrder } from "@/lib/actions";
+import type { SalesOrderLineDetailRow } from "@/lib/types";
+
+type Props = {
+  orderId: number;
+  lines: SalesOrderLineDetailRow[];
+};
+
+export function SalesOrderFulfillmentForm({ orderId, lines }: Props) {
+  const [quantities, setQuantities] = useState<Record<number, string>>({});
+
+  const payload = useMemo(
+    () =>
+      JSON.stringify(
+        lines
+          .map((line) => ({
+            lineId: line.lineId,
+            quantity: Number(quantities[line.lineId] || 0)
+          }))
+          .filter((line) => line.quantity > 0)
+      ),
+    [lines, quantities]
+  );
+
+  return (
+    <form action={shipSalesOrder} className="form-grid">
+      <input type="hidden" name="orderId" value={orderId} />
+      <input type="hidden" name="fulfillmentLines" value={payload} />
+      <div className="table-wrap">
+        <table className="table">
+          <thead>
+            <tr>
+              <th>SKU</th>
+              <th>Item</th>
+              <th>Remaining</th>
+              <th>On Hand</th>
+              <th>Ship Now</th>
+            </tr>
+          </thead>
+          <tbody>
+            {lines.map((line) => (
+              <tr key={line.lineId}>
+                <td>{line.sku}</td>
+                <td>{line.partName}</td>
+                <td>{line.remainingQuantity} {line.unitOfMeasure}</td>
+                <td>{line.quantityOnHand} {line.unitOfMeasure}</td>
+                <td>
+                  <input
+                    className="input"
+                    type="number"
+                    min="0"
+                    max={Math.min(line.remainingQuantity, line.quantityOnHand)}
+                    step="0.01"
+                    value={quantities[line.lineId] ?? ""}
+                    onChange={(event) =>
+                      setQuantities((current) => ({
+                        ...current,
+                        [line.lineId]: event.target.value
+                      }))
+                    }
+                  />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <button className="button secondary" type="submit">
+        Ship Selected Quantities
+      </button>
+    </form>
+  );
+}