ci(gitea): fix deploy path — docker-compose.yml moved to deploy/

The Start Docker stack and Deploy steps referenced docker-compose.yml at the repo root, but the file moved to deploy/ as part of the deploy.sh refactor. The cp commands failed with 'cannot stat docker-compose.yml' and the deploy step aborted. Updated both cp paths to deploy/docker-compose.yml. The cd $APP_DIR and docker compose -f $APP_DIR/docker-compose.yml references are unchanged because they point at the deployed copy in APP_DIR, not the repo.
docs: document canonical Gitea remote in CLAUDE.md
2026-06-06 19:54:03 +00:00 · 2026-06-06 19:49:46 +00:00 · 2026-06-06 19:46:35 +00:00 · 2026-06-06 05:12:55 +00:00 · 2026-06-06 05:03:44 +00:00 · 2026-06-06 04:24:53 +00:00
151 changed files with 20706 additions and 4676 deletions
@@ -1,34 +1,82 @@
-# --- Self-hosted Postgres (Docker) ---
-POSTGRES_USER=routecommerce
-POSTGRES_PASSWORD=routecommerce_dev_password
-POSTGRES_DB=route_commerce
-# Used by the app and push-migrations.js to talk to the local DB
-DATABASE_URL=postgresql://routecommerce:routecommerce_dev_password@127.0.0.1:5432/route_commerce?schema=public
+# ============================================================================
+# Route Commerce — Environment variables
+# ============================================================================
+# Copy to `.env.local` and fill in real values for local development.
+# Production: set these in your hosting dashboard (Vercel / Netlify / etc.).
+# ============================================================================

-# --- PostgREST (REST API — replaces Supabase REST) ---
-# Server actions call `${NEXT_PUBLIC_SUPABASE_URL}/rest/v1/rpc/...`
-# Point that URL at the local PostgREST container. Anon key can be anything
-# non-empty since we handle auth at the app layer (Better Auth + dev_session).
-NEXT_PUBLIC_SUPABASE_URL=http://localhost:3001
-NEXT_PUBLIC_SUPABASE_ANON_KEY=local-postgrest-anon-key
-SUPABASE_SERVICE_ROLE_KEY=local-postgrest-service-key
+# ── App ─────────────────────────────────────────────────────────────────────
+NEXT_PUBLIC_BASE_URL=http://localhost:4000
+NEXT_PUBLIC_SITE_URL=http://localhost:4000

-# --- MinIO (S3-compatible object storage — replaces Supabase Storage) ---
-MINIO_ROOT_USER=routecommerce
-MINIO_ROOT_PASSWORD=miniochangeme123
-STORAGE_ENDPOINT=http://localhost:9000
-STORAGE_REGION=us-east-1
-STORAGE_ACCESS_KEY=routecommerce
-STORAGE_SECRET_KEY=miniochangeme123
-STORAGE_BUCKET_PREFIX=
-# Public base URL for image rendering in <img src=...>
-NEXT_PUBLIC_STORAGE_BASE_URL=http://localhost:9000
+# ── Database (Postgres, direct — Supabase is being removed) ────────────────
+# Single connection string used by `pg.Pool` in src/lib/auth.ts and the
+# admin-permissions / data-service layer. Format:
+#   postgresql://USER:PASS@HOST:PORT/DBNAME?sslmode=require
+DATABASE_URL=postgresql://postgres:postgres@localhost:5432/route_commerce

-# --- Better Auth ---
-BETTER_AUTH_SECRET=REPLACE_ME_WITH_OPENSSL_RAND_HEX_32
-BETTER_AUTH_URL=http://localhost:3000
-NEXT_PUBLIC_BETTER_AUTH_URL=http://localhost:3000
+# ── Auth.js (NextAuth v5) ───────────────────────────────────────────────────
+# Generate with: npx auth secret
+# Or: openssl rand -base64 32
+AUTH_SECRET=replace-me-with-a-32-byte-base64-string

-# --- App secrets ---
+# Base URL used to build OAuth callback URLs. In dev:
+AUTH_URL=http://localhost:4000
+# In production, set to https://yourdomain.com
+
+# Google OAuth provider.
+# 1. Go to https://console.cloud.google.com/apis/credentials
+# 2. Create an OAuth 2.0 Client ID (type: Web application)
+# 3. Add Authorized redirect URI: http://localhost:3000/api/auth/callback/google
+# 4. Copy client id + client secret below
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+
+# Auth.js also reads AUTH_GOOGLE_ID / AUTH_GOOGLE_SECRET if you prefer the
+# default NextAuth variable names. The code in src/auth.config.ts falls
+# back to those names if GOOGLE_CLIENT_ID is unset.
+
+# Set to "false" to disable the in-app dev credentials provider even in
+# development. Default: enabled in dev only.
+ALLOW_DEV_LOGIN=true
+
+# ── Supabase (legacy, being removed) ────────────────────────────────────────
+# Still used by the existing admin pages, server actions, and the
+# `getAdminUser` flow. Once the auth migration is complete and the
+# @supabase/* packages are removed, these can go away.
+NEXT_PUBLIC_SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=
+SUPABASE_SERVICE_ROLE_KEY=
+
+# ── Stripe ─────────────────────────────────────────────────────────────────
+STRIPE_SECRET_KEY=
+STRIPE_WEBHOOK_SECRET=
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
+STRIPE_PRICE_STARTER=
+STRIPE_PRICE_FARM=
+STRIPE_PRICE_ENTERPRISE=
+STRIPE_PRICE_HARVEST_REACH=
+STRIPE_PRICE_WHOLESALE_PORTAL=
+STRIPE_PRICE_WATER_LOG=
+STRIPE_PRICE_AI_TOOLS=
+STRIPE_PRICE_SQUARE_SYNC=
+STRIPE_PRICE_SMS_CAMPAIGNS=
+
+# ── Resend (transactional email) ────────────────────────────────────────────
+RESEND_API_KEY=
+RESEND_WEBHOOK_SECRET=
+
+# ── AI providers ────────────────────────────────────────────────────────────
+OPENAI_API_KEY=
+ANTHROPIC_API_KEY=
+GOOGLE_API_KEY=
+XAI_API_KEY=
 MINIMAX_API_KEY=
-MINIMAX_BASE_URL=
+MINIMAX_BASE_URL=https://api.minimax.io/v1
+
+# ── Square (optional) ───────────────────────────────────────────────────────
+SQUARE_APP_SECRET=
+SQUARE_ENVIRONMENT=sandbox
+
+# ── Cron / automation ───────────────────────────────────────────────────────
+CRON_SECRET=replace-me-with-a-random-string
@@ -28,6 +28,60 @@ jobs:
        run: |
          APP_DIR=/home/tyler/route-commerce
          mkdir -p $APP_DIR
+
+          # Free the dev-stack port (3001) and the port the previous deploy used
+          # (so a new deploy can pick it back up if it's the lowest free port)
+          PREV_PORT=$(cat .postgrest-port 2>/dev/null || echo "")
+          for port in 3001 $PREV_PORT; do
+            if [ -n "$port" ] && ss -tln 2>/dev/null | grep -qE "[[:space:]]127\.0\.0\.1:${port}[[:space:]]"; then
+              echo "Port $port in use, freeing..."
+              fuser -k -9 $port/tcp 2>/dev/null || true
+              docker ps -aq --filter "publish=$port" 2>/dev/null | xargs -r docker rm -f 2>/dev/null || true
+            fi
+          done
+
+          # Hard-stop the previous stack. Errors are NOT swallowed: if down
+          # fails, picking a port against a half-torn-down stack is exactly
+          # what produces the TOCTOU "address already in use" we keep hitting.
+          docker compose -f $APP_DIR/docker-compose.yml down --remove-orphans
+          # Belt-and-braces: anything with the postgrest name that survived.
+          docker ps -aq --filter "name=route_commerce_postgrest" | xargs -r docker rm -f >/dev/null 2>&1 || true
+          # docker-proxy sometimes leaves a listener behind for the published port.
+          pkill -9 -f 'docker-proxy.*3011' 2>/dev/null || true
+          pkill -9 -f 'docker-proxy.*3012' 2>/dev/null || true
+          pkill -9 -f 'docker-proxy.*3013' 2>/dev/null || true
+          sleep 3
+
+          # Verify the postgrest container is actually gone before we pick a port.
+          if docker ps -aq --filter "name=route_commerce_postgrest" | grep -q .; then
+            echo "ERROR: route_commerce_postgrest still running after down"
+            docker ps --filter "name=route_commerce_postgrest"
+            exit 1
+          fi
+
+          # Find the first free host port starting from 3011. Persist the choice
+          # so the Build and Deploy steps below can use the same URL.
+          POSTGREST_HOST_PORT=3011
+          for attempt in 1 2 3 4 5 6 7 8 9 10; do
+            if ! ss -tln 2>/dev/null | grep -qE "[[:space:]]127\.0\.0\.1:${POSTGREST_HOST_PORT}[[:space:]]"; then
+              break
+            fi
+            echo "Port $POSTGREST_HOST_PORT in use, trying next... (attempt $attempt)"
+            POSTGREST_HOST_PORT=$((POSTGREST_HOST_PORT + 1))
+            if [ $POSTGREST_HOST_PORT -gt 30200 ]; then
+              echo "ERROR: no free port in 3011-30200 range"
+              exit 1
+            fi
+            sleep 1
+          done
+          echo "Using PostgREST host port: $POSTGREST_HOST_PORT"
+          echo "$POSTGREST_HOST_PORT" > .postgrest-port
+          export NEXT_PUBLIC_API_URL="http://localhost:$POSTGREST_HOST_PORT"
+          export POSTGREST_HOST_PORT
+
+          # Seed config files into APP_DIR if missing (they live in the repo, not in APP_DIR)
+          [ -f $APP_DIR/.env.example ] || cp .env.example $APP_DIR/.env.example
+          [ -f $APP_DIR/docker-compose.yml ] || cp deploy/docker-compose.yml $APP_DIR/docker-compose.yml
          cd $APP_DIR
          [ -f .env ] || cp .env.example .env
          # Append production secrets to .env (overriding .env.example defaults)
@@ -38,8 +92,12 @@ jobs:
            echo "MINIO_ROOT_USER=${MINIO_ROOT_USER}"
            echo "MINIO_ROOT_PASSWORD=${MINIO_ROOT_PASSWORD}"
            echo "POSTGREST_JWT_SECRET=${POSTGREST_JWT_SECRET}"
+            echo "POSTGREST_HOST_PORT=$POSTGREST_HOST_PORT"
+            echo "NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL"
          } >> .env
-          docker compose up -d db postgrest minio minio_init
+          # Bring the stack up fresh — --force-recreate ensures no stale
+          # network/container references from prior failed attempts
+          docker compose up -d --force-recreate db postgrest minio minio_init
          # Wait for Postgres healthcheck
          for i in $(seq 1 30); do
            if docker compose exec -T db pg_isready -U "${POSTGRES_USER}" -d "${POSTGRES_DB}" > /dev/null 2>&1; then
@@ -55,12 +113,21 @@ jobs:
          POSTGRES_PASSWORD: ${{ secrets.POSTGRES_PASSWORD }}
          POSTGRES_DB: ${{ secrets.POSTGRES_DB }}
        run: |
-          cd /home/tyler/route-commerce
-          PGPASSWORD="${POSTGRES_PASSWORD}" psql -h 127.0.0.1 -U "${POSTGRES_USER}" -d "${POSTGRES_DB}" -v ON_ERROR_STOP=0 -f supabase/migrations/000_preflight_supabase_compat.sql || true
-          [ -f supabase/captured_schema.sql ] && PGPASSWORD="${POSTGRES_PASSWORD}" psql -h 127.0.0.1 -U "${POSTGRES_USER}" -d "${POSTGRES_DB}" -v ON_ERROR_STOP=0 -f supabase/captured_schema.sql || echo "captured_schema.sql not present, skipping"
-          for f in supabase/migrations/[0-9]*.sql; do
-            PGPASSWORD="${POSTGRES_PASSWORD}" psql -h 127.0.0.1 -U "${POSTGRES_USER}" -d "${POSTGRES_DB}" -v ON_ERROR_STOP=0 -q -f "$f" || echo "FAIL: $f"
-          done
+          APP_DIR=/home/tyler/route-commerce
+          # Seed supabase/ into APP_DIR if missing (the deploy step copies it after, but
+          # we need it here for migrations)
+          [ -d $APP_DIR/supabase ] || cp -r supabase $APP_DIR/supabase
+          cd $APP_DIR
+          # PAGER= prevents psql from launching less/more in a non-interactive shell,
+          # which hangs indefinitely waiting for keypress. Batch all files into one
+          # connection for speed instead of one psql invocation per file.
+          export PAGER=
+          export PGPASSWORD="${POSTGRES_PASSWORD}"
+          PG="psql -h 127.0.0.1 -U ${POSTGRES_USER} -d ${POSTGRES_DB} --no-psqlrc -v ON_ERROR_STOP=0 -q"
+          $PG -f supabase/migrations/000_preflight_supabase_compat.sql || true
+          [ -f supabase/captured_schema.sql ] && $PG -f supabase/captured_schema.sql || true
+          # Concatenate all numbered migrations and run in one session
+          cat supabase/migrations/[0-9]*.sql | $PG

      - name: Install dependencies
        run: npm install
@@ -69,26 +136,49 @@ jobs:
        env:
          NODE_ENV: production
          DATABASE_URL: ${{ secrets.DATABASE_URL }}
-          BETTER_AUTH_SECRET: ${{ secrets.BETTER_AUTH_SECRET }}
-          BETTER_AUTH_URL: ${{ secrets.BETTER_AUTH_URL }}
-          NEXT_PUBLIC_BETTER_AUTH_URL: ${{ secrets.NEXT_PUBLIC_BETTER_AUTH_URL }}
+
+          # Auth.js v5 (NextAuth). Fall back to Better Auth names if the
+          # Gitea secret hasn't been renamed yet.
+          AUTH_SECRET: ${{ secrets.AUTH_SECRET || secrets.BETTER_AUTH_SECRET }}
+          AUTH_URL: ${{ secrets.AUTH_URL || secrets.BETTER_AUTH_URL }}
+          NEXT_PUBLIC_AUTH_URL: ${{ secrets.NEXT_PUBLIC_AUTH_URL || secrets.NEXT_PUBLIC_BETTER_AUTH_URL }}
+          GOOGLE_CLIENT_ID: ${{ secrets.GOOGLE_CLIENT_ID || secrets.AUTH_GOOGLE_ID }}
+          GOOGLE_CLIENT_SECRET: ${{ secrets.GOOGLE_CLIENT_SECRET || secrets.AUTH_GOOGLE_SECRET }}
+          ALLOW_DEV_LOGIN: ${{ secrets.ALLOW_DEV_LOGIN }}
+
+          # Supabase (legacy, still used by admin pages/server actions until
+          # the Auth.js migration is finished)
          NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
          NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
+          SUPABASE_SERVICE_ROLE_KEY: ${{ secrets.SUPABASE_SERVICE_ROLE_KEY }}
+
+          # Storage (MinIO / S3)
          NEXT_PUBLIC_STORAGE_BASE_URL: ${{ secrets.NEXT_PUBLIC_STORAGE_BASE_URL }}
          STORAGE_ENDPOINT: ${{ secrets.STORAGE_ENDPOINT }}
          STORAGE_REGION: ${{ secrets.STORAGE_REGION }}
          STORAGE_ACCESS_KEY: ${{ secrets.STORAGE_ACCESS_KEY }}
          STORAGE_SECRET_KEY: ${{ secrets.STORAGE_SECRET_KEY }}
          STORAGE_BUCKET_PREFIX: ${{ secrets.STORAGE_BUCKET_PREFIX }}
+
+          # Stripe
          STRIPE_SECRET_KEY: ${{ secrets.STRIPE_SECRET_KEY }}
          STRIPE_WEBHOOK_SECRET: ${{ secrets.STRIPE_WEBHOOK_SECRET }}
          STRIPE_PUBLISHABLE_KEY: ${{ secrets.STRIPE_PUBLISHABLE_KEY }}
+
+          # Resend
          RESEND_API_KEY: ${{ secrets.RESEND_API_KEY }}
          RESEND_WEBHOOK_SECRET: ${{ secrets.RESEND_WEBHOOK_SECRET }}
+
+          # AI providers
          MINIMAX_API_KEY: ${{ secrets.MINIMAX_API_KEY }}
          MINIMAX_BASE_URL: ${{ secrets.MINIMAX_BASE_URL }}
+
+          # Email sender
          FROM_EMAIL: ${{ secrets.FROM_EMAIL }}
-        run: npm run build
+        run: |
+          POSTGREST_HOST_PORT=$(cat .postgrest-port)
+          export NEXT_PUBLIC_API_URL="http://localhost:$POSTGREST_HOST_PORT"
+          npm run build

      - name: Deploy
        env:
@@ -99,45 +189,70 @@ jobs:
          MINIO_ROOT_USER: ${{ secrets.MINIO_ROOT_USER }}
          MINIO_ROOT_PASSWORD: ${{ secrets.MINIO_ROOT_PASSWORD }}
          POSTGREST_JWT_SECRET: ${{ secrets.POSTGREST_JWT_SECRET }}
-          BETTER_AUTH_SECRET: ${{ secrets.BETTER_AUTH_SECRET }}
-          BETTER_AUTH_URL: ${{ secrets.BETTER_AUTH_URL }}
-          NEXT_PUBLIC_BETTER_AUTH_URL: ${{ secrets.NEXT_PUBLIC_BETTER_AUTH_URL }}
+
+          # Auth.js v5 (with Better Auth fallback for the secret name)
+          AUTH_SECRET: ${{ secrets.AUTH_SECRET || secrets.BETTER_AUTH_SECRET }}
+          AUTH_URL: ${{ secrets.AUTH_URL || secrets.BETTER_AUTH_URL }}
+          NEXT_PUBLIC_AUTH_URL: ${{ secrets.NEXT_PUBLIC_AUTH_URL || secrets.NEXT_PUBLIC_BETTER_AUTH_URL }}
+          GOOGLE_CLIENT_ID: ${{ secrets.GOOGLE_CLIENT_ID || secrets.AUTH_GOOGLE_ID }}
+          GOOGLE_CLIENT_SECRET: ${{ secrets.GOOGLE_CLIENT_SECRET || secrets.AUTH_GOOGLE_SECRET }}
+          ALLOW_DEV_LOGIN: ${{ secrets.ALLOW_DEV_LOGIN }}
+
+          # Storage
          STORAGE_ENDPOINT: ${{ secrets.STORAGE_ENDPOINT }}
          STORAGE_REGION: ${{ secrets.STORAGE_REGION }}
          STORAGE_ACCESS_KEY: ${{ secrets.STORAGE_ACCESS_KEY }}
          STORAGE_SECRET_KEY: ${{ secrets.STORAGE_SECRET_KEY }}
          STORAGE_BUCKET_PREFIX: ${{ secrets.STORAGE_BUCKET_PREFIX }}
          NEXT_PUBLIC_STORAGE_BASE_URL: ${{ secrets.NEXT_PUBLIC_STORAGE_BASE_URL }}
+
+          # PostgREST
          PGRST_SERVER_PORT: ${{ secrets.PGRST_SERVER_PORT }}
          PGRST_DB_URI: ${{ secrets.PGRST_DB_URI }}
          PGRST_DB_ANON_ROLE: ${{ secrets.PGRST_DB_ANON_ROLE }}
          PGRST_JWT_SECRET: ${{ secrets.POSTGREST_JWT_SECRET }}
+
+          # Supabase (legacy)
          NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
          NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
+
+          # Stripe
          STRIPE_SECRET_KEY: ${{ secrets.STRIPE_SECRET_KEY }}
          STRIPE_WEBHOOK_SECRET: ${{ secrets.STRIPE_WEBHOOK_SECRET }}
          STRIPE_PUBLISHABLE_KEY: ${{ secrets.STRIPE_PUBLISHABLE_KEY }}
+
+          # Resend
          RESEND_API_KEY: ${{ secrets.RESEND_API_KEY }}
          RESEND_WEBHOOK_SECRET: ${{ secrets.RESEND_WEBHOOK_SECRET }}
+
+          # AI
          MINIMAX_API_KEY: ${{ secrets.MINIMAX_API_KEY }}
          MINIMAX_BASE_URL: ${{ secrets.MINIMAX_BASE_URL }}
+
          FROM_EMAIL: ${{ secrets.FROM_EMAIL }}
        run: |
          APP_DIR=/home/tyler/route-commerce
          mkdir -p $APP_DIR
+          # Use the port chosen by Start Docker stack (persisted to .postgrest-port)
+          POSTGREST_HOST_PORT=$(cat .postgrest-port)
+          export NEXT_PUBLIC_API_URL="http://localhost:$POSTGREST_HOST_PORT"

          # Write env file from secrets (preserves existing .env for docker compose)
          {
            printf "DATABASE_URL=%s\n" "$DATABASE_URL"
+            printf "NEXT_PUBLIC_API_URL=%s\n" "$NEXT_PUBLIC_API_URL"
            printf "POSTGRES_USER=%s\n" "$POSTGRES_USER"
            printf "POSTGRES_PASSWORD=%s\n" "$POSTGRES_PASSWORD"
            printf "POSTGRES_DB=%s\n" "$POSTGRES_DB"
            printf "MINIO_ROOT_USER=%s\n" "$MINIO_ROOT_USER"
            printf "MINIO_ROOT_PASSWORD=%s\n" "$MINIO_ROOT_PASSWORD"
            printf "POSTGREST_JWT_SECRET=%s\n" "$POSTGREST_JWT_SECRET"
-            printf "BETTER_AUTH_SECRET=%s\n" "$BETTER_AUTH_SECRET"
-            printf "BETTER_AUTH_URL=%s\n" "$BETTER_AUTH_URL"
-            printf "NEXT_PUBLIC_BETTER_AUTH_URL=%s\n" "$NEXT_PUBLIC_BETTER_AUTH_URL"
+            printf "AUTH_SECRET=%s\n" "$AUTH_SECRET"
+            printf "AUTH_URL=%s\n" "$AUTH_URL"
+            printf "NEXT_PUBLIC_AUTH_URL=%s\n" "$NEXT_PUBLIC_AUTH_URL"
+            printf "GOOGLE_CLIENT_ID=%s\n" "$GOOGLE_CLIENT_ID"
+            printf "GOOGLE_CLIENT_SECRET=%s\n" "$GOOGLE_CLIENT_SECRET"
+            printf "ALLOW_DEV_LOGIN=%s\n" "$ALLOW_DEV_LOGIN"
            printf "STORAGE_ENDPOINT=%s\n" "$STORAGE_ENDPOINT"
            printf "STORAGE_REGION=%s\n" "$STORAGE_REGION"
            printf "STORAGE_ACCESS_KEY=%s\n" "$STORAGE_ACCESS_KEY"
@@ -164,7 +279,7 @@ jobs:
          rsync -a --delete .next/ $APP_DIR/.next/
          rsync -a --delete public/ $APP_DIR/public/
          cp package.json $APP_DIR/
-          cp docker-compose.yml $APP_DIR/
+          cp deploy/docker-compose.yml $APP_DIR/
          cp -r supabase/ $APP_DIR/
          cp next.config.ts $APP_DIR/ 2>/dev/null || cp next.config.js $APP_DIR/ 2>/dev/null || true

@@ -41,20 +41,4 @@ supabase/.temp/

 # IDE / local config
 .mcp.json
-
-# Docker / self-hosted Postgres
-db_data/
-
-# Captured Supabase data (re-pull from Supabase as needed)
-supabase/captured/captured_data.sql.gz
-supabase/captured/captured_schema.sql
-
-# Local data and binaries
-.data/
-bin/postgrest
-bin/minio
-bin/mc
-bin/postgrest-proxy.js
-bin/postgrest.tar.xz
-# Captured Supabase dump (regenerate from Supabase with the guide in docs/SUPABASE_DUMP_GUIDE.md)
-supabase/captured/
+.env*
@@ -1,250 +0,0 @@
-# Self-Hosted Storage + Schema Plan
-
-## Context
-
-The user is migrating Route Commerce from Supabase to a self-hosted stack:
- **Already done in this branch (`feat/better-auth`)**: Better Auth (auth), Docker Postgres, PostgREST, env var rewiring, ~10 source files updated to drop Supabase JS client.
- **What's broken right now**: The website is missing images (Supabase Storage URLs 404 because Supabase is going away), and the local Postgres can't apply the 137 migrations because the **base schema is missing** (the initial tables — `brands`, `orders`, `products`, `stops`, `admin_users` — were created in Supabase directly and never exported as a migration).
- **User constraint**: "no band-aids" — proper self-hosted replacement, not runtime patches.
- **User constraint**: "no data migration" — start with fresh empty DB; users re-upload assets.
-
-## Approach
-
-Three independent workstreams, executed in order:
-
-1. **Capture the base schema** from the still-live Supabase project using `pg_dump --schema-only` (recommended over `supabase db pull`, which has a broken migration history). Apply the captured schema + existing 137 migrations to the local self-hosted Postgres.
-2. **Stand up MinIO** in Docker as the S3-compatible object store. Wire it to the app via the AWS SDK. MinIO's URL structure is clean: `http://minio:9000/<bucket>/<key>`, publicly readable per-bucket via bucket policy.
-3. **Replace every Supabase Storage URL** in the codebase with MinIO URLs (one env var: `NEXT_PUBLIC_STORAGE_BASE_URL`).
-
-Storage buckets in use (from explore agent):
-| Bucket | Purpose | Current state |
-|---|---|---|
-| `brand-logos` | Brand logo images | Hardcoded in 8+ files via env-var URL |
-| `product-images` | Product photos | `80aa01da-ab4b-44f8-b6e7-700552457e18` (Supabase bucket UUID) |
-| `contacts-imports` | CSV contact imports | `a1b2c3d4-…` (Supabase bucket UUID) |
-| `videos` | Tuxedo video hero | Hardcoded Supabase URL in `TuxedoVideoHero.tsx` |
-| `water-photos` (dynamic) | Water log photos | API route, bucket name in form field |
-
-## Implementation
-
-### Phase A — Capture base schema and apply to local Postgres
-
-**Why `pg_dump`, not `supabase db pull`**: The remote Supabase project's `supabase_migrations.schema_migrations` history is out of sync with the local files (that's the long error list the user got). `supabase db pull` requires that history to be in sync before it'll write a new initial migration. `pg_dump` reads the live catalog directly and ignores the migration history entirely.
-
-**Steps**:
-
-1. **Capture the schema** from the remote Supabase DB (run on the user's Mac where direct PG works — MEMORY.md confirms direct PG is blocked from this dev box, but their Mac can do it):
-   ```bash
-   pg_dump "postgresql://postgres:<service-role-pw>@db.wnzkhezyhnfzhkhiflrp.supabase.co:5432/postgres" \
-     --schema-only --no-owner --no-privileges \
-     --schema=public \
-     -f supabase/captured_schema.sql
-   ```
-   *Exclude `auth` and `storage` schemas* — we stub `auth` ourselves and use MinIO instead of Supabase Storage. Note: 185 SECURITY DEFINER functions reference `auth.uid()`; these will compile against the preflight stub but return NULL at runtime. Phase D addresses this.
-
-2. **Delete files that don't belong** in the local apply order:
-   - `BUNDLE_018_042.sql` — concatenated duplicate
-   - `XXX_blog_tables.sql`, `XXX_launch_checklist.sql`, `XXX_roadmap_tables.sql`, `XXX_waitlist_waitlist.sql` — drafts (XXX convention)
-   - `099_contact_imports_bucket.sql` (the bucket-creation one — keep the RPCs though)
-   - Rename to disambiguate any number collisions (no current collision, but defensive)
-
-3. **Patch the 4 broken migrations** identified by the explore agent (read the file first, then `search_replace`):
-   - `006_water_log_rpcs_fixed.sql`: replace `STATIC` with `STABLE` (6 occurrences)
-   - `087_brand_logos_bucket.sql`: convert `CREATE POLICY IF NOT EXISTS …` to `DROP POLICY IF EXISTS …; CREATE POLICY …;` (4 policies)
-   - `099_harvest_reach_segmentation.sql`: quote the `time` column references (matches the 148 patch)
-   - `135_email_automation_rpcs.sql`: reorder `enroll_abandoned_cart` params so defaults come last, or add a default to `p_next_email_at`
-
-4. **Update `000_preflight_supabase_compat.sql`** (already in the branch):
-   - Add `CREATE EXTENSION IF NOT EXISTS pgcrypto;` at the top
-   - Remove the `storage.buckets` / `storage.objects` stub (MinIO replaces it; 087/145 storage policies will be deleted in step 2)
-
-5. **Apply to local Postgres** (running on this dev box, port 5432):
-   ```bash
-   PGPASSWORD='lay7yqM3fHNvwpfjb4tvz7M3kimopyrSHQF24vsuGUM' \
-     psql -h 127.0.0.1 -U routecommerce -d route_commerce -v ON_ERROR_STOP=1 -f supabase/migrations/000_preflight_supabase_compat.sql
-
-   PGPASSWORD='lay7yqM3fHNvwpfjb4tvz7M3kimopyrSHQF24vsuGUM' \
-     psql -h 127.0.0.1 -U routecommerce -d route_commerce -v ON_ERROR_STOP=1 -f supabase/captured_schema.sql
-
-   PGPASSWORD='lay7yqM3fHNvwpfjb4tvz7M3kimopyrSHQF24vsuGUM' \
-     for f in supabase/migrations/[0-9]*.sql; do
-       psql -h 127.0.0.1 -U routecommerce -d route_commerce -v ON_ERROR_STOP=1 -q -f "$f" || break
-     done
-   ```
-   Expected: most migrations apply, some fail (drop those, log in plan). This is the test that the local Postgres is actually usable.
-
-### Phase B — MinIO for object storage
-
-**Add to `docker-compose.yml`** (new `minio` service + `minio_init` one-shot to create buckets via `mc`):
-
-```yaml
-  minio:
-    image: minio/minio:latest
-    container_name: route_commerce_minio
-    restart: unless-stopped
-    env_file: [.env]
-    environment:
-      MINIO_ROOT_USER: ${MINIO_ROOT_USER}
-      MINIO_ROOT_PASSWORD: ${MINIO_ROOT_PASSWORD}
-    command: server /data --console-address ":9001"
-    volumes:
-      - minio_data:/data
-    ports: ["127.0.0.1:9000:9000", "127.0.0.1:9001:9001"]
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:9000/minio/health/live"]
-      interval: 5s
-      timeout: 5s
-      retries: 5
-
-  minio_init:
-    image: minio/mc:latest
-    depends_on:
-      minio: { condition: service_healthy }
-    env_file: [.env]
-    entrypoint: ["/bin/sh", "-c"]
-    command:
-      - |
-        mc alias set local http://minio:9000 $${MINIO_ROOT_USER} $${MINIO_ROOT_PASSWORD}
-        for b in brand-logos product-images contacts-imports videos water-photos; do
-          mc mb --ignore-existing local/$${b}
-          mc anonymous set download local/$${b}
-        done
-    profiles: ["init"]
-
-volumes:
-  minio_data: { driver: local }
-```
-
-**Add to `.env.example`**:
-```
-MINIO_ROOT_USER=routecommerce
-MINIO_ROOT_PASSWORD=change-me-minio-root
-NEXT_PUBLIC_STORAGE_BASE_URL=http://localhost:9000
-STORAGE_ENDPOINT=http://localhost:9000
-STORAGE_REGION=us-east-1
-STORAGE_ACCESS_KEY=routecommerce
-STORAGE_SECRET_KEY=change-me-minio-root
-STORAGE_BUCKET_PREFIX=
-```
-
-**Install AWS SDK** (MinIO is S3-compatible):
-```bash
-npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner
-```
-
-### Phase C — Replace Supabase Storage calls with MinIO
-
-**New server-side helper** `src/lib/storage.ts`:
- `s3Client` configured from env (uses `@aws-sdk/client-s3`)
- `uploadFile({ bucket, key, body, contentType })` — replaces `fetch(PUT .../storage/v1/object/{bucket}/{key})` patterns
- `deleteFile({ bucket, key })`
- `publicUrl(bucket, key)` — returns `${STORAGE_BASE_URL}/${bucket}/${key}`
- Bucket name constants exported as a single source of truth
-
-**Files to modify** (from explore agent):
- `src/actions/brand-settings.ts` — 8 `fetch` PUTs to `/storage/v1/object/brand-logos/...`
- `src/actions/products/upload-image.ts` — 3 calls to `product-images` bucket
- `src/actions/communications/import-contacts.ts` — `contacts-imports` bucket (PUT + LIST + RPC)
- `src/app/api/water-photo-upload/route.ts` — dynamic bucket
- `src/components/storefront/TuxedoVideoHero.tsx` — hardcoded `https://wnzkhezyhnfzhkhiflrp.supabase.co/storage/v1/object/public/...` for videos and brand-logos
- `src/components/time-tracking/TimeTrackingFieldClient.tsx` — same hardcoded URL
- `src/lib/email-service.ts` — 4 occurrences of `wnzkhezyhnfzhkhiflrp.supabase.co/storage/v1/object/public/...`
- `src/app/tuxedo/about/page.tsx` — same hardcoded URL
-
-For the **hardcoded Supabase URLs**: replace with `publicUrl(bucket, key)` or `${process.env.NEXT_PUBLIC_STORAGE_BASE_URL}/${bucket}/${key}`.
-
-**Remove**:
- The `MockStorageBuilder` in `src/lib/supabase.ts:193-223` (no longer needed)
- `SUPABASE_PAT` env var from `.env.example` (only used by water-photo-upload)
-
-### Phase D — Auth wiring (closes the loop)
-
-The 185 `auth.uid()` references in the captured schema will return NULL without intervention. Two options:
-
- **Option 1 (recommended, matches existing pattern)**: Disable RLS on all public tables, rely on the SECURITY DEFINER RPCs (which the codebase already does, per CLAUDE.md). One-time SQL after `captured_schema.sql` applies: `DO $$ DECLARE r record; BEGIN FOR r IN SELECT tablename FROM pg_tables WHERE schemaname='public' LOOP EXECUTE 'ALTER TABLE public.' || quote_ident(r.tablename) || ' DISABLE ROW LEVEL SECURITY'; END LOOP; END $$;`
- **Option 2**: Wire PostgREST to set `request.jwt.claim.sub` from the Better Auth session cookie. More complex; deferred unless RLS proves necessary.
-
-**Recommend Option 1** for now — it's consistent with the existing "brand scoping in server actions" pattern, and the SECURITY DEFINER functions still work because they execute with the function owner's privileges (no RLS blocking).
-
-### Phase E — Verification
-
-End-to-end test sequence (no more "trust me, it works"):
-
-1. **DB schema applies cleanly**:
-   ```bash
-   docker compose up -d db minio
-   PGPASSWORD=$POSTGRES_PASSWORD psql -h 127.0.0.1 -U routecommerce -d route_commerce -f 000_preflight.sql
-   PGPASSWORD=$POSTGRES_PASSWORD psql -h 127.0.0.1 -U routecommerce -d route_commerce -f captured_schema.sql
-   for f in supabase/migrations/[0-9]*.sql; do psql ... -f "$f" || echo "FAIL: $f"; done
-   ```
-   Goal: all migrations apply (with the 4 patches from Phase A) OR the remaining failures are documented and skipped.
-
-2. **PostgREST serves the schema**:
-   ```bash
-   curl http://127.0.0.1:3001/brands?limit=1 -H "apikey: local-anon"
-   curl http://127.0.0.1:3001/rpc/get_public_stops_for_brand -X POST -H "Content-Type: application/json" -d '{"p_slug":"indian-river-direct"}'
-   ```
-
-3. **MinIO buckets are public**:
-   ```bash
-   mc alias set local http://127.0.0.1:9000 $USER $PASS
-   mc ls local/
-   curl -I http://127.0.0.1:9000/brand-logos/test.png   # should return 200 or 404, never 403
-   ```
-
-4. **App build passes**:
-   ```bash
-   DATABASE_URL=... NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:3001 \
-     NEXT_PUBLIC_STORAGE_BASE_URL=http://127.0.0.1:9000 \
-     BETTER_AUTH_SECRET=... npm run build
-   ```
-   Goal: `✓ Compiled successfully` with no Supabase URL parse errors, no `auth.uid()` undefined, no missing bucket errors.
-
-5. **Image display in the browser**:
-   - Start the dev server: `npm run dev`
-   - Sign in via Better Auth (mock or real)
-   - Upload a product image via admin UI → verify it lands in MinIO (`mc ls local/product-images/`)
-   - Visit `/indian-river-direct/products/[slug]` → verify the image renders with the MinIO URL
-
-6. **Auth round-trip**:
-   - `POST /api/auth/sign-up/email` with test email/password → expect 200, user created in `better_auth_user` (or whatever Better Auth's table is — check `200_better_auth_tables.sql`)
-   - `POST /api/auth/sign-in/email` → expect session cookie
-   - Hit `/admin` with the cookie → expect 200, not redirect to `/login`
-
-## Files to modify (summary)
-
-| File | Change |
-|---|---|
-| `docker-compose.yml` | Add `minio` + `minio_init` services, `minio_data` volume |
-| `.env.example` | Add MinIO + storage env vars, remove `SUPABASE_PAT` |
-| `package.json` | Add `@aws-sdk/client-s3`, `@aws-sdk/s3-request-presigner` |
-| `supabase/migrations/000_preflight_supabase_compat.sql` | Add `pgcrypto` extension, remove storage stub |
-| `supabase/migrations/006_water_log_rpcs_fixed.sql` | `STATIC` → `STABLE` |
-| `supabase/migrations/087_brand_logos_bucket.sql` | `CREATE POLICY IF NOT EXISTS` → `DROP + CREATE` |
-| `supabase/migrations/099_harvest_reach_segmentation.sql` | Quote `time` column refs |
-| `supabase/migrations/135_email_automation_rpcs.sql` | Reorder `enroll_abandoned_cart` params |
-| `supabase/captured_schema.sql` | **NEW** — output of `pg_dump` from remote |
-| `src/lib/storage.ts` | **NEW** — S3 client, upload/delete/publicUrl helpers, bucket constants |
-| `src/actions/brand-settings.ts` | Replace 8 Supabase fetch PUTs with `uploadFile` |
-| `src/actions/products/upload-image.ts` | Replace 3 calls with `uploadFile` |
-| `src/actions/communications/import-contacts.ts` | Replace PUT + LIST with `uploadFile` / S3 ListObjectsV2 |
-| `src/app/api/water-photo-upload/route.ts` | Replace Supabase call with `uploadFile` |
-| `src/components/storefront/TuxedoVideoHero.tsx` | Replace hardcoded Supabase URL with `publicUrl()` |
-| `src/components/time-tracking/TimeTrackingFieldClient.tsx` | Same |
-| `src/lib/email-service.ts` | Same (4 occurrences) |
-| `src/app/tuxedo/about/page.tsx` | Same |
-| `src/lib/supabase.ts` | Remove `MockStorageBuilder` (lines 193-223) |
-
-## Reuse from existing code
-
- `src/lib/supabase.ts` — the `supabase` JS client still exports query builders used by `src/lib/svc-headers.ts` and many server actions for non-auth RPCs. Keep it for now; it's PostgREST-compatible because both speak the PostgREST protocol.
- `src/lib/auth.ts` — Better Auth config, already wired in this branch. No changes needed.
- `src/lib/admin-permissions.ts` — already swapped to use Better Auth + direct `pg`. No changes needed.
- `src/lib/svc-headers.ts` — used to build Supabase REST headers. Stays as-is (the anon/service-role strings still work against PostgREST).
-
-## Risks
-
- **Migration apply order**: even after patches, some migrations may reference tables that haven't been created yet due to deletion order. The captured `pg_dump` puts everything in dependency order, so applying it first should resolve most cross-references.
- **The 4 broken migrations may be load-bearing**: 087 (brand-logos RLS) is already removed in the cleanup step. 006 (water log RPCs) is critical for the `/admin/water-log` pages. 099 is critical for communications. 135 is critical for the email automation. If the patches don't work, the affected features will be broken — but the rest of the app should still build and run.
- **Existing user-uploaded images in Supabase will be unreachable**: the user said "no data migration", so this is expected. Admins will re-upload logos/product images. The Tuxedo video and Olathe logos (referenced in `email-service.ts` and `tuxedo/about/page.tsx`) are brand assets the user will need to copy over manually.
- **PostgREST connection pooling**: PostgREST opens ~10 connections to Postgres. The 137 migrations + `pg_dump` schema may reference `auth.uid()` inside SECURITY DEFINER functions, which will fail to plan if the `auth` schema is missing. The preflight stubs the function but the `pg_dump` will also try to create the same function (with the real Supabase body). If `pg_dump` includes a non-stub `auth.uid()` that conflicts with the preflight, apply `pg_dump` first, then the preflight.
@@ -2,11 +2,23 @@

 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

+## Canonical Remote
+
+There is exactly one remote — `origin` — pointing to the self-hosted Gitea repo:
+
+- **URL:** `git@git.crispygoat.com:tyler/route-commerce.git`
+- **Default branch:** `main`
+- **Deploy:** push to `origin/main` triggers `.gitea/workflows/deploy.yml`
+
+Do **not** add GitHub remotes. There is no `origin` on github.com and no separate "dev" repo. If you see `github.com/dzinesco/*` URLs in `.git/config`, that is stale configuration from a previous fork and should be removed (`git remote remove`).
+
 ## Project Overview

 Route Commerce is a multi-tenant B2B e-commerce platform for fresh produce wholesale distribution. Brands sell to customers who pick up at scheduled stops or receive shipments. The platform includes admin dashboards for order management, stop/route scheduling, product catalogs, payment processing (Stripe + Square), and a communications module ("Harvest Reach") for email/SMS campaigns.

-Tech stack: Next.js 16 (App Router) · Supabase (auth + Postgres + RLS) · Stripe · Square · Resend (email) · Tailwind CSS v4
+Tech stack: Next.js 16 (App Router) · **Postgres** (direct — Supabase is being removed) · Auth.js (NextAuth v5, in-progress migration from bespoke cookie auth) · Stripe · Square · Resend (email) · Tailwind CSS v4
+
+> **Direction:** Supabase is being removed in favor of a direct Postgres connection. The `supabase/` directory is kept as a path for migrations tooling only (no Supabase platform/CLI/auth). Until the Auth.js migration ships, auth still flows through the `dev_session` / `rc_auth_uid` cookies — see the Authentication section. New DB code should connect to Postgres directly (via `pg` or the chosen driver — see Database section) and **must not** import from `@supabase/*` or call Supabase REST.

 ---

@@ -21,14 +33,12 @@ npx tsc --noEmit     # TypeScript check (no emit)
 npx playwright test  # Run E2E tests (Playwright)
 ```

-> The migrate script auto-detects Supabase CLI first, then falls back to direct PostgreSQL.
-> For CLI mode: `brew install supabase/tap/supabase` then `supabase link --project-ref wnzkhezyhnfzhkhiflrp`
-> For direct PG mode: `pg` and `dotenv` are already in devDependencies.
-> If `get_brand_settings` migration fails with "cannot change return type", the function signature changed — drop and recreate it first.
+> The migrate script (`supabase/push-migrations.js`) now only uses the direct `pg` path — the Supabase CLI branch is legacy. It reads `DATABASE_URL` from `.env.local` via `dotenv`. `pg` is already in devDependencies.
+> If a migration fails with "cannot change return type", the function signature changed — drop and recreate it first.

 **Recent migration work is documented in `MEMORY.md`** (Supabase login + link process, updates to `push-migrations.js` for modern CLI, specific SQL patches made to 091/145/148/200/201 so they would apply cleanly, and which migrations were pushed in the session). Cat `MEMORY.md` for details.

-No test suite currently exists. E2E tests use Playwright (`tests/` or `test-e2e.ts`).
+E2E tests live in `tests/` and run via Playwright. Specs include `tests/smoke.spec.ts` and `tests/login/login-flow.spec.ts`. **Note: `playwright.config.ts` defaults `baseURL` to production** (`https://route-commerce-platform.vercel.app`); override with `PLAYWRIGHT_URL=http://localhost:3000` for local runs, or pass `--config` with a local config.

 ---

@@ -41,10 +51,24 @@ No test suite currently exists. E2E tests use Playwright (`tests/` or `test-e2e.
 - `dev_session=brand_admin` — full access to assigned brand only
 - `dev_session=store_employee` — limited access (orders, pickup, wholesale only)

-`src/lib/admin-permissions.ts` is the single source of truth for the current admin user. It uses a `dev_session` cookie in development and Supabase Auth in production. **Never import this file directly into Client Components** — use the `getCurrentAdminUser` server action from `@/actions/admin-user` instead.
+`src/lib/admin-permissions.ts` is the single source of truth for the current admin user. It uses a `dev_session` cookie in development and the legacy `rc_auth_uid` cookie in production (set by the pre-Auth.js `/api/login`) — never import this file directly into Client Components. Use the `getCurrentAdminUser` server action from `@/actions/admin-user` instead.
+
+The middleware (`src/middleware.ts`) guards `/admin/:path*` and `/login`. It auto-issues a `dev_session=platform_admin` cookie for the demo flow when no auth is present. A `clerk-auth.ts` helper exists in `src/lib/` but is currently a stub — do not depend on it.

 The `AdminUser` type lives in `src/lib/admin-permissions-types.ts` and is shared across server/client boundary.

+#### Auth.js (NextAuth v5) migration — in progress
+
+The platform is migrating from the bespoke `dev_session` + `rc_auth_uid` cookie flow to **Auth.js (NextAuth v5)**, with Supabase as the database adapter and email/OAuth providers. While the migration is in flight:
+
+- Do **not** add new code that depends on the `dev_session` or `rc_auth_uid` cookies — write against the Auth.js API (`auth()`, `signIn`, `signOut`, `getSession`) instead.
+- New env vars: `AUTH_SECRET`, `AUTH_URL`, and provider-specific keys (`AUTH_GITHUB_ID`/`SECRET`, `AUTH_GOOGLE_ID`/`SECRET`, etc.). See `.env.example` for the full list.
+- A new route handler at `src/app/api/auth/[...nextauth]/route.ts` will replace the ad-hoc `/api/login`, `/api/auth/uid`, and `/api/logout` endpoints.
+- The middleware (`src/middleware.ts`) will eventually use `auth()` from NextAuth to populate the session; the existing `dev_session` auto-login branch is a temporary fallback for demos.
+- `src/lib/admin-permissions.ts` will keep its public surface (`getAdminUser`, `getCurrentAdminUser`) but read the session from NextAuth internally — the `AdminUser` type does not need to change.
+- `clerk-auth.ts` is being removed in favor of Auth.js; do not extend it.
+- Until the migration ships, the `dev_session` and `rc_auth_uid` paths remain the source of truth — see the section above for current behavior.
+
 ### Server Actions Pattern

 All database writes go through server actions in `src/actions/`. These:
@@ -55,9 +79,19 @@ All database writes go through server actions in `src/actions/`. These:

 Server actions are "use server" files that export async functions. Client components import and call them directly.

-### SECURITY DEFINER RPCs + Brand Scoping
+### Database (Postgres, direct)

-The app uses **PostgreSQL SECURITY DEFINER functions** for all data access. These run with the function owner's privileges and bypass RLS entirely. This means:
+The app connects to **Postgres directly** — no Supabase platform, JS client, or REST gateway. Server actions use the `pg` driver (or whatever the chosen connection layer is) to call `SECURITY DEFINER` PL/pgSQL functions. Storage of files (product images, etc.) is moving to an S3-compatible object store; until that's wired up, image references can stay as URLs.
+
+#### Connection
+
+- `DATABASE_URL` in `.env.local` (and hosting dashboard) is the only required DB env var.
+- A single shared `pg` `Pool` is exported from `src/lib/db.ts` (TBD — to be created/confirmed during the migration). Server actions and API routes import it and call `pool.query(...)` against RPC names.
+- No `NEXT_PUBLIC_SUPABASE_URL` / `SUPABASE_SERVICE_ROLE_KEY` / `@supabase/*` imports — these are being purged from the codebase.
+
+#### SECURITY DEFINER RPCs + Brand Scoping
+
+The app uses **PostgreSQL SECURITY DEFINER functions** for all data access. These run with the function owner's privileges and bypass any future RLS. This means:

 - Brand isolation must be enforced at the **application layer** (in server actions), not in database policies
 - Every RPC that touches brand-scoped data accepts a `p_brand_id UUID` parameter and filters by it
@@ -182,10 +216,19 @@ For annual pricing, create separate annual prices in Stripe (e.g., $441/yr for S

 ### Communications Module ("Harvest Reach")

-The communications system (`/admin/communications`) uses a separate set of tables that are **NOT protected by RLS** — they rely entirely on the SECURITY DEFINER RPCs + application-layer brand scoping. Key tables: `communication_campaigns`, `communication_templates`, `communication_contacts`, `communication_message_logs`.
+The communications system (`/admin/communications`) uses a separate set of tables that are **NOT protected by RLS** — they rely entirely on the SECURITY DEFINER RPCs + application-layer brand scoping. Key tables: `communication_campaigns`, `communication_templates`, `communication_contacts`, `communication_message_logs`. (The "no RLS" framing carries over from the Supabase era; on raw Postgres this just means no row-level policies — scoping is still enforced by RPC + app layer.)

 `send_campaign` / `send_stop_blast` RPCs insert into `communication_message_logs` but do NOT populate `event_id`. The Resend webhook (`src/app/api/resend/webhook/route.ts`) must therefore look up logs by `customer_email + subject + created_at` (7-day window), not by `event_id`.

+**Scheduled automations** (declared in `vercel.json`):
+- `POST /api/email-automation/abandoned-cart` — every 6h, fires abandoned-cart sequence emails
+- `POST /api/email-automation/welcome-sequence` — every 6h, fires welcome onboarding sequence
+- `POST /api/cron/send-scheduled` — daily 09:00, sends scheduled campaigns
+- `POST /api/wholesale/notifications/{send,dispatch,pickup-reminder}` — wholesale lifecycle
+- `POST /api/square/process-queue` — every 2 min, drains Square sync queue
+
+These endpoints are also reachable via curl for manual triggering; the email-automation routes accept `Authorization: Bearer $CRON_SECRET`.
+
 ### Payments

 - **Stripe** — primary payment processor; `src/actions/payments.ts` and `src/app/api/stripe/` handle checkout, webhooks, refunds
@@ -200,7 +243,7 @@ Separate from orders/stops — tracks irrigation/water usage per brand. `src/act

 ## Key Conventions

- All DB mutations use Supabase REST API (`fetch` to `${supabaseUrl}/rest/v1/rpc/...`) from server actions, NOT the Supabase JS client (avoids SSR cookie issues)
+- All DB access goes through a shared `pg` `Pool` (see Database section). Server actions call SECURITY DEFINER RPCs via `pool.query('SELECT * FROM fn_name($1, $2)', [...])`. Do not introduce `@supabase/*` imports or REST fetch to `*/rest/v1/`.
 - `gen_random_uuid()` used in migrations for primary keys
 - Migrations use `CREATE OR REPLACE FUNCTION` for idempotency — never `DROP` then `CREATE`
 - Status enums stored as TEXT — no PostgreSQL ENUM type
@@ -217,11 +260,11 @@ Separate from orders/stops — tracks irrigation/water usage per brand. `src/act
 |---|---|
 | Admin auth + permissions | `src/lib/admin-permissions.ts`, `src/lib/admin-permissions-types.ts` |
 | Middleware (route protection) | `src/middleware.ts` |
-| Server actions | `src/actions/*.ts` (one file per domain) |
+| Server actions | `src/actions/*.ts` (one file per domain; also grouped into `src/actions/{admin,ai,billing,communications,harvest-reach,integrations,orders,products,settings,shipping,stops,water-log,platform,route-trace,time-tracking,email-automation}/`) |
 | Admin pages | `src/app/admin/[module]/page.tsx` |
 | Admin client components | `src/components/admin/*.tsx` |
-| Migrations | `supabase/migrations/` |
-| Supabase client | `src/lib/supabase.ts` |
+| Migrations | `supabase/migrations/` (kept for now; will likely move to `db/migrations/` in a later pass) |
+| Postgres pool / driver | `src/lib/db.ts` (TBD — create during the Supabase removal pass) |
 | Email templates | `src/lib/email-templates.ts` |
 | Date formatting | `src/lib/format-date.ts` |
 | Feature flags | `src/lib/feature-flags.ts` |
@@ -238,7 +281,8 @@ Separate from orders/stops — tracks irrigation/water usage per brand. `src/act
 ## Gotchas

 - **Dev mode `brand_id: null`**: `getAdminUser()` returns `brand_id: null` for platform_admin dev sessions. Always pass explicit `brandId` to server action functions that accept it — don't rely on `adminUser.brand_id` alone.
- **Communications = no RLS**: The communications tables (campaigns, templates, contacts, message_logs) have RLS disabled. All brand scoping must be enforced in server actions.
+- **Communications = no RLS**: The communications tables (campaigns, templates, contacts, message_logs) have no row-level policies. All brand scoping must be enforced in server actions.
+- **Supabase residue in the wild**: `grep -r "@supabase" src/` will still find imports during the transition. Do not add new ones; if you're touching a file that imports from Supabase, replace the call with the equivalent `pg`-pool call before merging.
 - **Webhook event_id**: `log_communication_messages` never populates `event_id`, so the Resend webhook uses `customer_email + subject` lookup instead.
 - **Mixed fulfillment orders**: An order can have both pickup and ship items. `get_shipping_orders` RPC returns orders with at least one `fulfillment = 'ship'` item.
 - **SMS opt-in defaults**: `communication_contacts.sms_opt_in` defaults to `FALSE` (opt-out by default). `email_opt_in` defaults to `TRUE`. Always check `sms_opt_in` specifically for SMS sends, not `email_opt_in`.
@@ -2,11 +2,40 @@

 This file captures key context, decisions, fixes, and state from recent work so it survives across conversations.

-**Last updated:** 2026-06-03 (during Supabase migration apply session)
+**Last updated:** 2026-06-06 (Supabase → Postgres pivot)

 ---

-## Supabase CLI + Migrations Tooling
+## 🚨 Direction Pivot (2026-06-06) — Supabase → Postgres
+
+The platform is moving off Supabase entirely. We are connecting to **Postgres directly** (via `pg`), with **Auth.js (NextAuth v5)** handling authentication. See `CLAUDE.md` for the full updated architecture.
+
+### What changes immediately
+- **DB connection**: `DATABASE_URL` is the only required DB env var. No more `NEXT_PUBLIC_SUPABASE_URL`, `SUPABASE_SERVICE_ROLE_KEY`, or `SUPABASE_ANON_KEY`.
+- **Migrations**: only the `pg` direct path in `supabase/push-migrations.js` is supported going forward. The Supabase CLI branch is dead code. The script reads `DATABASE_URL` from `.env.local` via `dotenv`.
+- **Code**: no new `@supabase/*` imports, no `rest/v1/` REST fetch, no Supabase JS client usage. Use a shared `pg` `Pool` (target location: `src/lib/db.ts`, **TBD — create during the cutover**).
+- **Auth**: legacy `rc_auth_uid` cookie + bespoke `/api/login` is being replaced by Auth.js. Until the Auth.js migration ships, the `dev_session` cookie remains the source of truth.
+- **Storage**: Supabase Storage (e.g. the `product-images` bucket created in migration 145) is going away. Need an S3-compatible alternative — **TBD**.
+
+### What's TBD / needs follow-up
+- [ ] `DATABASE_URL` for local dev (Neon? local Postgres? — user hasn't specified the Postgres host yet)
+- [ ] New connection layer: raw `pg` Pool vs Drizzle vs Prisma vs Neon serverless driver — **not decided**
+- [ ] Auth.js migration actually landing (currently "in progress" per CLAUDE.md)
+- [ ] Where do product images, brand logos, etc. live now? S3? Cloudflare R2? Re-encode as URL strings?
+- [ ] Whether the Supabase project (`wnzkhezyhnfzhkhiflrp`) gets shut down or kept read-only for the transition
+- [ ] Cutover sequencing: do we delete `@supabase/*` from `package.json` in one PR or incrementally?
+
+### Migration content that's now obsolete
+- **145 (product-images bucket)**: Supabase Storage bucket + RLS policies. Replaced by object store of choice.
+- **Any RLS policy on tables** (200 added several): the "no RLS, app-layer scoping" model still holds but the policies are inert in the new world.
+- The `supabase link --project-ref wnzkhezyhnfzhkhiflrp` setup is no longer needed for ongoing work.
+
+### Historical sections below
+The "Supabase CLI + Migrations Tooling" section that used to live at the top of this file describes the *previous* tooling. It is kept below as **historical record** of work that was already applied to the Supabase project. Do **not** follow its CLI instructions — use the `pg` direct path instead. Migration-file patch notes (091, 145, 148, 200, 201) are also kept as historical record of what got applied.
+
+---
+
+## Supabase CLI + Migrations Tooling *(SUPERSEDED — see Direction Pivot above)*

 ### Login + Link (done in this session)
 - User ran `supabase login`
@@ -35,15 +64,23 @@ Key changes:
 - Falls back to direct `pg` only if CLI path fails.
 - Header comments updated with current recommended workflow.

-**Recommended commands now:**
+**Recommended commands now (Supabase CLI path — being phased out, use `pg` direct path going forward):**
 ```bash
+# Supabase CLI path (legacy — do not use going forward)
 supabase login
 supabase link --project-ref wnzkhezyhnfzhkhiflrp
-node supabase/push-migrations.js 148          # or any prefix
+node supabase/push-migrations.js 148          # CLI path
 # or
 npm run migrate:one 148
 ```

+```bash
+# Direct pg path (this is the future — only the pg branch is kept alive in the script)
+DATABASE_URL=postgres://... node supabase/push-migrations.js 148
+# or
+DATABASE_URL=postgres://... npm run migrate:one 148
+```
+
 `npm run migrate` (no arg) will push every `*.sql` in order (use with caution).

 ---
@@ -133,19 +170,23 @@ Verification queries (post-apply) confirmed:

 ---

-## Current State / Gotchas
+## Current State / Gotchas (2026-06-06)

- `supabase migration list` will show a lot of "pending" because the project's custom numeric migrations (00x_*.sql) were historically applied via the raw-SQL push script, not registered in Supabase's `schema_migrations` tracking table. Only early ones (001/002) + many timestamped migrations from other activity are tracked.
- Many migrations are intentionally written to be re-runnable. Re-pushing a prefix is the supported workflow for this project.
- When adding **new** migrations in the future, prefer the standard `supabase migration new` flow if possible, but the custom `push-migrations.js` + numeric prefix style is still the established pattern here.
- Storage policies, RLS, SECURITY DEFINER functions, and brand-scoped data are all over the place — test carefully after big applies.
+- The Supabase CLI is no longer the recommended path. Use `DATABASE_URL` + `pg` directly. The `supabase/` directory is kept as a path for migrations tooling only.
+- The Postgres host/URL for local dev is **TBD** (not yet decided by the user). Until it's set, `npm run migrate` will fail at the `pg` connect step. (The Supabase project at `wnzkhezyhnfzhkhiflrp` may still exist as a fallback read-only target — unconfirmed.)
+- `supabase migration list` will show a lot of "pending" because the project's custom numeric migrations (00x_*.sql) were historically applied via the raw-SQL push script, not registered in Supabase's `schema_migrations` tracking table. This is mostly irrelevant now that we're moving off Supabase.
+- Many migrations are intentionally written to be re-runnable. Re-pushing a prefix is the supported workflow for this project — this still holds under direct `pg`.
+- When adding **new** migrations, use the established `supabase/push-migrations.js` + numeric prefix style (`NNN_descriptive_name.sql`). Do not introduce `supabase migration new` — that flow is going away with the CLI branch.
+- Storage policies (145), RLS policies (200), SECURITY DEFINER functions, and brand-scoped data are still in Postgres — test carefully after big applies. Brand scoping still relies on `p_brand_id` parameters in RPCs.
 - CLAUDE.md already documents the overall migrate story and the `get_brand_settings` gotcha.
+- **Open question for next session:** confirm Postgres host + connection layer (raw `pg` vs Drizzle/Prisma) and start the actual cutover (drop `@supabase/*` deps, create `src/lib/db.ts`, replace cookie auth with Auth.js).

 ---

 ## How to Use This Memory

 - Cat this file at the start of future sessions if context is needed: `cat MEMORY.md`
+- **Read the Direction Pivot section first** — it supersedes the older Supabase-flavored instructions.
 - Update this file with new key facts, applied migrations, or new gotchas.
 - Feel free to add dated sections.

@@ -245,3 +286,25 @@ Follow-up pass on the original Codex review covering public site, buyer path, bi
 ### Migration 203 — applied via Supabase CLI

 `203_plan_usage_active_products.sql` updates `get_brand_plan_info` to count `products` where `active = true AND deleted_at IS NULL`, matching the dashboard's "Active Products" stat. The `NOTIFY pgrst, 'reload schema'` ensures PostgREST picks up the change without restart.
+
+## Gitea build fix — 2026-06-06
+
+Gitea runner (`https://git.crispygoat.com/tyler/route-commerce.git`, branch `main`) was failing `next build` with two errors:
+
+1. **DYNAMIC_SERVER_USAGE** on `/admin/settings/square-sync` (and the whole admin tree): `getAdminUser()` reads `cookies()` via `next/headers`. The admin layout tried to prerender statically, so the first child page that hit cookies aborted the build.
+2. **Prerender ECONNREFUSED** on `/indian-river-direct/stops`: `getPublicStopsForBrand` / `getActiveStopsForSitemap` / `getBrandSettingsPublic` fetch `NEXT_PUBLIC_SUPABASE_URL` at build time. The Gitea runner passes a Supabase URL that resolves but is unreachable, so `fetch` throws `ECONNREFUSED` and the prerender aborts.
+
+The earlier commit `2f3be54 fix(actions): skip Supabase fetch at build time when env vars unset` only added `if (!supabaseUrl || !supabaseKey) return [];` — but in CI the env vars **are** set, so the guard passed and the fetch was still attempted.
+
+### Fixes applied
+
+- `src/actions/stops.ts` — wrapped `getActiveStopsForSitemap` and `getPublicStopsForBrand` fetches in `try/catch` returning `[]` on error. Env-var guard kept as fast path.
+- `src/actions/brand-settings.ts` — wrapped `getBrandSettingsPublic` fetch in `try/catch` returning `{ success: false }` on error.
+- `src/app/admin/settings/square-sync/page.tsx` — added `export const dynamic = "force-dynamic";` (was missing).
+- `src/app/admin/layout.tsx` — added `export const dynamic = "force-dynamic";` so the entire admin tree opts out of static prerender (layout calls `getAdminUser()` which reads cookies).
+- `.gitea/workflows/deploy.yml` was simplified earlier in commit `2d837bc` to a thin wrapper around `deploy/deploy.sh`.
+
+### Remote
+
+- The crispygoat repo (`git@git.crispygoat.com:tyler/route-commerce.git`) and the GitHub `origin` repo are separate forks — `tyler/main` is the self-hosted Auth.js + Postgres branch, `origin/main` is the Supabase branch. Don't merge them; they share no deploy workflow.
+- Push targets `tyler/main` to trigger the Gitea build.
@@ -1,6 +1,6 @@
 # Route Commerce

-A multi-tenant B2B e-commerce platform for fresh produce wholesale distribution. Brands manage products, stops, orders, and wholesale customers from a single admin dashboard. 🚀
+A multi-tenant B2B e-commerce platform for fresh produce wholesale distribution. Brands manage products, stops, orders, and wholesale customers from a single admin dashboard.

 ## What It Does

@@ -0,0 +1,52 @@
+# =============================================================================
+# .env.production — secrets + dynamic ports for the running containers
+# =============================================================================
+#
+# deploy.sh writes the first three lines on every successful deploy.
+# Everything below is YOUR responsibility to populate. deploy.sh preserves
+# unknown lines verbatim across deploys (it only overwrites the lines it
+# knows about), so you can safely commit this file to a private repo or
+# provision it via your secrets manager of choice.
+#
+# In production, this file should be mode 0600 and owned by the deploy user.
+# =============================================================================
+
+# --- managed by deploy.sh (do not edit by hand) -------------------------------
+POSTGREST_HOST_PORT=3011
+NEXTJS_HOST_PORT=3012
+NEXT_PUBLIC_API_URL=http://localhost:3011
+
+# --- PostgREST connection ---------------------------------------------------
+PGRST_DB_URI=postgres://app:secret@db.internal:5432/app_production
+PGRST_DB_ANON_ROLE=anon
+PGRST_DB_SCHEMA=public
+
+# --- Next.js server-side secrets -------------------------------------------
+# Anything not prefixed NEXT_PUBLIC_ is server-only and read at request time.
+DATABASE_URL=postgres://app:secret@db.internal:5432/app_production
+
+# Auth.js v5 (NextAuth). Generate AUTH_SECRET with `npx auth secret` or
+# `openssl rand -base64 32`. AUTH_URL is the public base URL the browser
+# uses to build OAuth callback URLs.
+AUTH_SECRET=change-me-to-a-long-random-string
+AUTH_URL=https://app.example.com
+NEXT_PUBLIC_AUTH_URL=https://app.example.com
+ALLOW_DEV_LOGIN=false
+
+# Google OAuth provider for Auth.js. Set both AUTH_GOOGLE_ID/SECRET and
+# GOOGLE_CLIENT_ID/SECRET (the v5 code reads either name).
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+AUTH_GOOGLE_ID=
+AUTH_GOOGLE_SECRET=
+
+# --- External services ------------------------------------------------------
+STRIPE_SECRET_KEY=sk_live_replace_me
+STRIPE_PUBLISHABLE_KEY=pk_live_replace_me
+STRIPE_WEBHOOK_SECRET=whsec_replace_me
+
+SMTP_HOST=smtp.example.com
+SMTP_PORT=587
+SMTP_USER=apikey
+SMTP_PASSWORD=replace_me
+SMTP_FROM="My App <noreply@example.com>"
@@ -0,0 +1,6 @@
+# Runtime artefacts written by deploy.sh — do NOT commit these.
+.deploy.lock
+deploy.log
+.postgrest-port
+.nextjs-port
+.env.production
@@ -0,0 +1,57 @@
+# =============================================================================
+# Dockerfile.nextjs — multi-stage build for the Next.js frontend
+# =============================================================================
+# Used by docker-compose.yml's `nextjs` service.
+#
+# Why this looks the way it does:
+#   - `NEXT_PUBLIC_API_URL` must be present at BUILD time (Next.js inlines
+#     it into the client JS). We pass it through as an ARGs so the build
+#     context is reproducible (`docker build --build-arg` or via deploy.sh's
+#     `docker compose --env-file` flow).
+#   - We copy the host's pre-built `.next/` (produced by `npm run build` in
+#     deploy.sh) rather than running `next build` inside the image. This
+#     keeps the image lean and avoids double-building.
+# =============================================================================
+
+# ---- builder: produce node_modules with dev deps for the build step --------
+FROM node:20-alpine AS deps
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN if [ -f package-lock.json ]; then npm ci; else npm install; fi
+
+# ---- builder: produce the standalone .next/ output ------------------------
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# These ARGs are wired through docker-compose's `args:` block (or the CLI).
+# deploy.sh exports them in the build environment.
+ARG NEXT_PUBLIC_API_URL
+ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
+ARG NEXTJS_HOST_PORT
+ENV NEXTJS_HOST_PORT=${NEXTJS_HOST_PORT}
+
+RUN npm run build
+
+# ---- runner: minimal image, standalone server -----------------------------
+FROM node:20-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+ENV PORT=3000
+
+# Run as non-root.
+RUN addgroup --system --gid 1001 nodejs \
+ && adduser  --system --uid 1001 nextjs
+
+# Copy only what the standalone server needs.
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
+
+USER nextjs
+EXPOSE 3000
+
+# Adjust this CMD to match the actual server file your build emits.
+# For `output: "standalone"` in next.config.js the file is server.js.
+CMD ["node", "server.js"]
@@ -0,0 +1,54 @@
+# =============================================================================
+# Makefile — convenience targets around deploy.sh
+# =============================================================================
+# All targets are wrappers; you can also invoke deploy.sh directly.
+
+SHELL := /usr/bin/env bash
+.SHELLFLAGS := -Eeu -o pipefail -c
+.SHELLFLAGS_LOG := $(.SHELLFLAGS)
+
+DEPLOY     := ./deploy.sh
+HEALTH     := ./healthcheck.sh
+WORKSPACE  ?= $(CURDIR)
+
+.PHONY: help
+help: ## Show this help message
+	@awk 'BEGIN {FS = ":.*##"; printf "Targets:\n"} /^[a-zA-Z_-]+:.*##/ { printf "  %-20s %s\n", $$1, $$2 }' $(MAKEFILE_LIST)
+
+.PHONY: deploy
+deploy: ## Run a full deploy (build + up + nginx + healthcheck)
+	$(DEPLOY)
+
+.PHONY: deploy-verbose
+deploy-verbose: ## Deploy with extra logging (PRUNE_IMAGES=0, longer healthcheck)
+	PRUNE_IMAGES=0 HEALTHCHECK_TIMEOUT=120 $(DEPLOY)
+
+.PHONY: health
+health: ## Run a one-shot health check against the running stack
+	WORKSPACE=$(WORKSPACE) $(HEALTH)
+
+.PHONY: health-nginx
+health-nginx: ## Health check including the nginx-fronted URL
+	WORKSPACE=$(WORKSPACE) $(HEALTH) --nginx
+
+.PHONY: status
+status: ## Show current prod ports and running containers
+	@echo "PostgREST port:  $$(cat .postgrest-port 2>/dev/null || echo none)"
+	@echo "Next.js port:    $$(cat .nextjs-port 2>/dev/null || echo none)"
+	@cd deploy && docker compose -p prod-app ps
+
+.PHONY: logs
+logs: ## Tail deploy.log
+	tail -n 200 -f deploy.log
+
+.PHONY: down
+down: ## Stop the production stack (without redeploying)
+	cd deploy && docker compose -p prod-app down --remove-orphans
+
+.PHONY: rollback
+rollback: ## Restart the previous stack (the one whose ports are still on disk)
+	@if [[ ! -f .postgrest-port ]]; then echo "no .postgrest-port to roll back to"; exit 1; fi
+	cd deploy && \
+	  POSTGREST_HOST_PORT=$$(cat ../.postgrest-port) \
+	  NEXTJS_HOST_PORT=$$(cat ../.nextjs-port) \
+	  docker compose -p prod-app --env-file ../.env.production up -d
@@ -0,0 +1,429 @@
+#!/usr/bin/env bash
+# =============================================================================
+# deploy.sh — Idempotent PostgREST + Next.js production deploy
+# =============================================================================
+#
+# Self-hosted single-server deploy. Triggered manually, by Gitea webhook, or
+# by a Gitea Actions runner after a push to `main` (or `gitea-sync`).
+#
+# What it does, in order:
+#   1. Acquires an exclusive flock (concurrent deploys die loudly).
+#   2. CLEANUP: stops the dev stack on :3001 and the previous prod stack
+#      (port read from .postgrest-port / .nextjs-port).
+#   3. PORT_SELECTION: picks the lowest free port in [3011..30200] for
+#      PostgREST, then the next free one for the Next.js frontend.
+#   4. BUILD: runs `npm run build` with NEXT_PUBLIC_API_URL exported so it
+#      gets inlined into the client bundle.
+#   5. DEPLOY: writes the chosen ports to .env.production, brings the
+#      compose stack up.
+#   6. NGINX: renders the nginx config from a template (with the current
+#      ports), `nginx -t`s it, and reloads the host systemd nginx.
+#   7. HEALTHCHECK: curls the new stack; if anything is down, rolls back.
+#   8. IMAGE_PRUNE: optional, removes dangling images on success.
+#
+# Files written to the workspace root:
+#   .postgrest-port          current PostgREST host port (atomic)
+#   .nextjs-port             current Next.js host port (atomic)
+#   .env.production          rendered env fed to docker compose
+#   .deploy.lock             flock target
+#   deploy.log               append-only log
+# =============================================================================
+
+set -Eeuo pipefail
+IFS=$'\n\t'
+
+# -----------------------------------------------------------------------------
+# Configurable variables (override via environment before invoking)
+# -----------------------------------------------------------------------------
+WORKSPACE="${WORKSPACE:-$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)}"
+COMPOSE_DIR="${COMPOSE_DIR:-${WORKSPACE}/deploy}"
+COMPOSE_FILE="${COMPOSE_FILE:-${COMPOSE_DIR}/docker-compose.yml}"
+NGINX_TEMPLATE="${NGINX_TEMPLATE:-${COMPOSE_DIR}/nginx.conf.template}"
+NGINX_RENDERED="${NGINX_RENDERED:-/etc/nginx/sites-available/prod-app.conf}"
+NGINX_LINK="${NGINX_LINK:-/etc/nginx/sites-enabled/prod-app.conf}"
+NGINX_OWNER="${NGINX_OWNER:-www-data:www-data}"
+
+PROJECT_NAME="${PROJECT_NAME:-prod-app}"
+POSTGREST_PORT_FILE="${POSTGREST_PORT_FILE:-${WORKSPACE}/.postgrest-port}"
+NEXTJS_PORT_FILE="${NEXTJS_PORT_FILE:-${WORKSPACE}/.nextjs-port}"
+ENV_FILE="${ENV_FILE:-${WORKSPACE}/.env.production}"
+LOCK_FILE="${LOCK_FILE:-${WORKSPACE}/.deploy.lock}"
+LOG_FILE="${LOG_FILE:-${WORKSPACE}/deploy.log}"
+
+DEV_PORT="${DEV_PORT:-3001}"
+PORT_RANGE_START="${PORT_RANGE_START:-3011}"
+PORT_RANGE_END="${PORT_RANGE_END:-30200}"
+HEALTHCHECK_TIMEOUT="${HEALTHCHECK_TIMEOUT:-60}"   # seconds total
+HEALTHCHECK_INTERVAL="${HEALTHCHECK_INTERVAL:-2}"  # seconds between tries
+
+# Image pruning (set PRUNE_IMAGES=0 to skip)
+PRUNE_IMAGES="${PRUNE_IMAGES:-1}"
+
+# Optional: pin the public URL the browser uses. If empty, we default to
+# http://localhost:${POSTGREST_HOST_PORT}. For production with a real domain
+# and nginx in front, set e.g. NEXT_PUBLIC_API_URL=https://app.example.com/api
+NEXT_PUBLIC_API_URL="${NEXT_PUBLIC_API_URL:-}"
+
+# -----------------------------------------------------------------------------
+# Logging — every line is timestamped, tee'd to stdout AND the log file.
+# We replace the shell's fd 1/2 with a tee so any tool that prints (npm, docker,
+# curl) lands in both places automatically.
+# -----------------------------------------------------------------------------
+mkdir -p "$(dirname "$LOG_FILE")"
+exec > >(tee -a "$LOG_FILE") 2>&1
+
+ts()   { date '+%Y-%m-%d %H:%M:%S'; }
+log()  { printf '[%s] %s\n' "$(ts)" "$*"; }
+hr()   { printf '%s\n' '----------------------------------------------------------------'; }
+section() { hr; log "== $* =="; hr; }
+
+# Trap so we always release the lock and surface a useful message.
+on_exit() {
+  local exit_code=$?
+  if (( exit_code != 0 )); then
+    log "DEPLOY FAILED with exit code ${exit_code}"
+    log "See ${LOG_FILE} for full output. Rollback hints:"
+    log "  - Previous port was: ${PREVIOUS_POSTGREST_PORT:-<unknown>}"
+    log "  - Current .postgrest-port value: $(read_port_file "$POSTGREST_PORT_FILE" || echo '<none>')"
+    log "  - To restart the old stack manually:"
+    log "      POSTGREST_HOST_PORT=${PREVIOUS_POSTGREST_PORT:-3011} \\"
+    log "      NEXTJS_HOST_PORT=${PREVIOUS_NEXTJS_PORT:-3012} \\"
+    log "      docker compose -p ${PROJECT_NAME} --env-file ${ENV_FILE} up -d"
+  else
+    log "DEPLOY OK — PostgREST on :${NEW_POSTGREST_PORT}, Next.js on :${NEW_NEXTJS_PORT}"
+  fi
+  # flock on fd 9 releases automatically when the script exits.
+}
+trap on_exit EXIT
+
+# -----------------------------------------------------------------------------
+# Helpers
+# -----------------------------------------------------------------------------
+read_port_file() {
+  # Echo the port in $1, or empty string if missing/garbage.
+  local f="$1"
+  [[ -f "$f" ]] || return 1
+  local v
+  v=$(tr -d '[:space:]' < "$f" 2>/dev/null || true)
+  [[ "$v" =~ ^[0-9]+$ ]] || return 1
+  printf '%s' "$v"
+}
+
+render_template() {
+  # Portable envsubst: replaces $VAR and ${VAR} references in stdin with
+  # values from the current environment. Only the variable names given as
+  # args are expanded (matches `envsubst` behavior). If real envsubst is
+  # available we use it for speed.
+  local vars="$1"
+  if command -v envsubst >/dev/null 2>&1; then
+    envsubst "$vars"
+  else
+    # Build a sed expression like: s/\${VAR}/$VAR/g; s/\bVAR\b/$VAR/g
+    local sed_expr=()
+    for v in $vars; do
+      v="${v#\$}"
+      v="${v#\{}"
+      v="${v%\}}"
+      sed_expr+=( -e "s|\${${v}}|${!v:-}|g" )
+      sed_expr+=( -e "s|\$${v}\b|${!v:-}|g" )
+    done
+    sed "${sed_expr[@]}"
+  fi
+}
+
+is_listening() {
+  # Returns 0 if port $1 has a TCP listener (v4 or v6) on this host.
+  local port="$1"
+  ss -tlnH 2>/dev/null | awk '{print $4}' | grep -Eq "(^|:)${port}$"
+}
+
+next_free_port() {
+  # Walk PORT_RANGE_START..PORT_RANGE_END and return the first port nobody
+  # is listening on. Returns 1 if none are free.
+  local p
+  for (( p = PORT_RANGE_START; p <= PORT_RANGE_END; p++ )); do
+    if ! is_listening "$p"; then
+      printf '%s' "$p"
+      return 0
+    fi
+  done
+  return 1
+}
+
+atomic_write() {
+  # Write stdin to $1 atomically: write to temp, fsync, rename. This is
+  # what lets us use .postgrest-port as a single source of truth — readers
+  # always see either the old value or the new value, never a half-written one.
+  local target="$1"
+  local tmp
+  tmp=$(mktemp "${target}.tmp.XXXXXX")
+  cat > "$tmp"
+  sync
+  mv -f "$tmp" "$target"
+}
+
+free_port() {
+  # Try several strategies to free a port:
+  #   1. docker compose down for our project (idempotent)
+  #   2. brute-force kill of any process bound to the port
+  local port="$1" label="$2"
+  if [[ -z "$port" ]]; then return 0; fi
+  log "  ${label} port ${port}: stopping project '${PROJECT_NAME}' (if up)"
+  ( cd "$COMPOSE_DIR" && docker compose -p "$PROJECT_NAME" down --remove-orphans --timeout 10 ) \
+    >/dev/null 2>&1 || true
+
+  if is_listening "$port"; then
+    log "  ${label} port ${port}: still listening, attempting pkill"
+    # fuser prints PIDs holding the port; xargs kills them.
+    local pids
+    pids=$(fuser -n tcp "$port" 2>/dev/null | tr -d '[:space:]' || true)
+    if [[ -n "$pids" ]]; then
+      # shellcheck disable=SC2086
+      kill $pids 2>/dev/null || true
+      sleep 1
+      pids=$(fuser -n tcp "$port" 2>/dev/null | tr -d '[:space:]' || true)
+      [[ -n "$pids" ]] && kill -9 $pids 2>/dev/null || true
+    fi
+  fi
+  if is_listening "$port"; then
+    log "  ${label} port ${port}: WARNING — still in use after cleanup"
+    return 1
+  fi
+  log "  ${label} port ${port}: free"
+  return 0
+}
+
+healthcheck() {
+  # Hit $1 (URL) until it returns 2xx within HEALTHCHECK_TIMEOUT seconds.
+  local url="$1" label="$2" elapsed=0
+  log "  ${label}: ${url}"
+  while (( elapsed < HEALTHCHECK_TIMEOUT )); do
+    if curl -fsS --max-time 5 -o /dev/null "$url"; then
+      log "  ${label}: OK (after ${elapsed}s)"
+      return 0
+    fi
+    sleep "$HEALTHCHECK_INTERVAL"
+    elapsed=$(( elapsed + HEALTHCHECK_INTERVAL ))
+  done
+  log "  ${label}: FAILED after ${HEALTHCHECK_TIMEOUT}s"
+  return 1
+}
+
+# -----------------------------------------------------------------------------
+# Lock — refuse to run if another deploy is in flight.
+# -----------------------------------------------------------------------------
+section "LOCK"
+exec 9>"$LOCK_FILE"
+if ! flock -n 9; then
+  log "Another deploy holds ${LOCK_FILE}. Exiting."
+  exit 1
+fi
+log "Acquired exclusive lock on ${LOCK_FILE}"
+
+# -----------------------------------------------------------------------------
+# 0. Banner
+# -----------------------------------------------------------------------------
+section "DEPLOY START"
+log "Workspace:    ${WORKSPACE}"
+log "Project:      ${PROJECT_NAME}"
+log "Compose:      ${COMPOSE_FILE}"
+log "Nginx tpl:    ${NGINX_TEMPLATE}"
+log "Port range:   ${PORT_RANGE_START}..${PORT_RANGE_END}"
+log "Caller:       ${USER:-<unknown>}@$(hostname)"
+
+# -----------------------------------------------------------------------------
+# 1. CLEANUP — port 3001 (dev) and the previous prod ports.
+# -----------------------------------------------------------------------------
+section "CLEANUP"
+
+free_port "$DEV_PORT" "dev"
+PREVIOUS_POSTGREST_PORT=$(read_port_file "$POSTGREST_PORT_FILE" || true)
+PREVIOUS_NEXTJS_PORT=$(read_port_file "$NEXTJS_PORT_FILE" || true)
+log "Previous prod ports: PostgREST=${PREVIOUS_POSTGREST_PORT:-<none>} Next.js=${PREVIOUS_NEXTJS_PORT:-<none>}"
+
+# Stale-port guard: if the file points to a port that is NOT in our standard
+# range, or to a port that nothing is listening on anymore, we still tear
+# down the project (cheap) but we don't try to free the port itself —
+# someone else might be using it.
+free_port "${PREVIOUS_POSTGREST_PORT:-}" "prev-postgrest"
+free_port "${PREVIOUS_NEXTJS_PORT:-}"   "prev-nextjs"
+
+# -----------------------------------------------------------------------------
+# 2. PORT_SELECTION — find the two lowest free ports.
+# -----------------------------------------------------------------------------
+section "PORT_SELECTION"
+
+NEW_POSTGREST_PORT=$(next_free_port) || {
+  log "No free port in [${PORT_RANGE_START}..${PORT_RANGE_END}]. Bailing out."
+  exit 2
+}
+log "PostgREST: ${NEW_POSTGREST_PORT}"
+
+# Re-check after allocation, since we want distinct ports for both services.
+NEW_NEXTJS_PORT=""
+for (( p = PORT_RANGE_START; p <= PORT_RANGE_END; p++ )); do
+  if (( p == NEW_POSTGREST_PORT )); then continue; fi
+  if ! is_listening "$p"; then NEW_NEXTJS_PORT="$p"; break; fi
+done
+if [[ -z "$NEW_NEXTJS_PORT" ]]; then
+  log "No free port for Next.js after allocating ${NEW_POSTGREST_PORT}. Bailing out."
+  exit 2
+fi
+log "Next.js:   ${NEW_NEXTJS_PORT}"
+
+# -----------------------------------------------------------------------------
+# 3. BUILD — Next.js, with NEXT_PUBLIC_API_URL inlined into the client bundle.
+# -----------------------------------------------------------------------------
+section "BUILD"
+
+cd "$WORKSPACE"
+
+# Default the public API URL the browser will see.
+if [[ -z "$NEXT_PUBLIC_API_URL" ]]; then
+  NEXT_PUBLIC_API_URL="http://localhost:${NEW_POSTGREST_PORT}"
+fi
+log "NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}"
+
+# Node-only check: don't try to build if there's no package.json.
+if [[ -f package.json ]]; then
+  # Make sure the deps are present (idempotent — npm ci is a no-op when locked).
+  if [[ -f package-lock.json ]]; then
+    log "npm ci (locked install)"
+    npm ci --no-audit --no-fund
+  else
+    log "npm install (no lockfile present — consider committing package-lock.json)"
+    npm install --no-audit --no-fund
+  fi
+  log "npm run build"
+  NEXT_PUBLIC_API_URL="$NEXT_PUBLIC_API_URL" \
+  POSTGREST_HOST_PORT="$NEW_POSTGREST_PORT" \
+  NEXTJS_HOST_PORT="$NEW_NEXTJS_PORT" \
+    npm run build
+else
+  log "No package.json in ${WORKSPACE} — skipping build step."
+fi
+
+# -----------------------------------------------------------------------------
+# 4. ENV FILE — render .env.production for the running containers.
+# -----------------------------------------------------------------------------
+section "ENV"
+
+# Preserve any pre-existing secrets in .env.production. We only own the lines
+# we write; everything else is left alone. (The simplest sane strategy.)
+SECRETS_FILE=""
+if [[ -f "$ENV_FILE" ]]; then
+  SECRETS_FILE=$(mktemp)
+  # Drop any lines we manage; keep the rest verbatim.
+  grep -v -E '^(POSTGREST_HOST_PORT|NEXTJS_HOST_PORT|NEXT_PUBLIC_API_URL)=' \
+    "$ENV_FILE" > "$SECRETS_FILE" || true
+fi
+
+{
+  printf '# Generated by deploy.sh on %s — safe to edit, lines below are managed\n' "$(ts)"
+  printf 'POSTGREST_HOST_PORT=%s\n' "$NEW_POSTGREST_PORT"
+  printf 'NEXTJS_HOST_PORT=%s\n'     "$NEW_NEXTJS_PORT"
+  printf 'NEXT_PUBLIC_API_URL=%q\n'  "$NEXT_PUBLIC_API_URL"
+  if [[ -n "$SECRETS_FILE" ]]; then
+    cat "$SECRETS_FILE"
+    rm -f "$SECRETS_FILE"
+  fi
+} > "${ENV_FILE}.new"
+
+mv -f "${ENV_FILE}.new" "$ENV_FILE"
+chmod 600 "$ENV_FILE"
+log "Wrote ${ENV_FILE}"
+
+# -----------------------------------------------------------------------------
+# 5. DEPLOY — bring the stack up.
+# -----------------------------------------------------------------------------
+section "DEPLOY"
+
+cd "$COMPOSE_DIR"
+log "docker compose -p ${PROJECT_NAME} up -d --build"
+docker compose -p "$PROJECT_NAME" --env-file "$ENV_FILE" up -d --build
+
+# -----------------------------------------------------------------------------
+# 6. NGINX — render config from template, test, reload.
+# -----------------------------------------------------------------------------
+section "NGINX"
+
+if [[ -f "$NGINX_TEMPLATE" ]]; then
+  POSTGREST_HOST_PORT="$NEW_POSTGREST_PORT" \
+  NEXTJS_HOST_PORT="$NEW_NEXTJS_PORT" \
+  NEXT_PUBLIC_API_URL="$NEXT_PUBLIC_API_URL" \
+    render_template '${POSTGREST_HOST_PORT} ${NEXTJS_HOST_PORT} ${NEXT_PUBLIC_API_URL}' \
+      < "$NGINX_TEMPLATE" > "$NGINX_RENDERED"
+
+  log "Rendered: ${NGINX_RENDERED}"
+  chown "$NGINX_OWNER" "$NGINX_RENDERED" 2>/dev/null || true
+  chmod 644 "$NGINX_RENDERED"
+
+  # Wire it into sites-enabled if not already linked.
+  if [[ ! -L "$NGINX_LINK" && ! -e "$NGINX_LINK" ]]; then
+    log "Enabling site: ${NGINX_LINK} -> ${NGINX_RENDERED}"
+    ln -s "$NGINX_RENDERED" "$NGINX_LINK"
+  fi
+
+  log "nginx -t"
+  nginx -t
+  log "systemctl reload nginx"
+  systemctl reload nginx
+else
+  log "No nginx template at ${NGINX_TEMPLATE} — skipping reverse proxy step."
+fi
+
+# -----------------------------------------------------------------------------
+# 7. HEALTHCHECK — direct + via nginx (when applicable).
+# -----------------------------------------------------------------------------
+section "HEALTHCHECK"
+
+# Direct checks (bypass nginx, catch compose issues)
+healthcheck "http://127.0.0.1:${NEW_POSTGREST_PORT}/" "postgrest-direct" || ROLLBACK=1
+healthcheck "http://127.0.0.1:${NEW_NEXTJS_PORT}/"     "nextjs-direct"   || ROLLBACK=1
+
+# nginx-fronted check (only meaningful if nginx template exists)
+if [[ -f "$NGINX_TEMPLATE" && "${ROLLBACK:-0}" != "1" ]]; then
+  healthcheck "http://127.0.0.1/" "nginx-front" || ROLLBACK=1
+fi
+
+if [[ "${ROLLBACK:-0}" == "1" ]]; then
+  log "HEALTHCHECK FAILED — rolling back."
+  log "Tearing down the new stack on :${NEW_POSTGREST_PORT} / :${NEW_NEXTJS_PORT}"
+  docker compose -p "$PROJECT_NAME" --env-file "$ENV_FILE" down --remove-orphans --timeout 10 || true
+
+  # If we had a previous port file, the old one is still on disk (we wrote
+  # the new one to .new and only mv'd on success... but we DID mv already,
+  # so re-write the old value).
+  if [[ -n "${PREVIOUS_POSTGREST_PORT:-}" ]]; then
+    printf '%s\n' "$PREVIOUS_POSTGREST_PORT" | atomic_write "$POSTGREST_PORT_FILE"
+  else
+    rm -f "$POSTGREST_PORT_FILE"
+  fi
+  if [[ -n "${PREVIOUS_NEXTJS_PORT:-}" ]]; then
+    printf '%s\n' "$PREVIOUS_NEXTJS_PORT" | atomic_write "$NEXTJS_PORT_FILE"
+  else
+    rm -f "$NEXTJS_PORT_FILE"
+  fi
+  exit 3
+fi
+
+# -----------------------------------------------------------------------------
+# 8. PERSIST — commit the chosen ports as the new single source of truth.
+#    (Done AFTER healthcheck so a failed deploy doesn't clobber the old one.)
+# -----------------------------------------------------------------------------
+section "PERSIST"
+printf '%s\n' "$NEW_POSTGREST_PORT" | atomic_write "$POSTGREST_PORT_FILE"
+printf '%s\n' "$NEW_NEXTJS_PORT"    | atomic_write "$NEXTJS_PORT_FILE"
+log ".postgrest-port = ${NEW_POSTGREST_PORT}"
+log ".nextjs-port    = ${NEW_NEXTJS_PORT}"
+
+# -----------------------------------------------------------------------------
+# 9. IMAGE_PRUNE — optional housekeeping.
+# -----------------------------------------------------------------------------
+if [[ "$PRUNE_IMAGES" == "1" ]]; then
+  section "IMAGE_PRUNE"
+  docker image prune -f
+fi
+
+section "DONE"
+exit 0
@@ -0,0 +1,70 @@
+# =============================================================================
+# docker-compose.yml — production stack consumed by deploy.sh
+# =============================================================================
+#
+# The host-side ports (POSTGREST_HOST_PORT, NEXTJS_HOST_PORT) are written by
+# deploy.sh into .env.production. We interpolate from there with ${VAR:-3011}
+# so a manual `docker compose up` without the deploy script still works.
+#
+# Note on networking: the Next.js container calls PostgREST on
+# `host.docker.internal:POSTGREST_HOST_PORT` so the inlined
+# NEXT_PUBLIC_API_URL (a localhost URL, per the deploy contract) resolves
+# correctly. On Linux you may need to add
+#   extra_hosts:
+#     - "host.docker.internal:host-gateway"
+# which is included below for that reason.
+# =============================================================================
+
+name: prod-app  # default project name; deploy.sh overrides with -p
+
+services:
+  postgrest:
+    image: postgrest/postgrest:latest
+    container_name: prod-app-postgrest
+    restart: unless-stopped
+    # The host port is dynamic. The container always listens on 3000.
+    ports:
+      - "${POSTGREST_HOST_PORT:-3011}:3000"
+    environment:
+      PGRST_DB_URI: ${PGRST_DB_URI}
+      PGRST_DB_ANON_ROLE: ${PGRST_DB_ANON_ROLE:-anon}
+      PGRST_DB_SCHEMA: ${PGRST_DB_SCHEMA:-public}
+      PGRST_SERVER_PORT: 3000
+      # Optional: tighten CORS for your real domain
+      PGRST_DB_TXN_END: "commit-allow-overwrite"
+    # Healthcheck lets `docker compose ps` show healthy state.
+    healthcheck:
+      test: ["CMD", "wget", "-qO-", "http://127.0.0.1:3000/"]
+      interval: 10s
+      timeout: 3s
+      retries: 6
+
+  nextjs:
+    # Build context is the workspace root (one level up from this file).
+    build:
+      context: ..
+      dockerfile: deploy/Dockerfile.nextjs
+    container_name: prod-app-nextjs
+    restart: unless-stopped
+    ports:
+      - "${NEXTJS_HOST_PORT:-3012}:3000"
+    environment:
+      # Runtime vars — these can change without rebuilding. NEXT_PUBLIC_*
+      # is also exported here for completeness, but the BROWSER's view of
+      # NEXT_PUBLIC_API_URL is baked in at build time (see Dockerfile).
+      NODE_ENV: production
+      PORT: 3000
+      NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL}
+    env_file:
+      - ../.env.production   # server-side secrets read at runtime
+    extra_hosts:
+      # Lets the container reach the host on the dynamically allocated port.
+      - "host.docker.internal:host-gateway"
+    depends_on:
+      postgrest:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD", "wget", "-qO-", "http://127.0.0.1:3000/api/health"]
+      interval: 10s
+      timeout: 3s
+      retries: 6
@@ -0,0 +1,54 @@
+#!/usr/bin/env bash
+# =============================================================================
+# healthcheck.sh — standalone, callable from cron / monitoring
+# =============================================================================
+#
+# Reads the current prod ports from .postgrest-port / .nextjs-port and curls
+# each service. Exit code is the count of failed checks (0 = all healthy).
+#
+# Usage:
+#   ./healthcheck.sh
+#   ./healthcheck.sh --nginx      # also check the fronted URL
+#   WORKSPACE=/srv/app ./healthcheck.sh
+# =============================================================================
+
+set -Eeuo pipefail
+IFS=$'\n\t'
+
+WORKSPACE="${WORKSPACE:-$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)}"
+POSTGREST_PORT_FILE="${POSTGREST_PORT_FILE:-${WORKSPACE}/.postgrest-port}"
+NEXTJS_PORT_FILE="${NEXTJS_PORT_FILE:-${WORKSPACE}/.nextjs-port}"
+TIMEOUT="${HEALTHCHECK_TIMEOUT:-5}"
+
+failures=0
+
+check() {
+  local label="$1" url="$2"
+  if curl -fsS --max-time "$TIMEOUT" -o /dev/null "$url"; then
+    printf '  [ OK ] %-20s %s\n' "$label" "$url"
+  else
+    printf '  [FAIL] %-20s %s\n' "$label" "$url"
+    failures=$(( failures + 1 ))
+  fi
+}
+
+pgrest_port=$(tr -d '[:space:]' < "$POSTGREST_PORT_FILE" 2>/dev/null || echo "")
+next_port=$(tr -d '[:space:]' < "$NEXTJS_PORT_FILE" 2>/dev/null || echo "")
+
+if [[ -n "$pgrest_port" ]]; then
+  check "postgrest" "http://127.0.0.1:${pgrest_port}/"
+else
+  printf '  [SKIP] postgrest          (no .postgrest-port)\n'
+fi
+
+if [[ -n "$next_port" ]]; then
+  check "nextjs"    "http://127.0.0.1:${next_port}/"
+else
+  printf '  [SKIP] nextjs             (no .nextjs-port)\n'
+fi
+
+if [[ "${1:-}" == "--nginx" ]]; then
+  check "nginx" "http://127.0.0.1/"
+fi
+
+exit "$failures"
@@ -0,0 +1,89 @@
+# =============================================================================
+# nginx.conf.template — rendered by deploy.sh on every deploy
+# =============================================================================
+#
+# Variables substituted by `envsubst`:
+#   ${POSTGREST_HOST_PORT}  dynamic host port of the PostgREST container
+#   ${NEXTJS_HOST_PORT}     dynamic host port of the Next.js container
+#   ${NEXT_PUBLIC_API_URL}  (informational only — used in comment header)
+#
+# Layout:
+#   /api/*  -> http://127.0.0.1:${POSTGREST_HOST_PORT}
+#   /*      -> http://127.0.0.1:${NEXTJS_HOST_PORT}
+#
+# Tested against nginx >= 1.18 (Debian 11 / Ubuntu 22.04). Adjust ssl_*
+# lines if you don't have a cert yet — deploy.sh only tests/renders, the
+# operator decides whether to terminate TLS here.
+# =============================================================================
+
+# --- upstream definitions ---------------------------------------------------
+upstream postgrest_upstream {
+    server 127.0.0.1:${POSTGREST_HOST_PORT};
+    keepalive 16;
+}
+
+upstream nextjs_upstream {
+    server 127.0.0.1:${NEXTJS_HOST_PORT};
+    keepalive 16;
+}
+
+# --- HTTP -> HTTPS upgrade (optional; remove if you only run on LAN) --------
+server {
+    listen 80;
+    listen [::]:80;
+    server_name _;
+
+    # ACME http-01 challenge needs to be served on port 80.
+    location /.well-known/acme-challenge/ {
+        root /var/www/letsencrypt;
+    }
+
+    # Redirect everything else to HTTPS. Comment out for plain-HTTP dev.
+    location / {
+        return 301 https://$host$request_uri;
+    }
+}
+
+# --- main server block ------------------------------------------------------
+server {
+    listen 443 ssl;
+    listen [::]:443 ssl;
+    http2 on;
+    server_name _;
+
+    # --- TLS (uncomment + adjust after you obtain a cert) ------------------
+    # ssl_certificate     /etc/letsencrypt/live/YOUR_DOMAIN/fullchain.pem;
+    # ssl_certificate_key /etc/letsencrypt/live/YOUR_DOMAIN/privkey.pem;
+    # ssl_protocols       TLSv1.2 TLSv1.3;
+    # ssl_ciphers         HIGH:!aNULL:!MD5;
+
+    # --- sensible defaults ------------------------------------------------
+    client_max_body_size 25m;
+    proxy_http_version 1.1;
+    proxy_set_header   Host              $host;
+    proxy_set_header   X-Real-IP         $remote_addr;
+    proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
+    proxy_set_header   X-Forwarded-Proto $scheme;
+    proxy_set_header   X-Forwarded-Host  $host;
+    proxy_set_header   Connection        "";
+
+    # --- API: /api/* -> PostgREST ----------------------------------------
+    location /api/ {
+        proxy_pass http://postgrest_upstream;
+        proxy_read_timeout 60s;
+        proxy_send_timeout 60s;
+    }
+
+    # PostgREST exposes its OpenAPI spec at the root of the API; expose it
+    # under a stable URL too.
+    location = /api {
+        proxy_pass http://postgrest_upstream;
+    }
+
+    # --- everything else -> Next.js --------------------------------------
+    location / {
+        proxy_pass http://nextjs_upstream;
+        proxy_read_timeout 120s;
+        proxy_send_timeout 120s;
+    }
+}
@@ -1,83 +0,0 @@
-services:
-  db:
-    image: postgres:16-alpine
-    container_name: route_commerce_db
-    restart: unless-stopped
-    env_file:
-      - .env
-    environment:
-      POSTGRES_USER: ${POSTGRES_USER}
-      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
-      POSTGRES_DB: ${POSTGRES_DB}
-    volumes:
-      - db_data:/var/lib/postgresql/data
-    ports:
-      - "127.0.0.1:5432:5432"
-    healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB}"]
-      interval: 5s
-      timeout: 5s
-      retries: 5
-      start_period: 10s
-
-  postgrest:
-    image: postgrest/postgrest:v12.2.3
-    container_name: route_commerce_postgrest
-    restart: unless-stopped
-    depends_on:
-      db:
-        condition: service_healthy
-    environment:
-      PGRST_DB_URI: postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@db:5432/${POSTGRES_DB}
-      PGRST_DB_SCHEMA: public
-      PGRST_DB_ANON_ROLE: ${POSTGRES_USER}
-      PGRST_SERVER_PORT: 3001
-      PGRST_SERVER_HOST: 0.0.0.0
-      PGRST_OPENAPI_MODE: disabled
-      PGRST_DB_EXTRA_SEARCH_PATH: public,extensions
-    ports:
-      - "127.0.0.1:3001:3001"
-
-  minio:
-    image: minio/minio:latest
-    container_name: route_commerce_minio
-    restart: unless-stopped
-    env_file:
-      - .env
-    environment:
-      MINIO_ROOT_USER: ${MINIO_ROOT_USER}
-      MINIO_ROOT_PASSWORD: ${MINIO_ROOT_PASSWORD}
-    command: server /data --console-address ":9001"
-    volumes:
-      - minio_data:/data
-    ports:
-      - "127.0.0.1:9000:9000"
-      - "127.0.0.1:9001:9001"
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:9000/minio/health/live"]
-      interval: 5s
-      timeout: 5s
-      retries: 5
-
-  minio_init:
-    image: minio/mc:latest
-    depends_on:
-      minio:
-        condition: service_healthy
-    env_file:
-      - .env
-    entrypoint: ["/bin/sh", "-c"]
-    command:
-      - |
-        mc alias set local http://minio:9000 $${MINIO_ROOT_USER} $${MINIO_ROOT_PASSWORD}
-        for b in brand-logos product-images contacts-imports videos water-photos; do
-          mc mb --ignore-existing local/$${b}
-          mc anonymous set download local/$${b}
-        done
-    profiles: ["init"]
-
-volumes:
-  db_data:
-    driver: local
-  minio_data:
-    driver: local
@@ -1,205 +0,0 @@
-# Supabase Dump & Restore Guide
-
-This guide is the runbook for capturing the real Supabase schema and data
-and restoring it to a local Postgres database. It documents the exact
-steps that worked when the spend cap was removed on 2026-06-05.
-
-## Connection (this works from the dev box)
-
-The Supabase project `wnzkhezyhnfzhkhiflrp` (route-commerce) is hosted in
-**East US (North Virginia)**. The dev box has no IPv6, so we must use
-the **Supavisor pooler** (IPv4 only) — and it's on **`aws-1`**, not `aws-0`.
-
-```bash
-# Working pooler URL (from supabase/.temp/pooler-url)
-postgresql://postgres.wnzkhezyhnfzhkhiflrp:YLKzP9jz2yqop7jr@aws-1-us-east-1.pooler.supabase.com:5432/postgres
-```
-
-The `aws-0-us-east-1.pooler.supabase.com` hostname resolves over IPv4
-but Supavisor returns "tenant/user not found" because the project lives
-on `aws-1`. The correct region number is non-obvious — always check
-`supabase/.temp/pooler-url` for the actual endpoint.
-
-The direct hostname `db.wnzkhezyhnfzhkhiflrp.supabase.co` only resolves
-over IPv6, which is unreachable from this dev box.
-
-## pg_dump version
-
-Supabase runs **PostgreSQL 17.6**. Local pg must be ≥ 17 to dump cleanly.
-The dev box had pg 16 by default — install pg 17 client:
-
-```bash
-echo "deb [signed-by=/usr/share/keyrings/pgdg.gpg] http://apt.postgresql.org/pub/repos/apt/ noble-pgdg main" \
-  | sudo tee /etc/apt/sources.list.d/pgdg.list
-sudo apt-get update
-sudo apt-get install -y --allow-unauthenticated postgresql-client-17
-# Use /usr/lib/postgresql/17/bin/pg_dump explicitly (or update PATH)
-```
-
-## Capture Schema
-
-```bash
-export PGPASSWORD="YLKzP9jz2yqop7jr"
-export PATH="/usr/lib/postgresql/17/bin:$PATH"
-
-mkdir -p supabase/captured
-pg_dump \
-  --host=aws-1-us-east-1.pooler.supabase.com \
-  --port=5432 \
-  --username=postgres.wnzkhezyhnfzhkhiflrp \
-  --dbname=postgres \
-  --schema-only \
-  --no-owner \
-  --no-privileges \
-  --no-acl \
-  --exclude-schema=auth \
-  --exclude-schema=storage \
-  --exclude-schema=realtime \
-  --exclude-schema=supabase_functions \
-  --exclude-schema=graphql \
-  --exclude-schema=graphql_public \
-  --exclude-schema=pgsodium \
-  --exclude-schema=pgsodium_masks \
-  --exclude-schema=extensions \
-  --exclude-schema=pgbouncer \
-  --exclude-schema=supabase_migrations \
-  --exclude-schema=net \
-  --exclude-schema=vault \
-  --file=supabase/captured/captured_schema.sql
-```
-
-Captured schema is ~540KB, 65 tables, 252 functions.
-
-## Capture Data
-
-```bash
-pg_dump \
-  --host=aws-1-us-east-1.pooler.supabase.com \
-  --port=5432 \
-  --username=postgres.wnzkhezyhnfzhkhiflrp \
-  --dbname=postgres \
-  --data-only \
-  --no-owner \
-  --no-privileges \
-  --no-acl \
-  --disable-triggers \
-  --exclude-schema=auth \
-  --exclude-schema=storage \
-  --exclude-schema=realtime \
-  --exclude-schema=supabase_functions \
-  --exclude-schema=graphql \
-  --exclude-schema=graphql_public \
-  --exclude-schema=pgsodium \
-  --exclude-schema=pgsodium_masks \
-  --exclude-schema=extensions \
-  --exclude-schema=pgbouncer \
-  --exclude-schema=supabase_migrations \
-  --exclude-schema=net \
-  --exclude-schema=vault \
-  --file=supabase/captured/captured_data.sql
-```
-
-Captured data is ~130KB for this project's current size.
-
-## Restore to Local DB (PostgreSQL 16)
-
-PostgreSQL 16 doesn't support `transaction_timeout` (added in PG 17) and
-doesn't have the `supabase_vault` extension. Pre-create the stub objects:
-
-```bash
-export PGPASSWORD=routecommerce_dev_password
-psql -U routecommerce -h 127.0.0.1 -d route_commerce <<'SQL'
-DROP SCHEMA public CASCADE;
-CREATE SCHEMA public;
-GRANT ALL ON SCHEMA public TO routecommerce;
-
-- extensions schema (referenced by dump as extensions.uuid_generate_v4())
-CREATE SCHEMA extensions;
-CREATE EXTENSION IF NOT EXISTS "uuid-ossp" SCHEMA extensions;
-CREATE EXTENSION IF NOT EXISTS "pgcrypto" SCHEMA extensions;
-CREATE EXTENSION IF NOT EXISTS "pg_stat_statements" SCHEMA extensions;
-
-- Stub functions in extensions schema (real Supabase has pgcrypto.crypt etc.)
-CREATE OR REPLACE FUNCTION extensions.uuid_generate_v4()
-  RETURNS uuid LANGUAGE sql AS $$ SELECT gen_random_uuid(); $$;
-CREATE OR REPLACE FUNCTION extensions.gen_salt(text)
-  RETURNS text LANGUAGE sql AS $$ SELECT '$2a$06$' || repeat('A', 53); $$;
-CREATE OR REPLACE FUNCTION extensions.crypt(text, text)
-  RETURNS text LANGUAGE sql AS $$ SELECT $1; $$;
-
-GRANT EXECUTE ON ALL FUNCTIONS IN SCHEMA extensions TO routecommerce;
-
-- auth stub (we excluded auth schema from dump, but RLS policies reference auth.uid())
-CREATE SCHEMA IF NOT EXISTS auth;
-CREATE TABLE IF NOT EXISTS auth.users (
-  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-  email TEXT,
-  raw_user_meta_data JSONB,
-  created_at TIMESTAMPTZ DEFAULT now(),
-  updated_at TIMESTAMPTZ DEFAULT now()
-);
-CREATE OR REPLACE FUNCTION auth.uid() RETURNS UUID
-  LANGUAGE sql STABLE AS $$ SELECT NULL::UUID; $$;
-GRANT USAGE ON SCHEMA auth TO routecommerce;
-GRANT ALL ON auth.users TO routecommerce;
-GRANT EXECUTE ON FUNCTION auth.uid() TO routecommerce;
-
-- Drop Supabase-specific publications (we don't have realtime / vault)
-DROP PUBLICATION IF EXISTS supabase_realtime;
-DROP PUBLICATION IF EXISTS supabase_realtime_messages_publication;
-SQL
-```
-
-Strip the PG17-only `SET transaction_timeout` line from the dump:
-
-```bash
-sed -i 's/^SET transaction_timeout = 0;$/-- transaction_timeout requires PG17 (we are on PG16); skipped/' \
-  supabase/captured/captured_schema.sql
-```
-
-Apply schema and data (idempotent — re-runs are safe):
-
-```bash
-psql -U routecommerce -h 127.0.0.1 -d route_commerce -v ON_ERROR_STOP=0 \
-  -f supabase/captured/captured_schema.sql 2>&1 | tail -20
-
-psql -U routecommerce -h 127.0.0.1 -d route_commerce -v ON_ERROR_STOP=0 \
-  -f supabase/captured/captured_data.sql 2>&1 | tail -20
-```
-
-Most errors on re-run are "already exists" — that's expected because the
-dump is idempotent for CREATE statements (we used `IF NOT EXISTS` where
-possible, but pg_dump doesn't add it for everything).
-
-## Verify
-
-```bash
-psql -U routecommerce -h 127.0.0.1 -d route_commerce -c "SELECT count(*) FROM pg_tables WHERE schemaname='public';"
-# Expect: 65
-
-psql -U routecommerce -h 127.0.0.1 -d route_commerce -c "SELECT count(*) FROM pg_proc WHERE pronamespace=(SELECT oid FROM pg_namespace WHERE nspname='public');"
-# Expect: ~250+
-
-psql -U routecommerce -h 127.0.0.1 -d route_commerce -c "SELECT name, slug, created_at FROM brands ORDER BY created_at;"
-# Expect 5 brands: Tuxedo Corn, Indian River Direct, Sunrise Farms, Green Valley Organics, Orchard Fresh
-```
-
-## What Didn't Work (don't try these)
-
-| Approach | Why it failed |
-|---|---|
-| `psql ... db.wnzkhezyhnfzhkhiflrp.supabase.co:5432` | Hostname is IPv6-only, dev box has no IPv6 |
-| `aws-0-us-east-1.pooler.supabase.com` | "tenant/user not found" — wrong region (project is on `aws-1`) |
-| `pg_dump 16.x` against PG 17 server | "server version mismatch" — fatal error |
-| `supabase db dump --linked` | Requires Docker (we don't have it) |
-
-## Notes
-
- The captured data includes 3 test brands (Sunrise, Green Valley, Orchard)
-  created on 2026-06-03 — these were test data the user added during the
-  migration work, not real customers. They can be deleted safely.
- Tuxedo Corn and Indian River Direct are the real production brands.
- The schema dump is committed to git at `supabase/captured/captured_schema.sql.gz`
-  for reproducibility. The data dump is gitignored (regenerate as needed).
- After dump, the local PostgREST needs a schema cache reload — restart
-  the postgrest process or it'll serve stale metadata for ~30 seconds.
@@ -0,0 +1,470 @@
+# Multi-Brand Admin Support
+
+**Date:** 2026-06-04
+**Status:** Draft → Approved
+**Author:** Grok (brainstorming session)
+**Migration file:** `supabase/migrations/204_multi_brand_admin.sql`
+**Follow-up migration (out of scope):** `220_drop_legacy_brand_id.sql`
+
+## Problem
+
+`admin_users.brand_id` is a single `UUID | null`. The platform supports a `platform_admin` role (no brand) and a `brand_admin` role (one brand). There is no representation for an admin who legitimately needs access to 2+ specific brands — e.g., a parent company operating multiple storefronts with shared operations staff.
+
+The current `effectiveBrandId = brandId ?? adminUser.brand_id ?? null` pattern silently does the wrong thing for multi-brand use cases:
+
+- Data model can't represent "Jane is admin for Brand A AND Brand B" — would require two `admin_users` rows (and the auth-user→admin-user join gets messy).
+- No central validation that an admin is acting in a brand they actually have access to.
+- No persistent "current brand" context — every page re-derives it from scratch.
+- No per-brand permission overrides possible (locks in flexibility for the future).
+
+This spec addresses multi-brand tenants / franchises: same staff managing multiple brands under a parent org, where brands are separate for storefront/billing but share operations.
+
+## Goals
+
+- An admin can be associated with multiple brands via a junction table.
+- A persistent "active brand" is stored in a cookie, switchable via UI, and used as the default when no explicit brand is requested.
+- A new `multi_brand_admin` role makes the relationship explicit in the data and the UI.
+- `platform_admin` continues to work unchanged (gets all brands implicitly).
+- Existing single-brand `brand_admin`, `store_employee`, and `staff` users continue to work with zero behavior change.
+- Server actions get a single, central place to resolve and validate the active brand.
+
+## Non-Goals (YAGNI)
+
+- Per-(admin, brand) permission overrides. The user explicitly chose "same perms across all brands."
+- Brand-group / parent-org concept. The junction table makes this possible later, but it's not built now.
+- "Last accessed brand" auto-redirect. The cookie is the source of truth; no extra logic.
+- UI for managing `admin_user_brands` rows. Use Supabase Studio or a follow-up admin UI PR.
+- Dropping the legacy `admin_users.brand_id` column. A follow-up migration `220_drop_legacy_brand_id.sql` will do this after we verify nothing reads it. Out of scope for this spec.
+
+## Approach: Junction Table + Backwards-Compat `brand_id`
+
+Selected from among three options:
+
+| Option | Why not |
+|---|---|
+| A. Junction + keep `brand_id` (selected) | — |
+| B. Junction only, drop `brand_id` | High migration risk; every server action reference must change. |
+| C. `brand_ids UUID[]` on `admin_users` | No FK, awkward reverse lookups, locks out per-brand metadata. |
+
+A is the lowest-risk additive path that solves the problem.
+
+## Data Model
+
+### New table: `admin_user_brands`
+
+```sql
+CREATE TABLE admin_user_brands (
+  admin_user_id UUID NOT NULL REFERENCES admin_users(id) ON DELETE CASCADE,
+  brand_id      UUID NOT NULL REFERENCES brands(id)     ON DELETE CASCADE,
+  added_at      TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+  added_by      UUID REFERENCES admin_users(id),
+  PRIMARY KEY (admin_user_id, brand_id)
+);
+CREATE INDEX admin_user_brands_brand_id_idx ON admin_user_brands(brand_id);
+```
+
+- Composite PK enforces uniqueness.
+- Index on `brand_id` makes "which admins are in Brand X?" queries fast.
+- `added_at` / `added_by` for audit trail.
+- `ON DELETE CASCADE` for both FKs — deleting an admin or brand cleans up the junction.
+
+### New role: `multi_brand_admin`
+
+Added to the `role` CHECK constraint. Functionally equivalent to `brand_admin` permission-wise — same `can_manage_*` flags apply. The role label disambiguates intent in the UI ("this person manages 3 brands" vs "this person manages 1 brand") and in audit logs.
+
+### Updated `AdminUser` type
+
+```ts
+// src/lib/admin-permissions-types.ts
+export type AdminUser = {
+  // ... existing fields
+  brand_id: string | null;    // active brand (one of brand_ids, or null for platform_admin)
+  brand_ids: string[];        // all brands this admin can act in
+  role: "platform_admin" | "brand_admin" | "multi_brand_admin" | "store_employee" | "staff";
+};
+```
+
+### Membership rules
+
+| Role | `brand_id` (active) | `brand_ids` (membership) |
+|---|---|---|
+| `platform_admin` | `null` (or cookie-selected brand) | Implicitly all brands; `brand_ids` populated by `listBrandsForAdmin` querying the `brands` table |
+| `multi_brand_admin` | First/selected brand | 2+ brands from `admin_user_brands` |
+| `brand_admin` | Their single brand | `[that one brand]` |
+| `store_employee` | Their single brand | `[that one brand]` |
+| `staff` | Their single brand | `[that one brand]` |
+
+For `platform_admin`, the application layer short-circuits brand-access checks (`if (adminUser.role === "platform_admin") return ...`). The `brand_ids` field is only used by `listBrandsForAdmin` to render the dropdown options; it is not used for permission gating for `platform_admin`.
+
+### `getAdminUser()` resolution order
+
+1. If `dev_session` cookie set → return dev admin. For `platform_admin` dev: `brand_id: null, brand_ids: []` (resolved against `brands` table by `listBrandsForAdmin`). For `store_employee` dev: `brand_id: <first-real-brand-id>, brand_ids: [<that-id>]` — fetched from the `brands` table so dev store_employee can browse a real brand's data. (If no brands exist, dev store_employee sees `<AdminAccessDenied />` — known limitation.)
+2. If `NEXT_PUBLIC_USE_MOCK_DATA=true` → same as `platform_admin` dev.
+3. Real auth → load `admin_users` row, then JOIN `admin_user_brands` to populate `brand_ids`.
+4. Set `brand_id` from (in order): `active_brand_id` cookie (if in `brand_ids` for non-platform-admin, or always for platform-admin) → `admin_users.brand_id` (if in `brand_ids`) → first of `brand_ids`.
+
+## Server Action Patterns
+
+### New file: `src/lib/brand-scope.ts`
+
+```ts
+import { cookies } from "next/headers";
+import type { AdminUser } from "./admin-permissions-types";
+
+const ACTIVE_BRAND_COOKIE = "active_brand_id";
+
+export async function getActiveBrandId(
+  adminUser: AdminUser,
+  requested?: string | null
+): Promise<string | null> {
+  // Cookie is the source of truth for "what brand am I acting in right now"
+  // for everyone — including platform_admin (who can pin a specific brand
+  // or fall back to null = "all brands").
+  const cookieStore = await cookies();
+  const cookieBrand = cookieStore.get(ACTIVE_BRAND_COOKIE)?.value ?? null;
+
+  if (adminUser.role === "platform_admin") {
+    // requested > cookie > null (all brands)
+    return requested ?? cookieBrand ?? null;
+  }
+
+  // Non-platform-admin: requested (if in brand_ids) > cookie (if in brand_ids) > adminUser.brand_id
+  if (requested) {
+    return adminUser.brand_ids.includes(requested) ? requested : null;
+  }
+  if (cookieBrand && adminUser.brand_ids.includes(cookieBrand)) {
+    return cookieBrand;
+  }
+  return adminUser.brand_id;
+}
+
+export async function setActiveBrandCookie(brandId: string): Promise<void> {
+  const cookieStore = await cookies();
+  cookieStore.set(ACTIVE_BRAND_COOKIE, brandId, {
+    httpOnly: true,
+    sameSite: "lax",
+    path: "/",
+    maxAge: 60 * 60 * 24 * 30, // 30 days
+  });
+}
+
+export async function clearActiveBrandCookie(): Promise<void> {
+  const cookieStore = await cookies();
+  cookieStore.delete(ACTIVE_BRAND_COOKIE);
+}
+
+export function assertBrandAccess(adminUser: AdminUser, brandId: string): void {
+  if (adminUser.role === "platform_admin") return;
+  if (!adminUser.brand_ids.includes(brandId)) {
+    throw new Error("Brand access denied");
+  }
+}
+```
+
+### Server action: set active brand
+
+```ts
+// src/actions/admin/set-active-brand.ts
+"use server";
+import { getAdminUser } from "@/lib/admin-permissions";
+import { setActiveBrandCookie, clearActiveBrandCookie } from "@/lib/brand-scope";
+
+export async function setActiveBrand(brandId: string | null): Promise<{ success: boolean; error?: string }> {
+  const adminUser = await getAdminUser();
+  if (!adminUser) return { success: false, error: "Not authenticated" };
+
+  // null = "All brands" (platform_admin only)
+  if (brandId === null) {
+    if (adminUser.role !== "platform_admin") {
+      return { success: false, error: "Only platform admins can select 'All brands'" };
+    }
+    await clearActiveBrandCookie();
+    return { success: true };
+  }
+
+  if (adminUser.role !== "platform_admin" && !adminUser.brand_ids.includes(brandId)) {
+    return { success: false, error: "No access to that brand" };
+  }
+  await setActiveBrandCookie(brandId);
+  return { success: true };
+}
+```
+
+### New server function: list brands for admin
+
+```ts
+// src/actions/brands.ts
+import { getAdminUser } from "@/lib/admin-permissions";
+import { svcHeaders } from "@/lib/svc-headers";
+
+export async function listBrandsForAdmin(): Promise<
+  { id: string; name: string; slug: string; logo_url: string | null }[]
+> {
+  const adminUser = await getAdminUser();
+  if (!adminUser) return [];
+
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+  const serviceKey = process.env.SUPABASE_SERVICE_ROLE_KEY!;
+
+  if (adminUser.role === "platform_admin") {
+    const res = await fetch(
+      `${supabaseUrl}/rest/v1/brands?select=id,name,slug,logo_url&order=name`,
+      { headers: svcHeaders(serviceKey) }
+    );
+    return res.ok ? await res.json() : [];
+  }
+
+  if (adminUser.brand_ids.length === 0) return [];
+
+  const filter = `id=in.(${adminUser.brand_ids.map((id) => `"${id}"`).join(",")})`;
+  const res = await fetch(
+    `${supabaseUrl}/rest/v1/brands?${filter}&select=id,name,slug,logo_url&order=name`,
+    { headers: svcHeaders(serviceKey) }
+  );
+  return res.ok ? await res.json() : [];
+}
+```
+
+### Server action migration pattern
+
+```ts
+// Before:
+const effectiveBrandId = brandId ?? adminUser.brand_id ?? null;
+
+// After:
+import { getActiveBrandId } from "@/lib/brand-scope";
+
+const activeBrandId = await getActiveBrandId(adminUser, brandId);
+if (!activeBrandId && adminUser.role !== "platform_admin") {
+  return { success: false, error: "Brand access required" };
+}
+const effectiveBrandId = activeBrandId;
+```
+
+This is a mechanical one-line swap in ~30 server actions identified by the grep:
+
+- `src/actions/wholesale.ts` (multiple)
+- `src/actions/products.ts`
+- `src/actions/communications/templates.ts`
+- `src/actions/communications/campaigns.ts`
+- `src/actions/orders/create-admin-order.ts`
+- `src/actions/stops.ts`
+- `src/actions/analytics.ts`
+- `src/actions/square-sync-ui.ts`
+- `src/actions/shipping.ts`
+- `src/actions/payments.ts`
+- `src/actions/ai-import.ts`
+- `src/actions/wholesale-register.ts`
+
+### Page server component pattern
+
+```ts
+// Before (src/app/admin/orders/page.tsx):
+const effectiveBrandId = brandIdParam ?? adminUser.brand_id ?? "";
+
+// After:
+import { getActiveBrandId } from "@/lib/brand-scope";
+
+export default async function AdminOrdersPage() {
+  const adminUser = await getAdminUser();
+  if (!adminUser) return <AdminAccessDenied />;
+
+  const activeBrandId = await getActiveBrandId(adminUser, brandIdParam);
+
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return <AdminAccessDenied />;
+  }
+
+  // ... rest of the page
+}
+```
+
+This applies to every page under `src/app/admin/` — including the existing `/admin/taxes/[brandId]` and `/admin/settings/billing/[brandId]` which already do brand param resolution.
+
+## UI Components
+
+### Brand selector
+
+**Location:** `src/components/admin/AdminHeader.tsx` (the top bar already rendered on every `/admin/*` page).
+
+**Behavior:** A dropdown showing:
+- Brand logo + name (current active brand)
+- Chevron
+- "All brands" option at the top (only for `platform_admin`)
+- List of accessible brands (`adminUser.brand_ids`)
+- Small badge "Multi-brand manager" next to the user's name when `role === "multi_brand_admin"`
+
+**Visibility matrix:**
+
+| Admin | Show dropdown? | Options |
+|---|---|---|
+| `platform_admin` | Yes | "All brands" + list of all brands |
+| `multi_brand_admin` (2+ brands) | Yes | List of their brands |
+| `brand_admin` / `store_employee` / `staff` (1 brand) | No | — |
+| `platform_admin` (dev_session) | Yes | "All brands" + list of all brands (same UX as production) |
+
+**On select:**
+
+```ts
+// src/components/admin/BrandSelector.tsx (client component)
+"use client";
+async function handleSelect(brandId: string | null) {
+  await setActiveBrand(brandId); // null = "All brands"
+  router.refresh();
+}
+```
+
+`router.refresh()` re-runs server components and re-reads the cookie, so all data on the current page reloads in the new brand context. The URL is **not** changed — the cookie is the source of truth for "what brand am I acting in right now."
+
+### URL-level brand params
+
+Keep URL-level brand as-is — URLs are shareable links. The resolution order for the `brandId` param passed to `getActiveBrandId` is:
+
+1. URL `brandId` param (if present)
+2. `active_brand_id` cookie
+3. `adminUser.brand_id` (legacy single brand)
+4. First of `adminUser.brand_ids`
+5. (platform_admin only) `null` → "all brands"
+
+## Migration: `supabase/migrations/204_multi_brand_admin.sql`
+
+```sql
+-- 1. Add multi_brand_admin to role CHECK constraint
+ALTER TABLE admin_users DROP CONSTRAINT IF EXISTS admin_users_role_check;
+ALTER TABLE admin_users ADD CONSTRAINT admin_users_role_check
+  CHECK (role IN ('platform_admin', 'brand_admin', 'multi_brand_admin', 'store_employee', 'staff'));
+
+-- 2. Create junction table
+CREATE TABLE admin_user_brands (
+  admin_user_id UUID NOT NULL REFERENCES admin_users(id) ON DELETE CASCADE,
+  brand_id      UUID NOT NULL REFERENCES brands(id)     ON DELETE CASCADE,
+  added_at      TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+  added_by      UUID REFERENCES admin_users(id),
+  PRIMARY KEY (admin_user_id, brand_id)
+);
+CREATE INDEX admin_user_brands_brand_id_idx ON admin_user_brands(brand_id);
+
+-- 3. Backfill from existing brand_id (single-brand admins)
+INSERT INTO admin_user_brands (admin_user_id, brand_id)
+SELECT id, brand_id FROM admin_users
+WHERE brand_id IS NOT NULL
+ON CONFLICT DO NOTHING;
+
+-- 4. Promote anyone with > 1 brand to multi_brand_admin
+UPDATE admin_users
+SET role = 'multi_brand_admin'
+WHERE role = 'brand_admin'
+  AND id IN (
+    SELECT admin_user_id FROM admin_user_brands
+    GROUP BY admin_user_id HAVING COUNT(*) > 1
+  );
+
+-- 5. New RPCs for adding/removing brand access
+CREATE OR REPLACE FUNCTION add_admin_user_brand(
+  p_admin_user_id UUID, p_brand_id UUID, p_added_by UUID
+) RETURNS void LANGUAGE sql SECURITY DEFINER AS $$
+  INSERT INTO admin_user_brands (admin_user_id, brand_id, added_by)
+  VALUES (p_admin_user_id, p_brand_id, p_added_by)
+  ON CONFLICT DO NOTHING;
+  UPDATE admin_users SET role = 'multi_brand_admin'
+  WHERE id = p_admin_user_id
+    AND role = 'brand_admin'
+    AND (SELECT COUNT(*) FROM admin_user_brands WHERE admin_user_id = p_admin_user_id) > 1;
+$$;
+
+CREATE OR REPLACE FUNCTION remove_admin_user_brand(
+  p_admin_user_id UUID, p_brand_id UUID
+) RETURNS void LANGUAGE sql SECURITY DEFINER AS $$
+  DELETE FROM admin_user_brands
+  WHERE admin_user_id = p_admin_user_id AND brand_id = p_brand_id;
+  UPDATE admin_users SET role = 'brand_admin'
+  WHERE id = p_admin_user_id
+    AND role = 'multi_brand_admin'
+    AND (SELECT COUNT(*) FROM admin_user_brands WHERE admin_user_id = p_admin_user_id) = 1;
+$$;
+```
+
+The `admin_users.brand_id` column is **kept** for backwards compat. A follow-up migration drops it after we verify nothing reads it.
+
+## Error Handling & Security Boundaries
+
+### Three failure modes
+
+1. **Requested brand not in `brand_ids`** (e.g., URL param has a brand the admin doesn't have):
+   - `getActiveBrandId()` returns `null`
+   - Server action returns `{ success: false, error: "Brand access required" }`
+   - Page renders `<AdminAccessDenied />` with: "You don't have access to that brand. [Switch to a brand you have access to]"
+
+2. **Cookie brand no longer in `brand_ids`** (admin's access was revoked while cookie was still set):
+   - `getActiveBrandId()` falls through to `adminUser.brand_id`, then first of `brand_ids`
+   - Silent recovery — no error, no UI flash
+   - The dropped brand just disappears from the dropdown next page load
+
+3. **Platform admin acting on a brand they don't own:**
+   - Platform admin: `brand_ids = ["*"]` (sentinel) — RPCs treat as "all brands"
+   - Server action: never blocks platform admin from any brand
+   - This is intentional — platform admin = superuser
+
+### Validation placement (defense in depth)
+
+- Server action: `getActiveBrandId(adminUser, requested)` validates.
+- Server action: `assertBrandAccess(adminUser, brandIdFromUrl)` validates (separate, for cases where the brandId comes from URL/form/RPC return rather than `getActiveBrandId`).
+- RPC: still trusts `p_brand_id` (SECURITY DEFINER) — application layer is the gate, matching the existing architecture.
+
+### Audit logging (additive)
+
+- `admin_user_brands.added_by` column tracks who added an admin to a brand.
+- Audit log entry on add/remove: out of scope for v1; documented for follow-up.
+
+## Testing
+
+### Unit tests (`vitest` — new dev dependency)
+
+- `src/lib/brand-scope.test.ts`:
+  - `resolveActiveBrandId(platformAdmin, "X")` → `"X"`
+  - `resolveActiveBrandId(brandAdmin, "X")` where X is their brand → `"X"`
+  - `resolveActiveBrandId(brandAdmin, "Y")` where Y is not their brand → `null`
+  - `getActiveBrandId(multiBrandAdmin)` with cookie set to valid brand → that brand
+  - `getActiveBrandId(multiBrandAdmin)` with cookie set to revoked brand → first of `brand_ids`
+  - `assertBrandAccess(...)` throws for non-platform-admin with invalid brand
+  - `setActiveBrand(null)` rejected for non-platform-admin
+  - `setActiveBrand("X")` rejected for admin without X in `brand_ids`
+
+### Integration tests (Playwright — already in repo)
+
+- `tests/admin/multi-brand.spec.ts`:
+  - As `multi_brand_admin`, dropdown shows 2+ brands
+  - Click brand B → URL stays, cookie updates, page data refreshes to brand B
+  - Direct-navigate to `/admin/orders?brand=<other-brand>` for a brand admin returns access denied
+  - As `platform_admin`, "All brands" option is present and works
+  - As `brand_admin` with 1 brand, no dropdown is shown
+
+### Migration smoke test (manual, documented in MEMORY.md)
+
+- Before migration: 5 brand_admins exist, each with 1 brand
+- After migration: 5 rows in `admin_user_brands`, all `role = 'brand_admin'`
+- Create a 6th admin with 2 brands via `add_admin_user_brand` → `role = 'multi_brand_admin'`, 2 rows in junction
+- Remove one of their brands via `remove_admin_user_brand` → `role` demotes to `brand_admin`, 1 row in junction
+
+## Out of Scope (v1)
+
+- Per-(admin, brand) permission overrides
+- Brand-group / parent-org concept
+- "Last accessed brand" auto-redirect
+- UI for managing `admin_user_brands` rows (Supabase Studio works for now)
+- Dropping the legacy `admin_users.brand_id` column (follow-up `220_*` migration)
+- Audit log entries for add/remove (junction's `added_by` column is the seed)
+
+## Implementation Order
+
+1. Migration `204_multi_brand_admin.sql` applied
+2. `src/lib/brand-scope.ts` + unit tests (TDD)
+3. `AdminUser` type updated; `getAdminUser()` returns `brand_ids`
+4. `setActiveBrand` server action + tests
+5. `listBrandsForAdmin` server function + tests
+6. BrandSelector UI component
+7. Wire BrandSelector into AdminHeader
+8. Server action migration (~30 actions) — mechanical one-line swap each
+9. Page server component migration (~10+ pages) — same pattern
+10. Playwright integration tests
+11. Manual smoke test of the migration on dev DB
@@ -1,325 +0,0 @@
-# Supabase → Self-Hosted Migration — Design Spec
-
-**Date:** 2026-06-05
-**Status:** Approved
-**Author:** Brainstorm session with user
-**Target branch:** `selfhost/migrate` (to be created)
-**Source branches:** `crispygoat/self-hosted-postgres` (6 commits) + `crispygoat/feat/better-auth` (1 commit, contains a detailed `plan.md`)
-
-## Overview
-
-Move Route Commerce off Supabase's hosted platform onto a self-hosted stack while preserving all data and behavior. Replace Supabase Auth with `better-auth`, Supabase Storage with MinIO, and Supabase's hosted Postgres with a plain Postgres instance fronted by PostgREST (the same protocol `supabase-js` and `@supabase/ssr` already speak). Consolidate two diverging branches that have been tackling different layers of this migration independently.
-
-## Goals
-
-1. **No data loss.** Full schema + data dump from the live Supabase project, restored on the new self-hosted Postgres.
-2. **No band-aids.** Real self-hosted replacement, not runtime patches that paper over Supabase.
-3. **App behavior unchanged.** All 137 SECURITY DEFINER RPCs, server actions, and client flows keep working with minimal code change.
-4. **Single coherent path.** Merge the two in-flight branches into one, eliminate the divergence.
-5. **Local + remote parity.** `docker compose up` works on the dev box and on the prod server (route.crispygoat.com).
-
-## Non-Goals
-
- Replacing `supabase-js` / `@supabase/ssr` libraries. They speak PostgREST; we keep using them.
- Rewriting the 185 SECURITY DEFINER functions. They stay as-is; brand scoping is already in the function bodies / app layer.
- Changing the Stripe, Resend, Square, or any other non-Supabase integrations.
- Performance tuning of the new stack (separate follow-up).
- Adopting realtime (not used in current code) or Supabase Edge Functions (not used).
-
-## Constraints
-
- **App must keep building** (`npx tsc --noEmit && npm run build`) without Supabase env vars.
- **Mock mode still works** for `NEXT_PUBLIC_USE_MOCK_DATA=true` deployments (demos, Netlify previews).
- **Dev mode bypass** (`dev_session=platform_admin` cookie) must continue to function for local testing.
- **No new external service dependencies** unless explicitly approved (i.e., we are not introducing Vercel Postgres, Neon, etc. — the stack is self-hosted).
- **Migration is reversible**: the Supabase project remains live until cutover is verified.
-
-## Architecture
-
-```
-┌──────────────────────────────────────────────────────────────────────┐
-│  Next.js app (Node, port 3100 via PM2)                                │
-│                                                                       │
-│  ┌────────────┐  ┌────────────┐  ┌──────────────┐  ┌──────────────┐  │
-│  │ supabase-js│  │ better-auth│  │ S3 SDK       │  │ middleware   │  │
-│  │ → PostgREST│  │ (in-proc)  │  │ → MinIO      │  │ → /login     │  │
-│  └─────┬──────┘  └──────┬─────┘  └──────┬───────┘  └──────────────┘  │
-│        │ anon key       │ uses pg.Pool   │ MinIO creds                 │
-└────────┼────────────────┼────────────────┼────────────────────────────┘
-         │                │                │
-         ▼                ▼                ▼
-  ┌────────────┐    ┌────────────┐    ┌────────────┐
-  │ PostgREST  │    │  Postgres  │    │   MinIO    │
-  │  (port     │───▶│ (port 5432)│    │ (port 9000)│
-  │   3001)    │    │            │    │  (S3 API)  │
-  └────────────┘    └────────────┘    └────────────┘
-```
-
-Single Docker Compose stack on the prod server: `db` (Postgres 16) + `postgrest` + `minio` + `minio_init` (one-shot) + app under PM2.
-
-## Branch & Merge Strategy
-
-1. Create new branch `selfhost/migrate` from `main` (commit `9374e63`).
-2. Cherry-pick the 7 commits from `crispygoat/self-hosted-postgres` (oldest to newest):
-   - `2de32b0` Add rocket emoji to tagline
-   - `988310f` Add Gitea Actions deploy workflow
-   - `8ad8dbb` Remove npm cache from workflow (local runner)
-   - `fddb917` Use npm install instead of npm ci (no lockfile)
-   - `beac3e4` Load .env.production from server before build
-   - `e8f2d76` Fix workflow: use actual secrets, fix env file writing
-   - `367a562` Add self-hosted Postgres docker-compose
-3. Cherry-pick the 1 commit from `crispygoat/feat/better-auth`:
-   - `456b5b1` Add MinIO storage + replace Supabase Storage with S3 SDK
-4. Resolve conflicts (expected in `.env.example`, `.gitea/workflows/deploy.yml`, `docker-compose.yml`).
-5. Apply the spec's Phase A migration patches on top.
-6. Add the `MinIO` + `minio_init` services to `docker-compose.yml` (the better-auth branch only has app code; it relies on the self-hosted branch's infra setup, but neither has the MinIO service in compose).
-7. Update `src/lib/supabase.ts` line 8: change `!supabaseUrl.includes("supabase.co")` to drop that condition so the real client is used against local PostgREST (currently this triggers mock mode whenever URL is non-Supabase).
-8. Update Gitea deploy workflow to bring up the Docker stack on the prod server before starting the app.
-
-## Env Vars (consolidated)
-
-```bash
-# ── App ──
-NODE_ENV=production
-NEXT_PUBLIC_BASE_URL=https://route.crispygoat.com
-PORT=3100
-
-# ── Postgres (self-hosted) ──
-POSTGRES_USER=routecommerce
-POSTGRES_PASSWORD=<strong-pw>
-POSTGRES_DB=route_commerce
-DATABASE_URL=postgresql://routecommerce:<pw>@db:5432/route_commerce?schema=public
-
-# ── PostgREST ──
-PGRST_SERVER_PORT=3001
-PGRST_DB_URI=postgresql://routecommerce:<pw>@db:5432/route_commerce
-PGRST_DB_ANON_ROLE=anon
-PGRST_JWT_SECRET=<random>          # not used for auth; required by PostgREST
-
-# ── better-auth ──
-BETTER_AUTH_SECRET=<random>
-BETTER_AUTH_URL=https://route.crispygoat.com
-NEXT_PUBLIC_BETTER_AUTH_URL=https://route.crispygoat.com
-
-# ── MinIO ──
-MINIO_ROOT_USER=routecommerce
-MINIO_ROOT_PASSWORD=<strong-pw>
-NEXT_PUBLIC_STORAGE_BASE_URL=https://route.crispygoat.com/storage
-STORAGE_ENDPOINT=http://minio:9000
-STORAGE_REGION=us-east-1
-STORAGE_ACCESS_KEY=routecommerce
-STORAGE_SECRET_KEY=<strong-pw>
-STORAGE_BUCKET_PREFIX=
-
-# ── Supabase env vars (legacy, kept for supabase-js client) ──
-# These now point at the local PostgREST instead of Supabase.
-NEXT_PUBLIC_SUPABASE_URL=http://postgrest:3001   # in Docker network; localhost:3001 from host
-NEXT_PUBLIC_SUPABASE_ANON_KEY=<random>          # PostgREST accepts any string; matches old pattern
-
-# ── Removed ──
-# SUPABASE_SERVICE_ROLE_KEY — no longer needed; better-auth uses pg.Pool directly with the routecommerce role
-
-# ── Unchanged ──
-STRIPE_SECRET_KEY=...
-STRIPE_WEBHOOK_SECRET=...
-STRIPE_PUBLISHABLE_KEY=pk_live_...
-RESEND_API_KEY=...
-RESEND_WEBHOOK_SECRET=...
-OPENAI_API_KEY=...
-MINIMAX_API_KEY=...
-MINIMAX_BASE_URL=...
-FROM_EMAIL=...
-```
-
-## Data Flow
-
-### Auth
-
-1. `/login` posts email + password to `authClient.signIn.email()` (better-auth/react).
-2. better-auth validates against the `user` table in Postgres via `pg.Pool`, sets the `rc_session_token` cookie via `nextCookies()` plugin.
-3. `src/middleware.ts` checks for `rc_session_token` (or `dev_session` for testing); unauthed requests redirect to `/login`.
-4. `getAdminUser()` in `src/lib/admin-permissions.ts` calls `auth.api.getSession({ headers })` then `pg.Pool.query("SELECT * FROM admin_users WHERE user_id = $1")` to resolve the `AdminUser` with role + permission flags.
-5. Server actions check `can_manage_*` flags as today.
-
-### Database (RPC + table access)
-
-1. Server action calls `supabase.rpc('foo', { p_brand_id })` using the supabase-js client from `src/lib/supabase.ts` (base URL = local PostgREST, anon key header).
-2. PostgREST receives `POST /rest/v1/rpc/foo`, looks up the SECURITY DEFINER function in `pg_catalog`, executes it.
-3. The function runs with the function owner's privileges (RLS is disabled, so it returns all rows; brand scoping is in the function body / `p_brand_id` filter).
-4. Result returns as JSON through PostgREST to the app.
-
-### Storage
-
-1. Admin uploads a product image through the admin UI.
-2. Server action `uploadProductImage` reads the file as `Buffer`, calls `uploadFile({ bucket, key, body, contentType })` from `src/lib/storage.ts`.
-3. `uploadFile` sends a `PutObjectCommand` to MinIO via `@aws-sdk/client-s3` (path-style, forcePathStyle for MinIO compatibility).
-4. MinIO stores the object; the action saves the public URL `${NEXT_PUBLIC_STORAGE_BASE_URL}/${bucket}/${key}` to the `products.image_url` column.
-5. MinIO bucket policy is set to `anonymous download` by the `minio_init` one-shot service, so public reads work without presigned URLs.
-
-## File Changes (summary)
-
-### New files
-
-| Path | Source | Purpose |
-|---|---|---|
-| `docker-compose.yml` | `self-hosted-postgres` branch | Postgres + PostgREST + MinIO + minio_init services |
-| `.env.example` | both branches (merged) | Consolidated env vars |
-| `.gitea/workflows/deploy.yml` | `self-hosted-postgres` branch | Updated to bring up Docker stack on prod |
-| `supabase/captured_schema.sql` | NEW | Output of `pg_dump --schema-and-data` from Supabase |
-| `src/lib/auth.ts` | `feat/better-auth` branch | better-auth config (Kysely + pg.Pool) |
-| `src/lib/auth-client.ts` | `feat/better-auth` branch | better-auth/react client |
-| `src/lib/storage.ts` | `feat/better-auth` branch | S3 client + upload/delete/publicUrl helpers + bucket constants |
-| `src/app/api/auth/[...all]/route.ts` | `feat/better-auth` branch | better-auth catch-all route |
-| `supabase/migrations/000_preflight_supabase_compat.sql` | `feat/better-auth` branch | Stub `auth` schema + `anon`/`authenticated`/`service_role` roles |
-| `supabase/migrations/200_better_auth_tables.sql` | `feat/better-auth` branch | better-auth's `user`/`session`/`account`/`verification` tables |
-
-### Deleted files
-
-| Path | Source | Reason |
-|---|---|---|
-| `supabase/migrations/BUNDLE_018_042.sql` | deleted in `feat/better-auth` | Concatenated duplicate of 018-042; explicit migrations apply in order |
-| `supabase/migrations/XXX_*.sql` (4 files) | deleted in `feat/better-auth` | Drafts using XXX convention |
-| `supabase/migrations/087_brand_logos_bucket.sql` | deleted in `feat/better-auth` | Supabase Storage replaced by MinIO |
-| `supabase/migrations/099_contact_imports_bucket.sql` | deleted in `feat/better-auth` | Supabase Storage replaced by MinIO |
-| `supabase/migrations/145_create_product_images_bucket.sql` | deleted in `feat/better-auth` | Supabase Storage replaced by MinIO |
-| `src/lib/supabase/server.ts` | deleted in `feat/better-auth` | Replaced by better-auth catch-all route |
-
-### Modified files
-
-| Path | Change |
-|---|---|
-| `src/lib/supabase.ts` line 8 | Drop `!supabaseUrl.includes("supabase.co")` from `useMockData` check (only `NEXT_PUBLIC_USE_MOCK_DATA === "true"` should trigger mock) |
-| `src/lib/admin-permissions.ts` | Use better-auth session + `pg.Pool` instead of `rc_auth_uid` cookie + Supabase REST |
-| `src/middleware.ts` | Check for `rc_session_token` (better-auth) instead of `rc_auth_uid` |
-| `src/actions/login.ts` | Use `authClient.signIn.email()` instead of `supabase.auth.signInWithPassword` |
-| `src/actions/wholesale-auth.ts` | Use better-auth email sign-in |
-| `src/actions/admin/force-login.ts` | Use `pg.Pool` for upsert (no Supabase) |
-| `src/actions/brand-settings.ts` | Replace 8 Supabase fetch PUTs with `uploadFile()` |
-| `src/actions/products/upload-image.ts` | Replace 3 Supabase calls with `uploadFile()` |
-| `src/actions/communications/import-contacts.ts` | Replace PUT + LIST with S3 SDK |
-| `src/app/api/water-photo-upload/route.ts` | Replace Supabase with `uploadFile()` |
-| `src/lib/email-service.ts` | Use `publicUrl(BUCKETS.X, key)` for 4 hardcoded Supabase URLs |
-| `src/components/admin/AdminHeader.tsx` | Use better-auth session |
-| `src/components/admin/AdminSidebar.tsx` | Use better-auth session |
-| `src/app/admin/me/AdminMeClient.tsx` | Use better-auth `authClient` for password change |
-| `src/app/logout/page.tsx` | Use better-auth `authClient.signOut()` |
-| `src/app/reset-password/page.tsx` | Use better-auth `authClient.changePassword()` |
-| `src/components/storefront/TuxedoVideoHero.tsx` | Use `publicUrl()` for hardcoded Supabase URL |
-| `src/components/time-tracking/TimeTrackingFieldClient.tsx` | Use `publicUrl()` |
-| `src/app/tuxedo/about/page.tsx` | Use `publicUrl()` |
-| `src/app/indian-river-direct/stops/page.tsx` | Use `publicUrl()` |
-| `supabase/migrations/006_water_log_rpcs_fixed.sql` | Patch: `STATIC` → `STABLE` (6 occurrences) |
-| `supabase/migrations/099_harvest_reach_segmentation.sql` | Patch: quote `time` column references |
-| `supabase/migrations/135_email_automation_rpcs.sql` | Patch: reorder `enroll_abandoned_cart` params or add default to `p_next_email_at` |
-| `package.json` | Add `@aws-sdk/client-s3`, `@aws-sdk/s3-request-presigner`, `better-auth`, `kysely`, `pg` |
-
-## Error Handling
-
-| Failure | Behavior |
-|---|---|
-| `pg_dump` from Supabase fails | Retry once, then halt and surface the error. Do not proceed with a partial dump. |
-| Migration apply fails | Continue through all 137, collect failures in a log file, document them as a follow-up commit. |
-| better-auth session invalid / expired | `getAdminUser()` returns `null`; pages redirect to `/login` via middleware. |
-| PostgREST down | supabase-js calls throw; server actions return `{ success: false, error: "Database unavailable" }`. |
-| MinIO down | Upload returns 500; UI shows "Upload failed, please retry." |
-| `auth.uid()` returns NULL inside SECURITY DEFINER function | Per plan.md Phase D Option 1: `ALTER TABLE … DISABLE ROW LEVEL SECURITY` on all `public.*` tables after `pg_dump` apply. Functions still execute with owner privileges; brand scoping happens at the function-body / app layer. |
-| RLS policies left over from `pg_dump` | Same as above: `DISABLE ROW LEVEL SECURITY` removes the block. |
-
-## RLS Strategy (Phase D detail)
-
-The 185 SECURITY DEFINER functions reference `auth.uid()`. The preflight stubs it to read `current_setting('request.jwt.claim.sub')`. In production this would be set by PostgREST from the JWT. Without it, `auth.uid()` returns NULL.
-
-**Decision: Disable RLS on all `public.*` tables.**
-
-```sql
-DO $$ DECLARE r record; BEGIN
-  FOR r IN SELECT tablename FROM pg_tables WHERE schemaname = 'public' LOOP
-    EXECUTE 'ALTER TABLE public.' || quote_ident(r.tablename) || ' DISABLE ROW LEVEL SECURITY';
-  END LOOP;
-END $$;
-```
-
-This is consistent with the existing "brand scoping in server actions" pattern documented in CLAUDE.md. The app already threads `effectiveBrandId = brandId ?? adminUser.brand_id ?? null` to every RPC. SECURITY DEFINER functions still execute with the function owner's privileges; RLS doesn't block them when disabled. The alternative (wiring PostgREST JWT → `request.jwt.claim.sub`) is more complex and not justified by current usage.
-
-## Testing
-
-End-to-end verification sequence (per plan.md Phase E, expanded):
-
-1. **DB schema + data apply cleanly.**
-   - Run `pg_dump --schema-and-data --no-owner --no-privileges --schema=public --exclude-schema=auth --exclude-schema=storage "postgresql://postgres:<pw>@db.wnzkhezyhnfzhkhiflrp.supabase.co:5432/postgres" -f supabase/captured_schema.sql` from the user's Mac (direct PG blocked from this dev box per MEMORY.md).
-   - `docker compose up -d db postgrest minio minio_init`.
-   - Apply preflight, captured schema, then all 137 migrations. Document any remaining failures.
-   - Apply RLS disable block. (The 3 patched migrations 006/099/135 are applied as part of the 137-migration batch — verify each succeeded.)
-2. **PostgREST smoke.**
-   - `curl http://127.0.0.1:3001/brands?limit=1 -H "apikey: <anon>"` → 200.
-   - `curl -X POST http://127.0.0.1:3001/rpc/get_public_stops_for_brand -H "Content-Type: application/json" -d '{"p_slug":"indian-river-direct"}'` → 200 with non-empty array.
-3. **MinIO buckets public.**
-   - `mc alias set local http://127.0.0.1:9000 <user> <pass>`.
-   - `mc ls local/` shows all 5 buckets.
-   - `curl -I http://127.0.0.1:9000/brand-logos/test.png` → 200 or 404, never 403.
-4. **App build.**
-   - `npx tsc --noEmit && npm run build` with the new env vars. Goal: no Supabase URL parse errors, no `auth.uid()` undefined, no missing bucket errors.
-5. **Auth round-trip.**
-   - `POST /api/auth/sign-up/email` with test email/password → 200, user created in `user` table.
-   - `POST /api/auth/sign-in/email` → 200, `rc_session_token` cookie set.
-   - Hit `/admin` with the cookie → 200, not redirect to `/login`.
-6. **Storage round-trip.**
-   - Start dev server (`npm run dev`).
-   - Sign in via better-auth.
-   - Upload a product image via admin UI → verify it lands in MinIO (`mc ls local/product-images/`).
-   - Visit `/indian-river-direct/products/[slug]` → image renders with the MinIO URL.
-7. **Data fidelity spot check.**
-   - Pick 3 known data points (a specific brand, an order, a contact) and verify they match what's in the live Supabase.
-8. **Playwright E2E.**
-   - Update env in `playwright.config.ts` (or `.env.test`).
-   - `npx playwright test` passes.
-
-## Risks
-
-| Risk | Mitigation |
-|---|---|
-| Migration apply order | `pg_dump` puts everything in dependency order; applying it first resolves most cross-references. Apply preflight first to stub `auth`, then captured schema, then migrations in numeric order. |
-| The 3 patched migrations are load-bearing | 006 (water-log RPCs) is critical for `/admin/water-log`; 099 (harvest reach segmentation) is critical for `/admin/communications`; 135 (email automation) is critical for abandoned cart + welcome sequence. If patches don't work, those features break. Document as follow-ups. (087 is in the deleted list since Supabase Storage is replaced by MinIO.) |
-| `pg_dump` includes conflicting `auth.uid()` body | The preflight creates the stub. If `pg_dump` redefines it, apply `pg_dump` first, then re-apply preflight (CREATE OR REPLACE FUNCTION handles re-definition). |
-| Existing user-uploaded images unreachable in new stack | User will re-upload brand logos and product images. The Tuxedo video + Olathe logos (referenced in `email-service.ts` and `tuxedo/about/page.tsx`) need to be copied over manually to MinIO before the cutover. |
-| PostgREST connection pool | PostgREST opens ~10 connections. Default Postgres `max_connections=100` is fine. |
-| `dev_session` cookie and `rc_session_token` cookie coexist | Both checked in middleware. Dev mode bypass stays functional for local testing. |
-| Mock mode regression | The `useMockData` check in `src/lib/supabase.ts` line 8 currently triggers on `!supabaseUrl.includes("supabase.co")` — this would falsely trigger against `http://localhost:3001`. Fix: drop the `.includes("supabase.co")` condition; rely on `NEXT_PUBLIC_USE_MOCK_DATA` flag only. |
-| Two branches had different `.env.example` | Conflict during cherry-pick. Resolution: use the union with comments labeling each section's source. |
-
-## Implementation Phases (overview; full detail in the merged `plan.md` + new task list)
-
-1. **Phase 0 — Merge** — Create `selfhost/migrate`, cherry-pick both branches, resolve conflicts, fix `useMockData` check, update Gitea deploy workflow.
-2. **Phase A — Capture base schema** — `pg_dump` from Supabase (user's Mac), restore to local Postgres, apply preflight + captured schema + 137 migrations + RLS disable.
-3. **Phase B — MinIO** — Add MinIO + minio_init services to docker-compose, install AWS SDK, configure bucket policy.
-4. **Phase C — Verify end-to-end** — Run the test sequence above. Fix any issues.
-5. **Phase D — Cutover** — Update the prod server's env, run the same migration on the prod Postgres, restart services, verify with smoke tests. Supabase project stays live for rollback until prod has been verified for 24h.
-
-## Open Questions
-
- **Bucket name `videos` for the Tuxedo hero** — currently in `TuxedoVideoHero.tsx` as a hardcoded Supabase URL. The new `src/lib/storage.ts` has `BUCKETS.VIDEOS = "videos"`. Need to manually copy the Tuxedo hero video file to MinIO before cutover.
- **Storage URL routing** — `NEXT_PUBLIC_STORAGE_BASE_URL` is `https://route.crispygoat.com/storage`. The deploy workflow needs a reverse proxy (Caddy or nginx) in front of MinIO on the prod server, OR MinIO port 9000 must be exposed via the existing domain. Decide: add Caddy to docker-compose, or use path-based routing in the existing reverse proxy.
- **Better-auth session table cleanup** — better-auth manages its own `session` table. Existing Supabase auth users will need to re-register (no password migration) OR a one-time SQL `INSERT INTO "user" SELECT … FROM auth.users` to seed better-auth users. Decide based on how many active users exist.
-
-## Out of Scope (explicit)
-
- Migrating user passwords from `auth.users` to `user.password` (better-auth). Will be handled as a one-time "reset your password" email blast in a follow-up.
- Performance tuning, indexing strategy, or connection pooling beyond defaults.
- Replacing `@supabase/ssr` (already deleted in better-auth branch) or `supabase-js` (kept for PostgREST compatibility).
- Migrating Supabase Realtime subscriptions (none in current code).
- Migrating Supabase Edge Functions (none exist).
- Changing RLS to be useful instead of disabled (current pattern: brand scoping in app + SECURITY DEFINER).
-
-## Acceptance Criteria
-
- [ ] `selfhost/migrate` branch builds cleanly (`npx tsc --noEmit && npm run build`).
- [ ] `docker compose up` on the dev box starts Postgres + PostgREST + MinIO and all 137 migrations apply.
- [ ] All 3 patched migrations (006, 099, 135) apply without errors.
- [ ] `supabase-js` calls against `http://localhost:3001` return the same shape as before against Supabase.
- [ ] better-auth sign-up + sign-in round-trip works in the browser.
- [ ] Product image upload via admin UI lands in MinIO and renders on the storefront.
- [ ] Existing data (brands, products, orders, contacts) from the live Supabase dump appears in local Postgres.
- [ ] Mock mode still works when `NEXT_PUBLIC_USE_MOCK_DATA=true`.
- [ ] Dev mode bypass (`dev_session=platform_admin` cookie) still works.
- [ ] Gitea deploy workflow brings up the Docker stack on the prod server, applies migrations, and restarts the app.
- [ ] Supabase project remains live and unchanged until prod is verified for 24h post-cutover.
@@ -0,0 +1,14 @@
+import openpyxl
+path = "/home/coder/dev/x1/kyle/route_commerce-main/Tuxedo_Corn_2026_Tour_Schedule-3.xlsx"
+wb = openpyxl.load_workbook(path, data_only=True)
+for name in wb.sheetnames:
+    ws = wb[name]
+    print(f"=== SHEET: {name} ({ws.max_row} rows x {ws.max_column} cols) ===")
+    for row in ws.iter_rows(values_only=False):
+        for cell in row:
+            if cell.value is not None:
+                v = str(cell.value)
+                if len(v) > 200:
+                    v = v[:200] + "..."
+                print(f"  {cell.coordinate}: {v!r}")
+    print()
@@ -1,58 +0,0 @@
-import { NextResponse, type NextRequest } from "next/server";
-import { getSessionCookie } from "better-auth/cookies";
-
-const DEV_UID = "dev-user-00000000-0000-0000-0000-000000000000";
-
-export async function middleware(request: NextRequest) {
-  const response = NextResponse.next({ request });
-
-  // ── Dev session bypass (enabled in all envs for demo) ──────────────
-  // Allow dev cookies via: document.cookie = "dev_session=platform_admin; path=/"
-  const devSession = request.cookies.get("dev_session")?.value;
-  const isDevMode = devSession === "platform_admin" || devSession === "brand_admin" || devSession === "store_employee";
-
-  // Better Auth sets cookie named "rc_session_token" by default (with cookiePrefix: "rc")
-  const sessionCookie = getSessionCookie(request);
-  const hasSession = Boolean(sessionCookie);
-
-  let authed = false;
-  if (isDevMode) {
-    authed = true;
-  } else if (hasSession) {
-    authed = true;
-  }
-
-  const isAdmin = request.nextUrl.pathname.startsWith("/admin");
-  const isLogin = request.nextUrl.pathname === "/login";
-
-  if (isAdmin && !authed) {
-    // Auto-login for demo: no auth cookie present
-    const url = request.nextUrl.clone();
-    url.pathname = "/admin";
-    url.searchParams.set("demo", "1");
-    const response = NextResponse.redirect(url);
-    response.cookies.set("dev_session", "platform_admin", {
-      path: "/",
-      maxAge: 60 * 60 * 24,
-      httpOnly: true,
-      sameSite: "strict",
-    });
-    return response;
-  }
-
-  if (isLogin && authed) {
-    const url = request.nextUrl.clone();
-    url.pathname = "/admin";
-    return NextResponse.redirect(url);
-  }
-
-  return response;
-}
-
-export const config = {
-  matcher: [
-    "/admin/:path*",
-    "/admin",
-    "/login",
-  ],
-};
@@ -19,24 +19,6 @@ const nextConfig: NextConfig = {
        protocol: "https",
        hostname: "picsum.photos",
      },
-      // Local self-hosted MinIO (replaces Supabase Storage)
-      {
-        protocol: "http",
-        hostname: "localhost",
-        port: "9000",
-        pathname: "/**",
-      },
-      {
-        protocol: "http",
-        hostname: "127.0.0.1",
-        port: "9000",
-        pathname: "/**",
-      },
-      // Production MinIO behind route.crispygoat.com
-      {
-        protocol: "https",
-        hostname: "storage.route.crispygoat.com",
-      },
    ],
    formats: ["image/avif", "image/webp"],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -3,7 +3,7 @@
  "version": "1.0.0",
  "private": true,
  "scripts": {
-    "dev": "node fix-agents.js && next dev --webpack -H 0.0.0.0",
+    "dev": "node fix-agents.js && next dev --webpack -H 0.0.0.0 -p 4000",
    "build": "next build --webpack",
    "start": "next start",
    "lint": "eslint",
@@ -15,23 +15,23 @@
  },
  "dependencies": {
    "@anthropic-ai/sdk": "^0.96.0",
-    "@aws-sdk/client-s3": "^3.1062.0",
-    "@aws-sdk/s3-request-presigner": "^3.1062.0",
+    "@auth/pg-adapter": "^1.11.2",
    "@clerk/nextjs": "^7.4.2",
    "@google/generative-ai": "^0.24.1",
    "@gsap/react": "^2.1.2",
    "@sentry/nextjs": "^10.55.0",
+    "@stripe/react-stripe-js": "^3.10.0",
+    "@stripe/stripe-js": "^5.10.0",
    "@supabase/ssr": "^0.10.2",
    "@supabase/supabase-js": "^2.105.3",
    "@upstash/ratelimit": "^2.0.8",
    "@upstash/redis": "^1.38.0",
-    "better-auth": "^1.6.14",
    "exceljs": "^4.4.0",
    "framer-motion": "^12.40.0",
    "gsap": "^3.15.0",
-    "kysely": "^0.29.2",
    "lucide-react": "^1.17.0",
    "next": "^16.2.6",
+    "next-auth": "^5.0.0-beta.31",
    "next-themes": "^0.4.6",
    "openai": "^6.37.0",
    "papaparse": "^5.5.3",
@@ -63,7 +63,7 @@
    "pg": "^8.20.0",
    "playwright": "^1.59.1",
    "tailwindcss": "^4",
-    "typescript": "^5"
+    "typescript": "^5.9.3"
  },
  "overrides": "{}"
 }
@@ -0,0 +1,99 @@
+#!/bin/bash
+# End-to-end validation test for the local Postgres + PostgREST + MinIO + Next.js stack
+# Exit 0 = all green, exit 1 = at least one failure.
+
+set -e
+API="http://localhost:3001"
+WEB="http://localhost:4000"
+
+pass=0
+fail=0
+declare -a FAILURES
+
+check() {
+  local name="$1" url="$2" expected="${3:-200}" cookies="${4:-}"
+  local cmd="curl -s -o /dev/null -w '%{http_code}'"
+  if [ -n "$cookies" ]; then cmd="$cmd -b \"$cookies\""; fi
+  local code=$(eval "$cmd $url")
+  if [ "$code" = "$expected" ]; then
+    echo "  PASS  $name ($code)"
+    pass=$((pass+1))
+  else
+    echo "  FAIL  $name expected=$expected got=$code url=$url"
+    fail=$((fail+1))
+    FAILURES+=("$name")
+  fi
+}
+
+echo "=== Postgres connection ==="
+PGPASSWORD=routecommerce_dev_password psql -U routecommerce -h 127.0.0.1 -d route_commerce -tA -c "SELECT 'ok';" >/dev/null
+echo "  PASS  postgres responds"
+pass=$((pass+1))
+
+echo "=== DB integrity ==="
+TABLE_COUNT=$(PGPASSWORD=routecommerce_dev_password psql -U routecommerce -h 127.0.0.1 -d route_commerce -tA -c "SELECT count(*) FROM information_schema.tables WHERE table_schema='public';")
+[ "$TABLE_COUNT" -ge 65 ] && echo "  PASS  $TABLE_COUNT public tables (>=65)" && pass=$((pass+1)) || { echo "  FAIL  $TABLE_COUNT tables"; fail=$((fail+1)); }
+
+FN_COUNT=$(PGPASSWORD=routecommerce_dev_password psql -U routecommerce -h 127.0.0.1 -d route_commerce -tA -c "SELECT count(*) FROM pg_proc p JOIN pg_namespace n ON p.pronamespace=n.oid WHERE n.nspname='public';")
+[ "$FN_COUNT" -ge 250 ] && echo "  PASS  $FN_COUNT functions (>=250)" && pass=$((pass+1)) || { echo "  FAIL  $FN_COUNT functions"; fail=$((fail+1)); }
+
+BRANDS=$(PGPASSWORD=routecommerce_dev_password psql -U routecommerce -h 127.0.0.1 -d route_commerce -tA -c "SELECT count(*) FROM brands;")
+[ "$BRANDS" -ge 2 ] && echo "  PASS  $BRANDS brands" && pass=$((pass+1)) || { echo "  FAIL  $BRANDS brands"; fail=$((fail+1)); }
+
+STOPS=$(PGPASSWORD=routecommerce_dev_password psql -U routecommerce -h 127.0.0.1 -d route_commerce -tA -c "SELECT count(*) FROM stops WHERE active=true AND deleted_at IS NULL;")
+[ "$STOPS" -ge 200 ] && echo "  PASS  $STOPS active stops" && pass=$((pass+1)) || { echo "  FAIL  $STOPS stops"; fail=$((fail+1)); }
+
+# No test brands
+TEST_BRANDS=$(PGPASSWORD=routecommerce_dev_password psql -U routecommerce -h 127.0.0.1 -d route_commerce -tA -c "SELECT count(*) FROM brands WHERE slug IN ('sunrise-farms','green-valley','orchard-fresh');")
+[ "$TEST_BRANDS" = "0" ] && echo "  PASS  no test brands" && pass=$((pass+1)) || { echo "  FAIL  test brands found"; fail=$((fail+1)); }
+
+echo "=== Tuxedo Corn data ==="
+PHONE=$(PGPASSWORD=routecommerce_dev_password psql -U routecommerce -h 127.0.0.1 -d route_commerce -tA -c "SELECT phone FROM brand_settings WHERE brand_id='64294306-5f42-463d-a5e8-2ad6c81a96de';")
+[ "$PHONE" = "970-323-6874" ] && echo "  PASS  phone=$PHONE" && pass=$((pass+1)) || { echo "  FAIL  phone=$PHONE (expected 970-323-6874)"; fail=$((fail+1)); }
+
+LOGOS=$(PGPASSWORD=routecommerce_dev_password psql -U routecommerce -h 127.0.0.1 -d route_commerce -tA -c "SELECT count(*) FROM brand_settings WHERE brand_id='64294306-5f42-463d-a5e8-2ad6c81a96de' AND logo_url LIKE '/storage/%';")
+[ "$LOGOS" = "1" ] && echo "  PASS  logo_url is /storage/ path" && pass=$((pass+1)) || { echo "  FAIL  logo_url not /storage/"; fail=$((fail+1)); }
+
+echo "=== PostgREST ==="
+check "GET /" "$API/"
+check "GET /brands" "$API/brands?select=id,name,slug&order=name"
+check "GET /brands?slug=eq.tuxedo" "$API/brands?slug=eq.tuxedo&select=*"
+check "GET /stops" "$API/stops?select=id,city&limit=5"
+check "GET /products" "$API/products?select=id,name&limit=5"
+check "POST rpc get_brand_settings_by_slug" "$API/rpc/get_brand_settings_by_slug" 200 \
+  "-X POST -H Content-Type:application/json -d {\"p_brand_slug\":\"tuxedo\"}"
+check "POST rpc get_brand_plan_info" "$API/rpc/get_brand_plan_info" 200 \
+  "-X POST -H Content-Type:application/json -d {\"p_brand_id\":\"64294306-5f42-463d-a5e8-2ad6c81a96de\"}"
+check "POST rpc get_public_stops_for_brand" "$API/rpc/get_public_stops_for_brand" 200 \
+  "-X POST -H Content-Type:application/json -d {\"p_brand_slug\":\"tuxedo\"}"
+check "GET /admin_users with brand join" "$API/admin_users?select=id,user_id,role,brand_id,brands(name)&limit=5"
+check "GET /stops with brand join" "$API/stops?select=id,city,brand_id,brands(name)&limit=5"
+
+echo "=== MinIO ==="
+check "Storage logo.png" "$WEB/storage/brand-logos/64294306-5f42-463d-a5e8-2ad6c81a96de/logo.png"
+check "Storage olathe-sweet-logo.png" "$WEB/storage/brand-logos/64294306-5f42-463d-a5e8-2ad6c81a96de/olathe-sweet-logo.png"
+check "Storage olathe-sweet-logo-dark.png" "$WEB/storage/brand-logos/64294306-5f42-463d-a5e8-2ad6c81a96de/olathe-sweet-logo-dark.png"
+
+echo "=== Public storefronts ==="
+check "GET /" "$WEB/"
+check "GET /tuxedo" "$WEB/tuxedo"
+check "GET /tuxedo/about" "$WEB/tuxedo/about"
+check "GET /tuxedo/stops" "$WEB/tuxedo/stops"
+check "GET /indian-river-direct" "$WEB/indian-river-direct"
+check "GET /login" "$WEB/login"
+
+echo "=== Admin pages (dev_session=platform_admin) ==="
+for p in /admin /admin/products /admin/stops /admin/orders /admin/users /admin/settings /admin/settings/billing /admin/settings/apps /admin/settings/payments /admin/communications /admin/communications/compose /admin/time-tracking /admin/wholesale /admin/water-log /admin/analytics /admin/reports; do
+  check "GET $p" "$WEB$p" 200 "dev_session=platform_admin"
+done
+
+echo ""
+echo "=== Summary ==="
+echo "  PASS: $pass"
+echo "  FAIL: $fail"
+if [ $fail -gt 0 ]; then
+  echo "  Failures:"
+  for f in "${FAILURES[@]}"; do echo "    - $f"; done
+  exit 1
+fi
+echo "  ALL GREEN"
@@ -0,0 +1,346 @@
+#!/usr/bin/env python3
+"""
+seed_tuxedo_tour.py
+
+Parses Tuxedo_Corn_2026_Tour_Schedule-3.xlsx and seeds the `stops` table for
+the Tuxedo brand via the admin_create_stops_batch RPC.
+
+Skips:
+  - Title / subtitle / legend rows (rows 1-3)
+  - Week header rows (col A = "Wk N", col D-J empty)
+  - Cross-Dock / Monday OFF rows (col D contains "OFF" or "Cross-Dock")
+
+Joins with the Stop Directory sheet to enrich each stop with:
+  - address, phone, contact
+
+Usage:
+  python3 scripts/seed_tuxedo_tour.py --dry-run   # show what would be inserted
+  python3 scripts/seed_tuxedo_tour.py            # actually insert
+
+Requires:
+  - supabase CLI linked to project wnzkhezyhnfzhkhiflrp
+"""
+import argparse
+import json
+import re
+import subprocess
+import sys
+from pathlib import Path
+
+from openpyxl import load_workbook
+
+TUXEDO_BRAND_ID = "64294306-5f42-463d-a5e8-2ad6c81a96de"
+YEAR = 2026
+
+MONTH_MAP = {
+    "Jan": "01", "Feb": "02", "Mar": "03", "Apr": "04",
+    "May": "05", "Jun": "06", "Jul": "07", "Aug": "08",
+    "Sep": "09", "Oct": "10", "Nov": "11", "Dec": "12",
+}
+
+DEFAULT_XLSX = (
+    "/home/coder/dev/x1/kyle/route_commerce-main/"
+    "Tuxedo_Corn_2026_Tour_Schedule-3.xlsx"
+)
+
+
+def parse_excel_date(s):
+    """'Jul 22' -> '2026-07-22'"""
+    if not s:
+        return None
+    m = re.match(r"^([A-Za-z]{3})\s+(\d{1,2})$", str(s).strip())
+    if not m:
+        return None
+    mm = MONTH_MAP.get(m.group(1))
+    if not mm:
+        return None
+    return f"{YEAR}-{mm}-{int(m.group(2)):02d}"
+
+
+def parse_time_range(s):
+    """'10:00 AM - 1:00 PM' -> '10:00 AM' (start time)"""
+    if not s:
+        return ""
+    cleaned = re.sub(r"[–—]", "-", str(s)).strip()
+    cleaned = re.sub(r"\s+", " ", cleaned)
+    m = re.match(r"^(\d{1,2}:\d{2}\s*[AP]M)", cleaned, re.IGNORECASE)
+    return m.group(1).upper().replace(" ", " ") if m else cleaned
+
+
+def split_city_state(s):
+    """'Cheyenne, WY' -> ('Cheyenne', 'WY')"""
+    if not s:
+        return "", ""
+    parts = [p.strip() for p in str(s).split(",")]
+    if len(parts) == 1:
+        return parts[0], ""
+    return parts[0], parts[1]
+
+
+def slugify(s):
+    s = (s or "").lower()
+    s = re.sub(r"[^a-z0-9]+", "-", s)
+    return s.strip("-")
+
+
+def is_week_header(row):
+    a = str(row[0] or "").strip()
+    d = str(row[3] or "").strip()
+    return re.match(r"^Wk\s", a) and d == ""
+
+
+def is_off_row(row):
+    d = str(row[3] or "").strip()
+    return "OFF" in d or "Cross-Dock" in d or "Cross‑Dock" in d
+
+
+def is_data_row(row):
+    d = str(row[3] or "").strip()
+    e = str(row[4] or "").strip()
+    if not d or not e:
+        return False
+    if "," not in e:
+        return False
+    return True
+
+
+def load(xlsx_path):
+    wb = load_workbook(xlsx_path, data_only=True)
+    schedule = wb["Full Schedule"]
+    directory = wb["Stop Directory"]
+
+    # Build Stop Directory lookup: (truck, host_normalized) -> {address, phone, contact, ...}
+    dir_map = {}
+    for row in directory.iter_rows(min_row=2, values_only=True):
+        truck = str(row[0] or "").strip()
+        city = str(row[1] or "").strip()
+        state = str(row[2] or "").strip()
+        host = str(row[3] or "").strip()
+        address = str(row[4] or "").strip()
+        phone = str(row[5] or "").strip()
+        contact = str(row[6] or "").strip()
+        if not truck or not host:
+            continue
+        key = f"{truck}|{host.lower()}"
+        dir_map[key] = {
+            "city": city, "state": state, "host": host,
+            "address": address, "phone": phone, "contact": contact,
+        }
+
+    # Read Full Schedule (skip first 3 title/subtitle/legend rows)
+    stops = []
+    skipped = {"weekHeader": 0, "off": 0, "invalid": 0}
+    for row in schedule.iter_rows(min_row=4, values_only=True):
+        # Trim to 10 cols
+        cells = [("" if v is None else str(v).strip()) for v in row[:10]]
+        if is_week_header(cells):
+            skipped["weekHeader"] += 1
+            continue
+        if is_off_row(cells):
+            skipped["off"] += 1
+            continue
+        if not is_data_row(cells):
+            skipped["invalid"] += 1
+            continue
+
+        wk, region, date_text, day, city_state, host, time, truck, status, notes = cells
+        date_iso = parse_excel_date(date_text)
+        if not date_iso:
+            skipped["invalid"] += 1
+            continue
+        city, state = split_city_state(city_state)
+        if not city:
+            skipped["invalid"] += 1
+            continue
+
+        # Enrich from directory
+        dir_key = f"{truck}|{host.lower()}"
+        d = dir_map.get(dir_key)
+
+        stops.append({
+            "week": wk,
+            "region": region,
+            "date": date_iso,
+            "day": day,
+            "city": city,
+            "state": state or (d["state"] if d else ""),
+            "location": host,
+            "time": parse_time_range(time),
+            "time_range": time,
+            "truck": truck,
+            "status_text": status,
+            "notes": notes,
+            "address": d["address"] if d and d["address"] else None,
+            "phone": d["phone"] if d and d["phone"] else None,
+            "contact": d["contact"] if d and d["contact"] else None,
+        })
+
+    return stops, skipped, len(dir_map)
+
+
+def assign_slugs(stops, dry_run):
+    used = set()
+    if not dry_run:
+        out = subprocess.run(
+            ["supabase", "db", "query", "--linked",
+             f"SELECT slug FROM stops WHERE brand_id = '{TUXEDO_BRAND_ID}';"],
+            capture_output=True, text=True, timeout=120,
+        )
+        # Parse the table output - slugs are in second column between │
+        for m in re.finditer(r"│\s*([a-z0-9][a-z0-9-]*)\s*│", out.stdout):
+            used.add(m.group(1))
+
+    for s in stops:
+        base = f"{slugify(s['city'])}-{s['date']}"
+        slug = base
+        n = 0
+        while slug in used:
+            n += 1
+            slug = f"{base}-{n}"
+        used.add(slug)
+        s["slug"] = slug
+
+
+def to_rpc_row(s):
+    return {
+        "city": s["city"],
+        "state": s["state"],
+        "location": s["location"],
+        "date": f"{s['date']} 00:00:00+00",
+        "time": s["time"],
+        "address": s["address"],
+        "zip": None,
+        "cutoff_time": None,
+        # active=true so the stops appear on the public storefront immediately.
+        # Matches the behavior of publishStop in src/actions/stops.ts.
+        "active": True,
+    }
+
+
+def build_payload_json(batch):
+    """Build a clean JSON string for use in a SQL file."""
+    return json.dumps(batch, ensure_ascii=False)
+
+
+def insert_batch(batch):
+    """Write SQL to a temp file and execute via --file to avoid shell escaping."""
+    payload_json = build_payload_json(batch)
+    sql = (
+        f"SELECT admin_create_stops_batch("
+        f"'{TUXEDO_BRAND_ID}'::uuid, "
+        f"$${payload_json}$$::jsonb);\n"
+    )
+    # Write to temp file
+    tmp_path = Path("/tmp/seed_tuxedo_tour.sql")
+    tmp_path.write_text(sql, encoding="utf-8")
+    try:
+        proc = subprocess.run(
+            ["supabase", "db", "query", "--linked", "--file", str(tmp_path)],
+            capture_output=True, text=True, timeout=300,
+        )
+    finally:
+        tmp_path.unlink(missing_ok=True)
+    if proc.returncode != 0:
+        raise RuntimeError(f"RPC failed: {proc.stderr[:800]}")
+    return proc.stdout
+
+
+def main():
+    ap = argparse.ArgumentParser()
+    ap.add_argument("--dry-run", action="store_true")
+    ap.add_argument("--xlsx", default=DEFAULT_XLSX)
+    args = ap.parse_args()
+
+    if not Path(args.xlsx).exists():
+        sys.exit(f"XLSX not found: {args.xlsx}")
+
+    stops, skipped, dir_count = load(args.xlsx)
+    assign_slugs(stops, dry_run=args.dry_run)
+
+    print(f"\nParsed {len(stops)} stops "
+          f"(skipped: {skipped['weekHeader']} week-headers, "
+          f"{skipped['off']} OFF days, {skipped['invalid']} invalid)")
+    print(f"Stop Directory: {dir_count} entries loaded for enrichment\n")
+
+    if not stops:
+        sys.exit("No stops to insert.")
+
+    print("Sample (first 3):")
+    for s in stops[:3]:
+        print(f"  {s['date']} {s['time']:10s} | {s['city']:18s}, {s['state']:2s} | "
+              f"{s['location'][:35]:35s} | {s['truck']} | {s['status_text']} | {s['slug']}")
+        if s["notes"]:
+            print(f"    notes:  {s['notes'][:120]}")
+        if s["address"]:
+            print(f"    addr:   {s['address']}  ph: {s['phone']}  ctc: {s['contact']}")
+    print()
+
+    # Show counts by week and region
+    by_week = {}
+    by_region = {}
+    by_truck = {}
+    for s in stops:
+        by_week[s["week"]] = by_week.get(s["week"], 0) + 1
+        by_region[s["region"]] = by_region.get(s["region"], 0) + 1
+        by_truck[s["truck"]] = by_truck.get(s["truck"], 0) + 1
+    print("By week:", dict(sorted(by_week.items())))
+    print("By region:", by_region)
+    print("By truck:", by_truck)
+    print()
+
+    # Date range
+    dates = sorted(s["date"] for s in stops)
+    print(f"Date range: {dates[0]} to {dates[-1]}\n")
+
+    if args.dry_run:
+        batches = (len(stops) + 49) // 50
+        print(f"[DRY RUN] Would insert {len(stops)} stops in {batches} batch(es) of 50.")
+        return
+
+    BATCH = 50
+    total = 0
+    batches = (len(stops) + BATCH - 1) // BATCH
+    for i in range(0, len(stops), BATCH):
+        batch = [to_rpc_row(s) for s in stops[i:i + BATCH]]
+        bnum = i // BATCH + 1
+        sys.stdout.write(f"  Inserting batch {bnum}/{batches} ({len(batch)} stops)... ")
+        sys.stdout.flush()
+        try:
+            insert_batch(batch)
+            total += len(batch)
+            print("OK")
+        except Exception as e:
+            print("FAIL")
+            print(f"    {e}")
+
+    # The batch RPC hardcodes status='draft' on insert. The Tuxedo storefront
+    # page only filters on active=true (not status), so active=true is enough
+    # to make stops visible. But for consistency with the publishStop server
+    # action — which sets both — flip status to 'active' for the rows we just
+    # inserted. Slug-based so we only touch stops from this run, not the
+    # pre-existing "Olathe" test stop.
+    if total > 0:
+        slugs = [s["slug"] for s in stops]
+        # Build a safe IN list (slug is a text column)
+        slug_list = ", ".join(f"'{slug.replace(chr(39), chr(39)+chr(39))}'" for slug in slugs)
+        publish_sql = (
+            f"UPDATE stops SET status = 'active' "
+            f"WHERE brand_id = '{TUXEDO_BRAND_ID}' "
+            f"AND slug IN ({slug_list});"
+        )
+        tmp = Path("/tmp/seed_tuxedo_publish.sql")
+        tmp.write_text(publish_sql, encoding="utf-8")
+        try:
+            subprocess.run(
+                ["supabase", "db", "query", "--linked", "--file", str(tmp)],
+                capture_output=True, text=True, timeout=120,
+            )
+            print(f"\n  Published {total} stops (status -> 'active').")
+        finally:
+            tmp.unlink(missing_ok=True)
+
+    print(f"\nDone. Inserted {total}/{len(stops)} stops for Tuxedo brand.")
+
+
+if __name__ == "__main__":
+    main()
@@ -1,41 +1,63 @@
 "use server";

-import { Pool } from "pg";
-import { randomUUID } from "crypto";
-
-const pool = new Pool({
-  connectionString: process.env.DATABASE_URL,
-});
+import { createServerClient } from "@supabase/ssr";
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";

 const DEV_ADMIN_UID = "dev-user-00000000-0000-0000-0000-000000000001";

 export async function forceAdminLogin(): Promise<{ success: boolean; uid?: string; error?: string }> {
-  try {
-    // Upsert dev platform_admin record
-    const res = await pool.query(
-      `INSERT INTO admin_users (
-        user_id, brand_id, role, active,
-        can_manage_products, can_manage_stops, can_manage_orders, can_manage_pickup,
-        can_manage_messages, can_manage_refunds, can_manage_users, can_manage_water_log,
-        can_manage_reports, can_manage_settings, must_change_password
-      ) VALUES (
-        $1, NULL, 'platform_admin', true,
-        true, true, true, true,
-        true, true, true, true,
-        true, true, false
-      )
-      ON CONFLICT (user_id) DO UPDATE SET active = EXCLUDED.active
-      RETURNING id, role`,
-      [DEV_ADMIN_UID]
-    );
+  const cookieStore = await cookies();
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;

-    if (res.rows.length === 0) {
-      return { success: false, error: "Failed to upsert dev admin" };
+  const response = NextResponse.next();
+  const supabase = createServerClient(supabaseUrl, supabaseAnonKey, {
+    cookies: {
+      getAll() { return cookieStore.getAll(); },
+      setAll(cookiesToSet, headers) {
+        cookiesToSet.forEach(({ name, value, options }) => {
+          response.cookies.set(name, value, options);
+        });
+        Object.entries(headers).forEach(([key, value]) => {
+          response.headers.set(key, value);
+        });
+      },
+    },
+  });
+
+  // Upsert dev platform_admin record
+  const { data: existing } = await supabase
+    .from("admin_users")
+    .select("id, role")
+    .eq("user_id", DEV_ADMIN_UID)
+    .single();
+
+  if (!existing) {
+    const { error: insertError } = await supabase
+      .from("admin_users")
+      .insert({
+        user_id: DEV_ADMIN_UID,
+        brand_id: null,
+        role: "platform_admin",
+        active: true,
+        can_manage_products: true,
+        can_manage_stops: true,
+        can_manage_orders: true,
+        can_manage_pickup: true,
+        can_manage_messages: true,
+        can_manage_refunds: true,
+        can_manage_users: true,
+        can_manage_water_log: true,
+        can_manage_reports: true,
+        can_manage_settings: true,
+        must_change_password: false,
+      });
+
+    if (insertError) {
+      return { success: false, error: insertError.message };
    }
-
-    return { success: true, uid: DEV_ADMIN_UID };
-  } catch (e: unknown) {
-    const message = e instanceof Error ? e.message : "Unknown error";
-    return { success: false, error: message };
  }
+
+  return { success: true, uid: DEV_ADMIN_UID };
 }
@@ -1,31 +0,0 @@
-"use server";
-
-import { Pool } from "pg";
-import { revalidatePath } from "next/cache";
-
-const pool = new Pool({
-  connectionString: process.env.DATABASE_URL,
-});
-
-export type UpdateAdminProfileResult =
-  | { success: true }
-  | { success: false; error: string };
-
-export async function updateAdminProfileAction(
-  id: string,
-  displayName: string | null,
-  phoneNumber: string | null
-): Promise<UpdateAdminProfileResult> {
-  try {
-    await pool.query("SELECT update_admin_user($1, $2, $3)", [
-      id,
-      displayName,
-      phoneNumber,
-    ]);
-    revalidatePath("/admin/me");
-    return { success: true };
-  } catch (e: unknown) {
-    const message = e instanceof Error ? e.message : "Failed to update profile";
-    return { success: false, error: message };
-  }
-}
@@ -1,6 +1,7 @@
 "use server";

 import { getAdminUser } from "@/lib/admin-permissions";
+import { assertBrandAccess } from "@/lib/brand-scope";
 import { parseExcelBuffer, parseTextBuffer } from "@/lib/excel-parser";
 import { importProductsBatch } from "@/actions/import-products";
 import { importOrdersBatch } from "@/actions/import-orders";
@@ -41,7 +42,9 @@ export async function analyzeImport(
 ): Promise<AnalyzeImportResult> {
  const adminUser = await getAdminUser();
  if (!adminUser) return { success: false, error: "Not authenticated" };
-  if (adminUser.role === "brand_admin" && adminUser.brand_id !== brandId) {
+  try {
+    assertBrandAccess(adminUser, brandId);
+  } catch {
    return { success: false, error: "Not authorized for this brand" };
  }

@@ -1,6 +1,7 @@
 "use server";

 import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
 import { svcHeaders } from "@/lib/svc-headers";

 const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
@@ -96,7 +97,7 @@ async function brandScopedRPC<T>(
  const adminUser = await getAdminUser();
  if (!adminUser) throw new Error("Not authenticated");

-  const brandId = adminUser.brand_id ?? null;
+  const brandId = await getActiveBrandId(adminUser);

  const response = await fetch(`${supabaseUrl}/rest/v1/rpc/${rpcName}`, {
    method: "POST",
@@ -232,7 +233,7 @@ export async function getRecentOrders(limit: number = 10): Promise<RecentOrder[]
    const adminUser = await getAdminUser();
    if (!adminUser) throw new Error("Not authenticated");

-    const brandId = adminUser.brand_id ?? null;
+    const brandId = await getActiveBrandId(adminUser);

    const params = new URLSearchParams({
      select: "id,customer_name,subtotal,status,created_at,fulfillment",
@@ -293,7 +294,7 @@ export async function getConversionFunnel(): Promise<ConversionFunnel[]> {
    const adminUser = await getAdminUser();
    if (!adminUser) throw new Error("Not authenticated");

-    const brandId = adminUser.brand_id ?? null;
+    const brandId = await getActiveBrandId(adminUser);

    const params = new URLSearchParams({
      select: "id,status",
@@ -0,0 +1,56 @@
+"use server";
+
+import { signIn, signOut } from "@/lib/auth";
+import { AuthError } from "next-auth";
+
+/**
+ * Server actions that wrap the Auth.js v5 `signIn` / `signOut` API for
+ * use from client components.
+ *
+ * Why server actions?
+ *   • The Auth.js v5 `signIn` function has to run on the server (it
+ *     needs to set the session cookie, talk to the database adapter,
+ *     and redirect the user to the OAuth provider).
+ *   • Calling it from a client component via a server action keeps the
+ *     client bundle small and avoids exposing the OAuth client secret.
+ *
+ * Usage from a client component:
+ *   <form action={signInWithGoogle}>
+ *     <button type="submit">Sign in with Google</button>
+ *   </form>
+ *
+ * Usage for the dev credentials provider (dev only):
+ *   <form action={signInWithDev}>
+ *     <input name="username" />
+ *     <input name="password" type="password" />
+ *     <button type="submit">Dev login</button>
+ *   </form>
+ */
+
+export async function signInWithGoogle(): Promise<void> {
+  await signIn("google", { redirectTo: "/admin" });
+}
+
+export async function signInWithDev(formData: FormData): Promise<void> {
+  const username = String(formData.get("username") ?? "admin");
+  const password = String(formData.get("password") ?? "dev");
+  try {
+    await signIn("dev-login", {
+      username,
+      password,
+      redirectTo: "/admin",
+    });
+  } catch (e) {
+    // signIn() throws a `NEXT_REDIRECT` to navigate — let that through
+    // so the redirect actually happens. Re-throw any other error so the
+    // caller can render a meaningful message.
+    if (e instanceof AuthError) {
+      throw new Error(`Dev sign-in failed: ${e.type}`);
+    }
+    throw e;
+  }
+}
+
+export async function signOutAction(): Promise<void> {
+  await signOut({ redirectTo: "/login" });
+}
@@ -0,0 +1,123 @@
+"use server";
+
+import { svcHeaders } from "@/lib/svc-headers";
+
+/**
+ * Creates a Stripe PaymentIntent for the supplied cart so the browser
+ * can confirm the payment with embedded Stripe Elements (Apple Pay /
+ * Google Pay / card) without redirecting to a hosted page.
+ *
+ * Mirrors `createRetailStripeCheckoutSession` in `retail-checkout.ts`:
+ * the PaymentIntent is the embedded equivalent of the Checkout Session.
+ * Order creation itself still happens on `/checkout/success` so the
+ * webhooks and order pipeline don't need to know which path the buyer
+ * used.
+ */
+type LineItem = {
+  id: string;
+  name: string;
+  price: number;
+  quantity: number;
+};
+
+type CustomerInfo = {
+  name?: string;
+  email?: string;
+};
+
+type CreatePaymentIntentResult =
+  | { success: true; clientSecret: string; paymentIntentId: string; amount: number }
+  | { success: false; error: string };
+
+export async function createRetailPaymentIntent(
+  items: LineItem[],
+  customer: CustomerInfo,
+  brandId: string | null,
+  stopId: string | null,
+  shippingAddress?: { state?: string; postal_code?: string; city?: string } | null
+): Promise<CreatePaymentIntentResult> {
+  const stripeKey = process.env.STRIPE_SECRET_KEY;
+  if (!stripeKey) {
+    return { success: false, error: "Stripe not configured on this server." };
+  }
+
+  if (!Array.isArray(items) || items.length === 0) {
+    return { success: false, error: "Cart is empty." };
+  }
+
+  const Stripe = (await import("stripe")).default;
+  const stripe = new Stripe(stripeKey, { apiVersion: "2026-04-22.dahlia" as any });
+
+  // Compute the subtotal in cents. We don't compute sales tax here —
+  // Stripe's `automatic_tax` would be ideal but requires address collection
+  // client-side; for this single-product corn box the price is tax-inclusive
+  // (see Tuxedo Corn product card) so we treat the line total as final.
+  const amount = items.reduce((sum, item) => {
+    const qty = Math.max(1, Math.floor(item.quantity || 1));
+    const unit = Math.max(0, Math.round(Number(item.price) * 100));
+    return sum + unit * qty;
+  }, 0);
+
+  if (amount <= 0) {
+    return { success: false, error: "Cart total must be greater than $0." };
+  }
+
+  // Pull the brand name for Stripe receipts + metadata
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
+  let brandName = "Route Commerce";
+  if (supabaseUrl && supabaseKey && brandId) {
+    try {
+      const brandRes = await fetch(
+        `${supabaseUrl}/rest/v1/brands?id=eq.${brandId}&select=name`,
+        { headers: { ...svcHeaders(supabaseKey) } }
+      );
+      const brands = (await brandRes.json()) as Array<{ name: string }>;
+      if (brands?.[0]?.name) brandName = brands[0].name;
+    } catch {
+      // ignore — use default
+    }
+  }
+
+  // Build a short human-readable description for the Stripe dashboard
+  const description = items
+    .slice(0, 3)
+    .map((i) => `${i.quantity}× ${i.name}`)
+    .join(", ");
+
+  try {
+    const intent = await stripe.paymentIntents.create({
+      amount,
+      currency: "usd",
+      automatic_payment_methods: { enabled: true },
+      receipt_email: customer.email || undefined,
+      description,
+      metadata: {
+        brand_id: brandId ?? "unknown",
+        brand_name: brandName,
+        stop_id: stopId ?? "",
+        customer_name: customer.name ?? "",
+        customer_email: customer.email ?? "",
+        shipping_state: shippingAddress?.state ?? "",
+        shipping_postal_code: shippingAddress?.postal_code ?? "",
+        shipping_city: shippingAddress?.city ?? "",
+        item_count: String(items.reduce((s, i) => s + i.quantity, 0)),
+        source: "storefront_express",
+      },
+    });
+
+    if (!intent.client_secret) {
+      return { success: false, error: "Stripe did not return a client secret." };
+    }
+
+    return {
+      success: true,
+      clientSecret: intent.client_secret,
+      paymentIntentId: intent.id,
+      amount: intent.amount,
+    };
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Failed to create payment intent.";
+    return { success: false, error: message };
+  }
+}
@@ -2,7 +2,6 @@

 import { getAdminUser } from "@/lib/admin-permissions";
 import { svcHeaders } from "@/lib/svc-headers";
-import { uploadFile, BUCKETS, publicUrl, storageKeys } from "@/lib/storage";

 export type UploadLogoResult =
  | { success: true; logoUrl: string }
@@ -31,28 +30,31 @@ export async function uploadBrandLogo(
  }

  const ext = file.type === "image/svg+xml" ? "svg" : file.type.split("/")[1];
-  const fileName = isDark ? `logo-dark.${ext}` : `logo.${ext}`;
-  const key = storageKeys.brandLogo(brandId, fileName);
+  const path = isDark ? `logo-dark.${ext}` : `logo.${ext}`;
+  const storagePath = `brand-logos/${brandId}/${path}`;

  const arrayBuffer = await file.arrayBuffer();
  const buffer = Buffer.from(arrayBuffer);

-  let url: string;
-  try {
-    const res = await uploadFile({
-      bucket: BUCKETS.BRAND_LOGOS,
-      key,
-      body: buffer,
-      contentType: file.type,
-    });
-    url = res.url;
-  } catch (e) {
-    return { success: false, error: `Upload failed: ${(e as Error).message}` };
-  }
-
  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
  const supabaseKey = process.env.SUPABASE_SERVICE_ROLE_KEY!;

+  const uploadRes = await fetch(
+    `${supabaseUrl}/storage/v1/object/brand-logos/${storagePath}`,
+    {
+      method: "PUT",
+      headers: { ...svcHeaders(supabaseKey), "Content-Type": file.type, "x-upsert": "true" },
+      body: buffer,
+    }
+  );
+
+  if (!uploadRes.ok) {
+    return { success: false, error: `Upload failed: ${await uploadRes.text()}` };
+  }
+
+  const publicUrl = `${supabaseUrl}/storage/v1/object/public/brand-logos/${storagePath}`;
+
+  // Save URL to brand_settings via RPC
  const saveRes = await fetch(
    `${supabaseUrl}/rest/v1/rpc/upsert_brand_settings`,
    {
@@ -60,7 +62,7 @@ export async function uploadBrandLogo(
      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
      body: JSON.stringify({
        p_brand_id: brandId,
-        [isDark ? "p_logo_url_dark" : "p_logo_url"]: url,
+        [isDark ? "p_logo_url_dark" : "p_logo_url"]: publicUrl,
      }),
    }
  );
@@ -69,7 +71,7 @@ export async function uploadBrandLogo(
    return { success: false, error: "Upload succeeded but failed to save URL" };
  }

-  return { success: true, logoUrl: url };
+  return { success: true, logoUrl: publicUrl };
 }

 export async function uploadOlatheSweetLogo(
@@ -94,27 +96,29 @@ export async function uploadOlatheSweetLogo(
  }

  const ext = file.type === "image/svg+xml" ? "svg" : file.type.split("/")[1];
-  const key = storageKeys.brandLogo(brandId, `olathe-sweet-logo.${ext}`);
+  const storagePath = `brand-logos/${brandId}/olathe-sweet-logo.${ext}`;

  const arrayBuffer = await file.arrayBuffer();
  const buffer = Buffer.from(arrayBuffer);

-  let url: string;
-  try {
-    const res = await uploadFile({
-      bucket: BUCKETS.BRAND_LOGOS,
-      key,
-      body: buffer,
-      contentType: file.type,
-    });
-    url = res.url;
-  } catch (e) {
-    return { success: false, error: `Upload failed: ${(e as Error).message}` };
-  }
-
  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
  const supabaseKey = process.env.SUPABASE_SERVICE_ROLE_KEY!;

+  const uploadRes = await fetch(
+    `${supabaseUrl}/storage/v1/object/brand-logos/${storagePath}`,
+    {
+      method: "PUT",
+      headers: { ...svcHeaders(supabaseKey), "Content-Type": file.type, "x-upsert": "true" },
+      body: buffer,
+    }
+  );
+
+  if (!uploadRes.ok) {
+    return { success: false, error: `Upload failed: ${await uploadRes.text()}` };
+  }
+
+  const publicUrl = `${supabaseUrl}/storage/v1/object/public/brand-logos/${storagePath}`;
+
  const saveRes = await fetch(
    `${supabaseUrl}/rest/v1/rpc/upsert_brand_settings`,
    {
@@ -122,7 +126,7 @@ export async function uploadOlatheSweetLogo(
      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
      body: JSON.stringify({
        p_brand_id: brandId,
-        p_olathe_sweet_logo_url: url,
+        p_olathe_sweet_logo_url: publicUrl,
      }),
    }
  );
@@ -131,7 +135,7 @@ export async function uploadOlatheSweetLogo(
    return { success: false, error: "Upload succeeded but failed to save URL" };
  }

-  return { success: true, logoUrl: url };
+  return { success: true, logoUrl: publicUrl };
 }

 export async function uploadOlatheSweetLogoDark(
@@ -156,27 +160,29 @@ export async function uploadOlatheSweetLogoDark(
  }

  const ext = file.type === "image/svg+xml" ? "svg" : file.type.split("/")[1];
-  const key = storageKeys.brandLogo(brandId, `olathe-sweet-logo-dark.${ext}`);
+  const storagePath = `brand-logos/${brandId}/olathe-sweet-logo-dark.${ext}`;

  const arrayBuffer = await file.arrayBuffer();
  const buffer = Buffer.from(arrayBuffer);

-  let url: string;
-  try {
-    const res = await uploadFile({
-      bucket: BUCKETS.BRAND_LOGOS,
-      key,
-      body: buffer,
-      contentType: file.type,
-    });
-    url = res.url;
-  } catch (e) {
-    return { success: false, error: `Upload failed: ${(e as Error).message}` };
-  }
-
  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
  const supabaseKey = process.env.SUPABASE_SERVICE_ROLE_KEY!;

+  const uploadRes = await fetch(
+    `${supabaseUrl}/storage/v1/object/brand-logos/${storagePath}`,
+    {
+      method: "PUT",
+      headers: { ...svcHeaders(supabaseKey), "Content-Type": file.type, "x-upsert": "true" },
+      body: buffer,
+    }
+  );
+
+  if (!uploadRes.ok) {
+    return { success: false, error: `Upload failed: ${await uploadRes.text()}` };
+  }
+
+  const publicUrl = `${supabaseUrl}/storage/v1/object/public/brand-logos/${storagePath}`;
+
  const saveRes = await fetch(
    `${supabaseUrl}/rest/v1/rpc/upsert_brand_settings`,
    {
@@ -184,7 +190,7 @@ export async function uploadOlatheSweetLogoDark(
      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
      body: JSON.stringify({
        p_brand_id: brandId,
-        p_olathe_sweet_logo_url_dark: url,
+        p_olathe_sweet_logo_url_dark: publicUrl,
      }),
    }
  );
@@ -193,7 +199,7 @@ export async function uploadOlatheSweetLogoDark(
    return { success: false, error: "Upload succeeded but failed to save URL" };
  }

-  return { success: true, logoUrl: url };
+  return { success: true, logoUrl: publicUrl };
 }

 export type BrandSettings = {
@@ -265,25 +271,37 @@ export async function getBrandSettings(brandId: string): Promise<GetBrandSetting

 // Public version for storefront pages — uses slug, no auth required
 export async function getBrandSettingsPublic(brandSlug: string): Promise<GetBrandSettingsResult & { wholesaleEnabled?: boolean | null }> {
-  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
-  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+  // Build-time prerender runs before Supabase env is configured. Return
+  // a not-configured result; the page falls back to slug-based defaults.
+  if (!supabaseUrl || !supabaseKey) {
+    return { success: false, error: "Supabase not configured", wholesaleEnabled: undefined };
+  }

-  const response = await fetch(
-    `${supabaseUrl}/rest/v1/rpc/get_brand_settings_by_slug`,
-    {
-      method: "POST",
-      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
-      body: JSON.stringify({ p_brand_slug: brandSlug }),
-    }
-  );
+  // Wrapped in try/catch so a build-time Supabase outage (ECONNREFUSED)
+  // doesn't crash the prerender — the page just falls back to its
+  // default brand name and revalidates from a real request later.
+  try {
+    const response = await fetch(
+      `${supabaseUrl}/rest/v1/rpc/get_brand_settings_by_slug`,
+      {
+        method: "POST",
+        headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
+        body: JSON.stringify({ p_brand_slug: brandSlug }),
+      }
+    );

-  if (!response.ok) return { success: false, error: "Failed to fetch brand settings", wholesaleEnabled: undefined };
-  const data = await response.json();
-  return {
-    success: true,
-    settings: data,
-    wholesaleEnabled: data?.wholesale_enabled,
-  };
+    if (!response.ok) return { success: false, error: "Failed to fetch brand settings", wholesaleEnabled: undefined };
+    const data = await response.json();
+    return {
+      success: true,
+      settings: data,
+      wholesaleEnabled: data?.wholesale_enabled,
+    };
+  } catch {
+    return { success: false, error: "Failed to fetch brand settings", wholesaleEnabled: undefined };
+  }
 }

 export async function saveBrandSettings(params: {
@@ -0,0 +1,65 @@
+import "server-only";
+
+import { getAdminUser } from "@/lib/admin-permissions";
+import { svcHeaders } from "@/lib/svc-headers";
+
+export type BrandListItem = {
+  id: string;
+  name: string;
+  slug: string;
+  logo_url: string | null;
+};
+
+/**
+ * Returns the list of brands the current admin user can act in.
+ *
+ * - platform_admin: all brands (queried directly from the `brands` table)
+ * - everyone else: brands in `adminUser.brand_ids`
+ * - empty array for unauthenticated / no-access admins
+ *
+ * This is a plain async function (not a server action) so it can be called
+ * from server components and server actions without the "use server" wrapper.
+ * The BrandSelector client component receives the result as a prop.
+ */
+export async function listBrandsForAdmin(): Promise<BrandListItem[]> {
+  const adminUser = await getAdminUser();
+  if (!adminUser) return [];
+
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const serviceKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
+  if (!supabaseUrl || !serviceKey) return [];
+
+  if (adminUser.role === "platform_admin") {
+    try {
+      const res = await fetch(
+        `${supabaseUrl}/rest/v1/brands?select=id,name,slug,logo_url&order=name`,
+        { headers: svcHeaders(serviceKey), cache: "no-store" }
+      );
+      if (!res.ok) return [];
+      const data = await res.json();
+      return Array.isArray(data) ? data : [];
+    } catch {
+      return [];
+    }
+  }
+
+  if (adminUser.brand_ids.length === 0) return [];
+
+  // Use PostgREST `in` filter. The brand_ids are UUIDs, so the quoting
+  // pattern in the spec is safe; the inner quotes are required by PostgREST
+  // for UUID literals.
+  const filter = `id=in.(${adminUser.brand_ids
+    .map((id) => `"${id}"`)
+    .join(",")})`;
+  try {
+    const res = await fetch(
+      `${supabaseUrl}/rest/v1/brands?${filter}&select=id,name,slug,logo_url&order=name`,
+      { headers: svcHeaders(serviceKey), cache: "no-store" }
+    );
+    if (!res.ok) return [];
+    const data = await res.json();
+    return Array.isArray(data) ? data : [];
+  } catch {
+    return [];
+  }
+}
@@ -1,6 +1,7 @@
 "use server";

 import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
 import { svcHeaders } from "@/lib/svc-headers";

 export type CampaignType = "marketing" | "operational" | "transactional";
@@ -57,7 +58,11 @@ export async function getCommunicationCampaigns(brandId?: string): Promise<ListC
  const adminUser = await getAdminUser();
  if (!adminUser) return { success: false, error: "Not authenticated" };

-  const effectiveBrandId = brandId ?? adminUser.brand_id ?? null;
+  const activeBrandId = await getActiveBrandId(adminUser, brandId);
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return { success: false, error: "Brand access required" };
+  }
+  const effectiveBrandId = activeBrandId;

  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
@@ -147,7 +152,7 @@ export async function deleteCampaign(campaignId: string, brandId?: string): Prom
    {
      method: "POST",
      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
-      body: JSON.stringify({ p_campaign_id: campaignId, p_brand_id: adminUser.brand_id ?? null }),
+      body: JSON.stringify({ p_campaign_id: campaignId, p_brand_id: (await getActiveBrandId(adminUser)) ?? null }),
    }
  );

@@ -167,7 +172,7 @@ export async function getCampaignById(campaignId: string, brandId?: string): Pro
    {
      method: "POST",
      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
-      body: JSON.stringify({ p_campaign_id: campaignId, p_brand_id: brandId ?? adminUser.brand_id ?? null }),
+      body: JSON.stringify({ p_campaign_id: campaignId, p_brand_id: (await getActiveBrandId(adminUser, brandId)) ?? null }),
    }
  );

@@ -2,7 +2,9 @@

 import { getAdminUser } from "@/lib/admin-permissions";
 import { svcHeaders } from "@/lib/svc-headers";
-import { uploadFile, listFiles, BUCKETS, publicUrl, storageKeys } from "@/lib/storage";
+
+// Contact imports bucket
+const CONTACTS_BUCKET_ID = "a1b2c3d4-e5f6-7890-abcd-ef1234567890";

 export type UploadContactsResult =
  | { success: true; fileId: string; fileUrl: string; recordCount: number }
@@ -15,41 +17,57 @@ export async function uploadContactsToBucket(
  const adminUser = await getAdminUser();
  if (!adminUser) return { success: false, error: "Not authenticated" };

+  // Validate file type
  if (!file.name.endsWith(".csv")) {
    return { success: false, error: "Only CSV files are supported" };
  }

+  // For very large files (farmers with tons of data), check size
  const maxSize = 50 * 1024 * 1024; // 50MB max
  if (file.size > maxSize) {
    return { success: false, error: "File too large. Max 50MB for large imports." };
  }

-  const safeName = file.name.replace(/[^a-zA-Z0-9.-]/g, "_");
-  const key = storageKeys.contactsImport(brandId, safeName);
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+  const supabaseKey = process.env.SUPABASE_SERVICE_ROLE_KEY!;

+  // Generate unique path
+  const timestamp = Date.now();
+  const safeName = file.name.replace(/[^a-zA-Z0-9.-]/g, "_");
+  const path = `imports/${brandId}/${timestamp}-${safeName}`;
+
+  // Upload to bucket
  const arrayBuffer = await file.arrayBuffer();
  const buffer = Buffer.from(arrayBuffer);

-  let url: string;
-  try {
-    const res = await uploadFile({
-      bucket: BUCKETS.CONTACTS_IMPORTS,
-      key,
+  const uploadRes = await fetch(
+    `${supabaseUrl}/storage/v1/object/${CONTACTS_BUCKET_ID}/${path}`,
+    {
+      method: "PUT",
+      headers: {
+        ...svcHeaders(supabaseKey),
+        "Authorization": `Bearer ${supabaseKey}`,
+        "Content-Type": "text/csv",
+        "x-upsert": "false",
+      },
      body: buffer,
-      contentType: "text/csv",
-    });
-    url = res.url;
-  } catch (e) {
-    return { success: false, error: `Upload failed: ${(e as Error).message}` };
+    }
+  );
+
+  if (!uploadRes.ok) {
+    return { success: false, error: `Upload failed: ${await uploadRes.text()}` };
  }

-  const fileId = key.split("/").slice(0, 2).join("/"); // brandId/timestamp
+  const fileUrl = `${supabaseUrl}/storage/v1/object/public/${CONTACTS_BUCKET_ID}/${path}`;
+  const fileId = `${brandId}/${timestamp}`;
+
+  // Get rough row count from file size (approx 200 bytes per row)
  const estimatedRows = Math.floor(file.size / 200);

  return {
    success: true,
    fileId,
-    fileUrl: url,
+    fileUrl,
    recordCount: estimatedRows,
  };
 }
@@ -69,6 +87,7 @@ export async function processBucketImport(
  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
  const supabaseKey = process.env.SUPABASE_SERVICE_ROLE_KEY!;

+  // Call RPC to process the file from bucket
  const response = await fetch(
    `${supabaseUrl}/rest/v1/rpc/process_contact_import_from_url`,
    {
@@ -103,20 +122,37 @@ export async function listImportHistory(
  const adminUser = await getAdminUser();
  if (!adminUser) return { success: false, error: "Not authenticated" };

-  try {
-    const files = await listFiles(BUCKETS.CONTACTS_IMPORTS, `${brandId}/`);
-    return {
-      success: true,
-      imports: files.slice(0, limit).map((f) => ({
-        filename: f.key.split("/").pop() ?? "",
-        size: f.size,
-        createdAt: f.lastModified.toISOString(),
-        url: publicUrl(BUCKETS.CONTACTS_IMPORTS, f.key),
-      })),
-    };
-  } catch (e) {
-    return { success: false, error: (e as Error).message };
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+  const supabaseKey = process.env.SUPABASE_SERVICE_ROLE_KEY!;
+
+  // List files in the imports folder for this brand
+  const response = await fetch(
+    `${supabaseUrl}/storage/v1/object/list/${CONTACTS_BUCKET_ID}`,
+    {
+      method: "POST",
+      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
+      body: JSON.stringify({
+        prefix: `imports/${brandId}/`,
+        limit: limit,
+        sortBy: { column: "created_at", order: "desc" },
+      }),
+    }
+  );
+
+  if (!response.ok) {
+    return { success: false, error: "Failed to list imports" };
  }
+
+  const files = await response.json();
+  return {
+    success: true,
+    imports: files.map((f: { name: string; metadata: { size: number }; created_at: string }) => ({
+      filename: f.name.split("/").pop() ?? "",
+      size: f.metadata?.size ?? 0,
+      createdAt: f.created_at,
+      url: `${supabaseUrl}/storage/v1/object/public/${CONTACTS_BUCKET_ID}/${f.name}`,
+    })),
+  };
 }

 export type ImportHistoryItem = {
@@ -1,6 +1,7 @@
 "use server";

 import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
 import { svcHeaders } from "@/lib/svc-headers";
 import type { AudienceRules } from "./campaigns";

@@ -120,11 +121,15 @@ export async function sendCampaign(campaignId: string, brandId?: string): Promis
  const adminUser = await getAdminUser();
  if (!adminUser) return { success: false, error: "Not authenticated" };

-  // Resolve brand from campaign or parameter
-  const effectiveBrandId = brandId ?? adminUser.brand_id;
+  // Resolve brand from campaign or parameter (URL > cookie > legacy > first of brand_ids)
+  const activeBrandId = await getActiveBrandId(adminUser, brandId);
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return { success: false, error: "Brand access required" };
+  }
+  const effectiveBrandId = activeBrandId;

  // Brand scoping: brand_admin can only send their own brand's campaigns
-  if (adminUser.role === "brand_admin" && effectiveBrandId && adminUser.brand_id !== effectiveBrandId) {
+  if (adminUser.role === "brand_admin" && effectiveBrandId && !adminUser.brand_ids.includes(effectiveBrandId)) {
    return { success: false, error: "Not authorized to send this brand's campaigns" };
  }

@@ -1,6 +1,7 @@
 "use server";

 import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
 import { svcHeaders } from "@/lib/svc-headers";
 import type { AudienceRules } from "./campaigns";

@@ -33,7 +34,11 @@ export async function getCommunicationTemplates(brandId?: string): Promise<{ suc
  const adminUser = await getAdminUser();
  if (!adminUser) return { success: false, error: "Not authenticated" };

-  const effectiveBrandId = brandId ?? adminUser.brand_id ?? null;
+  const activeBrandId = await getActiveBrandId(adminUser, brandId);
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return { success: false, error: "Brand access required" };
+  }
+  const effectiveBrandId = activeBrandId;

  // Brand scoping: brand_admin can only see their own brand's templates
  if (adminUser.role === "brand_admin" && effectiveBrandId && effectiveBrandId !== adminUser.brand_id) {
@@ -112,7 +117,7 @@ export async function getTemplateById(templateId: string): Promise<Template | nu
    {
      method: "POST",
      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
-      body: JSON.stringify({ p_brand_id: adminUser.brand_id ?? null }),
+      body: JSON.stringify({ p_brand_id: (await getActiveBrandId(adminUser)) ?? null }),
    }
  );

@@ -1,6 +1,7 @@
 "use server";

 import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
 import { svcHeaders } from "@/lib/svc-headers";

 const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
@@ -66,7 +67,7 @@ export async function getDashboardStats(): Promise<DashboardStats> {
    const adminUser = await getAdminUser();
    if (!adminUser) throw new Error("Not authenticated");

-    const brandId = adminUser.brand_id ?? null;
+    const brandId = await getActiveBrandId(adminUser);

    // Get today's date range
    const today = new Date();
@@ -202,7 +203,7 @@ export async function getDashboardSummary(): Promise<DashboardSummary> {
    const adminUser = await getAdminUser();
    if (!adminUser) throw new Error("Not authenticated");

-    const brandId = adminUser.brand_id ?? null;
+    const brandId = await getActiveBrandId(adminUser);
    const thirtyDaysAgo = new Date();
    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);

@@ -0,0 +1,304 @@
+"use server";
+
+import { revalidateTag } from "next/cache";
+import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
+import { svcHeaders } from "@/lib/svc-headers";
+
+export type LocationInput = {
+  name: string;
+  address?: string | null;
+  city?: string | null;
+  state?: string | null;
+  zip?: string | null;
+  phone?: string | null;
+  contact_name?: string | null;
+  contact_email?: string | null;
+  notes?: string | null;
+  active?: boolean;
+};
+
+export type Location = {
+  id: string;
+  brand_id: string;
+  name: string;
+  address: string | null;
+  city: string | null;
+  state: string | null;
+  zip: string | null;
+  phone: string | null;
+  contact_name: string | null;
+  contact_email: string | null;
+  notes: string | null;
+  active: boolean;
+  deleted_at: string | null;
+  created_at: string;
+  updated_at: string;
+  slug: string | null;
+};
+
+export type LocationWithCount = Location & { stop_count: number };
+
+// ── Create (single) ──────────────────────────────────────────────────────────
+export async function createLocation(
+  brandId: string,
+  input: LocationInput
+): Promise<{ success: true; id: string; slug: string } | { success: false; error: string }> {
+  const adminUser = await getAdminUser();
+  if (!adminUser) return { success: false, error: "Not authenticated" };
+  if (!adminUser.can_manage_stops) {
+    return { success: false, error: "Not authorized to manage locations" };
+  }
+  const activeBrandId = await getActiveBrandId(adminUser, brandId);
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return { success: false, error: "Brand access required" };
+  }
+  const effectiveBrandId = activeBrandId;
+  if (!effectiveBrandId) return { success: false, error: "No brand selected" };
+
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
+
+  const res = await fetch(
+    `${supabaseUrl}/rest/v1/rpc/admin_create_location`,
+    {
+      method: "POST",
+      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
+      body: JSON.stringify({
+        p_brand_id: effectiveBrandId,
+        p_name: input.name,
+        p_address: input.address ?? null,
+        p_city: input.city ?? null,
+        p_state: input.state ?? null,
+        p_zip: input.zip ?? null,
+        p_phone: input.phone ?? null,
+        p_contact_name: input.contact_name ?? null,
+        p_contact_email: input.contact_email ?? null,
+        p_notes: input.notes ?? null,
+        p_active: input.active ?? true,
+      }),
+    }
+  );
+
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ message: "Request failed" }));
+    return { success: false, error: (err as { message?: string }).message ?? "Insert failed" };
+  }
+
+  const data = await res.json();
+  revalidateTag("locations", "default");
+  revalidateTag(`brand:${effectiveBrandId}:locations`, "default");
+  return { success: true, id: data.id, slug: data.slug };
+}
+
+// ── Create (batch) ───────────────────────────────────────────────────────────
+export async function createLocationsBatch(
+  brandId: string,
+  locations: LocationInput[]
+): Promise<{ success: boolean; created: number; error?: string }> {
+  const adminUser = await getAdminUser();
+  if (!adminUser) return { success: false, created: 0, error: "Not authenticated" };
+  if (!adminUser.can_manage_stops) {
+    return { success: false, created: 0, error: "Not authorized" };
+  }
+  const activeBrandId = await getActiveBrandId(adminUser, brandId);
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return { success: false, created: 0, error: "Brand access required" };
+  }
+  const effectiveBrandId = activeBrandId;
+  if (!effectiveBrandId) return { success: false, created: 0, error: "No brand selected" };
+
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
+
+  const res = await fetch(
+    `${supabaseUrl}/rest/v1/rpc/admin_create_locations_batch`,
+    {
+      method: "POST",
+      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
+      body: JSON.stringify({ p_brand_id: effectiveBrandId, p_locations: locations }),
+    }
+  );
+
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ message: "Request failed" }));
+    return { success: false, created: 0, error: (err as { message?: string }).message ?? "Insert failed" };
+  }
+
+  const inserted = await res.json();
+  revalidateTag("locations", "default");
+  revalidateTag(`brand:${effectiveBrandId}:locations`, "default");
+  return {
+    success: true,
+    created: Array.isArray(inserted) ? inserted.length : locations.length,
+  };
+}
+
+// ── Update (partial) ─────────────────────────────────────────────────────────
+export async function updateLocation(
+  locationId: string,
+  brandId: string,
+  updates: Partial<LocationInput>
+): Promise<{ success: boolean; error?: string }> {
+  const adminUser = await getAdminUser();
+  if (!adminUser) return { success: false, error: "Not authenticated" };
+  if (!adminUser.can_manage_stops) return { success: false, error: "Not authorized" };
+
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
+
+  const res = await fetch(
+    `${supabaseUrl}/rest/v1/rpc/admin_update_location`,
+    {
+      method: "POST",
+      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
+      body: JSON.stringify({ p_location_id: locationId, p_brand_id: brandId, p_updates: updates }),
+    }
+  );
+
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ message: "Request failed" }));
+    return { success: false, error: (err as { message?: string }).message ?? "Update failed" };
+  }
+
+  const data = await res.json();
+  if (!data.success) return { success: false, error: data.error ?? "Update failed" };
+
+  revalidateTag("locations", "default");
+  revalidateTag(`brand:${brandId}:locations`, "default");
+  return { success: true };
+}
+
+// ── Delete (soft) ────────────────────────────────────────────────────────────
+export async function deleteLocation(
+  locationId: string,
+  brandId: string
+): Promise<{ success: boolean; error?: string }> {
+  const adminUser = await getAdminUser();
+  if (!adminUser) return { success: false, error: "Not authenticated" };
+  if (!adminUser.can_manage_stops) return { success: false, error: "Not authorized" };
+
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
+
+  const res = await fetch(
+    `${supabaseUrl}/rest/v1/rpc/admin_delete_location`,
+    {
+      method: "POST",
+      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
+      body: JSON.stringify({ p_location_id: locationId, p_brand_id: brandId }),
+    }
+  );
+
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ message: "Request failed" }));
+    return { success: false, error: (err as { message?: string }).message ?? "Delete failed" };
+  }
+
+  const data = await res.json();
+  if (!data.success) return { success: false, error: data.error ?? "Delete failed" };
+
+  revalidateTag("locations", "default");
+  revalidateTag(`brand:${brandId}:locations`, "default");
+  return { success: true };
+}
+
+// ── Read (admin, by brand_id) ────────────────────────────────────────────────
+export async function adminListLocations(
+  brandId: string
+): Promise<LocationWithCount[]> {
+  const adminUser = await getAdminUser();
+  if (!adminUser) return [];
+
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
+
+  // Application-layer brand scoping: platform_admin (brand_id: null) gets all
+  // brands; everyone else gets only their own brand.
+  const activeBrandId = await getActiveBrandId(adminUser, brandId);
+  const effectiveBrandId = activeBrandId;
+
+  const res = await fetch(
+    `${supabaseUrl}/rest/v1/rpc/admin_list_locations`,
+    {
+      method: "POST",
+      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
+      body: JSON.stringify({ p_brand_id: effectiveBrandId }),
+      next: { revalidate: 60, tags: ["locations", `brand:${effectiveBrandId ?? "all"}:locations`] },
+    }
+  );
+
+  if (!res.ok) return [];
+  const data = await res.json();
+  return Array.isArray(data) ? (data as LocationWithCount[]) : [];
+}
+
+// ── Read (public, by brand slug) ─────────────────────────────────────────────
+export type PublicLocation = Pick<
+  Location,
+  "id" | "name" | "address" | "city" | "state" | "zip" | "phone" | "slug"
+> & { stop_count: number };
+
+export async function getPublicLocationsForBrand(
+  brandSlug: string
+): Promise<PublicLocation[]> {
+  if (!brandSlug) return [];
+
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
+
+  const res = await fetch(
+    `${supabaseUrl}/rest/v1/rpc/get_locations_for_brand`,
+    {
+      method: "POST",
+      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
+      body: JSON.stringify({ p_brand_slug: brandSlug }),
+      next: { revalidate: 300, tags: ["locations", `brand:${brandSlug}:locations`] },
+    }
+  );
+
+  if (!res.ok) return [];
+  const data = await res.json();
+  return Array.isArray(data) ? (data as PublicLocation[]) : [];
+}
+
+// ── Attach a stop to a location ──────────────────────────────────────────────
+export async function attachStopToLocation(
+  stopId: string,
+  locationId: string,
+  brandId: string
+): Promise<{ success: boolean; error?: string }> {
+  const adminUser = await getAdminUser();
+  if (!adminUser) return { success: false, error: "Not authenticated" };
+  if (!adminUser.can_manage_stops) return { success: false, error: "Not authorized" };
+
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
+
+  const res = await fetch(
+    `${supabaseUrl}/rest/v1/rpc/admin_attach_location_to_stop`,
+    {
+      method: "POST",
+      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
+      body: JSON.stringify({
+        p_stop_id: stopId,
+        p_location_id: locationId,
+        p_brand_id: brandId,
+      }),
+    }
+  );
+
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ message: "Request failed" }));
+    return { success: false, error: (err as { message?: string }).message ?? "Attach failed" };
+  }
+
+  const data = await res.json();
+  if (!data.success) return { success: false, error: data.error ?? "Attach failed" };
+
+  revalidateTag("stops", "default");
+  revalidateTag("locations", "default");
+  revalidateTag(`brand:${brandId}:stops`, "default");
+  revalidateTag(`brand:${brandId}:locations`, "default");
+  return { success: true };
+}
@@ -1,7 +1,7 @@
 "use server";

-import { headers } from "next/headers";
-import { auth } from "@/lib/auth";
+import { cookies } from "next/headers";
+import { createServerClient } from "@supabase/ssr";

 export type LoginWithPasswordResult =
  | { success: true; redirect: true }
@@ -11,21 +11,46 @@ export async function loginWithPassword(
  email: string,
  password: string
 ): Promise<LoginWithPasswordResult> {
-  try {
-    const hdrs = await headers();
-    const result = await auth.api.signInEmail({
-      body: { email, password },
-      headers: hdrs,
-      asResponse: false,
-    });
+  const cookieStore = await cookies();

-    if (!result?.user) {
-      return { success: false, error: "Invalid credentials" };
-    }
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

-    return { success: true, redirect: true };
-  } catch (e: unknown) {
-    const message = e instanceof Error ? e.message : "Invalid credentials";
-    return { success: false, error: message };
+  if (!supabaseUrl || !supabaseAnonKey) {
+    return { success: false, error: "Server misconfiguration." };
  }
+
+  const supabase = createServerClient(supabaseUrl, supabaseAnonKey, {
+    cookies: {
+      getAll() {
+        return cookieStore.getAll();
+      },
+      setAll(cookiesToSet) {
+        cookiesToSet.forEach(({ name, value, options }) => {
+          cookieStore.set(name, value, options);
+        });
+      },
+    },
+  });
+
+  const { data, error } = await supabase.auth.signInWithPassword({
+    email,
+    password,
+  });
+
+  if (error || !data.user) {
+    return { success: false, error: error?.message || "Invalid credentials" };
+  }
+
+  // Set the rc_auth_uid cookie that getAdminUser() reads
+  const isProd = process.env.NODE_ENV === "production";
+  cookieStore.set("rc_auth_uid", data.user.id, {
+    path: "/",
+    maxAge: 60 * 60 * 24 * 30,
+    httpOnly: true,
+    sameSite: "lax",
+    secure: isProd,
+  });
+
+  return { success: true, redirect: true };
 }
@@ -1,6 +1,7 @@
 "use server";

 import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
 import { svcHeaders } from "@/lib/svc-headers";
 import { randomUUID } from "crypto";

@@ -41,7 +42,11 @@ export async function createAdminOrder(
  }

  // Brand scoping
-  const effectiveBrandId = brandId ?? adminUser.brand_id ?? null;
+  const activeBrandId = await getActiveBrandId(adminUser, brandId);
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return { success: false, error: "Brand access required" };
+  }
+  const effectiveBrandId = activeBrandId;
  if (adminUser.role === "brand_admin" && adminUser.brand_id && effectiveBrandId !== adminUser.brand_id) {
    return { success: false, error: "Not authorized for this brand" };
  }
@@ -1,6 +1,7 @@
 "use server";

 import { getAdminUser } from "@/lib/admin-permissions";
+import { assertBrandAccess } from "@/lib/brand-scope";
 import { svcHeaders } from "@/lib/svc-headers";

 export type PaymentProvider = "stripe" | "square" | "manual";
@@ -65,10 +66,9 @@ export async function savePaymentSettings(params: {
    return { success: false, error: "Not authorized" };
  }

-  if (
-    adminUser.role === "brand_admin" &&
-    adminUser.brand_id !== params.brandId
-  ) {
+  try {
+    assertBrandAccess(adminUser, params.brandId);
+  } catch {
    return { success: false, error: "Not authorized for this brand" };
  }

@@ -1,6 +1,7 @@
 "use server";

 import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
 import { svcHeaders } from "@/lib/svc-headers";

 export async function deleteProduct(
@@ -16,7 +17,11 @@ export async function deleteProduct(
    return { success: false, error: "Not authorized to manage products" };
  }

-  const effectiveBrandId = brandId ?? adminUser.brand_id ?? null;
+  const activeBrandId = await getActiveBrandId(adminUser, brandId);
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return { success: false, error: "Brand access required" };
+  }
+  const effectiveBrandId = activeBrandId;

  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
@@ -2,7 +2,9 @@

 import { getAdminUser } from "@/lib/admin-permissions";
 import { svcHeaders } from "@/lib/svc-headers";
-import { uploadFile, BUCKETS, storageKeys } from "@/lib/storage";
+
+// Product images bucket - UUID from Supabase
+const PRODUCT_IMAGES_BUCKET_ID = "80aa01da-ab4b-44f8-b6e7-700552457e18";

 export type UploadProductImageResult =
  | { success: true; imageUrl: string }
@@ -23,41 +25,47 @@ export async function uploadProductImage(
    return { success: false, error: "File too large. Max 5MB." };
  }

-  const rawExt = file.type.split("/")[1];
-  const ext = rawExt === "jpeg" ? "jpg" : rawExt;
-  const targetProductId = productId === "__NEW__" ? "new" : productId;
-  const key = storageKeys.productImage(targetProductId, ext);
+  const ext = file.type.split("/")[1] === "jpeg" ? "jpg" : file.type.split("/")[1];
+  const path = `products/${productId}/${crypto.randomUUID()}.${ext}`;

  const arrayBuffer = await file.arrayBuffer();
  const buffer = Buffer.from(arrayBuffer);

-  let url: string;
-  try {
-    const res = await uploadFile({
-      bucket: BUCKETS.PRODUCT_IMAGES,
-      key,
-      body: buffer,
-      contentType: file.type,
-    });
-    url = res.url;
-  } catch (e) {
-    return { success: false, error: `Upload failed: ${(e as Error).message}` };
-  }
-
-  // If productId is "__NEW__", we just upload and return the URL (caller handles saving it)
-  if (productId === "__NEW__") {
-    return { success: true, imageUrl: url };
-  }
-
  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
  const supabaseKey = process.env.SUPABASE_SERVICE_ROLE_KEY!;

+  const uploadRes = await fetch(
+    `${supabaseUrl}/storage/v1/object/${PRODUCT_IMAGES_BUCKET_ID}/${path}`,
+    {
+      method: "PUT",
+      headers: { 
+        "apikey": supabaseKey,
+        "Authorization": `Bearer ${supabaseKey}`,
+        "Content-Type": `image/${ext}`, 
+        "x-upsert": "true" 
+      },
+      body: buffer,
+    }
+  );
+
+  if (!uploadRes.ok) {
+    return { success: false, error: `Upload failed: ${await uploadRes.text()}` };
+  }
+
+  const publicUrl = `${supabaseUrl}/storage/v1/object/public/${PRODUCT_IMAGES_BUCKET_ID}/${path}`;
+
+  // If productId is "__NEW__", we just upload and return the URL (caller handles saving it)
+  if (productId === "__NEW__") {
+    return { success: true, imageUrl: publicUrl };
+  }
+
+  // Update product record with new image URL
  const patchRes = await fetch(
    `${supabaseUrl}/rest/v1/products?id=eq.${productId}`,
    {
      method: "PATCH",
      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
-      body: JSON.stringify({ image_url: url }),
+      body: JSON.stringify({ image_url: publicUrl }),
    }
  );

@@ -65,7 +73,7 @@ export async function uploadProductImage(
    return { success: false, error: "Upload succeeded but failed to save image URL" };
  }

-  return { success: true, imageUrl: url };
+  return { success: true, imageUrl: publicUrl };
 }

 export async function deleteProductImage(
@@ -1,6 +1,7 @@
 "use server";

 import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId, assertBrandAccess } from "@/lib/brand-scope";
 import { svcHeaders } from "@/lib/svc-headers";

 const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL!;
@@ -153,7 +154,14 @@ export interface FieldYieldSummary {
 export async function getRouteTraceLots(brandId: string, status?: string) {
  const adminUser = await getAdminUser();
  if (!adminUser) return { success: false, error: "Unauthorized" };
-  const effectiveBrandId = brandId ?? adminUser.brand_id ?? undefined;
+  const activeBrandId = await getActiveBrandId(adminUser, brandId);
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return { success: false, error: "Brand access required" };
+  }
+  if (activeBrandId) {
+    try { assertBrandAccess(adminUser, activeBrandId); } catch { return { success: false, error: "Brand access denied" }; }
+  }
+  const effectiveBrandId = activeBrandId ?? undefined;
  if (!effectiveBrandId) return { success: false, error: "No brand" };

  try {
@@ -235,7 +243,14 @@ export async function createHarvestLot(
 ) {
  const adminUser = await getAdminUser();
  if (!adminUser) return { success: false, error: "Unauthorized" };
-  const effectiveBrandId = brandId ?? adminUser.brand_id ?? undefined;
+  const activeBrandId = await getActiveBrandId(adminUser, brandId);
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return { success: false, error: "Brand access required" };
+  }
+  if (activeBrandId) {
+    try { assertBrandAccess(adminUser, activeBrandId); } catch { return { success: false, error: "Brand access denied" }; }
+  }
+  const effectiveBrandId = activeBrandId ?? undefined;
  if (!effectiveBrandId) return { success: false, error: "No brand" };

  try {
@@ -298,7 +313,14 @@ export async function updateHarvestLotStatus(
 export async function getRouteTraceStats(brandId: string) {
  const adminUser = await getAdminUser();
  if (!adminUser) return { success: false, error: "Unauthorized" };
-  const effectiveBrandId = brandId ?? adminUser.brand_id ?? undefined;
+  const activeBrandId = await getActiveBrandId(adminUser, brandId);
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return { success: false, error: "Brand access required" };
+  }
+  if (activeBrandId) {
+    try { assertBrandAccess(adminUser, activeBrandId); } catch { return { success: false, error: "Brand access denied" }; }
+  }
+  const effectiveBrandId = activeBrandId ?? undefined;
  if (!effectiveBrandId) return { success: false, error: "No brand" };

  try {
@@ -318,7 +340,14 @@ export async function getRouteTraceStats(brandId: string) {
 export async function searchHarvestLots(brandId: string, query: string) {
  const adminUser = await getAdminUser();
  if (!adminUser) return { success: false, error: "Unauthorized" };
-  const effectiveBrandId = brandId ?? adminUser.brand_id ?? undefined;
+  const activeBrandId = await getActiveBrandId(adminUser, brandId);
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return { success: false, error: "Brand access required" };
+  }
+  if (activeBrandId) {
+    try { assertBrandAccess(adminUser, activeBrandId); } catch { return { success: false, error: "Brand access denied" }; }
+  }
+  const effectiveBrandId = activeBrandId ?? undefined;
  if (!effectiveBrandId) return { success: false, error: "No brand" };

  try {
@@ -347,7 +376,14 @@ export async function getTraceChain(lotId: string) {
 export async function getHarvestLotsReadyToHaul(brandId: string) {
  const adminUser = await getAdminUser();
  if (!adminUser) return { success: false, error: "Unauthorized" };
-  const effectiveBrandId = brandId ?? adminUser.brand_id ?? undefined;
+  const activeBrandId = await getActiveBrandId(adminUser, brandId);
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return { success: false, error: "Brand access required" };
+  }
+  if (activeBrandId) {
+    try { assertBrandAccess(adminUser, activeBrandId); } catch { return { success: false, error: "Brand access denied" }; }
+  }
+  const effectiveBrandId = activeBrandId ?? undefined;
  if (!effectiveBrandId) return { success: false, error: "No brand" };

  try {
@@ -364,7 +400,14 @@ export async function getHarvestLotsReadyToHaul(brandId: string) {
 export async function getFieldYieldSummary(brandId: string) {
  const adminUser = await getAdminUser();
  if (!adminUser) return { success: false, error: "Unauthorized" };
-  const effectiveBrandId = brandId ?? adminUser.brand_id ?? undefined;
+  const activeBrandId = await getActiveBrandId(adminUser, brandId);
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return { success: false, error: "Brand access required" };
+  }
+  if (activeBrandId) {
+    try { assertBrandAccess(adminUser, activeBrandId); } catch { return { success: false, error: "Brand access denied" }; }
+  }
+  const effectiveBrandId = activeBrandId ?? undefined;
  if (!effectiveBrandId) return { success: false, error: "No brand" };

  try {
@@ -405,7 +448,14 @@ export interface InventoryByCrop {
 export async function getInventoryByCrop(brandId: string): Promise<{ success: true; inventory: InventoryByCrop[] } | { success: false; error: string }> {
  const adminUser = await getAdminUser();
  if (!adminUser) return { success: false, error: "Unauthorized" };
-  const effectiveBrandId = brandId ?? adminUser.brand_id ?? undefined;
+  const activeBrandId = await getActiveBrandId(adminUser, brandId);
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return { success: false, error: "Brand access required" };
+  }
+  if (activeBrandId) {
+    try { assertBrandAccess(adminUser, activeBrandId); } catch { return { success: false, error: "Brand access denied" }; }
+  }
+  const effectiveBrandId = activeBrandId ?? undefined;
  if (!effectiveBrandId) return { success: false, error: "No brand" };

  try {
@@ -451,7 +501,14 @@ export async function getRecentLotEvents(
 ): Promise<{ success: true; events: RecentLotEvent[] } | { success: false; error: string }> {
  const adminUser = await getAdminUser();
  if (!adminUser) return { success: false, error: "Unauthorized" };
-  const effectiveBrandId = brandId ?? adminUser.brand_id ?? undefined;
+  const activeBrandId = await getActiveBrandId(adminUser, brandId);
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return { success: false, error: "Brand access required" };
+  }
+  if (activeBrandId) {
+    try { assertBrandAccess(adminUser, activeBrandId); } catch { return { success: false, error: "Brand access denied" }; }
+  }
+  const effectiveBrandId = activeBrandId ?? undefined;
  if (!effectiveBrandId) return { success: false, error: "No brand" };

  try {
@@ -0,0 +1,47 @@
+"use server";
+
+import { getAdminUser } from "@/lib/admin-permissions";
+import {
+  setActiveBrandCookie,
+  clearActiveBrandCookie,
+} from "@/lib/brand-scope";
+
+/**
+ * Set the persistent "active brand" for the current admin user.
+ *
+ * - `brandId === null`: "All brands" — only allowed for platform_admin.
+ *   Clears the cookie (cookie absence = no specific brand pinned).
+ * - `brandId` string: sets the cookie, after validating the admin has access.
+ *
+ * The active brand is the default the UI uses for pages that don't receive
+ * an explicit `brandId` from the URL. The cookie is the source of truth —
+ * the URL is only for deep-linking.
+ */
+export async function setActiveBrand(
+  brandId: string | null
+): Promise<{ success: boolean; error?: string }> {
+  const adminUser = await getAdminUser();
+  if (!adminUser) return { success: false, error: "Not authenticated" };
+
+  // null = "All brands" (platform_admin only)
+  if (brandId === null) {
+    if (adminUser.role !== "platform_admin") {
+      return {
+        success: false,
+        error: "Only platform admins can select 'All brands'",
+      };
+    }
+    await clearActiveBrandCookie();
+    return { success: true };
+  }
+
+  if (
+    adminUser.role !== "platform_admin" &&
+    !adminUser.brand_ids.includes(brandId)
+  ) {
+    return { success: false, error: "No access to that brand" };
+  }
+
+  await setActiveBrandCookie(brandId);
+  return { success: true };
+}
@@ -1,6 +1,7 @@
 "use server";

 import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
 import { svcHeaders } from "@/lib/svc-headers";

 export type UpdateShippingStatusResult =
@@ -28,7 +29,7 @@ export async function updateShippingStatus(
        p_order_id: orderId,
        p_shipping_status: status,
        p_tracking_number: trackingNumber ?? null,
-        p_brand_id: adminUser.brand_id ?? null,
+        p_brand_id: await getActiveBrandId(adminUser),
      }),
    }
  );
@@ -79,7 +80,7 @@ export async function getShippingOrders(): Promise<GetShippingOrdersResult> {
      method: "POST",
      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
      body: JSON.stringify({
-        p_brand_id: adminUser.brand_id ?? null,
+        p_brand_id: await getActiveBrandId(adminUser),
      }),
    }
  );
@@ -1,6 +1,7 @@
 "use server";

 import { getAdminUser } from "@/lib/admin-permissions";
+import { assertBrandAccess } from "@/lib/brand-scope";
 import { svcHeaders } from "@/lib/svc-headers";
 import type { FedExServiceType } from "./fedex-rates";

@@ -156,6 +157,10 @@ export async function createFedExShipment(
  const order = orders[0];
  if (!order) return { success: false, error: "Order not found" };

+  // The order's brand is the source of truth. Validate the admin has access.
+  if (order.brand_id) {
+    try { assertBrandAccess(adminUser, order.brand_id); } catch { return { success: false, error: "Brand access denied" }; }
+  }
  const effectiveBrandId = order.brand_id ?? adminUser.brand_id ?? null;

  // Get FedEx settings
@@ -11,6 +11,7 @@
 */

 import { getAdminUser } from "@/lib/admin-permissions";
+import { assertBrandAccess } from "@/lib/brand-scope";
 import { svcHeaders } from "@/lib/svc-headers";

 // ── Types ────────────────────────────────────────────────────────────────────
@@ -177,6 +178,10 @@ export async function getFedExRates(
  const order = orders[0];
  if (!order) return { success: false, error: "Order not found" };

+  // The order's brand is the source of truth. Validate the admin has access.
+  if (order.brand_id) {
+    try { assertBrandAccess(adminUser, order.brand_id); } catch { return { success: false, error: "Brand access denied" }; }
+  }
  const effectiveBrandId = order.brand_id ?? adminUser.brand_id ?? null;

  // Fetch shipping settings for this brand
@@ -1,6 +1,7 @@
 "use server";

 import { getAdminUser } from "@/lib/admin-permissions";
+import { assertBrandAccess } from "@/lib/brand-scope";
 import { svcHeaders } from "@/lib/svc-headers";

 export type SyncLogEntry = {
@@ -29,7 +30,9 @@ export async function syncSquareNow(
  const adminUser = await getAdminUser();
  if (!adminUser) return { success: false, synced: 0, errors: ["Not authenticated"] };
  if (!adminUser.can_manage_orders) return { success: false, synced: 0, errors: ["Not authorized"] };
-  if (adminUser.role === "brand_admin" && adminUser.brand_id !== brandId) {
+  try {
+    assertBrandAccess(adminUser, brandId);
+  } catch {
    return { success: false, synced: 0, errors: ["Not authorized"] };
  }

@@ -61,7 +64,9 @@ export async function getSyncLog(brandId: string): Promise<{
  const adminUser = await getAdminUser();
  if (!adminUser) return { success: false, logs: [] };
  if (!adminUser.can_manage_orders) return { success: false, logs: [] };
-  if (adminUser.role === "brand_admin" && adminUser.brand_id !== brandId) {
+  try {
+    assertBrandAccess(adminUser, brandId);
+  } catch {
    return { success: false, logs: [] };
  }

@@ -2,6 +2,7 @@

 import { revalidateTag } from "next/cache";
 import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
 import { svcHeaders } from "@/lib/svc-headers";

 export type StopImportRow = {
@@ -25,7 +26,11 @@ export async function createStopsBatch(
    return { success: false, created: 0, error: "Not authorized to manage stops" };
  }

-  const effectiveBrandId = brandId || adminUser.brand_id;
+  const activeBrandId = await getActiveBrandId(adminUser, brandId);
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return { success: false, created: 0, error: "Brand access required" };
+  }
+  const effectiveBrandId = activeBrandId;
  if (!effectiveBrandId) {
    return { success: false, created: 0, error: "No brand selected" };
  }
@@ -105,22 +110,31 @@ export type StopForSitemap = {
 };

 export async function getActiveStopsForSitemap(): Promise<StopForSitemap[]> {
-  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
-  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+  // Build-time prerender runs before Supabase env is configured. Returning
+  // an empty list lets the sitemap render with only the static URLs.
+  if (!supabaseUrl || !supabaseKey) return [];

-  // Get all active stops with their brand slug
-  const response = await fetch(
-    `${supabaseUrl}/rest/v1/rpc/get_active_stops_with_brand`,
-    {
-      method: "POST",
-      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
-    }
-  );
+  // Get all active stops with their brand slug. Wrapped in try/catch so a
+  // build-time outage (ECONNREFUSED) doesn't crash the prerender — the
+  // sitemap just renders without stop URLs.
+  try {
+    const response = await fetch(
+      `${supabaseUrl}/rest/v1/rpc/get_active_stops_with_brand`,
+      {
+        method: "POST",
+        headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
+      }
+    );

-  if (!response.ok) return [];
+    if (!response.ok) return [];

-  const stops = await response.json();
-  return Array.isArray(stops) ? stops : [];
+    const stops = await response.json();
+    return Array.isArray(stops) ? stops : [];
+  } catch {
+    return [];
+  }
 }

 /**
@@ -150,24 +164,35 @@ export async function getPublicStopsForBrand(
 ): Promise<PublicStop[]> {
  if (!brandSlug) return [];

-  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
-  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+  // Build-time prerender runs before Supabase env is configured. Returning
+  // an empty list lets the page render with zero stops; at runtime the
+  // fetch path is unchanged.
+  if (!supabaseUrl || !supabaseKey) return [];

-  const response = await fetch(
-    `${supabaseUrl}/rest/v1/rpc/get_public_stops_for_brand`,
-    {
-      method: "POST",
-      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
-      body: JSON.stringify({ p_brand_slug: brandSlug }),
-      next: {
-        revalidate: 300,
-        tags: ["stops", `brand:${brandSlug}:stops`],
-      },
-    }
-  );
+  // Wrapped in try/catch so a build-time Supabase outage (ECONNREFUSED)
+  // doesn't crash the prerender — the page just renders with no stops
+  // and revalidates from a real request once the cache is warm.
+  try {
+    const response = await fetch(
+      `${supabaseUrl}/rest/v1/rpc/get_public_stops_for_brand`,
+      {
+        method: "POST",
+        headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
+        body: JSON.stringify({ p_brand_slug: brandSlug }),
+        next: {
+          revalidate: 300,
+          tags: ["stops", `brand:${brandSlug}:stops`],
+        },
+      }
+    );

-  if (!response.ok) return [];
+    if (!response.ok) return [];

-  const stops = await response.json();
-  return Array.isArray(stops) ? (stops as PublicStop[]) : [];
+    const stops = await response.json();
+    return Array.isArray(stops) ? (stops as PublicStop[]) : [];
+  } catch {
+    return [];
+  }
 }
@@ -0,0 +1,122 @@
+"use server";
+
+import { getAdminUser } from "@/lib/admin-permissions";
+import { createClient } from "@supabase/supabase-js";
+
+export type StopDetail = {
+  id: string;
+  city: string;
+  state: string;
+  date: string;
+  time: string;
+  location: string;
+  slug: string;
+  active: boolean;
+  brand_id: string;
+  address: string | null;
+  zip: string | null;
+  cutoff_time: string | null;
+  brands: { name: string; slug: string } | { name: string; slug: string }[] | null;
+};
+
+export type AssignedProduct = {
+  id: string;
+  product_id: string;
+  products: { name: string; type: string; price: number } | null;
+};
+
+export type StopDetailsResult =
+  | {
+      success: true;
+      stop: StopDetail;
+      allProducts: { id: string; name: string; type: string; price: number }[];
+      assignedProducts: AssignedProduct[];
+      brands: { id: string; name: string; slug: string }[];
+      /** admin_users.user_id of the caller, forwarded to RPCs that authorise via user_id lookup */
+      callerUid: string;
+    }
+  | { success: false; error: string };
+
+/**
+ * Fetch a single stop with its brand, all candidate products, currently
+ * assigned products, and the list of brands (for the brand switcher in the
+ * edit form). Mirrors the data the old `/admin/stops/[id]` page server
+ * component loaded, so the modal can be a drop-in replacement.
+ */
+export async function getStopDetails(stopId: string): Promise<StopDetailsResult> {
+  const adminUser = await getAdminUser();
+  if (!adminUser) return { success: false, error: "Not authenticated" };
+  if (!adminUser.can_manage_stops) {
+    return { success: false, error: "Not authorized" };
+  }
+
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+  const supabaseKey = process.env.SUPABASE_SERVICE_ROLE_KEY!;
+  const useMockData = process.env.NEXT_PUBLIC_USE_MOCK_DATA === "true";
+
+  // Use a fresh server-side client (cookie-less) so RLS doesn't block reads
+  // for platform_admin dev sessions. The auth check above has already gated
+  // access.
+  const server = useMockData
+    ? null
+    : createClient(supabaseUrl, supabaseKey, {
+        auth: { persistSession: false, autoRefreshToken: false },
+      });
+
+  // 1. Stop + brand
+  let stop: StopDetail | null = null;
+  let stopErr: string | null = null;
+
+  if (server) {
+    const { data, error } = await server
+      .from("stops")
+      .select("*, brands(name, slug)")
+      .eq("id", stopId)
+      .single();
+    if (error) stopErr = error.message;
+    else stop = (data ?? null) as StopDetail | null;
+  } else {
+    // Mock fallback — empty
+    stopErr = "Stop not found";
+  }
+
+  if (!stop) {
+    return { success: false, error: stopErr ?? "Stop not found" };
+  }
+
+  // Brand-scope check for brand_admin
+  if (adminUser.brand_id && stop.brand_id !== adminUser.brand_id) {
+    return { success: false, error: "Not authorized for this brand" };
+  }
+
+  // 2. Candidate products for this brand
+  const { data: allProducts } = server
+    ? await server
+        .from("products")
+        .select("id, name, type, price")
+        .eq("brand_id", stop.brand_id)
+        .eq("active", true)
+    : { data: [] as { id: string; name: string; type: string; price: number }[] };
+
+  // 3. Assigned products (joined with product info)
+  const { data: productStops } = server
+    ? await server
+        .from("product_stops")
+        .select("id, product_id, products(id, name, type, price)")
+        .eq("stop_id", stopId)
+    : { data: [] as AssignedProduct[] };
+
+  // 4. Brands for the brand switcher
+  const { data: brands } = server
+    ? await server.from("brands").select("id, name, slug")
+    : { data: [] as { id: string; name: string; slug: string }[] };
+
+  return {
+    success: true,
+    stop,
+    allProducts: allProducts ?? [],
+    assignedProducts: (productStops ?? []) as AssignedProduct[],
+    brands: brands ?? [],
+    callerUid: adminUser.user_id,
+  };
+}
@@ -1,6 +1,7 @@
 "use server";

 import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
 import { svcHeaders } from "@/lib/svc-headers";

 type Irrigator = {
@@ -94,7 +95,7 @@ export async function updateWaterHeadgate(
        p_name: name,
        p_active: active,
        p_unit: unit ?? null,
-        p_brand_id: adminUser.brand_id ?? null,
+        p_brand_id: (await getActiveBrandId(adminUser)) ?? null,
        p_high_threshold: highThreshold ?? null,
        p_low_threshold: lowThreshold ?? null,
      }),
@@ -186,7 +187,7 @@ export async function updateWaterIrrigator(
        p_active: active,
        p_lang: lang,
        p_role: role,
-        p_brand_id: adminUser.brand_id ?? null,
+        p_brand_id: (await getActiveBrandId(adminUser)) ?? null,
      }),
    }
  );
@@ -215,7 +216,7 @@ export async function resetWaterIrrigatorPin(
      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
      body: JSON.stringify({
        p_user_id: irrigatorId,
-        p_brand_id: adminUser.brand_id ?? null,
+        p_brand_id: (await getActiveBrandId(adminUser)) ?? null,
      }),
    }
  );
@@ -242,7 +243,7 @@ export async function deleteWaterUser(userId: string): Promise<{ success: boolea
      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
      body: JSON.stringify({
        p_user_id: userId,
-        p_brand_id: adminUser.brand_id ?? null,
+        p_brand_id: (await getActiveBrandId(adminUser)) ?? null,
      }),
    }
  );
@@ -269,7 +270,7 @@ export async function deleteWaterHeadgate(headgateId: string): Promise<{ success
      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
      body: JSON.stringify({
        p_headgate_id: headgateId,
-        p_brand_id: adminUser.brand_id ?? null,
+        p_brand_id: (await getActiveBrandId(adminUser)) ?? null,
      }),
    }
  );
@@ -356,7 +357,7 @@ export async function regenerateHeadgateToken(headgateId: string): Promise<{ suc
    {
      method: "POST",
      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
-      body: JSON.stringify({ p_headgate_id: headgateId, p_brand_id: adminUser.brand_id ?? null }),
+      body: JSON.stringify({ p_headgate_id: headgateId, p_brand_id: (await getActiveBrandId(adminUser)) ?? null }),
    }
  );

@@ -392,7 +393,7 @@ export async function updateWaterEntry(
        p_measurement: measurement,
        p_notes: notes,
        p_unit: unit ?? null,
-        p_brand_id: adminUser.brand_id ?? null,
+        p_brand_id: (await getActiveBrandId(adminUser)) ?? null,
      }),
    }
  );
@@ -421,7 +422,7 @@ export async function deleteWaterEntry(
      headers: { ...svcHeaders(supabaseKey), "Content-Type": "application/json" },
      body: JSON.stringify({
        p_entry_id: entryId,
-        p_brand_id: adminUser.brand_id ?? null,
+        p_brand_id: (await getActiveBrandId(adminUser)) ?? null,
      }),
    }
  );
@@ -1,7 +1,8 @@
 "use server";

-import { cookies, headers } from "next/headers";
-import { auth } from "@/lib/auth";
+import { cookies } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
+import { svcHeaders } from "@/lib/svc-headers";

 export type WholesaleLoginResult =
  | { success: true; token: string; userId: string; customerId: string }
@@ -11,53 +12,121 @@ export async function wholesaleLoginAction(formData: FormData): Promise<Wholesal
  const email = formData.get("email") as string;
  const password = formData.get("password") as string;

-  try {
-    const hdrs = await headers();
-    const result = await auth.api.signInEmail({
-      body: { email, password },
-      headers: hdrs,
-      asResponse: false,
-    });
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;

-    if (!result?.user) {
-      return { success: false, error: "Invalid credentials" };
-    }
+  const cookieStore = await cookies();
+  const request = new NextRequest("http://localhost/wholesale/login", {
+    headers: new Headers(),
+  });
+  const response = NextResponse.next({ request });

-    const cookieStore = await cookies();
-    // Better Auth sets its own session cookie (rc_session_token).
-    // Mark wholesale session for portal routing.
-    cookieStore.set("wholesale_session", JSON.stringify({
-      user_id: result.user.id,
-    }), {
-      path: "/",
-      maxAge: 3600 * 24 * 7,
-      sameSite: "lax",
-      secure: process.env.NODE_ENV === "production",
-      httpOnly: false,
-    });
+  const { createServerClient } = await import("@supabase/ssr");
+  const supabase = createServerClient(supabaseUrl, supabaseAnonKey, {
+    cookies: {
+      getAll() {
+        return cookieStore.getAll();
+      },
+      setAll(cookiesToSet, headers) {
+        cookiesToSet.forEach(({ name, value, options }) => {
+          response.cookies.set(name, value, options);
+        });
+        Object.entries(headers).forEach(([key, value]) => {
+          response.headers.set(key, value);
+        });
+      },
+    },
+  });

-    return {
-      success: true,
-      token: "better-auth-session", // session lives in cookie
-      userId: result.user.id,
-      customerId: "pending", // resolved by portal page on load
-    };
-  } catch (e: unknown) {
-    const message = e instanceof Error ? e.message : "Invalid credentials";
-    return { success: false, error: message };
+  const { data, error } = await supabase.auth.signInWithPassword({
+    email,
+    password,
+  });
+
+  if (error || !data.user) {
+    return { success: false, error: error?.message ?? "Invalid credentials" };
  }
+
+  const { data: sessionData } = await supabase.auth.getSession();
+  const token = sessionData?.session?.access_token;
+
+  if (!token) {
+    return { success: false, error: "No session returned from auth" };
+  }
+
+  // Find the wholesale customer record for this user
+  const customerRes = await fetch(
+    `${supabaseUrl}/rest/v1/rpc/get_wholesale_customer_by_user`,
+    {
+      method: "POST",
+      headers: {
+        ...svcHeaders(supabaseAnonKey),
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        p_brand_id: "placeholder", // will use any-brand lookup below
+        p_user_id: data.user.id,
+      }),
+    }
+  );
+
+  // If no brand_id known, try all brands — just use first active one found
+  // For now, set the cookie with user_id and a placeholder; portal will resolve proper customer
+  response.cookies.set("wholesale_session", JSON.stringify({
+    user_id: data.user.id,
+    access_token: token,
+  }), {
+    path: "/",
+    maxAge: 3600 * 24 * 7,
+    sameSite: "lax",
+    secure: process.env.NODE_ENV === "production",
+    httpOnly: false,
+  });
+
+  // Also set the standard auth token for RPC calls
+  response.cookies.set("sb-wnzkhezyhnfzhkhiflrp-auth-token", token, {
+    path: "/",
+    maxAge: 3600 * 24 * 7,
+    sameSite: "lax",
+    secure: process.env.NODE_ENV === "production",
+    httpOnly: false,
+  });
+
+  return {
+    success: true,
+    token,
+    userId: data.user.id,
+    customerId: "pending", // resolved by portal page on load
+  };
 }

 export async function wholesaleLogoutAction() {
-  try {
-    const hdrs = await headers();
-    await auth.api.signOut({ headers: hdrs });
-  } catch {
-    // best-effort
-  }
-
  const cookieStore = await cookies();
-  cookieStore.delete("wholesale_session");
+  const request = new NextRequest("http://localhost/wholesale/portal", {
+    headers: new Headers(),
+  });
+  const response = NextResponse.next({ request });
+
+  response.cookies.delete("wholesale_session");
+
+  const { createServerClient } = await import("@supabase/ssr");
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
+
+  const supabase = createServerClient(supabaseUrl, supabaseAnonKey, {
+    cookies: {
+      getAll() {
+        return cookieStore.getAll();
+      },
+      setAll(cookiesToSet, headers) {
+        cookiesToSet.forEach(({ name, value, options }) => {
+          response.cookies.set(name, value, options);
+        });
+      },
+    },
+  });
+
+  await supabase.auth.signOut();

  return { success: true };
 }
@@ -1,6 +1,7 @@
 "use server";

 import { getAdminUser } from "@/lib/admin-permissions";
+import { assertBrandAccess } from "@/lib/brand-scope";
 import { svcHeaders } from "@/lib/svc-headers";

 export async function registerWholesaleCustomer(params: {
@@ -81,7 +82,9 @@ export async function approveWholesaleRegistration(
  const adminUser = await getAdminUser();
  if (!adminUser) return { success: false, error: "Not authenticated" };
  if (!adminUser.can_manage_orders) return { success: false, error: "Not authorized" };
-  if (adminUser.role !== "platform_admin" && adminUser.brand_id !== brandId) {
+  try {
+    assertBrandAccess(adminUser, brandId);
+  } catch {
    return { success: false, error: "Not authorized to operate on this brand" };
  }

@@ -1,6 +1,7 @@
 "use server";

 import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
 import { svcHeaders } from "@/lib/svc-headers";

 export type WholesaleOrder = {
@@ -129,15 +130,16 @@ export type WholesaleDashboardStats = {
 * platform_admin  → null (means "all brands" — passes to RPC unchanged)
 * brand_admin    → their own brand_id only; rejects attempts to operate on other brands
 * store_employee → their own brand_id
+ * multi_brand_admin → active brand from cookie/URL/legacy, must be in brand_ids
 * unauthenticated → null (actions should already bail out earlier)
 *
 * This prevents brand_admin from seeing or modifying another brand's data
 * even if they manually pass a different brandId to the action.
 */
-function resolveBrandId(
+async function resolveBrandId(
  adminUser: Awaited<ReturnType<typeof getAdminUser>>,
  requestedBrandId?: string
-): string | null {
+): Promise<string | null> {
  if (!adminUser) return null;

  if (adminUser.role === "platform_admin") {
@@ -145,15 +147,15 @@ function resolveBrandId(
    return null;
  }

-  // brand_admin and store_employee are scoped to their own brand
-  const userBrand = adminUser.brand_id ?? null;
+  // For non-platform-admin: resolve the active brand (validates against brand_ids)
+  const activeBrandId = await getActiveBrandId(adminUser, requestedBrandId);

-  if (requestedBrandId && requestedBrandId !== userBrand) {
+  if (requestedBrandId && activeBrandId !== requestedBrandId) {
    // Brand admin trying to operate on another brand's data — block it
    return null; // caller should check and return unauthorized
  }

-  return userBrand;
+  return activeBrandId;
 }

 /**
@@ -161,23 +163,24 @@ function resolveBrandId(
 * if a brand_admin tries to operate outside their brand.
 * Use for mutating actions (save, delete, fulfill) where cross-brand access must be blocked.
 */
-function enforceBrandScope(
+async function enforceBrandScope(
  adminUser: Awaited<ReturnType<typeof getAdminUser>>,
  requestedBrandId?: string
-): { brandId: string | null; error?: string } {
+): Promise<{ brandId: string | null; error?: string }> {
  if (!adminUser) return { brandId: null, error: "Not authenticated" };

  if (adminUser.role === "platform_admin") {
    return { brandId: null }; // unrestricted
  }

-  const userBrand = adminUser.brand_id ?? null;
+  // For non-platform-admin: resolve the active brand (validates against brand_ids)
+  const activeBrandId = await getActiveBrandId(adminUser, requestedBrandId);

-  if (requestedBrandId && requestedBrandId !== userBrand) {
+  if (requestedBrandId && activeBrandId !== requestedBrandId) {
    return { brandId: null, error: "Not authorized to operate on this brand" };
  }

-  return { brandId: userBrand };
+  return { brandId: activeBrandId };
 }

 // ── Orders ──────────────────────────────────────────────────────────────────
@@ -185,7 +188,7 @@ function enforceBrandScope(
 export async function getWholesaleOrders(brandId?: string): Promise<WholesaleOrder[]> {
  const adminUser = await getAdminUser();
  if (!adminUser) return [];
-  const bid = resolveBrandId(adminUser, brandId);
+  const bid = await resolveBrandId(adminUser, brandId);

  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
@@ -209,7 +212,7 @@ export async function getWholesaleOrders(brandId?: string): Promise<WholesaleOrd
 export async function getWholesalePickupOrders(brandId?: string): Promise<WholesaleOrder[]> {
  const adminUser = await getAdminUser();
  if (!adminUser) return [];
-  const bid = resolveBrandId(adminUser, brandId);
+  const bid = await resolveBrandId(adminUser, brandId);

  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
@@ -256,7 +259,7 @@ export async function markWholesaleOrderFulfilled(orderId: string, brandId?: str
  if (!adminUser) return { success: false, error: "Not authenticated" };
  if (!adminUser.can_manage_orders) return { success: false, error: "Not authorized" };

-  const { brandId: resolved, error } = enforceBrandScope(adminUser, brandId);
+  const { brandId: resolved, error } = await enforceBrandScope(adminUser, brandId);
  if (error) return { success: false, error };

  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
@@ -305,7 +308,7 @@ export async function updateWholesaleOrderStatus(
  if (!adminUser) return { success: false, error: "Not authenticated" };
  if (!adminUser.can_manage_orders) return { success: false, error: "Not authorized" };

-  const { error } = enforceBrandScope(adminUser, brandId);
+  const { error } = await enforceBrandScope(adminUser, brandId);
  if (error) return { success: false, error };

  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
@@ -332,7 +335,7 @@ export async function deleteWholesaleOrder(orderId: string, brandId?: string): P
  if (!adminUser) return { success: false, error: "Not authenticated" };
  if (!adminUser.can_manage_orders) return { success: false, error: "Not authorized" };

-  const { error } = enforceBrandScope(adminUser, brandId);
+  const { error } = await enforceBrandScope(adminUser, brandId);
  if (error) return { success: false, error };

  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
@@ -359,7 +362,7 @@ export async function deleteWholesaleCustomer(customerId: string, brandId?: stri
  if (!adminUser) return { success: false, error: "Not authenticated" };
  if (!adminUser.can_manage_orders) return { success: false, error: "Not authorized" };

-  const { error } = enforceBrandScope(adminUser, brandId);
+  const { error } = await enforceBrandScope(adminUser, brandId);
  if (error) return { success: false, error };

  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
@@ -388,7 +391,7 @@ export async function deleteWholesaleProduct(productId: string, brandId?: string
  if (!adminUser) return { success: false, error: "Not authenticated" };
  if (!adminUser.can_manage_products) return { success: false, error: "Not authorized" };

-  const { error } = enforceBrandScope(adminUser, brandId);
+  const { error } = await enforceBrandScope(adminUser, brandId);
  if (error) return { success: false, error };

  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
@@ -417,7 +420,7 @@ export async function deleteWholesaleProduct(productId: string, brandId?: string
 export async function getWholesaleCustomers(brandId?: string): Promise<WholesaleCustomer[]> {
  const adminUser = await getAdminUser();
  if (!adminUser) return [];
-  const bid = resolveBrandId(adminUser, brandId);
+  const bid = await resolveBrandId(adminUser, brandId);

  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
@@ -458,7 +461,7 @@ export async function saveWholesaleCustomer(params: {
  if (!adminUser) return { success: false, error: "Not authenticated" };
  if (!adminUser.can_manage_orders) return { success: false, error: "Not authorized" };

-  const { error } = enforceBrandScope(adminUser, params.brandId);
+  const { error } = await enforceBrandScope(adminUser, params.brandId);
  if (error) return { success: false, error };

  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
@@ -501,7 +504,7 @@ export async function saveWholesaleCustomer(params: {
 export async function getWholesaleProducts(brandId?: string): Promise<WholesaleProduct[]> {
  const adminUser = await getAdminUser();
  if (!adminUser) return [];
-  const bid = resolveBrandId(adminUser, brandId);
+  const bid = await resolveBrandId(adminUser, brandId);

  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
@@ -545,7 +548,7 @@ export async function saveWholesaleProduct(params: {
  if (!adminUser) return { success: false, error: "Not authenticated" };
  if (!adminUser.can_manage_products) return { success: false, error: "Not authorized" };

-  const { error } = enforceBrandScope(adminUser, params.brandId);
+  const { error } = await enforceBrandScope(adminUser, params.brandId);
  if (error) return { success: false, error };

  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
@@ -591,7 +594,10 @@ export async function saveWholesaleProduct(params: {
 export async function getWholesaleSettings(brandId?: string): Promise<WholesaleSettings | null> {
  const adminUser = await getAdminUser();
  if (!adminUser) return null;
-  const bid = brandId ?? adminUser.brand_id ?? null;
+  const bid = await getActiveBrandId(adminUser, brandId);
+  if (!bid && adminUser.role !== "platform_admin") {
+    return null;
+  }

  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
@@ -700,7 +706,7 @@ export async function recordWholesaleDeposit(
        p_method: method,
        p_reference: reference ?? null,
        p_recorded_by: adminUser.user_id,
-        p_brand_id: adminUser.brand_id ?? null,
+        p_brand_id: await getActiveBrandId(adminUser),
      }),
    }
  );
@@ -710,7 +716,7 @@ export async function recordWholesaleDeposit(
  if (!data?.success) return { success: false, error: data?.error ?? "Failed to record deposit" };

  // Fire webhook — fire-and-forget
-  enqueueWholesaleWebhookForDepositRecorded(orderId, amount, adminUser.brand_id ?? undefined).catch(() => {});
+  enqueueWholesaleWebhookForDepositRecorded(orderId, amount, (await getActiveBrandId(adminUser)) ?? undefined).catch(() => {});

  return { success: true };
 }
@@ -753,7 +759,7 @@ export async function bulkFulfillWholesaleOrders(
      body: JSON.stringify({
        p_order_ids: orderIds,
        p_by: adminUser.user_id,
-        p_brand_id: adminUser.brand_id ?? null,
+        p_brand_id: await getActiveBrandId(adminUser),
      }),
    }
  );
@@ -791,7 +797,7 @@ export async function bulkRecordWholesaleDeposit(
        p_method: method,
        p_reference: reference ?? null,
        p_recorded_by: adminUser.user_id,
-        p_brand_id: adminUser.brand_id ?? null,
+        p_brand_id: await getActiveBrandId(adminUser),
      }),
    }
  );
@@ -1,11 +1,18 @@
 import AdminSidebar from "@/components/admin/AdminSidebar";
 import AdminAccessDenied from "@/components/admin/AdminAccessDenied";
 import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
+import { listBrandsForAdmin } from "@/actions/brands";
 import { redirect } from "next/navigation";
 import "@/styles/admin-design-system.css";
 import { ToastProvider } from "@/components/admin/Toast";
 import { ToastContainer } from "@/components/admin/ToastContainer";

+// Admin layout calls getAdminUser() which reads cookies(). Without this,
+// Next.js tries to prerender the entire /admin/* tree statically and the
+// first page that hits cookies() aborts the build with DYNAMIC_SERVER_USAGE.
+export const dynamic = "force-dynamic";
+
 // Toast provider wrapper component
 function ToastProviderWrapper({ children }: { children: React.ReactNode }) {
  return (
@@ -57,9 +64,22 @@ export default async function AdminLayout({ children }: { children: React.ReactN
    redirect("/change-password");
  }

+  // Resolve the active brand (URL > cookie > legacy > first of brand_ids)
+  const activeBrandId = await getActiveBrandId(adminUser);
+
+  // Fetch accessible brands for the sidebar BrandSelector. We do this
+  // unconditionally — `listBrandsForAdmin` is cheap and the sidebar
+  // decides whether to show the dropdown.
+  const brands = await listBrandsForAdmin();
+
  return (
    <ToastProviderWrapper>
-      <AdminSidebar userRole={adminUser.role} />
+      <AdminSidebar
+        userRole={adminUser.role}
+        brandIds={adminUser.brand_ids}
+        activeBrandId={activeBrandId}
+        brands={brands}
+      />
      <div className="min-h-screen lg:pl-60 admin-section" style={{ backgroundColor: "var(--admin-bg)" }}>
        {children}
      </div>
@@ -2,10 +2,9 @@

 import { useState } from "react";
 import Link from "next/link";
-import { authClient } from "@/lib/auth-client";
+import { supabase } from "@/lib/supabase";
 import { AdminUserRow } from "@/actions/admin/users";
 import { logUserActivity } from "@/actions/admin/audit";
-import { updateAdminProfileAction } from "@/actions/admin/profile";

 type ProfilePageProps = {
  currentUser: AdminUserRow;
@@ -27,13 +26,13 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
    setSaving(true);
    setError(null);
    try {
-      const result = await updateAdminProfileAction(
-        currentUser.id,
-        displayName || null,
-        phoneNumber || null
-      );
-      if (!result.success) {
-        setError(result.error);
+      const { error: rpcError } = await supabase.rpc("update_admin_user", {
+        p_id: currentUser.id,
+        p_display_name: displayName || null,
+        p_phone_number: phoneNumber || null,
+      });
+      if (rpcError) {
+        setError(rpcError.message);
        return;
      }
      await logUserActivity({
@@ -52,11 +51,11 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
    setChangingEmail(true);
    setEmailError(null);
    try {
-      const { error: updateError } = await authClient.changeEmail({
-        newEmail: newEmail,
+      const { error: updateError } = await supabase.auth.updateUser({
+        email: newEmail,
      });
      if (updateError) {
-        setEmailError(updateError.message ?? "Failed to change email");
+        setEmailError(updateError.message);
        return;
      }
      await logUserActivity({
@@ -1,5 +1,6 @@
 import AdminOrdersPanel from "@/components/admin/AdminOrdersPanel";
 import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
 import { getAdminOrders } from "@/actions/orders";
 import AdminAccessDenied from "@/components/admin/AdminAccessDenied";
 import { PageHeader } from "@/components/admin/design-system";
@@ -17,13 +18,19 @@ export default async function AdminOrdersPage() {
    redirect("/admin/pickup");
  }

+  const activeBrandId = await getActiveBrandId(adminUser);
+  // Platform admin can browse all brands' orders; everyone else must have a brand
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return <AdminAccessDenied message="You don't have access to any brand." />;
+  }
+
  const { orders, stops } = await getAdminOrders();

-  const brandStops = adminUser?.brand_id
-    ? stops.filter((s) => s.brand_id === adminUser.brand_id)
+  const brandStops = activeBrandId
+    ? stops.filter((s) => s.brand_id === activeBrandId)
    : stops;

-  const brandOrders = adminUser?.brand_id
+  const brandOrders = activeBrandId
    ? orders.filter(
        (o) =>
          o.stops && brandStops.some((s) => s.id === o.stop_id)
@@ -41,8 +48,8 @@ export default async function AdminOrdersPage() {
      .order("name")
      .limit(200);

-    if (adminUser?.brand_id) {
-      prodQuery = prodQuery.eq("brand_id", adminUser.brand_id);
+    if (activeBrandId) {
+      prodQuery = prodQuery.eq("brand_id", activeBrandId);
    }

    const { data: prods } = await prodQuery;
@@ -80,7 +87,7 @@ export default async function AdminOrdersPage() {
            initialOrders={brandOrders}
            initialStops={brandStops}
            initialProducts={brandProducts}
-            brandId={adminUser?.brand_id ?? null}
+            brandId={activeBrandId}
          />
        </div>
      </div>
@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { supabase } from "@/lib/supabase";
 import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
 import { isFeatureEnabled } from "@/lib/feature-flags";
 import { getBillingOverview } from "@/actions/billing/billing-overview";
 import DashboardClient from "@/components/admin/DashboardClient";
@@ -23,12 +24,11 @@ export default async function AdminPage() {
  let limits = { max_users: 1, max_stops_monthly: 10, max_products: 25 };
  let brandDisplayName = "Admin";

-  // For platform_admin in dev mode, adminUser.brand_id is null. To keep
-  // the dashboard's "Active Products" stat in sync with the billing page,
-  // we need to pick a brand and use the same getBillingOverview action
-  // the billing page does. Otherwise the dashboard falls back to default
-  // (0/0/0) usage values and contradicts the billing page's "Products 1/25".
-  let dashboardBrandId: string | null = adminUser?.brand_id ?? null;
+  // Resolve active brand via the canonical resolver (URL > cookie > legacy brand_id
+  // > first of brand_ids). For platform_admin in dev mode this is null, so we
+  // fall back to the first brand in the brands table to keep the dashboard's
+  // "Active Products" stat in sync with the billing page.
+  let dashboardBrandId: string | null = adminUser ? await getActiveBrandId(adminUser) : null;
  if (!dashboardBrandId && adminUser?.role === "platform_admin") {
    const { data: firstBrand } = await supabase
      .from("brands")
@@ -1,7 +1,9 @@
 import { supabase } from "@/lib/supabase";
 import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
 import AdminAccessDenied from "@/components/admin/AdminAccessDenied";
 import ProductsClient from "@/components/admin/ProductsClient";
+import { getBrands } from "@/actions/admin/users";

 // Icon for page header
 const PackageIcon = () => (
@@ -29,7 +31,16 @@ export default async function AdminProductsPage() {
    );
  }

-  const brandId = adminUser.brand_id;
+  const activeBrandId = await getActiveBrandId(adminUser);
+  const brandId = activeBrandId;
+  const isPlatformAdmin = adminUser.role === "platform_admin";
+
+  // Platform admins need a brand picker for new products
+  let brands: { id: string; name: string }[] = [];
+  if (isPlatformAdmin) {
+    const result = await getBrands();
+    brands = result.brands ?? [];
+  }

  let query = supabase
    .from("products")
@@ -48,8 +59,8 @@ export default async function AdminProductsPage() {
    .is("deleted_at", null)
    .order("name");

-  if (adminUser.brand_id) {
-    query = query.eq("brand_id", adminUser.brand_id);
+  if (brandId) {
+    query = query.eq("brand_id", brandId);
  }

  const { data: products, error } = await query;
@@ -69,7 +80,12 @@ export default async function AdminProductsPage() {

  return (
    <div className="min-h-screen bg-[var(--admin-bg)]">
-      <ProductsClient products={products ?? []} brandId={brandId ?? undefined} />
+      <ProductsClient
+        products={products ?? []}
+        brandId={brandId ?? undefined}
+        brands={brands}
+        isPlatformAdmin={isPlatformAdmin}
+      />
    </div>
  );
 }
@@ -1,5 +1,6 @@
 import { supabase } from "@/lib/supabase";
 import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
 import AdminAccessDenied from "@/components/admin/AdminAccessDenied";
 import ReportsDashboard from "@/components/admin/ReportsDashboard";
 import { PageHeader } from "@/components/admin/design-system";
@@ -19,7 +20,7 @@ export default async function ReportsPage() {

  const initialBrandId = isPlatformAdmin
    ? null
-    : adminUser.brand_id ?? null;
+    : await getActiveBrandId(adminUser);

  return (
    <main className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
@@ -1,5 +1,6 @@
 import { supabase } from "@/lib/supabase";
 import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
 import { getBillingOverview } from "@/actions/billing/billing-overview";
 import AdminAccessDenied from "@/components/admin/AdminAccessDenied";
 import BillingClientPage from "./BillingClientPage";
@@ -13,7 +14,11 @@ export default async function BillingPage({ params }: Props) {
  const adminUser = await getAdminUser();
  if (!adminUser) return <AdminAccessDenied />;

-  const effectiveBrandId = brandIdParam ?? adminUser.brand_id ?? "";
+  const activeBrandId = await getActiveBrandId(adminUser, brandIdParam);
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return <AdminAccessDenied message="You don't have access to that brand." />;
+  }
+  const effectiveBrandId = activeBrandId ?? "";
  const isPlatformAdmin = adminUser.role === "platform_admin";

  let resolvedBrandId = effectiveBrandId;
@@ -4,6 +4,10 @@ import { getPaymentSettings } from "@/actions/payments";
 import { getSyncLog, type SyncLogEntry } from "@/actions/square-sync-ui";
 import SquareSyncSettingsClient from "./SquareSyncSettingsClient";

+// Uses cookies() via getAdminUser — must be dynamic to avoid the
+// "couldn't be rendered statically" build error.
+export const dynamic = "force-dynamic";
+
 export default async function SquareSyncSettingsPage() {
  const adminUser = await getAdminUser();
  if (!adminUser) redirect("/login");
@@ -1,4 +1,4 @@
-import StopTableClient from "@/components/admin/StopTableClient";
+import StopsDashboardClient from "@/components/admin/stops/StopsDashboardClient";
 import StopsHeaderActions from "@/components/admin/StopsHeaderActions";
 import { supabase } from "@/lib/supabase";
 import { getAdminUser } from "@/lib/admin-permissions";
@@ -90,9 +90,7 @@ export default async function AdminStopsPage() {

      {/* Content */}
      <div className="px-4 sm:px-6 md:px-8 py-4 sm:py-6">
-        <div className="overflow-hidden rounded-2xl border border-[var(--admin-border)] bg-white shadow-sm">
-          <StopTableClient stops={stops ?? []} />
-        </div>
+        <StopsDashboardClient stops={stops ?? []} />
      </div>
    </main>
  );
@@ -1,6 +1,7 @@
 "use server";

 import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
 import { supabase } from "@/lib/supabase";
 import AdminAccessDenied from "@/components/admin/AdminAccessDenied";
 import TaxDashboard from "@/components/admin/TaxDashboard";
@@ -15,7 +16,11 @@ export default async function TaxesPage({ params }: Props) {
  const adminUser = await getAdminUser();
  if (!adminUser) return <AdminAccessDenied />;

-  const effectiveBrandId = brandIdParam ?? adminUser.brand_id ?? "";
+  const activeBrandId = await getActiveBrandId(adminUser, brandIdParam);
+  if (!activeBrandId && adminUser.role !== "platform_admin") {
+    return <AdminAccessDenied message="You don't have access to that brand." />;
+  }
+  const effectiveBrandId = activeBrandId ?? "";
  const isPlatformAdmin = adminUser.role === "platform_admin";

  let resolvedBrandId = effectiveBrandId;
@@ -1,5 +1,7 @@
 import { redirect } from "next/navigation";
 import { cookies } from "next/headers";
+import { getAdminUser } from "@/lib/admin-permissions";
+import { getActiveBrandId } from "@/lib/brand-scope";
 import WholesaleClient from "./WholesaleClient";

 export default async function WholesalePage() {
@@ -11,10 +13,10 @@ export default async function WholesalePage() {
    devSession === "store_employee";

  if (!isDevMode) {
-    const { getAdminUser } = await import("@/lib/admin-permissions");
    const adminUser = await getAdminUser();
    if (!adminUser) redirect("/login");
-    return <WholesaleClient brandId={adminUser.brand_id ?? ""} />;
+    const activeBrandId = await getActiveBrandId(adminUser);
+    return <WholesaleClient brandId={activeBrandId ?? ""} />;
  }

  // Dev mode: platform_admin sees all brands, use first brand as default
@@ -1,4 +0,0 @@
-import { auth } from "@/lib/auth";
-import { toNextJsHandler } from "better-auth/next-js";
-
-export const { GET, POST } = toNextJsHandler(auth);
@@ -0,0 +1,16 @@
+import { handlers } from "@/lib/auth";
+
+/**
+ * Auth.js v5 catch-all route handler. Exposes:
+ *   GET  /api/auth/signin
+ *   GET  /api/auth/signout
+ *   GET  /api/auth/session
+ *   GET  /api/auth/csrf
+ *   GET  /api/auth/providers
+ *   POST /api/auth/callback/:provider
+ *   POST /api/auth/signin/:provider
+ *   POST /api/auth/signout
+ *
+ * The actual OAuth + session logic is in `src/lib/auth.ts`.
+ */
+export const { GET, POST } = handlers;
@@ -1,11 +1,10 @@
 import { NextResponse } from "next/server";
 import { cookies } from "next/headers";
-import { uploadFile, publicUrl, BUCKETS } from "@/lib/storage";
-
-const ALLOWED_BUCKETS = Object.values(BUCKETS);
+import { svcHeaders } from "@/lib/svc-headers";

 export async function POST(request: Request) {
  try {
+    // Validate session — irrigators use wl_session, admins use wl_admin_session
    const cookieStore = await cookies();
    const sessionId = cookieStore.get("wl_session")?.value ?? cookieStore.get("wl_admin_session")?.value;
    if (!sessionId) {
@@ -20,10 +19,6 @@ export async function POST(request: Request) {
      return NextResponse.json({ error: "Missing file or bucket" }, { status: 400 });
    }

-    if (!ALLOWED_BUCKETS.includes(bucket as (typeof ALLOWED_BUCKETS)[number])) {
-      return NextResponse.json({ error: "Invalid bucket" }, { status: 400 });
-    }
-
    if (file.size > 5 * 1024 * 1024) {
      return NextResponse.json({ error: "File too large (max 5MB)" }, { status: 400 });
    }
@@ -32,21 +27,35 @@ export async function POST(request: Request) {
      return NextResponse.json({ error: "Only JPG or PNG allowed" }, { status: 400 });
    }

+    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+    const supabasePat = process.env.SUPABASE_PAT!;
+
    const ext = file.type === "image/jpeg" ? "jpg" : "png";
    const fileName = `${Date.now()}-${Math.random().toString(36).slice(2)}.${ext}`;

    const arrayBuffer = await file.arrayBuffer();
-    const buffer = Buffer.from(arrayBuffer);
+    const uint8 = new Uint8Array(arrayBuffer);

-    const res = await uploadFile({
-      bucket,
-      key: fileName,
-      body: buffer,
-      contentType: file.type,
-    });
+    const uploadRes = await fetch(
+      `${supabaseUrl}/storage/v1/object/${bucket}/${fileName}`,
+      {
+        method: "POST",
+        headers: {
+          ...svcHeaders(supabasePat),
+          "Content-Type": file.type,
+          "x-upsert": "true",
+        },
+        body: uint8,
+      }
+    );

-    return NextResponse.json({ url: res.url });
+    if (!uploadRes.ok) {
+      return NextResponse.json({ error: "Upload failed" }, { status: 500 });
+    }
+
+    const publicUrl = `${supabaseUrl}/storage/v1/object/public/${bucket}/${fileName}`;
+    return NextResponse.json({ url: publicUrl });
  } catch (err) {
-    return NextResponse.json({ error: (err as Error).message || "Server error" }, { status: 500 });
+    return NextResponse.json({ error: "Server error" }, { status: 500 });
  }
 }
@@ -4,25 +4,36 @@ import { useState, useEffect, useRef, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { useCart } from "@/context/CartContext";
+import type { StopInfo } from "@/context/CartContext";
 import { createRetailStripeCheckoutSession } from "@/actions/billing/retail-checkout";
 import StorefrontHeader from "@/components/storefront/StorefrontHeader";
 import StorefrontFooter from "@/components/storefront/StorefrontFooter";
-
-type Stop = {
-  id: string;
-  city: string;
-  state: string;
-  date: string;
-  location: string;
-  brand_id: string;
-};
+import StripeExpressCheckout, {
+  type CheckoutItem as ExpressItem,
+} from "@/components/storefront/StripeExpressCheckout";

 export default function CheckoutClient() {
-  const { cart, subtotal, selectedStop, setSelectedStop, clearCart, cartBrandId } = useCart();
+  const cartContext = useCart();
+  const cart = cartContext.cart;
+  const subtotal = cartContext.subtotal;
+  const selectedStop: StopInfo | null = cartContext.selectedStop;
+  const setSelectedStop = cartContext.setSelectedStop;
+  const cartBrandId = cartContext.cartBrandId;
  const router = useRouter();
-  const [stops, setStops] = useState<Stop[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [stops, setStops] = useState<StopInfo[]>([]);
+
+  // Controlled form state — passed down to StripeExpressCheckout so the
+  // Express + Card paths know who the buyer is and where to ship / pick up.
+  const [customerName, setCustomerName] = useState("");
+  const [customerEmail, setCustomerEmail] = useState("");
+  const [customerPhone, setCustomerPhone] = useState("");
+  const [shippingState, setShippingState] = useState("");
+  const [shippingPostal, setShippingPostal] = useState("");
+  const [shippingCity, setShippingCity] = useState("");
+
+  // Hosted-checkout (legacy Stripe Checkout) fallback state
+  const [hostedLoading, setHostedLoading] = useState(false);
+  const [hostedError, setHostedError] = useState<string | null>(null);

  // Stable idempotency key per checkout session — survives retries
  const idempotencyKeyRef = useRef<string | null>(null);
@@ -33,7 +44,7 @@ export default function CheckoutClient() {
  useEffect(() => {
    if (!cartBrandId) return;
    fetch(
-      `${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest/v1/stops?active=eq.true&brand_id=eq.${cartBrandId}&select=id,city,state,date,location,brand_id&order=date`,
+      `${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest/v1/stops?active=eq.true&brand_id=eq.${cartBrandId}&select=id,city,state,date,time,location,brand_id&order=date`,
      {
        headers: {
          apikey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
@@ -47,45 +58,37 @@ export default function CheckoutClient() {

  const hasPickupItems = cart.some((i) => i.fulfillment === "pickup");
  const hasShedPickupItems = cart.some((i) => i.fulfillment === "pickup" && i.pickup_type === "shed");
-  const hasStopPickupItems = cart.some((i) => i.fulfillment === "pickup" && i.pickup_type !== "shed");
+  const hasStopPickupItems = cart.some(
+    (i) => i.fulfillment === "pickup" && i.pickup_type !== "shed"
+  );
  const hasShipItems = cart.some((i) => i.fulfillment === "ship");

-  const handleSubmit = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  /**
+   * Legacy "Use secure hosted checkout" fallback. Creates a Stripe
+   * Checkout Session and redirects — this is the path used when the
+   * embedded Stripe Elements can't load (no publishable key, browser
+   * incompatibility, etc.) or when the buyer prefers Stripe's hosted page.
+   */
+  const handleHostedCheckout = useCallback(async () => {
    if (cart.length === 0) return;

-    // Guard: if selected stop brand mismatches cart brand, block checkout
    if (selectedStop?.brand_id && cartBrandId && selectedStop.brand_id !== cartBrandId) {
      setSelectedStop(null);
      router.replace("/cart");
      return;
    }

-    setLoading(true);
-    setError(null);
-
-    const formData = new FormData(e.currentTarget);
-    const customerName = formData.get("customer_name") as string;
-    const customerEmail = formData.get("customer_email") as string;
-    const customerPhone = formData.get("customer_phone") as string;
-    const stopId = (selectedStop?.id ?? formData.get("stop_id") as string | null) as string | null;
-
-    // Shipping address for tax calculation (ship items only)
-    let shippingAddress;
-    if (hasShipItems) {
-      const shippingPostal = formData.get("shipping_postal_code") as string;
-      const shippingState = formData.get("shipping_state") as string;
-      const shippingCity = formData.get("shipping_city") as string;
-      if (shippingState) {
-        shippingAddress = { state: shippingState, postal_code: shippingPostal, city: shippingCity };
-      }
-    }
-
-    if (hasStopPickupItems && !stopId) {
-      setError("Please select a pickup location.");
-      setLoading(false);
+    if (!customerEmail.trim()) {
+      setHostedError("Please enter your email before continuing to checkout.");
      return;
    }
+    if (hasStopPickupItems && !selectedStop) {
+      setHostedError("Please select a pickup location.");
+      return;
+    }
+
+    setHostedLoading(true);
+    setHostedError(null);

    const items = cart.map((item) => ({
      id: item.id,
@@ -95,36 +98,61 @@ export default function CheckoutClient() {
      fulfillment: item.fulfillment ?? "pickup",
    }));

-    // Build return URLs for Stripe
-    const siteUrl = typeof window !== "undefined" ? window.location.origin : "https://route-commerce-platform.vercel.app";
+    const siteUrl =
+      typeof window !== "undefined" ? window.location.origin : "https://route-commerce-platform.vercel.app";
    const successUrl = `${siteUrl}/checkout/success?session_id={CHECKOUT_SESSION_ID}`;
    const cancelUrl = `${siteUrl}/checkout?status=cancelled`;

-    // Store customer info for order creation on success page
    if (typeof sessionStorage !== "undefined") {
-      sessionStorage.setItem("pending_checkout", JSON.stringify({
-        customerName,
-        customerEmail,
-        customerPhone,
-        stopId,
-        items: items.map((item) => ({ ...item, fulfillment: item.fulfillment as "pickup" | "ship" })),
-        cartBrandId,
-        shippingAddress,
-        idempotencyKey: idempotencyKeyRef.current,
-      }));
+      sessionStorage.setItem(
+        "pending_checkout",
+        JSON.stringify({
+          customerName,
+          customerEmail,
+          customerPhone,
+          stopId: selectedStop?.id ?? null,
+          items: items.map((item) => ({
+            ...item,
+            fulfillment: item.fulfillment as "pickup" | "ship",
+          })),
+          cartBrandId,
+          shippingAddress: hasShipItems
+            ? { state: shippingState, postal_code: shippingPostal, city: shippingCity }
+            : undefined,
+          idempotencyKey: idempotencyKeyRef.current,
+        })
+      );
    }

-    // Create Stripe Checkout session first
-    const stripeResult = await createRetailStripeCheckoutSession(items, "", cartBrandId ?? "unknown", successUrl, cancelUrl);
+    const stripeResult = await createRetailStripeCheckoutSession(
+      items,
+      "",
+      cartBrandId ?? "unknown",
+      successUrl,
+      cancelUrl
+    );
    if (!stripeResult.success || !stripeResult.url) {
-      setError(stripeResult.error ?? "Failed to initiate payment. Please try again.");
-      setLoading(false);
+      setHostedError(stripeResult.error ?? "Failed to initiate payment. Please try again.");
+      setHostedLoading(false);
      return;
    }

-    // Redirect to Stripe Checkout
    window.location.href = stripeResult.url;
-  }, [cart, selectedStop, cartBrandId, hasShipItems, hasStopPickupItems, router, setSelectedStop]);
+  }, [
+    cart,
+    customerName,
+    customerEmail,
+    customerPhone,
+    selectedStop,
+    shippingState,
+    shippingPostal,
+    shippingCity,
+    cartBrandId,
+    hasShipItems,
+    hasStopPickupItems,
+    router,
+    setSelectedStop,
+  ]);

  if (cart.length === 0) {
    return (
@@ -132,9 +160,7 @@ export default function CheckoutClient() {
        <StorefrontHeader brandName="Checkout" brandSlug="tuxedo" />
        <main className="px-6 py-12">
          <div className="mx-auto max-w-4xl">
-            <h1 className="text-3xl font-bold text-stone-900">
-              Your cart is empty
-            </h1>
+            <h1 className="text-3xl font-bold text-stone-900">Your cart is empty</h1>
            <Link
              href="/"
              className="mt-4 inline-block text-stone-600 hover:text-stone-900"
@@ -147,71 +173,81 @@ export default function CheckoutClient() {
    );
  }

+  // Map cart → StripeExpressCheckout item shape
+  const expressItems: ExpressItem[] = cart.map((item) => ({
+    id: item.id,
+    name: item.name,
+    price: item.price,
+    quantity: item.quantity,
+    fulfillment: (item.fulfillment ?? "pickup") as "pickup" | "ship",
+  }));
+
  return (
    <div className="min-h-screen bg-gradient-to-br from-stone-50 via-white to-emerald-50/30">
      <StorefrontHeader brandName="Checkout" brandSlug="tuxedo" />
      <main className="px-6 py-12">
        <div className="mx-auto grid max-w-6xl gap-8 md:grid-cols-[1fr_400px]">
+          {/* LEFT — Form + Embedded Stripe Elements */}
          <div>
-            <h1 className="text-4xl font-bold text-slate-900">
-              Checkout
-            </h1>
-
+            <h1 className="text-4xl font-bold text-slate-900">Checkout</h1>
            <p className="mt-3 text-slate-600">
-              Complete your order details.
+              Tap to pay with Apple Pay, Google Pay, or card. Your details stay secure — we never see them.
            </p>

-            {/* Error alert */}
-            {error && (
+            {/* Error alert (shared across both payment paths) */}
+            {(hostedError) && (
              <div className="mt-6 rounded-xl bg-red-50 border border-red-200 p-4 text-red-700 text-sm shadow-sm" role="alert">
                <div className="flex items-start gap-3">
                  <svg className="h-5 w-5 text-red-500 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
-                  <span>{error}</span>
+                  <span>{hostedError}</span>
                </div>
              </div>
            )}

-            {/* Loading indicator */}
-            {loading && (
-              <div className="mt-6 flex items-center gap-3 rounded-xl bg-emerald-50 border border-emerald-200 p-4" role="status" aria-live="polite">
-                <div className="h-5 w-5 animate-spin rounded-full border-2 border-emerald-300 border-t-emerald-600" aria-hidden="true" />
-                <span className="text-sm text-emerald-700">Placing your order...</span>
-              </div>
-            )}
-
-            <form onSubmit={handleSubmit} className="mt-8 space-y-6">
-              {/* Customer Information */}
+            <div className="mt-8 space-y-6">
+              {/* Customer Information — controlled inputs feed the embedded
+                  Stripe Elements above. The wallet (Apple Pay) will overwrite
+                  name/email at confirm time, but we still collect them here
+                  so the order row has them in case the wallet omits them. */}
              <fieldset className="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200 border border-slate-100">
-                <legend className="text-xl font-bold text-slate-900">Customer Information</legend>
+                <legend className="text-xl font-bold text-slate-900">Your details</legend>
+                <p className="mt-1 text-xs text-slate-500">
+                  Used for the order confirmation. Apple Pay / Google Pay will fill these in for you.
+                </p>

-                <div className="mt-4 space-y-4">
-                  <div>
+                <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div className="sm:col-span-2">
                    <label htmlFor="customer_name" className="block text-sm font-medium text-slate-700">
-                      Full Name <span className="text-red-500" aria-hidden="true">*</span>
+                      Full Name
                    </label>
                    <input
                      id="customer_name"
                      name="customer_name"
-                      required
+                      autoComplete="name"
+                      value={customerName}
+                      onChange={(e) => setCustomerName(e.target.value)}
                      className="mt-1 w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all"
                      placeholder="Jane Smith"
-                      aria-required="true"
                    />
                  </div>

                  <div>
                    <label htmlFor="customer_email" className="block text-sm font-medium text-slate-700">
-                      Email <span className="text-slate-400 text-xs">(optional)</span>
+                      Email <span className="text-red-500" aria-hidden="true">*</span>
                    </label>
                    <input
                      id="customer_email"
                      name="customer_email"
                      type="email"
                      autoComplete="email"
+                      required
+                      value={customerEmail}
+                      onChange={(e) => setCustomerEmail(e.target.value)}
                      className="mt-1 w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all"
                      placeholder="jane@example.com"
+                      aria-required="true"
                    />
                  </div>

@@ -224,6 +260,8 @@ export default function CheckoutClient() {
                      name="customer_phone"
                      type="tel"
                      autoComplete="tel"
+                      value={customerPhone}
+                      onChange={(e) => setCustomerPhone(e.target.value)}
                      className="mt-1 w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all"
                      placeholder="(555) 555-5555"
                    />
@@ -231,7 +269,7 @@ export default function CheckoutClient() {
                </div>
              </fieldset>

-              {/* Shed Pickup */}
+              {/* Shed Pickup notice */}
              {hasShedPickupItems && (
                <fieldset className="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-emerald-200 border border-emerald-100">
                  <legend className="text-xl font-bold text-slate-900">Shed Pickup</legend>
@@ -278,6 +316,11 @@ export default function CheckoutClient() {
                        id="stop_id"
                        name="stop_id"
                        required
+                        value={(selectedStop as StopInfo | null)?.id ?? ""}
+                        onChange={(e) => {
+                          const found = stops.find((s) => s.id === e.target.value) ?? null;
+                          setSelectedStop(found as StopInfo | null);
+                        }}
                        className="w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all appearance-none bg-white"
                        aria-required="true"
                      >
@@ -301,8 +344,8 @@ export default function CheckoutClient() {
                    Enter your shipping details for delivery.
                  </p>

-                  <div className="mt-4 space-y-4">
-                    <div>
+                  <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-4">
+                    <div className="sm:col-span-3">
                      <label htmlFor="shipping_address" className="block text-sm font-medium text-slate-700">
                        Street Address
                      </label>
@@ -314,80 +357,97 @@ export default function CheckoutClient() {
                        placeholder="123 Main St"
                      />
                    </div>
-                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-                      <div>
-                        <label htmlFor="shipping_city" className="block text-sm font-medium text-slate-700">
-                          City
-                        </label>
-                        <input
-                          id="shipping_city"
-                          name="shipping_city"
-                          autoComplete="address-level2"
-                          className="mt-1 w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all"
-                        />
-                      </div>
-                      <div>
-                        <label htmlFor="shipping_state" className="block text-sm font-medium text-slate-700">
-                          State
-                        </label>
-                        <input
-                          id="shipping_state"
-                          name="shipping_state"
-                          autoComplete="address-level1"
-                          maxLength={2}
-                          className="mt-1 w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all uppercase"
-                          placeholder="NC"
-                        />
-                      </div>
-                      <div>
-                        <label htmlFor="shipping_postal_code" className="block text-sm font-medium text-slate-700">
-                          ZIP Code
-                        </label>
-                        <input
-                          id="shipping_postal_code"
-                          name="shipping_postal_code"
-                          autoComplete="postal-code"
-                          className="mt-1 w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all"
-                          placeholder="28147"
-                        />
-                      </div>
+                    <div>
+                      <label htmlFor="shipping_city" className="block text-sm font-medium text-slate-700">
+                        City
+                      </label>
+                      <input
+                        id="shipping_city"
+                        name="shipping_city"
+                        autoComplete="address-level2"
+                        value={shippingCity}
+                        onChange={(e) => setShippingCity(e.target.value)}
+                        className="mt-1 w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all"
+                      />
+                    </div>
+                    <div>
+                      <label htmlFor="shipping_state" className="block text-sm font-medium text-slate-700">
+                        State
+                      </label>
+                      <input
+                        id="shipping_state"
+                        name="shipping_state"
+                        autoComplete="address-level1"
+                        maxLength={2}
+                        value={shippingState}
+                        onChange={(e) => setShippingState(e.target.value.toUpperCase())}
+                        className="mt-1 w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all uppercase"
+                        placeholder="NC"
+                      />
+                    </div>
+                    <div>
+                      <label htmlFor="shipping_postal_code" className="block text-sm font-medium text-slate-700">
+                        ZIP Code
+                      </label>
+                      <input
+                        id="shipping_postal_code"
+                        name="shipping_postal_code"
+                        autoComplete="postal-code"
+                        value={shippingPostal}
+                        onChange={(e) => setShippingPostal(e.target.value)}
+                        className="mt-1 w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition-all"
+                        placeholder="28147"
+                      />
                    </div>
                  </div>
                </fieldset>
              )}

-              {/* Submit button */}
-              <button
-                type="submit"
-                disabled={loading}
-                className="w-full rounded-xl bg-gradient-to-r from-emerald-600 to-emerald-500 hover:from-emerald-500 hover:to-emerald-400 px-6 py-4 text-lg font-semibold text-white disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg shadow-emerald-500/25 hover:shadow-emerald-500/30 hover:-translate-y-0.5 flex items-center justify-center gap-2"
-              >
-                {loading ? (
-                  <>
-                    <svg className="h-5 w-5 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
-                    </svg>
-                    Redirecting to payment...
-                  </>
-                ) : (
-                  <>
-                    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                    </svg>
-                    Pay Now — ${subtotal.toFixed(2)}
-                  </>
-                )}
-              </button>
-            </form>
+              {/* Embedded Stripe Elements (Express + Card) — real checkout */}
+              <div data-testid="stripe-express-checkout">
+                <StripeExpressCheckout
+                  items={expressItems}
+                  brandId={cartBrandId}
+                  customerName={customerName}
+                  customerEmail={customerEmail}
+                  customerPhone={customerPhone}
+                  selectedStop={selectedStop as StopInfo | null}
+                  shippingState={shippingState}
+                  shippingPostal={shippingPostal}
+                  shippingCity={shippingCity}
+                  checkoutSessionKey={idempotencyKeyRef.current ?? undefined}
+                  onHostedCheckout={() => void handleHostedCheckout()}
+                />
+              </div>
+
+              {/* Hosted-checkout fallback (legacy Stripe Checkout) */}
+              <div className="rounded-2xl border border-dashed border-slate-300 bg-slate-50/60 p-4">
+                <p className="text-xs text-slate-500 mb-2 text-center">
+                  Prefer Stripe’s hosted page? Tap below.
+                </p>
+                <button
+                  type="button"
+                  onClick={() => void handleHostedCheckout()}
+                  disabled={hostedLoading}
+                  className="w-full rounded-xl border border-slate-300 bg-white px-6 py-3 text-sm font-semibold text-slate-800 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all flex items-center justify-center gap-2"
+                >
+                  {hostedLoading ? (
+                    <>
+                      <span className="h-4 w-4 rounded-full border-2 border-slate-300 border-t-slate-700 animate-spin" />
+                      Redirecting to Stripe…
+                    </>
+                  ) : (
+                    <>Use secure hosted checkout →</>
+                  )}
+                </button>
+              </div>
+            </div>
          </div>

          {/* Order Summary */}
          <aside aria-label="Order summary">
            <div className="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200 border border-slate-100 sticky top-6">
-              <h2 className="text-xl font-bold text-slate-900">
-                Order Summary
-              </h2>
+              <h2 className="text-xl font-bold text-slate-900">Order Summary</h2>

              <div className="mt-4 space-y-3">
                {cart.map((item) => (
@@ -420,12 +480,20 @@ export default function CheckoutClient() {
                </div>
              </div>

-              {/* Secure payment badge */}
-              <div className="mt-4 flex items-center justify-center gap-2 text-xs text-slate-500">
-                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                </svg>
-                <span>Secured by Stripe</span>
+              {/* Trust badges */}
+              <div className="mt-4 space-y-1.5">
+                <div className="flex items-center justify-center gap-2 text-xs text-slate-500">
+                  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                  </svg>
+                  <span>Secured by Stripe</span>
+                </div>
+                <div className="flex items-center justify-center gap-2 text-xs text-slate-500">
+                  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                  </svg>
+                  <span>100% Sweetness Guarantee</span>
+                </div>
              </div>
            </div>
          </aside>
@@ -47,12 +47,16 @@ function formatStopDate(dateStr: string): string {
 function SuccessContent() {
  const searchParams = useSearchParams();
  const sessionId = searchParams.get("session_id");
+  // Embedded Stripe Elements path — we navigated here programmatically
+  // with ?payment_intent=pi_... after `stripe.confirmPayment` resolved.
+  const paymentIntentId = searchParams.get("payment_intent");
+  const redirectStatus = searchParams.get("redirect_status");
  const orderIdParam = searchParams.get("order_id");
  // Direct access with order_id — load from sessionStorage in lazy initializer.
  // searchParams values are stable, and sessionStorage is client-only, so this
  // is safe in a client component.
  const [order, setOrder] = useState<StoredOrder | null>(() => {
-    if (!orderIdParam || sessionId) return null;
+    if (!orderIdParam || sessionId || paymentIntentId) return null;
    if (typeof window === "undefined") return null;
    try {
      const stored = sessionStorage.getItem(`order_${orderIdParam}`);
@@ -62,14 +66,20 @@ function SuccessContent() {
      return null;
    }
  });
-  const [creating, setCreating] = useState(!!sessionId);
+  const [creating, setCreating] = useState(Boolean(sessionId || (paymentIntentId && redirectStatus === "succeeded")));
  const [error, setError] = useState<string | null>(null);

-  // Stripe redirected back — create order from pending checkout data.
-  // Wrapped in an async IIFE so all setState calls happen inside a callback,
-  // not in the synchronous effect body (satisfies set-state-in-effect rule).
+  // Create the order from the pending-checkout payload, regardless of
+  // whether the user paid via hosted Stripe Checkout (?session_id=...) or
+  // embedded Stripe Elements (?payment_intent=...). Both paths store the
+  // same payload in `pending_checkout` before payment is initiated.
  useEffect(() => {
-    if (!sessionId) return;
+    if (!sessionId && !paymentIntentId) return;
+    if (paymentIntentId && redirectStatus && redirectStatus !== "succeeded") {
+      setError("Payment was not completed. Please try again.");
+      setCreating(false);
+      return;
+    }

    (async () => {
      const pendingStr = sessionStorage.getItem("pending_checkout");
@@ -88,6 +98,7 @@ function SuccessContent() {
        cartBrandId?: string;
        shippingAddress?: { state: string; postal_code: string; city?: string };
        idempotencyKey: string;
+        paymentIntentId?: string;
      };
      try {
        pending = JSON.parse(pendingStr);
@@ -123,7 +134,7 @@ function SuccessContent() {
        setCreating(false);
      }
    })();
-  }, [sessionId]);
+  }, [sessionId, paymentIntentId, redirectStatus]);

  if (!order || !orderIdParam) {
    return (
@@ -1,6 +1,11 @@
@import "tailwindcss";

@theme {
+  /* Custom typefaces — Field Almanac */
+  --font-display: var(--font-fraunces, "Georgia"), Georgia, serif;
+  --font-sans: var(--font-manrope, system-ui), system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: var(--font-fragment-mono, "JetBrains Mono"), ui-monospace, SFMono-Regular, Menlo, monospace;
+
  /* Apple-inspired dark palette — sophisticated depth */
  --color-surface-50: #f5f5f7;
  --color-surface-100: #e8e8ed;
@@ -85,7 +90,7 @@ html {
 }

 body {
-  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--font-sans);
  background: #ffffff;
  background-attachment: fixed;
  color: #1a1a1a;
@@ -442,3 +447,586 @@ select:-webkit-autofill:focus {
 .transition-glass {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
+
+/* ─── Editorial Modal — "Atelier des Récoltes" ───────────────── */
+
+/* Warm cream canvas for the modal — like aged paper */
+.atelier-canvas {
+  background-color: #FAF7F0;
+  background-image:
+    radial-gradient(ellipse 70% 50% at 15% 0%, rgba(180, 155, 100, 0.10) 0%, transparent 55%),
+    radial-gradient(ellipse 60% 45% at 100% 100%, rgba(34, 78, 47, 0.06) 0%, transparent 55%);
+  position: relative;
+}
+
+/* Subtle grain texture for tactile feel */
+.atelier-grain {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.35;
+  mix-blend-mode: multiply;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.15 0 0 0 0 0.10 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+
+/* Botanical wreath / corner ornament */
+.atelier-flourish {
+  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23224E2F' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 40 Q 25 20 40 30 Q 55 40 70 30'/%3E%3Cpath d='M22 32 Q 25 28 28 30'/%3E%3Cpath d='M52 38 Q 55 34 58 36'/%3E%3Cpath d='M14 45 Q 18 50 24 48'/%3E%3Ccircle cx='40' cy='30' r='2' fill='%23224E2F'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+}
+
+/* The big editorial numeral — large, italic, gold */
+.atelier-numeral {
+  font-family: var(--font-fraunces);
+  font-style: italic;
+  font-weight: 500;
+  font-variation-settings: "opsz" 144, "SOFT" 30;
+  line-height: 0.85;
+  letter-spacing: -0.04em;
+  background: linear-gradient(135deg, #CA8A04 0%, #854D0E 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Editorial title — Fraunces with optical sizing */
+.atelier-title {
+  font-family: var(--font-fraunces);
+  font-weight: 500;
+  font-variation-settings: "opsz" 144, "SOFT" 50;
+  letter-spacing: -0.025em;
+  line-height: 0.95;
+  color: #1C1917;
+}
+
+.atelier-italic {
+  font-family: var(--font-fraunces);
+  font-style: italic;
+  font-variation-settings: "opsz" 14, "SOFT" 100;
+  color: #786B53;
+}
+
+/* Section label — monospace, small caps style */
+.atelier-section-label {
+  font-family: var(--font-fragment-mono);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: #786B53;
+}
+
+/* Section number badge */
+.atelier-section-num {
+  font-family: var(--font-fragment-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  color: #CA8A04;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.atelier-section-num::before {
+  content: '';
+  display: inline-block;
+  width: 18px;
+  height: 1px;
+  background: linear-gradient(to right, #CA8A04, transparent);
+}
+
+/* Editorial hairline rule with fade at edges */
+.atelier-rule {
+  height: 1px;
+  background: linear-gradient(to right, transparent, rgba(180, 155, 100, 0.4) 20%, rgba(34, 78, 47, 0.3) 50%, rgba(180, 155, 100, 0.4) 80%, transparent);
+  border: 0;
+}
+
+/* Input fields — bottom border only, editorial */
+.atelier-input {
+  font-family: var(--font-manrope);
+  font-size: 15px;
+  font-weight: 400;
+  color: #1C1917;
+  background: transparent;
+  border: 0;
+  border-bottom: 1.5px solid rgba(28, 25, 23, 0.12);
+  border-radius: 0;
+  padding: 10px 0 10px 0;
+  width: 100%;
+  outline: none;
+  transition: border-color 220ms cubic-bezier(0.4, 0, 0.2, 1), padding 220ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.atelier-input::placeholder {
+  color: #A8A29E;
+  font-style: italic;
+  font-family: var(--font-fraunces);
+  font-variation-settings: "opsz" 14, "SOFT" 100;
+}
+.atelier-input:hover {
+  border-bottom-color: rgba(28, 25, 23, 0.28);
+}
+.atelier-input:focus {
+  border-bottom-color: #224E2F;
+  border-bottom-width: 2px;
+  padding-bottom: 9.5px;
+}
+.atelier-input.is-error {
+  border-bottom-color: #B91C1C;
+}
+
+/* Large display input — name field */
+.atelier-input--display {
+  font-family: var(--font-fraunces);
+  font-size: 28px;
+  font-weight: 500;
+  font-variation-settings: "opsz" 144, "SOFT" 50;
+  letter-spacing: -0.02em;
+  padding: 8px 0 14px 0;
+}
+.atelier-input--display::placeholder {
+  color: #D6D3D1;
+  font-style: italic;
+  font-variation-settings: "opsz" 144, "SOFT" 100;
+}
+.atelier-input--display:focus {
+  border-bottom-width: 2.5px;
+  padding-bottom: 13px;
+}
+
+/* Price input — large currency treatment */
+.atelier-price {
+  font-family: var(--font-fraunces);
+  font-variation-settings: "opsz" 144, "SOFT" 50;
+  font-weight: 500;
+  font-size: 38px;
+  letter-spacing: -0.03em;
+  color: #1C1917;
+  background: transparent;
+  border: 0;
+  border-bottom: 2px solid #224E2F;
+  border-radius: 0;
+  padding: 4px 0 12px 36px;
+  width: 100%;
+  outline: none;
+  transition: border-color 200ms ease;
+  -moz-appearance: textfield;
+}
+.atelier-price::-webkit-outer-spin-button,
+.atelier-price::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.atelier-price:focus {
+  border-bottom-color: #14532D;
+  border-bottom-width: 2.5px;
+}
+.atelier-price-sigil {
+  font-family: var(--font-fraunces);
+  font-style: italic;
+  font-weight: 400;
+  font-size: 38px;
+  color: #CA8A04;
+  position: absolute;
+  left: 0;
+  top: 4px;
+  pointer-events: none;
+  line-height: 1;
+}
+
+/* Type selector — visual cards */
+.atelier-type-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 14px 12px;
+  background: rgba(255, 255, 255, 0.6);
+  border: 1.5px solid rgba(28, 25, 23, 0.10);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
+  text-align: left;
+  width: 100%;
+  min-height: 92px;
+  overflow: hidden;
+}
+.atelier-type-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(34, 78, 47, 0.02) 0%, transparent 60%);
+  opacity: 0;
+  transition: opacity 220ms ease;
+  pointer-events: none;
+}
+.atelier-type-card:hover {
+  border-color: rgba(34, 78, 47, 0.25);
+  background: rgba(255, 255, 255, 0.85);
+  transform: translateY(-1px);
+}
+.atelier-type-card:hover::before {
+  opacity: 1;
+}
+.atelier-type-card:active {
+  transform: translateY(0) scale(0.985);
+}
+.atelier-type-card.is-selected {
+  background: linear-gradient(135deg, #224E2F 0%, #14532D 100%);
+  border-color: #14532D;
+  box-shadow: 0 8px 24px -8px rgba(20, 83, 45, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10);
+}
+.atelier-type-card.is-selected::before {
+  opacity: 0;
+}
+.atelier-type-card .atelier-type-icon {
+  color: #786B53;
+  transition: color 220ms ease, transform 220ms ease;
+}
+.atelier-type-card.is-selected .atelier-type-icon {
+  color: #FCD34D;
+  transform: scale(1.06);
+}
+.atelier-type-card .atelier-type-name {
+  font-family: var(--font-fraunces);
+  font-size: 14px;
+  font-weight: 500;
+  font-variation-settings: "opsz" 14, "SOFT" 30;
+  letter-spacing: -0.01em;
+  color: #1C1917;
+  transition: color 220ms ease;
+}
+.atelier-type-card.is-selected .atelier-type-name {
+  color: #FFFFFF;
+}
+.atelier-type-card .atelier-type-check {
+  opacity: 0;
+  color: #FCD34D;
+  transform: scale(0.6);
+  transition: opacity 200ms ease, transform 200ms ease;
+}
+.atelier-type-card.is-selected .atelier-type-check {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Pill toggle — Active / Taxable */
+.atelier-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  user-select: none;
+}
+.atelier-toggle-track {
+  position: relative;
+  width: 38px;
+  height: 22px;
+  background: rgba(28, 25, 23, 0.12);
+  border-radius: 999px;
+  transition: background 220ms ease;
+  flex-shrink: 0;
+}
+.atelier-toggle.is-on .atelier-toggle-track {
+  background: linear-gradient(135deg, #224E2F 0%, #16A34A 100%);
+  box-shadow: 0 2px 8px -2px rgba(34, 78, 47, 0.4);
+}
+.atelier-toggle.is-on.is-gold .atelier-toggle-track {
+  background: linear-gradient(135deg, #CA8A04 0%, #EAB308 100%);
+  box-shadow: 0 2px 8px -2px rgba(202, 138, 4, 0.4);
+}
+.atelier-toggle-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  background: #FFFFFF;
+  border-radius: 999px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.atelier-toggle.is-on .atelier-toggle-thumb {
+  transform: translateX(16px);
+}
+.atelier-toggle-label {
+  font-family: var(--font-fragment-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #786B53;
+  transition: color 220ms ease;
+}
+.atelier-toggle.is-on .atelier-toggle-label {
+  color: #1C1917;
+}
+
+/* Image drop zone — large square with botanical treatment */
+.atelier-drop {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  aspect-ratio: 1 / 1;
+  background: rgba(255, 255, 255, 0.5);
+  border: 1.5px dashed rgba(34, 78, 47, 0.25);
+  border-radius: 14px;
+  cursor: pointer;
+  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+.atelier-drop::before {
+  content: '';
+  position: absolute;
+  inset: 12px;
+  border: 1px solid rgba(180, 155, 100, 0.18);
+  border-radius: 10px;
+  pointer-events: none;
+}
+.atelier-drop::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at center, rgba(34, 78, 47, 0.02) 0%, transparent 70%);
+  pointer-events: none;
+}
+.atelier-drop:hover {
+  border-color: rgba(34, 78, 47, 0.45);
+  background: rgba(255, 255, 255, 0.75);
+  transform: scale(1.005);
+}
+.atelier-drop.is-drag {
+  border-color: #224E2F;
+  border-style: solid;
+  background: rgba(34, 78, 47, 0.04);
+  transform: scale(1.01);
+}
+.atelier-drop.is-error {
+  border-color: #B91C1C;
+  background: rgba(185, 28, 28, 0.03);
+}
+.atelier-drop.has-image {
+  border-style: solid;
+  border-color: rgba(34, 78, 47, 0.3);
+  background: #FFFFFF;
+}
+.atelier-drop-eyebrow {
+  font-family: var(--font-fragment-mono);
+  font-size: 9px;
+  font-weight: 500;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: #A8A29E;
+  margin-top: -4px;
+}
+.atelier-drop-title {
+  font-family: var(--font-fraunces);
+  font-style: italic;
+  font-size: 18px;
+  font-variation-settings: "opsz" 14, "SOFT" 100;
+  color: #57534E;
+  text-align: center;
+  line-height: 1.2;
+}
+.atelier-drop-hint {
+  font-family: var(--font-manrope);
+  font-size: 11px;
+  color: #A8A29E;
+  letter-spacing: 0.01em;
+}
+
+/* Status pill in corner of image */
+.atelier-status-pill {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px 5px 8px;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(28, 25, 23, 0.08);
+  border-radius: 999px;
+  font-family: var(--font-fragment-mono);
+  font-size: 9px;
+  font-weight: 500;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: #1C1917;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+  z-index: 2;
+}
+.atelier-status-pill .atelier-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #16A34A;
+  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
+}
+.atelier-status-pill.is-empty .atelier-dot {
+  background: #D6D3D1;
+  box-shadow: 0 0 0 2px rgba(214, 211, 209, 0.2);
+}
+.atelier-status-pill.is-empty {
+  color: #A8A29E;
+}
+
+/* Modal enter animation */
+@keyframes atelier-enter {
+  from { opacity: 0; transform: translateY(20px) scale(0.96); }
+  to   { opacity: 1; transform: translateY(0)    scale(1); }
+}
+@keyframes atelier-backdrop {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes atelier-stagger {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.atelier-enter {
+  animation: atelier-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.atelier-backdrop {
+  animation: atelier-backdrop 300ms ease both;
+}
+.atelier-stagger > * {
+  animation: atelier-stagger 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.atelier-stagger > *:nth-child(1) { animation-delay: 80ms; }
+.atelier-stagger > *:nth-child(2) { animation-delay: 140ms; }
+.atelier-stagger > *:nth-child(3) { animation-delay: 200ms; }
+.atelier-stagger > *:nth-child(4) { animation-delay: 260ms; }
+.atelier-stagger > *:nth-child(5) { animation-delay: 320ms; }
+.atelier-stagger > *:nth-child(6) { animation-delay: 380ms; }
+.atelier-stagger > *:nth-child(7) { animation-delay: 440ms; }
+
+/* Primary CTA — gradient with subtle inner highlight */
+.atelier-cta {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 12px 22px;
+  font-family: var(--font-manrope);
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  color: #FFFFFF;
+  background: linear-gradient(135deg, #14532D 0%, #1F6B3E 50%, #14532D 100%);
+  background-size: 200% 100%;
+  background-position: 0% 50%;
+  border: 0;
+  border-radius: 10px;
+  cursor: pointer;
+  box-shadow:
+    0 6px 18px -6px rgba(20, 83, 45, 0.55),
+    inset 0 1px 0 rgba(255, 255, 255, 0.14),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.10);
+  transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+.atelier-cta:hover {
+  background-position: 100% 50%;
+  box-shadow:
+    0 10px 28px -8px rgba(20, 83, 45, 0.65),
+    inset 0 1px 0 rgba(255, 255, 255, 0.20),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.10);
+  transform: translateY(-1px);
+}
+.atelier-cta:active {
+  transform: translateY(0) scale(0.985);
+}
+.atelier-cta:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+  background: #57534E;
+  box-shadow: none;
+}
+.atelier-cta .atelier-cta-shimmer {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 60%;
+  height: 100%;
+  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
+  pointer-events: none;
+  transition: left 700ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.atelier-cta:hover .atelier-cta-shimmer {
+  left: 130%;
+}
+
+/* Discard button */
+.atelier-discard {
+  font-family: var(--font-fraunces);
+  font-style: italic;
+  font-size: 14px;
+  font-variation-settings: "opsz" 14, "SOFT" 100;
+  color: #786B53;
+  background: transparent;
+  border: 0;
+  padding: 8px 6px;
+  cursor: pointer;
+  transition: color 180ms ease;
+}
+.atelier-discard:hover {
+  color: #1C1917;
+}
+
+/* Brand selector */
+.atelier-select {
+  font-family: var(--font-manrope);
+  font-size: 15px;
+  font-weight: 500;
+  color: #1C1917;
+  background: transparent;
+  border: 0;
+  border-bottom: 1.5px solid rgba(28, 25, 23, 0.12);
+  border-radius: 0;
+  padding: 10px 24px 10px 0;
+  width: 100%;
+  outline: none;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23786B53' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right center;
+  transition: border-color 220ms ease;
+}
+.atelier-select:hover { border-bottom-color: rgba(28, 25, 23, 0.28); }
+.atelier-select:focus { border-bottom-color: #224E2F; border-bottom-width: 2px; padding-bottom: 9.5px; }
+
+/* Hint / help text */
+.atelier-hint {
+  font-family: var(--font-fraunces);
+  font-style: italic;
+  font-size: 12px;
+  font-variation-settings: "opsz" 14, "SOFT" 100;
+  color: #A8A29E;
+  line-height: 1.4;
+  margin-top: 6px;
+}
+
+/* Error banner */
+.atelier-error {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 14px;
+  background: linear-gradient(135deg, rgba(185, 28, 28, 0.06) 0%, rgba(185, 28, 28, 0.03) 100%);
+  border: 1px solid rgba(185, 28, 28, 0.25);
+  border-radius: 10px;
+  font-family: var(--font-manrope);
+  font-size: 13px;
+  color: #991B1B;
+}
+.atelier-error svg { flex-shrink: 0; margin-top: 1px; }
@@ -5,7 +5,6 @@ import IndianRiverStopsList from "./IndianRiverStopsList";
 // Page-level cache — matches the 5-min revalidate in getPublicStopsForBrand.
 // Mutations call revalidateTag("stops") to invalidate.
 export const revalidate = 300;
-export const dynamic = "force-dynamic";

 export default async function IndianRiverStopsPage() {
  const [stops, settings] = await Promise.all([
@@ -1,4 +1,5 @@
 import type { Metadata, Viewport } from "next";
+import { Fraunces, Manrope, Fragment_Mono } from "next/font/google";
 import "./globals.css";
 import { Providers } from "@/components/Providers";
 import ToastNotificationContainer from "@/components/notifications/ToastNotification";
@@ -6,6 +7,26 @@ import CookieConsentBanner from "@/components/legal/CookieConsentBanner";

 const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://routecommerce.com";

+const fraunces = Fraunces({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-fraunces",
+  axes: ["SOFT", "WONK", "opsz"],
+});
+
+const manrope = Manrope({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-manrope",
+});
+
+const fragmentMono = Fragment_Mono({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-fragment-mono",
+  weight: "400",
+});
+
 export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
@@ -50,8 +71,8 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="en" suppressHydrationWarning>
-      <body>
+    <html lang="en" suppressHydrationWarning className={`${fraunces.variable} ${manrope.variable} ${fragmentMono.variable}`}>
+      <body className="font-sans">
        <Providers>{children}</Providers>
        <ToastNotificationContainer />
        <CookieConsentBanner />
@@ -3,6 +3,7 @@
 import { useState, useEffect, useCallback, Suspense } from "react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
+import { signInWithGoogle, signInWithDev } from "@/actions/auth-signin";

 function LoginForm() {
  const [email, setEmail] = useState("");
@@ -124,6 +125,82 @@ function LoginForm() {
                </p>
              </div>

+              {/* Auth.js v5 — primary sign-in: Google OAuth */}
+              <form action={signInWithGoogle} className="space-y-3">
+                <button
+                  type="submit"
+                  className="w-full inline-flex items-center justify-center gap-3 rounded-xl border border-stone-200/80 bg-white px-6 py-3.5 text-sm font-semibold text-stone-900 shadow-sm transition-all hover:bg-stone-50 active:scale-[0.98]"
+                  style={{ fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif" }}
+                  aria-label="Sign in with Google"
+                >
+                  <svg className="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
+                    <path
+                      fill="#4285F4"
+                      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                    />
+                    <path
+                      fill="#34A853"
+                      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A10.99 10.99 0 0 0 12 23z"
+                    />
+                    <path
+                      fill="#FBBC05"
+                      d="M5.84 14.09a6.6 6.6 0 0 1 0-4.18V7.07H2.18a11 11 0 0 0 0 9.86l3.66-2.84z"
+                    />
+                    <path
+                      fill="#EA4335"
+                      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A10.99 10.99 0 0 0 2.18 7.07l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z"
+                    />
+                  </svg>
+                  <span>Sign in with Google</span>
+                </button>
+              </form>
+
+              {/* Dev login (only visible in development) */}
+              {process.env.NODE_ENV !== "production" && (
+                <form action={signInWithDev} className="space-y-3">
+                  <div className="rounded-xl bg-amber-50/70 border border-amber-200/60 px-3 py-2 text-xs text-amber-900">
+                    <strong>Dev login</strong> — only available in development.
+                    Set <code>ALLOW_DEV_LOGIN=false</code> in <code>.env.local</code> to hide.
+                  </div>
+                  <div className="grid grid-cols-2 gap-2">
+                    <input
+                      name="username"
+                      type="text"
+                      defaultValue="admin"
+                      className="rounded-xl border border-stone-200/80 bg-white/90 px-3 py-2.5 text-sm text-stone-900 outline-none focus:border-[#6b8f71] focus:ring-4 focus:ring-[#6b8f71]/10 placeholder:text-stone-400"
+                      placeholder="Username"
+                      aria-label="Dev username"
+                    />
+                    <input
+                      name="password"
+                      type="password"
+                      defaultValue="dev"
+                      className="rounded-xl border border-stone-200/80 bg-white/90 px-3 py-2.5 text-sm text-stone-900 outline-none focus:border-[#6b8f71] focus:ring-4 focus:ring-[#6b8f71]/10 placeholder:text-stone-400"
+                      placeholder="Password"
+                      aria-label="Dev password"
+                    />
+                  </div>
+                  <button
+                    type="submit"
+                    className="w-full rounded-xl bg-stone-900 px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-stone-700"
+                    style={{ fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif" }}
+                  >
+                    Dev sign in (no Google required)
+                  </button>
+                </form>
+              )}
+
+              <div className="relative my-2">
+                <div className="absolute inset-0 flex items-center" aria-hidden="true">
+                  <div className="w-full border-t border-stone-200/70" />
+                </div>
+                <div className="relative flex justify-center text-xs uppercase tracking-wider">
+                  <span className="bg-white/0 px-2 text-stone-400" style={{ background: "linear-gradient(to right, transparent, white 30%, white 70%, transparent)" }}>
+                    or sign in with email
+                  </span>
+                </div>
+              </div>
+
              <form onSubmit={handleSubmit} className="space-y-5" aria-label="Sign in form">
                {globalError && (
                  <div role="alert" className="rounded-2xl bg-red-50/80 p-4 text-sm text-red-600 border border-red-100/50">
@@ -2,24 +2,30 @@

 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { authClient } from "@/lib/auth-client";
+import { supabase } from "@/lib/supabase";

 export default function LogoutPage() {
  const router = useRouter();

  useEffect(() => {
-    // Clear all auth cookies — dev_session, rc_session_token
+    // Clear all auth cookies — dev_session, rc_auth_uid, rc_auth_token
    document.cookie = "dev_session=;path=/;max-age=0";
-    document.cookie = "rc_session_token=;path=/;max-age=0";
-    document.cookie = "wholesale_session=;path=/;max-age=0";
+    document.cookie = "rc_auth_uid=;path=/;max-age=0";
+    document.cookie = "rc_auth_token=;path=/;max-age=0";
    // Clear shopping cart on logout
    localStorage.removeItem("route_commerce_cart");
    localStorage.removeItem("route_commerce_stop");

-    // Sign out from Better Auth
-    authClient.signOut().then(() => {
-      router.push("/login");
-      router.refresh();
+    // Sign out from Supabase and clear server cart
+    supabase.auth.getUser().then(async ({ data }) => {
+      if (data.user?.id) {
+        const { clearServerCart } = await import("@/actions/checkout");
+        clearServerCart(data.user.id).catch(() => {});
+      }
+      supabase.auth.signOut().then(() => {
+        router.push("/login");
+        router.refresh();
+      });
    });
  }, [router]);

@@ -0,0 +1,124 @@
+import { auth, signOut } from "@/lib/auth";
+
+/**
+ * /protected-example
+ *
+ * Smoke-test page that demonstrates the new Auth.js v5 pattern. Calling
+ * `auth()` server-side returns the current session (null if not signed
+ * in). The middleware in `../middleware.ts` already redirects
+ * unauthenticated visitors to `/login`, so by the time this page renders
+ * we always have a session.
+ *
+ * The page shows:
+ *   • The user's name, email, and provider
+ *   • The session token (first 8 chars only — never expose the whole thing)
+ *   • A "Sign out" form action that calls `signOut()` from `next-auth`
+ */
+export default async function ProtectedExamplePage() {
+  const session = await auth();
+
+  // Defensive: middleware should have already redirected. Render a
+  // friendly hint if we ever reach here unauthenticated.
+  if (!session?.user) {
+    return (
+      <main className="min-h-screen flex items-center justify-center bg-stone-50 px-6">
+        <div className="max-w-md rounded-2xl bg-white p-8 shadow ring-1 ring-stone-200">
+          <h1 className="text-xl font-semibold text-stone-900">
+            Not signed in
+          </h1>
+          <p className="mt-2 text-sm text-stone-600">
+            You should have been redirected to{" "}
+            <a className="text-emerald-700 underline" href="/login">
+              /login
+            </a>
+            . If you can see this, the middleware matcher needs adjusting.
+          </p>
+        </div>
+      </main>
+    );
+  }
+
+  const user = session.user;
+  const expires = session.expires
+    ? new Date(session.expires).toLocaleString()
+    : "(no expiry)";
+
+  // The raw session token isn't on the session object in v5 (only the
+  // csrfToken is exposed client-side). We surface what we do have.
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-stone-50 px-6 py-12">
+      <div className="w-full max-w-xl space-y-6">
+        <header>
+          <h1
+            className="text-3xl font-semibold tracking-tight text-stone-900"
+            style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}
+          >
+            Protected example
+          </h1>
+          <p className="mt-1 text-sm text-stone-500">
+            You are signed in. This page is guarded by the Auth.js
+            middleware in <code className="text-xs">middleware.ts</code>.
+          </p>
+        </header>
+
+        <section className="rounded-2xl bg-white p-6 shadow ring-1 ring-stone-200">
+          <h2 className="text-sm font-semibold uppercase tracking-wider text-stone-500">
+            Session
+          </h2>
+          <dl className="mt-4 grid grid-cols-1 gap-4 text-sm sm:grid-cols-2">
+            <div>
+              <dt className="text-stone-500">Name</dt>
+              <dd className="mt-1 font-medium text-stone-900">
+                {user.name ?? "(none)"}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-stone-500">Email</dt>
+              <dd className="mt-1 font-medium text-stone-900 break-all">
+                {user.email ?? "(none)"}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-stone-500">User id</dt>
+              <dd className="mt-1 font-mono text-xs text-stone-700 break-all">
+                {(user as { id?: string }).id ?? "(none)"}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-stone-500">Session expires</dt>
+              <dd className="mt-1 font-medium text-stone-900">{expires}</dd>
+            </div>
+          </dl>
+        </section>
+
+        <section className="rounded-2xl bg-white p-6 shadow ring-1 ring-stone-200">
+          <h2 className="text-sm font-semibold uppercase tracking-wider text-stone-500">
+            Try it
+          </h2>
+          <p className="mt-2 text-sm text-stone-600">
+            Use the form below to sign out, or navigate to{" "}
+            <a className="text-emerald-700 underline" href="/admin">
+              /admin
+            </a>{" "}
+            (the same session is shared).
+          </p>
+
+          <form
+            action={async () => {
+              "use server";
+              await signOut({ redirectTo: "/login" });
+            }}
+            className="mt-4"
+          >
+            <button
+              type="submit"
+              className="rounded-xl bg-stone-900 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-stone-700"
+            >
+              Sign out
+            </button>
+          </form>
+        </section>
+      </div>
+    </main>
+  );
+}
@@ -3,7 +3,7 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import { authClient } from "@/lib/auth-client";
+import { supabase } from "@/lib/supabase";

 export default function ResetPasswordPage() {
  const router = useRouter();
@@ -28,21 +28,22 @@ export default function ResetPasswordPage() {

    setLoading(true);

-    const { error: authError } = await authClient.changePassword({
-      newPassword: password,
-      currentPassword: "", // user is coming from a recovery link; Better Auth requires a session
+    const { error: authError } = await supabase.auth.updateUser({
+      password,
    });

    if (authError) {
-      setError(authError.message ?? "Failed to update password");
+      setError(authError.message);
      setLoading(false);
      return;
    }

    // Clear must_change_password flag in admin_users so the user
    // is not forced through change-password again after re-login.
-    // (No-op in self-hosted mode; flag is checked on session read in app code.)
-    console.info("[reset-password] password updated");
+    const { error: clearError } = await supabase.rpc("clear_must_change_password");
+    if (clearError) {
+      console.error("[reset-password] clear_must_change_password error:", clearError.message);
+    }

    setDone(true);
    setLoading(false);
@@ -1,10 +1,6 @@
 import { MetadataRoute } from "next";
 import { getActiveStopsForSitemap } from "@/actions/stops";

-// Sitemap calls a server action that needs the database — render at request time
-// rather than build time so the build doesn't require PostgREST to be up.
-export const dynamic = "force-dynamic";
-
 const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://yourdomain.com";

 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
@@ -6,7 +6,6 @@ import StorefrontHeader from "@/components/storefront/StorefrontHeader";
 import StorefrontFooter from "@/components/storefront/StorefrontFooter";
 import { supabase } from "@/lib/supabase";
 import { getBrandSettingsPublic } from "@/actions/brand-settings";
-import { publicUrl, BUCKETS } from "@/lib/storage";

 // Lazy load heavy sections
 const MissionSection = lazy(() => import("@/components/about/MissionSection"));
@@ -14,10 +13,8 @@ const FamilyTimelineSection = lazy(() => import("@/components/about/FamilyTimeli
 const ContactSection = lazy(() => import("@/components/about/ContactSection"));
 const CTASection = lazy(() => import("@/components/about/CTASection"));

-const OLATHE_SWEET_LOGO_DARK = publicUrl(
-  BUCKETS.BRAND_LOGOS,
-  "64294306-5f42-463d-a5e8-2ad6c81a96de/olathe-sweet-logo.png"
-);
+const OLATHE_SWEET_LOGO_DARK =
+  "https://wnzkhezyhnfzhkhiflrp.supabase.co/storage/v1/object/public/brand-logos/64294306-5f42-463d-a5e8-2ad6c81a96de/olathe-sweet-logo.png";

 export default function TuxedoAboutPage() {
  const [logoUrl, setLogoUrl] = useState<string | null>(null);
@@ -0,0 +1,116 @@
+import type { Metadata } from "next";
+import { Fraunces, JetBrains_Mono } from "next/font/google";
+import { supabase } from "@/lib/supabase";
+import { getBrandSettingsPublic } from "@/actions/brand-settings";
+import SweetCornProductPage from "@/components/storefront/SweetCornProductPage";
+
+const fraunces = Fraunces({
+  subsets: ["latin"],
+  variable: "--font-display",
+  display: "swap",
+  style: ["normal", "italic"],
+});
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-mono",
+  display: "swap",
+  weight: ["400", "500", "700"],
+});
+
+export const metadata: Metadata = {
+  // The Tuxedo layout's `template: "%s | Tuxedo Corn"` already appends the
+  // brand — keep the bare title here so the rendered <title> is correct.
+  title: "Fresh Sweet Corn Box – 12 Ears",
+  description:
+    "Our 12-Ear Corn Box is packed with peak-season, super-sweet Olathe Sweet corn picked that morning and rushed to your door. Hand-selected, non-GMO, and 100% sweetness guaranteed.",
+  keywords: [
+    "sweet corn",
+    "Olathe Sweet",
+    "fresh corn box",
+    "12 ears of corn",
+    "farm fresh corn",
+    "Tuxedo Corn",
+  ],
+  openGraph: {
+    title: "Fresh Sweet Corn Box – 12 Ears",
+    description:
+      "Peak-season, super-sweet Olathe Sweet corn — picked that morning, rushed to your door. 100% sweetness guaranteed.",
+    type: "website",
+    images: [
+      {
+        url: "https://images.unsplash.com/photo-1551754655-cd27e38d2076?auto=format&fit=crop&w=1200&q=80",
+        width: 1200,
+        height: 630,
+        alt: "Fresh sweet corn box — 12 ears of Olathe Sweet corn",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Fresh Sweet Corn Box – 12 Ears",
+    description:
+      "Peak-season, super-sweet Olathe Sweet corn. Hand-selected, non-GMO, 100% sweetness guaranteed.",
+  },
+};
+
+const BRAND_SLUG = "tuxedo";
+
+type Brand = {
+  id: string;
+  name: string;
+};
+
+type Settings = {
+  logo_url?: string | null;
+  logo_url_dark?: string | null;
+};
+
+export default async function SweetCornBoxPage() {
+  // Fetch the brand record so we have a real brand_id to thread through
+  // the cart system. Falls back to a placeholder if Supabase is unreachable
+  // (so the page still renders in dev / disconnected previews).
+  let brandId = "00000000-0000-0000-0000-000000000000";
+  let brandName = "Tuxedo Corn";
+  let logoUrl: string | null = null;
+  let logoUrlDark: string | null = null;
+
+  try {
+    const [brandRes, settingsRes] = await Promise.all([
+      supabase.from("brands").select("id, name").eq("slug", BRAND_SLUG).single(),
+      getBrandSettingsPublic(BRAND_SLUG),
+    ]);
+    if (brandRes.data) {
+      const b = brandRes.data as Brand;
+      brandId = b.id;
+      brandName = b.name;
+    }
+    if (settingsRes.success && settingsRes.settings) {
+      const s = settingsRes.settings as Settings;
+      logoUrl = s.logo_url ?? null;
+      logoUrlDark = s.logo_url_dark ?? null;
+    }
+  } catch {
+    // ignore — fall through with defaults
+  }
+
+  return (
+    <div
+      className={`${fraunces.variable} ${jetbrainsMono.variable} font-sans`}
+      style={{
+        // The product page uses editorial typography: a display serif
+        // (Fraunces) for headlines and a mono (JetBrains Mono) for data
+        // stamps. Body copy falls back to the global SF Pro stack.
+        ["--font-display" as never]: fraunces.style.fontFamily,
+        ["--font-mono" as never]: jetbrainsMono.style.fontFamily,
+      }}
+    >
+      <SweetCornProductPage
+        brandId={brandId}
+        brandName={brandName}
+        logoUrl={logoUrl}
+        logoUrlDark={logoUrlDark}
+      />
+    </div>
+  );
+}
@@ -0,0 +1,105 @@
+import type { NextAuthConfig } from "next-auth";
+import Google from "next-auth/providers/google";
+
+/**
+ * Edge-compatible Auth.js v5 configuration.
+ *
+ * This file is imported by `src/middleware.ts`, which runs in the Edge runtime.
+ * It must NOT import the `@auth/pg-adapter` (which uses `pg`, a Node-only lib)
+ * or any other Node-only module. Database wiring lives in `src/lib/auth.ts`.
+ *
+ * If you need to add a provider that uses Node-only APIs (e.g. an adapter
+ * implementation), define it in `src/lib/auth.ts` instead and add a thin
+ * placeholder here so the middleware can still reference it.
+ */
+const isDev = process.env.NODE_ENV !== "production";
+const allowDevLogin = process.env.ALLOW_DEV_LOGIN !== "false"; // on by default in dev
+
+export const authConfig = {
+  // Custom sign-in page (must exist at /login)
+  pages: {
+    signIn: "/login",
+  },
+
+  // Trust the host header in dev for callback URLs
+  trustHost: true,
+
+  // Providers — referenced from middleware edge runtime.
+  // The Google provider only needs the env vars at runtime; it does not pull
+  // in any Node-only code. The dev Credentials provider is added in
+  // `src/lib/auth.ts` (server-side only) — it's not safe to import
+  // `next-auth/providers/credentials` from the edge runtime.
+  providers: [
+    Google({
+      clientId: process.env.GOOGLE_CLIENT_ID ?? process.env.AUTH_GOOGLE_ID,
+      clientSecret:
+        process.env.GOOGLE_CLIENT_SECRET ?? process.env.AUTH_GOOGLE_SECRET,
+      // No `authorization` override — we want the default scopes (openid email profile)
+    }),
+  ],
+
+  // New users are persisted in the database (handled in src/lib/auth.ts)
+  // Default to JWT here so middleware can run in edge runtime; the full
+  // server-side handler in src/lib/auth.ts switches this to "database".
+  session: { strategy: "jwt" },
+
+  callbacks: {
+    /**
+     * Gate /admin routes. Anything not on the public list and not signed in
+     * gets redirected to /login. This mirrors what the page-level checks do,
+     * but runs first at the edge so unauthorized requests never hit the
+     * server component tree.
+     */
+    authorized({ auth, request: { nextUrl } }) {
+      const isLoggedIn = !!auth?.user;
+      const isOnAdmin = nextUrl.pathname.startsWith("/admin");
+      const isOnProtectedExample = nextUrl.pathname.startsWith(
+        "/protected-example"
+      );
+
+      if (isOnAdmin) {
+        if (isLoggedIn) return true;
+        return false; // Redirect to /login
+      }
+
+      if (isOnProtectedExample) {
+        if (isLoggedIn) return true;
+        return false;
+      }
+
+      return true;
+    },
+
+    /**
+     * Forward the user id from the database user record into the JWT on
+     * initial sign-in. With database sessions this is what populates
+     * `session.user.id` for downstream server actions.
+     */
+    async jwt({ token, user }) {
+      if (user) {
+        token.id = (user as { id?: string }).id ?? token.sub;
+      }
+      return token;
+    },
+
+    async session({ session, token }) {
+      if (session.user && token?.sub) {
+        (session.user as { id?: string }).id = token.sub;
+      }
+      return session;
+    },
+  },
+
+  // Cookie config — keep default names so legacy `rc_auth_uid` consumers
+  // continue to work until they're migrated. New Auth.js cookies default to
+  // `authjs.session-token` (dev) and `__Secure-authjs.session-token` (prod).
+} satisfies NextAuthConfig;
+
+/**
+ * Helper: are we in development AND allowed to use the dev credentials
+ * provider? Exposed so server-side `src/lib/auth.ts` can decide whether to
+ * include the provider in its provider list.
+ */
+export function isDevLoginEnabled(): boolean {
+  return isDev && allowDevLogin;
+}
@@ -0,0 +1,288 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { createLocation } from "@/actions/locations";
+import GlassModal from "@/components/admin/GlassModal";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  brandId: string;
+  onSuccess?: (locationId: string) => void;
+};
+
+export default function AddLocationModal({ isOpen, onClose, brandId, onSuccess }: Props) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [name, setName] = useState("");
+  const [address, setAddress] = useState("");
+  const [city, setCity] = useState("");
+  const [stateVal, setStateVal] = useState("");
+  const [zip, setZip] = useState("");
+  const [phone, setPhone] = useState("");
+  const [contactName, setContactName] = useState("");
+  const [contactEmail, setContactEmail] = useState("");
+  const [notes, setNotes] = useState("");
+
+  const reset = useCallback(() => {
+    setName("");
+    setAddress("");
+    setCity("");
+    setStateVal("");
+    setZip("");
+    setPhone("");
+    setContactName("");
+    setContactEmail("");
+    setNotes("");
+    setError(null);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    if (loading) return;
+    reset();
+    onClose();
+  }, [loading, reset, onClose]);
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      setError(null);
+      if (!name.trim()) {
+        setError("Venue name is required.");
+        return;
+      }
+      setLoading(true);
+      try {
+        const result = await createLocation(brandId, {
+          name: name.trim(),
+          address: address.trim() || null,
+          city: city.trim() || null,
+          state: stateVal.trim().toUpperCase() || null,
+          zip: zip.trim() || null,
+          phone: phone.trim() || null,
+          contact_name: contactName.trim() || null,
+          contact_email: contactEmail.trim() || null,
+          notes: notes.trim() || null,
+          active: true,
+        });
+        if (result.success) {
+          onSuccess?.(result.id);
+          reset();
+          onClose();
+        } else {
+          setError(result.error ?? "Failed to create location");
+        }
+      } catch {
+        setError("Network error. Please try again.");
+      } finally {
+        setLoading(false);
+      }
+    },
+    [brandId, name, address, city, stateVal, zip, phone, contactName, contactEmail, notes, onSuccess, reset, onClose]
+  );
+
+  const inputStyle = {
+    background: "rgba(0, 0, 0, 0.02)",
+    border: "1px solid rgba(0, 0, 0, 0.06)",
+    outline: "none",
+  };
+
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    e.target.style.background = "rgba(16, 185, 129, 0.04)";
+    e.target.style.border = "1px solid rgba(16, 185, 129, 0.5)";
+    e.target.style.boxShadow = "0 0 0 4px rgba(16, 185, 129, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04)";
+  };
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    e.target.style.background = "rgba(0, 0, 0, 0.02)";
+    e.target.style.border = "1px solid rgba(0, 0, 0, 0.06)";
+    e.target.style.boxShadow = "none";
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <GlassModal
+      title="Add Venue"
+      subtitle="Reusable pick-up location. Once saved, you can attach stops to it from the Stops tab."
+      onClose={handleClose}
+    >
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {error && (
+          <div
+            className="rounded-xl px-4 py-3 text-sm text-red-600 backdrop-blur-sm"
+            style={{ background: "rgba(239, 68, 68, 0.1)", border: "1px solid rgba(239, 68, 68, 0.2)" }}
+          >
+            {error}
+          </div>
+        )}
+
+        <div className="space-y-1.5">
+          <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Venue name *</label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Tractor Supply"
+            className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
+            style={inputStyle}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            required
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Street address</label>
+          <input
+            type="text"
+            value={address}
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="13778 E I-25 Frontage Rd"
+            className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
+            style={inputStyle}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+          />
+        </div>
+
+        <div className="grid grid-cols-6 gap-4">
+          <div className="col-span-3 space-y-1.5">
+            <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">City</label>
+            <input
+              type="text"
+              value={city}
+              onChange={(e) => setCity(e.target.value)}
+              placeholder="Wellington"
+              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
+              style={inputStyle}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+            />
+          </div>
+          <div className="col-span-1 space-y-1.5">
+            <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">State</label>
+            <input
+              type="text"
+              value={stateVal}
+              onChange={(e) => setStateVal(e.target.value.toUpperCase())}
+              placeholder="CO"
+              maxLength={2}
+              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
+              style={inputStyle}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+            />
+          </div>
+          <div className="col-span-2 space-y-1.5">
+            <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">ZIP</label>
+            <input
+              type="text"
+              value={zip}
+              onChange={(e) => setZip(e.target.value)}
+              placeholder="80549"
+              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
+              style={inputStyle}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-1.5">
+            <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Phone</label>
+            <input
+              type="tel"
+              value={phone}
+              onChange={(e) => setPhone(e.target.value)}
+              placeholder="(970) 555-1234"
+              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
+              style={inputStyle}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Contact name</label>
+            <input
+              type="text"
+              value={contactName}
+              onChange={(e) => setContactName(e.target.value)}
+              placeholder="Store manager"
+              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
+              style={inputStyle}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+            />
+          </div>
+        </div>
+
+        <div className="space-y-1.5">
+          <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Contact email</label>
+          <input
+            type="email"
+            value={contactEmail}
+            onChange={(e) => setContactEmail(e.target.value)}
+            placeholder="manager@example.com"
+            className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
+            style={inputStyle}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Notes</label>
+          <textarea
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+            placeholder="Park on west side. Use side entrance after 9am."
+            rows={2}
+            className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all resize-none"
+            style={inputStyle}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+          />
+        </div>
+
+        <div className="flex items-center justify-end gap-3 pt-4" style={{ borderTop: "1px solid rgba(0, 0, 0, 0.04)" }}>
+          <button
+            type="button"
+            onClick={handleClose}
+            disabled={loading}
+            className="rounded-xl px-5 py-2.5 text-sm font-medium text-stone-500 hover:text-stone-700 transition-all hover:bg-stone-100 disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            disabled={loading}
+            className="rounded-xl px-6 py-2.5 text-sm font-semibold text-white transition-all"
+            style={{
+              background: loading
+                ? "rgba(16, 185, 129, 0.4)"
+                : "linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%)",
+              boxShadow: loading
+                ? "none"
+                : "0 4px 12px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255,255,255,0.2)",
+              opacity: loading ? 0.7 : 1,
+            }}
+          >
+            {loading ? (
+              <span className="flex items-center gap-2">
+                <svg className="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                </svg>
+                Creating…
+              </span>
+            ) : (
+              "Create Venue"
+            )}
+          </button>
+        </div>
+      </form>
+    </GlassModal>
+  );
+}
@@ -1,6 +1,6 @@
 "use client";

-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
 import { createStop } from "@/actions/stops/create-stop";
 import GlassModal from "@/components/admin/GlassModal";

@@ -21,12 +21,20 @@ type Props = {
  onSuccess?: (stopId: string) => void;
 };

+/* Pin icon for the modal header */
+const PinIcon = () => (
+  <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
+    <circle cx="12" cy="10" r="3" />
+  </svg>
+);
+
 export default function AddStopModal({ isOpen, onClose, brandId, duplicateFrom, onSuccess }: Props) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const [city, setCity] = useState("");
-  const [state, setState] = useState("");
+  const [stateField, setStateField] = useState("");
  const [location, setLocation] = useState("");
  const [date, setDate] = useState("");
  const [time, setTime] = useState("");
@@ -36,11 +44,13 @@ export default function AddStopModal({ isOpen, onClose, brandId, duplicateFrom,
  const [cutoffTime, setCutoffTime] = useState("");
  const [status, setStatus] = useState<"draft" | "active">("draft");

+  const cityRef = useRef<HTMLInputElement>(null);
+
  useEffect(() => {
    if (isOpen) {
      // Reset form when modal opens with optional duplicate source
      setCity(duplicateFrom?.city ?? "");
-      setState(duplicateFrom?.state ?? "");
+      setStateField(duplicateFrom?.state ?? "");
      setLocation(duplicateFrom?.location ?? "");
      setDate(duplicateFrom?.date ?? "");
      setTime(duplicateFrom?.time ?? "");
@@ -49,272 +59,328 @@ export default function AddStopModal({ isOpen, onClose, brandId, duplicateFrom,
      setCutoffTime(duplicateFrom?.cutoff_time ?? "");
      setStatus("draft");
      setError(null);
+      // Auto-focus city field for fast data entry
+      requestAnimationFrame(() => cityRef.current?.focus());
    }
  /* eslint-enable react-hooks/set-state-in-effect */
  }, [isOpen, duplicateFrom]);

-  const handleSubmit = useCallback(async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError(null);
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      setError(null);

-    if (!city.trim() || !state.trim() || !location.trim() || !date) {
-      setError("City, state, location, and date are required.");
-      return;
-    }
-
-    setLoading(true);
-    try {
-      const result = await createStop(brandId, {
-        city: city.trim(),
-        state: state.trim(),
-        location: location.trim(),
-        date,
-        time: time || "08:00",
-        address: address || undefined,
-        zip: zip || undefined,
-        cutoff_time: cutoffTime || undefined,
-        active: status === "active",
-      });
-
-      if (result.success) {
-        onSuccess?.(result.id);
-        onClose();
-      } else {
-        setError(result.error ?? "Failed to create stop");
+      if (!city.trim() || !stateField.trim() || !location.trim() || !date) {
+        setError("City, state, location, and date are required.");
+        return;
      }
-    } catch {
-      setError("Network error. Please try again.");
-    } finally {
-      setLoading(false);
-    }
-  }, [brandId, city, state, location, date, time, address, zip, cutoffTime, status, onSuccess, onClose]);
+
+      setLoading(true);
+      try {
+        const result = await createStop(brandId, {
+          city: city.trim(),
+          state: stateField.trim(),
+          location: location.trim(),
+          date,
+          time: time || "08:00",
+          address: address || undefined,
+          zip: zip || undefined,
+          cutoff_time: cutoffTime || undefined,
+          active: status === "active",
+        });
+
+        if (result.success) {
+          onSuccess?.(result.id);
+          onClose();
+        } else {
+          setError(result.error ?? "Failed to create stop");
+        }
+      } catch {
+        setError("Network error. Please try again.");
+      } finally {
+        setLoading(false);
+      }
+    },
+    [
+      brandId,
+      city,
+      stateField,
+      location,
+      date,
+      time,
+      address,
+      zip,
+      cutoffTime,
+      status,
+      onSuccess,
+      onClose,
+    ]
+  );

  const isDuplicate = Boolean(duplicateFrom);
-  const title = isDuplicate ? "Duplicate Stop" : "Add New Stop";
-  const subtitle = isDuplicate && duplicateFrom
+  const title = isDuplicate ? "Duplicate Stop" : "Add Stop";
+  const eyebrow = isDuplicate && duplicateFrom
    ? `From ${duplicateFrom.city}, ${duplicateFrom.state}`
-    : "Create a new tour stop for your route.";
-
-  const inputStyle = {
-    background: 'rgba(0, 0, 0, 0.02)',
-    border: '1px solid rgba(0, 0, 0, 0.06)',
-    outline: 'none',
-  };
-
-  const handleFocus = (e: React.FocusEvent<HTMLInputElement | HTMLSelectElement>) => {
-    e.target.style.background = 'rgba(16, 185, 129, 0.04)';
-    e.target.style.border = '1px solid rgba(16, 185, 129, 0.5)';
-    e.target.style.boxShadow = '0 0 0 4px rgba(16, 185, 129, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04)';
-  };
-
-  const handleBlur = (e: React.FocusEvent<HTMLInputElement | HTMLSelectElement>) => {
-    e.target.style.background = 'rgba(0, 0, 0, 0.02)';
-    e.target.style.border = '1px solid rgba(0, 0, 0, 0.06)';
-    e.target.style.boxShadow = 'none';
-  };
+    : "New stop on the route";
+  const submitLabel = loading
+    ? isDuplicate ? "Duplicating…" : "Creating…"
+    : isDuplicate
+      ? "Duplicate Stop"
+      : status === "active"
+        ? "Create & Publish"
+        : "Save as Draft";

  if (!isOpen) return null;

  return (
-    <GlassModal title={title} subtitle={subtitle} onClose={onClose}>
-      <form onSubmit={handleSubmit} className="space-y-4">
+    <GlassModal
+      title={title}
+      eyebrow={eyebrow}
+      onClose={onClose}
+      maxWidth="max-w-xl"
+      compact
+    >
+      <form onSubmit={handleSubmit} className="space-y-3" noValidate>
        {error && (
-          <div className="rounded-xl px-4 py-3 text-sm text-red-600 backdrop-blur-sm" 
-            style={{ background: 'rgba(239, 68, 68, 0.1)', border: '1px solid rgba(239, 68, 68, 0.2)' }}>
-            {error}
+          <div
+            role="alert"
+            className="flex items-start gap-2 rounded-lg px-3 py-2 text-xs text-[var(--admin-danger)]"
+            style={{ background: "rgba(220, 38, 38, 0.06)", border: "1px solid rgba(220, 38, 38, 0.15)" }}
+          >
+            <svg className="h-3.5 w-3.5 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
+              <circle cx="12" cy="12" r="10" />
+              <path d="M12 8v4M12 16h.01" strokeLinecap="round" />
+            </svg>
+            <span>{error}</span>
          </div>
        )}

-        <div className="grid grid-cols-3 gap-4">
-          <div className="col-span-2 space-y-1.5">
-            <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">City</label>
+        {/* Row 1 — Where: City + State */}
+        <div className="grid grid-cols-[1fr_5.5rem] gap-3">
+          <div className="ha-field">
+            <label htmlFor="stop-city" className="ha-field-label">
+              <PinIcon />
+              <span>City</span>
+              <span className="ha-field-label-required">*</span>
+            </label>
            <input
+              ref={cityRef}
+              id="stop-city"
              type="text"
              value={city}
              onChange={(e) => setCity(e.target.value)}
              placeholder="Denver"
-              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
-              style={inputStyle}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
+              className="ha-field-input"
              required
+              autoComplete="address-level2"
            />
          </div>
-          <div className="space-y-1.5">
-            <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">State</label>
+          <div className="ha-field">
+            <label htmlFor="stop-state" className="ha-field-label">
+              <span>State</span>
+              <span className="ha-field-label-required">*</span>
+            </label>
            <input
+              id="stop-state"
              type="text"
-              value={state}
-              onChange={(e) => setState(e.target.value.toUpperCase())}
+              value={stateField}
+              onChange={(e) => setStateField(e.target.value.toUpperCase())}
              placeholder="CO"
              maxLength={2}
-              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
-              style={inputStyle}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
+              className="ha-field-input ha-field-input-mono text-center"
+              style={{ textTransform: "uppercase" }}
              required
+              autoComplete="address-level1"
            />
          </div>
        </div>

-        <div className="space-y-1.5">
-          <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Location</label>
+        {/* Row 2 — Where at: Location (full) */}
+        <div className="ha-field">
+          <label htmlFor="stop-location" className="ha-field-label">
+            <span>Location / Venue</span>
+            <span className="ha-field-label-required">*</span>
+          </label>
          <input
+            id="stop-location"
            type="text"
            value={location}
            onChange={(e) => setLocation(e.target.value)}
-            placeholder="Whole Foods Market"
-            className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
-            style={inputStyle}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
+            placeholder="Whole Foods Market — Highlands"
+            className="ha-field-input"
            required
          />
        </div>

-        <div className="grid grid-cols-2 gap-4">
-          <div className="space-y-1.5">
-            <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Date</label>
+        {/* Row 3 — When: Date + Time (with small clock icon) */}
+        <div className="grid grid-cols-[1fr_1fr] gap-3">
+          <div className="ha-field">
+            <label htmlFor="stop-date" className="ha-field-label">
+              <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}>
+                <rect x="3" y="4" width="18" height="18" rx="2" />
+                <path d="M16 2v4M8 2v4M3 10h18" strokeLinecap="round" />
+              </svg>
+              <span>Pickup Date</span>
+              <span className="ha-field-label-required">*</span>
+            </label>
            <input
+              id="stop-date"
              type="date"
              value={date}
              onChange={(e) => setDate(e.target.value)}
-              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 transition-all"
-              style={inputStyle}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
+              className="ha-field-input ha-field-input-mono"
              required
            />
          </div>
-          <div className="space-y-1.5">
-            <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Pickup Time</label>
+          <div className="ha-field">
+            <label htmlFor="stop-time" className="ha-field-label">
+              <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}>
+                <circle cx="12" cy="12" r="10" />
+                <path d="M12 6v6l4 2" strokeLinecap="round" />
+              </svg>
+              <span>Pickup Time</span>
+            </label>
            <input
+              id="stop-time"
              type="time"
              value={time}
              onChange={(e) => setTime(e.target.value)}
-              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 transition-all"
-              style={inputStyle}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
+              className="ha-field-input ha-field-input-mono"
            />
          </div>
        </div>

-        <div className="grid grid-cols-3 gap-4">
-          <div className="col-span-2 space-y-1.5">
-            <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Address</label>
+        {/* Row 4 — Address + ZIP + Cutoff in 3 columns */}
+        <div className="grid grid-cols-[1fr_5.5rem_6.5rem] gap-3">
+          <div className="ha-field">
+            <label htmlFor="stop-address" className="ha-field-label">
+              <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}>
+                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" strokeLinejoin="round" />
+                <path d="M9 22V12h6v10" strokeLinejoin="round" />
+              </svg>
+              <span>Street Address</span>
+            </label>
            <input
+              id="stop-address"
              type="text"
              value={address}
              onChange={(e) => setAddress(e.target.value)}
              placeholder="123 Main St"
-              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
-              style={inputStyle}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
+              className="ha-field-input"
+              autoComplete="street-address"
            />
          </div>
-          <div className="space-y-1.5">
-            <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">ZIP</label>
+          <div className="ha-field">
+            <label htmlFor="stop-zip" className="ha-field-label">
+              <span>ZIP</span>
+            </label>
            <input
+              id="stop-zip"
              type="text"
              value={zip}
              onChange={(e) => setZip(e.target.value)}
              placeholder="80202"
-              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
-              style={inputStyle}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
+              maxLength={10}
+              className="ha-field-input ha-field-input-mono"
+              autoComplete="postal-code"
+            />
+          </div>
+          <div className="ha-field">
+            <label htmlFor="stop-cutoff" className="ha-field-label">
+              <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2}>
+                <circle cx="12" cy="12" r="9" />
+                <path d="M12 7v5l3 2" strokeLinecap="round" />
+              </svg>
+              <span>Cutoff</span>
+            </label>
+            <input
+              id="stop-cutoff"
+              type="time"
+              value={cutoffTime}
+              onChange={(e) => setCutoffTime(e.target.value)}
+              className="ha-field-input ha-field-input-mono"
            />
          </div>
        </div>

-        <div className="space-y-1.5">
-          <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Cutoff Time</label>
-          <input
-            type="time"
-            value={cutoffTime}
-            onChange={(e) => setCutoffTime(e.target.value)}
-            className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 transition-all"
-            style={inputStyle}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-          />
-          <p className="mt-1 text-xs text-stone-400 ml-1">Orders close this time the day before pickup</p>
-        </div>
-
-        {/* Status toggle */}
-        <div className="space-y-2">
-          <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Status</label>
-          <div className="flex gap-3">
+        {/* Row 5 — Status: segmented control (compact, replaces two giant buttons) */}
+        <div className="ha-field pt-0.5">
+          <div className="flex items-center justify-between">
+            <label className="ha-field-label">
+              <span>Visibility</span>
+            </label>
+            <span className="text-[10px] text-[var(--admin-text-muted)] leading-none">
+              Draft is hidden from customers
+            </span>
+          </div>
+          <div className="ha-segment mt-1" role="radiogroup" aria-label="Stop status">
            <button
              type="button"
+              role="radio"
+              aria-checked={status === "draft"}
              onClick={() => setStatus("draft")}
-              className="flex flex-1 items-center justify-center gap-2 rounded-xl border px-4 py-3 transition-all"
-              style={{
-                border: status === "draft" ? '1px solid rgba(245, 158, 11, 0.4)' : '1px solid rgba(0, 0, 0, 0.08)',
-                background: status === "draft" ? 'rgba(245, 158, 11, 0.08)' : 'rgba(0, 0, 0, 0.02)',
-              }}
+              className={`ha-segment-btn ${status === "draft" ? "ha-segment-btn--active ha-segment-active-draft" : ""}`}
            >
-              <span className="rounded-full px-2 py-0.5 text-xs font-semibold" style={{
-                background: status === "draft" ? 'rgba(245, 158, 11, 0.2)' : 'rgba(0, 0, 0, 0.05)',
-                color: status === "draft" ? '#b45309' : 'rgba(0, 0, 0, 0.4)',
-              }}>Draft</span>
-              <span className="text-sm font-medium" style={{ color: status === "draft" ? '#92400e' : 'rgba(0, 0, 0, 0.4)' }}>Save as draft</span>
+              <span className="ha-segment-dot" />
+              <span>Save as Draft</span>
            </button>
            <button
              type="button"
+              role="radio"
+              aria-checked={status === "active"}
              onClick={() => setStatus("active")}
-              className="flex flex-1 items-center justify-center gap-2 rounded-xl border px-4 py-3 transition-all"
-              style={{
-                border: status === "active" ? '1px solid rgba(16, 185, 129, 0.4)' : '1px solid rgba(0, 0, 0, 0.08)',
-                background: status === "active" ? 'rgba(16, 185, 129, 0.08)' : 'rgba(0, 0, 0, 0.02)',
-              }}
+              className={`ha-segment-btn ${status === "active" ? "ha-segment-btn--active ha-segment-active-active" : ""}`}
            >
-              <span className="rounded-full px-2 py-0.5 text-xs font-semibold" style={{
-                background: status === "active" ? 'rgba(16, 185, 129, 0.2)' : 'rgba(0, 0, 0, 0.05)',
-                color: status === "active" ? '#047857' : 'rgba(0, 0, 0, 0.4)',
-              }}>Active</span>
-              <span className="text-sm font-medium" style={{ color: status === "active" ? '#065f46' : 'rgba(0, 0, 0, 0.4)' }}>Publish now</span>
+              <span className="ha-segment-dot" />
+              <span>Publish Now</span>
            </button>
          </div>
        </div>

        {/* Footer */}
-        <div className="flex items-center justify-end gap-3 pt-4" style={{ borderTop: '1px solid rgba(0, 0, 0, 0.04)' }}>
-          <button
-            type="button"
-            onClick={onClose}
-            className="rounded-xl px-5 py-2.5 text-sm font-medium text-stone-500 hover:text-stone-700 transition-all hover:bg-stone-100"
-          >
-            Cancel
-          </button>
-          <button
-            type="submit"
-            disabled={loading}
-            className="rounded-xl px-6 py-2.5 text-sm font-semibold text-white transition-all"
-            style={{ 
-              background: loading 
-                ? 'rgba(16, 185, 129, 0.4)' 
-                : 'linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%)',
-              boxShadow: loading 
-                ? 'none' 
-                : '0 4px 12px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255,255,255,0.2)',
-              opacity: loading ? 0.7 : 1,
-            }}
-          >
-            {loading ? (
-              <span className="flex items-center gap-2">
-                <svg className="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
-                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-                </svg>
-                Creating...
-              </span>
-            ) : (
-              isDuplicate ? "Duplicate Stop" : "Create Stop"
-            )}
-          </button>
+        <div className="ha-modal-footer">
+          <span className="ha-modal-footer-hint">
+            <kbd>Esc</kbd>
+            to close
+          </span>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="ha-btn-ghost"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={loading}
+              className="ha-btn-primary"
+            >
+              {loading ? (
+                <>
+                  <svg className="h-3.5 w-3.5 animate-spin" viewBox="0 0 24 24" fill="none">
+                    <circle cx="12" cy="12" r="10" stroke="currentColor" strokeOpacity="0.25" strokeWidth="3" />
+                    <path d="M22 12a10 10 0 0 0-10-10" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+                  </svg>
+                  <span>{submitLabel}</span>
+                </>
+              ) : (
+                <>
+                  {status === "active" ? (
+                    <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
+                      <path d="M5 12l5 5L20 7" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                  ) : (
+                    <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
+                      <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z" strokeLinejoin="round" />
+                      <path d="M17 21v-8H7v8M7 3v5h8" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                  )}
+                  <span>{submitLabel}</span>
+                </>
+              )}
+            </button>
+          </div>
        </div>
      </form>
    </GlassModal>
@@ -9,7 +9,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { usePathname } from "next/navigation";
 import { useState, useEffect, useRef } from "react";
-import { authClient } from "@/lib/auth-client";
+import { supabase } from "@/lib/supabase";

 type AdminHeaderProps = {
  userRole?: string | null;
@@ -90,7 +90,7 @@ export default function AdminHeader({ userRole, canManageUsers, routeTraceEnable

  async function handleLogout() {
    document.cookie = "dev_session=;path=/;max-age=0";
-    await authClient.signOut();
+    await supabase.auth.signOut();
    router.push("/login");
    router.refresh();
  }
@@ -4,7 +4,8 @@ import { useState, useEffect, useRef, useCallback, KeyboardEvent } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useRouter } from "next/navigation";
-import { authClient } from "@/lib/auth-client";
+import { supabase } from "@/lib/supabase";
+import BrandSelector from "./BrandSelector";

 // Elegant warm sidebar design
 // Colors: parchment 100 bg, soft linen text, powder petal accent
@@ -217,9 +218,12 @@ const ICON_MAP: Record<string, React.ReactNode> = {

 type SidebarProps = {
  userRole?: string | null;
+  brandIds?: string[];
+  activeBrandId?: string | null;
+  brands?: Array<{ id: string; name: string; slug: string; logo_url: string | null }>;
 };

-export default function AdminSidebar({ userRole }: SidebarProps) {
+export default function AdminSidebar({ userRole, brandIds, activeBrandId, brands }: SidebarProps) {
  const pathname = usePathname();
  const router = useRouter();
  const [mobileOpen, setMobileOpen] = useState(false);
@@ -230,9 +234,15 @@ export default function AdminSidebar({ userRole }: SidebarProps) {

  const roleLabel = userRole === "platform_admin" ? "Platform Admin"
    : userRole === "brand_admin" ? "Brand Admin"
+    : userRole === "multi_brand_admin" ? "Multi-Brand Manager"
    : userRole === "store_employee" ? "Store Employee"
    : null;

+  const isMultiBrandAdmin = userRole === "multi_brand_admin";
+  const showAllBrandsOption = userRole === "platform_admin";
+  const showBrandSelector =
+    brands && (showAllBrandsOption || (brandIds && brandIds.length >= 2));
+
  const isActive = useCallback((href: string) => {
    if (href === "/admin") return pathname === "/admin";
    return pathname.startsWith(href);
@@ -297,7 +307,7 @@ export default function AdminSidebar({ userRole }: SidebarProps) {

  async function handleLogout() {
    document.cookie = "dev_session=;path=/;max-age=0";
-    await authClient.signOut();
+    await supabase.auth.signOut();
    router.push("/login");
    router.refresh();
  }
@@ -394,6 +404,24 @@ export default function AdminSidebar({ userRole }: SidebarProps) {
          </Link>
        </div>

+        {/* Brand selector (multi-brand admins + platform_admin) */}
+        {showBrandSelector && (
+          <div className="px-4 py-3 border-b flex-shrink-0" style={{ borderColor: "rgba(208, 203, 180, 0.2)" }}>
+            <p
+              className="text-[10px] font-semibold uppercase tracking-widest mb-1.5 px-1"
+              style={{ color: "rgba(195, 195, 193, 0.6)" }}
+            >
+              Active Brand
+            </p>
+            <BrandSelector
+              brands={brands!}
+              activeBrandId={activeBrandId ?? null}
+              showAllBrandsOption={showAllBrandsOption}
+              isMultiBrandAdmin={isMultiBrandAdmin}
+            />
+          </div>
+        )}
+
        {/* Nav links with keyboard navigation */}
        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-3 py-4 scrollbar-thin">
          <ul className="space-y-1" role="list">
@@ -0,0 +1,218 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { setActiveBrand } from "@/actions/set-active-brand";
+
+export type BrandSelectorItem = {
+  id: string;
+  name: string;
+  slug: string;
+  logo_url: string | null;
+};
+
+type BrandSelectorProps = {
+  brands: BrandSelectorItem[];
+  /** Currently-active brand id. `null` means "All brands" (platform_admin only). */
+  activeBrandId: string | null;
+  /** When true, shows the "All brands" pseudo-option at the top. */
+  showAllBrandsOption: boolean;
+  /** Whether the user has multi-brand access. Controls the "Multi-brand manager" badge. */
+  isMultiBrandAdmin: boolean;
+};
+
+/**
+ * Brand selector dropdown.
+ *
+ * Renders a compact pill showing the active brand (or "All brands" for
+ * platform_admin) and opens a list of accessible brands on click.
+ *
+ * On select: calls `setActiveBrand` server action then `router.refresh()`
+ * so all server components re-read the new cookie and reload their data.
+ * The URL is NOT changed — the cookie is the source of truth.
+ */
+export default function BrandSelector({
+  brands,
+  activeBrandId,
+  showAllBrandsOption,
+  isMultiBrandAdmin,
+}: BrandSelectorProps) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [pending, setPending] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Close on outside click
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, []);
+
+  // Close on escape
+  useEffect(() => {
+    if (!open) return;
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open]);
+
+  // No brands + no "All brands" option = don't render
+  if (!showAllBrandsOption && brands.length === 0) return null;
+  if (!showAllBrandsOption && brands.length < 2) return null;
+
+  const activeBrand = brands.find((b) => b.id === activeBrandId);
+  const label =
+    showAllBrandsOption && !activeBrand
+      ? "All brands"
+      : activeBrand?.name ?? "Select brand";
+
+  async function selectBrand(brandId: string | null) {
+    setOpen(false);
+    if (brandId === activeBrandId) return;
+    setPending(true);
+    try {
+      const res = await setActiveBrand(brandId);
+      if (res.success) {
+        router.refresh();
+      } else {
+        // Keep UI usable if the server rejected; log for debugging
+        console.error("setActiveBrand failed:", res.error);
+      }
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        disabled={pending}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        className="w-full flex items-center gap-2 px-2.5 py-1.5 rounded-lg border transition-colors text-left disabled:opacity-60"
+        style={{
+          backgroundColor: "rgba(208, 203, 180, 0.1)",
+          borderColor: "rgba(208, 203, 180, 0.25)",
+          color: "var(--admin-sidebar-text)",
+        }}
+      >
+        <span
+          className="flex h-5 w-5 items-center justify-center rounded-md text-[10px] font-semibold flex-shrink-0"
+          style={{ backgroundColor: "var(--admin-accent)", color: "white" }}
+          aria-hidden="true"
+        >
+          {showAllBrandsOption && !activeBrand ? "*" : label.charAt(0).toUpperCase()}
+        </span>
+        <span className="flex-1 min-w-0 text-xs font-medium truncate">
+          {label}
+        </span>
+        {isMultiBrandAdmin && (
+          <span
+            className="text-[9px] font-medium px-1.5 py-0.5 rounded-md flex-shrink-0"
+            style={{
+              backgroundColor: "rgba(202, 117, 67, 0.18)",
+              color: "var(--admin-accent)",
+            }}
+            title="Manages multiple brands"
+          >
+            multi
+          </span>
+        )}
+        <svg
+          className={`w-3 h-3 flex-shrink-0 transition-transform ${open ? "rotate-180" : ""}`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+          aria-hidden="true"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+        </svg>
+      </button>
+
+      {open && (
+        <div
+          role="listbox"
+          className="absolute top-full left-0 right-0 mt-1.5 rounded-xl border shadow-2xl z-50 overflow-hidden"
+          style={{
+            backgroundColor: "var(--admin-sidebar-bg)",
+            borderColor: "rgba(208, 203, 180, 0.25)",
+          }}
+        >
+          {showAllBrandsOption && (
+            <button
+              type="button"
+              role="option"
+              aria-selected={!activeBrand}
+              onClick={() => selectBrand(null)}
+              className="w-full flex items-center gap-2 px-3 py-2 text-xs text-left transition-colors hover:bg-white/5"
+              style={{
+                color: !activeBrand ? "var(--admin-accent)" : "var(--admin-sidebar-text)",
+                backgroundColor: !activeBrand ? "rgba(202, 117, 67, 0.10)" : "transparent",
+              }}
+            >
+              <span
+                className="flex h-5 w-5 items-center justify-center rounded-md text-[10px] font-semibold flex-shrink-0"
+                style={{ backgroundColor: "var(--admin-accent)", color: "white" }}
+                aria-hidden="true"
+              >
+                *
+              </span>
+              <span className="flex-1">All brands</span>
+              {!activeBrand && (
+                <span
+                  className="w-1.5 h-1.5 rounded-full flex-shrink-0"
+                  style={{ backgroundColor: "var(--admin-accent)" }}
+                  aria-hidden="true"
+                />
+              )}
+            </button>
+          )}
+
+          {brands.map((b) => {
+            const isActive = b.id === activeBrandId;
+            return (
+              <button
+                key={b.id}
+                type="button"
+                role="option"
+                aria-selected={isActive}
+                onClick={() => selectBrand(b.id)}
+                className="w-full flex items-center gap-2 px-3 py-2 text-xs text-left transition-colors hover:bg-white/5"
+                style={{
+                  color: isActive ? "var(--admin-accent)" : "var(--admin-sidebar-text)",
+                  backgroundColor: isActive ? "rgba(202, 117, 67, 0.10)" : "transparent",
+                }}
+              >
+                <span
+                  className="flex h-5 w-5 items-center justify-center rounded-md text-[10px] font-semibold flex-shrink-0"
+                  style={{ backgroundColor: "var(--admin-accent)", color: "white" }}
+                  aria-hidden="true"
+                >
+                  {b.name.charAt(0).toUpperCase()}
+                </span>
+                <span className="flex-1 truncate">{b.name}</span>
+                {isActive && (
+                  <span
+                    className="w-1.5 h-1.5 rounded-full flex-shrink-0"
+                    style={{ backgroundColor: "var(--admin-accent)" }}
+                    aria-hidden="true"
+                  />
+                )}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,298 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import { updateLocation } from "@/actions/locations";
+import GlassModal from "@/components/admin/GlassModal";
+
+export type LocationForEdit = {
+  id: string;
+  brand_id: string;
+  name: string;
+  address: string | null;
+  city: string | null;
+  state: string | null;
+  zip: string | null;
+  phone: string | null;
+  contact_name: string | null;
+  contact_email: string | null;
+  notes: string | null;
+  active: boolean;
+};
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  location: LocationForEdit | null;
+  brandId: string;
+  onSuccess?: () => void;
+};
+
+export default function EditLocationModal({ isOpen, onClose, location, brandId, onSuccess }: Props) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [name, setName] = useState("");
+  const [address, setAddress] = useState("");
+  const [city, setCity] = useState("");
+  const [stateVal, setStateVal] = useState("");
+  const [zip, setZip] = useState("");
+  const [phone, setPhone] = useState("");
+  const [contactName, setContactName] = useState("");
+  const [contactEmail, setContactEmail] = useState("");
+  const [notes, setNotes] = useState("");
+
+  useEffect(() => {
+    /* eslint-disable react-hooks/set-state-in-effect */
+    if (location && isOpen) {
+      setName(location.name ?? "");
+      setAddress(location.address ?? "");
+      setCity(location.city ?? "");
+      setStateVal(location.state ?? "");
+      setZip(location.zip ?? "");
+      setPhone(location.phone ?? "");
+      setContactName(location.contact_name ?? "");
+      setContactEmail(location.contact_email ?? "");
+      setNotes(location.notes ?? "");
+      setError(null);
+    }
+    /* eslint-enable react-hooks/set-state-in-effect */
+  }, [location, isOpen]);
+
+  const handleClose = useCallback(() => {
+    if (loading) return;
+    setError(null);
+    onClose();
+  }, [loading, onClose]);
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      if (!location) return;
+      setError(null);
+      if (!name.trim()) {
+        setError("Venue name is required.");
+        return;
+      }
+      setLoading(true);
+      try {
+        const result = await updateLocation(location.id, brandId, {
+          name: name.trim(),
+          address: address.trim() || null,
+          city: city.trim() || null,
+          state: stateVal.trim().toUpperCase() || null,
+          zip: zip.trim() || null,
+          phone: phone.trim() || null,
+          contact_name: contactName.trim() || null,
+          contact_email: contactEmail.trim() || null,
+          notes: notes.trim() || null,
+          active: location.active,
+        });
+        if (result.success) {
+          onSuccess?.();
+          onClose();
+        } else {
+          setError(result.error ?? "Failed to update location");
+        }
+      } catch {
+        setError("Network error. Please try again.");
+      } finally {
+        setLoading(false);
+      }
+    },
+    [location, brandId, name, address, city, stateVal, zip, phone, contactName, contactEmail, notes, onSuccess, onClose]
+  );
+
+  const inputStyle = {
+    background: "rgba(0, 0, 0, 0.02)",
+    border: "1px solid rgba(0, 0, 0, 0.06)",
+    outline: "none",
+  };
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    e.target.style.background = "rgba(16, 185, 129, 0.04)";
+    e.target.style.border = "1px solid rgba(16, 185, 129, 0.5)";
+    e.target.style.boxShadow = "0 0 0 4px rgba(16, 185, 129, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04)";
+  };
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    e.target.style.background = "rgba(0, 0, 0, 0.02)";
+    e.target.style.border = "1px solid rgba(0, 0, 0, 0.06)";
+    e.target.style.boxShadow = "none";
+  };
+
+  if (!isOpen || !location) return null;
+
+  return (
+    <GlassModal
+      title="Edit Venue"
+      subtitle="Changes apply to every stop currently linked to this venue."
+      onClose={handleClose}
+    >
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {error && (
+          <div
+            className="rounded-xl px-4 py-3 text-sm text-red-600 backdrop-blur-sm"
+            style={{ background: "rgba(239, 68, 68, 0.1)", border: "1px solid rgba(239, 68, 68, 0.2)" }}
+          >
+            {error}
+          </div>
+        )}
+
+        <div className="space-y-1.5">
+          <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Venue name *</label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 transition-all"
+            style={inputStyle}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            required
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Street address</label>
+          <input
+            type="text"
+            value={address}
+            onChange={(e) => setAddress(e.target.value)}
+            className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 transition-all"
+            style={inputStyle}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+          />
+        </div>
+
+        <div className="grid grid-cols-6 gap-4">
+          <div className="col-span-3 space-y-1.5">
+            <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">City</label>
+            <input
+              type="text"
+              value={city}
+              onChange={(e) => setCity(e.target.value)}
+              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 transition-all"
+              style={inputStyle}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+            />
+          </div>
+          <div className="col-span-1 space-y-1.5">
+            <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">State</label>
+            <input
+              type="text"
+              value={stateVal}
+              onChange={(e) => setStateVal(e.target.value.toUpperCase())}
+              maxLength={2}
+              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 transition-all"
+              style={inputStyle}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+            />
+          </div>
+          <div className="col-span-2 space-y-1.5">
+            <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">ZIP</label>
+            <input
+              type="text"
+              value={zip}
+              onChange={(e) => setZip(e.target.value)}
+              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 transition-all"
+              style={inputStyle}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-1.5">
+            <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Phone</label>
+            <input
+              type="tel"
+              value={phone}
+              onChange={(e) => setPhone(e.target.value)}
+              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 transition-all"
+              style={inputStyle}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Contact name</label>
+            <input
+              type="text"
+              value={contactName}
+              onChange={(e) => setContactName(e.target.value)}
+              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 transition-all"
+              style={inputStyle}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+            />
+          </div>
+        </div>
+
+        <div className="space-y-1.5">
+          <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Contact email</label>
+          <input
+            type="email"
+            value={contactEmail}
+            onChange={(e) => setContactEmail(e.target.value)}
+            className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 transition-all"
+            style={inputStyle}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <label className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Notes</label>
+          <textarea
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+            rows={2}
+            className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 transition-all resize-none"
+            style={inputStyle}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+          />
+        </div>
+
+        <div className="flex items-center justify-end gap-3 pt-4" style={{ borderTop: "1px solid rgba(0, 0, 0, 0.04)" }}>
+          <button
+            type="button"
+            onClick={handleClose}
+            disabled={loading}
+            className="rounded-xl px-5 py-2.5 text-sm font-medium text-stone-500 hover:text-stone-700 transition-all hover:bg-stone-100 disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            disabled={loading}
+            className="rounded-xl px-6 py-2.5 text-sm font-semibold text-white transition-all"
+            style={{
+              background: loading
+                ? "rgba(16, 185, 129, 0.4)"
+                : "linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%)",
+              boxShadow: loading
+                ? "none"
+                : "0 4px 12px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255,255,255,0.2)",
+              opacity: loading ? 0.7 : 1,
+            }}
+          >
+            {loading ? (
+              <span className="flex items-center gap-2">
+                <svg className="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                </svg>
+                Saving…
+              </span>
+            ) : (
+              "Save Changes"
+            )}
+          </button>
+        </div>
+      </form>
+    </GlassModal>
+  );
+}
@@ -0,0 +1,84 @@
+"use client";
+
+import { useEffect } from "react";
+
+type Props = {
+  title: string;
+  titleIcon?: React.ReactNode;
+  subtitle?: string;
+  onClose: () => void;
+  children: React.ReactNode;
+  maxWidth?: string;
+  variant?: "default" | "elegant";
+};
+
+export default function ElegantModal({ title, titleIcon, subtitle, onClose, children, maxWidth = "max-w-lg", variant = "default" }: Props) {
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+    return () => { document.body.style.overflow = ""; };
+  }, []);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [onClose]);
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) onClose();
+  };
+
+  const isElegant = variant === "elegant";
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 md:p-8"
+      onClick={handleBackdropClick}
+      style={{ backgroundColor: "rgba(60, 56, 37, 0.5)" }}
+    >
+      <div
+        className={`relative w-full ${maxWidth} max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-3rem)] md:max-h-[calc(100vh-4rem)] rounded-2xl bg-white shadow-[0_25px_50px_-12px_rgba(0,0,0,0.15)] flex flex-col ${isElegant ? "border border-stone-200/60" : ""}`}
+      >
+        <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-amber-600 to-amber-500 rounded-t-2xl" />
+
+        <div className={`flex items-center justify-between px-6 sm:px-8 py-5 shrink-0 ${isElegant ? "border-b border-stone-100" : ""}`}>
+          <div className="flex items-center gap-3 min-w-0">
+            {titleIcon && (
+              <div className="flex h-8 w-8 sm:h-9 sm:w-9 items-center justify-center rounded-lg shrink-0 bg-amber-50">
+                {titleIcon}
+              </div>
+            )}
+            <div className="min-w-0">
+              {isElegant ? (
+                <h2 className="text-sm font-normal tracking-wide text-stone-500 uppercase" style={{ fontFamily: "Georgia, serif" }}>
+                  {title}
+                </h2>
+              ) : (
+                <h2 className="text-lg sm:text-xl font-semibold text-stone-800 truncate" style={{ letterSpacing: "-0.02em" }}>
+                  {title}
+                </h2>
+              )}
+              {subtitle && (
+                <p className={`mt-0.5 text-sm text-stone-400 hidden sm:block ${isElegant ? "font-normal" : ""}`}>{subtitle}</p>
+              )}
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="flex h-8 w-8 sm:h-9 sm:w-9 items-center justify-center rounded-full transition-all duration-150 shrink-0 ml-2 hover:bg-stone-100 text-stone-500"
+          >
+            <svg className="h-4 w-4 sm:h-5 sm:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="relative px-6 sm:px-8 py-6 overflow-y-auto flex-1">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -9,9 +9,22 @@ type Props = {
  onClose: () => void;
  children: React.ReactNode;
  maxWidth?: string;
+  /** Compact mode: tighter padding, smaller title, no accent bar — for dense forms. */
+  compact?: boolean;
+  /** Optional eyebrow text rendered above the title in compact mode. */
+  eyebrow?: string;
 };

-export default function GlassModal({ title, titleIcon, subtitle, onClose, children, maxWidth = "max-w-lg" }: Props) {
+export default function GlassModal({
+  title,
+  titleIcon,
+  subtitle,
+  onClose,
+  children,
+  maxWidth = "max-w-lg",
+  compact = false,
+  eyebrow,
+}: Props) {
  // Lock body scroll
  useEffect(() => {
    document.body.style.overflow = "hidden";
@@ -33,24 +46,35 @@ export default function GlassModal({ title, titleIcon, subtitle, onClose, childr

  return (
    <div
-      className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 md:p-8"
+      className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 md:p-6"
      onClick={handleBackdropClick}
-      style={{ backgroundColor: "rgba(60, 56, 37, 0.5)" }}
+      style={{
+        backgroundColor: "rgba(60, 56, 37, 0.45)",
+        backdropFilter: "blur(2px)",
+        WebkitBackdropFilter: "blur(2px)",
+      }}
    >
-      {/* Modal card - solid white with shadow for high contrast */}
      <div
-        className={`relative w-full ${maxWidth} max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-3rem)] md:max-h-[calc(100vh-4rem)] rounded-2xl bg-white shadow-[0_25px_50px_-12px_rgba(0,0,0,0.15)] flex flex-col`}
+        className={`relative w-full ${maxWidth} ${
+          compact
+            ? "max-h-[min(640px,calc(100vh-2rem))]"
+            : "max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-3rem)] md:max-h-[calc(100vh-4rem)]"
+        } rounded-2xl bg-white shadow-[0_25px_50px_-12px_rgba(0,0,0,0.18),0_8px_16px_-4px_rgba(0,0,0,0.05)] flex flex-col overflow-hidden`}
      >
-        {/* Subtle top border accent */}
-        <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-[var(--admin-accent)] to-[var(--admin-accent-hover)] rounded-t-2xl" />
+        {/* Accent bar — only for non-compact (compact forms have their own internal accent) */}
+        {!compact && (
+          <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-[var(--admin-accent)] to-[var(--admin-accent-hover)] rounded-t-2xl" />
+        )}

        {/* Header */}
        <div
-          className="flex items-center justify-between px-4 sm:px-6 md:px-8 py-4 sm:py-6 shrink-0"
+          className={`flex items-center justify-between shrink-0 ${
+            compact ? "px-5 pt-4 pb-3" : "px-4 sm:px-6 md:px-8 py-4 sm:py-6"
+          }`}
          style={{ borderBottom: "1px solid var(--admin-border-light)" }}
        >
          <div className="flex items-center gap-2 sm:gap-3 min-w-0">
-            {titleIcon && (
+            {titleIcon && !compact && (
              <div
                className="flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-xl shrink-0"
                style={{ backgroundColor: "var(--admin-accent-light)" }}
@@ -59,21 +83,39 @@ export default function GlassModal({ title, titleIcon, subtitle, onClose, childr
              </div>
            )}
            <div className="min-w-0">
+              {compact && eyebrow && (
+                <p className="ha-eyebrow mb-0.5 truncate">{eyebrow}</p>
+              )}
              <h2
-                className="text-lg sm:text-xl font-semibold text-[var(--admin-text-primary)] truncate" 
-                style={{ letterSpacing: "-0.02em" }}
+                className={`${
+                  compact
+                    ? "ha-display text-lg truncate"
+                    : "text-lg sm:text-xl font-semibold truncate"
+                } text-[var(--admin-text-primary)]`}
+                style={compact ? undefined : { letterSpacing: "-0.02em" }}
              >
                {title}
              </h2>
-              {subtitle && (
-                <p className="mt-0.5 text-xs sm:text-sm text-[var(--admin-text-muted)] hidden sm:block">{subtitle}</p>
+              {subtitle && !compact && (
+                <p className="mt-0.5 text-xs sm:text-sm text-[var(--admin-text-muted)] hidden sm:block">
+                  {subtitle}
+                </p>
              )}
            </div>
          </div>
          <button
            onClick={onClose}
-            className="flex h-8 w-8 sm:h-9 sm:w-9 items-center justify-center rounded-full transition-all duration-150 shrink-0 ml-2"
-            style={{ backgroundColor: "var(--admin-bg-subtle)", color: "var(--admin-text-muted)" }}
+            className={`flex shrink-0 items-center justify-center rounded-full transition-all duration-150 ml-2 ${
+              compact
+                ? "h-7 w-7 text-[var(--admin-text-muted)] hover:bg-[var(--admin-bg-subtle)] hover:text-[var(--admin-text-primary)]"
+                : "h-8 w-8 sm:h-9 sm:w-9"
+            }`}
+            style={
+              compact
+                ? undefined
+                : { backgroundColor: "var(--admin-bg-subtle)", color: "var(--admin-text-muted)" }
+            }
+            aria-label="Close modal"
          >
            <svg className="h-4 w-4 sm:h-5 sm:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -81,8 +123,12 @@ export default function GlassModal({ title, titleIcon, subtitle, onClose, childr
          </button>
        </div>

-        {/* Content - scrollable */}
-        <div className="relative px-4 sm:px-6 md:px-8 py-4 sm:py-6 md:py-8 overflow-y-auto flex-1">
+        {/* Content */}
+        <div
+          className={`relative overflow-y-auto flex-1 ${
+            compact ? "px-5 pb-5 pt-3" : "px-4 sm:px-6 md:px-8 py-4 sm:py-6 md:py-8"
+          }`}
+        >
          {children}
        </div>
      </div>
@@ -0,0 +1,387 @@
+"use client";
+/* eslint-disable react-hooks/set-state-in-effect */
+
+import { useState, useTransition, useEffect, useMemo } from "react";
+import { useRouter } from "next/navigation";
+import { deleteLocation } from "@/actions/locations";
+import AddLocationModal from "@/components/admin/AddLocationModal";
+import EditLocationModal, { type LocationForEdit } from "@/components/admin/EditLocationModal";
+import {
+  AdminSearchInput,
+  AdminFilterTabs,
+  AdminButton,
+  AdminIconButton,
+  useToast,
+  Skeleton,
+} from "@/components/admin/design-system";
+
+export type AdminLocation = {
+  id: string;
+  brand_id: string;
+  name: string;
+  address: string | null;
+  city: string | null;
+  state: string | null;
+  zip: string | null;
+  phone: string | null;
+  contact_name: string | null;
+  contact_email: string | null;
+  notes: string | null;
+  active: boolean;
+  deleted_at: string | null;
+  created_at: string;
+  updated_at: string;
+  slug: string | null;
+  stop_count: number;
+};
+
+type Props = {
+  locations: AdminLocation[];
+  brandId: string;
+};
+
+type StatusFilter = "all" | "active" | "inactive";
+
+export default function LocationsTab({ locations, brandId }: Props) {
+  const router = useRouter();
+  const { success: showSuccess, error: showError } = useToast();
+  const [, startTransition] = useTransition();
+
+  const [search, setSearch] = useState("");
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
+  const [page, setPage] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
+  const [showAdd, setShowAdd] = useState(false);
+  const [editing, setEditing] = useState<LocationForEdit | null>(null);
+  const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);
+
+  const PAGE_SIZE = 50;
+
+  useEffect(() => {
+    setIsLoading(true);
+    const t = setTimeout(() => setIsLoading(false), 250);
+    return () => clearTimeout(t);
+  }, [page, statusFilter, search]);
+
+  const counts = useMemo(
+    () => ({
+      all: locations.length,
+      active: locations.filter((l) => l.active).length,
+      inactive: locations.filter((l) => !l.active).length,
+    }),
+    [locations]
+  );
+
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    return locations.filter((l) => {
+      const matchesSearch =
+        !q ||
+        l.name.toLowerCase().includes(q) ||
+        (l.address ?? "").toLowerCase().includes(q) ||
+        (l.city ?? "").toLowerCase().includes(q) ||
+        (l.contact_name ?? "").toLowerCase().includes(q);
+      const matchesStatus =
+        statusFilter === "all" ||
+        (statusFilter === "active" && l.active) ||
+        (statusFilter === "inactive" && !l.active);
+      return matchesSearch && matchesStatus;
+    });
+  }, [locations, search, statusFilter]);
+
+  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+  const paginated = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
+
+  const tabs = [
+    { value: "all", label: "All", count: counts.all },
+    { value: "active", label: "Active", count: counts.active },
+    { value: "inactive", label: "Inactive", count: counts.inactive },
+  ];
+
+  function handleAdded() {
+    setShowAdd(false);
+    showSuccess("Venue created");
+    startTransition(() => router.refresh());
+  }
+
+  function handleEdited() {
+    setEditing(null);
+    showSuccess("Venue updated");
+    startTransition(() => router.refresh());
+  }
+
+  async function handleDelete(loc: AdminLocation) {
+    if (!confirm(`Delete venue "${loc.name}"? This cannot be undone.`)) return;
+    setPendingDeleteId(loc.id);
+    setDeleteError(null);
+    const res = await deleteLocation(loc.id, brandId);
+    setPendingDeleteId(null);
+    if (res.success) {
+      showSuccess("Venue deleted");
+      startTransition(() => router.refresh());
+    } else {
+      setDeleteError(res.error ?? "Delete failed");
+      showError("Delete failed", res.error ?? "Unknown error");
+    }
+  }
+
+  return (
+    <>
+      {/* Filter bar */}
+      <div className="border-b border-[var(--admin-border)] px-5 py-3 flex gap-4 flex-wrap items-center">
+        <AdminSearchInput
+          placeholder="Search venues by name, city, or contact…"
+          value={search}
+          onChange={(e) => {
+            setSearch(e.target.value);
+            setPage(0);
+          }}
+          onClear={() => {
+            setSearch("");
+            setPage(0);
+          }}
+          showClear
+          className="flex-1 min-w-48 max-w-72"
+        />
+        <AdminFilterTabs
+          activeTab={statusFilter}
+          onTabChange={(value) => {
+            setStatusFilter(value as StatusFilter);
+            setPage(0);
+          }}
+          tabs={tabs}
+          size="sm"
+          showCounts
+        />
+        <span className="text-xs text-[var(--admin-text-muted)] ml-auto">
+          {filtered.length} venue{filtered.length !== 1 ? "s" : ""}
+        </span>
+        {totalPages > 1 && (
+          <div className="flex items-center gap-1">
+            <AdminIconButton
+              variant="secondary"
+              size="sm"
+              label="Previous page"
+              onClick={() => setPage((p) => Math.max(0, p - 1))}
+              disabled={page === 0 || isLoading}
+              className="!rounded-lg border border-[var(--admin-border)]"
+            >
+              <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+              </svg>
+            </AdminIconButton>
+            <span className="text-xs text-[var(--admin-text-muted)] px-1">
+              {page + 1}/{totalPages}
+            </span>
+            <AdminIconButton
+              variant="secondary"
+              size="sm"
+              label="Next page"
+              onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
+              disabled={page >= totalPages - 1 || isLoading}
+              className="!rounded-lg border border-[var(--admin-border)]"
+            >
+              <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+              </svg>
+            </AdminIconButton>
+          </div>
+        )}
+        <AdminButton
+          variant="primary"
+          size="sm"
+          onClick={() => setShowAdd(true)}
+          icon={
+            <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+            </svg>
+          }
+        >
+          Add Venue
+        </AdminButton>
+      </div>
+
+      {/* Delete error */}
+      {deleteError && (
+        <div className="mx-5 my-3 rounded-lg border border-[var(--admin-danger)]/30 bg-[var(--admin-danger)]/10 px-4 py-3 text-sm text-[var(--admin-danger)]">
+          {deleteError}{" "}
+          <button onClick={() => setDeleteError(null)} className="underline hover:no-underline">
+            Dismiss
+          </button>
+        </div>
+      )}
+
+      {/* Table */}
+      <table className="w-full text-left text-sm">
+        <thead className="bg-[var(--admin-bg-subtle)] text-[var(--admin-text-muted)]">
+          <tr>
+            <th className="px-5 py-4 font-semibold">Venue</th>
+            <th className="px-5 py-4 font-semibold">Address</th>
+            <th className="px-5 py-4 font-semibold">Contact</th>
+            <th className="px-5 py-4 font-semibold text-center">Stops</th>
+            <th className="px-5 py-4 font-semibold">Status</th>
+            <th className="px-5 py-4 font-semibold" />
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-[var(--admin-border)]">
+          {isLoading ? (
+            Array.from({ length: 6 }).map((_, i) => (
+              <tr key={i}>
+                <td className="px-5 py-4"><Skeleton variant="text" className="w-32 h-4" /></td>
+                <td className="px-5 py-4"><Skeleton variant="text" className="w-48 h-4" /></td>
+                <td className="px-5 py-4"><Skeleton variant="text" className="w-32 h-4" /></td>
+                <td className="px-5 py-4 text-center"><Skeleton variant="rect" className="w-8 h-5 mx-auto rounded-full" /></td>
+                <td className="px-5 py-4"><Skeleton variant="rect" className="w-16 h-6 rounded-full" /></td>
+                <td className="px-5 py-4"><Skeleton variant="rect" className="w-12 h-6" /></td>
+              </tr>
+            ))
+          ) : filtered.length === 0 ? (
+            <tr>
+              <td colSpan={6} className="px-5 py-12 text-center">
+                <div className="flex flex-col items-center gap-2 text-[var(--admin-text-muted)]">
+                  <svg className="h-10 w-10 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                  <p className="text-sm">
+                    {search || statusFilter !== "all"
+                      ? "No venues match your filters."
+                      : "No venues yet. Add your first venue to get started."}
+                  </p>
+                </div>
+              </td>
+            </tr>
+          ) : (
+            paginated.map((loc) => (
+              <tr key={loc.id} className="hover:bg-[var(--admin-bg-subtle)] transition-colors">
+                <td className="px-5 py-4">
+                  <div className="font-semibold text-[var(--admin-text-primary)]">{loc.name}</div>
+                  {(loc.city || loc.state) && (
+                    <div className="text-xs text-[var(--admin-text-muted)]">
+                      {[loc.city, loc.state].filter(Boolean).join(", ")}
+                    </div>
+                  )}
+                </td>
+                <td className="px-5 py-4">
+                  {loc.address ? (
+                    <div>
+                      <div className="text-[var(--admin-text-secondary)]">{loc.address}</div>
+                      {loc.zip && (
+                        <div className="text-xs text-[var(--admin-text-muted)]">{loc.zip}</div>
+                      )}
+                    </div>
+                  ) : (
+                    <span className="text-[var(--admin-text-muted)]">—</span>
+                  )}
+                </td>
+                <td className="px-5 py-4">
+                  {loc.contact_name || loc.phone || loc.contact_email ? (
+                    <div className="space-y-0.5">
+                      {loc.contact_name && (
+                        <div className="text-[var(--admin-text-secondary)]">{loc.contact_name}</div>
+                      )}
+                      {loc.phone && (
+                        <div className="text-xs text-[var(--admin-text-muted)]">{loc.phone}</div>
+                      )}
+                      {loc.contact_email && (
+                        <div className="text-xs text-[var(--admin-text-muted)] truncate max-w-[200px]">
+                          {loc.contact_email}
+                        </div>
+                      )}
+                    </div>
+                  ) : (
+                    <span className="text-[var(--admin-text-muted)]">—</span>
+                  )}
+                </td>
+                <td className="px-5 py-4 text-center">
+                  {loc.stop_count > 0 ? (
+                    <span
+                      className="inline-flex items-center justify-center min-w-[28px] px-2 py-0.5 rounded-full text-xs font-semibold"
+                      style={{
+                        background: "rgba(16, 185, 129, 0.12)",
+                        color: "#047857",
+                      }}
+                    >
+                      {loc.stop_count}
+                    </span>
+                  ) : (
+                    <span className="text-[var(--admin-text-muted)] text-xs">0</span>
+                  )}
+                </td>
+                <td className="px-5 py-4">
+                  {loc.active ? (
+                    <span
+                      className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold"
+                      style={{ background: "rgba(16, 185, 129, 0.12)", color: "#047857" }}
+                    >
+                      <span className="h-1.5 w-1.5 rounded-full" style={{ background: "#10b981" }} />
+                      Active
+                    </span>
+                  ) : (
+                    <span
+                      className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold"
+                      style={{ background: "rgba(120, 113, 108, 0.12)", color: "#57534e" }}
+                    >
+                      <span className="h-1.5 w-1.5 rounded-full" style={{ background: "#a8a29e" }} />
+                      Inactive
+                    </span>
+                  )}
+                </td>
+                <td className="px-5 py-4 text-right">
+                  <div className="flex justify-end gap-1">
+                    <button
+                      onClick={() => setEditing(loc as LocationForEdit)}
+                      className="rounded-lg p-1.5 text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] hover:bg-[var(--admin-bg-subtle)] transition-colors"
+                      title="Edit venue"
+                    >
+                      <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                      </svg>
+                    </button>
+                    <button
+                      onClick={() => handleDelete(loc)}
+                      disabled={pendingDeleteId === loc.id}
+                      className="rounded-lg p-1.5 text-[var(--admin-text-muted)] hover:text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50"
+                      title="Delete venue"
+                    >
+                      {pendingDeleteId === loc.id ? (
+                        <svg className="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                        </svg>
+                      ) : (
+                        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M1 7h22M9 7V4a2 2 0 012-2h2a2 2 0 012 2v3" />
+                        </svg>
+                      )}
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+
+      {showAdd && (
+        <AddLocationModal
+          isOpen={showAdd}
+          onClose={() => setShowAdd(false)}
+          brandId={brandId}
+          onSuccess={handleAdded}
+        />
+      )}
+
+      {editing && (
+        <EditLocationModal
+          isOpen={!!editing}
+          onClose={() => setEditing(null)}
+          location={editing}
+          brandId={brandId}
+          onSuccess={handleEdited}
+        />
+      )}
+    </>
+  );
+}
@@ -0,0 +1,718 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import Image from "next/image";
+import { createPortal } from "react-dom";
+
+export type ProductFormModalProps = {
+  open: boolean;
+  mode: "add" | "edit";
+  onClose: () => void;
+  onSubmit: (values: ProductFormValues) => Promise<{ success: boolean; error?: string }>;
+  /** Defaults / initial values (edit mode passes the current product) */
+  initial?: Partial<ProductFormValues>;
+  /** List of selectable brands (only shown to platform admins) */
+  brands?: { id: string; name: string }[];
+  /** When true the brand picker is hidden and the admin's brand is used */
+  lockBrand?: boolean;
+  /** Hard-locked brand id (for brand_admin / store_employee) */
+  lockedBrandId?: string;
+  /** Pre-uploaded image URL (edit mode) */
+  initialImageUrl?: string | null;
+  /** Server action: upload a file and return the public URL */
+  onUploadImage: (file: File) => Promise<{ success: boolean; imageUrl?: string; error?: string }>;
+};
+
+export type ProductFormValues = {
+  name: string;
+  description: string;
+  price: string;
+  type: "pickup" | "wholesale" | "subscription";
+  brand_id: string;
+  active: boolean;
+  is_taxable: boolean;
+  image_url: string | null;
+  available_from?: string | null;
+  available_until?: string | null;
+};
+
+const TYPE_OPTIONS: Array<{
+  value: ProductFormValues["type"];
+  label: string;
+  italic: string;
+  icon: React.ReactNode;
+}> = [
+  {
+    value: "pickup",
+    label: "Pickup",
+    italic: "Farm & stops",
+    icon: (
+      <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round">
+        <path d="M3 9l1.5-4h15L21 9" />
+        <path d="M3 9v11a1 1 0 001 1h16a1 1 0 001-1V9" />
+        <path d="M3 9h18" />
+        <path d="M9 14h6" />
+      </svg>
+    ),
+  },
+  {
+    value: "wholesale",
+    label: "Wholesale",
+    italic: "B2B portal",
+    icon: (
+      <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round">
+        <path d="M3 7h18l-2 12H5L3 7z" />
+        <path d="M8 7V5a4 4 0 018 0v2" />
+      </svg>
+    ),
+  },
+  {
+    value: "subscription",
+    label: "Subscription",
+    italic: "Recurring",
+    icon: (
+      <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round">
+        <path d="M21 12a9 9 0 11-3-6.7" />
+        <path d="M21 4v5h-5" />
+      </svg>
+    ),
+  },
+];
+
+export default function ProductFormModal({
+  open,
+  mode,
+  onClose,
+  onSubmit,
+  initial,
+  brands = [],
+  lockBrand = false,
+  lockedBrandId = "",
+  initialImageUrl = null,
+  onUploadImage,
+}: ProductFormModalProps) {
+  // Form state
+  const [name, setName] = useState(initial?.name ?? "");
+  const [description, setDescription] = useState(initial?.description ?? "");
+  const [price, setPrice] = useState(initial?.price ?? "");
+  const [type, setType] = useState<ProductFormValues["type"]>(initial?.type ?? "pickup");
+  const [brandId, setBrandId] = useState(
+    initial?.brand_id ?? lockedBrandId ?? brands[0]?.id ?? ""
+  );
+  const [active, setActive] = useState(initial?.active ?? true);
+  const [isTaxable, setIsTaxable] = useState(initial?.is_taxable ?? true);
+  const [availableFrom, setAvailableFrom] = useState(initial?.available_from ? initial.available_from.split('T')[0] : "");
+  const [availableUntil, setAvailableUntil] = useState(initial?.available_until ? initial.available_until.split('T')[0] : "");
+
+  // Image state
+  const [imagePreview, setImagePreview] = useState<string | null>(initialImageUrl);
+  const [imageUrl, setImageUrl] = useState<string | null>(initialImageUrl);
+  const [uploading, setUploading] = useState(false);
+  const [uploadError, setUploadError] = useState<string | null>(null);
+  const [isDrag, setIsDrag] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Submit state
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Reset state when opening with new initial values
+  useEffect(() => {
+    if (!open) return;
+    setName(initial?.name ?? "");
+    setDescription(initial?.description ?? "");
+    setPrice(initial?.price ?? "");
+    setType((initial?.type as ProductFormValues["type"]) ?? "pickup");
+    setBrandId(initial?.brand_id ?? lockedBrandId ?? brands[0]?.id ?? "");
+    setActive(initial?.active ?? true);
+    setIsTaxable(initial?.is_taxable ?? true);
+    setAvailableFrom(initial?.available_from ? initial.available_from.split('T')[0] : "");
+    setAvailableUntil(initial?.available_until ? initial.available_until.split('T')[0] : "");
+    setImagePreview(initialImageUrl);
+    setImageUrl(initialImageUrl);
+    setUploading(false);
+    setUploadError(null);
+    setError(null);
+    setSaving(false);
+    setIsDrag(false);
+  }, [open, initial, initialImageUrl, lockedBrandId, brands]);
+
+  // Body scroll lock + escape key
+  useEffect(() => {
+    if (!open) return;
+    const original = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      document.body.style.overflow = original;
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open, onClose]);
+
+  const handleFile = useCallback(
+    async (file: File) => {
+      const validTypes = ["image/png", "image/jpeg", "image/webp"];
+      if (!validTypes.includes(file.type)) {
+        setUploadError("PNG, JPEG, or WebP only.");
+        return;
+      }
+      if (file.size > 5 * 1024 * 1024) {
+        setUploadError("File must be under 5MB.");
+        return;
+      }
+      setUploadError(null);
+      setUploading(true);
+
+      // Local preview first
+      const localUrl = URL.createObjectURL(file);
+      setImagePreview(localUrl);
+
+      const result = await onUploadImage(file);
+      setUploading(false);
+
+      if (result.success && result.imageUrl) {
+        setImageUrl(result.imageUrl);
+        setImagePreview(result.imageUrl);
+        URL.revokeObjectURL(localUrl);
+      } else {
+        setUploadError(result.error ?? "Upload failed.");
+        setImagePreview(imageUrl); // revert
+      }
+    },
+    [onUploadImage, imageUrl]
+  );
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+
+    if (!name.trim()) {
+      setError("Product name is required.");
+      return;
+    }
+    if (!price || isNaN(parseFloat(price)) || parseFloat(price) < 0) {
+      setError("Valid price is required.");
+      return;
+    }
+    if (!lockBrand && !brandId) {
+      setError("Please select a brand.");
+      return;
+    }
+
+    setSaving(true);
+    const res = await onSubmit({
+      name: name.trim(),
+      description: description.trim(),
+      price,
+      type,
+      brand_id: lockBrand ? lockedBrandId : brandId,
+      active,
+      is_taxable: isTaxable,
+      image_url: imageUrl,
+      available_from: availableFrom ? new Date(availableFrom).toISOString() : null,
+      available_until: availableUntil ? new Date(availableUntil).toISOString() : null,
+    });
+    setSaving(false);
+
+    if (!res.success) {
+      setError(res.error ?? "Something went wrong.");
+      return;
+    }
+    onClose();
+  }
+
+  if (!mounted || !open) return null;
+
+  const showBrandPicker = !lockBrand;
+  const lockedBrandName = brands.find((b) => b.id === lockedBrandId)?.name ?? lockedBrandId;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[80] flex items-center justify-center p-3 sm:p-6 atelier-backdrop"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+      style={{
+        backgroundColor: "rgba(28, 25, 23, 0.55)",
+        backdropFilter: "blur(8px)",
+        WebkitBackdropFilter: "blur(8px)",
+      }}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={mode === "add" ? "Add product" : "Edit product"}
+        className="atelier-enter atelier-canvas relative w-full max-w-5xl max-h-[calc(100vh-1.5rem)] sm:max-h-[calc(100vh-3rem)] rounded-2xl shadow-[0_30px_80px_-20px_rgba(28,25,23,0.45)] flex flex-col overflow-hidden border border-stone-200/60"
+      >
+        {/* grain overlay */}
+        <div className="atelier-grain" aria-hidden />
+
+        {/* HEADER */}
+        <div className="relative shrink-0 px-6 sm:px-10 pt-6 sm:pt-8 pb-5 sm:pb-6">
+          <div className="flex items-start justify-between gap-4">
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-2.5 mb-3">
+                <span className="atelier-section-num">
+                  {mode === "add" ? "Nouveau" : "Mise à jour"} · MMXXVI
+                </span>
+              </div>
+              <h2 className="atelier-title text-3xl sm:text-4xl md:text-5xl">
+                {mode === "add" ? (
+                  <>
+                    Add a <span className="atelier-italic">product</span>
+                  </>
+                ) : (
+                  <>
+                    Edit <span className="atelier-italic">{initial?.name || "product"}</span>
+                  </>
+                )}
+              </h2>
+              <p className="atelier-italic mt-2 text-sm sm:text-[15px] max-w-md leading-relaxed">
+                {mode === "add"
+                  ? "Compose a new entry for the harvest catalog — every detail, like a recipe."
+                  : "Refine the details of this entry. The catalog is a living record."}
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={onClose}
+              className="shrink-0 flex h-9 w-9 items-center justify-center rounded-full transition-all duration-200 hover:bg-stone-900 hover:text-white text-stone-500"
+              aria-label="Close"
+            >
+              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <div className="relative shrink-0 px-6 sm:px-10">
+          <hr className="atelier-rule" />
+        </div>
+
+        {/* BODY — two columns */}
+        <form
+          onSubmit={handleSubmit}
+          className="relative flex-1 overflow-y-auto"
+          onDragEnter={(e) => {
+            e.preventDefault();
+            setIsDrag(true);
+          }}
+        >
+          <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] gap-0">
+            {/* LEFT — Image hero */}
+            <div className="relative px-6 sm:px-10 pt-6 sm:pt-8 pb-6 lg:border-r border-stone-200/60 lg:pr-8">
+              <div className="atelier-section-num mb-4">01 · Media</div>
+
+              <div
+                onDragOver={(e) => {
+                  e.preventDefault();
+                  setIsDrag(true);
+                }}
+                onDragLeave={(e) => {
+                  if (e.currentTarget === e.target) setIsDrag(false);
+                }}
+                onDrop={(e) => {
+                  e.preventDefault();
+                  setIsDrag(false);
+                  const file = e.dataTransfer.files?.[0];
+                  if (file) handleFile(file);
+                }}
+                onClick={() => !uploading && fileInputRef.current?.click()}
+                className={[
+                  "atelier-drop",
+                  isDrag ? "is-drag" : "",
+                  uploadError ? "is-error" : "",
+                  imagePreview ? "has-image" : "",
+                ].join(" ")}
+              >
+                {/* status pill */}
+                <div
+                  className={[
+                    "atelier-status-pill",
+                    imagePreview ? "" : "is-empty",
+                  ].join(" ")}
+                >
+                  <span className="atelier-dot" />
+                  {imagePreview
+                    ? uploading
+                      ? "Uploading"
+                      : "Image set"
+                    : "No image yet"}
+                </div>
+
+                {uploading ? (
+                  <div className="flex flex-col items-center gap-3">
+                    <div className="h-6 w-6 rounded-full border-2 border-stone-300 border-t-[#224E2F] animate-spin" />
+                    <p className="atelier-drop-title">Pouring into the cellar…</p>
+                  </div>
+                ) : imagePreview ? (
+                  <div className="absolute inset-0 p-3 sm:p-4">
+                    <div className="relative h-full w-full">
+                      <Image
+                        src={imagePreview}
+                        alt="Product preview"
+                        fill
+                        style={{ objectFit: "contain" }}
+                        className="rounded-md"
+                      />
+                    </div>
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setImagePreview(null);
+                        setImageUrl(null);
+                      }}
+                      className="absolute bottom-4 left-1/2 -translate-x-1/2 inline-flex items-center gap-1.5 rounded-full bg-stone-900/85 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono uppercase tracking-wider text-white hover:bg-stone-900 transition-colors"
+                    >
+                      <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                      Remove
+                    </button>
+                  </div>
+                ) : (
+                  <>
+                    {/* ornamental drop zone content */}
+                    <svg
+                      className="h-10 w-10 text-[#224E2F]/70"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={1.2}
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="M12 3v13" />
+                      <path d="M7 8l5-5 5 5" />
+                      <path d="M4 16v3a2 2 0 002 2h12a2 2 0 002-2v-3" />
+                      <circle cx="12" cy="20" r="0.8" fill="currentColor" />
+                    </svg>
+                    <p className="atelier-drop-eyebrow">Drag &amp; drop</p>
+                    <p className="atelier-drop-title">
+                      or click to choose<br />a harvest portrait
+                    </p>
+                    <p className="atelier-drop-hint">PNG · JPEG · WebP · 5MB max</p>
+                  </>
+                )}
+
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/png,image/jpeg,image/webp"
+                  className="hidden"
+                  onChange={(e) => {
+                    const file = e.target.files?.[0];
+                    if (file) handleFile(file);
+                    e.target.value = "";
+                  }}
+                />
+              </div>
+
+              {uploadError && (
+                <p className="mt-3 atelier-hint" style={{ color: "#B91C1C" }}>
+                  {uploadError}
+                </p>
+              )}
+            </div>
+
+            {/* RIGHT — Form fields */}
+            <div className="px-6 sm:px-10 pt-6 sm:pt-8 pb-6 lg:pl-10 space-y-7 atelier-stagger">
+              {error && (
+                <div className="atelier-error">
+                  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  <span>{error}</span>
+                </div>
+              )}
+
+              {/* 02 IDENTITY */}
+              <section>
+                <div className="flex items-baseline justify-between mb-4">
+                  <div className="atelier-section-num">02 · Identity</div>
+                </div>
+
+                <div>
+                  <label
+                    htmlFor="atelier-name"
+                    className="atelier-section-label block mb-1"
+                  >
+                    Product name
+                  </label>
+                  <input
+                    id="atelier-name"
+                    type="text"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="e.g. Dozen Sweet Corn"
+                    className="atelier-input atelier-input--display"
+                    autoComplete="off"
+                  />
+                </div>
+
+                <div className="mt-5">
+                  <label
+                    htmlFor="atelier-desc"
+                    className="atelier-section-label block mb-1"
+                  >
+                    Description
+                  </label>
+                  <textarea
+                    id="atelier-desc"
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    placeholder="A note from the field — origin, variety, picking notes…"
+                    rows={2}
+                    className="atelier-input resize-none"
+                    style={{ minHeight: 56 }}
+                  />
+                </div>
+              </section>
+
+              {/* 03 COMMERCE */}
+              <section>
+                <div className="atelier-section-num mb-4">03 · Commerce</div>
+
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                  <div>
+                    <label
+                      htmlFor="atelier-price"
+                      className="atelier-section-label block mb-1"
+                    >
+                      Price
+                    </label>
+                    <div className="relative">
+                      <span className="atelier-price-sigil">$</span>
+                      <input
+                        id="atelier-price"
+                        type="number"
+                        step="0.01"
+                        min="0"
+                        value={price}
+                        onChange={(e) => setPrice(e.target.value)}
+                        placeholder="0.00"
+                        className="atelier-price"
+                      />
+                    </div>
+                  </div>
+
+                  {showBrandPicker ? (
+                    <div>
+                      <label
+                        htmlFor="atelier-brand"
+                        className="atelier-section-label block mb-1"
+                      >
+                        Brand
+                      </label>
+                      <select
+                        id="atelier-brand"
+                        value={brandId}
+                        onChange={(e) => setBrandId(e.target.value)}
+                        className="atelier-select"
+                      >
+                        {brands.length === 0 && <option value="">Loading brands…</option>}
+                        {brands.length > 0 && <option value="">Select a brand…</option>}
+                        {brands.map((b) => (
+                          <option key={b.id} value={b.id}>
+                            {b.name}
+                          </option>
+                        ))}
+                      </select>
+                      <p className="atelier-hint">
+                        You administer multiple brands — choose the one this product belongs to.
+                      </p>
+                    </div>
+                  ) : (
+                    <div>
+                      <span className="atelier-section-label block mb-1">Brand</span>
+                      <div className="py-2.5 border-b border-stone-300/40">
+                        <span className="font-[family-name:var(--font-fraunces)] text-[15px] text-stone-700">
+                          {lockedBrandName || "—"}
+                        </span>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                <div className="mt-6">
+                  <span className="atelier-section-label block mb-2">Type</span>
+                  <div className="grid grid-cols-3 gap-2.5">
+                    {TYPE_OPTIONS.map((opt) => (
+                      <button
+                        key={opt.value}
+                        type="button"
+                        onClick={() => setType(opt.value)}
+                        className={[
+                          "atelier-type-card",
+                          type === opt.value ? "is-selected" : "",
+                        ].join(" ")}
+                        aria-pressed={type === opt.value}
+                      >
+                        <div className="flex items-center justify-between w-full">
+                          <span className="atelier-type-icon">{opt.icon}</span>
+                          <svg
+                            className="atelier-type-check h-3.5 w-3.5"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                            strokeWidth={3}
+                          >
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                          </svg>
+                        </div>
+                        <div>
+                          <div className="atelier-type-name">{opt.label}</div>
+                          <div
+                            className={[
+                              "text-[10px] font-[family-name:var(--font-fragment-mono)] uppercase tracking-wider mt-0.5",
+                              type === opt.value ? "text-white/60" : "text-stone-500",
+                            ].join(" ")}
+                          >
+                            {opt.italic}
+                          </div>
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </section>
+
+              {/* 04 SETTINGS */}
+              <section>
+                <div className="atelier-section-num mb-4">04 · Settings</div>
+                <div className="flex flex-wrap items-center gap-6 sm:gap-10">
+                  <button
+                    type="button"
+                    onClick={() => setActive((v) => !v)}
+                    className={["atelier-toggle", active ? "is-on" : ""].join(" ")}
+                    aria-pressed={active}
+                  >
+                    <span className="atelier-toggle-track">
+                      <span className="atelier-toggle-thumb" />
+                    </span>
+                    <span className="atelier-toggle-label">Active</span>
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={() => setIsTaxable((v) => !v)}
+                    className={["atelier-toggle is-gold", isTaxable ? "is-on" : ""].join(" ")}
+                    aria-pressed={isTaxable}
+                  >
+                    <span className="atelier-toggle-track">
+                      <span className="atelier-toggle-thumb" />
+                    </span>
+                    <span className="atelier-toggle-label">Taxable</span>
+                  </button>
+
+                  <p className="atelier-hint flex-1 min-w-[200px]">
+                    Active products appear in the storefront. Taxable items add sales tax at checkout.
+                  </p>
+                </div>
+
+                {/* Seasonal Availability */}
+                <div className="mt-6 pt-6 border-t border-stone-200/40">
+                  <span className="atelier-section-label block mb-3">Seasonal Availability</span>
+                  <p className="atelier-hint mb-4">Set when this product is available (e.g., mid-July through mid-September)</p>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <label htmlFor="atelier-available-from" className="block text-[11px] font-mono uppercase tracking-wider text-stone-500 mb-1.5">Start Date</label>
+                      <input
+                        id="atelier-available-from"
+                        type="date"
+                        value={availableFrom}
+                        onChange={(e) => setAvailableFrom(e.target.value)}
+                        className="atelier-input"
+                      />
+                    </div>
+                    <div>
+                      <label htmlFor="atelier-available-until" className="block text-[11px] font-mono uppercase tracking-wider text-stone-500 mb-1.5">End Date</label>
+                      <input
+                        id="atelier-available-until"
+                        type="date"
+                        value={availableUntil}
+                        onChange={(e) => setAvailableUntil(e.target.value)}
+                        className="atelier-input"
+                      />
+                    </div>
+                  </div>
+                  {(availableFrom || availableUntil) && (
+                    <button
+                      type="button"
+                      onClick={() => { setAvailableFrom(""); setAvailableUntil(""); }}
+                      className="mt-2 text-[11px] font-mono uppercase tracking-wider text-stone-400 hover:text-stone-600"
+                    >
+                      Clear dates
+                    </button>
+                  )}
+                </div>
+              </section>
+            </div>
+          </div>
+        </form>
+
+        {/* FOOTER */}
+        <div className="relative shrink-0 px-6 sm:px-10 pt-4 pb-6 sm:pb-7 border-t border-stone-200/60 bg-[#FAF7F0]/80 backdrop-blur-sm">
+          <div className="flex items-center justify-between gap-4">
+            <button
+              type="button"
+              onClick={onClose}
+              className="atelier-discard"
+            >
+              discard changes
+            </button>
+
+            <div className="flex items-center gap-3">
+              {/* readiness indicator */}
+              <div className="hidden sm:flex items-center gap-2 text-[11px] font-mono uppercase tracking-wider text-stone-500">
+                <span
+                  className={[
+                    "h-1.5 w-1.5 rounded-full",
+                    name.trim() && price
+                      ? "bg-emerald-600 shadow-[0_0_0_3px_rgba(22,163,74,0.15)]"
+                      : "bg-stone-300",
+                  ].join(" ")}
+                />
+                {name.trim() && price ? "Ready" : "Required fields pending"}
+              </div>
+
+              <button
+                type="submit"
+                form="atelier-product-form"
+                onClick={handleSubmit}
+                disabled={saving || uploading || !name.trim() || !price}
+                className="atelier-cta"
+              >
+                <span className="atelier-cta-shimmer" />
+                {saving ? (
+                  <>
+                    <span className="h-3.5 w-3.5 rounded-full border-2 border-white/40 border-t-white animate-spin" />
+                    {mode === "add" ? "Composing…" : "Saving…"}
+                  </>
+                ) : (
+                  <>
+                    {mode === "add" ? "Add to catalog" : "Save changes"}
+                    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.2}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                    </svg>
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}
@@ -1,13 +1,14 @@
 "use client";

-import { useState, useCallback, useRef, useTransition } from "react";
+import { useState, useCallback, useTransition, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { createProduct } from "@/actions/products/create-product";
 import { updateProduct } from "@/actions/products/update-product";
 import { deleteProduct } from "@/actions/products";
 import { uploadProductImage } from "@/actions/products/upload-image";
-import GlassModal from "@/components/admin/GlassModal";
+import ProductFormModal, { type ProductFormValues } from "@/components/admin/ProductFormModal";
 import { PageHeader, AdminButton, AdminIconButton, AdminSearchInput, AdminFilterTabs, AdminViewModeTabs, useToast, Skeleton } from "@/components/admin/design-system";

 type Product = {
@@ -20,16 +21,8 @@ type Product = {
  image_url?: string | null;
  brand_id: string;
  is_taxable: boolean;
-};
-
-type FormData = {
-  name: string;
-  description: string;
-  price: string;
-  type: string;
-  active: boolean;
-  image_url: string;
-  is_taxable: boolean;
+  available_from?: string | null;
+  available_until?: string | null;
 };

 type ViewMode = "table" | "cards";
@@ -74,7 +67,17 @@ const PackageIconHeader = () => (
  </svg>
 );

-export default function ProductsClient({ products, brandId }: { products: Product[]; brandId?: string }) {
+export default function ProductsClient({
+  products,
+  brandId,
+  brands = [],
+  isPlatformAdmin = false,
+}: {
+  products: Product[];
+  brandId?: string;
+  brands?: { id: string; name: string }[];
+  isPlatformAdmin?: boolean;
+}) {
  const router = useRouter();
  const { success: showSuccess, error: showError } = useToast();
  const [, startTransition] = useTransition();
@@ -83,28 +86,10 @@ export default function ProductsClient({ products, brandId }: { products: Produc
  const [viewMode, setViewMode] = useState<ViewMode>("table");
  const [showModal, setShowModal] = useState(false);
  const [editingProduct, setEditingProduct] = useState<Product | null>(null);
-  const [formData, setFormData] = useState<FormData>({
-    name: "",
-    description: "",
-    price: "",
-    type: "pickup",
-    active: true,
-    image_url: "",
-    is_taxable: true,
-  });
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
  const [deletingId, setDeletingId] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);

-  // Image upload states
-  const [imagePreview, setImagePreview] = useState<string | null>(null);
-  const [uploading, setUploading] = useState(false);
-  const [uploadError, setUploadError] = useState<string | null>(null);
-  const [pendingImageUrl, setPendingImageUrl] = useState<string | null>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
  const filtered = products.filter((p) => {
    const matchesSearch =
      !search ||
@@ -147,155 +132,104 @@ export default function ProductsClient({ products, brandId }: { products: Produc
    });
  }

-  async function handleFileSelect(file: File) {
-    const validTypes = ["image/png", "image/jpeg", "image/webp"];
-    if (!validTypes.includes(file.type)) {
-      setUploadError("Only PNG, JPEG, and WebP images are allowed.");
-      return;
-    }
-    if (file.size > 5 * 1024 * 1024) {
-      setUploadError("Image must be under 5MB.");
-      return;
-    }
+  const handleUploadImage = useCallback(
+    async (file: File): Promise<{ success: boolean; imageUrl?: string; error?: string }> => {
+      const validTypes = ["image/png", "image/jpeg", "image/webp"];
+      if (!validTypes.includes(file.type)) {
+        return { success: false, error: "Only PNG, JPEG, and WebP images are allowed." };
+      }
+      if (file.size > 5 * 1024 * 1024) {
+        return { success: false, error: "Image must be under 5MB." };
+      }

-    setUploadError(null);
-    setUploading(true);
+      const resizedBuffer = await resizeImage(file, 1200);
+      const resizedFile = new File([resizedBuffer], file.name, { type: "image/jpeg" });

-    const resizedBuffer = await resizeImage(file, 1200);
-    const resizedFile = new File([resizedBuffer], file.name, { type: "image/jpeg" });
-
-    const productIdForUpload = editingProduct ? editingProduct.id : "__NEW__";
-    const result = await uploadProductImage(productIdForUpload, resizedFile);
-
-    setUploading(false);
-
-    if (result.success) {
-      setPendingImageUrl(result.imageUrl);
-      setImagePreview(result.imageUrl);
-      setFormData({ ...formData, image_url: result.imageUrl });
-    } else {
-      setUploadError(result.error ?? "Upload failed.");
-    }
-  }
+      const productIdForUpload = editingProduct ? editingProduct.id : "__NEW__";
+      const result = await uploadProductImage(productIdForUpload, resizedFile);
+      if (result.success) {
+        return { success: true, imageUrl: result.imageUrl };
+      }
+      return { success: false, error: result.error };
+    },
+    [editingProduct]
+  );

  const openAddModal = useCallback(() => {
    setEditingProduct(null);
-    setFormData({
-      name: "",
-      description: "",
-      price: "",
-      type: "pickup",
-      active: true,
-      image_url: "",
-      is_taxable: true,
-    });
-    setImagePreview(null);
-    setPendingImageUrl(null);
-    setUploadError(null);
-    setError(null);
    setShowModal(true);
  }, []);

  const openEditModal = useCallback((product: Product) => {
    setEditingProduct(product);
-    setFormData({
-      name: product.name,
-      description: product.description || "",
-      price: String(product.price),
-      type: product.type,
-      active: product.active,
-      image_url: product.image_url || "",
-      is_taxable: product.is_taxable,
-    });
-    setImagePreview(product.image_url || null);
-    setPendingImageUrl(null);
-    setUploadError(null);
-    setError(null);
    setShowModal(true);
  }, []);

  const closeModal = useCallback(() => {
    setShowModal(false);
    setEditingProduct(null);
-    setImagePreview(null);
-    setPendingImageUrl(null);
-    setUploadError(null);
-    setError(null);
  }, []);

-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError(null);
-    setSaving(true);
-    setIsLoading(true);
+  const handleModalSubmit = useCallback(
+    async (values: ProductFormValues): Promise<{ success: boolean; error?: string }> => {
+      setIsLoading(true);
+      try {
+        const price = parseFloat(values.price);
+        if (isNaN(price) || price < 0) {
+          return { success: false, error: "Please enter a valid price" };
+        }
+        if (!values.name.trim()) {
+          return { success: false, error: "Product name is required" };
+        }

-    const price = parseFloat(formData.price);
-    if (isNaN(price) || price < 0) {
-      setError("Please enter a valid price");
-      setSaving(false);
-      setIsLoading(false);
-      return;
-    }
+        // Platform admins pick a brand in the modal; everyone else is locked.
+        const effectiveBrandId = isPlatformAdmin ? values.brand_id : brandId;
+        if (!effectiveBrandId) {
+          return { success: false, error: "Please choose a brand for this product." };
+        }

-    if (!formData.name.trim()) {
-      setError("Product name is required");
-      setSaving(false);
-      setIsLoading(false);
-      return;
-    }
+        let result;
+        if (editingProduct) {
+          result = await updateProduct(editingProduct.id, effectiveBrandId, {
+            name: values.name.trim(),
+            description: values.description.trim(),
+            price,
+            type: values.type,
+            active: values.active,
+            image_url: values.image_url,
+            is_taxable: values.is_taxable,
+          });
+        } else {
+          result = await createProduct(effectiveBrandId, {
+            name: values.name.trim(),
+            description: values.description.trim(),
+            price,
+            type: values.type,
+            active: values.active,
+            image_url: values.image_url,
+            is_taxable: values.is_taxable,
+          });
+        }

-    try {
-      if (!brandId) {
-        setError("Brand ID is required");
-        setSaving(false);
+        if (!result.success) {
+          showError("Failed to save product", result.error ?? "Please try again");
+          return { success: false, error: result.error };
+        }
+
+        showSuccess(
+          editingProduct ? "Product updated" : "Product created",
+          `${values.name} has been saved`
+        );
+        startTransition(() => router.refresh());
+        return { success: true };
+      } catch {
+        return { success: false, error: "Network error. Please try again." };
+      } finally {
        setIsLoading(false);
-        return;
      }
-
-      let result;
-      const imageUrl = pendingImageUrl || formData.image_url || null;
-
-      if (editingProduct) {
-        result = await updateProduct(editingProduct.id, brandId, {
-          name: formData.name.trim(),
-          description: formData.description.trim(),
-          price,
-          type: formData.type,
-          active: formData.active,
-          image_url: imageUrl,
-          is_taxable: formData.is_taxable,
-        });
-      } else {
-        result = await createProduct(brandId, {
-          name: formData.name.trim(),
-          description: formData.description.trim(),
-          price,
-          type: formData.type,
-          active: formData.active,
-          image_url: imageUrl,
-          is_taxable: formData.is_taxable,
-        });
-      }
-
-      if (!result.success) {
-        setError(result.error ?? "Failed to save product");
-        showError("Failed to save product", result.error ?? "Please try again");
-        setSaving(false);
-        setIsLoading(false);
-        return;
-      }
-
-      showSuccess(editingProduct ? "Product updated" : "Product created", `${formData.name} has been saved`);
-      closeModal();
-      setIsLoading(false);
-      startTransition(() => router.refresh());
-    } catch {
-      setError("Network error. Please try again.");
-      showError("Network error", "Please check your connection and try again");
-      setSaving(false);
-      setIsLoading(false);
-    }
-  };
+    },
+    [editingProduct, brandId, isPlatformAdmin, router, showError, showSuccess]
+  );

  const handleDelete = async (productId: string) => {
    setDeletingId(productId);
@@ -399,203 +333,38 @@ export default function ProductsClient({ products, brandId }: { products: Produc
        />
      )}

-      {/* Modal */}
-      {showModal && (
-        <GlassModal
-          title={editingProduct ? "Edit Product" : "Add Product"}
-          subtitle={editingProduct ? `Editing ${editingProduct.name}` : "Create a new product"}
-          onClose={closeModal}
-        >
-          <form onSubmit={handleSubmit} className="space-y-4">
-            {error && (
-              <div className="rounded-xl bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-600 flex items-start gap-3">
-                <svg className="h-5 w-5 shrink-0 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-                {error}
-              </div>
-            )}
-
-            <div>
-              <label className="block text-xs font-semibold text-stone-700 mb-1.5">
-                Name <span className="text-red-500">*</span>
-              </label>
-              <input
-                type="text"
-                value={formData.name}
-                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                placeholder="Product name"
-                className={`w-full rounded-xl border px-3 py-2.5 text-sm text-[var(--admin-text-primary)] outline-none focus:ring-2 focus:ring-[var(--admin-accent)]/20 placeholder:text-[var(--admin-text-muted)] transition-colors ${
-                  error && !formData.name.trim()
-                    ? "border-red-400 bg-red-50"
-                    : "border-[var(--admin-border)] bg-white focus:border-[var(--admin-accent)]"
-                }`}
-                required
-              />
-            </div>
-
-            <div>
-              <label className="block text-xs font-semibold text-stone-700 mb-1.5">Description</label>
-              <textarea
-                value={formData.description}
-                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-                placeholder="Product description"
-                rows={2}
-                className="w-full rounded-xl border border-[var(--admin-border)] bg-white px-3 py-2.5 text-sm text-[var(--admin-text-primary)] outline-none focus:border-[var(--admin-accent)] focus:ring-2 focus:ring-[var(--admin-accent)]/20 placeholder:text-[var(--admin-text-muted)] resize-none"
-              />
-            </div>
-
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <label className="block text-xs font-semibold text-stone-700 mb-1.5">
-                  Price <span className="text-red-500">*</span>
-                </label>
-                <div className="relative">
-                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-stone-400 text-sm">$</span>
-                  <input
-                    type="number"
-                    step="0.01"
-                    min="0"
-                    value={formData.price}
-                    onChange={(e) => setFormData({ ...formData, price: e.target.value })}
-                    placeholder="0.00"
-                    className={`w-full rounded-xl border pl-8 pr-3 py-2.5 text-sm text-[var(--admin-text-primary)] outline-none focus:ring-2 focus:ring-[var(--admin-accent)]/20 ${
-                      error && (!formData.price || parseFloat(formData.price) < 0)
-                        ? "border-red-400 bg-red-50"
-                        : "border-[var(--admin-border)] bg-white focus:border-[var(--admin-accent)]"
-                    }`}
-                    required
-                  />
-                </div>
-              </div>
-              <div>
-                <label className="block text-xs font-semibold text-stone-700 mb-1.5">Type</label>
-                <select
-                  value={formData.type}
-                  onChange={(e) => setFormData({ ...formData, type: e.target.value })}
-                  className="w-full rounded-xl border border-[var(--admin-border)] bg-white px-3 py-2.5 text-sm text-[var(--admin-text-primary)] outline-none focus:border-[var(--admin-accent)] focus:ring-2 focus:ring-[var(--admin-accent)]/20"
-                >
-                  <option value="pickup">Pickup</option>
-                  <option value="wholesale">Wholesale</option>
-                  <option value="subscription">Subscription</option>
-                </select>
-              </div>
-            </div>
-
-            {/* Image Upload */}
-            <div>
-              <label className="block text-xs font-semibold text-stone-700 mb-1.5">Product Image</label>
-              <p className="text-[10px] text-stone-500 mb-2">JPG, PNG, WebP · 1200px max width · max 5MB</p>
-
-              <div
-                onDragOver={(e) => e.preventDefault()}
-                onDrop={(e) => {
-                  e.preventDefault();
-                  const file = e.dataTransfer.files[0];
-                  if (file) handleFileSelect(file);
-                }}
-                onClick={() => !uploading && fileInputRef.current?.click()}
-                className={`
-                  flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-6 cursor-pointer transition-colors
-                  ${uploadError ? "border-red-400" : "border-[var(--admin-border)] hover:border-[var(--admin-accent)] hover:bg-[var(--admin-accent)]/5"}
-                  ${uploading ? "opacity-50 pointer-events-none" : ""}
-                `}
-              >
-                {uploading ? (
-                  <>
-                    <div className="h-5 w-5 rounded-full border-2 border-[var(--admin-accent)] border-t-transparent animate-spin" />
-                    <span className="text-sm text-stone-500">Uploading...</span>
-                  </>
-                ) : imagePreview ? (
-                  <div className="relative">
-                    <div className="relative h-32 sm:h-40 w-auto">
-                      <Image src={imagePreview} alt="Product preview" fill style={{ objectFit: "contain" }} className="rounded-lg" />
-                    </div>
-                    <span className="block text-center text-xs text-stone-500 mt-2">Click or drop to replace</span>
-                  </div>
-                ) : (
-                  <>
-                    {Icons.upload("h-8 w-8 text-stone-400")}
-                    <span className="text-sm text-stone-500">Drag & drop or click to upload</span>
-                  </>
-                )}
-                <input
-                  ref={fileInputRef}
-                  type="file"
-                  accept="image/png,image/jpeg,image/webp"
-                  className="hidden"
-                  onChange={(e) => {
-                    const file = e.target.files?.[0];
-                    if (file) handleFileSelect(file);
-                    e.target.value = "";
-                  }}
-                />
-              </div>
-
-              {uploadError && (
-                <p className="mt-1 text-xs text-red-500">{uploadError}</p>
-              )}
-
-              {(imagePreview || formData.image_url) && (
-                <button
-                  type="button"
-                  onClick={() => {
-                    setImagePreview(null);
-                    setPendingImageUrl(null);
-                    setFormData({ ...formData, image_url: "" });
-                  }}
-                  className="mt-2 text-xs text-red-500 hover:underline"
-                >
-                  Remove image
-                </button>
-              )}
-            </div>
-
-            <div className="flex items-center gap-6">
-              <label className="flex items-center gap-3 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={formData.active}
-                  onChange={(e) => setFormData({ ...formData, active: e.target.checked })}
-                  className="h-4 w-4 rounded border-[var(--admin-border)] text-[var(--admin-accent)] focus:ring-2 focus:ring-[var(--admin-accent)]/30 focus:ring-offset-1 cursor-pointer"
-                />
-                <span className="text-sm font-medium text-stone-700">Active</span>
-              </label>
-              <label className="flex items-center gap-3 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={formData.is_taxable}
-                  onChange={(e) => setFormData({ ...formData, is_taxable: e.target.checked })}
-                  className="h-4 w-4 rounded border-[var(--admin-border)] text-[var(--admin-accent)] focus:ring-2 focus:ring-[var(--admin-accent)]/30 focus:ring-offset-1 cursor-pointer"
-                />
-                <span className="text-sm font-medium text-stone-700">Taxable</span>
-              </label>
-            </div>
-
-            <div className="flex justify-end gap-3 pt-4 border-t border-stone-100">
-              <AdminButton
-                type="button"
-                variant="secondary"
-                onClick={closeModal}
-              >
-                Cancel
-              </AdminButton>
-              <AdminButton
-                type="submit"
-                variant="primary"
-                isLoading={saving}
-                disabled={!formData.name.trim() || !formData.price}
-              >
-                {editingProduct ? "Save Changes" : "Create Product"}
-              </AdminButton>
-            </div>
-          </form>
-        </GlassModal>
-      )}
+      {/* Modal — Atelier des Récoltes (editorial product form) */}
+      <ProductFormModal
+        open={showModal}
+        mode={editingProduct ? "edit" : "add"}
+        onClose={closeModal}
+        onSubmit={handleModalSubmit}
+        onUploadImage={handleUploadImage}
+        brands={brands}
+        lockBrand={!isPlatformAdmin}
+        lockedBrandId={brandId ?? ""}
+        initial={
+          editingProduct
+            ? {
+                name: editingProduct.name,
+                description: editingProduct.description || "",
+                price: String(editingProduct.price),
+                type: (editingProduct.type as "pickup" | "wholesale" | "subscription") ?? "pickup",
+                brand_id: editingProduct.brand_id,
+                active: editingProduct.active,
+                is_taxable: editingProduct.is_taxable,
+                available_from: editingProduct.available_from ?? null,
+                available_until: editingProduct.available_until ?? null,
+              }
+            : undefined
+        }
+        initialImageUrl={editingProduct?.image_url ?? null}
+      />
    </div>
  );
 }

+
 // ── Table View ─────────────────────────────────────────────────────────────────

 function TableView({
@@ -615,8 +384,51 @@ function TableView({
  onDeleteCancel: () => void;
  deletingId: string | null;
 }) {
+  // Track the position of the open row's three-dots button so the popup can be
+  // rendered via portal at body level (escapes any overflow:hidden ancestors
+  // and any table-row stacking-context quirks).
+  const [menuPos, setMenuPos] = useState<{ top: number; left: number; width: number } | null>(null);
+  const [mounted, setMounted] = useState(false);
+  const buttonRefs = useRef<Record<string, HTMLButtonElement | null>>({});
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!deleteConfirm) {
+      setMenuPos(null);
+      return;
+    }
+    const btn = buttonRefs.current[deleteConfirm];
+    if (btn) {
+      const rect = btn.getBoundingClientRect();
+      setMenuPos({ top: rect.bottom + 4, left: rect.right, width: rect.width });
+    }
+  }, [deleteConfirm]);
+
+  // Reposition on scroll/resize so the popup stays anchored to its button.
+  useEffect(() => {
+    if (!deleteConfirm) return;
+    const updatePos = () => {
+      const btn = buttonRefs.current[deleteConfirm];
+      if (btn) {
+        const rect = btn.getBoundingClientRect();
+        setMenuPos({ top: rect.bottom + 4, left: rect.right, width: rect.width });
+      }
+    };
+    window.addEventListener("scroll", updatePos, true);
+    window.addEventListener("resize", updatePos);
+    return () => {
+      window.removeEventListener("scroll", updatePos, true);
+      window.removeEventListener("resize", updatePos);
+    };
+  }, [deleteConfirm]);
+
+  const openProduct = deleteConfirm ? products.find((p) => p.id === deleteConfirm) : null;
+
  return (
-    <div className="overflow-hidden rounded-xl border border-[var(--admin-border)] bg-white">
+    <div className="overflow-visible rounded-xl border border-[var(--admin-border)] bg-white">
      <table className="w-full text-sm">
        <thead className="bg-stone-50">
          <tr>
@@ -700,44 +512,15 @@ function TableView({
                      Edit
                    </AdminButton>
                    <button
+                      ref={(el) => { buttonRefs.current[product.id] = el; }}
                      onClick={() => onDelete(product.id)}
                      className="rounded-lg px-2 py-1.5 text-xs text-[var(--admin-text-muted)] hover:text-red-600 hover:bg-red-50 transition-colors"
+                      aria-label="Product actions"
                    >
                      <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                      </svg>
                    </button>
-
-                    {deleteConfirm === product.id && (
-                      <>
-                        <div className="fixed inset-0 z-30" onClick={onDeleteCancel} />
-                        <div className="absolute right-0 top-full mt-1 z-40 w-72 rounded-xl bg-white border border-[var(--admin-border)] shadow-xl p-4">
-                          <p className="text-sm font-semibold text-stone-900">
-                            Delete &quot;{product.name}&quot;?
-                          </p>
-                          <p className="mt-1 text-xs text-stone-500">
-                            This will remove the product. If attached to orders, it will be hidden.
-                          </p>
-                          <div className="mt-3 flex gap-2">
-                            <button
-                              onClick={onDeleteCancel}
-                              className="flex-1 rounded-lg border border-[var(--admin-border)] bg-white px-3 py-2 text-xs font-semibold text-stone-700 hover:bg-stone-50"
-                            >
-                              Cancel
-                            </button>
-                            <AdminButton
-                              onClick={() => onDeleteConfirm(product.id)}
-                              disabled={deletingId === product.id}
-                              variant="danger"
-                              size="sm"
-                              className="flex-1"
-                            >
-                              {deletingId === product.id ? "..." : "Delete"}
-                            </AdminButton>
-                          </div>
-                        </div>
-                      </>
-                    )}
                  </div>
                </td>
              </tr>
@@ -745,6 +528,50 @@ function TableView({
          )}
        </tbody>
      </table>
+
+      {/* Delete confirmation popup — rendered via portal at body level with
+          position: fixed so it sits above all table rows and escapes the
+          overflow-visible container. */}
+      {mounted && deleteConfirm && openProduct && menuPos &&
+        createPortal(
+          <>
+            <div
+              className="fixed inset-0 z-[60]"
+              onClick={onDeleteCancel}
+            />
+            <div
+              role="dialog"
+              aria-label="Confirm delete"
+              className="fixed z-[70] w-72 rounded-xl bg-white border border-[var(--admin-border)] shadow-xl p-4"
+              style={{ top: menuPos.top, left: menuPos.left, transform: "translateX(-100%)" }}
+            >
+              <p className="text-sm font-semibold text-stone-900">
+                Delete &quot;{openProduct.name}&quot;?
+              </p>
+              <p className="mt-1 text-xs text-stone-500">
+                This will remove the product. If attached to orders, it will be hidden.
+              </p>
+              <div className="mt-3 flex gap-2">
+                <button
+                  onClick={onDeleteCancel}
+                  className="flex-1 rounded-lg border border-[var(--admin-border)] bg-white px-3 py-2 text-xs font-semibold text-stone-700 hover:bg-stone-50"
+                >
+                  Cancel
+                </button>
+                <AdminButton
+                  onClick={() => onDeleteConfirm(openProduct.id)}
+                  disabled={deletingId === openProduct.id}
+                  variant="danger"
+                  size="sm"
+                  className="flex-1"
+                >
+                  {deletingId === openProduct.id ? "..." : "Delete"}
+                </AdminButton>
+              </div>
+            </div>
+          </>,
+          document.body
+        )}
    </div>
  );
 }
@@ -0,0 +1,31 @@
+type Stat = {
+  label: string;
+  value: number | string;
+  emphasis?: boolean;
+};
+
+type Props = {
+  stats: Stat[];
+  /** Right-aligned slot (e.g. an inline "Next stop" pill or refresh action) */
+  right?: React.ReactNode;
+};
+
+export default function StatsStrip({ stats, right }: Props) {
+  return (
+    <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1 text-sm">
+      <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+        {stats.map((s, i) => (
+          <span key={i} className="flex items-baseline gap-1.5">
+            <span
+              className={`font-bold tabular-nums ${s.emphasis ? "text-emerald-700" : "text-[var(--admin-text-primary)]"}`}
+            >
+              {s.value}
+            </span>
+            <span className="text-[var(--admin-text-muted)]">{s.label}</span>
+          </span>
+        ))}
+      </div>
+      {right && <div className="ml-auto">{right}</div>}
+    </div>
+  );
+}
@@ -0,0 +1,310 @@
+"use client";
+/* eslint-disable react-hooks/set-state-in-effect */
+
+import { useEffect, useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import GlassModal from "@/components/admin/GlassModal";
+import StopEditForm from "@/components/admin/StopEditForm";
+import StopProductAssignment from "@/components/admin/StopProductAssignment";
+import MessageCustomersSection from "@/components/admin/MessageCustomersSection";
+import { getStopDetails } from "@/actions/stops/get-stop-details";
+import { useToast } from "@/components/admin/design-system";
+import type { StopDetail, AssignedProduct } from "@/actions/stops/get-stop-details";
+
+type Tab = "details" | "products" | "message";
+
+type Props = {
+  stopId: string;
+  /** Optional: when the user clicks Duplicate from inside the modal. */
+  onDuplicate?: (stopId: string) => void;
+  onClose: () => void;
+};
+
+export default function StopDetailModal({ stopId, onDuplicate, onClose }: Props) {
+  const router = useRouter();
+  const { success: showSuccess } = useToast();
+  const [, startTransition] = useTransition();
+
+  const [loading, setLoading] = useState(true);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [stop, setStop] = useState<StopDetail | null>(null);
+  const [allProducts, setAllProducts] = useState<{ id: string; name: string; type: string; price: number }[]>([]);
+  const [assignedProducts, setAssignedProducts] = useState<AssignedProduct[]>([]);
+  const [brands, setBrands] = useState<{ id: string; name: string; slug: string }[]>([]);
+  const [callerUid, setCallerUid] = useState<string>("");
+  const [tab, setTab] = useState<Tab>("details");
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setLoadError(null);
+    getStopDetails(stopId)
+      .then((res) => {
+        if (cancelled) return;
+        if (!res.success) {
+          setLoadError(res.error);
+          setLoading(false);
+          return;
+        }
+        setStop(res.stop);
+        setAllProducts(res.allProducts);
+        setAssignedProducts(res.assignedProducts);
+        setBrands(res.brands);
+        setCallerUid(res.callerUid);
+        setLoading(false);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setLoadError(err?.message ?? "Failed to load stop");
+        setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [stopId]);
+
+  function refresh() {
+    getStopDetails(stopId).then((res) => {
+      if (!res.success) return;
+      setStop(res.stop);
+      setAllProducts(res.allProducts);
+      setAssignedProducts(res.assignedProducts);
+      setBrands(res.brands);
+      setCallerUid(res.callerUid);
+    });
+  }
+
+  function handleEditSaved() {
+    refresh();
+    showSuccess("Stop updated", "Changes have been saved");
+    startTransition(() => router.refresh());
+  }
+
+  const subtitle = stop?.brands
+    ? (Array.isArray(stop.brands) ? stop.brands[0]?.name : stop.brands.name) ?? undefined
+    : undefined;
+
+  return (
+    <GlassModal
+      title={loading ? "Loading…" : stop ? `${stop.city}, ${stop.state}` : "Stop"}
+      subtitle={subtitle ?? "Stop details"}
+      onClose={onClose}
+      maxWidth="max-w-3xl"
+    >
+      {loading ? (
+        <div className="space-y-3">
+          <div className="h-4 w-1/3 animate-pulse rounded bg-stone-200" />
+          <div className="h-4 w-2/3 animate-pulse rounded bg-stone-200" />
+          <div className="h-4 w-1/2 animate-pulse rounded bg-stone-200" />
+        </div>
+      ) : loadError ? (
+        <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+          {loadError}
+        </div>
+      ) : stop ? (
+        <div className="space-y-5">
+          {/* Tabs */}
+          <div
+            className="flex items-center gap-1 rounded-xl border border-[var(--admin-border)] bg-stone-50 p-1"
+            role="tablist"
+          >
+            <TabButton active={tab === "details"} onClick={() => setTab("details")}>
+              Details
+            </TabButton>
+            <TabButton active={tab === "products"} onClick={() => setTab("products")}>
+              <span className="inline-flex items-center gap-1.5">
+                Products
+                {assignedProducts.length > 0 && (
+                  <span className="rounded-full bg-[var(--admin-accent)]/10 px-2 py-0.5 text-[10px] font-semibold text-[var(--admin-accent)]">
+                    {assignedProducts.length}
+                  </span>
+                )}
+              </span>
+            </TabButton>
+            <TabButton active={tab === "message"} onClick={() => setTab("message")}>
+              Message
+            </TabButton>
+          </div>
+
+          {tab === "details" && (
+            <DetailsPanel
+              stop={stop}
+              brands={brands}
+              onDuplicate={onDuplicate}
+              onSaved={handleEditSaved}
+            />
+          )}
+
+          {tab === "products" && (
+            <div className="rounded-xl border border-[var(--admin-border)] bg-white p-5">
+              <h3 className="text-sm font-semibold text-[var(--admin-text-primary)]">
+                Assigned Products
+              </h3>
+              <p className="mt-1 text-xs text-[var(--admin-text-muted)]">
+                Manage which products are available at this stop.
+              </p>
+              <div className="mt-4">
+                <StopProductAssignment
+                  stopId={stop.id}
+                  allProducts={allProducts}
+                  assignedProducts={assignedProducts}
+                  callerUid={callerUid}
+                />
+              </div>
+            </div>
+          )}
+
+          {tab === "message" && (
+            <div className="rounded-xl border border-[var(--admin-border)] bg-white p-5">
+              <h3 className="text-sm font-semibold text-[var(--admin-text-primary)]">
+                Message Customers
+              </h3>
+              <p className="mt-1 text-xs text-[var(--admin-text-muted)]">
+                Send updates to customers with pending pickups at this stop.
+              </p>
+              <div className="mt-4">
+                <MessageCustomersSection stopId={stop.id} brandId={stop.brand_id} />
+              </div>
+            </div>
+          )}
+        </div>
+      ) : null}
+    </GlassModal>
+  );
+}
+
+function TabButton({
+  active,
+  onClick,
+  children,
+}: {
+  active: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={active}
+      onClick={onClick}
+      className={`flex-1 rounded-lg px-3 py-2 text-sm font-medium transition-all ${
+        active
+          ? "bg-white text-[var(--admin-accent)] shadow-sm border border-[var(--admin-border)]"
+          : "text-[var(--admin-text-secondary)] hover:text-[var(--admin-text-primary)]"
+      }`}
+    >
+      {children}
+    </button>
+  );
+}
+
+function DetailsPanel({
+  stop,
+  brands,
+  onDuplicate,
+  onSaved,
+}: {
+  stop: StopDetail;
+  brands: { id: string; name: string; slug: string }[];
+  onDuplicate?: (stopId: string) => void;
+  onSaved: () => void;
+}) {
+  return (
+    <div className="space-y-5">
+      <div className="rounded-xl border border-[var(--admin-border)] bg-white p-5">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <h3 className="text-lg font-semibold text-[var(--admin-text-primary)]">
+              {stop.city}, {stop.state}
+            </h3>
+            <p className="mt-1 text-sm text-[var(--admin-text-secondary)]">{stop.location}</p>
+          </div>
+          <span
+            className={`shrink-0 rounded-full px-3 py-1 text-xs font-medium ${
+              stop.active
+                ? "bg-emerald-100 text-emerald-700"
+                : "bg-stone-200 text-stone-500"
+            }`}
+          >
+            {stop.active ? "Active" : "Inactive"}
+          </span>
+        </div>
+
+        <dl className="mt-4 grid grid-cols-2 gap-4 text-sm sm:grid-cols-4">
+          <div>
+            <dt className="text-xs font-medium text-[var(--admin-text-muted)]">Date</dt>
+            <dd className="mt-0.5 font-mono text-[var(--admin-text-primary)]">{stop.date}</dd>
+          </div>
+          <div>
+            <dt className="text-xs font-medium text-[var(--admin-text-muted)]">Time</dt>
+            <dd className="mt-0.5 font-mono text-[var(--admin-text-primary)]">{stop.time}</dd>
+          </div>
+          {stop.address && (
+            <div className="col-span-2">
+              <dt className="text-xs font-medium text-[var(--admin-text-muted)]">Address</dt>
+              <dd className="mt-0.5 text-[var(--admin-text-primary)]">
+                {stop.address}
+                {stop.zip ? `, ${stop.zip}` : ""}
+              </dd>
+            </div>
+          )}
+          {stop.cutoff_time && (
+            <div className="col-span-2">
+              <dt className="text-xs font-medium text-[var(--admin-text-muted)]">Cutoff</dt>
+              <dd className="mt-0.5 text-[var(--admin-text-primary)]">
+                {new Date(stop.cutoff_time).toLocaleString()}
+              </dd>
+            </div>
+          )}
+        </dl>
+      </div>
+
+      <div className="flex justify-end">
+        {onDuplicate ? (
+          <button
+            type="button"
+            onClick={() => onDuplicate(stop.id)}
+            className="rounded-xl border border-[var(--admin-border)] bg-white px-3 py-1.5 text-xs font-medium text-[var(--admin-text-secondary)] hover:bg-stone-50"
+          >
+            Duplicate Stop
+          </button>
+        ) : (
+          <a
+            href={`/admin/stops/new?duplicate=${stop.id}`}
+            className="rounded-xl border border-[var(--admin-border)] bg-white px-3 py-1.5 text-xs font-medium text-[var(--admin-text-secondary)] hover:bg-stone-50"
+          >
+            Duplicate Stop
+          </a>
+        )}
+      </div>
+
+      <div className="rounded-xl border border-[var(--admin-border)] bg-white p-5">
+        <h3 className="text-sm font-semibold text-[var(--admin-text-primary)]">Edit Stop</h3>
+        <p className="mt-1 text-xs text-[var(--admin-text-muted)]">
+          Update stop details, location, and availability.
+        </p>
+        <div className="mt-4">
+          <StopEditForm
+            stop={{
+              id: stop.id,
+              city: stop.city,
+              state: stop.state,
+              date: stop.date,
+              time: stop.time,
+              location: stop.location,
+              slug: stop.slug,
+              active: stop.active,
+              brand_id: stop.brand_id,
+              address: stop.address,
+              zip: stop.zip,
+              cutoff_time: stop.cutoff_time,
+            }}
+            brands={brands}
+            onSaved={onSaved}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -27,9 +27,11 @@ type StopEditFormProps = {
    cutoff_time?: string | null;
  };
  brands: Brand[];
+  /** Optional callback fired after a successful save. */
+  onSaved?: () => void;
 };

-export default function StopEditForm({ stop, brands }: StopEditFormProps) {
+export default function StopEditForm({ stop, brands, onSaved }: StopEditFormProps) {
  const router = useRouter();
  const { success: showSuccess, error: showError } = useToast();
  const [saving, setSaving] = useState(false);
@@ -99,6 +101,7 @@ export default function StopEditForm({ stop, brands }: StopEditFormProps) {
    showSuccess("Stop updated", `${city}, ${state} has been saved`);
    setSaved(true);
    setSaving(false);
+    onSaved?.();
    router.refresh();
  }

@@ -1,6 +1,7 @@
 "use client";

-import { useState } from "react";
+import { useState, useMemo, useEffect } from "react";
+import Image from "next/image";
 import { logAuditEvent } from "@/actions/audit";

 type Product = {
@@ -8,12 +9,13 @@ type Product = {
  name: string;
  type: string;
  price: number;
+  image_url?: string | null;
 };

 type AssignedProduct = {
  id: string;
  product_id: string;
-  products: { name: string; type: string; price: number } | null;
+  products: { name: string; type: string; price: number; image_url?: string | null } | null;
 };

 type StopProductAssignmentProps = {
@@ -23,6 +25,20 @@ type StopProductAssignmentProps = {
  callerUid: string;
 };

+type Filter = "all" | "available" | "assigned";
+
+/* Helpers — monospace price + initial-letter avatar */
+const formatPrice = (n: number) =>
+  `$${Number(n ?? 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+
+const initialOf = (name: string) => (name?.trim()?.charAt(0) ?? "·").toUpperCase();
+
+const TYPE_LABEL: Record<string, string> = {
+  pickup: "Pickup",
+  wholesale: "Wholesale",
+  subscription: "Sub",
+};
+
 export default function StopProductAssignment({
  stopId,
  allProducts,
@@ -30,208 +46,397 @@ export default function StopProductAssignment({
  callerUid,
 }: StopProductAssignmentProps) {
  const [products, setProducts] = useState(assignedProducts);
-  const [selected, setSelected] = useState("");
-  const [assigning, setAssigning] = useState(false);
-  const [removing, setRemoving] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+  const [filter, setFilter] = useState<Filter>("all");
+  const [pendingId, setPendingId] = useState<string | null>(null);
+  const [removingId, setRemovingId] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

-  const assignedIds = new Set(products.map((p) => p.product_id));
-  const availableProducts = allProducts.filter((p) => !assignedIds.has(p.id));
+  const assignedIds = useMemo(
+    () => new Set(products.map((p) => p.product_id)),
+    [products]
+  );

-  async function handleAssign(e: React.FormEvent) {
-    e.preventDefault();
-    if (!selected) return;
+  // Counters for the filter chips
+  const counts = useMemo(() => {
+    const assignedCount = products.length;
+    const availableCount = allProducts.filter((p) => !assignedIds.has(p.id)).length;
+    return {
+      all: allProducts.length,
+      available: availableCount,
+      assigned: assignedCount,
+    };
+  }, [allProducts, products, assignedIds]);

-    setAssigning(true);
+  // Apply search + filter
+  const visibleProducts = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    return allProducts.filter((p) => {
+      const isAssigned = assignedIds.has(p.id);
+      if (filter === "available" && isAssigned) return false;
+      if (filter === "assigned" && !isAssigned) return false;
+      if (!q) return true;
+      return p.name.toLowerCase().includes(q) || p.type.toLowerCase().includes(q);
+    });
+  }, [allProducts, search, filter, assignedIds]);
+
+  async function assign(productId: string) {
+    if (!productId || assignedIds.has(productId) || pendingId) return;
+
+    const product = allProducts.find((p) => p.id === productId);
+    if (!product) return;
+
+    setPendingId(productId);
    setError(null);

-    // First run diagnostic to understand the actual state
-    const diagRes = await fetch(
-      `${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest/v1/rpc/debug_stop_product_assignment`,
-      {
-        method: "POST",
-        headers: {
-          apikey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          p_stop_id: stopId,
-          p_product_id: selected,
-          p_caller_uid: callerUid,
-        }),
+    try {
+      const res = await fetch(
+        `${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest/v1/rpc/assign_product_to_stop`,
+        {
+          method: "POST",
+          headers: {
+            apikey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            p_stop_id: stopId,
+            p_product_id: productId,
+            p_caller_uid: callerUid,
+          }),
+        }
+      );
+      const data = await res.json();
+
+      if (!res.ok || data.success === false) {
+        const errMsg = data?.error ?? data?.message ?? `HTTP ${res.status}`;
+        const errDetail = data?.details ?? data?.hint ?? data?.code ?? "";
+        setError(`Failed to assign: ${errMsg}${errDetail ? " — " + errDetail : ""}`);
+        setPendingId(null);
+        return;
      }
-    );
-    const diag = await diagRes.json();

-    // Now attempt the actual assignment
-    const res = await fetch(
-      `${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest/v1/rpc/assign_product_to_stop`,
-      {
-        method: "POST",
-        headers: {
-          apikey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          p_stop_id: stopId,
-          p_product_id: selected,
-          p_caller_uid: callerUid,
-        }),
-      }
-    );
+      // Optimistic insert: build the entry from the product we already have
+      // locally, keyed by the row id returned from the RPC. Use functional
+      // setState so concurrent calls compose correctly.
+      setProducts((prev) => {
+        if (prev.some((p) => p.product_id === productId)) return prev;
+        return [
+          ...prev,
+          {
+            id: data.id,
+            product_id: productId,
+            products: {
+              name: product.name,
+              type: product.type,
+              price: product.price,
+              image_url: product.image_url ?? null,
+            },
+          },
+        ];
+      });
+      setPendingId(null);

-    const data = await res.json();
-
-    if (!res.ok || data.success === false) {
-      const diagInfo = diag && typeof diag === 'object' && 'reason' in diag
-        ? `[${(diag as any).reason}] (admin_found=${(diag as any).admin_found}, role=${(diag as any).admin_role}, admin_brand=${(diag as any).admin_brand_id}, stop_brand=${(diag as any).stop_brand_id}, product_brand=${(diag as any).product_brand_id})`
-        : '';
-      const errMsg = data?.error ?? data?.message ?? `HTTP ${res.status}`;
-      const errDetail = data?.details ?? data?.hint ?? data?.code ?? '';
-      const fullError = diagInfo
-        ? `Failed to assign: ${errMsg} ${diagInfo}${errDetail ? ' | ' + errDetail : ''}`
-        : `Failed to assign: ${errMsg}${errDetail ? ' — ' + errDetail : ''}`;
-      setError(fullError);
-      setAssigning(false);
-      return;
+      logAuditEvent({
+        table_name: "product_stops",
+        record_id: data.id,
+        action: "INSERT",
+        old_data: null,
+        new_data: { stop_id: stopId, product_id: productId },
+        brand_id: null,
+      });
+    } catch {
+      setError("Network error while assigning product.");
+      setPendingId(null);
    }
-
-    // Refresh product list from get_stop_products RPC
-    const refreshRes = await fetch(
-      `${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest/v1/rpc/get_stop_products`,
-      {
-        method: "POST",
-        headers: {
-          apikey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ p_stop_id: stopId }),
-      }
-    );
-    const refreshData = await refreshRes.json();
-    setProducts(refreshData.products ?? []);
-    setSelected("");
-    setAssigning(false);
-
-    logAuditEvent({
-      table_name: "product_stops",
-      record_id: data.id,
-      action: "INSERT",
-      old_data: null,
-      new_data: { stop_id: stopId, product_id: selected },
-      brand_id: null,
-    });
  }

-  async function handleRemove(productId: string) {
+  async function remove(productId: string) {
+    if (removingId) return;
    const entry = products.find((p) => p.product_id === productId);
    if (!entry) return;

-    setRemoving(productId);
+    setRemovingId(productId);
    setError(null);

-    const res = await fetch(
-      `${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest/v1/rpc/unassign_product_from_stop`,
-      {
-        method: "POST",
-        headers: {
-          apikey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          p_stop_id: stopId,
-          p_product_id: productId,
-          p_caller_uid: callerUid,
-        }),
+    try {
+      const res = await fetch(
+        `${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest/v1/rpc/unassign_product_from_stop`,
+        {
+          method: "POST",
+          headers: {
+            apikey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            p_stop_id: stopId,
+            p_product_id: productId,
+            p_caller_uid: callerUid,
+          }),
+        }
+      );
+      const data = await res.json();
+
+      if (!res.ok || data.success === false) {
+        const errMsg = data?.error ?? data?.message ?? `HTTP ${res.status}`;
+        const errDetail = data?.details ?? data?.hint ?? data?.code ?? "";
+        setError(`Failed to remove: ${errMsg}${errDetail ? " — " + errDetail : ""}`);
+        setRemovingId(null);
+        return;
      }
-    );

-    const data = await res.json();
+      setProducts((prev) => prev.filter((p) => p.product_id !== productId));
+      setRemovingId(null);

-    if (!res.ok || data.success === false) {
-      const errMsg = data?.error ?? data?.message ?? `HTTP ${res.status}`;
-      const errDetail = data?.details ?? data?.hint ?? data?.code ?? '';
-      setError(`Failed to remove: ${errMsg}${errDetail ? ' — ' + errDetail : ''}`);
-      setRemoving(null);
-      return;
+      logAuditEvent({
+        table_name: "product_stops",
+        record_id: entry.id,
+        action: "DELETE",
+        old_data: { stop_id: stopId, product_id: productId },
+        new_data: null,
+        brand_id: null,
+      });
+    } catch {
+      setError("Network error while removing product.");
+      setRemovingId(null);
    }
-
-    setProducts(products.filter((p) => p.product_id !== productId));
-    setRemoving(null);
-
-    logAuditEvent({
-      table_name: "product_stops",
-      record_id: entry.id,
-      action: "DELETE",
-      old_data: { stop_id: stopId, product_id: productId },
-      new_data: null,
-      brand_id: null,
-    });
  }

+  function toggle(productId: string) {
+    if (assignedIds.has(productId)) {
+      remove(productId);
+    } else {
+      assign(productId);
+    }
+  }
+
+  function clearAll() {
+    if (!products.length || removingId || pendingId) return;
+    // Snapshot ids at click time, then remove each one sequentially so the
+    // server sees one request at a time.
+    const idsToRemove = products.map((p) => p.product_id);
+    (async () => {
+      for (const id of idsToRemove) {
+        // Stop if a per-item failure already surfaced an error
+        if (error) break;
+        await remove(id);
+      }
+    })();
+  }
+
+  // Keyboard: pressing / focuses search
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "/" && document.activeElement?.tagName !== "INPUT") {
+        e.preventDefault();
+        const el = document.getElementById("stop-product-search") as HTMLInputElement | null;
+        el?.focus();
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  const hasAssigned = products.length > 0;
+  const hasProducts = allProducts.length > 0;
+
  return (
-    <div className="space-y-6">
+    <div className="ha-picker">
      {error && (
-        <div className="rounded-xl bg-red-900/30 p-4 text-sm text-red-400">
-          {error}
+        <div
+          role="alert"
+          className="flex items-start gap-2 rounded-lg px-3 py-2 text-xs text-[var(--admin-danger)]"
+          style={{
+            background: "rgba(220, 38, 38, 0.06)",
+            border: "1px solid rgba(220, 38, 38, 0.15)",
+          }}
+        >
+          <svg className="h-3.5 w-3.5 mt-0.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 8v4M12 16h.01" strokeLinecap="round" />
+          </svg>
+          <span className="font-mono text-[11px]">{error}</span>
        </div>
      )}

-      {products.length > 0 ? (
-        <div className="space-y-2">
-          <p className="text-sm font-medium text-zinc-300">
-            Assigned Products ({products.length})
+      {/* Header: editorial title + search */}
+      <div className="ha-picker-header">
+        <div className="ha-picker-title">
+          <span className="ha-picker-title-num font-display">
+            {String(products.length).padStart(2, "0")}
+          </span>
+          <span className="ha-picker-title-label">
+            {products.length === 1 ? "Product on this stop" : "Products on this stop"}
+          </span>
+        </div>
+        <div className="ha-picker-search">
+          <span className="ha-picker-search-icon" aria-hidden="true">
+            <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+              <circle cx="11" cy="11" r="7" />
+              <path d="m21 21-4.3-4.3" strokeLinecap="round" />
+            </svg>
+          </span>
+          <input
+            id="stop-product-search"
+            type="search"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search products…"
+            className="ha-picker-search-input"
+            autoComplete="off"
+          />
+        </div>
+      </div>
+
+      {/* Filter chips */}
+      <div className="ha-picker-filterbar">
+        <button
+          type="button"
+          onClick={() => setFilter("all")}
+          className={`ha-picker-chip ${filter === "all" ? "ha-picker-chip--active" : ""}`}
+        >
+          All
+          <span className="ha-picker-chip-count">{counts.all}</span>
+        </button>
+        <button
+          type="button"
+          onClick={() => setFilter("available")}
+          className={`ha-picker-chip ${filter === "available" ? "ha-picker-chip--active" : ""}`}
+        >
+          Available
+          <span className="ha-picker-chip-count">{counts.available}</span>
+        </button>
+        <button
+          type="button"
+          onClick={() => setFilter("assigned")}
+          className={`ha-picker-chip ${filter === "assigned" ? "ha-picker-chip--active" : ""}`}
+        >
+          On this stop
+          <span className="ha-picker-chip-count">{counts.assigned}</span>
+        </button>
+        <span className="ha-modal-footer-hint ml-auto">
+          Press <kbd>/</kbd> to search
+        </span>
+      </div>
+
+      {/* Product grid */}
+      {!hasProducts ? (
+        <div className="ha-picker-empty">
+          <p className="ha-picker-empty-mark">No products yet</p>
+          <p className="ha-picker-empty-text">
+            Create products in the catalog first, then come back here to assign them to this stop.
+          </p>
+        </div>
+      ) : visibleProducts.length === 0 ? (
+        <div className="ha-picker-empty">
+          <p className="ha-picker-empty-mark">
+            {filter === "assigned" ? "Nothing assigned" : "No matches"}
+          </p>
+          <p className="ha-picker-empty-text">
+            {search.trim()
+              ? `No products match "${search.trim()}". Try a different term.`
+              : filter === "assigned"
+                ? "This stop has no products assigned yet. Click a card in the All tab to add one."
+                : "All products are already assigned to this stop."}
          </p>
-          {products.map((ap) => (
-            <div
-              key={ap.id}
-              className="flex items-center justify-between rounded-xl border border-zinc-800 bg-slate-50 px-4 py-3"
-            >
-              <div>
-                <p className="font-medium text-zinc-100">
-                  {ap.products?.name ?? "Unknown"}
-                </p>
-                <p className="text-xs text-zinc-500">
-                  {ap.products?.type} ·{" "}
-                  ${Number(ap.products?.price ?? 0).toFixed(2)}
-                </p>
-              </div>
-              <button
-                onClick={() => handleRemove(ap.product_id)}
-                disabled={removing === ap.product_id}
-                className="shrink-0 rounded-lg px-3 py-1 text-sm font-medium text-red-400 hover:bg-red-900/30 disabled:opacity-50"
-              >
-                {removing === ap.product_id ? "..." : "Remove"}
-              </button>
-            </div>
-          ))}
        </div>
      ) : (
-        <p className="text-sm text-zinc-500">No products assigned yet.</p>
+        <div className="ha-picker-grid">
+          {visibleProducts.map((product) => {
+            const isAssigned = assignedIds.has(product.id);
+            const isBusy = pendingId === product.id || removingId === product.id;
+            return (
+              <button
+                key={product.id}
+                type="button"
+                onClick={() => !isBusy && toggle(product.id)}
+                disabled={isBusy}
+                aria-pressed={isAssigned}
+                className={`ha-product-card ${isAssigned ? "ha-product-card--assigned" : ""} ${
+                  isBusy ? "ha-product-card--disabled" : ""
+                }`}
+              >
+                {/* Image / Initial */}
+                <span className="ha-product-card-image">
+                  {product.image_url ? (
+                    <Image
+                      src={product.image_url}
+                      alt={product.name}
+                      fill
+                      sizes="48px"
+                      style={{ objectFit: "cover" }}
+                      onError={(e) => {
+                        (e.target as HTMLImageElement).style.display = "none";
+                      }}
+                    />
+                  ) : (
+                    initialOf(product.name)
+                  )}
+                </span>
+
+                {/* Body */}
+                <span className="ha-product-card-body">
+                  <span className="ha-product-card-name">{product.name}</span>
+                  <span className="ha-product-card-meta">
+                    <span className="ha-product-card-type">{TYPE_LABEL[product.type] ?? product.type}</span>
+                    <span className="ha-product-card-price">{formatPrice(product.price)}</span>
+                  </span>
+                </span>
+
+                {/* Status icon */}
+                {isBusy ? (
+                  <span className="ha-product-card-plus" aria-hidden="true">
+                    <svg className="h-3 w-3 animate-spin" viewBox="0 0 24 24" fill="none">
+                      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeOpacity="0.25" strokeWidth="3" />
+                      <path d="M22 12a10 10 0 0 0-10-10" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+                    </svg>
+                  </span>
+                ) : isAssigned ? (
+                  <>
+                    <span className="ha-product-card-check" aria-hidden="true">
+                      <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={3}>
+                        <path d="M5 12l5 5L20 7" strokeLinecap="round" strokeLinejoin="round" />
+                      </svg>
+                    </span>
+                    <span className="ha-product-card-remove" aria-hidden="true">
+                      <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
+                        <path d="M6 6l12 12M6 18 18 6" strokeLinecap="round" />
+                      </svg>
+                    </span>
+                  </>
+                ) : (
+                  <span className="ha-product-card-plus" aria-hidden="true">
+                    <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
+                      <path d="M12 5v14M5 12h14" strokeLinecap="round" />
+                    </svg>
+                  </span>
+                )}
+              </button>
+            );
+          })}
+        </div>
      )}

-      {availableProducts.length > 0 && (
-        <form onSubmit={handleAssign} className="flex gap-3">
-          <select
-            value={selected}
-            onChange={(e) => setSelected(e.target.value)}
-            className="flex-1 rounded-xl border border-zinc-600 bg-zinc-900 px-4 py-3 text-base outline-none focus:border-slate-900"
-          >
-            <option value="">Select a product...</option>
-            {availableProducts.map((p) => (
-              <option key={p.id} value={p.id}>
-                {p.name} ({p.type})
-              </option>
-            ))}
-          </select>
+      {/* Summary footer when assigned items exist */}
+      {hasAssigned && (
+        <div className="ha-picker-summary">
+          <span className="ha-picker-summary-left">
+            <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
+              <path d="M5 12l5 5L20 7" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+            <span>
+              <span className="ha-picker-summary-count">{products.length}</span>{" "}
+              {products.length === 1 ? "product is" : "products are"} live at this stop
+            </span>
+          </span>
          <button
-            type="submit"
-            disabled={!selected || assigning}
-            className="rounded-xl bg-slate-900 px-5 py-3 font-medium text-white disabled:opacity-50"
+            type="button"
+            onClick={clearAll}
+            disabled={!!removingId}
+            className="ha-picker-summary-clear"
          >
-            {assigning ? "..." : "Assign"}
+            Remove all
          </button>
-        </form>
+        </div>
      )}
    </div>
  );
@@ -1,11 +1,21 @@
 "use client";
 /* eslint-disable react-hooks/set-state-in-effect */

-import React, { useState, useTransition, useEffect } from "react";
+import React, { useState, useTransition, useEffect, useMemo } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { publishStop } from "@/actions/stops";
-import { AdminSearchInput, AdminFilterTabs, AdminButton, AdminIconButton, useToast, Skeleton } from "@/components/admin/design-system";
+import {
+  AdminSearchInput,
+  AdminFilterTabs,
+  AdminButton,
+  AdminIconButton,
+  useToast,
+  Skeleton,
+} from "@/components/admin/design-system";
+import ScheduleImportModal from "@/components/admin/ScheduleImportModal";
+import AddStopModal from "@/components/admin/AddStopModal";
+import StopDetailModal from "@/components/admin/StopDetailModal";

 type Stop = {
  id: string;
@@ -18,14 +28,27 @@ type Stop = {
  deleted_at?: string | null;
  brand_id: string;
  status?: string;
-  brands: { name: string } | { name: string }[];
+  address?: string | null;
+  brands: { name: string } | { name: string }[] | null;
 };

 type Props = {
  stops: Stop[];
+  /**
+   * Hide the internal search/filter bar at the top of the table. Use when
+   * the parent component already renders shared filters (e.g. StopsViewClient).
+   */
+  hideInternalFilterBar?: boolean;
 };

-export default function StopTableClient({ stops }: Props) {
+const TAB_NUMERIC: Record<"all" | "active" | "inactive" | "draft", "all" | "active" | "inactive" | "draft"> = {
+  all: "all",
+  active: "active",
+  inactive: "inactive",
+  draft: "draft",
+};
+
+export default function StopTableClient({ stops, hideInternalFilterBar = false }: Props) {
  const router = useRouter();
  const { success: showSuccess, error: showError } = useToast();
  const [, startTransition] = useTransition();
@@ -36,57 +59,66 @@ export default function StopTableClient({ stops }: Props) {
  const [isLoading, setIsLoading] = useState(false);
  const [selectedStops, setSelectedStops] = useState<Set<string>>(new Set());
  const [bulkPublishing, setBulkPublishing] = useState(false);
+  const [showImport, setShowImport] = useState(false);
+  const [showAdd, setShowAdd] = useState(false);
+  const [openStopId, setOpenStopId] = useState<string | null>(null);
  const PAGE_SIZE = 50;

-  // Simulate loading when filters change
  useEffect(() => {
    setIsLoading(true);
-    const timer = setTimeout(() => setIsLoading(false), 300);
+    const timer = setTimeout(() => setIsLoading(false), 220);
    return () => clearTimeout(timer);
  }, [page, statusFilter, search]);

-  const filtered = stops.filter((s) => {
-    const matchesSearch =
-      !search ||
-      s.city.toLowerCase().includes(search.toLowerCase()) ||
-      s.location.toLowerCase().includes(search.toLowerCase());
-    const matchesStatus =
-      statusFilter === "all" ||
-      (statusFilter === "active" && s.active && s.status !== "draft") ||
-      (statusFilter === "inactive" && !s.active && s.status !== "draft") ||
-      (statusFilter === "draft" && s.status === "draft");
-    return matchesSearch && matchesStatus;
-  });
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    return stops.filter((s) => {
+      const matchesSearch =
+        !q ||
+        s.city.toLowerCase().includes(q) ||
+        s.location.toLowerCase().includes(q);
+      const matchesStatus =
+        statusFilter === "all" ||
+        (statusFilter === "active" && s.active && s.status !== "draft") ||
+        (statusFilter === "inactive" && !s.active && s.status !== "draft") ||
+        (statusFilter === "draft" && s.status === "draft");
+      return matchesSearch && matchesStatus;
+    });
+  }, [stops, search, statusFilter]);

-  const statusCounts = {
-    all: stops.length,
-    active: stops.filter(s => s.active && s.status !== "draft").length,
-    inactive: stops.filter(s => !s.active && s.status !== "draft").length,
-    draft: stops.filter(s => s.status === "draft").length,
-  };
+  const statusCounts = useMemo(
+    () => ({
+      all: stops.length,
+      active: stops.filter((s) => s.active && s.status !== "draft").length,
+      inactive: stops.filter((s) => !s.active && s.status !== "draft").length,
+      draft: stops.filter((s) => s.status === "draft").length,
+    }),
+    [stops]
+  );

-  const tabs = [
-    { value: "all", label: "All", count: statusCounts.all },
-    { value: "active", label: "Active", count: statusCounts.active },
-    { value: "inactive", label: "Inactive", count: statusCounts.inactive },
-    { value: "draft", label: "Draft", count: statusCounts.draft },
-  ];
+  const tabs = useMemo(
+    () => [
+      { value: "all", label: "All", count: statusCounts.all },
+      { value: "active", label: "Active", count: statusCounts.active },
+      { value: "inactive", label: "Inactive", count: statusCounts.inactive },
+      { value: "draft", label: "Draft", count: statusCounts.draft },
+    ],
+    [statusCounts]
+  );

-  const totalPages = Math.ceil(filtered.length / PAGE_SIZE);
+  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
  const paginatedStops = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
-  const draftStops = stops.filter(s => s.status === "draft" && s.active);

-  // Bulk selection
  const toggleSelectAll = () => {
    if (selectedStops.size === paginatedStops.length) {
      setSelectedStops(new Set());
    } else {
-      setSelectedStops(new Set(paginatedStops.map(s => s.id)));
+      setSelectedStops(new Set(paginatedStops.map((s) => s.id)));
    }
  };

  const toggleStopSelection = (stopId: string) => {
-    setSelectedStops(prev => {
+    setSelectedStops((prev) => {
      const next = new Set(prev);
      if (next.has(stopId)) {
        next.delete(stopId);
@@ -99,13 +131,11 @@ export default function StopTableClient({ stops }: Props) {

  async function handleBulkPublish() {
    if (selectedStops.size === 0) return;
-    
    setBulkPublishing(true);
    let successCount = 0;
    let failCount = 0;
-    
    for (const stopId of selectedStops) {
-      const stop = stops.find(s => s.id === stopId);
+      const stop = stops.find((s) => s.id === stopId);
      if (stop && stop.status === "draft") {
        const result = await publishStop(stopId, stop.brand_id);
        if (result.success) {
@@ -115,83 +145,125 @@ export default function StopTableClient({ stops }: Props) {
        }
      }
    }
-    
    setBulkPublishing(false);
    setSelectedStops(new Set());
-    
    if (failCount === 0) {
-      showSuccess(`${successCount} stop${successCount !== 1 ? 's' : ''} published`);
+      showSuccess(`${successCount} stop${successCount !== 1 ? "s" : ""} published`);
    } else {
      showError("Some stops failed", `${successCount} succeeded, ${failCount} failed`);
    }
-    
    startTransition(() => router.refresh());
  }

  function handleDeleted() {
    setDeleteError(null);
-    startTransition(() => {
-      router.refresh();
-    });
+    startTransition(() => router.refresh());
+  }
+
+  function refresh() {
+    startTransition(() => router.refresh());
  }

  return (
    <>
      {/* Filter bar */}
-      <div className="border-b border-[var(--admin-border)] px-5 py-3 flex gap-4 flex-wrap items-center">
+      {!hideInternalFilterBar && (
+      <div className="flex flex-wrap items-center gap-2.5 px-4 py-3 border-b border-[var(--admin-border)]">
        <AdminSearchInput
-          placeholder="Search stops..."
+          placeholder="Search by city or venue…"
          value={search}
-          onChange={(e) => { setSearch(e.target.value); setPage(0); }}
-          onClear={() => { setSearch(""); setPage(0); }}
-          showClear={true}
-          className="flex-1 min-w-48 max-w-64"
+          onChange={(e) => {
+            setSearch(e.target.value);
+            setPage(0);
+          }}
+          onClear={() => {
+            setSearch("");
+            setPage(0);
+          }}
+          showClear
+          className="flex-1 min-w-[180px] max-w-[280px]"
        />
        <AdminFilterTabs
          activeTab={statusFilter}
-          onTabChange={(value) => { setStatusFilter(value as typeof statusFilter); setPage(0); }}
+          onTabChange={(value) => {
+            setStatusFilter(TAB_NUMERIC[value as keyof typeof TAB_NUMERIC] ?? "all");
+            setPage(0);
+          }}
          tabs={tabs}
          size="sm"
-          showCounts={true}
+          showCounts
        />
-        <span className="text-xs text-[var(--admin-text-muted)] ml-auto">{filtered.length} stops</span>
+        <span className="text-xs text-[var(--admin-text-muted)] ml-auto tabular-nums">
+          {filtered.length} stop{filtered.length !== 1 ? "s" : ""}
+        </span>
        {totalPages > 1 && (
          <div className="flex items-center gap-1">
            <AdminIconButton
              variant="secondary"
              size="sm"
              label="Previous page"
-              onClick={() => setPage(p => Math.max(0, p - 1))}
+              onClick={() => setPage((p) => Math.max(0, p - 1))}
              disabled={page === 0 || isLoading}
              className="!rounded-lg border border-[var(--admin-border)]"
            >
-              <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" /></svg>
+              <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+              </svg>
            </AdminIconButton>
-            <span className="text-xs text-[var(--admin-text-muted)] px-1">{page + 1}/{totalPages}</span>
+            <span className="text-xs text-[var(--admin-text-muted)] px-1 tabular-nums">
+              {page + 1}/{totalPages}
+            </span>
            <AdminIconButton
              variant="secondary"
              size="sm"
              label="Next page"
-              onClick={() => setPage(p => Math.min(totalPages - 1, p + 1))}
+              onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
              disabled={page >= totalPages - 1 || isLoading}
              className="!rounded-lg border border-[var(--admin-border)]"
            >
-              <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" /></svg>
+              <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+              </svg>
            </AdminIconButton>
          </div>
        )}
+        <AdminButton
+          variant="secondary"
+          size="sm"
+          onClick={() => setShowImport(true)}
+          icon={
+            <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+            </svg>
+          }
+        >
+          Upload Schedule
+        </AdminButton>
+        <AdminButton
+          variant="primary"
+          size="sm"
+          onClick={() => setShowAdd(true)}
+          icon={
+            <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+            </svg>
+          }
+        >
+          Add Stop
+        </AdminButton>
      </div>
+      )}

      {/* Bulk actions bar */}
      {selectedStops.size > 0 && (
-        <div className="mx-5 my-3 flex items-center justify-between rounded-xl border border-[var(--admin-accent)] bg-[var(--admin-accent-light)] px-4 py-3">
+        <div className="mx-4 my-3 flex items-center justify-between rounded-xl border border-emerald-200 bg-emerald-50/60 px-4 py-2.5">
          <div className="flex items-center gap-3">
-            <span className="text-sm font-semibold text-[var(--admin-accent-text)]">
-              {selectedStops.size} stop{selectedStops.size !== 1 ? 's' : ''} selected
+            <span className="text-sm font-semibold text-emerald-800 tabular-nums">
+              {selectedStops.size} stop{selectedStops.size !== 1 ? "s" : ""} selected
            </span>
            <button
              onClick={() => setSelectedStops(new Set())}
-              className="text-xs text-[var(--admin-text-muted)] hover:text-[var(--admin-text-secondary)]"
+              className="text-xs text-stone-500 hover:text-stone-700"
            >
              Clear
            </button>
@@ -209,7 +281,7 @@ export default function StopTableClient({ stops }: Props) {

      {/* Delete error */}
      {deleteError && (
-        <div className="mx-5 my-3 rounded-lg border border-[var(--admin-danger)]/30 bg-[var(--admin-danger)]/10 px-4 py-3 text-sm text-[var(--admin-danger)]">
+        <div className="mx-4 my-3 rounded-lg border border-red-500/30 bg-red-50 px-4 py-2.5 text-sm text-red-700">
          {deleteError}{" "}
          <button onClick={() => setDeleteError(null)} className="underline hover:no-underline">
            Dismiss
@@ -219,45 +291,59 @@ export default function StopTableClient({ stops }: Props) {

      {/* Table */}
      <table className="w-full text-left text-sm">
-        <thead className="bg-[var(--admin-bg-subtle)] text-[var(--admin-text-muted)]">
+        <thead className="bg-[var(--admin-bg-subtle)]/40 text-[var(--admin-text-muted)] text-xs uppercase tracking-wide">
          <tr>
-            <th className="w-10 px-5 py-4">
+            <th className="w-10 px-4 py-3">
              <input
                type="checkbox"
                checked={selectedStops.size === paginatedStops.length && paginatedStops.length > 0}
                onChange={toggleSelectAll}
-                className="h-4 w-4 rounded border-stone-300 text-[var(--admin-accent)] focus:ring-[var(--admin-accent)] cursor-pointer"
+                className="h-4 w-4 rounded border-stone-300 text-emerald-600 focus:ring-emerald-500 cursor-pointer"
+                aria-label="Select all"
              />
            </th>
-            <th className="px-5 py-4 font-semibold">City</th>
-            <th className="px-5 py-4 font-semibold">Location</th>
-            <th className="px-5 py-4 font-semibold">Date</th>
-            <th className="px-5 py-4 font-semibold">Time</th>
-            <th className="px-5 py-4 font-semibold">Brand</th>
-            <th className="px-5 py-4 font-semibold">Status</th>
-            <th className="px-5 py-4 font-semibold" />
+            <th className="px-4 py-3 font-semibold">When</th>
+            <th className="px-4 py-3 font-semibold">Where</th>
+            <th className="px-4 py-3 font-semibold">Venue</th>
+            <th className="px-4 py-3 font-semibold">Status</th>
+            <th className="w-12 px-4 py-3" />
          </tr>
        </thead>
        <tbody className="divide-y divide-[var(--admin-border)]">
          {isLoading ? (
            Array.from({ length: 8 }).map((_, i) => (
-              <tr key={i} className="hover:bg-[var(--admin-bg-subtle)] transition-colors">
-                <td className="px-5 py-4"><Skeleton variant="rect" className="h-5 w-5" /></td>
-                <td className="px-5 py-4"><Skeleton variant="text" className="w-24 h-4" /></td>
-                <td className="px-5 py-4"><Skeleton variant="text" className="w-32 h-4" /></td>
-                <td className="px-5 py-4"><Skeleton variant="text" className="w-16 h-4" /></td>
-                <td className="px-5 py-4"><Skeleton variant="text" className="w-16 h-4" /></td>
-                <td className="px-5 py-4"><Skeleton variant="text" className="w-20 h-4" /></td>
-                <td className="px-5 py-4"><Skeleton variant="rect" className="w-16 h-6 rounded-full" /></td>
-                <td className="px-5 py-4"><Skeleton variant="rect" className="w-12 h-6" /></td>
+              <tr key={i}>
+                <td className="px-4 py-3.5"><Skeleton variant="rect" className="h-4 w-4" /></td>
+                <td className="px-4 py-3.5"><Skeleton variant="text" className="w-24 h-4" /></td>
+                <td className="px-4 py-3.5"><Skeleton variant="text" className="w-32 h-4" /></td>
+                <td className="px-4 py-3.5"><Skeleton variant="text" className="w-40 h-4" /></td>
+                <td className="px-4 py-3.5"><Skeleton variant="rect" className="w-16 h-5 rounded-full" /></td>
+                <td className="px-4 py-3.5"><Skeleton variant="rect" className="w-6 h-6" /></td>
              </tr>
            ))
          ) : filtered.length === 0 ? (
            <tr>
-              <td colSpan={7} className="px-5 py-10 text-center text-sm text-[var(--admin-text-muted)]">
-                {search || statusFilter !== "all"
-                  ? "No stops match your search."
-                  : "No stops found. Create one to get started."}
+              <td colSpan={6} className="px-4 py-14 text-center">
+                <div className="flex flex-col items-center gap-3 text-[var(--admin-text-muted)]">
+                  <div className="h-12 w-12 rounded-full bg-stone-100 flex items-center justify-center">
+                    <svg className="h-6 w-6 text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <p className="text-sm font-semibold text-stone-700">
+                      {search || statusFilter !== "all"
+                        ? "No stops match your filters"
+                        : "No stops yet"}
+                    </p>
+                    <p className="mt-0.5 text-xs text-stone-500">
+                      {search || statusFilter !== "all"
+                        ? "Try a different search or clear the filters above."
+                        : "Use the buttons above to upload a schedule or add your first stop."}
+                    </p>
+                  </div>
+                </div>
              </td>
            </tr>
          ) : (
@@ -268,52 +354,101 @@ export default function StopTableClient({ stops }: Props) {
                onDeleted={handleDeleted}
                onDeleteError={setDeleteError}
                isSelected={selectedStops.has(stop.id)}
-                onToggleSelect={() => toggleStopSelection(stop.id)}
+                onToggleSelect={(e) => {
+                  e.stopPropagation();
+                  toggleStopSelection(stop.id);
+                }}
+                onOpen={() => setOpenStopId(stop.id)}
              />
            ))
          )}
        </tbody>
      </table>
+
+      {showImport && (
+        <ScheduleImportModal
+          brandId={stops[0]?.brand_id ?? ""}
+          onClose={() => setShowImport(false)}
+          onComplete={refresh}
+        />
+      )}
+
+      <AddStopModal
+        isOpen={showAdd}
+        onClose={() => setShowAdd(false)}
+        brandId={stops[0]?.brand_id ?? ""}
+        onSuccess={refresh}
+      />
+
+      {openStopId && (
+        <StopDetailModal
+          stopId={openStopId}
+          onClose={() => setOpenStopId(null)}
+        />
+      )}
    </>
  );
 }

+function formatDate(iso: string): { date: string; weekday: string } {
+  // Stop date is stored as YYYY-MM-DD; parse without TZ shift
+  const [y, m, d] = iso.split("-").map((s) => parseInt(s, 10));
+  if (!y || !m || !d) return { date: iso, weekday: "" };
+  const dt = new Date(y, m - 1, d);
+  const weekday = dt.toLocaleDateString("en-US", { weekday: "short" });
+  const month = dt.toLocaleDateString("en-US", { month: "short" });
+  return { date: `${month} ${d}`, weekday };
+}
+
+function formatTime(t: string): string {
+  // Stored as HH:MM (24h). Display as 10:00 AM.
+  if (!t) return "";
+  const [hStr, mStr] = t.split(":");
+  const h = parseInt(hStr, 10);
+  if (Number.isNaN(h)) return t;
+  const period = h >= 12 ? "PM" : "AM";
+  const hh = h === 0 ? 12 : h > 12 ? h - 12 : h;
+  return `${hh}:${mStr} ${period}`;
+}
+
 function StopRowBase({
  stop,
  onDeleted,
  onDeleteError,
  isSelected,
  onToggleSelect,
+  onOpen,
 }: {
  stop: Stop;
  onDeleted: () => void;
  onDeleteError: (msg: string) => void;
  isSelected: boolean;
-  onToggleSelect: () => void;
+  onToggleSelect: (e: React.MouseEvent) => void;
+  onOpen: () => void;
 }) {
-  const router = useRouter();
  const { success: showSuccess, error: showError } = useToast();
-  const [, startTransition] = useTransition();
  const [openMenu, setOpenMenu] = useState<string | null>(null);
  const [deletingId, setDeletingId] = useState<string | null>(null);
  const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
  const [publishingId, setPublishingId] = useState<string | null>(null);

-  async function handlePublish(stopId: string) {
-    setPublishingId(stopId);
-    setOpenMenu(null);
-    const result = await publishStop(stopId, stop.brand_id);
+  const { date, weekday } = formatDate(stop.date);
+  const time = formatTime(stop.time);
+
+  async function handlePublish() {
+    setPublishingId(stop.id);
+    const result = await publishStop(stop.id, stop.brand_id);
    setPublishingId(null);
    if (result.success) {
      showSuccess("Stop published", "The stop is now visible on the storefront");
-      startTransition(() => router.refresh());
+      onDeleted();
    } else {
      showError("Failed to publish", result.error ?? "Please try again");
    }
  }

-  async function handleDelete(stopId: string) {
-    setDeletingId(stopId);
+  async function handleDelete() {
+    setDeletingId(stop.id);
    const res = await fetch(
      `${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest/v1/rpc/delete_stop`,
      {
@@ -322,7 +457,7 @@ function StopRowBase({
          apikey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
          "Content-Type": "application/json",
        },
-        body: JSON.stringify({ p_stop_id: stopId, p_brand_id: stop.brand_id }),
+        body: JSON.stringify({ p_stop_id: stop.id, p_brand_id: stop.brand_id }),
      }
    );
    const data = await res.json();
@@ -338,69 +473,88 @@ function StopRowBase({
  }

  return (
-    <tr className={`hover:bg-[var(--admin-bg-subtle)] transition-colors relative ${isSelected ? 'bg-[var(--admin-accent-light)]/30' : ''}`}>
-      <td className="px-5 py-4">
+    <tr
+      onClick={onOpen}
+      className={`group cursor-pointer transition-colors ${isSelected ? "bg-emerald-50/60" : "hover:bg-[var(--admin-bg-subtle)]/60"}`}
+    >
+      <td className="px-4 py-3.5" onClick={(e) => e.stopPropagation()}>
        <input
          type="checkbox"
          checked={isSelected}
-          onChange={onToggleSelect}
-          className="h-4 w-4 rounded border-stone-300 text-[var(--admin-accent)] focus:ring-[var(--admin-accent)] cursor-pointer"
+          onChange={() => {}}
+          onClick={onToggleSelect}
+          className="h-4 w-4 rounded border-stone-300 text-emerald-600 focus:ring-emerald-500 cursor-pointer"
+          aria-label={`Select stop in ${stop.city}`}
        />
      </td>
-      <td className="px-5 py-4">
-        <Link
-          href={`/admin/stops/${stop.id}`}
-          className="font-medium text-[var(--admin-text-primary)] hover:text-[var(--admin-accent)] transition-colors"
-        >
-          {stop.city}, {stop.state}
-        </Link>
+
+      <td className="px-4 py-3.5">
+        <div className="flex flex-col leading-tight">
+          <span className="font-semibold text-[var(--admin-text-primary)] tabular-nums">{date}</span>
+          <span className="text-[11px] text-[var(--admin-text-muted)] tabular-nums">
+            {weekday} {time && `· ${time}`}
+          </span>
+        </div>
      </td>

-      <td className="px-5 py-4 text-[var(--admin-text-secondary)]">{stop.location}</td>
-
-      <td className="px-5 py-4 font-mono text-[var(--admin-text-muted)] text-xs">{stop.date}</td>
-
-      <td className="px-5 py-4 font-mono text-[var(--admin-text-muted)] text-xs">{stop.time}</td>
-
-      <td className="px-5 py-4 text-[var(--admin-text-secondary)]">
-        {Array.isArray(stop.brands)
-          ? stop.brands[0]?.name
-          : stop.brands?.name}
+      <td className="px-4 py-3.5">
+        <div className="flex flex-col leading-tight">
+          <span className="font-semibold text-[var(--admin-text-primary)]">{stop.city}</span>
+          <span className="text-[11px] text-[var(--admin-text-muted)] tabular-nums">{stop.state}</span>
+        </div>
      </td>

-      <td className="px-5 py-4">
+      <td className="px-4 py-3.5">
+        <div className="flex flex-col leading-tight">
+          <span className="text-[var(--admin-text-secondary)]">{stop.location}</span>
+          {stop.address && (
+            <span className="text-[11px] text-[var(--admin-text-muted)] truncate max-w-[260px]">
+              {stop.address}
+            </span>
+          )}
+        </div>
+      </td>
+
+      <td className="px-4 py-3.5">
        <span
-          className={`rounded-full px-3 py-1 text-xs font-medium ${
+          className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold ${
            stop.status === "draft"
-              ? "bg-amber-100 text-amber-700 border border-amber-200"
+              ? "bg-amber-50 text-amber-700 border border-amber-200"
              : stop.active
-              ? "bg-[var(--admin-accent-light)] text-[var(--admin-accent-text)] border border-[var(--admin-accent)]"
-              : "bg-[var(--admin-bg-subtle)] text-[var(--admin-text-muted)] border border-[var(--admin-border)]"
+                ? "bg-emerald-50 text-emerald-700 border border-emerald-200"
+                : "bg-stone-100 text-stone-500 border border-stone-200"
          }`}
        >
+          <span
+            className={`h-1.5 w-1.5 rounded-full ${
+              stop.status === "draft"
+                ? "bg-amber-500"
+                : stop.active
+                  ? "bg-emerald-500"
+                  : "bg-stone-400"
+            }`}
+          />
          {stop.status === "draft" ? "Draft" : stop.active ? "Active" : "Inactive"}
        </span>
      </td>

-      <td className="px-5 py-4 text-right">
-        <div className="relative inline-flex items-center justify-end gap-2">
-          <Link
-            href={`/admin/stops/${stop.id}`}
-            className="rounded-lg px-3 py-1.5 text-xs font-medium text-[var(--admin-text-secondary)] hover:text-[var(--admin-text-primary)] hover:bg-[var(--admin-bg-subtle)] transition-colors"
-          >
-            Edit
-          </Link>
+      <td className="px-4 py-3.5 text-right" onClick={(e) => e.stopPropagation()}>
+        <div className="relative inline-flex items-center justify-end gap-1">
          <AdminIconButton
            variant="ghost"
            size="sm"
            label="More options"
            onClick={(e) => {
              e.preventDefault();
+              e.stopPropagation();
              setOpenMenu(openMenu === stop.id ? null : stop.id);
            }}
+            className="opacity-60 group-hover:opacity-100"
          >
            <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
-              <circle cx="10" cy="4" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="10" cy="16" r="1.5"/>
+              <circle cx="10" cy="4" r="1.5" />
+              <circle cx="10" cy="10" r="1.5" />
+              <circle cx="10" cy="16" r="1.5" />
            </svg>
          </AdminIconButton>

@@ -408,36 +562,42 @@ function StopRowBase({
            <>
              <div
                className="fixed inset-0 z-10"
-                onClick={() => { setOpenMenu(null); setConfirmDelete(null); }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setOpenMenu(null);
+                  setConfirmDelete(null);
+                }}
              />
              <div className="absolute right-0 top-full mt-1 z-20 w-44 rounded-xl bg-white border border-[var(--admin-border)] shadow-xl overflow-hidden">
                {stop.status === "draft" && (
-                  <AdminButton
-                    variant="ghost"
-                    size="sm"
-                    fullWidth
-                    onClick={() => handlePublish(stop.id)}
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handlePublish();
+                    }}
                    disabled={publishingId === stop.id}
-                    className="!justify-start !text-[var(--admin-accent)] hover:!bg-[var(--admin-accent-light)]"
+                    className="w-full text-left px-4 py-2.5 text-sm font-medium text-emerald-700 hover:bg-emerald-50 transition-colors disabled:opacity-50"
                  >
-                    {publishingId === stop.id ? "Publishing..." : "Publish"}
-                  </AdminButton>
+                    {publishingId === stop.id ? "Publishing…" : "Publish"}
+                  </button>
                )}
-                <a
+                <Link
                  href={`/admin/stops/new?duplicate=${stop.id}`}
-                  className="flex items-center gap-2 px-4 py-2.5 text-sm text-[var(--admin-text-secondary)] hover:bg-[var(--admin-bg-subtle)] transition-colors"
+                  onClick={(e) => e.stopPropagation()}
+                  className="flex items-center px-4 py-2.5 text-sm text-[var(--admin-text-secondary)] hover:bg-[var(--admin-bg-subtle)] transition-colors"
                >
                  Duplicate
-                </a>
-                <AdminButton
-                  variant="ghost"
-                  size="sm"
-                  fullWidth
-                  onClick={() => { setOpenMenu(null); setConfirmDelete(stop.id); }}
-                  className="!justify-start !text-[var(--admin-danger)] hover:!bg-[var(--admin-danger)]/10"
+                </Link>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setOpenMenu(null);
+                    setConfirmDelete(stop.id);
+                  }}
+                  className="w-full text-left px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 transition-colors"
                >
                  Delete
-                </AdminButton>
+                </button>
              </div>
            </>
          )}
@@ -446,7 +606,11 @@ function StopRowBase({
            <>
              <div
                className="fixed inset-0 z-30"
-                onClick={() => { setConfirmDelete(null); setOpenMenu(null); }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setConfirmDelete(null);
+                  setOpenMenu(null);
+                }}
              />
              <div className="absolute right-0 top-full mt-1 z-40 w-72 rounded-xl bg-white border border-[var(--admin-border)] shadow-xl p-4">
                <p className="text-sm font-semibold text-[var(--admin-text-primary)]">
@@ -455,22 +619,29 @@ function StopRowBase({
                <p className="mt-1.5 text-xs text-[var(--admin-text-muted)]">
                  This will remove the stop. If it has active orders, you must resolve those first.
                </p>
-                <div className="mt-4 flex gap-2">
+                <div className="mt-4 flex gap-2 justify-end">
                  <AdminButton
                    variant="secondary"
                    size="sm"
-                    onClick={() => { setConfirmDelete(null); setOpenMenu(null); }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setConfirmDelete(null);
+                      setOpenMenu(null);
+                    }}
                  >
                    Cancel
                  </AdminButton>
                  <AdminButton
                    variant="danger"
                    size="sm"
-                    onClick={() => handleDelete(stop.id)}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleDelete();
+                    }}
                    disabled={deletingId === stop.id}
                    isLoading={deletingId === stop.id}
                  >
-                    {deletingId === stop.id ? "..." : "Delete"}
+                    {deletingId === stop.id ? "Deleting…" : "Delete"}
                  </AdminButton>
                </div>
              </div>
--- a/Show More
+++ b/Show More