Initial commit - Route Commerce platform

src/app/water/admin/login/WaterAdminPinClient.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+type Props = { brandId: string };
+
+export default function WaterAdminPinClient({ brandId }: Props) {
+  const router = useRouter();
+  const [pin, setPin] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (pin.length !== 4) return;
+    setLoading(true);
+    setError("");
+
+    try {
+      const res = await fetch("/api/water-admin-auth", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ brandId, pin }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        router.push("/water/admin");
+      } else {
+        setError(data.error ?? "Invalid PIN");
+        setPin("");
+      }
+    } catch {
+      setError("Connection error");
+    }
+    setLoading(false);
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <input
+        type="password"
+        inputMode="numeric"
+        pattern="[0-9]*"
+        maxLength={4}
+        value={pin}
+        onChange={(e) => setPin(e.target.value.replace(/\D/g, "").slice(0, 4))}
+        placeholder="••••"
+        className="w-full rounded-xl border-2 border-slate-300 px-6 py-6 text-center text-4xl font-bold tracking-widest outline-none focus:border-slate-900"
+        style={{ letterSpacing: "0.4em" }}
+        autoFocus
+      />
+      {error && (
+        <p className="text-center text-red-600 text-sm">{error}</p>
+      )}
+      <button
+        type="submit"
+        disabled={pin.length !== 4 || loading}
+        className="w-full rounded-xl bg-slate-900 px-6 py-4 text-lg font-bold text-white disabled:opacity-50"
+      >
+        {loading ? "Verifying..." : "Unlock"}
+      </button>
+    </form>
+  );
+}

src/app/water/admin/login/page.tsx

@@ -0,0 +1,20 @@
+import { redirect } from "next/navigation";
+import WaterAdminPinClient from "./WaterAdminPinClient";
+
+export const dynamic = "force-dynamic";
+
+const TUXEDO_BRAND_ID = "64294306-5f42-463d-a5e8-2ad6c81a96de";
+
+export default async function WaterAdminLoginPage() {
+  return (
+    <div className="min-h-screen bg-slate-100 flex flex-col items-center justify-center p-6">
+      <div className="w-full max-w-xs">
+        <div className="mb-6 text-center">
+          <h1 className="text-2xl font-bold text-slate-900">Water Log Admin</h1>
+          <p className="text-sm text-slate-500 mt-1">Enter your 4-digit admin PIN</p>
+        </div>
+        <WaterAdminPinClient brandId={TUXEDO_BRAND_ID} />
+      </div>
+    </div>
+  );
+}

src/app/water/admin/page.tsx

@@ -0,0 +1,15 @@
+import { redirect } from "next/navigation";
+import { cookies } from "next/headers";
+import WaterAdminClient from "@/components/water/WaterAdminClient";
+
+export const dynamic = "force-dynamic";
+
+export default async function WaterAdminPage() {
+  const cookieStore = await cookies();
+  const adminSession = cookieStore.get("wl_admin_session")?.value;
+  if (!adminSession) {
+    redirect("/water/admin/login");
+  }
+
+  return <WaterAdminClient />;
+}

src/app/water/loading.tsx

@@ -0,0 +1,17 @@
+export default function Loading() {
+  return (
+    <main className="min-h-screen bg-slate-100 px-4 py-6">
+      <div className="mx-auto max-w-lg">
+        <div className="animate-pulse space-y-5">
+          <div className="h-16 rounded-xl bg-slate-800" />
+          <div className="h-8 w-48 rounded bg-slate-300" />
+          <div className="h-12 w-full rounded-xl bg-white" />
+          <div className="h-12 w-full rounded-xl bg-white" />
+          <div className="h-12 w-full rounded-xl bg-white" />
+          <div className="h-12 w-full rounded-xl bg-white" />
+          <div className="h-10 w-full rounded-xl bg-slate-300" />
+        </div>
+      </div>
+    </main>
+  );
+}

src/app/water/page.tsx

@@ -0,0 +1,5 @@
+import WaterFieldClient from "@/components/water/WaterFieldClient";
+
+export default async function WaterPage() {
+  return <WaterFieldClient />;
+}