feat : update

2026-10-02 17:33:14 +07:00
parent 63898fb90d
commit a966d996a9
34 changed files with 4678 additions and 147 deletions
@@ -0,0 +1,39 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { LogOutIcon, UserRoundIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem,
+  DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { authClient } from "@/lib/auth/client";
+import { unsubscribeCommissionPush } from "@/components/commission/push-client";
+
+export function AccountMenu({ admin = false }: { admin?: boolean }) {
+  const router = useRouter();
+  const { data } = authClient.useSession();
+  if (!admin && !data?.user) return null;
+
+  async function signOut() {
+    await unsubscribeCommissionPush().catch(() => undefined);
+    await authClient.signOut();
+    router.push(admin ? "/admin/login" : "/commission");
+    router.refresh();
+  }
+
+  return <DropdownMenu>
+    <DropdownMenuTrigger render={<Button type="button" variant="ghost" size="icon-sm" aria-label="บัญชีของฉัน" />}>
+      <UserRoundIcon />
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end" className="w-48">
+      <DropdownMenuGroup>
+        <DropdownMenuLabel className="truncate">{data?.user?.name || "บัญชีของฉัน"}</DropdownMenuLabel>
+        <DropdownMenuItem render={<Link href="/profile" />}><UserRoundIcon />โปรไฟล์ของฉัน</DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem onClick={() => void signOut()}><LogOutIcon />ออกจากระบบ</DropdownMenuItem>
+      </DropdownMenuGroup>
+    </DropdownMenuContent>
+  </DropdownMenu>;
+}
@@ -0,0 +1,77 @@
+"use client";
+
+import { useEffect, useState, type FormEvent } from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+
+export function ProfileForm({ name: initialName, email, image: initialImage }: {
+  name: string; email: string; image: string | null;
+}) {
+  const [name, setName] = useState(initialName);
+  const [file, setFile] = useState<File | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => () => { if (preview) URL.revokeObjectURL(preview); }, [preview]);
+
+  function chooseFile(next: File | null) {
+    setError("");
+    if (next && (next.size > 6 * 1024 * 1024 || !["image/png", "image/jpeg", "image/webp"].includes(next.type))) {
+      setError("ใช้รูป PNG, JPEG หรือ WebP ขนาดไม่เกิน 6 MB");
+      return;
+    }
+    setFile(next);
+    setPreview(next ? URL.createObjectURL(next) : null);
+  }
+
+  async function save(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (busy) return;
+    setBusy(true); setError("");
+    try {
+      const form = new FormData();
+      form.set("name", name.trim());
+      if (file) form.set("image", file);
+      const response = await fetch("/api/profile", { method: "POST", body: form });
+      if (!response.ok) throw new Error("บันทึกโปรไฟล์ไม่สำเร็จ กรุณาลองอีกครั้ง");
+      window.location.reload();
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "บันทึกโปรไฟล์ไม่สำเร็จ");
+      setBusy(false);
+    }
+  }
+
+  return <Card>
+    <CardHeader><CardTitle>ข้อมูลบัญชี</CardTitle><CardDescription>{email}</CardDescription></CardHeader>
+    <CardContent><form id="profile-form" onSubmit={save}><FieldGroup>
+      <Field><FieldLabel htmlFor="profile-image">รูปโปรไฟล์</FieldLabel>
+        <div className="flex items-center gap-4">
+          <Avatar size="lg" className="size-16">
+            {(preview || initialImage) && <AvatarImage src={preview || initialImage || ""} alt="รูปโปรไฟล์" />}
+            <AvatarFallback>{name.trim().charAt(0).toUpperCase() || "?"}</AvatarFallback>
+          </Avatar>
+          <Input id="profile-image" type="file" accept="image/png,image/jpeg,image/webp"
+            onChange={(event) => {
+              const selected = event.target.files?.[0] ?? null;
+              chooseFile(selected);
+              if (selected && (selected.size > 6 * 1024 * 1024 ||
+                !["image/png", "image/jpeg", "image/webp"].includes(selected.type))) event.target.value = "";
+            }} disabled={busy} />
+        </div>
+      </Field>
+      <Field><FieldLabel htmlFor="profile-name">ชื่อที่แสดง</FieldLabel>
+        <Input id="profile-name" value={name} onChange={(event) => setName(event.target.value)}
+          minLength={2} maxLength={80} required disabled={busy} />
+      </Field>
+      {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
+    </FieldGroup></form></CardContent>
+    <CardFooter><Button type="submit" form="profile-form" disabled={busy || name.trim().length < 2 || name.trim().length > 80}>
+      {busy ? "กำลังบันทึก..." : "บันทึกโปรไฟล์"}
+    </Button></CardFooter>
+  </Card>;
+}