|
|
|
|
@ -1,654 +0,0 @@
|
|
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<script src="./vendor/react.js"></script>
|
|
|
|
|
<script src="./vendor/react-dom.js"></script>
|
|
|
|
|
<script src="./support.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<x-dc>
|
|
|
|
|
<helmet>
|
|
|
|
|
<style>
|
|
|
|
|
:root{
|
|
|
|
|
--bg:#03171d; --bg-elev:#071e26; --bg-sunken:#0c2933; --border:#1b404b; --border-strong:#315764;
|
|
|
|
|
--text:#edf7fa; --text-2:#b6ced7; --text-3:#9ebbc6;
|
|
|
|
|
--primary:#ccfa70; --primary-fg:#14210b; --primary-soft:#ccfa7012;
|
|
|
|
|
--success:#25e9a5; --success-soft:rgba(37,233,165,.12);
|
|
|
|
|
--warning:#ffd16e; --warning-soft:rgba(255,209,110,.14);
|
|
|
|
|
--danger:#ff7c86; --danger-soft:rgba(255,124,134,.14);
|
|
|
|
|
--info:#82bcff; --info-soft:rgba(130,188,255,.14);
|
|
|
|
|
--purple:#b6a6ff; --purple-soft:rgba(182,166,255,.14);
|
|
|
|
|
--teal:#25e9a5; --teal-soft:rgba(37,233,165,.12);
|
|
|
|
|
}
|
|
|
|
|
*{box-sizing:border-box;}
|
|
|
|
|
a{color:inherit;text-decoration:none;}
|
|
|
|
|
a:hover{color:var(--text);}
|
|
|
|
|
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
|
|
|
|
|
input,textarea,select{font:inherit;color:inherit;}
|
|
|
|
|
body{margin:0;font-family:'Neue Montreal','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;color-scheme:dark;}
|
|
|
|
|
.page-shell{min-height:100%;background:radial-gradient(ellipse at 50% 0,rgba(11,41,48,.3),transparent 58%) var(--bg);}
|
|
|
|
|
|
|
|
|
|
/* ---------- icons ---------- */
|
|
|
|
|
.icon{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
|
|
|
|
|
.icon-14{width:14px;height:14px;} .icon-15{width:15px;height:15px;} .icon-16{width:16px;height:16px;}
|
|
|
|
|
.icon-17{width:17px;height:17px;} .icon-18{width:18px;height:18px;} .icon-20{width:20px;height:20px;} .icon-22{width:22px;height:22px;}
|
|
|
|
|
|
|
|
|
|
/* ---------- topbar ---------- */
|
|
|
|
|
.topbar{display:flex;align-items:center;gap:22px;min-height:67px;padding:12px 42px;background:#03181e;border-bottom:1px solid var(--border);}
|
|
|
|
|
.candidate-brand{display:flex;align-items:center;gap:13px;min-width:230px;}
|
|
|
|
|
.brand-mark{width:36px;height:36px;fill:#25e9a5;}
|
|
|
|
|
.candidate-brand strong{display:block;font-size:18px;line-height:1.25;letter-spacing:-.4px;}
|
|
|
|
|
.candidate-brand small{display:block;color:var(--text-3);font-size:12px;margin-top:3px;}
|
|
|
|
|
.menu-toggle{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:var(--text-2);}
|
|
|
|
|
.menu-toggle:hover{background:var(--bg-sunken);}
|
|
|
|
|
.topbar-search{position:relative;flex:1;max-width:520px;}
|
|
|
|
|
.topbar-search input{width:100%;height:38px;padding:0 14px 0 38px;border-radius:8px;background:#0c2832;border:1px solid var(--border);color:var(--text);font-size:13px;}
|
|
|
|
|
.topbar-search input::placeholder{color:var(--text-3);}
|
|
|
|
|
.search-icn{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-3);}
|
|
|
|
|
.topbar-actions{display:flex;align-items:center;gap:12px;margin-left:auto;}
|
|
|
|
|
.icon-btn{position:relative;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:var(--text-2);}
|
|
|
|
|
.icon-btn:hover{background:var(--bg-sunken);color:var(--text);}
|
|
|
|
|
.dot-red{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--danger);border:2px solid #03181e;}
|
|
|
|
|
.topbar-divider{width:1px;height:24px;background:var(--border);}
|
|
|
|
|
.profile-btn{display:flex;align-items:center;gap:10px;padding:5px 8px 5px 5px;border-radius:30px;}
|
|
|
|
|
.profile-btn:hover{background:var(--bg-sunken);}
|
|
|
|
|
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:13px;color:#071720;flex-shrink:0;}
|
|
|
|
|
.avatar-grad{background:#a19df5;}
|
|
|
|
|
.profile-meta{display:flex;flex-direction:column;line-height:1.2;text-align:left;}
|
|
|
|
|
.profile-name{font-weight:600;font-size:13px;}
|
|
|
|
|
.profile-role{font-size:11.5px;color:var(--text-3);}
|
|
|
|
|
.chev{color:var(--text-3);}
|
|
|
|
|
|
|
|
|
|
/* ---------- page shell ---------- */
|
|
|
|
|
.content{padding:0 42px 40px;}
|
|
|
|
|
.cand-page{max-width:1740px;margin-inline:auto;font-size:13px;}
|
|
|
|
|
.cand-page-bar{display:flex;align-items:center;gap:16px;min-height:58px;padding-block:16px;}
|
|
|
|
|
.cand-page-crumb{font-size:12px;color:var(--text-3);flex:1;}
|
|
|
|
|
.cand-page-crumb strong{color:var(--text);}
|
|
|
|
|
.cand-page-crumb span{margin:0 8px;}
|
|
|
|
|
|
|
|
|
|
/* ---------- buttons / badges ---------- */
|
|
|
|
|
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:7px 12px;border-radius:7px;font-weight:500;font-size:12px;white-space:nowrap;border:1px solid transparent;transition:.15s;}
|
|
|
|
|
.btn-secondary{border:1px solid var(--border);color:var(--text);background:linear-gradient(120deg,#0c2730,#071e26);}
|
|
|
|
|
.btn-secondary:hover{background:#13333d;border-color:#39606b;}
|
|
|
|
|
.btn-primary{color:var(--primary-fg);border:1px solid #c5ed6e;background:linear-gradient(105deg,#d3fd80,#c9f86b);font-weight:650;}
|
|
|
|
|
.btn-primary:hover{background:#dcff9b;}
|
|
|
|
|
.btn-sm{min-height:30px;padding:5px 8px;}
|
|
|
|
|
.btn:disabled{cursor:not-allowed;opacity:.45;}
|
|
|
|
|
.cw-danger{border:1px solid #ae4a55;color:#ff7c86;background:#2a172055;}
|
|
|
|
|
.cw-danger:hover:not(:disabled){background:#50232b;}
|
|
|
|
|
.star-btn.on{color:var(--primary);border-color:#788e49;}
|
|
|
|
|
|
|
|
|
|
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;}
|
|
|
|
|
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
|
|
|
|
|
.st-blue{color:var(--info);background:var(--info-soft);}
|
|
|
|
|
.st-purple{color:var(--purple);background:var(--purple-soft);}
|
|
|
|
|
.st-amber{color:var(--warning);background:var(--warning-soft);}
|
|
|
|
|
.st-indigo{color:var(--primary);background:var(--primary-soft);}
|
|
|
|
|
.st-teal{color:var(--teal);background:var(--teal-soft);}
|
|
|
|
|
.st-green{color:var(--success);background:var(--success-soft);}
|
|
|
|
|
.st-red{color:var(--danger);background:var(--danger-soft);}
|
|
|
|
|
.st-gray{color:var(--text-2);background:var(--bg-sunken);}
|
|
|
|
|
|
|
|
|
|
/* ---------- hero ---------- */
|
|
|
|
|
.cw-hero{display:flex;gap:24px;padding:22px 24px 20px;border:1px solid var(--border);border-radius:13px;background:linear-gradient(110deg,#09252e,#061d25 70%,#09252c);}
|
|
|
|
|
.cw-avatar{width:78px;height:78px;font-size:28px;flex-shrink:0;}
|
|
|
|
|
.cw-hero-body,.cw-identity{flex:1;min-width:0;}
|
|
|
|
|
.cw-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;}
|
|
|
|
|
.cw-name{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px;}
|
|
|
|
|
.cw-name h1{margin:0;font-size:28px;line-height:1.2;letter-spacing:-.7px;font-weight:650;}
|
|
|
|
|
.cw-contact{display:flex;flex-wrap:wrap;gap:9px 22px;color:var(--text-3);font-size:12px;}
|
|
|
|
|
.cw-contact>*{display:inline-flex;align-items:center;gap:8px;}
|
|
|
|
|
.cw-external{color:#9dd3f1 !important;text-decoration:underline;text-underline-offset:3px;}
|
|
|
|
|
.cw-hero-actions{display:flex;gap:10px;flex-shrink:0;}
|
|
|
|
|
.cw-facts{display:grid;grid-template-columns:1.1fr 1fr .9fr 1.2fr .8fr 1.1fr .8fr;margin-top:22px;}
|
|
|
|
|
.cw-fact{display:flex;align-items:center;gap:12px;min-width:0;padding:0 16px;border-left:1px solid var(--border);}
|
|
|
|
|
.cw-fact:first-child{border-left:0;padding-left:0;}
|
|
|
|
|
.cw-fact:last-child{padding-right:0;}
|
|
|
|
|
.cw-fact>svg{color:#c3dce4;}
|
|
|
|
|
.cw-fact span{display:block;color:var(--text-3);font-size:12px;margin-bottom:4px;}
|
|
|
|
|
.cw-fact strong{font-size:13px;font-weight:500;}
|
|
|
|
|
|
|
|
|
|
/* ---------- tabs ---------- */
|
|
|
|
|
.cw-tabs{margin-top:16px;}
|
|
|
|
|
.tabs{display:flex;gap:10px;border-bottom:1px solid var(--border);overflow-x:auto;}
|
|
|
|
|
.tab{display:inline-flex;align-items:center;gap:8px;min-height:55px;padding:12px 20px;font-size:13px;font-weight:400;color:var(--text-2);border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap;}
|
|
|
|
|
.tab:hover{color:var(--text);}
|
|
|
|
|
.tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600;}
|
|
|
|
|
.tab-count{background:#153941;color:#cbdee4;font-size:11px;min-width:18px;text-align:center;padding:1px 6px;border-radius:20px;}
|
|
|
|
|
.tab.active .tab-count{background:var(--primary-soft);color:var(--primary);}
|
|
|
|
|
|
|
|
|
|
/* ---------- overview grid ---------- */
|
|
|
|
|
.cw-overview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr) minmax(0,.99fr);gap:16px;align-items:start;margin-top:16px;}
|
|
|
|
|
.cw-column{display:flex;flex-direction:column;gap:14px;min-width:0;}
|
|
|
|
|
.cw-card{min-width:0;padding:18px 17px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(120deg,#09232c,#061e26 90%);}
|
|
|
|
|
.cw-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;}
|
|
|
|
|
.cw-card-head h2{font-size:15px;font-weight:650;letter-spacing:-.2px;margin:0;}
|
|
|
|
|
.cw-link{display:inline-flex;align-items:center;gap:6px;color:#b4ed91;text-decoration:underline;text-underline-offset:3px;font-size:12px;}
|
|
|
|
|
.cw-info{display:grid;gap:15px;margin:0;}
|
|
|
|
|
.cw-info>div{display:grid;grid-template-columns:minmax(115px,.9fr) minmax(0,1.4fr);gap:12px;line-height:1.4;font-size:12px;}
|
|
|
|
|
.cw-info dt{display:flex;align-items:flex-start;gap:10px;color:var(--text-3);margin:0;}
|
|
|
|
|
.cw-info dd{margin:0;}
|
|
|
|
|
.cw-skills{display:flex;gap:8px;flex-wrap:wrap;}
|
|
|
|
|
.cw-skills>span{padding:6px 10px;border:1px solid #284b57;border-radius:12px;background:#102d38;color:#e0edf3;font-size:12px;}
|
|
|
|
|
.cw-table-wrap{overflow:auto;}
|
|
|
|
|
.cw-applications{width:100%;border-collapse:collapse;font-size:12px;text-align:left;}
|
|
|
|
|
.cw-applications th{color:#bad1dc;text-transform:uppercase;letter-spacing:.4px;font-size:11px;font-weight:500;border-top:1px solid #15343d;border-bottom:1px solid #15343d;padding:9px 6px;white-space:nowrap;}
|
|
|
|
|
.cw-applications td{padding:13px 6px;border-bottom:1px solid #15343d;}
|
|
|
|
|
.cw-applications td:first-child,.cw-applications th:first-child{padding-left:0;}
|
|
|
|
|
.cw-applications td:last-child,.cw-applications th:last-child{padding-right:0;}
|
|
|
|
|
.cw-applications tr:last-child td{border-bottom:0;}
|
|
|
|
|
.cw-applications td:nth-child(2){color:var(--text-2);white-space:nowrap;}
|
|
|
|
|
.cw-applications strong{display:block;font-size:13px;font-weight:550;}
|
|
|
|
|
.cw-applications small{display:block;color:var(--text-3);font-size:11px;margin-top:4px;}
|
|
|
|
|
.cw-applications .badge{font-size:11px;padding:3px 7px;}
|
|
|
|
|
.cw-applications .is-current{background:linear-gradient(90deg,rgba(18,53,52,.22),transparent);}
|
|
|
|
|
.cw-summary{margin:0;color:var(--text-2);font-size:13px;line-height:1.8;}
|
|
|
|
|
.cw-empty{color:var(--text-3);font-size:13px;line-height:1.7;margin:0;}
|
|
|
|
|
.cw-document{display:flex;align-items:center;gap:11px;padding:10px;border:1px solid var(--border);border-radius:8px;background:linear-gradient(100deg,#0d2c36,#0a232b);}
|
|
|
|
|
.cw-document-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:29px;height:36px;background:linear-gradient(135deg,#ff7575,#df424d);border-radius:4px;color:#fff;flex-shrink:0;}
|
|
|
|
|
.cw-document-icon small{font-size:7px;margin-top:2px;}
|
|
|
|
|
.cw-document-name{flex:1;min-width:0;}
|
|
|
|
|
.cw-document-name strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:500;}
|
|
|
|
|
.cw-document-name small{display:block;color:var(--text-3);font-size:11px;margin-top:4px;}
|
|
|
|
|
.cw-document-actions{display:flex;gap:6px;flex-shrink:0;}
|
|
|
|
|
.cw-document-list{display:grid;gap:9px;}
|
|
|
|
|
.cw-bottom-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;}
|
|
|
|
|
.cw-bottom-grid .cw-card{padding:17px;}
|
|
|
|
|
.cw-rating{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
|
|
|
|
|
.cw-rating>span{font-size:12px;color:var(--primary);}
|
|
|
|
|
.rating-stars{display:inline-flex;gap:3px;}
|
|
|
|
|
.rating-stars .rs{color:var(--border-strong);}
|
|
|
|
|
.rating-stars .rs svg{width:18px;height:18px;}
|
|
|
|
|
.rating-stars .rs.on{color:var(--warning);}
|
|
|
|
|
.rating-stars .rs.on svg{fill:currentColor;}
|
|
|
|
|
.cw-recruiter{display:flex;align-items:center;gap:10px;}
|
|
|
|
|
.cw-recruiter .avatar{width:32px;height:32px;font-size:12px;}
|
|
|
|
|
.cw-recruiter strong{display:block;font-size:12px;font-weight:500;}
|
|
|
|
|
.cw-recruiter small{display:block;color:var(--text-3);font-size:12px;margin-top:3px;}
|
|
|
|
|
.cw-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
|
|
|
|
|
.cw-action-grid .btn{font-size:12px;justify-content:flex-start;padding:8px;white-space:normal;text-align:left;}
|
|
|
|
|
.cw-active-application{font-size:12px;color:var(--text-3);margin:-4px 0 12px;}
|
|
|
|
|
.cw-status-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:10px;}
|
|
|
|
|
.cw-field-label{display:block;color:var(--text-3);font-size:12px;margin-bottom:5px;}
|
|
|
|
|
.cw-status-grid select,.cw-status-value{width:100%;min-height:37px;padding:8px 10px;background:#0c2933;color:var(--text);border:1px solid var(--border);border-radius:7px;font-size:12px;}
|
|
|
|
|
.cw-status-grid select{appearance:none;}
|
|
|
|
|
.cw-status-value{display:flex;align-items:center;gap:8px;}
|
|
|
|
|
.cw-status-dot{width:7px;height:7px;background:var(--success);border-radius:50%;flex-shrink:0;}
|
|
|
|
|
.cw-status-dot.is-closed{background:var(--text-3);}
|
|
|
|
|
.cw-activity{list-style:none;margin:0;padding:0;}
|
|
|
|
|
.cw-activity li{position:relative;padding:0 0 23px 24px;}
|
|
|
|
|
.cw-activity li:last-child{padding-bottom:0;}
|
|
|
|
|
.cw-activity li::before{content:'';position:absolute;left:0;top:4px;width:10px;height:10px;background:#59a8ff;border:2px solid #245788;border-radius:50%;}
|
|
|
|
|
.cw-activity li:not(:last-child)::after{content:'';position:absolute;width:1px;left:4px;top:15px;bottom:3px;background:#315662;}
|
|
|
|
|
.cw-activity-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
|
|
|
|
|
.cw-activity strong{font-size:12px;font-weight:550;}
|
|
|
|
|
.cw-activity time{color:var(--text-3);font-size:11px;white-space:nowrap;}
|
|
|
|
|
.cw-activity p{color:var(--text-3);font-size:12px;line-height:1.65;margin:5px 0 0;}
|
|
|
|
|
.cw-activity small{color:var(--text-3);font-size:11px;}
|
|
|
|
|
.cw-screening{display:flex;align-items:center;gap:18px;}
|
|
|
|
|
.cw-match{display:grid;justify-items:center;gap:6px;flex-shrink:0;}
|
|
|
|
|
.cw-match small{color:var(--text-3);font-size:12px;}
|
|
|
|
|
.score-ring{--pct:0;position:relative;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--sc-color) calc(var(--pct)*1%),var(--bg-sunken) 0);}
|
|
|
|
|
.score-ring::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--bg-elev);}
|
|
|
|
|
.score-ring span{position:relative;z-index:1;font-size:10px;font-weight:700;}
|
|
|
|
|
.cw-tab-content{padding:22px;background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;margin-top:16px;}
|
|
|
|
|
.cw-muted{color:var(--text-3);}
|
|
|
|
|
|
|
|
|
|
/* ---------- secondary-tab content (lighter fidelity, same tokens) ---------- */
|
|
|
|
|
.simple-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border);}
|
|
|
|
|
.simple-row:first-child{border-top:0;padding-top:0;}
|
|
|
|
|
.simple-row-icn{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--bg-sunken);color:var(--info);}
|
|
|
|
|
.simple-row-main{flex:1;min-width:0;}
|
|
|
|
|
.simple-row-title{font-size:13px;font-weight:600;}
|
|
|
|
|
.simple-row-sub{font-size:12px;color:var(--text-3);margin-top:3px;}
|
|
|
|
|
.note-compose textarea{width:100%;min-height:64px;padding:10px 12px;background:#0c2933;border:1px solid var(--border);border-radius:8px;color:var(--text);font:inherit;resize:vertical;margin-bottom:10px;}
|
|
|
|
|
.note-compose textarea::placeholder{color:var(--text-3);}
|
|
|
|
|
.section-label{font-size:12px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-bottom:12px;}
|
|
|
|
|
</style>
|
|
|
|
|
</helmet>
|
|
|
|
|
|
|
|
|
|
<div class="page-shell">
|
|
|
|
|
|
|
|
|
|
<header class="topbar">
|
|
|
|
|
<a class="candidate-brand" href="#">
|
|
|
|
|
<svg class="brand-mark" viewBox="0 0 100 64.46" aria-hidden="true"><path d="M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z"/></svg>
|
|
|
|
|
<span><strong>Utopia Brands</strong><small>HR Portal</small></span>
|
|
|
|
|
</a>
|
|
|
|
|
<button class="menu-toggle" aria-label="Toggle menu">
|
|
|
|
|
<svg class="icon icon-20" viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
|
|
|
|
</button>
|
|
|
|
|
<div class="topbar-search">
|
|
|
|
|
<svg class="icon icon-16 search-icn" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|
|
|
|
<input type="text" placeholder="Search candidates, jobs, requisitions…" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="topbar-actions">
|
|
|
|
|
<button class="icon-btn" aria-label="Notifications">
|
|
|
|
|
<svg class="icon icon-20" viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
|
|
|
|
<span class="dot-red"></span>
|
|
|
|
|
</button>
|
|
|
|
|
<div class="topbar-divider"></div>
|
|
|
|
|
<button class="profile-btn">
|
|
|
|
|
<span class="avatar avatar-grad">MK</span>
|
|
|
|
|
<span class="profile-meta"><span class="profile-name">Meera Khan</span><span class="profile-role">Recruiter</span></span>
|
|
|
|
|
<svg class="icon icon-16 chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<main class="content">
|
|
|
|
|
<div class="cand-page">
|
|
|
|
|
|
|
|
|
|
<div class="cand-page-bar">
|
|
|
|
|
<button class="btn btn-secondary btn-sm"><svg class="icon icon-16" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>Back</button>
|
|
|
|
|
<div class="cand-page-crumb">Candidates <span>/</span> <strong>Ada Lovelace</strong></div>
|
|
|
|
|
<div class="cand-page-actions">
|
|
|
|
|
<button class="btn btn-secondary star-btn {{favClass}}" onClick="{{favoriteToggle}}">
|
|
|
|
|
<svg class="icon icon-16" viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>{{favLabel}}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- ============ HERO ============ -->
|
|
|
|
|
<header class="cw-hero">
|
|
|
|
|
<span class="avatar cw-avatar" style="background:linear-gradient(145deg,#b2acff,#9395f0)">AL</span>
|
|
|
|
|
<div class="cw-hero-body">
|
|
|
|
|
<div class="cw-hero-top">
|
|
|
|
|
<div class="cw-identity">
|
|
|
|
|
<div class="cw-name">
|
|
|
|
|
<h1>Ada Lovelace</h1>
|
|
|
|
|
<span class="badge {{stageClass}}">{{stage}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cw-contact">
|
|
|
|
|
<a href="mailto:ada.lovelace@example.com"><svg class="icon icon-16" viewBox="0 0 24 24"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>ada.lovelace@example.com</a>
|
|
|
|
|
<a href="tel:+15552147788"><svg class="icon icon-16" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.98.36 1.94.7 2.85a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.87.57 2.85.7A2 2 0 0 1 22 16.92z"/></svg>+1 (555) 214-7788</a>
|
|
|
|
|
<span><svg class="icon icon-16" viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>Austin, TX</span>
|
|
|
|
|
<a class="cw-external" href="#" target="_blank" rel="noopener noreferrer"><svg class="icon icon-16" viewBox="0 0 24 24"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>LinkedIn profile</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cw-hero-actions">
|
|
|
|
|
<button class="btn btn-secondary"><svg class="icon icon-16" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>Download CV</button>
|
|
|
|
|
<button class="btn btn-primary"><svg class="icon icon-16" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>Open Resume</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cw-facts">
|
|
|
|
|
<div class="cw-fact"><svg class="icon icon-20" viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg><div><span>Applied for</span><strong>Senior Backend Engineer</strong></div></div>
|
|
|
|
|
<div class="cw-fact"><svg class="icon icon-20" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg><div><span>Applied on</span><strong>Mar 12, 2026</strong></div></div>
|
|
|
|
|
<div class="cw-fact"><svg class="icon icon-20" viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg><div><span>Source</span><strong>Careers page</strong></div></div>
|
|
|
|
|
<div class="cw-fact"><svg class="icon icon-20" viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg><div><span>Current company</span><strong>Meridian Systems</strong></div></div>
|
|
|
|
|
<div class="cw-fact"><svg class="icon icon-20" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg><div><span>Experience</span><strong>6 years</strong></div></div>
|
|
|
|
|
<div class="cw-fact"><svg class="icon icon-20" viewBox="0 0 24 24"><circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></svg><div><span>Education</span><strong>MSc Computer Science</strong></div></div>
|
|
|
|
|
<div class="cw-fact"><svg class="icon icon-20" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg><div><span>Total applications</span><strong>{{appCount}}</strong></div></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<!-- ============ TABS ============ -->
|
|
|
|
|
<div class="cw-tabs">
|
|
|
|
|
<div class="tabs">
|
|
|
|
|
<sc-for list="{{tabs}}" as="t" hint-placeholder-count="8">
|
|
|
|
|
<button class="{{t.cls}}" onClick="{{t.pick}}">{{t.label}}<sc-if value="{{t.hasCount}}" hint-placeholder-val="{{true}}"><span class="tab-count">{{t.count}}</span></sc-if></button>
|
|
|
|
|
</sc-for>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- ============ OVERVIEW ============ -->
|
|
|
|
|
<sc-if value="{{showOverview}}" hint-placeholder-val="{{true}}">
|
|
|
|
|
<div class="cw-overview">
|
|
|
|
|
|
|
|
|
|
<div class="cw-column">
|
|
|
|
|
<section class="cw-card">
|
|
|
|
|
<div class="cw-card-head"><h2>Candidate Information</h2></div>
|
|
|
|
|
<dl class="cw-info">
|
|
|
|
|
<div><dt><svg class="icon icon-15" viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Full name</dt><dd>Ada Lovelace</dd></div>
|
|
|
|
|
<div><dt><svg class="icon icon-15" viewBox="0 0 24 24"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>Email</dt><dd>ada.lovelace@example.com</dd></div>
|
|
|
|
|
<div><dt><svg class="icon icon-15" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.98.36 1.94.7 2.85a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.87.57 2.85.7A2 2 0 0 1 22 16.92z"/></svg>Phone</dt><dd>+1 (555) 214-7788</dd></div>
|
|
|
|
|
<div><dt><svg class="icon icon-15" viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>Location</dt><dd>Austin, TX</dd></div>
|
|
|
|
|
<div><dt><svg class="icon icon-15" viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Current company</dt><dd>Meridian Systems</dd></div>
|
|
|
|
|
<div><dt><svg class="icon icon-15" viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Current title</dt><dd>Senior Backend Engineer</dd></div>
|
|
|
|
|
<div><dt><svg class="icon icon-15" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Experience</dt><dd>6 years</dd></div>
|
|
|
|
|
<div><dt><svg class="icon icon-15" viewBox="0 0 24 24"><circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></svg>Education</dt><dd>MSc Computer Science — Imperial College London</dd></div>
|
|
|
|
|
<div><dt><svg class="icon icon-15" viewBox="0 0 24 24"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>LinkedIn</dt><dd><a class="cw-external" href="#" target="_blank" rel="noopener noreferrer">View LinkedIn profile</a></dd></div>
|
|
|
|
|
<div><dt><svg class="icon icon-15" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Notice period</dt><dd><sc-if value="{{hasNoticePeriod}}" hint-placeholder-val="{{true}}">{{noticePeriod}}</sc-if><sc-if value="{{noNoticePeriod}}" hint-placeholder-val="{{false}}"><span class="cw-muted">—</span></sc-if></dd></div>
|
|
|
|
|
<div><dt><svg class="icon icon-15" viewBox="0 0 24 24"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>Expected salary</dt><dd><sc-if value="{{hasExpectedSalary}}" hint-placeholder-val="{{true}}">{{expectedSalary}}</sc-if><sc-if value="{{noExpectedSalary}}" hint-placeholder-val="{{false}}"><span class="cw-muted">—</span></sc-if></dd></div>
|
|
|
|
|
</dl>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="cw-card">
|
|
|
|
|
<div class="cw-card-head"><h2>Skills & Tags</h2></div>
|
|
|
|
|
<div class="cw-skills">
|
|
|
|
|
<span>Python</span><span>FastAPI</span><span>PostgreSQL</span><span>Docker</span><span>Kubernetes</span><span>REST APIs</span><span>Kafka</span><span>AWS</span>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="cw-column">
|
|
|
|
|
<section class="cw-card">
|
|
|
|
|
<div class="cw-card-head">
|
|
|
|
|
<h2>Applications ({{appCount}})</h2>
|
|
|
|
|
<sc-if value="{{hasMoreApps}}" hint-placeholder-val="{{true}}">
|
|
|
|
|
<button class="cw-link" onClick="{{toggleApps}}"><svg class="icon icon-15" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>{{appsToggleLabel}}</button>
|
|
|
|
|
</sc-if>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cw-table-wrap">
|
|
|
|
|
<table class="cw-applications">
|
|
|
|
|
<thead><tr><th>Job title</th><th>Applied on</th><th>Status</th><th>Actions</th></tr></thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<sc-for list="{{applications}}" as="a" hint-placeholder-count="3">
|
|
|
|
|
<tr class="{{a.rowCls}}">
|
|
|
|
|
<td><strong>{{a.title}}</strong><small>{{a.sub}}</small></td>
|
|
|
|
|
<td>{{a.when}}</td>
|
|
|
|
|
<td><span class="badge {{a.cls}}">{{a.status}}</span></td>
|
|
|
|
|
<td><sc-if value="{{a.current}}" hint-placeholder-val="{{false}}"><span class="cw-muted">—</span></sc-if><sc-if value="{{a.notCurrent}}" hint-placeholder-val="{{true}}"><button class="btn btn-secondary btn-sm">View</button></sc-if></td>
|
|
|
|
|
</tr>
|
|
|
|
|
</sc-for>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="cw-card">
|
|
|
|
|
<div class="cw-card-head"><h2>Professional Summary</h2></div>
|
|
|
|
|
<p class="cw-summary">Senior backend engineer with 6 years building high-throughput payment and fulfillment services. Led the migration of a monolith to event-driven microservices on Kafka, cutting checkout latency by 40%. Comfortable owning a service from design through on-call.</p>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="cw-card">
|
|
|
|
|
<div class="cw-card-head"><h2>Resume</h2></div>
|
|
|
|
|
<div class="cw-document">
|
|
|
|
|
<span class="cw-document-icon"><svg class="icon icon-16" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg><small>PDF</small></span>
|
|
|
|
|
<div class="cw-document-name"><strong title="Ada_Lovelace_Resume.pdf">Ada_Lovelace_Resume.pdf</strong><small>PDF · Mar 12, 2026</small></div>
|
|
|
|
|
<div class="cw-document-actions">
|
|
|
|
|
<button class="btn btn-secondary btn-sm"><svg class="icon icon-16" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>Preview</button>
|
|
|
|
|
<button class="btn btn-secondary btn-sm"><svg class="icon icon-16" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>Download</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="cw-card">
|
|
|
|
|
<div class="cw-card-head"><h2>Ratings</h2></div>
|
|
|
|
|
<div class="cw-rating" role="radiogroup" aria-label="Candidate rating">
|
|
|
|
|
<div class="rating-stars">
|
|
|
|
|
<sc-for list="{{stars}}" as="star" hint-placeholder-count="5">
|
|
|
|
|
<span class="{{star.cls}}" onClick="{{star.pick}}"><svg class="icon" viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></span>
|
|
|
|
|
</sc-for>
|
|
|
|
|
</div>
|
|
|
|
|
<span>{{ratingText}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="cw-card">
|
|
|
|
|
<div class="cw-card-head"><h2>Recruiter</h2></div>
|
|
|
|
|
<div class="cw-recruiter">
|
|
|
|
|
<span class="avatar" style="background:linear-gradient(145deg,#b2acff,#9395f0)">MK</span>
|
|
|
|
|
<div><strong>Meera Khan</strong><small>Hiring team</small></div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="cw-card">
|
|
|
|
|
<div class="cw-card-head"><h2>AI Screening</h2></div>
|
|
|
|
|
<div class="cw-screening">
|
|
|
|
|
<div class="cw-match">
|
|
|
|
|
<span class="score-ring" style="--pct:82;--sc-color:var(--warning)"><span>82</span></span>
|
|
|
|
|
<small>Strong Match</small>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cw-summary"><p>Meets every mandatory requirement with demonstrated production experience; missing only the Kubernetes depth the role prefers.</p></div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="cw-card">
|
|
|
|
|
<div class="cw-card-head"><h2>Suggested Roles</h2></div>
|
|
|
|
|
<div class="cw-skills"><span>Platform Engineer</span><span>Staff Backend Engineer</span></div>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<aside class="cw-column" aria-label="Candidate actions and activity">
|
|
|
|
|
<section class="cw-card">
|
|
|
|
|
<div class="cw-card-head"><h2>Quick Actions</h2></div>
|
|
|
|
|
<div class="cw-action-grid">
|
|
|
|
|
<button class="btn btn-primary"><svg class="icon icon-16" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Schedule Interview</button>
|
|
|
|
|
<button class="btn btn-secondary" onClick="{{moveNext}}"><svg class="icon icon-16" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>Move to {{nextStageLabel}}</button>
|
|
|
|
|
<button class="btn btn-secondary" onClick="{{goNotes}}"><svg class="icon icon-16" viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>Add Note</button>
|
|
|
|
|
<button class="btn btn-secondary" onClick="{{goForms}}"><svg class="icon icon-16" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>View Forms</button>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="cw-card">
|
|
|
|
|
<div class="cw-card-head"><h2>Status & Stage</h2></div>
|
|
|
|
|
<p class="cw-active-application">Active application: Senior Backend Engineer</p>
|
|
|
|
|
<div class="cw-status-grid">
|
|
|
|
|
<div>
|
|
|
|
|
<span class="cw-field-label">Status</span>
|
|
|
|
|
<div class="cw-status-value"><span class="cw-status-dot {{statusDotCls}}"></span>{{statusLabel}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<span class="cw-field-label">Stage</span>
|
|
|
|
|
<div class="cw-status-value">{{stage}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="cw-card">
|
|
|
|
|
<div class="cw-card-head"><h2>Recent Activity</h2><button class="cw-link" onClick="{{goTimeline}}"><svg class="icon icon-15" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>View all</button></div>
|
|
|
|
|
<ol class="cw-activity">
|
|
|
|
|
<li><div class="cw-activity-top"><strong>Interview scheduled</strong><time>Mar 15, 2026</time></div><p>Technical round with hiring panel</p></li>
|
|
|
|
|
<li><div class="cw-activity-top"><strong>Internal note added</strong><time>Mar 14, 2026</time></div><p>Great communication, prior fintech experience.</p><small>By Meera Khan</small></li>
|
|
|
|
|
<li><div class="cw-activity-top"><strong>Screening completed</strong><time>Mar 13, 2026</time></div><p>Match score: 82% — strong technical alignment</p></li>
|
|
|
|
|
<li><div class="cw-activity-top"><strong>Application received</strong><time>Mar 12, 2026</time></div><p>Applied via Careers page</p></li>
|
|
|
|
|
</ol>
|
|
|
|
|
</section>
|
|
|
|
|
</aside>
|
|
|
|
|
</div>
|
|
|
|
|
</sc-if>
|
|
|
|
|
|
|
|
|
|
<!-- ============ SECONDARY TABS ============ -->
|
|
|
|
|
<sc-if value="{{showResume}}" hint-placeholder-val="{{false}}">
|
|
|
|
|
<div class="cw-tab-content">
|
|
|
|
|
<div class="cw-document">
|
|
|
|
|
<span class="cw-document-icon"><svg class="icon icon-16" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg><small>PDF</small></span>
|
|
|
|
|
<div class="cw-document-name"><strong>Ada_Lovelace_Resume.pdf</strong><small>Original CV from the application</small></div>
|
|
|
|
|
<div class="cw-document-actions"><button class="btn btn-secondary btn-sm">Preview</button><button class="btn btn-secondary btn-sm">Download</button></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</sc-if>
|
|
|
|
|
|
|
|
|
|
<sc-if value="{{showInterview}}" hint-placeholder-val="{{false}}">
|
|
|
|
|
<div class="cw-tab-content">
|
|
|
|
|
<div class="simple-row">
|
|
|
|
|
<span class="simple-row-icn"><svg class="icon icon-18" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></span>
|
|
|
|
|
<div class="simple-row-main"><div class="simple-row-title">Technical — System Design</div><div class="simple-row-sub">Mar 15, 2026 · 3:00 PM</div></div>
|
|
|
|
|
<span class="badge st-blue">Scheduled</span>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="cw-empty" style="margin-top:16px">Scheduling a new round attaches it to this application.</p>
|
|
|
|
|
<button class="btn btn-primary btn-sm" style="margin-top:10px"><svg class="icon icon-16" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>Schedule Interview</button>
|
|
|
|
|
</div>
|
|
|
|
|
</sc-if>
|
|
|
|
|
|
|
|
|
|
<sc-if value="{{showForms}}" hint-placeholder-val="{{false}}">
|
|
|
|
|
<div class="cw-tab-content">
|
|
|
|
|
<div class="simple-row">
|
|
|
|
|
<span class="simple-row-icn"><svg class="icon icon-18" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></span>
|
|
|
|
|
<div class="simple-row-main"><div class="simple-row-title">Technical scorecard</div><div class="simple-row-sub">Submitted by Farhan Ali · Mar 15, 2026</div></div>
|
|
|
|
|
<span class="badge st-green">Submitted</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="simple-row">
|
|
|
|
|
<span class="simple-row-icn"><svg class="icon icon-18" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></span>
|
|
|
|
|
<div class="simple-row-main"><div class="simple-row-title">Offer approval</div><div class="simple-row-sub">Pending hiring manager sign-off</div></div>
|
|
|
|
|
<span class="badge st-amber">Pending</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</sc-if>
|
|
|
|
|
|
|
|
|
|
<sc-if value="{{showNotes}}" hint-placeholder-val="{{false}}">
|
|
|
|
|
<div class="cw-tab-content">
|
|
|
|
|
<div class="note-compose">
|
|
|
|
|
<textarea placeholder="Write a private note about this candidate…" value="{{noteDraft}}" onChange="{{onNoteDraftChange}}"></textarea>
|
|
|
|
|
<button class="btn btn-primary btn-sm" onClick="{{addNote}}">Add Note</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top:18px">
|
|
|
|
|
<sc-for list="{{notes}}" as="n" hint-placeholder-count="2">
|
|
|
|
|
<div class="simple-row">
|
|
|
|
|
<span class="avatar" style="background:linear-gradient(145deg,#b2acff,#9395f0)">{{n.initials}}</span>
|
|
|
|
|
<div class="simple-row-main"><div class="simple-row-title">{{n.author}}</div><div class="simple-row-sub">{{n.text}}</div><div class="simple-row-sub">{{n.when}}</div></div>
|
|
|
|
|
</div>
|
|
|
|
|
</sc-for>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</sc-if>
|
|
|
|
|
|
|
|
|
|
<sc-if value="{{showActivity}}" hint-placeholder-val="{{false}}">
|
|
|
|
|
<div class="cw-tab-content">
|
|
|
|
|
<div class="simple-row"><span class="simple-row-icn"><svg class="icon icon-18" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></span><div class="simple-row-main"><div class="simple-row-sub">Profile viewed by Meera Khan</div><div class="simple-row-sub">1h ago</div></div></div>
|
|
|
|
|
<div class="simple-row"><span class="simple-row-icn"><svg class="icon icon-18" viewBox="0 0 24 24"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></span><div class="simple-row-main"><div class="simple-row-sub">Email sent: Interview invitation</div><div class="simple-row-sub">1 day ago</div></div></div>
|
|
|
|
|
<div class="simple-row"><span class="simple-row-icn"><svg class="icon icon-18" viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></span><div class="simple-row-main"><div class="simple-row-sub">Assessment score updated to 82%</div><div class="simple-row-sub">2 days ago</div></div></div>
|
|
|
|
|
</div>
|
|
|
|
|
</sc-if>
|
|
|
|
|
|
|
|
|
|
<sc-if value="{{showTimeline}}" hint-placeholder-val="{{false}}">
|
|
|
|
|
<div class="cw-tab-content">
|
|
|
|
|
<ol class="cw-activity">
|
|
|
|
|
<li><div class="cw-activity-top"><strong>Application received</strong><time>Mar 12, 2026</time></div><p>Applied via Careers page</p></li>
|
|
|
|
|
<li><div class="cw-activity-top"><strong>AI screening completed</strong><time>Mar 13, 2026</time></div><p>Match score: 82%</p></li>
|
|
|
|
|
<li><div class="cw-activity-top"><strong>Interview scheduled</strong><time>Mar 15, 2026</time></div><p>Technical — System Design</p></li>
|
|
|
|
|
</ol>
|
|
|
|
|
</div>
|
|
|
|
|
</sc-if>
|
|
|
|
|
|
|
|
|
|
<sc-if value="{{showHistory}}" hint-placeholder-val="{{false}}">
|
|
|
|
|
<div class="cw-tab-content">
|
|
|
|
|
<div class="section-label">Today</div>
|
|
|
|
|
<div class="simple-row"><span class="simple-row-icn"><svg class="icon icon-18" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span><div class="simple-row-main"><div class="simple-row-title">Stage changed</div><div class="simple-row-sub">Screening → Interview</div><div class="simple-row-sub">Meera Khan · 10:14 AM</div></div></div>
|
|
|
|
|
<div class="simple-row"><span class="simple-row-icn"><svg class="icon icon-18" viewBox="0 0 24 24"><circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></svg></span><div class="simple-row-main"><div class="simple-row-title">Feedback submitted</div><div class="simple-row-sub">by Farhan Ali</div></div></div>
|
|
|
|
|
</div>
|
|
|
|
|
</sc-if>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
</x-dc>
|
|
|
|
|
<script data-dc-script>
|
|
|
|
|
class Component extends DCLogic {
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
this.state = {
|
|
|
|
|
tab: 'Overview',
|
|
|
|
|
rating: 4,
|
|
|
|
|
stage: 'Interview',
|
|
|
|
|
favorite: true,
|
|
|
|
|
appsExpanded: false,
|
|
|
|
|
noteDraft: '',
|
|
|
|
|
noticePeriod: '4 weeks',
|
|
|
|
|
expectedSalary: '$168,000',
|
|
|
|
|
notes: [
|
|
|
|
|
{ id: 1, author: 'Meera Khan', initials: 'MK', text: 'Great communication, prior fintech experience.', when: 'Mar 14, 2026' },
|
|
|
|
|
{ id: 2, author: 'Farhan Ali', initials: 'FA', text: 'Strong system design answers in the technical screen.', when: 'Mar 10, 2026' },
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
this.selectTab = this.selectTab.bind(this);
|
|
|
|
|
this.setRating = this.setRating.bind(this);
|
|
|
|
|
this.toggleFavorite = this.toggleFavorite.bind(this);
|
|
|
|
|
this.toggleApps = this.toggleApps.bind(this);
|
|
|
|
|
this.moveNext = this.moveNext.bind(this);
|
|
|
|
|
this.addNote = this.addNote.bind(this);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
selectTab(key) { this.setState({ tab: key }); }
|
|
|
|
|
setRating(n) { this.setState({ rating: n }); }
|
|
|
|
|
toggleFavorite() { this.setState({ favorite: !this.state.favorite }); }
|
|
|
|
|
toggleApps() { this.setState({ appsExpanded: !this.state.appsExpanded }); }
|
|
|
|
|
moveNext() {
|
|
|
|
|
const order = ['Shortlist', 'Screening', 'Assessment', 'Interview', 'Offer', 'Approved', 'Hired'];
|
|
|
|
|
const i = order.indexOf(this.state.stage);
|
|
|
|
|
if (i >= 0 && i < order.length - 1) this.setState({ stage: order[i + 1] });
|
|
|
|
|
}
|
|
|
|
|
addNote() {
|
|
|
|
|
const text = this.state.noteDraft.trim();
|
|
|
|
|
if (!text) return;
|
|
|
|
|
const note = { id: Date.now(), author: 'You', initials: 'Y', text, when: 'Just now' };
|
|
|
|
|
this.setState({ notes: [note, ...this.state.notes], noteDraft: '' });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
renderVals() {
|
|
|
|
|
const s = this.state;
|
|
|
|
|
const KANBAN = ['Shortlist', 'Screening', 'Assessment', 'Interview', 'Offer', 'Approved', 'Hired'];
|
|
|
|
|
const STATUS_CLASS = {
|
|
|
|
|
Shortlist: 'st-blue', Screening: 'st-purple', Assessment: 'st-amber', Interview: 'st-indigo',
|
|
|
|
|
Offer: 'st-teal', Approved: 'st-gray', Hired: 'st-green', Rejected: 'st-red', 'On Hold': 'st-amber',
|
|
|
|
|
};
|
|
|
|
|
const idx = KANBAN.indexOf(s.stage);
|
|
|
|
|
const nextStage = idx >= 0 && idx < KANBAN.length - 1 ? KANBAN[idx + 1] : null;
|
|
|
|
|
const isClosed = s.stage === 'Rejected' || s.stage === 'Hired';
|
|
|
|
|
const statusLabel = isClosed ? 'Closed' : s.stage === 'On Hold' ? 'On hold' : 'In progress';
|
|
|
|
|
|
|
|
|
|
const tabDefs = [
|
|
|
|
|
{ key: 'Overview', label: 'Overview', count: null },
|
|
|
|
|
{ key: 'Resume', label: 'Resume', count: null },
|
|
|
|
|
{ key: 'Interview', label: 'Interviews', count: 1 },
|
|
|
|
|
{ key: 'Forms', label: 'Forms', count: 2 },
|
|
|
|
|
{ key: 'Notes', label: 'Notes', count: s.notes.length },
|
|
|
|
|
{ key: 'Activity', label: 'Activity', count: 5 },
|
|
|
|
|
{ key: 'Timeline', label: 'Timeline', count: null },
|
|
|
|
|
{ key: 'History', label: 'History', count: null },
|
|
|
|
|
];
|
|
|
|
|
const tabs = tabDefs.map((t) => ({
|
|
|
|
|
...t,
|
|
|
|
|
cls: t.key === s.tab ? 'tab active' : 'tab',
|
|
|
|
|
hasCount: t.count != null,
|
|
|
|
|
pick: () => this.selectTab(t.key),
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
const allApplications = [
|
|
|
|
|
{ title: 'Senior Backend Engineer', sub: 'Current application', when: 'Mar 12, 2026', status: s.stage, cls: STATUS_CLASS[s.stage] || 'st-gray', current: true },
|
|
|
|
|
{ title: 'Backend Engineer', sub: 'Email application', when: 'Jan 5, 2025', status: 'Rejected', cls: 'st-red', current: false },
|
|
|
|
|
{ title: 'Platform Engineer II', sub: 'Email application', when: 'Aug 22, 2024', status: 'Rejected', cls: 'st-red', current: false },
|
|
|
|
|
{ title: 'Backend Engineer Intern', sub: 'Application form', when: 'Jun 3, 2022', status: 'Hired', cls: 'st-green', current: false },
|
|
|
|
|
].map((a) => ({ ...a, rowCls: a.current ? 'is-current' : '', notCurrent: !a.current }));
|
|
|
|
|
const applications = s.appsExpanded ? allApplications : allApplications.slice(0, 3);
|
|
|
|
|
|
|
|
|
|
const stars = [1, 2, 3, 4, 5].map((n) => ({
|
|
|
|
|
n, cls: n <= s.rating ? 'rs on' : 'rs', pick: () => this.setRating(n),
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
tab: s.tab, tabs,
|
|
|
|
|
showOverview: s.tab === 'Overview',
|
|
|
|
|
showResume: s.tab === 'Resume',
|
|
|
|
|
showInterview: s.tab === 'Interview',
|
|
|
|
|
showForms: s.tab === 'Forms',
|
|
|
|
|
showNotes: s.tab === 'Notes',
|
|
|
|
|
showActivity: s.tab === 'Activity',
|
|
|
|
|
showTimeline: s.tab === 'Timeline',
|
|
|
|
|
showHistory: s.tab === 'History',
|
|
|
|
|
|
|
|
|
|
favClass: s.favorite ? 'on' : '',
|
|
|
|
|
favLabel: s.favorite ? 'Favorited' : 'Favorite',
|
|
|
|
|
favoriteToggle: this.toggleFavorite,
|
|
|
|
|
|
|
|
|
|
stage: s.stage,
|
|
|
|
|
stageClass: STATUS_CLASS[s.stage] || 'st-gray',
|
|
|
|
|
statusLabel,
|
|
|
|
|
statusDotCls: isClosed ? 'is-closed' : '',
|
|
|
|
|
nextStageLabel: nextStage || 'Rejected',
|
|
|
|
|
moveNext: this.moveNext,
|
|
|
|
|
|
|
|
|
|
stars, ratingText: s.rating ? `${s.rating.toFixed(1)} / 5` : 'Not rated',
|
|
|
|
|
|
|
|
|
|
appCount: allApplications.length,
|
|
|
|
|
applications,
|
|
|
|
|
hasMoreApps: allApplications.length > 3,
|
|
|
|
|
appsToggleLabel: s.appsExpanded ? 'Show less' : 'View all',
|
|
|
|
|
toggleApps: this.toggleApps,
|
|
|
|
|
|
|
|
|
|
notes: s.notes, noteDraft: s.noteDraft,
|
|
|
|
|
onNoteDraftChange: (e) => this.setState({ noteDraft: e.target.value }),
|
|
|
|
|
addNote: this.addNote,
|
|
|
|
|
|
|
|
|
|
noticePeriod: s.noticePeriod, hasNoticePeriod: !!s.noticePeriod, noNoticePeriod: !s.noticePeriod,
|
|
|
|
|
expectedSalary: s.expectedSalary, hasExpectedSalary: !!s.expectedSalary, noExpectedSalary: !s.expectedSalary,
|
|
|
|
|
|
|
|
|
|
goNotes: () => this.selectTab('Notes'),
|
|
|
|
|
goForms: () => this.selectTab('Forms'),
|
|
|
|
|
goTimeline: () => this.selectTab('Timeline'),
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
Talha Ahmed