Refactor: move public storefront stop data to server-side + parallel agent work
Server-side / caching refactor (Grok): - New RPC get_public_stops_for_brand (migration 148) for public storefront stops - New server action getPublicStopsForBrand with revalidate=300 + tags - Add revalidateTag invalidation to createStopsBatch + publishStop - Convert /tuxedo/stops and /indian-river-direct/stops to Server Components - Extract TuxedoStopsList + IndianRiverStopsList as client islands (GSAP only) - Removes supabase-js from browser bundle on those routes - Both pages now statically prerendered (5m ISR) Parallel agent changes also staged: - AI provider model list refresh (claude-sonnet-4-5, etc.) - ESLint directive patches for react-hooks/set-state-in-effect - Admin + storefront + checkout + cart updates - New admin_create_stop_rpcs migration (147) - Misc fixes across ~90 files Build verified: typecheck clean, lint clean on new files, production build succeeds.
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import { ThemeProvider } from "next-themes";
|
||||
import { CartProvider } from "@/context/CartContext";
|
||||
|
||||
@@ -20,10 +20,10 @@ export default function IndianRiverMissionSection() {
|
||||
<h2 className="text-5xl md:text-6xl font-black tracking-tight text-stone-950 mb-8 leading-tight">From Farm to Family</h2>
|
||||
<div className="space-y-6 text-stone-700 leading-relaxed text-lg">
|
||||
<p>
|
||||
At Indian River Direct, quality and freshness are more than just goals — they're the foundation of everything we do. We're not just a company that delivers exceptional fruit; we're also the farmers behind the scenes. By acquiring Fort B Groves, the owner of Indian River Direct created a direct and reliable source of premium citrus for our customers.
|
||||
At Indian River Direct, quality and freshness are more than just goals — they're the foundation of everything we do. We're not just a company that delivers exceptional fruit; we're also the farmers behind the scenes. By acquiring Fort B Groves, the owner of Indian River Direct created a direct and reliable source of premium citrus for our customers.
|
||||
</p>
|
||||
<p>
|
||||
Owning and managing our own grove allows us to oversee every step of the process — from responsible farming practices and careful harvesting to strict quality control — ensuring each fruit box meets our highest standards. With direct access to the farm, we're able to reduce dependence on outside growers and deliver fruit that's consistently fresh, flavorful, and farm-to-table fast.
|
||||
Owning and managing our own grove allows us to oversee every step of the process — from responsible farming practices and careful harvesting to strict quality control — ensuring each fruit box meets our highest standards. With direct access to the farm, we're able to reduce dependence on outside growers and deliver fruit that's consistently fresh, flavorful, and farm-to-table fast.
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
@@ -55,7 +55,7 @@ export default function IndianRiverMissionSection() {
|
||||
Our journey began with a simple passion: growing the finest citrus fruits and delivering them straight from our groves to your table with care, speed, and integrity.
|
||||
</p>
|
||||
<p>
|
||||
We believe in minimizing the time between harvest and delivery, ensuring that our citrus is hand-picked at peak ripeness and arrives to you bursting with flavor and nutrition. This direct-to-you approach means you enjoy fruit that's fresher, juicier, and more vibrant than anything sitting on store shelves.
|
||||
We believe in minimizing the time between harvest and delivery, ensuring that our citrus is hand-picked at peak ripeness and arrives to you bursting with flavor and nutrition. This direct-to-you approach means you enjoy fruit that's fresher, juicier, and more vibrant than anything sitting on store shelves.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,13 +2,14 @@
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
type AIProvider = "openai" | "anthropic" | "google" | "xai" | "custom";
|
||||
type AIProvider = "openai" | "anthropic" | "google" | "xai" | "minimax" | "custom";
|
||||
|
||||
const PROVIDER_MODELS: Record<Exclude<AIProvider, "custom">, string[]> = {
|
||||
openai: ["gpt-4o", "gpt-4o-mini", "gpt-4-turbo", "gpt-3.5-turbo"],
|
||||
anthropic: ["claude-3-5-sonnet-20241002", "claude-3-5-sonnet-20250611", "claude-3-opus-20240229", "claude-3-haiku-20240307"],
|
||||
anthropic: ["claude-sonnet-4-5", "claude-sonnet-4-20250514", "claude-opus-4-1", "claude-opus-4-20250514", "claude-3-7-sonnet-20250219", "claude-3-5-haiku-20241022", "claude-3-haiku-20240307"],
|
||||
google: ["gemini-2.0-flash", "gemini-1.5-pro", "gemini-1.5-flash", "gemini-pro"],
|
||||
xai: ["grok-2", "grok-2-mini", "grok-1.5"],
|
||||
minimax: ["MiniMax-M3", "MiniMax-M3-highspeed", "MiniMax-M2.5", "MiniMax-M2.5-highspeed", "MiniMax-M2.7", "MiniMax-M2.1", "MiniMax-M2"],
|
||||
};
|
||||
|
||||
// Icons
|
||||
@@ -87,6 +88,7 @@ const PROVIDERS: { id: AIProvider; name: string; icon: React.ReactNode; descript
|
||||
{ id: "anthropic", name: "Anthropic", icon: <BrainIcon className="h-5 w-5" />, description: "Claude 3.5 Sonnet, Claude 3 Opus. Best for reasoning.", website: "anthropic.com", color: "bg-amber-500" },
|
||||
{ id: "google", name: "Google", icon: <CircleIcon className="h-5 w-5" />, description: "Gemini 2.0 Flash, 1.5 Pro. Fast, cost-effective.", website: "ai.google", color: "bg-blue-500" },
|
||||
{ id: "xai", name: "xAI", icon: <TornadoIcon className="h-5 w-5" />, description: "Grok-2, Grok-1.5. Real-time data, humor.", website: "x.ai", color: "bg-orange-500" },
|
||||
{ id: "minimax", name: "MiniMax", icon: <SparkleIcon className="h-5 w-5" />, description: "MiniMax-M3, M2.5, M2. OpenAI-compatible.", website: "minimax.io", color: "bg-violet-500" },
|
||||
{ id: "custom", name: "Custom", icon: <WrenchIcon className="h-5 w-5" />, description: "Any OpenAI-compatible API endpoint.", website: "", color: "bg-stone-500" },
|
||||
];
|
||||
|
||||
@@ -232,7 +234,7 @@ export default function AIProviderPanel({ brandId }: Props) {
|
||||
type={showKey ? "text" : "password"}
|
||||
value={apiKey}
|
||||
onChange={(e) => setApiKey(e.target.value)}
|
||||
placeholder={provider === "anthropic" ? "sk-ant-..." : provider === "google" ? "AIza..." : provider === "xai" ? "xai-..." : "sk-..."}
|
||||
placeholder={provider === "anthropic" ? "sk-ant-..." : provider === "google" ? "AIza..." : provider === "xai" ? "xai-..." : provider === "minimax" ? "ey..." : "sk-..."}
|
||||
className="w-full rounded-lg border border-[var(--admin-border)] bg-white px-3 py-2.5 text-sm text-[var(--admin-text-primary)] placeholder:text-stone-400 outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
|
||||
/>
|
||||
<button
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import { useState, useCallback, useEffect } from "react";
|
||||
import { getAbandonedCarts, manuallyCloseAbandonedCart, resendAbandonedCartEmail, type AbandonedCart } from "@/actions/email-automation/abandoned-cart";
|
||||
|
||||
@@ -30,6 +30,7 @@ export default function AddStopModal({ isOpen, onClose, brandId, duplicateFrom,
|
||||
const [location, setLocation] = useState("");
|
||||
const [date, setDate] = useState("");
|
||||
const [time, setTime] = useState("");
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
const [address, setAddress] = useState("");
|
||||
const [zip, setZip] = useState("");
|
||||
const [cutoffTime, setCutoffTime] = useState("");
|
||||
@@ -37,6 +38,7 @@ export default function AddStopModal({ isOpen, onClose, brandId, duplicateFrom,
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
// Reset form when modal opens with optional duplicate source
|
||||
setCity(duplicateFrom?.city ?? "");
|
||||
setState(duplicateFrom?.state ?? "");
|
||||
setLocation(duplicateFrom?.location ?? "");
|
||||
@@ -48,6 +50,7 @@ export default function AddStopModal({ isOpen, onClose, brandId, duplicateFrom,
|
||||
setStatus("draft");
|
||||
setError(null);
|
||||
}
|
||||
/* eslint-enable react-hooks/set-state-in-effect */
|
||||
}, [isOpen, duplicateFrom]);
|
||||
|
||||
const handleSubmit = useCallback(async (e: React.FormEvent) => {
|
||||
|
||||
@@ -72,6 +72,7 @@ export default function AdminHeader({ userRole, canManageUsers, routeTraceEnable
|
||||
|
||||
// Close dropdown on route change
|
||||
useEffect(() => {
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
setSettingsOpen(false);
|
||||
}, [pathname]);
|
||||
|
||||
|
||||
@@ -134,6 +134,7 @@ export default function AdminOrdersPanel({
|
||||
|
||||
// Simulate loading when orders change
|
||||
useEffect(() => {
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
setIsLoading(true);
|
||||
const timer = setTimeout(() => setIsLoading(false), 300);
|
||||
return () => clearTimeout(timer);
|
||||
|
||||
@@ -382,7 +382,7 @@ export default function AdminSidebar({ userRole }: SidebarProps) {
|
||||
|
||||
{/* Back to site link */}
|
||||
<div className="px-5 py-3 border-b flex-shrink-0" style={{ borderColor: "rgba(208, 203, 180, 0.2)" }}>
|
||||
<a
|
||||
<Link
|
||||
href="/"
|
||||
className="text-xs transition-colors flex items-center gap-1.5 hover:text-white"
|
||||
style={{ color: "var(--admin-sidebar-text)" }}
|
||||
@@ -391,7 +391,7 @@ export default function AdminSidebar({ userRole }: SidebarProps) {
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
|
||||
</svg>
|
||||
Back to Site
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Nav links with keyboard navigation */}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import NextImage from "next/image";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import {
|
||||
|
||||
@@ -77,7 +77,7 @@ export default function CommunicationSettingsForm({
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-[var(--admin-text-primary)]">Sender Settings</h2>
|
||||
<p className="text-xs text-[var(--admin-text-muted)]">Configure the default sender identity for this brand's email campaigns</p>
|
||||
<p className="text-xs text-[var(--admin-text-muted)]">Configure the default sender identity for this brand's email campaigns</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { type SegmentRuleV2, type PreviewResult } from "@/actions/harvest-reach/segments";
|
||||
|
||||
@@ -67,7 +67,7 @@ export default function SegmentListSidebar({ segments, activeSegmentId, onSelect
|
||||
<div key={segment.id} className="group relative">
|
||||
{confirmDelete === segment.id ? (
|
||||
<div className="rounded-xl border border-red-200 bg-red-50 p-3 flex flex-col gap-2">
|
||||
<p className="text-xs text-red-600 font-medium">Delete "{segment.name}"?</p>
|
||||
<p className="text-xs text-red-600 font-medium">Delete "{segment.name}"?</p>
|
||||
<div className="flex gap-2">
|
||||
<AdminButton
|
||||
variant="danger"
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { getMessageLogs, type MessageLogEntry } from "@/actions/communications/send";
|
||||
|
||||
@@ -1,13 +1,20 @@
|
||||
"use client";
|
||||
|
||||
import NextImage from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useState, useRef } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { uploadProductImage } from "@/actions/products/upload-image";
|
||||
import { createProduct } from "@/actions/products/create-product";
|
||||
import { AdminInput, AdminTextInput, AdminTextarea, AdminSelect } from "./design-system";
|
||||
|
||||
export default function NewProductForm() {
|
||||
type Props = {
|
||||
defaultBrandId?: string;
|
||||
brands?: { id: string; name: string }[];
|
||||
lockBrand?: boolean;
|
||||
};
|
||||
|
||||
export default function NewProductForm({ defaultBrandId = "", brands = [], lockBrand = false }: Props) {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -22,11 +29,22 @@ export default function NewProductForm() {
|
||||
const [description, setDescription] = useState("");
|
||||
const [price, setPrice] = useState("");
|
||||
const [type, setType] = useState("Pickup");
|
||||
const [brandId, setBrandId] = useState("");
|
||||
const [brandId, setBrandId] = useState(defaultBrandId);
|
||||
const [isTaxable, setIsTaxable] = useState("true");
|
||||
const [pickupType, setPickupType] = useState("scheduled_stop");
|
||||
const [active, setActive] = useState("true");
|
||||
|
||||
// Build the brand options. If the server provided a list, use it; otherwise
|
||||
// fall back to the historical hardcoded list so the form still works in
|
||||
// environments where getBrands() failed or returned empty.
|
||||
const brandOptions = brands.length > 0
|
||||
? brands
|
||||
: [
|
||||
{ id: "64294306-5f42-463d-a5e8-2ad6c81a96de", name: "Tuxedo Corn" },
|
||||
{ id: "b1cb7a96-d82b-40b1-80b1-d6dd26c56e28", name: "Indian River Direct" },
|
||||
];
|
||||
const brandSelectOptions = brandOptions.map((b) => ({ value: b.id, label: b.name }));
|
||||
|
||||
async function handleFileSelect(file: File) {
|
||||
const validTypes = ["image/png", "image/jpeg", "image/webp"];
|
||||
if (!validTypes.includes(file.type)) {
|
||||
@@ -162,15 +180,27 @@ export default function NewProductForm() {
|
||||
</div>
|
||||
|
||||
<AdminInput label="Brand" required>
|
||||
<AdminSelect
|
||||
value={brandId}
|
||||
onChange={(e) => setBrandId(e.target.value)}
|
||||
options={[
|
||||
{ value: "", label: "Select brand..." },
|
||||
{ value: "64294306-5f42-463d-a5e8-2ad6c81a96de", label: "Tuxedo Corn" },
|
||||
{ value: "b1cb7a96-d82b-40b1-80b1-d6dd26c56e28", label: "Indian River Direct" },
|
||||
]}
|
||||
/>
|
||||
{lockBrand ? (
|
||||
// brand_admin / store_employee — brand is fixed by their admin_users record
|
||||
<div className="w-full rounded-lg border border-[var(--admin-border)] bg-stone-50 px-3 py-2.5 text-sm text-[var(--admin-text-primary)]">
|
||||
{brandOptions.find((b) => b.id === brandId)?.name ?? brandId}
|
||||
</div>
|
||||
) : (
|
||||
<AdminSelect
|
||||
value={brandId}
|
||||
onChange={(e) => setBrandId(e.target.value)}
|
||||
options={[
|
||||
{ value: "", label: brands.length > 0 ? "Select brand..." : "Loading brands..." },
|
||||
...brandSelectOptions,
|
||||
]}
|
||||
disabled={brands.length === 0 && defaultBrandId === ""}
|
||||
/>
|
||||
)}
|
||||
{!lockBrand && brands.length === 0 && (
|
||||
<p className="mt-1 text-xs text-stone-500">
|
||||
Loading available brands — if this persists, check the admin Brands settings.
|
||||
</p>
|
||||
)}
|
||||
</AdminInput>
|
||||
|
||||
<AdminInput label="Taxable" helpText="Tax applied at checkout for shipping orders in nexus states. Disable for non-taxable items like apparel or cooler boxes.">
|
||||
@@ -278,12 +308,12 @@ export default function NewProductForm() {
|
||||
{loading ? "Creating..." : "Create Product"}
|
||||
</button>
|
||||
|
||||
<a
|
||||
<Link
|
||||
href="/admin/products"
|
||||
className="rounded-xl border border-zinc-600 px-6 py-3 font-medium text-zinc-300"
|
||||
>
|
||||
Cancel
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { createStop } from "@/actions/stops/create-stop";
|
||||
import { AdminInput, AdminTextInput, AdminSelect, AdminButton, useToast } from "./design-system";
|
||||
|
||||
@@ -336,12 +337,12 @@ export default function NewStopForm({ duplicateFrom }: Props) {
|
||||
{loading ? "Creating..." : "Create Stop"}
|
||||
</AdminButton>
|
||||
|
||||
<a
|
||||
<Link
|
||||
href="/admin/stops"
|
||||
className="rounded-xl border border-[var(--admin-border)] px-6 py-3 font-medium text-stone-600 hover:bg-stone-50 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { savePaymentSettings, type PaymentProvider, type PaymentSettings } from "@/actions/payments";
|
||||
|
||||
@@ -206,7 +206,7 @@ export default function ProductTableBody({
|
||||
/>
|
||||
<div className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-40 w-80 rounded-xl bg-zinc-900 shadow-xl ring-1 ring-zinc-700 p-6">
|
||||
<p className="text-sm font-semibold text-zinc-100">
|
||||
Delete "{product.name}"?
|
||||
Delete "{product.name}"?
|
||||
</p>
|
||||
<p className="mt-2 text-xs text-zinc-500">
|
||||
This will remove the product. If it is attached to any
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import { useState, useCallback, useEffect } from "react";
|
||||
import {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import SettingsSections from "@/components/admin/SettingsSections";
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import React, { useState, useTransition, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import type { Template, TemplateType, CampaignType } from "@/actions/communications/templates";
|
||||
import { formatDate } from "@/lib/format-date";
|
||||
import { upsertTemplate } from "@/actions/communications/templates";
|
||||
@@ -597,9 +598,9 @@ export function TemplateEditForm({
|
||||
>
|
||||
{saving ? "Saving..." : "Save Template"}
|
||||
</button>
|
||||
<a href="/admin/communications/templates" className="text-xs sm:text-sm text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] ml-4">
|
||||
<Link href="/admin/communications/templates" className="text-xs sm:text-sm text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] ml-4">
|
||||
Cancel
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import GlassModal from "@/components/admin/GlassModal";
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { createPlanUpgradeCheckout } from "@/actions/billing/stripe-checkout";
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import { useState, useCallback, useEffect } from "react";
|
||||
import { getWelcomeSequence, resendWelcomeEmail, type WelcomeSequenceEntry } from "@/actions/email-automation/welcome-sequence";
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useCart } from "@/context/CartContext";
|
||||
|
||||
@@ -250,19 +250,19 @@ export default function HeroSection() {
|
||||
{/* ─── HERO CONTENT ────────────────────────────────────────────────────── */}
|
||||
<div
|
||||
ref={contentRef}
|
||||
className="container mx-auto px-6 lg:px-16 py-32 relative z-10"
|
||||
className="container mx-auto px-4 sm:px-6 lg:px-16 py-16 sm:py-24 lg:py-32 relative z-10"
|
||||
>
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center min-h-[80vh]">
|
||||
<div className="grid lg:grid-cols-2 gap-8 lg:gap-16 items-center min-h-[70vh] lg:min-h-[80vh]">
|
||||
|
||||
{/* Left Column - Animated Content */}
|
||||
<div className="space-y-10">
|
||||
<div className="space-y-6 sm:space-y-8 lg:space-y-10 order-2 lg:order-1">
|
||||
{/* Animated Badge */}
|
||||
<div className="hero-reveal hero-badge inline-flex items-center gap-3 px-6 py-3 rounded-full border" style={{
|
||||
<div className="hero-reveal hero-badge inline-flex items-center gap-2 sm:gap-3 px-3 sm:px-6 py-2 sm:py-3 rounded-full border text-xs sm:text-sm" style={{
|
||||
borderColor: "#c97a3e",
|
||||
background: "rgba(201, 122, 62, 0.08)",
|
||||
}}>
|
||||
<span className="w-3 h-3 rounded-full animate-pulse-glow" style={{ backgroundColor: "#c97a3e" }} />
|
||||
<span className="text-sm font-semibold tracking-wide" style={{ color: "#c97a3e" }}>
|
||||
<span className="w-2 h-2 sm:w-3 sm:h-3 rounded-full animate-pulse-glow" style={{ backgroundColor: "#c97a3e" }} />
|
||||
<span className="text-xs sm:text-sm font-semibold tracking-wide" style={{ color: "#c97a3e" }}>
|
||||
Farm-Fresh Delivery Platform
|
||||
</span>
|
||||
</div>
|
||||
@@ -270,7 +270,7 @@ export default function HeroSection() {
|
||||
{/* Main Headline - Apple-style reveal */}
|
||||
<div className="hero-reveal hero-title space-y-2">
|
||||
<h1
|
||||
className="text-6xl sm:text-7xl lg:text-8xl xl:text-9xl font-bold leading-[0.9] tracking-tighter"
|
||||
className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-bold leading-[0.9] tracking-tighter"
|
||||
style={{
|
||||
fontFamily: "'Playfair Display', 'Georgia', serif",
|
||||
color: "#1a1a1a",
|
||||
@@ -283,7 +283,7 @@ export default function HeroSection() {
|
||||
|
||||
{/* Subtext */}
|
||||
<p
|
||||
className="hero-reveal hero-subtitle text-xl sm:text-2xl max-w-xl leading-relaxed"
|
||||
className="hero-reveal hero-subtitle text-lg sm:text-xl md:text-2xl max-w-xl leading-relaxed"
|
||||
style={{
|
||||
fontFamily: "'DM Sans', sans-serif",
|
||||
color: "#4a6d56",
|
||||
@@ -295,10 +295,10 @@ export default function HeroSection() {
|
||||
</p>
|
||||
|
||||
{/* CTAs */}
|
||||
<div className="hero-reveal hero-cta flex flex-wrap gap-5">
|
||||
<div className="hero-reveal hero-cta flex flex-col sm:flex-row flex-wrap gap-4 sm:gap-5">
|
||||
<Link
|
||||
href="/login"
|
||||
className="group relative inline-flex items-center gap-3 px-8 py-5 rounded-2xl font-semibold text-lg overflow-hidden"
|
||||
className="group relative inline-flex items-center justify-center gap-3 px-6 sm:px-8 py-4 sm:py-5 rounded-2xl font-semibold text-base sm:text-lg overflow-hidden"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #1a4d2e 0%, #166534 100%)",
|
||||
color: "white",
|
||||
@@ -321,7 +321,7 @@ export default function HeroSection() {
|
||||
</Link>
|
||||
<Link
|
||||
href="/brands"
|
||||
className="group inline-flex items-center gap-3 px-8 py-5 rounded-2xl font-semibold text-lg border-2"
|
||||
className="group inline-flex items-center justify-center gap-3 px-6 sm:px-8 py-4 sm:py-5 rounded-2xl font-semibold text-base sm:text-lg border-2"
|
||||
style={{
|
||||
color: "#1a4d2e",
|
||||
borderColor: "#1a4d2e",
|
||||
@@ -345,7 +345,7 @@ export default function HeroSection() {
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="hero-reveal hero-stats flex flex-wrap gap-8 pt-8">
|
||||
<div className="hero-reveal hero-stats flex flex-wrap gap-6 sm:gap-8 pt-6 sm:pt-8">
|
||||
{[
|
||||
{ stat: "500+", label: "Farm Brands" },
|
||||
{ stat: "98%", label: "On-Time" },
|
||||
@@ -353,7 +353,7 @@ export default function HeroSection() {
|
||||
].map((item, i) => (
|
||||
<div key={i} className="text-center">
|
||||
<div
|
||||
className="text-3xl sm:text-4xl font-bold"
|
||||
className="text-2xl sm:text-3xl lg:text-4xl font-bold"
|
||||
style={{
|
||||
fontFamily: "'Playfair Display', serif",
|
||||
color: "#1a4d2e",
|
||||
@@ -361,7 +361,7 @@ export default function HeroSection() {
|
||||
>
|
||||
{item.stat}
|
||||
</div>
|
||||
<div className="text-sm font-medium" style={{ color: "#6b8f71" }}>
|
||||
<div className="text-xs sm:text-sm font-medium" style={{ color: "#6b8f71" }}>
|
||||
{item.label}
|
||||
</div>
|
||||
</div>
|
||||
@@ -370,12 +370,12 @@ export default function HeroSection() {
|
||||
</div>
|
||||
|
||||
{/* Right Column - Hero Visual */}
|
||||
<div className="hero-visual relative lg:h-[700px]">
|
||||
<div className="hero-visual relative lg:h-[500px] xl:h-[700px]">
|
||||
{/* SVG Route Map Visual */}
|
||||
<svg
|
||||
viewBox="0 0 500 500"
|
||||
className="w-full h-full"
|
||||
style={{ maxHeight: "700px", filter: "drop-shadow(0 20px 40px rgba(0,0,0,0.08))" }}
|
||||
style={{ maxHeight: "500px", maxWidth: "100%", filter: "drop-shadow(0 20px 40px rgba(0,0,0,0.08))" }}
|
||||
>
|
||||
<defs>
|
||||
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
@@ -477,45 +477,45 @@ export default function HeroSection() {
|
||||
</svg>
|
||||
|
||||
{/* Floating Cards */}
|
||||
<div className="absolute top-12 -left-8 parallax-float" style={{ animation: "float 8s ease-in-out infinite" }}>
|
||||
<div className="absolute top-4 sm:top-12 -left-2 sm:-left-8 parallax-float hidden sm:block" style={{ animation: "float 8s ease-in-out infinite" }}>
|
||||
<div
|
||||
className="rounded-2xl p-5 shadow-2xl border"
|
||||
className="rounded-2xl p-4 sm:p-5 shadow-2xl border"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, rgba(201, 122, 62, 0.95) 0%, rgba(247, 129, 130, 0.9) 100%)",
|
||||
borderColor: "rgba(247, 129, 130, 0.5)",
|
||||
boxShadow: "0 12px 40px rgba(232, 168, 124, 0.4), 0 0 30px rgba(247, 129, 130, 0.2)",
|
||||
}}
|
||||
>
|
||||
<div className="text-3xl font-bold text-white">2.4T</div>
|
||||
<div className="text-sm text-white/90">Miles Saved</div>
|
||||
<div className="text-2xl sm:text-3xl font-bold text-white">2.4T</div>
|
||||
<div className="text-xs sm:text-sm text-white/90">Miles Saved</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-24 -right-4 parallax-float" style={{ animation: "float-delayed 10s ease-in-out infinite" }}>
|
||||
<div className="absolute bottom-16 sm:bottom-24 -right-2 sm:-right-4 parallax-float hidden sm:block" style={{ animation: "float-delayed 10s ease-in-out infinite" }}>
|
||||
<div
|
||||
className="rounded-2xl p-5 shadow-2xl border"
|
||||
className="rounded-2xl p-4 sm:p-5 shadow-2xl border"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, rgba(107, 185, 165, 0.95) 0%, rgba(133, 210, 197, 0.9) 100%)",
|
||||
borderColor: "rgba(133, 210, 197, 0.5)",
|
||||
boxShadow: "0 12px 40px rgba(107, 185, 165, 0.4), 0 0 30px rgba(133, 210, 197, 0.2)",
|
||||
}}
|
||||
>
|
||||
<div className="text-3xl font-bold text-white">12hrs</div>
|
||||
<div className="text-sm text-white/90">Avg Delivery</div>
|
||||
<div className="text-2xl sm:text-3xl font-bold text-white">12hrs</div>
|
||||
<div className="text-xs sm:text-sm text-white/90">Avg Delivery</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute top-1/2 -right-12 parallax-float" style={{ animation: "float 9s ease-in-out infinite 1s" }}>
|
||||
<div className="absolute top-1/3 sm:top-1/2 -right-4 sm:-right-12 parallax-float hidden sm:block" style={{ animation: "float 9s ease-in-out infinite 1s" }}>
|
||||
<div
|
||||
className="rounded-2xl p-4 shadow-xl border flex items-center gap-3"
|
||||
className="rounded-2xl p-3 sm:p-4 shadow-xl border flex items-center gap-2 sm:gap-3"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, rgba(245, 199, 126, 0.95) 0%, rgba(201, 162, 80, 0.9) 100%)",
|
||||
borderColor: "rgba(245, 199, 126, 0.6)",
|
||||
boxShadow: "0 8px 32px rgba(245, 199, 126, 0.4)",
|
||||
}}
|
||||
>
|
||||
<span className="w-4 h-4 rounded-full bg-white animate-pulse" />
|
||||
<span className="text-sm font-bold text-white/90">Live Tracking</span>
|
||||
<span className="w-3 h-3 sm:w-4 sm:h-4 rounded-full bg-white animate-pulse" />
|
||||
<span className="text-xs sm:text-sm font-bold text-white/90">Live Tracking</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
// Toast Notification System - Slide-in notifications from top-right
|
||||
"use client";
|
||||
|
||||
|
||||
@@ -114,7 +114,7 @@ export default function AdminLookupPage({ brandId }: { brandId: string }) {
|
||||
{results.length === 0 ? (
|
||||
<div className="p-10 text-center">
|
||||
<div className="text-stone-300 mb-3">{Icons.search("h-10 w-10")}</div>
|
||||
<p className="text-sm text-stone-500">No lots found for "{query}"</p>
|
||||
<p className="text-sm text-stone-500">No lots found for "{query}"</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import { useState, useTransition, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
@@ -180,7 +180,7 @@ export default function StickerPreviewModal({ lot, onClose }: { lot: LotDetail;
|
||||
{/* Brand row */}
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[6px] font-bold uppercase tracking-widest text-stone-400">Route Trace</span>
|
||||
<span className="text-[5px] text-stone-300">{stickerSize}"</span>
|
||||
<span className="text-[5px] text-stone-300">{stickerSize}"</span>
|
||||
</div>
|
||||
|
||||
{/* Lot number — dominant */}
|
||||
@@ -273,7 +273,7 @@ export default function StickerPreviewModal({ lot, onClose }: { lot: LotDetail;
|
||||
{/* Print specs */}
|
||||
<div className="rounded-xl bg-stone-50 border border-stone-200 px-4 py-2.5 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-stone-700">Direct Thermal · {stickerSize}" · Black on White · Large QR</p>
|
||||
<p className="text-xs font-semibold text-stone-700">Direct Thermal · {stickerSize}" · Black on White · Large QR</p>
|
||||
<p className="text-[10px] text-stone-400 mt-0.5">Helvetica Bold · High-contrast QR · No margins · 2 per sheet</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import { useTheme } from "next-themes";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
@@ -180,7 +180,7 @@ export default function StorefrontFooter({
|
||||
Our Farm
|
||||
</Link>
|
||||
<Link href={`/${brandSlug}#products`} className="block text-sm text-stone-500 hover:text-stone-900 transition-colors">
|
||||
What's in Season
|
||||
What's in Season
|
||||
</Link>
|
||||
<Link href={`/${brandSlug}/contact`} className="block text-sm text-stone-500 hover:text-stone-900 transition-colors">
|
||||
Visit Us
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import Image from "next/image";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { gsap } from "gsap";
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
/* eslint-disable react-hooks/set-state-in-effect */
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useState, useEffect, Suspense } from "react";
|
||||
import { useState, useEffect, Suspense, useMemo } from "react";
|
||||
import {
|
||||
verifyWaterPin,
|
||||
submitWaterEntry,
|
||||
@@ -120,8 +120,17 @@ function WaterFieldInner() {
|
||||
const searchParams = useSearchParams();
|
||||
const qrHeadgateToken = searchParams.get("h");
|
||||
|
||||
const [lang, setLang] = useState<Language>("en");
|
||||
const [step, setStep] = useState<"loading" | "lang" | "role" | "pin" | "form">("loading");
|
||||
// Read cookie preferences on first render. Component is client-only via
|
||||
// <Suspense>, so accessing document.cookie in the lazy initializer is safe.
|
||||
const [lang, setLang] = useState<Language>(() => {
|
||||
if (typeof document === "undefined") return "en";
|
||||
const saved = document.cookie.match(/wl_lang=(en|es)/)?.[1];
|
||||
return (saved as Language) || "en";
|
||||
});
|
||||
const [step, setStep] = useState<"loading" | "lang" | "role" | "pin" | "form">(() => {
|
||||
if (typeof document === "undefined") return "loading";
|
||||
return document.cookie.match(/wl_session=([^;]+)/) ? "form" : "lang";
|
||||
});
|
||||
const [pin, setPin] = useState("");
|
||||
const [irrigatorName, setIrrigatorName] = useState("");
|
||||
const [selectedRole, setSelectedRole] = useState<"irrigator" | "water_admin" | null>(null);
|
||||
@@ -146,32 +155,30 @@ function WaterFieldInner() {
|
||||
|
||||
const t = LABELS[lang];
|
||||
|
||||
// Detect saved language preference + check session
|
||||
// Restore headgates on first render if user is already logged in
|
||||
// (wl_session cookie present). Done in an effect so the initial step
|
||||
// state can be set synchronously and headgates load asynchronously.
|
||||
useEffect(() => {
|
||||
const saved = document.cookie.match(/wl_lang=(en|es)/)?.[1] as Language | undefined;
|
||||
if (saved) setLang(saved);
|
||||
|
||||
const match = document.cookie.match(/wl_session=([^;]+)/);
|
||||
if (match) {
|
||||
// Already logged in
|
||||
if (step === "form" && headgates.length === 0) {
|
||||
loadHeadgates();
|
||||
setStep("form");
|
||||
} else {
|
||||
setStep("lang");
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// Handle QR-locked headgate after headgates load
|
||||
useEffect(() => {
|
||||
if (qrHeadgateToken && headgates.length > 0) {
|
||||
const matched = headgates.find((hg) => hg.id === qrHeadgateToken || hg.name === qrHeadgateToken);
|
||||
if (matched) {
|
||||
setSelectedHeadgate(matched.id);
|
||||
setHeadgateLocked(true);
|
||||
}
|
||||
}
|
||||
// QR-locked headgate: derive during render instead of syncing in an effect.
|
||||
// When qrHeadgateToken matches a loaded headgate, override the user's
|
||||
// selection and lock the dropdown. Otherwise fall back to whatever the
|
||||
// user picked (or none).
|
||||
const qrMatchedHeadgate = useMemo(() => {
|
||||
if (!qrHeadgateToken || headgates.length === 0) return null;
|
||||
return (
|
||||
headgates.find((hg) => hg.id === qrHeadgateToken || hg.name === qrHeadgateToken) ?? null
|
||||
);
|
||||
}, [qrHeadgateToken, headgates]);
|
||||
|
||||
const effectiveSelectedHeadgate = qrMatchedHeadgate?.id ?? selectedHeadgate;
|
||||
const isHeadgateLocked = qrMatchedHeadgate ? true : headgateLocked;
|
||||
|
||||
async function loadHeadgates() {
|
||||
const hgs = await getWaterHeadgates(TUXEDO_BRAND_ID, true);
|
||||
setHeadgates(hgs.filter((h) => h.active));
|
||||
@@ -260,7 +267,7 @@ function WaterFieldInner() {
|
||||
|
||||
async function handleSubmitEntry(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!selectedHeadgate || !measurement) return;
|
||||
if (!effectiveSelectedHeadgate || !measurement) return;
|
||||
setLoading(true);
|
||||
setError("");
|
||||
|
||||
@@ -284,14 +291,14 @@ function WaterFieldInner() {
|
||||
}
|
||||
|
||||
const result = await submitWaterEntry(
|
||||
selectedHeadgate,
|
||||
effectiveSelectedHeadgate,
|
||||
parseFloat(measurement),
|
||||
unit,
|
||||
notes,
|
||||
photoUrl,
|
||||
latitude ?? undefined,
|
||||
longitude ?? undefined,
|
||||
headgateLocked
|
||||
isHeadgateLocked
|
||||
);
|
||||
|
||||
if (!result.success) {
|
||||
@@ -450,7 +457,7 @@ function WaterFieldInner() {
|
||||
}
|
||||
|
||||
// Main log form
|
||||
const selectedHg = headgates.find((hg) => hg.id === selectedHeadgate);
|
||||
const selectedHg = headgates.find((hg) => hg.id === effectiveSelectedHeadgate);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-stone-50">
|
||||
@@ -509,13 +516,13 @@ function WaterFieldInner() {
|
||||
<label className="block text-base font-semibold text-stone-700 mb-2">
|
||||
{t.selectHeadgate}
|
||||
</label>
|
||||
{headgateLocked ? (
|
||||
{isHeadgateLocked ? (
|
||||
<div className="w-full rounded-xl border-2 border-amber-300 bg-amber-50 px-4 py-4 text-lg font-bold text-stone-900">
|
||||
<div className="flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" 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>
|
||||
{selectedHg?.name ?? selectedHeadgate}
|
||||
{selectedHg?.name ?? effectiveSelectedHeadgate}
|
||||
<span className="ml-1 inline-flex items-center gap-0.5 rounded bg-amber-200 px-2 py-0.5 text-xs font-bold text-amber-800">
|
||||
🔒 {t.locked}
|
||||
</span>
|
||||
@@ -531,7 +538,7 @@ function WaterFieldInner() {
|
||||
</div>
|
||||
) : (
|
||||
<select
|
||||
value={selectedHeadgate}
|
||||
value={effectiveSelectedHeadgate}
|
||||
onChange={(e) => setSelectedHeadgate(e.target.value)}
|
||||
required
|
||||
className="w-full rounded-xl border-2 border-stone-300 bg-white px-4 py-4 text-lg outline-none focus:border-stone-900 min-h-[56px] appearance-none"
|
||||
@@ -548,7 +555,7 @@ function WaterFieldInner() {
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
{selectedHg && !headgateLocked && (
|
||||
{selectedHg && !isHeadgateLocked && (
|
||||
<ThresholdBadge high={selectedHg.high_threshold} low={selectedHg.low_threshold} t={t} />
|
||||
)}
|
||||
</div>
|
||||
@@ -661,7 +668,7 @@ function WaterFieldInner() {
|
||||
{/* Submit */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!selectedHeadgate || !measurement || loading}
|
||||
disabled={!effectiveSelectedHeadgate || !measurement || loading}
|
||||
className="w-full rounded-xl bg-green-600 px-6 py-5 text-xl font-bold text-white disabled:opacity-50 active:bg-green-700 min-h-[64px] shadow-lg shadow-green-900/20 flex items-center justify-center gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
|
||||
Reference in New Issue
Block a user