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

   .img-x:hover{background:rgba(255,255,255,.3)}
   .modal-back.show{display:flex}
   .modal{background:#fff;border-radius:14px;max-width:780px;width:100%;padding:20px 22px;box-shadow:0 20px 60px rgba(10,20,50,.3);position:relative}
   .modal h3{margin:0 0 2px;font-size:17px;text-align:center}
   .modal > .desc{text-align:center}
-  .modal .x,.rh-panel .x{position:absolute;top:14px;right:16px;cursor:pointer;color:var(--soft);font-size:22px;line-height:1;border:0;background:none}
+  .modal .x,.rh-panel .x,.od-panel .x{position:absolute;top:14px;right:16px;cursor:pointer;color:var(--soft);font-size:22px;line-height:1;border:0;background:none}
   /* 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}
   .rhexec{font-size:10px;color:var(--soft);font-weight:600;margin:3px 0 4px}
   .rhtext{font-size:12px;color:#4a5468;line-height:1.45;word-break:break-word;white-space:pre-wrap}
   .rhloading,.rhempty{color:var(--soft);font-size:12px;text-align:center;padding:24px 8px}
   .rh-more{margin-top:10px;background:var(--brand);color:#fff;border:0;border-radius:8px;padding:9px;font-weight:650;font-size:12.5px;cursor:pointer;display:none}
   .rh-more:disabled{opacity:.6;cursor:default}
+  /* order-details drawer (stacks above the remark drawer) */
+  .od-back{position:fixed;inset:0;background:rgba(15,22,40,.42);z-index:1300;display:none}
+  .od-back.show{display:block}
+  .od-panel{position:absolute;top:0;right:0;height:100%;width:min(440px,94vw);background:#fff;box-shadow:-8px 0 30px rgba(20,30,60,.18);display:flex;flex-direction:column;padding:18px 18px 14px;transform:translateX(100%);transition:transform .22s ease}
+  .od-back.show .od-panel{transform:translateX(0)}
+  .od-panel h3{margin:0 0 2px;font-size:15px;color:var(--ink)}
+  .od-panel .desc{margin:0;font-size:12px;color:var(--soft)}
+  .od-body{flex:1;overflow-y:auto;margin-top:12px}
+  .odsum{display:flex;flex-wrap:wrap;gap:8px 18px;padding:10px 12px;background:#fbfcfe;border:1px solid var(--line2);border-radius:9px;margin-bottom:12px}
+  .odsum .k{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--soft);font-weight:700}
+  .odsum .v{font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
+  .odtable{width:100%;border-collapse:collapse;font-size:11.5px}
+  .odtable th{text-align:left;color:var(--soft);font-weight:700;font-size:9px;text-transform:uppercase;letter-spacing:.03em;padding:5px 6px;border-bottom:1px solid var(--line2)}
+  .odtable td{padding:6px;border-bottom:1px solid #eef1f7;color:#4a5468;vertical-align:top}
+  .odtable td.num{text-align:right;font-variant-numeric:tabular-nums}
+  .odloading,.odempty{color:var(--soft);font-size:12px;text-align:center;padding:24px 8px}
   .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}
   .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}
+  .tlbadge{font-size:10.5px;font-weight:700;border:0;border-radius:6px;padding:2px 8px;white-space:nowrap;cursor:pointer;line-height:1.5}
+  .tlbadge.ord{background:#e7f0ff;color:#1c56c9}
+  .tlbadge.ord:hover{background:#d4e4ff}
+  .tlbadge.sch{background:#fff4e6;color:#c25709;cursor:default}
   .exectabs{display:flex;gap:6px;justify-content:center;margin:12px 0 4px}
   .exectab{padding:6px 14px;border-radius:8px;font-size:12.5px;font-weight:650;color:var(--muted);cursor:pointer;border:1px solid var(--line);background:#fff}
   .exectab.active{background:var(--brand);color:#fff;border-color:var(--brand)}
   #bjMap{width:100%;height:460px;border-radius:12px;border:1px solid var(--line);margin-top:10px;background:#eef1f7;overflow:hidden}
   .bjlegend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#f8f9fc;font-size:12.5px;min-height:20px}
     <div class="rh-list" id="bj-rh-list"></div>
     <button class="rh-more" id="bj-rh-more" onclick="bjLoadRemarkHistory()">Load more</button>
   </div>
 </div>
+<!-- order-details drawer — slides in from the right, above the remark drawer -->
+<div class="od-back" id="bj-od-back" onclick="if(event.target===this)closeOrderDetail()">
+  <div class="od-panel" id="bj-od-panel">
+    <button class="x" onclick="closeOrderDetail()">&times;</button>
+    <h3 id="bj-od-title"></h3>
+    <p class="desc" id="bj-od-sub"></p>
+    <div class="od-body" id="bj-od-body"></div>
+  </div>
+</div>
 <script>
 var CTX = '${rc.contextPath}';
 var BASE = CTX + '/beat-journey';
 var LENS = 'today';
 var TODAY = '$today';
 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):''; }
+// Best-effort: pull a "when will they order" hint out of a free-text remark.
+// English + Hinglish. Display-only; returns '' when nothing recognizable is found.
+function bjScheduledFromRemark(remark){
+  if(!remark) return '';
+  var t = String(remark).toLowerCase();
+  // day-after (before tomorrow/kal, since "parso" is distinct)
+  if(/\b(day[\s-]?after(\s+tomorrow)?|parso)\b/.test(t)) return 'day after';
+  if(/\b(tomorrow|kal|tmrw|tmr)\b/.test(t)) return 'tomorrow';
+  if(/\b(today|aaj|abhi)\b/.test(t)) return 'today';
+  // range "N-M days" / "N-M din" (check before single N)
+  var range = t.match(/\b(\d{1,2})\s*[-–to]+\s*(\d{1,2})\s*(days?|din)\b/);
+  if(range) return 'in '+range[1]+'–'+range[2]+' days';
+  var nd = t.match(/\b(?:in\s+)?(\d{1,2})\s*(days?|din)\b/);
+  if(nd) return 'in '+nd[1]+' day'+(nd[1]==='1'?'':'s');
+  if(/\b(this\s*week|is\s*week|is\s*haft[ae])\b/.test(t)) return 'this week';
+  if(/\b(next\s*week|agle\s*haft[ae]|agla\s*week)\b/.test(t)) return 'next week';
+  // explicit "DD Mon" / "DD Month"
+  var mon = t.match(/\b(\d{1,2})\s+(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)[a-z]*\b/);
+  if(mon){
+    var M={jan:'Jan',feb:'Feb',mar:'Mar',apr:'Apr',may:'May',jun:'Jun',jul:'Jul',aug:'Aug',sep:'Sep',oct:'Oct',nov:'Nov',dec:'Dec'};
+    return parseInt(mon[1],10)+' '+M[mon[2]];
+  }
+  // "DD/MM" or "DD-MM" (reject year-like / out-of-range month)
+  var dm = t.match(/\b(\d{1,2})[\/\-](\d{1,2})\b(?!\d)/);
+  if(dm && parseInt(dm[2],10)>=1 && parseInt(dm[2],10)<=12){
+    var mo=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+    return parseInt(dm[1],10)+' '+mo[parseInt(dm[2],10)-1];
+  }
+  // weekday names (English + common Hinglish)
+  var wk = t.match(/\b(monday|tuesday|wednesday|thursday|friday|saturday|sunday|somwar|mangalwar|budhwar|guruwar|shukrawar|shaniwar|raviwar|itwar)\b/);
+  if(wk){
+    var W={monday:'Mon',somwar:'Mon',tuesday:'Tue',mangalwar:'Tue',wednesday:'Wed',budhwar:'Wed',
+           thursday:'Thu',guruwar:'Thu',friday:'Fri',shukrawar:'Fri',saturday:'Sat',shaniwar:'Sat',
+           sunday:'Sun',raviwar:'Sun',itwar:'Sun'};
+    return W[wk[1]];
+  }
+  return '';
+}
 function tlThumb(att){
   if(att && window._mediaUrl) return '<img class="tlthumb" src="'+esc(window._mediaUrl+att)+'" onclick="bjOpenImage(this.src)" 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='&#128247;'; if(im.parentNode) im.parentNode.replaceChild(d, im); }
   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>';
+    // billing-agenda partner stop: order badge(s) win; else a parsed "scheduled" chip
+    if(x.billingAgenda){
+      if(x.orders && x.orders.length){
+        x.orders.slice(0,2).forEach(function(o){
+          var label = o.invoice ? ('#'+o.invoice) : ('#'+o.orderId);
+          chips += '<button type="button" class="tlbadge ord" title="View order details"'
+                 + ' onclick="bjOpenOrderDetail('+o.orderId+','+x.taskId+')">&#129534; '+esc(label)+'</button>';
+        });
+        if(x.orders.length>2) chips += '<span class="tlchip">+'+(x.orders.length-2)+'</span>';
+      } else {
+        var sch = bjScheduledFromRemark(x.remarks);
+        if(sch) chips += '<span class="tlbadge sch" title="Scheduled (from remark)">&#128197; '+esc(sch)+'</span>';
+      }
+    }
     extra = '<div class="tlextra">'+tlThumb(x.attachment)+chips+'</div>';
+  }
   var card='<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>'+
   var more=el('bj-rh-more');
   more.disabled=false; more.textContent='Load more';
   more.style.display = hasMore ? 'block' : 'none';
+}
+/* ===================== ORDER DETAILS DRAWER ===================== */
+// Header + line items for one retail order a partner placed on the visit day.
+function bjOpenOrderDetail(orderId, fofoId){
+  if(!orderId || !fofoId) return;
+  window._od = { orderId:orderId, fofoId:fofoId };
+  el('bj-od-title').innerHTML='&#129534; Order #'+esc(orderId);
+  el('bj-od-sub').textContent='Retail order placed on the visit day';
+  el('bj-od-body').innerHTML='<div class="odloading"><div class="spinner"></div>Loading&hellip;</div>';
+  el('bj-od-back').classList.add('show');
+  fetch(CTX+'/beat-journey/order-detail?orderId='+encodeURIComponent(orderId)+'&fofoId='+encodeURIComponent(fofoId),
+        {headers:{'Accept':'application/json'}})
+    .then(function(r){ return r.json(); })
+    .then(function(d){
+      var st=window._od; if(!st || st.orderId!==orderId) return;   // drawer changed mid-flight
+      bjRenderOrderDetail(d);
+    })
+    .catch(function(){ el('bj-od-body').innerHTML='<div class="odempty">Could not load order details.</div>'; });
+}
+function closeOrderDetail(){ el('bj-od-back').classList.remove('show'); window._od=null; }
+function bjRenderOrderDetail(d){
+  var hd=d.header;
+  if(!hd){ el('bj-od-body').innerHTML='<div class="odempty">Order not found.</div>'; return; }
+  var money=function(n){ return '₹'+(Math.round(Number(n)||0)).toLocaleString(); };
+  var h='<div class="odsum">'
+    +'<div><div class="k">Invoice</div><div class="v">'+esc(hd.invoice||('#'+hd.orderId))+'</div></div>'
+    +'<div><div class="k">Amount</div><div class="v">'+money(hd.amount)+'</div></div>'
+    +'<div><div class="k">Date</div><div class="v">'+esc((hd.date||'')+(hd.time?' '+hhmm(hd.time):''))+'</div></div>'
+    +'</div>';
+  var items=d.items||[];
+  if(!items.length){ h+='<div class="odempty">No line items on this order.</div>'; el('bj-od-body').innerHTML=h; return; }
+  h+='<table class="odtable"><thead><tr><th>Item</th><th class="num">Qty</th><th class="num">MOP</th></tr></thead><tbody>';
+  items.forEach(function(it){
+    var name=[it.brand,it.model,it.color].filter(function(s){return s;}).map(esc).join(' &middot; ');
+    h+='<tr><td>'+(name||'&mdash;')+'</td><td class="num">'+(it.qty||0)+'</td><td class="num">'+money(it.mop)+'</td></tr>';
+  });
+  h+='</tbody></table>';
+  el('bj-od-body').innerHTML=h;
+}
 /* ============================ APPROVAL ============================ */
 function loadApproval(){
   spinner();
   var from=el('bj-start').value, to=el('bj-end').value;
   var u=CTX+'/beat-report/approval/data?fromDate='+encodeURIComponent(from)+'&toDate='+encodeURIComponent(to)+qs();

Subversion Repositories SmartDukaan

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