177 lines
9.9 KiB
JavaScript
177 lines
9.9 KiB
JavaScript
/* ============================================================
|
|
import.js — Manual CV Import (drag&drop, parse, match, dedupe)
|
|
============================================================ */
|
|
window.Views = window.Views || {};
|
|
window.CVImport = {};
|
|
|
|
Views.import = function () {
|
|
const queue = []; // {name, size, status, atsScore, matchedJob, duplicate}
|
|
|
|
const html = `
|
|
<div class="page">
|
|
<div class="page-head">
|
|
<div><h1 class="page-title">CV Import</h1><p class="page-sub">Upload resumes — we parse, score, match, and dedupe automatically</p></div>
|
|
<div class="page-head-actions">
|
|
<span class="integration-status pending"><span class="pulse"></span>AI Resume Parser · Ready</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid g-2-1">
|
|
<div>
|
|
<div class="card mb-18"><div class="card-body">
|
|
<div class="dropzone" id="dropzone">
|
|
<div class="dz-icn">${UI.icon('upload')}</div>
|
|
<h3>Drag & drop resumes here</h3>
|
|
<p class="text-muted" style="margin-bottom:16px">or click to browse — PDF, DOC, DOCX and ZIP supported · up to 20 files</p>
|
|
<button class="btn btn-primary" id="browseBtn">${UI.icon('upload')} Browse Files</button>
|
|
<div class="flex items-center gap-8" style="justify-content:center;margin-top:16px">
|
|
${['PDF', 'DOC', 'DOCX', 'ZIP'].map(t => `<span class="badge b-gray badge-plain">${t}</span>`).join('')}
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-8" style="margin-top:16px;flex-wrap:wrap">
|
|
<button class="btn btn-secondary btn-sm" onclick="CVImport.simulate(3)">${UI.icon('sparkles')} Simulate 3 files</button>
|
|
<button class="btn btn-secondary btn-sm" onclick="CVImport.simulate(1,true)">${UI.icon('layers')} Simulate ZIP (8 CVs)</button>
|
|
<span class="text-muted text-sm" style="margin-left:auto">Files are processed locally in this demo</span>
|
|
</div>
|
|
</div></div>
|
|
|
|
<div class="card" id="queueCard" style="display:none">
|
|
<div class="card-head"><div><h3>Processing Queue</h3><span class="ch-sub" id="queueSub">0 files</span></div>
|
|
<button class="btn btn-primary btn-sm" id="importAllBtn" onclick="CVImport.importAll()">${UI.icon('check')} Import All</button></div>
|
|
<div class="card-body" id="queueList"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="align-self:start">
|
|
<div class="card-head"><div><h3>Auto-Processing</h3><span class="ch-sub">What happens on upload</span></div></div>
|
|
<div class="card-body"><div class="timeline">
|
|
${[
|
|
{ i: 'file', t: 'Resume parsing', d: 'Extract name, contact, experience, skills & education' },
|
|
{ i: 'target', t: 'ATS scoring', d: 'Generate a match score against the requisition' },
|
|
{ i: 'briefcase', t: 'Job matching', d: 'Suggest the best-matching open roles' },
|
|
{ i: 'users', t: 'Duplicate detection', d: 'Flag candidates already in the system' },
|
|
{ i: 'user-plus', t: 'Profile creation', d: 'Create a candidate profile in Applied stage' }
|
|
].map(s => `<div class="tl-item"><div class="tl-dot">${UI.icon(s.i)}</div><div class="tl-title">${s.t}</div><div class="tl-desc">${s.d}</div></div>`).join('')}
|
|
</div></div>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
|
|
CVImport._queue = queue;
|
|
|
|
return {
|
|
html,
|
|
onMount() {
|
|
const dz = document.getElementById('dropzone');
|
|
const browse = document.getElementById('browseBtn');
|
|
dz.addEventListener('click', () => CVImport.simulate(DB.int(2, 4)));
|
|
browse.addEventListener('click', e => { e.stopPropagation(); CVImport.simulate(DB.int(2, 4)); });
|
|
dz.addEventListener('dragover', e => { e.preventDefault(); dz.classList.add('drag'); });
|
|
dz.addEventListener('dragleave', () => dz.classList.remove('drag'));
|
|
dz.addEventListener('drop', e => { e.preventDefault(); dz.classList.remove('drag'); CVImport.simulate(e.dataTransfer.files.length || DB.int(2, 4)); });
|
|
CVImport._renderQueue();
|
|
}
|
|
};
|
|
};
|
|
|
|
CVImport.simulate = function (count, isZip) {
|
|
const n = isZip ? 8 : count;
|
|
const jobs = DB.jobs.filter(j => j.status === 'Open');
|
|
for (let k = 0; k < n; k++) {
|
|
const name = DB.pick(['Olivia', 'Liam', 'Emma', 'Noah', 'Ava', 'Ethan', 'Sophia', 'Mason', 'Priya', 'Diego', 'Yuki', 'Omar']) + ' ' + DB.pick(['Chen', 'Patel', 'Kim', 'Garcia', 'Silva', 'Ahmed', 'Novak', 'Reyes', 'Khan', 'Costa']);
|
|
const item = {
|
|
id: 'UP-' + Math.random().toString(36).slice(2, 8), name, file: name.split(' ')[0] + '_Resume.' + DB.pick(['pdf', 'docx', 'doc']),
|
|
size: DB.int(120, 620) + ' KB', progress: 0, status: 'Uploading', atsScore: null,
|
|
job: DB.pick(jobs.length ? jobs : DB.jobs), duplicate: Math.random() < 0.18, imported: false
|
|
};
|
|
CVImport._queue.push(item);
|
|
CVImport._process(item);
|
|
}
|
|
document.getElementById('queueCard').style.display = '';
|
|
UI.toast(isZip ? 'ZIP extracted — 8 resumes queued' : n + ' file(s) uploaded', 'info');
|
|
CVImport._renderQueue();
|
|
};
|
|
|
|
CVImport._process = function (item) {
|
|
const tick = setInterval(() => {
|
|
item.progress += DB.int(12, 30);
|
|
if (item.progress >= 100) {
|
|
item.progress = 100; clearInterval(tick);
|
|
item.status = 'Parsing';
|
|
CVImport._renderQueue();
|
|
setTimeout(() => {
|
|
item.status = 'Ready'; item.atsScore = DB.int(52, 96);
|
|
CVImport._renderQueue();
|
|
}, 700 + DB.int(0, 500));
|
|
}
|
|
CVImport._renderQueue();
|
|
}, 220);
|
|
};
|
|
|
|
CVImport._renderQueue = function () {
|
|
const el = document.getElementById('queueList');
|
|
if (!el) return;
|
|
const q = CVImport._queue;
|
|
document.getElementById('queueSub').textContent = q.length + ' file' + (q.length === 1 ? '' : 's') + ' · ' + q.filter(i => i.imported).length + ' imported';
|
|
el.innerHTML = q.map(i => `
|
|
<div class="upload-row">
|
|
<span class="attach-icn" style="width:38px;height:38px">${UI.icon('file')}</span>
|
|
<div style="flex:1;min-width:0">
|
|
<div class="flex items-center gap-8"><span class="fw-600 text-sm">${i.name}</span>
|
|
${i.duplicate ? '<span class="badge b-red badge-plain" style="padding:1px 7px;font-size:10px">DUPLICATE</span>' : ''}</div>
|
|
<div class="cell-sub">${i.file} · ${i.size}</div>
|
|
${i.status === 'Uploading' || i.status === 'Parsing' ? `<div class="upload-progress" style="margin-top:6px"><div class="upload-progress-fill" style="width:${i.progress}%"></div></div>` :
|
|
`<div class="cell-sub" style="margin-top:4px">Best match: <b>${i.job.title}</b></div>`}
|
|
</div>
|
|
<div style="text-align:right;flex-shrink:0">
|
|
${i.status === 'Ready' ? UI.scoreChip(i.atsScore) : `<span class="badge ${i.status === 'Parsing' ? 'b-amber' : 'b-blue'}">${i.status}${i.status === 'Uploading' ? ' ' + i.progress + '%' : ''}</span>`}
|
|
</div>
|
|
<div style="flex-shrink:0">
|
|
${i.imported ? `<span class="badge b-green">Imported</span>` :
|
|
i.status === 'Ready' ? `<button class="btn btn-primary btn-sm" onclick="CVImport.importOne('${i.id}')">Import</button>` :
|
|
`<button class="act-btn" disabled>${UI.icon('clock')}</button>`}
|
|
</div>
|
|
</div>`).join('');
|
|
};
|
|
|
|
CVImport.importOne = function (id) {
|
|
const i = CVImport._queue.find(x => x.id === id);
|
|
if (!i || i.imported) return;
|
|
if (i.duplicate) {
|
|
UI.modal({
|
|
title: 'Duplicate Detected', subtitle: i.name,
|
|
body: `<div class="flex gap-16 items-center"><span class="kpi-icn i-amber" style="width:48px;height:48px;border-radius:12px;flex-shrink:0">${UI.icon('users')}</span>
|
|
<div><p class="fw-600" style="font-size:15px">A similar candidate already exists</p>
|
|
<p class="text-muted" style="margin-top:4px">${i.name} matches an existing profile (95% similarity on name + email). Importing will create a duplicate.</p></div></div>`,
|
|
footer: `<button class="btn btn-secondary" onclick="UI.closeModal()">Cancel</button>
|
|
<button class="btn btn-secondary" onclick="UI.closeModal();UI.toast('Merged into existing profile','success')">Merge</button>
|
|
<button class="btn btn-primary" onclick="UI.closeModal();CVImport._doImport('${id}')">Import Anyway</button>`
|
|
});
|
|
return;
|
|
}
|
|
CVImport._doImport(id);
|
|
};
|
|
CVImport._doImport = function (id) {
|
|
const i = CVImport._queue.find(x => x.id === id);
|
|
const job = i.job;
|
|
DB.candidates.unshift({
|
|
id: 'CAN-' + (5001 + DB.candidates.length), name: i.name, initials: DB.initials(i.name), color: DB.avatarColor(i.name),
|
|
email: i.name.toLowerCase().replace(/ /g, '.') + '@email.com', phone: '+1 (555) 000-0000', jobId: job.id, jobTitle: job.title, department: job.department,
|
|
experience: DB.int(2, 12), currentCompany: DB.pick(DB.companies), currentTitle: job.title, location: DB.pick(DB.locations),
|
|
stage: 'Applied', status: 'Applied', aiScore: i.atsScore, source: 'Manual CV Upload', recruiter: DB.pick(DB.recruiters).name, recruiterId: '',
|
|
applied: new Date('2026-07-09'), education: "Bachelor's Degree", skills: job.skills.slice(0, 4), rating: '4.0', salary: DB.int(90, 180) * 1000,
|
|
matchedSkills: job.skills.slice(0, 3), missingSkills: job.skills.slice(3), recommendation: i.atsScore >= 82 ? 'Strong Match' : 'Potential Match',
|
|
subScores: { skills: i.atsScore, experience: 80, education: 80, keywords: i.atsScore, location: 100, salary: 90 },
|
|
noticePeriod: '1 month', availability: '2 weeks', certifications: [], favorite: false, interviewStatus: 'Not Scheduled'
|
|
});
|
|
i.imported = true;
|
|
CVImport._renderQueue(); App.updateBadges();
|
|
UI.toast(`${i.name} imported → ${job.title}`, 'success');
|
|
};
|
|
CVImport.importAll = function () {
|
|
const ready = CVImport._queue.filter(i => i.status === 'Ready' && !i.imported && !i.duplicate);
|
|
if (!ready.length) { UI.toast('No files ready to import', 'warning'); return; }
|
|
ready.forEach(i => CVImport._doImport(i.id));
|
|
UI.toast(`${ready.length} candidates imported`, 'success');
|
|
};
|