first commit
This commit is contained in:
332
app/dashboard/profile/[id]/page.tsx
Normal file
332
app/dashboard/profile/[id]/page.tsx
Normal file
@@ -0,0 +1,332 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { useParams, useRouter } from 'next/navigation'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import {
|
||||
ArrowLeft,
|
||||
User,
|
||||
Mail,
|
||||
Calendar,
|
||||
Phone,
|
||||
MapPin,
|
||||
DollarSign,
|
||||
Users,
|
||||
TrendingUp,
|
||||
Award
|
||||
} from 'lucide-react'
|
||||
import { motion } from 'framer-motion'
|
||||
import Link from 'next/link'
|
||||
|
||||
interface UserProfile {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
phone?: string
|
||||
address?: string
|
||||
joinedAt: string
|
||||
role: string
|
||||
referralCode: string
|
||||
isActive: boolean
|
||||
stats: {
|
||||
directReferrals: number
|
||||
totalTeam: number
|
||||
personalVolume: number
|
||||
teamVolume: number
|
||||
totalEarnings: number
|
||||
walletBalance: number
|
||||
}
|
||||
recentCommissions: {
|
||||
id: string
|
||||
amount: number
|
||||
level: number
|
||||
type: string
|
||||
status: string
|
||||
createdAt: string
|
||||
}[]
|
||||
}
|
||||
|
||||
export default function ProfilePage() {
|
||||
const params = useParams()
|
||||
const router = useRouter()
|
||||
const [profile, setProfile] = useState<UserProfile | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const fetchProfile = useCallback(async (userId: string) => {
|
||||
try {
|
||||
const response = await fetch(`/api/dashboard/profile/${userId}`)
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 401) {
|
||||
router.push('/auth/signin')
|
||||
return
|
||||
}
|
||||
throw new Error('Profile not found')
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
setProfile(data)
|
||||
} catch (error) {
|
||||
console.error('Error fetching profile:', error)
|
||||
setError('Failed to load profile')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [router])
|
||||
|
||||
useEffect(() => {
|
||||
if (params.id) {
|
||||
fetchProfile(params.id as string)
|
||||
}
|
||||
}, [params.id, fetchProfile])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center">
|
||||
<div className="w-16 h-16 border-4 border-gray-200 border-t-blue-500 rounded-full animate-spin"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error || !profile) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center">
|
||||
<Card className="max-w-md bg-white/80 backdrop-blur-sm shadow-xl border-0">
|
||||
<CardContent className="text-center py-8">
|
||||
<User className="h-16 w-16 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">Profile not found</h3>
|
||||
<p className="text-gray-500 mb-4">{error}</p>
|
||||
<Button asChild>
|
||||
<Link href="/dashboard/genealogy">Back to Genealogy</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="bg-white rounded-2xl shadow-lg border border-gray-200 p-8"
|
||||
>
|
||||
<div className="flex items-center space-x-4 mb-6">
|
||||
<Button variant="ghost" asChild>
|
||||
<Link href="/dashboard/genealogy">
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back to Genealogy
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col lg:flex-row items-start lg:items-center gap-6">
|
||||
<div className="flex items-center space-x-6">
|
||||
<div className="w-24 h-24 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg">
|
||||
<User className="h-12 w-12 text-white" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">{profile.name}</h1>
|
||||
<p className="text-gray-600 text-lg">{profile.email}</p>
|
||||
<div className="flex items-center space-x-4 mt-2">
|
||||
<Badge variant={profile.isActive ? 'default' : 'secondary'}>
|
||||
{profile.isActive ? 'Active' : 'Inactive'}
|
||||
</Badge>
|
||||
<Badge variant="outline">{profile.role}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:ml-auto text-right">
|
||||
<p className="text-sm text-gray-500">Member Since</p>
|
||||
<p className="text-lg font-semibold text-gray-900">
|
||||
{new Date(profile.joinedAt).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
>
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle>Contact Information</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Mail className="h-5 w-5 text-blue-500" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Email</p>
|
||||
<p className="font-medium">{profile.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{profile.phone && (
|
||||
<div className="flex items-center space-x-3">
|
||||
<Phone className="h-5 w-5 text-green-500" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Phone</p>
|
||||
<p className="font-medium">{profile.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<Calendar className="h-5 w-5 text-purple-500" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Referral Code</p>
|
||||
<p className="font-medium font-mono">{profile.referralCode}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{profile.address && (
|
||||
<div className="flex items-center space-x-3">
|
||||
<MapPin className="h-5 w-5 text-red-500" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Address</p>
|
||||
<p className="font-medium">{profile.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Stats */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
|
||||
>
|
||||
<Card className="bg-gradient-to-r from-blue-500 to-indigo-600 text-white border-0 shadow-lg">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-blue-100 text-sm">Wallet Balance</p>
|
||||
<p className="text-2xl font-bold">₹{profile.stats.walletBalance.toFixed(2)}</p>
|
||||
</div>
|
||||
<DollarSign className="h-8 w-8 text-blue-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gradient-to-r from-green-500 to-emerald-600 text-white border-0 shadow-lg">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-green-100 text-sm">Direct Referrals</p>
|
||||
<p className="text-2xl font-bold">{profile.stats.directReferrals}</p>
|
||||
</div>
|
||||
<Users className="h-8 w-8 text-green-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gradient-to-r from-purple-500 to-pink-600 text-white border-0 shadow-lg">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-purple-100 text-sm">Total Team</p>
|
||||
<p className="text-2xl font-bold">{profile.stats.totalTeam}</p>
|
||||
</div>
|
||||
<TrendingUp className="h-8 w-8 text-purple-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gradient-to-r from-yellow-500 to-orange-600 text-white border-0 shadow-lg">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-yellow-100 text-sm">Personal Volume</p>
|
||||
<p className="text-xl font-bold">₹{profile.stats.personalVolume.toFixed(0)}</p>
|
||||
</div>
|
||||
<Award className="h-8 w-8 text-yellow-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gradient-to-r from-red-500 to-pink-600 text-white border-0 shadow-lg">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-red-100 text-sm">Team Volume</p>
|
||||
<p className="text-xl font-bold">₹{profile.stats.teamVolume.toFixed(0)}</p>
|
||||
</div>
|
||||
<TrendingUp className="h-8 w-8 text-red-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gradient-to-r from-teal-500 to-cyan-600 text-white border-0 shadow-lg">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-teal-100 text-sm">Total Earnings</p>
|
||||
<p className="text-xl font-bold">₹{profile.stats.totalEarnings.toFixed(2)}</p>
|
||||
</div>
|
||||
<DollarSign className="h-8 w-8 text-teal-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Recent Commissions */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle>Recent Commissions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{profile.recentCommissions.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{profile.recentCommissions.map((commission) => (
|
||||
<div key={commission.id} className="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-white rounded-lg border">
|
||||
<div>
|
||||
<p className="font-medium">Level {commission.level} {commission.type}</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
{new Date(commission.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-bold text-green-600">+₹{commission.amount.toFixed(2)}</p>
|
||||
<Badge variant={commission.status === 'PAID' ? 'default' : 'secondary'}>
|
||||
{commission.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-center text-gray-500 py-8">No commissions yet</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
477
app/dashboard/profile/page.tsx
Normal file
477
app/dashboard/profile/page.tsx
Normal file
@@ -0,0 +1,477 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { useSession } from 'next-auth/react'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import {
|
||||
User,
|
||||
Mail,
|
||||
Phone,
|
||||
MapPin,
|
||||
Calendar,
|
||||
Shield,
|
||||
Key,
|
||||
Save,
|
||||
Eye,
|
||||
EyeOff
|
||||
} from 'lucide-react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { toast } from 'sonner'
|
||||
import { DashboardHeader } from '@/components/dashboard/DashboardHeader'
|
||||
|
||||
interface UserProfile {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
phone?: string
|
||||
address?: string
|
||||
joinedAt: string
|
||||
role: string
|
||||
referralCode: string
|
||||
isActive: boolean
|
||||
}
|
||||
|
||||
interface PasswordData {
|
||||
currentPassword: string
|
||||
newPassword: string
|
||||
confirmPassword: string
|
||||
}
|
||||
|
||||
export default function ProfilePage() {
|
||||
const { data: session } = useSession()
|
||||
const [profile, setProfile] = useState<UserProfile | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [passwordData, setPasswordData] = useState<PasswordData>({
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
})
|
||||
const [showPasswords, setShowPasswords] = useState({
|
||||
current: false,
|
||||
new: false,
|
||||
confirm: false
|
||||
})
|
||||
|
||||
const fetchProfile = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetch('/api/user/profile')
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch profile')
|
||||
}
|
||||
const data = await response.json()
|
||||
|
||||
// Transform the data to match our interface
|
||||
const transformedProfile: UserProfile = {
|
||||
id: data.id,
|
||||
name: data.name || session?.user?.name || '',
|
||||
email: data.email || session?.user?.email || '',
|
||||
phone: data.phone || '',
|
||||
address: data.address || '',
|
||||
joinedAt: data.createdAt || new Date().toISOString(),
|
||||
role: session?.user?.role || 'CUSTOMER',
|
||||
referralCode: session?.user?.referralCode || '',
|
||||
isActive: data.isActive !== undefined ? data.isActive : true
|
||||
}
|
||||
|
||||
setProfile(transformedProfile)
|
||||
} catch (error) {
|
||||
console.error('Error fetching profile:', error)
|
||||
|
||||
// Fallback to session data if API fails
|
||||
if (session?.user) {
|
||||
const fallbackProfile: UserProfile = {
|
||||
id: session.user.id || '',
|
||||
name: session.user.name || '',
|
||||
email: session.user.email || '',
|
||||
phone: '',
|
||||
address: '',
|
||||
joinedAt: new Date().toISOString(),
|
||||
role: session.user.role || 'CUSTOMER',
|
||||
referralCode: session.user.referralCode || '',
|
||||
isActive: true
|
||||
}
|
||||
setProfile(fallbackProfile)
|
||||
} else {
|
||||
toast.error('Failed to load profile')
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [session])
|
||||
|
||||
useEffect(() => {
|
||||
if (session) {
|
||||
fetchProfile()
|
||||
} else {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [fetchProfile, session])
|
||||
|
||||
const handleProfileUpdate = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!profile) return
|
||||
|
||||
setSaving(true)
|
||||
try {
|
||||
const response = await fetch('/api/user/profile', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: profile.name,
|
||||
phone: profile.phone,
|
||||
address: profile.address
|
||||
})
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json()
|
||||
throw new Error(errorData.error || 'Failed to update profile')
|
||||
}
|
||||
|
||||
const updatedData = await response.json()
|
||||
setProfile(prev => prev ? { ...prev, ...updatedData } : null)
|
||||
toast.success('Profile updated successfully')
|
||||
} catch (error) {
|
||||
console.error('Error updating profile:', error)
|
||||
toast.error('Failed to update profile')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handlePasswordChange = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (passwordData.newPassword !== passwordData.confirmPassword) {
|
||||
toast.error('New passwords do not match')
|
||||
return
|
||||
}
|
||||
|
||||
if (passwordData.newPassword.length < 6) {
|
||||
toast.error('Password must be at least 6 characters long')
|
||||
return
|
||||
}
|
||||
|
||||
setSaving(true)
|
||||
try {
|
||||
const response = await fetch('/api/user/change-password', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(passwordData)
|
||||
})
|
||||
|
||||
if (!response.ok) throw new Error('Failed to change password')
|
||||
|
||||
toast.success('Password changed successfully')
|
||||
setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' })
|
||||
} catch (error) {
|
||||
toast.error('Failed to change password')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const copyReferralCode = () => {
|
||||
if (profile?.referralCode) {
|
||||
navigator.clipboard.writeText(profile.referralCode)
|
||||
toast.success('Referral code copied to clipboard!')
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center">
|
||||
<div className="w-16 h-16 border-4 border-gray-200 border-t-blue-500 rounded-full animate-spin"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!session || !profile) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-4">Profile not found</h1>
|
||||
<p className="text-gray-600">Please try refreshing the page or signing in again.</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
|
||||
{/* Header */}
|
||||
<DashboardHeader
|
||||
title="My Profile"
|
||||
description="Manage your account settings and personal information"
|
||||
icon={<User className="h-6 w-6 text-white" />}
|
||||
/>
|
||||
|
||||
{/* Profile Overview */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
>
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardContent className="p-8">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center gap-6">
|
||||
<div className="w-20 h-20 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg">
|
||||
<User className="h-10 w-10 text-white" />
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h2 className="text-2xl font-bold text-gray-900">{profile.name || 'User'}</h2>
|
||||
<p className="text-gray-600">{profile.email}</p>
|
||||
|
||||
<div className="flex items-center space-x-4 mt-3">
|
||||
<Badge variant={profile.isActive ? 'default' : 'secondary'}>
|
||||
{profile.isActive ? 'Active' : 'Inactive'}
|
||||
</Badge>
|
||||
<Badge variant="outline">{profile.role}</Badge>
|
||||
<div className="text-sm text-gray-500">
|
||||
Member since {profile.joinedAt ? new Date(profile.joinedAt).toLocaleDateString() : 'Invalid Date'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-gray-500 mb-2">Referral Code</p>
|
||||
<div className="bg-gray-100 px-4 py-2 rounded-lg">
|
||||
<code className="font-mono font-bold">{profile.referralCode || 'N/A'}</code>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={copyReferralCode}
|
||||
className="mt-2"
|
||||
disabled={!profile.referralCode}
|
||||
>
|
||||
Copy Code
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Profile Management */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<Tabs defaultValue="personal" className="space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="personal">Personal Information</TabsTrigger>
|
||||
<TabsTrigger value="security">Security Settings</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="personal">
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center">
|
||||
<User className="h-5 w-5 mr-2" />
|
||||
Personal Information
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleProfileUpdate} className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Full Name</Label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
||||
<Input
|
||||
id="name"
|
||||
value={profile?.name || ''}
|
||||
onChange={(e) => setProfile(prev => prev ? {...prev, name: e.target.value} : null)}
|
||||
className="pl-10"
|
||||
placeholder="Enter your full name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email Address</Label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
||||
<Input
|
||||
id="email"
|
||||
value={profile?.email || ''}
|
||||
disabled
|
||||
className="pl-10 bg-gray-50"
|
||||
placeholder="Email cannot be changed"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone">Phone Number</Label>
|
||||
<div className="relative">
|
||||
<Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
||||
<Input
|
||||
id="phone"
|
||||
value={profile?.phone || ''}
|
||||
onChange={(e) => setProfile(prev => prev ? {...prev, phone: e.target.value} : null)}
|
||||
className="pl-10"
|
||||
placeholder="Enter your phone number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="joinedAt">Member Since</Label>
|
||||
<div className="relative">
|
||||
<Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
||||
<Input
|
||||
id="joinedAt"
|
||||
value={new Date(profile?.joinedAt || '').toLocaleDateString()}
|
||||
disabled
|
||||
className="pl-10 bg-gray-50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="address">Address</Label>
|
||||
<div className="relative">
|
||||
<MapPin className="absolute left-3 top-3 text-gray-400 h-4 w-4" />
|
||||
<Textarea
|
||||
id="address"
|
||||
value={profile?.address || ''}
|
||||
onChange={(e) => setProfile(prev => prev ? {...prev, address: e.target.value} : null)}
|
||||
className="pl-10"
|
||||
placeholder="Enter your complete address"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" disabled={saving} className="w-full">
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
{saving ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="security">
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center">
|
||||
<Shield className="h-5 w-5 mr-2" />
|
||||
Security Settings
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handlePasswordChange} className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="currentPassword">Current Password</Label>
|
||||
<div className="relative">
|
||||
<Key className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
||||
<Input
|
||||
id="currentPassword"
|
||||
type={showPasswords.current ? 'text' : 'password'}
|
||||
value={passwordData.currentPassword}
|
||||
onChange={(e) => setPasswordData(prev => ({...prev, currentPassword: e.target.value}))}
|
||||
className="pl-10 pr-10"
|
||||
placeholder="Enter current password"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
|
||||
onClick={() => setShowPasswords(prev => ({...prev, current: !prev.current}))}
|
||||
>
|
||||
{showPasswords.current ? (
|
||||
<EyeOff className="h-4 w-4" />
|
||||
) : (
|
||||
<Eye className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="newPassword">New Password</Label>
|
||||
<div className="relative">
|
||||
<Key className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
||||
<Input
|
||||
id="newPassword"
|
||||
type={showPasswords.new ? 'text' : 'password'}
|
||||
value={passwordData.newPassword}
|
||||
onChange={(e) => setPasswordData(prev => ({...prev, newPassword: e.target.value}))}
|
||||
className="pl-10 pr-10"
|
||||
placeholder="Enter new password"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
|
||||
onClick={() => setShowPasswords(prev => ({...prev, new: !prev.new}))}
|
||||
>
|
||||
{showPasswords.new ? (
|
||||
<EyeOff className="h-4 w-4" />
|
||||
) : (
|
||||
<Eye className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirm New Password</Label>
|
||||
<div className="relative">
|
||||
<Key className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type={showPasswords.confirm ? 'text' : 'password'}
|
||||
value={passwordData.confirmPassword}
|
||||
onChange={(e) => setPasswordData(prev => ({...prev, confirmPassword: e.target.value}))}
|
||||
className="pl-10 pr-10"
|
||||
placeholder="Confirm new password"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
|
||||
onClick={() => setShowPasswords(prev => ({...prev, confirm: !prev.confirm}))}
|
||||
>
|
||||
{showPasswords.confirm ? (
|
||||
<EyeOff className="h-4 w-4" />
|
||||
) : (
|
||||
<Eye className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" disabled={saving} className="w-full">
|
||||
<Shield className="h-4 w-4 mr-2" />
|
||||
{saving ? 'Updating...' : 'Change Password'}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user