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

   .btn-r{background:var(--brand);border:0;color:#fff;font-weight:650;padding:9px 15px;border-radius:9px;cursor:pointer;font-size:13px;height:36px}
   .lenses{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px}
   .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}
+  .kpis{display:grid;grid-template-columns:repeat(4,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}
   .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}
-  tr.boardtot td{background:#f4f6fb;border-top:2px solid #cdd3df;font-weight:700}
+  tr.boardtot td{background:#f4f6fb;border-bottom:2px solid #cdd3df;font-weight:700}
   .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}
   .actbtn:active{transform:translateY(1px)}
   .att{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;margin-bottom:9px}
   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
+  window._execList = d.execList || [];    // main-card drill-downs
   var h='';
   h+='<div class="kpis">';
-  h+=kpi('&#128101;','#eef1fb','#3b5bdb','Executives scheduled',num(k.scheduled),k.notStarted+' not started yet');
+  h+=kpi('&#128101;','#eef1fb','#3b5bdb','Total Executives',num(k.totalExecs),'in your team',null,"openCards('total')");
-  h+=kpi('&#9201;','#ebfbee','#2f9e44','Punched in',num(k.punchedIn)+' <small>/'+k.scheduled+'</small>',k.notStarted+' pending');
+  h+=kpi('&#128197;','#ebfbee','#2f9e44','Scheduled PJP',num(k.scheduledPjp)+' <small>/'+k.totalExecs+'</small>',k.unscheduled+' unscheduled',null,"openCards('scheduled')");
-  h+=kpi('&#128205;','#e7f5ff','#1098ad','On route now',num(k.onRouteNow),'live journeys');
-  h+=kpi('&#10003;','#eef1fb','#3b5bdb','Visit vs Planned',num(k.visitsDone)+' <small>/'+k.visitsPlanned+'</small>',k.inProgress+' in progress');
+  h+=kpi('&#9998;','#fff4e6','#e8590c','Agenda Filled',num(k.agendaFilled)+' <small>/'+k.scheduledPjp+'</small>',(k.scheduledPjp-k.agendaFilled)+' pending',null,"openCards('agenda')");
-  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',null,'openLeads()');
+  h+=kpi('&#10060;','#fff0f6','#d6336c','Unscheduled',num(k.unscheduled),'no PJP today',null,"openCards('unscheduled')");
   h+='</div>';
   h+='<div class="sectionlabel">Today\'s Journey Funnel</div><div class="card"><div class="funnel">';
-  var sc=f.scheduled||1;
+  var sp=f.scheduledPjp||1, pin=f.punchedIn||1;
-  h+=fstep('Scheduled executives',f.scheduled,100,'start of day',false,false,'scheduled');
+  h+=fstep('Punched In',f.punchedIn,pct(f.punchedIn,sp),f.punchedIn+' of '+f.scheduledPjp+' scheduled',false,false,'punchedIn');
-  h+=fstep('Punched in',f.punchedIn,pct(f.punchedIn,sc),'&minus;'+(f.scheduled-f.punchedIn)+' never started',true,false,'punchedIn');
+  h+=fstep('Traveling',f.travelling,pct(f.travelling,pin),'on the road',false,false,'travelling');
-  h+=fstep('Made a check-in',f.madeCheckin,pct(f.madeCheckin,sc),'&minus;'+(f.punchedIn-f.madeCheckin)+' punched, idle',true,false,'madeCheckin');
+  h+=fstep('In Store',f.inStore,pct(f.inStore,pin),'at a stop',false,false,'inStore');
-  h+=fstep('Completed all visits',f.completedAll,pct(f.completedAll,sc),(f.madeCheckin-f.completedAll)+' still mid-journey',true,false,'completedAll');
+  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,sc),'journey ended',false,true,'punchedOut');
+  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>';
     '<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="Completed − Deferred − Pending / Planned">Self Assigned Lead</th>'+
     '<th class="num">Total</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};   // column totals
