Dashboard Home - Django Template and Frontend Implementation

[Collert]

Dashboard Home - Frontend Template and UI Implementation

Overview

Implement the admin dashboard home template with analytics cards, interactive charts, and real-time updates. The template will render analytics data provided by the Django view context and include JavaScript for interactivity and auto-refresh functionality.

Template Structure

Django Template: admin/templates/admin/dashboard/home.html

• Extend base admin template
• Responsive grid layout for analytics cards
• Chart containers with proper sizing
• Real-time update mechanisms
• Loading states and error handling

Template Context Usage

The template will consume context data from AdminDashboardView:

{% load dashboard_extras %}

<div class="dashboard-container">
    <!-- Header Section -->
    <div class="dashboard-header">
        <h1>Dashboard - {{ dashboard_date|date:"F j, Y" }}</h1>
        <p class="last-updated">Last updated: {{ last_updated|date:"g:i A" }}</p>
    </div>

    <!-- Analytics Cards Grid -->
    <div class="dashboard-grid">
        <div class="analytics-card sales-card">
            <h3>Today's Sales</h3>
            <div class="metric-value">${{ sales_data.total_revenue|floatformat:2 }}</div>
            <div class="metric-details">
                <span>{{ sales_data.order_count }} orders</span>
                <span class="trend {{ sales_data.trend_indicator.class }}">
                    {{ sales_data.trend_indicator.text }}
                </span>
            </div>
        </div>
        
        <div class="analytics-card customers-card">
            <h3>Customer Flow</h3>
            <div class="metric-value">{{ customer_data.actual_count }}</div>
            <div class="metric-details">
                <span>Predicted remaining: {{ customer_data.predicted_remaining }}</span>
            </div>
        </div>
        
        <!-- More cards... -->
    </div>

    <!-- Charts Section -->
    <div class="charts-container">
        <div class="chart-card">
            <canvas id="salesTrendChart"></canvas>
        </div>
        <div class="chart-card">
            <canvas id="customerFlowChart"></canvas>
        </div>
    </div>
</div>

JavaScript Implementation

Chart Integration

• Chart.js for data visualizations
• Convert Django context data to JavaScript format
• Real-time chart updates via AJAX
• Responsive chart configurations

// charts.js
class DashboardCharts {
    constructor() {
        this.initializeCharts();
        this.setupAutoRefresh();
    }

    initializeCharts() {
        // Sales Trend Chart
        this.salesChart = new Chart(
            document.getElementById('salesTrendChart'),
            {
                type: 'line',
                data: {{ chart_data.sales_trend|safe }},
                options: this.getResponsiveOptions()
            }
        );

        // Customer Flow Chart
        this.customerChart = new Chart(
            document.getElementById('customerFlowChart'),
            {
                type: 'bar',
                data: {{ chart_data.customer_flow|safe }},
                options: this.getResponsiveOptions()
            }
        );
    }

    setupAutoRefresh() {
        setInterval(() => {
            this.refreshDashboardData();
        }, 300000); // 5 minutes
    }

    async refreshDashboardData() {
        try {
            const response = await fetch(window.location.href, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            const data = await response.json();
            this.updateChartsAndCards(data);
        } catch (error) {
            console.error('Dashboard refresh failed:', error);
            this.showRefreshError();
        }
    }
}

AJAX Refresh Functionality

• Auto-refresh every 5 minutes
• Manual refresh button
• Graceful error handling
• Loading indicators
• Optimistic updates

Real-time Features

• WebSocket integration (if available) for instant order updates
• Progressive enhancement - works without JavaScript
• Skeleton loading states during data fetching
• Toast notifications for important alerts

CSS Styling

Responsive Grid Layout

.dashboard-container {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.analytics-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;

    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
}

.charts-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .charts-container {
        grid-template-columns: 1fr;
    }
}

Theme Integration

• Match existing Pavilion admin theme
• Consistent color scheme and typography
• Dark mode support (if applicable)
• Print-friendly styles

Django Template Tags

Custom Template Tags: admin/templatetags/dashboard_extras.py

@register.filter
def format_currency(value):
    return f"${value:,.2f}"

@register.filter
def trend_indicator(comparison):
    if comparison > 0:
        return {"class": "positive", "text": f"+{comparison:.1%}"}
    elif comparison < 0:
        return {"class": "negative", "text": f"{comparison:.1%}"}
    return {"class": "neutral", "text": "0%"}

@register.inclusion_tag('admin/dashboard/analytics_card.html')
def analytics_card(title, value, subtitle=None, trend=None):
    return {
        'title': title,
        'value': value,
        'subtitle': subtitle,
        'trend': trend
    }

Implementation Tasks

• Create dashboard home template structure
• Implement responsive CSS grid layout
• Integrate Chart.js for data visualizations
• Create custom Django template tags for dashboard
• Implement AJAX auto-refresh functionality
• Add loading states and error handling
• Create responsive design for mobile/tablet
• Add accessibility features (ARIA labels, keyboard nav)
• Implement WebSocket connections for real-time updates
• Create print-friendly styles
• Write JavaScript unit tests
• Cross-browser compatibility testing
• Performance optimization (lazy loading, etc.)

Static Files Organization

static/
├── admin/
│   ├── css/
│   │   ├── dashboard.css
│   │   └── dashboard-responsive.css
│   ├── js/
│   │   ├── dashboard-charts.js
│   │   ├── dashboard-refresh.js
│   │   └── dashboard-utils.js
│   └── images/
│       └── dashboard-icons/

Dependencies

• Backend Django view providing analytics context
• Chart.js library for data visualizations
• Django template system and custom tags
• Existing admin CSS framework
• WebSocket setup for real-time updates (optional)

Success Criteria

• ✅ Dashboard template renders correctly with analytics data
• ✅ All charts display interactive visualizations
• ✅ Auto-refresh updates data without page reload
• ✅ Responsive design works on all screen sizes
• ✅ Page loads within 2 seconds on desktop
• ✅ Accessibility standards (WCAG 2.1 AA) are met
• ✅ Cross-browser compatibility (Chrome, Firefox, Safari, Edge)
• ✅ JavaScript works with progressive enhancement
• ✅ Print styles produce readable reports

Related Issues

• Depends on: Backend Django Views and Analytics for Dashboard Home
• Part of: Implement Custom Admin Interface for Restaurant Management (Implement Custom Admin Interface #29)