{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<div class="page-head">
  <h1>Dashboard</h1>
  <div class="d-flex gap-2">
    <a class="btn btn-outline-secondary" href="{{ url_for('doc_new', kind='purchase') }}">Receive stock</a>
    <a class="btn btn-primary" href="{{ url_for('doc_new', kind='sale') }}">New sale</a>
  </div>
</div>
<div class="row g-3 mb-3">
  <div class="col-6 col-xl"><div class="kpi"><div class="v">{{ kpi.products }}</div><div class="k">Active products</div></div></div>
  <div class="col-6 col-xl"><div class="kpi"><div class="v">{{ kpi.units|money }}</div><div class="k">Units in stock</div></div></div>
  <div class="col-6 col-xl"><div class="kpi"><div class="v">{{ currency }} {{ kpi.value|money }}</div><div class="k">Stock value at cost</div></div></div>
  <div class="col-6 col-xl"><div class="kpi"><div class="v">{{ currency }} {{ kpi.sales_30|money }}</div><div class="k">Sales, last 30 days</div></div></div>
  <div class="col-12 col-xl"><div class="kpi warn"><div class="v">{{ low|length }} low, {{ kpi.pending }} waiting</div><div class="k">Low-stock products, requisitions to approve</div></div></div>
</div>
<div class="row g-3">
  <div class="col-xl-7">
    <div class="panel h-100">
      <h2>Sales and purchases, last 14 days</h2>
      <canvas id="chart" height="150" aria-label="Bar chart of daily sales and purchases" role="img"></canvas>
    </div>
  </div>
  <div class="col-xl-5">
    <div class="panel flush h-100">
      <div class="d-flex justify-content-between align-items-center px-3 pt-3">
        <h2>Running low</h2><a href="{{ url_for('reorder') }}">See what to reorder</a>
      </div>
      <table class="table">
        <thead><tr><th>Product</th><th class="num">Reorder at</th><th class="num">On hand</th></tr></thead>
        <tbody>
        {% for r in low %}
          <tr><td>{{ r.name }}<div class="small text-secondary">{{ r.sku }}</div></td>
              <td class="num">{{ r.reorder_level }}</td>
              <td class="num"><span class="tag{% if r.on_hand <= 0 %} empty{% endif %}">{{ r.on_hand }}</span></td></tr>
        {% else %}
          <tr><td colspan="3" class="text-secondary">Every product is above its reorder level.</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  <div class="col-12">
    <div class="panel flush">
      <div class="d-flex justify-content-between align-items-center px-3 pt-3">
        <h2>Latest stock movements</h2><a href="{{ url_for('movements') }}">Open the ledger</a>
      </div>
      <table class="table">
        <thead><tr><th>When</th><th>Product</th><th>Warehouse</th><th>Type</th><th>Reference</th><th class="num">Qty</th></tr></thead>
        <tbody>
        {% for m in recent %}
          <tr><td>{{ m.created_at[:16] }}</td><td>{{ m.product }}</td><td>{{ m.warehouse }}</td>
              <td>{{ m.move_type.replace('_', ' ') }}</td><td>{{ m.ref }}</td>
              <td class="num {{ 'qty-in' if m.qty > 0 else 'qty-out' }}">{{ '%+d'|format(m.qty) }}</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
<script src="{{ url_for('static', filename='vendor/chart.umd.js') }}"></script>
<script>
const data = {{ chart|tojson }};
new Chart(document.getElementById('chart'), {
  type: 'bar',
  data: { labels: data.labels, datasets: [
    { label: 'Sales', data: data.sales, backgroundColor: '#1b2a38' },
    { label: 'Purchases', data: data.purchases, backgroundColor: '#f5b70a' } ] },
  options: { animation: false, plugins: { legend: { position: 'bottom' } },
             scales: { y: { beginAtZero: true }, x: { grid: { display: false } } } }
});
</script>
{% endblock %}