From c5f9b830ebfcdc0e53f718a34ef626e28a58c8a2 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 29 Dec 2025 11:18:10 +0000
Subject: [PATCH] Refactor submitted candidates display to use a table format
 with action buttons and add submission count

---
 .../partials/exam_cids_submitted_list.html    | 50 ++++++++++++++++---
 1 file changed, 42 insertions(+), 8 deletions(-)

diff --git a/generic/templates/generic/partials/exam_cids_submitted_list.html b/generic/templates/generic/partials/exam_cids_submitted_list.html
index 2d676f0f..07d50b95 100644
--- a/generic/templates/generic/partials/exam_cids_submitted_list.html
+++ b/generic/templates/generic/partials/exam_cids_submitted_list.html
@@ -2,15 +2,49 @@
 {% if user_exam_data %}
     <div class="card">
         <div class="card-body">
-            <h5 class="card-title">Submitted candidates</h5>
-            <p class="small text-muted">The following candidate submissions have been received. Candidates with submissions are highlighted above.</p>
-            <ul id="submitted-candidates" class="list-unstyled small">
-                {% for user_data in user_exam_data %}
-                    <li data-cid="{{user_data.cid_user}}" data-user="{{user_data.user_user}}">CID: {{user_data.cid_user}} / User: {{user_data.user_user}} / Start: {{user_data.start_time}} / End: {{user_data.end_time}}</li>
-                {% endfor %}
-            </ul>
+            <div class="d-flex justify-content-between align-items-start mb-2">
+                <div>
+                    <h5 class="card-title mb-0">Submitted candidates</h5>
+                    <div class="small text-muted">The following candidate submissions have been received. Candidates with submissions are highlighted above.</div>
+                </div>
+                <div class="small text-muted">Count: <span class="fw-semibold">{{ user_exam_data|length }}</span></div>
+            </div>
+
+            <div class="table-responsive">
+                <table class="table table-sm table-hover align-middle mb-0">
+                    <thead class="table-light">
+                        <tr>
+                            <th scope="col">CID</th>
+                            <th scope="col">User</th>
+                            <th scope="col">Start</th>
+                            <th scope="col">End</th>
+                            <th scope="col" class="text-end">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="submitted-candidates">
+                        {% for user_data in user_exam_data %}
+                            <tr data-cid="{{ user_data.cid_user }}" data-user="{{ user_data.user_user }}">
+                                <td class="fw-bold">{{ user_data.cid_user }}</td>
+                                <td>{{ user_data.user_user }}</td>
+                                <td class="text-nowrap small text-muted">{{ user_data.start_time }}</td>
+                                <td class="text-nowrap small text-muted">{{ user_data.end_time }}</td>
+                                <td class="text-end">
+                                    <div class="btn-group" role="group">
+                                        <button class="btn btn-sm btn-outline-secondary" title="View details" hx-get="{% url exam.get_app_name|add:':exam_user_status' exam.id %}?cid={{ user_data.cid_user }}" hx-target="#history-modal .modal-body" data-bs-toggle="modal" data-bs-target="#history-modal"><i class="bi bi-eye"></i></button>
+                                    </div>
+                                </td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
 {% else %}
-    <p class="small text-muted">No submissions yet.</p>
+    <div class="card">
+        <div class="card-body">
+            <p class="mb-0 small text-muted">No submissions yet.</p>
+        </div>
+    </div>
 {% endif %}
+