Update app.py

app.py

@@ -1,9 +1,102 @@
 import streamlit as st
 import pandas as pd
-#from streamlit_lottie import st_lottie
 import time
 import requests
 
+# Apply custom CSS for design
+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;
+    }
+    </style>
+    """,
+    unsafe_allow_html=True
+)
+
 # Sample user data for login
 users = {
     "manager123": {"password": "managerpass", "role": "Manager"},
@@ -18,17 +111,11 @@ def load_lottie_url(url: str):
         return None
     return r.json()
 
-# URL for your animation (replace with your Hugging Face-hosted animation URL)
+# URL for the animation (optional)
 lottie_url = "https://assets6.lottiefiles.com/packages/lf20_5hhtik.json"
-
-# Load the animation
 lottie_json = load_lottie_url(lottie_url)
 
-# Display the Lottie animation in the Streamlit app
-if lottie_json:
-    st_lottie(lottie_json, speed=1, width=600, height=400, key="animation")
-
-# Function to display the Lottie animation interactively
+# Function to display the Lottie animation
 def show_loading_animation():
     if lottie_json:
         st_lottie(lottie_json, height=300, key="loading")
@@ -61,6 +148,8 @@ def add_return_to_login():
             st.session_state.clear()  # Clear the session state to log out
             st.rerun()  # Rerun the app to show the login page again
 
+# Add your existing main() and other pages here...
+# Main app logic continues...
 def main():
     if "logged_in" not in st.session_state or not st.session_state["logged_in"]:
         login_page()
@@ -98,179 +187,7 @@ def main():
         show_loading_animation()
         time.sleep(0.5)  # Simulate a short loading delay
 
-    # Page navigation logic
-    if page == "Submit Ticket":
-        submit_ticket_page()
-    elif page == "Check Ticket Status":
-        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()
-
-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)
-
-    with st.form(key="submit_ticket_form"):
-        customer_id = st.text_input("Customer ID")
-        st.text_input("First Name")
-        st.text_input("Last Name")
-        st.text_input("National ID / Residency Number")
-        st.text_input("Email")
-        st.text_input("Phone Number")
-        st.selectbox("Ticket Type", ["General", "Billing", "Technical", "Feedback"])
-        st.text_area("Describe your issue/request")
-        st.file_uploader("Upload Attachments (if any)", accept_multiple_files=True)
-        submitted = st.form_submit_button("Submit")
-        if submitted:
-            st.success(f"Your ticket has been submitted successfully. Customer ID: {customer_id}")
-
-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")
-    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.")
-
-def faq_info_page():
-    st.image("logo.png", width=200)
-    st.markdown('<h1 style="color: #084C3C;">FAQ & Information</h1>', unsafe_allow_html=True)
-    st.markdown('<p style="color: #084C3C;">Find answers to frequently asked questions and other information.</p>', unsafe_allow_html=True)
-
-    faq_data = [
-        ("How to open a new account?", "Visit your nearest branch with your ID or use our app for easy online account opening."),
-        ("Branch Operating Hours", "Sunday to Thursday, 9:00 AM to 4:00 PM."),
-        ("Update Personal Information", "Update at a branch or through the app."),
-        ("Technical Support", "Ensure your app is updated and connected to the internet.")
-    ]
-    for question, answer in faq_data:
-        st.markdown(f'<h2 style="color: #084C3C;">{question}</h2>', unsafe_allow_html=True)
-        st.markdown(f'<p style="color: #084C3C;">{answer}</p>', unsafe_allow_html=True)
-
-def respond_to_ticket_page():
-    st.image("logo.png", width=200)
-    st.markdown('<h1 style="color: #084C3C;">Respond to a Ticket</h1>', unsafe_allow_html=True)
-    st.markdown('<p style="color: #084C3C;">View and respond to tickets submitted by customers.</p>', unsafe_allow_html=True)
-
-    ticket_data = {
-        "Ticket Number": ["141", "565", "999"],
-        "Customer ID": ["C001", "C002", "C003"],
-        "Date": ["2025-01-18", "2025-03-28", "2025-04-01"],
-        "Type": ["General", "Billing", "Technical"],
-        "Status": ["Pending", "Pending", "In Progress"],
-        "Customer Name": ["Alice", "Bob", "Charlie"],
-    }
-    df = pd.DataFrame(ticket_data)
-
-    st.markdown('<h2 style="color: #084C3C;">Tickets to Respond</h2>', unsafe_allow_html=True)
-    st.dataframe(df)
-
-    ticket_to_respond = st.selectbox("Select a ticket to respond to:", df["Ticket Number"].tolist())
-    if st.button("Respond to Ticket"):
-        st.text_area("Response:", placeholder="Write your response here...")
-        st.button("Submit Response")
-
-def employee_ticket_status_page():
-    st.image("logo.png", width=200)
-    st.markdown('<h1 style="color: #084C3C;">Ticket Status</h1>', unsafe_allow_html=True)
-    st.markdown('<p style="color: #084C3C;">View ticket statuses by Customer ID.</p>', unsafe_allow_html=True)
-
-    customer_id = st.text_input("Customer ID")
-    if st.button("Check Ticket Status"):
-        if customer_id:
-            st.success(f"Displaying tickets for Customer ID: {customer_id}")
-            ticket_data = {
-                "Ticket Number": ["141", "565", "999"],
-                "Customer ID": ["C001", "C002", "C003"],
-                "Date": ["2025-01-18", "2025-03-28", "2025-04-01"],
-                "Type": ["General", "Billing", "Technical"],
-                "Status": ["Resolved", "Pending", "In Progress"],
-            }
-            df = pd.DataFrame(ticket_data)
-            filtered_df = df[df["Customer ID"] == customer_id]
-            if not filtered_df.empty:
-                st.dataframe(filtered_df)
-            else:
-                st.warning("No tickets found for this Customer ID.")
-        else:
-            st.warning("Please enter a Customer ID.")
-
-def ticket_dashboard_page():
-    st.image("logo.png", width=200)
-    st.markdown('<h1 style="color: #084C3C;">Ticket Dashboard</h1>', unsafe_allow_html=True)
-    st.markdown('<p style="color: #084C3C;">Overview of ticket statuses and statistics.</p>', unsafe_allow_html=True)
-
-    st.components.v1.iframe(
-        "https://app.powerbi.com/view?r=eyJrIjoiMDEwNzA2YjUtNGY0MC00NTFjLTg1ZTctYTZlZjQzOTUwNWUxIiwidCI6ImI0NTNkOTFiLTZhYzEtNGI2MS1iOGI4LTVlNjVlNDIyMjMzZiIsImMiOjl9",
-        height=800,
-        width=1000,
-        scrolling=True
-    )
-
-def customer_dashboard_page():
-    st.image("logo.png", width=200)
-    st.markdown('<h1 style="color: #084C3C;">Customer Dashboard</h1>', unsafe_allow_html=True)
-    st.markdown('<p style="color: #084C3C;">Insights and data on customer interactions.</p>', unsafe_allow_html=True)
-
-    customer_data = {
-        "Customer ID": ["C001", "C002", "C003"],
-        "Name": ["Alice", "Bob", "Charlie"],
-        "Tickets Submitted": [5, 3, 8],
-        "Resolved": [4, 2, 7],
-    }
-    df = pd.DataFrame(customer_data)
-
-    st.markdown('<h2 style="color: #084C3C;">Customer Statistics</h2>', unsafe_allow_html=True)
-    st.dataframe(df)
-
-def management_dashboard_page():
-    st.image("logo.png", width=200)
-    st.markdown('<h1 style="color: #084C3C;">Management Dashboard</h1>', unsafe_allow_html=True)
-    st.markdown('<p style="color: #084C3C;">Employee and department overviews.</p>', unsafe_allow_html=True)
-
-    employee_data = {
-        "Employee ID": ["E001", "E002", "E003"],
-        "Name": ["John Doe", "Jane Smith", "Ali Ahmad"],
-        "Department": ["Support", "Billing", "Technical"],
-        "Performance Score": [85, 90, 88],
-    }
-    df_employee = pd.DataFrame(employee_data)
-
-    department_data = {
-        "Department": ["Support", "Billing", "Technical"],
-        "Total Employees": [10, 8, 12],
-        "Tickets Handled": [100, 80, 120],
-    }
-    df_department = pd.DataFrame(department_data)
-
-    st.markdown('<h2 style="color: #084C3C;">Employee Dashboard</h2>', unsafe_allow_html=True)
-    st.dataframe(df_employee)
-
-    st.markdown('<h2 style="color: #084C3C;">Department Dashboard</h2>', unsafe_allow_html=True)
-    st.dataframe(df_department)
+    # Add page-specific logic here...
 
-if _name_ == "_main_":
-    main()
+if __name__ == "__main__":
+    main()