e.stopPropagation()}>

{m.name} Verification

Review document details before approving

Uploaded 28 Apr 2025 · 2.4 MB · PDF

Extracted Details

{m.fields.map(([k, v]) => (

{k}

{v}

))}

Auto-extracted via OCR · Match score 98%

{showReject && (

setReason(e.target.value)} autoFocus />
          </div>
        )}
        <div className="kyc-popup-footer">
          <div className="kyc-popup-footer-left">
            {showReject ? 'Add a reason to send back to HR Admin.' : 'All fields verified against onboarding record.'}
          </div>
          <div className="kyc-popup-footer-right">
            {showReject ? (
              <>
                <button className="btn-secondary" style={{ height: 44 }} onClick={() => setShowReject(false)}>Cancel</button>
                <button className="btn-reject" disabled={!reason.trim()} onClick={() => onAction('rejected', reason)}>Send back to HR</button>
              </>
            ) : (
              <>
                <button className="btn-reject" onClick={() => setShowReject(true)}>Reject</button>
                <button className="btn-verify" onClick={() => onAction('verified')}>
                  <IconCheck /> Approve Document
                </button>
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

// === Multi-doc Final Approval popup ===
function FinalApprovalPopup({ onClose, onApproveAll, onReject }) {
  const docKeys = ['aadhar', 'pan', 'bank', 'dl'].filter(k => AIV.KYC_DOC_DATA[k].fields.length > 0);
  const [active, setActive] = useStateK(docKeys[0]);
  const [showReject, setShowReject] = useStateK(false);
  const [reason, setReason] = useStateK('');
  const [submitting, setSubmitting] = useStateK(false);

function approve() {
    setSubmitting(true);
    setTimeout(() => { setSubmitting(false); onApproveAll(); }, 1400);
  }

function rejectAll() {
    setSubmitting(true);
    setTimeout(() => { setSubmitting(false); onReject(reason); }, 1000);
  }

return (
    <div className="kyc-popup-overlay" onClick={onClose}>
      <div className="kyc-popup wide" onClick={(e) => e.stopPropagation()}>
        <div className="kyc-popup-header">
          <div className="kyc-popup-header-left">
            <img src="https://img.icons8.com/3d-fluency/200/security-shield-green.png" className="kyc-popup-header-icon" alt="" />
            <div>
              <div className="kyc-popup-title">Final Approval — Arjun Mehta</div>
              <div className="kyc-popup-sub">Review all KYC documents below before granting final approval</div>
            </div>
          </div>
          <button className="panel-close" onClick={onClose}><IconClose /></button>
        </div>

<div className="doc-tabs">
          {docKeys.map(k => (
            <button key={k} className={`doc-tab ${active === k ? 'active' : ''}`} onClick={() => {
              setActive(k);
              setTimeout(() => {
                const el = document.getElementById(`doc-${k}`);
                if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
              }, 0);
            }}>
              <img src={AIV.KYC_DOC_DATA[k].icon} alt="" />
              {AIV.KYC_DOC_DATA[k].name}
              <span className="dot-success"></span>
            </button>
          ))}
        </div>

<div className="kyc-popup-body multi" onScroll={(e) => {
          // Update active tab as user scrolls
          const container = e.currentTarget;
          for (const k of docKeys) {
            const el = document.getElementById(`doc-${k}`);
            if (!el) continue;
            const rect = el.getBoundingClientRect();
            const cRect = container.getBoundingClientRect();
            if (rect.top - cRect.top >= -50 && rect.top - cRect.top < 200) {
              setActive(k); break;
            }
          }
        }}>
          {docKeys.map(k => <DocBlock key={k} docKey={k} />)}
          <div className="approval-summary">
            <div className="approval-summary-icon">✓</div>
            <div>
              <div className="approval-summary-title">All {docKeys.length} documents verified by HR Admin</div>
              <div className="approval-summary-sub">Ravi Kumar · 28 Apr 2025 · OCR match score 98%</div>
            </div>
          </div>
        </div>

{showReject && (
          <div className="reject-bar">
            <textarea className="textarea" placeholder="Reason — explain why approval is being denied (will be sent to HR Admin)…"
              value={reason} onChange={e => setReason(e.target.value)} autoFocus />
          </div>
        )}

<div className="kyc-popup-footer">
          <div className="kyc-popup-footer-left">
            {showReject ? 'Add a reason — this will be sent back to HR Admin.' : 'All KYC verified · Offer accepted · Ready for final approval'}
          </div>
          <div className="kyc-popup-footer-right">
            {showReject ? (
              <>
                <button className="btn-secondary" style={{ height: 44 }} onClick={() => setShowReject(false)} disabled={submitting}>Cancel</button>
                <button className="btn-reject" disabled={!reason.trim() || submitting} onClick={rejectAll}>
                  {submitting ? <><div className="spinner" style={{ borderTopColor: 'var(--red)' }}></div>Rejecting…</> : 'Send back to HR'}
                </button>
              </>
            ) : (
              <>
                <button className="btn-reject" onClick={() => setShowReject(true)} disabled={submitting}>Reject</button>
                <button className="btn-verify" onClick={approve} disabled={submitting}>
                  {submitting ? <><div className="spinner"></div>Approving…</> : <><IconCheck /> Final Approval</>}
                </button>
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

window.KycPopup = KycPopup;
window.FinalApprovalPopup = FinalApprovalPopup;