300 lines
12 KiB
HTML
300 lines
12 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">Inventory Dashboard <i class="fas fa-warehouse 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-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 in Inventory</p>
|
|
<h4 class="fw-bolder text-primary mb-3">{{ total_cars_in_inventory }}</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-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">New Cars in Inventory</p>
|
|
<h4 class="fw-bolder text-success mb-3">{{ new_cars_in_inventory }}</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-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">Used Cars in Inventory</p>
|
|
<h4 class="fw-bolder text-info mb-3">{{ old_cars_in_inventory }}</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-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-warning 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>
|
|
|
|
<div class="row g-4 mb-5">
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="card h-100 p-4 shadow-sm border-0">
|
|
<p class="text-warning fw-bold mb-1">New Car Value</p>
|
|
<h4 class="fw-bolder mb-0">$3.2M</h4>
|
|
<p class="text-muted small">Total new cars value</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="card h-100 p-4 shadow-sm border-0">
|
|
<p class="text-info fw-bold mb-1">Used Car Value</p>
|
|
<h4 class="fw-bolder mb-0">$2.6M</h4>
|
|
<p class="text-muted small">Total used cars value</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="card h-100 p-4 shadow-sm border-0">
|
|
<p class="text-danger fw-bold mb-1">Average Time on Lot</p>
|
|
<h4 class="fw-bolder mb-0">10 days</h4>
|
|
<p class="text-muted small">Average for all vehicles</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="card h-100 p-4 shadow-sm border-0">
|
|
<p class="text-danger fw-bold mb-1">Aging Inventory</p>
|
|
<h4 class="fw-bolder mb-0">12 cars</h4>
|
|
<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>
|
|
|
|
<!--charts-->
|
|
<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">Inventory by Make</h5>
|
|
</div>
|
|
<div class="card-body d-flex align-items-center justify-content-center" style="height: 400px;">
|
|
<canvas id="inventoryByBrandChart"></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">Car Models by Make in Inventory</h5>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6 mb-4">
|
|
<label for="carMakeSelect" class="form-label fs-7">Select a Car Make:</label>
|
|
<select id="carMakeSelect" class="form-select">
|
|
<option value="" disabled selected>-- Choose a make --</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="card-body d-flex align-items-center justify-content-center" style="height: 400px;">
|
|
<canvas id="inventoryChart"></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
|
|
|
|
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: [
|
|
primaryColor,
|
|
successColor,
|
|
warningColor,
|
|
infoColor,
|
|
secondaryColor
|
|
],
|
|
hoverOffset: 15,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'right', // Places the legend on the right side
|
|
labels: {
|
|
color: secondaryColor, // Use a muted color for a subtle look
|
|
font: {
|
|
size: 14
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
backgroundColor: 'rgba(33, 37, 41, 0.9)', // Bootstrap dark
|
|
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}%)`;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
//chart for number of cars of each model in the inventory
|
|
|
|
|
|
|
|
// Sample data representing your inventory
|
|
const inventoryData = [
|
|
{ make: 'Ford', model: 'Mustang', count: 5 },
|
|
{ make: 'Ford', model: 'F-150', count: 12 },
|
|
{ make: 'Ford', model: 'Explorer', count: 8 },
|
|
{ make: 'Toyota', model: 'Camry', count: 10 },
|
|
{ make: 'Toyota', model: 'Corolla', count: 15 },
|
|
{ make: 'Toyota', model: 'RAV4', count: 7 },
|
|
{ make: 'BMW', model: 'X5', count: 4 },
|
|
{ make: 'BMW', model: '3 Series', count: 6 },
|
|
{ make: 'BMW', model: 'i8', count: 2 },
|
|
];
|
|
|
|
// Get the unique list of car makes for the dropdown
|
|
const carMakes = [...new Set(inventoryData.map(item => item.make))];
|
|
|
|
const selectElement = document.getElementById('carMakeSelect');
|
|
const canvasElement = document.getElementById('inventoryChart');
|
|
let chartInstance = null; // Stores the current chart instance
|
|
|
|
// Populate the dropdown menu
|
|
carMakes.forEach(make => {
|
|
const option = document.createElement('option');
|
|
option.value = make;
|
|
option.textContent = make;
|
|
selectElement.appendChild(option);
|
|
});
|
|
|
|
// Function to create or update the chart
|
|
function renderChart(data, type = 'bar') {
|
|
// Destroy the old chart instance if it exists
|
|
if (chartInstance) {
|
|
chartInstance.destroy();
|
|
}
|
|
|
|
const chartLabels = data.map(item => item.model);
|
|
const chartValues = data.map(item => item.count);
|
|
|
|
// Generate random colors for the chart segments
|
|
const backgroundColor = chartLabels.map(() => `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.6)`);
|
|
const borderColor = backgroundColor.map(color => color.replace('0.6', '1'));
|
|
|
|
// Create the new chart
|
|
chartInstance = new Chart(canvasElement, {
|
|
type: type, // Can be 'bar' or 'pie'
|
|
data: {
|
|
labels: chartLabels,
|
|
datasets: [{
|
|
label: 'Number of Cars',
|
|
data: chartValues,
|
|
backgroundColor: backgroundColor,
|
|
borderColor: borderColor,
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Event listener for the dropdown menu
|
|
selectElement.addEventListener('change', (event) => {
|
|
const selectedMake = event.target.value;
|
|
if (selectedMake) {
|
|
const filteredData = inventoryData.filter(item => item.make === selectedMake);
|
|
// The second parameter can be 'pie' to switch chart types
|
|
renderChart(filteredData, 'bar'); // Use 'bar' for a bar chart
|
|
}
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
{% endblock %} |