Upload 6 files

Dockerfile

@@ -0,0 +1,30 @@
+# Use an official Python runtime as a parent image
+FROM python:3.9-slim
+
+# Set the working directory
+WORKDIR /code
+
+# Set environment variables
+ENV PORT=7860
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    gcc \
+    python3-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+# Create necessary directories
+RUN mkdir -p /code/uploads /code/logs
+
+# Copy requirements and install dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the application
+COPY . .
+
+# Make directories writable
+RUN chmod -R 777 /code/uploads /code/logs
+
+# Command to run the application
+CMD gunicorn --bind 0.0.0.0:${PORT} --workers 1 --timeout 120 app:app 

README.md

@@ -1,10 +1,10 @@
----
-title: Anamloi Detection Using Ml
-emoji: ⚡
-colorFrom: yellow
-colorTo: gray
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Predictive Maintenance Dashboard
+
+A Flask-based dashboard for monitoring and analyzing maintenance data with interactive visualizations and predictive insights.
+
+## Features
+- Real-time component monitoring
+- Anomaly detection
+- Predictive maintenance suggestions
+- Interactive data visualization
+- Component health analysis 

Spacefile

@@ -0,0 +1,7 @@
+# Spacefile Docs: https://huggingface.co/docs/hub/spaces-config-reference
+title: Predictive Maintenance Dashboard
+emoji: 🔧
+colorFrom: blue
+colorTo: red
+sdk: docker
+app_port: 7860 

app.py

