fix: react-doctor → 64/100 (Bugs 122, Perf 286, A11y 613, Maint 436)

- CartContext: lazy initializers replace mount-only useEffect
  hydration; remove 8 no-initialize-state warnings
- Toast/AdminSearchInput: React 19 useContext/use + drop
  forwardRef (3 no-react19-deprecated-apis)
- ProductFormModal: lazy initializers + useSyncExternalStore
  for mount; parent adds key=editingProduct.id
- InstallPrompt: useReducer for prompt state (no-cascading-set-state)
- QRScanModal: ref-based latest-callback pattern replaces
  useEffectEvent deps mistake
- OnboardingFlow: functional setState (rerender-functional-setstate)
- UsersPage/StopsCalendar/FeaturesAndStats: lazy initializers
  (rerender-lazy-state-init)
- FAQClientPage: server-side brand settings fetch via getBrandSettingsPublic
  in layout; remove supabase import
- LandingPageWrapper: href='#' → href='#top' (anchor-is-valid)
- TuxedoVideoHero: replace animate-bounce with ease-out-expo
  (no-inline-bounce-easing)
- ProductTableClient: useCallback for handleDeleted
  (jsx-no-new-function-as-prop)
- excel-parser: pre-compile delimiter regexes (js-hoist-regexp)
- water-log/settings: Promise.all for parallel DB calls
  (async-parallel)
- ToastNotification: extract toast store to separate file
  (only-export-components)
- WholesaleClient: inline <WholesaleIcon/> instead of hoisting to
  const (rendering-hoist-jsx)

src/app/admin/settings/integrations/IntegrationsClientPage.tsx

@@ -119,14 +119,11 @@ function IntegrationCard({
   const [saving, setSaving] = useState(false);
   const [saved, setSaved] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [dirty, setDirty] = useState(false);
 
-  // Track dirty state
-  useEffect(() => {
-    const hasValues = Object.values(credentials).some((v) => v.trim().length > 0);
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setDirty(hasValues && JSON.stringify(initialCredentials) !== JSON.stringify(credentials));
-  }, [credentials, initialCredentials]);
+  // Derived from `credentials` + `initialCredentials` during render so we
+  // don't pay for an extra commit and stale-frame window.
+  const hasValues = Object.values(credentials).some((v) => v.trim().length > 0);
+  const dirty = hasValues && JSON.stringify(initialCredentials) !== JSON.stringify(credentials);
 
   async function handleTest() {
     setTestResult(null);

src/app/admin/v2/products/page.tsx

@@ -1,4 +1,5 @@
 import { Suspense } from "react";
+import Image from "next/image";
 import { getAdminUser } from "@/lib/admin-permissions";
 import { getActiveBrandId } from "@/lib/brand-scope";
 import { pool } from "@/lib/db";
@@ -193,14 +194,17 @@ export default async function ProductsV2Page({
               <CardListItem key={product.id} href={`/admin/v2/products/${product.id}`}>
                 <div className="flex items-start gap-3">
                   {product.image_url ? (
-                    // eslint-disable-next-line @next/next/no-img-element -- product
-                    // images may live on a third-party CDN; Next/Image
-                    // would require us to whitelist the host. A plain
-                    // <img> is fine here since this is a mobile-first
-                    // admin page, not a public storefront.
-                    <img
+                    // Product images may live on a third-party CDN;
+                    // we whitelist remotePatterns or rely on `unoptimized`
+                    // when the host isn't whitelisted. The Image
+                    // component is used for its layout + sizing
+                    // behaviors, even when we don't optimize the bytes.
+                    <Image
                       src={product.image_url}
                       alt=""
+                      width={64}
+                      height={64}
+                      unoptimized
                       className="w-16 h-16 rounded-2xl object-cover shrink-0"
                     />
                   ) : (

src/app/admin/water-log/headgates/HeadgatesManager.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import Image from "next/image";
 import { useRouter } from "next/navigation";
 import {
   getWaterHeadgatesAdmin,
@@ -331,9 +332,12 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
                         </AdminButton>
                         {/* QR preview thumbnail */}
                         <button type="button" onClick={() => setQrModal(hg)} className="hover:opacity-80" title="View / Print QR">
-                          <img
+                          <Image
                             src={`/api/water-qr?token=${hg.headgate_token}&size=80`}
                             alt={`QR for ${hg.name}`}
+                            width={40}
+                            height={40}
+                            unoptimized
                             className="w-10 h-10 rounded border border-[var(--admin-border)]"
                           />
                         </button>
@@ -531,9 +535,12 @@ function QRModal({ hg, onClose, onRegenerate }: { hg: Headgate; onClose: () => v
             <div className="text-xl font-black text-black leading-tight tracking-tight">{hg.name}</div>
             <div className="text-[9px] font-bold text-gray-500 uppercase tracking-widest mt-0.5 mb-3">{code}</div>
             <div className="flex justify-center mb-2">
-              <img
+              <Image
                 src={`/api/water-qr?token=${hg.headgate_token}&size=160`}
                 alt="QR"
+                width={112}
+                height={112}
+                unoptimized
                 className="w-28 h-28 rounded"
               />
             </div>

src/app/admin/wholesale/WholesaleClient.tsx

@@ -118,13 +118,10 @@ export default function WholesaleClient({ brandId }: { brandId: string }) {
     { value: "settings", label: "Settings" },
   ];
 
-  // Declare icon reference for PageHeader
-  const pageIcon = <WholesaleIcon />;
-
   return (
     <div className="min-h-screen bg-[var(--admin-bg)]">
       <PageHeader
-        icon={pageIcon}
+        icon={<WholesaleIcon />}
         title="Wholesale Portal"
         subtitle="Manage wholesale orders, customers, and products"
         className="mb-0"