Upload folder using huggingface_hub

components/chart.py

@@ -0,0 +1,309 @@
+"""
+Chart generation for forecast visualization
+"""
+
+import plotly.graph_objs as go
+from plotly.subplots import make_subplots
+import pandas as pd
+from typing import List
+from config.constants import COLORS, CHART_CONFIG
+
+
+def create_forecast_chart(
+    historical_data: pd.DataFrame,
+    forecast_data: pd.DataFrame,
+    confidence_levels: List[int],
+    title: str = "Time Series Forecast",
+    y_axis_label: str = "Value",
+    backtest_data: pd.DataFrame = None
+) -> go.Figure:
+    """
+    Create an interactive forecast chart with confidence intervals
+
+    Args:
+        historical_data: DataFrame with columns ['ds', 'y']
+        forecast_data: DataFrame with forecast and confidence intervals
+        confidence_levels: List of confidence levels to plot
+        title: Chart title
+        y_axis_label: Label for y-axis (variable name being forecasted)
+        backtest_data: Optional DataFrame with backtest results
+
+    Returns:
+        Plotly figure
+    """
+    fig = go.Figure()
+
+    # Add historical data
+    fig.add_trace(go.Scatter(
+        x=historical_data['ds'],
+        y=historical_data['y'],
+        mode='lines',
+        name='Historical',
+        line=dict(color=COLORS['historical'], width=2),
+        hovertemplate=f'<b>Date:</b> %{{x}}<br><b>{y_axis_label}:</b> %{{y:.2f}}<extra></extra>'
+    ))
+
+    # Add backtest data if provided (shows model performance on historical data)
+    if backtest_data is not None and len(backtest_data) > 0:
+        # Add actual values from backtest period
+        fig.add_trace(go.Scatter(
+            x=backtest_data['timestamp'],
+            y=backtest_data['actual'],
+            mode='lines',
+            name='Backtest Actual',
+            line=dict(color='rgba(100, 100, 100, 0.6)', width=2, dash='dot'),
+            hovertemplate=f'<b>Date:</b> %{{x}}<br><b>{y_axis_label} (Actual):</b> %{{y:.2f}}<extra></extra>'
+        ))
+
+        # Add predicted values from backtest period
+        fig.add_trace(go.Scatter(
+            x=backtest_data['timestamp'],
+            y=backtest_data['predicted'],
+            mode='lines',
+            name='Backtest Predicted',
+            line=dict(color='rgba(255, 100, 100, 0.8)', width=2),
+            hovertemplate=f'<b>Date:</b> %{{x}}<br><b>{y_axis_label} (Predicted):</b> %{{y:.2f}}<extra></extra>'
+        ))
+
+    # Add confidence bands (from widest to narrowest)
+    for cl in sorted(confidence_levels, reverse=True):
+        lower_col = f'lower_{cl}'
+        upper_col = f'upper_{cl}'
+
+        if lower_col in forecast_data.columns and upper_col in forecast_data.columns:
+            # Add filled area for confidence interval
+            fig.add_trace(go.Scatter(
+                x=forecast_data['ds'].tolist() + forecast_data['ds'].tolist()[::-1],
+                y=forecast_data[upper_col].tolist() + forecast_data[lower_col].tolist()[::-1],
+                fill='toself',
+                fillcolor=COLORS['confidence'][cl],
+                line=dict(width=0),
+                name=f'{cl}% Confidence',
+                showlegend=True,
+                hoverinfo='skip'
+            ))
+
+    # Add forecast line
+    fig.add_trace(go.Scatter(
+        x=forecast_data['ds'],
+        y=forecast_data['forecast'],
+        mode='lines',
+        name='Forecast',
+        line=dict(color=COLORS['forecast'], width=2),
+        hovertemplate=f'<b>Date:</b> %{{x}}<br><b>{y_axis_label} (Forecast):</b> %{{y:.2f}}<extra></extra>'
+    ))
+
+    # Add vertical separator line
+    if len(historical_data) > 0:
+        last_historical_date = historical_data['ds'].iloc[-1]
+        # Use add_shape instead of add_vline to avoid Timestamp arithmetic issues
+        fig.add_shape(
+            type="line",
+            x0=last_historical_date,
+            x1=last_historical_date,
+            y0=0,
+            y1=1,
+            yref="paper",
+            line=dict(color=COLORS['separator'], dash="dash", width=1)
+        )
+        # Add annotation
+        fig.add_annotation(
+            x=last_historical_date,
+            y=1.0,
+            yref="paper",
+            text="Forecast Start",
+            showarrow=False,
+            yanchor="bottom"
+        )
+
+    # Update layout
+    fig.update_layout(
+        title=dict(text=title, x=0.5, xanchor='center'),
+        xaxis_title="Date",
+        yaxis_title=y_axis_label,
+        hovermode='x unified',
+        template='plotly_white',
+        height=700,  # Increased height to accommodate rangeslider
+        showlegend=True,
+        legend=dict(
+            orientation="h",
+            yanchor="bottom",
+            y=1.02,
+            xanchor="right",
+            x=1
+        ),
+        margin=dict(l=50, r=50, t=80, b=150),  # Increased bottom margin for larger rangeslider
+        xaxis=dict(
+            rangeslider=dict(
+                visible=True,
+                thickness=0.12  # Wider slider (12% of chart height)
+            ),
+            type='date'
+        )
+    )
+
+    # Update config
+    fig.update_layout(
+        modebar_add=['v1hovermode', 'toggleSpikelines']
+    )
+
+    return fig
+
+
+def create_empty_chart(message: str = "No data available") -> go.Figure:
+    """
+    Create an empty placeholder chart
+
+    Args:
+        message: Message to display
+
+    Returns:
+        Plotly figure
+    """
+    fig = go.Figure()
+
+    fig.add_annotation(
+        text=message,
+        xref="paper",
+        yref="paper",
+        x=0.5,
+        y=0.5,
+        showarrow=False,
+        font=dict(size=20, color='gray')
+    )
+
+    fig.update_layout(
+        template='plotly_white',
+        height=600,
+        xaxis=dict(visible=False),
+        yaxis=dict(visible=False)
+    )
+
+    return fig
+
+
+def create_metrics_display(metrics: dict, inference_time: float = None) -> list:
+    """
+    Create metrics display components
+
+    Args:
+        metrics: Dictionary of metric values
+        inference_time: Time taken for inference in seconds
+
+    Returns:
+        List of Dash components
+    """
+    import dash_bootstrap_components as dbc
+    from dash import html
+
+    metric_cards = []
+
+    # Add inference time if available
+    if inference_time is not None:
+        metric_cards.append(
+            dbc.Col([
+                dbc.Card([
+                    dbc.CardBody([
+                        html.H6("Inference Time", className="text-muted mb-2"),
+                        html.H4(f"{inference_time:.2f}s")
+                    ])
+                ], className="text-center")
+            ], md=2)
+        )
+
+    # Add other metrics
+    metric_names = {
+        'MAE': 'Mean Absolute Error',
+        'RMSE': 'Root Mean Squared Error',
+        'MAPE': 'Mean Absolute % Error',
+        'R2': 'R-Squared'
+    }
+
+    for key, name in metric_names.items():
+        if key in metrics and metrics[key] is not None:
+            value = metrics[key]
+            if key in ['MAPE']:
+                formatted_value = f"{value:.2f}%"
+            elif key == 'R2':
+                formatted_value = f"{value:.4f}"
+            else:
+                formatted_value = f"{value:.2f}"
+
+            metric_cards.append(
+                dbc.Col([
+                    dbc.Card([
+                        dbc.CardBody([
+                            html.H6(name, className="text-muted mb-2"),
+                            html.H4(formatted_value)
+                        ])
+                    ], className="text-center")
+                ], md=2)
+            )
+
+    return metric_cards
+
+
+def create_backtest_metrics_display(metrics: dict) -> list:
+    """
+    Create backtest metrics display components
+
+    Args:
+        metrics: Dictionary of backtest metric values (MAE, RMSE, MAPE, R2)
+
+    Returns:
+        Dash component card
+    """
+    import dash_bootstrap_components as dbc
+    from dash import html
+
+    return dbc.Card([
+        dbc.CardHeader([
+            html.I(className="fas fa-chart-bar me-2"),
+            html.Span("Backtest Performance Metrics", className="fw-bold")
+        ]),
+        dbc.CardBody([
+            html.P("Model performance on historical data validation:", className="text-muted small mb-3"),
+            dbc.Row([
+                dbc.Col([
+                    html.Small("MAE", className="text-muted"),
+                    html.H5(f"{metrics.get('MAE', 0):.2f}", className="mb-0")
+                ], md=3),
+                dbc.Col([
+                    html.Small("RMSE", className="text-muted"),
+                    html.H5(f"{metrics.get('RMSE', 0):.2f}", className="mb-0")
+                ], md=3),
+                dbc.Col([
+                    html.Small("MAPE", className="text-muted"),
+                    html.H5(f"{metrics.get('MAPE', 0):.2f}%", className="mb-0")
+                ], md=3),
+                dbc.Col([
+                    html.Small("R²", className="text-muted"),
+                    html.H5(f"{metrics.get('R2', 0):.4f}", className="mb-0")
+                ], md=3),
+            ]),
+            html.Hr(),
+            html.Small([
+                html.I(className="fas fa-info-circle me-1"),
+                "Lower MAE/RMSE/MAPE and higher R² (closer to 1.0) indicate better model performance"
+            ], className="text-muted")
+        ])
+    ], className="mt-3")
+
+
+def decimate_data(df: pd.DataFrame, max_points: int = 10000) -> pd.DataFrame:
+    """
+    Reduce number of data points for visualization
+
+    Args:
+        df: Input DataFrame
+        max_points: Maximum number of points to keep
+
+    Returns:
+        Decimated DataFrame
+    """
+    if len(df) <= max_points:
+        return df
+
+    # Use systematic sampling
+    step = len(df) // max_points
+    return df.iloc[::step].reset_index(drop=True)

