ADD css, config.toml

.streamlit/config.toml

@@ -0,0 +1,7 @@
+[theme]
+base="dark"
+primaryColor="#1abc9c"
+backgroundColor="#2c3e50"
+secondaryBackgroundColor="#34495e"
+textColor="#ffffff"
+font="sans serif"

main.py

@@ -8,6 +8,16 @@ from dotenv import load_dotenv
 # Load environment variables from .env file
 load_dotenv()
 
+# Set Page Name
+st.set_page_config(page_title="Reporting")
+
+
+# Load custom CSS
+def load_css(file_name):
+    with open(file_name) as f:
+        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)
+
+load_css('style.css')
 
 # Function to get filtered data from the database
 def get_filtered_data(customer_id, service_id, start_date, end_date):
@@ -59,7 +69,7 @@ def get_initial_data():
         SELECT c.customer_ID, c.customer, co.companyname
         FROM Kunden.company co
         JOIN Kunden.customers c ON co.customer_ID = c.customer_ID
-        JOIN Kunden.`services.reporting` sr ON sr.customer_ID = co.customer_ID
+        JOIN Kunden.`services.reporting`sr ON sr.customer_ID = co.customer_ID
         GROUP BY c.customer_ID, c.customer, co.companyname;
     """
     customers = pd.read_sql_query(customer_query, mydb)
@@ -68,6 +78,7 @@ def get_initial_data():
     date_query = """
         SELECT MIN(reportingdate) AS min_date, MAX(reportingdate) AS max_date 
         FROM Kunden.`services.reporting`
+        WHERE customer_ID = 5
     """
     date_range = pd.read_sql_query(date_query, mydb)
     mydb.close()
@@ -75,57 +86,82 @@ def get_initial_data():
     return service_ids, customers, date_range
 
 
-# Get initial data for widgets
+# Define page functions
-initial_service_ids, customers, initial_date_range = get_initial_data()
+def home():
+    st.title("Home Page")
+    st.write("Welcome to the Home Page!")
 
 
-# Combine service_ID and name for display
+def services_reporting():
-service_options = initial_service_ids.apply(lambda row: f"{row['service_ID']} - {row['name']}", axis=1)
+    st.title("Reporting :mag_right:")
+    # Get initial data for widgets
+    initial_service_ids, customers, initial_date_range = get_initial_data()
+    # Combine service_ID and name for display
+    service_options = initial_service_ids.apply(lambda row: f"{row['service_ID']} - {row['name']}", axis=1)
 
-# Add selection widget for customer ID
+    # Add selection widget for customer ID
-selected_customer = st.selectbox(
+    selected_customer = st.selectbox(
-    'Select Customer',
+        'Select Customer',
-    customers.apply(lambda row: f"{row['customer_ID']} - {row['companyname']} - {row['customer']}", axis=1).tolist()
+        customers.apply(lambda row: f"{row['customer_ID']} - {row['companyname']} - {row['customer']}", axis=1).tolist()
-)
+    )
 
-# Extract customer_ID from selected option
+    # Extract customer_ID from selected option
-selected_customer_id = int(selected_customer.split(' - ')[0])
+    selected_customer_id = int(selected_customer.split(' - ')[0])
 
-# Add selection widget for service ID
+    # Add selection widget for service ID
-selected_service = st.selectbox(
+    selected_service = st.selectbox(
-    'Select Service',
+        'Select Service',
-    service_options.tolist()
+        service_options.tolist()
-)
+    )
 
-# Extract service_ID from selected option
+    # Extract service_ID from selected option
-selected_service_id = int(selected_service.split(' - ')[0])
+    selected_service_id = int(selected_service.split(' - ')[0])
 
-# Convert date range to datetime objects
+    # Convert date range to datetime objects
-min_date = initial_date_range['min_date'][0]
+    min_date = initial_date_range['min_date'][0]
-max_date = initial_date_range['max_date'][0]
+    max_date = initial_date_range['max_date'][0]
 
-# Add date range selection widget
+    # Add date range selection widget
-selected_date_range = st.date_input(
+    selected_date_range = st.date_input(
-    'Select date range',
+        'Select date range',
-    value=[min_date, max_date],
+        value=[min_date, max_date],
-    min_value=min_date,
+        min_value=min_date,
-    max_value=max_date
+        max_value=max_date
-)
+    )
 
-# Format the selected dates as 'YYYY-MM-DD'
+    # Format the selected dates as 'YYYY-MM-DD'
-start_date_str = selected_date_range[0].strftime("%Y-%m-%d")
+    start_date_str = selected_date_range[0].strftime("%Y-%m-%d")
-end_date_str = selected_date_range[1].strftime("%Y-%m-%d")
+    end_date_str = selected_date_range[1].strftime("%Y-%m-%d")
 
-# Add a button to apply filters
+    # Add a button to apply filters
-if st.button('Apply Filters'):
+    if st.button('Apply Filters'):
-    # Fetch filtered data from the database
+        # Fetch filtered data from the database
-    filtered_data = get_filtered_data(selected_customer_id, selected_service_id, start_date_str, end_date_str)
+        filtered_data = get_filtered_data(selected_customer_id, selected_service_id, start_date_str, end_date_str)
 
-    # Sort the data by month
+        # Sort the data by month
-    filtered_data = filtered_data.sort_values('month')
+        filtered_data = filtered_data.sort_values('month')
 
-    # Create a bar chart with the filtered data
+        # Create a bar chart with the filtered data
-    if not filtered_data.empty:
+        if not filtered_data.empty:
-        st.bar_chart(filtered_data.set_index('month')['count'])
+            st.bar_chart(filtered_data.set_index('month')['count'])
-    else:
+        else:
-        st.write("No data available for the selected filters.")
+            st.write("No data available for the selected filters.")
+
+
+
+
+if 'page' not in st.session_state:
+    st.session_state.page = 'Home'
+
+# Sidebar navigation
+st.sidebar.title("Navigation")
+if st.sidebar.button('Home'):
+    st.session_state.page = 'Home'
+if st.sidebar.button('Services Reporting'):
+    st.session_state.page = 'Services Reporting'
+
+# Page display logic
+if st.session_state.page == 'Home':
+    home()
+elif st.session_state.page == 'Services Reporting':
+    services_reporting()

style.css

@@ -0,0 +1,35 @@
+/* style.css */
+.sidebar .sidebar-content {
+    background-color: #f8f9fa;
+}
+
+.stButton>button {
+    color: white;
+    background-color: #00000000;
+    border-bottom-color: #fcbb2e;
+    border-radius: 5px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+.stButton>button:hover {
+    color: white;
+    background-color: #00000029;
+    border-color: #00000029;
+}
+
+.stButton>button:focus:not(:active) {
+    color: white;
+    background-color: #00000000;
+    border-bottom-color: #fcbb2e;
+    border-color: unset;
+    border-radius: 5px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+
+}
+.st-d7 , .st-d6 ,.st-d5 ,.st-d4 {
+    border-color: #fcbb2e;
+}