phase 3 bug fixing

frontend/src/pages/SettingsPage.tsx

@@ -1,8 +1,45 @@
+import { useAuth } from '../contexts/AuthContext'
+
 export default function SettingsPage() {
+  const { user, logout } = useAuth()
+
   return (
-    <div className="p-6">
-      <h1 className="text-2xl font-semibold text-[#172B4D] mb-4">Settings</h1>
-      <p className="text-[#5E6C84]">Coming soon — Phase 2 implementation.</p>
+    <div className="max-w-2xl mx-auto px-4 md:px-6 py-6 space-y-8">
+      <h1 className="text-xl font-semibold text-[#172B4D]">Settings</h1>
+
+      <section className="border border-[#DFE1E6] rounded-lg overflow-hidden">
+        <div className="px-5 py-4 border-b border-[#DFE1E6] bg-[#FAFBFC]">
+          <h2 className="text-sm font-semibold text-[#172B4D]">Account</h2>
+        </div>
+        <div className="px-5 py-4 flex flex-col gap-3">
+          <div>
+            <p className="text-xs text-[#5E6C84]">Username</p>
+            <p className="text-sm font-medium text-[#172B4D]">{user?.username}</p>
+          </div>
+          <div>
+            <p className="text-xs text-[#5E6C84]">Email</p>
+            <p className="text-sm text-[#172B4D]">{user?.email}</p>
+          </div>
+          <div>
+            <p className="text-xs text-[#5E6C84]">Role</p>
+            <p className="text-sm text-[#172B4D]">{user?.isAdmin ? 'Administrator' : 'Member'}</p>
+          </div>
+        </div>
+      </section>
+
+      <section className="border border-[#FFEBE6] rounded-lg overflow-hidden">
+        <div className="px-5 py-4 border-b border-[#FFEBE6] bg-[#FFEBE6]/50">
+          <h2 className="text-sm font-semibold text-[#BF2600]">Danger zone</h2>
+        </div>
+        <div className="px-5 py-4">
+          <button
+            onClick={logout}
+            className="px-4 py-2 rounded border border-[#DE350B] text-[#DE350B] text-sm font-medium hover:bg-[#FFEBE6] min-h-[44px]"
+          >
+            Sign out
+          </button>
+        </div>
+      </section>
     </div>
   )
 }