components/controls.py

@@ -0,0 +1,265 @@
+"""
+Control components for forecast parameters
+"""
+
+import dash
+from dash import dcc, html
+import dash_bootstrap_components as dbc
+from config.constants import FORECAST_HORIZONS, CONFIDENCE_LEVELS
+
+
+def create_forecast_controls():
+    """
+    Create forecast parameter controls
+
+    Returns:
+        Dash component
+    """
+    return dbc.Card([
+        dbc.CardHeader(html.H5("Forecasting Parameters", className="mb-0")),
+        dbc.CardBody([
+            # Forecast Horizon Slider
+            html.Label("Forecast Horizon (Days)", className="fw-bold"),
+            dcc.Slider(
+                id='horizon-slider',
+                min=1,
+                max=365,
+                step=1,
+                value=30,
+                marks={
+                    1: '1D',
+                    7: '1W',
+                    30: '1M',
+                    90: '3M',
+                    180: '6M',
+                    365: '1Y'
+                },
+                tooltip={"placement": "bottom", "always_visible": True},
+                className='mb-4'
+            ),
+
+            # Confidence Levels
+            html.Label("Confidence Levels", className="fw-bold mt-3"),
+            dbc.Checklist(
+                id='confidence-checklist',
+                options=[
+                    {'label': '80%', 'value': 80},
+                    {'label': '90%', 'value': 90},
+                    {'label': '95%', 'value': 95},
+                    {'label': '99%', 'value': 99},
+                ],
+                value=[80, 95],
+                inline=True,
+                className='mb-4'
+            ),
+
+            # Backtesting Section
+            html.Hr(),
+            html.Label("Model Performance Validation", className="fw-bold mt-3"),
+            dbc.Checklist(
+                id='backtest-enable',
+                options=[
+                    {'label': ' Enable backtesting (show model performance on historical data)', 'value': 'enabled'}
+                ],
+                value=[],
+                className='mb-3'
+            ),
+
+            # Backtest Size Slider (only visible when backtest is enabled)
+            html.Div([
+                html.Label("Backtest Period (Days)", className="fw-bold"),
+                html.Small(" - Amount of historical data to use for validation", className="text-muted"),
+                dcc.Slider(
+                    id='backtest-size-slider',
+                    min=5,
+                    max=180,
+                    step=5,
+                    value=30,
+                    marks={
+                        5: '5D',
+                        30: '1M',
+                        60: '2M',
+                        90: '3M',
+                        180: '6M'
+                    },
+                    tooltip={"placement": "bottom", "always_visible": True},
+                    className='mb-3'
+                ),
+            ], id='backtest-controls', style={'display': 'none'}),
+
+            # Generate Button
+            dbc.Button(
+                [
+                    html.I(className="fas fa-chart-line me-2"),
+                    "Generate Forecast"
+                ],
+                id='generate-forecast-btn',
+                color='primary',
+                size='lg',
+                className='w-100 mt-3',
+                disabled=True
+            ),
+
+            # Loading indicator
+            dcc.Loading(
+                id="loading-forecast",
+                type="default",
+                children=html.Div(id="loading-output")
+            )
+        ])
+    ], className='mb-4')
+
+
+def create_model_status_bar(status: str = 'loading'):
+    """
+    Create model status indicator
+
+    Args:
+        status: 'loading', 'ready', 'error'
+
+    Returns:
+        Dash component
+    """
+    if status == 'loading':
+        return dbc.Alert([
+            dbc.Spinner(size="sm", className="me-2"),
+            html.Span("Loading Chronos 2 model...")
+        ], color='info', className='mb-4')
+    elif status == 'ready':
+        return dbc.Alert([
+            html.I(className="fas fa-check-circle me-2"),
+            html.Span("Model loaded and ready")
+        ], color='success', className='mb-4', dismissable=True)
+    elif status == 'error':
+        return dbc.Alert([
+            html.I(className="fas fa-exclamation-circle me-2"),
+            html.Span("Failed to load model. Please check logs.")
+        ], color='danger', className='mb-4')
+    else:
+        return html.Div()
+
+
+def create_results_section():
+    """
+    Create the results visualization section
+
+    Returns:
+        Dash component
+    """
+    return dbc.Card([
+        dbc.CardHeader(html.H5("Forecast Results", className="mb-0")),
+        dbc.CardBody([
+            # Chart container
+            dcc.Graph(
+                id='forecast-chart',
+                config=create_chart_config(),
+                style={'height': '600px'}
+            ),
+
+            # Metrics row
+            html.Div(id='metrics-display', className='mt-4')
+        ])
+    ], className='mb-4', id='results-card', style={'display': 'none'})
+
+
+def create_chart_config():
+    """
+    Create Plotly chart configuration
+
+    Returns:
+        Configuration dictionary
+    """
+    from config.constants import CHART_CONFIG
+    return CHART_CONFIG
+
+
+def create_app_header():
+    """
+    Create application header
+
+    Returns:
+        Dash component
+    """
+    from config.settings import APP_METADATA
+
+    return dbc.Navbar(
+        dbc.Container([
+            dbc.Row([
+                dbc.Col([
+                    html.Div([
+                        html.H2(APP_METADATA['title'], className="mb-0 text-white"),
+                        html.P(APP_METADATA['subtitle'], className="mb-0 text-white-50 small")
+                    ])
+                ])
+            ], align="center", className="g-0 w-100")
+        ], fluid=True),
+        color="primary",
+        dark=True,
+        className="mb-4"
+    )
+
+
+def create_footer():
+    """
+    Create application footer
+
+    Returns:
+        Dash component
+    """
+    from config.settings import APP_METADATA
+
+    return html.Footer([
+        html.Hr(),
+        dbc.Container([
+            dbc.Row([
+                dbc.Col([
+                    html.Div([
+                        html.P([
+                            "Created by ",
+                            html.A([
+                                html.I(className="fab fa-linkedin me-1"),
+                                "Abhay Pratap Singh"
+                            ],
+                            href="https://www.linkedin.com/in/mindful-abhay/",
+                            target="_blank",
+                            className="text-primary fw-bold",
+                            style={'textDecoration': 'none'}
+                            )
+                        ], className="text-center mb-2"),
+                        html.P([
+                            html.A([
+                                html.I(className="fas fa-coffee me-2"),
+                                "Buy me a coffee"
+                            ],
+                            href="https://buymeacoffee.com/abhaypratapsingh",
+                            target="_blank",
+                            className="btn btn-outline-warning btn-sm"
+                            )
+                        ], className="text-center mb-2"),
+                        html.P([
+                            f"Version {APP_METADATA['version']}"
+                        ], className="text-center text-muted small mb-0")
+                    ])
+                ])
+            ])
+        ])
+    ], className="mt-5 mb-3")
+
+
+def create_progress_indicator(progress: int, message: str = "Processing..."):
+    """
+    Create a progress indicator
+
+    Args:
+        progress: Progress percentage (0-100)
+        message: Progress message
+
+    Returns:
+        Dash component
+    """
+    return dbc.Card([
+        dbc.CardBody([
+            html.H6(message, className="mb-3"),
+            dbc.Progress(value=progress, striped=True, animated=True)
+        ])
+    ])

