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/App.tsx

@@ -4,6 +4,12 @@ import { Routes, Route } from "react-router-dom";
 import { api } from "./api.js";
 import type { Bin, Bootstrap, Brand, Item, Product, Shop } from "./types.js";
 import { enrichItems } from "./types.js";
+
+type DrawerBack =
+  | { kind: "brand"; brand: Brand }
+  | { kind: "shop"; shop: Shop }
+  | { kind: "sku"; product: Product }
+  | null;
 import { getStoredTimezone, TZ_STORAGE_KEY } from "./tz.js";
 import { computeStats } from "./stats.js";
 import { Sidebar } from "./components/Sidebar.js";
@@ -79,6 +85,7 @@ export function App() {
   const [selectedBrand, setSelectedBrand] = useState<Brand | null>(null);
   const [selectedShop, setSelectedShop] = useState<Shop | null>(null);
   const [modalProduct, setModalProduct] = useState<Product | null>(null);
+  const [drawerBack, setDrawerBack] = useState<DrawerBack>(null);
 
   const [theme, setTheme] = useState<ThemeKey>(
     () => (localStorage.getItem("apothecary.theme") as ThemeKey | null) ?? "light",
@@ -288,13 +295,21 @@ export function App() {
         <ProductDetail
           item={selected}
           data={data}
-          onClose={() => setSelected(null)}
+          onClose={() => { setSelected(null); setDrawerBack(null); }}
           onConsume={openConsume}
           onMarkGone={openMarkGone}
           onAudit={openAudit}
           onEdit={openEdit}
           onCheckout={openCheckout}
           onCheckin={openCheckin}
+          backLabel={drawerBack?.kind === "brand" ? drawerBack.brand.name : drawerBack?.kind === "shop" ? drawerBack.shop.name : drawerBack?.kind === "sku" ? `SKU ${drawerBack.product.sku}` : undefined}
+          onBack={drawerBack ? () => {
+            setSelected(null);
+            if (drawerBack.kind === "brand") setSelectedBrand(drawerBack.brand);
+            else if (drawerBack.kind === "shop") setSelectedShop(drawerBack.shop);
+            else if (drawerBack.kind === "sku") setSelectedSku(drawerBack.product);
+            setDrawerBack(null);
+          } : undefined}
         />
       )}
 
@@ -302,7 +317,7 @@ export function App() {
         <SkuDetail
           product={selectedSku}
           data={data}
-          onClose={() => setSelectedSku(null)}
+          onClose={() => { setSelectedSku(null); setDrawerBack(null); }}
           onEdit={() => {
             setModalProduct(selectedSku);
             setModal("editSku");
@@ -310,13 +325,22 @@ export function App() {
           onDelete={() => {
             api.deleteProduct(selectedSku.id).then(() => {
               setSelectedSku(null);
+              setDrawerBack(null);
               queryClient.invalidateQueries({ queryKey: ["bootstrap"] });
             });
           }}
           onSelectItem={(i) => {
+            setDrawerBack({ kind: "sku", product: selectedSku });
             setSelectedSku(null);
             setSelected(i);
           }}
+          backLabel={drawerBack?.kind === "brand" ? drawerBack.brand.name : drawerBack?.kind === "shop" ? drawerBack.shop.name : undefined}
+          onBack={drawerBack ? () => {
+            setSelectedSku(null);
+            if (drawerBack.kind === "brand") setSelectedBrand(drawerBack.brand);
+            else if (drawerBack.kind === "shop") setSelectedShop(drawerBack.shop);
+            setDrawerBack(null);
+          } : undefined}
         />
       )}
 
@@ -324,7 +348,7 @@ export function App() {
         <BrandDetail
           brand={selectedBrand}
           data={data}
-          onClose={() => setSelectedBrand(null)}
+          onClose={() => { setSelectedBrand(null); setDrawerBack(null); }}
           onEdit={() => {
             setModalBrand(selectedBrand);
             setModal("editBrand");
@@ -332,17 +356,26 @@ export function App() {
           onDelete={() => {
             api.deleteBrand(selectedBrand.id).then(() => {
               setSelectedBrand(null);
+              setDrawerBack(null);
               queryClient.invalidateQueries({ queryKey: ["bootstrap"] });
             });
           }}
           onSelectSku={(p) => {
+            setDrawerBack({ kind: "brand", brand: selectedBrand });
             setSelectedBrand(null);
             setSelectedSku(p);
           }}
           onSelectItem={(i) => {
+            setDrawerBack({ kind: "brand", brand: selectedBrand });
             setSelectedBrand(null);
             setSelected(i);
           }}
+          backLabel={drawerBack?.kind === "shop" ? drawerBack.shop.name : undefined}
+          onBack={drawerBack ? () => {
+            setSelectedBrand(null);
+            if (drawerBack.kind === "shop") setSelectedShop(drawerBack.shop);
+            setDrawerBack(null);
+          } : undefined}
         />
       )}
 
@@ -350,7 +383,7 @@ export function App() {
         <ShopDetail
           shop={selectedShop}
           data={data}
-          onClose={() => setSelectedShop(null)}
+          onClose={() => { setSelectedShop(null); setDrawerBack(null); }}
           onEdit={() => {
             setModalShop(selectedShop);
             setModal("editShop");
@@ -358,14 +391,17 @@ export function App() {
           onDelete={() => {
             api.deleteShop(selectedShop.id).then(() => {
               setSelectedShop(null);
+              setDrawerBack(null);
               queryClient.invalidateQueries({ queryKey: ["bootstrap"] });
             });
           }}
           onSelectBrand={(b) => {
+            setDrawerBack({ kind: "shop", shop: selectedShop });
             setSelectedShop(null);
             setSelectedBrand(b);
           }}
           onSelectItem={(i) => {
+            setDrawerBack({ kind: "shop", shop: selectedShop });
             setSelectedShop(null);
             setSelected(i);
           }}

web/src/api.ts

@@ -147,6 +147,15 @@ export const api = {
       body: JSON.stringify(body),
     }),
 
+  reactivateInventoryItem: (
+    id: string,
+    body: { binId: string },
+  ) =>
+    request<{ ok: true }>(`/inventory/${id}/reactivate`, {
+      method: "POST",
+      body: JSON.stringify(body),
+    }),
+
   auditInventoryItem: (
     id: string,
     body: { date: string; mode: AuditMode; value: number; confirmedBy?: string },

web/src/components/BrandDetail.tsx

@@ -5,6 +5,8 @@ import { getToday, getStoredTimezone } from "../tz.js";
 import { fmt, TYPE_GLYPHS } from "../format.js";
 import { Btn, Pill, Icon } from "./primitives/index.js";
 import { remainingShort } from "../stats.js";
+import { useExitAnimation } from "../hooks/useExitAnimation.js";
+import { useFocusTrap } from "../hooks/useFocusTrap.js";
 
 export function BrandDetail({
   brand,
@@ -14,6 +16,8 @@ export function BrandDetail({
   onDelete,
   onSelectSku,
   onSelectItem,
+  backLabel,
+  onBack,
 }: {
   brand: Brand;
   data: Bootstrap;
@@ -22,6 +26,8 @@ export function BrandDetail({
   onDelete: () => void;
   onSelectSku: (p: Product) => void;
   onSelectItem: (i: Item) => void;
+  backLabel?: string;
+  onBack?: () => void;
 }) {
   const products = data.products.filter((p) => p.brandId === brand.id);
   const strainMap = new Map(data.strains.map((s) => [s.id, s]));
@@ -47,13 +53,16 @@ export function BrandDetail({
   const todayStr = getToday(getStoredTimezone());
   const tz = getStoredTimezone();
 
+  const { closing, triggerClose } = useExitAnimation(220, onClose);
+  const trapRef = useFocusTrap<HTMLDivElement>();
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
+      if (e.key === "Escape") triggerClose();
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [onClose]);
+  }, [triggerClose]);
 
   const statCards: [string, React.ReactNode][] = [
     ["SKUs", String(products.length)],
@@ -64,6 +73,9 @@ export function BrandDetail({
 
   return (
     <div
+      ref={trapRef}
+      role="dialog"
+      aria-modal="true"
       style={{
         position: "fixed",
         inset: 0,
@@ -71,16 +83,16 @@ export function BrandDetail({
         zIndex: 50,
         display: "flex",
         justifyContent: "flex-end",
-        animation: "backdrop-in 200ms ease-out",
+        animation: closing ? "backdrop-out 220ms ease-in forwards" : "backdrop-in 200ms ease-out",
       }}
-      onClick={onClose}
+      onClick={triggerClose}
     >
       <div
         onClick={(e) => e.stopPropagation()}
         style={{
           width: "min(720px, 100vw)",
           height: "100%",
-          animation: "drawer-in 250ms ease-out",
+          animation: closing ? "drawer-out 220ms ease-in forwards" : "drawer-in 250ms ease-out",
           background: "var(--bg)",
           borderLeft: "1px solid var(--line)",
           overflow: "auto",
@@ -92,14 +104,34 @@ export function BrandDetail({
             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)" }}>
             Brand
           </div>
@@ -110,9 +142,11 @@ export function BrandDetail({
               icon="bin"
               disabled={hasItems}
               onClick={onDelete}
+              title={hasItems ? "Cannot delete — has inventory items" : undefined}
               style={hasItems ? { opacity: 0.3, cursor: "not-allowed" } : undefined}
             />
-            <Btn variant="ghost" icon="close" onClick={onClose} />
+            <Btn variant="ghost" icon="close" onClick={triggerClose} />
+          </div>
           </div>
         </div>
 

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" }}>

web/src/components/ShopDetail.tsx

@@ -5,6 +5,8 @@ import { getToday, getStoredTimezone } from "../tz.js";
 import { fmt } from "../format.js";
 import { Btn, Pill, Icon } from "./primitives/index.js";
 import { remainingShort } from "../stats.js";
+import { useExitAnimation } from "../hooks/useExitAnimation.js";
+import { useFocusTrap } from "../hooks/useFocusTrap.js";
 
 export function ShopDetail({
   shop,
@@ -50,13 +52,16 @@ export function ShopDetail({
   const todayStr = getToday(getStoredTimezone());
   const tz = getStoredTimezone();
 
+  const { closing, triggerClose } = useExitAnimation(220, onClose);
+  const trapRef = useFocusTrap<HTMLDivElement>();
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
+      if (e.key === "Escape") triggerClose();
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [onClose]);
+  }, [triggerClose]);
 
   const statCards: [string, React.ReactNode][] = [
     ["Purchases", String(allItems.length)],
@@ -66,6 +71,9 @@ export function ShopDetail({
 
   return (
     <div
+      ref={trapRef}
+      role="dialog"
+      aria-modal="true"
       style={{
         position: "fixed",
         inset: 0,
@@ -73,16 +81,16 @@ export function ShopDetail({
         zIndex: 50,
         display: "flex",
         justifyContent: "flex-end",
-        animation: "backdrop-in 200ms ease-out",
+        animation: closing ? "backdrop-out 220ms ease-in forwards" : "backdrop-in 200ms ease-out",
       }}
-      onClick={onClose}
+      onClick={triggerClose}
     >
       <div
         onClick={(e) => e.stopPropagation()}
         style={{
           width: "min(720px, 100vw)",
           height: "100%",
-          animation: "drawer-in 250ms ease-out",
+          animation: closing ? "drawer-out 220ms ease-in forwards" : "drawer-in 250ms ease-out",
           background: "var(--bg)",
           borderLeft: "1px solid var(--line)",
           overflow: "auto",
@@ -112,9 +120,10 @@ export function ShopDetail({
               icon="bin"
               disabled={hasItems}
               onClick={onDelete}
+              title={hasItems ? "Cannot delete — has inventory items" : undefined}
               style={hasItems ? { opacity: 0.3, cursor: "not-allowed" } : undefined}
             />
-            <Btn variant="ghost" icon="close" onClick={onClose} />
+            <Btn variant="ghost" icon="close" onClick={triggerClose} />
           </div>
         </div>
 

web/src/components/Sidebar.tsx

@@ -88,8 +88,8 @@ export function Sidebar({
       ))}
       <div className="nav-section">Quick</div>
       <div className="nav-divider" />
-      <button className="nav-link nav-action" onClick={onAddProduct} title="Add product">
-        <Icon name="plus" size={16} /> <span className="nav-label">Add product</span>
+      <button className="nav-link nav-action" onClick={onAddProduct} title="Add inventory">
+        <Icon name="plus" size={16} /> <span className="nav-label">Add inventory</span>
       </button>
       <button className="nav-link nav-action" onClick={onAudit} title="Audit">
         <Icon name="search" size={16} /> <span className="nav-label">Audit</span>

web/src/components/SkuDetail.tsx

@@ -5,6 +5,8 @@ import { getToday, getStoredTimezone } from "../tz.js";
 import { fmt, TYPE_GLYPHS } from "../format.js";
 import { Btn, Pill, Icon } from "./primitives/index.js";
 import { remainingShort } from "../stats.js";
+import { useExitAnimation } from "../hooks/useExitAnimation.js";
+import { useFocusTrap } from "../hooks/useFocusTrap.js";
 
 export function SkuDetail({
   product,
@@ -13,6 +15,8 @@ export function SkuDetail({
   onEdit,
   onDelete,
   onSelectItem,
+  backLabel,
+  onBack,
 }: {
   product: Product;
   data: Bootstrap;
@@ -20,6 +24,8 @@ export function SkuDetail({
   onEdit: () => void;
   onDelete: () => void;
   onSelectItem: (i: Item) => void;
+  backLabel?: string;
+  onBack?: () => void;
 }) {
   const strain = data.strains.find((s) => s.id === product.strainId);
   const cfg = TYPES.find((t) => t.id === product.type);
@@ -65,13 +71,16 @@ export function SkuDetail({
     (a, b) => +new Date(b.purchaseDate) - +new Date(a.purchaseDate),
   );
 
+  const { closing, triggerClose } = useExitAnimation(220, onClose);
+  const trapRef = useFocusTrap<HTMLDivElement>();
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
+      if (e.key === "Escape") triggerClose();
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [onClose]);
+  }, [triggerClose]);
 
   const statCards: [string, React.ReactNode][] = [
     ["Purchases", String(items.length)],
@@ -85,6 +94,9 @@ export function SkuDetail({
 
   return (
     <div
+      ref={trapRef}
+      role="dialog"
+      aria-modal="true"
       style={{
         position: "fixed",
         inset: 0,
@@ -92,16 +104,16 @@ export function SkuDetail({
         zIndex: 50,
         display: "flex",
         justifyContent: "flex-end",
-        animation: "backdrop-in 200ms ease-out",
+        animation: closing ? "backdrop-out 220ms ease-in forwards" : "backdrop-in 200ms ease-out",
       }}
-      onClick={onClose}
+      onClick={triggerClose}
     >
       <div
         onClick={(e) => e.stopPropagation()}
         style={{
           width: "min(720px, 100vw)",
           height: "100%",
-          animation: "drawer-in 250ms ease-out",
+          animation: closing ? "drawer-out 220ms ease-in forwards" : "drawer-in 250ms ease-out",
           background: "var(--bg)",
           borderLeft: "1px solid var(--line)",
           overflow: "auto",
@@ -113,14 +125,34 @@ export function SkuDetail({
             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)" }}>
             SKU · <span className="mono">{product.sku}</span>
           </div>
@@ -131,9 +163,11 @@ export function SkuDetail({
               icon="bin"
               disabled={hasItems}
               onClick={onDelete}
+              title={hasItems ? "Cannot delete — has inventory items" : undefined}
               style={hasItems ? { opacity: 0.3, cursor: "not-allowed" } : undefined}
             />
-            <Btn variant="ghost" icon="close" onClick={onClose} />
+            <Btn variant="ghost" icon="close" onClick={triggerClose} />
+          </div>
           </div>
         </div>
 

web/src/components/Toast.tsx

@@ -3,14 +3,20 @@ import { Icon } from "./primitives/index.js";
 
 type ToastType = "success" | "error";
 
+interface ToastAction {
+  label: string;
+  onClick: () => void;
+}
+
 interface Toast {
   id: number;
   message: string;
   type: ToastType;
+  action?: ToastAction;
 }
 
 const ToastContext = createContext<{
-  toast: (message: string, type?: ToastType) => void;
+  toast: (message: string, type?: ToastType, action?: ToastAction) => void;
 }>({ toast: () => {} });
 
 export const useToast = () => useContext(ToastContext);
@@ -44,9 +50,9 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
     }
   }, []);
 
-  const toast = useCallback((message: string, type: ToastType = "success") => {
+  const toast = useCallback((message: string, type: ToastType = "success", action?: ToastAction) => {
     const id = nextId++;
-    setToasts((prev) => [...prev, { id, message, type }]);
+    setToasts((prev) => [...prev, { id, message, type, action }]);
     startTimer(id);
   }, [startTimer]);
 
@@ -94,6 +100,28 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
                 color={t.type === "error" ? "var(--terracotta)" : "var(--sage)"}
               />
               <span style={{ flex: 1 }}>{t.message}</span>
+              {t.action && (
+                <button
+                  onClick={() => {
+                    t.action!.onClick();
+                    dismiss(t.id);
+                  }}
+                  style={{
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    padding: "2px 6px",
+                    fontSize: 12,
+                    fontWeight: 600,
+                    color: "var(--sage)",
+                    flexShrink: 0,
+                    textDecoration: "underline",
+                    textUnderlineOffset: 2,
+                  }}
+                >
+                  {t.action.label}
+                </button>
+              )}
               <button
                 onClick={() => dismiss(t.id)}
                 aria-label="Dismiss notification"

web/src/components/modals/AddInventoryFlow.tsx

@@ -139,6 +139,8 @@ function SelectProductStep({
   const [newBrandName, setNewBrandName] = useState("");
   const [error, setError] = useState<string | null>(null);
 
+  useEffect(() => { setError(null); }, [newSku, newName, newBrandId, newBrandName]);
+
   const handleScan = (result: ScanResult) => {
     if (result.kind === "product") {
       onPickProduct(result.product.id);
@@ -383,10 +385,13 @@ function InstanceDetailsStep({
   const [newShopLocation, setNewShopLocation] = useState("");
   const [newBinName, setNewBinName] = useState("");
   const [newBinCapacity, setNewBinCapacity] = useState(10);
+  const [countOriginal, setCountOriginal] = useState(last?.countOriginal ?? 1);
   const [containerWeight, setContainerWeight] = useState("");
   const [totalCannaManual, setTotalCannaManual] = useState(!!last);
   const [error, setError] = useState<string | null>(null);
 
+  useEffect(() => { setError(null); }, [assetId]);
+
   const update = <K extends keyof typeof form>(k: K, v: (typeof form)[K]) =>
     setForm((f) => {
       const next = { ...f, [k]: v };
@@ -429,9 +434,9 @@ function InstanceDetailsStep({
         binId,
         weight: isDiscrete ? undefined : form.weight,
         containerWeight: !isDiscrete && containerWeight !== "" ? parseFloat(containerWeight) : undefined,
-        countOriginal: isDiscrete ? 1 : undefined,
+        countOriginal: isDiscrete ? countOriginal : undefined,
         unitWeight: isDiscrete ? form.unitWeight : undefined,
-        price: form.price,
+        price: isDiscrete ? form.price * countOriginal : form.price,
         thc: form.thc,
         cbd: form.cbd,
         totalCannabinoids: form.totalCannabinoids,
@@ -590,7 +595,17 @@ function InstanceDetailsStep({
           }}
         >
           {isDiscrete ? (
-            <Field label={`Unit weight (${cfg?.weightUnit ?? "g"})`} span={2} hint="Weight of one unit — for grams stats">
+            <>
+            <Field label="Count" hint="How many units in this purchase">
+              <Input
+                type="number"
+                step="1"
+                min="1"
+                value={countOriginal}
+                onChange={(e) => setCountOriginal(Math.max(1, Math.floor(+e.target.value || 1)))}
+              />
+            </Field>
+            <Field label={`Unit weight (${cfg?.weightUnit ?? "g"})`} hint="Weight of one unit — for grams stats">
               <Input
                 type="number"
                 step="0.1"
@@ -598,6 +613,7 @@ function InstanceDetailsStep({
                 onChange={(e) => update("unitWeight", +e.target.value)}
               />
             </Field>
+            </>
           ) : (
             <Field label={`Size (${cfg?.unit ?? "g"})`} span={2}>
               <Input
@@ -610,7 +626,7 @@ function InstanceDetailsStep({
           )}
           <Field
             label={isDiscrete ? "Price per unit ($)" : "Total price ($)"}
-            hint={isDiscrete && form.price > 0 ? `1 × ${fmt.money(form.price)} = ${fmt.money(form.price)} total` : undefined}
+            hint={isDiscrete && form.price > 0 && countOriginal > 1 ? `${countOriginal} × ${fmt.money(form.price)} = ${fmt.money(form.price * countOriginal)} total` : undefined}
           >
             <Input
               type="number"

web/src/components/modals/AuditFlow.tsx

@@ -148,6 +148,20 @@ export function AuditFlow({
           onClose={onClose}
         />
 
+        {queue && queue.length > 1 && (
+          <div style={{ height: 3, background: "var(--bg-3)" }}>
+            <div
+              style={{
+                height: "100%",
+                width: `${((queueIdx + 1) / queue.length) * 100}%`,
+                background: "var(--sage)",
+                borderRadius: "0 2px 2px 0",
+                transition: "width 300ms ease",
+              }}
+            />
+          </div>
+        )}
+
         <div style={{ padding: 32 }}>
           <ScanField
             items={overdueFirst}

web/src/components/modals/CheckinFlow.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { Bootstrap, Item } from "../../types.js";
 import { TYPES, helpers, enrichItems } from "../../types.js";
@@ -24,12 +24,15 @@ export function CheckinFlow({
   const allItems = enrichItems(data);
   const checkedOut = allItems.filter((i) => i.status === "checked-out");
   const [itemId, setItemId] = useState(initialItem?.id ?? "");
-  const [binId, setBinId] = useState(data.bins[0]?.id ?? "");
+  const [binId, setBinId] = useState(initialItem?.prevBinId ?? data.bins[0]?.id ?? "");
   const [date, setDate] = useState(getToday(getStoredTimezone()));
   const [remaining, setRemaining] = useState("");
   const [error, setError] = useState<string | null>(null);
 
   const item = allItems.find((i) => i.id === itemId);
+
+  useEffect(() => { setError(null); }, [itemId]);
+
   const isBulk = item?.kind === "bulk";
   const cfg = item ? TYPES.find((t) => t.id === item.type) : undefined;
   const est = item ? helpers.estimatedRemaining(item, getToday(getStoredTimezone())) : 0;
@@ -58,6 +61,7 @@ export function CheckinFlow({
     if (result.kind === "item") {
       setItemId(result.item.id);
       const scanned = allItems.find((i) => i.id === result.item.id);
+      if (scanned?.prevBinId) setBinId(scanned.prevBinId);
       if (scanned?.kind === "bulk") {
         setRemaining(helpers.estimatedRemaining(scanned, getToday(getStoredTimezone())).toFixed(2));
       }
@@ -129,7 +133,10 @@ export function CheckinFlow({
                   marginTop: 24,
                 }}
               >
-                <Field label="Return to bin">
+                <Field
+                  label="Return to bin"
+                  hint={item.prevBinId ? `Was in ${data.bins.find((b) => b.id === item.prevBinId)?.name ?? "unknown"} before checkout` : undefined}
+                >
                   <Select value={binId} onChange={(e) => setBinId(e.target.value)}>
                     {data.bins.map((b) => (
                       <option key={b.id} value={b.id}>

web/src/components/modals/CheckoutFlow.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { Bootstrap, Item } from "../../types.js";
 import { helpers, enrichItems } from "../../types.js";
@@ -29,11 +29,22 @@ export function CheckoutFlow({
 
   const item = allItems.find((i) => i.id === itemId);
 
+  useEffect(() => { setError(null); }, [itemId]);
+
   const checkout = useMutation({
     mutationFn: () => api.checkoutInventoryItem(itemId, { date }),
     onSuccess: () => {
       qc.invalidateQueries({ queryKey: ["bootstrap"] });
-      toast(`Checked out ${item?.name ?? "item"}`);
+      const undoItemId = itemId;
+      const undoBinId = item?.binId ?? data.bins[0]?.id ?? "";
+      toast(`Checked out ${item?.name ?? "item"}`, "success", {
+        label: "Undo",
+        onClick: () => {
+          api.reactivateInventoryItem(undoItemId, { binId: undoBinId }).then(() => {
+            qc.invalidateQueries({ queryKey: ["bootstrap"] });
+          });
+        },
+      });
       onClose();
     },
     onError: (e: Error) => setError(e.message),

web/src/components/modals/ConsumeFlow.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { Bootstrap, Item } from "../../types.js";
 import { helpers, enrichItems } from "../../types.js";
@@ -24,18 +24,31 @@ export function ConsumeFlow({
   const allItems = enrichItems(data);
   const active = allItems.filter((i) => i.status === "active" || i.status === "checked-out");
   const [itemId, setItemId] = useState(initialItem?.id ?? "");
-  const [rating, setRating] = useState(4);
+  const [rating, setRating] = useState<number | null>(null);
   const [notes, setNotes] = useState("");
   const [date, setDate] = useState(getToday(getStoredTimezone()));
   const [error, setError] = useState<string | null>(null);
+  const [confirming, setConfirming] = useState(false);
 
   const item = allItems.find((i) => i.id === itemId);
 
+  useEffect(() => { setError(null); setConfirming(false); }, [itemId]);
+
   const finish = useMutation({
-    mutationFn: () => api.finishInventoryItem(itemId, { date, rating, notes }),
+    mutationFn: () => api.finishInventoryItem(itemId, { date, rating: rating ?? undefined, notes }),
     onSuccess: () => {
       qc.invalidateQueries({ queryKey: ["bootstrap"] });
-      toast(`Marked ${item?.name ?? "item"} as consumed — ${rating}/5 stars`);
+      const ratingStr = rating != null ? ` — ${rating}/5 stars` : "";
+      const undoItemId = itemId;
+      const undoBinId = item?.binId ?? data.bins[0]?.id ?? "";
+      toast(`Marked ${item?.name ?? "item"} as consumed${ratingStr}`, "success", {
+        label: "Undo",
+        onClick: () => {
+          api.reactivateInventoryItem(undoItemId, { binId: undoBinId }).then(() => {
+            qc.invalidateQueries({ queryKey: ["bootstrap"] });
+          });
+        },
+      });
       onClose();
     },
     onError: (e: Error) => setError(e.message),
@@ -110,7 +123,7 @@ export function ConsumeFlow({
                 <Field label="Date finished">
                   <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
                 </Field>
-                <Field label="Rating">
+                <Field label="Rating" hint="Optional — click to rate, click again to clear">
                   <div
                     style={{
                       display: "flex",
@@ -125,13 +138,13 @@ export function ConsumeFlow({
                     {[1, 2, 3, 4, 5].map((n) => (
                       <button
                         key={n}
-                        onClick={() => setRating(n)}
+                        onClick={() => setRating(rating === n ? null : n)}
                         style={{ border: "none", background: "transparent", cursor: "pointer", padding: 2 }}
                       >
                         <Icon
                           name="star"
                           size={20}
-                          color={n <= rating ? "var(--amber)" : "var(--ink-4)"}
+                          color={rating != null && n <= rating ? "var(--amber)" : "var(--ink-4)"}
                         />
                       </button>
                     ))}
@@ -143,7 +156,7 @@ export function ConsumeFlow({
                         fontFamily: "var(--mono)",
                       }}
                     >
-                      {rating}/5
+                      {rating != null ? `${rating}/5` : "—"}
                     </span>
                   </div>
                 </Field>
@@ -160,6 +173,21 @@ export function ConsumeFlow({
             </>
           )}
 
+          {confirming && item && (
+            <div
+              style={{
+                marginTop: 20,
+                padding: 14,
+                background: "var(--amber-soft)",
+                border: "1px solid var(--amber)",
+                borderRadius: "var(--r-md)",
+                fontSize: 13,
+              }}
+            >
+              Mark <strong>{item.name}</strong> (<span className="mono">{item.assetId}</span>) as consumed? This cannot be undone.
+            </div>
+          )}
+
           {error && (
             <div style={{ marginTop: 14, fontSize: 12, color: "var(--terracotta)" }}>{error}</div>
           )}
@@ -171,14 +199,28 @@ export function ConsumeFlow({
           </div>
           <div style={{ display: "flex", gap: 8 }}>
             <Btn variant="ghost" onClick={onClose}>Cancel</Btn>
-            <Btn
-              variant="primary"
-              icon="check"
-              disabled={finish.isPending || !item}
-              onClick={() => finish.mutate()}
-            >
-              {finish.isPending ? "Saving…" : error ? "Try again" : "Mark consumed"}
-            </Btn>
+            {confirming ? (
+              <>
+                <Btn variant="ghost" onClick={() => setConfirming(false)}>Back</Btn>
+                <Btn
+                  variant="danger"
+                  icon="check"
+                  disabled={finish.isPending}
+                  onClick={() => finish.mutate()}
+                >
+                  {finish.isPending ? "Saving…" : "Confirm"}
+                </Btn>
+              </>
+            ) : (
+              <Btn
+                variant="primary"
+                icon="check"
+                disabled={!item}
+                onClick={() => setConfirming(true)}
+              >
+                {error ? "Try again" : "Mark consumed"}
+              </Btn>
+            )}
           </div>
         </ModalFooter>
       </div>

web/src/components/modals/MarkGoneFlow.tsx

@@ -1,11 +1,13 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { Bootstrap, Item } from "../../types.js";
 import { helpers, enrichItems } from "../../types.js";
 import { getToday, getStoredTimezone } from "../../tz.js";
 import { remainingShort } from "../../stats.js";
+import { fmt } from "../../format.js";
 import { api } from "../../api.js";
 import { Btn, Field, Input, Select, Textarea } from "../primitives/index.js";
+import { ScanField, type ScanResult } from "../ScanField.js";
 import { ModalBackdrop, ModalHeader, ModalFooter } from "./ModalChrome.js";
 import { useToast } from "../Toast.js";
 
@@ -30,24 +32,42 @@ export function MarkGoneFlow({
   const { toast } = useToast();
   const allItems = enrichItems(data);
   const active = allItems.filter((i) => i.status === "active" || i.status === "checked-out");
-  const [itemId, setItemId] = useState(initialItem?.id ?? active[0]?.id ?? "");
+  const [itemId, setItemId] = useState(initialItem?.id ?? "");
   const [reason, setReason] = useState("lost");
   const [notes, setNotes] = useState("");
   const [date, setDate] = useState(getToday(getStoredTimezone()));
   const [error, setError] = useState<string | null>(null);
+  const [confirming, setConfirming] = useState(false);
   const item = allItems.find((i) => i.id === itemId);
 
+  useEffect(() => { setError(null); setConfirming(false); }, [itemId]);
+
   const mark = useMutation({
     mutationFn: () => api.markInventoryItemGone(itemId, { date, reason, notes }),
     onSuccess: () => {
       qc.invalidateQueries({ queryKey: ["bootstrap"] });
-      toast(`Marked ${item?.name ?? "item"} as gone`);
+      const undoItemId = itemId;
+      const undoBinId = item?.binId ?? data.bins[0]?.id ?? "";
+      toast(`Marked ${item?.name ?? "item"} as gone`, "success", {
+        label: "Undo",
+        onClick: () => {
+          api.reactivateInventoryItem(undoItemId, { binId: undoBinId }).then(() => {
+            qc.invalidateQueries({ queryKey: ["bootstrap"] });
+          });
+        },
+      });
       onClose();
     },
     onError: (e: Error) => setError(e.message),
   });
 
-  if (!item) return null;
+  const handleScan = (result: ScanResult) => {
+    if (result.kind === "item") {
+      setItemId(result.item.id);
+    }
+  };
+
+  const bin = item ? data.bins.find((b) => b.id === item.binId) : undefined;
 
   return (
     <ModalBackdrop onClose={onClose}>
@@ -83,38 +103,91 @@ export function MarkGoneFlow({
             <strong>spend</strong> but not as <strong>consumption</strong>, so daily averages stay accurate.
           </div>
 
-          <Field label="Inventory item">
-            <Select value={itemId} onChange={(e) => setItemId(e.target.value)}>
-              {active.map((i) => (
-                <option key={i.id} value={i.id}>
-                  {i.assetId} · {i.name} — {helpers.brandName(data, i.brandId)} ({remainingShort(i)} left)
-                </option>
-              ))}
-            </Select>
-          </Field>
+          <ScanField
+            items={active}
+            products={[]}
+            matchedLabel={item ? `${item.assetId} · ${item.name}` : null}
+            onMatch={handleScan}
+            mode="assetId"
+          />
 
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 16 }}>
-            <Field label="Reason">
-              <Select value={reason} onChange={(e) => setReason(e.target.value)}>
-                {REASONS.map(([k, l]) => (
-                  <option key={k} value={k}>{l}</option>
-                ))}
-              </Select>
-            </Field>
-            <Field label="Date">
-              <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
-            </Field>
-          </div>
+          {active.length === 0 ? (
+            <div style={{ marginTop: 24, textAlign: "center", color: "var(--ink-3)", fontSize: 13, fontStyle: "italic", padding: "24px 0" }}>
+              No active items to mark as gone.
+            </div>
+          ) : !item ? (
+            <div style={{ marginTop: 24, textAlign: "center", color: "var(--ink-3)", fontSize: 13, fontStyle: "italic", padding: "24px 0" }}>
+              Scan or type an asset ID to continue.
+            </div>
+          ) : (
+            <>
+              <div
+                style={{
+                  marginTop: 16,
+                  padding: 16,
+                  background: "var(--bg-2)",
+                  border: "1px solid var(--line)",
+                  borderRadius: "var(--r-md)",
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <div>
+                  <div className="serif" style={{ fontSize: 22, fontWeight: 500 }}>
+                    {item.name}
+                  </div>
+                  <div style={{ fontSize: 12, color: "var(--ink-3)" }}>
+                    <span className="mono">{item.assetId}</span> · {helpers.brandName(data, item.brandId)} · {bin?.name ?? "no bin"} · {remainingShort(item)} left
+                  </div>
+                </div>
+                <div style={{ textAlign: "right" }}>
+                  <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>PURCHASED</div>
+                  <div className="serif" style={{ fontSize: 18 }}>
+                    {fmt.dateShort(item.purchaseDate, getStoredTimezone())}
+                  </div>
+                </div>
+              </div>
 
-          <div style={{ marginTop: 16 }}>
-            <Field label="Notes (optional)" hint="What happened">
-              <Textarea
-                value={notes}
-                onChange={(e) => setNotes(e.target.value)}
-                placeholder="e.g. Pack went through the wash"
-              />
-            </Field>
-          </div>
+              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 24 }}>
+                <Field label="Reason">
+                  <Select value={reason} onChange={(e) => setReason(e.target.value)}>
+                    {REASONS.map(([k, l]) => (
+                      <option key={k} value={k}>{l}</option>
+                    ))}
+                  </Select>
+                </Field>
+                <Field label="Date">
+                  <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
+                </Field>
+              </div>
+
+              <div style={{ marginTop: 16 }}>
+                <Field label="Notes (optional)" hint="What happened">
+                  <Textarea
+                    value={notes}
+                    onChange={(e) => setNotes(e.target.value)}
+                    placeholder="e.g. Pack went through the wash"
+                  />
+                </Field>
+              </div>
+            </>
+          )}
+
+          {confirming && item && (
+            <div
+              style={{
+                marginTop: 20,
+                padding: 14,
+                background: "var(--amber-soft)",
+                border: "1px solid var(--amber)",
+                borderRadius: "var(--r-md)",
+                fontSize: 13,
+              }}
+            >
+              Mark <strong>{item.name}</strong> (<span className="mono">{item.assetId}</span>) as gone? This cannot be undone.
+            </div>
+          )}
 
           {error && (
             <div style={{ marginTop: 14, fontSize: 12, color: "var(--terracotta)" }}>{error}</div>
@@ -125,9 +198,18 @@ export function MarkGoneFlow({
           <div />
           <div style={{ display: "flex", gap: 8 }}>
             <Btn variant="ghost" onClick={onClose}>Cancel</Btn>
-            <Btn variant="danger" icon="bin" disabled={mark.isPending} onClick={() => mark.mutate()}>
-              {mark.isPending ? "Saving…" : "Mark gone"}
-            </Btn>
+            {confirming ? (
+              <>
+                <Btn variant="ghost" onClick={() => setConfirming(false)}>Back</Btn>
+                <Btn variant="danger" icon="bin" disabled={mark.isPending} onClick={() => mark.mutate()}>
+                  {mark.isPending ? "Saving…" : "Confirm"}
+                </Btn>
+              </>
+            ) : (
+              <Btn variant="danger" icon="bin" disabled={!item} onClick={() => setConfirming(true)}>
+                Mark gone
+              </Btn>
+            )}
           </div>
         </ModalFooter>
       </div>

web/src/components/primitives/index.tsx

@@ -315,6 +315,7 @@ export function Btn({
   style,
   type,
   disabled,
+  title,
 }: {
   children?: ReactNode;
   variant?: BtnVariant;
@@ -323,6 +324,7 @@ export function Btn({
   style?: CSSProperties;
   type?: "button" | "submit" | "reset";
   disabled?: boolean;
+  title?: string;
 }) {
   const variants: Record<BtnVariant, CSSProperties> = {
     primary: disabled
@@ -339,6 +341,7 @@ export function Btn({
       type={type}
       onClick={onClick}
       disabled={disabled}
+      title={title}
       style={{
         display: "inline-flex",
         alignItems: "center",

web/src/styles/global.css

@@ -85,6 +85,13 @@
 .inv-row:hover {
   background: var(--bg-2);
 }
+.sortable-col .sort-hint {
+  opacity: 0;
+  transition: opacity 100ms;
+}
+.sortable-col:hover .sort-hint {
+  opacity: 0.4;
+}
 .inv-row .inv-row-chevron {
   opacity: 0;
   transition: opacity 100ms;

web/src/types.ts

@@ -48,6 +48,7 @@ export interface InventoryItem {
   consumedDate: string | null;
   goneDate: string | null;
   checkoutDate: string | null;
+  prevBinId: string | null;
   rating: number | null;
   notes: string | null;
   audits: Audit[];

web/src/views/Dashboard.tsx

@@ -87,6 +87,17 @@ export function Dashboard({
         )}
       </div>
 
+      {stats.purchaseCount === 0 ? (
+        <Card style={{ textAlign: "center", padding: "60px 32px" }}>
+          <div className="serif" style={{ fontSize: 28, fontWeight: 500, marginBottom: 8 }}>
+            No inventory yet
+          </div>
+          <div style={{ fontSize: 14, color: "var(--ink-3)", marginBottom: 24, maxWidth: 400, margin: "0 auto 24px" }}>
+            Add your first item to start tracking consumption, audits, and spending.
+          </div>
+        </Card>
+      ) : (
+      <>
       <div
         style={{
           display: "grid",
@@ -333,6 +344,7 @@ export function Dashboard({
               return (
                 <div
                   key={i.id}
+                  className="inv-row"
                   onClick={() => onSelectItem(i)}
                   style={{
                     padding: "12px 24px",
@@ -388,6 +400,7 @@ export function Dashboard({
             {lowDiscrete.slice(0, 2).map((g) => (
               <div
                 key={g.key}
+                className="inv-row"
                 onClick={() => onSelectItem(g.items[0]!)}
                 style={{
                   padding: "12px 24px",
@@ -422,6 +435,8 @@ export function Dashboard({
           </div>
         </Card>
       </div>
+      </>
+      )}
     </div>
   );
 }

web/src/views/Inventory.tsx

@@ -129,10 +129,9 @@ export function Inventory({
   const { selected, toggle, toggleAll, toggleGroup, clear, isAllSelected, isIndeterminate } =
     useSelection(visibleIds);
 
-  // Clear selection when filters / search / view change
-  useEffect(() => {
-    clear();
-  }, [filter, typeFilter, search, view]);
+  // Selection is automatically pruned by useSelection when visibleIds changes.
+  // No need to force-clear — items that leave the visible set are removed,
+  // but items that remain stay selected.
 
   // Escape to deselect
   useEffect(() => {
@@ -465,6 +464,7 @@ function HeaderRow({
         return (
           <button
             key={i}
+            className="sortable-col"
             onClick={() => onSort(sk)}
             style={{
               background: "none",
@@ -482,7 +482,10 @@ function HeaderRow({
             }}
           >
             {label}
-            {active && <span style={{ fontSize: 9 }}>{sortAsc ? "▲" : "▼"}</span>}
+            {active
+              ? <span style={{ fontSize: 9 }}>{sortAsc ? "▲" : "▼"}</span>
+              : <span className="sort-hint" style={{ fontSize: 9 }}>▲</span>
+            }
           </button>
         );
       })}