Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,9 +1,10 @@
 """
-Health Matrix – AI Command Center (Desktop Wide + Chris Wright Timeline)
-- Sticky Left timeline (desktop) with smooth CSS animation
-- Auto switch to Horizontal timeline on narrow screens
-- Agent Overview chips + KPIs + full-width, readable tables
-- No logic/API/decision changes — front-end only
+Health Matrix – AI Command Center (Desktop Wide + AI Cards)
+- Sticky Left Timeline (Chris Wright–style, animated)
+- KPI: Animated gradient-border cards
+- Employee Results: Glass + Aurora cards (per-employee) instead of table
+- Full desktop width, responsive, WCAG-friendly
+- Logic/APIs unchanged (front-end only)
 
 Usage: streamlit run streamlit_app.py
 """
@@ -17,7 +18,7 @@ import pandas as pd
 import requests
 import streamlit as st
 
-# Optional: OpenAI (graceful if missing)
+# Optional: OpenAI for GPT decisions (fails gracefully if missing)
 try:
     import openai  # type: ignore
     HAS_OPENAI = True
@@ -27,7 +28,7 @@ except Exception:
 
 
 # =============================================================================
-# Embedded CSS (Desktop-first, “Chris Wright” style timeline adapted)
+# Embedded CSS  (Desktop-first, AI look)
 # =============================================================================
 _EMBEDDED_CSS = """
 :root{
@@ -37,7 +38,7 @@ _EMBEDDED_CSS = """
 }
 
 /* ==== Full-width page on desktop ==== */
