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

   .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) */
+  /* orders 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}
+  .odorder{border:1px solid var(--line);border-radius:11px;padding:11px;margin-bottom:12px;box-shadow:0 1px 2px rgba(20,30,60,.04)}
+  .odorder .odsum{margin-bottom:8px}
   .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)}
   .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 .stt.unplanned{background:#fff4e6;color:#e8590c;border:1px solid #ffd8a8;margin-left:5px}
   .tlcard .bd .mt{font-size:11px;color:var(--muted);margin-top:6px}
+  .tlcard .bd .tlags{margin-top:6px}
+  .tlag{display:inline-block;font-size:9.5px;font-weight:700;color:#5646c9;background:#eeeafc;border:1px solid #ddd5f7;border-radius:5px;padding:1px 6px;margin:2px 4px 0 0}
+  .tlrow.left .tlcard .bd .tlag{margin:2px 0 0 4px}
   .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}
     <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 -->
+<!-- orders 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>
+  }
   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>';
+  return '';   // no image -> render nothing (no placeholder box)
+}
 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); }
 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:'&#9873;'};
   if(mt.indexOf('CHECKOUT')>=0) return {c:'#2f9e44', l:'Visited', ic:'&#10003;'};
   if(mt==='CHECKIN') return {c:'#1098ad', l:'In', ic:'&#128205;'};
-  if(mt==='DEFERRED') return {c:'#e8590c', l:'Deferred', ic:'&#8635;'};
+  if(mt==='DEFERRED') return {c:'#e8590c', l:'Deferred', ic:'&#9888;'};
   if(mt==='PENDING' || !x.checkInTime) return {c:'#97a1b5', l:'Pending', ic:'&#9675;'};
   return {c:'#3b5bdb', l:(mt||'-'), ic:'&#9679;'};
+}
 function tlTitle(x){
   if(x._punch) return x._punch==='in' ? 'Journey start (Punch in)' : 'Journey end (Punch out)';
     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)';
+}
+// Agenda chips: task_name is "agenda1, agenda2 | Outlet" — show the prefix (partner visits only).
+function tlAgendas(x){
+  if(x._punch || (x.taskType||'').toLowerCase()!=='franchisee-visit') return '';
+  var n=x.taskName||'', pipe=n.lastIndexOf(' | ');
+  var part = pipe>0 ? n.slice(0,pipe) : '';
+  if(!part) return '';
+  var out='';
+  part.split(',').forEach(function(a){ var t=a.trim(); if(t) out += '<span class="tlag">'+esc(t)+'</span>'; });
+  return out ? '<div class="tlags">'+out+'</div>' : '';
+}
 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 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
+    // orders placed that day (any agenda): one badge -> drawer lists them all.
-    if(x.billingAgenda){
+    // No order + billing agenda -> a parsed "scheduled" chip instead.
-      if(x.orders && x.orders.length){
+    if(x.orders && x.orders.length){
-        x.orders.slice(0,2).forEach(function(o){
+      var n=x.orders.length;
-          var label = o.invoice ? ('#'+o.invoice) : ('#'+o.orderId);
-          chips += '<button type="button" class="tlbadge ord" title="View order details"'
+      chips += '<button type="button" class="tlbadge ord" title="View orders placed this day"'
-                 + ' onclick="bjOpenOrderDetail('+o.orderId+','+x.taskId+')">&#129534; '+esc(label)+'</button>';
+             + ' onclick="bjOpenOrderList('+x.taskId+')">&#129534; '+n+' order'+(n>1?'s':'')+'</button>';
-        });
-        if(x.orders.length>2) chips += '<span class="tlchip">+'+(x.orders.length-2)+'</span>';
-      } else {
+    } else if(x.billingAgenda){
-        var sch = bjScheduledFromRemark(x.remarks);
+      var sch = bjScheduledFromRemark(x.remarks);
-        if(sch) chips += '<span class="tlbadge sch" title="Scheduled (from remark)">&#128197; '+esc(sch)+'</span>';
+      if(sch) chips += '<span class="tlbadge sch" title="Scheduled (from remark)">&#128197; '+esc(sch)+'</span>';
-      }
+    }
+    var thumb=tlThumb(x.attachment);
-    extra = '<div class="tlextra">'+tlThumb(x.attachment)+chips+'</div>';
+    if(thumb || chips) extra = '<div class="tlextra">'+thumb+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>'+
           '<span class="stt" style="background:'+s.c+'">'+s.l+'</span>'+
           (tt==='lead' ? '<span class="stt unplanned">Unplanned</span>' : '')+
+          tlAgendas(x)+
           '<div class="mt">'+meta+'</div>'+extra+'</div>'+
       '</div>';
   // remark sits on the opposite half of the timeline (empty spacer when none)
   var rk='';
   if(!x._punch && x.remarks){
   var more=el('bj-rh-more');
   more.disabled=false; more.textContent='Load more';
   more.style.display = hasMore ? 'block' : 'none';
+}
-/* ===================== ORDER DETAILS DRAWER ===================== */
+/* ===================== ORDERS DRAWER ===================== */
-// Header + line items for one retail order a partner placed on the visit day.
+// All retail orders a partner placed on the visit day, each with its line items.
-function bjOpenOrderDetail(orderId, fofoId){
+function bjOpenOrderList(fofoId){
-  if(!orderId || !fofoId) return;
+  if(!fofoId) return;
+  var date=(window._exec && window._exec.date) || '';
-  window._od = { orderId:orderId, fofoId:fofoId };
+  window._od = { fofoId:fofoId, date:date };
-  el('bj-od-title').innerHTML='&#129534; Order #'+esc(orderId);
+  el('bj-od-title').innerHTML='&#129534; Orders';
-  el('bj-od-sub').textContent='Retail order placed on the visit day';
+  el('bj-od-sub').textContent='Orders placed on '+date;
   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),
+  fetch(CTX+'/beat-journey/order-list?fofoId='+encodeURIComponent(fofoId)+'&date='+encodeURIComponent(date),
         {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
+      var st=window._od; if(!st || st.fofoId!==fofoId) return;   // drawer changed mid-flight
-      bjRenderOrderDetail(d);
+      bjRenderOrderList(d);
     })
-    .catch(function(){ el('bj-od-body').innerHTML='<div class="odempty">Could not load order details.</div>'; });
+    .catch(function(){ el('bj-od-body').innerHTML='<div class="odempty">Could not load orders.</div>'; });
+}
 function closeOrderDetail(){ el('bj-od-back').classList.remove('show'); window._od=null; }
