`views/purchases.ejs`

60 lines
<%- include('partials/header', { title: 'Purchases' }) %>

<section class="page-head">
  <h1>Purchases</h1>
  <div class="grid-controls">
    <label>Sort
      <select id="sortSelect">
        <option value="date-desc">Newest</option>
        <option value="date-asc">Oldest</option>
        <option value="merchant">Merchant A→Z</option>
        <option value="amount-desc">Total ↓</option>
        <option value="amount-asc">Total ↑</option>
      </select>
    </label>
    <label>Density
      <input id="densityRange" type="range" min="180" max="420" step="10" value="280">
    </label>
  </div>
</section>

<% if (!purchases.length) { %>
  <section class="empty glass">
    <p>No purchases yet. <a href="/connectors">Sync a connector</a> to ingest receipts.</p>
  </section>
<% } else { %>
  <section id="purchaseGrid" class="purchase-grid" style="grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));">
    <% purchases.forEach(p => { %>
      <article class="purchase glass"
               data-merchant="<%= (p.merchant_name || '').toLowerCase() %>"
               data-amount="<%= p.total_amount || 0 %>"
               data-date="<%= new Date(p.purchase_date).toISOString() %>">
        <header>
          <h3><%= p.merchant_name %></h3>
          <% if (p.confidence != null) { %>
            <span class="confidence" title="Extraction confidence"><%= Math.round(Number(p.confidence) * 100) %>%</span>
          <% } %>
        </header>
        <div class="amount">
          <% if (p.total_amount) { %>
            <%= p.currency || 'USD' %> <%= Number(p.total_amount).toFixed(2) %>
          <% } else { %>
            <span class="subtle">amount unknown</span>
          <% } %>
        </div>
        <dl class="meta">
          <dt>Date</dt><dd><%= new Date(p.purchase_date).toLocaleDateString() %></dd>
          <% if (p.order_number) { %>
            <dt>Order</dt><dd><%= p.order_number %></dd>
          <% } %>
          <% if (p.merchant_domain) { %>
            <dt>Domain</dt><dd><%= p.merchant_domain %></dd>
          <% } %>
        </dl>
      </article>
    <% }) %>
  </section>
<% } %>

<%- include('partials/footer', { gridScript: true }) %>