UX overhaul: routing, accessibility, feedback, and polish

Add react-router-dom for URL-based navigation with browser
back/forward, deep links, and bookmarks. Replace window.confirm()
with styled ConfirmDialog. Add toast notifications and success
feedback on consume/audit/gone flows. Add escape-to-close and
focus trapping on modals. Add entrance animations for drawers,
modals, and toasts. Make grids responsive, add sortable inventory
headers, working CSV/JSON export, time-aware greeting, focus-visible
outlines, search clear button, and hover chevrons on inventory rows.

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

web/src/components/modals/AuditFlow.tsx

@@ -6,6 +6,7 @@ import { api } from "../../api.js";
 import { Btn, Field, Input, Select } from "../primitives/index.js";
 import { ScanField, type ScanResult } from "../ScanField.js";
 import { ModalBackdrop, ModalHeader, ModalFooter } from "./ModalChrome.js";
+import { useToast } from "../Toast.js";
 
 const AUDIT_MODE_LABELS: Record<string, { title: string; desc: string }> = {
   weigh: {
@@ -32,6 +33,7 @@ export function AuditFlow({
   item: Item | null;
 }) {
   const qc = useQueryClient();
+  const { toast } = useToast();
   const allItems = enrichItems(data);
   const overdueFirst = [...allItems]
     .filter((i) => i.status === "active")
@@ -52,6 +54,7 @@ export function AuditFlow({
     return helpers.estimatedRemaining(i, TODAY_STR).toFixed(2);
   };
   const [value, setValue] = useState<string>(initialValueFor(item));
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     setValue(initialValueFor(item));
@@ -67,8 +70,10 @@ export function AuditFlow({
       }),
     onSuccess: () => {
       qc.invalidateQueries({ queryKey: ["bootstrap"] });
+      toast(`Audit saved — next due in ${cfg?.cadenceDays ?? "?"}d`);
       onClose();
     },
+    onError: (e: Error) => setError(e.message),
   });
 
   const handleScan = (result: ScanResult) => {
@@ -244,6 +249,10 @@ export function AuditFlow({
               </div>
             </div>
           </div>
+
+          {error && (
+            <div style={{ marginTop: 14, fontSize: 12, color: "var(--terracotta)" }}>{error}</div>
+          )}
         </div>
 
         <ModalFooter>