JIDAAR \u2014 IT Asset Management System<\/title>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.0\/chart.umd.min.js\"><\/script>\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');\r\n@import url('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css');\r\n*{box-sizing:border-box;margin:0;padding:0}\r\n:root{\r\n --bg:#0b0f1a;--bg2:#111827;--bg3:#1a2236;--bg4:#222d45;--bg5:#2a3655;\r\n --accent:#4f7cff;--accent2:#7c5fff;--accent3:#00d4aa;--accent4:#ff6b6b;--accent5:#ffa940;\r\n --text:#f0f4ff;--text2:#8892b0;--text3:#4a5568;\r\n --border:#1e2d4a;--border2:#2a3a5c;\r\n --success:#00d4aa;--warning:#ffa940;--danger:#ff6b6b;--info:#4f7cff;\r\n --sidebar:250px;--radius:12px;--font:'Inter',sans-serif;--mono:'JetBrains Mono',monospace;\r\n --shadow:0 4px 24px rgba(0,0,0,.35);\r\n}\r\n.light{\r\n --bg:#f0f4fb;--bg2:#ffffff;--bg3:#e8eef8;--bg4:#dde5f5;--bg5:#d0daf0;\r\n --text:#0f1a35;--text2:#4a5568;--text3:#94a3b8;\r\n --border:#d4ddf0;--border2:#c0cce8;\r\n --shadow:0 4px 24px rgba(79,124,255,.08);\r\n}\r\nhtml,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);overflow:hidden;transition:background .3s,color .3s}\r\n::-webkit-scrollbar{width:4px;height:4px}\r\n::-webkit-scrollbar-track{background:transparent}\r\n::-webkit-scrollbar-thumb{background:var(--border2);border-radius:10px}\r\n\r\n\/* ---- LOGIN ---- *\/\r\n#login-screen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999}\r\n.login-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}\r\n.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.25}\r\n.orb1{width:500px;height:500px;background:var(--accent);top:-100px;right:-100px}\r\n.orb2{width:400px;height:400px;background:var(--accent2);bottom:-80px;left:-80px}\r\n.orb3{width:300px;height:300px;background:var(--accent3);top:50%;left:50%;transform:translate(-50%,-50%)}\r\n.login-card{position:relative;background:rgba(17,24,39,.85);border:1px solid var(--border2);border-radius:20px;padding:44px 40px;width:420px;max-width:95vw;backdrop-filter:blur(20px);box-shadow:0 30px 80px rgba(0,0,0,.5);animation:fadeUp .6s ease}\r\n.light .login-card{background:rgba(255,255,255,.9)}\r\n.login-logo{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px}\r\n.login-logo-icon{width:52px;height:52px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;box-shadow:0 8px 24px rgba(79,124,255,.4)}\r\n.login-logo-text{font-size:26px;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}\r\n.login-sub{text-align:center;color:var(--text3);font-size:13px;margin-bottom:32px;font-weight:500}\r\n.f-group{margin-bottom:18px}\r\n.f-label{font-size:12px;color:var(--text2);font-weight:700;margin-bottom:7px;display:block;letter-spacing:.04em}\r\n.f-input{width:100%;background:var(--bg3);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--text);font-family:var(--font);font-size:14px;outline:none;transition:.2s;direction:ltr}\r\n.f-input:focus{border-color:var(--accent);background:var(--bg4);box-shadow:0 0 0 4px rgba(79,124,255,.12)}\r\n.f-input::placeholder{color:var(--text3)}\r\n.btn-login{width:100%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:10px;padding:13px;font-family:var(--font);font-size:15px;font-weight:700;cursor:pointer;margin-top:4px;transition:.2s;display:flex;align-items:center;justify-content:center;gap:8px}\r\n.btn-login:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(79,124,255,.4)}\r\n.hint-box{margin-top:20px;background:rgba(79,124,255,.08);border:1px solid rgba(79,124,255,.2);border-radius:10px;padding:12px 14px;font-size:12px;color:var(--text2)}\r\n.hint-box span{color:var(--accent);font-weight:700}\r\n\r\n\/* ---- APP SHELL ---- *\/\r\n#app{display:none;height:100vh;overflow:hidden}\r\n.app-layout{display:flex;height:100%}\r\n\r\n\/* ---- SIDEBAR ---- *\/\r\n.sidebar{width:var(--sidebar);background:var(--bg2);border-left:1px solid var(--border);display:flex;flex-direction:column;transition:width .3s;flex-shrink:0;overflow:hidden;position:relative}\r\n.sidebar.collapsed{width:64px}\r\n.sb-header{padding:0 16px;height:64px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);flex-shrink:0}\r\n.sb-logo{width:38px;height:38px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;flex-shrink:0;box-shadow:0 4px 14px rgba(79,124,255,.35)}\r\n.sb-brand{white-space:nowrap;overflow:hidden}\r\n.sb-brand-name{font-size:16px;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}\r\n.sb-brand-sub{font-size:10px;color:var(--text3);font-weight:500;margin-top:-2px}\r\n.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 8px}\r\n.sb-section{margin-bottom:20px}\r\n.sb-section-lbl{font-size:9px;color:var(--text3);font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:0 10px;margin-bottom:8px;white-space:nowrap;overflow:hidden;transition:opacity .2s}\r\n.sidebar.collapsed .sb-section-lbl{opacity:0}\r\n.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;transition:.15s;color:var(--text2);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;position:relative;user-select:none}\r\n.nav-item:hover{background:var(--bg3);color:var(--text)}\r\n.nav-item.active{background:rgba(79,124,255,.14);color:var(--accent)}\r\n.nav-item.active::after{content:'';position:absolute;right:0;top:20%;height:60%;width:3px;background:var(--accent);border-radius:3px 0 0 3px}\r\n.nav-icon{width:20px;text-align:center;flex-shrink:0;font-size:15px}\r\n.nav-badge{margin-right:auto;background:var(--danger);color:#fff;font-size:9px;padding:2px 6px;border-radius:20px;font-weight:800;flex-shrink:0}\r\n.sidebar.collapsed .nav-badge{display:none}\r\n.sb-footer{padding:10px 8px;border-top:1px solid var(--border);flex-shrink:0}\r\n.sidebar-toggle{position:absolute;top:72px;left:-13px;width:26px;height:26px;background:var(--bg2);border:1px solid var(--border2);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;color:var(--text2);z-index:10;transition:.2s;box-shadow:var(--shadow)}\r\n.sidebar-toggle:hover{background:var(--accent);color:#fff;border-color:var(--accent)}\r\n\r\n\/* ---- TOPBAR ---- *\/\r\n.topbar{height:64px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex-shrink:0}\r\n.tb-left{display:flex;align-items:center;gap:12px}\r\n.tb-search{background:var(--bg3);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;gap:8px;padding:8px 14px;width:260px;transition:.2s}\r\n.tb-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,124,255,.1)}\r\n.tb-search input{background:none;border:none;outline:none;color:var(--text);font-family:var(--font);font-size:13px;width:100%}\r\n.tb-search input::placeholder{color:var(--text3)}\r\n.tb-right{display:flex;align-items:center;gap:8px}\r\n.icon-btn{width:38px;height:38px;background:var(--bg3);border:1px solid var(--border);border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);font-size:15px;transition:.15s;position:relative}\r\n.icon-btn:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)}\r\n.notif-dot{position:absolute;top:7px;right:7px;width:7px;height:7px;background:var(--danger);border-radius:50%;border:2px solid var(--bg2);animation:pulse 2s infinite}\r\n@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}\r\n.user-pill{display:flex;align-items:center;gap:9px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:5px 14px 5px 8px;cursor:pointer;transition:.15s}\r\n.user-pill:hover{background:var(--bg4);border-color:var(--border2)}\r\n.u-avatar{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff}\r\n.u-name{font-size:13px;font-weight:700}\r\n.u-role{font-size:10px;color:var(--text3)}\r\n\r\n\/* ---- CONTENT ---- *\/\r\n.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}\r\n.content{flex:1;overflow-y:auto;padding:28px}\r\n\r\n\/* ---- PAGE HEADER ---- *\/\r\n.page-header{margin-bottom:24px}\r\n.page-title{font-size:22px;font-weight:900;letter-spacing:-.02em}\r\n.page-sub{font-size:13px;color:var(--text2);margin-top:3px}\r\n\r\n\/* ---- STAT CARDS ---- *\/\r\n.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}\r\n.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px 18px;position:relative;overflow:hidden;transition:.2s;cursor:pointer}\r\n.stat-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow)}\r\n.stat-card::before{content:'';position:absolute;bottom:-30px;left:-20px;width:90px;height:90px;border-radius:50%;opacity:.07}\r\n.sc-blue::before{background:var(--accent)}\r\n.sc-purple::before{background:var(--accent2)}\r\n.sc-green::before{background:var(--success)}\r\n.sc-orange::before{background:var(--warning)}\r\n.sc-red::before{background:var(--danger)}\r\n.sc-teal::before{background:var(--accent3)}\r\n.stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:14px}\r\n.si-blue{background:rgba(79,124,255,.15);color:var(--accent)}\r\n.si-purple{background:rgba(124,95,255,.15);color:var(--accent2)}\r\n.si-green{background:rgba(0,212,170,.15);color:var(--success)}\r\n.si-orange{background:rgba(255,169,64,.15);color:var(--warning)}\r\n.si-red{background:rgba(255,107,107,.15);color:var(--danger)}\r\n.si-teal{background:rgba(0,212,170,.15);color:var(--accent3)}\r\n.stat-val{font-size:30px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}\r\n.stat-lbl{font-size:12px;color:var(--text2);margin-top:5px;font-weight:600}\r\n.stat-sub{font-size:11px;color:var(--text3);margin-top:6px;display:flex;align-items:center;gap:4px}\r\n\r\n\/* ---- CHARTS ---- *\/\r\n.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}\r\n.chart-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px}\r\n.chart-head{font-size:13px;font-weight:700;margin-bottom:16px;color:var(--text);display:flex;align-items:center;gap:8px}\r\n.chart-head i{color:var(--accent);font-size:15px}\r\n.chart-wrap{height:190px;position:relative}\r\n\r\n\/* ---- CARDS ---- *\/\r\n.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px}\r\n.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}\r\n.card-title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}\r\n.card-title i{color:var(--accent)}\r\n\r\n\/* ---- TABLE ---- *\/\r\n.tbl-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}\r\n.tbl-toolbar{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center;flex-wrap:wrap}\r\n.srch{background:var(--bg3);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;gap:8px;padding:8px 12px;flex:1;min-width:180px}\r\n.srch input{background:none;border:none;outline:none;color:var(--text);font-family:var(--font);font-size:13px;width:100%}\r\n.srch i{color:var(--text3);font-size:13px;flex-shrink:0}\r\n.sel{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text);font-family:var(--font);font-size:13px;outline:none;cursor:pointer}\r\n.sel option{background:var(--bg2)}\r\ntable{width:100%;border-collapse:collapse}\r\nthead th{padding:10px 14px;text-align:right;font-size:11px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--bg3);border-bottom:1px solid var(--border);white-space:nowrap}\r\ntbody td{padding:13px 14px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle}\r\ntbody tr:last-child td{border-bottom:none}\r\ntbody tr:hover td{background:rgba(79,124,255,.04)}\r\n.c-row{cursor:pointer}\r\n\r\n\/* ---- BADGES ---- *\/\r\n.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}\r\n.b-active,.b-available{background:rgba(0,212,170,.12);color:var(--success);border:1px solid rgba(0,212,170,.25)}\r\n.b-inactive{background:rgba(255,107,107,.12);color:var(--danger);border:1px solid rgba(255,107,107,.25)}\r\n.b-assigned{background:rgba(79,124,255,.12);color:var(--accent);border:1px solid rgba(79,124,255,.25)}\r\n.b-maintenance{background:rgba(255,169,64,.12);color:var(--warning);border:1px solid rgba(255,169,64,.25)}\r\n.b-retired{background:rgba(148,163,184,.1);color:var(--text3);border:1px solid rgba(148,163,184,.2)}\r\n.b-info{background:rgba(79,124,255,.1);color:var(--accent);border:1px solid rgba(79,124,255,.2);font-size:10px}\r\n.b-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}\r\n\r\n\/* ---- BUTTONS ---- *\/\r\n.btn{border:none;border-radius:9px;padding:9px 18px;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}\r\n.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}\r\n.btn-primary:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 8px 20px rgba(79,124,255,.3)}\r\n.btn-ghost{background:transparent;border:1px solid var(--border2);color:var(--text2)}\r\n.btn-ghost:hover{background:var(--bg3);color:var(--text);border-color:var(--border2)}\r\n.btn-danger{background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.25);color:var(--danger)}\r\n.btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}\r\n.btn-success{background:rgba(0,212,170,.12);border:1px solid rgba(0,212,170,.25);color:var(--success)}\r\n.btn-success:hover{background:var(--success);color:#fff}\r\n.btn-sm{padding:6px 13px;font-size:12px;border-radius:8px}\r\n.btn-xs{padding:4px 10px;font-size:11px;border-radius:7px}\r\n\r\n\/* ---- MODAL ---- *\/\r\n.overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);z-index:500;display:none;align-items:center;justify-content:center;padding:16px}\r\n.overlay.open{display:flex}\r\n.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:18px;width:680px;max-width:100%;max-height:92vh;overflow-y:auto;animation:fadeUp .3s ease;position:relative}\r\n.modal-sm{width:440px}\r\n.modal-lg{width:820px}\r\n.m-head{padding:22px 26px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg2);z-index:2;border-radius:18px 18px 0 0}\r\n.m-head h3{font-size:16px;font-weight:800}\r\n.m-close{width:32px;height:32px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);font-size:13px;transition:.15s}\r\n.m-close:hover{background:var(--danger);color:#fff;border-color:var(--danger)}\r\n.m-body{padding:24px 26px}\r\n.m-footer{padding:16px 26px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;background:var(--bg2);border-radius:0 0 18px 18px}\r\n.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}\r\n.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}\r\n.fg{margin-bottom:14px}\r\n.fg label{display:block;font-size:11px;color:var(--text2);font-weight:700;margin-bottom:6px;letter-spacing:.04em;text-transform:uppercase}\r\n.fc{width:100%;background:var(--bg3);border:1.5px solid var(--border);border-radius:9px;padding:9px 12px;color:var(--text);font-family:var(--font);font-size:13px;outline:none;transition:.2s;direction:ltr}\r\n.fc:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,124,255,.1)}\r\n.fc::placeholder{color:var(--text3)}\r\nselect.fc option{background:var(--bg2)}\r\ntextarea.fc{resize:vertical;min-height:80px}\r\n.sec-div{border:none;border-top:1px solid var(--border);margin:18px 0}\r\n\r\n\/* ---- DEVICE ICONS ---- *\/\r\n.dev-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}\r\n.di-laptop{background:rgba(79,124,255,.12);color:var(--accent)}\r\n.di-desktop{background:rgba(124,95,255,.12);color:var(--accent2)}\r\n.di-printer{background:rgba(255,169,64,.12);color:var(--warning)}\r\n.di-router,.di-switch,.di-ap{background:rgba(0,212,170,.12);color:var(--success)}\r\n.di-monitor{background:rgba(0,188,212,.12);color:#00bcd4}\r\n.di-other{background:rgba(255,107,107,.12);color:var(--danger)}\r\n\r\n\/* ---- ACTIVITY ---- *\/\r\n.act-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}\r\n.act-item:last-child{border-bottom:none}\r\n.act-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}\r\n.act-text{font-size:13px;line-height:1.5;flex:1}\r\n.act-time{font-size:11px;color:var(--text3);margin-top:3px}\r\n\r\n\/* ---- HISTORY TIMELINE ---- *\/\r\n.tl-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}\r\n.tl-item:last-child{border-bottom:none}\r\n.tl-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-top:5px;flex-shrink:0}\r\n.tl-info{flex:1}\r\n.tl-name{font-size:13px;font-weight:600}\r\n.tl-meta{font-size:11px;color:var(--text3);margin-top:2px}\r\n\r\n\/* ---- DETAIL GRID ---- *\/\r\n.d-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}\r\n.d-item{background:var(--bg3);border-radius:9px;padding:11px 13px}\r\n.d-lbl{font-size:10px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}\r\n.d-val{font-size:13px;font-weight:600}\r\n.mono{font-family:var(--mono);font-size:12px}\r\n\r\n\/* ---- TABS ---- *\/\r\n.tabs{display:flex;background:var(--bg3);border-radius:10px;padding:4px;margin-bottom:20px;gap:4px}\r\n.tab-btn{flex:1;text-align:center;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:.15s;color:var(--text2);border:none;background:none;font-family:var(--font);white-space:nowrap}\r\n.tab-btn.active{background:var(--bg2);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.15)}\r\n\r\n\/* ---- USER TAG ---- *\/\r\n.u-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(79,124,255,.1);border:1px solid rgba(79,124,255,.2);color:var(--accent);border-radius:20px;padding:3px 10px;font-size:12px;font-weight:600}\r\n.u-tag-none{color:var(--text3);font-size:12px;font-style:italic}\r\n\r\n\/* ---- AVATAR ---- *\/\r\n.av{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0}\r\n\r\n\/* ---- PAGINATION ---- *\/\r\n.pag{display:flex;align-items:center;gap:6px;justify-content:center;padding:16px}\r\n.pag-btn{min-width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;font-weight:700;background:var(--bg3);border:1px solid var(--border);color:var(--text2);transition:.15px;padding:0 8px}\r\n.pag-btn:hover,.pag-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}\r\n\r\n\/* ---- PROGRESS ---- *\/\r\n.progress{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;margin-top:8px}\r\n.progress-fill{height:100%;border-radius:3px;transition:width .5s ease}\r\n\r\n\/* ---- QR ---- *\/\r\n.qr-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 0}\r\n\r\n\/* ---- TOASTS ---- *\/\r\n.toast-box{position:fixed;bottom:24px;left:24px;z-index:9000;display:flex;flex-direction:column;gap:8px}\r\n.toast{background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:13px 16px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;min-width:240px;max-width:340px;box-shadow:0 12px 40px rgba(0,0,0,.3);animation:slideIn .3s ease}\r\n.toast.t-success{border-right:3px solid var(--success)}\r\n.toast.t-error{border-right:3px solid var(--danger)}\r\n.toast.t-info{border-right:3px solid var(--accent)}\r\n.toast.t-warning{border-right:3px solid var(--warning)}\r\n\r\n\/* ---- NOTIF PANEL ---- *\/\r\n.notif-panel{position:absolute;top:46px;left:0;width:340px;background:var(--bg2);border:1px solid var(--border2);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);z-index:50;overflow:hidden;animation:fadeUp .2s ease}\r\n.n-head{padding:13px 16px;border-bottom:1px solid var(--border);font-size:13px;font-weight:800;display:flex;justify-content:space-between;align-items:center}\r\n.n-item{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);transition:.15s;cursor:pointer}\r\n.n-item:hover{background:var(--bg3)}\r\n.n-item.unread{background:rgba(79,124,255,.04)}\r\n.n-item:last-child{border-bottom:none}\r\n.n-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}\r\n.n-txt{font-size:12px;line-height:1.5}\r\n.n-time{font-size:10px;color:var(--text3);margin-top:2px}\r\n\r\n\/* ---- EMPTY ---- *\/\r\n.empty{text-align:center;padding:52px 20px;color:var(--text2)}\r\n.empty i{font-size:44px;color:var(--text3);margin-bottom:14px;display:block}\r\n.empty h4{font-size:15px;font-weight:700;margin-bottom:6px;color:var(--text)}\r\n.empty p{font-size:13px;color:var(--text3)}\r\n\r\n\/* ---- REPORT BARS ---- *\/\r\n.rep-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px}\r\n.rep-lbl{width:100px;font-size:12px;color:var(--text2);text-align:right;flex-shrink:0}\r\n.rep-track{flex:1;background:var(--bg3);border-radius:4px;height:22px;overflow:hidden}\r\n.rep-fill{height:100%;border-radius:4px;display:flex;align-items:center;padding-right:8px;font-size:11px;font-weight:700;color:#fff;transition:width .6s ease}\r\n.rep-count{width:28px;font-size:12px;font-weight:700;flex-shrink:0}\r\n\r\n\/* ---- ANIMATIONS ---- *\/\r\n@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}\r\n@keyframes slideIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}\r\n.fade-in{animation:fadeUp .4s ease}\r\n\r\n\/* ---- RESPONSIVE ---- *\/\r\n@media(max-width:900px){\r\n .charts-grid{grid-template-columns:1fr}\r\n .f2,.f3{grid-template-columns:1fr}\r\n .tb-search{width:180px}\r\n}\r\n@media(max-width:640px){\r\n .sidebar{position:fixed;right:0;top:0;bottom:0;z-index:200;transform:translateX(0);box-shadow:4px 0 30px rgba(0,0,0,.5)}\r\n .sidebar.collapsed{transform:translateX(100%);width:var(--sidebar)}\r\n .stats-row{grid-template-columns:1fr 1fr}\r\n .content{padding:16px}\r\n .tb-search{display:none}\r\n .d-grid{grid-template-columns:1fr}\r\n}\r\n\r\n\/* ---- TICKETS ---- *\/\r\n.ticket-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin-bottom:12px;transition:.2s;cursor:pointer;position:relative;overflow:hidden}\r\n.ticket-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--shadow)}\r\n.ticket-card::before{content:'';position:absolute;right:0;top:0;bottom:0;width:4px;border-radius:0 var(--radius) var(--radius) 0}\r\n.tc-open::before{background:var(--accent)}\r\n.tc-in_progress::before{background:var(--warning)}\r\n.tc-resolved::before{background:var(--success)}\r\n.tc-closed::before{background:var(--text3)}\r\n.ticket-id{font-family:var(--mono);font-size:11px;color:var(--text3);font-weight:600;margin-bottom:4px}\r\n.ticket-title{font-size:14px;font-weight:700;margin-bottom:6px}\r\n.ticket-desc{font-size:12px;color:var(--text2);line-height:1.5;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\r\n.ticket-footer{display:flex;align-items:center;gap:10px;flex-wrap:wrap}\r\n.priority-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}\r\n.p-low{background:#4ade80}.p-medium{background:#fbbf24}.p-high{background:#f97316}.p-critical{background:#ef4444}\r\n.timeline-line{position:relative;padding-right:20px}\r\n.timeline-line::before{content:'';position:absolute;right:7px;top:12px;bottom:0;width:2px;background:var(--border)}\r\n.timeline-line:last-child::before{display:none}\r\n.timeline-dot-w{position:absolute;right:0;top:4px;width:16px;height:16px;border-radius:50%;border:2px solid var(--bg2);display:flex;align-items:center;justify-content:center;font-size:8px}\r\n.comment-box{background:var(--bg3);border-radius:10px;padding:14px;margin-bottom:8px}\r\n.comment-author{font-size:12px;font-weight:700;margin-bottom:4px}\r\n.comment-text{font-size:13px;color:var(--text2);line-height:1.5}\r\n.comment-time{font-size:10px;color:var(--text3);margin-top:4px}\r\n.reply-box{display:flex;gap:8px;margin-top:12px;align-items:flex-end}\r\n.reply-box textarea{flex:1;background:var(--bg3);border:1.5px solid var(--border);border-radius:9px;padding:10px 12px;color:var(--text);font-family:var(--font);font-size:13px;outline:none;resize:none;min-height:70px;transition:.2s}\r\n.reply-box textarea:focus{border-color:var(--accent)}\r\n.ticket-filter-bar{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;align-items:center}\r\n\r\n.sb-header img{filter:brightness(1)}\r\n.light .sb-header img{filter:brightness(0.15)}\r\n.sidebar.collapsed #sb-logo-img{opacity:0;pointer-events:none;}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<div id=\"login-screen\">\r\n <div class=\"login-bg\">\r\n <div class=\"orb orb1\"><\/div>\r\n <div class=\"orb orb2\"><\/div>\r\n <div class=\"orb orb3\"><\/div>\r\n <\/div>\r\n <div class=\"login-card\">\r\n <div class=\"login-logo\" style=\"flex-direction:column;gap:6px\">\r\n <div class=\"login-logo-icon\"><i class=\"fas fa-shield-halved\"><\/i><\/div>\r\n <div class=\"login-logo-text\">JIDAAR<\/div>\r\n <\/div>\r\n <div class=\"login-sub\">IT Asset Management System<\/div>\r\n <div class=\"f-group\">\r\n <label class=\"f-label\">Email Address<\/label>\r\n <input class=\"f-input\" id=\"li-email\" type=\"email\" value=\"admin@jidaar.com\" placeholder=\"admin@jidaar.com\">\r\n <\/div>\r\n <div class=\"f-group\">\r\n <label class=\"f-label\">Password<\/label>\r\n <input class=\"f-input\" id=\"li-pass\" type=\"password\" value=\"admin123\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\r\n <\/div>\r\n <button class=\"btn-login\" onclick=\"doLogin()\"><i class=\"fas fa-sign-in-alt\"><\/i> Sign In<\/button>\r\n <div class=\"hint-box\">\r\n <div><span>Admin:<\/span> admin@jidaar.com \/ admin123<\/div>\r\n <hr style=\"border:none;border-top:1px solid rgba(79,124,255,.15);margin:8px 0\">\r\n <div style=\"font-size:11px;color:var(--text3)\">Users: login with your email & the password set by admin<\/div>\r\n <div style=\"font-size:11px;color:var(--text3);margin-top:3px\">Default: ahmed.ali@company.com \/ ahmed123<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"app\">\r\n<div class=\"app-layout\">\r\n\r\n \r\n <aside class=\"sidebar\" id=\"sidebar\">\r\n <div class=\"sidebar-toggle\" onclick=\"toggleSB()\" id=\"sb-toggle\" title=\"Toggle Sidebar\">\r\n <i class=\"fas fa-chevron-right\" id=\"sb-toggle-icon\"><\/i>\r\n <\/div>\r\n <div class=\"sb-header\" style=\"padding:10px 14px\">\r\n <div class=\"sb-logo\"><i class=\"fas fa-shield-halved\"><\/i><\/div>\r\n <div class=\"sb-brand\" id=\"sb-logo-img\">\r\n <div class=\"sb-brand-name\">JIDAAR<\/div>\r\n <div class=\"sb-brand-sub\">IT Asset Management<\/div>\r\n <\/div>\r\n <\/div>\r\n <nav class=\"sb-nav\">\r\n <div class=\"sb-section admin-only\">\r\n <div class=\"sb-section-lbl\">Main<\/div>\r\n <div class=\"nav-item active\" data-page=\"dashboard\" onclick=\"go('dashboard',this)\">\r\n <i class=\"fas fa-chart-pie nav-icon\"><\/i><span>Dashboard<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-page=\"activity\" onclick=\"go('activity',this)\">\r\n <i class=\"fas fa-history nav-icon\"><\/i><span>Activity Log<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sb-section admin-only\">\r\n <div class=\"sb-section-lbl\">Assets<\/div>\r\n <div class=\"nav-item\" data-page=\"devices\" onclick=\"go('devices',this)\">\r\n <i class=\"fas fa-laptop nav-icon\"><\/i><span>Devices<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-page=\"users\" onclick=\"go('users',this)\">\r\n <i class=\"fas fa-users nav-icon\"><\/i><span>Users<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-page=\"assignments\" onclick=\"go('assignments',this)\">\r\n <i class=\"fas fa-link nav-icon\"><\/i><span>Assignments<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sb-section admin-only\" id=\"admin-section\">\r\n <div class=\"sb-section-lbl\">Management<\/div>\r\n <div class=\"nav-item\" data-page=\"tickets\" onclick=\"go('tickets',this)\">\r\n <i class=\"fas fa-ticket nav-icon\"><\/i><span>All Tickets<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-page=\"reports\" onclick=\"go('reports',this)\">\r\n <i class=\"fas fa-chart-column nav-icon\"><\/i><span>Reports<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-page=\"settings\" onclick=\"go('settings',this)\">\r\n <i class=\"fas fa-cog nav-icon\"><\/i><span>Settings<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sb-section user-only\" style=\"display:none\">\r\n <div class=\"sb-section-lbl\">My Workspace<\/div>\r\n <div class=\"nav-item active\" data-page=\"my-devices\" onclick=\"go('my-devices',this)\">\r\n <i class=\"fas fa-laptop nav-icon\"><\/i><span>My Devices<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-page=\"tickets\" onclick=\"go('tickets',this)\">\r\n <i class=\"fas fa-ticket nav-icon\"><\/i><span>My Tickets<\/span>\r\n <span class=\"nav-badge\" id=\"nb-tickets\" style=\"display:none\">0<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n <div class=\"sb-footer\">\r\n <div class=\"nav-item\" onclick=\"doLogout()\">\r\n <i class=\"fas fa-sign-out-alt nav-icon\"><\/i><span>Logout<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/aside>\r\n\r\n \r\n <div class=\"main-area\">\r\n <div class=\"topbar\">\r\n <div class=\"tb-left\">\r\n <div class=\"tb-search\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <input type=\"text\" placeholder=\"Quick search...\" id=\"global-search\" oninput=\"globalSearch()\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"tb-right\">\r\n <div style=\"position:relative\">\r\n <div class=\"icon-btn\" id=\"notif-btn\" onclick=\"toggleNotif()\">\r\n <i class=\"fas fa-bell\"><\/i><div class=\"notif-dot\"><\/div>\r\n <\/div>\r\n <div class=\"notif-panel\" id=\"notif-panel\" style=\"display:none\">\r\n <div class=\"n-head\">Notifications<span style=\"font-size:11px;color:var(--text3);font-weight:500\">3 New<\/span><\/div>\r\n <div class=\"n-item unread\">\r\n <div class=\"n-icon\" style=\"background:rgba(0,212,170,.12);color:var(--success)\"><i class=\"fas fa-link\"><\/i><\/div>\r\n <div><div class=\"n-txt\">HP EliteBook assigned to Ahmed Ali<\/div><div class=\"n-time\">10 minutes ago<\/div><\/div>\r\n <\/div>\r\n <div class=\"n-item unread\">\r\n <div class=\"n-icon\" style=\"background:rgba(255,169,64,.12);color:var(--warning)\"><i class=\"fas fa-tools\"><\/i><\/div>\r\n <div><div class=\"n-txt\"><strong>Dell OptiPlex<\/strong> Under Maintenance<\/div><div class=\"n-time\">1 hour ago<\/div><\/div>\r\n <\/div>\r\n <div class=\"n-item unread\">\r\n <div class=\"n-icon\" style=\"background:rgba(79,124,255,.12);color:var(--accent)\"><i class=\"fas fa-user-plus\"><\/i><\/div>\r\n <div><div class=\"n-txt\">New user added<\/div><div class=\"n-time\">3 hours ago<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"icon-btn\" onclick=\"toggleTheme()\" title=\"Toggle Theme\"><i class=\"fas fa-moon\" id=\"theme-icon\"><\/i><\/div>\r\n <div class=\"user-pill\" id=\"user-pill\">\r\n <div class=\"u-avatar\" id=\"u-avatar\">A<\/div>\r\n <div><div class=\"u-name\" id=\"u-name\">Admin<\/div><div class=\"u-role\" id=\"u-role\">System Admin<\/div><\/div>\r\n <i class=\"fas fa-chevron-down\" style=\"font-size:10px;color:var(--text3)\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"content fade-in\" id=\"content\"><\/div>\r\n <\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n<div class=\"overlay\" id=\"overlay\" onclick=\"closeModal(event)\">\r\n <div class=\"modal\" id=\"modal-box\" onclick=\"event.stopPropagation()\"><\/div>\r\n<\/div>\r\n\r\n\r\n<div class=\"toast-box\" id=\"toast-box\"><\/div>\r\n\r\n<script>\r\n\/\/ =================== UTILITIES ===================\r\nfunction toast(msg,type){\r\n type=type||'info';\r\n var ic={success:'fa-check-circle',error:'fa-times-circle',info:'fa-info-circle',warning:'fa-exclamation-triangle'};\r\n var col={success:'var(--success)',error:'var(--danger)',info:'var(--accent)',warning:'var(--warning)'};\r\n var box=document.getElementById('toast-box');\r\n if(!box){alert(msg);return;}\r\n var t=document.createElement('div');\r\n t.className='toast t-'+type;\r\n t.innerHTML='<i class=\"fas '+ic[type]+'\" style=\"color:'+col[type]+';font-size:16px\"><\/i><span>'+msg+'<\/span>';\r\n box.appendChild(t);\r\n setTimeout(function(){t.style.opacity='0';t.style.transition='opacity .4s';},3000);\r\n setTimeout(function(){t.remove();},3400);\r\n}\r\nfunction dl(href,name){var a=document.createElement('a');a.href=href;a.download=name;a.click();}\r\nfunction v(id){var el=document.getElementById(id);return el?el.value:'';}\r\nfunction uid(){return 'x'+Date.now()+Math.random().toString(36).substr(2,4);}\r\n\r\n\/\/ =================== DATA ===================\r\nconst UK='itam_u', DK='itam_d', AK='itam_a', LK='itam_l', TK='itam_t';\r\nlet darkMode=true, currentUser=null, sbCollapsed=false;\r\n\r\nlet users = JSON.parse(localStorage.getItem(UK)) || [\r\n {id:'u1',name:'Ahmed Ali Mahmoud',dept:'Information Technology',job:'Systems Engineer',phone:'0501234567',email:'ahmed.ali@company.com',status:'active',password:'ahmed123',role:'user'},\r\n {id:'u2',name:'Sara Mohammed Hassan',dept:'Human Resources',job:'HR Manager',phone:'0559876543',email:'sara.m@company.com',status:'active',password:'sara123',role:'user'},\r\n {id:'u3',name:'Khalid Abdullah',dept:'Finance',job:'Senior Accountant',phone:'0507654321',email:'khalid.r@company.com',status:'active',password:'khalid123',role:'user'},\r\n {id:'u4',name:'Nora Al-Qahtani',dept:'Marketing',job:'Graphic Designer',phone:'0551122334',email:'nora.q@company.com',status:'active',password:'nora123',role:'user'},\r\n {id:'u5',name:'Mohammed Omar',dept:'Sales',job:'Sales Manager',phone:'0505544332',email:'mohammed.s@company.com',status:'inactive',password:'mohammed123',role:'user'},\r\n {id:'u6',name:'Fatima Al-Omari',dept:'Administration',job:'Executive Secretary',phone:'0553344556',email:'fatima.a@company.com',status:'active',password:'fatima123',role:'user'},\r\n];\r\n\r\nlet devices = JSON.parse(localStorage.getItem(DK)) || [\r\n {id:'d1',name:'HP EliteBook 840 G9',type:'laptop',brand:'HP',model:'840 G9',serial:'HP2024001',mac:'AA:BB:CC:11:22:33',ip:'192.168.1.101',cpu:'Intel Core i7-1255U',ram:'16GB DDR5',storage:'512GB SSD NVMe',os:'Windows 11 Pro',purchaseDate:'2023-03-15',status:'assigned',notes:'Main device for engineers'},\r\n {id:'d2',name:'Dell OptiPlex 7010',type:'desktop',brand:'Dell',model:'OptiPlex 7010',serial:'DL2023045',mac:'AA:BB:CC:44:55:66',ip:'192.168.1.102',cpu:'Intel Core i5-13500',ram:'8GB DDR4',storage:'256GB SSD',os:'Windows 10 Pro',purchaseDate:'2023-06-20',status:'maintenance',notes:'Under Maintenance - Boot failure'},\r\n {id:'d3',name:'Brother MFC-L8900CDW',type:'printer',brand:'Brother',model:'MFC-L8900CDW',serial:'BR2022099',mac:'AA:BB:CC:77:88:99',ip:'192.168.1.150',cpu:'-',ram:'-',storage:'-',os:'-',purchaseDate:'2022-11-10',status:'available',notes:'Color printer - 2nd floor'},\r\n {id:'d4',name:'Cisco Catalyst 2960',type:'switch',brand:'Cisco',model:'Catalyst 2960',serial:'CI2021033',mac:'AA:BB:CC:AA:BB:CC',ip:'192.168.1.1',cpu:'-',ram:'-',storage:'-',os:'Cisco IOS',purchaseDate:'2021-08-05',status:'assigned',notes:'Main network switch'},\r\n {id:'d5',name:'Samsung 27\" 4K Monitor',type:'monitor',brand:'Samsung',model:'S27A800NMP',serial:'SA2024012',mac:'-',ip:'-',cpu:'-',ram:'-',storage:'-',os:'-',purchaseDate:'2024-01-10',status:'assigned',notes:''},\r\n {id:'d6',name:'MacBook Pro M3 14\"',type:'laptop',brand:'Apple',model:'MacBook Pro M3',serial:'AP2024011',mac:'DD:EE:FF:11:22:33',ip:'192.168.1.105',cpu:'Apple M3 Pro',ram:'18GB Unified',storage:'512GB SSD',os:'macOS Sonoma',purchaseDate:'2024-01-20',status:'available',notes:''},\r\n {id:'d7',name:'Ubiquiti UniFi AP Pro',type:'ap',brand:'Ubiquiti',model:'AP-AC-Pro',serial:'UB2022077',mac:'FF:EE:DD:CC:BB:AA',ip:'192.168.1.200',cpu:'-',ram:'-',storage:'-',os:'UniFi OS',purchaseDate:'2022-05-15',status:'assigned',notes:'Access Point - 1st floor'},\r\n {id:'d8',name:'HP LaserJet Pro 4001',type:'printer',brand:'HP',model:'LaserJet Pro 4001',serial:'HP2023088',mac:'11:22:33:44:55:AA',ip:'192.168.1.155',cpu:'-',ram:'-',storage:'-',os:'-',purchaseDate:'2023-09-01',status:'available',notes:''},\r\n {id:'d9',name:'Cisco ISR 4321 Router',type:'router',brand:'Cisco',model:'ISR 4321',serial:'CI2020011',mac:'CC:BB:AA:11:22:33',ip:'10.0.0.1',cpu:'-',ram:'-',storage:'-',os:'Cisco IOS XE',purchaseDate:'2020-03-10',status:'assigned',notes:'Main network router'},\r\n];\r\n\r\nlet assignments = JSON.parse(localStorage.getItem(AK)) || [\r\n {id:'a1',deviceId:'d1',userId:'u1',assignDate:'2023-03-20',returnDate:null,note:'Initial delivery'},\r\n {id:'a2',deviceId:'d4',userId:'u3',assignDate:'2021-08-10',returnDate:null,note:'Network management'},\r\n {id:'a3',deviceId:'d5',userId:'u4',assignDate:'2024-01-15',returnDate:null,note:''},\r\n {id:'a4',deviceId:'d7',userId:'u1',assignDate:'2022-05-20',returnDate:null,note:'Network management'},\r\n {id:'a5',deviceId:'d9',userId:'u1',assignDate:'2020-03-12',returnDate:null,note:''},\r\n {id:'a6',deviceId:'d1',userId:'u2',assignDate:'2023-01-01',returnDate:'2023-03-19',note:'Temporary use'},\r\n];\r\n\r\nlet tickets = JSON.parse(localStorage.getItem(TK)) || [];\r\n\r\nlet logs = JSON.parse(localStorage.getItem(LK)) || [\r\n {id:'l1',msg:'HP EliteBook 840 G9 assigned to Ahmed Ali',time:'2024-01-20T10:30:00',icon:'fa-link',c:'success'},\r\n {id:'l2',msg:'User added: Sara Mohammed',time:'2024-01-19T09:00:00',icon:'fa-user-plus',c:'info'},\r\n {id:'l3',msg:'Dell OptiPlex 7010 status changed to Maintenance',time:'2024-01-18T14:00:00',icon:'fa-tools',c:'warning'},\r\n {id:'l4',msg:'HP EliteBook transferred from Sara to Ahmed',time:'2024-01-17T11:00:00',icon:'fa-exchange-alt',c:'accent'},\r\n];\r\n\r\nfunction save(){\r\n localStorage.setItem(UK,JSON.stringify(users));\r\n localStorage.setItem(DK,JSON.stringify(devices));\r\n localStorage.setItem(AK,JSON.stringify(assignments));\r\n localStorage.setItem(LK,JSON.stringify(logs));\r\n localStorage.setItem(TK,JSON.stringify(tickets));\r\n}\r\nfunction addLog(msg,icon,c){\r\n icon=icon||'fa-info-circle'; c=c||'info';\r\n logs.unshift({id:'l'+Date.now(),msg,time:new Date().toISOString(),icon,c});\r\n if(logs.length>100)logs.pop();\r\n save();\r\n}\r\n\r\n\/\/ =================== HELPERS ===================\r\nconst TL={laptop:'Laptop',desktop:'Desktop',printer:'Printer',router:'Router',switch:'Switch',ap:'Access Point',monitor:'Monitor',other:'Other'};\r\nconst TI={laptop:'fa-laptop',desktop:'fa-desktop',printer:'fa-print',router:'fa-network-wired',switch:'fa-sitemap',ap:'fa-wifi',monitor:'fa-tv',other:'fa-box'};\r\nconst TC={laptop:'di-laptop',desktop:'di-desktop',printer:'di-printer',router:'di-router',switch:'di-switch',ap:'di-ap',monitor:'di-monitor',other:'di-other'};\r\nconst SL={active:'Active',inactive:'Inactive',available:'Available',assigned:'Assigned',maintenance:'Maintenance',retired:'Retired'};\r\nconst SC={active:'b-active',inactive:'b-inactive',available:'b-available',assigned:'b-assigned',maintenance:'b-maintenance',retired:'b-retired'};\r\nconst AVCOLS=['#4f7cff','#7c5fff','#00d4aa','#ffa940','#ff6b6b','#e040fb','#00bcd4','#8bc34a'];\r\n\r\nfunction getUser(id){return users.find(u=>u.id===id);}\r\nfunction getDev(id){return devices.find(d=>d.id===id);}\r\nfunction getCurAssign(devId){return assignments.find(a=>a.deviceId===devId&&!a.returnDate);}\r\nfunction getDevHistory(devId){return assignments.filter(a=>a.deviceId===devId).sort((a,b)=>new Date(b.assignDate)-new Date(a.assignDate));}\r\nfunction getUserDevs(userId){return assignments.filter(a=>a.userId===userId&&!a.returnDate).map(a=>getDev(a.deviceId)).filter(Boolean);}\r\nfunction badge(s){return '<span class=\"badge '+(SC[s]||'')+'\"><span class=\"b-dot\"><\/span>'+(SL[s]||s)+'<\/span>';}\r\nfunction fmtDate(d){if(!d)return'\u2014';return new Date(d).toLocaleDateString('en-GB');}\r\nfunction daysBetween(d1,d2){d2=d2||new Date();return Math.max(0,Math.floor((new Date(d2)-new Date(d1))\/(864e5)));}\r\nfunction initials(n){return n.split(' ').slice(0,2).map(function(w){return w[0];}).join('');}\r\nfunction avColor(n){return AVCOLS[n.charCodeAt(0)%AVCOLS.length];}\r\n\r\n\/\/ =================== AUTH ===================\r\nconst SYS_ADMINS=[\r\n {email:'admin@jidaar.com',pass:'admin123',role:'admin',name:'System Admin',display:'Admin'},\r\n];\r\n\r\nfunction doLogin(){\r\n var emailInput=document.getElementById('li-email');\r\n var passInput=document.getElementById('li-pass');\r\n if(!emailInput||!passInput){alert('Login form error');return;}\r\n var e=emailInput.value.trim().toLowerCase();\r\n var p=passInput.value.trim();\r\n if(!e){toast('Please enter your email','error');return;}\r\n if(!p){toast('Please enter your password','error');return;}\r\n\r\n for(var i=0;i<SYS_ADMINS.length;i++){\r\n var a=SYS_ADMINS[i];\r\n if(a.email.toLowerCase()===e&&a.pass===p){\r\n currentUser={email:a.email,role:a.role,name:a.name,display:a.display};\r\n loginSuccess(a.display,'System Admin','admin');\r\n return;\r\n }\r\n }\r\n\r\n var allUsers=[];\r\n try{allUsers=JSON.parse(localStorage.getItem(UK)||'[]');}catch(ex){}\r\n if(!allUsers.length)allUsers=users;\r\n\r\n for(var j=0;j<allUsers.length;j++){\r\n var u=allUsers[j];\r\n if(!u.email||!u.password)continue;\r\n if(u.email.toLowerCase()===e&&u.password===p){\r\n if(u.status!=='active'){toast('Your account is inactive. Contact admin.','error');return;}\r\n users=allUsers;\r\n currentUser=Object.assign({},u,{role:u.role||'user'});\r\n var roleLabel=(u.role==='admin'?'Admin':'User')+(u.dept?' \u00b7 '+u.dept:'');\r\n loginSuccess(u.name,roleLabel,u.role||'user');\r\n return;\r\n }\r\n }\r\n toast('Invalid email or password','error');\r\n}\r\n\r\nfunction loginSuccess(displayName,roleLabel,role){\r\n document.getElementById('login-screen').style.display='none';\r\n document.getElementById('app').style.display='block';\r\n document.getElementById('u-avatar').textContent=displayName[0].toUpperCase();\r\n document.getElementById('u-name').textContent=displayName;\r\n document.getElementById('u-role').textContent=roleLabel;\r\n var isAdmin=role==='admin';\r\n document.querySelectorAll('.admin-only').forEach(function(el){el.style.display=isAdmin?'':'none';});\r\n document.querySelectorAll('.user-only').forEach(function(el){el.style.display=isAdmin?'none':'';});\r\n updateTicketsBadge();\r\n setTimeout(function(){\r\n if(isAdmin){go('dashboard',document.querySelector('.nav-item[data-page=\"dashboard\"]'));}\r\n else{go('my-devices',document.querySelector('.nav-item[data-page=\"my-devices\"]'));}\r\n },50);\r\n toast('Welcome, '+displayName+' \ud83d\udc4b','success');\r\n}\r\n\r\nfunction updateTicketsBadge(){\r\n if(!currentUser)return;\r\n var badge2=document.getElementById('nb-tickets');\r\n if(!badge2)return;\r\n var myOpen=tickets.filter(function(t){return t.userId===currentUser.id&&t.status!=='closed'&&t.status!=='resolved';}).length;\r\n badge2.textContent=myOpen;\r\n badge2.style.display=myOpen>0?'':'none';\r\n}\r\n\r\nfunction doLogout(){\r\n currentUser=null;\r\n document.querySelectorAll('.admin-only').forEach(function(el){el.style.display='';});\r\n document.querySelectorAll('.user-only').forEach(function(el){el.style.display='none';});\r\n document.getElementById('login-screen').style.display='flex';\r\n document.getElementById('app').style.display='none';\r\n}\r\n\r\ndocument.getElementById('li-pass').addEventListener('keydown',function(e){if(e.key==='Enter')doLogin();});\r\ndocument.getElementById('li-email').addEventListener('keydown',function(e){if(e.key==='Enter')doLogin();});\r\n\r\n\/\/ =================== LAYOUT ===================\r\nfunction toggleSB(){\r\n sbCollapsed=!sbCollapsed;\r\n document.getElementById('sidebar').classList.toggle('collapsed',sbCollapsed);\r\n document.getElementById('sb-toggle-icon').className=sbCollapsed?'fas fa-chevron-left':'fas fa-chevron-right';\r\n}\r\nfunction toggleTheme(){\r\n darkMode=!darkMode;\r\n document.documentElement.classList.toggle('light',!darkMode);\r\n document.getElementById('theme-icon').className=darkMode?'fas fa-moon':'fas fa-sun';\r\n}\r\nfunction toggleNotif(){\r\n var p=document.getElementById('notif-panel');\r\n p.style.display=p.style.display==='none'?'block':'none';\r\n}\r\ndocument.addEventListener('click',function(e){\r\n var p=document.getElementById('notif-panel'),b=document.getElementById('notif-btn');\r\n if(p&&b&&!b.contains(e.target))p.style.display='none';\r\n});\r\n\r\n\/\/ =================== NAVIGATION ===================\r\nvar curPage='dashboard';\r\nfunction go(page,el){\r\n curPage=page;\r\n document.querySelectorAll('.nav-item').forEach(function(n){n.classList.remove('active');});\r\n if(el)el.classList.add('active');\r\n else{var ni=document.querySelector('.nav-item[data-page=\"'+page+'\"]');if(ni)ni.classList.add('active');}\r\n document.getElementById('content').className='content fade-in';\r\n render(page);\r\n}\r\nfunction render(p){\r\n var c=document.getElementById('content');\r\n c.innerHTML='';\r\n var pages={dashboard:renderDash,devices:renderDevs,users:renderUsrs,assignments:renderAssigns,activity:renderActivity,reports:renderReports,settings:renderSettings,tickets:renderTickets,'my-devices':renderMyDevices};\r\n (pages[p]||renderDash)();\r\n}\r\n\r\n\/\/ =================== DASHBOARD ===================\r\nfunction renderDash(){\r\n var c=document.getElementById('content');\r\n var tot=devices.length;\r\n var asgn=devices.filter(function(d){return d.status==='assigned';}).length;\r\n var avail=devices.filter(function(d){return d.status==='available';}).length;\r\n var maint=devices.filter(function(d){return d.status==='maintenance';}).length;\r\n var actU=users.filter(function(u){return u.status==='active';}).length;\r\n var totAssigns=assignments.filter(function(a){return !a.returnDate;}).length;\r\n c.innerHTML=\r\n '<div class=\"page-header\"><div class=\"page-title\">Dashboard<\/div><div class=\"page-sub\">Welcome to JIDAAR \u2014 IT Asset Management<\/div><\/div>'+\r\n '<div class=\"stats-row\">'+\r\n '<div class=\"stat-card sc-blue\" onclick=\"go(\\'users\\',null)\"><div class=\"stat-icon si-blue\"><i class=\"fas fa-users\"><\/i><\/div><div class=\"stat-val\">'+users.length+'<\/div><div class=\"stat-lbl\">Users<\/div><div class=\"stat-sub\"><i class=\"fas fa-circle\" style=\"color:var(--success);font-size:7px\"><\/i>'+actU+' Active<\/div><\/div>'+\r\n '<div class=\"stat-card sc-purple\" onclick=\"go(\\'devices\\',null)\"><div class=\"stat-icon si-purple\"><i class=\"fas fa-laptop\"><\/i><\/div><div class=\"stat-val\">'+tot+'<\/div><div class=\"stat-lbl\">Total Devices<\/div><div class=\"stat-sub\"><i class=\"fas fa-layer-group\" style=\"font-size:10px\"><\/i>'+Object.keys(TL).length+' types<\/div><\/div>'+\r\n '<div class=\"stat-card sc-teal\" onclick=\"go(\\'assignments\\',null)\"><div class=\"stat-icon si-teal\"><i class=\"fas fa-link\"><\/i><\/div><div class=\"stat-val\">'+asgn+'<\/div><div class=\"stat-lbl\">Assigned Devices<\/div><div class=\"stat-sub\"><i class=\"fas fa-percentage\" style=\"font-size:10px\"><\/i>'+(tot?Math.round(asgn\/tot*100):0)+'% of total<\/div><\/div>'+\r\n '<div class=\"stat-card sc-green\"><div class=\"stat-icon si-green\"><i class=\"fas fa-check-circle\"><\/i><\/div><div class=\"stat-val\">'+avail+'<\/div><div class=\"stat-lbl\">Available Devices<\/div><div class=\"stat-sub\"><i class=\"fas fa-circle\" style=\"color:var(--success);font-size:7px\"><\/i>Ready to assign<\/div><\/div>'+\r\n '<div class=\"stat-card sc-orange\"><div class=\"stat-icon si-orange\"><i class=\"fas fa-tools\"><\/i><\/div><div class=\"stat-val\">'+maint+'<\/div><div class=\"stat-lbl\">Under Maintenance<\/div><div class=\"stat-sub\" style=\"color:'+(maint>0?'var(--warning)':'var(--text3)')+'\"><i class=\"fas fa-exclamation-triangle\" style=\"font-size:10px\"><\/i>'+(maint>0?'Needs attention':'All clear')+'<\/div><\/div>'+\r\n '<div class=\"stat-card sc-red\"><div class=\"stat-icon si-red\"><i class=\"fas fa-exchange-alt\"><\/i><\/div><div class=\"stat-val\">'+totAssigns+'<\/div><div class=\"stat-lbl\">Active Assignments<\/div><div class=\"stat-sub\"><i class=\"fas fa-clock\" style=\"font-size:10px\"><\/i>Currently active<\/div><\/div>'+\r\n '<\/div>'+\r\n '<div class=\"charts-grid\">'+\r\n '<div class=\"chart-card\"><div class=\"chart-head\"><i class=\"fas fa-chart-pie\"><\/i>Device Status<\/div><div class=\"chart-wrap\"><canvas id=\"ch-status\"><\/canvas><\/div><\/div>'+\r\n '<div class=\"chart-card\"><div class=\"chart-head\"><i class=\"fas fa-chart-bar\"><\/i>Devices by Type<\/div><div class=\"chart-wrap\"><canvas id=\"ch-type\"><\/canvas><\/div><\/div>'+\r\n '<\/div>'+\r\n '<div style=\"display:grid;grid-template-columns:1fr 1fr;gap:16px\">'+\r\n '<div class=\"card\"><div class=\"card-head\"><div class=\"card-title\"><i class=\"fas fa-history\"><\/i>Recent Activity<\/div><button class=\"btn btn-ghost btn-sm\" onclick=\"go(\\'activity\\',null)\">View All<\/button><\/div>'+\r\n logs.slice(0,5).map(function(l){var colMap={success:'var(--success)',warning:'var(--warning)',info:'var(--accent)',accent:'var(--accent2)'};return '<div class=\"act-item\"><div class=\"act-icon\" style=\"background:rgba(79,124,255,.1);color:'+(colMap[l.c]||'var(--accent)')+'\"><i class=\"fas '+l.icon+'\"><\/i><\/div><div><div class=\"act-text\">'+l.msg+'<\/div><div class=\"act-time\">'+fmtDate(l.time)+'<\/div><\/div><\/div>';}).join('')+\r\n '<\/div>'+\r\n '<div class=\"card\"><div class=\"card-head\"><div class=\"card-title\"><i class=\"fas fa-link\"><\/i>Recent Assignments<\/div><button class=\"btn btn-ghost btn-sm\" onclick=\"go(\\'assignments\\',null)\">View All<\/button><\/div>'+\r\n assignments.filter(function(a){return !a.returnDate;}).slice(0,5).map(function(a){var d=getDev(a.deviceId),u=getUser(a.userId);if(!d||!u)return'';return '<div class=\"act-item\"><div class=\"dev-icon '+TC[d.type]+' act-icon\"><i class=\"fas '+TI[d.type]+'\"><\/i><\/div><div><div class=\"act-text\"><strong>'+d.name+'<\/strong><br><span style=\"font-size:12px;color:var(--text2)\">'+u.name+' \u00b7 '+daysBetween(a.assignDate)+' days<\/span><\/div><\/div><\/div>';}).join('')+\r\n '<\/div><\/div>';\r\n\r\n setTimeout(function(){\r\n if(document.getElementById('ch-status')){\r\n new Chart(document.getElementById('ch-status'),{type:'doughnut',data:{labels:['Assigned','Available','Maintenance','Retired'],datasets:[{data:[asgn,avail,maint,devices.filter(function(d){return d.status==='retired';}).length],backgroundColor:['#4f7cff','#00d4aa','#ffa940','#8892b0'],borderWidth:0,hoverOffset:6}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{position:'bottom',labels:{color:'#8892b0',font:{size:12},padding:12,boxWidth:12,borderRadius:3}}},cutout:'68%'}});\r\n }\r\n if(document.getElementById('ch-type')){\r\n var tp={};devices.forEach(function(d){tp[TL[d.type]]=(tp[TL[d.type]]||0)+1;});\r\n new Chart(document.getElementById('ch-type'),{type:'bar',data:{labels:Object.keys(tp),datasets:[{data:Object.values(tp),backgroundColor:AVCOLS.slice(0,Object.keys(tp).length).map(function(c){return c+'bb';}),borderRadius:6,borderSkipped:false}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}},scales:{x:{ticks:{color:'#8892b0',font:{size:11}},grid:{display:false}},y:{ticks:{color:'#8892b0',stepSize:1},grid:{color:'rgba(255,255,255,.04)'},beginAtZero:true}}}});\r\n }\r\n },80);\r\n}\r\n\r\n\/\/ =================== DEVICES ===================\r\nvar dPage=1, dQ='', dTF='', dSF='';\r\nvar PGS=8;\r\n\r\nfunction renderDevs(){\r\n document.getElementById('content').innerHTML=\r\n '<div class=\"page-header\"><div style=\"display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px\"><div><div class=\"page-title\">Devices<\/div><div class=\"page-sub\">Manage all IT assets ('+devices.length+' devices)<\/div><\/div><div style=\"display:flex;gap:8px;flex-wrap:wrap\"><button class=\"btn btn-ghost btn-sm\" onclick=\"exportDevCSV()\"><i class=\"fas fa-file-csv\"><\/i> Export CSV<\/button><button class=\"btn btn-primary btn-sm\" onclick=\"openDevModal()\"><i class=\"fas fa-plus\"><\/i> New Device<\/button><\/div><\/div><\/div>'+\r\n '<div class=\"tbl-wrap\"><div class=\"tbl-toolbar\"><div class=\"srch\"><i class=\"fas fa-search\"><\/i><input type=\"text\" id=\"d-srch\" placeholder=\"Search by name, serial, IP...\" value=\"'+dQ+'\" oninput=\"dQ=this.value;dPage=1;renderDevTable()\"><\/div>'+\r\n '<select class=\"sel\" id=\"d-tf\" onchange=\"dTF=this.value;dPage=1;renderDevTable()\"><option value=\"\">All Types<\/option>'+Object.entries(TL).map(function(e){return '<option value=\"'+e[0]+'\" '+(dTF===e[0]?'selected':'')+'>'+e[1]+'<\/option>';}).join('')+'<\/select>'+\r\n '<select class=\"sel\" id=\"d-sf\" onchange=\"dSF=this.value;dPage=1;renderDevTable()\"><option value=\"\">All Statuses<\/option>'+['available','assigned','maintenance','retired'].map(function(s){return '<option value=\"'+s+'\" '+(dSF===s?'selected':'')+'>'+SL[s]+'<\/option>';}).join('')+'<\/select><\/div><div id=\"dev-tbl-body\"><\/div><div id=\"dev-pag\"><\/div><\/div>';\r\n renderDevTable();\r\n}\r\n\r\nfunction renderDevTable(){\r\n var fl=devices.filter(function(d){\r\n var q=dQ.toLowerCase();\r\n return(!q||(d.name+d.brand+d.serial+d.ip+d.model).toLowerCase().includes(q))&&(!dTF||d.type===dTF)&&(!dSF||d.status===dSF);\r\n });\r\n var pages=Math.max(1,Math.ceil(fl.length\/PGS));\r\n dPage=Math.min(dPage,pages);\r\n var sl=fl.slice((dPage-1)*PGS,dPage*PGS);\r\n var rows=sl.map(function(d){\r\n var ca=getCurAssign(d.id),u=ca?getUser(ca.userId):null;\r\n return '<tr class=\"c-row\" onclick=\"openDevDetail(\\''+d.id+'\\')\">' +\r\n '<td><div style=\"display:flex;align-items:center;gap:10px\"><div class=\"dev-icon '+TC[d.type]+'\"><i class=\"fas '+TI[d.type]+'\"><\/i><\/div><div><div style=\"font-weight:700;font-size:13px\">'+d.name+'<\/div><div style=\"font-size:11px;color:var(--text3)\">'+d.brand+' \u00b7 '+d.model+'<\/div><\/div><\/div><\/td>'+\r\n '<td><span class=\"badge b-info\">'+(TL[d.type]||d.type)+'<\/span><\/td>'+\r\n '<td class=\"mono\" style=\"color:var(--text2)\">'+(d.serial||'\u2014')+'<\/td>'+\r\n '<td class=\"mono\" style=\"color:var(--text2)\">'+(d.ip||'\u2014')+'<\/td>'+\r\n '<td>'+badge(d.status)+'<\/td>'+\r\n '<td>'+(u?'<span class=\"u-tag\"><i class=\"fas fa-user\" style=\"font-size:10px\"><\/i>'+u.name.split(' ')[0]+'<\/span>':'<span class=\"u-tag-none\">Not Assigned<\/span>')+'<\/td>'+\r\n '<td style=\"font-size:12px;color:var(--text2)\">'+fmtDate(d.purchaseDate)+'<\/td>'+\r\n '<td onclick=\"event.stopPropagation()\" style=\"white-space:nowrap\"><button class=\"btn btn-ghost btn-xs\" onclick=\"openDevModal(\\''+d.id+'\\')\" title=\"Edit\"><i class=\"fas fa-edit\"><\/i><\/button><button class=\"btn btn-ghost btn-xs\" style=\"margin-right:4px\" onclick=\"showQR(\\''+d.id+'\\')\" title=\"QR\"><i class=\"fas fa-qrcode\"><\/i><\/button><button class=\"btn btn-danger btn-xs\" style=\"margin-right:4px\" onclick=\"deleteDev(\\''+d.id+'\\')\" title=\"Delete\"><i class=\"fas fa-trash\"><\/i><\/button><\/td>'+\r\n '<\/tr>';\r\n }).join('');\r\n document.getElementById('dev-tbl-body').innerHTML='<table><thead><tr><th>Device<\/th><th>Type<\/th><th>Serial<\/th><th>IP<\/th><th>Status<\/th><th>User<\/th><th>Purchase Date<\/th><th>Actions<\/th><\/tr><\/thead><tbody>'+(rows||'<tr><td colspan=\"8\"><div class=\"empty\"><i class=\"fas fa-search\"><\/i><h4>No results found<\/h4><p>Try adjusting your filters<\/p><\/div><\/td><\/tr>')+'<\/tbody><\/table>';\r\n var pag='';\r\n if(pages>1){\r\n if(dPage>1)pag+='<div class=\"pag-btn\" onclick=\"dPage--;renderDevTable()\"><i class=\"fas fa-chevron-right\"><\/i><\/div>';\r\n for(var i=Math.max(1,dPage-2);i<=Math.min(pages,dPage+2);i++)pag+='<div class=\"pag-btn'+(i===dPage?' active':'')+'\" onclick=\"dPage='+i+';renderDevTable()\">'+i+'<\/div>';\r\n if(dPage<pages)pag+='<div class=\"pag-btn\" onclick=\"dPage++;renderDevTable()\"><i class=\"fas fa-chevron-left\"><\/i><\/div>';\r\n }\r\n document.getElementById('dev-pag').innerHTML=pages>1?'<div class=\"pag\">'+pag+'<span style=\"font-size:12px;color:var(--text3);margin-right:8px\">'+fl.length+' results<\/span><\/div>':'';\r\n}\r\n\r\nfunction openDevModal(id){\r\n var d=id?getDev(id):null;\r\n openModal('<div class=\"m-head\"><h3>'+(d?'Edit Device':'Add New Device')+'<\/h3><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\">'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>Device Name *<\/label><input class=\"fc\" id=\"d-name\" value=\"'+(d?d.name:'')+'\" placeholder=\"HP EliteBook 840 G9\"><\/div><div class=\"fg\"><label>Type *<\/label><select class=\"fc\" id=\"d-type\">'+Object.entries(TL).map(function(e){return '<option value=\"'+e[0]+'\" '+(d&&d.type===e[0]?'selected':'')+'>'+e[1]+'<\/option>';}).join('')+'<\/select><\/div><\/div>'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>Manufacturer<\/label><input class=\"fc\" id=\"d-brand\" value=\"'+(d?d.brand:'')+'\" placeholder=\"HP \/ Dell \/ Apple\"><\/div><div class=\"fg\"><label>Model<\/label><input class=\"fc\" id=\"d-model\" value=\"'+(d?d.model:'')+'\" placeholder=\"840 G9\"><\/div><\/div>'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>Serial Number<\/label><input class=\"fc\" id=\"d-serial\" value=\"'+(d?d.serial:'')+'\" placeholder=\"SN2024XXX\" style=\"font-family:var(--mono)\"><\/div><div class=\"fg\"><label>MAC Address<\/label><input class=\"fc\" id=\"d-mac\" value=\"'+(d?d.mac:'')+'\" placeholder=\"AA:BB:CC:DD:EE:FF\" style=\"font-family:var(--mono)\"><\/div><\/div>'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>IP Address<\/label><input class=\"fc\" id=\"d-ip\" value=\"'+(d?d.ip:'')+'\" placeholder=\"192.168.1.xxx\" style=\"font-family:var(--mono)\"><\/div><div class=\"fg\"><label>Operating System<\/label><input class=\"fc\" id=\"d-os\" value=\"'+(d?d.os:'')+'\" placeholder=\"Windows 11 Pro\"><\/div><\/div>'+\r\n '<div class=\"f3\"><div class=\"fg\"><label>CPU<\/label><input class=\"fc\" id=\"d-cpu\" value=\"'+(d?d.cpu:'')+'\" placeholder=\"Intel Core i7\"><\/div><div class=\"fg\"><label>RAM<\/label><input class=\"fc\" id=\"d-ram\" value=\"'+(d?d.ram:'')+'\" placeholder=\"16GB DDR5\"><\/div><div class=\"fg\"><label>Storage<\/label><input class=\"fc\" id=\"d-storage\" value=\"'+(d?d.storage:'')+'\" placeholder=\"512GB SSD\"><\/div><\/div>'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>Purchase Date<\/label><input class=\"fc\" type=\"date\" id=\"d-pdate\" value=\"'+(d?d.purchaseDate:'')+'\"><\/div><div class=\"fg\"><label>Status<\/label><select class=\"fc\" id=\"d-status\"><option value=\"available\" '+(!d||d.status==='available'?'selected':'')+'>Available<\/option><option value=\"assigned\" '+(d&&d.status==='assigned'?'selected':'')+'>Assigned<\/option><option value=\"maintenance\" '+(d&&d.status==='maintenance'?'selected':'')+'>Maintenance<\/option><option value=\"retired\" '+(d&&d.status==='retired'?'selected':'')+'>Retired<\/option><\/select><\/div><\/div>'+\r\n '<div class=\"fg\"><label>Notes<\/label><textarea class=\"fc\" id=\"d-notes\" placeholder=\"Additional notes...\">'+(d?d.notes:'')+'<\/textarea><\/div>'+\r\n '<\/div><div class=\"m-footer\"><button class=\"btn btn-primary\" onclick=\"saveDev(\\''+(id||'')+'\\')\" ><i class=\"fas fa-save\"><\/i> Save<\/button><button class=\"btn btn-ghost\" onclick=\"closeModal()\">Cancel<\/button><\/div>');\r\n}\r\n\r\nfunction saveDev(id){\r\n var vals={name:v('d-name'),type:v('d-type'),brand:v('d-brand'),model:v('d-model'),serial:v('d-serial'),mac:v('d-mac'),ip:v('d-ip'),os:v('d-os'),cpu:v('d-cpu'),ram:v('d-ram'),storage:v('d-storage'),purchaseDate:v('d-pdate'),status:v('d-status'),notes:v('d-notes')};\r\n if(!vals.name){toast('Device name is required','error');return;}\r\n if(id){var i=devices.findIndex(function(d){return d.id===id;});devices[i]=Object.assign({},devices[i],vals);addLog('Device edited: '+vals.name,'fa-edit','info');}\r\n else{devices.push(Object.assign({id:uid()},vals));addLog('New device added: '+vals.name,'fa-plus','success');}\r\n save();closeModal();renderDevs();toast(id?'Device updated':'Device added successfully','success');\r\n}\r\n\r\nfunction deleteDev(id){\r\n var d=getDev(id);\r\n if(!confirm('Delete \"'+d.name+'\"? This cannot be undone.'))return;\r\n devices=devices.filter(function(x){return x.id!==id;});\r\n assignments=assignments.filter(function(a){return a.deviceId!==id;});\r\n addLog('Device deleted: '+d.name,'fa-trash','warning');\r\n save();renderDevs();toast('Device deleted','info');\r\n}\r\n\r\nfunction openDevDetail(id){\r\n var d=getDev(id);if(!d)return;\r\n var ca=getCurAssign(id),u=ca?getUser(ca.userId):null;\r\n var hist=getDevHistory(id);\r\n openModal('<div class=\"m-head\"><div style=\"display:flex;align-items:center;gap:12px\"><div class=\"dev-icon '+TC[d.type]+'\" style=\"width:44px;height:44px;font-size:19px\"><i class=\"fas '+TI[d.type]+'\"><\/i><\/div><div><h3>'+d.name+'<\/h3><div style=\"font-size:12px;color:var(--text2);margin-top:2px\">'+d.brand+' '+d.model+'<\/div><\/div><\/div><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\">'+\r\n '<div style=\"display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px\">'+badge(d.status)+'<span class=\"badge b-info\">'+(TL[d.type]||d.type)+'<\/span>'+(u?'<span class=\"badge b-assigned\"><i class=\"fas fa-user\" style=\"font-size:10px\"><\/i>'+u.name+'<\/span>':'')+'<\/div>'+\r\n '<div class=\"tabs\"><button class=\"tab-btn active\" onclick=\"swTab(0,this)\">Technical Info<\/button><button class=\"tab-btn\" onclick=\"swTab(1,this)\">Assignment<\/button><button class=\"tab-btn\" onclick=\"swTab(2,this)\">Transfer History<\/button><\/div>'+\r\n '<div id=\"dt0\"><div class=\"d-grid\">'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Serial Number<\/div><div class=\"d-val mono\">'+(d.serial||'\u2014')+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">MAC Address<\/div><div class=\"d-val mono\">'+(d.mac||'\u2014')+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">IP Address<\/div><div class=\"d-val mono\">'+(d.ip||'\u2014')+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Operating System<\/div><div class=\"d-val\">'+(d.os||'\u2014')+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">CPU<\/div><div class=\"d-val\">'+(d.cpu||'\u2014')+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">RAM<\/div><div class=\"d-val\">'+(d.ram||'\u2014')+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Storage<\/div><div class=\"d-val\">'+(d.storage||'\u2014')+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Purchase Date<\/div><div class=\"d-val\">'+fmtDate(d.purchaseDate)+'<\/div><\/div>'+\r\n '<\/div>'+(d.notes?'<div style=\"margin-top:12px;background:var(--bg3);border-radius:9px;padding:12px;font-size:13px;color:var(--text2);line-height:1.6\">'+d.notes+'<\/div>':'')+'<\/div>'+\r\n '<div id=\"dt1\" style=\"display:none\">'+(u?\r\n '<div style=\"background:var(--bg3);border-radius:10px;padding:16px;margin-bottom:14px\"><div style=\"display:flex;align-items:center;gap:12px;margin-bottom:12px\"><div class=\"av\" style=\"width:44px;height:44px;border-radius:11px;font-size:16px;background:'+avColor(u.name)+'\">'+initials(u.name)+'<\/div><div><div style=\"font-weight:700\">'+u.name+'<\/div><div style=\"font-size:12px;color:var(--text2)\">'+u.dept+' \u00b7 '+u.job+'<\/div><\/div><\/div>'+\r\n '<div class=\"d-grid\"><div class=\"d-item\"><div class=\"d-lbl\">Assign Date<\/div><div class=\"d-val\">'+fmtDate(ca.assignDate)+'<\/div><\/div><div class=\"d-item\"><div class=\"d-lbl\">Duration<\/div><div class=\"d-val\">'+daysBetween(ca.assignDate)+' days<\/div><\/div><\/div>'+\r\n '<div style=\"display:flex;gap:8px;margin-top:14px\"><button class=\"btn btn-danger btn-sm\" onclick=\"unassign(\\''+id+'\\')\"><i class=\"fas fa-unlink\"><\/i> Unassign<\/button><button class=\"btn btn-ghost btn-sm\" onclick=\"openTransferModal(\\''+id+'\\')\"><i class=\"fas fa-exchange-alt\"><\/i> Transfer<\/button><\/div><\/div>'\r\n :\r\n '<div class=\"empty\" style=\"padding:32px 0\"><i class=\"fas fa-user-slash\"><\/i><h4>Not Assigned<\/h4><p>This device is available to assign<\/p><button class=\"btn btn-primary btn-sm\" style=\"margin-top:14px\" onclick=\"openAssignModal(\\''+id+'\\')\"><i class=\"fas fa-user-plus\"><\/i> Assign Device<\/button><\/div>')+'<\/div>'+\r\n '<div id=\"dt2\" style=\"display:none\">'+(hist.length?hist.map(function(a,i){var u2=getUser(a.userId);return '<div class=\"tl-item\"><div class=\"tl-dot\" style=\"'+(i===0&&!a.returnDate?'background:var(--success)':'')+'\"><\/div><div class=\"tl-info\"><div class=\"tl-name\">'+(u2?u2.name:'Deleted User')+(i===0&&!a.returnDate?' <span class=\"badge b-available\" style=\"font-size:9px;margin-right:6px\">Current<\/span>':'')+'<\/div><div class=\"tl-meta\">'+fmtDate(a.assignDate)+(a.returnDate?' \u2192 '+fmtDate(a.returnDate):'')+(a.returnDate?' \u00b7 '+daysBetween(a.assignDate,a.returnDate):' \u00b7 '+daysBetween(a.assignDate))+' days'+(a.note?' \u00b7 '+a.note:'')+'<\/div><\/div><\/div>';}).join(''):'<div class=\"empty\" style=\"padding:24px 0\"><i class=\"fas fa-history\"><\/i><h4>No History<\/h4><p>This device has not been assigned before<\/p><\/div>')+'<\/div>'+\r\n '<\/div>'+\r\n '<div class=\"m-footer\"><button class=\"btn btn-ghost btn-sm\" onclick=\"openDevModal(\\''+id+'\\')\"><i class=\"fas fa-edit\"><\/i> Edit<\/button><button class=\"btn btn-ghost btn-sm\" onclick=\"showQR(\\''+id+'\\')\"><i class=\"fas fa-qrcode\"><\/i> QR Code<\/button><button class=\"btn btn-ghost\" onclick=\"closeModal()\">Close<\/button><\/div>','modal-lg');\r\n}\r\n\r\nfunction swTab(idx,el){\r\n [0,1,2].forEach(function(i){var t=document.getElementById('dt'+i);if(t)t.style.display=i===idx?'':'none';});\r\n document.querySelectorAll('.tab-btn').forEach(function(b,i){b.classList.toggle('active',i===idx);});\r\n}\r\n\r\nfunction showQR(id){\r\n var d=getDev(id);\r\n var info='ID:'+d.id+'\\nName:'+d.name+'\\nSerial:'+d.serial+'\\nType:'+d.type;\r\n openModal('<div class=\"m-head\"><h3>QR Code \u2014 '+d.name+'<\/h3><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\"><div class=\"qr-wrap\"><div id=\"qr-out\" style=\"background:#fff;border-radius:12px;padding:16px;display:inline-block\"><\/div>'+\r\n '<div style=\"text-align:center;font-size:13px;color:var(--text2);max-width:280px\">'+info.replace(\/\\n\/g,'<br>')+'<\/div>'+\r\n '<button class=\"btn btn-ghost btn-sm\" onclick=\"copyQR(\\''+id+'\\')\"><i class=\"fas fa-copy\"><\/i> Copy Info<\/button><\/div><\/div>','modal-sm');\r\n setTimeout(function(){drawQR(id);},50);\r\n}\r\n\r\nfunction drawQR(id){\r\n var el=document.getElementById('qr-out');\r\n if(!el)return;\r\n var size=160;\r\n var html='<svg width=\"'+size+'\" height=\"'+size+'\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"display:block\">';\r\n html+='<rect width=\"'+size+'\" height=\"'+size+'\" fill=\"white\"\/>';\r\n [[0,0],[0,110],[110,0]].forEach(function(pos){\r\n html+='<rect x=\"'+(pos[0]+5)+'\" y=\"'+(pos[1]+5)+'\" width=\"45\" height=\"45\" fill=\"black\" rx=\"3\"\/>';\r\n html+='<rect x=\"'+(pos[0]+10)+'\" y=\"'+(pos[1]+10)+'\" width=\"35\" height=\"35\" fill=\"white\" rx=\"2\"\/>';\r\n html+='<rect x=\"'+(pos[0]+15)+'\" y=\"'+(pos[1]+15)+'\" width=\"25\" height=\"25\" fill=\"black\" rx=\"1\"\/>';\r\n });\r\n var seed=id.split('').reduce(function(a,c){return a+c.charCodeAt(0);},0);\r\n for(var r=0;r<8;r++){for(var col=0;col<8;col++){\r\n if((seed*r+col*7+r*col)%3===0){var px=55+col*8,py=55+r*8;if(px<150&&py<150)html+='<rect x=\"'+px+'\" y=\"'+py+'\" width=\"6\" height=\"6\" fill=\"black\"\/>';}\r\n }}\r\n html+='<\/svg>';\r\n el.innerHTML=html;\r\n}\r\n\r\nfunction copyQR(id){\r\n var d=getDev(id);\r\n var info='Device: '+d.name+'\\nSerial: '+d.serial+'\\nType: '+(TL[d.type]||d.type)+'\\nIP: '+d.ip;\r\n if(navigator.clipboard){navigator.clipboard.writeText(info);}\r\n toast('Device info copied','success');\r\n}\r\n\r\nfunction unassign(deviceId){\r\n var idx=assignments.findIndex(function(a){return a.deviceId===deviceId&&!a.returnDate;});\r\n if(idx<0)return;\r\n var u=getUser(assignments[idx].userId),d=getDev(deviceId);\r\n assignments[idx].returnDate=new Date().toISOString().split('T')[0];\r\n var di=devices.findIndex(function(x){return x.id===deviceId;});\r\n if(di>-1)devices[di].status='available';\r\n addLog('Unassigned '+(d?d.name:'device')+' from '+(u?u.name:'user'),'fa-unlink','warning');\r\n save();closeModal();renderDevs();toast('Device unassigned','info');\r\n}\r\n\r\nfunction openAssignModal(deviceId){\r\n var actU=users.filter(function(u){return u.status==='active';});\r\n if(!actU.length){toast('No active users available','error');return;}\r\n openModal('<div class=\"m-head\"><h3>Assign Device<\/h3><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\"><div class=\"fg\"><label>User<\/label><select class=\"fc\" id=\"as-user\">'+actU.map(function(u){return '<option value=\"'+u.id+'\">'+u.name+' \u2014 '+u.dept+'<\/option>';}).join('')+'<\/select><\/div>'+\r\n '<div class=\"fg\"><label>Assign Date<\/label><input class=\"fc\" type=\"date\" id=\"as-date\" value=\"'+new Date().toISOString().split('T')[0]+'\"><\/div>'+\r\n '<div class=\"fg\"><label>Note<\/label><input class=\"fc\" id=\"as-note\" placeholder=\"Optional note\"><\/div><\/div>'+\r\n '<div class=\"m-footer\"><button class=\"btn btn-primary\" onclick=\"doAssign(\\''+deviceId+'\\')\"><i class=\"fas fa-link\"><\/i> Assign<\/button><button class=\"btn btn-ghost\" onclick=\"closeModal()\">Cancel<\/button><\/div>','modal-sm');\r\n}\r\n\r\nfunction doAssign(deviceId){\r\n var userId=v('as-user'),date=v('as-date'),note=v('as-note');\r\n assignments.push({id:uid(),deviceId:deviceId,userId:userId,assignDate:date,returnDate:null,note:note});\r\n var di=devices.findIndex(function(x){return x.id===deviceId;});\r\n if(di>-1)devices[di].status='assigned';\r\n var u=getUser(userId),d=getDev(deviceId);\r\n addLog('Assigned '+(d?d.name:'device')+' to '+(u?u.name:'user'),'fa-link','success');\r\n save();closeModal();renderDevs();toast('Device assigned successfully','success');\r\n}\r\n\r\nfunction openTransferModal(deviceId){\r\n var cur=getCurAssign(deviceId);\r\n var avU=users.filter(function(u){return u.status==='active'&&u.id!==(cur?cur.userId:'');});\r\n if(!avU.length){toast('No other users available','error');return;}\r\n openModal('<div class=\"m-head\"><h3>Transfer Device<\/h3><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\"><div class=\"fg\"><label>New User<\/label><select class=\"fc\" id=\"tr-user\">'+avU.map(function(u){return '<option value=\"'+u.id+'\">'+u.name+' \u2014 '+u.dept+'<\/option>';}).join('')+'<\/select><\/div>'+\r\n '<div class=\"fg\"><label>Transfer Date<\/label><input class=\"fc\" type=\"date\" id=\"tr-date\" value=\"'+new Date().toISOString().split('T')[0]+'\"><\/div>'+\r\n '<div class=\"fg\"><label>Reason<\/label><input class=\"fc\" id=\"tr-note\" placeholder=\"Reason for transfer\"><\/div><\/div>'+\r\n '<div class=\"m-footer\"><button class=\"btn btn-primary\" onclick=\"doTransfer(\\''+deviceId+'\\')\"><i class=\"fas fa-exchange-alt\"><\/i> Transfer<\/button><button class=\"btn btn-ghost\" onclick=\"closeModal()\">Cancel<\/button><\/div>','modal-sm');\r\n}\r\n\r\n\/\/ =================== BUG FIX: doTransfer ===================\r\nfunction doTransfer(deviceId){\r\n var newUserId=v('tr-user');\r\n var date=v('tr-date');\r\n var note=v('tr-note');\r\n var idx=assignments.findIndex(function(a){return a.deviceId===deviceId&&!a.returnDate;});\r\n var oldU=idx>-1?getUser(assignments[idx].userId):null;\r\n if(idx>-1)assignments[idx].returnDate=date;\r\n assignments.push({id:uid(),deviceId:deviceId,userId:newUserId,assignDate:date,returnDate:null,note:note});\r\n var d=getDev(deviceId),nu=getUser(newUserId);\r\n addLog('Transfer '+(d?d.name:'device')+' from '+(oldU?oldU.name:'user')+' to '+(nu?nu.name:'user'),'fa-exchange-alt','info');\r\n save();closeModal();renderDevs();toast('Device transferred successfully','success');\r\n}\r\n\r\nfunction exportDevCSV(){\r\n var h=['Name','Type','Brand','Model','Serial','MAC','IP','CPU','RAM','Storage','OS','Purchase Date','Status','Notes'];\r\n var rows=devices.map(function(d){return [d.name,TL[d.type],d.brand,d.model,d.serial,d.mac,d.ip,d.cpu,d.ram,d.storage,d.os,d.purchaseDate,SL[d.status],d.notes].map(function(x){return '\"'+(x||'').replace(\/\"\/g,'\"\"')+'\"';});});\r\n var csv=[h].concat(rows).map(function(r){return r.join(',');}).join('\\n');\r\n dl('data:text\/csv;charset=utf-8,\\uFEFF'+encodeURIComponent(csv),'devices.csv');\r\n toast('Exported '+devices.length+' devices','success');\r\n}\r\n\r\n\/\/ =================== USERS ===================\r\nvar uPage=1, uQ='', uSF='';\r\n\r\nfunction renderUsrs(){\r\n document.getElementById('content').innerHTML=\r\n '<div class=\"page-header\"><div style=\"display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px\"><div><div class=\"page-title\">Users<\/div><div class=\"page-sub\">Manage all users ('+users.length+')<\/div><\/div><div style=\"display:flex;gap:8px\"><button class=\"btn btn-ghost btn-sm\" onclick=\"exportUsersCSV()\"><i class=\"fas fa-file-csv\"><\/i> Export<\/button><button class=\"btn btn-primary btn-sm\" onclick=\"openUserModal()\"><i class=\"fas fa-plus\"><\/i> New User<\/button><\/div><\/div><\/div>'+\r\n '<div class=\"tbl-wrap\"><div class=\"tbl-toolbar\"><div class=\"srch\"><i class=\"fas fa-search\"><\/i><input type=\"text\" id=\"u-srch\" placeholder=\"Search...\" value=\"'+uQ+'\" oninput=\"uQ=this.value;uPage=1;renderUsrTable()\"><\/div>'+\r\n '<select class=\"sel\" onchange=\"uSF=this.value;uPage=1;renderUsrTable()\"><option value=\"\">All Statuses<\/option><option value=\"active\">Active<\/option><option value=\"inactive\">Inactive<\/option><\/select><\/div>'+\r\n '<div id=\"usr-tbl-body\"><\/div><div id=\"usr-pag\"><\/div><\/div>';\r\n renderUsrTable();\r\n}\r\n\r\nfunction renderUsrTable(){\r\n var fl=users.filter(function(u){\r\n var q=uQ.toLowerCase();\r\n return(!q||(u.name+u.email+u.dept+u.job).toLowerCase().includes(q))&&(!uSF||u.status===uSF);\r\n });\r\n var pages=Math.max(1,Math.ceil(fl.length\/PGS));\r\n uPage=Math.min(uPage,pages);\r\n var sl=fl.slice((uPage-1)*PGS,uPage*PGS);\r\n var rows=sl.map(function(u){\r\n var devs=getUserDevs(u.id);\r\n return '<tr class=\"c-row\" onclick=\"openUserDetail(\\''+u.id+'\\')\">' +\r\n '<td><div style=\"display:flex;align-items:center;gap:10px\"><div class=\"av\" style=\"background:'+avColor(u.name)+'\">'+initials(u.name)+'<\/div><div><div style=\"font-weight:700;font-size:13px\">'+u.name+'<\/div><div style=\"font-size:11px;color:var(--text3)\">'+u.email+'<\/div><\/div><\/div><\/td>'+\r\n '<td>'+u.dept+'<\/td><td style=\"color:var(--text2)\">'+u.job+'<\/td>'+\r\n '<td class=\"mono\" style=\"font-size:12px;color:var(--text2)\">'+u.phone+'<\/td>'+\r\n '<td>'+badge(u.status)+'<\/td>'+\r\n '<td><span class=\"badge '+(u.role==='admin'?'b-assigned':'b-info')+'\">'+(u.role==='admin'?'Admin':'User')+'<\/span><\/td>'+\r\n '<td><span class=\"badge b-info\">'+devs.length+' dev<\/span><\/td>'+\r\n '<td onclick=\"event.stopPropagation()\" style=\"white-space:nowrap\"><button class=\"btn btn-ghost btn-xs\" onclick=\"openUserModal(\\''+u.id+'\\')\"><i class=\"fas fa-edit\"><\/i><\/button><button class=\"btn btn-danger btn-xs\" style=\"margin-right:4px\" onclick=\"deleteUser(\\''+u.id+'\\')\"><i class=\"fas fa-trash\"><\/i><\/button><\/td><\/tr>';\r\n }).join('');\r\n document.getElementById('usr-tbl-body').innerHTML='<table><thead><tr><th>User<\/th><th>Department<\/th><th>Job Title<\/th><th>Phone<\/th><th>Status<\/th><th>Role<\/th><th>Devices<\/th><th>Actions<\/th><\/tr><\/thead><tbody>'+(rows||'<tr><td colspan=\"8\"><div class=\"empty\"><i class=\"fas fa-users\"><\/i><h4>No users found<\/h4><\/div><\/td><\/tr>')+'<\/tbody><\/table>';\r\n var pag='';\r\n if(pages>1){for(var i=1;i<=pages;i++)pag+='<div class=\"pag-btn'+(i===uPage?' active':'')+'\" onclick=\"uPage='+i+';renderUsrTable()\">'+i+'<\/div>';}\r\n document.getElementById('usr-pag').innerHTML=pages>1?'<div class=\"pag\">'+pag+'<\/div>':'';\r\n}\r\n\r\nfunction openUserModal(id){\r\n var u=id?getUser(id):null;\r\n var pwdLabel=u?'Password <span style=\"font-weight:400;color:var(--text3)\">(leave blank to keep)<\/span>':'Password *';\r\n openModal('<div class=\"m-head\"><h3>'+(u?'Edit User':'Add New User')+'<\/h3><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\">'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>Full Name *<\/label><input class=\"fc\" id=\"uf-name\" value=\"'+(u?u.name:'')+'\" placeholder=\"John Smith\"><\/div><div class=\"fg\"><label>Department *<\/label><input class=\"fc\" id=\"uf-dept\" value=\"'+(u?u.dept:'')+'\" placeholder=\"IT Department\"><\/div><\/div>'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>Job Title<\/label><input class=\"fc\" id=\"uf-job\" value=\"'+(u?u.job:'')+'\" placeholder=\"Systems Engineer\"><\/div><div class=\"fg\"><label>Phone<\/label><input class=\"fc\" id=\"uf-phone\" value=\"'+(u?u.phone:'')+'\" placeholder=\"+1 555 0000\"><\/div><\/div>'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>Email Address<\/label><input class=\"fc\" id=\"uf-email\" value=\"'+(u?u.email:'')+'\" placeholder=\"name@company.com\"><\/div><div class=\"fg\"><label>Status<\/label><select class=\"fc\" id=\"uf-status\"><option value=\"active\" '+(!u||u.status==='active'?'selected':'')+'>Active<\/option><option value=\"inactive\" '+(u&&u.status==='inactive'?'selected':'')+'>Inactive<\/option><\/select><\/div><\/div>'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>'+pwdLabel+'<\/label><input class=\"fc\" id=\"uf-password\" type=\"text\" value=\"\" placeholder=\"'+(u?'Leave blank to keep current...':'Set login password')+'\"><\/div><div class=\"fg\"><label>System Role<\/label><select class=\"fc\" id=\"uf-role\"><option value=\"user\" '+(!u||u.role!=='admin'?'selected':'')+'>User<\/option><option value=\"admin\" '+(u&&u.role==='admin'?'selected':'')+'>Admin<\/option><\/select><\/div><\/div>'+\r\n '<\/div><div class=\"m-footer\"><button class=\"btn btn-primary\" onclick=\"saveUser(\\''+(id||'')+'\\')\" ><i class=\"fas fa-save\"><\/i> Save<\/button><button class=\"btn btn-ghost\" onclick=\"closeModal()\">Cancel<\/button><\/div>','modal-sm');\r\n}\r\n\r\nfunction saveUser(id){\r\n var pwd=v('uf-password');\r\n var role=v('uf-role')||'user';\r\n var vals={name:v('uf-name'),dept:v('uf-dept'),job:v('uf-job'),phone:v('uf-phone'),email:v('uf-email'),status:v('uf-status'),role:role};\r\n if(!vals.name){toast('Name is required','error');return;}\r\n if(id){\r\n var i=users.findIndex(function(u){return u.id===id;});\r\n if(pwd)vals.password=pwd;\r\n users[i]=Object.assign({},users[i],vals);\r\n addLog('User updated: '+vals.name,'fa-user-edit','info');\r\n }else{\r\n if(!pwd){toast('Password is required for new users','error');return;}\r\n vals.password=pwd;\r\n users.push(Object.assign({id:uid()},vals));\r\n addLog('User added: '+vals.name,'fa-user-plus','success');\r\n }\r\n save();closeModal();renderUsrs();toast(id?'User updated':'User added successfully','success');\r\n}\r\n\r\nfunction deleteUser(id){\r\n var u=getUser(id);\r\n if(!confirm('Delete \"'+u.name+'\"?'))return;\r\n assignments.filter(function(a){return a.userId===id&&!a.returnDate;}).forEach(function(a){\r\n a.returnDate=new Date().toISOString().split('T')[0];\r\n var di=devices.findIndex(function(x){return x.id===a.deviceId;});\r\n if(di>-1)devices[di].status='available';\r\n });\r\n users=users.filter(function(x){return x.id!==id;});\r\n addLog('User deleted: '+u.name,'fa-user-minus','warning');\r\n save();renderUsrs();toast('User deleted','info');\r\n}\r\n\r\nfunction openUserDetail(id){\r\n var u=getUser(id);if(!u)return;\r\n var devs=getUserDevs(id);\r\n var hist=assignments.filter(function(a){return a.userId===id&&a.returnDate;}).slice(0,5);\r\n openModal('<div class=\"m-head\"><div style=\"display:flex;align-items:center;gap:12px\"><div class=\"av\" style=\"width:46px;height:46px;border-radius:12px;font-size:17px;background:'+avColor(u.name)+'\">'+initials(u.name)+'<\/div><div><h3>'+u.name+'<\/h3><div style=\"font-size:12px;color:var(--text2);margin-top:2px\">'+u.dept+' \u00b7 '+u.job+'<\/div><\/div><\/div><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\">'+badge(u.status)+\r\n '<div class=\"d-grid\" style=\"margin-top:14px\"><div class=\"d-item\"><div class=\"d-lbl\">Email<\/div><div class=\"d-val\" style=\"font-size:12px\">'+u.email+'<\/div><\/div><div class=\"d-item\"><div class=\"d-lbl\">Phone<\/div><div class=\"d-val mono\">'+u.phone+'<\/div><\/div><div class=\"d-item\"><div class=\"d-lbl\">Department<\/div><div class=\"d-val\">'+u.dept+'<\/div><\/div><div class=\"d-item\"><div class=\"d-lbl\">Job Title<\/div><div class=\"d-val\">'+u.job+'<\/div><\/div><\/div>'+\r\n '<hr class=\"sec-div\"><div class=\"card-title\" style=\"margin-bottom:12px\"><i class=\"fas fa-laptop\"><\/i>Current Devices ('+devs.length+')<\/div>'+\r\n (devs.length?devs.map(function(d){return '<div style=\"display:flex;align-items:center;gap:10px;background:var(--bg3);border-radius:9px;padding:10px 12px;margin-bottom:8px\"><div class=\"dev-icon '+TC[d.type]+'\" style=\"width:32px;height:32px;font-size:13px\"><i class=\"fas '+TI[d.type]+'\"><\/i><\/div><div style=\"flex:1\"><div style=\"font-size:13px;font-weight:600\">'+d.name+'<\/div><div class=\"mono\" style=\"font-size:11px;color:var(--text3)\">'+d.serial+'<\/div><\/div>'+badge(d.status)+'<\/div>';}).join(''):'<div style=\"color:var(--text3);font-size:13px;text-align:center;padding:12px\">No devices assigned<\/div>')+\r\n (hist.length?'<hr class=\"sec-div\"><div class=\"card-title\" style=\"margin-bottom:12px\"><i class=\"fas fa-history\"><\/i>Previous Devices<\/div>'+hist.map(function(a){var d=getDev(a.deviceId);return '<div class=\"tl-item\"><div class=\"tl-dot\" style=\"background:var(--text3)\"><\/div><div class=\"tl-info\"><div class=\"tl-name\">'+(d?d.name:'Deleted Device')+'<\/div><div class=\"tl-meta\">'+fmtDate(a.assignDate)+' \u2192 '+fmtDate(a.returnDate)+' \u00b7 '+daysBetween(a.assignDate,a.returnDate)+' days<\/div><\/div><\/div>';}).join(''):'')+'<\/div>'+\r\n '<div class=\"m-footer\"><button class=\"btn btn-ghost btn-sm\" onclick=\"openUserModal(\\''+id+'\\')\"><i class=\"fas fa-edit\"><\/i> Edit<\/button><button class=\"btn btn-ghost\" onclick=\"closeModal()\">Close<\/button><\/div>');\r\n}\r\n\r\nfunction exportUsersCSV(){\r\n var h=['Name','Department','Job Title','Phone','Email','Status','Devices'];\r\n var rows=users.map(function(u){return [u.name,u.dept,u.job,u.phone,u.email,SL[u.status],getUserDevs(u.id).length];});\r\n var csv=[h].concat(rows).map(function(r){return r.join(',');}).join('\\n');\r\n dl('data:text\/csv;charset=utf-8,\\uFEFF'+encodeURIComponent(csv),'users.csv');\r\n toast('Users exported','success');\r\n}\r\n\r\n\/\/ =================== ASSIGNMENTS ===================\r\nfunction renderAssigns(){\r\n var active=assignments.filter(function(a){return !a.returnDate;});\r\n document.getElementById('content').innerHTML=\r\n '<div class=\"page-header\"><div style=\"display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px\"><div><div class=\"page-title\">Assignments<\/div><div class=\"page-sub\">Active device assignments ('+active.length+')<\/div><\/div><button class=\"btn btn-primary btn-sm\" onclick=\"openAssignAny()\"><i class=\"fas fa-plus\"><\/i> New Assignment<\/button><\/div><\/div>'+\r\n '<div class=\"tbl-wrap\"><table><thead><tr><th>Device<\/th><th>Status<\/th><th>User<\/th><th>Department<\/th><th>Assign Date<\/th><th>Duration<\/th><th>Actions<\/th><\/tr><\/thead><tbody>'+\r\n (active.map(function(a){\r\n var d=getDev(a.deviceId),u=getUser(a.userId);\r\n if(!d||!u)return'';\r\n var days=daysBetween(a.assignDate);\r\n return '<tr><td><div style=\"display:flex;align-items:center;gap:8px\"><div class=\"dev-icon '+TC[d.type]+'\" style=\"width:30px;height:30px;font-size:13px\"><i class=\"fas '+TI[d.type]+'\"><\/i><\/div><div style=\"font-weight:600;font-size:13px\">'+d.name+'<\/div><\/div><\/td>'+\r\n '<td>'+badge(d.status)+'<\/td>'+\r\n '<td><div style=\"display:flex;align-items:center;gap:8px\"><div class=\"av\" style=\"width:28px;height:28px;border-radius:7px;font-size:10px;background:'+avColor(u.name)+'\">'+initials(u.name)+'<\/div><span>'+u.name+'<\/span><\/div><\/td>'+\r\n '<td style=\"font-size:12px;color:var(--text2)\">'+u.dept+'<\/td>'+\r\n '<td>'+fmtDate(a.assignDate)+'<\/td>'+\r\n '<td><span class=\"badge '+(days>180?'b-maintenance':days>90?'b-assigned':'b-available')+'\">'+days+' days<\/span><\/td>'+\r\n '<td style=\"white-space:nowrap\"><button class=\"btn btn-ghost btn-xs\" onclick=\"openTransferModal(\\''+d.id+'\\')\"><i class=\"fas fa-exchange-alt\"><\/i> Transfer<\/button><button class=\"btn btn-danger btn-xs\" style=\"margin-right:4px\" onclick=\"unassignAndRefresh(\\''+d.id+'\\')\"><i class=\"fas fa-unlink\"><\/i><\/button><\/td><\/tr>';\r\n }).join('')||'<tr><td colspan=\"7\"><div class=\"empty\"><i class=\"fas fa-link\"><\/i><h4>No assignments<\/h4><\/div><\/td><\/tr>')+\r\n '<\/tbody><\/table><\/div>';\r\n}\r\n\r\nfunction unassignAndRefresh(deviceId){\r\n var idx=assignments.findIndex(function(a){return a.deviceId===deviceId&&!a.returnDate;});\r\n if(idx<0)return;\r\n var u=getUser(assignments[idx].userId),d=getDev(deviceId);\r\n assignments[idx].returnDate=new Date().toISOString().split('T')[0];\r\n var di=devices.findIndex(function(x){return x.id===deviceId;});\r\n if(di>-1)devices[di].status='available';\r\n addLog('Unassigned '+(d?d.name:'device')+' from '+(u?u.name:'user'),'fa-unlink','warning');\r\n save();renderAssigns();toast('Device unassigned','info');\r\n}\r\n\r\nfunction openAssignAny(){\r\n var avD=devices.filter(function(d){return d.status==='available';});\r\n if(!avD.length){toast('No available devices','error');return;}\r\n openModal('<div class=\"m-head\"><h3>New Assignment<\/h3><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\"><div class=\"fg\"><label>Device<\/label><select class=\"fc\" id=\"aa-dev\">'+avD.map(function(d){return '<option value=\"'+d.id+'\">'+d.name+' ('+d.serial+')<\/option>';}).join('')+'<\/select><\/div>'+\r\n '<div class=\"fg\"><label>User<\/label><select class=\"fc\" id=\"aa-user\">'+users.filter(function(u){return u.status==='active';}).map(function(u){return '<option value=\"'+u.id+'\">'+u.name+' \u2014 '+u.dept+'<\/option>';}).join('')+'<\/select><\/div>'+\r\n '<div class=\"fg\"><label>Assign Date<\/label><input class=\"fc\" type=\"date\" id=\"aa-date\" value=\"'+new Date().toISOString().split('T')[0]+'\"><\/div>'+\r\n '<div class=\"fg\"><label>Note<\/label><input class=\"fc\" id=\"aa-note\" placeholder=\"Optional\"><\/div><\/div>'+\r\n '<div class=\"m-footer\"><button class=\"btn btn-primary\" onclick=\"doAssignAny()\"><i class=\"fas fa-link\"><\/i> Assign<\/button><button class=\"btn btn-ghost\" onclick=\"closeModal()\">Cancel<\/button><\/div>','modal-sm');\r\n}\r\n\r\nfunction doAssignAny(){\r\n var deviceId=v('aa-dev'),userId=v('aa-user'),date=v('aa-date'),note=v('aa-note');\r\n assignments.push({id:uid(),deviceId:deviceId,userId:userId,assignDate:date,returnDate:null,note:note});\r\n var di=devices.findIndex(function(x){return x.id===deviceId;});if(di>-1)devices[di].status='assigned';\r\n var u=getUser(userId),d=getDev(deviceId);\r\n addLog('Assigned '+(d?d.name:'device')+' to '+(u?u.name:'user'),'fa-link','success');\r\n save();closeModal();renderAssigns();toast('Device assigned','success');\r\n}\r\n\r\n\/\/ =================== ACTIVITY ===================\r\nfunction renderActivity(){\r\n document.getElementById('content').innerHTML=\r\n '<div class=\"page-header\"><div style=\"display:flex;align-items:center;justify-content:space-between\"><div><div class=\"page-title\">Activity Log<\/div><div class=\"page-sub\">'+logs.length+' logged operations<\/div><\/div><button class=\"btn btn-danger btn-sm\" onclick=\"if(confirm(\\'Clear log?\\')){logs=[];save();renderActivity();toast(\\'Log cleared\\',\\'info\\')}\"><i class=\"fas fa-trash\"><\/i> Clear<\/button><\/div><\/div>'+\r\n '<div class=\"card\">'+(logs.map(function(l){var colMap={success:'var(--success)',warning:'var(--warning)',info:'var(--accent)',accent:'var(--accent2)'};return '<div class=\"act-item\"><div class=\"act-icon\" style=\"background:rgba(79,124,255,.08);color:'+(colMap[l.c]||'var(--accent)')+'\"><i class=\"fas '+l.icon+'\"><\/i><\/div><div><div class=\"act-text\">'+l.msg+'<\/div><div class=\"act-time\">'+new Date(l.time).toLocaleString('en-GB')+'<\/div><\/div><\/div>';}).join('')||'<div class=\"empty\"><i class=\"fas fa-history\"><\/i><h4>No activity<\/h4><\/div>')+'<\/div>';\r\n}\r\n\r\n\/\/ =================== REPORTS ===================\r\nfunction renderReports(){\r\n var tot=devices.length;\r\n var byType={};devices.forEach(function(d){byType[TL[d.type]]=(byType[TL[d.type]]||0)+1;});\r\n var sorted=Object.entries(byType).sort(function(a,b){return b[1]-a[1];});\r\n var max=sorted[0]?sorted[0][1]:1;\r\n document.getElementById('content').innerHTML=\r\n '<div class=\"page-header\"><div class=\"page-title\">Reports<\/div><div class=\"page-sub\">Comprehensive Overview<\/div><\/div>'+\r\n '<div style=\"display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px\">'+\r\n '<div class=\"card\"><div class=\"card-head\"><div class=\"card-title\"><i class=\"fas fa-chart-bar\"><\/i>Device Distribution<\/div><\/div>'+\r\n sorted.map(function(e,i){return '<div class=\"rep-bar\"><div class=\"rep-lbl\">'+e[0]+'<\/div><div class=\"rep-track\"><div class=\"rep-fill\" style=\"width:'+Math.round(e[1]\/max*100)+'%;background:'+AVCOLS[i%AVCOLS.length]+'\">'+e[1]+'<\/div><\/div><\/div>';}).join('')+'<\/div>'+\r\n '<div class=\"card\"><div class=\"card-head\"><div class=\"card-title\"><i class=\"fas fa-users\"><\/i>Statistics<\/div><\/div>'+\r\n '<div class=\"d-grid\" style=\"margin-bottom:14px\">'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Users<\/div><div class=\"d-val\" style=\"font-size:22px\">'+users.length+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Devices<\/div><div class=\"d-val\" style=\"font-size:22px\">'+tot+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Active Users<\/div><div class=\"d-val\" style=\"font-size:22px;color:var(--success)\">'+users.filter(function(u){return u.status==='active';}).length+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Active Assignments<\/div><div class=\"d-val\" style=\"font-size:22px;color:var(--accent)\">'+assignments.filter(function(a){return !a.returnDate;}).length+'<\/div><\/div>'+\r\n '<\/div><canvas id=\"rpt-pie\" height=\"120\"><\/canvas><\/div><\/div>'+\r\n '<div class=\"card\"><div class=\"card-head\"><div class=\"card-title\"><i class=\"fas fa-download\"><\/i>Export Data<\/div><\/div>'+\r\n '<div style=\"display:flex;gap:10px;flex-wrap:wrap\">'+\r\n '<button class=\"btn btn-ghost btn-sm\" onclick=\"exportDevCSV()\"><i class=\"fas fa-file-csv\" style=\"color:var(--success)\"><\/i> Devices CSV<\/button>'+\r\n '<button class=\"btn btn-ghost btn-sm\" onclick=\"exportUsersCSV()\"><i class=\"fas fa-file-csv\" style=\"color:var(--accent)\"><\/i> Users CSV<\/button>'+\r\n '<button class=\"btn btn-ghost btn-sm\" onclick=\"exportAssignsCSV()\"><i class=\"fas fa-file-csv\" style=\"color:var(--accent2)\"><\/i> Assignments CSV<\/button>'+\r\n '<button class=\"btn btn-ghost btn-sm\" onclick=\"backupData()\"><i class=\"fas fa-database\" style=\"color:var(--warning)\"><\/i> Backup JSON<\/button>'+\r\n '<label class=\"btn btn-ghost btn-sm\" style=\"cursor:pointer\"><i class=\"fas fa-upload\" style=\"color:var(--success)\"><\/i> Restore<input type=\"file\" style=\"display:none\" accept=\".json\" onchange=\"restoreData(event)\"><\/label>'+\r\n '<\/div><\/div>';\r\n setTimeout(function(){\r\n var el=document.getElementById('rpt-pie');if(!el)return;\r\n var asgn=devices.filter(function(d){return d.status==='assigned';}).length;\r\n var avail=devices.filter(function(d){return d.status==='available';}).length;\r\n var maint=devices.filter(function(d){return d.status==='maintenance';}).length;\r\n new Chart(el,{type:'doughnut',data:{labels:['Assigned','Available','Maintenance'],datasets:[{data:[asgn,avail,maint],backgroundColor:['#4f7cff','#00d4aa','#ffa940'],borderWidth:0}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{position:'bottom',labels:{color:'#8892b0',font:{size:11},padding:8,boxWidth:10}}},cutout:'60%'}});\r\n },80);\r\n}\r\n\r\nfunction exportAssignsCSV(){\r\n var h=['Device','User','Department','Assign Date','Return Date','Days'];\r\n var rows=assignments.map(function(a){var d=getDev(a.deviceId),u=getUser(a.userId);return[d?d.name:'\u2014',u?u.name:'\u2014',u?u.dept:'\u2014',a.assignDate,a.returnDate||'Active',daysBetween(a.assignDate,a.returnDate||new Date())];});\r\n var csv=[h].concat(rows).map(function(r){return r.join(',');}).join('\\n');\r\n dl('data:text\/csv;charset=utf-8,\\uFEFF'+encodeURIComponent(csv),'assignments.csv');\r\n toast('Assignments exported','success');\r\n}\r\n\r\nfunction backupData(){\r\n var data={users:users,devices:devices,assignments:assignments,logs:logs,ts:new Date().toISOString(),v:'2.0'};\r\n dl('data:application\/json;charset=utf-8,'+encodeURIComponent(JSON.stringify(data,null,2)),'itam_backup_'+new Date().toISOString().split('T')[0]+'.json');\r\n toast('Backup created','success');\r\n}\r\n\r\nfunction restoreData(e){\r\n var file=e.target.files[0];if(!file)return;\r\n var r=new FileReader();\r\n r.onload=function(ev){\r\n try{var d=JSON.parse(ev.target.result);users=d.users||users;devices=d.devices||devices;assignments=d.assignments||assignments;logs=d.logs||logs;save();renderReports();toast('Restored successfully','success');}\r\n catch(ex){toast('File error','error');}\r\n };r.readAsText(file);\r\n}\r\n\r\n\/\/ =================== SETTINGS ===================\r\nfunction renderSettings(){\r\n document.getElementById('content').innerHTML=\r\n '<div class=\"page-header\"><div class=\"page-title\">Settings<\/div><\/div>'+\r\n '<div style=\"display:grid;grid-template-columns:1fr 1fr;gap:16px\">'+\r\n '<div class=\"card\"><div class=\"card-title\" style=\"margin-bottom:16px\"><i class=\"fas fa-palette\"><\/i> Appearance<\/div>'+\r\n '<div style=\"display:flex;align-items:center;justify-content:space-between;padding:12px 0\"><div><div style=\"font-size:13px;font-weight:600\">Dark Mode<\/div><div style=\"font-size:12px;color:var(--text3);margin-top:2px\">Toggle dark\/light theme<\/div><\/div>'+\r\n '<div onclick=\"toggleTheme()\" style=\"width:46px;height:26px;border-radius:13px;background:'+(darkMode?'var(--accent)':'var(--bg4)')+';cursor:pointer;position:relative;transition:.3s;flex-shrink:0\"><div style=\"width:20px;height:20px;border-radius:50%;background:#fff;position:absolute;top:3px;transition:.3s;'+(darkMode?'right:3px':'left:3px')+'\"><\/div><\/div><\/div><\/div>'+\r\n '<div class=\"card\"><div class=\"card-title\" style=\"margin-bottom:16px\"><i class=\"fas fa-info-circle\"><\/i> System Info<\/div>'+\r\n '<div class=\"d-grid\"><div class=\"d-item\"><div class=\"d-lbl\">Version<\/div><div class=\"d-val mono\">v2.0.1<\/div><\/div><div class=\"d-item\"><div class=\"d-lbl\">Users<\/div><div class=\"d-val\">'+users.length+'<\/div><\/div><div class=\"d-item\"><div class=\"d-lbl\">Devices<\/div><div class=\"d-val\">'+devices.length+'<\/div><\/div><div class=\"d-item\"><div class=\"d-lbl\">Assignments<\/div><div class=\"d-val\">'+assignments.filter(function(a){return !a.returnDate;}).length+'<\/div><\/div><\/div><\/div>'+\r\n '<div class=\"card\" style=\"grid-column:1\/-1\"><div class=\"card-title\" style=\"margin-bottom:14px;color:var(--danger)\"><i class=\"fas fa-exclamation-triangle\"><\/i> Danger Zone<\/div>'+\r\n '<div style=\"display:flex;gap:10px\"><button class=\"btn btn-danger btn-sm\" onclick=\"if(confirm(\\'Clear ALL data? This cannot be undone!\\')){localStorage.clear();location.reload()}\"><i class=\"fas fa-trash\"><\/i> Clear All Data<\/button><button class=\"btn btn-ghost btn-sm\" onclick=\"backupData()\"><i class=\"fas fa-shield\"><\/i> Backup First<\/button><\/div><\/div><\/div>';\r\n}\r\n\r\n\/\/ =================== MODAL ===================\r\nfunction openModal(html,cls){\r\n document.getElementById('modal-box').className='modal '+(cls||'');\r\n document.getElementById('modal-box').innerHTML=html;\r\n document.getElementById('overlay').classList.add('open');\r\n}\r\nfunction closeModal(e){\r\n if(!e||e.target===document.getElementById('overlay'))\r\n document.getElementById('overlay').classList.remove('open');\r\n}\r\n\r\n\/\/ =================== TICKETS ===================\r\nvar TICKET_STATUSES={open:'Open',in_progress:'In Progress',resolved:'Resolved',closed:'Closed'};\r\nvar TICKET_PRIORITIES={low:'Low',medium:'Medium',high:'High',critical:'Critical'};\r\nvar TICKET_CATEGORIES={hardware:'Hardware',software:'Software',network:'Network',access:'Access & Permissions',email:'Email',other:'Other'};\r\nvar STATUS_BADGE={open:'b-assigned',in_progress:'b-maintenance',resolved:'b-active',closed:'b-retired'};\r\n\r\nfunction ticketId(idx){return 'TKT-'+String(idx+1).padStart(4,'0');}\r\n\r\nfunction renderTickets(){\r\n var c=document.getElementById('content');\r\n var isAdmin=currentUser&¤tUser.role==='admin';\r\n var myTickets=isAdmin?[].concat(tickets):tickets.filter(function(t){return t.userId===currentUser.id;});\r\n myTickets.sort(function(a,b){return new Date(b.createdAt)-new Date(a.createdAt);});\r\n var openCount=myTickets.filter(function(t){return t.status==='open'||t.status==='in_progress';}).length;\r\n var resolvedCount=myTickets.filter(function(t){return t.status==='resolved'||t.status==='closed';}).length;\r\n c.innerHTML=\r\n '<div class=\"page-header\"><div style=\"display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px\"><div><div class=\"page-title\">'+(isAdmin?'All Tickets':'My Tickets')+'<\/div><div class=\"page-sub\">'+myTickets.length+' total \u00b7 '+openCount+' open \u00b7 '+resolvedCount+' resolved<\/div><\/div><button class=\"btn btn-primary btn-sm\" onclick=\"openNewTicketModal()\"><i class=\"fas fa-plus\"><\/i> New Ticket<\/button><\/div><\/div>'+\r\n '<div class=\"ticket-filter-bar\">'+\r\n '<div class=\"srch\" style=\"flex:1;min-width:200px\"><i class=\"fas fa-search\"><\/i><input type=\"text\" id=\"tkt-srch\" placeholder=\"Search tickets...\" oninput=\"filterAndRenderTicketList()\"><\/div>'+\r\n '<select class=\"sel\" id=\"tkt-status-f\" onchange=\"filterAndRenderTicketList()\"><option value=\"\">All Statuses<\/option><option value=\"open\">Open<\/option><option value=\"in_progress\">In Progress<\/option><option value=\"resolved\">Resolved<\/option><option value=\"closed\">Closed<\/option><\/select>'+\r\n '<select class=\"sel\" id=\"tkt-pri-f\" onchange=\"filterAndRenderTicketList()\"><option value=\"\">All Priorities<\/option><option value=\"critical\">Critical<\/option><option value=\"high\">High<\/option><option value=\"medium\">Medium<\/option><option value=\"low\">Low<\/option><\/select>'+\r\n (isAdmin?'<select class=\"sel\" id=\"tkt-cat-f\" onchange=\"filterAndRenderTicketList()\"><option value=\"\">All Categories<\/option>'+Object.entries(TICKET_CATEGORIES).map(function(e){return '<option value=\"'+e[0]+'\">'+e[1]+'<\/option>';}).join('')+'<\/select>':'')+\r\n '<\/div><div id=\"tickets-list\"><\/div>';\r\n filterAndRenderTicketList();\r\n}\r\n\r\nfunction filterAndRenderTicketList(){\r\n var isAdmin=currentUser&¤tUser.role==='admin';\r\n var list=isAdmin?[].concat(tickets):tickets.filter(function(t){return t.userId===currentUser.id;});\r\n var q=((document.getElementById('tkt-srch')||{}).value||'').toLowerCase();\r\n var sf=(document.getElementById('tkt-status-f')||{}).value||'';\r\n var pf=(document.getElementById('tkt-pri-f')||{}).value||'';\r\n var cf=(document.getElementById('tkt-cat-f')||{}).value||'';\r\n if(q)list=list.filter(function(t){return (t.title+t.description).toLowerCase().includes(q);});\r\n if(sf)list=list.filter(function(t){return t.status===sf;});\r\n if(pf)list=list.filter(function(t){return t.priority===pf;});\r\n if(cf)list=list.filter(function(t){return t.category===cf;});\r\n list.sort(function(a,b){return new Date(b.createdAt)-new Date(a.createdAt);});\r\n var el=document.getElementById('tickets-list');\r\n if(!el)return;\r\n if(!list.length){el.innerHTML='<div class=\"empty\"><i class=\"fas fa-ticket\"><\/i><h4>No tickets found<\/h4><p>Click \"New Ticket\" to submit your first request<\/p><\/div>';return;}\r\n el.innerHTML=list.map(function(t){\r\n var idx=tickets.indexOf(t);\r\n var owner=getUser(t.userId);\r\n var assignee=t.assignedTo?getUser(t.assignedTo):null;\r\n var unread=isAdmin&&t.comments&&t.comments.filter(function(cc){return !cc.byAdmin&&!cc.readByAdmin;}).length>0;\r\n return '<div class=\"ticket-card tc-'+t.status+'\" onclick=\"openTicketDetail('+idx+')\">'+(unread?'<div style=\"position:absolute;top:12px;left:12px;width:8px;height:8px;background:var(--accent);border-radius:50%\"><\/div>':'')+\r\n '<div style=\"display:flex;align-items:flex-start;justify-content:space-between;gap:10px\"><div style=\"flex:1;min-width:0\">'+\r\n '<div class=\"ticket-id\">'+ticketId(idx)+' \u00b7 '+(TICKET_CATEGORIES[t.category]||t.category)+'<\/div>'+\r\n '<div class=\"ticket-title\">'+t.title+'<\/div>'+\r\n '<div class=\"ticket-desc\">'+t.description+'<\/div>'+\r\n '<div class=\"ticket-footer\">'+\r\n '<span class=\"badge '+(STATUS_BADGE[t.status]||'')+'\"><span class=\"b-dot\"><\/span>'+(TICKET_STATUSES[t.status]||t.status)+'<\/span>'+\r\n '<span style=\"display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text2)\"><span class=\"priority-dot p-'+t.priority+'\"><\/span>'+(TICKET_PRIORITIES[t.priority]||t.priority)+'<\/span>'+\r\n (isAdmin&&owner?'<span style=\"font-size:11px;color:var(--text3)\"><i class=\"fas fa-user\" style=\"font-size:10px\"><\/i> '+owner.name+'<\/span>':'')+\r\n (assignee?'<span style=\"font-size:11px;color:var(--text3)\"><i class=\"fas fa-user-check\" style=\"font-size:10px\"><\/i> '+assignee.name+'<\/span>':'')+\r\n '<span style=\"font-size:11px;color:var(--text3);margin-right:auto\">'+fmtDate(t.createdAt)+'<\/span>'+\r\n (t.comments&&t.comments.length?'<span style=\"font-size:11px;color:var(--accent)\"><i class=\"fas fa-comment\"><\/i> '+t.comments.length+'<\/span>':'')+\r\n '<\/div><\/div><\/div><\/div>';\r\n }).join('');\r\n}\r\n\r\nfunction openNewTicketModal(){\r\n openModal('<div class=\"m-head\"><h3>Submit New Ticket<\/h3><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\"><div class=\"fg\"><label>Title *<\/label><input class=\"fc\" id=\"tk-title\" placeholder=\"Brief description of the issue\"><\/div>'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>Category<\/label><select class=\"fc\" id=\"tk-cat\">'+Object.entries(TICKET_CATEGORIES).map(function(e){return '<option value=\"'+e[0]+'\">'+e[1]+'<\/option>';}).join('')+'<\/select><\/div>'+\r\n '<div class=\"fg\"><label>Priority<\/label><select class=\"fc\" id=\"tk-pri\"><option value=\"low\">Low<\/option><option value=\"medium\" selected>Medium<\/option><option value=\"high\">High<\/option><option value=\"critical\">Critical<\/option><\/select><\/div><\/div>'+\r\n '<div class=\"fg\"><label>Device (optional)<\/label><select class=\"fc\" id=\"tk-dev\"><option value=\"\">Not related to a specific device<\/option>'+getUserDevs(currentUser.id).map(function(d){return '<option value=\"'+d.id+'\">'+d.name+' ('+d.serial+')<\/option>';}).join('')+'<\/select><\/div>'+\r\n '<div class=\"fg\"><label>Description *<\/label><textarea class=\"fc\" id=\"tk-desc\" style=\"min-height:100px\" placeholder=\"Please describe the issue in detail...\"><\/textarea><\/div><\/div>'+\r\n '<div class=\"m-footer\"><button class=\"btn btn-primary\" onclick=\"submitTicket()\"><i class=\"fas fa-paper-plane\"><\/i> Submit Ticket<\/button><button class=\"btn btn-ghost\" onclick=\"closeModal()\">Cancel<\/button><\/div>');\r\n}\r\n\r\nfunction submitTicket(){\r\n var title=v('tk-title').trim();\r\n var desc=v('tk-desc').trim();\r\n if(!title){toast('Title is required','error');return;}\r\n if(!desc){toast('Description is required','error');return;}\r\n var t={id:uid(),userId:currentUser.id,title:title,description:desc,category:v('tk-cat'),priority:v('tk-pri'),deviceId:v('tk-dev')||null,status:'open',createdAt:new Date().toISOString(),updatedAt:new Date().toISOString(),assignedTo:null,comments:[]};\r\n tickets.push(t);\r\n addLog('New ticket submitted: '+title,'fa-ticket','info');\r\n save();closeModal();updateTicketsBadge();renderTickets();\r\n toast('Ticket submitted successfully!','success');\r\n}\r\n\r\nfunction openTicketDetail(idx){\r\n var t=tickets[idx];if(!t)return;\r\n var isAdmin=currentUser&¤tUser.role==='admin';\r\n var owner=getUser(t.userId);\r\n var assignee=t.assignedTo?getUser(t.assignedTo):null;\r\n var dev=t.deviceId?getDev(t.deviceId):null;\r\n if(isAdmin&&t.comments){t.comments.forEach(function(cc){if(!cc.byAdmin)cc.readByAdmin=true;});save();updateTicketsBadge();}\r\n var statusOpts=Object.entries(TICKET_STATUSES).map(function(e){return '<option value=\"'+e[0]+'\" '+(t.status===e[0]?'selected':'')+'>'+e[1]+'<\/option>';}).join('');\r\n var assignOpts='<option value=\"\">Unassigned<\/option>'+users.filter(function(u){return u.status==='active';}).map(function(u){return '<option value=\"'+u.id+'\" '+(t.assignedTo===u.id?'selected':'')+'>'+u.name+'<\/option>';}).join('');\r\n openModal('<div class=\"m-head\"><div><div style=\"font-size:11px;color:var(--text3);font-family:var(--mono);margin-bottom:2px\">'+ticketId(idx)+'<\/div><h3 style=\"font-size:15px\">'+t.title+'<\/h3><\/div><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\">'+\r\n '<div style=\"display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px\"><span class=\"badge '+(STATUS_BADGE[t.status]||'')+'\"><span class=\"b-dot\"><\/span>'+(TICKET_STATUSES[t.status]||t.status)+'<\/span><span style=\"display:flex;align-items:center;gap:5px\" class=\"badge b-info\"><span class=\"priority-dot p-'+t.priority+'\"><\/span>'+(TICKET_PRIORITIES[t.priority])+'<\/span><span class=\"badge b-info\">'+(TICKET_CATEGORIES[t.category]||t.category)+'<\/span><\/div>'+\r\n (isAdmin?'<div class=\"f2\" style=\"margin-bottom:16px\"><div class=\"fg\"><label>Status<\/label><select class=\"fc\" id=\"td-status\" onchange=\"updateTicketStatus('+idx+')\">'+statusOpts+'<\/select><\/div><div class=\"fg\"><label>Assign To<\/label><select class=\"fc\" id=\"td-assign\" onchange=\"updateTicketAssign('+idx+')\">'+assignOpts+'<\/select><\/div><\/div>':'')+\r\n '<div class=\"d-grid\" style=\"margin-bottom:16px\"><div class=\"d-item\"><div class=\"d-lbl\">Submitted By<\/div><div class=\"d-val\">'+(owner?owner.name:'Unknown')+'<\/div><\/div><div class=\"d-item\"><div class=\"d-lbl\">Date<\/div><div class=\"d-val\">'+fmtDate(t.createdAt)+'<\/div><\/div>'+(dev?'<div class=\"d-item\"><div class=\"d-lbl\">Related Device<\/div><div class=\"d-val\">'+dev.name+'<\/div><\/div>':'')+(assignee?'<div class=\"d-item\"><div class=\"d-lbl\">Assigned To<\/div><div class=\"d-val\">'+assignee.name+'<\/div><\/div>':'')+'<\/div>'+\r\n '<div style=\"background:var(--bg3);border-radius:10px;padding:14px;margin-bottom:18px;font-size:13px;color:var(--text2);line-height:1.7\">'+t.description+'<\/div>'+\r\n '<div style=\"font-size:13px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px\"><i class=\"fas fa-comments\" style=\"color:var(--accent)\"><\/i>Comments & Updates<\/div>'+\r\n '<div id=\"tkt-comments\">'+buildCommentsHTML(t)+'<\/div>'+\r\n (t.status==='closed'?'<div style=\"text-align:center;padding:12px;background:var(--bg3);border-radius:9px;font-size:13px;color:var(--text3)\"><i class=\"fas fa-lock\"><\/i> This ticket is closed<\/div>':\r\n '<div class=\"reply-box\"><textarea id=\"tkt-reply\" placeholder=\"'+(isAdmin?'Write a response to the user...':'Add a comment or update...')+'\"><\/textarea><button class=\"btn btn-primary btn-sm\" onclick=\"addTicketComment('+idx+')\"><i class=\"fas fa-paper-plane\"><\/i><\/button><\/div>')+\r\n '<\/div>'+\r\n '<div class=\"m-footer\">'+(!isAdmin&&t.status!=='closed'?'<button class=\"btn btn-ghost btn-sm\" onclick=\"closeTicketByUser('+idx+')\"><i class=\"fas fa-check\"><\/i> Mark as Resolved<\/button>':'')+\r\n '<button class=\"btn btn-ghost\" onclick=\"closeModal()\">Close<\/button><\/div>','modal-lg');\r\n}\r\n\r\nfunction buildCommentsHTML(t){\r\n if(!t.comments||!t.comments.length)return '<div style=\"text-align:center;padding:16px;color:var(--text3);font-size:13px\">No comments yet<\/div>';\r\n return t.comments.map(function(cm){\r\n return '<div class=\"comment-box\" style=\"'+(cm.byAdmin?'border-right:3px solid var(--accent)':'border-right:3px solid var(--border2)')+'\">'+\r\n '<div class=\"comment-author\" style=\"color:'+(cm.byAdmin?'var(--accent)':'var(--text)')+'\">'+\r\n (cm.byAdmin?'<i class=\"fas fa-shield-halved\" style=\"font-size:10px;margin-left:4px\"><\/i>Support Team':'<i class=\"fas fa-user\" style=\"font-size:10px;margin-left:4px\"><\/i>'+cm.authorName)+'<\/div>'+\r\n '<div class=\"comment-text\">'+cm.text+'<\/div><div class=\"comment-time\">'+new Date(cm.time).toLocaleString('en-GB')+'<\/div><\/div>';\r\n }).join('');\r\n}\r\n\r\nfunction updateTicketStatus(idx){\r\n var t=tickets[idx];var newStatus=v('td-status');if(!t||!newStatus)return;\r\n t.status=newStatus;t.updatedAt=new Date().toISOString();\r\n addLog('Ticket '+ticketId(idx)+' status \u2192 '+(TICKET_STATUSES[newStatus]||newStatus),'fa-ticket','info');\r\n save();updateTicketsBadge();toast('Status updated to '+(TICKET_STATUSES[newStatus]||newStatus),'success');\r\n}\r\n\r\nfunction updateTicketAssign(idx){\r\n var t=tickets[idx];var uid2=v('td-assign');if(!t)return;\r\n t.assignedTo=uid2||null;t.updatedAt=new Date().toISOString();\r\n var u=uid2?getUser(uid2):null;\r\n if(u){t.comments=t.comments||[];t.comments.push({id:uid(),byAdmin:true,authorName:'System',text:'Ticket assigned to '+u.name,time:new Date().toISOString()});}\r\n save();refreshTicketComments(idx);\r\n toast(u?'Assigned to '+u.name:'Assignment removed','success');\r\n}\r\n\r\nfunction addTicketComment(idx){\r\n var t=tickets[idx];\r\n var replyEl=document.getElementById('tkt-reply');\r\n var text=replyEl?replyEl.value.trim():'';\r\n if(!text){toast('Please write a comment','error');return;}\r\n var isAdmin=currentUser&¤tUser.role==='admin';\r\n t.comments=t.comments||[];\r\n t.comments.push({id:uid(),byAdmin:isAdmin,authorName:currentUser.name||currentUser.display,text:text,time:new Date().toISOString(),readByAdmin:isAdmin});\r\n t.updatedAt=new Date().toISOString();\r\n if(isAdmin&&t.status==='open'){t.status='in_progress';var sel=document.getElementById('td-status');if(sel)sel.value='in_progress';}\r\n save();updateTicketsBadge();refreshTicketComments(idx);\r\n toast('Comment added','success');\r\n}\r\n\r\nfunction refreshTicketComments(idx){\r\n var t=tickets[idx];var el=document.getElementById('tkt-comments');if(!el||!t)return;\r\n el.innerHTML=buildCommentsHTML(t);\r\n var replyInput=document.getElementById('tkt-reply');if(replyInput)replyInput.value='';\r\n}\r\n\r\nfunction closeTicketByUser(idx){\r\n if(!confirm('Mark this ticket as resolved?'))return;\r\n tickets[idx].status='resolved';tickets[idx].updatedAt=new Date().toISOString();\r\n save();closeModal();updateTicketsBadge();renderTickets();\r\n toast('Ticket marked as resolved','success');\r\n}\r\n\r\n\/\/ =================== MY DEVICES ===================\r\nfunction renderMyDevices(){\r\n var c=document.getElementById('content');\r\n var myDevs=getUserDevs(currentUser.id);\r\n var myTickets=tickets.filter(function(t){return t.userId===currentUser.id;});\r\n var openTickets=myTickets.filter(function(t){return t.status==='open'||t.status==='in_progress';});\r\n c.innerHTML=\r\n '<div class=\"page-header\"><div class=\"page-title\">My Devices<\/div><div class=\"page-sub\">Devices assigned to you \u00b7 '+myDevs.length+' device'+(myDevs.length!==1?'s':'')+'<\/div><\/div>'+\r\n (openTickets.length>0?'<div style=\"background:rgba(255,169,64,.1);border:1px solid rgba(255,169,64,.3);border-radius:var(--radius);padding:14px 18px;margin-bottom:20px;display:flex;align-items:center;gap:12px\"><i class=\"fas fa-triangle-exclamation\" style=\"color:var(--warning);font-size:18px\"><\/i><div><div style=\"font-weight:700;font-size:13px\">You have '+openTickets.length+' open ticket'+(openTickets.length>1?'s':'')+'<\/div><div style=\"font-size:12px;color:var(--text2);margin-top:2px\">Our support team is working on your request.<\/div><\/div><button class=\"btn btn-ghost btn-sm\" style=\"margin-right:auto\" onclick=\"go(\\'tickets\\',document.querySelector(\\'.nav-item[data-page="tickets"]\\'))\">View Tickets<\/button><\/div>':'')+\r\n (myDevs.length===0?'<div class=\"empty\"><i class=\"fas fa-laptop-slash\"><\/i><h4>No devices assigned<\/h4><p>Contact IT support if you need a device<\/p><button class=\"btn btn-primary btn-sm\" style=\"margin-top:14px\" onclick=\"openNewTicketModal()\"><i class=\"fas fa-ticket\"><\/i> Open a Ticket<\/button><\/div>':\r\n '<div style=\"display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px\">'+\r\n myDevs.map(function(d){\r\n var ca=getCurAssign(d.id);\r\n var daysUsed=ca?daysBetween(ca.assignDate):0;\r\n var devTickets=myTickets.filter(function(t){return t.deviceId===d.id&&(t.status==='open'||t.status==='in_progress');});\r\n return '<div class=\"card\" style=\"position:relative;overflow:hidden\">'+\r\n '<div style=\"position:absolute;top:0;right:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2))\"><\/div>'+\r\n '<div style=\"display:flex;align-items:center;gap:12px;margin-bottom:16px\"><div class=\"dev-icon '+TC[d.type]+'\" style=\"width:46px;height:46px;font-size:20px\"><i class=\"fas '+TI[d.type]+'\"><\/i><\/div><div style=\"flex:1;min-width:0\"><div style=\"font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis\">'+d.name+'<\/div><div style=\"font-size:11px;color:var(--text3);margin-top:2px\">'+d.brand+' \u00b7 '+d.model+'<\/div><\/div>'+(devTickets.length>0?'<span class=\"badge b-maintenance\" style=\"font-size:10px\"><i class=\"fas fa-ticket\"><\/i> '+devTickets.length+'<\/span>':'')+'<\/div>'+\r\n '<div class=\"d-grid\" style=\"margin-bottom:14px\">'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Serial<\/div><div class=\"d-val mono\" style=\"font-size:11px\">'+(d.serial||'\u2014')+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">IP Address<\/div><div class=\"d-val mono\" style=\"font-size:11px\">'+(d.ip||'\u2014')+'<\/div><\/div>'+\r\n (d.os&&d.os!=='-'?'<div class=\"d-item\"><div class=\"d-lbl\">OS<\/div><div class=\"d-val\" style=\"font-size:12px\">'+d.os+'<\/div><\/div>':'')+\r\n (d.cpu&&d.cpu!=='-'?'<div class=\"d-item\"><div class=\"d-lbl\">CPU<\/div><div class=\"d-val\" style=\"font-size:12px\">'+d.cpu+'<\/div><\/div>':'')+\r\n (d.ram&&d.ram!=='-'?'<div class=\"d-item\"><div class=\"d-lbl\">RAM<\/div><div class=\"d-val\" style=\"font-size:12px\">'+d.ram+'<\/div><\/div>':'')+\r\n (d.storage&&d.storage!=='-'?'<div class=\"d-item\"><div class=\"d-lbl\">Storage<\/div><div class=\"d-val\" style=\"font-size:12px\">'+d.storage+'<\/div><\/div>':'')+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">In Use Since<\/div><div class=\"d-val\" style=\"font-size:12px\">'+fmtDate(ca?ca.assignDate:null)+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Duration<\/div><div class=\"d-val\" style=\"font-size:12px\">'+daysUsed+' days<\/div><\/div>'+\r\n '<\/div>'+\r\n (d.notes?'<div style=\"background:var(--bg3);border-radius:8px;padding:9px 12px;font-size:12px;color:var(--text2);margin-bottom:12px\">'+d.notes+'<\/div>':'')+\r\n '<button class=\"btn btn-primary btn-sm\" style=\"width:100%\" onclick=\"openNewTicketModalForDevice(\\''+d.id+'\\')\"><i class=\"fas fa-ticket\"><\/i> Report an Issue<\/button><\/div>';\r\n }).join('')+\r\n '<\/div><div style=\"margin-top:20px\"><button class=\"btn btn-ghost btn-sm\" onclick=\"openNewTicketModal()\"><i class=\"fas fa-plus\"><\/i> Open General Ticket<\/button><\/div>');\r\n}\r\n\r\nfunction openNewTicketModalForDevice(deviceId){\r\n var d=getDev(deviceId);\r\n openModal('<div class=\"m-head\"><h3>Report Device Issue<\/h3><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\">'+\r\n '<div style=\"background:rgba(79,124,255,.08);border:1px solid rgba(79,124,255,.2);border-radius:9px;padding:12px 14px;margin-bottom:16px;display:flex;align-items:center;gap:10px\"><div class=\"dev-icon '+TC[d.type]+'\" style=\"width:34px;height:34px;font-size:14px\"><i class=\"fas '+TI[d.type]+'\"><\/i><\/div><div><div style=\"font-weight:600;font-size:13px\">'+d.name+'<\/div><div style=\"font-size:11px;color:var(--text3)\">'+d.serial+'<\/div><\/div><\/div>'+\r\n '<div class=\"fg\"><label>Issue Title *<\/label><input class=\"fc\" id=\"tk-title\" placeholder=\"e.g. Laptop won\\'t turn on...\"><\/div>'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>Category<\/label><select class=\"fc\" id=\"tk-cat\"><option value=\"hardware\" selected>Hardware<\/option><option value=\"software\">Software<\/option><option value=\"network\">Network<\/option><option value=\"other\">Other<\/option><\/select><\/div>'+\r\n '<div class=\"fg\"><label>Priority<\/label><select class=\"fc\" id=\"tk-pri\"><option value=\"low\">Low \u2014 Not urgent<\/option><option value=\"medium\" selected>Medium \u2014 Affecting work<\/option><option value=\"high\">High \u2014 Blocking work<\/option><option value=\"critical\">Critical \u2014 Complete failure<\/option><\/select><\/div><\/div>'+\r\n '<div class=\"fg\"><label>Description *<\/label><textarea class=\"fc\" id=\"tk-desc\" style=\"min-height:110px\" placeholder=\"Please describe the issue in detail...\"><\/textarea><\/div><\/div>'+\r\n '<div class=\"m-footer\"><button class=\"btn btn-primary\" onclick=\"submitTicketForDevice(\\''+deviceId+'\\')\"><i class=\"fas fa-paper-plane\"><\/i> Submit Ticket<\/button><button class=\"btn btn-ghost\" onclick=\"closeModal()\">Cancel<\/button><\/div>');\r\n}\r\n\r\nfunction submitTicketForDevice(deviceId){\r\n var title=v('tk-title').trim();\r\n var desc=v('tk-desc').trim();\r\n if(!title){toast('Title is required','error');return;}\r\n if(!desc){toast('Please describe the issue','error');return;}\r\n var t={id:uid(),userId:currentUser.id,title:title,description:desc,category:v('tk-cat'),priority:v('tk-pri'),deviceId:deviceId,status:'open',createdAt:new Date().toISOString(),updatedAt:new Date().toISOString(),assignedTo:null,comments:[]};\r\n tickets.push(t);\r\n addLog('Ticket submitted for device: '+(getDev(deviceId)?getDev(deviceId).name:''),'fa-ticket','info');\r\n save();closeModal();updateTicketsBadge();\r\n go('tickets',document.querySelector('.nav-item[data-page=\"tickets\"]'));\r\n toast('Ticket submitted! Support team will respond soon.','success');\r\n}\r\n\r\n\/\/ =================== GLOBAL SEARCH ===================\r\nfunction globalSearch(){\r\n var q=document.getElementById('global-search').value.trim();\r\n if(!q)return;\r\n dQ=q;uQ=q;\r\n if(curPage==='devices')renderDevTable();\r\n else if(curPage==='users')renderUsrTable();\r\n else{go('devices',document.querySelector('[data-page=\"devices\"]'));setTimeout(function(){dQ=q;renderDevTable();},100);}\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\nHTMLEOF\r\necho \"File written: $(wc -c < \/mnt\/user-data\/outputs\/jidaar_fixed.html) bytes\"\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>bash cat > \/mnt\/user-data\/outputs\/jidaar_fixed.html<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-146","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jidaar.com\/index.php\/wp-json\/wp\/v2\/pages\/146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jidaar.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.jidaar.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.jidaar.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jidaar.com\/index.php\/wp-json\/wp\/v2\/comments?post=146"}],"version-history":[{"count":26,"href":"https:\/\/www.jidaar.com\/index.php\/wp-json\/wp\/v2\/pages\/146\/revisions"}],"predecessor-version":[{"id":13133,"href":"https:\/\/www.jidaar.com\/index.php\/wp-json\/wp\/v2\/pages\/146\/revisions\/13133"}],"wp:attachment":[{"href":"https:\/\/www.jidaar.com\/index.php\/wp-json\/wp\/v2\/media?parent=146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\nbash\r\n\r\ncat > \/mnt\/user-data\/outputs\/jidaar_fixed.html << 'HTMLEOF'\r\n\r\n\r\n\r\n\r\n\r\nJIDAAR \u2014 IT Asset Management System<\/title>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.0\/chart.umd.min.js\"><\/script>\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');\r\n@import url('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css');\r\n*{box-sizing:border-box;margin:0;padding:0}\r\n:root{\r\n --bg:#0b0f1a;--bg2:#111827;--bg3:#1a2236;--bg4:#222d45;--bg5:#2a3655;\r\n --accent:#4f7cff;--accent2:#7c5fff;--accent3:#00d4aa;--accent4:#ff6b6b;--accent5:#ffa940;\r\n --text:#f0f4ff;--text2:#8892b0;--text3:#4a5568;\r\n --border:#1e2d4a;--border2:#2a3a5c;\r\n --success:#00d4aa;--warning:#ffa940;--danger:#ff6b6b;--info:#4f7cff;\r\n --sidebar:250px;--radius:12px;--font:'Inter',sans-serif;--mono:'JetBrains Mono',monospace;\r\n --shadow:0 4px 24px rgba(0,0,0,.35);\r\n}\r\n.light{\r\n --bg:#f0f4fb;--bg2:#ffffff;--bg3:#e8eef8;--bg4:#dde5f5;--bg5:#d0daf0;\r\n --text:#0f1a35;--text2:#4a5568;--text3:#94a3b8;\r\n --border:#d4ddf0;--border2:#c0cce8;\r\n --shadow:0 4px 24px rgba(79,124,255,.08);\r\n}\r\nhtml,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);overflow:hidden;transition:background .3s,color .3s}\r\n::-webkit-scrollbar{width:4px;height:4px}\r\n::-webkit-scrollbar-track{background:transparent}\r\n::-webkit-scrollbar-thumb{background:var(--border2);border-radius:10px}\r\n\r\n\/* ---- LOGIN ---- *\/\r\n#login-screen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999}\r\n.login-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}\r\n.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.25}\r\n.orb1{width:500px;height:500px;background:var(--accent);top:-100px;right:-100px}\r\n.orb2{width:400px;height:400px;background:var(--accent2);bottom:-80px;left:-80px}\r\n.orb3{width:300px;height:300px;background:var(--accent3);top:50%;left:50%;transform:translate(-50%,-50%)}\r\n.login-card{position:relative;background:rgba(17,24,39,.85);border:1px solid var(--border2);border-radius:20px;padding:44px 40px;width:420px;max-width:95vw;backdrop-filter:blur(20px);box-shadow:0 30px 80px rgba(0,0,0,.5);animation:fadeUp .6s ease}\r\n.light .login-card{background:rgba(255,255,255,.9)}\r\n.login-logo{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px}\r\n.login-logo-icon{width:52px;height:52px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;box-shadow:0 8px 24px rgba(79,124,255,.4)}\r\n.login-logo-text{font-size:26px;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}\r\n.login-sub{text-align:center;color:var(--text3);font-size:13px;margin-bottom:32px;font-weight:500}\r\n.f-group{margin-bottom:18px}\r\n.f-label{font-size:12px;color:var(--text2);font-weight:700;margin-bottom:7px;display:block;letter-spacing:.04em}\r\n.f-input{width:100%;background:var(--bg3);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--text);font-family:var(--font);font-size:14px;outline:none;transition:.2s;direction:ltr}\r\n.f-input:focus{border-color:var(--accent);background:var(--bg4);box-shadow:0 0 0 4px rgba(79,124,255,.12)}\r\n.f-input::placeholder{color:var(--text3)}\r\n.btn-login{width:100%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:10px;padding:13px;font-family:var(--font);font-size:15px;font-weight:700;cursor:pointer;margin-top:4px;transition:.2s;display:flex;align-items:center;justify-content:center;gap:8px}\r\n.btn-login:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(79,124,255,.4)}\r\n.hint-box{margin-top:20px;background:rgba(79,124,255,.08);border:1px solid rgba(79,124,255,.2);border-radius:10px;padding:12px 14px;font-size:12px;color:var(--text2)}\r\n.hint-box span{color:var(--accent);font-weight:700}\r\n\r\n\/* ---- APP SHELL ---- *\/\r\n#app{display:none;height:100vh;overflow:hidden}\r\n.app-layout{display:flex;height:100%}\r\n\r\n\/* ---- SIDEBAR ---- *\/\r\n.sidebar{width:var(--sidebar);background:var(--bg2);border-left:1px solid var(--border);display:flex;flex-direction:column;transition:width .3s;flex-shrink:0;overflow:hidden;position:relative}\r\n.sidebar.collapsed{width:64px}\r\n.sb-header{padding:0 16px;height:64px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);flex-shrink:0}\r\n.sb-logo{width:38px;height:38px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;flex-shrink:0;box-shadow:0 4px 14px rgba(79,124,255,.35)}\r\n.sb-brand{white-space:nowrap;overflow:hidden}\r\n.sb-brand-name{font-size:16px;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}\r\n.sb-brand-sub{font-size:10px;color:var(--text3);font-weight:500;margin-top:-2px}\r\n.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 8px}\r\n.sb-section{margin-bottom:20px}\r\n.sb-section-lbl{font-size:9px;color:var(--text3);font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:0 10px;margin-bottom:8px;white-space:nowrap;overflow:hidden;transition:opacity .2s}\r\n.sidebar.collapsed .sb-section-lbl{opacity:0}\r\n.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;transition:.15s;color:var(--text2);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;position:relative;user-select:none}\r\n.nav-item:hover{background:var(--bg3);color:var(--text)}\r\n.nav-item.active{background:rgba(79,124,255,.14);color:var(--accent)}\r\n.nav-item.active::after{content:'';position:absolute;right:0;top:20%;height:60%;width:3px;background:var(--accent);border-radius:3px 0 0 3px}\r\n.nav-icon{width:20px;text-align:center;flex-shrink:0;font-size:15px}\r\n.nav-badge{margin-right:auto;background:var(--danger);color:#fff;font-size:9px;padding:2px 6px;border-radius:20px;font-weight:800;flex-shrink:0}\r\n.sidebar.collapsed .nav-badge{display:none}\r\n.sb-footer{padding:10px 8px;border-top:1px solid var(--border);flex-shrink:0}\r\n.sidebar-toggle{position:absolute;top:72px;left:-13px;width:26px;height:26px;background:var(--bg2);border:1px solid var(--border2);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;color:var(--text2);z-index:10;transition:.2s;box-shadow:var(--shadow)}\r\n.sidebar-toggle:hover{background:var(--accent);color:#fff;border-color:var(--accent)}\r\n\r\n\/* ---- TOPBAR ---- *\/\r\n.topbar{height:64px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex-shrink:0}\r\n.tb-left{display:flex;align-items:center;gap:12px}\r\n.tb-search{background:var(--bg3);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;gap:8px;padding:8px 14px;width:260px;transition:.2s}\r\n.tb-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,124,255,.1)}\r\n.tb-search input{background:none;border:none;outline:none;color:var(--text);font-family:var(--font);font-size:13px;width:100%}\r\n.tb-search input::placeholder{color:var(--text3)}\r\n.tb-right{display:flex;align-items:center;gap:8px}\r\n.icon-btn{width:38px;height:38px;background:var(--bg3);border:1px solid var(--border);border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);font-size:15px;transition:.15s;position:relative}\r\n.icon-btn:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)}\r\n.notif-dot{position:absolute;top:7px;right:7px;width:7px;height:7px;background:var(--danger);border-radius:50%;border:2px solid var(--bg2);animation:pulse 2s infinite}\r\n@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}\r\n.user-pill{display:flex;align-items:center;gap:9px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:5px 14px 5px 8px;cursor:pointer;transition:.15s}\r\n.user-pill:hover{background:var(--bg4);border-color:var(--border2)}\r\n.u-avatar{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff}\r\n.u-name{font-size:13px;font-weight:700}\r\n.u-role{font-size:10px;color:var(--text3)}\r\n\r\n\/* ---- CONTENT ---- *\/\r\n.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}\r\n.content{flex:1;overflow-y:auto;padding:28px}\r\n\r\n\/* ---- PAGE HEADER ---- *\/\r\n.page-header{margin-bottom:24px}\r\n.page-title{font-size:22px;font-weight:900;letter-spacing:-.02em}\r\n.page-sub{font-size:13px;color:var(--text2);margin-top:3px}\r\n\r\n\/* ---- STAT CARDS ---- *\/\r\n.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}\r\n.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px 18px;position:relative;overflow:hidden;transition:.2s;cursor:pointer}\r\n.stat-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow)}\r\n.stat-card::before{content:'';position:absolute;bottom:-30px;left:-20px;width:90px;height:90px;border-radius:50%;opacity:.07}\r\n.sc-blue::before{background:var(--accent)}\r\n.sc-purple::before{background:var(--accent2)}\r\n.sc-green::before{background:var(--success)}\r\n.sc-orange::before{background:var(--warning)}\r\n.sc-red::before{background:var(--danger)}\r\n.sc-teal::before{background:var(--accent3)}\r\n.stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:14px}\r\n.si-blue{background:rgba(79,124,255,.15);color:var(--accent)}\r\n.si-purple{background:rgba(124,95,255,.15);color:var(--accent2)}\r\n.si-green{background:rgba(0,212,170,.15);color:var(--success)}\r\n.si-orange{background:rgba(255,169,64,.15);color:var(--warning)}\r\n.si-red{background:rgba(255,107,107,.15);color:var(--danger)}\r\n.si-teal{background:rgba(0,212,170,.15);color:var(--accent3)}\r\n.stat-val{font-size:30px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}\r\n.stat-lbl{font-size:12px;color:var(--text2);margin-top:5px;font-weight:600}\r\n.stat-sub{font-size:11px;color:var(--text3);margin-top:6px;display:flex;align-items:center;gap:4px}\r\n\r\n\/* ---- CHARTS ---- *\/\r\n.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}\r\n.chart-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px}\r\n.chart-head{font-size:13px;font-weight:700;margin-bottom:16px;color:var(--text);display:flex;align-items:center;gap:8px}\r\n.chart-head i{color:var(--accent);font-size:15px}\r\n.chart-wrap{height:190px;position:relative}\r\n\r\n\/* ---- CARDS ---- *\/\r\n.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px}\r\n.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}\r\n.card-title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}\r\n.card-title i{color:var(--accent)}\r\n\r\n\/* ---- TABLE ---- *\/\r\n.tbl-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}\r\n.tbl-toolbar{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center;flex-wrap:wrap}\r\n.srch{background:var(--bg3);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;gap:8px;padding:8px 12px;flex:1;min-width:180px}\r\n.srch input{background:none;border:none;outline:none;color:var(--text);font-family:var(--font);font-size:13px;width:100%}\r\n.srch i{color:var(--text3);font-size:13px;flex-shrink:0}\r\n.sel{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text);font-family:var(--font);font-size:13px;outline:none;cursor:pointer}\r\n.sel option{background:var(--bg2)}\r\ntable{width:100%;border-collapse:collapse}\r\nthead th{padding:10px 14px;text-align:right;font-size:11px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--bg3);border-bottom:1px solid var(--border);white-space:nowrap}\r\ntbody td{padding:13px 14px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle}\r\ntbody tr:last-child td{border-bottom:none}\r\ntbody tr:hover td{background:rgba(79,124,255,.04)}\r\n.c-row{cursor:pointer}\r\n\r\n\/* ---- BADGES ---- *\/\r\n.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}\r\n.b-active,.b-available{background:rgba(0,212,170,.12);color:var(--success);border:1px solid rgba(0,212,170,.25)}\r\n.b-inactive{background:rgba(255,107,107,.12);color:var(--danger);border:1px solid rgba(255,107,107,.25)}\r\n.b-assigned{background:rgba(79,124,255,.12);color:var(--accent);border:1px solid rgba(79,124,255,.25)}\r\n.b-maintenance{background:rgba(255,169,64,.12);color:var(--warning);border:1px solid rgba(255,169,64,.25)}\r\n.b-retired{background:rgba(148,163,184,.1);color:var(--text3);border:1px solid rgba(148,163,184,.2)}\r\n.b-info{background:rgba(79,124,255,.1);color:var(--accent);border:1px solid rgba(79,124,255,.2);font-size:10px}\r\n.b-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}\r\n\r\n\/* ---- BUTTONS ---- *\/\r\n.btn{border:none;border-radius:9px;padding:9px 18px;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}\r\n.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}\r\n.btn-primary:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 8px 20px rgba(79,124,255,.3)}\r\n.btn-ghost{background:transparent;border:1px solid var(--border2);color:var(--text2)}\r\n.btn-ghost:hover{background:var(--bg3);color:var(--text);border-color:var(--border2)}\r\n.btn-danger{background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.25);color:var(--danger)}\r\n.btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}\r\n.btn-success{background:rgba(0,212,170,.12);border:1px solid rgba(0,212,170,.25);color:var(--success)}\r\n.btn-success:hover{background:var(--success);color:#fff}\r\n.btn-sm{padding:6px 13px;font-size:12px;border-radius:8px}\r\n.btn-xs{padding:4px 10px;font-size:11px;border-radius:7px}\r\n\r\n\/* ---- MODAL ---- *\/\r\n.overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);z-index:500;display:none;align-items:center;justify-content:center;padding:16px}\r\n.overlay.open{display:flex}\r\n.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:18px;width:680px;max-width:100%;max-height:92vh;overflow-y:auto;animation:fadeUp .3s ease;position:relative}\r\n.modal-sm{width:440px}\r\n.modal-lg{width:820px}\r\n.m-head{padding:22px 26px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg2);z-index:2;border-radius:18px 18px 0 0}\r\n.m-head h3{font-size:16px;font-weight:800}\r\n.m-close{width:32px;height:32px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);font-size:13px;transition:.15s}\r\n.m-close:hover{background:var(--danger);color:#fff;border-color:var(--danger)}\r\n.m-body{padding:24px 26px}\r\n.m-footer{padding:16px 26px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;background:var(--bg2);border-radius:0 0 18px 18px}\r\n.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}\r\n.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}\r\n.fg{margin-bottom:14px}\r\n.fg label{display:block;font-size:11px;color:var(--text2);font-weight:700;margin-bottom:6px;letter-spacing:.04em;text-transform:uppercase}\r\n.fc{width:100%;background:var(--bg3);border:1.5px solid var(--border);border-radius:9px;padding:9px 12px;color:var(--text);font-family:var(--font);font-size:13px;outline:none;transition:.2s;direction:ltr}\r\n.fc:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,124,255,.1)}\r\n.fc::placeholder{color:var(--text3)}\r\nselect.fc option{background:var(--bg2)}\r\ntextarea.fc{resize:vertical;min-height:80px}\r\n.sec-div{border:none;border-top:1px solid var(--border);margin:18px 0}\r\n\r\n\/* ---- DEVICE ICONS ---- *\/\r\n.dev-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}\r\n.di-laptop{background:rgba(79,124,255,.12);color:var(--accent)}\r\n.di-desktop{background:rgba(124,95,255,.12);color:var(--accent2)}\r\n.di-printer{background:rgba(255,169,64,.12);color:var(--warning)}\r\n.di-router,.di-switch,.di-ap{background:rgba(0,212,170,.12);color:var(--success)}\r\n.di-monitor{background:rgba(0,188,212,.12);color:#00bcd4}\r\n.di-other{background:rgba(255,107,107,.12);color:var(--danger)}\r\n\r\n\/* ---- ACTIVITY ---- *\/\r\n.act-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}\r\n.act-item:last-child{border-bottom:none}\r\n.act-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}\r\n.act-text{font-size:13px;line-height:1.5;flex:1}\r\n.act-time{font-size:11px;color:var(--text3);margin-top:3px}\r\n\r\n\/* ---- HISTORY TIMELINE ---- *\/\r\n.tl-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}\r\n.tl-item:last-child{border-bottom:none}\r\n.tl-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-top:5px;flex-shrink:0}\r\n.tl-info{flex:1}\r\n.tl-name{font-size:13px;font-weight:600}\r\n.tl-meta{font-size:11px;color:var(--text3);margin-top:2px}\r\n\r\n\/* ---- DETAIL GRID ---- *\/\r\n.d-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}\r\n.d-item{background:var(--bg3);border-radius:9px;padding:11px 13px}\r\n.d-lbl{font-size:10px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}\r\n.d-val{font-size:13px;font-weight:600}\r\n.mono{font-family:var(--mono);font-size:12px}\r\n\r\n\/* ---- TABS ---- *\/\r\n.tabs{display:flex;background:var(--bg3);border-radius:10px;padding:4px;margin-bottom:20px;gap:4px}\r\n.tab-btn{flex:1;text-align:center;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:.15s;color:var(--text2);border:none;background:none;font-family:var(--font);white-space:nowrap}\r\n.tab-btn.active{background:var(--bg2);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.15)}\r\n\r\n\/* ---- USER TAG ---- *\/\r\n.u-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(79,124,255,.1);border:1px solid rgba(79,124,255,.2);color:var(--accent);border-radius:20px;padding:3px 10px;font-size:12px;font-weight:600}\r\n.u-tag-none{color:var(--text3);font-size:12px;font-style:italic}\r\n\r\n\/* ---- AVATAR ---- *\/\r\n.av{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0}\r\n\r\n\/* ---- PAGINATION ---- *\/\r\n.pag{display:flex;align-items:center;gap:6px;justify-content:center;padding:16px}\r\n.pag-btn{min-width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;font-weight:700;background:var(--bg3);border:1px solid var(--border);color:var(--text2);transition:.15px;padding:0 8px}\r\n.pag-btn:hover,.pag-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}\r\n\r\n\/* ---- PROGRESS ---- *\/\r\n.progress{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;margin-top:8px}\r\n.progress-fill{height:100%;border-radius:3px;transition:width .5s ease}\r\n\r\n\/* ---- QR ---- *\/\r\n.qr-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 0}\r\n\r\n\/* ---- TOASTS ---- *\/\r\n.toast-box{position:fixed;bottom:24px;left:24px;z-index:9000;display:flex;flex-direction:column;gap:8px}\r\n.toast{background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:13px 16px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;min-width:240px;max-width:340px;box-shadow:0 12px 40px rgba(0,0,0,.3);animation:slideIn .3s ease}\r\n.toast.t-success{border-right:3px solid var(--success)}\r\n.toast.t-error{border-right:3px solid var(--danger)}\r\n.toast.t-info{border-right:3px solid var(--accent)}\r\n.toast.t-warning{border-right:3px solid var(--warning)}\r\n\r\n\/* ---- NOTIF PANEL ---- *\/\r\n.notif-panel{position:absolute;top:46px;left:0;width:340px;background:var(--bg2);border:1px solid var(--border2);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);z-index:50;overflow:hidden;animation:fadeUp .2s ease}\r\n.n-head{padding:13px 16px;border-bottom:1px solid var(--border);font-size:13px;font-weight:800;display:flex;justify-content:space-between;align-items:center}\r\n.n-item{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);transition:.15s;cursor:pointer}\r\n.n-item:hover{background:var(--bg3)}\r\n.n-item.unread{background:rgba(79,124,255,.04)}\r\n.n-item:last-child{border-bottom:none}\r\n.n-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}\r\n.n-txt{font-size:12px;line-height:1.5}\r\n.n-time{font-size:10px;color:var(--text3);margin-top:2px}\r\n\r\n\/* ---- EMPTY ---- *\/\r\n.empty{text-align:center;padding:52px 20px;color:var(--text2)}\r\n.empty i{font-size:44px;color:var(--text3);margin-bottom:14px;display:block}\r\n.empty h4{font-size:15px;font-weight:700;margin-bottom:6px;color:var(--text)}\r\n.empty p{font-size:13px;color:var(--text3)}\r\n\r\n\/* ---- REPORT BARS ---- *\/\r\n.rep-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px}\r\n.rep-lbl{width:100px;font-size:12px;color:var(--text2);text-align:right;flex-shrink:0}\r\n.rep-track{flex:1;background:var(--bg3);border-radius:4px;height:22px;overflow:hidden}\r\n.rep-fill{height:100%;border-radius:4px;display:flex;align-items:center;padding-right:8px;font-size:11px;font-weight:700;color:#fff;transition:width .6s ease}\r\n.rep-count{width:28px;font-size:12px;font-weight:700;flex-shrink:0}\r\n\r\n\/* ---- ANIMATIONS ---- *\/\r\n@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}\r\n@keyframes slideIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}\r\n.fade-in{animation:fadeUp .4s ease}\r\n\r\n\/* ---- RESPONSIVE ---- *\/\r\n@media(max-width:900px){\r\n .charts-grid{grid-template-columns:1fr}\r\n .f2,.f3{grid-template-columns:1fr}\r\n .tb-search{width:180px}\r\n}\r\n@media(max-width:640px){\r\n .sidebar{position:fixed;right:0;top:0;bottom:0;z-index:200;transform:translateX(0);box-shadow:4px 0 30px rgba(0,0,0,.5)}\r\n .sidebar.collapsed{transform:translateX(100%);width:var(--sidebar)}\r\n .stats-row{grid-template-columns:1fr 1fr}\r\n .content{padding:16px}\r\n .tb-search{display:none}\r\n .d-grid{grid-template-columns:1fr}\r\n}\r\n\r\n\/* ---- TICKETS ---- *\/\r\n.ticket-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin-bottom:12px;transition:.2s;cursor:pointer;position:relative;overflow:hidden}\r\n.ticket-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--shadow)}\r\n.ticket-card::before{content:'';position:absolute;right:0;top:0;bottom:0;width:4px;border-radius:0 var(--radius) var(--radius) 0}\r\n.tc-open::before{background:var(--accent)}\r\n.tc-in_progress::before{background:var(--warning)}\r\n.tc-resolved::before{background:var(--success)}\r\n.tc-closed::before{background:var(--text3)}\r\n.ticket-id{font-family:var(--mono);font-size:11px;color:var(--text3);font-weight:600;margin-bottom:4px}\r\n.ticket-title{font-size:14px;font-weight:700;margin-bottom:6px}\r\n.ticket-desc{font-size:12px;color:var(--text2);line-height:1.5;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\r\n.ticket-footer{display:flex;align-items:center;gap:10px;flex-wrap:wrap}\r\n.priority-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}\r\n.p-low{background:#4ade80}.p-medium{background:#fbbf24}.p-high{background:#f97316}.p-critical{background:#ef4444}\r\n.timeline-line{position:relative;padding-right:20px}\r\n.timeline-line::before{content:'';position:absolute;right:7px;top:12px;bottom:0;width:2px;background:var(--border)}\r\n.timeline-line:last-child::before{display:none}\r\n.timeline-dot-w{position:absolute;right:0;top:4px;width:16px;height:16px;border-radius:50%;border:2px solid var(--bg2);display:flex;align-items:center;justify-content:center;font-size:8px}\r\n.comment-box{background:var(--bg3);border-radius:10px;padding:14px;margin-bottom:8px}\r\n.comment-author{font-size:12px;font-weight:700;margin-bottom:4px}\r\n.comment-text{font-size:13px;color:var(--text2);line-height:1.5}\r\n.comment-time{font-size:10px;color:var(--text3);margin-top:4px}\r\n.reply-box{display:flex;gap:8px;margin-top:12px;align-items:flex-end}\r\n.reply-box textarea{flex:1;background:var(--bg3);border:1.5px solid var(--border);border-radius:9px;padding:10px 12px;color:var(--text);font-family:var(--font);font-size:13px;outline:none;resize:none;min-height:70px;transition:.2s}\r\n.reply-box textarea:focus{border-color:var(--accent)}\r\n.ticket-filter-bar{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;align-items:center}\r\n\r\n.sb-header img{filter:brightness(1)}\r\n.light .sb-header img{filter:brightness(0.15)}\r\n.sidebar.collapsed #sb-logo-img{opacity:0;pointer-events:none;}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<div id=\"login-screen\">\r\n <div class=\"login-bg\">\r\n <div class=\"orb orb1\"><\/div>\r\n <div class=\"orb orb2\"><\/div>\r\n <div class=\"orb orb3\"><\/div>\r\n <\/div>\r\n <div class=\"login-card\">\r\n <div class=\"login-logo\" style=\"flex-direction:column;gap:6px\">\r\n <div class=\"login-logo-icon\"><i class=\"fas fa-shield-halved\"><\/i><\/div>\r\n <div class=\"login-logo-text\">JIDAAR<\/div>\r\n <\/div>\r\n <div class=\"login-sub\">IT Asset Management System<\/div>\r\n <div class=\"f-group\">\r\n <label class=\"f-label\">Email Address<\/label>\r\n <input class=\"f-input\" id=\"li-email\" type=\"email\" value=\"admin@jidaar.com\" placeholder=\"admin@jidaar.com\">\r\n <\/div>\r\n <div class=\"f-group\">\r\n <label class=\"f-label\">Password<\/label>\r\n <input class=\"f-input\" id=\"li-pass\" type=\"password\" value=\"admin123\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\r\n <\/div>\r\n <button class=\"btn-login\" onclick=\"doLogin()\"><i class=\"fas fa-sign-in-alt\"><\/i> Sign In<\/button>\r\n <div class=\"hint-box\">\r\n <div><span>Admin:<\/span> admin@jidaar.com \/ admin123<\/div>\r\n <hr style=\"border:none;border-top:1px solid rgba(79,124,255,.15);margin:8px 0\">\r\n <div style=\"font-size:11px;color:var(--text3)\">Users: login with your email & the password set by admin<\/div>\r\n <div style=\"font-size:11px;color:var(--text3);margin-top:3px\">Default: ahmed.ali@company.com \/ ahmed123<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"app\">\r\n<div class=\"app-layout\">\r\n\r\n \r\n <aside class=\"sidebar\" id=\"sidebar\">\r\n <div class=\"sidebar-toggle\" onclick=\"toggleSB()\" id=\"sb-toggle\" title=\"Toggle Sidebar\">\r\n <i class=\"fas fa-chevron-right\" id=\"sb-toggle-icon\"><\/i>\r\n <\/div>\r\n <div class=\"sb-header\" style=\"padding:10px 14px\">\r\n <div class=\"sb-logo\"><i class=\"fas fa-shield-halved\"><\/i><\/div>\r\n <div class=\"sb-brand\" id=\"sb-logo-img\">\r\n <div class=\"sb-brand-name\">JIDAAR<\/div>\r\n <div class=\"sb-brand-sub\">IT Asset Management<\/div>\r\n <\/div>\r\n <\/div>\r\n <nav class=\"sb-nav\">\r\n <div class=\"sb-section admin-only\">\r\n <div class=\"sb-section-lbl\">Main<\/div>\r\n <div class=\"nav-item active\" data-page=\"dashboard\" onclick=\"go('dashboard',this)\">\r\n <i class=\"fas fa-chart-pie nav-icon\"><\/i><span>Dashboard<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-page=\"activity\" onclick=\"go('activity',this)\">\r\n <i class=\"fas fa-history nav-icon\"><\/i><span>Activity Log<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sb-section admin-only\">\r\n <div class=\"sb-section-lbl\">Assets<\/div>\r\n <div class=\"nav-item\" data-page=\"devices\" onclick=\"go('devices',this)\">\r\n <i class=\"fas fa-laptop nav-icon\"><\/i><span>Devices<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-page=\"users\" onclick=\"go('users',this)\">\r\n <i class=\"fas fa-users nav-icon\"><\/i><span>Users<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-page=\"assignments\" onclick=\"go('assignments',this)\">\r\n <i class=\"fas fa-link nav-icon\"><\/i><span>Assignments<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sb-section admin-only\" id=\"admin-section\">\r\n <div class=\"sb-section-lbl\">Management<\/div>\r\n <div class=\"nav-item\" data-page=\"tickets\" onclick=\"go('tickets',this)\">\r\n <i class=\"fas fa-ticket nav-icon\"><\/i><span>All Tickets<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-page=\"reports\" onclick=\"go('reports',this)\">\r\n <i class=\"fas fa-chart-column nav-icon\"><\/i><span>Reports<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-page=\"settings\" onclick=\"go('settings',this)\">\r\n <i class=\"fas fa-cog nav-icon\"><\/i><span>Settings<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sb-section user-only\" style=\"display:none\">\r\n <div class=\"sb-section-lbl\">My Workspace<\/div>\r\n <div class=\"nav-item active\" data-page=\"my-devices\" onclick=\"go('my-devices',this)\">\r\n <i class=\"fas fa-laptop nav-icon\"><\/i><span>My Devices<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-page=\"tickets\" onclick=\"go('tickets',this)\">\r\n <i class=\"fas fa-ticket nav-icon\"><\/i><span>My Tickets<\/span>\r\n <span class=\"nav-badge\" id=\"nb-tickets\" style=\"display:none\">0<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n <div class=\"sb-footer\">\r\n <div class=\"nav-item\" onclick=\"doLogout()\">\r\n <i class=\"fas fa-sign-out-alt nav-icon\"><\/i><span>Logout<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/aside>\r\n\r\n \r\n <div class=\"main-area\">\r\n <div class=\"topbar\">\r\n <div class=\"tb-left\">\r\n <div class=\"tb-search\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <input type=\"text\" placeholder=\"Quick search...\" id=\"global-search\" oninput=\"globalSearch()\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"tb-right\">\r\n <div style=\"position:relative\">\r\n <div class=\"icon-btn\" id=\"notif-btn\" onclick=\"toggleNotif()\">\r\n <i class=\"fas fa-bell\"><\/i><div class=\"notif-dot\"><\/div>\r\n <\/div>\r\n <div class=\"notif-panel\" id=\"notif-panel\" style=\"display:none\">\r\n <div class=\"n-head\">Notifications<span style=\"font-size:11px;color:var(--text3);font-weight:500\">3 New<\/span><\/div>\r\n <div class=\"n-item unread\">\r\n <div class=\"n-icon\" style=\"background:rgba(0,212,170,.12);color:var(--success)\"><i class=\"fas fa-link\"><\/i><\/div>\r\n <div><div class=\"n-txt\">HP EliteBook assigned to Ahmed Ali<\/div><div class=\"n-time\">10 minutes ago<\/div><\/div>\r\n <\/div>\r\n <div class=\"n-item unread\">\r\n <div class=\"n-icon\" style=\"background:rgba(255,169,64,.12);color:var(--warning)\"><i class=\"fas fa-tools\"><\/i><\/div>\r\n <div><div class=\"n-txt\"><strong>Dell OptiPlex<\/strong> Under Maintenance<\/div><div class=\"n-time\">1 hour ago<\/div><\/div>\r\n <\/div>\r\n <div class=\"n-item unread\">\r\n <div class=\"n-icon\" style=\"background:rgba(79,124,255,.12);color:var(--accent)\"><i class=\"fas fa-user-plus\"><\/i><\/div>\r\n <div><div class=\"n-txt\">New user added<\/div><div class=\"n-time\">3 hours ago<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"icon-btn\" onclick=\"toggleTheme()\" title=\"Toggle Theme\"><i class=\"fas fa-moon\" id=\"theme-icon\"><\/i><\/div>\r\n <div class=\"user-pill\" id=\"user-pill\">\r\n <div class=\"u-avatar\" id=\"u-avatar\">A<\/div>\r\n <div><div class=\"u-name\" id=\"u-name\">Admin<\/div><div class=\"u-role\" id=\"u-role\">System Admin<\/div><\/div>\r\n <i class=\"fas fa-chevron-down\" style=\"font-size:10px;color:var(--text3)\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"content fade-in\" id=\"content\"><\/div>\r\n <\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n<div class=\"overlay\" id=\"overlay\" onclick=\"closeModal(event)\">\r\n <div class=\"modal\" id=\"modal-box\" onclick=\"event.stopPropagation()\"><\/div>\r\n<\/div>\r\n\r\n\r\n<div class=\"toast-box\" id=\"toast-box\"><\/div>\r\n\r\n<script>\r\n\/\/ =================== UTILITIES ===================\r\nfunction toast(msg,type){\r\n type=type||'info';\r\n var ic={success:'fa-check-circle',error:'fa-times-circle',info:'fa-info-circle',warning:'fa-exclamation-triangle'};\r\n var col={success:'var(--success)',error:'var(--danger)',info:'var(--accent)',warning:'var(--warning)'};\r\n var box=document.getElementById('toast-box');\r\n if(!box){alert(msg);return;}\r\n var t=document.createElement('div');\r\n t.className='toast t-'+type;\r\n t.innerHTML='<i class=\"fas '+ic[type]+'\" style=\"color:'+col[type]+';font-size:16px\"><\/i><span>'+msg+'<\/span>';\r\n box.appendChild(t);\r\n setTimeout(function(){t.style.opacity='0';t.style.transition='opacity .4s';},3000);\r\n setTimeout(function(){t.remove();},3400);\r\n}\r\nfunction dl(href,name){var a=document.createElement('a');a.href=href;a.download=name;a.click();}\r\nfunction v(id){var el=document.getElementById(id);return el?el.value:'';}\r\nfunction uid(){return 'x'+Date.now()+Math.random().toString(36).substr(2,4);}\r\n\r\n\/\/ =================== DATA ===================\r\nconst UK='itam_u', DK='itam_d', AK='itam_a', LK='itam_l', TK='itam_t';\r\nlet darkMode=true, currentUser=null, sbCollapsed=false;\r\n\r\nlet users = JSON.parse(localStorage.getItem(UK)) || [\r\n {id:'u1',name:'Ahmed Ali Mahmoud',dept:'Information Technology',job:'Systems Engineer',phone:'0501234567',email:'ahmed.ali@company.com',status:'active',password:'ahmed123',role:'user'},\r\n {id:'u2',name:'Sara Mohammed Hassan',dept:'Human Resources',job:'HR Manager',phone:'0559876543',email:'sara.m@company.com',status:'active',password:'sara123',role:'user'},\r\n {id:'u3',name:'Khalid Abdullah',dept:'Finance',job:'Senior Accountant',phone:'0507654321',email:'khalid.r@company.com',status:'active',password:'khalid123',role:'user'},\r\n {id:'u4',name:'Nora Al-Qahtani',dept:'Marketing',job:'Graphic Designer',phone:'0551122334',email:'nora.q@company.com',status:'active',password:'nora123',role:'user'},\r\n {id:'u5',name:'Mohammed Omar',dept:'Sales',job:'Sales Manager',phone:'0505544332',email:'mohammed.s@company.com',status:'inactive',password:'mohammed123',role:'user'},\r\n {id:'u6',name:'Fatima Al-Omari',dept:'Administration',job:'Executive Secretary',phone:'0553344556',email:'fatima.a@company.com',status:'active',password:'fatima123',role:'user'},\r\n];\r\n\r\nlet devices = JSON.parse(localStorage.getItem(DK)) || [\r\n {id:'d1',name:'HP EliteBook 840 G9',type:'laptop',brand:'HP',model:'840 G9',serial:'HP2024001',mac:'AA:BB:CC:11:22:33',ip:'192.168.1.101',cpu:'Intel Core i7-1255U',ram:'16GB DDR5',storage:'512GB SSD NVMe',os:'Windows 11 Pro',purchaseDate:'2023-03-15',status:'assigned',notes:'Main device for engineers'},\r\n {id:'d2',name:'Dell OptiPlex 7010',type:'desktop',brand:'Dell',model:'OptiPlex 7010',serial:'DL2023045',mac:'AA:BB:CC:44:55:66',ip:'192.168.1.102',cpu:'Intel Core i5-13500',ram:'8GB DDR4',storage:'256GB SSD',os:'Windows 10 Pro',purchaseDate:'2023-06-20',status:'maintenance',notes:'Under Maintenance - Boot failure'},\r\n {id:'d3',name:'Brother MFC-L8900CDW',type:'printer',brand:'Brother',model:'MFC-L8900CDW',serial:'BR2022099',mac:'AA:BB:CC:77:88:99',ip:'192.168.1.150',cpu:'-',ram:'-',storage:'-',os:'-',purchaseDate:'2022-11-10',status:'available',notes:'Color printer - 2nd floor'},\r\n {id:'d4',name:'Cisco Catalyst 2960',type:'switch',brand:'Cisco',model:'Catalyst 2960',serial:'CI2021033',mac:'AA:BB:CC:AA:BB:CC',ip:'192.168.1.1',cpu:'-',ram:'-',storage:'-',os:'Cisco IOS',purchaseDate:'2021-08-05',status:'assigned',notes:'Main network switch'},\r\n {id:'d5',name:'Samsung 27\" 4K Monitor',type:'monitor',brand:'Samsung',model:'S27A800NMP',serial:'SA2024012',mac:'-',ip:'-',cpu:'-',ram:'-',storage:'-',os:'-',purchaseDate:'2024-01-10',status:'assigned',notes:''},\r\n {id:'d6',name:'MacBook Pro M3 14\"',type:'laptop',brand:'Apple',model:'MacBook Pro M3',serial:'AP2024011',mac:'DD:EE:FF:11:22:33',ip:'192.168.1.105',cpu:'Apple M3 Pro',ram:'18GB Unified',storage:'512GB SSD',os:'macOS Sonoma',purchaseDate:'2024-01-20',status:'available',notes:''},\r\n {id:'d7',name:'Ubiquiti UniFi AP Pro',type:'ap',brand:'Ubiquiti',model:'AP-AC-Pro',serial:'UB2022077',mac:'FF:EE:DD:CC:BB:AA',ip:'192.168.1.200',cpu:'-',ram:'-',storage:'-',os:'UniFi OS',purchaseDate:'2022-05-15',status:'assigned',notes:'Access Point - 1st floor'},\r\n {id:'d8',name:'HP LaserJet Pro 4001',type:'printer',brand:'HP',model:'LaserJet Pro 4001',serial:'HP2023088',mac:'11:22:33:44:55:AA',ip:'192.168.1.155',cpu:'-',ram:'-',storage:'-',os:'-',purchaseDate:'2023-09-01',status:'available',notes:''},\r\n {id:'d9',name:'Cisco ISR 4321 Router',type:'router',brand:'Cisco',model:'ISR 4321',serial:'CI2020011',mac:'CC:BB:AA:11:22:33',ip:'10.0.0.1',cpu:'-',ram:'-',storage:'-',os:'Cisco IOS XE',purchaseDate:'2020-03-10',status:'assigned',notes:'Main network router'},\r\n];\r\n\r\nlet assignments = JSON.parse(localStorage.getItem(AK)) || [\r\n {id:'a1',deviceId:'d1',userId:'u1',assignDate:'2023-03-20',returnDate:null,note:'Initial delivery'},\r\n {id:'a2',deviceId:'d4',userId:'u3',assignDate:'2021-08-10',returnDate:null,note:'Network management'},\r\n {id:'a3',deviceId:'d5',userId:'u4',assignDate:'2024-01-15',returnDate:null,note:''},\r\n {id:'a4',deviceId:'d7',userId:'u1',assignDate:'2022-05-20',returnDate:null,note:'Network management'},\r\n {id:'a5',deviceId:'d9',userId:'u1',assignDate:'2020-03-12',returnDate:null,note:''},\r\n {id:'a6',deviceId:'d1',userId:'u2',assignDate:'2023-01-01',returnDate:'2023-03-19',note:'Temporary use'},\r\n];\r\n\r\nlet tickets = JSON.parse(localStorage.getItem(TK)) || [];\r\n\r\nlet logs = JSON.parse(localStorage.getItem(LK)) || [\r\n {id:'l1',msg:'HP EliteBook 840 G9 assigned to Ahmed Ali',time:'2024-01-20T10:30:00',icon:'fa-link',c:'success'},\r\n {id:'l2',msg:'User added: Sara Mohammed',time:'2024-01-19T09:00:00',icon:'fa-user-plus',c:'info'},\r\n {id:'l3',msg:'Dell OptiPlex 7010 status changed to Maintenance',time:'2024-01-18T14:00:00',icon:'fa-tools',c:'warning'},\r\n {id:'l4',msg:'HP EliteBook transferred from Sara to Ahmed',time:'2024-01-17T11:00:00',icon:'fa-exchange-alt',c:'accent'},\r\n];\r\n\r\nfunction save(){\r\n localStorage.setItem(UK,JSON.stringify(users));\r\n localStorage.setItem(DK,JSON.stringify(devices));\r\n localStorage.setItem(AK,JSON.stringify(assignments));\r\n localStorage.setItem(LK,JSON.stringify(logs));\r\n localStorage.setItem(TK,JSON.stringify(tickets));\r\n}\r\nfunction addLog(msg,icon,c){\r\n icon=icon||'fa-info-circle'; c=c||'info';\r\n logs.unshift({id:'l'+Date.now(),msg,time:new Date().toISOString(),icon,c});\r\n if(logs.length>100)logs.pop();\r\n save();\r\n}\r\n\r\n\/\/ =================== HELPERS ===================\r\nconst TL={laptop:'Laptop',desktop:'Desktop',printer:'Printer',router:'Router',switch:'Switch',ap:'Access Point',monitor:'Monitor',other:'Other'};\r\nconst TI={laptop:'fa-laptop',desktop:'fa-desktop',printer:'fa-print',router:'fa-network-wired',switch:'fa-sitemap',ap:'fa-wifi',monitor:'fa-tv',other:'fa-box'};\r\nconst TC={laptop:'di-laptop',desktop:'di-desktop',printer:'di-printer',router:'di-router',switch:'di-switch',ap:'di-ap',monitor:'di-monitor',other:'di-other'};\r\nconst SL={active:'Active',inactive:'Inactive',available:'Available',assigned:'Assigned',maintenance:'Maintenance',retired:'Retired'};\r\nconst SC={active:'b-active',inactive:'b-inactive',available:'b-available',assigned:'b-assigned',maintenance:'b-maintenance',retired:'b-retired'};\r\nconst AVCOLS=['#4f7cff','#7c5fff','#00d4aa','#ffa940','#ff6b6b','#e040fb','#00bcd4','#8bc34a'];\r\n\r\nfunction getUser(id){return users.find(u=>u.id===id);}\r\nfunction getDev(id){return devices.find(d=>d.id===id);}\r\nfunction getCurAssign(devId){return assignments.find(a=>a.deviceId===devId&&!a.returnDate);}\r\nfunction getDevHistory(devId){return assignments.filter(a=>a.deviceId===devId).sort((a,b)=>new Date(b.assignDate)-new Date(a.assignDate));}\r\nfunction getUserDevs(userId){return assignments.filter(a=>a.userId===userId&&!a.returnDate).map(a=>getDev(a.deviceId)).filter(Boolean);}\r\nfunction badge(s){return '<span class=\"badge '+(SC[s]||'')+'\"><span class=\"b-dot\"><\/span>'+(SL[s]||s)+'<\/span>';}\r\nfunction fmtDate(d){if(!d)return'\u2014';return new Date(d).toLocaleDateString('en-GB');}\r\nfunction daysBetween(d1,d2){d2=d2||new Date();return Math.max(0,Math.floor((new Date(d2)-new Date(d1))\/(864e5)));}\r\nfunction initials(n){return n.split(' ').slice(0,2).map(function(w){return w[0];}).join('');}\r\nfunction avColor(n){return AVCOLS[n.charCodeAt(0)%AVCOLS.length];}\r\n\r\n\/\/ =================== AUTH ===================\r\nconst SYS_ADMINS=[\r\n {email:'admin@jidaar.com',pass:'admin123',role:'admin',name:'System Admin',display:'Admin'},\r\n];\r\n\r\nfunction doLogin(){\r\n var emailInput=document.getElementById('li-email');\r\n var passInput=document.getElementById('li-pass');\r\n if(!emailInput||!passInput){alert('Login form error');return;}\r\n var e=emailInput.value.trim().toLowerCase();\r\n var p=passInput.value.trim();\r\n if(!e){toast('Please enter your email','error');return;}\r\n if(!p){toast('Please enter your password','error');return;}\r\n\r\n for(var i=0;i<SYS_ADMINS.length;i++){\r\n var a=SYS_ADMINS[i];\r\n if(a.email.toLowerCase()===e&&a.pass===p){\r\n currentUser={email:a.email,role:a.role,name:a.name,display:a.display};\r\n loginSuccess(a.display,'System Admin','admin');\r\n return;\r\n }\r\n }\r\n\r\n var allUsers=[];\r\n try{allUsers=JSON.parse(localStorage.getItem(UK)||'[]');}catch(ex){}\r\n if(!allUsers.length)allUsers=users;\r\n\r\n for(var j=0;j<allUsers.length;j++){\r\n var u=allUsers[j];\r\n if(!u.email||!u.password)continue;\r\n if(u.email.toLowerCase()===e&&u.password===p){\r\n if(u.status!=='active'){toast('Your account is inactive. Contact admin.','error');return;}\r\n users=allUsers;\r\n currentUser=Object.assign({},u,{role:u.role||'user'});\r\n var roleLabel=(u.role==='admin'?'Admin':'User')+(u.dept?' \u00b7 '+u.dept:'');\r\n loginSuccess(u.name,roleLabel,u.role||'user');\r\n return;\r\n }\r\n }\r\n toast('Invalid email or password','error');\r\n}\r\n\r\nfunction loginSuccess(displayName,roleLabel,role){\r\n document.getElementById('login-screen').style.display='none';\r\n document.getElementById('app').style.display='block';\r\n document.getElementById('u-avatar').textContent=displayName[0].toUpperCase();\r\n document.getElementById('u-name').textContent=displayName;\r\n document.getElementById('u-role').textContent=roleLabel;\r\n var isAdmin=role==='admin';\r\n document.querySelectorAll('.admin-only').forEach(function(el){el.style.display=isAdmin?'':'none';});\r\n document.querySelectorAll('.user-only').forEach(function(el){el.style.display=isAdmin?'none':'';});\r\n updateTicketsBadge();\r\n setTimeout(function(){\r\n if(isAdmin){go('dashboard',document.querySelector('.nav-item[data-page=\"dashboard\"]'));}\r\n else{go('my-devices',document.querySelector('.nav-item[data-page=\"my-devices\"]'));}\r\n },50);\r\n toast('Welcome, '+displayName+' \ud83d\udc4b','success');\r\n}\r\n\r\nfunction updateTicketsBadge(){\r\n if(!currentUser)return;\r\n var badge2=document.getElementById('nb-tickets');\r\n if(!badge2)return;\r\n var myOpen=tickets.filter(function(t){return t.userId===currentUser.id&&t.status!=='closed'&&t.status!=='resolved';}).length;\r\n badge2.textContent=myOpen;\r\n badge2.style.display=myOpen>0?'':'none';\r\n}\r\n\r\nfunction doLogout(){\r\n currentUser=null;\r\n document.querySelectorAll('.admin-only').forEach(function(el){el.style.display='';});\r\n document.querySelectorAll('.user-only').forEach(function(el){el.style.display='none';});\r\n document.getElementById('login-screen').style.display='flex';\r\n document.getElementById('app').style.display='none';\r\n}\r\n\r\ndocument.getElementById('li-pass').addEventListener('keydown',function(e){if(e.key==='Enter')doLogin();});\r\ndocument.getElementById('li-email').addEventListener('keydown',function(e){if(e.key==='Enter')doLogin();});\r\n\r\n\/\/ =================== LAYOUT ===================\r\nfunction toggleSB(){\r\n sbCollapsed=!sbCollapsed;\r\n document.getElementById('sidebar').classList.toggle('collapsed',sbCollapsed);\r\n document.getElementById('sb-toggle-icon').className=sbCollapsed?'fas fa-chevron-left':'fas fa-chevron-right';\r\n}\r\nfunction toggleTheme(){\r\n darkMode=!darkMode;\r\n document.documentElement.classList.toggle('light',!darkMode);\r\n document.getElementById('theme-icon').className=darkMode?'fas fa-moon':'fas fa-sun';\r\n}\r\nfunction toggleNotif(){\r\n var p=document.getElementById('notif-panel');\r\n p.style.display=p.style.display==='none'?'block':'none';\r\n}\r\ndocument.addEventListener('click',function(e){\r\n var p=document.getElementById('notif-panel'),b=document.getElementById('notif-btn');\r\n if(p&&b&&!b.contains(e.target))p.style.display='none';\r\n});\r\n\r\n\/\/ =================== NAVIGATION ===================\r\nvar curPage='dashboard';\r\nfunction go(page,el){\r\n curPage=page;\r\n document.querySelectorAll('.nav-item').forEach(function(n){n.classList.remove('active');});\r\n if(el)el.classList.add('active');\r\n else{var ni=document.querySelector('.nav-item[data-page=\"'+page+'\"]');if(ni)ni.classList.add('active');}\r\n document.getElementById('content').className='content fade-in';\r\n render(page);\r\n}\r\nfunction render(p){\r\n var c=document.getElementById('content');\r\n c.innerHTML='';\r\n var pages={dashboard:renderDash,devices:renderDevs,users:renderUsrs,assignments:renderAssigns,activity:renderActivity,reports:renderReports,settings:renderSettings,tickets:renderTickets,'my-devices':renderMyDevices};\r\n (pages[p]||renderDash)();\r\n}\r\n\r\n\/\/ =================== DASHBOARD ===================\r\nfunction renderDash(){\r\n var c=document.getElementById('content');\r\n var tot=devices.length;\r\n var asgn=devices.filter(function(d){return d.status==='assigned';}).length;\r\n var avail=devices.filter(function(d){return d.status==='available';}).length;\r\n var maint=devices.filter(function(d){return d.status==='maintenance';}).length;\r\n var actU=users.filter(function(u){return u.status==='active';}).length;\r\n var totAssigns=assignments.filter(function(a){return !a.returnDate;}).length;\r\n c.innerHTML=\r\n '<div class=\"page-header\"><div class=\"page-title\">Dashboard<\/div><div class=\"page-sub\">Welcome to JIDAAR \u2014 IT Asset Management<\/div><\/div>'+\r\n '<div class=\"stats-row\">'+\r\n '<div class=\"stat-card sc-blue\" onclick=\"go(\\'users\\',null)\"><div class=\"stat-icon si-blue\"><i class=\"fas fa-users\"><\/i><\/div><div class=\"stat-val\">'+users.length+'<\/div><div class=\"stat-lbl\">Users<\/div><div class=\"stat-sub\"><i class=\"fas fa-circle\" style=\"color:var(--success);font-size:7px\"><\/i>'+actU+' Active<\/div><\/div>'+\r\n '<div class=\"stat-card sc-purple\" onclick=\"go(\\'devices\\',null)\"><div class=\"stat-icon si-purple\"><i class=\"fas fa-laptop\"><\/i><\/div><div class=\"stat-val\">'+tot+'<\/div><div class=\"stat-lbl\">Total Devices<\/div><div class=\"stat-sub\"><i class=\"fas fa-layer-group\" style=\"font-size:10px\"><\/i>'+Object.keys(TL).length+' types<\/div><\/div>'+\r\n '<div class=\"stat-card sc-teal\" onclick=\"go(\\'assignments\\',null)\"><div class=\"stat-icon si-teal\"><i class=\"fas fa-link\"><\/i><\/div><div class=\"stat-val\">'+asgn+'<\/div><div class=\"stat-lbl\">Assigned Devices<\/div><div class=\"stat-sub\"><i class=\"fas fa-percentage\" style=\"font-size:10px\"><\/i>'+(tot?Math.round(asgn\/tot*100):0)+'% of total<\/div><\/div>'+\r\n '<div class=\"stat-card sc-green\"><div class=\"stat-icon si-green\"><i class=\"fas fa-check-circle\"><\/i><\/div><div class=\"stat-val\">'+avail+'<\/div><div class=\"stat-lbl\">Available Devices<\/div><div class=\"stat-sub\"><i class=\"fas fa-circle\" style=\"color:var(--success);font-size:7px\"><\/i>Ready to assign<\/div><\/div>'+\r\n '<div class=\"stat-card sc-orange\"><div class=\"stat-icon si-orange\"><i class=\"fas fa-tools\"><\/i><\/div><div class=\"stat-val\">'+maint+'<\/div><div class=\"stat-lbl\">Under Maintenance<\/div><div class=\"stat-sub\" style=\"color:'+(maint>0?'var(--warning)':'var(--text3)')+'\"><i class=\"fas fa-exclamation-triangle\" style=\"font-size:10px\"><\/i>'+(maint>0?'Needs attention':'All clear')+'<\/div><\/div>'+\r\n '<div class=\"stat-card sc-red\"><div class=\"stat-icon si-red\"><i class=\"fas fa-exchange-alt\"><\/i><\/div><div class=\"stat-val\">'+totAssigns+'<\/div><div class=\"stat-lbl\">Active Assignments<\/div><div class=\"stat-sub\"><i class=\"fas fa-clock\" style=\"font-size:10px\"><\/i>Currently active<\/div><\/div>'+\r\n '<\/div>'+\r\n '<div class=\"charts-grid\">'+\r\n '<div class=\"chart-card\"><div class=\"chart-head\"><i class=\"fas fa-chart-pie\"><\/i>Device Status<\/div><div class=\"chart-wrap\"><canvas id=\"ch-status\"><\/canvas><\/div><\/div>'+\r\n '<div class=\"chart-card\"><div class=\"chart-head\"><i class=\"fas fa-chart-bar\"><\/i>Devices by Type<\/div><div class=\"chart-wrap\"><canvas id=\"ch-type\"><\/canvas><\/div><\/div>'+\r\n '<\/div>'+\r\n '<div style=\"display:grid;grid-template-columns:1fr 1fr;gap:16px\">'+\r\n '<div class=\"card\"><div class=\"card-head\"><div class=\"card-title\"><i class=\"fas fa-history\"><\/i>Recent Activity<\/div><button class=\"btn btn-ghost btn-sm\" onclick=\"go(\\'activity\\',null)\">View All<\/button><\/div>'+\r\n logs.slice(0,5).map(function(l){var colMap={success:'var(--success)',warning:'var(--warning)',info:'var(--accent)',accent:'var(--accent2)'};return '<div class=\"act-item\"><div class=\"act-icon\" style=\"background:rgba(79,124,255,.1);color:'+(colMap[l.c]||'var(--accent)')+'\"><i class=\"fas '+l.icon+'\"><\/i><\/div><div><div class=\"act-text\">'+l.msg+'<\/div><div class=\"act-time\">'+fmtDate(l.time)+'<\/div><\/div><\/div>';}).join('')+\r\n '<\/div>'+\r\n '<div class=\"card\"><div class=\"card-head\"><div class=\"card-title\"><i class=\"fas fa-link\"><\/i>Recent Assignments<\/div><button class=\"btn btn-ghost btn-sm\" onclick=\"go(\\'assignments\\',null)\">View All<\/button><\/div>'+\r\n assignments.filter(function(a){return !a.returnDate;}).slice(0,5).map(function(a){var d=getDev(a.deviceId),u=getUser(a.userId);if(!d||!u)return'';return '<div class=\"act-item\"><div class=\"dev-icon '+TC[d.type]+' act-icon\"><i class=\"fas '+TI[d.type]+'\"><\/i><\/div><div><div class=\"act-text\"><strong>'+d.name+'<\/strong><br><span style=\"font-size:12px;color:var(--text2)\">'+u.name+' \u00b7 '+daysBetween(a.assignDate)+' days<\/span><\/div><\/div><\/div>';}).join('')+\r\n '<\/div><\/div>';\r\n\r\n setTimeout(function(){\r\n if(document.getElementById('ch-status')){\r\n new Chart(document.getElementById('ch-status'),{type:'doughnut',data:{labels:['Assigned','Available','Maintenance','Retired'],datasets:[{data:[asgn,avail,maint,devices.filter(function(d){return d.status==='retired';}).length],backgroundColor:['#4f7cff','#00d4aa','#ffa940','#8892b0'],borderWidth:0,hoverOffset:6}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{position:'bottom',labels:{color:'#8892b0',font:{size:12},padding:12,boxWidth:12,borderRadius:3}}},cutout:'68%'}});\r\n }\r\n if(document.getElementById('ch-type')){\r\n var tp={};devices.forEach(function(d){tp[TL[d.type]]=(tp[TL[d.type]]||0)+1;});\r\n new Chart(document.getElementById('ch-type'),{type:'bar',data:{labels:Object.keys(tp),datasets:[{data:Object.values(tp),backgroundColor:AVCOLS.slice(0,Object.keys(tp).length).map(function(c){return c+'bb';}),borderRadius:6,borderSkipped:false}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}},scales:{x:{ticks:{color:'#8892b0',font:{size:11}},grid:{display:false}},y:{ticks:{color:'#8892b0',stepSize:1},grid:{color:'rgba(255,255,255,.04)'},beginAtZero:true}}}});\r\n }\r\n },80);\r\n}\r\n\r\n\/\/ =================== DEVICES ===================\r\nvar dPage=1, dQ='', dTF='', dSF='';\r\nvar PGS=8;\r\n\r\nfunction renderDevs(){\r\n document.getElementById('content').innerHTML=\r\n '<div class=\"page-header\"><div style=\"display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px\"><div><div class=\"page-title\">Devices<\/div><div class=\"page-sub\">Manage all IT assets ('+devices.length+' devices)<\/div><\/div><div style=\"display:flex;gap:8px;flex-wrap:wrap\"><button class=\"btn btn-ghost btn-sm\" onclick=\"exportDevCSV()\"><i class=\"fas fa-file-csv\"><\/i> Export CSV<\/button><button class=\"btn btn-primary btn-sm\" onclick=\"openDevModal()\"><i class=\"fas fa-plus\"><\/i> New Device<\/button><\/div><\/div><\/div>'+\r\n '<div class=\"tbl-wrap\"><div class=\"tbl-toolbar\"><div class=\"srch\"><i class=\"fas fa-search\"><\/i><input type=\"text\" id=\"d-srch\" placeholder=\"Search by name, serial, IP...\" value=\"'+dQ+'\" oninput=\"dQ=this.value;dPage=1;renderDevTable()\"><\/div>'+\r\n '<select class=\"sel\" id=\"d-tf\" onchange=\"dTF=this.value;dPage=1;renderDevTable()\"><option value=\"\">All Types<\/option>'+Object.entries(TL).map(function(e){return '<option value=\"'+e[0]+'\" '+(dTF===e[0]?'selected':'')+'>'+e[1]+'<\/option>';}).join('')+'<\/select>'+\r\n '<select class=\"sel\" id=\"d-sf\" onchange=\"dSF=this.value;dPage=1;renderDevTable()\"><option value=\"\">All Statuses<\/option>'+['available','assigned','maintenance','retired'].map(function(s){return '<option value=\"'+s+'\" '+(dSF===s?'selected':'')+'>'+SL[s]+'<\/option>';}).join('')+'<\/select><\/div><div id=\"dev-tbl-body\"><\/div><div id=\"dev-pag\"><\/div><\/div>';\r\n renderDevTable();\r\n}\r\n\r\nfunction renderDevTable(){\r\n var fl=devices.filter(function(d){\r\n var q=dQ.toLowerCase();\r\n return(!q||(d.name+d.brand+d.serial+d.ip+d.model).toLowerCase().includes(q))&&(!dTF||d.type===dTF)&&(!dSF||d.status===dSF);\r\n });\r\n var pages=Math.max(1,Math.ceil(fl.length\/PGS));\r\n dPage=Math.min(dPage,pages);\r\n var sl=fl.slice((dPage-1)*PGS,dPage*PGS);\r\n var rows=sl.map(function(d){\r\n var ca=getCurAssign(d.id),u=ca?getUser(ca.userId):null;\r\n return '<tr class=\"c-row\" onclick=\"openDevDetail(\\''+d.id+'\\')\">' +\r\n '<td><div style=\"display:flex;align-items:center;gap:10px\"><div class=\"dev-icon '+TC[d.type]+'\"><i class=\"fas '+TI[d.type]+'\"><\/i><\/div><div><div style=\"font-weight:700;font-size:13px\">'+d.name+'<\/div><div style=\"font-size:11px;color:var(--text3)\">'+d.brand+' \u00b7 '+d.model+'<\/div><\/div><\/div><\/td>'+\r\n '<td><span class=\"badge b-info\">'+(TL[d.type]||d.type)+'<\/span><\/td>'+\r\n '<td class=\"mono\" style=\"color:var(--text2)\">'+(d.serial||'\u2014')+'<\/td>'+\r\n '<td class=\"mono\" style=\"color:var(--text2)\">'+(d.ip||'\u2014')+'<\/td>'+\r\n '<td>'+badge(d.status)+'<\/td>'+\r\n '<td>'+(u?'<span class=\"u-tag\"><i class=\"fas fa-user\" style=\"font-size:10px\"><\/i>'+u.name.split(' ')[0]+'<\/span>':'<span class=\"u-tag-none\">Not Assigned<\/span>')+'<\/td>'+\r\n '<td style=\"font-size:12px;color:var(--text2)\">'+fmtDate(d.purchaseDate)+'<\/td>'+\r\n '<td onclick=\"event.stopPropagation()\" style=\"white-space:nowrap\"><button class=\"btn btn-ghost btn-xs\" onclick=\"openDevModal(\\''+d.id+'\\')\" title=\"Edit\"><i class=\"fas fa-edit\"><\/i><\/button><button class=\"btn btn-ghost btn-xs\" style=\"margin-right:4px\" onclick=\"showQR(\\''+d.id+'\\')\" title=\"QR\"><i class=\"fas fa-qrcode\"><\/i><\/button><button class=\"btn btn-danger btn-xs\" style=\"margin-right:4px\" onclick=\"deleteDev(\\''+d.id+'\\')\" title=\"Delete\"><i class=\"fas fa-trash\"><\/i><\/button><\/td>'+\r\n '<\/tr>';\r\n }).join('');\r\n document.getElementById('dev-tbl-body').innerHTML='<table><thead><tr><th>Device<\/th><th>Type<\/th><th>Serial<\/th><th>IP<\/th><th>Status<\/th><th>User<\/th><th>Purchase Date<\/th><th>Actions<\/th><\/tr><\/thead><tbody>'+(rows||'<tr><td colspan=\"8\"><div class=\"empty\"><i class=\"fas fa-search\"><\/i><h4>No results found<\/h4><p>Try adjusting your filters<\/p><\/div><\/td><\/tr>')+'<\/tbody><\/table>';\r\n var pag='';\r\n if(pages>1){\r\n if(dPage>1)pag+='<div class=\"pag-btn\" onclick=\"dPage--;renderDevTable()\"><i class=\"fas fa-chevron-right\"><\/i><\/div>';\r\n for(var i=Math.max(1,dPage-2);i<=Math.min(pages,dPage+2);i++)pag+='<div class=\"pag-btn'+(i===dPage?' active':'')+'\" onclick=\"dPage='+i+';renderDevTable()\">'+i+'<\/div>';\r\n if(dPage<pages)pag+='<div class=\"pag-btn\" onclick=\"dPage++;renderDevTable()\"><i class=\"fas fa-chevron-left\"><\/i><\/div>';\r\n }\r\n document.getElementById('dev-pag').innerHTML=pages>1?'<div class=\"pag\">'+pag+'<span style=\"font-size:12px;color:var(--text3);margin-right:8px\">'+fl.length+' results<\/span><\/div>':'';\r\n}\r\n\r\nfunction openDevModal(id){\r\n var d=id?getDev(id):null;\r\n openModal('<div class=\"m-head\"><h3>'+(d?'Edit Device':'Add New Device')+'<\/h3><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\">'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>Device Name *<\/label><input class=\"fc\" id=\"d-name\" value=\"'+(d?d.name:'')+'\" placeholder=\"HP EliteBook 840 G9\"><\/div><div class=\"fg\"><label>Type *<\/label><select class=\"fc\" id=\"d-type\">'+Object.entries(TL).map(function(e){return '<option value=\"'+e[0]+'\" '+(d&&d.type===e[0]?'selected':'')+'>'+e[1]+'<\/option>';}).join('')+'<\/select><\/div><\/div>'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>Manufacturer<\/label><input class=\"fc\" id=\"d-brand\" value=\"'+(d?d.brand:'')+'\" placeholder=\"HP \/ Dell \/ Apple\"><\/div><div class=\"fg\"><label>Model<\/label><input class=\"fc\" id=\"d-model\" value=\"'+(d?d.model:'')+'\" placeholder=\"840 G9\"><\/div><\/div>'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>Serial Number<\/label><input class=\"fc\" id=\"d-serial\" value=\"'+(d?d.serial:'')+'\" placeholder=\"SN2024XXX\" style=\"font-family:var(--mono)\"><\/div><div class=\"fg\"><label>MAC Address<\/label><input class=\"fc\" id=\"d-mac\" value=\"'+(d?d.mac:'')+'\" placeholder=\"AA:BB:CC:DD:EE:FF\" style=\"font-family:var(--mono)\"><\/div><\/div>'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>IP Address<\/label><input class=\"fc\" id=\"d-ip\" value=\"'+(d?d.ip:'')+'\" placeholder=\"192.168.1.xxx\" style=\"font-family:var(--mono)\"><\/div><div class=\"fg\"><label>Operating System<\/label><input class=\"fc\" id=\"d-os\" value=\"'+(d?d.os:'')+'\" placeholder=\"Windows 11 Pro\"><\/div><\/div>'+\r\n '<div class=\"f3\"><div class=\"fg\"><label>CPU<\/label><input class=\"fc\" id=\"d-cpu\" value=\"'+(d?d.cpu:'')+'\" placeholder=\"Intel Core i7\"><\/div><div class=\"fg\"><label>RAM<\/label><input class=\"fc\" id=\"d-ram\" value=\"'+(d?d.ram:'')+'\" placeholder=\"16GB DDR5\"><\/div><div class=\"fg\"><label>Storage<\/label><input class=\"fc\" id=\"d-storage\" value=\"'+(d?d.storage:'')+'\" placeholder=\"512GB SSD\"><\/div><\/div>'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>Purchase Date<\/label><input class=\"fc\" type=\"date\" id=\"d-pdate\" value=\"'+(d?d.purchaseDate:'')+'\"><\/div><div class=\"fg\"><label>Status<\/label><select class=\"fc\" id=\"d-status\"><option value=\"available\" '+(!d||d.status==='available'?'selected':'')+'>Available<\/option><option value=\"assigned\" '+(d&&d.status==='assigned'?'selected':'')+'>Assigned<\/option><option value=\"maintenance\" '+(d&&d.status==='maintenance'?'selected':'')+'>Maintenance<\/option><option value=\"retired\" '+(d&&d.status==='retired'?'selected':'')+'>Retired<\/option><\/select><\/div><\/div>'+\r\n '<div class=\"fg\"><label>Notes<\/label><textarea class=\"fc\" id=\"d-notes\" placeholder=\"Additional notes...\">'+(d?d.notes:'')+'<\/textarea><\/div>'+\r\n '<\/div><div class=\"m-footer\"><button class=\"btn btn-primary\" onclick=\"saveDev(\\''+(id||'')+'\\')\" ><i class=\"fas fa-save\"><\/i> Save<\/button><button class=\"btn btn-ghost\" onclick=\"closeModal()\">Cancel<\/button><\/div>');\r\n}\r\n\r\nfunction saveDev(id){\r\n var vals={name:v('d-name'),type:v('d-type'),brand:v('d-brand'),model:v('d-model'),serial:v('d-serial'),mac:v('d-mac'),ip:v('d-ip'),os:v('d-os'),cpu:v('d-cpu'),ram:v('d-ram'),storage:v('d-storage'),purchaseDate:v('d-pdate'),status:v('d-status'),notes:v('d-notes')};\r\n if(!vals.name){toast('Device name is required','error');return;}\r\n if(id){var i=devices.findIndex(function(d){return d.id===id;});devices[i]=Object.assign({},devices[i],vals);addLog('Device edited: '+vals.name,'fa-edit','info');}\r\n else{devices.push(Object.assign({id:uid()},vals));addLog('New device added: '+vals.name,'fa-plus','success');}\r\n save();closeModal();renderDevs();toast(id?'Device updated':'Device added successfully','success');\r\n}\r\n\r\nfunction deleteDev(id){\r\n var d=getDev(id);\r\n if(!confirm('Delete \"'+d.name+'\"? This cannot be undone.'))return;\r\n devices=devices.filter(function(x){return x.id!==id;});\r\n assignments=assignments.filter(function(a){return a.deviceId!==id;});\r\n addLog('Device deleted: '+d.name,'fa-trash','warning');\r\n save();renderDevs();toast('Device deleted','info');\r\n}\r\n\r\nfunction openDevDetail(id){\r\n var d=getDev(id);if(!d)return;\r\n var ca=getCurAssign(id),u=ca?getUser(ca.userId):null;\r\n var hist=getDevHistory(id);\r\n openModal('<div class=\"m-head\"><div style=\"display:flex;align-items:center;gap:12px\"><div class=\"dev-icon '+TC[d.type]+'\" style=\"width:44px;height:44px;font-size:19px\"><i class=\"fas '+TI[d.type]+'\"><\/i><\/div><div><h3>'+d.name+'<\/h3><div style=\"font-size:12px;color:var(--text2);margin-top:2px\">'+d.brand+' '+d.model+'<\/div><\/div><\/div><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\">'+\r\n '<div style=\"display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px\">'+badge(d.status)+'<span class=\"badge b-info\">'+(TL[d.type]||d.type)+'<\/span>'+(u?'<span class=\"badge b-assigned\"><i class=\"fas fa-user\" style=\"font-size:10px\"><\/i>'+u.name+'<\/span>':'')+'<\/div>'+\r\n '<div class=\"tabs\"><button class=\"tab-btn active\" onclick=\"swTab(0,this)\">Technical Info<\/button><button class=\"tab-btn\" onclick=\"swTab(1,this)\">Assignment<\/button><button class=\"tab-btn\" onclick=\"swTab(2,this)\">Transfer History<\/button><\/div>'+\r\n '<div id=\"dt0\"><div class=\"d-grid\">'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Serial Number<\/div><div class=\"d-val mono\">'+(d.serial||'\u2014')+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">MAC Address<\/div><div class=\"d-val mono\">'+(d.mac||'\u2014')+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">IP Address<\/div><div class=\"d-val mono\">'+(d.ip||'\u2014')+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Operating System<\/div><div class=\"d-val\">'+(d.os||'\u2014')+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">CPU<\/div><div class=\"d-val\">'+(d.cpu||'\u2014')+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">RAM<\/div><div class=\"d-val\">'+(d.ram||'\u2014')+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Storage<\/div><div class=\"d-val\">'+(d.storage||'\u2014')+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Purchase Date<\/div><div class=\"d-val\">'+fmtDate(d.purchaseDate)+'<\/div><\/div>'+\r\n '<\/div>'+(d.notes?'<div style=\"margin-top:12px;background:var(--bg3);border-radius:9px;padding:12px;font-size:13px;color:var(--text2);line-height:1.6\">'+d.notes+'<\/div>':'')+'<\/div>'+\r\n '<div id=\"dt1\" style=\"display:none\">'+(u?\r\n '<div style=\"background:var(--bg3);border-radius:10px;padding:16px;margin-bottom:14px\"><div style=\"display:flex;align-items:center;gap:12px;margin-bottom:12px\"><div class=\"av\" style=\"width:44px;height:44px;border-radius:11px;font-size:16px;background:'+avColor(u.name)+'\">'+initials(u.name)+'<\/div><div><div style=\"font-weight:700\">'+u.name+'<\/div><div style=\"font-size:12px;color:var(--text2)\">'+u.dept+' \u00b7 '+u.job+'<\/div><\/div><\/div>'+\r\n '<div class=\"d-grid\"><div class=\"d-item\"><div class=\"d-lbl\">Assign Date<\/div><div class=\"d-val\">'+fmtDate(ca.assignDate)+'<\/div><\/div><div class=\"d-item\"><div class=\"d-lbl\">Duration<\/div><div class=\"d-val\">'+daysBetween(ca.assignDate)+' days<\/div><\/div><\/div>'+\r\n '<div style=\"display:flex;gap:8px;margin-top:14px\"><button class=\"btn btn-danger btn-sm\" onclick=\"unassign(\\''+id+'\\')\"><i class=\"fas fa-unlink\"><\/i> Unassign<\/button><button class=\"btn btn-ghost btn-sm\" onclick=\"openTransferModal(\\''+id+'\\')\"><i class=\"fas fa-exchange-alt\"><\/i> Transfer<\/button><\/div><\/div>'\r\n :\r\n '<div class=\"empty\" style=\"padding:32px 0\"><i class=\"fas fa-user-slash\"><\/i><h4>Not Assigned<\/h4><p>This device is available to assign<\/p><button class=\"btn btn-primary btn-sm\" style=\"margin-top:14px\" onclick=\"openAssignModal(\\''+id+'\\')\"><i class=\"fas fa-user-plus\"><\/i> Assign Device<\/button><\/div>')+'<\/div>'+\r\n '<div id=\"dt2\" style=\"display:none\">'+(hist.length?hist.map(function(a,i){var u2=getUser(a.userId);return '<div class=\"tl-item\"><div class=\"tl-dot\" style=\"'+(i===0&&!a.returnDate?'background:var(--success)':'')+'\"><\/div><div class=\"tl-info\"><div class=\"tl-name\">'+(u2?u2.name:'Deleted User')+(i===0&&!a.returnDate?' <span class=\"badge b-available\" style=\"font-size:9px;margin-right:6px\">Current<\/span>':'')+'<\/div><div class=\"tl-meta\">'+fmtDate(a.assignDate)+(a.returnDate?' \u2192 '+fmtDate(a.returnDate):'')+(a.returnDate?' \u00b7 '+daysBetween(a.assignDate,a.returnDate):' \u00b7 '+daysBetween(a.assignDate))+' days'+(a.note?' \u00b7 '+a.note:'')+'<\/div><\/div><\/div>';}).join(''):'<div class=\"empty\" style=\"padding:24px 0\"><i class=\"fas fa-history\"><\/i><h4>No History<\/h4><p>This device has not been assigned before<\/p><\/div>')+'<\/div>'+\r\n '<\/div>'+\r\n '<div class=\"m-footer\"><button class=\"btn btn-ghost btn-sm\" onclick=\"openDevModal(\\''+id+'\\')\"><i class=\"fas fa-edit\"><\/i> Edit<\/button><button class=\"btn btn-ghost btn-sm\" onclick=\"showQR(\\''+id+'\\')\"><i class=\"fas fa-qrcode\"><\/i> QR Code<\/button><button class=\"btn btn-ghost\" onclick=\"closeModal()\">Close<\/button><\/div>','modal-lg');\r\n}\r\n\r\nfunction swTab(idx,el){\r\n [0,1,2].forEach(function(i){var t=document.getElementById('dt'+i);if(t)t.style.display=i===idx?'':'none';});\r\n document.querySelectorAll('.tab-btn').forEach(function(b,i){b.classList.toggle('active',i===idx);});\r\n}\r\n\r\nfunction showQR(id){\r\n var d=getDev(id);\r\n var info='ID:'+d.id+'\\nName:'+d.name+'\\nSerial:'+d.serial+'\\nType:'+d.type;\r\n openModal('<div class=\"m-head\"><h3>QR Code \u2014 '+d.name+'<\/h3><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\"><div class=\"qr-wrap\"><div id=\"qr-out\" style=\"background:#fff;border-radius:12px;padding:16px;display:inline-block\"><\/div>'+\r\n '<div style=\"text-align:center;font-size:13px;color:var(--text2);max-width:280px\">'+info.replace(\/\\n\/g,'<br>')+'<\/div>'+\r\n '<button class=\"btn btn-ghost btn-sm\" onclick=\"copyQR(\\''+id+'\\')\"><i class=\"fas fa-copy\"><\/i> Copy Info<\/button><\/div><\/div>','modal-sm');\r\n setTimeout(function(){drawQR(id);},50);\r\n}\r\n\r\nfunction drawQR(id){\r\n var el=document.getElementById('qr-out');\r\n if(!el)return;\r\n var size=160;\r\n var html='<svg width=\"'+size+'\" height=\"'+size+'\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"display:block\">';\r\n html+='<rect width=\"'+size+'\" height=\"'+size+'\" fill=\"white\"\/>';\r\n [[0,0],[0,110],[110,0]].forEach(function(pos){\r\n html+='<rect x=\"'+(pos[0]+5)+'\" y=\"'+(pos[1]+5)+'\" width=\"45\" height=\"45\" fill=\"black\" rx=\"3\"\/>';\r\n html+='<rect x=\"'+(pos[0]+10)+'\" y=\"'+(pos[1]+10)+'\" width=\"35\" height=\"35\" fill=\"white\" rx=\"2\"\/>';\r\n html+='<rect x=\"'+(pos[0]+15)+'\" y=\"'+(pos[1]+15)+'\" width=\"25\" height=\"25\" fill=\"black\" rx=\"1\"\/>';\r\n });\r\n var seed=id.split('').reduce(function(a,c){return a+c.charCodeAt(0);},0);\r\n for(var r=0;r<8;r++){for(var col=0;col<8;col++){\r\n if((seed*r+col*7+r*col)%3===0){var px=55+col*8,py=55+r*8;if(px<150&&py<150)html+='<rect x=\"'+px+'\" y=\"'+py+'\" width=\"6\" height=\"6\" fill=\"black\"\/>';}\r\n }}\r\n html+='<\/svg>';\r\n el.innerHTML=html;\r\n}\r\n\r\nfunction copyQR(id){\r\n var d=getDev(id);\r\n var info='Device: '+d.name+'\\nSerial: '+d.serial+'\\nType: '+(TL[d.type]||d.type)+'\\nIP: '+d.ip;\r\n if(navigator.clipboard){navigator.clipboard.writeText(info);}\r\n toast('Device info copied','success');\r\n}\r\n\r\nfunction unassign(deviceId){\r\n var idx=assignments.findIndex(function(a){return a.deviceId===deviceId&&!a.returnDate;});\r\n if(idx<0)return;\r\n var u=getUser(assignments[idx].userId),d=getDev(deviceId);\r\n assignments[idx].returnDate=new Date().toISOString().split('T')[0];\r\n var di=devices.findIndex(function(x){return x.id===deviceId;});\r\n if(di>-1)devices[di].status='available';\r\n addLog('Unassigned '+(d?d.name:'device')+' from '+(u?u.name:'user'),'fa-unlink','warning');\r\n save();closeModal();renderDevs();toast('Device unassigned','info');\r\n}\r\n\r\nfunction openAssignModal(deviceId){\r\n var actU=users.filter(function(u){return u.status==='active';});\r\n if(!actU.length){toast('No active users available','error');return;}\r\n openModal('<div class=\"m-head\"><h3>Assign Device<\/h3><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\"><div class=\"fg\"><label>User<\/label><select class=\"fc\" id=\"as-user\">'+actU.map(function(u){return '<option value=\"'+u.id+'\">'+u.name+' \u2014 '+u.dept+'<\/option>';}).join('')+'<\/select><\/div>'+\r\n '<div class=\"fg\"><label>Assign Date<\/label><input class=\"fc\" type=\"date\" id=\"as-date\" value=\"'+new Date().toISOString().split('T')[0]+'\"><\/div>'+\r\n '<div class=\"fg\"><label>Note<\/label><input class=\"fc\" id=\"as-note\" placeholder=\"Optional note\"><\/div><\/div>'+\r\n '<div class=\"m-footer\"><button class=\"btn btn-primary\" onclick=\"doAssign(\\''+deviceId+'\\')\"><i class=\"fas fa-link\"><\/i> Assign<\/button><button class=\"btn btn-ghost\" onclick=\"closeModal()\">Cancel<\/button><\/div>','modal-sm');\r\n}\r\n\r\nfunction doAssign(deviceId){\r\n var userId=v('as-user'),date=v('as-date'),note=v('as-note');\r\n assignments.push({id:uid(),deviceId:deviceId,userId:userId,assignDate:date,returnDate:null,note:note});\r\n var di=devices.findIndex(function(x){return x.id===deviceId;});\r\n if(di>-1)devices[di].status='assigned';\r\n var u=getUser(userId),d=getDev(deviceId);\r\n addLog('Assigned '+(d?d.name:'device')+' to '+(u?u.name:'user'),'fa-link','success');\r\n save();closeModal();renderDevs();toast('Device assigned successfully','success');\r\n}\r\n\r\nfunction openTransferModal(deviceId){\r\n var cur=getCurAssign(deviceId);\r\n var avU=users.filter(function(u){return u.status==='active'&&u.id!==(cur?cur.userId:'');});\r\n if(!avU.length){toast('No other users available','error');return;}\r\n openModal('<div class=\"m-head\"><h3>Transfer Device<\/h3><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\"><div class=\"fg\"><label>New User<\/label><select class=\"fc\" id=\"tr-user\">'+avU.map(function(u){return '<option value=\"'+u.id+'\">'+u.name+' \u2014 '+u.dept+'<\/option>';}).join('')+'<\/select><\/div>'+\r\n '<div class=\"fg\"><label>Transfer Date<\/label><input class=\"fc\" type=\"date\" id=\"tr-date\" value=\"'+new Date().toISOString().split('T')[0]+'\"><\/div>'+\r\n '<div class=\"fg\"><label>Reason<\/label><input class=\"fc\" id=\"tr-note\" placeholder=\"Reason for transfer\"><\/div><\/div>'+\r\n '<div class=\"m-footer\"><button class=\"btn btn-primary\" onclick=\"doTransfer(\\''+deviceId+'\\')\"><i class=\"fas fa-exchange-alt\"><\/i> Transfer<\/button><button class=\"btn btn-ghost\" onclick=\"closeModal()\">Cancel<\/button><\/div>','modal-sm');\r\n}\r\n\r\n\/\/ =================== BUG FIX: doTransfer ===================\r\nfunction doTransfer(deviceId){\r\n var newUserId=v('tr-user');\r\n var date=v('tr-date');\r\n var note=v('tr-note');\r\n var idx=assignments.findIndex(function(a){return a.deviceId===deviceId&&!a.returnDate;});\r\n var oldU=idx>-1?getUser(assignments[idx].userId):null;\r\n if(idx>-1)assignments[idx].returnDate=date;\r\n assignments.push({id:uid(),deviceId:deviceId,userId:newUserId,assignDate:date,returnDate:null,note:note});\r\n var d=getDev(deviceId),nu=getUser(newUserId);\r\n addLog('Transfer '+(d?d.name:'device')+' from '+(oldU?oldU.name:'user')+' to '+(nu?nu.name:'user'),'fa-exchange-alt','info');\r\n save();closeModal();renderDevs();toast('Device transferred successfully','success');\r\n}\r\n\r\nfunction exportDevCSV(){\r\n var h=['Name','Type','Brand','Model','Serial','MAC','IP','CPU','RAM','Storage','OS','Purchase Date','Status','Notes'];\r\n var rows=devices.map(function(d){return [d.name,TL[d.type],d.brand,d.model,d.serial,d.mac,d.ip,d.cpu,d.ram,d.storage,d.os,d.purchaseDate,SL[d.status],d.notes].map(function(x){return '\"'+(x||'').replace(\/\"\/g,'\"\"')+'\"';});});\r\n var csv=[h].concat(rows).map(function(r){return r.join(',');}).join('\\n');\r\n dl('data:text\/csv;charset=utf-8,\\uFEFF'+encodeURIComponent(csv),'devices.csv');\r\n toast('Exported '+devices.length+' devices','success');\r\n}\r\n\r\n\/\/ =================== USERS ===================\r\nvar uPage=1, uQ='', uSF='';\r\n\r\nfunction renderUsrs(){\r\n document.getElementById('content').innerHTML=\r\n '<div class=\"page-header\"><div style=\"display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px\"><div><div class=\"page-title\">Users<\/div><div class=\"page-sub\">Manage all users ('+users.length+')<\/div><\/div><div style=\"display:flex;gap:8px\"><button class=\"btn btn-ghost btn-sm\" onclick=\"exportUsersCSV()\"><i class=\"fas fa-file-csv\"><\/i> Export<\/button><button class=\"btn btn-primary btn-sm\" onclick=\"openUserModal()\"><i class=\"fas fa-plus\"><\/i> New User<\/button><\/div><\/div><\/div>'+\r\n '<div class=\"tbl-wrap\"><div class=\"tbl-toolbar\"><div class=\"srch\"><i class=\"fas fa-search\"><\/i><input type=\"text\" id=\"u-srch\" placeholder=\"Search...\" value=\"'+uQ+'\" oninput=\"uQ=this.value;uPage=1;renderUsrTable()\"><\/div>'+\r\n '<select class=\"sel\" onchange=\"uSF=this.value;uPage=1;renderUsrTable()\"><option value=\"\">All Statuses<\/option><option value=\"active\">Active<\/option><option value=\"inactive\">Inactive<\/option><\/select><\/div>'+\r\n '<div id=\"usr-tbl-body\"><\/div><div id=\"usr-pag\"><\/div><\/div>';\r\n renderUsrTable();\r\n}\r\n\r\nfunction renderUsrTable(){\r\n var fl=users.filter(function(u){\r\n var q=uQ.toLowerCase();\r\n return(!q||(u.name+u.email+u.dept+u.job).toLowerCase().includes(q))&&(!uSF||u.status===uSF);\r\n });\r\n var pages=Math.max(1,Math.ceil(fl.length\/PGS));\r\n uPage=Math.min(uPage,pages);\r\n var sl=fl.slice((uPage-1)*PGS,uPage*PGS);\r\n var rows=sl.map(function(u){\r\n var devs=getUserDevs(u.id);\r\n return '<tr class=\"c-row\" onclick=\"openUserDetail(\\''+u.id+'\\')\">' +\r\n '<td><div style=\"display:flex;align-items:center;gap:10px\"><div class=\"av\" style=\"background:'+avColor(u.name)+'\">'+initials(u.name)+'<\/div><div><div style=\"font-weight:700;font-size:13px\">'+u.name+'<\/div><div style=\"font-size:11px;color:var(--text3)\">'+u.email+'<\/div><\/div><\/div><\/td>'+\r\n '<td>'+u.dept+'<\/td><td style=\"color:var(--text2)\">'+u.job+'<\/td>'+\r\n '<td class=\"mono\" style=\"font-size:12px;color:var(--text2)\">'+u.phone+'<\/td>'+\r\n '<td>'+badge(u.status)+'<\/td>'+\r\n '<td><span class=\"badge '+(u.role==='admin'?'b-assigned':'b-info')+'\">'+(u.role==='admin'?'Admin':'User')+'<\/span><\/td>'+\r\n '<td><span class=\"badge b-info\">'+devs.length+' dev<\/span><\/td>'+\r\n '<td onclick=\"event.stopPropagation()\" style=\"white-space:nowrap\"><button class=\"btn btn-ghost btn-xs\" onclick=\"openUserModal(\\''+u.id+'\\')\"><i class=\"fas fa-edit\"><\/i><\/button><button class=\"btn btn-danger btn-xs\" style=\"margin-right:4px\" onclick=\"deleteUser(\\''+u.id+'\\')\"><i class=\"fas fa-trash\"><\/i><\/button><\/td><\/tr>';\r\n }).join('');\r\n document.getElementById('usr-tbl-body').innerHTML='<table><thead><tr><th>User<\/th><th>Department<\/th><th>Job Title<\/th><th>Phone<\/th><th>Status<\/th><th>Role<\/th><th>Devices<\/th><th>Actions<\/th><\/tr><\/thead><tbody>'+(rows||'<tr><td colspan=\"8\"><div class=\"empty\"><i class=\"fas fa-users\"><\/i><h4>No users found<\/h4><\/div><\/td><\/tr>')+'<\/tbody><\/table>';\r\n var pag='';\r\n if(pages>1){for(var i=1;i<=pages;i++)pag+='<div class=\"pag-btn'+(i===uPage?' active':'')+'\" onclick=\"uPage='+i+';renderUsrTable()\">'+i+'<\/div>';}\r\n document.getElementById('usr-pag').innerHTML=pages>1?'<div class=\"pag\">'+pag+'<\/div>':'';\r\n}\r\n\r\nfunction openUserModal(id){\r\n var u=id?getUser(id):null;\r\n var pwdLabel=u?'Password <span style=\"font-weight:400;color:var(--text3)\">(leave blank to keep)<\/span>':'Password *';\r\n openModal('<div class=\"m-head\"><h3>'+(u?'Edit User':'Add New User')+'<\/h3><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\">'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>Full Name *<\/label><input class=\"fc\" id=\"uf-name\" value=\"'+(u?u.name:'')+'\" placeholder=\"John Smith\"><\/div><div class=\"fg\"><label>Department *<\/label><input class=\"fc\" id=\"uf-dept\" value=\"'+(u?u.dept:'')+'\" placeholder=\"IT Department\"><\/div><\/div>'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>Job Title<\/label><input class=\"fc\" id=\"uf-job\" value=\"'+(u?u.job:'')+'\" placeholder=\"Systems Engineer\"><\/div><div class=\"fg\"><label>Phone<\/label><input class=\"fc\" id=\"uf-phone\" value=\"'+(u?u.phone:'')+'\" placeholder=\"+1 555 0000\"><\/div><\/div>'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>Email Address<\/label><input class=\"fc\" id=\"uf-email\" value=\"'+(u?u.email:'')+'\" placeholder=\"name@company.com\"><\/div><div class=\"fg\"><label>Status<\/label><select class=\"fc\" id=\"uf-status\"><option value=\"active\" '+(!u||u.status==='active'?'selected':'')+'>Active<\/option><option value=\"inactive\" '+(u&&u.status==='inactive'?'selected':'')+'>Inactive<\/option><\/select><\/div><\/div>'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>'+pwdLabel+'<\/label><input class=\"fc\" id=\"uf-password\" type=\"text\" value=\"\" placeholder=\"'+(u?'Leave blank to keep current...':'Set login password')+'\"><\/div><div class=\"fg\"><label>System Role<\/label><select class=\"fc\" id=\"uf-role\"><option value=\"user\" '+(!u||u.role!=='admin'?'selected':'')+'>User<\/option><option value=\"admin\" '+(u&&u.role==='admin'?'selected':'')+'>Admin<\/option><\/select><\/div><\/div>'+\r\n '<\/div><div class=\"m-footer\"><button class=\"btn btn-primary\" onclick=\"saveUser(\\''+(id||'')+'\\')\" ><i class=\"fas fa-save\"><\/i> Save<\/button><button class=\"btn btn-ghost\" onclick=\"closeModal()\">Cancel<\/button><\/div>','modal-sm');\r\n}\r\n\r\nfunction saveUser(id){\r\n var pwd=v('uf-password');\r\n var role=v('uf-role')||'user';\r\n var vals={name:v('uf-name'),dept:v('uf-dept'),job:v('uf-job'),phone:v('uf-phone'),email:v('uf-email'),status:v('uf-status'),role:role};\r\n if(!vals.name){toast('Name is required','error');return;}\r\n if(id){\r\n var i=users.findIndex(function(u){return u.id===id;});\r\n if(pwd)vals.password=pwd;\r\n users[i]=Object.assign({},users[i],vals);\r\n addLog('User updated: '+vals.name,'fa-user-edit','info');\r\n }else{\r\n if(!pwd){toast('Password is required for new users','error');return;}\r\n vals.password=pwd;\r\n users.push(Object.assign({id:uid()},vals));\r\n addLog('User added: '+vals.name,'fa-user-plus','success');\r\n }\r\n save();closeModal();renderUsrs();toast(id?'User updated':'User added successfully','success');\r\n}\r\n\r\nfunction deleteUser(id){\r\n var u=getUser(id);\r\n if(!confirm('Delete \"'+u.name+'\"?'))return;\r\n assignments.filter(function(a){return a.userId===id&&!a.returnDate;}).forEach(function(a){\r\n a.returnDate=new Date().toISOString().split('T')[0];\r\n var di=devices.findIndex(function(x){return x.id===a.deviceId;});\r\n if(di>-1)devices[di].status='available';\r\n });\r\n users=users.filter(function(x){return x.id!==id;});\r\n addLog('User deleted: '+u.name,'fa-user-minus','warning');\r\n save();renderUsrs();toast('User deleted','info');\r\n}\r\n\r\nfunction openUserDetail(id){\r\n var u=getUser(id);if(!u)return;\r\n var devs=getUserDevs(id);\r\n var hist=assignments.filter(function(a){return a.userId===id&&a.returnDate;}).slice(0,5);\r\n openModal('<div class=\"m-head\"><div style=\"display:flex;align-items:center;gap:12px\"><div class=\"av\" style=\"width:46px;height:46px;border-radius:12px;font-size:17px;background:'+avColor(u.name)+'\">'+initials(u.name)+'<\/div><div><h3>'+u.name+'<\/h3><div style=\"font-size:12px;color:var(--text2);margin-top:2px\">'+u.dept+' \u00b7 '+u.job+'<\/div><\/div><\/div><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\">'+badge(u.status)+\r\n '<div class=\"d-grid\" style=\"margin-top:14px\"><div class=\"d-item\"><div class=\"d-lbl\">Email<\/div><div class=\"d-val\" style=\"font-size:12px\">'+u.email+'<\/div><\/div><div class=\"d-item\"><div class=\"d-lbl\">Phone<\/div><div class=\"d-val mono\">'+u.phone+'<\/div><\/div><div class=\"d-item\"><div class=\"d-lbl\">Department<\/div><div class=\"d-val\">'+u.dept+'<\/div><\/div><div class=\"d-item\"><div class=\"d-lbl\">Job Title<\/div><div class=\"d-val\">'+u.job+'<\/div><\/div><\/div>'+\r\n '<hr class=\"sec-div\"><div class=\"card-title\" style=\"margin-bottom:12px\"><i class=\"fas fa-laptop\"><\/i>Current Devices ('+devs.length+')<\/div>'+\r\n (devs.length?devs.map(function(d){return '<div style=\"display:flex;align-items:center;gap:10px;background:var(--bg3);border-radius:9px;padding:10px 12px;margin-bottom:8px\"><div class=\"dev-icon '+TC[d.type]+'\" style=\"width:32px;height:32px;font-size:13px\"><i class=\"fas '+TI[d.type]+'\"><\/i><\/div><div style=\"flex:1\"><div style=\"font-size:13px;font-weight:600\">'+d.name+'<\/div><div class=\"mono\" style=\"font-size:11px;color:var(--text3)\">'+d.serial+'<\/div><\/div>'+badge(d.status)+'<\/div>';}).join(''):'<div style=\"color:var(--text3);font-size:13px;text-align:center;padding:12px\">No devices assigned<\/div>')+\r\n (hist.length?'<hr class=\"sec-div\"><div class=\"card-title\" style=\"margin-bottom:12px\"><i class=\"fas fa-history\"><\/i>Previous Devices<\/div>'+hist.map(function(a){var d=getDev(a.deviceId);return '<div class=\"tl-item\"><div class=\"tl-dot\" style=\"background:var(--text3)\"><\/div><div class=\"tl-info\"><div class=\"tl-name\">'+(d?d.name:'Deleted Device')+'<\/div><div class=\"tl-meta\">'+fmtDate(a.assignDate)+' \u2192 '+fmtDate(a.returnDate)+' \u00b7 '+daysBetween(a.assignDate,a.returnDate)+' days<\/div><\/div><\/div>';}).join(''):'')+'<\/div>'+\r\n '<div class=\"m-footer\"><button class=\"btn btn-ghost btn-sm\" onclick=\"openUserModal(\\''+id+'\\')\"><i class=\"fas fa-edit\"><\/i> Edit<\/button><button class=\"btn btn-ghost\" onclick=\"closeModal()\">Close<\/button><\/div>');\r\n}\r\n\r\nfunction exportUsersCSV(){\r\n var h=['Name','Department','Job Title','Phone','Email','Status','Devices'];\r\n var rows=users.map(function(u){return [u.name,u.dept,u.job,u.phone,u.email,SL[u.status],getUserDevs(u.id).length];});\r\n var csv=[h].concat(rows).map(function(r){return r.join(',');}).join('\\n');\r\n dl('data:text\/csv;charset=utf-8,\\uFEFF'+encodeURIComponent(csv),'users.csv');\r\n toast('Users exported','success');\r\n}\r\n\r\n\/\/ =================== ASSIGNMENTS ===================\r\nfunction renderAssigns(){\r\n var active=assignments.filter(function(a){return !a.returnDate;});\r\n document.getElementById('content').innerHTML=\r\n '<div class=\"page-header\"><div style=\"display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px\"><div><div class=\"page-title\">Assignments<\/div><div class=\"page-sub\">Active device assignments ('+active.length+')<\/div><\/div><button class=\"btn btn-primary btn-sm\" onclick=\"openAssignAny()\"><i class=\"fas fa-plus\"><\/i> New Assignment<\/button><\/div><\/div>'+\r\n '<div class=\"tbl-wrap\"><table><thead><tr><th>Device<\/th><th>Status<\/th><th>User<\/th><th>Department<\/th><th>Assign Date<\/th><th>Duration<\/th><th>Actions<\/th><\/tr><\/thead><tbody>'+\r\n (active.map(function(a){\r\n var d=getDev(a.deviceId),u=getUser(a.userId);\r\n if(!d||!u)return'';\r\n var days=daysBetween(a.assignDate);\r\n return '<tr><td><div style=\"display:flex;align-items:center;gap:8px\"><div class=\"dev-icon '+TC[d.type]+'\" style=\"width:30px;height:30px;font-size:13px\"><i class=\"fas '+TI[d.type]+'\"><\/i><\/div><div style=\"font-weight:600;font-size:13px\">'+d.name+'<\/div><\/div><\/td>'+\r\n '<td>'+badge(d.status)+'<\/td>'+\r\n '<td><div style=\"display:flex;align-items:center;gap:8px\"><div class=\"av\" style=\"width:28px;height:28px;border-radius:7px;font-size:10px;background:'+avColor(u.name)+'\">'+initials(u.name)+'<\/div><span>'+u.name+'<\/span><\/div><\/td>'+\r\n '<td style=\"font-size:12px;color:var(--text2)\">'+u.dept+'<\/td>'+\r\n '<td>'+fmtDate(a.assignDate)+'<\/td>'+\r\n '<td><span class=\"badge '+(days>180?'b-maintenance':days>90?'b-assigned':'b-available')+'\">'+days+' days<\/span><\/td>'+\r\n '<td style=\"white-space:nowrap\"><button class=\"btn btn-ghost btn-xs\" onclick=\"openTransferModal(\\''+d.id+'\\')\"><i class=\"fas fa-exchange-alt\"><\/i> Transfer<\/button><button class=\"btn btn-danger btn-xs\" style=\"margin-right:4px\" onclick=\"unassignAndRefresh(\\''+d.id+'\\')\"><i class=\"fas fa-unlink\"><\/i><\/button><\/td><\/tr>';\r\n }).join('')||'<tr><td colspan=\"7\"><div class=\"empty\"><i class=\"fas fa-link\"><\/i><h4>No assignments<\/h4><\/div><\/td><\/tr>')+\r\n '<\/tbody><\/table><\/div>';\r\n}\r\n\r\nfunction unassignAndRefresh(deviceId){\r\n var idx=assignments.findIndex(function(a){return a.deviceId===deviceId&&!a.returnDate;});\r\n if(idx<0)return;\r\n var u=getUser(assignments[idx].userId),d=getDev(deviceId);\r\n assignments[idx].returnDate=new Date().toISOString().split('T')[0];\r\n var di=devices.findIndex(function(x){return x.id===deviceId;});\r\n if(di>-1)devices[di].status='available';\r\n addLog('Unassigned '+(d?d.name:'device')+' from '+(u?u.name:'user'),'fa-unlink','warning');\r\n save();renderAssigns();toast('Device unassigned','info');\r\n}\r\n\r\nfunction openAssignAny(){\r\n var avD=devices.filter(function(d){return d.status==='available';});\r\n if(!avD.length){toast('No available devices','error');return;}\r\n openModal('<div class=\"m-head\"><h3>New Assignment<\/h3><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\"><div class=\"fg\"><label>Device<\/label><select class=\"fc\" id=\"aa-dev\">'+avD.map(function(d){return '<option value=\"'+d.id+'\">'+d.name+' ('+d.serial+')<\/option>';}).join('')+'<\/select><\/div>'+\r\n '<div class=\"fg\"><label>User<\/label><select class=\"fc\" id=\"aa-user\">'+users.filter(function(u){return u.status==='active';}).map(function(u){return '<option value=\"'+u.id+'\">'+u.name+' \u2014 '+u.dept+'<\/option>';}).join('')+'<\/select><\/div>'+\r\n '<div class=\"fg\"><label>Assign Date<\/label><input class=\"fc\" type=\"date\" id=\"aa-date\" value=\"'+new Date().toISOString().split('T')[0]+'\"><\/div>'+\r\n '<div class=\"fg\"><label>Note<\/label><input class=\"fc\" id=\"aa-note\" placeholder=\"Optional\"><\/div><\/div>'+\r\n '<div class=\"m-footer\"><button class=\"btn btn-primary\" onclick=\"doAssignAny()\"><i class=\"fas fa-link\"><\/i> Assign<\/button><button class=\"btn btn-ghost\" onclick=\"closeModal()\">Cancel<\/button><\/div>','modal-sm');\r\n}\r\n\r\nfunction doAssignAny(){\r\n var deviceId=v('aa-dev'),userId=v('aa-user'),date=v('aa-date'),note=v('aa-note');\r\n assignments.push({id:uid(),deviceId:deviceId,userId:userId,assignDate:date,returnDate:null,note:note});\r\n var di=devices.findIndex(function(x){return x.id===deviceId;});if(di>-1)devices[di].status='assigned';\r\n var u=getUser(userId),d=getDev(deviceId);\r\n addLog('Assigned '+(d?d.name:'device')+' to '+(u?u.name:'user'),'fa-link','success');\r\n save();closeModal();renderAssigns();toast('Device assigned','success');\r\n}\r\n\r\n\/\/ =================== ACTIVITY ===================\r\nfunction renderActivity(){\r\n document.getElementById('content').innerHTML=\r\n '<div class=\"page-header\"><div style=\"display:flex;align-items:center;justify-content:space-between\"><div><div class=\"page-title\">Activity Log<\/div><div class=\"page-sub\">'+logs.length+' logged operations<\/div><\/div><button class=\"btn btn-danger btn-sm\" onclick=\"if(confirm(\\'Clear log?\\')){logs=[];save();renderActivity();toast(\\'Log cleared\\',\\'info\\')}\"><i class=\"fas fa-trash\"><\/i> Clear<\/button><\/div><\/div>'+\r\n '<div class=\"card\">'+(logs.map(function(l){var colMap={success:'var(--success)',warning:'var(--warning)',info:'var(--accent)',accent:'var(--accent2)'};return '<div class=\"act-item\"><div class=\"act-icon\" style=\"background:rgba(79,124,255,.08);color:'+(colMap[l.c]||'var(--accent)')+'\"><i class=\"fas '+l.icon+'\"><\/i><\/div><div><div class=\"act-text\">'+l.msg+'<\/div><div class=\"act-time\">'+new Date(l.time).toLocaleString('en-GB')+'<\/div><\/div><\/div>';}).join('')||'<div class=\"empty\"><i class=\"fas fa-history\"><\/i><h4>No activity<\/h4><\/div>')+'<\/div>';\r\n}\r\n\r\n\/\/ =================== REPORTS ===================\r\nfunction renderReports(){\r\n var tot=devices.length;\r\n var byType={};devices.forEach(function(d){byType[TL[d.type]]=(byType[TL[d.type]]||0)+1;});\r\n var sorted=Object.entries(byType).sort(function(a,b){return b[1]-a[1];});\r\n var max=sorted[0]?sorted[0][1]:1;\r\n document.getElementById('content').innerHTML=\r\n '<div class=\"page-header\"><div class=\"page-title\">Reports<\/div><div class=\"page-sub\">Comprehensive Overview<\/div><\/div>'+\r\n '<div style=\"display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px\">'+\r\n '<div class=\"card\"><div class=\"card-head\"><div class=\"card-title\"><i class=\"fas fa-chart-bar\"><\/i>Device Distribution<\/div><\/div>'+\r\n sorted.map(function(e,i){return '<div class=\"rep-bar\"><div class=\"rep-lbl\">'+e[0]+'<\/div><div class=\"rep-track\"><div class=\"rep-fill\" style=\"width:'+Math.round(e[1]\/max*100)+'%;background:'+AVCOLS[i%AVCOLS.length]+'\">'+e[1]+'<\/div><\/div><\/div>';}).join('')+'<\/div>'+\r\n '<div class=\"card\"><div class=\"card-head\"><div class=\"card-title\"><i class=\"fas fa-users\"><\/i>Statistics<\/div><\/div>'+\r\n '<div class=\"d-grid\" style=\"margin-bottom:14px\">'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Users<\/div><div class=\"d-val\" style=\"font-size:22px\">'+users.length+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Devices<\/div><div class=\"d-val\" style=\"font-size:22px\">'+tot+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Active Users<\/div><div class=\"d-val\" style=\"font-size:22px;color:var(--success)\">'+users.filter(function(u){return u.status==='active';}).length+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Active Assignments<\/div><div class=\"d-val\" style=\"font-size:22px;color:var(--accent)\">'+assignments.filter(function(a){return !a.returnDate;}).length+'<\/div><\/div>'+\r\n '<\/div><canvas id=\"rpt-pie\" height=\"120\"><\/canvas><\/div><\/div>'+\r\n '<div class=\"card\"><div class=\"card-head\"><div class=\"card-title\"><i class=\"fas fa-download\"><\/i>Export Data<\/div><\/div>'+\r\n '<div style=\"display:flex;gap:10px;flex-wrap:wrap\">'+\r\n '<button class=\"btn btn-ghost btn-sm\" onclick=\"exportDevCSV()\"><i class=\"fas fa-file-csv\" style=\"color:var(--success)\"><\/i> Devices CSV<\/button>'+\r\n '<button class=\"btn btn-ghost btn-sm\" onclick=\"exportUsersCSV()\"><i class=\"fas fa-file-csv\" style=\"color:var(--accent)\"><\/i> Users CSV<\/button>'+\r\n '<button class=\"btn btn-ghost btn-sm\" onclick=\"exportAssignsCSV()\"><i class=\"fas fa-file-csv\" style=\"color:var(--accent2)\"><\/i> Assignments CSV<\/button>'+\r\n '<button class=\"btn btn-ghost btn-sm\" onclick=\"backupData()\"><i class=\"fas fa-database\" style=\"color:var(--warning)\"><\/i> Backup JSON<\/button>'+\r\n '<label class=\"btn btn-ghost btn-sm\" style=\"cursor:pointer\"><i class=\"fas fa-upload\" style=\"color:var(--success)\"><\/i> Restore<input type=\"file\" style=\"display:none\" accept=\".json\" onchange=\"restoreData(event)\"><\/label>'+\r\n '<\/div><\/div>';\r\n setTimeout(function(){\r\n var el=document.getElementById('rpt-pie');if(!el)return;\r\n var asgn=devices.filter(function(d){return d.status==='assigned';}).length;\r\n var avail=devices.filter(function(d){return d.status==='available';}).length;\r\n var maint=devices.filter(function(d){return d.status==='maintenance';}).length;\r\n new Chart(el,{type:'doughnut',data:{labels:['Assigned','Available','Maintenance'],datasets:[{data:[asgn,avail,maint],backgroundColor:['#4f7cff','#00d4aa','#ffa940'],borderWidth:0}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{position:'bottom',labels:{color:'#8892b0',font:{size:11},padding:8,boxWidth:10}}},cutout:'60%'}});\r\n },80);\r\n}\r\n\r\nfunction exportAssignsCSV(){\r\n var h=['Device','User','Department','Assign Date','Return Date','Days'];\r\n var rows=assignments.map(function(a){var d=getDev(a.deviceId),u=getUser(a.userId);return[d?d.name:'\u2014',u?u.name:'\u2014',u?u.dept:'\u2014',a.assignDate,a.returnDate||'Active',daysBetween(a.assignDate,a.returnDate||new Date())];});\r\n var csv=[h].concat(rows).map(function(r){return r.join(',');}).join('\\n');\r\n dl('data:text\/csv;charset=utf-8,\\uFEFF'+encodeURIComponent(csv),'assignments.csv');\r\n toast('Assignments exported','success');\r\n}\r\n\r\nfunction backupData(){\r\n var data={users:users,devices:devices,assignments:assignments,logs:logs,ts:new Date().toISOString(),v:'2.0'};\r\n dl('data:application\/json;charset=utf-8,'+encodeURIComponent(JSON.stringify(data,null,2)),'itam_backup_'+new Date().toISOString().split('T')[0]+'.json');\r\n toast('Backup created','success');\r\n}\r\n\r\nfunction restoreData(e){\r\n var file=e.target.files[0];if(!file)return;\r\n var r=new FileReader();\r\n r.onload=function(ev){\r\n try{var d=JSON.parse(ev.target.result);users=d.users||users;devices=d.devices||devices;assignments=d.assignments||assignments;logs=d.logs||logs;save();renderReports();toast('Restored successfully','success');}\r\n catch(ex){toast('File error','error');}\r\n };r.readAsText(file);\r\n}\r\n\r\n\/\/ =================== SETTINGS ===================\r\nfunction renderSettings(){\r\n document.getElementById('content').innerHTML=\r\n '<div class=\"page-header\"><div class=\"page-title\">Settings<\/div><\/div>'+\r\n '<div style=\"display:grid;grid-template-columns:1fr 1fr;gap:16px\">'+\r\n '<div class=\"card\"><div class=\"card-title\" style=\"margin-bottom:16px\"><i class=\"fas fa-palette\"><\/i> Appearance<\/div>'+\r\n '<div style=\"display:flex;align-items:center;justify-content:space-between;padding:12px 0\"><div><div style=\"font-size:13px;font-weight:600\">Dark Mode<\/div><div style=\"font-size:12px;color:var(--text3);margin-top:2px\">Toggle dark\/light theme<\/div><\/div>'+\r\n '<div onclick=\"toggleTheme()\" style=\"width:46px;height:26px;border-radius:13px;background:'+(darkMode?'var(--accent)':'var(--bg4)')+';cursor:pointer;position:relative;transition:.3s;flex-shrink:0\"><div style=\"width:20px;height:20px;border-radius:50%;background:#fff;position:absolute;top:3px;transition:.3s;'+(darkMode?'right:3px':'left:3px')+'\"><\/div><\/div><\/div><\/div>'+\r\n '<div class=\"card\"><div class=\"card-title\" style=\"margin-bottom:16px\"><i class=\"fas fa-info-circle\"><\/i> System Info<\/div>'+\r\n '<div class=\"d-grid\"><div class=\"d-item\"><div class=\"d-lbl\">Version<\/div><div class=\"d-val mono\">v2.0.1<\/div><\/div><div class=\"d-item\"><div class=\"d-lbl\">Users<\/div><div class=\"d-val\">'+users.length+'<\/div><\/div><div class=\"d-item\"><div class=\"d-lbl\">Devices<\/div><div class=\"d-val\">'+devices.length+'<\/div><\/div><div class=\"d-item\"><div class=\"d-lbl\">Assignments<\/div><div class=\"d-val\">'+assignments.filter(function(a){return !a.returnDate;}).length+'<\/div><\/div><\/div><\/div>'+\r\n '<div class=\"card\" style=\"grid-column:1\/-1\"><div class=\"card-title\" style=\"margin-bottom:14px;color:var(--danger)\"><i class=\"fas fa-exclamation-triangle\"><\/i> Danger Zone<\/div>'+\r\n '<div style=\"display:flex;gap:10px\"><button class=\"btn btn-danger btn-sm\" onclick=\"if(confirm(\\'Clear ALL data? This cannot be undone!\\')){localStorage.clear();location.reload()}\"><i class=\"fas fa-trash\"><\/i> Clear All Data<\/button><button class=\"btn btn-ghost btn-sm\" onclick=\"backupData()\"><i class=\"fas fa-shield\"><\/i> Backup First<\/button><\/div><\/div><\/div>';\r\n}\r\n\r\n\/\/ =================== MODAL ===================\r\nfunction openModal(html,cls){\r\n document.getElementById('modal-box').className='modal '+(cls||'');\r\n document.getElementById('modal-box').innerHTML=html;\r\n document.getElementById('overlay').classList.add('open');\r\n}\r\nfunction closeModal(e){\r\n if(!e||e.target===document.getElementById('overlay'))\r\n document.getElementById('overlay').classList.remove('open');\r\n}\r\n\r\n\/\/ =================== TICKETS ===================\r\nvar TICKET_STATUSES={open:'Open',in_progress:'In Progress',resolved:'Resolved',closed:'Closed'};\r\nvar TICKET_PRIORITIES={low:'Low',medium:'Medium',high:'High',critical:'Critical'};\r\nvar TICKET_CATEGORIES={hardware:'Hardware',software:'Software',network:'Network',access:'Access & Permissions',email:'Email',other:'Other'};\r\nvar STATUS_BADGE={open:'b-assigned',in_progress:'b-maintenance',resolved:'b-active',closed:'b-retired'};\r\n\r\nfunction ticketId(idx){return 'TKT-'+String(idx+1).padStart(4,'0');}\r\n\r\nfunction renderTickets(){\r\n var c=document.getElementById('content');\r\n var isAdmin=currentUser&¤tUser.role==='admin';\r\n var myTickets=isAdmin?[].concat(tickets):tickets.filter(function(t){return t.userId===currentUser.id;});\r\n myTickets.sort(function(a,b){return new Date(b.createdAt)-new Date(a.createdAt);});\r\n var openCount=myTickets.filter(function(t){return t.status==='open'||t.status==='in_progress';}).length;\r\n var resolvedCount=myTickets.filter(function(t){return t.status==='resolved'||t.status==='closed';}).length;\r\n c.innerHTML=\r\n '<div class=\"page-header\"><div style=\"display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px\"><div><div class=\"page-title\">'+(isAdmin?'All Tickets':'My Tickets')+'<\/div><div class=\"page-sub\">'+myTickets.length+' total \u00b7 '+openCount+' open \u00b7 '+resolvedCount+' resolved<\/div><\/div><button class=\"btn btn-primary btn-sm\" onclick=\"openNewTicketModal()\"><i class=\"fas fa-plus\"><\/i> New Ticket<\/button><\/div><\/div>'+\r\n '<div class=\"ticket-filter-bar\">'+\r\n '<div class=\"srch\" style=\"flex:1;min-width:200px\"><i class=\"fas fa-search\"><\/i><input type=\"text\" id=\"tkt-srch\" placeholder=\"Search tickets...\" oninput=\"filterAndRenderTicketList()\"><\/div>'+\r\n '<select class=\"sel\" id=\"tkt-status-f\" onchange=\"filterAndRenderTicketList()\"><option value=\"\">All Statuses<\/option><option value=\"open\">Open<\/option><option value=\"in_progress\">In Progress<\/option><option value=\"resolved\">Resolved<\/option><option value=\"closed\">Closed<\/option><\/select>'+\r\n '<select class=\"sel\" id=\"tkt-pri-f\" onchange=\"filterAndRenderTicketList()\"><option value=\"\">All Priorities<\/option><option value=\"critical\">Critical<\/option><option value=\"high\">High<\/option><option value=\"medium\">Medium<\/option><option value=\"low\">Low<\/option><\/select>'+\r\n (isAdmin?'<select class=\"sel\" id=\"tkt-cat-f\" onchange=\"filterAndRenderTicketList()\"><option value=\"\">All Categories<\/option>'+Object.entries(TICKET_CATEGORIES).map(function(e){return '<option value=\"'+e[0]+'\">'+e[1]+'<\/option>';}).join('')+'<\/select>':'')+\r\n '<\/div><div id=\"tickets-list\"><\/div>';\r\n filterAndRenderTicketList();\r\n}\r\n\r\nfunction filterAndRenderTicketList(){\r\n var isAdmin=currentUser&¤tUser.role==='admin';\r\n var list=isAdmin?[].concat(tickets):tickets.filter(function(t){return t.userId===currentUser.id;});\r\n var q=((document.getElementById('tkt-srch')||{}).value||'').toLowerCase();\r\n var sf=(document.getElementById('tkt-status-f')||{}).value||'';\r\n var pf=(document.getElementById('tkt-pri-f')||{}).value||'';\r\n var cf=(document.getElementById('tkt-cat-f')||{}).value||'';\r\n if(q)list=list.filter(function(t){return (t.title+t.description).toLowerCase().includes(q);});\r\n if(sf)list=list.filter(function(t){return t.status===sf;});\r\n if(pf)list=list.filter(function(t){return t.priority===pf;});\r\n if(cf)list=list.filter(function(t){return t.category===cf;});\r\n list.sort(function(a,b){return new Date(b.createdAt)-new Date(a.createdAt);});\r\n var el=document.getElementById('tickets-list');\r\n if(!el)return;\r\n if(!list.length){el.innerHTML='<div class=\"empty\"><i class=\"fas fa-ticket\"><\/i><h4>No tickets found<\/h4><p>Click \"New Ticket\" to submit your first request<\/p><\/div>';return;}\r\n el.innerHTML=list.map(function(t){\r\n var idx=tickets.indexOf(t);\r\n var owner=getUser(t.userId);\r\n var assignee=t.assignedTo?getUser(t.assignedTo):null;\r\n var unread=isAdmin&&t.comments&&t.comments.filter(function(cc){return !cc.byAdmin&&!cc.readByAdmin;}).length>0;\r\n return '<div class=\"ticket-card tc-'+t.status+'\" onclick=\"openTicketDetail('+idx+')\">'+(unread?'<div style=\"position:absolute;top:12px;left:12px;width:8px;height:8px;background:var(--accent);border-radius:50%\"><\/div>':'')+\r\n '<div style=\"display:flex;align-items:flex-start;justify-content:space-between;gap:10px\"><div style=\"flex:1;min-width:0\">'+\r\n '<div class=\"ticket-id\">'+ticketId(idx)+' \u00b7 '+(TICKET_CATEGORIES[t.category]||t.category)+'<\/div>'+\r\n '<div class=\"ticket-title\">'+t.title+'<\/div>'+\r\n '<div class=\"ticket-desc\">'+t.description+'<\/div>'+\r\n '<div class=\"ticket-footer\">'+\r\n '<span class=\"badge '+(STATUS_BADGE[t.status]||'')+'\"><span class=\"b-dot\"><\/span>'+(TICKET_STATUSES[t.status]||t.status)+'<\/span>'+\r\n '<span style=\"display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text2)\"><span class=\"priority-dot p-'+t.priority+'\"><\/span>'+(TICKET_PRIORITIES[t.priority]||t.priority)+'<\/span>'+\r\n (isAdmin&&owner?'<span style=\"font-size:11px;color:var(--text3)\"><i class=\"fas fa-user\" style=\"font-size:10px\"><\/i> '+owner.name+'<\/span>':'')+\r\n (assignee?'<span style=\"font-size:11px;color:var(--text3)\"><i class=\"fas fa-user-check\" style=\"font-size:10px\"><\/i> '+assignee.name+'<\/span>':'')+\r\n '<span style=\"font-size:11px;color:var(--text3);margin-right:auto\">'+fmtDate(t.createdAt)+'<\/span>'+\r\n (t.comments&&t.comments.length?'<span style=\"font-size:11px;color:var(--accent)\"><i class=\"fas fa-comment\"><\/i> '+t.comments.length+'<\/span>':'')+\r\n '<\/div><\/div><\/div><\/div>';\r\n }).join('');\r\n}\r\n\r\nfunction openNewTicketModal(){\r\n openModal('<div class=\"m-head\"><h3>Submit New Ticket<\/h3><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\"><div class=\"fg\"><label>Title *<\/label><input class=\"fc\" id=\"tk-title\" placeholder=\"Brief description of the issue\"><\/div>'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>Category<\/label><select class=\"fc\" id=\"tk-cat\">'+Object.entries(TICKET_CATEGORIES).map(function(e){return '<option value=\"'+e[0]+'\">'+e[1]+'<\/option>';}).join('')+'<\/select><\/div>'+\r\n '<div class=\"fg\"><label>Priority<\/label><select class=\"fc\" id=\"tk-pri\"><option value=\"low\">Low<\/option><option value=\"medium\" selected>Medium<\/option><option value=\"high\">High<\/option><option value=\"critical\">Critical<\/option><\/select><\/div><\/div>'+\r\n '<div class=\"fg\"><label>Device (optional)<\/label><select class=\"fc\" id=\"tk-dev\"><option value=\"\">Not related to a specific device<\/option>'+getUserDevs(currentUser.id).map(function(d){return '<option value=\"'+d.id+'\">'+d.name+' ('+d.serial+')<\/option>';}).join('')+'<\/select><\/div>'+\r\n '<div class=\"fg\"><label>Description *<\/label><textarea class=\"fc\" id=\"tk-desc\" style=\"min-height:100px\" placeholder=\"Please describe the issue in detail...\"><\/textarea><\/div><\/div>'+\r\n '<div class=\"m-footer\"><button class=\"btn btn-primary\" onclick=\"submitTicket()\"><i class=\"fas fa-paper-plane\"><\/i> Submit Ticket<\/button><button class=\"btn btn-ghost\" onclick=\"closeModal()\">Cancel<\/button><\/div>');\r\n}\r\n\r\nfunction submitTicket(){\r\n var title=v('tk-title').trim();\r\n var desc=v('tk-desc').trim();\r\n if(!title){toast('Title is required','error');return;}\r\n if(!desc){toast('Description is required','error');return;}\r\n var t={id:uid(),userId:currentUser.id,title:title,description:desc,category:v('tk-cat'),priority:v('tk-pri'),deviceId:v('tk-dev')||null,status:'open',createdAt:new Date().toISOString(),updatedAt:new Date().toISOString(),assignedTo:null,comments:[]};\r\n tickets.push(t);\r\n addLog('New ticket submitted: '+title,'fa-ticket','info');\r\n save();closeModal();updateTicketsBadge();renderTickets();\r\n toast('Ticket submitted successfully!','success');\r\n}\r\n\r\nfunction openTicketDetail(idx){\r\n var t=tickets[idx];if(!t)return;\r\n var isAdmin=currentUser&¤tUser.role==='admin';\r\n var owner=getUser(t.userId);\r\n var assignee=t.assignedTo?getUser(t.assignedTo):null;\r\n var dev=t.deviceId?getDev(t.deviceId):null;\r\n if(isAdmin&&t.comments){t.comments.forEach(function(cc){if(!cc.byAdmin)cc.readByAdmin=true;});save();updateTicketsBadge();}\r\n var statusOpts=Object.entries(TICKET_STATUSES).map(function(e){return '<option value=\"'+e[0]+'\" '+(t.status===e[0]?'selected':'')+'>'+e[1]+'<\/option>';}).join('');\r\n var assignOpts='<option value=\"\">Unassigned<\/option>'+users.filter(function(u){return u.status==='active';}).map(function(u){return '<option value=\"'+u.id+'\" '+(t.assignedTo===u.id?'selected':'')+'>'+u.name+'<\/option>';}).join('');\r\n openModal('<div class=\"m-head\"><div><div style=\"font-size:11px;color:var(--text3);font-family:var(--mono);margin-bottom:2px\">'+ticketId(idx)+'<\/div><h3 style=\"font-size:15px\">'+t.title+'<\/h3><\/div><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\">'+\r\n '<div style=\"display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px\"><span class=\"badge '+(STATUS_BADGE[t.status]||'')+'\"><span class=\"b-dot\"><\/span>'+(TICKET_STATUSES[t.status]||t.status)+'<\/span><span style=\"display:flex;align-items:center;gap:5px\" class=\"badge b-info\"><span class=\"priority-dot p-'+t.priority+'\"><\/span>'+(TICKET_PRIORITIES[t.priority])+'<\/span><span class=\"badge b-info\">'+(TICKET_CATEGORIES[t.category]||t.category)+'<\/span><\/div>'+\r\n (isAdmin?'<div class=\"f2\" style=\"margin-bottom:16px\"><div class=\"fg\"><label>Status<\/label><select class=\"fc\" id=\"td-status\" onchange=\"updateTicketStatus('+idx+')\">'+statusOpts+'<\/select><\/div><div class=\"fg\"><label>Assign To<\/label><select class=\"fc\" id=\"td-assign\" onchange=\"updateTicketAssign('+idx+')\">'+assignOpts+'<\/select><\/div><\/div>':'')+\r\n '<div class=\"d-grid\" style=\"margin-bottom:16px\"><div class=\"d-item\"><div class=\"d-lbl\">Submitted By<\/div><div class=\"d-val\">'+(owner?owner.name:'Unknown')+'<\/div><\/div><div class=\"d-item\"><div class=\"d-lbl\">Date<\/div><div class=\"d-val\">'+fmtDate(t.createdAt)+'<\/div><\/div>'+(dev?'<div class=\"d-item\"><div class=\"d-lbl\">Related Device<\/div><div class=\"d-val\">'+dev.name+'<\/div><\/div>':'')+(assignee?'<div class=\"d-item\"><div class=\"d-lbl\">Assigned To<\/div><div class=\"d-val\">'+assignee.name+'<\/div><\/div>':'')+'<\/div>'+\r\n '<div style=\"background:var(--bg3);border-radius:10px;padding:14px;margin-bottom:18px;font-size:13px;color:var(--text2);line-height:1.7\">'+t.description+'<\/div>'+\r\n '<div style=\"font-size:13px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px\"><i class=\"fas fa-comments\" style=\"color:var(--accent)\"><\/i>Comments & Updates<\/div>'+\r\n '<div id=\"tkt-comments\">'+buildCommentsHTML(t)+'<\/div>'+\r\n (t.status==='closed'?'<div style=\"text-align:center;padding:12px;background:var(--bg3);border-radius:9px;font-size:13px;color:var(--text3)\"><i class=\"fas fa-lock\"><\/i> This ticket is closed<\/div>':\r\n '<div class=\"reply-box\"><textarea id=\"tkt-reply\" placeholder=\"'+(isAdmin?'Write a response to the user...':'Add a comment or update...')+'\"><\/textarea><button class=\"btn btn-primary btn-sm\" onclick=\"addTicketComment('+idx+')\"><i class=\"fas fa-paper-plane\"><\/i><\/button><\/div>')+\r\n '<\/div>'+\r\n '<div class=\"m-footer\">'+(!isAdmin&&t.status!=='closed'?'<button class=\"btn btn-ghost btn-sm\" onclick=\"closeTicketByUser('+idx+')\"><i class=\"fas fa-check\"><\/i> Mark as Resolved<\/button>':'')+\r\n '<button class=\"btn btn-ghost\" onclick=\"closeModal()\">Close<\/button><\/div>','modal-lg');\r\n}\r\n\r\nfunction buildCommentsHTML(t){\r\n if(!t.comments||!t.comments.length)return '<div style=\"text-align:center;padding:16px;color:var(--text3);font-size:13px\">No comments yet<\/div>';\r\n return t.comments.map(function(cm){\r\n return '<div class=\"comment-box\" style=\"'+(cm.byAdmin?'border-right:3px solid var(--accent)':'border-right:3px solid var(--border2)')+'\">'+\r\n '<div class=\"comment-author\" style=\"color:'+(cm.byAdmin?'var(--accent)':'var(--text)')+'\">'+\r\n (cm.byAdmin?'<i class=\"fas fa-shield-halved\" style=\"font-size:10px;margin-left:4px\"><\/i>Support Team':'<i class=\"fas fa-user\" style=\"font-size:10px;margin-left:4px\"><\/i>'+cm.authorName)+'<\/div>'+\r\n '<div class=\"comment-text\">'+cm.text+'<\/div><div class=\"comment-time\">'+new Date(cm.time).toLocaleString('en-GB')+'<\/div><\/div>';\r\n }).join('');\r\n}\r\n\r\nfunction updateTicketStatus(idx){\r\n var t=tickets[idx];var newStatus=v('td-status');if(!t||!newStatus)return;\r\n t.status=newStatus;t.updatedAt=new Date().toISOString();\r\n addLog('Ticket '+ticketId(idx)+' status \u2192 '+(TICKET_STATUSES[newStatus]||newStatus),'fa-ticket','info');\r\n save();updateTicketsBadge();toast('Status updated to '+(TICKET_STATUSES[newStatus]||newStatus),'success');\r\n}\r\n\r\nfunction updateTicketAssign(idx){\r\n var t=tickets[idx];var uid2=v('td-assign');if(!t)return;\r\n t.assignedTo=uid2||null;t.updatedAt=new Date().toISOString();\r\n var u=uid2?getUser(uid2):null;\r\n if(u){t.comments=t.comments||[];t.comments.push({id:uid(),byAdmin:true,authorName:'System',text:'Ticket assigned to '+u.name,time:new Date().toISOString()});}\r\n save();refreshTicketComments(idx);\r\n toast(u?'Assigned to '+u.name:'Assignment removed','success');\r\n}\r\n\r\nfunction addTicketComment(idx){\r\n var t=tickets[idx];\r\n var replyEl=document.getElementById('tkt-reply');\r\n var text=replyEl?replyEl.value.trim():'';\r\n if(!text){toast('Please write a comment','error');return;}\r\n var isAdmin=currentUser&¤tUser.role==='admin';\r\n t.comments=t.comments||[];\r\n t.comments.push({id:uid(),byAdmin:isAdmin,authorName:currentUser.name||currentUser.display,text:text,time:new Date().toISOString(),readByAdmin:isAdmin});\r\n t.updatedAt=new Date().toISOString();\r\n if(isAdmin&&t.status==='open'){t.status='in_progress';var sel=document.getElementById('td-status');if(sel)sel.value='in_progress';}\r\n save();updateTicketsBadge();refreshTicketComments(idx);\r\n toast('Comment added','success');\r\n}\r\n\r\nfunction refreshTicketComments(idx){\r\n var t=tickets[idx];var el=document.getElementById('tkt-comments');if(!el||!t)return;\r\n el.innerHTML=buildCommentsHTML(t);\r\n var replyInput=document.getElementById('tkt-reply');if(replyInput)replyInput.value='';\r\n}\r\n\r\nfunction closeTicketByUser(idx){\r\n if(!confirm('Mark this ticket as resolved?'))return;\r\n tickets[idx].status='resolved';tickets[idx].updatedAt=new Date().toISOString();\r\n save();closeModal();updateTicketsBadge();renderTickets();\r\n toast('Ticket marked as resolved','success');\r\n}\r\n\r\n\/\/ =================== MY DEVICES ===================\r\nfunction renderMyDevices(){\r\n var c=document.getElementById('content');\r\n var myDevs=getUserDevs(currentUser.id);\r\n var myTickets=tickets.filter(function(t){return t.userId===currentUser.id;});\r\n var openTickets=myTickets.filter(function(t){return t.status==='open'||t.status==='in_progress';});\r\n c.innerHTML=\r\n '<div class=\"page-header\"><div class=\"page-title\">My Devices<\/div><div class=\"page-sub\">Devices assigned to you \u00b7 '+myDevs.length+' device'+(myDevs.length!==1?'s':'')+'<\/div><\/div>'+\r\n (openTickets.length>0?'<div style=\"background:rgba(255,169,64,.1);border:1px solid rgba(255,169,64,.3);border-radius:var(--radius);padding:14px 18px;margin-bottom:20px;display:flex;align-items:center;gap:12px\"><i class=\"fas fa-triangle-exclamation\" style=\"color:var(--warning);font-size:18px\"><\/i><div><div style=\"font-weight:700;font-size:13px\">You have '+openTickets.length+' open ticket'+(openTickets.length>1?'s':'')+'<\/div><div style=\"font-size:12px;color:var(--text2);margin-top:2px\">Our support team is working on your request.<\/div><\/div><button class=\"btn btn-ghost btn-sm\" style=\"margin-right:auto\" onclick=\"go(\\'tickets\\',document.querySelector(\\'.nav-item[data-page="tickets"]\\'))\">View Tickets<\/button><\/div>':'')+\r\n (myDevs.length===0?'<div class=\"empty\"><i class=\"fas fa-laptop-slash\"><\/i><h4>No devices assigned<\/h4><p>Contact IT support if you need a device<\/p><button class=\"btn btn-primary btn-sm\" style=\"margin-top:14px\" onclick=\"openNewTicketModal()\"><i class=\"fas fa-ticket\"><\/i> Open a Ticket<\/button><\/div>':\r\n '<div style=\"display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px\">'+\r\n myDevs.map(function(d){\r\n var ca=getCurAssign(d.id);\r\n var daysUsed=ca?daysBetween(ca.assignDate):0;\r\n var devTickets=myTickets.filter(function(t){return t.deviceId===d.id&&(t.status==='open'||t.status==='in_progress');});\r\n return '<div class=\"card\" style=\"position:relative;overflow:hidden\">'+\r\n '<div style=\"position:absolute;top:0;right:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2))\"><\/div>'+\r\n '<div style=\"display:flex;align-items:center;gap:12px;margin-bottom:16px\"><div class=\"dev-icon '+TC[d.type]+'\" style=\"width:46px;height:46px;font-size:20px\"><i class=\"fas '+TI[d.type]+'\"><\/i><\/div><div style=\"flex:1;min-width:0\"><div style=\"font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis\">'+d.name+'<\/div><div style=\"font-size:11px;color:var(--text3);margin-top:2px\">'+d.brand+' \u00b7 '+d.model+'<\/div><\/div>'+(devTickets.length>0?'<span class=\"badge b-maintenance\" style=\"font-size:10px\"><i class=\"fas fa-ticket\"><\/i> '+devTickets.length+'<\/span>':'')+'<\/div>'+\r\n '<div class=\"d-grid\" style=\"margin-bottom:14px\">'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Serial<\/div><div class=\"d-val mono\" style=\"font-size:11px\">'+(d.serial||'\u2014')+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">IP Address<\/div><div class=\"d-val mono\" style=\"font-size:11px\">'+(d.ip||'\u2014')+'<\/div><\/div>'+\r\n (d.os&&d.os!=='-'?'<div class=\"d-item\"><div class=\"d-lbl\">OS<\/div><div class=\"d-val\" style=\"font-size:12px\">'+d.os+'<\/div><\/div>':'')+\r\n (d.cpu&&d.cpu!=='-'?'<div class=\"d-item\"><div class=\"d-lbl\">CPU<\/div><div class=\"d-val\" style=\"font-size:12px\">'+d.cpu+'<\/div><\/div>':'')+\r\n (d.ram&&d.ram!=='-'?'<div class=\"d-item\"><div class=\"d-lbl\">RAM<\/div><div class=\"d-val\" style=\"font-size:12px\">'+d.ram+'<\/div><\/div>':'')+\r\n (d.storage&&d.storage!=='-'?'<div class=\"d-item\"><div class=\"d-lbl\">Storage<\/div><div class=\"d-val\" style=\"font-size:12px\">'+d.storage+'<\/div><\/div>':'')+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">In Use Since<\/div><div class=\"d-val\" style=\"font-size:12px\">'+fmtDate(ca?ca.assignDate:null)+'<\/div><\/div>'+\r\n '<div class=\"d-item\"><div class=\"d-lbl\">Duration<\/div><div class=\"d-val\" style=\"font-size:12px\">'+daysUsed+' days<\/div><\/div>'+\r\n '<\/div>'+\r\n (d.notes?'<div style=\"background:var(--bg3);border-radius:8px;padding:9px 12px;font-size:12px;color:var(--text2);margin-bottom:12px\">'+d.notes+'<\/div>':'')+\r\n '<button class=\"btn btn-primary btn-sm\" style=\"width:100%\" onclick=\"openNewTicketModalForDevice(\\''+d.id+'\\')\"><i class=\"fas fa-ticket\"><\/i> Report an Issue<\/button><\/div>';\r\n }).join('')+\r\n '<\/div><div style=\"margin-top:20px\"><button class=\"btn btn-ghost btn-sm\" onclick=\"openNewTicketModal()\"><i class=\"fas fa-plus\"><\/i> Open General Ticket<\/button><\/div>');\r\n}\r\n\r\nfunction openNewTicketModalForDevice(deviceId){\r\n var d=getDev(deviceId);\r\n openModal('<div class=\"m-head\"><h3>Report Device Issue<\/h3><div class=\"m-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/div><\/div>'+\r\n '<div class=\"m-body\">'+\r\n '<div style=\"background:rgba(79,124,255,.08);border:1px solid rgba(79,124,255,.2);border-radius:9px;padding:12px 14px;margin-bottom:16px;display:flex;align-items:center;gap:10px\"><div class=\"dev-icon '+TC[d.type]+'\" style=\"width:34px;height:34px;font-size:14px\"><i class=\"fas '+TI[d.type]+'\"><\/i><\/div><div><div style=\"font-weight:600;font-size:13px\">'+d.name+'<\/div><div style=\"font-size:11px;color:var(--text3)\">'+d.serial+'<\/div><\/div><\/div>'+\r\n '<div class=\"fg\"><label>Issue Title *<\/label><input class=\"fc\" id=\"tk-title\" placeholder=\"e.g. Laptop won\\'t turn on...\"><\/div>'+\r\n '<div class=\"f2\"><div class=\"fg\"><label>Category<\/label><select class=\"fc\" id=\"tk-cat\"><option value=\"hardware\" selected>Hardware<\/option><option value=\"software\">Software<\/option><option value=\"network\">Network<\/option><option value=\"other\">Other<\/option><\/select><\/div>'+\r\n '<div class=\"fg\"><label>Priority<\/label><select class=\"fc\" id=\"tk-pri\"><option value=\"low\">Low \u2014 Not urgent<\/option><option value=\"medium\" selected>Medium \u2014 Affecting work<\/option><option value=\"high\">High \u2014 Blocking work<\/option><option value=\"critical\">Critical \u2014 Complete failure<\/option><\/select><\/div><\/div>'+\r\n '<div class=\"fg\"><label>Description *<\/label><textarea class=\"fc\" id=\"tk-desc\" style=\"min-height:110px\" placeholder=\"Please describe the issue in detail...\"><\/textarea><\/div><\/div>'+\r\n '<div class=\"m-footer\"><button class=\"btn btn-primary\" onclick=\"submitTicketForDevice(\\''+deviceId+'\\')\"><i class=\"fas fa-paper-plane\"><\/i> Submit Ticket<\/button><button class=\"btn btn-ghost\" onclick=\"closeModal()\">Cancel<\/button><\/div>');\r\n}\r\n\r\nfunction submitTicketForDevice(deviceId){\r\n var title=v('tk-title').trim();\r\n var desc=v('tk-desc').trim();\r\n if(!title){toast('Title is required','error');return;}\r\n if(!desc){toast('Please describe the issue','error');return;}\r\n var t={id:uid(),userId:currentUser.id,title:title,description:desc,category:v('tk-cat'),priority:v('tk-pri'),deviceId:deviceId,status:'open',createdAt:new Date().toISOString(),updatedAt:new Date().toISOString(),assignedTo:null,comments:[]};\r\n tickets.push(t);\r\n addLog('Ticket submitted for device: '+(getDev(deviceId)?getDev(deviceId).name:''),'fa-ticket','info');\r\n save();closeModal();updateTicketsBadge();\r\n go('tickets',document.querySelector('.nav-item[data-page=\"tickets\"]'));\r\n toast('Ticket submitted! Support team will respond soon.','success');\r\n}\r\n\r\n\/\/ =================== GLOBAL SEARCH ===================\r\nfunction globalSearch(){\r\n var q=document.getElementById('global-search').value.trim();\r\n if(!q)return;\r\n dQ=q;uQ=q;\r\n if(curPage==='devices')renderDevTable();\r\n else if(curPage==='users')renderUsrTable();\r\n else{go('devices',document.querySelector('[data-page=\"devices\"]'));setTimeout(function(){dQ=q;renderDevTable();},100);}\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\nHTMLEOF\r\necho \"File written: $(wc -c < \/mnt\/user-data\/outputs\/jidaar_fixed.html) bytes\"\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>bash cat > \/mnt\/user-data\/outputs\/jidaar_fixed.html<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-146","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jidaar.com\/index.php\/wp-json\/wp\/v2\/pages\/146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jidaar.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.jidaar.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.jidaar.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jidaar.com\/index.php\/wp-json\/wp\/v2\/comments?post=146"}],"version-history":[{"count":26,"href":"https:\/\/www.jidaar.com\/index.php\/wp-json\/wp\/v2\/pages\/146\/revisions"}],"predecessor-version":[{"id":13133,"href":"https:\/\/www.jidaar.com\/index.php\/wp-json\/wp\/v2\/pages\/146\/revisions\/13133"}],"wp:attachment":[{"href":"https:\/\/www.jidaar.com\/index.php\/wp-json\/wp\/v2\/media?parent=146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}