Update src/ui_components_original.py

src/ui_components_original.py

@@ -376,12 +376,18 @@ button.gr-button:hover, button.gr-button-primary:hover {
 """
 
     def create_interface(self):
-        """Create the main Gradio interface with comprehensive analysis display"""
-        with gr.Blocks(css=self.get_custom_css(), title="SmartHeal - AI Wound Care Assistant") as app:
-            
-            # Header with SmartHeal logo
+        """Create the main Gradio interface with View Details + Search Specific Patient."""
+        import html
+        import gradio as gr
+        import os
+        import logging
+        from datetime import datetime
+    
+        with gr.Blocks(css=self.get_custom_css(), title="SmartHeal - SmartHeal AI Wound Care Assistant") as app:
+    
+            # -------------------------- HEADER --------------------------
             logo_url = "https://scontent.fccu31-2.fna.fbcdn.net/v/t39.30808-6/275933824_102121829111657_3325198727201325354_n.jpg?_nc_cat=104&ccb=1-7&_nc_sid=6ee11a&_nc_ohc=45krrEUpcSUQ7kNvwGVdiMW&_nc_oc=AdkTdxEC_TkYGiyDkEtTJZ_DFZELW17XKFmWpswmFqGB7JSdvTyWtnrQyLS0USngEiY&_nc_zt=23&_nc_ht=scontent.fccu31-2.fna&_nc_gid=ufAA4Hj5gTRwON5POYzz0Q&oh=00_AfW1-jLEN5RGeggqOvGgEaK_gdg0EDgxf_VhKbZwFLUO0Q&oe=6897A98B"
-            
+    
             gr.HTML(f"""
             <div class="medical-header">
                 <img src="{logo_url}" class="logo" alt="SmartHeal Logo">
@@ -391,525 +397,452 @@ button.gr-button:hover, button.gr-button-primary:hover {
                 </div>
             </div>
             """)
-            
-            # Professional disclaimer
+    
+            # Disclaimer
             gr.HTML("""
-        <div style="border: 2px solid #FF6B6B; background-color: #FFE5E5; padding: 15px; border-radius: 12px; margin: 10px 0;">
-            <h3 style="color: #D63031; margin-top: 0;">⚠️ IMPORTANT DISCLAIMER</h3>
-            <p><strong>This model is for testing and educational purposes only and is NOT a replacement for professional medical advice.</strong></p>
-            <p>Information generated may be inaccurate. Always consult a qualified healthcare provider for medical concerns. This AI system uses chain-of-thought reasoning to show its decision-making process, but should never be used as the sole basis for clinical decisions.</p>
-            <p><em>Uploaded images may be stored and used for testing and model improvement purposes.</em></p>
-        </div>
-        """)
-            
-            # Main interface with conditional visibility
+            <div style="border: 2px solid #FF6B6B; background-color: #FFE5E5; padding: 15px; border-radius: 12px; margin: 10px 0;">
+                <h3 style="color: #D63031; margin-top: 0;">⚠️ IMPORTANT DISCLAIMER</h3>
+                <p><strong>This model is for testing and educational purposes only and is NOT a replacement for professional medical advice.</strong></p>
+                <p>Information generated may be inaccurate. Always consult a qualified healthcare provider for medical concerns.</p>
+            </div>
+            """)
+    
+            # -------------------------- LAYOUT --------------------------
             with gr.Row():
-                # Authentication Panel (visible when not logged in)
+                # ---------------------- AUTH PANEL -----------------------
                 with gr.Column(visible=True) as auth_panel:
                     gr.HTML("""
                     <div style="text-align: center; margin: 40px 0;">
                         <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); max-width: 500px; margin: 0 auto;">
-                            <h2 style="color: white; font-size: 2.5rem; margin-bottom: 10px; font-weight: 700;">🏥 SmartHeal Access</h2>
-                            <p style="color: rgba(255,255,255,0.9); font-size: 1.1rem; margin-bottom: 30px;">Secure Healthcare Professional Portal</p>
+                            <h2 style="color: white; font-size: 2.2rem; margin-bottom: 10px; font-weight: 700;">🏥 SmartHeal Access</h2>
+                            <p style="color: rgba(255,255,255,0.95); font-size: 1rem; margin-bottom: 0;">Secure Healthcare Professional Portal</p>
                         </div>
                     </div>
                     """)
-                    
+    
                     with gr.Tabs():
-                        with gr.Tab("🔐 Professional Login") as login_tab:
-                            gr.HTML("""
-                            <div style="background: white; padding: 40px; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); margin: 20px auto; max-width: 450px;">
-                                <div style="text-align: center; margin-bottom: 30px;">
-                                    <h3 style="color: #2d3748; font-size: 1.8rem; margin-bottom: 8px;">Welcome Back</h3>
-                                    <p style="color: #718096; font-size: 1rem;">Access your professional dashboard</p>
-                                </div>
-                            </div>
-                            """)
-                            
-                            login_username = gr.Textbox(
-                                label="👤 Username", 
-                                placeholder="Enter your username"
-                            )
-                            login_password = gr.Textbox(
-                                label="🔒 Password", 
-                                type="password", 
-                                placeholder="Enter your secure password"
-                            )
-                            
-                            login_btn = gr.Button(
-                                "🚀 Sign In to Dashboard", 
-                                variant="primary", 
-                                size="lg"
-                            )
-                            
-                            login_status = gr.HTML(
-                                value="<div style='text-align: center; color: #718096; font-size: 0.9rem; margin-top: 15px;'>Enter your credentials to access the system</div>"
-                            )
-
-                        with gr.Tab("📝 New Registration") as signup_tab:
-                            gr.HTML("""
-                            <div style="background: white; padding: 40px; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); margin: 20px auto; max-width: 450px;">
-                                <div style="text-align: center; margin-bottom: 30px;">
-                                    <h3 style="color: #2d3748; font-size: 1.8rem; margin-bottom: 8px;">Create Account</h3>
-                                    <p style="color: #718096; font-size: 1rem;">Join the SmartHeal healthcare network</p>
-                                </div>
-                            </div>
-                            """)
-                            
-                            signup_username = gr.Textbox(
-                                label="👤 Username", 
-                                placeholder="Choose a unique username"
-                            )
-                            signup_email = gr.Textbox(
-                                label="📧 Email Address", 
-                                placeholder="Enter your professional email"
-                            )
-                            signup_password = gr.Textbox(
-                                label="🔒 Password", 
-                                type="password", 
-                                placeholder="Create a strong password"
-                            )
-                            signup_name = gr.Textbox(
-                                label="👨‍⚕️ Full Name", 
-                                placeholder="Enter your full professional name"
-                            )
-                            signup_role = gr.Radio(
-                                ["practitioner", "organization"], 
-                                label="🏥 Account Type", 
-                                value="practitioner"
-                            )
-                            
-                            # Organization-specific fields
+                        with gr.Tab("🔐 Professional Login"):
+                            login_username = gr.Textbox(label="👤 Username", placeholder="Enter your username")
+                            login_password = gr.Textbox(label="🔒 Password", type="password", placeholder="Enter your secure password")
+                            login_btn = gr.Button("🚀 Sign In to Dashboard", variant="primary")
+                            login_status = gr.HTML("<div style='text-align:center;color:#718096;font-size:0.9rem;margin-top:8px;'>Enter your credentials to access the system</div>")
+    
+                        with gr.Tab("📝 New Registration"):
+                            signup_username = gr.Textbox(label="👤 Username", placeholder="Choose a unique username")
+                            signup_email = gr.Textbox(label="📧 Email Address", placeholder="Enter your professional email")
+                            signup_password = gr.Textbox(label="🔒 Password", type="password", placeholder="Create a strong password")
+                            signup_name = gr.Textbox(label="👨‍⚕️ Full Name", placeholder="Enter your full professional name")
+                            signup_role = gr.Radio(["practitioner", "organization"], label="🏥 Account Type", value="practitioner")
+    
                             with gr.Group(visible=False) as org_fields:
-                                gr.HTML("<h4 style='color: #2d3748; margin: 20px 0 10px 0;'>🏢 Organization Details</h4>")
+                                gr.HTML("<h4 style='color:#2d3748;margin: 12px 0 8px 0;'>🏢 Organization Details</h4>")
                                 org_name = gr.Textbox(label="Organization Name", placeholder="Enter organization name")
                                 phone = gr.Textbox(label="Phone Number", placeholder="Enter contact number")
                                 country_code = gr.Textbox(label="Country Code", placeholder="e.g., +1, +44")
                                 department = gr.Textbox(label="Department", placeholder="e.g., Emergency, Surgery")
                                 location = gr.Textbox(label="Location", placeholder="City, State/Province, Country")
-                            
-                            # Practitioner-specific fields
+    
                             with gr.Group(visible=True) as prac_fields:
-                                gr.HTML("<h4 style='color: #2d3748; margin: 20px 0 10px 0;'>🏥 Affiliation</h4>")
-                                organization_dropdown = gr.Dropdown(
-                                    choices=self.get_organizations_dropdown(), 
-                                    label="Select Your Organization"
-                                )
-                            
-                            signup_btn = gr.Button(
-                                "✨ Create Professional Account", 
-                                variant="primary", 
-                                size="lg"
-                            )
-                            
-                            signup_status = gr.HTML(
-                                value="<div style='text-align: center; color: #718096; font-size: 0.9rem; margin-top: 15px;'>Fill in your details to create an account</div>"
-                            )
-                
-                # Practitioner Interface (hidden initially)
+                                gr.HTML("<h4 style='color:#2d3748;margin: 12px 0 8px 0;'>🏥 Affiliation</h4>")
+                                organization_dropdown = gr.Dropdown(choices=self.get_organizations_dropdown(), label="Select Your Organization")
+    
+                            signup_btn = gr.Button("✨ Create Professional Account", variant="primary")
+                            signup_status = gr.HTML("<div style='text-align:center;color:#718096;font-size:0.9rem;margin-top:8px;'>Fill in your details to create an account</div>")
+    
+                # ------------------- PRACTITIONER PANEL -------------------
                 with gr.Column(visible=False) as practitioner_panel:
-                    gr.HTML('<div class="medical-card-title">👩‍⚕️ Practitioner Dashboard</div>')
-                    
+                    gr.HTML('<div class="medical-card-title" style="font-weight:800;font-size:20px;">👩‍⚕️ Practitioner Dashboard</div>')
                     user_info = gr.HTML("")
                     logout_btn_prac = gr.Button("🚪 Logout", variant="secondary")
-                    
-                    # Main tabs for different functions
+    
                     with gr.Tabs():
-                        # WOUND ANALYSIS TAB
+                        # ------------- WOUND ANALYSIS TAB -------------
                         with gr.Tab("🔬 Wound Analysis"):
                             with gr.Row():
                                 with gr.Column(scale=1):
                                     gr.HTML("<h3>📋 Patient Information</h3>")
                                     patient_name = gr.Textbox(label="Patient Name", placeholder="Enter patient's full name")
                                     patient_age = gr.Number(label="Age", value=30, minimum=0, maximum=120)
-                                    patient_gender = gr.Dropdown(
-                                        choices=["Male", "Female", "Other"], 
-                                        label="Gender", 
-                                        value="Male"
-                                    )
-                                    
+                                    patient_gender = gr.Dropdown(choices=["Male", "Female", "Other"], label="Gender", value="Male")
+    
                                     gr.HTML("<h3>🩹 Wound Information</h3>")
                                     wound_location = gr.Textbox(label="Wound Location", placeholder="e.g., Left ankle, Right arm")
                                     wound_duration = gr.Textbox(label="Wound Duration", placeholder="e.g., 2 weeks, 1 month")
-                                    pain_level = gr.Slider(
-                                        minimum=0, maximum=10, value=5, step=1,
-                                        label="Pain Level (0-10)"
-                                    )
-                                    
+                                    pain_level = gr.Slider(minimum=0, maximum=10, value=5, step=1, label="Pain Level (0-10)")
+    
                                     gr.HTML("<h3>⚕️ Clinical Assessment</h3>")
-                                    moisture_level = gr.Dropdown(
-                                        choices=["Dry", "Moist", "Wet", "Saturated"], 
-                                        label="Moisture Level",
-                                        value="Moist"
-                                    )
-                                    infection_signs = gr.Dropdown(
-                                        choices=["None", "Mild", "Moderate", "Severe"],
-                                        label="Signs of Infection",
-                                        value="None"
-                                    )
-                                    diabetic_status = gr.Dropdown(
-                                        choices=["Non-diabetic", "Type 1", "Type 2", "Gestational"], 
-                                        label="Diabetic Status",
-                                        value="Non-diabetic"
-                                    )
-                                
+                                    moisture_level = gr.Dropdown(choices=["Dry", "Moist", "Wet", "Saturated"], label="Moisture Level", value="Moist")
+                                    infection_signs = gr.Dropdown(choices=["None", "Mild", "Moderate", "Severe"], label="Signs of Infection", value="None")
+                                    diabetic_status = gr.Dropdown(choices=["Non-diabetic", "Type 1", "Type 2", "Gestational"], label="Diabetic Status", value="Non-diabetic")
+    
                                 with gr.Column(scale=1):
                                     gr.HTML("<h3>📸 Wound Image Upload</h3>")
-                                    wound_image = gr.Image(
-                                        label="Upload Wound Image",
-                                        type="filepath"
-                                    )
-                                    
+                                    wound_image = gr.Image(label="Upload Wound Image", type="filepath")
+    
                                     gr.HTML("<h3>📝 Medical History</h3>")
-                                    previous_treatment = gr.Textbox(
-                                        label="Previous Treatment",
-                                        placeholder="Describe any previous treatments...",
-                                        lines=3
-                                    )
-                                    medical_history = gr.Textbox(
-                                        label="Medical History",
-                                        placeholder="Relevant medical conditions, surgeries, etc...",
-                                        lines=3
-                                    )
-                                    medications = gr.Textbox(
-                                        label="Current Medications",
-                                        placeholder="List current medications...",
-                                        lines=2
-                                    )
-                                    allergies = gr.Textbox(
-                                        label="Known Allergies",
-                                        placeholder="List any known allergies...",
-                                        lines=2
-                                    )
-                                    additional_notes = gr.Textbox(
-                                        label="Additional Notes",
-                                        placeholder="Any additional clinical observations...",
-                                        lines=3
-                                    )
-                            
+                                    previous_treatment = gr.Textbox(label="Previous Treatment", placeholder="Describe any previous treatments...", lines=3)
+                                    medical_history = gr.Textbox(label="Medical History", placeholder="Relevant medical conditions, surgeries, etc...", lines=3)
+                                    medications = gr.Textbox(label="Current Medications", placeholder="List current medications...", lines=2)
+                                    allergies = gr.Textbox(label="Known Allergies", placeholder="List any known allergies...", lines=2)
+                                    additional_notes = gr.Textbox(label="Additional Notes", placeholder="Any additional clinical observations...", lines=3)
+    
                             analyze_btn = gr.Button("🔬 Analyze Wound", variant="primary", size="lg", elem_id="analyze-btn")
                             analysis_output = gr.HTML("")
-                        
-                        # PATIENT HISTORY TAB
+    
+                        # ------------- PATIENT HISTORY TAB -------------
                         with gr.Tab("📋 Patient History"):
                             with gr.Row():
                                 with gr.Column(scale=2):
                                     gr.HTML("<h3>📊 Patient History Dashboard</h3>")
                                     history_btn = gr.Button("📋 Load Patient History", variant="primary")
                                     patient_history_output = gr.HTML("")
-                                
+    
                                 with gr.Column(scale=1):
-                                    gr.HTML("<h3>🔍 Search Specific Patient</h3>")
-                                    search_patient_name = gr.Textbox(
-                                        label="Patient Name", 
-                                        placeholder="Enter patient name to search..."
+                                    # View Details (dropdown)
+                                    gr.HTML("<h3>🔎 View Details</h3>")
+                                    patient_selector = gr.Dropdown(
+                                        choices=[],
+                                        label="Select Patient",
+                                        interactive=True,
+                                        allow_custom_value=False,
+                                        info="Pick a patient to view wound progression"
                                     )
-                                    search_patient_btn = gr.Button("🔍 Search Patient History", variant="secondary")
+                                    reload_patients_btn = gr.Button("🔄 Refresh Patient List", variant="secondary")
+                                    view_details_btn = gr.Button("🔍 View Details", variant="primary")
+                                    patient_details_output = gr.HTML("")
+    
+                                    # Search Specific Patient (restored)
+                                    gr.HTML("<h3 style='margin-top:20px;'>🔍 Search Specific Patient</h3>")
+                                    search_patient_name = gr.Textbox(label="Patient Name", placeholder="Enter patient name to search…")
+                                    search_patient_btn = gr.Button("🔎 Search Patient History", variant="secondary")
                                     specific_patient_output = gr.HTML("")
-            
-            # Event handlers
+    
+            # --------------------- HELPERS & HANDLERS ---------------------
+    
+            def _risk_chip_ui(level: str) -> str:
+                rl = (level or "Unknown").strip().lower()
+                bg, fg = "#f0f0f0", "#333333"
+                if rl.startswith("low"):
+                    bg, fg = "#d4edda", "#155724"
+                elif rl.startswith("moderate"):
+                    bg, fg = "#fff3cd", "#856404"
+                elif rl.startswith("high"):
+                    bg, fg = "#f8d7da", "#721c24"
+                return f"<span style='background:{bg};color:{fg};padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;letter-spacing:.4px;text-transform:uppercase;'>{html.escape(level or 'Unknown')}</span>"
+    
+            def _render_progression_timeline(rows):
+                if not rows:
+                    return "<div class='status-warning'>No wound progression data found for this patient.</div>"
+    
+                head = """
+                <div style="border:1px solid #e2e8f0;border-radius:16px;overflow:hidden;background:white;box-shadow:0 8px 24px rgba(0,0,0,.06);">
+                    <div style="background:linear-gradient(135deg,#2563eb 0%,#1e3a8a 100%);color:white;padding:24px 28px;">
+                        <h2 style="margin:0;font-size:22px;font-weight:800;letter-spacing:.2px;">🩺 Wound Progression</h2>
+                        <p style="margin:6px 0 0 0;opacity:.95;">Chronological clinical snapshots with AI risk assessment</p>
+                    </div>
+                    <div style="padding:22px 22px 6px 22px">
+                """
+                items = []
+                for i, r in enumerate(rows, start=1):
+                    dt = r.get("visit_date")
+                    try:
+                        dt_str = dt.strftime('%b %d, %Y • %I:%M %p') if hasattr(dt, "strftime") else str(dt)
+                    except Exception:
+                        dt_str = str(dt)
+    
+                    risk = _risk_chip_ui(r.get("risk_level"))
+                    wound_loc = r.get("wound_location") or "N/A"
+                    moisture = r.get("moisture") or "—"
+                    infection = r.get("infection") or "—"
+                    pain = r.get("pain_level", "N/A")
+                    summary = r.get("summary")
+                    img = r.get("image_url")
+    
+                    summary_block = (
+                        f"<div style='margin-top:12px;color:#0f172a;background:white;border:1px solid #e2e8f0;border-radius:10px;padding:12px;'><strong>Summary:</strong> {html.escape(str(summary))}</div>"
+                        if summary else ""
+                    )
+                    img_block = (
+                        f"<div style='margin-top:12px;'><img src='{html.escape(str(img))}' style='max-width:360px;border-radius:12px;border:1px solid #e2e8f0;box-shadow:0 6px 18px rgba(0,0,0,.06)'></div>"
+                        if img else ""
+                    )
+    
+                    card = f"""
+                    <div style="display:grid;grid-template-columns:32px 1fr;gap:16px;position:relative;margin-bottom:22px;">
+                        <div style="display:flex;align-items:center;justify-content:center;">
+                            <div style="width:12px;height:12px;background:#2563eb;border:2px solid white;border-radius:999px;box-shadow:0 0 0 3px rgba(37,99,235,.15)"></div>
+                            <div style="position:absolute;left:6px;top:24px;bottom:-10px;width:2px;background:linear-gradient(180deg, rgba(203,213,225,1), rgba(203,213,225,0));"></div>
+                        </div>
+                        <div style="border:1px solid #e2e8f0;border-radius:12px;padding:16px;background:#f9fafb;">
+                            <div style="display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;">
+                                <div style="font-weight:800;color:#0f172a;letter-spacing:.2px;">Visit #{i}</div>
+                                <div style="color:#475569;font-weight:600;">{html.escape(dt_str)}</div>
+                            </div>
+                            <div style="margin-top:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;">
+                                <div style="background:white;border:1px solid #e2e8f0;border-radius:10px;padding:12px;">
+                                    <div style="font-size:12px;color:#64748b;font-weight:700;letter-spacing:.4px;text-transform:uppercase;">Location</div>
+                                    <div style="font-weight:700;color:#0f172a;">{html.escape(str(wound_loc))}</div>
+                                </div>
+                                <div style="background:white;border:1px solid #e2e8f0;border-radius:10px;padding:12px;">
+                                    <div style="font-size:12px;color:#64748b;font-weight:700;letter-spacing:.4px;text-transform:uppercase;">Pain</div>
+                                    <div style="font-weight:700;color:#0f172a;">{html.escape(str(pain))} / 10</div>
+                                </div>
+                                <div style="background:white;border:1px solid #e2e8f0;border-radius:10px;padding:12px;">
+                                    <div style="font-size:12px;color:#64748b;font-weight:700;letter-spacing:.4px;text-transform:uppercase;">Moisture</div>
+                                    <div style="font-weight:700;color:#0f172a;">{html.escape(str(moisture))}</div>
+                                </div>
+                                <div style="background:white;border:1px solid #e2e8f0;border-radius:10px;padding:12px;">
+                                    <div style="font-size:12px;color:#64748b;font-weight:700;letter-spacing:.4px;text-transform:uppercase;">Infection</div>
+                                    <div style="font-weight:700;color:#0f172a;">{html.escape(str(infection))}</div>
+                                </div>
+                                <div style="background:white;border:1px solid #e2e8f0;border-radius:10px;padding:12px;">
+                                    <div style="font-size:12px;color:#64748b;font-weight:700;letter-spacing:.4px;text-transform:uppercase;">AI Risk</div>
+                                    <div>{risk}</div>
+                                </div>
+                            </div>
+                            {summary_block}
+                            {img_block}
+                        </div>
+                    </div>
+                    """
+                    items.append(card)
+    
+                tail = "</div></div>"
+                return head + "".join(items) + tail
+    
+            # ---------- AUTH HANDLERS ----------
             def handle_login(username, password):
                 user_data = self.auth_manager.authenticate_user(username, password)
                 if user_data:
                     self.current_user = user_data
+                    patient_update = _load_patient_names()
                     return {
                         auth_panel: gr.update(visible=False),
                         practitioner_panel: gr.update(visible=True),
-                        login_status: "<div class='status-success'>✅ Login successful! Welcome to SmartHeal</div>"
+                        login_status: "<div class='status-success'>✅ Login successful! Welcome to SmartHeal</div>",
+                        patient_selector: patient_update
                     }
                 else:
-                    return {
-                        login_status: "<div class='status-error'>❌ Invalid credentials. Please try again.</div>"
-                    }
-            
-            def handle_signup(username, email, password, name, role, org_name, phone, country_code, department, location, organization_dropdown):
+                    return {login_status: "<div class='status-error'>❌ Invalid credentials. Please try again.</div>"}
+    
+            def handle_signup(username, email, password, name, role, org_name_val, phone_val, cc_val, dept_val, loc_val, org_dropdown_val):
                 try:
                     if role == "organization":
                         org_data = {
-                            'org_name': org_name,
-                            'phone': phone,
-                            'country_code': country_code,
-                            'department': department,
-                            'location': location
-                        }
-                        org_id = self.database_manager.create_organization(org_data)
-                        
-                        user_data = {
-                            'username': username,
+                            'org_name': org_name_val,
                             'email': email,
-                            'password': password,
-                            'name': name,
-                            'role': role,
-                            'org_id': org_id
+                            'phone': phone_val,
+                            'country_code': cc_val,
+                            'department': dept_val,
+                            'location': loc_val
                         }
+                        org_id = self.database_manager.create_organization(org_data)
+                        user_data = {'username': username, 'email': email, 'password': password, 'name': name, 'role': role, 'org_id': org_id}
                     else:
-                        # Extract org_id from dropdown selection
-                        org_id = 1  # Default organization for now
-                        user_data = {
-                            'username': username,
-                            'email': email,
-                            'password': password,
-                            'name': name,
-                            'role': role,
-                            'org_id': org_id
-                        }
-                    
+                        org_id = 1
+                        user_data = {'username': username, 'email': email, 'password': password, 'name': name, 'role': role, 'org_id': org_id}
+    
                     if self.auth_manager.create_user(user_data):
-                        return {
-                            signup_status: "<div class='status-success'>✅ Account created successfully! Please login.</div>"
-                        }
+                        return {signup_status: "<div class='status-success'>✅ Account created successfully! Please login.</div>"}
                     else:
-                        return {
-                            signup_status: "<div class='status-error'>❌ Failed to create account. Username or email may already exist.</div>"
-                        }
+                        return {signup_status: "<div class='status-error'>❌ Failed to create account. Username or email may already exist.</div>"}
                 except Exception as e:
-                    return {
-                        signup_status: f"<div class='status-error'>❌ Error: {str(e)}</div>"
-                    }
-            
-            def handle_analysis(patient_name, patient_age, patient_gender, wound_location, wound_duration, 
-                    pain_level, moisture_level, infection_signs, diabetic_status, previous_treatment,
-                    medical_history, medications, allergies, additional_notes, wound_image):
+                    return {signup_status: f"<div class='status-error'>❌ Error: {html.escape(str(e))}</div>"}
+    
+            def toggle_role_fields(role):
+                if role == "organization":
+                    return {org_fields: gr.update(visible=True), prac_fields: gr.update(visible=False)}
+                return {org_fields: gr.update(visible=False), prac_fields: gr.update(visible=True)}
+    
+            def handle_logout():
+                self.current_user = {}
+                return {auth_panel: gr.update(visible=True), practitioner_panel: gr.update(visible=False)}
+    
+            # ---------- ANALYSIS HANDLER ----------
+            def handle_analysis(
+                _patient_name, _patient_age, _patient_gender, _wound_location, _wound_duration,
+                _pain_level, _moisture_level, _infection_signs, _diabetic_status, _previous_treatment,
+                _medical_history, _medications, _allergies, _additional_notes, _wound_image
+            ):
                 try:
-                    if not wound_image:
+                    if not _wound_image:
                         return "<div class='status-error'>❌ Please upload a wound image for analysis.</div>"
-                    
-                    # Show loading state first
-                    loading_html = """
-                    <div style="text-align:center; padding: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 16px; color: white; margin: 20px 0;">
-                        <div style="display:inline-block; border:4px solid rgba(255,255,255,0.3); border-radius:50%; border-top-color:white; width:50px; height:50px; animation:spin 1s linear infinite; margin-bottom: 20px;"></div>
-                        <h3 style="margin: 0; font-size: 1.5rem;">🔬 SmartHeal AI Processing</h3>
-                        <p style="margin: 10px 0 0 0; font-size: 1rem; opacity: 0.9;">Analyzing wound image with advanced computer vision...</p>
-                        <div style="background: rgba(255,255,255,0.1); border-radius: 8px; padding: 10px; margin-top: 15px;">
-                            <p style="margin: 0; font-size: 0.9rem;">⚡ Detection → 📏 Segmentation → 🤖 AI Report</p>
-                        </div>
-                        <style>@keyframes spin {0% {transform:rotate(0deg)} 100% {transform:rotate(360deg)}}</style>
-                    </div>
-                    """
-                    
-                    # 1. Save questionnaire FIRST to get valid ID
+    
                     questionnaire_data_for_db = {
-                        'user_id': self.current_user.get('id', 1),  # Default to 1 if no user logged in
-                        'patient_name': patient_name,
-                        'patient_age': patient_age,
-                        'patient_gender': patient_gender,
-                        'wound_location': wound_location,
-                        'wound_duration': wound_duration,
-                        'pain_level': pain_level,
-                        'moisture_level': moisture_level,
-                        'infection_signs': infection_signs,
-                        'diabetic_status': diabetic_status,
-                        'previous_treatment': previous_treatment,
-                        'medical_history': medical_history,
-                        'medications': medications,
-                        'allergies': allergies,
-                        'additional_notes': additional_notes
+                        'user_id': self.current_user.get('id', 1),
+                        'patient_name': _patient_name,
+                        'patient_age': _patient_age,
+                        'patient_gender': _patient_gender,
+                        'wound_location': _wound_location,
+                        'wound_duration': _wound_duration,
+                        'pain_level': _pain_level,
+                        'moisture_level': _moisture_level,
+                        'infection_signs': _infection_signs,
+                        'diabetic_status': _diabetic_status,
+                        'previous_treatment': _previous_treatment,
+                        'medical_history': _medical_history,
+                        'medications': _medications,
+                        'allergies': _allergies,
+                        'additional_notes': _additional_notes
                     }
-                    
-                    # Save questionnaire FIRST to get the ID
-                    questionnaire_response_id = self.database_manager.save_questionnaire(questionnaire_data_for_db)
-                    logging.info(f"✅ Questionnaire saved with response ID: {questionnaire_response_id}")
-                    
-                    # 2. Create AIProcessor questionnaire format  
+    
+                    response_id = self.database_manager.save_questionnaire(questionnaire_data_for_db)
+                    if not response_id:
+                        return "<div class='status-error'>❌ Could not save questionnaire (patient/profile). Check logs.</div>"
+    
                     questionnaire_data_for_ai = {
-                        'age': patient_age,
-                        'diabetic': 'Yes' if diabetic_status != 'Non-diabetic' else 'No',
-                        'allergies': allergies,
-                        'date_of_injury': 'Unknown',  # Not collected in this form
-                        'professional_care': 'Yes',  # Assumed since using professional interface
-                        'oozing_bleeding': 'Minor Oozing' if infection_signs != 'None' else 'None',
-                        'infection': 'Yes' if infection_signs != 'None' else 'No',
-                        'moisture': moisture_level,
-                        # Additional comprehensive fields
-                        'patient_name': patient_name,
-                        'patient_gender': patient_gender,
-                        'wound_location': wound_location,
-                        'wound_duration': wound_duration,
-                        'pain_level': pain_level,
-                        'previous_treatment': previous_treatment,
-                        'medical_history': medical_history,
-                        'medications': medications,
-                        'additional_notes': additional_notes
+                        'age': _patient_age,
+                        'diabetic': 'Yes' if _diabetic_status != 'Non-diabetic' else 'No',
+                        'allergies': _allergies,
+                        'date_of_injury': 'Unknown',
+                        'professional_care': 'Yes',
+                        'oozing_bleeding': 'Minor Oozing' if _infection_signs != 'None' else 'None',
+                        'infection': 'Yes' if _infection_signs != 'None' else 'No',
+                        'moisture': _moisture_level,
+                        'patient_name': _patient_name,
+                        'patient_gender': _patient_gender,
+                        'wound_location': _wound_location,
+                        'wound_duration': _wound_duration,
+                        'pain_level': _pain_level,
+                        'previous_treatment': _previous_treatment,
+                        'medical_history': _medical_history,
+                        'medications': _medications,
+                        'additional_notes': _additional_notes
                     }
-            
-                    # 3. Run AI analysis using the AIProcessor class
+    
+                    analysis_result = self.wound_analyzer.analyze_wound(_wound_image, questionnaire_data_for_ai)
+                    if not analysis_result.get('success'):
+                        err = analysis_result.get('error', 'Analysis failed')
+                        return f"<div class='status-error'>❌ AI Analysis Error: {html.escape(str(err))}</div>"
+    
                     try:
-                        logging.info(f"🔬 Starting AI analysis for image: {wound_image}")
-                        
-                        # Use the AIProcessor analyze_wound method
-                        analysis_result = self.wound_analyzer.analyze_wound(wound_image, questionnaire_data_for_ai)
-                        
-                        if not analysis_result.get('success', False):
-                            error_msg = analysis_result.get('error', 'Analysis failed for unknown reason')
-                            logging.error(f"❌ AI Analysis failed: {error_msg}")
-                            
-                            return f"""
-                            <div class='status-error' style='padding: 30px; background: #fff5f5; border-left: 5px solid #e53e3e; margin: 20px 0; border-radius: 12px;'>
-                                <h3 style="color: #c53030; margin-top: 0;">❌ AI Analysis Error</h3>
-                                <p style="color: #742a2a; font-size: 1.1rem;"><strong>Error Details:</strong></p>
-                                <div style='background: #fed7d7; padding: 15px; border-radius: 8px; margin: 10px 0;'>
-                                    <code style='color: #742a2a; font-size: 0.9rem;'>{error_msg}</code>
-                                </div>
-                                <p style="color: #742a2a;">Please try again with a different image or contact technical support.</p>
-                                <div style="margin-top: 15px; padding: 15px; background: #fff; border-radius: 8px; border: 1px solid #feb2b2;">
-                                    <strong>Troubleshooting Tips:</strong>
-                                    <ul style="margin: 10px 0; color: #742a2a;">
-                                        <li>Ensure image is clear and well-lit</li>
-                                        <li>Wound should be clearly visible in the image</li>
-                                        <li>Try a different image format (PNG, JPG)</li>
-                                        <li>Check image file size (max 10MB recommended)</li>
-                                    </ul>
-                                </div>
-                            </div>
-                            """
-                        
-                        logging.info("✅ AI Analysis completed successfully")
-                        
-                        # 4. Save analysis result with valid questionnaire_response_id
-                        try:
-                            if questionnaire_response_id:
-                                self.database_manager.save_analysis_result(questionnaire_response_id, analysis_result)
-                                logging.info("✅ Analysis result saved to database")
-                        except Exception as db_error:
-                            logging.error(f"❌ Database save error: {db_error}")
-                            # Continue with display even if DB save fails
-                        
-                        # 5. Format comprehensive analysis results with all images
-                        formatted_analysis = self._format_comprehensive_analysis_results(
-                            analysis_result, wound_image, questionnaire_data_for_ai
-                        )
-                        
-                        return formatted_analysis
-            
-                    except Exception as analysis_error:
-                        logging.error(f"❌ AI analysis exception: {analysis_error}", exc_info=True)
-                        return f"""
-                        <div class='status-error' style='padding: 30px; background: #fff5f5; border-left: 5px solid #e53e3e; margin: 20px 0; border-radius: 12px;'>
-                            <h3 style="color: #c53030; margin-top: 0;">❌ Analysis Processing Error</h3>
-                            <p style="color: #742a2a;">There was an unexpected error during wound analysis:</p>
-                            <div style='background: #fed7d7; padding: 15px; border-radius: 8px; margin: 15px 0;'>
-                                <code style='color: #742a2a; font-size: 0.9rem; word-break: break-word;'>{str(analysis_error)}</code>
-                            </div>
-                            <p style="color: #742a2a;"><strong>Next Steps:</strong></p>
-                            <ul style="color: #742a2a; margin: 10px 0;">
-                                <li>Refresh the page and try again</li>
-                                <li>Check your internet connection</li>
-                                <li>Try with a different wound image</li>
-                                <li>Contact system administrator if the problem persists</li>
-                            </ul>
-                        </div>
-                        """
-            
+                        self.database_manager.save_analysis_result(response_id, analysis_result)
+                    except Exception as db_error:
+                        logging.error(f"DB save (analysis_result) error: {db_error}")
+    
+                    formatted = self._format_comprehensive_analysis_results(analysis_result, _wound_image, questionnaire_data_for_ai)
+                    return formatted
+    
                 except Exception as e:
                     logging.error(f"❌ Analysis handler error: {e}", exc_info=True)
-                    return f"""
-                    <div class='status-error' style='padding: 30px; background: #fff5f5; border-left: 5px solid #e53e3e; margin: 20px 0; border-radius: 12px;'>
-                        <h3 style="color: #c53030; margin-top: 0;">❌ System Error</h3>
-                        <p style="color: #742a2a;">A system error occurred while processing your request:</p>
-                        <div style='background: #fed7d7; padding: 15px; border-radius: 8px; margin: 15px 0;'>
-                            <code style='color: #742a2a; font-size: 0.9rem;'>{str(e)}</code>
-                        </div>
-                        <p style="color: #742a2a;">Please contact technical support if this issue continues.</p>
-                    </div>
-                    """
-
-            def handle_logout():
-                self.current_user = {}
-                return {
-                    auth_panel: gr.update(visible=True),
-                    practitioner_panel: gr.update(visible=False)
-                }
-            
-            def toggle_role_fields(role):
-                if role == "organization":
-                    return {
-                        org_fields: gr.update(visible=True),
-                        prac_fields: gr.update(visible=False)
-                    }
-                else:
-                    return {
-                        org_fields: gr.update(visible=False),
-                        prac_fields: gr.update(visible=True)
-                    }
-            
+                    return f"<div class='status-error'>❌ System Error: {html.escape(str(e))}</div>"
+    
+            # ---------- HISTORY HELPERS ----------
             def load_patient_history():
                 try:
                     user_id = self.current_user.get('id', 1)
                     if not user_id:
                         return "<div class='status-error'>❌ Please login first.</div>"
-                    
                     history_data = self.patient_history_manager.get_user_patient_history(user_id)
-                    formatted_history = self.patient_history_manager.format_history_for_display(history_data)
-                    return formatted_history
+                    formatted = self.patient_history_manager.format_history_for_display(history_data)
+                    return formatted
                 except Exception as e:
                     logging.error(f"Error loading patient history: {e}")
-                    return f"<div class='status-error'>❌ Error loading history: {str(e)}</div>"
-            
-            def search_specific_patient(patient_name):
+                    return f"<div class='status-error'>❌ Error loading history: {html.escape(str(e))}</div>"
+    
+            def _load_patient_names():
                 try:
-                    user_id = self.current_user.get('id', 1)
-                    if not user_id:
+                    uid = self.current_user.get('id', 1)
+                    plist = self.patient_history_manager.get_patient_list(uid) or []
+                    names, seen = [], set()
+                    for row in plist:
+                        nm = row.get("patient_name")
+                        if nm and nm not in seen:
+                            names.append(nm); seen.add(nm)
+                    if not names:
+                        names = ["— No patients yet —"]
+                    return gr.update(choices=names, value=(names[0] if names else None))
+                except Exception as e:
+                    logging.error(f"load patients error: {e}")
+                    return gr.update(choices=["— Error loading —"], value=None)
+    
+            def view_details_action(selected_name):
+                try:
+                    uid = self.current_user.get('id', 1)
+                    if not selected_name or selected_name.startswith("—"):
+                        return "<div class='status-warning'>Please select a valid patient.</div>"
+                    rows = self.patient_history_manager.get_wound_progression(uid, selected_name)
+                    return _render_progression_timeline(rows)
+                except Exception as e:
+                    logging.error(f"view details error: {e}")
+                    return f"<div class='status-error'>Error loading details: {html.escape(str(e))}</div>"
+    
+            def search_specific_patient_action(name_text):
+                try:
+                    uid = self.current_user.get('id', 1)
+                    if not uid:
                         return "<div class='status-error'>❌ Please login first.</div>"
-                    
-                    if not patient_name.strip():
+                    if not name_text or not name_text.strip():
                         return "<div class='status-warning'>⚠️ Please enter a patient name to search.</div>"
-                    
-                    patient_data = self.patient_history_manager.search_patient_by_name(user_id, patient_name.strip())
-                    if patient_data:
-                        formatted_data = self.patient_history_manager.format_patient_data_for_display(patient_data)
-                        return formatted_data
-                    else:
-                        return f"<div class='status-warning'>⚠️ No records found for patient: {patient_name}</div>"
-                        
+                    rows = self.patient_history_manager.search_patient_by_name(uid, name_text.strip())
+                    if not rows:
+                        return f"<div class='status-warning'>⚠️ No records found for patient: {html.escape(name_text.strip())}</div>"
+                    return self.patient_history_manager.format_patient_data_for_display(rows)
                 except Exception as e:
                     logging.error(f"Error searching patient: {e}")
-                    return f"<div class='status-error'>❌ Error searching patient: {str(e)}</div>"
-            
-            # Bind event handlers
+                    return f"<div class='status-error'>❌ Error searching patient: {html.escape(str(e))}</div>"
+    
+            # --------------------------- BINDINGS ---------------------------
             login_btn.click(
                 handle_login,
                 inputs=[login_username, login_password],
-                outputs=[auth_panel, practitioner_panel, login_status]
+                outputs=[auth_panel, practitioner_panel, login_status, patient_selector]
             )
-            
+    
             signup_btn.click(
                 handle_signup,
-                inputs=[signup_username, signup_email, signup_password, signup_name, signup_role, 
-                       org_name, phone, country_code, department, location, organization_dropdown],
+                inputs=[
+                    signup_username, signup_email, signup_password, signup_name, signup_role,
+                    org_name, phone, country_code, department, location, organization_dropdown
+                ],
                 outputs=[signup_status]
             )
-            
+    
             signup_role.change(
                 toggle_role_fields,
                 inputs=[signup_role],
                 outputs=[org_fields, prac_fields]
             )
-            
+    
             analyze_btn.click(
                 handle_analysis,
-                inputs=[patient_name, patient_age, patient_gender, wound_location, wound_duration,
-                       pain_level, moisture_level, infection_signs, diabetic_status, previous_treatment,
-                       medical_history, medications, allergies, additional_notes, wound_image],
+                inputs=[
+                    patient_name, patient_age, patient_gender, wound_location, wound_duration,
+                    pain_level, moisture_level, infection_signs, diabetic_status, previous_treatment,
+                    medical_history, medications, allergies, additional_notes, wound_image
+                ],
                 outputs=[analysis_output]
             )
-            
+    
             logout_btn_prac.click(
                 handle_logout,
                 outputs=[auth_panel, practitioner_panel]
             )
-            
+    
             history_btn.click(
                 load_patient_history,
                 outputs=[patient_history_output]
             )
-            
+    
+            reload_patients_btn.click(
+                _load_patient_names,
+                outputs=[patient_selector]
+            )
+    
+            view_details_btn.click(
+                view_details_action,
+                inputs=[patient_selector],
+                outputs=[patient_details_output]
+            )
+    
             search_patient_btn.click(
-                search_specific_patient,
+                search_specific_patient_action,
                 inputs=[search_patient_name],
                 outputs=[specific_patient_output]
             )
-        
-        return app   
+    
+        return app
+
     
     def _format_comprehensive_analysis_results(self, analysis_result, image_url=None, questionnaire_data=None):
         """Format comprehensive analysis results with all visualization images from AIProcessor."""