{% extends "base.html" %}
{% from "_macros.html" import icon with context %}
{% from "insights/_parts.html" import month_bars, change with context %}
{% block title %}{{ t('Sales Overview') }}{% endblock %}
{% block content %}
<div class="page-head"><div><h1>{{ t('Sales Overview') }}</h1>
  <div class="dash-sub"><span>{{ t('Fiscal year from') }} {{ fys }}</span><span>·</span><span>{{ t('Amounts in') }} {{ currency }}</span><span>·</span><span>{{ t('Excluding VAT') }}</span></div></div>
  {% if can_write %}<div class="actions"><a class="btn ghost" href="{{ url_for('orders.form', kind='sale') }}">{{ icon('file') }}{{ t('Quotation') }}</a>
    <a class="btn" href="{{ url_for('invoices.form', kind='out_invoice') }}">{{ icon('receipt') }}{{ t('Customer Invoice') }}</a></div>{% endif %}
</div>
<div class="kpis">
  <div class="kpi"><div class="top"><span class="label">{{ t('Revenue this month') }}</span><span class="ibox t-indigo">{{ icon('trend') }}</span></div>
    <div class="value num">{{ this_m|money(currency) }}<small>{{ currency }}</small></div><div class="sub">{{ change(this_m, last_m) }}</div></div>
  <div class="kpi"><div class="top"><span class="label">{{ t('Revenue (YTD)') }}</span><span class="ibox t-blue">{{ icon('chart') }}</span></div>
    <div class="value num">{{ ytd.revenue|money(currency) }}<small>{{ currency }}</small></div><div class="sub">{{ t('Cost of revenue') }} {{ ytd.cost|money(currency) }}</div></div>
  <a class="kpi" href="{{ url_for('insights.margin') }}"><div class="top"><span class="label">{{ t('Gross Profit (YTD)') }}</span><span class="ibox {{ 't-green' if ytd.margin >= 0 else 't-red' }}">{{ icon('percent') }}</span></div>
    <div class="value num">{{ ytd.margin|money(currency) }}<small>{{ currency }}</small></div>
    <div class="sub">{% if ytd.pct is not none %}<span class="delta {{ 'good' if ytd.pct >= 0 else 'bad' }}">{{ '%.1f'|format(ytd.pct) }}%</span>{{ t('as in the Profit & Loss') }}{% endif %}</div></a>
  <a class="kpi {{ 'alert' if over }}" href="{{ url_for('reports.aged', side='receivable') }}"><div class="top"><span class="label">{{ t('Receivables') }}</span><span class="ibox t-amber">{{ icon('clock') }}</span></div>
    <div class="value num">{{ recv|money(currency) }}<small>{{ currency }}</small></div>
    <div class="sub">{% if over %}<span class="delta bad">{{ over|money(currency) }}</span>{{ t('overdue') }} ({{ over_n }}){% else %}{{ recv_n }} {{ t('open invoices') }}{% endif %}</div></a>
</div>
<div class="stat-row">
  {% if has('sales') %}<a class="stat" href="{{ url_for('orders.index', kind='sale', state='draft') }}"><span class="ibox t-indigo">{{ icon('file') }}</span>
    <div><div class="l">{{ t('Open quotations') }}</div><div class="v num">{{ quote_v|money(currency) }}</div></div><div class="r">{{ quote_n }}</div></a>
  <a class="stat" href="{{ url_for('orders.index', kind='sale', state='confirmed') }}"><span class="ibox t-green">{{ icon('cart') }}</span>
    <div><div class="l">{{ t('Orders to invoice') }}</div><div class="v num">{{ to_invoice }}</div></div><div class="r">{{ t('Open') }} →</div></a>{% endif %}
  <a class="stat" href="{{ url_for('reports.sales') }}"><span class="ibox t-blue">{{ icon('chart') }}</span>
    <div><div class="l">{{ t('Sales Analysis') }}</div><div class="v">{{ t('By product, customer, month') }}</div></div><div class="r">→</div></a>
</div>
<div class="two-col">
  <div class="card flush" style="overflow:visible">
    <div class="card-h"><h2>{{ t('Revenue and gross profit') }}</h2>
      <div class="legend"><span><i style="background:var(--chart-1)"></i>{{ t('Revenue') }}</span><span><i style="background:var(--chart-2)"></i>{{ t('Gross Profit') }}</span></div></div>
    {{ month_bars(months, series, peak, scale, currency, 'Revenue', 'Gross Profit') }}
  </div>
  <div class="card flush">
    <div class="card-h"><h2>{{ t('Top customers (YTD)') }}</h2><a class="link" href="{{ url_for('insights.margin', by='customer') }}">{{ t('View all') }} →</a></div>
    <table><thead><tr><th>{{ t('Customer') }}</th><th class="num">{{ t('Sales') }}</th><th class="num">{{ t('Margin %') }}</th></tr></thead><tbody>
    {% for r in customers %}<tr><td>{{ r.label }}</td><td class="num">{{ r.revenue|money(currency) }}</td><td class="num {{ 'neg' if r.pct is not none and r.pct < 0 }}">{{ '%.1f%%'|format(r.pct) if r.pct is not none else '—' }}</td></tr>
    {% else %}<tr><td class="empty" colspan="3">{{ t('Nothing yet.') }}</td></tr>{% endfor %}</tbody></table>
  </div>
</div>
<div class="card flush">
  <div class="card-h"><h2>{{ t('Top products (YTD)') }}</h2><a class="link" href="{{ url_for('insights.margin', by='product') }}">{{ t('Gross Margin') }} →</a></div>
  <table><thead><tr><th>{{ t('Product') }}</th><th class="num">{{ t('Quantity') }}</th><th class="num">{{ t('Sales') }}</th><th class="num">{{ t('Cost of Goods Sold') }}</th><th class="num">{{ t('Gross Margin') }}</th><th class="num">{{ t('Margin %') }}</th></tr></thead><tbody>
  {% for r in products %}<tr><td>{{ r.label }}</td><td class="num">{{ '%g' % r.qty }}</td><td class="num">{{ r.revenue|money(currency) }}</td><td class="num">{{ r.cost|money(currency) }}</td>
    <td class="num {{ 'neg' if r.margin < 0 }}">{{ r.margin|money(currency) }}</td><td class="num">{{ '%.1f%%'|format(r.pct) if r.pct is not none else '—' }}</td></tr>
  {% else %}<tr><td class="empty" colspan="6">{{ t('Nothing yet.') }}</td></tr>{% endfor %}</tbody></table>
</div>
{% endblock %}