Update app.py

app.py

@@ -3,6 +3,7 @@ import pandas as pd
 import time
 import requests
 import os
+from datetime import datetime
 
 # Set page configuration (must be the first Streamlit command)
 st.set_page_config(page_title="Ticket System", layout="centered", initial_sidebar_state="expanded")
@@ -141,26 +142,35 @@ def login_page():
 
 
 
-    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
+    col1, col2, col3 = st.columns(3)  # Create three columns
 
-            st.success(f"Logged in successfully as {users[username]['role']}")
+    with col1:  # First column for the 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
 
-            # Navigate to the appropriate page based on the user's role
-            if users[username]["role"] == "Customer":
-                st.session_state["page"] = "Submit Ticket"
-            elif users[username]["role"] == "Manager":
-                st.session_state["page"] = "Management Dashboard"
-            elif users[username]["role"] == "Employee":
-                st.session_state["page"] = "Respond to a Ticket"
-        else:
-            st.error("Invalid username or password.")
+                st.success(f"Logged in successfully as {users[username]['role']}")
+
+                # Navigate to the appropriate page based on the user's role
+                if users[username]["role"] == "Customer":
+                    st.session_state["page"] = "Submit Ticket"
+                elif users[username]["role"] == "Manager":
+                    st.session_state["page"] = "Management Dashboard"
+                elif users[username]["role"] == "Employee":
+                    st.session_state["page"] = "Respond to a Ticket"
+            else:
+                st.error("Invalid username or password.")
+
+    with col2:  # Second column for the Forget Password button
+        if st.button("Forget Password"):
+            st.session_state["page"] = "Forget Password"
+
+    with col3:  # Third column for the Create Account button
+        if st.button("Create an Account"):
+            st.session_state["page"] = "Create Account"
 
-    if st.button("Forget Password"):
-        st.session_state["page"] = "Forget Password"
 
             
 def navigate_to_page(page_name):
@@ -272,8 +282,10 @@ def main():
     if "page" not in st.session_state:
         st.session_state["page"] = "Login"  # Default to the Login page
     add_return_to_login()
+    if st.session_state["page"] == "Submit Ticket":
+        submit_ticket_page()
     # Show the navigation menu only if not on Login or Forget Password pages
-    if st.session_state["page"] not in ["Login", "Forget Password"]:
+    if st.session_state["page"] not in ["Login", "Forget Password","Create Account"]:
         st.sidebar.title("Navigation")
         user_type = st.session_state.get("user_type", "Customer")
 
@@ -293,6 +305,8 @@ def main():
         login_page()
     elif st.session_state["page"] == "Forget Password":
         forget_password_page()
+    elif st.session_state["page"] == "Create Account":
+        create_account_page()
     elif st.session_state["page"] == "Submit Ticket":
         submit_ticket_page()
     elif st.session_state["page"] == "Check Ticket Status":
@@ -318,11 +332,124 @@ def center_logo():
         st.empty()  # Empty content in the first column
 
     with col2:
-        st.image("logo.png", width=300, use_container_width=True)
+        st.image("/Users/klnimri/Desktop/Newtest/Test/bin/logo.png", width=300, use_container_width=True)
 
     with col3:
         st.empty()
    
