add:internal order notes

apps/web/src/orders/order-api.ts

@@ -34,3 +34,10 @@ export function cancelOrder(orderId: string, reason?: string) {
     body: JSON.stringify({ reason })
   });
 }
+
+export function saveOrderNotes(orderId: string, notes: string) {
+  return apiRequest<OrderDetail>(`/api/orders/${orderId}/notes`, {
+    method: "POST",
+    body: JSON.stringify({ notes })
+  });
+}

apps/web/src/orders/order-detail-page.tsx

@@ -1,6 +1,7 @@
 import type { Address, AuditEvent, OrderDetail } from "@orderops/shared";
 import { AuditTimeline } from "./audit-timeline";
 import { OrderItemsPanel } from "./order-items-panel";
+import { OrderNotesPanel } from "./order-notes-panel";
 import { OrderSummaryPanel } from "./order-summary";
 import { ShippingAddressForm } from "./shipping-address-form";
 
@@ -9,6 +10,7 @@ interface OrderDetailPageProps {
   auditEvents: AuditEvent[];
   onUpdateQuantity: (itemId: string, quantity: number) => Promise<void>;
   onSaveAddress: (address: Address) => Promise<void>;
+  onSaveNotes: (notes: string) => Promise<void>;
   onCancel: () => Promise<void>;
 }
 
@@ -17,6 +19,7 @@ export function OrderDetailPage({
   auditEvents,
   onUpdateQuantity,
   onSaveAddress,
+  onSaveNotes,
   onCancel
 }: OrderDetailPageProps) {
   return (
@@ -29,6 +32,7 @@ export function OrderDetailPage({
       </div>
       <OrderItemsPanel order={order} onUpdateQuantity={onUpdateQuantity} />
       <ShippingAddressForm order={order} onSave={onSaveAddress} />
+      <OrderNotesPanel notes={order.notes} onSaveNotes={onSaveNotes} />
       <AuditTimeline events={auditEvents} />
     </div>
   );

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

@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+
+interface OrderNotesPanelProps {
+  notes: string;
+  onSaveNotes: (notes: string) => Promise<void>;
+}
+
+export function OrderNotesPanel({ notes, onSaveNotes }: OrderNotesPanelProps) {
+  const [draft, setDraft] = useState(notes);
+  const [isSaving, setIsSaving] = useState(false);
+  const canSubmit = draft.trim().length > 0 && draft !== notes && !isSaving;
+
+  // Show the stored notes again whenever the order is reloaded.
+  useEffect(() => {
+    setDraft(notes);
+  }, [notes]);
+
+  return (
+    <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+      <h3 className="text-sm font-semibold text-slate-700">Internal notes</h3>
+      <p className="mb-3 text-xs text-slate-500">Visible to OrderOps employees only.</p>
+      <form
+        className="space-y-2"
+        onSubmit={async (event) => {
+          event.preventDefault();
+
+          if (!canSubmit) {
+            return;
+          }
+
+          setIsSaving(true);
+          await onSaveNotes(draft);
+          setIsSaving(false);
+        }}
+      >
+        <label className="block text-sm text-slate-700">
+          <span className="mb-1 block">Notes</span>
+          <textarea
+            className="w-full rounded-lg border border-slate-300 px-3 py-2"
+            placeholder="Add context for teammates following up on this order"
+            rows={4}
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+          />
+        </label>
+        <button
+          className="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white disabled:opacity-50"
+          disabled={!canSubmit}
+          type="submit"
+        >
+          {isSaving ? "Saving notes..." : "Save notes"}
+        </button>
+      </form>
+    </section>
+  );
+}

apps/web/src/orders/order-page.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import type { Address, AuditEvent, OrderDetail } from "@orderops/shared";
 import { Link, useParams } from "react-router-dom";
 import { Toast } from "../ui/toast";
-import { cancelOrder, getOrder, listAuditEvents, updateOrderItemQuantity, updateShippingAddress } from "./order-api";
+import { cancelOrder, getOrder, listAuditEvents, saveOrderNotes, updateOrderItemQuantity, updateShippingAddress } from "./order-api";
 import { OrderDetailPage } from "./order-detail-page";
 
 interface ToastState {
@@ -86,6 +86,7 @@ export function OrderPage() {
           auditEvents={auditEvents}
           onUpdateQuantity={(itemId, quantity) => runAction(() => updateOrderItemQuantity(order.id, itemId, quantity), "Quantity saved.")}
           onSaveAddress={(address: Address) => runAction(() => updateShippingAddress(order.id, address), "Shipping address saved.")}
+          onSaveNotes={(notes: string) => runAction(() => saveOrderNotes(order.id, notes), "Internal notes saved.")}
           onCancel={() => runAction(() => cancelOrder(order.id), "Order cancelled.")}
         />
       ) : null}