Initial Commit

templates/admin.html

@@ -0,0 +1,119 @@
+{% extends "base.html" %}
+{% block content %}
+<section class="max-w-6xl mx-auto py-10">
+  <div class="flex items-center justify-between mb-6">
+    <h1 class="text-3xl font-bold">Quote Requests</h1>
+
+    <!-- simple client-side search -->
+    <input id="q" placeholder="Search name/email/need…" class="w-64"
+           oninput="filterRows(this.value)" />
+  </div>
+
+  <div class="overflow-x-auto card glass">
+    <table id="reqTable" class="min-w-full text-sm">
+      <thead class="text-left text-white/70">
+        <tr>
+          <th class="p-3">ID</th>
+          <th class="p-3">Date</th>
+          <th class="p-3">Name</th>
+          <th class="p-3">Email</th>
+          <th class="p-3">What They Need</th>
+          <th class="p-3">Scope Size</th>
+          <th class="p-3">Timeline</th>
+          <th class="p-3">Extras</th>
+          <th class="p-3">Budget</th>
+          <th class="p-3">Est. Hours</th>
+          <th class="p-3">Est. Cost</th>
+          <th class="p-3">Notes</th>
+        </tr>
+      </thead>
+      <tbody id="reqBody">
+        {% for r in rows %}
+        <tr class="border-t border-white/10">
+          <td class="p-3">{{ r.id }}</td>
+          <td class="p-3 whitespace-nowrap">{{ r.created_at[:19].replace('T',' ') }}</td>
+          <td class="p-3">{{ r.name }}</td>
+          <td class="p-3"><a class="underline" href="mailto:{{ r.email }}">{{ r.email }}</a></td>
+          <!-- These columns reuse existing DB fields with friendlier labels -->
+          <td class="p-3">{{ r.project_type or '-' }}</td>
+          <td class="p-3">{{ r.complexity or '-' }}</td>
+          <td class="p-3">
+            {% set tl = (r.urgency or '-') %}
+            <span class="px-2 py-0.5 rounded text-xs
+              {% if tl == 'critical' or tl == 'rush' %} bg-red-500/20 border border-red-500/30 text-red-200
+              {% elif tl == 'soon' %} bg-yellow-500/20 border border-yellow-500/30 text-yellow-200
+              {% else %} bg-emerald-500/20 border border-emerald-500/30 text-emerald-200
+              {% endif %}
+            ">{{ tl }}</span>
+          </td>
+          <td class="p-3">{{ r.features or '-' }}</td>
+          <td class="p-3">{{ r.budget_range or '-' }}</td>
+          <td class="p-3">{{ r.est_hours }}</td>
+          <td class="p-3">${{ '%.2f'|format(r.est_cost or 0) }}</td>
+          <td class="p-3">
+            <button class="btn" type="button"
+              data-notes="{{ (r.description or '') | e }}"
+              data-json='{{ (r.json_payload or "{}") | e }}'
+              data-meta='{{ (r.name ~ " • " ~ (r.email or "") ~ " • #" ~ r.id) | e }}'
+              onclick="openNotes(this)">
+              View notes
+            </button>
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Modal -->
+  <dialog id="notesModal" class="backdrop:bg-black/70 rounded-xl w-[min(90vw,720px)]">
+    <form method="dialog" class="glass card p-0 overflow-hidden">
+      <header class="flex items-center justify-between px-5 py-3 border-b border-white/10">
+        <h2 id="modalTitle" class="font-semibold">Notes</h2>
+        <button class="btn" value="close">Close</button>
+      </header>
+      <div class="p-5 space-y-5">
+        <section>
+          <h3 class="text-sm font-semibold text-white/70 mb-2">Client notes</h3>
+          <pre id="notesText" class="whitespace-pre-wrap text-sm bg-black/40 p-3 rounded border border-white/10"></pre>
+        </section>
+        <section>
+          <h3 class="text-sm font-semibold text-white/70 mb-2">Raw submission (JSON)</h3>
+          <pre id="jsonText" class="overflow-auto text-xs bg-black/40 p-3 rounded border border-white/10 max-h-64"></pre>
+        </section>
+      </div>
+      <footer class="px-5 py-3 border-t border-white/10 text-right">
+        <button class="btn bg-accent font-semibold" value="close">Done</button>
+      </footer>
+    </form>
+  </dialog>
+</section>
+
+<script>
+  function openNotes(btn) {
+    const modal = document.getElementById('notesModal');
+    const notes = btn.getAttribute('data-notes') || '';
+    const raw = btn.getAttribute('data-json') || '{}';
+    const meta = btn.getAttribute('data-meta') || 'Notes';
+    document.getElementById('modalTitle').textContent = meta;
+    document.getElementById('notesText').textContent = notes.trim() || '—';
+    try {
+      const obj = JSON.parse(raw);
+      document.getElementById('jsonText').textContent = JSON.stringify(obj, null, 2);
+    } catch {
+      document.getElementById('jsonText').textContent = raw;
+    }
+    modal.showModal();
+  }
+
+  // simple in-table filter
+  function filterRows(q) {
+    q = (q || '').toLowerCase();
+    document.querySelectorAll('#reqBody tr').forEach(tr => {
+      const text = tr.innerText.toLowerCase();
+      tr.style.display = text.includes(q) ? '' : 'none';
+    });
+  }
+</script>
+{% endblock %}
+