-.main .block-container{ max-width:1600px !important; padding-left:16px; padding-right:16px }
+.main .block-container{ max-width: 1600px !important; padding-left: 16px; padding-right: 16px }
 
 /* Base */
 html,body{
@@ -103,75 +104,122 @@ p{ color:var(--t2) }
 .overview .chip{ font-size:.9rem; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#fff }
 .overview .chip b{ color:#0f172a }
 
-/* KPI */
-.stat-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:10px }
-.stat-card{
-  background:#fff; padding:14px; border-radius:14px; border:1px solid var(--line);
-  box-shadow:0 6px 16px rgba(0,0,0,.06); text-align:center; transition:transform .2s ease
+/* ================= KPI: animated gradient-border cards ================= */
+.kpi-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:12px 0 }
+.kpi-card{
+  position:relative; border-radius:16px; padding:16px; text-align:center;
+  border:1px solid transparent;
+  background:
+    linear-gradient(#ffffff,#ffffff) padding-box,
+    linear-gradient(120deg, var(--green), var(--blue), var(--green)) border-box;
+  background-size: 300% 300%;
+  animation: borderShift 8s ease infinite;
+  box-shadow:0 10px 24px rgba(0,0,0,.06);
 }
-.stat-card:hover{ transform:scale(1.02) }
-.stat-icon{ font-size:22px; margin-bottom:.2rem }
-.stat-label{ color:#334155 }
-.stat-value{ font-size:1.7rem; font-weight:900 }
+.kpi-card .ico{ font-size:22px; margin-bottom:6px }
+.kpi-card .lbl{ color:#334155 }
+.kpi-card .val{ font-size:1.8rem; font-weight:900; line-height:1 }
+
+/* ================= Employee (Result) Cards – Glass + Aurora ================= */
+.emp-grid{
+  display:grid; gap:14px; margin-top:12px;
+  grid-template-columns: repeat(12, 1fr);
+}
+.emp-card{
+  grid-column: span 4;  /* 3 per row desktop */
+  position:relative; overflow:hidden;
+  background: rgba(255,255,255,.75);
+  border:1px solid #E5E7EB; border-radius:16px; backdrop-filter: blur(10px);
+  box-shadow:0 10px 26px rgba(0,0,0,.08);
+  padding:14px 14px 12px; transform: translateY(6px); opacity:0;
+  animation: cardIn .35s ease-out forwards;
+}
+.emp-card:nth-child(2){ animation-delay:.03s }
+.emp-card:nth-child(3){ animation-delay:.06s }
+.emp-card:nth-child(4){ animation-delay:.09s }
+.emp-card::before{ /* Aurora glow */
+  content:""; position:absolute; inset:-30% -10% auto -10%; height:60%;
+  background:
+   radial-gradient(600px 280px at 20% 30%, rgba(54,186,1,.25), transparent 60%),
+   radial-gradient(520px 220px at 80% 20%, rgba(0,76,151,.22), transparent 60%);
+  filter: blur(28px); opacity:.8; z-index:0; pointer-events:none;
+  animation: aurora 18s linear infinite;
+}
+.emp-head, .emp-body, .emp-foot{ position:relative; z-index:1 }
+.emp-head{ display:flex; align-items:center; gap:10px }
+.emp-avatar{
+  width:42px; height:42px; border-radius:999px; background:#F1F5F9;
+  display:flex; align-items:center; justify-content:center; font-weight:800; color:#0f172a
+}
+.emp-name{ font-weight:900 }
+.emp-chip{ font-size:.8rem; padding:4px 8px; border-radius:999px; border:1px solid #E5E7EB; background:#fff; margin-left:auto }
+.emp-chip.ok{ background:#E8F7ED; border-color:#B6E2C4 }
+.emp-chip.warn{ background:#FFF7ED; border-color:#FED7AA }
+.emp-chip.info{ background:#EFF6FF; border-color:#BFDBFE }
+.emp-chip.fail{ background:#FEF2F2; border-color:#FECACA }
+
+.emp-line{ height:1px; background:#E5E7EB; margin:8px 0 }
+
+.emp-body{ display:grid; grid-template-columns: 1fr 1fr; gap:8px }
+.emp-badge{
+  display:flex; gap:6px; align-items:center; font-size:.92rem; color:#334155;
+  background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:8px 10px
+}
+.emp-badge.ok{ border-color:#BBF7D0; background:#F0FDF4 }
+.emp-badge.fail{ border-color:#FECACA; background:#FEF2F2 }
+.emp-badge .dot{ width:8px; height:8px; border-radius:50% }
+.emp-badge.ok .dot{ background:var(--ok) }
+.emp-badge.fail .dot{ background:var(--fail) }
+
+.emp-foot{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px }
+.emp-tag{ font-size:.8rem; padding:6px 10px; border-radius:999px; border:1px solid #E5E7EB; background:#fff }
+.emp-meta{ margin-left:auto; color:#64748B; font-size:.85rem }
+
+@media (max-width: 1320px){ .emp-card{ grid-column: span 6 } }  /* 2 per row */
+@media (max-width: 820px){ .emp-card{ grid-column: span 12 } .emp-body{ grid-template-columns: 1fr } }
 
 /* ======================= Chris Wright Timeline (adapted) ======================= */
-/* Container that stays pinned on desktop */
 .cw-rail{ position:sticky; top:84px }        /* pinned under Streamlit header */
 @media (max-width: 1100px){ .cw-rail{ position:static } }  /* not sticky on small screens */
 
-/* Vertical timeline */
-.cw-timeline{
-  position:relative; margin:0; padding:0 0 0 28px; list-style:none;
-}
-.cw-timeline::before{
-  content:""; position:absolute; left:11px; top:0; bottom:0; width:2px; background:#E2E8F0;
-}
-
-/* Item */
+.cw-timeline{ position:relative; margin:0; padding:0 0 0 28px; list-style:none; }
+.cw-timeline::before{ content:""; position:absolute; left:11px; top:0; bottom:0; width:2px; background:#E2E8F0; }
 .cw-item{
   position:relative; margin:0 0 14px; background:#fff; border:1px solid var(--line);
   border-radius:14px; box-shadow:0 6px 14px rgba(0,0,0,.06);
-  padding:10px 12px 10px 12px; opacity:0; transform:translateX(-10px);
-  animation:cwFadeIn .45s ease-out forwards;
+  padding:10px 12px; opacity:0; transform:translateX(-10px); animation:cwFadeIn .45s ease-out forwards;
 }
 .cw-item:nth-child(2){ animation-delay:.05s }
 .cw-item:nth-child(3){ animation-delay:.1s }
 .cw-item:nth-child(4){ animation-delay:.15s }
 .cw-item:nth-child(5){ animation-delay:.2s }
-
-/* Bullet dot */
 .cw-item::before{
   content:""; position:absolute; left:-17px; top:14px; width:12px; height:12px;
   border-radius:50%; border:2px solid #fff; background:#94A3B8; box-shadow:0 0 0 2px #E2E8F0;
 }
 .cw-item.done::before{ background:var(--green) }
 .cw-item.current::before{ background:var(--blue) }
-
-/* Title / meta / desc */
 .cw-title{ margin:0 0 4px; font-weight:800 }
 .cw-meta{ color:#64748B; font-size:.85rem; margin-bottom:4px }
 .cw-desc{ color:#334155; font-size:.95rem }
-
-/* Horizontal mode for narrow screens */
 @media (max-width: 1100px){
   .cw-timeline{ padding-left:0; }
   .cw-timeline::before{ display:none }
-  .cw-row{
-    display:flex; flex-wrap:wrap; gap:12px; align-items:stretch
-  }
+  .cw-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:stretch }
   .cw-item{ flex:1 1 calc(50% - 12px); transform:translateY(8px) }
-  .cw-item::before{ left:12px } /* put dot inside card */
-}
-@media (max-width: 700px){
-  .cw-item{ flex:1 1 100% }
+  .cw-item::before{ left:12px }
 }
+@media (max-width: 700px){ .cw-item{ flex:1 1 100% } }
 
-/* Animations */
+/* ===== Animations ===== */
 @keyframes aiTitle{0%{background-position:0 0}50%{background-position:100% 0}100%{background-position:0 0}}
-@keyframes cwFadeIn{ to{ opacity:1; transform:none } }
 @keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(54,186,1,.55)}
   70%{transform:scale(1);box-shadow:0 0 0 10px rgba(54,186,1,0)}
   100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(54,186,1,0)}}
+@keyframes borderShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
+@keyframes cardIn{ to{ opacity:1; transform:none } }
+@keyframes aurora{ 0%{transform:translateX(-10%)} 50%{transform:translateX(10%)} 100%{transform:translateX(-10%)} }
+@keyframes cwFadeIn{ to{ opacity:1; transform:none } }
 """
 
 # =============================================================================
@@ -394,13 +442,9 @@ def gpt_decide(shift: pd.Series, eligible_df: pd.DataFrame) -> Dict[str, str]:
 
 
 # =============================================================================
-# Chris Wright Timeline Markup (HTML only)
+# Timeline: Chris Wright (HTML builder)
 # =============================================================================
 def render_cw_timeline(events: List[Dict[str, Any]]) -> str:
-    """
-    Vertical sticky rail (desktop). Auto-switches to responsive row on narrow viewports.
-    Uses classes: cw-timeline, cw-item, cw-title, cw-meta, cw-desc, state via .done/.current
-    """
     items = []
     for ev in events:
         cls = ev.get("status", "done")
@@ -414,9 +458,8 @@ def render_cw_timeline(events: List[Dict[str, Any]]) -> str:
   <div class="cw-title">{title}</div>
   <div class="cw-meta">Duration: {dur_txt}</div>
   <div class="cw-desc">{desc}</div>
-</li>
-''')
-    # Wrap in list + responsive row wrapper for small screens
+</li>'''
+        )
     return '<ul class="cw-timeline cw-row">' + "".join(items) + '</ul>'
 
 
@@ -496,6 +539,112 @@ def run_agent(employee_ids: Iterable[int], df_shifts: pd.DataFrame):
     return events, shift_assignment_results, reasoning_rows
 
 
+# =============================================================================
+# Helpers: KPI & Employee Cards (HTML)
+# =============================================================================
+def render_kpis(assigned:int, notified:int, skipped:int) -> str:
+    return f"""
+<div class="kpi-grid" role="group" aria-label="KPI">
+  <div class="kpi-card"><div class="ico">✅</div><div class="lbl">Assigned</div><div class="val">{assigned}</div></div>
+  <div class="kpi-card"><div class="ico">📬</div><div class="lbl">Notify</div><div class="val">{notified}</div></div>
+  <div class="kpi-card"><div class="ico">⚠️</div><div class="lbl">Skipped</div><div class="val">{skipped}</div></div>
+</div>
+"""
+
+def render_employee_cards(shift_results: List[tuple], reasoning_rows: List[Dict[str,Any]]) -> str:
+    """
+    Builds a grid of AI-styled glass cards per employee.
+    shift_results: list[(Employee, ShiftID, Status)] from agent.
+    reasoning_rows: list of dicts with keys Employee, ShiftID, Eligible, Reasoning, Certifications.
+    """
+    # Build maps
+    action_by_emp: Dict[str, str] = {}
+    shift_by_emp: Dict[str, str] = {}
+    for emp, sid, status in shift_results:
+        if emp and not emp.startswith("❌"):
+            action_by_emp[emp] = status
+            shift_by_emp[emp] = str(sid)
+
+    # Aggregate reasoning per employee (first row per employee is enough here)
+    seen = set()
+    employees: List[Dict[str,Any]] = []
+    for r in reasoning_rows:
+        emp = r.get("Employee","").strip()
+        if not emp or emp in seen:
+            continue
+        seen.add(emp)
+        employees.append({
+            "name": emp,
+            "shift": r.get("ShiftID",""),
+            "eligible": r.get("Eligible",""),
+            "reasoning": r.get("Reasoning",""),
+            "certs": r.get("Certifications","")
+        })
+
+    if not employees:
+        return '<div class="table-wrap"><div style="padding:10px;color:#64748B">No employee details available.</div></div>'
+
+    # Build cards
+    def chip_class(txt:str)->str:
+        t = (txt or "").lower()
+        if "assigned" in t: return "ok"
+        if "notify" in t: return "info"
+        if "skip" in t: return "warn"
+        if "eligible" in t and "✅" in (txt or ""): return "ok"
+        if "eligible" in t and "❌" in (txt or ""): return "fail"
+        return "info"
+
+    def name_initials(n:str)->str:
+        parts = [p for p in n.split(" ") if p.strip()]
+        if not parts: return "?"
+        if len(parts)==1: return parts[0][:2].upper()
+        return (parts[0][0]+parts[-1][0]).upper()
+
+    cards = []
+    for emp in employees:
+        name = emp["name"]
+        action = action_by_emp.get(name)
+        if not action:
+            # derive from eligibility
+            action = "✅ Eligible" if emp["eligible"].startswith("✅") else "❌ Not Eligible"
+        chip = action
+        c_class = chip_class(chip)
+        # break reasoning into tokens
+        checks = [x.strip() for x in str(emp["reasoning"]).split("|") if x.strip()]
+        check_html = []
+        for ch in checks:
+            ok = "✅" in ch
+            label = ch.replace("✅","").replace("❌","").strip()
+            check_html.append(f'<div class="emp-badge {"ok" if ok else "fail"}"><span class="dot"></span><span>{label}</span></div>')
+        certs = emp["certs"] or "—"
+        shift = shift_by_emp.get(name, emp["shift"] or "—")
+        cards.append(f"""
+<div class="emp-card" role="group" aria-label="{name}">
+  <div class="emp-head">
+    <div class="emp-avatar">{name_initials(name)}</div>
+    <div>
+      <div class="emp-name">{name}</div>
+      <div style="color:#64748B;font-size:.85rem">Shift: {shift}</div>
+    </div>
+    <div class="emp-chip {c_class}" title="Decision/Status">{chip}</div>
+  </div>
+
+  <div class="emp-line"></div>
+
+  <div class="emp-body">
+    {''.join(check_html) if check_html else '<div class="emp-badge info"><span class="dot" style="background:#60a5fa"></span><span>No reasoning available</span></div>'}
+  </div>
+
+  <div class="emp-foot">
+    <div class="emp-tag">🪪 Certifications: {certs}</div>
+    <div class="emp-meta">Updated just now</div>
+  </div>
+</div>
+""")
+
+    return '<div class="emp-grid">' + "".join(cards) + '</div>'
+
+
 # =============================================================================
 # UI
 # =============================================================================
@@ -509,7 +658,7 @@ def main() -> None:
 <div class="hero" dir="auto">
   <img src="https://www.healthmatrixcorp.com/web/image/website/1/logo/Health%20Matrix?unique=956ad7b" alt="Health Matrix" />
   <h1>AI Command Center – Smart Staffing & Actions</h1>
-  <p>Desktop-first view with a sticky left timeline (Chris Wright-style) that shows what the agent is doing, step by step.</p>
+  <p>Desktop-first view. Sticky left runline + AI-styled KPI & employee cards. No changes to logic — purely visual.</p>
 </div>
 """, unsafe_allow_html=True
     )
@@ -539,7 +688,7 @@ def main() -> None:
 """, unsafe_allow_html=True
     )
 
-    # Demo input (unchanged)
+    # Demo input (unchanged behavior)
     employee_ids_default = [850, 825]
     shift_data = """ShiftID,Department,RoleRequired,Specialty,MandatoryTraining,ShiftType,ShiftDuration,WardDepartment,LanguageRequirement,ShiftTime
 S101,ICU,Registered Nurse,ICU-trained,BLS/ALS certified,Night,12h,A&E,Arabic,2025-06-04 07:00"""
@@ -590,7 +739,7 @@ S101,ICU,Registered Nurse,ICU-trained,BLS/ALS certified,Night,12h,A&E,Arabic,202
             st.markdown(render_cw_timeline(events), unsafe_allow_html=True)
             st.markdown('</div>', unsafe_allow_html=True)
 
-        # RIGHT: Overview + KPIs + Tables
+        # RIGHT: Overview + KPIs + Employee Cards
         with right:
             total_steps = len(events)
             total_ms = sum(int(e.get("dur_ms", 0) or 0) for e in events)
@@ -609,34 +758,27 @@ S101,ICU,Registered Nurse,ICU-trained,BLS/ALS certified,Night,12h,A&E,Arabic,202
             )
             st.markdown('</div>', unsafe_allow_html=True)
 
-            st.markdown('<div class="stat-row">', unsafe_allow_html=True)
-            st.markdown(
-                f'<div class="stat-card"><div class="stat-icon">✅</div><div class="stat-label">Assigned</div><div class="stat-value">{assigned}</div></div>'
-                f'<div class="stat-card"><div class="stat-icon">📬</div><div class="stat-label">Notify</div><div class="stat-value">{notified}</div></div>'
-                f'<div class="stat-card"><div class="stat-icon">⚠️</div><div class="stat-label">Skipped</div><div class="stat-value">{skipped}</div></div>',
-                unsafe_allow_html=True
-            )
-            st.markdown('</div>', unsafe_allow_html=True)
+            st.markdown(render_kpis(assigned, notified, skipped), unsafe_allow_html=True)
 
-            st.markdown("### 📊 Results")
-            with st.expander("Shift Fulfillment Summary", expanded=True):
+            # ====== Employee glass cards (instead of a plain table) ======
+            st.markdown("### 👥 Employee Results")
+            emp_cards_html = render_employee_cards(shift_assignment_results, reasoning_rows)
+            st.markdown(emp_cards_html, unsafe_allow_html=True)
+
+            # Optional: raw tables (hidden by default) for auditing/export
+            with st.expander("Raw Summary (optional)", expanded=False):
                 if shift_assignment_results:
                     st.markdown('<div class="table-wrap">', unsafe_allow_html=True)
                     st.dataframe(pd.DataFrame(shift_assignment_results, columns=["Employee", "ShiftID", "Status"]),
                                  use_container_width=True)
                     st.markdown('</div>', unsafe_allow_html=True)
-                else:
-                    st.info("No assignments to display.")
-
-            with st.expander("Reasoning Behind Selections", expanded=False):
                 if reasoning_rows:
                     st.markdown('<div class="table-wrap">', unsafe_allow_html=True)
                     st.dataframe(pd.DataFrame(reasoning_rows), use_container_width=True)
                     st.markdown('</div>', unsafe_allow_html=True)
-                else:
-                    st.info("No reasoning data available.")
+
     else:
-        st.info("Click “Start AI Agent” to see the sticky timeline and results.")
+        st.info("Click “▶️ Start AI Agent” to see the sticky timeline and AI-styled results.")
 
     # Footer
     st.markdown(