`views/claim-detail.ejs`

92 lines
<%- include('partials/header', { title: 'Claim · ' + (claim.draft_subject || claim.id) }) %>

<section class="page-head">
  <a class="link" href="/claims" style="color:var(--text-dim);font-size:13px">← All claims</a>
  <h1 style="margin-top:8px"><%= claim.draft_subject || (claim.claim_type + ' request') %></h1>
  <span class="status <%= claim.state === 'sent' ? 'connected' : claim.state === 'draft' ? 'syncing' : 'not_connected' %>" style="font-size:12px;padding:4px 10px;border-radius:999px;align-self:flex-start"><%= claim.state %></span>
</section>

<section class="glass" style="padding:22px 24px">
  <dl class="meta" style="display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0 0 16px 0">
    <dt style="color:var(--text-dim);font-size:12px">Routing</dt><dd style="margin:0"><%= claim.routing %></dd>
    <dt style="color:var(--text-dim);font-size:12px">Claim type</dt><dd style="margin:0"><%= claim.claim_type %></dd>
    <dt style="color:var(--text-dim);font-size:12px">Desired remedy</dt><dd style="margin:0"><%= claim.desired_remedy || '—' %></dd>
    <% if (claim.due_at) { %>
      <dt style="color:var(--text-dim);font-size:12px">Due by</dt><dd style="margin:0"><%= new Date(claim.due_at).toLocaleString() %></dd>
    <% } %>
    <dt style="color:var(--text-dim);font-size:12px">Source</dt><dd style="margin:0"><%= claim.metadata_jsonb && claim.metadata_jsonb.draft_source || 'template' %></dd>
  </dl>
</section>

<section class="glass" style="padding:22px 24px">
  <h2 style="margin:0 0 14px 0;font-size:16px">Draft letter</h2>
  <pre style="white-space:pre-wrap;font-family:Georgia,'Times New Roman',serif;font-size:14px;line-height:1.55;color:var(--text);background:rgba(0,0,0,0.18);padding:18px;border-radius:10px;border:1px solid var(--border)"><%= claim.draft_body %></pre>
</section>

<% if (claim.cited_rules_jsonb && claim.cited_rules_jsonb.length) { %>
  <section class="glass" style="padding:22px 24px">
    <h2 style="margin:0 0 12px 0;font-size:16px">Cited rules</h2>
    <ul style="margin:0;padding-left:18px">
      <% claim.cited_rules_jsonb.forEach(rule => { %>
        <li style="font-size:13px;color:var(--text-dim);margin-bottom:8px">
          <strong style="color:var(--text)"><%= rule.citation %></strong> — <%= rule.short_title %>
          <% if (rule.source_url) { %>
            <a href="<%= rule.source_url %>" target="_blank" rel="noopener noreferrer" style="margin-left:8px;font-size:11px">source ↗</a>
          <% } %>
        </li>
      <% }) %>
    </ul>
  </section>
<% } %>

<% if (claim.evidence_jsonb && claim.evidence_jsonb.length) { %>
  <section class="glass" style="padding:22px 24px">
    <h2 style="margin:0 0 12px 0;font-size:16px">Evidence index</h2>
    <ul style="margin:0;padding-left:18px">
      <% claim.evidence_jsonb.forEach(e => { %>
        <li style="font-size:13px;color:var(--text-dim);margin-bottom:4px"><%= e.kind %>: <%= e.id %></li>
      <% }) %>
    </ul>
  </section>
<% } %>

<section class="glass" style="padding:22px 24px">
  <h2 style="margin:0 0 12px 0;font-size:16px">Pending actions</h2>
  <% if (!actions.length) { %>
    <p class="subtle" style="color:var(--text-dim);margin:0">No actions queued.</p>
  <% } else { %>
    <% actions.forEach(a => { %>
      <article style="padding:12px 14px;border:1px solid var(--border);border-radius:10px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:12px">
        <div>
          <div style="font-weight:500"><%= a.action_type %></div>
          <div style="font-size:12px;color:var(--text-dim)">approval: <%= a.approval_level %> · state: <%= a.state %></div>
        </div>
        <% if (a.state === 'pending') { %>
          <div style="display:flex;gap:8px">
            <button class="button primary" data-approve="<%= a.id %>">Approve draft</button>
          </div>
        <% } else if (a.state === 'approved') { %>
          <span class="status connected" style="font-size:11px;padding:3px 9px;border-radius:999px">approved · awaiting send wire-up</span>
        <% } else { %>
          <span class="subtle" style="font-size:12px;color:var(--text-dim)"><%= a.state %></span>
        <% } %>
      </article>
    <% }) %>
  <% } %>
  <p class="subtle" style="margin-top:14px;font-size:11px;color:var(--text-dim)">Approving here does NOT send. The send wire-up to George email is a future tick. Until then, approve = "I've reviewed this draft and would send it."</p>
</section>

<script>
document.querySelectorAll('[data-approve]').forEach(btn => {
  btn.addEventListener('click', async () => {
    btn.disabled = true;
    btn.textContent = 'Approving…';
    const r = await fetch('/api/claims/<%= claim.id %>/actions/' + btn.dataset.approve + '/approve', { method: 'POST' });
    if (r.ok) { btn.textContent = 'Approved ✓'; setTimeout(() => location.reload(), 800); }
    else { btn.textContent = 'Failed'; btn.disabled = false; }
  });
});
</script>

<%- include('partials/footer') %>