;(function(){ const { useState, useMemo, useEffect, useRef } = React; /* ── ICONS ──────────────────────────────────────────────── */ const Icon = { grid: (p) => , users: (p) => , checkSquare: (p) => , dollar: (p) => , file: (p) => , clock: (p) => , logout: () => , plus: () => , search: (p) => , chevron: () => , exit: () => , warn: () => , check: () => , cal: (p) => , arrow: () => , filter: () => , }; /* ── DATA ───────────────────────────────────────────────── */ const EMPLOYEES = [ { id: 'AIV-2024-0089', name: 'Priya Malhotra', initials: 'PM', color: '#BD1313', desig: 'Senior Product Designer', dept: 'Design & Product', exitType: 'Resignation', phase: 'Phase 2 Clearance', clearance: 60, lastDay: 'May 31, 2025', daysLeft: 28, email: 'priya.malhotra@aivision21.com' }, { id: 'AIV-2024-0102', name: 'Kiran Desai', initials: 'KD', color: '#0369A1', desig: 'Backend Developer', dept: 'Engineering', exitType: 'Resignation', phase: 'Phase 2 Clearance', clearance: 60, lastDay: 'Jun 15, 2025', daysLeft: 18, email: 'kiran.desai@aivision21.com' }, { id: 'AIV-2023-0071', name: 'Meera Joshi', initials: 'MJ', color: '#7C3AED', desig: 'Marketing Analyst', dept: 'Marketing', exitType: 'Contract End', phase: 'Phase 3 Settlement', clearance: 100, lastDay: 'May 30, 2025', daysLeft: 2, email: 'meera.joshi@aivision21.com' }, { id: 'AIV-2024-0118', name: 'Sameer Rao', initials: 'SR', color: '#059669', desig: 'Sales Executive', dept: 'Sales', exitType: 'Termination', phase: 'Phase 1 Initiation', clearance: 0, lastDay: 'May 28, 2025', daysLeft: 0, email: 'sameer.rao@aivision21.com' }, { id: 'AIV-2022-0045', name: 'Pooja Sharma', initials: 'PS', color: '#D97706', desig: 'Finance Executive', dept: 'Finance', exitType: 'Retirement', phase: 'Phase 5 Completed', clearance: 100, lastDay: 'Apr 30, 2025', daysLeft: null, email: 'pooja.sharma@aivision21.com' }, ]; const EXIT_TYPES = { Resignation: { bg:'#FEF3C7', fg:'#D97706', bd:'#FCD34D', dot:'#D97706', desc:'Employee-initiated' }, Termination: { bg:'#FEF2F2', fg:'#DC2626', bd:'#FECACA', dot:'#DC2626', desc:'Company-initiated' }, Retirement: { bg:'#FAF5FF', fg:'#7C3AED', bd:'#DDD6FE', dot:'#7C3AED', desc:'Superannuation' }, 'Contract End': { bg:'#EFF6FF', fg:'#2563EB', bd:'#BFDBFE', dot:'#2563EB', desc:'Fixed-term completion' }, 'Internship End':{bg:'#DCFCE7', fg:'#16A34A', bd:'#86EFAC', dot:'#16A34A', desc:'Internship close' }, }; const PHASES = { 'Phase 1 Initiation': { bg:'#FDF2F2', fg:'#BD1313', bd:'#F5BFBF', fill:'#BD1313' }, 'Phase 2 Clearance': { bg:'#FEF3C7', fg:'#D97706', bd:'#FCD34D', fill:'#D97706' }, 'Phase 3 Settlement': { bg:'#EFF6FF', fg:'#2563EB', bd:'#BFDBFE', fill:'#2563EB' }, 'Phase 4 Dispatch': { bg:'#FAF5FF', fg:'#7C3AED', bd:'#DDD6FE', fill:'#7C3AED' }, 'Phase 5 Completed': { bg:'#DCFCE7', fg:'#16A34A', bd:'#86EFAC', fill:'#16A34A' }, }; /* ── SIDEBAR ────────────────────────────────────────────── */ function Sidebar({ active, setActive }) { const items = [ { id: 'dashboard', label: 'Dashboard', icon: Icon.grid }, { id: 'cases', label: 'Active Cases', icon: Icon.users }, { id: 'clearance', label: 'Clearance', icon: Icon.checkSquare }, { id: 'settle', label: 'Settlements', icon: Icon.dollar }, { id: 'docs', label: 'Documents', icon: Icon.file }, { id: 'audit', label: 'Audit Logs', icon: Icon.clock }, ]; return ( ); } /* ── KPI ROW ────────────────────────────────────────────── */ function KpiRow() { const kpis = [ { label: 'Active Cases', value: 4, sub: 'Currently in pipeline', dot: '#FFFFFF' }, { label: 'Pending Clearance', value: 2, sub: 'Needs attention', dot: '#D97706' }, { label: 'Awaiting Settlement', value: 1, sub: 'F&F pending', dot: '#3B82F6' }, { label: 'Completed This Month', value: 2, sub: 'Successfully closed', dot: '#16A34A' }, ]; return (
{kpis.map((k,i) => (
{k.label}
{k.value}
{k.sub}
))}
); } /* ── TABLE ──────────────────────────────────────────────── */ function CasesTable({ onOpenInitiate }) { const [q, setQ] = useState(''); const [phaseFilter, setPhaseFilter] = useState('All Phases'); const [openSel, setOpenSel] = useState(false); const selRef = useRef(null); useEffect(() => { const h = (e) => { if (selRef.current && !selRef.current.contains(e.target)) setOpenSel(false); }; document.addEventListener('mousedown', h); return () => document.removeEventListener('mousedown', h); }, []); const phaseOptions = ['All Phases', ...Object.keys(PHASES)]; const rows = useMemo(() => EMPLOYEES.filter(r => { if (q.trim()){ const t = q.toLowerCase(); if (!(r.name.toLowerCase().includes(t) || r.id.toLowerCase().includes(t) || r.dept.toLowerCase().includes(t))) return false; } if (phaseFilter !== 'All Phases' && r.phase !== phaseFilter) return false; return true; }), [q, phaseFilter]); return (

Active Offboarding Cases

4 employees in exit pipeline
setQ(e.target.value)} />
setOpenSel(v=>!v)}> {phaseFilter}
{openSel && (
{phaseOptions.map(p => (
{ setPhaseFilter(p); setOpenSel(false); }}> {p}
))}
)}
{rows.map(r => { const exit = EXIT_TYPES[r.exitType] || EXIT_TYPES['Resignation']; const phase = PHASES[r.phase]; const fillColor = r.clearance === 100 ? '#16A34A' : phase.fill; // day chip let chip = null; if (r.phase === 'Phase 5 Completed') { chip = Completed; } else if (r.daysLeft === 0) { chip = Today; } else if (r.daysLeft <= 7) { chip = {r.daysLeft} days; } else { chip = {r.daysLeft} days; } return ( ); })} {rows.length === 0 && ( )}
Employee Department Exit Type Phase Clearance Last Working Day Action
{r.initials}
{r.name}
{r.desig}
{r.id}
 {r.dept} {r.exitType} {r.phase}
{r.clearance}%
{r.lastDay}
{chip}
No cases match your filters.
); } /* ── INITIATE EXIT MODAL ────────────────────────────────── */ function InitiateModal({ onClose, onSuccess }) { const [query, setQuery] = useState(''); const [selected, setSelected] = useState(null); const [exitType, setExitType] = useState(null); const [lastDate, setLastDate] = useState(''); const results = useMemo(() => { if (query.trim().length < 2) return []; const t = query.toLowerCase(); // demo: include a couple of non-offboarding candidates to feel real const pool = [ ...EMPLOYEES.filter(e => e.phase !== 'Phase 5 Completed'), { id: 'AIV-2023-0044', name: 'Priyanka Reddy', initials: 'PR', color:'#0EA5E9', desig: 'QA Engineer', dept: 'Engineering' }, { id: 'AIV-2024-0156', name: 'Arjun Verma', initials: 'AV', color:'#EA580C', desig: 'Account Manager', dept: 'Sales' }, ]; return pool.filter(e => e.name.toLowerCase().includes(t) || e.id.toLowerCase().includes(t) || (e.email||'').toLowerCase().includes(t)).slice(0, 6); }, [query]); const showResults = query.trim().length >= 2 && !selected; // pre-select handling: if user types "priya" and not selected, we let them click. spec asks to "pre-fill priya data" — we satisfy by showing her at top of results. // and once selected — set defaults for her. useEffect(() => { if (selected && selected.name === 'Priya Malhotra') { setExitType(prev => prev || 'Resignation'); setLastDate(prev => prev || '2025-05-31'); } }, [selected]); const canProceed = !!(selected && exitType && lastDate); return (
{ if (e.target === e.currentTarget) onClose(); }}>

Initiate Employee Exit

Search for the employee to begin the exit process
Employee Name or ID
{ setQuery(e.target.value); if (selected) setSelected(null); }} autoFocus />
{showResults && results.length > 0 && (
{results.map(r => (
{ setSelected(r); setQuery(r.name); }}>
{r.initials}
{r.name}
{r.desig}
{r.dept}
))}
)} {showResults && results.length === 0 && (
No matching employees.
)}
{selected && (
{selected.initials}
{selected.name}
{selected.desig} · {selected.id}
{selected.dept}
)}
Exit Type
{['Resignation','Termination','Contract End','Retirement'].map(t => { const conf = EXIT_TYPES[t]; const sel = exitType === t; return (
setExitType(t)} style={ sel ? { borderColor: conf.bd, background: conf.bg } : null }>
{t}
{conf.desc}
); })}
Last Working Date
setLastDate(e.target.value)} />
This action will notify all department heads and begin the formal exit process. This cannot be undone.
); } /* ── APP ────────────────────────────────────────────────── */ function DashboardScreen({ nav }){ const [active, setActive] = useState('dashboard'); const [modal, setModal] = useState(false); const [toast, setToast] = useState(null); useEffect(() => { const onKey = (e) => { if (e.key === 'Escape' && modal) setModal(false); }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [modal]); return (

Offboarding Dashboard

May 2025 · 4 active cases
Avg. Exit Duration:28 days
Overdue Items:1
setModal(true)} />
{modal && ( setModal(false)} onSuccess={(emp)=>{ setModal(false); setToast(`Exit initiated for ${emp.name}. Opening exit form…`); setTimeout(()=>{ setToast(null); nav('initiation'); }, 900); }} /> )} {toast && (
{toast}
)}
); } window.DashboardScreen = DashboardScreen; })();