Update app.py

app.py

@@ -587,7 +587,7 @@ def show_auth_page():
     # Re-adding the original Empathetic Chatbot feature from previous response for completeness
     st.markdown("""
         <div class="feature-item">
-            <span class="icon-img">💬</span> <h3>Empathetic Chatbot</h3>
+            <span class="icon-img"></span> <h3>Empathetic Chatbot</h3>
             <p>Connect with an AI that listens and understands your feelings.</p>
         </div>
     """, unsafe_allow_html=True)
@@ -785,40 +785,330 @@ def is_crisis(text):
 
 def show_admin_dashboard():
     """Admin dashboard for monitoring users and app usage"""
-    st.set_page_config(page_title="DilBot Admin Dashboard", page_icon="👑")
-    # --- PASTE YOUR CUSTOM CSS HERE FOR THE ADMIN DASHBOARD ---
+    st.set_page_config(page_title="DilBot Admin Dashboard", page_icon="👑", layout="wide")
+
+    # --- ENHANCED CUSTOM CSS FOR ADMIN DASHBOARD (Consistent with main app) ---
     st.markdown("""
     <style>
-    /* Example: Styling for the admin dashboard */
+    /* Global Styles & Background (Consistent with main app) */
     .stApp {
-        background-color: #ffffff; /* Clean white background */
+        background: linear-gradient(to bottom right, #f8f9fa, #e9ecef);
+        color: #343a40;
+        font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        padding-top: 2rem;
     }
-    /* Metric styling */
-    [data-testid="stMetricValue"] {
+
+    /* Streamlit's main block container for content centering and width */
+    .main .block-container {
+        max-width: 1200px;
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+
+    /* Hide Streamlit's header/footer if you want a fully custom layout */
+    .stApp > header {
+        display: none;
+    }
+    .stApp > footer {
+        display: none;
+    }
+
+    /* Header & Titles (Consistent with main app) */
+    h1, h2, h3, h4, h5, h6 {
+        color: #212529;
+        margin-top: 1.8rem;
+        margin-bottom: 0.9rem;
+        font-weight: 700;
+    }
+    h1 {
+        font-size: 2.8em;
+        font-weight: 800;
+        color: #5d6dbe;
+        letter-spacing: -0.8px;
+        text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
+    }
+    .header-tagline { /* Added for general sub-titles */
+        font-size: 1.2em;
+        color: #6c757d;
+        margin-top: -0.5rem;
+        margin-bottom: 2.5rem;
+        font-weight: 400;
+    }
+    h2 {
         font-size: 2em;
-        font-weight: bold;
-        color: #4CAF50; /* Green color for metrics */
+        font-weight: 700;
+        border-bottom: 2px solid #e9ecef;
+        padding-bottom: 0.7rem;
+        margin-bottom: 2rem;
+        color: #343a40;
+    }
+    h3 {
+        font-size: 1.6em;
+        font-weight: 600;
+        color: #495057;
+        margin-top: 2rem;
+        margin-bottom: 1.2rem;
+    }
+    h4 { /* Added for sub-sections */
+        font-size: 1.3em;
+        font-weight: 600;
+        color: #343a40;
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+    }
+    h5 {
+        font-size: 1.1em;
+        font-weight: 600;
+        color: #495057;
+        margin-bottom: 1rem;
+    }
+
+    /* Metrics (Consistent with main app) */
+    [data-testid="stMetric"] {
+        background-color: #ffffff;
+        border: 1px solid #dee2e6;
+        border-radius: 12px;
+        padding: 20px;
+        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
+        text-align: center;
+        margin-bottom: 1.5rem;
+        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+    }
+    [data-testid="stMetric"]:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 12px 30px rgba(0,0,0,0.12);
     }
     [data-testid="stMetricLabel"] {
-        color: #555;
+        font-size: 1em;
+        color: #6c757d;
+        margin-bottom: 8px;
+        font-weight: 500;
     }
-    /* Table row styling (for expanders) */
-    .stExpander {
-        border: 1px solid #eee;
-        border-radius: 8px;
-        margin-bottom: 10px;
-        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+    [data-testid="stMetricValue"] { /* Overriding the admin-specific green with main app blue */
+        font-size: 2.8em;
+        font-weight: 800;
+        color: #5d6dbe; /* Main app's primary blue */
+    }
+
+    /* Buttons (Consistent with main app) */
+    .stButton>button {
+        background-color: #5d6dbe;
+        color: white;
+        border: none;
+        border-radius: 10px;
+        padding: 12px 25px;
+        font-size: 1.1em;
+        font-weight: bold;
+        transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
+        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        cursor: pointer;
+        letter-spacing: 0.5px;
+    }
+    .stButton>button:hover {
+        background-color: #4a5c9d;
+        transform: translateY(-3px);
+        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
+    }
+    .stButton>button:active {
+        background-color: #3b4b80;
+        transform: translateY(0);
+        box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+    }
+    /* Logout button specific style */
+    [key="admin_logout"] > button {
+        background-color: #dc3545;
+        box-shadow: 0 5px 15px rgba(220,53,69,0.2);
+    }
+    [key="admin_logout"] > button:hover {
+        background-color: #c82333;
+        box-shadow: 0 8px 20px rgba(220,53,69,0.3);
+    }
+    /* "Back to Main App" button style */
+    [key="admin_back_btn"] > button {
+        background-color: #6c757d; /* Grey for back button */
+        box-shadow: 0 5px 15px rgba(108,117,125,0.2);
+    }
+    [key="admin_back_btn"] > button:hover {
+        background-color: #5a6268;
+        box-shadow: 0 8px 20px rgba(108,117,125,0.3);
+    }
+    /* Reset Data buttons for users */
+    .stButton > button[kind="secondary"] { /* Target buttons that are not primary, e.g., Reset/Confirm */
+        background-color: #ffc107; /* Warning yellow */
+        color: #343a40; /* Dark text on yellow */
+        border: none;
+    }
+    .stButton > button[kind="secondary"]:hover {
+        background-color: #e0a800; /* Darker yellow on hover */
+        transform: translateY(-2px);
+    }
+    .stButton > button[key*="confirm_reset_"] {
+        background-color: #dc3545; /* Danger red for confirm reset */
+        color: white;
+    }
+    .stButton > button[key*="confirm_reset_"]:hover {
+        background-color: #c82333;
+    }
+    .stButton > button[key*="cancel_reset_"] {
+        background-color: #6c757d; /* Grey for cancel */
+        color: white;
+    }
+    .stButton > button[key*="cancel_reset_"]:hover {
+        background-color: #5a6268;
+    }
+
+
+    /* Text Inputs and Text Areas (Consistent with main app) */
+    .stTextInput>div>div>input, .stTextArea>div>div>textarea, .stNumberInput>div>div>input {
+        border-radius: 10px;
+        border: 1px solid #ced4da;
+        padding: 14px 18px;
+        font-size: 1.05em;
+        color: #343a40;
+        background-color: #fcfcfc;
+        box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
+        transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    }
+    .stTextInput>div>div>input:focus, .stTextArea>div>div>textarea:focus, .stNumberInput>div>div>input:focus {
+        border-color: #5d6dbe;
+        box-shadow: 0 0 0 0.25rem rgba(93,109,190,0.25);
+        outline: none;
+    }
+    .stTextInput>label, .stTextArea>label, .stNumberInput>label {
+        font-weight: 600;
+        color: #495057;
+        margin-bottom: 0.6rem;
+    }
+
+    /* Information, Success, Error, Warning Boxes (Consistent with main app) */
+    [data-testid="stAlert"] {
+        border-radius: 10px;
+        padding: 18px 25px;
+        margin-bottom: 1.8rem;
+        font-size: 1.05em;
+        line-height: 1.6;
+        text-align: left;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+    }
+    [data-testid="stAlert"] .streamlit-warning {
+        background-color: #fef7e0; color: #7a5f00; border-left: 6px solid #ffcc00;
+    }
+    [data-testid="stAlert"] .streamlit-success {
+        background-color: #e6ffe6;
+        border-left: 6px solid #4CAF50;
+        color: black !important;
+    }
+    [data-testid="stAlert"] .streamlit-success p,
+    [data-testid="stAlert"] .streamlit-success span,
+    [data-testid="stAlert"] .streamlit-success div,
+    [data-testid="stAlert"] .streamlit-success strong {
+        color: black !important;
+        -webkit-text-fill-color: black !important;
+        opacity: 1 !important;
+    }
+    [data-testid="stAlert"] .streamlit-error {
+        background-color: #ffe6e6; color: #8c0a0a; border-left: 6px solid #e74c3c;
+    }
+    .stInfo { /* Ensure st.info is also styled consistently */
+        background-color: #e6f7ff;
+        border-left: 6px solid #64b5f6;
+        color: black !important;
+        border-radius: 10px;
+        padding: 18px 25px;
+        margin-top: 2rem;
+        font-style: italic;
+        font-size: 1.05em;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+    }
+    .stInfo p, .stInfo span, .stInfo strong, .stInfo div {
+        color: black !important;
+        -webkit-text-fill-color: black !important;
+        opacity: 1 !important;
+    }
+
+
+    /* Container for sections (Consistent with main app) */
+    .stContainer {
+        border-radius: 12px;
+        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
+        border: 1px solid #e0e0e0;
+        padding: 2rem;
+        margin-bottom: 2.5rem;
+        background-color: #ffffff;
+    }
+    .stContainer.has-border {
+        border: 1px solid #e0e0e0;
+    }
+
+    /* Expander styling (Consistent with main app) */
+    .streamlit-expanderHeader {
+        background-color: #ffffff;
+        border: 1px solid #e0e0e0;
+        border-radius: 10px;
+        padding: 12px 18px;
+        margin-bottom: 0.8rem;
+        cursor: pointer;
+        transition: background-color 0.2s ease, box-shadow 0.2s ease;
+        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
+    }
+    .streamlit-expanderHeader:hover {
+        background-color: #f7f9fb;
+        box-shadow: 0 6px 15px rgba(0,0,0,0.08);
+    }
+    .streamlit-expanderHeader > div > div > p {
+        font-weight: 600;
+        color: #343a40;
+        font-size: 1.05em;
+    }
+    .streamlit-expanderContent {
+        background-color: #f8f9fa;
+        border-left: 4px solid #ced4da;
+        padding: 15px 20px;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        margin-top: -10px;
+        box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
+        line-height: 1.6;
+    }
+    /* Ensure text within expander content is black */
+    .streamlit-expanderContent p,
+    .streamlit-expanderContent span,
+    .streamlit-expanderContent div,
+    .streamlit-expanderContent strong {
+        color: black !important;
+        -webkit-text-fill-color: black !important;
+        opacity: 1 !important;
+    }
+
+    /* Table styling (for dataframes) */
+    .stDataFrame {
+        border: 1px solid #e9ecef;
+        border-radius: 10px;
+        overflow: hidden; /* Ensures rounded corners */
+        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
+    }
+
+    /* General text color in case Streamlit overrides */
+    div[data-testid="stVerticalBlock"] div > p,
+    div[data-testid="stHorizontalBlock"] div > p,
+    div[data-testid="stText"] p {
+        color: #343a40 !important;
     }
     </style>
     """, unsafe_allow_html=True)
     # --- END CUSTOM CSS ---
