import { BreadcrumbItem, UserKycVerification } from '@/types'; import { Head } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import SettingsLayout from '@/layouts/settings/layout'; import HeadingSmall from '@/components/heading-small'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'; import { Link } from '@inertiajs/react'; import { Shield, CheckCircle, Clock, XCircle, AlertCircle, ChevronRight, FileText, Calendar, Upload } from 'lucide-react'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Settings', href: '/settings/profile', }, { title: 'KYC Verification', href: '/settings/kyc', }, ]; interface Props { kyc: UserKycVerification | null; } 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: AlertCircle, }; export default function KycIndex({ kyc }: Props) { const currentStatus = kyc?.status || null; const StatusIcon = currentStatus ? statusIcons[currentStatus] : null; const isVerified = currentStatus === 'approved'; const isUnverified = !kyc || !currentStatus; const getDaysRemaining = () => { if (!kyc?.expires_at) return null; const expiryDate = new Date(kyc.expires_at); const today = new Date(); const diffTime = expiryDate.getTime() - today.getTime(); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); return diffDays; }; const daysRemaining = getDaysRemaining(); return (
{/* Header */}
{/* Status Alerts */} {isUnverified && ( Verification Required Complete KYC verification to access phone numbers, campaigns, and calling features. Your account will be suspended after the grace period expires. )} {kyc?.status === 'pending' && ( Under Review Your verification is being reviewed by our team. This typically takes 24-48 hours. )} {kyc?.status === 'rejected' && ( Verification Rejected {kyc.rejection_reason || 'Please review the feedback and resubmit your documents.'} )} {kyc?.status === 'approved' && kyc?.needs_renewal && ( Renewal Required Your KYC verification expires in {daysRemaining} days. Please renew to maintain access. )} {/* Current Status Card */}
Verification Status Your current verification status and details
{kyc && currentStatus && StatusIcon ? ( <>
{currentStatus.charAt(0).toUpperCase() + currentStatus.slice(1)}
{kyc.approved_at && (
Verified on {new Date(kyc.approved_at).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
)} {kyc.expires_at && currentStatus === 'approved' && (
Expires on {new Date(kyc.expires_at).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
)} ) : (
You have not submitted your KYC verification yet.
)} {/* Verification Action Card */}
KYC Verification Submit your documents for verification
  • Valid government-issued ID
  • Proof of address (utility bill, bank statement)
  • Selfie with ID for verification
  • Business documents (if applicable)
{isUnverified && ( )} {kyc?.status === 'rejected' && ( )} {kyc?.status === 'approved' && (
Verification Complete
)} {kyc?.status === 'pending' && (
Under Review
)} {kyc?.needs_renewal && ( )} {/* Documents Status - Only show when not approved */} {kyc?.documents_status && kyc?.status !== 'approved' && ( Submitted Documents Review status of your uploaded documents {Object.entries(kyc.documents_status).map(([key, doc]) => (
{key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
{doc.uploaded ? 'Uploaded' : 'Not uploaded'}
{doc.status ? doc.status.charAt(0).toUpperCase() + doc.status.slice(1) : 'Pending'}
))} )}
); }