# easy-invoice/2.1.13/templates/dashboard-page.php

Easy Invoice – Invoice Generator, PDF Quotes & Payments, version 2.1.13. 376 lines.

- Page: https://pluginprobe.com/plugins/easy-invoice/2.1.13/code/templates/dashboard-page.php
- Raw: https://pluginprobe.com/plugins/easy-invoice/2.1.13/raw/templates/dashboard-page.php
- Modified: 2025-08-16T13:51:26+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/easy-invoice/2.1.13/code/templates/dashboard-page.php#L10-L20`.

```php
<?php
// Exit if accessed directly
if (!defined('ABSPATH')) {
    exit;
}


?>

<div class="p-8">
    <!-- Page Header -->
    <div class="bg-white border-b border-gray-200 px-6 py-5" style="margin-left: -2rem; margin-top: -2rem; padding-left:2rem; padding-right:2rem; margin-right: -2rem;">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Dashboard</h1>
                <p class="mt-1 text-sm text-gray-500">Overview of your invoice management system</p>
            </div>
        </div>
    </div>
    
    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8 mt-8">
        <div class="bg-white rounded-lg shadow p-6 transition-transform duration-300 hover:shadow-md hover:-translate-y-1">
            <div class="flex items-center">
                <div class="rounded-full bg-indigo-100 p-3 mr-4">
                    <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                </div>
                <div>
            <h3 class="text-sm font-medium text-gray-500">Total Invoices</h3>
                    <p class="mt-1 text-2xl font-bold text-gray-900"><?php echo esc_html($total_invoices); ?></p>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-6 transition-transform duration-300 hover:shadow-md hover:-translate-y-1">
            <div class="flex items-center">
                <div class="rounded-full bg-green-100 p-3 mr-4">
                    <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <div>
            <h3 class="text-sm font-medium text-gray-500">Total Revenue</h3>
                    <?php if (is_array($total_revenue) && !empty($total_revenue)): ?>
                        <div class="mt-1">
                            <?php 
                            $currency_count = count($total_revenue);
                            foreach ($total_revenue as $currency => $data): 
                                $is_last = --$currency_count === 0;
                                $amount = isset($data['amount']) && is_numeric($data['amount']) ? $data['amount'] : 0;
                                $symbol = isset($data['symbol']) ? $data['symbol'] : '';
                            ?>
                                <div class="<?php echo $currency_count > 0 ? 'text-sm' : 'text-lg'; ?> font-bold text-gray-900 <?php echo !$is_last ? 'mb-1' : ''; ?>">
                                    <?php echo $symbol . number_format($amount, 2); ?>
                                    <span class="text-xs font-normal text-gray-500"><?php echo esc_html(strtoupper((string)($currency ?? 'USD'))); ?></span>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php else: ?>
                        <p class="mt-1 text-lg font-bold text-gray-900">$0.00</p>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-6 transition-transform duration-300 hover:shadow-md hover:-translate-y-1">
            <div class="flex items-center">
                <div class="rounded-full bg-yellow-100 p-3 mr-4">
                    <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <div>
            <h3 class="text-sm font-medium text-gray-500">Unpaid Invoices</h3>
                    <p class="mt-1 text-2xl font-bold text-yellow-600"><?php echo esc_html($unpaid_invoices); ?></p>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-6 transition-transform duration-300 hover:shadow-md hover:-translate-y-1">
            <div class="flex items-center">
                <div class="rounded-full bg-red-100 p-3 mr-4">
                    <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                    </svg>
                </div>
                <div>
            <h3 class="text-sm font-medium text-gray-500">Overdue Invoices</h3>
                    <p class="mt-1 text-2xl font-bold text-red-600"><?php echo esc_html($overdue_invoices); ?></p>
                </div>
            </div>
        </div>
    </div>

    <!-- Client Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <div class="bg-white rounded-lg shadow p-6 transition-transform duration-300 hover:shadow-md hover:-translate-y-1">
            <div class="flex items-center">
                <div class="rounded-full bg-blue-100 p-3 mr-4">
                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M23 21V19C23 18.1137 22.6485 17.2628 22.0237 16.6425C21.3989 16.0221 20.5471 15.6722 19.66 15.6722C18.7729 15.6722 17.9211 16.0221 17.2963 16.6425C16.6715 17.2628 16.32 18.1137 16.32 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M16.32 11.6722C18.36 11.6722 20 10.0322 20 7.99219C20 5.95219 18.36 4.31219 16.32 4.31219" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
                <div>
            <h3 class="text-sm font-medium text-gray-500">Total Clients</h3>
                    <p class="mt-1 text-2xl font-bold text-gray-900"><?php echo esc_html($total_clients); ?></p>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-6 transition-transform duration-300 hover:shadow-md hover:-translate-y-1">
            <div class="flex items-center">
                <div class="rounded-full bg-indigo-100 p-3 mr-4">
                    <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <div>
            <h3 class="text-sm font-medium text-gray-500">Active Clients</h3>
                    <p class="mt-1 text-2xl font-bold text-indigo-600"><?php echo esc_html($active_clients); ?></p>
                </div>
            </div>
        </div>
    </div>

    <!-- Monthly Revenue Chart -->
    <div class="bg-white rounded-lg shadow p-6 mb-8">
        <h2 class="text-lg font-medium text-gray-900 mb-4">Monthly Revenue</h2>
        <div style="height: 300px; position: relative;">
            <canvas id="revenue-chart" style="width: 100% !important; height: 100% !important;"></canvas>
        </div>
    </div>

    <!-- Recent Invoices -->
    <div class="bg-white rounded-lg shadow">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Recent Invoices</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Invoice #</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Due Date</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <?php if (!empty($recent_invoices)) : ?>
                        <?php foreach ($recent_invoices as $invoice): 
                            $statusClass = [
                                'paid' => 'bg-green-100 text-green-800',
                                'unpaid' => 'bg-yellow-100 text-yellow-800',
                                'overdue' => 'bg-red-100 text-red-800',
                                'draft' => 'bg-gray-100 text-gray-800'
                            ][$invoice->getStatus()] ?? 'bg-gray-100 text-gray-800';
                            
                            $invoiceId = $invoice->getId();
                            $invoiceNumber = $invoice->getNumber() ?: ('INV-' . $invoiceId);
                            $invoiceTotal = $invoice->getTotal();
                            $clientName = $invoice->getCustomerName() ?: 'Client';
                            $dueDate = $invoice->getDueDate() ?: date('Y-m-d');
                            $status = ucfirst($invoice->getStatus());
                        ?>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"><?php echo esc_html($invoiceNumber); ?></td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php echo esc_html($clientName); ?></td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php 
                                // Use InvoiceFormatter for proper currency formatting
                                $formatter = new \EasyInvoice\Helpers\InvoiceFormatter();
                                echo esc_html($formatter->format($invoiceTotal)); 
                            ?></td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full <?php echo esc_attr($statusClass); ?>">
                                    <?php echo esc_html($status); ?>
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php echo esc_html($dueDate); ?></td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <a href="<?php echo admin_url('admin.php?page=easy-invoice-invoices&view=edit&invoice_id=' . $invoiceId); ?>" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>
                                <a href="<?php echo admin_url('admin.php?page=easy-invoice-invoices&view=view&invoice_id=' . $invoiceId); ?>" class="text-indigo-600 hover:text-indigo-900">View</a>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="6" class="px-6 py-4 text-center text-sm text-gray-500">No invoices found</td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Chart.js for Revenue Chart -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
        // Add fallback to CDN if local file fails
        if (typeof Chart === "undefined") {
            var script = document.createElement("script");
            script.src = "https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js";
            script.onload = function() {
                // Chart.js loaded from CDN
            };
            script.onerror = function() {
                // Failed to load Chart.js from CDN
            };
            document.head.appendChild(script);
        }
        
        // Initialize dashboard revenue chart
        document.addEventListener("DOMContentLoaded", function() {
            const chartElement = document.getElementById("revenue-chart");
            
            if (!chartElement) {
                return;
            }
            
            // Check if Chart.js is available
            if (typeof Chart === "undefined") {
                setTimeout(function() {
                    initializeDashboardRevenueChart();
                }, 500);
                return;
            }
            
            initializeDashboardRevenueChart();
        });
        
        function initializeDashboardRevenueChart() {
            const chartElement = document.getElementById("revenue-chart");
            
            if (!chartElement) {
                return;
            }
            
            // Destroy existing chart if it exists
            if (window.dashboardRevenueChart) {
                window.dashboardRevenueChart.destroy();
            }
            
            const ctx = chartElement.getContext("2d");
            if (!ctx) {
                return;
            }
            
            // Get data from PHP
            const monthlyRevenueData = <?php echo json_encode($monthly_revenue); ?>;
            const monthLabels = Object.keys(monthlyRevenueData);
            
            // Check if we have real data
            let hasRealData = false;
            if (monthlyRevenueData && typeof monthlyRevenueData === "object") {
                for (let month in monthlyRevenueData) {
                    if (monthlyRevenueData[month] && typeof monthlyRevenueData[month] === "object") {
                        for (let currency in monthlyRevenueData[month]) {
                            if (monthlyRevenueData[month][currency] && 
                                monthlyRevenueData[month][currency].amount && 
                                monthlyRevenueData[month][currency].amount > 0) {
                                hasRealData = true;
                                break;
                            }
                        }
                    }
                }
            }
            
            if (hasRealData) {
                // Create datasets for each currency
                const datasets = [];
                const colors = [
                    "rgba(79, 70, 229, 0.8)",
                    "rgba(34, 197, 94, 0.8)",
                    "rgba(239, 68, 68, 0.8)",
                    "rgba(245, 158, 11, 0.8)",
                    "rgba(139, 92, 246, 0.8)"
                ];
                
                let colorIndex = 0;
                for (let currency in monthlyRevenueData) {
                    if (monthlyRevenueData[currency] && monthlyRevenueData[currency].amount > 0) {
                        datasets.push({
                            label: currency,
                            data: [monthlyRevenueData[currency].amount],
                            backgroundColor: colors[colorIndex % colors.length],
                            borderColor: colors[colorIndex % colors.length].replace("0.8", "1"),
                            borderWidth: 2
                        });
                        colorIndex++;
                    }
                }
                
                // Create chart with real data
                window.dashboardRevenueChart = new Chart(ctx, {
                    type: "bar",
        data: {
            labels: monthLabels,
                        datasets: datasets
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return value;
                                    }
                                }
                            }
                        },
                        plugins: {
                            legend: {
                                display: true,
                                position: "top"
                            }
                        }
                    }
                });
            } else {
                // Create sample chart
                const sampleData = {
                    "Jan 2025": { USD: { amount: 1200, symbol: "$" } },
                    "Feb 2025": { USD: { amount: 1800, symbol: "$" } },
                    "Mar 2025": { USD: { amount: 1500, symbol: "$" } },
                    "Apr 2025": { USD: { amount: 2200, symbol: "$" } },
                    "May 2025": { USD: { amount: 1900, symbol: "$" } },
                    "Jun 2025": { USD: { amount: 2500, symbol: "$" } }
                };
                
                const sampleLabels = Object.keys(sampleData);
                const sampleValues = sampleLabels.map(month => sampleData[month].USD.amount);
                
                window.dashboardRevenueChart = new Chart(ctx, {
                    type: "bar",
                    data: {
                        labels: sampleLabels,
            datasets: [{
                            label: "Sample Revenue",
                            data: sampleValues,
                            backgroundColor: "rgba(79, 70, 229, 0.8)",
                            borderColor: "rgba(79, 70, 229, 1)",
                            borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                                        return value;
                        }
                    }
                }
            },
            plugins: {
                            legend: {
                                display: true,
                                position: "top"
                }
            }
        }
    });
            }
        }
    </script>
</script>
```