+
     # Header
     col1, col2 = st.columns([4, 1])
     with col1:
-        st.title("👑 DilBot Admin Dashboard")
-        st.markdown("Monitor users, conversations, and app analytics")
+        st.markdown(f"<h1>👑 DilBot Admin Dashboard</h1>", unsafe_allow_html=True)
+        st.markdown("<p class='header-tagline'>Monitor users, conversations, and app analytics</p>", unsafe_allow_html=True)
     with col2:
-        if st.button("Logout", key="admin_logout"):
+        st.markdown("<div style='height: 40px;'></div>", unsafe_allow_html=True) # Spacer
+        if st.button("Logout", key="admin_logout", use_container_width=True):
             st.session_state.authenticated = False
             st.session_state.username = None
             st.session_state.is_admin = False
@@ -831,223 +1121,298 @@ def show_admin_dashboard():
     stats = get_admin_stats()
     
     # Overview metrics
-    st.header("📊 Overview")
-    col1, col2, col3, col4 = st.columns(4)
-    
-    with col1:
-        st.metric("Total Users", stats["total_users"])
-    with col2:
-        st.metric("Active Users", stats["active_users"])
-    with col3:
-        st.metric("New Today", stats["users_today"])
-    with col4:
-        st.metric("Total Conversations", stats["total_conversations"])
+    st.markdown("<h2>📊 Overview</h2>", unsafe_allow_html=True)
+    with st.container(border=True): # Wrap metrics in a container for styling
+        col1, col2, col3, col4 = st.columns(4)
+        
+        with col1:
+            st.metric("Total Users", stats["total_users"])
+        with col2:
+            st.metric("Active Users", stats["active_users"])
+        with col3:
+            st.metric("New Today", stats["users_today"])
+        with col4:
+            st.metric("Total Conversations", stats["total_conversations"])
     
     # User registration trend
