WebSVN – SmartDukaan – Diff – //trunk/profitmandi-fofo/src/main/webapp/WEB-INF/views/ftl/rbm-drr-dashboard.vm

     .bbar .bpct.na {
       color: var(--soft);
       font-weight: 600
+    }
+    /* warehouse flow (buying vs selling) in drill-down */
+    .flow-tbl {
+      width: 100%;
+      border-collapse: separate;
+      border-spacing: 0;
+      font-size: 12.5px;
+      margin-bottom: 20px;
+      background: #fff;
+      border: 1px solid var(--line);
+      border-radius: 11px;
+      overflow: hidden
+    }
+    .flow-tbl th, .flow-tbl td {
+      padding: 10px 12px;
+      border-bottom: 1px solid var(--line2);
+      text-align: right;
+      font-variant-numeric: tabular-nums
+    }
+    .flow-tbl th {
+      font-size: 10.5px;
+      text-transform: uppercase;
+      letter-spacing: .05em;
+      color: var(--soft);
+      font-weight: 700;
+      background: #fafbfe;
+      text-align: left;
+      padding-left: 14px
+    }
+    .flow-tbl th.num, .flow-tbl td.num {
+      text-align: right
+    }
+    .flow-tbl thead th:first-child {
+      text-align: left
+    }
+    .flow-tbl tbody tr td:first-child {
+      text-align: left;
+      padding-left: 14px;
+      font-weight: 700;
+      letter-spacing: .03em;
+      text-transform: uppercase;
+      font-size: 11px
+    }
+    .flow-tbl tbody tr td:first-child i {
+      display: inline-block;
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      margin-right: 6px;
+      vertical-align: middle
+    }
+    .flow-tbl tbody tr:last-child td {
+      border-bottom: 0
+    }
+    .flow-tbl tbody tr.hid td:first-child {
+      color: var(--hid)
+    }
+    .flow-tbl tbody tr.hid td:first-child i {
+      background: var(--hid)
+    }
+    .flow-tbl tbody tr.fastmoving td:first-child {
+      color: var(--fast)
+    }
+    .flow-tbl tbody tr.fastmoving td:first-child i {
+      background: var(--fast)
+    }
+    .flow-tbl tbody tr.running td:first-child {
+      color: var(--run)
+    }
+    .flow-tbl tbody tr.running td:first-child i {
+      background: var(--run)
+    }
+    .flow-tbl tbody tr.slowmoving td:first-child {
+      color: var(--slow)
+    }
+    .flow-tbl tbody tr.slowmoving td:first-child i {
+      background: var(--slow)
+    }
+    .flow-tbl tbody tr.other td:first-child {
+      color: var(--other)
+    }
+    .flow-tbl tbody tr.other td:first-child i {
+      background: var(--other)
+    }
+    .flow-tbl .cov-cell {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      justify-content: flex-end
+    }
+    .flow-tbl .cov-cell .cov-bar {
+      width: 60px;
+      height: 6px;
+      border-radius: 3px;
+      background: #eef1f6;
+      overflow: hidden;
+      flex: none
+    }
+    .flow-tbl .cov-cell .cov-bar > i {
+      display: block;
+      height: 100%;
+      border-radius: 3px
+    }
+    .flow-tbl .cov-cell.good .cov-bar > i {
+      background: var(--good)
+    }
+    .flow-tbl .cov-cell.warn .cov-bar > i {
+      background: var(--warn)
+    }
+    .flow-tbl .cov-cell.bad .cov-bar > i {
+      background: var(--bad)
+    }
+    .flow-tbl .cov-cell.good .cov-pct {
+      color: var(--good);
+      font-weight: 700
+    }
+    .flow-tbl .cov-cell.warn .cov-pct {
+      color: var(--warn);
+      font-weight: 700
+    }
+    .flow-tbl .cov-cell.bad .cov-pct {
+      color: var(--bad);
+      font-weight: 700
+    }
+    .flow-tbl .cov-cell.na {
+      color: var(--soft);
+      font-weight: 500
+    }
+    .flow-tbl tr.tot td {
+      font-weight: 770;
+      background: #fafbfe;
+      color: var(--ink);
+      border-top: 2px solid var(--line)
+    }
     /* brand mix bars in drill-down */
     .brands {
       display: flex;
       flex-direction: column;
       gap: 8px;
     <div class="brand">
       <div class="crumb"><a href="/indent/today_po_rbm">&larr; Today PO / RBM</a> &middot; Sales &middot; Indent</div>
       <h1>RBM DRR Dashboard <span class="live"><i></i>Live</span></h1>
     </div>
     <div class="hd-right">
+      <select id="rdrrRbmFilter" class="ctl" style="min-width:220px;height:38px;padding:8px 12px">
+        <option value="">All RBMs</option>
+      </select>
       <input class="ctl" id="rdrrPeriod" type="text" placeholder="Select date range"/>
       <button class="btn-r" id="rdrrApply">Apply</button>
     </div>
   </header>
     </div>
     <div class="sectionlabel" style="margin-top:2px">Movement Split — Achievement vs Target</div>
     <div class="bbars" id="rdrrDdBars"></div>
+    <div class="sectionlabel">Warehouse Flow — Buying vs Selling <span
+            style="color:var(--soft);font-weight:600;text-transform:none;letter-spacing:0;margin-left:6px">(GRN into this warehouse + cross-warehouse direct billings)</span>
+    </div>
+    <div id="rdrrDdFlow">
+      <div class="loading">
+        <div class="spinner"></div>
+        Loading&hellip;
+      </div>
+    </div>
     <div class="sectionlabel">Brand Mix — Share of Achievement <span
             style="color:var(--soft);font-weight:600;text-transform:none;letter-spacing:0;margin-left:6px">(click a brand for movement split)</span>
     </div>
     <div id="rdrrDdBrands">
       <div class="loading">
+    }
     // Cached latest payload so the "Target Status by RBM" modal can render
     // without a re-fetch when the KPI card is clicked.
     var LAST_PAYLOAD = null;
