Account login

web/app/profile/page.js

@@ -0,0 +1,61 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/context/AuthContext";
+
+export default function ProfilePage() {
+  const { user, loading, logout } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!loading && !user) {
+      router.replace("/login");
+    }
+  }, [user, loading, router]);
+
+  function handleLogout() {
+    logout();
+
+    router.push("/");
+  }
+
+  if (loading || !user) {
+    return <main className="auth-page"><p className="profile-loading">Loading…</p></main>;
+  }
+
+  const fields = [
+    {label: "Full Name", value: user.fullName},
+    {label: "Username", value: user.username},
+    {label: "Email", value: user.email},
+    {label: "Phone", value: user.phone || "—"},
+    {label: "Role", value: user.role},
+    ...(user.storeName ? [{label: "Store", value: user.storeName}] : []),
+  ];
+
+  return (
+    <main className="auth-page">
+      <div className="profile-card">
+        <div className="profile-avatar-circle">
+          {(user.fullName || user.username).charAt(0).toUpperCase()}
+        </div>
+
+        <h1 className="profile-name">{user.fullName || user.username}</h1>
+        <span className="profile-role-badge">{user.role}</span>
+
+        <dl className="profile-fields">
+          {fields.map(({ label, value }) => (
+            <div key={label} className="profile-field-row">
+              <dt className="profile-field-label">{label}</dt>
+              <dd className="profile-field-value">{value}</dd>
+            </div>
+          ))}
+        </dl>
+
+        <button className="auth-submit-btn profile-logout-btn" onClick={handleLogout}>
+          Log Out
+        </button>
+      </div>
+    </main>
+  );
+}