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

 ## LMS Dashboard — STANDALONE full page. Faithful copy of sts-mockup.html design (app bar + tabs + hand-drawn
 ## funnel/heat-map, NO charts), wired to REAL lead data. Rendered as a complete HTML doc (layout.vm = $screen_content).
-## Served at GET /lms/dashboard. Seeds: regions[], summaryJson, stateFunnelJson, slaHeatmapJson, ageingJson, fromDate, toDate.
+## Served at GET /lms/dashboard. Seeds: regions[], summaryJson, stateFunnelJson, slaHeatmapJson, ageingJson, fromDate, toDate,
+## viewerName / viewerRole / viewerInitials (signed-in user for the app bar, pre-escaped).
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
       <input id="lmsSearch" placeholder="Search LMS ID, business, phone, retailer…  e.g. LMS-UPW-26-000123">
       <span class="hint">/ to focus</span>
     </div>
     <button class="abtn coral" onclick="window.open(CTX+'/getOpenLead','_blank')">+ New Lead</button>
     <div class="role">
-      <div class="av">SD</div>
+      <div class="av" title="Signed in as $!viewerName">$!viewerInitials</div>
-      <div class="who"><b>Lead Dashboard</b><br><span>live · real data</span></div>
+      <div class="who"><b>$!viewerName</b><br><span>$!viewerRole</span></div>
     </div>
   </div>
 </div>
 <!-- ============ TABS ============ -->
       </div>
     </div>
     <div class="kpis" id="ccKpis"></div>
-    <div class="sectionlabel">Lifecycle Funnel — selected period</div>
+    <div class="sectionlabel">Lifecycle Funnel — selected period · beat, visit &amp; onboarding read from source tables</div>
     <div class="card"><div class="funnel" id="ccFunnel"></div></div>
     <div class="card">
       <h2>Needs attention now</h2>
-      <p class="desc">Actionable queues · click to work them.</p>
+      <p class="desc">Actionable queues for the selected period &amp; region · click to work them.</p>
       <div id="ccAttention" class="attstrip"></div>
     </div>
     <div class="card">
         <h2 style="display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap">Lead pipeline
   <div id="create" class="hide">
     <div class="pagehead">
       <div>
         <div class="crumb">Create · New Lead</div>
         <h1 class="page">Create Lead</h1>
-        <div class="sub">Only what an agent can know on a first call. LMS ID is generated on submit and the lead is auto-assigned from region. Address, store photo and geo-pin come from the capture link, which is created automatically and copied to your clipboard.</div>
+        <div class="sub">What an agent can know on a first call, plus the shop details the Leads screen captures. LMS ID is generated on submit and the lead is auto-assigned from region. Address, store photo and geo-pin come from the capture link, which is created automatically and copied to your clipboard.</div>
       </div>
       <div class="hd-right">
         <div class="ctl" style="padding:4px;display:flex;gap:4px">
           <button class="btn coral sm" id="pathA" style="border-radius:7px" onclick="setPath('A',this)">Path A · BGC outbound</button>
           <button class="btn ghost sm" id="pathB" style="border-radius:7px" onclick="setPath('B',this)">Path B · Field encounter</button>
               #end
             </div>
             <div class="hinttext">Type in rupees per month — 100000 or 1L, 50k both work. Leave a brand blank if it is not stocked.</div>
           </div>
           <div class="fld"><label>Interest status</label><select class="inp" id="cInterest"><option>Interested</option><option>Callback</option><option>Not Interested</option></select></div>
