WebSVN – SmartDukaan – Diff – //trunk/profitmandi-fofo/src/main/webapp/WEB-INF/views/ftl/lms-dashboard-standalone.vm

   .hide{display:none !important}
   /* Liveness reads better as a ticking clock than as a boxed date field: the board is always
      today, and a timestamp that never visibly moves looks stale rather than live. */
   .liveclock{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--soft);font-weight:600}
+  /* A readout, not a control: the dates are picked on the Command Center filter bar. */
+  .periodtag{display:inline-flex;align-items:baseline;gap:7px;font-size:12.5px;color:var(--soft);font-weight:600}
+  .periodtag .pl{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
+  .periodtag #dashPeriod{color:var(--ink);font-weight:650;white-space:nowrap}
   .livedot{width:7px;height:7px;border-radius:50%;background:#2f9e44;flex:none}
   .livedot.beat{animation:livePulse .9s ease-out}
   .livedot.stalled{background:#e03131}
   @keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(47,158,68,.55)}100%{box-shadow:0 0 0 7px rgba(47,158,68,0)}}
   @media (prefers-reduced-motion:reduce){ .livedot.beat{animation:none} }
   /* Triangle drawn with borders — no glyph, so it cannot fall back to a tofu box the way U+2195 did. */
   th.sortable .arrow{display:inline-block;width:0;height:0;margin-left:5px;vertical-align:middle;
     border-left:4px solid transparent;border-right:4px solid transparent}
   th.sortable .arrow.up{border-bottom:5px solid currentColor}
   th.sortable .arrow.down{border-top:5px solid currentColor}
+  /* Generic table search + sort, attached to every list table that does not sort server-side.
+     Deliberately NOT the .sortable class: renderPipeHead() rewrites every th.sortable in the
+     document, so sharing it would have the pipeline stamping its arrows onto these headers. */
+  th.tsort{cursor:pointer;user-select:none;white-space:nowrap}
+  th.tsort:hover{color:var(--brand2)}
+  th.tsort.on{color:var(--brand2)}
+  th.tsort .arrow{display:inline-block;width:0;height:0;margin-left:5px;vertical-align:middle;
+    border-left:4px solid transparent;border-right:4px solid transparent}
+  th.tsort .arrow.up{border-bottom:5px solid currentColor}
+  th.tsort .arrow.down{border-top:5px solid currentColor}
+  .tstools{display:flex;align-items:center;gap:9px;margin:0 0 10px;flex-wrap:wrap}
+  .tstools .inp{width:210px;font-size:12.5px;padding:7px 10px}
+  .tstools .tscount{font-size:11.5px;color:var(--soft);font-weight:600;font-variant-numeric:tabular-nums}
+  .tsempty{font-size:12.5px;color:var(--soft);font-style:italic;padding:14px 0;text-align:center}
   /* Field label outside the filter bar (.ctl .lbl is scoped to it) + the record-action modals. */
   .lbl{display:block;font-size:12px;font-weight:600;color:var(--soft);margin:10px 0 4px}
   .modal{position:fixed;inset:0;z-index:90;background:rgba(14,18,40,.44);display:flex;align-items:flex-start;
          justify-content:center;padding:6vh 16px;overflow:auto}
   .modal .box{background:#fff;border-radius:14px;width:min(640px,100%);box-shadow:0 26px 70px rgba(10,15,40,.3)}
   .drawer.open{transform:none}
   .drawer .dh{padding:17px 20px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px;flex:none}
   .drawer .crumb2{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--coral)}
   .drawer h3{margin:2px 0 1px;font-size:18px;font-weight:770;letter-spacing:-.01em}
   .drawer .dsub{color:var(--muted);font-size:12.5px}
+  /* The title block takes the slack, so the tools slot and the close button sit against the right
+     edge instead of two competing auto margins splitting the gap between them. */
+  .drawer .dhmain{flex:1;min-width:0}
+  .drawer .dtools{flex:none;align-self:center}
+  .drawer .dtools .tstools{margin:0}
+  .drawer .dtools .tstools .inp{width:190px}
   .drawer .x{margin-left:auto;cursor:pointer;font-size:22px;line-height:1;color:var(--soft);background:none;border:0;padding:0 2px}
   .drawer .dbody{padding:16px 18px 40px;overflow:auto;flex:1}
   .drawer .card{margin-bottom:12px}
   .dstat{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px}
   .dstat .box{background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 12px}
         <div class="crumb">Management · Cross-region roll-up</div>
         <h1 class="page">Dashboards</h1>
         <div class="sub">Funnel, SLA compliance, ageing &amp; servicing across all regions — derived from the lead record.</div>
       </div>
       <div class="hd-right">
-        <span class="ctl"><span class="lbl">Period</span><span id="dashPeriod">—</span></span>
+        <span class="periodtag"><span class="pl">Period</span><span id="dashPeriod">&mdash;</span></span>
         <button class="btn ghost sm" onclick="exportPipeline()">Export CSV</button>
       </div>
     </div>
     <div class="kpis" id="dashKpis"></div>
 </div>
 <!-- drawer + toast -->
 <div class="drawer-ov" id="ov" onclick="closeDrawer()"></div>
 <div class="drawer" id="drawer">
-  <div class="dh"><div><div class="crumb2" id="dCrumb"></div><h3 id="dTitle"></h3><div class="dsub" id="dSub"></div></div><button class="x" onclick="closeDrawer()">&times;</button></div>
+  <div class="dh"><div class="dhmain"><div class="crumb2" id="dCrumb"></div><h3 id="dTitle"></h3><div class="dsub" id="dSub"></div></div><div class="dtools" id="dTools"></div><button class="x" onclick="closeDrawer()">&times;</button></div>
   <div class="dbody" id="dBody"></div>
 </div>
 <!-- Record actions: edit the record, and log a call outcome. Both write to the same endpoints
      the in-app lead record uses. -->
 <div class="modal hide" id="editModal">
     // Under a lakh needs two decimals: a ₹1,000 lead is 0.01L, and one decimal would print it as
     // ₹0L — the same information loss the old scaling caused, just at the other end.
     var n=l<1?Math.round(l*100)/100:Math.round(l*10)/10;
     return '&#8377;'+(n%1===0?n:n.toFixed(l<1?2:1))+'L'; }
