Subversion Repositories SmartDukaan

  /* Liveness reads better as a ticking clock than as a boxed date field: the board is always

     today, and a timestamp that never visibly moves looks stale rather than live. */

  .liveclock{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--soft);font-weight:600}

  .livedot{width:7px;height:7px;border-radius:50%;background:#2f9e44;flex:none}

  .livedot.beat{animation:livePulse .9s ease-out}

  .livedot.stalled{background:#e03131}

  @keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(47,158,68,.55)}100%{box-shadow:0 0 0 7px rgba(47,158,68,0)}}

  @media (prefers-reduced-motion:reduce){ .livedot.beat{animation:none} }

  .callbar{position:fixed;right:18px;bottom:18px;z-index:88;width:280px;background:#fff;border:1px solid var(--line);

    border-radius:14px;box-shadow:0 18px 44px rgba(10,15,40,.22);padding:14px 16px}

  .callbar .cb-head{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--brand)}

  .callbar .cb-dot{width:9px;height:9px;border-radius:50%;background:#e03131;flex:none;animation:cbPulse 1.4s infinite}

  .callbar .cb-time{margin-left:auto;color:var(--soft);font-weight:600;font-size:12.5px}

  .callbar .cb-state{margin-top:6px;font-size:12.5px;color:var(--soft);text-transform:capitalize}

  .callbar .cb-acts{margin-top:11px;display:flex;gap:7px}

  .callbar .cb-err{margin-top:8px;color:#e03131;font-size:12px}

  @keyframes cbPulse{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}

  @media (prefers-reduced-motion:reduce){ .callbar .cb-dot{animation:none} }

  /* Call button on a pipeline row. */

  .chkq{padding:12px 0;border-bottom:1px solid var(--line2)}

  .chkq:last-child{border-bottom:0}

  .chkq .qp{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px}

  .chkq .qp .req{color:#e03131;margin-left:3px}

  .chkq .opts{display:flex;gap:7px;flex-wrap:wrap}

  .chkopt{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 13px;font-size:12.5px;

    cursor:pointer;font-weight:600;color:var(--soft)}

  .chkopt.sel{background:#1f2a5e;border-color:#1f2a5e;color:#fff}

  .rowcall{border:1px solid var(--line);background:#fff;color:#e03131;border-radius:8px;padding:4px 9px;

    cursor:pointer;font-size:13px;line-height:1.1}

  .rowcall:hover{background:#fff0f0;border-color:#ffc9c9}

  .rowcall[disabled]{opacity:.45;cursor:not-allowed}

  .rowedit{border:1px solid var(--line);background:#fff;color:var(--brand2);border-radius:8px;padding:4px 9px;

    cursor:pointer;font-size:13px;line-height:1.1}

  .rowedit:hover{background:#eef1fb;border-color:#c7d2fe}

  .rowassign{border:1px solid var(--line);background:#fff;color:#0ca678;border-radius:8px;padding:4px 9px;

    cursor:pointer;font-size:13px;line-height:1.1}

  .rowassign:hover{background:#e6fcf5;border-color:#96f2d7}

  .tierpill{display:inline-block;min-width:26px;text-align:center;padding:2px 7px;border-radius:6px;

    background:#eef1fb;color:#3b5bdb;font-size:11px;font-weight:700;margin-right:8px}

  .asgrow{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);

    border-radius:10px;margin-bottom:6px;cursor:pointer}

  .asgrow:hover{background:#f8f9fc;border-color:var(--brand2)}

  .asgrow.covers{border-color:#96f2d7;background:#f4fffb}

  .asgrow .nm{font-weight:650;font-size:13px}

  .asgrow .rg{margin-left:auto;font-size:11px;color:var(--soft)}

  .lstat{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em}

  .lstat.oncall{background:#e6fcf5;color:#0ca678}

  .lstat.wrap{background:#eef1f6;color:#69748c}

  .lstat.idle{background:#fff4e6;color:#e8590c}

  .lstat.avail{background:#eef1fb;color:#3b5bdb}

  .lstat.off{background:#f1f3f5;color:#97a1b5}

  .lstale{color:#e03131;font-size:11px;margin-left:6px}

    <button class="tab" onclick="go('live',this)">Live Calls</button>

    <button class="tab" onclick="go('chk',this)">Checklist</button>

            <th></th>

  <!-- ======================= LIVE CALLS ========================= -->

  <div id="live" class="hide">

    <div class="pagehead">

      <div>

        <div class="crumb">Floor &middot; Live</div>

        <h1 class="page">Live Calls</h1>

        <div class="sub">Who is on a call right now, and how the day is going per agent &mdash; from the

          call log. Refreshes every 10 seconds.</div>

      </div>

      <div class="hd-right">

        <span class="liveclock"><span class="livedot" id="liveDot"></span><span id="liveAsOf">connecting&hellip;</span></span>

        <button class="btn ghost sm" onclick="exportLive()">Export CSV</button>

      </div>

    </div>

    <div class="kpis" id="liveKpis"></div>

    <div class="card">

      <h2>Agents</h2>

      <p class="desc">Roster is everyone with a dialer mapping &mdash; an agent without one cannot place

        a call. Click a row for their calls today.</p>

      <div class="pipewrap">

        <table>

          <colgroup>

            <col style="width:170px"><col style="width:104px"><col style="width:96px">

            <col style="width:70px"><col style="width:82px"><col style="width:84px">

            <col style="width:88px"><col style="width:90px"><col style="width:86px">

            <col style="width:92px"><col style="width:96px">

          </colgroup>

          <thead><tr>

            <th>Agent</th><th>Status</th><th>In status</th>

            <th class="num">Calls</th><th class="num">Conn.</th><th class="num">Conn%</th>

            <th class="num">Talk</th><th class="num">Longest</th>

            <th class="num">Assigned</th><th class="num">Touched</th><th class="num">SLA breach</th>

          </tr></thead>

          <tbody id="liveBody"><tr><td colspan="11"><div class="ph">Loading&hellip;</div></td></tr></tbody>

        </table>

      </div>

      <div class="note">Status is derived from call activity &mdash; the Vonage softphone reports no

        presence, so there is deliberately no Login or Break here rather than a guess.</div>

    </div>

    <div class="card">

      <h2 style="display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap">Call log

        <span style="display:flex;gap:6px;align-items:center">

          <input type="date" class="ctl" id="clFrom">

          <input type="date" class="ctl" id="clTo">

          <button class="btn ghost sm" onclick="loadCallLog(1)">Apply</button>

          <button class="btn ghost sm" onclick="exportCallLog()">Export CSV</button>

        </span>

      </h2>

      <p class="desc">Every call placed in the window &mdash; ring time, talk time, outcome and recording.

        Click a row to open its lead.</p>

      <div class="pipewrap">

        <table>

          <colgroup>

            <col style="width:132px"><col style="width:140px"><col style="width:190px">

            <col style="width:124px"><col style="width:104px"><col style="width:74px">

            <col style="width:74px"><col style="width:120px"><col>

          </colgroup>

          <thead><tr>

            <th>Started</th><th>Agent</th><th>Lead</th><th>Number</th><th>Status</th>

            <th class="num">Ring</th><th class="num">Talk</th><th>Recording</th><th>Disposition</th>

          </tr></thead>

          <tbody id="clBody"><tr><td colspan="9"><div class="ph">Loading&hellip;</div></td></tr></tbody>

        </table>

      </div>

      <div style="display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap">

        <span class="note" id="clCount"></span>

        <span style="display:flex;gap:6px;align-items:center">

          <button class="btn ghost sm" id="clPrev" onclick="clPage(-1)">&larr; Prev</button>

          <span class="note" id="clPageLbl"></span>

          <button class="btn ghost sm" id="clNext" onclick="clPage(1)">Next &rarr;</button>

        </span>

      </div>

      <div class="note">Ring is dial &rarr; answer; Talk is answer &rarr; hangup. A call that was never

        answered has a ring time but no talk time.</div>

    </div>

  </div>

  <!-- ======================= CHECKLIST ADMIN ========================= -->

  <div id="chk" class="hide">

    <div class="pagehead">

      <div>

        <div class="crumb">Setup &middot; In-call script</div>

        <h1 class="page">Checklist questions</h1>

        <div class="sub">What agents are asked while a call is connected. Questions show at the stages

          you pick, and carry points towards a lead's score.</div>

      </div>

      <div class="hd-right">

        <button class="btn coral sm" onclick="editQuestion(null)">+ New question</button>

      </div>

    </div>

    <div class="card">

      <div class="pipewrap">

        <table>

          <colgroup>

            <col style="width:54px"><col><col style="width:96px"><col style="width:66px">

            <col style="width:70px"><col style="width:220px"><col style="width:74px"><col style="width:132px">

          </colgroup>

          <thead><tr>

            <th class="num">Order</th><th>Question</th><th>Type</th><th class="num">Points</th>

            <th>Required</th><th>Shows at</th><th>Status</th><th></th>

          </tr></thead>

          <tbody id="qBody"><tr><td colspan="8"><div class="ph">Loading&hellip;</div></td></tr></tbody>

        </table>

      </div>

      <div class="note">A question that has been answered can be switched off but not deleted &mdash;

        the answers reference it.</div>

    </div>

  </div>

<!-- One call bar for the whole console. It used to live inside the lead-record card, which meant a

     call started from anywhere else had nowhere to report progress, and switching tabs mid-call

     hid the hang-up button. -->

<div class="callbar hide" id="gCallBar">

  <div class="cb-head">

    <span class="cb-dot"></span>

    <span id="gCallWho">&mdash;</span>

    <span class="cb-time mono" id="gCallTimer">00:00</span>

  </div>

  <div class="cb-state" id="gCallState">Starting&hellip;</div>

  <div class="cb-acts">

    <button class="btn ghost sm" onclick="endCall()">Hang up</button>

    <button class="btn coral sm" onclick="openDisp()">Disposition&hellip;</button>

  </div>

  <div class="cb-err hide" id="gCallErr"></div>

</div>

<!-- First-call checklist. Opens by itself the moment the first call to a lead is ANSWERED — the

     questions are worth asking while the retailer is on the line, not reconstructed afterwards. -->

<div class="modal hide" id="chkModal">

  <div class="box">

    <div class="mh"><h2>First call &middot; <span id="chkWho">&mdash;</span></h2>

      <p class="desc">Ask these while you have them on the line. Saved against the call and the trail.</p></div>

    <div class="mb" id="chkBody"></div>

    <div class="mf">

      <span class="note" id="chkNote" style="margin-right:auto"></span>

      <button class="btn ghost" onclick="closeChk()">Later</button>

      <button class="btn" style="background:#1f2a5e;color:#fff" id="chkSaveBtn" onclick="saveChk()">Save answers</button>

    </div>

  </div>

</div>

<div class="modal hide" id="qModal">

  <div class="box">

    <div class="mh"><h2 id="qTitle">New question</h2>

      <p class="desc">Shows while a call is connected, at the stages you choose.</p></div>

    <div class="mb">

      <label class="lbl">Question (required)</label>

      <input id="qPrompt" class="inp" style="width:100%" placeholder="What should the agent ask?">

      <div class="grid g2" style="gap:12px">

        <div>

          <label class="lbl">Answer type</label>

          <select id="qType" class="inp" style="width:100%" onchange="qTypeChanged()">

            <option value="TEXT">Text</option><option value="NUMBER">Number</option>

            <option value="YESNO">Yes / No</option><option value="CHOICE">Choice</option>

          </select>

        </div>

        <div>

          <label class="lbl">Points</label>

          <input id="qPoints" type="number" min="0" step="1" class="inp" style="width:100%" value="0">

        </div>

      </div>

      <div id="qChoicesWrap" class="hide">

        <label class="lbl">Options &mdash; separate with |</label>

        <input id="qChoices" class="inp" style="width:100%" placeholder="Yes|No|Not sure">

      </div>

      <label class="lbl">Show at these stages</label>

      <div class="opts" id="qStages"></div>

      <div class="note">None selected means every stage.</div>

      <div class="grid g2" style="gap:12px">

        <div>

          <label class="lbl">Sort order</label>

          <input id="qOrder" type="number" step="10" class="inp" style="width:100%" value="0">

        </div>

        <div>

          <label class="lbl">&nbsp;</label>

          <div style="display:flex;gap:14px;align-items:center;padding-top:8px">

            <label style="font-size:13px"><input type="checkbox" id="qRequired"> Required</label>

            <label style="font-size:13px"><input type="checkbox" id="qActive" checked> Active</label>

          </div>

        </div>

      </div>

      <div id="qErr" class="hide" style="margin-top:10px;color:#e03131;font-size:12.5px"></div>

    </div>

    <div class="mf">

      <button class="btn ghost" id="qDelBtn" onclick="deleteQuestion()" style="margin-right:auto">Delete</button>

      <button class="btn ghost" onclick="closeQ()">Cancel</button>

      <button class="btn" style="background:#1f2a5e;color:#fff" id="qSaveBtn" onclick="saveQuestion()">Save</button>

    </div>

  </div>

</div>

<div class="modal hide" id="asgModal">

  <div class="box">

    <div class="mh"><h2>Assign lead</h2>

      <p class="desc" id="asgWho">&mdash;</p></div>

    <div class="mb">

      <input id="asgSearch" class="inp" style="width:100%" placeholder="Filter by name or tier…"

             oninput="renderAssignList()">

      <div style="display:flex;gap:6px;margin:10px 0 4px;flex-wrap:wrap" id="asgTiers"></div>

      <div id="asgList" style="max-height:340px;overflow-y:auto;margin-top:6px"></div>

    </div>

    <div class="mf"><button class="btn ghost" onclick="closeAssign()">Cancel</button></div>

  </div>

</div>

    // Leaving the live tab must stop its poll; entering it starts a fresh one.

    if(id==='live'){ startLive(); } else { stopLive(); }

    if(id==='chk') loadQuestions();

            // data-call carries the lead so the handler needs nothing from the row's other cells.

            '<td class="nowrap" style="display:flex;gap:5px">'+

              '<button class="rowcall" data-call="'+l.id+'" data-callname="'+esc(l.name||'')+'"'+

                ' title="Call '+esc(l.name||('lead #'+l.id))+'">&#9742;</button>'+

              '<button class="rowedit" data-editlead="'+l.id+'"'+

                ' title="Edit '+esc(l.name||('lead #'+l.id))+'">&#9998;</button>'+

              '<button class="rowassign" data-assign="'+l.id+'" data-assignname="'+esc(l.name||'')+'"'+

                ' data-assignowner="'+esc(l.owner||'')+'" data-assignregion="'+esc(l.regionId||'')+'"'+

                ' title="Assign '+esc(l.name||('lead #'+l.id))+'">&#128100;</button>'+

            '</td></tr>';

  /** Telephony totals for the calls/day tile. Failure leaves the tile honest rather than zeroed. */

  function loadBgc(){

    getJSON('/lms/dashboard/bgc-daily'+qsDates(), function(d){ DATA.bgc=d||null; buildDashKpis(); },

      function(){ DATA.bgc=null; buildDashKpis(); });

  }

  /** Days in the selected period — the calls/day tile divided by a hardcoded 90 regardless of it. */

  function periodDays(){

    if(!STATE.from || !STATE.to) return 1;

    var a=new Date(STATE.from), b=new Date(STATE.to);

    if(isNaN(a)||isNaN(b)) return 1;

    return Math.max(1, Math.round((b-a)/86400000)+1);

  }

    // Calls/day from the real call log. It used to be CONTACTED ÷ 90 labelled "proxy · no

    // telephony" — a stage count divided by a constant that stopped matching the period the moment

    // the default window became the current month. Now: calls placed ÷ days in the selected period,

    // with the connect rate underneath, or an honest dash when the telephony data has not loaded.

    var callsTile='—', callsFoot='no calls in period';

    if(DATA.bgc){

      var days=periodDays();

      callsTile=fmtInt(Math.round((DATA.bgc.calls||0)/days));

      callsFoot=(DATA.bgc.calls||0)+' calls · '+(DATA.bgc.connectPct||0)+'% connected';

    }

    var ageDays=(DATA.ageing&&DATA.ageing.days)?DATA.ageing.days:7;

      // inrShort, not fmtInr: business value is stored in lakhs and every other figure on the page

      // renders it that way. fmtInr printed a bare ₹139 for what is ₹139 lakh.

      {v:inrShort(s.onboardedValue),f:'est. potential'} ];

                'Ageing > '+ageDays+' days','Onboarded value'];

    var eq=e.target.closest('[data-editq]');

    if(eq){ editQuestion(parseInt(eq.getAttribute('data-editq'),10)); return; }

    // Stage chips are multi-select; the in-call answer chips are single-select.

    var qs=e.target.closest('.qstage');

    if(qs){ qs.classList.toggle('sel'); return; }

    var co=e.target.closest('.chkopt');

    if(co){ var wrap=co.parentNode;

      wrap.querySelectorAll('.chkopt').forEach(function(x){ x.classList.remove('sel'); });

      co.classList.add('sel'); return; }

    var asg=e.target.closest('[data-assign]');

    if(asg){ e.preventDefault(); e.stopPropagation();

      openAssign(parseInt(asg.getAttribute('data-assign'),10), asg.getAttribute('data-assignname'),

                 asg.getAttribute('data-assignowner'), asg.getAttribute('data-assignregion')); return; }

    var pick=e.target.closest('[data-assignto]');

    if(pick){ assignTo(parseInt(pick.getAttribute('data-assignto'),10)); return; }

    var tp=e.target.closest('#asgTiers .chkopt');

    if(tp){ byId('asgTiers').querySelectorAll('.chkopt').forEach(function(x){ x.classList.remove('sel'); });

      tp.classList.add('sel'); ASG.tier=tp.getAttribute('data-tier'); renderAssignList(); return; }

    var ed=e.target.closest('[data-editlead]');

    if(ed){ e.preventDefault(); e.stopPropagation();

      editLeadById(parseInt(ed.getAttribute('data-editlead'),10)); return; }

    var cb=e.target.closest('[data-call]');

    if(cb){ e.preventDefault(); e.stopPropagation();

      dialLead(parseInt(cb.getAttribute('data-call'),10), cb.getAttribute('data-callname'), cb); return; }

    var la=e.target.closest('tr[data-liveagent]');

    if(la){ openAgentCalls(parseInt(la.getAttribute('data-liveagent'),10)); return; }

  // ====================== LIVE CALL BOARD ===================================================

  // Polls /lms/dashboard/live-calls. First paint builds the table; subsequent ticks PATCH the

  // volatile cells rather than re-rendering — re-drawing the whole table every 10s fights anyone

  // mid-read and throws away their scroll position. Same approach the RBM board takes.

  var LIVE = { timer:null, built:false, rows:[], failures:0, lastAt:null };

  var LIVE_MS = 10000;

  var LSTAT={'On Call':'oncall','Wrap Up':'wrap','Idle':'idle','Available':'avail','—':'off'};

  function lstat(s){ return '<span class="lstat '+(LSTAT[s]||'off')+'">'+esc(s)+'</span>'; }

  /** hh:mm:ss, like the RBM board's time-in-status. */

  function hms(sec){

    if(sec==null) return '—';

    sec=Math.max(0,Math.floor(sec));

    var h=Math.floor(sec/3600), m=Math.floor((sec%3600)/60), s2=sec%60;

    return (h?('0'+h).slice(-2)+':':'')+('0'+m).slice(-2)+':'+('0'+s2).slice(-2);

  }

  /** Successful refresh: stamp the time, pulse the dot. Time only — the board is always today. */

  function liveBeat(asOf){

    LIVE.failures=0;

    LIVE.lastAt=asOf?new Date(asOf):new Date();

    var dot=byId('liveDot'); if(dot){ dot.classList.remove('stalled','beat');

      void dot.offsetWidth;                  // restart the animation on a repeat refresh

      dot.classList.add('beat'); }

    byId('liveAsOf').textContent='updated '+clockOf(LIVE.lastAt);

  }

  function liveStalled(){

    var dot=byId('liveDot'); if(dot){ dot.classList.remove('beat'); dot.classList.add('stalled'); }

    byId('liveAsOf').textContent=LIVE.lastAt

      ? 'not updating · last '+clockOf(LIVE.lastAt) : 'not updating';

  }

  function clockOf(d){

    if(!d || isNaN(d)) return '—';

    return ('0'+d.getHours()).slice(-2)+':'+('0'+d.getMinutes()).slice(-2)+':'+('0'+d.getSeconds()).slice(-2);

  }

  function startLive(){

    LIVE.failures=0;

    // Default the log window to today; the board above is always "now" so this matches it.

    if(!byId('clFrom').value){

      var t=new Date().toISOString().slice(0,10);

      byId('clFrom').value=t; byId('clTo').value=t;

    }

    loadCallLog(1);

    loadLive();

    stopLive();

    LIVE.timer=setInterval(loadLive, LIVE_MS);

  }

  // Must be cleared on tab change, or every visit leaves another interval polling forever.

  function stopLive(){ if(LIVE.timer){ clearInterval(LIVE.timer); LIVE.timer=null; } }

  function loadLive(){

    getJSON('/lms/dashboard/live-calls', function(d){

      d=d||{}; LIVE.rows=d.rows||[];

      liveBeat(d.asOf);

      byId('liveKpis').innerHTML=

        kpiTile('On call now', fmtInt(d.onCallNow))+

        kpiTile('Calls today', fmtInt(d.calls))+

        kpiTile('Connect rate', (d.connectPct||0)+'%')+

        kpiTile('Talk time', (d.talkMinutes||0)+' min')+

        kpiTile('Agents', fmtInt(d.agents));

      if(!LIVE.built){ buildLiveTable(); LIVE.built=true; } else { patchLiveTable(); }

    }, function(){

      // A dropped poll keeps the last good picture, but must not keep claiming to be live.

      LIVE.failures++;

      if(LIVE.failures>=2) liveStalled();

    });

  }

  function buildLiveTable(){

    if(!LIVE.rows.length){

      byId('liveBody').innerHTML='<tr><td colspan="11"><div class="ph">No agents mapped to the dialer yet.</div></td></tr>';

      return;

    }

    byId('liveBody').innerHTML=LIVE.rows.map(function(r){

      return '<tr class="clickrow" data-liveagent="'+r.authId+'">'+

        '<td class="nowrap"><b>'+esc(r.agent)+'</b>'+(r.extension?'<br><span style="color:#97a1b5;font-size:11px">ext '+esc(r.extension)+'</span>':'')+'</td>'+

        '<td class="nowrap" data-live="status" data-authid="'+r.authId+'">'+liveStatusCell(r)+'</td>'+

        '<td class="nowrap mono" data-live="since" data-authid="'+r.authId+'">'+hms(r.sinceSeconds)+'</td>'+

        '<td class="num" data-live="calls" data-authid="'+r.authId+'">'+fmtInt(r.calls)+'</td>'+

        '<td class="num" data-live="connected" data-authid="'+r.authId+'">'+fmtInt(r.connected)+'</td>'+

        '<td class="num" data-live="connectPct" data-authid="'+r.authId+'">'+pctCell(r.connectPct)+'</td>'+

        '<td class="num" data-live="talk" data-authid="'+r.authId+'">'+secs(r.talkSeconds)+'</td>'+

        '<td class="num" data-live="longest" data-authid="'+r.authId+'">'+secs(r.longestSeconds)+'</td>'+

        '<td class="num">'+fmtInt(r.assigned)+'</td>'+

        '<td class="num" data-live="touched" data-authid="'+r.authId+'">'+fmtInt(r.touched)+'</td>'+

        '<td class="num" data-live="sla" data-authid="'+r.authId+'">'+slaBreachCell(r.slaBreached)+'</td></tr>';

    }).join('');

  }

  function liveStatusCell(r){

    // A stale row means the agent closed the tab mid-call; say so rather than silently showing Idle.

    return lstat(r.status)+(r.staleCall?'<span class="lstale" title="A call was never closed — the agent likely closed the tab mid-call">unclosed call</span>':'');

  }

  function slaBreachCell(n){

    n=Number(n)||0;

    return n>0?'<span style="font-weight:700;color:#e03131">'+fmtInt(n)+'</span>':'0';

  }

  function patchLiveTable(){

    // A new agent provisioned mid-session changes the row set — rebuild rather than patch.

    if(LIVE.rows.length!==document.querySelectorAll('#liveBody tr[data-liveagent]').length){

      buildLiveTable(); return;

    }

    LIVE.rows.forEach(function(r){

      set(r.authId,'status',liveStatusCell(r));

      set(r.authId,'since',hms(r.sinceSeconds));

      set(r.authId,'calls',fmtInt(r.calls));

      set(r.authId,'connected',fmtInt(r.connected));

      set(r.authId,'connectPct',pctCell(r.connectPct));

      set(r.authId,'talk',secs(r.talkSeconds));

      set(r.authId,'longest',secs(r.longestSeconds));

      set(r.authId,'touched',fmtInt(r.touched));

      set(r.authId,'sla',slaBreachCell(r.slaBreached));

    });

    function set(authId,key,html){

      var el=document.querySelector('#liveBody td[data-live="'+key+'"][data-authid="'+authId+'"]');

      if(el && el.innerHTML!==html) el.innerHTML=html;

    }

  }

  function exportLive(){

    if(!LIVE.rows.length){ toast('Nothing to export'); return; }

    var cols=[['agent','Agent'],['extension','Extension'],['status','Status'],['sinceSeconds','Seconds in status'],

              ['calls','Calls'],['connected','Connected'],['connectPct','Connect %'],['talkSeconds','Talk seconds'],

              ['longestSeconds','Longest call seconds'],['assigned','Leads assigned'],['touched','Touched today'],

              ['dispositioned','Dispositioned today'],['slaBreached','SLA breached']];

    var csv=[cols.map(function(c){ return '"'+c[1]+'"'; }).join(',')];

    LIVE.rows.forEach(function(r){

      csv.push(cols.map(function(c){ var v=r[c[0]]; if(v==null) v='';

        return '"'+String(v).replace(/"/g,'""')+'"'; }).join(','));

    });

    var blob=new Blob([""+csv.join('\r\n')],{type:'text/csv;charset=utf-8;'});

    var a=document.createElement('a');

    a.href=URL.createObjectURL(blob);

    a.download='lms-live-calls-'+new Date().toISOString().slice(0,10)+'.csv';

    document.body.appendChild(a); a.click(); document.body.removeChild(a);

    URL.revokeObjectURL(a.href);

    toast('Exported '+LIVE.rows.length+' agent(s)',1);

  }

  // ---- Call log -----------------------------------------------------------------------------

  var CL = { page:1, pageSize:50, pages:1, total:0, rows:[] };

  var CLSTAT={COMPLETED:'oncall',ANSWERED:'oncall',RINGING:'avail',INITIATED:'avail',

              UNANSWERED:'idle',BUSY:'idle',REJECTED:'off',FAILED:'off',CANCELLED:'off'};

  function clStatus(s){ return '<span class="lstat '+(CLSTAT[s]||'off')+'">'+esc((s||'').replace(/_/g,' '))+'</span>'; }

  function clDates(){

    var f=byId('clFrom').value, t=byId('clTo').value, q='?page='+CL.page+'&pageSize='+CL.pageSize;

    if(f) q+='&from='+encodeURIComponent(f);

    if(t) q+='&to='+encodeURIComponent(t);

    return q;

  }

  function loadCallLog(page){

    if(page) CL.page=page;

    byId('clBody').innerHTML='<tr><td colspan="9"><div class="ph">Loading&hellip;</div></td></tr>';

    getJSON('/lms/dashboard/call-log'+clDates(), function(d){

      d=d||{}; CL.rows=d.rows||[]; CL.total=d.total||0; CL.pages=d.pages||1; CL.page=d.page||1;

      if(!CL.rows.length){

        byId('clBody').innerHTML='<tr><td colspan="9"><div class="ph">No calls in this window.</div></td></tr>';

      } else {

        byId('clBody').innerHTML=CL.rows.map(function(r){

          return '<tr class="clickrow"'+(r.leadId?' data-leadid="'+r.leadId+'"':'')+'>'+

            '<td class="nowrap">'+fmtDT(r.startedAt)+'</td>'+

            '<td class="nowrap" title="'+esc(r.agent||'')+'">'+esc(r.agent||'—')+

              (r.extension?'<br><span style="color:#97a1b5;font-size:11px">ext '+esc(r.extension)+'</span>':'')+'</td>'+

            '<td><b>'+esc(r.retailer||('#'+(r.leadId||'')))+'</b>'+

              (r.lmsCode?'<br><span class="mono" style="color:#97a1b5;font-size:11px">'+esc(r.lmsCode)+'</span>':'')+'</td>'+

            '<td class="nowrap mono">'+esc(r.toNumber||'—')+'</td>'+

            '<td class="nowrap">'+clStatus(r.status)+'</td>'+

            // A dash, not 0s: never answered is not the same as answered instantly.

            '<td class="num nowrap">'+(r.ringSeconds==null?'—':secs(r.ringSeconds))+'</td>'+

            '<td class="num nowrap">'+(r.talkSeconds?secs(r.talkSeconds):'—')+'</td>'+

            '<td class="nowrap">'+clRec(r)+'</td>'+

            '<td>'+esc(r.disposition||'—')+'</td></tr>';

        }).join('');

      }

      var first=(CL.page-1)*CL.pageSize+(CL.rows.length?1:0), last=(CL.page-1)*CL.pageSize+CL.rows.length;

      byId('clCount').textContent=CL.total?('Showing '+first+'–'+last+' of '+fmtInt(CL.total)+' calls'):'';

      byId('clPageLbl').textContent='Page '+CL.page+' / '+Math.max(CL.pages,1);

      byId('clPrev').disabled=(CL.page<=1);

      byId('clNext').disabled=(CL.page>=CL.pages);

    });

  }

  function clRec(r){

    if(r.recording==='none') return '<span style="color:#97a1b5">—</span>';

    // Playback goes through the gated endpoint, never a vendor URL: it enforces the access matrix

    // and logs the open (SOP §15).

    return '<audio controls preload="none" style="height:28px;max-width:150px" src="'+CTX+'/lms/recording/'+r.callId+'"></audio>'+

      (r.recording==='vendor'?'<span class="note" style="display:inline;margin-left:4px">archiving…</span>':'');

  }

  function clPage(step){

    var n=CL.page+step;

    if(n<1||n>CL.pages) return;

    loadCallLog(n);

  }

  function exportCallLog(){

    if(!CL.rows.length){ toast('Nothing to export'); return; }

    var cols=[['startedAt','Started'],['answeredAt','Answered'],['endedAt','Ended'],['agent','Agent'],

              ['extension','Extension'],['lmsCode','LMS ID'],['retailer','Retailer'],['outlet','Business'],

              ['toNumber','Number'],['direction','Direction'],['status','Status'],

              ['ringSeconds','Ring seconds'],['talkSeconds','Talk seconds'],['recording','Recording'],

              ['disposition','Disposition']];

    var csv=[cols.map(function(c){ return '"'+c[1]+'"'; }).join(',')];

    CL.rows.forEach(function(r){

      csv.push(cols.map(function(c){ var v=r[c[0]]; if(v==null) v='';

        return '"'+String(v).replace(/"/g,'""')+'"'; }).join(','));

    });

    var blob=new Blob([""+csv.join('\r\n')],{type:'text/csv;charset=utf-8;'});

    var a=document.createElement('a');

    a.href=URL.createObjectURL(blob);

    a.download='lms-call-log-'+(byId('clFrom').value||'all')+'.csv';

    document.body.appendChild(a); a.click(); document.body.removeChild(a);

    URL.revokeObjectURL(a.href);

    toast('Exported '+CL.rows.length+' call(s)',1);

  }

  // ====================== STANDARD REPORT SUITE (SOP §18.2) =================================

  // Each catalogue row opens the real report in the drawer rather than a sentence describing it.

  // The four that were already "Live" reuse data this page has loaded; BGC Daily and Audit Hygiene

  // call their own endpoints. RBM Servicing stays honest about needing order data it cannot reach.

  function secs(n){ n=Number(n)||0; var m=Math.floor(n/60); return m? (m+'m '+(n%60)+'s') : (n+'s'); }

  function pctCell(v){ var c=v>=80?'#2f9e44':(v>=50?'#f08c00':'#e03131');

    return '<span style="font-weight:700;color:'+c+'">'+v+'%</span>'; }

  function tbl(head, rows){

    if(!rows.length) return '<div class="ph">Nothing in the selected period.</div>';

    return '<table><thead><tr>'+head.map(function(h){

        return '<th'+(h.n?' class="num"':'')+'>'+esc(h.t)+'</th>'; }).join('')+'</tr></thead><tbody>'+

      rows.join('')+'</tbody></table>';

  }

  function openReport(name){

    openDrawer('Report suite', name, 'SOP §18.2', '<div class="ph">Loading…</div>');

    if(name==='BGC Daily')          return reportBgcDaily();

    if(name==='Audit Hygiene')      return reportAuditHygiene();

    if(name==='State Funnel')       return reportStateFunnel();

    if(name==='SLA Compliance')     return reportSla();

    if(name==='Ageing')             return reportAgeing();

    if(name==='Management Roll-up') return reportRollup();

    // RBM Servicing: repeat-order rate, complaint rate and resolution TAT all live in order and

    // ticket data the lead record does not reach. Say so rather than showing an empty table.

    openDrawer('Report suite', name, 'SOP §18.2',

      '<div class="card"><div class="dnote">Repeat-order rate, complaint rate and resolution TAT need order '+

      'and ticket data, which the LMS does not hold. Post-sales (SOP §14) is not built yet — the lead '+

      'record stops at ONBOARDED.</div></div>');

  }

  function reportBgcDaily(){

    getJSON('/lms/dashboard/bgc-daily'+qsDates(),function(d){

      d=d||{};

      var head=[{t:'Day'},{t:'Agent'},{t:'Calls',n:1},{t:'Connected',n:1},{t:'Connect%',n:1},{t:'Avg talk',n:1},{t:'Longest',n:1}];

      var rows=(d.rows||[]).map(function(r){

        return '<tr><td class="nowrap">'+esc(r.day||'—')+'</td><td>'+esc(r.agent)+'</td>'+

          '<td class="num">'+fmtInt(r.calls)+'</td><td class="num">'+fmtInt(r.connected)+'</td>'+

          '<td class="num">'+pctCell(r.connectPct)+'</td><td class="num">'+secs(r.avgTalkSeconds)+'</td>'+

          '<td class="num">'+secs(r.longestSeconds)+'</td></tr>'; });

      var kpi='<div class="kpis" style="margin-bottom:12px">'+

        kpiTile('Calls placed', fmtInt(d.calls))+kpiTile('Connected', fmtInt(d.connected))+

        kpiTile('Connect rate', (d.connectPct||0)+'%')+kpiTile('Talk time', (d.talkMinutes||0)+' min')+'</div>';

      openDrawer('Report suite','BGC Daily','Real telephony from the call log',

        kpi+'<div class="card">'+tbl(head,rows)+

        '<div class="note">Connect rate = answered ÷ placed. Average talk time counts connected calls only — '+

        'averaging over every dial would make a day of unanswered ringing look like short conversations.</div></div>');

    });

  }

  function reportAuditHygiene(){

    getJSON('/lms/dashboard/audit-hygiene'+qsDates(),function(d){

      d=d||{};

      var kpi='<div class="kpis" style="margin-bottom:12px">'+

        kpiTile('Missing dispositions', fmtInt(d.missingDisposition))+

        kpiTile('SLA breached', fmtInt(d.slaBreached))+

        kpiTile('HOLD (no owner)', fmtInt(d.hold))+

        kpiTile('DND register', fmtInt(d.dndRegister))+'</div>';

      var head=[{t:'When'},{t:'Lead'},{t:'Number'},{t:'Call'}];

      var rows=(d.dndBreaches||[]).map(function(b){

        return '<tr class="clickrow" data-leadid="'+b.leadId+'"><td class="nowrap">'+fmtDT(b.when)+'</td>'+

          '<td>#'+b.leadId+'</td><td class="mono">'+esc(b.mobile||'—')+'</td><td>#'+b.callId+'</td></tr>'; });

      openDrawer('Report suite','Audit Hygiene','SOP §17',

        kpi+

        '<div class="card"><h2>DND breaches</h2><p class="desc">Calls placed to a number already on the '+

        'do-not-call register. The pre-check blocks these, so a row here is a bypass worth asking about.</p>'+

        tbl(head,rows)+'</div>'+

        '<div class="card"><h2>Recording access</h2><div class="kv">'+

        kvRow('Opens granted', fmtInt(d.recordingOpens))+

        kvRow('Opens denied', fmtInt(d.recordingDenied))+'</div>'+

        '<div class="note">Every open and every refusal is logged against the viewer (SOP §15). '+

        'Repeated denials are what a scope probe looks like.</div></div>');

    });

  }

  function reportStateFunnel(){

    var d=DATA.state||SEED.state||{}; var rows=(d.rows||[]).map(function(r){

      return '<tr><td><b>'+esc(r.regionName||r.regionCode||'—')+'</b></td><td class="num">'+fmtInt(r.newCount)+'</td>'+

        '<td class="num">'+fmtInt(r.contacted)+'</td><td class="num">'+fmtInt(r.qualified)+'</td>'+

        '<td class="num">'+fmtInt(r.visited)+'</td><td class="num">'+fmtInt(r.onboarded)+'</td>'+

        '<td class="num">'+pctCell(r.convPct||0)+'</td><td class="num">'+pctCell(r.slaPct||0)+'</td></tr>'; });

    openDrawer('Report suite','State Funnel','NEW → ONBOARDED by region','<div class="card">'+

      tbl([{t:'Region'},{t:'New',n:1},{t:'Contacted',n:1},{t:'Qualified',n:1},{t:'Visited',n:1},{t:'Onboarded',n:1},{t:'Conv%',n:1},{t:'SLA%',n:1}],rows)+'</div>');

  }

  function reportSla(){

    var d=DATA.heat||SEED.heat||{}; var rows=(d.bms||[]).map(function(r){

      var cells=(r.cells||[]).map(function(c){ return '<td class="num">'+(c.pct==null?'—':pctCell(c.pct))+'</td>'; }).join('');

      return '<tr><td><b>'+esc(r.bmName||'—')+'</b></td>'+cells+'</tr>'; });

    var head=[{t:'Owner'}].concat((d.weeks||[]).map(function(c){ return {t:c,n:1}; }));

    openDrawer('Report suite','SLA Compliance','% first contact within 5 hrs','<div class="card">'+

      tbl(head,rows)+'<div class="note">Blank cells mean no leads in that week — not 0% compliance.</div></div>');

  }

  function reportAgeing(){

    var d=DATA.ageing||SEED.ageing||{}; var rows=(d.rows||[]).map(function(r){

      return '<tr><td><b>'+esc(r.label||r.stage||'—')+'</b></td>'+

        '<td class="num">'+fmtInt(r.count)+'</td><td class="num">'+fmtInt(r.days)+'</td></tr>'; });

    openDrawer('Report suite','Ageing','Open leads with no action for '+(d.days||7)+'+ days','<div class="card">'+

      tbl([{t:'Stage'},{t:'Leads',n:1},{t:'Days idle',n:1}],rows)+

      '<div class="note">Total stuck: '+fmtInt(d.total||0)+'</div></div>');

  }

  function reportRollup(){

    var s=DATA.summary||SEED.summary||{};

    var kpi='<div class="kpis" style="margin-bottom:12px">'+

      kpiTile('Leads in period', fmtInt(s.total))+

      kpiTile('Onboarded', fmtInt(onboardedCount()))+

      kpiTile('Conversion', (s.conversionPct||0)+'%')+

      kpiTile('Onboarded value', inrShort(s.onboardedValue))+'</div>';

    var rows=(s.funnel||[]).map(function(f){

      return '<tr><td><b>'+esc(f.label||f.stage)+'</b></td><td class="num">'+fmtInt(f.count)+'</td>'+

        '<td class="num">'+(f.pct==null?'—':pctCell(f.pct))+'</td></tr>'; });

    openDrawer('Report suite','Management Roll-up','Cross-region',

      kpi+'<div class="card">'+tbl([{t:'Stage'},{t:'Leads',n:1},{t:'% of top',n:1}],rows)+'</div>');

  }

  function openAgentCalls(authId){

    var r=null; LIVE.rows.forEach(function(x){ if(x.authId===authId) r=x; });

    if(!r) return;

    openDrawer('Live floor', r.agent, r.status+(r.extension?(' · ext '+r.extension):''),

      '<div class="card"><div class="kv">'+

        kvRow('Status', lstat(r.status))+

        kvRow('In status', hms(r.sinceSeconds))+

        kvRow('Calls today', fmtInt(r.calls)+' · '+fmtInt(r.connected)+' connected ('+(r.connectPct||0)+'%)')+

        kvRow('Talk time', secs(r.talkSeconds)+' · longest '+secs(r.longestSeconds))+

        kvRow('Last call', r.lastCallAt?fmtDT(r.lastCallAt):'—')+

        kvRow('Leads assigned', fmtInt(r.assigned))+

        kvRow('Touched today', fmtInt(r.touched)+' · '+fmtInt(r.dispositioned)+' dispositioned')+

        kvRow('SLA breached', slaBreachCell(r.slaBreached))+

      '</div>'+

      (r.liveLeadId?('<div class="note">On a call now &mdash; <a href="#" data-leadid="'+r.liveLeadId+'">open lead #'+r.liveLeadId+'</a></div>'):'')+

      (r.staleCall?'<div class="note" style="color:#e03131">An earlier call was never closed. Only the browser poll ends a VBC call, so a tab closed mid-call leaves the row open.</div>':'')+

      '</div>');

  }

  function kpiTile(label,val){

    return '<div class="kpi"><div class="top"><div class="label">'+esc(label)+'</div></div>'+

           '<div class="val">'+val+'</div></div>';

  }

  function qsDates(){ var q='?'; if(STATE.from)q+='from='+encodeURIComponent(STATE.from)+'&';

    if(STATE.to)q+='to='+encodeURIComponent(STATE.to); return q; }

  // ---- Export (SOP §18.1) -------------------------------------------------------------------

  // Exports what is on screen — the current filters, search and sort — rather than everything,

  // because an export that ignores the filters is a different report than the one being looked at.

  function exportPipeline(){

    var p='/lms/dashboard/pipeline?page=1&pageSize=500&sort='+encodeURIComponent(PIPE.sort)+

          '&dir='+encodeURIComponent(PIPE.dir);

    if(PIPE.q){ p+='&q='+encodeURIComponent(PIPE.q); if(STATE.regionId) p+='&regionId='+encodeURIComponent(STATE.regionId); }

    else { p+=qs(); }

    toast('Preparing export…');

    getJSON(p,function(d){

      var rows=(d&&d.rows)?d.rows:[];

      if(!rows.length){ toast('Nothing to export'); return; }

      var cols=[['lmsCode','LMS ID'],['name','Retailer'],['outlet','Business'],['path','Path'],

                ['stageLabel','Stage'],['owner','Owner'],['city','City'],['createdBy','Created by'],

                ['slaState','SLA'],['value','Business value (lakh)']];

      var csv=[cols.map(function(c){ return '"'+c[1]+'"'; }).join(',')];

      rows.forEach(function(r){

        csv.push(cols.map(function(c){

          var v=r[c[0]]; if(v==null) v='';

          // Quote everything and double embedded quotes: names here contain commas routinely.

          return '"'+String(v).replace(/"/g,'""')+'"'; }).join(','));

      });

      var blob=new Blob([""+csv.join('\r\n')],{type:'text/csv;charset=utf-8;'});

      var a=document.createElement('a');

      a.href=URL.createObjectURL(blob);

      a.download='lms-pipeline-'+(STATE.from||'all')+'-to-'+(STATE.to||'now')+'.csv';

      document.body.appendChild(a); a.click(); document.body.removeChild(a);

      URL.revokeObjectURL(a.href);

      toast('Exported '+rows.length+' lead(s)',1);

    });

  }