'use client'; import React, { useEffect, useState } from 'react'; import { X, User, Mail, Phone, Building, Shield, FileCheck, CheckCircle2, XCircle, Clock, Upload, Eye, Edit3, Layers, Home, GraduationCap, CreditCard, } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { UserPendingApprovalRecord } from '@/services/users/types'; import { useReviewKyc } from '@/services/kyc/queries'; import UploadKycModal from './UploadKycModal'; import EditKycDocumentModal from './EditKycDocumentModal'; import DocumentPreviewModal from '@/components/modals/DocumentPreviewModal'; import Link from 'next/link'; import { useReviewSectorKyc } from '@/services/sectorKyc/queries'; import { useReviewInstituteKyc } from '@/services/instituteKyc/queries'; import { getAssetUrl } from '@/lib/getAssetUrl'; interface DrawerProps { user: UserPendingApprovalRecord; onClose: () => void; onRefresh?: () => void; } export default function PendingApprovalManagementDrawer({ user, onClose, onRefresh }: DrawerProps) { const [isMounted, setIsMounted] = useState(false); const [isUploadModalOpen, setIsUploadModalOpen] = useState(false); const [remarks, setRemarks] = useState(''); // Document Preview Modal State const [previewTarget, setPreviewTarget] = useState<{ name: string; url: string; } | null>(null); // Edit Document Modal State const [editTargetDoc, setEditTargetDoc] = useState<{ id: string; type: string; name: string; } | null>(null); const reviewKycMutation = useReviewKyc(); const reviewSectorKycMutation = useReviewSectorKyc(); const reviewInstituteKycMutation = useReviewInstituteKyc(); const [sectorRemarks, setSectorRemarks] = useState<{ [key: string]: string }>({}); const [instituteRemarks, setInstituteRemarks] = useState<{ [key: string]: string }>({}); useEffect(() => { setIsMounted(true); document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = 'unset'; }; }, []); const handleSafeClose = () => { setIsMounted(false); setTimeout(() => { onClose(); }, 250); }; const handleReviewSectorKyc = async (requestId: string, status: 'APPROVED' | 'REJECTED') => { const remarkText = sectorRemarks[requestId] || ''; try { await reviewSectorKycMutation.mutateAsync({ requestId, status, remarks: remarkText, rejectionReason: status === 'REJECTED' ? remarkText || 'Sector agreement verification failed.' : undefined, }); if (onRefresh) onRefresh(); } catch { // Handled by mutation toast } }; const handleReviewInstituteKyc = async (requestId: string, status: 'APPROVED' | 'REJECTED') => { const remarkText = instituteRemarks[requestId] || ''; try { await reviewInstituteKycMutation.mutateAsync({ requestId, status, remarks: remarkText, rejectionReason: status === 'REJECTED' ? remarkText || 'Institute agreement verification failed.' : undefined, }); if (onRefresh) onRefresh(); } catch { // Handled by mutation toast } }; const handleReviewAction = async (status: 'APPROVED' | 'REJECTED') => { if (!user.kycRecord?.id) return; try { await reviewKycMutation.mutateAsync({ kycRecordId: user.kycRecord.id, status, remarks: remarks.trim() || undefined, rejectionReason: status === 'REJECTED' ? remarks.trim() || 'Verification failed.' : undefined, }); if (onRefresh) onRefresh(); handleSafeClose(); } catch { // Handled in mutation error toast } }; const kycStatus = user.kycRecord?.status || 'PENDING'; const advisor = user.careerAdvisor; return ( <> {/* Backdrop */}
{/* Drawer Container */}
{/* Header */}
{user.firstName ? user.firstName[0] : 'U'} {user.lastName ? user.lastName[0] : ''}

Identity & Compliance Control

Code: {user.username || user.uuid.slice(0, 8).toUpperCase()}
{/* Core User Identity Block */}
{user.firstName} {user.lastName}
{user.role ? user.role.replace(/_/g, ' ') : 'N/A'}
{user.email}
{user.phone && (
{user.phone}
)}
{/* CAREER ADVISOR DETAILS SECTION */} {(user.role === 'CAREER_ADVISOR' || advisor) && (
Career Advisor Profile
{advisor?.advisorCode && ( {advisor.advisorCode} )}
{/* Status and Institute Bar */}
Assigned Institute {advisor?.institute?.name || '—'}{' '} {advisor?.institute?.code ? `(${advisor.institute.code})` : ''}
Advisor Onboarding Status {advisor?.status ? advisor.status.replace(/_/g, ' ') : 'PENDING'}
Qualification {advisor?.qualification || '—'}
Experience {advisor?.experienceYears ?? 0} Year(s)
{/* Bank Details */} {advisor?.bankAccountNumber && (
Bank Payout Verification
Holder {advisor.bankAccountHolder}
Account Number {advisor.bankAccountNumber}
IFSC Code {advisor.bankIFSC}
Bank Name {advisor.bankName}
)} {/* Advisor Documents */}
Uploaded Verification Documents {advisor?.documents && advisor.documents.length > 0 ? (
{advisor.documents.map((doc: any) => (
{doc.type}
))}
) : (

No advisor documents uploaded yet.

)}
)} {/* User Profile Parameters */} {user.userProfile && (
Profile Parameters
Office Location {user.userProfile.registeredOfficeAddress || '—'}, {user.userProfile.city},{' '} {user.userProfile.state} - {user.userProfile.postalCode}
Tax ID / GSTIN {user.userProfile.taxIdentifier || '—'}
CIN Identifier {user.userProfile.corporateRegNumber || '—'}
)} {/* Personal KYC Status Block */} {user.kycRecord && (
Personal Verification Matrix
{kycStatus === 'APPROVED' && ( Approved )} {kycStatus === 'UNDER_REVIEW' && ( Under Review )} {kycStatus === 'PENDING' && ( Pending Submission )}
{user.kycRecord.assignedTo && (
Assigned Officer {user.kycRecord.assignedTo.firstName} {user.kycRecord.assignedTo.lastName} ({user.kycRecord.assignedTo.role})
)} {/* Document List */}
Verification Attachments
{user.kycRecord.documents && user.kycRecord.documents.length > 0 ? (
{user.kycRecord.documents.map((doc) => (
{doc.documentType}
))}
) : (
No verified document assets available.
)}