Subversion Repositories SmartDukaan

Rev

Rev 36916 | Rev 36929 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
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}
36917 vikas 36 
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
36877 vikas 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)}
36905 vikas 38 
  .kpi.clickable{cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}
39 
  .kpi.clickable:hover{border-color:#c7d0e8;box-shadow:0 3px 10px rgba(20,30,60,.09);transform:translateY(-1px)}
36877 vikas 40 
  .kpi .top{display:flex;align-items:center;gap:8px}
41 
  .kpi .ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
42 
  .kpi .label{font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.2}
43 
  .kpi .val{font-size:26px;font-weight:760;margin-top:9px;letter-spacing:-.02em;line-height:1}
44 
  .kpi .val small{font-size:13px;color:var(--soft);font-weight:600}
45 
  .kpi .foot{font-size:11.5px;color:var(--soft);margin-top:7px}
46 
  .grid{display:grid;gap:16px}
47 
  .g2{grid-template-columns:1fr 1fr}
48 
  .g3{grid-template-columns:1.55fr 1fr}
49 
  .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)}
50 
  .card h2{margin:0 0 3px;font-size:15px;font-weight:720;letter-spacing:-.01em}
51 
  .card .desc{color:var(--muted);font-size:12.5px;margin:0 0 14px}
52 
  .sectionlabel{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);font-weight:700;margin:24px 2px 12px}
53 
  .funnel{display:flex;gap:9px;align-items:stretch}
