first commit
This commit is contained in:
525
app/admin/commissions/page.tsx
Normal file
525
app/admin/commissions/page.tsx
Normal file
@@ -0,0 +1,525 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import {
|
||||
DollarSign,
|
||||
TrendingUp,
|
||||
Users,
|
||||
Settings,
|
||||
Search,
|
||||
Filter,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
XCircle,
|
||||
Edit,
|
||||
Plus
|
||||
} from 'lucide-react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
interface Commission {
|
||||
id: string
|
||||
amount: number
|
||||
level: number
|
||||
type: 'REFERRAL' | 'LEVEL' | 'BONUS'
|
||||
status: 'PENDING' | 'APPROVED' | 'PAID' | 'CANCELLED'
|
||||
createdAt: string
|
||||
user: {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
}
|
||||
fromUser: {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
}
|
||||
order?: {
|
||||
id: string
|
||||
total: number
|
||||
}
|
||||
}
|
||||
|
||||
interface CommissionStats {
|
||||
totalCommissions: number
|
||||
pendingAmount: number
|
||||
approvedAmount: number
|
||||
paidAmount: number
|
||||
thisMonthCommissions: number
|
||||
averageCommission: number
|
||||
}
|
||||
|
||||
interface CommissionSetting {
|
||||
id: string
|
||||
level: number
|
||||
percentage: number
|
||||
isActive: boolean
|
||||
}
|
||||
|
||||
const statusConfig = {
|
||||
PENDING: { label: 'Pending', color: 'bg-yellow-100 text-yellow-800', icon: Clock },
|
||||
APPROVED: { label: 'Approved', color: 'bg-blue-100 text-blue-800', icon: CheckCircle },
|
||||
PAID: { label: 'Paid', color: 'bg-green-100 text-green-800', icon: CheckCircle },
|
||||
CANCELLED: { label: 'Cancelled', color: 'bg-red-100 text-red-800', icon: XCircle }
|
||||
}
|
||||
|
||||
export default function AdminCommissionsPage() {
|
||||
const [commissions, setCommissions] = useState<Commission[]>([])
|
||||
const [stats, setStats] = useState<CommissionStats | null>(null)
|
||||
const [settings, setSettings] = useState<CommissionSetting[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [filter, setFilter] = useState({
|
||||
status: 'all',
|
||||
type: 'all',
|
||||
level: 'all',
|
||||
search: ''
|
||||
})
|
||||
const [settingsDialogOpen, setSettingsDialogOpen] = useState(false)
|
||||
const [editingSetting, setEditingSetting] = useState<CommissionSetting | null>(null)
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const [commissionsRes, statsRes, settingsRes] = await Promise.all([
|
||||
fetch('/api/admin/commissions'),
|
||||
fetch('/api/admin/commissions/stats'),
|
||||
fetch('/api/admin/commissions/settings')
|
||||
])
|
||||
|
||||
// Check if responses are ok and contain valid JSON
|
||||
const commissionsData = commissionsRes.ok ? await commissionsRes.json() : { commissions: [] }
|
||||
const statsData = statsRes.ok ? await statsRes.json() : {
|
||||
totalCommissions: 0,
|
||||
pendingAmount: 0,
|
||||
approvedAmount: 0,
|
||||
paidAmount: 0,
|
||||
thisMonthCommissions: 0,
|
||||
averageCommission: 0
|
||||
}
|
||||
const settingsData = settingsRes.ok ? await settingsRes.json() : { settings: [] }
|
||||
|
||||
setCommissions(commissionsData.commissions || [])
|
||||
setStats(statsData)
|
||||
setSettings(settingsData.settings || [])
|
||||
} catch (error) {
|
||||
console.error('Error fetching commission data:', error)
|
||||
toast.error('Failed to load commission data')
|
||||
// Set fallback data
|
||||
setCommissions([])
|
||||
setStats({
|
||||
totalCommissions: 0,
|
||||
pendingAmount: 0,
|
||||
approvedAmount: 0,
|
||||
paidAmount: 0,
|
||||
thisMonthCommissions: 0,
|
||||
averageCommission: 0
|
||||
})
|
||||
setSettings([])
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchData()
|
||||
}, [fetchData])
|
||||
|
||||
const handleStatusUpdate = async (commissionId: string, newStatus: string) => {
|
||||
try {
|
||||
const response = await fetch(`/api/admin/commissions/${commissionId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status: newStatus })
|
||||
})
|
||||
|
||||
if (!response.ok) throw new Error('Failed to update commission')
|
||||
|
||||
toast.success('Commission status updated successfully')
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
console.error('Error updating commission:', error)
|
||||
toast.error('Failed to update commission status')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSettingUpdate = async (setting: CommissionSetting) => {
|
||||
try {
|
||||
const response = await fetch(`/api/admin/commissions/settings/${setting.id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
level: setting.level,
|
||||
percentage: setting.percentage,
|
||||
isActive: setting.isActive
|
||||
})
|
||||
})
|
||||
|
||||
if (!response.ok) throw new Error('Failed to update setting')
|
||||
|
||||
toast.success('Commission setting updated successfully')
|
||||
fetchData()
|
||||
setEditingSetting(null)
|
||||
setSettingsDialogOpen(false)
|
||||
} catch (error) {
|
||||
console.error('Error updating setting:', error)
|
||||
toast.error('Failed to update commission setting')
|
||||
}
|
||||
}
|
||||
|
||||
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.user.name.toLowerCase().includes(filter.search.toLowerCase()) ||
|
||||
commission.user.email.toLowerCase().includes(filter.search.toLowerCase()) ||
|
||||
commission.fromUser.name.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 p-6">
|
||||
<div className="max-w-7xl mx-auto 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">
|
||||
Commission Management
|
||||
</h1>
|
||||
<p className="text-gray-600 mt-2">Monitor and manage all commission transactions</p>
|
||||
</div>
|
||||
<Dialog open={settingsDialogOpen} onOpenChange={setSettingsDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 shadow-lg">
|
||||
<Settings className="h-4 w-4 mr-2" />
|
||||
Commission Settings
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Commission Settings</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
{settings.map((setting) => (
|
||||
<div key={setting.id} className="flex items-center justify-between p-4 border rounded-lg">
|
||||
<div>
|
||||
<p className="font-medium">Level {setting.level}</p>
|
||||
<p className="text-sm text-gray-500">{setting.percentage}% commission</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Badge variant={setting.isActive ? 'default' : 'secondary'}>
|
||||
{setting.isActive ? 'Active' : 'Inactive'}
|
||||
</Badge>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setEditingSetting(setting)}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</motion.div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
{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-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">Total Commissions</p>
|
||||
<p className="text-2xl font-bold">{stats.totalCommissions}</p>
|
||||
</div>
|
||||
<Users className="h-8 w-8 text-blue-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gradient-to-r from-yellow-500 to-yellow-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">Pending Amount</p>
|
||||
<p className="text-2xl font-bold">₹{stats.pendingAmount.toFixed(0)}</p>
|
||||
</div>
|
||||
<Clock className="h-8 w-8 text-yellow-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<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">Paid Amount</p>
|
||||
<p className="text-2xl font-bold">₹{stats.paidAmount.toFixed(0)}</p>
|
||||
</div>
|
||||
<CheckCircle className="h-8 w-8 text-green-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<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">Avg Commission</p>
|
||||
<p className="text-2xl font-bold">₹{stats.averageCommission.toFixed(0)}</p>
|
||||
</div>
|
||||
<TrendingUp className="h-8 w-8 text-purple-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Main Commission Table */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<Card className="bg-white/90 backdrop-blur-sm border-0 shadow-xl">
|
||||
<CardHeader>
|
||||
<div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4">
|
||||
<CardTitle className="text-2xl font-bold">All Commissions</CardTitle>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
||||
<Input
|
||||
placeholder="Search users..."
|
||||
value={filter.search}
|
||||
onChange={(e) => setFilter(prev => ({ ...prev, search: e.target.value }))}
|
||||
className="pl-10 w-64 bg-white shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
<Select value={filter.status} onValueChange={(value) => setFilter(prev => ({ ...prev, status: value }))}>
|
||||
<SelectTrigger className="w-40 bg-white shadow-sm">
|
||||
<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 className="w-40 bg-white shadow-sm">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="overflow-hidden rounded-lg border border-gray-200">
|
||||
<Table>
|
||||
<TableHeader className="bg-gray-50">
|
||||
<TableRow>
|
||||
<TableHead className="font-semibold">Recipient</TableHead>
|
||||
<TableHead className="font-semibold">From User</TableHead>
|
||||
<TableHead className="font-semibold">Amount</TableHead>
|
||||
<TableHead className="font-semibold">Level</TableHead>
|
||||
<TableHead className="font-semibold">Type</TableHead>
|
||||
<TableHead className="font-semibold">Status</TableHead>
|
||||
<TableHead className="font-semibold">Date</TableHead>
|
||||
<TableHead className="font-semibold">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredCommissions.map((commission, index) => (
|
||||
<motion.tr
|
||||
key={commission.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
className="hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<TableCell>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
|
||||
<span className="text-white text-sm font-medium">
|
||||
{commission.user.name?.charAt(0) || 'U'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">{commission.user.name}</p>
|
||||
<p className="text-sm text-gray-500">{commission.user.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">{commission.fromUser.name}</p>
|
||||
<p className="text-sm text-gray-500">{commission.fromUser.email}</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-bold text-lg bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">
|
||||
₹{commission.amount.toFixed(2)}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline">Level {commission.level}</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="secondary">{commission.type}</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge className={statusConfig[commission.status].color}>
|
||||
{statusConfig[commission.status].label}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<p className="text-sm">
|
||||
{new Date(commission.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center space-x-2">
|
||||
{commission.status === 'PENDING' && (
|
||||
<>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => handleStatusUpdate(commission.id, 'APPROVED')}
|
||||
className="text-blue-600 hover:bg-blue-50"
|
||||
>
|
||||
Approve
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => handleStatusUpdate(commission.id, 'CANCELLED')}
|
||||
className="text-red-600 hover:bg-red-50"
|
||||
>
|
||||
Reject
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{commission.status === 'APPROVED' && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => handleStatusUpdate(commission.id, 'PAID')}
|
||||
className="text-green-600 hover:bg-green-50"
|
||||
>
|
||||
Mark Paid
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</motion.tr>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{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">Try adjusting your search or filter criteria</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Edit Setting Dialog */}
|
||||
{editingSetting && (
|
||||
<Dialog open={!!editingSetting} onOpenChange={() => setEditingSetting(null)}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Commission Setting</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>Level</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={editingSetting.level}
|
||||
onChange={(e) => setEditingSetting(prev => prev ? { ...prev, level: parseInt(e.target.value) } : null)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Percentage (%)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.1"
|
||||
value={editingSetting.percentage}
|
||||
onChange={(e) => setEditingSetting(prev => prev ? { ...prev, percentage: parseFloat(e.target.value) } : null)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="isActive"
|
||||
checked={editingSetting.isActive}
|
||||
onChange={(e) => setEditingSetting(prev => prev ? { ...prev, isActive: e.target.checked } : null)}
|
||||
/>
|
||||
<Label htmlFor="isActive">Active</Label>
|
||||
</div>
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button variant="outline" onClick={() => setEditingSetting(null)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={() => handleSettingUpdate(editingSetting)}>
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user