clerkauth

implemented, sync with db to be added

apps/admin/src/app/profile/page.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useUser } from "@clerk/nextjs";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+interface UserProfile {
+  firstName: string;
+  lastName: string;
+  email: string;
+  phoneNumber: string;
+}
+
+export default function ProfilePage() {
+  const { user, isLoaded } = useUser();
+  const [profile, setProfile] = useState<UserProfile>({
+    firstName: "",
+    lastName: "",
+    email: "",
+    phoneNumber: "",
+  });
+  const [isEditing, setIsEditing] = useState(false);
+
+  useEffect(() => {
+    if (isLoaded && user) {
+      setProfile({
+        firstName: user.firstName || "",
+        lastName: user.lastName || "",
+        email: user.emailAddresses[0]?.emailAddress || "",
+        phoneNumber: user.phoneNumbers[0]?.phoneNumber || "",
+      });
+    }
+  }, [isLoaded, user]);
+
+  const handleSave = async () => {
+    try {
+      await user?.update({
+        firstName: profile.firstName,
+        lastName: profile.lastName,
+      });
+      setIsEditing(false);
+    } catch (error) {
+      console.error("Error updating profile:", error);
+    }
+  };
+
+  if (!isLoaded) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div className="container mx-auto py-8">
+      <div className="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow">
+        <div className="flex justify-between items-center mb-6">
+          <h1 className="text-2xl font-bold">Profile</h1>
+          <Button
+            variant={isEditing ? "default" : "outline"}
+            onClick={() => setIsEditing(!isEditing)}
+          >
+            {isEditing ? "Cancel" : "Edit Profile"}
+          </Button>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-1">First Name</label>
+            <Input
+              type="text"
+              value={profile.firstName}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setProfile({ ...profile, firstName: e.target.value })
+              }
+              disabled={!isEditing}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-1">Last Name</label>
+            <Input
+              type="text"
+              value={profile.lastName}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setProfile({ ...profile, lastName: e.target.value })
+              }
+              disabled={!isEditing}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-1">Email</label>
+            <Input type="email" value={profile.email} disabled />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-1">
+              Phone Number
+            </label>
+            <Input type="tel" value={profile.phoneNumber} disabled />
+          </div>
+
+          {isEditing && (
+            <div className="pt-4">
+              <Button onClick={handleSave}>Save Changes</Button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}