-    st.header("📈 User Registration Trend")
-    if stats["user_details"]:
-        # Create registration data
-        reg_data = {}
-        for user in stats["user_details"]:
-            date = user["joined"]
-            reg_data[date] = reg_data.get(date, 0) + 1
-        
-        chart_data = [{"date": date, "registrations": count} for date, count in sorted(reg_data.items())]
-        
-        if chart_data:
-            chart = alt.Chart(alt.Data(values=chart_data)).mark_line(point=True).encode(
-                x=alt.X('date:T', title='Date'),
-                y=alt.Y('registrations:Q', title='New Registrations'),
-                tooltip=['date:T', 'registrations:Q']
-            ).properties(
-                width=700,
-                height=300,
-                title="Daily User Registrations"
-            )
-            st.altair_chart(chart, use_container_width=True)
+    st.markdown("<h2>📈 User Registration Trend</h2>", unsafe_allow_html=True)
+    with st.container(border=True): # Wrap chart in a container
+        if stats["user_details"]:
+            # Create registration data
+            reg_data = {}
+            for user in stats["user_details"]:
+                date = user["joined"]
+                reg_data[date] = reg_data.get(date, 0) + 1
+            
+            # Convert to DataFrame for Altair compatibility and sorting
+            chart_data_list = [{"date": date, "registrations": count} for date, count in reg_data.items()]
+            chart_df = pd.DataFrame(chart_data_list).sort_values("date")
+
+            if not chart_df.empty:
+                chart = alt.Chart(chart_df).mark_line(point=True).encode(
+                    x=alt.X('date:T', title='Date'),
+                    y=alt.Y('registrations:Q', title='New Registrations'),
+                    tooltip=[alt.Tooltip('date:T', title='Date'), 'registrations:Q']
+                ).properties(
+                    title="Daily User Registrations"
+                ).interactive() # Make interactive for zoom/pan
+                st.altair_chart(chart, use_container_width=True)
+            else:
+                st.info("No registration data available to display trend.")
+        else:
+            st.info("No user data available to display registration trend.")
     
     # Detailed user table
