no changes

This commit is contained in:
Faheedkhan 2025-08-28 19:03:30 +03:00
parent 29e0cc7d8e
commit 8b41c3bfd4
9 changed files with 44 additions and 401 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 415 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 353 KiB

View File

@ -88,7 +88,7 @@
</div>
<div id="main_content"
class="fade-me-in"
hx-boost="true"
hx-boost="false"
hx-target="#main_content"
hx-select="#main_content"
hx-swap="outerHTML transition:true"

View File

@ -91,7 +91,7 @@
&nbsp;&nbsp;{{ car.id_car_make.name }}&nbsp;&nbsp;{{ car.id_car_model.name }}&nbsp;&nbsp;{{ car.id_car_serie.name }}&nbsp;&nbsp;{{ car.year }}
</h5>
<p class="card-text text-muted mb-2">
<strong>{% trans "VIN:" %}</strong> {{ car.vin }}
<strong>{% trans "VIN:" %}</strong> <a href="{% url 'car_detail' request.dealer.slug car.slug %}">{{ car.vin }}</a>
</p>
<p class="card-text mb-2">
<strong>{% trans "Age:" %}</strong>

View File

@ -46,8 +46,8 @@
<input type="hidden" name="make_sold" value="{{ selected_make_sales }}">
</form>
</div>
<div class="row g-4 mb-5">{% include 'dashboards/financial_data_cards.html' %}</div>
<div class="row g-4 mb-5">{% include 'dashboards/chart.html' %}</div>
<div class="row g-4 mb-5">{% include 'dashboards/partials//financial_data_cards.html' %}</div>
<div class="row g-4 mb-5">{% include 'dashboards/partials/chart.html' %}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock content %}

View File

