feat: replace recent orders with geographic and retention insights
This commit is contained in:
theRAD
@@ -144,32 +144,6 @@
|
||||
<!-- Tables Row -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
|
||||
<!-- Recent Orders -->
|
||||
<div class="glass rounded-2xl flex flex-col h-full overflow-hidden">
|
||||
<div class="p-5 border-b border-white/5 flex items-center justify-between bg-white/5">
|
||||
<h3 class="font-bold text-white tracking-tight flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"/></svg>
|
||||
Recent Orders
|
||||
</h3>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-black/20 text-xs text-slate-400 uppercase tracking-wider">
|
||||
<th class="p-3 font-medium">Order #</th>
|
||||
<th class="p-3 font-medium">Customer</th>
|
||||
<th class="p-3 font-medium">Date</th>
|
||||
<th class="p-3 font-medium">Status</th>
|
||||
<th class="p-3 font-medium text-right">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-orders" class="text-sm divide-y divide-white/5">
|
||||
<!-- Populated via JS -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Top Selling Products -->
|
||||
<div class="glass rounded-2xl flex flex-col h-full overflow-hidden">
|
||||
<div class="p-5 border-b border-white/5 flex items-center justify-between bg-white/5">
|
||||
@@ -193,10 +167,36 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Geographic Sales Distribution -->
|
||||
<div class="glass rounded-2xl p-5 flex flex-col items-center">
|
||||
<div class="w-full flex items-center justify-between mb-4">
|
||||
<h3 class="font-bold text-white tracking-tight flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
Geographic Sales Distribution
|
||||
</h3>
|
||||
</div>
|
||||
<div class="relative w-full h-[300px]">
|
||||
<canvas id="geoChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Advanced Analytics Charts Row -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
|
||||
<!-- Customer Retention -->
|
||||
<div class="glass rounded-2xl p-5 flex flex-col items-center">
|
||||
<div class="w-full flex items-center justify-between mb-4">
|
||||
<h3 class="font-bold text-white tracking-tight flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
|
||||
Customer Retention
|
||||
</h3>
|
||||
</div>
|
||||
<div class="relative w-full max-w-[240px] aspect-square">
|
||||
<canvas id="retentionChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Device Breakthrough -->
|
||||
<div class="glass rounded-2xl p-5 flex flex-col items-center">
|
||||
@@ -206,7 +206,7 @@
|
||||
Device Breakdown
|
||||
</h3>
|
||||
</div>
|
||||
<div class="relative w-full max-w-[300px] aspect-square">
|
||||
<div class="relative w-full max-w-[240px] aspect-square">
|
||||
<canvas id="deviceChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
@@ -219,7 +219,7 @@
|
||||
Top Referral Sources
|
||||
</h3>
|
||||
</div>
|
||||
<div class="relative w-full h-[300px]">
|
||||
<div class="relative w-full h-[240px] mt-4">
|
||||
<canvas id="sourceChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
@@ -331,39 +331,6 @@ function setKpisLoading() {
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusBadge(status) {
|
||||
switch(status) {
|
||||
case 'processing': return `<span class="inline-flex items-center rounded-md bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-500/20">Processing</span>`;
|
||||
case 'completed': return `<span class="inline-flex items-center rounded-md bg-green-500/10 px-2 py-1 text-xs font-medium text-green-400 ring-1 ring-inset ring-green-500/20">Completed</span>`;
|
||||
case 'pending': return `<span class="inline-flex items-center rounded-md bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-400 ring-1 ring-inset ring-yellow-500/20">Pending</span>`;
|
||||
case 'cancelled': return `<span class="inline-flex items-center rounded-md bg-red-500/10 px-2 py-1 text-xs font-medium text-red-400 ring-1 ring-inset ring-red-500/20">Cancelled</span>`;
|
||||
default: return `<span class="inline-flex items-center rounded-md bg-slate-500/10 px-2 py-1 text-xs font-medium text-slate-400 ring-1 ring-inset ring-slate-500/20">${status}</span>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadRecentOrders() {
|
||||
const tb = document.getElementById('table-orders');
|
||||
tb.innerHTML = Array(5).fill('<tr><td colspan="5" class="p-3"><div class="h-4 w-full rounded loading-shimmer"></div></td></tr>').join('');
|
||||
|
||||
try {
|
||||
const orders = await fetchJson('/api/ecommerce/recent-orders');
|
||||
if (!orders || orders.length === 0) {
|
||||
tb.innerHTML = '<tr><td colspan="5" class="p-4 text-center text-slate-500">No orders found.</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tb.innerHTML = orders.map(o => `
|
||||
<tr class="hover:bg-white/5 transition-colors">
|
||||
<td class="p-3 font-medium text-white">#${o.number}</td>
|
||||
<td class="p-3 text-slate-300 truncate max-w-[150px]">${o.customer}</td>
|
||||
<td class="p-3 text-slate-500">${new Date(o.date_created).toLocaleDateString()}</td>
|
||||
<td class="p-3">${getStatusBadge(o.status)}</td>
|
||||
<td class="p-3 text-right font-medium text-emerald-400">${fmt(o.total)}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} catch(e) { console.error(e); }
|
||||
}
|
||||
|
||||
async function loadTopProducts() {
|
||||
const tb = document.getElementById('table-products');
|
||||
tb.innerHTML = Array(5).fill('<tr><td colspan="2" class="p-3"><div class="h-4 w-full rounded loading-shimmer"></div></td></tr>').join('');
|
||||
@@ -386,12 +353,82 @@ function getStatusBadge(status) {
|
||||
|
||||
let deviceChartInstance = null;
|
||||
let sourceChartInstance = null;
|
||||
let geoChartInstance = null;
|
||||
let retentionChartInstance = null;
|
||||
|
||||
// Custom darker Chart JS defaults for dark UI
|
||||
Chart.defaults.color = '#94a3b8';
|
||||
Chart.defaults.borderColor = 'rgba(255, 255, 255, 0.05)';
|
||||
Chart.defaults.font.family = "'Inter', sans-serif";
|
||||
|
||||
async function loadInsights() {
|
||||
try {
|
||||
const data = await fetchJson('/api/ecommerce/insights');
|
||||
|
||||
// Geo Bar Chart
|
||||
const ctxGeo = document.getElementById('geoChart').getContext('2d');
|
||||
if (geoChartInstance) geoChartInstance.destroy();
|
||||
geoChartInstance = new Chart(ctxGeo, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: data.geographic.labels,
|
||||
datasets: [{
|
||||
label: 'Sales (ZAR)',
|
||||
data: data.geographic.values,
|
||||
backgroundColor: '#e11d48', // Rose color
|
||||
borderRadius: 4,
|
||||
barThickness: 'flex',
|
||||
maxBarThickness: 40
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
indexAxis: 'y', // Horizontal bar to accommodate province names
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
return fmt(context.raw);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: { beginAtZero: true, grid: { color: 'rgba(255, 255, 255, 0.05)' } },
|
||||
y: { grid: { display: false } }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Retention Doughnut
|
||||
const ctxRet = document.getElementById('retentionChart').getContext('2d');
|
||||
if (retentionChartInstance) retentionChartInstance.destroy();
|
||||
retentionChartInstance = new Chart(ctxRet, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: data.retention.labels,
|
||||
datasets: [{
|
||||
data: data.retention.values,
|
||||
backgroundColor: ['#10b981', '#3b82f6', '#475569'],
|
||||
borderWidth: 0,
|
||||
hoverOffset: 4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
cutout: '75%',
|
||||
plugins: {
|
||||
legend: { position: 'bottom', labels: { padding: 20, usePointStyle: true } }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
} catch(e) { console.error(e); }
|
||||
}
|
||||
|
||||
async function loadAnalytics() {
|
||||
try {
|
||||
const data = await fetchJson('/api/ecommerce/analytics');
|
||||
@@ -455,9 +492,9 @@ function getStatusBadge(status) {
|
||||
function loadAllData() {
|
||||
updateFilterStatus();
|
||||
loadSummary();
|
||||
loadRecentOrders();
|
||||
loadTopProducts();
|
||||
loadAnalytics();
|
||||
loadInsights();
|
||||
|
||||
const now = new Date();
|
||||
document.getElementById('last-updated').textContent = 'Updated ' + now.getHours() + ':' + String(now.getMinutes()).padStart(2, '0');
|
||||
|
||||
Reference in New Issue
Block a user