@@ -0,0 +1,431 @@
+from flask import Flask, request, render_template, jsonify, redirect, url_for, flash
+import pandas as pd
+import plotly.graph_objects as go
+import plotly.express as px
+import json
+import io
+import base64
+import os
+import logging
+from logging.handlers import RotatingFileHandler
+from werkzeug.middleware.proxy_fix import ProxyFix
+
+app = Flask(__name__)
+app.secret_key = 'your_secret_key_here'
+
+# Create upload folder and logs folder
+UPLOAD_FOLDER = 'uploads'
+LOGS_FOLDER = 'logs'
+for folder in [UPLOAD_FOLDER, LOGS_FOLDER]:
+    if not os.path.exists(folder):
+        os.makedirs(folder)
+
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.wsgi_app = ProxyFix(app.wsgi_app, x_proto=1, x_host=1)
+
+# Setup logging
+if not app.debug:
+    file_handler = RotatingFileHandler('logs/maintenance_dashboard.log', maxBytes=10240, backupCount=10)
+    file_handler.setFormatter(logging.Formatter(
+        '%(asctime)s %(levelname)s: %(message)s [in %(pathname)s:%(lineno)d]'
+    ))
+    file_handler.setLevel(logging.INFO)
+    app.logger.addHandler(file_handler)
+    app.logger.setLevel(logging.INFO)
+    app.logger.info('Maintenance Dashboard startup')
+
+class DataStore:
+    def __init__(self):
+        self.uploaded_data = None
+        self.current_index = 0
+        self.processed_data = []
+        self.anomalies = []
+
+data_store = DataStore()
+
+def detect_anomalies(df):
+    """Checks each row of the dataframe for readings that exceed preset thresholds."""
+    alerts = []
+    thresholds = {
+        'brakes': 90,
+        'filters':90,
+        'cables': 90
+    }
+
+    for idx, row in df.iterrows():
+        row_alerts = []
+        for component, threshold in thresholds.items():
+            if component in df.columns:
+                value = row[component]
+                if pd.notna(value) and value > threshold:
+                    row_alerts.append(
+                        f"{component.capitalize()} reading ({value}) exceeds threshold ({threshold})"
+                    )
+        if row_alerts:
+            alerts.append({
+                'row': idx + 1,
+                'messages': row_alerts
+            })
+    return alerts
+
+def analyze_component_trends(df):
+    """Analyze trends and patterns in component data"""
+    trends = {}
+    for component in ['brakes', 'filters', 'cables']:
+        # Calculate rolling average to identify trends
+        rolling_avg = df[component].rolling(window=3).mean()
+        
+        # Calculate rate of change
+        rate_of_change = df[component].diff().mean()
+        
+        # Identify peak usage periods
+        peak_threshold = df[component].quantile(0.75)
+        peak_periods = df[component] > peak_threshold
+        
+        trends[component] = {
+            'trend': 'Increasing' if rate_of_change > 1 else 'Decreasing' if rate_of_change < -1 else 'Stable',
+            'rate_of_change': round(rate_of_change, 2),
+            'peak_usage_frequency': round((peak_periods.sum() / len(df)) * 100, 1),
+            'recent_trend': 'Up' if rolling_avg.iloc[-1] > rolling_avg.iloc[-2] else 'Down'
+        }
+    return trends
+
+def generate_maintenance_insights(df, trends):
+    """Generate detailed maintenance insights based on data analysis"""
+    insights = {
+        'critical_analysis': [],
+        'maintenance_recommendations': [],
+        'preventive_measures': [],
+        'optimization_suggestions': []
+    }
+    
+    for component in ['brakes', 'filters', 'cables']:
+        avg = df[component].mean()
+        max_val = df[component].max()
+        std_dev = df[component].std()
+        trend = trends[component]
+        
+        # Critical Analysis
+        if avg > 70:
+            insights['critical_analysis'].append({
+                'component': component,
+                'severity': 'High' if avg > 80 else 'Medium',
+                'reason': f"Sustained high readings (avg: {round(avg, 1)}%)",
+                'trend': trend['trend'],
+                'impact': 'Immediate attention required' if avg > 80 else 'Monitor closely'
+            })
+        
+        # Maintenance Recommendations
+        if trend['trend'] == 'Increasing' and avg > 60:
+            insights['maintenance_recommendations'].append({
+                'component': component,
+                'urgency': 'High' if avg > 75 else 'Medium',
+                'action': f"Schedule maintenance within {' 24 hours' if avg > 75 else ' one week'}",
+                'reason': f"Increasing trend with high average ({round(avg, 1)}%)"
+            })
+        
+        # Preventive Measures
+        if std_dev > 10 or trend['peak_usage_frequency'] > 30:
+            insights['preventive_measures'].append({
+                'component': component,
+                'measure': f"Implement regular checks for {component}",
+                'frequency': 'Daily' if std_dev > 15 else 'Weekly',
+                'reason': f"High variability (±{round(std_dev, 1)}%) and frequent peak usage ({trend['peak_usage_frequency']}% of time)"
+            })
+        
+        # Optimization Suggestions
+        if trend['rate_of_change'] > 2 or max_val > 90:
+            insights['optimization_suggestions'].append({
+                'component': component,
+                'suggestion': f"Review {component} usage patterns",
+                'potential_impact': 'High',
+                'expected_benefit': 'Reduced wear and extended component life'
+            })
+    
+    return insights
+
+def calculate_statistics(df):
+    """Calculate important statistics from the data"""
+    stats = {
+        'component_averages': {
+            'brakes': round(df['brakes'].mean(), 2),
+            'filters': round(df['filters'].mean(), 2),
+            'cables': round(df['cables'].mean(), 2)
+        },
+        'critical_components': [],
+        'maintenance_suggestions': [],
+        'component_health': {},  # New: Component health status
+        'maintenance_priority': [],  # New: Prioritized maintenance list
+        'performance_metrics': {},  # New: Detailed performance metrics
+        'detailed_analysis': {}  # New: Detailed analysis
+    }
+    
+    # Calculate component health and status
+    for component in ['brakes', 'filters', 'cables']:
+        avg = df[component].mean()
+        max_val = df[component].max()
+        min_val = df[component].min()
+        std_dev = df[component].std()
+        
+        # Calculate health score (0-100)
+        health_score = max(0, min(100, 100 - (avg / 100 * 100)))
+        
+        stats['component_health'][component] = {
+            'health_score': round(health_score, 1),
+            'average': round(avg, 2),
+            'max_reading': round(max_val, 2),
+            'min_reading': round(min_val, 2),
+            'variability': round(std_dev, 2),
+            'status': 'Good' if avg < 60 else 'Warning' if avg < 75 else 'Critical'
+        }
+        
+        # Identify critical components
+        if avg > 70:
+            stats['critical_components'].append({
+                'name': component,
+                'avg_value': round(avg, 2),
+                'max_value': round(max_val, 2),
+                'health_score': round(health_score, 1),
+                'status': 'Critical' if avg > 80 else 'Warning',
+                'variability': round(std_dev, 2)
+            })
+    
+    # Generate prioritized maintenance suggestions
+    for component, health in stats['component_health'].items():
+        if health['average'] > 80:
+            stats['maintenance_priority'].append({
+                'component': component,
+                'priority': 'High',
+                'timeline': 'Immediate',
+                'reason': f"Critical readings (Avg: {health['average']}%)",
+                'recommendation': f"Schedule immediate maintenance for {component}"
+            })
+        elif health['average'] > 70:
+            stats['maintenance_priority'].append({
+                'component': component,
+                'priority': 'Medium',
+                'timeline': 'Within 1 week',
+                'reason': f"Warning levels (Avg: {health['average']}%)",
+                'recommendation': f"Plan maintenance for {component} soon"
+            })
+        elif health['variability'] > 10:
+            stats['maintenance_priority'].append({
+                'component': component,
+                'priority': 'Low',
+                'timeline': 'Monitor',
+                'reason': f"High variability (±{health['variability']}%)",
+                'recommendation': f"Monitor {component} performance"
+            })
+
+    # Generate detailed maintenance suggestions
+    for component, health in stats['component_health'].items():
+        suggestions = []
+        
+        if health['average'] > 80:
+            suggestions.append(f"URGENT: Immediate maintenance required - {component} showing critical wear")
+        elif health['average'] > 70:
+            suggestions.append(f"WARNING: Schedule maintenance soon - {component} performance degrading")
+        
+        if health['variability'] > 10:
+            suggestions.append(f"Monitor {component} - Showing inconsistent readings (±{health['variability']}%)")
+        
+        if health['max_reading'] > 90:
+            suggestions.append(f"Investigate {component} peak readings of {health['max_reading']}%")
+        
+        if suggestions:
+            stats['maintenance_suggestions'].extend(suggestions)
+
+    # Calculate performance metrics
+    stats['performance_metrics'] = {
+        'overall_health': round(sum(h['health_score'] for h in stats['component_health'].values()) / 3, 1),
+        'critical_count': len([h for h in stats['component_health'].values() if h['status'] == 'Critical']),
+        'warning_count': len([h for h in stats['component_health'].values() if h['status'] == 'Warning']),
+        'healthy_count': len([h for h in stats['component_health'].values() if h['status'] == 'Good'])
+    }
+    
+    # Add new detailed analyses
+    trends = analyze_component_trends(df)
+    maintenance_insights = generate_maintenance_insights(df, trends)
+    
+    stats['detailed_analysis'] = {
+        'trends': trends,
+        'insights': maintenance_insights
+    }
+    
+    return stats
+
+def create_graphs(df):
+    """Create all visualization graphs"""
+    graphs = {}
+    
+    # Gauge Charts for all components
+    components = ['brakes', 'filters', 'cables']
+    for component in components:
+        latest_value = df[component].iloc[-1]
+        gauge = go.Figure(go.Indicator(
+            mode="gauge+number+delta",
+            value=latest_value,
+            delta={'reference': df[component].iloc[-2] if len(df) > 1 else latest_value},
+            domain={'x': [0, 1], 'y': [0, 1]},
+            title={'text': f"Latest {component.title()} Reading"},
+            gauge={
+                'axis': {'range': [None, 100]},
+                'bar': {'color': "#1f77b4"},
+                'threshold': {
+                    'line': {'color': "red", 'width': 4},
+                    'thickness': 0.75,
+                    'value': 90
+                },
+                'steps': [
+                    {'range': [0, 60], 'color': "#3feb48"},
+                    {'range': [60, 80], 'color': "#ebeb3f"},
+                    {'range': [80, 100], 'color': "#eb3f3f"}
+                ]
+            }))
+        gauge.update_layout(height=300)
+        graphs[f'{component}_gauge'] = gauge.to_html(full_html=False)
+
+    # Bar Chart for current readings with historical average
+    current_values = [df[comp].iloc[-1] for comp in components]
+    avg_values = [df[comp].mean() for comp in components]
+    
+    bar = go.Figure(data=[
+        go.Bar(name='Current Reading', x=components, y=current_values),
+        go.Bar(name='Historical Average', x=components, y=avg_values)
+    ])
+    bar.update_layout(
+        title="Component Readings Comparison",
+        barmode='group',
+        height=400
+    )
+    graphs['bar'] = bar.to_html(full_html=False)
+
+    # Time Series Chart with Moving Average
+    fig_time = go.Figure()
+    for component in components:
+        # Add raw data
+        fig_time.add_trace(go.Scatter(
+            y=df[component],
+            name=component.title(),
+            mode='lines'
+        ))
+        # Add moving average
+        ma = df[component].rolling(window=3).mean()
+        fig_time.add_trace(go.Scatter(
+            y=ma,
+            name=f"{component.title()} MA",
+            line=dict(dash='dash'),
+            opacity=0.5
+        ))
+    
+    fig_time.update_layout(
+        title='Component Readings Over Time',
+        height=400,
+        showlegend=True,
+        legend=dict(
+            orientation="h",
+            yanchor="bottom",
+            y=1.02,
+            xanchor="right",
+            x=1
+        )
+    )
+    graphs['timeseries'] = fig_time.to_html(full_html=False)
+
+    # Correlation Matrix Heatmap
+    corr_matrix = df[components].corr()
+    heatmap = go.Figure(data=go.Heatmap(
+        z=corr_matrix,
+        x=components,
+        y=components,
+        colorscale='RdBu',
+        zmin=-1,
+        zmax=1
+    ))
+    heatmap.update_layout(
+        title='Component Correlation Matrix',
+        height=400
+    )
+    graphs['heatmap'] = heatmap.to_html(full_html=False)
+
+    # Box Plot for Distribution Analysis
+    box_data = [go.Box(y=df[component], name=component.title()) for component in components]
+    box_plot = go.Figure(data=box_data)
+    box_plot.update_layout(
+        title='Component Value Distributions',
+        height=400
+    )
+    graphs['box_plot'] = box_plot.to_html(full_html=False)
+
+    # Scatter Matrix
+    scatter_matrix = px.scatter_matrix(
+        df[components],
+        dimensions=components,
+        title='Component Relationships Matrix'
+    )
+    scatter_matrix.update_layout(height=600)
+    graphs['scatter_matrix'] = scatter_matrix.to_html(full_html=False)
+
+    return graphs
+
+@app.route('/')
+def index():
+    return render_template('index.html', 
+                         data=None, 
+                         graphs=None, 
+                         stats=None, 
+                         anomalies=None)
+
+@app.route('/upload', methods=['POST'])
+def upload():
+    if 'file' not in request.files:
+        flash('No file uploaded', 'error')
+        return redirect(url_for('index'))
+
+    file = request.files['file']
+    if file.filename == '':
+        flash('No file selected', 'error')
+        return redirect(url_for('index'))
+
+    try:
+        # Read the file
+        if file.filename.endswith('.csv'):
+            df = pd.read_csv(file)
+        elif file.filename.endswith(('.xlsx', '.xls')):
+            df = pd.read_excel(file)
+        else:
+            flash('Unsupported file format. Please upload CSV or Excel file.', 'error')
+            return redirect(url_for('index'))
+
+        # Validate required columns
+        required_columns = ['brakes', 'filters', 'cables']
+        missing_columns = [col for col in required_columns if col not in df.columns]
+        
+        if missing_columns:
+            flash(f"Missing required columns: {', '.join(missing_columns)}", 'error')
+            return redirect(url_for('index'))
+
+        # Store the data and process it
+        data_store.uploaded_data = df
+        data_store.anomalies = detect_anomalies(df)
+        
+        # Calculate statistics
+        stats = calculate_statistics(df)
+        
+        # Create graphs
+        graphs = create_graphs(df)
+
+        # Render template with all the data
+        return render_template('index.html',
+                             data=df.to_dict('records'),
+                             graphs=graphs,
+                             stats=stats,
+                             anomalies=data_store.anomalies)
+
+    except Exception as e:
+        flash(f"Error processing file: {str(e)}", 'error')
+        return redirect(url_for('index'))
+
+if __name__ == '__main__':
+    port = int(os.environ.get('PORT', 5000))
+    app.run(host='0.0.0.0', port=port)