+  var t={cp:0,dp:0,pp:0,cl:0,dl:0,pl:0,tot:0};
   rows.forEach(function(r){
     t.cp+=r.completedPartner||0; t.dp+=r.deferredPartner||0; t.pp+=r.plannedPartner||0;
     t.cl+=r.completedLead||0;    t.dl+=r.deferredLead||0;    t.pl+=r.plannedLead||0;
     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">'+cdp(t.cl,t.dl,t.pl)+'</td>'+
+     '<td class="num cnt cmuted">'+t.tot+'</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+')"';
     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>'+
          '<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>';
   });
-  h+='</tbody><tfoot><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">'+cdp(t.cl,t.dl,t.pl)+'</td>'+
-     '<td class="num cnt cmuted">'+t.tot+'</td><td></td><td></td>'+
-     '</tr></tfoot>';
-  return h+'</table></div>';
+  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; },
+  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; }},
+  travelling: {title:'Traveling',    desc:'On the road between stops',           f:function(r){ return r.state==='TRAVELLING'; }},
-  madeCheckin:  {title:'Made a check-in',      desc:'Checked in at one or more stops', f:function(r){ return r.madeCheckin; },
+  inStore:    {title:'In Store',     desc:'Currently checked in at a stop',      f:function(r){ return r.state==='IN_STORE'; }},
-                 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; },
+  idle:       {title:'Idle / Break', desc:'Idle off-store beyond the threshold', f:function(r){ return r.idleAway; }},
-                 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; },
+  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){
        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');
+}
+// Main-card drill-downs: roster of executives behind each top KPI card.
+// 'drop' (optional) adds a second, highlighted section for the complementary
+// cohort — e.g. who's scheduled but hasn't filled the agenda.
+var CARD_META = {
+  total:       {title:'Total Executives', desc:'Everyone in your team',        f:function(r){ return true; }},
+  scheduled:   {title:'Scheduled PJP',     desc:'Executives with a beat today', f:function(r){ return r.hasBeat; }},
+  agenda:      {title:'Agenda Filled',     desc:'Beats with the agenda filled', f:function(r){ return r.agendaFilled; },
+                dropLabel:'Agenda not filled (scheduled)', drop:function(r){ return r.hasBeat && !r.agendaFilled; }},
+  unscheduled: {title:'Unscheduled',       desc:'No PJP scheduled today',       f:function(r){ return !r.hasBeat; }}
+};
+// Renders an executive roster table (used by the card drill-downs).
+function execRows(list, date){
+  if(!list.length) return '<p class="desc">None.</p>';
+  var h='<table><thead><tr><th>Executive</th><th>Beat</th><th>Agenda</th><th>Status</th></tr></thead><tbody>';
+  list.forEach(function(r){
+    var A=r.userId+",'"+js(r.name)+"','"+date+"'";
+    var go = r.userId ? ' class="clickable" onclick="openExec('+A+')"' : '';
+    var agenda = !r.hasBeat ? '<span style="color:#97a1b5">&mdash;</span>'
+      : (r.agendaFilled ? '<span style="color:#2f9e44">&#10003;</span>' : '<span class="badflag">&#10007;</span>');
+    h+='<tr'+go+'>'+
+       '<td><b>'+esc(r.name)+'</b></td>'+
+       '<td>'+esc(r.beatName||'-')+'</td>'+
+       '<td style="text-align:center">'+agenda+'</td>'+
+       '<td>'+esc(r.statusLabel||'')+'</td></tr>';
+  });
+  return h+'</tbody></table>';
+}
+function openCards(key){
+  var m=CARD_META[key]; if(!m) return;
+  var all=(window._execList||[]), date=window._boardDate||'';
+  var list=all.filter(m.f);
+  var dropped=m.drop ? all.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">'+list.length+' '+(list.length===1?'executive':'executives')+' &middot; '+esc(m.desc)+'</p>'+
+        execRows(list, date);
+  if(m.drop){
+    h+='<div class="sectionlabel" style="margin-top:18px;color:#e8590c">'+esc(m.dropLabel)+' &middot; '+dropped.length+'</div>'+
+       execRows(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>'+

Subversion Repositories SmartDukaan

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