import { useState, useEffect } from "react"; import { motion } from "motion/react"; import { Shield, Users, Activity, CreditCard, TrendingUp, Search, Filter, Plus, Edit, Trash2, Eye, AlertTriangle, UserPlus, UserMinus, ArrowLeft, Sun, Moon, Settings, Download, Upload, Mail, MessageSquare, Bell, Calendar, Target, Clock, CheckCircle, XCircle, BarChart3, PieChart, TrendingDown, Wallet, Building, Phone, Send, FileText, Banknote, Receipt, AlertCircleIcon, ArrowUpRight, ArrowDownLeft, Smartphone, Zap, Home, PiggyBank, RefreshCw, Filter as FilterIcon, CalendarDays, Percent, CheckSquare, XSquare, UserCheck, Clock3 } from "lucide-react"; import { Button } from "./ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"; import { Input } from "./ui/input"; import { Label } from "./ui/label"; import { Badge } from "./ui/badge"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./ui/table"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog"; import { Alert, AlertDescription } from "./ui/alert"; import { Textarea } from "./ui/textarea"; import { Switch } from "./ui/switch"; import { Progress } from "./ui/progress"; import { Separator } from "./ui/separator"; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, PieChart as RechartsPieChart, Cell } from "recharts"; import { formatNaira } from "../utils/currency"; import { toast } from "sonner@2.0.3"; import { useTheme } from "./ThemeProvider"; import { ImageWithFallback } from "./figma/ImageWithFallback"; import enamelLogo from 'figma:asset/2e2e3fad7673e8eef9a255215dd6ac2cf27cc590.png'; interface EnhancedAdminDashboardProps { onBack: () => void; currentUser: any; } interface Member { id: string; membershipNumber: string; firstName: string; lastName: string; email: string; phone: string; nextOfKin: string; nextOfKinPhone: string; savingsPlan: string; dailyContribution: number; totalContributed: number; balance: number; nextPayoutDate: string; status: 'active' | 'suspended' | 'defaulter' | 'pending'; joinedDate: string; lastContribution: string; payoutPosition: number; groupSize: number; kycStatus: 'verified' | 'pending' | 'rejected'; assignedAgent?: string; } interface Contribution { id: string; memberId: string; memberName: string; amount: number; date: string; type: 'daily' | 'weekly' | 'monthly'; method: 'cash' | 'bank_transfer' | 'ussd' | 'card'; status: 'completed' | 'pending' | 'failed'; agentId?: string; reference?: string; } interface Payout { id: string; memberId: string; memberName: string; amount: number; commission: number; netAmount: number; date: string; status: 'pending' | 'approved' | 'disbursed' | 'completed'; approvedBy?: string; disbursedBy?: string; bankDetails?: { bankName: string; accountNumber: string; accountName: string; }; } interface Agent { id: string; name: string; phone: string; email: string; assignedMembers: number; totalCollections: number; commission: number; status: 'active' | 'inactive'; joinedDate: string; } export function EnhancedAdminDashboard({ onBack, currentUser }: EnhancedAdminDashboardProps) { const [activeTab, setActiveTab] = useState("overview"); const [members, setMembers] = useState([]); const [contributions, setContributions] = useState([]); const [payouts, setPayouts] = useState([]); const [agents, setAgents] = useState([]); const [searchQuery, setSearchQuery] = useState(""); const [filterStatus, setFilterStatus] = useState("all"); const [selectedDateRange, setSelectedDateRange] = useState("today"); const [isAddMemberOpen, setIsAddMemberOpen] = useState(false); const [isPayoutDialogOpen, setIsPayoutDialogOpen] = useState(false); const [isMessageDialogOpen, setIsMessageDialogOpen] = useState(false); const [selectedMember, setSelectedMember] = useState(null); const [messageText, setMessageText] = useState(""); const [messageType, setMessageType] = useState<'sms' | 'email' | 'whatsapp'>('sms'); const { theme, toggleTheme } = useTheme(); // Enhanced member form state const [newMember, setNewMember] = useState({ firstName: "", lastName: "", email: "", phone: "", nextOfKin: "", nextOfKinPhone: "", savingsPlan: "daily_500", dailyContribution: 500, groupSize: 10 }); // Mock data initialization useEffect(() => { const mockMembers: Member[] = [ { id: '1', membershipNumber: 'EW001', firstName: 'Adaora', lastName: 'Okafor', email: 'adaora.okafor@example.com', phone: '+234 803 123 4567', nextOfKin: 'John Okafor', nextOfKinPhone: '+234 803 123 4568', savingsPlan: 'Daily ₦500', dailyContribution: 500, totalContributed: 15000, balance: 14250, nextPayoutDate: '2024-02-15', status: 'active', joinedDate: '2024-01-01', lastContribution: '2024-01-20', payoutPosition: 3, groupSize: 10, kycStatus: 'verified', assignedAgent: 'Agent001' }, { id: '2', membershipNumber: 'EW002', firstName: 'Chidi', lastName: 'Eze', email: 'chidi.eze@example.com', phone: '+234 805 987 6543', nextOfKin: 'Mary Eze', nextOfKinPhone: '+234 805 987 6544', savingsPlan: 'Daily ₦1000', dailyContribution: 1000, totalContributed: 30000, balance: 28500, nextPayoutDate: '2024-03-01', status: 'active', joinedDate: '2024-01-01', lastContribution: '2024-01-19', payoutPosition: 5, groupSize: 10, kycStatus: 'verified', assignedAgent: 'Agent001' }, { id: '3', membershipNumber: 'EW003', firstName: 'Funmi', lastName: 'Adebayo', email: 'funmi.adebayo@example.com', phone: '+234 807 555 0123', nextOfKin: 'Tunde Adebayo', nextOfKinPhone: '+234 807 555 0124', savingsPlan: 'Daily ₦500', dailyContribution: 500, totalContributed: 12000, balance: 11400, nextPayoutDate: '2024-01-30', status: 'defaulter', joinedDate: '2024-01-01', lastContribution: '2024-01-17', payoutPosition: 7, groupSize: 10, kycStatus: 'pending', assignedAgent: 'Agent002' } ]; const mockContributions: Contribution[] = [ { id: 'CON001', memberId: '1', memberName: 'Adaora Okafor', amount: 500, date: '2024-01-20', type: 'daily', method: 'bank_transfer', status: 'completed', agentId: 'Agent001', reference: 'BT202401200001' }, { id: 'CON002', memberId: '2', memberName: 'Chidi Eze', amount: 1000, date: '2024-01-20', type: 'daily', method: 'ussd', status: 'completed', agentId: 'Agent001', reference: 'USSD202401200002' }, { id: 'CON003', memberId: '1', memberName: 'Adaora Okafor', amount: 500, date: '2024-01-19', type: 'daily', method: 'cash', status: 'completed', agentId: 'Agent001' } ]; const mockPayouts: Payout[] = [ { id: 'PAY001', memberId: '1', memberName: 'Adaora Okafor', amount: 15000, commission: 750, netAmount: 14250, date: '2024-01-15', status: 'completed', approvedBy: 'Admin001', disbursedBy: 'Admin001', bankDetails: { bankName: 'GTBank', accountNumber: '0123456789', accountName: 'Adaora Okafor' } } ]; const mockAgents: Agent[] = [ { id: 'Agent001', name: 'Samuel Okoro', phone: '+234 901 234 5678', email: 'samuel.okoro@enamelwallets.com', assignedMembers: 2, totalCollections: 45000, commission: 2250, status: 'active', joinedDate: '2023-12-01' }, { id: 'Agent002', name: 'Grace Abiola', phone: '+234 902 345 6789', email: 'grace.abiola@enamelwallets.com', assignedMembers: 1, totalCollections: 12000, commission: 600, status: 'active', joinedDate: '2023-12-15' } ]; setMembers(mockMembers); setContributions(mockContributions); setPayouts(mockPayouts); setAgents(mockAgents); }, []); // Calculate enhanced statistics const stats = { totalActiveMembers: members.filter(m => m.status === 'active').length, totalContributionsToday: contributions .filter(c => c.date === '2024-01-20' && c.status === 'completed') .reduce((sum, c) => sum + c.amount, 0), totalContributionsThisMonth: contributions .filter(c => c.date.startsWith('2024-01') && c.status === 'completed') .reduce((sum, c) => sum + c.amount, 0), pendingPayouts: payouts.filter(p => p.status === 'pending').length, commissionEarned: payouts .filter(p => p.status === 'completed') .reduce((sum, p) => sum + p.commission, 0), defaulters: members.filter(m => m.status === 'defaulter').length, totalMembers: members.length, averageContribution: members.reduce((sum, m) => sum + m.dailyContribution, 0) / members.length, collectionRate: (contributions.filter(c => c.status === 'completed').length / contributions.length) * 100 }; // Chart data const contributionTrendData = [ { date: '2024-01-15', amount: 25000 }, { date: '2024-01-16', amount: 28000 }, { date: '2024-01-17', amount: 22000 }, { date: '2024-01-18', amount: 30000 }, { date: '2024-01-19', amount: 32000 }, { date: '2024-01-20', amount: 35000 } ]; const paymentMethodData = [ { method: 'Bank Transfer', value: 45, color: '#0066cc' }, { method: 'USSD', value: 30, color: '#00875a' }, { method: 'Cash', value: 20, color: '#ff6b35' }, { method: 'Card', value: 5, color: '#8b5cf6' } ]; const handleAddMember = async () => { if (!newMember.firstName || !newMember.lastName || !newMember.phone) { toast.error("Please fill in all required fields"); return; } const member: Member = { id: Date.now().toString(), membershipNumber: `EW${String(members.length + 1).padStart(3, '0')}`, firstName: newMember.firstName, lastName: newMember.lastName, email: newMember.email, phone: newMember.phone, nextOfKin: newMember.nextOfKin, nextOfKinPhone: newMember.nextOfKinPhone, savingsPlan: newMember.savingsPlan, dailyContribution: newMember.dailyContribution, totalContributed: 0, balance: 0, nextPayoutDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], status: 'active', joinedDate: new Date().toISOString().split('T')[0], lastContribution: '', payoutPosition: newMember.groupSize, groupSize: newMember.groupSize, kycStatus: 'pending' }; setMembers(prev => [...prev, member]); setNewMember({ firstName: "", lastName: "", email: "", phone: "", nextOfKin: "", nextOfKinPhone: "", savingsPlan: "daily_500", dailyContribution: 500, groupSize: 10 }); setIsAddMemberOpen(false); toast.success("Member added successfully"); }; const handleRecordContribution = (memberId: string, amount: number, method: string) => { const member = members.find(m => m.id === memberId); if (!member) return; const contribution: Contribution = { id: `CON${Date.now()}`, memberId, memberName: `${member.firstName} ${member.lastName}`, amount, date: new Date().toISOString().split('T')[0], type: 'daily', method: method as any, status: 'completed', agentId: 'Admin001' }; setContributions(prev => [...prev, contribution]); // Update member's balance setMembers(prev => prev.map(m => m.id === memberId ? { ...m, totalContributed: m.totalContributed + amount, balance: m.balance + (amount * 0.95), // 5% commission lastContribution: new Date().toISOString().split('T')[0] } : m )); toast.success(`Contribution of ${formatNaira(amount)} recorded for ${member.firstName} ${member.lastName}`); }; const handleApprovePayout = (memberId: string) => { const member = members.find(m => m.id === memberId); if (!member) return; const payout: Payout = { id: `PAY${Date.now()}`, memberId, memberName: `${member.firstName} ${member.lastName}`, amount: member.balance + (member.balance * 0.05), // Add back commission commission: member.balance * 0.05, netAmount: member.balance, date: new Date().toISOString().split('T')[0], status: 'approved', approvedBy: currentUser.id }; setPayouts(prev => [...prev, payout]); toast.success(`Payout approved for ${member.firstName} ${member.lastName}`); }; const handleSendMessage = () => { if (!messageText.trim()) { toast.error("Please enter a message"); return; } // Simulate sending message toast.success(`${messageType.toUpperCase()} message sent successfully`); setMessageText(""); setIsMessageDialogOpen(false); }; const getStatusColor = (status: string) => { switch (status) { case 'active': return 'bg-secondary text-white'; case 'suspended': return 'bg-destructive text-white'; case 'defaulter': return 'bg-orange-500 text-white'; case 'pending': return 'bg-yellow-500 text-white'; default: return 'bg-muted'; } }; const getMethodIcon = (method: string) => { switch (method) { case 'bank_transfer': return ; case 'ussd': return ; case 'cash': return ; case 'card': return ; default: return ; } }; return (
{/* Header */}

Enhanced Admin Dashboard

Comprehensive Cooperative Management System

{currentUser.role?.toUpperCase() || 'ADMIN'}
{/* Enhanced Stats Overview */}

Total Active Members

{stats.totalActiveMembers}

Today's Collections

{formatNaira(stats.totalContributionsToday)}

This Month

{formatNaira(stats.totalContributionsThisMonth)}

Pending Payouts

{stats.pendingPayouts}

Commission Earned

{formatNaira(stats.commissionEarned)}

Defaulters

{stats.defaulters}

 {/* Charts Section */}
Contribution Trend formatNaira(Number(value))} /> Payment Methods `${method}: ${value}%`} > {paymentMethodData.map((entry, index) => ( ))}
{/* Main Content Tabs */} Overview Members Contributions Payouts Agents Reports Communication Settings {/* Overview Tab */}
Recent Contributions
{contributions.slice(0, 5).map((contribution) => (
{getMethodIcon(contribution.method)}

{contribution.memberName}

{contribution.date}

{formatNaira(contribution.amount)}

{contribution.method.replace('_', ' ')}
))}
Members Due for Payout
{members .filter(m => new Date(m.nextPayoutDate) <= new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)) .slice(0, 5) .map((member) => (

{member.firstName} {member.lastName}

Due: {member.nextPayoutDate}

{formatNaira(member.balance)}

))}
{/* Members Management Tab */}
Member Management
Add New Member Register a new cooperative member
setNewMember(prev => ({ ...prev, firstName: e.target.value }))} placeholder="Enter first name" />
setNewMember(prev => ({ ...prev, lastName: e.target.value }))} placeholder="Enter last name" />
setNewMember(prev => ({ ...prev, email: e.target.value }))} placeholder="Enter email address" />
setNewMember(prev => ({ ...prev, phone: e.target.value }))} placeholder="Enter phone number" />
setNewMember(prev => ({ ...prev, nextOfKin: e.target.value }))} placeholder="Enter next of kin name" />
setNewMember(prev => ({ ...prev, nextOfKinPhone: e.target.value }))} placeholder="Enter next of kin phone" />
{/* Search and Filters */}
setSearchQuery(e.target.value)} className="pl-10" />
{/* Members Table */}
Member Contact Plan Contributed Balance Status Next Payout Actions {members .filter(member => { const matchesSearch = member.firstName.toLowerCase().includes(searchQuery.toLowerCase()) || member.lastName.toLowerCase().includes(searchQuery.toLowerCase()) || member.membershipNumber.toLowerCase().includes(searchQuery.toLowerCase()) || member.phone.includes(searchQuery); const matchesFilter = filterStatus === 'all' || member.status === filterStatus; return matchesSearch && matchesFilter; }) .map((member) => (

{member.firstName} {member.lastName}

{member.membershipNumber}

{member.phone}

{member.email || 'N/A'}

{member.savingsPlan}

Daily: {formatNaira(member.dailyContribution)}

 {formatNaira(member.totalContributed)} {formatNaira(member.balance)} {member.status}

{member.nextPayoutDate}

Pos: {member.payoutPosition}/{member.groupSize}
))}
{/* Contributions Management Tab */}
Contributions Management
Date Member Amount Method Status Reference Agent {contributions.map((contribution) => ( {contribution.date} {contribution.memberName} {formatNaira(contribution.amount)}
{getMethodIcon(contribution.method)} {contribution.method.replace('_', ' ')}
{contribution.status} {contribution.reference || 'N/A'} {contribution.agentId} ))}
{/* Payouts Management Tab */} Payout Management
Date Member Gross Amount Commission Net Amount Status Actions {payouts.map((payout) => ( {payout.date} {payout.memberName} {formatNaira(payout.amount)} {formatNaira(payout.commission)} {formatNaira(payout.netAmount)} {payout.status}
{payout.status === 'pending' && ( )} {payout.status === 'approved' && ( )}
))}
{/* Agents Management Tab */}
Agent/Collector Management
Agent Contact Assigned Members Total Collections Commission Status Actions {agents.map((agent) => (

{agent.name}

Since {agent.joinedDate}

{agent.phone}

{agent.email}

 {agent.assignedMembers} {formatNaira(agent.totalCollections)} {formatNaira(agent.commission)} {agent.status}
))}
{/* Reports & Analytics Tab */}

Collection Rate

{stats.collectionRate.toFixed(1)}%

Avg. Contribution

{formatNaira(stats.averageContribution)}

Member Growth

+{Math.floor(stats.totalMembers * 0.1)}

Default Rate

{((stats.defaulters / stats.totalMembers) * 100).toFixed(1)}%
Generate Reports
{/* Communication Tab */}
Notifications & Communication Send Bulk Message Send notifications to members