Fix 18 UX issues: confirmations, undo, drawer nav, empty states, and polish

Comprehensive UX audit covering modals, drawers, dashboard, and inventory.
Key changes: confirmation steps before destructive actions, undo via toast
for consume/gone/checkout, back-navigation across entity drawers, optional
ratings, discrete item count field, audit progress bar, and sortable column
affordance.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/components/ProductDetail.tsx

@@ -20,6 +20,8 @@ export function ProductDetail({
   onEdit,
   onCheckout,
   onCheckin,
+  backLabel,
+  onBack,
 }: {
   item: Item;
   data: Bootstrap;
@@ -30,6 +32,8 @@ export function ProductDetail({
   onEdit: (i: Item) => void;
   onCheckout: (i: Item) => void;
   onCheckin: (i: Item) => void;
+  backLabel?: string;
+  onBack?: () => void;
 }) {
   const bin = data.bins.find((b) => b.id === item.binId);
   const cfg = TYPES.find((t) => t.id === item.type);
@@ -136,25 +140,45 @@ export function ProductDetail({
             padding: "20px 32px",
             borderBottom: "1px solid var(--line)",
             display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
+            flexDirection: "column",
+            gap: onBack ? 8 : 0,
             position: "sticky",
             top: 0,
             background: "var(--bg)",
             zIndex: 1,
           }}
         >
+          {onBack && backLabel && (
+            <button
+              onClick={onBack}
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 4,
+                background: "none",
+                border: "none",
+                padding: 0,
+                fontSize: 12,
+                color: "var(--sage)",
+                cursor: "pointer",
+                alignSelf: "flex-start",
+              }}
+            >
+              <span style={{ transform: "scaleX(-1)", display: "inline-flex" }}><Icon name="arrow" size={12} /></span> Back to {backLabel}
+            </button>
+          )}
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
           <div className="smallcaps" style={{ color: "var(--ink-3)" }}>
             Inventory · <span className="mono">{item.assetId}</span>
           </div>
           <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
-            {isActive && overdue && (
-              <Btn variant="sage" icon="search" onClick={() => onAudit(item)}>
+            {isActive && (
+              <Btn variant={overdue ? "sage" : "ghost"} icon="search" onClick={() => onAudit(item)}>
                 Audit
               </Btn>
             )}
-            {isActive && !overdue && (
-              <Btn variant="secondary" icon="pocket" onClick={() => onCheckout(item)}>
+            {isActive && (
+              <Btn variant={overdue ? "ghost" : "secondary"} icon="pocket" onClick={() => onCheckout(item)}>
                 Check out
               </Btn>
             )}
@@ -164,16 +188,6 @@ export function ProductDetail({
               </Btn>
             )}
             <div style={{ width: 1, height: 20, background: "var(--line)", margin: "0 2px" }} />
-            {isActive && !overdue && (
-              <Btn variant="ghost" icon="search" onClick={() => onAudit(item)}>
-                Audit
-              </Btn>
-            )}
-            {isActive && overdue && (
-              <Btn variant="ghost" icon="pocket" onClick={() => onCheckout(item)}>
-                Check out
-              </Btn>
-            )}
             {(isActive || isCheckedOut) && (
               <Btn variant="ghost" icon="leaf" onClick={() => onConsume(item)}>
                 Consume
@@ -189,6 +203,7 @@ export function ProductDetail({
             </Btn>
             <Btn variant="ghost" icon="close" onClick={triggerClose} />
           </div>
+          </div>
         </div>
 
         <div style={{ padding: "32px 32px 60px" }}>