Update app.py

app.py

@@ -89,77 +89,117 @@ def load_css():
         box-shadow: 0 1px 3px rgba(0,0,0,0.1);
         margin-bottom: 1rem;
     }}
+    
+    /* Updated Quality Check Styles */
+    .quality-grid {{
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 16px;
+        margin-top: 20px;
+    }}
     .quality-card {{
         background: white;
         border: 1px solid {DESIGN_SYSTEM['colors']['border']};
-        border-radius: 8px;
-        padding: 20px;
-        min-height: 120px;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-        transition: transform 0.2s ease;
+        border-radius: 12px;
+        padding: 24px;
+        min-height: 140px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+        border-left: 4px solid transparent;
+        transition: all 0.3s ease;
+        position: relative;
     }}
     .quality-card:hover {{
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
     }}
     .card-warning {{
-        border-left: 4px solid {DESIGN_SYSTEM['colors']['warning']};
+        border-left-color: {DESIGN_SYSTEM['colors']['warning']};
     }}
     .card-success {{
-        border-left: 4px solid {DESIGN_SYSTEM['colors']['success']};
-    }}
-    .card-header {{
-        margin-bottom: 12px;
+        border-left-color: {DESIGN_SYSTEM['colors']['success']};
     }}
-    .material-name {{
-        font-size: 14px;
+    .card-title {{
+        font-size: 16px;
         font-weight: 600;
         color: {DESIGN_SYSTEM['colors']['text']};
+        margin-bottom: 12px;
     }}
     .status-badge {{
         display: inline-block;
-        padding: 4px 12px;
-        border-radius: 12px;
+        padding: 6px 12px;
+        border-radius: 16px;
         font-size: 12px;
-        font-weight: 500;
-        margin-bottom: 8px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 12px;
     }}
-    .warning-badge {{
-        background: {DESIGN_SYSTEM['colors']['warning']}20;
+    .status-warning {{
+        background: rgba(217, 119, 6, 0.15);
         color: {DESIGN_SYSTEM['colors']['warning']};
     }}
-    .success-badge {{
-        background: {DESIGN_SYSTEM['colors']['success']}20;
+    .status-success {{
+        background: rgba(16, 185, 129, 0.15);
         color: {DESIGN_SYSTEM['colors']['success']};
     }}
-    .range-text {{
-        font-size: 12px;
+    .outliers-info {{
+        display: flex;
+        align-items: baseline;
+        margin-bottom: 12px;
+    }}
+    .outliers-count {{
+        font-size: 24px;
+        font-weight: 700;
+        margin-right: 8px;
+    }}
+    .outliers-count.warning {{
+        color: {DESIGN_SYSTEM['colors']['warning']};
+    }}
+    .outliers-count.success {{
+        color: {DESIGN_SYSTEM['colors']['success']};
+    }}
+    .outliers-text {{
         color: #6B7280;
-        margin-bottom: 8px;
+        font-size: 14px;
+    }}
+    .range-info {{
+        background: #F8F9FA;
+        padding: 12px;
+        border-radius: 8px;
+        margin-bottom: 12px;
+        font-size: 13px;
+        color: #495057;
+    }}
+    .range-label {{
+        font-weight: 600;
+        color: {DESIGN_SYSTEM['colors']['text']};
+        margin-bottom: 4px;
     }}
     .dates-section {{
+        font-size: 12px;
+        color: #6B7280;
+    }}
+    .dates-label {{
         font-size: 11px;
         color: #9CA3AF;
-        line-height: 1.4;
-    }}
-    .dates-title {{
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 8px;
         font-weight: 600;
-        margin-bottom: 4px;
+    }}
+    .dates-list {{
+        line-height: 1.6;
     }}
     .success-center {{
         text-align: center;
-        margin-top: 20px;
-    }}
-    .cards-grid {{
-        display: flex;
-        flex-wrap: wrap;
-        gap: 16px;
-        margin-top: 20px;
+        margin-top: 16px;
     }}
-    .quality-card-container {{
-        flex: 1;
-        min-width: 200px;
+    .success-message {{
+        font-size: 14px;
+        color: {DESIGN_SYSTEM['colors']['success']};
+        font-weight: 500;
     }}
+    
     .stButton > button {{
         background: {DESIGN_SYSTEM['colors']['primary']};
         color: white;
@@ -457,17 +497,17 @@ def render_ai_section(df, stats, model):
     """Showcase our AI capabilities and technical achievements"""
     
     if model:
-        st.markdown('<div class="section-header">🚀 Our AI-Powered Solution</div>', unsafe_allow_html=True)
+        st.markdown('<div class="section-header">AI-Powered Solution</div>', unsafe_allow_html=True)
         
         # Demonstrate our capabilities
-        st.markdown("### 🎯 **Nilsen Service & Consulting - Technical Achievements**")
+        st.markdown("### **Nilsen Service & Consulting - Technical Achievements**")
         outliers = detect_outliers(df)
         with st.spinner("Demonstrating our AI capabilities..."):
             ai_summary = generate_ai_summary(model, df, stats, outliers)
             st.success(ai_summary)
         
         # Show our system's intelligence
-        st.markdown("### 🧠 **Experience Our Advanced Analytics**")
+        st.markdown("### **Experience Our Advanced Analytics**")
         st.markdown("*See how our AI system provides professional insights for your operations:*")
         
         demo_questions = [
@@ -479,13 +519,13 @@ def render_ai_section(df, stats, model):
         cols = st.columns(len(demo_questions))
         for i, question in enumerate(demo_questions):
             with cols[i]:
-                if st.button(f"▶️ {question}", key=f"demo_q_{i}"):
+                if st.button(f"{question}", key=f"demo_q_{i}"):
                     with st.spinner("Our AI analyzing..."):
                         answer = query_ai(model, stats, question, df)
                         st.info(f"**Nilsen AI Response:** {answer}")
         
         # Interactive demonstration
-        st.markdown("### 💼 **Test Our AI Intelligence**")
+        st.markdown("### **Test Our AI Intelligence**")
         col1, col2 = st.columns([3, 1])
         
         with col1:
@@ -493,8 +533,8 @@ def render_ai_section(df, stats, model):
                                             placeholder="e.g., 'How can your system improve our operational efficiency?'",
                                             key="demo_question")
         with col2:
-            st.markdown("<br>", unsafe_allow_html=True)  # Add spacing
-            if st.button("🚀 **See Our AI in Action**", key="demo_btn", type="primary"):
+            st.markdown("<br>", unsafe_allow_html=True)
+            if st.button("See Our AI in Action", key="demo_btn", type="primary"):
                 if custom_question:
                     with st.spinner("Nilsen AI processing..."):
                         answer = query_ai(model, stats, custom_question, df)
@@ -507,21 +547,20 @@ def render_ai_section(df, stats, model):
         st.markdown("---")
         st.markdown("""
         <div style="background: linear-gradient(135deg, #1E40AF15, #05966925); padding: 1rem; border-radius: 8px; border: 1px solid #1E40AF;">
-        <h4>🏆 Why Choose Nilsen Service & Consulting?</h4>
+        <h4>Why Choose Nilsen Service & Consulting?</h4>
         <ul>
-        <li>✅ <strong>Advanced AI Integration:</strong> Cutting-edge analytics for your operations</li>
-        <li>✅ <strong>Professional Reliability:</strong> Enterprise-grade monitoring systems</li>
-        <li>✅ <strong>Proven Results:</strong> Data-driven insights that deliver ROI</li>
-        <li>✅ <strong>Complete Solution:</strong> From data processing to actionable recommendations</li>
+        <li><strong>Advanced AI Integration:</strong> Cutting-edge analytics for your operations</li>
+        <li><strong>Professional Reliability:</strong> Enterprise-grade monitoring systems</li>
+        <li><strong>Proven Results:</strong> Data-driven insights that deliver ROI</li>
+        <li><strong>Complete Solution:</strong> From data processing to actionable recommendations</li>
         </ul>
         </div>
         """, unsafe_allow_html=True)
         
     else:
-        st.markdown('<div class="section-header">🚀 Our AI-Powered Solution</div>', unsafe_allow_html=True)
-        st.error("⚠️ AI demonstration requires API configuration")
-        st.info("💡 **Our AI system provides:** Advanced analytics, predictive insights, automated reporting, and intelligent recommendations for production optimization.")
-
+        st.markdown('<div class="section-header">AI-Powered Solution</div>', unsafe_allow_html=True)
+        st.error("AI demonstration requires API configuration")
+        st.info("**Our AI system provides:** Advanced analytics, predictive insights, automated reporting, and intelligent recommendations for production optimization.")
 
 def query_ai(model, stats, question, df=None):
     if not model:
@@ -805,7 +844,7 @@ def create_csv_export(df, stats):
     return summary_df
 
 def add_export_section(df, stats, outliers, model):
-    st.markdown('<div class="section-header">📄 Export Reports</div>', unsafe_allow_html=True)
+    st.markdown('<div class="section-header">Export Reports</div>', unsafe_allow_html=True)
     if 'export_ready' not in st.session_state:
         st.session_state.export_ready = False
     if 'pdf_buffer' not in st.session_state:
@@ -819,13 +858,13 @@ def add_export_section(df, stats, outliers, model):
                 with st.spinner("Generating PDF with AI analysis..."):
                     st.session_state.pdf_buffer = create_enhanced_pdf_report(df, stats, outliers, model)
                     st.session_state.export_ready = True
-                st.success("✅ PDF report with AI analysis generated successfully!")
+                st.success("PDF report with AI analysis generated successfully!")
             except Exception as e:
-                st.error(f"❌ PDF generation failed: {str(e)}")
+                st.error(f"PDF generation failed: {str(e)}")
                 st.session_state.export_ready = False
         if st.session_state.export_ready and st.session_state.pdf_buffer:
             st.download_button(
-                label="💾 Download PDF Report",
+                label="Download PDF Report",
                 data=st.session_state.pdf_buffer,
                 file_name=f"production_report_ai_{datetime.now().strftime('%Y%m%d_%H%M')}.pdf",
                 mime="application/pdf",
@@ -835,13 +874,13 @@ def add_export_section(df, stats, outliers, model):
         if st.button("Generate CSV Summary", key="generate_csv_btn", type="primary"):
             try:
                 st.session_state.csv_data = create_csv_export(df, stats)
-                st.success("✅ CSV summary generated successfully!")
+                st.success("CSV summary generated successfully!")
             except Exception as e:
-                st.error(f"❌ CSV generation failed: {str(e)}")
+                st.error(f"CSV generation failed: {str(e)}")
         if st.session_state.csv_data is not None:
             csv_string = st.session_state.csv_data.to_csv(index=False)
             st.download_button(
-                label="💾 Download CSV Summary",
+                label="Download CSV Summary",
                 data=csv_string,
                 file_name=f"production_summary_{datetime.now().strftime('%Y%m%d_%H%M')}.csv",
                 mime="text/csv",
@@ -861,7 +900,7 @@ def main():
     load_css()
     st.markdown("""
     <div class="main-header">
-        <div class="main-title">🏭 Production Monitor with AI Insights</div>
+        <div class="main-title">Production Monitor with AI Insights</div>
         <div class="main-subtitle">Nilsen Service & Consulting AS | Real-time Production Analytics & Recommendations</div>
     </div>
     """, unsafe_allow_html=True)
@@ -874,16 +913,16 @@ def main():
         st.session_state.current_stats = None
     
     with st.sidebar:
-        st.markdown("### 📊 Data Source")
+        st.markdown("### Data Source")
         uploaded_file = st.file_uploader("Upload Production Data", type=['csv'])
         st.markdown("---")
-        st.markdown("### 📊 Quick Load")
+        st.markdown("### Quick Load")
         col1, col2 = st.columns(2)
         with col1:
-            if st.button("📊 2024 Data", type="primary", key="load_2024"):
+            if st.button("2024 Data", type="primary", key="load_2024"):
                 st.session_state.load_preset = "2024"
         with col2:
-            if st.button("📊 2025 Data", type="primary", key="load_2025"):
+            if st.button("2025 Data", type="primary", key="load_2025"):
                 st.session_state.load_preset = "2025"
         st.markdown("---")
         st.markdown("""
@@ -894,9 +933,9 @@ def main():
         - `shift`: day/night (optional)
         """)
         if model:
-            st.success("🤖 AI Assistant Ready")
+            st.success("AI Assistant Ready")
         else:
-            st.warning("⚠️ AI Assistant Unavailable")
+            st.warning("AI Assistant Unavailable")
     
     df = st.session_state.current_df
     stats = st.session_state.current_stats
@@ -907,9 +946,9 @@ def main():
             stats = get_material_stats(df)
             st.session_state.current_df = df
             st.session_state.current_stats = stats
-            st.success("✅ Data uploaded successfully!")
+            st.success("Data uploaded successfully!")
         except Exception as e:
-            st.error(f"❌ Error loading uploaded file: {str(e)}")
+            st.error(f"Error loading uploaded file: {str(e)}")
     elif 'load_preset' in st.session_state:
         year = st.session_state.load_preset
         try:
@@ -919,14 +958,14 @@ def main():
                 stats = get_material_stats(df)
                 st.session_state.current_df = df
                 st.session_state.current_stats = stats
-                st.success(f"✅ {year} data loaded successfully!")
+                st.success(f"{year} data loaded successfully!")
         except Exception as e:
-            st.error(f"❌ Error loading {year} data: {str(e)}")
+            st.error(f"Error loading {year} data: {str(e)}")
         finally:
             del st.session_state.load_preset
     
     if df is not None and stats is not None:
-        st.markdown('<div class="section-header">📋 Material Overview</div>', unsafe_allow_html=True)
+        st.markdown('<div class="section-header">Material Overview</div>', unsafe_allow_html=True)
         materials = [k for k in stats.keys() if k != '_total_']
         all_metrics = materials + ['_total_']
         
@@ -954,7 +993,7 @@ def main():
                         )
                         st.caption(f"Daily avg: {info['daily_avg']:,.0f} kg")
         
-        st.markdown('<div class="section-header">📊 Production Trends</div>', unsafe_allow_html=True)
+        st.markdown('<div class="section-header">Production Trends</div>', unsafe_allow_html=True)
         col1, col2 = st.columns([3, 1])
         with col2:
             time_view = st.selectbox("Time Period", ["daily", "weekly", "monthly"], key="time_view_select")
@@ -965,7 +1004,7 @@ def main():
                 st.plotly_chart(total_chart, use_container_width=True)
                 st.markdown('</div>', unsafe_allow_html=True)
         
-        st.markdown('<div class="section-header">🏷️ Materials Analysis</div>', unsafe_allow_html=True)
+        st.markdown('<div class="section-header">Materials Analysis</div>', unsafe_allow_html=True)
         col1, col2 = st.columns([3, 1])
         with col2:
             selected_materials = st.multiselect(
@@ -983,21 +1022,22 @@ def main():
                     st.markdown('</div>', unsafe_allow_html=True)
         
         if 'shift' in df.columns:
-            st.markdown('<div class="section-header">🌓 Shift Analysis</div>', unsafe_allow_html=True)
+            st.markdown('<div class="section-header">Shift Analysis</div>', unsafe_allow_html=True)
             with st.container():
                 st.markdown('<div class="chart-container">', unsafe_allow_html=True)
                 shift_chart = create_shift_trend_chart(df, time_view)
                 st.plotly_chart(shift_chart, use_container_width=True)
                 st.markdown('</div>', unsafe_allow_html=True)
         
-        st.markdown('<div class="section-header">⚠️ Quality Check</div>', unsafe_allow_html=True)
+        # Updated Quality Check Section
+        st.markdown('<div class="section-header">Quality Check</div>', unsafe_allow_html=True)
         outliers = detect_outliers(df)
         
-        # Create responsive grid using Streamlit columns
+        # Create quality cards using new modern design
         materials_list = list(outliers.items())
         num_materials = len(materials_list)
         
-        # Create rows of cards (3-4 per row depending on screen size)
+        # Create responsive grid
         cols_per_row = min(3, num_materials) if num_materials <= 6 else 4
         
         for i in range(0, num_materials, cols_per_row):
@@ -1009,34 +1049,41 @@ def main():
                     material_title = material.replace("_", " ").title()
                     
                     if info['count'] > 0:
-                        # Format dates - show first 5, then +X more if needed
-                        dates_list = info['dates']
-                        if len(dates_list) <= 5:
-                            dates_display = '<br/>'.join(dates_list)
-                        else:
-                            dates_display = '<br/>'.join(dates_list[:5]) + f'<br/>(+{len(dates_list)-5} more)'
+                        # Show dates in compact format
+                        dates_list = info['dates'][:5]  # Show max 5 dates
+                        dates_display = ', '.join(dates_list)
+                        if len(info['dates']) > 5:
+                            dates_display += f' (+{len(info["dates"])-5} more)'
                         
                         card_html = f'''
                         <div class="quality-card card-warning">
-                            <div class="card-header">
-                                <span class="material-name">{material_title}</span>
+                            <div class="card-title">{material_title}</div>
+                            <div class="status-badge status-warning">Warning</div>
+                            <div class="outliers-info">
+                                <span class="outliers-count warning">{info["count"]}</span>
+                                <span class="outliers-text">Outliers</span>
+                            </div>
+                            <div class="range-info">
+                                <div class="range-label">Normal Range</div>
+                                <div>{info["range"]}</div>
                             </div>
-                            <div class="status-badge warning-badge">{info["count"]} Outlier{"s" if info["count"] > 1 else ""}</div>
-                            <div class="range-text">Normal range: <strong>{info["range"]}</strong></div>
                             <div class="dates-section">
-                                <div class="dates-title">Dates:</div>
-                                {dates_display}
+                                <div class="dates-label">Dates</div>
+                                <div class="dates-list">{dates_display}</div>
                             </div>
                         </div>
                         '''
                     else:
                         card_html = f'''
                         <div class="quality-card card-success">
-                            <div class="card-header">
-                                <span class="material-name">{material_title}</span>
+                            <div class="card-title">{material_title}</div>
+                            <div class="status-badge status-success">Normal</div>
+                            <div class="outliers-info">
+                                <span class="outliers-count success">0</span>
+                                <span class="outliers-text">Outliers</span>
                             </div>
                             <div class="success-center">
-                                <span class="status-badge success-badge">All Values Normal</span>
+                                <div class="success-message">All values within normal range</div>
                             </div>
                         </div>
                         '''
@@ -1046,7 +1093,7 @@ def main():
         add_export_section(df, stats, outliers, model)
         
         if model:
-            st.markdown('<div class="section-header">🤖 AI Insights</div>', unsafe_allow_html=True)
+            st.markdown('<div class="section-header">AI Insights</div>', unsafe_allow_html=True)
             quick_questions = [
                 "How does production distribution on weekdays compare to weekends?",
                 "Which material exhibits the most volatility in our dataset?",