cleanup

client/src/modules/sales/SalesDetailPage.tsx

@@ -334,7 +334,7 @@ export function SalesDetailPage({ entity }: { entity: SalesDocumentEntity }) {
   }
 
   return (
-    <section className="space-y-4">
+    <section className="page-stack">
       <div className="surface-panel">
         <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
           <div>
@@ -417,41 +417,41 @@ export function SalesDetailPage({ entity }: { entity: SalesDocumentEntity }) {
           </div>
         </section>
       ) : null}
-      <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">Issue Date</p>
           <div className="mt-2 text-base font-bold text-text">{new Date(activeDocument.issueDate).toLocaleDateString()}</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">Expires</p>
           <div className="mt-2 text-base font-bold text-text">{activeDocument.expiresAt ? new Date(activeDocument.expiresAt).toLocaleDateString() : "N/A"}</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">Lines</p>
           <div className="mt-2 text-base font-bold text-text">{activeDocument.lineCount}</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">Approval</p>
           <div className="mt-2 text-base font-bold text-text">{activeDocument.approvedAt ? new Date(activeDocument.approvedAt).toLocaleDateString() : "Pending"}</div>
           <div className="mt-1 text-xs text-muted">{activeDocument.approvedByName ?? "No approver recorded"}</div>
         </article>
       </section>
-      <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">Discount</p>
           <div className="mt-2 text-base font-bold text-text">-${activeDocument.discountAmount.toFixed(2)}</div>
           <div className="mt-1 text-xs text-muted">{activeDocument.discountPercent.toFixed(2)}%</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">Tax</p>
           <div className="mt-2 text-base font-bold text-text">${activeDocument.taxAmount.toFixed(2)}</div>
           <div className="mt-1 text-xs text-muted">{activeDocument.taxPercent.toFixed(2)}%</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">Freight</p>
           <div className="mt-2 text-base font-bold text-text">${activeDocument.freightAmount.toFixed(2)}</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">Total</p>
           <div className="mt-2 text-base font-bold text-text">${activeDocument.total.toFixed(2)}</div>
         </article>
