317 lines
12 KiB
HTML
317 lines
12 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% block home %}<a class="nav-link fw-bold">{% trans "home" %}</a>{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<div class="d-flex flex-column min-vh-100">
|
|
<div class="d-flex flex-column flex-grow-1 ms-sm-14 p-4">
|
|
<main class="d-grid gap-4 p-1">
|
|
<div class="row g-4">
|
|
<!-- Numbers Card -->
|
|
<div class="col-lg-4 col-xl-3">
|
|
<div class="card h-100 rounded shadow">
|
|
<div class="card-body">
|
|
<ul class="list-group">
|
|
<li class="list-group-item list-group-item-primary d-flex justify-content-between align-items-center">
|
|
{% trans 'inventory'|capfirst %}
|
|
<span class="badge bg-primary rounded-pill">{{ total_cars }}</span>
|
|
</li>
|
|
<li class="list-group-item list-group-item-danger d-flex justify-content-between align-items-center">
|
|
{% trans "Reserved Cars" %}
|
|
<span class="badge bg-danger rounded-pill">{{ total_reservations }}</span>
|
|
</li>
|
|
<li class="list-group-item list-group-item-primary d-flex justify-content-between align-items-center">
|
|
{% trans 'purchase orders'|capfirst %}
|
|
<span class="badge bg-primary rounded-pill">0</span>
|
|
</li>
|
|
<li class="list-group-item list-group-item-primary d-flex justify-content-between align-items-center">
|
|
{% trans 'invoices'|capfirst %}
|
|
<span class="badge bg-primary rounded-pill">0</span>
|
|
</li>
|
|
<li class="list-group-item list-group-item-primary d-flex justify-content-between align-items-center">
|
|
{% trans 'sold'|capfirst %}
|
|
<span class="badge bg-primary rounded-pill">0</span>
|
|
</li>
|
|
|
|
<li class="list-group-item list-group-item-danger d-flex justify-content-between align-items-center">
|
|
{% trans 'notifications'|capfirst %}
|
|
<span class="badge bg-danger rounded-pill">0</span>
|
|
</li>
|
|
<li class="list-group-item list-group-item-warning d-flex justify-content-between align-items-center">
|
|
{% trans 'transfer request'|capfirst %}
|
|
<span class="badge bg-warning rounded-pill">0</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Inventory Value Card -->
|
|
<div class="col-lg-4 col-xl-3">
|
|
<div class="card h-100 rounded shadow">
|
|
<div class="card-body">
|
|
<h4 class="card-title">{% trans 'inventory value' %}</h4>
|
|
<p class="card-text fw-lighter">{% trans 'View the current value of your car inventory.' %}</p>
|
|
<span class="display-5 text-center">{{ total_selling_price }} </span><span class="fw-lighter">{% trans 'SAR' %}</span>
|
|
<div class="container mt-4">
|
|
<strong class="fs-6">{% trans "Profitability" %}: </strong>
|
|
<span class="text-center">{{ total_profit }} </span><span class="fw-lighter">{% trans 'SAR' %}</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<button class="btn btn-sm btn-primary rounded">{% trans 'sales analytics' %}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Highest Customer Card -->
|
|
<div class="col-lg-4 col-xl-3">
|
|
<div class="card h-100 rounded shadow">
|
|
<div class="card-body">
|
|
<h4 class="card-title">{% trans 'top customers' %}</h4>
|
|
<p class="card-text fw-lighter">{% trans 'View your highest spending customer.'%}</p>
|
|
<div class="d-flex align-items-center">
|
|
<div class="rounded-circle border bg-light d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">WB</div>
|
|
<div class="ms-3">
|
|
<div class="fw-bold">Alwadi Albonni Showroom</div>
|
|
<div class="">1,500,000 <small class="fw-lighter">{% trans 'SAR' %}</small></div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center">
|
|
<div class="rounded-circle border bg-light d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">MA</div>
|
|
<div class="ms-3">
|
|
<div class="fw-bold">Marwan Alwali</div>
|
|
<div class="">640,000 <small class="fw-lighter">{% trans 'SAR' %}</small></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<button class="btn btn-sm btn-primary rounded">{% trans 'view customer' %}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Today's Pending Orders Card -->
|
|
<div class="col-lg-4 col-xl-3">
|
|
<div class="card h-100 rounded shadow">
|
|
<div class="card-body">
|
|
<h4 class="card-title">{% trans "Today's Pending Orders" %}</h4>
|
|
<p class="card-text fw-lighter">{% trans 'View your pending orders for today.' %}</p>
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans 'order'|capfirst %}</th>
|
|
<th>{% trans 'customer'|capfirst %}</th>
|
|
<th>{% trans 'amount'|capfirst %}</th>
|
|
<th>{% trans 'status'|capfirst %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>INV001</td>
|
|
<td>Othman</td>
|
|
<td>257,090 <small class="fw-lighter">{% trans 'SAR' %}</small></td>
|
|
<td><span class="badge rounded-pill bg-warning">{% trans 'pending'|capfirst %}</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>INV002</td>
|
|
<td>Ali</td>
|
|
<td>150,000 <small class="fw-lighter">{% trans 'SAR' %}</small></td>
|
|
<td><span class="badge rounded-pill bg-warning">{% trans 'pending'|capfirst %}</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>INV003</td>
|
|
<td>Mohammed</td>
|
|
<td>305,000 <small class="fw-lighter">{% trans 'SAR' %}</small></td>
|
|
<td><span class="badge rounded-pill bg-warning">{% trans 'pending'|capfirst %}</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<button class="btn btn-sm btn-primary rounded">{% trans 'view orders'|capfirst %}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Top Performing Products Card -->
|
|
<div class="col-lg-4 col-xl-3">
|
|
<div class="card h-100 rounded shadow">
|
|
<div class="card-body">
|
|
<h4 class="card-title">{% trans 'top selling cars'|capfirst %}</h4>
|
|
<p class="card-text fw-lighter">{% trans 'View your best-selling cars.' %}</p>
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans 'model'|capfirst %}</th>
|
|
<th>{% trans 'sales'|capfirst %}</th>
|
|
<th>{% trans 'revenue'|capfirst %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div class="fw-bold">Toyota</div>
|
|
<div class="">Camry</div>
|
|
</td>
|
|
<td>1,234</td>
|
|
<td>7,123,456 <small class="fw-lighter">{% trans 'SAR' %}</small></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="fw-bold">Hyundai</div>
|
|
<div class="">Accent</div>
|
|
</td>
|
|
<td>987</td>
|
|
<td>980,765 <small class="fw-lighter">{% trans 'SAR' %}</small></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="fw-bold">Toyota</div>
|
|
<div class="">FJ</div>
|
|
</td>
|
|
<td>654</td>
|
|
<td>9,765,432 <small class="fw-lighter">{% trans 'SAR' %}</small></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<a href="{% url 'inventory_stats' %}" class="btn btn-sm btn-primary rounded">{% trans 'view inventory'|capfirst %}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Daily Sales Card -->
|
|
<div class="col-lg-5 col-xl-4">
|
|
<div class="card h-100 rounded shadow">
|
|
<div class="card-body">
|
|
<h4 class="card-title">{% trans 'Daily Sales' %}</h4>
|
|
<p class="card-text fw-lighter">{% trans 'View your daily sales trends.' %}</p>
|
|
<div class="chart-container">
|
|
<canvas id="dailySalesChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const ctx = document.getElementById("dailySalesChart").getContext("2d");
|
|
const gradient = ctx.createLinearGradient(0, 0, 0, 400);
|
|
gradient.addColorStop(0, "rgba(40,54,67, 1)");
|
|
gradient.addColorStop(1, "rgba(0, 210, 255, 0.2)");
|
|
|
|
const dailySalesChart = new Chart(ctx, {
|
|
type: "bar",
|
|
data: {
|
|
labels: [
|
|
"{% trans 'Sun' %}",
|
|
"{% trans 'Mon' %}",
|
|
"{% trans 'Tue' %}",
|
|
"{% trans 'Wed' %}",
|
|
"{% trans 'Thu' %}",
|
|
"{% trans 'Fri' %}",
|
|
"{% trans 'Sat' %}"
|
|
],
|
|
datasets: [
|
|
{
|
|
label: "{% trans 'sales'|upper %}",
|
|
data: [120, 190, 300, 250, 200, 300, 400],
|
|
backgroundColor: gradient,
|
|
borderColor: "rgba(40,54,67, 1)",
|
|
borderWidth: 1,
|
|
borderRadius: 12,
|
|
borderSkipped: false,
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
layout: {
|
|
padding: {
|
|
left: 5,
|
|
right: 5,
|
|
top: 5,
|
|
bottom: 5,
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
grid: {
|
|
display: false,
|
|
},
|
|
ticks: {
|
|
font: {
|
|
family: "Arial",
|
|
size: 14,
|
|
weight: "bold",
|
|
},
|
|
},
|
|
},
|
|
y: {
|
|
grid: {
|
|
display: false,
|
|
},
|
|
ticks: {
|
|
font: {
|
|
family: "Arial",
|
|
size: 14,
|
|
weight: "bold",
|
|
},
|
|
},
|
|
beginAtZero: true,
|
|
},
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
labels: {
|
|
font: {
|
|
family: "Source Sans Pro",
|
|
size: 12,
|
|
weight: "regular",
|
|
},
|
|
usePointStyle: true,
|
|
pointStyle: "rectRounded",
|
|
},
|
|
},
|
|
tooltip: {
|
|
backgroundColor: "rgba(40,54,67, 0.8)",
|
|
titleFont: {
|
|
family: "Source Sans Pro",
|
|
size: 16,
|
|
weight: "bold",
|
|
},
|
|
bodyFont: {
|
|
family: "Source Sans Pro",
|
|
size: 14,
|
|
},
|
|
xPadding: 12,
|
|
yPadding: 12,
|
|
cornerRadius: 10,
|
|
displayColors: true,
|
|
},
|
|
},
|
|
elements: {
|
|
bar: {
|
|
hoverBackgroundColor: "rgba(17,46,64, 0.8)",
|
|
hoverBorderColor: "rgba(17,46,64, 0.8)",
|
|
hoverBorderWidth: 2,
|
|
},
|
|
},
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
},
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|