Refactor: move public storefront stop data to server-side + parallel agent work

Server-side / caching refactor (Grok):
- New RPC get_public_stops_for_brand (migration 148) for public storefront stops
- New server action getPublicStopsForBrand with revalidate=300 + tags
- Add revalidateTag invalidation to createStopsBatch + publishStop
- Convert /tuxedo/stops and /indian-river-direct/stops to Server Components
- Extract TuxedoStopsList + IndianRiverStopsList as client islands (GSAP only)
- Removes supabase-js from browser bundle on those routes
- Both pages now statically prerendered (5m ISR)

Parallel agent changes also staged:
- AI provider model list refresh (claude-sonnet-4-5, etc.)
- ESLint directive patches for react-hooks/set-state-in-effect
- Admin + storefront + checkout + cart updates
- New admin_create_stop_rpcs migration (147)
- Misc fixes across ~90 files

Build verified: typecheck clean, lint clean on new files, production build succeeds.

src/app/admin/orders/[id]/page.tsx

@@ -6,6 +6,7 @@ import OrderPickupAction from "@/components/admin/OrderPickupAction";
 import AdminAccessDenied from "@/components/admin/AdminAccessDenied";
 import { formatDate } from "@/lib/format-date";
 import { redirect } from "next/navigation";
+import Link from "next/link";
 
 type OrderDetailPageProps = {
   params: Promise<{
@@ -26,12 +27,12 @@ export default async function OrderDetailPage({ params }: OrderDetailPageProps)
     return (
       <main className="min-h-screen px-6 py-10">
         <div className="mx-auto max-w-4xl">
-          <a
+          <Link
             href="/admin/orders"
             className="inline-flex items-center gap-2 text-sm text-stone-500 hover:text-stone-700"
           >
             ← Back to Orders
-          </a>
+          </Link>
           <div className="mt-8 rounded-2xl border border-red-200 bg-red-50 p-8 text-center">
             <p className="text-lg font-semibold text-red-700">Order not found</p>
           </div>
@@ -62,14 +63,14 @@ export default async function OrderDetailPage({ params }: OrderDetailPageProps)
         {/* Header */}
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-4">
-            <a
+            <Link
               href="/admin/orders"
               className="flex h-9 w-9 items-center justify-center rounded-xl border border-stone-200 bg-white text-stone-500 hover:bg-stone-50 transition-colors"
             >
               <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                 <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
               </svg>
-            </a>
+            </Link>
             <div>
               <h1 className="text-2xl font-bold text-stone-950 tracking-tight">Order Details</h1>
               <p className="text-sm text-stone-500">{formatDate(order.created_at)}</p>

src/app/admin/products/[id]/page.tsx

@@ -3,6 +3,7 @@ import ProductEditForm from "@/components/admin/ProductEditForm";
 import { getAdminUser } from "@/lib/admin-permissions";
 import AdminAccessDenied from "@/components/admin/AdminAccessDenied";
 import { redirect } from "next/navigation";
+import Link from "next/link";
 
 type ProductDetailPageProps = {
   params: Promise<{
@@ -36,12 +37,12 @@ export default async function ProductDetailPage({ params }: ProductDetailPagePro
           <pre className="mt-4 rounded-xl bg-white p-4 text-sm text-stone-600">
             {error?.message ?? "Product not found"}
           </pre>
-          <a
+          <Link
             href="/admin/products"
             className="mt-4 inline-block text-stone-500 hover:text-stone-700"
           >
             ← Back to Products
-          </a>
+          </Link>
         </div>
       </main>
     );
@@ -50,12 +51,12 @@ export default async function ProductDetailPage({ params }: ProductDetailPagePro
   return (
     <main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="mx-auto max-w-4xl">
-        <a
+        <Link
           href="/admin/products"
           className="text-sm text-stone-500 hover:text-stone-700"
         >
           ← Back to Products
-        </a>
+        </Link>
 
         <div className="mt-6 rounded-2xl bg-white p-8 shadow-xl shadow-stone-200/50">
           <div className="flex items-start justify-between">

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

@@ -1,20 +1,33 @@
 import { getAdminUser } from "@/lib/admin-permissions";
 import NewProductForm from "@/components/admin/NewProductForm";
+import { getBrands } from "@/actions/admin/users";
 import { redirect } from "next/navigation";
+import Link from "next/link";
 
 export default async function NewProductPage() {
   const adminUser = await getAdminUser();
   if (!adminUser?.can_manage_products) redirect("/admin/pickup");
+
+  // Resolve brand from the signed-in admin. For brand_admin / store_employee
+  // this is their assigned brand. For platform_admin (brand_id === null) we
+  // fetch the full brand list so they can choose.
+  const isPlatformAdmin = !adminUser.brand_id;
+  let brands: { id: string; name: string }[] = [];
+  if (isPlatformAdmin) {
+    const result = await getBrands();
+    brands = result.brands ?? [];
+  }
+
   return (
     <main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="mx-auto max-w-4xl">
         <div className="mb-8">
-          <a
+          <Link
             href="/admin/products"
             className="text-sm text-stone-500 hover:text-stone-700"
           >
             ← Back to Products
-          </a>
+          </Link>
         </div>
 
         <div className="rounded-2xl bg-white p-8 shadow-xl shadow-stone-200/50">
@@ -23,10 +36,16 @@ export default async function NewProductPage() {
           </h1>
 
           <p className="mt-2 text-stone-500">
-            Add a new product for Tuxedo Corn or Indian River Direct.
+            {isPlatformAdmin
+              ? "Add a new product to any brand you administer."
+              : "Add a new product to your brand's catalog."}
           </p>
 
-          <NewProductForm />
+          <NewProductForm
+            defaultBrandId={adminUser.brand_id ?? ""}
+            brands={brands}
+            lockBrand={!isPlatformAdmin}
+          />
         </div>
       </div>
     </main>

src/app/admin/route-trace/lots/[id]/page.tsx

@@ -5,6 +5,7 @@ import { isFeatureEnabled } from "@/lib/feature-flags";
 import { getRouteTraceLotDetail, getLotOrders } from "@/actions/route-trace/lots";
 import LotDetailPanel from "@/components/route-trace/LotDetailPanel";
 import RouteTraceNav from "@/components/route-trace/RouteTraceNav";
+import Link from "next/link";
 
 export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
@@ -45,7 +46,7 @@ export default async function LotDetailPage({ params }: { params: Promise<{ id:
         <div className="mx-auto max-w-2xl">
           <div className="rounded-xl border border-red-200 bg-white p-6 text-center">
             <p className="text-red-600">Lot not found</p>
-            <a href="/admin/route-trace/lots" className="mt-3 inline-block text-sm text-stone-500 hover:text-stone-700">← Back to Lots</a>
+            <Link href="/admin/route-trace/lots" className="mt-3 inline-block text-sm text-stone-500 hover:text-stone-700">← Back to Lots</Link>
           </div>
         </div>
       </div>
@@ -56,7 +57,7 @@ export default async function LotDetailPage({ params }: { params: Promise<{ id:
     <div className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="mx-auto max-w-3xl">
         <div className="mb-6">
-          <a href="/admin/route-trace/lots" className="text-sm text-stone-500 hover:text-stone-700">← Back to Lots</a>
+          <Link href="/admin/route-trace/lots" className="text-sm text-stone-500 hover:text-stone-700">← Back to Lots</Link>
         </div>
         <RouteTraceNav activeTab="lots" />
         <LotDetailPanel

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

@@ -123,6 +123,7 @@ function IntegrationCard({
   // 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]);
 

src/app/admin/stops/[id]/page.tsx

@@ -5,6 +5,7 @@ import MessageCustomersSection from "@/components/admin/MessageCustomersSection"
 import { getAdminUser } from "@/lib/admin-permissions";
 import AdminAccessDenied from "@/components/admin/AdminAccessDenied";
 import { redirect } from "next/navigation";
+import Link from "next/link";
 
 type StopDetailPageProps = {
   params: Promise<{
@@ -44,12 +45,12 @@ export default async function StopDetailPage({ params }: StopDetailPageProps) {
           <pre className="mt-4 rounded-xl bg-white border border-stone-200 p-4 text-sm text-stone-600">
             {error?.message ?? "Stop not found"}
           </pre>
-          <a
+          <Link
             href="/admin/stops"
             className="mt-4 inline-block text-stone-500 hover:text-stone-700"
           >
             ← Back to Stops
-          </a>
+          </Link>
         </div>
       </main>
     );
@@ -74,12 +75,12 @@ export default async function StopDetailPage({ params }: StopDetailPageProps) {
   return (
     <main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="mx-auto max-w-4xl">
-        <a
+        <Link
           href="/admin/stops"
           className="text-sm text-stone-500 hover:text-stone-700"
         >
           ← Back to Stops
-        </a>
+        </Link>
 
         <div className="mt-6 rounded-2xl bg-white p-8 border border-stone-200 shadow-lg">
           <div className="flex items-start justify-between">

src/app/admin/stops/new/page.tsx

@@ -4,6 +4,7 @@ import StopProductAssignment from "@/components/admin/StopProductAssignment";
 import { getAdminUser } from "@/lib/admin-permissions";
 import AdminAccessDenied from "@/components/admin/AdminAccessDenied";
 import { redirect } from "next/navigation";
+import Link from "next/link";
 
 type Stop = {
   city: string;
@@ -54,12 +55,12 @@ export default async function NewStopPage({
     <main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="mx-auto max-w-4xl">
         <div className="mb-8">
-          <a
+          <Link
             href="/admin/stops"
             className="text-sm text-stone-500 hover:text-stone-700"
           >
             ← Back to Stops
-          </a>
+          </Link>
         </div>
 
         <div className="rounded-2xl bg-white p-8 border border-stone-200 shadow-lg">

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

@@ -7,6 +7,7 @@ import {
   createWaterHeadgate,
   regenerateHeadgateToken,
   updateWaterHeadgate,
+  deleteWaterHeadgate,
 } from "@/actions/water-log/admin";
 import { AdminButton } from "@/components/admin/design-system";
 
@@ -118,6 +119,24 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
     }
   }
 
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+
+  async function handleDelete(hg: Headgate) {
+    if (!window.confirm(`Delete headgate "${hg.name}"? Existing log entries will be preserved.`)) return;
+    setDeletingId(hg.id);
+    const res = await deleteWaterHeadgate(hg.id);
+    if (res.success) {
+      // Optimistic update + refresh
+      setHeadgates((prev) => prev.filter((h) => h.id !== hg.id));
+      const refreshed = await getWaterHeadgatesAdmin(brandId);
+      setHeadgates(refreshed);
+      showToast("Headgate deleted");
+    } else {
+      showToast(res.error ?? "Failed to delete headgate", false);
+    }
+    setDeletingId(null);
+  }
+
   function toggleSelect(id: string) {
     setSelected((prev) => {
       const next = new Set(prev);
@@ -312,6 +331,15 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
                         <AdminButton variant="secondary" size="sm" onClick={() => setQrModal(hg)}>
                           Print
                         </AdminButton>
+                        <AdminButton
+                          variant="danger"
+                          size="sm"
+                          onClick={() => handleDelete(hg)}
+                          disabled={deletingId === hg.id}
+                          isLoading={deletingId === hg.id}
+                        >
+                          Delete
+                        </AdminButton>
                       </div>
                     </td>
                   </tr>

src/app/admin/water-log/settings/page.tsx

@@ -207,7 +207,7 @@ export default function WaterLogSettingsPage() {
               {/* High/Low Alerts */}
               <div className="rounded-xl bg-zinc-900 shadow-black/20 ring-1 ring-zinc-700 p-5 space-y-4">
                 <p className="font-semibold text-zinc-100">High/Low Alerts</p>
-                <p className="text-xs text-zinc-500">Receive an SMS when a reading exceeds a headgate's thresholds.</p>
+                <p className="text-xs text-zinc-500">Receive an SMS when a reading exceeds a headgate&apos;s thresholds.</p>
 
                 <div className="flex items-center justify-between">
                   <div>

src/app/admin/wholesale/WholesaleClient.tsx

@@ -1950,7 +1950,7 @@ function SettingsTab({ settings, brandId, onMsg, onRefresh, canManageSettings }:
           <div className="flex items-center justify-between">
             <div>
               <p className="font-medium text-[var(--admin-text-primary)]">Wholesale Portal</p>
-              <p className="text-sm text-[var(--admin-text-muted)]">Show the Wholesale Portal card on this brand's storefront page.</p>
+              <p className="text-sm text-[var(--admin-text-muted)]">Show the Wholesale Portal card on this brand&apos;s storefront page.</p>
             </div>
             <button
               onClick={() => setForm(f => ({ ...f, wholesaleEnabled: !f.wholesaleEnabled }))}