e.target.style.display='none'} />

AIVision HRMS / Offboarding

Ravi Kumar

HR Manager

); } /* STEPPER */ function Stepper(){ const steps = ['Initiation','Clearance','Settlement','Dispatch','Completed']; return (

{steps.map((s, i) => (

{i+1}

{s}

{i < steps.length - 1 &&

} ))}

); } /* CHECKBOX */ function Check({ checked, disabled, onClick }){ const cls = 'cbox ' + (disabled ? 'disabled ' : '') + (checked ? 'checked' : ''); return (

{ if (!disabled && onClick) onClick(); }} role="checkbox" aria-checked={checked}> {checked && }

); } /* SUCCESS MODAL */ function SuccessModal({ onGo }){ const confettiColors = ['#BD1313','#FBBF24','#3B82F6','#16A34A','#A855F7','#F97316','#EC4899','#06B6D4','#FACC15','#EF4444']; const confetti = useMemo(() => { return new Array(18).fill(0).map((_,i) => ({ left: 4 + Math.random() * 92, delay: Math.random() * 0.35, color: confettiColors[i % confettiColors.length], shape: i % 3, duration: 1.3 + Math.random() * 0.8, })); }, []); return (

{confetti.map((c, i) => (

))}

Exit Process Initiated!

Priya Malhotra's offboarding has been initiated successfully.

Employee IDAIV-2024-0089

Last Working DayMay 31, 2025

Departments NotifiedAccounts, IT, Admin, PM

All department heads notified via email

Audit log entry created

Clearance tracker activated

); } /* APP */ function InitiationScreen({ nav }){ const [locked, setLocked] = useState(false); const [docs, setDocs] = useState({ 'TMPL-001': true, 'TMPL-002': true, 'TMPL-003': true, 'TMPL-004': true, 'TMPL-005': false, // disabled }); const [form, setForm] = useState({ resignDate: '2025-04-28', lastDay: '2025-05-31', notice: '30 days', noticeStatus: 'Serving Notice', reason: 'Personal reasons — pursuing higher education.', reportingMgr: 'Arjun Nair', handoverTo: 'Rohit Mehra', deptHead: 'Arjun Nair — VP Product', handoverDeadline: '2025-05-25', bank: 'XXXX XXXX 4521', bankName: 'HDFC Bank', ifsc: 'HDFC0001234', paymentMode: 'Bank Transfer (NEFT)', }); const [success, setSuccess] = useState(false); const [toast, setToast] = useState(null); const onField = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value })); const handleLockClick = () => { if (!locked) setLocked(true); }; const initiate = () => { if (!locked) return; setSuccess(true); }; return (

{/* card top */}

e.target.style.display='none'} />

AIVision HRMS · Offboarding

Need help? hr@aivision21.co

{/* Employee Banner */}

Priya Malhotra

Senior Product Designer · Design & Product

AIV-2024-0089

Resignation 4 yrs 2 mos tenure

{/* EXIT DETAILS */}

Exit Details

Resignation Date

Last Working Date

Notice Period

Notice Status

Reason for Exit

</div>
              </div>
            </div>

{/* REPORTING & HANDOVER */}
            <div className="section">
              <div className="sec-label">Reporting & Handover</div>
              <div className="grid2">
                <div className="fld">
                  <div className="lbl">Reporting Manager</div>
                  <input className="inp" readOnly value={form.reportingMgr} />
                </div>
                <div className="fld">
                  <div className="lbl">Handover To</div>
                  <input className="inp" value={form.handoverTo} placeholder="Assign handover person" onChange={onField('handoverTo')} />
                </div>
                <div className="fld">
                  <div className="lbl">Department Head</div>
                  <input className="inp" readOnly value={form.deptHead} />
                </div>
                <div className="fld">
                  <div className="lbl">Handover Deadline</div>
                  <input className="inp" type="date" value={form.handoverDeadline} onChange={onField('handoverDeadline')} />
                </div>
              </div>
            </div>

{/* SETTLEMENT & BANKING */}
            <div className="section">
              <div className="sec-label">Settlement & Banking</div>
              <div className="grid2">
                <div className="fld">
                  <div className="lbl">Bank Account</div>
                  <input className="inp mono" readOnly value={form.bank} />
                </div>
                <div className="fld">
                  <div className="lbl">Bank Name</div>
                  <input className="inp" readOnly value={form.bankName} />
                </div>
                <div className="fld">
                  <div className="lbl">IFSC Code</div>
                  <input className="inp mono" readOnly value={form.ifsc} />
                </div>
                <div className="fld">
                  <div className="lbl">Payment Mode</div>
                  <select className="sel" value={form.paymentMode} onChange={onField('paymentMode')}>
                    <option>Bank Transfer (NEFT)</option>
                    <option>Cheque</option>
                    <option>Cash</option>
                  </select>
                </div>
              </div>

<div className="info-blue">
                <Ic.info />
                <div>Settlement will be processed on <strong>June 10, 2025</strong> as per company policy.</div>
              </div>
            </div>

{/* DOCUMENTS */}
            <div className="section">
              <div className="sec-label">Documents to Generate</div>
              <div style={{ fontSize:13, color:'#64748B', marginTop:'-6px', marginBottom:12 }}>
                The following documents will be generated upon approval:
              </div>

{[
                { id: 'TMPL-001', name: 'Acceptance of Resignation' },
                { id: 'TMPL-002', name: 'Relieving Letter' },
                { id: 'TMPL-003', name: 'Experience Certificate' },
                { id: 'TMPL-004', name: 'F&F Settlement Statement' },
                { id: 'TMPL-005', name: 'Internship Completion Letter', disabled: true },
              ].map(d => (
                <div key={d.id} className={'doc-row ' + (d.disabled ? 'disabled' : '')}>
                  <Check
                    checked={!!docs[d.id]}
                    disabled={d.disabled || locked}
                    onClick={() => setDocs(prev => ({ ...prev, [d.id]: !prev[d.id] }))}
                  />
                  <div className={'doc-icon ' + (d.disabled ? 'gray' : '')}><Ic.file /></div>
                  <div>
                    <div className="doc-name">{d.name}</div>
                    <div className="doc-id mono">{d.id}</div>
                  </div>
                  {d.disabled && <div className="small">Not applicable</div>}
                </div>
              ))}
            </div>

{/* DEPARTMENT CLEARANCE */}
            <div className="section">
              <div className="sec-label">Department Clearance Required</div>
              <div style={{ fontSize:13, color:'#64748B', marginTop:'-6px', marginBottom:12 }}>
                Clearance requests will be automatically dispatched to the following departments on initiation:
              </div>
              <div className="dept-row">
                <span className="dept-chip" style={{ background:'#FEF3C7', color:'#D97706', borderColor:'#FCD34D' }}>
                  <Ic.wallet /> Accounts
                </span>
                <span className="dept-chip" style={{ background:'#EFF6FF', color:'#2563EB', borderColor:'#BFDBFE' }}>
                  <Ic.monitor /> IT & Systems
                </span>
                <span className="dept-chip" style={{ background:'#FAF5FF', color:'#7C3AED', borderColor:'#DDD6FE' }}>
                  <Ic.building /> Admin
                </span>
                <span className="dept-chip" style={{ background:'#DCFCE7', color:'#16A34A', borderColor:'#86EFAC' }}>
                  <Ic.briefcase /> Project Manager
                </span>
              </div>
            </div>

{/* LOCK SECTION */}
            <div className="warn">
              <Ic.warn />
              <div>Once locked, this form cannot be edited. All department heads will be notified automatically.</div>
            </div>

<div className="lock-row">
              <span className="lk-icon"><Ic.lock /></span>
              <span className="lk-text">Lock form to proceed</span>
              <div className={'toggle ' + (locked ? 'on' : '')} onClick={() => !locked && setLocked(true)} role="switch" aria-checked={locked} />
            </div>

<button
              className={'lock-cta ' + (locked ? 'locked' : 'unlocked')}
              onClick={handleLockClick}
              disabled={locked}
            >
              {locked
                ? (<><Ic.checkCircle /> Form Locked</>)
                : (<><Ic.lock /> Lock Form & Initiate Exit Process</>)
              }
            </button>
          </div>

{/* footer */}
          <div className="foot">
            <button className="ghost" onClick={() => nav('dashboard')}>
              <Ic.back /> Back to Dashboard
            </button>
            <div style={{ display:'flex', gap:10 }}>
              <button className="btn btn-secondary" onClick={() => { setToast('Draft saved.'); setTimeout(()=>setToast(null), 2200); }}>
                Save Draft
              </button>
              <button className="btn btn-primary" disabled={!locked} onClick={initiate}>
                Initiate Exit Process <Ic.arrow />
              </button>
            </div>
          </div>
        </div>
      </div>

{success && <SuccessModal onGo={()=>{ setSuccess(false); nav('clearance'); }} />}

{toast && (
        <div className="toast"><Ic.check style={{ color:'#86EFAC' }} /> {toast}</div>
      )}
    </div>
  );
}

window.InitiationScreen = InitiationScreen;

})();