`views/deadlines.ejs`

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

<section class="page-head">
  <div>
    <h1>Deadlines</h1>
    <p class="subtle">Everything time-sensitive across AbramsOS — bill due dates, reorder points, warranty &amp; return windows, recall actions. Regenerated on each visit.</p>
  </div>
</section>

<% if (!deadlines.length) { %>
  <section class="empty glass"><p>Nothing due in the window. Add <a href="/bills">bills</a> or <a href="/reorders">reorders</a> with due dates and they'll appear here.</p></section>
<% } else { %>
  <section class="deadline-list">
    <% deadlines.forEach(d => {
         const over = d.days_until < 0;
         const soon = d.days_until >= 0 && d.days_until <= 7; %>
      <article class="deadline glass<%= over ? ' overdue' : '' %>" data-id="<%= d.id %>">
        <div class="dl-when">
          <% if (over) { %><span class="badge red"><%= Math.abs(d.days_until) %>d overdue</span>
          <% } else if (soon) { %><span class="badge amber">in <%= d.days_until %>d</span>
          <% } else { %><span class="badge">in <%= d.days_until %>d</span><% } %>
          <div class="dl-date"><%= new Date(d.due_at).toLocaleDateString(undefined, { weekday:'short', month:'short', day:'numeric' }) %></div>
        </div>
        <div class="dl-body">
          <h3><%= d.title %></h3>
          <% if (d.body) { %><p class="subtle"><%= d.body %></p><% } %>
          <span class="chip"><%= d.reason_code.replace(/_/g, ' ') %></span>
        </div>
        <button class="btn small" data-dismiss="<%= d.id %>">Dismiss</button>
      </article>
    <% }) %>
  </section>
<% } %>

<script>
  document.querySelectorAll('[data-dismiss]').forEach((btn) => {
    btn.addEventListener('click', async () => {
      const res = await fetch(`/api/reminders/${btn.dataset.dismiss}/dismiss`, { method: 'POST' });
      if (res.ok) btn.closest('.deadline').remove(); else alert('Dismiss failed');
    });
  });
</script>

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