`views/admin/coi-requests.ejs`

80 lines
<%- include('../partials/head', { title, admin: true }) %>
<%- include('partials/admin-header') %>
<section class="admin-main">
  <header class="admin-page-head">
    <h1>COI requests</h1>
    <p class="muted">Certificate of Insurance requests from designers specifying your studio for upcoming installs.</p>
  </header>
  <% if (flash && flash.ok) { %><div class="callout callout-success"><%= flash.ok %></div><% } %>
  <% if (flash && flash.error) { %><div class="callout callout-warn"><%= flash.error %></div><% } %>

  <p style="margin:8px 0 24px">
    <a href="/admin/insurance" class="btn btn-ghost btn-sm">← Edit insurance details</a>
  </p>

  <% if (!requests || !requests.length) { %>
    <div class="callout">
      <p style="margin:0">No COI requests yet. The "Request COI" button shows up on your public profile once you fill in your <a href="/admin/insurance">insurance details</a>.</p>
    </div>
  <% } else { %>
    <% requests.forEach(function(r) {
        var statusColor = {
          pending:      '#b45309',
          acknowledged: '#1d4ed8',
          fulfilled:    '#15803d',
          declined:     '#b91c1c',
          expired:      '#6b7280'
        }[r.status] || '#6b7280';
    %>
      <article style="border:1px solid var(--border);border-radius:8px;padding:18px;margin:0 0 16px">
        <header style="display:flex;justify-content:space-between;align-items:start;gap:12px;flex-wrap:wrap">
          <div>
            <div style="font-size:12px;color:#888;text-transform:uppercase;letter-spacing:0.06em"><%= new Date(r.created_at).toLocaleString('en-US') %></div>
            <h3 style="margin:4px 0 0;font-size:18px"><%= r.designer_name %><% if (r.designer_company) { %> <span class="muted" style="font-weight:400">· <%= r.designer_company %></span><% } %></h3>
            <p style="margin:4px 0 0;font-size:14px"><a href="mailto:<%= r.designer_email %>"><%= r.designer_email %></a><% if (r.designer_phone) { %> · <%= r.designer_phone %><% } %></p>
          </div>
          <span style="background:<%= statusColor %>;color:#fff;padding:4px 10px;border-radius:12px;font-size:12px;text-transform:uppercase;letter-spacing:0.06em"><%= r.status %></span>
        </header>

        <dl style="display:grid;grid-template-columns:160px 1fr;gap:6px 16px;margin:14px 0 0;font-size:14px">
          <% if (r.project_name) { %><dt class="muted">Project</dt><dd style="margin:0"><%= r.project_name %></dd><% } %>
          <% if (r.project_address) { %><dt class="muted">Project address</dt><dd style="margin:0"><%= r.project_address %></dd><% } %>
          <% if (r.project_start_date) { %><dt class="muted">Start date</dt><dd style="margin:0"><%= r.project_start_date %></dd><% } %>
          <% if (r.project_value_usd) { %><dt class="muted">Approx. value</dt><dd style="margin:0">$<%= Number(r.project_value_usd).toLocaleString() %></dd><% } %>
          <dt class="muted">Add'l insured</dt><dd style="margin:0"><strong><%= r.additional_insured_name %></strong></dd>
          <% if (r.additional_insured_address) { %><dt class="muted">Their address</dt><dd style="margin:0"><%= r.additional_insured_address %></dd><% } %>
          <% if (r.notes) { %><dt class="muted">Notes</dt><dd style="margin:0;font-style:italic"><%= r.notes %></dd><% } %>
        </dl>

        <% if (r.installer_notified_at || r.broker_notified_at) { %>
          <p class="muted" style="font-size:12px;margin:10px 0 0">
            Routed <% if (r.installer_notified_at) { %>to you<% } %><% if (r.broker_notified_at) { %><%= r.installer_notified_at ? ' + ' : 'to ' %>broker<% } %>
          </p>
        <% } %>

        <% if (r.status === 'pending' || r.status === 'acknowledged') { %>
          <form method="post" action="/admin/coi-requests/<%= r.id %>/status" style="margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <% if (r.status === 'pending') { %>
              <button type="submit" name="status" value="acknowledged" class="btn btn-ghost btn-sm">Acknowledge</button>
            <% } %>
            <button type="submit" name="status" value="fulfilled" class="btn btn-primary btn-sm">Mark fulfilled</button>
            <details style="display:inline-block">
              <summary class="btn btn-ghost btn-sm" style="display:inline-block;cursor:pointer">Decline</summary>
              <div style="margin-top:8px;display:flex;gap:6px;align-items:center">
                <input type="text" name="decline_reason" placeholder="reason (optional)" maxlength="500" style="min-width:200px">
                <button type="submit" name="status" value="declined" class="btn btn-ghost btn-sm">Confirm decline</button>
              </div>
            </details>
          </form>
        <% } else if (r.status === 'fulfilled' && r.fulfilled_at) { %>
          <p class="muted" style="font-size:12px;margin:10px 0 0">Fulfilled <%= new Date(r.fulfilled_at).toLocaleDateString('en-US') %><% if (r.fulfilled_pdf_url) { %> · <a href="<%= r.fulfilled_pdf_url %>" target="_blank" rel="noopener">cert PDF ↗</a><% } %></p>
        <% } else if (r.status === 'declined' && r.decline_reason) { %>
          <p class="muted" style="font-size:12px;margin:10px 0 0">Declined: <%= r.decline_reason %></p>
        <% } %>
      </article>
    <% }); %>
  <% } %>
</section>
<%- include('../partials/footer') %>