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

   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="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._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>';
   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,
+}
 // 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;
+  var view=(rows||[]).slice(), m=key?FUNNEL_META[key]:null;   // copy — never reorder the source
-  if(m) view=rows.filter(m.f);
+  if(m) view=view.filter(m.f);
+  if(boardSortKey) view.sort(function(a,b){
+    var x=boardSortVal(a,boardSortKey), y=boardSortVal(b,boardSortKey);
+    if(typeof x==='string') return boardSortAsc? (''+x).localeCompare(''+y):(''+y).localeCompare(''+x);
+    return boardSortAsc? x-y : y-x;
+  });
   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>';
+  }
   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'); }
+// 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){
+  switch(key){
+    case 'agenda':  return r.agendaFilled?1:0;
+    case 'name':    return r.name||'';
+    case 'punch':   return r.punchInTime||'';   // HH:MM:SS string; blanks group together
+    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||'';
+    default:        return 0;
+  }
+}
+function sortBoard(key){
+  if(boardSortKey===key) boardSortAsc=!boardSortAsc; else { boardSortKey=key; boardSortAsc=false; }
+  var c=el('bj-board'); if(c) c.innerHTML=boardCard();   // re-render; sort applied inside boardCard()
+}
+// Sort-direction caret, shown only on the active column.
+function bsArrow(key){ return boardSortKey===key ? (boardSortAsc?' &#9650;':' &#9660;') : ''; }
 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 onclick="sortBoard(\'agenda\')">Agenda'+bsArrow('agenda')+'</th>'+
-    '<th>Agenda</th><th>Executive</th><th>Punch In/Out</th>'+
+    '<th onclick="sortBoard(\'name\')">Executive'+bsArrow('name')+'</th>'+
+    '<th onclick="sortBoard(\'punch\')">Punch In/Out'+bsArrow('punch')+'</th>'+
-    '<th class="num" title="Planned partner visits + self-assigned leads">Total</th>'+
+    '<th class="num" title="Planned partner visits + self-assigned leads" onclick="sortBoard(\'total\')">Total'+bsArrow('total')+'</th>'+
+    '<th class="num" onclick="sortBoard(\'completed\')">Completed'+bsArrow('completed')+'</th>'+
-    '<th class="num">Completed</th><th class="num">Pending</th><th class="num">Deferred</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">Transit</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">In-store</th>'+
+    '<th class="num" title="Time spent inside stores so far today" onclick="sortBoard(\'inStore\')">In-store'+bsArrow('inStore')+'</th>'+
-    '<th>State</th><th>Action</th>'+
+    '<th onclick="sortBoard(\'state\')">State'+bsArrow('state')+'</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);
     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><b>'+esc(r.name)+'</b>'+flagBadge(r)+'<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 cgreen">'+c.completed+'</td>'+
        '<td class="num cnt">'+c.pending+'</td>'+
   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 ----
