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

   .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}
+  /* visit-quality flags — top-offenders panel */
+  .fsummary{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-end;margin:4px 0 16px}
+  .fsummary .fstat .fn{font-size:28px;font-weight:780;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
+  .fsummary .fstat .fn small{font-size:15px;color:var(--soft);font-weight:600}
+  .fsummary .fstat .fl{font-size:11px;color:var(--muted);font-weight:600;margin-top:6px}
+  .fsummary .fstat.sep{border-left:1px solid var(--line);padding-left:24px}
+  .fsummary .fstat .ftop{display:flex;align-items:baseline;gap:8px}
+  .fpill{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
+  .fpill i{width:6px;height:6px;border-radius:50%;flex:none}
+  .fheroes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
+  .fhero{border:1px solid var(--line);border-radius:13px;padding:15px;cursor:pointer;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--fc) 5%,transparent));transition:border-color .15s}
+  .fhero:hover{border-color:var(--fc)}
+  .fhtop{display:flex;align-items:center;justify-content:space-between;gap:10px}
+  .fhname{font-size:12.5px;font-weight:650;line-height:1.25}
+  .fhbig{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1;margin-top:12px;font-variant-numeric:tabular-nums}
+  .fhsub{font-size:11.5px;color:var(--muted);margin-top:7px}
+  .fring{width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;-webkit-mask:radial-gradient(circle 14px at center,transparent 98%,#000 100%);mask:radial-gradient(circle 14px at center,transparent 98%,#000 100%)}
+  .frlbl{font-size:10px;font-weight:800;font-variant-numeric:tabular-nums}
+  .fsub{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);font-weight:700;margin:16px 2px 6px}
+  .fsub.muted{opacity:.7}
+  .frow{display:grid;grid-template-columns:28px minmax(140px,1fr) 48px 66px 96px;align-items:center;gap:12px;padding:9px 8px;border-radius:9px}
+  .frow.clickable{cursor:pointer}
+  .frow.clickable:hover{background:#f7f9fd}
+  .frow.quiet{opacity:.6}
+  .fnum{font-size:11px;font-weight:700;color:var(--soft);text-align:center;font-variant-numeric:tabular-nums}
+  .frname{font-size:13px;font-weight:600}
+  .frrate{font-size:13.5px;font-weight:750;text-align:right;font-variant-numeric:tabular-nums}
+  .frfrac{font-size:12px;color:var(--soft);text-align:right;font-variant-numeric:tabular-nums}
+  @media (max-width:900px){.fheroes{grid-template-columns:1fr}.frow{grid-template-columns:24px 1fr 48px 96px}.frfrac{display:none}}
+  .bkbtn{position:absolute;top:14px;left:16px;background:none;border:0;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:4px 8px;border-radius:7px}
+  .bkbtn:hover{background:#eef1fb;color:var(--brand)}
+  /* orders list — level filter chips */
+  .olhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:2px}
+  .olchips{display:inline-flex;gap:3px;background:#eef1fb;border-radius:9px;padding:3px}
+  .olchip{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:650;padding:5px 12px;border-radius:7px;cursor:pointer}
+  .olchip:hover{color:var(--ink)}
+  .olchip.on{background:var(--brand);color:#fff}
   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)}
   .tlchip{font-size:10.5px;font-weight:600;color:var(--muted);background:#f1f3f9;border-radius:6px;padding:2px 7px;white-space:nowrap}
   .tlbadge{font-size:10.5px;font-weight:700;border:0;border-radius:6px;padding:2px 8px;white-space:nowrap;cursor:pointer;line-height:1.5}
   .tlbadge.ord{background:#e7f0ff;color:#1c56c9}
   .tlbadge.ord:hover{background:#d4e4ff}
   .tlbadge.sch{background:#fff4e6;color:#c25709;cursor:default}
+  .tlbadge.dwell{background:#fff4e6;color:#e8590c;cursor:default}
+  .tlbadge.nobill{background:#fff0f0;color:#e03131;cursor:default}
+  .tlcard.long-dwell{border-color:#ffd8a8;box-shadow:0 2px 12px rgba(232,89,12,.16)}
   .exectabs{display:flex;gap:6px;justify-content:center;margin:12px 0 4px}
   .exectab{padding:6px 14px;border-radius:8px;font-size:12.5px;font-weight:650;color:var(--muted);cursor:pointer;border:1px solid var(--line);background:#fff}
   .exectab.active{background:var(--brand);color:#fff;border-color:var(--brand)}
   #bjMap{width:100%;height:460px;border-radius:12px;border:1px solid var(--line);margin-top:10px;background:#eef1f7;overflow:hidden}
   .bjlegend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#f8f9fc;font-size:12.5px;min-height:20px}
   h+='</div></div>';
   window._boardFilter = null;             // funnel-card filter (null = all rows)
   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>';
+  window._ordersList = d.ordersList || [];
+  h+='<div class="sectionlabel">Billing &middot; Orders today</div><div id="bj-orders">'+ordersCard()+'</div>';
   window._visitFlags = d.visitFlags || [];
   h+='<div class="sectionlabel">Visit-quality flags</div>';
-  h+='<div class="card"><h2>Visit-quality flags</h2><p class="desc">Every rule scored on today\'s visits. Click a row with hits to see the flagged visits.</p>'+flagsTable(window._visitFlags)+'</div>';
+  h+='<div class="card"><h2>Visit-quality flags</h2><p class="desc">Today\'s biggest quality gaps first. Click a rule to see the flagged visits.</p>'+flagsTable(window._visitFlags)+'</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,"\\'"); }
   var total=Math.max(r.planned||0, completed+deferred);
   return {total:total, completed:completed, deferred:deferred, pending:total-completed-deferred};
+}
 // seconds -> compact "1h 20m" / "45m" for the board's time columns.
 function bhm(sec){ sec=Math.max(0,Math.round(sec||0)); var h=Math.floor(sec/3600), m=Math.round((sec%3600)/60); return h?(h+'h '+m+'m'):(m+'m'); }
+// Day-counts for the board's Onboarded / Last-bill columns. null -> em dash.
+function daysAgo(n){ return (n==null) ? '<span style="color:#c5cce0">&mdash;</span>' : (n<=0?'today':n+'d'); }
+// Last-billing recency, coloured by staleness (fresher = greener, stale = red).
+function billDaysHtml(n){
+  if(n==null) return '<span style="color:#c5cce0">&mdash;</span>';
+  var c = n>60?'#e03131':(n>30?'#e8590c':'#2f9e44');
+  return '<span style="color:'+c+'">'+(n<=0?'today':n+'d')+'</span>';
+}
 // Click-to-sort for the live board (mirrors the Period scorecard's sortCard). The
 // numeric columns are derived (boardCounts) and times are raw seconds, so we sort on
 // the underlying values here — not the rendered "1h 20m"/count strings.
 var boardSortKey=null, boardSortAsc=false;
 function boardSortVal(r, key){
     case 'total': case 'completed': case 'pending': case 'deferred':
                     return boardCounts(r)[key];
     case 'transit': return r.transitSecs||0;
     case 'inStore': return r.inStoreSecs||0;
     case 'state':   return r.stateLabel||'';
+    case 'onboard': return r.onboardDays==null?1e9:r.onboardDays;
+    case 'bill':    return r.lastBillDays==null?1e9:r.lastBillDays;
     default:        return 0;
+  }
+}
 function sortBoard(key){
   if(boardSortKey===key) boardSortAsc=!boardSortAsc; else { boardSortKey=key; boardSortAsc=false; }
     '<th class="num" onclick="sortBoard(\'completed\')">Completed'+bsArrow('completed')+'</th>'+
     '<th class="num" onclick="sortBoard(\'pending\')">Pending'+bsArrow('pending')+'</th>'+
     '<th class="num" onclick="sortBoard(\'deferred\')">Deferred'+bsArrow('deferred')+'</th>'+
     '<th class="num" title="Transit time between stops so far today" onclick="sortBoard(\'transit\')">Transit'+bsArrow('transit')+'</th>'+
     '<th class="num" title="Time spent inside stores so far today" onclick="sortBoard(\'inStore\')">In-store'+bsArrow('inStore')+'</th>'+
-    '<th onclick="sortBoard(\'state\')">State'+bsArrow('state')+'</th><th>Action</th>'+
+    '<th onclick="sortBoard(\'state\')">State'+bsArrow('state')+'</th>'+
+    '<th class="num" title="Days since this exec last onboarded a new partner" onclick="sortBoard(\'onboard\')">Onboarded'+bsArrow('onboard')+'</th>'+
+    '<th class="num" title="Days since this exec\'s partners last billed" onclick="sortBoard(\'bill\')">Last bill'+bsArrow('bill')+'</th>'+
+    '<th>Action</th>'+
     '</tr></thead><tbody>';
   // column totals, computed up front so the Total row can lead the table
   var t={total:0,completed:0,pending:0,deferred:0,transit:0,inStore:0};
   rows.forEach(function(r){
     var c=boardCounts(r);
      '<td class="num cnt cmuted">'+t.total+'</td>'+
      '<td class="num cnt cgreen">'+t.completed+'</td>'+
      '<td class="num cnt">'+t.pending+'</td>'+
      '<td class="num cnt camber">'+t.deferred+'</td>'+
      '<td class="num cnt cmuted">'+bhm(t.transit)+'</td>'+
-     '<td class="num cnt cmuted">'+bhm(t.inStore)+'</td><td></td><td></td>'+
+     '<td class="num cnt cmuted">'+bhm(t.inStore)+'</td><td></td><td></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+')"';
        '<td class="num cnt">'+c.pending+'</td>'+
        '<td class="num cnt camber">'+c.deferred+'</td>'+
        '<td class="num cnt cmuted">'+(r.transitSecs?bhm(r.transitSecs):'<span style="color:#c5cce0">&mdash;</span>')+'</td>'+
        '<td class="num cnt cmuted">'+(r.inStoreSecs?bhm(r.inStoreSecs):'<span style="color:#c5cce0">&mdash;</span>')+'</td>'+
        '<td><span class="pill-state '+stateClass(r.state)+'">'+esc(r.stateLabel)+'</span></td>'+
+       '<td class="num cnt cmuted">'+daysAgo(r.onboardDays)+'</td>'+
+       '<td class="num cnt">'+billDaysHtml(r.lastBillDays)+'</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>'+
          (CAN_EDIT_BEAT
            ? '<button class="actbtn edit" title="Edit beat in Beat Planner" onclick="openPlanner('+r.authUserId+','+(r.beatId||0)+',\''+date+'\',\'edit\')">&#9998;</button>'+
   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:''}
 };
-// ---- Visit-quality flags: a today-scoped replica of the 14-row monitor table ----
+// ---- Billing: today's orders, filterable by the executive's org level (L1..L5) ----
-// higher rate = worse, so redder as the flagged share climbs.
+window._ordersLevel = window._ordersLevel || '';   // '' = all levels
-function flagRateColor(p){ if(p>=50)return '#e03131'; if(p>=25)return '#e8590c'; if(p>=10)return '#f08c00'; return '#2f9e44'; }
+function setOrdersLevel(L){ window._ordersLevel = (window._ordersLevel===L)?'':L; var c=el('bj-orders'); if(c) c.innerHTML=ordersCard(); }
+// Compact Indian-currency: ₹7.8L / ₹1.2Cr / ₹9.5k.
+function inr(n){ n=Math.round(n||0);
+  if(n>=10000000) return '&#8377;'+(n/10000000).toFixed(2).replace(/\.00$/,'')+'Cr';
+  if(n>=100000)   return '&#8377;'+(n/100000).toFixed(2).replace(/\.00$/,'')+'L';
+  if(n>=1000)     return '&#8377;'+(n/1000).toFixed(1).replace(/\.0$/,'')+'k';
+  return '&#8377;'+n;
+}
+// Today's orders grouped by partner (respecting the level filter), sorted by ₹ total.
+function orderGroups(){
+  var list=window._ordersList||[];
+  var view = window._ordersLevel ? list.filter(function(o){return o.level===window._ordersLevel;}) : list;
+  var groups={}, order=[];
+  view.forEach(function(o){
+    var k = o.fofoId || ('p:'+o.exec+'|'+o.partner);
+    if(!groups[k]){ groups[k]={exec:o.exec,level:o.level,partner:o.partner,fofoId:o.fofoId,count:0,total:0,last:''}; order.push(k); }
+    var g=groups[k]; g.count++; g.total+=(o.amount||0);
+    if((o.time||'')>g.last) g.last=o.time||'';
+  });
+  var glist=order.map(function(k){return groups[k];}).sort(function(a,b){return b.total-a.total;});
+  return {glist:glist, view:view, total:view.reduce(function(a,o){return a+(o.amount||0);},0)};
+}
+function ordersCard(){
+  var levels=['','L1','L2','L3','L4','L5'];
+  var chips=levels.map(function(L){
+    var on=(window._ordersLevel===L);
+    return '<button class="olchip'+(on?' on':'')+'" onclick="setOrdersLevel(\''+L+'\')">'+(L||'All')+'</button>';
+  }).join('');
+  var h='<div class="card"><div class="olhead"><h2>Orders today</h2><div class="olchips">'+chips+'</div></div>';
+  if(!(window._ordersList||[]).length) return h+'<p class="desc">No orders placed today.</p></div>';
+  var g=orderGroups(), glist=g.glist;
+  if(!glist.length) return h+'<p class="desc">No orders at '+esc(window._ordersLevel)+' today.</p></div>';
+  var top=glist.slice(0,3);
+  h+='<div class="fsummary">'+
+    '<div class="fstat"><div class="fn">'+inr(g.total)+'</div><div class="fl">Billed today</div></div>'+
+    '<div class="fstat sep"><div class="fn">'+g.view.length+'</div><div class="fl">Orders</div></div>'+
+    '<div class="fstat sep"><div class="fn">'+glist.length+'</div><div class="fl">Partners billed</div></div>'+
+    '</div>';
+  h+='<div class="fheroes">'; top.forEach(function(gr){ h+=orderHero(gr, g.total); }); h+='</div>';
+  h+='<p class="desc" style="margin-top:12px"><a href="#" onclick="openOrdersTable();return false;">View all '+glist.length+' billed partners &rarr;</a></p>';
+  return h+'</div>';
+}
+function orderHero(g, grand){
+  var pct = grand>0 ? Math.round(100*g.total/grand) : 0, c='var(--brand)';
+  return '<div class="fhero clickable" onclick="openOrdersTable()" style="--fc:'+c+'">'+
+    '<div class="fhtop"><div class="fhname">'+esc(g.partner)+'</div>'+
+      '<span class="fring" style="background:conic-gradient('+c+' '+(pct*3.6)+'deg, var(--line2) 0)"><span class="frlbl" style="color:'+c+'">'+pct+'%</span></span></div>'+
+    '<div class="fhbig" style="color:'+c+'">'+inr(g.total)+'</div>'+
+    '<div class="fhsub">'+g.count+' order'+(g.count>1?'s':'')+' &middot; <span class="lvl">'+esc(g.level||'-')+'</span> '+esc(g.exec)+'</div>'+
+    '</div>';
+}
+// Full grouped orders table in a popup; each partner row opens its order detail.
+function openOrdersTable(){
+  var g=orderGroups(), glist=g.glist, date=window._boardDate||'';
+  var h='<button class="x" onclick="closeModal()">&times;</button><h3>Orders today</h3>'+
+    '<p class="desc">'+g.view.length+' orders from '+glist.length+' partners &middot; '+inr(g.total)+(window._ordersLevel?' &middot; '+esc(window._ordersLevel)+' only':'')+' &middot; click a partner for its orders</p>'+
+    '<div style="overflow:auto;max-height:64vh"><table><thead><tr><th>Executive</th><th>Partner</th><th class="num">Orders</th><th class="num">Amount</th><th class="num">Last</th></tr></thead><tbody>';
+  glist.forEach(function(gr){
+    var go = gr.fofoId ? ' class="clickable" onclick="bjOpenOrderList('+gr.fofoId+",'"+date+"')\"" : '';
+    h+='<tr'+go+'><td><span class="lvl">'+esc(gr.level||'-')+'</span> <b>'+esc(gr.exec)+'</b></td>'+
+       '<td>'+esc(gr.partner)+'</td>'+
+       '<td class="num cnt cmuted">'+gr.count+'</td>'+
+       '<td class="num cnt">&#8377;'+num(Math.round(gr.total))+'</td>'+
+       '<td class="num cmuted">'+esc((gr.last||'').slice(0,5))+'</td></tr>';
+  });
+  h+='</tbody></table></div>';
+  el('bj-modal').innerHTML=h; el('bj-modal-back').classList.add('show');
+}
+// ---- Visit-quality flags: "top offenders" panel (severity-first, dashboard palette) ----
+// Internal tuning status -> display severity {label, color}, using the dashboard's own tokens.
-function flagStatusColor(s){
+function flagSeverity(status){
-  switch(s){
+  switch(status){
-    case 'action':      return '#e03131';
+    case 'action':      return {label:'Action',  color:'var(--red)'};
-    case 'systemic':    return '#e8590c';
+    case 'systemic':    return {label:'High',    color:'var(--orange)'};
-    case 'partial':     return '#f08c00';
+    case 'partial':     return {label:'High',    color:'var(--orange)'};
-    case 'needs floor': return '#1098ad';
+    case 'needs floor': return {label:'Watch',   color:'var(--cyan)'};
-    case 'too broad':   return '#7048e8';
+    case 'too broad':   return {label:'Monitor', color:'var(--violet)'};
-    case 'contained':   return '#2f9e44';
+    case 'contained':   return {label:'Monitor', color:'var(--violet)'};
-    default:            return '#97a1b5';   // "never fires" / "no data"
+    default:            return {label:'No data', color:'var(--soft)'};   // no data / never fires
+  }
+}
+function flagStatusColor(s){ return flagSeverity(s).color; }
 function flagStatusChip(s){
-  var c=flagStatusColor(s);
+  var v=flagSeverity(s);
-  return '<span style="display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:'+c+'1a;color:'+c+'">'+esc(s)+'</span>';
+  return '<span class="fpill" style="color:'+v.color+';background:color-mix(in srgb,'+v.color+' 13%,transparent)"><i style="background:'+v.color+'"></i>'+esc(v.label)+'</span>';
+}
+function frate(r){ return r.denom>0 ? Math.round(100*r.count/r.denom) : 0; }
+function ffiring(r){ return (r.count||0)>0; }
+function flagRing(r){
+  var p=frate(r), c=flagStatusColor(r.status);
+  return '<span class="fring" style="background:conic-gradient('+c+' '+(p*3.6)+'deg, var(--line2) 0)"><span class="frlbl" style="color:'+c+'">'+p+'%</span></span>';
+}
+function flagHero(r){
+  var c=flagStatusColor(r.status);
+  return '<div class="fhero clickable" onclick="openFlag(\''+r.code+'\')" style="--fc:'+c+'">'+
+    '<div class="fhtop"><div class="fhname">'+esc(r.title)+'</div>'+flagRing(r)+'</div>'+
+    '<div class="fhbig" style="color:'+c+'">'+num(r.count)+'</div>'+
+    '<div class="fhsub">of '+num(r.denom)+' &middot; '+flagStatusChip(r.status)+'</div>'+
+    '</div>';
+}
+function flagRow(r, quiet){
+  var c=flagStatusColor(r.status), p=frate(r);
+  var attr = quiet ? ' class="frow quiet"' : ' class="frow clickable" onclick="openFlag(\''+r.code+'\')"';
+  return '<div'+attr+'>'+
+    '<div class="fnum">'+esc(r.num)+'</div>'+
+    '<div class="frname">'+esc(r.title)+'</div>'+
+    '<div class="frrate" style="color:'+(ffiring(r)?c:'var(--soft)')+'">'+(r.denom?p+'%':'&mdash;')+'</div>'+
+    '<div class="frfrac">'+(r.denom?num(r.count)+' / '+num(r.denom):'&mdash;')+'</div>'+
+    '<div>'+flagStatusChip(r.status)+'</div>'+
+    '</div>';
+}
 function flagsTable(list){
   if(!list||!list.length) return '<p class="desc">No flag data for this date.</p>';
-  var h='<div style="overflow-x:auto"><table><thead><tr>'+
-    '<th style="width:34px">#</th><th>Rule</th><th class="num">Flagged</th><th class="num">Of</th><th class="num">Rate</th><th>Status</th>'+
-    '</tr></thead><tbody>';
+  var fires=list.filter(ffiring);
-  list.forEach(function(r){
+  var flagged=list.reduce(function(a,r){return a+(r.count||0);},0);
-    var hits=r.count||0, denom=r.denom||0, rate=pct(hits,denom);
+  var top=fires.slice().sort(function(a,b){return (b.count||0)-(a.count||0);}).slice(0,3);
-    var open = hits>0 ? ' class="clickable" onclick="openFlag(\''+r.code+'\')"' : '';
+  var topK={}; top.forEach(function(r){topK[r.code]=1;});
-    var cntColor = hits>0 ? flagRateColor(rate) : '#97a1b5';
+  var rest=fires.filter(function(r){return !topK[r.code];}).sort(function(a,b){return frate(b)-frate(a);});
-    h+='<tr'+open+'>'+
+  var quiet=list.filter(function(r){return !ffiring(r);});
-       '<td style="font-weight:700;color:#97a1b5">'+esc(r.num)+'</td>'+
+  var worst=fires.slice().sort(function(a,b){return frate(b)-frate(a);})[0];
-       '<td>'+esc(r.title)+'</td>'+
+  var h='<div class="fsummary">'+
-       '<td class="num cnt" style="font-weight:700;color:'+cntColor+'">'+num(hits)+'</td>'+
+    '<div class="fstat"><div class="fn">'+num(flagged)+'</div><div class="fl">Flagged visits today</div></div>'+
-       '<td class="num cnt cmuted">'+num(denom)+'</td>'+
-       '<td class="num cnt cmuted">'+(denom?rate+'%':'&mdash;')+'</td>'+
+    '<div class="fstat sep"><div class="fn">'+fires.length+' <small>/ '+list.length+'</small></div><div class="fl">Rules firing</div></div>'+
-       '<td>'+flagStatusChip(r.status)+(hits>0?' <span class="chev">&#9656;</span>':'')+'</td>'+
+    (worst?'<div class="fstat sep"><div class="ftop"><div class="fn" style="color:'+flagStatusColor(worst.status)+'">'+frate(worst)+'%</div>'+flagStatusChip(worst.status)+'</div><div class="fl">Worst rule &middot; #'+esc(worst.num)+' '+esc(worst.title)+'</div></div>':'')+
-       '</tr>';
+    '</div>';
-  });
+  h+='<div class="fheroes">'; top.forEach(function(r){ h+=flagHero(r); }); h+='</div>';
+  if(rest.length){ h+='<div class="fsub">Other firing rules</div><div class="frows">'; rest.forEach(function(r){ h+=flagRow(r,false); }); h+='</div>'; }
+  if(quiet.length){ h+='<div class="fsub muted">Quiet today</div><div class="frows">'; quiet.forEach(function(r){ h+=flagRow(r,true); }); h+='</div>'; }
-  return h+'</tbody></table></div>';
+  return h;
+}
 // Minutes-of-day from the first HH:MM in a flag detail string (-1 if none) — for sorting.
 function flagTimeVal(detail){
   var m=String(detail||'').match(/(\d{1,2}):(\d{2})/);
   return m ? (parseInt(m[1],10)*60+parseInt(m[2],10)) : -1;
   if(!items.length){ h+='<p class="desc">Nothing flagged today.</p>'; }
   else{
     h+='<p class="desc">Click a row to open that executive\'s journey detail.</p><table><tbody>';
     items.forEach(function(x){
       var canOpen=x.userId>0;
-      var go=canOpen?' class="clickable" onclick="openExec('+x.userId+",'"+js(x.name)+"','"+date+"')\"":'';
+      var go=canOpen?' class="clickable" onclick="openExec('+x.userId+",'"+js(x.name)+"','"+date+"','timeline','flag:"+r.code+"')\"":'';
       h+='<tr'+go+'><td style="font-weight:600;white-space:nowrap">'+esc(x.name)+'</td>'+
          '<td style="color:#69748c">'+esc(x.detail||'')+'</td></tr>';
     });
     h+='</tbody></table>';
+  }
          '<td style="color:#69748c">'+esc(item?item.detail:'')+'</td></tr>';
     });
     h+='</tbody></table>';
+  }
   if(userId>0){
-    h+='<p class="desc" style="margin-top:10px"><a href="#" onclick="closeModal();openExec('+userId+',\''+js(name)+'\',\''+date+'\');return false;">Open journey detail &rarr;</a></p>';
+    h+='<p class="desc" style="margin-top:10px"><a href="#" onclick="openExec('+userId+',\''+js(name)+'\',\''+date+'\',\'timeline\',\'execflags\');return false;">Open journey detail &rarr;</a></p>';
+  }
   el('bj-modal').innerHTML=h; el('bj-modal-back').classList.add('show');
+}
 function attentionList(a){
   window._att = a;
     '<li><b>Coverage and the manager view</b> follow the existing L1&ndash;L5 sales hierarchy, so each manager sees only their team.</li>'+
     '</ul></div>';
+}
 /* ============================ EXEC DRILLDOWN ============================ */
+// Back button shown when this journey detail was opened from another popup (a flag
+// drill-down or the per-exec flag list). Returns to that popup. `back` is a string
+// descriptor: 'flag:<code>' or 'execflags'.
+function execBackBtn(){
+  return (window._exec && window._exec.back) ? '<button class="bkbtn" onclick="execBack()">&#8592; Back</button>' : '';
+}
+function execBack(){
+  var ex=window._exec; if(!ex || !ex.back) return;
+  if(ex.back.indexOf('flag:')===0){ openFlag(ex.back.slice(5)); }
+  else if(ex.back==='execflags'){ openExecFlags(ex.userId, ex.name); }
+}
-function openExec(userId, name, date, tab){
+function openExec(userId, name, date, tab, back){
   if(!userId){ return; }
-  window._exec = {userId:userId, name:name, date:date, detail:null, tab:(tab||'timeline')};
+  window._exec = {userId:userId, name:name, date:date, detail:null, tab:(tab||'timeline'), back:(back||null)};
   var mb=el('bj-modal-back'), m=el('bj-modal');
-  m.innerHTML='<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(name)+'</h3><p class="desc">Journey detail &middot; '+esc(date)+'</p><div class="loading"><div class="spinner"></div>Loading&hellip;</div>';
+  m.innerHTML=execBackBtn()+'<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(name)+'</h3><p class="desc">Journey detail &middot; '+esc(date)+'</p><div class="loading"><div class="spinner"></div>Loading&hellip;</div>';
   mb.classList.add('show');
   fetch(CTX+'/beat-journey/journey-detail?userId='+userId+'&date='+encodeURIComponent(date),{headers:{'Accept':'application/json'}})
     .then(function(r){ return r.json(); }).then(function(d){
       window._mediaUrl = d.mediaUrl || '';
       window._exec.detail = d;
     }).catch(function(){ el('bj-modal').innerHTML='<button class="x" onclick="closeModal()">&times;</button><p class="desc">Could not load detail.</p>'; });
+}
 function renderExec(tab){
   var ex=window._exec; if(!ex) return;
   var d=ex.detail||{};
-  var head='<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(ex.name)+'</h3>'+
+  var head=execBackBtn()+'<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(ex.name)+'</h3>'+
     '<p class="desc">Journey detail &middot; '+esc(ex.date)+' &middot; battery '+(d.batteryLevel==null?'-':d.batteryLevel+'%')+' &middot; loc-off '+(d.locationToggleCount||0)+'</p>'+
     '<div class="exectabs">'+
       '<button class="exectab'+(tab==='timeline'?' active':'')+'" onclick="renderExec(\'timeline\')">&#128221; Timeline</button>'+
       '<button class="exectab'+(tab==='map'?' active':'')+'" onclick="renderExec(\'map\')">&#128205; Live Location</button>'+
     '</div>';
   return out ? '<div class="tlags">'+out+'</div>' : '';
+}
 function tlRow(x, side){
   var s=tlStyle(x);
   var tt=(x.taskType||'').toLowerCase();
+  var mt=(x.markType||'').toUpperCase();
+  var isPartner = tt==='franchisee-visit';
+  var visited = mt.indexOf('CHECKOUT')>=0;
+  var overDwell = !x._punch && visited && toSec(x.timeSpent) > 90*60;   // #5 over 1h30m at a store
   var timeTop = x.checkInTime ? hhmm(x.checkInTime) : '-';
   var tlabel = x._punch ? (x._punch==='in'?'punch in':'punch out') : (x.checkInTime?'check-in':'pending');
   var meta;
   if(x._punch){
     meta = (x._punch==='in'?'Punch in':'Punch out') + ' &middot; ' + hhmm(x.checkInTime);
   var extra='';
   if(!x._punch){
     var chips='';
     if(x.battery!=null) chips += '<span class="tlchip">&#128267; '+x.battery+'%</span>';
     if(x.locOff!=null) chips += '<span class="tlchip">&#128244; '+x.locOff+'</span>';
+    // over 1h30m at this store — the #5 signal called out on the stop itself.
+    if(overDwell) chips += '<span class="tlbadge dwell" title="Over 1h30m at a single store">&#9201; '+esc(x.timeSpent)+'</span>';
     // orders placed that day (any agenda): one badge -> drawer lists them all.
+    // A visited partner with no order gets a "No billing" badge; a scheduled remark
-    // No order + billing agenda -> a parsed "scheduled" chip instead.
+    // still adds its parsed date chip.
     if(x.orders && x.orders.length){
       var n=x.orders.length;
       chips += '<button type="button" class="tlbadge ord" title="View orders placed this day"'
              + ' onclick="bjOpenOrderList('+x.taskId+')">&#129534; '+n+' order'+(n>1?'s':'')+'</button>';
-    } else if(x.billingAgenda){
+    } else {
-      var sch = bjScheduledFromRemark(x.remarks);
+      if(isPartner && visited) chips += '<span class="tlbadge nobill" title="No order placed on this visit">&#8709; No billing</span>';
-      if(sch) chips += '<span class="tlbadge sch" title="Scheduled (from remark)">&#128197; '+esc(sch)+'</span>';
+      if(x.billingAgenda){ var sch = bjScheduledFromRemark(x.remarks); if(sch) chips += '<span class="tlbadge sch" title="Scheduled (from remark)">&#128197; '+esc(sch)+'</span>'; }
+    }
     var thumb=tlThumb(x.attachment);
     if(thumb || chips) extra = '<div class="tlextra">'+thumb+chips+'</div>';
+  }
-  var card='<div class="tlcard">'+
+  var card='<div class="tlcard'+(overDwell?' long-dwell':'')+'">'+
         '<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>' : '')+
           tlAgendas(x)+
   more.style.display = hasMore ? 'block' : 'none';
+}
 /* ===================== ORDERS DRAWER ===================== */
 // All retail orders a partner placed on the visit day, each with its line items.
-function bjOpenOrderList(fofoId){
+function bjOpenOrderList(fofoId, date){
   if(!fofoId) return;
-  var date=(window._exec && window._exec.date) || '';
+  date = date || (window._exec && window._exec.date) || window._boardDate || '';
   window._od = { fofoId:fofoId, date:date };
   el('bj-od-title').innerHTML='&#129534; Orders';
   el('bj-od-sub').textContent='Orders placed on '+date;
   el('bj-od-body').innerHTML='<div class="odloading"><div class="spinner"></div>Loading&hellip;</div>';
   el('bj-od-back').classList.add('show');

Subversion Repositories SmartDukaan

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