From 698a49ae829d94fcf90ef6009fbcc67b28681921 Mon Sep 17 00:00:00 2001
From: derrick <derrick@astra-rei.com>
Date: Thu, 24 Sep 2026 22:35:55 +0900
Subject: [PATCH] add:order notes ui component

---
 apps/web/src/orders/order-detail-page.tsx |  4 +++
 apps/web/src/orders/order-notes.tsx       | 37 +++++++++++++++++++++++
 apps/web/src/orders/order-page.tsx        |  3 +-
 3 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/orders/order-notes.tsx

diff --git a/apps/web/src/orders/order-detail-page.tsx b/apps/web/src/orders/order-detail-page.tsx
index 7387ded..c6c5d8d 100644
--- a/apps/web/src/orders/order-detail-page.tsx
+++ b/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 { OrderNotes } from "./order-notes";
 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} />
+      <OrderNotes order={order} onSave={onSaveNotes} />
       <AuditTimeline events={auditEvents} />
     </div>
   );
diff --git a/apps/web/src/orders/order-notes.tsx b/apps/web/src/orders/order-notes.tsx
new file mode 100644
index 0000000..546fcf5
--- /dev/null
+++ b/apps/web/src/orders/order-notes.tsx
@@ -0,0 +1,37 @@
+import { useState } from "react";
+import type { OrderDetail } from "@orderops/shared";
+
+interface OrderNotesProps {
+  order: OrderDetail;
+  onSave: (notes: string) => Promise<void>;
+}
+
+export function OrderNotes({ order, onSave }: OrderNotesProps) {
+  const [notes, setNotes] = useState(order.notes ?? "");
+
+  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">Internal notes</h3>
+      <form
+        className="space-y-3"
+        onSubmit={async (event) => {
+          event.preventDefault();
+          await onSave(notes);
+        }}
+      >
+        <label className="block text-sm text-slate-700">
+          <span className="mb-1 block">Notes</span>
+          <textarea
+            className="w-full resize-none rounded-lg border border-slate-300 px-3 py-2"
+            rows={5}
+            value={notes}
+            onChange={(event) => setNotes(event.target.value)}
+          />
+        </label>
+        <button className="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white" type="submit">
+          Save notes
+        </button>
+      </form>
+    </section>
+  );
+}
diff --git a/apps/web/src/orders/order-page.tsx b/apps/web/src/orders/order-page.tsx
index 988e31a..c0aa212 100644
--- a/apps/web/src/orders/order-page.tsx
+++ b/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 {
@@ -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) => runAction(() => updateOrderNotes(order.id, notes), "Notes saved.")}
           onCancel={() => runAction(() => cancelOrder(order.id), "Order cancelled.")}
         />
       ) : null}