120 lines
4.7 KiB
HTML
120 lines
4.7 KiB
HTML
{% 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 %}
|
|
|