assignment 2 ui changes

.github/pull_request_template.md

@@ -5,6 +5,7 @@ Describe problem and user or business impact.
 ## Ticket / Assignment
 
 - Ticket:
+- Assignment:
 
 ## What changed
 
@@ -17,6 +18,7 @@ Describe problem and user or business impact.
 List exact commands and manual checks.
 
 ```bash
+bun run check
 bun run test
 bun run build:web
 ```

.gitignore

@@ -8,4 +8,3 @@ bun.lock
 *.sqlite-wal
 dist
 coverage
-pi-session*

AGENTS.md

@@ -1,9 +1,5 @@
 # Typescript Full Stack App Agent
 
-## Coding Conventions
-- Before planning any code plan, check the `CONTRIBUTING.md` file in the root directory of the project to understand and apply coding conventions for this project
-- Instead of reading and parsing the `CONTRIBUTING.md` every time, cache the findings of `CONTRIBUTING.md` and refer to this cache'd file whenever checking the conventions is required
-
 ## Output Rules
 
 ### Response Style
@@ -180,3 +176,4 @@ Skip `discover_context` for narrow tasks with explicit file targets.
 ### Boundaries
 - Recon is read-only unless user requested implementation.
 - Do not treat scout output as complete when evidence suggests missing files.
+

CONTRIBUTING.md

@@ -28,6 +28,7 @@ bun run dev:web
 Common checks:
 
 ```bash
+bun run check
 bun run test
 bun run build:web
 ```

apps/api/src/db/init-db.ts

@@ -90,7 +90,7 @@ export function initializeDatabase(sqlite: Database) {
       customer_id TEXT NOT NULL REFERENCES users(id),
       shipping_address_id TEXT NOT NULL REFERENCES addresses(id),
       status TEXT NOT NULL,
-      notes TEXT,
+      notes TEXT NOT NULL DEFAULT '',
       created_at TEXT NOT NULL,
       updated_at TEXT NOT NULL
     );
