first commit
This commit is contained in:
272
app/dashboard/achievements/page.tsx
Normal file
272
app/dashboard/achievements/page.tsx
Normal file
@@ -0,0 +1,272 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Trophy, Users, TrendingUp, Target, Star, Crown } from 'lucide-react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
// Simple Progress component if not available
|
||||
const Progress = ({ value, className }: { value: number; className?: string }) => (
|
||||
<div className={`w-full bg-gray-200 rounded-full h-2 ${className}`}>
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all duration-300"
|
||||
style={{ width: `${Math.max(0, Math.min(100, value))}%` }}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
interface Rank {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
minReferrals: number
|
||||
minSalesVolume: number
|
||||
minTeamVolume: number
|
||||
commissionMultiplier: number
|
||||
benefits: string[]
|
||||
color: string
|
||||
icon: string
|
||||
order: number
|
||||
}
|
||||
|
||||
interface UserProgress {
|
||||
currentRank: Rank | null
|
||||
nextRank: Rank | null
|
||||
metrics: {
|
||||
totalReferrals: number
|
||||
salesVolume: number
|
||||
teamVolume: number
|
||||
}
|
||||
achievements: {
|
||||
id: string
|
||||
rank: Rank
|
||||
achievedAt: string
|
||||
}[]
|
||||
}
|
||||
|
||||
export default function AchievementsPage() {
|
||||
const [progress, setProgress] = useState<UserProgress | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
fetchUserProgress()
|
||||
}, [])
|
||||
|
||||
const fetchUserProgress = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/achievements')
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch achievements: ${response.status}`)
|
||||
}
|
||||
const data = await response.json()
|
||||
setProgress(data)
|
||||
} catch (error) {
|
||||
console.error('Error fetching achievements:', error)
|
||||
toast.error('Failed to load achievements')
|
||||
// Set default data to prevent crashes
|
||||
setProgress({
|
||||
currentRank: null,
|
||||
nextRank: null,
|
||||
metrics: {
|
||||
totalReferrals: 0,
|
||||
salesVolume: 0,
|
||||
teamVolume: 0
|
||||
},
|
||||
achievements: []
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const calculateProgress = (current: number, required: number) => {
|
||||
return Math.min((current / required) * 100, 100)
|
||||
}
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100">
|
||||
<div className="max-w-7xl 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="text-center"
|
||||
>
|
||||
<h1 className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent mb-4">
|
||||
Achievements & Rankings
|
||||
</h1>
|
||||
<p className="text-gray-600">Track your progress and unlock new rewards</p>
|
||||
</motion.div>
|
||||
|
||||
{progress && (
|
||||
<>
|
||||
{/* Current Rank */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
>
|
||||
<Card className="bg-gradient-to-r from-purple-500 to-blue-600 text-white border-0 shadow-xl">
|
||||
<CardContent className="p-8 text-center">
|
||||
<div className="flex items-center justify-center mb-4">
|
||||
<div className="text-6xl">{progress.currentRank?.icon || '🥉'}</div>
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold mb-2">
|
||||
{progress.currentRank?.name || 'Bronze'}
|
||||
</h2>
|
||||
<p className="text-lg opacity-90 mb-4">
|
||||
{progress.currentRank?.description || 'Welcome to the journey!'}
|
||||
</p>
|
||||
<Badge variant="secondary" className="bg-white/20 text-white">
|
||||
{progress.currentRank?.commissionMultiplier || 1}x Commission Multiplier
|
||||
</Badge>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Progress to Next Rank */}
|
||||
{progress.nextRank && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center">
|
||||
<Target className="h-6 w-6 mr-2 text-blue-600" />
|
||||
Progress to {progress.nextRank.name}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Referrals Progress */}
|
||||
<div>
|
||||
<div className="flex justify-between mb-2">
|
||||
<span className="font-medium">Direct Referrals</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
{progress.metrics.totalReferrals} / {progress.nextRank.minReferrals}
|
||||
</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={calculateProgress(progress.metrics.totalReferrals, progress.nextRank.minReferrals)}
|
||||
className="h-3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sales Volume Progress */}
|
||||
<div>
|
||||
<div className="flex justify-between mb-2">
|
||||
<span className="font-medium">Personal Sales (30 days)</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
₹{progress.metrics.salesVolume.toFixed(0)} / ₹{progress.nextRank.minSalesVolume.toFixed(0)}
|
||||
</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={calculateProgress(progress.metrics.salesVolume, progress.nextRank.minSalesVolume)}
|
||||
className="h-3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Team Volume Progress */}
|
||||
<div>
|
||||
<div className="flex justify-between mb-2">
|
||||
<span className="font-medium">Team Sales (30 days)</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
₹{progress.metrics.teamVolume.toFixed(0)} / ₹{progress.nextRank.minTeamVolume.toFixed(0)}
|
||||
</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={calculateProgress(progress.metrics.teamVolume, progress.nextRank.minTeamVolume)}
|
||||
className="h-3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Next Rank Benefits */}
|
||||
<div className="mt-6 p-4 bg-blue-50 rounded-lg">
|
||||
<h4 className="font-semibold text-blue-900 mb-2">
|
||||
{progress.nextRank.name} Benefits:
|
||||
</h4>
|
||||
<ul className="space-y-1">
|
||||
{progress.nextRank.benefits.map((benefit, index) => (
|
||||
<li key={index} className="text-blue-700 text-sm flex items-center">
|
||||
<Star className="h-4 w-4 mr-2 text-blue-500" />
|
||||
{benefit}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Achievement History */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center">
|
||||
<Trophy className="h-6 w-6 mr-2 text-yellow-600" />
|
||||
Achievement History
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{progress.achievements.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<Crown className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||||
<p className="text-gray-500">No achievements yet</p>
|
||||
<p className="text-sm text-gray-400">Keep growing to unlock your first rank!</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{progress.achievements.map((achievement, index) => (
|
||||
<motion.div
|
||||
key={achievement.id}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.4 + (index * 0.1) }}
|
||||
className="flex items-center space-x-4 p-4 bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg border border-yellow-200"
|
||||
>
|
||||
<div className="text-3xl">{achievement.rank.icon}</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-gray-900">
|
||||
{achievement.rank.name} Achieved!
|
||||
</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
{achievement.rank.description}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
Achieved on {new Date(achievement.achievedAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
<Badge
|
||||
className="bg-yellow-500 text-white"
|
||||
>
|
||||
{achievement.rank.commissionMultiplier}x Bonus
|
||||
</Badge>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
367
app/dashboard/commissions/page.tsx
Normal file
367
app/dashboard/commissions/page.tsx
Normal file
@@ -0,0 +1,367 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Card, CardContent, CardDescription, 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 { Input } from '@/components/ui/input'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { DollarSign, TrendingUp, Users, Eye, Filter, Download, Calendar } from 'lucide-react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { toast } from 'sonner'
|
||||
import { DashboardHeader } from '@/components/dashboard/DashboardHeader'
|
||||
|
||||
interface Commission {
|
||||
id: string
|
||||
amount: number
|
||||
level: number
|
||||
type: 'REFERRAL' | 'LEVEL' | 'BONUS'
|
||||
status: 'PENDING' | 'APPROVED' | 'PAID' | 'CANCELLED'
|
||||
createdAt: string
|
||||
fromUser: {
|
||||
name: string
|
||||
email: string
|
||||
}
|
||||
order?: {
|
||||
id: string
|
||||
total: number
|
||||
}
|
||||
}
|
||||
|
||||
interface CommissionStats {
|
||||
totalEarnings: number
|
||||
pendingAmount: number
|
||||
thisMonthEarnings: number
|
||||
totalCommissions: number
|
||||
byLevel: {
|
||||
level: number
|
||||
amount: number
|
||||
count: number
|
||||
}[]
|
||||
}
|
||||
|
||||
export default function CommissionsPage() {
|
||||
const [commissions, setCommissions] = useState<Commission[]>([])
|
||||
const [stats, setStats] = useState<CommissionStats | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [filter, setFilter] = useState({
|
||||
status: 'all',
|
||||
type: 'all',
|
||||
level: 'all',
|
||||
search: ''
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
fetchCommissions()
|
||||
fetchStats()
|
||||
}, [])
|
||||
|
||||
const fetchCommissions = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/commissions')
|
||||
if (!response.ok) throw new Error('Failed to fetch commissions')
|
||||
const data = await response.json()
|
||||
setCommissions(data.commissions || [])
|
||||
} catch (error) {
|
||||
console.error('Error fetching commissions:', error)
|
||||
toast.error('Failed to load commissions')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/commissions/stats')
|
||||
if (!response.ok) throw new Error('Failed to fetch stats')
|
||||
const data = await response.json()
|
||||
setStats(data)
|
||||
} catch (error) {
|
||||
console.error('Error fetching stats:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'PENDING': return 'bg-yellow-500'
|
||||
case 'APPROVED': return 'bg-blue-500'
|
||||
case 'PAID': return 'bg-green-500'
|
||||
case 'CANCELLED': return 'bg-red-500'
|
||||
default: return 'bg-gray-500'
|
||||
}
|
||||
}
|
||||
|
||||
const getTypeColor = (type: string) => {
|
||||
switch (type) {
|
||||
case 'REFERRAL': return 'bg-blue-100 text-blue-800'
|
||||
case 'LEVEL': return 'bg-purple-100 text-purple-800'
|
||||
case 'BONUS': return 'bg-green-100 text-green-800'
|
||||
default: return 'bg-gray-100 text-gray-800'
|
||||
}
|
||||
}
|
||||
|
||||
const filteredCommissions = commissions.filter(commission => {
|
||||
const matchesStatus = filter.status === 'all' || commission.status === filter.status
|
||||
const matchesType = filter.type === 'all' || commission.type === filter.type
|
||||
const matchesLevel = filter.level === 'all' || commission.level.toString() === filter.level
|
||||
const matchesSearch = !filter.search ||
|
||||
commission.fromUser.name.toLowerCase().includes(filter.search.toLowerCase()) ||
|
||||
commission.fromUser.email.toLowerCase().includes(filter.search.toLowerCase())
|
||||
|
||||
return matchesStatus && matchesType && matchesLevel && matchesSearch
|
||||
})
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
|
||||
{/* Header */}
|
||||
<DashboardHeader
|
||||
title="Commission Earnings"
|
||||
description="Track your referral commissions and earnings"
|
||||
icon={<DollarSign className="h-6 w-6 text-white" />}
|
||||
/>
|
||||
|
||||
{/* Stats Cards */}
|
||||
{stats && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
>
|
||||
<Card className="bg-gradient-to-r from-green-500 to-green-600 text-white">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-green-100 text-sm font-medium">Total Earnings</p>
|
||||
<p className="text-2xl font-bold">₹{stats.totalEarnings.toFixed(2)}</p>
|
||||
</div>
|
||||
<DollarSign className="h-8 w-8 text-green-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<Card className="bg-gradient-to-r from-yellow-500 to-yellow-600 text-white">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-yellow-100 text-sm font-medium">Pending Amount</p>
|
||||
<p className="text-2xl font-bold">₹{stats.pendingAmount.toFixed(2)}</p>
|
||||
</div>
|
||||
<Calendar className="h-8 w-8 text-yellow-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<Card className="bg-gradient-to-r from-blue-500 to-blue-600 text-white">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-blue-100 text-sm font-medium">This Month</p>
|
||||
<p className="text-2xl font-bold">₹{stats.thisMonthEarnings.toFixed(2)}</p>
|
||||
</div>
|
||||
<TrendingUp className="h-8 w-8 text-blue-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
>
|
||||
<Card className="bg-gradient-to-r from-purple-500 to-purple-600 text-white">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-purple-100 text-sm font-medium">Total Commissions</p>
|
||||
<p className="text-2xl font-bold">{stats.totalCommissions}</p>
|
||||
</div>
|
||||
<Users className="h-8 w-8 text-purple-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
{/* Level Breakdown */}
|
||||
{stats && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
>
|
||||
<Card className="bg-white/80 backdrop-blur-sm shadow-xl">
|
||||
<CardHeader>
|
||||
<CardTitle>Earnings by Level</CardTitle>
|
||||
<CardDescription>Commission breakdown by referral levels</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{stats.byLevel.map((level, index) => (
|
||||
<div key={level.level} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<div>
|
||||
<p className="font-medium">Level {level.level}</p>
|
||||
<p className="text-sm text-gray-500">{level.count} commissions</p>
|
||||
</div>
|
||||
<span className="font-bold text-green-600">₹{level.amount.toFixed(2)}</span>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Commissions List */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.6 }}
|
||||
className="lg:col-span-3"
|
||||
>
|
||||
<Card className="bg-white/80 backdrop-blur-sm shadow-xl">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Commission History</CardTitle>
|
||||
<CardDescription>All your commission earnings and transactions</CardDescription>
|
||||
</div>
|
||||
<Button variant="outline" size="sm">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Export
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 pt-4">
|
||||
<Input
|
||||
placeholder="Search by name or email..."
|
||||
value={filter.search}
|
||||
onChange={(e) => setFilter(prev => ({ ...prev, search: e.target.value }))}
|
||||
/>
|
||||
|
||||
<Select value={filter.status} onValueChange={(value) => setFilter(prev => ({ ...prev, status: value }))}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Status</SelectItem>
|
||||
<SelectItem value="PENDING">Pending</SelectItem>
|
||||
<SelectItem value="APPROVED">Approved</SelectItem>
|
||||
<SelectItem value="PAID">Paid</SelectItem>
|
||||
<SelectItem value="CANCELLED">Cancelled</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={filter.type} onValueChange={(value) => setFilter(prev => ({ ...prev, type: value }))}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Types</SelectItem>
|
||||
<SelectItem value="REFERRAL">Referral</SelectItem>
|
||||
<SelectItem value="LEVEL">Level</SelectItem>
|
||||
<SelectItem value="BONUS">Bonus</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={filter.level} onValueChange={(value) => setFilter(prev => ({ ...prev, level: value }))}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Level" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Levels</SelectItem>
|
||||
<SelectItem value="1">Level 1</SelectItem>
|
||||
<SelectItem value="2">Level 2</SelectItem>
|
||||
<SelectItem value="3">Level 3</SelectItem>
|
||||
<SelectItem value="4">Level 4</SelectItem>
|
||||
<SelectItem value="5">Level 5</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
{filteredCommissions.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<DollarSign className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">No commissions found</h3>
|
||||
<p className="text-gray-500">Start referring users to earn commissions!</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{filteredCommissions.map((commission, index) => (
|
||||
<motion.div
|
||||
key={commission.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
className="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-3 mb-2">
|
||||
<Badge className={getTypeColor(commission.type)}>
|
||||
{commission.type}
|
||||
</Badge>
|
||||
<Badge variant="outline">Level {commission.level}</Badge>
|
||||
<Badge className={`${getStatusColor(commission.status)} text-white`}>
|
||||
{commission.status}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">{commission.fromUser.name}</p>
|
||||
<p className="text-sm text-gray-500">{commission.fromUser.email}</p>
|
||||
{commission.order && (
|
||||
<p className="text-xs text-gray-400">
|
||||
Order: ₹{commission.order.total.toFixed(2)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<p className="text-lg font-bold text-green-600">
|
||||
₹{commission.amount.toFixed(2)}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{new Date(commission.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
285
app/dashboard/earnings/page.tsx
Normal file
285
app/dashboard/earnings/page.tsx
Normal file
@@ -0,0 +1,285 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { DollarSign, TrendingUp, Calendar, Download } from 'lucide-react'
|
||||
import { Loading } from '@/components/ui/loading'
|
||||
|
||||
interface Commission {
|
||||
id: string
|
||||
amount: number
|
||||
level: number
|
||||
type: string
|
||||
status: string
|
||||
createdAt: string
|
||||
fromUser?: {
|
||||
name: string
|
||||
email: string
|
||||
}
|
||||
}
|
||||
|
||||
interface EarningsData {
|
||||
totalEarnings: number
|
||||
currentBalance: number
|
||||
totalWithdrawn: number
|
||||
monthlyEarnings: number
|
||||
commissions: Commission[]
|
||||
}
|
||||
|
||||
export default function EarningsPage() {
|
||||
const [earningsData, setEarningsData] = useState<EarningsData | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
fetchEarningsData()
|
||||
}, [])
|
||||
|
||||
const fetchEarningsData = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/dashboard/commissions')
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
setEarningsData({
|
||||
totalEarnings: data.totalEarnings || 0,
|
||||
currentBalance: data.currentBalance || 0,
|
||||
totalWithdrawn: data.totalWithdrawn || 0,
|
||||
monthlyEarnings: data.monthlyEarnings || 0,
|
||||
commissions: data.commissions || [],
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching earnings data:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<Loading size="lg" text="Loading earnings data..." />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900">Earnings & Reports</h1>
|
||||
<p className="text-gray-600 mt-2">Track your commission earnings and financial performance</p>
|
||||
</div>
|
||||
|
||||
{/* Earnings Stats */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Earnings</CardTitle>
|
||||
<DollarSign className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">₹{earningsData?.totalEarnings.toFixed(2) || '0.00'}</div>
|
||||
<p className="text-xs text-muted-foreground">Lifetime earnings</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Current Balance</CardTitle>
|
||||
<TrendingUp className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">₹{earningsData?.currentBalance.toFixed(2) || '0.00'}</div>
|
||||
<p className="text-xs text-muted-foreground">Available for withdrawal</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Monthly Earnings</CardTitle>
|
||||
<Calendar className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">₹{earningsData?.monthlyEarnings.toFixed(2) || '0.00'}</div>
|
||||
<p className="text-xs text-muted-foreground">This month</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Withdrawn</CardTitle>
|
||||
<Download className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">₹{earningsData?.totalWithdrawn.toFixed(2) || '0.00'}</div>
|
||||
<p className="text-xs text-muted-foreground">All time withdrawals</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="overview" className="space-y-4">
|
||||
<TabsList>
|
||||
<TabsTrigger value="overview">Overview</TabsTrigger>
|
||||
<TabsTrigger value="commissions">Commission History</TabsTrigger>
|
||||
<TabsTrigger value="payouts">Payout Requests</TabsTrigger>
|
||||
<TabsTrigger value="reports">Reports</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="overview" className="space-y-4">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Earnings Breakdown</CardTitle>
|
||||
<CardDescription>Commission distribution by level</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3, 4, 5].map((level) => {
|
||||
const percentage = level === 1 ? 40 : level === 2 ? 25 : level === 3 ? 20 : level === 4 ? 10 : 5
|
||||
const amount = (earningsData?.totalEarnings || 0) * (percentage / 100)
|
||||
return (
|
||||
<div key={level} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-sm font-medium text-blue-600">{level}</span>
|
||||
</div>
|
||||
<span className="font-medium">Level {level} Commission</span>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="font-bold">₹{amount.toFixed(2)}</div>
|
||||
<div className="text-sm text-gray-500">{percentage}%</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Quick Actions</CardTitle>
|
||||
<CardDescription>Manage your earnings</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Button className="w-full" size="lg">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Request Payout
|
||||
</Button>
|
||||
<Button variant="outline" className="w-full">
|
||||
<Calendar className="h-4 w-4 mr-2" />
|
||||
View Detailed Report
|
||||
</Button>
|
||||
<Button variant="outline" className="w-full">
|
||||
<TrendingUp className="h-4 w-4 mr-2" />
|
||||
Earnings Forecast
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="commissions" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Commission History</CardTitle>
|
||||
<CardDescription>Your recent commission earnings</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{(earningsData?.commissions || []).length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<DollarSign className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">No commissions yet</h3>
|
||||
<p className="text-gray-500">Start referring customers to earn commissions</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{(earningsData?.commissions || []).map((commission) => (
|
||||
<div key={commission.id} className="flex items-center justify-between p-4 border rounded-lg">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<DollarSign className="h-5 w-5 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">
|
||||
Level {commission.level} {commission.type} Commission
|
||||
{commission.fromUser && ` from ${commission.fromUser.name}`}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
{new Date(commission.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="font-bold text-green-600">+₹{commission.amount.toFixed(2)}</div>
|
||||
<Badge
|
||||
variant={commission.status === 'PAID' ? 'default' : 'secondary'}
|
||||
className="text-xs"
|
||||
>
|
||||
{commission.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="payouts" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Payout Requests</CardTitle>
|
||||
<CardDescription>Manage your withdrawal requests</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-center py-8">
|
||||
<Download className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">No payout requests</h3>
|
||||
<p className="text-gray-500 mb-4">Request a payout when you're ready to withdraw your earnings</p>
|
||||
<Button>
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Request Payout
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="reports" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Earnings Reports</CardTitle>
|
||||
<CardDescription>Download detailed reports of your earnings</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Button variant="outline" className="h-20 flex-col">
|
||||
<Calendar className="h-6 w-6 mb-2" />
|
||||
Monthly Report
|
||||
</Button>
|
||||
<Button variant="outline" className="h-20 flex-col">
|
||||
<TrendingUp className="h-6 w-6 mb-2" />
|
||||
Quarterly Report
|
||||
</Button>
|
||||
<Button variant="outline" className="h-20 flex-col">
|
||||
<Download className="h-6 w-6 mb-2" />
|
||||
Annual Report
|
||||
</Button>
|
||||
<Button variant="outline" className="h-20 flex-col">
|
||||
<DollarSign className="h-6 w-6 mb-2" />
|
||||
Tax Report
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
405
app/dashboard/genealogy/page.tsx
Normal file
405
app/dashboard/genealogy/page.tsx
Normal file
@@ -0,0 +1,405 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
Users,
|
||||
Search,
|
||||
ArrowLeft,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
User,
|
||||
DollarSign,
|
||||
Calendar,
|
||||
Expand,
|
||||
Minimize,
|
||||
Download,
|
||||
Eye,
|
||||
Network
|
||||
} from 'lucide-react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import Link from 'next/link'
|
||||
import { toast } from 'sonner'
|
||||
import { DashboardHeader } from '@/components/dashboard/DashboardHeader'
|
||||
|
||||
interface TeamMember {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
joinedAt: string
|
||||
totalEarnings: number
|
||||
directReferrals: number
|
||||
level: number
|
||||
children?: TeamMember[]
|
||||
isExpanded?: boolean
|
||||
isActive?: boolean
|
||||
}
|
||||
|
||||
interface GenealogyData {
|
||||
user: TeamMember
|
||||
teamSize: number
|
||||
totalVolume: number
|
||||
levels: number
|
||||
}
|
||||
|
||||
export default function GenealogyPage() {
|
||||
const [genealogyData, setGenealogyData] = useState<GenealogyData | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set())
|
||||
const [viewMode, setViewMode] = useState<'tree' | 'compact'>('tree')
|
||||
|
||||
const addToAutoExpand = useCallback((node: TeamMember, set: Set<string>, levelsLeft: number) => {
|
||||
if (levelsLeft > 0 && node.children && node.children.length > 0) {
|
||||
set.add(node.id)
|
||||
node.children.forEach(child => addToAutoExpand(child, set, levelsLeft - 1))
|
||||
}
|
||||
}, [])
|
||||
|
||||
const fetchGenealogyData = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetch('/api/dashboard/genealogy')
|
||||
if (!response.ok) throw new Error('Failed to fetch genealogy')
|
||||
const data = await response.json()
|
||||
setGenealogyData(data)
|
||||
|
||||
// Auto-expand first few levels
|
||||
const autoExpand = new Set<string>()
|
||||
addToAutoExpand(data.user, autoExpand, 2) // Expand first 2 levels
|
||||
setExpandedNodes(autoExpand)
|
||||
} catch (error) {
|
||||
console.error('Error fetching genealogy data:', error)
|
||||
toast.error('Failed to load genealogy tree')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [addToAutoExpand])
|
||||
|
||||
useEffect(() => {
|
||||
fetchGenealogyData()
|
||||
}, [fetchGenealogyData])
|
||||
|
||||
const toggleNode = (nodeId: string) => {
|
||||
const newExpanded = new Set(expandedNodes)
|
||||
if (newExpanded.has(nodeId)) {
|
||||
newExpanded.delete(nodeId)
|
||||
} else {
|
||||
newExpanded.add(nodeId)
|
||||
}
|
||||
setExpandedNodes(newExpanded)
|
||||
}
|
||||
|
||||
const expandAll = () => {
|
||||
if (!genealogyData?.user) return
|
||||
const allNodes = new Set<string>()
|
||||
const collectAllNodes = (node: TeamMember) => {
|
||||
if (node.children && node.children.length > 0) {
|
||||
allNodes.add(node.id)
|
||||
node.children.forEach(collectAllNodes)
|
||||
}
|
||||
}
|
||||
collectAllNodes(genealogyData.user)
|
||||
setExpandedNodes(allNodes)
|
||||
}
|
||||
|
||||
const collapseAll = () => {
|
||||
setExpandedNodes(new Set())
|
||||
}
|
||||
|
||||
const renderTreeNode = (member: TeamMember, depth = 0) => {
|
||||
const hasChildren = member.children && member.children.length > 0
|
||||
const isExpanded = expandedNodes.has(member.id)
|
||||
const isSearchMatch = member.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
member.email.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
|
||||
if (searchTerm && !isSearchMatch && depth > 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
const marginClass = depth === 0 ? '' :
|
||||
depth === 1 ? 'ml-8' :
|
||||
depth === 2 ? 'ml-16' :
|
||||
depth === 3 ? 'ml-24' : 'ml-32'
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={member.id}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.2, delay: depth * 0.05 }}
|
||||
className={marginClass}
|
||||
>
|
||||
<Card className={`mb-4 relative overflow-hidden ${
|
||||
isSearchMatch && searchTerm ? 'ring-2 ring-blue-500 shadow-lg' : 'shadow-md hover:shadow-lg'
|
||||
} transition-all duration-300 ${
|
||||
member.level === 0 ? 'bg-gradient-to-r from-blue-50 to-purple-50 border-blue-200' :
|
||||
member.level === 1 ? 'bg-gradient-to-r from-green-50 to-emerald-50 border-green-200' :
|
||||
member.level === 2 ? 'bg-gradient-to-r from-yellow-50 to-orange-50 border-yellow-200' :
|
||||
'bg-white/90 backdrop-blur-sm border-gray-200'
|
||||
}`}>
|
||||
|
||||
{/* Level indicator line */}
|
||||
{depth > 0 && (
|
||||
<div className="absolute -left-8 top-6 w-8 h-px bg-gray-300"></div>
|
||||
)}
|
||||
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
{hasChildren && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => toggleNode(member.id)}
|
||||
className="p-2 h-8 w-8 rounded-full hover:bg-white/80 transition-colors"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ rotate: isExpanded ? 90 : 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</motion.div>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<div className="relative">
|
||||
<div className={`w-16 h-16 rounded-full flex items-center justify-center shadow-lg ${
|
||||
member.level === 0 ? 'bg-gradient-to-r from-blue-500 to-purple-600' :
|
||||
member.level === 1 ? 'bg-gradient-to-r from-green-500 to-emerald-600' :
|
||||
member.level === 2 ? 'bg-gradient-to-r from-yellow-500 to-orange-600' :
|
||||
member.level === 3 ? 'bg-gradient-to-r from-red-500 to-pink-600' :
|
||||
'bg-gradient-to-r from-gray-400 to-gray-600'
|
||||
}`}>
|
||||
<User className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
{member.level === 0 && (
|
||||
<div className="absolute -bottom-1 -right-1 w-6 h-6 bg-yellow-400 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-bold text-yellow-900">👑</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-3 mb-2">
|
||||
<h3 className="text-lg font-bold text-gray-900">{member.name}</h3>
|
||||
{member.level > 0 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className={`text-xs font-medium ${
|
||||
member.level === 1 ? 'bg-green-100 text-green-800' :
|
||||
member.level === 2 ? 'bg-yellow-100 text-yellow-800' :
|
||||
member.level === 3 ? 'bg-red-100 text-red-800' :
|
||||
'bg-gray-100 text-gray-800'
|
||||
}`}
|
||||
>
|
||||
Level {member.level}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mb-2">{member.email}</p>
|
||||
<div className="flex items-center space-x-6 text-xs text-gray-500">
|
||||
<div className="flex items-center">
|
||||
<Calendar className="h-3 w-3 mr-1" />
|
||||
Joined {new Date(member.joinedAt).toLocaleDateString()}
|
||||
</div>
|
||||
{hasChildren && (
|
||||
<div className="flex items-center">
|
||||
<Network className="h-3 w-3 mr-1" />
|
||||
{member.children!.length} direct referrals
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-right space-y-2">
|
||||
<div className="flex items-center justify-end text-sm text-gray-600">
|
||||
<Users className="h-4 w-4 mr-2" />
|
||||
<span className="font-medium">{member.directReferrals} referrals</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-end text-lg font-bold text-green-600">
|
||||
<DollarSign className="h-5 w-5 mr-1" />
|
||||
₹{member.totalEarnings.toFixed(2)}
|
||||
</div>
|
||||
{member.level === 0 && (
|
||||
<Button size="sm" variant="outline" className="text-xs" asChild>
|
||||
<Link href={`/dashboard/profile/${member.id}`}>
|
||||
<Eye className="h-3 w-3 mr-1" />
|
||||
View Profile
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<AnimatePresence>
|
||||
{hasChildren && isExpanded && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="relative"
|
||||
>
|
||||
{/* Vertical connector line */}
|
||||
<div className="absolute left-8 top-0 bottom-0 w-px bg-gray-300"></div>
|
||||
|
||||
<div className="ml-8 space-y-2">
|
||||
{member.children!.map(child => renderTreeNode(child, depth + 1))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
|
||||
{/* Enhanced Header */}
|
||||
<DashboardHeader
|
||||
title="Team Genealogy"
|
||||
description="Visualize and manage your network structure"
|
||||
icon={<Network className="h-6 w-6 text-white" />}
|
||||
actions={
|
||||
<>
|
||||
<Button variant="outline" onClick={expandAll}>
|
||||
<Expand className="h-4 w-4 mr-2" />
|
||||
Expand All
|
||||
</Button>
|
||||
<Button variant="outline" onClick={collapseAll}>
|
||||
<Minimize className="h-4 w-4 mr-2" />
|
||||
Collapse All
|
||||
</Button>
|
||||
<Button variant="outline">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Export
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Enhanced Stats */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="grid grid-cols-1 md:grid-cols-4 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 font-medium">Total Team Size</p>
|
||||
<p className="text-3xl font-bold">{genealogyData?.teamSize || 0}</p>
|
||||
</div>
|
||||
<Users className="h-10 w-10 text-blue-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 font-medium">Network Levels</p>
|
||||
<p className="text-3xl font-bold">{genealogyData?.levels || 0}</p>
|
||||
</div>
|
||||
<Network className="h-10 w-10 text-purple-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 font-medium">Team Volume</p>
|
||||
<p className="text-2xl font-bold">₹{genealogyData?.totalVolume?.toFixed(0) || '0'}</p>
|
||||
</div>
|
||||
<DollarSign className="h-10 w-10 text-green-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 font-medium">Active Members</p>
|
||||
<p className="text-3xl font-bold">{genealogyData?.teamSize || 0}</p>
|
||||
</div>
|
||||
<User className="h-10 w-10 text-yellow-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Enhanced Search */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardContent className="p-6">
|
||||
<div className="relative max-w-md">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
|
||||
<Input
|
||||
placeholder="Search team members..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10 pr-4 py-3 text-base border-2 border-gray-200 focus:border-blue-500 rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Enhanced Genealogy Tree */}
|
||||
<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 className="border-b border-gray-100">
|
||||
<CardTitle className="text-xl font-bold flex items-center">
|
||||
<Network className="h-6 w-6 mr-3 text-blue-600" />
|
||||
Network Tree
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-8">
|
||||
{genealogyData?.user ? (
|
||||
<div className="space-y-4">
|
||||
{renderTreeNode(genealogyData.user)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-16">
|
||||
<Network className="h-16 w-16 text-gray-300 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">No team data available</h3>
|
||||
<p className="text-gray-500">Start building your network to see the genealogy tree</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
32
app/dashboard/layout.tsx
Normal file
32
app/dashboard/layout.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
'use client'
|
||||
|
||||
import { DashboardSidebar } from '@/components/dashboard/DashboardSidebar'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Suspense } from 'react'
|
||||
|
||||
interface DashboardLayoutProps {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
}
|
||||
|
||||
function DashboardLoadingFallback() {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="w-16 h-16 border-4 border-gray-200 border-t-blue-500 rounded-full animate-spin"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function DashboardLayout({ children, className }: DashboardLayoutProps) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100 flex">
|
||||
<DashboardSidebar />
|
||||
<main className={cn("flex-1 overflow-auto", className)}>
|
||||
<Suspense fallback={<DashboardLoadingFallback />}>
|
||||
{children}
|
||||
</Suspense>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
169
app/dashboard/loading.tsx
Normal file
169
app/dashboard/loading.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { TrendingUp, Users, Wallet, Target } from 'lucide-react'
|
||||
|
||||
export default function DashboardLoading() {
|
||||
return (
|
||||
<div className="min-h-[70vh] flex items-center justify-center px-4">
|
||||
<div className="text-center">
|
||||
{/* Dashboard Loading Animation */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="mb-6"
|
||||
>
|
||||
<div className="relative mx-auto w-24 h-24 mb-4">
|
||||
{/* Main circle */}
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{
|
||||
duration: 2.5,
|
||||
repeat: Infinity,
|
||||
ease: "linear"
|
||||
}}
|
||||
className="absolute inset-0 border-3 border-emerald-200 border-t-emerald-600 rounded-full"
|
||||
/>
|
||||
|
||||
{/* Secondary circle */}
|
||||
<motion.div
|
||||
animate={{ rotate: -360 }}
|
||||
transition={{
|
||||
duration: 1.8,
|
||||
repeat: Infinity,
|
||||
ease: "linear"
|
||||
}}
|
||||
className="absolute inset-2 border-2 border-blue-200 border-r-blue-500 rounded-full"
|
||||
/>
|
||||
|
||||
{/* Center icon */}
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: [1, 1.2, 1]
|
||||
}}
|
||||
transition={{
|
||||
duration: 3,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut"
|
||||
}}
|
||||
className="absolute inset-6 flex items-center justify-center bg-gradient-to-br from-emerald-50 to-blue-50 rounded-full shadow-sm"
|
||||
>
|
||||
<TrendingUp className="w-6 h-6 text-emerald-600" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Loading Text */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className="mb-4"
|
||||
>
|
||||
<div className="flex items-center justify-center space-x-2 text-emerald-600 font-semibold text-lg">
|
||||
<TrendingUp className="w-5 h-5" />
|
||||
<span>Loading Dashboard</span>
|
||||
</div>
|
||||
<p className="text-slate-500 text-sm mt-1">
|
||||
Fetching your latest data...
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Progress dots */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
className="flex justify-center space-x-2 mb-8"
|
||||
>
|
||||
{[0, 1, 2, 3, 4].map((index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="w-2 h-2 bg-emerald-500 rounded-full"
|
||||
animate={{
|
||||
scale: [1, 1.5, 1],
|
||||
opacity: [0.3, 1, 0.3]
|
||||
}}
|
||||
transition={{
|
||||
duration: 2,
|
||||
repeat: Infinity,
|
||||
delay: index * 0.15,
|
||||
ease: "easeInOut"
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* Dashboard Cards Preview */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.6 }}
|
||||
className="grid grid-cols-2 md:grid-cols-4 gap-3 max-w-md mx-auto"
|
||||
>
|
||||
{[
|
||||
{ icon: TrendingUp, label: 'Earnings', color: 'text-emerald-500' },
|
||||
{ icon: Users, label: 'Team', color: 'text-blue-500' },
|
||||
{ icon: Wallet, label: 'Wallet', color: 'text-purple-500' },
|
||||
{ icon: Target, label: 'Goals', color: 'text-orange-500' }
|
||||
].map((item, index) => {
|
||||
const IconComponent = item.icon
|
||||
return (
|
||||
<motion.div
|
||||
key={item.label}
|
||||
animate={{
|
||||
opacity: [0.4, 1, 0.4],
|
||||
scale: [0.95, 1, 0.95]
|
||||
}}
|
||||
transition={{
|
||||
duration: 2.5,
|
||||
repeat: Infinity,
|
||||
delay: index * 0.2,
|
||||
ease: "easeInOut"
|
||||
}}
|
||||
className="text-center p-3 bg-white rounded-lg shadow-sm border border-slate-100"
|
||||
>
|
||||
<IconComponent className={`w-5 h-5 ${item.color} mx-auto mb-1`} />
|
||||
<span className="text-xs text-slate-600 font-medium">{item.label}</span>
|
||||
<div className="mt-1 h-1 bg-slate-100 rounded-full overflow-hidden">
|
||||
<motion.div
|
||||
className="h-full bg-gradient-to-r from-emerald-400 to-blue-400 rounded-full"
|
||||
animate={{
|
||||
width: ['0%', '100%', '0%']
|
||||
}}
|
||||
transition={{
|
||||
duration: 3,
|
||||
repeat: Infinity,
|
||||
delay: index * 0.3,
|
||||
ease: "easeInOut"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
})}
|
||||
</motion.div>
|
||||
|
||||
{/* Loading message */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.8 }}
|
||||
className="mt-6 text-xs text-slate-400"
|
||||
>
|
||||
<motion.span
|
||||
animate={{ opacity: [0.5, 1, 0.5] }}
|
||||
transition={{
|
||||
duration: 2,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut"
|
||||
}}
|
||||
>
|
||||
Syncing your network data...
|
||||
</motion.span>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
167
app/dashboard/orders/page.tsx
Normal file
167
app/dashboard/orders/page.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Package, Eye, RefreshCw } from 'lucide-react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { toast } from 'sonner'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import { DashboardHeader } from '@/components/dashboard/DashboardHeader'
|
||||
|
||||
interface Order {
|
||||
id: string
|
||||
total: number
|
||||
status: string
|
||||
createdAt: string
|
||||
orderItems: {
|
||||
id: string
|
||||
quantity: number
|
||||
price: number
|
||||
product: {
|
||||
name: string
|
||||
images: string[]
|
||||
}
|
||||
}[]
|
||||
}
|
||||
|
||||
export default function OrdersPage() {
|
||||
const [orders, setOrders] = useState<Order[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
fetchOrders()
|
||||
}, [])
|
||||
|
||||
const fetchOrders = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/orders')
|
||||
if (!response.ok) throw new Error('Failed to fetch orders')
|
||||
const data = await response.json()
|
||||
setOrders(data)
|
||||
} catch (error) {
|
||||
console.error('Error fetching orders:', error)
|
||||
toast.error('Failed to load orders')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'PENDING': return 'bg-yellow-500'
|
||||
case 'PAID': return 'bg-blue-500'
|
||||
case 'SHIPPED': return 'bg-purple-500'
|
||||
case 'DELIVERED': return 'bg-green-500'
|
||||
case 'CANCELLED': return 'bg-red-500'
|
||||
default: return 'bg-gray-500'
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
|
||||
<DashboardHeader
|
||||
title="My Orders"
|
||||
description="Track and manage your orders"
|
||||
icon={<Package className="h-6 w-6 text-white" />}
|
||||
/>
|
||||
|
||||
{orders.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="text-center py-12">
|
||||
<Package className="h-16 w-16 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">No orders found</h3>
|
||||
<p className="text-gray-500 mb-6">You haven't placed any orders yet</p>
|
||||
<Button asChild>
|
||||
<Link href="/products">Start Shopping</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{orders.map((order, index) => (
|
||||
<motion.div
|
||||
key={order.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
>
|
||||
<Card className="shadow-lg">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-lg">Order #{order.id.slice(-8)}</CardTitle>
|
||||
<CardDescription>
|
||||
{new Date(order.createdAt).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Badge className={`${getStatusColor(order.status)} text-white`}>
|
||||
{order.status}
|
||||
</Badge>
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<Link href={`/order-confirmation?orderId=${order.id}`}>
|
||||
<Eye className="h-4 w-4 mr-2" />
|
||||
View
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-500">
|
||||
{order.orderItems.length} {order.orderItems.length === 1 ? 'item' : 'items'}
|
||||
</span>
|
||||
<span className="text-lg font-bold">₹{order.total.toFixed(2)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-3 overflow-x-auto">
|
||||
{order.orderItems.slice(0, 3).map((item, itemIndex) => (
|
||||
<div key={item.id} className="flex-shrink-0 flex items-center space-x-2">
|
||||
<Image
|
||||
src={item.product.images[0] || '/placeholder.jpg'}
|
||||
alt={item.product.name}
|
||||
width={40}
|
||||
height={40}
|
||||
className="rounded object-cover"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm font-medium truncate max-w-[100px]">
|
||||
{item.product.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">Qty: {item.quantity}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{order.orderItems.length > 3 && (
|
||||
<span className="text-sm text-gray-500 self-center">
|
||||
+{order.orderItems.length - 3} more
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
374
app/dashboard/page.tsx
Normal file
374
app/dashboard/page.tsx
Normal file
@@ -0,0 +1,374 @@
|
||||
'use client'
|
||||
|
||||
import { useSession } from 'next-auth/react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
DollarSign,
|
||||
Users,
|
||||
Package,
|
||||
TrendingUp,
|
||||
ArrowRight,
|
||||
Gift,
|
||||
Wallet,
|
||||
ShoppingCart
|
||||
} from 'lucide-react'
|
||||
import { motion } from 'framer-motion'
|
||||
import Link from 'next/link'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
interface DashboardStats {
|
||||
totalEarnings: number
|
||||
pendingCommissions: number
|
||||
totalReferrals: number
|
||||
activeReferrals: number
|
||||
currentBalance: number
|
||||
totalOrders: number
|
||||
thisMonthEarnings: number
|
||||
recentCommissions: {
|
||||
id: string
|
||||
amount: number
|
||||
level: number
|
||||
type: string
|
||||
status: string
|
||||
createdAt: string
|
||||
fromUser: {
|
||||
name: string
|
||||
email: string
|
||||
}
|
||||
}[]
|
||||
recentOrders: {
|
||||
id: string
|
||||
total: number
|
||||
status: string
|
||||
createdAt: string
|
||||
orderItems: {
|
||||
quantity: number
|
||||
product: {
|
||||
name: string
|
||||
}
|
||||
}[]
|
||||
}[]
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { data: session, status } = useSession()
|
||||
const router = useRouter()
|
||||
const [stats, setStats] = useState<DashboardStats | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const fetchDashboardStats = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetch('/api/dashboard')
|
||||
if (!response.ok) {
|
||||
if (response.status === 401) {
|
||||
router.push('/auth/signin?callbackUrl=/dashboard')
|
||||
return
|
||||
}
|
||||
throw new Error('Failed to fetch dashboard stats')
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
setStats(data.stats)
|
||||
} catch (error) {
|
||||
console.error('Error fetching dashboard stats:', error)
|
||||
toast.error('Failed to load dashboard data')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [router])
|
||||
|
||||
useEffect(() => {
|
||||
if (status === 'unauthenticated') {
|
||||
router.push('/auth/signin?callbackUrl=/dashboard')
|
||||
return
|
||||
}
|
||||
|
||||
if (status === 'authenticated') {
|
||||
fetchDashboardStats()
|
||||
}
|
||||
}, [status, router, fetchDashboardStats])
|
||||
|
||||
// Show loading spinner while checking authentication
|
||||
if (status === 'loading' || 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>
|
||||
)
|
||||
}
|
||||
|
||||
// Redirect handled in useEffect, show nothing while redirecting
|
||||
if (status === 'unauthenticated') {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100">
|
||||
<div className="max-w-7xl 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="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6"
|
||||
>
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
|
||||
Welcome back, {session?.user?.name}!
|
||||
</h1>
|
||||
<p className="text-gray-600 mt-2">Here's your dashboard overview</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button asChild>
|
||||
<Link href="/products">
|
||||
<ShoppingCart className="h-4 w-4 mr-2" />
|
||||
Shop Now
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
{stats && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
>
|
||||
<Card className="bg-gradient-to-r from-green-500 to-green-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">Total Earnings</p>
|
||||
<p className="text-2xl font-bold">₹{stats.totalEarnings.toFixed(2)}</p>
|
||||
<p className="text-green-100 text-xs mt-1">
|
||||
₹{stats.thisMonthEarnings.toFixed(2)} this month
|
||||
</p>
|
||||
</div>
|
||||
<DollarSign className="h-8 w-8 text-green-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<Card className="bg-gradient-to-r from-blue-500 to-blue-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">Current Balance</p>
|
||||
<p className="text-2xl font-bold">₹{stats.currentBalance.toFixed(2)}</p>
|
||||
<p className="text-blue-100 text-xs mt-1">
|
||||
₹{stats.pendingCommissions.toFixed(2)} pending
|
||||
</p>
|
||||
</div>
|
||||
<Wallet className="h-8 w-8 text-blue-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<Card className="bg-gradient-to-r from-purple-500 to-purple-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 Referrals</p>
|
||||
<p className="text-2xl font-bold">{stats.totalReferrals}</p>
|
||||
<p className="text-purple-100 text-xs mt-1">
|
||||
{stats.activeReferrals} active
|
||||
</p>
|
||||
</div>
|
||||
<Users className="h-8 w-8 text-purple-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
>
|
||||
<Card className="bg-gradient-to-r from-orange-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-orange-100 text-sm">Total Orders</p>
|
||||
<p className="text-2xl font-bold">{stats.totalOrders}</p>
|
||||
<p className="text-orange-100 text-xs mt-1">Your purchases</p>
|
||||
</div>
|
||||
<Package className="h-8 w-8 text-orange-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quick Actions */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
className="grid grid-cols-1 md:grid-cols-3 gap-6"
|
||||
>
|
||||
<Link href="/dashboard/commissions">
|
||||
<Card className="hover:shadow-lg transition-shadow cursor-pointer">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="p-3 bg-green-100 rounded-lg">
|
||||
<DollarSign className="h-6 w-6 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold">View Commissions</h3>
|
||||
<p className="text-sm text-gray-500">Track your earnings</p>
|
||||
</div>
|
||||
<ArrowRight className="h-5 w-5 text-gray-400 ml-auto" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
|
||||
<Link href="/dashboard/referrals">
|
||||
<Card className="hover:shadow-lg transition-shadow cursor-pointer">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="p-3 bg-blue-100 rounded-lg">
|
||||
<Users className="h-6 w-6 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold">My Referrals</h3>
|
||||
<p className="text-sm text-gray-500">Manage your network</p>
|
||||
</div>
|
||||
<ArrowRight className="h-5 w-5 text-gray-400 ml-auto" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
|
||||
<Link href="/dashboard/payouts">
|
||||
<Card className="hover:shadow-lg transition-shadow cursor-pointer">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="p-3 bg-purple-100 rounded-lg">
|
||||
<Wallet className="h-6 w-6 text-purple-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold">Request Payout</h3>
|
||||
<p className="text-sm text-gray-500">Withdraw earnings</p>
|
||||
</div>
|
||||
<ArrowRight className="h-5 w-5 text-gray-400 ml-auto" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
{/* Recent Activity */}
|
||||
{stats && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{/* Recent Commissions */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.6 }}
|
||||
>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>Recent Commissions</CardTitle>
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<Link href="/dashboard/commissions">View All</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{stats.recentCommissions.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<Gift className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||||
<p className="text-gray-500">No commissions yet</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{stats.recentCommissions.slice(0, 5).map((commission) => (
|
||||
<div key={commission.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<div>
|
||||
<p className="font-medium">₹{commission.amount.toFixed(2)}</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
From {commission.fromUser.name} • Level {commission.level}
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant={commission.status === 'PAID' ? 'default' : 'secondary'}>
|
||||
{commission.status}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Recent Orders */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.7 }}
|
||||
>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>Recent Orders</CardTitle>
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<Link href="/dashboard/orders">View All</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{stats.recentOrders.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<Package className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||||
<p className="text-gray-500">No orders yet</p>
|
||||
<Button className="mt-4" asChild>
|
||||
<Link href="/products">Start Shopping</Link>
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{stats.recentOrders.slice(0, 5).map((order) => (
|
||||
<div key={order.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<div>
|
||||
<p className="font-medium">₹{order.total.toFixed(2)}</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
{order.orderItems.length} items • {new Date(order.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant={order.status === 'DELIVERED' ? 'default' : 'secondary'}>
|
||||
{order.status}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
263
app/dashboard/payouts/page.tsx
Normal file
263
app/dashboard/payouts/page.tsx
Normal file
@@ -0,0 +1,263 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Card, CardContent, CardDescription, 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 { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
||||
import { DollarSign, Download, Clock, CheckCircle, XCircle } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { Loading } from '@/components/ui/loading'
|
||||
|
||||
interface Payout {
|
||||
id: string
|
||||
amount: number
|
||||
status: string
|
||||
bankDetails: string
|
||||
adminNotes?: string
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
export default function PayoutsPage() {
|
||||
const [payouts, setPayouts] = useState<Payout[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [requesting, setRequesting] = useState(false)
|
||||
const [amount, setAmount] = useState('')
|
||||
const [bankDetails, setBankDetails] = useState('')
|
||||
const [currentBalance, setCurrentBalance] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
fetchPayouts()
|
||||
fetchBalance()
|
||||
}, [])
|
||||
|
||||
const fetchPayouts = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/payouts')
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
setPayouts(data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching payouts:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchBalance = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/dashboard')
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
setCurrentBalance(data.stats.currentBalance)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching balance:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRequestPayout = async () => {
|
||||
if (!amount || !bankDetails) {
|
||||
toast.error('Please fill in all fields')
|
||||
return
|
||||
}
|
||||
|
||||
const payoutAmount = parseFloat(amount)
|
||||
if (payoutAmount <= 0 || payoutAmount > currentBalance) {
|
||||
toast.error('Invalid payout amount')
|
||||
return
|
||||
}
|
||||
|
||||
setRequesting(true)
|
||||
try {
|
||||
const response = await fetch('/api/payouts', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
amount: payoutAmount,
|
||||
bankDetails,
|
||||
}),
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
toast.success('Payout request submitted successfully')
|
||||
setAmount('')
|
||||
setBankDetails('')
|
||||
fetchPayouts()
|
||||
fetchBalance()
|
||||
} else {
|
||||
const error = await response.json()
|
||||
toast.error(error.error || 'Failed to submit payout request')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error requesting payout:', error)
|
||||
toast.error('Something went wrong')
|
||||
} finally {
|
||||
setRequesting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case 'PENDING':
|
||||
return <Clock className="h-4 w-4 text-yellow-500" />
|
||||
case 'APPROVED':
|
||||
return <CheckCircle className="h-4 w-4 text-green-500" />
|
||||
case 'REJECTED':
|
||||
return <XCircle className="h-4 w-4 text-red-500" />
|
||||
case 'PAID':
|
||||
return <CheckCircle className="h-4 w-4 text-blue-500" />
|
||||
default:
|
||||
return <Clock className="h-4 w-4 text-gray-500" />
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'PENDING':
|
||||
return 'bg-yellow-100 text-yellow-800'
|
||||
case 'APPROVED':
|
||||
return 'bg-green-100 text-green-800'
|
||||
case 'REJECTED':
|
||||
return 'bg-red-100 text-red-800'
|
||||
case 'PAID':
|
||||
return 'bg-blue-100 text-blue-800'
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800'
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900">Payout Management</h1>
|
||||
<p className="text-gray-600 mt-2">Request withdrawals and track your payout history</p>
|
||||
</div>
|
||||
|
||||
{/* Balance Card */}
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
Available Balance
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button>
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Request Payout
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Request Payout</DialogTitle>
|
||||
<DialogDescription>
|
||||
Enter the amount you want to withdraw and your bank details
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="amount">Amount (₹)</Label>
|
||||
<Input
|
||||
id="amount"
|
||||
type="number"
|
||||
placeholder="Enter amount"
|
||||
value={amount}
|
||||
onChange={(e) => setAmount(e.target.value)}
|
||||
max={currentBalance}
|
||||
/>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Available: ₹{currentBalance.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="bankDetails">Bank Details</Label>
|
||||
<Textarea
|
||||
id="bankDetails"
|
||||
placeholder="Enter your bank account details (Account number, IFSC code, etc.)"
|
||||
value={bankDetails}
|
||||
onChange={(e) => setBankDetails(e.target.value)}
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleRequestPayout}
|
||||
disabled={requesting}
|
||||
className="w-full"
|
||||
>
|
||||
{requesting ? 'Submitting...' : 'Submit Request'}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold text-green-600">₹{currentBalance.toFixed(2)}</div>
|
||||
<p className="text-gray-500">Ready for withdrawal</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Payout History */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Payout History</CardTitle>
|
||||
<CardDescription>Track all your withdrawal requests</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{payouts.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<DollarSign className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">No payout requests yet</h3>
|
||||
<p className="text-gray-500">Your payout requests will appear here</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{payouts.map((payout) => (
|
||||
<div key={payout.id} className="flex items-center justify-between p-4 border rounded-lg">
|
||||
<div className="flex items-center space-x-3">
|
||||
{getStatusIcon(payout.status)}
|
||||
<div>
|
||||
<p className="font-medium">₹{payout.amount.toFixed(2)}</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
Requested on {new Date(payout.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
{payout.adminNotes && (
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
Note: {payout.adminNotes}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<Badge className={getStatusColor(payout.status)}>
|
||||
{payout.status}
|
||||
</Badge>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
Updated {new Date(payout.updatedAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
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>
|
||||
)
|
||||
}
|
||||
401
app/dashboard/referrals/page.tsx
Normal file
401
app/dashboard/referrals/page.tsx
Normal file
@@ -0,0 +1,401 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import {
|
||||
Gift,
|
||||
Users,
|
||||
DollarSign,
|
||||
Calendar,
|
||||
Search,
|
||||
Copy,
|
||||
Share2,
|
||||
Mail,
|
||||
Phone,
|
||||
TrendingUp,
|
||||
User,
|
||||
Plus
|
||||
} from 'lucide-react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { toast } from 'sonner'
|
||||
import { DashboardHeader } from '@/components/dashboard/DashboardHeader'
|
||||
|
||||
interface Referral {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
phone?: string
|
||||
joinedAt: string
|
||||
isActive: boolean
|
||||
totalOrders: number
|
||||
totalSpent: number
|
||||
commissionEarned: number
|
||||
status: 'ACTIVE' | 'INACTIVE' | 'PENDING'
|
||||
}
|
||||
|
||||
interface ReferralStats {
|
||||
totalReferrals: number
|
||||
activeReferrals: number
|
||||
pendingReferrals: number
|
||||
totalCommissionEarned: number
|
||||
thisMonthReferrals: number
|
||||
thisMonthCommission: number
|
||||
}
|
||||
|
||||
export default function ReferralsPage() {
|
||||
const [referrals, setReferrals] = useState<Referral[]>([])
|
||||
const [stats, setStats] = useState<ReferralStats | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [referralCode, setReferralCode] = useState('')
|
||||
|
||||
const fetchReferrals = useCallback(async () => {
|
||||
try {
|
||||
const [referralsRes, statsRes, userRes] = await Promise.all([
|
||||
fetch('/api/dashboard/referrals'),
|
||||
fetch('/api/dashboard/referrals/stats'),
|
||||
fetch('/api/user/profile')
|
||||
])
|
||||
|
||||
const [referralsData, statsData, userData] = await Promise.all([
|
||||
referralsRes.json(),
|
||||
statsRes.json(),
|
||||
userRes.json()
|
||||
])
|
||||
|
||||
setReferrals(referralsData.referrals || [])
|
||||
setStats(statsData)
|
||||
setReferralCode(userData.referralCode)
|
||||
} catch (error) {
|
||||
console.error('Error fetching referrals:', error)
|
||||
toast.error('Failed to load referrals data')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchReferrals()
|
||||
}, [fetchReferrals])
|
||||
|
||||
const filteredReferrals = referrals.filter(referral =>
|
||||
referral.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
referral.email.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
)
|
||||
|
||||
const copyReferralLink = () => {
|
||||
const referralLink = `${window.location.origin}/auth/signup?ref=${referralCode}`
|
||||
navigator.clipboard.writeText(referralLink)
|
||||
toast.success('Referral link copied to clipboard!')
|
||||
}
|
||||
|
||||
const shareReferralLink = () => {
|
||||
const referralLink = `${window.location.origin}/auth/signup?ref=${referralCode}`
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
title: 'Join Padmaaja Rasooi',
|
||||
text: 'Join my team at Padmaaja Rasooi and start your rice business!',
|
||||
url: referralLink
|
||||
})
|
||||
} else {
|
||||
copyReferralLink()
|
||||
}
|
||||
}
|
||||
|
||||
const inviteViaEmail = () => {
|
||||
const referralLink = `${window.location.origin}/auth/signup?ref=${referralCode}`
|
||||
const subject = 'Join Padmaaja Rasooi Rice Business Partnership!'
|
||||
const body = `Hi there!\n\nI'd like to invite you to join Padmaaja Rasooi, a premium rice products business where you can earn through our partnership program.\n\nClick here to join: ${referralLink}\n\nBest regards!`
|
||||
|
||||
window.location.href = `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="w-16 h-16 border-4 border-gray-200 border-t-blue-500 rounded-full animate-spin"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-3 sm:p-6 space-y-4 sm:space-y-8">
|
||||
{/* Header */}
|
||||
<DashboardHeader
|
||||
title="My Referrals"
|
||||
description="Manage your direct referrals and track commissions"
|
||||
icon={<Gift className="h-6 w-6 text-white" />}
|
||||
actions={
|
||||
<Button onClick={inviteViaEmail} size="sm" className="text-xs sm:text-sm">
|
||||
<Plus className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2" />
|
||||
<span className="hidden sm:inline">Invite Friends</span>
|
||||
<span className="sm:hidden">Invite</span>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Stats Cards - Mobile Responsive Grid */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6"
|
||||
>
|
||||
<Card className="bg-gradient-to-r from-blue-500 to-indigo-600 text-white border-0 shadow-lg">
|
||||
<CardContent className="p-3 sm:p-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="mb-2 sm:mb-0">
|
||||
<p className="text-blue-100 text-xs sm:text-sm">Total Referrals</p>
|
||||
<p className="text-xl sm:text-3xl font-bold">{stats?.totalReferrals || 0}</p>
|
||||
<p className="text-blue-100 text-xs mt-1">
|
||||
{stats?.thisMonthReferrals || 0} this month
|
||||
</p>
|
||||
</div>
|
||||
<Users className="h-6 w-6 sm:h-10 sm:w-10 text-blue-200 self-end sm:self-auto" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gradient-to-r from-green-500 to-emerald-600 text-white border-0 shadow-lg">
|
||||
<CardContent className="p-3 sm:p-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="mb-2 sm:mb-0">
|
||||
<p className="text-green-100 text-xs sm:text-sm">Active Referrals</p>
|
||||
<p className="text-xl sm:text-3xl font-bold">{stats?.activeReferrals || 0}</p>
|
||||
<p className="text-green-100 text-xs mt-1">
|
||||
{stats?.pendingReferrals || 0} pending
|
||||
</p>
|
||||
</div>
|
||||
<TrendingUp className="h-6 w-6 sm:h-10 sm:w-10 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-3 sm:p-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="mb-2 sm:mb-0">
|
||||
<p className="text-purple-100 text-xs sm:text-sm">Total Commission</p>
|
||||
<p className="text-xl sm:text-3xl font-bold">₹{(stats?.totalCommissionEarned || 0).toFixed(0)}</p>
|
||||
<p className="text-purple-100 text-xs mt-1">
|
||||
₹{(stats?.thisMonthCommission || 0).toFixed(0)} this month
|
||||
</p>
|
||||
</div>
|
||||
<DollarSign className="h-6 w-6 sm:h-10 sm:w-10 text-purple-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gradient-to-r from-orange-500 to-red-600 text-white border-0 shadow-lg">
|
||||
<CardContent className="p-3 sm:p-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="mb-2 sm:mb-0">
|
||||
<p className="text-orange-100 text-xs sm:text-sm">Avg. Commission</p>
|
||||
<p className="text-xl sm:text-3xl font-bold">
|
||||
₹{stats?.totalReferrals ? ((stats?.totalCommissionEarned || 0) / stats.totalReferrals).toFixed(0) : '0'}
|
||||
</p>
|
||||
<p className="text-orange-100 text-xs mt-1">Per referral</p>
|
||||
</div>
|
||||
<Gift className="h-6 w-6 sm:h-10 sm:w-10 text-orange-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Referral Link Section - Mobile Optimized */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<Card className="bg-gradient-to-r from-blue-500 to-purple-600 text-white border-0 shadow-lg">
|
||||
<CardContent className="p-4 sm:p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-lg sm:text-xl font-bold mb-2">Your Referral Link</h3>
|
||||
<p className="text-blue-100 text-sm sm:text-base">Share this link to invite friends and earn commissions</p>
|
||||
<div className="bg-white/20 px-3 sm:px-4 py-2 rounded-lg backdrop-blur-sm mt-3 overflow-hidden">
|
||||
<code className="text-xs sm:text-sm break-all">
|
||||
{`${typeof window !== 'undefined' ? window.location.origin : ''}/auth/signup?ref=${referralCode}`}
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2 sm:flex sm:flex-row sm:items-center sm:gap-3">
|
||||
<Button variant="secondary" onClick={copyReferralLink} size="sm" className="text-xs">
|
||||
<Copy className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2" />
|
||||
<span className="hidden sm:inline">Copy Link</span>
|
||||
<span className="sm:hidden">Copy</span>
|
||||
</Button>
|
||||
<Button variant="secondary" onClick={shareReferralLink} size="sm" className="text-xs">
|
||||
<Share2 className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2" />
|
||||
<span className="hidden sm:inline">Share</span>
|
||||
<span className="sm:hidden">Share</span>
|
||||
</Button>
|
||||
<Button variant="secondary" onClick={inviteViaEmail} size="sm" className="text-xs">
|
||||
<Mail className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2" />
|
||||
<span className="hidden sm:inline">Email Invite</span>
|
||||
<span className="sm:hidden">Email</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Referrals Management - Mobile Tabs */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<Tabs defaultValue="all" className="space-y-4 sm:space-y-6">
|
||||
<div className="flex flex-col space-y-3 sm:space-y-0 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
|
||||
<TabsList className="grid w-full grid-cols-3 sm:w-auto">
|
||||
<TabsTrigger value="all" className="text-xs sm:text-sm">All</TabsTrigger>
|
||||
<TabsTrigger value="active" className="text-xs sm:text-sm">Active</TabsTrigger>
|
||||
<TabsTrigger value="pending" className="text-xs sm:text-sm">Pending</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<div className="relative w-full sm:max-w-md">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
||||
<Input
|
||||
placeholder="Search referrals..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TabsContent value="all">
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardHeader className="pb-3 sm:pb-6">
|
||||
<CardTitle className="text-lg sm:text-xl">All Referrals ({filteredReferrals.length})</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{filteredReferrals.length > 0 ? (
|
||||
<div className="space-y-3 sm:space-y-4">
|
||||
{filteredReferrals.map((referral) => (
|
||||
<div key={referral.id} className="flex flex-col sm:flex-row sm:items-center sm:justify-between p-3 sm:p-4 bg-gradient-to-r from-gray-50 to-white rounded-lg border hover:shadow-md transition-shadow space-y-3 sm:space-y-0">
|
||||
<div className="flex items-center space-x-3 sm:space-x-4">
|
||||
<div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<User className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h4 className="font-semibold text-gray-900 text-sm sm:text-base truncate">{referral.name}</h4>
|
||||
<p className="text-xs sm:text-sm text-gray-500 truncate">{referral.email}</p>
|
||||
{referral.phone && (
|
||||
<p className="text-xs text-gray-400 flex items-center mt-1">
|
||||
<Phone className="h-3 w-3 mr-1 flex-shrink-0" />
|
||||
<span className="truncate">{referral.phone}</span>
|
||||
</p>
|
||||
)}
|
||||
<div className="flex flex-wrap items-center gap-2 mt-2">
|
||||
<div className="flex items-center text-xs text-gray-400">
|
||||
<Calendar className="h-3 w-3 mr-1" />
|
||||
<span className="whitespace-nowrap">Joined {new Date(referral.joinedAt).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<Badge variant={referral.isActive ? 'default' : 'secondary'} className="text-xs">
|
||||
{referral.isActive ? 'Active' : 'Inactive'}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2 sm:gap-4 text-center">
|
||||
<div>
|
||||
<p className="text-xs font-medium text-gray-600">Orders</p>
|
||||
<p className="text-sm sm:text-lg font-bold text-blue-600">{referral.totalOrders}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-medium text-gray-600">Spent</p>
|
||||
<p className="text-sm sm:text-lg font-bold text-green-600">₹{referral.totalSpent.toFixed(0)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-medium text-gray-600">Commission</p>
|
||||
<p className="text-sm sm:text-lg font-bold text-purple-600">₹{referral.commissionEarned.toFixed(2)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<Gift className="h-16 w-16 text-gray-300 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">No referrals yet</h3>
|
||||
<p className="text-gray-500 mb-4">Start inviting friends to build your network</p>
|
||||
<Button onClick={inviteViaEmail}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Invite Your First Referral
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="active">
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardHeader className="pb-3 sm:pb-6">
|
||||
<CardTitle className="text-lg sm:text-xl">Active Referrals ({filteredReferrals.filter(r => r.isActive).length})</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3 sm:space-y-4">
|
||||
{filteredReferrals.filter(r => r.isActive).map((referral) => (
|
||||
<div key={referral.id} className="flex flex-col sm:flex-row sm:items-center sm:justify-between p-3 sm:p-4 bg-gradient-to-r from-green-50 to-white rounded-lg border">
|
||||
<div className="flex items-center space-x-3 sm:space-x-4">
|
||||
<div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-r from-green-500 to-emerald-600 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<User className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h4 className="font-semibold text-gray-900 text-sm sm:text-base truncate">{referral.name}</h4>
|
||||
<p className="text-xs sm:text-sm text-gray-500 truncate">{referral.email}</p>
|
||||
<Badge variant="default" className="mt-2 text-xs">Active</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm sm:text-lg font-bold text-green-600">₹{referral.commissionEarned.toFixed(2)}</p>
|
||||
<p className="text-xs text-gray-500">Commission earned</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="pending">
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardHeader className="pb-3 sm:pb-6">
|
||||
<CardTitle className="text-lg sm:text-xl">Pending Referrals ({filteredReferrals.filter(r => !r.isActive).length})</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3 sm:space-y-4">
|
||||
{filteredReferrals.filter(r => !r.isActive).map((referral) => (
|
||||
<div key={referral.id} className="flex flex-col sm:flex-row sm:items-center sm:justify-between p-3 sm:p-4 bg-gradient-to-r from-yellow-50 to-white rounded-lg border">
|
||||
<div className="flex items-center space-x-3 sm:space-x-4">
|
||||
<div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-r from-yellow-500 to-orange-600 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<User className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h4 className="font-semibold text-gray-900 text-sm sm:text-base truncate">{referral.name}</h4>
|
||||
<p className="text-xs sm:text-sm text-gray-500 truncate">{referral.email}</p>
|
||||
<Badge variant="secondary" className="mt-2 text-xs">Pending</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</motion.div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
354
app/dashboard/reports/page.tsx
Normal file
354
app/dashboard/reports/page.tsx
Normal file
@@ -0,0 +1,354 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Download,
|
||||
Calendar,
|
||||
DollarSign,
|
||||
TrendingUp,
|
||||
Users,
|
||||
BarChart3,
|
||||
FileText,
|
||||
Filter
|
||||
} from 'lucide-react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { toast } from 'sonner'
|
||||
import Link from 'next/link'
|
||||
import { DashboardHeader } from '@/components/dashboard/DashboardHeader'
|
||||
|
||||
interface ReportData {
|
||||
commissions: {
|
||||
total: number
|
||||
thisMonth: number
|
||||
lastMonth: number
|
||||
growth: number
|
||||
byLevel: { level: number; amount: number; count: number }[]
|
||||
recent: {
|
||||
id: string
|
||||
amount: number
|
||||
level: number
|
||||
type: string
|
||||
status: string
|
||||
createdAt: string
|
||||
fromUser: { name: string; email: string }
|
||||
}[]
|
||||
}
|
||||
team: {
|
||||
totalMembers: number
|
||||
activeMembers: number
|
||||
newThisMonth: number
|
||||
byLevel: { level: number; count: number }[]
|
||||
}
|
||||
sales: {
|
||||
totalVolume: number
|
||||
personalVolume: number
|
||||
teamVolume: number
|
||||
ordersCount: number
|
||||
}
|
||||
}
|
||||
|
||||
export default function ReportsPage() {
|
||||
const [reportData, setReportData] = useState<ReportData | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [dateRange, setDateRange] = useState('30')
|
||||
const [reportType, setReportType] = useState('all')
|
||||
|
||||
const fetchReportData = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await fetch(`/api/dashboard/reports?range=${dateRange}&type=${reportType}`)
|
||||
const data = await response.json()
|
||||
setReportData(data)
|
||||
} catch (error) {
|
||||
console.error('Error fetching report data:', error)
|
||||
toast.error('Failed to load report data')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [dateRange, reportType])
|
||||
|
||||
useEffect(() => {
|
||||
fetchReportData()
|
||||
}, [fetchReportData])
|
||||
|
||||
const downloadReport = async (type: 'pdf' | 'excel') => {
|
||||
try {
|
||||
const response = await fetch(`/api/dashboard/reports/download?type=${type}&range=${dateRange}`)
|
||||
const blob = await response.blob()
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `report-${Date.now()}.${type === 'pdf' ? 'pdf' : 'xlsx'}`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
window.URL.revokeObjectURL(url)
|
||||
document.body.removeChild(a)
|
||||
toast.success(`${type.toUpperCase()} report downloaded successfully`)
|
||||
} catch (error) {
|
||||
toast.error('Failed to download report')
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
|
||||
{/* Header */}
|
||||
<DashboardHeader
|
||||
title="Reports & Analytics"
|
||||
description="Track your performance and download detailed reports"
|
||||
icon={<BarChart3 className="h-6 w-6 text-white" />}
|
||||
actions={
|
||||
<>
|
||||
<Select value={dateRange} onValueChange={setDateRange}>
|
||||
<SelectTrigger className="w-40">
|
||||
<SelectValue placeholder="Date Range" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="7">Last 7 days</SelectItem>
|
||||
<SelectItem value="30">Last 30 days</SelectItem>
|
||||
<SelectItem value="90">Last 3 months</SelectItem>
|
||||
<SelectItem value="365">Last year</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Button variant="outline" onClick={() => downloadReport('excel')}>
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Export Excel
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" onClick={() => downloadReport('pdf')}>
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Export PDF
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Summary Cards */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
|
||||
>
|
||||
<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">Total Commissions</p>
|
||||
<p className="text-3xl font-bold">₹{reportData?.commissions.total.toFixed(2) || '0.00'}</p>
|
||||
<p className="text-green-100 text-xs mt-1">
|
||||
{(reportData?.commissions.growth || 0) > 0 ? '+' : ''}{(reportData?.commissions.growth || 0).toFixed(1)}% from last period
|
||||
</p>
|
||||
</div>
|
||||
<DollarSign className="h-10 w-10 text-green-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<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">Team Members</p>
|
||||
<p className="text-3xl font-bold">{reportData?.team.totalMembers || 0}</p>
|
||||
<p className="text-blue-100 text-xs mt-1">
|
||||
{reportData?.team.newThisMonth || 0} new this month
|
||||
</p>
|
||||
</div>
|
||||
<Users className="h-10 w-10 text-blue-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 Volume</p>
|
||||
<p className="text-3xl font-bold">₹{(reportData?.sales.totalVolume || 0).toFixed(0)}</p>
|
||||
<p className="text-purple-100 text-xs mt-1">
|
||||
{reportData?.sales.ordersCount || 0} orders
|
||||
</p>
|
||||
</div>
|
||||
<TrendingUp className="h-10 w-10 text-purple-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gradient-to-r from-orange-500 to-red-600 text-white border-0 shadow-lg">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-orange-100 text-sm">Active Members</p>
|
||||
<p className="text-3xl font-bold">{reportData?.team.activeMembers || 0}</p>
|
||||
<p className="text-orange-100 text-xs mt-1">
|
||||
{((reportData?.team.activeMembers || 0) / Math.max(reportData?.team.totalMembers || 1, 1) * 100).toFixed(1)}% active rate
|
||||
</p>
|
||||
</div>
|
||||
<BarChart3 className="h-10 w-10 text-orange-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Detailed Reports */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<Tabs defaultValue="commissions" className="space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="commissions">Commission Analysis</TabsTrigger>
|
||||
<TabsTrigger value="team">Team Performance</TabsTrigger>
|
||||
<TabsTrigger value="sales">Sales Reports</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="commissions">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle>Commission by Level</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{(reportData?.commissions.byLevel || []).map((levelData) => (
|
||||
<div key={levelData.level} 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 {levelData.level}</p>
|
||||
<p className="text-sm text-gray-500">{levelData.count} commissions</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-bold text-green-600">₹{levelData.amount.toFixed(2)}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle>Recent Commissions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{(reportData?.commissions.recent || []).slice(0, 5).map((commission) => (
|
||||
<div key={commission.id} className="flex items-center justify-between p-3 bg-gradient-to-r from-green-50 to-white rounded-lg border">
|
||||
<div>
|
||||
<p className="font-medium text-sm">Level {commission.level}</p>
|
||||
<p className="text-xs text-gray-500">{commission.fromUser.name}</p>
|
||||
<p className="text-xs text-gray-400">{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'} className="text-xs">
|
||||
{commission.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="team">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle>Team Distribution by Level</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{(reportData?.team.byLevel || []).map((levelData) => (
|
||||
<div key={levelData.level} className="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-white rounded-lg border">
|
||||
<div>
|
||||
<p className="font-medium">Level {levelData.level}</p>
|
||||
<p className="text-sm text-gray-500">Direct referrals</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-bold text-blue-600">{levelData.count} members</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle>Team Growth Metrics</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex justify-between items-center p-4 bg-gradient-to-r from-purple-50 to-white rounded-lg border">
|
||||
<span className="text-gray-600">Total Team Size</span>
|
||||
<span className="font-bold text-purple-600">{reportData?.team.totalMembers || 0}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center p-4 bg-gradient-to-r from-green-50 to-white rounded-lg border">
|
||||
<span className="text-gray-600">Active Members</span>
|
||||
<span className="font-bold text-green-600">{reportData?.team.activeMembers || 0}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center p-4 bg-gradient-to-r from-blue-50 to-white rounded-lg border">
|
||||
<span className="text-gray-600">New This Month</span>
|
||||
<span className="font-bold text-blue-600">{reportData?.team.newThisMonth || 0}</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="sales">
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle>Sales Performance</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="text-center p-6 bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg border">
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Personal Volume</h3>
|
||||
<p className="text-3xl font-bold text-green-600">₹{(reportData?.sales.personalVolume || 0).toFixed(2)}</p>
|
||||
<p className="text-sm text-gray-500 mt-1">Your direct sales</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border">
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Team Volume</h3>
|
||||
<p className="text-3xl font-bold text-blue-600">₹{(reportData?.sales.teamVolume || 0).toFixed(2)}</p>
|
||||
<p className="text-sm text-gray-500 mt-1">Team sales volume</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-6 bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg border">
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Total Orders</h3>
|
||||
<p className="text-3xl font-bold text-purple-600">{reportData?.sales.ordersCount || 0}</p>
|
||||
<p className="text-sm text-gray-500 mt-1">Orders processed</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
451
app/dashboard/team/page.tsx
Normal file
451
app/dashboard/team/page.tsx
Normal file
@@ -0,0 +1,451 @@
|
||||
'use client'
|
||||
|
||||
import { useSession } from 'next-auth/react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { Users, Copy, QrCode, TrendingUp, Calendar, Share2, Download, Mail, MessageCircle } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { motion } from 'framer-motion'
|
||||
import QRCodeLib from 'qrcode'
|
||||
import Image from 'next/image'
|
||||
|
||||
interface TeamMember {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
role: string
|
||||
joinedAt: string
|
||||
referrals: TeamMember[]
|
||||
}
|
||||
|
||||
interface TeamStats {
|
||||
totalTeamSize: number
|
||||
levels: Array<{
|
||||
level: number
|
||||
count: number
|
||||
}>
|
||||
}
|
||||
|
||||
interface TeamData {
|
||||
directReferrals: TeamMember[]
|
||||
teamStats: TeamStats
|
||||
}
|
||||
|
||||
export default function TeamPage() {
|
||||
const { data: session } = useSession()
|
||||
const [teamData, setTeamData] = useState<TeamData | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [qrCodeUrl, setQrCodeUrl] = useState<string>('')
|
||||
const [generatingQR, setGeneratingQR] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
fetchTeamData()
|
||||
}, [])
|
||||
|
||||
const fetchTeamData = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/dashboard/team')
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
setTeamData(data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching team data:', error)
|
||||
toast.error('Failed to load team data')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const getReferralLink = () => {
|
||||
return `${window.location.origin}/auth/signup?ref=${session?.user?.referralCode}`
|
||||
}
|
||||
|
||||
const copyReferralLink = () => {
|
||||
if (session?.user?.referralCode) {
|
||||
navigator.clipboard.writeText(getReferralLink())
|
||||
toast.success('Referral link copied to clipboard!')
|
||||
}
|
||||
}
|
||||
|
||||
const generateQRCode = async () => {
|
||||
if (!session?.user?.referralCode) return
|
||||
|
||||
setGeneratingQR(true)
|
||||
try {
|
||||
const url = await QRCodeLib.toDataURL(getReferralLink(), {
|
||||
width: 200,
|
||||
margin: 2,
|
||||
color: {
|
||||
dark: '#1f2937',
|
||||
light: '#ffffff'
|
||||
}
|
||||
})
|
||||
setQrCodeUrl(url)
|
||||
toast.success('QR code generated successfully!')
|
||||
} catch (error) {
|
||||
console.error('Error generating QR code:', error)
|
||||
toast.error('Failed to generate QR code')
|
||||
} finally {
|
||||
setGeneratingQR(false)
|
||||
}
|
||||
}
|
||||
|
||||
const downloadQRCode = () => {
|
||||
if (!qrCodeUrl) return
|
||||
|
||||
const link = document.createElement('a')
|
||||
link.download = `referral-qr-${session?.user?.referralCode}.png`
|
||||
link.href = qrCodeUrl
|
||||
link.click()
|
||||
toast.success('QR code downloaded!')
|
||||
}
|
||||
|
||||
const shareViaWhatsApp = () => {
|
||||
const message = `Hey! Join Padmaaja Rasooi premium rice business using my referral link and start earning: ${getReferralLink()}`
|
||||
window.open(`https://wa.me/?text=${encodeURIComponent(message)}`, '_blank')
|
||||
}
|
||||
|
||||
const shareViaEmail = () => {
|
||||
const subject = 'Join Padmaaja Rasooi Rice Business Partnership!'
|
||||
const body = `Hi there!\n\nI'd like to invite you to join Padmaaja Rasooi, a premium rice products business where you can earn through our partnership program.\n\nClick here to join: ${getReferralLink()}\n\nBest regards!`
|
||||
window.location.href = `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="w-16 h-16 border-4 border-gray-200 border-t-blue-500 rounded-full animate-spin"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100">
|
||||
<div className=" mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
|
||||
{/* Team Stats */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 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">Total Team Size</p>
|
||||
<p className="text-3xl font-bold">{teamData?.teamStats.totalTeamSize || 0}</p>
|
||||
<p className="text-blue-100 text-xs mt-1">All levels combined</p>
|
||||
</div>
|
||||
<Users className="h-10 w-10 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-3xl font-bold">{teamData?.directReferrals.length || 0}</p>
|
||||
<p className="text-green-100 text-xs mt-1">Level 1 members</p>
|
||||
</div>
|
||||
<TrendingUp className="h-10 w-10 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">Active Levels</p>
|
||||
<p className="text-3xl font-bold">
|
||||
{teamData?.teamStats.levels.filter(l => l.count > 0).length || 0}
|
||||
</p>
|
||||
<p className="text-purple-100 text-xs mt-1">Out of 5 levels</p>
|
||||
</div>
|
||||
<Users className="h-10 w-10 text-purple-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gradient-to-r from-orange-500 to-red-600 text-white border-0 shadow-lg">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-orange-100 text-sm">Referral Code</p>
|
||||
<p className="text-xl font-mono font-bold">{session?.user?.referralCode}</p>
|
||||
<p className="text-orange-100 text-xs mt-1">Your unique code</p>
|
||||
</div>
|
||||
<QrCode className="h-10 w-10 text-orange-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Enhanced Tabs */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<Tabs defaultValue="overview" className="space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-4">
|
||||
<TabsTrigger value="overview">Overview</TabsTrigger>
|
||||
<TabsTrigger value="direct">Direct Referrals</TabsTrigger>
|
||||
<TabsTrigger value="levels">Level Breakdown</TabsTrigger>
|
||||
<TabsTrigger value="tools">Referral Tools</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="overview" className="space-y-4">
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle>Team Structure Overview</CardTitle>
|
||||
<CardDescription>Your network across all 5 levels</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{teamData?.teamStats.levels.map((level) => (
|
||||
<motion.div
|
||||
key={level.level}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: level.level * 0.1 }}
|
||||
className="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-white rounded-lg border hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
||||
level.level === 1 ? 'bg-blue-100 text-blue-600' :
|
||||
level.level === 2 ? 'bg-green-100 text-green-600' :
|
||||
level.level === 3 ? 'bg-yellow-100 text-yellow-600' :
|
||||
level.level === 4 ? 'bg-purple-100 text-purple-600' :
|
||||
'bg-red-100 text-red-600'
|
||||
}`}>
|
||||
<span className="text-sm font-bold">{level.level}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium text-gray-900">Level {level.level}</span>
|
||||
<p className="text-xs text-gray-500">
|
||||
{level.level === 1 ? 'Direct referrals' : `${level.level} levels down`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant={level.count > 0 ? 'default' : 'secondary'} className="text-sm">
|
||||
{level.count} {level.count === 1 ? 'member' : 'members'}
|
||||
</Badge>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="direct" className="space-y-4">
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle>Direct Referrals</CardTitle>
|
||||
<CardDescription>Members you directly referred</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{(teamData?.directReferrals || []).length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Users className="h-10 w-10 text-gray-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">No direct referrals yet</h3>
|
||||
<p className="text-gray-500 mb-6">Start sharing your referral link to build your team</p>
|
||||
<div className="flex justify-center space-x-3">
|
||||
<Button onClick={copyReferralLink}>
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
Copy Link
|
||||
</Button>
|
||||
<Button variant="outline" onClick={shareViaWhatsApp}>
|
||||
<MessageCircle className="h-4 w-4 mr-2" />
|
||||
Share on WhatsApp
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{teamData?.directReferrals.map((member, index) => (
|
||||
<motion.div
|
||||
key={member.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
className="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-white rounded-lg border hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
|
||||
<span className="text-white font-bold">
|
||||
{member.name?.[0] || member.email[0]}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">{member.name || 'Unknown'}</p>
|
||||
<p className="text-sm text-gray-500">{member.email}</p>
|
||||
<p className="text-xs text-gray-400 flex items-center mt-1">
|
||||
<Calendar className="h-3 w-3 mr-1" />
|
||||
Joined {new Date(member.joinedAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<Badge variant={member.role === 'MEMBER' ? 'default' : 'secondary'}>
|
||||
{member.role}
|
||||
</Badge>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
{member.referrals?.length || 0} referrals
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="levels" className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{teamData?.teamStats.levels.map((level, index) => (
|
||||
<motion.div
|
||||
key={level.level}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
>
|
||||
<Card className={`border-0 shadow-lg ${
|
||||
level.count > 0
|
||||
? 'bg-gradient-to-br from-white to-blue-50'
|
||||
: 'bg-gradient-to-br from-gray-50 to-gray-100'
|
||||
}`}>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<span className="flex items-center">
|
||||
<div className={`w-8 h-8 rounded-full mr-3 flex items-center justify-center ${
|
||||
level.level === 1 ? 'bg-blue-500 text-white' :
|
||||
level.level === 2 ? 'bg-green-500 text-white' :
|
||||
level.level === 3 ? 'bg-yellow-500 text-white' :
|
||||
level.level === 4 ? 'bg-purple-500 text-white' :
|
||||
'bg-red-500 text-white'
|
||||
}`}>
|
||||
{level.level}
|
||||
</div>
|
||||
Level {level.level}
|
||||
</span>
|
||||
<Badge variant={level.count > 0 ? 'default' : 'secondary'}>
|
||||
{level.count}
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{level.level === 1 ? 'Direct referrals' : `${level.level} levels down`}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold mb-2 text-gray-900">{level.count}</div>
|
||||
<p className="text-sm text-gray-500">
|
||||
{level.count === 1 ? 'member' : 'members'}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="tools" className="space-y-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Referral Link Card */}
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center">
|
||||
<Share2 className="h-5 w-5 mr-2" />
|
||||
Referral Link
|
||||
</CardTitle>
|
||||
<CardDescription>Share your unique referral link</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="p-4 bg-gray-50 rounded-lg border">
|
||||
<p className="text-sm font-mono break-all text-gray-700">
|
||||
{getReferralLink()}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button onClick={copyReferralLink} size="sm">
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
Copy Link
|
||||
</Button>
|
||||
<Button variant="outline" onClick={shareViaWhatsApp} size="sm">
|
||||
<MessageCircle className="h-4 w-4 mr-2" />
|
||||
WhatsApp
|
||||
</Button>
|
||||
<Button variant="outline" onClick={shareViaEmail} size="sm">
|
||||
<Mail className="h-4 w-4 mr-2" />
|
||||
Email
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* QR Code Card */}
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center">
|
||||
<QrCode className="h-5 w-5 mr-2" />
|
||||
QR Code
|
||||
</CardTitle>
|
||||
<CardDescription>Generate and share QR code</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex justify-center">
|
||||
{qrCodeUrl ? (
|
||||
<div className="relative">
|
||||
<Image
|
||||
src={qrCodeUrl}
|
||||
alt="Referral QR Code"
|
||||
width={200}
|
||||
height={200}
|
||||
className="rounded-lg border shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-48 h-48 bg-gray-100 rounded-lg flex items-center justify-center border-2 border-dashed border-gray-300">
|
||||
<div className="text-center">
|
||||
<QrCode className="h-12 w-12 text-gray-400 mx-auto mb-2" />
|
||||
<p className="text-sm text-gray-500">Click to generate QR code</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center space-x-2">
|
||||
<Button
|
||||
onClick={generateQRCode}
|
||||
disabled={generatingQR}
|
||||
size="sm"
|
||||
>
|
||||
{generatingQR ? 'Generating...' : 'Generate QR Code'}
|
||||
</Button>
|
||||
{qrCodeUrl && (
|
||||
<Button variant="outline" onClick={downloadQRCode} size="sm">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Download
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
288
app/dashboard/wallet/page.tsx
Normal file
288
app/dashboard/wallet/page.tsx
Normal file
@@ -0,0 +1,288 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import {
|
||||
Wallet,
|
||||
DollarSign,
|
||||
TrendingUp,
|
||||
ArrowLeft,
|
||||
Download,
|
||||
Plus,
|
||||
Minus,
|
||||
CreditCard,
|
||||
Calendar
|
||||
} from 'lucide-react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { toast } from 'sonner'
|
||||
import Link from 'next/link'
|
||||
import { DashboardHeader } from '@/components/dashboard/DashboardHeader'
|
||||
|
||||
interface WalletData {
|
||||
balance: number
|
||||
totalEarnings: number
|
||||
totalWithdrawn: number
|
||||
transactions: {
|
||||
id: string
|
||||
type: 'COMMISSION' | 'PAYOUT' | 'WITHDRAWAL'
|
||||
amount: number
|
||||
description: string
|
||||
status: string
|
||||
createdAt: string
|
||||
}[]
|
||||
}
|
||||
|
||||
export default function WalletPage() {
|
||||
const [walletData, setWalletData] = useState<WalletData | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [withdrawalAmount, setWithdrawalAmount] = useState('')
|
||||
const [bankDetails, setBankDetails] = useState('')
|
||||
const [requesting, setRequesting] = useState(false)
|
||||
|
||||
const fetchWalletData = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetch('/api/dashboard/wallet')
|
||||
const data = await response.json()
|
||||
setWalletData(data)
|
||||
} catch (error) {
|
||||
console.error('Error fetching wallet data:', error)
|
||||
toast.error('Failed to load wallet data')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchWalletData()
|
||||
}, [fetchWalletData])
|
||||
|
||||
const handleWithdrawalRequest = async () => {
|
||||
const amount = parseFloat(withdrawalAmount)
|
||||
|
||||
if (!amount || amount <= 0) {
|
||||
toast.error('Please enter a valid amount')
|
||||
return
|
||||
}
|
||||
|
||||
if (amount > (walletData?.balance || 0)) {
|
||||
toast.error('Insufficient balance')
|
||||
return
|
||||
}
|
||||
|
||||
if (!bankDetails.trim()) {
|
||||
toast.error('Please provide bank details')
|
||||
return
|
||||
}
|
||||
|
||||
setRequesting(true)
|
||||
try {
|
||||
const response = await fetch('/api/dashboard/payouts', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
amount,
|
||||
bankDetails
|
||||
})
|
||||
})
|
||||
|
||||
if (!response.ok) throw new Error('Failed to request withdrawal')
|
||||
|
||||
toast.success('Withdrawal request submitted successfully')
|
||||
setWithdrawalAmount('')
|
||||
setBankDetails('')
|
||||
fetchWalletData()
|
||||
} catch (error) {
|
||||
toast.error('Failed to submit withdrawal request')
|
||||
} finally {
|
||||
setRequesting(false)
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
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 */}
|
||||
<DashboardHeader
|
||||
title="My Wallet"
|
||||
description="Manage your earnings and withdrawals"
|
||||
icon={<Wallet className="h-6 w-6 text-white" />}
|
||||
actions={
|
||||
<Button variant="outline">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Export Statement
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Wallet Stats */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="grid grid-cols-1 md:grid-cols-3 gap-6"
|
||||
>
|
||||
<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">Available Balance</p>
|
||||
<p className="text-3xl font-bold">₹{walletData?.balance.toFixed(2) || '0.00'}</p>
|
||||
</div>
|
||||
<Wallet className="h-10 w-10 text-green-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<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">Total Earnings</p>
|
||||
<p className="text-3xl font-bold">₹{walletData?.totalEarnings.toFixed(2) || '0.00'}</p>
|
||||
</div>
|
||||
<TrendingUp className="h-10 w-10 text-blue-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 Withdrawn</p>
|
||||
<p className="text-3xl font-bold">₹{walletData?.totalWithdrawn.toFixed(2) || '0.00'}</p>
|
||||
</div>
|
||||
<DollarSign className="h-10 w-10 text-purple-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Withdrawal Request */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="lg:col-span-1"
|
||||
>
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center">
|
||||
<CreditCard className="h-5 w-5 mr-2" />
|
||||
Request Withdrawal
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Amount (₹)</label>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Enter amount"
|
||||
value={withdrawalAmount}
|
||||
onChange={(e) => setWithdrawalAmount(e.target.value)}
|
||||
max={walletData?.balance || 0}
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
Available: ₹{walletData?.balance.toFixed(2) || '0.00'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Bank Details</label>
|
||||
<Textarea
|
||||
placeholder="Enter your bank account details (Account number, IFSC, Bank name)"
|
||||
value={bankDetails}
|
||||
onChange={(e) => setBankDetails(e.target.value)}
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={handleWithdrawalRequest}
|
||||
disabled={requesting}
|
||||
className="w-full bg-gradient-to-r from-green-600 to-emerald-600"
|
||||
>
|
||||
{requesting ? 'Processing...' : 'Request Withdrawal'}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Transaction History */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="lg:col-span-2"
|
||||
>
|
||||
<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle>Transaction History</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{walletData?.transactions && walletData.transactions.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{walletData.transactions.map((transaction) => (
|
||||
<div key={transaction.id} className="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-white rounded-lg border">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
||||
transaction.type === 'COMMISSION' ? 'bg-green-100' :
|
||||
transaction.type === 'PAYOUT' ? 'bg-blue-100' :
|
||||
'bg-red-100'
|
||||
}`}>
|
||||
{transaction.type === 'COMMISSION' ? (
|
||||
<Plus className="h-5 w-5 text-green-600" />
|
||||
) : (
|
||||
<Minus className="h-5 w-5 text-red-600" />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">{transaction.description}</p>
|
||||
<div className="flex items-center space-x-2 text-sm text-gray-500">
|
||||
<Calendar className="h-3 w-3" />
|
||||
<span>{new Date(transaction.createdAt).toLocaleDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className={`font-bold text-lg ${
|
||||
transaction.type === 'COMMISSION' ? 'text-green-600' : 'text-red-600'
|
||||
}`}>
|
||||
{transaction.type === 'COMMISSION' ? '+' : '-'}₹{transaction.amount.toFixed(2)}
|
||||
</p>
|
||||
<Badge variant={transaction.status === 'COMPLETED' ? 'default' : 'secondary'}>
|
||||
{transaction.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<Wallet className="h-16 w-16 text-gray-300 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">No transactions yet</h3>
|
||||
<p className="text-gray-500">Your transaction history will appear here</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user