Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,12 +1,14 @@
 """
-Health Matrix – AI Command Center (Desktop Wide + AI Cards + Showcase Mode)
+Health Matrix – AI Command Center (Desktop Wide + AI Cards + Showcase Mode + Kanban Board)
 - Sticky Left Timeline (Chris Wright–style, animated)
 - KPI: Animated gradient-border cards
-- Employee Results: Glass + Aurora cards (per-employee)
-- Showcase Mode: يضمن (Assign / Notify / Skip) لعرض قدرات الوكيل + يضيف موظف ثالث تجريبي فقط للعرض
-- خيار Lenient Eligibility (OR) في وضع العرض
+- Employee Results:
+    * Board View (Kanban: Assigned / Notify / Skipped) — واضح ومناسب للأعداد الكبيرة
+    * Grid View (النسخة السابقة) — خيار إضافي
+- Showcase Mode: يضمن (Assign / Notify / Skip) لعرض قدرات الوكيل + يضيف موظف ثالث تجريبي (اختياري)
+- Lenient Eligibility (OR) خيار للعرض
 - Full desktop width, responsive, WCAG-friendly
-- المنطق الأصلي محفوظ عند إيقاف وضع العرض
+- لا تغييرات على المنطق/الـAPIs عند إيقاف وضع العرض
 
 Usage: streamlit run streamlit_app.py
 """
