Subversion Repositories SmartDukaan

/* ============================================================================

   LMS dashboards front-end — shared behaviour for Command Center + Dashboards.

   - menu click handlers load the page fragments into #main-content

   - window.LmsDash exposes render/refresh/drill helpers the .vm fragments call

   - charts use the app's existing Chart.js global (Chart1); heat-map / tiles / SLA

     bars are CSS (see lms-dashboard.css). Drill-downs open a right-side drawer.

   Backed by /lms/dashboard/* JSON endpoints (LmsDashboardController).

   ============================================================================ */

(function () {

    'use strict';

    function ctx() { return (typeof context !== 'undefined' && context) ? context : ''; }

    function api(path) { return ctx() + path; }

    // responseSender.ok(...) wraps the payload under `.response`.

    function unwrap(r) {

        var o = (typeof r === 'string') ? JSON.parse(r) : r;

        return (o && o.response !== undefined) ? o.response : o;

    }

    function esc(s) {

        if (s === null || s === undefined) return '';

        return ('' + s).replace(/[&<>"]/g, function (c) {

            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c];

        });

    }

    function fmtInt(n) {

        if (n === null || n === undefined) return '0';

        return ('' + n).replace(/\B(?=(\d{3})+(?!\d))/g, ',');

    }

    function fmtInr(v) {

        if (v === null || v === undefined || v === '' || isNaN(v)) return '—';

        v = Number(v);

        if (v >= 10000000) return '₹' + (v / 10000000).toFixed(1) + ' Cr';

        if (v >= 100000) return '₹' + (v / 100000).toFixed(1) + ' L';

        if (v >= 1000) return '₹' + Math.round(v / 1000) + 'K';

        return '₹' + Math.round(v);

    }

    function pctClass(p) { return p >= 70 ? 'pct-good' : (p >= 45 ? 'pct-warn' : 'pct-bad'); }

    function slaFill(state) {

        switch (state) {

            case 'MET': return { w: 100, c: '#2f9e44' };

            case 'RUNNING': return { w: 55, c: '#1f2a5e' };

            case 'AT_RISK': return { w: 85, c: '#f08c00' };

            case 'BREACHED': return { w: 100, c: '#e03131' };

            default: return { w: 0, c: '#c9d0dd' };

        }

    }

    function toast(msg) {

        if (typeof showToast === 'function') { showToast(msg); return; }

        alert(msg);

    }

    // ---- drill-down drawer (one shared instance) -------------------------------

    function ensureDrawer() {

        if (document.getElementById('lmsDashDrawer')) return;

        var ov = document.createElement('div');

        ov.className = 'lms-dash-ov';

        ov.id = 'lmsDashOverlay';

        var dr = document.createElement('div');

        dr.className = 'lms-dash-drawer';

        dr.id = 'lmsDashDrawer';

        dr.innerHTML =

            '<div class="d-head" style="position:relative;">' +

            '  <button class="d-close" id="lmsDashDrawerClose">&times;</button>' +

            '  <div class="d-crumb" id="lmsDashDrawerCrumb"></div>' +

            '  <div class="d-title" id="lmsDashDrawerTitle"></div>' +

            '  <div class="d-sub" id="lmsDashDrawerSub"></div>' +

            '</div>' +

            '<div class="d-body" id="lmsDashDrawerBody"></div>';

        document.body.appendChild(ov);

        document.body.appendChild(dr);

        ov.addEventListener('click', closeDrawer);

        document.getElementById('lmsDashDrawerClose').addEventListener('click', closeDrawer);

        document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeDrawer(); });

    }

    function openDrawer(crumb, title, sub, bodyHtml) {

        ensureDrawer();

        document.getElementById('lmsDashDrawerCrumb').textContent = crumb || '';

        document.getElementById('lmsDashDrawerTitle').textContent = title || '';

        document.getElementById('lmsDashDrawerSub').textContent = sub || '';

        document.getElementById('lmsDashDrawerBody').innerHTML = bodyHtml || '';

        document.getElementById('lmsDashOverlay').classList.add('open');

        document.getElementById('lmsDashDrawer').classList.add('open');

    }

    function closeDrawer() {

        var ov = document.getElementById('lmsDashOverlay');

        var dr = document.getElementById('lmsDashDrawer');

        if (ov) ov.classList.remove('open');

        if (dr) dr.classList.remove('open');

    }

    function leadRows(leads) {

        if (!leads || !leads.length) return '<div class="d-empty">No leads in this bucket.</div>';

        var h = '<table class="lms-tbl"><thead><tr>' +

            '<th>LMS ID</th><th>Business / Retailer</th><th>Stage</th><th>Owner</th><th>SLA</th><th>Value</th>' +

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

        leads.forEach(function (l) {

            var f = slaFill(l.slaState);

            h += '<tr class="row-click" data-leadid="' + l.id + '">' +

                '<td><span class="idpill">' + esc(l.lmsCode) + '</span></td>' +

                '<td>' + esc(l.name || '—') + (l.outlet ? ' <span style="color:#97a1b5">· ' + esc(l.outlet) + '</span>' : '') + '</td>' +

                '<td>' + stagePill(l.stage, l.stageLabel) + '</td>' +

                '<td>' + esc(l.owner) + '</td>' +

                '<td><span class="sla-wrap"><span class="slabar"><i style="width:' + f.w + '%;background:' + f.c + '"></i></span>' +

                '<span class="sla-clock sla-' + esc(l.slaState) + '">' + esc(l.slaState || 'NA') + '</span></span></td>' +

                '<td>' + fmtInr(l.value) + '</td>' +

                '</tr>';

        });

        h += '</tbody></table>';

        return h;

    }

    function stagePill(stage, label) {

        if (!stage) return '<span class="stage st-NEW">—</span>';

        return '<span class="stage st-' + esc(stage) + '">' + esc(label || stage) + '</span>';

    }

    // Fetch a bucket's leads and open the drawer.

    function drill(crumb, title, sub, bucketType, bucketKey) {

        var q = '?bucketType=' + encodeURIComponent(bucketType) +

            (bucketKey ? '&bucketKey=' + encodeURIComponent(bucketKey) : '') +

            filterQS('&');

        openDrawer(crumb, title, 'Loading…', '<div class="d-empty">Loading…</div>');

        doGetAjaxRequestHandler(api('/lms/dashboard/leads' + q), function (resp) {

            var data = unwrap(resp);

            var leads = (data && data.leads) ? data.leads : [];

            openDrawer(crumb, title, (sub || '') + ' · ' + leads.length + ' lead(s)', leadRows(leads));

        });

    }

    // ---- shared filter state ----------------------------------------------------

    var STATE = { regionId: '', from: '', to: '' };

    function readFilters() {

        var reg = document.getElementById('lmsFilterRegion');

        var fr = document.getElementById('lmsFilterFrom');

        var to = document.getElementById('lmsFilterTo');

        if (reg) STATE.regionId = reg.value || '';

        if (fr) STATE.from = fr.value || '';

        if (to) STATE.to = to.value || '';

    }

    function filterQS(sep) {

        var q = '';

        if (STATE.regionId) q += (sep || '?') + 'regionId=' + encodeURIComponent(STATE.regionId);

        if (STATE.from) q += (q ? '&' : (sep || '?')) + 'from=' + encodeURIComponent(STATE.from);

        if (STATE.to) q += (q ? '&' : (sep || '?')) + 'to=' + encodeURIComponent(STATE.to);

        return q;

    }

    // ---- charts (Chart1 = legacy Chart.js global) ------------------------------

    var CHARTS = {};

    function destroyChart(id) {

        if (CHARTS[id]) { try { CHARTS[id].destroy(); } catch (e) { } delete CHARTS[id]; }

    }

    function barChart(canvasId, labels, values, colors, horizontal, onIndexClick) {

        var cv = document.getElementById(canvasId);

        if (!cv || typeof Chart1 === 'undefined') return;

        destroyChart(canvasId);

        var chart = new Chart1(cv.getContext('2d'), {

            type: horizontal ? 'horizontalBar' : 'bar',

            data: { labels: labels, datasets: [{ data: values, backgroundColor: colors, borderWidth: 0, barPercentage: 0.72 }] },

            options: {

                responsive: true, maintainAspectRatio: false,

                legend: { display: false },

                tooltips: { enabled: true },

                scales: {

                    xAxes: [{ ticks: { beginAtZero: true, precision: 0, fontColor: '#97a1b5' }, gridLines: { color: '#eef1f6' } }],

                    yAxes: [{ ticks: { fontColor: '#69748c' }, gridLines: { color: '#eef1f6' } }]

                }

            }

        });

        CHARTS[canvasId] = chart;

        if (onIndexClick) {

            cv.onclick = function (evt) {

                var pts = chart.getElementsAtEvent(evt);

                if (pts && pts.length) onIndexClick(pts[0]._index);

            };

        }

        return chart;

    }

    // ======================= COMMAND CENTER ==================================

    function renderSummary(data) {

        // KPI tiles

        var kh = '';

        (data.kpis || []).forEach(function (k) {

            kh += '<div class="lms-kpi tone-' + esc(k.tone) + '" data-kpikey="' + esc(k.key) + '">' +

                '<div class="k-label">' + esc(k.label) + '</div>' +

                '<div class="k-value">' + fmtInt(k.value) + '</div>' +

                '<div class="k-foot">' + esc(k.foot) + '</div></div>';

        });

        setHtml('lmsKpis', kh);

        // Funnel — Chart1 horizontal bar + clickable

        var f = data.funnel || [];

        var labels = f.map(function (s) { return s.label; });

        var vals = f.map(function (s) { return s.count; });

        var cols = f.map(function () { return '#3b5bdb'; });

        barChart('lmsFunnelChart', labels, vals, cols, true, function (i) {

            var step = f[i];

            drill('Lifecycle funnel', step.label, 'Reached ' + step.label + ' (' + step.pct + '%)',

                step.stage === 'ALL' ? 'ALL' : 'STAGE', step.stage === 'ALL' ? '' : step.stage);

        });

        // Attention queue

        var ah = '';

        (data.attention || []).forEach(function (a) {

            ah += '<div class="att tone-' + esc(a.tone) + '" data-attkey="' + esc(a.key) + '" data-atttitle="' + esc(a.title) + '">' +

                '<span class="a-dot"></span>' +

                '<span class="a-body"><span class="a-title">' + esc(a.title) + '</span><br>' +

                '<span class="a-detail">' + esc(a.detail) + '</span></span>' +

                '<span class="a-count">' + fmtInt(a.count) + '</span></div>';

        });

        setHtml('lmsAttention', ah);

    }

    function loadPipeline() {

        var box = document.getElementById('lmsPipeline');

        if (!box) return;

        box.innerHTML = '<div class="lms-ph">Loading pipeline…</div>';

        doGetAjaxRequestHandler(api('/lms/dashboard/leads?bucketType=ALL' + filterQS('&')), function (resp) {

            var data = unwrap(resp);

            var leads = (data && data.leads) ? data.leads : [];

            box.innerHTML = leadRows(leads);

        });

    }

    function refreshCommandCenter() {

        readFilters();

        doGetAjaxRequestHandler(api('/lms/dashboard/summary' + filterQS('?')), function (resp) {

            renderSummary(unwrap(resp));

        });

        loadPipeline();

    }

    function kpiBucket(key) {

        switch (key) {

            case 'new': return { t: 'STAGE', k: 'NEW' };

            case 'awaiting': return { t: 'STAGE', k: 'ASSIGNED' };

            case 'sla': return { t: 'ATTENTION', k: 'BREACHED_NO_CONTACT' };

            case 'contacted': return { t: 'STAGE', k: 'CONTACTED' };

            case 'qualified': return { t: 'STAGE', k: 'QUALIFIED' };

            case 'onboarded': return { t: 'STAGE', k: 'ONBOARDED' };

            default: return { t: 'ALL', k: '' };

        }

    }

    // ======================= DASHBOARDS ======================================

    function renderStateFunnel(data) {

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

        var h = '<table class="lms-tbl"><thead><tr>' +

            '<th>Region</th><th>Leads</th><th>Contacted</th><th>Qualified</th><th>Visited</th><th>Onboarded</th><th>Conv%</th><th>SLA%</th>' +

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

        rows.forEach(function (r) {

            var rc = r.convPct < 20 ? 'row-bad' : (r.slaPct < 60 ? 'row-warn' : '');

            h += '<tr class="row-click ' + rc + '" data-region="' + esc(r.regionCode) + '" data-regionname="' + esc(r.regionName) + '">' +

                '<td><b>' + esc(r.regionName) + '</b> <span class="idpill">' + esc(r.regionCode) + '</span></td>' +

                '<td>' + fmtInt(r.newCount) + '</td>' +

                '<td>' + fmtInt(r.contacted) + '</td>' +

                '<td>' + fmtInt(r.qualified) + '</td>' +

                '<td>' + fmtInt(r.visited) + '</td>' +

                '<td>' + fmtInt(r.onboarded) + '</td>' +

                '<td><span class="pctchip ' + pctClass(r.convPct) + '">' + r.convPct + '%</span></td>' +

                '<td><span class="pctchip ' + pctClass(r.slaPct) + '">' + r.slaPct + '%</span></td>' +

                '</tr>';

        });

        h += '</tbody></table>';

        setHtml('lmsStateFunnel', h);

        // Conversion-by-region Chart1 bar.

        barChart('lmsConvChart',

            rows.map(function (r) { return r.regionCode; }),

            rows.map(function (r) { return r.convPct; }),

            rows.map(function (r) { return r.convPct < 20 ? '#e03131' : (r.convPct < 40 ? '#f59f00' : '#2f9e44'); }),

            false,

            function (i) {

                var r = rows[i];

                drill('State funnel', r.regionName, 'Region ' + r.regionCode, 'REGION', r.regionCode);

            });

        // Dashboards KPIs derived from summary + state + ageing (set by initDashboards).

        buildDashKpis(rows);

    }

    var DASH = { summary: null, ageing: null };

    function buildDashKpis(stateRows) {

        if (!DASH.summary) return;

        var s = DASH.summary;

        var contacted = 0;

        (s.funnel || []).forEach(function (f) { if (f.stage === 'CONTACTED') contacted = f.count; });

        // Weighted SLA% across regions.

        var totLeads = 0, slaAcc = 0;

        (stateRows || []).forEach(function (r) { totLeads += r.newCount; slaAcc += r.slaPct * r.newCount; });

        var slaPct = totLeads > 0 ? Math.round(slaAcc / totLeads) : 0;

        var days = 90;

        var kpis = [

            { label: 'LMS created', value: fmtInt(s.total), foot: 'in period', tone: 'navy' },

            { label: 'Conversion', value: s.conversionPct + '%', foot: 'onboarded / created', tone: 'good' },

            { label: 'SLA compliance', value: slaPct + '%', foot: 'first contact in SLA', tone: slaPct < 60 ? 'red' : 'navy' },

            { label: 'Calls/day (BGC)', value: fmtInt(Math.round(contacted / days)), foot: 'proxy · contacted ÷ days', tone: 'amber' },

            { label: 'Ageing > 7 days', value: DASH.ageing ? fmtInt(DASH.ageing.total) : '—', foot: 'stuck open leads', tone: 'red' },

            { label: 'Onboarded value', value: fmtInr(s.onboardedValue), foot: 'sum of potential', tone: 'good' }

        ];

        var kh = '';

        kpis.forEach(function (k) {

            kh += '<div class="lms-kpi tone-' + k.tone + '">' +

                '<div class="k-label">' + esc(k.label) + '</div>' +

                '<div class="k-value">' + k.value + '</div>' +

                '<div class="k-foot">' + esc(k.foot) + '</div></div>';

        });

        setHtml('lmsDashKpis', kh);

    }

    function renderHeatmap(data) {

        var weeks = (data && data.weeks) ? data.weeks : [];

        var bms = (data && data.bms) ? data.bms : [];

        if (!bms.length) { setHtml('lmsHeatmap', '<div class="lms-ph">No SLA data for the selected period.</div>'); return; }

        var h = '<table class="heat"><thead><tr><th></th>';

        weeks.forEach(function (w) { h += '<th>' + esc(w) + '</th>'; });

        h += '</tr></thead><tbody>';

        bms.forEach(function (bm) {

            h += '<tr><td class="bm">' + esc(bm.bmName) + '</td>';

            (bm.cells || []).forEach(function (c) {

                if (c.pct === null || c.pct === undefined) {

                    h += '<td class="cell empty">–</td>';

                } else {

                    h += '<td class="cell" style="background:' + heatColor(c.pct) + '">' + c.pct + '</td>';

                }

            });

            h += '</tr>';

        });

        h += '</tbody></table>';

        setHtml('lmsHeatmap', h);

    }

    function heatColor(p) {

        if (p >= 90) return '#2f9e44';

        if (p >= 75) return '#82c91e';

        if (p >= 60) return '#f59f00';

        if (p >= 40) return '#e8590c';

        return '#e03131';

    }

    function renderAgeing(data) {

        DASH.ageing = data;

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

        if (!rows.length) { setHtml('lmsAgeing', '<div class="lms-ph">No ageing leads. 🎉</div>'); return; }

        var h = '<table class="lms-tbl"><thead><tr><th>Stuck at stage</th><th>Leads &gt; ' + (data.days || 7) + 'd</th></tr></thead><tbody>';

        rows.forEach(function (r) {

            h += '<tr class="row-click" data-agestage="' + esc(r.stage) + '">' +

                '<td>' + stagePill(r.stage, r.label) + '</td>' +

                '<td><b>' + fmtInt(r.count) + '</b></td></tr>';

        });

        h += '</tbody></table>';

        setHtml('lmsAgeing', h);

    }

    function refreshDashboards() {

        readFilters();

        doGetAjaxRequestHandler(api('/lms/dashboard/summary' + filterQS('?')), function (resp) {

            DASH.summary = unwrap(resp);

            // re-run KPI build after state loads; also refresh command-style summary if present

            if (document.getElementById('lmsStateFunnel')) fetchState();

        });

        doGetAjaxRequestHandler(api('/lms/dashboard/sla-heatmap' + filterQS('?')), function (resp) { renderHeatmap(unwrap(resp)); });

        doGetAjaxRequestHandler(api('/lms/dashboard/ageing'), function (resp) { renderAgeing(unwrap(resp)); });

    }

    function fetchState() {

        doGetAjaxRequestHandler(api('/lms/dashboard/state-funnel' + filterQS('?')), function (resp) { renderStateFunnel(unwrap(resp)); });

    }

    // ---- DOM helpers ------------------------------------------------------------

    function setHtml(id, html) { var el = document.getElementById(id); if (el) el.innerHTML = html; }

    // ---- delegated clicks (drill) ----------------------------------------------

    $(document).off('click.lmsdash');

    $(document).on('click.lmsdash', '.lms-dash .lms-kpi[data-kpikey]', function () {

        var key = $(this).data('kpikey');

        var b = kpiBucket(key);

        drill('Command Center', $(this).find('.k-label').text(), 'KPI drill', b.t, b.k);

    });

    $(document).on('click.lmsdash', '.lms-dash .att[data-attkey]', function () {

        drill('Needs attention', $(this).data('atttitle'), 'Attention queue', 'ATTENTION', $(this).data('attkey'));

    });

    $(document).on('click.lmsdash', '.lms-dash table.lms-tbl tr.row-click[data-leadid]', function () {

        var id = $(this).data('leadid');

        closeDrawer();

        doGetAjaxRequestHandler(api('/leadRecord?leadId=' + id), function (r) { $('#main-content').html(r); });

    });

    $(document).on('click.lmsdash', '.lms-dash tr.row-click[data-region]', function () {

        drill('State funnel', $(this).data('regionname'), 'Region ' + $(this).data('region'), 'REGION', $(this).data('region'));

    });

    $(document).on('click.lmsdash', '.lms-dash tr.row-click[data-agestage]', function () {

        drill('Ageing', $(this).find('.stage').text(), 'Stuck leads', 'STAGE', $(this).data('agestage'));

    });

    // Filter changes.

    $(document).on('change.lmsdash', '#lmsFilterRegion, #lmsFilterFrom, #lmsFilterTo', function () {

        if (document.getElementById('lmsKpis') && document.getElementById('lmsPipeline')) {

            refreshCommandCenter();

        } else {

            refreshDashboards();

        }

    });

    // ---- public API the .vm fragments call --------------------------------------

    window.LmsDash = {

        initCommandCenter: function (cfg) {

            cfg = cfg || {};

            STATE.regionId = cfg.regionId || '';

            STATE.from = cfg.from || '';

            STATE.to = cfg.to || '';

            ensureDrawer();

            if (cfg.summary) renderSummary(cfg.summary);

            loadPipeline();

        },

        initDashboards: function (cfg) {

            cfg = cfg || {};

            STATE.regionId = cfg.regionId || '';

            STATE.from = cfg.from || '';

            STATE.to = cfg.to || '';

            ensureDrawer();

            DASH.summary = cfg.summary || null;

            DASH.ageing = cfg.ageing || null;

            if (cfg.stateFunnel) renderStateFunnel(cfg.stateFunnel);

            if (cfg.slaHeatmap) renderHeatmap(cfg.slaHeatmap);

            if (cfg.ageing) renderAgeing(cfg.ageing);

        },

        refreshCommandCenter: refreshCommandCenter,

        refreshDashboards: refreshDashboards

    };

    // ---- sidebar menu entry points ----------------------------------------------

    // The LMS console is a full standalone page (own top-bar + 6 tabs, sts-mockup UI). To keep

    // the app's left sidebar + header visible, embed it in an iframe inside #main-content

    // (style/script isolated), deep-linked to the relevant tab.

    function openLmsConsole(hash) {

        var url = api('/lms/dashboard') + (hash || '');

        $('#main-content').html(

            '<iframe title="LMS Console" src="' + url + '" ' +

            'style="width:100%;height:calc(100vh - 92px);min-height:620px;border:0;display:block"></iframe>'

        );

    }

    $(document).on('click', '.lms-command-center', function (e) {

        if (e && e.preventDefault) e.preventDefault();

        openLmsConsole('#cmd');

    });

    $(document).on('click', '.lms-dashboards', function (e) {

        if (e && e.preventDefault) e.preventDefault();

        openLmsConsole('#dash');

    });

})();