From dc07bfc8e0486cfc781e1166f6ebd42dca79caf5 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Wed, 18 Mar 2026 22:44:01 -0500
Subject: [PATCH] cleanup

---
 CHANGELOG.md                                  |  3 +
 client/src/modules/crm/CrmDetailPage.tsx      | 49 +++++-------
 .../modules/inventory/InventoryDetailPage.tsx | 66 ++++++++--------
 .../modules/inventory/InventoryFormPage.tsx   | 78 ++++++++++---------
 .../manufacturing/WorkOrderFormPage.tsx       | 27 ++++---
 .../modules/purchasing/PurchaseFormPage.tsx   | 31 ++++----
 client/src/modules/sales/SalesFormPage.tsx    | 24 +++---
 .../src/modules/shipping/ShipmentFormPage.tsx | 10 ++-
 8 files changed, 148 insertions(+), 140 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0a30433..a7b015b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,9 @@ This file is the running release and change log for CODEXIUM. Keep it updated wh
 - UI density standardization pass across app shell, dashboard, finance, project detail, manufacturing detail, and admin surfaces, including tighter panel spacing, more compact shell/navigation spacing, and removal of redundant explanatory subcopy in favor of concise uppercase section labels
 - Continued density standardization across CRM, inventory, sales, purchasing, and shipping list/detail surfaces so module headers, filter bars, and status panels follow the same tighter uppercase operational pattern
 - Continued density standardization across CRM, sales, purchasing, shipping, manufacturing, and project form/detail headers so editor and record surfaces now follow the same compact uppercase pattern with less redundant helper copy
+- Continued density standardization across CRM detail internals and inventory item editing so secondary cards, timeline/history panels, thumbnail panels, BOM/routing editors, and empty states use the tighter shared surface treatment with less filler copy
+- Continued density standardization across inventory detail transaction/transfer/reservation surfaces, and fixed item-editor navigation controls so SKU master and cancel actions navigate reliably from the create-item form
+- Continued density standardization across sales, purchasing, shipping, and manufacturing editor internals, and standardized form-header cancel actions onto button-driven navigation to avoid in-form route-transition edge cases
 - Project-side milestone and work-order rollups surfaced on project list and detail pages
 - Inventory SKU master builder with family-level sequence codes, branch-aware taxonomy management, and generated SKU previews on the item form
 - Thumbnail image attachment staging on inventory item create/edit pages, with upload-on-save and replacement/removal support
diff --git a/client/src/modules/crm/CrmDetailPage.tsx b/client/src/modules/crm/CrmDetailPage.tsx
index 6854ad5..1f5f7cd 100644
--- a/client/src/modules/crm/CrmDetailPage.tsx
+++ b/client/src/modules/crm/CrmDetailPage.tsx
@@ -216,31 +216,30 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
           ) : null}
         </article>
       </div>
-      <section className="grid gap-3 xl:grid-cols-4">
-        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
+      <section className="grid gap-2 xl:grid-cols-4">
+        <article className="surface-panel-tight">
           <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Last Contact</p>
           <div className="mt-2 text-base font-bold text-text">
             {record.rollups?.lastContactAt ? new Date(record.rollups.lastContactAt).toLocaleDateString() : "None"}
           </div>
         </article>
-        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
+        <article className="surface-panel-tight">
           <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Timeline Entries</p>
           <div className="mt-2 text-base font-bold text-text">{record.rollups?.contactHistoryCount ?? record.contactHistory.length}</div>
         </article>
-        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
+        <article className="surface-panel-tight">
           <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Account Contacts</p>
           <div className="mt-2 text-base font-bold text-text">{record.rollups?.contactCount ?? record.contacts?.length ?? 0}</div>
         </article>
