| 36877 |
vikas |
1 |
<!DOCTYPE html>
|
|
|
2 |
<html lang="en">
|
|
|
3 |
<head>
|
|
|
4 |
<meta charset="utf-8">
|
|
|
5 |
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
6 |
<title>Beat Journey</title>
|
|
|
7 |
<style>
|
|
|
8 |
:root{
|
|
|
9 |
--bg:#eef1f7; --card:#ffffff; --ink:#1d2433; --muted:#69748c; --soft:#97a1b5;
|
|
|
10 |
--line:#e6e9f1; --line2:#eef1f6;
|
|
|
11 |
--brand:#3b5bdb; --brand2:#5c7cfa; --teal:#0ca678; --cyan:#1098ad;
|
|
|
12 |
--amber:#f59f00; --orange:#e8590c; --red:#e03131; --violet:#7048e8; --pink:#d6336c;
|
|
|
13 |
--good:#2f9e44; --warn:#f08c00; --bad:#e03131;
|
|
|
14 |
}
|
|
|
15 |
*{box-sizing:border-box}
|
|
|
16 |
html,body{margin:0;background:var(--bg);color:var(--ink);
|
|
|
17 |
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px}
|
|
|
18 |
.wrap{max-width:1320px;margin:0 auto;padding:20px 24px 90px}
|
|
|
19 |
a{color:var(--brand)}
|
|
|
20 |
header.top{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:16px}
|
|
|
21 |
.brand .crumb{font-size:12px;color:var(--soft);font-weight:600}
|
|
|
22 |
.brand h1{margin:3px 0 0;font-size:23px;font-weight:740;letter-spacing:-.01em}
|
|
|
23 |
.brand h1 .live{font-size:11px;font-weight:700;color:var(--teal);background:#e6fcf5;border:1px solid #c3fae8;border-radius:999px;padding:3px 9px;vertical-align:middle;margin-left:10px}
|
|
|
24 |
.brand h1 .live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal);margin-right:5px;animation:pulse 1.6s infinite}
|
|
|
25 |
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
|
|
|
26 |
.hd-right{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
|
|
|
27 |
.ctl{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:13px;color:var(--ink);font-weight:600}
|
|
|
28 |
.ctl .lbl{color:var(--soft);font-weight:500;margin-right:5px}
|
|
|
29 |
select.ctl,input.ctl{appearance:none;cursor:pointer;height:36px}
|
|
|
30 |
input.ctl{cursor:auto}
|
|
|
31 |
.btn-r{background:var(--brand);border:0;color:#fff;font-weight:650;padding:9px 15px;border-radius:9px;cursor:pointer;font-size:13px;height:36px}
|
|
|
32 |
.lenses{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px}
|
|
|
33 |
.lens{padding:11px 4px;margin-right:22px;font-size:14px;font-weight:650;color:var(--muted);cursor:pointer;border:0;background:transparent;border-bottom:2.5px solid transparent;margin-bottom:-1px}
|
|
|
34 |
.lens.active{color:var(--brand);border-bottom-color:var(--brand)}
|
|
|
35 |
.lens .b{display:inline-block;background:#eef1fb;color:var(--brand);font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px;margin-left:6px}
|
|
|
36 |
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px}
|
|
|
37 |
.kpi{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px 15px;box-shadow:0 1px 2px rgba(20,30,60,.04)}
|
|
|
38 |
.kpi .top{display:flex;align-items:center;gap:8px}
|
|
|
39 |
.kpi .ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
|
|
|
40 |
.kpi .label{font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.2}
|
|
|
41 |
.kpi .val{font-size:26px;font-weight:760;margin-top:9px;letter-spacing:-.02em;line-height:1}
|
|
|
42 |
.kpi .val small{font-size:13px;color:var(--soft);font-weight:600}
|
|
|
43 |
.kpi .foot{font-size:11.5px;color:var(--soft);margin-top:7px}
|
|
|
44 |
.grid{display:grid;gap:16px}
|
|
|
45 |
.g2{grid-template-columns:1fr 1fr}
|
|
|
46 |
.g3{grid-template-columns:1.55fr 1fr}
|
|
|
47 |
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:17px 19px;margin-bottom:16px;box-shadow:0 1px 2px rgba(20,30,60,.04)}
|
|
|
48 |
.card h2{margin:0 0 3px;font-size:15px;font-weight:720;letter-spacing:-.01em}
|
|
|
49 |
.card .desc{color:var(--muted);font-size:12.5px;margin:0 0 14px}
|
|
|
50 |
.sectionlabel{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);font-weight:700;margin:24px 2px 12px}
|
|
|
51 |
.funnel{display:flex;gap:9px;align-items:stretch}
|
|
|
52 |
.fstep{flex:1;border:1px solid var(--line);border-radius:11px;padding:13px 12px;position:relative;text-align:center;background:#fbfcfe}
|
|
|
53 |
.fstep .fn{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
|
|
|
54 |
.fstep .fv{font-size:26px;font-weight:770;margin-top:6px}
|
|
|
55 |
.fstep .fbar{height:5px;border-radius:3px;margin-top:10px;background:linear-gradient(90deg,var(--brand),var(--brand2))}
|
|
|
56 |
.fstep .drop{font-size:11px;color:var(--red);margin-top:7px;font-weight:600}
|
|
|
57 |
.fstep .keep{font-size:11px;color:var(--good);margin-top:7px;font-weight:600}
|
|
|
58 |
.fstep .arrow{position:absolute;right:-12px;top:50%;transform:translateY(-50%);z-index:2;color:#c5cce0;font-size:15px}
|
|
|
59 |
.leak{display:flex;gap:10px;margin-top:12px}
|
|
|
60 |
.leakbox{flex:1;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;background:#f8f9fc}
|
|
|
61 |
.leakbox .lt{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--soft);font-weight:600}
|
|
|
62 |
.leakbox .lv{font-size:20px;font-weight:760;margin-top:4px}
|
|
|
63 |
table{width:100%;border-collapse:collapse;font-size:13px}
|
|
|
64 |
th,td{text-align:left;padding:9px 9px;border-bottom:1px solid var(--line2)}
|
|
|
65 |
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--soft);font-weight:700;white-space:nowrap;cursor:pointer}
|
|
|
66 |
th.num,td.num{text-align:right}
|
|
|
67 |
tbody tr:hover{background:#f7f9fd}
|
|
|
68 |
tr.clickable{cursor:pointer}
|
|
|
69 |
.lvl{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:5px;background:#eef1fb;color:var(--brand)}
|
|
|
70 |
.pill-state{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px;padding:3px 9px;border-radius:999px}
|
|
|
71 |
.ps-store{background:#e7f5ff;color:#1971c2}
|
|
|
72 |
.ps-travel{background:#e6fcf5;color:#0ca678}
|
|
|
73 |
.ps-done{background:#ebfbee;color:#2f9e44}
|
|
|
74 |
.ps-idle{background:#fff4e6;color:#e8590c}
|
|
|
75 |
.ps-no{background:#fff0f0;color:#e03131}
|
|
|
76 |
.meter{display:inline-block;width:54px;height:7px;border-radius:4px;background:#eef1f6;vertical-align:middle;margin-left:7px;overflow:hidden}
|
|
|
77 |
.meter > i{display:block;height:100%;border-radius:4px}
|
|
|
78 |
.warnflag{color:var(--orange);font-weight:700}
|
|
|
79 |
.badflag{color:var(--red);font-weight:700}
|
|
|
80 |
.rowwarn{background:#fff9f0}
|
|
|
81 |
.rowbad{background:#fff5f5}
|
|
|
82 |
.att{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;margin-bottom:9px}
|
|
|
83 |
.att .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
|
|
|
84 |
.att .ab{flex:1}
|
|
|
85 |
.att .atitle{font-size:13px;font-weight:650}
|
|
|
86 |
.att .adet{font-size:12px;color:var(--muted);margin-top:2px}
|
|
|
87 |
.att .acount{font-size:18px;font-weight:780}
|
|
|
88 |
.barrow{display:grid;grid-template-columns:60px 1fr 90px;align-items:center;gap:11px;margin:8px 0}
|
|
|
89 |
.barrow .name{font-size:13px;font-weight:600}
|
|
|
90 |
.track{background:#f1f3f9;border-radius:7px;height:20px;position:relative;overflow:hidden}
|
|
|
91 |
.fill{height:100%;border-radius:7px;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:10.5px;color:#fff;font-weight:650;min-width:2px}
|
|
|
92 |
.barrow .meta{font-size:11.5px;color:var(--muted);text-align:right}
|
|
|
93 |
.donutwrap{display:flex;align-items:center;gap:20px}
|
|
|
94 |
.donut{width:138px;height:138px;border-radius:50%;flex:none;position:relative;
|
|
|
95 |
-webkit-mask:radial-gradient(circle 42px at center,transparent 98%,#000 100%);mask:radial-gradient(circle 42px at center,transparent 98%,#000 100%)}
|
|
|
96 |
.donut .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;-webkit-mask:none;mask:none}
|
|
|
97 |
.legend{display:flex;flex-direction:column;gap:9px;font-size:12.5px}
|
|
|
98 |
.legend .it{display:flex;align-items:flex-start;gap:9px}
|
|
|
99 |
.dot{width:11px;height:11px;border-radius:3px;flex:none;margin-top:3px}
|
|
|
100 |
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
|
|
|
101 |
.tile{background:#f8f9fc;border:1px solid var(--line2);border-radius:11px;padding:12px}
|
|
|
102 |
.tile .t{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--soft);font-weight:600}
|
|
|
103 |
.tile .v{font-size:21px;font-weight:760;margin-top:5px}
|
|
|
104 |
.tile .v small{font-size:12px;color:var(--soft);font-weight:600}
|
|
|
105 |
.util{display:flex;height:30px;border-radius:8px;overflow:hidden}
|
|
|
106 |
.util div{display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:650;color:#fff}
|
|
|
107 |
.utlegend{display:flex;gap:18px;margin-top:12px;font-size:12px;color:var(--muted);flex-wrap:wrap}
|
|
|
108 |
.utlegend span{display:inline-flex;align-items:center;gap:7px}
|
|
|
109 |
.callout{background:linear-gradient(180deg,#fbfcff,#f4f7ff);border:1px solid #dfe6fb;border-radius:14px;padding:18px 20px;margin-top:6px}
|
|
|
110 |
.callout h2{margin:0 0 3px;font-size:16px}
|
|
|
111 |
.callout .desc{color:var(--muted);font-size:12.5px;margin-bottom:14px}
|
|
|
112 |
.fix{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid #e6ebf8}
|
|
|
113 |
.fix:last-child{border-bottom:0}
|
|
|
114 |
.fix .sev{width:6px;border-radius:4px;flex:none}
|
|
|
115 |
.fix .fb{flex:1}
|
|
|
116 |
.fix .ft{font-size:14px;font-weight:700}
|
|
|
117 |
.fix .fd{font-size:13px;color:#3a4459;margin-top:4px;line-height:1.5}
|
|
|
118 |
.fix .fd b{color:var(--ink)}
|
|
|
119 |
.fix .act{font-size:12.5px;color:var(--good);margin-top:6px;font-weight:650}
|
|
|
120 |
.hide{display:none}
|
|
|
121 |
.loading{padding:70px;text-align:center;color:var(--muted)}
|
|
|
122 |
.spinner{width:30px;height:30px;border:3px solid #e3e8f5;border-top-color:var(--brand);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 12px}
|
|
|
123 |
@keyframes spin{to{transform:rotate(360deg)}}
|
|
|
124 |
.modal-back{position:fixed;inset:0;background:rgba(15,22,40,.45);display:none;align-items:flex-start;justify-content:center;z-index:50;padding:40px 16px;overflow:auto}
|
|
|
125 |
.modal-back.show{display:flex}
|
|
|
126 |
.modal{background:#fff;border-radius:14px;max-width:680px;width:100%;padding:20px 22px;box-shadow:0 20px 60px rgba(10,20,50,.3)}
|
|
|
127 |
.modal h3{margin:0 0 2px;font-size:17px}
|
|
|
128 |
.modal .x{float:right;cursor:pointer;color:var(--soft);font-size:20px;line-height:1;border:0;background:none}
|
|
|
129 |
.btn-ok{background:var(--good);border:0;color:#fff;font-weight:650;padding:6px 12px;border-radius:7px;cursor:pointer;font-size:12px}
|
|
|
130 |
@media (max-width:1000px){.kpis{grid-template-columns:repeat(3,1fr)}.g2,.g3{grid-template-columns:1fr}.funnel{flex-wrap:wrap}.fstep{min-width:46%}.fstep .arrow{display:none}}
|
|
|
131 |
</style>
|
|
|
132 |
</head>
|
|
|
133 |
<body>
|
|
|
134 |
<div class="wrap">
|
|
|
135 |
<header class="top">
|
|
|
136 |
<div class="brand">
|
|
|
137 |
<div class="crumb"><a href="${rc.contextPath}/dashboard">← Dashboard</a> · Field Sales · Beat / Monthly PJP</div>
|
|
|
138 |
<h1>Beat Journey <span class="live"><i></i>Live</span></h1>
|
|
|
139 |
</div>
|
|
|
140 |
<div class="hd-right">
|
|
|
141 |
<select class="ctl" id="bj-level">
|
|
|
142 |
<option value="">All levels below me</option>
|
|
|
143 |
#foreach($lvl in $escalationTypes)
|
|
|
144 |
<option value="$lvl">$lvl</option>
|
|
|
145 |
#end
|
|
|
146 |
</select>
|
|
|
147 |
<input class="ctl" type="date" id="bj-date" value="$today">
|
|
|
148 |
<span id="bj-period-range" class="hide">
|
|
|
149 |
<input class="ctl" type="date" id="bj-start" value="$monthStart">
|
|
|
150 |
<input class="ctl" type="date" id="bj-end" value="$today">
|
|
|
151 |
</span>
|
|
|
152 |
<button class="btn-r" id="bj-apply">Apply</button>
|
|
|
153 |
</div>
|
|
|
154 |
</header>
|
|
|
155 |
|
|
|
156 |
<div class="lenses">
|
|
|
157 |
<button class="lens active" data-lens="today" id="lens-today">Today (Live)</button>
|
|
|
158 |
<button class="lens" data-lens="period" id="lens-period">Period (Analytics)</button>
|
|
|
159 |
<button class="lens" data-lens="approval" id="lens-approval">Location Approval</button>
|
|
|
160 |
</div>
|
|
|
161 |
|
|
|
162 |
<div id="bj-content"><div class="loading"><div class="spinner"></div>Loading…</div></div>
|
|
|
163 |
</div>
|
|
|
164 |
|
|
|
165 |
<div class="modal-back" id="bj-modal-back">
|
|
|
166 |
<div class="modal" id="bj-modal"></div>
|
|
|
167 |
</div>
|
|
|
168 |
|
|
|
169 |
<script>
|
|
|
170 |
var CTX = '${rc.contextPath}';
|
|
|
171 |
var BASE = CTX + '/beat-journey';
|
|
|
172 |
var LENS = 'today';
|
|
|
173 |
|
|
|
174 |
function el(id){ return document.getElementById(id); }
|
|
|
175 |
function esc(s){ return String(s==null?'':s).replace(/[&<>"]/g,function(c){return {'&':'&','<':'<','>':'>','"':'"'}[c];}); }
|
|
|
176 |
function num(n){ return (n==null?0:n).toLocaleString(); }
|
|
|
177 |
function adhColor(p){ if(p>=80)return '#2f9e44'; if(p>=60)return '#f08c00'; if(p>=40)return '#e8590c'; return '#e03131'; }
|
|
|
178 |
function pct(a,b){ return b? Math.round(100*a/b):0; }
|
|
|
179 |
function qs(){
|
|
|
180 |
var lvl = el('bj-level').value;
|
|
|
181 |
var s = '';
|
|
|
182 |
if(lvl) s += '&escalationType=' + encodeURIComponent(lvl);
|
|
|
183 |
return s;
|
|
|
184 |
}
|
|
|
185 |
function spinner(){ el('bj-content').innerHTML = '<div class="loading"><div class="spinner"></div>Loading…</div>'; }
|
|
|
186 |
function fail(e){ el('bj-content').innerHTML = '<div class="loading">Could not load data ('+esc(e&&e.message||e)+'). Are you signed in?</div>'; }
|
|
|
187 |
|
|
|
188 |
function setLens(name){
|
|
|
189 |
LENS = name;
|
|
|
190 |
var tabs = document.querySelectorAll('.lens');
|
|
|
191 |
for(var i=0;i<tabs.length;i++){ tabs[i].classList.toggle('active', tabs[i].getAttribute('data-lens')===name); }
|
|
|
192 |
el('bj-date').classList.toggle('hide', name!=='today');
|
|
|
193 |
el('bj-period-range').classList.toggle('hide', name==='today');
|
|
|
194 |
load();
|
|
|
195 |
}
|
|
|
196 |
function load(){
|
|
|
197 |
if(LENS==='today') return loadToday();
|
|
|
198 |
if(LENS==='period') return loadPeriod();
|
|
|
199 |
return loadApproval();
|
|
|
200 |
}
|
|
|
201 |
|
|
|
202 |
/* ============================ TODAY ============================ */
|
|
|
203 |
function loadToday(){
|
|
|
204 |
spinner();
|
|
|
205 |
fetch(BASE + '/today?date=' + encodeURIComponent(el('bj-date').value) + qs(), {headers:{'Accept':'application/json'}})
|
|
|
206 |
.then(function(r){ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); })
|
|
|
207 |
.then(renderToday).catch(fail);
|
|
|
208 |
}
|
|
|
209 |
function kpi(ic, bg, fg, label, val, foot, valColor){
|
|
|
210 |
return '<div class="kpi"><div class="top"><div class="ic" style="background:'+bg+';color:'+fg+'">'+ic+'</div>'+
|
|
|
211 |
'<div class="label">'+label+'</div></div><div class="val"'+(valColor?' style="color:'+valColor+'"':'')+'>'+val+'</div>'+
|
|
|
212 |
'<div class="foot">'+foot+'</div></div>';
|
|
|
213 |
}
|
|
|
214 |
function fstep(name, val, w, sub, drop, last){
|
|
|
215 |
return '<div class="fstep"><div class="fn">'+name+'</div><div class="fv">'+num(val)+'</div>'+
|
|
|
216 |
'<div class="fbar" style="width:'+w+'%"></div><div class="'+(drop?'drop':'keep')+'">'+sub+'</div>'+
|
|
|
217 |
(last?'':'<span class="arrow">➤</span>')+'</div>';
|
|
|
218 |
}
|
|
|
219 |
function leakbox(t, v, color){ return '<div class="leakbox"><div class="lt">'+t+'</div><div class="lv"'+(color?' style="color:'+color+'"':'')+'>'+num(v)+'</div></div>'; }
|
|
|
220 |
|
|
|
221 |
function renderToday(d){
|
|
|
222 |
var k=d.kpis, f=d.funnel, s=d.stops, a=d.attention;
|
|
|
223 |
var h='';
|
|
|
224 |
h+='<div class="kpis">';
|
|
|
225 |
h+=kpi('👥','#eef1fb','#3b5bdb','Executives scheduled',num(k.scheduled),k.notStarted+' not started yet');
|
|
|
226 |
h+=kpi('⏱','#ebfbee','#2f9e44','Punched in',num(k.punchedIn)+' <small>/'+k.scheduled+'</small>',k.notStarted+' pending');
|
|
|
227 |
h+=kpi('📍','#e7f5ff','#1098ad','On route now',num(k.onRouteNow),'live journeys');
|
|
|
228 |
h+=kpi('✓','#eef1fb','#3b5bdb','Visits done',num(k.visitsDone)+' <small>/'+k.visitsPlanned+'</small>',k.inProgress+' in progress');
|
|
|
229 |
h+=kpi('↻','#fff4e6','#e8590c','Deferred today',num(k.deferred),'shop closed / unavailable');
|
|
|
230 |
h+=kpi('★','#fff0f6','#d6336c','Leads on route',num(k.leads),'new shops logged');
|
|
|
231 |
h+='</div>';
|
|
|
232 |
|
|
|
233 |
h+='<div class="sectionlabel">Today\'s Journey Funnel</div><div class="card"><div class="funnel">';
|
|
|
234 |
var sc=f.scheduled||1;
|
|
|
235 |
h+=fstep('Scheduled executives',f.scheduled,100,'start of day',false,false);
|
|
|
236 |
h+=fstep('Punched in',f.punchedIn,pct(f.punchedIn,sc),'−'+(f.scheduled-f.punchedIn)+' never started',true,false);
|
|
|
237 |
h+=fstep('Made a check-in',f.madeCheckin,pct(f.madeCheckin,sc),'−'+(f.punchedIn-f.madeCheckin)+' punched, idle',true,false);
|
|
|
238 |
h+=fstep('Completed all visits',f.completedAll,pct(f.completedAll,sc),(f.madeCheckin-f.completedAll)+' still mid-journey',true,false);
|
|
|
239 |
h+=fstep('Punched out',f.punchedOut,pct(f.punchedOut,sc),'journey ended',false,true);
|
|
|
240 |
h+='</div><div class="leak">';
|
|
|
241 |
h+=leakbox('Stops planned',s.planned,null);
|
|
|
242 |
h+=leakbox('Checked out (done)',s.done,'#2f9e44');
|
|
|
243 |
h+=leakbox('In progress now',s.inProgress,'#1098ad');
|
|
|
244 |
h+=leakbox('Deferred',s.deferred,'#e8590c');
|
|
|
245 |
h+=leakbox('Untouched',s.untouched,'#e03131');
|
|
|
246 |
h+='</div></div>';
|
|
|
247 |
|
|
|
248 |
h+='<div class="grid g3">';
|
|
|
249 |
h+='<div class="card"><h2>Live executive board</h2><p class="desc">Each executive\'s journey right now. Click a row for the day\'s visit detail.</p>'+boardTable(d.board, d.date)+'</div>';
|
|
|
250 |
h+='<div class="card"><h2>Needs attention now</h2><p class="desc">Things a manager should clear today.</p>'+attentionList(a)+'</div>';
|
|
|
251 |
h+='</div>';
|
|
|
252 |
el('bj-content').innerHTML=h;
|
|
|
253 |
}
|
|
|
254 |
function stateClass(st){ return st==='IN_STORE'?'ps-store':st==='TRAVELLING'?'ps-travel':st==='DONE'?'ps-done':st==='NOT_STARTED'?'ps-no':'ps-idle'; }
|
|
|
255 |
function boardTable(rows, date){
|
|
|
256 |
if(!rows||!rows.length) return '<p class="desc">No executives scheduled or active for this date.</p>';
|
|
|
257 |
var h='<table><thead><tr><th>Executive / Beat</th><th>Agenda</th><th>Punch-in</th><th>State now</th><th class="num">Visits</th><th class="num">Last ping</th><th class="num">Batt</th><th class="num">Loc-off</th></tr></thead><tbody>';
|
|
|
258 |
rows.forEach(function(r){
|
|
|
259 |
var stale = r.lastPingMin!=null && r.lastPingMin>=40;
|
|
|
260 |
var idle = r.state==='TRAVELLING' && stale;
|
|
|
261 |
var rowcls = r.state==='NOT_STARTED' ? 'rowbad' : (idle?'rowwarn':'');
|
|
|
262 |
var ping = r.lastPingMin==null ? '—' : (r.lastPingMin+' min');
|
|
|
263 |
h+='<tr class="clickable '+rowcls+'" onclick="openExec('+r.userId+',\''+esc(r.name)+'\',\''+date+'\')">'+
|
|
|
264 |
'<td><b>'+esc(r.name)+'</b><br><span style="color:#97a1b5;font-size:11px">'+esc(r.beatName||'—')+'</span></td>'+
|
|
|
265 |
'<td>'+(r.agendaFilled?'<span style="color:#2f9e44">✓</span>':'<span class="badflag">✗</span>')+'</td>'+
|
|
|
266 |
'<td>'+(r.punchInTime?esc(r.punchInTime):'<span class="badflag">—</span>')+'</td>'+
|
|
|
267 |
'<td><span class="pill-state '+stateClass(r.state)+'">'+esc(r.stateLabel)+'</span></td>'+
|
|
|
268 |
'<td class="num">'+r.visitsDone+'/'+r.visitsTotal+'</td>'+
|
|
|
269 |
'<td class="num'+(stale?' warnflag':'')+'">'+ping+'</td>'+
|
|
|
270 |
'<td class="num'+(r.battery!=null&&r.battery<25?' warnflag':'')+'">'+(r.battery==null?'—':r.battery+'%')+'</td>'+
|
|
|
271 |
'<td class="num'+(r.locOff>0?' warnflag':'')+'">'+r.locOff+'</td></tr>';
|
|
|
272 |
});
|
|
|
273 |
return h+'</tbody></table>';
|
|
|
274 |
}
|
|
|
275 |
function attRow(bg,fg,ic,title,detail,count,cls){
|
|
|
276 |
return '<div class="att"><div class="ic" style="background:'+bg+';color:'+fg+'">'+ic+'</div><div class="ab"><div class="atitle">'+title+'</div>'+
|
|
|
277 |
'<div class="adet">'+detail+'</div></div><div class="acount '+(cls||'')+'">'+count+'</div></div>';
|
|
|
278 |
}
|
|
|
279 |
function names(list,n){ if(!list||!list.length) return 'None'; var s=list.slice(0,n).join(', '); if(list.length>n) s+=' +'+(list.length-n); return s; }
|
|
|
280 |
function attentionList(a){
|
|
|
281 |
var h='';
|
|
|
282 |
h+=attRow('#fff0f0','#e03131','⚠','Not punched in', names(a.notPunchedIn,3), a.notPunchedIn.length, a.notPunchedIn.length?'badflag':'');
|
|
|
283 |
h+=attRow('#fff4e6','#e8590c','⏱','Idle / stale GPS > 40 min', names(a.idleStale,3), a.idleStale.length, a.idleStale.length?'warnflag':'');
|
|
|
284 |
h+=attRow('#fff0f0','#e03131','📍','Check-in outside store geofence','>50 m from partner\'s saved location', a.geofence, a.geofence?'badflag':'');
|
|
|
285 |
h+=attRow('#fff4e6','#e8590c','📴','Location turned off mid-journey', names(a.locationOff,3), a.locationOff.length, a.locationOff.length?'warnflag':'');
|
|
|
286 |
h+=attRow('#eef1f6','#69748c','↻','Deferred, awaiting re-action','shops deferred today', a.deferredAwaiting, '');
|
|
|
287 |
return h;
|
|
|
288 |
}
|
|
|
289 |
|
|
|
290 |
/* ============================ PERIOD ============================ */
|
|
|
291 |
function loadPeriod(){
|
|
|
292 |
spinner();
|
|
|
293 |
var u = BASE + '/data?startDate=' + encodeURIComponent(el('bj-start').value) + '&endDate=' + encodeURIComponent(el('bj-end').value) + qs();
|
|
|
294 |
fetch(u, {headers:{'Accept':'application/json'}})
|
|
|
295 |
.then(function(r){ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); })
|
|
|
296 |
.then(renderPeriod).catch(fail);
|
|
|
297 |
}
|
|
|
298 |
function tile(t,v){ return '<div class="tile"><div class="t">'+t+'</div><div class="v">'+v+'</div></div>'; }
|
|
|
299 |
function renderPeriod(d){
|
|
|
300 |
var k=d.kpis, f=d.funnel, df=d.deferral, u=d.utilization, t=d.travel, o=d.outcomes;
|
|
|
301 |
var neverTouched = Math.max((f.plannedStops||0)-(f.checkedIn||0)-(df.total||0),0);
|
|
|
302 |
var h='';
|
|
|
303 |
h+='<div class="kpis">';
|
|
|
304 |
h+=kpi('⚖','#fff4e6','#f08c00','Adherence',k.adherencePct+'<small>%</small>',num(k.doneStops)+' of '+num(k.plannedStops)+' stops done',adhColor(k.adherencePct));
|
|
|
305 |
h+=kpi('🗺','#e7f5ff','#1098ad','PJP coverage L1',k.coverageL1Pct+'<small>%</small>',k.coverageL1With+'/'+k.coverageL1Total+' have a plan','#1098ad');
|
|
|
306 |
h+=kpi('🚶','#ebfbee','#2f9e44','Visits / active day',k.avgVisitsPerActiveDay,'across '+num(k.journeys)+' journeys');
|
|
|
307 |
h+=kpi('💬','#eef1fb','#3b5bdb','Discussion / store',k.avgDiscussionMin+' <small>min</small>','target 30–45 min', k.avgDiscussionMin>0&&k.avgDiscussionMin<30?'#e8590c':null);
|
|
|
308 |
h+=kpi('↻','#fff0f0','#e03131','Auto "missed"',num(k.autoMissed),k.autoMissedSystemPct+'% system-flagged','#e03131');
|
|
|
309 |
h+=kpi('★','#fff0f6','#d6336c','Leads on route',num(k.leadsCreated),'this period');
|
|
|
310 |
h+='</div>';
|
|
|
311 |
|
|
|
312 |
h+='<div class="sectionlabel">Aggregate Journey Funnel</div><div class="card"><div class="funnel">';
|
|
|
313 |
var pl=f.plannedStops||1;
|
|
|
314 |
h+=fstep('Planned stops',f.plannedStops,100,'scheduled',false,false);
|
|
|
315 |
h+=fstep('Days punched in',f.punchedIn,pct(f.punchedIn,pl),'−'+f.dropPunch+'% no punch-in',true,false);
|
|
|
316 |
h+=fstep('Checked in',f.checkedIn,pct(f.checkedIn,pl),'−'+f.dropCheckin+'% reached, skipped',true,false);
|
|
|
317 |
h+=fstep('Checked out (done)',f.checkedOut,pct(f.checkedOut,pl),'−'+f.dropCheckout+'% no checkout',false,true);
|
|
|
318 |
h+='</div><div class="leak">';
|
|
|
319 |
h+=leakbox('Deferred — genuine',df.human,'#2f9e44');
|
|
|
320 |
h+=leakbox('Deferred — system flag',df.systemGenerated,'#f08c00');
|
|
|
321 |
h+=leakbox('Heads acted on',df.actioned,null);
|
|
|
322 |
h+=leakbox('Never touched',neverTouched,'#e03131');
|
|
|
323 |
h+='</div></div>';
|
|
|
324 |
|
|
|
325 |
h+='<div class="sectionlabel">Adherence & Coverage</div><div class="grid g3">';
|
|
|
326 |
h+='<div class="card"><h2>Per-executive scorecard <span style="color:#97a1b5;font-weight:500;font-size:12px">· '+d.scorecard.length+' executives</span></h2><p class="desc">The coaching list — click a header to sort. Reds are where to intervene.</p>'+scorecardTable(d.scorecard)+'</div>';
|
|
|
327 |
h+='<div class="card"><h2>Coverage by sales level</h2><p class="desc">Filled = executives with a plan; light = total at that level.</p>'+coverageBars(d.coverageByLevel)+utilBlock(u)+'</div>';
|
|
|
328 |
h+='</div>';
|
|
|
329 |
|
|
|
330 |
h+='<div class="sectionlabel">Deferrals, Travel & Outcomes</div><div class="grid g2">';
|
|
|
331 |
h+='<div class="card"><h2>Deferral nature</h2><p class="desc">Deliberate, or just auto-flagged missed beats?</p>'+deferDonut(df)+'</div>';
|
|
|
332 |
h+='<div class="card"><h2>Travel & route quality</h2><p class="desc">Straight-line distance per leg between consecutive stops.</p>'+travelBlock(t)+'</div>';
|
|
|
333 |
h+='</div>';
|
|
|
334 |
|
|
|
335 |
h+='<div class="sectionlabel">Outcomes & Visit Quality</div><div class="card"><p class="desc">Captured on the check-out form — the substance of each store conversation.</p>'+
|
|
|
336 |
'<div class="tiles" style="grid-template-columns:repeat(4,1fr)">'+
|
|
|
337 |
tile('Partner remark filled', o.remarkFilledPct+'<small>%</small>')+
|
|
|
338 |
tile('Avg partner rating', (o.avgRating||0)+'<small>/5</small>')+
|
|
|
339 |
tile('Audit checklist done', o.auditDonePct+'<small>%</small>')+
|
|
|
340 |
tile('Next-visit follow-up set', o.nextVisitPct+'<small>%</small>')+
|
|
|
341 |
'</div></div>';
|
|
|
342 |
|
|
|
343 |
h+='<div class="sectionlabel">What to fix</div>'+findingsBlock(d.findings);
|
|
|
344 |
h+=sourcesCard();
|
|
|
345 |
el('bj-content').innerHTML=h;
|
|
|
346 |
window._scorecard = d.scorecard;
|
|
|
347 |
}
|
|
|
348 |
var sortKey=null, sortAsc=false;
|
|
|
349 |
function sortCard(key){
|
|
|
350 |
if(sortKey===key) sortAsc=!sortAsc; else { sortKey=key; sortAsc=false; }
|
|
|
351 |
window._scorecard.sort(function(a,b){ var x=a[key],y=b[key];
|
|
|
352 |
if(typeof x==='string') return sortAsc? (''+x).localeCompare(y):(''+y).localeCompare(x);
|
|
|
353 |
return sortAsc? x-y : y-x; });
|
|
|
354 |
document.getElementById('scTbl').outerHTML = scorecardTable(window._scorecard);
|
|
|
355 |
}
|
|
|
356 |
function scorecardTable(rows){
|
|
|
357 |
if(!rows||!rows.length) return '<p class="desc">No beat owners in scope for this period.</p>';
|
|
|
358 |
var h='<table id="scTbl"><thead><tr>'+
|
|
|
359 |
'<th onclick="sortCard(\'name\')">Executive</th>'+
|
|
|
360 |
'<th class="num" onclick="sortCard(\'planned\')">Plan</th>'+
|
|
|
361 |
'<th class="num" onclick="sortCard(\'done\')">Done</th>'+
|
|
|
362 |
'<th class="num" onclick="sortCard(\'adherencePct\')">Adher.</th>'+
|
|
|
363 |
'<th class="num" onclick="sortCard(\'discussionMin\')">Disc.</th>'+
|
|
|
364 |
'<th class="num" onclick="sortCard(\'workingHrs\')">Hrs</th>'+
|
|
|
365 |
'<th class="num" onclick="sortCard(\'leads\')">Leads</th>'+
|
|
|
366 |
'<th class="num" onclick="sortCard(\'geoFlags\')">Geo⚠</th></tr></thead><tbody>';
|
|
|
367 |
rows.forEach(function(r){
|
|
|
368 |
var c=adhColor(r.adherencePct);
|
|
|
369 |
h+='<tr><td>'+esc(r.name)+' <span class="lvl">'+esc(r.level)+'</span></td>'+
|
|
|
370 |
'<td class="num">'+r.planned+'</td><td class="num">'+r.done+'</td>'+
|
|
|
371 |
'<td class="num"><b style="color:'+c+'">'+r.adherencePct+'%</b><span class="meter"><i style="width:'+Math.min(100,r.adherencePct)+'%;background:'+c+'"></i></span></td>'+
|
|
|
372 |
'<td class="num'+(r.discussionMin>0&&r.discussionMin<10?' warnflag':'')+'">'+(r.discussionMin||'—')+(r.discussionMin?'m':'')+'</td>'+
|
|
|
373 |
'<td class="num">'+r.workingHrs+'</td><td class="num">'+r.leads+'</td>'+
|
|
|
374 |
'<td class="num'+(r.geoFlags>0?' badflag':'')+'">'+r.geoFlags+'</td></tr>';
|
|
|
375 |
});
|
|
|
376 |
return h+'</tbody></table>';
|
|
|
377 |
}
|
|
|
378 |
function coverageBars(rows){
|
|
|
379 |
if(!rows||!rows.length) return '<p class="desc">No coverage data.</p>';
|
|
|
380 |
var max=0; rows.forEach(function(r){ if(r.totalUsers>max)max=r.totalUsers; }); if(!max)max=1;
|
|
|
381 |
var h=''; rows.forEach(function(r){
|
|
|
382 |
var w=pct(r.withPjp,max), wt=pct(r.totalUsers,max);
|
|
|
383 |
h+='<div class="barrow"><div class="name">'+esc(r.level)+'</div><div class="track">'+
|
|
|
384 |
'<div style="position:absolute;inset:0;width:'+wt+'%;background:#e3e8f5;border-radius:7px"></div>'+
|
|
|
385 |
'<div class="fill" style="width:'+w+'%;position:relative;background:linear-gradient(90deg,#1098ad,#22b8cf)">'+(r.withPjp||'')+'</div></div>'+
|
|
|
386 |
'<div class="meta">'+r.withPjp+'/'+r.totalUsers+' · '+r.coveragePct+'%</div></div>';
|
|
|
387 |
});
|
|
|
388 |
return h;
|
|
|
389 |
}
|
|
|
390 |
function utilBlock(u){
|
|
|
391 |
return '<h2 style="margin-top:18px">Working-hour utilization</h2><p class="desc">Where the average working day goes.</p>'+
|
|
|
392 |
'<div class="util">'+
|
|
|
393 |
'<div style="width:'+u.inStorePct+'%;background:#2f9e44">In-store '+u.inStorePct+'%</div>'+
|
|
|
394 |
'<div style="width:'+u.travelPct+'%;background:#3b5bdb">Travel '+u.travelPct+'%</div>'+
|
|
|
395 |
'<div style="width:'+u.idlePct+'%;background:#e03131">Idle '+u.idlePct+'%</div></div>'+
|
|
|
396 |
'<div class="utlegend"><span><span class="dot" style="background:#2f9e44;margin:0"></span>Selling '+u.inStoreHrs+' h</span>'+
|
|
|
397 |
'<span><span class="dot" style="background:#3b5bdb;margin:0"></span>Travel '+u.travelHrs+' h</span>'+
|
|
|
398 |
'<span><span class="dot" style="background:#e03131;margin:0"></span>Idle '+u.idleHrs+' h</span></div>';
|
|
|
399 |
}
|
|
|
400 |
function deferDonut(df){
|
|
|
401 |
var sysPct=df.systemPct||0;
|
|
|
402 |
var g='conic-gradient(#f59f00 0 '+sysPct+'%, #2f9e44 '+sysPct+'% 100%)';
|
|
|
403 |
return '<div class="donutwrap"><div class="donut" style="background:'+g+'"><div class="center">'+
|
|
|
404 |
'<div style="font-size:24px;font-weight:780">'+num(df.total)+'</div><div style="font-size:11px;color:#97a1b5">deferrals</div></div></div>'+
|
|
|
405 |
'<div class="legend">'+
|
|
|
406 |
'<div class="it"><span class="dot" style="background:#f59f00"></span><div><b>'+df.systemGenerated+'</b> system auto-flagged ('+sysPct+'%)<br><span style="color:#97a1b5;font-size:11.5px">"beat missed", "no punch-in"</span></div></div>'+
|
|
|
407 |
'<div class="it"><span class="dot" style="background:#2f9e44"></span><div><b>'+df.human+'</b> genuine reason ('+df.humanPct+'%)</div></div>'+
|
|
|
408 |
'<div class="it"><span class="dot" style="background:#3b5bdb"></span><div><b>'+df.actioned+'</b> acted on by a head'+(df.avgDaysToAction?'<br><span style="color:#97a1b5;font-size:11.5px">avg '+df.avgDaysToAction+' days to action</span>':'')+'</div></div>'+
|
|
|
409 |
'</div></div><p class="desc" style="margin-top:13px">"System" vs "genuine" is read from the deferral reason; there is no separate flag.</p>';
|
|
|
410 |
}
|
|
|
411 |
function travelBlock(t){
|
|
|
412 |
var rows=t.legBuckets||[], max=0; rows.forEach(function(r){ if(r.count>max)max=r.count; }); if(!max)max=1;
|
|
|
413 |
var colors={'0-2 km':'#2f9e44','2-5 km':'#2f9e44','5-15 km':'#82c91e','15-50 km':'#f59f00','50 km+':'#e03131'};
|
|
|
414 |
var h=''; rows.forEach(function(r){
|
|
|
415 |
h+='<div class="barrow"><div class="name">'+esc(r.bucket)+'</div><div class="track"><div class="fill" style="width:'+pct(r.count,max)+'%;background:'+(colors[r.bucket]||'#3b5bdb')+'">'+r.count+'</div></div><div class="meta"></div></div>';
|
|
|
416 |
});
|
|
|
417 |
h+='<div class="tiles" style="margin-top:14px">'+
|
|
|
418 |
tile('Avg leg', t.avgLegKm+'<small> km</small>')+
|
|
|
419 |
tile('Legs > 15 km', t.pctOver15+'<small>%</small>')+
|
|
|
420 |
tile('Actual / estimate', (t.actualVsEstimateRatio||0)+'<small>×</small>')+'</div>';
|
|
|
421 |
return h;
|
|
|
422 |
}
|
|
|
423 |
function findingsBlock(items){
|
|
|
424 |
if(!items||!items.length) return '<div class="callout"><h2>Nothing flagged</h2><p class="desc">No issues crossed the alert thresholds for this period.</p></div>';
|
|
|
425 |
var sev={high:'#e03131',med:'#f59f00',low:'#2f9e44'};
|
|
|
426 |
var h='<div class="callout"><h2>Recommended management actions</h2><p class="desc">Generated from this period\'s data.</p>';
|
|
|
427 |
items.forEach(function(x){
|
|
|
428 |
h+='<div class="fix"><div class="sev" style="background:'+(sev[x.severity]||'#3b5bdb')+'"></div><div class="fb">'+
|
|
|
429 |
'<div class="ft">'+esc(x.title)+'</div><div class="fd">'+esc(x.detail)+'</div>'+
|
|
|
430 |
'<div class="act">→ '+esc(x.action)+'</div></div></div>';
|
|
|
431 |
});
|
|
|
432 |
return h+'</div>';
|
|
|
433 |
}
|
|
|
434 |
function sourcesCard(){
|
|
|
435 |
return '<div class="sectionlabel">Where the numbers come from</div><div class="card">'+
|
|
|
436 |
'<p class="desc">Nothing new needs to be captured — everything here is built from what the field app already records on each journey.</p>'+
|
|
|
437 |
'<ul style="margin:0;padding-left:18px;line-height:1.95;font-size:13px;color:#3a4459">'+
|
|
|
438 |
'<li>The <b>journey timeline</b> (punch-in, check-ins/outs, deferrals, punch-out) comes from what the executive taps in the app.</li>'+
|
|
|
439 |
'<li><b>Adherence</b> compares the partners planned on each beat against the stores actually visited.</li>'+
|
|
|
440 |
'<li><b>Time, travel and distance</b> use the in-store and travel durations logged per visit.</li>'+
|
|
|
441 |
'<li><b>Geofence / fake-visit checks</b> compare the check-in GPS against the partner\'s saved shop location (flagged beyond ~50 m).</li>'+
|
|
|
442 |
'<li><b>Visit outcomes</b> (remarks, rating, audit, next visit) come from the check-out form.</li>'+
|
|
|
443 |
'<li><b>Coverage and the manager view</b> follow the existing L1–L5 sales hierarchy, so each manager sees only their team.</li>'+
|
|
|
444 |
'</ul></div>';
|
|
|
445 |
}
|
|
|
446 |
|
|
|
447 |
/* ============================ EXEC DRILLDOWN ============================ */
|
|
|
448 |
function openExec(userId, name, date){
|
|
|
449 |
if(!userId){ return; }
|
|
|
450 |
var mb=el('bj-modal-back'), m=el('bj-modal');
|
|
|
451 |
m.innerHTML='<button class="x" onclick="closeModal()">×</button><h3>'+esc(name)+'</h3><p class="desc">Journey detail · '+esc(date)+'</p><div class="loading"><div class="spinner"></div>Loading…</div>';
|
|
|
452 |
mb.classList.add('show');
|
|
|
453 |
fetch(CTX+'/beat-report/live-tracking?userId='+userId+'&date='+encodeURIComponent(date),{headers:{'Accept':'application/json'}})
|
|
|
454 |
.then(function(r){ return r.json(); }).then(function(d){
|
|
|
455 |
var v=d.visits||[];
|
|
|
456 |
var h='<button class="x" onclick="closeModal()">×</button><h3>'+esc(name)+'</h3><p class="desc">Journey detail · '+esc(date)+' · battery '+(d.batteryLevel==null?'—':d.batteryLevel+'%')+' · loc-off '+(d.locationToggleCount||0)+'</p>';
|
|
|
457 |
if(!v.length){ h+='<p class="desc">No tracking events for this day.</p>'; }
|
|
|
458 |
else{
|
|
|
459 |
h+='<table><thead><tr><th>Stop</th><th>Type</th><th>Status</th><th>In</th><th>Out</th><th class="num">Time</th></tr></thead><tbody>';
|
|
|
460 |
v.forEach(function(x){
|
|
|
461 |
h+='<tr><td>'+esc(x.taskName||'—')+'</td><td>'+esc(x.taskType||'')+'</td><td>'+esc(x.markType||'')+'</td>'+
|
|
|
462 |
'<td>'+(x.checkInTime?esc(x.checkInTime):'—')+'</td><td>'+(x.checkOutTime?esc(x.checkOutTime):'—')+'</td>'+
|
|
|
463 |
'<td class="num">'+(x.timeSpent?esc(x.timeSpent):'—')+'</td></tr>';
|
|
|
464 |
});
|
|
|
465 |
h+='</tbody></table>';
|
|
|
466 |
}
|
|
|
467 |
m.innerHTML=h;
|
|
|
468 |
}).catch(function(){ m.innerHTML='<button class="x" onclick="closeModal()">×</button><p class="desc">Could not load detail.</p>'; });
|
|
|
469 |
}
|
|
|
470 |
function closeModal(){ el('bj-modal-back').classList.remove('show'); }
|
|
|
471 |
|
|
|
472 |
/* ============================ APPROVAL ============================ */
|
|
|
473 |
function loadApproval(){
|
|
|
474 |
spinner();
|
|
|
475 |
var from=el('bj-start').value, to=el('bj-end').value;
|
|
|
476 |
var u=CTX+'/beat-report/approval/data?fromDate='+encodeURIComponent(from)+'&toDate='+encodeURIComponent(to)+qs();
|
|
|
477 |
fetch(u,{headers:{'Accept':'application/json'}}).then(function(r){ return r.json(); }).then(function(d){
|
|
|
478 |
var rows=d.rows||[];
|
|
|
479 |
var h='<div class="card"><h2>Location Approval <span style="color:#97a1b5;font-weight:500;font-size:12px">· '+rows.length+' off-site check-ins</span></h2>'+
|
|
|
480 |
'<p class="desc">Check-ins recorded >50 m from the partner\'s saved location, across your downline. Approving updates the partner\'s coordinates.</p>';
|
|
|
481 |
if(!rows.length){ h+='<p class="desc">Nothing pending in this window.</p></div>'; el('bj-content').innerHTML=h; return; }
|
|
|
482 |
h+='<table><thead><tr><th>Executive</th><th>Store</th><th>Date</th><th>Check-in</th><th class="num">Distance</th><th class="num">Action</th></tr></thead><tbody>';
|
|
|
483 |
rows.forEach(function(r){
|
|
|
484 |
h+='<tr id="appr-'+r.trackingId+'"><td>'+esc(r.username)+'</td><td>'+esc(r.taskName)+'</td><td>'+esc(r.taskDate)+'</td><td>'+esc(r.checkInTime)+'</td>'+
|
|
|
485 |
'<td class="num '+(r.distanceM>200?'badflag':'warnflag')+'">'+r.distanceM+' m</td>'+
|
|
|
486 |
'<td class="num"><button class="btn-ok" onclick="approve('+r.trackingId+')">Approve</button></td></tr>';
|
|
|
487 |
});
|
|
|
488 |
h+='</tbody></table></div>';
|
|
|
489 |
el('bj-content').innerHTML=h;
|
|
|
490 |
}).catch(fail);
|
|
|
491 |
}
|
|
|
492 |
function approve(trackingId){
|
|
|
493 |
fetch(CTX+'/beat-report/approve-checkin',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'trackingId='+trackingId})
|
|
|
494 |
.then(function(r){ return r.json(); }).then(function(){ var row=el('appr-'+trackingId); if(row) row.parentNode.removeChild(row); }).catch(function(){ alert('Approve failed'); });
|
|
|
495 |
}
|
|
|
496 |
|
|
|
497 |
/* ============================ INIT ============================ */
|
|
|
498 |
document.querySelectorAll('.lens').forEach(function(b){ b.addEventListener('click', function(){ setLens(b.getAttribute('data-lens')); }); });
|
|
|
499 |
el('bj-apply').addEventListener('click', load);
|
|
|
500 |
el('bj-modal-back').addEventListener('click', function(e){ if(e.target===el('bj-modal-back')) closeModal(); });
|
|
|
501 |
load();
|
|
|
502 |
</script>
|
|
|
503 |
</body>
|
|
|
504 |
</html>
|