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

   .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.active{border-color:var(--brand);background:#eef1fb;box-shadow:0 0 0 1px var(--brand) inset}
+  .boardfilter{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:0 0 10px;padding:7px 11px;background:#eef1fb;border:1px solid #d7deef;border-radius:8px}
+  .boardfilter b{color:#28304a}
+  .boardfilter .clearf{margin-left:auto;border:1px solid #c7d0e8;background:#fff;color:#3b5bdb;border-radius:7px;padding:3px 10px;font-size:12px;font-weight:600;cursor:pointer}
+  .boardfilter .clearf:hover{background:#f1f4ff}
   .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}
   .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}
   .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}
   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'+(key?' 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" 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>';
+}
 // Funnel drop sub-text: positive = fell out (red); negative = above planned
 // (leads push visits past planned stops) shown green; zero = on plan.
   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,'completedAll');
   h+=fstep('Punched out',f.punchedOut,pct(f.punchedOut,sc),'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>'+boardTable(d.board, d.date)+'</div>';
+  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'; }
   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);
+  setBoardFilter(window._boardFilter===key ? null : key);
+}
+// Apply / clear the funnel filter and re-render just the board card. Also marks
+// the active funnel card so it's clear which cohort the board is showing.
+function setBoardFilter(key){
+  window._boardFilter = key || null;
+  var c=el('bj-board'); if(c) c.innerHTML=boardCard();
+  document.querySelectorAll('.fstep[data-fkey]').forEach(function(s){
+    s.classList.toggle('active', !!key && s.getAttribute('data-fkey')===key);
+  });
+}
+// Board card content: an optional "filtered by …" bar plus the table, showing
+// only the rows that reached the selected funnel stage (Scheduled = all rows).
+function boardCard(){
+  var rows=window._board||[], date=window._boardDate||'', key=window._boardFilter;
+  var view=rows, m=key?FUNNEL_META[key]:null;
+  if(m) view=rows.filter(m.f);
+  var bar='';
+  if(m){
+    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);
+}
 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">Planned</th>'+
+    '<th>Agenda</th><th>Executive</th><th>Punch In/Out</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 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>';
+  var t={cp:0,dp:0,pp:0,cl:0,dl:0,pl:0,tot:0};   // column totals
   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;
     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 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">'+r.planned+'</td>'+
-       '<td class="num cnt cgreen">'+r.completedVisits+'</td>'+
+       '<td class="num cnt">'+cdp(r.completedPartner,r.deferredPartner,r.plannedPartner)+'</td>'+
-       '<td class="num cnt camber">'+r.pendingVisits+'</td>'+
-       '<td class="num cnt cred">'+r.deferred+'</td>'+
+       '<td class="num cnt">'+cdp(r.completedLead,r.deferredLead,r.plannedLead)+'</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>';
   });
+  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+'</tbody></table></div>';
+  return h+'</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 = {

Subversion Repositories SmartDukaan

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