-    st.header("👥 User Details")
-    
-    # Search and filter
-    col1, col2 = st.columns([2, 1])
-    with col1:
-        search_term = st.text_input("🔍 Search users", placeholder="Search by username or email")
-    with col2:
-        min_conversations = st.number_input("Min conversations", min_value=0, value=0)
-    
-    # Filter users
-    filtered_users = stats["user_details"]
-    if search_term:
-        filtered_users = [u for u in filtered_users if 
-                         search_term.lower() in u["username"].lower() or 
-                         search_term.lower() in u["email"].lower()]
-    
-    if min_conversations > 0:
-        filtered_users = [u for u in filtered_users if u["conversations"] >= min_conversations]
-    
-    # Display user table
-    if filtered_users:
-        for user in filtered_users:
-            with st.expander(f"👤 {user['username']} ({user['conversations']} conversations)"):
-                col1, col2 = st.columns(2)
-                
-                with col1:
-                    st.write(f"**Email:** {user['email']}")
-                    st.write(f"**Joined:** {user['joined']}")
-                    st.write(f"**Last Activity:** {user['last_activity']}")
-                
-                with col2:
-                    st.write(f"**Conversations:** {user['conversations']}")
-                    st.write(f"**Most Common Emotion:** {user['most_common_emotion']}")
+    st.markdown("<h2>👥 User Details</h2>", unsafe_allow_html=True)
+    with st.container(border=True): # Wrap user details section in a container
+        # Search and filter
+        col1, col2 = st.columns([2, 1])
+        with col1:
+            search_term = st.text_input("🔍 Search users", placeholder="Search by username or email", label_visibility="visible")
+        with col2:
+            min_conversations = st.number_input("Min conversations", min_value=0, value=0, label_visibility="visible")
+        
+        # Filter users
+        filtered_users = stats["user_details"]
+        if search_term:
+            filtered_users = [u for u in filtered_users if
+                              search_term.lower() in u["username"].lower() or
+                              search_term.lower() in u["email"].lower()]
+        
+        if min_conversations > 0:
+            filtered_users = [u for u in filtered_users if u["conversations"] >= min_conversations]
+        
+        # Display user table
+        if filtered_users:
+            for user in filtered_users:
+                with st.expander(f"👤 **{user['username']}** ({user['conversations']} conversations)"): # Bold username
+                    col1_detail, col2_detail = st.columns(2) # Renamed columns to avoid conflict
                     
