Subversion Repositories SmartDukaan

    /* rbm performance dashboard (extracted from today_po_rbm) */

    #rdrrPerfWrap {

      overflow-x: auto

    }

    #rdrrPerfWrap table {

      width: 100%;

      border-collapse: separate;

      border-spacing: 0;

      font-size: 12.5px;

      background: #fff

    }

    #rdrrPerfWrap table th, #rdrrPerfWrap table td {

      padding: 9px 10px;

      text-align: center;

      vertical-align: middle;

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

      color: var(--ink);

      font-weight: 500

    }

    #rdrrPerfWrap table thead th {

      font-size: 10.5px;

      text-transform: uppercase;

      letter-spacing: .05em;

      font-weight: 700;

      background: #1d2433;

      color: #fff;

      border-bottom: 0;

      padding: 10px 8px;

      line-height: 1.2

    }

    #rdrrPerfWrap table thead th small {

      font-size: 9.5px;

      color: rgba(255, 255, 255, .7);

      font-weight: 600;

      display: block;

      margin-top: 2px

    }

    /* per-column accent badges (keep original palette from today_po_rbm) */

    #rdrrPerfWrap table thead th:nth-child(4) {

      background: linear-gradient(180deg, #40c057, #2f9e44)

    }

    #rdrrPerfWrap table thead th:nth-child(5) {

      background: linear-gradient(180deg, #22b8cf, #0e959f)

    }

    #rdrrPerfWrap table thead th:nth-child(6) {

      background: linear-gradient(180deg, #ffa94d, #e8590c)

    }

    #rdrrPerfWrap table thead th:nth-child(7) {

      background: linear-gradient(180deg, #9775fa, #7048e8)

    }

    #rdrrPerfWrap table thead th:nth-child(8) {

      background: linear-gradient(180deg, #ffd43b, #e8ac00);

      color: #3a2500

    }

    #rdrrPerfWrap table thead th:nth-child(8) small {

      color: rgba(58, 37, 0, .75)

    }

    #rdrrPerfWrap table thead th:nth-child(9) {

      background: linear-gradient(180deg, #ff922b, #e8590c)

    }

    #rdrrPerfWrap table thead th:last-child {

      background: linear-gradient(180deg, #ff6b6b, #e03131)

    }

    #rdrrPerfWrap table tbody tr:hover {

      background: #f6f8fd

    }

    /* rank rows keep their original background tint from today_po_rbm inline style */

    #rdrrPerfWrap table tbody tr td:nth-child(2) {

      text-align: left;

      font-weight: 700;

      color: var(--ink)

    }

    #rdrrPerfWrap table tbody tr td:first-child img {

      width: 24px;

      height: 24px

    }

    #rdrrPerfWrap table tbody tr:first-child td {

      font-weight: 700

    }

    #rdrrPerfWrap table tbody tr td:last-child {

      font-weight: 770;

      font-size: 13.5px;

      font-variant-numeric: tabular-nums

    }

    /* purchase-milestones (brand × RBM) container — restyles the injected Bootstrap fragment */

    #rdrrPmWrap {

      overflow-x: auto

    }

    #rdrrPmWrap table {

      width: 100%;

      border-collapse: separate;

      border-spacing: 0;

      font-size: 12.5px;

      margin-bottom: 12px;

      background: #fff

    }

    #rdrrPmWrap table th, #rdrrPmWrap table td {

      padding: 8px 8px;

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

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

      text-align: right;

      font-variant-numeric: tabular-nums;

      color: var(--ink);

      vertical-align: middle

    }

    #rdrrPmWrap table th:first-child, #rdrrPmWrap table td:first-child {

      text-align: left;

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

      font-weight: 650;

      position: sticky;

      left: 0;

      background: #fff;

      z-index: 1;

      min-width: 130px

    }

    #rdrrPmWrap table thead th {

      text-transform: uppercase;

      letter-spacing: .04em;

      font-size: 10.5px;

      color: var(--soft);

      font-weight: 700;

      background: #fafbfe;

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

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

      text-align: center

    }

    #rdrrPmWrap table thead th[colspan] {

      font-size: 12px;

      padding: 8px 6px;

      color: #fff

    }

    #rdrrPmWrap table thead th p {

      margin: 0;

      font-size: 13px;

      font-weight: 770;

      letter-spacing: .01em;

      line-height: 1.1

    }

    #rdrrPmWrap table thead tr:first-child th:first-child {

      background: #fafbfe;

      color: var(--soft)

    }

    #rdrrPmWrap table tbody tr:hover {

      background: #f6f8fd

    }

    #rdrrPmWrap table tbody tr:hover td:first-child {

      background: #f6f8fd

    }

    #rdrrPmWrap table tr.green td {

      background: #eaf7ef !important;

      font-weight: 770;

      color: #177a3a

    }

    #rdrrPmWrap table tr.green td:first-child {

      background: #eaf7ef !important;

      color: #177a3a

    }

    /* known brand accents (extend as more brands appear) */

    #rdrrPmWrap table thead th.vivo {

      background: linear-gradient(180deg, #00baf2, #0a8fb5)

    }

    #rdrrPmWrap table thead th.oppo {

      background: linear-gradient(180deg, #20a558, #177a3a)

    }

    #rdrrPmWrap table thead th.samsung {

      background: linear-gradient(180deg, #0b3d91, #071e51)

    }

    #rdrrPmWrap table thead th.alcatel {

      background: linear-gradient(180deg, #5c7cfa, #3b5bdb)

    }

    #rdrrPmWrap table thead th.motorola {

      background: linear-gradient(180deg, #495057, #212529)

    }

    #rdrrPmWrap table thead th.hmd {

      background: linear-gradient(180deg, #7048e8, #5b34c9)

    }

    #rdrrPmWrap table thead th.xiaomi {

      background: linear-gradient(180deg, #ffa726, #e8590c)

    }

    #rdrrPmWrap table thead th.lava {

      background: linear-gradient(180deg, #e03131, #a11515)

    }

    #rdrrPmWrap table thead th.poco {

      background: linear-gradient(180deg, #ffd43b, #e8ac00);

      color: #3a2500

    }

    #rdrrPmWrap table thead th.realme {

      background: linear-gradient(180deg, #f59f00, #e8590c)

    }

    #rdrrPmWrap table thead th.apple {

      background: linear-gradient(180deg, #495057, #141a2b)

    }

    #rdrrPmWrap table thead th.oneplus {

      background: linear-gradient(180deg, #e03131, #a11515)

    }

    #rdrrPmWrap table thead th.tecno {

      background: linear-gradient(180deg, #0ca678, #087a56)

    }

    #rdrrPmWrap table thead th.ai + {

      background: linear-gradient(180deg, #7048e8, #5b34c9)

    }

    #rdrrPmWrap table thead th.total {

      background: linear-gradient(180deg, #3b5bdb, #28449e)

    }

    /* default gradient for any unmapped brand */

    #rdrrPmWrap table thead th[colspan]:not(.vivo):not(.oppo):not(.samsung):not(.alcatel):not(.motorola):not(.hmd):not(.xiaomi):not(.lava):not(.poco):not(.realme):not(.apple):not(.oneplus):not(.tecno):not(.total) {

      background: linear-gradient(180deg, var(--brand2), var(--brand))

    }

    #rdrrPmWrap table td.currency {

      font-weight: 600

    }

  <!-- RBM Performance Dashboard (MTD) — extracted from /indent/today_po_rbm without any backend change -->

  <div class="sectionlabel">RBM Performance Dashboard (MTD)</div>

  <div class="card">

    <div class="card-hd">

      <div>

        <h2>Composite MTD Ranking</h2>

        <p class="desc">Rank of RBMs by weighted score across Talk Time (10%) + MTD Achievement (55%) + Aging (2%) +

          &gt;1L Partners (29%) + Rating (2%) + Partners Rated (2%).</p>

      </div>

      <span class="badge-period" id="rdrrPerfMonth">MTD</span>

    </div>

    <div id="rdrrPerfWrap">

      <div class="loading">

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

        Loading…

      </div>

    </div>

  </div>

  <!-- RBM Call Target Summary — full interactive page embedded via iframe (no backend change) -->

  <div class="sectionlabel">RBM Call Target Summary</div>

  <div class="card">

    <div class="card-hd">

      <div>

        <h2>Today's Call Coverage per RBM</h2>

        <p class="desc">Full interactive view — all popups, drill-downs and downloads work exactly like the standalone

          page.</p>

      </div>

      <a class="badge-period" href="/indent/rbm_call_target" target="_blank" style="text-decoration:none">Open in new

        tab &rsaquo;</a>

    </div>

    <iframe id="rdrrCallFrame" src="/indent/rbm_call_target" title="RBM Call Target Summary"

            style="width:100%;min-height:800px;border:0;border-radius:10px;background:#fff;display:block"></iframe>

  </div>

  <!-- Today PO & Billed — Brand × RBM matrix (reuses /indent/today_po_table_fragment) -->

  <div class="sectionlabel">Today PO &amp; Billed — Brand &times; RBM</div>

  <div class="card">

    <div class="card-hd">

      <div>

        <h2>Purchase Milestones by Brand</h2>

        <p class="desc">Today's PO value / partner count / total billed, per RBM &times; brand. Always today

          (independent of the range picker above).</p>

      </div>

      <select id="rdrrPmCategory" class="ctl" style="min-width:170px;height:34px;padding:6px 12px">

        <option value="RBM">All RBMs</option>

        <option value="NSM">All NSMs</option>

        <option value="RSM">All RSMs</option>

        <option value="BM">All BMs</option>

        <option value="DM">All DMs</option>

        <option value="CM">All CMs</option>

        <option value="ASM">All ASMs</option>

      </select>

    </div>

    <div id="rdrrPmWrap">

      <div class="loading">

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

        Loading…

      </div>

    </div>

  </div>

    // ------------------------- Today PO & Billed matrix -------------------------

    // Reuses the existing /indent/today_po_table_fragment endpoint (unchanged).

    // Injects the returned HTML and restyles it via #rdrrPmWrap CSS.

    function loadPurchaseMilestones() {

      var cat = $("#rdrrPmCategory").val() || "RBM";

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

      $.ajax({

        url: "/indent/today_po_table_fragment",

        type: "GET",

        data: {categoryType: cat},

        success: function (html) {

          $("#rdrrPmWrap").html(html);

          $("#rdrrPmWrap .currency").each(function () {

            var elem = $(this);

            var n = parseInt(elem.text().replace(/[^\d.-]/g, ""), 10);

            if (!isNaN(n)) elem.text(numberToIndianCurrency(n));

          });

        },

        error: function () {

          $("#rdrrPmWrap").html('<div class="empty">Failed to load purchase-milestones data.</div>');

        }

      });

    }

    function numberToIndianCurrency(n) {

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

      var s = n.toString();

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

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

      if (other !== "") lastThree = "," + lastThree;

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

    }

    $("#rdrrPmCategory").on("change", loadPurchaseMilestones);

    // ------------------------- RBM Performance Dashboard (MTD) -------------------------

    // No dedicated backend endpoint exists — the perf-dashboard table is only rendered

    // inline in /indent/today_po_rbm. We fetch that page and extract just the table.

    // Trade-off: heavier request (server re-runs full page prep). Consider adding a

    // /rbm-drr/performance fragment endpoint later if this becomes a hot path.

    function loadPerformanceDashboard() {

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

      $.ajax({

        url: "/indent/today_po_rbm",

        type: "GET",

        dataType: "html",

        success: function (fullHtml) {

          var doc = new DOMParser().parseFromString(fullHtml, "text/html");

          var tbl = doc.querySelector("#performance-dashboard-table");

          if (!tbl) {

            $("#rdrrPerfWrap").html('<div class="empty"><div class="ei">📊</div>No performance dashboard data available yet.</div>');

            return;

          }

          // Fix any relative image paths (e.g. king.png / trophy-cup.png) to be root-relative.

          tbl.querySelectorAll("img").forEach(function (im) {

            var src = im.getAttribute("src") || "";

            if (src.indexOf("resources/") !== -1 && src.charAt(0) !== "/") {

              im.setAttribute("src", "/" + src.replace(/^\.\.\/+/, ""));

            }

          });

          $("#rdrrPerfWrap").empty().append(tbl);

        },

        error: function () {

          $("#rdrrPerfWrap").html('<div class="empty">Failed to load performance dashboard.</div>');

        }

      });

    }

    loadPurchaseMilestones();

    loadPerformanceDashboard();