The AI Cost & Value Realization Tracker is a self-contained HTML dashboard that gives your MSP or consulting practice a single pane of glass for tracking AI tool spend, adoption rates, productivity gains, and estimated savings — all in one file with no server required.

You can be up and running in under five minutes. The file is entirely self-contained — no npm, no build step, no server.

Work through these items in order to get from sample data to production-ready reporting.

Four top-line cards give at-a-glance status. All values recalculate automatically when you edit table data or click Recalculate.

The wide card below the KPIs is your budget consumption view. It shows how far through the annual budget you are at the current monthly run rate, with forward projections.

The main chart overlays two different metrics that normally wouldn't share an axis — cost in dollars and adoption as a percentage. Three datasets are plotted simultaneously.

The SVG gauge gives instant visual feedback on whether your AI investments are generating more value than they cost. The needle and arc both animate when data changes.

The main data entry surface of the dashboard. All underlined fields are directly editable. Changes propagate to KPI cards, burn rate, gauge, and chart immediately.

Qualitative observations that numbers can't capture. This panel is intentionally low-friction — type and press Enter. Notes persist for the session and appear newest-first.

All data is stored in three JavaScript arrays near the top of the script block. Each array drives one of the three table view modes.

// CLIENT VIEW — one object per managed client
let tableData = [
  {
    name:     'Apex Manufacturing',  // Display name
    tool:     'copilot',             // 'copilot' | 'openai' | 'other'
    seats:    25,                    // Total licensed seats
    monthly:  875,                   // Monthly spend in USD
    active:   72,                    // Active user % (0–100)
    prodGain: 18,                    // Reported productivity gain %
    savings:  2100,                  // Estimated monthly savings USD
  },
  // ... more rows
];

The dashboard is designed so that replacing static data with live API calls requires changes in exactly one place — the data arrays — with no other UI modifications needed.

async function init() {
  updatePeriod();

  // Replace this block with your real endpoint
  const res = await fetch('https://your-api/ai-costs');
  const json = await res.json();

  // Map API response to the expected schema
  tableData = json.clients.map(c => ({
    name:     c.clientName,
    tool:     c.primaryTool,       // normalize to 'copilot'|'openai'|'other'
    seats:    c.licensedSeats,
    monthly:  c.monthlySpendUsd,
    active:   c.adoptionPct,
    prodGain: c.productivityGainPct ?? 0,
    savings:  c.estimatedSavingsUsd ?? 0,
  }));

  renderTable();
  renderNotes();
  buildChart();
  recalcAll();
}

// Replace getChartData() with your real time-series
async function loadChartHistory(months) {
  const res = await fetch(`/api/ai-costs/monthly?months=${months}`);
  const history = await res.json(); // [{month:'Jan 25', cost:3200, active:58}, ...]

  const labels   = history.map(h => h.month);
  const costData = history.map(h => h.cost);
  const userPct  = history.map(h => h.active);
  const projData = [...new Array(history.length).fill(null),
                   costData.at(-1) * 1.04,
                   costData.at(-1) * 1.08];

  return { labels, costData, userPct, projData };
}

All calculations performed in recalcAll(). These are equivalent to Power BI DAX measures if you replicate this logic there.

The Export CSV button downloads the currently active view (Client, Dept, or Tool) as a flat CSV file. Columns match the seven fields in the data schema.

Name,Tool,Seats,Monthly $,Active %,Prod Gain %,Est Savings $
Apex Manufacturing,copilot,25,875,72,18,2100
Ridgeline Legal,copilot,12,420,58,12,840
...