<section class="dash">
  <div class="dash-greeting">
    <h1>Finance</h1>
    <p>Quotes, invoices, and the services catalog behind every price you send.</p>
  </div>

  <div class="dash-stats-row">
    <a class="dash-stat-card" href="/admin/finance/quotes">
      <span class="dash-stat-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
      </span>
      <span class="dash-stat-count"><%= stats.quoteCount %></span>
      <span class="dash-stat-label">Quotes</span>
    </a>
    <a class="dash-stat-card" href="/admin/finance/quotes?status=sent">
      <span class="dash-stat-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 6-10 7L2 6"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg>
      </span>
      <span class="dash-stat-count"><%= stats.sentQuoteCount %></span>
      <span class="dash-stat-label">Awaiting response</span>
    </a>
    <a class="dash-stat-card" href="/admin/finance/invoices">
      <span class="dash-stat-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
      </span>
      <span class="dash-stat-count"><%= stats.invoiceCount %></span>
      <span class="dash-stat-label">Invoices</span>
    </a>
    <a class="dash-stat-card" href="/admin/finance/invoices?status=sent">
      <span class="dash-stat-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
      </span>
      <span class="dash-stat-count"><%= stats.outstandingTotal.toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></span>
      <span class="dash-stat-label"><%= stats.outstandingCount %> outstanding invoice<%= stats.outstandingCount === 1 ? '' : 's' %></span>
    </a>
    <a class="dash-stat-card" href="/admin/finance/services">
      <span class="dash-stat-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="18"></rect><rect x="14" y="3" width="7" height="8"></rect><rect x="14" y="14" width="7" height="7"></rect></svg>
      </span>
      <span class="dash-stat-count"><%= stats.serviceCount %></span>
      <span class="dash-stat-label">Catalog items</span>
    </a>
    <a class="dash-stat-card" href="/admin/finance/quotes">
      <span class="dash-stat-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"></path><path d="M18 20V4"></path><path d="M6 20v-4"></path></svg>
      </span>
      <span class="dash-stat-count"><%= stats.avgMargin %>%</span>
      <span class="dash-stat-label">Avg. margin (recent quotes)</span>
    </a>
  </div>

  <div class="dash-actions-row" style="margin-bottom: 1.75rem;">
    <a class="dash-action-card" href="/admin/finance/quotes/new">
      <span class="dash-action-text">
        <span class="dash-action-title">New quote</span>
        <span class="dash-action-desc">Price a job from the services catalog with cost, fee, and tax worked out automatically.</span>
      </span>
      <svg class="dash-action-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
    </a>
    <a class="dash-action-card" href="/admin/finance/services">
      <span class="dash-action-text">
        <span class="dash-action-title">Services & products</span>
        <span class="dash-action-desc">Manage the catalog of cost prices and standard markups quotes are built from.</span>
      </span>
      <svg class="dash-action-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
    </a>
    <a class="dash-action-card" href="/admin/finance/settings">
      <span class="dash-action-text">
        <span class="dash-action-title">Finance settings</span>
        <span class="dash-action-desc">Standard agency fee, tax rate, minimum margin, and invoice payment details.</span>
      </span>
      <svg class="dash-action-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
    </a>
  </div>

  <div class="dash-panel">
    <div class="dash-panel-header">
      <h2>Recent quotes</h2>
      <a href="/admin/finance/quotes">View all &rarr;</a>
    </div>
    <% if (recentQuotes && recentQuotes.length) { %>
      <div class="dash-recent-list">
        <% recentQuotes.forEach(function(q) { %>
          <a class="dash-recent-row" href="/admin/finance/quotes/<%= q.id %>">
            <span class="dash-recent-main">
              <span class="dash-recent-title"><%= q.quoteNumber %> - <%= q.clientName %></span>
              <span class="dash-recent-meta"><%= q.currency %> <%= Number(q.totalAmount).toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %> &middot; margin <%= q.profitMarginPercent %>%</span>
            </span>
            <span class="tag tag-<%= q.status %>"><%= q.status %></span>
          </a>
        <% }) %>
      </div>
    <% } else { %>
      <div class="dash-empty-state">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
        <p>No quotes yet.</p>
        <a href="/admin/finance/quotes/new">Create your first quote &rarr;</a>
      </div>
    <% } %>
  </div>

  <div class="dash-panel">
    <div class="dash-panel-header">
      <h2>Recent invoices</h2>
      <a href="/admin/finance/invoices">View all &rarr;</a>
    </div>
    <% if (recentInvoices && recentInvoices.length) { %>
      <div class="dash-recent-list">
        <% recentInvoices.forEach(function(inv) { %>
          <a class="dash-recent-row" href="/admin/finance/invoices/<%= inv.id %>">
            <span class="dash-recent-main">
              <span class="dash-recent-title"><%= inv.invoiceNumber %> - <%= inv.clientName %></span>
              <span class="dash-recent-meta"><%= inv.currency %> <%= Number(inv.totalAmount).toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></span>
            </span>
            <span class="tag tag-<%= inv.status %>"><%= inv.status %></span>
          </a>
        <% }) %>
      </div>
    <% } else { %>
      <div class="dash-empty-state">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
        <p>No invoices yet.</p>
        <a href="/admin/finance/quotes">Convert an accepted quote &rarr;</a>
      </div>
    <% } %>
  </div>
</section>