-function bjRenderOrderDetail(d){
+function bjRenderOrderList(d){
-  var hd=d.header;
+  var orders=d.orders||[];
-  if(!hd){ el('bj-od-body').innerHTML='<div class="odempty">Order not found.</div>'; return; }
+  if(!orders.length){ el('bj-od-body').innerHTML='<div class="odempty">No orders placed on this day.</div>'; return; }
   var money=function(n){ return '₹'+(Math.round(Number(n)||0)).toLocaleString(); };
+  el('bj-od-sub').textContent=orders.length+' order'+(orders.length>1?'s':'')+' placed on '+(window._od?window._od.date:'');
+  var h='';
+  orders.forEach(function(o){
-  var h='<div class="odsum">'
+    h+='<div class="odorder"><div class="odsum">'
-    +'<div><div class="k">Invoice</div><div class="v">'+esc(hd.invoice||('#'+hd.orderId))+'</div></div>'
+      +'<div><div class="k">Invoice</div><div class="v">'+esc(o.invoice||('#'+o.orderId))+'</div></div>'
-    +'<div><div class="k">Amount</div><div class="v">'+money(hd.amount)+'</div></div>'
+      +'<div><div class="k">Amount</div><div class="v">'+money(o.amount)+'</div></div>'
-    +'<div><div class="k">Date</div><div class="v">'+esc((hd.date||'')+(hd.time?' '+hhmm(hd.time):''))+'</div></div>'
+      +'<div><div class="k">Time</div><div class="v">'+esc(o.time?hhmm(o.time):'—')+'</div></div>'
-    +'</div>';
+      +'</div>';
-  var items=d.items||[];
+    var items=o.items||[];
-  if(!items.length){ h+='<div class="odempty">No line items on this order.</div>'; el('bj-od-body').innerHTML=h; return; }
+    if(items.length){
-  h+='<table class="odtable"><thead><tr><th>Item</th><th class="num">Qty</th><th class="num">MOP</th></tr></thead><tbody>';
+      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){
+      items.forEach(function(it){
-    var name=[it.brand,it.model,it.color].filter(function(s){return s;}).map(esc).join(' &middot; ');
+        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+='<tr><td>'+(name||'&mdash;')+'</td><td class="num">'+(it.qty||0)+'</td><td class="num">'+money(it.mop)+'</td></tr>';
+      });
+      h+='</tbody></table>';
+    } else { h+='<div class="odempty">No line items.</div>'; }
+    h+='</div>';
   });
-  h+='</tbody></table>';
   el('bj-od-body').innerHTML=h;
+}
 /* ============================ APPROVAL ============================ */
 function loadApproval(){

Subversion Repositories SmartDukaan

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