@ -1,371 +0,0 @@
{% 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">
Manager 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 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</p>
<h4 class="fw-bolder text-primary 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">Net Profit</p>
<h4 class="fw-bolder text-success 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 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">
+3% 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">{{ 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 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">Avg. Time on Lot</p>
<h4 class="fw-bolder text-warning mb-3">10 days</h4>
</div>
<span class="badge bg-danger-subtle text-danger fw-bold p-2 rounded-pill d-inline-flex align-self-start">
+2 days 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">Inventory Value</p>
<h4 class="fw-bolder text-primary mb-3">$5.8M</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">Aging Inventory</p>
<h4 class="fw-bolder text-danger mb-3">12 units</h4>
</div>
<span class="badge bg-success-subtle text-success fw-bold p-2 rounded-pill d-inline-flex align-self-start">
-4 cars 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>
<div class="row g-4 mb-5">
<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 class="row g-4">
<div class="col-lg-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 class="col-lg-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 Salesperson Performance</h5>
</div>
<div class="card-body" style="height: 400px;">
<canvas id="salespersonChart"></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 warningColor = '#ffc107'; // A strong yellow
const dangerColor = '#e63757'; // A deep red
const chartColors = ['#00d27a', '#7249b6', '#32b9ff', '#e63757', '#ffc107'];
// 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 }
}
}
}
});
// 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: chartColors,
hoverOffset: 15,
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
labels: { color: '#343a40', 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}%)`;
}
}
}
}
}
});
// Salesperson Performance (Bar Chart)
const ctx_salesperson = document.getElementById('salespersonChart').getContext('2d');
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],
backgroundColor: chartColors,
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
title: { display: true, text: 'Top Salesperson Performance', font: { size: 16 } }
},
scales: {
x: {
title: { display: true, text: 'Salesperson Name', color: secondaryColor },
ticks: { color: secondaryColor }
},
y: {
beginAtZero: true,
title: { display: true, text: 'Number of Cars Sold', color: secondaryColor },
ticks: { color: secondaryColor }
}
}
}
});
</script>
{% endblock %}

View File

@ -6,7 +6,7 @@
{% endblocktrans %}
</h3>
<div class="row g-4 mb-5">
<div class="col-12">
<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">{% trans "Monthly Revenue & Profit" %}</h5>
@ -16,7 +16,7 @@
</div>
</div>
</div>
<div class="col-12">
<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">{% trans "Monthly Cars Sold" %}</h5>
@ -29,7 +29,7 @@
</div>
</div>
<div class="row g-4 mb-5">
<div class="col-lg-6 col-12">
<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">{% trans "Sales by Make" %}</h5>
@ -40,15 +40,15 @@
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="col-md-6">
<div class="card h-100 shadow-sm border-0">
<div class="card-header bg-white border-bottom-0 d-flex justify-content-between align-items-center">
<h5 class="fw-bold mb-0 text-dark">{% trans "Models Sold" %}</h5>
<h5 class="fw-bold mb-0 text-dark">{% trans "Models Sold By Make" %}</h5>
<form method="GET" class="d-flex align-items-center">
<div class="form-group d-flex align-items-center me-2">
<label for="carMakeSelectSales" class="form-label mb-0 me-2">{% trans "Select Make:" %}</label>
<label for="carMakeSelectSales" class="form-label mb-0 me-2"></label>
<select id="carMakeSelectSales" class="form-select" name="make_sold">
<option value="">{% trans "All Makes" %}</option>
<option value="">{% trans "Select Make" %}</option>
{% for make_sold in all_makes_sold %}
<option value="{{ make_sold }}"
{% if make_sold == selected_make_sales %}selected{% endif %}>
@ -62,9 +62,16 @@
<input type="hidden" name="end_date" value="{{ end_date|date:'Y-m-d' }}">
</form>
</div>
{%if selected_make_sales%}
<div class="card-body" style="height: 400px;">
<canvas id="salesChartByModel"></canvas>
</div>
{% else %}
<div class="card-body" style="height: 400px;">
<p class="ms-2">{% trans "Please Select a Make from above to see the Statistics" %}</p>
</div>
{% endif %}
</div>
</div>
</div>
@ -72,7 +79,7 @@
{% if request.is_dealer or request.is_manager or request.is_inventory %}
<h3 class="fw-bold mb-3">{% trans "Inventory Trends" %}</h3>
<div class="row g-4 mb-5">
<div class="col-lg-6 col-12">
<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">{% trans "Inventory by Make" %}</h5>
@ -83,15 +90,15 @@
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="col-md-6">
<div class="card h-100 shadow-sm border-0">
<div class="card-header bg-white border-bottom-0 d-flex justify-content-between align-items-center">
<h5 class="fw-bold mb-0 text-dark">{% trans "Models in Inventory" %}</h5>
<form method="GET" class="d-flex align-items-center">
<div class="form-group d-flex align-items-center me-2">
<label for="carMakeSelectInventory" class="form-label mb-0 me-2">{% trans "Select Make:" %}</label>
<label for="carMakeSelectInventory" class="form-label mb-0 me-2"></label>
<select id="carMakeSelectInventory" class="form-select" name="make_inventory">
<option value="">{% trans "All Makes" %}</option>
<option value="">{% trans "Select Make" %}</option>
{% for make_inv in all_makes_inventory %}
<option value="{{ make_inv }}"
{% if make_inv == selected_make_inventory %}selected{% endif %}>
@ -103,9 +110,17 @@
<button type="submit" class="btn btn-primary">{% trans "Go" %}</button>
</form>
</div>
<div class="card-body" style="height: 400px;">
<canvas id="inventoryByModelChart"></canvas>
</div>
{%if selected_make_inventory%}
<div class="card-body" style="height: 400px;">
<canvas id="inventoryByModelChart"></canvas>
</div>
{% else %}
<div class="card-body" style="height: 400px;">
<p class="ms-2">{% trans "Please Select a Make from above to see the Statistics" %}</p>
</div>
{% endif %}
</div>
</div>
</div>

View File

@ -58,8 +58,7 @@
<option value="">{% trans 'All Makes' %}</option>
{% for make in makes %}
<option value="{{ make }}" {% if make == selected_make %}selected{% endif %}>{{ make }}</option>
{% endfor %}
</select>
{% endfor %}
</div>
<div class="col-md-2">
<label for="model-select" class="form-label">{% trans 'Model' %}</label>
@ -277,28 +276,28 @@
<td class="fs-9">{{ car.stock_type|capfirst }}</td>
<td class="fs-9">{{ car.created_at|date }}</td>
<td class="fs-9">{{ car.invoice.date_paid|date|default_if_none:"-" }}</td>
<td class="fs-9">
<td class="fs-9 text-nowrap">
<span>{{ car.cost_price }}<span class="icon-saudi_riyal"></span></span>
</td>
<td class="fs-9">
<td class="fs-9 text-nowrap">
<span>{{ car.marked_price }} <span class="icon-saudi_riyal"></span></span>
</td>
<td class="fs-9">
<td class="fs-9 text-nowrap">
<span>{{ car.discount }} <span class="icon-saudi_riyal"></span></span>
</td>
<td class="fs-9">
<span>{{ car.final_price }} <span class="icon-saudi_riyal"></span></span>
<td class="fs-9 text-nowrap">
<span >{{ car.final_price }} <span class="icon-saudi_riyal"></span></span>
</td>
<td class="fs-9">
<td class="fs-9 text-nowrap">
<span>{{ car.vat_amount|floatformat:2 }} <span class="icon-saudi_riyal"></span></span>
</td>
<td class="fs-9">
<span>{{ car.get_additional_services.total|floatformat:2 }} <span class="icon-saudi_riyal"></span></span>
<td class="fs-9 text-nowrap">
<span >{{ car.get_additional_services.total|floatformat:2 }} <span class="icon-saudi_riyal"></span></span>
</td>
<td class="fs-9">
<td class="fs-9 text-nowrap">
<span>{{ car.get_additional_services.services_vat|floatformat:2 }}<span class="icon-saudi_riyal"></span></span>
</td>
<td class="fs-9">
<td class="fs-9 text-nowrap">
<span>{{ car.final_price_plus_services_plus_vat|floatformat:2 }}<span class="icon-saudi_riyal"></span></span>
</td>
<td class="fs-9">