-                    # Show emotion breakdown
-                    if user['emotions_breakdown']:
-                        st.write("**Emotion Breakdown:**")
-                        for emotion, count in user['emotions_breakdown'].items():
-                            st.write(f"  - {emotion.capitalize()}: {count}")
-                
-                # Quick actions
-                col1, col2, col3 = st.columns(3)
-                with col1:
-                    if st.button(f"View Journal", key=f"view_{user['username']}"):
-                        # Show user's recent conversations
-                        user_journal = load_user_journal(user['username'])
-                        if user_journal:
-                            st.subheader(f"Recent conversations for {user['username']}")
-                            for entry in user_journal[-5:]:
-                                st.text_area(
-                                    f"{entry['date']} - {entry['emotion'].capitalize()}",
-                                    f"User: {entry['user_input']}\nDilBot: {entry['response']}",
-                                    height=100,
-                                    disabled=True
-                                )
+                    with col1_detail:
+                        st.write(f"**Email:** {user['email']}")
+                        st.write(f"**Joined:** {user['joined']}")
+                        st.write(f"**Last Activity:** {user['last_activity']}")
+                    
+                    with col2_detail:
+                        st.write(f"**Conversations:** {user['conversations']}")
+                        st.write(f"**Most Common Emotion:** {user['most_common_emotion'].capitalize()}") # Capitalize emotion
+                        
+                        # Show emotion breakdown
+                        if user['emotions_breakdown']:
+                            st.write("**Emotion Breakdown:**")
+                            # Convert to DataFrame for a nicer table display
+                            emotions_df = pd.DataFrame([{"Emotion": e.capitalize(), "Count": c} for e, c in user['emotions_breakdown'].items()])
+                            st.dataframe(emotions_df, hide_index=True, use_container_width=True)
                         else:
-                            st.info("No conversations found")
-                
-                with col2:
-                    reset_key = f"reset_{user['username']}"
-                    confirm_key = f"confirm_{user['username']}"
+                            st.info("No emotion data for this user.")
                     
-                    if st.button(f"Reset Data", key=reset_key):
-                        st.session_state[confirm_key] = True  # Flag to show confirmation
+                    st.markdown("---") # Separator for actions
+                    # Quick actions
+                    col1_actions, col2_actions, col3_actions = st.columns(3) # Renamed columns
+                    with col1_actions:
+                        if st.button(f"View Journal", key=f"view_{user['username']}", use_container_width=True):
+                            # Show user's recent conversations
+                            user_journal = load_user_journal(user['username'])
+                            if user_journal:
+                                st.subheader(f"Recent conversations for {user['username']}")
+                                for entry in user_journal[-5:]: # Last 5 activities
+                                    st.text_area(
+                                        f"{entry['date']} - {entry['emotion'].capitalize()} ({round(entry['confidence'] * 100)}% confidence)",
+                                        f"User: {entry['user_input']}\nDilBot: {entry['response']}",
+                                        height=100,
+                                        disabled=True,
+                                        key=f"journal_entry_{user['username']}_{entry['date']}_{hash(entry['user_input'])}" # Unique key for text_area
+                                    )
+                            else:
+                                st.info("No conversations found for this user.")
                     
