Changes

src/lib/api.ts

@@ -18,14 +18,32 @@ interface ApiResponse<T = unknown> {
 export interface User {
   id: string;
   email: string;
+  email_verified: boolean;
   full_name: string | null;
   avatar_url: string | null;
-  is_active: boolean;
+  status: string;
-  is_verified: boolean;
+  last_login_at: string | null;
   created_at: string;
   updated_at: string;
 }
 
+export interface Organization {
+  id: string;
+  name: string;
+  slug: string;
+  description: string | null;
+  logo_url: string | null;
+  is_active: boolean;
+  role: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface OrganizationsResponse {
+  organizations: Organization[];
+  count: number;
+}
+
 export interface Session {
   id: string;
   expires_at: string;
@@ -103,6 +121,8 @@ export const api = {
         method: 'PATCH',
         body: JSON.stringify(data),
       }),
+
+    organizations: () => request<OrganizationsResponse>('/users/me/organizations'),
   },
 };
 

src/pages/user/ProfilePage.tsx

@@ -1,34 +1,107 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
-import { Mail, Building2, Upload, CheckCircle, AlertCircle } from "lucide-react";
+import { Mail, Building2, Upload, CheckCircle, AlertCircle, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { useAuth } from "@/contexts/AuthContext";
+import { api, Organization, ApiError } from "@/lib/api";
+import { toast } from "@/hooks/use-toast";
 
 export default function ProfilePage() {
-  const [name, setName] = useState("John Doe");
+  const { user, refreshUser } = useAuth();
+  const [name, setName] = useState("");
   const [isEditing, setIsEditing] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
+  const [orgsLoading, setOrgsLoading] = useState(true);
 
-  // Mock user data
+  // Sync local name state with user data
-  const user = {
+  useEffect(() => {
-    name: "John Doe",
+    if (user?.full_name) {
-    email: "john@example.com",
+      setName(user.full_name);
-    emailVerified: true,
+    }
-    avatar: null,
+  }, [user?.full_name]);
-    initials: "JD",
+
-    organizations: [
+  // Fetch organizations
-      { name: "Acme Corp", role: "Admin" },
+  useEffect(() => {
-      { name: "Beta Inc", role: "Member" },
+    const fetchOrgs = async () => {
-    ],
+      try {
+        const response = await api.users.organizations();
+        setOrganizations(response.organizations);
+      } catch (error) {
+        if (error instanceof ApiError) {
+          toast({
+            title: "Error loading organizations",
+            description: error.message,
+            variant: "destructive",
+          });
+        }
+      } finally {
+        setOrgsLoading(false);
+      }
+    };
+
+    fetchOrgs();
+  }, []);
+
+  const getInitials = (fullName: string | null) => {
+    if (!fullName) return "?";
+    return fullName
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .toUpperCase()
+      .slice(0, 2);
   };
 
-  const handleSave = () => {
+  const handleSave = async () => {
+    if (!name.trim()) {
+      toast({
+        title: "Name required",
+        description: "Please enter your full name",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      await api.users.updateMe({ full_name: name.trim() });
+      await refreshUser();
+      setIsEditing(false);
+      toast({
+        title: "Profile updated",
+        description: "Your name has been updated successfully",
+      });
+    } catch (error) {
+      if (error instanceof ApiError) {
+        toast({
+          title: "Update failed",
+          description: error.message,
+          variant: "destructive",
+        });
+      }
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setName(user?.full_name || "");
     setIsEditing(false);
-    // Save logic here
   };
 
+  if (!user) {
+    return (
+      <div className="page-container flex items-center justify-center">
+        <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
   return (
     <div className="page-container">
       <div className="page-header">
@@ -49,9 +122,9 @@ export default function ProfilePage() {
             {/* Avatar */}
             <div className="flex items-center gap-6">
               <Avatar className="w-20 h-20">
-                <AvatarImage src={user.avatar || undefined} />
+                <AvatarImage src={user.avatar_url || undefined} />
                 <AvatarFallback className="bg-primary text-primary-foreground text-xl">
-                  {user.initials}
+                  {getInitials(user.full_name)}
                 </AvatarFallback>
               </Avatar>
               <div>
@@ -74,15 +147,19 @@ export default function ProfilePage() {
                     id="name"
                     value={name}
                     onChange={(e) => setName(e.target.value)}
+                    disabled={isSaving}
                   />
-                  <Button onClick={handleSave}>Save</Button>
+                  <Button onClick={handleSave} disabled={isSaving}>
-                  <Button variant="outline" onClick={() => setIsEditing(false)}>
+                    {isSaving && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+                    Save
+                  </Button>
+                  <Button variant="outline" onClick={handleCancel} disabled={isSaving}>
                     Cancel
                   </Button>
                 </div>
               ) : (
                 <div className="flex items-center justify-between p-3 border rounded-lg bg-secondary/30">
-                  <span className="text-foreground">{user.name}</span>
+                  <span className="text-foreground">{user.full_name || "Not set"}</span>
                   <Button variant="ghost" size="sm" onClick={() => setIsEditing(true)}>
                     Edit
                   </Button>
@@ -103,7 +180,7 @@ export default function ProfilePage() {
               <div className="flex items-center gap-3">
                 <Mail className="w-4 h-4 text-muted-foreground" />
                 <span className="text-foreground">{user.email}</span>
-                {user.emailVerified ? (
+                {user.email_verified ? (
                   <Badge variant="secondary" className="bg-success/10 text-success border-0">
                     <CheckCircle className="w-3 h-3 mr-1" />
                     Verified
@@ -126,22 +203,41 @@ export default function ProfilePage() {
             <CardDescription>Organizations you're a member of</CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="space-y-2">
+            {orgsLoading ? (
-              {user.organizations.map((org, index) => (
+              <div className="flex items-center justify-center py-6">
-                <div
+                <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
-                  key={index}
+              </div>
-                  className="flex items-center justify-between p-3 border rounded-lg"
+            ) : organizations.length === 0 ? (
-                >
+              <p className="text-sm text-muted-foreground text-center py-6">
-                  <div className="flex items-center gap-3">
+                You're not a member of any organizations yet.
-                    <div className="w-8 h-8 rounded bg-primary/10 flex items-center justify-center">
+              </p>
-                      <Building2 className="w-4 h-4 text-primary" />
+            ) : (
+              <div className="space-y-2">
+                {organizations.map((org) => (
+                  <div
+                    key={org.id}
+                    className="flex items-center justify-between p-3 border rounded-lg"
+                  >
+                    <div className="flex items-center gap-3">
+                      {org.logo_url ? (
+                        <Avatar className="w-8 h-8">
+                          <AvatarImage src={org.logo_url} />
+                          <AvatarFallback>
+                            <Building2 className="w-4 h-4 text-primary" />
+                          </AvatarFallback>
+                        </Avatar>
+                      ) : (
+                        <div className="w-8 h-8 rounded bg-primary/10 flex items-center justify-center">
+                          <Building2 className="w-4 h-4 text-primary" />
+                        </div>
+                      )}
+                      <span className="text-foreground font-medium">{org.name}</span>
                     </div>
-                    <span className="text-foreground font-medium">{org.name}</span>
+                    <Badge variant="secondary" className="capitalize">{org.role}</Badge>
                   </div>
-                  <Badge variant="secondary">{org.role}</Badge>
+                ))}
-                </div>
+              </div>
-              ))}
+            )}
-            </div>
           </CardContent>
         </Card>
       </div>