@@ -463,11 +463,11 @@ export function SalesDetailPage({ entity }: { entity: SalesDocumentEntity }) {
           </div>
         </div>
         {activeDocument.revisions.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 revisions have been recorded 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 revisions recorded yet.
           </div>
         ) : (
-          <div className="mt-6 space-y-3">
+          <div className="mt-3 space-y-2">
             {activeDocument.revisions.map((revision) => (
               <article key={revision.id} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
                 <div className="flex flex-wrap items-start justify-between gap-3">
@@ -517,8 +517,8 @@ export function SalesDetailPage({ entity }: { entity: SalesDocumentEntity }) {
         />
       ) : null}
       <div className="grid gap-3 xl:grid-cols-[minmax(0,1.05fr)_minmax(320px,0.95fr)]">
-        <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">Customer</p>
+        <article className="surface-panel">
+          <p className="section-kicker">CUSTOMER</p>
           <dl className="mt-5 grid gap-3">
             <div>
               <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Account</dt>
@@ -530,30 +530,30 @@ export function SalesDetailPage({ entity }: { entity: SalesDocumentEntity }) {
             </div>
           </dl>
         </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">Project Link</p>
+        <article className="surface-panel">
+          <p className="section-kicker">PROJECT LINK</p>
           {activeDocument.linkedProjectId ? (
             <div className="mt-3 space-y-2">
               <Link to={`/projects/${activeDocument.linkedProjectId}`} className="inline-flex items-center rounded-2xl border border-line/70 px-3 py-2 text-sm font-semibold text-text hover:bg-page/70">
                 {activeDocument.linkedProjectNumber} / {activeDocument.linkedProjectName}
               </Link>
-              <p className="text-sm text-muted">This {entity === "quote" ? "quote" : "sales order"} is already linked to a project, and downstream WO/PO launches will carry that project context.</p>
+              <p className="text-sm text-muted">Downstream WO and PO launches carry this project context.</p>
             </div>
           ) : (
-            <p className="mt-3 text-sm text-muted">No linked project is currently attached to this {entity === "quote" ? "quote" : "sales order"}.</p>
+            <p className="mt-3 text-sm text-muted">No linked project.</p>
           )}
-          <p className="mt-5 text-xs font-semibold uppercase tracking-[0.24em] text-muted">Notes</p>
+          <p className="mt-4 text-xs font-semibold uppercase tracking-[0.24em] text-muted">Notes</p>
           <p className="mt-3 whitespace-pre-line text-sm leading-6 text-text">{activeDocument.notes || "No notes recorded for this document."}</p>
         </article>
       </div>
-      <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">Line Items</p>
+      <section className="surface-panel">
+        <p className="section-kicker">LINE ITEMS</p>
         {activeDocument.lines.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 line items have been added 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 line items added yet.
           </div>
         ) : (
-          <div className="mt-6 overflow-hidden rounded-2xl border border-line/70">
+          <div className="mt-3 overflow-hidden rounded-2xl border border-line/70">
             <table className="min-w-full divide-y divide-line/70 text-sm">
               <thead className="bg-page/80 text-left text-muted">
                 <tr>
@@ -595,23 +595,23 @@ export function SalesDetailPage({ entity }: { entity: SalesDocumentEntity }) {
               <div>Status {planning.status}</div>
             </div>
           </div>
-          <div className="mt-5 grid gap-3 xl:grid-cols-4">
-            <article className="rounded-[18px] border border-line/70 bg-page/70 px-3 py-3">
+          <div className="mt-4 grid gap-2 xl:grid-cols-4">
+            <article className="surface-panel-tight bg-page/70 shadow-none">
               <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Build Recommendations</p>
               <div className="mt-2 text-base font-bold text-text">{planning.summary.totalBuildQuantity}</div>
               <div className="mt-1 text-xs text-muted">{planning.summary.buildRecommendationCount} items</div>
             </article>
-            <article className="rounded-[18px] border border-line/70 bg-page/70 px-3 py-3">
+            <article className="surface-panel-tight bg-page/70 shadow-none">
               <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Purchase Recommendations</p>
               <div className="mt-2 text-base font-bold text-text">{planning.summary.totalPurchaseQuantity}</div>
               <div className="mt-1 text-xs text-muted">{planning.summary.purchaseRecommendationCount} items</div>
             </article>
-            <article className="rounded-[18px] border border-line/70 bg-page/70 px-3 py-3">
+            <article className="surface-panel-tight bg-page/70 shadow-none">
               <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Uncovered</p>
               <div className="mt-2 text-base font-bold text-text">{planning.summary.totalUncoveredQuantity}</div>
               <div className="mt-1 text-xs text-muted">{planning.summary.uncoveredItemCount} items</div>
             </article>
-            <article className="rounded-[18px] border border-line/70 bg-page/70 px-3 py-3">
+            <article className="surface-panel-tight bg-page/70 shadow-none">
               <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Planned Items</p>
               <div className="mt-2 text-base font-bold text-text">{planning.summary.itemCount}</div>
               <div className="mt-1 text-xs text-muted">{planning.summary.lineCount} sales lines</div>
@@ -682,7 +682,7 @@ export function SalesDetailPage({ entity }: { entity: SalesDocumentEntity }) {
               </Link>
             </div>
           ) : null}
-          <div className="mt-5 space-y-3">
+          <div className="mt-4 space-y-2">
             {planning.lines.map((line) => (
               <div key={line.lineId} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
                 <div className="mb-3">
@@ -712,11 +712,11 @@ export function SalesDetailPage({ entity }: { entity: SalesDocumentEntity }) {
             ) : null}
           </div>
           {shipments.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 shipments have been created for this sales order 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 shipments created yet.
             </div>
           ) : (
-            <div className="mt-6 space-y-3">
+            <div className="mt-3 space-y-2">
               {shipments.map((shipment) => (
                 <Link key={shipment.id} to={`/shipping/shipments/${shipment.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">