Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,256 +1,48 @@
 """
-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:
-    * 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
+Health Matrix AI Command Center - Streamlit Application
+Modern AI-inspired healthcare workforce management platform
 """
 
-import os
-import time
-from io import StringIO
-from typing import List, Optional, Iterable, Dict, Any
-
+import streamlit as st
 import pandas as pd
+import time
+from datetime import datetime
+import os
+from typing import Dict, List, Any, Optional, Iterable
 import requests
-import streamlit as st
+from io import StringIO
 
 # Optional: OpenAI for GPT decisions (fails gracefully if missing)
 try:
-    import openai  # type: ignore
+    import openai
     HAS_OPENAI = True
 except Exception:
     openai = None
     HAS_OPENAI = False
 
-
 # =============================================================================
-# Embedded CSS  (Desktop-first, AI look)
+# Configuration & Setup
 # =============================================================================
-_EMBEDDED_CSS = """
-:root{
-  --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 ==== */
-.main .block-container{ max-width: 1600px !important; padding-left: 16px; padding-right: 16px }
-
-/* Base */
-html,body{
-  margin:0; padding:0; height:100%;
-  background:var(--bg); color:var(--t1);
-  font-family:'Segoe UI','Cairo','Tajawal','Open Sans',sans-serif;
-}
-h1,h2,h3{ margin:0 0 8px; color:var(--t1); text-align:center }
-p{ color:var(--t2) }
-
-/* Dataframes: sticky header + zebra */
-[data-testid="stDataFrame"] table thead th{
-  position: sticky; top: 0; z-index: 2;
-  background:#003b70 !important; color:#fff !important;
-}
-[data-testid="stDataFrame"] table tbody tr:nth-child(odd){ background:#f9fafb }
-[data-testid="stDataFrame"] table td{ padding:8px 10px }
-.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; margin-top:6px }
-
-/* ======================= HERO ======================= */
-.hero{ position:relative; text-align:center; padding:48px 8px 8px }
-.hero img{ width:170px; height:auto; margin-bottom:8px }
-.hero h1{
-  font-size:2.1rem; font-weight:900; line-height:1.25; margin:0 0 6px;
-  background:linear-gradient(90deg,var(--t1),var(--blue),var(--t1));
-  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
-  background-size:200% 100%; animation:aiTitle 8s ease-in-out infinite;
-}
-.hero p{ max-width:1150px; margin:0 auto; font-size:1.02rem }
-
-/* CTA */
-.stButton{ display:flex; justify-content:center; margin:10px 0 0 }
-.stButton>button{
-  padding:12px 26px; font-size:1.05rem; font-weight:800; color:#fff !important;
-  border:0 !important; border-radius:14px !important; cursor:pointer;
-  background:linear-gradient(120deg,var(--green),var(--blue),var(--green)) !important;
-  background-size:320% 320% !important; animation:aiGradient 8s ease-in-out infinite;
-  box-shadow:0 10px 20px rgba(0,0,0,.12); transition:transform .18s ease, box-shadow .18s ease
-}
-.stButton>button:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 0 22px rgba(54,186,1,.26) }
-
-/* Status Bar */
-.status-wrap{ display:flex; justify-content:center; margin:8px 0 }
-.status-bar{
-  display:flex; align-items:center; gap:10px; background:var(--soft); color:var(--t2);
-  border:1px solid var(--line); border-radius:12px; padding:8px 14px; font-size:.95rem
-}
-.pulse-dot{ width:10px; height:10px; border-radius:50%; background:var(--green);
-  box-shadow:0 0 0 0 rgba(54,186,1,.55); animation:pulse 1.4s infinite }
-.status-done{ background:#E8F7ED; border-color:#B6E2C4 }
-.status-done .pulse-dot{ background:var(--ok); box-shadow:none }
-
-/* Card */
-.card{
-  background:#fff; border:1px solid var(--line); border-radius:16px;
-  box-shadow:0 6px 16px rgba(0,0,0,.06); padding:14px; margin-bottom:12px
-}
-.card h4{ margin:0 0 6px }
-.card ul{ margin:8px 0 0 18px; color:#334155; font-size:.95rem; line-height:1.6 }
-
-/* Overview chips */
-.overview{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:4px 0 10px }
-.overview .chip{ font-size:.9rem; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#fff }
-.overview .chip b{ color:#0f172a }
-
-/* ================= 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);
-}
-.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 Cards – base ================= */
-.emp-card{
-  position:relative; overflow:hidden;
-  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:12px; transform: translateY(6px); opacity:0;
-  animation: cardIn .35s ease-out forwards;
-}
-.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,.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; padding:6px 8px; border-radius:12px }
-.emp-avatar{
-  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 }
-.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 }
-
-/* ====== 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 */
-@media (max-width: 1100px){ .cw-rail{ position:static } }  /* not sticky on small screens */
-
-.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; 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 }
-.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) }
-.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 }
-@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-item{ flex:1 1 calc(50% - 12px); transform:translateY(8px) }
-  .cw-item::before{ left:12px }
-}
-@media (max-width: 700px){ .cw-item{ flex:1 1 100% } }
-
-/* ===== Animations ===== */
-@keyframes aiTitle{0%{background-position:0 0}50%{background-position:100% 0}100%{background-position:0 0}}
-@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 } }
-"""
+
+def setup_page():
+    """Configure Streamlit page settings and load custom CSS"""
+    st.set_page_config(
+        page_title="Health Matrix AI Command Center",
+        page_icon="🏥",
+        layout="wide",
+        initial_sidebar_state="collapsed"
+    )
+    
+    # Load custom CSS
+    with open("src/style.css", "r", encoding="utf-8") as f:
+        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
 
 # =============================================================================
-# UKG API helpers (unchanged)
+# UKG API helpers (unchanged from original)
 # =============================================================================
+
 def _get_auth_header() -> Dict[str, str]:
+    """Get UKG API authentication headers"""
     app_key = os.environ.get("UKG_APP_KEY")
     token = os.environ.get("UKG_AUTH_TOKEN")
     if not app_key or not token:
@@ -266,8 +58,10 @@ def fetch_open_shifts(
     end_date: str = "3000-01-01",
     location_ids: Optional[Iterable[str]] = None,
 ) -> pd.DataFrame:
+    """Fetch open shifts from UKG API"""
     if location_ids is None:
         location_ids = ["2401", "2402", "2953", "2955", "2927", "2928", "2401", "2955"]
+    
     url = "https://partnerdemo-019.cfn.mykronos.com/api/v1/scheduling/schedule/multi_read"
     headers = _get_auth_header()
     payload = {
@@ -280,11 +74,13 @@ def fetch_open_shifts(
             }
         },
     }
+    
     try:
         r = requests.post(url, headers=headers, json=payload)
         r.raise_for_status()
         data = r.json()
         rows: List[Dict[str, Any]] = []
+        
         for shift in data.get("openShifts", []):
             rows.append({
                 "ID": shift.get("id"),
@@ -303,14 +99,20 @@ def fetch_open_shifts(
         return pd.DataFrame()
 
 def fetch_location_data(date: str = "2025-07-13", query: str = "Medsurg") -> pd.DataFrame:
+    """Fetch location data from UKG API"""
     url = "https://partnerdemo-019.cfn.mykronos.com/api/v1/commons/locations/multi_read"
     headers = _get_auth_header()
-    payload = {"multiReadOptions": {"includeOrgPathDetails": True}, "where": {"query": {"context": "ORG", "date": date, "q": query}}}
+    payload = {
+        "multiReadOptions": {"includeOrgPathDetails": True},
+        "where": {"query": {"context": "ORG", "date": date, "q": query}}
+    }
+    
     try:
         r = requests.post(url, headers=headers, json=payload)
         r.raise_for_status()
         data = r.json()
         rows = []
+        
         for item in data if isinstance(data, list) else data.get("locations", []):
             rows.append({
                 "Node ID": item.get("nodeId", ""),
@@ -326,6 +128,7 @@ def fetch_location_data(date: str = "2025-07-13", query: str = "Medsurg") -> pd.
         return pd.DataFrame()
 
 def fetch_employees(employee_ids: Iterable[int]) -> pd.DataFrame:
+    """Fetch employee data from UKG API"""
     base_url = "https://partnerdemo-019.cfn.mykronos.com/api/v1/commons/persons/"
     headers = _get_auth_header()
 
@@ -335,19 +138,23 @@ def fetch_employees(employee_ids: Iterable[int]) -> pd.DataFrame:
             if resp.status_code != 200:
                 st.warning(f"⚠️ Could not fetch employee {emp_id}: {resp.status_code}")
                 return None
+            
             data = resp.json()
             person_info = data.get("personInformation", {}).get("person", {})
             person_number = person_info.get("personNumber")
             full_name = person_info.get("fullName", "")
+            
             org_path = ""
             primary_accounts = data.get("jobAssignment", {}).get("primaryLaborAccounts", [])
             if primary_accounts:
                 org_path = primary_accounts[0].get("organizationPath", "")
+            
             phone = ""
             phones = data.get("personInformation", {}).get("telephoneNumbers", [])
             if phones:
                 phone = phones[0].get("phoneNumber", "")
 
+            # Fetch certifications
             cert_url = f"{base_url}certifications/{emp_id}"
             cert_resp = requests.get(cert_url, headers=headers)
             certs = []
@@ -361,12 +168,7 @@ def fetch_employees(employee_ids: Iterable[int]) -> pd.DataFrame:
                     for a in cert_data.get("assignments", []):
                         qual = a.get("certification", {}).get("qualifier")
                         if qual: certs.append(qual)
-                else:
-                    st.warning(f"Unrecognized cert format for {emp_id}: {cert_data}")
-            else:
-                st.warning(f"⚠️ Could not fetch certifications for {emp_id}")
 
-            # sanitize
             certs = [str(x).strip() for x in certs if x]
 
             return {
@@ -383,30 +185,38 @@ def fetch_employees(employee_ids: Iterable[int]) -> pd.DataFrame:
     records = []
     for emp_id in employee_ids:
         row = fetch_employee_data(emp_id)
-        if row: records.append(row)
+        if row: 
+            records.append(row)
 
     df = pd.DataFrame(records)
     for col in ["personNumber", "organizationPath", "phoneNumber", "fullName", "Certifications"]:
-        if col not in df.columns: df[col] = []
+        if col not in df.columns: 
+            df[col] = []
+    
     if "Languages" not in df.columns:
         df["Languages"] = [[] for _ in range(len(df))]
-    df["JobRole"] = df["organizationPath"].apply(lambda p: p.split("/")[-1] if isinstance(p, str) and p else "")
+    
+    df["JobRole"] = df["organizationPath"].apply(
+        lambda p: p.split("/")[-1] if isinstance(p, str) and p else ""
+    )
     return df
 
-
 # =============================================================================
-# Decision helpers
+# Decision Logic (unchanged from original)
 # =============================================================================
+
 def _has_any(tokens: List[str], haystack: str) -> bool:
+    """Check if any token exists in haystack"""
     hay = (haystack or "").lower()
     return any((t or "").strip().lower() in hay for t in tokens if t and t.strip())
 
 def _has_all_in_list(need: List[str], have: List[str]) -> bool:
+    """Check if all needed items exist in have list"""
     have_l = [h.lower() for h in (have or [])]
     return all(n.strip().lower() in have_l for n in need if n and n.strip())
 
 def is_eligible_strict(row: pd.Series, shift: pd.Series) -> bool:
-    """السلوك الأصلي: AND على كل المعايير."""
+    """Original strict eligibility logic: AND on all criteria"""
     role_req = str(shift.get("RoleRequired","")).strip().lower()
     specialty = str(shift.get("Specialty","")).replace("-", " ").strip().lower()
     mandatory = [t.strip() for t in str(shift.get("MandatoryTraining","")).replace(",", "/").split("/") if t.strip()]
@@ -420,10 +230,11 @@ def is_eligible_strict(row: pd.Series, shift: pd.Series) -> bool:
     training_ok = (not mandatory) or _has_all_in_list(mandatory, row.get("Certifications", []))
     ward_ok = (not ward) or _has_any([ward], row.get("organizationPath",""))
     lang_ok = (not lang_req) or (lang_req in [l.lower() for l in (row.get("Languages") or [])])
+    
     return role_ok and spec_ok and training_ok and ward_ok and lang_ok
 
 def is_eligible_lenient(row: pd.Series, shift: pd.Series) -> bool:
-    """وضع العرض: OR بين (الدور/الخبرة/التدريب) + احترام القسم/اللغة إن ذكرت."""
+    """Lenient eligibility: OR between role/specialty/training + respect ward/language if mentioned"""
     role_req = str(shift.get("RoleRequired","")).strip().lower()
     specialty = str(shift.get("Specialty","")).replace("-", " ").strip().lower()
     mandatory_raw = str(shift.get("MandatoryTraining",""))
@@ -441,12 +252,15 @@ def is_eligible_lenient(row: pd.Series, shift: pd.Series) -> bool:
     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 [])])
+    
     core_ok = role_ok or spec_ok or training_ok
     return core_ok and (not ward or ward_ok) and (not lang_req or lang_ok)
 
 def gpt_decide(shift: pd.Series, eligible_df: pd.DataFrame) -> Dict[str, str]:
+    """GPT-based decision making"""
     if not HAS_OPENAI or openai is None or not os.getenv("OPENAI_API_KEY"):
         return {"action": "skip"}
+    
     emp_list = []
     for _, r in eligible_df.iterrows():
         role_match = str(shift.get('RoleRequired','')) in (r.get("organizationPath") or "") or \
@@ -454,6 +268,7 @@ def gpt_decide(shift: pd.Series, eligible_df: pd.DataFrame) -> Dict[str, str]:
         mand_tokens = [t.strip() for t in str(shift.get("MandatoryTraining","")).replace(",", "/").split("/") if t.strip()]
         cert_ok = _has_all_in_list(mand_tokens, r.get("Certifications") or [])
         score = int(bool(role_match)) + int(bool(cert_ok))
+        
         emp_list.append({
             "fullName": r.get("fullName",""),
             "phoneNumber": r.get("phoneNumber",""),
@@ -461,29 +276,34 @@ def gpt_decide(shift: pd.Series, eligible_df: pd.DataFrame) -> Dict[str, str]:
             "Certifications": r.get("Certifications",[]),
             "matchScore": score
         })
+    
     prompt = f"""
-أنت مساعد ذكي للمناوبات:
-تفاصيل الشفت:
-- القسم: {shift.get('Department','')}
-- الدور المطلوب: {shift.get('RoleRequired','')}
-- التخصص/الخبرة: {shift.get('Specialty','')}
-- التدريب الإلزامي: {shift.get('MandatoryTraining','')}
-- نوع الشفت/المدة: {shift.get('ShiftType','')} / {shift.get('ShiftDuration','')}
-- القسم/الورد: {shift.get('WardDepartment','')}
-- اللغة المطلوبة: {shift.get('LanguageRequirement','')}
-- الوقت: {shift.get('ShiftTime','')}
-
-الموظفون المؤهلون (matchScore=0..2): {emp_list if emp_list else 'لا يوجد'}
-
-اختر JSON فقط:
-{{"action":"assign","employee":"الاسم"}} أو {{"action":"notify","employee":"الاسم"}} أو {{"action":"skip"}}
+You are an intelligent shift assignment assistant:
+Shift Details:
+- Department: {shift.get('Department','')}
+- Required Role: {shift.get('RoleRequired','')}
+- Specialty/Experience: {shift.get('Specialty','')}
+- Mandatory Training: {shift.get('MandatoryTraining','')}
+- Shift Type/Duration: {shift.get('ShiftType','')} / {shift.get('ShiftDuration','')}
+- Ward/Department: {shift.get('WardDepartment','')}
+- Language Required: {shift.get('LanguageRequirement','')}
+- Time: {shift.get('ShiftTime','')}
+
+Eligible Employees (matchScore=0..2): {emp_list if emp_list else 'None'}
+
+Choose JSON only:
+{{"action":"assign","employee":"Name"}} or {{"action":"notify","employee":"Name"}} or {{"action":"skip"}}
 """.strip()
+    
     try:
         resp = openai.ChatCompletion.create(
             model="gpt-4",
-            messages=[{"role":"system","content":"أنت مساعد ذكي لإدارة المناوبات الصحية"},
-                      {"role":"user","content":prompt}],
-            temperature=0.4, max_tokens=200,
+            messages=[
+                {"role":"system","content":"You are an intelligent healthcare shift management assistant"},
+                {"role":"user","content":prompt}
+            ],
+            temperature=0.4, 
+            max_tokens=200,
         )
         import ast
         return ast.literal_eval(resp["choices"][0]["message"]["content"])
@@ -491,34 +311,12 @@ def gpt_decide(shift: pd.Series, eligible_df: pd.DataFrame) -> Dict[str, str]:
         st.error(f"❌ GPT Error: {e}")
         return {"action": "skip"}
 
-
 # =============================================================================
-# Timeline: Chris Wright (HTML builder)
+# Showcase helpers (unchanged from original)
 # =============================================================================
-def render_cw_timeline(events: List[Dict[str, Any]]) -> str:
-    items = []
-    for ev in events:
-        cls = ev.get("status", "done")
-        dur = ev.get("dur_ms")
-        dur_txt = f"{int(dur)} ms" if isinstance(dur, (int, float)) else "—"
-        title = str(ev.get("title", ""))
-        desc = str(ev.get("desc", ""))
-        items.append(
-            f'''
-<li class="cw-item {cls}">
-  <div class="cw-title">{title}</div>
-  <div class="cw-meta">Duration: {dur_txt}</div>
-  <div class="cw-desc">{desc}</div>
-</li>'''
-        )
-    return '<ul class="cw-timeline cw-row">' + "".join(items) + '</ul>'
-
 
-# =============================================================================
-# Showcase helpers
-# =============================================================================
 def _append_demo_employee(df_employees: pd.DataFrame) -> pd.DataFrame:
-    """Adds a single demo RN with Arabic + BLS/ALS + A&E to guarantee an Assign in demo."""
+    """Adds a demo RN with Arabic + BLS/ALS + A&E to guarantee an Assign in demo"""
     demo = {
         "personNumber": "D-1001",
         "organizationPath": "Hospital/A&E/ICU/Registered Nurse",
@@ -535,33 +333,37 @@ def _append_demo_employee(df_employees: pd.DataFrame) -> pd.DataFrame:
     return pd.concat([df_employees, extra], ignore_index=True)
 
 def _score_match(row: pd.Series, shift: pd.Series) -> int:
-    """Simple score to rank candidates for showcase distribution."""
+    """Simple score to rank candidates for showcase distribution"""
     text_all = " ".join([
         row.get("JobRole",""), row.get("organizationPath",""),
         " ".join((row.get("Certifications") or [])), " ".join((row.get("Languages") or []))
     ]).lower()
+    
     role_req = str(shift.get("RoleRequired","")).strip().lower()
     specialty = str(shift.get("Specialty","")).replace("-", " ").strip().lower()
     ward = str(shift.get("WardDepartment","")).strip().lower()
     lang = str(shift.get("LanguageRequirement","")).strip().lower()
+    
     pts = 0
     if role_req and role_req in text_all: pts += 3
     if specialty and ("icu" in text_all or specialty.replace(" ", "") in text_all): pts += 2
     if ward and ward in text_all: pts += 1
     if lang and lang in text_all: pts += 1
     if any(tok in text_all for tok in ["bls", "als"]): pts += 2
+    
     return pts
 
-
 # =============================================================================
-# Agent runner
+# Agent runner (unchanged logic, updated for Streamlit UI)
 # =============================================================================
+
 def run_agent(
     employee_ids: Iterable[int],
     df_shifts: pd.DataFrame,
     showcase: bool = False,
     lenient: bool = False,
 ):
+    """Main agent execution logic"""
     events: List[Dict[str, Any]] = []
     shift_assignment_results: List[tuple] = []
     reasoning_rows: List[Dict[str, Any]] = []
@@ -572,12 +374,22 @@ def run_agent(
     if showcase and len(df_employees) < 3:
         df_employees = _append_demo_employee(df_employees)
     dur = (time.perf_counter() - t0) * 1000
+    
     loaded_txt = f"{len(df_employees)} employee(s) loaded successfully." if not df_employees.empty else "No employees returned or credentials invalid."
-    events.append({"title":"Fetch employees", "desc":loaded_txt, "status":"done", "dur_ms":max(int(dur),1)})
+    events.append({
+        "title": "Fetch employees", 
+        "desc": loaded_txt, 
+        "status": "done", 
+        "dur_ms": max(int(dur), 1)
+    })
 
     # 2) Evaluate shifts
     t_eval = time.perf_counter()
-    events.append({"title":"Evaluate open shifts", "desc":"Matching employees vs. role/specialty/training/ward…", "status":"done"})
+    events.append({
+        "title": "Evaluate open shifts", 
+        "desc": "Matching employees vs. role/specialty/training/ward…", 
+        "status": "done"
+    })
 
     elig_fn = is_eligible_lenient if lenient else is_eligible_strict
 
@@ -590,54 +402,90 @@ def run_agent(
             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)
+            
             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
+            cand_skip = ranked.iloc[-1] if len(ranked) > 2 else None
 
             if cand_assign is not None:
-                name = cand_assign.get("fullName","Candidate A")
-                events.append({"title":f"Assigned {name}", "desc":f"{name} → {shift.get('Department','')} ({shift.get('ShiftType','')}, {shift.get('ShiftDuration','')})", "status":"done"})
+                name = cand_assign.get("fullName", "Candidate A")
+                events.append({
+                    "title": f"Assigned {name}", 
+                    "desc": f"{name} → {shift.get('Department','')} ({shift.get('ShiftType','')}, {shift.get('ShiftDuration','')})", 
+                    "status": "done"
+                })
                 shift_assignment_results.append((name, shift["ShiftID"], "✅ Auto-Filled"))
 
             if cand_notify is not None:
-                name = cand_notify.get("fullName","Candidate B")
-                events.append({"title":f"Notify {name}", "desc":f"Send notification for {shift['ShiftID']}", "status":"done"})
+                name = cand_notify.get("fullName", "Candidate B")
+                events.append({
+                    "title": f"Notify {name}", 
+                    "desc": f"Send notification for {shift['ShiftID']}", 
+                    "status": "done"
+                })
                 shift_assignment_results.append((name, shift["ShiftID"], "📨 Notify"))
 
             if cand_skip is not None:
-                name = cand_skip.get("fullName","Candidate C")
-                events.append({"title":"Skipped", "desc":f"No eligible employees or decision skipped (e.g., low match for {name})", "status":"done"})
+                name = cand_skip.get("fullName", "Candidate C")
+                events.append({
+                    "title": "Skipped", 
+                    "desc": f"No eligible employees or decision skipped (e.g., low match for {name})", 
+                    "status": "done"
+                })
                 shift_assignment_results.append((name, shift["ShiftID"], "⚠️ Skipped"))
 
             ai_dur = (time.perf_counter() - t_ai) * 1000
-            events.insert(-3, {"title":"AI decision", "desc":"Showcase distribution Assign/Notify/Skip", "status":"done", "dur_ms":max(int(ai_dur),1)})
+            events.insert(-3, {
+                "title": "AI decision", 
+                "desc": "Showcase distribution Assign/Notify/Skip", 
+                "status": "done", 
+                "dur_ms": max(int(ai_dur), 1)
+            })
         else:
-            events.append({"title":"AI decision", "desc":"Select assign / notify / skip", "status":"done"})
+            events.append({
+                "title": "AI decision", 
+                "desc": "Select assign / notify / skip", 
+                "status": "done"
+            })
             decision = gpt_decide(shift, eligible)
             ai_dur = (time.perf_counter() - t_ai) * 1000
-            events[-1]["dur_ms"] = max(int(ai_dur),1)
+            events[-1]["dur_ms"] = max(int(ai_dur), 1)
 
             if decision.get("action") == "assign":
                 emp = decision.get("employee")
-                events.append({"title":f"Assigned {emp}", "desc":f"{emp} → {shift.get('Department','')} ({shift.get('ShiftType','')}, {shift.get('ShiftDuration','')})", "status":"done"})
+                events.append({
+                    "title": f"Assigned {emp}", 
+                    "desc": f"{emp} → {shift.get('Department','')} ({shift.get('ShiftType','')}, {shift.get('ShiftDuration','')})", 
+                    "status": "done"
+                })
                 shift_assignment_results.append((emp, shift["ShiftID"], "✅ Auto-Filled"))
             elif decision.get("action") == "notify":
                 emp = decision.get("employee")
-                events.append({"title":f"Notify {emp}", "desc":f"Send notification for {shift['ShiftID']}", "status":"done"})
+                events.append({
+                    "title": f"Notify {emp}", 
+                    "desc": f"Send notification for {shift['ShiftID']}", 
+                    "status": "done"
+                })
                 shift_assignment_results.append((emp, shift["ShiftID"], "📨 Notify"))
             else:
-                events.append({"title":"Skipped", "desc":"No eligible employees or decision skipped", "status":"done"})
+                events.append({
+                    "title": "Skipped", 
+                    "desc": "No eligible employees or decision skipped", 
+                    "status": "done"
+                })
                 shift_assignment_results.append(("❌ No eligible", shift["ShiftID"], "⚠️ Skipped"))
 
-        # Reasoning rows
+        # Generate reasoning rows for each employee
         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()
             spec_ok = (spec and ("icu" in text_all or spec.replace(" ", "") in text_all))
+            
             training_need = [t.strip().lower() for t in str(shift.get("MandatoryTraining","")).replace(",", "/").split("/") if t.strip()]
             training_ok_strict = all(t in [c.lower() for c in (emp_row.get("Certifications",[]) or [])] for t in training_need)
             training_ok_len = all(any(mtok in text_all for mtok in [t, t.replace(" certified","")]) for t in training_need) if training_need else True
+            
             ward_ok = not str(shift.get("WardDepartment","")).strip() or str(shift.get("WardDepartment","")).lower() in (emp_row.get("organizationPath","").lower())
             lang_req = str(shift.get("LanguageRequirement","")).strip().lower()
             lang_ok = (not lang_req) or (lang_req in [l.lower() for l in (emp_row.get("Languages") or [])])
@@ -645,7 +493,7 @@ def run_agent(
             if lenient:
                 status = "✅ Eligible" if (role_match or spec_ok or training_ok_len) and ward_ok and lang_ok else "❌ Not Eligible"
             else:
-                status = "✅ Eligible" if ( (role_match or spec_ok) and training_ok_strict and ward_ok and lang_ok ) else "❌ Not Eligible"
+                status = "✅ Eligible" if ((role_match or spec_ok) and training_ok_strict and ward_ok and lang_ok) else "❌ Not Eligible"
 
             reasoning_rows.append({
                 "Employee": emp_row.get("fullName",""),
@@ -664,295 +512,407 @@ def run_agent(
     eval_dur = (time.perf_counter() - t_eval) * 1000
     for e in events:
         if e["title"] == "Evaluate open shifts":
-            e["dur_ms"] = max(int(eval_dur),1)
+            e["dur_ms"] = max(int(eval_dur), 1)
             break
 
-    events.append({"title":"Summary ready", "desc":"AI finished processing shifts", "status":"current"})
+    events.append({
+        "title": "Summary ready", 
+        "desc": "AI finished processing shifts", 
+        "status": "current"
+    })
+    
     return events, shift_assignment_results, reasoning_rows
 
-
 # =============================================================================
-# Helpers: KPI & Employee Cards (HTML)
+# UI Components
 # =============================================================================
-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 _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>
+def render_hero():
+    """Render the hero section with AI-inspired design"""
+    st.markdown("""
+    <div class="hero-section">
+        <div class="hero-content">
+            <div class="hero-logo">
+                <img src="https://www.healthmatrixcorp.com/web/image/website/1/logo/Health%20Matrix?unique=956ad7b" alt="Health Matrix" />
+            </div>
+            <h1 class="hero-title">
+                <span class="gradient-text">AI Command Center</span>
+                <br>
+                <span class="subtitle">Smart Staffing & Actions</span>
+            </h1>
+            <p class="hero-description">
+                Transform healthcare delivery with AI-driven workforce management, predictive analytics, 
+                and intelligent automation that ensures compliance while optimizing patient care.
+            </p>
+            <div class="hero-stats">
+                <div class="stat-item">
+                    <div class="stat-value">99.9%</div>
+                    <div class="stat-label">Compliance Rate</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value">45%</div>
+                    <div class="stat-label">Efficiency Gain</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value">&lt;2min</div>
+                    <div class="stat-label">Response Time</div>
+                </div>
+            </div>
+        </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:
-    """
-    mode = 'board' (Kanban) or 'grid'
-    """
-    # map actions
-    action_by_emp: Dict[str, str] = {}
-    shift_by_emp: Dict[str, str] = {}
+    """, unsafe_allow_html=True)
+
+def render_kpi_cards(assigned: int, notified: int, skipped: int):
+    """Render KPI cards with animations"""
+    st.markdown(f"""
+    <div class="kpi-grid">
+        <div class="kpi-card kpi-assigned">
+            <div class="kpi-icon">✅</div>
+            <div class="kpi-value">{assigned}</div>
+            <div class="kpi-label">Auto-Assigned</div>
+            <div class="kpi-change">+15%</div>
+        </div>
+        <div class="kpi-card kpi-notify">
+            <div class="kpi-icon">📨</div>
+            <div class="kpi-value">{notified}</div>
+            <div class="kpi-label">Notifications Sent</div>
+            <div class="kpi-change">-8%</div>
+        </div>
+        <div class="kpi-card kpi-skipped">
+            <div class="kpi-icon">⚠️</div>
+            <div class="kpi-value">{skipped}</div>
+            <div class="kpi-label">Skipped</div>
+            <div class="kpi-change">-23%</div>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+
+def render_timeline(events: List[Dict[str, Any]]):
+    """Render the AI agent timeline"""
+    st.markdown('<div class="timeline-container">', unsafe_allow_html=True)
+    st.markdown("### 🕒 Agent Timeline")
+    
+    timeline_html = '<div class="timeline">'
+    for i, event in enumerate(events):
+        status_class = event.get("status", "done")
+        duration = event.get("dur_ms", 0)
+        duration_text = f"{int(duration)} ms" if duration else "—"
+        
+        timeline_html += f"""
+        <div class="timeline-item {status_class}">
+            <div class="timeline-marker"></div>
+            <div class="timeline-content">
+                <div class="timeline-title">{event.get('title', '')}</div>
+                <div class="timeline-meta">Duration: {duration_text}</div>
+                <div class="timeline-desc">{event.get('desc', '')}</div>
+            </div>
+        </div>
+        """
+    
+    timeline_html += '</div>'
+    st.markdown(timeline_html, unsafe_allow_html=True)
+    st.markdown('</div>', unsafe_allow_html=True)
+
+def render_employee_board(shift_results: List[tuple], reasoning_rows: List[Dict[str, Any]]):
+    """Render employee results in Kanban board style"""
+    # Map actions to employees
+    action_by_emp = {}
+    shift_by_emp = {}
     for emp, sid, status in shift_results:
         if emp and not str(emp).startswith("❌"):
             action_by_emp[str(emp)] = status
             shift_by_emp[str(emp)] = str(sid)
 
-    # aggregate employees (first reasoning row per employee)
+    # Aggregate employees
     seen = set()
-    employees: List[Dict[str,Any]] = []
+    employees = []
     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",""),
-            "action": action_by_emp.get(emp,"")
+            "shift": r.get("ShiftID", ""),
+            "eligible": r.get("Eligible", ""),
+            "reasoning": r.get("Reasoning", ""),
+            "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>'
-
-    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>'
-
-    # 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>
-"""
+        st.info("No employee details available.")
+        return
 
-    return '<div class="board">' + \
-           lane_html("Assigned", "✅", "assign", lanes["assign"]) + \
-           lane_html("Notify", "📬", "notify", lanes["notify"]) + \
-           lane_html("Skipped", "⚠️", "skip", lanes["skip"]) + \
-           '</div>'
+    # Categorize employees into lanes
+    lanes = {"assigned": [], "notify": [], "skipped": []}
+    
+    for emp in employees:
+        action = emp["action"].lower()
+        if "auto-filled" in action or "assign" in action:
+            lane = "assigned"
+        elif "notify" in action:
+            lane = "notify"
+        else:
+            # No explicit decision: move eligible to notify for review, rest to skip
+            lane = "notify" if emp["eligible"].startswith("✅") else "skipped"
+        
+        lanes[lane].append(emp)
 
+    # Render Kanban board
+    st.markdown("""
+    <div class="kanban-board">
+        <div class="kanban-lane">
+            <div class="lane-header assigned-header">
+                <span class="lane-icon">✅</span>
+                <span class="lane-title">Assigned</span>
+                <span class="lane-count">{}</span>
+            </div>
+            <div class="lane-content">
+    """.format(len(lanes["assigned"])), unsafe_allow_html=True)
+    
+    for emp in lanes["assigned"]:
+        render_employee_card(emp, "assigned")
+    
+    st.markdown("""
+            </div>
+        </div>
+        <div class="kanban-lane">
+            <div class="lane-header notify-header">
+                <span class="lane-icon">📨</span>
+                <span class="lane-title">Notify</span>
+                <span class="lane-count">{}</span>
+            </div>
+            <div class="lane-content">
+    """.format(len(lanes["notify"])), unsafe_allow_html=True)
+    
+    for emp in lanes["notify"]:
+        render_employee_card(emp, "notify")
+    
+    st.markdown("""
+            </div>
+        </div>
+        <div class="kanban-lane">
+            <div class="lane-header skipped-header">
+                <span class="lane-icon">⚠️</span>
+                <span class="lane-title">Skipped</span>
+                <span class="lane-count">{}</span>
+            </div>
+            <div class="lane-content">
+    """.format(len(lanes["skipped"])), unsafe_allow_html=True)
+    
+    for emp in lanes["skipped"]:
+        render_employee_card(emp, "skipped")
+    
+    st.markdown("""
+            </div>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+
+def render_employee_card(emp: Dict[str, Any], lane: str):
+    """Render individual employee card"""
+    name = emp["name"]
+    shift = emp["shift"]
+    reasoning = emp["reasoning"]
+    certs = emp["certs"]
+    action = emp["action"]
+    
+    # Get initials for avatar
+    initials = "".join([word[0] for word in name.split()[:2]]).upper() if name else "?"
+    
+    # Parse reasoning for badges
+    checks = [x.strip() for x in str(reasoning or "").split("|") if x and x.strip()]
+    badges_html = ""
+    
+    for check in checks:
+        is_ok = "✅" in check
+        label = check.replace("✅", "").replace("❌", "").strip()
+        badge_class = "badge-ok" if is_ok else "badge-fail"
+        badges_html += f'<div class="emp-badge {badge_class}"><span class="badge-dot"></span><span>{label}</span></div>'
+    
+    # Determine chip status
+    chip_text = action or ("✅ Eligible" if emp["eligible"].startswith("✅") else "❌ Not Eligible")
+    chip_class = "chip-ok" if "✅" in chip_text or "Auto-Filled" in chip_text else "chip-warn" if "Notify" in chip_text else "chip-fail"
+    
+    st.markdown(f"""
+    <div class="employee-card {lane}-card">
+        <div class="emp-header">
+            <div class="emp-avatar">{initials}</div>
+            <div class="emp-info">
+                <div class="emp-name">{name}</div>
+                <div class="emp-shift">Shift: {shift}</div>
+            </div>
+            <div class="emp-chip {chip_class}">{chip_text}</div>
+        </div>
+        <div class="emp-divider"></div>
+        <div class="emp-badges">
+            {badges_html if badges_html else '<div class="emp-badge badge-info"><span class="badge-dot"></span><span>No reasoning available</span></div>'}
+        </div>
+        <div class="emp-footer">
+            <div class="emp-certs">🪪 Certifications: {certs or "—"}</div>
+            <div class="emp-meta">Updated just now</div>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+
+def render_status_indicator(status: str, message: str):
+    """Render status indicator with pulsing animation"""
+    if status == "processing":
+        st.markdown(f"""
+        <div class="status-indicator processing">
+            <div class="status-dot pulsing"></div>
+            <span>{message}</span>
+        </div>
+        """, unsafe_allow_html=True)
+    elif status == "completed":
+        st.markdown(f"""
+        <div class="status-indicator completed">
+            <div class="status-dot completed"></div>
+            <span>{message}</span>
+        </div>
+        """, unsafe_allow_html=True)
+    else:
+        st.markdown(f"""
+        <div class="status-indicator ready">
+            <div class="status-dot ready"></div>
+            <span>{message}</span>
+        </div>
+        """, unsafe_allow_html=True)
 
 # =============================================================================
-# UI
+# Main Application
 # =============================================================================
-def main() -> None:
-    st.set_page_config(page_title="Health Matrix AI Command Center", layout="wide")
-    st.markdown(f"<style>{_EMBEDDED_CSS}</style>", unsafe_allow_html=True)
-
-    # HERO
-    st.markdown(
-        """
-<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 + KPI + <b>Kanban board</b> لنتائج الموظفين — واضح للأعداد الكبيرة. Showcase اختياري.</p>
-</div>
-""", unsafe_allow_html=True
-    )
 
+def main():
+    """Main Streamlit application"""
+    setup_page()
+    
+    # Hero Section
+    render_hero()
+    
     # Business Case
     st.markdown("""
-<div class="card" dir="auto" style="max-width:1400px;margin:0 auto 8px;">
-  <h4>Business Case — Open Shifts Auto-Fulfillment</h4>
-  <ul>
-    <li>✅ Reduce time to fill critical shifts</li>
-    <li>📜 Enforce mandatory certifications & policies</li>
-    <li>📊 Transparent Agent Runline (steps + durations)</li>
-  </ul>
-</div>
-""", unsafe_allow_html=True)
-
-    # Demo controls
+    <div class="business-case">
+        <h4>Business Case — Open Shifts Auto-Fulfillment</h4>
+        <ul>
+            <li>✅ Reduce time to fill critical shifts</li>
+            <li>📜 Enforce mandatory certifications & policies</li>
+            <li>📊 Transparent Agent Timeline (steps + durations)</li>
+        </ul>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    # 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)
-        view_mode = st.radio("Employee results view", options=["Board (Kanban)", "Grid"], index=0, horizontal=True)
-        st.caption("عند إيقاف هذه الخيارات يعود السلوك إلى المنطق الأصلي الصارم (AND).")
-
-    # Status
+        col1, col2 = st.columns(2)
+        with col1:
+            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
+            )
+        with col2:
+            st.caption("When these options are disabled, behavior returns to original strict logic (AND).")
+    
+    # Status Indicator
     status_placeholder = st.empty()
-    status_placeholder.markdown(
-        """
-<div class="status-wrap" role="status" aria-live="polite">
-  <div class="status-bar">
-    <span class="pulse-dot"></span>
-    <span>Ready – Click “Start AI Agent” to evaluate shifts</span>
-  </div>
-</div>
-""", unsafe_allow_html=True
-    )
-
-    # Demo input (unchanged behavior)
+    with status_placeholder.container():
+        render_status_indicator("ready", "Ready – Click 'Start AI Agent' to evaluate shifts")
+    
+    # Demo Data (unchanged from original)
     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"""
     df_shifts_default = pd.read_csv(StringIO(shift_data))
-
-    # CTA
-    _, cta, _ = st.columns([1,2,1])
-    with cta:
-        run_clicked = st.button("▶️ Start AI Agent", key="start_agent", help="Let the AI handle the work")
-
-    if run_clicked:
-        status_placeholder.markdown(
-            """
-<div class="status-wrap" role="status" aria-live="polite">
-  <div class="status-bar">
-    <span class="pulse-dot"></span>
-    <span>Processing – contacting UKG APIs and evaluating shifts...</span>
-  </div>
-</div>
-""", unsafe_allow_html=True
-        )
-
-        # Run agent
+    
+    # Main CTA Button
+    st.markdown('<div class="cta-container">', unsafe_allow_html=True)
+    if st.button("▶️ Start AI Agent", key="start_agent", help="Let the AI handle the work"):
+        
+        # Update status to processing
+        with status_placeholder.container():
+            render_status_indicator("processing", "Processing – contacting UKG APIs and evaluating shifts...")
+        
+        # Run the agent
         try:
             events, shift_assignment_results, reasoning_rows = run_agent(
-                employee_ids_default, df_shifts_default,
-                showcase=show_showcase, lenient=lenient_mode
+                employee_ids_default, 
+                df_shifts_default,
+                showcase=show_showcase, 
+                lenient=lenient_mode
             )
-        except Exception as e:
-            st.error(f"Unexpected error: {e}")
-            return
-
-        status_placeholder.markdown(
-            """
-<div class="status-wrap" role="status" aria-live="polite">
-  <div class="status-bar status-done">
-    <span class="pulse-dot"></span>
-    <span>Completed – results below</span>
-  </div>
-</div>
-""", unsafe_allow_html=True
-        )
-
-        # ----- DESKTOP LAYOUT: Left sticky timeline + right content -----
-        left, right = st.columns([3, 9], gap="large")
-
-        # LEFT: Timeline (sticky rail on desktop)
-        with left:
-            st.markdown("### 🕒 Agent Runline")
-            st.markdown('<div class="cw-rail">', unsafe_allow_html=True)
-            st.markdown(render_cw_timeline(events), unsafe_allow_html=True)
-            st.markdown('</div>', unsafe_allow_html=True)
-
-        # 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)
+            
+            # Update status to completed
+            with status_placeholder.container():
+                render_status_indicator("completed", "Completed – results below")
+            
+            # Calculate metrics
             assigned = sum(1 for e in shift_assignment_results if "Auto-Filled" in e[2])
             notified = sum(1 for e in shift_assignment_results if "Notify" in e[2])
             skipped = sum(1 for e in shift_assignment_results if "Skip" in e[2] or "Skipped" in e[2])
-
-            st.markdown('<div class="overview">', unsafe_allow_html=True)
-            st.markdown(
-                f'<span class="chip">🧠 <b>Agent Steps:</b> {total_steps}</span>'
-                f'<span class="chip">⏱️ <b>Total Duration:</b> {total_ms} ms</span>'
-                f'<span class="chip">✅ <b>Assigned:</b> {assigned}</span>'
-                f'<span class="chip">📬 <b>Notify:</b> {notified}</span>'
-                f'<span class="chip">⚠️ <b>Skipped:</b> {skipped}</span>',
-                unsafe_allow_html=True
-            )
-            st.markdown('</div>', unsafe_allow_html=True)
-
-            st.markdown(render_kpis(assigned, notified, skipped), unsafe_allow_html=True)
-
-            # ====== Employee board/grid ======
-            st.markdown("### 👥 Employee Results")
-            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):
-                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)
-                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("Click “▶️ Start AI Agent” to see the sticky timeline and AI-styled results.")
-
+            
+            # Layout: Timeline on left, Results on right
+            col1, col2 = st.columns([1, 2], gap="large")
+            
+            with col1:
+                render_timeline(events)
+            
+            with col2:
+                # Overview metrics
+                total_steps = len(events)
+                total_ms = sum(int(e.get("dur_ms", 0) or 0) for e in events)
+                
+                st.markdown(f"""
+                <div class="overview-metrics">
+                    <div class="metric-chip">🧠 <strong>Agent Steps:</strong> {total_steps}</div>
+                    <div class="metric-chip">⏱️ <strong>Total Duration:</strong> {total_ms} ms</div>
+                    <div class="metric-chip">✅ <strong>Assigned:</strong> {assigned}</div>
+                    <div class="metric-chip">📬 <strong>Notify:</strong> {notified}</div>
+                    <div class="metric-chip">⚠️ <strong>Skipped:</strong> {skipped}</div>
+                </div>
+                """, unsafe_allow_html=True)
+                
+                # KPI Cards
+                render_kpi_cards(assigned, notified, skipped)
+                
+                # Employee Results
+                st.markdown("### 👥 Employee Results")
+                render_employee_board(shift_assignment_results, reasoning_rows)
+                
+                # Optional: Raw data tables
+                with st.expander("Raw Summary (optional)", expanded=False):
+                    if shift_assignment_results:
+                        st.markdown("**Assignment Summary:**")
+                        st.dataframe(
+                            pd.DataFrame(shift_assignment_results, columns=["Employee", "ShiftID", "Status"]),
+                            use_container_width=True
+                        )
+                    
+                    if reasoning_rows:
+                        st.markdown("**Detailed Reasoning:**")
+                        st.dataframe(pd.DataFrame(reasoning_rows), use_container_width=True)
+        
+        except Exception as e:
+            st.error(f"Unexpected error: {e}")
+            with status_placeholder.container():
+                render_status_indicator("ready", "Error occurred – please try again")
+    
+    st.markdown('</div>', unsafe_allow_html=True)
+    
     # Footer
-    st.markdown(
-        """
-<hr/>
-<div style="text-align:center;color:#64748B;font-size:13px">
-© 2025 Health Matrix Corp – Empowering Digital Health Transformation · <a href="mailto:info@healthmatrixcorp.com">info@healthmatrixcorp.com</a>
-</div>
-""", unsafe_allow_html=True
-    )
+    st.markdown("""
+    <div class="footer">
+        <hr/>
+        <div class="footer-content">
+            © 2025 Health Matrix Corp – Empowering Digital Health Transformation · 
+            <a href="mailto:info@healthmatrixcorp.com">info@healthmatrixcorp.com</a>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
 
 if __name__ == "__main__":
-    main()
+    main()