+  /**
+   * "1 - 21 Sep 2026" / "28 Aug - 21 Sep 2026" / "21 Dec 2025 - 3 Jan 2026".
+   * ISO on both ends made the reader parse two 10-character strings to see it was one month.
+   */
+  function periodLabel(from,to){
+    if(!from||!to) return (from||to||'\u2014');
+    var a=new Date(from), b=new Date(to);
+    if(isNaN(a)||isNaN(b)) return from+' \u2192 '+to;
+    var M=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+    var sameY=a.getFullYear()===b.getFullYear(), sameM=sameY&&a.getMonth()===b.getMonth();
+    if(sameM)  return a.getDate()+' \u2013 '+b.getDate()+' '+M[b.getMonth()]+' '+b.getFullYear();
+    if(sameY)  return a.getDate()+' '+M[a.getMonth()]+' \u2013 '+b.getDate()+' '+M[b.getMonth()]+' '+b.getFullYear();
+    return a.getDate()+' '+M[a.getMonth()]+' '+a.getFullYear()+' \u2013 '+b.getDate()+' '+M[b.getMonth()]+' '+b.getFullYear();
+  }
+  function setDashPeriod(){ byId('dashPeriod').textContent=periodLabel(STATE.from,STATE.to); }
   // ---- tabs
   var SCREENS=['cmd','record','create','assign','live','dash','chk','audit'];
   var LOADED={};
   function go(id,btn){ SCREENS.forEach(function(s){ byId(s).classList.toggle('hide',s!==id); });
     // Leaving the live tab must stop its poll; entering it starts a fresh one.
     if(id==='live'){ startLive(); } else { stopLive(); }
     if(id==='chk') loadQuestions();
     document.querySelectorAll('.tab').forEach(function(t){ t.classList.remove('active'); }); if(btn) btn.classList.add('active');
-    if(id==='dash'){ byId('dashPeriod').textContent=(STATE.from||'')+' → '+(STATE.to||''); loadBgc(); }
+    if(id==='dash'){ setDashPeriod(); loadBgc(); }
     if(id==='record' && !LOADED.record){ LOADED.record=true; loadRecentRecord(); }
     if(id==='assign' && !LOADED.assign){ LOADED.assign=true; buildAssign(); }
     if(id==='audit'){ buildAudit(); } }
   // ---- toast
     PIPE.page=n; loadPipeline();
+  }
   function kpiBucket(k){ switch(k){case'new':return['STAGE','NEW'];case'awaiting':return['STAGE','ASSIGNED'];
     case'sla':return['ATTENTION','BREACHED_NO_CONTACT'];case'contacted':return['STAGE','CONTACTED'];
+    case'qualified':return['STAGE','QUALIFIED'];
+    // The Onboarded tile counts ONBOARDED + ACTIVE, so its drill has to as well.
-    case'qualified':return['STAGE','QUALIFIED'];case'onboarded':return['STAGE','ONBOARDED'];default:return['ALL','']; } }
+    case'onboarded':return['STAGE_IN','ONBOARDED,ACTIVE'];default:return['ALL','']; } }
   // ---- DASHBOARDS
   var DASH_KPI=[ {i:'&#128229;',bg:'#eef1fb',fg:'#3b5bdb'}, {i:'&#128200;',bg:'#e6fcf5',fg:'#0ca678',v:'#0ca678'},
     {i:'&#9878;',bg:'#fff4e6',fg:'#f08c00',v:'#f08c00'}, {i:'&#128222;',bg:'#e3fafc',fg:'#0c8599'},
     {i:'&#8987;',bg:'#fff0f0',fg:'#e03131',v:'#e03131'}, {i:'&#128176;',bg:'#ebfbee',fg:'#2f9e44'} ];
     byId('dashFix').innerHTML=out;
