Upload producer_emails.html

app/templates/admin/producer_emails.html

@@ -0,0 +1,172 @@
+{% extends "base.html" %}
+
+{% block title %}Producer Emails — Admin{% endblock %}
+
+{% block content %}
+<div class="space-y-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <h1 class="text-2xl font-bold sw-blue-text">Producer Email Addresses</h1>
+            <p class="text-gray-500 text-sm mt-1">
+                Assign email addresses to producers so they receive approval requests when listed on a submission.
+            </p>
+        </div>
+        <a href="/admin/?token={{ token }}" class="text-sm text-gray-400 hover:text-gray-600">&larr; Back to Admin</a>
+    </div>
+
+    <!-- Search -->
+    <div class="bg-white rounded-lg shadow p-4">
+        <input type="text" id="searchBox" placeholder="Search by name or code…"
+               oninput="filterProducers()"
+               class="w-full border border-gray-200 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
+        <div class="flex items-center justify-between mt-3 text-xs text-gray-400">
+            <span id="countLabel">{{ producers | length }} producers</span>
+            <span>
+                <span class="inline-block w-3 h-3 rounded-full bg-green-400 mr-1"></span> Has email
+                <span class="inline-block w-3 h-3 rounded-full bg-gray-300 ml-3 mr-1"></span> No email
+            </span>
+        </div>
+    </div>
+
+    <!-- Producer list -->
+    <div class="bg-white rounded-lg shadow overflow-hidden">
+        <table class="w-full text-sm">
+            <thead>
+                <tr class="sw-blue text-white text-left">
+                    <th class="px-4 py-3 w-[5%]">#</th>
+                    <th class="px-4 py-3 w-[15%]">Code</th>
+                    <th class="px-4 py-3 w-[25%]">Name</th>
+                    <th class="px-4 py-3 w-[35%]">Email Address</th>
+                    <th class="px-4 py-3 w-[20%] text-center">Action</th>
+                </tr>
+            </thead>
+            <tbody id="producerTable">
+                {% for p in producers %}
+                <tr class="border-b hover:bg-gray-50 producer-row" data-id="{{ p.id }}" data-search="{{ p.name|lower }} {{ p.code|lower }}">
+                    <td class="px-4 py-3 text-gray-400">{{ loop.index }}</td>
+                    <td class="px-4 py-3 font-mono text-xs">
+                        <span class="inline-block w-2 h-2 rounded-full mr-2 {{ 'bg-green-400' if p.email else 'bg-gray-300' }}"></span>
+                        {{ p.code }}
+                    </td>
+                    <td class="px-4 py-3 font-semibold sw-blue-text">{{ p.name }}</td>
+                    <td class="px-4 py-3">
+                        <input type="email" id="email_{{ p.id }}"
+                               value="{{ p.email or '' }}"
+                               placeholder="name@snellingswalters.com"
+                               class="w-full border border-gray-200 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 {{ 'bg-green-50 border-green-200' if p.email else '' }}">
+                    </td>
+                    <td class="px-4 py-3 text-center">
+                        <button onclick="saveEmail({{ p.id }})"
+                                class="bg-blue-600 text-white px-4 py-1.5 rounded text-xs font-semibold hover:bg-blue-700 transition">
+                            Save
+                        </button>
+                        {% if p.email %}
+                        <button onclick="clearEmail({{ p.id }})"
+                                class="text-red-400 hover:text-red-600 text-xs ml-2 transition">
+                            Clear
+                        </button>
+                        {% endif %}
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Bulk paste -->
+    <div class="bg-white rounded-lg shadow p-5">
+        <h3 class="font-semibold sw-blue-text mb-2">Bulk Import</h3>
+        <p class="text-gray-400 text-xs mb-3">Paste CSV lines: <code>PRODUCER_CODE,email@example.com</code> (one per line)</p>
+        <textarea id="bulkInput" rows="4" placeholder="KOPAL1,akops@snellingswalters.com&#10;SNEBL1,bsnellings@snellingswalters.com"
+                  class="w-full border border-gray-200 rounded-lg px-4 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-400"></textarea>
+        <button onclick="bulkImport()"
+                class="mt-2 bg-green-600 text-white px-6 py-2 rounded-lg text-sm font-semibold hover:bg-green-700 transition">
+            Import All
+        </button>
+        <span id="bulkResult" class="ml-3 text-sm text-gray-500"></span>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+const authToken = '{{ token }}';
+
+function filterProducers() {
+    const q = document.getElementById('searchBox').value.toLowerCase();
+    const rows = document.querySelectorAll('.producer-row');
+    let visible = 0;
+    rows.forEach(r => {
+        const match = r.dataset.search.includes(q);
+        r.style.display = match ? '' : 'none';
+        if (match) visible++;
+    });
+    document.getElementById('countLabel').textContent = visible + ' producers shown';
+}
+
+async function saveEmail(producerId) {
+    const input = document.getElementById('email_' + producerId);
+    const email = input.value.trim();
+
+    try {
+        const resp = await fetch('/admin/api/producers/' + producerId + '/email', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken},
+            body: JSON.stringify({ email: email }),
+        });
+        const data = await resp.json();
+        if (data.success) {
+            input.className = input.className.replace('bg-green-50 border-green-200', '').trim();
+            if (email) {
+                input.className += ' bg-green-50 border-green-200';
+            }
+            // Flash green
+            input.style.outline = '2px solid #27ae60';
+            setTimeout(() => { input.style.outline = ''; }, 1000);
+        } else {
+            alert('Error: ' + (data.error || 'Unknown'));
+        }
+    } catch (e) {
+        alert('Save failed: ' + e.message);
+    }
+}
+
+async function clearEmail(producerId) {
+    const input = document.getElementById('email_' + producerId);
+    input.value = '';
+    await saveEmail(producerId);
+}
+
+async function bulkImport() {
+    const text = document.getElementById('bulkInput').value.trim();
+    if (!text) return;
+
+    const lines = text.split('\n').filter(l => l.trim());
+    let success = 0, failed = 0;
+
+    for (const line of lines) {
+        const parts = line.split(',').map(s => s.trim());
+        if (parts.length < 2) { failed++; continue; }
+
+        try {
+            const resp = await fetch('/admin/api/producers/email-by-code', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken},
+                body: JSON.stringify({ code: parts[0], email: parts[1] }),
+            });
+            const data = await resp.json();
+            if (data.success) success++;
+            else failed++;
+        } catch (e) { failed++; }
+    }
+
+    document.getElementById('bulkResult').textContent =
+        '✅ ' + success + ' saved, ' + (failed > 0 ? '❌ ' + failed + ' failed' : 'all good!');
+
+    // Reload to reflect changes
+    if (success > 0) {
+        setTimeout(() => location.reload(), 1500);
+    }
+}
+</script>
+{% endblock %}