The Profitability Console is a single-page HTML dashboard built for MSP leadership and account managers who need to answer one core question at a glance: which clients are making money and which ones are eroding it?

It renders per-client gross margins, effective hourly rates, cost breakdowns, upsell opportunities, and trend data from a unified data layer. In demo mode, all data is generated client-side and auto-simulated every 5 seconds. In production, data flows from ConnectWise PSA (ticket volume, labor hours, cost categories) and QuickBooks (vendor costs, billing actuals).

The dashboard is a single scrolling page with four logical zones navigated via the sticky topbar and the right-side dot navigation. There are no tabs — all content is always rendered.

The KPI strip is a horizontal row of seven tiles rendered by renderKPIs(). It re-renders every 5 seconds as part of the live simulation. Each tile has a color-coded top accent bar, a headline value, a delta indicator, and a mini sparkline generated from random bar heights.

Each client is rendered as a card in a responsive auto-fill grid with a minimum column width of 300px. Cards are color-coded by margin tier, show six metrics at a glance, include a margin progress bar, and surface the first upsell flag if one exists.

Margin Tier System

Card Metrics

Margin Bar

The thin bar at the bottom of each card is a visual representation of client.margin as a percentage width. It uses the same green/yellow/red color as the margin tier. At 100% margin the bar would be full-width; at 20% it is narrow. This gives an instant visual density read across the grid without reading numbers.

Upsell Flag Preview

If a client has one or more upsell opportunities, a yellow banner shows the count and the first flag title truncated at the dash character. If none exist, a muted "No upsell flags" line appears instead. Clicking the card opens the full upsell list in the Deep Dive panel.

