641 lines
21 KiB
HTML
641 lines
21 KiB
HTML
{% extends 'base.html' %}
|
|
{% block content %}
|
|
<div class="main-content flex-grow-1 mt-4 mb-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<p class="fs-2">Dashboard Overview<i class="fas fa-chart-area ms-3 text-primary fs-3"></i></p>
|
|
<div class="dropdown">
|
|
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
|
Last 30 Days
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<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-md-6 col-lg-3">
|
|
<div class="card h-100 p-3">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-primary">Total Revenue</h5>
|
|
<p class="stat-value">$1.25M</p>
|
|
<span class="text-success small">+8% from last month</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card h-100 p-3">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-primary">Net Profit</h5>
|
|
<p class="stat-value">$1.25M</p>
|
|
<span class="text-success small">+8% from last month</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card h-100 p-3">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-primary">Gross Profit</h5>
|
|
<p class="stat-value">$1.25M</p>
|
|
<span class="text-success small">+8% from last month</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card h-100 p-3">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-danger">Total Expense</h5>
|
|
<p class="stat-value">$1.25M</p>
|
|
<span class="text-success small">+8% from last month</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card h-100 p-3">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-primary">Total VAT collected</h5>
|
|
<p class="stat-value">$1.25M</p>
|
|
<span class="text-success small">+8% from last month</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card h-100 p-3">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-success">Cars Sold</h5>
|
|
<p class="stat-value">{{sold_cars}}</p>
|
|
<span class="text-success small">+5 units from last month</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card h-100 p-3">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-danger">Average Time on Lot</h5>
|
|
<p class="stat-value">10 days</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card h-100 p-3">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-warning">Inventory Value</h5>
|
|
<p class="stat-value">$5.8M</p>
|
|
<span class="text-danger small">-2% from last month</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="card h-100 p-3">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-danger">Aging Inventory</h5>
|
|
<p class="stat-value">12</p>
|
|
<span class="text-success small">-4 cars from last month</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-lg-8">
|
|
<div class="card h-100">
|
|
<div class="card-header">Monthly Revenue & Profit</div>
|
|
<div class="card-body chart-container">
|
|
<canvas id="revenueProfitChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="card h-100">
|
|
<div class="card-header">Monthly Cars Sold</div>
|
|
<div class="card-body d-flex align-items-center justify-content-center">
|
|
<canvas id="CarsSoldByMonthChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card h-100">
|
|
<div class="card-header">Inventory By Make</div>
|
|
<div class="card-body d-flex align-items-center justify-content-center">
|
|
<canvas id="salesByBrandChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card h-100">
|
|
<div class="card-header">Sales By Make</div>
|
|
<div class="card-body d-flex align-items-center justify-content-center">
|
|
<canvas id="inventoryByBrandChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card h-100">
|
|
<div class="card-header">Salesperson Performance</div>
|
|
<div class="card-body chart-container">
|
|
<canvas id="salespersonChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card h-100">
|
|
<div class="card-header">Top 5 Lead Sources</div>
|
|
<div class="card-body chart-container">
|
|
<canvas id="leadSourcesChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12">
|
|
<div class="card h-100">
|
|
<div class="card-header">Appointments by Weekday</div>
|
|
<div class="card-body chart-container">
|
|
<canvas id="appointmentsChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-12">
|
|
<div class="card h-100">
|
|
<div class="card-header">Lead Conversion Funnel</div>
|
|
<div class="card-body d-flex align-items-center justify-content-center">
|
|
<canvas id="leadFunnelChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
{% endblock content %}
|
|
|
|
|
|
{% block customJS%}
|
|
|
|
<script>
|
|
ctx1=document.getElementById('CarsSoldByMonthChart')
|
|
new Chart(ctx1,{
|
|
type: 'bar',
|
|
|
|
data: {
|
|
labels:['January','February','March','April','May','June','July','August','September','October', 'November','December' ],
|
|
|
|
datasets: [{
|
|
label: 'Total Cars Sold',
|
|
data: [2,3,10,4,30,12,8,9,20,12,15,35],
|
|
borderWidth: 1
|
|
}]
|
|
|
|
},
|
|
|
|
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
});
|
|
|
|
// Get the canvas context for the chart
|
|
const ctx2 = document.getElementById('revenueProfitChart').getContext('2d');
|
|
|
|
// Chart.js configuration
|
|
new Chart(ctx2, {
|
|
type: 'line', // Use a line chart
|
|
data: {
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
datasets: [
|
|
{
|
|
label: 'Monthly Revenue',
|
|
data: [120000, 150000, 130000, 180000, 200000, 175000, 190000, 220000, 210000, 250000, 240000, 280000],
|
|
borderColor: '#007bff', // A vibrant blue
|
|
backgroundColor: 'rgba(0, 123, 255, 0.2)',
|
|
tension: 0.4, // Smooths the line
|
|
fill: true, // Fills the area under the line
|
|
pointBackgroundColor: '#007bff',
|
|
pointRadius: 5,
|
|
pointHoverRadius: 8
|
|
},
|
|
{
|
|
label: 'Monthly Net Profit',
|
|
data: [25000, 35000, 28000, 40000, 45000, 38000, 42000, 50000, 48000, 55000, 52000, 60000],
|
|
borderColor: '#28a745', // A strong green
|
|
backgroundColor: 'rgba(40, 167, 69, 0.2)',
|
|
tension: 0.4,
|
|
fill: true,
|
|
pointBackgroundColor: '#28a745',
|
|
pointRadius: 5,
|
|
pointHoverRadius: 8
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
labels: {
|
|
color: '#495057', // Darker legend text
|
|
boxWidth: 20
|
|
}
|
|
},
|
|
tooltip: {
|
|
backgroundColor: 'rgba(52, 58, 64, 0.9)', // Darker tooltip background
|
|
titleColor: 'white',
|
|
bodyColor: 'white',
|
|
callbacks: {
|
|
label: function(context) {
|
|
let label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
|
|
}
|
|
return label;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.1)' // Lighter grid lines for better contrast
|
|
},
|
|
ticks: {
|
|
color: '#495057' // Darker text for x-axis labels
|
|
},
|
|
border: {
|
|
color: '#adb5bd' // A subtle border color
|
|
}
|
|
},
|
|
y: {
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.1)'
|
|
},
|
|
ticks: {
|
|
color: '#495057' // Darker text for y-axis labels
|
|
},
|
|
border: {
|
|
color: '#adb5bd'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
// Get the canvas context for the chart
|
|
const ctx3 = document.getElementById('salesByBrandChart').getContext('2d');
|
|
|
|
// Chart.js configuration for the Pie Chart
|
|
new Chart(ctx3, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: ['Toyota', 'Ford', 'Honda', 'BMW', 'Other'],
|
|
datasets: [{
|
|
label: 'Car Count by Make',
|
|
data: [45, 30, 25, 15, 10], // Sample data for car counts
|
|
backgroundColor: [
|
|
'#007bff', // Blue
|
|
'#28a745', // Green
|
|
'#ffc107', // Yellow
|
|
'#dc3545', // Red
|
|
'#6c757d' // Gray
|
|
],
|
|
hoverOffset: 15,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'right', // Places the legend on the right side
|
|
labels: {
|
|
color: '#343a40', // Dark text color for labels
|
|
font: {
|
|
size: 14
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
backgroundColor: 'rgba(52, 58, 64, 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}%)`;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
// Get the canvas context for the chart
|
|
const ctx4 = document.getElementById('inventoryByBrandChart').getContext('2d');
|
|
|
|
// Chart.js configuration for the Pie Chart
|
|
new Chart(ctx4, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: ['Toyota', 'Ford', 'Honda', 'BMW', 'Other'],
|
|
datasets: [{
|
|
label: 'Car Count by Make',
|
|
data: [45, 30, 25, 15, 10], // Sample data for car counts
|
|
backgroundColor: [
|
|
'#007bff', // Blue
|
|
'#28a745', // Green
|
|
'#ffc107', // Yellow
|
|
'#dc3545', // Red
|
|
'#6c757d' // Gray
|
|
],
|
|
hoverOffset: 15,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'right', // Places the legend on the right side
|
|
labels: {
|
|
color: '#343a40', // Dark text color for labels
|
|
font: {
|
|
size: 14
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
backgroundColor: 'rgba(52, 58, 64, 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}%)`;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
// Get the canvas context for the chart
|
|
const ctx_salesperson = document.getElementById('salespersonChart').getContext('2d');
|
|
|
|
// Chart.js configuration for the Salesperson Performance Bar Chart
|
|
new Chart(ctx_salesperson, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['John Doe', 'Jane Smith', 'Peter Jones', 'Mary Brown'],
|
|
datasets: [{
|
|
label: 'Cars Sold',
|
|
data: [15, 22, 18, 25], // Sample data for cars sold by each salesperson
|
|
backgroundColor: [
|
|
'#007bff', // Blue
|
|
'#28a745', // Green
|
|
'#ffc107', // Yellow
|
|
'#dc3545' // Red
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false // Hide the legend for a single dataset
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Salesperson Performance',
|
|
font: {
|
|
size: 16
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Salesperson Name'
|
|
},
|
|
ticks: {
|
|
color: '#495057' // Dark text for x-axis labels
|
|
}
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
title: {
|
|
display: true,
|
|
text: 'Number of Cars Sold'
|
|
},
|
|
ticks: {
|
|
color: '#495057' // Dark text for y-axis labels
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
// Get the canvas context for the chart
|
|
const ctx_leadSources = document.getElementById('leadSourcesChart').getContext('2d');
|
|
|
|
// Chart.js configuration for the Top 5 Lead Sources Bar Chart
|
|
new Chart(ctx_leadSources, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Showroom', 'Referrals', 'WhatsApp', 'Facebook', 'TikTok'], // Labels from the provided list
|
|
datasets: [{
|
|
label: 'Number of Leads',
|
|
data: [45, 35, 25, 20, 15], // Sample data for leads from each source
|
|
backgroundColor: 'rgba(54, 162, 235, 0.8)', // A consistent blue color for the bars
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
indexAxis: 'y', // Makes it a horizontal bar chart
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Top 5 Lead Sources',
|
|
font: {
|
|
size: 16
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
beginAtZero: true,
|
|
title: {
|
|
display: true,
|
|
text: 'Number of Leads',
|
|
color: '#495057'
|
|
},
|
|
ticks: {
|
|
color: '#495057'
|
|
}
|
|
},
|
|
y: {
|
|
ticks: {
|
|
color: '#495057',
|
|
font: {
|
|
size: 8 // Decreases the font size to fit more text
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
// Get the canvas context for the chart
|
|
const ctx_appointments = document.getElementById('appointmentsChart').getContext('2d');
|
|
|
|
// Chart.js configuration for the Appointments by Weekday Bar Chart
|
|
new Chart(ctx_appointments, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
|
|
datasets: [{
|
|
label: 'Number of Appointments',
|
|
data: [10, 15, 20, 18, 25, 30, 12], // Sample data for appointments per day
|
|
backgroundColor: 'rgba(75, 192, 192, 0.8)', // A consistent color for the bars
|
|
borderColor: 'rgba(75, 192, 192, 1)',
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Appointments by Weekday',
|
|
font: {
|
|
size: 16
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Day of the Week',
|
|
color: '#495057'
|
|
},
|
|
ticks: {
|
|
color: '#495057'
|
|
}
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
title: {
|
|
display: true,
|
|
text: 'Number of Appointments',
|
|
color: '#495057'
|
|
},
|
|
ticks: {
|
|
color: '#495057'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
// Get the canvas context for the funnel chart
|
|
const ctx_funnel = document.getElementById('leadFunnelChart').getContext('2d');
|
|
|
|
// Sample data for the funnel stages
|
|
const funnelData = {
|
|
labels: ['Initial Contact', 'Qualified Leads', 'Test Drives', 'Negotiation', 'Closed Deals'],
|
|
data: [250, 180, 120, 80, 45], // Example lead counts at each stage
|
|
};
|
|
|
|
new Chart(ctx_funnel, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: funnelData.labels,
|
|
datasets: [{
|
|
label: 'Number of Leads',
|
|
data: funnelData.data,
|
|
backgroundColor: [
|
|
'rgba(0, 123, 255, 0.8)',
|
|
'rgba(0, 123, 255, 0.7)',
|
|
'rgba(0, 123, 255, 0.6)',
|
|
'rgba(0, 123, 255, 0.5)',
|
|
'rgba(0, 123, 255, 0.4)'
|
|
],
|
|
borderColor: 'rgba(0, 123, 255, 1)',
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
indexAxis: 'y', // Makes it a horizontal bar chart
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Lead Conversion Funnel',
|
|
font: {
|
|
size: 16
|
|
}
|
|
},
|
|
tooltip: {
|
|
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 // Hide the x-axis to make it look like a funnel
|
|
},
|
|
y: {
|
|
ticks: {
|
|
color: '#495057'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
</script>
|
|
{% endblock %} |