-        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
+        <article className="surface-panel-tight">
           <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Attachments</p>
           <div className="mt-2 text-base font-bold text-text">{record.rollups?.attachmentCount ?? 0}</div>
         </article>
       </section>
       {entity === "customer" && (record.childCustomers?.length ?? 0) > 0 ? (
-        <section className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
-          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Hierarchy</p>
-          <h4 className="mt-2 text-lg font-bold text-text">End customers under this reseller</h4>
-          <div className="mt-5 grid gap-3 xl:grid-cols-2 2xl:grid-cols-3">
+        <section className="surface-panel">
+          <p className="section-kicker">HIERARCHY</p>
+          <div className="mt-3 grid gap-2 xl:grid-cols-2 2xl:grid-cols-3">
             {record.childCustomers?.map((child) => (
               <Link
                 key={child.id}
@@ -257,11 +256,10 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
         </section>
       ) : null}
       {entity === "vendor" ? (
-        <section className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+        <section className="surface-panel">
           <div className="flex items-center justify-between gap-3">
             <div>
-              <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Purchasing Activity</p>
-              <h4 className="mt-2 text-lg font-bold text-text">Recent purchase orders</h4>
+              <p className="section-kicker">PURCHASING ACTIVITY</p>
             </div>
             <div className="flex flex-wrap gap-2">
               {canManage ? (
@@ -275,15 +273,15 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
             </div>
           </div>
           {relatedPurchaseOrders.length === 0 ? (
-            <div className="mt-6 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">No purchase orders exist for this vendor yet.</div>
+            <div className="mt-3 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-3 py-5 text-center text-sm text-muted">No purchase orders yet.</div>
           ) : (
-            <div className="mt-6 space-y-3">
+            <div className="mt-3 space-y-2">
               {relatedPurchaseOrders.slice(0, 8).map((order) => (
                 <Link key={order.id} to={`/purchasing/orders/${order.id}`} className="block rounded-[18px] border border-line/70 bg-page/60 p-3 transition hover:bg-page/80">
                   <div className="flex flex-wrap items-center justify-between gap-3">
                     <div>
                       <div className="font-semibold text-text">{order.documentNumber}</div>
-                      <div className="mt-1 text-xs text-muted">{new Date(order.issueDate).toLocaleDateString()} · {order.lineCount} lines</div>
+                      <div className="mt-1 text-xs text-muted">{new Date(order.issueDate).toLocaleDateString()} - {order.lineCount} lines</div>
                     </div>
                     <div className="text-sm font-semibold text-text">${order.total.toFixed(2)}</div>
                   </div>
@@ -317,13 +315,9 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
       />
       <section className="grid gap-3 2xl:grid-cols-[minmax(360px,0.88fr)_minmax(0,1.12fr)]">
         {canManage ? (
-          <article className="min-w-0 rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
-            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Contact History</p>
-            <h4 className="mt-2 text-lg font-bold text-text">Add timeline entry</h4>
-            <p className="mt-2 text-sm text-muted">
-              Record calls, emails, meetings, and follow-up notes directly against this account.
-            </p>
-            <div className="mt-6">
+          <article className="surface-panel min-w-0">
+            <p className="section-kicker">CONTACT HISTORY</p>
+            <div className="mt-3">
               <CrmContactEntryForm
                 form={contactEntryForm}
                 isSaving={isSavingContactEntry}
@@ -334,15 +328,14 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
             </div>
           </article>
         ) : null}
-        <article className="min-w-0 rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
-          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Timeline</p>
-          <h4 className="mt-2 text-lg font-bold text-text">Recent interactions</h4>
+        <article className="surface-panel min-w-0">
+          <p className="section-kicker">TIMELINE</p>
           {record.contactHistory.length === 0 ? (
-            <div className="mt-6 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">
-              No contact history has been recorded for this account yet.
+            <div className="mt-3 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-3 py-5 text-center text-sm text-muted">
+              No contact history recorded yet.
             </div>
           ) : (
-            <div className="mt-6 space-y-3">
+            <div className="mt-3 space-y-2">
               {record.contactHistory.map((entry) => (
                 <article key={entry.id} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
                   <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
diff --git a/client/src/modules/inventory/InventoryDetailPage.tsx b/client/src/modules/inventory/InventoryDetailPage.tsx
index dba4d52..6d3170c 100644
--- a/client/src/modules/inventory/InventoryDetailPage.tsx
+++ b/client/src/modules/inventory/InventoryDetailPage.tsx
@@ -334,32 +334,32 @@ export function InventoryDetailPage() {
         </div>
       </div>
 
-      <section className="grid gap-3 xl:grid-cols-7">
-        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
+      <section className="grid gap-2 xl:grid-cols-7">
+        <article className="surface-panel-tight">
           <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">On Hand</p>
           <div className="mt-2 text-base font-bold text-text">{item.onHandQuantity}</div>
         </article>
-        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
+        <article className="surface-panel-tight">
           <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Reserved</p>
           <div className="mt-2 text-base font-bold text-text">{item.reservedQuantity}</div>
         </article>
-        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
+        <article className="surface-panel-tight">
           <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Available</p>
           <div className="mt-2 text-base font-bold text-text">{item.availableQuantity}</div>
         </article>
-        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
+        <article className="surface-panel-tight">
           <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Stock Locations</p>
           <div className="mt-2 text-base font-bold text-text">{item.stockBalances.length}</div>
         </article>
-        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
+        <article className="surface-panel-tight">
           <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Transactions</p>
           <div className="mt-2 text-base font-bold text-text">{item.recentTransactions.length}</div>
         </article>
-        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
+        <article className="surface-panel-tight">
           <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Transfers</p>
           <div className="mt-2 text-base font-bold text-text">{item.transfers.length}</div>
         </article>
-        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
+        <article className="surface-panel-tight">
           <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Reservations</p>
           <div className="mt-2 text-base font-bold text-text">{item.reservations.length}</div>
         </article>
@@ -418,7 +418,7 @@ export function InventoryDetailPage() {
         <article className="surface-panel">
           <p className="section-kicker">STOCK BY LOCATION</p>
           {item.stockBalances.length === 0 ? (
-            <p className="mt-3 text-sm text-muted">No stock or reservation balances have been posted for this item yet.</p>
+            <p className="mt-3 text-sm text-muted">No stock or reservation balances posted yet.</p>
           ) : (
             <div className="mt-3 space-y-2">
               {item.stockBalances.map((balance) => (
@@ -444,9 +444,9 @@ export function InventoryDetailPage() {
 
       <section className="grid gap-3 xl:grid-cols-2">
         {canManage ? (
-          <form className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5" onSubmit={handleTransactionSubmit}>
-            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Stock Transactions</p>
-            <div className="mt-5 grid gap-3">
+          <form className="surface-panel" onSubmit={handleTransactionSubmit}>
+            <p className="section-kicker">STOCK TRANSACTIONS</p>
+            <div className="mt-3 grid gap-3">
               <div className="grid gap-3 xl:grid-cols-2">
                 <label className="block">
                   <span className="mb-2 block text-sm font-semibold text-text">Transaction type</span>
@@ -496,14 +496,14 @@ export function InventoryDetailPage() {
             </div>
           </form>
         ) : null}
-        <article className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
-          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Recent Movements</p>
+        <article className="surface-panel">
+          <p className="section-kicker">RECENT MOVEMENTS</p>
           {item.recentTransactions.length === 0 ? (
-            <div className="mt-6 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">
-              No stock transactions have been recorded for this item yet.
+            <div className="mt-3 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-3 py-5 text-center text-sm text-muted">
+              No stock transactions recorded yet.
             </div>
           ) : (
-            <div className="mt-6 space-y-3">
+            <div className="mt-3 space-y-2">
               {item.recentTransactions.map((transaction) => (
                 <article key={transaction.id} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
                   <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
@@ -535,9 +535,9 @@ export function InventoryDetailPage() {
 
       {canManage ? (
         <section className="grid gap-3 xl:grid-cols-2">
-          <form className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5" onSubmit={handleTransferSubmit}>
-            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Inventory Transfer</p>
-            <div className="mt-5 grid gap-3">
+          <form className="surface-panel" onSubmit={handleTransferSubmit}>
+            <p className="section-kicker">INVENTORY TRANSFER</p>
+            <div className="mt-3 grid gap-3">
               <label className="block">
                 <span className="mb-2 block text-sm font-semibold text-text">Quantity</span>
                 <input type="number" min={1} step={1} value={transferForm.quantity} onChange={(event) => updateTransferField("quantity", Number.parseInt(event.target.value, 10) || 1)} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
@@ -588,9 +588,9 @@ export function InventoryDetailPage() {
               </div>
             </div>
           </form>
-          <form className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5" onSubmit={handleReservationSubmit}>
-            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Manual Reservation</p>
-            <div className="mt-5 grid gap-3">
+          <form className="surface-panel" onSubmit={handleReservationSubmit}>
+            <p className="section-kicker">MANUAL RESERVATION</p>
+            <div className="mt-3 grid gap-3">
               <label className="block">
                 <span className="mb-2 block text-sm font-semibold text-text">Quantity</span>
                 <input type="number" min={1} step={1} value={reservationForm.quantity} onChange={(event) => setReservationForm((current) => ({ ...current, quantity: Number.parseInt(event.target.value, 10) || 1 }))} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
@@ -629,14 +629,14 @@ export function InventoryDetailPage() {
       ) : null}
 
       <section className="grid gap-3 xl:grid-cols-2">
-        <article className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
-          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Reservations</p>
+        <article className="surface-panel">
+          <p className="section-kicker">RESERVATIONS</p>
           {item.reservations.length === 0 ? (
-            <div className="mt-6 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">
-              No reservations have been recorded for this item.
+            <div className="mt-3 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-3 py-5 text-center text-sm text-muted">
+              No reservations recorded.
             </div>
           ) : (
-            <div className="mt-5 space-y-3">
+            <div className="mt-3 space-y-2">
               {item.reservations.map((reservation) => (
                 <article key={reservation.id} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
                   <div className="flex items-center justify-between gap-3">
@@ -655,14 +655,14 @@ export function InventoryDetailPage() {
             </div>
           )}
         </article>
-        <article className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
-          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Transfers</p>
+        <article className="surface-panel">
+          <p className="section-kicker">TRANSFERS</p>
           {item.transfers.length === 0 ? (
-            <div className="mt-6 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">
-              No transfers have been recorded for this item.
+            <div className="mt-3 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-3 py-5 text-center text-sm text-muted">
+              No transfers recorded.
             </div>
           ) : (
-            <div className="mt-5 space-y-3">
+            <div className="mt-3 space-y-2">
               {item.transfers.map((transfer) => (
                 <article key={transfer.id} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
                   <div className="flex items-center justify-between gap-3">
diff --git a/client/src/modules/inventory/InventoryFormPage.tsx b/client/src/modules/inventory/InventoryFormPage.tsx
index e3ce99c..2ceb4fd 100644
--- a/client/src/modules/inventory/InventoryFormPage.tsx
+++ b/client/src/modules/inventory/InventoryFormPage.tsx
@@ -11,7 +11,7 @@ import type {
 } from "@mrp/shared/dist/inventory/types.js";
 import type { ManufacturingStationDto } from "@mrp/shared";
 import { useEffect, useState } from "react";
-import { Link, useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 import { ConfirmActionDialog } from "../../components/ConfirmActionDialog";
 import { useAuth } from "../../auth/AuthProvider";
@@ -444,41 +444,48 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
     }
   }
 
+  function openSkuMaster() {
+    navigate("/inventory/sku-master");
+  }
+
+  function closeEditor() {
+    navigate(mode === "create" ? "/inventory/items" : `/inventory/items/${itemId}`);
+  }
+
   return (
-    <form className="space-y-6" onSubmit={handleSubmit}>
-      <section className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+    <form className="page-stack" onSubmit={handleSubmit}>
+      <section className="surface-panel">
         <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
           <div>
-            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Inventory Editor</p>
-            <h3 className="mt-2 text-xl font-bold text-text">{mode === "create" ? "New Item" : "Edit Item"}</h3>
-            <p className="mt-2 max-w-2xl text-sm text-muted">
-              Define item master data and the first revision of the bill of materials for assemblies and manufactured items.
-            </p>
+            <p className="section-kicker">INVENTORY EDITOR</p>
+            <h3 className="module-title">{mode === "create" ? "NEW ITEM" : "EDIT ITEM"}</h3>
           </div>
           <div className="flex flex-wrap gap-2">
-            <Link
-              to="/inventory/sku-master"
+            <button
+              type="button"
+              onClick={openSkuMaster}
               className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text"
             >
               SKU master
-            </Link>
-            <Link
-              to={mode === "create" ? "/inventory/items" : `/inventory/items/${itemId}`}
+            </button>
+            <button
+              type="button"
+              onClick={closeEditor}
               className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text"
             >
               Cancel
-            </Link>
+            </button>
           </div>
         </div>
       </section>
-      <section className="space-y-4 rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+      <section className="surface-panel space-y-3">
         <div className="grid gap-3 xl:grid-cols-2 2xl:grid-cols-4">
           <div className="block 2xl:col-span-2">
             <div className="mb-2 flex items-center justify-between gap-2">
-              <span className="block text-sm font-semibold text-text">SKU builder</span>
-              <Link to="/inventory/sku-master" className="text-xs font-semibold text-brand">
+              <span className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">SKU BUILDER</span>
+              <button type="button" onClick={openSkuMaster} className="text-xs font-semibold text-brand">
                 Manage SKU tree
-              </Link>
+              </button>
             </div>
             <div className="space-y-3 rounded-[18px] border border-line/70 bg-page/70 p-3">
               <label className="block">
@@ -593,7 +600,7 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
             </div>
           </div>
           <div className="rounded-[18px] border border-line/70 bg-page/60 p-3">
-            <div className="text-sm font-semibold text-text">Thumbnail attachment</div>
+            <div className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Thumbnail attachment</div>
             <div className="mt-2 text-sm text-muted">
               {pendingThumbnailFile
                 ? `${pendingThumbnailFile.name} will upload when you save this item.`
@@ -603,9 +610,6 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
                     ? `${thumbnailAttachment.originalName} is attached as the current item thumbnail.`
                     : "Attach a product image, render, or reference photo for this item."}
             </div>
-            <div className="mt-3 text-xs text-muted">
-              Supported by the existing file-attachment system. The thumbnail is stored separately from general item documents so the item editor can treat it as the primary visual.
-            </div>
           </div>
         </div>
         <div className="grid gap-3 xl:grid-cols-4">
@@ -654,7 +658,7 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
           <div className="grid gap-3 sm:grid-cols-2">
             <label className="flex items-center gap-3 rounded-2xl border border-line/70 bg-page px-2 py-2">
               <input type="checkbox" checked={form.isSellable} onChange={(event) => updateField("isSellable", event.target.checked)} />
-              <span className="text-sm font-semibold text-text">Sellable</span>
+              <span className="text-sm font-semibold uppercase tracking-[0.08em] text-text">Sellable</span>
             </label>
             <label className="flex items-center gap-3 rounded-2xl border border-line/70 bg-page px-2 py-2">
               <input
@@ -662,7 +666,7 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
                 checked={form.isPurchasable}
                 onChange={(event) => updateField("isPurchasable", event.target.checked)}
               />
-              <span className="text-sm font-semibold text-text">Purchasable</span>
+              <span className="text-sm font-semibold uppercase tracking-[0.08em] text-text">Purchasable</span>
             </label>
           </div>
         </div>
@@ -733,7 +737,7 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
             ) : null}
           </div>
           <div className="mt-2 text-xs text-muted">
-            {form.preferredVendorId ? getSelectedVendorName(form.preferredVendorId) : "Demand planning uses this vendor when creating buy recommendations."}
+            {form.preferredVendorId ? getSelectedVendorName(form.preferredVendorId) : "Used as the default buy source."}
           </div>
         </label>
         <label className="block">
@@ -756,23 +760,22 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
         </label>
       </section>
       {form.type === "ASSEMBLY" || form.type === "MANUFACTURED" ? (
-        <section className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+        <section className="surface-panel">
           <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
             <div>
-              <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Manufacturing Routing</p>
-              <h4 className="mt-2 text-lg font-bold text-text">Station and time template</h4>
-                <p className="mt-2 text-sm text-muted">These operations are copied automatically into work orders and feed the planning workbench without manual planner task entry.</p>
+              <p className="section-kicker">MANUFACTURING ROUTING</p>
+              <h4 className="text-lg font-bold text-text">STATION AND TIME TEMPLATE</h4>
             </div>
             <button type="button" onClick={addOperation} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
               Add operation
             </button>
           </div>
           {form.operations.length === 0 ? (
-            <div className="mt-5 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">
+            <div className="mt-3 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-3 py-5 text-center text-sm text-muted">
               Add at least one station operation for this buildable item.
             </div>
           ) : (
-            <div className="mt-5 space-y-4">
+            <div className="mt-3 space-y-3">
               {form.operations.map((operation, index) => (
                 <div key={`${operation.stationId}-${operation.position}-${index}`} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
                   <div className="grid gap-3 xl:grid-cols-[1.2fr_0.55fr_0.7fr_0.55fr_0.55fr_auto]">
@@ -823,12 +826,11 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
           )}
         </section>
       ) : null}
-      <section className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+      <section className="surface-panel">
         <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
           <div>
-            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Bill Of Materials</p>
-            <h4 className="mt-2 text-lg font-bold text-text">Component lines</h4>
-            <p className="mt-2 text-sm text-muted">Add BOM components for manufactured or assembly items. Purchased and service items can be saved without BOM lines.</p>
+            <p className="section-kicker">BILL OF MATERIALS</p>
+            <h4 className="text-lg font-bold text-text">COMPONENT LINES</h4>
           </div>
           <button
             type="button"
@@ -839,11 +841,11 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
           </button>
         </div>
         {form.bomLines.length === 0 ? (
-          <div className="mt-5 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">
+          <div className="mt-3 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-3 py-5 text-center text-sm text-muted">
             No BOM lines added yet.
           </div>
         ) : (
-          <div className="mt-5 space-y-4">
+          <div className="mt-3 space-y-3">
             {form.bomLines.map((line, index) => (
               <div key={`${line.componentItemId}-${line.position}-${index}`} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
                 <div className="grid gap-3 xl:grid-cols-[1.4fr_0.7fr_0.7fr_0.7fr_auto]">
@@ -974,7 +976,7 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
             ))}
           </div>
         )}
-        <div className="mt-6 flex flex-col gap-3 rounded-2xl border border-line/70 bg-page/70 px-2 py-2 sm:flex-row sm:items-center sm:justify-between">
+        <div className="mt-4 flex flex-col gap-2 rounded-2xl border border-line/70 bg-page/70 px-2 py-2 sm:flex-row sm:items-center sm:justify-between">
           <span className="min-w-0 text-sm text-muted">{status}</span>
           <button
             type="submit"
diff --git a/client/src/modules/manufacturing/WorkOrderFormPage.tsx b/client/src/modules/manufacturing/WorkOrderFormPage.tsx
index 77c2c60..13ed4be 100644
--- a/client/src/modules/manufacturing/WorkOrderFormPage.tsx
+++ b/client/src/modules/manufacturing/WorkOrderFormPage.tsx
@@ -5,7 +5,7 @@ import type {
 } from "@mrp/shared";
 import type { WarehouseLocationOptionDto } from "@mrp/shared/dist/inventory/types.js";
 import { useEffect, useMemo, useState } from "react";
-import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 
 import { useAuth } from "../../auth/AuthProvider";
 import { api, ApiError } from "../../lib/api";
@@ -137,21 +137,24 @@ export function WorkOrderFormPage({ mode }: { mode: "create" | "edit" }) {
     }
   }
 
+  function closeEditor() {
+    navigate(mode === "create" ? "/manufacturing/work-orders" : `/manufacturing/work-orders/${workOrderId}`);
+  }
+
   return (
-    <form className="space-y-6" onSubmit={handleSubmit}>
-      <section className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+    <form className="page-stack" onSubmit={handleSubmit}>
+      <section className="surface-panel">
         <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
           <div>
-            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Manufacturing Editor</p>
-            <h3 className="mt-2 text-xl font-bold text-text">{mode === "create" ? "New Work Order" : "Edit Work Order"}</h3>
-            <p className="mt-2 max-w-2xl text-sm text-muted">Create a build record for a manufactured item, assign it to a project when needed, and define where completed output should post.</p>
+            <p className="section-kicker">MANUFACTURING EDITOR</p>
+            <h3 className="module-title">{mode === "create" ? "NEW WORK ORDER" : "EDIT WORK ORDER"}</h3>
           </div>
-          <Link to={mode === "create" ? "/manufacturing/work-orders" : `/manufacturing/work-orders/${workOrderId}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
+          <button type="button" onClick={closeEditor} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
             Cancel
-          </Link>
+          </button>
         </div>
       </section>
-      <section className="space-y-4 rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+      <section className="surface-panel space-y-3">
         <div className="grid gap-3 xl:grid-cols-2">
           <label className="block">
             <span className="mb-2 block text-sm font-semibold text-text">Build Item</span>
@@ -195,7 +198,7 @@ export function WorkOrderFormPage({ mode }: { mode: "create" | "edit" }) {
                         setItemPickerOpen(false);
                       }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition last:border-b-0 hover:bg-page/70">
                         <div className="font-semibold text-text">{option.sku}</div>
-                        <div className="mt-1 text-xs text-muted">{option.name} · {option.type} · {option.operationCount} ops</div>
+                        <div className="mt-1 text-xs text-muted">{option.name} - {option.type} - {option.operationCount} ops</div>
                       </button>
                     ))}
                 </div>
@@ -252,7 +255,7 @@ export function WorkOrderFormPage({ mode }: { mode: "create" | "edit" }) {
                         setProjectPickerOpen(false);
                       }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition last:border-b-0 hover:bg-page/70">
                         <div className="font-semibold text-text">{option.projectNumber}</div>
-                        <div className="mt-1 text-xs text-muted">{option.name} · {option.customerName}</div>
+                        <div className="mt-1 text-xs text-muted">{option.name} - {option.customerName}</div>
                       </button>
                     ))}
                 </div>
@@ -294,7 +297,7 @@ export function WorkOrderFormPage({ mode }: { mode: "create" | "edit" }) {
           <span className="mb-2 block text-sm font-semibold text-text">Work instructions / notes</span>
           <textarea value={form.notes} onChange={(event) => updateField("notes", event.target.value)} rows={5} className="w-full rounded-[18px] border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
         </label>
-        <div className="flex flex-col gap-3 rounded-2xl border border-line/70 bg-page/70 px-2 py-2 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex flex-col gap-2 rounded-2xl border border-line/70 bg-page/70 px-2 py-2 sm:flex-row sm:items-center sm:justify-between">
           <span className="min-w-0 text-sm text-muted">{status}</span>
           <button type="submit" disabled={isSaving} className="rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60">
             {isSaving ? "Saving..." : mode === "create" ? "Create work order" : "Save changes"}
diff --git a/client/src/modules/purchasing/PurchaseFormPage.tsx b/client/src/modules/purchasing/PurchaseFormPage.tsx
index 483f386..bd8ff51 100644
--- a/client/src/modules/purchasing/PurchaseFormPage.tsx
+++ b/client/src/modules/purchasing/PurchaseFormPage.tsx
@@ -1,6 +1,6 @@
 import type { InventoryItemOptionDto, PurchaseLineInput, PurchaseOrderInput, PurchaseVendorOptionDto, SalesOrderPlanningDto, SalesOrderPlanningNodeDto } from "@mrp/shared";
 import { useEffect, useState } from "react";
-import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 
 import { ConfirmActionDialog } from "../../components/ConfirmActionDialog";
 import { useAuth } from "../../auth/AuthProvider";
@@ -263,6 +263,10 @@ export function PurchaseFormPage({ mode }: { mode: "create" | "edit" }) {
     return vendor.name.toLowerCase().includes(query) || vendor.email.toLowerCase().includes(query);
   }).length;
 
+  function closeEditor() {
+    navigate(mode === "create" ? "/purchasing/orders" : `/purchasing/orders/${orderId}`);
+  }
+
   return (
     <form className="page-stack" onSubmit={handleSubmit}>
       <section className="surface-panel">
@@ -271,9 +275,9 @@ export function PurchaseFormPage({ mode }: { mode: "create" | "edit" }) {
             <p className="section-kicker">PURCHASING EDITOR</p>
             <h3 className="module-title">{mode === "create" ? "New Purchase Order" : "Edit Purchase Order"}</h3>
           </div>
-          <Link to={mode === "create" ? "/purchasing/orders" : `/purchasing/orders/${orderId}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
+          <button type="button" onClick={closeEditor} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
             Cancel
-          </Link>
+          </button>
         </div>
       </section>
       <section className="space-y-3 surface-panel">
@@ -352,18 +356,13 @@ export function PurchaseFormPage({ mode }: { mode: "create" | "edit" }) {
             <input type="date" value={form.issueDate.slice(0, 10)} onChange={(event) => updateField("issueDate", new Date(event.target.value).toISOString())} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
           </label>
         </div>
-        <div className="rounded-[18px] border border-line/70 bg-page/60 px-3 py-3 text-sm">
+        <div className="rounded-[18px] border border-line/70 bg-page/60 px-2 py-2 text-sm">
           <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Linked Project</div>
           <div className="mt-2 font-semibold text-text">
             {mode === "edit"
               ? (form.projectId ? "Project context saved on this purchase order." : "No project linked.")
               : (seededProjectId ? `${seededProjectNumber || "Project"}${seededProjectName ? ` - ${seededProjectName}` : ""}` : "Will auto-link from sales-order demand when possible.")}
           </div>
-          <div className="mt-1 text-xs text-muted">
-            {mode === "edit"
-              ? "This header link is used for downstream project cockpit and finance rollups."
-              : "Generated purchasing from a project-linked sales order will carry project context automatically."}
-          </div>
         </div>
         <label className="block">
           <span className="mb-2 block text-sm font-semibold text-text">Notes</span>
@@ -391,18 +390,18 @@ export function PurchaseFormPage({ mode }: { mode: "create" | "edit" }) {
           </label>
         </div>
       </section>
-      <section className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+      <section className="surface-panel">
         <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
           <div>
-            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Line Items</p>
-            <h4 className="mt-2 text-lg font-bold text-text">Procurement lines</h4>
+            <p className="section-kicker">LINE ITEMS</p>
+            <h4 className="text-lg font-bold text-text">PROCUREMENT LINES</h4>
           </div>
           <button type="button" onClick={addLine} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">Add line</button>
         </div>
         {form.lines.length === 0 ? (
-          <div className="mt-5 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">No line items added yet.</div>
+          <div className="mt-3 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-3 py-5 text-center text-sm text-muted">No line items added yet.</div>
         ) : (
-          <div className="mt-5 space-y-4">
+          <div className="mt-3 space-y-3">
             {form.lines.map((line: PurchaseLineInput, index: number) => (
               <div key={index} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
                 <div className="grid gap-3 xl:grid-cols-[1.15fr_1.25fr_0.5fr_0.55fr_0.7fr_0.75fr_auto]">
@@ -478,13 +477,13 @@ export function PurchaseFormPage({ mode }: { mode: "create" | "edit" }) {
             ))}
           </div>
         )}
-        <div className="mt-5 grid gap-3 md:grid-cols-3 xl:grid-cols-4">
+        <div className="mt-4 grid gap-2 md:grid-cols-3 xl:grid-cols-4">
           <div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm"><div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Subtotal</div><div className="mt-1 font-semibold text-text">${subtotal.toFixed(2)}</div></div>
           <div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm"><div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Tax</div><div className="mt-1 font-semibold text-text">${taxAmount.toFixed(2)}</div></div>
           <div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm"><div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Freight</div><div className="mt-1 font-semibold text-text">${form.freightAmount.toFixed(2)}</div></div>
           <div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm"><div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Total</div><div className="mt-1 font-semibold text-text">${total.toFixed(2)}</div></div>
         </div>
-        <div className="mt-6 flex flex-col gap-3 rounded-2xl border border-line/70 bg-page/70 px-2 py-2 sm:flex-row sm:items-center sm:justify-between">
+        <div className="mt-4 flex flex-col gap-2 rounded-2xl border border-line/70 bg-page/70 px-2 py-2 sm:flex-row sm:items-center sm:justify-between">
           <span className="min-w-0 text-sm text-muted">{status}</span>
           <button type="submit" disabled={isSaving} className="rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60">
             {isSaving ? "Saving..." : mode === "create" ? "Create purchase order" : "Save changes"}
diff --git a/client/src/modules/sales/SalesFormPage.tsx b/client/src/modules/sales/SalesFormPage.tsx
index 0bdc91e..46e4133 100644
--- a/client/src/modules/sales/SalesFormPage.tsx
+++ b/client/src/modules/sales/SalesFormPage.tsx
@@ -1,7 +1,7 @@
 import type { InventoryItemOptionDto } from "@mrp/shared/dist/inventory/types.js";
 import type { SalesCustomerOptionDto, SalesDocumentDetailDto, SalesDocumentInput, SalesLineInput } from "@mrp/shared/dist/sales/types.js";
 import { useEffect, useState } from "react";
-import { Link, useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 import { ConfirmActionDialog } from "../../components/ConfirmActionDialog";
 import { useAuth } from "../../auth/AuthProvider";
@@ -167,6 +167,10 @@ export function SalesFormPage({ entity, mode }: { entity: SalesDocumentEntity; m
     }
   }
 
+  function closeEditor() {
+    navigate(mode === "create" ? config.routeBase : `${config.routeBase}/${documentId}`);
+  }
+
   return (
     <form className="page-stack" onSubmit={handleSubmit}>
       <section className="surface-panel">
@@ -175,9 +179,9 @@ export function SalesFormPage({ entity, mode }: { entity: SalesDocumentEntity; m
             <p className="section-kicker">{`${config.detailEyebrow} EDITOR`.toUpperCase()}</p>
             <h3 className="module-title">{mode === "create" ? `New ${config.singularLabel}` : `Edit ${config.singularLabel}`}</h3>
           </div>
-          <Link to={mode === "create" ? config.routeBase : `${config.routeBase}/${documentId}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
+          <button type="button" onClick={closeEditor} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
             Cancel
-          </Link>
+          </button>
         </div>
       </section>
       <section className="space-y-3 surface-panel">
@@ -351,22 +355,22 @@ export function SalesFormPage({ entity, mode }: { entity: SalesDocumentEntity; m
           </label>
         </div>
       </section>
-      <section className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+      <section className="surface-panel">
         <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
           <div>
-            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Line Items</p>
-            <h4 className="mt-2 text-lg font-bold text-text">Commercial lines</h4>
+            <p className="section-kicker">LINE ITEMS</p>
+            <h4 className="text-lg font-bold text-text">COMMERCIAL LINES</h4>
           </div>
           <button type="button" onClick={addLine} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
             Add line
           </button>
         </div>
         {form.lines.length === 0 ? (
-          <div className="mt-5 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">
+          <div className="mt-3 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-3 py-5 text-center text-sm text-muted">
             No line items added yet.
           </div>
         ) : (
-          <div className="mt-5 space-y-4">
+          <div className="mt-3 space-y-3">
             {form.lines.map((line: SalesLineInput, index: number) => (
               <div key={index} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
                 <div className="grid gap-3 xl:grid-cols-[1.15fr_1.25fr_0.5fr_0.55fr_0.7fr_0.75fr_auto]">
@@ -451,7 +455,7 @@ export function SalesFormPage({ entity, mode }: { entity: SalesDocumentEntity; m
             ))}
           </div>
         )}
-        <div className="mt-5 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+        <div className="mt-4 grid gap-2 md:grid-cols-2 xl:grid-cols-4">
           <div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm">
             <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Subtotal</div>
             <div className="mt-1 font-semibold text-text">${subtotal.toFixed(2)}</div>
@@ -469,7 +473,7 @@ export function SalesFormPage({ entity, mode }: { entity: SalesDocumentEntity; m
             <div className="mt-1 font-semibold text-text">${total.toFixed(2)}</div>
           </div>
         </div>
-        <div className="mt-6 flex flex-col gap-3 rounded-2xl border border-line/70 bg-page/70 px-2 py-2 sm:flex-row sm:items-center sm:justify-between">
+        <div className="mt-4 flex flex-col gap-2 rounded-2xl border border-line/70 bg-page/70 px-2 py-2 sm:flex-row sm:items-center sm:justify-between">
           <span className="min-w-0 text-sm text-muted">{status}</span>
           <button type="submit" disabled={isSaving} className="rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60">
             {isSaving ? "Saving..." : mode === "create" ? `Create ${config.singularLabel.toLowerCase()}` : "Save changes"}
diff --git a/client/src/modules/shipping/ShipmentFormPage.tsx b/client/src/modules/shipping/ShipmentFormPage.tsx
index 5232afd..78d67cf 100644
--- a/client/src/modules/shipping/ShipmentFormPage.tsx
+++ b/client/src/modules/shipping/ShipmentFormPage.tsx
@@ -1,6 +1,6 @@
 import type { ShipmentInput, ShipmentOrderOptionDto } from "@mrp/shared/dist/shipping/types.js";
 import { useEffect, useState } from "react";
-import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 
 import { useAuth } from "../../auth/AuthProvider";
 import { api, ApiError } from "../../lib/api";
@@ -85,6 +85,10 @@ export function ShipmentFormPage({ mode }: { mode: "create" | "edit" }) {
     }
   }
 
+  function closeEditor() {
+    navigate(mode === "create" ? "/shipping/shipments" : `/shipping/shipments/${shipmentId}`);
+  }
+
   return (
     <form className="page-stack" onSubmit={handleSubmit}>
       <section className="surface-panel">
@@ -93,9 +97,9 @@ export function ShipmentFormPage({ mode }: { mode: "create" | "edit" }) {
             <p className="section-kicker">SHIPPING EDITOR</p>
             <h3 className="module-title">{mode === "create" ? "New Shipment" : "Edit Shipment"}</h3>
           </div>
-          <Link to={mode === "create" ? "/shipping/shipments" : `/shipping/shipments/${shipmentId}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
+          <button type="button" onClick={closeEditor} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
             Cancel
-          </Link>
+          </button>
         </div>
       </section>
       <section className="space-y-3 surface-panel">