feat: updated location of files

app.py

@@ -14,6 +14,47 @@ from utils import recomienda_tfid
 # Page configuration
 st.set_page_config(page_title="DeepInsightz", page_icon=":bar_chart:", layout="wide")
 
+# Custom CSS for styling similar to the inspiration
+st.markdown("""
+<style>
+[data-testid="block-container"] {
+    padding-left: 2rem;
+    padding-right: 2rem;
+    padding-top: 1rem;
+    padding-bottom: 0rem;
+    margin-bottom: -7rem;
+}
+[data-testid="stVerticalBlock"] {
+    padding-left: 0rem;
+    padding-right: 0rem;
+}
+[data-testid="stMetric"] {
+    background-color: #393939;
+    text-align: center;
+    padding: 15px 0;
+}
+[data-testid="stMetricLabel"] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+[data-testid="stMetricDeltaIcon-Up"] {
+    position: relative;
+    left: 38%;
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+}
+[data-testid="stMetricDeltaIcon-Down"] {
+    position: relative;
+    left: 38%;
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+}
+</style>
+""", unsafe_allow_html=True)
+
 # Load CSV files at the top
 df = pd.read_csv("df_clean.csv")
 nombres_proveedores = pd.read_csv("nombres_proveedores.csv", sep=';')
@@ -94,53 +135,12 @@ def radar_chart(categories, values, amounts, title):
     
     return fig
 
-# Custom CSS for dark theme and styling
-st.markdown("""
-    <style>
-    body {
-        background-color: #121212;
-        color: white;
-    }
-    .stMetric {
-        background-color: #2E2E2E;
-        border-radius: 10px;
-        padding: 10px;
-    }
-    .stMetric > div {
-        color: white;
-    }
-    .stMetric > div > div {
-        color: white !important;
-    }
-    .custom-title {
-        color: white;
-        font-size: 36px;
-        margin-bottom: 20px;
-    }
-    .custom-metric-box {
-        background-color: #2E2E2E;
-        border-radius: 10px;
-        padding: 20px;
-        margin-bottom: 10px;
-        text-align: center;
-        color: white;
-    }
-    .up-arrow {
-        color: #00FF00;  /* Green */
-    }
-    .down-arrow {
-        color: #FF0000;  /* Red */
-    }
-    .container {
-        display: flex;
-        justify-content: space-between;
-    }
-    </style>
-""", unsafe_allow_html=True)
-
 # Navigation menu
-st.sidebar.title("DeepInsightz")
-page = st.sidebar.selectbox("Select the tool you want to use", ["Summary", "Customer Analysis", "Articles Recommendations"])
+with st.sidebar:
+    st.sidebar.title("DeepInsightz")
+    page = st.sidebar.selectbox("Select the tool you want to use", ["Summary", "Customer Analysis", "Articles Recommendations"])
+
+
 
 if page == "Summary":
     st.title("Welcome to DeepInsightz")
@@ -149,30 +149,29 @@ if page == "Summary":
         We analyzed thousands of customers and suppliers to help businesses make smarter sales decisions.
     """)
 
-    # Create layout with three columns: left (col1), middle (col2), and right (col3)
-    col1, col2, col3 = st.columns([1, 2, 1])
+    # Create layout with three columns
+    col1, col2, col3 = st.columns((1.5, 4.5, 2), gap='medium')
 
     # Left Column (Red): Metrics and Donut Charts
     with col1:
-        st.markdown('<div class="custom-box">', unsafe_allow_html=True)
-        st.markdown("**Texas**<br><span style='font-size:28px;'>29.0 M</span><br><span style='color:#00FF00;'>+367 K</span>", unsafe_allow_html=True)
-        st.markdown('</div>', unsafe_allow_html=True)
+        st.markdown('#### Key Metrics')
+        st.metric(label="Texas", value="29.0 M", delta="+367 K", delta_color="normal")
+        st.metric(label="New York", value="19.5 M", delta="-77 K", delta_color="inverse")
         
-        st.markdown('<div class="custom-box">', unsafe_allow_html=True)
-        st.markdown("**New York**<br><span style='font-size:28px;'>19.5 M</span><br><span style='color:#FF0000;'>-77 K</span>", unsafe_allow_html=True)
-        st.markdown('</div>', unsafe_allow_html=True)
-
-        st.markdown('<div class="custom-box">States Migration</div>', unsafe_allow_html=True)
-
-        # Donut chart placeholder
+        st.markdown('#### States Migration')
+        
+        # Create a placeholder for your own donut charts with Plotly
         donut_fig = px.pie(values=[70, 30], names=['Inbound', 'Outbound'], hole=0.7)
         donut_fig.update_traces(textinfo='percent+label')
         donut_fig.update_layout(showlegend=False, margin=dict(t=0, b=0, l=0, r=0))
         st.plotly_chart(donut_fig, use_container_width=True)
 
+
     # Middle Column (White): 3D Cluster Model and Bar Chart
     with col2:
-        st.subheader("3D Customer Clusters")
+        st.markdown('#### 3D Customer Clusters')
+        
+        # Replace with your own customer cluster visualization
         np.random.seed(42)
         df_cluster = pd.DataFrame({
             'Cluster': np.random.choice(['Cluster 1', 'Cluster 2', 'Cluster 3', 'Cluster 4'], 100),
@@ -182,24 +181,26 @@ if page == "Summary":
         })
         fig_cluster = px.scatter_3d(df_cluster, x='x', y='y', z='z', color='Cluster')
         st.plotly_chart(fig_cluster, use_container_width=True)
-
-        st.subheader("Sales by Cluster")
+        
+        st.markdown('#### Sales by Cluster')
+        
+        # Replace with your own sales data
         sales_data = {'Cluster': ['Cluster 1', 'Cluster 2', 'Cluster 3', 'Cluster 4'],
-                      'Sales': [400000, 600000, 500000, 300000]}
+                    'Sales': [400000, 600000, 500000, 300000]}
         df_sales = pd.DataFrame(sales_data)
         fig_sales = px.bar(df_sales, x='Cluster', y='Sales', title="Sales by Cluster")
         st.plotly_chart(fig_sales, use_container_width=True)
 
     # Right Column (Blue): Key Metrics Overview and Data Preparation Summary
     with col3:
-        st.subheader("Key Metrics Overview")
+        st.markdown('#### Key Metrics Overview')
         st.write("""
             - **Customers Analyzed**: 4,000
             - **Suppliers Analyzed**: 400
             - **Invoice Lines Processed**: 800,000
         """)
 
-        st.subheader("Data Preparation Summary")
+        st.markdown('#### Data Preparation Summary')
         st.write("""
             - Cleaned and standardized product codes and descriptions.
             - Excluded customers with fewer than 12 purchases or sales below €1,200.