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

   .lens{padding:11px 4px;margin-right:22px;font-size:14px;font-weight:650;color:var(--muted);cursor:pointer;border:0;background:transparent;border-bottom:2.5px solid transparent;margin-bottom:-1px}
   .lens.active{color:var(--brand);border-bottom-color:var(--brand)}
   .lens .b{display:inline-block;background:#eef1fb;color:var(--brand);font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px;margin-left:6px}
   .kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px}
   .kpi{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px 15px;box-shadow:0 1px 2px rgba(20,30,60,.04)}
+  .kpi.clickable{cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}
+  .kpi.clickable:hover{border-color:#c7d0e8;box-shadow:0 3px 10px rgba(20,30,60,.09);transform:translateY(-1px)}
   .kpi .top{display:flex;align-items:center;gap:8px}
   .kpi .ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
   .kpi .label{font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.2}
   .kpi .val{font-size:26px;font-weight:760;margin-top:9px;letter-spacing:-.02em;line-height:1}
   .kpi .val small{font-size:13px;color:var(--soft);font-weight:600}
   .card h2{margin:0 0 3px;font-size:15px;font-weight:720;letter-spacing:-.01em}
   .card .desc{color:var(--muted);font-size:12.5px;margin:0 0 14px}
   .sectionlabel{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);font-weight:700;margin:24px 2px 12px}
   .funnel{display:flex;gap:9px;align-items:stretch}
   .fstep{flex:1;border:1px solid var(--line);border-radius:11px;padding:13px 12px;position:relative;text-align:center;background:#fbfcfe}
+  .fstep.clickable{cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}
+  .fstep.clickable:hover{border-color:#c7d0e8;box-shadow:0 3px 10px rgba(20,30,60,.09);transform:translateY(-1px)}
   .fstep .fn{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
   .fstep .fv{font-size:26px;font-weight:770;margin-top:6px}
   .fstep .fbar{height:5px;border-radius:3px;margin-top:10px;background:linear-gradient(90deg,var(--brand),var(--brand2))}
   .fstep .drop{font-size:11px;color:var(--red);margin-top:7px;font-weight:600}
   .fstep .keep{font-size:11px;color:var(--good);margin-top:7px;font-weight:600}
   spinner();
   fetch(BASE + '/today?date=' + encodeURIComponent(el('bj-date').value) + qs(), {headers:{'Accept':'application/json'}})
     .then(function(r){ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); })
     .then(renderToday).catch(fail);
+}
-function kpi(ic, bg, fg, label, val, foot, valColor){
+function kpi(ic, bg, fg, label, val, foot, valColor, click){
-  return '<div class="kpi"><div class="top"><div class="ic" style="background:'+bg+';color:'+fg+'">'+ic+'</div>'+
+  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){
+function fstep(name, val, w, sub, drop, last, key){
-  return '<div class="fstep"><div class="fn">'+name+'</div><div class="fv">'+num(val)+'</div>'+
+  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>'+
     '<div class="fbar" style="width:'+w+'%"></div><div class="'+(drop?'drop':'keep')+'">'+sub+'</div>'+
     (last?'':'<span class="arrow">&#10148;</span>')+'</div>';
+}
 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;
   window._mediaUrl = d.mediaUrl || window._mediaUrl || '';
+  window._board = d.board || [];          // funnel drill-down filters this
+  window._boardDate = d.date || '';
+  window._leadsList = d.leadsList || [];  // leads drill-down
   var h='';
   h+='<div class="kpis">';
   h+=kpi('&#128101;','#eef1fb','#3b5bdb','Executives scheduled',num(k.scheduled),k.notStarted+' not started yet');
   h+=kpi('&#9201;','#ebfbee','#2f9e44','Punched in',num(k.punchedIn)+' <small>/'+k.scheduled+'</small>',k.notStarted+' pending');
   h+=kpi('&#128205;','#e7f5ff','#1098ad','On route now',num(k.onRouteNow),'live journeys');
-  h+=kpi('&#10003;','#eef1fb','#3b5bdb','Visits done',num(k.visitsDone)+' <small>/'+k.visitsPlanned+'</small>',k.inProgress+' in progress');
+  h+=kpi('&#10003;','#eef1fb','#3b5bdb','Visit vs Planned',num(k.visitsDone)+' <small>/'+k.visitsPlanned+'</small>',k.inProgress+' in progress');
   h+=kpi('&#8635;','#fff4e6','#e8590c','Deferred today',num(k.deferred),'shop closed / unavailable');
-  h+=kpi('&#9733;','#fff0f6','#d6336c','Leads on route',num(k.leads),'new shops logged');
+  h+=kpi('&#9733;','#fff0f6','#d6336c','Leads on route',num(k.leads),'new shops logged',null,'openLeads()');
   h+='</div>';
   h+='<div class="sectionlabel">Today\'s Journey Funnel</div><div class="card"><div class="funnel">';
   var sc=f.scheduled||1;
-  h+=fstep('Scheduled executives',f.scheduled,100,'start of day',false,false);
+  h+=fstep('Scheduled executives',f.scheduled,100,'start of day',false,false,'scheduled');
-  h+=fstep('Punched in',f.punchedIn,pct(f.punchedIn,sc),'&minus;'+(f.scheduled-f.punchedIn)+' never started',true,false);
+  h+=fstep('Punched in',f.punchedIn,pct(f.punchedIn,sc),'&minus;'+(f.scheduled-f.punchedIn)+' never started',true,false,'punchedIn');
-  h+=fstep('Made a check-in',f.madeCheckin,pct(f.madeCheckin,sc),'&minus;'+(f.punchedIn-f.madeCheckin)+' punched, idle',true,false);
+  h+=fstep('Made a check-in',f.madeCheckin,pct(f.madeCheckin,sc),'&minus;'+(f.punchedIn-f.madeCheckin)+' punched, idle',true,false,'madeCheckin');
-  h+=fstep('Completed all visits',f.completedAll,pct(f.completedAll,sc),(f.madeCheckin-f.completedAll)+' still mid-journey',true,false);
+  h+=fstep('Completed all visits',f.completedAll,pct(f.completedAll,sc),(f.madeCheckin-f.completedAll)+' still mid-journey',true,false,'completedAll');
-  h+=fstep('Punched out',f.punchedOut,pct(f.punchedOut,sc),'journey ended',false,true);
+  h+=fstep('Punched out',f.punchedOut,pct(f.punchedOut,sc),'journey ended',false,true,'punchedOut');
   h+='</div></div>';
   h+='<div class="grid g3">';
   h+='<div class="card"><h2>Live executive board</h2><p class="desc">Each executive\'s journey right now. Click a row for the day\'s visit detail.</p>'+boardTable(d.board, d.date)+'</div>';
   h+='<div class="card"><h2>Needs attention now</h2><p class="desc">Things a manager should clear today.</p>'+attentionList(a)+'</div>';
   window.open(u, '_blank');
+}
 function boardTable(rows, date){
   if(!rows||!rows.length) return '<p class="desc">No executives scheduled or active for this date.</p>';
   var h='<div style="overflow-x:auto"><table><thead><tr>'+
-    '<th>Agenda</th><th>Executive</th><th class="num">Planned</th>'+
+    '<th>Agenda</th><th>Executive</th><th>Punch In/Out</th><th class="num">Planned</th>'+
-    '<th>Punch In/Out</th><th>State</th><th class="num">Total</th><th class="num">Completed</th><th class="num">Pending</th><th class="num">Deferred</th><th>Action</th>'+
+    '<th class="num">Completed</th><th class="num">Pending</th><th class="num">Deferred</th><th class="num">Total</th><th>State</th><th>Action</th>'+
     '</tr></thead><tbody>';
   rows.forEach(function(r){
     var rowcls = r.state==='NOT_STARTED' ? 'rowbad' : (r.idleAway?'rowwarn':'');
     var A = r.userId+",'"+js(r.name)+"','"+date+"'";   // openExec args
     var go = 'onclick="openExec('+A+')"';
     h+='<tr class="clickable '+rowcls+'" '+go+'>'+
        '<td style="text-align:center">'+(r.agendaFilled?'<span style="color:#2f9e44;font-size:15px">&#10003;</span>':'<span class="badflag" style="font-size:15px">&#10007;</span>')+'</td>'+
        '<td><b>'+esc(r.name)+'</b><br>'+esc(r.beatName||'-')+'</td>'+
-       '<td class="num">'+r.planned+'</td>'+
        '<td style="white-space:nowrap">'+(r.punchInTime?'<span class="ptime">'+esc(r.punchInTime)+'</span>':'<span class="badflag">-</span>')+
          ' <span style="color:#97a1b5;font-size:11px">/ '+(r.punchOutTime?esc(r.punchOutTime):'--')+'</span></td>'+
-       '<td><span class="pill-state '+stateClass(r.state)+'">'+esc(r.stateLabel)+'</span></td>'+
-       '<td class="num cnt cmuted">'+r.totalVisits+'</td>'+
+       '<td class="num">'+r.planned+'</td>'+
        '<td class="num cnt cgreen">'+r.completedVisits+'</td>'+
        '<td class="num cnt camber">'+r.pendingVisits+'</td>'+
        '<td class="num cnt cred">'+r.deferred+'</td>'+
+       '<td class="num cnt cmuted">'+r.totalVisits+'</td>'+
+       '<td><span class="pill-state '+stateClass(r.state)+'">'+esc(r.stateLabel)+'</span></td>'+
        '<td style="white-space:nowrap" onclick="event.stopPropagation()">'+
          '<button class="actbtn map" title="Live location" onclick="openExec('+A+',\'map\')">&#128205;</button>'+
          '<button class="actbtn view" title="Journey detail" onclick="openExec('+A+')">&#128065;</button>'+
          '<button class="actbtn edit" title="Edit beat in Beat Planner" onclick="openPlanner('+r.authUserId+','+(r.beatId||0)+',\''+date+'\',\'edit\')">&#9998;</button>'+
          '<button class="actbtn add" title="Assign / add visit in Beat Planner" onclick="openPlanner('+r.authUserId+','+(r.beatId||0)+',\''+date+'\',\'add\')">&#43;</button>'+
        '</td></tr>';
   });
   return h+'</tbody></table></div>';
+}
+// Funnel drill-down: each stage shows the executives who reached it AND the
+// drop-off cohort that fell out at this step (the "−N …" sub-line). Filters
+// mirror the backend funnel conditions exactly (rows carry the per-stage flags).
+var FUNNEL_META = {
+  scheduled:    {title:'Scheduled executives', desc:'Have a beat today, or any activity', f:function(r){ return true; }},
+  punchedIn:    {title:'Punched in',           desc:'Started the day (punch-in recorded)', f:function(r){ return r.punchedIn; },
+                 dropLabel:'Never started (scheduled, no punch-in)', drop:function(r){ return !r.punchedIn; }},
+  madeCheckin:  {title:'Made a check-in',      desc:'Checked in at one or more stops', f:function(r){ return r.madeCheckin; },
+                 dropLabel:'Punched in but idle (no check-in)', drop:function(r){ return r.punchedIn && !r.madeCheckin; }},
+  completedAll: {title:'Completed all visits', desc:'Finished every planned stop', f:function(r){ return r.completedAll; },
+                 dropLabel:'Still mid-journey (not all stops done)', drop:function(r){ return r.madeCheckin && !r.completedAll; }},
+  punchedOut:   {title:'Punched out',          desc:'Ended the day (punch-out recorded)', f:function(r){ return r.punchedOut; },
+                 dropLabel:'Still out (punched in, not punched out)', drop:function(r){ return r.punchedIn && !r.punchedOut; }}
+};
+function funnelRows(list, date){
+  if(!list.length) return '<p class="desc">None.</p>';
+  var h='<table><thead><tr><th>Executive / Beat</th><th>Punch In/Out</th><th class="num">Completed</th><th class="num">Planned</th><th>State</th></tr></thead><tbody>';
+  list.slice().sort(function(a,b){ return (''+a.name).localeCompare(b.name); }).forEach(function(r){
+    var A=r.userId+",'"+js(r.name)+"','"+date+"'";
+    h+='<tr class="clickable" onclick="openExec('+A+')">'+
+       '<td><b>'+esc(r.name)+'</b><br><span style="color:#97a1b5;font-size:11px">'+esc(r.beatName||'-')+'</span></td>'+
+       '<td style="white-space:nowrap">'+(r.punchInTime?'<span class="ptime">'+esc(r.punchInTime)+'</span>':'<span class="badflag">-</span>')+
+         ' <span style="color:#97a1b5;font-size:11px">/ '+(r.punchOutTime?esc(r.punchOutTime):'--')+'</span></td>'+
+       '<td class="num cnt cgreen">'+r.completedVisits+'</td>'+
+       '<td class="num">'+r.planned+'</td>'+
+       '<td><span class="pill-state '+stateClass(r.state)+'">'+esc(r.stateLabel)+'</span></td></tr>';
+  });
+  return h+'</tbody></table>';
+}
+function openFunnel(key){
+  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');
+  var h='<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(m.title)+'</h3>'+
+        '<p class="desc">'+reached.length+' '+(reached.length===1?'executive':'executives')+' &middot; '+esc(m.desc)+'</p>'+
+        funnelRows(reached, date);
+  if(m.drop){
+    h+='<div class="sectionlabel" style="margin-top:18px;color:#e8590c">'+esc(m.dropLabel)+' &middot; '+dropped.length+'</div>'+
+       funnelRows(dropped, date);
+  }
+  h+='<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');
+}
+// Leads drill-down: lists every lead visit logged today (matches the KPI count).
+function openLeads(){
+  var list=window._leadsList||[], date=window._boardDate||'';
+  var mb=el('bj-modal-back'), md=el('bj-modal');
+  var h='<button class="x" onclick="closeModal()">&times;</button><h3>Leads on route</h3>'+
+        '<p class="desc">'+list.length+' lead '+(list.length===1?'visit':'visits')+' logged'+(date?' on '+esc(date):'')+'</p>';
+  if(!list.length){ h+='<p class="desc">No leads logged for this date.</p>'; }
+  else {
+    h+='<table><thead><tr><th>Executive</th><th>Lead</th><th>Check-in</th><th>Status</th></tr></thead><tbody>';
+    list.slice().sort(function(a,b){ return (''+a.exec).localeCompare(b.exec); }).forEach(function(r){
+      var A=r.userId+",'"+js(r.exec)+"','"+date+"'";
+      var go = r.userId ? ' class="clickable" onclick="openExec('+A+')"' : '';
+      h+='<tr'+go+'>'+
+         '<td><b>'+esc(r.exec)+'</b></td>'+
+         '<td>'+esc(r.lead||'-')+'</td>'+
+         '<td style="white-space:nowrap">'+(r.checkInTime?'<span class="ptime">'+esc(hhmm(r.checkInTime))+'</span>':'<span class="badflag">-</span>')+'</td>'+
+         '<td>'+esc(r.status||'')+'</td></tr>';
+    });
+    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');
+}
 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'},
   var h='<div class="jstats">'+
     jstat(fmtSec(workSec),'Working hours')+
     jstat(fmtSec(inStoreSec),'In-store time')+
     jstat(fmtSec(transitSec),'Travel time')+
     jstat(distKm.toFixed(2)+' km','Distance Covered')+
-    jstat(visited.length+(leadsN?' &middot; '+leadsN+'L':''),'Stores / Leads')+
+    jstat(visited.length+(leadsN?' / '+leadsN+'L':''),'Visits / Leads')+
     '</div>';
   if(!seq.length){ return h+'<p class="desc">No tracking events for this day.</p>'; }
   h+='<div class="tl">';
   var ri=0;
   seq.forEach(function(x){

Subversion Repositories SmartDukaan

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