+// higher rate = worse, so redder as the flagged share climbs.
+function flagRateColor(p){ if(p>=50)return '#e03131'; if(p>=25)return '#e8590c'; if(p>=10)return '#f08c00'; return '#2f9e44'; }
+function flagStatusColor(s){
+  switch(s){
+    case 'action':      return '#e03131';
+    case 'systemic':    return '#e8590c';
+    case 'partial':     return '#f08c00';
+    case 'needs floor': return '#1098ad';
+    case 'too broad':   return '#7048e8';
+    case 'contained':   return '#2f9e44';
+    default:            return '#97a1b5';   // "never fires" / "no data"
+  }
+}
+function flagStatusChip(s){
+  var c=flagStatusColor(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>';
+}
+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>';
+  list.forEach(function(r){
+    var hits=r.count||0, denom=r.denom||0, rate=pct(hits,denom);
+    var open = hits>0 ? ' class="clickable" onclick="openFlag(\''+r.code+'\')"' : '';
+    var cntColor = hits>0 ? flagRateColor(rate) : '#97a1b5';
+    h+='<tr'+open+'>'+
+       '<td style="font-weight:700;color:#97a1b5">'+esc(r.num)+'</td>'+
+       '<td>'+esc(r.title)+'</td>'+
+       '<td class="num cnt" style="font-weight:700;color:'+cntColor+'">'+num(hits)+'</td>'+
+       '<td class="num cnt cmuted">'+num(denom)+'</td>'+
+       '<td class="num cnt cmuted">'+(denom?rate+'%':'&mdash;')+'</td>'+
+       '<td>'+flagStatusChip(r.status)+(hits>0?' <span class="chev">&#9656;</span>':'')+'</td>'+
+       '</tr>';
+  });
+  return h+'</tbody></table></div>';
+}
+function openFlag(code){
+  var list=window._visitFlags||[], r=null;
+  for(var i=0;i<list.length;i++){ if(list[i].code===code){ r=list[i]; break; } }
+  if(!r) return;
+  var items=r.items||[], date=window._boardDate||'';
+  var h='<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(r.num)+' &middot; '+esc(r.title)+'</h3>'+
+        '<p class="desc">'+items.length+' flagged '+(items.length===1?'visit':'visits')+
+        (r.denom?' of '+num(r.denom)+' &middot; '+pct(r.count,r.denom)+'%':'')+' &middot; '+flagStatusChip(r.status)+'</p>';
+  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+"')\"":'';
+      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>';
+  }
+  el('bj-modal').innerHTML=h; el('bj-modal-back').classList.add('show');
+}
+// Small red flag badge for the board's executive cell (count of rules tripped today).
+function flagBadge(r){
+  var f=r.flags||[]; if(!f.length) return '';
+  return ' <span title="'+f.length+' visit-quality flag'+(f.length>1?'s':'')+'" style="display:inline-block;font-size:10px;font-weight:700;color:#e03131;background:#fff0f0;border:1px solid #ffc9c9;border-radius:999px;padding:0 6px;vertical-align:middle">&#9873; '+f.length+'</span>';
+}
 function attentionList(a){
   window._att = a;
   var order=['notPunchedIn','idleStale','geofence','locationOff','deferredAwaiting'];
   var h='<div class="attrow">';
   order.forEach(function(k){
     '<polygon points="'+(r-7)+','+(d-7)+' '+(r+7)+','+(d-7)+' '+r+','+H+'" fill="#e8590c"/>'+
     '<circle cx="'+r+'" cy="'+r+'" r="'+(r-2)+'" fill="#e8590c" stroke="#ffffff" stroke-width="2"/>'+
     '<text x="'+r+'" y="'+(r+4)+'" text-anchor="middle" font-size="12" font-weight="bold" fill="#ffffff">'+s+'</text></svg>';
   return {url:'data:image/svg+xml;charset=UTF-8,'+encodeURIComponent(svg), scaledSize:new google.maps.Size(d,H), anchor:new google.maps.Point(r,H)};
+}
+// Numbered visit pin — a rounded badge (with pointer) that widens to fit a multi-
+// char label like "4→1" (planned→actual). Mirrors bjStopPin's scaling approach.
+function bjSeqPin(color, label){
+  var s=String(label), w=Math.max(28, 12 + s.length*8), H=40, bh=24, rx=8;
+  var svg='<svg xmlns="http://www.w3.org/2000/svg" width="'+w+'" height="'+H+'" viewBox="0 0 '+w+' '+H+'">'+
+    '<rect x="0.5" y="0.5" width="'+(w-1)+'" height="'+bh+'" rx="'+rx+'" fill="'+color+'" stroke="#ffffff"/>'+
+    '<polygon points="'+(w/2-6)+','+bh+' '+(w/2+6)+','+bh+' '+(w/2)+','+H+'" fill="'+color+'"/>'+
+    '<text x="'+(w/2)+'" y="'+(bh/2+5)+'" text-anchor="middle" font-size="13" font-weight="bold" fill="#ffffff">'+s+'</text></svg>';
+  return {url:'data:image/svg+xml;charset=UTF-8,'+encodeURIComponent(svg),
+          scaledSize:new google.maps.Size(w,H), anchor:new google.maps.Point(w/2,H)};
+}
 function fmtDur2(sec){ sec=sec||0; var m=Math.floor(sec/60), s=sec%60; return m+'m'+(s>0?' '+s+'s':''); }
 function bjDrawMap(data){
   var box=document.getElementById('bjMap'); if(!box) return;
   box.innerHTML='';
   var map=new google.maps.Map(box,{zoom:12,center:{lat:20.5937,lng:78.9629},mapTypeControl:true,streetViewControl:false});
     var lbl=fmtDur2(s.seconds);
     pin({lat:s.lat,lng:s.lng}, bjStopPin(lbl), 80, 'Idle '+lbl,
       '<div style="font-size:12px"><b>&#9201; Idle stop</b><br>Stayed ~'+esc(lbl)+' within 50 m</div>');
   });
-  // 3) every visit — visited stops are numbered in array order; pending / deferred
+  // 3) every visit — each pin shows planned→actual. planned # = position in the
+  // assigned order the backend returns (id/insert order). actual # = position among
-  // stops (plotted at their planned store location) get a neutral dot and sit
+  // VISITED stops ordered by check-in time (same key the route/timeline use).
+  // Pending / deferred stops (no check-in) show just the planned # and sit below.
-  // below the visited pins.
+  var visitsArr = data.visits||[];
-  var idx=0;
+  visitsArr.slice()
+    .filter(function(v){ return !!v.checkInTime; })
+    .sort(function(a,b){ return tlSecs(a.checkInTime)-tlSecs(b.checkInTime); })
+    .forEach(function(v,i){ v._actualNo = i+1; });   // tags the shared object refs
-  (data.visits||[]).forEach(function(v){
+  visitsArr.forEach(function(v,i){
-    var color=bjMarkColor(v.markType);
+    var color=bjMarkColor(v.markType), visited=!!v.checkInTime, planned=i+1;
-    var visited = !!v.checkInTime;
+    var label = visited ? (planned+'→'+v._actualNo) : String(planned);
-    pin({lat:v.lat,lng:v.lng}, bjPin(color, visited?String(++idx):'•'), visited?100:60,
+    pin({lat:v.lat,lng:v.lng}, bjSeqPin(color, label), visited?100:60,
       (v.name||'')+' ('+v.markType+')', bjMarkInfo(v,color));
   });
   // 4) punch in / punch out
   if(data.punchIn){

Subversion Repositories SmartDukaan

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