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

   .tab.active{color:var(--navy);border-bottom-color:var(--coral)}
   /* ===== generic ===== */
   .crumb{font-size:12px;color:var(--soft);font-weight:600}
   h1.page{margin:2px 0 2px;font-size:23px;font-weight:760;letter-spacing:-.01em}
+  /* Title block and filters share one line: the title block shrinks (its subtitle wraps) rather than
+     pushing the filters onto a second row. Only a narrow viewport is allowed to wrap. */
-  .pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
+  .pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:nowrap;margin-bottom:18px}
+  .pagehead > div:first-child{min-width:0;flex:1 1 auto}
+  .pagehead .hd-right{flex:0 0 auto}
+  .pagehead .hd-right select.ctl{max-width:200px;text-overflow:ellipsis}
+  @media (max-width:1100px){ .pagehead{flex-wrap:wrap} }
   .pagehead .sub{color:var(--muted);font-size:13px;margin-top:2px}
+  /* When the filter row wraps under the title it must still hug the right edge, not restart at the left. */
-  .hd-right{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
+  .hd-right{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
   .ctl{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:13px;color:var(--ink);font-weight:600}
   .ctl .lbl{color:var(--soft);font-weight:500;margin-right:5px}
   select.ctl{appearance:none;cursor:pointer;padding-right:26px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%2369748c' fill='none' stroke-width='1.5'/></svg>");background-repeat:no-repeat;background-position:right 10px center}
   .btn{background:var(--navy);border:0;color:#fff;font-weight:650;padding:9px 15px;border-radius:9px;cursor:pointer;font-size:13px}
   .btn.coral{background:var(--coral)}
         <div class="crumb">Sales · Lead Pipeline</div>
         <h1 class="page">Command Center</h1>
         <div class="sub">Every lead you own or oversee — from creation to onboarding. SLA clock runs on all NEW records.</div>
       </div>
       <div class="hd-right">
+        <select class="ctl" id="fAgent" title="Call Center user — every number below narrows to leads they created or currently own">
+          <option value="">All Call Center users</option>
+        </select>
         <select class="ctl" id="fRegion">
           <option value="">All regions</option>
           #foreach($r in $regions)
             <option value="$r.getId()">$!r.getName()#if($r.getRegionCode()) ($r.getRegionCode())#end</option>
           #end
     </div>
     <div class="card">
         <h2 style="display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap">Lead pipeline
           <span style="display:flex;gap:6px;align-items:center">
-            <select id="pipeAgent" class="inp" style="font-size:12.5px;padding:7px 28px 7px 10px;width:190px" onchange="pipeAgentChanged()" title="Call Center user — leads they created or currently own">
-              <option value="">Call Center user…</option>
-            </select>
             <input id="pipeQ" class="inp" style="width:210px;font-size:12.5px;padding:7px 10px"
                    placeholder="Name, outlet, mobile, city, created by">
             <button class="btn ghost sm" onclick="pipeSearch()">Search</button>
             <button class="btn ghost sm hide" id="pipeClear" onclick="pipeClearSearch()">Clear</button>
           </span>
 <div class="toastwrap" id="toasts"></div>
 <script>
   var CTX = "${rc.contextPath}";
   var SEED = { summary:$summaryJson, state:$stateFunnelJson, heat:$slaHeatmapJson, ageing:$ageingJson };
-  var STATE = { regionId:'', from:'$!fromDate', to:'$!toDate' };
+  var STATE = { regionId:'', agentId:'', from:'$!fromDate', to:'$!toDate' };
   var DATA = { summary:null, state:null, heat:null, ageing:null };
   function byId(x){ return document.getElementById(x); }
   function esc(s){ if(s==null) return ''; return (''+s).replace(/[&<>"]/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c];}); }
   function fmtInt(n){ if(n==null) return '0'; return (''+n).replace(/\B(?=(\d{3})+(?!\d))/g,','); }
     t.innerHTML=(ok?'<span class="ok">&#10003;</span>':'')+esc(msg); w.appendChild(t);
     setTimeout(function(){ t.style.opacity='0'; t.style.transition='opacity .3s'; setTimeout(function(){ t.remove(); },300); },2600); }
   // ---- filters + fetch
   function qs(){ var q=''; if(STATE.regionId)q+='&regionId='+encodeURIComponent(STATE.regionId);
+    if(STATE.agentId)q+='&agentId='+encodeURIComponent(STATE.agentId);
     if(STATE.from)q+='&from='+encodeURIComponent(STATE.from); if(STATE.to)q+='&to='+encodeURIComponent(STATE.to); return q; }
   function getJSON(path,cb,onErr){ fetch(CTX+path,{credentials:'same-origin',headers:{'X-Requested-With':'XMLHttpRequest'}})
     .then(function(r){ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); })
     .then(function(j){ cb((j&&j.response!==undefined)?j.response:j); })
     .catch(function(e){ console.error('LMS fetch failed',path,e);
   // ---- Lead pipeline: filtered, sorted and paged on the server ------------------------------
   // PIPE.q is the search term. While it is set the date filter does not apply — a search hunts for
   // one known retailer, and quietly scoping it to the selected month would report "not found" for a
   // lead that exists. The caption says which mode is in force so that is never a surprise.
-  var PIPE = { q:'', agentId:'', sort:'created', dir:'desc', page:1, pageSize:50, pages:1, total:0 };
+  var PIPE = { q:'', sort:'created', dir:'desc', page:1, pageSize:50, pages:1, total:0 };
-  // Call Center users for the pipeline filter. "Their" leads = created by them OR owned by them.
+  // Call Center users for the page-level agent filter (header). "Their" leads = created by them OR
+  // owned by them; qs() carries it, so cards, funnel, attention queue, pipeline and every drawer
+  // narrow together.
   function loadCallCenterUsers(){
     getJSON('/lms/dashboard/callcenter-users', function(d){
-      var sel=byId('pipeAgent'); if(!sel) return; var keep=sel.value;
+      var sel=byId('fAgent'); if(!sel) return; var keep=sel.value;
       var users=(d&&d.users)||[];
-      var h='<option value="">'+(users.length?'Call Center user…':'No Call Center users found')+'</option>';
+      var h='<option value="">'+(users.length?'All Call Center users':'No Call Center users found')+'</option>';
       users.forEach(function(u){ h+='<option value="'+u.authId+'">'+esc(u.name)+'</option>'; });
       sel.innerHTML=h; sel.value=keep||'';
-    }, function(){ var sel=byId('pipeAgent'); if(sel) sel.innerHTML='<option value="">Call Center list unavailable</option>'; });
+    }, function(){ var sel=byId('fAgent'); if(sel) sel.innerHTML='<option value="">Call Center list unavailable</option>'; });
+  }
+  // Search mode ignores the date window but keeps the scope filters (region + agent).
-  function pipeAgentChanged(){ PIPE.agentId=byId('pipeAgent').value||''; PIPE.page=1; loadPipeline(); }
+  function scopeQs(){ var q=''; if(STATE.regionId) q+='&regionId='+encodeURIComponent(STATE.regionId);
-  function agentQs(){ return PIPE.agentId ? ('&agentId='+encodeURIComponent(PIPE.agentId)) : ''; }
+    if(STATE.agentId) q+='&agentId='+encodeURIComponent(STATE.agentId); return q; }
   function loadPipeline(){
     byId('ccPipeline').innerHTML='<tr><td colspan="10"><div class="ph">Loading…</div></td></tr>';
     var p='/lms/dashboard/pipeline?page='+PIPE.page+'&pageSize='+PIPE.pageSize+
-          '&sort='+encodeURIComponent(PIPE.sort)+'&dir='+encodeURIComponent(PIPE.dir)+agentQs();
+          '&sort='+encodeURIComponent(PIPE.sort)+'&dir='+encodeURIComponent(PIPE.dir);
-    if(PIPE.q){ p+='&q='+encodeURIComponent(PIPE.q);
+    if(PIPE.q){ p+='&q='+encodeURIComponent(PIPE.q)+scopeQs(); }
-                if(STATE.regionId) p+='&regionId='+encodeURIComponent(STATE.regionId); }
     else { p+=qs(); }
     getJSON(p,function(d){
       d=d||{}; var rows=d.rows||[];
       PIPE.total=d.total||0; PIPE.pages=d.pages||1; PIPE.page=d.page||1;
       renderPipeHead();
       closeDrawer(); LOADED.record=true; byId('recLookup').value=lid; injectRecord(lid);
       go('record',document.querySelector('.tab[data-screen="record"]')); return; }
   });
   // ---- filters
-  function refresh(){ STATE.regionId=byId('fRegion').value||''; STATE.from=byId('fFrom').value||''; STATE.to=byId('fTo').value||'';
+  function refresh(){ STATE.regionId=byId('fRegion').value||''; STATE.agentId=byId('fAgent').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);
     setDashPeriod(); }
-  ['fRegion','fFrom','fTo'].forEach(function(id){ byId(id).addEventListener('change',refresh); });
+  ['fAgent','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 fmtDT(s){ if(!s) return '—'; var d=new Date(s); if(isNaN(d)) return esc(s);
   // ---- Export (SOP §18.1) -------------------------------------------------------------------
   // Exports what is on screen — the current filters, search and sort — rather than everything,
   // because an export that ignores the filters is a different report than the one being looked at.
   function exportPipeline(){
     var p='/lms/dashboard/pipeline?page=1&pageSize=500&sort='+encodeURIComponent(PIPE.sort)+
-          '&dir='+encodeURIComponent(PIPE.dir)+agentQs();
+          '&dir='+encodeURIComponent(PIPE.dir);
-    if(PIPE.q){ p+='&q='+encodeURIComponent(PIPE.q); if(STATE.regionId) p+='&regionId='+encodeURIComponent(STATE.regionId); }
+    if(PIPE.q){ p+='&q='+encodeURIComponent(PIPE.q)+scopeQs(); }
     else { p+=qs(); }
     toast('Preparing export…');
     getJSON(p,function(d){
       var rows=(d&&d.rows)?d.rows:[];
       if(!rows.length){ toast('Nothing to export'); return; }

Subversion Repositories SmartDukaan

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