Update app.py

app.py

@@ -2,22 +2,15 @@ import streamlit as st
 import pandas as pd
 import time
 import requests
+import os
 
 # Set page configuration (must be the first Streamlit command)
 st.set_page_config(page_title="Ticket System", layout="centered", initial_sidebar_state="expanded")
 
-def center_logo(image_path, width=200):
-    # Use columns to center the logo
-    col1, col2, col3 = st.columns([1, 2, 1])  # Adjust the ratios to center the logo
-    with col2:  # Place the logo in the middle column
-        st.image(image_path, width=width, use_container_width=False)  # Adjust width as needed
-
-
-        
 # Apply custom CSS for design
 st.markdown(
     """
-    <style>
+        <style>
     /* Hide the header */
     header[data-testid="stHeader"] {
         display: none;
@@ -27,22 +20,25 @@ st.markdown(
     .stApp {
         margin-top: -50px;
     }
-
+    <style>
     .stApp { background-color: #E4ECE3; }
     section[data-testid="stSidebar"] { background-color: #084C3C; }
     section[data-testid="stSidebar"] p, section[data-testid="stSidebar"] label { color: white; }
     input, textarea, select, .stFileUploader { background-color: white !important; border: 2px solid #084C3C !important; color: #084C3C !important; border-radius: 5px !important; }
     input:focus, textarea:focus, select:focus, .stFileUploader:focus { border: 2px solid #7FDB8B !important; outline: none !important; }
     div[data-testid="stFormSubmitButton"] button, div.stButton > button {
-        background-color: #084C3C !important; /* Dark green background */
+        background-color: #7FDB8B !important; /* Light green background */
         color: white !important; /* White text */
         border-radius: 10px !important; /* Rounded corners */
         padding: 10px 20px !important; /* Button padding */
-        border: none !important; /* Remove border */
+        border: 2px solid #084C3C !important; /* Dark green border for consistency */
+        font-size: 16px !important; /* Ensure text size is visible */
+        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
     }
     div[data-testid="stFormSubmitButton"] button:hover, div.stButton > button:hover {
-        background-color: #7FDB8B !important; /* Slightly lighter green on hover */
-        color: #084C3C !important; /* Dark green text on hover */
+        background-color: #084C3C !important; /* Dark green background on hover */
+        color: white !important; /* Keep white text on hover */
+        border-color: #7FDB8B !important; /* Lighter green border on hover */
     }
     table { border-collapse: collapse; width: 100%; background-color: #E4ECE3; }
     th, td { border: 1px solid #084C3C; text-align: left; padding: 10px; color: #084C3C; }
@@ -59,19 +55,21 @@ st.markdown(
         color: #084C3C !important;
     }
 
-    /* Submit button custom styling */
-    div[data-testid="stFormSubmitButton"] button {
-        background-color: #084C3C !important; /* Dark green background */
+    /* Custom login button */
+    .custom-login-button {
+        background-color: #7FDB8B !important; /* Light green background */
         color: white !important; /* White text */
-        border: none !important; /* Remove border */
-        border-radius: 5px !important; /* Rounded corners */
+        border: 2px solid #084C3C !important; /* Dark green border */
+        border-radius: 10px !important; /* Rounded corners */
         padding: 10px 20px !important; /* Button padding */
+        font-size: 16px !important; /* Ensure text size is visible */
+        text-align: center; /* Center-align text */
+        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
+        cursor: pointer; /* Pointer cursor for hover */
     }
-
-    div[data-testid="stFormSubmitButton"] button:focus,
-    div[data-testid="stFormSubmitButton"] button:hover {
-        background-color: #066B4E !important; /* Slightly lighter green on hover/focus */
-        color: white !important; /* Keep white text on hover/focus */
+    .custom-login-button:hover {
+        background-color: #084C3C !important; /* Dark green background on hover */
+        color: white !important; /* Keep white text on hover */
     }
     </style>
     """,
@@ -85,51 +83,109 @@ users = {
     "customer789": {"password": "customerpass", "role": "Customer"},
 }
 
-# Function to load a Lottie animation from a URL
-def load_lottie_url(url: str):
-    r = requests.get(url)
-    if r.status_code != 200:
-        return None
-    return r.json()
-
-# URL for your animation (optional)
-lottie_url = "https://assets6.lottiefiles.com/packages/lf20_5hhtik.json"
-lottie_json = load_lottie_url(lottie_url)
-
-def show_loading_animation():
-    if lottie_json:
-        st_lottie(lottie_json, height=300, key="loading")
-
 def login_page():
-    
     # Add custom styling and an image at the top
-    customize_login_page_with_image("logo.png")  # Replace "image.png" with the actual path to your image
-    #center_logo("logo.png")
-    st.title("Login Page")  # The title will be styled in dark green
+    customize_login_page()
+    st.markdown(
+    """
+    <style>
+    .center-title {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 50px; /* Optional: Adjust height */
+        font-size: 36px; /* Optional: Adjust font size */
+        font-weight: bold; /* Optional: Adjust font weight */
+        color: #084C3C; /* Optional: Set text color */
+    }
+    </style>
+    <div class="center-title">Login Page</div>
+    """,
+    unsafe_allow_html=True
+)
 
+    
+    username = st.text_input("Username")
+    password = st.text_input("Password", type="password")
+    
     # Check login state
     if "login_success" not in st.session_state:
         st.session_state["login_success"] = False
+    st.markdown(
+        """
+        <style>
+        div.stButton > button {
+            background-color: #4CAF50 !important;
+            color: white !important;
+            border: none;
+            padding: 10px 20px !important;
+            text-align: center !important;
+            text-decoration: none;
+            font-size: 16px !important;
+            font-weight: bold !important;
+            cursor: pointer;
+            border-radius: 4px !important;
+            transition: background-color 0.3s ease;
+            display: inline-block;
+            margin-top: 20px; /* Space above the button */
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
+        }
+        div.stButton > button:hover {
+            background-color: #45a049 !important;
+            color: white !important;
+        }
+        </style>
+        """,
+        unsafe_allow_html=True,
+    )
 
-    # Login logic
-    if not st.session_state["login_success"]:
-        username = st.text_input("Username")
-        password = st.text_input("Password", type="password")
-        if st.button("Login"):
-            if username in users and users[username]["password"] == password:
-                st.session_state["user_type"] = users[username]["role"]
-                st.session_state["logged_in"] = True
-                st.session_state["login_success"] = True
-                st.success(f"Logged in successfully as {users[username]['role']}")
-                time.sleep(1)
-            else:
-                st.error("Invalid username or password.")
+# Functional and visually styled login button
+    if st.button("Login"):
+        if username in users and users[username]["password"] == password:
+            st.session_state["user_type"] = users[username]["role"]
+            st.session_state["logged_in"] = True
+            st.session_state["login_success"] = True
+            st.success(f"Logged in successfully as {users[username]['role']}")
+            time.sleep(1)
+        else:
+            st.error("Invalid username or password.")
 
 def add_return_to_login():
     if "logged_in" in st.session_state and st.session_state["logged_in"]:
+        # Add custom styling for the Back button
+        st.markdown(
+            """
+            <style>
+            div.stButton > button {
+                background-color: #4CAF50 !important;
+                color: white !important;
+                border: none;
+                padding: 10px 20px !important;
+                text-align: center !important;
+                text-decoration: none;
+                font-size: 16px !important;
+                font-weight: bold !important;
+                cursor: pointer;
+                border-radius: 4px !important;
+                transition: background-color 0.3s ease;
+                display: inline-block;
+                margin-top: 20px; /* Space above the button */
+                box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
+            }
+            div.stButton > button:hover {
+                background-color: #45a049 !important;
+                color: white !important;
+            }
+            </style>
+            """,
+            unsafe_allow_html=True,
+        )
+
+        # Functional and visually styled "Back" button
         if st.sidebar.button("Back"):
-            st.session_state.clear()
-            st.rerun()
+            # Reset the 'logged_in' state and force a redirect to the login page
+            st.session_state["logged_in"] = False; st.session_state["login_success"] = False; st.stop();st.experimental_rerun()
+
 
 def main():
     if "logged_in" not in st.session_state or not st.session_state["logged_in"]:
@@ -137,7 +193,10 @@ def main():
         return
 
     add_return_to_login()
+    user_type = st.session_state.get("user_type", "Customer")
+    st.sidebar.title("Navigation")
     
+
     user_type = st.session_state.get("user_type", "Customer")
     st.sidebar.title("Navigation")
 
@@ -151,9 +210,6 @@ def main():
         st.sidebar.write("No pages available for this user type.")
         return
 
-    with st.spinner("Loading..."):
-        show_loading_animation()
-        time.sleep(0.5)
 
     if page == "Submit Ticket":
         submit_ticket_page()
@@ -173,11 +229,12 @@ def main():
         employee_ticket_status_page()
 
 def submit_ticket_page():
+    # Add logo and title
     st.image("logo.png", width=200)
-    #center_logo("logo.png")  # Center the logo
     st.markdown('<h1 style="color: #084C3C;">Submit a Ticket</h1>', unsafe_allow_html=True)
     st.markdown('<p style="color: #084C3C;">Please fill out the form below to submit a ticket.</p>', unsafe_allow_html=True)
 
+    # Form for submitting a ticket
     with st.form(key="submit_ticket_form"):
         customer_id = st.text_input("Customer ID")
         st.text_input("First Name")
@@ -188,19 +245,91 @@ def submit_ticket_page():
         st.selectbox("Ticket Type", ["General", "Billing", "Technical"])
         st.text_area("Describe your issue/request")
         st.file_uploader("Upload Attachments (if any)", accept_multiple_files=True)
+        
+        # Add custom styling for the Submit button
+        st.markdown(
+            """
+            <style>
+            div[data-testid="stFormSubmitButton"] > button {
+                background-color: #4CAF50 !important;
+                color: white !important;
+                border: none;
+                padding: 10px 20px !important;
+                text-align: center !important;
+                text-decoration: none;
+                font-size: 16px !important;
+                font-weight: bold !important;
+                cursor: pointer;
+                border-radius: 4px !important;
+                transition: background-color 0.3s ease;
+                display: inline-block;
+                margin-top: 20px; /* Space above the button */
+                box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
+            }
+            div[data-testid="stFormSubmitButton"] > button:hover {
+                background-color: #45a049 !important;
+                color: white !important;
+            }
+            </style>
+            """,
+            unsafe_allow_html=True,
+        )
+
+        # Submit button logic
         if st.form_submit_button("Submit"):
-            st.success(f"Your ticket has been submitted successfully. Customer ID: {customer_id}")
+            if customer_id.strip():
+                st.success(f"Your ticket has been submitted successfully. Customer ID: {customer_id}")
+            else:
+                st.error("Please fill out the Customer ID.")
 
 def check_ticket_status_page():
+    # Add logo and title
     st.image("logo.png", width=200)
-    #center_logo("logo.png")  # Center the logo
     st.markdown('<h1 style="color: #084C3C;">Check Ticket Status</h1>', unsafe_allow_html=True)
     st.markdown('<p style="color: #084C3C;">Enter your Customer ID to view your tickets.</p>', unsafe_allow_html=True)
 
+    # Input field for Customer ID
     customer_id = st.text_input("Customer ID")
+
+    # Check ticket status submission state
+    if "customer_check_status_success" not in st.session_state:
+        st.session_state["customer_check_status_success"] = False
+
+    # Add custom styling for the Check Status button
+    st.markdown(
+        """
+        <style>
+        div.stButton > button {
+            background-color: #4CAF50 !important;
+            color: white !important;
+            border: none;
+            padding: 10px 20px !important;
+            text-align: center !important;
+            text-decoration: none;
+            font-size: 16px !important;
+            font-weight: bold !important;
+            cursor: pointer;
+            border-radius: 4px !important;
+            transition: background-color 0.3s ease;
+            display: inline-block;
+            margin-top: 20px; /* Space above the button */
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
+        }
+        div.stButton > button:hover {
+            background-color: #45a049 !important;
+            color: white !important;
+        }
+        </style>
+        """,
+        unsafe_allow_html=True,
+    )
+
+    # Functional and visually styled "Check Status" button
     if st.button("Check Status"):
-        if customer_id:
+        if customer_id.strip():
+            st.session_state["customer_check_status_success"] = True
             st.success(f"Displaying tickets for Customer ID: {customer_id}")
+            # Example ticket data
             ticket_data = {
                 "Ticket Number": ["141", "565", "999"],
                 "Date": ["2025-01-18", "2025-03-28", "2025-04-01"],
@@ -210,11 +339,10 @@ def check_ticket_status_page():
             df = pd.DataFrame(ticket_data)
             st.dataframe(df)
         else:
-            st.warning("Please enter your Customer ID.")
+            st.error("Please enter your Customer ID.")
 
 def faq_info_page():
     st.image("logo.png", width=200)
-    #center_logo("logo.png")  # Center the logo
     st.markdown('<h1 style="color: #084C3C;">FAQ & Information</h1>', unsafe_allow_html=True)
 
     faq_data = [
@@ -229,9 +357,11 @@ def faq_info_page():
         st.markdown(f'<p style="color: #084C3C;">{answer}</p>', unsafe_allow_html=True)
 
 def respond_to_ticket_page():
+    # Add logo and title
     st.image("logo.png", width=200)
-    #center_logo("logo.png")  # Center the logo
     st.markdown('<h1 style="color: #084C3C;">Respond to a Ticket</h1>', unsafe_allow_html=True)
+    
+    # Display ticket data
     ticket_data = {
         "Ticket Number": ["141", "565", "999"],
         "Customer ID": ["C001", "C002", "C003"],
@@ -242,38 +372,123 @@ def respond_to_ticket_page():
     }
     df = pd.DataFrame(ticket_data)
     st.dataframe(df)
+
+    # Dropdown to select a ticket
     ticket_to_respond = st.selectbox("Select a ticket to respond to:", df["Ticket Number"].tolist())
+    
+    # Text area for response
+    response_text = st.text_area("Response:", placeholder="Write your response here...")
+    
+    # Check response submission state
+    if "response_success" not in st.session_state:
+        st.session_state["response_success"] = False
+
+    # Add custom styling for the button
+    st.markdown(
+        """
+        <style>
+        div.stButton > button {
+            background-color: #4CAF50 !important;
+            color: white !important;
+            border: none;
+            padding: 10px 20px !important;
+            text-align: center !important;
+            text-decoration: none;
+            font-size: 16px !important;
+            font-weight: bold !important;
+            cursor: pointer;
+            border-radius: 4px !important;
+            transition: background-color 0.3s ease;
+            display: inline-block;
+            margin-top: 20px; /* Space above the button */
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
+        }
+        div.stButton > button:hover {
+            background-color: #45a049 !important;
+            color: white !important;
+        }
+        </style>
+        """,
+        unsafe_allow_html=True,
+    )
+
+    # Functional and visually styled "Respond to Ticket" button
     if st.button("Respond to Ticket"):
-        st.text_area("Response:", placeholder="Write your response here...")
-        st.button("Submit Response")
+        if response_text.strip():
+            st.session_state["response_success"] = True
+            st.success(f"Response for Ticket {ticket_to_respond} submitted successfully!")
+        else:
+            st.error("Please write a response before submitting.")
 
 def employee_ticket_status_page():
+    # Add logo and title
     st.image("logo.png", width=200)
-    #center_logo("logo.png")  # Center the logo
     st.markdown('<h1 style="color: #084C3C;">Ticket Status</h1>', unsafe_allow_html=True)
+
+    # Input field for Customer ID
     customer_id = st.text_input("Customer ID")
-    if st.button("Check Ticket Status"):
-        ticket_data = {
-            "Ticket Number": ["141", "565", "999"],
-            "Status": ["Resolved", "Pending", "In Progress"],
+
+    # Check ticket status submission state
+    if "employee_ticket_status_success" not in st.session_state:
+        st.session_state["employee_ticket_status_success"] = False
+
+    # Add custom styling for the "Check Ticket Status" button
+    st.markdown(
+        """
+        <style>
+        div.stButton > button {
+            background-color: #4CAF50 !important;
+            color: white !important;
+            border: none;
+            padding: 10px 20px !important;
+            text-align: center !important;
+            text-decoration: none;
+            font-size: 16px !important;
+            font-weight: bold !important;
+            cursor: pointer;
+            border-radius: 4px !important;
+            transition: background-color 0.3s ease;
+            display: inline-block;
+            margin-top: 20px; /* Space above the button */
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
         }
-        df = pd.DataFrame(ticket_data)
-        st.dataframe(df)
+        div.stButton > button:hover {
+            background-color: #45a049 !important;
+            color: white !important;
+        }
+        </style>
+        """,
+        unsafe_allow_html=True,
+    )
+
+    # Functional and visually styled "Check Ticket Status" button
+    if st.button("Check Ticket Status"):
+        if customer_id.strip():
+            st.session_state["employee_ticket_status_success"] = True
+            st.success(f"Displaying tickets for Customer ID: {customer_id}")
+            # Example ticket data
+            ticket_data = {
+                "Ticket Number": ["141", "565", "999"],
+                "Status": ["Resolved", "Pending", "In Progress"],
+            }
+            df = pd.DataFrame(ticket_data)
+            st.dataframe(df)
+        else:
+            st.error("Please enter your Customer ID.")
 
 def ticket_dashboard_page():
     st.image("logo.png", width=200)
-    #center_logo("logo.png")  # Center the logo
     st.markdown('<h1 style="color: #084C3C;">Ticket Dashboard</h1>', unsafe_allow_html=True)
     st.components.v1.iframe(
         "https://app.powerbi.com/view?r=eyJrIjoiMDEwNzA2YjUtNGY0MC00NTFjLTg1ZTctYTZlZjQzOTUwNWUxIiwidCI6ImI0NTNkOTFiLTZhYzEtNGI2MS1iOGI4LTVlNjVlNDIyMjMzZiIsImMiOjl9",
-        height=800,
+        height=700,
         width=1000,
         scrolling=True
     )
 
+
 def customer_dashboard_page():
     st.image("logo.png", width=200)
-    #center_logo("logo.png")  # Center the logo
     st.markdown('<h1 style="color: #084C3C;">Customer Dashboard</h1>', unsafe_allow_html=True)
     customer_data = {
         "Customer ID": ["C001", "C002", "C003"],
@@ -284,8 +499,8 @@ def customer_dashboard_page():
     st.dataframe(df)
     st.components.v1.iframe(
         "https://app.powerbi.com/view?r=eyJrIjoiY2Q0ODE1NGItOThjMy00MzM4LWE2OGUtMjRkNmUzYmZlMDk3IiwidCI6ImI0NTNkOTFiLTZhYzEtNGI2MS1iOGI4LTVlNjVlNDIyMjMzZiIsImMiOjl9",
-        height=800,
-        width=1000,
+        height=600,
+        width=800,
         scrolling=True
     )
 
@@ -313,6 +528,8 @@ def management_dashboard_page():
         scrolling=True
     )
 
+
+
 def customize_navigation_menu_dark_green():
     st.markdown(
         """
@@ -334,24 +551,36 @@ def customize_navigation_menu_dark_green():
         unsafe_allow_html=True
     )
 
-def customize_login_page_with_image(image_path):
-    # Use columns to center the logo and title
-    col1, col2, col3 = st.columns([1, 2, 1])  # Adjust the ratios to center the content
-    with col2:  # Place the logo and title in the middle column
-        st.image(image_path, width=200, use_container_width=False)  # Adjust width as needed
-        st.markdown(
-            """
-            <style>
-            h1 {
-                color: #084C3C !important; /* Dark green for Login Page title */
-                text-align: center; /* Center align the title */
-                margin-top: 0 !important; /* Remove extra spacing above the title */
-            }
-            </style>
-            """,
-            unsafe_allow_html=True
-        )
-       # st.title("Login Page")  # The title will be styled in dark green
+
+def customize_login_page():
+    # Add custom CSS for styling
+    st.markdown(
+        """
+        <style>
+        .center-content {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            margin-top: 20px;
+        }
+        </style>
+        """,
+        unsafe_allow_html=True,
+    )
+
+    # Use st.markdown to create a centered container for the image
+    st.markdown('<div class="center-content">', unsafe_allow_html=True)
+    
+    # Display the image in the center
+    st.image(
+        "logo.png", 
+        width=200, 
+        use_container_width=False
+    )
+ 
+
+   
 
 def customize_submit_button():
     st.markdown(
@@ -376,20 +605,9 @@ def customize_submit_button():
         unsafe_allow_html=True
     )
 
-def customize_button_text_color():
-    st.markdown(
-        """
-        <style>
-        /* Styling buttons to ensure white text */
-        div[data-testid="stFormSubmitButton"] button, div.stButton > button {
-            color: white !important; /* Ensure button text is white */
-        }
-        </style>
-        """,
-        unsafe_allow_html=True
-    )
+
+
 
 if __name__ == "__main__":
     customize_navigation_menu_dark_green()
-    customize_button_text_color()
     main()