-                    if st.session_state.get(confirm_key, False):
-                        st.warning(f"Are you sure you want to reset data for {user['username']}?")
-                        if st.button(f"Yes, Reset {user['username']}", key=f"confirm_reset_{user['username']}"):
-                            # Clear user's journal
-                            journal_path = get_user_file_path(user['username'], "journal.json")
-                            if os.path.exists(journal_path):
-                                os.remove(journal_path)
-                            
-                            log_admin_activity("User Data Reset", f"Reset data for {user['username']}")
-                            st.success(f"Data reset for {user['username']}")
-                            st.session_state[confirm_key] = False  # Reset confirmation flag
-                            st.rerun()
-                        if st.button(f"Cancel", key=f"cancel_reset_{user['username']}"):
-                            st.session_state[confirm_key] = False  # Cancel confirmation
-                            st.rerun()
+                    with col2_actions:
+                        reset_key = f"reset_{user['username']}"
+                        confirm_key = f"confirm_{user['username']}"
+                        
+                        # Use a persistent state for confirmation
+                        if confirm_key not in st.session_state:
+                            st.session_state[confirm_key] = False
+
+                        if st.button(f"Reset Data", key=reset_key, use_container_width=True):
+                            st.session_state[confirm_key] = True  # Flag to show confirmation
+                            st.rerun() # Rerun to display confirmation message/buttons
+                        
+                        if st.session_state.get(confirm_key, False):
+                            st.warning(f"Are you sure you want to reset ALL data for {user['username']}? This action is irreversible.")
+                            col_confirm_yes, col_confirm_no = st.columns(2)
+                            with col_confirm_yes:
+                                if st.button(f"Yes, Reset", key=f"confirm_reset_{user['username']}", use_container_width=True):
+                                    # Clear user's journal
+                                    journal_path = get_user_file_path(user['username'], "journal.json")
+                                    if os.path.exists(journal_path):
+                                        os.remove(journal_path)
+                                        # Also remove vectorstore if it exists
+                                        vectorstore_path = get_user_file_path(user['username'], "faiss_index")
+                                        if os.path.exists(vectorstore_path):
+                                            import shutil
+                                            shutil.rmtree(vectorstore_path) # Remove directory for FAISS
+                                        
+                                    log_admin_activity("User Data Reset", f"Reset data for {user['username']}")
+                                    st.success(f"Data reset for {user['username']}!")
+                                    st.session_state[confirm_key] = False  # Reset confirmation flag
+                                    st.rerun()
+                            with col_confirm_no:
+                                if st.button(f"Cancel", key=f"cancel_reset_{user['username']}", use_container_width=True):
+                                    st.session_state[confirm_key] = False  # Cancel confirmation
+                                    st.info(f"Reset for {user['username']} cancelled.")
+                                    st.rerun() # Rerun to hide confirmation buttons
+
+                    with col3_actions:
+                        # Placeholder for other actions like "Deactivate User"
+                        st.button("Deactivate User (WIP)", key=f"deactivate_{user['username']}", disabled=True, use_container_width=True)
 
-    else:
-        st.info("No users found matching your criteria")
+        else:
+            st.info("No users found matching your criteria.")
     
     # System Analytics
-    st.header("🔧 System Analytics")
-    
-    col1, col2 = st.columns(2)
-    
-    with col1:
-        st.subheader("Emotion Distribution (All Users)")
-        # Aggregate all emotions
-        all_emotions = {}
-        for user in stats["user_details"]:
-            for emotion, count in user['emotions_breakdown'].items():
-                all_emotions[emotion] = all_emotions.get(emotion, 0) + count
+    st.markdown("<h2>🔧 System Analytics</h2>", unsafe_allow_html=True)
+    with st.container(border=True): # Wrap system analytics in a container
+        col1_analytics, col2_analytics = st.columns(2) # Renamed columns
         
-        if all_emotions:
-            emotion_chart_data = [{"emotion": emotion.capitalize(), "count": count} 
-                                 for emotion, count in all_emotions.items()]
+        with col1_analytics:
+            st.markdown("<h4>Emotion Distribution (All Users)</h4>", unsafe_allow_html=True)
+            # Aggregate all emotions
+            all_emotions = {}
+            for user in stats["user_details"]:
+                for emotion, count in user['emotions_breakdown'].items():
+                    all_emotions[emotion] = all_emotions.get(emotion, 0) + count
             
