Add full FOCO investor management system with CRUD, investments, and transactions
This commit is contained in:
128
src/app/admin/kyc/page.tsx
Normal file
128
src/app/admin/kyc/page.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import { Shield, Search, Filter, Check, X, Clock, User, Phone, MapPin, FileText, Eye, Download } from 'lucide-react';
|
||||
import { kycRequests } from '@/data/mockData';
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
pending: 'bg-amber-100 text-amber-700',
|
||||
approved: 'bg-green-100 text-green-700',
|
||||
rejected: 'bg-red-100 text-red-700',
|
||||
};
|
||||
|
||||
export default function KYCReviewsPage() {
|
||||
const pending = kycRequests.filter(k => k.status === 'pending');
|
||||
const approved = kycRequests.filter(k => k.status === 'approved');
|
||||
const rejected = kycRequests.filter(k => k.status === 'rejected');
|
||||
|
||||
return (
|
||||
<div className="p-4 lg:p-6">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800">KYC Verification</h1>
|
||||
<p className="text-sm text-slate-500 mt-1">Review and verify biker identity documents</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button className="py-2 px-4 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 flex items-center gap-2">
|
||||
<Download className="w-4 h-4" /> Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4 mb-6">
|
||||
<div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-xl bg-amber-50 flex items-center justify-center">
|
||||
<Clock className="w-6 h-6 text-amber-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-extrabold text-slate-800">{pending.length}</p>
|
||||
<p className="text-sm text-slate-500">Pending Review</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-xl bg-green-50 flex items-center justify-center">
|
||||
<Check className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-extrabold text-slate-800">{approved.length}</p>
|
||||
<p className="text-sm text-slate-500">Approved</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-xl bg-red-50 flex items-center justify-center">
|
||||
<X className="w-6 h-6 text-red-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-extrabold text-slate-800">{rejected.length}</p>
|
||||
<p className="text-sm text-slate-500">Rejected</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-100">
|
||||
<div className="p-4 border-b border-slate-100">
|
||||
<div className="flex items-center gap-2">
|
||||
<button className="px-3 py-1.5 bg-slate-800 text-white rounded-lg text-sm font-medium">All</button>
|
||||
<button className="px-3 py-1.5 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Pending</button>
|
||||
<button className="px-3 py-1.5 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Approved</button>
|
||||
<button className="px-3 py-1.5 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Rejected</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-slate-50">
|
||||
{kycRequests.map(kyc => (
|
||||
<div key={kyc.id} className="p-5 hover:bg-slate-50 transition-colors">
|
||||
<div className="flex flex-col lg:flex-row lg:items-start gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center">
|
||||
<User className="w-6 h-6 text-slate-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-slate-800">{kyc.userName}</p>
|
||||
<p className="text-sm text-slate-500 flex items-center gap-1">
|
||||
<Phone className="w-3 h-3" /> {kyc.phone}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex flex-wrap gap-4 text-sm text-slate-600">
|
||||
<p className="flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" /> Submitted: {kyc.submittedAt}
|
||||
</p>
|
||||
<p className="flex items-center gap-1">
|
||||
<MapPin className="w-3 h-3" /> Dhaka, Bangladesh
|
||||
</p>
|
||||
<p className="flex items-center gap-1">
|
||||
<FileText className="w-3 h-3" /> NID: 1234567890
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusColors[kyc.status]}`}>
|
||||
{kyc.status}
|
||||
</span>
|
||||
{kyc.status === 'pending' && (
|
||||
<div className="flex gap-2">
|
||||
<button className="py-2 px-4 bg-green-600 text-white text-sm font-semibold rounded-lg hover:bg-green-700 flex items-center gap-1">
|
||||
<Check className="w-4 h-4" /> Approve
|
||||
</button>
|
||||
<button className="py-2 px-4 border border-red-200 text-red-600 text-sm font-semibold rounded-lg hover:bg-red-50 flex items-center gap-1">
|
||||
<X className="w-4 h-4" /> Reject
|
||||
</button>
|
||||
<button className="py-2 px-3 border border-slate-200 text-slate-600 text-sm font-semibold rounded-lg hover:bg-slate-50 flex items-center gap-1">
|
||||
<Eye className="w-4 h-4" /> View Docs
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user