WebSVN – SmartDukaan – Diff – /trunk/profitmandi-fofo/src/main/webapp/WEB-INF/views/ftl/beat-journey.vm

   .bstat.ok{background:#ebfbee;color:#2f9e44}
   .bstat.warn{background:#fff4e6;color:#e8590c}
   .bstat.no{background:#fff0f0;color:#e03131}
   .bdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
   .ptime{display:inline-block;background:#ebfbee;color:#2f9e44;font-weight:700;font-size:11px;padding:2px 7px;border-radius:6px;font-variant-numeric:tabular-nums}
+  .potime{display:inline-block;background:#ebfbee;color: #D60303A8;font-weight:700;font-size:11px;padding:2px 7px;border-radius:6px;font-variant-numeric:tabular-nums}
   td.cnt{font-weight:700;font-variant-numeric:tabular-nums}
   .cgreen{color:#2f9e44}.camber{color:#f08c00}.cred{color:#e03131}.cmuted{color:#69748c}
   .actbtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;border:0;cursor:pointer;color:#fff;font-size:12px;margin-left:3px}
   .actbtn.map{background:#12b886}.actbtn.view{background:#3b5bdb}
   .actbtn.edit{background:#f08c00}.actbtn.add{background:#2f9e44;font-size:15px}
   .donut{width:138px;height:138px;border-radius:50%;flex:none;position:relative;
     -webkit-mask:radial-gradient(circle 42px at center,transparent 98%,#000 100%);mask:radial-gradient(circle 42px at center,transparent 98%,#000 100%)}
   .donut .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;-webkit-mask:none;mask:none}
   .legend{display:flex;flex-direction:column;gap:9px;font-size:12.5px}
   .legend .it{display:flex;align-items:flex-start;gap:9px}
+  .legend .it.clickable{cursor:pointer;border-radius:8px;padding:4px 6px;margin:-4px -6px;transition:background .12s}
+  .legend .it.clickable:hover{background:#f1f3f9}
+  .barrow.clickable{cursor:pointer}
+  .barrow.clickable:hover .track{outline:2px solid #c7d0e8;outline-offset:1px;border-radius:7px}
+  .donut.clickable{cursor:pointer}
   .dot{width:11px;height:11px;border-radius:3px;flex:none;margin-top:3px}
   .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
   .tile{background:#f8f9fc;border:1px solid var(--line2);border-radius:11px;padding:12px}
   .tile .t{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--soft);font-weight:600}
   .tile .v{font-size:21px;font-weight:760;margin-top:5px}
   return '<div class="kpi'+(click?' clickable':'')+'"'+(click?' onclick="'+click+'" title="Click for details"':'')+'><div class="top"><div class="ic" style="background:'+bg+';color:'+fg+'">'+ic+'</div>'+
     '<div class="label">'+label+'</div></div><div class="val"'+(valColor?' style="color:'+valColor+'"':'')+'>'+val+'</div>'+
     '<div class="foot">'+foot+'</div></div>';
+}
 function fstep(name, val, w, sub, drop, last, key){
-  return '<div class="fstep clickable" onclick="openFunnel(\''+key+'\')" title="Click to see these executives"><div class="fn">'+name+'</div><div class="fv">'+num(val)+'</div>'+
+  return '<div class="fstep'+(key?' clickable" onclick="openFunnel(\''+key+'\')" title="Click to see these executives':'')+'"><div class="fn">'+name+'</div><div class="fv">'+num(val)+'</div>'+
-    '<div class="fbar" style="width:'+w+'%"></div><div class="'+(drop?'drop':'keep')+'">'+sub+'</div>'+
+    '<div class="fbar" style="width:'+Math.min(w,100)+'%"></div><div class="'+(drop?'drop':'keep')+'">'+sub+'</div>'+
     (last?'':'<span class="arrow">&#10148;</span>')+'</div>';
+}
+// Funnel drop sub-text: positive = fell out (red); negative = above planned
+// (leads push visits past planned stops) shown green; zero = on plan.
+function fdrop(p, badLabel){
+  if(p>0) return '&minus;'+p+'% '+badLabel;
+  if(p<0) return '+'+(-p)+'% above planned';
+  return 'on plan';
+}
 function leakbox(t, v, color){ return '<div class="leakbox"><div class="lt">'+t+'</div><div class="lv"'+(color?' style="color:'+color+'"':'')+'>'+num(v)+'</div></div>'; }
 function renderToday(d){
   var k=d.kpis, f=d.funnel, s=d.stops, a=d.attention;
   window._canApprove = !!d.canApprove;
        '<td><span class="pill-state '+stateClass(r.state)+'">'+esc(r.stateLabel)+'</span></td></tr>';
   });
   return h+'</tbody></table>';
+}
 function openFunnel(key){
+  if(key && key.indexOf('p_')===0) return openPFunnel(key);   // period funnel
   var m=FUNNEL_META[key]; if(!m) return;
   var board=window._board||[], date=window._boardDate||'';
   var reached=board.filter(m.f);
   var dropped=m.drop ? board.filter(m.drop) : [];
   var mb=el('bj-modal-back'), md=el('bj-modal');
     });
     h+='</tbody></table><p class="desc" style="margin-top:10px">Click a row to open that executive\'s journey detail.</p>';
+  }
   md.innerHTML=h; mb.classList.add('show');
+}
+/* ===================== PERIOD (ANALYTICS) DRILL-DOWNS ===================== */
+function pModal(html){ el('bj-modal').innerHTML=html; el('bj-modal-back').classList.add('show'); }
+function pRange(){ return (el('bj-start')?el('bj-start').value:'')+' to '+(el('bj-end')?el('bj-end').value:''); }
+// Scorecard list popup (used by KPI cards + funnel stages). Rows drill to the
+// executive's day-by-day. sortKey sorts descending.
+function openPScore(sortKey, title, desc){
+  var rows=(((window._period||{}).scorecard)||[]).slice();
+  if(sortKey) rows.sort(function(a,b){ return (b[sortKey]||0)-(a[sortKey]||0); });
+  pModal('<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(title)+'</h3>'+
+    '<p class="desc">'+esc(desc)+' &middot; '+esc(pRange())+' &middot; click a row for the day-by-day</p>'+pScoreTable(rows));
+}
+function pScoreTable(rows){
+  if(!rows.length) return '<p class="desc">No executives in scope.</p>';
+  var h='<table><thead><tr><th>Executive</th><th class="num">Plan</th><th class="num">Done</th><th class="num">Adher.</th><th class="num">Disc.</th><th class="num">Hrs</th><th class="num">Leads</th><th class="num">Geo&#9888;</th></tr></thead><tbody>';
+  rows.forEach(function(r){
+    var c=adhColor(r.adherencePct);
+    h+='<tr class="clickable" onclick="openExecPeriod('+r.authUserId+',\''+js(r.name)+'\')">'+
+       '<td><b>'+esc(r.name)+'</b> <span class="lvl">'+esc(r.level)+'</span></td>'+
+       '<td class="num">'+r.planned+'</td><td class="num">'+r.done+'</td>'+
+       '<td class="num"><b style="color:'+c+'">'+r.adherencePct+'%</b></td>'+
+       '<td class="num'+(r.discussionMin>0&&r.discussionMin<10?' warnflag':'')+'">'+(r.discussionMin||'-')+(r.discussionMin?'m':'')+'</td>'+
+       '<td class="num">'+r.workingHrs+'</td><td class="num">'+r.leads+'</td>'+
+       '<td class="num'+(r.geoFlags>0?' badflag':'')+'">'+r.geoFlags+'</td></tr>';
+  });
+  return h+'</tbody></table>';
+}
+// Funnel stage → the executives behind it (the scorecard, focused).
+function openPFunnel(key){
+  var map={ p_planned:['planned','Planned stops','Planned partner + lead stops per executive'],
+            p_punchedin:['done','Planned on punch-in days','Executives, planned vs done'],
+            p_checkedin:['done','Checked in','Visits checked in per executive'],
+            p_checkedout:['done','Checked out (done)','Visits completed per executive'] };
+  var m=map[key]; if(m) openPScore(m[0],m[1],m[2]);
+}
+// Executive day-by-day (scorecard row drill). Fetches /exec-period; each day
+// opens the journey detail / map modal.
+function openExecPeriod(authUserId, name){
+  pModal('<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(name)+'</h3>'+
+    '<p class="desc">Day-by-day &middot; '+esc(pRange())+'</p><div class="loading"><div class="spinner"></div>Loading&hellip;</div>');
+  fetch(BASE+'/exec-period?authUserId='+authUserId+'&startDate='+encodeURIComponent(el('bj-start').value)+'&endDate='+encodeURIComponent(el('bj-end').value),{headers:{'Accept':'application/json'}})
+    .then(function(r){ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); })
+    .then(function(d){
+      var rows=d.rows||[], uid=d.userId, nm=d.name||name;
+      var h='<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(nm)+'</h3>'+
+        '<p class="desc">'+rows.length+' day'+(rows.length===1?'':'s')+' &middot; '+esc(pRange())+(uid?' &middot; click a day for the journey detail':'')+'</p>';
+      if(!rows.length){ h+='<p class="desc">No scheduled or active days in this range.</p>'; }
+      else {
+        h+='<table><thead><tr><th>Date</th><th>Punch In/Out</th><th class="num">Planned</th><th class="num">Completed</th><th class="num">Deferred</th><th class="num">Total</th></tr></thead><tbody>';
+        rows.forEach(function(r){
+          var go = uid ? ' class="clickable" onclick="openExec('+uid+',\''+js(nm)+'\',\''+r.date+'\')"' : '';
+          h+='<tr'+go+'><td>'+esc(r.date)+'</td>'+
+             '<td style="white-space:nowrap">'+(r.punchIn?'<span class="ptime">'+esc(hhmm(r.punchIn))+'</span>':'<span class="badflag">-</span>')+
+               ' <span style="color:#97a1b5;font-size:11px">/ '+(r.punchOut?esc(hhmm(r.punchOut)):'--')+'</span></td>'+
+             '<td class="num">'+r.planned+'</td><td class="num cnt cgreen">'+r.done+'</td>'+
+             '<td class="num cnt cred">'+r.deferred+'</td><td class="num cnt cmuted">'+r.total+'</td></tr>';
+        });
+        h+='</tbody></table>';
+      }
+      el('bj-modal').innerHTML=h;
+    })
+    .catch(function(){ el('bj-modal').innerHTML='<button class="x" onclick="closeModal()">&times;</button><p class="desc">Could not load day-by-day.</p>'; });
+}
+// PJP coverage drill — execs with / without a plan (optionally one level).
+function openCoverage(level){
+  var all=((window._period||{}).coverageDetail)||[];
+  var list=level ? all.filter(function(r){ return r.level===level; }) : all;
+  var without=list.filter(function(r){ return !r.hasPlan; }), withP=list.filter(function(r){ return r.hasPlan; });
+  function tbl(rs){
+    if(!rs.length) return '<p class="desc">None.</p>';
+    var h='<table><tbody>';
+    rs.forEach(function(r){ h+='<tr class="clickable" onclick="openExecPeriod('+r.authUserId+',\''+js(r.name)+'\')"><td style="font-weight:600">'+esc(r.name)+'</td><td><span class="lvl">'+esc(r.level)+'</span></td></tr>'; });
+    return h+'</tbody></table>';
+  }
+  pModal('<button class="x" onclick="closeModal()">&times;</button><h3>PJP coverage'+(level?' &middot; '+esc(level):'')+'</h3>'+
+    '<p class="desc">'+withP.length+' of '+list.length+' have a monthly plan &middot; '+esc(pRange())+'</p>'+
+    '<div class="sectionlabel" style="color:#e03131">No plan &middot; '+without.length+'</div>'+tbl(without)+
+    '<div class="sectionlabel" style="color:#2f9e44;margin-top:16px">Has a plan &middot; '+withP.length+'</div>'+tbl(withP));
+}
+// Deferrals drill — all, or just system / genuine (from the donut segments).
+function openDeferrals(filter){
+  var all=((window._period||{}).deferralsList)||[];
+  var list = filter==='system' ? all.filter(function(r){ return r.system; })
+           : filter==='genuine' ? all.filter(function(r){ return !r.system; }) : all;
+  var title = filter==='system' ? 'Deferrals — system-flagged' : filter==='genuine' ? 'Deferrals — genuine reason' : 'Deferrals';
+  var h='<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(title)+'</h3>'+
+        '<p class="desc">'+list.length+' deferral'+(list.length===1?'':'s')+' &middot; '+esc(pRange())+'</p>';
+  if(!list.length){ h+='<p class="desc">None in this range.</p>'; }
+  else {
+    h+='<table><thead><tr><th>Executive</th><th>Partner</th><th>Reason</th><th>Date</th><th>Status</th></tr></thead><tbody>';
+    list.forEach(function(r){
+      h+='<tr><td style="font-weight:600;white-space:nowrap">'+esc(r.exec)+'</td>'+
+         '<td>'+esc(r.partner||'-')+'</td>'+
+         '<td style="color:'+(r.system?'#f08c00':'#2f9e44')+'">'+esc(r.reason||'-')+'</td>'+
+         '<td style="white-space:nowrap">'+esc(r.date||'')+'</td>'+
+         '<td>'+esc(r.status||'')+'</td></tr>';
+    });
+    h+='</tbody></table>';
+  }
+  pModal(h);
+}
+// Leads drill (period) — every lead created in the range.
+function openPLeads(){
+  var list=((window._period||{}).leadsList)||[];
+  var h='<button class="x" onclick="closeModal()">&times;</button><h3>Leads on route</h3>'+
+        '<p class="desc">'+list.length+' lead'+(list.length===1?'':'s')+' created &middot; '+esc(pRange())+'</p>';
+  if(!list.length){ h+='<p class="desc">No leads created in this range.</p>'; }
+  else {
+    h+='<table><thead><tr><th>Executive</th><th>Lead</th><th>City</th><th>Date</th><th>Status</th></tr></thead><tbody>';
+    list.forEach(function(r){
+      h+='<tr><td style="font-weight:600;white-space:nowrap">'+esc(r.exec)+'</td>'+
+         '<td>'+esc(r.lead||'-')+'</td><td>'+esc(r.city||'')+'</td>'+
+         '<td style="white-space:nowrap">'+esc(r.date||'')+'</td><td>'+esc(r.status||'')+'</td></tr>';
+    });
+    h+='</tbody></table>';
+  }
+  pModal(h);
+}
 function names(list,n){ if(!list||!list.length) return 'None'; var s=list.slice(0,n).join(', '); if(list.length>n) s+=' +'+(list.length-n); return s; }
 var ATT_META = {
   notPunchedIn:    {bg:'#fff0f0', fg:'#e03131', ic:'&#9888;',   title:'Not punched in',                  sub:'executives with a beat, not started', cls:'badflag'},
   idleStale:       {bg:'#fff4e6', fg:'#e8590c', ic:'&#9201;',   title:'Idle &mdash; off-store &gt; 40 min', sub:'stationary &gt;20 m from any store',  cls:'warnflag'},
   geofence:        {bg:'#fff0f0', fg:'#e03131', ic:'&#128205;', title:'Check-in outside store geofence',  sub:'&gt;50 m from partner\'s saved location', cls:'badflag'},
     .then(function(r){ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); })
     .then(renderPeriod).catch(fail);
+}
 function tile(t,v){ return '<div class="tile"><div class="t">'+t+'</div><div class="v">'+v+'</div></div>'; }
 function renderPeriod(d){
+  window._period = d;          // drill-downs read scorecard / lists from here
   var k=d.kpis, f=d.funnel, df=d.deferral, u=d.utilization, t=d.travel, o=d.outcomes;
   var neverTouched = Math.max((f.plannedStops||0)-(f.checkedIn||0)-(df.total||0),0);
   var h='';
   h+='<div class="kpis">';
-  h+=kpi('&#9878;','#fff4e6','#f08c00','Adherence',k.adherencePct+'<small>%</small>',num(k.doneStops)+' of '+num(k.plannedStops)+' stops done',adhColor(k.adherencePct));
+  h+=kpi('&#9878;','#fff4e6','#f08c00','Adherence',k.adherencePct+'<small>%</small>',num(k.doneStops)+' of '+num(k.plannedStops)+' stops done',adhColor(k.adherencePct),"openPScore('adherencePct','Adherence','Planned vs done per executive')");
-  h+=kpi('&#128506;','#e7f5ff','#1098ad','PJP coverage L1',k.coverageL1Pct+'<small>%</small>',k.coverageL1With+'/'+k.coverageL1Total+' have a plan','#1098ad');
+  h+=kpi('&#128506;','#e7f5ff','#1098ad','PJP coverage L1',k.coverageL1Pct+'<small>%</small>',k.coverageL1With+'/'+k.coverageL1Total+' have a plan','#1098ad',"openCoverage('L1')");
-  h+=kpi('&#128694;','#ebfbee','#2f9e44','Visits / active day',k.avgVisitsPerActiveDay,'across '+num(k.journeys)+' journeys');
+  h+=kpi('&#128694;','#ebfbee','#2f9e44','Visits / active day',k.avgVisitsPerActiveDay,'across '+num(k.journeys)+' journeys',null,"openPScore('done','Visits / active day','Visits completed per executive')");
-  h+=kpi('&#128172;','#eef1fb','#3b5bdb','Discussion / store',k.avgDiscussionMin+' <small>min</small>','target 30&ndash;45 min', k.avgDiscussionMin>0&&k.avgDiscussionMin<30?'#e8590c':null);
+  h+=kpi('&#128172;','#eef1fb','#3b5bdb','Discussion / store',k.avgDiscussionMin+' <small>min</small>','target 30&ndash;45 min', k.avgDiscussionMin>0&&k.avgDiscussionMin<30?'#e8590c':null,"openPScore('discussionMin','Discussion / store','Avg in-store discussion per executive')");
-  h+=kpi('&#8635;','#fff0f0','#e03131','Auto "missed"',num(k.autoMissed),k.autoMissedSystemPct+'% system-flagged','#e03131');
+  h+=kpi('&#8635;','#fff0f0','#e03131','Auto "missed"',num(k.autoMissed),k.autoMissedSystemPct+'% system-flagged','#e03131',"openDeferrals()");
-  h+=kpi('&#9733;','#fff0f6','#d6336c','Leads on route',num(k.leadsCreated),'this period');
+  h+=kpi('&#9733;','#fff0f6','#d6336c','Leads on route',num(k.leadsCreated),'this period',null,"openPLeads()");
   h+='</div>';
   h+='<div class="sectionlabel">Aggregate Journey Funnel</div><div class="card"><div class="funnel">';
   var pl=f.plannedStops||1;
-  h+=fstep('Planned stops',f.plannedStops,100,'scheduled',false,false);
+  h+=fstep('Planned stops',f.plannedStops,100,'scheduled',false,false,'p_planned');
-  h+=fstep('Days punched in',f.punchedIn,pct(f.punchedIn,pl),'&minus;'+f.dropPunch+'% no punch-in',true,false);
+  h+=fstep('Planned on punch-in days',f.punchedIn,pct(f.punchedIn,pl),fdrop(f.dropPunch,'no punch-in'),f.dropPunch>0,false,'p_punchedin');
-  h+=fstep('Checked in',f.checkedIn,pct(f.checkedIn,pl),'&minus;'+f.dropCheckin+'% reached, skipped',true,false);
+  h+=fstep('Checked in',f.checkedIn,pct(f.checkedIn,pl),fdrop(f.dropCheckin,'reached, skipped'),f.dropCheckin>0,false,'p_checkedin');
-  h+=fstep('Checked out (done)',f.checkedOut,pct(f.checkedOut,pl),'&minus;'+f.dropCheckout+'% no checkout',false,true);
+  h+=fstep('Checked out (done)',f.checkedOut,pct(f.checkedOut,pl),fdrop(f.dropCheckout,'no checkout'),f.dropCheckout>0,true,'p_checkedout');
-  h+='</div><div class="leak">';
-  h+=leakbox('Deferred &mdash; genuine',df.human,'#2f9e44');
-  h+=leakbox('Deferred &mdash; system flag',df.systemGenerated,'#f08c00');
-  h+=leakbox('Heads acted on',df.actioned,null);
-  h+=leakbox('Never touched',neverTouched,'#e03131');
   h+='</div></div>';
   h+='<div class="sectionlabel">Adherence &amp; Coverage</div><div class="grid g3">';
   h+='<div class="card"><h2>Per-executive scorecard <span style="color:#97a1b5;font-weight:500;font-size:12px">&middot; '+d.scorecard.length+' executives</span></h2><p class="desc">The coaching list &mdash; click a header to sort. Reds are where to intervene.</p>'+scorecardTable(d.scorecard)+'</div>';
   h+='<div class="card"><h2>Coverage by sales level</h2><p class="desc">Filled = executives with a plan; light = total at that level.</p>'+coverageBars(d.coverageByLevel)+utilBlock(u)+'</div>';
     '<th class="num" onclick="sortCard(\'workingHrs\')">Hrs</th>'+
     '<th class="num" onclick="sortCard(\'leads\')">Leads</th>'+
     '<th class="num" onclick="sortCard(\'geoFlags\')">Geo&#9888;</th></tr></thead><tbody>';
   rows.forEach(function(r){
     var c=adhColor(r.adherencePct);
-    h+='<tr><td>'+esc(r.name)+' <span class="lvl">'+esc(r.level)+'</span></td>'+
+    h+='<tr class="clickable" onclick="openExecPeriod('+r.authUserId+',\''+js(r.name)+'\')"><td>'+esc(r.name)+' <span class="lvl">'+esc(r.level)+'</span></td>'+
        '<td class="num">'+r.planned+'</td><td class="num">'+r.done+'</td>'+
        '<td class="num"><b style="color:'+c+'">'+r.adherencePct+'%</b><span class="meter"><i style="width:'+Math.min(100,r.adherencePct)+'%;background:'+c+'"></i></span></td>'+
        '<td class="num'+(r.discussionMin>0&&r.discussionMin<10?' warnflag':'')+'">'+(r.discussionMin||'-')+(r.discussionMin?'m':'')+'</td>'+
        '<td class="num">'+r.workingHrs+'</td><td class="num">'+r.leads+'</td>'+
        '<td class="num'+(r.geoFlags>0?' badflag':'')+'">'+r.geoFlags+'</td></tr>';
 function coverageBars(rows){
   if(!rows||!rows.length) return '<p class="desc">No coverage data.</p>';
   var max=0; rows.forEach(function(r){ if(r.totalUsers>max)max=r.totalUsers; }); if(!max)max=1;
   var h=''; rows.forEach(function(r){
     var w=pct(r.withPjp,max), wt=pct(r.totalUsers,max);
-    h+='<div class="barrow"><div class="name">'+esc(r.level)+'</div><div class="track">'+
+    h+='<div class="barrow clickable" onclick="openCoverage(\''+js(r.level)+'\')" title="Click to see these executives"><div class="name">'+esc(r.level)+'</div><div class="track">'+
        '<div style="position:absolute;inset:0;width:'+wt+'%;background:#e3e8f5;border-radius:7px"></div>'+
        '<div class="fill" style="width:'+w+'%;position:relative;background:linear-gradient(90deg,#1098ad,#22b8cf)">'+(r.withPjp||'')+'</div></div>'+
        '<div class="meta">'+r.withPjp+'/'+r.totalUsers+' &middot; '+r.coveragePct+'%</div></div>';
   });
   return h;
     '<span><span class="dot" style="background:#e03131;margin:0"></span>Idle '+u.idleHrs+' h</span></div>';
+}
 function deferDonut(df){
   var sysPct=df.systemPct||0;
   var g='conic-gradient(#f59f00 0 '+sysPct+'%, #2f9e44 '+sysPct+'% 100%)';
-  return '<div class="donutwrap"><div class="donut" style="background:'+g+'"><div class="center">'+
+  return '<div class="donutwrap"><div class="donut clickable" onclick="openDeferrals()" title="Click to see all deferrals" style="background:'+g+'"><div class="center">'+
     '<div style="font-size:24px;font-weight:780">'+num(df.total)+'</div><div style="font-size:11px;color:#97a1b5">deferrals</div></div></div>'+
     '<div class="legend">'+
-    '<div class="it"><span class="dot" style="background:#f59f00"></span><div><b>'+df.systemGenerated+'</b> system auto-flagged ('+sysPct+'%)<br><span style="color:#97a1b5;font-size:11.5px">"beat missed", "no punch-in"</span></div></div>'+
+    '<div class="it clickable" onclick="openDeferrals(\'system\')"><span class="dot" style="background:#f59f00"></span><div><b>'+df.systemGenerated+'</b> system auto-flagged ('+sysPct+'%)<br><span style="color:#97a1b5;font-size:11.5px">"beat missed", "no punch-in"</span></div></div>'+
-    '<div class="it"><span class="dot" style="background:#2f9e44"></span><div><b>'+df.human+'</b> genuine reason ('+df.humanPct+'%)</div></div>'+
+    '<div class="it clickable" onclick="openDeferrals(\'genuine\')"><span class="dot" style="background:#2f9e44"></span><div><b>'+df.human+'</b> genuine reason ('+df.humanPct+'%)</div></div>'+
     '<div class="it"><span class="dot" style="background:#3b5bdb"></span><div><b>'+df.actioned+'</b> acted on by a head'+(df.avgDaysToAction?'<br><span style="color:#97a1b5;font-size:11.5px">avg '+df.avgDaysToAction+' days to action</span>':'')+'</div></div>'+
-    '</div></div><p class="desc" style="margin-top:13px">"System" vs "genuine" is read from the deferral reason; there is no separate flag.</p>';
+    '</div></div><p class="desc" style="margin-top:13px">Click the chart for all deferrals, or a legend row for system / genuine. "System" vs "genuine" is read from the deferral reason.</p>';
+}
 function travelBlock(t){
   var rows=t.legBuckets||[], max=0; rows.forEach(function(r){ if(r.count>max)max=r.count; }); if(!max)max=1;
   var colors={'0-2 km':'#2f9e44','2-5 km':'#2f9e44','5-15 km':'#82c91e','15-50 km':'#f59f00','50 km+':'#e03131'};
   var h=''; rows.forEach(function(r){
 // Download the Employee Task Report (.xlsx). Today lens exports the single
 // selected day; Period lens exports the whole start..end range. Both carry the
 // current level / team scope (qs()). The download is served as an attachment, so
 // navigating to the URL triggers the file save without leaving the page.
 function exportReport(){
-  var start, end;
+  var start, end, path;
+  if(LENS==='period'){
+    // Period lens: per-employee totals + a Raw Data sheet (separate endpoint).
-  if(LENS==='period'){ start=el('bj-start').value; end=el('bj-end').value; }
+    start=el('bj-start').value; end=el('bj-end').value; path='/export-period';
+  } else {
+    // Today lens: the day-grouped Employee Task Report (unchanged).
-  else { start=el('bj-date').value; end=start; }
+    start=el('bj-date').value; end=start; path='/export';
+  }
-  var u = BASE + '/export?startDate=' + encodeURIComponent(start) + '&endDate=' + encodeURIComponent(end) + qs();
+  var u = BASE + path + '?startDate=' + encodeURIComponent(start) + '&endDate=' + encodeURIComponent(end) + qs();
   window.location.href = u;
+}
 /* ============================ INIT ============================ */
 document.querySelectorAll('.lens').forEach(function(b){ b.addEventListener('click', function(){ setLens(b.getAttribute('data-lens')); }); });

Subversion Repositories SmartDukaan

(root)/trunk/profitmandi-fofo/src/main/webapp/WEB-INF/views/ftl/beat-journey.vm – Rev 36905 → 36913