From 132f4106b419f87d3a07b403d89122f3e70f757b Mon Sep 17 00:00:00 2001
From: NguyenND <ngodanguyen@gmail.com>
Date: Wed, 24 Jun 2026 13:41:23 -0400
Subject: [PATCH] Jun 24 - Implement function to view history broadcast
 messages

---
 app/templates/admin/broadcast.html | 59 ++++++++++++++++++++++++++++--
 1 file changed, 56 insertions(+), 3 deletions(-)

diff --git a/app/templates/admin/broadcast.html b/app/templates/admin/broadcast.html
index 7b7ac7d..ad9114f 100644
--- a/app/templates/admin/broadcast.html
+++ b/app/templates/admin/broadcast.html
@@ -109,7 +109,16 @@
                         </thead>
                         <tbody>
                             {% for b in history %}
-                            <tr>
+                            <tr style="cursor:pointer;"
+                                onclick="showBroadcast(
+                                    {{ b.id }},
+                                    {{ b.title | tojson }},
+                                    {{ b.body | tojson }},
+                                    {{ b.sent_at.strftime('%b %-d, %Y %I:%M %p') | tojson }},
+                                    {{ (b.sent_by.display_name if b.sent_by else '—') | tojson }},
+                                    {{ b.recipient_count }},
+                                    {{ b.target_roles | tojson }}
+                                )">
                                 <td class="text-nowrap text-muted small">
                                     {{ b.sent_at.strftime('%b %-d, %Y') }}<br>
                                     <span class="text-muted" style="font-size:.75rem;">
@@ -118,8 +127,7 @@
                                 </td>
                                 <td>
                                     <div class="fw-semibold">{{ b.title }}</div>
-                                    <div class="text-muted small text-truncate" style="max-width:220px;"
-                                         title="{{ b.body }}">{{ b.body }}</div>
+                                    <div class="text-muted small text-truncate" style="max-width:220px;">{{ b.body }}</div>
                                 </td>
                                 <td>
                                     {% for role in b.target_roles %}
@@ -153,7 +161,52 @@
 
 </div><!-- /row -->
 
+{# ── Broadcast Detail Modal ──────────────────────────────────────────────── #}
+<div class="modal fade" id="broadcastDetailModal" tabindex="-1" aria-labelledby="broadcastDetailTitle" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header bg-primary text-white">
+                <h5 class="modal-title" id="broadcastDetailTitle">
+                    <i class="bi bi-megaphone-fill me-2"></i><span id="bdTitle"></span>
+                </h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <p id="bdBody" class="mb-3" style="white-space:pre-wrap;"></p>
+                <hr>
+                <dl class="row mb-0 small text-muted">
+                    <dt class="col-sm-4">Sent</dt>
+                    <dd class="col-sm-8" id="bdSentAt"></dd>
+                    <dt class="col-sm-4">By</dt>
+                    <dd class="col-sm-8" id="bdSentBy"></dd>
+                    <dt class="col-sm-4">Recipients</dt>
+                    <dd class="col-sm-8" id="bdRecipients"></dd>
+                    <dt class="col-sm-4">Roles</dt>
+                    <dd class="col-sm-8" id="bdRoles"></dd>
+                </dl>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <script>
+var ROLE_LABELS = {{ role_labels | tojson }};
+
+function showBroadcast(id, title, body, sentAt, sentBy, recipientCount, roles) {
+    document.getElementById('bdTitle').textContent      = title;
+    document.getElementById('bdBody').textContent       = body;
+    document.getElementById('bdSentAt').textContent     = sentAt;
+    document.getElementById('bdSentBy').textContent     = sentBy;
+    document.getElementById('bdRecipients').textContent = recipientCount + ' user(s)';
+    document.getElementById('bdRoles').textContent      = roles.map(function(r) {
+        return ROLE_LABELS[r] || r;
+    }).join(', ');
+    new bootstrap.Modal(document.getElementById('broadcastDetailModal')).show();
+}
+
 (function () {
     var textarea = document.getElementById('body');
     var counter  = document.getElementById('bodyCounter');