Update app.py

app.py

@@ -10,91 +10,15 @@ st.set_page_config(page_title="Ticket System", layout="centered", initial_sideba
 st.markdown(
     """
     <style>
-    /* General background color for the entire app */
-    .stApp {
-        background-color: #084C3C;
-    }
-
-    /* Sidebar (Navigation Menu) styling */
-    section[data-testid="stSidebar"] {
-        background-color: #E4ECE3; /* Light green background */
-        color: #084C3C; /* Dark green text */
-    }
-
-    /* Sidebar text and titles styling */
-    section[data-testid="stSidebar"] p, section[data-testid="stSidebar"] h1, 
-    section[data-testid="stSidebar"] h2, section[data-testid="stSidebar"] h3 {
-        color: #084C3C; /* Dark green for text */
-    }
-
-    /* Input fields styling */
-    input, textarea, select, .stFileUploader {
-        background-color: white !important; /* White background for fields */
-        border: 2px solid #E4ECE3 !important; /* Light green border */
-        color: #084C3C !important; /* Dark green text color */
-        border-radius: 5px !important; /* Rounded corners */
-    }
-
-    /* Input fields focus effect */
-    input:focus, textarea:focus, select:focus, .stFileUploader:focus {
-        border: 2px solid #7FDB8B !important; /* Lighter green on focus */
-        outline: none !important; /* Remove default focus outline */
-    }
-
-    /* Button styling */
-    div[data-testid="stFormSubmitButton"] button, div.stButton > button {
-        background-color: #E4ECE3 !important; /* Light green button background */
-        color: #084C3C !important; /* Dark green text */
-        border-radius: 10px !important; /* Rounded corners */
-        padding: 10px 20px !important;
-        border: none !important;
-    }
-
-    /* Button hover effect */
-    div[data-testid="stFormSubmitButton"] button:hover, div.stButton > button:hover {
-        background-color: #7FDB8B !important; /* Lighter green on hover */
-        color: white !important; /* White text on hover */
-    }
-
-    /* Table styling */
-    table {
-        border-collapse: collapse;
-        width: 100%;
-        background-color: #E4ECE3; /* Light green background */
-    }
-
-    th, td {
-        border: 1px solid #084C3C; /* Dark green border */
-        text-align: left;
-        padding: 10px;
-        color: #084C3C; /* Dark green text */
-    }
-
-    th {
-        background-color: #7FDB8B; /* Light green for table header */
-    }
-
-    tr:nth-child(even) {
-        background-color: #f9f9f9; /* Light gray for alternating rows */
-    }
-
-    /* Placeholder text styling */
-    input::placeholder, textarea::placeholder {
-        color: #084C3C !important;
-        opacity: 0.7;
-    }
-
-    /* Title and header styling */
-    h1, h2, h3 {
-        color: #E4ECE3; /* Light green text for titles */
-    }
-
-    /* Spinner styling */
-    .css-1fgu7a7 {
-        background-color: #E4ECE3 !important;
-        border: 2px solid #084C3C !important;
-        color: #084C3C !important;
-    }
+    .stApp { background-color: #084C3C; }
+    section[data-testid="stSidebar"] { background-color: #E4ECE3; color: #084C3C; }
+    input, textarea, select, .stFileUploader { background-color: white; border: 2px solid #E4ECE3; color: #084C3C; border-radius: 5px; }
+    div[data-testid="stFormSubmitButton"] button, div.stButton > button { background-color: #E4ECE3; color: #084C3C; border-radius: 10px; padding: 10px 20px; border: none; }
+    div[data-testid="stFormSubmitButton"] button:hover, div.stButton > button:hover { background-color: #7FDB8B; color: white; }
+    table { border-collapse: collapse; width: 100%; background-color: #E4ECE3; }
+    th, td { border: 1px solid #084C3C; text-align: left; padding: 10px; color: #084C3C; }
+    th { background-color: #7FDB8B; }
+    tr:nth-child(even) { background-color: #f9f9f9; }
     </style>
     """,
     unsafe_allow_html=True
@@ -114,25 +38,22 @@ def load_lottie_url(url: str):
         return None
     return r.json()
 
-# URL for the animation (optional)
+# URL for your animation (optional)
 lottie_url = "https://assets6.lottiefiles.com/packages/lf20_5hhtik.json"
 lottie_json = load_lottie_url(lottie_url)
 
-# Function to display the Lottie animation
 def show_loading_animation():
     if lottie_json:
         st_lottie(lottie_json, height=300, key="loading")
 
 def login_page():
     st.title("Login Page")
-
     if "login_success" not in st.session_state:
         st.session_state["login_success"] = False
 
     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"]
@@ -160,19 +81,11 @@ def main():
     st.sidebar.title("Navigation")
 
     if user_type == "Customer":
-        page = st.sidebar.radio(
-            "Go to",
-            ["Submit Ticket", "Check Ticket Status", "FAQ & Info"]
-        )
+        page = st.sidebar.radio("Go to", ["Submit Ticket", "Check Ticket Status", "FAQ & Info"])
     elif user_type == "Manager":
-        page = st.sidebar.radio(
-            "Go to",
-            ["Management Dashboard", "Ticket Dashboard", "Customer Dashboard"]
-        )
+        page = st.sidebar.radio("Go to", ["Management Dashboard", "Ticket Dashboard", "Customer Dashboard"])
     elif user_type == "Employee":
-        page = st.sidebar.radio(
-            "Go to", ["Respond to a Ticket", "Ticket Status"]
-        )
+        page = st.sidebar.radio("Go to", ["Respond to a Ticket", "Ticket Status"])
     else:
         st.sidebar.write("No pages available for this user type.")
         return
@@ -187,24 +100,22 @@ def main():
         check_ticket_status_page()
     elif page == "FAQ & Info":
         faq_info_page()
-    elif page == "Respond to a Ticket":
-        respond_to_ticket_page()
-    elif page == "Ticket Status":
-        employee_ticket_status_page()
     elif page == "Management Dashboard":
         management_dashboard_page()
     elif page == "Ticket Dashboard":
         ticket_dashboard_page()
     elif page == "Customer Dashboard":
         customer_dashboard_page()
+    elif page == "Respond to a Ticket":
+        respond_to_ticket_page()
+    elif page == "Ticket Status":
+        employee_ticket_status_page()
 
 def submit_ticket_page():
     st.image("logo.png", width=200)
-    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)
-
+    st.title("Submit a Ticket")
     with st.form(key="submit_ticket_form"):
-        customer_id = st.text_input("Customer ID")
+        st.text_input("Customer ID")
         st.text_input("First Name")
         st.text_input("Last Name")
         st.text_input("National ID / Residency Number")
@@ -214,28 +125,44 @@ def submit_ticket_page():
         st.text_area("Describe your issue/request")
         st.file_uploader("Upload Attachments (if any)", accept_multiple_files=True)
         if st.form_submit_button("Submit"):
-            st.success(f"Your ticket has been submitted successfully. Customer ID: {customer_id}")
+            st.success("Your ticket has been submitted successfully.")
 
 def check_ticket_status_page():
     st.image("logo.png", width=200)
-    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)
-
-    customer_id = st.text_input("Customer ID")
+    st.title("Check Ticket Status")
+    st.text_input("Customer ID")
     if st.button("Check Status"):
