| {% extends "shared/base.html" %} |
|
|
| {% block title %}Bug Reports Admin - AniCove{% endblock %} |
| {% block meta_description %}Admin panel for managing bug reports.{% endblock %} |
|
|
| {% block extra_css %} |
| <style> |
| :root { |
| --abg-bg: #080808; |
| --abg-surface: #111; |
| --abg-border: #1e1e1e; |
| --abg-text: #e0e0e0; |
| --abg-muted: #777; |
| --abg-accent: #3b82f6; |
| --abg-success: #22c55e; |
| --abg-warning: #f59e0b; |
| --abg-error: #ef4444; |
| } |
| |
| .abg-page { |
| max-width: 1100px; |
| margin: 0 auto; |
| padding: 32px 20px; |
| } |
| |
| .abg-header { |
| margin-bottom: 28px; |
| } |
| |
| .abg-header h1 { |
| font-size: 1.5rem; |
| font-weight: 700; |
| margin: 0 0 4px 0; |
| color: #fff; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
| |
| .abg-header p { |
| font-size: 0.85rem; |
| color: var(--abg-muted); |
| margin: 0; |
| } |
| |
| |
| .abg-stats { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); |
| gap: 10px; |
| margin-bottom: 24px; |
| } |
| |
| .abg-stat-card { |
| background: var(--abg-surface); |
| border: 1px solid var(--abg-border); |
| border-radius: 10px; |
| padding: 14px 16px; |
| text-align: center; |
| } |
| |
| .abg-stat-num { |
| font-size: 1.6rem; |
| font-weight: 700; |
| color: #fff; |
| line-height: 1.2; |
| } |
| |
| .abg-stat-label { |
| font-size: 0.7rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| color: var(--abg-muted); |
| margin-top: 2px; |
| } |
| |
| |
| .abg-filters { |
| display: flex; |
| gap: 8px; |
| margin-bottom: 18px; |
| flex-wrap: wrap; |
| align-items: center; |
| } |
| |
| .abg-filter-btn { |
| padding: 6px 16px; |
| border-radius: 999px; |
| border: 1px solid var(--abg-border); |
| background: transparent; |
| color: #999; |
| font-size: 0.8rem; |
| font-weight: 500; |
| cursor: pointer; |
| transition: all 0.2s; |
| font-family: inherit; |
| } |
| |
| .abg-filter-btn:hover { |
| border-color: rgba(255,255,255,0.15); |
| color: #ddd; |
| } |
| |
| .abg-filter-btn.active { |
| border-color: var(--abg-accent); |
| background: rgba(59,130,246,0.12); |
| color: var(--abg-accent); |
| } |
| |
| .abg-filter-btn[data-status="open"].active { |
| border-color: #ef4444; |
| background: rgba(239,68,68,0.12); |
| color: #ef4444; |
| } |
| |
| .abg-filter-btn[data-status="resolved"].active { |
| border-color: #22c55e; |
| background: rgba(34,197,94,0.12); |
| color: #22c55e; |
| } |
| |
| |
| .abg-broadcast-bar { |
| display: none; |
| background: rgba(59,130,246,0.08); |
| border: 1px solid rgba(59,130,246,0.2); |
| border-radius: 10px; |
| padding: 12px 16px; |
| margin-bottom: 16px; |
| align-items: center; |
| gap: 12px; |
| flex-wrap: wrap; |
| } |
| |
| .abg-broadcast-bar.visible { |
| display: flex; |
| } |
| |
| .abg-broadcast-count { |
| font-size: 0.82rem; |
| color: var(--abg-accent); |
| font-weight: 600; |
| white-space: nowrap; |
| } |
| |
| .abg-broadcast-input { |
| flex: 1; |
| min-width: 200px; |
| padding: 8px 12px; |
| background: rgba(0,0,0,0.3); |
| border: 1px solid var(--abg-border); |
| border-radius: 8px; |
| color: #fff; |
| font-size: 0.85rem; |
| font-family: inherit; |
| } |
| |
| .abg-broadcast-input:focus { |
| outline: none; |
| border-color: var(--abg-accent); |
| } |
| |
| .abg-broadcast-btn { |
| padding: 8px 18px; |
| background: var(--abg-accent); |
| color: #fff; |
| border: none; |
| border-radius: 8px; |
| font-size: 0.82rem; |
| font-weight: 600; |
| cursor: pointer; |
| font-family: inherit; |
| transition: background 0.2s; |
| white-space: nowrap; |
| } |
| |
| .abg-broadcast-btn:hover { |
| background: #2563eb; |
| } |
| |
| .abg-broadcast-cancel { |
| padding: 8px 14px; |
| background: transparent; |
| color: #999; |
| border: 1px solid var(--abg-border); |
| border-radius: 8px; |
| font-size: 0.82rem; |
| cursor: pointer; |
| font-family: inherit; |
| transition: color 0.2s; |
| } |
| |
| .abg-broadcast-cancel:hover { |
| color: #fff; |
| } |
| |
| |
| .abg-report-list { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
| |
| .abg-report { |
| background: var(--abg-surface); |
| border: 1px solid var(--abg-border); |
| border-radius: 10px; |
| padding: 16px 18px; |
| transition: border-color 0.2s; |
| } |
| |
| .abg-report:hover { |
| border-color: rgba(255,255,255,0.08); |
| } |
| |
| .abg-report-header { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 12px; |
| margin-bottom: 8px; |
| } |
| |
| .abg-report-title-area { |
| flex: 1; |
| min-width: 0; |
| } |
| |
| .abg-report-title { |
| font-size: 0.92rem; |
| font-weight: 600; |
| color: #ddd; |
| margin-bottom: 2px; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| flex-wrap: wrap; |
| } |
| |
| .abg-report-category { |
| font-size: 0.65rem; |
| font-weight: 600; |
| padding: 1px 8px; |
| border-radius: 999px; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| } |
| |
| .abg-report-category.bug { |
| background: rgba(239,68,68,0.12); |
| color: #ef4444; |
| } |
| |
| .abg-report-category.feature { |
| background: rgba(34,197,94,0.12); |
| color: #22c55e; |
| } |
| |
| .abg-report-category.other { |
| background: rgba(245,158,11,0.12); |
| color: #f59e0b; |
| } |
| |
| .abg-report-author { |
| font-size: 0.75rem; |
| color: #555; |
| margin-top: 2px; |
| } |
| |
| .abg-report-actions { |
| display: flex; |
| gap: 6px; |
| flex-shrink: 0; |
| align-items: center; |
| } |
| |
| .abg-report-checkbox { |
| width: 18px; |
| height: 18px; |
| accent-color: var(--abg-accent); |
| cursor: pointer; |
| } |
| |
| .abg-report-body { |
| font-size: 0.83rem; |
| color: #999; |
| line-height: 1.6; |
| margin-bottom: 10px; |
| white-space: pre-wrap; |
| } |
| |
| .abg-report-meta { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| flex-wrap: wrap; |
| margin-bottom: 10px; |
| } |
| |
| .abg-status-select { |
| padding: 4px 10px; |
| border-radius: 6px; |
| border: 1px solid var(--abg-border); |
| background: rgba(0,0,0,0.3); |
| color: #ccc; |
| font-size: 0.78rem; |
| font-family: inherit; |
| cursor: pointer; |
| } |
| |
| .abg-status-select:focus { |
| outline: none; |
| border-color: var(--abg-accent); |
| } |
| |
| .abg-report-date { |
| font-size: 0.72rem; |
| color: #555; |
| } |
| |
| .abg-report-page-url { |
| font-size: 0.72rem; |
| color: #555; |
| background: rgba(255,255,255,0.03); |
| padding: 1px 6px; |
| border-radius: 4px; |
| } |
| |
| |
| .abg-replies { |
| margin-top: 10px; |
| padding-top: 10px; |
| border-top: 1px solid rgba(255,255,255,0.04); |
| } |
| |
| .abg-reply { |
| background: rgba(59,130,246,0.06); |
| border: 1px solid rgba(59,130,246,0.12); |
| border-radius: 8px; |
| padding: 10px 14px; |
| margin-bottom: 8px; |
| } |
| |
| .abg-reply:last-child { |
| margin-bottom: 0; |
| } |
| |
| .abg-reply-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-bottom: 4px; |
| font-size: 0.72rem; |
| color: #555; |
| } |
| |
| .abg-reply-badge { |
| font-size: 0.65rem; |
| font-weight: 600; |
| padding: 1px 6px; |
| border-radius: 4px; |
| background: rgba(59,130,246,0.15); |
| color: var(--abg-accent); |
| text-transform: uppercase; |
| } |
| |
| .abg-reply-badge.broadcast { |
| background: rgba(245,158,11,0.15); |
| color: #f59e0b; |
| } |
| |
| .abg-reply-body { |
| font-size: 0.83rem; |
| color: #bbb; |
| line-height: 1.5; |
| } |
| |
| |
| .abg-reply-form { |
| display: flex; |
| gap: 8px; |
| margin-top: 10px; |
| align-items: flex-end; |
| } |
| |
| .abg-reply-input { |
| flex: 1; |
| padding: 8px 12px; |
| background: rgba(0,0,0,0.3); |
| border: 1px solid var(--abg-border); |
| border-radius: 8px; |
| color: #fff; |
| font-size: 0.83rem; |
| font-family: inherit; |
| resize: vertical; |
| min-height: 36px; |
| } |
| |
| .abg-reply-input:focus { |
| outline: none; |
| border-color: var(--abg-accent); |
| } |
| |
| .abg-reply-send { |
| padding: 8px 14px; |
| background: var(--abg-accent); |
| color: #fff; |
| border: none; |
| border-radius: 8px; |
| font-size: 0.82rem; |
| font-weight: 600; |
| cursor: pointer; |
| font-family: inherit; |
| white-space: nowrap; |
| transition: background 0.2s; |
| } |
| |
| .abg-reply-send:hover { |
| background: #2563eb; |
| } |
| |
| |
| .abg-pagination { |
| display: flex; |
| justify-content: center; |
| gap: 8px; |
| margin-top: 24px; |
| } |
| |
| .abg-page-btn { |
| padding: 6px 14px; |
| border-radius: 8px; |
| border: 1px solid var(--abg-border); |
| background: transparent; |
| color: #999; |
| font-size: 0.82rem; |
| cursor: pointer; |
| font-family: inherit; |
| transition: all 0.2s; |
| } |
| |
| .abg-page-btn:hover { |
| border-color: rgba(255,255,255,0.15); |
| color: #fff; |
| } |
| |
| .abg-page-btn:disabled { |
| opacity: 0.4; |
| cursor: not-allowed; |
| } |
| |
| |
| .abg-toast { |
| position: fixed; |
| bottom: 24px; |
| right: 24px; |
| background: var(--abg-surface); |
| border: 1px solid var(--abg-border); |
| border-radius: 10px; |
| padding: 12px 20px; |
| color: #bbb; |
| font-size: 0.85rem; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.5); |
| z-index: 9999; |
| transform: translateY(20px); |
| opacity: 0; |
| transition: all 0.3s; |
| pointer-events: none; |
| } |
| |
| .abg-toast.visible { |
| transform: translateY(0); |
| opacity: 1; |
| } |
| |
| @media (max-width: 600px) { |
| .abg-page { padding: 20px 14px; } |
| .abg-report-header { flex-direction: column; } |
| .abg-report-actions { align-self: flex-end; } |
| } |
| </style> |
| {% endblock %} |
|
|
| {% block content %} <div class="abg-page"> |
| <a href="/admin" style="display:inline-flex;align-items:center;gap:5px;font-size:0.78rem;color:#555;text-decoration:none;margin-bottom:14px;transition:color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#555'"> |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg> |
| Back to Dashboard |
| </a> |
| <div class="abg-header"> |
| <h1> |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--abg-error);"> |
| <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path> |
| <line x1="4" y1="22" x2="4" y2="15"></line> |
| </svg> |
| Bug Reports |
| <span style="font-size: 0.75rem; font-weight: 400; color: #555;">Admin Panel</span> |
| </h1> |
| <p>Manage, reply to, and track bug reports from users.</p> |
| </div> |
|
|
| |
| <div class="abg-stats" id="abg-stats"> |
| <div class="abg-stat-card"> |
| <div class="abg-stat-num" id="stat-total">-</div> |
| <div class="abg-stat-label">Total</div> |
| </div> |
| <div class="abg-stat-card"> |
| <div class="abg-stat-num" id="stat-open" style="color:#ef4444;">-</div> |
| <div class="abg-stat-label">Open</div> |
| </div> |
| <div class="abg-stat-card"> |
| <div class="abg-stat-num" id="stat-progress" style="color:#3b82f6;">-</div> |
| <div class="abg-stat-label">In Progress</div> |
| </div> |
| <div class="abg-stat-card"> |
| <div class="abg-stat-num" id="stat-resolved" style="color:#22c55e;">-</div> |
| <div class="abg-stat-label">Resolved</div> |
| </div> |
| </div> |
|
|
| |
| <div class="abg-filters"> |
| <button class="abg-filter-btn active" data-status="" onclick="filterReports(this, '')">All</button> |
| <button class="abg-filter-btn" data-status="open" onclick="filterReports(this, 'open')">🐛 Open</button> |
| <button class="abg-filter-btn" data-status="in_progress" onclick="filterReports(this, 'in_progress')">🔧 In Progress</button> |
| <button class="abg-filter-btn" data-status="resolved" onclick="filterReports(this, 'resolved')">✅ Resolved</button> |
| <button class="abg-filter-btn" data-status="closed" onclick="filterReports(this, 'closed')">📁 Closed</button> |
| </div> |
|
|
| |
| <div class="abg-broadcast-bar" id="abg-broadcast-bar"> |
| <span class="abg-broadcast-count" id="abg-broadcast-count">0 selected</span> |
| <textarea class="abg-broadcast-input" id="abg-broadcast-input" placeholder="Write a reply to send to all selected reports..." rows="1"></textarea> |
| <button class="abg-broadcast-btn" onclick="sendBroadcastReply()">Send to All</button> |
| <button class="abg-broadcast-cancel" onclick="clearSelection()">Cancel</button> |
| </div> |
|
|
| |
| <div class="abg-report-list" id="abg-report-list"> |
| <div style="text-align:center;padding:40px;color:#555;"> |
| <div class="bug-spinner" style="display:inline-block;width:24px;height:24px;border:2px solid rgba(255,255,255,0.1);border-top-color:#3b82f6;border-radius:50%;animation:bugSpin 0.6s linear infinite;margin-bottom:10px;"></div> |
| <div>Loading reports...</div> |
| </div> |
| </div> |
|
|
| |
| <div class="abg-pagination" id="abg-pagination" style="display:none;"></div> |
| </div> |
|
|
| <style> |
| @keyframes bugSpin { to { transform: rotate(360deg); } } |
| </style> |
| {% endblock %} |
|
|
| {% block extra_js %} |
| <script> |
| let currentFilter = ''; |
| let currentPage = 1; |
| let selectedReports = new Set(); |
| |
| function showToast(msg) { |
| let el = document.getElementById('abg-toast'); |
| if (!el) { |
| el = document.createElement('div'); |
| el.id = 'abg-toast'; |
| el.className = 'abg-toast'; |
| document.body.appendChild(el); |
| } |
| el.textContent = msg; |
| el.classList.add('visible'); |
| setTimeout(() => el.classList.remove('visible'), 3000); |
| } |
| |
| async function loadStats() { |
| try { |
| const res = await fetch('/api/bug-reports/admin/stats'); |
| const data = await res.json(); |
| if (data.success) { |
| document.getElementById('stat-total').textContent = data.stats.total; |
| document.getElementById('stat-open').textContent = data.stats.open; |
| document.getElementById('stat-progress').textContent = data.stats.in_progress; |
| document.getElementById('stat-resolved').textContent = data.stats.resolved; |
| } |
| } catch (e) {} |
| } |
| |
| function filterReports(btn, status) { |
| document.querySelectorAll('.abg-filter-btn').forEach(b => b.classList.remove('active')); |
| btn.classList.add('active'); |
| currentFilter = status; |
| currentPage = 1; |
| selectedReports.clear(); |
| updateBroadcastBar(); |
| loadReports(); |
| } |
| |
| function toggleSelectReport(id, checkbox) { |
| if (checkbox.checked) { |
| selectedReports.add(id); |
| } else { |
| selectedReports.delete(id); |
| } |
| updateBroadcastBar(); |
| } |
| |
| function updateBroadcastBar() { |
| const bar = document.getElementById('abg-broadcast-bar'); |
| const count = selectedReports.size; |
| document.getElementById('abg-broadcast-count').textContent = count + ' selected'; |
| if (count > 0) { |
| bar.classList.add('visible'); |
| } else { |
| bar.classList.remove('visible'); |
| } |
| } |
| |
| function clearSelection() { |
| selectedReports.clear(); |
| document.querySelectorAll('.abg-report-checkbox').forEach(cb => cb.checked = false); |
| document.getElementById('abg-broadcast-input').value = ''; |
| updateBroadcastBar(); |
| } |
| |
| async function sendBroadcastReply() { |
| const body = document.getElementById('abg-broadcast-input').value.trim(); |
| if (!body) { |
| showToast('Please write a reply message.'); |
| return; |
| } |
| if (selectedReports.size === 0) { |
| showToast('No reports selected.'); |
| return; |
| } |
| |
| const ids = Array.from(selectedReports); |
| try { |
| const res = await fetch('/api/bug-reports/broadcast-reply', { |
| method: 'POST', |
| headers: {'Content-Type': 'application/json'}, |
| body: JSON.stringify({ report_ids: ids, body }), |
| }); |
| const data = await res.json(); |
| if (data.success) { |
| showToast(`Reply sent to ${data.replied_to} report(s)!`); |
| clearSelection(); |
| loadReports(); |
| loadStats(); |
| } else { |
| showToast(data.message || 'Failed to send.'); |
| } |
| } catch (e) { |
| showToast('Network error.'); |
| } |
| } |
| |
| async function sendIndividualReply(reportId) { |
| const input = document.getElementById('reply-input-' + reportId); |
| const body = input.value.trim(); |
| if (!body) return; |
| |
| try { |
| const res = await fetch(`/api/bug-reports/${reportId}/reply`, { |
| method: 'POST', |
| headers: {'Content-Type': 'application/json'}, |
| body: JSON.stringify({ body }), |
| }); |
| const data = await res.json(); |
| if (data.success) { |
| input.value = ''; |
| showToast('Reply sent!'); |
| loadReports(); |
| loadStats(); |
| } else { |
| showToast(data.message || 'Failed to send.'); |
| } |
| } catch (e) { |
| showToast('Network error.'); |
| } |
| } |
| |
| async function updateStatus(reportId, newStatus) { |
| try { |
| const res = await fetch(`/api/bug-reports/${reportId}/status`, { |
| method: 'PATCH', |
| headers: {'Content-Type': 'application/json'}, |
| body: JSON.stringify({ status: newStatus }), |
| }); |
| const data = await res.json(); |
| if (data.success) { |
| showToast('Status updated!'); |
| loadReports(); |
| loadStats(); |
| } |
| } catch (e) {} |
| } |
| |
| async function loadReports() { |
| const listEl = document.getElementById('abg-report-list'); |
| listEl.innerHTML = '<div style="text-align:center;padding:40px;color:#555;"><div class="bug-spinner" style="display:inline-block;width:24px;height:24px;border:2px solid rgba(255,255,255,0.1);border-top-color:#3b82f6;border-radius:50%;animation:bugSpin 0.6s linear infinite;margin-bottom:10px;"></div><div>Loading...</div></div>'; |
| |
| try { |
| let url = `/api/bug-reports/admin/list?page=${currentPage}`; |
| if (currentFilter) url += `&status=${currentFilter}`; |
| const res = await fetch(url); |
| const data = await res.json(); |
| |
| if (!data.success) { |
| listEl.innerHTML = '<div style="text-align:center;padding:40px;color:var(--abg-error);">Failed to load reports.</div>'; |
| return; |
| } |
| |
| if (data.reports.length === 0) { |
| listEl.innerHTML = '<div style="text-align:center;padding:60px 20px;"><div style="font-size:2.5rem;margin-bottom:10px;opacity:0.5;">📭</div><div style="color:#555;">No reports found.</div></div>'; |
| document.getElementById('abg-pagination').style.display = 'none'; |
| return; |
| } |
| |
| listEl.innerHTML = data.reports.map(r => { |
| const statusLabels = { open: 'Open', in_progress: 'In Progress', resolved: 'Resolved', closed: 'Closed' }; |
| const date = r.created_at ? new Date(r.created_at).toLocaleDateString() : ''; |
| const isSelected = selectedReports.has(r._id); |
| |
| let repliesHtml = ''; |
| const allMessages = []; |
| (r.admin_replies || []).forEach(rep => allMessages.push({ ...rep, type: 'admin' })); |
| (r.user_replies || []).forEach(rep => allMessages.push({ ...rep, type: 'user' })); |
| allMessages.sort((a, b) => (a.created_at || '').localeCompare(b.created_at || '')); |
| |
| if (allMessages.length > 0) { |
| repliesHtml = '<div class="abg-replies">' + allMessages.map(msg => { |
| const repDate = msg.created_at ? new Date(msg.created_at).toLocaleString() : ''; |
| if (msg.type === 'admin') { |
| return ` |
| <div class="abg-reply"> |
| <div class="abg-reply-header"> |
| <span>Admin ${repDate}</span> |
| ${msg.is_broadcast ? '<span class="abg-reply-badge broadcast">Broadcast</span>' : '<span class="abg-reply-badge">Direct</span>'} |
| </div> |
| <div class="abg-reply-body">${msg.body}</div> |
| </div> |
| `; |
| } else { |
| return ` |
| <div class="abg-reply" style="border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.03);"> |
| <div class="abg-reply-header"> |
| <span>${r.author} (user) ${repDate}</span> |
| <span class="abg-reply-badge" style="background: rgba(255,255,255,0.08); color: #999;">User Reply</span> |
| </div> |
| <div class="abg-reply-body">${msg.body}</div> |
| </div> |
| `; |
| } |
| }).join('') + '</div>'; |
| } |
| |
| return ` |
| <div class="abg-report"> |
| <div class="abg-report-header"> |
| <div class="abg-report-title-area"> |
| <div class="abg-report-title"> |
| ${r.title} |
| <span class="abg-report-category ${r.category}">${r.category}</span> |
| </div> |
| <div class="abg-report-author">by ${r.author}</div> |
| </div> |
| <div class="abg-report-actions"> |
| <input type="checkbox" class="abg-report-checkbox" ${isSelected ? 'checked' : ''} onchange="toggleSelectReport('${r._id}', this)" title="Select for broadcast reply"> |
| </div> |
| </div> |
| <div class="abg-report-body">${r.body}</div> |
| <div class="abg-report-meta"> |
| <select class="abg-status-select" onchange="updateStatus('${r._id}', this.value)"> |
| <option value="open" ${r.status === 'open' ? 'selected' : ''}>🟢 Open</option> |
| <option value="in_progress" ${r.status === 'in_progress' ? 'selected' : ''}>🔧 In Progress</option> |
| <option value="resolved" ${r.status === 'resolved' ? 'selected' : ''}>✅ Resolved</option> |
| <option value="closed" ${r.status === 'closed' ? 'selected' : ''}>📁 Closed</option> |
| </select> |
| <span class="abg-report-date">${date}</span> |
| ${r.page_url ? `<span class="abg-report-page-url">📍 ${r.page_url}</span>` : ''} |
| </div> |
| ${repliesHtml} |
| <div class="abg-reply-form"> |
| <textarea class="abg-reply-input" id="reply-input-${r._id}" placeholder="Write a reply..." rows="1"></textarea> |
| <button class="abg-reply-send" onclick="sendIndividualReply('${r._id}')">Reply</button> |
| </div> |
| </div> |
| `; |
| }).join(''); |
| |
| |
| const pagEl = document.getElementById('abg-pagination'); |
| const totalPages = Math.ceil(data.total / 30); |
| if (totalPages <= 1) { |
| pagEl.style.display = 'none'; |
| } else { |
| pagEl.style.display = 'flex'; |
| let pagHtml = ''; |
| pagHtml += `<button class="abg-page-btn" onclick="goToPage(${currentPage - 1})" ${currentPage <= 1 ? 'disabled' : ''}>Previous</button>`; |
| pagHtml += `<span style="color:#555;font-size:0.82rem;align-self:center;">Page ${currentPage} of ${totalPages}</span>`; |
| pagHtml += `<button class="abg-page-btn" onclick="goToPage(${currentPage + 1})" ${currentPage >= totalPages ? 'disabled' : ''}>Next</button>`; |
| pagEl.innerHTML = pagHtml; |
| } |
| |
| } catch (e) { |
| document.getElementById('abg-report-list').innerHTML = '<div style="text-align:center;padding:40px;color:var(--abg-error);">Error loading reports.</div>'; |
| } |
| } |
| |
| function goToPage(page) { |
| currentPage = page; |
| loadReports(); |
| } |
| |
| loadStats(); |
| loadReports(); |
| </script> |
| {% endblock %} |
|
|
