dashboards functionality
This commit is contained in:
parent
70807da5fa
commit
47a12e2965
@ -40,12 +40,15 @@ urlpatterns = [
|
||||
views.assign_car_makes,
|
||||
name="assign_car_makes",
|
||||
),
|
||||
path(
|
||||
"dashboards/manager/",
|
||||
views.ManagerDashboard.as_view(),
|
||||
name="manager_dashboard",
|
||||
),
|
||||
|
||||
|
||||
#dashboards
|
||||
path("dashboards/dealer/", views.DealerDashboard.as_view(),name="dealer_dashboard"),
|
||||
path( "dashboards/manager/", views.ManagerDashboard.as_view(),name="manager_dashboard"),
|
||||
path("dashboards/sales/", views.SalesDashboard.as_view(), name="sales_dashboard"),
|
||||
path("dashboards/accountant/", views.AccountantDashboard.as_view(), name="accountant_dashboard"),
|
||||
path("dashboards/inventory/", views.InventoryDashboard.as_view(), name="inventory_dashboard"),
|
||||
|
||||
|
||||
path("cars/inventory/table/", views.CarListViewTable.as_view(), name="car_table"),
|
||||
path("export/format/", TableExport.export, name="export"),
|
||||
|
||||
@ -386,7 +386,101 @@ class TestView(TemplateView):
|
||||
|
||||
template_name = "inventory/cars_list_api.html"
|
||||
|
||||
class DealerDashboard(LoginRequiredMixin, TemplateView):
|
||||
"""
|
||||
ManagerDashboard class is a view handling the dashboard for a manager.
|
||||
|
||||
Provides functionality to manage and view various statistics and data specific
|
||||
to the dealer associated with the authenticated manager. It uses a specific
|
||||
template and ensures authentication before granting access. The class
|
||||
aggregates data about cars, leads, financial statistics, and other related
|
||||
business information for display in the manager's dashboard.
|
||||
|
||||
:ivar template_name: Path to the template used for rendering the manager's dashboard.
|
||||
:type template_name: str
|
||||
"""
|
||||
|
||||
template_name = "dashboards/dealer_dashbaord.html"
|
||||
|
||||
# def dispatch(self, request, *args, **kwargs):
|
||||
# if not request.user.is_authenticated:
|
||||
# return redirect("welcome")
|
||||
# if not getattr(request.user, "dealer", False):
|
||||
# return HttpResponseForbidden(
|
||||
# "You are not authorized to view this dashboard."
|
||||
# )
|
||||
# return super().dispatch(request, *args, **kwargs)
|
||||
|
||||
def get_context_data(self, **kwargs):
|
||||
context = super().get_context_data(**kwargs)
|
||||
dealer = get_user_type(self.request)
|
||||
entity = dealer.entity
|
||||
|
||||
qs = models.Car.objects.filter(dealer=dealer)
|
||||
total_cars = qs.count()
|
||||
|
||||
stats = models.CarFinance.objects.filter(car__dealer=dealer).aggregate(
|
||||
total_cost_price=Sum("cost_price"),
|
||||
total_selling_price=Sum("selling_price"),
|
||||
)
|
||||
total_cost_price = stats["total_cost_price"] or 0
|
||||
total_selling_price = stats["total_selling_price"] or 0
|
||||
total_profit = total_selling_price - total_cost_price
|
||||
|
||||
new_leads = models.Lead.objects.filter(
|
||||
dealer=dealer, status=models.Status.NEW
|
||||
).count()
|
||||
pending_leads = models.Lead.objects.filter(
|
||||
dealer=dealer, status=models.Status.CONTACTED
|
||||
).count()
|
||||
canceled_leads = models.Lead.objects.filter(
|
||||
dealer=dealer, status=models.Status.UNQUALIFIED
|
||||
).count()
|
||||
|
||||
car_status_qs = qs.values("status").annotate(count=Count("status"))
|
||||
car_status = {status: count for status, count in car_status_qs}
|
||||
|
||||
car_by_make_qs = qs.values("id_car_make__name").annotate(count=Count("id"))
|
||||
car_by_make = list(car_by_make_qs)
|
||||
|
||||
context["dealer"] = dealer
|
||||
context["total_activity"] = models.UserActivityLog.objects.filter(
|
||||
user=dealer.user
|
||||
).count()
|
||||
context["total_cars"] = total_cars
|
||||
context["total_reservations"] = models.CarReservation.objects.filter(
|
||||
reserved_until__gte=timezone.now()
|
||||
).count()
|
||||
context["total_cost_price"] = total_cost_price
|
||||
context["total_selling_price"] = total_selling_price
|
||||
context["total_profit"] = total_profit
|
||||
context["new_leads"] = new_leads
|
||||
context["pending_leads"] = pending_leads
|
||||
context["canceled_leads"] = canceled_leads
|
||||
context["car"] = json.dumps(car_by_make)
|
||||
|
||||
|
||||
context["available_cars"] =qs.filter(status='available').count()
|
||||
context["sold_cars"] = qs.filter(status='sold').count()
|
||||
context["reserved_cars"] = qs.filter(status='reserved').count()
|
||||
context["hold_cars"] =qs.filter(status='hold').count()
|
||||
context["damaged_cars"] = qs.filter(status='damaged').count()
|
||||
context["transfer_cars"] = qs.filter(status='transfer').count()
|
||||
context["present_inventory_count"]=total_cars-context["sold_cars"]-context["damaged_cars"]
|
||||
cars_sold=qs.filter(status='sold')
|
||||
# cars_sold.aggregate(total_inventory_value=sum())
|
||||
|
||||
|
||||
context["customers"] = entity.get_customers().count()
|
||||
context["staff"] = models.Staff.objects.filter(dealer=dealer).count()
|
||||
context["total_leads"] = models.Lead.objects.filter(dealer=dealer).count()
|
||||
context["invoices"] = entity.get_invoices().count()
|
||||
context["estimates"] = entity.get_estimates().count()
|
||||
context["purchase_orders"] = entity.get_purchase_orders().count()
|
||||
|
||||
|
||||
|
||||
return context
|
||||
|
||||
class ManagerDashboard(LoginRequiredMixin, TemplateView):
|
||||
"""
|
||||
@ -402,7 +496,7 @@ class ManagerDashboard(LoginRequiredMixin, TemplateView):
|
||||
:type template_name: str
|
||||
"""
|
||||
|
||||
template_name = "dashboards/manager.html"
|
||||
template_name = "dashboards/manager_dashboard.html"
|
||||
|
||||
# def dispatch(self, request, *args, **kwargs):
|
||||
# if not request.user.is_authenticated:
|
||||
@ -485,6 +579,9 @@ class ManagerDashboard(LoginRequiredMixin, TemplateView):
|
||||
return context
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
class SalesDashboard(LoginRequiredMixin, TemplateView):
|
||||
"""
|
||||
SalesDashboard class provides a view for the sales dashboard.
|
||||
@ -503,7 +600,152 @@ class SalesDashboard(LoginRequiredMixin, TemplateView):
|
||||
:type template_name: str
|
||||
"""
|
||||
|
||||
template_name = "dashboards/sales.html"
|
||||
template_name = "dashboards/sales_dashboard.html"
|
||||
|
||||
def get_context_data(self, **kwargs):
|
||||
context = super().get_context_data(**kwargs)
|
||||
dealer = self.request.dealer
|
||||
staff = getattr(self.request, "staff", None)
|
||||
total_cars = models.Car.objects.filter(dealer=dealer).count()
|
||||
total_reservations = models.CarReservation.objects.filter(
|
||||
reserved_by=self.request.user, reserved_until__gte=timezone.now()
|
||||
).count()
|
||||
|
||||
available_cars = models.Car.objects.filter(
|
||||
dealer=dealer, status=models.CarStatusChoices.AVAILABLE
|
||||
).count()
|
||||
sold_cars = models.Car.objects.filter(
|
||||
dealer=dealer, status=models.CarStatusChoices.SOLD
|
||||
).count()
|
||||
reserved_cars = models.Car.objects.filter(
|
||||
dealer=dealer, status=models.CarStatusChoices.RESERVED
|
||||
).count()
|
||||
hold_cars = models.Car.objects.filter(
|
||||
dealer=dealer, status=models.CarStatusChoices.HOLD
|
||||
).count()
|
||||
damaged_cars = models.Car.objects.filter(
|
||||
dealer=dealer, status=models.CarStatusChoices.DAMAGED
|
||||
).count()
|
||||
transfer_cars = models.Car.objects.filter(
|
||||
dealer=dealer, status=models.CarStatusChoices.TRANSFER
|
||||
).count()
|
||||
reserved_percentage = reserved_cars / total_cars * 100
|
||||
sold_percentage = sold_cars / total_cars * 100
|
||||
qs = (
|
||||
models.Car.objects.values("id_car_make__name")
|
||||
.annotate(count=Count("id"))
|
||||
.order_by("id_car_make__name")
|
||||
)
|
||||
car_by_make = list(qs)
|
||||
|
||||
context["dealer"] = dealer
|
||||
context["staff"] = staff
|
||||
context["total_cars"] = total_cars
|
||||
context["total_reservations"] = total_reservations
|
||||
context["reserved_percentage"] = reserved_percentage
|
||||
context["sold_percentage"] = sold_percentage
|
||||
context["available_cars"] = available_cars
|
||||
context["sold_cars"] = sold_cars
|
||||
context["reserved_cars"] = reserved_cars
|
||||
context["hold_cars"] = hold_cars
|
||||
context["damaged_cars"] = damaged_cars
|
||||
context["transfer_cars"] = transfer_cars
|
||||
context["car"] = json.dumps(car_by_make)
|
||||
|
||||
return context
|
||||
|
||||
|
||||
class InventoryDashboard(LoginRequiredMixin, TemplateView):
|
||||
"""
|
||||
SalesDashboard class provides a view for the sales dashboard.
|
||||
|
||||
This class is responsible for generating the context data required to
|
||||
display various statistics and information on the sales dashboard. It
|
||||
inherits from `LoginRequiredMixin` and `TemplateView`, ensuring only
|
||||
authenticated users can access the view. The dashboard includes data
|
||||
such as the total number of cars, reservations, sold percentages,
|
||||
reserved percentages, and cars categorized by various statuses. The
|
||||
purpose of this dashboard is to provide dealership staff an overview
|
||||
of their inventory and related sales metrics.
|
||||
|
||||
:ivar template_name: The name of the HTML template used for rendering
|
||||
the sales dashboard.
|
||||
:type template_name: str
|
||||
"""
|
||||
|
||||
template_name = "dashboards/inventory_dashboard.html"
|
||||
|
||||
def get_context_data(self, **kwargs):
|
||||
context = super().get_context_data(**kwargs)
|
||||
dealer = self.request.dealer
|
||||
staff = getattr(self.request, "staff", None)
|
||||
total_cars = models.Car.objects.filter(dealer=dealer).count()
|
||||
total_reservations = models.CarReservation.objects.filter(
|
||||
reserved_by=self.request.user, reserved_until__gte=timezone.now()
|
||||
).count()
|
||||
|
||||
available_cars = models.Car.objects.filter(
|
||||
dealer=dealer, status=models.CarStatusChoices.AVAILABLE
|
||||
).count()
|
||||
sold_cars = models.Car.objects.filter(
|
||||
dealer=dealer, status=models.CarStatusChoices.SOLD
|
||||
).count()
|
||||
reserved_cars = models.Car.objects.filter(
|
||||
dealer=dealer, status=models.CarStatusChoices.RESERVED
|
||||
).count()
|
||||
hold_cars = models.Car.objects.filter(
|
||||
dealer=dealer, status=models.CarStatusChoices.HOLD
|
||||
).count()
|
||||
damaged_cars = models.Car.objects.filter(
|
||||
dealer=dealer, status=models.CarStatusChoices.DAMAGED
|
||||
).count()
|
||||
transfer_cars = models.Car.objects.filter(
|
||||
dealer=dealer, status=models.CarStatusChoices.TRANSFER
|
||||
).count()
|
||||
reserved_percentage = reserved_cars / total_cars * 100
|
||||
sold_percentage = sold_cars / total_cars * 100
|
||||
qs = (
|
||||
models.Car.objects.values("id_car_make__name")
|
||||
.annotate(count=Count("id"))
|
||||
.order_by("id_car_make__name")
|
||||
)
|
||||
car_by_make = list(qs)
|
||||
|
||||
context["dealer"] = dealer
|
||||
context["staff"] = staff
|
||||
context["total_cars"] = total_cars
|
||||
context["total_reservations"] = total_reservations
|
||||
context["reserved_percentage"] = reserved_percentage
|
||||
context["sold_percentage"] = sold_percentage
|
||||
context["available_cars"] = available_cars
|
||||
context["sold_cars"] = sold_cars
|
||||
context["reserved_cars"] = reserved_cars
|
||||
context["hold_cars"] = hold_cars
|
||||
context["damaged_cars"] = damaged_cars
|
||||
context["transfer_cars"] = transfer_cars
|
||||
context["car"] = json.dumps(car_by_make)
|
||||
|
||||
return context
|
||||
|
||||
class AccountantDashboard(LoginRequiredMixin, TemplateView):
|
||||
"""
|
||||
SalesDashboard class provides a view for the sales dashboard.
|
||||
|
||||
This class is responsible for generating the context data required to
|
||||
display various statistics and information on the sales dashboard. It
|
||||
inherits from `LoginRequiredMixin` and `TemplateView`, ensuring only
|
||||
authenticated users can access the view. The dashboard includes data
|
||||
such as the total number of cars, reservations, sold percentages,
|
||||
reserved percentages, and cars categorized by various statuses. The
|
||||
purpose of this dashboard is to provide dealership staff an overview
|
||||
of their inventory and related sales metrics.
|
||||
|
||||
:ivar template_name: The name of the HTML template used for rendering
|
||||
the sales dashboard.
|
||||
:type template_name: str
|
||||
"""
|
||||
|
||||
template_name = "dashboards/accountant_dashboard.html"
|
||||
|
||||
def get_context_data(self, **kwargs):
|
||||
context = super().get_context_data(**kwargs)
|
||||
@ -10559,7 +10801,7 @@ def upload_cars(request, dealer_slug, pk=None):
|
||||
|
||||
response = redirect("upload_cars", dealer_slug=dealer_slug, pk=pk)
|
||||
if po_item.status == "uploaded":
|
||||
messages.add_message(request, messages.ERROR, "Item already uploaded.")
|
||||
messages.add_message(request, messages.SUCCESS, "Item uploaded Sucessfully.")
|
||||
return redirect(
|
||||
"view_items_inventory",
|
||||
dealer_slug=dealer_slug,
|
||||
|
||||
218
templates/dashboards/accountant_dashboard.html
Normal file
218
templates/dashboards/accountant_dashboard.html
Normal file
@ -0,0 +1,218 @@
|
||||
{% 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">Accountant 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">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 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">
|
||||
+8% from last month
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="h5 fw-bold mb-3 text-dark">Breakdown by Vehicle Type</h4>
|
||||
<div class="row g-4 mb-5">
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 p-4 shadow-sm border-0">
|
||||
<p class="text-primary fw-bold mb-1">New Cars</p>
|
||||
<h4 class="fw-bolder mb-0">$1.25M</h4>
|
||||
<p class="text-muted small">Total Revenue</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 p-4 shadow-sm border-0">
|
||||
<p class="text-success fw-bold mb-1">Used Cars</p>
|
||||
<h4 class="fw-bolder mb-0">$0.75M</h4>
|
||||
<p class="text-muted small">Total Revenue</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 p-4 shadow-sm border-0">
|
||||
<p class="text-info fw-bold mb-1">New Cars</p>
|
||||
<h4 class="fw-bolder mb-0">$0.25M</h4>
|
||||
<p class="text-muted small">Net Profit</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 p-4 shadow-sm border-0">
|
||||
<p class="text-warning fw-bold mb-1">Used Cars</p>
|
||||
<h4 class="fw-bolder mb-0">$0.15M</h4>
|
||||
<p class="text-muted small">Net Profit</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-12">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% 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
|
||||
|
||||
const ctx = document.getElementById('revenueProfitChart').getContext('2d');
|
||||
new Chart(ctx, {
|
||||
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)',
|
||||
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)',
|
||||
tension: 0.4,
|
||||
fill: true,
|
||||
pointBackgroundColor: successColor,
|
||||
pointRadius: 5,
|
||||
pointHoverRadius: 8
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
labels: {
|
||||
color: secondaryColor,
|
||||
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 %}
|
||||
243
templates/dashboards/dealer_dashbaord.html
Normal file
243
templates/dashboards/dealer_dashbaord.html
Normal file
@ -0,0 +1,243 @@
|
||||
{% 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 text-dark mb-0">Business Health 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">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 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">Total VAT Collected</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">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>
|
||||
|
||||
<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 %}
|
||||
300
templates/dashboards/inventory_dashboard.html
Normal file
300
templates/dashboards/inventory_dashboard.html
Normal file
@ -0,0 +1,300 @@
|
||||
{% 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 %}
|
||||
@ -1,641 +0,0 @@
|
||||
{% 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 %}
|
||||
367
templates/dashboards/manager_dashboard.html
Normal file
367
templates/dashboards/manager_dashboard.html
Normal file
@ -0,0 +1,367 @@
|
||||
{% 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 %}
|
||||
356
templates/dashboards/sales_dashboard.html
Normal file
356
templates/dashboards/sales_dashboard.html
Normal file
@ -0,0 +1,356 @@
|
||||
{% 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">Sales & Leads 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">
|
||||
<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">
|
||||
<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 Sold</p>
|
||||
<h4 class="fw-bolder text-info mb-3">{{ sold_used_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">
|
||||
<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 Sold</p>
|
||||
<h4 class="fw-bolder text-primary mb-3">{{ sold_new_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>
|
||||
|
||||
<div class="row g-4 mb-5">
|
||||
<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">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 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">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>
|
||||
|
||||
<div class="row g-4 mb-5">
|
||||
<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">Top 5 Lead Sources</h5>
|
||||
</div>
|
||||
<div class="card-body d-flex align-items-center justify-content-center" style="height: 400px;">
|
||||
<canvas id="leadSourcesChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">Appointments by Weekday</h5>
|
||||
</div>
|
||||
<div class="card-body d-flex align-items-center justify-content-center" style="height: 400px;">
|
||||
<canvas id="appointmentsChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-12">
|
||||
<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">Lead Conversion Funnel</h5>
|
||||
</div>
|
||||
<div class="card-body d-flex align-items-center justify-content-center" style="height: 400px;">
|
||||
<canvas id="leadFunnelChart"></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
|
||||
|
||||
// Sales by Month Chart (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 }
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 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: [primaryColor, successColor, warningColor, infoColor, secondaryColor],
|
||||
hoverOffset: 15,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'right',
|
||||
labels: { color: secondaryColor, 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}%)`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Top 5 Lead Sources (Horizontal Bar Chart)
|
||||
const ctx_leadSources = document.getElementById('leadSourcesChart').getContext('2d');
|
||||
new Chart(ctx_leadSources, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Showroom', 'Referrals', 'WhatsApp', 'Facebook', 'TikTok'],
|
||||
datasets: [{
|
||||
label: 'Number of Leads',
|
||||
data: [45, 35, 25, 20, 15],
|
||||
backgroundColor: infoColor,
|
||||
borderColor: infoColor,
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
indexAxis: 'y',
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
title: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(33, 37, 41, 0.9)',
|
||||
titleColor: '#fff',
|
||||
bodyColor: '#fff',
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
beginAtZero: true,
|
||||
title: { display: true, text: 'Number of Leads', color: secondaryColor },
|
||||
ticks: { color: secondaryColor },
|
||||
grid: { color: 'rgba(0, 0, 0, 0.05)' }
|
||||
},
|
||||
y: {
|
||||
grid: { display: false },
|
||||
ticks: { color: secondaryColor }
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Appointments by Weekday (Bar Chart)
|
||||
const ctx_appointments = document.getElementById('appointmentsChart').getContext('2d');
|
||||
new Chart(ctx_appointments, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
datasets: [{
|
||||
label: 'Number of Appointments',
|
||||
data: [10, 15, 20, 18, 25, 30, 12],
|
||||
backgroundColor: successColor,
|
||||
borderColor: successColor,
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
title: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(33, 37, 41, 0.9)',
|
||||
titleColor: '#fff',
|
||||
bodyColor: '#fff',
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
title: { display: true, text: 'Day of the Week', color: secondaryColor },
|
||||
ticks: { color: secondaryColor },
|
||||
grid: { display: false }
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
title: { display: true, text: 'Number of Appointments', color: secondaryColor },
|
||||
ticks: { color: secondaryColor },
|
||||
grid: { color: 'rgba(0, 0, 0, 0.05)' }
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Lead Conversion Funnel (Horizontal Bar Chart)
|
||||
const ctx_funnel = document.getElementById('leadFunnelChart').getContext('2d');
|
||||
const funnelData = {
|
||||
labels: ['Initial Contact', 'Qualified Leads', 'Test Drives', 'Negotiation', 'Closed Deals'],
|
||||
data: [250, 180, 120, 80, 45],
|
||||
};
|
||||
new Chart(ctx_funnel, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: funnelData.labels,
|
||||
datasets: [{
|
||||
label: 'Number of Leads',
|
||||
data: funnelData.data,
|
||||
backgroundColor: [
|
||||
primaryColor,
|
||||
infoColor,
|
||||
successColor,
|
||||
warningColor,
|
||||
dangerColor
|
||||
],
|
||||
borderColor: [
|
||||
primaryColor,
|
||||
infoColor,
|
||||
successColor,
|
||||
warningColor,
|
||||
dangerColor
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
indexAxis: 'y',
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
title: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(33, 37, 41, 0.9)',
|
||||
titleColor: '#fff',
|
||||
bodyColor: '#fff',
|
||||
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
|
||||
},
|
||||
y: {
|
||||
grid: { display: false },
|
||||
ticks: { color: secondaryColor }
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@ -3,10 +3,16 @@
|
||||
{% block content %}
|
||||
{% if request.user.is_authenticated %}
|
||||
<div id="dashboard-content"
|
||||
hx-get="{% if request.dealer %}
|
||||
hx-get="{% if request.is_dealer %}
|
||||
{% url 'dealer_dashboard' %}
|
||||
{% elif request.is_manger %}
|
||||
{% url 'manager_dashboard' %}
|
||||
{% else %}
|
||||
{% elif request.is_sales %}
|
||||
{% url 'sales_dashboard' %}
|
||||
{% elif request.is_inventory %}
|
||||
{% url 'inventory_dashboard' %}
|
||||
{% else %}
|
||||
{% url 'accountant_dashboard' %}
|
||||
{% endif %}"
|
||||
hx-trigger="load"
|
||||
hx-target="#dashboard-content"
|
||||
|
||||
@ -88,13 +88,13 @@
|
||||
}
|
||||
|
||||
.color-radio:checked + .color-display {
|
||||
border: 2px solid #0d6efd;
|
||||
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
|
||||
border: 3px solid rgb(44, 229, 44);
|
||||
box-shadow: 0 0 10px rgba(44, 123, 229, 0.5);
|
||||
}
|
||||
|
||||
.color-radio:focus + .color-display {
|
||||
border-color: #86b7fe;
|
||||
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
|
||||
border: 3px solid rgb(44, 229, 44);
|
||||
box-shadow: 0 0 10px rgba(44, 123, 229, 0.5);
|
||||
}
|
||||
|
||||
.color-display {
|
||||
|
||||
@ -189,23 +189,12 @@
|
||||
hx-on::before-request="on_before_request()"
|
||||
hx-on::after-request="on_after_request()"></div>
|
||||
<div class="w-100 list table-responsive">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input ms-4" type="checkbox" id="select-all" />
|
||||
<span class="ms-1 text-body-tertiary">{{ _("Select All") }}</span>
|
||||
</div>
|
||||
|
||||
{% for car in cars %}
|
||||
<div class="card border mb-3 py-0 px-0" id="project-list-table-body">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input car-checkbox"
|
||||
type="checkbox"
|
||||
name="car"
|
||||
value="{{ car.pk }}"
|
||||
id="car-{{ car.pk }}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vehicle Image/Icon -->
|
||||
<div class="col-auto">
|
||||
<div class="avatar avatar-3xl">
|
||||
@ -322,68 +311,5 @@
|
||||
|
||||
|
||||
{% endblock %}
|
||||
{% block customJS %}
|
||||
<script>
|
||||
links = document.querySelectorAll(".nav-link");
|
||||
links.forEach((link) => {
|
||||
link.addEventListener("click", () => {
|
||||
links.forEach((link) => {
|
||||
link.classList.remove("active");
|
||||
});
|
||||
link.classList.add("active");
|
||||
});
|
||||
});
|
||||
function on_before_request() {
|
||||
document.querySelector(".table").classList.toggle("on-before-request");
|
||||
document.querySelector(".model-select").classList.add("on-after-request");
|
||||
}
|
||||
function on_after_request() {
|
||||
document.querySelector(".table").classList.remove("on-before-request");
|
||||
document.querySelector(".model-select").classList.remove("on-after-request");
|
||||
}
|
||||
function toggle_filter() {
|
||||
document.querySelector(".filter").classList.toggle("d-none");
|
||||
document.querySelector(".filter-icon").classList.toggle("fa-caret-down");
|
||||
document.querySelector(".filter-icon").classList.toggle("fa-caret-up");
|
||||
}
|
||||
function filter_before_request() {
|
||||
document.querySelector(".model-select").setAttribute("disabled", true);
|
||||
document.querySelector(".year").setAttribute("disabled", true);
|
||||
document.querySelector(".car_status").setAttribute("disabled", true);
|
||||
}
|
||||
function filter_after_request() {
|
||||
document.querySelector(".model-select").removeAttribute("disabled");
|
||||
document.querySelector(".year").removeAttribute("disabled");
|
||||
document.querySelector(".car_status").removeAttribute("disabled");
|
||||
}
|
||||
|
||||
document.getElementById("select-all").addEventListener("change", function () {
|
||||
const checkboxes = document.querySelectorAll('#project-list-table-body input[type="checkbox"]');
|
||||
if (this.checked) {
|
||||
checkboxes.forEach((checkbox) => (checkbox.checked = true));
|
||||
} else {
|
||||
checkboxes.forEach((checkbox) => (checkbox.checked = false));
|
||||
}
|
||||
updateFormVisibility();
|
||||
});
|
||||
|
||||
const cbox = document.querySelectorAll(".car-checkbox");
|
||||
cbox.forEach((checkbox) => {
|
||||
checkbox.addEventListener("change", function () {
|
||||
updateFormVisibility();
|
||||
});
|
||||
});
|
||||
|
||||
function updateFormVisibility() {
|
||||
const form = document.querySelector(".update-price-form");
|
||||
const checkedCount = document.querySelectorAll(".car-checkbox:checked").length;
|
||||
const submitButton = form.querySelector('button[type="submit"]');
|
||||
if (checkedCount > 0) {
|
||||
form.classList.remove("d-none");
|
||||
submitButton.textContent = `Update Cost Price (${checkedCount})`;
|
||||
} else {
|
||||
form.classList.add("d-none");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock customJS %}
|
||||
|
||||
|
||||
@ -36,13 +36,13 @@
|
||||
}
|
||||
|
||||
.color-radio:checked + .color-display {
|
||||
border: 2px solid #0d6efd;
|
||||
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
|
||||
border: 3px solid rgb(44, 229, 44);
|
||||
box-shadow: 0 0 10px rgba(44, 123, 229, 0.5);
|
||||
}
|
||||
|
||||
.color-radio:focus + .color-display {
|
||||
border-color: #86b7fe;
|
||||
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
|
||||
border: 3px solid rgb(44, 229, 44);
|
||||
box-shadow: 0 0 10px rgba(44, 123, 229, 0.5);
|
||||
}
|
||||
|
||||
.color-display {
|
||||
|
||||
@ -112,7 +112,7 @@
|
||||
onclick="setFormAction('review')"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#confirmModal">
|
||||
<span class="d-none d-sm-inline-block"><i class="fa-solid fa-check-double"></i> {% trans 'Mark As Review' %}</span>
|
||||
<i class="fa-solid fa-check-double me-1"></i><span class="d-none d-sm-inline-block"> {% trans 'Mark As Review' %}</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
{% elif estimate.status == 'in_review' %}
|
||||
@ -122,45 +122,46 @@
|
||||
class="btn btn-phoenix-secondary"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#confirmModal">
|
||||
<span class="d-none d-sm-inline-block"><i class="fa-solid fa-check-double"></i> {% trans 'Mark As Approved' %}</span>
|
||||
<i class="fa-solid fa-check-double me-1"></i> <span class="d-none d-sm-inline-block">{% trans 'Mark As Approved' %}</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
{% if estimate.can_approve and not request.is_manager %}
|
||||
<button class="btn btn-phoenix-warning" disabled>
|
||||
<i class="fas fa-hourglass-start me-2"></i><span class="text-warning">{% trans 'Waiting for Manager Approval' %}</span>
|
||||
<i class="fas fa-hourglass-start me-1"></i><span class="text-warning d-none d-sm-inline-block ">{% trans 'Waiting for Manager Approval' %}</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
{% elif estimate.status == 'approved' %}
|
||||
{% if perms.django_ledger.change_estimatemodel %}
|
||||
<a href="{% url 'send_email' request.dealer.slug estimate.pk %}"
|
||||
class="btn btn-phoenix-primary me-2"><span class="fa-regular fa-paper-plane me-sm-2"></span><span class="d-none d-sm-inline-block">{% trans 'Send Quotation' %}</span></a>
|
||||
class="btn btn-phoenix-primary me-2"><span class="fa-regular fa-paper-plane me-1"></span><span class="d-none d-sm-inline-block">{% trans 'Send Quotation' %}</span></a>
|
||||
{% endif %}
|
||||
{% if estimate.sale_orders.first %}
|
||||
<!--if sale order exist-->
|
||||
{% if perms.django_ledger.add_invoicemodel %}
|
||||
<a href="{% url 'invoice_create' request.dealer.slug estimate.pk %}"
|
||||
class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block"><i class="fa-solid fa-receipt"></i> {% trans 'Create Invoice' %}</span></a>
|
||||
class="btn btn-phoenix-primary"><i class="fa-solid fa-receipt me-1"></i><span class="d-none d-sm-inline-block me-1"> {% trans 'Create Invoice' %}</span></a>
|
||||
{% endif %}
|
||||
{% if perms.inventory.view_saleorder %}
|
||||
<a href="{% url 'order_detail' request.dealer.slug estimate.sale_orders.first.pk %}"
|
||||
class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block">{{ _("Preview Sale Order") }}</span></a>
|
||||
class="btn btn-phoenix-primary"><i class="fas fa-shopping-cart me-1"></i><span class="d-none d-sm-inline-block">{{ _("Preview Sale Order") }}</span></a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if perms.inventory.add_saleorder %}
|
||||
<a href="{% url 'create_sale_order' request.dealer.slug estimate.pk %}"
|
||||
class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block"><i class="fa-solid fa-file-import"></i> {% trans 'Create Sale Order' %}</span></a>
|
||||
class="btn btn-phoenix-primary"><i class="fa-solid fa-file-import me-1"></i><span class="d-none d-sm-inline-block"> {% trans 'Create Sale Order' %}</span></a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% elif estimate.status == 'completed' %}
|
||||
{% if perms.inventory.view_saleorder %}
|
||||
<a href="{% url 'order_detail' request.dealer.slug estimate.sale_orders.first.pk %}"
|
||||
class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block">{{ _("Preview Sale Order") }}</span></a>
|
||||
class="btn btn-phoenix-primary"><i class="fas fa-shopping-cart me-1"></i><span class="d-none d-sm-inline-block">{{ _("Preview Sale Order") }}</span></a>
|
||||
{% endif %}
|
||||
{% if perms.django_ledger.view_invoicemodel %}
|
||||
<a href="{% url 'invoice_detail' request.dealer.slug request.entity.slug estimate.invoicemodel_set.first.pk %}"
|
||||
class="btn btn-phoenix-primary btn-sm"
|
||||
type="button"><i class="fa-solid fa-receipt"></i>
|
||||
{{ _("View Invoice") }}</a>
|
||||
type="button"><i class="fa-solid fa-receipt me-1"></i>
|
||||
<span class="d-none d-sm-inline-block">{{ _("View Invoice") }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if estimate.can_cancel %}
|
||||
@ -168,7 +169,7 @@
|
||||
<button class="btn btn-phoenix-danger"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#CancelModal">
|
||||
<i class="fa-solid fa-ban"></i> {% trans "Cancel" %}
|
||||
<i class="fa-solid fa-ban me-1"></i> <span class="d-none d-sm-inline-block">{% trans "Cancel" %}</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
@ -178,31 +179,31 @@
|
||||
<div class="row">
|
||||
<div class="col mb-2">
|
||||
<h6>
|
||||
<i class="fa-solid fa-hashtag"></i> {% trans 'Quotation Number' %}:
|
||||
<i class="fa-solid fa-hashtag me-1"></i> {% trans 'Quotation Number' %}:
|
||||
</h6>
|
||||
<p class="fs-9 text-body-secondary fw-semibold mb-0">{{ estimate.estimate_number }}</p>
|
||||
</div>
|
||||
<div class="col mb-2">
|
||||
<h6>
|
||||
<i class="fa-solid fa-calendar-days"></i> {% trans 'Quotation Date' %}:
|
||||
<i class="fa-solid fa-calendar-days me-1"></i> {% trans 'Quotation Date' %}:
|
||||
</h6>
|
||||
<p class="fs-9 text-body-secondary fw-semibold mb-0">{{ estimate.created }}</p>
|
||||
</div>
|
||||
<div class="col mb-2">
|
||||
<h6>
|
||||
<i class="fa-solid fa-user"></i> {% trans 'Customer' %}:
|
||||
<i class="fa-solid fa-user me-1"></i> {% trans 'Customer' %}:
|
||||
</h6>
|
||||
<p class="fs-9 text-body-secondary fw-semibold mb-0">{{ estimate.customer.customer_name }}</p>
|
||||
</div>
|
||||
<div class="col mb-2">
|
||||
<h6>
|
||||
<i class="fa-solid fa-envelope"></i> {% trans 'Email' %}:
|
||||
<i class="fa-solid fa-envelope me-1"></i> {% trans 'Email' %}:
|
||||
</h6>
|
||||
<p class="fs-9 text-body-secondary fw-semibold mb-0">{{ estimate.customer.email }}</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h6>
|
||||
<i class="fa-solid fa-list"></i> {% trans "Quotation Status" %}:
|
||||
<i class="fa-solid fa-list me-1"></i> {% trans "Quotation Status" %}:
|
||||
</h6>
|
||||
<div class="fs-9 text-body-secondary fw-semibold mb-0">
|
||||
{% if estimate.status == 'draft' %}
|
||||
|
||||
@ -2,108 +2,107 @@
|
||||
{% load static %}
|
||||
{% load i18n %}
|
||||
{% block title %}
|
||||
{{ _("View Staff") }}
|
||||
{{ user_.name }}
|
||||
{% endblock title %}
|
||||
{% block content %}
|
||||
<div class="row my-5">
|
||||
<div class="card rounded ">
|
||||
<div class="card-header ">
|
||||
<p class="mb-0">
|
||||
<i class="fa-solid fa-user"></i> {{ _("User Details") }}
|
||||
</p>
|
||||
<div class="container py-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="{% url 'user_list' request.dealer.slug %}" class="btn btn-phoenix-secondary btn-sm me-3">
|
||||
<i class="fa-regular fa-circle-left me-2"></i>{% trans "Back to Staffs" %}
|
||||
</a>
|
||||
<h1 class="h5 fw-bold mb-0">{% trans "Staff Profile" %}</h1>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
{% if user_.logo %}
|
||||
<img class="rounded-circle"
|
||||
src="{{ user_.logo.url }}"
|
||||
style="width: 100px;
|
||||
height: 100px"
|
||||
alt="User Image">
|
||||
{% else %}
|
||||
<img class="rounded-circle"
|
||||
src="{% static 'img/default-user.png' %}"
|
||||
style="width: 100px;
|
||||
height: 100px"
|
||||
alt="Default User Image">
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<p>
|
||||
<strong>{{ _("Name") }}:</strong> {{ user_.name }}
|
||||
</p>
|
||||
<p>
|
||||
<strong>{{ _("Arabic Name") }}:</strong> {{ user_.arabic_name }}
|
||||
</p>
|
||||
<p>
|
||||
<strong>{{ _("Email") }}:</strong> {{ user_.email }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<p>
|
||||
<strong>{{ _("Phone Number") }}:</strong> {{ user_.phone_number }}
|
||||
</p>
|
||||
<div>
|
||||
<span><strong>{{ _("Roles") }}:</strong></span>
|
||||
{% for group in user_.groups %}
|
||||
<span><strong>{{ group.name }}</strong></span>
|
||||
{% if not forloop.last %}<span>&</span>{% endif %}
|
||||
{% endfor %}
|
||||
<div>
|
||||
<a href="{% url 'user_update' request.dealer.slug user_.slug %}" class="btn btn-phoenix-primary btn-sm me-2">
|
||||
<i class="fa-solid fa-pen-to-square me-2"></i>{% trans "Edit" %}
|
||||
</a>
|
||||
<button class="btn btn-phoenix-danger btn-sm delete-btn" data-url="{% url 'user_delete' request.dealer.slug user_.slug %}"
|
||||
data-message='{% trans "Are you sure you want to delete this user?" %}'
|
||||
data-bs-toggle="modal" data-bs-target="#deleteModal">
|
||||
<i class="fas fa-trash-alt me-2"></i>{% trans "Delete" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100 border-0 shadow-sm rounded-3">
|
||||
<div class="card-body text-center p-3">
|
||||
<div class="position-relative d-inline-block mb-3">
|
||||
{% if user_.logo %}
|
||||
<img class="rounded-circle border border-4 border-body-tertiary"
|
||||
src="{{ user_.logo.url }}" alt="{{ user_.name }}"
|
||||
style="object-fit: cover; width: 100px; height: 100px;">
|
||||
{% else %}
|
||||
<div class="rounded-circle d-inline-flex align-items-center justify-content-center bg-primary text-white"
|
||||
style="width: 100px; height: 100px; font-size: 2.5rem;">
|
||||
{{ user_.name|first|upper }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<h2 class="h6 fw-bold mb-1">{{ user_.name }}</h2>
|
||||
<p class="small mb-3"> <a href="mailto:{{ user_.email }}" class="text-secondary">{{ user_.email }}</a></p>
|
||||
<div class="d-grid gap-1">
|
||||
<a href="tel:{{ user_.phone_number }}" class="btn btn-outline-primary btn-sm">
|
||||
<i class="fas fa-phone-alt me-2"></i>{{ user_.phone_number|default:"N/A" }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive scrollbar mx-n1 px-1">
|
||||
<div class="card-header "></div>
|
||||
<h4 class="my-4">Groups</h4>
|
||||
<a class="btn btn-sm btn-phoenix-primary mt-2 mb-4"
|
||||
href="{% url 'user_groups' request.dealer.slug user_.slug %}"><i class="fa-solid fa-users"></i> Manage Groups</a>
|
||||
<table class="table table-hover table-responsive-sm fs-9 mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% trans 'name'|capfirst %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for group in user_.groups %}
|
||||
<tr>
|
||||
<td>{{ group }}</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td>{% trans "No Group" %}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-footer d-flex ">
|
||||
<a class="btn btn-sm btn-phoenix-primary me-3"
|
||||
href="{% url 'user_update' request.dealer.slug user_.slug %}">
|
||||
{{ _("Edit") }}
|
||||
<i class="fa-solid fa-pen-to-square"></i>
|
||||
</a>
|
||||
<button class="btn btn-phoenix-danger btn-sm delete-btn me-3"
|
||||
data-url="{% url 'user_delete' request.dealer.slug user_.slug %}"
|
||||
data-message='{{ _("Are you sure you want to delete this user?") }}'
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#deleteModal">
|
||||
{{ _("Delete") }}
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
<a class="btn btn-sm btn-phoenix-secondary me-3"
|
||||
href="{% url 'user_list' request.dealer.slug %}">
|
||||
{{ _("Back to Staffs List") }}
|
||||
<i class="fa-regular fa-circle-left"></i>
|
||||
</a>
|
||||
<a class="btn btn-sm btn-phoenix-secondary"
|
||||
href="{% url 'staff_password_reset' request.dealer.slug user_.pk %}">
|
||||
{{ _("Reset Password") }}
|
||||
<i class="fa-solid fa-key"></i>
|
||||
</a>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div class="card h-100 border-0 shadow-sm rounded-3">
|
||||
<div class="card-body p-3">
|
||||
<h4 class="mb-3 text-primary h6">{% trans "Personal Information" %}</h4>
|
||||
<div class="row g-2 mb-4">
|
||||
<div class="col-md-6">
|
||||
<p class="small mb-0">{% trans "Arabic Name" %}</p>
|
||||
<p class="fw-bold small mb-0">{{ user_.arabic_name|default:"N/A" }}</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<p class="small mb-0">{% trans "Roles" %}</p>
|
||||
<p class="fw-bold small mb-0">
|
||||
{% for group in user_.groups %}
|
||||
{{ group.name }} {% if not forloop.last %}·{% endif %}
|
||||
{% empty %}
|
||||
<span class="text-muted">N/A</span>
|
||||
{% endfor %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h4 class="mb-0 text-primary h6">{% trans "Assigned Groups" %}</h4>
|
||||
<a class="btn btn-sm btn-phoenix-primary" href="{% url 'user_groups' request.dealer.slug user_.slug %}">
|
||||
<i class="fa-solid fa-users me-2"></i>{% trans "Manage Groups" %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="table-responsive scrollbar">
|
||||
<table class="table table-hover table-striped fs--1 mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="text-nowrap">{% trans 'Group Name'|capfirst %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for group in user_.groups %}
|
||||
<tr>
|
||||
<td class="small">{{ group }}</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td class="text-secondary small">{% trans "This user is not assigned to any groups." %}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include 'modal/delete_modal.html' %}
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
@ -5,32 +5,37 @@
|
||||
{% trans "Group" %}
|
||||
{% endblock title %}
|
||||
{% block content %}
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<div class="col-sm-9">
|
||||
<div class="d-sm-flex justify-content-between">
|
||||
<h3 class="mb-3"><i class="fa-solid fa-users"></i> {{ _("Manage Groups") }}</h3>
|
||||
|
||||
<div class="row justify-content-center mt-5 mb-3">
|
||||
|
||||
<div class="col-lg-8 col-md-10">
|
||||
<div class="card shadow-sm border-0 rounded-3">
|
||||
<div class="card-header bg-gray-200 py-3 border-0 rounded-top-3">
|
||||
<h3 class="mb-0 fs-5 text-center">
|
||||
{{ _("Manage Groups") }}<i class="fa-solid fa-users ms-2 text-primary"></i>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body bg-light-subtle">
|
||||
<form class="row g-3 mb-3" method="post" class="form" enctype="multipart/form-data" novalidate >
|
||||
{% csrf_token %}
|
||||
{{ redirect_field }}
|
||||
{{ form|crispy }}
|
||||
{% for error in form.errors %}<div class="text-danger">{{ error }}</div>{% endfor %}
|
||||
<hr class="my-2">
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-center mt-3">
|
||||
<button class="btn btn-lg btn-phoenix-primary md-me-2" type="submit"><i class="fa-solid fa-floppy-disk me-1"></i>{{ _("Save") }}</button>
|
||||
<a href="{% url 'user_detail' request.dealer.slug staff.slug %}" class="btn btn-lg btn-phoenix-secondary"><i class="fa-solid fa-ban me-1"></i>{% trans "Cancel" %}</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-9">
|
||||
<form class="row g-3 mb-9" method="post" class="form" novalidate>
|
||||
{% csrf_token %}
|
||||
{{ redirect_field }}
|
||||
{{ form|crispy }}
|
||||
{% for error in form.errors %}
|
||||
<div class="text-danger">{{ error }}</div>
|
||||
{% endfor %}
|
||||
<div class="d-flex mb-3">
|
||||
<a href="{% url 'user_detail' request.dealer.slug staff.slug %}" class="btn btn-phoenix-primary me-2 px-6"><i class="fa-solid fa-ban"></i> {% trans "Cancel" %}</a>
|
||||
<button class="btn btn-phoenix-primary" type="submit">
|
||||
<i class="fa-solid fa-floppy-disk"></i>
|
||||
{{ _("Save") }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,94 +1,100 @@
|
||||
{% extends "base.html" %}
|
||||
{% load i18n %}
|
||||
{% load render_table from django_tables2 %}
|
||||
|
||||
{% block title %}
|
||||
{% trans "Staffs" %}
|
||||
{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{%if users or request.GET.q%}
|
||||
<section class="">
|
||||
<div class="row mt-4">
|
||||
<div class="col-auto">
|
||||
<div class="d-md-flex justify-content-between">
|
||||
<div>
|
||||
{% if request.user.userplan %}
|
||||
<a href="{% url 'user_create' request.dealer.slug %}"
|
||||
class="btn btn-sm btn-phoenix-primary me-4"><i class="fa-solid fa-user-tie me-1"></i> {% trans "Add New Staff" %}</a>
|
||||
<a href="{% url 'group_list' request.dealer.slug %}"
|
||||
class="btn btn-sm btn-phoenix-success"><i class="fa-solid fa-user-group me-1"></i> {% trans "Manage Groups & Permissions" %}</a>
|
||||
{% else %}
|
||||
{%if users or request.GET.q%}
|
||||
<div class="container py-4">
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<h1 class="h3 mb-0">{% trans "Staffs" %}<i class="fa-solid fa-user-tie text-primary ms-2"></i></h1>
|
||||
{% if request.user.userplan %}
|
||||
<div>
|
||||
<a href="{% url 'user_create' request.dealer.slug %}" class="btn btn-phoenix-primary me-2">
|
||||
<i class="fa-solid fa-plus me-2"></i>{% trans "Add New Staff" %}
|
||||
</a>
|
||||
<a href="{% url 'group_list' request.dealer.slug %}" class="btn btn-phoenix-secondary">
|
||||
<i class="fa-solid fa-user-group me-2"></i>{% trans "Manage Groups" %}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% url "pricing_page" request.dealer.slug as pricing_page_url %}
|
||||
{% include "message-illustration.html" with value1="No Active Plan, please create your subscription plan." value2="Manage Subscription" url=pricing_page_url %}
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card shadow-sm border-0">
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive scrollbar">
|
||||
<table class="table table-hover table-striped mb-0">
|
||||
<thead>
|
||||
<tr class="bg-body-highlight">
|
||||
<th>{% trans 'name'|capfirst %}</th>
|
||||
<th>{% trans 'email'|capfirst %}</th>
|
||||
<th>{% trans 'phone number'|capfirst %}</th>
|
||||
<th>{% trans 'role'|capfirst %}</th>
|
||||
<th>{% trans 'actions'|capfirst %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for user in users %}
|
||||
<tr>
|
||||
<td class="align-middle white-space-nowrap ps-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar avatar-tiny me-2">
|
||||
{% if user.logo %}
|
||||
<img class="avatar-img rounded-circle"
|
||||
src="{{ user.thumbnail.url }}"
|
||||
onerror="this.src='/static/user-logo.jpg'"
|
||||
alt="{{ user.name }}'s logo">
|
||||
{% else %}
|
||||
<div class="rounded-circle bg-light d-flex justify-content-center align-items-center" style="width: 2rem; height: 2rem; font-size: 0.8rem;">
|
||||
{{ user.name|first|upper }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<a class="fw-bold text-decoration-none text-dark"
|
||||
href="{% url 'user_detail' request.dealer.slug user.slug %}">
|
||||
{{ user.name }}
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle white-space-nowrap">{{ user.email }}</td>
|
||||
<td class="align-middle white-space-nowrap">{{ user.phone_number }}</td>
|
||||
<td class="align-middle white-space-nowrap">
|
||||
{% for group in user.groups %}
|
||||
<span class="badge bg-primary me-1">{{ group.name|title }}</span>
|
||||
{% endfor %}
|
||||
</td>
|
||||
<td class="align-middle white-space-nowrap">
|
||||
<a class="btn btn-phoenix-success"
|
||||
href="{% url 'user_detail' request.dealer.slug user.slug %}">
|
||||
<i class="fa-solid fa-eye me-1"></i>{% trans 'View' %}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive scrollbar mx-n1 px-1 mt-3">
|
||||
<table class="table align-items-center table-flush table-hover">
|
||||
<thead>
|
||||
<tr class="bg-body-highlight">
|
||||
<th>{% trans 'name'|capfirst %}</th>
|
||||
<th>{% trans 'email'|capfirst %}</th>
|
||||
<th>{% trans 'phone number'|capfirst %}</th>
|
||||
<th>{% trans 'role'|capfirst %}</th>
|
||||
<th>{% trans 'actions'|capfirst %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for user in users %}
|
||||
<tr>
|
||||
<td class="align-middle white-space-nowrap ps-1">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar avatar-tiny me-2">
|
||||
{% if user.logo %}
|
||||
<img class="avatar-img rounded-circle"
|
||||
src="{{user.thumbnail.url}}"
|
||||
onerror="this.src='/static/user-logo.jpg'"
|
||||
alt="Logo">
|
||||
{% endif %}
|
||||
</div>
|
||||
<a class="fs-8 fw-bold"
|
||||
href="{% url 'user_detail' request.dealer.slug user.slug %}">{{ user.arabic_name }}</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle white-space-nowrap align-items-center">{{ user.email }}</td>
|
||||
<td class="align-middle white-space-nowrap align-items-center justify-content-center">{{ user.phone_number }}</td>
|
||||
<td>
|
||||
{% for group in user.groups %}
|
||||
<span class="badge badge-sm bg-primary text-center"><i class="fa-solid fa-scroll"></i> {% trans group.name|title %}</span>
|
||||
{% endfor %}
|
||||
</td>
|
||||
<td class="align-middle white-space-nowrap">
|
||||
<a class="btn btn-phoenix-success"
|
||||
href="{% url 'user_detail' request.dealer.slug user.slug %}">
|
||||
<i class="fa-solid fa-eye"></i>
|
||||
{% trans 'view'|capfirst %}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center">
|
||||
{% if is_paginated %}
|
||||
|
||||
{% if is_paginated %}
|
||||
<div class="d-flex justify-content-center mt-3">
|
||||
{% include 'partials/pagination.html' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% else %}
|
||||
{% if request.user.userplan %}
|
||||
{% url "user_create" request.dealer.slug as create_staff_url %}
|
||||
{% url "user_create" request.dealer.slug as create_staff_url %}
|
||||
{% include "empty-illustration-page.html" with value="staff" url=create_staff_url %}
|
||||
|
||||
{% else %}
|
||||
{% url "pricing_page" request.dealer.slug as pricing_page_url %}
|
||||
{% include "message-illustration.html" with value1=_("No active plan, Please create a subscription plan.") value2=_("Buy Plan") url=pricing_page_url %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% endblock %}
|
||||
Loading…
x
Reference in New Issue
Block a user