356 lines
14 KiB
HTML
356 lines
14 KiB
HTML
{% extends 'base.html' %}
|
|
{% block content %}
|
|
|
|
<div class="main-content flex-grow-1 container-fluid mt-4 mb-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-5 pb-3 border-bottom">
|
|
<h2 class="h3 fw-bold mb-0">Sales & Leads Dashboard <i class="fas fa-chart-area text-primary ms-2"></i></h2>
|
|
<div class="dropdown">
|
|
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
Last 30 Days
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end shadow">
|
|
<li><a class="dropdown-item" href="#">Today</a></li>
|
|
<li><a class="dropdown-item" href="#">Last 7 Days</a></li>
|
|
<li><a class="dropdown-item" href="#">Last 90 Days</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4 mb-5">
|
|
<div class="col-sm-6 col-md-4">
|
|
<div class="card h-100 shadow-sm border-0">
|
|
<div class="card-body d-flex flex-column justify-content-between p-4">
|
|
<div>
|
|
<p class="text-uppercase text-muted fw-bold small mb-1">Total Cars Sold</p>
|
|
<h4 class="fw-bolder text-success mb-3">{{ sold_cars }}</h4>
|
|
</div>
|
|
<span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
|
|
+5 units from last month
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-4">
|
|
<div class="card h-100 shadow-sm border-0">
|
|
<div class="card-body d-flex flex-column justify-content-between p-4">
|
|
<div>
|
|
<p class="text-uppercase text-muted fw-bold small mb-1">Used Cars Sold</p>
|
|
<h4 class="fw-bolder text-info mb-3">{{ sold_used_cars }}</h4>
|
|
</div>
|
|
<span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
|
|
+5 units from last month
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-4">
|
|
<div class="card h-100 shadow-sm border-0">
|
|
<div class="card-body d-flex flex-column justify-content-between p-4">
|
|
<div>
|
|
<p class="text-uppercase text-muted fw-bold small mb-1">New Cars Sold</p>
|
|
<h4 class="fw-bolder text-primary mb-3">{{ sold_new_cars }}</h4>
|
|
</div>
|
|
<span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
|
|
+5 units from last month
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4 mb-5">
|
|
<div class="col-md-6">
|
|
<div class="card h-100 shadow-sm border-0">
|
|
<div class="card-header bg-white border-bottom-0">
|
|
<h5 class="fw-bold mb-0 text-dark">Monthly Cars Sold</h5>
|
|
</div>
|
|
<div class="card-body d-flex align-items-center justify-content-center" style="height: 400px;">
|
|
<canvas id="CarsSoldByMonthChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 shadow-sm border-0">
|
|
<div class="card-header bg-white border-bottom-0">
|
|
<h5 class="fw-bold mb-0 text-dark">Sales by Make</h5>
|
|
</div>
|
|
<div class="card-body d-flex align-items-center justify-content-center" style="height: 400px;">
|
|
<canvas id="salesByBrandChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4 mb-5">
|
|
<div class="col-md-6">
|
|
<div class="card h-100 shadow-sm border-0">
|
|
<div class="card-header bg-white border-bottom-0">
|
|
<h5 class="fw-bold mb-0 text-dark">Top 5 Lead Sources</h5>
|
|
</div>
|
|
<div class="card-body d-flex align-items-center justify-content-center" style="height: 400px;">
|
|
<canvas id="leadSourcesChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 shadow-sm border-0">
|
|
<div class="card-header bg-white border-bottom-0">
|
|
<h5 class="fw-bold mb-0 text-dark">Appointments by Weekday</h5>
|
|
</div>
|
|
<div class="card-body d-flex align-items-center justify-content-center" style="height: 400px;">
|
|
<canvas id="appointmentsChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-12">
|
|
<div class="card h-100 shadow-sm border-0">
|
|
<div class="card-header bg-white border-bottom-0">
|
|
<h5 class="fw-bold mb-0 text-dark">Lead Conversion Funnel</h5>
|
|
</div>
|
|
<div class="card-body d-flex align-items-center justify-content-center" style="height: 400px;">
|
|
<canvas id="leadFunnelChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
{% endblock content %}
|
|
|
|
|
|
{% block customJS%}
|
|
<script>
|
|
// Define a custom color palette that matches the Phoenix template
|
|
const primaryColor = '#7249b6'; // A vibrant purple
|
|
const secondaryColor = '#8193a6'; // A muted gray/blue
|
|
const successColor = '#00d074'; // A bright green
|
|
const infoColor = '#0085ff'; // A medium blue
|
|
const warningColor = '#ffc83b'; // A yellow
|
|
const dangerColor = '#e63757'; // A deep red
|
|
|
|
// Sales by Month Chart (Bar Chart)
|
|
const ctx1 = document.getElementById('CarsSoldByMonthChart').getContext('2d');
|
|
new Chart(ctx1, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
datasets: [{
|
|
label: 'Total Cars Sold',
|
|
data: [2, 3, 10, 4, 30, 12, 8, 9, 20, 12, 15, 35],
|
|
backgroundColor: primaryColor,
|
|
borderColor: primaryColor,
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false }
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: { color: 'rgba(0, 0, 0, 0.05)' },
|
|
ticks: { color: secondaryColor }
|
|
},
|
|
x: {
|
|
grid: { display: false },
|
|
ticks: { color: secondaryColor }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Sales by Make (Pie Chart)
|
|
const ctx3 = document.getElementById('salesByBrandChart').getContext('2d');
|
|
new Chart(ctx3, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: ['Toyota', 'Ford', 'Honda', 'BMW', 'Other'],
|
|
datasets: [{
|
|
label: 'Car Count by Make',
|
|
data: [45, 30, 25, 15, 10],
|
|
backgroundColor: [primaryColor, successColor, warningColor, infoColor, secondaryColor],
|
|
hoverOffset: 15,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'right',
|
|
labels: { color: secondaryColor, font: { size: 14 } }
|
|
},
|
|
tooltip: {
|
|
backgroundColor: 'rgba(33, 37, 41, 0.9)',
|
|
titleColor: '#fff',
|
|
bodyColor: '#fff',
|
|
callbacks: {
|
|
label: function(context) {
|
|
const label = context.label || '';
|
|
const value = context.parsed || 0;
|
|
const total = context.dataset.data.reduce((a, b) => a + b, 0);
|
|
const percentage = ((value / total) * 100).toFixed(2);
|
|
return `${label}: ${value} cars (${percentage}%)`;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Top 5 Lead Sources (Horizontal Bar Chart)
|
|
const ctx_leadSources = document.getElementById('leadSourcesChart').getContext('2d');
|
|
new Chart(ctx_leadSources, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Showroom', 'Referrals', 'WhatsApp', 'Facebook', 'TikTok'],
|
|
datasets: [{
|
|
label: 'Number of Leads',
|
|
data: [45, 35, 25, 20, 15],
|
|
backgroundColor: infoColor,
|
|
borderColor: infoColor,
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
indexAxis: 'y',
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false },
|
|
title: { display: false },
|
|
tooltip: {
|
|
backgroundColor: 'rgba(33, 37, 41, 0.9)',
|
|
titleColor: '#fff',
|
|
bodyColor: '#fff',
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
beginAtZero: true,
|
|
title: { display: true, text: 'Number of Leads', color: secondaryColor },
|
|
ticks: { color: secondaryColor },
|
|
grid: { color: 'rgba(0, 0, 0, 0.05)' }
|
|
},
|
|
y: {
|
|
grid: { display: false },
|
|
ticks: { color: secondaryColor }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Appointments by Weekday (Bar Chart)
|
|
const ctx_appointments = document.getElementById('appointmentsChart').getContext('2d');
|
|
new Chart(ctx_appointments, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
datasets: [{
|
|
label: 'Number of Appointments',
|
|
data: [10, 15, 20, 18, 25, 30, 12],
|
|
backgroundColor: successColor,
|
|
borderColor: successColor,
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false },
|
|
title: { display: false },
|
|
tooltip: {
|
|
backgroundColor: 'rgba(33, 37, 41, 0.9)',
|
|
titleColor: '#fff',
|
|
bodyColor: '#fff',
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
title: { display: true, text: 'Day of the Week', color: secondaryColor },
|
|
ticks: { color: secondaryColor },
|
|
grid: { display: false }
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
title: { display: true, text: 'Number of Appointments', color: secondaryColor },
|
|
ticks: { color: secondaryColor },
|
|
grid: { color: 'rgba(0, 0, 0, 0.05)' }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Lead Conversion Funnel (Horizontal Bar Chart)
|
|
const ctx_funnel = document.getElementById('leadFunnelChart').getContext('2d');
|
|
const funnelData = {
|
|
labels: ['Initial Contact', 'Qualified Leads', 'Test Drives', 'Negotiation', 'Closed Deals'],
|
|
data: [250, 180, 120, 80, 45],
|
|
};
|
|
new Chart(ctx_funnel, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: funnelData.labels,
|
|
datasets: [{
|
|
label: 'Number of Leads',
|
|
data: funnelData.data,
|
|
backgroundColor: [
|
|
primaryColor,
|
|
infoColor,
|
|
successColor,
|
|
warningColor,
|
|
dangerColor
|
|
],
|
|
borderColor: [
|
|
primaryColor,
|
|
infoColor,
|
|
successColor,
|
|
warningColor,
|
|
dangerColor
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
indexAxis: 'y',
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false },
|
|
title: { display: false },
|
|
tooltip: {
|
|
backgroundColor: 'rgba(33, 37, 41, 0.9)',
|
|
titleColor: '#fff',
|
|
bodyColor: '#fff',
|
|
callbacks: {
|
|
label: function(context) {
|
|
const totalLeads = funnelData.data[0];
|
|
const currentLeads = context.parsed.x;
|
|
const percentage = ((currentLeads / totalLeads) * 100).toFixed(1);
|
|
return `Leads: ${currentLeads} (${percentage}%)`;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
beginAtZero: true,
|
|
display: false
|
|
},
|
|
y: {
|
|
grid: { display: false },
|
|
ticks: { color: secondaryColor }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |