Changes

2026-01-06 14:46:23 +00:00
parent bebc3a2029
commit 0104839c11
25 changed files with 2955 additions and 79 deletions
@@ -0,0 +1,150 @@
+import { useState } from "react";
+import { Mail, Building2, Upload, CheckCircle, AlertCircle } 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";
+
+export default function ProfilePage() {
+  const [name, setName] = useState("John Doe");
+  const [isEditing, setIsEditing] = useState(false);
+
+  // Mock user data
+  const user = {
+    name: "John Doe",
+    email: "john@example.com",
+    emailVerified: true,
+    avatar: null,
+    initials: "JD",
+    organizations: [
+      { name: "Acme Corp", role: "Admin" },
+      { name: "Beta Inc", role: "Member" },
+    ],
+  };
+
+  const handleSave = () => {
+    setIsEditing(false);
+    // Save logic here
+  };
+
+  return (
+    <div className="page-container">
+      <div className="page-header">
+        <h1 className="page-title">Profile</h1>
+        <p className="page-description">
+          Manage your personal information and organization memberships
+        </p>
+      </div>
+
+      <div className="space-y-6">
+        {/* Profile Photo & Name */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Personal Information</CardTitle>
+            <CardDescription>Update your photo and personal details</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {/* Avatar */}
+            <div className="flex items-center gap-6">
+              <Avatar className="w-20 h-20">
+                <AvatarImage src={user.avatar || undefined} />
+                <AvatarFallback className="bg-primary text-primary-foreground text-xl">
+                  {user.initials}
+                </AvatarFallback>
+              </Avatar>
+              <div>
+                <Button variant="outline" size="sm">
+                  <Upload className="w-4 h-4 mr-2" />
+                  Change photo
+                </Button>
+                <p className="text-xs text-muted-foreground mt-2">
+                  JPG, PNG or GIF. Max 2MB.
+                </p>
+              </div>
+            </div>
+
+            {/* Name */}
+            <div className="space-y-2">
+              <Label htmlFor="name">Full name</Label>
+              {isEditing ? (
+                <div className="flex gap-2">
+                  <Input
+                    id="name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                  />
+                  <Button onClick={handleSave}>Save</Button>
+                  <Button variant="outline" onClick={() => setIsEditing(false)}>
+                    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>
+                  <Button variant="ghost" size="sm" onClick={() => setIsEditing(true)}>
+                    Edit
+                  </Button>
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Email */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Email Address</CardTitle>
+            <CardDescription>Your email is used for login and notifications</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center justify-between p-3 border rounded-lg bg-secondary/30">
+              <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 ? (
+                  <Badge variant="secondary" className="bg-success/10 text-success border-0">
+                    <CheckCircle className="w-3 h-3 mr-1" />
+                    Verified
+                  </Badge>
+                ) : (
+                  <Badge variant="secondary" className="bg-warning/10 text-warning border-0">
+                    <AlertCircle className="w-3 h-3 mr-1" />
+                    Unverified
+                  </Badge>
+                )}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Organizations */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Organizations</CardTitle>
+            <CardDescription>Organizations you're a member of</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              {user.organizations.map((org, index) => (
+                <div
+                  key={index}
+                  className="flex items-center justify-between p-3 border rounded-lg"
+                >
+                  <div className="flex items-center gap-3">
+                    <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>
+                  <Badge variant="secondary">{org.role}</Badge>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}