+    var CURRENT_FILTER_AUTH_ID = "";  // "" = all RBMs
     function render(data) {
       LAST_PAYLOAD = data;
-      var rows = data.rows || [];
+      populateRbmFilter(data.rows || []);
+      renderFiltered();
+    }
+    // Build the dropdown options from the fetched rows (unique RBM names).
+    // Preserves current selection if the RBM still exists in the new dataset.
+    function populateRbmFilter(rows) {
+      var seen = {};
+      var options = [];
+      rows.forEach(function (r) {
+        if (!seen[r.authId]) {
+          seen[r.authId] = true;
+          options.push({id: r.authId, name: r.rbmName});
+        }
+      });
+      options.sort(function (a, b) {
+        return (a.name || "").localeCompare(b.name || "");
+      });
+      var sel = $("#rdrrRbmFilter");
-      var t = data.totals || {};
+      var prev = sel.val() || "";
+      var html = '<option value="">All RBMs (' + options.length + ')</option>';
+      options.forEach(function (o) {
+        html += '<option value="' + o.id + '">' + escapeHtml(o.name || "Unknown") + '</option>';
+      });
+      sel.html(html);
+      // Restore prior selection if still valid; otherwise reset.
+      if (prev && seen[prev]) sel.val(prev); else CURRENT_FILTER_AUTH_ID = "";
+    }
+    // Renders KPIs + grid from LAST_PAYLOAD filtered by CURRENT_FILTER_AUTH_ID.
+    function renderFiltered() {
+      if (!LAST_PAYLOAD) return;
+      var allRows = LAST_PAYLOAD.rows || [];
+      var rows = CURRENT_FILTER_AUTH_ID
+              ? allRows.filter(function (r) {
+                return String(r.authId) === String(CURRENT_FILTER_AUTH_ID);
+              })
+              : allRows;
+      // Recompute totals from the filtered subset. Cheaper + correct vs using server totals.
+      var t = {
+        totalAch: 0, totalTgt: 0, hidAch: 0, hidTgt: 0, fastAch: 0, fastTgt: 0,
+        runAch: 0, runTgt: 0, slowAch: 0, slowTgt: 0, otherAch: 0, otherTgt: 0,
+        rbmsAtOrAbove100: 0, rbmRowCount: rows.length
+      };
+      rows.forEach(function (r) {
+        t.totalAch += Number(r.totalAch) || 0;
+        t.totalTgt += Number(r.totalTgt) || 0;
+        t.hidAch += Number(r.hidAch) || 0;
+        t.hidTgt += Number(r.hidTgt) || 0;
+        t.fastAch += Number(r.fastAch) || 0;
+        t.fastTgt += Number(r.fastTgt) || 0;
+        t.runAch += Number(r.runAch) || 0;
+        t.runTgt += Number(r.runTgt) || 0;
+        t.slowAch += Number(r.slowAch) || 0;
+        t.slowTgt += Number(r.slowTgt) || 0;
+        t.otherAch += Number(r.otherAch) || 0;
+        t.otherTgt += Number(r.otherTgt) || 0;
+        if (r.totalTgt > 0 && r.totalAch >= r.totalTgt) t.rbmsAtOrAbove100++;
+      });
       $("#rdrrKpiAch").html('&#8377;&nbsp;' + fmtLakh(t.totalAch));
       $("#rdrrKpiTgt").html('&#8377;&nbsp;' + fmtLakh(t.totalTgt));
       var pk = pctLabel(t.totalAch, t.totalTgt);
       $("#rdrrKpiPct").html(pk.cls === "na" ? '<span class="u">n/a</span>' :
               '<span class="pct ' + pk.cls + '">' + pk.text + '</span>');
       $("#rdrrKpiTop").html((t.rbmsAtOrAbove100 || 0) + ' <span class="u">/ ' + (t.rbmRowCount || 0) + '</span>');
       if (rows.length === 0) {
-        $("#rdrrTableWrap").html('<div class="empty"><div class="ei">📭</div>No RBM rows in this range.</div>');
+        $("#rdrrTableWrap").html('<div class="empty"><div class="ei">📭</div>' +
+                (CURRENT_FILTER_AUTH_ID ? 'This RBM has no rows in the current range.' : 'No RBM rows in this range.') +
+                '</div>');
         return;
+      }
       var buckets = [
         {key: "hid", label: "HID"},
         $("#rdrrDdAch").text("—");
         $("#rdrrDdTgt").text("—");
         $("#rdrrDdPct").text("—");
+      }
       $("#rdrrDdBrands").html('<div class="loading"><div class="spinner"></div>Loading brand mix&hellip;</div>');
+      $("#rdrrDdFlow").html('<div class="loading"><div class="spinner"></div>Loading&hellip;</div>');
       fetch("/rbm-drr/rbm-detail?authId=" + authId + "&warehouseId=" + warehouseId +
               "&startDate=" + startDate + "&endDate=" + endDate, {credentials: "same-origin"})
               .then(function (r) {
                 return r.json();
               })
               .then(function (data) {
                 renderBrands(data);
+                renderWarehouseFlow(data, cachedRow);
               })
               .catch(function (e) {
-                $("#rdrrDdBrands").html('<div class="empty">Failed to load: ' + (e && e.message ? e.message : "network error") + '</div>');
+                var msg = '<div class="empty">Failed to load: ' + (e && e.message ? e.message : "network error") + '</div>';
+                $("#rdrrDdBrands").html(msg);
+                $("#rdrrDdFlow").html(msg);
               });
+    }
+    function renderWarehouseFlow(data, row) {
+      var buying = (data && data.buying) || [];
+      // Map buying values by status for O(1) lookup.
+      var buyMap = {};
+      buying.forEach(function (b) {
+        buyMap[b.status] = Number(b.value) || 0;
+      });
+      var labels = {HID: "HID", FASTMOVING: "FAST", RUNNING: "RUN", SLOWMOVING: "SLOW", OTHER: "OTHER"};
+      var order = ["HID", "FASTMOVING", "RUNNING", "SLOWMOVING", "OTHER"];
+      // Selling per bucket from the cached grid row (already has ACH per bucket).
+      var sellMap = {
+        HID: row ? Number(row.hidAch) || 0 : 0,
+        FASTMOVING: row ? Number(row.fastAch) || 0 : 0,
+        RUNNING: row ? Number(row.runAch) || 0 : 0,
+        SLOWMOVING: row ? Number(row.slowAch) || 0 : 0,
+        OTHER: row ? Number(row.otherAch) || 0 : 0
+      };
+      var totBuy = 0, totSell = 0;
+      order.forEach(function (s) {
+        totBuy += buyMap[s] || 0;
+        totSell += sellMap[s] || 0;
+      });
+      // "Coverage" = selling / buying. High coverage = we sold most of what came in.
+      // Low coverage = supply piling up (aging risk).
+      function covCell(sell, buy) {
+        if (!buy || buy <= 0) {
+          if (sell > 0) return '<span class="cov-cell na" title="No buying recorded in this range">— <span class="cov-pct" style="color:var(--good)">sold ' + fmtLakh(sell) + '</span></span>';
+          return '<span class="cov-cell na">—</span>';
+        }
+        var pct = (sell / buy) * 100;
+        var cls = pct >= 60 ? 'good' : pct >= 25 ? 'warn' : 'bad';
+        var w = Math.min(100, pct);
+        return '<span class="cov-cell ' + cls + '">' +
+                '<span class="cov-bar"><i style="width:' + w.toFixed(1) + '%"></i></span>' +
+                '<span class="cov-pct">' + pct.toFixed(1) + '%</span></span>';
+      }
+      var html = '<table class="flow-tbl"><thead><tr>' +
+              '<th>Movement</th><th class="num">Buying</th><th class="num">Selling</th><th class="num">Coverage (sold / bought)</th>' +
+              '</tr></thead><tbody>';
+      order.forEach(function (s) {
+        var buy = buyMap[s] || 0, sell = sellMap[s] || 0;
+        html += '<tr class="' + s.toLowerCase() + '">' +
+                '<td><i></i>' + labels[s] + '</td>' +
+                '<td class="num">' + fmtLakh(buy) + '</td>' +
+                '<td class="num">' + fmtLakh(sell) + '</td>' +
+                '<td class="num">' + covCell(sell, buy) + '</td>' +
+                '</tr>';
+      });
+      html += '<tr class="tot">' +
+              '<td>Total</td>' +
+              '<td class="num">' + fmtLakh(totBuy) + '</td>' +
+              '<td class="num">' + fmtLakh(totSell) + '</td>' +
+              '<td class="num">' + covCell(totSell, totBuy) + '</td>' +
+              '</tr>';
+      html += '</tbody></table>';
+      $("#rdrrDdFlow").html(html);
+    }
     function renderBrands(data) {
       var brands = (data && data.brands) || [];
       if (brands.length === 0) {
         $("#rdrrDdBrands").html('<div class="empty"><div class="ei">🏷️</div>No brand sales in this range.</div>');
         return;
       if (e.target === this) $(this).removeClass("show");
     });
     function openStatusModal() {
       if (!LAST_PAYLOAD) return;
+      // Respect the RBM filter so the modal matches what's on screen.
-      var rows = (LAST_PAYLOAD.rows || []).slice();
+      var rows = (LAST_PAYLOAD.rows || []).filter(function (r) {
+        return !CURRENT_FILTER_AUTH_ID || String(r.authId) === String(CURRENT_FILTER_AUTH_ID);
+      });
       var achieved = [], pending = [];
       rows.forEach(function (r) {
         if (!r.totalTgt || r.totalTgt <= 0) return;
         var pct = (r.totalAch / r.totalTgt) * 100;
         var enriched = {row: r, pct: pct};
     });
     $("#rdrrCallDrawerBack").on("click", function (e) {
       if (e.target === this) $(this).removeClass("show");
     });
+    // RBM filter — re-render KPIs + grid from the cached payload (no re-fetch).
+    $("#rdrrRbmFilter").on("change", function () {
+      CURRENT_FILTER_AUTH_ID = $(this).val() || "";
+      renderFiltered();
+    });
     // initial load
     load();
     loadPurchaseMilestones();
     loadPerformanceDashboard();
     loadCallTargetIframe();

Subversion Repositories SmartDukaan

(root)//trunk/profitmandi-fofo/src/main/webapp/WEB-INF/views/ftl/rbm-drr-dashboard.vm – Rev 37469 → 37487