-        if customer_id:
-            st.success(f"Displaying tickets for Customer ID: {customer_id}")
-            ticket_data = {
-                "Ticket Number": ["141", "565", "999"],
-                "Date": ["2025-01-18", "2025-03-28", "2025-04-01"],
-                "Type": ["General", "Billing", "Technical"],
-                "Status": ["Resolved", "Pending", "In Progress"],
-            }
-            df = pd.DataFrame(ticket_data)
-            st.dataframe(df)
-        else:
-            st.warning("Please enter your Customer ID.")
-
-# Remaining page definitions continue...
+        st.success("Displaying ticket information.")
+
+def faq_info_page():
+    st.image("logo.png", width=200)
+    st.title("FAQ & Info")
+    st.write("Find answers to frequently asked questions.")
+
+def respond_to_ticket_page():
+    st.image("logo.png", width=200)
+    st.title("Respond to a Ticket")
+    st.write("View and respond to tickets submitted by customers.")
+
+def employee_ticket_status_page():
+    st.image("logo.png", width=200)
+    st.title("Ticket Status")
+    st.write("View ticket statuses by Customer ID.")
+
+def management_dashboard_page():
+    st.image("logo.png", width=200)
+    st.title("Management Dashboard")
+    st.write("Overview of employees and departments.")
+
+def ticket_dashboard_page():
+    st.image("logo.png", width=200)
+    st.title("Ticket Dashboard")
+    st.write("Overview of ticket statuses and statistics.")
+
+def customer_dashboard_page():
+    st.image("logo.png", width=200)
+    st.title("Customer Dashboard")
+    st.write("Insights into customer interactions.")
+
 if __name__ == "__main__":
     main()