Subversion Repositories SmartDukaan

  .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}

  .modal > .desc{text-align:center}

  /* journey totals bar */

  .jstats{display:flex;gap:9px;margin:12px 0 2px;flex-wrap:wrap}

  .js{flex:1;min-width:104px;background:#f8f9fc;border:1px solid var(--line2);border-radius:10px;padding:9px 10px;text-align:center}

  .js .jv{font-size:15.5px;font-weight:760;color:var(--ink);font-variant-numeric:tabular-nums}

  .js .jl{font-size:10px;color:var(--soft);text-transform:uppercase;letter-spacing:.04em;margin-top:3px;font-weight:600}

  /* journey timeline (exec drilldown) */

  .tl{position:relative;margin:14px 2px 4px;padding:4px 0}

  .tl::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;background:#e9edf5;transform:translateX(-50%)}

  .tlgap{position:relative;display:flex;justify-content:center;margin:-3px 0}

  .tlgap .gappill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:11px;font-weight:600;color:var(--muted);z-index:2;box-shadow:0 1px 2px rgba(20,30,60,.05);font-variant-numeric:tabular-nums}

  .tlrow{position:relative;display:flex;margin:14px 0}

  .tlrow.left{justify-content:flex-start}

  .tlrow.right{justify-content:flex-end}

  .tlrow .node{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;z-index:2;box-shadow:0 0 0 4px #fff}

  .tlcard{width:calc(50% - 26px);background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 2px 10px rgba(20,30,60,.07);display:flex;overflow:hidden}

  .tlrow.left .tlcard{flex-direction:row-reverse;text-align:right}

  .tlrow.right .tlcard{flex-direction:row;text-align:left}

  .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 .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}

  .tlph{width:46px;height:46px;border-radius:8px;border:1px dashed #cfd6e6;background:#f4f6fb;display:flex;align-items:center;justify-content:center;color:#b3bcce;font-size:18px}

  .tlchip{font-size:10.5px;font-weight:600;color:var(--muted);background:#f1f3f9;border-radius:6px;padding:2px 7px;white-space:nowrap}

  @media (max-width:560px){.tl::before{left:20px}.tlrow.left,.tlrow.right{justify-content:flex-end}.tlrow .node{left:20px}.tlcard{width:calc(100% - 44px)}.tlrow.left .tlcard{flex-direction:row;text-align:left}}

var ATT_META = {

  notPunchedIn:    {bg:'#fff0f0', fg:'#e03131', ic:'⚠',   title:'Not punched in',                  sub:'executives with a beat, not started', cls:'badflag'},

  idleStale:       {bg:'#fff4e6', fg:'#e8590c', ic:'⏱',   title:'Idle / stale GPS > 40 min',     sub:'no recent GPS ping',                  cls:'warnflag'},

  geofence:        {bg:'#fff0f0', fg:'#e03131', ic:'📍', title:'Check-in outside store geofence',  sub:'>50 m from partner\'s saved location', cls:'badflag'},

  locationOff:     {bg:'#fff4e6', fg:'#e8590c', ic:'📴', title:'Location turned off mid-journey',  sub:'GPS toggled off',                     cls:'warnflag'},

  deferredAwaiting:{bg:'#eef1f6', fg:'#69748c', ic:'↻',   title:'Deferred, awaiting re-action',     sub:'shops deferred today',                cls:''}

};

  window._att = a;

  var order=['notPunchedIn','idleStale','geofence','locationOff','deferredAwaiting'];

  order.forEach(function(k){

    var m=ATT_META[k], list=a[k]||[], n=list.length;

    var cls = n ? ' att clickable' : ' att';

  });

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');

  var h='<button class="x" onclick="closeModal()">&times;</button><h3>'+m.title+'</h3>'+

        '<p class="desc">'+list.length+' '+(list.length===1?'item':'items')+'</p>';

  if(!list.length){ h+='<p class="desc">Nothing here.</p>'; }

  else{

    h+='<table><tbody>';

    list.forEach(function(x){

      h+='<tr><td style="font-weight:600;white-space:nowrap">'+esc(x.name)+'</td>'+

         '<td style="color:#69748c">'+esc(x.detail||'')+'</td></tr>';

    });

    h+='</tbody></table>';

  }

  md.innerHTML=h; mb.classList.add('show');

}

      window._mediaUrl = d.mediaUrl || '';

      // Sequence like the field report: Punch in -> visited stops (by check-in

      // time) -> PENDING/not-visited -> Punch out. The attendance row carries

      // both punch-in & punch-out times; split it into the two bookends.

      var att=null, visited=[], pending=[];

      all.forEach(function(x){

        var tt=(x.taskType||'').toLowerCase(), mt=(x.markType||'').toUpperCase();

        if(tt==='attendance' || mt.indexOf('PUNCH')>=0){ if(!att) att=x; }

        else if(x.checkInTime){ visited.push(x); }

        else { pending.push(x); }

      });

      visited.sort(function(a,b){ return tlSecs(a.checkInTime)-tlSecs(b.checkInTime); });

      // totals across the day's stops (attendance row excluded from leg sums)

      var distKm=0, inStoreSec=0, transitSec=0, leadsN=0;

      all.forEach(function(x){

        var tt=(x.taskType||'').toLowerCase();

        if(tt==='attendance') return;

        if(x.totalDistance) distKm += (parseFloat(x.totalDistance)||0);

        inStoreSec += toSec(x.timeSpent);

        transitSec += toSec(x.transitTime);

        if(tt==='lead') leadsN++;

      });

      var workSec = (att && att.checkInTime && att.checkOutTime) ? (toSec(att.checkOutTime)-toSec(att.checkInTime)) : (att?toSec(att.timeSpent):0);

      if(workSec<0) workSec=0;

      var seq=[];

      if(att && att.checkInTime) seq.push(punchEntry('in', att.checkInTime));

      visited.forEach(function(x){ seq.push(x); });

      pending.forEach(function(x){ seq.push(x); });

      if(att && att.checkOutTime) seq.push(punchEntry('out', att.checkOutTime));

      var h='<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(name)+'</h3>'+

      h+='<div class="jstats">'+

        jstat(fmtSec(workSec),'Working hours')+

        jstat(fmtSec(inStoreSec),'In-store time')+

        jstat(fmtSec(transitSec),'Travel time')+

        jstat(distKm.toFixed(2)+' km','Distance Covered')+

        jstat(visited.length+(leadsN?' · '+leadsN+'L':''),'Stores visited')+

        '</div>';

        var ri=0;

          if(!x._punch && x.checkInTime){

            var tr=(x.transitTime && x.transitTime!=='00:00:00') ? x.transitTime : null;

            if(tr || km){

              var parts=[]; if(tr) parts.push('🚗 '+esc(tr)); if(km) parts.push(esc(km));

            }

          }

          h+=tlRow(x, ri%2===0?'left':'right'); ri++;

function tlSecs(t){ if(!t) return 1e9; var p=t.split(':'); return (+p[0])*3600+(+(p[1]||0))*60+(+(p[2]||0)); }

function toSec(t){ if(!t||t==='00:00:00') return 0; var p=t.split(':'); return (+p[0])*3600+(+(p[1]||0))*60+(+(p[2]||0)); }

function fmtSec(s){ s=Math.max(0,Math.round(s)); var h=Math.floor(s/3600), m=Math.floor((s%3600)/60), ss=s%60; function z(n){return (n<10?'0':'')+n;} return z(h)+':'+z(m)+':'+z(ss); }

function jstat(v,l){ return '<div class="js"><div class="jv">'+v+'</div><div class="jl">'+l+'</div></div>'; }

function hhmm(t){ return t? t.slice(0,5):''; }

function tlThumb(att){

  if(att && window._mediaUrl) return '<img class="tlthumb" src="'+esc(window._mediaUrl+att)+'" onclick="window.open(this.src,\'_blank\')" onerror="tlImgErr(this)">';

  return '<div class="tlph" title="No photo">&#128247;</div>';

}

function tlImgErr(im){ var d=document.createElement('div'); d.className='tlph'; d.title='Photo unavailable'; d.innerHTML='📷'; if(im.parentNode) im.parentNode.replaceChild(d, im); }

function punchEntry(kind, time){ return {_punch:kind, checkInTime:time, markType:(kind==='in'?'PUNCHIN':'PUNCHOUT'), taskType:'attendance'}; }

function tlStyle(x){

  var mt=(x.markType||'').toUpperCase(), tt=(x.taskType||'').toLowerCase();

  if(x._punch || tt==='attendance' || mt.indexOf('PUNCH')>=0) return {c:'#7048e8', l:(x._punch==='out'?'Punch out':'Punch in'), ic:'⚑'};

  if(mt.indexOf('CHECKOUT')>=0) return {c:'#2f9e44', l:'Visited', ic:'✓'};

  if(mt==='CHECKIN') return {c:'#1098ad', l:'In store', ic:'📍'};

  if(mt==='DEFERRED') return {c:'#e8590c', l:'Deferred', ic:'↻'};

  if(mt==='PENDING' || !x.checkInTime) return {c:'#97a1b5', l:'Pending', ic:'○'};

  return {c:'#3b5bdb', l:(mt||'-'), ic:'●'};

}

function tlTitle(x){

  if(x._punch) return x._punch==='in' ? 'Journey start (Punch in)' : 'Journey end (Punch out)';

  var n=x.taskName||'';

  var pipe=n.lastIndexOf('|'); if(pipe>=0) n=n.slice(pipe+1);      // drop leading agenda tags

  n=n.replace(/\s*VISIT\b.*$/i,'').replace(/\s*visit\s*$/i,'').replace(/\bnull\b/gi,'').replace(/\s{2,}/g,' ').trim();

  return n || '(stop)';

}

function tlRow(x, side){

  var s=tlStyle(x);

  var tt=(x.taskType||'').toLowerCase();

  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') + ' · ' + hhmm(x.checkInTime);

  } else {

    var io = (x.checkInTime?hhmm(x.checkInTime):'-') + ' → ' + (x.checkOutTime?hhmm(x.checkOutTime):'-');

    var dur = (x.timeSpent && x.timeSpent!=='00:00:00') ? ' · '+esc(x.timeSpent) : '';

    var typeLabel = tt==='lead' ? 'Lead' : (tt==='office-visit'?'Office':'Partner');

    meta = x.checkInTime ? (typeLabel+' · '+io+dur) : (typeLabel+' · not visited');

  }

  // image (or placeholder) + battery + location-toggle on real stops

  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>';

    extra = '<div class="tlextra">'+tlThumb(x.attachment)+chips+'</div>';

  }

  return '<div class="tlrow '+side+'">'+

      '<div class="node" style="background:'+s.c+'">'+s.ic+'</div>'+

      '<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>'+

          '<div class="mt">'+meta+'</div>'+extra+'</div>'+

      '</div></div>';

}