Clicking any client card triggers toggleDeepDive(id), which renders a full-width panel directly below the client grid (#deepDive). Clicking the same card again, or the × button, calls hideDeepDive(). Only one deep dive can be open at a time — opening a second one closes the first.

Deep Dive Components

The Insights section renders five Chart.js charts in a 2-column grid via renderInsightCharts(), called once on page load. These charts use portfolio-level demo data — they do not re-render on the 5-second simulation tick or respond to the filter bar.

Chart Configuration

All Chart.js instances share three helper functions that enforce the design system:

All chart instances are stored in the chartInstances object keyed by canvas ID. Deep-dive charts use this same store and are destroyed on panel close. The portfolio-level insight charts are never destroyed — they persist for the page lifetime.

The Erosion Alerts section is a static feed rendered once by renderAlerts() at page load. The alertsData array is hardcoded — alerts do not update during the live simulation. In production, replace the array with API calls to your PSA's cost variance reports and billing anomaly endpoints.

Alert Data Shape

{
  client: 'Zeta Health',
  msg:    'Support hours +38% MoM — EHR dropped from $142 to $98.',
  sev:    'high',   // 'high' | 'med' | 'low'
  meta:   'Detected via PSA ticket volume · 2h ago'
}

The meta field is intended to communicate where the alert came from — PSA ticket analysis, QuickBooks cost sync, vendor billing API, or trend analysis. In production this field should be populated programmatically with the detection source and timestamp.

The filter bar sits between the KPI strip and the Client Portfolio section. It controls the renderClientGrid() output in real time. All four controls share a single getFiltered() function that applies each condition sequentially.

The "Showing N clients" count is updated inside renderClientGrid() by setting document.getElementById('clientCount').textContent. This count reflects the filtered list, not the total client count.

All client data lives in a single const clients array at the top of the script block. Each object represents one managed client and carries all fields needed for every component — the grid, filters, deep dive, and aggregate charts.

{
  id:        1,
  name:      'Acme Corp',
  mrr:       8500,       // Monthly recurring revenue ($)
  costs:     3400,       // Monthly delivery costs ($)
  margin:    60,         // Gross margin % — (mrr-costs)/mrr * 100
  delta:     2,          // Margin change MoM (%). Mutated by simulation.
  ehr:       185,        // Effective hourly rate ($/hr). Mutated by simulation.
  tier:      'enterprise',// 'enterprise' | 'mid-market' | 'smb'
  service:   'security', // Primary service: 'security'|'backup'|'breakfix'|'hardware'
  color:     'green',    // Margin tier: 'green'|'yellow'|'red'

  upsells: [            // Array of upsell opportunity objects (can be empty)
    {
      title:  'EDR Gap — 42 unprotected endpoints',
      detail: 'Potential MRR uplift: +$4,200/mo · CrowdStrike Falcon Go'
    }
  ],

  breakdown: {           // Service contribution % for doughnut chart (must sum to 100)
    security: 62,
    backup:   18,
    support:  12,
    other:    8          // OR 'hardware' for hardware-primary clients
  }
}

Alert Data

Alerts live in a separate const alertsData array. They reference clients by name string (not by ID) — this is a loose coupling that is fine for demo purposes but should be tightened to use client ID in production to avoid name-change mismatches.

The dashboard is wired for two primary integrations. The topbar labels them: PSA + Billing API. In the demo, both are replaced by the static clients and alertsData arrays.

Replacing Demo Data with Live Feeds

1. 01
   Fetch CW time entries per client. Query /time/entries?conditions=dateEntered>=[period_start], group by company, sum hours, multiply by internal rate to get labor cost. This replaces the hardcoded costs field (currently costs = ~44% of MRR).
2. 02
   Pull MRR from QuickBooks invoices. Query all recurring invoices in the billing period, group by customer reference. This replaces the hardcoded mrr field.
3. 03
   Compute margin server-side. Calculate margin = Math.round((mrr - costs) / mrr * 100) and assign color programmatically. Never trust a hardcoded color field in production.
4. 04
   Derive EHR from CW time entries. EHR = mrr / totalHoursThisPeriod. If using a monthly period, normalize to hours worked per month not hours billed.
5. 05
   Generate upsell flags from coverage gaps. Query CW configuration items and asset inventory to identify clients missing EDR, SIEM, backup tiers, or M365 licensing. Construct the upsell objects programmatically and inject into each client record.
6. 06
   Generate alerts from anomaly detection. Compare current-period EHR, margin, and ticket type ratios against trailing averages. Flag where delta exceeds defined thresholds and build the alertsData array dynamically.

The dashboard simulates live data movement using a setInterval that fires every 5,000ms. This is purely cosmetic for demo environments — it shows stakeholders that the dashboard would feel alive with real API data.

setInterval(() => {
  clients.forEach(c => {
    // Random walk delta: ±1 with 60% probability of moving
    c.delta = Math.max(-15, Math.min(10,
      c.delta + (Math.random() > .6 ? 1 : -1)
    ));
    // Random walk EHR: ±1, clamped $80–$230
    c.ehr = Math.max(80, Math.min(230,
      c.ehr + (Math.random() > .5 ? 1 : -1)
    ));
  });
  renderKPIs();    // Re-renders KPI strip + sparklines
  applyFilters(); // Re-renders client grid with current filters
}, 5000);

Note that applyFilters() calls renderClientGrid(getFiltered()) — so the simulation respects whatever filters are currently active. The insight charts and alert feed are not re-rendered by the simulation tick.

Go-Live Checklist

1. 01
   Remove the live simulation interval. Delete the entire setInterval() block at the bottom of the script. Replace with a refreshData() function that re-fetches from your APIs on a sensible polling cadence (5–15 minutes for financial data).
2. 02
   Replace the clients array with an API fetch. Build a data pipeline that queries CW and QuickBooks, normalizes the results into the client object shape documented in Section 09, and populates the array on load.
3. 03
   Derive margin and color programmatically. Never hardcode the margin or color fields. Compute them from live MRR and costs at fetch time.
4. 04
   Replace hardcoded KPI deltas. The +3.2% MoM and similar strings in renderKPIs() need to be computed from period-over-period comparisons. At minimum, pull the previous period's total MRR and compute the real delta.
5. 05
   Address the Chart.js CDN dependency. If this dashboard will be served in an environment without reliable internet access, host Chart.js locally or bundle it. The file currently loads from cdnjs.cloudflare.com — if that request fails, the entire Insights section and all deep-dive charts will be blank.
6. 06
   Update nav.js path. The file references <script src="../nav.js" defer></script>. Ensure this resolves correctly relative to where the file is deployed in your folder structure, or replace with an absolute path.
7. 07
   Verify Chart.js canvas sizing at target resolutions. The insight charts use height: 200px or height: 240px on their wrapper divs. Test at your target screen resolution — the full-width EHR bar chart may need a taller wrapper at high client counts.
8. 08
   Review mobile breakpoint. Below 900px, the grid collapses to single column, the side navigation dots are hidden, and section padding reduces. Test on the devices your team uses for in-meeting presentations.

Adding a New Client

Push a new object to the clients array matching the full shape in Section 09. The client card grid, all filters, the margin distribution chart, and the EHR by client chart will all pick it up automatically on next render. No HTML changes required.

Adding a New KPI Tile

Add a new object to the kpis array inside renderKPIs(). Each tile takes four fields: label, value, delta, and cls (one of c-green, c-yellow, c-red, c-blue). The flexbox strip will wrap automatically — for clean grid alignment, keep the total count a multiple of 3 or 4.

Adding a New Insight Chart

1. 01
   Add an .insight-card div inside #s-insights .insights-grid with a canvas element and a unique ID. Use .insight-card.full for a full-width chart.
2. 02
   Add the Chart.js instantiation inside renderInsightCharts(), storing the instance as chartInstances['yourChartId'].
3. 03
   Use ...chartDefaults() spread, ...yAxis(), and ...xAxis() for design system consistency.

Adding a New Upsell Flag Type

Add a new object to a client's upsells array. The deep dive panel renders all upsells for the selected client — there is no maximum count, though more than 4–5 will require scrolling in the panel. The card preview only ever shows the first flag's title (truncated at the dash).

Adding a New Service Type to Filters

Add a new <option value="myservice"> to the #serviceFilter select. Set the matching client.service string on the relevant client objects. No JavaScript changes needed — getFiltered() does an exact string match against the select value.