38086-vm/core/templates/core/index.html

{% extends 'base.html' %}
{% load static i18n %}

{% block title %}{% trans "Smart Dashboard" %} - {{ site_settings.business_name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4 align-items-center">
        <div class="col">
            <h1 class="h3 fw-bold mb-0">{% trans "Overview" %}</h1>
            <p class="text-muted small mb-0">{% trans "Welcome back! Here's what's happening with your business today." %}</p>
        </div>
        <div class="col-auto">
            <a href="{% url 'pos' %}" class="btn btn-primary shadow-sm">
                <i class="bi bi-plus-lg me-2"></i> {% trans "New Sale" %}
            </a>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="card glass-card border-0 p-3 stat-card h-100">
                <div class="d-flex align-items-center">
                    <div class="stat-icon bg-primary text-white bg-opacity-10 text-primary rounded-3 p-3 me-3">
                        <i class="bi bi-cash-stack fs-4 text-primary"></i>
                    </div>
                    <div>
                        <h6 class="text-muted small mb-1">{% trans "Total Revenue" %}</h6>
                        <h4 class="fw-bold mb-0">{{ site_settings.currency_symbol }}{{ total_sales_amount|floatformat:3 }}</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card glass-card border-0 p-3 stat-card h-100">
                <div class="d-flex align-items-center">
                    <div class="stat-icon bg-success bg-opacity-10 rounded-3 p-3 me-3">
                        <i class="bi bi-cart-check fs-4 text-success"></i>
                    </div>
                    <div>
                        <h6 class="text-muted small mb-1">{% trans "Total Sales" %}</h6>
                        <h4 class="fw-bold mb-0">{{ total_sales_count }}</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card glass-card border-0 p-3 stat-card h-100">
                <div class="d-flex align-items-center">
                    <div class="stat-icon bg-info bg-opacity-10 rounded-3 p-3 me-3">
                        <i class="bi bi-box-seam fs-4 text-info"></i>
                    </div>
                    <div>
                        <h6 class="text-muted small mb-1">{% trans "Total Products" %}</h6>
                        <h4 class="fw-bold mb-0">{{ total_products }}</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card glass-card border-0 p-3 stat-card h-100">
                <div class="d-flex align-items-center">
                    <div class="stat-icon bg-warning bg-opacity-10 rounded-3 p-3 me-3">
                        <i class="bi bi-people fs-4 text-warning"></i>
                    </div>
                    <div>
                        <h6 class="text-muted small mb-1">{% trans "Total Customers" %}</h6>
                        <h4 class="fw-bold mb-0">{{ total_customers }}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row 1: Monthly Trend & Category Distribution -->
    <div class="row g-4 mb-4">
        <!-- Monthly Sales Chart -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm p-4 h-100">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div>
                        <h5 class="fw-bold mb-0">{% trans "Sales Analytics" %}</h5>
                        <small class="text-muted">{% trans "Monthly revenue performance" %}</small>
                    </div>
                    <div class="btn-group btn-group-sm" role="group">
                         <button type="button" class="btn btn-outline-primary active" id="btnMonthly">{% trans "Monthly" %}</button>
                         <button type="button" class="btn btn-outline-primary" id="btnDaily">{% trans "Last 7 Days" %}</button>
                    </div>
                </div>
                <div style="position: relative; height: 300px; width: 100%;">
                    <canvas id="mainSalesChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Sales by Category -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm p-4 h-100">
                <h5 class="fw-bold mb-4">{% trans "Sales by Category" %}</h5>
                <div style="position: relative; height: 250px; width: 100%;">
                    <canvas id="categoryChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Row 2: Top Products & Payment Methods & Inventory -->
    <div class="row g-4 mb-4">
        <!-- Top Selling Products -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm p-4 h-100">
                <h5 class="fw-bold mb-4">{% trans "Top Selling Products" %}</h5>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>{% trans "Product" %}</th>
                                <th class="text-end">{% trans "Qty" %}</th>
                                <th class="text-end">{% trans "Revenue" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in top_products %}
                            <tr>
                                <td>
                                    <span class="fw-semibold text-dark">
                                        {% if LANGUAGE_CODE == 'ar' %}{{ item.product__name_ar }}{% else %}{{ item.product__name_en }}{% endif %}
                                    </span>
                                </td>
                                <td class="text-end">{{ item.total_qty|floatformat:0 }}</td>
                                <td class="text-end fw-bold text-success">{{ site_settings.currency_symbol }}{{ item.total_rev|floatformat:1 }}</td>
                            </tr>
                            {% empty %}
                            <tr><td colspan="3" class="text-center text-muted">{% trans "No sales data yet." %}</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Payment Methods -->
        <div class="col-lg-4">
             <div class="card border-0 shadow-sm p-4 h-100">
                <h5 class="fw-bold mb-4">{% trans "Payment Methods" %}</h5>
                <div style="position: relative; height: 250px; width: 100%;">
                    <canvas id="paymentChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Inventory Alerts -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm p-4 h-100">
                <h5 class="fw-bold mb-4">{% trans "Low Stock Alerts" %}</h5>
                {% if low_stock_products %}
                    <ul class="list-group list-group-flush">
                        {% for product in low_stock_products %}
                        <li class="list-group-item px-0 border-0 d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <div class="bg-light rounded p-2 me-3">
                                    <i class="bi bi-box"></i>
                                </div>
                                <div>
                                    <p class="mb-0 fw-semibold">
                                        {% if LANGUAGE_CODE == 'ar' %}{{ product.name_ar }}{% else %}{{ product.name_en }}{% endif %}
                                    </p>
                                    <small class="text-muted">
                                        {% if LANGUAGE_CODE == 'ar' %}{{ product.category.name_ar }}{% else %}{{ product.category.name_en }}{% endif %}
                                    </small>
                                </div>
                            </div>
                            <span class="badge bg-danger rounded-pill">{{ product.stock_quantity }}</span>
                        </li>
                        {% endfor %}
                        {% if low_stock_count > 5 %}
                        <li class="list-group-item text-center border-0 pt-3">
                            <a href="{% url 'inventory' %}" class="small text-muted fw-bold">
                                + {{ low_stock_count|add:"-5" }} {% trans "more items..." %}
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                {% else %}
                    <div class="text-center py-5">
                        <i class="bi bi-check-circle text-success display-4"></i>
                        <p class="mt-3 text-muted">{% trans "All stock levels are healthy!" %}</p>
                    </div>
                {% endif %}

                {% if expired_count > 0 %}
                    <div class="alert alert-danger border-0 rounded-4 d-flex align-items-center mt-3 mb-0">
                        <i class="bi bi-exclamation-triangle-fill fs-4 me-3"></i>
                        <div>
                            <p class="mb-0 fw-bold">{{ expired_count }} {% trans "Items have expired!" %}</p>
                            <a href="{% url 'inventory' %}#expired-list" class="alert-link small">{% trans "View expired stock" %}</a>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Recent Transactions -->
    <div class="row g-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm p-4">
                <h5 class="fw-bold mb-4">{% trans "Recent Sales" %}</h5>
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>{% trans "Sale ID" %}</th>
                                <th>{% trans "Customer" %}</th>
                                <th>{% trans "Date" %}</th>
                                <th>{% trans "Total Amount" %}</th>
                                <th>{% trans "User" %}</th>
                                <th>{% trans "Status" %}</th>
                                <th>{% trans "Action" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for sale in recent_sales %}
                            <tr>
                                <td class="fw-bold">#{{ sale.id }}</td>
                                <td>{{ sale.customer.name|default:"Guest" }}</td>
                                <td>{{ sale.created_at|date:"M d, Y H:i" }}</td>
                                <td class="fw-bold">{{ site_settings.currency_symbol }}{{ sale.total_amount|floatformat:3 }}</td>
                                <td>
                                    <span class="text-muted small">
                                        <i class="bi bi-person me-1"></i>{{ sale.created_by.username|default:"System" }}
                                    </span>
                                </td>
                                <td><span class="badge bg-success bg-opacity-10 text-success">{% trans "Completed" %}</span></td>
                                <td>
                                    <a href="{% url 'invoice_detail' sale.id %}" class="btn btn-sm btn-light">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="7" class="text-center py-4 text-muted">{% trans "No recent sales found." %}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // --- Data from Django ---
    const monthlyLabels = {{ monthly_labels|safe }};
    const monthlyData = {{ monthly_data|safe }};
    const dailyLabels = {{ chart_labels|safe }};
    const dailyData = {{ chart_data|safe }};
    
    const categoryLabels = {{ category_labels|safe }};
    const categoryData = {{ category_data|safe }};
    
    const paymentLabels = {{ payment_labels|safe }};
    const paymentData = {{ payment_data|safe }};
    const currency = "{{ site_settings.currency_symbol }}";

    // --- Main Sales Chart ---
    const ctxMain = document.getElementById('mainSalesChart').getContext('2d');
    let mainChart = new Chart(ctxMain, {
        type: 'bar', // Default to Monthly Bar Chart
        data: {
            labels: monthlyLabels,
            datasets: [{
                label: '{% trans "Revenue" %} (' + currency + ')',
                data: monthlyData,
                backgroundColor: '#2E5BFF',
                borderRadius: 4,
                barPercentage: 0.6,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                y: { beginAtZero: true, grid: { borderDash: [2, 2] } },
                x: { grid: { display: false } }
            }
        }
    });

    // Toggle Monthly / Daily
    document.getElementById('btnMonthly').addEventListener('click', function() {
        mainChart.config.type = 'bar';
        mainChart.data.labels = monthlyLabels;
        mainChart.data.datasets[0].data = monthlyData;
        mainChart.update();
        this.classList.add('active');
        document.getElementById('btnDaily').classList.remove('active');
    });

    document.getElementById('btnDaily').addEventListener('click', function() {
        mainChart.config.type = 'line';
        mainChart.data.labels = dailyLabels;
        mainChart.data.datasets[0].data = dailyData;
        mainChart.data.datasets[0].borderColor = '#2E5BFF';
        mainChart.data.datasets[0].backgroundColor = 'rgba(46, 91, 255, 0.1)';
        mainChart.data.datasets[0].fill = true;
        mainChart.data.datasets[0].tension = 0.4;
        mainChart.update();
        this.classList.add('active');
        document.getElementById('btnMonthly').classList.remove('active');
    });

    // --- Category Chart (Doughnut) ---
    if (categoryData.length > 0) {
        new Chart(document.getElementById('categoryChart'), {
            type: 'doughnut',
            data: {
                labels: categoryLabels,
                datasets: [{
                    data: categoryData,
                    backgroundColor: ['#2E5BFF', '#00C9A7', '#FFC107', '#886CFF', '#FF5252', '#00D1FF'],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '70%',
                plugins: {
                    legend: { position: 'right', labels: { boxWidth: 12 } }
                }
            }
        });
    } else {
         // Placeholder if no data
         document.getElementById('categoryChart').parentNode.innerHTML = '<div class="text-center text-muted py-5">{% trans "No category data available" %}</div>';
    }

    // --- Payment Method Chart (Pie) ---
    if (paymentData.length > 0) {
        new Chart(document.getElementById('paymentChart'), {
            type: 'pie',
            data: {
                labels: paymentLabels,
                datasets: [{
                    data: paymentData,
                    backgroundColor: ['#00C9A7', '#2E5BFF', '#FFC107', '#886CFF'],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom', labels: { boxWidth: 12 } }
                }
            }
        });
    } else {
        document.getElementById('paymentChart').parentNode.innerHTML = '<div class="text-center text-muted py-5">{% trans "No payment data available" %}</div>';
    }
</script>
{% endblock %}