| 1 |
<?php |
| 2 |
// Exit if accessed directly |
| 3 |
if (!defined('ABSPATH')) { |
| 4 |
exit; |
| 5 |
} |
| 6 |
|
| 7 |
use EasyInvoice\Constants\PagesSlugs; |
| 8 |
|
| 9 |
$monthly_revenue = isset($monthly_revenue) && is_array($monthly_revenue) ? $monthly_revenue : array(); |
| 10 |
$easy_invoice_has_chart_data = false; |
| 11 |
foreach ($monthly_revenue as $currencies) { |
| 12 |
if (! is_array($currencies)) { |
| 13 |
continue; |
| 14 |
} |
| 15 |
foreach ($currencies as $row) { |
| 16 |
if (isset($row['amount']) && is_numeric($row['amount']) && (float) $row['amount'] > 0) { |
| 17 |
$easy_invoice_has_chart_data = true; |
| 18 |
break 2; |
| 19 |
} |
| 20 |
} |
| 21 |
} |
| 22 |
|
| 23 |
if ($easy_invoice_has_chart_data) { |
| 24 |
wp_enqueue_script( |
| 25 |
'easy-invoice-chart-vendor', |
| 26 |
EASY_INVOICE_PLUGIN_URL . 'assets/js/vendors/chart.min.js', |
| 27 |
array(), |
| 28 |
EASY_INVOICE_VERSION, |
| 29 |
true |
| 30 |
); |
| 31 |
wp_enqueue_script( |
| 32 |
'easy-invoice-dashboard-chart', |
| 33 |
EASY_INVOICE_PLUGIN_URL . 'assets/js/dashboard-chart.js', |
| 34 |
array('easy-invoice-chart-vendor'), |
| 35 |
EASY_INVOICE_VERSION, |
| 36 |
true |
| 37 |
); |
| 38 |
wp_localize_script( |
| 39 |
'easy-invoice-dashboard-chart', |
| 40 |
'easyInvoiceDashboard', |
| 41 |
array( |
| 42 |
'monthlyRevenue' => $monthly_revenue, |
| 43 |
'hasData' => true, |
| 44 |
) |
| 45 |
); |
| 46 |
} |
| 47 |
|
| 48 |
$invoices_list_url = admin_url('admin.php?page=' . PagesSlugs::ALL_INVOICES); |
| 49 |
?> |
| 50 |
|
| 51 |
<div class="p-8"> |
| 52 |
<div class="ei-app-page-header bg-white border-b border-gray-200 px-6 easy-invoice-admin-page-header"> |
| 53 |
<div class="flex items-center justify-between"> |
| 54 |
<div> |
| 55 |
<h1 class="text-2xl font-bold text-gray-900"><?php esc_html_e( 'Dashboard', 'easy-invoice' ); ?></h1> |
| 56 |
<p class="mt-1 text-sm text-gray-500"><?php esc_html_e( 'Overview of your invoice management system', 'easy-invoice' ); ?></p> |
| 57 |
</div> |
| 58 |
</div> |
| 59 |
</div> |
| 60 |
|
| 61 |
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8 mt-8"> |
| 62 |
<div class="bg-white rounded-lg shadow p-6 transition-transform duration-300 hover:shadow-md hover:-translate-y-1"> |
| 63 |
<div class="flex items-center"> |
| 64 |
<div class="rounded-full bg-indigo-100 p-3 mr-4"> |
| 65 |
<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"> |
| 66 |
<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> |
| 67 |
</svg> |
| 68 |
</div> |
| 69 |
<div> |
| 70 |
<h3 class="text-sm font-medium text-gray-500"><?php esc_html_e( 'Total Invoices', 'easy-invoice' ); ?></h3> |
| 71 |
<p class="mt-1 text-2xl font-bold text-gray-900"><?php echo esc_html($total_invoices); ?></p> |
| 72 |
</div> |
| 73 |
</div> |
| 74 |
</div> |
| 75 |
<div class="bg-white rounded-lg shadow p-6 transition-transform duration-300 hover:shadow-md hover:-translate-y-1"> |
| 76 |
<div class="flex items-center"> |
| 77 |
<div class="rounded-full bg-green-100 p-3 mr-4"> |
| 78 |
<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"> |
| 79 |
<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> |
| 80 |
</svg> |
| 81 |
</div> |
| 82 |
<div> |
| 83 |
<h3 class="text-sm font-medium text-gray-500"><?php esc_html_e( 'Total Revenue', 'easy-invoice' ); ?></h3> |
| 84 |
<?php if (is_array($total_revenue) && !empty($total_revenue)): ?> |
| 85 |
<div class="mt-1"> |
| 86 |
<?php |
| 87 |
$currency_count = count($total_revenue); |
| 88 |
foreach ($total_revenue as $currency => $data): |
| 89 |
$is_last = --$currency_count === 0; |
| 90 |
$amount = isset($data['amount']) && is_numeric($data['amount']) ? $data['amount'] : 0; |
| 91 |
$symbol = isset($data['symbol']) ? $data['symbol'] : ''; |
| 92 |
?> |
| 93 |
<div class="<?php echo $currency_count > 0 ? 'text-sm' : 'text-lg'; ?> font-bold text-gray-900 <?php echo !$is_last ? 'mb-1' : ''; ?>"> |
| 94 |
<?php echo $symbol . number_format($amount, 2); ?> |
| 95 |
<span class="text-xs font-normal text-gray-500"><?php echo esc_html(strtoupper((string)($currency ?? 'USD'))); ?></span> |
| 96 |
</div> |
| 97 |
<?php endforeach; ?> |
| 98 |
</div> |
| 99 |
<?php else: ?> |
| 100 |
<p class="mt-1 text-lg font-bold text-gray-500"><?php esc_html_e( 'No revenue recorded', 'easy-invoice' ); ?></p> |
| 101 |
<?php endif; ?> |
| 102 |
</div> |
| 103 |
</div> |
| 104 |
</div> |
| 105 |
<div class="bg-white rounded-lg shadow p-6 transition-transform duration-300 hover:shadow-md hover:-translate-y-1"> |
| 106 |
<div class="flex items-center"> |
| 107 |
<div class="rounded-full bg-yellow-100 p-3 mr-4"> |
| 108 |
<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"> |
| 109 |
<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> |
| 110 |
</svg> |
| 111 |
</div> |
| 112 |
<div> |
| 113 |
<h3 class="text-sm font-medium text-gray-500"><?php esc_html_e( 'Unpaid Invoices', 'easy-invoice' ); ?></h3> |
| 114 |
<p class="mt-1 text-2xl font-bold text-yellow-600"><?php echo esc_html($unpaid_invoices); ?></p> |
| 115 |
</div> |
| 116 |
</div> |
| 117 |
</div> |
| 118 |
<div class="bg-white rounded-lg shadow p-6 transition-transform duration-300 hover:shadow-md hover:-translate-y-1"> |
| 119 |
<div class="flex items-center"> |
| 120 |
<div class="rounded-full bg-red-100 p-3 mr-4"> |
| 121 |
<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"> |
| 122 |
<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> |
| 123 |
</svg> |
| 124 |
</div> |
| 125 |
<div> |
| 126 |
<h3 class="text-sm font-medium text-gray-500"><?php esc_html_e( 'Overdue Invoices', 'easy-invoice' ); ?></h3> |
| 127 |
<p class="mt-1 text-2xl font-bold text-red-600"><?php echo esc_html($overdue_invoices); ?></p> |
| 128 |
</div> |
| 129 |
</div> |
| 130 |
</div> |
| 131 |
</div> |
| 132 |
|
| 133 |
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
| 134 |
<div class="bg-white rounded-lg shadow p-6 transition-transform duration-300 hover:shadow-md hover:-translate-y-1"> |
| 135 |
<div class="flex items-center"> |
| 136 |
<div class="rounded-full bg-blue-100 p-3 mr-4"> |
| 137 |
<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"> |
| 138 |
<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"/> |
| 139 |
<circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| 140 |
<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"/> |
| 141 |
<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"/> |
| 142 |
</svg> |
| 143 |
</div> |
| 144 |
<div> |
| 145 |
<h3 class="text-sm font-medium text-gray-500"><?php esc_html_e( 'Total Clients', 'easy-invoice' ); ?></h3> |
| 146 |
<p class="mt-1 text-2xl font-bold text-gray-900"><?php echo esc_html($total_clients); ?></p> |
| 147 |
</div> |
| 148 |
</div> |
| 149 |
</div> |
| 150 |
<div class="bg-white rounded-lg shadow p-6 transition-transform duration-300 hover:shadow-md hover:-translate-y-1"> |
| 151 |
<div class="flex items-center"> |
| 152 |
<div class="rounded-full bg-indigo-100 p-3 mr-4"> |
| 153 |
<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"> |
| 154 |
<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> |
| 155 |
</svg> |
| 156 |
</div> |
| 157 |
<div> |
| 158 |
<h3 class="text-sm font-medium text-gray-500"><?php esc_html_e( 'Active Clients', 'easy-invoice' ); ?></h3> |
| 159 |
<p class="mt-1 text-2xl font-bold text-indigo-600"><?php echo esc_html($active_clients); ?></p> |
| 160 |
</div> |
| 161 |
</div> |
| 162 |
</div> |
| 163 |
</div> |
| 164 |
|
| 165 |
<div class="bg-white rounded-lg shadow p-6 mb-8 border border-gray-100"> |
| 166 |
<h2 class="text-lg font-medium text-gray-900 mb-1"><?php esc_html_e( 'Monthly Revenue', 'easy-invoice' ); ?></h2> |
| 167 |
<?php if ($easy_invoice_has_chart_data) : ?> |
| 168 |
<p class="text-sm text-gray-500 mb-4"><?php esc_html_e( 'Paid amounts recorded over the last twelve months, by currency.', 'easy-invoice' ); ?></p> |
| 169 |
<div class="easy-invoice-chart-wrap"> |
| 170 |
<canvas id="revenue-chart" class="easy-invoice-chart-canvas" role="img" aria-label="<?php echo esc_attr__( 'Monthly revenue by month and currency', 'easy-invoice' ); ?>"></canvas> |
| 171 |
</div> |
| 172 |
<?php else : ?> |
| 173 |
<p class="text-sm text-gray-500 mb-6"><?php esc_html_e( 'Trends appear here once completed payments exist in the selected period.', 'easy-invoice' ); ?></p> |
| 174 |
<div class="rounded-xl border border-dashed border-gray-200 bg-gradient-to-b from-gray-50 to-white px-8 py-12 text-center"> |
| 175 |
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-50 text-indigo-600"> |
| 176 |
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"> |
| 177 |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path> |
| 178 |
</svg> |
| 179 |
</div> |
| 180 |
<h3 class="mt-4 text-base font-semibold text-gray-900"><?php esc_html_e( 'No revenue trend to show yet', 'easy-invoice' ); ?></h3> |
| 181 |
<p class="mt-2 max-w-md mx-auto text-sm text-gray-500 leading-relaxed"> |
| 182 |
<?php esc_html_e( 'Record a payment on an invoice to see your monthly performance in this chart.', 'easy-invoice' ); ?> |
| 183 |
</p> |
| 184 |
<a href="<?php echo esc_url($invoices_list_url); ?>" class="mt-6 inline-flex items-center rounded-md bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"> |
| 185 |
<?php esc_html_e( 'View all invoices', 'easy-invoice' ); ?> |
| 186 |
</a> |
| 187 |
</div> |
| 188 |
<?php endif; ?> |
| 189 |
</div> |
| 190 |
|
| 191 |
<div class="bg-white rounded-lg shadow"> |
| 192 |
<div class="px-6 py-4 border-b border-gray-200"> |
| 193 |
<h2 class="text-lg font-medium text-gray-900"><?php esc_html_e( 'Recent Invoices', 'easy-invoice' ); ?></h2> |
| 194 |
</div> |
| 195 |
<div class="overflow-x-auto"> |
| 196 |
<table class="min-w-full divide-y divide-gray-200"> |
| 197 |
<thead class="bg-gray-50"> |
| 198 |
<tr> |
| 199 |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><?php esc_html_e( 'Invoice #', 'easy-invoice' ); ?></th> |
| 200 |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><?php esc_html_e( 'Client', 'easy-invoice' ); ?></th> |
| 201 |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><?php esc_html_e( 'Amount', 'easy-invoice' ); ?></th> |
| 202 |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><?php esc_html_e( 'Status', 'easy-invoice' ); ?></th> |
| 203 |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><?php esc_html_e( 'Due Date', 'easy-invoice' ); ?></th> |
| 204 |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><?php esc_html_e( 'Actions', 'easy-invoice' ); ?></th> |
| 205 |
</tr> |
| 206 |
</thead> |
| 207 |
<tbody class="bg-white divide-y divide-gray-200"> |
| 208 |
<?php if (!empty($recent_invoices)) : ?> |
| 209 |
<?php foreach ($recent_invoices as $invoice): |
| 210 |
$statusClass = [ |
| 211 |
'paid' => 'bg-green-100 text-green-800', |
| 212 |
'unpaid' => 'bg-yellow-100 text-yellow-800', |
| 213 |
'overdue' => 'bg-red-100 text-red-800', |
| 214 |
'draft' => 'bg-gray-100 text-gray-800' |
| 215 |
][$invoice->getStatus()] ?? 'bg-gray-100 text-gray-800'; |
| 216 |
|
| 217 |
$invoiceId = $invoice->getId(); |
| 218 |
$invoiceNumber = $invoice->getNumber() ?: ('INV-' . $invoiceId); |
| 219 |
$invoiceTotal = $invoice->getTotal(); |
| 220 |
$clientName = $invoice->getCustomerName() ?: __( 'Client', 'easy-invoice' ); |
| 221 |
$dueDate = $invoice->getDueDate() ?: date('Y-m-d'); |
| 222 |
$raw_status = $invoice->getStatus(); |
| 223 |
$status_map = array( |
| 224 |
'paid' => __( 'Paid', 'easy-invoice' ), |
| 225 |
'unpaid' => __( 'Unpaid', 'easy-invoice' ), |
| 226 |
'overdue' => __( 'Overdue', 'easy-invoice' ), |
| 227 |
'draft' => __( 'Draft', 'easy-invoice' ), |
| 228 |
); |
| 229 |
$status = isset( $status_map[ $raw_status ] ) ? $status_map[ $raw_status ] : esc_html( ucfirst( (string) $raw_status ) ); |
| 230 |
?> |
| 231 |
<tr> |
| 232 |
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"><?php echo esc_html($invoiceNumber); ?></td> |
| 233 |
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php echo esc_html($clientName); ?></td> |
| 234 |
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php |
| 235 |
// Use InvoiceFormatter for proper currency formatting |
| 236 |
$formatter = new \EasyInvoice\Helpers\InvoiceFormatter(); |
| 237 |
echo esc_html($formatter->format($invoiceTotal)); |
| 238 |
?></td> |
| 239 |
<td class="px-6 py-4 whitespace-nowrap"> |
| 240 |
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full <?php echo esc_attr($statusClass); ?>"> |
| 241 |
<?php echo esc_html( $status ); ?> |
| 242 |
</span> |
| 243 |
</td> |
| 244 |
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php echo esc_html($dueDate); ?></td> |
| 245 |
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
| 246 |
<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"><?php esc_html_e( 'Edit', 'easy-invoice' ); ?></a> |
| 247 |
<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"><?php esc_html_e( 'View', 'easy-invoice' ); ?></a> |
| 248 |
</td> |
| 249 |
</tr> |
| 250 |
<?php endforeach; ?> |
| 251 |
<?php else: ?> |
| 252 |
<tr> |
| 253 |
<td colspan="6" class="px-6 py-4 text-center text-sm text-gray-500"><?php esc_html_e( 'No invoices found', 'easy-invoice' ); ?></td> |
| 254 |
</tr> |
| 255 |
<?php endif; ?> |
| 256 |
</tbody> |
| 257 |
</table> |
| 258 |
</div> |
| 259 |
</div> |
| 260 |
</div> |
