333 lines
12 KiB
TypeScript
333 lines
12 KiB
TypeScript
'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>
|
|
)
|
|
}
|