+def create_account_page():
+    center_logo()
+    vspace()
+    vspace()
+    vspace()
+    hide_sidebar()
+    st.markdown("<h1 style='text-align: center; color: #084C3C;'>Create Account</h1>", unsafe_allow_html=True)
+    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,
+    )
+    st.markdown(
+        """
+        <style>
+        div[data-testid="stFormSubmitButton"] > button {
+            background-color: #4CAF50 !important; /* Green background */
+            color: white !important; /* White text */
+            border: none !important; /* No border */
+            padding: 10px 20px !important; /* Button padding */
+            text-align: center !important; /* Center the text */
+            text-decoration: none !important; /* No underline */
+            font-size: 16px !important; /* Font size */
+            font-weight: bold !important; /* Bold text */
+            cursor: pointer !important; /* Pointer cursor */
+            border-radius: 4px !important; /* Rounded corners */
+            transition: background-color 0.3s ease !important; /* Smooth hover effect */
+            display: inline-block !important; /* Inline block display */
+            margin-top: 20px !important; /* Space above the button */
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1) !important; /* Optional shadow */
+        }
+        div[data-testid="stFormSubmitButton"] > button:hover {
+            background-color: #45a049 !important; /* Slightly lighter green on hover */
+            color: white !important; /* White text on hover */
+        }
+        </style>
+        """,
+        unsafe_allow_html=True,
+    )
+        
+    with st.form(key="create_account_form"):
+        id_number = st.text_input("ID Number / Iqama Number")
+        first_name = st.text_input("First Name")
+        second_name = st.text_input("Second Name")
+        last_name = st.text_input("Last Name")
+        countries = [
+            "Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", 
+            "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", 
+            "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burundi", 
+            "Cabo Verde", "Cambodia", "Cameroon", "Canada", "Central African Republic", "Chad", "Chile", "China", "Colombia", 
+            "Comoros", "Congo (Congo-Brazzaville)", "Costa Rica", "Croatia", "Cuba", "Cyprus", "Czechia (Czech Republic)", 
+            "Denmark", "Djibouti", "Dominica", "Dominican Republic", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", 
+            "Eritrea", "Estonia", "Eswatini", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", 
+            "Georgia", "Germany", "Ghana", "Greece", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", 
+            "Holy See", "Honduras", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", 
+            "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea (North)", "Korea (South)", "Kosovo", 
+            "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", 
+            "Luxembourg", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", 
+            "Mauritius", "Mexico", "Micronesia", "Moldova", "Monaco", "Mongolia", "Montenegro", "Morocco", "Mozambique", "Myanmar", 
+            "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "North Macedonia", 
+            "Norway", "Oman", "Pakistan", "Palau", "Palestine State", "Panama", "Papua New Guinea", "Paraguay", "Peru", 
+            "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Saint Kitts and Nevis", "Saint Lucia", 
+            "Saint Vincent and the Grenadines", "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", "Senegal", 
+            "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", 
+            "South Africa", "South Sudan", "Spain", "Sri Lanka", "Sudan", "Suriname", "Sweden", "Switzerland", "Syria", 
+            "Tajikistan", "Tanzania", "Thailand", "Timor-Leste", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", 
+            "Turkmenistan", "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", 
+            "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"
+        ]
+        nationality = st.selectbox("Nationality", countries)
+        email = st.text_input("E-mail")
+        phone_number = st.text_input("Phone Number")
+        dob = st.date_input("Date of Birth", min_value=datetime(1900, 1, 1), max_value=datetime.now())
+        Short_Address = st.text_input(
+            "Short Address Code (4 letters + 4 digits)",
+            max_chars=8,
+            help="Enter exactly 4 letters followed by 4 digits (e.g., ABCD1234)",
+        )
+
+        submitted = st.form_submit_button("Create Account")
+
+        if submitted:
+            if len(Short_Address) == 8 and Short_Address[:4].isalpha() and Short_Address[4:].isdigit():
+                st.success("Account created successfully!")
+            else:
+                st.error("Invalid Short Address Code. It must be 4 letters followed by 4 digits (e.g., ABCD1234).")
+
+    if st.button("Back to Login"):
+        st.session_state["page"] = "Login"
+
+
 def submit_ticket_page():
     center_logo()
     vspace()
@@ -626,8 +753,8 @@ def customer_dashboard_page():
     st.dataframe(df)
     st.components.v1.iframe(
         "https://app.powerbi.com/view?r=eyJrIjoiY2Q0ODE1NGItOThjMy00MzM4LWE2OGUtMjRkNmUzYmZlMDk3IiwidCI6ImI0NTNkOTFiLTZhYzEtNGI2MS1iOGI4LTVlNjVlNDIyMjMzZiIsImMiOjl9",
-        height=700,
-        width=1000,
+        height=600,
+        width=800,
         scrolling=True
     )
 
@@ -640,26 +767,7 @@ def management_dashboard_page():
     #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=700,
-        width=1000,
-        scrolling=True
-    )
-
-        # Define employee data
+    # Define employee data
     employee_data = {
         "Employee ID": ["E001", "E002", "E003"],
         "Name": ["John Doe", "Jane Smith", "Ali Ahmad"],
@@ -670,6 +778,14 @@ def management_dashboard_page():
     # 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():