@@ -37,6 +39,9 @@ _EMBEDDED_CSS = """
   --bg:#FFFFFF; --soft:#F8FAFC; --line:#E5E7EB;
   --t1:#0F172A; --t2:#1F2937; --muted:#64748B;
   --blue:#004C97; --green:#36BA01; --ok:#16a34a; --warn:#D97706; --fail:#DC2626;
+  --tint-assign:#E8F7ED;  --tint-assign-b:#B6E2C4;
+  --tint-notify:#EFF6FF;  --tint-notify-b:#BFDBFE;
+  --tint-skip:#FFF7ED;    --tint-skip-b:#FED7AA;
 }
 
 /* ==== Full-width page on desktop ==== */
@@ -122,35 +127,27 @@ p{ color:var(--t2) }
 .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);
-}
+/* ================= Employee Cards – base ================= */
 .emp-card{
-  grid-column: span 4;  /* 3 per row desktop */
   position:relative; overflow:hidden;
-  background: rgba(255,255,255,.75);
+  background: rgba(255,255,255,.9);
   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;
+  padding: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;
+   radial-gradient(600px 280px at 20% 30%, rgba(54,186,1,.18), transparent 60%),
+   radial-gradient(520px 220px at 80% 20%, rgba(0,76,151,.16), transparent 60%);
+  filter: blur(28px); opacity:.7; 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-head{ display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:12px }
 .emp-avatar{
-  width:42px; height:42px; border-radius:999px; background:#F1F5F9;
+  width:40px; height:40px; border-radius:999px; background:#F1F5F9;
   display:flex; align-items:center; justify-content:center; font-weight:800; color:#0f172a
 }
 .emp-name{ font-weight:900 }
@@ -177,8 +174,34 @@ p{ color:var(--t2) }
 .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 } }
+/* ====== GRID mode (old view, tidy) ====== */
+.emp-grid{
+  display:grid; gap:14px; margin-top:12px;
+  grid-template-columns: repeat(12, 1fr);
+}
+.emp-grid .emp-card{ grid-column: span 4 }           /* 3 per row desktop */
+@media (max-width: 1320px){ .emp-grid .emp-card{ grid-column: span 6 } }  /* 2 per row */
+@media (max-width: 820px){ .emp-grid .emp-card{ grid-column: span 12 } .emp-body{ grid-template-columns: 1fr } }
+
+/* ====== BOARD (Kanban) ====== */
+.board{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:10px }
+.lane{
+  background:#fff; border:1px solid var(--line); border-radius:16px;
+  box-shadow:0 6px 16px rgba(0,0,0,.06); padding:12px
+}
+.lane-header{
+  display:flex; align-items:center; gap:8px; margin-bottom:10px;
+  font-weight:900; font-size:1.05rem;
+}
+.lane-header .count{ margin-left:auto; font-size:.9rem; color:#64748B; background:var(--soft); padding:4px 10px; border-radius:999px; border:1px solid var(--line) }
+
+.lane-assign{ background:var(--tint-assign) }
+.lane-notify{ background:var(--tint-notify) }
+.lane-skip{ background:var(--tint-skip) }
+
+.emp-card.status-assign .emp-head{ background:var(--tint-assign); border:1px solid var(--tint-assign-b) }
+.emp-card.status-notify .emp-head{ background:var(--tint-notify); border:1px solid var(--tint-notify-b) }
+.emp-card.status-skip   .emp-head{ background:var(--tint-skip);   border:1px solid var(--tint-skip-b) }
 
 /* ======================= Chris Wright Timeline (adapted) ======================= */
 .cw-rail{ position:sticky; top:84px }        /* pinned under Streamlit header */
@@ -414,9 +437,7 @@ def is_eligible_lenient(row: pd.Series, shift: pd.Series) -> bool:
     ]).lower()
 
     role_ok = (row.get("JobRole","").strip().lower() == role_req) or (role_req and role_req in text_all)
-    # specialty: اكتفينا بوجود "icu" أو الكلمة الرئيسية داخل النص الكامل
     spec_ok = (not specialty) or any(tok in text_all for tok in [specialty, specialty.replace(" ", ""), "icu"])
-    # training: أي ظهور لـ BLS/ALS في النص يكفي
     training_ok = (not mandatory) or all(any(mtok in text_all for mtok in [m.lower(), m.lower().replace(" certified","")]) for m in mandatory)
     ward_ok = (not ward) or (ward in text_all)
     lang_ok = (not lang_req) or (lang_req in [l.lower() for l in (row.get("Languages") or [])])
@@ -558,7 +579,6 @@ def run_agent(
     t_eval = time.perf_counter()
     events.append({"title":"Evaluate open shifts", "desc":"Matching employees vs. role/specialty/training/ward…", "status":"done"})
 
-    # eligibility function
     elig_fn = is_eligible_lenient if lenient else is_eligible_strict
 
     for _, shift in df_shifts.iterrows():
@@ -567,11 +587,9 @@ def run_agent(
         # 3) AI decision (or showcase distribution)
         t_ai = time.perf_counter()
         if showcase:
-            # Rank all by score
             ranked = df_employees.copy()
             ranked["__score"] = ranked.apply(lambda r: _score_match(r, shift), axis=1)
             ranked = ranked.sort_values("__score", ascending=False).reset_index(drop=True)
-            # pick distinct employees for assign/notify/skip
             cand_assign = ranked.iloc[0] if len(ranked) > 0 else None
             cand_notify = ranked.iloc[1] if len(ranked) > 1 else None
             cand_skip   = ranked.iloc[-1] if len(ranked) > 2 else None
@@ -611,9 +629,8 @@ def run_agent(
                 events.append({"title":"Skipped", "desc":"No eligible employees or decision skipped", "status":"done"})
                 shift_assignment_results.append(("❌ No eligible", shift["ShiftID"], "⚠️ Skipped"))
 
-        # Reasoning rows (explanatory) — نستخدم المنطق الصارم/المخفف حسب الاختيار
+        # Reasoning rows
         for _, emp_row in df_employees.iterrows():
-            # عناصر التحقق
             role_match = str(shift.get("RoleRequired","")).strip().lower() == emp_row.get("JobRole","").strip().lower()
             spec = str(shift.get("Specialty","")).replace("-", " ").strip().lower()
             text_all = (emp_row.get("JobRole","")+" "+emp_row.get("organizationPath","")+" "+" ".join(emp_row.get("Certifications",[]))).lower()
@@ -666,13 +683,65 @@ def render_kpis(assigned:int, notified:int, skipped:int) -> str:
 </div>
 """
 
