Feat added internal notes

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

@@ -120,7 +120,6 @@ export function initializeDatabase(sqlite: Database) {
       created_at TEXT NOT NULL
     );
   `);
-
   if (!columnExists(sqlite, "orders", "notes")) {
     sqlite.exec("ALTER TABLE orders ADD COLUMN notes TEXT");
   }

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

@@ -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,
@@ -124,14 +124,14 @@ export async function updateOrderItemQuantity(context: DatabaseContext, itemId:
   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));
 }
 
+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 updateOrderStatus(context: DatabaseContext, orderId: string, status: OrderDetail["status"], updatedAt: string) {
   await context.db.update(orders).set({ status, updatedAt }).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-order-notes";
 import { changeShippingAddress } from "./update-shipping-address";
 
 interface OrderRouteOptions {
@@ -33,10 +34,6 @@ interface CancelBody {
   reason?: string;
 }
 
-interface NotesBody {
-  notes: string;
-}
-
 type AuthenticatedRequest = FastifyRequest & { currentUser: AuthUser };
 
 export const registerOrderRoutes: FastifyPluginAsync<OrderRouteOptions> = async (app, options) => {
@@ -73,6 +70,29 @@ export const registerOrderRoutes: FastifyPluginAsync<OrderRouteOptions> = async
 
   app.get<{ Params: IdParams }>("/orders/:orderId/audit-events", async (request) => listAuditEvents(options.db, request.params.orderId));
 
+  app.post<{ Params: IdParams; Body: { notes: string } }>("/orders/:orderId/notes", {
+    schema: {
+      body: {
+        type: "object",
+        required: ["notes"],
+        properties: {
+          notes: { type: "string", minLength: 1, maxLength: 1000 }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const result = await changeOrderNotes(options.db, {
+      orderId: request.params.orderId,
+      notes: request.body.notes
+    });
+
+    if (result.statusCode !== 200) {
+      return reply.code(result.statusCode).send({ message: result.message });
+    }
+
+    return result.order;
+  });
+
   app.post<{ Params: OrderItemParams; Body: QuantityBody }>("/orders/:orderId/items/:itemId/quantity", {
     schema: {
       body: {
@@ -99,31 +119,6 @@ export const registerOrderRoutes: FastifyPluginAsync<OrderRouteOptions> = async
     return result.order;
   });
 
-  app.post<{ Params: IdParams; Body: NotesBody }>("/orders/:orderId/notes", {
-    schema: {
-      body: {
-        type: "object",
-        required: ["notes"],
-        properties: {
-          notes: { type: "string", maxLength: 1000 }
-        }
-      }
-    }
-  }, async (request, reply) => {
-    const currentUser = (request as AuthenticatedRequest).currentUser;
-    const result = await updateOrderNotes(options.db, {
-      orderId: request.params.orderId,
-      notes: request.body.notes,
-      actor: currentUser.username
-    });
-
-    if (result.statusCode !== 200) {
-      return reply.code(result.statusCode).send({ message: result.message });
-    }
-
-    return result.order;
-  });
-
   app.post<{ Params: IdParams; Body: Address }>("/orders/:orderId/shipping-address", {
     schema: {
       body: {

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

@@ -1,6 +1,8 @@
 import type { OrderStatus } from "@orderops/shared/order-status";
 
-export { canEditOrderItems } 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";

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

@@ -1,6 +1,6 @@
 import type { DatabaseContext } from "../db/database";
 import { canEditOrderItems } from "./order-status";
-import { appendAuditEvent, findOrderDetail, findOrderItemRecord, updateOrderItemQuantity, updateOrderNotes as saveOrderNotes, updateOrderTimestamp } from "./order-repository";
+import { appendAuditEvent, findOrderDetail, findOrderItemRecord, updateOrderItemQuantity, updateOrderTimestamp } from "./order-repository";
 
 export async function changeOrderItemQuantity(
   context: DatabaseContext,
@@ -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-order-notes.ts

@@ -0,0 +1,19 @@
+import type { DatabaseContext } from "../db/database";
+import { findOrderDetail, updateOrderNotes } from "./order-repository";
+
+export async function changeOrderNotes(context: DatabaseContext, input: { orderId: string; notes: string }) {
+  const notes = input.notes.trim();
+
+  if (!notes || Array.from(input.notes).length > 1000) {
+    return { statusCode: 400, message: "Internal notes must contain between 1 and 1000 characters." } as const;
+  }
+
+  const order = await findOrderDetail(context, input.orderId);
+  if (!order) {
+    return { statusCode: 404, message: "Order not found." } as const;
+  }
+
+  await updateOrderNotes(context, input.orderId, notes, new Date().toISOString());
+
+  return { statusCode: 200, order: await findOrderDetail(context, input.orderId) } as const;
+}

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",
@@ -41,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,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 { OrderNotesForm } from "./order-notes-form";
 import { OrderSummaryPanel } from "./order-summary";
 import { ShippingAddressForm } from "./shipping-address-form";
 
@@ -10,8 +10,8 @@ interface OrderDetailPageProps {
   auditEvents: AuditEvent[];
   onUpdateQuantity: (itemId: string, quantity: number) => Promise<void>;
   onSaveAddress: (address: Address) => Promise<void>;
-  onSaveNotes: (notes: string) => Promise<void>;
   onCancel: () => Promise<void>;
+  onSaveNotes: (notes: string) => Promise<boolean>;
 }
 
 export function OrderDetailPage({
@@ -19,21 +19,28 @@ export function OrderDetailPage({
   auditEvents,
   onUpdateQuantity,
   onSaveAddress,
-  onSaveNotes,
+  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>
       </div>
       <OrderItemsPanel order={order} onUpdateQuantity={onUpdateQuantity} />
       <ShippingAddressForm order={order} onSave={onSaveAddress} />
-      <OrderNotes order={order} onSave={onSaveNotes} />
       <AuditTimeline events={auditEvents} />
+      <OrderNotesForm key={order.id} notes={order.notes} onSave={onSaveNotes} />
     </div>
   );
 }

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

@@ -1,6 +1,5 @@
 import { useState } from "react";
 import type { OrderDetail } from "@orderops/shared";
-import { canEditOrderItems } from "@orderops/shared/order-status";
 
 interface OrderItemsPanelProps {
   order: OrderDetail;
@@ -40,14 +39,9 @@ function QuantityForm({
 }
 
 export function OrderItemsPanel({ order, onUpdateQuantity }: OrderItemsPanelProps) {
-  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>
-      {!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">
@@ -57,11 +51,7 @@ 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>
-              {canEditQuantity ? (
               <QuantityForm itemId={item.id} quantity={item.quantity} onSave={onUpdateQuantity} />
-              ) : (
-                <div className="text-sm text-slate-700">Quantity: {item.quantity}</div>
-              )}
             </div>
           </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-notes.tsx

@@ -1,37 +0,0 @@
-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>
-  );
-}

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

@@ -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,10 +86,10 @@ export function OrderPage() {
         <OrderDetailPage
           order={order}
           auditEvents={auditEvents}
-          onUpdateQuantity={(itemId, quantity) => runAction(() => updateOrderItemQuantity(order.id, itemId, quantity), "Quantity saved.")}
+          onUpdateQuantity={async (itemId, quantity) => { await runAction(() => updateOrderItemQuantity(order.id, itemId, quantity), "Quantity saved."); }}
-          onSaveAddress={(address: Address) => runAction(() => updateShippingAddress(order.id, address), "Shipping address saved.")}
+          onSaveAddress={async (address: Address) => { await runAction(() => updateShippingAddress(order.id, address), "Shipping address saved."); }}
-          onSaveNotes={(notes) => runAction(() => updateOrderNotes(order.id, notes), "Notes saved.")}
+          onCancel={async () => { await runAction(() => cancelOrder(order.id), "Order cancelled."); }}
-          onCancel={() => runAction(() => cancelOrder(order.id), "Order cancelled.")}
+          onSaveNotes={(notes) => runAction(() => updateOrderNotes(order.id, notes), "Internal notes saved.")}
         />
       ) : null}
     </div>

packages/shared/src/order-detail.ts

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

packages/shared/src/order-status.ts

@@ -1,7 +1,3 @@
 export const orderStatuses = ["pending", "processing", "shipped", "cancelled", "refunded"] as const;
 
 export type OrderStatus = (typeof orderStatuses)[number];
-
-export function canEditOrderItems(status: OrderStatus) {
-  return status === "pending";
-}