| 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}
|
| 36897 |
vikas |
82 |
.bstat{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
|
|
|
83 |
.bstat.ok{background:#ebfbee;color:#2f9e44}
|
|
|
84 |
.bstat.warn{background:#fff4e6;color:#e8590c}
|
|
|
85 |
.bstat.no{background:#fff0f0;color:#e03131}
|
|
|
86 |
.bdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
|
|
|
87 |
.ptime{display:inline-block;background:#ebfbee;color:#2f9e44;font-weight:700;font-size:11px;padding:2px 7px;border-radius:6px;font-variant-numeric:tabular-nums}
|
|
|
88 |
td.cnt{font-weight:700;font-variant-numeric:tabular-nums}
|
|
|
89 |
.cgreen{color:#2f9e44}.camber{color:#f08c00}.cred{color:#e03131}.cmuted{color:#69748c}
|
|
|
90 |
.actbtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;border:0;cursor:pointer;color:#fff;font-size:12px;margin-left:3px}
|
|
|
91 |
.actbtn.map{background:#12b886}.actbtn.view{background:#3b5bdb}
|
|
|
92 |
.actbtn.edit{background:#f08c00}.actbtn.add{background:#2f9e44;font-size:15px}
|
|
|
93 |
.actbtn:active{transform:translateY(1px)}
|
| 36877 |
vikas |
94 |
.att{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;margin-bottom:9px}
|
|
|
95 |
.att .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
|
|
|
96 |
.att .ab{flex:1}
|
|
|
97 |
.att .atitle{font-size:13px;font-weight:650}
|
|
|
98 |
.att .adet{font-size:12px;color:var(--muted);margin-top:2px}
|
|
|
99 |
.att .acount{font-size:18px;font-weight:780}
|
| 36882 |
vikas |
100 |
.att.clickable{cursor:pointer;transition:border-color .12s,box-shadow .12s}
|
|
|
101 |
.att.clickable:hover{border-color:#c7d0e8;box-shadow:0 2px 8px rgba(20,30,60,.08)}
|
|
|
102 |
.att .chev{color:#c2cadb;font-size:13px;margin-left:8px}
|
| 36877 |
vikas |
103 |
.barrow{display:grid;grid-template-columns:60px 1fr 90px;align-items:center;gap:11px;margin:8px 0}
|
|
|
104 |
.barrow .name{font-size:13px;font-weight:600}
|
|
|
105 |
.track{background:#f1f3f9;border-radius:7px;height:20px;position:relative;overflow:hidden}
|
|
|
106 |
.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}
|
|
|
107 |
.barrow .meta{font-size:11.5px;color:var(--muted);text-align:right}
|
|
|
108 |
.donutwrap{display:flex;align-items:center;gap:20px}
|
|
|
109 |
.donut{width:138px;height:138px;border-radius:50%;flex:none;position:relative;
|
|
|
110 |
-webkit-mask:radial-gradient(circle 42px at center,transparent 98%,#000 100%);mask:radial-gradient(circle 42px at center,transparent 98%,#000 100%)}
|
|
|
111 |
.donut .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;-webkit-mask:none;mask:none}
|
|
|
112 |
.legend{display:flex;flex-direction:column;gap:9px;font-size:12.5px}
|
|
|
113 |
.legend .it{display:flex;align-items:flex-start;gap:9px}
|
|
|
114 |
.dot{width:11px;height:11px;border-radius:3px;flex:none;margin-top:3px}
|
|
|
115 |
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
|
|
|
116 |
.tile{background:#f8f9fc;border:1px solid var(--line2);border-radius:11px;padding:12px}
|
|
|
117 |
.tile .t{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--soft);font-weight:600}
|
|
|
118 |
.tile .v{font-size:21px;font-weight:760;margin-top:5px}
|
|
|
119 |
.tile .v small{font-size:12px;color:var(--soft);font-weight:600}
|
|
|
120 |
.util{display:flex;height:30px;border-radius:8px;overflow:hidden}
|
|
|
121 |
.util div{display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:650;color:#fff}
|
|
|
122 |
.utlegend{display:flex;gap:18px;margin-top:12px;font-size:12px;color:var(--muted);flex-wrap:wrap}
|
|
|
123 |
.utlegend span{display:inline-flex;align-items:center;gap:7px}
|
|
|
124 |
.callout{background:linear-gradient(180deg,#fbfcff,#f4f7ff);border:1px solid #dfe6fb;border-radius:14px;padding:18px 20px;margin-top:6px}
|
|
|
125 |
.callout h2{margin:0 0 3px;font-size:16px}
|
|
|
126 |
.callout .desc{color:var(--muted);font-size:12.5px;margin-bottom:14px}
|
|
|
127 |
.fix{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid #e6ebf8}
|
|
|
128 |
.fix:last-child{border-bottom:0}
|
|
|
129 |
.fix .sev{width:6px;border-radius:4px;flex:none}
|
|
|
130 |
.fix .fb{flex:1}
|
|
|
131 |
.fix .ft{font-size:14px;font-weight:700}
|
|
|
132 |
.fix .fd{font-size:13px;color:#3a4459;margin-top:4px;line-height:1.5}
|
|
|
133 |
.fix .fd b{color:var(--ink)}
|
|
|
134 |
.fix .act{font-size:12.5px;color:var(--good);margin-top:6px;font-weight:650}
|
|
|
135 |
.hide{display:none}
|
|
|
136 |
.loading{padding:70px;text-align:center;color:var(--muted)}
|
|
|
137 |
.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}
|
|
|
138 |
@keyframes spin{to{transform:rotate(360deg)}}
|
|
|
139 |
.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}
|
| 36903 |
vikas |
140 |
/* image lightbox — stacks above the journey modal */
|
|
|
141 |
.img-back{position:fixed;inset:0;background:rgba(8,12,24,.82);display:none;align-items:center;justify-content:center;z-index:60;padding:30px}
|
|
|
142 |
.img-back.show{display:flex}
|
|
|
143 |
.img-back img{max-width:95%;max-height:92vh;border-radius:10px;box-shadow:0 16px 60px rgba(0,0,0,.5);background:#fff}
|
|
|
144 |
.img-x{position:absolute;top:18px;right:22px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:26px;line-height:1;cursor:pointer}
|
|
|
145 |
.img-x:hover{background:rgba(255,255,255,.3)}
|
| 36877 |
vikas |
146 |
.modal-back.show{display:flex}
|
| 36882 |
vikas |
147 |
.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}
|
|
|
148 |
.modal h3{margin:0 0 2px;font-size:17px;text-align:center}
|
|
|
149 |
.modal > .desc{text-align:center}
|
|
|
150 |
.modal .x{position:absolute;top:14px;right:16px;cursor:pointer;color:var(--soft);font-size:22px;line-height:1;border:0;background:none}
|
|
|
151 |
/* journey totals bar */
|
|
|
152 |
.jstats{display:flex;gap:9px;margin:12px 0 2px;flex-wrap:wrap}
|
|
|
153 |
.js{flex:1;min-width:104px;background:#f8f9fc;border:1px solid var(--line2);border-radius:10px;padding:9px 10px;text-align:center}
|
|
|
154 |
.js .jv{font-size:15.5px;font-weight:760;color:var(--ink);font-variant-numeric:tabular-nums}
|
|
|
155 |
.js .jl{font-size:10px;color:var(--soft);text-transform:uppercase;letter-spacing:.04em;margin-top:3px;font-weight:600}
|
| 36877 |
vikas |
156 |
.btn-ok{background:var(--good);border:0;color:#fff;font-weight:650;padding:6px 12px;border-radius:7px;cursor:pointer;font-size:12px}
|
| 36882 |
vikas |
157 |
/* journey timeline (exec drilldown) */
|
|
|
158 |
.tl{position:relative;margin:14px 2px 4px;padding:4px 0}
|
|
|
159 |
.tl::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;background:#e9edf5;transform:translateX(-50%)}
|
|
|
160 |
.tlgap{position:relative;display:flex;justify-content:center;margin:-3px 0}
|
|
|
161 |
.tlgap .gappill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:11px;font-weight:600;color:var(--muted);z-index:2;box-shadow:0 1px 2px rgba(20,30,60,.05);font-variant-numeric:tabular-nums}
|
| 36903 |
vikas |
162 |
.tlrow{position:relative;display:flex;justify-content:space-between;align-items:flex-start;margin:14px 0}
|
| 36882 |
vikas |
163 |
.tlrow .node{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;z-index:2;box-shadow:0 0 0 4px #fff}
|
|
|
164 |
.tlcard{width:calc(50% - 26px);background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 2px 10px rgba(20,30,60,.07);display:flex;overflow:hidden}
|
|
|
165 |
.tlrow.left .tlcard{flex-direction:row-reverse;text-align:right}
|
|
|
166 |
.tlrow.right .tlcard{flex-direction:row;text-align:left}
|
| 36903 |
vikas |
167 |
/* remark on the opposite half, hugging the centre line */
|
|
|
168 |
.tlremark{width:calc(50% - 26px);display:flex;align-items:flex-start;padding-top:6px}
|
|
|
169 |
.tlrow.right .tlremark{justify-content:flex-end}
|
|
|
170 |
.tlrow.left .tlremark{justify-content:flex-start}
|
|
|
171 |
.tlremark .rk{max-width:100%;background:#fbfcfe;border:1px solid var(--line2);border-left:3px solid #c7d0e8;border-radius:8px;padding:7px 10px;font-size:11.5px;color:#4a5468;line-height:1.45;word-break:break-word}
|
|
|
172 |
.tlrow.right .tlremark .rk{text-align:right}
|
|
|
173 |
.tlrow.left .tlremark .rk{text-align:left}
|
|
|
174 |
.tlremark .rkl{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--soft);font-weight:700;margin-bottom:3px}
|
| 36882 |
vikas |
175 |
.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}
|
|
|
176 |
.tlcard .tm small{font-weight:600;font-size:8.5px;opacity:.9;text-transform:uppercase;letter-spacing:.04em;margin-top:3px}
|
|
|
177 |
.tlcard .bd{padding:8px 11px;flex:1;min-width:0}
|
|
|
178 |
.tlcard .bd .ti{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.25;word-break:break-word}
|
|
|
179 |
.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}
|
|
|
180 |
.tlcard .bd .mt{font-size:11px;color:var(--muted);margin-top:6px}
|
|
|
181 |
.tlextra{display:flex;align-items:center;gap:7px;margin-top:8px;flex-wrap:wrap}
|
|
|
182 |
.tlrow.left .tlextra{justify-content:flex-end}
|
|
|
183 |
.tlrow.right .tlextra{justify-content:flex-start}
|
|
|
184 |
.tlthumb{width:46px;height:46px;border-radius:8px;object-fit:cover;border:1px solid var(--line);cursor:pointer;background:#f1f3f9}
|
|
|
185 |
.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}
|
|
|
186 |
.tlchip{font-size:10.5px;font-weight:600;color:var(--muted);background:#f1f3f9;border-radius:6px;padding:2px 7px;white-space:nowrap}
|
| 36897 |
vikas |
187 |
.exectabs{display:flex;gap:6px;justify-content:center;margin:12px 0 4px}
|
|
|
188 |
.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}
|
|
|
189 |
.exectab.active{background:var(--brand);color:#fff;border-color:var(--brand)}
|
|
|
190 |
#bjMap{width:100%;height:460px;border-radius:12px;border:1px solid var(--line);margin-top:10px;background:#eef1f7;overflow:hidden}
|
| 36903 |
vikas |
191 |
.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}
|
|
|
192 |
.bjlegend .lg{font-weight:700}
|
|
|
193 |
.bjlegend .sw{display:inline-block;width:24px;vertical-align:middle;margin-right:7px}
|
|
|
194 |
.bjlegend .ln{border-top:4px solid #e03131}
|
|
|
195 |
.bjlegend .dt{border-top:4px dotted #2f9e44}
|
| 36897 |
vikas |
196 |
.valwrap{display:flex;justify-content:center;margin:14px 0 6px}
|
|
|
197 |
.valimg{max-width:100%;max-height:440px;border-radius:12px;border:1px solid var(--line);cursor:zoom-in}
|
|
|
198 |
.valph{width:100%;padding:48px;text-align:center;color:var(--soft);border:1px dashed #cfd6e6;border-radius:12px;background:#f4f6fb;font-size:14px}
|
|
|
199 |
.valactions{display:flex;justify-content:center;gap:10px;margin-top:8px}
|
| 36877 |
vikas |
200 |
@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}}
|
| 36903 |
vikas |
201 |
@media (max-width:560px){.tl::before{left:20px}.tlrow.left,.tlrow.right{justify-content:flex-end}.tlrow .node{left:20px}.tlcard{width:calc(100% - 44px)}.tlrow.left .tlcard{flex-direction:row;text-align:left}.tlremark{display:none}}
|
| 36877 |
vikas |
202 |
</style>
|
|
|
203 |
</head>
|
|
|
204 |
<body>
|
|
|
205 |
<div class="wrap">
|
|
|
206 |
<header class="top">
|
|
|
207 |
<div class="brand">
|
|
|
208 |
<div class="crumb"><a href="${rc.contextPath}/dashboard">← Dashboard</a> · Field Sales · Beat / Monthly PJP</div>
|
|
|
209 |
<h1>Beat Journey <span class="live"><i></i>Live</span></h1>
|
|
|
210 |
</div>
|
|
|
211 |
<div class="hd-right">
|
|
|
212 |
<select class="ctl" id="bj-level">
|
|
|
213 |
<option value="">All levels below me</option>
|
|
|
214 |
#foreach($lvl in $escalationTypes)
|
|
|
215 |
<option value="$lvl">$lvl</option>
|
|
|
216 |
#end
|
|
|
217 |
</select>
|
| 36897 |
vikas |
218 |
#if($topLevel)
|
|
|
219 |
<select class="ctl hide" id="bj-user">
|
|
|
220 |
<option value="">All users at level</option>
|
|
|
221 |
</select>
|
|
|
222 |
#end
|
| 36877 |
vikas |
223 |
<input class="ctl" type="date" id="bj-date" value="$today">
|
|
|
224 |
<span id="bj-period-range" class="hide">
|
|
|
225 |
<input class="ctl" type="date" id="bj-start" value="$monthStart">
|
|
|
226 |
<input class="ctl" type="date" id="bj-end" value="$today">
|
|
|
227 |
</span>
|
|
|
228 |
<button class="btn-r" id="bj-apply">Apply</button>
|
| 36903 |
vikas |
229 |
<button class="btn-r" id="bj-export" style="background:#2f9e44" title="Download an Excel report for the selected date / range">⬇ Export Excel</button>
|
| 36877 |
vikas |
230 |
</div>
|
|
|
231 |
</header>
|
|
|
232 |
|
|
|
233 |
<div class="lenses">
|
|
|
234 |
<button class="lens active" data-lens="today" id="lens-today">Today (Live)</button>
|
|
|
235 |
<button class="lens" data-lens="period" id="lens-period">Period (Analytics)</button>
|
|
|
236 |
</div>
|
|
|
237 |
|
|
|
238 |
<div id="bj-content"><div class="loading"><div class="spinner"></div>Loading…</div></div>
|
|
|
239 |
</div>
|
|
|
240 |
|
|
|
241 |
<div class="modal-back" id="bj-modal-back">
|
|
|
242 |
<div class="modal" id="bj-modal"></div>
|
|
|
243 |
</div>
|
|
|
244 |
|
| 36903 |
vikas |
245 |
<div class="img-back" id="bj-img-back">
|
|
|
246 |
<button class="img-x" id="bj-img-x" title="Close">×</button>
|
|
|
247 |
<img id="bj-img" alt="Attachment">
|
|
|
248 |
</div>
|
|
|
249 |
|
| 36877 |
vikas |
250 |
<script>
|
|
|
251 |
var CTX = '${rc.contextPath}';
|
|
|
252 |
var BASE = CTX + '/beat-journey';
|
|
|
253 |
var LENS = 'today';
|
| 36897 |
vikas |
254 |
var TODAY = '$today';
|
| 36877 |
vikas |
255 |
|
|
|
256 |
function el(id){ return document.getElementById(id); }
|
| 36897 |
vikas |
257 |
// The first lens reads "Today (Live)" for today's date, otherwise it shows the
|
|
|
258 |
// selected date (the tab is still the live/single-day view, just for that day).
|
|
|
259 |
function fmtDateLabel(d){
|
|
|
260 |
var p=(d||'').split('-'); if(p.length!==3) return d;
|
|
|
261 |
var mo=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
|
|
|
262 |
return parseInt(p[2],10)+' '+(mo[parseInt(p[1],10)-1]||p[1])+' '+p[0];
|
|
|
263 |
}
|
|
|
264 |
function updateTodayLabel(){
|
|
|
265 |
var b=el('bj-date'), lbl=el('lens-today'); if(!lbl) return;
|
|
|
266 |
var d=b?b.value:'';
|
|
|
267 |
lbl.innerHTML = (!d || d===TODAY) ? 'Today (Live)' : esc(fmtDateLabel(d));
|
|
|
268 |
}
|
| 36877 |
vikas |
269 |
function esc(s){ return String(s==null?'':s).replace(/[&<>"]/g,function(c){return {'&':'&','<':'<','>':'>','"':'"'}[c];}); }
|
|
|
270 |
function num(n){ return (n==null?0:n).toLocaleString(); }
|
|
|
271 |
function adhColor(p){ if(p>=80)return '#2f9e44'; if(p>=60)return '#f08c00'; if(p>=40)return '#e8590c'; return '#e03131'; }
|
|
|
272 |
function pct(a,b){ return b? Math.round(100*a/b):0; }
|
|
|
273 |
function qs(){
|
|
|
274 |
var lvl = el('bj-level').value;
|
|
|
275 |
var s = '';
|
|
|
276 |
if(lvl) s += '&escalationType=' + encodeURIComponent(lvl);
|
| 36897 |
vikas |
277 |
var usr = el('bj-user'); // only present for L5/Final
|
|
|
278 |
if(usr && usr.value) s += '&teamOfAuthUserId=' + encodeURIComponent(usr.value);
|
| 36877 |
vikas |
279 |
return s;
|
|
|
280 |
}
|
| 36897 |
vikas |
281 |
// L5/Final: when a level is picked, list its users so a specific manager's team
|
|
|
282 |
// can be selected. Selecting a user scopes the whole view to that user's team.
|
|
|
283 |
function onLevelChange(){
|
|
|
284 |
var usr = el('bj-user');
|
|
|
285 |
if(!usr){ load(); return; } // not top-level: just reload on level change
|
|
|
286 |
var lvl = el('bj-level').value;
|
|
|
287 |
usr.innerHTML = '<option value="">All users at level</option>';
|
|
|
288 |
if(!lvl){ usr.classList.add('hide'); load(); return; }
|
|
|
289 |
fetch(BASE + '/users?escalationType=' + encodeURIComponent(lvl), {headers:{'Accept':'application/json'}})
|
|
|
290 |
.then(function(r){ return r.json(); })
|
|
|
291 |
.then(function(d){
|
|
|
292 |
var us = d.users || [];
|
|
|
293 |
var h = '<option value="">All ' + esc(lvl) + ' users</option>';
|
|
|
294 |
us.forEach(function(u){ h += '<option value="' + u.id + '">' + esc(u.name) + '</option>'; });
|
|
|
295 |
usr.innerHTML = h;
|
|
|
296 |
usr.classList.toggle('hide', us.length === 0);
|
|
|
297 |
load();
|
|
|
298 |
})
|
|
|
299 |
.catch(function(){ usr.classList.add('hide'); load(); });
|
|
|
300 |
}
|
| 36877 |
vikas |
301 |
function spinner(){ el('bj-content').innerHTML = '<div class="loading"><div class="spinner"></div>Loading…</div>'; }
|
|
|
302 |
function fail(e){ el('bj-content').innerHTML = '<div class="loading">Could not load data ('+esc(e&&e.message||e)+'). Are you signed in?</div>'; }
|
|
|
303 |
|
|
|
304 |
function setLens(name){
|
|
|
305 |
LENS = name;
|
|
|
306 |
var tabs = document.querySelectorAll('.lens');
|
|
|
307 |
for(var i=0;i<tabs.length;i++){ tabs[i].classList.toggle('active', tabs[i].getAttribute('data-lens')===name); }
|
|
|
308 |
el('bj-date').classList.toggle('hide', name!=='today');
|
|
|
309 |
el('bj-period-range').classList.toggle('hide', name==='today');
|
|
|
310 |
load();
|
|
|
311 |
}
|
|
|
312 |
function load(){
|
|
|
313 |
if(LENS==='today') return loadToday();
|
|
|
314 |
if(LENS==='period') return loadPeriod();
|
|
|
315 |
return loadApproval();
|
|
|
316 |
}
|
|
|
317 |
|
|
|
318 |
/* ============================ TODAY ============================ */
|
|
|
319 |
function loadToday(){
|
| 36897 |
vikas |
320 |
updateTodayLabel();
|
| 36877 |
vikas |
321 |
spinner();
|
|
|
322 |
fetch(BASE + '/today?date=' + encodeURIComponent(el('bj-date').value) + qs(), {headers:{'Accept':'application/json'}})
|
|
|
323 |
.then(function(r){ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); })
|
|
|
324 |
.then(renderToday).catch(fail);
|
|
|
325 |
}
|
|
|
326 |
function kpi(ic, bg, fg, label, val, foot, valColor){
|
|
|
327 |
return '<div class="kpi"><div class="top"><div class="ic" style="background:'+bg+';color:'+fg+'">'+ic+'</div>'+
|
|
|
328 |
'<div class="label">'+label+'</div></div><div class="val"'+(valColor?' style="color:'+valColor+'"':'')+'>'+val+'</div>'+
|
|
|
329 |
'<div class="foot">'+foot+'</div></div>';
|
|
|
330 |
}
|
|
|
331 |
function fstep(name, val, w, sub, drop, last){
|
|
|
332 |
return '<div class="fstep"><div class="fn">'+name+'</div><div class="fv">'+num(val)+'</div>'+
|
|
|
333 |
'<div class="fbar" style="width:'+w+'%"></div><div class="'+(drop?'drop':'keep')+'">'+sub+'</div>'+
|
|
|
334 |
(last?'':'<span class="arrow">➤</span>')+'</div>';
|
|
|
335 |
}
|
|
|
336 |
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>'; }
|
|
|
337 |
|
|
|
338 |
function renderToday(d){
|
|
|
339 |
var k=d.kpis, f=d.funnel, s=d.stops, a=d.attention;
|
| 36897 |
vikas |
340 |
window._canApprove = !!d.canApprove;
|
|
|
341 |
window._mediaUrl = d.mediaUrl || window._mediaUrl || '';
|
| 36877 |
vikas |
342 |
var h='';
|
|
|
343 |
h+='<div class="kpis">';
|
|
|
344 |
h+=kpi('👥','#eef1fb','#3b5bdb','Executives scheduled',num(k.scheduled),k.notStarted+' not started yet');
|
|
|
345 |
h+=kpi('⏱','#ebfbee','#2f9e44','Punched in',num(k.punchedIn)+' <small>/'+k.scheduled+'</small>',k.notStarted+' pending');
|
|
|
346 |
h+=kpi('📍','#e7f5ff','#1098ad','On route now',num(k.onRouteNow),'live journeys');
|
|
|
347 |
h+=kpi('✓','#eef1fb','#3b5bdb','Visits done',num(k.visitsDone)+' <small>/'+k.visitsPlanned+'</small>',k.inProgress+' in progress');
|
|
|
348 |
h+=kpi('↻','#fff4e6','#e8590c','Deferred today',num(k.deferred),'shop closed / unavailable');
|
|
|
349 |
h+=kpi('★','#fff0f6','#d6336c','Leads on route',num(k.leads),'new shops logged');
|
|
|
350 |
h+='</div>';
|
|
|
351 |
|
|
|
352 |
h+='<div class="sectionlabel">Today\'s Journey Funnel</div><div class="card"><div class="funnel">';
|
|
|
353 |
var sc=f.scheduled||1;
|
|
|
354 |
h+=fstep('Scheduled executives',f.scheduled,100,'start of day',false,false);
|
|
|
355 |
h+=fstep('Punched in',f.punchedIn,pct(f.punchedIn,sc),'−'+(f.scheduled-f.punchedIn)+' never started',true,false);
|
|
|
356 |
h+=fstep('Made a check-in',f.madeCheckin,pct(f.madeCheckin,sc),'−'+(f.punchedIn-f.madeCheckin)+' punched, idle',true,false);
|
|
|
357 |
h+=fstep('Completed all visits',f.completedAll,pct(f.completedAll,sc),(f.madeCheckin-f.completedAll)+' still mid-journey',true,false);
|
|
|
358 |
h+=fstep('Punched out',f.punchedOut,pct(f.punchedOut,sc),'journey ended',false,true);
|
|
|
359 |
h+='</div></div>';
|
|
|
360 |
|
|
|
361 |
h+='<div class="grid g3">';
|
|
|
362 |
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>';
|
|
|
363 |
h+='<div class="card"><h2>Needs attention now</h2><p class="desc">Things a manager should clear today.</p>'+attentionList(a)+'</div>';
|
|
|
364 |
h+='</div>';
|
|
|
365 |
el('bj-content').innerHTML=h;
|
|
|
366 |
}
|
|
|
367 |
function stateClass(st){ return st==='IN_STORE'?'ps-store':st==='TRAVELLING'?'ps-travel':st==='DONE'?'ps-done':st==='NOT_STARTED'?'ps-no':'ps-idle'; }
|
| 36897 |
vikas |
368 |
function js(s){ return String(s==null?'':s).replace(/\\/g,'\\\\').replace(/'/g,"\\'"); }
|
|
|
369 |
// Open the Beat Planner (map-first planner window) for this executive/beat/day,
|
|
|
370 |
// in a new tab. Edit pre-selects the beat; add opens it to assign/add a visit.
|
|
|
371 |
function openPlanner(authUserId, beatId, date, mode){
|
|
|
372 |
var u = CTX + '/beatPlanWindow?autoUserId=' + encodeURIComponent(authUserId) + '&editDate=' + encodeURIComponent(date);
|
|
|
373 |
if(beatId && beatId>0) u += '&editBeatId=' + encodeURIComponent(beatId);
|
|
|
374 |
if(mode==='add') u += '&assign=1';
|
|
|
375 |
window.open(u, '_blank');
|
|
|
376 |
}
|
| 36877 |
vikas |
377 |
function boardTable(rows, date){
|
|
|
378 |
if(!rows||!rows.length) return '<p class="desc">No executives scheduled or active for this date.</p>';
|
| 36897 |
vikas |
379 |
var h='<div style="overflow-x:auto"><table><thead><tr>'+
|
|
|
380 |
'<th>Agenda</th><th>Executive</th><th class="num">Planned</th>'+
|
|
|
381 |
'<th>Punch In/Out</th><th>State</th><th class="num">Total</th><th class="num">Completed</th><th class="num">Pending</th><th class="num">Deferred</th><th>Action</th>'+
|
|
|
382 |
'</tr></thead><tbody>';
|
| 36877 |
vikas |
383 |
rows.forEach(function(r){
|
| 36897 |
vikas |
384 |
var rowcls = r.state==='NOT_STARTED' ? 'rowbad' : (r.idleAway?'rowwarn':'');
|
|
|
385 |
var A = r.userId+",'"+js(r.name)+"','"+date+"'"; // openExec args
|
|
|
386 |
var go = 'onclick="openExec('+A+')"';
|
|
|
387 |
h+='<tr class="clickable '+rowcls+'" '+go+'>'+
|
|
|
388 |
'<td style="text-align:center">'+(r.agendaFilled?'<span style="color:#2f9e44;font-size:15px">✓</span>':'<span class="badflag" style="font-size:15px">✗</span>')+'</td>'+
|
|
|
389 |
'<td><b>'+esc(r.name)+'</b><br>'+esc(r.beatName||'-')+'</td>'+
|
|
|
390 |
'<td class="num">'+r.planned+'</td>'+
|
|
|
391 |
'<td style="white-space:nowrap">'+(r.punchInTime?'<span class="ptime">'+esc(r.punchInTime)+'</span>':'<span class="badflag">-</span>')+
|
|
|
392 |
' <span style="color:#97a1b5;font-size:11px">/ '+(r.punchOutTime?esc(r.punchOutTime):'--')+'</span></td>'+
|
| 36877 |
vikas |
393 |
'<td><span class="pill-state '+stateClass(r.state)+'">'+esc(r.stateLabel)+'</span></td>'+
|
| 36897 |
vikas |
394 |
'<td class="num cnt cmuted">'+r.totalVisits+'</td>'+
|
|
|
395 |
'<td class="num cnt cgreen">'+r.completedVisits+'</td>'+
|
|
|
396 |
'<td class="num cnt camber">'+r.pendingVisits+'</td>'+
|
|
|
397 |
'<td class="num cnt cred">'+r.deferred+'</td>'+
|
|
|
398 |
'<td style="white-space:nowrap" onclick="event.stopPropagation()">'+
|
|
|
399 |
'<button class="actbtn map" title="Live location" onclick="openExec('+A+',\'map\')">📍</button>'+
|
|
|
400 |
'<button class="actbtn view" title="Journey detail" onclick="openExec('+A+')">👁</button>'+
|
|
|
401 |
'<button class="actbtn edit" title="Edit beat in Beat Planner" onclick="openPlanner('+r.authUserId+','+(r.beatId||0)+',\''+date+'\',\'edit\')">✎</button>'+
|
|
|
402 |
'<button class="actbtn add" title="Assign / add visit in Beat Planner" onclick="openPlanner('+r.authUserId+','+(r.beatId||0)+',\''+date+'\',\'add\')">+</button>'+
|
|
|
403 |
'</td></tr>';
|
| 36877 |
vikas |
404 |
});
|
| 36897 |
vikas |
405 |
return h+'</tbody></table></div>';
|
| 36877 |
vikas |
406 |
}
|
|
|
407 |
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; }
|
| 36882 |
vikas |
408 |
var ATT_META = {
|
|
|
409 |
notPunchedIn: {bg:'#fff0f0', fg:'#e03131', ic:'⚠', title:'Not punched in', sub:'executives with a beat, not started', cls:'badflag'},
|
| 36897 |
vikas |
410 |
idleStale: {bg:'#fff4e6', fg:'#e8590c', ic:'⏱', title:'Idle — off-store > 40 min', sub:'stationary >20 m from any store', cls:'warnflag'},
|
| 36882 |
vikas |
411 |
geofence: {bg:'#fff0f0', fg:'#e03131', ic:'📍', title:'Check-in outside store geofence', sub:'>50 m from partner\'s saved location', cls:'badflag'},
|
|
|
412 |
locationOff: {bg:'#fff4e6', fg:'#e8590c', ic:'📴', title:'Location turned off mid-journey', sub:'GPS toggled off', cls:'warnflag'},
|
|
|
413 |
deferredAwaiting:{bg:'#eef1f6', fg:'#69748c', ic:'↻', title:'Deferred, awaiting re-action', sub:'shops deferred today', cls:''}
|
|
|
414 |
};
|
| 36877 |
vikas |
415 |
function attentionList(a){
|
| 36882 |
vikas |
416 |
window._att = a;
|
|
|
417 |
var order=['notPunchedIn','idleStale','geofence','locationOff','deferredAwaiting'];
|
| 36877 |
vikas |
418 |
var h='';
|
| 36882 |
vikas |
419 |
order.forEach(function(k){
|
|
|
420 |
var m=ATT_META[k], list=a[k]||[], n=list.length;
|
|
|
421 |
var detail = n ? names(list.map(function(x){return x.name;}),3) : m.sub;
|
|
|
422 |
var cls = n ? ' att clickable' : ' att';
|
|
|
423 |
var click = n ? ' onclick="openAttention(\''+k+'\')"' : '';
|
|
|
424 |
h+='<div class="'+cls.trim()+'"'+click+'><div class="ic" style="background:'+m.bg+';color:'+m.fg+'">'+m.ic+'</div>'+
|
|
|
425 |
'<div class="ab"><div class="atitle">'+m.title+'</div><div class="adet">'+detail+'</div></div>'+
|
|
|
426 |
'<div class="acount '+(n?m.cls:'')+'">'+n+'</div>'+(n?'<span class="chev">▸</span>':'')+'</div>';
|
|
|
427 |
});
|
| 36877 |
vikas |
428 |
return h;
|
|
|
429 |
}
|
| 36882 |
vikas |
430 |
function openAttention(key){
|
|
|
431 |
var a=window._att||{}, list=a[key]||[], m=ATT_META[key]||{title:'Detail'};
|
|
|
432 |
var mb=el('bj-modal-back'), md=el('bj-modal');
|
| 36897 |
vikas |
433 |
// Off-site check-ins can be approved here, but only by L5/Final (canApprove).
|
|
|
434 |
var showApprove = (key==='geofence' && window._canApprove);
|
| 36882 |
vikas |
435 |
var h='<button class="x" onclick="closeModal()">×</button><h3>'+m.title+'</h3>'+
|
| 36897 |
vikas |
436 |
'<p class="desc">'+list.length+' '+(list.length===1?'item':'items')+
|
|
|
437 |
(showApprove?' · approving updates the partner\'s saved coordinates':'')+'</p>';
|
| 36882 |
vikas |
438 |
if(!list.length){ h+='<p class="desc">Nothing here.</p>'; }
|
|
|
439 |
else{
|
|
|
440 |
h+='<table><tbody>';
|
|
|
441 |
list.forEach(function(x){
|
| 36897 |
vikas |
442 |
var act='';
|
|
|
443 |
if(showApprove) act='<td class="num" style="white-space:nowrap">'+(x.trackingId?'<button class="btn-ok" onclick="openValidate('+x.trackingId+')">Validate & Approve</button>':'')+'</td>';
|
| 36882 |
vikas |
444 |
h+='<tr><td style="font-weight:600;white-space:nowrap">'+esc(x.name)+'</td>'+
|
| 36897 |
vikas |
445 |
'<td style="color:#69748c">'+esc(x.detail||'')+'</td>'+act+'</tr>';
|
| 36882 |
vikas |
446 |
});
|
|
|
447 |
h+='</tbody></table>';
|
|
|
448 |
}
|
|
|
449 |
md.innerHTML=h; mb.classList.add('show');
|
|
|
450 |
}
|
| 36897 |
vikas |
451 |
// Step 2: review the check-in photo/document before approving.
|
|
|
452 |
function openValidate(trackingId){
|
|
|
453 |
var list=(window._att&&window._att.geofence)||[], item=null;
|
|
|
454 |
for(var i=0;i<list.length;i++){ if(list[i].trackingId===trackingId){ item=list[i]; break; } }
|
|
|
455 |
if(!item){ return; }
|
|
|
456 |
var img = (item.attachment && window._mediaUrl)
|
| 36903 |
vikas |
457 |
? '<img class="valimg" src="'+esc(window._mediaUrl+item.attachment)+'" onclick="bjOpenImage(this.src)" onerror="this.outerHTML=\'<div class="valph">📷 Photo unavailable</div>\'">'
|
| 36897 |
vikas |
458 |
: '<div class="valph">📷 No photo on this check-in</div>';
|
|
|
459 |
el('bj-modal').innerHTML='<button class="x" onclick="closeModal()">×</button><h3>Validate check-in</h3>'+
|
|
|
460 |
'<p class="desc">'+esc(item.name)+' · '+esc(item.detail||'')+'</p>'+
|
|
|
461 |
'<div class="valwrap">'+img+'</div>'+
|
|
|
462 |
'<div class="valactions">'+
|
|
|
463 |
'<button class="exectab" onclick="openAttention(\'geofence\')">← Back</button>'+
|
|
|
464 |
'<button class="btn-ok" onclick="approveValidated('+trackingId+',this)">Approve</button>'+
|
|
|
465 |
'</div>';
|
|
|
466 |
}
|
|
|
467 |
function approveValidated(trackingId, btn){
|
|
|
468 |
btn.disabled=true; btn.textContent='Approving…';
|
|
|
469 |
fetch(CTX+'/beat-journey/approve-checkin',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'trackingId='+trackingId})
|
|
|
470 |
.then(function(r){ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); })
|
|
|
471 |
.then(function(){
|
|
|
472 |
if(window._att && window._att.geofence){ window._att.geofence = window._att.geofence.filter(function(x){ return x.trackingId!==trackingId; }); }
|
|
|
473 |
if(window._att && window._att.geofence && window._att.geofence.length) openAttention('geofence');
|
|
|
474 |
else closeModal();
|
|
|
475 |
})
|
|
|
476 |
.catch(function(){ btn.disabled=false; btn.textContent='Approve'; alert('Approve failed (not authorised, or server error).'); });
|
|
|
477 |
}
|
| 36877 |
vikas |
478 |
|
|
|
479 |
/* ============================ PERIOD ============================ */
|
|
|
480 |
function loadPeriod(){
|
|
|
481 |
spinner();
|
|
|
482 |
var u = BASE + '/data?startDate=' + encodeURIComponent(el('bj-start').value) + '&endDate=' + encodeURIComponent(el('bj-end').value) + qs();
|
|
|
483 |
fetch(u, {headers:{'Accept':'application/json'}})
|
|
|
484 |
.then(function(r){ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); })
|
|
|
485 |
.then(renderPeriod).catch(fail);
|
|
|
486 |
}
|
|
|
487 |
function tile(t,v){ return '<div class="tile"><div class="t">'+t+'</div><div class="v">'+v+'</div></div>'; }
|
|
|
488 |
function renderPeriod(d){
|
|
|
489 |
var k=d.kpis, f=d.funnel, df=d.deferral, u=d.utilization, t=d.travel, o=d.outcomes;
|
|
|
490 |
var neverTouched = Math.max((f.plannedStops||0)-(f.checkedIn||0)-(df.total||0),0);
|
|
|
491 |
var h='';
|
|
|
492 |
h+='<div class="kpis">';
|
|
|
493 |
h+=kpi('⚖','#fff4e6','#f08c00','Adherence',k.adherencePct+'<small>%</small>',num(k.doneStops)+' of '+num(k.plannedStops)+' stops done',adhColor(k.adherencePct));
|
|
|
494 |
h+=kpi('🗺','#e7f5ff','#1098ad','PJP coverage L1',k.coverageL1Pct+'<small>%</small>',k.coverageL1With+'/'+k.coverageL1Total+' have a plan','#1098ad');
|
|
|
495 |
h+=kpi('🚶','#ebfbee','#2f9e44','Visits / active day',k.avgVisitsPerActiveDay,'across '+num(k.journeys)+' journeys');
|
|
|
496 |
h+=kpi('💬','#eef1fb','#3b5bdb','Discussion / store',k.avgDiscussionMin+' <small>min</small>','target 30–45 min', k.avgDiscussionMin>0&&k.avgDiscussionMin<30?'#e8590c':null);
|
|
|
497 |
h+=kpi('↻','#fff0f0','#e03131','Auto "missed"',num(k.autoMissed),k.autoMissedSystemPct+'% system-flagged','#e03131');
|
|
|
498 |
h+=kpi('★','#fff0f6','#d6336c','Leads on route',num(k.leadsCreated),'this period');
|
|
|
499 |
h+='</div>';
|
|
|
500 |
|
|
|
501 |
h+='<div class="sectionlabel">Aggregate Journey Funnel</div><div class="card"><div class="funnel">';
|
|
|
502 |
var pl=f.plannedStops||1;
|
|
|
503 |
h+=fstep('Planned stops',f.plannedStops,100,'scheduled',false,false);
|
|
|
504 |
h+=fstep('Days punched in',f.punchedIn,pct(f.punchedIn,pl),'−'+f.dropPunch+'% no punch-in',true,false);
|
|
|
505 |
h+=fstep('Checked in',f.checkedIn,pct(f.checkedIn,pl),'−'+f.dropCheckin+'% reached, skipped',true,false);
|
|
|
506 |
h+=fstep('Checked out (done)',f.checkedOut,pct(f.checkedOut,pl),'−'+f.dropCheckout+'% no checkout',false,true);
|
|
|
507 |
h+='</div><div class="leak">';
|
|
|
508 |
h+=leakbox('Deferred — genuine',df.human,'#2f9e44');
|
|
|
509 |
h+=leakbox('Deferred — system flag',df.systemGenerated,'#f08c00');
|
|
|
510 |
h+=leakbox('Heads acted on',df.actioned,null);
|
|
|
511 |
h+=leakbox('Never touched',neverTouched,'#e03131');
|
|
|
512 |
h+='</div></div>';
|
|
|
513 |
|
|
|
514 |
h+='<div class="sectionlabel">Adherence & Coverage</div><div class="grid g3">';
|
|
|
515 |
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>';
|
|
|
516 |
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>';
|
|
|
517 |
h+='</div>';
|
|
|
518 |
|
|
|
519 |
h+='<div class="sectionlabel">Deferrals, Travel & Outcomes</div><div class="grid g2">';
|
|
|
520 |
h+='<div class="card"><h2>Deferral nature</h2><p class="desc">Deliberate, or just auto-flagged missed beats?</p>'+deferDonut(df)+'</div>';
|
|
|
521 |
h+='<div class="card"><h2>Travel & route quality</h2><p class="desc">Straight-line distance per leg between consecutive stops.</p>'+travelBlock(t)+'</div>';
|
|
|
522 |
h+='</div>';
|
|
|
523 |
|
|
|
524 |
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>'+
|
|
|
525 |
'<div class="tiles" style="grid-template-columns:repeat(4,1fr)">'+
|
|
|
526 |
tile('Partner remark filled', o.remarkFilledPct+'<small>%</small>')+
|
|
|
527 |
tile('Avg partner rating', (o.avgRating||0)+'<small>/5</small>')+
|
|
|
528 |
tile('Audit checklist done', o.auditDonePct+'<small>%</small>')+
|
|
|
529 |
tile('Next-visit follow-up set', o.nextVisitPct+'<small>%</small>')+
|
|
|
530 |
'</div></div>';
|
|
|
531 |
|
|
|
532 |
h+='<div class="sectionlabel">What to fix</div>'+findingsBlock(d.findings);
|
|
|
533 |
h+=sourcesCard();
|
|
|
534 |
el('bj-content').innerHTML=h;
|
|
|
535 |
window._scorecard = d.scorecard;
|
|
|
536 |
}
|
|
|
537 |
var sortKey=null, sortAsc=false;
|
|
|
538 |
function sortCard(key){
|
|
|
539 |
if(sortKey===key) sortAsc=!sortAsc; else { sortKey=key; sortAsc=false; }
|
|
|
540 |
window._scorecard.sort(function(a,b){ var x=a[key],y=b[key];
|
|
|
541 |
if(typeof x==='string') return sortAsc? (''+x).localeCompare(y):(''+y).localeCompare(x);
|
|
|
542 |
return sortAsc? x-y : y-x; });
|
|
|
543 |
document.getElementById('scTbl').outerHTML = scorecardTable(window._scorecard);
|
|
|
544 |
}
|
|
|
545 |
function scorecardTable(rows){
|
|
|
546 |
if(!rows||!rows.length) return '<p class="desc">No beat owners in scope for this period.</p>';
|
|
|
547 |
var h='<table id="scTbl"><thead><tr>'+
|
|
|
548 |
'<th onclick="sortCard(\'name\')">Executive</th>'+
|
|
|
549 |
'<th class="num" onclick="sortCard(\'planned\')">Plan</th>'+
|
|
|
550 |
'<th class="num" onclick="sortCard(\'done\')">Done</th>'+
|
|
|
551 |
'<th class="num" onclick="sortCard(\'adherencePct\')">Adher.</th>'+
|
|
|
552 |
'<th class="num" onclick="sortCard(\'discussionMin\')">Disc.</th>'+
|
|
|
553 |
'<th class="num" onclick="sortCard(\'workingHrs\')">Hrs</th>'+
|
|
|
554 |
'<th class="num" onclick="sortCard(\'leads\')">Leads</th>'+
|
|
|
555 |
'<th class="num" onclick="sortCard(\'geoFlags\')">Geo⚠</th></tr></thead><tbody>';
|
|
|
556 |
rows.forEach(function(r){
|
|
|
557 |
var c=adhColor(r.adherencePct);
|
|
|
558 |
h+='<tr><td>'+esc(r.name)+' <span class="lvl">'+esc(r.level)+'</span></td>'+
|
|
|
559 |
'<td class="num">'+r.planned+'</td><td class="num">'+r.done+'</td>'+
|
|
|
560 |
'<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>'+
|
| 36882 |
vikas |
561 |
'<td class="num'+(r.discussionMin>0&&r.discussionMin<10?' warnflag':'')+'">'+(r.discussionMin||'-')+(r.discussionMin?'m':'')+'</td>'+
|
| 36877 |
vikas |
562 |
'<td class="num">'+r.workingHrs+'</td><td class="num">'+r.leads+'</td>'+
|
|
|
563 |
'<td class="num'+(r.geoFlags>0?' badflag':'')+'">'+r.geoFlags+'</td></tr>';
|
|
|
564 |
});
|
|
|
565 |
return h+'</tbody></table>';
|
|
|
566 |
}
|
|
|
567 |
function coverageBars(rows){
|
|
|
568 |
if(!rows||!rows.length) return '<p class="desc">No coverage data.</p>';
|
|
|
569 |
var max=0; rows.forEach(function(r){ if(r.totalUsers>max)max=r.totalUsers; }); if(!max)max=1;
|
|
|
570 |
var h=''; rows.forEach(function(r){
|
|
|
571 |
var w=pct(r.withPjp,max), wt=pct(r.totalUsers,max);
|
|
|
572 |
h+='<div class="barrow"><div class="name">'+esc(r.level)+'</div><div class="track">'+
|
|
|
573 |
'<div style="position:absolute;inset:0;width:'+wt+'%;background:#e3e8f5;border-radius:7px"></div>'+
|
|
|
574 |
'<div class="fill" style="width:'+w+'%;position:relative;background:linear-gradient(90deg,#1098ad,#22b8cf)">'+(r.withPjp||'')+'</div></div>'+
|
|
|
575 |
'<div class="meta">'+r.withPjp+'/'+r.totalUsers+' · '+r.coveragePct+'%</div></div>';
|
|
|
576 |
});
|
|
|
577 |
return h;
|
|
|
578 |
}
|
|
|
579 |
function utilBlock(u){
|
|
|
580 |
return '<h2 style="margin-top:18px">Working-hour utilization</h2><p class="desc">Where the average working day goes.</p>'+
|
|
|
581 |
'<div class="util">'+
|
|
|
582 |
'<div style="width:'+u.inStorePct+'%;background:#2f9e44">In-store '+u.inStorePct+'%</div>'+
|
|
|
583 |
'<div style="width:'+u.travelPct+'%;background:#3b5bdb">Travel '+u.travelPct+'%</div>'+
|
|
|
584 |
'<div style="width:'+u.idlePct+'%;background:#e03131">Idle '+u.idlePct+'%</div></div>'+
|
|
|
585 |
'<div class="utlegend"><span><span class="dot" style="background:#2f9e44;margin:0"></span>Selling '+u.inStoreHrs+' h</span>'+
|
|
|
586 |
'<span><span class="dot" style="background:#3b5bdb;margin:0"></span>Travel '+u.travelHrs+' h</span>'+
|
|
|
587 |
'<span><span class="dot" style="background:#e03131;margin:0"></span>Idle '+u.idleHrs+' h</span></div>';
|
|
|
588 |
}
|
|
|
589 |
function deferDonut(df){
|
|
|
590 |
var sysPct=df.systemPct||0;
|
|
|
591 |
var g='conic-gradient(#f59f00 0 '+sysPct+'%, #2f9e44 '+sysPct+'% 100%)';
|
|
|
592 |
return '<div class="donutwrap"><div class="donut" style="background:'+g+'"><div class="center">'+
|
|
|
593 |
'<div style="font-size:24px;font-weight:780">'+num(df.total)+'</div><div style="font-size:11px;color:#97a1b5">deferrals</div></div></div>'+
|
|
|
594 |
'<div class="legend">'+
|
|
|
595 |
'<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>'+
|
|
|
596 |
'<div class="it"><span class="dot" style="background:#2f9e44"></span><div><b>'+df.human+'</b> genuine reason ('+df.humanPct+'%)</div></div>'+
|
|
|
597 |
'<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>'+
|
|
|
598 |
'</div></div><p class="desc" style="margin-top:13px">"System" vs "genuine" is read from the deferral reason; there is no separate flag.</p>';
|
|
|
599 |
}
|
|
|
600 |
function travelBlock(t){
|
|
|
601 |
var rows=t.legBuckets||[], max=0; rows.forEach(function(r){ if(r.count>max)max=r.count; }); if(!max)max=1;
|
|
|
602 |
var colors={'0-2 km':'#2f9e44','2-5 km':'#2f9e44','5-15 km':'#82c91e','15-50 km':'#f59f00','50 km+':'#e03131'};
|
|
|
603 |
var h=''; rows.forEach(function(r){
|
|
|
604 |
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>';
|
|
|
605 |
});
|
|
|
606 |
h+='<div class="tiles" style="margin-top:14px">'+
|
|
|
607 |
tile('Avg leg', t.avgLegKm+'<small> km</small>')+
|
|
|
608 |
tile('Legs > 15 km', t.pctOver15+'<small>%</small>')+
|
|
|
609 |
tile('Actual / estimate', (t.actualVsEstimateRatio||0)+'<small>×</small>')+'</div>';
|
|
|
610 |
return h;
|
|
|
611 |
}
|
|
|
612 |
function findingsBlock(items){
|
|
|
613 |
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>';
|
|
|
614 |
var sev={high:'#e03131',med:'#f59f00',low:'#2f9e44'};
|
|
|
615 |
var h='<div class="callout"><h2>Recommended management actions</h2><p class="desc">Generated from this period\'s data.</p>';
|
|
|
616 |
items.forEach(function(x){
|
|
|
617 |
h+='<div class="fix"><div class="sev" style="background:'+(sev[x.severity]||'#3b5bdb')+'"></div><div class="fb">'+
|
|
|
618 |
'<div class="ft">'+esc(x.title)+'</div><div class="fd">'+esc(x.detail)+'</div>'+
|
|
|
619 |
'<div class="act">→ '+esc(x.action)+'</div></div></div>';
|
|
|
620 |
});
|
|
|
621 |
return h+'</div>';
|
|
|
622 |
}
|
|
|
623 |
function sourcesCard(){
|
|
|
624 |
return '<div class="sectionlabel">Where the numbers come from</div><div class="card">'+
|
|
|
625 |
'<p class="desc">Nothing new needs to be captured — everything here is built from what the field app already records on each journey.</p>'+
|
|
|
626 |
'<ul style="margin:0;padding-left:18px;line-height:1.95;font-size:13px;color:#3a4459">'+
|
|
|
627 |
'<li>The <b>journey timeline</b> (punch-in, check-ins/outs, deferrals, punch-out) comes from what the executive taps in the app.</li>'+
|
|
|
628 |
'<li><b>Adherence</b> compares the partners planned on each beat against the stores actually visited.</li>'+
|
|
|
629 |
'<li><b>Time, travel and distance</b> use the in-store and travel durations logged per visit.</li>'+
|
|
|
630 |
'<li><b>Geofence / fake-visit checks</b> compare the check-in GPS against the partner\'s saved shop location (flagged beyond ~50 m).</li>'+
|
|
|
631 |
'<li><b>Visit outcomes</b> (remarks, rating, audit, next visit) come from the check-out form.</li>'+
|
|
|
632 |
'<li><b>Coverage and the manager view</b> follow the existing L1–L5 sales hierarchy, so each manager sees only their team.</li>'+
|
|
|
633 |
'</ul></div>';
|
|
|
634 |
}
|
|
|
635 |
|
|
|
636 |
/* ============================ EXEC DRILLDOWN ============================ */
|
| 36897 |
vikas |
637 |
function openExec(userId, name, date, tab){
|
| 36877 |
vikas |
638 |
if(!userId){ return; }
|
| 36897 |
vikas |
639 |
window._exec = {userId:userId, name:name, date:date, detail:null, tab:(tab||'timeline')};
|
| 36877 |
vikas |
640 |
var mb=el('bj-modal-back'), m=el('bj-modal');
|
|
|
641 |
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>';
|
|
|
642 |
mb.classList.add('show');
|
| 36882 |
vikas |
643 |
fetch(CTX+'/beat-journey/journey-detail?userId='+userId+'&date='+encodeURIComponent(date),{headers:{'Accept':'application/json'}})
|
| 36877 |
vikas |
644 |
.then(function(r){ return r.json(); }).then(function(d){
|
| 36882 |
vikas |
645 |
window._mediaUrl = d.mediaUrl || '';
|
| 36897 |
vikas |
646 |
window._exec.detail = d;
|
|
|
647 |
renderExec(window._exec.tab);
|
|
|
648 |
}).catch(function(){ el('bj-modal').innerHTML='<button class="x" onclick="closeModal()">×</button><p class="desc">Could not load detail.</p>'; });
|
|
|
649 |
}
|
|
|
650 |
function renderExec(tab){
|
|
|
651 |
var ex=window._exec; if(!ex) return;
|
|
|
652 |
var d=ex.detail||{};
|
|
|
653 |
var head='<button class="x" onclick="closeModal()">×</button><h3>'+esc(ex.name)+'</h3>'+
|
|
|
654 |
'<p class="desc">Journey detail · '+esc(ex.date)+' · battery '+(d.batteryLevel==null?'-':d.batteryLevel+'%')+' · loc-off '+(d.locationToggleCount||0)+'</p>'+
|
|
|
655 |
'<div class="exectabs">'+
|
|
|
656 |
'<button class="exectab'+(tab==='timeline'?' active':'')+'" onclick="renderExec(\'timeline\')">📝 Timeline</button>'+
|
|
|
657 |
'<button class="exectab'+(tab==='map'?' active':'')+'" onclick="renderExec(\'map\')">📍 Live Location</button>'+
|
|
|
658 |
'</div>';
|
|
|
659 |
if(tab==='map'){
|
| 36903 |
vikas |
660 |
el('bj-modal').innerHTML=head+'<div id="bjRouteLegend" class="bjlegend"></div>'+
|
|
|
661 |
'<div id="bjMap"><div class="loading"><div class="spinner"></div>Loading map…</div></div>';
|
| 36897 |
vikas |
662 |
bjShowMap(ex.userId, ex.date);
|
|
|
663 |
} else {
|
|
|
664 |
el('bj-modal').innerHTML=head+buildTimelineHtml(d, ex.date);
|
|
|
665 |
}
|
|
|
666 |
}
|
|
|
667 |
function buildTimelineHtml(d, date){
|
|
|
668 |
var all=(d.visits||[]).slice();
|
|
|
669 |
// Sequence like the field report: Punch in -> visited stops (by check-in time)
|
|
|
670 |
// -> PENDING/not-visited -> Punch out. The attendance row carries both punch-in
|
|
|
671 |
// & punch-out times; split it into the two bookends.
|
|
|
672 |
var att=null, visited=[], pending=[];
|
|
|
673 |
all.forEach(function(x){
|
|
|
674 |
var tt=(x.taskType||'').toLowerCase(), mt=(x.markType||'').toUpperCase();
|
|
|
675 |
if(tt==='attendance' || mt.indexOf('PUNCH')>=0){ if(!att) att=x; }
|
|
|
676 |
else if(x.checkInTime){ visited.push(x); }
|
|
|
677 |
else { pending.push(x); }
|
|
|
678 |
});
|
|
|
679 |
visited.sort(function(a,b){ return tlSecs(a.checkInTime)-tlSecs(b.checkInTime); });
|
| 36882 |
vikas |
680 |
|
| 36903 |
vikas |
681 |
var distKm=0, inStoreSec=0, leadsN=0;
|
| 36897 |
vikas |
682 |
all.forEach(function(x){
|
|
|
683 |
var tt=(x.taskType||'').toLowerCase();
|
|
|
684 |
if(tt==='attendance') return;
|
|
|
685 |
if(x.totalDistance) distKm += (parseFloat(x.totalDistance)||0);
|
|
|
686 |
inStoreSec += toSec(x.timeSpent);
|
|
|
687 |
if(tt==='lead') leadsN++;
|
|
|
688 |
});
|
|
|
689 |
var workSec = (att && att.checkInTime && att.checkOutTime) ? (toSec(att.checkOutTime)-toSec(att.checkInTime)) : (att?toSec(att.timeSpent):0);
|
|
|
690 |
if(workSec<0) workSec=0;
|
| 36903 |
vikas |
691 |
// Travel = working − in-store, so In-store + Travel = Working hours exactly
|
|
|
692 |
// (summing per-leg transit under-counts the idle/waiting between stops).
|
|
|
693 |
var transitSec = Math.max(0, workSec - inStoreSec);
|
| 36882 |
vikas |
694 |
|
| 36897 |
vikas |
695 |
var seq=[];
|
|
|
696 |
if(att && att.checkInTime) seq.push(punchEntry('in', att.checkInTime));
|
|
|
697 |
visited.forEach(function(x){ seq.push(x); });
|
|
|
698 |
pending.forEach(function(x){ seq.push(x); });
|
|
|
699 |
if(att && att.checkOutTime) seq.push(punchEntry('out', att.checkOutTime));
|
| 36882 |
vikas |
700 |
|
| 36897 |
vikas |
701 |
var h='<div class="jstats">'+
|
|
|
702 |
jstat(fmtSec(workSec),'Working hours')+
|
|
|
703 |
jstat(fmtSec(inStoreSec),'In-store time')+
|
|
|
704 |
jstat(fmtSec(transitSec),'Travel time')+
|
|
|
705 |
jstat(distKm.toFixed(2)+' km','Distance Covered')+
|
|
|
706 |
jstat(visited.length+(leadsN?' · '+leadsN+'L':''),'Stores / Leads')+
|
|
|
707 |
'</div>';
|
|
|
708 |
if(!seq.length){ return h+'<p class="desc">No tracking events for this day.</p>'; }
|
|
|
709 |
h+='<div class="tl">';
|
|
|
710 |
var ri=0;
|
|
|
711 |
seq.forEach(function(x){
|
|
|
712 |
if(!x._punch && x.checkInTime){
|
|
|
713 |
var tr=(x.transitTime && x.transitTime!=='00:00:00') ? x.transitTime : null;
|
|
|
714 |
var km=(x.totalDistance && parseFloat(x.totalDistance)>0) ? (parseFloat(x.totalDistance).toFixed(2)+' km') : null;
|
|
|
715 |
if(tr || km){
|
|
|
716 |
var parts=[]; if(tr) parts.push('🚗 '+esc(tr)); if(km) parts.push(esc(km));
|
|
|
717 |
h+='<div class="tlgap"><span class="gappill">'+parts.join(' · ')+'</span></div>';
|
| 36877 |
vikas |
718 |
}
|
| 36897 |
vikas |
719 |
}
|
|
|
720 |
h+=tlRow(x, ri%2===0?'left':'right'); ri++;
|
|
|
721 |
});
|
|
|
722 |
h+='</div>';
|
|
|
723 |
return h;
|
| 36877 |
vikas |
724 |
}
|
| 36897 |
vikas |
725 |
|
|
|
726 |
/* ---- live location map (reuses /beat-report/live-tracking pathPoints) ---- */
|
|
|
727 |
function bjLoadMaps(cb){
|
|
|
728 |
if(window.google && window.google.maps){ cb(); return; }
|
|
|
729 |
window._mapsCbs = window._mapsCbs || [];
|
|
|
730 |
window._mapsCbs.push(cb);
|
|
|
731 |
if(window._mapsLoading) return;
|
|
|
732 |
window._mapsLoading=true;
|
|
|
733 |
window.__bjMapsReady=function(){ (window._mapsCbs||[]).forEach(function(f){ try{f();}catch(e){} }); window._mapsCbs=[]; };
|
|
|
734 |
var s=document.createElement('script');
|
|
|
735 |
s.src='https://maps.googleapis.com/maps/api/js?key=AIzaSyAckO0y4Z6WhBOuMjNjioWLSYZDhGEvGBc&libraries=geometry&v=weekly&callback=__bjMapsReady';
|
|
|
736 |
s.async=true; document.head.appendChild(s);
|
|
|
737 |
}
|
|
|
738 |
function bjShowMap(userId, date){
|
|
|
739 |
bjLoadMaps(function(){
|
|
|
740 |
fetch(CTX+'/beat-journey/track-map?userId='+userId+'&date='+encodeURIComponent(date),{headers:{'Accept':'application/json'}})
|
|
|
741 |
.then(function(r){ return r.json(); }).then(function(data){ bjDrawMap(data); })
|
|
|
742 |
.catch(function(){ var e=document.getElementById('bjMap'); if(e) e.innerHTML='<div class="loading">Could not load location.</div>'; });
|
|
|
743 |
});
|
|
|
744 |
}
|
|
|
745 |
function bjMarkColor(mt){
|
|
|
746 |
mt=(mt||'').toUpperCase();
|
|
|
747 |
if(mt.indexOf('CHECKOUT')>=0) return '#2f9e44';
|
|
|
748 |
if(mt==='CHECKIN') return '#f59f00';
|
|
|
749 |
if(mt==='DEFERRED') return '#e8590c';
|
|
|
750 |
if(mt==='PENDING') return '#97a1b5';
|
|
|
751 |
return '#3b5bdb';
|
|
|
752 |
}
|
|
|
753 |
function bjMarkInfo(v,color){
|
|
|
754 |
return '<div style="font-size:12px;max-width:240px"><b>'+esc(v.name||'')+'</b><br>'+
|
|
|
755 |
'<span style="background:'+color+';color:#fff;border-radius:4px;padding:1px 6px;font-size:10px">'+esc(v.markType||'')+'</span>'+
|
|
|
756 |
(v.checkInTime?'<br>In: <b>'+esc(v.checkInTime)+'</b>':'')+
|
|
|
757 |
(v.checkOutTime?'<br>Out: <b>'+esc(v.checkOutTime)+'</b>':'')+
|
|
|
758 |
(v.timeSpent?'<br>Time spent: <b>'+esc(v.timeSpent)+'</b>':'')+
|
|
|
759 |
(v.address?'<br>'+esc(v.address):'')+'</div>';
|
|
|
760 |
}
|
|
|
761 |
// Teardrop pin (same shape as Beat Report) with a white disc + label.
|
|
|
762 |
function bjPin(color, label){
|
|
|
763 |
var svg='<svg xmlns="http://www.w3.org/2000/svg" width="28" height="40" viewBox="0 0 28 40">'+
|
|
|
764 |
'<path d="M14 0C6.268 0 0 6.268 0 14c0 10.5 14 26 14 26s14-15.5 14-26C28 6.268 21.732 0 14 0z" fill="'+color+'"/>'+
|
|
|
765 |
'<circle cx="14" cy="14" r="7" fill="#ffffff"/>'+
|
|
|
766 |
'<text x="14" y="18" text-anchor="middle" font-size="10" font-weight="bold" fill="'+color+'">'+label+'</text></svg>';
|
|
|
767 |
return {url:'data:image/svg+xml;charset=UTF-8,'+encodeURIComponent(svg), scaledSize:new google.maps.Size(28,40), anchor:new google.maps.Point(14,40)};
|
|
|
768 |
}
|
|
|
769 |
// Larger pin sized to fit a duration label (idle stops).
|
|
|
770 |
function bjStopPin(label){
|
|
|
771 |
var s=String(label), d=Math.max(40, 14+s.length*7), H=d+10, r=d/2;
|
|
|
772 |
var svg='<svg xmlns="http://www.w3.org/2000/svg" width="'+d+'" height="'+H+'" viewBox="0 0 '+d+' '+H+'">'+
|
|
|
773 |
'<polygon points="'+(r-7)+','+(d-7)+' '+(r+7)+','+(d-7)+' '+r+','+H+'" fill="#e8590c"/>'+
|
|
|
774 |
'<circle cx="'+r+'" cy="'+r+'" r="'+(r-2)+'" fill="#e8590c" stroke="#ffffff" stroke-width="2"/>'+
|
|
|
775 |
'<text x="'+r+'" y="'+(r+4)+'" text-anchor="middle" font-size="12" font-weight="bold" fill="#ffffff">'+s+'</text></svg>';
|
|
|
776 |
return {url:'data:image/svg+xml;charset=UTF-8,'+encodeURIComponent(svg), scaledSize:new google.maps.Size(d,H), anchor:new google.maps.Point(r,H)};
|
|
|
777 |
}
|
|
|
778 |
function fmtDur2(sec){ sec=sec||0; var m=Math.floor(sec/60), s=sec%60; return m+'m'+(s>0?' '+s+'s':''); }
|
|
|
779 |
function bjDrawMap(data){
|
|
|
780 |
var box=document.getElementById('bjMap'); if(!box) return;
|
|
|
781 |
box.innerHTML='';
|
|
|
782 |
var map=new google.maps.Map(box,{zoom:12,center:{lat:20.5937,lng:78.9629},mapTypeControl:true,streetViewControl:false});
|
|
|
783 |
var bounds=new google.maps.LatLngBounds(), has=false;
|
|
|
784 |
function pin(pos,icon,zi,title,info){
|
|
|
785 |
has=true; bounds.extend(pos);
|
|
|
786 |
var m=new google.maps.Marker({position:pos,map:map,zIndex:zi||100,icon:icon,title:title||''});
|
|
|
787 |
if(info){ var iw=new google.maps.InfoWindow({content:info}); m.addListener('click',function(){ iw.open(map,m); }); }
|
|
|
788 |
return m;
|
|
|
789 |
}
|
|
|
790 |
|
| 36903 |
vikas |
791 |
// 1) last-known location marker (the GPS trail itself is drawn as the "taken"
|
|
|
792 |
// route in bjDrawRoutes, straight from location_tracking_path).
|
| 36897 |
vikas |
793 |
var pts=(data.path||[]).map(function(p){ return {lat:p.lat,lng:p.lng}; });
|
|
|
794 |
if(pts.length){
|
|
|
795 |
pts.forEach(function(p){ bounds.extend(p); has=true; });
|
|
|
796 |
var lastPt=pts[pts.length-1];
|
|
|
797 |
var lk=new google.maps.Marker({position:lastPt,map:map,zIndex:999,title:'Last Known Location',
|
|
|
798 |
icon:{url:CTX+'/resources/images/salesman.png',scaledSize:new google.maps.Size(40,40),anchor:new google.maps.Point(20,20)}});
|
|
|
799 |
var lkIw=new google.maps.InfoWindow({content:'<div style="font-size:12px"><b>📍 Last known location</b></div>'});
|
|
|
800 |
lk.addListener('click',function(){ lkIw.open(map,lk); });
|
|
|
801 |
}
|
|
|
802 |
|
|
|
803 |
// 2) idle stops (>=10 min within 50 m)
|
|
|
804 |
(data.idleStops||[]).forEach(function(s){
|
|
|
805 |
var lbl=fmtDur2(s.seconds);
|
|
|
806 |
pin({lat:s.lat,lng:s.lng}, bjStopPin(lbl), 80, 'Idle '+lbl,
|
|
|
807 |
'<div style="font-size:12px"><b>⏱ Idle stop</b><br>Stayed ~'+esc(lbl)+' within 50 m</div>');
|
|
|
808 |
});
|
|
|
809 |
|
|
|
810 |
// 3) every visit
|
|
|
811 |
var idx=0;
|
|
|
812 |
(data.visits||[]).forEach(function(v){
|
|
|
813 |
var color=bjMarkColor(v.markType);
|
|
|
814 |
pin({lat:v.lat,lng:v.lng}, bjPin(color, String(++idx)), 100,
|
|
|
815 |
(v.name||'')+' ('+v.markType+')', bjMarkInfo(v,color));
|
|
|
816 |
});
|
|
|
817 |
|
|
|
818 |
// 4) punch in / punch out
|
|
|
819 |
if(data.punchIn){
|
|
|
820 |
pin({lat:data.punchIn.lat,lng:data.punchIn.lng}, bjPin('#2f9e44','P'), 300,
|
|
|
821 |
'Punch in'+(data.punchIn.time?' · '+data.punchIn.time:''),
|
|
|
822 |
'<div style="font-size:12px"><b>⚑ Punch in</b>'+(data.punchIn.time?'<br>'+esc(data.punchIn.time):'')+'</div>');
|
|
|
823 |
}
|
|
|
824 |
if(data.punchOut){
|
|
|
825 |
pin({lat:data.punchOut.lat,lng:data.punchOut.lng}, bjPin('#7048e8','X'), 300,
|
|
|
826 |
'Punch out'+(data.punchOut.time?' · '+data.punchOut.time:''),
|
|
|
827 |
'<div style="font-size:12px"><b>⚑ Punch out</b>'+(data.punchOut.time?'<br>'+esc(data.punchOut.time):'')+'</div>');
|
|
|
828 |
}
|
|
|
829 |
|
| 36903 |
vikas |
830 |
// 5) routes — actual road taken vs Google-suggested optimal, for comparison.
|
|
|
831 |
// Checkpoints in journey order: punch in → visits (by check-in time) → punch out.
|
|
|
832 |
var cps=[];
|
|
|
833 |
if(data.punchIn) cps.push({lat:data.punchIn.lat,lng:data.punchIn.lng});
|
|
|
834 |
(data.visits||[]).slice()
|
|
|
835 |
.filter(function(v){ return v.lat && v.lng; })
|
|
|
836 |
.sort(function(a,b){ return tlSecs(a.checkInTime)-tlSecs(b.checkInTime); })
|
|
|
837 |
.forEach(function(v){ cps.push({lat:v.lat,lng:v.lng}); });
|
|
|
838 |
if(data.punchOut) cps.push({lat:data.punchOut.lat,lng:data.punchOut.lng});
|
|
|
839 |
bjDrawRoutes(map, cps, pts);
|
|
|
840 |
|
| 36897 |
vikas |
841 |
if(has){
|
|
|
842 |
map.fitBounds(bounds);
|
|
|
843 |
google.maps.event.addListenerOnce(map,'idle',function(){ if(map.getZoom()>16) map.setZoom(16); });
|
|
|
844 |
} else {
|
|
|
845 |
box.innerHTML='<div class="loading">No GPS / location recorded for this day.</div>';
|
|
|
846 |
}
|
|
|
847 |
}
|
| 36903 |
vikas |
848 |
// TAKEN route = the recorded GPS trail (location_tracking_path) routed along the
|
|
|
849 |
// road network so it follows actual roads rather than straight hops between sparse
|
|
|
850 |
// pings. SUGGESTED route = the Google-optimal road route through the journey's
|
|
|
851 |
// checkpoints (green dotted). Both are drawn and compared by distance.
|
|
|
852 |
function bjDrawRoutes(map, cps, pathPts){
|
|
|
853 |
var legend=bjRouteLegend();
|
|
|
854 |
|
|
|
855 |
// taken — road route traced through the recorded breadcrumb (in order)
|
|
|
856 |
if(pathPts && pathPts.length>=2){
|
|
|
857 |
var ds1=new google.maps.DirectionsService();
|
|
|
858 |
var sample=bjSample(pathPts, 25); // Directions cap: 25 incl. ends
|
|
|
859 |
var o=sample[0], d=sample[sample.length-1];
|
|
|
860 |
var vias=sample.slice(1,-1).map(function(p){ return {location:new google.maps.LatLng(p.lat,p.lng), stopover:false}; });
|
|
|
861 |
bjRouteRequest(ds1, o, d, vias, false, function(res){
|
|
|
862 |
bjRenderRoute(map, res, {color:'#e03131', dashed:false, z:55});
|
|
|
863 |
legend.set('taken', bjRouteKm(res));
|
|
|
864 |
}, function(status){
|
|
|
865 |
console.warn('Directions (taken) failed:', status);
|
|
|
866 |
// fallback: plot the raw breadcrumb (straight hops) and measure along it
|
|
|
867 |
new google.maps.Polyline({path:pathPts,geodesic:false,strokeColor:'#e03131',strokeOpacity:.9,strokeWeight:4,zIndex:55,map:map});
|
|
|
868 |
var ll=pathPts.map(function(p){ return new google.maps.LatLng(p.lat,p.lng); });
|
|
|
869 |
legend.set('taken', google.maps.geometry.spherical.computeLength(ll)/1000);
|
|
|
870 |
});
|
|
|
871 |
} else {
|
|
|
872 |
legend.set('taken', false);
|
|
|
873 |
}
|
|
|
874 |
|
|
|
875 |
// suggested — Google-optimal route through punch-in → visits → punch-out
|
|
|
876 |
if(cps.length>=2){
|
|
|
877 |
var ds=new google.maps.DirectionsService();
|
|
|
878 |
var origin=cps[0], dest=cps[cps.length-1], mids=cps.slice(1,-1), capped=false;
|
|
|
879 |
if(mids.length>23){ mids=mids.slice(0,23); capped=true; } // Directions allows 23 waypoints
|
|
|
880 |
var wpts=mids.map(function(p){ return {location:new google.maps.LatLng(p.lat,p.lng), stopover:true}; });
|
|
|
881 |
bjRouteRequest(ds, origin, dest, wpts, true, function(res){
|
|
|
882 |
bjRenderRoute(map, res, {color:'#2f9e44', dashed:true, z:50});
|
|
|
883 |
legend.set('suggested', bjRouteKm(res));
|
|
|
884 |
}, function(status){ console.warn('Directions (suggested) failed:', status); legend.set('suggested', false); });
|
|
|
885 |
if(capped) legend.note('Suggested route limited to first 23 stops');
|
|
|
886 |
} else {
|
|
|
887 |
legend.set('suggested', false);
|
|
|
888 |
}
|
|
|
889 |
}
|
|
|
890 |
// Evenly downsample a list to at most `max` items, always keeping first and last.
|
|
|
891 |
function bjSample(arr, max){
|
|
|
892 |
if(arr.length<=max) return arr.slice();
|
|
|
893 |
var out=[], step=(arr.length-1)/(max-1);
|
|
|
894 |
for(var i=0;i<max;i++) out.push(arr[Math.round(i*step)]);
|
|
|
895 |
return out;
|
|
|
896 |
}
|
|
|
897 |
function bjRouteRequest(ds, origin, dest, wpts, optimize, ok, err){
|
|
|
898 |
ds.route({
|
|
|
899 |
origin:new google.maps.LatLng(origin.lat,origin.lng),
|
|
|
900 |
destination:new google.maps.LatLng(dest.lat,dest.lng),
|
|
|
901 |
waypoints:wpts, optimizeWaypoints:optimize,
|
|
|
902 |
travelMode:google.maps.TravelMode.DRIVING
|
|
|
903 |
}, function(res, status){
|
|
|
904 |
if(status===google.maps.DirectionsStatus.OK && res && res.routes && res.routes.length) ok(res);
|
|
|
905 |
else err(status);
|
|
|
906 |
});
|
|
|
907 |
}
|
|
|
908 |
function bjRenderRoute(map, res, opt){
|
|
|
909 |
var poly={strokeColor:opt.color, strokeWeight:opt.dashed?0:5, strokeOpacity:opt.dashed?0:0.85, zIndex:opt.z};
|
|
|
910 |
if(opt.dashed){
|
|
|
911 |
poly.icons=[{icon:{path:'M 0,-1 0,1', strokeColor:opt.color, strokeOpacity:1, strokeWeight:4, scale:3}, offset:'0', repeat:'14px'}];
|
|
|
912 |
}
|
|
|
913 |
new google.maps.DirectionsRenderer({map:map, directions:res, suppressMarkers:true,
|
|
|
914 |
suppressInfoWindows:true, preserveViewport:true, polylineOptions:poly});
|
|
|
915 |
}
|
|
|
916 |
function bjRouteKm(res){
|
|
|
917 |
var m=0; (res.routes[0].legs||[]).forEach(function(l){ m+=(l.distance?l.distance.value:0); }); return m/1000;
|
|
|
918 |
}
|
|
|
919 |
// Route-comparison panel rendered into the modal (#bjRouteLegend), above the map.
|
|
|
920 |
// Each distance fills in as its route resolves. value: number = km, false =
|
|
|
921 |
// unavailable, undefined = still loading.
|
|
|
922 |
function bjRouteLegend(){
|
|
|
923 |
var div=el('bjRouteLegend');
|
|
|
924 |
if(!div) return { set:function(){}, note:function(){} };
|
|
|
925 |
var taken, sugg, noteTxt='';
|
|
|
926 |
function val(v){ return typeof v==='number' ? '<b>'+v.toFixed(1)+' km</b>' : (v===false ? 'n/a' : '…'); }
|
|
|
927 |
function render(){
|
|
|
928 |
var cmp='';
|
|
|
929 |
if(typeof taken==='number' && typeof sugg==='number'){
|
|
|
930 |
cmp = taken>sugg+0.05
|
|
|
931 |
? '<span style="color:#e03131">+'+(taken-sugg).toFixed(1)+' km longer than suggested</span>'
|
|
|
932 |
: '<span style="color:#2f9e44">on / better than the suggested route</span>';
|
|
|
933 |
}
|
|
|
934 |
div.innerHTML=
|
|
|
935 |
'<span class="lg">Route comparison</span>'+
|
|
|
936 |
'<span><span class="sw ln"></span>Taken (GPS)</span>'+
|
|
|
937 |
'<span><span class="sw dt"></span>Suggested</span>'+
|
|
|
938 |
cmp+
|
|
|
939 |
(noteTxt?'<span style="color:#e8590c">'+noteTxt+'</span>':'');
|
|
|
940 |
}
|
|
|
941 |
render();
|
|
|
942 |
return { set:function(k,v){ if(k==='taken')taken=v; else sugg=v; render(); }, note:function(t){ noteTxt=t; render(); } };
|
|
|
943 |
}
|
| 36882 |
vikas |
944 |
function tlSecs(t){ if(!t) return 1e9; var p=t.split(':'); return (+p[0])*3600+(+(p[1]||0))*60+(+(p[2]||0)); }
|
|
|
945 |
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)); }
|
|
|
946 |
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); }
|
|
|
947 |
function jstat(v,l){ return '<div class="js"><div class="jv">'+v+'</div><div class="jl">'+l+'</div></div>'; }
|
|
|
948 |
function hhmm(t){ return t? t.slice(0,5):''; }
|
|
|
949 |
function tlThumb(att){
|
| 36903 |
vikas |
950 |
if(att && window._mediaUrl) return '<img class="tlthumb" src="'+esc(window._mediaUrl+att)+'" onclick="bjOpenImage(this.src)" onerror="tlImgErr(this)">';
|
| 36882 |
vikas |
951 |
return '<div class="tlph" title="No photo">📷</div>';
|
|
|
952 |
}
|
|
|
953 |
function tlImgErr(im){ var d=document.createElement('div'); d.className='tlph'; d.title='Photo unavailable'; d.innerHTML='📷'; if(im.parentNode) im.parentNode.replaceChild(d, im); }
|
|
|
954 |
function punchEntry(kind, time){ return {_punch:kind, checkInTime:time, markType:(kind==='in'?'PUNCHIN':'PUNCHOUT'), taskType:'attendance'}; }
|
|
|
955 |
function tlStyle(x){
|
|
|
956 |
var mt=(x.markType||'').toUpperCase(), tt=(x.taskType||'').toLowerCase();
|
|
|
957 |
if(x._punch || tt==='attendance' || mt.indexOf('PUNCH')>=0) return {c:'#7048e8', l:(x._punch==='out'?'Punch out':'Punch in'), ic:'⚑'};
|
|
|
958 |
if(mt.indexOf('CHECKOUT')>=0) return {c:'#2f9e44', l:'Visited', ic:'✓'};
|
|
|
959 |
if(mt==='CHECKIN') return {c:'#1098ad', l:'In store', ic:'📍'};
|
|
|
960 |
if(mt==='DEFERRED') return {c:'#e8590c', l:'Deferred', ic:'↻'};
|
|
|
961 |
if(mt==='PENDING' || !x.checkInTime) return {c:'#97a1b5', l:'Pending', ic:'○'};
|
|
|
962 |
return {c:'#3b5bdb', l:(mt||'-'), ic:'●'};
|
|
|
963 |
}
|
|
|
964 |
function tlTitle(x){
|
|
|
965 |
if(x._punch) return x._punch==='in' ? 'Journey start (Punch in)' : 'Journey end (Punch out)';
|
|
|
966 |
var n=x.taskName||'';
|
| 36903 |
vikas |
967 |
var taskType=(x.taskType||'').toLowerCase();
|
|
|
968 |
if(taskType==='franchisee-visit') {
|
|
|
969 |
var pipe = n.lastIndexOf('|');
|
|
|
970 |
if (pipe >= 0) n = n.slice(pipe + 1); // drop leading agenda tags
|
|
|
971 |
n = n.replace(/\s*VISIT\b.*$/i, '').replace(/\s*visit\s*$/i, '').replace(/\bnull\b/gi, '').replace(/\s{2,}/g, ' ').trim();
|
|
|
972 |
}
|
| 36882 |
vikas |
973 |
return n || '(stop)';
|
|
|
974 |
}
|
|
|
975 |
function tlRow(x, side){
|
|
|
976 |
var s=tlStyle(x);
|
|
|
977 |
var tt=(x.taskType||'').toLowerCase();
|
|
|
978 |
var timeTop = x.checkInTime ? hhmm(x.checkInTime) : '-';
|
|
|
979 |
var tlabel = x._punch ? (x._punch==='in'?'punch in':'punch out') : (x.checkInTime?'check-in':'pending');
|
|
|
980 |
var meta;
|
|
|
981 |
if(x._punch){
|
|
|
982 |
meta = (x._punch==='in'?'Punch in':'Punch out') + ' · ' + hhmm(x.checkInTime);
|
|
|
983 |
} else {
|
|
|
984 |
var io = (x.checkInTime?hhmm(x.checkInTime):'-') + ' → ' + (x.checkOutTime?hhmm(x.checkOutTime):'-');
|
|
|
985 |
var dur = (x.timeSpent && x.timeSpent!=='00:00:00') ? ' · '+esc(x.timeSpent) : '';
|
|
|
986 |
var typeLabel = tt==='lead' ? 'Lead' : (tt==='office-visit'?'Office':'Partner');
|
|
|
987 |
meta = x.checkInTime ? (typeLabel+' · '+io+dur) : (typeLabel+' · not visited');
|
|
|
988 |
}
|
|
|
989 |
// image (or placeholder) + battery + location-toggle on real stops
|
|
|
990 |
var extra='';
|
|
|
991 |
if(!x._punch){
|
|
|
992 |
var chips='';
|
|
|
993 |
if(x.battery!=null) chips += '<span class="tlchip">🔋 '+x.battery+'%</span>';
|
|
|
994 |
if(x.locOff!=null) chips += '<span class="tlchip">📴 '+x.locOff+'</span>';
|
|
|
995 |
extra = '<div class="tlextra">'+tlThumb(x.attachment)+chips+'</div>';
|
|
|
996 |
}
|
| 36903 |
vikas |
997 |
var card='<div class="tlcard">'+
|
| 36882 |
vikas |
998 |
'<div class="tm" style="background:'+s.c+'">'+timeTop+'<small>'+tlabel+'</small></div>'+
|
|
|
999 |
'<div class="bd"><div class="ti">'+esc(tlTitle(x))+'</div>'+
|
|
|
1000 |
'<span class="stt" style="background:'+s.c+'">'+s.l+'</span>'+
|
|
|
1001 |
'<div class="mt">'+meta+'</div>'+extra+'</div>'+
|
| 36903 |
vikas |
1002 |
'</div>';
|
|
|
1003 |
// remark sits on the opposite half of the timeline (empty spacer when none)
|
|
|
1004 |
var rk=(!x._punch && x.remarks) ? '<div class="rk"><div class="rkl">Remark</div>'+esc(x.remarks)+'</div>' : '';
|
|
|
1005 |
var remark='<div class="tlremark">'+rk+'</div>';
|
|
|
1006 |
var halves = side==='left' ? (card+remark) : (remark+card);
|
|
|
1007 |
return '<div class="tlrow '+side+'">'+
|
|
|
1008 |
'<div class="node" style="background:'+s.c+'">'+s.ic+'</div>'+
|
|
|
1009 |
halves+'</div>';
|
| 36882 |
vikas |
1010 |
}
|
| 36877 |
vikas |
1011 |
function closeModal(){ el('bj-modal-back').classList.remove('show'); }
|
| 36903 |
vikas |
1012 |
// Image lightbox — opens an attachment larger, stacked above the journey modal.
|
|
|
1013 |
function bjOpenImage(src){ if(!src) return; el('bj-img').src=src; el('bj-img-back').classList.add('show'); }
|
|
|
1014 |
function bjCloseImage(){ el('bj-img-back').classList.remove('show'); el('bj-img').removeAttribute('src'); }
|
| 36877 |
vikas |
1015 |
|
|
|
1016 |
/* ============================ APPROVAL ============================ */
|
|
|
1017 |
function loadApproval(){
|
|
|
1018 |
spinner();
|
|
|
1019 |
var from=el('bj-start').value, to=el('bj-end').value;
|
|
|
1020 |
var u=CTX+'/beat-report/approval/data?fromDate='+encodeURIComponent(from)+'&toDate='+encodeURIComponent(to)+qs();
|
|
|
1021 |
fetch(u,{headers:{'Accept':'application/json'}}).then(function(r){ return r.json(); }).then(function(d){
|
|
|
1022 |
var rows=d.rows||[];
|
|
|
1023 |
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>'+
|
|
|
1024 |
'<p class="desc">Check-ins recorded >50 m from the partner\'s saved location, across your downline. Approving updates the partner\'s coordinates.</p>';
|
|
|
1025 |
if(!rows.length){ h+='<p class="desc">Nothing pending in this window.</p></div>'; el('bj-content').innerHTML=h; return; }
|
|
|
1026 |
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>';
|
|
|
1027 |
rows.forEach(function(r){
|
|
|
1028 |
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>'+
|
|
|
1029 |
'<td class="num '+(r.distanceM>200?'badflag':'warnflag')+'">'+r.distanceM+' m</td>'+
|
|
|
1030 |
'<td class="num"><button class="btn-ok" onclick="approve('+r.trackingId+')">Approve</button></td></tr>';
|
|
|
1031 |
});
|
|
|
1032 |
h+='</tbody></table></div>';
|
|
|
1033 |
el('bj-content').innerHTML=h;
|
|
|
1034 |
}).catch(fail);
|
|
|
1035 |
}
|
|
|
1036 |
function approve(trackingId){
|
|
|
1037 |
fetch(CTX+'/beat-report/approve-checkin',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'trackingId='+trackingId})
|
|
|
1038 |
.then(function(r){ return r.json(); }).then(function(){ var row=el('appr-'+trackingId); if(row) row.parentNode.removeChild(row); }).catch(function(){ alert('Approve failed'); });
|
|
|
1039 |
}
|
|
|
1040 |
|
| 36903 |
vikas |
1041 |
/* ============================ EXPORT ============================ */
|
|
|
1042 |
// Download the Employee Task Report (.xlsx). Today lens exports the single
|
|
|
1043 |
// selected day; Period lens exports the whole start..end range. Both carry the
|
|
|
1044 |
// current level / team scope (qs()). The download is served as an attachment, so
|
|
|
1045 |
// navigating to the URL triggers the file save without leaving the page.
|
|
|
1046 |
function exportReport(){
|
|
|
1047 |
var start, end;
|
|
|
1048 |
if(LENS==='period'){ start=el('bj-start').value; end=el('bj-end').value; }
|
|
|
1049 |
else { start=el('bj-date').value; end=start; }
|
|
|
1050 |
var u = BASE + '/export?startDate=' + encodeURIComponent(start) + '&endDate=' + encodeURIComponent(end) + qs();
|
|
|
1051 |
window.location.href = u;
|
|
|
1052 |
}
|
|
|
1053 |
|
| 36877 |
vikas |
1054 |
/* ============================ INIT ============================ */
|
|
|
1055 |
document.querySelectorAll('.lens').forEach(function(b){ b.addEventListener('click', function(){ setLens(b.getAttribute('data-lens')); }); });
|
|
|
1056 |
el('bj-apply').addEventListener('click', load);
|
| 36903 |
vikas |
1057 |
el('bj-export').addEventListener('click', exportReport);
|
| 36897 |
vikas |
1058 |
el('bj-level').addEventListener('change', onLevelChange);
|
|
|
1059 |
if(el('bj-user')) el('bj-user').addEventListener('change', load);
|
|
|
1060 |
el('bj-date').addEventListener('change', updateTodayLabel);
|
| 36877 |
vikas |
1061 |
el('bj-modal-back').addEventListener('click', function(e){ if(e.target===el('bj-modal-back')) closeModal(); });
|
| 36903 |
vikas |
1062 |
el('bj-img-back').addEventListener('click', function(e){ if(e.target===el('bj-img-back')) bjCloseImage(); });
|
|
|
1063 |
el('bj-img-x').addEventListener('click', bjCloseImage);
|
|
|
1064 |
// Esc closes the lightbox first (if open), otherwise the journey modal.
|
|
|
1065 |
document.addEventListener('keydown', function(e){
|
|
|
1066 |
if(e.key!=='Escape') return;
|
|
|
1067 |
if(el('bj-img-back').classList.contains('show')) bjCloseImage();
|
|
|
1068 |
else if(el('bj-modal-back').classList.contains('show')) closeModal();
|
|
|
1069 |
});
|
| 36897 |
vikas |
1070 |
updateTodayLabel();
|
| 36877 |
vikas |
1071 |
load();
|
|
|
1072 |
</script>
|
|
|
1073 |
</body>
|
|
|
1074 |
</html>
|