+          <div class="fld"><label>Source</label>
+            <select class="inp" id="cSource">
+              <option value="LMS Dashboard" selected>LMS Dashboard</option>
+              <option value="SELF">SELF</option><option value="NEWSPAPER">NEWSPAPER</option><option value="INTERNET">INTERNET</option>
+              <option value="PARTNER">PARTNER</option><option value="WEBINAR">WEBINAR</option><option value="TRIAL">TRIAL</option>
+              <option value="WHATSAPP_CAMPAIGN">WHATSAPP CAMPAIGN</option><option value="RETAILER_MEET">RETAILER MEET</option>
+              <option value="AI Assistant">AI Assistant</option>
+            </select></div>
+          <div class="fld full"><label>Address</label><input class="inp" id="cAddress" placeholder="Shop address" maxlength="128"></div>
+          <div class="fld"><label>City</label><input class="inp" id="cCity" placeholder="City" maxlength="30"></div>
+          <div class="fld"><label>State</label>
+            <select class="inp" id="cState">
+              <option value="">Select a state…</option>
+              #foreach($sn in $stateNames)
+                <option value="$sn">$sn</option>
+              #end
+            </select></div>
+          <div class="fld"><label>Conversion probability</label>
+            <select class="inp" id="cConversion"><option value="false" selected>Low</option><option value="true">High</option></select></div>
+          <div class="fld"><label>Counter size</label><input class="inp mono" id="cCounter" placeholder="Number of counters" inputmode="numeric"></div>
+          <div class="fld full"><label>Remark</label><input class="inp" id="cRemark" placeholder="Anything the BM should know before the first call" maxlength="500"></div>
+          <div class="fld full">
+            <label>Store photos <span class="auto">optional — same five shots as the Leads screen</span></label>
+            <div class="brandgrid" id="cPhotoGrid">
+              <div class="brandcell"><span class="bname">Front</span><input type="file" accept="image/*" class="inp cphoto" data-photo="frontp"></div>
+              <div class="brandcell"><span class="bname">Internal with market</span><input type="file" accept="image/*" class="inp cphoto" data-photo="frontWithMarket"></div>
+              <div class="brandcell"><span class="bname">Internal long shot</span><input type="file" accept="image/*" class="inp cphoto" data-photo="internalLongShot"></div>
+              <div class="brandcell"><span class="bname">Internal left wall</span><input type="file" accept="image/*" class="inp cphoto" data-photo="internalLeftWall"></div>
+              <div class="brandcell"><span class="bname">Internal right wall</span><input type="file" accept="image/*" class="inp cphoto" data-photo="internalRightWall"></div>
+            </div>
+            <div class="hinttext">Photos upload when you submit. Skip them on a call — the capture link collects them from the retailer.</div>
+          </div>
           <div class="fld full">
             <label>Region / State <span class="m">*</span> <span class="auto">drives auto-assignment</span></label>
             <select class="inp" id="cRegion" onchange="resolveBM(this.value)">
               <option value="">Select a region…</option>
               #foreach($r in $regions)
     <div class="kpis" id="dashKpis"></div>
     <div class="sectionlabel">State funnel — NEW &rarr; ONBOARDED by region</div>
     <div class="card">
       <table>
-        <thead><tr><th>Region</th><th class="num">New</th><th class="num">Contacted</th><th class="num">Qualified</th><th class="num">Visited</th><th class="num">Onboarded</th><th class="num">Conv%</th><th class="num">SLA%</th></tr></thead>
+        <thead><tr><th>Region</th><th class="num">Leads</th><th class="num">Contacted</th><th class="num">Qualified</th><th class="num">Beat</th><th class="num">Visited</th><th class="num">Onboarded</th><th class="num">Conv%</th><th class="num">SLA%</th></tr></thead>
         <tbody id="dashState"></tbody>
       </table>
     </div>
     <div class="grid g2">
     buildDashKpis(); buildFix();