-            emotion_chart = alt.Chart(alt.Data(values=emotion_chart_data)).mark_bar().encode(
-                x=alt.X('emotion:N', title='Emotion'),
-                y=alt.Y('count:Q', title='Frequency'),
-                color=alt.Color('emotion:N', legend=None),
-                tooltip=['emotion:N', 'count:Q']
-            ).properties(
-                width=400,
-                height=300,
-                title="Overall Emotion Distribution"
-            )
-            st.altair_chart(emotion_chart, use_container_width=True)
-    
-    with col2:
-        st.subheader("User Activity Levels")
-        activity_levels = {"Inactive (0)": 0, "Light (1-5)": 0, "Moderate (6-20)": 0, "Heavy (21+)": 0}
-        
-        for user in stats["user_details"]:
-            conv_count = user["conversations"]
-            if conv_count == 0:
-                activity_levels["Inactive (0)"] += 1
-            elif conv_count <= 5:
-                activity_levels["Light (1-5)"] += 1
-            elif conv_count <= 20:
-                activity_levels["Moderate (6-20)"] += 1
+            if all_emotions:
+                emotion_chart_data = [{"emotion": emotion.capitalize(), "count": count}
+                                      for emotion, count in all_emotions.items()]
+                
+                emotion_chart = alt.Chart(pd.DataFrame(emotion_chart_data)).mark_bar().encode(
+                    x=alt.X('emotion:N', title='Emotion', sort='-y'), # Sort by count descending
+                    y=alt.Y('count:Q', title='Frequency'),
+                    color=alt.Color('emotion:N', legend=None, scale=alt.Scale(
+                        range=['#4CAF50', '#FFC107', '#E74C3C', '#3498DB', '#9B59B6', '#1ABC9C', '#FF5733'])), # More colors
+                    tooltip=['emotion:N', 'count:Q']
+                ).properties(
+                    title="Overall Emotion Distribution"
+                ).interactive()
+                st.altair_chart(emotion_chart, use_container_width=True)
             else:
-                activity_levels["Heavy (21+)"] += 1
+                st.info("No emotion data available for overall analysis.")
         
-        activity_data = [{"level": level, "users": count} for level, count in activity_levels.items()]
-        
-        activity_chart = alt.Chart(alt.Data(values=activity_data)).mark_arc().encode(
-            theta=alt.Theta('users:Q'),
-            color=alt.Color('level:N', title="Activity Level"),
-            tooltip=['level:N', 'users:Q']
-        ).properties(
-            width=300,
-            height=300,
-            title="User Activity Distribution"
-        )
-        st.altair_chart(activity_chart, use_container_width=True)
-    
-    # Admin logs
-    st.header("📋 Admin Activity Logs")
-    admin_logs = get_admin_logs()
-    
-    if admin_logs:
-        # Show recent admin activities
-        for log_entry in reversed(admin_logs[-10:]):  # Last 10 activities
-            timestamp = datetime.datetime.fromisoformat(log_entry["timestamp"])
-            st.text(f"{timestamp.strftime('%Y-%m-%d %H:%M:%S')} - {log_entry['action']}: {log_entry['details']}")
-    else:
-        st.info("No admin activities logged yet")
-    
-    # Export functionality
-    st.header("Data Export")
-    col1, col2 = st.columns(2)
-    
-    with col1:
-        if st.button("Export User Data (JSON)"):
-            export_data = {
-                "export_timestamp": str(datetime.datetime.now()),
-                "statistics": stats,
-                "admin_logs": admin_logs
-            }
+        with col2_analytics:
+            st.markdown("<h4>User Activity Levels</h4>", unsafe_allow_html=True)
+            activity_levels = {"Inactive (0)": 0, "Light (1-5)": 0, "Moderate (6-20)": 0, "Heavy (21+)": 0}
+            
+            for user in stats["user_details"]:
+                conv_count = user["conversations"]
+                if conv_count == 0:
+                    activity_levels["Inactive (0)"] += 1
+                elif conv_count <= 5:
+                    activity_levels["Light (1-5)"] += 1
+                elif conv_count <= 20:
+                    activity_levels["Moderate (6-20)"] += 1
+                else:
+                    activity_levels["Heavy (21+)"] += 1
             
-            st.download_button(
-                label="Download User Data",
-                data=json.dumps(export_data, indent=4),
-                file_name=f"dilbot_export_{datetime.date.today()}.json",
-                mime="application/json"
-            )
+            activity_data = [{"level": level, "users": count} for level, count in activity_levels.items()]
             
-            log_admin_activity("Data Export", "Exported user data")
+            if activity_data:
+                activity_chart = alt.Chart(pd.DataFrame(activity_data)).mark_arc(outerRadius=120, innerRadius=80).encode( # Donut chart
+                    theta=alt.Theta('users:Q'),
+                    color=alt.Color('level:N', title="Activity Level", scale=alt.Scale(
+                        range=['#6c757d', '#64b5f6', '#5d6dbe', '#4a5c9d'])), # Consistent color scheme
+                    order=alt.Order('users:Q', sort='descending'),
+                    tooltip=['level:N', 'users:Q']
+                ).properties(
+                    title="User Activity Distribution"
+                ).interactive()
+                st.altair_chart(activity_chart, use_container_width=True)
+            else:
+                st.info("No user activity data to display.")
     
