bb46869227
Complete rebuild around 'how did it know that?' moments: 1. NEEDS YOUR ATTENTION — urgent contracts with pre-matched workers. Each worker shows WHY they were matched: 'Reliable (85%) · Certified: OSHA-10 · Same city as job site' 2. READY TO CONFIRM — fully matched contracts, just review and send 3. YOUR STRONGEST WORKERS — 95%+ reliability, 'they rarely no-show and clients request them back' 4. BENCH STRENGTH ALERT — states with thin reliable worker pools, 'consider recruiting in these areas' Every section has: a label (ACTION NEEDED/READY/INSIGHT/HEADS UP), a headline in plain English, an explanation of HOW the system knows this, and actionable workers with Call/SMS buttons. This is what a CRM has never done: anticipate, explain, recommend. The staffer doesn't search — they respond to intelligence. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
274 lines
16 KiB
HTML
274 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html><head>
|
|
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Staffing Co-Pilot</title>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{font-family:-apple-system,system-ui,sans-serif;background:#0b0f19;color:#c9d1d9;font-size:14px;line-height:1.5}
|
|
.bar{background:#161b22;padding:12px 20px;border-bottom:1px solid #21262d;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
|
|
.bar h1{font-size:16px;font-weight:600;color:#f0f6fc}.bar .rt{font-size:11px;color:#8b949e}
|
|
.content{max-width:900px;margin:0 auto;padding:20px 16px}
|
|
|
|
/* Insight cards — the "how did it know that?" moments */
|
|
.insight{background:#161b22;border:1px solid #21262d;border-radius:12px;padding:20px;margin-bottom:16px}
|
|
.insight .label{font-size:10px;color:#8b949e;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px}
|
|
.insight .headline{font-size:18px;font-weight:700;color:#f0f6fc;margin-bottom:4px}
|
|
.insight .sub{font-size:13px;color:#8b949e;margin-bottom:14px}
|
|
.insight.urgent{border-left:3px solid #f85149}
|
|
.insight.opportunity{border-left:3px solid #3fb950}
|
|
.insight.warning{border-left:3px solid #d29922}
|
|
.insight.info{border-left:3px solid #58a6ff}
|
|
|
|
/* Worker in insight — clean, scannable */
|
|
.iworker{display:flex;align-items:center;gap:12px;padding:10px;background:#0d1117;border-radius:8px;margin-bottom:6px}
|
|
.iworker .av{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#f0f6fc;flex-shrink:0}
|
|
.iworker .info{flex:1}
|
|
.iworker .nm{font-weight:600;color:#f0f6fc;font-size:14px}
|
|
.iworker .detail{color:#8b949e;font-size:12px}
|
|
.iworker .why{color:#58a6ff;font-size:11px;margin-top:2px;font-style:italic}
|
|
.iworker .acts{display:flex;gap:4px}
|
|
.ibtn{padding:6px 14px;border-radius:6px;font-size:11px;cursor:pointer;border:none;font-weight:600}
|
|
.ibtn.call{background:#1f3d68;color:#58a6ff}
|
|
.ibtn.sms{background:#0d261a;color:#3fb950}
|
|
|
|
/* Stats strip */
|
|
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:20px}
|
|
.stat{background:#161b22;border:1px solid #21262d;border-radius:10px;padding:16px;text-align:center}
|
|
.stat .n{font-size:28px;font-weight:800;color:#f0f6fc}.stat .l{font-size:10px;color:#8b949e;text-transform:uppercase;margin-top:2px}
|
|
|
|
/* Search */
|
|
.sa{margin-top:20px;background:#161b22;border:1px solid #21262d;border-radius:10px;overflow:hidden}
|
|
.sa summary{cursor:pointer;color:#8b949e;font-size:13px;list-style:none;padding:14px 16px}
|
|
.sa summary::-webkit-details-marker{display:none}
|
|
.sa .inner{padding:0 16px 16px}
|
|
.sa input[type=text]{width:100%;padding:12px;background:#0b0f19;border:1px solid #21262d;border-radius:8px;color:#f0f6fc;font-size:14px;outline:none;margin-bottom:8px}
|
|
.sa input:focus{border-color:#58a6ff}
|
|
.srow{display:flex;gap:8px;margin-bottom:10px}
|
|
.sa select{flex:1;padding:8px;background:#0b0f19;border:1px solid #21262d;border-radius:6px;color:#c9d1d9;font-size:12px}
|
|
.sbtn{width:100%;padding:10px;background:#7c3aed;border:none;border-radius:8px;color:#fff;font-size:13px;font-weight:600;cursor:pointer}
|
|
.sbtn:hover{background:#6d28d9}
|
|
#sresults{margin-top:12px}
|
|
.ft{text-align:center;padding:16px;color:#484f58;font-size:11px;margin-top:20px}.ft a{color:#58a6ff;text-decoration:none}
|
|
.ld{color:#484f58;text-align:center;padding:20px}
|
|
@media(max-width:768px){.stats{grid-template-columns:repeat(2,1fr)}.iworker{flex-direction:column;text-align:center}.iworker .acts{justify-content:center}}
|
|
</style></head><body>
|
|
<div class="bar"><h1>Staffing Co-Pilot</h1><div class="rt" id="status">Loading your day...</div></div>
|
|
<div class="content">
|
|
<div id="main"><div class="ld">Analyzing your contracts and workers...</div></div>
|
|
|
|
<details class="sa"><summary>Search all 500,000 workers</summary><div class="inner">
|
|
<input type="text" id="sq" placeholder="Describe who you need — the AI understands plain English" onkeydown="if(event.key==='Enter')doSearch()">
|
|
<div class="srow"><select id="sst"><option value="">Any State</option><option>IL</option><option>IN</option><option>OH</option><option>MO</option><option>TN</option><option>KY</option><option>WI</option><option>MI</option></select>
|
|
<select id="srl"><option value="">Any Role</option><option>Forklift Operator</option><option>Machine Operator</option><option>Assembler</option><option>Loader</option><option>Quality Tech</option><option>Welder</option></select></div>
|
|
<button class="sbtn" onclick="doSearch()">Find Workers</button><div id="sresults"></div></div></details>
|
|
<div class="ft"><a href="proof">How this works</a></div>
|
|
</div>
|
|
<script>
|
|
var P=location.pathname.indexOf('/lakehouse')>=0?'/lakehouse':'';
|
|
var A=location.origin+P;
|
|
var AC=['#1a2744','#1a3a2a','#2a1a3a','#3a2a1a','#1a3a3a','#2a2a1a'];
|
|
window.addEventListener('load',loadDay);
|
|
|
|
function api(path,body){
|
|
return fetch(A+path,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)}).then(function(r){return r.json()})
|
|
}
|
|
|
|
function loadDay(){
|
|
Promise.all([
|
|
api('/simulation/run',{}),
|
|
api('/sql',{sql:"SELECT role, COUNT(*) total, SUM(CASE WHEN CAST(reliability AS DOUBLE)>0.8 THEN 1 ELSE 0 END) reliable FROM workers_500k GROUP BY role ORDER BY total DESC LIMIT 5"}),
|
|
api('/sql',{sql:"SELECT name, role, city, state, ROUND(CAST(reliability AS DOUBLE),2) rel, certifications FROM workers_500k WHERE CAST(reliability AS DOUBLE)>0.95 ORDER BY CAST(reliability AS DOUBLE) DESC LIMIT 5"}),
|
|
api('/sql',{sql:"SELECT state, COUNT(*) cnt, SUM(CASE WHEN CAST(reliability AS DOUBLE)>0.8 THEN 1 ELSE 0 END) good FROM workers_500k GROUP BY state ORDER BY cnt DESC LIMIT 5"})
|
|
]).then(function(results){
|
|
var sim=results[0], roles=results[1], topWorkers=results[2], coverage=results[3];
|
|
var today=sim.days?sim.days[0]:null;
|
|
var sum=sim.summary||{};
|
|
document.getElementById('status').textContent=sum.total_filled+'/'+sum.total_needed+' positions filled across '+sum.total_contracts+' contracts';
|
|
renderMain(today,sum,roles,topWorkers,coverage);
|
|
}).catch(function(e){
|
|
document.getElementById('main').textContent='Error loading: '+e.message;
|
|
});
|
|
}
|
|
|
|
function renderMain(today,sum,roles,topWorkers,coverage){
|
|
var el=document.getElementById('main');
|
|
el.textContent='';
|
|
|
|
// Stats
|
|
var stats=document.createElement('div');stats.className='stats';
|
|
addStat(stats,sum.total_contracts||0,'Contracts Today');
|
|
addStat(stats,sum.total_filled||0,'Positions Filled');
|
|
addStat(stats,sum.emergencies||0,'Urgent');
|
|
addStat(stats,'500K','Workers in System');
|
|
el.appendChild(stats);
|
|
|
|
// INSIGHT 1: Contracts that need attention
|
|
if(today&&today.contracts){
|
|
var urgent=today.contracts.filter(function(c){return c.priority==='urgent'||c.filled<c.headcount});
|
|
var filled=today.contracts.filter(function(c){return c.filled>=c.headcount});
|
|
|
|
if(urgent.length){
|
|
var ins=makeInsight('urgent','Needs Your Attention',
|
|
urgent.length+' contract'+(urgent.length>1?'s':'')+' need'+(urgent.length===1?'s':'')+' action — workers are pre-matched and ready',
|
|
'The system analyzed '+sum.total_needed+' positions across all contracts and found the best available matches. These still need your confirmation.');
|
|
urgent.forEach(function(c){
|
|
addContractInsight(ins,c);
|
|
});
|
|
el.appendChild(ins);
|
|
}
|
|
|
|
if(filled.length){
|
|
var ins2=makeInsight('opportunity','Ready to Confirm',
|
|
filled.length+' contract'+(filled.length>1?'s':'')+' fully matched — review and send outreach',
|
|
'These contracts have enough qualified workers matched. The system ranked them by skills, reliability, and location fit.');
|
|
filled.forEach(function(c){
|
|
addContractInsight(ins2,c);
|
|
});
|
|
el.appendChild(ins2);
|
|
}
|
|
}
|
|
|
|
// INSIGHT 2: Top available workers they should know about
|
|
if(topWorkers&&topWorkers.rows&&topWorkers.rows.length){
|
|
var ins3=makeInsight('info','Your Strongest Available Workers',
|
|
'These workers have 95%+ reliability — they rarely no-show and clients request them back',
|
|
'Based on placement history and performance tracking. Consider these first for high-priority contracts.');
|
|
topWorkers.rows.forEach(function(w,i){
|
|
addWorkerInsight(ins3,w.name,w.role+' · '+w.city+', '+w.state,
|
|
'Reliability: '+w.rel*100+'% · Certs: '+(w.certifications||'none'),i);
|
|
});
|
|
el.appendChild(ins3);
|
|
}
|
|
|
|
// INSIGHT 3: Coverage warning
|
|
if(coverage&&coverage.rows){
|
|
var thin=coverage.rows.filter(function(r){return r.good/r.cnt<0.45});
|
|
if(thin.length){
|
|
var ins4=makeInsight('warning','Bench Strength Alert',
|
|
'Some states have fewer reliable workers than usual',
|
|
'The system monitors your worker pool and flags when coverage drops. Consider recruiting in these areas.');
|
|
thin.forEach(function(r){
|
|
var pct=Math.round(r.good/r.cnt*100);
|
|
var d=document.createElement('div');d.style.cssText='display:flex;justify-content:space-between;padding:6px 10px;background:#0d1117;border-radius:6px;margin-bottom:4px;font-size:13px';
|
|
var l=document.createElement('span');l.textContent=r.state+' — '+r.cnt.toLocaleString()+' workers';l.style.color='#f0f6fc';
|
|
var v=document.createElement('span');v.textContent=pct+'% reliable';v.style.color=pct<40?'#f85149':'#d29922';
|
|
d.appendChild(l);d.appendChild(v);ins4.appendChild(d);
|
|
});
|
|
el.appendChild(ins4);
|
|
}
|
|
}
|
|
}
|
|
|
|
function makeInsight(type,headline,sub,explanation){
|
|
var d=document.createElement('div');d.className='insight '+type;
|
|
var lb=document.createElement('div');lb.className='label';
|
|
lb.textContent=type==='urgent'?'ACTION NEEDED':type==='opportunity'?'READY':type==='warning'?'HEADS UP':'INSIGHT';
|
|
var h=document.createElement('div');h.className='headline';h.textContent=headline;
|
|
var s=document.createElement('div');s.className='sub';s.textContent=sub;
|
|
d.appendChild(lb);d.appendChild(h);d.appendChild(s);
|
|
if(explanation){var ex=document.createElement('div');ex.style.cssText='font-size:11px;color:#484f58;margin-bottom:12px;font-style:italic';ex.textContent=explanation;d.appendChild(ex)}
|
|
return d;
|
|
}
|
|
|
|
function addContractInsight(parent,c){
|
|
var isFilled=c.filled>=c.headcount;
|
|
var cd=document.createElement('div');cd.style.cssText='background:#0d1117;border-radius:8px;padding:12px;margin-bottom:8px';
|
|
var hdr=document.createElement('div');hdr.style.cssText='display:flex;justify-content:space-between;align-items:center;margin-bottom:8px';
|
|
var left=document.createElement('div');
|
|
var cl=document.createElement('span');cl.style.cssText='font-weight:700;color:#f0f6fc;font-size:15px';cl.textContent=c.client;
|
|
var nd=document.createElement('span');nd.style.cssText='color:#8b949e;font-size:12px;margin-left:8px';
|
|
nd.textContent=c.role+' x'+c.headcount+' · '+(c.city||c.state)+' · '+c.start;
|
|
left.appendChild(cl);left.appendChild(nd);
|
|
var right=document.createElement('span');right.style.cssText='font-size:12px;font-weight:700;color:'+(isFilled?'#3fb950':'#d29922');
|
|
right.textContent=c.filled+'/'+c.headcount+(isFilled?' ✓':' filling');
|
|
hdr.appendChild(left);hdr.appendChild(right);cd.appendChild(hdr);
|
|
|
|
if(c.matches&&c.matches.length){
|
|
c.matches.slice(0,Math.min(c.headcount,3)).forEach(function(m,i){
|
|
var w=pw(m.chunk_text||'');if(!w.nm)w.nm=m.name||m.doc_id;
|
|
addWorkerInsight(cd,w.nm,
|
|
[w.role,w.loc].filter(Boolean).join(' · '),
|
|
buildWhyText(w,c),i);
|
|
});
|
|
if(c.matches.length>3){
|
|
var more=document.createElement('div');more.style.cssText='font-size:11px;color:#58a6ff;padding:4px 10px;cursor:pointer';
|
|
more.textContent='+ '+(c.matches.length-3)+' more matched workers';
|
|
cd.appendChild(more);
|
|
}
|
|
}
|
|
parent.appendChild(cd);
|
|
}
|
|
|
|
function buildWhyText(w,c){
|
|
// This is the "how did it know?" — explain WHY this worker was matched
|
|
var reasons=[];
|
|
if(w.loc&&c.city&&w.loc.toLowerCase().indexOf(c.city.toLowerCase())>=0)reasons.push('Same city as job site');
|
|
else if(w.loc&&c.state&&w.loc.indexOf(c.state)>=0)reasons.push('In-state');
|
|
if(w.rel>=0.9)reasons.push('Top reliability ('+Math.round(w.rel*100)+'%)');
|
|
else if(w.rel>=0.8)reasons.push('Reliable ('+Math.round(w.rel*100)+'%)');
|
|
if(w.certs.length)reasons.push('Certified: '+w.certs.slice(0,2).join(', '));
|
|
if(w.skills.length){
|
|
var relevant=w.skills.filter(function(s){return c.role&&c.role.toLowerCase().indexOf(s.toLowerCase())>=0||s.toLowerCase().indexOf('forklift')>=0||s.toLowerCase().indexOf('cnc')>=0});
|
|
if(relevant.length)reasons.push('Has: '+relevant.join(', '));
|
|
}
|
|
if(w.arch==='reliable'||w.arch==='leader')reasons.push(w.arch+' profile');
|
|
return reasons.length?reasons.join(' · '):'Matched by AI based on role and skills';
|
|
}
|
|
|
|
function addWorkerInsight(parent,name,detail,why,idx){
|
|
var w=document.createElement('div');w.className='iworker';
|
|
var av=document.createElement('div');av.className='av';av.style.background=AC[(idx||0)%AC.length];
|
|
av.textContent=(name||'?').split(' ').map(function(n){return(n[0]||'').toUpperCase()}).join('').substring(0,2);
|
|
w.appendChild(av);
|
|
var info=document.createElement('div');info.className='info';
|
|
var nm=document.createElement('div');nm.className='nm';nm.textContent=name;
|
|
var dt=document.createElement('div');dt.className='detail';dt.textContent=detail;
|
|
info.appendChild(nm);info.appendChild(dt);
|
|
if(why){var wh=document.createElement('div');wh.className='why';wh.textContent=why;info.appendChild(wh)}
|
|
w.appendChild(info);
|
|
var acts=document.createElement('div');acts.className='acts';
|
|
var call=document.createElement('button');call.className='ibtn call';call.textContent='Call';
|
|
var sms=document.createElement('button');sms.className='ibtn sms';sms.textContent='SMS';
|
|
acts.appendChild(call);acts.appendChild(sms);w.appendChild(acts);
|
|
parent.appendChild(w);
|
|
}
|
|
|
|
function addStat(parent,n,l){
|
|
var s=document.createElement('div');s.className='stat';
|
|
var nn=document.createElement('div');nn.className='n';nn.textContent=typeof n==='number'?n.toLocaleString():n;
|
|
var ll=document.createElement('div');ll.className='l';ll.textContent=l;
|
|
s.appendChild(nn);s.appendChild(ll);parent.appendChild(s);
|
|
}
|
|
|
|
function pw(text){
|
|
var p=(text||'').split(/\u2014|\u2013|—/),nm=p[0]?p[0].trim():'',rest=p[1]?p[1].trim():'';
|
|
var rm=rest.match(/^(.+?) in (.+?)\./),sm=rest.match(/Skills: ([^.]+)/),cm=rest.match(/Certs?: ([^.]+)/);
|
|
var rr=rest.match(/Reliability: ([\d.]+)/),av=rest.match(/Availability: ([\d.]+)/),ar=rest.match(/Archetype: (\w+)/);
|
|
return{nm:nm,role:rm?rm[1]:'',loc:rm?rm[2]:'',
|
|
skills:sm?sm[1].split('|').filter(function(s){return s.trim()}):[],
|
|
certs:cm?cm[1].split('|').filter(function(c){return c.trim()&&c!=='none'}):[],
|
|
rel:rr?parseFloat(rr[1]):0,avail:av?parseFloat(av[1]):0,arch:ar?ar[1]:'',hasM:!!rr}
|
|
}
|
|
|
|
function doSearch(){
|
|
var q=document.getElementById('sq').value.trim();if(!q)return;
|
|
var st=document.getElementById('sst').value,rl=document.getElementById('srl').value;
|
|
var out=document.getElementById('sresults');out.textContent='Finding the best matches...';
|
|
var f="CAST(reliability AS DOUBLE)>=0.5";
|
|
if(st)f+=" AND state='"+st+"'";if(rl)f+=" AND role='"+rl+"'";
|
|
fetch(A+'/search',{method:'POST',headers:{'Content-Type':'application/json'},
|
|
body:JSON.stringify({question:q,index_name:'workers_500k_v1',sql_filter:f,dataset:'workers_500k',id_column:'worker_id',top_k:8,generate:false})
|
|
}).then(function(r){return r.json()}).then(function(d){
|
|
out.textContent='';var src=d.sources||[];if(!src.length){out.textContent='No matches found. Try different terms or broaden filters.';return}
|
|
var h=document.createElement('div');h.style.cssText='color:#8b949e;font-size:12px;margin-bottom:10px';
|
|
h.textContent='Found '+(d.sql_matches||0).toLocaleString()+' workers matching your filters — showing the '+src.length+' best matches ('+(d.duration_ms||0)+'ms)';
|
|
out.appendChild(h);
|
|
src.forEach(function(s,i){
|
|
var w=pw(s.chunk_text);if(!w.nm)w.nm=s.doc_id;
|
|
addWorkerInsight(out,w.nm,[w.role,w.loc].filter(Boolean).join(' · '),
|
|
(w.hasM?'Reliability: '+Math.round(w.rel*100)+'% · ':'')+(w.certs.length?'Certs: '+w.certs.join(', '):'AI match: '+Math.round(s.score*100)+'%'),i);
|
|
});
|
|
}).catch(function(e){out.textContent='Error: '+e.message});
|
|
}
|
|
</script></body></html>
|