import { Head, Link, router } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import Heading from '@/components/heading'; import { Card, CardContent } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { RefreshCw, Search, Shield, ShieldCheck, Eye, FileText, Phone, Building, Clock, CheckCircle, XCircle } from 'lucide-react'; import { dashboard } from '@/routes'; import { type BreadcrumbItem } from '@/types'; import { useState } from 'react'; import Pagination from '@/components/pagination'; interface User { id: number; name: string; email: string; created_at: string; } interface KycSubmission { id: number; kyc_tier: 'basic' | 'business'; status: 'pending' | 'approved' | 'rejected' | 'expired'; user: User; phone_number?: string; phone_verified_at?: string; business_name?: string; submitted_at?: string; created_at: string; } interface PaginationLink { url: string | null; label: string; active: boolean; } interface PaginationMeta { current_page: number; from: number | null; last_page: number; path: string; per_page: number; to: number | null; total: number; } interface Props { pending: { data: KycSubmission[]; links: PaginationLink[]; meta: PaginationMeta; }; filters: { tier?: string; search?: string; }; stats: { total_pending: number; basic_pending: number; business_pending: number; }; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url, }, { title: 'KYC Review', href: '/admin/kyc', }, ]; const tierColors = { basic: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400', business: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400', }; const tierIcons = { basic: Phone, business: Building, }; const statusColors = { pending: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400', approved: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400', rejected: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400', expired: 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400', }; const statusIcons = { pending: Clock, approved: CheckCircle, rejected: XCircle, expired: Clock, }; export default function KycIndex({ pending, filters, stats }: Props) { const [search, setSearch] = useState(filters.search || ''); const [tier, setTier] = useState(filters.tier || 'all'); const handleFilter = () => { router.get('/admin/kyc', { search: search || undefined, tier: tier !== 'all' ? tier : undefined, }, { preserveState: true, preserveScroll: true, }); }; const handleReset = () => { setSearch(''); setTier('all'); router.get('/admin/kyc', {}, { preserveState: true, preserveScroll: true, }); }; return (
{/* Header */}
{/* Stats Cards */}

Total Pending

{stats.total_pending}

Basic Tier

{stats.basic_pending}

Business Tier

{stats.business_pending}
{/* Filters */}
setSearch(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && handleFilter()} className="pl-10" />
{/* Table */} User Tier Status Phone Business Name Submitted Actions {pending.data.length === 0 ? (

No pending submissions

All KYC verifications have been reviewed

 ) : ( pending.data.map((kyc) => { const TierIcon = tierIcons[kyc.kyc_tier]; const StatusIcon = statusIcons[kyc.status]; return (
{kyc.user.name}
{kyc.user.email}
 {kyc.kyc_tier.charAt(0).toUpperCase() + kyc.kyc_tier.slice(1)} {kyc.status.charAt(0).toUpperCase() + kyc.status.slice(1)} {kyc.phone_number || —} {kyc.business_name || —} {kyc.submitted_at ? new Date(kyc.submitted_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', }) : Not submitted } ); }) )}
{/* Pagination */} {pending.data.length > 0 && (
)}
); }