requirements.txt

@@ -0,0 +1,8 @@
+Flask
+pandas
+plotly
+numpy
+openpyxl  # For Excel file support
+gunicorn  # For production server
+Werkzeug
+python-dotenv 

templates/index.html

@@ -0,0 +1,745 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Predictive Maintenance Dashboard</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+  <style>
+    :root {
+      --primary-color: #2563eb;
+      --secondary-color: #3b82f6;
+      --success-color: #10b981;
+      --warning-color: #f59e0b;
+      --danger-color: #ef4444;
+      --dark-color: #1f2937;
+      --light-color: #f3f4f6;
+      --border-color: #e5e7eb;
+      --text-primary: #111827;
+      --text-secondary: #4b5563;
+      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+      --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: 'Inter', sans-serif;
+    }
+
+    body {
+      background-color: #f8fafc;
+      color: var(--text-primary);
+      line-height: 1.5;
+    }
+
+    /* Dashboard Layout */
+    .dashboard-container {
+      display: flex;
+      min-height: 100vh;
+    }
+
+    /* Sidebar */
+    .sidebar {
+      width: 280px;
+      background: white;
+      border-right: 1px solid var(--border-color);
+      position: fixed;
+      height: 100vh;
+      overflow-y: auto;
+    }
+
+    .sidebar-header {
+      padding: 1.5rem;
+      border-bottom: 1px solid var(--border-color);
+    }
+
+    .sidebar-header h1 {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: var(--dark-color);
+    }
+
+    .sidebar-content {
+      padding: 1.5rem;
+    }
+
+    /* Main Content */
+    .main-content {
+      flex: 1;
+      margin-left: 280px;
+      padding: 2rem;
+    }
+
+    /* Upload Section */
+    .upload-container {
+      background: white;
+      border-radius: 12px;
+      padding: 2rem;
+      box-shadow: var(--shadow);
+      margin-bottom: 2rem;
+    }
+
+    .upload-form {
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+    }
+
+    .file-input-wrapper {
+      flex: 1;
+      position: relative;
+    }
+
+    .file-input {
+      width: 100%;
+      padding: 0.75rem 1rem;
+      border: 2px dashed var(--border-color);
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+
+    .file-input:hover {
+      border-color: var(--primary-color);
+    }
+
+    .upload-button {
+      background: var(--primary-color);
+      color: white;
+      padding: 0.75rem 1.5rem;
+      border: none;
+      border-radius: 8px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+
+    .upload-button:hover {
+      background: var(--secondary-color);
+    }
+
+    /* Dashboard Grid */
+    .dashboard-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1.5rem;
+      margin-bottom: 2rem;
+    }
+
+    .graph-card {
+      background: white;
+      border-radius: 12px;
+      padding: 1.5rem;
+      box-shadow: var(--shadow);
+    }
+
+    .graph-card h3 {
+      font-size: 1.1rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
+      color: var(--dark-color);
+    }
+
+    /* Insights Section */
+    .insights-container {
+      background: white;
+      border-radius: 12px;
+      padding: 2rem;
+      box-shadow: var(--shadow);
+      margin-bottom: 2rem;
+    }
+
+    .insights-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1.5rem;
+    }
+
+    .insight-card {
+      background: var(--light-color);
+      border-radius: 8px;
+      padding: 1.5rem;
+    }
+
+    .insight-card h3 {
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
+      color: var(--dark-color);
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .insight-card i {
+      color: var(--primary-color);
+    }
+
+    /* Data Points */
+    .data-point {
+      background: white;
+      border-radius: 8px;
+      padding: 1rem;
+      margin-bottom: 1rem;
+      border: 1px solid var(--border-color);
+      transition: all 0.3s ease;
+    }
+
+    .data-point:hover {
+      transform: translateY(-2px);
+      box-shadow: var(--shadow);
+    }
+
+    .data-point.anomaly {
+      border-left: 4px solid var(--danger-color);
+    }
+
+    /* Alerts */
+    .alert {
+      padding: 1rem;
+      border-radius: 8px;
+      margin-bottom: 1rem;
+      font-weight: 500;
+    }
+
+    .alert-danger {
+      background: #fef2f2;
+      color: var(--danger-color);
+      border: 1px solid #fee2e2;
+    }
+
+    .alert-success {
+      background: #f0fdf4;
+      color: var(--success-color);
+      border: 1px solid #dcfce7;
+    }
+
+    /* Responsive Design */
+    @media (max-width: 1024px) {
+      .sidebar {
+        width: 240px;
+      }
+      .main-content {
+        margin-left: 240px;
+      }
+      .dashboard-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    @media (max-width: 768px) {
+      .dashboard-container {
+        flex-direction: column;
+      }
+      .sidebar {
+        width: 100%;
+        height: auto;
+        position: static;
+      }
+      .main-content {
+        margin-left: 0;
+      }
+      .insights-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .component-status {
+      background: white;
+      border-radius: 6px;
+      padding: 1rem;
+      margin-bottom: 1rem;
+      border-left: 4px solid var(--warning-color);
+    }
+
+    .component-status.critical {
+      border-left-color: var(--danger-color);
+    }
+
+    .status-details {
+      margin-top: 0.5rem;
+      font-size: 0.9rem;
+    }
+
+    .status-badge {
+      display: inline-block;
+      padding: 0.25rem 0.75rem;
+      border-radius: 999px;
+      font-size: 0.8rem;
+      font-weight: 500;
+    }
+
+    .status-badge.critical {
+      background: #fee2e2;
+      color: var(--danger-color);
+    }
+
+    .status-badge.warning {
+      background: #fef3c7;
+      color: var(--warning-color);
+    }
+
+    .maintenance-task {
+      background: white;
+      border-radius: 6px;
+      padding: 1rem;
+      margin-bottom: 1rem;
+    }
+
+    .task-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.5rem;
+    }
+
+    .priority-badge {
+      padding: 0.25rem 0.75rem;
+      border-radius: 999px;
+      font-size: 0.8rem;
+      font-weight: 500;
+    }
+
+    .priority-high .priority-badge {
+      background: #fee2e2;
+      color: var(--danger-color);
+    }
+
+    .priority-medium .priority-badge {
+      background: #fef3c7;
+      color: var(--warning-color);
+    }
+
+    .priority-low .priority-badge {
+      background: #dcfce7;
+      color: var(--success-color);
+    }
+
+    .task-details {
+      font-size: 0.9rem;
+    }
+
+    .task-details p {
+      margin: 0.25rem 0;
+    }
+
+    .health-overview {
+      text-align: center;
+    }
+
+    .health-score {
+      margin-bottom: 1.5rem;
+    }
+
+    .health-score .score {
+      font-size: 2.5rem;
+      font-weight: 600;
+      color: var(--primary-color);
+    }
+
+    .component-counts {
+      display: flex;
+      justify-content: space-around;
+      gap: 1rem;
+    }
+
+    .count-item {
+      text-align: center;
+      font-size: 0.9rem;
+    }
+
+    .count-item span {
+      display: block;
+      font-size: 1.5rem;
+      font-weight: 600;
+      margin-bottom: 0.25rem;
+    }
+
+    .count-item.critical span {
+      color: var(--danger-color);
+    }
+
+    .count-item.warning span {
+      color: var(--warning-color);
+    }
+
+    .count-item.good span {
+      color: var(--success-color);
+    }
+
+    /* New styles for Critical Components Analysis */
+    .trends-section {
+      margin-top: 1rem;
+    }
+
+    .trend-item {
+      margin-bottom: 0.5rem;
+    }
+
+    .trend-item strong {
+      font-weight: 600;
+    }
+
+    .trend-item span {
+      font-size: 0.9rem;
+      margin-left: 0.5rem;
+    }
+
+    .trend-item .trend-badge {
+      padding: 0.25rem 0.75rem;
+      border-radius: 999px;
+      font-size: 0.8rem;
+      font-weight: 500;
+    }
+
+    .trend-item .trend-badge.up {
+      background: #dcfce7;
+      color: var(--success-color);
+    }
+
+    .trend-item .trend-badge.down {
+      background: #fef2f2;
+      color: var(--danger-color);
+    }
+
+    /* New styles for Maintenance Analysis */
+    .maintenance-section {
+      margin-top: 1rem;
+    }
+
+    .maintenance-section h4 {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+    }
+
+    .maintenance-task.priority-high {
+      background: #fef2f2;
+    }
+
+    .maintenance-task.priority-medium {
+      background: #fef3c7;
+    }
+
+    .maintenance-task.priority-low {
+      background: #dcfce7;
+    }
+
+    .maintenance-task.priority-high .priority-badge {
+      background: #fee2e2;
+      color: var(--danger-color);
+    }
+
+    .maintenance-task.priority-medium .priority-badge {
+      background: #fef3c7;
+      color: var(--warning-color);
+    }
+
+    .maintenance-task.priority-low .priority-badge {
+      background: #dcfce7;
+      color: var(--success-color);
+    }
+
+    .preventive-measure {
+      margin-bottom: 0.5rem;
+    }
+
+    .preventive-measure h5 {
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 0.25rem;
+    }
+
+    .preventive-measure p {
+      margin: 0.25rem 0;
+    }
+
+    .optimization-suggestion {
+      margin-bottom: 0.5rem;
+    }
+
+    .optimization-suggestion h5 {
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 0.25rem;
+    }
+
+    .optimization-suggestion p {
+      margin: 0.25rem 0;
+    }
+
+    /* Add to your existing CSS */
+    .analysis-section {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1.5rem;
+      margin-bottom: 2rem;
+    }
+
+    .graph-card.full-width {
+      grid-column: 1 / -1;
+    }
+
+    .graph-card {
+      background: white;
+      border-radius: 12px;
+      padding: 1.5rem;
+      box-shadow: var(--shadow);
+    }
+
+    .graph-card h3 {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 1.1rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
+      color: var(--dark-color);
+    }
+
+    .graph-card h3 i {
+      color: var(--primary-color);
+    }
+  </style>
+</head>
+<body>
+  <div class="dashboard-container">
+    <!-- Sidebar -->
+    <div class="sidebar">
+      <div class="sidebar-header">
+        <h1>Maintenance Dashboard</h1>
+      </div>
+      <div class="sidebar-content">
+        <h3>Data Points</h3>
+        {% if data %}
+          {% for row in data %}
+          <div class="data-point {% if row.row_num in anomalies|map(attribute='row') %}anomaly{% endif %}">
+            <strong>#{{ loop.index }}</strong>
+            <div>Brakes: {{ row.brakes }}%</div>
+            <div>Filters: {{ row.filters }}%</div>
+            <div>Cables: {{ row.cables }}%</div>
+          </div>
+          {% endfor %}
+        {% endif %}
+      </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="main-content">
+      <!-- Flash Messages -->
+      {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+          {% for category, message in messages %}
+            <div class="alert alert-{{ category }}">
+              <i class="fas fa-info-circle"></i> {{ message }}
+            </div>
+          {% endfor %}
+        {% endif %}
+      {% endwith %}
+
+      <!-- Upload Section -->
+      <div class="upload-container">
+        <form action="{{ url_for('upload') }}" method="post" enctype="multipart/form-data" class="upload-form">
+          <div class="file-input-wrapper">
+            <input type="file" id="file" name="file" accept=".csv,.xlsx,.xls" required class="file-input">
+          </div>
+          <button type="submit" class="upload-button">
+            <i class="fas fa-upload"></i> Upload & Process
+          </button>
+        </form>
+        <div class="upload-info">
+          <small>Supported formats: CSV, Excel (.xlsx, .xls) | Required columns: brakes, filters, cables</small>
+        </div>
+      </div>
+
+      {% if data %}
+      <!-- Graphs Section -->
+      <div class="dashboard-grid">
+        <!-- Gauge Charts -->
+        <div class="graph-card">
+          <h3><i class="fas fa-tachometer-alt"></i> Brake Reading</h3>
+          {{ graphs.brakes_gauge | safe }}
+        </div>
+        <div class="graph-card">
+          <h3><i class="fas fa-tachometer-alt"></i> Filter Reading</h3>
+          {{ graphs.filters_gauge | safe }}
+        </div>
+        <div class="graph-card">
+          <h3><i class="fas fa-tachometer-alt"></i> Cable Reading</h3>
+          {{ graphs.cables_gauge | safe }}
+        </div>
+        
+        <!-- Comparison Charts -->
+        <div class="graph-card">
+          <h3><i class="fas fa-chart-bar"></i> Current vs Average Readings</h3>
+          {{ graphs.bar | safe }}
+        </div>
+      </div>
+
+      <!-- Additional Analysis Charts -->
+      <div class="analysis-section">
+        <div class="graph-card full-width">
+          <h3><i class="fas fa-chart-line"></i> Time Series Analysis with Moving Averages</h3>
+          {{ graphs.timeseries | safe }}
+        </div>
+        
+        <div class="graph-card">
+          <h3><i class="fas fa-th"></i> Correlation Matrix</h3>
+          {{ graphs.heatmap | safe }}
+        </div>
+        
+        <div class="graph-card">
+          <h3><i class="fas fa-box-plot"></i> Value Distributions</h3>
+          {{ graphs.box_plot | safe }}
+        </div>
+        
+        <div class="graph-card full-width">
+          <h3><i class="fas fa-project-diagram"></i> Component Relationships</h3>
+          {{ graphs.scatter_matrix | safe }}
+        </div>
+      </div>
+
+      <!-- Insights Section -->
+      <div class="insights-container">
+        <div class="insights-grid">
+          <div class="insight-card">
+            <h3><i class="fas fa-exclamation-triangle"></i> Critical Components Analysis</h3>
+            {% if stats.detailed_analysis.insights.critical_analysis %}
+                {% for analysis in stats.detailed_analysis.insights.critical_analysis %}
+                <div class="component-status {% if analysis.severity == 'High' %}critical{% else %}warning{% endif %}">
+                    <h4>{{ analysis.component|title }}</h4>
+                    <div class="status-details">
+                        <p><i class="fas fa-exclamation-circle"></i> Severity: {{ analysis.severity }}</p>
+                        <p><i class="fas fa-chart-line"></i> Trend: {{ analysis.trend }}</p>
+                        <p><i class="fas fa-info-circle"></i> {{ analysis.reason }}</p>
+                        <p><i class="fas fa-impact"></i> Impact: {{ analysis.impact }}</p>
+                    </div>
+                </div>
+                {% endfor %}
+            {% else %}
+                <p>No critical components detected</p>
+            {% endif %}
+
+            <!-- Component Trends -->
+            <div class="trends-section">
+                <h4>Component Trends</h4>
+                {% for component, trend in stats.detailed_analysis.trends.items() %}
+                <div class="trend-item">
+                    <strong>{{ component|title }}:</strong>
+                    <span class="trend-badge {{ trend.trend.lower() }}">
+                        {{ trend.trend }}
+                        <i class="fas fa-arrow-{{ 'up' if trend.recent_trend == 'Up' else 'down' }}"></i>
+                    </span>
+                    <p>Change Rate: {{ trend.rate_of_change }}% per reading</p>
+                    <p>Peak Usage: {{ trend.peak_usage_frequency }}% of time</p>
+                </div>
+                {% endfor %}
+            </div>
+          </div>
+
+          <div class="insight-card">
+            <h3><i class="fas fa-tools"></i> Maintenance Analysis</h3>
+            
+            <!-- Immediate Actions -->
+            <div class="maintenance-section">
+                <h4><i class="fas fa-exclamation-circle"></i> Immediate Actions</h4>
+                {% if stats.detailed_analysis.insights.maintenance_recommendations %}
+                    {% for rec in stats.detailed_analysis.insights.maintenance_recommendations %}
+                    <div class="maintenance-task priority-{{ rec.urgency.lower() }}">
+                        <div class="task-header">
+                            <h5>{{ rec.component|title }}</h5>
+                            <span class="priority-badge">{{ rec.urgency }}</span>
+                        </div>
+                        <div class="task-details">
+                            <p><i class="fas fa-clock"></i> {{ rec.action }}</p>
+                            <p><i class="fas fa-info-circle"></i> {{ rec.reason }}</p>
+                        </div>
+                    </div>
+                    {% endfor %}
+                {% else %}
+                    <p>No immediate actions required</p>
+                {% endif %}
+            </div>
+
+            <!-- Preventive Measures -->
+            <div class="maintenance-section">
+                <h4><i class="fas fa-shield-alt"></i> Preventive Measures</h4>
+                {% if stats.detailed_analysis.insights.preventive_measures %}
+                    {% for measure in stats.detailed_analysis.insights.preventive_measures %}
+                    <div class="preventive-measure">
+                        <h5>{{ measure.component|title }}</h5>
+                        <p><i class="fas fa-check-circle"></i> {{ measure.measure }}</p>
+                        <p><i class="fas fa-clock"></i> Frequency: {{ measure.frequency }}</p>
+                        <p><i class="fas fa-info-circle"></i> {{ measure.reason }}</p>
+                    </div>
+                    {% endfor %}
+                {% endif %}
+            </div>
+
+            <!-- Optimization Suggestions -->
+            <div class="maintenance-section">
+                <h4><i class="fas fa-lightbulb"></i> Optimization Suggestions</h4>
+                {% if stats.detailed_analysis.insights.optimization_suggestions %}
+                    {% for opt in stats.detailed_analysis.insights.optimization_suggestions %}
+                    <div class="optimization-suggestion">
+                        <h5>{{ opt.component|title }}</h5>
+                        <p><i class="fas fa-star"></i> {{ opt.suggestion }}</p>
+                        <p><i class="fas fa-chart-line"></i> Impact: {{ opt.potential_impact }}</p>
+                        <p><i class="fas fa-check"></i> {{ opt.expected_benefit }}</p>
+                    </div>
+                    {% endfor %}
+                {% endif %}
+            </div>
+          </div>
+
+          <div class="insight-card">
+            <h3><i class="fas fa-chart-pie"></i> System Health Overview</h3>
+            <div class="health-overview">
+                <div class="health-score">
+                    <h4>Overall Health</h4>
+                    <div class="score">{{ stats.performance_metrics.overall_health }}%</div>
+                </div>
+                <div class="component-counts">
+                    <div class="count-item critical">
+                        <span>{{ stats.performance_metrics.critical_count }}</span>
+                        Critical
+                    </div>
+                    <div class="count-item warning">
+                        <span>{{ stats.performance_metrics.warning_count }}</span>
+                        Warning
+                    </div>
+                    <div class="count-item good">
+                        <span>{{ stats.performance_metrics.healthy_count }}</span>
+                        Healthy
+                    </div>
+                </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Anomalies Section -->
+      {% if anomalies %}
+      <div class="insights-container">
+        <h2><i class="fas fa-exclamation-circle"></i> Detected Anomalies</h2>
+        {% for anomaly in anomalies %}
+        <div class="alert alert-danger">
+          <strong>Row {{ anomaly.row }}:</strong>
+          <ul>
+            {% for message in anomaly.messages %}
+            <li>{{ message }}</li>
+            {% endfor %}
+          </ul>
+        </div>
+        {% endfor %}
+      </div>
+      {% endif %}
+      {% endif %}
+    </div>
+  </div>
+</body>
+</html>
+