Upload 2 files

templates/patient.html

@@ -226,9 +226,18 @@
   <div class="card">
     <h2>Your consultations</h2>
     <p class="helper-text">Tap any message to reopen it.</p>
+    <div class="filter-chip-row" id="history-filter-chips" role="group" aria-label="Filter by status">
+      <button type="button" class="filter-chip active" data-filter="all">All</button>
+      <button type="button" class="filter-chip" data-filter="waiting">Waiting for reply</button>
+      <button type="button" class="filter-chip" data-filter="answered">Answered</button>
+    </div>
     <input type="text" class="search-input" id="history-search" placeholder="Search your messages" aria-label="Search your consultations">
     <div id="history-full-list" style="margin-top: var(--space-4);"></div>
-    <p class="helper-text" id="history-empty-text" style="display: none;"></p>
+    <div class="empty-state" id="history-empty-state" style="display: none;">
+      <svg class="empty-state-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
+      <p class="empty-state-title" id="history-empty-title"></p>
+      <p class="empty-state-body" id="history-empty-body"></p>
+    </div>
   </div>
   <button type="button" class="btn btn-secondary" id="history-back-btn">Back</button>
 </section>

templates/provider.html

@@ -60,8 +60,31 @@
 
   <div class="card">
     <input type="text" class="search-input" id="queue-search" placeholder="Search by language or message" aria-label="Search consultations" style="margin-bottom: var(--space-4);">
+    <!-- Filter chips and sort toggle only appear on the Completed tab,
+         where a provider might want to narrow by language or reverse order.
+         Hidden on Waiting/Active tabs via JS since filtering a short live
+         queue adds friction more than value. -->
+    <div id="completed-controls" style="display: none; margin-bottom: var(--space-4);">
+      <div class="filter-chip-row" id="language-filter-chips" role="group" aria-label="Filter by language">
+        <button type="button" class="filter-chip active" data-filter="all">All languages</button>
+        <button type="button" class="filter-chip" data-filter="english">English</button>
+        <button type="button" class="filter-chip" data-filter="yoruba">Yoruba</button>
+        <button type="button" class="filter-chip" data-filter="hausa">Hausa</button>
+        <button type="button" class="filter-chip" data-filter="igbo">Igbo</button>
+        <button type="button" class="filter-chip" data-filter="pidgin">Pidgin</button>
+      </div>
+      <button type="button" class="sort-toggle-btn" id="sort-toggle-btn" aria-label="Toggle sort order">
+        <svg id="sort-icon-asc" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>
+        <svg id="sort-icon-desc" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
+        <span id="sort-label">Newest first</span>
+      </button>
+    </div>
     <div id="pending-list"></div>
-    <p class="helper-text" id="empty-pending" style="display: none;"></p>
+    <div class="empty-state" id="empty-pending" style="display: none;">
+      <svg class="empty-state-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+      <p class="empty-state-title" id="empty-pending-title"></p>
+      <p class="empty-state-body" id="empty-pending-body"></p>
+    </div>
   </div>
 </section>
 
@@ -89,6 +112,11 @@
           <span class="chat-label" id="respond-language-label">Patient</span>
           <span id="respond-translated-text"></span>
         </div>
+        <!-- Provider's reply, only visible in read-only (completed) mode -->
+        <div class="chat-bubble from-provider" id="respond-provider-bubble" style="display:none;">
+          <span class="chat-label">Your reply (translated)</span>
+          <span id="respond-provider-reply-text"></span>
+        </div>
       </div>
 
       <details class="original-transcript">
@@ -99,65 +127,70 @@
       <div class="nlu-summary" id="respond-nlu-summary"></div>
     </div>
 
-    <!-- Only shown when this patient has other consultations on record.
-         Read-only context for understanding this message, not clickable -
-         switching the whole workspace to a different consultation from
-         here would risk a provider replying to the wrong one. -->
     <div class="card" id="patient-history-card" style="display: none;">
       <h3>This patient's other consultations</h3>
       <div id="patient-history-list"></div>
     </div>
 
