{% extends "base.html" %}
{% block content %}
<h1 style="color:#FFD700;">Executive Revenue Dashboard</h1>

<div class="cards">
  <div class="card" style="color:#FFD700;">MRR: $50,000</div>
  <div class="card" style="color:#FFD700;">ARR: $600,000</div>
  <div class="card" style="color:#00E676;">NRR: 115%</div>
  <div class="card" style="color:#00E676;">Gross Margin: 72%</div>
  <div class="card">CAC: $850</div>
  <div class="card">LTV: $6,500</div>
  <div class="card">LTV:CAC 7.6x</div>
</div>

<canvas id="mrrChart"></canvas>
<canvas id="planPie"></canvas>

<h2>Top 10 Accounts</h2>
<table class="card">
  <tr><th>Account</th><th>Plan</th><th>MRR</th><th>Usage</th><th>Health</th><th>Risk</th></tr>
  <tr><td>Sovereign Media</td><td>Enterprise</td><td>$2,000</td><td>78%</td><td>92</td><td style="color:#00E676;">Low</td></tr>
</table>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
new Chart(document.getElementById('mrrChart'), {
 type: 'line',
 data: {labels: ['Jan','Feb','Mar'], datasets: [{label: 'MRR', data: [30000,40000,50000]}]}
});
new Chart(document.getElementById('planPie'), {
 type: 'pie',
 data: {labels: ['Starter','Growth','Enterprise'], datasets: [{data:[20,40,40]}]}
});
</script>
{% endblock %}