Update app.py

app.py

@@ -69,6 +69,40 @@ catalog = load_catalog()
 st.title("Enterprise Software Product Catalog")
 st.write("This is the source of truth for app approval statuses within the enterprise.")
 
+# Custom CSS for styling product details
+st.markdown("""
+<style>
+.detail-box {
+    border-radius: 10px;
+    padding: 10px;
+    margin: 5px 0;
+    background-color: #f0f2f6;
+}
+.detail-header {
+    color: #4f8bf9;
+    font-weight: bold;
+}
+.detail-text {
+    color: #333;
+}
+</style>
+""", unsafe_allow_html=True)
+
+# Display product names as clickable items
+for index, row in catalog.iterrows():
+    if st.button(row['Product Name'], key=str(index)):
+        with st.expander("Product Details", expanded=True):
+            st.markdown(f"<div class='detail-box'>"
+                        f"<p class='detail-header'>Product Name:</p> <p class='detail-text'>{row['Product Name']}</p>"
+                        f"<p class='detail-header'>Category:</p> <p class='detail-text'>{row['Category']}</p>"
+                        f"<p class='detail-header'>Cyber Approved:</p> <p class='detail-text'>{'Yes' if row['Cyber Approved'] else 'No'}</p>"
+                        f"<p class='detail-header'>Accessibility Approved:</p> <p class='detail-text'>{'Yes' if row['Accessibility Approved'] else 'No'}</p>"
+                        f"<p class='detail-header'>Privacy Approved:</p> <p class='detail-text'>{'Yes' if row['Privacy Approved'] else 'No'}</p>"
+                        f"<p class='detail-header'>Review Date:</p> <p class='detail-text'>{row['Review Date']}</p>"
+                        "</div>", unsafe_allow_html=True)
+
+# Note: Streamlit's layout is linear and stateless; this approach recreates the UI on each interaction.
+
 # Sidebar for Advanced Search and Filtering
 with st.sidebar.expander("Advanced Search Options"):
     search_query = st.text_input("Search by Any Attribute", key='search_query')