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

{s.state === 'done' ? : i + 1}

{s.label}

{i < steps.length - 1 && (

)} ))}

); } /* INITIAL DATA */ const initialDepts = { accounts: { label: 'Accounts', full: 'Accounts Department', color: '#D97706', items: [ { id: 'A1', name: 'Invoices (Physical)', status: 'cleared', date: 'Apr 28, 2025' }, { id: 'A2', name: 'Invoice / Collection / Outstanding Data', status: 'cleared', date: 'Apr 29, 2025' }, { id: 'A3', name: 'Petty Cash Statement & Vouchers', status: 'pending', due: 'Due: May 5, 2025', sub: 'Awaiting physical vouchers' }, { id: 'A4', name: 'Tour Expenses Statement & Vouchers', status: 'pending', due: 'Due: May 10, 2025', sub: 'Trip report outstanding' }, ], }, it: { label: 'IT & Systems', full: 'IT & Systems Department', color: '#2563EB', items: [ { id: 'I1', name: 'Laptop Return', status: 'cleared', date: 'Apr 30, 2025' }, { id: 'I2', name: 'Access Cards & Keys', status: 'cleared', date: 'Apr 30, 2025' }, { id: 'I3', name: 'Email Account Deactivation', status: 'cleared', date: 'May 1, 2025' }, { id: 'I4', name: 'Software Licenses Revoked', status: 'cleared', date: 'May 1, 2025' }, { id: 'I5', name: 'Data Backup Completed', status: 'cleared', date: 'May 1, 2025' }, ], completedOn: 'May 1, 2025', }, admin: { label: 'Admin', full: 'Admin Department', color: '#7C3AED', items: [ { id: 'AD1', name: 'ID Card Return', status: 'cleared', date: 'Apr 30, 2025' }, { id: 'AD2', name: 'Parking Access Revoked', status: 'cleared', date: 'Apr 30, 2025' }, { id: 'AD3', name: 'Locker / Desk Cleared', status: 'cleared', date: 'May 1, 2025' }, ], completedOn: 'May 1, 2025', }, pm: { label: 'Project Manager', full: 'Project Manager Clearance', color: '#16A34A', items: [ { id: 'P1', name: 'Project Handover Completed', status: 'cleared', date: 'Apr 29, 2025' }, { id: 'P2', name: 'Knowledge Transfer Done', status: 'cleared', date: 'Apr 30, 2025' }, { id: 'P3', name: 'Client Transition Sign-off', status: 'cleared', date: 'May 1, 2025' }, ], completedOn: 'May 1, 2025', }, }; function isDeptCleared(d){ return d.items.every(it => it.status === 'cleared'); } /* ITEM ROW */ function ItemRow({ it, onMark, justCleared }){ const cleared = it.status === 'cleared'; return (

{cleared ? : }

{it.name}

{!cleared && it.sub &&

{it.sub}

}

{cleared ? it.date : it.due}

{cleared ? ( Cleared ) : ( <> Pending )}

); } /* MARK MODAL */ function MarkModal({ item, onClose, onConfirm }){ const today = new Date().toISOString().slice(0, 10); const [dateCleared, setDateCleared] = useState(today); const [clearedBy, setClearedBy] = useState(''); const [notes, setNotes] = useState(''); const [received, setReceived] = useState(false); // last working day = 2025-05-31; warn if after const showWarn = dateCleared > '2025-05-31'; const canConfirm = clearedBy.trim().length > 0; return (

{ if (e.target === e.currentTarget) onClose(); }}>

Mark Item as Cleared

{item.name}

Date Cleared

setDateCleared(e.target.value)} />

Cleared By

setClearedBy(e.target.value)} placeholder="Name of person who cleared" />

Notes

setNotes(e.target.value)} placeholder="Optional confirmation notes" />
        </div>

<div className="toggle-row">
          <div className={'toggle ' + (received ? 'on' : '')} onClick={()=>setReceived(v=>!v)} role="switch" aria-checked={received} />
          <div className="toggle-text">Mark document as physically received</div>
        </div>

{showWarn && (
          <div className="amber-warn">
            <Ic.triWarn />
            <div>This item is being cleared after the last working date (May 31, 2025).</div>
          </div>
        )}

<div className="modal-foot">
          <button className="btn btn-secondary" onClick={onClose}>Cancel</button>
          <button className="btn btn-success" disabled={!canConfirm} onClick={()=> canConfirm && onConfirm({
            dateCleared, clearedBy, notes, received,
          })} style={ !canConfirm ? { background:'#A7F3D0', boxShadow:'none', cursor:'not-allowed' } : null }>
            <Ic.check /> Confirm Clearance
          </button>
        </div>
      </div>
    </div>
  );
}

