From 580a87afbdee4d8224ef7fc02036a6cb742aed00 Mon Sep 17 00:00:00 2001
From: gavinlin24 <gavinlin24@gmail.com>
Date: Mon, 9 Mar 2026 19:53:07 -0700
Subject: [PATCH 1/2] Change admin login ui to google

---
 app/admin/login/page.tsx | 126 ++++++++++++++++++++++-----------------
 1 file changed, 72 insertions(+), 54 deletions(-)

diff --git a/app/admin/login/page.tsx b/app/admin/login/page.tsx
index 310a3de..89da19d 100644
--- a/app/admin/login/page.tsx
+++ b/app/admin/login/page.tsx
@@ -1,65 +1,83 @@
 "use client";
 
-import { useState } from "react";
+import { useSession, signIn } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 
 export default function AdminLoginPage() {
-    const [email, setEmail] = useState("");
-    const [password, setPassword] = useState("");
+  const { data: session, status } = useSession();
+  const router = useRouter();
 
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-        console.log({ email, password });
-    };
+  useEffect(() => {
+    if (session) {
+      router.push("/admin");
+    }
+  }, [session, router]);
 
+  if (status === "loading") {
     return (
-        <div className="flex min-h-screen items-center justify-center bg-background">
-            <div className="w-full max-w-md space-y-8 rounded-lg border border-border bg-card p-8 shadow-sm">
-                <div className="text-center">
-                    <h1 className="text-2xl font-bold tracking-tight">Admin Login</h1>
-                    <p className="mt-2 text-sm text-muted-foreground">
-                        Sign in to access the admin dashboard
-                    </p>
-                </div>
+      <div className="flex min-h-screen items-center justify-center bg-white">
+        Loading...
+      </div>
+    );
+  }
 
-                <form onSubmit={handleSubmit} className="space-y-6">
-                    <div className="space-y-2">
-                        <label htmlFor="email" className="text-sm font-medium">
-                            Email
-                        </label>
-                        <input
-                            id="email"
-                            type="email"
-                            value={email}
-                            onChange={(e) => setEmail(e.target.value)}
-                            placeholder="admin@example.com"
-                            required
-                            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                        />
-                    </div>
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-white">
+      <div
+        style={{
+          background: "#dff0f5",
+          borderRadius: "20px",
+          padding: "48px 40px",
+          width: "100%",
+          maxWidth: "400px",
+          textAlign: "center",
+        }}
+      >
+        <h1
+          style={{
+            fontSize: "24px",
+            fontWeight: "700",
+            color: "#111",
+            marginBottom: "8px",
+          }}
+        >
+          Admin Login
+        </h1>
 
-                    <div className="space-y-2">
-                        <label htmlFor="password" className="text-sm font-medium">
-                            Password
-                        </label>
-                        <input
-                            id="password"
-                            type="password"
-                            value={password}
-                            onChange={(e) => setPassword(e.target.value)}
-                            placeholder="••••••••"
-                            required
-                            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                        />
-                    </div>
+        <p style={{ fontSize: "14px", color: "#555", marginBottom: "28px" }}>
+          Sign in to access the dashboard
+        </p>
 
-                    <button
-                        type="submit"
-                        className="inline-flex h-10 w-full items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                    >
-                        Sign In
-                    </button>
-                </form>
-            </div>
-        </div>
-    );
+        <button
+          onClick={() => signIn("google", { callbackUrl: "/admin" })}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "10px",
+            width: "100%",
+            padding: "12px",
+            background: "#111",
+            color: "#fff",
+            border: "none",
+            borderRadius: "8px",
+            fontSize: "14px",
+            fontWeight: "600",
+            cursor: "pointer",
+            letterSpacing: "0.05em",
+            textTransform: "uppercase",
+          }}
+        >
+          <img
+            src="https://api.iconify.design/logos:google-icon.svg"
+            width={22}
+            height={22}
+            alt="Google"
+          />
+          Sign in with Google
+        </button>
+      </div>
+    </div>
+  );
 }

From 3ee19275f40933ce3daeea3ab52fad4e08a61bf6 Mon Sep 17 00:00:00 2001
From: gavinlin24 <gavinlin24@gmail.com>
Date: Mon, 9 Mar 2026 19:53:55 -0700
Subject: [PATCH 2/2] Update admin dashboard ui

---
 app/admin/page.tsx                   | 19 +++---
 components/admin/ProfileDropdown.tsx | 92 ++++++++++++++++++++++++++++
 2 files changed, 102 insertions(+), 9 deletions(-)
 create mode 100644 components/admin/ProfileDropdown.tsx

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 16a284c..05c59b8 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -1,11 +1,12 @@
+import ProfileDropdown from "@/components/admin/ProfileDropdown";
+
 export default function AdminPage() {
-    return (
-      <div>
-        <h1 className="text-2xl font-semibold">Admin Dashboard</h1>
-        <p className="mt-2 text-gray-600">
-          Base admin layout shell is working & No auth yet.
-        </p>
+  return (
+    <div>
+      <div className="flex items-center justify-between border-b border-gray-100 pb-6">
+        <h1 className="text-2xl font-bold text-gray-900">Admin Dashboard</h1>
+        <ProfileDropdown />
       </div>
-    );
-  }
-  
\ No newline at end of file
+    </div>
+  );
+}
diff --git a/components/admin/ProfileDropdown.tsx b/components/admin/ProfileDropdown.tsx
new file mode 100644
index 0000000..6e2a659
--- /dev/null
+++ b/components/admin/ProfileDropdown.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { useSession, signOut } from "next-auth/react";
+import { useState, useRef, useEffect } from "react";
+
+export default function ProfileDropdown() {
+  const { data: session } = useSession();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return (
+    <div ref={ref} style={{ position: "relative" }}>
+      {session?.user?.image && (
+        <img
+          src={session.user.image}
+          referrerPolicy="no-referrer"
+          alt={session.user.name ?? "Profile"}
+          width={44}
+          height={44}
+          onClick={() => setOpen(!open)}
+          style={{
+            borderRadius: "50%",
+            objectFit: "cover",
+            cursor: "pointer",
+            border: open ? "2px solid #111" : "2px solid transparent",
+            transition: "border 0.15s",
+          }}
+        />
+      )}
+
+      {open && (
+        <div
+          style={{
+            position: "absolute",
+            right: 0,
+            top: "52px",
+            background: "#fff",
+            border: "1px solid #e5e7eb",
+            borderRadius: "12px",
+            padding: "8px",
+            minWidth: "220px",
+            boxShadow: "0 4px 20px rgba(0,0,0,0.08)",
+            zIndex: 50,
+          }}
+        >
+          <div
+            style={{
+              padding: "8px 12px 12px",
+              borderBottom: "1px solid #f0f0f0",
+              marginBottom: "8px",
+            }}
+          >
+            <p style={{ fontSize: "20px", fontWeight: "700", color: "#111" }}>
+              {session?.user?.name}
+            </p>
+            <p style={{ fontSize: "16px", color: "#888", marginTop: "2px" }}>
+              {session?.user?.email}
+            </p>
+          </div>
+          <button
+            onClick={() => signOut({ callbackUrl: "/admin/login" })}
+            style={{
+              width: "100%",
+              padding: "9px 12px",
+              background: "#111",
+              color: "#fff",
+              border: "none",
+              borderRadius: "8px",
+              fontSize: "14px",
+              fontWeight: "600",
+              cursor: "pointer",
+              letterSpacing: "0.05em",
+              textTransform: "uppercase",
+            }}
+          >
+            Sign Out
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}