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

   .att .adet{font-size:12px;color:var(--muted);margin-top:2px}
   .att .acount{font-size:18px;font-weight:780}
   .att.clickable{cursor:pointer;transition:border-color .12s,box-shadow .12s}
   .att.clickable:hover{border-color:#c7d0e8;box-shadow:0 2px 8px rgba(20,30,60,.08)}
   .att .chev{color:#c2cadb;font-size:13px;margin-left:8px}
+  .attrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
+  .attrow .att{margin-bottom:0}
+  @media (max-width:1000px){.attrow{grid-template-columns:repeat(2,1fr)}}
   .barrow{display:grid;grid-template-columns:60px 1fr 90px;align-items:center;gap:11px;margin:8px 0}
   .barrow .name{font-size:13px;font-weight:600}
   .track{background:#f1f3f9;border-radius:7px;height:20px;position:relative;overflow:hidden}
   .fill{height:100%;border-radius:7px;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:10.5px;color:#fff;font-weight:650;min-width:2px}
   .barrow .meta{font-size:11.5px;color:var(--muted);text-align:right}
   .tlcard .tm{flex:none;width:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-weight:750;font-size:13px;padding:6px 4px;line-height:1.05}
   .tlcard .tm small{font-weight:600;font-size:8.5px;opacity:.9;text-transform:uppercase;letter-spacing:.04em;margin-top:3px}
   .tlcard .bd{padding:8px 11px;flex:1;min-width:0}
   .tlcard .bd .ti{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.25;word-break:break-word}
   .tlcard .bd .stt{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:1px 6px;border-radius:5px;margin-top:5px;color:#fff}
+  .tlcard .bd .stt.unplanned{background:#fff4e6;color:#e8590c;border:1px solid #ffd8a8;margin-left:5px}
   .tlcard .bd .mt{font-size:11px;color:var(--muted);margin-top:6px}
   .tlextra{display:flex;align-items:center;gap:7px;margin-top:8px;flex-wrap:wrap}
   .tlrow.left .tlextra{justify-content:flex-end}
   .tlrow.right .tlextra{justify-content:flex-start}
   .tlthumb{width:46px;height:46px;border-radius:8px;object-fit:cover;border:1px solid var(--line);cursor:pointer;background:#f1f3f9}
     '<div class="top"><div class="ic" style="background:'+bg+';color:'+fg+'">'+ic+'</div><div class="label">'+title+'</div></div>'+
     '<div class="brow blabs">'+lab+'</div>'+
     '<div class="brow bvals">'+val+'</div></div>';
+}
 // Period journey summary as a row of cards (old funnel layout). Each card is a
-// group (Total Visits / Avg Time Spent / Idle-Break / Deferred / Completed) split
+// group (Total Visits / Avg Time Spent / Idle-Break / Deferred / Completed),
-// into Planned vs Self Assigned columns. col=[[label,value,colorClass],...].
+// planned and self-assigned merged into one value. col=[[label,value,colorClass],...].
 function summaryCard(title, cols, last){
   var body='';
   for(var i=0;i<cols.length;i++){
     body+='<div class="scol"><div class="sl">'+cols[i][0]+'</div>'+
           '<div class="sv'+(cols[i][2]?' '+cols[i][2]:'')+'">'+cols[i][1]+'</div></div>';
     (last?'':'<span class="arrow">&#10148;</span>')+'</div>';
+}
 function summaryCards(s){
   if(!s) return '';
   var mn=function(v){return num(v)+'<span class="u">min</span>';};
+  // planned + self-assigned merged into single totals
+  var totalVisits=(s.plannedVisits||0)+(s.selfVisits||0);
+  var completed=(s.completedPlanned||0)+(s.completedSelf||0);
-  var dpC=s.deferredPlanned>0?'bad':'', dsC=s.deferredSelf>0?'bad':'';
+  var deferred=(s.deferredPlanned||0)+(s.deferredSelf||0);
-  return summaryCard('Total Visits',[['Planned',num(s.plannedVisits),''],['Self Assigned',num(s.selfVisits),'']])+
+  return summaryCard('Total Visits',[['Visits',num(totalVisits),'']])+
-    summaryCard('Average Time Spent',[['Planned',mn(s.avgTimePlannedMin),''],['Self Assigned',mn(s.avgTimeSelfMin),'']])+
+    summaryCard('Average Time Spent',[['Per visit',mn(s.avgTimeAllMin),'']])+
     summaryCard('Idle / Break',[['Total Average',mn(s.idleAvgMin),'']])+
-    summaryCard('Completed Visits',[['Planned',num(s.completedPlanned),'good'],['Self Assigned',num(s.completedSelf),'good']])+
+    summaryCard('Completed Visits',[['Completed',num(completed),'good']])+
-    summaryCard('Deferred',[['Planned',num(s.deferredPlanned),dpC],['Self Assigned',num(s.deferredSelf),dsC]],true);
+    summaryCard('Deferred',[['Deferred',num(deferred),deferred>0?'bad':'']],true);
+}
 function fstep(name, val, w, sub, drop, last, key){
   return '<div class="fstep'+(key?' clickable" data-fkey="'+key+'" onclick="funnelClick(\''+key+'\')" title="Click to filter the board to these executives':'')+'"><div class="fn">'+name+'</div><div class="fv">'+num(val)+'</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>';
   h+=kpi('&#128197;','#ebfbee','#2f9e44','Scheduled PJP',num(k.scheduledPjp)+' <small>/'+k.totalExecs+'</small>',k.unscheduled+' unscheduled',null,"openCards('scheduled')");
   h+=kpi('&#9998;','#fff4e6','#e8590c','Agenda Filled',num(k.agendaFilled)+' <small>/'+k.scheduledPjp+'</small>',(k.scheduledPjp-k.agendaFilled)+' pending',null,"openCards('agenda')");
   h+=kpi('&#10060;','#fff0f6','#d6336c','Unscheduled',num(k.unscheduled),'no PJP today',null,"openCards('unscheduled')");
   h+='</div>';
+  h+='<div class="card"><h2>Needs attention now</h2><p class="desc">Things a manager should clear today.</p>'+attentionList(a)+'</div>';
   h+='<div class="sectionlabel">Today\'s Journey Funnel</div><div class="card"><div class="funnel">';
   var sp=f.scheduledPjp||1, pin=f.punchedIn||1;
   h+=fstep('Punched In',f.punchedIn,pct(f.punchedIn,sp),f.punchedIn+' of '+f.scheduledPjp+' scheduled',false,false,'punchedIn');
   h+=fstep('Traveling',f.travelling,pct(f.travelling,pin),'on the road',false,false,'travelling');
   h+=fstep('In Store',f.inStore,pct(f.inStore,pin),'at a stop',false,false,'inStore');
   h+=fstep('Idle / Break',f.idle,pct(f.idle,pin),'off-store &gt; 40 min',true,false,'idle');
   h+=fstep('Punched Out',f.punchedOut,pct(f.punchedOut,pin),'journey ended',false,true,'punchedOut');
   h+='</div></div>';
   window._boardFilter = null;             // funnel-card filter (null = all rows)
-  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><div id="bj-board">'+boardCard()+'</div></div>';
-  h+='<div class="card"><h2>Needs attention now</h2><p class="desc">Things a manager should clear today.</p>'+attentionList(a)+'</div>';
-  h+='</div>';
   el('bj-content').innerHTML=h;
+}
 function stateClass(st){ return st==='IN_STORE'?'ps-store':st==='TRAVELLING'?'ps-travel':st==='DONE'?'ps-done':st==='NOT_STARTED'?'ps-no':'ps-idle'; }
 function js(s){ return String(s==null?'':s).replace(/\\/g,'\\\\').replace(/'/g,"\\'"); }
 // Open the Beat Planner (map-first planner window) for this executive/beat/day,
   var u = CTX + '/beatPlanWindow?autoUserId=' + encodeURIComponent(authUserId) + '&editDate=' + encodeURIComponent(date);
   if(beatId && beatId>0) u += '&editBeatId=' + encodeURIComponent(beatId);
   if(mode==='add') u += '&assign=1';
   window.open(u, '_blank');
+}
-// Compact "completed − deferred − pending / planned" cell: completed green,
-// deferred amber, pending grey (planned stops not yet acted on). Denominator is
-// the plan (or activity total if it ran past the plan), so the parts reconcile.
-// Pending is shown only when there's a remainder.
-function cdp(completed, deferred, planned){
-  completed=completed||0; deferred=deferred||0; planned=planned||0;
-  var denom=Math.max(planned, completed+deferred);
-  var pending=denom-completed-deferred;
-  var s='<span class="cgreen">'+completed+'</span> <span style="color:#cdd3df">-</span> '+
-        '<span class="camber">'+deferred+'</span>';
-  if(pending>0) s+=' <span style="color:#cdd3df">-</span> <span class="cmuted">'+pending+'</span>';
-  s+=' <span style="color:#97a1b5;font-weight:400">/ '+denom+'</span>';
-  return s;
-}
 // Funnel-card click: period cards (p_*) open their drill-down popup; today's
 // funnel cards filter the Live executive board in place. Clicking the active
 // card again clears the filter.
 function funnelClick(key){
   if(key && key.indexOf('p_')===0) return openFunnel(key);
     bar='<div class="boardfilter">Showing <b>'+esc(m.title)+'</b> &middot; '+view.length+
         ' of '+rows.length+'<button class="clearf" onclick="setBoardFilter(null)">&times; Clear filter</button></div>';
+  }
   return bar+boardTable(view, date);
+}
+// Merge planned partner visits and self-assigned leads into one set of tallies.
+// Total reconciles with the parts: Total = Completed + Pending + Deferred, where
+// Total is the plan (or activity total if it ran past the plan).
+function boardCounts(r){
+  var completed=r.completedVisits||0, deferred=r.deferred||0;
+  var total=Math.max(r.planned||0, completed+deferred);
+  return {total:total, completed:completed, deferred:deferred, pending:total-completed-deferred};
+}
 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>Punch In/Out</th>'+
-    '<th class="num" title="Completed − Deferred − Pending / Planned">Planned - Visits</th>'+
+    '<th class="num" title="Planned partner visits + self-assigned leads">Total</th>'+
-    '<th class="num" title="Completed − Deferred − Pending / Planned">Self Assigned Lead</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>'+
+    '<th>State</th><th>Action</th>'+
     '</tr></thead><tbody>';
   // column totals, computed up front so the Total row can lead the table
-  var t={cp:0,dp:0,pp:0,cl:0,dl:0,pl:0,tot:0};
+  var t={total:0,completed:0,pending:0,deferred:0};
   rows.forEach(function(r){
-    t.cp+=r.completedPartner||0; t.dp+=r.deferredPartner||0; t.pp+=r.plannedPartner||0;
+    var c=boardCounts(r);
-    t.cl+=r.completedLead||0;    t.dl+=r.deferredLead||0;    t.pl+=r.plannedLead||0;
+    t.total+=c.total; t.completed+=c.completed; t.pending+=c.pending; t.deferred+=c.deferred;
-    t.tot+=r.totalVisits||0;
   });
   h+='<tr class="boardtot">'+
      '<td></td><td><b>Total</b><br><span style="color:#97a1b5;font-size:11px">'+rows.length+' executives</span></td><td></td>'+
-     '<td class="num cnt">'+cdp(t.cp,t.dp,t.pp)+'</td>'+
+     '<td class="num cnt cmuted">'+t.total+'</td>'+
+     '<td class="num cnt cgreen">'+t.completed+'</td>'+
-     '<td class="num cnt">'+cdp(t.cl,t.dl,t.pl)+'</td>'+
+     '<td class="num cnt">'+t.pending+'</td>'+
-     '<td class="num cnt cmuted">'+t.tot+'</td><td></td><td></td>'+
+     '<td class="num cnt camber">'+t.deferred+'</td><td></td><td></td>'+
      '</tr>';
   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+')"';
+    var c=boardCounts(r);
     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 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 cmuted">'+c.total+'</td>'+
-       '<td class="num cnt">'+cdp(r.completedPartner,r.deferredPartner,r.plannedPartner)+'</td>'+
+       '<td class="num cnt cgreen">'+c.completed+'</td>'+
-       '<td class="num cnt">'+cdp(r.completedLead,r.deferredLead,r.plannedLead)+'</td>'+
+       '<td class="num cnt">'+c.pending+'</td>'+
-       '<td class="num cnt cmuted">'+r.totalVisits+'</td>'+
+       '<td class="num cnt camber">'+c.deferred+'</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>'+
   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'},
+  idleStale:       {bg:'#fff4e6', fg:'#e8590c', ic:'&#9201;',   title:'Idle &mdash; off-store &gt; 59 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'},
   locationOff:     {bg:'#fff4e6', fg:'#e8590c', ic:'&#128244;', title:'Location turned off mid-journey',  sub:'GPS toggled off',                     cls:'warnflag'},
   deferredAwaiting:{bg:'#eef1f6', fg:'#69748c', ic:'&#8635;',   title:'Deferred, awaiting re-action',     sub:'shops deferred today',                cls:''}
 };
 function attentionList(a){
   window._att = a;
   var order=['notPunchedIn','idleStale','geofence','locationOff','deferredAwaiting'];
-  var h='';
+  var h='<div class="attrow">';
   order.forEach(function(k){
     var m=ATT_META[k], list=a[k]||[], n=list.length;
     var detail = n ? names(list.map(function(x){return x.name;}),3) : m.sub;
     var cls = n ? ' att clickable' : ' att';
     var click = n ? ' onclick="openAttention(\''+k+'\')"' : '';
     h+='<div class="'+cls.trim()+'"'+click+'><div class="ic" style="background:'+m.bg+';color:'+m.fg+'">'+m.ic+'</div>'+
        '<div class="ab"><div class="atitle">'+m.title+'</div><div class="adet">'+detail+'</div></div>'+
        '<div class="acount '+(n?m.cls:'')+'">'+n+'</div>'+(n?'<span class="chev">&#9656;</span>':'')+'</div>';
   });
-  return h;
+  return h+'</div>';
+}
 function openAttention(key){
   var a=window._att||{}, list=a[key]||[], m=ATT_META[key]||{title:'Detail'};
   var mb=el('bj-modal-back'), md=el('bj-modal');
   // Off-site check-ins can be approved here, but only by L5/Final (canApprove).
   var h='<button class="x" onclick="closeModal()">&times;</button><h3>'+m.title+'</h3>'+
         '<p class="desc">'+list.length+' '+(list.length===1?'item':'items')+
         (showApprove?' &middot; approving updates the partner\'s saved coordinates':'')+'</p>';
   if(!list.length){ h+='<p class="desc">Nothing here.</p>'; }
   else{
-    h+='<table><tbody>';
+    var date=window._boardDate||'';
+    h+='<p class="desc">Click a row to open that executive\'s journey detail.</p><table><tbody>';
     list.forEach(function(x){
       var act='';
+      // approve button gets its own cell that swallows the click so it doesn't drill down
-      if(showApprove) act='<td class="num" style="white-space:nowrap">'+(x.trackingId?'<button class="btn-ok" onclick="openValidate('+x.trackingId+')">Validate &amp; Approve</button>':'')+'</td>';
+      if(showApprove) act='<td class="num" style="white-space:nowrap" onclick="event.stopPropagation()">'+(x.trackingId?'<button class="btn-ok" onclick="openValidate('+x.trackingId+')">Validate &amp; Approve</button>':'')+'</td>';
+      var canOpen = x.userId>0;
+      var go = canOpen ? ' class="clickable" onclick="openExec('+x.userId+",'"+js(x.name)+"','"+date+"')\"" : '';
-      h+='<tr><td style="font-weight:600;white-space:nowrap">'+esc(x.name)+'</td>'+
+      h+='<tr'+go+'><td style="font-weight:600;white-space:nowrap">'+esc(x.name)+'</td>'+
          '<td style="color:#69748c">'+esc(x.detail||'')+'</td>'+act+'</tr>';
     });
     h+='</tbody></table>';
+  }
   md.innerHTML=h; mb.classList.add('show');
   var h='';
   h+='<div class="kpis">';
   h+=kpi('&#9878;','#fff4e6','#f08c00','Adherence',k.adherencePct+'<small>%</small>',num(k.doneStops)+' of '+num(k.plannedStops)+' planned visits done',adhColor(k.adherencePct),"openPScore('adherencePct','Adherence','Planned visits done vs planned, per executive')");
   h+=kpi('&#128506;','#e7f5ff','#1098ad','PJP coverage L1',k.coverageL1Pct+'<small>%</small>',k.coverageL1With+'/'+k.coverageL1Total+' have a plan','#1098ad',"openCoverage('L1')");
   h+=kpiCols('&#128694;','#ebfbee','#2f9e44','Average Visit (per day)',
-    [['Franchisee',k.avgPartnersPerActiveDay],['Planned lead',k.avgPlannedLeadsPerActiveDay],['Unplanned lead',k.avgUnplannedLeadsPerActiveDay]],
+    [['Franchisee',k.avgPartnersPerActiveDay],['Lead',k.avgLeadsPerActiveDay]],
     null,"openPScore('done','Visits / active day','Visits completed per executive')");
   h+=kpiCols('&#128172;','#eef1fb','#3b5bdb','Average discussion (per executive)',
     [['Partner',k.avgDiscussionPartnerMin],['Lead',k.avgDiscussionLeadMin]],
     k.avgDiscussionMin>0&&k.avgDiscussionMin<30?'#e8590c':null,"openPScore('discussionMin','Average discussion minutes','Avg in-store discussion per executive')",'min');
   h+=kpiCols('&#8635;','#fff0f0','#e03131','Auto "missed"',
     [['Unscheduled',k.autoMissedUnscheduled],['Unfilled agenda',k.autoMissedUnfilledAgenda],['Missed punch',k.autoMissedMissedPunchin]],
     '#e03131',"openMissed()");
   h+=kpi('&#9733;','#fff0f6','#d6336c','Leads on route',num(k.leadsCreated),'this period',null,"openPLeads()");
   h+='</div>';
-  h+='<div class="sectionlabel">Journey Summary</div><div class="card"><p class="desc">Planned = visits on the PJP &middot; Self Assigned = ad-hoc visits the executive added.</p><div class="funnel">'+summaryCards(d.summary)+'</div></div>';
+  h+='<div class="sectionlabel">Journey Summary</div><div class="card"><p class="desc">Planned (PJP) and self-assigned visits combined.</p><div class="funnel">'+summaryCards(d.summary)+'</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>';
   h+='</div>';
+  }
   var card='<div class="tlcard">'+
         '<div class="tm" style="background:'+s.c+'">'+timeTop+'<small>'+tlabel+'</small></div>'+
         '<div class="bd"><div class="ti">'+esc(tlTitle(x))+'</div>'+
           '<span class="stt" style="background:'+s.c+'">'+s.l+'</span>'+
+          (tt==='lead' ? '<span class="stt unplanned">Unplanned</span>' : '')+
           '<div class="mt">'+meta+'</div>'+extra+'</div>'+
       '</div>';
   // remark sits on the opposite half of the timeline (empty spacer when none)
   var rk=(!x._punch && x.remarks) ? '<div class="rk"><div class="rkl">Remark</div>'+esc(x.remarks)+'</div>' : '';
   var remark='<div class="tlremark">'+rk+'</div>';

Subversion Repositories SmartDukaan

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