From ff1a3089bb1b5bf412f902d56e7ed68fe5ec558c Mon Sep 17 00:00:00 2001
From: NguyenND <ngodanguyen@gmail.com>
Date: Fri, 7 Aug 2026 09:42:26 -0400
Subject: [PATCH] Aug 7 - Update the AI Suport button

---
 app/static/css/theme_modern.css      |  3 +++
 app/templates/ui/support_center.html | 28 +++++++++++++++++++++++++---
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/app/static/css/theme_modern.css b/app/static/css/theme_modern.css
index 8c75052..bf6fbc2 100644
--- a/app/static/css/theme_modern.css
+++ b/app/static/css/theme_modern.css
@@ -400,6 +400,9 @@ a.jqc-kpi:hover { box-shadow: var(--jqc-shadow-md); transform: translateY(-1px);
 .jqc-modern .jqc-hub-card.dark .jqc-hub-title,
 .jqc-modern .jqc-hub-card.dark .jqc-hub-text { color: #fff; }
 .jqc-modern .jqc-hub-card.dark .jqc-tile-icon { background: #fff; }
+/* The default .jqc-hub-open is brand-coloured, which is invisible on the dark
+   (brand-filled) card — it needs its own colour. */
+.jqc-modern .jqc-hub-card.dark .jqc-hub-open { color: #fff; }
 
 /* ── 7. Tables — dark teal header, as in the deck ────────────────────────── */
 .jqc-modern .table { --bs-table-border-color: var(--jqc-border); margin-bottom: 0; }
diff --git a/app/templates/ui/support_center.html b/app/templates/ui/support_center.html
index 448605d..5a5b7d2 100644
--- a/app/templates/ui/support_center.html
+++ b/app/templates/ui/support_center.html
@@ -113,16 +113,38 @@
   </div>
   {% endfor %}
 
+  {# The AI chat is customer-only (support.chat redirects staff to the ticket
+     queue, which is itself @supervisor_required). So the destination is chosen
+     per role rather than pointed at support.chat for everyone — an inspector
+     following that chain would land on the dashboard with an access-denied
+     flash, and this page is meant never to dead-end. Roles with no support
+     destination get no card; the how-to guides below are their support. #}
+  {% if current_user.role == 'customer' %}
   <div class="col-12 col-md-6 col-xl-4">
-    <div class="jqc-hub-card dark">
+    <a class="jqc-hub-card dark" href="{{ url_for('support.chat') }}">
       <div class="d-flex gap-3 align-items-center">
         <span class="jqc-tile-icon"><i class="bi bi-life-preserver"></i></span>
         <div>
           <div class="jqc-hub-title" style="font-size:1.02rem;">AI Support</div>
-          <span class="badge bg-light text-dark mt-2">Under construction</span>
+          <div class="jqc-hub-text">Ask a question and get an answer straight away.</div>
         </div>
       </div>
-    </div>
+      <div class="jqc-hub-open">Open &rarr;</div>
+    </a>
   </div>
+  {% elif current_user.role in ['admin', 'director'] %}
+  <div class="col-12 col-md-6 col-xl-4">
+    <a class="jqc-hub-card dark" href="{{ url_for('support.admin_conversations') }}">
+      <div class="d-flex gap-3 align-items-center">
+        <span class="jqc-tile-icon"><i class="bi bi-life-preserver"></i></span>
+        <div>
+          <div class="jqc-hub-title" style="font-size:1.02rem;">AI Support</div>
+          <div class="jqc-hub-text">Review the AI chat conversations customers have had.</div>
+        </div>
+      </div>
+      <div class="jqc-hub-open">Open &rarr;</div>
+    </a>
+  </div>
+  {% endif %}
 </div>
 {% endblock %}