Subversion Repositories SmartDukaan

    .brand-head .bpc {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      gap: 4px;

      font-size: 11.5px;

      font-weight: 700;

      color: var(--brand);

      background: #eef2ff;

      border: 1px solid #d7defb;

      border-radius: 999px;

      padding: 3px 9px;

      font-variant-numeric: tabular-nums;

      white-space: nowrap;

      justify-self: center

    }

    .brand-head .bpc.zero {

      color: var(--soft);

      background: #f1f3f9;

      border-color: var(--line)

    }

    .brand-head .bpc svg {

      width: 11px;

      height: 11px

    }

    /* extras: aging + partner-billing tables */

    .xtable {

      width: 100%;

      border-collapse: separate;

      border-spacing: 0;

      font-size: 13px

    }

    .xtable th {

      font-size: 10.5px;

      text-transform: uppercase;

      letter-spacing: .06em;

      color: var(--soft);

      font-weight: 700;

      white-space: nowrap;

      padding: 10px 10px;

      border-bottom: 1px solid var(--line);

      text-align: left;

      background: #fff

    }

    .xtable th.num {

      text-align: right

    }

    .xtable td {

      padding: 10px;

      border-bottom: 1px solid var(--line2);

      color: var(--ink);

      font-weight: 500

    }

    .xtable td.num {

      text-align: right;

      font-variant-numeric: tabular-nums;

      font-weight: 650

    }

    .xtable tbody tr:hover {

      background: #f6f8fd

    }

    .xtable .rbm-nm {

      font-weight: 700;

      color: var(--ink)

    }

    .xtable tr.tot td {

      font-weight: 770;

      background: #fafbfe;

      border-top: 2px solid var(--line);

      color: var(--ink)

    }

    .xtable tr.bal td {

      font-weight: 700;

      background: #fffbf2;

      border-top: 1px dashed #f0d68a;

      color: #7a5a00

    }

    .xtable tr.bal td.hdr {

      font-weight: 770

    }

    .xtable td.g-hid {

      border-left: 2px solid transparent

    }

    /* placeholder for future column tint */

    .xtable th.g-hid, .xtable td.g-hid {

      color: var(--hid)

    }

    .xtable th.g-fast, .xtable td.g-fast {

      color: var(--fast)

    }

    .xtable th.g-run, .xtable td.g-run {

      color: var(--run)

    }

    .xtable th.g-slow, .xtable td.g-slow {

      color: var(--slow)

    }

    .xtable th.g-other, .xtable td.g-other {

      color: var(--other)

    }

    .xtable th.g-total, .xtable td.g-total {

      color: var(--brand);

      font-weight: 700

    }

    .xtable td.g-hid, .xtable td.g-fast, .xtable td.g-run, .xtable td.g-slow, .xtable td.g-other {

      opacity: .95

    }

    .xtable td.zero {

      color: var(--soft);

      font-weight: 500

    }

    .xtable .cnt-pill {

      display: inline-block;

      min-width: 32px;

      padding: 2px 8px;

      border-radius: 6px;

      font-size: 11.5px;

      font-weight: 700;

      font-variant-numeric: tabular-nums;

      background: #eef2ff;

      color: var(--brand)

    }

    .xtable .cnt-pill.zero {

      background: #f1f3f9;

      color: var(--soft)

    }

    .xtable .cnt-pill.warn {

      background: #fff0e0;

      color: #a04600

    }

    .xtable .cnt-pill.good {

      background: #e5f7ee;

      color: #177a3a

    }

  <!-- >15 Days Aging Sold -->

  <div class="sectionlabel">&gt; 15 Days Aging Sold</div>

  <div class="card">

    <div class="card-hd">

      <div>

        <h2>Aging Inventory Cleared</h2>

        <p class="desc">Billed value of items that were &gt; 15 days old at sale, per RBM, for the picked range.</p>

      </div>

      <span class="badge-period" id="rdrrAgingPeriod">&mdash;</span>

    </div>

    <div id="rdrrAgingWrap">

      <div class="loading">

        <div class="spinner"></div>

        Loading…

      </div>

    </div>

  </div>

  <!-- Partner Billing Count -->

  <div class="sectionlabel">Partner Billing Count <span

          style="color:var(--soft);font-weight:600;text-transform:none;letter-spacing:0;margin-left:6px">(Target: &gt;1L, Non-Target: &gt;20K)</span>

  </div>

  <div class="card">

    <div class="card-hd">

      <div>

        <h2>Partners Who Billed This Month</h2>

        <p class="desc">Counts partners meeting the billing threshold in each week bucket. Always month-to-date (weekly

          buckets are inherently monthly).</p>

      </div>

      <span class="badge-period" id="rdrrBillingPeriod">&mdash;</span>

    </div>

    <div id="rdrrBillingWrap">

      <div class="loading">

        <div class="spinner"></div>

        Loading…

      </div>

    </div>

  </div>

      $("#rdrrAgingWrap").html('<div class="loading"><div class="spinner"></div>Loading&hellip;</div>');

      $("#rdrrBillingWrap").html('<div class="loading"><div class="spinner"></div>Loading&hellip;</div>');

      $("#rdrrAgingPeriod").text(fmtDate(startDate) + " – " + fmtDate(endDate));

      fetch("/rbm-drr/extras?startDate=" + startDate + "&endDate=" + endDate, {credentials: "same-origin"})

              .then(function (r) {

                return r.json().then(function (b) {

                  return {ok: r.ok, body: b};

                });

              })

              .then(function (res) {

                if (!res.ok) {

                  var msg = '<div class="empty">' + escapeHtml(res.body && res.body.error ? res.body.error : "Failed to load.") + '</div>';

                  $("#rdrrAgingWrap").html(msg);

                  $("#rdrrBillingWrap").html(msg);

                  return;

                }

                renderAging(res.body);

                renderPartnerBilling(res.body);

              })

              .catch(function (e) {

                var msg = '<div class="empty">Failed to load: ' + (e && e.message ? e.message : "network error") + '</div>';

                $("#rdrrAgingWrap").html(msg);

                $("#rdrrBillingWrap").html(msg);

              });

    }

    function renderAging(data) {

      var rows = data.aging || [];

      var totals = data.agingTotals || {};

      var balance = data.balance || {};

      if (rows.length === 0) {

        $("#rdrrAgingWrap").html('<div class="empty"><div class="ei">📦</div>No aging inventory sold in this range.</div>');

        return;

      }

      var html = ['<table class="xtable"><thead><tr>',

        '<th>RBM</th>',

        '<th class="num g-hid">HID</th>',

        '<th class="num g-fast">FAST</th>',

        '<th class="num g-run">RUN</th>',

        '<th class="num g-slow">SLOW</th>',

        '<th class="num g-other">OTHER</th>',

        '<th class="num g-total">TOTAL</th>',

        '</tr></thead><tbody>'];

      rows.forEach(function (r) {

        html.push('<tr>' +

                '<td class="rbm-nm">' + escapeHtml(r.rbmName || '-') + '</td>' +

                cell(r.hid, 'g-hid') + cell(r.fast, 'g-fast') + cell(r.run, 'g-run') +

                cell(r.slow, 'g-slow') + cell(r.other, 'g-other') + cell(r.total, 'g-total') +

                '</tr>');

      });

      html.push('<tr class="tot">' +

              '<td>Total</td>' +

              cell(totals.hid, 'g-hid') + cell(totals.fast, 'g-fast') + cell(totals.run, 'g-run') +

              cell(totals.slow, 'g-slow') + cell(totals.other, 'g-other') + cell(totals.total, 'g-total') +

              '</tr>');

      html.push('<tr class="bal">' +

              '<td class="hdr">15-Day Balance Value</td>' +

              cell(balance.hid) + cell(balance.fast) + cell(balance.run) +

              cell(balance.slow) + cell(balance.other) + cell(balance.total) +

              '</tr>');

      html.push('</tbody></table>');

      $("#rdrrAgingWrap").html(html.join(""));

    }

    function cell(v, cls) {

      v = Number(v) || 0;

      var zero = v === 0 ? ' zero' : '';

      var extra = cls ? ' ' + cls : '';

      return '<td class="num' + extra + zero + '">' + formatIndian(v) + '</td>';

    }

    function formatIndian(n) {

      n = Math.round(Number(n) || 0);

      if (n === 0) return '0';

      var s = n.toString();

      var lastThree = s.substring(s.length - 3);

      var otherNums = s.substring(0, s.length - 3);

      if (otherNums !== '') lastThree = ',' + lastThree;

      return otherNums.replace(/\B(?=(\d{2})+(?!\d))/g, ',') + lastThree;

    }

    function renderPartnerBilling(data) {

      var rows = data.partnerBilling || [];

      var totals = data.partnerBillingTotals || {};

      $("#rdrrBillingPeriod").text(data.partnerBillingMonth || '');

      if (rows.length === 0) {

        $("#rdrrBillingWrap").html('<div class="empty"><div class="ei">👥</div>No targeted partners this month.</div>');

        return;

      }

      var html = ['<table class="xtable"><thead><tr>',

        '<th>RBM</th>',

        '<th class="num">Targeted</th>',

        '<th class="num">Week 1<br><small style="color:var(--soft);font-weight:600">(1–7)</small></th>',

        '<th class="num">Week 2<br><small style="color:var(--soft);font-weight:600">(8–15)</small></th>',

        '<th class="num">Week 3<br><small style="color:var(--soft);font-weight:600">(16–22)</small></th>',

        '<th class="num">Week 4<br><small style="color:var(--soft);font-weight:600">(23–end)</small></th>',

        '<th class="num g-total">MTD</th>',

        '<th class="num">Zero Billed<br><small style="color:var(--soft);font-weight:600">(&lt;1L / &lt;20K)</small></th>',

        '</tr></thead><tbody>'];

      rows.forEach(function (r) {

        html.push('<tr>' +

                '<td class="rbm-nm">' + escapeHtml(r.rbmName || '-') + '</td>' +

                '<td class="num">' + pill(r.targeted, '') + '</td>' +

                '<td class="num">' + pill(r.w1, ratio(r.w1, r.targeted)) + '</td>' +

                '<td class="num">' + pill(r.w2, ratio(r.w2, r.targeted)) + '</td>' +

                '<td class="num">' + pill(r.w3, ratio(r.w3, r.targeted)) + '</td>' +

                '<td class="num">' + pill(r.w4, ratio(r.w4, r.targeted)) + '</td>' +

                '<td class="num g-total">' + pill(r.mtd, ratio(r.mtd, r.targeted)) + '</td>' +

                '<td class="num">' + pill(r.zero, r.zero > 0 ? 'warn' : 'zero') + '</td>' +

                '</tr>');

      });

      html.push('<tr class="tot">' +

              '<td>Total</td>' +

              '<td class="num">' + formatIndian(totals.targeted) + '</td>' +

              '<td class="num">' + formatIndian(totals.w1) + '</td>' +

              '<td class="num">' + formatIndian(totals.w2) + '</td>' +

              '<td class="num">' + formatIndian(totals.w3) + '</td>' +

              '<td class="num">' + formatIndian(totals.w4) + '</td>' +

              '<td class="num g-total">' + formatIndian(totals.mtd) + '</td>' +

              '<td class="num">' + formatIndian(totals.zero) + '</td>' +

              '</tr>');

      html.push('</tbody></table>');

      $("#rdrrBillingWrap").html(html.join(""));

    }

    function pill(v, cls) {

      v = Number(v) || 0;

      var c = cls || (v === 0 ? 'zero' : '');

      return '<span class="cnt-pill ' + c + '">' + formatIndian(v) + '</span>';

    }

    function ratio(part, total) {

      part = Number(part) || 0;

      total = Number(total) || 0;

      if (total === 0) return 'zero';

      var p = (part / total) * 100;

      if (p >= 60) return 'good';

      if (p >= 30) return '';

      if (p > 0) return 'warn';

      return 'zero';

        var pc = Number(b.partnerCount) || 0;

        var pcCls = pc === 0 ? ' zero' : '';

        var pcLabel = pc + (pc === 1 ? ' partner' : ' partners');

                '<div class="bpc' + pcCls + '" title="Distinct partners of this RBM who billed ' + escapeHtml(b.brand) + ' in the range">' +

                '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>' +

                pcLabel +

                '</div>' +