Feat added internal 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 updateOrderNotes(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 { OrderNotesForm } from "./order-notes-form";
 import { OrderSummaryPanel } from "./order-summary";
 import { ShippingAddressForm } from "./shipping-address-form";
 
@@ -10,6 +11,7 @@ interface OrderDetailPageProps {
   onUpdateQuantity: (itemId: string, quantity: number) => Promise<void>;
   onSaveAddress: (address: Address) => Promise<void>;
   onCancel: () => Promise<void>;
+  onSaveNotes: (notes: string) => Promise<boolean>;
 }
 
 export function OrderDetailPage({
@@ -17,12 +19,20 @@ export function OrderDetailPage({
   auditEvents,
   onUpdateQuantity,
   onSaveAddress,
-  onCancel
+  onCancel,
+  onSaveNotes
 }: OrderDetailPageProps) {
   return (
     <div className="space-y-4">
       <OrderSummaryPanel order={order} />
-      <div className="flex justify-end">
+      <div className="flex justify-end gap-3">
+        <button className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white" type="button" onClick={() => {
+          const input = document.getElementById("internal-order-notes");
+          input?.scrollIntoView({ block: "center" });
+          input?.focus({ preventScroll: true });
+        }}>
+          {order.notes ? "Edit internal notes" : "Add internal note"}
+        </button>
         <button className="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white" onClick={() => void onCancel()} type="button">
           Cancel order
         </button>
@@ -30,6 +40,7 @@ export function OrderDetailPage({
       <OrderItemsPanel order={order} onUpdateQuantity={onUpdateQuantity} />
       <ShippingAddressForm order={order} onSave={onSaveAddress} />
       <AuditTimeline events={auditEvents} />
+      <OrderNotesForm key={order.id} notes={order.notes} onSave={onSaveNotes} />
     </div>
   );
 }

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

@@ -0,0 +1,58 @@
+import { useState } from "react";
+
+interface OrderNotesFormProps {
+  notes: string | null;
+  onSave: (notes: string) => Promise<boolean>;
+}
+
+export function OrderNotesForm({ notes, onSave }: OrderNotesFormProps) {
+  const [draft, setDraft] = useState(notes ?? "");
+  const [isSaving, setIsSaving] = useState(false);
+  const length = Array.from(draft).length;
+
+  return (
+    <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+      <div className="mb-3 flex items-center gap-3">
+        <h3 className="text-sm font-semibold text-slate-700">Internal notes</h3>
+        <span className="rounded-full bg-slate-100 px-3 py-1 text-xs text-slate-600">Employees only</span>
+      </div>
+      {notes ? <p className="mb-3 whitespace-pre-wrap break-words rounded-lg border border-slate-200 p-3 text-sm text-slate-700">{notes}</p> : null}
+      <form onSubmit={async (event) => {
+        event.preventDefault();
+        if (isSaving || !draft.trim() || length > 1000) return;
+        setIsSaving(true);
+        try {
+          if (await onSave(draft)) setDraft(draft.trim());
+        } finally {
+          setIsSaving(false);
+        }
+      }}>
+        <label className="mb-1 block text-sm text-slate-700" htmlFor="internal-order-notes">
+          {notes ? "Edit internal notes" : "Add a note for your teammates"}
+        </label>
+        <textarea
+          id="internal-order-notes"
+          className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
+          aria-describedby="internal-order-notes-help"
+          placeholder="Add a note for your teammates..."
+          rows={3}
+          value={draft}
+          disabled={isSaving}
+          onChange={(event) => setDraft(event.target.value)}
+        />
+        <div className="mt-2 flex items-center justify-between gap-3">
+          <p id="internal-order-notes-help" className="text-xs text-slate-600">
+            {length}/1000 characters. Saving replaces the current notes.
+          </p>
+          <button
+            className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white disabled:opacity-50"
+            type="submit"
+            disabled={isSaving || !draft.trim() || length > 1000}
+          >
+            {isSaving ? "Saving..." : notes ? "Save notes" : "Add note"}
+          </button>
+        </div>
+      </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, updateOrderItemQuantity, updateOrderNotes, updateShippingAddress } from "./order-api";
 import { OrderDetailPage } from "./order-detail-page";
 
 interface ToastState {
@@ -55,7 +55,7 @@ export function OrderPage() {
 
   async function runAction(action: () => Promise<OrderDetail>, successMessage: string) {
     if (!orderId) {
-      return;
+      return false;
     }
 
     try {
@@ -64,11 +64,13 @@ export function OrderPage() {
       setOrder(nextOrder);
       await refreshOrder(orderId);
       setToast({ message: successMessage, variant: "success" });
+      return true;
     } catch (caught) {
       setToast({
         message: caught instanceof Error ? caught.message : "Request failed.",
         variant: "error"
       });
+      return false;
     }
   }
 
@@ -84,9 +86,10 @@ export function OrderPage() {
         <OrderDetailPage
           order={order}
           auditEvents={auditEvents}
-          onUpdateQuantity={(itemId, quantity) => runAction(() => updateOrderItemQuantity(order.id, itemId, quantity), "Quantity saved.")}
-          onSaveAddress={(address: Address) => runAction(() => updateShippingAddress(order.id, address), "Shipping address saved.")}
-          onCancel={() => runAction(() => cancelOrder(order.id), "Order cancelled.")}
+          onUpdateQuantity={async (itemId, quantity) => { await runAction(() => updateOrderItemQuantity(order.id, itemId, quantity), "Quantity saved."); }}
+          onSaveAddress={async (address: Address) => { await runAction(() => updateShippingAddress(order.id, address), "Shipping address saved."); }}
+          onCancel={async () => { await runAction(() => cancelOrder(order.id), "Order cancelled."); }}
+          onSaveNotes={(notes) => runAction(() => updateOrderNotes(order.id, notes), "Internal notes saved.")}
         />
       ) : null}
     </div>