-def render_employee_cards(shift_results: List[tuple], reasoning_rows: List[Dict[str,Any]]) -> str:
+def _name_initials(n:str)->str:
+    n = (n or "").strip()
+    if not n: return "?"
+    parts = [p for p in n.split(" ") if p]
+    if len(parts)==1: return parts[0][:2].upper()
+    return (parts[0][0]+parts[-1][0]).upper()
+
+def _chip_class(txt:str)->str:
+    t = (txt or "").lower()
+    if "auto-filled" in t or "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 _status_lane_for(emp_action:str, eligible_txt:str)->str:
+    """assign|notify|skip"""
+    a = (emp_action or "").lower()
+    if "auto-filled" in a or "assign" in a: return "assign"
+    if "notify" in a: return "notify"
+    if a: return "skip"
+    # لا يوجد قرار صريح: انقل المؤهل إلى notify للتدقيق، والباقي skip
+    return "notify" if str(eligible_txt).startswith("✅") else "skip"
+
+def _build_emp_card(name:str, shift:str, chip:str, reasoning:str, certs:str, lane:str)->str:
+    checks = [x.strip() for x in str(reasoning or "").split("|") if x and x.strip()]
+    check_html = []
+    for ch in checks:
+        ok = "✅" in ch or ch.endswith("✅")
+        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>')
+    chip_class = _chip_class(chip)
+    return f"""
+<div class="emp-card status-{lane}" 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 or "—"}</div>
+    </div>
+    <div class="emp-chip {chip_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 or "—"}</div>
+    <div class="emp-meta">Updated just now</div>
+  </div>
+</div>
+"""
+
+def render_employee_view(shift_results: List[tuple], reasoning_rows: List[Dict[str,Any]], mode:str="board") -> 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.
+    mode = 'board' (Kanban) or 'grid'
     """
-    # Build maps
+    # map actions
     action_by_emp: Dict[str, str] = {}
     shift_by_emp: Dict[str, str] = {}
     for emp, sid, status in shift_results:
@@ -680,83 +749,53 @@ def render_employee_cards(shift_results: List[tuple], reasoning_rows: List[Dict[
             action_by_emp[str(emp)] = status
             shift_by_emp[str(emp)] = str(sid)
 
-    # Aggregate reasoning per employee (first row per employee is enough here)
+    # aggregate employees (first reasoning row per employee)
     seen = set()
     employees: List[Dict[str,Any]] = []
     for r in reasoning_rows:
         emp = (r.get("Employee") or "").strip()
-        if not emp or emp in seen:
-            continue
+        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","")
+            "certs": r.get("Certifications",""),
+            "action": action_by_emp.get(emp,"")
         })
 
     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:
-        n = (n or "").strip()
-        if not n: return "?"
-        parts = [p for p in n.split(" ") if p]
-        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:
-            action = "✅ Eligible" if str(emp["eligible"]).startswith("✅") else "❌ Not Eligible"
-        chip = action
-        c_class = chip_class(chip)
-        checks = [x.strip() for x in str(emp["reasoning"] or "").split("|") if x and x.strip()]
-        check_html = []
-        for ch in checks:
-            ok = "✅" in ch or ch.endswith("✅")
-            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>
+    if mode == "grid":
+        cards = []
+        for emp in employees:
+            lane = _status_lane_for(emp["action"], emp["eligible"])
+            chip = emp["action"] or ("✅ Eligible" if str(emp["eligible"]).startswith("✅") else "❌ Not Eligible")
+            cards.append(_build_emp_card(emp["name"], emp["shift"], chip, emp["reasoning"], emp["certs"], lane))
+        return '<div class="emp-grid">' + "".join(cards) + '</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>
+    # Board (Kanban)
+    lanes = {"assign": [], "notify": [], "skip": []}
+    for emp in employees:
+        lane = _status_lane_for(emp["action"], emp["eligible"])
+        chip = emp["action"] or ("✅ Eligible" if str(emp["eligible"]).startswith("✅") else "❌ Not Eligible")
+        lanes[lane].append(_build_emp_card(emp["name"], emp["shift"], chip, emp["reasoning"], emp["certs"], lane))
+
+    def lane_html(title:str, icon:str, klass:str, items:List[str]) -> str:
+        return f"""
+<div class="lane lane-{klass}">
+  <div class="lane-header">{icon}&nbsp;{title} <span class="count">{len(items)}</span></div>
+  {''.join(items) if items else '<div style="color:#64748B;padding:10px">No employees in this lane.</div>'}
 </div>
