349 lines
17 KiB
HTML
349 lines
17 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n %}
|
|
{% load tenhal_tag %}
|
|
{% block title %}
|
|
{{ _("Dealership Dashboard") |capfirst }}
|
|
{% endblock title %}
|
|
{% block content%}
|
|
<div class="main-content flex-grow-1 container-fluid mt-4 mb-3">
|
|
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5 pb-3 border-bottom">
|
|
<h2 class="h3 fw-bold text-dark mb-3 mb-md-0">Business Health Dashboard <i class="fas fa-chart-area text-primary ms-2"></i></h2>
|
|
<form method="GET" class="date-filter-form">
|
|
<div class="row g-3">
|
|
<div class="col-12 col-md-4">
|
|
<label for="start-date" class="form-label">Start Date</label>
|
|
<input type="date" class="form-control" id="start-date" name="start_date"
|
|
value="{{ start_date|date:'Y-m-d' }}" required>
|
|
</div>
|
|
<div class="col-12 col-md-4">
|
|
<label for="end-date" class="form-label">End Date</label>
|
|
<input type="date" class="form-control" id="end-date" name="end_date"
|
|
value="{{ end_date|date:'Y-m-d' }}" required>
|
|
</div>
|
|
<div class="col-12 col-md-4 d-flex align-items-end">
|
|
<button type="submit" class="btn btn-primary w-100">Apply Filter</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="row g-4 mb-5">
|
|
<div class="col-sm-6 col-md-4 col-lg-3">
|
|
<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 Cost of Cars Sold</p>
|
|
<h4 class="fw-bolder text-secondary mb-3">{{total_cost_of_cars_sold|floatformat:2}}<span class="icon-saudi_riyal"></span></h4>
|
|
</div>
|
|
<span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
|
|
+8% from last month
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-4 col-lg-3">
|
|
<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 Revenue from cars</p>
|
|
<h4 class="fw-bolder text-primary mb-3">{{total_revenue_from_cars|floatformat:2}}<span class="icon-saudi_riyal"></span></h4>
|
|
</div>
|
|
<span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
|
|
+8% from last month
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-4 col-lg-3">
|
|
<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">Net Profit From Cars</p>
|
|
<h4 class="fw-bolder text-success mb-3">{{net_profit_from_cars|floatformat:2}}<span class="icon-saudi_riyal"></span></h4>
|
|
</div>
|
|
<span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
|
|
+8% from last month
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-4 col-lg-3">
|
|
<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 Discount on cars</p>
|
|
<h4 class="fw-bolder text-primary mb-3">{{total_discount_on_cars|floatformat:2}}<span class="icon-saudi_riyal"></span></h4>
|
|
</div>
|
|
<span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
|
|
+8% from last month
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-4 col-lg-3">
|
|
<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 VAT collected from cars</p>
|
|
<h4 class="fw-bolder text-primary mb-3">{{total_vat_collected_from_cars|floatformat:2}}<span class="icon-saudi_riyal"></span></h4>
|
|
</div>
|
|
<span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
|
|
+8% from last month
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-4 col-lg-3">
|
|
<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 Revenue from Services</p>
|
|
<h4 class="fw-bolder text-primary mb-3">{{total_revenue_from_services|floatformat:2}}<span class="icon-saudi_riyal"></span></h4>
|
|
</div>
|
|
<span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
|
|
+8% from last month
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-md-4 col-lg-3">
|
|
<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 VAT collected from Services</p>
|
|
<h4 class="fw-bolder text-primary mb-3">{{total_vat_collected_from_services|floatformat:2}}<span class="icon-saudi_riyal"></span></h4>
|
|
</div>
|
|
<span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
|
|
+8% from last month
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-4 col-lg-3">
|
|
<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">{% trans "Total Revenue Generated" %}</p>
|
|
<h4 class="fw-bolder text-primary mb-3">{{total_revenue_generated|floatformat:2}}<span class="icon-saudi_riyal"></span></h4>
|
|
</div>
|
|
<span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
|
|
+8% from last month
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-md-4 col-lg-3">
|
|
<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">{% trans "Total VAT Collected" %}</p>
|
|
<h4 class="fw-bolder text-primary mb-3">{{total_vat_collected|floatformat:2}}<span class="icon-saudi_riyal"></span></h4>
|
|
</div>
|
|
<span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
|
|
+8% from last month
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-md-4 col-lg-3">
|
|
<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 Expense</p>
|
|
<h4 class="fw-bolder text-danger mb-3">$1.25M</h4>
|
|
</div>
|
|
<span class="badge bg-danger-subtle text-danger fw-bold p-2 rounded-pill d-inline-flex align-self-start">
|
|
-2% from last month
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-4 col-lg-3">
|
|
<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">Gross Profit</p>
|
|
<h4 class="fw-bolder text-info mb-3">$1.25M</h4>
|
|
</div>
|
|
<span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
|
|
+8% from last month
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-md-4 col-lg-3">
|
|
<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 VAT Collected</p>
|
|
<h4 class="fw-bolder text-primary mb-3">{{total_vat_collected|floatformat:2}}<span class="icon-saudi_riyal"></span></h4>
|
|
</div>
|
|
<span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
|
|
+8% from last month
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-4 col-lg-3">
|
|
<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">{{ total_cars_sold }}</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">
|
|
<div class="col-lg-8">
|
|
<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 Revenue & Profit</h5>
|
|
</div>
|
|
<div class="card-body" style="height: 400px;">
|
|
<canvas id="revenueProfitChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<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>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
{% endblock content %}
|
|
|
|
|
|
{% block customJS %}
|
|
<script>
|
|
// Define a color palette that aligns with the Phoenix template
|
|
const primaryColor = '#7249b6'; // A vibrant purple
|
|
const secondaryColor = '#8193a6'; // A muted gray/blue
|
|
const successColor = '#00d074'; // A bright green
|
|
const dangerColor = '#e63757'; // A deep red
|
|
|
|
// Monthly Cars Sold (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 }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Monthly Revenue & Profit (Line Chart)
|
|
const ctx2 = document.getElementById('revenueProfitChart').getContext('2d');
|
|
new Chart(ctx2, {
|
|
type: 'line',
|
|
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: primaryColor,
|
|
backgroundColor: 'rgba(114, 73, 182, 0.1)', // Using primaryColor with transparency
|
|
tension: 0.4,
|
|
fill: true,
|
|
pointBackgroundColor: primaryColor,
|
|
pointRadius: 5,
|
|
pointHoverRadius: 8
|
|
},
|
|
{
|
|
label: 'Monthly Net Profit',
|
|
data: [25000, 35000, 28000, 40000, 45000, 38000, 42000, 50000, 48000, 55000, 52000, 60000],
|
|
borderColor: successColor,
|
|
backgroundColor: 'rgba(0, 208, 116, 0.1)', // Using successColor with transparency
|
|
tension: 0.4,
|
|
fill: true,
|
|
pointBackgroundColor: successColor,
|
|
pointRadius: 5,
|
|
pointHoverRadius: 8
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
labels: { color: '#495057', boxWidth: 20 }
|
|
},
|
|
tooltip: {
|
|
backgroundColor: 'rgba(33, 37, 41, 0.9)',
|
|
titleColor: 'white',
|
|
bodyColor: 'white',
|
|
padding: 10,
|
|
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.05)' },
|
|
ticks: { color: secondaryColor },
|
|
border: { color: secondaryColor }
|
|
},
|
|
y: {
|
|
grid: { color: 'rgba(0, 0, 0, 0.05)' },
|
|
ticks: { color: secondaryColor },
|
|
border: { color: secondaryColor }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |