app.py

import streamlit as st
import pandas as pd
import time
import requests

# 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>
    /* Hide the header */
    header[data-testid="stHeader"] {
        display: none;
    }

    /* Adjust the main content area to fill the space */
    .stApp {
        margin-top: -50px;
    }

    .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 */
        color: white !important; /* White text */
        border-radius: 10px !important; /* Rounded corners */
        padding: 10px 20px !important; /* Button padding */
        border: none !important; /* Remove border */
    }
    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 */
    }
    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; }

    /* Dark green text for specific labels */
    label[for="Customer ID"], label[for="First Name"], label[for="Last Name"], 
    label[for="National ID / Residency Number"], label[for="Email"], 
    label[for="Phone Number"], label[for="Ticket Type"], 
    label[for="Describe your issue/request"], 
    div[data-testid="stMarkdownContainer"] h2, 
    div[data-testid="stMarkdownContainer"] p {
        color: #084C3C !important;
    }

    /* Submit button custom styling */
    div[data-testid="stFormSubmitButton"] button {
        background-color: #084C3C !important; /* Dark green background */
        color: white !important; /* White text */
        border: none !important; /* Remove border */
        border-radius: 5px !important; /* Rounded corners */
        padding: 10px 20px !important; /* Button padding */
    }

    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 */
    }
    </style>
    """,
    unsafe_allow_html=True
)

# Sample user data for login
users = {
    "manager123": {"password": "managerpass", "role": "Manager"},
    "employee456": {"password": "employeepass", "role": "Employee"},
    "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
    st.title("Login Page")  # The title will be styled in dark green

    # Check login state
    if "login_success" not in st.session_state:
        st.session_state["login_success"] = False

    # 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.")

def add_return_to_login():
    if "logged_in" in st.session_state and st.session_state["logged_in"]:
        if st.sidebar.button("Back"):
            st.session_state.clear()
            st.rerun()

def main():
    if "logged_in" not in st.session_state or not st.session_state["logged_in"]:
        login_page()
        return

    add_return_to_login()
    
    user_type = st.session_state.get("user_type", "Customer")
    st.sidebar.title("Navigation")

    if user_type == "Customer":
        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"])
    elif user_type == "Employee":
        page = st.sidebar.radio("Go to", ["Respond to a Ticket", "Ticket Status"])
    else:
        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()
    elif page == "Check Ticket Status":
        check_ticket_status_page()
    elif page == "FAQ & Info":
        faq_info_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)
    #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)

    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"])
        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}")

def check_ticket_status_page():
    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)

    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)
    #center_logo("logo.png")  # Center the logo
    st.markdown('<h1 style="color: #084C3C;">FAQ & Information</h1>', 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. Please check your nearest branch for details."),
        ("Update Personal Information", "You can update your information at a branch or through our app under 'Update Data'."),
        ("Technical Support", "Ensure your app is updated and your device is connected to the internet. If issues persist, contact our support.")
    ]

    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)
    #center_logo("logo.png")  # Center the logo
    st.markdown('<h1 style="color: #084C3C;">Respond to a Ticket</h1>', 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.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)
    #center_logo("logo.png")  # Center the logo
    st.markdown('<h1 style="color: #084C3C;">Ticket Status</h1>', unsafe_allow_html=True)
    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"],
        }
        df = pd.DataFrame(ticket_data)
        st.dataframe(df)

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,
        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"],
        "Tickets Submitted": [5, 3, 8],
        "Resolved": [4, 2, 7],
    }
    df = pd.DataFrame(customer_data)
    st.dataframe(df)
    st.components.v1.iframe(
        "https://app.powerbi.com/view?r=eyJrIjoiY2Q0ODE1NGItOThjMy00MzM4LWE2OGUtMjRkNmUzYmZlMDk3IiwidCI6ImI0NTNkOTFiLTZhYzEtNGI2MS1iOGI4LTVlNjVlNDIyMjMzZiIsImMiOjl9",
        height=800,
        width=1000,
        scrolling=True
    )

def management_dashboard_page():
    st.image("logo.png", width=200)
    #center_logo("logo.png")  # Center the logo
    st.markdown('<h1 style="color: #084C3C;">Management Dashboard</h1>', unsafe_allow_html=True)
    
    # Define employee data
    employee_data = {
        "Employee ID": ["E001", "E002", "E003"],
        "Name": ["John Doe", "Jane Smith", "Ali Ahmad"],
        "Performance Score": [85, 90, 88],
    }
    df_employee = pd.DataFrame(employee_data)
    
    # Display the employee data table
    st.dataframe(df_employee)

    # Add the Power BI dashboard iframe
    st.components.v1.iframe(
        "https://app.powerbi.com/view?r=eyJrIjoiMzQ5N2RlMDQtY2I5ZC00NWE5LWE0ZjItMjExMzgyNmNmZWFjIiwidCI6ImI0NTNkOTFiLTZhYzEtNGI2MS1iOGI4LTVlNjVlNDIyMjMzZiIsImMiOjl9",
        height=800,
        width=1000,
        scrolling=True
    )

def customize_navigation_menu_dark_green():
    st.markdown(
        """
        <style>
        /* Customize the navigation menu (sidebar) */
        section[data-testid="stSidebar"] {
            background-color: #084C3C !important; /* Set background to dark green */
        }
        section[data-testid="stSidebar"] p, 
        section[data-testid="stSidebar"] label, 
        section[data-testid="stSidebar"] h1, 
        section[data-testid="stSidebar"] h2, 
        section[data-testid="stSidebar"] h3, 
        section[data-testid="stSidebar"] div {
            color: white !important; /* Set text to white */
        }
        </style>
        """,
        unsafe_allow_html=True
    )

def customize_login_page_with_image(image_path):
    # 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=200, use_container_width=False)  # Adjust width as needed

    # Add custom styling for the Login Page title
    st.markdown(
        """
        <style>
        h1 {
            color: #084C3C !important; /* Dark green for Login Page title */
            text-align: center; /* Center align the title */
        }
        </style>
        """,
        unsafe_allow_html=True
    )

def customize_submit_button():
    st.markdown(
        """
        <style>
        /* General styling for submit buttons */
        button[class^="css-"] {
            background-color: #084C3C !important; /* Dark green background */
            color: white !important; /* White text */
            border-radius: 10px !important; /* Rounded corners */
            padding: 10px 20px !important; /* Padding for the button */
            font-size: 16px !important; /* Ensure text size is visible */
            border: none !important; /* Remove border */
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
        }
        button[class^="css-"]:hover {
            background-color: #056C4C !important; /* Slightly lighter green on hover */
            color: white !important; /* Keep text white on hover */
        }
        </style>
        """,
        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()