@@ -121,7 +121,7 @@ export function initializeDatabase(sqlite: Database) {
     );
   `);
 
-  if (!columnExists(sqlite, "orders", "notes")) {
-    sqlite.exec("ALTER TABLE orders ADD COLUMN notes TEXT");
+  if (tableExists(sqlite, "orders") && !columnExists(sqlite, "orders", "notes")) {
+    sqlite.exec(`ALTER TABLE orders ADD COLUMN notes TEXT NOT NULL DEFAULT ''`);
   }
 }

apps/api/src/db/schema/orders.ts

@@ -9,7 +9,7 @@ export const orders = sqliteTable("orders", {
   customerId: text("customer_id").notNull().references(() => users.id),
   shippingAddressId: text("shipping_address_id").notNull().references(() => addresses.id),
   status: text("status").notNull(),
-  notes: text("notes"),
+  notes: text("notes").notNull().default(""),
   createdAt: text("created_at").notNull(),
   updatedAt: text("updated_at").notNull()
 });

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

@@ -1,5 +1,5 @@
-import { canCancelOrder, orderCancellationBlockedMessage } from "@orderops/shared/order-status";
 import type { DatabaseContext } from "../db/database";
+import { canCancelOrder } from "./order-status";
 import { appendAuditEvent, findOrderDetail, updateOrderStatus } from "./order-repository";
 
 export async function cancelOrder(
@@ -17,7 +17,7 @@ export async function cancelOrder(
   }
 
   if (!canCancelOrder(order.status)) {
-    return { statusCode: 400, message: orderCancellationBlockedMessage } as const;
+    return { statusCode: 400, message: "Order cannot be cancelled for this order status." } as const;
   }
 
   const updatedAt = new Date().toISOString();

apps/api/src/orders/order-quantity-assignment-3.test.ts

@@ -1,91 +0,0 @@
-import { afterEach, beforeEach, describe, expect, test } from "bun:test";
-import type { AppWithContext } from "../app";
-import { buildApp } from "../app";
-import { createUser } from "../users/user-repository";
-
-let app: AppWithContext;
-let employeeCookie = "";
-
-function firstHeader(value: string | string[] | undefined) {
-  return Array.isArray(value) ? value[0] : value ?? "";
-}
-
-async function login(username: string) {
-  const response = await app.inject({ method: "POST", url: "/api/login", payload: { username } });
-  return firstHeader(response.headers["set-cookie"]);
-}
-
-beforeEach(async () => {
-  app = await buildApp(":memory:");
-
-  await createUser(app.dbContext, {
-    username: "dev-employee",
-    name: "Dev Employee",
-    email: "dev.employee@example.com",
-    role: "employee"
-  });
-
-  employeeCookie = await login("dev-employee");
-});
-
-afterEach(async () => {
-  await app.close();
-});
-
-describe("assignment 3 quantity validation", () => {
-  test("allows quantity changes for pending orders", async () => {
-    const response = await app.inject({
-      method: "POST",
-      url: "/api/orders/order_1/items/item_1/quantity",
-      headers: { cookie: employeeCookie },
-      payload: { quantity: 5 }
-    });
-
-    expect(response.statusCode).toBe(200);
-    expect(response.json().items.find((item: { id: string }) => item.id === "item_1")?.quantity).toBe(5);
-  });
-
-  test("rejects quantity changes for processing orders", async () => {
-    const response = await app.inject({
-      method: "POST",
-      url: "/api/orders/order_2/items/item_3/quantity",
-      headers: { cookie: employeeCookie },
-      payload: { quantity: 2 }
-    });
-
-    expect(response.statusCode).toBe(400);
-  });
-
-  test("rejects quantity changes for shipped orders", async () => {
-    const response = await app.inject({
-      method: "POST",
-      url: "/api/orders/order_3/items/item_4/quantity",
-      headers: { cookie: employeeCookie },
-      payload: { quantity: 1 }
-    });
-
-    expect(response.statusCode).toBe(400);
-  });
-
-  test("rejects quantity outside the allowed range", async () => {
-    const response = await app.inject({
-      method: "POST",
-      url: "/api/orders/order_1/items/item_1/quantity",
-      headers: { cookie: employeeCookie },
-      payload: { quantity: 0 }
-    });
-
-    expect(response.statusCode).toBe(400);
-  });
-
-  test("rejects quantity above effective inventory", async () => {
-    const response = await app.inject({
-      method: "POST",
-      url: "/api/orders/order_1/items/item_1/quantity",
-      headers: { cookie: employeeCookie },
-      payload: { quantity: 9 }
-    });
-
-    expect(response.statusCode).toBe(400);
-  });
-});

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

@@ -35,13 +35,13 @@ function toOrderItemDetail(row: {
 }
 
 export async function listOrderSummaries(context: DatabaseContext, query?: string) {
-  const search = query?.trim().toLowerCase();
+  const search = query?.trim();
 
   const filters = search
     ? or(
-        sql`instr(lower(${orders.orderNumber}), ${search}) > 0`,
-        sql`instr(lower(${users.name}), ${search}) > 0`,
-        sql`instr(lower(${users.email}), ${search}) > 0`
+        sql`instr(lower(${orders.orderNumber}), lower(${search})) > 0`,
+        sql`instr(lower(${users.name}), lower(${search})) > 0`,
+        sql`instr(lower(${users.email}), lower(${search})) > 0`
       )
     : undefined;
 
@@ -96,9 +96,9 @@ export async function findOrderDetail(context: DatabaseContext, orderId: string)
     id: header.order.id,
     orderNumber: header.order.orderNumber,
     status: header.order.status as OrderDetail["status"],
+    notes: header.order.notes,
     createdAt: header.order.createdAt,
     updatedAt: header.order.updatedAt,
-    notes: header.order.notes,
     customer: {
       id: header.customer.id,
       name: header.customer.name,
@@ -117,24 +117,13 @@ export async function findOrderItemRecord(context: DatabaseContext, orderId: str
     .leftJoin(inventory, eq(orderItems.productId, inventory.productId))
     .where(and(eq(orderItems.id, itemId), eq(orderItems.orderId, orderId)));
 
-  if (!row) {
-    return null;
-  }
-
-  return {
-    ...row,
-    order: { ...row.order, status: row.order.status as OrderDetail["status"] }
-  };
+  return row ?? null;
 }
 
 export async function updateOrderItemQuantity(context: DatabaseContext, itemId: string, quantity: number) {
   await context.db.update(orderItems).set({ quantity }).where(eq(orderItems.id, itemId));
 }
 
-export async function updateOrderNotes(context: DatabaseContext, orderId: string, notes: string) {
-  await context.db.update(orders).set({ notes }).where(eq(orders.id, orderId));
-}
-
 export async function updateOrderTimestamp(context: DatabaseContext, orderId: string, updatedAt: string) {
   await context.db.update(orders).set({ updatedAt }).where(eq(orders.id, orderId));
 }
@@ -143,6 +132,10 @@ export async function updateOrderStatus(context: DatabaseContext, orderId: strin
   await context.db.update(orders).set({ status, updatedAt }).where(eq(orders.id, orderId));
 }
 
+export async function updateOrderNotes(context: DatabaseContext, orderId: string, notes: string, updatedAt: string) {
+  await context.db.update(orders).set({ notes, updatedAt }).where(eq(orders.id, orderId));
+}
+
 export async function updateOrderAddress(context: DatabaseContext, orderId: string, address: Address) {
   const [row] = await context.db.select({ shippingAddressId: orders.shippingAddressId }).from(orders).where(eq(orders.id, orderId));
 

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

@@ -6,7 +6,8 @@ import { cancelOrder } from "./cancel-order";
 import { getOrder } from "./get-order";
 import { listAuditEvents } from "./list-audit-events";
 import { listOrders } from "./list-orders";
-import { changeOrderItemQuantity, updateOrderNotes } from "./update-order-item";
+import { changeOrderItemQuantity } from "./update-order-item";
+import { changeOrderNotes } from "./update-notes";
 import { changeShippingAddress } from "./update-shipping-address";
 
 interface OrderRouteOptions {
@@ -29,14 +30,14 @@ interface QuantityBody {
   quantity: number;
 }
 
-interface CancelBody {
-  reason?: string;
-}
-
 interface NotesBody {
   notes: string;
 }
 
+interface CancelBody {
+  reason?: string;
+}
+
 type AuthenticatedRequest = FastifyRequest & { currentUser: AuthUser };
 
 export const registerOrderRoutes: FastifyPluginAsync<OrderRouteOptions> = async (app, options) => {
@@ -105,13 +106,13 @@ export const registerOrderRoutes: FastifyPluginAsync<OrderRouteOptions> = async
         type: "object",
         required: ["notes"],
         properties: {
-          notes: { type: "string", maxLength: 1000 }
+          notes: { type: "string" }
         }
       }
     }
   }, async (request, reply) => {
     const currentUser = (request as AuthenticatedRequest).currentUser;
-    const result = await updateOrderNotes(options.db, {
+    const result = await changeOrderNotes(options.db, {
       orderId: request.params.orderId,
       notes: request.body.notes,
       actor: currentUser.username

apps/api/src/orders/order-search-assignment-1.test.ts

@@ -7,7 +7,7 @@ let app: AppWithContext;
 let employeeCookie = "";
 
 function firstHeader(value: string | string[] | undefined) {
-  return Array.isArray(value) ? value[0] : value ?? "";
+  return Array.isArray(value) ? (value[0] ?? "") : value ?? "";
 }
 
 async function login(username: string) {

apps/api/src/orders/order-status-rules-assignment-4.test.ts

@@ -1,108 +0,0 @@
-import { afterEach, beforeEach, describe, expect, test } from "bun:test";
-import type { AppWithContext } from "../app";
-import { buildApp } from "../app";
-import { createUser } from "../users/user-repository";
-
-let app: AppWithContext;
-let employeeCookie = "";
-
-function firstHeader(value: string | string[] | undefined) {
-  return Array.isArray(value) ? value[0] : value ?? "";
-}
-
-async function login(username: string) {
-  const response = await app.inject({ method: "POST", url: "/api/login", payload: { username } });
-  return firstHeader(response.headers["set-cookie"]);
-}
-
-beforeEach(async () => {
-  app = await buildApp(":memory:");
-
-  await createUser(app.dbContext, {
-    username: "dev-employee",
-    name: "Dev Employee",
-    email: "dev.employee@example.com",
-    role: "employee"
-  });
-
-  employeeCookie = await login("dev-employee");
-});
-
-afterEach(async () => {
-  await app.close();
-});
-
-describe("assignment 4 order lifecycle rules", () => {
-  test("keeps quantity editing blocked for processing orders", async () => {
-    const response = await app.inject({
-      method: "POST",
-      url: "/api/orders/order_2/items/item_3/quantity",
-      headers: { cookie: employeeCookie },
-      payload: { quantity: 2 }
-    });
-
-    expect(response.statusCode).toBe(400);
-  });
-
-  test("allows address editing for processing orders", async () => {
-    const response = await app.inject({
-      method: "POST",
-      url: "/api/orders/order_2/shipping-address",
-      headers: { cookie: employeeCookie },
-      payload: {
-        fullName: "Jane Doe",
-        line1: "50 New Street",
-        line2: null,
-        city: "Oakland",
-        state: "CA",
-        postalCode: "94607",
-        country: "US"
-      }
-    });
-
-    expect(response.statusCode).toBe(200);
-    expect(response.json().shippingAddress.city).toBe("Oakland");
-  });
-
-  test("allows cancellation for processing orders", async () => {
-    const response = await app.inject({
-      method: "POST",
-      url: "/api/orders/order_2/cancel",
-      headers: { cookie: employeeCookie },
-      payload: { reason: "Customer request" }
-    });
-
-    expect(response.statusCode).toBe(200);
-    expect(response.json().status).toBe("cancelled");
-  });
-
-  test("blocks address editing for shipped orders", async () => {
-    const response = await app.inject({
-      method: "POST",
-      url: "/api/orders/order_3/shipping-address",
-      headers: { cookie: employeeCookie },
-      payload: {
-        fullName: "John Smith",
-        line1: "77 Final Mile Road",
-        line2: null,
-        city: "Denver",
-        state: "CO",
-        postalCode: "80202",
-        country: "US"
-      }
-    });
-
-    expect(response.statusCode).toBe(400);
-  });
-
-  test("blocks cancellation for shipped orders", async () => {
-    const response = await app.inject({
-      method: "POST",
-      url: "/api/orders/order_3/cancel",
-      headers: { cookie: employeeCookie },
-      payload: { reason: "Late request" }
-    });
-
-    expect(response.statusCode).toBe(400);
-  });
-});

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

@@ -0,0 +1,13 @@
+import type { OrderStatus } from "@orderops/shared/order-status";
+
+export function canEditOrderItems(status: OrderStatus) {
+  return status === "pending" || status === "processing";
+}
+
+export function canEditShippingAddress(status: OrderStatus) {
+  return status === "pending" || status === "processing";
+}
+
+export function canCancelOrder(status: OrderStatus) {
+  return status === "pending" || status === "processing";
+}

apps/api/src/orders/update-notes.ts

@@ -0,0 +1,44 @@
+import type { DatabaseContext } from "../db/database";
+import { appendAuditEvent, findOrderDetail, updateOrderNotes } from "./order-repository";
+
+export const NOTES_MAX_LENGTH = 1000;
+
+export async function changeOrderNotes(
+  context: DatabaseContext,
+  input: {
+    orderId: string;
+    notes: string;
+    actor: string;
+  }
+) {
+  const order = await findOrderDetail(context, input.orderId);
+
+  if (!order) {
+    return { statusCode: 404, message: "Order not found." } as const;
+  }
+
+  const notes = input.notes.trim();
+
+  if (notes.length === 0) {
+    return { statusCode: 400, message: "Notes cannot be empty." } as const;
+  }
+
+  if (notes.length > NOTES_MAX_LENGTH) {
+    return { statusCode: 400, message: `Notes cannot exceed ${NOTES_MAX_LENGTH} characters.` } as const;
+  }
+
+  const updatedAt = new Date().toISOString();
+  await updateOrderNotes(context, input.orderId, notes, updatedAt);
+  await appendAuditEvent(context, {
+    orderId: input.orderId,
+    actor: input.actor,
+    type: "order.notes_updated",
+    message: "Updated internal notes.",
+    createdAt: updatedAt
+  });
+
+  return {
+    statusCode: 200,
+    order: await findOrderDetail(context, input.orderId)
+  } as const;
+}

apps/api/src/orders/update-order-item.ts

@@ -1,6 +1,6 @@
-import { canEditOrderItems, orderItemsLockedMessage } from "@orderops/shared/order-status";
 import type { DatabaseContext } from "../db/database";
-import { appendAuditEvent, findOrderDetail, findOrderItemRecord, updateOrderItemQuantity, updateOrderNotes as saveOrderNotes, updateOrderTimestamp } from "./order-repository";
+import { canEditOrderItems } from "./order-status";
+import { appendAuditEvent, findOrderDetail, findOrderItemRecord, updateOrderItemQuantity, updateOrderTimestamp } from "./order-repository";
 
 export async function changeOrderItemQuantity(
   context: DatabaseContext,
@@ -17,8 +17,8 @@ export async function changeOrderItemQuantity(
     return { statusCode: 404, message: "Order item not found." } as const;
   }
 
-  if (!canEditOrderItems(row.order.status)) {
-    return { statusCode: 400, message: orderItemsLockedMessage } as const;
+  if (!canEditOrderItems(row.order.status as never)) {
+    return { statusCode: 400, message: "Order items cannot be changed for this order status." } as const;
   }
 
   if (input.quantity < 1 || input.quantity > 10) {
@@ -47,44 +47,3 @@ export async function changeOrderItemQuantity(
     order: await findOrderDetail(context, input.orderId)
   } as const;
 }
-
-export async function updateOrderNotes(
-  context: DatabaseContext,
-  input: {
-    orderId: string;
-    notes: string;
-    actor: string;
-  }
-) {
-  const order = await findOrderDetail(context, input.orderId);
-
-  if (!order) {
-    return { statusCode: 404, message: "Order not found." } as const;
-  }
-
-  const notes = input.notes.trim();
-
-  if (!notes) {
-    return { statusCode: 400, message: "Notes cannot be empty." } as const;
-  }
-
-  if (notes.length > 1000) {
-    return { statusCode: 400, message: "Notes must be 1000 characters or fewer." } as const;
-  }
-
-  const updatedAt = new Date().toISOString();
-  await saveOrderNotes(context, input.orderId, notes);
-  await updateOrderTimestamp(context, input.orderId, updatedAt);
-  await appendAuditEvent(context, {
-    orderId: input.orderId,
-    actor: input.actor,
-    type: "order.notes_updated",
-    message: "Updated internal order notes.",
-    createdAt: updatedAt
-  });
-
-  return {
-    statusCode: 200,
-    order: await findOrderDetail(context, input.orderId)
-  } as const;
-}

apps/api/src/orders/update-shipping-address.ts

@@ -1,6 +1,6 @@
 import type { Address } from "@orderops/shared/address";
-import { canEditShippingAddress, shippingAddressLockedMessage } from "@orderops/shared/order-status";
 import type { DatabaseContext } from "../db/database";
+import { canEditShippingAddress } from "./order-status";
 import { appendAuditEvent, findOrderDetail, updateOrderAddress, updateOrderTimestamp } from "./order-repository";
 
 export async function changeShippingAddress(
@@ -18,7 +18,7 @@ export async function changeShippingAddress(
   }
 
   if (!canEditShippingAddress(order.status)) {
-    return { statusCode: 400, message: shippingAddressLockedMessage } as const;
+    return { statusCode: 400, message: "Shipping address cannot be changed for this order status." } as const;
   }
 
   const updatedAt = new Date().toISOString();

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

@@ -21,13 +21,6 @@ export function updateOrderItemQuantity(orderId: string, itemId: string, quantit
   });
 }
 
-export function updateOrderNotes(orderId: string, notes: string) {
-  return apiRequest<OrderDetail>(`/api/orders/${orderId}/notes`, {
-    method: "POST",
-    body: JSON.stringify({ notes })
-  });
-}
-
 export function updateShippingAddress(orderId: string, address: Address) {
   return apiRequest<OrderDetail>(`/api/orders/${orderId}/shipping-address`, {
     method: "POST",
@@ -35,6 +28,13 @@ export function updateShippingAddress(orderId: string, address: Address) {
   });
 }
 
+export function updateOrderNotes(orderId: string, notes: string) {
+  return apiRequest<OrderDetail>(`/api/orders/${orderId}/notes`, {
+    method: "POST",
+    body: JSON.stringify({ notes })
+  });
+}
+
 export function cancelOrder(orderId: string, reason?: string) {
   return apiRequest<OrderDetail>(`/api/orders/${orderId}/cancel`, {
     method: "POST",

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

@@ -1,7 +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 { OrderNotesPanel } from "./order-notes";
 import { OrderSummaryPanel } from "./order-summary";
 import { ShippingAddressForm } from "./shipping-address-form";
 
@@ -25,6 +25,7 @@ export function OrderDetailPage({
   return (
     <div className="space-y-4">
       <OrderSummaryPanel order={order} />
+      <OrderNotesPanel notes={order.notes} onSave={onSaveNotes} />
       <div className="flex justify-end">
         <button className="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white" onClick={() => void onCancel()} type="button">
           Cancel order
@@ -32,7 +33,6 @@ export function OrderDetailPage({
       </div>
       <OrderItemsPanel order={order} onUpdateQuantity={onUpdateQuantity} />
       <ShippingAddressForm order={order} onSave={onSaveAddress} />
-      <OrderNotes order={order} onSave={onSaveNotes} />
       <AuditTimeline events={auditEvents} />
     </div>
   );

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

@@ -1,37 +1,60 @@
 import { useState } from "react";
-import type { OrderDetail } from "@orderops/shared";
+
+export const NOTES_MAX_LENGTH = 1000;
 
 interface OrderNotesProps {
-  order: OrderDetail;
+  notes: string;
   onSave: (notes: string) => Promise<void>;
 }
 
-export function OrderNotes({ order, onSave }: OrderNotesProps) {
-  const [notes, setNotes] = useState(order.notes ?? "");
+export function OrderNotesPanel({ notes, onSave }: OrderNotesProps) {
+  const [draft, setDraft] = useState(notes);
+  const [isSaving, setIsSaving] = useState(false);
+  const trimmed = draft.trim();
+  const isDisabled = isSaving || trimmed.length === 0 || trimmed === notes;
+
+  async function handleSave() {
+    if (isDisabled) {
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      await onSave(trimmed);
+    } finally {
+      setIsSaving(false);
+    }
+  }
 
   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>
+      <div className="mb-3 flex items-center justify-between">
+        <h3 className="text-sm font-semibold text-slate-700">Internal notes</h3>
+        <span className="text-xs text-slate-500">{draft.length}/{NOTES_MAX_LENGTH}</span>
+      </div>
+      {notes ? (
+        <p className="mb-3 whitespace-pre-wrap text-sm text-slate-700">{notes}</p>
+      ) : (
+        <p className="mb-3 text-sm text-slate-400">No internal notes yet. Add context for teammates following up on this order.</p>
+      )}
       <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)}
+        className="w-full resize-y rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 focus:border-blue-500 focus:outline-none"
+        maxLength={NOTES_MAX_LENGTH}
+        onChange={(event) => setDraft(event.target.value)}
+        placeholder="Add internal notes..."
+        rows={3}
+        value={draft}
       />
-        </label>
-        <button className="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white" type="submit">
-          Save notes
+      <div className="mt-3 flex justify-end">
+        <button
+          className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
+          disabled={isDisabled}
+          onClick={() => void handleSave()}
+          type="button"
+        >
+          {isSaving ? "Saving..." : "Save notes"}
         </button>
-      </form>
+      </div>
     </section>
   );
 }

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { canEditOrderItems, orderItemsLockedMessage, type Address, type AuditEvent, type OrderDetail } from "@orderops/shared";
+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, updateOrderNotes, updateShippingAddress } from "./order-api";
@@ -72,19 +72,6 @@ export function OrderPage() {
     }
   }
 
-  async function handleUpdateQuantity(itemId: string, quantity: number) {
-    if (!order) {
-      return;
-    }
-
-    if (!canEditOrderItems(order.status)) {
-      setToast({ message: orderItemsLockedMessage, variant: "error" });
-      return;
-    }
-
-    await runAction(() => updateOrderItemQuantity(order.id, itemId, quantity), "Quantity saved.");
-  }
-
   return (
     <div className="space-y-4">
       <Link className="inline-flex text-sm font-medium text-blue-600 hover:text-blue-700" to="/orders">
@@ -97,9 +84,9 @@ export function OrderPage() {
         <OrderDetailPage
           order={order}
           auditEvents={auditEvents}
-          onUpdateQuantity={handleUpdateQuantity}
+          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.")}
+          onSaveNotes={(notes: string) => runAction(() => updateOrderNotes(order.id, notes), "Notes saved.")}
           onCancel={() => runAction(() => cancelOrder(order.id), "Order cancelled.")}
         />
       ) : null}

packages/shared/src/order-detail.ts

@@ -17,9 +17,9 @@ export interface OrderDetail {
   id: string;
   orderNumber: string;
   status: OrderStatus;
+  notes: string;
   createdAt: string;
   updatedAt: string;
-  notes: string | null;
   customer: CustomerSummary;
   shippingAddress: Address;
   items: OrderItemDetail[];

packages/shared/src/order-status.ts

@@ -1,23 +1,3 @@
 export const orderStatuses = ["pending", "processing", "shipped", "cancelled", "refunded"] as const;
 
 export type OrderStatus = (typeof orderStatuses)[number];
-
-const orderItemsEditableStatuses: readonly OrderStatus[] = ["pending"];
-const shippingAddressEditableStatuses: readonly OrderStatus[] = ["pending", "processing"];
-const orderCancellableStatuses: readonly OrderStatus[] = ["pending", "processing"];
-
-export const orderItemsLockedMessage = "Order items cannot be changed for this order status.";
-export const shippingAddressLockedMessage = "Shipping address cannot be changed for this order status.";
-export const orderCancellationBlockedMessage = "Order cannot be cancelled for this order status.";
-
-export function canEditOrderItems(status: OrderStatus) {
-  return orderItemsEditableStatuses.includes(status);
-}
-
-export function canEditShippingAddress(status: OrderStatus) {
-  return shippingAddressEditableStatuses.includes(status);
-}
-
-export function canCancelOrder(status: OrderStatus) {
-  return orderCancellableStatuses.includes(status);
-}