Add Login and Dashboard

src/app/(public)/layout.tsx

@@ -0,0 +1,3 @@
+export default function PublicLayout({ children }: { children: React.ReactNode }) {
+    return <div id="main" className="min-h-screen">{children}</div>;
+}

src/app/(public)/login/page.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import React, { Suspense, useMemo, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import BrandLogo from "@/app/component/common/BrandLogo";
+
+// บอก Next ให้บังคับ dynamic เพื่อไม่ให้พยายาม prerender แบบ static แล้วล้ม
+export const dynamic = "force-dynamic";
+
+function LoginFormInner() {
+    const sp = useSearchParams();
+    const returnUrl = sp.get("returnUrl") || "/dashboard";
+
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [message, setMessage] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    const router = useRouter();
+
+    const emailError = useMemo(() => {
+        if (!email) return null;
+        const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+        return ok ? null : "กรุณากรอกอีเมลให้ถูกต้อง";
+    }, [email]);
+
+    const canSubmit = Boolean(email && password && !emailError && !loading);
+
+    async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
+        e.preventDefault();
+        if (!canSubmit) return;
+
+        setLoading(true);
+        setError(null);
+        setMessage(null);
+
+        try {
+            const res = await fetch("/api/auth/login", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                credentials: "include",
+                body: JSON.stringify({ email, password }),
+                cache: "no-store",
+            });
+
+            if (!res.ok) {
+                const j = (await res.json().catch(() => ({}))) as { message?: string };
+                throw new Error(j?.message ?? `Login failed (${res.status})`);
+            }
+
+            setMessage("เข้าสู่ระบบสำเร็จ กำลังพาไปยังหน้าแดชบอร์ด…");
+            router.replace(returnUrl);
+        } catch (ex: unknown) {
+            const err = ex as Error;
+            setError(err.message ?? "Login error");
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    return (
+        <main className="min-h-screen bg-white text-neutral-900">
+            <section className="mx-auto flex min-h-screen max-w-lg flex-col items-center justify-center px-4">
+                {/* Brand */}
+                <div className="flex flex-col items-center">
+                    <BrandLogo />
+                </div>
+
+                {/* Heading */}
+                <h1 className="mt-5 text-3xl font-extrabold tracking-tight">Sign in</h1>
+                <p className="mt-1 text-xs text-neutral-500">เข้าสู่ระบบเพื่อใช้งานแพลตฟอร์ม</p>
+
+                {/* Card */}
+                <div className="mt-7 w-full rounded-2xl border border-neutral-200 bg-white p-6 shadow-md sm:p-8">
+                    <form onSubmit={onSubmit} className="space-y-5">
+                        <div>
+                            <label className="block text-sm font-medium text-neutral-800">อีเมล</label>
+                            <input
+                                className={`mt-1 h-12 w-full rounded-lg border px-4 text-base outline-none placeholder:text-neutral-400 focus:ring-2 ${
+                                    emailError
+                                        ? "border-red-400 focus:ring-red-200"
+                                        : "border-neutral-300 focus:ring-neutral-200"
+                                }`}
+                                placeholder="you@example.com"
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
+                                inputMode="email"
+                                autoComplete="username"
+                                type="email"
+                                aria-invalid={!!emailError}
+                                aria-describedby="email-error"
+                                required
+                            />
+                            {emailError && (
+                                <div className="mt-1 text-xs text-red-600" id="email-error">
+                                    {emailError}
+                                </div>
+                            )}
+                        </div>
+
+                        <div>
+                            <label className="block text-sm font-medium text-neutral-800">รหัสผ่าน</label>
+                            <input
+                                className="mt-1 h-12 w-full rounded-lg border border-neutral-300 px-4 text-base outline-none placeholder:text-neutral-400 focus:ring-2 focus:ring-neutral-200"
+                                placeholder="••••••••"
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                                type="password"
+                                autoComplete="current-password"
+                                required
+                            />
+                        </div>
+
+                        <button
+                            type="submit"
+                            disabled={!canSubmit}
+                            className="w-full rounded-full bg-neutral-900 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-neutral-800 active:scale-[.99] disabled:cursor-not-allowed disabled:opacity-50"
+                        >
+                            {loading ? "กำลังเข้าสู่ระบบ..." : "เข้าสู่ระบบ"}
+                        </button>
+                    </form>
+
+                    {/* Banners */}
+                    {message && (
+                        <div className="mt-5 rounded-xl border border-neutral-200 bg-neutral-50 p-3 text-sm text-neutral-800">
+                            {message}
+                        </div>
+                    )}
+                    {error && (
+                        <div className="mt-5 rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+                            {error}
+                        </div>
+                    )}
+                </div>
+            </section>
+        </main>
+    );
+}
+
+function LoginSkeleton() {
+    return (
+        <main className="min-h-screen bg-white text-neutral-900">
+            <section className="mx-auto flex min-h-screen max-w-lg flex-col items-center justify-center px-4">
+                <div className="h-8 w-24 animate-pulse rounded bg-neutral-200" />
+                <div className="mt-5 h-8 w-40 animate-pulse rounded bg-neutral-200" />
+                <div className="mt-7 w-full rounded-2xl border border-neutral-200 bg-white p-6 shadow-md sm:p-8">
+                    <div className="space-y-4">
+                        <div className="h-10 w-full animate-pulse rounded bg-neutral-200" />
+                        <div className="h-10 w-full animate-pulse rounded bg-neutral-200" />
+                        <div className="h-10 w-full animate-pulse rounded bg-neutral-900/20" />
+                    </div>
+                </div>
+            </section>
+        </main>
+    );
+}
+
+export default function LoginPage() {
+    return (
+        <Suspense fallback={<LoginSkeleton />}>
+            <LoginFormInner />
+        </Suspense>
+    );
+}

src/app/(public)/redeem/[transactionId]/page.tsx

@@ -1,175 +1,102 @@
 // File: src/app/(public)/redeem/[transactionId]/page.tsx
 "use client";
 
-import { useState, useMemo } from "react";
+import { useMemo, useRef, useState } from "react";
 import { useParams, useSearchParams } from "next/navigation";
 import BrandLogo from "@/app/component/common/BrandLogo";
+import { genIdempotencyKey } from "@/lib/idempotency";
+import { resolveTenantKeyFromHost } from "@/lib/tenant";
+import { onlyAsciiDigits, isThaiMobile10, looksLikeCountryCode } from "@/lib/phone";
+import type { RedeemResponse, RedeemRequest } from "@/types/crm";
 
-/* =======================
-   Config
-======================= */
-const API_BASE = process.env.NEXT_PUBLIC_EOP_PUBLIC_API_BASE ?? "";
-
-/* =======================
-   Types
-======================= */
-type RedeemResponse = {
-    balance?: number;
-    voucherCode?: string;
-    ledgerEntryId?: string;
-    redeemed?: boolean;
-    message?: string;
-};
-
-/* =======================
-   Utils
-======================= */
-function uuidv4() {
-    if (typeof crypto !== "undefined" && "randomUUID" in crypto) return crypto.randomUUID();
-    return "idem-" + Date.now() + "-" + Math.random().toString(16).slice(2);
-}
-
-function getTenantKeyFromHost() {
-    if (typeof window === "undefined") return process.env.NEXT_PUBLIC_DEFAULT_TENANT_KEY ?? "demo";
-    const host = window.location.hostname;
-    const parts = host.split(".");
-    if (parts.length >= 3) return parts[0];
-    return process.env.NEXT_PUBLIC_DEFAULT_TENANT_KEY ?? "demo";
-}
-
-// แปลงเลขไทย→อารบิก แล้วเหลือเฉพาะ 0-9 เท่านั้น
-function toAsciiDigitsOnly(input: string) {
-    const map: Record<string, string> = {
-        "๐": "0", "๑": "1", "๒": "2", "๓": "3", "๔": "4",
-        "๕": "5", "๖": "6", "๗": "7", "๘": "8", "๙": "9",
-    };
-    const thToEn = input.replace(/[๐-๙]/g, (ch) => map[ch] ?? ch);
-    return thToEn.replace(/\D/g, "");
-}
-
-// รับเฉพาะเบอร์มือถือไทย 10 หลัก ที่ขึ้นต้นด้วย 06/08/09
-function isStrictThaiMobile10(digitsOnly: string) {
-    return /^0(6|8|9)\d{8}$/.test(digitsOnly);
-}
-
-// รูปแบบที่ดูเหมือน +66/66xxxxx (ไม่อนุญาต)
-function looksLikeCountryCodeFormat(raw: string) {
-    const t = raw.trim();
-    return t.startsWith("+66") || /^66\d+/.test(t);
-}
-
-/* =======================
-   API
-======================= */
-async function redeemPoints(input: {
-    tenantKey: string;
-    transactionId: string;
-    phoneDigits10: string; // 0812345678
-    idempotencyKey: string;
-}): Promise<RedeemResponse> {
-    const res = await fetch(`${API_BASE}/api/v1/loyalty/redeem`, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-            "X-Tenant-Key": input.tenantKey,
-            "Idempotency-Key": input.idempotencyKey,
-        },
-        body: JSON.stringify({
-            transactionId: input.transactionId,
-            contact: { phone: input.phoneDigits10 },
-            metadata: { source: "qr-landing" },
-        }),
-        cache: "no-store",
-    });
-
-    if (!res.ok) {
-        const text = await res.text();
-        throw new Error(text || `HTTP ${res.status}`);
-    }
-    return res.json() as Promise<RedeemResponse>;
-}
-
-/* =======================
-   Page
-======================= */
 export default function RedeemPage() {
     const params = useParams<{ transactionId: string }>();
     const search = useSearchParams();
     const transactionId = params?.transactionId ?? search?.get("transactionId") ?? "";
 
-    const [phoneDigits, setPhoneDigits] = useState<string>("");
-    const [loading, setLoading] = useState<boolean>(false);
+    const [phoneDigits, setPhoneDigits] = useState("");
+    const [loading, setLoading] = useState(false);
     const [message, setMessage] = useState<string | null>(null);
     const [error, setError] = useState<string | null>(null);
     const [result, setResult] = useState<RedeemResponse | null>(null);
 
-    // Validation message
-    const phoneError: string | null = useMemo(() => {
+    const idemRef = useRef<string | null>(null);
+
+    const phoneError = useMemo(() => {
         if (!phoneDigits) return null;
-        if (looksLikeCountryCodeFormat(phoneDigits)) {
-            return "กรุณาใส่เบอร์รูปแบบไทย 10 หลัก เช่น 0812345678 (ไม่ต้องใส่ +66)";
-        }
-        if (phoneDigits.length > 0 && phoneDigits.length !== 10) {
-            return "กรุณากรอกเป็นตัวเลข 10 หลัก";
-        }
-        if (phoneDigits.length === 10 && !isStrictThaiMobile10(phoneDigits)) {
+        if (looksLikeCountryCode(phoneDigits)) return "กรุณาใส่รูปแบบไทย 10 หลัก เช่น 0812345678";
+        if (phoneDigits.length > 0 && phoneDigits.length !== 10) return "กรุณากรอกเป็นตัวเลข 10 หลัก";
+        if (phoneDigits.length === 10 && !isThaiMobile10(phoneDigits))
             return "รับเฉพาะเบอร์มือถือไทยที่ขึ้นต้นด้วย 06, 08 หรือ 09 เท่านั้น";
-        }
         return null;
     }, [phoneDigits]);
 
-    const phoneValid = phoneDigits.length === 10 && !phoneError && isStrictThaiMobile10(phoneDigits);
+    const phoneValid = phoneDigits.length === 10 && !phoneError && isThaiMobile10(phoneDigits);
 
-    // Guard input — digits only (รองรับเลขไทย)
     function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-        const onlyDigits = toAsciiDigitsOnly(e.target.value).slice(0, 10);
-        setPhoneDigits(onlyDigits);
+        setPhoneDigits(onlyAsciiDigits(e.target.value).slice(0, 10));
     }
     function handleBeforeInput(e: React.FormEvent<HTMLInputElement>) {
-        const ie = e.nativeEvent as InputEvent;
-        const data = (ie && "data" in ie ? ie.data : undefined) ?? "";
-        if (!data) return;
-        if (!/^[0-9๐-๙]+$/.test(data)) e.preventDefault();
+        const nativeEvt = e.nativeEvent as unknown;
+        const data =
+            nativeEvt && typeof nativeEvt === "object" && "data" in (nativeEvt as InputEvent)
+                ? (nativeEvt as InputEvent).data
+                : null;
+        if (data && !/^[0-9๐-๙]+$/.test(data)) e.preventDefault();
     }
     function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
         const allow = ["Backspace", "Delete", "Tab", "ArrowLeft", "ArrowRight", "Home", "End"];
-        if (allow.includes(e.key)) return;
-        if (/^[0-9]$/.test(e.key)) return;
+        if (allow.includes(e.key) || /^[0-9]$/.test(e.key)) return;
         e.preventDefault();
     }
     function handlePaste(e: React.ClipboardEvent<HTMLInputElement>) {
         e.preventDefault();
-        const text = e.clipboardData.getData("text") ?? "";
-        const onlyDigits = toAsciiDigitsOnly(text);
+        const onlyDigits = onlyAsciiDigits(e.clipboardData.getData("text") ?? "");
         if (!onlyDigits) return;
         setPhoneDigits((prev) => (prev + onlyDigits).slice(0, 10));
     }
 
-    async function onSubmit(e: React.FormEvent) {
+    async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
         e.preventDefault();
+        if (!transactionId || !phoneValid || loading) return;
+
         setLoading(true);
         setError(null);
         setMessage(null);
         setResult(null);
 
         try {
-            const tenantKey = getTenantKeyFromHost();
-            const idempotencyKey = uuidv4();
+            const tenantKey = resolveTenantKeyFromHost();
+            idemRef.current = genIdempotencyKey();
 
-            const data = await redeemPoints({
-                tenantKey,
+            const payload: RedeemRequest = {
                 transactionId,
-                phoneDigits10: phoneDigits,
-                idempotencyKey,
+                contact: { phone: phoneDigits },
+                metadata: { source: "qr-landing" },
+            };
+
+            const res = await fetch(`/api/public/redeem`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    "X-Tenant-Key": tenantKey,
+                    "Idempotency-Key": idemRef.current!,
+                },
+                body: JSON.stringify(payload),
+                cache: "no-store",
             });
 
+            if (!res.ok) throw new Error((await res.text()) || `HTTP ${res.status}`);
+
+            const data: RedeemResponse = await res.json();
             setResult(data);
             setMessage("สะสมคะแนนสำเร็จ");
-        } catch (err: unknown) {
-            const msg = err instanceof Error ? err.message : "เกิดข้อผิดพลาด ไม่สามารถแลกคะแนนได้";
-            setError(msg);
+        } catch (ex: unknown) {
+            const err = ex as Error;
+            setError(err.message ?? "เกิดข้อผิดพลาด ไม่สามารถแลกคะแนนได้");
         } finally {
             setLoading(false);
+            idemRef.current = null;
         }
     }
 
@@ -187,7 +114,7 @@ export default function RedeemPage() {
                     Transaction: <span className="font-mono">{transactionId || "—"}</span>
                 </p>
 
-                {/* Card — เรียบแต่เนี๊ยบขึ้น */}
+                {/* Card */}
                 <div className="mt-7 w-full rounded-2xl border border-neutral-200 bg-white p-6 shadow-md sm:p-8">
                     {!transactionId && (
                         <div className="mb-4 rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
@@ -197,14 +124,10 @@ export default function RedeemPage() {
 
                     <form onSubmit={onSubmit} className="space-y-5">
                         <div>
-                            <label className="block text-sm font-medium text-neutral-800">
-                                เบอร์โทรศัพท์
-                            </label>
+                            <label className="block text-sm font-medium text-neutral-800">เบอร์โทรศัพท์</label>
                             <input
                                 className={`mt-1 h-12 w-full rounded-lg border px-4 text-base outline-none placeholder:text-neutral-400 focus:ring-2 ${
-                                    phoneError
-                                        ? "border-red-400 focus:ring-red-200"
-                                        : "border-neutral-300 focus:ring-neutral-200"
+                                    phoneError ? "border-red-400 focus:ring-red-200" : "border-neutral-300 focus:ring-neutral-200"
                                 }`}
                                 placeholder="เช่น 0812345678"
                                 value={phoneDigits}
@@ -241,7 +164,6 @@ export default function RedeemPage() {
                         </button>
                     </form>
 
-                    {/* Banners */}
                     {message && (
                         <div className="mt-5 rounded-xl border border-neutral-200 bg-neutral-50 p-3 text-sm text-neutral-800">
                             สะสมคะแนนสำเร็จ