-    <div class="card">
-      <label for="response-text-input">Your reply (in English)</label>
-      <div class="chip-row" id="quick-reply-chips">
-        <button type="button" class="chip" data-text="Please come in for a check-up so we can look at this properly.">Come in for a check-up</button>
-        <button type="button" class="chip" data-text="Please rest and stay hydrated, drink plenty of water.">Rest and stay hydrated</button>
-        <button type="button" class="chip" data-text="This doesn't sound urgent. Please monitor it and reach out again if it gets worse.">Monitor and follow up</button>
-        <button type="button" class="chip" data-text="I need a bit more detail, please describe your symptoms further.">Need more detail</button>
-      </div>
-      <textarea id="response-text-input" rows="4" placeholder="Type your reply here"></textarea>
-
-      <button type="button" class="btn btn-secondary" id="preview-response-btn" style="margin-top: var(--space-3); width: 100%;">
-        <span class="btn-spinner spinner" style="display: none;"></span>
-        <span class="btn-label">Preview what the patient will get</span>
-      </button>
-
-      <!-- Real translation + real speech synthesis, same pipeline as an
-           actual send, just not saved. Each click costs the same as
-           sending, since it's a genuine API call, not a mock. -->
-      <div class="preview-block" id="preview-block" style="display: none;">
-        <p class="preview-label">Preview — exactly what the patient will receive</p>
-        <div class="chat-bubble from-provider" id="preview-text-bubble"></div>
-        <div class="audio-player">
-          <audio id="preview-audio" preload="metadata"></audio>
-          <div class="audio-player-controls">
-            <button type="button" class="audio-btn" id="preview-audio-play-btn" aria-label="Play">
-              <svg class="icon-play" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"/></svg>
-              <svg class="icon-pause" viewBox="0 0 24 24" fill="currentColor" style="display: none;"><rect x="5" y="3" width="5" height="18" rx="1"/><rect x="14" y="3" width="5" height="18" rx="1"/></svg>
-            </button>
-            <button type="button" class="audio-btn audio-btn-sm" id="preview-audio-replay-btn" aria-label="Replay from start">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
-            </button>
-            <span class="audio-time" id="preview-audio-current-time">0:00</span>
-            <input type="range" class="audio-seek" id="preview-audio-seek" min="0" max="0" value="0" step="0.1" aria-label="Seek audio position">
-            <span class="audio-time" id="preview-audio-duration">0:00</span>
+    <!-- Compose area: shown only for unanswered (waiting) consultations -->
+    <div id="compose-area">
+      <div class="card">
+        <label for="response-text-input">Your reply (in English)</label>
+        <div class="chip-row" id="quick-reply-chips">
+          <button type="button" class="chip" data-text="Please come in for a check-up so we can look at this properly.">Come in for a check-up</button>
+          <button type="button" class="chip" data-text="Please rest and stay hydrated, drink plenty of water.">Rest and stay hydrated</button>
+          <button type="button" class="chip" data-text="This doesn't sound urgent. Please monitor it and reach out again if it gets worse.">Monitor and follow up</button>
+          <button type="button" class="chip" data-text="I need a bit more detail, please describe your symptoms further.">Need more detail</button>
+        </div>
+        <textarea id="response-text-input" rows="4" placeholder="Type your reply here"></textarea>
+
+        <button type="button" class="btn btn-secondary" id="preview-response-btn" style="margin-top: var(--space-3); width: 100%;">
+          <span class="btn-spinner spinner" style="display: none;"></span>
+          <span class="btn-label">Preview what the patient will get</span>
+        </button>
+
+        <div class="preview-block" id="preview-block" style="display: none;">
+          <p class="preview-label">Preview — exactly what the patient will receive</p>
+          <div class="chat-bubble from-provider" id="preview-text-bubble"></div>
+          <div class="audio-player">
+            <audio id="preview-audio" preload="metadata"></audio>
+            <div class="audio-player-controls">
+              <button type="button" class="audio-btn" id="preview-audio-play-btn" aria-label="Play">
+                <svg class="icon-play" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"/></svg>
+                <svg class="icon-pause" viewBox="0 0 24 24" fill="currentColor" style="display: none;"><rect x="5" y="3" width="5" height="18" rx="1"/><rect x="14" y="3" width="5" height="18" rx="1"/></svg>
+              </button>
+              <button type="button" class="audio-btn audio-btn-sm" id="preview-audio-replay-btn" aria-label="Replay from start">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
+              </button>
+              <span class="audio-time" id="preview-audio-current-time">0:00</span>
+              <input type="range" class="audio-seek" id="preview-audio-seek" min="0" max="0" value="0" step="0.1" aria-label="Seek audio position">
+              <span class="audio-time" id="preview-audio-duration">0:00</span>
+            </div>
           </div>
         </div>
       </div>
+
+      <div class="btn-row">
+        <button type="button" class="btn btn-secondary" id="back-to-list">Back</button>
+        <button type="button" class="btn btn-provider" id="submit-response">
+          <span class="btn-icon">
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="20 6 9 17 4 12"/>
+            </svg>
+          </span>
+          <span class="btn-spinner spinner" style="display: none;"></span>
+          <span class="btn-label">Send reply</span>
+        </button>
+      </div>
     </div>
 
-    <div class="btn-row">
-      <button type="button" class="btn btn-secondary" id="back-to-list">Back</button>
-      <button type="button" class="btn btn-provider" id="submit-response">
-        <span class="btn-icon">
-          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="20 6 9 17 4 12"/>
-          </svg>
-        </span>
-        <span class="btn-spinner spinner" style="display: none;"></span>
-        <span class="btn-label">Send reply</span>
-      </button>
+    <!-- Read-only view: shown when a completed consultation is opened.
+         No textarea, no Send button — a completed consultation is a
+         record, not a work item. -->
+    <div id="readonly-area" style="display: none;">
+      <div class="btn-row">
+        <button type="button" class="btn btn-secondary" id="back-to-list-readonly">Back</button>
+      </div>
     </div>
   </div>
 </section>