/* APP */
function ClearanceScreen({ nav }){
  const [depts, setDepts]   = useState(initialDepts);
  const [activeTab, setTab] = useState('accounts');
  const [modalItem, setModalItem] = useState(null);
  const [justClearedId, setJustClearedId] = useState(null);
  const [toast, setToast] = useState(null);

const order = ['accounts','it','admin','pm'];

const totalDepts = order.length;
  const clearedDepts = order.filter(k => isDeptCleared(depts[k])).length;
  const progress = (clearedDepts / totalDepts) * 100;
  const allCleared = clearedDepts === totalDepts;

const current = depts[activeTab];
  const currentCleared = isDeptCleared(current);

return (
    <div className="shell">
      <div className="deco-glow" />

{/* TOP NAV */}
      <div className="topnav">
        <div className="nav-left">
          <img src="https://i.ibb.co/s9CvkVdd/aivision21-logo.png" alt="AIVision" onError={(e)=>e.target.style.display='none'} />
          <div className="divider" />
          <div className="title">AIVision HRMS<span className="crumb"> / Clearance</span></div>
        </div>
        <div className="nav-right">
          <div className="who">
            <div className="name">Ravi Kumar</div>
            <div className="role">HR Manager</div>
          </div>
          <div className="av-rk">RK</div>
        </div>
      </div>

<div className="card-wrap">
        <div className="card">
          {/* card top */}
          <div className="card-top">
            <div className="l">
              <img src="https://i.ibb.co/s9CvkVdd/aivision21-logo.png" alt="" onError={(e)=>e.target.style.display='none'} />
              <div className="t">AIVision HRMS · Clearance Tracker</div>
            </div>
            <div className="r">
              <span className="lbl">Need help?</span>
              <span className="em">hr@aivision21.co</span>
            </div>
          </div>

{/* SUMMARY */}
          <div className="summary">
            <div className="sum-emp">
              <div className="av">PM</div>
              <div>
                <div className="name">Priya Malhotra</div>
                <div className="desig">Senior Product Designer · May 31, 2025</div>
                <span className="pill" style={{ background:'#FEF3C7', color:'#D97706', borderColor:'#FCD34D', marginTop: 4 }}>Resignation</span>
              </div>
            </div>
            <div className="sum-mid">
              <div className="label">Overall Clearance</div>
              <div className="prog-shell">
                <div className="prog-fill" style={{ width: `${progress}%` }} />
              </div>
              <div className="progress-text">{clearedDepts} of {totalDepts} departments cleared</div>
            </div>
            <div className="sum-right">
              <button className="btn btn-secondary" onClick={() => { setToast('Reminder sent to pending departments.'); setTimeout(()=>setToast(null), 2400); }}>
                <Ic.bell /> Notify Pending Depts
              </button>
              <div className="has-tip">
                <button className="btn btn-primary" disabled={!allCleared}
                        onClick={() => allCleared && nav('settlement')}>
                  Proceed to Settlement <Ic.arrow />
                </button>
                {!allCleared && <div className="tip">Accounts clearance pending</div>}
              </div>
            </div>
          </div>

{/* BLOCKING BANNER */}
          <div className="block-wrap">
            <div className={'block ' + (allCleared ? 'hide' : '')}>
              <Ic.octWarn />
              <div>
                <strong>Accounts clearance is pending</strong> — {depts.accounts.items.filter(i => i.status !== 'cleared').length} of {depts.accounts.items.length} items outstanding.
                Settlement cannot be processed until all departments clear.
              </div>
            </div>
          </div>

{/* TABS */}
          <div className="tabbar">
            {order.map(k => {
              const d = depts[k];
              const cleared = isDeptCleared(d);
              const active = activeTab === k;
              return (
                <div key={k}
                     className={'tab ' + (active ? 'active' : '')}
                     style={ active ? { color: d.color, borderBottomColor: d.color } : null }
                     onClick={() => setTab(k)}>
                  <span className="dot" style={{ background: d.color }} />
                  {d.label}
                  <span className="tab-badge" style={ cleared
                    ? { background:'#DCFCE7', color:'#16A34A' }
                    : { background:'#FEF3C7', color:'#D97706' }}>
                    {cleared ? 'Cleared' : 'Pending'}
                  </span>
                </div>
              );
            })}
          </div>

{/* TAB CONTENT */}
          <div className="tab-content" key={activeTab}>
            <div className="dept-head">
              <h3>{current.full}</h3>
              <span className="pill" style={ currentCleared
                ? { background:'#DCFCE7', color:'#16A34A', borderColor:'#86EFAC' }
                : { background:'#FEF3C7', color:'#D97706', borderColor:'#FCD34D' }}>
                {currentCleared ? 'Cleared' : 'Pending'}
              </span>
            </div>
            <div className="dept-sub">
              Completed {current.items.filter(i => i.status==='cleared').length} of {current.items.length} items
            </div>

<div className="items">
              {current.items.map(it => (
                <ItemRow key={it.id} it={it}
                  justCleared={justClearedId === it.id}
                  onMark={() => setModalItem({ ...it, _dept: activeTab })} />
              ))}
            </div>

{currentCleared && (
              <div className="done-summary">
                <Ic.checkBold />
                {current.full.replace(' Department','').replace(' Clearance','')} clearance completed on {current.completedOn}.
                <span className="extra">All {current.items.length} items cleared.</span>
              </div>
            )}

{!currentCleared && activeTab === 'accounts' && (
              <div className="dept-actions">
                <button className="ghost"><Ic.plus /> Add Clearance Item</button>
                <button className="btn btn-secondary" style={{ height: 36 }} onClick={()=>{ setToast('Reminder sent to Accounts.'); setTimeout(()=>setToast(null), 2400); }}>
                  <Ic.bell /> Send Reminder to Accounts
                </button>
              </div>
            )}
          </div>

{/* FOOTER */}
          <div className="foot">
            <button className="foot-ghost" onClick={() => nav('initiation')}>
              <Ic.back /> Back to Initiation
            </button>
            <div className="has-tip">
              <button className="btn btn-primary" disabled={!allCleared}
                      onClick={() => allCleared && nav('settlement')}>
                Proceed to Settlement <Ic.arrow />
              </button>
              {!allCleared && <div className="tip">Accounts clearance pending</div>}
            </div>
          </div>
        </div>
      </div>

{modalItem && (
        <MarkModal
          item={modalItem}
          onClose={() => setModalItem(null)}
          onConfirm={(info) => confirmMark(modalItem._dept, modalItem.id, info)}
        />
      )}

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

window.ClearanceScreen = ClearanceScreen;

})();