components/upload.py

@@ -0,0 +1,347 @@
+"""
+File upload component
+"""
+
+import dash
+from dash import dcc, html
+import dash_bootstrap_components as dbc
+
+
+def create_upload_component():
+    """
+    Create the file upload component with drag-and-drop
+
+    Returns:
+        Dash component
+    """
+    return dbc.Card([
+        dbc.CardHeader(html.H5("Data Input", className="mb-0")),
+        dbc.CardBody([
+            dcc.Upload(
+                id='upload-data',
+                children=html.Div([
+                    html.I(className="fas fa-cloud-upload-alt fa-3x mb-3"),
+                    html.H5('Drag and Drop or Click to Select File'),
+                    html.P('Supported formats: CSV, Excel (max 100MB)', className='text-muted')
+                ]),
+                style={
+                    'width': '100%',
+                    'height': '150px',
+                    'lineHeight': '150px',
+                    'borderWidth': '2px',
+                    'borderStyle': 'dashed',
+                    'borderRadius': '10px',
+                    'textAlign': 'center',
+                    'backgroundColor': '#f8f9fa'
+                },
+                multiple=False
+            ),
+            html.Div(id='upload-status', className='mt-3'),
+        ])
+    ], className='mb-4')
+
+
+def create_column_selector():
+    """
+    Create column mapping dropdowns with support for multivariate and covariate-informed forecasting
+
+    Returns:
+        Dash component
+    """
+    return dbc.Card([
+        dbc.CardHeader(html.H5("Data Configuration", className="mb-0")),
+        dbc.CardBody([
+            # Forecasting Mode Selector
+            dbc.Row([
+                dbc.Col([
+                    dbc.Label("Forecasting Mode", className="fw-bold"),
+                    dcc.RadioItems(
+                        id='forecasting-mode',
+                        options=[
+                            {'label': ' Univariate (Single target)', 'value': 'univariate'},
+                            {'label': ' Multivariate (Multiple targets)', 'value': 'multivariate'},
+                            {'label': ' Covariate-informed (With external variables)', 'value': 'covariate'}
+                        ],
+                        value='univariate',
+                        className='mt-2',
+                        labelStyle={'display': 'block', 'marginBottom': '8px'}
+                    ),
+                    html.Small("Chronos-2 supports all three modes with zero-shot learning",
+                              className='text-muted')
+                ], md=12),
+            ], className='mb-3'),
+
+            html.Hr(),
+
+            # Column Selection
+            dbc.Row([
+                dbc.Col([
+                    dbc.Label("Date/Timestamp Column"),
+                    dcc.Dropdown(
+                        id='date-column-dropdown',
+                        placeholder='Select date column...',
+                        clearable=False
+                    )
+                ], md=4),
+                dbc.Col([
+                    dbc.Label("Target Variable(s)"),
+                    dcc.Dropdown(
+                        id='target-column-dropdown',
+                        placeholder='Select target column(s)...',
+                        clearable=False,
+                        multi=True  # Enable multi-select
+                    ),
+                    html.Small(id='target-help-text', className='text-muted')
+                ], md=4),
+                dbc.Col([
+                    dbc.Label("ID Column (Optional)"),
+                    dcc.Dropdown(
+                        id='id-column-dropdown',
+                        placeholder='Select ID column (optional)...',
+                        clearable=True
+                    ),
+                    html.Small("For multiple time series", className='text-muted')
+                ], md=4),
+            ], className='mb-3'),
+
+            # Covariate Selection (shown only for covariate-informed mode)
+            html.Div([
+                dbc.Row([
+                    dbc.Col([
+                        dbc.Label("Covariate Columns"),
+                        dcc.Dropdown(
+                            id='covariate-columns-dropdown',
+                            placeholder='Select covariate column(s)...',
+                            clearable=True,
+                            multi=True
+                        ),
+                        html.Small("External variables that may influence the forecast",
+                                  className='text-muted')
+                    ], md=12),
+                ], className='mb-3'),
+            ], id='covariate-section', style={'display': 'none'}),
+
+            html.Hr(),
+            html.Div(id='data-preview-container', className='mt-3'),
+            html.Div(id='data-quality-report', className='mt-3')
+        ])
+    ], className='mb-4', id='column-selector-card', style={'display': 'none'})
+
+
+def create_sample_data_loader():
+    """
+    Create sample data loader component
+
+    Returns:
+        Dash component
+    """
+    return dbc.Card([
+        dbc.CardBody([
+            html.H6("Quick Start with Sample Data"),
+            dbc.Row([
+                dbc.Col([
+                    dbc.Button(
+                        "Weather Stations",
+                        id='load-weather',
+                        color='outline-primary',
+                        size='sm',
+                        className='w-100 mb-2'
+                    ),
+                ], md=4),
+                dbc.Col([
+                    dbc.Button(
+                        "Air Quality UCI",
+                        id='load-airquality',
+                        color='outline-primary',
+                        size='sm',
+                        className='w-100 mb-2'
+                    ),
+                ], md=4),
+                dbc.Col([
+                    dbc.Button(
+                        "Bitcoin Price",
+                        id='load-bitcoin',
+                        color='outline-primary',
+                        size='sm',
+                        className='w-100 mb-2'
+                    ),
+                ], md=4),
+            ]),
+            dbc.Row([
+                dbc.Col([
+                    dbc.Button(
+                        "S&P 500 Stock",
+                        id='load-stock',
+                        color='outline-primary',
+                        size='sm',
+                        className='w-100 mb-2'
+                    ),
+                ], md=4),
+                dbc.Col([
+                    dbc.Button(
+                        "Traffic Speeds",
+                        id='load-traffic',
+                        color='outline-primary',
+                        size='sm',
+                        className='w-100 mb-2'
+                    ),
+                ], md=4),
+                dbc.Col([
+                    dbc.Button(
+                        "Electricity Consumption",
+                        id='load-electricity',
+                        color='outline-primary',
+                        size='sm',
+                        className='w-100 mb-2'
+                    ),
+                ], md=4),
+            ]),
+        ])
+    ], className='mb-4')
+
+
+def format_upload_status(status: str, message: str, is_error: bool = False):
+    """
+    Format upload status message
+
+    Args:
+        status: Status type ('success', 'error', 'info')
+        message: Message to display
+        is_error: Whether this is an error message
+
+    Returns:
+        Dash component
+    """
+    if is_error or status == 'error':
+        return dbc.Alert([
+            html.I(className="fas fa-exclamation-circle me-2"),
+            message
+        ], color='danger', dismissable=True)
+    elif status == 'success':
+        return dbc.Alert([
+            html.I(className="fas fa-check-circle me-2"),
+            message
+        ], color='success', dismissable=True)
+    elif status == 'warning':
+        return dbc.Alert([
+            html.I(className="fas fa-exclamation-triangle me-2"),
+            message
+        ], color='warning', dismissable=True)
+    else:
+        return dbc.Alert([
+            html.I(className="fas fa-info-circle me-2"),
+            message
+        ], color='info', dismissable=True)
+
+
+def create_data_preview_table(df, n_rows=10):
+    """
+    Create a data preview table
+
+    Args:
+        df: DataFrame to preview
+        n_rows: Number of rows to show
+
+    Returns:
+        Dash component
+    """
+    if df is None or df.empty:
+        return html.Div()
+
+    return html.Div([
+        html.H6("Data Preview"),
+        dbc.Table.from_dataframe(
+            df.head(n_rows),
+            striped=True,
+            bordered=True,
+            hover=True,
+            responsive=True,
+            size='sm'
+        ),
+        html.P(
+            f"Showing first {min(n_rows, len(df))} of {len(df)} rows",
+            className='text-muted small'
+        )
+    ])
+
+
+def create_quality_report(report: dict):
+    """
+    Create a data quality report display
+
+    Args:
+        report: Quality report dictionary
+
+    Returns:
+        Dash component
+    """
+    if not report:
+        return html.Div()
+
+    # Build warning messages if needed
+    warnings = []
+    if report.get('sampled', False):
+        warnings.append(
+            dbc.Alert(
+                f"⚠️ Large dataset detected: Sampled from {report.get('original_points', 0):,} to {report.get('total_points', 0):,} rows (most recent data retained)",
+                color="warning",
+                className="mb-2"
+            )
+        )
+    if report.get('duplicates_removed', 0) > 0:
+        warnings.append(
+            dbc.Alert(
+                f"⚠️ Removed {report.get('duplicates_removed', 0):,} duplicate timestamps",
+                color="info",
+                className="mb-2"
+            )
+        )
+
+    return dbc.Card([
+        dbc.CardHeader(html.H6("Data Quality Report", className="mb-0")),
+        dbc.CardBody([
+            html.Div(warnings) if warnings else None,
+            dbc.Row([
+                dbc.Col([
+                    html.Small("Total Points", className='text-muted'),
+                    html.H6(f"{report.get('total_points', 0):,}")
+                ], md=3),
+                dbc.Col([
+                    html.Small("Date Range", className='text-muted'),
+                    html.H6(f"{report.get('date_range', {}).get('start', 'N/A')} to {report.get('date_range', {}).get('end', 'N/A')}",
+                           style={'fontSize': '0.9rem'})
+                ], md=3),
+                dbc.Col([
+                    html.Small("Frequency", className='text-muted'),
+                    html.H6(report.get('frequency', 'Unknown'))
+                ], md=2),
+                dbc.Col([
+                    html.Small("Missing Filled", className='text-muted'),
+                    html.H6(str(report.get('missing_filled', 0)))
+                ], md=2),
+                dbc.Col([
+                    html.Small("Outliers", className='text-muted'),
+                    html.H6(str(report.get('outliers_detected', 0)))
+                ], md=2),
+            ]),
+            html.Hr(),
+            dbc.Row([
+                dbc.Col([
+                    html.Small("Mean", className='text-muted'),
+                    html.P(f"{report.get('statistics', {}).get('mean', 0):.2f}")
+                ], md=3),
+                dbc.Col([
+                    html.Small("Std Dev", className='text-muted'),
+                    html.P(f"{report.get('statistics', {}).get('std', 0):.2f}")
+                ], md=3),
+                dbc.Col([
+                    html.Small("Min", className='text-muted'),
+                    html.P(f"{report.get('statistics', {}).get('min', 0):.2f}")
+                ], md=3),
+                dbc.Col([
+                    html.Small("Max", className='text-muted'),
+                    html.P(f"{report.get('statistics', {}).get('max', 0):.2f}")
+                ], md=3),
+            ])
+        ])
+    ], className='mt-3')