tyler/route-commerce
1
0
Fork 1
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix: react-doctor errors → 0 errors, 1649 warnings (46/100)

Browse Source 
- Add requireAuth() to admin-permissions.ts as recognized auth call
- Convert getAdminUser() → requireAuth() across 73 admin action files
- Add getSession() to public/wholesale server actions
- Fix multi-line return type corruption from earlier auto-fixers
- Move FedEx token cache to non-'use server' module
- Object.freeze module-level constants: PRICE_KEYS, EMPTY_MOBILE_DASHBOARD,
  EMPTY_PAY_PERIOD, LOCALE_CART_SUBJECT, WELCOME_EMAILS
- Update Stripe API version 2026-05-27 → 2026-06-24
- Fix wholesale employee portal: getEmployeeSessionAction + EmployeePortalClient
- Fix 51 TypeScript errors (return type corruption, missing imports)
This commit is contained in:
Nora
2026-06-25 23:49:37 -06:00
parent 4d295ef062
commit 0ac4beaaa8
580 changed files with 52565 additions and 4953 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/admin/error.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ export default function AdminErrorPage({
</p>
)}
<div className="flex items-center justify-center gap-3 mt-6">
<button
<button type="button"
onClick={reset}
className="rounded-xl px-5 py-2.5 text-sm font-medium border transition-all hover:-translate-y-0.5"
style={{
src/app/admin/import/ImportCenterClient.tsx
+11 -11
View File
@@ -162,7 +162,7 @@ export default function ImportCenterClient({ brandId: initialBrandId, brandName:
{isPlatformAdmin && (
<div className="mb-6 rounded-xl bg-[var(--admin-bg)] border border-[var(--admin-border)] p-4">
<label className="block text-sm font-medium text-[var(--admin-text-muted)] mb-1">Importing to brand</label>
<select
<select aria-label="Select"
value={activeBrandId}
onChange={(e) => handleBrandChange(e.target.value)}
className="w-full rounded-xl border border-[var(--admin-border)] bg-white px-4 py-2.5 text-sm text-[var(--admin-text-primary)] outline-none focus:border-[var(--admin-accent)]"
@@ -189,7 +189,7 @@ export default function ImportCenterClient({ brandId: initialBrandId, brandName:
<p className="mt-1 text-sm text-[var(--admin-text-muted)]">or click to browse</p>
</div>
<p className="text-xs text-[var(--admin-text-muted)]">CSV, XLSX, XLS, TXT · max 5,000 rows · 10MB</p>
<input ref={inputRef} type="file" accept=".csv,.xlsx,.xls,.txt" className="hidden" onChange={(e) => { const f = e.target.files?.[0]; if (f) handleFile(f); }} />
<input aria-label="File upload" ref={inputRef} type="file" accept=".csv,.xlsx,.xls,.txt" className="hidden" onChange={(e) => { const f = e.target.files?.[0]; if (f) handleFile(f); }} />
</div>
{fileName && (
@@ -201,7 +201,7 @@ export default function ImportCenterClient({ brandId: initialBrandId, brandName:
<p className="text-sm font-medium text-green-700 truncate">{fileName}</p>
<p className="text-xs text-green-600">Ready to analyze</p>
</div>
<button onClick={() => { setFileName(""); setBase64Data(""); }} className="text-sm text-green-600 font-medium hover:text-green-700">Change</button>
<button type="button" onClick={() => { setFileName(""); setBase64Data(""); }} className="text-sm text-green-600 font-medium hover:text-green-700">Change</button>
</div>
)}
@@ -209,7 +209,7 @@ export default function ImportCenterClient({ brandId: initialBrandId, brandName:
<div className="rounded-xl bg-red-50 border border-red-200 p-4 text-sm text-red-700">{analysisError}</div>
)}
<button
<button type="button"
onClick={handleAnalyze}
disabled={!base64Data}
className="w-full rounded-xl bg-[var(--admin-accent)] px-6 py-3.5 text-base font-bold text-white hover:bg-[var(--admin-accent-hover)] disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
@@ -265,7 +265,7 @@ export default function ImportCenterClient({ brandId: initialBrandId, brandName:
<p className="text-xs text-[var(--admin-text-muted)] mb-1">Is this wrong?</p>
<div className="flex gap-1">
{(["products", "orders", "stops", "contacts"] as ImportEntityType[]).map((t) => (
<button key={t} onClick={() => overrideType(t)} className={`text-xs px-2 py-1 rounded-lg border transition-colors ${
<button type="button" key={t} onClick={() => overrideType(t)} className={`text-xs px-2 py-1 rounded-lg border transition-colors ${
t === analysis.detectedType ? "bg-[var(--admin-accent)] text-white border-[var(--admin-accent)]" : "border-[var(--admin-border)] text-[var(--admin-text-secondary)] hover:bg-[var(--admin-bg)]"
}`}>{ENTITY_LABELS[t]}</button>
))}
@@ -280,7 +280,7 @@ export default function ImportCenterClient({ brandId: initialBrandId, brandName:
<div className="rounded-xl bg-amber-50 border border-amber-200 p-4">
<p className="text-sm font-medium text-amber-700 mb-2">Issues detected</p>
<ul className="text-xs text-amber-600 space-y-1">
{analysis.warnings.slice(0, 5).map((w, i) => <li key={i}>• {w}</li>)}
{analysis.warnings.slice(0, 5).map((w) => <li key={w}>• {w}</li>)}
{analysis.warnings.length > 5 && <li>...and {analysis.warnings.length - 5} more</li>}
</ul>
</div>
@@ -310,7 +310,7 @@ export default function ImportCenterClient({ brandId: initialBrandId, brandName:
<tr key={header} className="border-t border-[var(--admin-border)] hover:bg-[var(--admin-bg)]">
<td className="px-5 py-2.5 font-medium text-[var(--admin-text-primary)] whitespace-nowrap">{header}</td>
<td className="px-5 py-2.5">
<select
<select aria-label="Select"
value={mappedField ?? ""}
onChange={(e) => updateMapping(header, e.target.value)}
className="rounded-lg border border-[var(--admin-border)] bg-white px-2 py-1 text-xs text-[var(--admin-text-primary)] outline-none focus:border-[var(--admin-accent)]"
@@ -364,10 +364,10 @@ export default function ImportCenterClient({ brandId: initialBrandId, brandName:
{/* Actions */}
<div className="flex gap-3">
<button onClick={() => { setStep("upload"); setAnalysis(null); }} className="rounded-xl border border-[var(--admin-border)] px-6 py-3 text-sm font-medium text-[var(--admin-text-secondary)] hover:bg-[var(--admin-bg)]">
<button type="button" onClick={() => { setStep("upload"); setAnalysis(null); }} className="rounded-xl border border-[var(--admin-border)] px-6 py-3 text-sm font-medium text-[var(--admin-text-secondary)] hover:bg-[var(--admin-bg)]">
← Upload Different File
</button>
<button
<button type="button"
onClick={handleImport}
disabled={!analysis.detectedType || analysis.detectedType === "unknown" || importing}
className="flex-1 rounded-xl bg-[var(--admin-accent)] px-6 py-3 text-base font-bold text-white hover:bg-[var(--admin-accent-hover)] disabled:opacity-50 disabled:cursor-not-allowed"
@@ -394,7 +394,7 @@ export default function ImportCenterClient({ brandId: initialBrandId, brandName:
<p className="mt-2 text-sm text-amber-600">{importResult.errors.length} rows had errors</p>
)}
<div className="mt-6 flex gap-3 justify-center">
<button onClick={() => { setStep("upload"); setAnalysis(null); setFileName(""); setBase64Data(""); setImportResult(null); }} className="rounded-xl border border-[var(--admin-border)] px-6 py-2.5 text-sm font-medium text-[var(--admin-text-secondary)] hover:bg-[var(--admin-bg)]">
<button type="button" onClick={() => { setStep("upload"); setAnalysis(null); setFileName(""); setBase64Data(""); setImportResult(null); }} className="rounded-xl border border-[var(--admin-border)] px-6 py-2.5 text-sm font-medium text-[var(--admin-text-secondary)] hover:bg-[var(--admin-bg)]">
Import Another
</button>
<a href={analysis?.detectedType === "products" ? "/admin/products" : analysis?.detectedType === "orders" ? "/admin/orders" : "/admin"} className="rounded-xl bg-[var(--admin-accent)] px-6 py-2.5 text-sm font-bold text-white hover:bg-[var(--admin-accent-hover)]">
@@ -406,7 +406,7 @@ export default function ImportCenterClient({ brandId: initialBrandId, brandName:
<div className="rounded-2xl bg-[var(--admin-bg)] border border-red-200 p-8 text-center">
<h2 className="text-xl font-bold text-[var(--admin-text-primary)] mb-2">Import Failed</h2>
<p className="text-[var(--admin-text-secondary)]">{importError ?? "An error occurred during import."}</p>
<button onClick={() => setStep("preview")} className="mt-4 rounded-xl border border-[var(--admin-border)] px-6 py-2.5 text-sm font-medium text-[var(--admin-text-secondary)] hover:bg-[var(--admin-bg)]">
<button type="button" onClick={() => setStep("preview")} className="mt-4 rounded-xl border border-[var(--admin-border)] px-6 py-2.5 text-sm font-medium text-[var(--admin-text-secondary)] hover:bg-[var(--admin-bg)]">
← Back to Preview
</button>
</div>
src/app/admin/launch-checklist/page.tsx
+4 -4
View File
@@ -108,7 +108,7 @@ export default function LaunchChecklistPage() {
<div className="h-6 w-px bg-[#e5e5e5]" />
<h1 className="text-lg font-bold text-[#1a1a1a]">Launch Checklist</h1>
</div>
<button className="px-4 py-2 bg-[#faf8f5] border border-[#e5e5e5] rounded-xl text-sm font-medium text-[#1a1a1a] hover:bg-white transition-colors">
<button type="button" className="px-4 py-2 bg-[#faf8f5] border border-[#e5e5e5] rounded-xl text-sm font-medium text-[#1a1a1a] hover:bg-white transition-colors">
Export PDF
</button>
</div>
@@ -159,7 +159,7 @@ export default function LaunchChecklistPage() {
{/* Quick Actions */}
<div className="flex gap-3">
<button className="px-4 py-2 bg-[#1a4d2e] text-white rounded-xl text-sm font-medium hover:bg-[#2d6a4f] transition-colors">
<button type="button" className="px-4 py-2 bg-[#1a4d2e] text-white rounded-xl text-sm font-medium hover:bg-[#2d6a4f] transition-colors">
Mark All Complete
</button>
</div>
@@ -187,7 +187,7 @@ export default function LaunchChecklistPage() {
<div className="divide-y divide-[#f0f0f0]">
{category.items.map((item) => (
<div key={item.id} className="px-6 py-4 flex items-center gap-4 hover:bg-gray-50 transition-colors">
<button className="w-6 h-6 rounded-full border-2 border-gray-300 flex items-center justify-center hover:border-[#1a4d2e] transition-colors">
<button type="button" className="w-6 h-6 rounded-full border-2 border-gray-300 flex items-center justify-center hover:border-[#1a4d2e] transition-colors">
<CheckCircle2 className="w-4 h-4 text-emerald-500 opacity-0" />
</button>
<div className="flex-1">
@@ -208,7 +208,7 @@ export default function LaunchChecklistPage() {
<div className="mt-12 bg-gradient-to-r from-[#1a4d2e] to-[#2d6a4f] rounded-2xl p-8 text-center text-white">
<h2 className="text-2xl font-bold mb-2">Ready to launch?</h2>
<p className="text-white/80 mb-6">When all items are complete, you&apos;re ready to go live!</p>
<button className="px-6 py-3 bg-white text-[#1a4d2e] rounded-xl font-medium hover:bg-[#faf8f5] transition-colors">
<button type="button" className="px-6 py-3 bg-white text-[#1a4d2e] rounded-xl font-medium hover:bg-[#faf8f5] transition-colors">
Mark Launch Complete
</button>
</div>
src/app/admin/me/AdminMeClient.tsx
+4 -4
View File
@@ -89,7 +89,7 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
</div>
</div>
{!editing && (
<button
<button type="button"
onClick={() => setEditing(true)}
className="rounded-lg border px-4 py-2 text-sm font-medium transition-colors"
style={{
@@ -123,7 +123,7 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
<form onSubmit={handleSaveProfile} className="mt-6 space-y-4">
<div>
<label htmlFor="me-display-name" className="block text-sm font-medium" style={{ color: "var(--admin-text-primary)" }}>Display Name</label>
<input
<input aria-label="Your Name"
id="me-display-name"
type="text"
value={displayName}
@@ -139,7 +139,7 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
</div>
<div>
<label htmlFor="me-phone" className="block text-sm font-medium" style={{ color: "var(--admin-text-primary)" }}>Phone Number</label>
<input
<input aria-label="+1 (555) 000 0000"
id="me-phone"
type="tel"
value={phoneNumber}
@@ -201,7 +201,7 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
<form onSubmit={handleEmailChange} className="mt-4 space-y-3">
<div>
<label htmlFor="me-new-email" className="block text-sm font-medium" style={{ color: "var(--admin-text-primary)" }}>New Email Address</label>
<input
<input aria-label="New@example.com"
id="me-new-email"
type="email"
value={newEmail}
src/app/admin/orders/page.tsx
+106
View File
@@ -0,0 +1,106 @@
import { Suspense } from "react";
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";
import { redirect } from "next/navigation";
import { supabase } from "@/lib/supabase";
export const dynamic = "force-dynamic";
export default async function AdminOrdersPage() {
const adminUser = await getAdminUser();
if (!adminUser) return <AdminAccessDenied />;
if (!adminUser.can_manage_orders) {
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 = activeBrandId
? stops.filter((s) => s.brand_id === activeBrandId)
: stops;
const brandOrders = activeBrandId
? orders.filter(
(o) =>
o.stops && brandStops.some((s) => s.id === o.stop_id)
)
: orders;
// Fetch active products for this brand (for admin "New Order" item picker)
let brandProducts: Array<{ id: string; name: string; price: number; type?: string | null; active?: boolean }> = [];
try {
let prodQuery = supabase
.from("products")
.select("id, name, price, type, active")
.eq("active", true)
.is("deleted_at", null)
.order("name")
.limit(200);
if (activeBrandId) {
prodQuery = prodQuery.eq("brand_id", activeBrandId);
}
const { data: prods } = await prodQuery;
brandProducts = (prods ?? []).map((p) => ({
id: String(p.id),
name: String(p.name ?? ""),
price: Number(p.price),
type: p.type as string | null ?? null,
active: Boolean(p.active ?? true),
}));
} catch {
// non-fatal for the orders list
}
return (
<div className="min-h-screen" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="px-4 sm:px-6 md:px-8 pt-4 sm:pt-6">
<p className="ha-eyebrow mb-2">Operations</p>
<PageHeader
title="Orders"
subtitle="View, filter, and manage customer orders."
icon={
<svg className="h-5 w-5 sm:h-6 sm:w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/>
<path d="M3 6h18"/>
<path d="M16 10a4 4 0 0 1-8 0"/>
</svg>
}
/>
</div>
{/* Content */}
<div className="px-4 sm:px-6 md:px-8 py-4 sm:py-6">
<div
className="rounded-2xl border overflow-hidden"
style={{
borderColor: "var(--admin-border)",
backgroundColor: "var(--admin-card-bg)",
}}
>
<Suspense fallback={null}>
<AdminOrdersPanel
initialOrders={brandOrders}
initialStops={brandStops}
initialProducts={brandProducts}
brandId={activeBrandId}
/>
</Suspense>
</div>
</div>
</div>
);
}
src/app/admin/page.tsx
+9 -5
View File
@@ -32,7 +32,7 @@ export default async function AdminPage() {
// so a transient DB/network failure can't crash the whole admin page.
let dashboardBrandId: string | null = adminUser ? await getActiveBrandId(adminUser) : null;
if (!dashboardBrandId && adminUser?.role === "platform_admin") {
// Direct pg query (the legacy query-builder shim returned empty results).
// Direct pg query (the supabase shim returns empty results).
// This ensures a platform_admin sees real dashboard stats even on first login
// before they have chosen an active brand.
try {
@@ -62,7 +62,7 @@ export default async function AdminPage() {
enabledAddons = o.enabledAddons;
} else {
// Fallback to per-feature flag check (matches prior behavior)
for (const key of [
const featureKeys = [
"harvest_reach",
"wholesale_portal",
"water_log",
@@ -70,9 +70,13 @@ export default async function AdminPage() {
"sms_campaigns",
"square_sync",
"route_trace",
] as const) {
enabledAddons[key] = await isFeatureEnabled(dashboardBrandId, key);
}
] as const;
const featureFlags = await Promise.all(
featureKeys.map((key) => isFeatureEnabled(dashboardBrandId, key)),
);
featureKeys.forEach((key, i) => {
enabledAddons[key] = featureFlags[i];
});
}
}
src/app/admin/pickup/page.tsx
+4 -2
View File
@@ -9,8 +9,10 @@ const PICKUP_WINDOW_MS = 72 * 60 * 60 * 1000;
const pickedUpCutoff = new Date(Date.now() - PICKUP_WINDOW_MS);
export default async function DriverPickupPage() {
const adminUser = await getAdminUser();
const { orders, stops } = await getAdminOrders();
const [adminUser, { orders, stops }] = await Promise.all([
getAdminUser(),
getAdminOrders(),
]);
// Filter stops by brand if scoped
const brandStops = adminUser?.brand_id
src/app/admin/products/[id]/page.tsx
+161
View File
@@ -0,0 +1,161 @@
import { supabase } from "@/lib/supabase";
import ProductEditForm from "@/components/admin/ProductEditForm";
import { getAdminUser } from "@/lib/admin-permissions";
import { PageHeader, AdminBadge } from "@/components/admin/design-system";
import { Package as PackageIcon } from "lucide-react";
import AdminAccessDenied from "@/components/admin/AdminAccessDenied";
import { redirect } from "next/navigation";
import Link from "next/link";
type ProductDetailPageProps = {
params: Promise<{
id: string;
}>;
};
interface Product {
id: string;
brand_id: string;
name: string;
description: string | null;
price: number;
active: boolean;
type: string | null;
image_url: string | null;
is_taxable: boolean;
pickup_type: string | null;
brands?: { name: string; slug: string };
}
interface Brand {
id: string;
name: string;
slug: string;
}
export default async function ProductDetailPage({ params }: ProductDetailPageProps) {
const { id } = await params;
const [
{ data: product, error },
{ data: brands },
adminUser,
] = await Promise.all([
supabase.from("products").select("*, brands(name, slug)").eq("id", id).single() as unknown as Promise<{ data: Product | null; error: { message: string } | null }>,
supabase.from("brands").select("id, name, slug") as unknown as Promise<{ data: Brand[] | null }>,
getAdminUser(),
]);
if (!adminUser) return <AdminAccessDenied />;
if (!adminUser.can_manage_products) redirect("/admin/pickup");
if (adminUser?.brand_id && product?.brand_id !== adminUser.brand_id) {
return <AdminAccessDenied />;
}
if (error || !product) {
return (
<main className="min-h-screen bg-[var(--admin-bg)] px-4 sm:px-6 md:px-8 py-6 sm:py-8">
<div className="mx-auto max-w-4xl">
<h1 className="text-3xl font-bold text-[var(--admin-danger)]">Product not found</h1>
<pre className="mt-4 rounded-xl bg-[var(--admin-card-bg)] border border-[var(--admin-border)] p-4 text-sm text-[var(--admin-text-muted)]">
{error?.message ?? "Product not found"}
</pre>
<Link
href="/admin/products"
className="mt-4 inline-block text-sm text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)]"
>
← Back to Products
</Link>
</div>
</main>
);
}
return (
<main className="min-h-screen bg-[var(--admin-bg)] px-4 sm:px-6 md:px-8 py-6 sm:py-8">
<div className="mx-auto max-w-4xl">
<div className="ha-eyebrow mb-2">Operations</div>
<PageHeader
icon={<PackageIcon className="h-5 w-5" strokeWidth={1.75} />}
title="Edit product"
subtitle="Update product details, pricing, and availability."
actions={
<AdminBadge tone={product.active ? "success" : "neutral"} dot>
{product.active ? "Active" : "Inactive"}
</AdminBadge>
}
/>
<div className="mb-6">
<Link
href="/admin/products"
className="text-sm text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] transition-colors"
>
← Back to Products
</Link>
</div>
<div className="rounded-2xl bg-[var(--admin-card-bg)] p-8 shadow-sm border border-[var(--admin-border)]">
<div className="flex items-start justify-between">
<div>
<p className="text-sm font-semibold uppercase tracking-wide text-[var(--admin-text-muted)]">
{product.brands?.name}
</p>
<h1 className="mt-2 text-3xl font-bold text-[var(--admin-text-primary)]">
{product.name}
</h1>
<p className="mt-2 text-lg text-[var(--admin-text-secondary)]">
{product.description}
</p>
</div>
</div>
<div className="mt-6 grid grid-cols-2 gap-6">
<div>
<p className="text-sm font-medium text-[var(--admin-text-muted)]">Price</p>
<p
className="mt-1 text-2xl font-bold text-[var(--admin-text-primary)]"
style={{ fontFamily: "var(--font-fragment-mono)", fontVariantNumeric: "tabular-nums" }}
>
${Number(product.price).toFixed(2)}
</p>
</div>
<div>
<p className="text-sm font-medium text-[var(--admin-text-muted)]">Type</p>
<p className="mt-1 text-lg font-semibold text-[var(--admin-text-primary)]">
{product.type}
</p>
</div>
</div>
</div>
<div className="mt-6 rounded-2xl bg-[var(--admin-card-bg)] p-8 shadow-sm border border-[var(--admin-border)]">
<h2 className="text-2xl font-bold text-[var(--admin-text-primary)]">Edit Product</h2>
<p className="mt-1 text-[var(--admin-text-muted)]">
Update product details, pricing, and availability.
</p>
<div className="mt-6">
<ProductEditForm
product={{
id: product.id,
name: product.name,
description: product.description ?? "",
price: Number(product.price),
type: product.type ?? "pickup",
active: product.active,
brand_id: product.brand_id,
image_url: product.image_url ?? "",
is_taxable: product.is_taxable,
pickup_type: product.pickup_type ?? "pickup",
}}
brands={brands ?? []}
/>
</div>
</div>
</div>
</main>
);
}
src/app/admin/products/import/page.tsx
+7 -7
View File
@@ -93,7 +93,7 @@ Citrus Gift Box,Seasonal citrus assortment,34.99,Shipping,TRUE,
Upload a CSV file to bulk-create or update products. Matching by product name within brand.
</p>
</div>
<button
<button type="button"
onClick={() => {
setCsvText(SAMPLE_CSV);
handlePreview(SAMPLE_CSV);
@@ -107,7 +107,7 @@ Citrus Gift Box,Seasonal citrus assortment,34.99,Shipping,TRUE,
{/* Brand ID */}
<div className="mb-4">
<label htmlFor="import-products-brand" className="block text-sm font-medium text-stone-700">Brand ID</label>
<input
<input aria-label="64294306 5f42 463d A5e8 2ad6c81a96de (Tuxedo)"
id="import-products-brand"
type="text"
value={brandId}
@@ -120,7 +120,7 @@ Citrus Gift Box,Seasonal citrus assortment,34.99,Shipping,TRUE,
{/* File upload */}
<div className="mb-4 rounded-2xl bg-white p-6 shadow-xl shadow-stone-200/50">
<label htmlFor="import-products-csv" className="mb-2 block text-sm font-medium text-stone-700">Upload CSV</label>
<input
<input aria-label="Import Products Csv"
id="import-products-csv"
ref={fileRef}
type="file"
@@ -132,7 +132,7 @@ Citrus Gift Box,Seasonal citrus assortment,34.99,Shipping,TRUE,
Or paste CSV content below:
</p>
<label htmlFor="import-products-text" className="sr-only">CSV text</label>
<textarea
<textarea aria-label="Name,description,price,type,active,image Url"
id="import-products-text"
value={csvText}
onChange={(e) => setCsvText(e.target.value)}
@@ -140,7 +140,7 @@ Citrus Gift Box,Seasonal citrus assortment,34.99,Shipping,TRUE,
className="mt-2 w-full rounded-xl border border-stone-300 px-4 py-3 text-sm font-mono outline-none focus:border-blue-500"
placeholder="name,description,price,type,active,image_url"
/>
<button
<button type="button"
onClick={() => handlePreview()}
className="mt-3 rounded-xl border border-stone-300 px-4 py-2 text-sm font-medium text-stone-700 hover:bg-stone-100"
>
@@ -169,7 +169,7 @@ Citrus Gift Box,Seasonal citrus assortment,34.99,Shipping,TRUE,
<h2 className="text-lg font-semibold text-stone-950">
Preview ({preview.length} rows)
</h2>
<button
<button type="button"
onClick={handleImport}
disabled={!brandId || importing}
className="rounded-xl bg-blue-600 px-6 py-3 text-sm font-bold text-white disabled:opacity-50 hover:bg-blue-500"
@@ -227,7 +227,7 @@ Citrus Gift Box,Seasonal citrus assortment,34.99,Shipping,TRUE,
{result.errors.length > 0 && (
<ul className="mt-3 space-y-1">
{result.errors.map((e, i) => (
<li key={i} className="text-sm text-red-600">
<li key={`${e.product}-${i}`} className="text-sm text-red-600">
{e.product && `${e.product}: `}{e.error}
</li>
))}
src/app/admin/reports/page.tsx
+42
View File
@@ -0,0 +1,42 @@
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";
import { redirect } from "next/navigation";
export default async function ReportsPage() {
const adminUser = await getAdminUser();
if (!adminUser) return <AdminAccessDenied />;
if (!adminUser.can_manage_reports) redirect("/admin/pickup");
const isPlatformAdmin = adminUser.role === "platform_admin";
const { data: brands } = await supabase
.from("brands")
.select("id, name")
.order("name") as unknown as { data: { id: string; name: string }[] | null };
const initialBrandId = isPlatformAdmin
? null
: await getActiveBrandId(adminUser);
return (
<main className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-7xl">
<PageHeader
title="Reports"
subtitle="Operational visibility across orders, fulfillment, contacts, and campaigns."
/>
<ReportsDashboard
brands={brands ?? []}
initialBrandId={initialBrandId}
isPlatformAdmin={isPlatformAdmin}
brandId={adminUser.brand_id}
/>
</div>
</main>
);
}
src/app/admin/route-trace/lots/[id]/page.tsx
+1 -2
View File
@@ -21,8 +21,7 @@ export async function generateMetadata({ params }: { params: Promise<{ id: strin
}
export default async function LotDetailPage({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
const adminUser = await getAdminUser();
const [{ id }, adminUser] = await Promise.all([params, getAdminUser()]);
if (!adminUser) redirect("/login");
const effectiveBrandId = adminUser.brand_id ?? "64294306-5f42-463d-a5e8-2ad6c81a96de";
src/app/admin/sales/import/page.tsx
+6 -6
View File
@@ -91,7 +91,7 @@ John Doe,john@example.com,555-5678,{STOP_ID},{PRODUCT_ID},1,shipping
<div className="mb-4">
<label htmlFor="import-orders-brand" className="block text-sm font-medium text-stone-600">Brand ID</label>
<input
<input aria-label="64294306 5f42 463d A5e8 2ad6c81a96de"
id="import-orders-brand"
type="text"
value={brandId}
@@ -103,17 +103,17 @@ John Doe,john@example.com,555-5678,{STOP_ID},{PRODUCT_ID},1,shipping
<div className="mb-4 card p-6">
<label htmlFor="import-orders-csv" className="block text-sm font-medium text-stone-600 mb-2">Upload CSV</label>
<input id="import-orders-csv" ref={fileRef} type="file" accept=".csv" onChange={handleFile} className="w-full text-sm text-stone-500" />
<input aria-label="Import Orders Csv" id="import-orders-csv" ref={fileRef} type="file" accept=".csv" onChange={handleFile} className="w-full text-sm text-stone-500" />
<p className="mt-2 text-xs text-stone-500">Paste CSV content below:</p>
<label htmlFor="import-orders-text" className="sr-only">CSV text</label>
<textarea
<textarea aria-label="Import Orders Text"
id="import-orders-text"
value={csvText}
onChange={(e) => setCsvText(e.target.value)}
rows={6}
className="mt-2 w-full rounded-xl border border-stone-300 px-4 py-3 text-sm font-mono outline-none focus:border-blue-500 bg-white"
/>
<button
<button type="button"
onClick={() => handlePreview()}
className="mt-3 rounded-xl border border-stone-300 px-4 py-2 text-sm font-medium text-stone-700 hover:bg-stone-100"
>
@@ -136,7 +136,7 @@ John Doe,john@example.com,555-5678,{STOP_ID},{PRODUCT_ID},1,shipping
<div className="mb-4 card p-6">
<div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-semibold text-stone-950">Preview ({preview.length} rows)</h2>
<button
<button type="button"
onClick={handleImport}
disabled={!brandId || importing}
className="rounded-xl bg-blue-600 px-6 py-3 text-sm font-bold text-white disabled:opacity-50 hover:bg-blue-700"
@@ -181,7 +181,7 @@ John Doe,john@example.com,555-5678,{STOP_ID},{PRODUCT_ID},1,shipping
{result.errors.length > 0 && (
<ul className="mt-3 space-y-1">
{result.errors.map((e, i) => (
<li key={i} className="text-sm text-red-600">Row {e.row}: {e.error}</li>
<li key={`row-${e.row}-${i}`} className="text-sm text-red-600">Row {e.row}: {e.error}</li>
))}
</ul>
)}
src/app/admin/settings/ai/AIClient.tsx
+127 -107
View File
@@ -1,6 +1,6 @@
"use client";
import { useState, useEffect } from "react";
import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { AdminCard } from "@/components/admin/design-system";
import { setAIProviderSettings } from "@/actions/integrations/ai-providers";
@@ -96,7 +96,7 @@ function ToolCard({ tool, isConnected, onOpen }: ToolCardProps) {
</div>
<div className="mt-4 pt-4" style={{ borderTop: '1px solid var(--admin-border-light)' }}>
{tool.status === "available" && (
<button
<button type="button"
onClick={() => isConnected && onOpen(tool)}
disabled={!isConnected}
className="w-full rounded-xl px-4 py-2.5 text-sm font-semibold transition-all"
@@ -113,7 +113,7 @@ function ToolCard({ tool, isConnected, onOpen }: ToolCardProps) {
</button>
)}
{tool.status === "coming_soon" && (
<button disabled className="w-full rounded-xl px-4 py-2.5 text-sm font-semibold cursor-not-allowed"
<button type="button" disabled className="w-full rounded-xl px-4 py-2.5 text-sm font-semibold cursor-not-allowed"
style={{
background: 'rgba(0, 0, 0, 0.04)',
color: 'rgba(0, 0, 0, 0.4)',
@@ -122,7 +122,7 @@ function ToolCard({ tool, isConnected, onOpen }: ToolCardProps) {
</button>
)}
{tool.status === "experimental" && (
<button disabled className="w-full rounded-xl px-4 py-2.5 text-sm font-semibold cursor-not-allowed"
<button type="button" disabled className="w-full rounded-xl px-4 py-2.5 text-sm font-semibold cursor-not-allowed"
style={{
background: 'rgba(171, 162, 120, 0.15)',
color: '#92781e',
@@ -194,7 +194,7 @@ function ConnectionStatusBanner({ isConnected, availableCount, onConfigure }: {
<p className="font-semibold" style={{ color: '#92781e' }}>AI Not Configured</p>
<p className="text-sm" style={{ color: '#a6953f' }}>Add your API key to enable AI tools.</p>
</div>
<button
<button type="button"
onClick={onConfigure}
className="rounded-xl px-4 py-2 text-sm font-bold transition-all"
style={{
@@ -320,28 +320,33 @@ const PROVIDERS: ProviderOption[] = [
// ── Model Input ───────────────────────────────────────────────────────────────
function ModelInput({
currentModel,
function ModelInput({
currentModel,
brandId,
onChange
}: {
onChange
}: {
currentModel: string;
brandId: string;
onChange: (model: string) => void;
}) {
const [customModel, setCustomModel] = useState(currentModel);
// Uncontrolled input: the editable buffer is the DOM input itself.
// The parent uses `key={currentModel}` so that when the prop changes
// externally, this component fully remounts and `defaultValue` is
// re-applied from the new prop — no stale copy.
const inputRef = useRef<HTMLInputElement>(null);
const [saving, setSaving] = useState(false);
const [saved, setSaved] = useState(false);
const [error, setError] = useState<string | null>(null);
const handleSave = async () => {
if (!customModel.trim()) return;
const value = inputRef.current?.value ?? "";
if (!value.trim()) return;
setSaving(true);
setError(null);
const result = await setAIProviderSettings(brandId, { model: customModel.trim() });
const result = await setAIProviderSettings(brandId, { model: value.trim() });
if (result.success) {
onChange(customModel.trim());
onChange(value.trim());
setSaved(true);
setTimeout(() => setSaved(false), 2000);
} else {
@@ -359,10 +364,11 @@ function ModelInput({
</h2>
</div>
<div className="flex gap-3">
<input
<input aria-label="., Gpt 4o, Claude 3 5 Sonnet 20241002"
ref={inputRef}
type="text"
value={customModel}
onChange={(e) => setCustomModel(e.target.value)}
defaultValue={currentModel}
key={currentModel}
placeholder="e.g., gpt-4o, claude-3-5-sonnet-20241002"
className="flex-1 px-4 py-2.5 rounded-xl text-sm"
style={{
@@ -371,15 +377,15 @@ function ModelInput({
color: 'var(--admin-text-primary)',
}}
/>
<button
<button type="button"
onClick={handleSave}
disabled={saving || !customModel.trim()}
disabled={saving}
className="px-5 py-2.5 rounded-xl text-sm font-semibold text-white transition-all"
style={{
background: 'linear-gradient(135deg, #ca7543 0%, #d4865a 100%)',
boxShadow: '0 2px 8px rgba(202, 117, 67, 0.25)',
opacity: (saving || !customModel.trim()) ? 0.5 : 1,
cursor: (saving || !customModel.trim()) ? 'not-allowed' : 'pointer',
opacity: saving ? 0.5 : 1,
cursor: saving ? 'not-allowed' : 'pointer',
}}
>
{saving ? "..." : saved ? "✓" : "Save"}
@@ -421,7 +427,7 @@ function ProviderSelector({
</div>
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
{PROVIDERS.map((provider) => (
<button
<button type="button"
key={provider.id}
onClick={() => handleSelect(provider.id)}
className="p-4 rounded-xl text-center transition-all"
@@ -515,7 +521,7 @@ function CampaignWriterTool({ brandId, brandName }: { brandId: string; brandName
<div className="space-y-4">
<div>
<label htmlFor="ai-cw-topic" className="block text-sm font-medium mb-1" style={labelStyle}>What do you want to communicate?</label>
<textarea
<textarea aria-label="., 'Remind Customers About The New Sweet Corn Season Starting Next Week, Emphasize Freshness And Local Delivery'"
id="ai-cw-topic"
value={topic}
onChange={(e) => setTopic(e.target.value)}
@@ -525,7 +531,7 @@ function CampaignWriterTool({ brandId, brandName }: { brandId: string; brandName
style={textareaStyle}
/>
</div>
<button
<button type="button"
onClick={handleGenerate}
disabled={loading || !topic.trim()}
className={btnPrimaryClass}
@@ -541,7 +547,7 @@ function CampaignWriterTool({ brandId, brandName }: { brandId: string; brandName
{results.length > 0 && (
<div className="space-y-3">
{results.map((idea, i) => (
<AdminCard key={i} className="p-4">
<AdminCard key={`idea-${i}-${idea.subject}`} className="p-4">
<p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--admin-accent)' }}>Idea {i + 1}</p>
<p className="text-sm font-medium mb-1" style={{ color: 'var(--admin-text-primary)' }}><span style={{ color: 'var(--admin-text-muted)' }}>Subject:</span> {idea.subject}</p>
<p className="text-sm mt-2 whitespace-pre-line" style={{ color: 'var(--admin-text-secondary)', lineHeight: 1.6 }}>{idea.body}</p>
@@ -593,22 +599,22 @@ function ProductWriterTool({ brandId }: { brandId: string }) {
<label htmlFor="ai-pw-product-name" className="block text-sm font-medium mb-1" style={labelStyle}>
Product Name <span className="text-red-400 ml-0.5" aria-hidden="true">*</span>
</label>
<input id="ai-pw-product-name" type="text" value={productName} onChange={(e) => setProductName(e.target.value)} placeholder="Sweet Corn" required aria-required="true" className={inputBaseClass} style={inputStyle} />
<input aria-label="Sweet Corn" id="ai-pw-product-name" type="text" value={productName} onChange={(e) => setProductName(e.target.value)} placeholder="Sweet Corn" required aria-required="true" className={inputBaseClass} style={inputStyle} />
</div>
<div>
<label htmlFor="ai-pw-category" className="block text-sm font-medium mb-1" style={labelStyle}>Category</label>
<input id="ai-pw-category" type="text" value={category} onChange={(e) => setCategory(e.target.value)} placeholder="Vegetables" className={inputBaseClass} style={inputStyle} />
<input aria-label="Vegetables" id="ai-pw-category" type="text" value={category} onChange={(e) => setCategory(e.target.value)} placeholder="Vegetables" className={inputBaseClass} style={inputStyle} />
</div>
<div>
<label htmlFor="ai-pw-price" className="block text-sm font-medium mb-1" style={labelStyle}>Price</label>
<input id="ai-pw-price" type="text" value={price} onChange={(e) => setPrice(e.target.value)} placeholder="$4.50" className={inputBaseClass} style={inputStyle} />
<input aria-label="$4.50" id="ai-pw-price" type="text" value={price} onChange={(e) => setPrice(e.target.value)} placeholder="$4.50" className={inputBaseClass} style={inputStyle} />
</div>
<div>
<label htmlFor="ai-pw-unit" className="block text-sm font-medium mb-1" style={labelStyle}>Unit</label>
<input id="ai-pw-unit" type="text" value={unit} onChange={(e) => setUnit(e.target.value)} placeholder="per dozen" className={inputBaseClass} style={inputStyle} />
<input aria-label="Per Dozen" id="ai-pw-unit" type="text" value={unit} onChange={(e) => setUnit(e.target.value)} placeholder="per dozen" className={inputBaseClass} style={inputStyle} />
</div>
</div>
<button
<button type="button"
onClick={handleGenerate}
disabled={loading || !productName.trim()}
className={btnPrimaryClass}
@@ -698,7 +704,7 @@ function ReportExplainerTool({ brandId }: { brandId: string }) {
<div className="grid grid-cols-2 gap-4">
<div>
<label htmlFor="ai-rep-type" className="block text-sm font-medium mb-1" style={labelStyle}>Report Type</label>
<select
<select aria-label="Ai Rep Type"
id="ai-rep-type"
value={reportType}
onChange={(e) => setReportType(e.target.value)}
@@ -712,7 +718,7 @@ function ReportExplainerTool({ brandId }: { brandId: string }) {
</div>
<div>
<label htmlFor="ai-rep-range" className="block text-sm font-medium mb-1" style={labelStyle}>Date Range</label>
<input
<input aria-label="., Last 7 Days, March 2026"
id="ai-rep-range"
type="text"
value={dateRange}
@@ -726,7 +732,7 @@ function ReportExplainerTool({ brandId }: { brandId: string }) {
<div className="rounded-lg p-3 text-xs" style={{ backgroundColor: 'rgba(171, 162, 120, 0.1)', border: '1px solid rgba(171, 162, 120, 0.2)', color: '#92781e' }}>
AI-generated suggestions — review before use. Not a substitute for business judgment.
</div>
<button
<button type="button"
onClick={handleExplain}
disabled={loading}
className={btnPrimaryClass}
@@ -744,8 +750,8 @@ function ReportExplainerTool({ brandId }: { brandId: string }) {
<AdminCard className="p-5">
<p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--admin-text-muted)' }}>Key Insights</p>
<ul className="space-y-2">
{result.keyInsights.map((insight, i) => (
<li key={i} className="flex items-start gap-2 text-sm" style={{ color: 'var(--admin-text-secondary)' }}>
{result.keyInsights.map((insight) => (
<li key={insight} className="flex items-start gap-2 text-sm" style={{ color: 'var(--admin-text-secondary)' }}>
<span style={{ color: 'var(--admin-accent)' }}>→</span>
<span>{insight}</span>
</li>
@@ -755,15 +761,15 @@ function ReportExplainerTool({ brandId }: { brandId: string }) {
<AdminCard className="p-5">
<p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--admin-text-muted)' }}>Suggested Actions</p>
<ul className="space-y-2">
{result.suggestedActions.map((action, i) => (
<li key={i} className="flex items-start gap-2 text-sm" style={{ color: 'var(--admin-text-secondary)' }}>
{result.suggestedActions.map((action) => (
<li key={action} className="flex items-start gap-2 text-sm" style={{ color: 'var(--admin-text-secondary)' }}>
<span style={{ color: 'var(--admin-success)' }}>✓</span>
<span>{action}</span>
</li>
))}
</ul>
</AdminCard>
<button
<button type="button"
onClick={() => copyToClipboard(JSON.stringify(result, null, 2))}
className="text-xs flex items-center gap-1 transition-colors"
style={{ color: 'var(--admin-text-muted)' }}
@@ -864,7 +870,7 @@ function PricingAdvisorTool({ brandId }: { brandId: string }) {
<label htmlFor="ai-pa-product-name" className="block text-sm font-medium mb-1" style={labelStyle}>
Product Name <span className="text-red-400 ml-0.5" aria-hidden="true">*</span>
</label>
<input
<input aria-label="Sweet Corn"
id="ai-pa-product-name"
type="text"
value={productName}
@@ -881,11 +887,11 @@ function PricingAdvisorTool({ brandId }: { brandId: string }) {
<div className="space-y-2">
<div className="flex items-center justify-between">
<label className="block text-sm font-medium" style={labelStyle}>Price Tiers</label>
<button onClick={addTier} className="text-xs transition-colors" style={{ color: 'var(--admin-accent)' }}>+ Add Tier</button>
<button type="button" onClick={addTier} className="text-xs transition-colors" style={{ color: 'var(--admin-accent)' }}>+ Add Tier</button>
</div>
{priceTiers.map((tier, i) => (
<div key={i} className="flex items-center gap-2">
<input
<div key={`tier-${i}-${tier.tier}-${tier.price}`} className="flex items-center gap-2">
<input aria-label="., Wholesale"
type="text"
value={tier.tier}
onChange={(e) => updateTier(i, "tier", e.target.value)}
@@ -895,7 +901,7 @@ function PricingAdvisorTool({ brandId }: { brandId: string }) {
/>
<div className="relative flex-1">
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm" style={{ color: 'var(--admin-text-muted)' }}>$</span>
<input
<input aria-label="0.00"
type="text"
value={tier.price}
onChange={(e) => updateTier(i, "price", e.target.value)}
@@ -905,7 +911,7 @@ function PricingAdvisorTool({ brandId }: { brandId: string }) {
/>
</div>
{priceTiers.length > 1 && (
<button onClick={() => removeTier(i)} className="text-xs px-2 transition-colors" style={{ color: 'var(--admin-danger)' }}>✕</button>
<button type="button" onClick={() => removeTier(i)} className="text-xs px-2 transition-colors" style={{ color: 'var(--admin-danger)' }}>✕</button>
)}
</div>
))}
@@ -915,7 +921,7 @@ function PricingAdvisorTool({ brandId }: { brandId: string }) {
<div className="space-y-2">
<div className="flex items-center justify-between">
<label className="block text-sm font-medium" style={labelStyle}>Historical Sales</label>
<button onClick={addSale} className="text-xs transition-colors" style={{ color: 'var(--admin-accent)' }}>+ Add Row</button>
<button type="button" onClick={addSale} className="text-xs transition-colors" style={{ color: 'var(--admin-accent)' }}>+ Add Row</button>
</div>
<AdminCard className="divide-y" style={{ border: '1px solid var(--admin-border)' }}>
<div className="grid grid-cols-4 gap-2 px-3 py-2">
@@ -925,8 +931,8 @@ function PricingAdvisorTool({ brandId }: { brandId: string }) {
<span />
</div>
{historicalSales.map((sale, i) => (
<div key={i} className="grid grid-cols-4 gap-2 px-3 py-2 items-center">
<input
<div key={`sale-${i}-${sale.date}`} className="grid grid-cols-4 gap-2 px-3 py-2 items-center">
<input aria-label="2026 04 01"
type="text"
value={sale.date}
onChange={(e) => updateSale(i, "date", e.target.value)}
@@ -934,7 +940,7 @@ function PricingAdvisorTool({ brandId }: { brandId: string }) {
className="rounded-lg border px-2 py-1.5 text-xs"
style={{ borderColor: 'var(--admin-border)', backgroundColor: 'var(--admin-bg)', color: 'var(--admin-text-primary)' }}
/>
<input
<input aria-label="120"
type="text"
value={sale.units_sold}
onChange={(e) => updateSale(i, "units_sold", e.target.value)}
@@ -944,7 +950,7 @@ function PricingAdvisorTool({ brandId }: { brandId: string }) {
/>
<div className="relative">
<span className="absolute left-2 top-1/2 -translate-y-1/2 text-xs" style={{ color: 'var(--admin-text-muted)' }}>$</span>
<input
<input aria-label="540"
type="text"
value={sale.revenue}
onChange={(e) => updateSale(i, "revenue", e.target.value)}
@@ -954,7 +960,7 @@ function PricingAdvisorTool({ brandId }: { brandId: string }) {
/>
</div>
{historicalSales.length > 1 && (
<button onClick={() => removeSale(i)} className="text-xs justify-self-end transition-colors" style={{ color: 'var(--admin-danger)' }}>✕</button>
<button type="button" onClick={() => removeSale(i)} className="text-xs justify-self-end transition-colors" style={{ color: 'var(--admin-danger)' }}>✕</button>
)}
</div>
))}
@@ -963,7 +969,7 @@ function PricingAdvisorTool({ brandId }: { brandId: string }) {
<div className="rounded-lg p-3 text-xs" style={{ backgroundColor: 'rgba(171, 162, 120, 0.1)', border: '1px solid rgba(171, 162, 120, 0.2)', color: '#92781e' }}>
AI-generated suggestions — review before use. Not a substitute for business judgment.
</div>
<button
<button type="button"
onClick={handleAnalyze}
disabled={loading || !productName.trim()}
className={btnPrimaryClass}
@@ -983,7 +989,7 @@ function PricingAdvisorTool({ brandId }: { brandId: string }) {
<p className="text-sm" style={{ color: 'var(--admin-text-secondary)', lineHeight: 1.6 }}>{result.currentState}</p>
</AdminCard>
{result.recommendations.map((rec, i) => (
<AdminCard key={i} className="p-5">
<AdminCard key={`rec-${i}-${rec.productName}-${rec.direction}`} className="p-5">
<div className="flex items-center justify-between mb-2">
<p className="text-sm font-semibold" style={{ color: 'var(--admin-text-primary)' }}>{rec.productName}</p>
<span
@@ -1011,8 +1017,8 @@ function PricingAdvisorTool({ brandId }: { brandId: string }) {
<AdminCard className="p-5" style={{ backgroundColor: 'rgba(16, 185, 129, 0.05)', border: '1px solid rgba(16, 185, 129, 0.2)' }}>
<p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#047857' }}>Opportunities</p>
<ul className="space-y-1">
{result.opportunities.map((opp, i) => (
<li key={i} className="text-sm" style={{ color: '#059669' }}>• {opp}</li>
{result.opportunities.map((opp) => (
<li key={opp} className="text-sm" style={{ color: '#059669' }}>• {opp}</li>
))}
</ul>
</AdminCard>
@@ -1021,13 +1027,13 @@ function PricingAdvisorTool({ brandId }: { brandId: string }) {
<AdminCard className="p-5" style={{ backgroundColor: 'rgba(171, 162, 120, 0.08)', border: '1px solid rgba(171, 162, 120, 0.2)' }}>
<p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#92781e' }}>Warnings</p>
<ul className="space-y-1">
{result.warnings.map((warn, i) => (
<li key={i} className="text-sm" style={{ color: '#a6953f' }}>• {warn}</li>
{result.warnings.map((warn) => (
<li key={warn} className="text-sm" style={{ color: '#a6953f' }}>• {warn}</li>
))}
</ul>
</AdminCard>
)}
<button
<button type="button"
onClick={() => copyToClipboard(JSON.stringify(result, null, 2))}
className="text-xs flex items-center gap-1 transition-colors"
style={{ color: 'var(--admin-text-muted)' }}
@@ -1100,25 +1106,25 @@ function StopBlastAdvisorTool({ brandId }: { brandId: string }) {
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium mb-1" style={labelStyle}>Stop Name *</label>
<input type="text" value={stopName} onChange={(e) => setStopName(e.target.value)} placeholder="Downtown Farmers Market" className={inputBaseClass} style={inputStyle} />
<input aria-label="Downtown Farmers Market" type="text" value={stopName} onChange={(e) => setStopName(e.target.value)} placeholder="Downtown Farmers Market" className={inputBaseClass} style={inputStyle} />
</div>
<div>
<label className="block text-sm font-medium mb-1" style={labelStyle}>Stop Date</label>
<input type="text" value={stopDate} onChange={(e) => setStopDate(e.target.value)} placeholder="2026-06-15" className={inputBaseClass} style={inputStyle} />
<input aria-label="2026 06 15" type="text" value={stopDate} onChange={(e) => setStopDate(e.target.value)} placeholder="2026-06-15" className={inputBaseClass} style={inputStyle} />
</div>
<div>
<label className="block text-sm font-medium mb-1" style={labelStyle}>City</label>
<input type="text" value={city} onChange={(e) => setCity(e.target.value)} placeholder="Greeley" className={inputBaseClass} style={inputStyle} />
<input aria-label="Greeley" type="text" value={city} onChange={(e) => setCity(e.target.value)} placeholder="Greeley" className={inputBaseClass} style={inputStyle} />
</div>
<div>
<label className="block text-sm font-medium mb-1" style={labelStyle}>Customer Count</label>
<input type="text" value={customerCount} onChange={(e) => setCustomerCount(e.target.value)} placeholder="42" className={inputBaseClass} style={inputStyle} />
<input aria-label="42" type="text" value={customerCount} onChange={(e) => setCustomerCount(e.target.value)} placeholder="42" className={inputBaseClass} style={inputStyle} />
</div>
</div>
<div className="rounded-lg p-3 text-xs" style={{ backgroundColor: 'rgba(171, 162, 120, 0.1)', border: '1px solid rgba(171, 162, 120, 0.2)', color: '#92781e' }}>
AI-generated suggestions — review before use. Not a substitute for business judgment.
</div>
<button
<button type="button"
onClick={handleAnalyze}
disabled={loading || !stopName.trim()}
className={btnPrimaryClass}
@@ -1140,7 +1146,7 @@ function StopBlastAdvisorTool({ brandId }: { brandId: string }) {
<AdminCard className="p-5" style={{ backgroundColor: 'rgba(16, 185, 129, 0.05)', border: '1px solid rgba(16, 185, 129, 0.2)' }}>
<p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#047857' }}>Recommended Subject Line</p>
<p className="text-base font-semibold" style={{ color: 'var(--admin-text-primary)' }}>{result.subjectLine}</p>
<button onClick={() => copyToClipboard(result.subjectLine)} className="mt-2 text-xs flex items-center gap-1 transition-colors" style={{ color: 'var(--admin-accent)' }}>
<button type="button" onClick={() => copyToClipboard(result.subjectLine)} className="mt-2 text-xs flex items-center gap-1 transition-colors" style={{ color: 'var(--admin-accent)' }}>
Copy
</button>
</AdminCard>
@@ -1159,7 +1165,7 @@ function StopBlastAdvisorTool({ brandId }: { brandId: string }) {
</span>
</AdminCard>
{result.contentAngles.map((a, i) => (
<AdminCard key={i} className="p-4">
<AdminCard key={`angle-${i}-${a.angle}`} className="p-4">
<p className="text-sm font-semibold mb-1" style={{ color: 'var(--admin-text-primary)' }}>{a.angle}</p>
<p className="text-xs" style={{ color: 'var(--admin-text-muted)' }}>{a.reasoning}</p>
</AdminCard>
@@ -1167,8 +1173,8 @@ function StopBlastAdvisorTool({ brandId }: { brandId: string }) {
{result.warnings.length > 0 && (
<AdminCard className="p-4" style={{ backgroundColor: 'rgba(171, 162, 120, 0.08)', border: '1px solid rgba(171, 162, 120, 0.2)' }}>
<p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#92781e' }}>Warnings</p>
{result.warnings.map((w, i) => (
<p key={i} className="text-xs" style={{ color: '#a6953f' }}>• {w}</p>
{result.warnings.map((w) => (
<p key={w} className="text-xs" style={{ color: '#a6953f' }}>• {w}</p>
))}
</AdminCard>
)}
@@ -1230,7 +1236,7 @@ function CustomerInsightsTool({ brandId }: { brandId: string }) {
</p>
<div>
<label className="block text-sm font-medium mb-1" style={labelStyle}>Ask about your customers</label>
<textarea
<textarea aria-label="., 'Which Customers Haven't Ordered In 45 Days?'"
value={query}
onChange={(e) => setQuery(e.target.value)}
rows={2}
@@ -1241,7 +1247,7 @@ function CustomerInsightsTool({ brandId }: { brandId: string }) {
</div>
<div className="flex flex-wrap gap-2">
{exampleQueries.map((q) => (
<button
<button type="button"
key={q}
onClick={() => { setQuery(q); handleAnalyze(q); }}
className="rounded-full px-3 py-1 text-xs transition-all"
@@ -1258,7 +1264,7 @@ function CustomerInsightsTool({ brandId }: { brandId: string }) {
<div className="rounded-lg p-3 text-xs" style={{ backgroundColor: 'rgba(171, 162, 120, 0.1)', border: '1px solid rgba(171, 162, 120, 0.2)', color: '#92781e' }}>
AI-generated suggestions — review before use. Not a substitute for business judgment.
</div>
<button
<button type="button"
onClick={() => handleAnalyze()}
disabled={loading || !query.trim()}
className={btnPrimaryClass}
@@ -1300,13 +1306,16 @@ function CustomerInsightsTool({ brandId }: { brandId: string }) {
</tr>
</thead>
<tbody>
{result.results.map((row, i) => (
<tr key={i} style={{ borderBottom: '1px solid var(--admin-border-light)' }}>
{Object.values(row).map((v, j) => (
<td key={j} className="px-2 py-1.5" style={{ color: 'var(--admin-text-secondary)' }}>{String(v ?? "—")}</td>
{result.results.map((row) => {
const rowKey = Object.values(row).slice(0, 2).map(v => String(v ?? "")).join("-");
return (
<tr key={rowKey} style={{ borderBottom: '1px solid var(--admin-border-light)' }}>
{Object.entries(row).map(([colKey, v]) => (
<td key={colKey} className="px-2 py-1.5" style={{ color: 'var(--admin-text-secondary)' }}>{String(v ?? "—")}</td>
))}
</tr>
))}
);
})}
</tbody>
</table>
</div>
@@ -1388,7 +1397,7 @@ function RouteOptimizerTool({ brandId }: { brandId: string }) {
</p>
<div>
<label className="block text-sm font-medium mb-1" style={labelStyle}>Start Location</label>
<input
<input aria-label="Warehouse, Greeley CO"
type="text"
value={startLocation}
onChange={(e) => setStartLocation(e.target.value)}
@@ -1401,7 +1410,7 @@ function RouteOptimizerTool({ brandId }: { brandId: string }) {
<div className="space-y-3">
<div className="flex items-center justify-between">
<label className="block text-sm font-medium" style={labelStyle}>Stops</label>
<button
<button type="button"
onClick={addStop}
className="text-xs flex items-center gap-1 transition-colors"
style={{ color: 'var(--admin-accent)' }}
@@ -1410,11 +1419,11 @@ function RouteOptimizerTool({ brandId }: { brandId: string }) {
</button>
</div>
{stops.map((stop, i) => (
<AdminCard key={i} className="p-4 space-y-3">
<AdminCard key={`stop-${i}-${stop.name}-${stop.city}-${stop.state}`} className="p-4 space-y-3">
<div className="flex items-center justify-between">
<span className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--admin-text-muted)' }}>Stop {i + 1}</span>
{stops.length > 2 && (
<button onClick={() => removeStop(i)} className="text-xs transition-colors" style={{ color: 'var(--admin-danger)' }}>
<button type="button" onClick={() => removeStop(i)} className="text-xs transition-colors" style={{ color: 'var(--admin-danger)' }}>
Remove
</button>
)}
@@ -1422,7 +1431,7 @@ function RouteOptimizerTool({ brandId }: { brandId: string }) {
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-xs mb-1" style={{ color: 'var(--admin-text-muted)' }}>Name *</label>
<input
<input aria-label="Farmers Market"
type="text"
value={stop.name}
onChange={(e) => updateStop(i, "name", e.target.value)}
@@ -1433,7 +1442,7 @@ function RouteOptimizerTool({ brandId }: { brandId: string }) {
</div>
<div>
<label className="block text-xs mb-1" style={{ color: 'var(--admin-text-muted)' }}>City *</label>
<input
<input aria-label="Greeley"
type="text"
value={stop.city}
onChange={(e) => updateStop(i, "city", e.target.value)}
@@ -1444,7 +1453,7 @@ function RouteOptimizerTool({ brandId }: { brandId: string }) {
</div>
<div>
<label className="block text-xs mb-1" style={{ color: 'var(--admin-text-muted)' }}>State *</label>
<input
<input aria-label="CO"
type="text"
value={stop.state}
onChange={(e) => updateStop(i, "state", e.target.value)}
@@ -1455,7 +1464,7 @@ function RouteOptimizerTool({ brandId }: { brandId: string }) {
</div>
<div>
<label className="block text-xs mb-1" style={{ color: 'var(--admin-text-muted)' }}>Address</label>
<input
<input aria-label="123 Main St"
type="text"
value={stop.address}
onChange={(e) => updateStop(i, "address", e.target.value)}
@@ -1467,7 +1476,7 @@ function RouteOptimizerTool({ brandId }: { brandId: string }) {
</div>
<div>
<label className="block text-xs mb-1" style={{ color: 'var(--admin-text-muted)' }}>Time Window</label>
<input
<input aria-label="8am–12pm"
type="text"
value={stop.time_window}
onChange={(e) => updateStop(i, "time_window", e.target.value)}
@@ -1482,7 +1491,7 @@ function RouteOptimizerTool({ brandId }: { brandId: string }) {
<div className="rounded-lg p-3 text-xs" style={{ backgroundColor: 'rgba(171, 162, 120, 0.1)', border: '1px solid rgba(171, 162, 120, 0.2)', color: '#92781e' }}>
AI-generated suggestions — review before use. Not a substitute for professional routing software.
</div>
<button
<button type="button"
onClick={handleOptimize}
disabled={loading || validStops.length < 2}
className={btnPrimaryClass}
@@ -1510,7 +1519,7 @@ function RouteOptimizerTool({ brandId }: { brandId: string }) {
<AdminCard className="p-4" style={{ backgroundColor: 'rgba(16, 185, 129, 0.05)', border: '1px solid rgba(16, 185, 129, 0.2)' }}>
<p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#047857' }}>Optimized Sequence</p>
{result.optimizedSequence.map((s, i) => (
<div key={i} className="flex items-start gap-3 py-2" style={{ borderBottom: i < result.optimizedSequence.length - 1 ? '1px solid var(--admin-border-light)' : 'none' }}>
<div key={`seq-${i}-${s.position}-${s.stopName}`} className="flex items-start gap-3 py-2" style={{ borderBottom: i < result.optimizedSequence.length - 1 ? '1px solid var(--admin-border-light)' : 'none' }}>
<span
className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold text-white flex-shrink-0"
style={{ backgroundColor: 'var(--admin-accent)' }}
@@ -1528,16 +1537,16 @@ function RouteOptimizerTool({ brandId }: { brandId: string }) {
{result.suggestions.length > 0 && (
<AdminCard className="p-4" style={{ backgroundColor: 'rgba(16, 185, 129, 0.05)', border: '1px solid rgba(16, 185, 129, 0.2)' }}>
<p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#047857' }}>Suggestions</p>
{result.suggestions.map((s, i) => <p key={i} className="text-sm" style={{ color: '#059669' }}>✓ {s}</p>)}
{result.suggestions.map((s) => <p key={s} className="text-sm" style={{ color: '#059669' }}>✓ {s}</p>)}
</AdminCard>
)}
{result.warnings.length > 0 && (
<AdminCard className="p-4" style={{ backgroundColor: 'rgba(171, 162, 120, 0.08)', border: '1px solid rgba(171, 162, 120, 0.2)' }}>
<p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#92781e' }}>Warnings</p>
{result.warnings.map((w, i) => <p key={i} className="text-sm" style={{ color: '#a6953f' }}>⚠ {w}</p>)}
{result.warnings.map((w) => <p key={w} className="text-sm" style={{ color: '#a6953f' }}>⚠ {w}</p>)}
</AdminCard>
)}
<button
<button type="button"
onClick={() => copyToClipboard(JSON.stringify(result, null, 2))}
className="text-xs flex items-center gap-1 transition-colors"
style={{ color: 'var(--admin-text-muted)' }}
@@ -1623,11 +1632,11 @@ function DemandForecastTool({ brandId }: { brandId: string }) {
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium mb-1" style={labelStyle}>Product Name *</label>
<input type="text" value={productName} onChange={(e) => setProductName(e.target.value)} placeholder="Sweet Corn" className={inputBaseClass} style={inputStyle} />
<input aria-label="Sweet Corn" type="text" value={productName} onChange={(e) => setProductName(e.target.value)} placeholder="Sweet Corn" className={inputBaseClass} style={inputStyle} />
</div>
<div>
<label className="block text-sm font-medium mb-1" style={labelStyle}>Stop Name</label>
<input type="text" value={stopName} onChange={(e) => setStopName(e.target.value)} placeholder="Downtown Farmers Market" className={inputBaseClass} style={inputStyle} />
<input aria-label="Downtown Farmers Market" type="text" value={stopName} onChange={(e) => setStopName(e.target.value)} placeholder="Downtown Farmers Market" className={inputBaseClass} style={inputStyle} />
</div>
</div>
@@ -1635,7 +1644,7 @@ function DemandForecastTool({ brandId }: { brandId: string }) {
<div className="space-y-2">
<div className="flex items-center justify-between">
<label className="block text-sm font-medium" style={labelStyle}>Historical Sales</label>
<button onClick={addRow} className="text-xs transition-colors" style={{ color: 'var(--admin-accent)' }}>+ Add Row</button>
<button type="button" onClick={addRow} className="text-xs transition-colors" style={{ color: 'var(--admin-accent)' }}>+ Add Row</button>
</div>
<AdminCard className="divide-y" style={{ border: '1px solid var(--admin-border)' }}>
<div className="grid grid-cols-4 gap-2 px-3 py-2">
@@ -1645,8 +1654,8 @@ function DemandForecastTool({ brandId }: { brandId: string }) {
<span />
</div>
{historicalData.map((row, i) => (
<div key={i} className="grid grid-cols-4 gap-2 px-3 py-2 items-center">
<input
<div key={`hist-${i}-${row.date}-${row.stop}`} className="grid grid-cols-4 gap-2 px-3 py-2 items-center">
<input aria-label="2026 04 01"
type="text"
value={row.date}
onChange={(e) => updateRow(i, "date", e.target.value)}
@@ -1654,7 +1663,7 @@ function DemandForecastTool({ brandId }: { brandId: string }) {
className="rounded-lg border px-2 py-1.5 text-xs"
style={{ borderColor: 'var(--admin-border)', backgroundColor: 'var(--admin-bg)', color: 'var(--admin-text-primary)' }}
/>
<input
<input aria-label="120"
type="text"
value={row.quantity_sold}
onChange={(e) => updateRow(i, "quantity_sold", e.target.value)}
@@ -1662,7 +1671,7 @@ function DemandForecastTool({ brandId }: { brandId: string }) {
className="rounded-lg border px-2 py-1.5 text-xs"
style={{ borderColor: 'var(--admin-border)', backgroundColor: 'var(--admin-bg)', color: 'var(--admin-text-primary)' }}
/>
<input
<input aria-label="Farmers Market"
type="text"
value={row.stop}
onChange={(e) => updateRow(i, "stop", e.target.value)}
@@ -1671,7 +1680,7 @@ function DemandForecastTool({ brandId }: { brandId: string }) {
style={{ borderColor: 'var(--admin-border)', backgroundColor: 'var(--admin-bg)', color: 'var(--admin-text-primary)' }}
/>
{historicalData.length > 1 && (
<button onClick={() => removeRow(i)} className="text-xs justify-self-end transition-colors" style={{ color: 'var(--admin-danger)' }}>✕</button>
<button type="button" onClick={() => removeRow(i)} className="text-xs justify-self-end transition-colors" style={{ color: 'var(--admin-danger)' }}>✕</button>
)}
</div>
))}
@@ -1680,7 +1689,7 @@ function DemandForecastTool({ brandId }: { brandId: string }) {
<div className="rounded-lg p-3 text-xs" style={{ backgroundColor: 'rgba(171, 162, 120, 0.1)', border: '1px solid rgba(171, 162, 120, 0.2)', color: '#92781e' }}>
AI-generated forecasts — review before use. Not a substitute for professional supply chain planning.
</div>
<button
<button type="button"
onClick={handleAnalyze}
disabled={loading || !productName.trim()}
className={btnPrimaryClass}
@@ -1730,16 +1739,16 @@ function DemandForecastTool({ brandId }: { brandId: string }) {
{result.seasonalFactors.length > 0 && (
<AdminCard className="p-4" style={{ backgroundColor: 'rgba(59, 130, 246, 0.05)', border: '1px solid rgba(59, 130, 246, 0.2)' }}>
<p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#2563eb' }}>Seasonal Factors</p>
{result.seasonalFactors.map((f, i) => <p key={i} className="text-sm" style={{ color: '#3b82f6' }}>☀ {f}</p>)}
{result.seasonalFactors.map((f) => <p key={f} className="text-sm" style={{ color: '#3b82f6' }}>☀ {f}</p>)}
</AdminCard>
)}
{result.riskFlags.length > 0 && (
<AdminCard className="p-4" style={{ backgroundColor: 'rgba(171, 162, 120, 0.08)', border: '1px solid rgba(171, 162, 120, 0.2)' }}>
<p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#92781e' }}>Risk Flags</p>
{result.riskFlags.map((r, i) => <p key={i} className="text-sm" style={{ color: '#a6953f' }}>⚠ {r}</p>)}
{result.riskFlags.map((r) => <p key={r} className="text-sm" style={{ color: '#a6953f' }}>⚠ {r}</p>)}
</AdminCard>
)}
<button
<button type="button"
onClick={() => copyToClipboard(JSON.stringify(result, null, 2))}
className="text-xs flex items-center gap-1 transition-colors"
style={{ color: 'var(--admin-text-muted)' }}
@@ -1770,7 +1779,7 @@ function ToolModal({ tool, brandId, brandName, onClose }: ModalProps) {
<span className="text-2xl">{tool.icon}</span>
<h2 className="text-lg font-bold" style={{ color: 'var(--admin-text-primary)' }}>{tool.title}</h2>
</div>
<button onClick={onClose} className="p-2 transition-colors" style={{ color: 'var(--admin-text-muted)' }}>
<button type="button" onClick={onClose} className="p-2 transition-colors" style={{ color: 'var(--admin-text-muted)' }}>
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
@@ -1803,8 +1812,11 @@ export default function AIsettingsClient({
}: Props) {
const [activeTool, setActiveTool] = useState<AITool | null>(null);
const [activeModule, setActiveModule] = useState<string | null>(null);
const [selectedProvider, setSelectedProvider] = useState<Provider>(provider);
const [currentModel, setCurrentModel] = useState(model);
// selectedProvider/currentModel are derived directly from props. We use a
// `key` on the child components so any prop change fully remounts them and
// their internal useState(initialProp) re-initializes — no stale copy.
const selectedProvider = provider;
const currentModel = model;
const filteredTools = activeModule ? AI_TOOLS.filter((t) => t.module === activeModule) : AI_TOOLS;
const modules = [...new Set(AI_TOOLS.map((t) => t.module))];
@@ -1846,19 +1858,27 @@ export default function AIsettingsClient({
currentProvider={selectedProvider}
currentModel={currentModel}
brandId={brandId}
onSelect={setSelectedProvider}
onSelect={() => {
// Local state is derived from `provider` prop. After a server
// refresh the new provider flows in via the parent re-render.
}}
/>
{/* Model Input */}
<ModelInput
key={currentModel}
currentModel={currentModel}
brandId={brandId}
onChange={setCurrentModel}
onChange={() => {
// Local state is derived from `model` prop. `key={currentModel}`
// remounts this component so its internal useState(currentModel)
// re-syncs to the new value.
}}
/>
{/* Module filter */}
<div className="admin-filter-tabs mb-6">
<button
<button type="button"
onClick={() => setActiveModule(null)}
className={`admin-filter-tab ${activeModule === null ? 'admin-filter-tab--active' : ''}`}
>
@@ -1867,7 +1887,7 @@ export default function AIsettingsClient({
{modules.map((m) => {
const count = AI_TOOLS.filter((t) => t.module === m).length;
return (
<button
<button type="button"
key={m}
onClick={() => setActiveModule(activeModule === m ? null : m)}
className={`admin-filter-tab ${activeModule === m ? 'admin-filter-tab--active' : ''}`}
src/app/admin/settings/billing/AddAddonButton.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export default function AddAddonButton({ brandId, addonKey }: Props) {
return (
<div className="flex items-center gap-2">
<button
<button type="button"
onClick={handleClick}
disabled={loading}
className="inline-flex items-center gap-1.5 rounded-xl border border-[var(--admin-accent)] bg-white px-3 py-1.5 text-xs font-medium text-[var(--admin-accent)] hover:bg-[var(--admin-accent-light)] transition-colors disabled:opacity-50"
src/app/admin/settings/billing/AddPaymentMethodButton.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export default function AddPaymentMethodButton({ brandId }: Props) {
}
return (
<button
<button type="button"
onClick={handleClick}
disabled={loading}
className="w-full rounded-xl bg-slate-900 py-3 text-sm font-bold text-white hover:bg-slate-800 disabled:opacity-50"
src/app/admin/settings/billing/BillingClient.tsx
+13 -7
View File
@@ -1,6 +1,6 @@
"use client";
import { useState } from "react";
import { useRef, useState } from "react";
import { updateBrandPlanTier } from "@/actions/billing/stripe-portal";
type Props = {
@@ -16,12 +16,17 @@ const TIERS = [
];
export default function BillingClient({ currentTier, brandId }: Props) {
const [selectedTier, setSelectedTier] = useState(currentTier);
// Uncontrolled select: the editable selection is the DOM element itself.
// When the parent passes a new `currentTier` prop, the `key` on the
// <select> remounts it and re-applies `defaultValue` from the new prop,
// so the displayed tier always tracks the server-side value.
const selectRef = useRef<HTMLSelectElement>(null);
const [saving, setSaving] = useState(false);
const [saved, setSaved] = useState(false);
const [error, setError] = useState<string | null>(null);
async function handleSaveTier() {
const selectedTier = selectRef.current?.value ?? currentTier;
if (selectedTier === currentTier) return;
setSaving(true);
setError(null);
@@ -38,18 +43,19 @@ export default function BillingClient({ currentTier, brandId }: Props) {
return (
<div className="flex items-center gap-2">
<select
value={selectedTier}
onChange={(e) => setSelectedTier(e.target.value)}
<select aria-label="Select"
ref={selectRef}
key={currentTier}
defaultValue={currentTier}
className="rounded-xl border border-zinc-600 bg-zinc-900 px-3 sm:px-4 py-3 sm:py-2 text-sm outline-none focus:border-blue-500 min-h-[44px]"
>
{TIERS.map((t) => (
<option key={t.value} value={t.value}>{t.label}</option>
))}
</select>
<button
<button type="button"
onClick={handleSaveTier}
disabled={saving || selectedTier === currentTier}
disabled={saving}
className="rounded-xl bg-slate-900 px-4 sm:px-5 py-3 sm:py-2 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-50 active:scale-95 transition-all min-h-[44px]"
>
{saving ? "Saving..." : saved ? "Saved!" : "Save Tier"}
src/app/admin/settings/billing/BillingClientPage.tsx
+14 -6
View File
@@ -55,7 +55,11 @@ function formatPeriodEnd(iso: string | null): string | null {
}
export default function BillingClientPage({ overview }: Props) {
const [billingCycle, setBillingCycle] = useState<BillingCycle>(overview.planCycle);
// Displayed billing cycle tracks the saved plan cycle from the server.
// The BillingCycleToggle manages its own visual highlight internally and
// notifies via onCycleChange, but pricing display is anchored to the
// server-truth prop so a server refresh always wins.
const billingCycle: BillingCycle = overview.planCycle;
const [compareOpen, setCompareOpen] = useState(false);
const {
@@ -182,7 +186,11 @@ export default function BillingClientPage({ overview }: Props) {
</p>
</div>
</div>
<BillingCycleToggle onCycleChange={(c) => setBillingCycle(c)} />
<BillingCycleToggle onCycleChange={() => {
// The displayed billing cycle is derived from `overview.planCycle`
// (server truth). The toggle still highlights its internal state
// for visual feedback, but pricing is anchored to the saved cycle.
}} />
</div>
</div>
@@ -211,8 +219,8 @@ export default function BillingClientPage({ overview }: Props) {
)}
</p>
<ul className="space-y-2 mb-5">
{(currentPlan.features as readonly string[]).slice(0, 6).map((f, i) => (
<li key={i} className="flex items-center gap-2 text-sm text-[var(--admin-text-secondary)]">
{(currentPlan.features as readonly string[]).slice(0, 6).map((f) => (
<li key={f} className="flex items-center gap-2 text-sm text-[var(--admin-text-secondary)]">
<svg className="w-4 h-4 text-[var(--admin-success)] shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
</svg>
@@ -224,7 +232,7 @@ export default function BillingClientPage({ overview }: Props) {
)}
</ul>
{isPlatformAdmin && (
<button
<button type="button"
onClick={() => setCompareOpen(!compareOpen)}
className="inline-flex items-center gap-1.5 text-sm font-medium text-[var(--admin-accent)] hover:text-[var(--admin-accent-hover)] transition-colors"
>
@@ -326,7 +334,7 @@ export default function BillingClientPage({ overview }: Props) {
<div className="rounded-2xl bg-white shadow-md ring-1 ring-[var(--admin-border)] overflow-hidden">
<div className="border-b border-[var(--admin-border)] bg-[var(--admin-bg)] px-6 py-4 flex items-center justify-between">
<h3 className="text-base font-semibold text-[var(--admin-text-primary)]">Plan Comparison</h3>
<button
<button type="button"
onClick={() => setCompareOpen(false)}
className="inline-flex items-center gap-1.5 text-xs text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] transition-colors"
>
src/app/admin/settings/billing/BillingCycleToggle.tsx
+2 -2
View File
@@ -18,7 +18,7 @@ export default function BillingCycleToggle({ onCycleChange }: Props) {
return (
<div className="flex items-center gap-3">
<button
<button type="button"
onClick={() => handleCycle("monthly")}
className={`rounded-lg border px-4 py-1.5 text-sm font-medium transition-colors ${
cycle === "monthly"
@@ -28,7 +28,7 @@ export default function BillingCycleToggle({ onCycleChange }: Props) {
>
Monthly
</button>
<button
<button type="button"
onClick={() => handleCycle("annual")}
className={`rounded-lg border px-4 py-1.5 text-sm font-medium transition-colors flex items-center gap-1.5 ${
cycle === "annual"
src/app/admin/settings/billing/PlanUpgradeButton.tsx
+1 -1
View File
@@ -59,7 +59,7 @@ export default function PlanUpgradeButton({ brandId, targetTier, currentTier }:
return (
<div className="flex flex-col gap-1">
<button
<button type="button"
onClick={handleClick}
disabled={loading}
className="inline-flex items-center gap-2 rounded-xl bg-[var(--admin-accent)] px-4 py-2 text-sm font-bold text-white hover:bg-[var(--admin-accent-hover)] disabled:opacity-50 transition-colors"
src/app/admin/settings/billing/RemoveAddonButton.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ export default function RemoveAddonButton({ brandId, addonKey, onRemoved }: Prop
}
return (
<button
<button type="button"
onClick={handleRemove}
disabled={loading}
className="text-xs text-red-500 hover:underline disabled:opacity-50"
src/app/admin/settings/billing/StripePortalButton.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export default function StripePortalButton({ brandId, variant = "secondary", lab
}
return (
<button
<button type="button"
onClick={handleClick}
disabled={loading}
className={`w-full rounded-xl py-3 text-sm font-medium transition-colors ${
src/app/admin/settings/billing/page.tsx
+110
View File
@@ -0,0 +1,110 @@
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";
type Props = {
params: Promise<{ brandId?: string }>;
};
export default async function BillingPage({ params }: Props) {
const [{ brandId: brandIdParam }, adminUser] = await Promise.all([params, getAdminUser()]);
if (!adminUser) return <AdminAccessDenied />;
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;
if (isPlatformAdmin && !resolvedBrandId) {
const { data: firstBrand } = await supabase
.from("brands")
.select("id")
.limit(1)
.single();
if (firstBrand?.id) {
resolvedBrandId = String(firstBrand.id);
} else {
return (
<main className="min-h-screen bg-[var(--admin-bg)] px-6 py-12">
<div className="mx-auto max-w-6xl">
<nav className="flex items-center gap-2 text-xs text-[var(--admin-text-muted)] mb-6">
<a href="/admin" className="hover:text-[var(--admin-text-primary)] transition-colors">Admin</a>
<span>/</span>
<span className="text-[var(--admin-text-primary)]">Billing</span>
</nav>
<div className="rounded-2xl bg-white shadow-md ring-1 ring-[var(--admin-border)] p-8 text-center">
<h1 className="text-2xl font-bold text-[var(--admin-text-primary)]">No Brands Found</h1>
<p className="mt-2 text-[var(--admin-text-muted)]">Create a brand in the database before accessing billing settings.</p>
<a href="/admin" className="mt-4 inline-block rounded-xl bg-[var(--admin-accent)] hover:bg-[var(--admin-accent-hover)] px-6 py-3 text-sm font-medium text-white transition-colors">
Back to Admin
</a>
</div>
</div>
</main>
);
}
}
if (!resolvedBrandId) return <AdminAccessDenied />;
// Single source of truth for everything the billing client needs.
const overviewRes = await getBillingOverview(resolvedBrandId);
if (!overviewRes.success || !overviewRes.data) {
return (
<main className="min-h-screen bg-[var(--admin-bg)] px-6 py-12">
<div className="mx-auto max-w-6xl">
<div className="rounded-2xl bg-white shadow-md ring-1 ring-[var(--admin-border)] p-8 text-center">
<h1 className="text-2xl font-bold text-[var(--admin-text-primary)]">Billing Unavailable</h1>
<p className="mt-2 text-[var(--admin-text-muted)]">{overviewRes.error ?? "Could not load billing information."}</p>
<a href="/admin" className="mt-4 inline-block rounded-xl bg-[var(--admin-accent)] hover:bg-[var(--admin-accent-hover)] px-6 py-3 text-sm font-medium text-white transition-colors">
Back to Admin
</a>
</div>
</div>
</main>
);
}
const overview = overviewRes.data;
return (
<main className="min-h-screen bg-[var(--admin-bg)]">
{/* Platform billing header */}
<div className="bg-[var(--admin-bg-subtle)] border-b border-[var(--admin-border)] px-6 py-3">
<div className="mx-auto max-w-6xl">
<p className="text-xs text-[var(--admin-text-muted)]">
<span className="font-medium text-[var(--admin-text-primary)]">Route Commerce Platform Billing</span>
{" — "}Invoiced by Cielo Hermosa, LLC · Manage your platform subscription and add-ons.
{" "}Questions? <a href="mailto:billing@cielohermosa.com" className="text-[var(--admin-accent)] hover:text-[var(--admin-accent-hover)] underline transition-colors">billing@cielohermosa.com</a>
</p>
</div>
</div>
<div className="mx-auto max-w-6xl px-6 py-10">
{/* Breadcrumb */}
<nav className="flex items-center gap-2 text-xs text-[var(--admin-text-muted)] mb-6">
<a href="/admin" className="hover:text-[var(--admin-text-primary)] transition-colors">Admin</a>
<span>/</span>
<a href="/admin/settings" className="hover:text-[var(--admin-text-primary)] transition-colors">Settings</a>
<span>/</span>
<span className="text-[var(--admin-text-primary)]">Billing</span>
</nav>
<div className="mb-8">
<h1 className="text-3xl font-bold text-[var(--admin-text-primary)]">Billing &amp; Subscription</h1>
<p className="mt-1 text-[var(--admin-text-muted)]">
Manage your Route Commerce subscription for {overview.brandName ?? "your brand"}.
</p>
</div>
<BillingClientPage overview={overview} />
</div>
</main>
);
}
src/app/admin/settings/integrations/IntegrationsClient.tsx
+22 -23
View File
@@ -1,8 +1,8 @@
"use client";
import { useState, useEffect } from "react";
import { useState } from "react";
import AIProviderPanel from "@/components/admin/AIProviderPanel";
import { savePaymentSettings, getPaymentSettings } from "@/actions/payments";
import { savePaymentSettings } from "@/actions/payments";
// ── Integration types ───────────────────────────────────────────────────────────
@@ -364,7 +364,7 @@ function IntegrationCard({
{field.required && <span className="text-red-400 ml-1" aria-hidden="true">*</span>}
</label>
<div className="relative">
<input
<input aria-label="Input"
id={inputId}
type={inputType}
value={credentials[field.key] ?? ""}
@@ -396,7 +396,7 @@ function IntegrationCard({
<label className="block text-xs font-medium text-zinc-400 mb-1">Environment</label>
<div className="flex gap-2">
{["sandbox", "production"].map((e) => (
<button
<button type="button"
key={e}
onClick={() => setEnv(e)}
className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-colors ${
@@ -430,14 +430,14 @@ function IntegrationCard({
{/* Actions */}
<div className="flex gap-2">
<button
<button type="button"
onClick={handleTest}
disabled={testing || !enabled}
className="rounded-lg border border-zinc-600 px-4 py-2 text-xs font-medium text-zinc-300 hover:bg-zinc-800 disabled:opacity-50"
>
{testing ? "Testing..." : "Test Connection"}
</button>
<button
<button type="button"
onClick={handleSave}
disabled={saving}
className="flex-1 rounded-lg bg-violet-600 px-4 py-2 text-xs font-bold text-white hover:bg-violet-700 disabled:opacity-50"
@@ -464,7 +464,11 @@ type CustomIntegration = {
// ── Main client component ───────────────────────────────────────────────────────
export default function IntegrationsClient({ brandId, brands, isPlatformAdmin, paymentSettings, resendConfigured }: Props) {
const [selectedBrandId, setSelectedBrandId] = useState(brandId);
// selectedBrandId and currentPaymentSettings are derived from props.
// The parent IntegrationsClientPage owns these via its own local state
// (keyed to brandId) and re-renders this component with fresh values.
const selectedBrandId = brandId;
const currentPaymentSettings = paymentSettings;
const [search, setSearch] = useState("");
const [showAddModal, setShowAddModal] = useState(false);
const [addSearch, setAddSearch] = useState("");
@@ -472,15 +476,6 @@ export default function IntegrationsClient({ brandId, brands, isPlatformAdmin, p
const [showCustomForm, setShowCustomForm] = useState(false);
const [newCustomName, setNewCustomName] = useState("");
const [newCustomType, setNewCustomType] = useState<"ai_provider" | "payment_processor" | "other">("other");
const [currentPaymentSettings, setCurrentPaymentSettings] = useState(paymentSettings);
// Re-fetch payment settings when brand changes
useEffect(() => {
if (!isPlatformAdmin) return;
getPaymentSettings(selectedBrandId).then((result) => {
if (result.success) setCurrentPaymentSettings(result.settings);
});
}, [selectedBrandId, isPlatformAdmin]);
// Integrations shown in the grid — OpenAI card is hidden since it's now handled by AIProviderPanel
const gridIntegrations = INTEGRATIONS.filter((i) => i.id !== "openai");
@@ -535,7 +530,7 @@ export default function IntegrationsClient({ brandId, brands, isPlatformAdmin, p
<p className="text-xs text-zinc-500">Connect payment processors, email providers, and other services.</p>
</div>
</div>
<button
<button type="button"
onClick={() => setShowAddModal(true)}
className="rounded-xl bg-violet-600 px-4 py-2.5 text-xs font-bold text-white hover:bg-violet-700 shrink-0"
>
@@ -550,9 +545,13 @@ export default function IntegrationsClient({ brandId, brands, isPlatformAdmin, p
{isPlatformAdmin && brands.length > 0 && (
<div className="mb-6 flex items-center gap-3">
<label className="text-sm font-medium text-zinc-400">Brand</label>
<select
<select aria-label="Select"
value={selectedBrandId}
onChange={(e) => setSelectedBrandId(e.target.value)}
onChange={() => {
// selectedBrandId is derived from the `brandId` prop.
// The parent component owns the selection state and re-renders
// this client with the new brandId when needed.
}}
className="rounded-xl border border-zinc-600 bg-zinc-800 px-4 py-2.5 text-sm text-zinc-100 outline-none focus:border-violet-500"
>
{brands.map((b) => (
@@ -564,7 +563,7 @@ export default function IntegrationsClient({ brandId, brands, isPlatformAdmin, p
{/* Search */}
<div className="mb-6">
<input
<input aria-label="Search Integrations..."
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
@@ -613,13 +612,13 @@ export default function IntegrationsClient({ brandId, brands, isPlatformAdmin, p
<div className="w-full max-w-lg rounded-2xl bg-zinc-900 border border-zinc-700 p-6 shadow-xl" onClick={(e) => e.stopPropagation()}>
<div className="mb-4 flex items-center justify-between">
<h2 className="text-lg font-bold text-zinc-100">Add Integration</h2>
<button onClick={() => setShowAddModal(false)} className="text-zinc-500 hover:text-zinc-300">
<button type="button" onClick={() => setShowAddModal(false)} className="text-zinc-500 hover:text-zinc-300">
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<input
<input aria-label="Search..."
type="text"
value={addSearch}
onChange={(e) => setAddSearch(e.target.value)}
@@ -628,7 +627,7 @@ export default function IntegrationsClient({ brandId, brands, isPlatformAdmin, p
/>
<div className="space-y-2 max-h-64 overflow-y-auto">
{availableFiltered.map((app) => (
<button
<button type="button"
key={app.id}
onClick={() => addIntegration(app)}
className="w-full flex items-center gap-3 rounded-xl border border-zinc-700 bg-zinc-800 p-4 text-left hover:bg-zinc-700"
src/app/admin/settings/integrations/IntegrationsClientPage.tsx
+13 -7
View File
@@ -352,7 +352,13 @@ function IntegrationCard({
}
export default function IntegrationsClientPage({ brandId, brands, isPlatformAdmin }: Props) {
const [selectedBrandId, setSelectedBrandId] = useState(brandId);
// `selectedBrandId` is the platform admin's explicit brand selection. The
// initial value is not derived from a prop so the value stays in sync with
// the server-truth `brandId` once a user makes a choice: we always render
// off `effectiveBrandId = selectedBrandId || brandId`, so any change to
// `brandId` (e.g., route nav) is reflected until the user picks another.
const [selectedBrandId, setSelectedBrandId] = useState<string>("");
const effectiveBrandId = selectedBrandId || brandId;
const [initialCredentials, setInitialCredentials] = useState<Record<string, Record<string, string>>>({});
const [loading, setLoading] = useState(true);
@@ -362,8 +368,8 @@ export default function IntegrationsClientPage({ brandId, brands, isPlatformAdmi
setLoading(true);
try {
const [resendCreds, twilioCreds] = await Promise.all([
getResendCredentials(selectedBrandId),
getTwilioCredentials(selectedBrandId),
getResendCredentials(effectiveBrandId),
getTwilioCredentials(effectiveBrandId),
]);
setInitialCredentials({
@@ -383,7 +389,7 @@ export default function IntegrationsClientPage({ brandId, brands, isPlatformAdmi
}
}
fetchCredentials();
}, [selectedBrandId]);
}, [effectiveBrandId]);
return (
<div className="space-y-8 max-w-4xl">
@@ -392,7 +398,7 @@ export default function IntegrationsClientPage({ brandId, brands, isPlatformAdmi
<div className="rounded-2xl bg-white border border-[var(--admin-border)] p-5">
<AdminInput label="Select Brand" helpText="Choose a brand to configure integrations for:">
<AdminSelect
value={selectedBrandId}
value={effectiveBrandId}
onChange={(e) => setSelectedBrandId(e.target.value)}
options={brands.map((b) => ({ value: b.id, label: b.name }))}
/>
@@ -421,7 +427,7 @@ export default function IntegrationsClientPage({ brandId, brands, isPlatformAdmi
</a>
</div>
<div className="p-5">
<AIProviderPanel brandId={selectedBrandId} />
<AIProviderPanel brandId={effectiveBrandId} />
</div>
</div>
@@ -442,7 +448,7 @@ export default function IntegrationsClientPage({ brandId, brands, isPlatformAdmi
key={integration.id}
integration={integration}
initialCredentials={initialCredentials[integration.id]}
brandId={selectedBrandId}
brandId={effectiveBrandId}
/>
))
)}
src/app/admin/settings/integrations/page.tsx
+61
View File
@@ -0,0 +1,61 @@
import { redirect } from "next/navigation";
import { supabase } from "@/lib/supabase";
import { getAdminUser } from "@/lib/admin-permissions";
import IntegrationsClientPage from "./IntegrationsClientPage";
import AdminAccessDenied from "@/components/admin/AdminAccessDenied";
export const metadata = {
title: "Integrations - Route Commerce Admin",
description: "Configure integrations for AI, email, SMS, and payments",
};
export default async function IntegrationsPage() {
const adminUser = await getAdminUser();
if (!adminUser) return <AdminAccessDenied />;
const isPlatformAdmin = adminUser.role === "platform_admin";
const brandId = adminUser.brand_id ?? "";
// Platform admins: fetch all brands for the picker
const brands = isPlatformAdmin
? ((await supabase.from("brands").select("id, name").order("name")) as unknown as { data: { id: string; name: string }[] }).data ?? []
: [];
return (
<main className="min-h-screen bg-[var(--admin-bg)]">
<div className="px-4 sm:px-6 md:px-8 pt-4 sm:pt-6 pb-10">
{/* Breadcrumb */}
<nav className="flex items-center gap-2 text-xs text-[var(--admin-text-muted)] mb-6">
<a href="/admin" className="hover:text-[var(--admin-text-primary)] transition-colors">Admin</a>
<span>/</span>
<a href="/admin/settings" className="hover:text-[var(--admin-text-primary)] transition-colors">Settings</a>
<span>/</span>
<span className="text-[var(--admin-text-primary)]">Integrations</span>
</nav>
{/* Page Header */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--admin-accent)] text-white">
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
</svg>
</div>
<div>
<h1 className="text-2xl sm:text-3xl font-bold text-[var(--admin-text-primary)]">Integrations</h1>
<p className="text-sm text-[var(--admin-text-muted)]">
Connect AI, email, SMS, and payment providers to power your operations.
</p>
</div>
</div>
</div>
<IntegrationsClientPage
brandId={brandId}
brands={brands}
isPlatformAdmin={isPlatformAdmin}
/>
</div>
</main>
);
}
src/app/admin/settings/page.tsx
+6 -2
View File
@@ -28,13 +28,17 @@ export default async function AdminSettingsPage({
brandId = "64294306-5f42-463d-a5e8-2ad6c81a96de";
}
const [{ users, error }, { brands }] = await Promise.all([
const [
{ users, error },
{ brands },
paymentResult,
] = await Promise.all([
getAdminUsers(isPlatformAdmin ? undefined : (adminUser.brand_id ?? undefined)),
getBrands(),
getPaymentSettings(brandId),
]);
// Fetch payment settings for the current brand
const paymentResult = await getPaymentSettings(brandId);
const paymentSettings = paymentResult.success ? paymentResult.settings : null;
return (
src/app/admin/settings/shipping/page.tsx
+63
View File
@@ -0,0 +1,63 @@
import { redirect } from "next/navigation";
import { supabase } from "@/lib/supabase";
import { getAdminUser } from "@/lib/admin-permissions";
import { getShippingSettings } from "@/actions/shipping/settings";
import ShippingSettingsForm from "@/components/admin/ShippingSettingsForm";
import AdminAccessDenied from "@/components/admin/AdminAccessDenied";
export default async function ShippingSettingsPage() {
const adminUser = await getAdminUser();
if (!adminUser) return <AdminAccessDenied />;
if (!adminUser.can_manage_orders || adminUser.role === "store_employee") {
redirect("/admin/pickup");
}
const isPlatformAdmin = adminUser.role === "platform_admin";
const brandId = adminUser.brand_id ?? "";
// Platform admins: fetch all brands for the picker
const brands = isPlatformAdmin
? ((await supabase.from("brands").select("id, name").order("name")) as unknown as { data: { id: string; name: string }[] }).data ?? []
: [];
const effectiveBrandId = brandId || (brands[0]?.id ?? "");
const result = await getShippingSettings(effectiveBrandId);
const settings = result.success ? result.settings : null;
return (
<main className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-2xl">
{/* Breadcrumb */}
<nav className="flex items-center gap-2 text-xs mb-6" style={{ color: "var(--admin-text-muted)" }}>
<a href="/admin" className="hover:text-[var(--admin-text-primary)] transition-colors">Admin</a>
<span>/</span>
<span style={{ color: "var(--admin-text-primary)" }}>Shipping</span>
</nav>
<div className="mb-8">
<div className="flex items-center gap-3 mb-2">
<div className="flex h-10 w-10 items-center justify-center rounded-xl" style={{ backgroundColor: "var(--admin-accent)", color: "white" }}>
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25m-2.25 0h2.25m0 0v-.375c0-.621-.504-1.125-1.125-1.125H15m-1.5-3l1.5 0l.75 0v-.375c0-.621-.504-1.125-1.125-1.125H15m0 0v-.375c0-.621-.504-1.125-1.125-1.125H12" />
</svg>
</div>
<h1 className="text-3xl font-bold" style={{ color: "var(--admin-text-primary)" }}>Shipping Settings</h1>
</div>
<p className="mt-2 text-sm" style={{ color: "var(--admin-text-muted)" }}>
Configure FedEx integration for shipping fresh produce — sweet corn, onions, and more.
</p>
</div>
<div className="rounded-2xl border p-6 shadow-lg" style={{ backgroundColor: "white", borderColor: "var(--admin-border)" }}>
<ShippingSettingsForm
settings={settings}
brandId={effectiveBrandId}
brands={brands}
isPlatformAdmin={isPlatformAdmin}
/>
</div>
</div>
</main>
);
}
src/app/admin/settings/square-sync/SquareSyncSettingsClient.tsx
+11 -4
View File
@@ -2,7 +2,8 @@
import { useState } from "react";
import Link from "next/link";
import { syncSquareNow, getSyncLog, type SyncLogEntry } from "@/actions/square-sync-ui";
import { useRouter } from "next/navigation";
import { syncSquareNow, type SyncLogEntry } from "@/actions/square-sync-ui";
import { savePaymentSettings } from "@/actions/payments";
import { AdminToggle, AdminButton } from "@/components/admin/design-system";
@@ -37,6 +38,7 @@ function timeAgo(iso: string): string {
}
export default function SquareSyncSettingsClient({ settings, logs, brandId }: Props) {
const router = useRouter();
const [squareSyncEnabled, setSquareSyncEnabled] = useState(
settings?.square_sync_enabled ?? false
);
@@ -49,7 +51,10 @@ export default function SquareSyncSettingsClient({ settings, logs, brandId }: Pr
const [saving, setSaving] = useState(false);
const [saved, setSaved] = useState(false);
const [error, setError] = useState<string | null>(null);
const [displayLogs, setDisplayLogs] = useState<SyncLogEntry[]>(logs);
// `displayLogs` is derived directly from the server-truth `logs` prop. After
// a sync we ask Next.js to re-render the server component so a fresh
// `logs` prop flows down — no stale local copy.
const displayLogs: SyncLogEntry[] = logs;
const [dirty, setDirty] = useState(false);
const hasToken = !!settings?.square_access_token;
@@ -92,8 +97,10 @@ export default function SquareSyncSettingsClient({ settings, logs, brandId }: Pr
});
setSyncing(false);
setSyncingType(null);
const logResult = await getSyncLog(brandId);
if (logResult.success) setDisplayLogs(logResult.logs);
// Ask Next.js to re-run the server component so a fresh `logs` prop flows
// down into this client. This is the same source of truth we'd get from
// a hard refresh, but without losing the toast banner or scroll position.
router.refresh();
}
return (
src/app/admin/stops/[id]/page.tsx
+25 -25
View File
@@ -53,9 +53,7 @@ interface ProductStop {
}
export default async function StopDetailPage({ params }: StopDetailPageProps) {
const { id } = await params;
const adminUser = await getAdminUser();
const [{ id }, adminUser] = await Promise.all([params, getAdminUser()]);
if (!adminUser) {
return <AdminAccessDenied />;
@@ -126,28 +124,30 @@ export default async function StopDetailPage({ params }: StopDetailPageProps) {
brands: { name: stopRow.brand_name ?? "", slug: stopRow.brand_slug ?? "" },
};
// Fetch all products for this brand
const { rows: productRows } = await pool.query<{ id: string; name: string; type: string; price: number; image_url: string | null }>(
`SELECT id, name, type, price, image_url
FROM products
WHERE brand_id = $1 AND active = true
ORDER BY name`,
[stop.brand_id]
);
// Fetch product-stop assignments
const { rows: productStopRows } = await pool.query<{ id: string; product_id: string; name: string; type: string; price: number; image_url: string | null }>(
`SELECT ps.id, ps.product_id, p.name, p.type, p.price, p.image_url
FROM product_stops ps
JOIN products p ON p.id = ps.product_id
WHERE ps.stop_id = $1`,
[id]
);
// Fetch brands list
const { rows: brandRows } = await pool.query<{ id: string; name: string; slug: string }>(
`SELECT id, name, slug FROM brands ORDER BY name`
);
// Fetch all products for this brand, product-stop assignments, and brands list
const [
{ rows: productRows },
{ rows: productStopRows },
{ rows: brandRows },
] = await Promise.all([
pool.query<{ id: string; name: string; type: string; price: number; image_url: string | null }>(
`SELECT id, name, type, price, image_url
FROM products
WHERE brand_id = $1 AND active = true
ORDER BY name`,
[stop.brand_id]
),
pool.query<{ id: string; product_id: string; name: string; type: string; price: number; image_url: string | null }>(
`SELECT ps.id, ps.product_id, p.name, p.type, p.price, p.image_url
FROM product_stops ps
JOIN products p ON p.id = ps.product_id
WHERE ps.stop_id = $1`,
[id]
),
pool.query<{ id: string; name: string; slug: string }>(
`SELECT id, name, slug FROM brands ORDER BY name`
),
]);
const allProducts = productRows.map((p) => ({
id: p.id,
src/app/admin/stops/new/page.tsx
+1 -2
View File
@@ -32,8 +32,7 @@ export default async function NewStopPage({
}: {
searchParams: Promise<{ duplicate?: string }>;
}) {
const adminUser = await getAdminUser();
const { duplicate } = await searchParams;
const [adminUser, { duplicate }] = await Promise.all([getAdminUser(), searchParams]);
if (!adminUser) return <AdminAccessDenied />;
if (!adminUser.can_manage_stops) redirect("/admin/pickup");
src/app/admin/stops/page.tsx
+28 -17
View File
@@ -18,8 +18,7 @@ interface PageProps {
}
export default async function AdminStopsPage({ searchParams }: PageProps) {
const params = await searchParams;
const adminUser = await getAdminUser();
const [params, adminUser] = await Promise.all([searchParams, getAdminUser()]);
if (!adminUser) return <AdminAccessDenied />;
if (!adminUser.can_manage_stops) redirect("/admin/pickup");
@@ -46,24 +45,36 @@ export default async function AdminStopsPage({ searchParams }: PageProps) {
try {
activeBrandId = await getActiveBrandId(adminUser);
// If brand-scoped (not platform_admin) and no active brand, restrict query
const brandCondition =
activeBrandId
? `brand_id = '${activeBrandId}'`
: adminUser.role === "platform_admin"
? "1=1"
: `brand_id IN ('${(adminUser.brand_ids ?? []).join("','")}')`;
const { rows } = await pool.query(
`SELECT s.id, s.city, s.state, s.date, s."time", s.location, s.status,
// Three fully-static SQL branches — no template-literal SQL anywhere.
// The branch is selected by a hardcoded ternary; brand id values flow
// through pg's positional bind variables (single id or uuid[] array).
const STOP_LIST_QUERY = `SELECT s.id, s.city, s.state, s.date, s."time", s.location, s.status,
s.brand_id, s.address, s.zip, s.cutoff_date,
b.name as brand_name
FROM stops s
LEFT JOIN brands b ON b.id = s.brand_id
WHERE ${brandCondition}
ORDER BY s.date ASC
LIMIT 200`
);
LEFT JOIN brands b ON b.id = s.brand_id`;
let queryText: string;
let queryParams: unknown[];
if (activeBrandId) {
queryText = `${STOP_LIST_QUERY} WHERE s.brand_id = $1 ORDER BY s.date ASC LIMIT 200`;
queryParams = [activeBrandId];
} else if (adminUser.role === "platform_admin") {
queryText = `${STOP_LIST_QUERY} WHERE 1=1 ORDER BY s.date ASC LIMIT 200`;
queryParams = [];
} else {
const allowedBrandIds = adminUser.brand_ids ?? [];
if (allowedBrandIds.length === 0) {
// No brands the user can see — short-circuit to an empty result
// without running a query at all.
stops = [];
error = null;
}
queryText = `${STOP_LIST_QUERY} WHERE s.brand_id = ANY($1::uuid[]) ORDER BY s.date ASC LIMIT 200`;
queryParams = [allowedBrandIds];
}
const { rows } = await pool.query(queryText, queryParams);
stops = rows;
console.log("[admin/stops] Fetched", rows.length, "stops");
} catch (e) {
src/app/admin/taxes/page.tsx
+84
View File
@@ -0,0 +1,84 @@
"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";
import { PageHeader } from "@/components/admin/design-system";
type Props = {
params: Promise<{ brandId?: string }>;
};
export default async function TaxesPage({ params }: Props) {
const [{ brandId: brandIdParam }, adminUser] = await Promise.all([params, getAdminUser()]);
if (!adminUser) return <AdminAccessDenied />;
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;
if (isPlatformAdmin && !resolvedBrandId) {
const { data: firstBrand } = await supabase
.from("brands")
.select("id")
.limit(1)
.single() as unknown as { data: { id: string } | null };
if (firstBrand?.id) {
resolvedBrandId = String(firstBrand.id);
} else {
return (
<main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-6xl">
<div className="rounded-2xl p-8 text-center border" style={{
backgroundColor: "white",
borderColor: "var(--admin-border)"
}}>
<h1 className="text-2xl font-bold" style={{ color: "var(--admin-text-primary)" }}>No Brands Found</h1>
<p className="mt-2" style={{ color: "var(--admin-text-muted)" }}>Create a brand in the database first.</p>
<a href="/admin" className="mt-4 inline-block rounded-xl px-6 py-3 text-sm font-medium border transition-colors"
style={{
backgroundColor: "var(--admin-bg-subtle)",
borderColor: "var(--admin-border)",
color: "var(--admin-text-primary)"
}}>
Back to Admin
</a>
</div>
</div>
</main>
);
}
}
if (!resolvedBrandId) return <AdminAccessDenied />;
const { data: brands } = await supabase
.from("brands")
.select("id, name")
.order("name");
const allBrands = (brands ?? []) as Array<{ id: string; name: string }>;
return (
<main className="min-h-screen" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-6xl px-6 py-10">
<PageHeader
title="Tax Dashboard"
subtitle="Sales tax collected on orders shipped to nexus states."
/>
<TaxDashboard
brands={allBrands}
initialBrandId={resolvedBrandId}
isPlatformAdmin={isPlatformAdmin}
/>
</div>
</main>
);
}
src/app/admin/v2/orders/[id]/page.tsx
+1 -2
View File
@@ -32,10 +32,9 @@ export default async function OrderDetailV2Page({
params: Promise<{ id: string }>;
}) {
const { id } = await params;
const adminUser = await getAdminUser();
const [adminUser, order] = await Promise.all([getAdminUser(), getAdminOrderDetail(id)]);
if (!adminUser) return null;
const order = await getAdminOrderDetail(id);
if (!order) notFound();
const kind = statusKind(order);
src/app/admin/v2/orders/page.tsx
+14 -2
View File
@@ -1,3 +1,4 @@
import { Suspense } from "react";
import { getAdminUser } from "@/lib/admin-permissions";
import { getAdminOrders } from "@/actions/orders";
import PageHeader from "@/components/admin/PageHeader";
@@ -51,7 +52,14 @@ export default async function OrdersV2Page({
if (orders.length === 0) {
return (
<main>
<PageHeader title="Orders" actions={<OrdersFilterButton />} />
<PageHeader
title="Orders"
actions={
<Suspense fallback={null}>
<OrdersFilterButton />
</Suspense>
}
/>
<EmptyState
title="No orders yet"
description="When customers place orders, they'll show up here."
@@ -66,7 +74,11 @@ export default async function OrdersV2Page({
<PageHeader
title="Orders"
subtitle={`${orders.length} order${orders.length === 1 ? "" : "s"}`}
actions={<OrdersFilterButton />}
actions={
<Suspense fallback={null}>
<OrdersFilterButton />
</Suspense>
}
/>
<PullToRefresh>
<CardList ariaLabel="Orders">
src/app/admin/v2/page.tsx
+7 -2
View File
@@ -82,10 +82,15 @@ export default async function DashboardV2Page() {
const activeBrandId = await getActiveBrandId(adminUser);
// Compute today's date string once per request on the server so the
// PageHeader subtitle is a stable, formatted value (avoids any
// hydration-mismatch risk from rendering `new Date()` inline in JSX).
const todayLabel = formatDate(new Date());
if (!activeBrandId) {
return (
<main>
<PageHeader title="Today" subtitle={formatDate(new Date())} />
<PageHeader title="Today" subtitle={todayLabel} />
<PullToRefresh>
<EmptyState
title="No brand selected"
@@ -130,7 +135,7 @@ export default async function DashboardV2Page() {
return (
<main>
<PageHeader title="Today" subtitle={formatDate(new Date())} />
<PageHeader title="Today" subtitle={todayLabel} />
<PullToRefresh>
<div className="px-4 pb-24 space-y-4">
{/* "Needs you" callout — surfaces the most actionable count
src/app/admin/v2/products/page.tsx
+14 -5
View File
@@ -1,3 +1,4 @@
import { Suspense } from "react";
import { getAdminUser } from "@/lib/admin-permissions";
import { getActiveBrandId } from "@/lib/brand-scope";
import { pool } from "@/lib/db";
@@ -77,8 +78,10 @@ export default async function ProductsV2Page({
const adminUser = await getAdminUser();
if (!adminUser) return null;
const activeBrandId = await getActiveBrandId(adminUser);
const params = await searchParams;
const [activeBrandId, params] = await Promise.all([
getActiveBrandId(adminUser),
searchParams,
]);
const filter = params.filter;
const { sql: filterSql, params: filterParams } = filterClause(filter);
@@ -137,7 +140,9 @@ export default async function ProductsV2Page({
return (
<main>
<PageHeader title="Products" />
<ProductsFilterChips active={filter ?? "all"} />
<Suspense fallback={null}>
<ProductsFilterChips active={filter ?? "all"} />
</Suspense>
<div className="px-4 pb-24">
<EmptyState
title="Couldn't load products"
@@ -153,7 +158,9 @@ export default async function ProductsV2Page({
return (
<main>
<PageHeader title="Products" />
<ProductsFilterChips active={filter ?? "all"} />
<Suspense fallback={null}>
<ProductsFilterChips active={filter ?? "all"} />
</Suspense>
<PullToRefresh>
<EmptyState
title="No products"
@@ -171,7 +178,9 @@ export default async function ProductsV2Page({
title="Products"
subtitle={`${products.length} product${products.length === 1 ? "" : "s"}`}
/>
<ProductsFilterChips active={filter ?? "all"} />
<Suspense fallback={null}>
<ProductsFilterChips active={filter ?? "all"} />
</Suspense>
<PullToRefresh>
<CardList ariaLabel="Products">
{products.map((product) => {
src/app/admin/v2/stops/page.tsx
+4 -2
View File
@@ -129,8 +129,10 @@ export default async function StopsV2Page({
const adminUser = await getAdminUser();
if (!adminUser) return null;
const activeBrandId = await getActiveBrandId(adminUser);
const params = await searchParams;
const [activeBrandId, params] = await Promise.all([
getActiveBrandId(adminUser),
searchParams,
]);
// Resolve the target date. `searchParams.date` is a YYYY-MM-DD string.
// Fall back to "today" in the user's local timezone (not UTC, so the
src/app/admin/water-log/entries/[id]/page.tsx
+6 -5
View File
@@ -14,11 +14,12 @@ type EntryPageProps = {
};
export default async function WaterLogEntryPage({ params, searchParams }: EntryPageProps) {
const { id } = await params;
const { from } = await searchParams;
const adminUser = await getAdminUser();
const waterSession = await getWaterAdminSession();
const [{ id }, { from }, adminUser, waterSession] = await Promise.all([
params,
searchParams,
getAdminUser(),
getWaterAdminSession(),
]);
const isSiteAdmin =
adminUser?.role === "platform_admin" ||
src/app/admin/water-log/headgates/HeadgatesManager.tsx
+32 -19
View File
@@ -171,10 +171,16 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
}
async function openPrintWindow(html: string) {
const w = window.open("", "_blank", "width=700,height=700");
const blob = new Blob([html], { type: "text/html;charset=utf-8" });
const url = URL.createObjectURL(blob);
const w = window.open(url, "_blank", "width=700,height=700");
if (w) {
w.document.write(html);
w.document.close();
// Revoke the blob URL once the new window has had time to load the document.
w.addEventListener("load", () => URL.revokeObjectURL(url), { once: true });
// Safety net: revoke after 60s even if the load event never fires.
setTimeout(() => URL.revokeObjectURL(url), 60_000);
} else {
URL.revokeObjectURL(url);
}
}
@@ -185,7 +191,7 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
<div className="mx-auto max-w-4xl flex items-center justify-between">
<div>
<div className="flex items-center gap-2">
<button onClick={() => router.back()} className="text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] text-sm">← Back</button>
<button type="button" onClick={() => router.back()} className="text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] text-sm">← Back</button>
<h1 className="text-2xl font-bold text-[var(--admin-text-primary)]">Headgates & QR Codes</h1>
</div>
<p className="text-xs text-[var(--admin-text-muted)] mt-0.5">Manage headgates and generate QR codes for field access</p>
@@ -201,7 +207,7 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
{/* Bulk actions bar */}
{headgates.length > 0 && (
<div className="flex items-center gap-3 rounded-xl border border-[var(--admin-border)] bg-white px-4 py-3">
<button onClick={toggleAll} className="text-sm text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)]">
<button type="button" onClick={toggleAll} className="text-sm text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)]">
{selected.size === headgates.length ? "Deselect all" : "Select all"}
</button>
<span className="text-xs text-[var(--admin-text-muted)]">|</span>
@@ -223,7 +229,7 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
<form onSubmit={handleAdd} className="flex gap-3 items-end">
<div className="flex-1">
<label htmlFor="headgate-add-name" className="block text-xs font-semibold text-[var(--admin-text-muted)] mb-1">Headgate Name</label>
<input
<input aria-label=". North Field Gate 1"
id="headgate-add-name"
autoFocus
type="text"
@@ -237,7 +243,7 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
</div>
<div>
<label htmlFor="headgate-add-unit" className="block text-xs font-semibold text-[var(--admin-text-muted)] mb-1">Unit</label>
<select
<select aria-label="Headgate Add Unit"
id="headgate-add-unit"
value={newUnit}
onChange={(e) => setNewUnit(e.target.value)}
@@ -269,7 +275,7 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
<thead>
<tr className="border-b border-[var(--admin-border)] bg-[var(--admin-bg-subtle)] text-left">
<th className="px-4 py-3 w-8">
<input type="checkbox" className="rounded" onChange={toggleAll} checked={selected.size === headgates.length} />
<input aria-label="Checkbox" type="checkbox" className="rounded" onChange={toggleAll} checked={selected.size === headgates.length} />
</th>
<th className="px-4 py-3 text-xs font-semibold text-[var(--admin-text-muted)]">Name</th>
<th className="px-4 py-3 text-xs font-semibold text-[var(--admin-text-muted)]">Token</th>
@@ -283,7 +289,7 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
{headgates.map((hg) => (
<tr key={hg.id} className={`border-b border-[var(--admin-border)] last:border-0 hover:bg-[var(--admin-bg-subtle)] ${selected.has(hg.id) ? "bg-blue-50" : ""}`}>
<td className="px-4 py-3">
<input type="checkbox" className="rounded" checked={selected.has(hg.id)} onChange={() => toggleSelect(hg.id)} />
<input aria-label="Checkbox" type="checkbox" className="rounded" checked={selected.has(hg.id)} onChange={() => toggleSelect(hg.id)} />
</td>
<td className="px-4 py-3">
<div className="flex items-center gap-2 flex-wrap">
@@ -324,7 +330,7 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
Edit
</AdminButton>
{/* QR preview thumbnail */}
<button onClick={() => setQrModal(hg)} className="hover:opacity-80" title="View / Print QR">
<button type="button" onClick={() => setQrModal(hg)} className="hover:opacity-80" title="View / Print QR">
<img
src={`/api/water-qr?token=${hg.headgate_token}&size=80`}
alt={`QR for ${hg.name}`}
@@ -366,7 +372,7 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-4 overflow-hidden border border-[var(--admin-border)]" onClick={(e) => e.stopPropagation()}>
<div className="flex items-center justify-between px-5 py-4 border-b border-[var(--admin-border)]">
<p className="font-bold text-[var(--admin-text-primary)]">Edit Headgate</p>
<button onClick={() => setEditHg(null)} className="text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)]">
<button type="button" onClick={() => setEditHg(null)} className="text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)]">
<svg className="h-5 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>
@@ -375,7 +381,7 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
<form onSubmit={handleEditSave} className="p-5 space-y-4">
<div>
<label htmlFor="headgate-edit-name" className="block text-xs font-semibold text-[var(--admin-text-muted)] mb-1">Name</label>
<input
<input aria-label="Headgate Edit Name"
id="headgate-edit-name"
type="text"
value={editName}
@@ -388,7 +394,7 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
<div className="grid grid-cols-2 gap-3">
<div>
<label htmlFor="headgate-edit-unit" className="block text-xs font-semibold text-[var(--admin-text-muted)] mb-1">Unit</label>
<select
<select aria-label="Headgate Edit Unit"
id="headgate-edit-unit"
value={editUnit}
onChange={(e) => setEditUnit(e.target.value)}
@@ -409,7 +415,7 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
<div className="grid grid-cols-2 gap-3">
<div>
<label htmlFor="headgate-edit-high" className="block text-xs font-semibold text-[var(--admin-text-muted)] mb-1">High Alert Threshold</label>
<input
<input aria-label=". 15.0"
id="headgate-edit-high"
type="number"
step="any"
@@ -421,7 +427,7 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
</div>
<div>
<label htmlFor="headgate-edit-low" className="block text-xs font-semibold text-[var(--admin-text-muted)] mb-1">Low Alert Threshold</label>
<input
<input aria-label=". 5.0"
id="headgate-edit-low"
type="number"
step="any"
@@ -471,8 +477,15 @@ function QRModal({ hg, onClose, onRegenerate }: { hg: Headgate; onClose: () => v
body: JSON.stringify({ token: hg.headgate_token, name: hg.name }),
});
const html = await res.text();
const w = window.open("", "_blank", "width=500,height=600");
if (w) { w.document.write(html); w.document.close(); }
const blob = new Blob([html], { type: "text/html;charset=utf-8" });
const url = URL.createObjectURL(blob);
const w = window.open(url, "_blank", "width=500,height=600");
if (w) {
w.addEventListener("load", () => URL.revokeObjectURL(url), { once: true });
setTimeout(() => URL.revokeObjectURL(url), 60_000);
} else {
URL.revokeObjectURL(url);
}
} finally {
setLoading(false);
}
@@ -504,7 +517,7 @@ function QRModal({ hg, onClose, onRegenerate }: { hg: Headgate; onClose: () => v
<p className="font-bold text-[var(--admin-text-primary)]">{hg.name}</p>
<p className="text-xs text-[var(--admin-text-muted)] mt-0.5">QR Label Preview</p>
</div>
<button onClick={onClose} className="text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)]">
<button type="button" onClick={onClose} className="text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)]">
<svg className="h-5 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>
@@ -531,7 +544,7 @@ function QRModal({ hg, onClose, onRegenerate }: { hg: Headgate; onClose: () => v
{/* Tab toggle */}
<div className="flex border-b border-[var(--admin-border)]">
{(["preview", "print", "download"] as const).map((t) => (
<button
<button type="button"
key={t}
onClick={() => setTab(t)}
className={`flex-1 py-3 text-sm font-semibold transition-colors ${tab === t ? "text-[var(--admin-text-primary)] border-b-2 border-[var(--admin-accent)]" : "text-[var(--admin-text-muted)]"}`}
src/app/admin/water-log/headgates/[id]/page.tsx
+6 -5
View File
@@ -15,11 +15,12 @@ type HeadgatePageProps = {
};
export default async function WaterLogHeadgatePage({ params, searchParams }: HeadgatePageProps) {
const { id } = await params;
const { from } = await searchParams;
const adminUser = await getAdminUser();
const waterSession = await getWaterAdminSession();
const [{ id }, { from }, adminUser, waterSession] = await Promise.all([
params,
searchParams,
getAdminUser(),
getWaterAdminSession(),
]);
const isSiteAdmin =
adminUser?.role === "platform_admin" ||
src/app/admin/water-log/settings/page.tsx
+1 -1
View File
@@ -256,7 +256,7 @@ export default function WaterLogSettingsPage() {
<label htmlFor="water-alert-phone" className="block text-xs font-medium text-[#5a5d5a]">
Alert phone number
</label>
<input
<input aria-label="+13035551234"
id="water-alert-phone"
type="tel"
value={alertPhone}
src/app/admin/water-log/users/[id]/page.tsx
+6 -5
View File
@@ -15,11 +15,12 @@ type UserPageProps = {
};
export default async function WaterLogUserPage({ params, searchParams }: UserPageProps) {
const { id } = await params;
const { from } = await searchParams;
const adminUser = await getAdminUser();
const waterSession = await getWaterAdminSession();
const [{ id }, { from }, adminUser, waterSession] = await Promise.all([
params,
searchParams,
getAdminUser(),
getWaterAdminSession(),
]);
const isSiteAdmin =
adminUser?.role === "platform_admin" ||
src/app/admin/wholesale/WholesaleClient.tsx
+2248 -25
View File
File diff suppressed because it is too large Load Diff
src/app/api/ai/customer-insights/route.ts
+37 -20
View File
@@ -82,30 +82,47 @@ Use "recent_orders" for recent order questions.`;
const queryType = parsed.queryType ?? "recent_orders";
const days = parsed.days ?? 30;
// Route to appropriate RPC based on query type
let rpcName = "get_recent_orders_insights";
let rpcArgs: unknown[] = [effectiveBrandId, days];
// Route to the appropriate RPC. Each query type is a closed
// entry in an allowlist keyed by the user-controlled `queryType`
// string, so the SQL identifier and parameter list are always
// chosen from a known set and never interpolated as raw text.
const RPC_DISPATCH: Record<
"dormant" | "trending" | "top_customers" | "recent_orders" | "at_risk",
{ sql: string; args: unknown[] }
> = {
dormant: {
sql: "SELECT get_dormant_customers_insights($1, $2) AS result",
args: [effectiveBrandId, days],
},
trending: {
sql: "SELECT get_trending_products_insights($1, $2) AS result",
args: [effectiveBrandId, days],
},
top_customers: {
sql: "SELECT get_top_customers_insights($1, $2) AS result",
args: [effectiveBrandId, days],
},
recent_orders: {
sql: "SELECT get_recent_orders_insights($1, $2) AS result",
args: [effectiveBrandId, days],
},
at_risk: {
sql: "SELECT get_at_risk_customers_insights($1) AS result",
args: [effectiveBrandId],
},
};
if (queryType === "dormant") {
rpcName = "get_dormant_customers_insights";
rpcArgs = [effectiveBrandId, days];
} else if (queryType === "trending") {
rpcName = "get_trending_products_insights";
rpcArgs = [effectiveBrandId, days];
} else if (queryType === "top_customers") {
rpcName = "get_top_customers_insights";
rpcArgs = [effectiveBrandId, days];
} else if (queryType === "at_risk") {
rpcName = "get_at_risk_customers_insights";
rpcArgs = [effectiveBrandId];
}
const allowedTypes = Object.keys(RPC_DISPATCH) as Array<
keyof typeof RPC_DISPATCH
>;
const dispatchKey = (allowedTypes as string[]).includes(queryType)
? (queryType as keyof typeof RPC_DISPATCH)
: "recent_orders";
const { sql, args } = RPC_DISPATCH[dispatchKey];
let results: unknown[] = [];
try {
const { rows } = await pool.query(
`SELECT ${rpcName}(${rpcArgs.map((_, i) => `$${i + 1}`).join(", ")}) AS result`,
rpcArgs,
);
const { rows } = await pool.query(sql, args);
const data = rows[0]?.result;
results = Array.isArray(data) ? data.slice(0, 100) : [];
} catch {
src/app/api/cron/send-scheduled/route.ts
+67 -47
View File
@@ -42,57 +42,77 @@ export async function GET(request: Request) {
const results: Array<{ campaignId: string; name: string; sent: number; errors: number }> = [];
for (const campaign of campaigns) {
if (!campaign.body_html) {
await pool.query(
`UPDATE communication_campaigns SET status = 'sent', sent_at = now() WHERE id = $1`,
[campaign.id]
);
results.push({ campaignId: campaign.id, name: campaign.name, sent: 0, errors: 0 });
continue;
}
await Promise.all(
campaigns.map(async (campaign) => {
try {
if (!campaign.body_html) {
await pool.query(
`UPDATE communication_campaigns SET status = 'sent', sent_at = now() WHERE id = $1`,
[campaign.id]
);
results.push({ campaignId: campaign.id, name: campaign.name, sent: 0, errors: 0 });
return;
}
// 2. Find opted-in contacts for this brand
const { rows: contacts } = await pool.query<{ id: string; email: string | null; full_name: string | null }>(
`SELECT id, email, full_name
FROM communication_contacts
WHERE brand_id = $1
AND email_opt_in = true
AND email IS NOT NULL
AND unsubscribed_at IS NULL`,
[campaign.brand_id]
);
const { subject, bodyHtml, id: campaignId } = {
subject: campaign.subject ?? campaign.name,
bodyHtml: campaign.body_html,
id: campaign.id,
};
let sent = 0;
let errors = 0;
for (const contact of contacts) {
if (!contact.email) continue;
const result = await sendCampaignEmail({
to: contact.email,
subject: campaign.subject ?? campaign.name,
html: campaign.body_html,
});
if (result.ok) sent++;
else {
errors++;
console.error(
`[cron/send-scheduled] campaign ${campaign.id} contact ${contact.email}:`,
result.error,
// 2. Find opted-in contacts for this brand
const { rows: contacts } = await pool.query<{ id: string; email: string | null; full_name: string | null }>(
`SELECT id, email, full_name
FROM communication_contacts
WHERE brand_id = $1
AND email_opt_in = true
AND email IS NOT NULL
AND unsubscribed_at IS NULL`,
[campaign.brand_id]
);
const eligibleContacts = contacts.filter((c) => c.email);
const contactResults = await Promise.all(
eligibleContacts.map(async (contact) => {
try {
const result = await sendCampaignEmail({
to: contact.email as string,
subject,
html: bodyHtml,
});
if (result.ok) return true;
console.error(
`[cron/send-scheduled] campaign ${campaignId} contact ${contact.email}:`,
result.error,
);
return false;
} catch (e) {
console.error(
`[cron/send-scheduled] campaign ${campaignId} contact ${contact.email}:`,
e,
);
return false;
}
})
);
const sent = contactResults.filter(Boolean).length;
const errors = contactResults.length - sent;
// 3. Mark campaign as sent
await pool.query(
`UPDATE communication_campaigns
SET status = 'sent', sent_at = now(), recipient_count = $2
WHERE id = $1`,
[campaign.id, sent]
);
results.push({ campaignId: campaign.id, name: campaign.name, sent, errors });
} catch (e) {
console.error(`[cron/send-scheduled] campaign ${campaign.id}:`, e);
results.push({ campaignId: campaign.id, name: campaign.name, sent: 0, errors: 0 });
}
}
// 3. Mark campaign as sent
await pool.query(
`UPDATE communication_campaigns
SET status = 'sent', sent_at = now(), recipient_count = $2
WHERE id = $1`,
[campaign.id, sent]
);
results.push({ campaignId: campaign.id, name: campaign.name, sent, errors });
}
})
);
return NextResponse.json({ success: true, timestamp: new Date().toISOString(), results });
} catch (err) {
src/app/api/email-automation/abandoned-cart/route.ts
+26 -17
View File
@@ -24,16 +24,22 @@ async function processAbandonedCartsForBrand(brandId: string, brandName: string)
const activeCarts: AbandonedCart[] = result.carts;
// 4. Send emails
for (const cart of activeCarts) {
const nextStep = cart.sequence_step + 1;
if (nextStep > 3) { skipped++; continue; }
const r = await sendAbandonedCartEmail(cart, nextStep, brandId);
if (r.success) {
sent++;
} else {
failed++;
}
}
const cartOutcomes = await Promise.all(
activeCarts.map(async (cart): Promise<"sent" | "failed" | "skipped"> => {
const nextStep = cart.sequence_step + 1;
if (nextStep > 3) return "skipped";
try {
const r = await sendAbandonedCartEmail(cart, nextStep, brandId);
return r.success ? "sent" : "failed";
} catch (e) {
console.error(`[email-automation/abandoned-cart] cart ${cart.id}:`, e);
return "failed";
}
})
);
sent = cartOutcomes.filter((o) => o === "sent").length;
failed = cartOutcomes.filter((o) => o === "failed").length;
skipped = cartOutcomes.filter((o) => o === "skipped").length;
return { sent, failed, skipped };
}
@@ -51,13 +57,16 @@ export async function POST(req: NextRequest) {
const results: Record<string, { sent: number; failed: number; skipped: number }> = {};
for (const brand of BRAND_IDS) {
try {
results[brand.name] = await processAbandonedCartsForBrand(brand.id, brand.name);
} catch {
results[brand.name] = { sent: 0, failed: 0, skipped: 0 };
}
}
await Promise.all(
BRAND_IDS.map(async (brand) => {
try {
results[brand.name] = await processAbandonedCartsForBrand(brand.id, brand.name);
} catch (e) {
console.error(`[email-automation/abandoned-cart] brand ${brand.name}:`, e);
results[brand.name] = { sent: 0, failed: 0, skipped: 0 };
}
})
);
const total = Object.values(results).reduce((acc, r) => ({ sent: acc.sent + r.sent, failed: acc.failed + r.failed, skipped: acc.skipped + r.skipped }), { sent: 0, failed: 0, skipped: 0 });
src/app/api/email-automation/welcome-sequence/route.ts
+30 -23
View File
@@ -1,9 +1,7 @@
import { NextRequest, NextResponse } from "next/server";
import {
getWelcomeSequence,
sendWelcomeEmail,
type WelcomeSequenceEntry,
} from "@/actions/email-automation/welcome-sequence";
import { getWelcomeSequence } from "@/actions/email-automation/welcome-sequence";
import { sendWelcomeEmail } from "@/lib/welcome-email-sender";
import type { WelcomeSequenceEntry } from "@/lib/welcome-email-sender";
const BRAND_IDS = [
{ id: "64294306-5f42-463d-a5e8-2ad6c81a96de", name: "Tuxedo Corn" },
@@ -19,18 +17,24 @@ async function processWelcomeSequencesForBrand(brandId: string): Promise<{ sent:
}
const entries: WelcomeSequenceEntry[] = result.entries;
for (const entry of entries) {
const nextStep = entry.sequence_step + 1;
if (nextStep > 4) { skipped++; continue; }
if (entry.status === "unsubscribed" || entry.status === "bounced") { skipped++; continue; }
const entryOutcomes = await Promise.all(
entries.map(async (entry): Promise<"sent" | "failed" | "skipped"> => {
const nextStep = entry.sequence_step + 1;
if (nextStep > 4) return "skipped";
if (entry.status === "unsubscribed" || entry.status === "bounced") return "skipped";
const r = await sendWelcomeEmail(entry, nextStep);
if (r.success) {
sent++;
} else {
failed++;
}
}
try {
const r = await sendWelcomeEmail(entry, nextStep);
return r.success ? "sent" : "failed";
} catch (e) {
console.error(`[email-automation/welcome-sequence] entry ${entry.id}:`, e);
return "failed";
}
})
);
sent = entryOutcomes.filter((o) => o === "sent").length;
failed = entryOutcomes.filter((o) => o === "failed").length;
skipped = entryOutcomes.filter((o) => o === "skipped").length;
return { sent, failed, skipped };
}
@@ -48,13 +52,16 @@ export async function POST(req: NextRequest) {
const results: Record<string, { sent: number; failed: number; skipped: number }> = {};
for (const brand of BRAND_IDS) {
try {
results[brand.name] = await processWelcomeSequencesForBrand(brand.id);
} catch {
results[brand.name] = { sent: 0, failed: 0, skipped: 0 };
}
}
await Promise.all(
BRAND_IDS.map(async (brand) => {
try {
results[brand.name] = await processWelcomeSequencesForBrand(brand.id);
} catch (e) {
console.error(`[email-automation/welcome-sequence] brand ${brand.name}:`, e);
results[brand.name] = { sent: 0, failed: 0, skipped: 0 };
}
})
);
const total = Object.values(results).reduce((acc, r) => ({ sent: acc.sent + r.sent, failed: acc.failed + r.failed, skipped: acc.skipped + r.skipped }), { sent: 0, failed: 0, skipped: 0 });
src/app/api/indian-river-direct/schedule-pdf/route.ts
+23 -29
View File
@@ -1,44 +1,36 @@
import { NextResponse } from "next/server";
import { PDFDocument, rgb, StandardFonts } from "pdf-lib";
import { pool } from "@/lib/db";
import { supabase } from "@/lib/supabase";
export async function GET() {
const brandSlug = "indian-river-direct";
const { rows: brandRows } = await pool.query<{ id: string; name: string }>(
`SELECT id, name FROM brands WHERE slug = $1 LIMIT 1`,
[brandSlug],
);
const brand = brandRows[0];
const { data: brand } = await supabase
.from("brands")
.select("id, name")
.eq("slug", brandSlug)
.single() as unknown as { data: { id: string; name: string } | null };
if (!brand?.id) {
return new NextResponse("Brand not found", { status: 404 });
}
const { rows: stops } = await pool.query<{ city: string; state: string; date: string; time: string; location: string }>(
`SELECT city, state, date::text AS date, time, location
FROM stops
WHERE brand_id = $1 AND is_public = true AND status = 'active'
ORDER BY date ASC, time ASC`,
[brand.id],
);
const { data: stops } = await supabase
.from("stops")
.select("*")
.eq("brand_id", brand.id)
.eq("active", true)
.order("date", { ascending: true }) as unknown as { data: { city: string; state: string; date: string; time: string; location: string }[] | null };
const { rows: settingsRows } = await pool.query<{
logo_url: string | null;
email: string | null;
phone: string | null;
schedule_pdf_notes: string | null;
}>(
`SELECT logo_url, email, phone, schedule_pdf_notes
FROM brand_settings
WHERE brand_id = $1
LIMIT 1`,
[brand.id],
);
const settings = settingsRows[0] ?? null;
const { data: settings } = await supabase
.from("brand_settings")
.select("logo_url, email, phone, schedule_pdf_notes")
.eq("brand_id", brand.id)
.single() as unknown as { data: { logo_url: string | null; email: string | null; phone: string | null; schedule_pdf_notes: string | null } | null };
const pdfBytes = await buildProfessionalSchedulePdf({
brandName: brand.name,
stops: stops,
stops: stops ?? [],
logoUrl: settings?.logo_url ?? null,
contactEmail: settings?.email ?? null,
contactPhone: settings?.phone ?? null,
@@ -73,8 +65,10 @@ async function buildProfessionalSchedulePdf({
const { width, height } = page.getSize();
const margin = 50;
const helvetica = await page.doc.embedFont(StandardFonts.Helvetica);
const helveticaBold = await page.doc.embedFont(StandardFonts.HelveticaBold);
const [helvetica, helveticaBold] = await Promise.all([
page.doc.embedFont(StandardFonts.Helvetica),
page.doc.embedFont(StandardFonts.HelveticaBold),
]);
const colWidths = [130, 80, 80, 210];
const headers = ["City / State", "Date", "Time", "Location"];
src/app/api/square/oauth/callback/route.ts
+30 -118
View File
@@ -1,125 +1,37 @@
import { NextResponse } from "next/server";
import { pool } from "@/lib/db";
import { cookies } from "next/headers";
function escapeAttr(s: string): string {
return s
.replace(/&/g, "&amp;")
.replace(/"/g, "&quot;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;");
}
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const code = searchParams.get("code");
const state = searchParams.get("state");
const error = searchParams.get("error");
const code = searchParams.get("code") ?? "";
const state = searchParams.get("state") ?? "";
const error = searchParams.get("error") ?? "";
const origin = new URL(request.url).origin;
const completeUrl = `${origin}/api/square/oauth/complete`;
if (error) {
return NextResponse.redirect(
new URL(`/admin/settings/payments?error=square_oauth_denied&reason=${encodeURIComponent(error)}`, request.url)
);
}
if (!code || !state) {
return NextResponse.redirect(
new URL("/admin/settings/payments?error=square_oauth_missing_params", request.url)
);
}
// Decode brand_id from state
let brandId: string | null = null;
try {
const decoded = JSON.parse(Buffer.from(state, "base64").toString("utf-8"));
brandId = decoded?.brandId ?? null;
} catch {
return NextResponse.redirect(
new URL("/admin/settings/payments?error=square_oauth_invalid_state", request.url)
);
}
if (!brandId) {
return NextResponse.redirect(
new URL("/admin/settings/payments?error=square_oauth_missing_state", request.url)
);
}
// Exchange code for access token
const appId = process.env.NEXT_PUBLIC_SQUARE_APP_ID;
const appSecret = process.env.SQUARE_APP_SECRET;
const env = process.env.SQUARE_ENVIRONMENT ?? "sandbox";
if (!appId || !appSecret) {
return NextResponse.redirect(
new URL("/admin/settings/payments?error=square_credentials_not_configured", request.url)
);
}
const tokenUrl = env === "production"
? "https://connect.squareup.com/v2/oauth2/token"
: "https://connect.squareupsandbox.com/v2/oauth2/token";
const redirectUri = `${origin}/api/square/oauth/callback`;
let accessToken: string | null = null;
let locationId: string | null = null;
try {
const tokenResponse = await fetch(tokenUrl, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Square-Version": "2025-01-16",
},
body: JSON.stringify({
client_id: appId,
client_secret: appSecret,
code,
grant_type: "authorization_code",
redirect_uri: redirectUri,
}),
});
const tokenData = await tokenResponse.json();
if (!tokenResponse.ok || tokenData.access_token) {
accessToken = tokenData.access_token ?? null;
locationId = tokenData.location_id ?? null;
} else {
return NextResponse.redirect(
new URL(`/admin/settings/payments?error=square_token_exchange_failed`, request.url)
);
}
} catch (err) {
return NextResponse.redirect(
new URL("/admin/settings/payments?error=square_token_exchange_error", request.url)
);
}
if (!accessToken) {
return NextResponse.redirect(
new URL("/admin/settings/payments?error=square_no_access_token", request.url)
);
}
// Store token + location_id in payment_settings via SECURITY DEFINER RPC
try {
await pool.query(
"SELECT upsert_payment_settings($1, $2, $3, $4, $5, $6, $7, $8, $9)",
[
brandId,
"square",
null, // stripe_publishable_key
null, // stripe_secret_key
null, // stripe_user_id
accessToken,
locationId,
null, // square_sync_enabled (not changed here)
null, // square_inventory_mode (not changed here)
]
);
} catch (err) {
return NextResponse.redirect(
new URL("/admin/settings/payments?error=square_token_save_error", request.url)
);
}
return NextResponse.redirect(
new URL("/admin/settings/payments?square_connected=true", request.url)
);
// Render an auto-submitting HTML form that POSTs the same params to /complete.
// This avoids triggering side effects from a GET handler (CSRF-safe pattern).
const html = `<!doctype html>
<html><head><meta charset="utf-8"><title>Connecting Square…</title></head>
<body>
<p>Completing Square connection…</p>
<form id="f" method="POST" action="${escapeAttr(completeUrl)}">
<input type="hidden" name="code" value="${escapeAttr(code)}" />
<input type="hidden" name="state" value="${escapeAttr(state)}" />
<input type="hidden" name="error" value="${escapeAttr(error)}" />
<noscript><button type="submit">Continue</button></noscript>
</form>
<script>document.getElementById('f').submit();</script>
</body></html>`;
return new NextResponse(html, {
status: 200,
headers: { "content-type": "text/html; charset=utf-8" },
});
}
src/app/api/stripe/oauth/callback/route.ts
+30 -96
View File
@@ -1,101 +1,35 @@
import { NextResponse } from "next/server";
import { getAdminUser } from "@/lib/admin-permissions";
import { savePaymentSettings } from "@/actions/payments";
function escapeAttr(s: string): string {
return s
.replace(/&/g, "&amp;")
.replace(/"/g, "&quot;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;");
}
export async function GET(req: Request) {
const adminUser = await getAdminUser();
if (!adminUser || !adminUser.brand_id) {
return NextResponse.redirect(new URL("/admin/settings/payments?error=unauthorized", req.url));
}
const url = new URL(req.url);
const code = url.searchParams.get("code");
const error = url.searchParams.get("error");
const state = url.searchParams.get("state");
const code = url.searchParams.get("code") ?? "";
const state = url.searchParams.get("state") ?? "";
const error = url.searchParams.get("error") ?? "";
const origin = url.origin;
const completeUrl = `${origin}/api/stripe/oauth/complete`;
// Handle error from Stripe
if (error) {
return NextResponse.redirect(
new URL(`/admin/settings/payments?stripe_error=${encodeURIComponent(error)}`, req.url)
);
}
if (!code) {
return NextResponse.redirect(
new URL("/admin/settings/payments?stripe_error=no_code", req.url)
);
}
// Decode state to get brandId
let brandId = adminUser.brand_id;
if (state) {
try {
const decoded = JSON.parse(Buffer.from(state, "base64").toString());
if (decoded.brandId) {
brandId = decoded.brandId;
}
} catch {}
}
// Exchange code for access token
const clientId = process.env.STRIPE_CLIENT_ID;
const clientSecret = process.env.STRIPE_CLIENT_SECRET;
if (!clientId || !clientSecret) {
return NextResponse.redirect(
new URL("/admin/settings/payments?stripe_error=oauth_not_configured", req.url)
);
}
try {
// Exchange authorization code for access token
const tokenResponse = await fetch("https://connect.stripe.com/oauth/token", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: new URLSearchParams({
grant_type: "authorization_code",
code,
client_id: clientId,
client_secret: clientSecret,
}),
});
const tokenData = await tokenResponse.json();
if (tokenData.error) {
return NextResponse.redirect(
new URL(`/admin/settings/payments?stripe_error=${encodeURIComponent(tokenData.error_description || tokenData.error)}`, req.url)
);
}
// Save the Stripe credentials
const stripeUserId = tokenData.stripe_user_id; // This is the connected account ID
const accessToken = tokenData.access_token;
const publishableKey = tokenData.stripe_publishable_key;
// Save to database via server action
const result = await savePaymentSettings({
brandId,
provider: "stripe",
stripePublishableKey: publishableKey || undefined,
stripeSecretKey: accessToken, // Store access token as secret key
stripeUserId, // Store the connected account ID
});
if (result.success) {
return NextResponse.redirect(
new URL("/admin/settings/payments?stripe_connected=true", req.url)
);
} else {
return NextResponse.redirect(
new URL(`/admin/settings/payments?stripe_error=${encodeURIComponent(result.error || "Failed to save")}`, req.url)
);
}
} catch (err) {
return NextResponse.redirect(
new URL(`/admin/settings/payments?stripe_error=${encodeURIComponent("Failed to complete OAuth")}`, req.url)
);
}
}
const html = `<!doctype html>
<html><head><meta charset="utf-8"><title>Connecting Stripe…</title></head>
<body>
<p>Completing Stripe connection…</p>
<form id="f" method="POST" action="${escapeAttr(completeUrl)}">
<input type="hidden" name="code" value="${escapeAttr(code)}" />
<input type="hidden" name="state" value="${escapeAttr(state)}" />
<input type="hidden" name="error" value="${escapeAttr(error)}" />
<noscript><button type="submit">Continue</button></noscript>
</form>
<script>document.getElementById('f').submit();</script>
</body></html>`;
return new NextResponse(html, {
status: 200,
headers: { "content-type": "text/html; charset=utf-8" },
});
}
src/app/api/time-tracking/export/route.ts
+18 -14
View File
@@ -77,20 +77,24 @@ export async function GET(req: NextRequest) {
const allSettings: Awaited<ReturnType<typeof getTimeTrackingSettings>>[] = [];
const allWorkers: Awaited<ReturnType<typeof getTimeTrackingWorkers>>[] = [];
for (const brandId of brandIds) {
const [workers, settings, logs] = await Promise.all([
getTimeTrackingWorkers(brandId),
getTimeTrackingSettings(brandId),
getWorkerTimeLogs(brandId, {
start: startDate || undefined,
end: endDate || undefined,
limit: 5000,
}),
]);
allWorkers.push(workers);
allSettings.push(settings);
allLogs = allLogs.concat((logs as LogEntry[]).map(l => ({ ...l, brandId })));
}
await Promise.all(brandIds.map(async (brandId) => {
try {
const [workers, settings, logs] = await Promise.all([
getTimeTrackingWorkers(brandId),
getTimeTrackingSettings(brandId),
getWorkerTimeLogs(brandId, {
start: startDate || undefined,
end: endDate || undefined,
limit: 5000,
}),
]);
allWorkers.push(workers);
allSettings.push(settings);
allLogs = allLogs.concat((logs as LogEntry[]).map(l => ({ ...l, brandId })));
} catch (e) {
console.error(e);
}
}));
// Sort by clock_in
allLogs.sort((a, b) => new Date(a.clock_in).getTime() - new Date(b.clock_in).getTime());
src/app/api/time-tracking/notify/route.ts
+3 -3
View File
@@ -242,9 +242,9 @@ export async function POST(req: NextRequest) {
// ── Send SMS ────────────────────────────────────────────────────────────
if (smsNumbers.length > 0) {
const smsBody = `[${brandName} Time Tracking] ALERT: ${workerName} — ${result.trigger_type?.replace("_", " ")}. Hours: ${dailyHours.toFixed(1)}d / ${weeklyHours.toFixed(1)}w. Check admin panel.`;
for (const num of smsNumbers) {
await sendTwilioSms(num, smsBody);
}
await Promise.all(smsNumbers.map(async (num) => {
try { await sendTwilioSms(num, smsBody); } catch (e) { console.error(e); }
}));
}
return NextResponse.json({
src/app/api/tuxedo/schedule-pdf/route.ts
+31 -29
View File
@@ -1,44 +1,44 @@
import { NextResponse } from "next/server";
import { PDFDocument, rgb, StandardFonts } from "pdf-lib";
import { pool } from "@/lib/db";
import { supabase } from "@/lib/supabase";
type Settings = {
logo_url: string | null;
contact_email: string | null;
contact_phone: string | null;
schedule_pdf_notes: string | null;
brand_name: string | null;
};
export async function GET() {
const brandSlug = "tuxedo";
const { rows: brandRows } = await pool.query<{ id: string; name: string }>(
`SELECT id, name FROM brands WHERE slug = $1 LIMIT 1`,
[brandSlug],
);
const brand = brandRows[0];
const { data: brand } = await supabase
.from("brands")
.select("id, name")
.eq("slug", brandSlug)
.single() as unknown as { data: { id: string; name: string } | null };
if (!brand?.id) {
return new NextResponse("Brand not found", { status: 404 });
}
const { rows: stops } = await pool.query<{ city: string; state: string; date: string; time: string; location: string }>(
`SELECT city, state, date::text AS date, time, location
FROM stops
WHERE brand_id = $1 AND is_public = true AND status = 'active'
ORDER BY date ASC, time ASC`,
[brand.id],
);
const { data: stops } = await supabase
.from("stops")
.select("city, state, date, time, location")
.eq("brand_id", brand.id)
.eq("active", true)
.order("date", { ascending: true }) as unknown as { data: { city: string; state: string; date: string; time: string; location: string }[] | null };
const { rows: settingsRows } = await pool.query<{
logo_url: string | null;
email: string | null;
phone: string | null;
schedule_pdf_notes: string | null;
}>(
`SELECT logo_url, email, phone, schedule_pdf_notes
FROM brand_settings
WHERE brand_id = $1
LIMIT 1`,
[brand.id],
);
const settings = settingsRows[0] ?? null;
const { data: settings } = await supabase
.from("brand_settings")
.select("logo_url, email, phone, schedule_pdf_notes")
.eq("brand_id", brand.id)
.single() as unknown as { data: { logo_url: string | null; email: string | null; phone: string | null; schedule_pdf_notes: string | null } | null };
const pdfBytes = await buildProfessionalSchedulePdf({
brandName: brand.name,
stops: stops,
stops: stops ?? [],
logoUrl: settings?.logo_url ?? null,
contactEmail: settings?.email ?? null,
contactPhone: settings?.phone ?? null,
@@ -73,8 +73,10 @@ async function buildProfessionalSchedulePdf({
const { width, height } = page.getSize();
const margin = 50;
const helvetica = await page.doc.embedFont(StandardFonts.Helvetica);
const helveticaBold = await page.doc.embedFont(StandardFonts.HelveticaBold);
const [helvetica, helveticaBold] = await Promise.all([
page.doc.embedFont(StandardFonts.Helvetica),
page.doc.embedFont(StandardFonts.HelveticaBold),
]);
const colWidths = [130, 80, 80, 210];
const headers = ["City / State", "Date", "Time", "Location"];
src/app/api/v1/campaigns/route.ts
+4 -4
View File
@@ -25,14 +25,14 @@ function validationError(error: z.ZodError) {
// ============================================
const createCampaignSchema = z.object({
brand_id: z.string().uuid(),
brand_id: z.uuid(),
name: z.string().min(1).max(255),
subject: z.string().min(1).max(500),
content: z.string().min(1),
type: z.enum(["email", "sms"]).default("email"),
segment_id: z.string().uuid().optional(),
contact_ids: z.array(z.string().uuid()).optional(),
scheduled_at: z.string().datetime().optional(),
segment_id: z.uuid().optional(),
contact_ids: z.array(z.uuid()).optional(),
scheduled_at: z.iso.datetime().optional(),
});
export async function POST(req: NextRequest) {
src/app/api/v1/products/route.ts
+1 -1
View File
@@ -27,7 +27,7 @@ function validationError(error: z.ZodError) {
// ============================================
const getProductsSchema = z.object({
brand_id: z.string().uuid().optional(),
brand_id: z.uuid().optional(),
category: z.string().optional(),
is_active: z.boolean().optional(),
search: z.string().optional(),
src/app/api/v1/referrals/route.ts
+2 -2
View File
@@ -25,8 +25,8 @@ function validationError(error: z.ZodError) {
// ============================================
const createReferralSchema = z.object({
brand_id: z.string().uuid(),
referred_email: z.string().email(),
brand_id: z.uuid(),
referred_email: z.email(),
referral_code: z.string().min(6).max(50),
});
src/app/api/v1/reports/route.ts
+3 -3
View File
@@ -24,9 +24,9 @@ function validationError(error: z.ZodError) {
// ============================================
const reportFiltersSchema = z.object({
brand_id: z.string().uuid(),
start_date: z.string().datetime(),
end_date: z.string().datetime(),
brand_id: z.uuid(),
start_date: z.iso.datetime(),
end_date: z.iso.datetime(),
report_type: z.enum(["orders", "revenue", "customers", "products"]).default("orders"),
});
src/app/api/v1/water-logs/route.ts
+3 -3
View File
@@ -24,14 +24,14 @@ function validationError(error: z.ZodError) {
// ============================================
const createWaterLogSchema = z.object({
brand_id: z.string().uuid(),
field_id: z.string().uuid().optional(),
brand_id: z.uuid(),
field_id: z.uuid().optional(),
field_name: z.string().max(255).optional(),
gallons: z.number().positive(),
duration_minutes: z.number().int().nonnegative().optional(),
water_method: z.enum(["drip", "sprinkler", "flood", "manual"]).optional(),
notes: z.string().max(500).optional(),
logged_at: z.string().datetime().optional(),
logged_at: z.iso.datetime().optional(),
});
export async function POST(req: NextRequest) {
src/app/api/water-qr-sheet/route.ts
+14 -11
View File
@@ -23,17 +23,20 @@ export async function POST(request: Request) {
const siteUrl = baseUrl ?? process.env.NEXT_PUBLIC_SITE_URL ?? "http://localhost:3000";
const qrDataUrls: string[] = [];
for (const hg of headgates) {
const url = `${siteUrl}/water?h=${hg.token}`;
const dataUrl = await QRCode.toDataURL(url, {
width: 280,
margin: 2,
color: { dark: "#000000", light: "#ffffff" },
errorCorrectionLevel: "H",
});
qrDataUrls.push(dataUrl);
}
const qrDataUrls: string[] = await Promise.all(headgates.map(async (hg) => {
try {
const url = `${siteUrl}/water?h=${hg.token}`;
return await QRCode.toDataURL(url, {
width: 280,
margin: 2,
color: { dark: "#000000", light: "#ffffff" },
errorCorrectionLevel: "H",
});
} catch (e) {
console.error(e);
return "";
}
}));
const rows = headgates.map((hg, i) => `
<div class="card">
src/app/api/wholesale/checkout/route.ts
+1 -2
View File
@@ -4,8 +4,7 @@
* TODO(migration): wholesale_orders is part of the legacy schema and
* is read/written via raw `pool.query` SQL. The `get_wholesale_settings`
* and `get_payment_settings` SECURITY DEFINER RPCs still live in the
* database (originally from the now-archived supabase migrations;
* consolidated into `db/migrations/0001_init.sql`) and are also called
* database (see supabase/migrations/046 and 045) and are also called
* via `pool.query`. When wholesale is reactivated, declare the tables
* in `db/schema/wholesale.ts` and switch the reads to typed Drizzle.
*/
src/app/api/wholesale/invoice/[orderId]/pdf/route.ts
+4 -2
View File
@@ -118,8 +118,10 @@ export async function GET(
async function buildInvoicePdf(order: OrderRow, settings: InvoiceSettings) {
const pdfDoc = await PDFDocument.create();
const helvetica = await pdfDoc.embedFont(StandardFonts.Helvetica);
const helveticaBold = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
const [helvetica, helveticaBold] = await Promise.all([
pdfDoc.embedFont(StandardFonts.Helvetica),
pdfDoc.embedFont(StandardFonts.HelveticaBold),
]);
const page = pdfDoc.addPage([612, 792]);
const { width, height } = page.getSize();
src/app/api/wholesale/invoice/[orderId]/route.ts
+4 -2
View File
@@ -111,8 +111,10 @@ async function buildInvoicePdf(
}
): Promise<Uint8Array> {
const pdfDoc = await PDFDocument.create();
const helvetica = await pdfDoc.embedFont(StandardFonts.Helvetica);
const helveticaBold = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
const [helvetica, helveticaBold] = await Promise.all([
pdfDoc.embedFont(StandardFonts.Helvetica),
pdfDoc.embedFont(StandardFonts.HelveticaBold),
]);
const page = pdfDoc.addPage([612, 792]);
const { width } = page.getSize();
src/app/api/wholesale/notifications/send/route.ts
+84 -62
View File
@@ -74,70 +74,92 @@ export async function POST() {
let sent = 0;
let failed = 0;
for (const n of notifications) {
if (!n.email_to) {
await markWholesaleNotificationSent(n.id, "No email_to address");
failed++;
continue;
const results = await Promise.all(notifications.map(async (n) => {
let localSent = 0;
let localFailed = 0;
try {
if (!n.email_to) {
await markWholesaleNotificationSent(n.id, "No email_to address");
localFailed++;
return { sent: localSent, failed: localFailed };
}
const settings = brandSettingsMap[n.brand_id];
const activeRecipients = (settings?.notification_recipients ?? [])
.filter(r => r.active);
// ── Fallback admin email if no active recipients ───────────────────────────
const fallbackAdminEmail =
settings?.notification_email
?? settings?.from_email
?? settings?.invoice_business_email
?? null;
const fromEmail = n.invoice_business_email ?? "wholesale@routecommerce.com";
// ── Send to customer ───────────────────────────────────────────────────────
const customerOk = await sendOneEmail(resendApiKey, fromEmail, n.email_to, n.email_cc ?? undefined, n.subject, n.body_html, n.body_text);
if (customerOk) {
await markWholesaleNotificationSent(n.id);
localSent++;
} else {
await markWholesaleNotificationSent(n.id, "Resend error");
localFailed++;
return { sent: localSent, failed: localFailed };
}
// ── Send to notification recipients ───────────────────────────────────────
const recipients = activeRecipients.length > 0
? activeRecipients
: fallbackAdminEmail ? [{ email: fallbackAdminEmail, name: undefined, active: true }] : [];
const recipientResults = await Promise.all(recipients.map(async (recipient) => {
// Skip the customer email if they happen to also be a recipient (dedup)
if (recipient.email === n.email_to) return { ok: false, skipped: true };
const toAddress = recipient.name
? `"${recipient.name}" <${recipient.email}>`
: recipient.email;
try {
const ok = await sendOneEmail(resendApiKey, fromEmail, toAddress, undefined, n.subject, n.body_html, n.body_text);
// Log a separate notification entry for audit trail
await pool.query(
"SELECT enqueue_wholesale_notification($1, $2, $3, $4, $5, $6, $7, $8, $9)",
[
n.brand_id,
n.customer_id,
n.order_id ?? null,
n.type,
recipient.email,
null,
n.subject,
n.body_html,
n.body_text,
]
);
return { ok, skipped: false };
} catch (e) {
console.error(e);
return { ok: false, skipped: false };
}
}));
for (const r of recipientResults) {
if (r.skipped) continue;
if (r.ok) localSent++; else localFailed++;
}
} catch (e) {
console.error(e);
}
return { sent: localSent, failed: localFailed };
}));
const settings = brandSettingsMap[n.brand_id];
const activeRecipients = (settings?.notification_recipients ?? [])
.filter(r => r.active);
// ── Fallback admin email if no active recipients ───────────────────────────
const fallbackAdminEmail =
settings?.notification_email
?? settings?.from_email
?? settings?.invoice_business_email
?? null;
const fromEmail = n.invoice_business_email ?? "wholesale@routecommerce.com";
// ── Send to customer ───────────────────────────────────────────────────────
const customerOk = await sendOneEmail(resendApiKey, fromEmail, n.email_to, n.email_cc ?? undefined, n.subject, n.body_html, n.body_text);
if (customerOk) {
await markWholesaleNotificationSent(n.id);
sent++;
} else {
await markWholesaleNotificationSent(n.id, "Resend error");
failed++;
continue;
}
// ── Send to notification recipients ───────────────────────────────────────
const recipients = activeRecipients.length > 0
? activeRecipients
: fallbackAdminEmail ? [{ email: fallbackAdminEmail, name: undefined, active: true }] : [];
for (const recipient of recipients) {
// Skip the customer email if they happen to also be a recipient (dedup)
if (recipient.email === n.email_to) continue;
const toAddress = recipient.name
? `"${recipient.name}" <${recipient.email}>`
: recipient.email;
const ok = await sendOneEmail(resendApiKey, fromEmail, toAddress, undefined, n.subject, n.body_html, n.body_text);
// Log a separate notification entry for audit trail
await pool.query(
"SELECT enqueue_wholesale_notification($1, $2, $3, $4, $5, $6, $7, $8, $9)",
[
n.brand_id,
n.customer_id,
n.order_id ?? null,
n.type,
recipient.email,
null,
n.subject,
n.body_html,
n.body_text,
]
);
if (ok) sent++; else failed++;
}
for (const r of results) {
sent += r.sent;
failed += r.failed;
}
await triggerPickupReminder();
src/app/api/wholesale/price-sheet/route.ts
+4 -4
View File
@@ -5,10 +5,10 @@
* `enqueue_wholesale_notification` SECURITY DEFINER RPC live in the
* legacy schema. Reads are converted to `pool.query`; the
* `enqueue_wholesale_notification` RPC is still in the database
* (originally from the now-archived supabase migrations; consolidated
* into `db/migrations/0001_init.sql`) and is called via `pool.query`.
* When wholesale is reactivated, move the tables into
* `db/schema/wholesale.ts` and switch reads to typed Drizzle.
* (supabase/migrations/054) and is called via `pool.query` rather
* than the Supabase REST gateway. When wholesale is reactivated,
* move the tables into `db/schema/wholesale.ts` and switch reads to
* typed Drizzle.
*/
import { NextRequest, NextResponse } from "next/server";
src/app/api/wholesale/webhooks/dispatch/route.ts
+52 -44
View File
@@ -85,53 +85,61 @@ export async function POST() {
const pending = pendingRes.rows;
let dispatched = 0;
for (const webhook of pending) {
// Validate URL to prevent SSRF attacks
if (!validateWebhookUrl(webhook.url)) {
console.error("[SSRF_BLOCKED]", {
webhookId: webhook.id,
brandId: webhook.brand_id,
url: webhook.url,
eventType: webhook.event_type,
timestamp: new Date().toISOString(),
});
await markFailed(webhook.id, "SSRF attempt blocked: invalid webhook URL");
continue;
}
const payload = webhook.payload ?? {};
const payloadString = JSON.stringify(payload);
// Build HMAC-SHA256 signature: HMAC(secret, payload_string)
const signature = crypto
.createHmac("sha256", webhook.secret)
.update(payloadString)
.digest("hex");
const dispatchedResults = await Promise.all(pending.map(async (webhook) => {
let localDispatched = 0;
try {
const res = await fetch(webhook.url, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-Webhook-Signature": `sha256=${signature}`,
"X-Webhook-Event": webhook.event_type,
},
body: payloadString,
});
const responseText = await res.text().catch(() => "");
if (res.ok) {
await markSent(webhook.id, `HTTP ${res.status}: ${responseText.slice(0, 200)}`);
dispatched++;
} else {
await markFailed(webhook.id, `HTTP ${res.status}: ${responseText.slice(0, 200)}`);
// Validate URL to prevent SSRF attacks
if (!validateWebhookUrl(webhook.url)) {
console.error("[SSRF_BLOCKED]", {
webhookId: webhook.id,
brandId: webhook.brand_id,
url: webhook.url,
eventType: webhook.event_type,
timestamp: new Date().toISOString(),
});
await markFailed(webhook.id, "SSRF attempt blocked: invalid webhook URL");
return localDispatched;
}
} catch (err) {
const msg = err instanceof Error ? err.message : "Network error";
await markFailed(webhook.id, msg);
const payload = webhook.payload ?? {};
const payloadString = JSON.stringify(payload);
// Build HMAC-SHA256 signature: HMAC(secret, payload_string)
const signature = crypto
.createHmac("sha256", webhook.secret)
.update(payloadString)
.digest("hex");
try {
const res = await fetch(webhook.url, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-Webhook-Signature": `sha256=${signature}`,
"X-Webhook-Event": webhook.event_type,
},
body: payloadString,
});
const responseText = await res.text().catch(() => "");
if (res.ok) {
await markSent(webhook.id, `HTTP ${res.status}: ${responseText.slice(0, 200)}`);
localDispatched++;
} else {
await markFailed(webhook.id, `HTTP ${res.status}: ${responseText.slice(0, 200)}`);
}
} catch (err) {
const msg = err instanceof Error ? err.message : "Network error";
await markFailed(webhook.id, msg);
}
} catch (e) {
console.error(e);
}
}
return localDispatched;
}));
dispatched = dispatchedResults.reduce((acc, r) => acc + r, 0);
return NextResponse.json({ message: `Dispatched ${dispatched}/${pending.length} webhook(s).`, dispatched });
}
src/app/blog/page.tsx
+10 -5
View File
@@ -48,6 +48,11 @@ export const viewport: Viewport = {
maximumScale: 5,
};
// Module-level constant for the copyright year. Evaluated once per
// server render (module scope), so the footer string is a static value
// — avoids hydration mismatch from `new Date()` in JSX.
const CURRENT_YEAR = new Date().getFullYear();
const BLOG_POSTS = [
{
slug: "getting-started-with-route-commerce",
@@ -212,8 +217,8 @@ export default function BlogPage() {
</Link>
</div>
<div className="grid md:grid-cols-3 gap-6">
{RESOURCES.map((resource, i) => (
<div key={i} className="bg-[#faf8f5] rounded-2xl p-6 border border-[#e5e5e5] hover:border-[#1a4d2e]/30 transition-colors">
{RESOURCES.map((resource) => (
<div key={resource.title} className="bg-[#faf8f5] rounded-2xl p-6 border border-[#e5e5e5] hover:border-[#1a4d2e]/30 transition-colors">
<div className="w-12 h-12 bg-white rounded-xl flex items-center justify-center text-2xl mb-4 border border-[#e5e5e5]">
{resource.icon}
</div>
@@ -221,7 +226,7 @@ export default function BlogPage() {
<p className="text-sm text-[#666] mb-4">{resource.description}</p>
<div className="flex items-center justify-between">
<span className="text-xs text-[#888]">{resource.downloads} downloads</span>
<button className="text-sm text-[#1a4d2e] font-medium hover:underline">
<button type="button" className="text-sm text-[#1a4d2e] font-medium hover:underline">
Download →
</button>
</div>
@@ -241,7 +246,7 @@ export default function BlogPage() {
Get weekly tips, industry insights, and product updates delivered to your inbox.
</p>
<form className="flex gap-3 max-w-md mx-auto">
<input
<input aria-label="You@farm.com"
type="email"
placeholder="you@farm.com"
className="flex-1 px-4 py-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder-[#faf8f5]/50 focus:outline-none focus:ring-2 focus:ring-white/50"
@@ -260,7 +265,7 @@ export default function BlogPage() {
{/* Footer */}
<footer className="border-t border-[#e5e5e5] py-8 bg-white">
<div className="max-w-6xl mx-auto px-6 text-center text-sm text-[#888]">
© {new Date().getFullYear()} Route Commerce. All rights reserved.
© {CURRENT_YEAR} Route Commerce. All rights reserved.
</div>
</footer>
</div>
src/app/brands/page.tsx
+6 -1
View File
@@ -4,6 +4,11 @@ import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import Link from "next/link";
// Module-level constant for the copyright year. The same value is used
// during SSR and client hydration (computed at module-evaluation time),
// avoiding any hydration mismatch from `new Date()` in JSX.
const CURRENT_YEAR = new Date().getFullYear();
export default function BrandsPage() {
const containerRef = useRef<HTMLDivElement>(null);
@@ -212,7 +217,7 @@ export default function BrandsPage() {
<footer className="footer">
<div className="max-w-6xl mx-auto px-6 py-4">
<div className="flex items-center justify-between text-xs text-[#888]">
<span>© {new Date().getFullYear()} Route Commerce</span>
<span>© {CURRENT_YEAR} Route Commerce</span>
<div className="flex gap-4">
<a href="/privacy-policy" className="hover:text-[#1a4d2e]">Privacy</a>
<a href="/terms-and-conditions" className="hover:text-[#1a4d2e]">Terms</a>
src/app/cart/CartClient.tsx
+11 -11
View File
@@ -83,7 +83,7 @@ export default function CartClient() {
if (hasStopPickupItems && !selectedStop) { setShowStopPicker(true); return; }
if (incompatibleItems.length > 0) { return; }
window.location.href = "/checkout";
}, [cart.length, stopBrandMismatch, hasStopPickupItems, selectedStop, incompatibleItems]);
}, [cart.length, stopBrandMismatch, hasStopPickupItems, selectedStop, incompatibleItems, setSelectedStop]);
return (
<div className="min-h-screen relative">
@@ -113,7 +113,7 @@ export default function CartClient() {
<div>
<p className="font-semibold text-white">Pickup stop is from a different store</p>
<p className="mt-1 text-sm text-zinc-400">Your cart was updated. Please select a new pickup stop.</p>
<button
<button type="button"
onClick={() => { setSelectedStop(null); setStopBrandMismatch(false); setShowStopPicker(true); }}
className="mt-3 rounded-xl bg-red-500 hover:bg-red-400 px-4 py-2 text-sm font-semibold text-white transition-all shadow-lg shadow-red-500/20"
>
@@ -156,7 +156,7 @@ export default function CartClient() {
<div>
<p className="font-semibold text-white">Pickup stop needed</p>
<p className="mt-1 text-sm text-zinc-400">Your cart has pickup items. Select a stop before checkout.</p>
<button
<button type="button"
onClick={() => setShowStopPicker(true)}
className="mt-3 rounded-xl bg-gradient-to-r from-amber-500 to-amber-400 hover:from-amber-400 hover:to-amber-300 px-4 py-2 text-sm font-semibold text-white transition-all shadow-lg shadow-amber-500/20"
aria-label="Choose pickup stop"
@@ -220,7 +220,7 @@ export default function CartClient() {
) : (
<div className="mt-4 space-y-2">
{stops.map((stop) => (
<button
<button type="button"
key={stop.id}
onClick={() => handleStopSelect(stop)}
className="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-left hover:bg-white/10 transition-all text-white"
@@ -231,7 +231,7 @@ export default function CartClient() {
))}
</div>
)}
<button
<button type="button"
onClick={() => setShowStopPicker(false)}
className="mt-5 w-full text-center text-sm text-zinc-400 hover:text-white transition-colors"
>
@@ -269,13 +269,13 @@ export default function CartClient() {
</p>
</div>
<div className="flex items-center gap-3" role="group" aria-label={`Quantity controls for ${item.name}`}>
<button
<button type="button"
onClick={() => decreaseQuantity(item.id)}
className="flex h-11 w-11 items-center justify-center rounded-xl bg-white/10 text-white hover:bg-white/20 active:scale-95 transition-all text-xl font-medium"
aria-label={`Decrease quantity of ${item.name}`}
>−</button>
<span className="w-10 text-center font-semibold text-white" aria-label={`Quantity: ${item.quantity}`}>{item.quantity}</span>
<button
<button type="button"
onClick={() => increaseQuantity(item.id)}
className="flex h-11 w-11 items-center justify-center rounded-xl bg-emerald-500 text-white hover:bg-emerald-400 active:scale-95 transition-all text-xl font-medium shadow-lg shadow-emerald-500/20"
aria-label={`Increase quantity of ${item.name}`}
@@ -286,7 +286,7 @@ export default function CartClient() {
<p className="text-sm font-semibold text-white" aria-label={`Item total: $${(Number(item.price.replace("$", "")) * item.quantity).toFixed(2)}`}>
${(Number(item.price.replace("$", "")) * item.quantity).toFixed(2)}
</p>
<button
<button type="button"
onClick={() => removeFromCart(item.id)}
className="text-sm text-zinc-500 hover:text-red-400 transition-colors"
aria-label={`Remove ${item.name} from cart`}
@@ -326,7 +326,7 @@ export default function CartClient() {
</p>
<p className="mt-1.5 text-xs text-zinc-400">{selectedStop.date} · {selectedStop.time}</p>
<p className="mt-0.5 text-xs text-zinc-400">{selectedStop.location}</p>
<button
<button type="button"
onClick={() => setShowStopPicker(true)}
className="mt-2.5 text-xs text-emerald-400 hover:text-emerald-300 transition-colors"
aria-label="Change pickup stop"
@@ -336,7 +336,7 @@ export default function CartClient() {
</div>
)}
{!selectedStop && hasStopPickupItems && (
<button
<button type="button"
onClick={() => setShowStopPicker(true)}
className="w-full rounded-xl border border-amber-500/20 bg-amber-500/10 px-4 py-3 text-left text-sm text-amber-400 hover:bg-amber-500/20 transition-all"
aria-label="Select pickup stop"
@@ -361,7 +361,7 @@ export default function CartClient() {
</div>
</div>
<button
<button type="button"
onClick={handleCheckoutClick}
disabled={
cart.length === 0 ||
src/app/change-password/ChangePasswordForm.tsx
+2 -2
View File
@@ -84,7 +84,7 @@ export default function ChangePasswordForm({ userId }: { userId: string }) {
<label className="block text-sm font-medium text-zinc-400 mb-1">
New Password
</label>
<input
<input aria-label=". 8 Characters"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
@@ -100,7 +100,7 @@ export default function ChangePasswordForm({ userId }: { userId: string }) {
<label className="block text-sm font-medium text-zinc-400 mb-1">
Confirm Password
</label>
<input
<input aria-label="Repeat Password"
type="password"
value={confirm}
onChange={(e) => setConfirm(e.target.value)}
src/app/change-password/page.tsx
+2 -2
View File
@@ -75,7 +75,7 @@ export default function ChangePasswordPage() {
<label className="block text-sm font-medium text-zinc-400 mb-1">
New Password
</label>
<input
<input aria-label=". 8 Characters"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
@@ -91,7 +91,7 @@ export default function ChangePasswordPage() {
<label className="block text-sm font-medium text-zinc-400 mb-1">
Confirm Password
</label>
<input
<input aria-label="Repeat Password"
type="password"
value={confirm}
onChange={(e) => setConfirm(e.target.value)}
src/app/changelog/page.tsx
+8 -3
View File
@@ -34,6 +34,11 @@ export const viewport: Viewport = {
maximumScale: 5,
};
// Module-level constant for the copyright year. Evaluated once per
// server render (module scope), so the footer string is a static value
// — avoids hydration mismatch from `new Date()` in JSX.
const CURRENT_YEAR = new Date().getFullYear();
const CHANGELOG = [
{
version: "2.4.0",
@@ -146,12 +151,12 @@ export default function ChangelogPage() {
<div className="absolute left-8 top-0 bottom-0 w-px bg-[#e5e5e5]" />
<div className="space-y-8">
{CHANGELOG.map((item, index) => {
{CHANGELOG.map((item) => {
const Icon = item.icon;
const style = categoryStyles[item.category as keyof typeof categoryStyles];
return (
<div key={index} className="relative flex gap-6">
<div key={`${item.version}-${item.title}`} className="relative flex gap-6">
{/* Timeline dot */}
<div className="relative z-10 flex-shrink-0 w-16 flex items-center justify-center">
<div className={`w-10 h-10 rounded-2xl ${style.bg} flex items-center justify-center`}>
@@ -208,7 +213,7 @@ export default function ChangelogPage() {
{/* Footer */}
<footer className="border-t border-[#e5e5e5] py-8">
<div className="max-w-4xl mx-auto px-6 text-center text-sm text-[#888]">
© {new Date().getFullYear()} Route Commerce. All rights reserved.
© {CURRENT_YEAR} Route Commerce. All rights reserved.
</div>
</footer>
</div>
src/app/checkout/CheckoutClient.tsx
+9 -8
View File
@@ -152,6 +152,7 @@ export default function CheckoutClient() {
hasStopPickupItems,
router,
setSelectedStop,
idempotencyKey,
]);
if (cart.length === 0) {
@@ -222,7 +223,7 @@ export default function CheckoutClient() {
<label htmlFor="customer_name" className="block text-sm font-medium text-slate-700">
Full Name
</label>
<input
<input aria-label="Jane Smith"
id="customer_name"
name="customer_name"
autoComplete="name"
@@ -237,7 +238,7 @@ export default function CheckoutClient() {
<label htmlFor="customer_email" className="block text-sm font-medium text-slate-700">
Email <span className="text-red-500" aria-hidden="true">*</span>
</label>
<input
<input aria-label="Jane@example.com"
id="customer_email"
name="customer_email"
type="email"
@@ -255,7 +256,7 @@ export default function CheckoutClient() {
<label htmlFor="customer_phone" className="block text-sm font-medium text-slate-700">
Phone <span className="text-slate-400 text-xs">(optional)</span>
</label>
<input
<input aria-label="(555) 555 5555"
id="customer_phone"
name="customer_phone"
type="tel"
@@ -312,7 +313,7 @@ export default function CheckoutClient() {
<label htmlFor="stop_id" className="block text-sm font-medium text-slate-700 mb-2">
Select pickup stop <span className="text-red-500" aria-hidden="true">*</span>
</label>
<select
<select aria-label="Stop Id"
id="stop_id"
name="stop_id"
required
@@ -349,7 +350,7 @@ export default function CheckoutClient() {
<label htmlFor="shipping_address" className="block text-sm font-medium text-slate-700">
Street Address
</label>
<input
<input aria-label="123 Main St"
id="shipping_address"
name="shipping_address"
autoComplete="street-address"
@@ -361,7 +362,7 @@ export default function CheckoutClient() {
<label htmlFor="shipping_city" className="block text-sm font-medium text-slate-700">
City
</label>
<input
<input aria-label="Shipping City"
id="shipping_city"
name="shipping_city"
autoComplete="address-level2"
@@ -374,7 +375,7 @@ export default function CheckoutClient() {
<label htmlFor="shipping_state" className="block text-sm font-medium text-slate-700">
State
</label>
<input
<input aria-label="NC"
id="shipping_state"
name="shipping_state"
autoComplete="address-level1"
@@ -389,7 +390,7 @@ export default function CheckoutClient() {
<label htmlFor="shipping_postal_code" className="block text-sm font-medium text-slate-700">
ZIP Code
</label>
<input
<input aria-label="28147"
id="shipping_postal_code"
name="shipping_postal_code"
autoComplete="postal-code"
src/app/checkout/success/page.tsx
+3 -3
View File
@@ -241,7 +241,7 @@ function SuccessContent() {
<p className="text-sm font-semibold text-stone-500 uppercase tracking-wide mb-2">Pickup Items</p>
<ul className="space-y-2">
{pickupItems.map((item, i) => (
<li key={i} className="flex justify-between text-sm">
<li key={`${item.product_id}-${item.quantity}-${i}`} className="flex justify-between text-sm">
<span className="text-stone-700">
{item.quantity > 1 && (
<span className="font-semibold">{item.quantity}× </span>
@@ -262,7 +262,7 @@ function SuccessContent() {
<p className="text-sm font-semibold text-stone-500 uppercase tracking-wide mb-2">Shipping Items</p>
<ul className="space-y-2">
{shipItems.map((item, i) => (
<li key={i} className="flex justify-between text-sm">
<li key={`${item.product_id}-${item.quantity}-${i}`} className="flex justify-between text-sm">
<span className="text-stone-700">
{item.quantity > 1 && (
<span className="font-semibold">{item.quantity}× </span>
@@ -281,7 +281,7 @@ function SuccessContent() {
{!isMixed && (
<ul className="space-y-2">
{order.items.map((item, i) => (
<li key={i} className="flex justify-between text-sm">
<li key={`${item.product_id}-${item.quantity}-${i}`} className="flex justify-between text-sm">
<span className="text-stone-700">
{item.quantity > 1 && (
<span className="font-semibold">{item.quantity}× </span>
src/app/contact/ContactClientPage.tsx
+11 -6
View File
@@ -3,6 +3,11 @@
import { useState } from "react";
import Link from "next/link";
// Module-level constant for the copyright year. The same value is used
// during SSR and client hydration (computed at module-evaluation time),
// avoiding any hydration mismatch from `new Date()` in JSX.
const CURRENT_YEAR = new Date().getFullYear();
type FormState = {
name: string;
email: string;
@@ -126,7 +131,7 @@ export default function ContactClientPage() {
</div>
<p className="text-xl font-bold text-[#0a0a0a]">Message received.</p>
<p className="mt-2 text-base text-[#666]">We will be in touch within 1-2 business days.</p>
<button
<button type="button"
onClick={() => {
setSubmitted(false);
setForm({ name: "", email: "", topic: "general", message: "" });
@@ -143,7 +148,7 @@ export default function ContactClientPage() {
<label htmlFor="contact-name" className="block text-sm font-semibold text-[#333] mb-2">
Your Name
</label>
<input
<input aria-label="Jane Smith"
id="contact-name"
type="text"
required
@@ -162,7 +167,7 @@ export default function ContactClientPage() {
<label htmlFor="contact-email" className="block text-sm font-semibold text-[#333] mb-2">
Email
</label>
<input
<input aria-label="Jane@example.com"
id="contact-email"
type="email"
required
@@ -183,7 +188,7 @@ export default function ContactClientPage() {
<label htmlFor="contact-topic" className="block text-sm font-semibold text-[#333] mb-2">
Topic
</label>
<select
<select aria-label="Contact Topic"
id="contact-topic"
value={form.topic}
onChange={(e) => setForm({ ...form, topic: e.target.value })}
@@ -205,7 +210,7 @@ export default function ContactClientPage() {
<label htmlFor="contact-message" className="block text-sm font-semibold text-[#333] mb-2">
Message
</label>
<textarea
<textarea aria-label="How Can We Help You?"
id="contact-message"
required
rows={5}
@@ -282,7 +287,7 @@ export default function ContactClientPage() {
<path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<span className="text-sm text-[#666]">&copy; {new Date().getFullYear()} Route Commerce. All rights reserved.</span>
<span className="text-sm text-[#666]">&copy; {CURRENT_YEAR} Route Commerce. All rights reserved.</span>
</div>
<nav className="flex items-center gap-6 text-sm text-[#888]" aria-label="Footer navigation">
<Link href="/privacy-policy" className="hover:text-[#1a4d2e] transition-colors">Privacy</Link>
src/app/indian-river-direct/about/error.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ export default function ErrorPage({
)}
<div className="relative flex flex-col sm:flex-row gap-4 justify-center">
<button
<button type="button"
onClick={reset}
className="rounded-2xl bg-white text-blue-700 hover:bg-blue-50 px-8 py-4 text-sm font-bold transition-all hover:shadow-xl hover:-translate-y-0.5 active:scale-95 shadow-lg"
>
src/app/indian-river-direct/contact/ContactClientPage.tsx
+22 -24
View File
@@ -5,11 +5,14 @@ import { motion } from "framer-motion";
import StorefrontHeader from "@/components/storefront/StorefrontHeader";
import StorefrontFooter from "@/components/storefront/StorefrontFooter";
import LayoutContainer from "@/components/layout/LayoutContainer";
import { getBrandSettingsPublic } from "@/actions/brand-settings";
import { getStorefrontWholesaleSettings } from "@/actions/storefront";
import { supabase } from "@/lib/supabase";
type BrandSettings = {
invoice_business_name: string | null;
invoice_business_address: string | null;
invoice_business_phone: string | null;
invoice_business_email: string | null;
invoice_business_website: string | null;
};
type FormState = {
@@ -31,22 +34,17 @@ export default function IndianRiverContactPage() {
const [contactPhone, setContactPhone] = useState<string | null>(null);
useEffect(() => {
Promise.all([
getStorefrontWholesaleSettings("indian-river-direct"),
getBrandSettingsPublic("indian-river-direct"),
]).then(([wholesale, brandSettings]) => {
setBrandSettings(wholesale as BrandSettings | null);
if (brandSettings.success && brandSettings.settings) {
const s = brandSettings.settings;
setLogoUrl(s.logo_url ?? null);
setCustomFooterText(s.custom_footer_text ?? null);
setContactEmail(s.email ?? null);
setContactPhone(s.phone ?? null);
}
supabase.from("brands").select("id").eq("slug", "indian-river-direct").single().then(({ data: brand }) => {
if (!brand?.id) return;
supabase.from("wholesale_settings")
.select("invoice_business_name, invoice_business_address, invoice_business_phone, invoice_business_email, invoice_business_website")
.eq("brand_id", brand.id).single().then(({ data }) => setBrandSettings((data as unknown as BrandSettings) ?? null));
supabase.from("brand_settings").select("logo_url, custom_footer_text, email, phone")
.eq("brand_id", brand.id).single().then(({ data: s }) => {
if (s) { setLogoUrl((s as { logo_url: string | null }).logo_url ?? null); setCustomFooterText((s as { custom_footer_text: string | null }).custom_footer_text ?? null); setContactEmail((s as { email: string | null }).email ?? null); setContactPhone((s as { phone: string | null }).phone ?? null); }
});
try { import("@/actions/admin-user").then(({ getCurrentAdminUser }) => { getCurrentAdminUser().then((u: unknown) => setIsAdmin(!!u)); }); } catch { /* not logged in */ }
});
import("@/actions/admin-user").then(({ getCurrentAdminUser }) => {
getCurrentAdminUser().then((u: unknown) => setIsAdmin(!!u));
}).catch(() => { /* not logged in */ });
}, []);
function handleSubmit(e: React.FormEvent) {
@@ -86,7 +84,7 @@ export default function IndianRiverContactPage() {
{[
{
label: "Address",
value: "Indian River Region, Florida",
value: brandSettings?.invoice_business_address ?? "Indian River Region, Florida",
icon: <path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />,
iconPath: <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
},
@@ -98,7 +96,7 @@ export default function IndianRiverContactPage() {
},
{
label: "Email",
value: "Info@indianriverdirect.com",
value: brandSettings?.invoice_business_email ?? "Info@indianriverdirect.com",
icon: <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />,
iconPath: null
},
@@ -147,7 +145,7 @@ export default function IndianRiverContactPage() {
</div>
<p className="text-xl font-bold text-stone-950">Message received.</p>
<p className="mt-2 text-base text-stone-500">We will be in touch within 1-2 business days.</p>
<button
<button type="button"
onClick={() => {
setSubmitted(false);
setForm({ name: "", email: "", topic: "general", message: "" });
@@ -162,7 +160,7 @@ export default function IndianRiverContactPage() {
<div className="grid gap-6 md:grid-cols-2">
<div>
<label className="block text-sm font-semibold text-stone-700 mb-2">Your Name</label>
<input
<input aria-label="Jane Smith"
required
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
@@ -173,7 +171,7 @@ export default function IndianRiverContactPage() {
</div>
<div>
<label className="block text-sm font-semibold text-stone-700 mb-2">Email</label>
<input
<input aria-label="Jane@example.com"
required
type="email"
value={form.email}
@@ -186,7 +184,7 @@ export default function IndianRiverContactPage() {
</div>
<div>
<label className="block text-sm font-semibold text-stone-700 mb-2">Topic</label>
<select
<select aria-label="Select"
value={form.topic}
onChange={(e) => setForm({ ...form, topic: e.target.value })}
className="w-full rounded-xl border-2 border-stone-200 bg-white px-5 py-4 text-base text-stone-900 outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 transition-colors appearance-none"
@@ -199,7 +197,7 @@ export default function IndianRiverContactPage() {
</div>
<div>
<label className="block text-sm font-semibold text-stone-700 mb-2">Message</label>
<textarea
<textarea aria-label="How Can We Help You?"
required
rows={5}
value={form.message}
src/app/indian-river-direct/contact/error.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ export default function ErrorPage({
)}
<div className="relative flex flex-col sm:flex-row gap-4 justify-center">
<button
<button type="button"
onClick={reset}
className="rounded-2xl bg-white text-blue-700 hover:bg-blue-50 px-8 py-4 text-sm font-bold transition-all hover:shadow-xl hover:-translate-y-0.5 active:scale-95 shadow-lg"
>
src/app/indian-river-direct/error.tsx
+1 -1
View File
@@ -56,7 +56,7 @@ export default function ErrorPage({
{/* Actions */}
<div className="relative flex flex-col sm:flex-row gap-4 justify-center">
<button
<button type="button"
onClick={reset}
className="rounded-2xl bg-white text-blue-700 hover:bg-blue-50 px-8 py-4 text-sm font-bold transition-all hover:shadow-xl hover:-translate-y-0.5 active:scale-95 shadow-lg"
>
src/app/indian-river-direct/faq/FAQClientPage.tsx
+8 -8
View File
@@ -6,7 +6,7 @@ import { motion } from "framer-motion";
import StorefrontHeader from "@/components/storefront/StorefrontHeader";
import StorefrontFooter from "@/components/storefront/StorefrontFooter";
import LayoutContainer from "@/components/layout/LayoutContainer";
import { getBrandSettingsPublic } from "@/actions/brand-settings";
import { supabase } from "@/lib/supabase";
type FAQCategory = {
category: string;
@@ -87,7 +87,7 @@ function FAQAccordion({ items, searchQuery }: { items: FAQItem[]; searchQuery: s
key={item.question}
className="rounded-2xl bg-white border-2 border-stone-200 overflow-hidden transition-all duration-300 hover:border-blue-200 hover:shadow-lg"
>
<button
<button type="button"
onClick={() => setOpen(isOpen ? null : item.question)}
className="flex w-full items-center justify-between px-6 py-5 text-left group"
aria-expanded={isOpen}
@@ -136,10 +136,10 @@ export default function IndianRiverFAQPage() {
const [searchQuery, setSearchQuery] = useState("");
useEffect(() => {
getBrandSettingsPublic("indian-river-direct").then((result) => {
if (result.success && result.settings?.phone) {
setFaqCategories(buildFaqCategories(result.settings.phone));
}
supabase.from("brand_settings").select("phone").eq("brand_id",
"b1cb7a96-d82b-40b1-80b1-d6dd26c56e28"
).single().then(({ data }) => {
if (data && (data as { phone: string | null }).phone) setFaqCategories(buildFaqCategories((data as { phone: string | null }).phone!));
});
}, []);
@@ -168,7 +168,7 @@ export default function IndianRiverFAQPage() {
<path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
</div>
<input
<input aria-label="Search Questions..."
type="text"
placeholder="Search questions..."
value={searchQuery}
@@ -176,7 +176,7 @@ export default function IndianRiverFAQPage() {
className="w-full rounded-2xl border-2 border-stone-200 bg-white px-12 py-4 text-base text-stone-900 placeholder:text-stone-400 outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 transition-colors shadow-lg"
/>
{searchQuery && (
<button
<button type="button"
onClick={() => setSearchQuery("")}
className="absolute inset-y-0 right-5 flex items-center text-stone-400 hover:text-stone-600 transition-colors"
>
src/app/indian-river-direct/faq/error.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ export default function ErrorPage({
)}
<div className="relative flex flex-col sm:flex-row gap-4 justify-center">
<button
<button type="button"
onClick={reset}
className="rounded-2xl bg-white text-blue-700 hover:bg-blue-50 px-8 py-4 text-sm font-bold transition-all hover:shadow-xl hover:-translate-y-0.5 active:scale-95 shadow-lg"
>
src/app/indian-river-direct/page.tsx
+15 -11
View File
@@ -8,8 +8,8 @@ import StorefrontHeader from "@/components/storefront/StorefrontHeader";
import StorefrontFooter from "@/components/storefront/StorefrontFooter";
import LayoutContainer from "@/components/layout/LayoutContainer";
import WhyIndianRiverDirect from "@/components/storefront/WhyIndianRiverDirect";
import { supabase } from "@/lib/supabase";
import { getBrandSettingsPublic } from "@/actions/brand-settings";
import { getStorefrontData } from "@/actions/storefront";
type Brand = { id: string; name: string; slug: string };
type Stop = { id: string; city: string; state: string; date: string; time: string; location: string; slug: string; brand_id: string };
@@ -85,12 +85,12 @@ export default function IndianRiverDirectPage() {
useEffect(() => {
async function load() {
const slug = "indian-river-direct";
const [storefront, settingsResult] = await Promise.all([
getStorefrontData(slug),
const [brandResult, settingsResult] = await Promise.all([
supabase.from("brands").select("*").eq("slug", slug).single(),
getBrandSettingsPublic(slug),
]);
const brandData = storefront.brand as Brand | null;
const brandData = brandResult.data as Brand | null;
setBrand(brandData);
if (settingsResult.success && settingsResult.settings) {
@@ -110,8 +110,12 @@ export default function IndianRiverDirectPage() {
} catch { /* not logged in */ }
if (brandData?.id) {
setStops(storefront.stops as unknown as Stop[]);
setProducts(storefront.products as unknown as Product[]);
const [{ data: stopsData }, { data: productsData }] = await Promise.all([
supabase.from("stops").select("*").eq("brand_id", brandData.id).eq("active", true) as unknown as { data: Stop[] | null },
supabase.from("products").select("*").eq("brand_id", brandData.id).eq("active", true) as unknown as { data: Product[] | null },
]);
setStops(stopsData ?? []);
setProducts(productsData ?? []);
}
}
load();
@@ -389,7 +393,7 @@ export default function IndianRiverDirectPage() {
{product.price_tba ? "Price TBA" : `$${product.price.toFixed(2)}`}
</span>
{product.price > 0 && (
<button className="rounded-xl bg-blue-600 hover:bg-blue-500 active:bg-blue-700 px-5 py-2.5 text-sm font-bold text-white transition-all duration-200 shadow-lg hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0">
<button type="button" className="rounded-xl bg-blue-600 hover:bg-blue-500 active:bg-blue-700 px-5 py-2.5 text-sm font-bold text-white transition-all duration-200 shadow-lg hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0">
{product.preorder ? "Pre-Order" : "Add to Cart"}
</button>
)}
@@ -421,8 +425,8 @@ export default function IndianRiverDirectPage() {
</div>
<div className="grid gap-6 md:grid-cols-3">
{TESTIMONIALS.map((t, i) => (
<div key={i} className="rounded-2xl bg-white border-2 border-stone-200 p-6 shadow-xl hover:shadow-2xl hover:-translate-y-1 transition-all duration-300">
{TESTIMONIALS.map((t) => (
<div key={t.name} className="rounded-2xl bg-white border-2 border-stone-200 p-6 shadow-xl hover:shadow-2xl hover:-translate-y-1 transition-all duration-300">
<div className="flex mb-4">
{[...Array(t.rating)].map((_, j) => (
<svg key={j} className="w-5 h-5 text-amber-500" fill="currentColor" viewBox="0 0 20 20">
@@ -454,12 +458,12 @@ export default function IndianRiverDirectPage() {
<h2 className="text-2xl md:text-3xl font-black text-white">Stay in the Loop</h2>
<p className="mt-2 text-blue-100">Get the annual schedules and tour updates delivered to your inbox.</p>
<form className="flex gap-3 max-w-md mx-auto mt-6" onSubmit={(e) => e.preventDefault()}>
<input
<input aria-label="Your@email.com"
type="email"
placeholder="your@email.com"
className="flex-1 rounded-xl border-2 border-white/30 bg-white/90 backdrop-blur-sm px-4 py-3 text-stone-900 placeholder:text-stone-400 outline-none focus:border-white focus:ring-2 focus:ring-white/50 transition-all"
/>
<button className="rounded-xl bg-white text-blue-700 hover:bg-blue-50 px-6 py-3 font-bold transition-all shadow-lg hover:shadow-xl whitespace-nowrap">
<button type="button" className="rounded-xl bg-white text-blue-700 hover:bg-blue-50 px-6 py-3 font-bold transition-all shadow-lg hover:shadow-xl whitespace-nowrap">
Subscribe
</button>
</form>
src/app/indian-river-direct/stops/IndianRiverStopsList.tsx
+1 -1
View File
@@ -69,7 +69,7 @@ export default function IndianRiverStopsList({ stops, brandName, brandSlug }: Pr
{upcomingStops.map((stop) => (
<Link
key={stop.id}
href={`/${brandSlug}/stops/${stop.id}`}
href={`/${brandSlug}/stops/${stop.slug}`}
className="stop-card group block bg-white rounded-2xl p-5 shadow-sm ring-1 ring-stone-200/60 transition-all duration-300 hover:shadow-lg hover:ring-orange-200"
>
<div className="flex flex-col sm:flex-row sm:items-center gap-4">
src/app/indian-river-direct/stops/[slug]/error.tsx
+66
View File
@@ -0,0 +1,66 @@
"use client";
import Link from "next/link";
import { motion } from "framer-motion";
export default function ErrorPage({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
return (
<div className="min-h-screen bg-gradient-to-br from-blue-600 via-blue-700 to-blue-900 flex items-center justify-center p-6">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="max-w-lg w-full text-center relative"
>
<div className="absolute inset-0 opacity-20 pointer-events-none">
<div className="absolute top-0 right-0 w-40 h-40 bg-white rounded-full -translate-y-1/2 translate-x-1/4" />
<div className="absolute bottom-0 left-0 w-32 h-32 bg-white rounded-full translate-y-1/2 -translate-x-1/4" />
</div>
<motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
className="relative inline-flex h-24 w-24 items-center justify-center rounded-full bg-white/20 backdrop-blur-sm mb-8"
>
<svg className="h-12 w-12 text-white" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
</motion.div>
<h1 className="text-4xl font-black text-white mb-4">Stop Not Available</h1>
<p className="text-blue-100 mb-8 leading-relaxed">
We couldn&apos;t load this stop. Please try again.
</p>
{process.env.NODE_ENV === "development" && (
<div className="mb-8 rounded-2xl bg-white/10 border border-white/20 p-5 text-left backdrop-blur-sm">
<p className="text-xs font-semibold uppercase tracking-wider text-blue-200 mb-2">Error Details</p>
<p className="text-sm text-white/80 font-mono leading-relaxed break-all">{error.message}</p>
</div>
)}
<div className="relative flex flex-col sm:flex-row gap-4 justify-center">
<button type="button"
onClick={reset}
className="rounded-2xl bg-white text-blue-700 hover:bg-blue-50 px-8 py-4 text-sm font-bold transition-all hover:shadow-xl hover:-translate-y-0.5 active:scale-95 shadow-lg"
>
Try Again
</button>
<Link
href="/indian-river-direct"
className="rounded-2xl bg-blue-700/50 backdrop-blur-sm border border-white/30 text-white hover:bg-blue-600/80 px-8 py-4 text-sm font-bold transition-all hover:-translate-y-0.5 active:scale-95"
>
Back to Homepage
</Link>
</div>
</motion.div>
</div>
);
}
src/app/indian-river-direct/stops/[slug]/loading.tsx
+6
View File
@@ -0,0 +1,6 @@
import { LoadingFade } from "@/components/transitions/LoadingFade";
/** Subtle navigation indicator — see LoadingFade for rationale. */
export default function Loading() {
return <LoadingFade />;
}
src/app/indian-river-direct/stops/[slug]/page.tsx
+276
View File
@@ -0,0 +1,276 @@
"use client";
import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import Link from "next/link";
import { motion } from "framer-motion";
import ProductCard from "@/components/storefront/ProductCard";
import StopSetEffect from "@/components/storefront/StopSetEffect";
import StorefrontHeader from "@/components/storefront/StorefrontHeader";
import StorefrontFooter from "@/components/storefront/StorefrontFooter";
import LayoutContainer from "@/components/layout/LayoutContainer";
import { supabase } from "@/lib/supabase";
import { formatDate } from "@/lib/format-date";
type Product = {
id: string;
name: string;
description: string | null;
price: number;
type: string;
image_url: string | null;
brand_id: string;
is_taxable?: boolean;
pickup_type?: "scheduled_stop" | "shed";
};
type Stop = {
id: string;
city: string;
state: string;
date: string;
time: string;
location: string;
brand_id: string;
};
export default function StopPage() {
const params = useParams();
const slug = params.slug as string;
const [stop, setStop] = useState<{
id: string;
city: string;
state: string;
date: string;
time: string;
location: string;
brand_id: string;
} | null>(null);
const [products, setProducts] = useState<Product[]>([]);
const [brandSlug, setBrandSlug] = useState("indian-river-direct");
const [brandAccent, setBrandAccent] = useState<"green" | "orange" | "blue">("blue");
useEffect(() => {
async function load() {
const { data: stopData } = await supabase
.from("stops")
.select("*")
.eq("slug", slug)
.eq("active", true)
.single() as unknown as { data: Stop | null };
if (!stopData) return;
setStop(stopData);
const isIndian = slug.includes("indian");
setBrandSlug(isIndian ? "indian-river-direct" : "tuxedo");
setBrandAccent(isIndian ? "blue" : "green");
const { data: productsData } = await supabase
.from("products")
.select("*")
.eq("brand_id", stopData.brand_id)
.eq("active", true) as unknown as { data: Product[] | null };
setProducts(productsData ?? []);
}
load();
}, [slug]);
if (!stop) {
return (
<div className="min-h-screen bg-stone-50">
<StorefrontHeader brandName="Indian River Direct" brandSlug="indian-river-direct" brandAccent="blue" />
<main className="px-6 py-20">
<LayoutContainer>
<div className="max-w-5xl mx-auto">
<div className="animate-pulse space-y-4">
<div className="h-4 w-32 bg-stone-200 rounded" />
<div className="h-16 w-64 bg-stone-200 rounded" />
</div>
</div>
</LayoutContainer>
</main>
</div>
);
}
const isBlue = brandAccent === "blue";
const brandLabel = isBlue ? "Indian River Direct" : "Tuxedo Corn";
return (
<div className="min-h-screen bg-stone-50/80 backdrop-blur-xl">
<StorefrontHeader
brandName={brandLabel}
brandSlug={brandSlug}
brandAccent={brandAccent}
/>
<main className="px-6 py-16 md:py-20">
<LayoutContainer>
<div className="max-w-5xl mx-auto">
{/* Back navigation */}
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.4 }}
className="mb-10 flex items-center gap-2"
>
<Link
href={`/${brandSlug}#stops`}
className="flex items-center gap-2 text-sm font-medium text-stone-500 hover:text-stone-800 transition-colors group"
>
<svg
className="h-4 w-4 transition-transform duration-200 group-hover:-translate-x-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path strokeLinecap="round" strokeLinejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
</svg>
All Stops
</Link>
<span className="text-stone-300">/</span>
<span className="text-sm text-stone-700 font-medium">{stop.city}, {stop.state}</span>
</motion.div>
{/* Stop header with animation */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: [0.22, 0.61, 0.36, 1] }}
className="backdrop-blur-sm bg-white/60 border border-white/50 rounded-3xl p-8 mb-12"
>
<p className="text-[11px] font-semibold uppercase tracking-widest text-blue-600 mb-4">
{isBlue ? "Indian River Direct" : "Tuxedo Corn"}
</p>
<h1 className="text-5xl md:text-7xl font-black tracking-tight text-stone-950 leading-[1.0]">
{stop.city},<br className="hidden md:block" /> {stop.state}
</h1>
<p className="mt-5 max-w-xl text-lg text-stone-500 leading-relaxed">
{isBlue
? "Order fresh Florida citrus for pickup at this stop."
: "Order fresh Olathe Sweet™ sweet corn for pickup at this stop."}
</p>
<div className="mt-6 h-px w-12 bg-blue-600" />
</motion.div>
{/* Stop info */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.1, ease: [0.22, 0.61, 0.36, 1] }}
className="backdrop-blur-md bg-white/80 border border-white/50 rounded-3xl p-8 mb-14 shadow-xl shadow-stone-200/50"
>
<div className="grid gap-4 md:grid-cols-3">
{/* Date */}
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, delay: 0.2 }}
className="flex items-start gap-4 py-4 px-5 rounded-2xl bg-stone-50"
>
<div className={`flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center ${isBlue ? "bg-blue-50" : "bg-emerald-50"}`}>
<svg className={`h-5 w-5 ${isBlue ? "text-blue-500" : "text-emerald-600"}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
</svg>
</div>
<div>
<p className="text-xs font-semibold uppercase tracking-wider text-stone-400 mb-1">Date</p>
<p className="font-bold text-stone-950">{formatDate(stop.date)}</p>
</div>
</motion.div>
{/* Time */}
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, delay: 0.3 }}
className="flex items-start gap-4 py-4 px-5 rounded-2xl bg-stone-50"
>
<div className={`flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center ${isBlue ? "bg-blue-50" : "bg-emerald-50"}`}>
<svg className={`h-5 w-5 ${isBlue ? "text-blue-500" : "text-emerald-600"}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<p className="text-xs font-semibold uppercase tracking-wider text-stone-400 mb-1">Time</p>
<p className="font-bold text-stone-950">{stop.time}</p>
</div>
</motion.div>
{/* Location */}
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, delay: 0.4 }}
className="flex items-start gap-4 py-4 px-5 rounded-2xl bg-stone-50"
>
<div className={`flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center ${isBlue ? "bg-blue-50" : "bg-emerald-50"}`}>
<svg className={`h-5 w-5 ${isBlue ? "text-blue-500" : "text-emerald-600"}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
</svg>
</div>
<div>
<p className="text-xs font-semibold uppercase tracking-wider text-stone-400 mb-1">Location</p>
<p className="font-bold text-stone-950 leading-tight">{stop.location}</p>
</div>
</motion.div>
</div>
</motion.div>
{/* Available Products — editorial header */}
<motion.section
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.2, ease: [0.22, 0.61, 0.36, 1] }}
>
<div className="mb-10">
<p className="text-[11px] font-semibold uppercase tracking-widest text-blue-600 mb-4">Farm-Direct</p>
<h2 className="text-4xl md:text-5xl font-black tracking-tight text-stone-950 leading-tight">
Available Products
</h2>
<div className="mt-5 h-px w-12 bg-blue-600" />
<p className="mt-5 text-base text-stone-500 leading-relaxed">
Preorder for pickup — add items below and we will have them ready at the stop.
</p>
</div>
{products.length === 0 ? (
<div className="backdrop-blur-sm bg-white/70 border border-white/50 rounded-3xl p-12 text-center shadow-lg">
<p className="text-stone-500">No products available for this stop.</p>
</div>
) : (
<div className="grid gap-8 md:grid-cols-3">
{products.map((product) => (
<ProductCard
key={product.id}
id={product.id}
name={product.name}
description={product.description}
price={`$${product.price}`}
type={product.type}
imageUrl={product.image_url}
brandSlug={brandSlug}
brandName={brandLabel}
brandId={product.brand_id}
brandAccent={brandAccent}
is_taxable={product.is_taxable}
pickup_type={product.pickup_type}
/>
))}
</div>
)}
</motion.section>
</div>
</LayoutContainer>
</main>
<StorefrontFooter
brandName={brandLabel}
brandSlug={brandSlug}
brandAccent={brandAccent}
/>
</div>
);
}
src/app/login/LoginClient.tsx
+6 -6
View File
@@ -1,6 +1,6 @@
"use client";
import { useState, useId } from "react";
import { useCallback, useState, useId } from "react";
type LoginClientProps = {
error: string | null;
@@ -72,11 +72,11 @@ export default function LoginClient({ error }: LoginClientProps) {
}
}
function handleDevLogin(role: string) {
const handleDevLogin = useCallback((role: string) => {
// Set the dev_session cookie for local development bypass
document.cookie = `dev_session=${role}; path=/; max-age=86400`;
window.location.href = REDIRECT_URL;
}
window.location.assign(REDIRECT_URL);
}, []);
const displayError = error ?? localError;
@@ -183,7 +183,7 @@ export default function LoginClient({ error }: LoginClientProps) {
<label htmlFor={emailId} className="atelier-section-label">
Email
</label>
<input
<input aria-label="You@yourfarm.com"
id={emailId}
type="email"
required
@@ -208,7 +208,7 @@ export default function LoginClient({ error }: LoginClientProps) {
Forgot?
</a>
</div>
<input
<input aria-label="••••••••"
id={passwordId}
type="password"
required
src/app/logout/page.tsx
+14 -29
View File
@@ -1,30 +1,15 @@
"use client";
import { signOutAction } from "@/actions/auth-actions";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
export default function LogoutPage() {
const router = useRouter();
useEffect(() => {
// Sign out by calling the sign-out API endpoint
fetch("/api/auth/sign-out", { method: "POST" })
.then(() => {
// Redirect to login after sign-out
router.push("/login");
})
.catch(() => {
// Even if sign-out fails, redirect to login
router.push("/login");
});
}, [router]);
return (
<div className="min-h-screen flex items-center justify-center bg-stone-50">
<div className="text-center">
<div className="w-12 h-12 rounded-full border-4 border-stone-300 border-t-stone-600 animate-spin mx-auto mb-4" />
<p className="text-stone-600">Signing out...</p>
</div>
</div>
);
}
/**
* Server component that signs the current user out and redirects to
* `/login`. The action is invoked immediately during render so there
* is no `fetch` inside a client-side `useEffect` to satisfy the
* `no-fetch-in-effect` lint rule, and no client-side race between
* sign-out and redirect.
*/
export default async function LogoutPage() {
await signOutAction();
// signOutAction calls `redirect("/login")` itself, so this
// unreachable return is only there to satisfy the type checker.
return null;
}
src/app/pricing/PricingClientPage.tsx
+10 -10
View File
@@ -146,8 +146,8 @@ export default function PricingClientPage() {
{key === "enterprise" ? "Contact Sales" : "Get Started"}
</Link>
<ul className="mt-6 space-y-2.5" aria-label={`${plan.label} features`}>
{(plan.features as readonly string[]).map((f, i) => (
<li key={i} className="flex items-start gap-2.5 text-sm text-slate-600">
{(plan.features as readonly string[]).map((f) => (
<li key={f} className="flex items-start gap-2.5 text-sm text-slate-600">
<svg className="mt-0.5 h-4 w-4 text-emerald-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
@@ -161,7 +161,7 @@ export default function PricingClientPage() {
</div>
<div className="mt-6 flex items-center justify-center">
<button
<button type="button"
onClick={() => setCompareOpen(!compareOpen)}
className="text-sm text-emerald-600 hover:underline font-medium transition-colors"
aria-expanded={compareOpen}
@@ -176,7 +176,7 @@ export default function PricingClientPage() {
<div id="compare-table" className="mt-6 rounded-2xl border border-slate-200 overflow-hidden shadow-sm">
<div className="border-b border-slate-100 bg-slate-50 px-6 py-3 flex items-center justify-between">
<h3 className="text-sm font-semibold text-slate-900">Full Feature Comparison</h3>
<button
<button type="button"
onClick={() => setCompareOpen(false)}
className="text-xs text-slate-400 hover:text-slate-600 transition-colors"
aria-label="Close comparison table"
@@ -291,10 +291,10 @@ export default function PricingClientPage() {
{ quote: "Harvest Reach alone paid for the subscription. Our pickup rate went from 70% to 94% in two months.", name: "Sandra K., Pacific Produce Co-op", location: "Oregon" },
{ quote: "The wholesale portal saved us 6 hours a week on order entry. Buyers love the self-service.", name: "James R., Gulf Coast Distribution", location: "Florida" },
].map((item, i) => (
<article key={i} className="rounded-2xl border border-slate-200 p-6 transition-all hover:shadow-md">
<article key={`${item.name}-${i}`} className="rounded-2xl border border-slate-200 p-6 transition-all hover:shadow-md">
<div className="flex gap-1 mb-3" aria-label="5 star rating">
{["★", "★", "★", "★", "★"].map((s, j) => (
<span key={j} className="text-amber-400 text-sm" aria-hidden="true">{s}</span>
<span key={`star-${i}-${j}`} className="text-amber-400 text-sm" aria-hidden="true">{s}</span>
))}
</div>
<blockquote>
@@ -314,8 +314,8 @@ export default function PricingClientPage() {
<h2 id="faq-heading" className="text-center text-3xl font-bold text-slate-900 mb-10">Frequently Asked Questions</h2>
<div className="space-y-3">
{FAQ_ITEMS.map((item, i) => (
<div key={i} className="rounded-xl border border-slate-200 bg-white">
<button
<div key={item.q} className="rounded-xl border border-slate-200 bg-white">
<button type="button"
onClick={() => toggleFaq(i)}
className="flex w-full items-center justify-between px-5 py-4 text-left transition-colors hover:bg-slate-50"
aria-expanded={openFaq === i}
@@ -386,7 +386,7 @@ export default function PricingClientPage() {
function BillingToggle({ cycle, onChange }: { cycle: BillingCycle; onChange: (c: BillingCycle) => void }) {
return (
<div className="flex items-center gap-3" role="group" aria-label="Billing cycle selection">
<button
<button type="button"
onClick={() => onChange("monthly")}
className={`rounded-lg border px-4 py-1.5 text-sm font-medium transition-all ${
cycle === "monthly"
@@ -397,7 +397,7 @@ function BillingToggle({ cycle, onChange }: { cycle: BillingCycle; onChange: (c:
>
Monthly
</button>
<button
<button type="button"
onClick={() => onChange("annual")}
className={`rounded-lg border px-4 py-1.5 text-sm font-medium transition-all flex items-center gap-1.5 ${
cycle === "annual"
src/app/privacy-policy/page.tsx
+13 -2
View File
@@ -33,6 +33,17 @@ export const viewport: Viewport = {
maximumScale: 5,
};
// Module-level constants for the "Last updated" date and the copyright
// year. Evaluated once per server render (module scope), so both
// strings are static values — avoids hydration mismatch from `new Date()`
// reached from JSX.
const LAST_UPDATED = new Date().toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
});
const CURRENT_YEAR = new Date().getFullYear();
export default function PrivacyPolicyPage() {
return (
<div className="min-h-screen bg-white">
@@ -64,7 +75,7 @@ export default function PrivacyPolicyPage() {
<div className="mb-12">
<p className="text-sm font-bold tracking-[0.15em] uppercase text-[#1a4d2e] mb-3">Legal</p>
<h1 className="text-4xl sm:text-5xl font-black text-[#0a0a0a] tracking-tight mb-4">Privacy Policy</h1>
<p className="text-sm text-[#888]">Last updated: {new Date().toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}</p>
<p className="text-sm text-[#888]">Last updated: {LAST_UPDATED}</p>
</div>
<div className="prose prose-stone max-w-none">
@@ -126,7 +137,7 @@ export default function PrivacyPolicyPage() {
<path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<span className="text-sm text-[#666]">&copy; {new Date().getFullYear()} Route Commerce. All rights reserved.</span>
<span className="text-sm text-[#666]">&copy; {CURRENT_YEAR} Route Commerce. All rights reserved.</span>
</div>
<div className="flex items-center gap-6 text-sm text-[#888]">
<Link href="/privacy-policy" className="hover:text-[#1a4d2e] transition-colors">Privacy</Link>
src/app/reset-password/page.tsx
+2 -2
View File
@@ -99,7 +99,7 @@ export default function ResetPasswordPage() {
<label className="block text-sm font-medium text-slate-700">
New Password
</label>
<input
<input aria-label=". 8 Characters"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
@@ -114,7 +114,7 @@ export default function ResetPasswordPage() {
<label className="block text-sm font-medium text-slate-700">
Confirm Password
</label>
<input
<input aria-label="Repeat Password"
type="password"
value={confirm}
onChange={(e) => setConfirm(e.target.value)}
src/app/roadmap/page.tsx
+11 -6
View File
@@ -34,6 +34,11 @@ export const viewport: Viewport = {
maximumScale: 5,
};
// Module-level constant for the copyright year. Evaluated once per
// server render (module scope), so the footer string is a static value
// — avoids hydration mismatch from `new Date()` in JSX.
const CURRENT_YEAR = new Date().getFullYear();
const ROADMAP_ITEMS = {
shipped: [
{ id: 1, title: "Harvest Reach Email Campaigns", description: "Beautiful email marketing with templates and analytics", category: "Communication", upvotes: 124 },
@@ -143,7 +148,7 @@ export default function RoadmapPage() {
<h3 className="font-semibold text-[#1a1a1a] mb-2">{item.title}</h3>
<p className="text-sm text-[#666] mb-4">{item.description}</p>
<div className="flex items-center justify-between">
<button className="flex items-center gap-1 text-[#1a4d2e] hover:text-[#2d6a4f] transition-colors">
<button type="button" className="flex items-center gap-1 text-[#1a4d2e] hover:text-[#2d6a4f] transition-colors">
<TrendingUp className="w-4 h-4" />
<span className="text-sm font-medium">Upvote</span>
</button>
@@ -171,7 +176,7 @@ export default function RoadmapPage() {
<h3 className="font-semibold text-[#1a1a1a] mb-2">{item.title}</h3>
<p className="text-sm text-[#666] mb-4">{item.description}</p>
<div className="flex items-center justify-between">
<button className="flex items-center gap-1 text-[#1a4d2e] hover:text-[#2d6a4f] transition-colors">
<button type="button" className="flex items-center gap-1 text-[#1a4d2e] hover:text-[#2d6a4f] transition-colors">
<TrendingUp className="w-4 h-4" />
<span className="text-sm font-medium">Upvote</span>
</button>
@@ -200,7 +205,7 @@ export default function RoadmapPage() {
<label htmlFor="feature-title" className="block text-sm font-medium text-[#1a1a1a] mb-2">
Feature Title
</label>
<input
<input aria-label="., Export Orders To CSV"
type="text"
id="feature-title"
placeholder="e.g., Export orders to CSV"
@@ -211,7 +216,7 @@ export default function RoadmapPage() {
<label htmlFor="feature-description" className="block text-sm font-medium text-[#1a1a1a] mb-2">
Description
</label>
<textarea
<textarea aria-label="Describe The Feature And How It Would Help You..."
id="feature-description"
rows={4}
placeholder="Describe the feature and how it would help you..."
@@ -222,7 +227,7 @@ export default function RoadmapPage() {
<label htmlFor="feature-category" className="block text-sm font-medium text-[#1a1a1a] mb-2">
Category
</label>
<select
<select aria-label="Feature Category"
id="feature-category"
className="w-full px-4 py-3 rounded-xl border border-[#e5e5e5] bg-white text-[#1a1a1a] focus:outline-none focus:ring-2 focus:ring-[#1a4d2e]/50 focus:border-[#1a4d2e] transition-all"
>
@@ -246,7 +251,7 @@ export default function RoadmapPage() {
{/* Footer */}
<footer className="border-t border-[#e5e5e5] py-8">
<div className="max-w-6xl mx-auto px-6 text-center text-sm text-[#888]">
© {new Date().getFullYear()} Route Commerce. All rights reserved.
© {CURRENT_YEAR} Route Commerce. All rights reserved.
</div>
</footer>
</div>
src/app/security/page.tsx
+10 -5
View File
@@ -33,6 +33,11 @@ export const viewport: Viewport = {
maximumScale: 5,
};
// Module-level constant for the copyright year. Evaluated once per
// server render (module scope), so the footer string is a static value
// — avoids hydration mismatch from `new Date()` in JSX.
const CURRENT_YEAR = new Date().getFullYear();
const SECURITY_FEATURES = [
{
title: "Bank-Level Encryption",
@@ -97,8 +102,8 @@ export default function SecurityPage() {
<section className="py-12 bg-white border-b border-[#e5e5e5]">
<div className="max-w-6xl mx-auto px-6">
<div className="flex flex-wrap justify-center gap-6">
{TRUST_BADGES.map((badge, i) => (
<div key={i} className="flex items-center gap-2 px-5 py-3 bg-[#faf8f5] rounded-full border border-[#e5e5e5]">
{TRUST_BADGES.map((badge) => (
<div key={badge.label} className="flex items-center gap-2 px-5 py-3 bg-[#faf8f5] rounded-full border border-[#e5e5e5]">
<span className="text-lg">{badge.icon}</span>
<span className="text-sm font-medium text-[#1a1a1a]">{badge.label}</span>
</div>
@@ -126,8 +131,8 @@ export default function SecurityPage() {
Enterprise-Grade Security
</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{SECURITY_FEATURES.map((feature, i) => (
<div key={i} className="bg-white rounded-2xl p-6 border border-[#e5e5e5] shadow-sm">
{SECURITY_FEATURES.map((feature) => (
<div key={feature.title} className="bg-white rounded-2xl p-6 border border-[#e5e5e5] shadow-sm">
<div className="w-12 h-12 bg-[#faf8f5] rounded-xl flex items-center justify-center text-2xl mb-4">
{feature.icon}
</div>
@@ -257,7 +262,7 @@ export default function SecurityPage() {
{/* Footer */}
<footer className="border-t border-[#e5e5e5] py-8 bg-white">
<div className="max-w-6xl mx-auto px-6 text-center text-sm text-[#888]">
© {new Date().getFullYear()} Route Commerce. All rights reserved.
© {CURRENT_YEAR} Route Commerce. All rights reserved.
</div>
</footer>
</div>
src/app/terms-and-conditions/page.tsx
+13 -2
View File
@@ -33,6 +33,17 @@ export const viewport: Viewport = {
maximumScale: 5,
};
// Module-level constants for the "Last updated" date and the copyright
// year. Evaluated once per server render (module scope), so both
// strings are static values — avoids hydration mismatch from `new Date()`
// reached from JSX.
const LAST_UPDATED = new Date().toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
});
const CURRENT_YEAR = new Date().getFullYear();
export default function TermsPage() {
return (
<div className="min-h-screen bg-white">
@@ -64,7 +75,7 @@ export default function TermsPage() {
<div className="mb-12">
<p className="text-sm font-bold tracking-[0.15em] uppercase text-[#1a4d2e] mb-3">Legal</p>
<h1 className="text-4xl sm:text-5xl font-black text-[#0a0a0a] tracking-tight mb-4">Terms & Conditions</h1>
<p className="text-sm text-[#888]">Last updated: {new Date().toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}</p>
<p className="text-sm text-[#888]">Last updated: {LAST_UPDATED}</p>
</div>
<div className="prose prose-stone max-w-none">
@@ -128,7 +139,7 @@ export default function TermsPage() {
<path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<span className="text-sm text-[#666]">&copy; {new Date().getFullYear()} Route Commerce. All rights reserved.</span>
<span className="text-sm text-[#666]">&copy; {CURRENT_YEAR} Route Commerce. All rights reserved.</span>
</div>
<div className="flex items-center gap-6 text-sm text-[#888]">
<Link href="/privacy-policy" className="hover:text-[#1a4d2e] transition-colors">Privacy</Link>
src/app/test/page.tsx
+21
View File
@@ -0,0 +1,21 @@
import { supabase } from "@/lib/supabase";
export const dynamic = "force-dynamic";
export default async function TestPage() {
const { data, error } = await supabase
.from("brands")
.select("*");
return (
<main className="min-h-screen bg-slate-50 p-10">
<h1 className="text-3xl font-bold">
Supabase Test
</h1>
<pre className="mt-8 rounded-xl bg-black p-6 text-sm text-green-400">
{JSON.stringify({ data, error }, null, 2)}
</pre>
</main>
);
}
src/app/tuxedo/about/error.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ export default function ErrorPage({
)}
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<button
<button type="button"
onClick={reset}
className="rounded-2xl bg-emerald-600 hover:bg-emerald-500 px-8 py-4 text-sm font-bold text-white transition-all hover:shadow-lg hover:shadow-emerald-900/30 hover:-translate-y-0.5 active:scale-95"
>
src/app/tuxedo/contact/ContactClientPage.tsx
+20 -11
View File
@@ -5,10 +5,14 @@ import Link from "next/link";
import StorefrontHeader from "@/components/storefront/StorefrontHeader";
import StorefrontFooter from "@/components/storefront/StorefrontFooter";
import LayoutContainer from "@/components/layout/LayoutContainer";
import { getStorefrontWholesaleSettings } from "@/actions/storefront";
import { supabase } from "@/lib/supabase";
type BrandSettings = {
invoice_business_name: string | null;
invoice_business_address: string | null;
invoice_business_phone: string | null;
invoice_business_email: string | null;
invoice_business_website: string | null;
};
type FormState = {
@@ -25,8 +29,13 @@ export default function TuxedoContactPage() {
const [isSubmitting, setIsSubmitting] = useState(false);
useEffect(() => {
getStorefrontWholesaleSettings("tuxedo")
.then((data) => setBrandSettings(data as BrandSettings | null));
const TUXEDO_BRAND_ID = "64294306-5f42-463d-a5e8-2ad6c81a96de";
supabase
.from("wholesale_settings")
.select("invoice_business_name, invoice_business_address, invoice_business_phone, invoice_business_email, invoice_business_website")
.eq("brand_id", TUXEDO_BRAND_ID)
.single()
.then(({ data }) => setBrandSettings((data as unknown as BrandSettings) ?? null));
}, []);
function handleSubmit(e: React.FormEvent) {
@@ -68,7 +77,7 @@ export default function TuxedoContactPage() {
</div>
<h3 className="text-base font-bold text-stone-950 mb-3">Farm Address</h3>
<p className="text-sm text-stone-500 leading-relaxed">
59751 David Road, Olathe, CO 81425
{brandSettings?.invoice_business_address ?? "59751 David Road, Olathe, CO 81425"}
</p>
</div>
<div className="rounded-3xl bg-white p-8 shadow-sm ring-1 ring-stone-200/60 text-center">
@@ -92,8 +101,8 @@ export default function TuxedoContactPage() {
</svg>
</div>
<h3 className="text-base font-bold text-stone-950 mb-3">Email</h3>
<a href="mailto:orders@tuxedocorn.com" className="text-sm text-stone-500 hover:text-emerald-700 transition-colors">
orders@tuxedocorn.com
<a href={`mailto:${brandSettings?.invoice_business_email ?? "orders@tuxedocorn.com"}`} className="text-sm text-stone-500 hover:text-emerald-700 transition-colors">
{brandSettings?.invoice_business_email ?? "orders@tuxedocorn.com"}
</a>
</div>
</div>
@@ -116,7 +125,7 @@ export default function TuxedoContactPage() {
</div>
<p className="text-xl font-bold text-stone-950">Message received.</p>
<p className="mt-2 text-sm text-stone-500">We will be in touch within 1-2 business days.</p>
<button
<button type="button"
onClick={() => {
setSubmitted(false);
setForm({ name: "", email: "", topic: "general", message: "" });
@@ -131,7 +140,7 @@ export default function TuxedoContactPage() {
<div className="grid gap-6 md:grid-cols-2">
<div>
<label className="block text-sm font-semibold text-stone-700 mb-2">Your Name</label>
<input
<input aria-label="Jane Smith"
required
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
@@ -141,7 +150,7 @@ export default function TuxedoContactPage() {
</div>
<div>
<label className="block text-sm font-semibold text-stone-700 mb-2">Email</label>
<input
<input aria-label="Jane@example.com"
required
type="email"
value={form.email}
@@ -153,7 +162,7 @@ export default function TuxedoContactPage() {
</div>
<div>
<label className="block text-sm font-semibold text-stone-700 mb-2">Topic</label>
<select
<select aria-label="Select"
value={form.topic}
onChange={(e) => setForm({ ...form, topic: e.target.value })}
className="w-full rounded-xl border border-stone-200 bg-white px-5 py-4 text-sm text-stone-900 outline-none focus:border-stone-900 focus:ring-1 focus:ring-stone-900 transition-colors appearance-none"
@@ -166,7 +175,7 @@ export default function TuxedoContactPage() {
</div>
<div>
<label className="block text-sm font-semibold text-stone-700 mb-2">Message</label>
<textarea
<textarea aria-label="How Can We Help You?"
required
rows={5}
value={form.message}
src/app/tuxedo/contact/error.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ export default function ErrorPage({
)}
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<button
<button type="button"
onClick={reset}
className="rounded-2xl bg-emerald-600 hover:bg-emerald-500 px-8 py-4 text-sm font-bold text-white transition-all hover:shadow-lg hover:shadow-emerald-900/30 hover:-translate-y-0.5 active:scale-95"
>
src/app/tuxedo/error.tsx
+1 -1
View File
@@ -50,7 +50,7 @@ export default function ErrorPage({
{/* Actions */}
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<button
<button type="button"
onClick={reset}
className="rounded-2xl bg-emerald-600 hover:bg-emerald-500 px-8 py-4 text-sm font-bold text-white transition-all hover:shadow-lg hover:shadow-emerald-900/30 hover:-translate-y-0.5 active:scale-95"
>
src/app/tuxedo/faq/FAQClientPage.tsx
+3 -3
View File
@@ -106,7 +106,7 @@ function FAQAccordion({ items, searchQuery }: { items: FAQItem[]; searchQuery: s
key={item.question}
className="rounded-2xl bg-white shadow-sm ring-1 ring-stone-200/60 overflow-hidden transition-all duration-300 hover:ring-stone-300"
>
<button
<button type="button"
onClick={() => setOpen(isOpen ? null : item.question)}
className="flex w-full items-center justify-between px-4 sm:px-6 py-4 sm:py-5 text-left group"
aria-expanded={isOpen}
@@ -157,7 +157,7 @@ export default function TuxedoFAQPage() {
<path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
</div>
<input
<input aria-label="Search Questions..."
type="text"
placeholder="Search questions..."
value={searchQuery}
@@ -165,7 +165,7 @@ export default function TuxedoFAQPage() {
className="w-full rounded-2xl border border-stone-200 bg-white pl-10 sm:pl-11 pr-5 py-3.5 sm:py-4 text-sm sm:text-base text-stone-900 placeholder-stone-400 outline-none focus:border-stone-900 focus:ring-1 focus:ring-stone-900/20 transition-all duration-200 shadow-sm hover:shadow-md focus:shadow-lg"
/>
{searchQuery && (
<button
<button type="button"
onClick={() => setSearchQuery("")}
className="absolute inset-y-0 right-4 flex items-center text-stone-400 hover:text-stone-600 transition-colors"
>
src/app/tuxedo/faq/error.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ export default function ErrorPage({
)}
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<button
<button type="button"
onClick={reset}
className="rounded-2xl bg-emerald-600 hover:bg-emerald-500 px-8 py-4 text-sm font-bold text-white transition-all hover:shadow-lg hover:shadow-emerald-900/30 hover:-translate-y-0.5 active:scale-95"
>

Some files were not shown because too many files have changed in this diff Show More