+  }
   // ---- drill drawer
   function openDrawer(crumb,title,sub,html){ byId('dCrumb').textContent=crumb||''; byId('dTitle').textContent=title||'';
+    byId('dSub').textContent=sub||'';
+    // The filter for a drawer table lives in the drawer header, so it has to go when the body it
+    // belongs to is replaced — otherwise the next drawer opens wearing the last one's filter.
+    byId('dTools').innerHTML='';
-    byId('dSub').textContent=sub||''; byId('dBody').innerHTML=html||''; byId('ov').classList.add('open'); byId('drawer').classList.add('open'); }
+    byId('dBody').innerHTML=html||''; byId('ov').classList.add('open'); byId('drawer').classList.add('open'); }
   function closeDrawer(){ byId('ov').classList.remove('open'); byId('drawer').classList.remove('open'); }
   document.addEventListener('keydown',function(e){ if(e.key==='Escape')closeDrawer();
     if(e.key==='/'&&document.activeElement.tagName!=='INPUT'){ e.preventDefault(); byId('lmsSearch').focus(); } });
+  // No SLA column: the drawer lists leads by stage, region or search term, and the first-contact
+  // clock only ever ran on leads created through the LMS -- so the column was a wall of em-dashes
+  // with the occasional breach, carrying no information the drawer was opened to find. SLA lives
+  // where it is the subject: the pipeline, the attention queue, and the SLA Compliance report.
   function drawerLeadTable(leads){ if(!leads||!leads.length) return '<div class="ph">No leads in this bucket.</div>';
-    var h='<div class="card"><table><thead><tr><th>LMS ID</th><th>Business</th><th>Stage</th><th>Owner</th><th>SLA</th><th class="num">Value</th></tr></thead><tbody>';
+    var h='<div class="card"><table><thead><tr><th>LMS ID</th><th>Business</th><th>Stage</th><th>Owner</th><th class="num">Value</th></tr></thead><tbody>';
     leads.forEach(function(l){ h+='<tr class="clickrow" data-leadid="'+l.id+'"><td><span class="idpill">'+esc(l.lmsCode)+'</span></td>'+
       '<td><b>'+esc(l.name||'—')+'</b>'+(l.outlet?'<br><span style="color:#97a1b5;font-size:11px">'+esc(l.outlet)+'</span>':'')+'</td>'+
-      '<td>'+stagePill(l.stage,l.stageLabel)+'</td><td>'+esc(l.owner||'—')+'</td><td>'+slaCell(l.slaState)+'</td>'+
+      '<td>'+stagePill(l.stage,l.stageLabel)+'</td><td>'+esc(l.owner||'—')+'</td>'+
       '<td class="num">'+inrShort(l.value)+'</td></tr>'; });
     return h+'</tbody></table></div>'; }
   function drill(crumb,title,sub,bt,bk){ openDrawer(crumb,title,'Loading…','<div class="ph">Loading…</div>');
     var q='?bucketType='+encodeURIComponent(bt)+(bk?'&bucketKey='+encodeURIComponent(bk):'')+qs();
     getJSON('/lms/dashboard/leads'+q,function(d){ var leads=(d&&d.leads)?d.leads:[];
+      var cap=(d&&d.limit)?d.limit:0;
+      // The drawer is capped, so say so -- otherwise a bar reading 170 opens a list of 100 and the
+      // reader has to guess which number is wrong.
+      var count=(cap&&leads.length>=cap)?('first '+leads.length+' lead(s)'):(leads.length+' lead(s)');
-      openDrawer(crumb,title,(sub||'')+' · '+leads.length+' lead(s)',drawerLeadTable(leads)); }); }
+      openDrawer(crumb,title,(sub||'')+' · '+count,drawerLeadTable(leads)); }); }
   // ---- app-bar search: LMS id / retailer / business / phone / city -> results in the drawer
   var searchTimer=null, searchSeq=0;
   function runSearch(){ var q=(byId('lmsSearch').value||'').trim();
     if(q.length<2){ toast('Type at least 2 characters'); return; }
     var eq=e.target.closest('[data-editq]');
     if(eq){ editQuestion(parseInt(eq.getAttribute('data-editq'),10)); return; }
     // Stage chips are multi-select; the in-call answer chips are single-select.
     var qs=e.target.closest('.qstage');
     if(qs){ qs.classList.toggle('sel'); return; }
+    var tf=e.target.closest('.trailf');
+    if(tf){ setTrailFilter(tf.getAttribute('data-trailtype')); return; }
+    var tp=e.target.closest('#asgTiers .chkopt');
+    if(tp){ byId('asgTiers').querySelectorAll('.chkopt').forEach(function(x){ x.classList.remove('sel'); });
+      tp.classList.add('sel'); ASG.tier=tp.getAttribute('data-tier'); renderAssignList(); return; }
+    // The assign-modal tier pills share the .chkopt class for styling, so they are handled above
+    // and excluded here: this generic branch only picks an answer chip, and letting it swallow a
+    // tier click selected the pill visually while never applying the filter.
     var co=e.target.closest('.chkopt');
-    if(co){ var wrap=co.parentNode;
+    if(co && !co.closest('#asgTiers') && !co.classList.contains('trailf')){ var wrap=co.parentNode;
       wrap.querySelectorAll('.chkopt').forEach(function(x){ x.classList.remove('sel'); });
       co.classList.add('sel'); return; }
     var asg=e.target.closest('[data-assign]');
     if(asg){ e.preventDefault(); e.stopPropagation();
       openAssign(parseInt(asg.getAttribute('data-assign'),10), asg.getAttribute('data-assignname'),
                  asg.getAttribute('data-assignowner'), asg.getAttribute('data-assignregion')); return; }
     var pick=e.target.closest('[data-assignto]');
     if(pick){ assignTo(parseInt(pick.getAttribute('data-assignto'),10)); return; }
-    var tp=e.target.closest('#asgTiers .chkopt');
-    if(tp){ byId('asgTiers').querySelectorAll('.chkopt').forEach(function(x){ x.classList.remove('sel'); });
-      tp.classList.add('sel'); ASG.tier=tp.getAttribute('data-tier'); renderAssignList(); return; }
     var ed=e.target.closest('[data-editlead]');
     if(ed){ e.preventDefault(); e.stopPropagation();
       editLeadById(parseInt(ed.getAttribute('data-editlead'),10)); return; }
     var cb=e.target.closest('[data-call]');
     if(cb){ e.preventDefault(); e.stopPropagation();
     if(la){ openAgentCalls(parseInt(la.getAttribute('data-liveagent'),10)); return; }
     var th=e.target.closest('th.sortable'); if(th){ pipeSort(th.getAttribute('data-sort')); return; }
     var kpi=e.target.closest('.kpi[data-kpi]'); if(kpi){ var b=kpiBucket(kpi.getAttribute('data-kpi'));
       drill('Command Center',kpi.querySelector('.label').textContent,'KPI drill',b[0],b[1]); return; }
     var fs=e.target.closest('.fstep[data-stage]'); if(fs){ var st=fs.getAttribute('data-stage');
-      drill('Lifecycle funnel',fs.getAttribute('data-label'),'Reached this stage',st==='ALL'?'ALL':'STAGE',st==='ALL'?'':st); return; }
+      drill('Lifecycle funnel',fs.getAttribute('data-label'),'Reached this stage',st==='ALL'?'ALL':'STAGE_REACHED',st==='ALL'?'':st); return; }
     var att=e.target.closest('.att[data-att]'); if(att){ drill('Needs attention',att.getAttribute('data-attt'),'Attention queue','ATTENTION',att.getAttribute('data-att')); return; }
     var reg=e.target.closest('tr[data-region]'); if(reg){ drill('State funnel',reg.getAttribute('data-rn'),'Region '+reg.getAttribute('data-region'),'REGION',reg.getAttribute('data-region')); return; }
     var rep=e.target.closest('tr[data-rep]'); if(rep){ openReport(rep.getAttribute('data-rep')); return; }
     var lead=e.target.closest('[data-leadid]'); if(lead){ var lid=lead.getAttribute('data-leadid');
       closeDrawer(); LOADED.record=true; byId('recLookup').value=lid; injectRecord(lid);
   function refresh(){ STATE.regionId=byId('fRegion').value||''; STATE.from=byId('fFrom').value||''; STATE.to=byId('fTo').value||'';
     getJSON('/lms/dashboard/summary?_=1'+qs(),renderSummary); loadPipeline();
     getJSON('/lms/dashboard/state-funnel?_=1'+qs(),renderState);
     getJSON('/lms/dashboard/sla-heatmap?_=1'+qs(),renderHeat);
     getJSON('/lms/dashboard/ageing',renderAgeing);
-    byId('dashPeriod').textContent=(STATE.from||'')+' → '+(STATE.to||''); }
+    setDashPeriod(); }
   ['fRegion','fFrom','fTo'].forEach(function(id){ byId(id).addEventListener('change',refresh); });
   // ====================== LEAD RECORD (native sts-mockup layout, real data) ======================
   var STEPS=[['NEW','New'],['ASSIGNED','Assigned'],['CONTACTED','Contacted'],['QUALIFIED','Qualified'],
     ['BEAT_PLANNED','Beat-plan'],['VISITED','Visited'],['ONBOARDED','Onboarded'],['ACTIVE','Active']];
   function loadRecord(){ var v=(byId('recLookup').value||'').replace(/\D/g,''); if(!v){ toast('Enter a lead #'); return; } injectRecord(v); }
   function loadRecentRecord(){ getJSON('/lms/dashboard/leads?bucketType=ALL'+qs(),function(d){ var leads=(d&&d.leads)?d.leads:[];
     if(leads.length){ byId('recLookup').value=leads[0].id; injectRecord(leads[0].id); }
     else { byId('recordHost').innerHTML='<div class="ph">No leads to show. Create one from the Create Lead tab.</div>'; } }); }
+  /** Trail type filter. '' is everything; the rest match LeadActivity.communicationType. */
+  var TRAIL_TYPES=[['','All'],['TELEPHONIC','Telephonic'],['VISIT','Visit'],['UPDATE','Update']];
+  var TRAIL={ filter:'' };
+  /** An entry with no communication type is a stage move or a note — shown as Update. */
+  function trailTypeKey(t){ return t && t.type ? t.type : 'UPDATE'; }
+  function trailCounts(list){
+    var c={};
+    list.forEach(function(t){ var k=trailTypeKey(t); c[k]=(c[k]||0)+1; });
+    return c;
+  }
+  function setTrailFilter(type){
+    TRAIL.filter=type||'';
+    document.querySelectorAll('#trailFilter .trailf').forEach(function(b){
+      b.classList.toggle('sel', b.getAttribute('data-trailtype')===TRAIL.filter); });
+    renderTrailList();
+  }
+  function renderTrailList(){
+    var host=byId('trailHost'); if(!host || !REC) return;
+    var all=REC.trail||[];
+    var list=TRAIL.filter?all.filter(function(t){ return trailTypeKey(t)===TRAIL.filter; }):all;
+    if(!list.length){
+      host.innerHTML='<div class="ph">'+(all.length?'No entries of this type.':'No activity yet.')+'</div>';
+      return;
+    }
+    var h='<div class="trail" id="trailScroll">';
+    list.forEach(function(t){
+      h+='<div class="tevt '+trailType(t.type)+'"><div class="tdot">&#9679;</div>'+
+        '<div class="tt">'+(t.type?esc(t.type):'Update')+'</div>'+
+        '<div class="tm">'+esc(t.actor||'System')+' · '+fmtDT(t.when)+(t.scheduled?(' · scheduled '+fmtDT(t.scheduled)):'')+'</div>'+
+        (t.body?('<div class="td">'+esc(t.body)+'</div>'):'');
+      // The recording of the call this entry came from, so the agent's account of the conversation
+      // and the conversation itself sit together instead of in two separate lists.
+      if(t.callId){
+        h+='<div class="trec"><audio controls preload="none" src="'+CTX+'/lms/recording/'+t.callId+'"></audio>'+
+          (t.durationSeconds?('<span class="note">'+t.durationSeconds+'s</span>'):'')+
+          (t.archived?'':'<span class="note">archiving…</span>')+'</div>';
+      }
+      h+='</div>';
+    });
+    host.innerHTML=h+'</div>';
+    capTrail();
+  }
   /** Trail entries shown before the list starts scrolling. */
   var TRAIL_VISIBLE=5;
   /**
    * Cap the trail at TRAIL_VISIBLE entries and scroll the rest.
     box.style.overflowY='auto';
     box.classList.add('scrolls');
+  }
   function renderRecord(d){
-    REC=d; CALL.id=null;
+    REC=d; CALL.id=null; TRAIL.filter='';
     // header
     var head='<div style="display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px">'+
       '<div><div class="crumb">'+(d.lmsCode?('<span class="idpill">'+esc(d.lmsCode)+'</span>'):('Lead #'+d.id))+'</div>'+
       '<h1 class="page" style="margin-top:4px">'+esc(d.name||'—')+(d.outlet?' <span style="font-weight:500;color:#59668a;font-size:18px">· '+esc(d.outlet)+'</span>':'')+'</h1></div>'+
       '<div style="display:flex;gap:8px;align-items:center">'+stagePill(d.stage,d.stageLabel)+
     var sla='<div class="card"><h2>First-contact SLA</h2><p class="desc">5-hr commitment from creation (SOP §11).</p>'+
       '<div style="font-size:26px;font-weight:800;color:'+slaClr+'">'+esc(d.slaState||'NA')+'</div>'+
       '<div class="kv" style="margin-top:10px">'+kvRow('Due by', d.firstContactDue?fmtDT(d.firstContactDue):'—')+
       kvRow('First contact', d.firstContactedAt?fmtDT(d.firstContactedAt):'<span style="color:#e8590c">not yet</span>')+'</div></div>';
     // trail
-    var trail='<div class="card"><h2>Trail <span style="color:#97a1b5;font-weight:500;font-size:12px">· append-only</span></h2>';
+    // Trail card. The list itself is rendered by renderTrailList() so the type filter can redraw it
-    if(!d.trail||!d.trail.length){ trail+='<div class="ph">No activity yet.</div>'; }
+    // without refetching the record — the whole trail is already in hand.
-    else { trail+='<div class="trail" id="trailScroll">'; d.trail.forEach(function(t){
+    var counts=trailCounts(d.trail||[]);
-      trail+='<div class="tevt '+trailType(t.type)+'"><div class="tdot">&#9679;</div>'+
+    var trail='<div class="card"><h2 style="display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap">'+
-        '<div class="tt">'+(t.type?esc(t.type):'Update')+'</div>'+
+      '<span>Trail <span style="color:#97a1b5;font-weight:500;font-size:12px">· append-only</span></span>'+
-        '<div class="tm">'+esc(t.actor||'System')+' · '+fmtDT(t.when)+(t.scheduled?(' · scheduled '+fmtDT(t.scheduled)):'')+'</div>'+
+      (d.trail&&d.trail.length?('<span class="opts" id="trailFilter">'+
-        (t.body?('<div class="td">'+esc(t.body)+'</div>'):'');
+        TRAIL_TYPES.map(function(t){
-      // The recording of the call this entry came from, so the agent's account of the conversation
+          var n=counts[t[0]]||0;
-      // and the conversation itself sit together instead of in two separate lists.
+          // Offer only the types this lead actually has — a filter that returns nothing is noise.
-      if(t.callId){
+          if(t[0] && !n) return '';
-        trail+='<div class="trec"><audio controls preload="none" src="'+CTX+'/lms/recording/'+t.callId+'"></audio>'+
+          return '<button type="button" class="chkopt trailf'+(TRAIL.filter===t[0]?' sel':'')+'"'+
-          (t.durationSeconds?('<span class="note">'+t.durationSeconds+'s</span>'):'')+
+                 ' data-trailtype="'+t[0]+'">'+esc(t[1])+' <span class="note" style="display:inline">'+
-          (t.archived?'':'<span class="note">archiving…</span>')+'</div>';
+                 (t[0]?n:(d.trail.length))+'</span></button>';
+        }).join('')+'</span>'):'')+
-      }
+      '</h2>'+
-      trail+='</div>'; }); trail+='</div>'; }
+      '<div id="trailHost"></div>';
     trail+='</div>';
     // ---- Click-to-call (SOP §12). VBC places the call server-side: our own device rings first,
     // then the retailer. A blocked number never gets a button at all — the refusal belongs in
     // front of the agent, not in the response to a dial they already started.
       adv='<div class="card"><h2>Advance stage</h2><p class="desc">'+esc(d.stageLabel)+' is terminal — this lead cannot be moved on.</p></div>';
+    }
     byId('recordHost').innerHTML=head+step+
       '<div class="grid g3"><div>'+details+trail+'</div><div>'+sla+call+beat+adv+'</div></div>';
-    capTrail();
+    renderTrailList();
+  }
   // ====================== LIVE CALL BOARD ===================================================
   // Polls /lms/dashboard/live-calls. First paint builds the table; subsequent ticks PATCH the
   // volatile cells rather than re-rendering — re-drawing the whole table every 10s fights anyone
     var fh=''; flags.forEach(function(a){ fh+='<div class="att" data-att="'+a.k+'" data-attt="'+esc(a.t)+'"><div class="ic" style="background:'+a.bg+';color:'+a.fg+'">'+a.i+'</div>'+
       '<div class="ab"><div class="atitle">'+esc(a.t)+'</div><div class="adet">'+esc(a.d)+'</div></div><div class="acount '+a.c+'">'+fmtInt(a.v)+'</div></div>'; });
     byId('auditHygiene').innerHTML=fh; }
   function onboardedCount(){ var s=DATA.summary; if(!s||!s.funnel) return 0; var c=0; s.funnel.forEach(function(f){ if(f.stage==='ONBOARDED')c=f.count; }); return c; }
+  // ---- generic table search + sort ---------------------------------------------------------
+  // Every list table in the console gets a sortable header, and one with enough rows to be worth
+  // filtering also gets a search box. Attached by scanning the DOM rather than by editing each of
+  // the fifteen render functions: tables here are built as HTML strings in a dozen places, and a
+  // per-call-site flag would have been missed by the next one written.
+  //
+  // Client-side, so it sorts and filters WHAT IS ON SCREEN. That is the whole population for the
+  // report tables, and the loaded slice for the ones the server pages (the drawer stops at 100,
+  // the call log at its page size) — the count reads "12 of 100 shown" so it never implies more.
+  // The Lead pipeline is excluded: it sorts and searches server-side across every page, and that
+  // is strictly better wherever it exists.
+  var TS_SEARCH_MIN_ROWS = 8;   // below this a search box is clutter; the sort still attaches
+  var tsBusy = false;           // our own DOM writes must not re-trigger the observer
+  /** Tables that own their behaviour, or are not lists at all, opt out here. */
+  function tsEligible(t){
+    if(t.hasAttribute('data-ts') || t.hasAttribute('data-nots')) return false;
+    if(t.classList.contains('matrix') || t.classList.contains('heat')) return false;
+    if(t.querySelector('th.sortable')) return false;          // the pipeline: server-side sort
+    var head=t.tHead;
+    if(!head || head.rows.length!==1) return false;           // no header, or grouped headers:
+    if(!t.tBodies.length) return false;                       // column index is not 1:1 with th
+    return true;
+  }
+  /** Cell text for comparison; a cell may override it with data-sv (e.g. a raw timestamp). */
+  function tsText(td){
+    if(!td) return '';
+    var v = td.getAttribute && td.getAttribute('data-sv');
+    return ((v!==null&&v!==undefined) ? v : td.textContent).replace(/\s+/g,' ').trim();
+  }
+  /**
+   * Comparable number for a rendered cell, or null when it is not a number.
+   * Sorting on the printed text would put ₹8L above ₹10L and 2m 40s above 10m, which is the kind
+   * of wrong that is hard to notice — so the formats this console actually prints are parsed.
+   */
+  function tsValue(txt){
+    if(!txt || txt==='—' || txt==='-') return null;
+    // duration: "2m 40s", "1h 05m", "45s"
+    if(/\d/.test(txt) && /^(\d+h\s*)?(\d+m\s*)?(\d+s)?$/.test(txt)){
+      var h=/(\d+)h/.exec(txt), mn=/(\d+)m/.exec(txt), sc=/(\d+)s/.exec(txt);
+      return (h?+h[1]*3600:0)+(mn?+mn[1]*60:0)+(sc?+sc[1]:0);
+    }
+    // number, with optional currency prefix, thousands separators and a K / L / Cr / % suffix
+    var m=/^[₹$]?\s*(-?[\d,]+(?:\.\d+)?)\s*(K|L|Cr|%)?$/i.exec(txt);
+    if(m){
+      var n=parseFloat(m[1].replace(/,/g,''));
+      if(isNaN(n)) return null;
+      var suf=(m[2]||'').toLowerCase();
+      if(suf==='k') n*=1e3; else if(suf==='l') n*=1e5; else if(suf==='cr') n*=1e7;
+      return n;
+    }
+    // "21 Sep 2026", with or without a time after it
+    if(/^\d{1,2} [A-Za-z]{3} \d{4}/.test(txt)){ var d=Date.parse(txt); if(!isNaN(d)) return d; }
+    return null;
+  }
+  /** Data rows only — a colspan placeholder ("Loading…", "No rows") is not one. */
+  function tsRows(t){
+    var out=[], b=t.tBodies[0], cols=t.tHead.rows[0].cells.length;
+    if(!b) return out;
+    for(var i=0;i<b.rows.length;i++){
+      var r=b.rows[i];
+      if(r.cells.length>=cols && !r.hasAttribute('data-tsempty')) out.push(r);
+    }
+    return out;
+  }
+  function tsSort(t, idx){
+    var ths=t.tHead.rows[0].cells;
+    var cur=t.getAttribute('data-tscol'), dir=t.getAttribute('data-tsdir')||'desc';
+    // Same column flips; a new column starts descending — what people expect of values and dates,
+    // and harmless on text.
+    dir = (String(idx)===cur) ? (dir==='asc'?'desc':'asc') : 'desc';
+    t.setAttribute('data-tscol', String(idx));
+    t.setAttribute('data-tsdir', dir);
+    var rows=tsRows(t), numeric=false, sawValue=false, allNumeric=true;
+    rows.forEach(function(r){
+      var txt=tsText(r.cells[idx]);
+      if(txt==='' || txt==='—') return;
+      sawValue=true;
+      if(tsValue(txt)===null) allNumeric=false;
+    });
+    numeric = sawValue && allNumeric;
+    rows.sort(function(a,b){
+      var ta=tsText(a.cells[idx]), tb=tsText(b.cells[idx]);
+      var va = numeric ? tsValue(ta) : (ta===''||ta==='—' ? null : ta.toLowerCase());
+      var vb = numeric ? tsValue(tb) : (tb===''||tb==='—' ? null : tb.toLowerCase());
+      if(va===null && vb===null) return 0;
+      if(va===null) return 1;              // blanks sit last in BOTH directions, never at the top
+      if(vb===null) return -1;
+      var c = numeric ? (va-vb) : (va<vb ? -1 : (va>vb ? 1 : 0));
+      return dir==='asc' ? c : -c;
+    });
+    tsBusy=true;
+    var body=t.tBodies[0];
+    rows.forEach(function(r){ body.appendChild(r); });
+    for(var i=0;i<ths.length;i++){
+      var on=(i===idx), label=ths[i].getAttribute('data-tslabel');
+      ths[i].classList.toggle('on',on);
+      ths[i].innerHTML = esc(label||'') + (on ? '<span class="arrow '+(dir==='asc'?'up':'down')+'"></span>' : '');
+    }
+    tsBusy=false;
+  }
+  function tsFilter(t){
+    var bar=t.__tsBar, q=(bar && bar.__input ? bar.__input.value : '').trim().toLowerCase();
+    var rows=tsRows(t), shown=0;
+    tsBusy=true;
+    rows.forEach(function(r){
+      var hit = !q || r.textContent.toLowerCase().indexOf(q)>=0;
+      r.style.display = hit ? '' : 'none';
+      if(hit) shown++;
+    });
+    // One "no matches" row, reused, so a filter that hides everything does not look like a crash.
+    var body=t.tBodies[0], empty=body.querySelector('tr[data-tsempty]');
+    if(q && !shown){
+      if(!empty){
+        empty=document.createElement('tr');
+        empty.setAttribute('data-tsempty','1');
+        empty.innerHTML='<td colspan="'+t.tHead.rows[0].cells.length+'"><div class="tsempty">No rows match “'+esc(q)+'”.</div></td>';
+        body.appendChild(empty);
+      } else {
+        empty.style.display='';
+        empty.firstChild.firstChild.textContent='No rows match “'+q+'”.';
+      }
+    } else if(empty){ empty.style.display='none'; }
+    if(bar && bar.__count){
+      var txt = q ? (shown+' of '+rows.length+' shown') : (rows.length+(rows.length===1?' row':' rows'));
+      if(bar.__count.textContent!==txt) bar.__count.textContent=txt;
+      bar.style.display = (rows.length>=TS_SEARCH_MIN_ROWS || q) ? '' : 'none';
+    }
+    tsBusy=false;
+  }
+  function tsEnhance(t){
+    t.setAttribute('data-ts','1');
+    var ths=t.tHead.rows[0].cells;
+    for(var i=0;i<ths.length;i++){
+      (function(th,idx){
+        th.setAttribute('data-tslabel', th.textContent.trim());
+        th.classList.add('tsort');
+        th.addEventListener('click', function(){ tsSort(t, idx); });
+      })(ths[i], i);
+    }
+    // The toolbar goes OUTSIDE .pipewrap — inside it, it would scroll sideways with the table.
+    var host = (t.parentNode && t.parentNode.classList && t.parentNode.classList.contains('pipewrap'))
+             ? t.parentNode : t;
+    if(!host.parentNode) return;
+    // A drawer table's filter belongs in the drawer header, beside the title that says what the
+    // list is — not floating above the first row, where it pushes the table down and reads as
+    // part of the data. Only the first table claims the slot; a report drawer showing two keeps the
+    // second one's filter inline, where it stays obvious which table it filters.
+    var slot = t.closest('#drawer') ? byId('dTools') : null;
+    if(slot && slot.childElementCount) slot=null;
+    var bar=document.createElement('div');
+    bar.className='tstools';
+    var input=document.createElement('input');
+    input.type='text'; input.className='inp'; input.placeholder='Filter these rows…';
+    var count=document.createElement('span'); count.className='tscount';
+    bar.appendChild(input); bar.appendChild(count);
+    bar.__input=input; bar.__count=count; t.__tsBar=bar;
+    input.addEventListener('input', function(){ tsFilter(t); });
+    tsBusy=true;
+    if(slot) slot.appendChild(bar); else host.parentNode.insertBefore(bar, host);
+    tsBusy=false;
+    tsFilter(t);
+  }
+  /** Enhance any new table, and re-count / re-filter ones whose rows were replaced under us. */
+  function tsScan(){
+    var tables=document.querySelectorAll('table');
+    for(var i=0;i<tables.length;i++){
+      var t=tables[i];
+      if(tsEligible(t)) tsEnhance(t);
+      else if(t.hasAttribute('data-ts') && t.__tsBar) tsFilter(t);
+    }
+  }
+  (function(){
+    var obs=null, queued=false;
+    function run(){
+      queued=false;
+      tsScan();
+      // A MutationObserver delivers asynchronously, so tsBusy alone cannot stop a scan from seeing
+      // its own writes and scanning again. Dropping the records we just produced ends it here.
+      if(obs) obs.takeRecords();
+    }
+    tsScan();
+    if(typeof MutationObserver!=='function') return;
+    obs=new MutationObserver(function(){
+      if(queued) return;                      // at most one scan per frame
+      queued=true;
+      requestAnimationFrame(run);
+    });
+    obs.observe(document.body, {childList:true, subtree:true});
+  })();
   // ---- initial paint from seeds, pipeline loads live
   renderSummary(SEED.summary); renderState(SEED.state); renderHeat(SEED.heat); renderAgeing(SEED.ageing);
-  byId('dashPeriod').textContent=(STATE.from||'')+' → '+(STATE.to||'');
+  setDashPeriod();
   loadPipeline();
   // ---- deep-link: a URL hash such as dash or record opens that tab
   (function(){ var TABIDX={cmd:0,record:1,create:2,assign:3,dash:4,audit:5};
     var h=(location.hash||'').replace('#','').trim();

Subversion Repositories SmartDukaan

(root)//trunk/profitmandi-fofo/src/main/webapp/WEB-INF/views/ftl/lms-dashboard-standalone.vm – Rev 37737 → 37743