# Adaptive Dashboard Template

[[LLM: Interactive dashboard that adapts to visualization needs:

- Sync Health → Three-way system alignment metrics
- Sprint Dashboard → Real-time sprint progress
- Team Dashboard → Collaboration and productivity
- Reconciliation → Planning vs execution variance
- Executive View → High-level portfolio metrics
  ]]

<!DOCTYPE html>
<html>
<head>
    <title>{{dashboard_title}}</title>
    <style>
        [[LLM: Generate appropriate CSS based on dashboard type:
        - Card-based layout for metrics
        - Grid system for multiple views
        - Responsive design
        - Dark/light theme support
        ]]
        {{dashboard_styles}}
    </style>
</head>
<body>
    <div class="dashboard-container">
        <header class="dashboard-header">
            <h1>{{dashboard_title}}</h1>
            <div class="dashboard-meta">
                <span>Last Updated: {{timestamp}}</span>
                <span>{{refresh_indicator}}</span>
            </div>
        </header>

        <div class="dashboard-controls">
            [[LLM: Generate appropriate filters:
            - Date range selector
            - Team/Sprint filter
            - Metric toggles
            - View options
            ]]
            {{control_elements}}
        </div>

        <div class="dashboard-grid">
            [[LLM: Based on dashboard type, generate widgets:

            SYNC HEALTH:
            - System Alignment Score (Git/BMAD/JIRA)
            - Divergence Indicators
            - Sync Action Queue
            - Trend Charts

            SPRINT DASHBOARD:
            - Burndown Chart
            - Velocity Gauge
            - Story Progress
            - Blocker List

            TEAM DASHBOARD:
            - Member Activity
            - Collaboration Matrix
            - Productivity Trends
            - Workload Balance

            RECONCILIATION:
            - Variance Heatmap
            - Timeline Comparison
            - Accuracy Metrics
            - Learning Insights

            EXECUTIVE:
            - Portfolio Health
            - Resource Utilization
            - Risk Matrix
            - Key Metrics
            ]]

            <div class="widget" id="primary-metric">
                {{primary_metric_widget}}
            </div>

            <div class="widget" id="trend-chart">
                {{trend_chart_widget}}
            </div>

            <div class="widget" id="detail-grid">
                {{detail_grid_widget}}
            </div>

            <div class="widget" id="action-items">
                {{action_items_widget}}
            </div>
        </div>

        <div class="dashboard-footer">
            <div class="export-options">
                {{export_buttons}}
            </div>
            <div class="dashboard-notes">
                {{contextual_notes}}
            </div>
        </div>
    </div>

    <script>
        [[LLM: Generate interactive JavaScript:
        - Data refresh logic
        - Filter interactions
        - Chart updates
        - Export functionality
        ]]
        {{dashboard_scripts}}
    </script>

</body>
</html>

<!--
Alternative Markdown Format for Non-HTML Contexts:

# {{dashboard_title}}

## 📊 Key Metrics
{{key_metrics_summary}}

## 📈 Trends
{{trend_analysis}}

## 🎯 Focus Areas
{{focus_items}}

## ⚡ Actions Required
{{action_list}}

Generated: {{timestamp}}
-->
