first commit
This commit is contained in:
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user