54 
  .fstep{flex:1;border:1px solid var(--line);border-radius:11px;padding:13px 12px;position:relative;text-align:center;background:#fbfcfe}
36905 vikas 55 
  .fstep.clickable{cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}
56 
  .fstep.clickable:hover{border-color:#c7d0e8;box-shadow:0 3px 10px rgba(20,30,60,.09);transform:translateY(-1px)}
36916 vikas 57 
  .fstep.active{border-color:var(--brand);background:#eef1fb;box-shadow:0 0 0 1px var(--brand) inset}
58 
  .boardfilter{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:0 0 10px;padding:7px 11px;background:#eef1fb;border:1px solid #d7deef;border-radius:8px}
59 
  .boardfilter b{color:#28304a}
60 
  .boardfilter .clearf{margin-left:auto;border:1px solid #c7d0e8;background:#fff;color:#3b5bdb;border-radius:7px;padding:3px 10px;font-size:12px;font-weight:600;cursor:pointer}
61 
  .boardfilter .clearf:hover{background:#f1f4ff}
36877 vikas 62 
  .fstep .fn{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
63 
  .fstep .fv{font-size:26px;font-weight:770;margin-top:6px}
64 
  .fstep .fbar{height:5px;border-radius:3px;margin-top:10px;background:linear-gradient(90deg,var(--brand),var(--brand2))}
65 
  .fstep .drop{font-size:11px;color:var(--red);margin-top:7px;font-weight:600}
66 
  .fstep .keep{font-size:11px;color:var(--good);margin-top:7px;font-weight:600}
67 
  .fstep .arrow{position:absolute;right:-12px;top:50%;transform:translateY(-50%);z-index:2;color:#c5cce0;font-size:15px}
68 
  .leak{display:flex;gap:10px;margin-top:12px}
69 
  .leakbox{flex:1;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;background:#f8f9fc}
70 
  .leakbox .lt{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--soft);font-weight:600}
71 
  .leakbox .lv{font-size:20px;font-weight:760;margin-top:4px}
72 
  table{width:100%;border-collapse:collapse;font-size:13px}
73 
  th,td{text-align:left;padding:9px 9px;border-bottom:1px solid var(--line2)}
74 
  th{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--soft);font-weight:700;white-space:nowrap;cursor:pointer}
75 
  th.num,td.num{text-align:right}
76 
  tbody tr:hover{background:#f7f9fd}
77 
  tr.clickable{cursor:pointer}
78 
  .lvl{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:5px;background:#eef1fb;color:var(--brand)}
79 
  .pill-state{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px;padding:3px 9px;border-radius:999px}
80 
  .ps-store{background:#e7f5ff;color:#1971c2}
81 
  .ps-travel{background:#e6fcf5;color:#0ca678}
82 
  .ps-done{background:#ebfbee;color:#2f9e44}
83 
  .ps-idle{background:#fff4e6;color:#e8590c}
84 
  .ps-no{background:#fff0f0;color:#e03131}
85 
  .meter{display:inline-block;width:54px;height:7px;border-radius:4px;background:#eef1f6;vertical-align:middle;margin-left:7px;overflow:hidden}
86 
  .meter > i{display:block;height:100%;border-radius:4px}
87 
  .warnflag{color:var(--orange);font-weight:700}
88 
  .badflag{color:var(--red);font-weight:700}
89 
  .rowwarn{background:#fff9f0}
90 
  .rowbad{background:#fff5f5}
36897 vikas 91 
  .bstat{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
92 
  .bstat.ok{background:#ebfbee;color:#2f9e44}
93 
  .bstat.warn{background:#fff4e6;color:#e8590c}
94 
  .bstat.no{background:#fff0f0;color:#e03131}
95 
  .bdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
96 
  .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}
36913 vikas 97 
  .potime{display:inline-block;background:#ebfbee;color: #D60303A8;font-weight:700;font-size:11px;padding:2px 7px;border-radius:6px;font-variant-numeric:tabular-nums}
36897 vikas 98 
  td.cnt{font-weight:700;font-variant-numeric:tabular-nums}
99 
  .cgreen{color:#2f9e44}.camber{color:#f08c00}.cred{color:#e03131}.cmuted{color:#69748c}
36917 vikas 100 
  tr.boardtot td{background:#f4f6fb;border-bottom:2px solid #cdd3df;font-weight:700}
36897 vikas 101 
  .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}
102 
  .actbtn.map{background:#12b886}.actbtn.view{background:#3b5bdb}
103 
  .actbtn.edit{background:#f08c00}.actbtn.add{background:#2f9e44;font-size:15px}
104 
  .actbtn:active{transform:translateY(1px)}
36877 vikas 105 
  .att{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;margin-bottom:9px}
106 
  .att .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
107 
  .att .ab{flex:1}
108 
  .att .atitle{font-size:13px;font-weight:650}
109 
  .att .adet{font-size:12px;color:var(--muted);margin-top:2px}
110 
  .att .acount{font-size:18px;font-weight:780}
36882 vikas 111 
  .att.clickable{cursor:pointer;transition:border-color .12s,box-shadow .12s}
112 
  .att.clickable:hover{border-color:#c7d0e8;box-shadow:0 2px 8px rgba(20,30,60,.08)}
113 
  .att .chev{color:#c2cadb;font-size:13px;margin-left:8px}
36877 vikas 114 
  .barrow{display:grid;grid-template-columns:60px 1fr 90px;align-items:center;gap:11px;margin:8px 0}
115 
  .barrow .name{font-size:13px;font-weight:600}
116 
  .track{background:#f1f3f9;border-radius:7px;height:20px;position:relative;overflow:hidden}
117 
  .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}
118 
  .barrow .meta{font-size:11.5px;color:var(--muted);text-align:right}
119 
  .donutwrap{display:flex;align-items:center;gap:20px}
120 
  .donut{width:138px;height:138px;border-radius:50%;flex:none;position:relative;
121 
    -webkit-mask:radial-gradient(circle 42px at center,transparent 98%,#000 100%);mask:radial-gradient(circle 42px at center,transparent 98%,#000 100%)}
122 
  .donut .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;-webkit-mask:none;mask:none}
123 
  .legend{display:flex;flex-direction:column;gap:9px;font-size:12.5px}
124 
  .legend .it{display:flex;align-items:flex-start;gap:9px}
36913 vikas 125 
  .legend .it.clickable{cursor:pointer;border-radius:8px;padding:4px 6px;margin:-4px -6px;transition:background .12s}
126 
  .legend .it.clickable:hover{background:#f1f3f9}
127 
  .barrow.clickable{cursor:pointer}
128 
  .barrow.clickable:hover .track{outline:2px solid #c7d0e8;outline-offset:1px;border-radius:7px}
129 
  .donut.clickable{cursor:pointer}
36877 vikas 130 
  .dot{width:11px;height:11px;border-radius:3px;flex:none;margin-top:3px}
131 
  .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
132 
  .tile{background:#f8f9fc;border:1px solid var(--line2);border-radius:11px;padding:12px}
133 
  .tile .t{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--soft);font-weight:600}
134 
  .tile .v{font-size:21px;font-weight:760;margin-top:5px}
135 
  .tile .v small{font-size:12px;color:var(--soft);font-weight:600}
136 
  .util{display:flex;height:30px;border-radius:8px;overflow:hidden}
137 
  .util div{display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:650;color:#fff}
138 
  .utlegend{display:flex;gap:18px;margin-top:12px;font-size:12px;color:var(--muted);flex-wrap:wrap}
139 
  .utlegend span{display:inline-flex;align-items:center;gap:7px}
140 
  .callout{background:linear-gradient(180deg,#fbfcff,#f4f7ff);border:1px solid #dfe6fb;border-radius:14px;padding:18px 20px;margin-top:6px}
141 
  .callout h2{margin:0 0 3px;font-size:16px}
142 
  .callout .desc{color:var(--muted);font-size:12.5px;margin-bottom:14px}
143 
  .fix{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid #e6ebf8}
144 
  .fix:last-child{border-bottom:0}
145 
  .fix .sev{width:6px;border-radius:4px;flex:none}
146 
  .fix .fb{flex:1}
147 
  .fix .ft{font-size:14px;font-weight:700}
148 
  .fix .fd{font-size:13px;color:#3a4459;margin-top:4px;line-height:1.5}
149 
  .fix .fd b{color:var(--ink)}
150 
  .fix .act{font-size:12.5px;color:var(--good);margin-top:6px;font-weight:650}
151 
  .hide{display:none}
152 
  .loading{padding:70px;text-align:center;color:var(--muted)}
153 
  .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}
154 
  @keyframes spin{to{transform:rotate(360deg)}}
155 
  .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 156 
  /* image lightbox — stacks above the journey modal */
157 
  .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}
158 
  .img-back.show{display:flex}
159 
  .img-back img{max-width:95%;max-height:92vh;border-radius:10px;box-shadow:0 16px 60px rgba(0,0,0,.5);background:#fff}
160 
  .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}
161 
  .img-x:hover{background:rgba(255,255,255,.3)}
36877 vikas 162 
  .modal-back.show{display:flex}
36882 vikas 163 
  .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}
164 
  .modal h3{margin:0 0 2px;font-size:17px;text-align:center}
165 
  .modal > .desc{text-align:center}
166 
  .modal .x{position:absolute;top:14px;right:16px;cursor:pointer;color:var(--soft);font-size:22px;line-height:1;border:0;background:none}
167 
  /* journey totals bar */
168 
  .jstats{display:flex;gap:9px;margin:12px 0 2px;flex-wrap:wrap}
169 
  .js{flex:1;min-width:104px;background:#f8f9fc;border:1px solid var(--line2);border-radius:10px;padding:9px 10px;text-align:center}
170 
  .js .jv{font-size:15.5px;font-weight:760;color:var(--ink);font-variant-numeric:tabular-nums}
171 
  .js .jl{font-size:10px;color:var(--soft);text-transform:uppercase;letter-spacing:.04em;margin-top:3px;font-weight:600}
36877 vikas 172 
  .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 173 
  /* journey timeline (exec drilldown) */
174 
  .tl{position:relative;margin:14px 2px 4px;padding:4px 0}
175 
  .tl::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;background:#e9edf5;transform:translateX(-50%)}
176 
  .tlgap{position:relative;display:flex;justify-content:center;margin:-3px 0}
177 
  .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 178 
  .tlrow{position:relative;display:flex;justify-content:space-between;align-items:flex-start;margin:14px 0}
36882 vikas 179 
  .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}
180 
  .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}
181 
  .tlrow.left .tlcard{flex-direction:row-reverse;text-align:right}
182 
  .tlrow.right .tlcard{flex-direction:row;text-align:left}
36903 vikas 183 
  /* remark on the opposite half, hugging the centre line */
184 
  .tlremark{width:calc(50% - 26px);display:flex;align-items:flex-start;padding-top:6px}
185 
  .tlrow.right .tlremark{justify-content:flex-end}
186 
  .tlrow.left .tlremark{justify-content:flex-start}
187 
  .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}
188 
  .tlrow.right .tlremark .rk{text-align:right}
189 
  .tlrow.left .tlremark .rk{text-align:left}
190 
  .tlremark .rkl{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--soft);font-weight:700;margin-bottom:3px}
36882 vikas 191 
  .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}
192 
  .tlcard .tm small{font-weight:600;font-size:8.5px;opacity:.9;text-transform:uppercase;letter-spacing:.04em;margin-top:3px}
193 
  .tlcard .bd{padding:8px 11px;flex:1;min-width:0}
194 
  .tlcard .bd .ti{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.25;word-break:break-word}
195 
  .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}
196 
  .tlcard .bd .mt{font-size:11px;color:var(--muted);margin-top:6px}
197 
  .tlextra{display:flex;align-items:center;gap:7px;margin-top:8px;flex-wrap:wrap}
198 
  .tlrow.left .tlextra{justify-content:flex-end}
199 
  .tlrow.right .tlextra{justify-content:flex-start}
200 
  .tlthumb{width:46px;height:46px;border-radius:8px;object-fit:cover;border:1px solid var(--line);cursor:pointer;background:#f1f3f9}
201 
  .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}
202 
  .tlchip{font-size:10.5px;font-weight:600;color:var(--muted);background:#f1f3f9;border-radius:6px;padding:2px 7px;white-space:nowrap}
36897 vikas 203 
  .exectabs{display:flex;gap:6px;justify-content:center;margin:12px 0 4px}
204 
  .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}
205 
  .exectab.active{background:var(--brand);color:#fff;border-color:var(--brand)}
206 
  #bjMap{width:100%;height:460px;border-radius:12px;border:1px solid var(--line);margin-top:10px;background:#eef1f7;overflow:hidden}
36903 vikas 207 
  .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}
208 
  .bjlegend .lg{font-weight:700}
209 
  .bjlegend .sw{display:inline-block;width:24px;vertical-align:middle;margin-right:7px}
210 
  .bjlegend .ln{border-top:4px solid #e03131}
211 
  .bjlegend .dt{border-top:4px dotted #2f9e44}
36897 vikas 212 
  .valwrap{display:flex;justify-content:center;margin:14px 0 6px}
213 
  .valimg{max-width:100%;max-height:440px;border-radius:12px;border:1px solid var(--line);cursor:zoom-in}
214 
  .valph{width:100%;padding:48px;text-align:center;color:var(--soft);border:1px dashed #cfd6e6;border-radius:12px;background:#f4f6fb;font-size:14px}
215 
  .valactions{display:flex;justify-content:center;gap:10px;margin-top:8px}
36877 vikas 216 
  @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 217 
  @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 218 
</style>
219 
</head>
220 
<body>
221 
<div class="wrap">
222 
  <header class="top">
223 
    <div class="brand">
224 
      <div class="crumb"><a href="${rc.contextPath}/dashboard">&larr; Dashboard</a> &middot; Field Sales &middot; Beat / Monthly PJP</div>
225 
      <h1>Beat Journey <span class="live"><i></i>Live</span></h1>
226 
    </div>
227 
    <div class="hd-right">
228 
      <select class="ctl" id="bj-level">
229 
        <option value="">All levels below me</option>
230 
        #foreach($lvl in $escalationTypes)
231 
          <option value="$lvl">$lvl</option>
232 
        #end
233 
      </select>
36897 vikas 234 
      #if($topLevel)
235 
      <select class="ctl hide" id="bj-user">
236 
        <option value="">All users at level</option>
237 
      </select>
238 
      #end
36877 vikas 239 
      <input class="ctl" type="date" id="bj-date" value="$today">
240 
      <span id="bj-period-range" class="hide">
241 
        <input class="ctl" type="date" id="bj-start" value="$monthStart">
242 
        <input class="ctl" type="date" id="bj-end" value="$today">
243 
      </span>
244 
      <button class="btn-r" id="bj-apply">Apply</button>
36903 vikas 245 
      <button class="btn-r" id="bj-export" style="background:#2f9e44" title="Download an Excel report for the selected date / range">&#11015; Export Excel</button>
36877 vikas 246 
    </div>
247 
  </header>
248 
 
249 
  <div class="lenses">
250 
    <button class="lens active" data-lens="today" id="lens-today">Today (Live)</button>
251 
    <button class="lens" data-lens="period" id="lens-period">Period (Analytics)</button>
252 
  </div>
253 
 
254 
  <div id="bj-content"><div class="loading"><div class="spinner"></div>Loading&hellip;</div></div>
255 
</div>
256 
 
257 
<div class="modal-back" id="bj-modal-back">
258 
  <div class="modal" id="bj-modal"></div>
259 
</div>
260 
 
36903 vikas 261 
<div class="img-back" id="bj-img-back">
262 
  <button class="img-x" id="bj-img-x" title="Close">&times;</button>
263 
  <img id="bj-img" alt="Attachment">
264 
</div>
265 
 
36877 vikas 266 
<script>
267 
var CTX = '${rc.contextPath}';
268 
var BASE = CTX + '/beat-journey';
269 
var LENS = 'today';
36897 vikas 270 
var TODAY = '$today';
36877 vikas 271 
 
272 
function el(id){ return document.getElementById(id); }
36897 vikas 273 
// The first lens reads "Today (Live)" for today's date, otherwise it shows the
274 
// selected date (the tab is still the live/single-day view, just for that day).
275 
function fmtDateLabel(d){
276 
  var p=(d||'').split('-'); if(p.length!==3) return d;
277 
  var mo=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
278 
  return parseInt(p[2],10)+' '+(mo[parseInt(p[1],10)-1]||p[1])+' '+p[0];
279 
}
280 
function updateTodayLabel(){
281 
  var b=el('bj-date'), lbl=el('lens-today'); if(!lbl) return;
282 
  var d=b?b.value:'';
283 
  lbl.innerHTML = (!d || d===TODAY) ? 'Today (Live)' : esc(fmtDateLabel(d));
284 
}
36877 vikas 285 
function esc(s){ return String(s==null?'':s).replace(/[&<>"]/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c];}); }
286 
function num(n){ return (n==null?0:n).toLocaleString(); }
287 
function adhColor(p){ if(p>=80)return '#2f9e44'; if(p>=60)return '#f08c00'; if(p>=40)return '#e8590c'; return '#e03131'; }
288 
function pct(a,b){ return b? Math.round(100*a/b):0; }
289 
function qs(){
290 
  var lvl = el('bj-level').value;
291 
  var s = '';
292 
  if(lvl) s += '&escalationType=' + encodeURIComponent(lvl);
36897 vikas 293 
  var usr = el('bj-user');           // only present for L5/Final
294 
  if(usr && usr.value) s += '&teamOfAuthUserId=' + encodeURIComponent(usr.value);
36877 vikas 295 
  return s;
296 
}
36897 vikas 297 
// L5/Final: when a level is picked, list its users so a specific manager's team
298 
// can be selected. Selecting a user scopes the whole view to that user's team.
299 
function onLevelChange(){
300 
  var usr = el('bj-user');
301 
  if(!usr){ load(); return; }       // not top-level: just reload on level change
302 
  var lvl = el('bj-level').value;
303 
  usr.innerHTML = '<option value="">All users at level</option>';
304 
  if(!lvl){ usr.classList.add('hide'); load(); return; }
305 
  fetch(BASE + '/users?escalationType=' + encodeURIComponent(lvl), {headers:{'Accept':'application/json'}})
306 
    .then(function(r){ return r.json(); })
307 
    .then(function(d){
308 
      var us = d.users || [];
309 
      var h = '<option value="">All ' + esc(lvl) + ' users</option>';
310 
      us.forEach(function(u){ h += '<option value="' + u.id + '">' + esc(u.name) + '</option>'; });
311 
      usr.innerHTML = h;
312 
      usr.classList.toggle('hide', us.length === 0);
313 
      load();
314 
    })
315 
    .catch(function(){ usr.classList.add('hide'); load(); });
316 
}
36877 vikas 317 
function spinner(){ el('bj-content').innerHTML = '<div class="loading"><div class="spinner"></div>Loading&hellip;</div>'; }
318 
function fail(e){ el('bj-content').innerHTML = '<div class="loading">Could not load data ('+esc(e&&e.message||e)+'). Are you signed in?</div>'; }
319 
 
320 
function setLens(name){
321 
  LENS = name;
322 
  var tabs = document.querySelectorAll('.lens');
323 
  for(var i=0;i<tabs.length;i++){ tabs[i].classList.toggle('active', tabs[i].getAttribute('data-lens')===name); }
324 
  el('bj-date').classList.toggle('hide', name!=='today');
325 
  el('bj-period-range').classList.toggle('hide', name==='today');
326 
  load();
327 
}
328 
function load(){
329 
  if(LENS==='today') return loadToday();
330 
  if(LENS==='period') return loadPeriod();
331 
  return loadApproval();
332 
}
333 
 
334 
/* ============================ TODAY ============================ */
335 
function loadToday(){
36897 vikas 336 
  updateTodayLabel();
36877 vikas 337 
  spinner();
338 
  fetch(BASE + '/today?date=' + encodeURIComponent(el('bj-date').value) + qs(), {headers:{'Accept':'application/json'}})
339 
    .then(function(r){ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); })
340 
    .then(renderToday).catch(fail);
341 
}
36905 vikas 342 
function kpi(ic, bg, fg, label, val, foot, valColor, click){
343 
  return '<div class="kpi'+(click?' clickable':'')+'"'+(click?' onclick="'+click+'" title="Click for details"':'')+'><div class="top"><div class="ic" style="background:'+bg+';color:'+fg+'">'+ic+'</div>'+
36877 vikas 344 
    '<div class="label">'+label+'</div></div><div class="val"'+(valColor?' style="color:'+valColor+'"':'')+'>'+val+'</div>'+
345 
    '<div class="foot">'+foot+'</div></div>';
346 
}
36905 vikas 347 
function fstep(name, val, w, sub, drop, last, key){
36916 vikas 348 
  return '<div class="fstep'+(key?' clickable" data-fkey="'+key+'" onclick="funnelClick(\''+key+'\')" title="Click to filter the board to these executives':'')+'"><div class="fn">'+name+'</div><div class="fv">'+num(val)+'</div>'+
36913 vikas 349 
    '<div class="fbar" style="width:'+Math.min(w,100)+'%"></div><div class="'+(drop?'drop':'keep')+'">'+sub+'</div>'+
36877 vikas 350 
    (last?'':'<span class="arrow">&#10148;</span>')+'</div>';
351 
}
36913 vikas 352 
// Funnel drop sub-text: positive = fell out (red); negative = above planned
353 
// (leads push visits past planned stops) shown green; zero = on plan.
354 
function fdrop(p, badLabel){
355 
  if(p>0) return '&minus;'+p+'% '+badLabel;
356 
  if(p<0) return '+'+(-p)+'% above planned';
357 
  return 'on plan';
358 
}
36877 vikas 359 
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>'; }
360 
 
361 
function renderToday(d){
362 
  var k=d.kpis, f=d.funnel, s=d.stops, a=d.attention;
36897 vikas 363 
  window._canApprove = !!d.canApprove;
364 
  window._mediaUrl = d.mediaUrl || window._mediaUrl || '';
36905 vikas 365 
  window._board = d.board || [];          // funnel drill-down filters this
366 
  window._boardDate = d.date || '';
367 
  window._leadsList = d.leadsList || [];  // leads drill-down
36917 vikas 368 
  window._execList = d.execList || [];    // main-card drill-downs
36877 vikas 369 
  var h='';
370 
  h+='<div class="kpis">';
36917 vikas 371 
  h+=kpi('&#128101;','#eef1fb','#3b5bdb','Total Executives',num(k.totalExecs),'in your team',null,"openCards('total')");
372 
  h+=kpi('&#128197;','#ebfbee','#2f9e44','Scheduled PJP',num(k.scheduledPjp)+' <small>/'+k.totalExecs+'</small>',k.unscheduled+' unscheduled',null,"openCards('scheduled')");
373 
  h+=kpi('&#9998;','#fff4e6','#e8590c','Agenda Filled',num(k.agendaFilled)+' <small>/'+k.scheduledPjp+'</small>',(k.scheduledPjp-k.agendaFilled)+' pending',null,"openCards('agenda')");
374 
  h+=kpi('&#10060;','#fff0f6','#d6336c','Unscheduled',num(k.unscheduled),'no PJP today',null,"openCards('unscheduled')");
36877 vikas 375 
  h+='</div>';
376 
 
377 
  h+='<div class="sectionlabel">Today\'s Journey Funnel</div><div class="card"><div class="funnel">';
36917 vikas 378 
  var sp=f.scheduledPjp||1, pin=f.punchedIn||1;
379 
  h+=fstep('Punched In',f.punchedIn,pct(f.punchedIn,sp),f.punchedIn+' of '+f.scheduledPjp+' scheduled',false,false,'punchedIn');
380 
  h+=fstep('Traveling',f.travelling,pct(f.travelling,pin),'on the road',false,false,'travelling');
381 
  h+=fstep('In Store',f.inStore,pct(f.inStore,pin),'at a stop',false,false,'inStore');
382 
  h+=fstep('Idle / Break',f.idle,pct(f.idle,pin),'off-store &gt; 40 min',true,false,'idle');
383 
  h+=fstep('Punched Out',f.punchedOut,pct(f.punchedOut,pin),'journey ended',false,true,'punchedOut');
36877 vikas 384 
  h+='</div></div>';
385 
 
36916 vikas 386 
  window._boardFilter = null;             // funnel-card filter (null = all rows)
36877 vikas 387 
  h+='<div class="grid g3">';
36916 vikas 388 
  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><div id="bj-board">'+boardCard()+'</div></div>';
36877 vikas 389 
  h+='<div class="card"><h2>Needs attention now</h2><p class="desc">Things a manager should clear today.</p>'+attentionList(a)+'</div>';
390 
  h+='</div>';
391 
  el('bj-content').innerHTML=h;
392 
}
393 
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 394 
function js(s){ return String(s==null?'':s).replace(/\\/g,'\\\\').replace(/'/g,"\\'"); }
395 
// Open the Beat Planner (map-first planner window) for this executive/beat/day,
396 
// in a new tab. Edit pre-selects the beat; add opens it to assign/add a visit.
397 
function openPlanner(authUserId, beatId, date, mode){
398 
  var u = CTX + '/beatPlanWindow?autoUserId=' + encodeURIComponent(authUserId) + '&editDate=' + encodeURIComponent(date);
399 
  if(beatId && beatId>0) u += '&editBeatId=' + encodeURIComponent(beatId);
400 
  if(mode==='add') u += '&assign=1';
401 
  window.open(u, '_blank');
402 
}
36916 vikas 403 
// Compact "completed − deferred − pending / planned" cell: completed green,
404 
// deferred amber, pending grey (planned stops not yet acted on). Denominator is
405 
// the plan (or activity total if it ran past the plan), so the parts reconcile.
406 
// Pending is shown only when there's a remainder.
407 
function cdp(completed, deferred, planned){
408 
  completed=completed||0; deferred=deferred||0; planned=planned||0;
409 
  var denom=Math.max(planned, completed+deferred);
410 
  var pending=denom-completed-deferred;
411 
  var s='<span class="cgreen">'+completed+'</span> <span style="color:#cdd3df">-</span> '+
412 
        '<span class="camber">'+deferred+'</span>';
413 
  if(pending>0) s+=' <span style="color:#cdd3df">-</span> <span class="cmuted">'+pending+'</span>';
414 
  s+=' <span style="color:#97a1b5;font-weight:400">/ '+denom+'</span>';
415 
  return s;
416 
}
417 
// Funnel-card click: period cards (p_*) open their drill-down popup; today's
418 
// funnel cards filter the Live executive board in place. Clicking the active
419 
// card again clears the filter.
420 
function funnelClick(key){
421 
  if(key && key.indexOf('p_')===0) return openFunnel(key);
422 
  setBoardFilter(window._boardFilter===key ? null : key);
423 
}
424 
// Apply / clear the funnel filter and re-render just the board card. Also marks
425 
// the active funnel card so it's clear which cohort the board is showing.
426 
function setBoardFilter(key){
427 
  window._boardFilter = key || null;
428 
  var c=el('bj-board'); if(c) c.innerHTML=boardCard();
429 
  document.querySelectorAll('.fstep[data-fkey]').forEach(function(s){
430 
    s.classList.toggle('active', !!key && s.getAttribute('data-fkey')===key);
431 
  });
432 
}
433 
// Board card content: an optional "filtered by …" bar plus the table, showing
434 
// only the rows that reached the selected funnel stage (Scheduled = all rows).
435 
function boardCard(){
436 
  var rows=window._board||[], date=window._boardDate||'', key=window._boardFilter;
437 
  var view=rows, m=key?FUNNEL_META[key]:null;
438 
  if(m) view=rows.filter(m.f);
439 
  var bar='';
440 
  if(m){
441 
    bar='<div class="boardfilter">Showing <b>'+esc(m.title)+'</b> &middot; '+view.length+
442 
        ' of '+rows.length+'<button class="clearf" onclick="setBoardFilter(null)">&times; Clear filter</button></div>';
443 
  }
444 
  return bar+boardTable(view, date);
445 
}
36877 vikas 446 
function boardTable(rows, date){
447 
  if(!rows||!rows.length) return '<p class="desc">No executives scheduled or active for this date.</p>';
36897 vikas 448 
  var h='<div style="overflow-x:auto"><table><thead><tr>'+
36916 vikas 449 
    '<th>Agenda</th><th>Executive</th><th>Punch In/Out</th>'+
450 
    '<th class="num" title="Completed − Deferred − Pending / Planned">Planned - Visits</th>'+
451 
    '<th class="num" title="Completed − Deferred − Pending / Planned">Self Assigned Lead</th>'+
452 
    '<th class="num">Total</th><th>State</th><th>Action</th>'+
36897 vikas 453 
    '</tr></thead><tbody>';
36917 vikas 454 
  // column totals, computed up front so the Total row can lead the table
455 
  var t={cp:0,dp:0,pp:0,cl:0,dl:0,pl:0,tot:0};
36877 vikas 456 
  rows.forEach(function(r){
36916 vikas 457 
    t.cp+=r.completedPartner||0; t.dp+=r.deferredPartner||0; t.pp+=r.plannedPartner||0;
458 
    t.cl+=r.completedLead||0;    t.dl+=r.deferredLead||0;    t.pl+=r.plannedLead||0;
459 
    t.tot+=r.totalVisits||0;
36917 vikas 460 
  });
461 
  h+='<tr class="boardtot">'+
462 
     '<td></td><td><b>Total</b><br><span style="color:#97a1b5;font-size:11px">'+rows.length+' executives</span></td><td></td>'+
463 
     '<td class="num cnt">'+cdp(t.cp,t.dp,t.pp)+'</td>'+
464 
     '<td class="num cnt">'+cdp(t.cl,t.dl,t.pl)+'</td>'+
465 
     '<td class="num cnt cmuted">'+t.tot+'</td><td></td><td></td>'+
466 
     '</tr>';
467 
  rows.forEach(function(r){
36897 vikas 468 
    var rowcls = r.state==='NOT_STARTED' ? 'rowbad' : (r.idleAway?'rowwarn':'');
469 
    var A = r.userId+",'"+js(r.name)+"','"+date+"'";   // openExec args
470 
    var go = 'onclick="openExec('+A+')"';
471 
    h+='<tr class="clickable '+rowcls+'" '+go+'>'+
472 
       '<td style="text-align:center">'+(r.agendaFilled?'<span style="color:#2f9e44;font-size:15px">&#10003;</span>':'<span class="badflag" style="font-size:15px">&#10007;</span>')+'</td>'+
473 
       '<td><b>'+esc(r.name)+'</b><br>'+esc(r.beatName||'-')+'</td>'+
474 
       '<td style="white-space:nowrap">'+(r.punchInTime?'<span class="ptime">'+esc(r.punchInTime)+'</span>':'<span class="badflag">-</span>')+
475 
         ' <span style="color:#97a1b5;font-size:11px">/ '+(r.punchOutTime?esc(r.punchOutTime):'--')+'</span></td>'+
36916 vikas 476 
       '<td class="num cnt">'+cdp(r.completedPartner,r.deferredPartner,r.plannedPartner)+'</td>'+
477 
       '<td class="num cnt">'+cdp(r.completedLead,r.deferredLead,r.plannedLead)+'</td>'+
36905 vikas 478 
       '<td class="num cnt cmuted">'+r.totalVisits+'</td>'+
479 
       '<td><span class="pill-state '+stateClass(r.state)+'">'+esc(r.stateLabel)+'</span></td>'+
36897 vikas 480 
       '<td style="white-space:nowrap" onclick="event.stopPropagation()">'+
481 
         '<button class="actbtn map" title="Live location" onclick="openExec('+A+',\'map\')">&#128205;</button>'+
482 
         '<button class="actbtn view" title="Journey detail" onclick="openExec('+A+')">&#128065;</button>'+
483 
         '<button class="actbtn edit" title="Edit beat in Beat Planner" onclick="openPlanner('+r.authUserId+','+(r.beatId||0)+',\''+date+'\',\'edit\')">&#9998;</button>'+
484 
         '<button class="actbtn add" title="Assign / add visit in Beat Planner" onclick="openPlanner('+r.authUserId+','+(r.beatId||0)+',\''+date+'\',\'add\')">&#43;</button>'+
485 
       '</td></tr>';
36877 vikas 486 
  });
36917 vikas 487 
  return h+'</tbody></table></div>';
36877 vikas 488 
}
36905 vikas 489 
// Funnel drill-down: each stage shows the executives who reached it AND the
490 
// drop-off cohort that fell out at this step (the "−N …" sub-line). Filters
491 
// mirror the backend funnel conditions exactly (rows carry the per-stage flags).
492 
var FUNNEL_META = {
36917 vikas 493 
  punchedIn:  {title:'Punched In',   desc:'Started the day (punch-in recorded)', f:function(r){ return r.punchedIn; }},
494 
  travelling: {title:'Traveling',    desc:'On the road between stops',           f:function(r){ return r.state==='TRAVELLING'; }},
495 
  inStore:    {title:'In Store',     desc:'Currently checked in at a stop',      f:function(r){ return r.state==='IN_STORE'; }},
496 
  idle:       {title:'Idle / Break', desc:'Idle off-store beyond the threshold', f:function(r){ return r.idleAway; }},
497 
  punchedOut: {title:'Punched Out',  desc:'Ended the day (punch-out recorded)',  f:function(r){ return r.punchedOut; }}
36905 vikas 498 
};
499 
function funnelRows(list, date){
500 
  if(!list.length) return '<p class="desc">None.</p>';
501 
  var h='<table><thead><tr><th>Executive / Beat</th><th>Punch In/Out</th><th class="num">Completed</th><th class="num">Planned</th><th>State</th></tr></thead><tbody>';
502 
  list.slice().sort(function(a,b){ return (''+a.name).localeCompare(b.name); }).forEach(function(r){
503 
    var A=r.userId+",'"+js(r.name)+"','"+date+"'";
504 
    h+='<tr class="clickable" onclick="openExec('+A+')">'+
505 
       '<td><b>'+esc(r.name)+'</b><br><span style="color:#97a1b5;font-size:11px">'+esc(r.beatName||'-')+'</span></td>'+
506 
       '<td style="white-space:nowrap">'+(r.punchInTime?'<span class="ptime">'+esc(r.punchInTime)+'</span>':'<span class="badflag">-</span>')+
507 
         ' <span style="color:#97a1b5;font-size:11px">/ '+(r.punchOutTime?esc(r.punchOutTime):'--')+'</span></td>'+
508 
       '<td class="num cnt cgreen">'+r.completedVisits+'</td>'+
509 
       '<td class="num">'+r.planned+'</td>'+
510 
       '<td><span class="pill-state '+stateClass(r.state)+'">'+esc(r.stateLabel)+'</span></td></tr>';
511 
  });
512 
  return h+'</tbody></table>';
513 
}
514 
function openFunnel(key){
36913 vikas 515 
  if(key && key.indexOf('p_')===0) return openPFunnel(key);   // period funnel
36905 vikas 516 
  var m=FUNNEL_META[key]; if(!m) return;
517 
  var board=window._board||[], date=window._boardDate||'';
518 
  var reached=board.filter(m.f);
519 
  var dropped=m.drop ? board.filter(m.drop) : [];
520 
  var mb=el('bj-modal-back'), md=el('bj-modal');
521 
  var h='<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(m.title)+'</h3>'+
522 
        '<p class="desc">'+reached.length+' '+(reached.length===1?'executive':'executives')+' &middot; '+esc(m.desc)+'</p>'+
523 
        funnelRows(reached, date);
524 
  if(m.drop){
525 
    h+='<div class="sectionlabel" style="margin-top:18px;color:#e8590c">'+esc(m.dropLabel)+' &middot; '+dropped.length+'</div>'+
526 
       funnelRows(dropped, date);
527 
  }
528 
  h+='<p class="desc" style="margin-top:10px">Click a row to open that executive\'s journey detail.</p>';
529 
  md.innerHTML=h; mb.classList.add('show');
530 
}
36917 vikas 531 
// Main-card drill-downs: roster of executives behind each top KPI card.
532 
// 'drop' (optional) adds a second, highlighted section for the complementary
533 
// cohort — e.g. who's scheduled but hasn't filled the agenda.
534 
var CARD_META = {
535 
  total:       {title:'Total Executives', desc:'Everyone in your team',        f:function(r){ return true; }},
536 
  scheduled:   {title:'Scheduled PJP',     desc:'Executives with a beat today', f:function(r){ return r.hasBeat; }},
537 
  agenda:      {title:'Agenda Filled',     desc:'Beats with the agenda filled', f:function(r){ return r.agendaFilled; },
538 
                dropLabel:'Agenda not filled (scheduled)', drop:function(r){ return r.hasBeat && !r.agendaFilled; }},
539 
  unscheduled: {title:'Unscheduled',       desc:'No PJP scheduled today',       f:function(r){ return !r.hasBeat; }}
540 
};
541 
// Renders an executive roster table (used by the card drill-downs).
542 
function execRows(list, date){
543 
  if(!list.length) return '<p class="desc">None.</p>';
544 
  var h='<table><thead><tr><th>Executive</th><th>Beat</th><th>Agenda</th><th>Status</th></tr></thead><tbody>';
545 
  list.forEach(function(r){
546 
    var A=r.userId+",'"+js(r.name)+"','"+date+"'";
547 
    var go = r.userId ? ' class="clickable" onclick="openExec('+A+')"' : '';
548 
    var agenda = !r.hasBeat ? '<span style="color:#97a1b5">&mdash;</span>'
549 
      : (r.agendaFilled ? '<span style="color:#2f9e44">&#10003;</span>' : '<span class="badflag">&#10007;</span>');
550 
    h+='<tr'+go+'>'+
551 
       '<td><b>'+esc(r.name)+'</b></td>'+
552 
       '<td>'+esc(r.beatName||'-')+'</td>'+
553 
       '<td style="text-align:center">'+agenda+'</td>'+
554 
       '<td>'+esc(r.statusLabel||'')+'</td></tr>';
555 
  });
556 
  return h+'</tbody></table>';
557 
}
558 
function openCards(key){
559 
  var m=CARD_META[key]; if(!m) return;
560 
  var all=(window._execList||[]), date=window._boardDate||'';
561 
  var list=all.filter(m.f);
562 
  var dropped=m.drop ? all.filter(m.drop) : [];
563 
  var mb=el('bj-modal-back'), md=el('bj-modal');
564 
  var h='<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(m.title)+'</h3>'+
565 
        '<p class="desc">'+list.length+' '+(list.length===1?'executive':'executives')+' &middot; '+esc(m.desc)+'</p>'+
566 
        execRows(list, date);
567 
  if(m.drop){
568 
    h+='<div class="sectionlabel" style="margin-top:18px;color:#e8590c">'+esc(m.dropLabel)+' &middot; '+dropped.length+'</div>'+
569 
       execRows(dropped, date);
570 
  }
571 
  h+='<p class="desc" style="margin-top:10px">Click a row to open that executive\'s journey detail.</p>';
572 
  md.innerHTML=h; mb.classList.add('show');
573 
}
36905 vikas 574 
// Leads drill-down: lists every lead visit logged today (matches the KPI count).
575 
function openLeads(){
576 
  var list=window._leadsList||[], date=window._boardDate||'';
577 
  var mb=el('bj-modal-back'), md=el('bj-modal');
578 
  var h='<button class="x" onclick="closeModal()">&times;</button><h3>Leads on route</h3>'+
579 
        '<p class="desc">'+list.length+' lead '+(list.length===1?'visit':'visits')+' logged'+(date?' on '+esc(date):'')+'</p>';
580 
  if(!list.length){ h+='<p class="desc">No leads logged for this date.</p>'; }
581 
  else {
582 
    h+='<table><thead><tr><th>Executive</th><th>Lead</th><th>Check-in</th><th>Status</th></tr></thead><tbody>';
583 
    list.slice().sort(function(a,b){ return (''+a.exec).localeCompare(b.exec); }).forEach(function(r){
584 
      var A=r.userId+",'"+js(r.exec)+"','"+date+"'";
585 
      var go = r.userId ? ' class="clickable" onclick="openExec('+A+')"' : '';
586 
      h+='<tr'+go+'>'+
587 
         '<td><b>'+esc(r.exec)+'</b></td>'+
588 
         '<td>'+esc(r.lead||'-')+'</td>'+
589 
         '<td style="white-space:nowrap">'+(r.checkInTime?'<span class="ptime">'+esc(hhmm(r.checkInTime))+'</span>':'<span class="badflag">-</span>')+'</td>'+
590 
         '<td>'+esc(r.status||'')+'</td></tr>';
591 
    });
592 
    h+='</tbody></table><p class="desc" style="margin-top:10px">Click a row to open that executive\'s journey detail.</p>';
593 
  }
594 
  md.innerHTML=h; mb.classList.add('show');
595 
}
36913 vikas 596 
/* ===================== PERIOD (ANALYTICS) DRILL-DOWNS ===================== */
597 
function pModal(html){ el('bj-modal').innerHTML=html; el('bj-modal-back').classList.add('show'); }
598 
function pRange(){ return (el('bj-start')?el('bj-start').value:'')+' to '+(el('bj-end')?el('bj-end').value:''); }
599 
 
600 
// Scorecard list popup (used by KPI cards + funnel stages). Rows drill to the
601 
// executive's day-by-day. sortKey sorts descending.
602 
function openPScore(sortKey, title, desc){
603 
  var rows=(((window._period||{}).scorecard)||[]).slice();
604 
  if(sortKey) rows.sort(function(a,b){ return (b[sortKey]||0)-(a[sortKey]||0); });
605 
  pModal('<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(title)+'</h3>'+
606 
    '<p class="desc">'+esc(desc)+' &middot; '+esc(pRange())+' &middot; click a row for the day-by-day</p>'+pScoreTable(rows));
607 
}
608 
function pScoreTable(rows){
609 
  if(!rows.length) return '<p class="desc">No executives in scope.</p>';
610 
  var h='<table><thead><tr><th>Executive</th><th class="num">Plan</th><th class="num">Done</th><th class="num">Adher.</th><th class="num">Disc.</th><th class="num">Hrs</th><th class="num">Leads</th><th class="num">Geo&#9888;</th></tr></thead><tbody>';
611 
  rows.forEach(function(r){
612 
    var c=adhColor(r.adherencePct);
613 
    h+='<tr class="clickable" onclick="openExecPeriod('+r.authUserId+',\''+js(r.name)+'\')">'+
614 
       '<td><b>'+esc(r.name)+'</b> <span class="lvl">'+esc(r.level)+'</span></td>'+
615 
       '<td class="num">'+r.planned+'</td><td class="num">'+r.done+'</td>'+
616 
       '<td class="num"><b style="color:'+c+'">'+r.adherencePct+'%</b></td>'+
617 
       '<td class="num'+(r.discussionMin>0&&r.discussionMin<10?' warnflag':'')+'">'+(r.discussionMin||'-')+(r.discussionMin?'m':'')+'</td>'+
618 
       '<td class="num">'+r.workingHrs+'</td><td class="num">'+r.leads+'</td>'+
619 
       '<td class="num'+(r.geoFlags>0?' badflag':'')+'">'+r.geoFlags+'</td></tr>';
620 
  });
621 
  return h+'</tbody></table>';
622 
}
623 
// Funnel stage → the executives behind it (the scorecard, focused).
624 
function openPFunnel(key){
625 
  var map={ p_planned:['planned','Planned stops','Planned partner + lead stops per executive'],
626 
            p_punchedin:['done','Planned on punch-in days','Executives, planned vs done'],
627 
            p_checkedin:['done','Checked in','Visits checked in per executive'],
628 
            p_checkedout:['done','Checked out (done)','Visits completed per executive'] };
629 
  var m=map[key]; if(m) openPScore(m[0],m[1],m[2]);
630 
}
631 
// Executive day-by-day (scorecard row drill). Fetches /exec-period; each day
632 
// opens the journey detail / map modal.
633 
function openExecPeriod(authUserId, name){
634 
  pModal('<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(name)+'</h3>'+
635 
    '<p class="desc">Day-by-day &middot; '+esc(pRange())+'</p><div class="loading"><div class="spinner"></div>Loading&hellip;</div>');
636 
  fetch(BASE+'/exec-period?authUserId='+authUserId+'&startDate='+encodeURIComponent(el('bj-start').value)+'&endDate='+encodeURIComponent(el('bj-end').value),{headers:{'Accept':'application/json'}})
637 
    .then(function(r){ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); })
638 
    .then(function(d){
639 
      var rows=d.rows||[], uid=d.userId, nm=d.name||name;
640 
      var h='<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(nm)+'</h3>'+
641 
        '<p class="desc">'+rows.length+' day'+(rows.length===1?'':'s')+' &middot; '+esc(pRange())+(uid?' &middot; click a day for the journey detail':'')+'</p>';
642 
      if(!rows.length){ h+='<p class="desc">No scheduled or active days in this range.</p>'; }
643 
      else {
644 
        h+='<table><thead><tr><th>Date</th><th>Punch In/Out</th><th class="num">Planned</th><th class="num">Completed</th><th class="num">Deferred</th><th class="num">Total</th></tr></thead><tbody>';
645 
        rows.forEach(function(r){
646 
          var go = uid ? ' class="clickable" onclick="openExec('+uid+',\''+js(nm)+'\',\''+r.date+'\')"' : '';
647 
          h+='<tr'+go+'><td>'+esc(r.date)+'</td>'+
648 
             '<td style="white-space:nowrap">'+(r.punchIn?'<span class="ptime">'+esc(hhmm(r.punchIn))+'</span>':'<span class="badflag">-</span>')+
649 
               ' <span style="color:#97a1b5;font-size:11px">/ '+(r.punchOut?esc(hhmm(r.punchOut)):'--')+'</span></td>'+
650 
             '<td class="num">'+r.planned+'</td><td class="num cnt cgreen">'+r.done+'</td>'+
651 
             '<td class="num cnt cred">'+r.deferred+'</td><td class="num cnt cmuted">'+r.total+'</td></tr>';
652 
        });
653 
        h+='</tbody></table>';
654 
      }
655 
      el('bj-modal').innerHTML=h;
656 
    })
657 
    .catch(function(){ el('bj-modal').innerHTML='<button class="x" onclick="closeModal()">&times;</button><p class="desc">Could not load day-by-day.</p>'; });
658 
}
659 
// PJP coverage drill — execs with / without a plan (optionally one level).
660 
function openCoverage(level){
661 
  var all=((window._period||{}).coverageDetail)||[];
662 
  var list=level ? all.filter(function(r){ return r.level===level; }) : all;
663 
  var without=list.filter(function(r){ return !r.hasPlan; }), withP=list.filter(function(r){ return r.hasPlan; });
664 
  function tbl(rs){
665 
    if(!rs.length) return '<p class="desc">None.</p>';
666 
    var h='<table><tbody>';
667 
    rs.forEach(function(r){ h+='<tr class="clickable" onclick="openExecPeriod('+r.authUserId+',\''+js(r.name)+'\')"><td style="font-weight:600">'+esc(r.name)+'</td><td><span class="lvl">'+esc(r.level)+'</span></td></tr>'; });
668 
    return h+'</tbody></table>';
669 
  }
670 
  pModal('<button class="x" onclick="closeModal()">&times;</button><h3>PJP coverage'+(level?' &middot; '+esc(level):'')+'</h3>'+
671 
    '<p class="desc">'+withP.length+' of '+list.length+' have a monthly plan &middot; '+esc(pRange())+'</p>'+
672 
    '<div class="sectionlabel" style="color:#e03131">No plan &middot; '+without.length+'</div>'+tbl(without)+
673 
    '<div class="sectionlabel" style="color:#2f9e44;margin-top:16px">Has a plan &middot; '+withP.length+'</div>'+tbl(withP));
674 
}
675 
// Deferrals drill — all, or just system / genuine (from the donut segments).
676 
function openDeferrals(filter){
677 
  var all=((window._period||{}).deferralsList)||[];
678 
  var list = filter==='system' ? all.filter(function(r){ return r.system; })
679 
           : filter==='genuine' ? all.filter(function(r){ return !r.system; }) : all;
680 
  var title = filter==='system' ? 'Deferrals — system-flagged' : filter==='genuine' ? 'Deferrals — genuine reason' : 'Deferrals';
681 
  var h='<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(title)+'</h3>'+
682 
        '<p class="desc">'+list.length+' deferral'+(list.length===1?'':'s')+' &middot; '+esc(pRange())+'</p>';
683 
  if(!list.length){ h+='<p class="desc">None in this range.</p>'; }
684 
  else {
685 
    h+='<table><thead><tr><th>Executive</th><th>Partner</th><th>Reason</th><th>Date</th><th>Status</th></tr></thead><tbody>';
686 
    list.forEach(function(r){
687 
      h+='<tr><td style="font-weight:600;white-space:nowrap">'+esc(r.exec)+'</td>'+
688 
         '<td>'+esc(r.partner||'-')+'</td>'+
689 
         '<td style="color:'+(r.system?'#f08c00':'#2f9e44')+'">'+esc(r.reason||'-')+'</td>'+
690 
         '<td style="white-space:nowrap">'+esc(r.date||'')+'</td>'+
691 
         '<td>'+esc(r.status||'')+'</td></tr>';
692 
    });
693 
    h+='</tbody></table>';
694 
  }
695 
  pModal(h);
696 
}
697 
// Leads drill (period) — every lead created in the range.
698 
function openPLeads(){
699 
  var list=((window._period||{}).leadsList)||[];
700 
  var h='<button class="x" onclick="closeModal()">&times;</button><h3>Leads on route</h3>'+
701 
        '<p class="desc">'+list.length+' lead'+(list.length===1?'':'s')+' created &middot; '+esc(pRange())+'</p>';
702 
  if(!list.length){ h+='<p class="desc">No leads created in this range.</p>'; }
703 
  else {
704 
    h+='<table><thead><tr><th>Executive</th><th>Lead</th><th>City</th><th>Date</th><th>Status</th></tr></thead><tbody>';
705 
    list.forEach(function(r){
706 
      h+='<tr><td style="font-weight:600;white-space:nowrap">'+esc(r.exec)+'</td>'+
707 
         '<td>'+esc(r.lead||'-')+'</td><td>'+esc(r.city||'')+'</td>'+
708 
         '<td style="white-space:nowrap">'+esc(r.date||'')+'</td><td>'+esc(r.status||'')+'</td></tr>';
709 
    });
710 
    h+='</tbody></table>';
711 
  }
712 
  pModal(h);
713 
}
36877 vikas 714 
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 715 
var ATT_META = {
716 
  notPunchedIn:    {bg:'#fff0f0', fg:'#e03131', ic:'&#9888;',   title:'Not punched in',                  sub:'executives with a beat, not started', cls:'badflag'},
36897 vikas 717 
  idleStale:       {bg:'#fff4e6', fg:'#e8590c', ic:'&#9201;',   title:'Idle &mdash; off-store &gt; 40 min', sub:'stationary &gt;20 m from any store',  cls:'warnflag'},
36882 vikas 718 
  geofence:        {bg:'#fff0f0', fg:'#e03131', ic:'&#128205;', title:'Check-in outside store geofence',  sub:'&gt;50 m from partner\'s saved location', cls:'badflag'},
719 
  locationOff:     {bg:'#fff4e6', fg:'#e8590c', ic:'&#128244;', title:'Location turned off mid-journey',  sub:'GPS toggled off',                     cls:'warnflag'},
720 
  deferredAwaiting:{bg:'#eef1f6', fg:'#69748c', ic:'&#8635;',   title:'Deferred, awaiting re-action',     sub:'shops deferred today',                cls:''}
721 
};
36877 vikas 722 
function attentionList(a){
36882 vikas 723 
  window._att = a;
724 
  var order=['notPunchedIn','idleStale','geofence','locationOff','deferredAwaiting'];
36877 vikas 725 
  var h='';
36882 vikas 726 
  order.forEach(function(k){
727 
    var m=ATT_META[k], list=a[k]||[], n=list.length;
728 
    var detail = n ? names(list.map(function(x){return x.name;}),3) : m.sub;
729 
    var cls = n ? ' att clickable' : ' att';
730 
    var click = n ? ' onclick="openAttention(\''+k+'\')"' : '';
731 
    h+='<div class="'+cls.trim()+'"'+click+'><div class="ic" style="background:'+m.bg+';color:'+m.fg+'">'+m.ic+'</div>'+
732 
       '<div class="ab"><div class="atitle">'+m.title+'</div><div class="adet">'+detail+'</div></div>'+
733 
       '<div class="acount '+(n?m.cls:'')+'">'+n+'</div>'+(n?'<span class="chev">&#9656;</span>':'')+'</div>';
734 
  });
36877 vikas 735 
  return h;
736 
}
36882 vikas 737 
function openAttention(key){
738 
  var a=window._att||{}, list=a[key]||[], m=ATT_META[key]||{title:'Detail'};
739 
  var mb=el('bj-modal-back'), md=el('bj-modal');
36897 vikas 740 
  // Off-site check-ins can be approved here, but only by L5/Final (canApprove).
741 
  var showApprove = (key==='geofence' && window._canApprove);
36882 vikas 742 
  var h='<button class="x" onclick="closeModal()">&times;</button><h3>'+m.title+'</h3>'+
36897 vikas 743 
        '<p class="desc">'+list.length+' '+(list.length===1?'item':'items')+
744 
        (showApprove?' &middot; approving updates the partner\'s saved coordinates':'')+'</p>';
36882 vikas 745 
  if(!list.length){ h+='<p class="desc">Nothing here.</p>'; }
746 
  else{
747 
    h+='<table><tbody>';
748 
    list.forEach(function(x){
36897 vikas 749 
      var act='';
750 
      if(showApprove) act='<td class="num" style="white-space:nowrap">'+(x.trackingId?'<button class="btn-ok" onclick="openValidate('+x.trackingId+')">Validate &amp; Approve</button>':'')+'</td>';
36882 vikas 751 
      h+='<tr><td style="font-weight:600;white-space:nowrap">'+esc(x.name)+'</td>'+
36897 vikas 752 
         '<td style="color:#69748c">'+esc(x.detail||'')+'</td>'+act+'</tr>';
36882 vikas 753 
    });
754 
    h+='</tbody></table>';
755 
  }
756 
  md.innerHTML=h; mb.classList.add('show');
757 
}
36897 vikas 758 
// Step 2: review the check-in photo/document before approving.
759 
function openValidate(trackingId){
760 
  var list=(window._att&&window._att.geofence)||[], item=null;
761 
  for(var i=0;i<list.length;i++){ if(list[i].trackingId===trackingId){ item=list[i]; break; } }
762 
  if(!item){ return; }
763 
  var img = (item.attachment && window._mediaUrl)
36903 vikas 764 
    ? '<img class="valimg" src="'+esc(window._mediaUrl+item.attachment)+'" onclick="bjOpenImage(this.src)" onerror="this.outerHTML=\'<div class=&quot;valph&quot;>&#128247; Photo unavailable</div>\'">'
36897 vikas 765 
    : '<div class="valph">&#128247; No photo on this check-in</div>';
766 
  el('bj-modal').innerHTML='<button class="x" onclick="closeModal()">&times;</button><h3>Validate check-in</h3>'+
767 
    '<p class="desc">'+esc(item.name)+' &middot; '+esc(item.detail||'')+'</p>'+
768 
    '<div class="valwrap">'+img+'</div>'+
769 
    '<div class="valactions">'+
770 
      '<button class="exectab" onclick="openAttention(\'geofence\')">&larr; Back</button>'+
771 
      '<button class="btn-ok" onclick="approveValidated('+trackingId+',this)">Approve</button>'+
772 
    '</div>';
773 
}
774 
function approveValidated(trackingId, btn){
775 
  btn.disabled=true; btn.textContent='Approving…';
776 
  fetch(CTX+'/beat-journey/approve-checkin',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'trackingId='+trackingId})
777 
    .then(function(r){ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); })
778 
    .then(function(){
779 
      if(window._att && window._att.geofence){ window._att.geofence = window._att.geofence.filter(function(x){ return x.trackingId!==trackingId; }); }
780 
      if(window._att && window._att.geofence && window._att.geofence.length) openAttention('geofence');
781 
      else closeModal();
782 
    })
783 
    .catch(function(){ btn.disabled=false; btn.textContent='Approve'; alert('Approve failed (not authorised, or server error).'); });
784 
}
36877 vikas 785 
 
786 
/* ============================ PERIOD ============================ */
787 
function loadPeriod(){
788 
  spinner();
789 
  var u = BASE + '/data?startDate=' + encodeURIComponent(el('bj-start').value) + '&endDate=' + encodeURIComponent(el('bj-end').value) + qs();
790 
  fetch(u, {headers:{'Accept':'application/json'}})
791 
    .then(function(r){ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); })
792 
    .then(renderPeriod).catch(fail);
793 
}
794 
function tile(t,v){ return '<div class="tile"><div class="t">'+t+'</div><div class="v">'+v+'</div></div>'; }
795 
function renderPeriod(d){
36913 vikas 796 
  window._period = d;          // drill-downs read scorecard / lists from here
36877 vikas 797 
  var k=d.kpis, f=d.funnel, df=d.deferral, u=d.utilization, t=d.travel, o=d.outcomes;
798 
  var neverTouched = Math.max((f.plannedStops||0)-(f.checkedIn||0)-(df.total||0),0);
799 
  var h='';
800 
  h+='<div class="kpis">';
36913 vikas 801 
  h+=kpi('&#9878;','#fff4e6','#f08c00','Adherence',k.adherencePct+'<small>%</small>',num(k.doneStops)+' of '+num(k.plannedStops)+' stops done',adhColor(k.adherencePct),"openPScore('adherencePct','Adherence','Planned vs done per executive')");
802 
  h+=kpi('&#128506;','#e7f5ff','#1098ad','PJP coverage L1',k.coverageL1Pct+'<small>%</small>',k.coverageL1With+'/'+k.coverageL1Total+' have a plan','#1098ad',"openCoverage('L1')");
803 
  h+=kpi('&#128694;','#ebfbee','#2f9e44','Visits / active day',k.avgVisitsPerActiveDay,'across '+num(k.journeys)+' journeys',null,"openPScore('done','Visits / active day','Visits completed per executive')");
804 
  h+=kpi('&#128172;','#eef1fb','#3b5bdb','Discussion / store',k.avgDiscussionMin+' <small>min</small>','target 30&ndash;45 min', k.avgDiscussionMin>0&&k.avgDiscussionMin<30?'#e8590c':null,"openPScore('discussionMin','Discussion / store','Avg in-store discussion per executive')");
805 
  h+=kpi('&#8635;','#fff0f0','#e03131','Auto "missed"',num(k.autoMissed),k.autoMissedSystemPct+'% system-flagged','#e03131',"openDeferrals()");
806 
  h+=kpi('&#9733;','#fff0f6','#d6336c','Leads on route',num(k.leadsCreated),'this period',null,"openPLeads()");
36877 vikas 807 
  h+='</div>';
808 
 
809 
  h+='<div class="sectionlabel">Aggregate Journey Funnel</div><div class="card"><div class="funnel">';
810 
  var pl=f.plannedStops||1;
36913 vikas 811 
  h+=fstep('Planned stops',f.plannedStops,100,'scheduled',false,false,'p_planned');
812 
  h+=fstep('Planned on punch-in days',f.punchedIn,pct(f.punchedIn,pl),fdrop(f.dropPunch,'no punch-in'),f.dropPunch>0,false,'p_punchedin');
813 
  h+=fstep('Checked in',f.checkedIn,pct(f.checkedIn,pl),fdrop(f.dropCheckin,'reached, skipped'),f.dropCheckin>0,false,'p_checkedin');
814 
  h+=fstep('Checked out (done)',f.checkedOut,pct(f.checkedOut,pl),fdrop(f.dropCheckout,'no checkout'),f.dropCheckout>0,true,'p_checkedout');
36877 vikas 815 
  h+='</div></div>';
816 
 
817 
  h+='<div class="sectionlabel">Adherence &amp; Coverage</div><div class="grid g3">';
818 
  h+='<div class="card"><h2>Per-executive scorecard <span style="color:#97a1b5;font-weight:500;font-size:12px">&middot; '+d.scorecard.length+' executives</span></h2><p class="desc">The coaching list &mdash; click a header to sort. Reds are where to intervene.</p>'+scorecardTable(d.scorecard)+'</div>';
819 
  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>';
820 
  h+='</div>';
821 
 
822 
  h+='<div class="sectionlabel">Deferrals, Travel &amp; Outcomes</div><div class="grid g2">';
823 
  h+='<div class="card"><h2>Deferral nature</h2><p class="desc">Deliberate, or just auto-flagged missed beats?</p>'+deferDonut(df)+'</div>';
824 
  h+='<div class="card"><h2>Travel &amp; route quality</h2><p class="desc">Straight-line distance per leg between consecutive stops.</p>'+travelBlock(t)+'</div>';
825 
  h+='</div>';
826 
 
827 
  h+='<div class="sectionlabel">Outcomes &amp; Visit Quality</div><div class="card"><p class="desc">Captured on the check-out form &mdash; the substance of each store conversation.</p>'+
828 
     '<div class="tiles" style="grid-template-columns:repeat(4,1fr)">'+
829 
     tile('Partner remark filled', o.remarkFilledPct+'<small>%</small>')+
830 
     tile('Avg partner rating', (o.avgRating||0)+'<small>/5</small>')+
831 
     tile('Audit checklist done', o.auditDonePct+'<small>%</small>')+
832 
     tile('Next-visit follow-up set', o.nextVisitPct+'<small>%</small>')+
833 
     '</div></div>';
834 
 
835 
  h+='<div class="sectionlabel">What to fix</div>'+findingsBlock(d.findings);
836 
  h+=sourcesCard();
837 
  el('bj-content').innerHTML=h;
838 
  window._scorecard = d.scorecard;
839 
}
840 
var sortKey=null, sortAsc=false;
841 
function sortCard(key){
842 
  if(sortKey===key) sortAsc=!sortAsc; else { sortKey=key; sortAsc=false; }
843 
  window._scorecard.sort(function(a,b){ var x=a[key],y=b[key];
844 
    if(typeof x==='string') return sortAsc? (''+x).localeCompare(y):(''+y).localeCompare(x);
845 
    return sortAsc? x-y : y-x; });
846 
  document.getElementById('scTbl').outerHTML = scorecardTable(window._scorecard);
847 
}
848 
function scorecardTable(rows){
849 
  if(!rows||!rows.length) return '<p class="desc">No beat owners in scope for this period.</p>';
850 
  var h='<table id="scTbl"><thead><tr>'+
851 
    '<th onclick="sortCard(\'name\')">Executive</th>'+
852 
    '<th class="num" onclick="sortCard(\'planned\')">Plan</th>'+
853 
    '<th class="num" onclick="sortCard(\'done\')">Done</th>'+
854 
    '<th class="num" onclick="sortCard(\'adherencePct\')">Adher.</th>'+
855 
    '<th class="num" onclick="sortCard(\'discussionMin\')">Disc.</th>'+
856 
    '<th class="num" onclick="sortCard(\'workingHrs\')">Hrs</th>'+
857 
    '<th class="num" onclick="sortCard(\'leads\')">Leads</th>'+
858 
    '<th class="num" onclick="sortCard(\'geoFlags\')">Geo&#9888;</th></tr></thead><tbody>';
859 
  rows.forEach(function(r){
860 
    var c=adhColor(r.adherencePct);
36913 vikas 861 
    h+='<tr class="clickable" onclick="openExecPeriod('+r.authUserId+',\''+js(r.name)+'\')"><td>'+esc(r.name)+' <span class="lvl">'+esc(r.level)+'</span></td>'+
36877 vikas 862 
       '<td class="num">'+r.planned+'</td><td class="num">'+r.done+'</td>'+
863 
       '<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 864 
       '<td class="num'+(r.discussionMin>0&&r.discussionMin<10?' warnflag':'')+'">'+(r.discussionMin||'-')+(r.discussionMin?'m':'')+'</td>'+
36877 vikas 865 
       '<td class="num">'+r.workingHrs+'</td><td class="num">'+r.leads+'</td>'+
866 
       '<td class="num'+(r.geoFlags>0?' badflag':'')+'">'+r.geoFlags+'</td></tr>';
867 
  });
868 
  return h+'</tbody></table>';
869 
}
870 
function coverageBars(rows){
871 
  if(!rows||!rows.length) return '<p class="desc">No coverage data.</p>';
872 
  var max=0; rows.forEach(function(r){ if(r.totalUsers>max)max=r.totalUsers; }); if(!max)max=1;
873 
  var h=''; rows.forEach(function(r){
874 
    var w=pct(r.withPjp,max), wt=pct(r.totalUsers,max);
36913 vikas 875 
    h+='<div class="barrow clickable" onclick="openCoverage(\''+js(r.level)+'\')" title="Click to see these executives"><div class="name">'+esc(r.level)+'</div><div class="track">'+
36877 vikas 876 
       '<div style="position:absolute;inset:0;width:'+wt+'%;background:#e3e8f5;border-radius:7px"></div>'+
877 
       '<div class="fill" style="width:'+w+'%;position:relative;background:linear-gradient(90deg,#1098ad,#22b8cf)">'+(r.withPjp||'')+'</div></div>'+
878 
       '<div class="meta">'+r.withPjp+'/'+r.totalUsers+' &middot; '+r.coveragePct+'%</div></div>';
879 
  });
880 
  return h;
881 
}
882 
function utilBlock(u){
883 
  return '<h2 style="margin-top:18px">Working-hour utilization</h2><p class="desc">Where the average working day goes.</p>'+
884 
    '<div class="util">'+
885 
    '<div style="width:'+u.inStorePct+'%;background:#2f9e44">In-store '+u.inStorePct+'%</div>'+
886 
    '<div style="width:'+u.travelPct+'%;background:#3b5bdb">Travel '+u.travelPct+'%</div>'+
887 
    '<div style="width:'+u.idlePct+'%;background:#e03131">Idle '+u.idlePct+'%</div></div>'+
888 
    '<div class="utlegend"><span><span class="dot" style="background:#2f9e44;margin:0"></span>Selling '+u.inStoreHrs+' h</span>'+
889 
    '<span><span class="dot" style="background:#3b5bdb;margin:0"></span>Travel '+u.travelHrs+' h</span>'+
890 
    '<span><span class="dot" style="background:#e03131;margin:0"></span>Idle '+u.idleHrs+' h</span></div>';
891 
}
892 
function deferDonut(df){
893 
  var sysPct=df.systemPct||0;
894 
  var g='conic-gradient(#f59f00 0 '+sysPct+'%, #2f9e44 '+sysPct+'% 100%)';
36913 vikas 895 
  return '<div class="donutwrap"><div class="donut clickable" onclick="openDeferrals()" title="Click to see all deferrals" style="background:'+g+'"><div class="center">'+
36877 vikas 896 
    '<div style="font-size:24px;font-weight:780">'+num(df.total)+'</div><div style="font-size:11px;color:#97a1b5">deferrals</div></div></div>'+
897 
    '<div class="legend">'+
36913 vikas 898 
    '<div class="it clickable" onclick="openDeferrals(\'system\')"><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>'+
899 
    '<div class="it clickable" onclick="openDeferrals(\'genuine\')"><span class="dot" style="background:#2f9e44"></span><div><b>'+df.human+'</b> genuine reason ('+df.humanPct+'%)</div></div>'+
36877 vikas 900 
    '<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>'+
36913 vikas 901 
    '</div></div><p class="desc" style="margin-top:13px">Click the chart for all deferrals, or a legend row for system / genuine. "System" vs "genuine" is read from the deferral reason.</p>';
36877 vikas 902 
}
903 
function travelBlock(t){
904 
  var rows=t.legBuckets||[], max=0; rows.forEach(function(r){ if(r.count>max)max=r.count; }); if(!max)max=1;
905 
  var colors={'0-2 km':'#2f9e44','2-5 km':'#2f9e44','5-15 km':'#82c91e','15-50 km':'#f59f00','50 km+':'#e03131'};
906 
  var h=''; rows.forEach(function(r){
907 
    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>';
908 
  });
909 
  h+='<div class="tiles" style="margin-top:14px">'+
910 
     tile('Avg leg', t.avgLegKm+'<small> km</small>')+
911 
     tile('Legs &gt; 15 km', t.pctOver15+'<small>%</small>')+
912 
     tile('Actual / estimate', (t.actualVsEstimateRatio||0)+'<small>&times;</small>')+'</div>';
913 
  return h;
914 
}
915 
function findingsBlock(items){
916 
  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>';
917 
  var sev={high:'#e03131',med:'#f59f00',low:'#2f9e44'};
918 
  var h='<div class="callout"><h2>Recommended management actions</h2><p class="desc">Generated from this period\'s data.</p>';
919 
  items.forEach(function(x){
920 
    h+='<div class="fix"><div class="sev" style="background:'+(sev[x.severity]||'#3b5bdb')+'"></div><div class="fb">'+
921 
       '<div class="ft">'+esc(x.title)+'</div><div class="fd">'+esc(x.detail)+'</div>'+
922 
       '<div class="act">&rarr; '+esc(x.action)+'</div></div></div>';
923 
  });
924 
  return h+'</div>';
925 
}
926 
function sourcesCard(){
927 
  return '<div class="sectionlabel">Where the numbers come from</div><div class="card">'+
928 
    '<p class="desc">Nothing new needs to be captured &mdash; everything here is built from what the field app already records on each journey.</p>'+
929 
    '<ul style="margin:0;padding-left:18px;line-height:1.95;font-size:13px;color:#3a4459">'+
930 
    '<li>The <b>journey timeline</b> (punch-in, check-ins/outs, deferrals, punch-out) comes from what the executive taps in the app.</li>'+
931 
    '<li><b>Adherence</b> compares the partners planned on each beat against the stores actually visited.</li>'+
932 
    '<li><b>Time, travel and distance</b> use the in-store and travel durations logged per visit.</li>'+
933 
    '<li><b>Geofence / fake-visit checks</b> compare the check-in GPS against the partner\'s saved shop location (flagged beyond ~50 m).</li>'+
934 
    '<li><b>Visit outcomes</b> (remarks, rating, audit, next visit) come from the check-out form.</li>'+
935 
    '<li><b>Coverage and the manager view</b> follow the existing L1&ndash;L5 sales hierarchy, so each manager sees only their team.</li>'+
936 
    '</ul></div>';
937 
}
938 
 
939 
/* ============================ EXEC DRILLDOWN ============================ */
36897 vikas 940 
function openExec(userId, name, date, tab){
36877 vikas 941 
  if(!userId){ return; }
36897 vikas 942 
  window._exec = {userId:userId, name:name, date:date, detail:null, tab:(tab||'timeline')};
36877 vikas 943 
  var mb=el('bj-modal-back'), m=el('bj-modal');
944 
  m.innerHTML='<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(name)+'</h3><p class="desc">Journey detail &middot; '+esc(date)+'</p><div class="loading"><div class="spinner"></div>Loading&hellip;</div>';
945 
  mb.classList.add('show');
36882 vikas 946 
  fetch(CTX+'/beat-journey/journey-detail?userId='+userId+'&date='+encodeURIComponent(date),{headers:{'Accept':'application/json'}})
36877 vikas 947 
    .then(function(r){ return r.json(); }).then(function(d){
36882 vikas 948 
      window._mediaUrl = d.mediaUrl || '';
36897 vikas 949 
      window._exec.detail = d;
950 
      renderExec(window._exec.tab);
951 
    }).catch(function(){ el('bj-modal').innerHTML='<button class="x" onclick="closeModal()">&times;</button><p class="desc">Could not load detail.</p>'; });
952 
}
953 
function renderExec(tab){
954 
  var ex=window._exec; if(!ex) return;
955 
  var d=ex.detail||{};
956 
  var head='<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(ex.name)+'</h3>'+
957 
    '<p class="desc">Journey detail &middot; '+esc(ex.date)+' &middot; battery '+(d.batteryLevel==null?'-':d.batteryLevel+'%')+' &middot; loc-off '+(d.locationToggleCount||0)+'</p>'+
958 
    '<div class="exectabs">'+
959 
      '<button class="exectab'+(tab==='timeline'?' active':'')+'" onclick="renderExec(\'timeline\')">&#128221; Timeline</button>'+
960 
      '<button class="exectab'+(tab==='map'?' active':'')+'" onclick="renderExec(\'map\')">&#128205; Live Location</button>'+
961 
    '</div>';
962 
  if(tab==='map'){
36903 vikas 963 
    el('bj-modal').innerHTML=head+'<div id="bjRouteLegend" class="bjlegend"></div>'+
964 
      '<div id="bjMap"><div class="loading"><div class="spinner"></div>Loading map&hellip;</div></div>';
36897 vikas 965 
    bjShowMap(ex.userId, ex.date);
966 
  } else {
967 
    el('bj-modal').innerHTML=head+buildTimelineHtml(d, ex.date);
968 
  }
969 
}
970 
function buildTimelineHtml(d, date){
971 
  var all=(d.visits||[]).slice();
972 
  // Sequence like the field report: Punch in -> visited stops (by check-in time)
973 
  // -> PENDING/not-visited -> Punch out. The attendance row carries both punch-in
974 
  // & punch-out times; split it into the two bookends.
975 
  var att=null, visited=[], pending=[];
976 
  all.forEach(function(x){
977 
    var tt=(x.taskType||'').toLowerCase(), mt=(x.markType||'').toUpperCase();
978 
    if(tt==='attendance' || mt.indexOf('PUNCH')>=0){ if(!att) att=x; }
979 
    else if(x.checkInTime){ visited.push(x); }
980 
    else { pending.push(x); }
981 
  });
982 
  visited.sort(function(a,b){ return tlSecs(a.checkInTime)-tlSecs(b.checkInTime); });
36882 vikas 983 
 
36903 vikas 984 
  var distKm=0, inStoreSec=0, leadsN=0;
36897 vikas 985 
  all.forEach(function(x){
986 
    var tt=(x.taskType||'').toLowerCase();
987 
    if(tt==='attendance') return;
988 
    if(x.totalDistance) distKm += (parseFloat(x.totalDistance)||0);
989 
    inStoreSec += toSec(x.timeSpent);
990 
    if(tt==='lead') leadsN++;
991 
  });
992 
  var workSec = (att && att.checkInTime && att.checkOutTime) ? (toSec(att.checkOutTime)-toSec(att.checkInTime)) : (att?toSec(att.timeSpent):0);
993 
  if(workSec<0) workSec=0;
36903 vikas 994 
  // Travel = working − in-store, so In-store + Travel = Working hours exactly
995 
  // (summing per-leg transit under-counts the idle/waiting between stops).
996 
  var transitSec = Math.max(0, workSec - inStoreSec);
36882 vikas 997 
 
36897 vikas 998 
  var seq=[];
999 
  if(att && att.checkInTime) seq.push(punchEntry('in', att.checkInTime));
1000 
  visited.forEach(function(x){ seq.push(x); });
1001 
  pending.forEach(function(x){ seq.push(x); });
1002 
  if(att && att.checkOutTime) seq.push(punchEntry('out', att.checkOutTime));
36882 vikas 1003 
 
36897 vikas 1004 
  var h='<div class="jstats">'+
1005 
    jstat(fmtSec(workSec),'Working hours')+
1006 
    jstat(fmtSec(inStoreSec),'In-store time')+
1007 
    jstat(fmtSec(transitSec),'Travel time')+
1008 
    jstat(distKm.toFixed(2)+' km','Distance Covered')+
36905 vikas 1009 
    jstat(visited.length+(leadsN?' / '+leadsN+'L':''),'Visits / Leads')+
36897 vikas 1010 
    '</div>';
1011 
  if(!seq.length){ return h+'<p class="desc">No tracking events for this day.</p>'; }
1012 
  h+='<div class="tl">';
1013 
  var ri=0;
1014 
  seq.forEach(function(x){
1015 
    if(!x._punch && x.checkInTime){
1016 
      var tr=(x.transitTime && x.transitTime!=='00:00:00') ? x.transitTime : null;
1017 
      var km=(x.totalDistance && parseFloat(x.totalDistance)>0) ? (parseFloat(x.totalDistance).toFixed(2)+' km') : null;
1018 
      if(tr || km){
1019 
        var parts=[]; if(tr) parts.push('&#128663; '+esc(tr)); if(km) parts.push(esc(km));
1020 
        h+='<div class="tlgap"><span class="gappill">'+parts.join(' &middot; ')+'</span></div>';
36877 vikas 1021 
      }
36897 vikas 1022 
    }
1023 
    h+=tlRow(x, ri%2===0?'left':'right'); ri++;
1024 
  });
1025 
  h+='</div>';
1026 
  return h;
36877 vikas 1027 
}
36897 vikas 1028 
 
1029 
/* ---- live location map (reuses /beat-report/live-tracking pathPoints) ---- */
1030 
function bjLoadMaps(cb){
1031 
  if(window.google && window.google.maps){ cb(); return; }
1032 
  window._mapsCbs = window._mapsCbs || [];
1033 
  window._mapsCbs.push(cb);
1034 
  if(window._mapsLoading) return;
1035 
  window._mapsLoading=true;
1036 
  window.__bjMapsReady=function(){ (window._mapsCbs||[]).forEach(function(f){ try{f();}catch(e){} }); window._mapsCbs=[]; };
1037 
  var s=document.createElement('script');
1038 
  s.src='https://maps.googleapis.com/maps/api/js?key=AIzaSyAckO0y4Z6WhBOuMjNjioWLSYZDhGEvGBc&libraries=geometry&v=weekly&callback=__bjMapsReady';
1039 
  s.async=true; document.head.appendChild(s);
1040 
}
1041 
function bjShowMap(userId, date){
1042 
  bjLoadMaps(function(){
1043 
    fetch(CTX+'/beat-journey/track-map?userId='+userId+'&date='+encodeURIComponent(date),{headers:{'Accept':'application/json'}})
1044 
      .then(function(r){ return r.json(); }).then(function(data){ bjDrawMap(data); })
1045 
      .catch(function(){ var e=document.getElementById('bjMap'); if(e) e.innerHTML='<div class="loading">Could not load location.</div>'; });
1046 
  });
1047 
}
1048 
function bjMarkColor(mt){
1049 
  mt=(mt||'').toUpperCase();
1050 
  if(mt.indexOf('CHECKOUT')>=0) return '#2f9e44';
1051 
  if(mt==='CHECKIN') return '#f59f00';
1052 
  if(mt==='DEFERRED') return '#e8590c';
1053 
  if(mt==='PENDING') return '#97a1b5';
1054 
  return '#3b5bdb';
1055 
}
1056 
function bjMarkInfo(v,color){
1057 
  return '<div style="font-size:12px;max-width:240px"><b>'+esc(v.name||'')+'</b><br>'+
1058 
    '<span style="background:'+color+';color:#fff;border-radius:4px;padding:1px 6px;font-size:10px">'+esc(v.markType||'')+'</span>'+
1059 
    (v.checkInTime?'<br>In: <b>'+esc(v.checkInTime)+'</b>':'')+
1060 
    (v.checkOutTime?'<br>Out: <b>'+esc(v.checkOutTime)+'</b>':'')+
1061 
    (v.timeSpent?'<br>Time spent: <b>'+esc(v.timeSpent)+'</b>':'')+
1062 
    (v.address?'<br>'+esc(v.address):'')+'</div>';
1063 
}
1064 
// Teardrop pin (same shape as Beat Report) with a white disc + label.
1065 
function bjPin(color, label){
1066 
  var svg='<svg xmlns="http://www.w3.org/2000/svg" width="28" height="40" viewBox="0 0 28 40">'+
1067 
    '<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+'"/>'+
1068 
    '<circle cx="14" cy="14" r="7" fill="#ffffff"/>'+
1069 
    '<text x="14" y="18" text-anchor="middle" font-size="10" font-weight="bold" fill="'+color+'">'+label+'</text></svg>';
1070 
  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)};
1071 
}
1072 
// Larger pin sized to fit a duration label (idle stops).
1073 
function bjStopPin(label){
1074 
  var s=String(label), d=Math.max(40, 14+s.length*7), H=d+10, r=d/2;
1075 
  var svg='<svg xmlns="http://www.w3.org/2000/svg" width="'+d+'" height="'+H+'" viewBox="0 0 '+d+' '+H+'">'+
1076 
    '<polygon points="'+(r-7)+','+(d-7)+' '+(r+7)+','+(d-7)+' '+r+','+H+'" fill="#e8590c"/>'+
1077 
    '<circle cx="'+r+'" cy="'+r+'" r="'+(r-2)+'" fill="#e8590c" stroke="#ffffff" stroke-width="2"/>'+
1078 
    '<text x="'+r+'" y="'+(r+4)+'" text-anchor="middle" font-size="12" font-weight="bold" fill="#ffffff">'+s+'</text></svg>';
1079 
  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)};
1080 
}
1081 
function fmtDur2(sec){ sec=sec||0; var m=Math.floor(sec/60), s=sec%60; return m+'m'+(s>0?' '+s+'s':''); }
1082 
function bjDrawMap(data){
1083 
  var box=document.getElementById('bjMap'); if(!box) return;
1084 
  box.innerHTML='';
1085 
  var map=new google.maps.Map(box,{zoom:12,center:{lat:20.5937,lng:78.9629},mapTypeControl:true,streetViewControl:false});
1086 
  var bounds=new google.maps.LatLngBounds(), has=false;
1087 
  function pin(pos,icon,zi,title,info){
1088 
    has=true; bounds.extend(pos);
1089 
    var m=new google.maps.Marker({position:pos,map:map,zIndex:zi||100,icon:icon,title:title||''});
1090 
    if(info){ var iw=new google.maps.InfoWindow({content:info}); m.addListener('click',function(){ iw.open(map,m); }); }
1091 
    return m;
1092 
  }
1093 
 
36903 vikas 1094 
  // 1) last-known location marker (the GPS trail itself is drawn as the "taken"
1095 
  // route in bjDrawRoutes, straight from location_tracking_path).
36897 vikas 1096 
  var pts=(data.path||[]).map(function(p){ return {lat:p.lat,lng:p.lng}; });
1097 
  if(pts.length){
1098 
    pts.forEach(function(p){ bounds.extend(p); has=true; });
1099 
    var lastPt=pts[pts.length-1];
1100 
    var lk=new google.maps.Marker({position:lastPt,map:map,zIndex:999,title:'Last Known Location',
1101 
      icon:{url:CTX+'/resources/images/salesman.png',scaledSize:new google.maps.Size(40,40),anchor:new google.maps.Point(20,20)}});
1102 
    var lkIw=new google.maps.InfoWindow({content:'<div style="font-size:12px"><b>&#128205; Last known location</b></div>'});
1103 
    lk.addListener('click',function(){ lkIw.open(map,lk); });
1104 
  }
1105 
 
1106 
  // 2) idle stops (>=10 min within 50 m)
1107 
  (data.idleStops||[]).forEach(function(s){
1108 
    var lbl=fmtDur2(s.seconds);
1109 
    pin({lat:s.lat,lng:s.lng}, bjStopPin(lbl), 80, 'Idle '+lbl,
1110 
      '<div style="font-size:12px"><b>&#9201; Idle stop</b><br>Stayed ~'+esc(lbl)+' within 50 m</div>');
1111 
  });
1112 
 
1113 
  // 3) every visit
1114 
  var idx=0;
1115 
  (data.visits||[]).forEach(function(v){
1116 
    var color=bjMarkColor(v.markType);
1117 
    pin({lat:v.lat,lng:v.lng}, bjPin(color, String(++idx)), 100,
1118 
      (v.name||'')+' ('+v.markType+')', bjMarkInfo(v,color));
1119 
  });
1120 
 
1121 
  // 4) punch in / punch out
1122 
  if(data.punchIn){
1123 
    pin({lat:data.punchIn.lat,lng:data.punchIn.lng}, bjPin('#2f9e44','P'), 300,
1124 
      'Punch in'+(data.punchIn.time?' · '+data.punchIn.time:''),
1125 
      '<div style="font-size:12px"><b>&#9873; Punch in</b>'+(data.punchIn.time?'<br>'+esc(data.punchIn.time):'')+'</div>');
1126 
  }
1127 
  if(data.punchOut){
1128 
    pin({lat:data.punchOut.lat,lng:data.punchOut.lng}, bjPin('#7048e8','X'), 300,
1129 
      'Punch out'+(data.punchOut.time?' · '+data.punchOut.time:''),
1130 
      '<div style="font-size:12px"><b>&#9873; Punch out</b>'+(data.punchOut.time?'<br>'+esc(data.punchOut.time):'')+'</div>');
1131 
  }
1132 
 
36903 vikas 1133 
  // 5) routes — actual road taken vs Google-suggested optimal, for comparison.
1134 
  // Checkpoints in journey order: punch in → visits (by check-in time) → punch out.
1135 
  var cps=[];
1136 
  if(data.punchIn) cps.push({lat:data.punchIn.lat,lng:data.punchIn.lng});
1137 
  (data.visits||[]).slice()
1138 
    .filter(function(v){ return v.lat && v.lng; })
1139 
    .sort(function(a,b){ return tlSecs(a.checkInTime)-tlSecs(b.checkInTime); })
1140 
    .forEach(function(v){ cps.push({lat:v.lat,lng:v.lng}); });
1141 
  if(data.punchOut) cps.push({lat:data.punchOut.lat,lng:data.punchOut.lng});
1142 
  bjDrawRoutes(map, cps, pts);
1143 
 
36897 vikas 1144 
  if(has){
1145 
    map.fitBounds(bounds);
1146 
    google.maps.event.addListenerOnce(map,'idle',function(){ if(map.getZoom()>16) map.setZoom(16); });
1147 
  } else {
1148 
    box.innerHTML='<div class="loading">No GPS / location recorded for this day.</div>';
1149 
  }
1150 
}
36903 vikas 1151 
// TAKEN route = the recorded GPS trail (location_tracking_path) routed along the
1152 
// road network so it follows actual roads rather than straight hops between sparse
1153 
// pings. SUGGESTED route = the Google-optimal road route through the journey's
1154 
// checkpoints (green dotted). Both are drawn and compared by distance.
1155 
function bjDrawRoutes(map, cps, pathPts){
1156 
  var legend=bjRouteLegend();
1157 
 
1158 
  // taken — road route traced through the recorded breadcrumb (in order)
1159 
  if(pathPts && pathPts.length>=2){
1160 
    var ds1=new google.maps.DirectionsService();
1161 
    var sample=bjSample(pathPts, 25);                          // Directions cap: 25 incl. ends
1162 
    var o=sample[0], d=sample[sample.length-1];
1163 
    var vias=sample.slice(1,-1).map(function(p){ return {location:new google.maps.LatLng(p.lat,p.lng), stopover:false}; });
1164 
    bjRouteRequest(ds1, o, d, vias, false, function(res){
1165 
      bjRenderRoute(map, res, {color:'#e03131', dashed:false, z:55});
1166 
      legend.set('taken', bjRouteKm(res));
1167 
    }, function(status){
1168 
      console.warn('Directions (taken) failed:', status);
1169 
      // fallback: plot the raw breadcrumb (straight hops) and measure along it
1170 
      new google.maps.Polyline({path:pathPts,geodesic:false,strokeColor:'#e03131',strokeOpacity:.9,strokeWeight:4,zIndex:55,map:map});
1171 
      var ll=pathPts.map(function(p){ return new google.maps.LatLng(p.lat,p.lng); });
1172 
      legend.set('taken', google.maps.geometry.spherical.computeLength(ll)/1000);
1173 
    });
1174 
  } else {
1175 
    legend.set('taken', false);
1176 
  }
1177 
 
1178 
  // suggested — Google-optimal route through punch-in → visits → punch-out
1179 
  if(cps.length>=2){
1180 
    var ds=new google.maps.DirectionsService();
1181 
    var origin=cps[0], dest=cps[cps.length-1], mids=cps.slice(1,-1), capped=false;
1182 
    if(mids.length>23){ mids=mids.slice(0,23); capped=true; }  // Directions allows 23 waypoints
1183 
    var wpts=mids.map(function(p){ return {location:new google.maps.LatLng(p.lat,p.lng), stopover:true}; });
1184 
    bjRouteRequest(ds, origin, dest, wpts, true, function(res){
1185 
      bjRenderRoute(map, res, {color:'#2f9e44', dashed:true, z:50});
1186 
      legend.set('suggested', bjRouteKm(res));
1187 
    }, function(status){ console.warn('Directions (suggested) failed:', status); legend.set('suggested', false); });
1188 
    if(capped) legend.note('Suggested route limited to first 23 stops');
1189 
  } else {
1190 
    legend.set('suggested', false);
1191 
  }
1192 
}
1193 
// Evenly downsample a list to at most `max` items, always keeping first and last.
1194 
function bjSample(arr, max){
1195 
  if(arr.length<=max) return arr.slice();
1196 
  var out=[], step=(arr.length-1)/(max-1);
1197 
  for(var i=0;i<max;i++) out.push(arr[Math.round(i*step)]);
1198 
  return out;
1199 
}
1200 
function bjRouteRequest(ds, origin, dest, wpts, optimize, ok, err){
1201 
  ds.route({
1202 
    origin:new google.maps.LatLng(origin.lat,origin.lng),
1203 
    destination:new google.maps.LatLng(dest.lat,dest.lng),
1204 
    waypoints:wpts, optimizeWaypoints:optimize,
1205 
    travelMode:google.maps.TravelMode.DRIVING
1206 
  }, function(res, status){
1207 
    if(status===google.maps.DirectionsStatus.OK && res && res.routes && res.routes.length) ok(res);
1208 
    else err(status);
1209 
  });
1210 
}
1211 
function bjRenderRoute(map, res, opt){
1212 
  var poly={strokeColor:opt.color, strokeWeight:opt.dashed?0:5, strokeOpacity:opt.dashed?0:0.85, zIndex:opt.z};
1213 
  if(opt.dashed){
1214 
    poly.icons=[{icon:{path:'M 0,-1 0,1', strokeColor:opt.color, strokeOpacity:1, strokeWeight:4, scale:3}, offset:'0', repeat:'14px'}];
1215 
  }
1216 
  new google.maps.DirectionsRenderer({map:map, directions:res, suppressMarkers:true,
1217 
    suppressInfoWindows:true, preserveViewport:true, polylineOptions:poly});
1218 
}
1219 
function bjRouteKm(res){
1220 
  var m=0; (res.routes[0].legs||[]).forEach(function(l){ m+=(l.distance?l.distance.value:0); }); return m/1000;
1221 
}
1222 
// Route-comparison panel rendered into the modal (#bjRouteLegend), above the map.
1223 
// Each distance fills in as its route resolves. value: number = km, false =
1224 
// unavailable, undefined = still loading.
1225 
function bjRouteLegend(){
1226 
  var div=el('bjRouteLegend');
1227 
  if(!div) return { set:function(){}, note:function(){} };
1228 
  var taken, sugg, noteTxt='';
1229 
  function val(v){ return typeof v==='number' ? '<b>'+v.toFixed(1)+' km</b>' : (v===false ? 'n/a' : '…'); }
1230 
  function render(){
1231 
    var cmp='';
1232 
    if(typeof taken==='number' && typeof sugg==='number'){
1233 
      cmp = taken>sugg+0.05
1234 
        ? '<span style="color:#e03131">+'+(taken-sugg).toFixed(1)+' km longer than suggested</span>'
1235 
        : '<span style="color:#2f9e44">on / better than the suggested route</span>';
1236 
    }
1237 
    div.innerHTML=
1238 
      '<span class="lg">Route comparison</span>'+
1239 
      '<span><span class="sw ln"></span>Taken (GPS)</span>'+
1240 
      '<span><span class="sw dt"></span>Suggested</span>'+
1241 
      cmp+
1242 
      (noteTxt?'<span style="color:#e8590c">'+noteTxt+'</span>':'');
1243 
  }
1244 
  render();
1245 
  return { set:function(k,v){ if(k==='taken')taken=v; else sugg=v; render(); }, note:function(t){ noteTxt=t; render(); } };
1246 
}
36882 vikas 1247 
function tlSecs(t){ if(!t) return 1e9; var p=t.split(':'); return (+p[0])*3600+(+(p[1]||0))*60+(+(p[2]||0)); }
1248 
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)); }
1249 
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); }
1250 
function jstat(v,l){ return '<div class="js"><div class="jv">'+v+'</div><div class="jl">'+l+'</div></div>'; }
1251 
function hhmm(t){ return t? t.slice(0,5):''; }
1252 
function tlThumb(att){
36903 vikas 1253 
  if(att && window._mediaUrl) return '<img class="tlthumb" src="'+esc(window._mediaUrl+att)+'" onclick="bjOpenImage(this.src)" onerror="tlImgErr(this)">';
36882 vikas 1254 
  return '<div class="tlph" title="No photo">&#128247;</div>';
1255 
}
1256 
function tlImgErr(im){ var d=document.createElement('div'); d.className='tlph'; d.title='Photo unavailable'; d.innerHTML='&#128247;'; if(im.parentNode) im.parentNode.replaceChild(d, im); }
1257 
function punchEntry(kind, time){ return {_punch:kind, checkInTime:time, markType:(kind==='in'?'PUNCHIN':'PUNCHOUT'), taskType:'attendance'}; }
1258 
function tlStyle(x){
1259 
  var mt=(x.markType||'').toUpperCase(), tt=(x.taskType||'').toLowerCase();
1260 
  if(x._punch || tt==='attendance' || mt.indexOf('PUNCH')>=0) return {c:'#7048e8', l:(x._punch==='out'?'Punch out':'Punch in'), ic:'&#9873;'};
1261 
  if(mt.indexOf('CHECKOUT')>=0) return {c:'#2f9e44', l:'Visited', ic:'&#10003;'};
1262 
  if(mt==='CHECKIN') return {c:'#1098ad', l:'In store', ic:'&#128205;'};
1263 
  if(mt==='DEFERRED') return {c:'#e8590c', l:'Deferred', ic:'&#8635;'};
1264 
  if(mt==='PENDING' || !x.checkInTime) return {c:'#97a1b5', l:'Pending', ic:'&#9675;'};
1265 
  return {c:'#3b5bdb', l:(mt||'-'), ic:'&#9679;'};
1266 
}
1267 
function tlTitle(x){
1268 
  if(x._punch) return x._punch==='in' ? 'Journey start (Punch in)' : 'Journey end (Punch out)';
1269 
  var n=x.taskName||'';
36903 vikas 1270 
  var taskType=(x.taskType||'').toLowerCase();
1271 
  if(taskType==='franchisee-visit') {
1272 
    var pipe = n.lastIndexOf('|');
1273 
    if (pipe >= 0) n = n.slice(pipe + 1);      // drop leading agenda tags
1274 
    n = n.replace(/\s*VISIT\b.*$/i, '').replace(/\s*visit\s*$/i, '').replace(/\bnull\b/gi, '').replace(/\s{2,}/g, ' ').trim();
1275 
  }
36882 vikas 1276 
  return n || '(stop)';
1277 
}
1278 
function tlRow(x, side){
1279 
  var s=tlStyle(x);
1280 
  var tt=(x.taskType||'').toLowerCase();
1281 
  var timeTop = x.checkInTime ? hhmm(x.checkInTime) : '-';
1282 
  var tlabel = x._punch ? (x._punch==='in'?'punch in':'punch out') : (x.checkInTime?'check-in':'pending');
1283 
  var meta;
1284 
  if(x._punch){
1285 
    meta = (x._punch==='in'?'Punch in':'Punch out') + ' &middot; ' + hhmm(x.checkInTime);
1286 
  } else {
1287 
    var io = (x.checkInTime?hhmm(x.checkInTime):'-') + ' &rarr; ' + (x.checkOutTime?hhmm(x.checkOutTime):'-');
1288 
    var dur = (x.timeSpent && x.timeSpent!=='00:00:00') ? ' &middot; '+esc(x.timeSpent) : '';
1289 
    var typeLabel = tt==='lead' ? 'Lead' : (tt==='office-visit'?'Office':'Partner');
1290 
    meta = x.checkInTime ? (typeLabel+' &middot; '+io+dur) : (typeLabel+' &middot; not visited');
1291 
  }
1292 
  // image (or placeholder) + battery + location-toggle on real stops
1293 
  var extra='';
1294 
  if(!x._punch){
1295 
    var chips='';
1296 
    if(x.battery!=null) chips += '<span class="tlchip">&#128267; '+x.battery+'%</span>';
1297 
    if(x.locOff!=null) chips += '<span class="tlchip">&#128244; '+x.locOff+'</span>';
1298 
    extra = '<div class="tlextra">'+tlThumb(x.attachment)+chips+'</div>';
1299 
  }
36903 vikas 1300 
  var card='<div class="tlcard">'+
36882 vikas 1301 
        '<div class="tm" style="background:'+s.c+'">'+timeTop+'<small>'+tlabel+'</small></div>'+
1302 
        '<div class="bd"><div class="ti">'+esc(tlTitle(x))+'</div>'+
1303 
          '<span class="stt" style="background:'+s.c+'">'+s.l+'</span>'+
1304 
          '<div class="mt">'+meta+'</div>'+extra+'</div>'+
36903 vikas 1305 
      '</div>';
1306 
  // remark sits on the opposite half of the timeline (empty spacer when none)
1307 
  var rk=(!x._punch && x.remarks) ? '<div class="rk"><div class="rkl">Remark</div>'+esc(x.remarks)+'</div>' : '';
1308 
  var remark='<div class="tlremark">'+rk+'</div>';
1309 
  var halves = side==='left' ? (card+remark) : (remark+card);
1310 
  return '<div class="tlrow '+side+'">'+
1311 
      '<div class="node" style="background:'+s.c+'">'+s.ic+'</div>'+
1312 
      halves+'</div>';
36882 vikas 1313 
}
36877 vikas 1314 
function closeModal(){ el('bj-modal-back').classList.remove('show'); }
36903 vikas 1315 
// Image lightbox — opens an attachment larger, stacked above the journey modal.
1316 
function bjOpenImage(src){ if(!src) return; el('bj-img').src=src; el('bj-img-back').classList.add('show'); }
1317 
function bjCloseImage(){ el('bj-img-back').classList.remove('show'); el('bj-img').removeAttribute('src'); }
36877 vikas 1318 
 
1319 
/* ============================ APPROVAL ============================ */
1320 
function loadApproval(){
1321 
  spinner();
1322 
  var from=el('bj-start').value, to=el('bj-end').value;
1323 
  var u=CTX+'/beat-report/approval/data?fromDate='+encodeURIComponent(from)+'&toDate='+encodeURIComponent(to)+qs();
1324 
  fetch(u,{headers:{'Accept':'application/json'}}).then(function(r){ return r.json(); }).then(function(d){
1325 
    var rows=d.rows||[];
1326 
    var h='<div class="card"><h2>Location Approval <span style="color:#97a1b5;font-weight:500;font-size:12px">&middot; '+rows.length+' off-site check-ins</span></h2>'+
1327 
      '<p class="desc">Check-ins recorded &gt;50 m from the partner\'s saved location, across your downline. Approving updates the partner\'s coordinates.</p>';
1328 
    if(!rows.length){ h+='<p class="desc">Nothing pending in this window.</p></div>'; el('bj-content').innerHTML=h; return; }
1329 
    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>';
1330 
    rows.forEach(function(r){
1331 
      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>'+
1332 
         '<td class="num '+(r.distanceM>200?'badflag':'warnflag')+'">'+r.distanceM+' m</td>'+
1333 
         '<td class="num"><button class="btn-ok" onclick="approve('+r.trackingId+')">Approve</button></td></tr>';
1334 
    });
1335 
    h+='</tbody></table></div>';
1336 
    el('bj-content').innerHTML=h;
1337 
  }).catch(fail);
1338 
}
1339 
function approve(trackingId){
1340 
  fetch(CTX+'/beat-report/approve-checkin',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'trackingId='+trackingId})
1341 
    .then(function(r){ return r.json(); }).then(function(){ var row=el('appr-'+trackingId); if(row) row.parentNode.removeChild(row); }).catch(function(){ alert('Approve failed'); });
1342 
}
1343 
 
36903 vikas 1344 
/* ============================ EXPORT ============================ */
1345 
// Download the Employee Task Report (.xlsx). Today lens exports the single
1346 
// selected day; Period lens exports the whole start..end range. Both carry the
1347 
// current level / team scope (qs()). The download is served as an attachment, so
1348 
// navigating to the URL triggers the file save without leaving the page.
1349 
function exportReport(){
36913 vikas 1350 
  var start, end, path;
1351 
  if(LENS==='period'){
1352 
    // Period lens: per-employee totals + a Raw Data sheet (separate endpoint).
1353 
    start=el('bj-start').value; end=el('bj-end').value; path='/export-period';
1354 
  } else {
1355 
    // Today lens: the day-grouped Employee Task Report (unchanged).
1356 
    start=el('bj-date').value; end=start; path='/export';
1357 
  }
1358 
  var u = BASE + path + '?startDate=' + encodeURIComponent(start) + '&endDate=' + encodeURIComponent(end) + qs();
36903 vikas 1359 
  window.location.href = u;
1360 
}
1361 
 
36877 vikas 1362 
/* ============================ INIT ============================ */
1363 
document.querySelectorAll('.lens').forEach(function(b){ b.addEventListener('click', function(){ setLens(b.getAttribute('data-lens')); }); });
1364 
el('bj-apply').addEventListener('click', load);
36903 vikas 1365 
el('bj-export').addEventListener('click', exportReport);
36897 vikas 1366 
el('bj-level').addEventListener('change', onLevelChange);
1367 
if(el('bj-user')) el('bj-user').addEventListener('change', load);
1368 
el('bj-date').addEventListener('change', updateTodayLabel);
36877 vikas 1369 
el('bj-modal-back').addEventListener('click', function(e){ if(e.target===el('bj-modal-back')) closeModal(); });
36903 vikas 1370 
el('bj-img-back').addEventListener('click', function(e){ if(e.target===el('bj-img-back')) bjCloseImage(); });
1371 
el('bj-img-x').addEventListener('click', bjCloseImage);
1372 
// Esc closes the lightbox first (if open), otherwise the journey modal.
1373 
document.addEventListener('keydown', function(e){
1374 
  if(e.key!=='Escape') return;
1375 
  if(el('bj-img-back').classList.contains('show')) bjCloseImage();
1376 
  else if(el('bj-modal-back').classList.contains('show')) closeModal();
1377 
});
36897 vikas 1378 
updateTodayLabel();
36877 vikas 1379 
load();
1380 
</script>
1381 
</body>
1382 
</html>