-    with col2:
-        if st.button("Clear Admin Logs"):
-            admin_log_path = "data/admin_log.json"
-            if os.path.exists(admin_log_path):
-                os.remove(admin_log_path)
-            st.success("Admin logs cleared!")
+    # Admin logs
+    st.markdown("<h2>📋 Admin Activity Logs</h2>", unsafe_allow_html=True)
+    with st.container(border=True): # Wrap admin logs in a container
+        admin_logs = get_admin_logs()
+        
+        if admin_logs:
+            st.subheader("Recent Admin Activities (Last 10)")
+            # Display logs in a more readable format, perhaps a table or structured text
+            for log_entry in reversed(admin_logs[-10:]): # Last 10 activities, reversed to show newest first
+                timestamp = datetime.datetime.fromisoformat(log_entry["timestamp"])
+                st.markdown(f"**{timestamp.strftime('%Y-%m-%d %H:%M:%S')}** - **{log_entry['action']}**: `{log_entry['details']}`")
+                st.markdown("---") # Small separator
+        else:
+            st.info("No admin activities logged yet.")
+    
+    # Data Export and Admin Log Clearing
+    st.markdown("<h2>💾 Data Management</h2>", unsafe_allow_html=True)
+    with st.container(border=True): # Wrap data export in a container
+        col1_export, col2_export = st.columns(2) # Renamed columns
+        
+        with col1_export:
+            st.markdown("<h4>Export Application Data</h4>", unsafe_allow_html=True)
+            if st.button("Export All Data (JSON)", key="export_data_btn", use_container_width=True):
+                export_data = {
+                    "export_timestamp": str(datetime.datetime.now()),
+                    "statistics": stats,
+                    "admin_logs": admin_logs
+                }
+                
+                st.download_button(
+                    label="Download Exported Data",
+                    data=json.dumps(export_data, indent=4),
+                    file_name=f"dilbot_admin_export_{datetime.date.today().isoformat()}.json",
+                    mime="application/json",
+                    key="download_export_btn",
+                    use_container_width=True
+                )
+                
+                log_admin_activity("Data Export", "Initiated data export")
+                st.success("Data export ready for download!")
+        
+        with col2_export:
+            st.markdown("<h4>Clear Admin Activity Logs</h4>", unsafe_allow_html=True)
+            # Add a confirmation step for clearing logs
+            clear_log_confirm_key = "clear_log_confirm"
+            if clear_log_confirm_key not in st.session_state:
+                st.session_state[clear_log_confirm_key] = False
+
+            if st.button("Clear Admin Logs", key="clear_admin_logs_btn", use_container_width=True):
+                st.session_state[clear_log_confirm_key] = True
+                st.rerun()
+
+            if st.session_state.get(clear_log_confirm_key, False):
+                st.warning("Are you sure you want to clear ALL admin logs? This action is irreversible.")
+                col_clear_yes, col_clear_no = st.columns(2)
+                with col_clear_yes:
+                    if st.button("Yes, Clear Logs", key="confirm_clear_logs_btn", use_container_width=True):
+                        admin_log_path = "data/admin_log.json"
+                        if os.path.exists(admin_log_path):
+                            os.remove(admin_log_path)
+                        st.success("Admin logs cleared successfully!")
+                        log_admin_activity("Admin Logs Cleared", "All admin activity logs were cleared")
+                        st.session_state[clear_log_confirm_key] = False
+                        st.rerun()
+                with col_clear_no:
+                    if st.button("Cancel", key="cancel_clear_logs_btn", use_container_width=True):
+                        st.session_state[clear_log_confirm_key] = False
+                        st.info("Clearing admin logs cancelled.")
+                        st.rerun()
+
+    st.markdown("---")
+    # Back to main app button (aligned left in a container)
+    with st.container():
+        st.markdown("<div style='display: flex; justify-content: flex-start;'>", unsafe_allow_html=True)
+        if st.button("⬅️ Back to Main App", key="admin_back_btn"):
+            st.session_state.authenticated = True # Keep admin logged in
+            st.session_state.is_admin = False # Temporarily set to False to show main app
             st.rerun()
+        st.markdown("</div>", unsafe_allow_html=True)
+
+
+    st.markdown("<p class='footer-caption'>DilBot Admin Panel | Powered by Streamlit</p>", unsafe_allow_html=True)
             
 def speak(text, username):
     """Generate and play audio response"""