Restrict order quantity edits to pending orders

apps/web/src/orders/order-items-panel.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { canEditOrderItems, type OrderDetail } from "@orderops/shared";
+import type { OrderDetail } from "@orderops/shared";
+import { canEditOrderItems } from "@orderops/shared/order-status";
 
 interface OrderItemsPanelProps {
   order: OrderDetail;
@@ -9,12 +10,10 @@ interface OrderItemsPanelProps {
 function QuantityForm({
   itemId,
   quantity,
-  isEditable,
   onSave
 }: {
   itemId: string;
   quantity: number;
-  isEditable: boolean;
   onSave: (itemId: string, quantity: number) => Promise<void>;
 }) {
   const [value, setValue] = useState(String(quantity));
@@ -28,17 +27,12 @@ function QuantityForm({
       }}
     >
       <input
-        className="w-16 rounded-md border border-slate-300 px-2 py-1 text-sm disabled:bg-slate-100 disabled:text-slate-500"
-        disabled={!isEditable}
+        className="w-16 rounded-md border border-slate-300 px-2 py-1 text-sm"
         inputMode="numeric"
         value={value}
         onChange={(event) => setValue(event.target.value)}
       />
-      <button
-        className="rounded-md bg-blue-600 px-3 py-1 text-sm font-medium text-white disabled:cursor-not-allowed disabled:bg-slate-300"
-        disabled={!isEditable}
-        type="submit"
-      >
+      <button className="rounded-md bg-blue-600 px-3 py-1 text-sm font-medium text-white" type="submit">
         Save
       </button>
     </form>
@@ -46,12 +40,14 @@ function QuantityForm({
 }
 
 export function OrderItemsPanel({ order, onUpdateQuantity }: OrderItemsPanelProps) {
-  const isEditable = canEditOrderItems(order.status);
+  const canEditQuantity = canEditOrderItems(order.status);
 
   return (
     <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
       <h3 className="mb-3 text-sm font-semibold text-slate-700">Items</h3>
-      {isEditable ? null : <p className="mb-3 text-sm text-slate-500">Quantities can only be changed while the order is pending.</p>}
+      {!canEditQuantity ? (
+        <p className="mb-3 text-sm text-slate-600">Item quantities can only be changed while an order is pending.</p>
+      ) : null}
       <div className="space-y-3">
         {order.items.map((item) => (
           <div key={item.id} className="rounded-lg border border-slate-200 p-3">
@@ -61,7 +57,11 @@ export function OrderItemsPanel({ order, onUpdateQuantity }: OrderItemsPanelProp
                 <div className="text-sm text-slate-600">{item.sku}</div>
                 <div className="text-sm text-slate-500">Available: {item.availableQuantity}</div>
               </div>
-              <QuantityForm itemId={item.id} quantity={item.quantity} isEditable={isEditable} onSave={onUpdateQuantity} />
+              {canEditQuantity ? (
+                <QuantityForm itemId={item.id} quantity={item.quantity} onSave={onUpdateQuantity} />
+              ) : (
+                <div className="text-sm text-slate-700">Quantity: {item.quantity}</div>
+              )}
             </div>
           </div>
         ))}

packages/shared/src/order-status.ts

@@ -2,8 +2,6 @@ export const orderStatuses = ["pending", "processing", "shipped", "cancelled", "
 
 export type OrderStatus = (typeof orderStatuses)[number];
 
-// Item quantities can only be adjusted before fulfillment starts. Shared so the UI
-// matches the API rule; the API stays the authoritative check.
 export function canEditOrderItems(status: OrderStatus) {
   return status === "pending";
 }