Subversion Repositories SmartDukaan

      max-height: 640px;

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

      border-radius: 10px;

      background: #fff

    }

    #rdrrPmWrap .pm-grid {

      width: 100%;

    /* --- header (brand strip) --- */

      position: sticky;

      top: 0;

      z-index: 3;

      color: #fff;

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

      border-bottom: 2px solid rgba(0, 0, 0, .08);

      box-shadow: 0 2px 0 rgba(0, 0, 0, .04)

      left: 0;

      z-index: 5;

      background: #fff;

      color: var(--ink);

      min-width: 180px;

      padding: 8px 14px

    }

    #rdrrPmWrap .pm-corner-lbl {

      font-size: 12px;

      letter-spacing: .05em;

      color: var(--ink)

    }

    #rdrrPmWrap .pm-corner-hint {

      font-size: 10.5px;

      color: var(--soft);

      font-weight: 500;

      letter-spacing: .02em;

      text-transform: none;

      margin-top: 2px

    }

    /* --- rows --- */

    #rdrrPmWrap .pm-grid tbody tr.pm-row + tr.pm-row td {

      border-top: 1px solid var(--line2)

    }

    #rdrrPmWrap .pm-grid tbody tr.pm-row:hover td:not(.pm-name) {

      outline: 1px solid rgba(59, 91, 219, .35);

      outline-offset: -1px

    }

    #rdrrPmWrap .pm-grid tbody tr.pm-row:hover .pm-name {

      background: #eef2fb

    }

    /* --- name column (sticky) --- */

    #rdrrPmWrap .pm-name {

      z-index: 2;

      max-width: 220px;

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

      vertical-align: middle

      font-weight: 650;

      color: var(--ink);

      line-height: 1.2;

      overflow: hidden;

      text-overflow: ellipsis

    }

    #rdrrPmWrap .pm-name-sub {

      margin-top: 2px;

      letter-spacing: .04em;

      text-transform: uppercase;

      font-weight: 600

    }

    /* --- data cells --- */

    #rdrrPmWrap .pm-cell {

      padding: 9px 12px;

      text-align: right;

      vertical-align: middle;

      font-variant-numeric: tabular-nums;

      color: var(--ink);

      transition: outline-color .1s

    }

    #rdrrPmWrap .pm-cell-zero {

      color: #cbd0d9;

      font-size: 15px;

      font-weight: 500

    }

    #rdrrPmWrap .pm-billed {

      margin-top: 3px;

      color: var(--soft);

      font-weight: 500;

      letter-spacing: .02em;

      justify-content: flex-end;

      line-height: 1.15

      font-size: 9.5px;

      opacity: .75;

    /* --- totals row (pinned at top, distinct) --- */

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

      border-bottom: 2px solid var(--brand)

    }

    #rdrrPmWrap .pm-cell-total {

      background: linear-gradient(180deg, #f2f5fb, #eaeff9) !important;

      border-bottom: 2px solid var(--brand)

    #rdrrPmWrap .pm-cell-total .pm-billed {

      color: var(--brand);

      font-weight: 800;

      font-size: 14px

    }

    #rdrrPmWrap .pm-grid thead th.total {

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

    }

    // heatmap grid — one row per person, one column per brand, cell showing

    // Billed (primary) + Partners/PO (secondary), with per-brand heat shading.

          try {

    // Compact currency: >= 1L => "12.4 L", >= 1K => "45.2 K", else raw.

    function pmCompactCurrency(n) {

      n = Number(n) || 0;

      if (n >= 10000000) return "₹" + (n / 10000000).toFixed(2) + " Cr";

      if (n >= 100000) return "₹" + (n / 100000).toFixed(2) + " L";

      if (n >= 1000) return "₹" + (n / 1000).toFixed(1) + " K";

      return "₹" + numberToIndianCurrency(Math.round(n));

    }

    // Parse the injected multi-table fragment into:

    //   { brands: [{name, slug}], rows: [{name, cells: {brand: {po, count, billed}}, totals: {po, count, billed}}] }

    function parsePurchaseMilestonesFragment(html) {

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

      var tables = doc.querySelectorAll("table");

      var brandOrder = [];

      var brandSet = {};

      var rowsMap = {};   // name -> {name, order, cells}

      var rowOrder = [];

      tables.forEach(function (tbl) {

        var theadRows = tbl.querySelectorAll("thead tr");

        if (theadRows.length < 1) return;

        // First thead row: [AuthUser th] + brand ths (colspan=3)

        var brandThs = theadRows[0].querySelectorAll("th[colspan]");

        var brands = [];

        brandThs.forEach(function (th) {

          var label = (th.textContent || "").trim().toUpperCase();

          if (!label) return;

          brands.push(label);

          if (!brandSet[label]) {

            brandSet[label] = true;

            brandOrder.push({name: label, slug: label.toLowerCase().replace(/[^a-z0-9]+/g, "")});

          }

        });

        tbl.querySelectorAll("tbody tr").forEach(function (tr) {

          var tds = tr.querySelectorAll("td");

          if (tds.length < 1 + brands.length * 3) return;

          var name = (tds[0].textContent || "").trim();

          if (!name) return;

          var row = rowsMap[name];

          if (!row) {

            row = {name: name, cells: {}, isTotal: /^all\b/i.test(name)};

            rowsMap[name] = row;

            rowOrder.push(name);

          }

          for (var i = 0; i < brands.length; i++) {

            var b = brands[i];

            var po = parseFloat((tds[1 + i * 3].textContent || "0").replace(/[^\d.-]/g, "")) || 0;

            var count = parseInt((tds[1 + i * 3 + 1].textContent || "0").replace(/[^\d.-]/g, ""), 10) || 0;

            var billed = parseFloat((tds[1 + i * 3 + 2].textContent || "0").replace(/[^\d.-]/g, "")) || 0;

            row.cells[b] = {po: po, count: count, billed: billed};

          }

        });

      });

      // Pull the TOTAL brand out of brandOrder and keep it first (fixed column).

      var totalIdx = brandOrder.findIndex(function (b) {

        return b.name === "TOTAL";

      });

      var totalBrand = totalIdx >= 0 ? brandOrder.splice(totalIdx, 1)[0] : null;

      // Sort remaining brands by grand total Billed (biggest first) using the "All …" row if present.

      var totalRowName = rowOrder.find(function (n) {

        return /^all\b/i.test(n);

      });

      var totalRow = totalRowName ? rowsMap[totalRowName] : null;

      if (totalRow) {

        brandOrder.sort(function (a, b) {

          var av = (totalRow.cells[a.name] || {}).billed || 0;

          var bv = (totalRow.cells[b.name] || {}).billed || 0;

          return bv - av;

        });

      }

      if (totalBrand) brandOrder.unshift(totalBrand);

      // Order rows: total first, others by grand total Billed (from TOTAL brand or sum).

      var totalRowIdx = totalRowName ? rowOrder.indexOf(totalRowName) : -1;

      if (totalRowIdx > 0) {

        rowOrder.splice(totalRowIdx, 1);

        rowOrder.unshift(totalRowName);

      }

      var head = totalRowIdx >= 0 ? [rowOrder.shift()] : [];

      rowOrder.sort(function (a, b) {

        var av = (rowsMap[a].cells["TOTAL"] || {}).billed || 0;

        var bv = (rowsMap[b].cells["TOTAL"] || {}).billed || 0;

        return bv - av;

      });

      rowOrder = head.concat(rowOrder);

      // Per-brand max Billed for heatmap intensity (excludes the totals row).

      var brandMax = {};

      brandOrder.forEach(function (b) {

        var max = 0;

        rowOrder.forEach(function (name) {

          var row = rowsMap[name];

          if (row.isTotal) return;

          var v = (row.cells[b.name] || {}).billed || 0;

          if (v > max) max = v;

        });

        brandMax[b.name] = max;

      });

      var rows = rowOrder.map(function (n) {

        return rowsMap[n];

      });

      return {brands: brandOrder, rows: rows, brandMax: brandMax};

    }

    function renderPurchaseMilestonesGrid(model) {

      if (!model.rows.length || !model.brands.length) {

        return '<div class="empty">No data.</div>';

      }

      var html = ['<div class="pm-grid-wrap"><table class="pm-grid"><thead><tr>'];

      html.push('<th class="pm-corner">' +

              '<div class="pm-corner-lbl">Person</div>' +

              '<div class="pm-corner-hint">' + model.rows.length + ' · ' + model.brands.length + ' brands</div>' +

              '</th>');

      model.brands.forEach(function (b) {

        html.push('<th class="pm-brand ' + b.slug + '">' + b.name + '</th>');

      });

      html.push('</tr></thead><tbody>');

      model.rows.forEach(function (row) {

        html.push('<tr class="pm-row' + (row.isTotal ? ' pm-total-row' : '') + '">');

        html.push('<td class="pm-name">' +

                '<div class="pm-name-txt">' + escapeHtml(row.name) + '</div>' +

                (row.isTotal ? '<div class="pm-name-sub">Grand total</div>' : '') +

                '</td>');

        model.brands.forEach(function (b) {

          var c = row.cells[b.name] || {po: 0, count: 0, billed: 0};

          var max = model.brandMax[b.name] || 0;

          var intensity = (!row.isTotal && max > 0) ? Math.min(1, c.billed / max) : 0;

          var isZero = c.billed === 0 && c.po === 0 && c.count === 0;

          var bgAlpha = intensity > 0 ? (0.10 + intensity * 0.55).toFixed(2) : 0;

          var style = (!row.isTotal && intensity > 0)

                  ? ' style="background: rgba(59,91,219,' + bgAlpha + ')"' : '';

          if (isZero) {

            html.push('<td class="pm-cell pm-cell-zero">&mdash;</td>');

          } else {

            var billedTxt = pmCompactCurrency(c.billed);

            var poTxt = c.po > 0 ? pmCompactCurrency(c.po) : '';

            var partnerTxt = c.count > 0 ? (c.count + ' <span class="pm-unit">ptr</span>') : '';

            html.push('<td class="pm-cell' + (row.isTotal ? ' pm-cell-total' : '') + '"' + style + '>' +

                    '<div class="pm-billed">' + billedTxt + '</div>' +

                    '<div class="pm-meta">' +

                    (partnerTxt ? '<span class="pm-partners">' + partnerTxt + '</span>' : '') +

                    (poTxt ? '<span class="pm-po">' + poTxt + '<span class="pm-unit"> PO</span></span>' : '') +

                    '</div>' +

                    '</td>');

          }

        });

        html.push('</tr>');

      });

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

      return html.join("");

    }

    function escapeHtml(s) {

      return String(s == null ? "" : s)

              .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")

              .replace(/"/g, """).replace(/'/g, "'");

    }