+  }
   function renderFunnel(funnel){
     var byStage={}; funnel.forEach(function(s){ byStage[s.stage]=s; });
+    // First box is every lead created in the period (server key ALL) -- not the NEW stage, which is
+    // the "New" KPI card. BEAT_PLANNED / VISITED / ONBOARDED are evidence-derived on the server.
-    var seq=[['ALL','New'],['ASSIGNED','Assigned'],['CONTACTED','Contacted'],['QUALIFIED','Qualified'],['VISITED','Visited'],['ONBOARDED','Onboarded']];
+    var seq=[['ALL','All leads'],['ASSIGNED','Assigned'],['CONTACTED','Contacted'],['QUALIFIED','Qualified'],['BEAT_PLANNED','Beat planned'],['VISITED','Visited'],['ONBOARDED','Onboarded']];
     var h=''; var prev=null;
     seq.forEach(function(p,idx){ var s=byStage[p[0]]; if(!s) return; var last=(idx===seq.length-1);
       var cap; if(idx===0){ cap='<div class="keep">created</div>'; }
       else if(last){ cap='<div class="keep">'+s.pct+'% conversion</div>'; }
       else { var drop=prev?prev.count-s.count:0; cap=drop>0?('<div class="drop">&minus;'+fmtInt(drop)+'</div>'):('<div class="keep">'+s.pct+'%</div>'); }
   function renderState(d){ DATA.state=d; var rows=(d&&d.rows)?d.rows:[];
     var h=''; rows.forEach(function(r){ var cls=r.convPct<15?'rowbad':(r.slaPct<60?'rowwarn':'');
       h+='<tr class="clickrow '+cls+'" data-region="'+esc(r.regionCode)+'" data-rn="'+esc(r.regionName)+'">'+
         '<td><b>'+esc(r.regionName)+'</b> <span class="idpill">'+esc(r.regionCode)+'</span></td>'+
         '<td class="num">'+fmtInt(r.newCount)+'</td><td class="num">'+fmtInt(r.contacted)+'</td><td class="num">'+fmtInt(r.qualified)+'</td>'+
-        '<td class="num">'+fmtInt(r.visited)+'</td><td class="num">'+fmtInt(r.onboarded)+'</td>'+
+        '<td class="num">'+fmtInt(r.beatPlanned)+'</td><td class="num">'+fmtInt(r.visited)+'</td><td class="num">'+fmtInt(r.onboarded)+'</td>'+
         '<td class="num"><b style="color:'+pctColor(r.convPct)+'">'+r.convPct+'%</b></td>'+
         '<td class="num"><b style="color:'+slaColor(r.slaPct)+'">'+r.slaPct+'%</b></td></tr>'; });
-    byId('dashState').innerHTML=h||'<tr><td colspan="8"><div class="ph">No regional data.</div></td></tr>';
+    byId('dashState').innerHTML=h||'<tr><td colspan="9"><div class="ph">No regional data.</div></td></tr>';
     buildDashKpis(); buildFix();
+  }
   function renderHeat(d){ DATA.heat=d; var weeks=(d&&d.weeks)?d.weeks:[],bms=(d&&d.bms)?d.bms:[];
     if(!bms.length){ byId('dashHeat').innerHTML='<div class="ph">No SLA data for the selected period.</div>'; return; }
     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 class="num">'+inrShort(l.value)+'</td></tr>'; });
     return h+'</tbody></table></div>'; }
+  // The drill drawer pages server-side (100 per page), so a bar reading 501 can be walked in full
+  // instead of stopping at the first 100. The header filter box only filters the page on screen.
+  var DRILL={crumb:'',title:'',sub:'',bt:'',bk:'',page:1,pageSize:100,pages:1,total:0};
+  function drill(crumb,title,sub,bt,bk){ DRILL={crumb:crumb,title:title,sub:sub,bt:bt,bk:bk,page:1,pageSize:100,pages:1,total:0}; loadDrill(); }
+  function drillPage(delta){ var n=DRILL.page+delta; if(n<1||n>DRILL.pages) return; DRILL.page=n; loadDrill(); }
-  function drill(crumb,title,sub,bt,bk){ openDrawer(crumb,title,'Loading…','<div class="ph">Loading…</div>');
+  function loadDrill(){ var D=DRILL; openDrawer(D.crumb,D.title,'Loading…','<div class="ph">Loading…</div>');
-    var q='?bucketType='+encodeURIComponent(bt)+(bk?'&bucketKey='+encodeURIComponent(bk):'')+qs();
+    var q='?bucketType='+encodeURIComponent(D.bt)+(D.bk?'&bucketKey='+encodeURIComponent(D.bk):'')+
+      '&page='+D.page+'&pageSize='+D.pageSize+qs();
     getJSON('/lms/dashboard/leads'+q,function(d){ var leads=(d&&d.leads)?d.leads:[];
+      D.total=(d&&d.total!=null)?d.total:leads.length; D.pages=Math.max((d&&d.pages)||1,1); D.page=(d&&d.page)||D.page;
-      var cap=(d&&d.limit)?d.limit:0;
+      var count=fmtInt(D.total)+' lead(s)';
-      // The drawer is capped, so say so -- otherwise a bar reading 170 opens a list of 100 and the
+      if(D.pages>1){ var first=(D.page-1)*D.pageSize+(leads.length?1:0), last=(D.page-1)*D.pageSize+leads.length;
-      // reader has to guess which number is wrong.
+        count+=' · showing '+first+'–'+last; }
-      var count=(cap&&leads.length>=cap)?('first '+leads.length+' lead(s)'):(leads.length+' lead(s)');
+      openDrawer(D.crumb,D.title,(D.sub||'')+' · '+count,drawerLeadTable(leads)+drillPager());
+      byId('dBody').scrollTop=0; }); }
+  function drillPager(){ if(DRILL.pages<=1) return '';
+    return '<div style="display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap">'+
+      '<button class="btn ghost sm" onclick="drillPage(-1)"'+(DRILL.page<=1?' disabled':'')+'>&larr; Prev</button>'+
-      openDrawer(crumb,title,(sub||'')+' · '+count,drawerLeadTable(leads)); }); }
+      '<span class="note">Page '+DRILL.page+' / '+DRILL.pages+'</span>'+
+      '<button class="btn ghost sm" onclick="drillPage(1)"'+(DRILL.page>=DRILL.pages?' disabled':'')+'>Next &rarr;</button></div>'; }
   // ---- 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; }
   function reportStateFunnel(){
     var d=DATA.state||SEED.state||{}; var rows=(d.rows||[]).map(function(r){
       return '<tr><td><b>'+esc(r.regionName||r.regionCode||'—')+'</b></td><td class="num">'+fmtInt(r.newCount)+'</td>'+
         '<td class="num">'+fmtInt(r.contacted)+'</td><td class="num">'+fmtInt(r.qualified)+'</td>'+
-        '<td class="num">'+fmtInt(r.visited)+'</td><td class="num">'+fmtInt(r.onboarded)+'</td>'+
+        '<td class="num">'+fmtInt(r.beatPlanned)+'</td><td class="num">'+fmtInt(r.visited)+'</td><td class="num">'+fmtInt(r.onboarded)+'</td>'+
         '<td class="num">'+pctCell(r.convPct||0)+'</td><td class="num">'+pctCell(r.slaPct||0)+'</td></tr>'; });
     openDrawer('Report suite','State Funnel','NEW → ONBOARDED by region','<div class="card">'+
-      tbl([{t:'Region'},{t:'New',n:1},{t:'Contacted',n:1},{t:'Qualified',n:1},{t:'Visited',n:1},{t:'Onboarded',n:1},{t:'Conv%',n:1},{t:'SLA%',n:1}],rows)+'</div>');
+      tbl([{t:'Region'},{t:'Leads',n:1},{t:'Contacted',n:1},{t:'Qualified',n:1},{t:'Beat',n:1},{t:'Visited',n:1},{t:'Onboarded',n:1},{t:'Conv%',n:1},{t:'SLA%',n:1}],rows)+'</div>');
+  }
   function reportSla(){
     var d=DATA.heat||SEED.heat||{}; var rows=(d.bms||[]).map(function(r){
       var cells=(r.cells||[]).map(function(c){ return '<td class="num">'+(c.pct==null?'—':pctCell(c.pct))+'</td>'; }).join('');
     if(n>=1000)     return '₹'+(n/1000).toFixed(n%1000?1:0)+'K';
     return '₹'+n;
+  }
   function val(id){ var e=byId(id); return e?e.value:''; }
+  // Store photos go through the same /document-upload the Leads screen uses (multipart "file" ->
+  // response.document_id) and the ids ride along in the create payload as lead_detail columns.
+  function uploadPhoto(input){
+    var f=input&&input.files&&input.files[0]; if(!f) return Promise.resolve(0);
+    var fd=new FormData(); fd.append('file',f);
+    return fetch(CTX+'/document-upload',{method:'POST',credentials:'same-origin',body:fd,headers:{'X-Requested-With':'XMLHttpRequest'}})
+      .then(function(r){ return r.json(); })
+      .then(function(d){ var id=d&&d.response&&d.response.document_id; if(!id) throw new Error('upload'); return parseInt(id,10); });
+  }
+  function uploadPhotos(){
+    var inputs=Array.prototype.slice.call(document.querySelectorAll('#cPhotoGrid .cphoto'));
+    var ids={};
+    return inputs.reduce(function(chain,inp){ return chain.then(function(){
+      return uploadPhoto(inp).then(function(id){ if(id) ids[inp.getAttribute('data-photo')]=id; }); }); }, Promise.resolve())
+      .then(function(){ return ids; });
+  }
+  var CREATE_BUSY=false;
+  function submitLead(){ if(CREATE_BUSY) return;
-  function submitLead(){ var fn=val('cRetailer').trim(), biz=val('cBusiness').trim();
+    var fn=val('cRetailer').trim(), biz=val('cBusiness').trim();
     var phone=(val('cContact')||'').replace(/\D/g,'').slice(-10);
     var brands=collectBrands(); var value=brandTotal();
     var region=val('cRegion'); var path=CREATE_PATH;
     if(!fn){ toast('Retailer name is required'); return; }
     if(phone.length!==10){ toast('A valid 10-digit contact is required'); return; }
     if(!region){ toast('Pick a region'); return; }
+    var address=val('cAddress').trim(), city=val('cCity').trim(), state=val('cState');
+    if(address.length>128){ toast('Address is too long (128 max)'); return; }
+    if(city.length>30){ toast('City is too long (30 max)'); return; }
+    var counter=parseInt((val('cCounter')||'').replace(/\D/g,''),10);
-    // No address check on either path any more: the capture link is what establishes location,
+    // No address check on either path: the capture link is what establishes location, and it is
-    // and it is generated for every lead regardless of path.
+    // generated for every lead regardless of path. Address / city / state are kept when typed.
-    var payload={ firstName:fn, mobile:phone, outletName:biz||'', source:'LMS Dashboard',
+    var payload={ firstName:fn, mobile:phone, outletName:biz||'', source:val('cSource')||'LMS Dashboard',
-      regionId:parseInt(region,10), creationPath:path };
+      regionId:parseInt(region,10), creationPath:path,
+      address:address, city:city, state:state||'',
+      conversionHigh:(val('cConversion')==='true'), remark:val('cRemark').trim() };
+    if(!isNaN(counter)&&counter>0) payload.counterSize=counter;
     // potential is the sum, so the funnel's value column keeps working, while the per-brand split
     // is what actually tells a BM what the counter is worth.
     if(value && value>0) payload.potential=value;
     if(brands.length) payload.leadBrands=brands;
+    CREATE_BUSY=true;
+    var anyPhoto=Array.prototype.some.call(document.querySelectorAll('#cPhotoGrid .cphoto'),function(i){ return i.files&&i.files.length; });
+    if(anyPhoto) toast('Uploading photos…');
+    uploadPhotos().then(function(ids){
+      for(var k in ids){ if(ids.hasOwnProperty(k)) payload[k]=ids[k]; }
-    // /lms/createLead, NOT the shared /createLead: this one honours regionId and creationPath, so
+      // /lms/createLead, NOT the shared /createLead: this one honours regionId and creationPath, so
-    // the lead actually gets a stage, an LMS code, an owner and an SLA clock.
+      // the lead actually gets a stage, an LMS code, an owner and an SLA clock.
-    fetch(CTX+'/lms/createLead',{method:'POST',credentials:'same-origin',
+      return fetch(CTX+'/lms/createLead',{method:'POST',credentials:'same-origin',
         headers:{'Content-Type':'application/json','X-Requested-With':'XMLHttpRequest'},
-        body:JSON.stringify(payload)})
-      .then(function(r){ return r.text(); })
+        body:JSON.stringify(payload)}).then(function(r){ return r.text(); }); })
-      .then(function(t){
+      .then(function(t){ CREATE_BUSY=false;
         var d=null; try{ d=JSON.parse(t); }catch(e){ d=null; }
         var res=(d&&d.response)?d.response:d;
         if(!res || res.ok!==true){
           // A refusal carries the reason as a bare string under `response` (badRequest("...")),
           // whereas success is an object. Surface the reason, not a generic failure.
           return;
+        }
         var held=(res.assignmentStatus==='HOLD');
         toast(held ? ('Lead '+res.lmsCode+' created · no BM for that region, parked in HOLD')
                    : ('Lead '+res.lmsCode+' created · assigned to '+(res.ownerName||'the region BM')+' · SLA started'), 1);
+        ['cRetailer','cBusiness','cContact','cAddress','cCity','cCounter','cRemark'].forEach(function(x){ var e=byId(x); if(e) e.value=''; });
-        ['cRetailer','cBusiness','cContact'].forEach(function(x){ var e=byId(x); if(e) e.value=''; });
+        ['cState'].forEach(function(x){ var e=byId(x); if(e) e.value=''; });
+        var cs=byId('cSource'); if(cs) cs.value='LMS Dashboard'; var cc=byId('cConversion'); if(cc) cc.value='false';
         document.querySelectorAll('#cBrandGrid .bval').forEach(function(el){ el.value=''; });
+        document.querySelectorAll('#cPhotoGrid .cphoto').forEach(function(el){ el.value=''; });
         brandTotal();
         // Hand the capture link over immediately — the whole point of generating it on create is
         // that the agent is still on the call with the retailer.
         if(res.geoLink){
+          }
+        }
         byId('recLookup').value=res.leadId; injectRecord(res.leadId);
         go('record',document.querySelectorAll('.tab')[1]); refresh(); })
-      .catch(function(e){ toast('Create failed'); }); }
+      .catch(function(e){ CREATE_BUSY=false; toast(e&&e.message==='upload'?'A photo failed to upload — the lead was not created':'Create failed'); }); }
   // ====================== AUTO-ASSIGNMENT (real resolve per region) ======================
   function buildAssign(){ var opts=byId('cRegion').querySelectorAll('option'); var holdCount=0, assignedCount=0, pending=0;
     var body=byId('assignMap'); body.innerHTML='';
     // Rows are created up-front in region order, then filled in as each resolve lands — otherwise

Subversion Repositories SmartDukaan

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