{% extends "dashboard/base.html" %}
{% block title %}Dashboard - Command Center{% endblock %}
{% block content %}
<!-- Clickable Card Styles & Handler -->
<style>
.card-link {
text-decoration: none;
color: inherit;
display: block;
}
.card-link:hover .kpi-card,
.card-link:hover .card {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-color: var(--brand-500);
}
.kpi-card, .card {
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card-clickable {
cursor: pointer;
position: relative;
}
.card-clickable:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-color: var(--brand-500);
}
.card-clickable a,
.card-clickable button {
position: relative;
z-index: 1;
}
</style>
<!-- Page Header -->
<div class="page-header flex justify-between items-center">
<div>
<h1 class="page-title">Dashboard</h1>
<p class="page-description">
{% if company %}
{{ company.name }} · Revenue overview and key metrics
{% else %}
Get started by adding your first company
{% endif %}
</p>
</div>
{% if companies %}
<div class="flex items-center gap-2">
<select class="form-input" style="width: auto;" onchange="window.location.href='?company_id=' + this.value">
{% for c in companies %}
<option value="{{ c.id }}" {% if c.id == company.id %}selected{% endif %}>{{ c.name }}</option>
{% endfor %}
</select>
<a href="{{ url_for('dashboard.companies_route') }}" class="btn btn-outline btn-sm">+ Add Company</a>
</div>
{% endif %}
</div>
{% if company %}
<!-- KPI Cards -->
<div class="grid grid-4 mb-6">
<a href="{{ url_for('dashboard.forecast') }}" class="card-link">
<div class="kpi-card">
<div class="kpi-label">Annual Target</div>
<div class="kpi-value">
${% if company.target_revenue %}{{ "{:,.0f}".format(company.target_revenue) }}{% else %}—{% endif %}
</div>
{% if run_rate.ytd_revenue %}
<div class="kpi-trend {% if run_rate.pace == 'on_track' %}up{% else %}down{% endif %}">
${% if run_rate.ytd_revenue %}{{ "{:,.0f}".format(run_rate.ytd_revenue) }}{% endif %} YTD
</div>
{% endif %}
</div>
</a>
<a href="{{ url_for('dashboard.forecast') }}" class="card-link">
<div class="kpi-card">
<div class="kpi-label">Run Rate</div>
<div class="kpi-value">
${% if run_rate.run_rate %}{{ "{:,.0f}".format(run_rate.run_rate) }}{% else %}—{% endif %}
</div>
<div class="kpi-trend {% if run_rate.pace == 'on_track' %}up{% else %}down{% endif %}">
{% if run_rate.pace == 'on_track' %}✓ On track{% else %}⚠ Behind{% endif %}
</div>
</div>
</a>
<a href="{{ url_for('dashboard.projects') }}" class="card-link">
<div class="kpi-card">
<div class="kpi-label">Active Projects</div>
<div class="kpi-value">{{ active_projects or '0' }}</div>
<div class="kpi-trend">
<span style="color: var(--info);">View all →</span>
</div>
</div>
</a>
<a href="{{ url_for('dashboard.goals') }}" class="card-link">
<div class="kpi-card">
<div class="kpi-label">Active Goals</div>
<div class="kpi-value">{{ active_goals|length or '0' }}</div>
<div class="kpi-trend">
<span style="color: var(--info);">View all →</span>
</div>
</div>
</a>
</div>
<!-- Main Grid -->
<div class="grid grid-2" style="grid-template-columns: 2fr 1fr;">
<!-- Recent Forecasts -->
<div class="card card-clickable" data-redirect="{{ url_for('dashboard.forecast') }}">
<div class="card-header flex justify-between items-center">
<div>
<h2 class="card-title">Revenue Forecast</h2>
<p class="card-description">Projected vs actual by month</p>
</div>
<a href="{{ url_for('dashboard.forecast') }}" class="btn btn-outline btn-sm">View Full →</a>
</div>
<div class="card-content" style="padding: 0;">
{% if recent_forecasts %}
<table class="table">
<thead>
<tr>
<th>Period</th>
<th>Projected</th>
<th>Actual</th>
<th>Variance</th>
</tr>
</thead>
<tbody>
{% for f in recent_forecasts %}
<tr>
<td>{{ f.period_start.strftime('%b %Y') }}</td>
<td>
${% if f.projected_value %}{{ "{:,.0f}".format(f.projected_value) }}{% else %}—{% endif %}
</td>
<td>
${% if f.actual_value %}{{ "{:,.0f}".format(f.actual_value) }}{% else %}—{% endif %}
</td>
<td>
{% if f.variance_pct %}
<span class="badge {% if f.variance_pct >= 0 %}badge-success{% else %}badge-destructive{% endif %}">
{{ '%+.1f%%'|format(f.variance_pct) }}
</span>
{% else %}
—
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<div style="padding: 2rem; text-align: center;">
<p class="text-muted">No forecast data yet</p>
<a href="{{ url_for('dashboard.forecast') }}" class="btn btn-outline btn-sm mt-2">Add Forecasts</a>
</div>
{% endif %}
</div>
</div>
<!-- Right Column -->
<div style="display: flex; flex-direction: column; gap: 1.5rem;">
<!-- Active Goals -->
<div class="card card-clickable" data-redirect="{{ url_for('dashboard.goals') }}">
<div class="card-header flex justify-between items-center">
<div>
<h2 class="card-title">Active Goals</h2>
<p class="card-description">{{ active_goals|length }} goals in progress</p>
</div>
<a href="{{ url_for('dashboard.goals') }}" class="btn btn-outline btn-sm">View →</a>
</div>
<div class="card-content">
{% if active_goals %}
{% for goal in active_goals %}
<div style="margin-bottom: 0.75rem; padding-bottom: 0.75rem; {% if not loop.last %}border-bottom: 1px solid var(--border);{% endif %}">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem;">
<span style="font-size: 0.875rem; font-weight: 500;">{{ goal.name }}</span>
<span class="badge badge-default">{{ goal.category }}</span>
</div>
<div class="text-xs text-muted">
Target: {{ goal.end_date.strftime('%b %d') if goal.end_date else '—' }}
</div>
</div>
{% endfor %}
{% else %}
<div style="text-align: center; padding: 1rem;">
<p class="text-muted text-sm">No active goals</p>
<a href="{{ url_for('dashboard.goals') }}" class="btn btn-outline btn-sm mt-2">Set Goals</a>
</div>
{% endif %}
</div>
</div>
<!-- Recent Coaching -->
<div class="card card-clickable" data-redirect="{{ url_for('dashboard.coaching') }}">
<div class="card-header flex justify-between items-center">
<div>
<h2 class="card-title">Coaching</h2>
<p class="card-description">Recent sessions</p>
</div>
<a href="{{ url_for('dashboard.coaching') }}" class="btn btn-outline btn-sm">View →</a>
</div>
<div class="card-content">
{% if recent_sessions %}
{% for session in recent_sessions %}
<div style="margin-bottom: 0.5rem; padding-bottom: 0.5rem; {% if not loop.last %}border-bottom: 1px solid var(--border);{% endif %}">
<div style="font-size: 0.875rem; font-weight: 500;">{{ session.title }}</div>
<div class="text-xs text-muted">
{{ session.start_date.strftime('%b %d, %Y') }} · {% if session.duration_minutes %}{{ session.duration_minutes }} min{% else %}60 min{% endif %}
</div>
</div>
{% endfor %}
{% else %}
<div style="text-align: center; padding: 1rem;">
<p class="text-muted text-sm">No recent sessions</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% else %}
<!-- Empty State -->
<div class="card" style="margin-top: 2rem;">
<div class="card-content" style="text-align: center; padding: 3rem;">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="var(--muted-foreground)" stroke-width="1.5" style="margin-bottom: 1rem;">
<path d="M3 21h18M5 21V7l8-4v18M13 21V3l8 4v14"/>
</svg>
<h2 class="card-title mb-2">Welcome to Command Center</h2>
<p class="text-muted mb-4">Get started by adding your first company</p>
<a href="{{ url_for('dashboard.companies_route') }}" class="btn btn-primary btn-lg">Add Your Company</a>
</div>
</div>
{% endif %}
<!-- Clickable Card Handler -->
<script>
document.querySelectorAll('.card-clickable').forEach(function(card) {
card.addEventListener('click', function(e) {
// Don't redirect if clicking an inner link, button, or form element
if (e.target.closest('a, button, [role="button"], input, select, textarea')) return;
var url = card.getAttribute('data-redirect');
if (url) window.location.href = url;
});
});
</script>
{% endblock %}