-""")
+"""
 
-    return '<div class="emp-grid">' + "".join(cards) + '</div>'
+    return '<div class="board">' + \
+           lane_html("Assigned", "✅", "assign", lanes["assign"]) + \
+           lane_html("Notify", "📬", "notify", lanes["notify"]) + \
+           lane_html("Skipped", "⚠️", "skip", lanes["skip"]) + \
+           '</div>'
 
 
 # =============================================================================
@@ -772,7 +811,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. Sticky left runline + AI-styled KPI & employee cards. Showcase mode guarantees Assign/Notify/Skip for executive demo.</p>
+  <p>Desktop-first view. Sticky left runline + KPI + <b>Kanban board</b> لنتائج الموظفين — واضح للأعداد الكبيرة. Showcase اختياري.</p>
 </div>
 """, unsafe_allow_html=True
     )
@@ -789,11 +828,12 @@ def main() -> None:
 </div>
 """, unsafe_allow_html=True)
 
-    # Demo controls (لا تؤثر على الإنتاج عند إيقافها)
+    # Demo controls
     with st.expander("🔧 Demo / Showcase Controls", expanded=False):
         show_showcase = st.checkbox("Ensure Assign + Notify + Skip (adds a demo nurse if needed)", value=True)
         lenient_mode = st.checkbox("Lenient eligibility (OR) for demo", value=True)
-        st.caption("عند إيقاف هذه الخيارات يعود السلوك إلى المنطق الأصلي الصارم (AND) بدون أي موظف إضافي.")
+        view_mode = st.radio("Employee results view", options=["Board (Kanban)", "Grid"], index=0, horizontal=True)
+        st.caption("عند إيقاف هذه الخيارات يعود السلوك إلى المنطق الأصلي الصارم (AND).")
 
     # Status
     status_placeholder = st.empty()
@@ -862,7 +902,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 + Employee Cards
+        # RIGHT: Overview + KPIs + Employee View
         with right:
             total_steps = len(events)
             total_ms = sum(int(e.get("dur_ms", 0) or 0) for e in events)
@@ -883,10 +923,11 @@ S101,ICU,Registered Nurse,ICU-trained,BLS/ALS certified,Night,12h,A&E,Arabic,202
 
             st.markdown(render_kpis(assigned, notified, skipped), unsafe_allow_html=True)
 
-            # ====== Employee glass cards (instead of a plain table) ======
+            # ====== Employee board/grid ======
             st.markdown("### 👥 Employee Results")
-            emp_cards_html = render_employee_cards(shift_assignment_results, reasoning_rows)
-            st.markdown(emp_cards_html, unsafe_allow_html=True)
+            mode = "board" if view_mode.startswith("Board") else "grid"
+            emp_html = render_employee_view(shift_assignment_results, reasoning_rows, mode=mode)
+            st.markdown(emp_html, unsafe_allow_html=True)
 
             # Optional: raw tables (hidden by default) for auditing/export
             with st.expander("Raw Summary (optional)", expanded=False):